/* =========================================================
   LA DHUYS ACADÉMIE — HOME REDESIGN
   Charge APRÈS global.css. Ne modifie que la page d'accueil :
   les autres pages du site restent inchangées.
========================================================= */

/* ---- Header : version teintée crème + CTA pilule ---- */
.header--tinted{ background:rgba(255,254,245,.9); }
.header--tinted .header__inner{ height:88px; }
.btn--pill{ border-radius:999px; }

/* ---- Menu mobile fonctionnel (le bouton existait déjà, il manquait le comportement) ---- */
@media (max-width:680px){
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); border-top:1px solid var(--border);
    padding:.5rem 5% 1.2rem;
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .2s var(--ease), transform .2s var(--ease);
  }
  .nav--open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav__links{ display:flex!important; flex-direction:column; gap:0; }
  .nav__links a{ padding:.85rem 0; border-bottom:1px solid var(--border); }
  .nav__links a.active::after{ display:none; }
  .header .btn{ display:inline-flex!important; margin-top:1rem; justify-content:center; }
}

/* ---- Reveal au scroll ---- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* ---- Reveal en cascade pour les éléments d'une grille ---- */
.reveal-item{
  opacity:0; transform:translateY(18px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay:calc(var(--i, 0) * 80ms);
}
.reveal.is-visible .reveal-item{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .reveal-item{ opacity:1!important; transform:none!important; transition:none!important; transition-delay:0s!important; }
}

/* ---- Header : ombre légère une fois qu'on a scrollé ---- */
.header{ transition:box-shadow .3s var(--ease), background .3s var(--ease); }
.header--scrolled{ box-shadow:0 8px 28px rgba(20,20,63,.1); }

/* ---- Hover premium : galerie et cartes bento ---- */
.gallery-masonry__main,
.gallery-masonry__col > div{
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.gallery-masonry__main:hover,
.gallery-masonry__col > div:hover{ transform:scale(1.015); box-shadow:var(--shadow-md); }
.bento__card{ transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.bento__card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }

/* =========================================================
   HERO — photo plein cadre, asymétrique
========================================================= */
.hero-photo{ position:relative; height:min(78vh,680px); min-height:520px; overflow:hidden; background:var(--navy); }
.hero-photo__media{
  position:absolute; left:0; right:0; top:-8%; height:116%;
  background:radial-gradient(120% 120% at 80% 0%,var(--navy) 0%,var(--navy-deep) 45%,var(--navy-night) 100%);
  will-change:transform;
}
.hero-photo__media img{ width:100%; height:100%; object-fit:cover; display:block }
.hero-photo__overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(20,20,63,.92) 0%,rgba(20,20,63,.5) 40%,rgba(20,20,63,.05) 70%,rgba(20,20,63,0) 100%);
}
.hero-photo__eyebrow{
  position:absolute; top:2.4rem; left:5%; z-index:2;
  color:var(--sky); font-family:var(--font-title); font-weight:700; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.16em;
}
.hero-photo__content{
  position:absolute; left:5%; right:5%; bottom:3rem; z-index:2;
  display:grid; grid-template-columns:1.4fr .8fr; gap:3rem; align-items:end;
}
.hero-photo__title{
  font-family:var(--font-title); font-weight:800; color:#fff;
  font-size:clamp(2.4rem,5.6vw,4.4rem); line-height:.98; letter-spacing:-.03em; margin:0;
}
.hero-photo__title .grad{ color:var(--gold) }
.hero-photo__lead{ color:var(--sky-soft); font-size:1.06rem; line-height:1.6; margin-bottom:1.6rem }

