:root{
  --navy:#21365E;
  --steel:#2E5884;
  --blue:#4075A1;
  --sky:#74A9CC;
  --slate:#647285;
  --terra:#B74732;
  --terra-soft:#D0654F;
  --amber:#DE8F0A;
  --fog:#D8DCE4;
  --border:#AAB2C0;
  --white:#FFFFFF;
  --paper:#F7F8FA;
  --ink:#333333;
  --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;
}

/* La bulle CNFP IA (.cnfp-ia) est stylée par Tailwind, rangé en couches :
   une remise à zéro hors couche l'emporterait et lui retirerait marges,
   fond et bordures. `:where` garde la priorité nulle de `*`. */
:where(:not(.cnfp-ia, .cnfp-ia *)){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;
}
:where(a:not(.cnfp-ia, .cnfp-ia *)){color:inherit;text-decoration:none}
:where(button:not(.cnfp-ia, .cnfp-ia *)){font:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:3px}
:where(svg:not(.cnfp-ia, .cnfp-ia *)){display:block}

/* ===== Preloader ===== */
.loader{
  position:fixed;inset:0;z-index:2000;
  background:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  /* Écran levé à 1,25 s au lieu de 3 s (20/10/2026) : le titre s'animait
     derrière lui, sans être vu, et Google mesurait 7,9 s d'attente. */
  animation:loaderOut .5s cubic-bezier(.76,0,.24,1) .75s forwards;
}
@keyframes loaderOut{to{transform:translateY(-101%);visibility:hidden}}
.loader img{
  width:min(52vw,240px);height:auto;
  opacity:0;transform:scale(.94);
  animation:logoIn .5s cubic-bezier(.19,1,.22,1) .05s forwards;
}
@keyframes logoIn{to{opacity:1;transform:scale(1)}}
.loader-ecg{width:min(46vw,220px);height:44px}
.loader-ecg path{
  fill:none;stroke:var(--terra-soft);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw .6s cubic-bezier(.65,0,.35,1) .2s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}


/* ===== Header ===== */
.header{
  position:absolute;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,4vw,48px);
}
.header .brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:34px;width:auto;flex-shrink:0}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-mark{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:.1em;color:var(--white)}
.brand-sub{font-size:.54rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sky);display:none}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,28px)}
.nav a{font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.85);transition:color .25s ease}
.nav a:hover{color:var(--white)}
.nav .cta{background:var(--terra);color:var(--white);padding:10px 18px;border-radius:8px;transition:background .25s ease,transform .25s ease}
.nav .cta:hover{background:var(--terra-soft);transform:translateY(-1px)}
.nav .lnk{display:none}
@media(min-width:760px){.brand-sub{display:block}.nav .lnk{display:inline}}

/* ===== Hero ===== */
/* EMPLACEMENT PHOTO : le fond graphique ci-dessous sera remplacé par la photo réelle
   (formation nourrisson) dès réception du fichier original, avec voile marine par-dessus. */
.hero{
  position:relative;
  min-height:100svh;
  background:url("../img/accueil-01.webp") center 30%/cover no-repeat var(--navy-deep);
  color:var(--white);
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  padding:110px clamp(18px,5vw,64px) 150px;
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(16,27,48,.38) 0%,rgba(16,27,48,.12) 32%,rgba(16,27,48,.72) 100%),
    linear-gradient(95deg,rgba(22,36,63,.86) 0%,rgba(22,36,63,.72) 38%,rgba(33,54,94,.26) 75%,rgba(33,54,94,.18) 100%);
}
/* Sur un téléphone, la photo quitte le fond et passe en bande haute.
   Elle est panoramique (1774×887) : plaquée sur un écran haut et étroit,
   `cover` l'agrandissait jusqu'à n'en montrer qu'un quart — deux visages
   coupés en bord de cadre et un mannequin sans contexte. Rendue à un
   cadre qui lui ressemble, la scène se lit d'un coup d'œil, et le texte
   reprend le fond marine, où il se passe d'un voile épais.
   La bande est haute comme celle des bannières du catalogue : l'en-tête
   flotte sur son quart supérieur, que le dégradé assombrit pour garder le
   logo blanc lisible, et la photo reste dégagée en dessous. */
