:root{
  /* Palette officielle — charte CNFP édition 2026 */
  --navy:#21365E;        /* bleu marine, dominant */
  --steel:#2E5884;       /* bleu intermédiaire, dégradés */
  --blue:#447DAC;        /* bleu moyen, sous-titres & filets */
  --sky:#74A9CC;         /* bleu clair, aplats & illustrations */
  --slate:#7B889B;       /* gris bleuté, légendes */
  --terra:#B74732;       /* terracotta, accent ponctuel (max 5 %) */
  --terra-soft:#D0654F;
  --fog:#D8DCE4;         /* gris très clair, fonds & séparateurs */
  --border:#AAB2C0;      /* gris moyen, bordures */
  --white:#FFFFFF;
  --paper:#F7F8FA;
  --ink:#333333;         /* corps de texte */
  --navy-deep:#1A2B4C;
  --navy-night:#101B30;
  --font-display:'Montserrat','Segoe UI',Helvetica,Arial,sans-serif;
  --font-body:'Open Sans','Segoe UI',Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:3px}
svg{display:block}
img{max-width:100%;display:block}

/* ===== Preloader — le logo s'assemble ===== */
.loader{
  position:fixed;inset:0;z-index:2000;
  background:var(--navy-night);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  animation:loaderOut .85s cubic-bezier(.76,0,.24,1) 2.35s forwards;
}
@keyframes loaderOut{to{transform:translateY(-101%);visibility:hidden}}
.ld-mark{
  width:min(58vw,280px);height:auto;
  opacity:0;transform:translateY(16px) scale(.96);
  animation:logoIn .9s cubic-bezier(.19,1,.22,1) .2s forwards;
}
@keyframes logoIn{to{opacity:1;transform:none}}
@keyframes fadeIn{to{opacity:1}}

/* ===== Barre de progression de scroll ===== */
.progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--terra),var(--terra-soft));
  z-index:1200;
}


/* ===== Header ===== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1100;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(18px,4vw,48px);
  transition:padding .35s ease,background .35s ease,box-shadow .35s ease;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:42px;height:auto;transition:width .35s ease}
.brand-logo--dark{display:none}
.header.scrolled .brand-logo--light{display:none}
.header.scrolled .brand-logo--dark{display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-mark{
  font-family:var(--font-display);font-weight:800;font-size:1.3rem;
  letter-spacing:.06em;color:var(--white);transition:color .35s ease;
}
.brand-sub{
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.65);transition:color .35s ease;
  display:none;
}
@media (min-width:1100px){.brand-sub{display:block}}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.lnk{
  font-size:.86rem;font-weight:600;color:rgba(255,255,255,.85);
  padding:6px 2px;position:relative;transition:color .3s ease;
}
.lnk::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--terra);transition:width .3s ease;
}
.lnk:hover::after,.lnk[aria-current="page"]::after{width:100%}
.cta{
  font-family:var(--font-display);font-weight:700;font-size:.76rem;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--terra);color:var(--white);
  padding:11px 20px;border-radius:999px;
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease;
}
.cta:hover{background:var(--terra-soft);transform:translateY(-2px);box-shadow:0 10px 24px rgba(183,71,50,.32)}
.header.scrolled{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:12px clamp(18px,4vw,48px);
  box-shadow:0 8px 30px rgba(16,27,48,.08);
}
.header.scrolled .brand-mark{color:var(--navy)}
.header.scrolled .brand-sub{color:var(--slate)}
.header.scrolled .lnk{color:var(--navy)}
.header.scrolled .brand-logo{width:36px}

/* Burger + menu mobile */
.burger{display:none;flex-direction:column;gap:5px;padding:10px;z-index:1300}
.burger span{
  display:block;width:24px;height:2px;background:var(--white);
  transition:transform .35s ease,opacity .35s ease,background .35s ease;
}
.header.scrolled .burger span{background:var(--navy)}
.burger[aria-expanded="true"] span{background:var(--white)}
.burger[aria-expanded="true"] .l1{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] .l2{opacity:0}
.burger[aria-expanded="true"] .l3{transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:0;z-index:1250;
  background:linear-gradient(165deg,var(--navy-deep) 0%,var(--navy-night) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;
}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  color:rgba(255,255,255,.9);padding:12px 20px;
  opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease;
}
.mobile-menu.open a{opacity:1;transform:none}
.mobile-menu.open a:nth-child(1){transition-delay:.08s}
.mobile-menu.open a:nth-child(2){transition-delay:.16s}
.mobile-menu.open a:nth-child(3){transition-delay:.24s}
.mobile-menu.open a:nth-child(4){transition-delay:.32s}
.mobile-menu.open a:nth-child(5){transition-delay:.4s}
.mobile-menu a[aria-current="page"]{color:var(--terra-soft)}
.mobile-menu .cta{font-size:.86rem;margin-top:14px;color:var(--white)}
@media (max-width:920px){
  .nav .lnk,.nav .cta{display:none}
  .burger{display:flex}
}

