/* =========================================================
   LA DHUYS ACADÉMIE — PAGE FORMATION (détail d'un parcours)
   Charge APRÈS global.css. Template partagé par les 4 pages :
   permis-de-conduire / decoder-les-fakes-news /
   apprendre-a-coder / les-codes-en-entreprises
========================================================= */

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

/* ---- Menu mobile (identique à la home) ---- */
@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; }
}

/* ---- Header : ombre au scroll (identique à la home) ---- */
.header{ transition:box-shadow .3s var(--ease), background .3s var(--ease); }
.header--scrolled{ box-shadow:0 8px 28px rgba(20,20,63,.1); }

/* ---- Reveal au scroll (identique à la home) ---- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.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,.reveal-item{ opacity:1!important; transform:none!important; transition:none!important; transition-delay:0s!important; }
}

/* =========================================================
   HERO DE FORMATION — photo plein cadre (identique à la home)
========================================================= */
.course-hero{ position:relative; height:min(56vh,480px); min-height:400px; overflow:hidden; background:var(--navy); }
.course-hero__media{
  position:absolute; inset:0;
  background:radial-gradient(120% 120% at 80% 0%,var(--navy) 0%,var(--navy-deep) 45%,var(--navy-night) 100%);
}
.course-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.course-hero__overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(20,20,63,.92) 0%,rgba(20,20,63,.55) 42%,rgba(20,20,63,.12) 72%,rgba(20,20,63,0) 100%);
}
.course-hero__back{
  position:absolute; top:2rem; left:5%; z-index:2;
  font-family:var(--font-title); font-weight:700; font-size:.85rem;
  color:var(--sky); display:inline-flex; align-items:center; gap:.55rem;
}
.course-hero__back:hover{ color:#fff; }
.course-hero__content{
  position:absolute; left:5%; right:5%; bottom:2.6rem; z-index:2; max-width:640px;
}
.course-hero__title{
  font-family:var(--font-title); font-weight:800; color:#fff;
  font-size:clamp(2.1rem,4.4vw,3.5rem); line-height:1.03; letter-spacing:-.02em;
  margin:1rem 0 1rem;
}
.course-hero__lead{ color:var(--sky-soft); font-size:1.06rem; line-height:1.6; margin-bottom:1.5rem; }
.course-hero__tags{ display:flex; flex-wrap:wrap; gap:.65rem; }
.course-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(149,179,223,.14); border:1px solid rgba(149,179,223,.32);
  color:#fff; font-family:var(--font-title); font-weight:600; font-size:.85rem;
  padding:.5rem .95rem; border-radius:30px;
}
.course-tag i{ color:var(--gold); }

/* =========================================================
   ONGLETS DE NAVIGATION — collés sous le header
========================================================= */
.course-tabs{
  position:sticky; top:88px; z-index:40;
  background:var(--cream); border-bottom:1px solid var(--border);
}
.course-tabs__inner{
  display:flex; gap:2.2rem; padding:1.05rem 0; overflow-x:auto;
  -ms-overflow-style:none; scrollbar-width:none;
}
.course-tabs__inner::-webkit-scrollbar{ display:none; }
.course-tabs a{
  font-family:var(--font-title); font-weight:600; font-size:.92rem;
  color:var(--muted); white-space:nowrap; position:relative; padding-bottom:.3rem;
  transition:color .2s var(--ease);
}
.course-tabs a:hover{ color:var(--navy); }
.course-tabs a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1.06rem; height:3px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.course-tabs a.active{ color:var(--navy); }
.course-tabs a.active::after{ transform:scaleX(1); }

/* Décalage d'ancrage pour ne pas passer sous le header + les onglets */
#overview,#modules,#objectifs,#feedbacks{ scroll-margin-top:168px; }

/* =========================================================
   APERÇU — intro + tarifs réels + infos pratiques
========================================================= */
.course-overview{ padding:4.4rem 0 1.4rem; }
.course-overview__intro{ max-width:760px; margin-bottom:3rem; }
.course-overview__intro p{ color:var(--muted); font-size:1.05rem; line-height:1.7; margin-bottom:1.15rem; }
.course-overview__intro p:last-child{ margin-bottom:0; }

.course-overview__panels{ display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:start; }