@media(max-width:760px){
  .hero{
    --bande-photo:calc(84px + clamp(140px,18svh,178px));
    min-height:min(100svh,900px);
    background-image:none;
    padding-top:calc(var(--bande-photo) + 34px);
    padding-bottom:96px;
  }
  .hero::before{
    bottom:auto;height:var(--bande-photo);
    background:
      linear-gradient(180deg,rgba(26,43,76,.72) 0%,rgba(26,43,76,.26) 34%,rgba(26,43,76,.04) 58%,rgba(26,43,76,1) 100%),
      url("../img/accueil-01.webp") 55% center/cover no-repeat;
  }
  /* Le texte se resserre pour compenser la place prise par la bande, et
     les mentions les plus petites remontent au-dessus de 12 px : sous ce
     seuil un téléphone tenu à bout de bras ne les rend plus. */
  .hero .eyebrow{font-size:.78rem;letter-spacing:.14em;margin-bottom:18px}
  .hero .hero-sub{margin-top:18px}
  .hero .hero-ctas{margin-top:26px}
  .hero .hero-badges{margin-top:26px}
  .hero .badge{font-size:.74rem}
}
.hero-inner{position:relative;max-width:1020px;z-index:2}
/* La pastille « Nouveau » au-dessus de l'accroche : elle mène à la page
   CNFP IA. L'annonce, elle, ferme la page d'accueil, avant le pied. */
.hero-annonce{
  display:flex;width:fit-content;max-width:100%;align-items:center;gap:10px;margin-bottom:22px;
  padding:6px 14px 6px 6px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(116,169,204,.45);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.82rem;font-weight:600;color:var(--white);
  opacity:0;animation:fadeIn .8s ease .6s forwards;
  transition:background .25s ease,border-color .25s ease;
}
.hero-annonce:hover{background:rgba(255,255,255,.14);border-color:var(--sky)}
.hero-annonce-nouveau{
  font-family:var(--font-display);font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;color:var(--white);
  background:linear-gradient(110deg,var(--terra) 0%,var(--terra-soft) 45%,#F2A08D 50%,var(--terra-soft) 55%,var(--terra) 100%);
  background-size:250% 100%;animation:annonceReflet 3.2s linear infinite;
}
.hero-annonce-fleche{transition:transform .25s ease}
.hero-annonce:hover .hero-annonce-fleche{transform:translateX(3px)}
@media(max-width:760px){.hero-annonce{font-size:.78rem;margin-bottom:18px}}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sky);
  margin-bottom:24px;
}
.eyebrow .pulse-dot{
  width:8px;height:8px;border-radius:50%;background:var(--terra-soft);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(208,101,79,.55);
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(208,101,79,.55)}
  70%{box-shadow:0 0 0 12px rgba(208,101,79,0)}
  100%{box-shadow:0 0 0 0 rgba(208,101,79,0)}
}
.hero h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.5rem,8vw,5.4rem);
  line-height:1.08;letter-spacing:.01em;
  text-transform:uppercase;
}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .w>span{display:inline-block;transform:translateY(115%);animation:riseUp .85s cubic-bezier(.19,1,.22,1) forwards}
.hero h1 .accent{color:var(--terra-soft)}
@keyframes riseUp{to{transform:translateY(0)}}
.hero-sub{
  margin-top:24px;max-width:560px;
  font-size:clamp(.98rem,1.6vw,1.14rem);color:rgba(255,255,255,.85);
  opacity:0;animation:fadeIn .8s ease 1.3s forwards;
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px;opacity:0;animation:fadeIn .8s ease 1.45s forwards}
.btn{
  font-family:var(--font-display);font-weight:700;font-size:.88rem;
  letter-spacing:.04em;padding:15px 26px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.btn-primary{background:var(--terra);color:var(--white);box-shadow:0 12px 30px rgba(183,71,50,.35)}
.btn-primary:hover{background:var(--terra-soft);transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(255,255,255,.35);color:var(--white)}
.btn-ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.hero-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:40px;opacity:0;animation:fadeIn .8s ease 1.6s forwards}
.badge{
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.78);
  padding:7px 12px;border-radius:999px;
}
.ecg{position:absolute;left:0;right:0;bottom:40px;z-index:1;width:100%;height:80px;pointer-events:none;opacity:.9}
.ecg path{
  fill:none;stroke:var(--terra-soft);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw 3.6s cubic-bezier(.65,0,.35,1) 1.6s forwards;
  filter:drop-shadow(0 0 6px rgba(208,101,79,.55));
}
.ecg-run{animation:ecgSlide 9s linear 4.8s infinite}
/* Sur un téléphone, les badges passent sur deux lignes et descendent : le
   tracé, posé à 40 px du bas sur 80 px de haut, venait les barrer. Abaissé
   et aplati, il reste sous la marge basse du contenu (20/10/2026). */
