:root{
  /* Palette Kaliken Premium SaaS */
  --brand: #0f766e;          /* Teal foncé pro */
  --brand-hover: #0d9488;
  --brand2:#FBC02D;          /* jaune accent */
  --accent:#E64A19;          /* orange accent */
  --bg:    #F8FAFC;          /* slate très clair */
  --bg2:   #ffffff;          /* blanc */
  --card:  #ffffff;
  --stroke: rgba(15, 23, 42, 0.06);

  --txt:   #0f172a;          /* slate-900 */
  --muted: #64748b;          /* slate-500 */

  --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.05);
  --shadow-glow: 0 10px 30px -5px rgba(15, 118, 110, 0.2);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--txt);
  background: var(--bg);
  background-image: 
    radial-gradient(1000px circle at top center, rgba(15,118,110,0.04), transparent 70%),
    radial-gradient(1200px circle at bottom right, rgba(251,192,45,0.05), transparent 60%);
  background-attachment: fixed;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:1100px; margin:0 auto; padding:24px 18px 64px}
.muted{color:var(--muted); line-height:1.7}
h1,h2,h3,h4,h5,h6{
  letter-spacing:-.03em;
  font-weight: 700;
  color: #0f172a;
}

.top{
  position:sticky; top:0; z-index:50;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.62);
  border-bottom: 1px solid var(--stroke);
}
.top__inner{
  max-width:1100px; margin:0 auto;
  padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.back{color: rgba(10,14,18,.75)}
.brand{display:flex; gap:12px; align-items:center}
.brand__logo{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background: transparent;
}
.brand-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand__name{font-weight:900}
.brand__tag{font-size:12px; color:var(--muted)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px;
  border-radius: 12px;
  background: var(--brand);
  color:#fff;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  font-weight:600;
  font-size: 15px;
  transition: all 0.2s ease;
}
.btn:hover{
  background: var(--brand-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.btn.ghost{
  background: #ffffff;
  color: var(--txt);
  box-shadow: var(--shadow-sm);
  border:1px solid var(--stroke);
}
.btn.ghost:hover{
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Sections */
.section{margin-top:40px}
.section h2{margin: 0 0 12px; font-size: clamp(24px, 3vw, 32px)}

/* Hero */
.hero{
  position:relative;
  border-radius: 24px;
  overflow:hidden;
  box-shadow: var(--shadow-md);
  border:1px solid var(--stroke);
  background: #ffffff;
}

/* Background image (school) */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--bg); /* url(...) set inline in PHP */
  background-size: cover;
  background-position: center;
  opacity:.06; /* discret sur fond clair */
  filter: grayscale(100%);
}

/* Overlay for readability */
.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,1));
}

.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:32px;
  padding: 48px 40px;
  align-items:center;
}

.pill{
  display:inline-flex;
  padding:6px 14px;
  border-radius: 999px;
  background: #fef9c3;
  border:1px solid #fef08a;
  color: #a16207;
  width: fit-content;
  font-weight:600;
  font-size: 13px;
  margin-bottom: 24px;
}

.hero h1{margin:0 0 8px; font-size: clamp(36px, 4.5vw, 56px); line-height:1.1; letter-spacing: -0.04em;}
.hero h4{margin:0 0 16px; font-size: 18px; color: var(--muted); font-weight: 500;}
.lead{color:var(--muted); font-size:18px; line-height:1.6; max-width: 58ch}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}