/* =========================================================
   BENTO — chiffres + à propos teaser
========================================================= */
.bento{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-auto-rows:auto; gap:1.1rem;
  padding:5.5rem 0 2rem;
}
.bento__card{ border-radius:24px; padding:2.2rem; display:flex; flex-direction:column; justify-content:center }
.bento__card--about{
  grid-row:span 2; background:var(--navy); color:#fff; justify-content:space-between;
}
.bento__card--about span{ font-family:var(--font-title); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--sky) }
.bento__card--about p{ font-family:var(--font-title); font-weight:700; font-size:1.5rem; line-height:1.35; margin:1.4rem 0 }
.bento__card--about a{ color:var(--sky); font-size:.88rem }
.bento__card--about a:hover{ color:#fff }
.bento__card--cream{ background:var(--cream) }
.bento__card--gold{ background:var(--gold) }
.bento__num{ font-family:var(--font-title); font-weight:800; font-size:2.6rem; color:var(--navy); line-height:1 }
.bento__label{ color:var(--muted); font-size:.88rem; margin-top:.4rem }
.bento__note{ font-family:var(--font-title); font-weight:800; font-size:1.4rem; color:var(--navy); line-height:1.2 }
.bento__rating{ display:flex; align-items:center; gap:.9rem }
.bento__rating i{ color:var(--gold-deep); font-size:1.15rem }
.bento__rating span{ font-family:var(--font-title); font-weight:700; color:var(--navy); font-size:.92rem }

/* =========================================================
   FORMATIONS — liste éditoriale
========================================================= */
.courses-list{ display:flex; flex-direction:column }
.course-row{
  display:grid; grid-template-columns:60px 2fr 3fr auto; align-items:center; gap:2rem;
  padding:1.8rem 0; border-top:1px solid var(--border); text-decoration:none;
  transition:padding-left .25s var(--ease);
}
.courses-list > .course-row:last-child{ border-bottom:1px solid var(--border) }
.course-row:hover{ padding-left:.6rem }
.course-row__index{ font-family:var(--font-title); font-weight:800; font-size:1.1rem; color:var(--sky) }
.course-row__titlewrap{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; }
.course-row__title{ font-family:var(--font-title); font-weight:700; color:var(--navy); font-size:1.2rem }
.course-row__badge{
  display:inline-block;
  font-family:var(--font-title); font-weight:700; font-size:.64rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--navy); background:var(--gold); padding:.3rem .7rem; border-radius:30px; white-space:nowrap;
}
.course-row__desc{ color:var(--muted); font-size:.96rem }
.course-row__arrow{
  width:44px; height:44px; border-radius:50%; background:var(--sky-soft); color:var(--navy);
  display:grid; place-items:center; flex:none; font-size:.95rem;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.course-row:hover .course-row__arrow{ background:var(--navy); color:var(--gold) }

/* =========================================================
   TRAJECTOIRE — chiffres fantômes
========================================================= */
.trajectoire-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem }
.trajectoire-step{ position:relative; padding-top:1.4rem; border-top:3px solid var(--navy) }
.trajectoire-step--sky{ border-color:var(--sky) }
.trajectoire-step--gold{ border-color:var(--gold) }
.trajectoire-step__num{
  display:block; font-family:var(--font-title); font-weight:800; font-size:3.4rem; line-height:1;
  color:var(--sky-soft); margin-bottom:1rem;
}
.trajectoire-step h3{ font-family:var(--font-title); font-weight:700; color:var(--navy); font-size:1.05rem; margin-bottom:.4rem }
.trajectoire-step p{ color:var(--muted); font-size:.9rem }

