/* ============================================================
   2AD — Front Door components ("Warm Editorial Immersive")
   Additive stylesheet loaded on the redesigned/new front-door
   pages only (index.html, medical.html, nos-formations.html,
   recommander.html). Built entirely on the CSS variables
   defined in index.html's :root / [data-theme="dark"].
   ============================================================ */

/* Respect reduced-motion for all scroll-reveal animations (.reveal, .d1-.d4) */
@media (prefers-reduced-motion: reduce) {
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- Section heading helper ---- */
.fd-section-head{margin-bottom:2.5rem;max-width:640px}
.fd-section-title{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:300;color:var(--mist);line-height:1.15;margin-top:.6rem}
.fd-section-title em{font-style:italic;color:var(--warm)}
.fd-section-sub{font-size:.9rem;color:var(--platinum);opacity:.7;line-height:1.8;margin-top:.8rem}

/* ---- Dark immersive badge pill — fixed colors, correct in both themes ---- */
.fd-badge{display:inline-flex;align-items:center;gap:.5rem;background:#0B0D0C;color:#C9A96E;font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;padding:.55rem 1.2rem;border-radius:2rem;white-space:nowrap}
.fd-badge::before{content:'✦';font-size:.7rem}

/* ---- Light glassmorphism stat card — fixed colors, correct in both themes ---- */
.fd-glass{display:inline-block;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 4px 24px rgba(0,0,0,.12);border-radius:.85rem;padding:1.3rem 1.6rem}
.fd-glass-stats{display:flex;gap:1.8rem;flex-wrap:wrap}
.fd-glass-stat-n{font-family:var(--serif);font-size:1.7rem;font-weight:300;color:#1C1917;line-height:1}
.fd-glass-stat-l{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#1C1917;opacity:.55;margin-top:.3rem}

/* ---- Immersive hero: full-bleed photo + fixed dark gradient overlay ---- */
.fd-hero{position:relative;min-height:90svh;display:flex;align-items:center;overflow:hidden}
.fd-hero-img{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1920&q=80') center/cover no-repeat;filter:brightness(.75) saturate(.9)}
.fd-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,12,.8) 0%,rgba(11,13,12,.35) 55%,rgba(11,13,12,.18) 100%)}
.fd-hero .container{position:relative;z-index:1;max-width:680px;padding-top:9rem;padding-bottom:5rem}
.fd-hero-badge{margin-bottom:1.6rem}
.fd-hero-h1{font-family:var(--serif);font-size:clamp(2.8rem,6vw,5.5rem);font-weight:300;color:#FAFAF9;line-height:1.05;margin-bottom:1rem}
.fd-hero-h1 em{font-style:italic;color:#C9A96E}
.fd-hero-sub{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.6rem);font-weight:300;color:rgba(250,250,249,.85);line-height:1.45;margin-bottom:2.2rem;max-width:520px}
.fd-hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem}
.fd-hero .btn-g{color:#FAFAF9;border-color:rgba(250,250,249,.35)}
.fd-hero .btn-g:hover{color:#FAFAF9;border-color:rgba(250,250,249,.6)}

/* ---- Bento grid: services hub / audience cards ---- */
.fd-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:.75rem;overflow:hidden}
.fd-bento-card{background:var(--stone);padding:2.2rem 1.8rem;transition:background .2s;display:flex;flex-direction:column}
.fd-bento-card:hover{background:var(--slate)}
.fd-bento-icon{width:2.3rem;height:2.3rem;margin-bottom:1rem;color:var(--warm)}
.fd-bento-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fd-bento-title{font-family:var(--serif);font-size:1.3rem;font-weight:300;color:var(--mist);margin-bottom:.6rem;line-height:1.2}
.fd-bento-title em{font-style:italic;color:var(--warm)}
.fd-bento-body{font-size:.85rem;color:var(--platinum);opacity:.7;line-height:1.7;margin-bottom:1.2rem;flex-grow:1}
.fd-bento-link{font-size:.75rem;color:var(--warm);opacity:.85;border-bottom:1px solid rgba(201,169,110,.3);padding-bottom:1px;align-self:flex-start}
.fd-bento-card:hover .fd-bento-link{opacity:1;border-bottom-color:var(--warm)}

/* ---- 3-step "Comment ça marche" ---- */
.fd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:.75rem;overflow:hidden}
.fd-step{background:var(--stone);padding:2.2rem 1.8rem}
.fd-step-num{font-family:var(--serif);font-size:2.2rem;font-weight:300;color:var(--warm);opacity:.5;line-height:1;margin-bottom:.6rem}
.fd-step-title{font-family:var(--serif);font-size:1.2rem;font-weight:300;color:var(--mist);margin-bottom:.5rem}
.fd-step-body{font-size:.85rem;color:var(--platinum);opacity:.7;line-height:1.7}

/* ---- Pull-quote dark band — fixed colors, correct in both themes ---- */
.fd-pullquote{background:#0B0D0C;padding:5rem 0;text-align:center}
.fd-pullquote-inner{max-width:820px;margin:0 auto;padding:0 2rem}
.fd-pullquote-text{font-family:var(--serif);font-size:clamp(1.4rem,2.8vw,2.3rem);font-weight:300;color:#F5F2EC;line-height:1.4;margin-bottom:1.5rem}
.fd-pullquote-text em{font-style:italic;color:#C9A96E}
.fd-pullquote-source{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#C9A96E;opacity:.6}

/* ---- Bento 3-column variant (for 6-card grids) ---- */
.fd-bento--3col{grid-template-columns:repeat(3,1fr)}

/* ---- CTA button aliases used on front-door pages ---- */
.btn-p{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;background:var(--warm);color:#fff;font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.08em;text-decoration:none;border:none;cursor:pointer;border-radius:1.5rem;transition:background .2s,transform .2s}
.btn-p:hover{transform:translateY(-2px)}
.btn-g{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;background:transparent;color:var(--warm);font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.08em;text-decoration:none;border:1px solid rgba(201,169,110,.4);cursor:pointer;border-radius:1.5rem;transition:all .2s}
.btn-g:hover{color:var(--mist);border-color:var(--platinum)}

/* ---- Responsive ---- */
@media(max-width:1024px){
  .fd-bento{grid-template-columns:repeat(2,1fr)}
  .fd-bento--3col{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .fd-hero .container{padding-top:8rem;padding-bottom:4rem}
  .fd-glass{padding:1.1rem 1.3rem}
  .fd-glass-stats{gap:1.3rem}
  .fd-steps{grid-template-columns:1fr}
  .fd-pullquote{padding:3.5rem 0}
}
@media(max-width:480px){
  .fd-bento{grid-template-columns:1fr}
  .fd-bento--3col{grid-template-columns:1fr}
  .fd-glass-stat-n{font-size:1.4rem}
}