/* Meta cards */
.hero__meta{
  margin-top:24px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.metaCard{
  padding:12px 16px;
  border-radius: 12px;
  background: #f8fafc;
  border:1px solid var(--stroke);
}
.metaK{font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.02em}
.metaV{margin-top:4px; font-weight:600; font-size:14px; line-height:1.4}
.metaV b{color: var(--brand)}

/* Hero shot */
.heroShot{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  background: #fff;
  border:1px solid var(--stroke);
  box-shadow: var(--shadow-lg);
  min-height: 320px;
  transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
  transition: transform 0.5s ease;
}
.heroShot:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
.heroShot img{width:100%; height: auto; object-fit:cover; display:block;}
.heroShot__badge{
  position:absolute; right:12px; bottom:12px;
  font-size:12px;
  padding:6px 12px;
  border-radius:999px;
  background: rgba(15,23,42,.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border:1px solid rgba(255,255,255,.1);
  color: #fff;
  font-weight:600;
}

/* Feature grid */
.features_grid{
  margin-top:24px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:20px;
}
.feature_card{
  padding: 24px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature_card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.feature_icon{
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: #f0fdfa;
  color: var(--brand);
  font-size: 24px;
  margin-bottom: 16px;
}
.feature_title{
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
}
.feature_desc{
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}

/* Cards, blocks (team/stats/timeline/gallery/contact) */
.stat, .member, .milestone, .shot, .contact__box{
  background: #ffffff;
  border:1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat:hover, .member:hover, .milestone:hover, .shot:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.phTitle{font-weight:600}
.phPath{font-size:12px; opacity:.8; margin-top:6px}

.stats{
  margin-top:24px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}
.stat{
  padding:20px;
  border-radius: 16px;
}
.stat__k{font-size:13px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.02em;}
.stat__v{margin-top:6px; font-weight:700; font-size:16px;}

.team{
  margin-top:24px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:20px;
}
.member{
  border-radius: 16px;
  overflow:hidden;
}
.member__img{height:160px; background: #e2e8f0; display:grid; place-items:center}
.member__img img{width:100%; height:160px; object-fit:cover; display:block}
.imgPh{opacity:.6; font-weight:500}
.member__txt{padding:16px}
.member__name{font-weight:700; font-size: 16px;}
.member__role{margin-top:4px; font-size:13px; color: var(--brand); font-weight:600}
.member__note{margin-top:8px; font-size:14px; color:var(--muted); line-height:1.5; padding-bottom: 4px}

.timeline{
  margin-top:24px;
  display:grid;
  gap:16px;
}
.milestone{
  display:flex;
  gap:16px;
  padding:16px 20px;
  border-radius: 16px;
}
.milestone__icon{
  flex-shrink: 0;
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: #f0fdfa;
  border:1px solid #ccfbf1;
  font-size: 20px;
}
.milestone__top{display:flex; gap:12px; flex-wrap:wrap; align-items:baseline}
.milestone__date{font-size:12px; color: var(--brand); font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.milestone__title{font-weight:700; font-size: 17px;}
.milestone__desc{margin-top:6px; color:var(--muted); line-height:1.6; font-size:15px;}

.gallery{
  margin-top:24px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:20px;
}
.shot{
  margin:0;
  border-radius: 16px;
  overflow:hidden;
  cursor: zoom-in;
}
.shot img{width:100%; height:300px; object-fit:cover; display:block;}
.shot figcaption{
  padding:16px;
  font-size:14px;
  color:var(--muted);
  line-height:1.5;
  background: white;
  border-top:1px solid var(--stroke);
}

/* Galerie V3 */
.pill--v3{
  background: #f0fdfa;
  border-color: #99f6e4;
  color: var(--brand);
}
.galV3__header{
  text-align:center;
  margin-bottom: 8px;
}
.galV3__header .pill{
  margin: 0 auto 20px;
}
.gallery--v3{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.gallery--v3 .shot img{
  height: 200px;
}

.contact__box{
  margin-top:24px;
  padding:32px 32px;
  border-radius: 20px;
  text-align: center;
  background: white;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.contact__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

.foot{ margin-top: 22px; padding: 18px 6px 0; color: var(--muted); display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.sepDot{opacity:.4}

/* Lightbox */
.lightbox{position:fixed; inset:0; display:none; z-index:200;}
.lightbox.is-open{display:block;}
.lightbox__backdrop{position:absolute; inset:0; background: rgba(10,14,18,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);}

/* ✅ IMPORTANT: layout stable */
.lightbox__content{
  position:absolute;
  inset: clamp(14px, 4vw, 60px);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow:hidden;

  /* remplace grid => flex */
  display:flex;
  flex-direction:column;
}

/* ✅ image peut rétrécir (sinon elle pousse le caption hors zone) */
.lightbox__img{
  width:100%;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  object-fit: contain;
  display:block;
  background: rgba(0,0,0,.10);
}

/* ✅ caption toujours visible (ou scroll si trop long) */
.lightbox__cap{
  flex: 0 0 auto;
  padding: 12px 14px;
  color: var(--muted);
  line-height: 1.6;
  border-top: 1px solid var(--stroke);

  max-height: 34vh;
  overflow:auto;

  /* safe area mobile */
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.lightbox__close{
  position:absolute; top:10px; right:10px; z-index:5;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.80);
  color: rgba(10,14,18,.88);
  border-radius: 999px;
  padding: 8px 12px;
  cursor:pointer;
}

/* Optional accent usage (orange) */
a:hover{
  color: var(--accent);
}


/* reveal animation */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease}
.reveal.is-in{opacity:1; transform:none}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr; gap:0px; padding: 32px 24px;}
  .hero h1{font-size: clamp(28px, 6vw, 40px);}
  .lead{font-size:16px;}
  .hero__cta{justify-content:center; margin-top:20px;}
  .hero__meta{grid-template-columns:1fr; margin-top:32px;}
  .heroShot{margin-top:24px; min-height:240px; transform:none !important;}
  .heroShot img{min-height:240px}
  .stats{grid-template-columns:1fr}
  .team{grid-template-columns: repeat(2, minmax(0,1fr))}
  .gallery{grid-template-columns:1fr}
  .gallery--v3{grid-template-columns: repeat(2, minmax(0,1fr))}
  .features_grid{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .wrap{padding: 16px 12px 48px;}
  .top__inner{flex-direction: column; align-items:flex-start; gap:8px;}
  .team{grid-template-columns: 1fr}
  .milestone{flex-direction: column; text-align: left; align-items: flex-start;}
  .contact__box{padding: 24px 16px;}
  .section h2{font-size: 24px;}
}
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none}
  .feature_card, .stat, .member, .milestone, .shot, .btn{transition:none}
}