@media(max-width:760px){
  .hero{padding-bottom:104px}
  .ecg{bottom:12px;height:64px}
}
@keyframes ecgSlide{to{transform:translateX(-1440px)}}

/* ===== Communs ===== */
section{position:relative}
.wrap{max-width:1160px;margin:0 auto;padding:clamp(64px,9vw,110px) clamp(18px,5vw,48px)}
.sec-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
  margin-bottom:15px;
}
.sec-eyebrow svg{width:30px;height:14px;overflow:visible;flex-shrink:0}
.sec-eyebrow svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.in-view .sec-eyebrow svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s ease .2s forwards}
.sec-title{
  font-family:var(--font-display);font-weight:800;color:var(--navy);
  font-size:clamp(1.55rem,3.5vw,2.5rem);line-height:1.18;letter-spacing:-.005em;
}
.sq::after{
  content:'';display:inline-block;width:.32em;height:.32em;border-radius:2px;
  background:var(--sky);margin-left:.35em;
}
.sec-desc{margin-top:15px;color:var(--slate);font-size:.98rem}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.19,1,.22,1)}
.reveal.in-view{opacity:1;transform:none}

/* ===== Stats ===== */
.stats{background:var(--white)}
.stats .wrap{padding-top:0;padding-bottom:clamp(46px,6vw,70px)}
.stats-card{
  position:relative;z-index:5;
  background:var(--white);border:1px solid var(--fog);border-radius:20px;
  box-shadow:0 30px 80px rgba(16,27,48,.18);
  padding:clamp(28px,4.5vw,50px) clamp(22px,4vw,50px);
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,5vw,34px) clamp(22px,4vw,34px);
}
@media(min-width:820px){.stats-card{grid-template-columns:repeat(4,1fr)}}
.stat-num{
  font-family:var(--font-display);font-weight:800;color:var(--navy);
  font-size:clamp(2.4rem,5.5vw,4rem);line-height:1;font-variant-numeric:tabular-nums;
}
.stat-num .suffix{color:var(--terra)}
.stat-bar{height:3px;background:var(--fog);border-radius:2px;margin-top:16px;overflow:hidden}
.stat-bar i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--blue),var(--terra));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.3s cubic-bezier(.19,1,.22,1);
}
.stat.in-view .stat-bar i{transform:scaleX(1)}
.stat:nth-child(1) .stat-bar i{transition-delay:.35s}
.stat:nth-child(2) .stat-bar i{transition-delay:.5s}
.stat:nth-child(3) .stat-bar i{transition-delay:.65s}
.stat:nth-child(4) .stat-bar i{transition-delay:.8s}
.stat-label{margin-top:12px;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--slate)}