/* ---- Tableaux de tarifs ---- */
.pricing-block h3{ font-size:1.02rem; margin:0 0 1rem; }
.pricing-block + .pricing-block{ margin-top:2.2rem; }
.pricing-table{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.pricing-table th{
  background:var(--navy); color:#fff; font-family:var(--font-title); font-weight:700;
  text-align:left; padding:.85rem 1.1rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em;
}
.pricing-table td{ padding:.95rem 1.1rem; border-top:1px solid var(--border); font-size:.92rem; color:var(--ink); vertical-align:top; }
.pricing-table tr:first-child td{ border-top:none; }
.pricing-table td:first-child{ font-family:var(--font-title); font-weight:700; color:var(--navy); white-space:nowrap; }
.pricing-table td:last-child{ font-family:var(--font-title); font-weight:800; color:var(--navy); text-align:right; white-space:nowrap; }
.pricing-table__scroll{ overflow-x:auto; border-radius:var(--radius); }
.pricing-note{ font-style:italic; font-size:.85rem; color:var(--muted); margin-top:.9rem; }
.pricing-block .btn{ margin-top:1.6rem; }

/* ---- Callout infos pratiques ---- */
.info-callout{ background:var(--sky-soft); border-radius:20px; padding:1.9rem; }
.info-callout h3{ font-size:1.02rem; margin-bottom:.3rem; }
.info-callout__sub{ color:var(--muted); font-size:.92rem; margin-bottom:1.3rem; }
.info-callout__row{ display:flex; gap:.85rem; align-items:flex-start; margin-bottom:1.1rem; font-size:.94rem; color:var(--ink); line-height:1.55; }
.info-callout__row i{ color:var(--navy); margin-top:.2rem; flex:none; width:1.1rem; text-align:center; }
.info-callout__row strong{ display:block; color:var(--navy); font-family:var(--font-title); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.15rem; }
.info-callout ul.info-callout__why{ margin:.2rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.info-callout__why li{ font-size:.9rem; color:var(--ink); display:flex; gap:.55rem; align-items:center; }
.info-callout__why li i{ color:var(--gold-deep); }
.info-callout__phone{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid rgba(40,40,120,.12); font-size:.9rem; color:var(--muted); }
.info-callout__phone strong{ color:var(--navy); }

/* =========================================================
   MODULES
========================================================= */
.modules-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.module-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.8rem; display:flex; flex-direction:column; gap:.7rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.module-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-sm); border-color:var(--sky); }
.module-card__num{ font-family:var(--font-title); font-weight:800; color:var(--sky); font-size:.95rem; }
.module-card h3{ font-size:1.12rem; }
.module-card p{ color:var(--muted); font-size:.95rem; }

/* =========================================================
   OBJECTIFS
========================================================= */
.objectifs-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.3rem 2.2rem; max-width:920px; }
.objectifs-list li{ display:flex; gap:.9rem; align-items:flex-start; font-size:1.02rem; color:var(--ink); line-height:1.5; }
.objectifs-list li i{ color:var(--gold-deep); margin-top:.3rem; flex:none; }

/* ---- Variante compacte du hero (formations "bientôt disponible", pas de photo/tabs) ---- */
.course-hero--compact{ height:auto; min-height:0; padding:6rem 0 5rem; display:flex; align-items:center; }
.course-hero--compact .course-hero__content{ position:relative; left:auto; right:auto; bottom:auto; max-width:640px; margin:0 auto; text-align:center; }
.course-hero--compact .course-hero__tags{ justify-content:center; }
.course-hero--compact .course-hero__back{ left:50%; transform:translateX(-50%); }

/* =========================================================
   BIENTÔT DISPONIBLE — page des formations pas encore ouvertes
========================================================= */
.coming-soon{ max-width:600px; margin:0 auto; text-align:center; padding:4.5rem 0 5.5rem; }
.coming-soon__badge{
  width:104px; height:104px; border-radius:50%; margin:0 auto 1.5rem;
  background:radial-gradient(circle at 32% 26%,var(--sky),var(--navy) 74%);
  box-shadow:0 0 46px rgba(149,179,223,.3), inset -8px -8px 24px rgba(20,20,63,.5);
  display:grid; place-items:center;
}
.coming-soon__badge i{ font-size:2.2rem; color:var(--gold); filter:drop-shadow(0 0 12px rgba(254,205,80,.6)); }
.coming-soon h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin:0 0 1rem; }
.coming-soon p{ color:var(--muted); font-size:1.04rem; line-height:1.7; margin-bottom:2rem; }
.coming-soon__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

.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){
  .course-overview__panels{ grid-template-columns:1fr; gap:2.2rem; }
  .modules-grid{ grid-template-columns:1fr; }
  .objectifs-list{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .course-hero{ height:min(64vh,440px); }
  .course-hero__content{ bottom:2rem; }
  .pricing-table th,.pricing-table td{ padding:.75rem .85rem; font-size:.86rem; }
  .course-tabs__inner{ gap:1.2rem; }
  .course-tabs a{ font-size:.85rem; }
}