/* ===== Structure commune ===== */
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
section{position:relative}
.sec-pad{padding:clamp(72px,10vw,120px) 0}

.sec-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);
  margin-bottom:16px;
}
.sec-eyebrow svg{width:30px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sec-eyebrow svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s ease .15s}
.on .sec-eyebrow svg path,.sec-eyebrow.lit svg path{stroke-dashoffset:0}
.sec-title{
  font-family:var(--font-display);font-weight:800;color:var(--navy);
  font-size:clamp(1.65rem,3.5vw,2.45rem);line-height:1.2;letter-spacing:-.01em;
  max-width:760px;
}
.sec-intro{margin-top:16px;max-width:640px;color:var(--ink);font-size:1rem}

/* Apparition au scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.19,1,.22,1),transform .8s cubic-bezier(.19,1,.22,1)}
.reveal.on{opacity:1;transform:none}

/* ===== HERO de page ===== */
.page-hero{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:150px 0 120px;
  color:var(--white);
  background:url("../img/qui-sommes-nous-01.jpg") 58% center/cover no-repeat var(--navy-deep);
  overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(16,27,48,.86) 0%,rgba(26,43,76,.62) 34%,rgba(26,43,76,.22) 62%,rgba(16,27,48,.08) 100%),
    linear-gradient(180deg,rgba(16,27,48,.48) 0%,rgba(16,27,48,0) 22%,rgba(16,27,48,0) 68%,rgba(16,27,48,.66) 100%);
}
/* Même règle que sur l'accueil : la photo passe en bande haute.
   Celle-ci est encore plus large (1800×633) — en fond d'un écran de
   téléphone, il n'en restait qu'un sixième, un bras et une flamme. La
   bande rend d'un seul tenant le formateur, l'extincteur et le feu, qui
   sont le sujet ; le texte revient sur le marine. Elle est un peu plus
   basse que celle de l'accueil : à ce format, chaque pixel de hauteur
   coûte deux pixels de largeur, et c'est la largeur qui porte la scène.
   La photo y est retournée — et seulement ici, le grand écran garde
   l'originale. Dans la prise de vue, le formateur est à gauche : il se
   retrouvait donc sous le logo, qui occupe ce coin. Retourné, il passe à
   droite et le feu vient à gauche. Le « CNFP » brodé sur son polo a été
   remis à l'endroit dans le fichier — un miroir l'aurait rendu illisible
   (voir `qui-sommes-nous-01-miroir.jpg`). */