/* ===== Manifeste ===== */
.manifesto{background:var(--white)}
.manifesto .wrap{padding-top:clamp(64px,9vw,100px)}
.manifesto p{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.45rem,4.6vw,3.2rem);
  line-height:1.3;letter-spacing:-.005em;
  max-width:22ch;
}
.manifesto p span{color:var(--fog);transition:color .45s ease}
.manifesto p span.on{color:var(--navy)}
.manifesto p em{font-style:normal;color:rgba(183,71,50,.2);transition:color .45s ease}
.manifesto p em.on{color:var(--terra)}

/* ===== Entreprises / Particuliers ===== */
.duo{display:grid;grid-template-columns:1fr;gap:10px;background:var(--white)}
@media(min-width:880px){.duo{grid-template-columns:1fr 1fr;gap:0}}
@media(max-width:879px){.duo-panel{min-height:auto;padding-bottom:clamp(44px,8vw,64px)}}
.duo-panel{
  position:relative;overflow:hidden;color:var(--white);
  min-height:500px;
  display:flex;flex-direction:column;
  padding:clamp(38px,5vw,64px) clamp(24px,4vw,56px);
  background:
    linear-gradient(180deg,rgba(16,27,48,.52) 0%,rgba(16,27,48,.38) 45%,rgba(16,27,48,.8) 100%),
    url("../img/accueil-02.webp") center/cover no-repeat var(--navy-night);
}
.duo-panel + .duo-panel{
  background:
    linear-gradient(180deg,rgba(16,27,48,.52) 0%,rgba(16,27,48,.38) 45%,rgba(16,27,48,.8) 100%),
    url("../img/accueil-03.webp") center/cover no-repeat var(--navy-deep);
}
@media(min-width:880px){
  .duo-panel{clip-path:polygon(0 0,100% 0,calc(100% - 64px) 100%,0 100%);padding-right:clamp(60px,7vw,110px)}
  .duo-panel + .duo-panel{clip-path:polygon(76px 0,100% 0,100% 100%,0 100%);margin-left:-64px;padding-left:clamp(60px,7vw,120px)}
}
.duo-panel h3{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,4vw,3rem);margin-bottom:18px;
}
.duo-panel h3::after{
  content:'';display:inline-block;width:.32em;height:.32em;border-radius:2px;
  background:var(--terra-soft);margin-left:.35em;
}
.duo-panel p{font-size:1.05rem;line-height:1.75;color:rgba(255,255,255,.88);max-width:44ch;margin-bottom:18px}
.duo-panel p strong{color:var(--white);font-weight:600}
.duo-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.duo-tags span{font-family:var(--font-display);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.32);color:rgba(255,255,255,.88);padding:7px 13px;border-radius:999px}
.duo-panel .btn{align-self:flex-start;margin-top:auto}