/* =========================================================
   LE JEU — bloc navy, mockup en chevauchement
========================================================= */
.jeu-photo{ background:radial-gradient(120% 120% at 80% 0%,var(--navy) 0%,var(--navy-deep) 45%,var(--navy-night) 100%); padding:5.5rem 0 0; position:relative; overflow:hidden }
.jeu-photo__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center }
.jeu-photo__text{ padding-bottom:5.5rem }
.jeu-photo__visual{ position:relative; display:flex; justify-content:center }
.phone-mock{
  width:250px; border-radius:32px; background:var(--navy-deep); border:6px solid var(--navy-deep);
  box-shadow:0 30px 70px rgba(0,0,0,.45); margin-bottom:-4.5rem; position:relative; z-index:2;
}
.phone-mock__notch{ height:20px; display:flex; align-items:center; justify-content:center }
.phone-mock__notch span{ width:44px; height:5px; border-radius:3px; background:rgba(255,255,255,.25) }
.phone-mock__screen{
  aspect-ratio:9/17; border-radius:26px; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(circle at 30% 22%,var(--sky),var(--navy) 75%);
}
.phone-mock__screen i{ font-size:2.6rem; color:var(--gold); filter:drop-shadow(0 0 14px rgba(254,205,80,.6)) }
.jeu-photo__badge{
  position:absolute; top:0; right:8%; width:52px; height:52px; border-radius:50%; background:var(--gold);
  display:grid; place-items:center; box-shadow:0 8px 20px rgba(254,205,80,.5); z-index:3;
  animation:floaty 5s ease-in-out infinite;
}
.jeu-photo__badge i{ color:var(--navy); font-size:1.2rem }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
.jeu-photo__title{ font-family:var(--font-title); font-weight:800; color:#fff; font-size:clamp(1.9rem,3.6vw,2.6rem); margin:1rem 0 1.2rem; line-height:1.15 }
.jeu-photo__title .grad{ color:var(--gold) }
.jeu-photo__lead{ color:var(--sky); font-size:1.05rem; max-width:44ch; margin-bottom:1.8rem }

/* =========================================================
   À PROPOS — photo + panneau en chevauchement
========================================================= */
.about-photo{ display:grid; grid-template-columns:.85fr 1.15fr; gap:0; padding:8rem 0 5rem }
.about-photo__media{ position:relative; padding-right:2rem }
.about-photo__frame{
  border-radius:24px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-md);
  background:linear-gradient(160deg,var(--sky-soft),var(--sky));
}
.about-photo__frame img{ width:100%; height:100%; object-fit:cover; display:block }
.about-photo__panel{
  background:var(--navy); border-radius:24px; color:#fff; padding:3.2rem; margin-left:-4rem;
  display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1;
}
.about-photo__panel h2{ color:#fff; font-size:clamp(1.7rem,3vw,2.1rem); margin:.9rem 0 1.3rem }
.about-photo__panel p{ color:var(--sky-soft); font-size:1.02rem; margin-bottom:1.1rem }
.about-photo__panel a{ color:var(--gold); font-family:var(--font-title); font-weight:700; font-size:.94rem }
.about-photo__panel a:hover{ color:#fff }

/* =========================================================
   ATOUTS — cartes avec badge icône, sur fond crème
========================================================= */
.atouts-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem }
.atout-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:2rem 1.6rem; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.atout-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.atout-card__icon{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background:var(--navy); color:var(--gold); font-size:1.35rem; margin-bottom:1.3rem;
}
.atout-card h3{ font-family:var(--font-title); font-weight:700; color:var(--navy); font-size:1.08rem; margin-bottom:.5rem }
.atout-card p{ color:var(--muted); font-size:.94rem; line-height:1.5 }

/* =========================================================
   GALERIE — masonry asymétrique
========================================================= */
.gallery-masonry{ display:grid; grid-template-columns:1.4fr 1fr; gap:1.2rem }
.gallery-masonry__main,
.gallery-masonry__col > div{
  border-radius:24px; overflow:hidden; position:relative;
  background-color:var(--navy); background-size:cover; background-position:center; background-repeat:no-repeat;
}
.gallery-masonry__main{ min-height:420px; }
.gallery-masonry__col{ display:flex; flex-direction:column; gap:1.2rem }
.gallery-masonry__col > div{ flex:1; min-height:200px; }

/* ---- Témoignages : cartes plus douces (surcouche de global.css) ---- */
.testi__card{ border:none; border-radius:24px; box-shadow:0 12px 32px rgba(40,40,120,.1),0 2px 8px rgba(40,40,120,.06); }

/* =========================================================
   FAQ — deux colonnes
========================================================= */
.faq-split{ display:grid; grid-template-columns:.8fr 1.2fr; gap:4rem }
.faq-split .faq{ max-width:none }
.faq-split details{ background:var(--cream); border:none; border-radius:16px }
.faq-split details[open]{ border:none }

/* =========================================================
   CTA FINAL — bloc plein largeur arrondi
========================================================= */
.cta-block{ background:var(--navy); border-radius:28px; padding:5rem 2rem; text-align:center }
.cta-block h2{ color:#fff; font-size:clamp(1.8rem,3.4vw,2.4rem); margin-bottom:1.1rem }
.cta-block p{ color:var(--sky); font-size:1.06rem; margin-bottom:2rem }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:980px){
  .hero-photo__content{ grid-template-columns:1fr; }
  .jeu-photo__grid,
  .about-photo{ grid-template-columns:1fr; }
  .about-photo__panel{ margin-left:0; margin-top:-3rem; }
  .bento{ grid-template-columns:1fr 1fr; }
  .trajectoire-grid,
  .atouts-grid{ grid-template-columns:repeat(2,1fr); gap:2rem; }
  .faq-split{ grid-template-columns:1fr; gap:2rem; }
  .course-row{ grid-template-columns:40px 1fr; }
  .course-row__desc, .course-row__arrow{ display:none; }
}
@media (max-width:680px){
  .bento{ grid-template-columns:1fr; }
  .bento__card--about{ grid-row:auto; }
  .gallery-masonry{ grid-template-columns:1fr; }
  .trajectoire-grid,
  .atouts-grid{ grid-template-columns:1fr; }
}