@media (max-width:820px){
  .page-hero{
    --bande-photo:calc(84px + clamp(118px,15svh,142px));
    background-image:none;
    padding:calc(var(--bande-photo) + 34px) 0 96px;
  }
  .page-hero::before{
    bottom:auto;height:var(--bande-photo);
    background:
      linear-gradient(180deg,rgba(26,43,76,.7) 0%,rgba(26,43,76,.24) 34%,rgba(26,43,76,.04) 58%,rgba(26,43,76,1) 100%),
      url("../img/qui-sommes-nous-01-miroir.jpg") 46% center/cover no-repeat;
  }
  /* Le semis de points visait le quart haut-droit de la photo : sans
     photo à cet endroit, il ne cadrait plus rien. */
  .page-hero .hero-dots{-webkit-mask-image:none;mask-image:none;opacity:.28}
}
.hero-dots{-webkit-mask-image:none;mask-image:none;opacity:.28}
}
.hero-dots{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(720px 460px at 78% 30%,#000 0%,transparent 70%);
  mask-image:radial-gradient(720px 460px at 78% 30%,#000 0%,transparent 70%);
}
.page-hero .wrap{position:relative;z-index:2;max-width:none;margin:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sky);
  margin-bottom:26px;
}
.pulse-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--terra-soft);flex:none}
.pulse-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid rgba(208,101,79,.6);
  animation:ping 2.2s ease-out infinite;
}
@keyframes ping{0%{transform:scale(.5);opacity:1}80%,100%{transform:scale(1.5);opacity:0}}
.page-hero h1{
  text-shadow:0 2px 22px rgba(16,27,48,.55);
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.15rem,6.2vw,4.3rem);line-height:1.06;letter-spacing:.01em;
  max-width:900px;
}
.page-hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.page-hero h1 .w>span{display:inline-block;transform:translateY(110%);animation:wordUp .9s cubic-bezier(.19,1,.22,1) forwards}
@keyframes wordUp{to{transform:none}}
.page-hero h1 .accent{color:var(--terra-soft)}
.hero-sub{
  text-shadow:0 1px 14px rgba(16,27,48,.65);
  margin-top:24px;max-width:600px;
  color:rgba(255,255,255,.82);font-size:clamp(.98rem,1.6vw,1.1rem);
  opacity:0;animation:fadeIn .8s ease 1.15s forwards;
}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;
  opacity:0;animation:fadeIn .8s ease 1.35s forwards;
}
.badge{
  font-size:.72rem;font-weight:600;letter-spacing:.06em;
  color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.25);border-radius:999px;
  padding:7px 15px;
}
/* Flammes vivantes : rendu WebGL par-dessus la photo (repli statique automatique) */
.hero-live{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  pointer-events:none;opacity:0;transition:opacity .8s ease;
}
.hero-live.on{opacity:1}
/* Braises qui s'élèvent du foyer */
.embers{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.embers i{
  position:absolute;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#FFE0AC 0%,#E8722F 55%,rgba(232,114,47,0) 72%);
  filter:blur(.4px);
  animation:ember var(--d,7s) linear var(--dl,0s) infinite;
}
@keyframes ember{
  0%{transform:translate(0,0) scale(1);opacity:0}
  8%{opacity:.85}
  55%{opacity:.5}
  100%{transform:translate(var(--x,-40px),-72vh) scale(.25);opacity:0}
}

/* ===== Manifeste ===== */
.manifesto{background:var(--paper)}
.manifesto .wrap{max-width:1160px}
.manifesto-grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(34px,5vw,72px);align-items:center;
}
.manifesto-photo{position:relative;margin:0}
.manifesto-photo img{
  width:100%;max-height:640px;object-fit:cover;object-position:50% 22%;
  display:block;filter:saturate(.9);will-change:transform;
  -webkit-mask-image:radial-gradient(115% 92% at 68% 46%,#000 50%,rgba(0,0,0,.55) 72%,transparent 97%);
  mask-image:radial-gradient(115% 92% at 68% 46%,#000 50%,rgba(0,0,0,.55) 72%,transparent 97%);
}
@media (max-width:920px){
  .manifesto-grid{grid-template-columns:1fr}
  .manifesto-photo{max-width:430px;margin:4px auto 0}
  .manifesto-photo img{max-height:520px}
}
.manifesto p{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.32rem,2.9vw,2.1rem);line-height:1.55;
  color:#C7CFDB;
}
.manifesto p span,.manifesto p em{transition:color .5s ease;font-style:normal}
.manifesto p span.lit{color:var(--navy)}
.manifesto p em.lit{color:var(--terra)}
.manifesto-sign{
  margin-top:30px;display:flex;align-items:center;gap:14px;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
}
.manifesto-sign::before{content:"";width:46px;height:2px;background:var(--blue)}

/* ===== Piliers ===== */
.pillars{background:var(--white)}
.cred-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:48px;
}
.cred-card{
  background:var(--white);border:1px solid var(--fog);border-radius:16px;
  padding:32px 28px;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.19,1,.22,1),box-shadow .45s ease,border-color .45s ease;
  will-change:transform;
}
.cred-card::before{
  content:"";position:absolute;top:0;left:28px;width:44px;height:3px;
  background:var(--blue);border-radius:0 0 3px 3px;
  transition:width .45s ease;
}
.cred-card:hover{border-color:var(--sky);box-shadow:0 22px 48px rgba(33,54,94,.12)}
.cred-card:hover::before{width:72px}
.cred-card .k{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px;
}
.cred-card .ci{
  width:26px;height:26px;fill:none;stroke:var(--blue);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  margin-bottom:16px;
}
.cred-card h3{
  font-family:var(--font-display);font-weight:700;color:var(--navy);
  font-size:1.12rem;line-height:1.35;margin-bottom:12px;
}
.cred-card p{font-size:.93rem;color:var(--ink)}
@media (max-width:920px){.cred-grid{grid-template-columns:1fr;gap:16px}}