/* ===== Formations — carrousel ===== */
.form-sec{background:var(--paper);border-bottom:1px solid var(--fog)}
.form-head{
  max-width:1160px;margin:0 auto;
  padding:clamp(64px,9vw,100px) clamp(18px,5vw,48px) clamp(10px,2vw,20px);
}
.form-intro{
  max-width:1160px;margin:0 auto;
  padding:0 clamp(18px,5vw,48px) clamp(22px,3vw,34px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.form-intro p{max-width:640px;color:var(--slate);font-size:.96rem}
.hs-count{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(.95rem,2vw,1.2rem);color:var(--terra);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.hs-count small{color:var(--slate);font-weight:700}
.hs-scroller{
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 0 20px;
}
.hs-scroller::-webkit-scrollbar{display:none}
.hs-track{display:flex;gap:clamp(14px,3vw,30px);padding:0 clamp(18px,5vw,48px);width:max-content}
.hs-panel{
  scroll-snap-align:center;
  flex:0 0 auto;width:min(84vw,560px);
  background:var(--white);border:1px solid var(--fog);border-radius:16px;
  padding:clamp(16px,2.6vw,26px);
  display:flex;flex-direction:column;gap:15px;
  box-shadow:0 10px 30px rgba(33,54,94,.05);
}
.panel-art{position:relative;border-radius:11px;overflow:hidden;aspect-ratio:16/9;background:var(--navy-deep)}
.panel-art svg{width:100%;height:100%;display:block}
.panel-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .9s ease}
.panel-art img:first-child{opacity:1}
.panel-art img.on{opacity:1}
.pa-dots{position:absolute;right:10px;bottom:10px;display:flex;gap:5px;z-index:2}
.pa-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5)}
.pa-dots i.on{background:var(--terra-soft)}
.panel-body h3{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:1.15rem}
.panel-tag{font-family:var(--font-display);font-size:.82rem;color:var(--blue);font-weight:600;margin-top:3px}
.panel-body>p{font-size:.9rem;color:var(--ink);margin-top:10px}
.panel-body ul{list-style:none;margin-top:11px}
.panel-body li{
  font-size:.88rem;color:var(--ink);
  padding:6px 0 6px 19px;position:relative;border-top:1px solid var(--fog);
}
.panel-body li:first-child{border-top:none}
.panel-body li::before{content:'';position:absolute;left:2px;top:13px;width:7px;height:7px;border-radius:2px;background:var(--blue);opacity:.85}
.hs-meta{
  max-width:1160px;margin:0 auto;
  padding:0 clamp(18px,5vw,48px) clamp(56px,8vw,90px);
  display:flex;align-items:center;gap:16px;
}
.hs-bar{flex:1;height:2px;background:var(--fog);border-radius:2px;overflow:hidden}
.hs-bar i{display:block;height:100%;width:12%;background:var(--terra);transition:width .2s ease}
.hs-hint{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--slate);white-space:nowrap;
  animation:hintX 2.4s ease-in-out infinite;
}
@keyframes hintX{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.hs-arrows{display:none;gap:8px}
.hs-arrow{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--border);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.hs-arrow:hover{background:var(--terra);border-color:var(--terra);color:var(--white)}
.hs-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:880px){
  .hs-arrows{display:flex}
  .hs-hint{display:none}
}

/* ===== Références ===== */
.refs{background:var(--paper);overflow:hidden}
.refs .wrap{padding-bottom:clamp(26px,4vw,40px)}
.marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex;gap:clamp(16px,3vw,32px);width:max-content;animation:slide 52s linear infinite;padding:12px 0}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee--second{margin-top:clamp(14px,2vw,22px)}
.marquee-track--reverse{animation-direction:reverse;animation-duration:60s}
@keyframes slide{to{transform:translateX(-50%)}}
.ref-logo{
  flex:0 0 auto;width:clamp(190px,28vw,260px);height:clamp(108px,15vw,142px);
  background:var(--white);border:1px solid var(--fog);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  padding:16px 26px;box-shadow:0 8px 22px rgba(33,54,94,.05);
}
.ref-logo img{
  max-width:100%;max-height:100%;object-fit:contain;
  filter:grayscale(1) opacity(.65);transition:filter .35s ease;
}
.ref-logo:hover img{filter:grayscale(0) opacity(1)}

/* ===== Annonce CNFP IA ===== */
/* « Vos obligations en clair », présenté comme une avancée : fond nuit,
   lueurs qui dérivent lentement, titre au reflet animé, et une réponse
   réelle qui s'écrit sous les yeux avant que sa citation ne s'affiche,
   tamponnée « vérifié ». Le script est dans accueil.js (« Annonce »). */
@property --annonce-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.annonce{
  position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 85% 0%,#22406E 0%,var(--navy-night) 58%) var(--navy-night);
  color:var(--white);
}
.annonce-fond{position:absolute;inset:0;z-index:-1;pointer-events:none}
.annonce-lueur{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.annonce-lueur--1{width:520px;height:520px;left:-160px;top:-120px;background:#2E5884;animation:annonceDerive 18s ease-in-out infinite alternate}
.annonce-lueur--2{width:420px;height:420px;right:-120px;bottom:-140px;background:rgba(183,71,50,.55);animation:annonceDerive 22s ease-in-out -6s infinite alternate-reverse}
.annonce-lueur--3{width:360px;height:360px;left:45%;top:35%;background:rgba(116,169,204,.45);animation:annonceDerive 26s ease-in-out -12s infinite alternate}
@keyframes annonceDerive{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(60px,40px) scale(1.12)}
  100%{transform:translate(-40px,70px) scale(.94)}
}
.annonce-trame{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);
}
.annonce-inner{
  max-width:1200px;margin:0 auto;
  padding:clamp(70px,10vw,124px) clamp(18px,5vw,48px);
  display:grid;grid-template-columns:1fr;gap:clamp(44px,6vw,72px);align-items:center;
}
@media(min-width:980px){.annonce-inner{grid-template-columns:1.08fr 1fr}}