/* ===== Bande immersive terrain ===== */
/* Fond prêt à recevoir une vraie photo d'exercice grandeur nature :
   remplacer le dégradé ci-dessous par url("...") center/cover + voile marine */
.terrain{
  color:var(--white);overflow:hidden;
  background:
    radial-gradient(900px 500px at 12% 0%,rgba(68,125,172,.25),transparent 60%),
    linear-gradient(150deg,var(--navy-deep) 0%,var(--navy-night) 70%);
}
.terrain .hero-dots{
  -webkit-mask-image:radial-gradient(640px 420px at 18% 40%,#000 0%,transparent 70%);
  mask-image:radial-gradient(640px 420px at 18% 40%,#000 0%,transparent 70%);
}
.terrain-watermark{
  position:absolute;right:-60px;top:50%;transform:translateY(-50%);
  width:min(46vw,420px);height:auto;opacity:.06;pointer-events:none;
}
.terrain .wrap{position:relative;z-index:2}
.terrain .sec-eyebrow{color:var(--sky)}
.terrain h2{
  font-family:var(--font-display);font-weight:800;color:var(--white);
  font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.22;max-width:680px;
}
.terrain h2 em{font-style:normal;color:var(--terra-soft)}
.imm-points{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.imm-points span{
  font-size:.82rem;font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:10px 20px;
  transition:border-color .3s ease,background .3s ease;
}
.imm-points span:hover{border-color:var(--terra-soft);background:rgba(183,71,50,.14)}

/* ===== Équipe ===== */
.team{background:var(--paper)}
.team-carousel{margin-top:48px}
.team-track{
  display:flex;gap:22px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:6px;
  cursor:grab;
}
.team-track::-webkit-scrollbar{display:none}
.team-track.dragging{cursor:grabbing;scroll-snap-type:none}
.team-track .team-card{
  flex:0 0 calc((100% - 66px)/4);
  scroll-snap-align:start;
}
.team-controls{display:flex;align-items:center;gap:14px;margin-top:26px}
.team-btn{
  width:44px;height:44px;border-radius:50%;flex:none;
  border:1px solid var(--border);background:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .3s ease,background .3s ease,opacity .3s ease;
}
.team-btn svg{width:18px;height:18px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease}
.team-btn:hover{border-color:var(--terra);background:var(--terra)}
.team-btn:hover svg{stroke:#FFFFFF}
.team-btn[disabled]{opacity:.35;pointer-events:none}
.team-progress{position:relative;flex:1;height:2px;margin-left:6px;background:var(--fog);border-radius:2px}
.team-progress i{
  position:absolute;top:0;bottom:0;left:0;width:30%;
  background:var(--terra);border-radius:2px;
  transition:left .18s ease,width .25s ease;
}
.team-card{
  background:var(--white);border:1px solid var(--fog);border-radius:16px;
  overflow:hidden;
  transition:transform .45s cubic-bezier(.19,1,.22,1),box-shadow .45s ease;
}
.team-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(33,54,94,.12)}
.team-photo{
  position:relative;aspect-ratio:4/5;
  background:linear-gradient(180deg,#EDF1F7 0%,#DCE3EE 100%);
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
}
.team-photo>svg{width:72%;height:auto;margin-bottom:-4px}
.team-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.team-card.filled .team-txt h3{color:var(--navy)}
.team-txt .team-sub{
  margin-top:3px;font-size:.6rem;letter-spacing:.12em;color:var(--slate);
}
.team-chip{
  position:absolute;left:12px;bottom:12px;
  font-family:var(--font-display);font-weight:700;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
  background:rgba(33,54,94,.85);border-radius:999px;padding:5px 11px;
}
.team-txt{padding:18px 20px 20px}
.team-txt h3{
  font-family:var(--font-display);font-weight:700;font-size:.98rem;
  color:#9AA6B8;letter-spacing:.02em;
}
.team-txt p{
  margin-top:4px;font-family:var(--font-display);font-weight:700;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
}
@media (max-width:1020px){.team-track .team-card{flex-basis:calc((100% - 22px)/2)}}
@media (max-width:560px){
  .team-track{gap:14px}
  .team-track .team-card{flex-basis:80%}
  .team-txt{padding:14px 14px 16px}
}

/* ===== Agréments ===== */
.certif{background:var(--white)}
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.doc-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--fog);border-radius:16px;
  padding:30px 28px 26px;
  transition:transform .45s cubic-bezier(.19,1,.22,1),box-shadow .45s ease,border-color .45s ease;
}
.doc-card:hover{transform:translateY(-6px);border-color:var(--sky);box-shadow:0 22px 48px rgba(33,54,94,.12)}
.doc-type{
  position:absolute;top:22px;right:22px;
  font-family:var(--font-display);font-weight:700;font-size:.6rem;
  letter-spacing:.14em;color:var(--slate);
  border:1px solid var(--fog);border-radius:6px;padding:4px 8px;
}
.doc-ico{
  width:30px;height:30px;fill:none;stroke:var(--blue);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  margin-bottom:18px;transition:stroke .3s ease;
}
.doc-card:hover .doc-ico{stroke:var(--terra)}
.doc-card h3{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:1.08rem;margin-bottom:8px}
.doc-card p{font-size:.88rem;color:var(--ink);flex:1}
.doc-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--font-display);font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue);
  transition:color .3s ease;
}
.doc-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.doc-card:hover .doc-link{color:var(--terra)}
.doc-card:hover .doc-link svg{transform:translateX(4px)}
@media (max-width:920px){.doc-grid{grid-template-columns:1fr;gap:16px}}