.annonce-badge{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 16px 6px 6px;border-radius:999px;
  border:1px solid rgba(116,169,204,.4);background:rgba(255,255,255,.06);
  font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#CFE2F2;
}
.annonce-badge:hover{border-color:var(--sky);color:var(--white)}
.annonce-badge::after{
  content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-20deg);animation:annonceBalayage 4.5s ease-in-out 1s infinite;
}
@keyframes annonceBalayage{0%{left:-60%}35%,100%{left:130%}}
.annonce-badge-nouveau{
  padding:5px 11px;border-radius:999px;color:var(--white);letter-spacing:.14em;
  background:linear-gradient(110deg,var(--terra) 0%,var(--terra-soft) 45%,#F2A08D 50%,var(--terra-soft) 55%,var(--terra) 100%);
  background-size:250% 100%;animation:annonceReflet 3.2s linear infinite;
  box-shadow:0 0 18px rgba(208,101,79,.55);
}
@keyframes annonceReflet{to{background-position:-250% 0}}

.annonce h2{
  margin-top:22px;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.85rem,4vw,3.05rem);line-height:1.1;letter-spacing:-.015em;
}
.annonce-degrade{
  background:linear-gradient(100deg,#FFFFFF 0%,#BFDCF0 22%,var(--sky) 40%,#FFFFFF 55%,#F2A08D 75%,#FFFFFF 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:annonceDegrade 7s ease-in-out infinite alternate;
}
@keyframes annonceDegrade{to{background-position:100% 0}}
.annonce-chapo{margin-top:20px;max-width:56ch;font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.75;color:rgba(255,255,255,.78)}
.annonce-chapo strong{color:var(--white);font-weight:700}

.annonce-question{
  margin-top:30px;max-width:600px;
  display:flex;align-items:center;gap:8px;padding:7px;
  border-radius:16px;background:rgba(255,255,255,.96);
  box-shadow:0 0 0 1px rgba(116,169,204,.35),0 18px 50px rgba(5,12,26,.45),0 0 60px rgba(116,169,204,.18);
  transition:box-shadow .3s ease;
}
.annonce-question:focus-within{box-shadow:0 0 0 3px rgba(116,169,204,.75),0 18px 50px rgba(5,12,26,.45),0 0 80px rgba(116,169,204,.35)}
.annonce-question input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  padding:12px 10px 12px 12px;font:inherit;font-size:16px;color:var(--ink);
}
.annonce-question input::placeholder{color:#8A96A8}
.annonce-question button{
  flex-shrink:0;display:inline-flex;align-items:center;gap:8px;
  padding:13px 20px;border-radius:11px;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;letter-spacing:.03em;
  background:var(--terra);color:var(--white);
  box-shadow:0 10px 26px rgba(183,71,50,.45);
  transition:background .25s ease,transform .25s ease;
}
.annonce-question button:hover{background:var(--terra-soft);transform:translateY(-1px)}
.annonce-question button svg{transition:transform .25s ease}
.annonce-question button:hover svg{transform:translateX(3px)}
@media(max-width:520px){.annonce-question button span{display:none}.annonce-question button{padding:13px 15px}}
.annonce-invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.annonce-idees{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.annonce-idees a{
  padding:7px 13px;border-radius:999px;font-size:.84rem;
  color:#CFE2F2;border:1px solid rgba(116,169,204,.35);background:rgba(255,255,255,.03);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.annonce-idees a:hover{background:rgba(116,169,204,.16);border-color:var(--sky);color:var(--white)}

.annonce-preuves{
  list-style:none;margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:600px;
}
.annonce-preuves li{display:flex;flex-direction:column;gap:5px}
.annonce-preuves strong{
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.15rem,2.4vw,1.6rem);line-height:1.1;color:var(--white);
}
.annonce-preuves li:first-child strong{font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--sky)}
.annonce-preuves li>span{font-size:.8rem;line-height:1.45;color:rgba(255,255,255,.62)}
@media(max-width:520px){.annonce-preuves{grid-template-columns:1fr;gap:14px}.annonce-preuves li{flex-direction:row;align-items:baseline;gap:10px}}

/* La carte de démonstration : un liseré de lumière en tourne le bord. */
.annonce-demo{margin:0;max-width:520px;width:100%;justify-self:center}
.annonce-carte{
  position:relative;border-radius:22px;padding:1.5px;
  background:conic-gradient(from var(--annonce-angle),rgba(116,169,204,.15) 0deg,rgba(116,169,204,.9) 60deg,rgba(242,160,141,.9) 110deg,rgba(116,169,204,.15) 170deg,rgba(116,169,204,.15) 360deg);
  animation:annonceTour 6s linear infinite;
  box-shadow:0 40px 90px rgba(3,9,22,.55),0 0 70px rgba(116,169,204,.16);
}
@keyframes annonceTour{to{--annonce-angle:360deg}}
.annonce-carte>*{position:relative}
.annonce-carte::before{
  content:'';position:absolute;inset:1.5px;border-radius:20.5px;
  background:linear-gradient(160deg,rgba(26,43,76,.97),rgba(16,27,48,.98));
}
.demo-tete{display:flex;align-items:center;gap:10px;padding:18px 22px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
/* Le logo de CNFP IA sur son médaillon clair : ses pages marine
   disparaîtraient dans la nuit. */
.demo-medaillon{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff 0%,#f1f6fc 60%,#dfe9f5 100%);
  box-shadow:0 0 0 1px rgba(116,169,204,.35),0 6px 18px rgba(4,12,28,.35);
}
.demo-logo{display:block}
.demo-nom{font-family:var(--font-display);font-weight:700;font-size:.98rem;white-space:nowrap}
.demo-etiquette{
  margin-left:auto;white-space:nowrap;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#BFDCF0;padding:4px 9px;border-radius:999px;border:1px solid rgba(116,169,204,.35);
}
.demo-question{
  margin:20px 22px 0 auto;width:fit-content;max-width:82%;
  padding:11px 15px;border-radius:16px 16px 4px 16px;
  background:var(--blue);font-size:.93rem;line-height:1.45;
}
.demo-reponse{
  margin:14px 22px 0;padding:14px 16px;border-radius:16px 16px 16px 4px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  font-size:.93rem;line-height:1.65;color:rgba(255,255,255,.9);min-height:3.2em;
}
.demo-curseur{
  display:inline-block;width:7px;height:1em;margin-left:2px;vertical-align:-.15em;border-radius:2px;
  background:var(--sky);animation:demoClignote 1s steps(2,start) infinite;
}
@keyframes demoClignote{to{visibility:hidden}}
.demo-citation{
  margin:14px 22px 22px;padding:15px 16px;border-radius:14px;
  background:rgba(116,169,204,.08);border:1px solid rgba(116,169,204,.28);
  transition:opacity .7s ease,transform .7s cubic-bezier(.19,1,.22,1);
}
.demo-citation-ref{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:.88rem;color:var(--white)}
.demo-citation-ref svg{color:var(--sky);flex-shrink:0}
.demo-citation blockquote{
  margin-top:10px;padding-left:12px;border-left:2px solid var(--sky);
  font-style:italic;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.82);
}
.demo-source{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px;font-size:.76rem;color:rgba(255,255,255,.55)}
.demo-tampon{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  font-weight:700;font-size:.72rem;letter-spacing:.04em;color:#7FE3AE;
  background:rgba(43,194,115,.14);border:1px solid rgba(43,194,115,.45);
  transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1);
}
@media(max-width:420px){.demo-tete{padding:16px 16px 12px}.demo-etiquette{font-size:.58rem;letter-spacing:.06em;padding:4px 7px}}
.annonce-legende{margin-top:16px;padding:0 6px;font-size:.8rem;line-height:1.6;color:rgba(255,255,255,.55);text-align:center}

/* Le script prépare la démonstration : réponse vidée, citation et tampon
   cachés, jusqu'à ce que la carte entre à l'écran. Sans script, ou sans
   animation, tout s'affiche d'emblée. */
.annonce-demo.en-attente .demo-citation{opacity:0;transform:translateY(14px)}
.annonce-demo.en-attente .demo-tampon{opacity:0;transform:scale(.6)}
.annonce-demo .demo-citation.visible{opacity:1;transform:none}
.annonce-demo .demo-tampon.visible{opacity:1;transform:none}

/* ===== Contact / CTA ===== */
.contact{background:var(--white)}
.contact-box{
  background:linear-gradient(150deg,var(--navy),var(--navy-deep));
  border-radius:20px;color:var(--white);
  padding:clamp(30px,6vw,70px);
  display:grid;grid-template-columns:1fr;gap:30px;
  position:relative;overflow:hidden;
}
@media(min-width:880px){.contact-box{grid-template-columns:1.2fr 1fr;align-items:center}}
.contact-box::after{
  content:'';position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(68,125,172,.35),transparent 65%);
  bottom:-45%;right:-10%;filter:blur(50px);pointer-events:none;
}
.contact-box h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.16;letter-spacing:-.005em}
.contact-box>div>p{margin-top:13px;color:rgba(255,255,255,.78);font-size:.95rem;max-width:46ch}
.contact-actions{display:flex;flex-direction:column;gap:13px;position:relative;z-index:2}
.contact-line{display:flex;align-items:center;gap:12px;font-size:.92rem;color:rgba(255,255,255,.88)}
.contact-line svg{width:18px;height:18px;stroke:var(--sky);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.contact-actions .btn{margin-top:5px}

/* ===== Footer ===== */
.footer{background:var(--navy-night);color:var(--slate);font-size:.82rem}
.footer-main{
  max-width:1160px;margin:0 auto;
  padding:clamp(44px,6vw,64px) clamp(18px,5vw,48px) clamp(28px,4vw,40px);
  display:grid;grid-template-columns:1fr;gap:34px;
}
@media(min-width:820px){.footer-main{grid-template-columns:1.4fr 1fr}}
.footer-id{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.footer-brandrow{display:flex;align-items:center;gap:12px}
.footer-logo{height:40px;width:auto}
.footer-wordmark{font-family:var(--font-display);font-weight:800;letter-spacing:.1em;color:var(--white);font-size:1.05rem}
.footer-id p{color:var(--slate);max-width:44ch;line-height:1.7}
.socials{display:flex;gap:10px;margin-top:4px}
.socials a{
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.75);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.socials a:hover{background:var(--terra);border-color:var(--terra);color:var(--white)}
.socials svg{width:16px;height:16px;fill:currentColor}
.footer-nav h4{
  font-family:var(--font-display);font-weight:700;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sky);margin-bottom:14px;
}
.footer-nav a{display:block;padding:5px 0;color:rgba(255,255,255,.72);transition:color .25s ease}
.footer-nav a:hover{color:var(--white)}
.footer-legal{
  border-top:1px solid rgba(255,255,255,.1);
  padding:20px clamp(18px,5vw,48px) 28px;
  text-align:center;font-size:.7rem;line-height:1.8;color:rgba(123,136,155,.85);
}
.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;
}

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