/* ===== Bande CTA ===== */
.cta-band{
  color:var(--white);overflow:hidden;
  background:
    radial-gradient(800px 420px at 85% 120%,rgba(116,169,204,.2),transparent 60%),
    linear-gradient(150deg,var(--navy) 0%,var(--steel) 100%);
}
.cta-band .wrap{position:relative;z-index:2;text-align:center}
.cta-band h2{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.2;
  max-width:720px;margin:0 auto;
}
.cta-band p{margin:18px auto 0;max-width:560px;color:rgba(255,255,255,.85);font-size:1rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}
.btn{
  display:inline-block;font-family:var(--font-display);font-weight:700;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 30px;border-radius:999px;
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.btn-primary{background:var(--terra);color:var(--white)}
.btn-primary:hover{background:var(--terra-soft);transform:translateY(-2px);box-shadow:0 12px 28px rgba(183,71,50,.35)}
.btn-ghost{border:1px solid rgba(255,255,255,.45);color:var(--white)}
.btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}

/* ===== Footer ===== */
.footer{background:var(--navy-night);color:rgba(255,255,255,.72);font-size:.9rem}
.footer-inner{
  display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(30px,6vw,80px);
  padding:clamp(56px,8vw,84px) 0 44px;
}
.footer-brand-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.footer-logo{width:44px;height:auto}
.footer-wordmark{
  font-family:var(--font-display);font-weight:800;font-size:1.2rem;
  letter-spacing:.08em;color:var(--white);
}
.footer p{max-width:460px;line-height:1.8}
.socials{display:flex;gap:12px;margin-top:22px}
.socials a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .3s ease,background .3s ease,transform .3s ease;
}
.socials a:hover{border-color:var(--terra-soft);background:rgba(183,71,50,.15);transform:translateY(-3px)}
.socials svg{width:17px;height:17px;fill:rgba(255,255,255,.85)}
.footer-nav h4{
  font-family:var(--font-display);font-weight:700;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sky);
  margin-bottom:16px;
}
.footer-nav a{display:block;padding:6px 0;color:rgba(255,255,255,.72);transition:color .3s ease}
.footer-nav a:hover{color:var(--white)}
.footer-nav a[aria-current="page"]{color:var(--white)}
.footer-legal{
  border-top:1px solid rgba(255,255,255,.1);
  padding:26px 0 40px;font-size:.74rem;line-height:1.9;color:rgba(255,255,255,.5);
  text-align:center;
}
.footer-legal .demo-note{
  display:inline-block;margin-top:10px;padding:4px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
}
@media (max-width:820px){
  .footer-inner{grid-template-columns:1fr;text-align:center}
  .footer-brand-row{justify-content:center}
  .footer p{margin:0 auto}
  .socials{justify-content:center}
}

/* ===== Réduction des animations ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .loader{display:none}
  .page-hero h1 .w>span{transform:none}
  .hero-sub,.hero-badges{opacity:1}
  .reveal{opacity:1;transform:none}
  .embers{display:none!important}
  .sec-eyebrow svg path{stroke-dashoffset:0}
  .manifesto p span{color:var(--navy)}
  .manifesto p em{color:var(--terra)}
}