/* ============================================================
   DCIP — Page d'accueil (dcipsn.net)
   Système de design repris du portail Cerebrus, palette DCIP :
   marine #0A2557 · bleu #1E4FB8 · or #EFB034
   ============================================================ */

/* ============================================================
   POLICES — fichiers locaux (aucune requete externe)
   Quicksand est declaree 500..700 : ne JAMAIS demander 800,
   le navigateur synthetiserait un faux gras (titres pateux).
   ============================================================ */





/* ============================================================
   TOKENS — repris de Sunu Sante ; l'accent sante (#C21F2C)
   devient le bordeaux de robe #1E4FB8 (8,1:1 sur blanc).
   ============================================================ */
:root{
 --marine:#0A2557; --marine-profond:#071D46; --encre:#0A1A33;
 --bordeaux:#1E4FB8; --bordeaux-profond:#143A8C; --bordeaux-clair:#2F6FED; /* bleu UCAD */
 --or:#EFB034; --or-clair:#F7D98A;
 --vert:#1B9C6E; --vert-doux:#E3F4EC; --vert-encre:#146B4C;
 --ambre:#EFB034; --rouge:#D9342B; --bleu:#2F6FED; --bleu-doux:#E7EEFC;
 --papier:#FFFFFF; --creme:#FFFFFF; --sable:#EEF2F9;
 --ligne:#E4EAF3; --ligne-2:#DCE4F0; --ligne-3:#CFD9E8; --puce:#EEF2F9;
 --gris:#646989; --gris-2:#8A8FA8; --gris-3:#4A4F6A; --gris-4:#B8BCCF;
 --fond-doux:#F7F9FD;
 --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:22px; --r-2xl:24px; --r-pilule:999px;
 --ombre-sm:0 4px 14px rgba(0,0,0,.1);
 --ombre:0 8px 24px rgba(21,25,58,.18);
 --ombre-carte:0 1px 2px rgba(21,25,58,.04),0 18px 36px -18px rgba(21,25,58,.14);
 --ombre-carte-h:0 1px 2px rgba(21,25,58,.04),0 22px 44px -22px rgba(21,25,58,.3);
 --dur-xs:.18s; --dur-s:.32s; --dur-m:.5s; --dur-l:.8s;
 --ease:cubic-bezier(.2,.7,.2,1); --ease-rebond:cubic-bezier(.34,1.56,.64,1);
 --decal:70ms;
 --nav-h:104px; --h-bandeau:36px;
 --large:1240px; --gouttiere:28px;
}
[data-theme="dark"]{
 --papier:#0F1420; --creme:#0F1420; --encre:#F2F4F9; --fond-doux:#151B2A;
 --ligne:rgba(255,255,255,.12); --ligne-2:rgba(255,255,255,.14); --ligne-3:rgba(255,255,255,.18);
 --puce:#1B2233; --gris:#A8AEC6; --gris-2:#8A8FA8; --gris-3:#C3C8DA; --sable:#1B2233;
 --ombre-carte:0 1px 2px rgba(0,0,0,.4),0 18px 36px -18px rgba(0,0,0,.6);
 --ombre-carte-h:0 1px 2px rgba(0,0,0,.4),0 22px 44px -22px rgba(0,0,0,.75);
 --bordeaux-clair:#5EB0F5;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.45;color:var(--encre);background:var(--papier);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4{font-family:"Quicksand","Montserrat",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.05}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid rgba(21,101,192,.55);outline-offset:2px;border-radius:6px}
::selection{background:rgba(21,101,192,.16);color:var(--encre)}
.saut{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:999;font-weight:700}
.saut:focus{left:0}

/* ---- revelation au defilement ---- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].vu{opacity:1;transform:none}
[data-anim]{opacity:0}
[data-anim="monte"]{transform:translate3d(0,18px,0)}
[data-anim="glisse"]{transform:translate3d(28px,0,0)}
[data-anim="zoom"]{transform:scale(.94)}
[data-anim].vu{opacity:1;transform:none;transition:opacity var(--dur-m) var(--ease) var(--delai,0ms),transform var(--dur-m) var(--ease) var(--delai,0ms)}
[data-anim="zoom"].vu{transition-timing-function:var(--ease-rebond)}

.eyebrow{display:flex;align-items:center;gap:8px;font:700 10.5px/1.4 "Montserrat",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(21,25,58,.62);margin-bottom:10px}
[data-theme="dark"] .eyebrow{color:rgba(242,244,249,.6)}
.eyebrow svg{color:var(--bordeaux)}
.h2{font-family:"Quicksand",sans-serif;font-weight:700;font-size:clamp(28px,3.6vw,48px);letter-spacing:-.03em;line-height:1.05;margin:0;text-wrap:balance}
.h2 em{font-style:italic;font-weight:500;color:var(--bordeaux)}
[data-theme="dark"] .h2 em{color:var(--bordeaux-clair)}
.sec{max-width:var(--large);margin:0 auto;padding:10px var(--gouttiere) 60px}
@media(min-width:1281px){.sec{padding-left:0}}
:root{--marge-x:clamp(40px,5vw,110px)}
@media(max-width:640px){:root{--marge-x:28px}}
@media(min-width:1281px){:root{--marge-x:max(clamp(40px,5vw,110px),100px)} .sec,.pied-grille,.pied-bas{margin-left:var(--marge-x);margin-right:auto} #actualites.sec.actus-sec,.sec.rail-sec,.sec.codes{margin-left:0} .compteurs{margin-left:var(--marge-x);margin-right:auto} .cnx{padding-left:max(100px,var(--gouttiere))}}
.sec-head{margin-bottom:24px}
.sec-head-ligne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:20px 40px;align-items:end}
.sec-p{margin:0;color:var(--gris-3);font-size:15.5px;line-height:1.55}
.sec-p strong{color:var(--encre);font-weight:700}
.souligne{display:block;width:92px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--bordeaux-clair),var(--bordeaux));margin:18px 0 0}

/* ============================================================
   0. ECRAN D'OUVERTURE
   ============================================================ */
.intro{position:fixed;inset:0;height:100dvh;z-index:1000;background:var(--papier);color:var(--encre);display:grid;grid-template-rows:1fr auto;cursor:pointer;transition:opacity 650ms cubic-bezier(.16,1,.3,1)}
.intro[hidden]{display:none}
.intro.sortie{opacity:0;pointer-events:none}
.intro-etat{position:absolute;top:max(18px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));display:inline-flex;align-items:center;gap:7px;font:700 10.5px/1.4 "Montserrat",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(21,25,58,.62);pointer-events:none}
[data-theme="dark"] .intro-etat{color:rgba(242,244,249,.62)}
.intro-drapeau{width:16px;height:11px;border-radius:2px;background:linear-gradient(90deg,var(--bordeaux-profond),var(--bordeaux-clair))}
.intro-in{position:relative;display:grid;overflow:hidden}
.intro-scene{grid-area:1/1;position:relative;min-height:0}
.intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;opacity:0;transition:opacity .4s ease-out}
.intro-video.on{opacity:1}
.intro-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#fff 30%,rgba(255,255,255,.94) 42%,rgba(255,255,255,.55) 54%,transparent 68%)}
[data-theme="dark"] .intro-scene::after{background:linear-gradient(90deg,#0F1420 0%,#0F1420 30%,rgba(15,20,32,.94) 42%,rgba(15,20,32,.55) 54%,transparent 68%)}
.intro-id{grid-area:1/1;align-self:center;z-index:1;width:min(42%,560px);margin-left:6%;display:grid;justify-items:start;text-align:left}
.intro-logo{width:clamp(120px,14vw,190px);height:auto;margin:0 0 4px -8px}
@media(max-width:767px){.intro-in{grid-template-rows:auto minmax(0,1fr)}.intro-id{grid-area:1/1;width:100%;margin:0;padding:64px 22px 10px;justify-items:center;text-align:center}.intro-scene{grid-area:2/1}.intro-scene::after{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.2) 30%,transparent 60%)}.intro-logo{width:110px;margin:0}}
.marque-em img{width:46px;height:46px;object-fit:contain}
.pied-logo-img{width:128px;height:128px;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.intro-titre{font-family:"Quicksand",sans-serif;font-weight:700;font-size:clamp(44px,8vw,86px);letter-spacing:-.03em;line-height:1.02;margin:10px 0 0}
.intro-titre span{color:var(--bordeaux)}
.intro-slogan{margin:14px 0 0;color:var(--marine);font-size:clamp(16px,1.85vw,24px);line-height:1.45;font-weight:500;max-width:30ch}
[data-theme="dark"] .intro-slogan{color:var(--bordeaux-clair)}
.intro-sign{margin:22px 0 0;color:var(--gris);font-size:13px;line-height:1.6;max-width:44ch}
.intro-pied{padding:10px 24px max(14px,env(safe-area-inset-bottom));text-align:center}
.intro-btn{font:700 14px "Montserrat",sans-serif;border:0;border-radius:var(--r-pilule);padding:13px 26px;background:var(--encre);color:#fff;cursor:pointer;min-height:44px}
.intro-real{margin:10px 0 0;font:500 11px/1.4 "Montserrat",sans-serif;color:rgba(21,25,58,.5)}
[data-theme="dark"] .intro-real{color:rgba(242,244,249,.5)}

/* ---- embleme : balance de la justice, tracee ---- */
.balance{width:clamp(130px,17vw,200px);height:auto;color:var(--encre)}
.balance .tr{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.balance .pl{fill:none;stroke:var(--bordeaux);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.balance .gd{fill:var(--or)}
.intro .balance .tr,.intro .balance .pl{stroke-dasharray:460;stroke-dashoffset:460;animation:trace 1.5s var(--ease) .15s forwards}
.intro .balance .gd{opacity:0;animation:pop .5s var(--ease-rebond) 1.2s forwards}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.balance .flechau{transform-origin:50px 26px;animation:pese 6s ease-in-out 1.6s infinite}
@keyframes pese{0%,100%{transform:rotate(0)}30%{transform:rotate(3.2deg)}65%{transform:rotate(-2.4deg)}}

/* ============================================================
   1. BANDEAU EN DIRECT
   ============================================================ */
.haut{position:sticky;top:0;z-index:80}
.live{border-bottom:1px solid var(--ligne-2);background:var(--papier);overflow:hidden;display:flex;align-items:stretch;height:var(--h-bandeau);min-height:var(--h-bandeau)}
.live-tag{flex:none;padding:0 16px;background:var(--papier);border-right:1px solid var(--puce);display:flex;align-items:center;gap:9px;position:relative;z-index:1;font:700 10.5px "Montserrat",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--bordeaux)}
.live-dot,.live-pt{width:9px;height:9px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 0 rgba(27,156,110,.5);animation:pulse 1.6s infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(27,156,110,.5)}100%{box-shadow:0 0 0 9px rgba(27,156,110,0)}}
.live-flux{flex:1;overflow:hidden;min-width:0;display:flex;align-items:center}
.live-piste{display:flex;flex-wrap:nowrap;align-items:center;width:max-content;animation:marquee 90s linear infinite;will-change:transform}
/* Garde-fou : tout enfant du bandeau reste sur une seule ligne, meme sans classe */
.live-piste>*{white-space:nowrap;flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}
.live-flux:hover .live-piste{animation-play-state:paused}
.live-item{display:inline-flex;align-items:center;gap:10px;padding:0 26px;height:var(--h-bandeau);font-size:12.5px;white-space:nowrap;border-right:1px solid var(--puce);color:var(--gris);text-decoration:none;transition:color var(--dur-xs) var(--ease)}
.live-item .s{overflow:hidden;text-overflow:ellipsis;max-width:48ch}
.live-item .c{width:8px;height:8px;border-radius:50%;flex:none;background:var(--bordeaux)}
.live-item .t{color:var(--gris-2);font-variant-numeric:tabular-nums}
.live-item b{color:var(--encre);font-weight:700}
.live-item:hover b{color:var(--bordeaux)}

/* ============================================================
   2. NAVIGATION
   ============================================================ */
.nav{position:relative;z-index:80;background:var(--papier);border-bottom:1px solid rgba(21,25,58,.06);transition:box-shadow .3s}
[data-theme="dark"] .nav{border-bottom-color:rgba(255,255,255,.1)}
.nav.colle{box-shadow:0 8px 30px -18px rgba(21,25,58,.25)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,1vw,20px);padding:0 clamp(16px,2vw,40px);height:clamp(66px,7vw,var(--nav-h))}
.marque{display:inline-flex;align-items:center;gap:12px;color:var(--encre);text-decoration:none;flex:none}
.marque-em{width:92px;height:92px;display:grid;place-items:center;flex:none}
html[data-theme="dark"] .marque-em .imd-logo{--ink:#fff;--secondary:#c9d6e8;color:#fff}
.marque-em svg{width:92px;height:92px;overflow:visible;filter:drop-shadow(0 6px 12px rgba(21,101,192,.18))}
.marque-tx{display:flex;flex-direction:column;line-height:1.1}
.marque-nom{font-family:"Quicksand",sans-serif;font-weight:700;font-size:clamp(17px,1.9vw,21px);letter-spacing:-.02em;white-space:nowrap}
.marque-nom em{font-style:normal;color:var(--bordeaux)}
[data-theme="dark"] .marque-nom em{color:var(--bordeaux-clair)}
.marque-sous{font-weight:700;text-transform:uppercase;color:rgba(21,25,58,.55);margin-top:3px;font-size:8px;letter-spacing:.07em;line-height:1.35;max-width:26ch}
[data-theme="dark"] .marque-sous{color:rgba(242,244,249,.55)}
.nav-liens{display:flex;align-items:center;gap:0;flex:0 1 auto;min-width:0;justify-content:center;flex-wrap:nowrap}
.nav-item{font-family:"Montserrat",sans-serif;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--encre);padding:10px 9px;text-decoration:none;white-space:nowrap;min-height:44px}
.nav-item:hover{color:var(--bordeaux)}
.nav-ic{flex:none;color:var(--bordeaux);transition:transform var(--dur-xs) var(--ease)}
.nav-item:hover .nav-ic{transform:translateY(-1px)}
.cnx-tab .nav-ic{margin-right:7px}
.cnx-tab.on .nav-ic{color:var(--bordeaux)}
.chev{font-size:9px;opacity:.6;transition:transform .2s}
.dd{position:relative}
.dd.on>.nav-item .chev{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;background:var(--papier);border-radius:14px;box-shadow:0 30px 60px -20px rgba(21,25,58,.35),0 0 0 1px rgba(21,25,58,.06);padding:8px;display:grid;gap:2px;opacity:0;visibility:hidden;z-index:90;transform:translateY(-8px) scale(.98);transform-origin:0 0;transition:opacity var(--dur-xs) var(--ease),transform var(--dur-s) var(--ease),visibility 0s linear var(--dur-s)}
.dd.on .dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur-xs) var(--ease),transform var(--dur-s) var(--ease),visibility 0s}
.dd-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:var(--encre);text-decoration:none;min-height:44px}
.dd-item:hover{background:var(--fond-doux)}
.dd-ic{width:36px;height:36px;border-radius:10px;background:var(--fond-doux);display:grid;place-items:center;flex:none;transition:transform var(--dur-xs)}
.dd-item:hover .dd-ic{transform:translateX(2px)}
.dd-tx{display:grid;gap:2px;min-width:0}
.dd-tx b{font-size:14px;font-weight:700}
.dd-item:hover .dd-tx b{color:var(--bordeaux)}
.dd-tx small{font-size:12px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-droite{display:flex;align-items:center;gap:8px;flex:none}
.nav-pill{font-family:"Montserrat",sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border:0;background:rgba(21,25,58,.06);color:var(--encre);border-radius:8px;padding:11px 18px;font-size:14px;font-weight:600;white-space:nowrap;min-height:44px;transition:background var(--dur-xs),transform var(--dur-s) var(--ease)}
[data-theme="dark"] .nav-pill{background:rgba(255,255,255,.1)}
.nav-pill:hover{background:rgba(21,25,58,.1)}
.nav-cta{font-family:"Montserrat",sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:8px;padding:13px 22px;font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;background:var(--bordeaux);color:#fff;min-height:44px;box-shadow:0 10px 24px -12px rgba(21,101,192,.55);transition:background .18s,box-shadow .18s,transform .18s}
[data-theme="dark"] .nav-cta{background:var(--bordeaux)}
.nav-cta:hover{background:var(--bordeaux-profond);box-shadow:0 12px 26px -12px rgba(21,101,192,.6);transform:translateY(-2px)}
.nav-appel{display:inline-flex;align-items:center;gap:9px;border:0;background:rgba(21,25,58,.06);color:var(--encre);border-radius:8px;padding:7px 16px;text-decoration:none;white-space:nowrap;min-height:44px;transition:background .2s,color .2s,transform .15s}
[data-theme="dark"] .nav-appel{background:rgba(255,255,255,.1)}
.nav-appel span{display:flex;flex-direction:column;line-height:1.15}
.nav-appel small{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(21,25,58,.55)}
[data-theme="dark"] .nav-appel small{color:rgba(242,244,249,.55)}
.nav-appel b{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.nav-appel:hover{background:linear-gradient(180deg,#23B07F,var(--vert));color:#fff;transform:translateY(-1px)}
.nav-appel:hover small{color:#fff}
.theme-btn{width:44px;height:44px;border-radius:8px;border:0;background:rgba(21,25,58,.06);color:var(--encre);display:grid;place-items:center;cursor:pointer;font-size:16px}
[data-theme="dark"] .theme-btn{background:rgba(255,255,255,.1)}
.burger{display:none;gap:4px;border:0;background:transparent;cursor:pointer;min-width:44px;min-height:44px;padding:11px;margin-left:auto}
.burger span{display:block;width:22px;height:2px;background:var(--encre);border-radius:2px;transition:transform var(--dur-s) var(--ease),opacity var(--dur-xs)}

/* ============================================================
   3. HEROS
   ============================================================ */
.tete{position:relative;overflow:clip;background:var(--papier)}
.hero{max-width:var(--large);margin:0 auto;padding:54px var(--gouttiere) 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px;align-items:center;min-height:520px}
.hero-txt{position:relative;min-width:0}
.h1{font-family:"Quicksand",sans-serif;font-weight:700;font-size:clamp(38px,4.6vw,66px);letter-spacing:-.035em;line-height:1.02;margin:0;text-wrap:balance;animation:monte .8s var(--ease) .25s both}
.h1-acc{display:block;color:var(--bordeaux);animation:monte .8s var(--ease) .4s both}
[data-theme="dark"] .h1-acc{color:var(--bordeaux-clair)}
.h1-barre{display:block;width:92px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--bordeaux-clair),var(--bordeaux));margin:22px 0;transform-origin:left center;animation:trait .6s var(--ease) .55s both}
@keyframes monte{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes trait{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lead{border-left:3px solid var(--bordeaux);padding-left:16px;max-width:540px;font-size:16.5px;line-height:1.6;color:var(--gris-3);margin:0;animation:monte .8s var(--ease) .65s both}
.lead b{color:var(--encre);font-weight:700}
.hero-live{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:18px;font-size:12.5px;color:var(--gris-3);animation:monte .5s var(--ease) .95s both}
.hero-live b{color:var(--encre);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.hero-live .d{width:8px;height:8px;border-radius:50%;background:var(--vert);animation:pulse 1.6s ease-out infinite}
.hero-live span span{font-weight:800;color:var(--encre);font-variant-numeric:tabular-nums}
.hero-live>span+span::before{content:'·';margin-right:10px;color:var(--gris-2)}
.stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;animation:monte .8s var(--ease) .8s both}
.badge-store{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border-radius:12px;background:#0B2447;color:#fff;text-decoration:none;min-width:190px;line-height:1.05;min-height:44px;box-shadow:0 12px 26px -12px rgba(21,25,58,.6);transition:transform var(--dur-s) var(--ease),box-shadow var(--dur-s)}
.badge-store:hover{transform:translateY(-3px);box-shadow:0 18px 30px -12px rgba(21,25,58,.7)}
.badge-store.or{background:linear-gradient(135deg,var(--bordeaux),var(--bordeaux-profond))}
.badge-store small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.04em;opacity:.85}
.badge-store b{display:block;font-family:"Quicksand",sans-serif;font-size:17px;font-weight:700;letter-spacing:-.01em}

/* ---- visuel du heros : le telephone vivant ---- */
.hero-vis{position:relative;display:grid;place-items:center;min-height:460px}
.hero-photo{position:absolute;inset:-40px -60px -40px 0;border-radius:var(--r-2xl);background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s var(--ease)}
.hero-photo.on{opacity:1}
.tel{position:relative;width:272px;height:556px;border-radius:40px;background:linear-gradient(160deg,#1A2138,#0B1020);padding:11px;box-shadow:0 46px 90px -34px rgba(11,36,71,.5),0 10px 28px rgba(11,36,71,.14);animation:flotte 7s ease-in-out infinite;transform-style:preserve-3d;transition:transform .35s var(--ease)}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.tel::before{content:'';position:absolute;left:50%;top:15px;transform:translateX(-50%);width:84px;height:22px;border-radius:14px;background:#0B1020;z-index:4}
.tel-ecran{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:#F1F5F9;display:grid}
.scene{position:absolute;inset:0;padding:40px 14px 14px;display:flex;flex-direction:column;gap:9px;opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease);background:#F1F5F9}
.scene.on{opacity:1;transform:none}
.sc-tete{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:12px;background:linear-gradient(135deg,var(--bordeaux),var(--bordeaux-profond));color:#fff}
.sc-tete b{font-family:"Quicksand",sans-serif;font-size:12.5px;font-weight:700}
.sc-tete small{margin-left:auto;font-size:9px;opacity:.85}
.sc-l{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:11px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.sc-l .p{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;font:700 10px "Montserrat",sans-serif;background:#F4F5F8;color:#0A2557}
.sc-l .n{font-size:10.5px;font-weight:700;color:#0F172A;line-height:1.25}
.sc-l .s{font-size:9px;color:#64748B}
.sc-l .v{margin-left:auto;font:800 12px "Montserrat",sans-serif;font-variant-numeric:tabular-nums;color:#146B4C}
.sc-l .v.b{color:#1E4FB8}
.sc-bar{height:7px;border-radius:4px;background:#E2E8F0;overflow:hidden}
.sc-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#2F6FED,#1E4FB8);width:0;transition:width 1.1s var(--ease)}
.scene.on .sc-bar i{width:var(--w,72%)}
.sc-recu{margin-top:auto;padding:12px;border-radius:13px;background:#fff;text-align:center;box-shadow:0 8px 20px -10px rgba(15,23,42,.35)}
.sc-coche{width:38px;height:38px;border-radius:50%;background:#E3F4EC;display:grid;place-items:center;margin:0 auto 8px}
.scene.on .sc-coche{animation:pop .5s var(--ease-rebond) .3s both}
.sc-recu b{display:block;font:700 13px "Quicksand",sans-serif;color:#0F172A}
.sc-recu small{display:block;font-size:9.5px;color:#64748B;margin-top:2px}
.sc-qr{width:56px;height:56px;margin:9px auto 0;border-radius:8px;background:repeating-conic-gradient(#0F172A 0 25%,#fff 0 50%) 0 0/12px 12px}
.tel-points{display:flex;gap:5px;justify-content:center;margin-top:14px}
.tel-point{width:6px;height:6px;border-radius:50%;background:rgba(21,25,58,.2);border:0;padding:0;cursor:pointer;transition:background .25s,width .25s}
.tel-point[aria-current="true"]{width:18px;border-radius:3px;background:var(--bordeaux)}
.pilule-live{position:absolute;right:-6px;bottom:52px;display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:var(--r-pilule);background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.8);box-shadow:0 16px 36px rgba(11,36,71,.14);font-size:12px;z-index:3;color:#15193A}
[data-theme="dark"] .pilule-live{background:rgba(27,34,51,.8);border-color:rgba(255,255,255,.14);color:#F2F4F9}
.pilule-live b{font:800 15px "Montserrat",sans-serif;font-variant-numeric:tabular-nums}
.pilule-live .d{width:8px;height:8px;border-radius:50%;background:var(--vert);animation:pulse 1.6s infinite}

/* ============================================================
   4. RAIL DE PILIERS (colonne fixe a gauche)
   ============================================================ */
.piliers{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:70;display:flex;flex-direction:column;gap:12px;width:56px;pointer-events:none}
.pilier{pointer-events:auto;display:grid;grid-template-columns:56px minmax(0,0fr);align-items:center;width:56px;height:56px;overflow:hidden;border-radius:999px;background:var(--papier);text-decoration:none;box-shadow:0 0 0 1px rgba(21,25,58,.11),0 2px 4px -1px rgba(21,25,58,.16),0 14px 28px -12px rgba(21,25,58,.3);transition:width .34s var(--ease),grid-template-columns .34s var(--ease),box-shadow .22s ease}
.pilier:hover,.pilier:focus-visible{width:276px;grid-template-columns:56px minmax(0,1fr);box-shadow:0 0 0 1px rgba(21,25,58,.16),0 4px 8px -2px rgba(21,25,58,.18),0 22px 44px -16px rgba(21,25,58,.38)}
html[data-theme="dark"] .pilier-ic{color:#fff}
.pilier-ic{grid-column:1;width:56px;height:56px;display:grid;place-items:center;color:var(--bordeaux);transition:transform .3s}
.pilier:hover .pilier-ic{transform:rotateY(-18deg) rotateX(9deg)}
.pilier-tx{grid-column:2;display:grid;gap:1px;padding:0 18px 0 0;opacity:0;white-space:nowrap;transition:opacity .2s ease .12s}
.pilier:hover .pilier-tx,.pilier:focus-visible .pilier-tx{opacity:1}
.pilier-tx b{font:700 11.5px "Montserrat",sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--encre)}
.pilier-tx small{color:var(--gris);font-size:11.5px;line-height:1.35}

/* ============================================================
   5. PARTENAIRES / TUTELLES
   ============================================================ */
.partenaires{background:var(--papier);padding:34px 0 38px;border-top:1px solid var(--ligne-2);border-bottom:1px solid var(--ligne-2);margin-top:16px}
.part-bande{position:relative;overflow:hidden;padding:6px 0;margin:0 var(--marge-x)}

.part-bande::before,.part-bande::after{content:"";position:absolute;top:0;bottom:0;width:7%;z-index:2;pointer-events:none}
.part-bande::before{left:0;background:linear-gradient(90deg,var(--papier),transparent)}
.part-bande::after{right:0;background:linear-gradient(270deg,var(--papier),transparent)}
.part-piste{display:flex;align-items:center;width:max-content;gap:66px;padding:0 32px;animation:defile 70s linear infinite;will-change:transform}
@keyframes defile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.part-logo{flex:none;display:flex;align-items:center;gap:10px;text-decoration:none;filter:grayscale(1);opacity:.62;transition:filter var(--dur-s) var(--ease),opacity var(--dur-s)}
.part-logo:hover{filter:none;opacity:1}
.part-nom{font-family:"Quicksand",sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--encre);white-space:nowrap}
.part-nom small{display:block;font-family:"Montserrat",sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.06em;color:var(--gris);text-transform:none}
.part-sceau{width:34px;height:34px;color:var(--bordeaux);flex:none}
.part-logo img{height:54px;width:auto;max-width:230px;object-fit:contain;flex:none}
html:not([data-theme="dark"]) .part-logo img.logo-mono{mix-blend-mode:multiply}
html[data-theme="dark"] .part-logo img.logo-mono{filter:brightness(0) invert(1) opacity(.9)}
html[data-theme="dark"] .part-logo img.logo-couleur{filter:brightness(1.08) saturate(1.06) drop-shadow(0 1px 3px rgba(0,0,0,.5))}
html[data-theme="dark"] .part-logo img.logo-fonce{filter:invert(1) hue-rotate(180deg) brightness(1.05)}
.part-logo img.large{height:60px;max-width:260px}
.part-src{display:flex;align-items:center;justify-content:center;gap:6px;margin:26px auto 0;padding:0 28px;font-size:12.5px;color:var(--gris-3);flex-wrap:wrap}
.part-src a{color:var(--bordeaux);font-weight:700;text-decoration:none}
.part-src a:hover{text-decoration:underline}

/* ============================================================
   6. COMPTEURS
   ============================================================ */
.compteurs{max-width:1520px;margin:0 auto;padding:36px clamp(16px,3vw,48px) 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 18px}
.cpt-n{display:flex;align-items:center;gap:8px} .compteurs{justify-items:center;text-align:center} .cpt{justify-self:center;text-align:center} .cpt-n{justify-content:center}
.cpt-n svg{color:var(--bordeaux)}
.cpt-n b{font-family:"Montserrat",sans-serif;font-weight:800;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em;line-height:1;color:var(--encre);font-variant-numeric:tabular-nums}
.cpt-t{font-size:13.5px;font-weight:700;margin-top:8px}
.cpt-s{font-size:11.5px;color:var(--gris);margin-top:2px;line-height:1.4}
.cpt-src{grid-column:1/-1;justify-self:center;font-size:11px;color:var(--gris-2);text-decoration:none;margin-top:6px}
.cpt-src:hover{color:var(--bordeaux);text-decoration:underline}

/* ============================================================
   7. ACTUALITES
   ============================================================ */
#actualites.sec.actus-sec{max-width:none;margin-left:0;margin-right:0} .actus-sec{border-top:1px solid var(--ligne-2);border-bottom:1px solid var(--ligne-2);padding-top:34px;padding-bottom:44px;margin-top:28px;max-width:none}
.actus-sec>.sec-head,.actus-carrousel{max-width:none;margin:0;padding:0 var(--marge-x)} #actualites .sec-head{max-width:none;margin-left:0;margin-right:0;padding:0 var(--marge-x)} #actualites.sec.actus-sec{padding-left:0;padding-right:0}
.actus-carrousel{position:relative}
.actus-piste{display:flex;gap:16px;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:10px 6px 20px;margin:-10px -6px -12px}
.actus-piste::-webkit-scrollbar{display:none}
.actu{flex:0 0 min(340px,86vw);width:min(340px,86vw);scroll-snap-align:start;text-decoration:none;color:var(--encre);background:var(--papier);border:1px solid var(--ligne);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--ombre-carte);transition:box-shadow var(--dur-s) var(--ease),border-color var(--dur-s)}
.actu:hover{box-shadow:var(--ombre-carte-h)}
.actu.une{flex-basis:min(520px,92vw);width:min(520px,92vw)}
.actu.une .actu-head{height:230px}
.actu.une .actu-t{font-size:22px}
.actu-head{position:relative;height:186px;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.3px),linear-gradient(160deg,var(--marine-profond),var(--marine));background-size:18px 18px,cover;overflow:hidden;display:grid;place-items:center}
.actu-head.b{background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.3px),linear-gradient(160deg,var(--bordeaux-profond),var(--bordeaux))}
.actu-wm{width:150px;height:150px;opacity:.28;color:#fff;transform:rotate(-8deg)}
.actus-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform var(--dur-m) var(--ease)}
.actu:hover .actus-img{transform:scale(1.04)}
.actu-nouveau{z-index:2}
.actu{cursor:pointer}
.actu-head{height:200px}
.actu.une .actu-head{height:200px}
.actu.une .actu-t{font-size:20px}
.actus-piste[style*="--rail-w"] .actu,.actus-piste[style*="--rail-w"] .actu.une{width:var(--rail-w);flex:0 0 var(--rail-w)}
.actu-body{padding:20px 22px 24px}
.actu-t{font-size:20px}
.actu-d{font-size:14px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.actu-une{position:absolute;left:14px;top:14px;z-index:3;display:inline-flex;padding:6px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 6px 14px -8px rgba(21,25,58,.5)}
.actu-une .d{display:block;width:10px;height:10px;border-radius:50%;background:#1DB870;animation:pulse 1.4s ease-out infinite}
.actu-chip svg{width:13px;height:13px}
.actu-stats{display:inline-flex;align-items:center;gap:12px;font:600 12px "Montserrat",sans-serif;color:var(--gris)}
.actu-stats span{display:inline-flex;align-items:center;gap:4px}
.actu-stats svg{color:var(--bordeaux)}
.tiroir{width:min(620px,100vw)}
.tiroir-img{width:100%;height:300px;display:grid;place-items:center;overflow:hidden}
.tiroir-img img{width:100%;height:100%;object-fit:cover;display:block}
.tiroir-img img.contain{object-fit:contain;padding:18px}
.tiroir-in{padding:20px 26px 28px}
.tiroir-in .actu-meta{margin-bottom:12px}
.tiroir-outils{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.tiroir-outil{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ligne-2);background:var(--papier);color:var(--encre);border-radius:999px;padding:9px 14px;font:700 13px "Montserrat",sans-serif;cursor:pointer;min-height:40px;transition:border-color .18s,color .18s,background .18s}
.tiroir-outil:hover{border-color:var(--bordeaux);color:var(--bordeaux)}
.tiroir-outil.jaime.on{background:rgba(21,101,192,.1);border-color:var(--bordeaux);color:var(--bordeaux)}
.tiroir-outil .vues{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding-left:10px;border-left:1px solid var(--ligne-2);color:var(--gris);font-weight:600}
/* ---- banniere photo du heros ---- */
.ban{position:absolute;left:0;right:0;top:0;height:min(660px,100%);z-index:0;overflow:hidden;pointer-events:none}
.ban figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s ease}
.ban figure.on{opacity:1}
.ban img{width:100%;height:100%;object-fit:cover;object-position:72% 30%;animation:ken 20s ease-out both}
@keyframes ken{from{transform:scale(1) translate3d(.6%,0,0)}to{transform:scale(1.05) translate3d(-.6%,0,0)}}
.ban::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--papier) 0%,var(--papier) 24%,color-mix(in srgb,var(--papier) 96%,transparent) 36%,color-mix(in srgb,var(--papier) 80%,transparent) 48%,color-mix(in srgb,var(--papier) 45%,transparent) 60%,color-mix(in srgb,var(--papier) 12%,transparent) 72%,transparent 82%),linear-gradient(180deg,var(--papier) 0%,transparent 14%,transparent 58%,color-mix(in srgb,var(--papier) 88%,transparent) 88%,var(--papier) 100%)}
.hero,.partenaires,.compteurs{position:relative;z-index:1}
@media(max-width:1120px){.ban::after{background:linear-gradient(180deg,var(--papier) 0%,var(--papier) 10%,color-mix(in srgb,var(--papier) 88%,transparent) 30%,color-mix(in srgb,var(--papier) 70%,transparent) 48%,color-mix(in srgb,var(--papier) 40%,transparent) 62%,color-mix(in srgb,var(--papier) 10%,transparent) 76%,transparent 100%),linear-gradient(0deg,var(--papier) 0%,color-mix(in srgb,var(--papier) 55%,transparent) 4%,transparent 11%)}}
.actus-img.contain{object-fit:contain;padding:14px}
.actu-chip svg{width:11px;height:11px}
.actu-src{font-size:10.5px;font-weight:700;color:var(--gris-2);letter-spacing:.04em;text-transform:uppercase}
/* ---- tiroir de lecture ---- */
.tiroir-voile{position:fixed;inset:0;z-index:960;background:rgba(11,13,18,.5);backdrop-filter:blur(3px);animation:fondu .25s ease both}
.tiroir-voile[hidden]{display:none}
.tiroir{position:fixed;top:0;right:0;bottom:0;z-index:961;width:min(640px,100vw);background:var(--papier);color:var(--encre);box-shadow:-30px 0 80px -30px rgba(0,0,0,.5);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s var(--ease)}
.tiroir[hidden]{display:none}
.tiroir.on{transform:none}
.tiroir-tete{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 20px;border-bottom:1px solid var(--ligne)}
.tiroir-tete .eyebrow{margin:0}
.tiroir-nav{display:flex;gap:6px;margin-left:auto}
.tiroir-btn{width:42px;height:42px;border-radius:50%;border:0;background:var(--puce);color:var(--encre);display:grid;place-items:center;cursor:pointer;font-size:18px;transition:transform .2s,background .2s,color .2s}
.tiroir-btn:hover{background:var(--bordeaux);color:#fff}
.tiroir-corps{flex:1;overflow:auto;overscroll-behavior:contain;padding-bottom:30px}
.tiroir-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--fond-doux)}
.tiroir-img.contain{object-fit:contain;padding:18px}
.tiroir-in{padding:22px 24px}
.tiroir-meta{display:flex;gap:8px;align-items:center;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-2);flex-wrap:wrap;margin-bottom:12px}
.tiroir-t{font-family:"Quicksand",sans-serif;font-weight:700;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;line-height:1.15;margin:0 0 14px;text-wrap:balance}
.tiroir-txt{font-size:15px;line-height:1.65;color:var(--gris-3)}
.tiroir-txt p{margin:0 0 12px}
.tiroir-txt strong{color:var(--encre)}
.tiroir-txt a{color:var(--bordeaux);font-weight:600}
.tiroir-txt ul,.tiroir-txt ol{margin:0 0 12px 20px}
.tiroir-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 16px}
.tiroir-gal button{border:0;padding:0;border-radius:14px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--fond-doux)}
.tiroir-gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.tiroir-gal button:hover img{transform:scale(1.05)}
.tiroir-src{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:11px 16px;border-radius:999px;border:1px solid var(--ligne-2);color:var(--encre);text-decoration:none;font-weight:700;font-size:13px;min-height:44px}
.tiroir-src:hover{border-color:var(--bordeaux);color:var(--bordeaux)}
.actu-nouveau{position:absolute;right:14px;top:14px;background:var(--bordeaux);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.actu-body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column;gap:8px}
.actu-meta{display:flex;gap:8px;align-items:center;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-2);flex-wrap:wrap}
.actu-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:rgba(21,101,192,.1);color:var(--bordeaux)}
.actu-t{font-family:"Quicksand",sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.actu-d{font-size:13.5px;color:var(--gris);line-height:1.5}
.actu-pied{margin-top:auto;padding-top:6px;display:flex;justify-content:space-between;align-items:center}
.actu-link{font-weight:700;font-size:13.5px;color:var(--marine)}
[data-theme="dark"] .actu-link{color:var(--bordeaux-clair)}
.actu:hover .actu-link{text-decoration:underline}
.actus-ctrl{display:flex;align-items:center;gap:18px;margin-top:18px}
.fleche{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;background:var(--bordeaux);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 22px -10px rgba(21,101,192,.65);transition:transform var(--dur-s) var(--ease-rebond),background var(--dur-xs)}
.fleche:hover{background:var(--bordeaux-profond);transform:translateY(-1px) scale(1.08)}
.actus-prog{flex:1;height:3px;border-radius:2px;background:var(--ligne-2);overflow:hidden}
.actus-prog i{display:block;height:100%;background:var(--bordeaux);transform-origin:left;transform:scaleX(0)}

/* ============================================================
   8. RAIL INSTITUTION
   ============================================================ */
.rail-grille{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px 40px;align-items:start}
.citation{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);border-radius:var(--r-2xl);overflow:hidden;background:linear-gradient(160deg,var(--encre),var(--marine));color:#fff;box-shadow:0 24px 48px -24px rgba(21,25,58,.6)}
.citation-photo{position:relative;margin:0;min-height:320px}
.citation-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.citation-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:54px 18px 16px;background:linear-gradient(180deg,transparent,rgba(11,36,71,.92));font:700 15px/1.2 "Quicksand",sans-serif;letter-spacing:-.01em}
.citation-photo figcaption small{display:block;margin-top:4px;font:600 10.5px "Montserrat",sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.citation-tx{padding:26px}
@media(max-width:640px){.citation{grid-template-columns:1fr}.citation-photo{min-height:0;aspect-ratio:4/3}}
.citation .q{font-family:"Quicksand",sans-serif;font-size:19px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.citation p{margin:14px 0 0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.78)}
.citation p strong{color:#fff}
.citation .sig{margin-top:18px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:22px 26px}
.col-k{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-2);margin-bottom:10px}
.col a,.col span.st{display:flex;align-items:center;gap:9px;padding:7px 0;color:var(--encre);text-decoration:none;font-size:14px;min-height:40px;line-height:1.3}
.col a:hover{color:var(--bordeaux)}
.col small{display:block;color:var(--gris);font-size:12px;font-weight:500}
/* ---- rail a l'identique Sunu Sante ---- */
.sec.rail-sec{max-width:none;padding:34px var(--marge-x) 44px;margin:8px 0 0;border-top:1px solid var(--ligne-2);border-bottom:1px solid var(--ligne-2)}
.rail-sec>.sec-head{max-width:var(--large);margin:0 0 24px;padding:0}
.rail-piste{display:flex;gap:20px;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 6px 28px;margin:-10px -6px -12px;scroll-padding-left:6px;outline:none}
.rail-piste::-webkit-scrollbar{display:none}
.rail-piste:focus-visible{box-shadow:0 0 0 3px rgba(47,107,255,.35);border-radius:26px}
.rail-panneau{flex:none;scroll-snap-align:start;scroll-snap-stop:always;width:min(88vw,440px);display:flex;flex-direction:column;--acc:var(--bordeaux)}
.rail-panneau.moyen{width:min(90vw,600px)}
.rail-panneau.large{width:min(92vw,680px)}
.rail-piste>.rail-panneau:nth-child(2){--acc:#0A2557}
.rail-piste>.rail-panneau:nth-child(3){--acc:#1E4FB8}
.rail-piste>.rail-panneau:nth-child(4){--acc:#D9822B}
.rail-piste>.rail-panneau:nth-child(5){--acc:#0A2557}
.rail-piste>.rail-panneau:nth-child(6){--acc:#1B9C6E}
.min{position:relative;flex:1;display:grid;grid-template-columns:272px minmax(0,1fr);overflow:hidden;border-radius:22px;color:#fff;background:radial-gradient(120% 90% at 100% 0%,rgba(40,151,232,.32),transparent 55%),linear-gradient(160deg,#15193A 0%,#071D46 55%,#1E4FB8 100%);box-shadow:0 30px 60px -30px rgba(21,25,58,.6)}
.min-photo{position:relative;min-height:100%;background:#15193A}
.min-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%}
.min-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(21,25,58,.45) 84%,#071D46 100%)}
.min-mot{position:relative;padding:26px 28px 72px 26px;display:flex;flex-direction:column;justify-content:center}
.min-mot::before{content:"\201C";position:absolute;left:14px;top:4px;font:700 150px/1 "Quicksand",sans-serif;color:rgba(255,255,255,.1)}
.min-mot .eyebrow{color:#9CCBFF;font-size:11px;margin-bottom:14px;position:relative}
.min-mot .eyebrow svg{color:#9CCBFF}
.min-mot .eyebrow::after{content:"";flex:1;height:1px;margin-left:8px;background:linear-gradient(90deg,rgba(156,203,255,.6),transparent)}
.min-cit{position:relative;font-family:"Quicksand",sans-serif;font-style:italic;font-weight:500;font-size:16.5px;line-height:1.5;color:#fff;margin:0;padding-left:16px;border-left:3px solid #2F6FED}
.min-sig{position:relative;margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:3px}
.min-sig b{font-family:"Quicksand",sans-serif;font-size:18px;letter-spacing:-.02em}
.min-sig span{font:700 10.5px/1.3 "Montserrat",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#9CCBFF}
.min-aller{position:absolute;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#1E4FB8;text-decoration:none;box-shadow:0 14px 30px -14px rgba(0,0,0,.6);transition:transform .2s,background .2s,color .2s}
.min-aller:hover{background:var(--bordeaux);color:#fff;transform:translateX(3px)}
.lat{position:relative;overflow:hidden;flex:1;border:1px solid var(--ligne);border-radius:22px;padding:20px 18px 14px;background:linear-gradient(180deg,#FBFBFD 0%,var(--papier) 96px);box-shadow:0 1px 2px rgba(21,25,58,.04),0 24px 48px -28px rgba(21,25,58,.22);transition:transform .25s,box-shadow .25s,border-color .25s}
[data-theme="dark"] .lat{background:linear-gradient(180deg,#151B2A 0%,var(--papier) 96px)}
.lat::after{content:"";position:absolute;right:-50px;bottom:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 12%,#fff),transparent 70%);pointer-events:none}
.lat:hover{transform:translateY(-3px);box-shadow:0 30px 60px -28px rgba(21,25,58,.32);border-color:color-mix(in srgb,var(--acc) 30%,#fff)}
.lat-k{position:relative;z-index:1;display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--ligne)}
.lat-k>svg:first-child{width:22px;height:22px;flex:none}
.lat-k a{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;padding:5px 11px;border-radius:999px;background:rgba(21,25,58,.05);color:var(--encre);text-decoration:none;min-height:30px;display:inline-flex;align-items:center;white-space:nowrap}
[data-theme="dark"] .lat-k a{background:rgba(255,255,255,.1)}
.lat-k a:hover{background:var(--acc);color:#fff}
.li-liste{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;gap:4px}
.li-liste a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:14px;border:1px solid transparent;color:var(--encre);text-decoration:none;min-height:44px;transition:background .18s,border-color .18s,transform .18s}
.li-liste a:hover{background:color-mix(in srgb,var(--acc) 6%,#fff);border-color:color-mix(in srgb,var(--acc) 25%,#fff);transform:translateX(2px)}
[data-theme="dark"] .li-liste a:hover{background:rgba(255,255,255,.06)}
.li-ic{width:34px;height:34px;border-radius:10px;background:var(--fond-doux);display:grid;place-items:center;flex:none;color:var(--encre)}
.li-ic svg{width:22px;height:22px}
.li-date{width:50px;flex:none;text-align:center;padding:6px 0;border-radius:12px;background:linear-gradient(180deg,#EAF3FF,#fff);box-shadow:inset 0 0 0 1px rgba(21,101,192,.18);line-height:1}
[data-theme="dark"] .li-date{background:linear-gradient(180deg,#1B2233,#151B2A)}
.li-date b{display:block;font-family:"Quicksand",sans-serif;font-weight:700;font-size:20px;color:var(--bordeaux)}
.li-date small{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);margin-top:2px}
.li-tx{min-width:0;flex:1;display:grid;gap:2px}
.li-tx b{font-size:13.5px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.li-tx small{font-size:12px;font-weight:600;color:var(--gris-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-chev{flex:none;color:var(--gris-4);transition:transform var(--dur-s),color var(--dur-xs)}
.li-liste a:hover .li-chev,.min-carte:hover .li-chev{transform:translateX(3px);color:var(--bordeaux)}
.min-cartes{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.min-carte{display:flex;align-items:center;gap:12px;background:var(--papier);border:1px solid var(--ligne);border-radius:16px;padding:9px 10px;color:var(--encre);text-decoration:none;min-height:56px;box-shadow:0 1px 2px rgba(21,25,58,.04),0 14px 30px -18px rgba(21,25,58,.14);transition:border-color var(--dur-s),box-shadow var(--dur-s),background .2s}
.min-carte:hover{border-color:rgba(21,101,192,.55);background:#FBFBFD;box-shadow:0 18px 36px -20px rgba(46,58,140,.35)}
[data-theme="dark"] .min-carte:hover{background:#151B2A}
.min-carte .li-tx b{font-size:14px}
.min-carte .li-tx small{white-space:normal;font-weight:500;color:var(--gris);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rail-ctrl{display:flex;align-items:center;gap:18px;margin-top:18px}
.rail-compteur{font:700 12.5px "Montserrat",sans-serif;font-variant-numeric:tabular-nums;color:var(--gris-3);min-width:44px;text-align:center}
.rail-prog{flex:1;height:3px;border-radius:2px;background:var(--ligne-2);overflow:hidden}
.rail-prog i{display:block;height:100%;background:var(--bordeaux);transform-origin:left;transform:scaleX(0)}
.rail-prog i.on{animation:railprog 6s linear forwards}
@keyframes railprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:640px){.rail-panneau,.rail-panneau.moyen,.rail-panneau.large{width:100%}.sec.rail-sec{padding-left:28px;padding-right:28px}.min{grid-template-columns:minmax(0,1fr)}.min-photo{position:static;aspect-ratio:4/3;min-height:0}.min-photo img{position:static}.min-mot{padding:22px 20px 64px}.min-cartes{grid-template-columns:1fr}}

/* ============================================================
   9. BANDE AGENDA
   ============================================================ */
.agenda{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--bordeaux),var(--bordeaux-profond));color:#fff;margin:6px 0 0}
.agenda::before{content:none}
.sceau-anim{position:absolute;left:clamp(12px,5vw,120px);top:50%;width:min(34vw,380px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;opacity:.55}
.sceau-anim i{position:absolute;inset:0;background:url("/uploads/accueil/logos/ucad-sceau.png") center/contain no-repeat;opacity:0;transition:transform 1.1s var(--ease),opacity .9s var(--ease)}
.sceau-anim i:nth-child(1){clip-path:inset(0 50% 50% 0);transform:translate(-18%,-18%) rotate(-8deg)}
.sceau-anim i:nth-child(2){clip-path:inset(0 0 50% 50%);transform:translate(18%,-18%) rotate(8deg);transition-delay:.12s}
.sceau-anim i:nth-child(3){clip-path:inset(50% 50% 0 0);transform:translate(-18%,18%) rotate(8deg);transition-delay:.24s}
.sceau-anim i:nth-child(4){clip-path:inset(50% 0 0 50%);transform:translate(18%,18%) rotate(-8deg);transition-delay:.36s}
.agenda .vu ~ .sceau-anim i,.agenda.vu .sceau-anim i{opacity:1;transform:none}
.agenda.vu .sceau-anim{animation:sceau-flotte 9s 1.6s ease-in-out infinite}
@keyframes sceau-flotte{0%,100%{transform:translateY(-50%) rotate(0)}50%{transform:translateY(-54%) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.sceau-anim i{opacity:1;transform:none}.agenda.vu .sceau-anim{animation:none}}
.agenda .sec{position:relative;padding-top:44px;padding-bottom:48px}
.agenda .h2,.agenda .eyebrow{color:#fff}
.agenda .h2 em{color:var(--or-clair)}
.agenda .eyebrow{color:rgba(255,255,255,.72)}
.agenda .eyebrow svg{color:var(--or-clair)}
.agenda .souligne{background:linear-gradient(90deg,var(--or-clair),rgba(255,255,255,.5))}
.ag-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;margin-top:26px}
.ag-carte{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--r-xl);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;text-decoration:none;transition:background var(--dur-s),transform var(--dur-s) var(--ease)}
.ag-carte:hover{background:rgba(255,255,255,.18);transform:translateY(-3px)}
.ag-date{flex:none;width:52px;text-align:center;border-radius:12px;background:rgba(255,255,255,.16);padding:7px 4px}
.ag-date b{display:block;font:800 19px "Montserrat",sans-serif;line-height:1;font-variant-numeric:tabular-nums}
.ag-date small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-top:3px}
.ag-carte strong{display:block;font-family:"Quicksand",sans-serif;font-size:15.5px;font-weight:700;line-height:1.25}
.ag-carte span span{display:block;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.76);margin-top:4px}

/* ============================================================
   10. DEMARCHES
   ============================================================ */
.dem-filtres{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 20px}
.dem-filtre{border:1px solid var(--ligne-2);background:var(--papier);color:var(--encre);border-radius:999px;padding:9px 16px;font:600 13px "Montserrat",sans-serif;cursor:pointer;min-height:44px;transition:background .18s,border-color .18s,color .18s}
.dem-filtre:hover{background:var(--fond-doux)}
.dem-filtre[aria-pressed="true"]{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff}
.dem-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:14px}
.dem{display:flex;flex-direction:column;gap:9px;padding:20px;border:1px solid var(--ligne);border-radius:var(--r-2xl);background:var(--papier);color:var(--encre);text-decoration:none;box-shadow:var(--ombre-carte);transition:transform var(--dur-s) var(--ease),box-shadow var(--dur-s),border-color .18s}
.dem:hover{transform:translateY(-4px);border-color:rgba(21,101,192,.35);box-shadow:var(--ombre-carte-h)}
.dem-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(21,101,192,.1);color:var(--bordeaux);transition:transform .3s}
.dem:hover .dem-ic{transform:rotate(-6deg) scale(1.06)}
.dem b{font-family:"Quicksand",sans-serif;font-size:17px;font-weight:700;letter-spacing:-.01em}
.dem p{margin:0;font-size:13.5px;color:var(--gris);line-height:1.5}
.dem .go{margin-top:auto;padding-top:6px;font-size:13px;font-weight:700;color:var(--bordeaux);display:inline-flex;align-items:center;gap:6px}
.dem .go svg{transition:transform var(--dur-s) var(--ease)}
.dem:hover .go svg{transform:translateX(3px)}

/* ============================================================
   11. NUMEROS
   ============================================================ */
.num-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px;margin-top:6px}
.num{display:grid;gap:14px;padding:22px;border:1px solid var(--ligne);border-radius:var(--r-2xl);background:var(--papier);box-shadow:var(--ombre-carte);transition:transform var(--dur-s) var(--ease),box-shadow var(--dur-s),border-color .18s}
.num:hover{transform:translateY(-4px);box-shadow:var(--ombre-carte-h);border-color:rgba(21,101,192,.35)}
.num-tete{display:flex;align-items:center;gap:14px}
.num-tete .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(21,101,192,.1);color:var(--bordeaux);flex:none}
.num-tete h3{font-family:"Quicksand",sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1.15}
.num-tete p{margin:3px 0 0;font-size:13.5px;color:var(--gris-3);line-height:1.4}
.num-appel{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;border-radius:16px;background:var(--bordeaux);color:#fff;text-decoration:none;min-height:80px;box-shadow:0 16px 30px -16px rgba(21,101,192,.8);transition:background var(--dur-xs),transform var(--dur-s)}
.num-appel:hover{background:var(--bordeaux-profond);transform:translateY(-2px)}
.num-appel span{display:grid;gap:6px;justify-items:center}
.num-appel small{font:700 10.5px "Montserrat",sans-serif;letter-spacing:.07em;text-transform:uppercase;opacity:.92}
.num-appel b{font-family:"Quicksand",sans-serif;font-weight:700;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.num-appel.vert{background:var(--vert-encre);box-shadow:0 16px 30px -16px rgba(20,107,76,.8)}
.num-appel.vert:hover{background:#0E5239}
.num-appel.marine{background:var(--marine);box-shadow:0 16px 30px -16px rgba(46,58,140,.8)}
.num-appel.marine:hover{background:var(--marine-profond)}

/* ============================================================
   12. LES ESPACES
   ============================================================ */
.acces{position:relative;max-width:none;padding:44px var(--gouttiere) 60px}
.acces::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(rgba(21,25,58,.06) 1px,transparent 1.4px) 0 0/22px 22px,radial-gradient(900px 420px at 14% 0%,rgba(21,101,192,.14),transparent 60%),radial-gradient(700px 380px at 92% 100%,rgba(40,151,232,.12),transparent 60%),var(--fond-doux)}
.acces>*{position:relative;z-index:1;max-width:var(--large);margin-left:auto;margin-right:auto}
.esp-grille{display:grid;grid-template-columns:1fr;gap:16px;margin-top:26px;perspective:1200px}
.sec.acces{max-width:none;padding:0}
.sec.codes{display:none} .sec.codes-x{max-width:none;padding:0;margin-top:16px}
.codes-in{position:relative;overflow:hidden;background:linear-gradient(165deg,#0B2447 0%,var(--bordeaux) 100%);color:#fff;padding:clamp(52px,7vw,96px) var(--marge-x)}
.codes-in::before{content:"";position:absolute;right:-4%;top:50%;width:min(44vw,520px);aspect-ratio:1;transform:translateY(-50%);background:url("/uploads/accueil/logos/ucad-sceau.png") center/contain no-repeat;filter:brightness(0) invert(1);opacity:.12;pointer-events:none}
.codes-form{position:relative;max-width:860px;margin:0 auto;text-align:center}
.codes-h{font:700 clamp(30px,4.2vw,50px)/1.05 "Quicksand",sans-serif;letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance} .codes-h em{font-style:italic;color:#F7D98A}
.codes-p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.82);max-width:60ch;margin:0 auto 24px}
.codes-champ{display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:8px 8px 8px 20px;box-shadow:0 24px 48px -24px rgba(0,0,0,.5)} .codes-champ svg{flex:none;color:var(--bordeaux)}
.codes-champ input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 16px "Montserrat",sans-serif;color:#15193A;padding:10px 0} .codes-champ input::placeholder{color:#7B8199}
.codes-btn{flex:none;border:0;border-radius:999px;background:var(--bordeaux);color:#fff;font:700 14px "Quicksand",sans-serif;padding:13px 22px;cursor:pointer;transition:background .15s,transform .2s var(--ease-rebond)} .codes-btn:hover{background:var(--bordeaux-profond);transform:translateY(-1px)}
.codes-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:18px} .codes-chips button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:rgba(255,255,255,.88);padding:4px 0;font:600 13px "Montserrat",sans-serif;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:5px;transition:color .15s,text-decoration-color .15s} .codes-chips button:hover{color:#fff;text-decoration-color:#fff} .codes-chips button.on{color:#fff;text-decoration-color:#fff;text-decoration-thickness:2px}
.codes-note{margin:16px auto 0;font-size:12.5px;color:rgba(255,255,255,.72)} .codes-note b{color:#fff}
.imd-ucad-controls,.imd-juriste-pause{display:none!important}
#codes.sec.codes{overflow:visible;margin-top:clamp(120px,14vw,190px)}
body #codes .codes-in.imd-juriste-host{background:linear-gradient(165deg,#0B2447 0%,#103c70 55%,#1E4FB8 100%);grid-template-columns:minmax(260px,32%) minmax(0,1fr);align-items:end;padding-top:clamp(24px,3vw,40px);padding-bottom:0;overflow:visible}
#codes .codes-in.imd-juriste-host>.codes-form{padding-bottom:clamp(24px,3vw,40px);align-self:center;max-width:none;width:100%}
#codes .codes-in.imd-juriste-host>.imd-juriste{order:-1;align-self:end;margin-top:clamp(-150px,-10vw,-80px)}
#codes .imd-juriste-media{max-width:440px;background:transparent;overflow:visible;-webkit-mask-image:none;mask-image:none}
#codes .imd-juriste-caption{padding-bottom:16px} #codes .imd-juriste-caption{display:none!important}
@media(max-width:760px){body #codes .codes-in.imd-juriste-host{padding-top:clamp(24px,3vw,40px);gap:0}#codes .codes-in.imd-juriste-host>.codes-form{display:contents}#codes .codes-h{order:1;text-align:center}#codes .codes-p{order:2;text-align:center}#codes .codes-p{margin-bottom:6px}body #codes .codes-in.imd-juriste-host>.imd-juriste{order:3;display:block;width:auto;margin:0 auto;padding:0;line-height:0}#codes .codes-in.imd-juriste-host .imd-juriste-media{display:block}#codes .codes-champ{order:4;margin-top:0}#codes .codes-chips{order:5}#codes .codes-note{order:6;text-align:center;padding-bottom:20px}#codes .codes-in.imd-juriste-host .imd-juriste-media{width:min(62vw,230px);max-width:230px;margin:0 auto}#codes.sec.codes{margin-top:16px}}
.agenda>#agenda.sec{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0} .agenda #agenda .imd-agenda-publications{padding:40px var(--marge-x) 48px!important} .agenda .imd-agenda-banner .imd-agenda-copy{padding-left:var(--marge-x)!important} .agenda .ag-grille{max-width:none}
.agenda .imd-ucad-stage .imd-ucad-film,.agenda .imd-ucad-stage .imd-ucad-poster{object-fit:contain!important;object-position:50% 100%!important;transform:translateY(7%);transform-origin:50% 100%} .agenda .imd-ucad-stage{overflow:hidden} @media(max-width:760px){.agenda .imd-ucad-stage .imd-ucad-film,.agenda .imd-ucad-stage .imd-ucad-poster{transform:translateY(5%) scale(.68)}}
@media(max-width:760px){.imd-campus-hero .imd-campus-stage .imd-campus-scenes::after{background:linear-gradient(180deg,var(--imd-panel),rgba(var(--imd-panel-rgb),.72) 7%,rgba(var(--imd-panel-rgb),0) 34%)}}
.agenda .imd-agenda-publications{overflow:hidden}
.agenda .ag-fenetre{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.agenda .ag-grille.defilant{display:flex;gap:24px;width:max-content;max-width:none;animation:defile var(--duree,40s) linear infinite;will-change:transform}
.agenda .ag-grille.defilant>.ag-carte{flex:0 0 clamp(280px,26vw,380px)}
.agenda .imd-agenda-publications:hover .ag-grille.defilant,.agenda .imd-agenda-publications:focus-within .ag-grille.defilant{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.agenda .ag-grille.defilant{animation:none;width:auto;flex-wrap:wrap}}

.imd-campus-imd{margin:14px 0 0;max-width:48ch;font:500 14.5px/1.6 "Montserrat",sans-serif;color:var(--imd-muted,#446174)} @media(max-width:760px){.imd-campus-imd{font-size:13.5px;max-width:none}}
.imd-campus-imd strong{font-weight:700;color:var(--imd-ink,#082f50)}
.imd-campus-hero .imd-campus-faculty{font-weight:700!important;color:var(--imd-ink,#082f50)!important}
@media(min-width:1281px){.imd-campus-hero .imd-campus-identity{padding-left:clamp(100px,12vw,300px)!important;padding-right:clamp(28px,3vw,56px)!important}}
.imd-campus-hero .imd-campus-marks{flex-wrap:wrap;row-gap:12px}
.imd-campus-hero .imd-campus-wordmark{max-width:100%}
.lang-btn{font:700 12.5px "Montserrat",sans-serif;letter-spacing:.06em;width:auto;padding:0 12px}
.imd-campus-hero .imd-campus-stage .imd-campus-seal,.imd-campus-hero .imd-campus-stage[data-variant] .imd-campus-seal{background:none!important;padding:0!important;box-shadow:none!important;border-radius:0!important}
@media(max-width:700px){.codes-in{padding-left:max(24px,var(--gouttiere));padding-right:var(--gouttiere)}.codes-champ{flex-wrap:wrap;border-radius:22px}.codes-btn{width:100%}}
.actus-galeries{margin-top:28px;display:grid;gap:22px}
.gal-tx b{display:block;font:700 17px/1.25 "Quicksand",sans-serif;letter-spacing:-.01em} .gal-tx small{display:block;color:var(--encre-3,#5B6078);font-size:12.5px;margin:3px 0 10px}
.gal-vignettes{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px} .gal-vignettes::-webkit-scrollbar{display:none}
.gal-vignette{flex:0 0 auto;width:132px;height:88px;border-radius:14px;overflow:hidden;border:0;padding:0;cursor:pointer;background:var(--ligne)} .gal-vignette img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)} .gal-vignette:hover img{transform:scale(1.06)}
.acces::before{display:none}
.acces>.esp-grille{max-width:none;margin:0;gap:0}
.esp.principal{grid-column:1/-1;min-height:460px;border-radius:0;border:0;padding:clamp(44px,6vw,84px) max(var(--gouttiere),calc((100% - var(--large))/2))}
.esp.principal:hover{transform:none}
.esp.principal .esp-badge{right:max(var(--gouttiere),calc((100% - var(--large))/2));top:26px}
.esp.principal b{font-size:clamp(32px,4vw,54px)}
/* ---- ligne du temps des demarches ---- */
.ligne{position:relative;max-width:920px;margin:34px auto 0;padding:10px 0}
.ligne-trait{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;border-radius:2px;background:var(--ligne-2);overflow:hidden}
.ligne-trait b{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(180deg,#2F6FED,#1E4FB8);transform-origin:top;transform:scaleY(var(--p,0));transition:transform .15s linear}
.ligne-etapes{list-style:none;margin:0;padding:0;display:grid;gap:34px}
.ligne-etape{position:relative;display:grid;grid-template-columns:1fr;justify-items:center;gap:14px}
.ligne-pt{grid-column:auto;grid-row:auto;grid-row:1;width:64px;height:64px;border-radius:50%;background:var(--papier);border:3px solid var(--ligne-2);display:grid;place-items:center;color:var(--bordeaux);position:relative;z-index:1;transition:border-color .4s,box-shadow .4s,transform .4s var(--ease-rebond)}
.ligne-pt small{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:var(--bordeaux);color:#fff;font:800 11px "Montserrat",sans-serif;display:grid;place-items:center}
.ligne-carte{grid-column:auto;grid-row:auto;text-align:center;max-width:560px;background:var(--papier);padding:4px 22px;opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ligne-carte p{max-width:none;margin-inline:auto} .ligne-etapes{gap:30px}
.ligne-etape.vu .ligne-carte{opacity:1;transform:none}
.ligne-etape.vu .ligne-pt{border-color:var(--bordeaux);box-shadow:0 0 0 8px rgba(21,101,192,.12);transform:scale(1.06)}
.ligne-carte a{display:inline-block;text-decoration:none;color:var(--encre)}
.ligne-carte b{display:block;font-family:"Quicksand",sans-serif;font-size:19px;font-weight:700;letter-spacing:-.01em}
.ligne-carte p{margin:4px 0 6px;font-size:14px;color:var(--gris);line-height:1.5;max-width:40ch;display:inline-block}
.ligne-carte .go{font-size:13px;font-weight:700;color:var(--bordeaux);display:inline-flex;align-items:center;gap:6px;min-height:44px}
.ligne-carte a:hover b{color:var(--bordeaux)}
 .ligne-etapes{gap:30px}}
.esp.principal p{max-width:56ch;font-size:16.5px}
.esp.principal .esp-tel{width:260px;height:420px;right:clamp(10px,6vw,90px);bottom:-120px;transform:rotate(-8deg)}
.esp{position:relative;display:flex;flex-direction:column;gap:9px;padding:22px;border:1px solid var(--ligne);border-radius:var(--r-2xl);background:var(--papier);color:var(--encre);text-decoration:none;box-shadow:var(--ombre-carte);transition:transform var(--dur-s) var(--ease),box-shadow var(--dur-s),border-color .18s;min-height:150px}
.esp:hover{transform:translateY(-4px);box-shadow:var(--ombre-carte-h);border-color:rgba(21,101,192,.35)}
.esp-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(21,101,192,.1);color:var(--bordeaux);transition:transform .3s}
.esp{transform-style:preserve-3d;will-change:transform}
.esp>*{position:relative;z-index:1}
[data-theme="dark"] .esp-ic{color:var(--bordeaux-clair)}
.esp:hover .esp-ic{transform:rotate(-6deg) scale(1.06)}
.esp b{font-family:"Quicksand",sans-serif;font-size:18px;font-weight:700}
.esp p{margin:0;font-size:13.5px;color:var(--gris);line-height:1.5}
.esp .go{margin-top:auto;font-size:13px;font-weight:700;color:var(--bordeaux);display:inline-flex;align-items:center;gap:6px}
.esp-badge{position:absolute;right:16px;top:16px;font:700 10px "Montserrat",sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--vert-doux);color:var(--vert-encre)}
.esp.principal{grid-column:span 2;grid-row:span 2;background:linear-gradient(165deg,#0B2447 0%,#1E4FB8 100%);border-color:transparent;color:#fff;padding:32px;overflow:hidden;min-height:340px;justify-content:center;gap:14px}
.esp.principal::before{content:'';position:absolute;inset:-45%;z-index:0;background:conic-gradient(from 180deg at 50% 50%,rgba(40,151,232,.55),transparent 28%,rgba(255,255,255,.16) 48%,transparent 66%,rgba(40,151,232,.55));filter:blur(46px);animation:aurore 16s linear infinite;pointer-events:none}
@keyframes aurore{to{transform:rotate(360deg)}}
.esp.principal::after{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(300px circle at var(--mx,75%) var(--my,25%),rgba(255,255,255,.2),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.esp.principal:hover::after{opacity:1}
.esp-puces{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.esp-puces i{font-style:normal;font:600 11.5px "Montserrat",sans-serif;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.esp-tel{position:absolute;right:-22px;bottom:-70px;width:190px;height:300px;border-radius:30px;background:linear-gradient(160deg,#1A2138,#0B1020);padding:8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transform:rotate(-8deg);z-index:0;opacity:.95}
.esp-tel i{display:block;height:100%;border-radius:23px;background:linear-gradient(180deg,#F1F5F9,#E2E8F0);background-image:repeating-linear-gradient(180deg,transparent 0 40px,rgba(21,101,192,.12) 40px 41px),linear-gradient(180deg,#F1F5F9,#E2E8F0)}
.esp-tel i::before{content:'';position:absolute;left:8px;right:8px;top:8px;height:40px;border-radius:23px 23px 10px 10px;background:linear-gradient(135deg,#1E4FB8,#143A8C)}
.esp.principal .esp-ic{background:rgba(255,255,255,.14);color:#fff;width:54px;height:54px}
.esp.principal b{font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;line-height:1.05}
.esp.principal p{color:rgba(255,255,255,.8);font-size:15px;max-width:42ch}
.esp.principal .go{color:#fff;background:rgba(255,255,255,.14);padding:13px 20px;border-radius:999px;align-self:flex-start;min-height:44px;align-items:center}
.esp.principal:hover .go{background:var(--bordeaux)}
.esp.principal .esp-badge{background:rgba(255,255,255,.16);color:#fff}

/* ============================================================
   13. FAQ
   ============================================================ */
.faq-corps{display:grid;grid-template-columns:290px minmax(0,1fr);gap:28px 36px;align-items:start}
.faq-cote{position:sticky;top:110px;display:grid;gap:14px}
.faq-themes{display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid var(--ligne);border-radius:20px;background:var(--papier);box-shadow:var(--ombre-carte)}
.faq-theme{display:inline-flex;align-items:center;justify-content:space-between;gap:7px;width:100%;border:1px solid transparent;border-radius:13px;padding:11px 14px;background:transparent;color:var(--encre);font:600 14px "Montserrat",sans-serif;cursor:pointer;min-height:44px;transition:background .18s,color .18s}
.faq-theme:hover{background:rgba(21,25,58,.05)}
.faq-theme[aria-selected="true"]{background:var(--bordeaux);color:#fff}
.faq-theme .n{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--puce);color:var(--encre)}
.faq-theme[aria-selected="true"] .n{background:rgba(255,255,255,.22);color:#fff}
.faq-aide{display:grid;gap:8px;padding:20px;border-radius:22px;background:linear-gradient(160deg,var(--encre),var(--marine));color:#fff;box-shadow:0 24px 48px -24px rgba(21,25,58,.6)}
.faq-aide strong{font-family:"Quicksand",sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em;margin-top:6px}
.faq-aide>span{font-size:13px;line-height:1.5;color:rgba(255,255,255,.78)}
.faq-aide-btn{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:12px 18px;border-radius:999px;background:#fff;color:#15193A;font:800 14px "Montserrat",sans-serif;text-decoration:none;justify-self:start;min-height:44px;transition:transform .15s}
.faq-aide-btn:hover{transform:translateY(-1px)}
.faq-aide-btn svg{color:var(--bordeaux)}
.faq-liste{display:grid;gap:10px}
.faq-item{background:var(--papier);border:1px solid var(--ligne);box-shadow:var(--ombre-carte);border-radius:20px;padding:16px 20px;transition:border-color .18s var(--ease),box-shadow .32s}
.faq-item.open{border-color:rgba(21,101,192,.4);box-shadow:0 26px 52px -26px rgba(21,101,192,.3)}
.faq-q{width:100%;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;text-align:left;font:700 15.5px "Montserrat",sans-serif;color:var(--encre);line-height:1.35;min-height:44px}
.faq-plus{width:30px;height:30px;border-radius:50%;background:var(--puce);color:var(--encre);display:grid;place-items:center;flex:none;font-size:20px;line-height:1;transition:transform .3s,background .2s}
.faq-item.open .faq-plus{background:var(--bordeaux);color:#fff;transform:rotate(45deg)}
.faq-a{margin-top:12px;color:var(--gris-3);font-size:14.5px;line-height:1.6}
.faq-a strong{color:var(--encre)}

/* ============================================================
   14. PIED DE PAGE
   ============================================================ */
.pied{background:#0B0D12;color:#fff;margin-top:8px}
.pied-grille{max-width:var(--large);margin:0 auto;display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:40px 36px;padding:66px var(--gouttiere) 36px}
.pied-grille>*{min-width:0}
.pied-logo{display:flex;align-items:center;gap:14px}
.pied-logo .balance{width:56px;color:#fff}
.pied-logo .balance .pl{stroke:var(--or-clair)}
.pied-logo .balance .gd{fill:var(--or-clair)}
.pied-logo b{display:block;font-family:"Quicksand",sans-serif;font-weight:700;font-size:23px;letter-spacing:-.02em}
.pied-logo small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-top:2px}
.pied-p{margin:18px 0 0;font-size:14px;line-height:1.65;opacity:.75;max-width:min(400px,100%)}
.pied-contact{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pied-c{display:inline-flex;align-items:center;gap:10px;padding:6px 0;border-radius:0;color:#fff;text-decoration:none;background:none;border:0;min-height:44px;transition:background var(--dur-s)}
.pied-c:hover{background:rgba(255,255,255,.16)}
.pied-c svg{color:var(--or-clair)}
.pied-c span{display:grid;line-height:1.1}
.pied-c small{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.pied-c b{font-size:14.5px;font-weight:800}
.pied-col{font-size:14px;display:grid;gap:12px;align-content:start;justify-items:start}
.pied-k{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin-bottom:2px}
.pied-col a,.pied-col span{color:#fff;text-decoration:none;opacity:.82;line-height:1.35;display:inline-flex;align-items:center;gap:9px;min-height:36px}
.pied-col a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px} .pied-col a svg,.pied-col span svg{flex:none;color:var(--bordeaux-clair)}
.pied-bas{max-width:var(--large);margin:0 auto;padding:18px var(--gouttiere) 30px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;opacity:.6}
.pied-bas a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   FLOTTANTS + MODALE
   ============================================================ */
.flottants{position:fixed;right:22px;bottom:92px;z-index:900;display:flex;flex-direction:column;gap:12px;pointer-events:none}
.flottants>*{pointer-events:auto}
.fab{position:relative;width:60px;height:60px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;cursor:pointer;text-decoration:none;background:linear-gradient(135deg,#23B07F,var(--vert-encre));box-shadow:0 14px 34px -10px rgba(20,107,76,.62);transition:transform .2s}
.fab:hover{transform:translateY(-2px) scale(1.06)}
.fab::before{content:'';position:absolute;inset:-6px;border-radius:50%;background:rgba(27,156,110,.4);z-index:-1;animation:ping 2.1s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(.82);opacity:.65}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.fab-bulle{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(6px,-50%);white-space:nowrap;background:var(--encre);color:#fff;font:600 12.5px "Montserrat",sans-serif;padding:8px 12px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .18s,transform .32s var(--ease-rebond)}
.fab:hover .fab-bulle{opacity:1;transform:translate(0,-50%)}
.fab-etat{position:absolute;right:-2px;top:-2px;width:16px;height:16px;border-radius:50%;background:var(--gris-4);border:3px solid var(--papier);transition:background .3s}
.fab-etat.on{background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 1.6s infinite}
.agents-etat{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--gris-3);min-height:26px}
.agents-etat .d{width:9px;height:9px;border-radius:50%;background:var(--gris-4);flex:none}
.agents-etat.on{color:var(--vert-encre)}
.agents-etat.on .d{background:var(--vert);animation:pulse 1.6s infinite}
.agents-avatars{display:inline-flex;margin-left:4px}
.agents-avatars span{width:26px;height:26px;border-radius:50%;background:var(--bordeaux);color:#fff;font:700 10px "Montserrat",sans-serif;display:grid;place-items:center;border:2px solid var(--papier);margin-left:-8px}
.agents-avatars span:first-child{margin-left:0}
.appel-modale{width:min(1000px,100%);height:min(86vh,780px);padding:0;overflow:hidden;display:flex;flex-direction:column;border-radius:22px}
.appel-tete{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--ligne)}
.appel-tete .tiroir-btn{margin-left:auto}
.appel-modale iframe{flex:1;width:100%;border:0;background:var(--fond-doux)}
/* ---- panneau du centre d'appel (identique Sunu Sante) ---- */
.agent-panneau{position:fixed;right:22px;bottom:94px;z-index:901;width:min(390px,calc(100vw - 32px));height:min(640px,calc(100vh - 130px));background:var(--papier);color:var(--encre);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px -20px rgba(21,25,58,.45),0 0 0 1px var(--ligne);opacity:0;transform:translate3d(0,18px,0) scale(.96);transition:opacity .3s var(--ease),transform .35s var(--ease)}
.agent-panneau[hidden]{display:none}
.agent-panneau.on{opacity:1;transform:none}
.agent-tete{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-bottom:1px solid var(--ligne)}
.agent-av{position:relative;width:44px;height:44px;border-radius:50%;overflow:visible;flex:none}
.agent-av img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 20%;display:block}
.agent-av i{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;background:var(--rouge);border:2px solid var(--papier)}
.agent-av i.on{background:#22C55E}
.agent-tete-tx{display:grid;gap:2px;min-width:0}
.agent-tete-tx b{font-size:15px;letter-spacing:-.01em}
.agent-tete-tx small{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--gris-3)}
.agent-tete-tx small .d{width:7px;height:7px;border-radius:50%;background:var(--gris-4)}
.agent-tete-tx small.on{color:var(--vert-encre)}
.agent-tete-tx small.on .d{background:var(--vert);animation:pulse 1.6s infinite}
.agent-tete .tiroir-btn{margin-left:auto;width:36px;height:36px;font-size:15px}
.agent-corps{flex:1;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(180deg,#F6F7FA 0,#FBFCFE 220px,var(--papier) 100%)}
[data-theme="dark"] .agent-corps{background:var(--papier)}
.agent-visuel{position:relative;margin:0;height:180px;overflow:hidden}
.agent-visuel img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.agent-visuel figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 12px;background:linear-gradient(180deg,transparent,rgba(21,25,58,.85));color:#fff}
.agent-visuel b{display:block;font-family:"Quicksand",sans-serif;font-size:15.5px;font-weight:700}
.agent-visuel span{display:block;font-size:12px;opacity:.9}
.agent-choix{padding:16px 16px 6px}
.agent-choix h3{font-family:"Quicksand",sans-serif;font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 10px}
.agent-canal{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:8px;border:1px solid var(--ligne);border-radius:16px;background:var(--papier);color:var(--encre);text-align:left;cursor:pointer;min-height:64px;transition:border-color .18s,box-shadow .18s,transform .18s}
.agent-canal:not([disabled]):hover{border-color:var(--bordeaux);box-shadow:0 14px 30px -18px rgba(21,101,192,.35);transform:translateY(-1px)}
.agent-canal[disabled]{opacity:.55;cursor:not-allowed}
.agent-canal-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}
.agent-canal-ic.chat{background:rgba(46,58,140,.12);color:var(--marine)}
.agent-canal-ic.audio{background:rgba(21,101,192,.12);color:var(--bordeaux)}
.agent-canal>span:nth-child(2){flex:1;display:grid;gap:2px}
.agent-canal b{font-size:15px}
.agent-canal small{font-size:12px;color:var(--gris)}
.agent-canal .fl{color:var(--gris-2);transition:transform .2s}
.agent-canal:not([disabled]):hover .fl{transform:translateX(3px);color:var(--bordeaux)}
.agent-note{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--marine);font-weight:600}
[data-theme="dark"] .agent-note{color:var(--bordeaux-clair)}
.agent-ou{display:flex;align-items:center;gap:12px;padding:8px 16px;font:700 10.5px "Montserrat",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2)}
.agent-ou::before,.agent-ou::after{content:"";flex:1;height:1px;background:var(--ligne)}
.agent-rappel{margin:0 16px 16px;padding:14px;border:1px solid var(--ligne);border-radius:16px;background:var(--papier)}
.agent-rappel>b{display:block;font-family:"Quicksand",sans-serif;font-size:15px;font-weight:700;margin-bottom:10px}
.agent-champs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.agent-champs label span{display:block;font-size:11.5px;font-weight:700;color:var(--gris-3);margin-bottom:5px}
.agent-champs input{width:100%;border:1px solid rgba(21,25,58,.16);border-radius:12px;padding:11px 12px;font:500 14px "Montserrat",sans-serif;background:var(--papier);color:var(--encre);min-height:44px}
.agent-champs input:focus{outline:0;border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(21,101,192,.15)}
.agent-rappel .cnx-btn{font-size:14px;min-height:44px;padding:12px 16px}
.agent-cadre{display:flex;flex-direction:column;height:100%}
.agent-cadre[hidden]{display:none}
.agent-cadre iframe{flex:1;width:100%;border:0;background:var(--fond-doux)}
.agent-cadre .tiroir-src{margin:10px 16px;align-self:flex-start}
@media(max-width:640px){.agent-panneau{right:10px;left:10px;width:auto;bottom:86px;height:min(640px,calc(100vh - 110px))}}

.voile{position:fixed;inset:0;z-index:950;background:rgba(11,13,18,.55);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;animation:fondu .25s ease both}
.voile[hidden]{display:none}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.modale{position:relative;width:min(460px,100%);background:var(--papier);border-radius:26px;padding:26px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);animation:mont .3s var(--ease) both;max-height:90vh;overflow:auto}
@keyframes mont{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.modale h2{font-family:"Quicksand",sans-serif;font-size:24px;font-weight:700;letter-spacing:-.02em;padding-right:44px}
.modale h2 em{font-style:italic;font-weight:500;color:var(--bordeaux)}
.modale-trait{width:110px;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--bordeaux),var(--bordeaux-clair));margin:12px 0 18px}
.champ{display:block;margin-bottom:14px}
.champ span{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gris-3);margin-bottom:6px}
.champ input{width:100%;border:1px solid rgba(21,25,58,.16);border-radius:14px;padding:13px 15px;font:500 15px "Montserrat",sans-serif;background:var(--papier);color:var(--encre);min-height:44px}
[data-theme="dark"] .champ input{border-color:rgba(255,255,255,.18)}
.champ input:focus{outline:0;border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(21,101,192,.15)}
.modale-btn{width:100%;border:0;border-radius:999px;padding:15px 20px;font:700 15px "Montserrat",sans-serif;background:linear-gradient(135deg,var(--bordeaux-clair),var(--bordeaux-profond));color:#fff;cursor:pointer;min-height:48px;transition:transform .15s,opacity .2s}
.modale-btn:hover{transform:translateY(-1px)}
.modale-btn[disabled]{opacity:.6;cursor:progress;transform:none}
.modale-err{margin-top:12px;font-size:13.5px;font-weight:600;color:#B91C1C;min-height:20px}
[data-theme="dark"] .modale-err{color:#FCA5A5}
.modale-fermer{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;border:0;background:var(--puce);color:var(--encre);cursor:pointer;font-size:18px;display:grid;place-items:center;transition:transform .3s}
.modale-fermer:hover{transform:rotate(90deg)}
.modale-note{margin-top:14px;font-size:12.5px;color:var(--gris);line-height:1.5;text-align:center}
.modale-note a{color:var(--bordeaux);font-weight:700}
/* ---- connexion depliee ---- */
.cnx{position:relative;background:var(--papier);padding:clamp(26px,4vw,52px) 28px clamp(30px,4vw,56px);border-bottom:1px solid var(--ligne);animation:cnxin .5s var(--ease) both}
.cnx[hidden]{display:none}
@keyframes cnxin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.cnx-fermer{position:absolute;right:clamp(14px,3vw,40px);top:18px}
.cnx-tete{text-align:center;max-width:680px;margin:0 auto 22px}
.cnx-tete h2{font-family:"Quicksand",sans-serif;font-size:clamp(24px,2.8vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.cnx-tete h2 em{font-style:italic;font-weight:500;color:var(--bordeaux)}
.cnx-trait{display:block;width:clamp(90px,10vw,150px);height:4px;border-radius:3px;background:linear-gradient(90deg,var(--bordeaux),#CFE3FF);margin:12px auto 0}
.cnx-tabs{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin:18px auto 0}
.cnx-tab{border:0;background:transparent;font:700 14px "Montserrat",sans-serif;color:var(--gris-3);padding:11px 14px;border-bottom:3px solid transparent;cursor:pointer;min-height:44px;text-decoration:none;display:inline-flex;align-items:center;transition:color .18s,border-color .18s}
.cnx-tab:hover{color:var(--encre)}
.cnx-tab.on{color:var(--encre);border-bottom-color:var(--bordeaux)}
.cnx-carte{max-width:520px;margin:0 auto;border-radius:26px;padding:26px;background:var(--papier);border:1px solid var(--ligne);box-shadow:0 30px 60px -30px rgba(21,25,58,.25)}
.cnx-btn{width:100%;border:0;border-radius:999px;padding:14px 20px;font:700 15px "Montserrat",sans-serif;background:linear-gradient(135deg,#2F6FED,#143A8C);color:#fff;cursor:pointer;min-height:48px;transition:transform .15s,opacity .2s}
.cnx-btn:hover{transform:translateY(-1px)}
.cnx-btn[disabled]{opacity:.6;cursor:progress;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1280px){.piliers{display:none}}
@media(max-width:1180px){
 .hero{grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:26px}
 .tel{width:240px;height:492px}
}
@media(max-width:1060px){
 .nav-liens{display:none}
 .nav-appel{display:none}
 .burger{display:grid}
 .nav.ouvert .nav-item{justify-content:center;text-align:center;gap:10px} .nav.ouvert .dd-panel{text-align:left} .nav.ouvert .nav-liens{display:flex;position:fixed;inset:0;z-index:100;background:var(--papier);flex-direction:column;justify-content:flex-start;align-items:stretch;padding:90px 22px 30px;overflow:auto;gap:2px}
 .nav.ouvert .nav-liens .nav-item{font-size:16px;padding:16px 10px;min-height:56px;border-bottom:1px solid var(--ligne);width:100%;justify-content:space-between}
 .nav.ouvert .dd-panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;padding:0 0 10px 14px;min-width:0;border-left:2px solid rgba(21,101,192,.25);border-radius:0;display:none}
 .nav.ouvert .dd.on .dd-panel{display:grid}
 .nav.ouvert .burger{position:relative;z-index:101}
 .nav.ouvert .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
 .nav.ouvert .burger span:nth-child(2){opacity:0}
 .nav.ouvert .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
 .rail-grille{grid-template-columns:1fr}
 .sec-head-ligne{grid-template-columns:1fr}
 .esp-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
 .esp.principal{grid-column:span 2;grid-row:auto}
 .esp:last-child{grid-column:span 2}
 .pied-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
 .pied-brand{grid-column:1/-1}
}
@media(max-width:960px){.faq-corps{grid-template-columns:1fr}.faq-cote{position:static}.faq-themes{flex-direction:row;flex-wrap:wrap}.faq-theme{width:auto}}
@media(max-width:900px){
 .hero{grid-template-columns:1fr;padding:30px var(--gouttiere) 34px;min-height:0}
 .hero-vis{min-height:0;margin-top:10px;padding-bottom:30px}
 .hero-photo{inset:-20px}
 .compteurs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pilule-live{right:auto;left:50%;transform:translateX(-50%);bottom:-4px}
}
@media(max-width:760px){.pied-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px;padding:48px 20px 28px}}
@media(max-width:700px){
 :root{--gouttiere:18px}
 .hero-txt{text-align:center}
 .h1-barre{margin-left:auto;margin-right:auto}
 .lead{border-left:0;padding-left:0;margin:0 auto;text-align:left}
 .stores,.hero-live{justify-content:center}
 .esp-grille{grid-template-columns:1fr}
 .esp.principal,.esp:last-child{grid-column:span 1}
 .esp-tel{display:none}
 .live-tag .opt{display:none}
 .nav-droite .nav-pill .opt{display:none}
}
@media(max-width:560px){
 .nav-cta{display:none}
 .nav-pill{padding:11px 12px}
 .tel{width:220px;height:452px}
}
@media(max-width:460px){.badge-store{min-width:0;flex:1 1 0}}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 [data-reveal],[data-anim]{opacity:1!important;transform:none!important}
 .intro{display:none!important}
}



.imd-logo{--ink:#0b2447;--accent:#0284c7;--secondary:#315170;color:var(--ink)}
.imd-logo .ink{fill:var(--ink)}.imd-logo .accent{fill:var(--accent)}.imd-logo .line{fill:none;stroke:var(--ink);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.imd-logo .secondary{fill:var(--secondary)}
.imd-logo .book-left,.imd-logo .book-right{transform-origin:380px 218px}
.imd-logo .balance{transform-origin:380px 91px}
.imd-logo .pan-left{transform-origin:297px 91px}.imd-logo .pan-right{transform-origin:463px 91px}
.imd-logo .stem{transform-origin:380px 216px}
.imd-logo.animated .book-left{animation:imd-book-left 1.05s cubic-bezier(.16,1,.3,1) both}
.imd-logo.animated .book-right{animation:imd-book-right 1.05s cubic-bezier(.16,1,.3,1) both}
.imd-logo.animated .stem{animation:imd-stem .8s .25s cubic-bezier(.16,1,.3,1) both}
.imd-logo.animated .balance{animation:imd-balance 1.45s .5s cubic-bezier(.22,1,.36,1) both}
.imd-logo.animated .pan-left,.imd-logo.animated .pan-right{animation:imd-counterweight 1.45s .5s cubic-bezier(.22,1,.36,1) both}
.imd-logo.animated .node{animation:imd-connect .5s 1.65s ease-out both}
.imd-logo.animated .letter{animation:imd-letter .75s var(--delay) cubic-bezier(.16,1,.3,1) both}
.imd-logo.animated .signature{animation:imd-signature .65s 1.9s ease-out both}
@keyframes imd-book-left{from{transform:perspective(650px) rotateY(-76deg);opacity:.15}to{transform:perspective(650px) rotateY(0);opacity:1}}
@keyframes imd-book-right{from{transform:perspective(650px) rotateY(76deg);opacity:.15}to{transform:perspective(650px) rotateY(0);opacity:1}}
@keyframes imd-stem{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes imd-balance{0%{transform:rotate(-8deg);opacity:0}28%{opacity:1}75%{transform:rotate(1.1deg)}100%{transform:rotate(0);opacity:1}}
@keyframes imd-counterweight{0%{transform:rotate(8deg)}75%{transform:rotate(-1.1deg)}100%{transform:rotate(0)}}
@keyframes imd-connect{from{opacity:.15}to{opacity:1}}
@keyframes imd-letter{from{clip-path:inset(100% 0 0 0);opacity:.3}to{clip-path:inset(0);opacity:1}}
@keyframes imd-signature{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.imd-logo.animated *{animation:none!important}}

/* ============================================================
   BANNIÈRE DCIP — mise en place « campus » (identique imdfsjp)
   Identité à gauche sur fond clair, scènes vidéo en pleine
   hauteur à droite, fondues dans le fond ; filet d'accent en bas.
   ============================================================ */

/* ---- marque de la barre de navigation ---- */

.marque-txt{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.marque-txt strong{
  font-family:"Quicksand",sans-serif;font-weight:700;
  font-size:clamp(17px,1.9vw,21px);letter-spacing:-.02em;white-space:nowrap;
}
.marque-txt small{
  font-weight:700;text-transform:uppercase;font-size:8.5px;letter-spacing:.07em;
  color:rgba(21,25,58,.55);margin-top:3px;line-height:1.35;max-width:26ch;
}
[data-theme="dark"] .marque-txt small{color:rgba(242,244,249,.55)}
.marque-sep{width:1px;height:44px;background:var(--ligne-2);flex:none;margin:0 2px}
@media(max-width:900px){.marque-sep,.marque-mefpt{display:none}}
@media(max-width:560px){
  .marque-logo{width:46px;height:46px;border-radius:10px}
  .marque-mefpt{width:56px;height:56px}
  .marque-txt small{display:none}
}

/* ---- le bandeau ---- */
.banniere{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--sable);
  color:var(--encre);
  --ban-h:clamp(430px,52vw,600px);
  --ban-video:62%;
}
[data-theme="dark"] .banniere{background:#111829}

/* Voile de fond : chaleur discrète côté texte */
.banniere::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 120% at 2% 0%, rgba(47,111,237,.10), transparent 62%),
    radial-gradient(48% 90% at 26% 108%, rgba(239,176,52,.14), transparent 66%);
}

.ban-in{
  position:relative;z-index:2;
  min-height:var(--ban-h);
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(14px,1.8vw,24px);align-content:center;justify-items:start;
  padding:clamp(34px,4.4vw,58px) var(--marge-x) clamp(52px,5vw,68px);
  max-width:calc(var(--large) + 300px + 2 * var(--marge-x));
}

/* ---------- Emblème animé ---------- */
.ban-embleme{
  position:relative;flex:none;justify-self:start;
  width:clamp(118px,11vw,186px);
  animation:ban-embleme-in 1.1s var(--ease) both;
}
.ban-embleme-video{
  display:block;width:100%;height:auto;border-radius:var(--r-lg);
  mix-blend-mode:multiply;
}
[data-theme="dark"] .ban-embleme-video{mix-blend-mode:screen;filter:brightness(1.3)}
.ban-embleme-socle{
  position:absolute;left:8%;right:8%;bottom:-14px;height:16px;border-radius:50%;
  background:radial-gradient(60% 100% at 50% 0,rgba(10,37,87,.22),transparent 72%);
}
@keyframes ban-embleme-in{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}

/* ---------- Colonne identité ---------- */
.ban-txt{position:relative;z-index:1;max-width:min(46vw,640px)}
.ban-txt::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-52px -150px -52px -46vw;
  background:radial-gradient(58% 62% at 46% 50%,
    var(--sable) 0,var(--sable) 46%,rgba(238,242,249,.86) 62%,
    rgba(238,242,249,.42) 78%,transparent 92%);
}
[data-theme="dark"] .ban-txt::before{
  background:radial-gradient(58% 62% at 46% 50%,
    #111829 0,#111829 46%,rgba(17,24,41,.88) 62%,
    rgba(17,24,41,.45) 78%,transparent 92%);
}
@media(max-width:1024px){.ban-txt{max-width:none}}

.ban-marques{
  display:flex;align-items:center;gap:16px;margin-bottom:clamp(14px,1.8vw,22px);
}
.ban-sceau{
  width:clamp(52px,5.2vw,72px);height:clamp(52px,5.2vw,72px);
  object-fit:contain;flex:none;mix-blend-mode:multiply;
  animation:ban-sceau-in .9s var(--ease) both;
}
[data-theme="dark"] .ban-sceau{mix-blend-mode:screen;filter:brightness(1.3)}
.ban-sigle{
  display:flex;align-items:center;gap:12px;
  padding-left:16px;border-left:2px solid var(--ligne-3);
  animation:ban-sceau-in .9s var(--ease) .1s both;
}
.ban-sigle strong{
  font-family:"Quicksand",sans-serif;font-weight:700;
  font-size:clamp(28px,3.4vw,44px);letter-spacing:.01em;line-height:1;
  color:var(--marine);
}
[data-theme="dark"] .ban-sigle strong{color:#fff}
.ban-sigle span{
  font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(8px,.85vw,10px);color:var(--bordeaux);line-height:1.5;max-width:13ch;
}
[data-theme="dark"] .ban-sigle span{color:var(--bordeaux-clair)}

.ban-titre{
  font-family:"Quicksand",sans-serif;font-weight:700;
  font-size:clamp(30px,4.3vw,58px);line-height:1.04;letter-spacing:-.03em;
  margin:0 0 clamp(12px,1.4vw,18px);text-wrap:balance;
}
.ban-titre .ligne{display:flex;overflow:hidden}
.ban-titre .ligne > span{
  display:block;line-height:1.06;
  animation:ban-monte .85s var(--ease) both;
  animation-delay:var(--d,0s);
}
.ban-titre .ligne:nth-child(2) > span{color:var(--bordeaux)}
[data-theme="dark"] .ban-titre .ligne:nth-child(2) > span{color:var(--bordeaux-clair)}

.ban-rattach{
  font-weight:700;font-size:clamp(13px,1.35vw,16.5px);line-height:1.45;
  color:var(--marine);margin:0 0 clamp(10px,1.2vw,14px);
  animation:ban-fondu .9s var(--ease) .5s both;
}
.ban-rattach span{color:var(--gris);font-weight:600}
[data-theme="dark"] .ban-rattach{color:#E7ECF7}

.ban-chapo{
  font-size:clamp(12.5px,1.15vw,14.5px);line-height:1.68;color:var(--gris-3);
  max-width:56ch;margin:0;
  animation:ban-fondu .9s var(--ease) .6s both;
}
.ban-chapo b{color:var(--encre);font-weight:700}
[data-theme="dark"] .ban-chapo{color:#B9C2D6}
[data-theme="dark"] .ban-chapo b{color:#fff}

.ban-actions{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,2.2vw,26px);
  animation:ban-fondu .9s var(--ease) .72s both;
}
.ban-cta,.ban-cta2{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:var(--r-pilule);
  font-weight:700;font-size:13.5px;text-decoration:none;
  transition:transform var(--dur-xs) var(--ease),box-shadow var(--dur-xs) var(--ease),background var(--dur-xs) var(--ease);
}
.ban-cta{
  background:var(--bordeaux);color:#fff;
  box-shadow:0 10px 26px -10px rgba(30,79,184,.75);
}
.ban-cta:hover{background:var(--bordeaux-profond);transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(30,79,184,.85)}
.ban-cta svg{width:17px;height:17px;flex:none}
.ban-cta2{background:transparent;color:var(--marine);border:1.5px solid var(--ligne-3)}
.ban-cta2:hover{border-color:var(--bordeaux);color:var(--bordeaux);transform:translateY(-2px)}
[data-theme="dark"] .ban-cta2{color:#E7ECF7;border-color:rgba(255,255,255,.28)}

.ban-puces{
  display:flex;flex-wrap:wrap;gap:clamp(20px,2.6vw,38px);
  margin-top:clamp(20px,2.4vw,30px);
  animation:ban-fondu .9s var(--ease) .85s both;
}
.ban-puce{display:flex;flex-direction:column;gap:2px}
.ban-puce b{
  font-family:"Quicksand",sans-serif;font-weight:700;
  font-size:clamp(22px,2.4vw,32px);line-height:1;color:var(--marine);
}
[data-theme="dark"] .ban-puce b{color:#fff}
.ban-puce span{
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:9px;color:var(--gris-2);
}

/* ---------- Scènes vidéo : toute la bannière, dégradé à gauche ---------- */
.ban-scene{
  position:absolute;z-index:1;inset:0;pointer-events:none;
}
.ban-scenes{
  position:absolute;inset:0;pointer-events:auto;cursor:pointer;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 12%,rgba(0,0,0,.28) 30%,rgba(0,0,0,.75) 46%,#000 60%);
  mask-image:linear-gradient(90deg,transparent 0,transparent 12%,rgba(0,0,0,.28) 30%,rgba(0,0,0,.75) 46%,#000 60%);
}
.ban-vue{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.ban-vue.active{opacity:1}
.ban-poster,.ban-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
}
.ban-video{opacity:0;transition:opacity .7s var(--ease)}
.ban-vue.joue .ban-video{opacity:1}
/* léger travelling permanent */
.ban-vue.active .ban-poster,.ban-vue.active .ban-video{animation:ban-derive 22s ease-in-out infinite alternate}

/* Dégradé à gauche : le texte reste parfaitement lisible sur l'image */
.ban-scenes::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--sable) 0,var(--sable) 20%,rgba(238,242,249,.92) 34%,rgba(238,242,249,.55) 48%,rgba(238,242,249,.12) 62%,transparent 74%),
    linear-gradient(180deg,rgba(238,242,249,.7) 0,transparent 14%,transparent 76%,rgba(238,242,249,.6) 100%);
}
[data-theme="dark"] .ban-scenes::after{
  background:
    linear-gradient(90deg,#111829 0,#111829 20%,rgba(17,24,41,.92) 34%,rgba(17,24,41,.55) 48%,rgba(17,24,41,.12) 62%,transparent 74%),
    linear-gradient(180deg,rgba(17,24,41,.7) 0,transparent 14%,transparent 76%,rgba(17,24,41,.65) 100%);
}

.ban-legende{
  position:absolute;right:clamp(20px,2.4vw,36px);bottom:clamp(62px,6vw,84px);z-index:3;
  padding:7px 14px;border-radius:var(--r-pilule);
  background:rgba(7,29,70,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  color:#fff;font-weight:700;font-size:10.5px;letter-spacing:.04em;
  opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.ban-vue.active .ban-legende{opacity:1;transform:none;transition-delay:.35s}

/* Carte du Sénégal en incrustation, coin haut droit */
.ban-carte-incruste{
  position:absolute;top:clamp(20px,2.4vw,34px);right:clamp(20px,2.4vw,36px);z-index:4;
  width:clamp(88px,9vw,140px);pointer-events:none;
  opacity:0;animation:ban-fondu 1.1s var(--ease) 1.1s forwards;
  filter:drop-shadow(0 6px 14px rgba(7,29,70,.4));
}
.ban-carte-incruste svg{width:100%;height:auto;display:block}
.ban-carte-incruste .reg{fill:rgba(255,255,255,.22);stroke:rgba(255,255,255,.55);stroke-width:.7}
.ban-carte-incruste .reg.active{fill:var(--or);stroke:#fff;stroke-width:.9}
.ban-carte-incruste .pt{fill:#fff}
.ban-carte-incruste .pt-halo{fill:rgba(255,255,255,.45);animation:ban-pulse 2.6s ease-in-out infinite}

/* Sélecteur de scène, posé en bas de la vidéo */
.ban-selecteur{
  position:absolute;z-index:5;right:clamp(20px,2.4vw,36px);bottom:clamp(22px,2.4vw,32px);
  display:flex;align-items:center;gap:7px;pointer-events:auto;
}
.ban-choix,.ban-pause{
  border:0;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;border-radius:var(--r-pilule);
  transition:background var(--dur-xs) var(--ease),transform var(--dur-xs) var(--ease);
}
.ban-choix{padding:7px 15px;font-weight:700;font-size:10.5px;letter-spacing:.03em}
.ban-choix:hover{background:rgba(255,255,255,.34)}
.ban-choix.on{background:var(--or);color:var(--marine-profond)}
.ban-pause{width:30px;height:30px;display:grid;place-items:center}
.ban-pause:hover{background:rgba(255,255,255,.34)}
.ban-pause svg{width:15px;height:15px}

/* Filet de progression + accent institutionnel, en bas du bandeau */
.ban-progres{
  position:absolute;left:0;right:0;bottom:0;z-index:6;height:4px;
  background:linear-gradient(90deg,var(--ligne-3) 0,var(--ligne-3) 58%,rgba(239,176,52,.5) 58%,rgba(239,176,52,.5) 100%);
}
.ban-progres i{display:block;height:100%;width:0;background:var(--bordeaux)}

/* Étincelles */
.ban-etincelles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.etincelle{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--bordeaux-clair);
  animation:ban-monte-etincelle linear infinite;
}

@keyframes ban-monte{from{transform:translateY(105%)}to{transform:none}}
@keyframes ban-fondu{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ban-sceau-in{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes ban-derive{from{transform:scale(1) translateX(0)}to{transform:scale(1.03) translateX(-.8%)}}
@keyframes ban-pulse{0%,100%{r:3;opacity:.7}50%{r:6;opacity:0}}
@keyframes ban-monte-etincelle{from{transform:translateY(0);opacity:0}15%{opacity:1}to{transform:translateY(-360px);opacity:0}}

/* ---------- Adaptations ---------- */
@media(max-width:1200px){.banniere{--ban-video:56%}.ban-txt{max-width:min(52vw,560px)}}

@media(max-width:1024px){
  .banniere{--ban-h:auto}
  .ban-in{
    grid-template-columns:minmax(0,1fr);
    padding:clamp(26px,4vw,40px) var(--marge-x) 0;
    max-width:none;
  }
  .ban-scene{
    position:relative;inset:auto;width:auto;
    margin:clamp(24px,4vw,34px) calc(-1 * var(--marge-x)) 0;
    height:clamp(240px,46vw,360px);
  }
  .ban-scenes{
    -webkit-mask-image:none;mask-image:none;
  }
  .ban-scenes::after{
    background:linear-gradient(180deg,var(--sable) 0,transparent 18%,transparent 72%,rgba(238,242,249,.5) 100%);
  }
  [data-theme="dark"] .ban-scenes::after{
    background:linear-gradient(180deg,#111829 0,transparent 18%,transparent 72%,rgba(17,24,41,.55) 100%);
  }
  .ban-selecteur{bottom:14px}.ban-legende{bottom:52px}
  .ban-carte-incruste{width:clamp(70px,13vw,104px)}
}

@media(max-width:640px){
  .ban-marques{gap:12px}
  .ban-sigle{padding-left:12px}
  .ban-puces{gap:18px}
  .ban-cta,.ban-cta2{flex:1 1 100%;justify-content:center}
  .ban-legende{font-size:9.5px;right:12px}
  .ban-selecteur{right:12px;gap:5px}
  .ban-choix{padding:6px 11px;font-size:9.5px}
}

@media(prefers-reduced-motion:reduce){
  .ban-titre .ligne > span,.ban-rattach,.ban-chapo,.ban-actions,.ban-puces,
  .ban-sceau,.ban-sigle,.ban-carte-incruste{animation:none!important;opacity:1;transform:none}
  .ban-vue.active .ban-poster,.ban-vue.active .ban-video{animation:none}
  .etincelle{display:none}
}

/* ============================================================
   GARDE-FOU — toute icône injectée sans attribut de taille
   ============================================================ */
.mission-ic svg,.gem-ic svg{width:100%;height:100%;display:block}
.pilier-ic svg{display:block}

/* Panneau logo : fond blanc, aucune retouche des couleurs de la marque */
.min-photo-logo{background:#fff}
.min-photo-logo::after{display:none}
.min-photo-logo .min-photo-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  object-position:center;padding:clamp(18px,2.4vw,34px);
}


/* ============================================================
   RATTACHEMENT INSTITUTIONNEL (bande défilante)
   ============================================================ */
.part-blason{
  width:46px;height:46px;flex:none;display:block;
}
.part-blason svg{width:100%;height:100%;display:block}
.part-blason path{fill:var(--marine)}
.part-blason path.fil{fill:none;stroke:var(--or);stroke-width:1.6}
.part-blason text{
  fill:#fff;font-family:"Quicksand",sans-serif;font-weight:700;
  letter-spacing:.02em;
}
/* Les blasons gardent leurs couleurs institutionnelles */
.part-logo:has(.part-blason){filter:none;opacity:.78}
.part-logo:has(.part-blason):hover{opacity:1}
.part-piste .part-logo img{height:46px;width:46px;max-width:none;object-fit:contain}
.part-piste .part-nom{font-size:13px}
.part-piste .part-nom small{max-width:30ch;white-space:normal;line-height:1.3}

/* ============================================================
   NOS MISSIONS
   ============================================================ */
.grille-missions{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.mission{
  position:relative;display:flex;flex-direction:column;
  padding:26px 24px 24px;border-radius:var(--r-lg);
  background:var(--papier);border:1px solid var(--ligne);
  box-shadow:var(--ombre-carte);overflow:hidden;
  transition:transform var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease);
}
.mission::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--bordeaux-clair),var(--bordeaux));
  transform:scaleY(0);transform-origin:top;transition:transform var(--dur-s) var(--ease);
}
.mission:hover{transform:translateY(-4px);box-shadow:var(--ombre-carte-h);border-color:var(--ligne-3)}
.mission:hover::before{transform:scaleY(1)}
.mission-n{
  position:absolute;top:18px;right:20px;
  font-family:"Quicksand",sans-serif;font-weight:700;font-size:34px;line-height:1;
  color:var(--bordeaux);opacity:.13;letter-spacing:-.04em;
}
.mission-ic{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border-radius:11px;background:var(--bleu-doux);color:var(--bordeaux);
  padding:9px;margin-bottom:16px;
}
[data-theme="dark"] .mission-ic{background:rgba(47,111,237,.18);color:var(--bordeaux-clair)}
.mission h3{font-size:16.5px;line-height:1.2;margin:0 0 9px;letter-spacing:-.02em}
.mission p{font-size:13px;line-height:1.6;color:var(--gris-3);margin:0}

/* ============================================================
   LA PLATEFORME GEM (section sombre)
   ============================================================ */
.grille-gem{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.gem-carte{
  display:flex;flex-direction:column;
  padding:26px 24px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform var(--dur-s) var(--ease),background var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease);
}
.gem-carte:hover{transform:translateY(-4px);background:rgba(255,255,255,.1);border-color:rgba(239,176,52,.45)}
.gem-ic{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border-radius:11px;background:rgba(239,176,52,.16);color:var(--or);
  padding:9px;margin-bottom:16px;
}
.gem-carte h3{font-size:16.5px;margin:0 0 9px;color:#fff;letter-spacing:-.02em}
.gem-carte p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.72);margin:0}

/* ============================================================
   QUESTIONS FRÉQUENTES — corps de réponse
   ============================================================ */
.faq-rep{
  padding:0 20px 20px;font-size:13.5px;line-height:1.68;color:var(--gris-3);
  max-width:86ch;
}
.faq-item[open] .faq-rep{animation:ban-fondu .45s var(--ease) both}


/* ============================================================
   CORRECTIFS DE FOND — mode clair, panneaux du rail, FAQ
   ============================================================ */

/* ---- 1. Bande GEM : elle doit etre reellement sombre.
   Ses enfants sont ecrits en blanc ; sans fond, le mode clair
   affichait du blanc sur blanc. ---- */
.sec.sec-sombre{
  max-width:none;margin:52px 0;padding:60px var(--marge-x) 68px;
  position:relative;isolation:isolate;color:#fff;
  background:
    radial-gradient(110% 90% at 88% 0%,rgba(40,151,232,.30),transparent 58%),
    linear-gradient(160deg,#15193A 0%,#071D46 55%,#12326F 100%);
}
@media(min-width:1281px){
  .sec.sec-sombre{margin-left:0;margin-right:0;padding-left:var(--marge-x);padding-right:var(--marge-x)}
}
.sec-sombre .h2{color:#fff}
.sec-sombre .h2 em{color:var(--or-clair)}
.sec-sombre .eyebrow{color:rgba(255,255,255,.62)}
.sec-sombre .eyebrow svg{color:var(--or)}
.sec-sombre .sec-p{color:rgba(255,255,255,.78)}
.sec-sombre .souligne{background:var(--or)}

/* ---- 2. Panneaux du rail : le balisage emploie .lat-tete / .lat-liste,
   qui n'avaient aucune regle — d'ou les puces natives et le vide. ---- */
.lat{display:flex;flex-direction:column}
.lat-tete{position:relative;z-index:1;display:flex;align-items:center;gap:10px;
  margin-bottom:14px;padding-bottom:13px;border-bottom:1px solid var(--ligne)}
.lat-tete .eyebrow{margin:0;color:var(--acc)}
.lat-liste{position:relative;z-index:1;list-style:none;margin:0;padding:0;
  display:grid;gap:8px;align-content:start;flex:1}
.lat-liste li{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:4px 12px;
  padding:11px 14px;border-radius:14px;background:rgba(21,25,58,.035);
  border:1px solid transparent;font-size:14px;line-height:1.45;color:var(--encre);
  transition:background var(--dur-xs) var(--ease),border-color var(--dur-xs) var(--ease),transform var(--dur-xs) var(--ease);
}
[data-theme="dark"] .lat-liste li{background:rgba(255,255,255,.055)}
.lat-liste li:hover{background:color-mix(in srgb,var(--acc) 9%,transparent);
  border-color:color-mix(in srgb,var(--acc) 26%,transparent);transform:translateX(3px)}
/* Sigle en pastille, libelle a cote */
.lat-liste li b{
  grid-column:1;justify-self:start;font:800 10.5px/1 "Montserrat",sans-serif;letter-spacing:.06em;
  padding:6px 9px;border-radius:8px;background:var(--acc);color:#fff;white-space:nowrap;
}
.lat-liste li span{grid-column:2;color:var(--gris-3)}
/* Entrees sans sigle : une puce losange dessinee, pas un disque natif */
.lat-liste li:not(:has(b)){grid-template-columns:auto minmax(0,1fr)}
.lat-liste li:not(:has(b))::before{
  content:"";grid-column:1;width:7px;height:7px;flex:none;border-radius:2px;
  background:var(--acc);transform:rotate(45deg);align-self:center;
}
.lat-liste li:not(:has(b)) span{color:var(--encre);font-weight:600}
/* Le halo decoratif ne doit pas former une tache blanche opaque */
.lat::after{width:220px;height:220px;right:-70px;bottom:-70px;opacity:.55;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 22%,transparent),transparent 72%)}

/* ---- 3. FAQ : le balisage est <details><summary>, la feuille visait .faq-q.
   Le rond gris etait un .faq-plus vide et non positionne. ---- */
.faq-item{padding:0;overflow:hidden}
.faq-item>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:17px 20px;min-height:56px;
  font:700 15.5px/1.35 "Montserrat",sans-serif;color:var(--encre);
  transition:color var(--dur-xs) var(--ease);
}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::marker{content:""}
.faq-item>summary:hover{color:var(--bordeaux)}
.faq-plus{
  width:30px;height:30px;flex:none;border-radius:50%;background:var(--puce);color:var(--encre);
  display:grid;place-items:center;transition:transform .3s var(--ease),background .2s,color .2s;
}
.faq-plus::before{content:"";width:11px;height:2px;border-radius:2px;background:currentColor;
  box-shadow:0 0 0 0 currentColor;grid-area:1/1}
.faq-plus::after{content:"";width:2px;height:11px;border-radius:2px;background:currentColor;grid-area:1/1;
  transition:transform .3s var(--ease)}
.faq-item[open] .faq-plus{background:var(--bordeaux);color:#fff;transform:rotate(90deg)}
.faq-item[open] .faq-plus::after{transform:scaleY(0)}
.faq-item[open]{border-color:rgba(30,79,184,.38);box-shadow:0 26px 52px -26px rgba(30,79,184,.28)}


/* ============================================================
   ICONES BICOLORES — contour encre + details or
   ============================================================ */
:root{--ic-2:var(--or);--ic-fond:rgba(239,176,52,.16)}
[data-theme="dark"]{--ic-2:var(--or-clair);--ic-fond:rgba(247,217,138,.14)}
/* Le premier trace porte la couleur heritee et un aplat tres doux ;
   les traces suivants (details internes) passent en or. */
.ic-duo>*{stroke:currentColor}
.ic-duo>:first-child:not(:only-child){fill:var(--ic-fond)}
.ic-duo>*+*{stroke:var(--ic-2);fill:none}
/* Sur fond sombre l'aplat doit rester lisible */
.sec-sombre .ic-duo>:first-child:not(:only-child){fill:rgba(239,176,52,.22)}

/* ============================================================
   FILM APC dans la bande GEM
   ============================================================ */
.gem-corps{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start}

.apc-film{
  position:relative;margin:0;border-radius:24px;overflow:hidden;isolation:isolate;
  background:#071D46;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
  aspect-ratio:9/16;max-height:620px;max-width:420px;
}
.apc-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.apc-film::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,29,70,.15) 0,transparent 26%,rgba(7,29,70,.55) 62%,rgba(7,29,70,.94) 100%);
}
.apc-film-legende{
  position:absolute;z-index:1;left:0;right:0;bottom:0;display:grid;gap:7px;
  padding:26px 24px 24px;color:#fff;
}
.apc-film-k{
  font:800 10.5px/1.4 "Montserrat",sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or-clair);
}
.apc-film-legende strong{
  font-family:"Quicksand",sans-serif;font-weight:700;font-size:clamp(19px,2vw,23px);
  letter-spacing:-.02em;line-height:1.2;
}
.apc-film-d{font-size:13px;line-height:1.6;color:rgba(255,255,255,.78);max-width:42ch}
@media(prefers-reduced-motion:reduce){.apc-film-video{display:none}}

/* ============================================================
   BANNIERE EN MOBILE — texte en haut, image en bas, fondue vers le haut
   ============================================================ */
@media(max-width:1024px){
  /* Le voile radial sert au recouvrement de bureau : inutile une fois empile */
  .ban-txt::before{display:none}
  .ban-txt{max-width:none}
  .ban-in{padding-bottom:clamp(18px,3vw,26px)}
  .ban-scene{
    margin-top:clamp(18px,3vw,28px);
    height:clamp(260px,52vw,380px);
  }
  /* L'image se dissout progressivement vers le haut, dans le fond de la page */
  .ban-scenes{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.22) 10%,rgba(0,0,0,.72) 24%,#000 40%);
    mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.22) 10%,rgba(0,0,0,.72) 24%,#000 40%);
  }
  .ban-scenes::after{
    background:linear-gradient(180deg,var(--sable) 0,rgba(238,242,249,.66) 14%,rgba(238,242,249,.18) 30%,transparent 46%);
  }
  [data-theme="dark"] .ban-scenes::after{
    background:linear-gradient(180deg,#111829 0,rgba(17,24,41,.68) 14%,rgba(17,24,41,.2) 30%,transparent 46%);
  }
}

/* ---- FAQ centree, sur toute la largeur utile ---- */
#faq.sec{max-width:var(--large);margin-left:auto;margin-right:auto;padding-left:var(--gouttiere);padding-right:var(--gouttiere)}
@media(min-width:1281px){
  #faq.sec{margin-left:auto;margin-right:auto;padding-left:var(--gouttiere);padding-right:var(--gouttiere)}
}
#faq .sec-head{text-align:center;display:grid;justify-items:center}
#faq .sec-head .eyebrow{justify-content:center}
.faq-rep strong{color:var(--encre);font-weight:700}

/* ---- Icones : l'aplat de seconde couleur pour les traces fermes ---- */
.ic-plein>:only-child{fill:var(--ic-fond)}
.sec-sombre .ic-plein>:only-child{fill:rgba(239,176,52,.22)}

/* ---- Banniere empilee : le texte d'abord, l'image ensuite ---- */
@media(max-width:1024px){
  .banniere{display:flex;flex-direction:column}
  .ban-in{order:1}
  .ban-scene{order:2}
  .ban-etincelles{order:0}
  .ban-progres{order:3;position:relative}
}

/* ---- Les cinq missions sur une seule ligne, centrees ---- */
.grille-missions{grid-template-columns:repeat(5,minmax(0,1fr));justify-content:center}
@media(max-width:1180px){.grille-missions{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.grille-missions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.grille-missions{grid-template-columns:minmax(0,1fr)}}


/* ============================================================
   FILM APC — mise en place finale (apres les regles de base)
   ============================================================ */

/* Grand ecran : le film occupe toute la droite de la bande et se fond vers la gauche */
@media(min-width:1180px){
  .gem-corps{grid-template-columns:minmax(0,min(56%,var(--large)))}
  .apc-film{
    position:absolute;z-index:0;top:0;bottom:0;right:0;left:auto;
    width:min(48%,920px);max-width:none;max-height:none;margin:0;
    aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:transparent;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 14%,rgba(0,0,0,.72) 30%,#000 46%);
    mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 14%,rgba(0,0,0,.72) 30%,#000 46%);
  }
  .apc-film::after{
    background:
      linear-gradient(90deg,#071D46 0,rgba(7,29,70,.88) 15%,rgba(7,29,70,.45) 31%,rgba(7,29,70,.08) 47%,transparent 62%),
      linear-gradient(180deg,rgba(7,29,70,.55) 0,transparent 18%,transparent 62%,rgba(7,29,70,.82) 100%);
  }
  .apc-film-legende{left:auto;right:0;width:min(430px,62%);padding:0 clamp(28px,3vw,52px) clamp(30px,3.4vw,48px)}
  .gem-corps>.grille-gem{position:relative;z-index:1}
}

/* Mobile et tablette : le film passe en fond, les cellules se posent dessus, deux par ligne */
@media(max-width:1179px){
  .gem-corps{position:relative;isolation:isolate;min-height:clamp(430px,78vw,620px);
    border-radius:24px;overflow:hidden;padding:clamp(18px,3.2vw,26px)}
  .apc-film{
    position:absolute;z-index:0;inset:0;width:auto;height:auto;
    max-width:none;max-height:none;margin:0;aspect-ratio:auto;
    border:0;border-radius:0;box-shadow:none;background:#071D46;
  }
  .apc-film::after{
    background:linear-gradient(180deg,rgba(7,29,70,.82) 0,rgba(7,29,70,.62) 38%,rgba(7,29,70,.88) 100%);
  }
  .apc-film-legende{position:static;padding:0;margin-top:auto;display:none}
  .gem-corps>.grille-gem{
    position:relative;z-index:1;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(10px,2vw,16px);align-content:center;min-height:inherit;
  }
  .gem-carte{background:rgba(7,29,70,.34);backdrop-filter:blur(9px) saturate(1.1);
    -webkit-backdrop-filter:blur(9px) saturate(1.1);
    border-color:rgba(255,255,255,.24);box-shadow:0 16px 34px -22px rgba(0,0,0,.6)}
  .gem-carte h3{text-shadow:0 1px 10px rgba(7,29,70,.7)}
  .gem-carte p{color:rgba(255,255,255,.86);text-shadow:0 1px 8px rgba(7,29,70,.7)}
}
/* Deux cellules par ligne jusqu'au plus petit ecran : c'est la disposition voulue. */
@media(max-width:480px){
  .gem-corps{padding:14px}
  .gem-corps>.grille-gem{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .gem-carte{padding:14px 12px;gap:7px}
  .gem-carte h3{font-size:14px}
  .gem-carte p{font-size:11.5px;line-height:1.5}
  .gem-ic{width:32px;height:32px}
}

/* ---- Scenes du film APC : fondu enchaine entre les metiers ---- */
.apc-scenes{position:absolute;inset:0}
.apc-vue{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.apc-vue.active{opacity:1}
.apc-poster,.apc-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.apc-video{opacity:0;transition:opacity .5s var(--ease)}
.apc-vue.active .apc-video{opacity:1}
@media(prefers-reduced-motion:reduce){.apc-video{display:none}.apc-vue{transition:none}}

/* ============================================================
   MARQUE — le film composé DCIP + MEFPT
   ============================================================ */
.marque{display:inline-flex;align-items:center;flex:none;text-decoration:none;
  border-radius:12px;transition:transform var(--dur-xs) var(--ease)}
.marque:hover{transform:translateY(-1px)}
.marque-film{
  display:block;flex:none;height:clamp(64px,7.2vw,92px);width:auto;
  object-fit:contain;border:0;border-radius:0;background:transparent;box-shadow:none;
}
@media(max-width:560px){.marque-film{height:54px}}

/* ============================================================
   ÉCRAN DE DÉMARRAGE
   ============================================================ */
.demar{
  position:fixed;inset:0;z-index:999;display:grid;place-items:center;align-content:center;
  gap:clamp(18px,2.6vw,30px);padding:clamp(24px,5vw,60px);
  background:#fff;color:var(--encre);overflow:hidden;isolation:isolate;
}
.demar[hidden]{display:none}
.demar-fond{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(85% 60% at 50% 12%,rgba(30,79,184,.10),transparent 64%),
    radial-gradient(70% 55% at 50% 100%,rgba(239,176,52,.14),transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%,#F6F9FE 62%,#EEF2F9 100%);
}
.demar-film{
  width:min(78vw,660px);height:auto;display:block;border-radius:18px;background:#fff;
  box-shadow:0 40px 80px -36px rgba(10,37,87,.34);
  animation:demar-film 1s var(--ease) both;
}
@keyframes demar-film{from{opacity:0;transform:scale(.92) translateY(14px)}to{opacity:1;transform:none}}
.demar-bas{
  margin:0;max-width:44ch;text-align:center;font-size:clamp(12.5px,1.4vw,14.5px);line-height:1.6;
  color:var(--gris-3);animation:demar-film .9s .5s var(--ease) both;
}

/* Les apprentis : silhouettes tracées qui se dessinent puis travaillent */
.demar-gens{
  position:absolute;z-index:-1;left:50%;bottom:0;transform:translateX(-50%);
  width:min(1100px,124vw);height:auto;opacity:.2;pointer-events:none;
}
.demar-gens g{fill:none;stroke:var(--bordeaux);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round}
.demar-gens circle{fill:none}
.demar-sol path{stroke:rgba(10,37,87,.16);stroke-width:2}
.demar-p{stroke-dasharray:300;stroke-dashoffset:300;animation:demar-trait 1.5s var(--ease) both}
.demar-p1{animation-delay:.15s}
.demar-p2{animation-delay:.35s;stroke:var(--or)}
.demar-p3{animation-delay:.55s}
@keyframes demar-trait{to{stroke-dashoffset:0}}
.demar-outil{transform-box:fill-box;transform-origin:0% 50%;
  animation:demar-geste 1.1s 1.5s var(--ease) infinite alternate}
@keyframes demar-geste{from{transform:rotate(-13deg)}to{transform:rotate(11deg)}}
.demar-etincelle circle{fill:var(--or);stroke:none;opacity:0;
  animation:demar-eclat 1.1s 1.9s ease-out infinite}
.demar-etincelle circle:nth-child(2){animation-delay:2.2s}
.demar-etincelle circle:nth-child(3){animation-delay:2.5s}
@keyframes demar-eclat{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(2.4)}}

.demar-jauge{width:min(200px,50vw);height:3px;border-radius:2px;background:var(--ligne-2);overflow:hidden}
.demar-jauge i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--or),var(--or-clair));animation:demar-jauge 4.6s linear forwards}
@keyframes demar-jauge{to{width:100%}}

.demar-passer{
  position:absolute;right:clamp(16px,3vw,32px);top:clamp(16px,3vw,32px);
  border:1px solid var(--ligne-2);background:var(--papier);color:var(--encre);
  padding:9px 18px;border-radius:999px;cursor:pointer;min-height:40px;
  font:700 12.5px "Montserrat",sans-serif;letter-spacing:.04em;
  transition:background var(--dur-xs) var(--ease),border-color var(--dur-xs) var(--ease);
}
.demar-passer:hover{background:var(--sable);border-color:var(--bordeaux);color:var(--bordeaux)}

.demar.sortie{animation:demar-sortie .7s var(--ease) forwards;pointer-events:none}
@keyframes demar-sortie{to{opacity:0;visibility:hidden}}
html.demar-actif{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .demar-film,.demar-bas{animation:none}
  .demar-p{stroke-dashoffset:0;animation:none}
  .demar-outil,.demar-etincelle circle{animation:none}
  .demar-jauge i{width:100%;animation:none}
}

/* ---- Panneau logo du rail : le film d'origine, contenu et réduit ---- */
.min-photo-logo .min-photo-video,
.min-photo-logo .min-photo-img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:contain;object-position:center;
  padding:clamp(34px,4.6vw,62px);
}

/* ---- Bandeau des métiers techniques sur l'écran de démarrage ---- */
.demar-metiers{
  display:flex;gap:clamp(10px,1.4vw,18px);justify-content:center;flex-wrap:wrap;
  max-width:min(96vw,860px);
}
.demar-vig{
  position:relative;margin:0;flex:0 1 clamp(120px,17vw,190px);
  aspect-ratio:3/4;border-radius:16px;overflow:hidden;isolation:isolate;
  background:#EEF2F9;border:1px solid var(--ligne-2);
  box-shadow:0 18px 34px -20px rgba(10,37,87,.34);
  animation:demar-vig .8s var(--d,0s) var(--ease) both;
}
@keyframes demar-vig{from{opacity:0;transform:translateY(22px) scale(.95)}to{opacity:1;transform:none}}
.demar-vig-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.demar-vig::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(7,29,70,.82) 100%);
}
.demar-vig figcaption{
  position:absolute;z-index:1;left:0;right:0;bottom:0;padding:10px 12px;
  color:#fff;font:700 10.5px/1.35 "Montserrat",sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
}
@media(max-width:560px){
  .demar-vig{flex:0 1 calc(50% - 8px)}
  .demar-vig:nth-child(n+5){display:none}
}
@media(prefers-reduced-motion:reduce){.demar-vig{animation:none}.demar-vig-film{display:none}}

/* ---- Ascenseur du rail : barre visible et commandes actives ---- */
.rail-piste{scrollbar-width:thin;scrollbar-color:var(--ligne-3) transparent}
.rail-piste::-webkit-scrollbar{height:8px}
.rail-piste::-webkit-scrollbar-track{background:var(--ligne-2);border-radius:4px}
.rail-piste::-webkit-scrollbar-thumb{background:var(--ligne-3);border-radius:4px}
.rail-piste::-webkit-scrollbar-thumb:hover{background:var(--bordeaux)}
.rail-ctrl .fleche:disabled{opacity:.35;cursor:default}
.rail-prog i{transition:transform .25s var(--ease)}
.rail-prog i.on{animation:none}
/* Une icône dans le menu, alignée sur le libellé */
.nav-item{display:inline-flex;align-items:center;gap:7px}
.nav-item .ic-duo{flex:none;opacity:.85}
.nav-item:hover .ic-duo{opacity:1}

/* ============================================================
   ILLUSTRATIONS ANIMÉES DES ACTUALITÉS
   ============================================================ */
.actu-scene{
  position:absolute;inset:0;margin:auto;width:min(74%,210px);height:auto;
  fill:none;stroke:rgba(255,255,255,.62);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;overflow:visible;
}
.actu-head .actu-lettrage{opacity:.16}

/* --- Traits communs --- */
.actu-scene .s-cadre{stroke:rgba(255,255,255,.86);fill:rgba(255,255,255,.07)}
.actu-scene .s-pli,.actu-scene .s-pied,.actu-scene .s-sol{stroke:rgba(255,255,255,.46)}
.actu-scene .s-flux{stroke:rgba(255,255,255,.5)}
.actu-scene .s-lien{stroke:rgba(255,255,255,.3)}
.actu-scene .s-noeud,.actu-scene .s-point,.actu-scene .s-paquet{fill:var(--or);stroke:none}
.actu-scene .s-sceau{fill:var(--or);stroke:none}
.actu-scene .s-sceau-coche,.actu-scene .s-coche{stroke:#0A2557;stroke-width:3}
.actu-scene .s-etoile{fill:var(--or);stroke:none}
.actu-scene .s-halo circle{fill:rgba(255,255,255,.05);stroke:none}
.actu-scene .s-halo{animation:s-respire 5s var(--ease) infinite}
@keyframes s-respire{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.actu-scene .s-halo{transform-box:fill-box;transform-origin:50% 50%}

/* --- Plateforme : histogramme vivant, balayage, satellites en orbite --- */
.actu-scene .s-barre{stroke:var(--or-clair);stroke-width:7;transform-box:fill-box;
  transform-origin:50% 100%;animation:s-barre 3.4s var(--ease) infinite}
.s-b2{animation-delay:.25s}.s-b3{animation-delay:.5s}.s-b4{animation-delay:.75s}
@keyframes s-barre{0%,100%{transform:scaleY(.42)}45%{transform:scaleY(1)}}
.actu-scene .s-balayage{stroke:rgba(255,255,255,.65);stroke-width:2;
  animation:s-balaye 3.6s linear infinite}
@keyframes s-balaye{0%{transform:translateX(0);opacity:0}
  12%{opacity:.85}88%{opacity:.85}100%{transform:translateX(116px);opacity:0}}
.actu-scene .s-orbite{transform-box:fill-box;transform-origin:50% 50%;
  animation:s-orbite 14s linear infinite}
@keyframes s-orbite{to{transform:rotate(360deg)}}

/* --- Évaluation : les critères se cochent, la jauge monte, le sceau tombe --- */
.actu-scene .s-critere{opacity:0;animation:s-entre 4.2s var(--ease) infinite}
.s-c2{animation-delay:.45s}.s-c3{animation-delay:.9s}
@keyframes s-entre{0%{opacity:0;transform:translateX(-7px)}
  16%,74%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateX(-7px)}}
.actu-scene .s-critere .s-coche{stroke:var(--or-clair);stroke-width:2.6}
.actu-scene .s-jauge-fond{stroke:rgba(255,255,255,.2);stroke-width:6}
.actu-scene .s-jauge-fil{stroke:var(--or);stroke-width:6;stroke-dasharray:122;
  stroke-dashoffset:122;animation:s-jauge 4.2s var(--ease) infinite}
@keyframes s-jauge{0%{stroke-dashoffset:122}55%,85%{stroke-dashoffset:26}100%{stroke-dashoffset:122}}
.actu-scene .s-sceau{transform-box:fill-box;transform-origin:50% 50%;
  animation:s-tampon 4.2s var(--ease) infinite}
@keyframes s-tampon{0%,52%{opacity:0;transform:scale(1.7)}
  64%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.actu-scene .s-sceau-coche{stroke-dasharray:26;stroke-dashoffset:26;
  animation:s-trait .5s 2.7s var(--ease) infinite}

/* --- Curricula : le livre s'ouvre, les lignes s'écrivent, l'étoile tourne --- */
.actu-scene .s-page path{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.82);stroke-width:2.6}
.actu-scene .s-page{transform-box:fill-box;transform-origin:100% 50%}
.actu-scene .s-pg-d{transform-origin:0% 50%}
.s-pg-g{animation:s-ouvre-g 5s var(--ease) infinite}
.s-pg-d{animation:s-ouvre-d 5s var(--ease) infinite}
@keyframes s-ouvre-g{0%,100%{transform:perspective(320px) rotateY(-46deg)}
  30%,78%{transform:perspective(320px) rotateY(0)}}
@keyframes s-ouvre-d{0%,100%{transform:perspective(320px) rotateY(46deg)}
  30%,78%{transform:perspective(320px) rotateY(0)}}
.actu-scene .s-etoile{transform-box:fill-box;transform-origin:50% 50%;
  animation:s-tourne 12s linear infinite,s-monte 5s var(--ease) infinite}
@keyframes s-tourne{to{transform:rotate(360deg)}}
@keyframes s-monte{0%,100%{translate:0 8px;opacity:.55}40%,72%{translate:0 0;opacity:1}}
.actu-scene .s-rayon{stroke:rgba(255,255,255,.3);stroke-dasharray:3 5}

/* --- Ressources : le pôle diffuse, les paquets circulent --- */
.actu-scene .s-pole{fill:var(--or);stroke:none}
.actu-scene .s-pole-ic{stroke:#0A2557;stroke-width:3}
.actu-scene .s-onde circle{fill:none;stroke:var(--or);stroke-width:2;opacity:0;
  transform-box:fill-box;transform-origin:50% 50%;animation:s-onde 3s var(--ease) infinite}
.actu-scene .s-o2 circle{animation-delay:1.5s}
@keyframes s-onde{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
.actu-scene .s-cible{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.7);stroke-width:2.4}
.actu-scene .s-paquet{animation:s-paquet 2.6s var(--ease) infinite}
.s-q2{animation-delay:.3s}.s-q3{animation-delay:.6s}
@keyframes s-paquet{0%{opacity:0;translate:0 0}
  14%{opacity:1}86%{opacity:1}100%{opacity:0;translate:67px 0}}
.s-q1{--fin:-31px} .s-q3{--fin:31px}
.s-q1{animation-name:s-paquet-h}.s-q3{animation-name:s-paquet-b}
@keyframes s-paquet-h{0%{opacity:0;translate:0 0}14%{opacity:1}86%{opacity:1}100%{opacity:0;translate:67px -31px}}
@keyframes s-paquet-b{0%{opacity:0;translate:0 0}14%{opacity:1}86%{opacity:1}100%{opacity:0;translate:67px 31px}}

/* --- Agenda : le mois se remplit, la date retenue se marque --- */
.actu-scene .s-jour circle{animation:s-jour 3.6s var(--ease) infinite}
.s-p2{animation-delay:.12s}.s-p3{animation-delay:.24s}.s-p4{animation-delay:.36s}
.s-p5{animation-delay:.48s}.s-p6{animation-delay:.6s}.s-p7{animation-delay:.72s}
@keyframes s-jour{0%,100%{opacity:.35;transform:scale(.82)}45%{opacity:1;transform:scale(1)}}
.actu-scene .s-jour circle{transform-box:fill-box;transform-origin:50% 50%}
.actu-scene .s-jour-retenu{animation:s-tampon 3.6s var(--ease) infinite}

@keyframes s-trait{to{stroke-dashoffset:0}}
.actu:hover .actu-scene .s-cadre{stroke:#fff}
@media(prefers-reduced-motion:reduce){
  .actu-scene *{animation:none!important;stroke-dashoffset:0!important;
    opacity:1!important;transform:none!important}
}

/* ---- Les cinq missions : grille centrée dans la section ---- */
.grille-missions{justify-content:center;justify-items:stretch;margin-inline:auto;
  max-width:var(--large)}
@media(min-width:1281px){#missions.sec{margin-left:auto;margin-right:auto;
  padding-left:var(--gouttiere);padding-right:var(--gouttiere)}}
#missions .sec-head{text-align:center;display:grid;justify-items:center}
#missions .sec-head .eyebrow{justify-content:center}

/* ============================================================
   FINITIONS — icônes FAQ et rail, marque sombre, copie mobile
   ============================================================ */

/* ---- Une icône devant chaque question ---- */
.faq-item>summary{gap:12px}
.faq-q-tx{flex:1;min-width:0}
.faq-ic{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;
  background:var(--puce);color:var(--bordeaux);
  transition:background var(--dur-xs) var(--ease),color var(--dur-xs) var(--ease);
}
.faq-item[open] .faq-ic{background:var(--bordeaux);color:#fff}
.faq-item[open] .faq-ic .ic-duo>*+*{stroke:var(--or-clair)}
.faq-item[open] .faq-ic .ic-plein>:only-child,
.faq-item[open] .faq-ic .ic-duo>:first-child:not(:only-child){fill:rgba(255,255,255,.18)}
.faq-rep{padding-left:70px}
@media(max-width:560px){.faq-ic{display:none}.faq-rep{padding-left:20px}}

/* ---- Une icône devant chaque entrée du rail ---- */
.lat-liste li{grid-template-columns:auto auto minmax(0,1fr)}
.lat-ic{grid-column:1;flex:none;color:var(--acc);align-self:center}
.lat-liste li b{grid-column:2}
.lat-liste li span{grid-column:3}
.lat-liste li:not(:has(b)){grid-template-columns:auto minmax(0,1fr)}
.lat-liste li:not(:has(b)) .lat-ic{grid-column:1}
.lat-liste li:not(:has(b)) span{grid-column:2}
/* La puce losange n'a plus lieu d'être : l'icône la remplace */
.lat-liste li:not(:has(b))::before{content:none}

/* ---- La marque suit le thème ---- */
.marque-sombre{display:none}
[data-theme="dark"] .marque-clair{display:none}
[data-theme="dark"] .marque-sombre{display:block}

/* ---- Copie de la marque dans le menu mobile ouvert ---- */
.nav-liens-marque{display:none}
@media(max-width:1024px){
  .nav.ouvert .nav-liens-marque,
  .nav-liens.ouvert .nav-liens-marque{
    display:block;width:min(70%,220px);height:auto;margin:4px auto 18px;
    border-radius:12px;background:#fff;box-shadow:0 10px 26px -14px rgba(10,37,87,.4);
    animation:demar-film .5s var(--ease) both;
  }
}

/* ============================================================
   MISE EN PLACE PROGRESSIVE — le site se construit au défilement
   ============================================================ */

/* Le titre de section se pose, le trait se trace, le chapô suit. */
.sec-head .eyebrow{opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease) 60ms,transform .6s var(--ease) 60ms}
.sec-head .h2{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease) 150ms,transform .7s var(--ease) 150ms}
.sec-head .souligne{transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease) 330ms}
.sec-head .sec-p{opacity:0;transform:translateY(12px);
  transition:opacity .7s var(--ease) 300ms,transform .7s var(--ease) 300ms}
.vu .sec-head .eyebrow,.vu .sec-head .h2,.vu .sec-head .sec-p,
.sec.vu .sec-head .eyebrow,.sec.vu .sec-head .h2,.sec.vu .sec-head .sec-p{opacity:1;transform:none}
.vu .sec-head .souligne,.sec.vu .sec-head .souligne{transform:scaleX(1)}
#faq .sec-head .souligne,#missions .sec-head .souligne{transform-origin:center}

/* Les cartes se posent une à une, avec un très léger effet de profondeur. */
.mission,.gem-carte,.faq-item,.rail-panneau,.cpt{
  opacity:0;transform:translateY(20px) scale(.985);
  transition:opacity .6s var(--ease) var(--delai,0ms),transform .6s var(--ease) var(--delai,0ms);
}
.mission.vu,.gem-carte.vu,.faq-item.vu,.rail-panneau.vu,.cpt.vu,
.vu .faq-item,.vu .mission,.vu .gem-carte,.vu .cpt,.vu .rail-panneau{
  opacity:1;transform:none;
}
/* Le rang des cartes donne le décalage, même sans --delai posé par le script. */
.grille-missions>:nth-child(1){--delai:0ms}
.grille-missions>:nth-child(2){--delai:70ms}
.grille-missions>:nth-child(3){--delai:140ms}
.grille-missions>:nth-child(4){--delai:210ms}
.grille-missions>:nth-child(5){--delai:280ms}
.faq-liste>:nth-child(1){--delai:0ms}
.faq-liste>:nth-child(2){--delai:50ms}
.faq-liste>:nth-child(3){--delai:100ms}
.faq-liste>:nth-child(4){--delai:150ms}
.faq-liste>:nth-child(5){--delai:200ms}
.faq-liste>:nth-child(n+6){--delai:250ms}

/* Les entrées de liste du rail se déplient. */
.lat-liste li{opacity:0;transform:translateX(-10px);
  transition:opacity .45s var(--ease) var(--d,0ms),transform .45s var(--ease) var(--d,0ms),
             background var(--dur-xs) var(--ease),border-color var(--dur-xs) var(--ease)}
.rail-panneau.vu .lat-liste li{opacity:1;transform:none}
.lat-liste li:nth-child(1){--d:80ms}.lat-liste li:nth-child(2){--d:140ms}
.lat-liste li:nth-child(3){--d:200ms}.lat-liste li:nth-child(4){--d:260ms}
.lat-liste li:nth-child(5){--d:320ms}.lat-liste li:nth-child(6){--d:380ms}

/* Le chiffre du compteur monte pendant que le nombre défile. */
.cpt-n{transition:transform .5s var(--ease) var(--delai,0ms)}
.cpt-n b{display:inline-block;font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .sec-head .eyebrow,.sec-head .h2,.sec-head .sec-p,
  .mission,.gem-carte,.faq-item,.rail-panneau,.cpt,.lat-liste li{
    opacity:1!important;transform:none!important;transition:none!important}
  .sec-head .souligne{transform:scaleX(1)!important}
}

/* ============================================================
   TIROIR D'ACTUALITÉ
   ============================================================ */
.atir{position:fixed;inset:0;z-index:900}
.atir[hidden]{display:none}
.atir-voile{
  position:absolute;inset:0;background:rgba(7,20,45,.55);
  opacity:0;transition:opacity .35s var(--ease);cursor:pointer;
}
.atir.ouvert .atir-voile{opacity:1}

.atir-panneau{
  position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;
  width:min(100%,720px);background:var(--papier);color:var(--encre);
  box-shadow:-30px 0 80px -30px rgba(7,20,45,.55);
  transform:translateX(100%);transition:transform .42s var(--ease);
  overflow:hidden;
}
.atir.ouvert .atir-panneau{transform:none}
.atir-panneau:focus{outline:none}

/* --- Tête illustrée, reprend la scène animée de la rubrique --- */
.atir-tete{
  position:relative;flex:none;padding:clamp(26px,4vw,38px);padding-top:clamp(120px,16vw,170px);
  color:#fff;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(110% 90% at 88% 0%,rgba(40,151,232,.34),transparent 60%),
    linear-gradient(160deg,#15193A 0%,#071D46 58%,var(--c,#1E4FB8) 190%);
}
.atir-scene{position:absolute;inset:0;z-index:-1;display:grid;place-items:center;opacity:.5}
.atir-scene .actu-scene{position:static;width:min(58%,300px);margin:0 0 0 auto;
  transform:translate(-8%,-14%)}
.atir-chip{
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);
  font:800 10.5px "Montserrat",sans-serif;letter-spacing:.14em;text-transform:uppercase;
}
.atir-titre{
  margin:14px 0 10px;font-family:"Quicksand",sans-serif;font-weight:700;
  font-size:clamp(23px,3.2vw,34px);line-height:1.15;letter-spacing:-.02em;color:#fff;
}
.atir-meta{margin:0;font-size:13px;color:rgba(255,255,255,.72);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.atir-sep{opacity:.5}

.atir-fermer{
  position:absolute;z-index:2;top:clamp(16px,2.4vw,22px);right:clamp(16px,2.4vw,22px);
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;
  transition:background var(--dur-xs) var(--ease),transform var(--dur-xs) var(--ease);
}
.atir-fermer:hover{background:rgba(255,255,255,.26);transform:rotate(90deg)}
.atir-fermer .ic-duo>*+*{stroke:currentColor}

/* --- Corps de l'article --- */
.atir-corps{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(24px,3.4vw,36px) clamp(26px,4vw,38px) clamp(30px,4vw,44px);
  scrollbar-width:thin;scrollbar-color:var(--ligne-3) transparent;
}
.atir-corps::-webkit-scrollbar{width:9px}
.atir-corps::-webkit-scrollbar-thumb{background:var(--ligne-3);border-radius:5px}
.atir-corps p{margin:0 0 17px;font-size:15.5px;line-height:1.72;color:var(--gris-3);max-width:68ch}
.atir-corps p:first-child{
  font-size:17px;line-height:1.62;color:var(--encre);font-weight:500;
  padding-left:16px;border-left:3px solid var(--bordeaux);
}
.atir-corps p:last-child{margin-bottom:0}

/* --- Pied : navigation entre articles --- */
.atir-pied{
  flex:none;display:flex;align-items:center;gap:10px;
  padding:14px clamp(20px,3vw,28px);border-top:1px solid var(--ligne);
  background:var(--fond-doux,var(--sable));
}
.atir-nav,.atir-lien{
  display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:9px 15px;
  border-radius:999px;cursor:pointer;background:var(--papier);color:var(--encre);
  border:1px solid var(--ligne-2);font:700 13px "Montserrat",sans-serif;
  transition:border-color var(--dur-xs) var(--ease),color var(--dur-xs) var(--ease),
             background var(--dur-xs) var(--ease);
}
.atir-nav:hover:not(:disabled),.atir-lien:hover{border-color:var(--bordeaux);color:var(--bordeaux)}
.atir-nav:disabled{opacity:.38;cursor:default}
.atir-lien{margin-inline:auto}
.atir-lien.fait{border-color:var(--vert);color:var(--vert)}

/* --- Les cartes d'actualité deviennent cliquables --- */
.actu{cursor:pointer;text-align:left;border:0;font:inherit;color:inherit;appearance:none}
.actu:focus-visible{outline:3px solid var(--bordeaux);outline-offset:3px}
.live-item{cursor:pointer}

html.atir-actif{overflow:hidden}

@media(max-width:560px){
  .atir-panneau{width:100%}
  .atir-pied{flex-wrap:wrap}
  .atir-lien{order:3;margin-inline:0;width:100%;justify-content:center}
  .atir-nav{flex:1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .atir-voile,.atir-panneau{transition:none}
  .atir-fermer:hover{transform:none}
}

/* ---- Le panneau du rail ne doit pas s'étirer démesurément ---- */
.rail-piste{align-items:start}
.rail-panneau{max-height:420px}
.rail-panneau>.min,.rail-panneau>.lat{height:100%;min-height:0}
.lat-liste{overflow:auto;scrollbar-width:thin}
/* Le logo garde une taille raisonnable quel que soit la hauteur du panneau */
.min-photo-logo .min-photo-video,
.min-photo-logo .min-photo-img{padding:clamp(24px,3.4vw,44px)}
@media(max-width:640px){.rail-panneau{max-height:none}}

/* ---- Icônes dans la légende du film APC ---- */
.apc-film-k{display:inline-flex;align-items:center;gap:7px}
.apc-film-k .ic-duo{flex:none}
.apc-film-d{display:flex;align-items:flex-start;gap:9px}
.apc-film-d .ic-duo{flex:none;margin-top:2px;color:var(--or-clair)}

/* ---- Le atir devient une feuille montante sur téléphone ---- */
@media(max-width:640px){
  .atir-panneau{
    top:auto;left:0;right:0;bottom:0;width:100%;height:min(92vh,100%);
    border-radius:22px 22px 0 0;transform:translateY(100%);
  }
  .atir.ouvert .atir-panneau{transform:none}
  /* La poignée indique que la feuille se referme vers le bas */
  .atir-panneau::before{
    content:"";position:absolute;z-index:3;top:9px;left:50%;transform:translateX(-50%);
    width:44px;height:4px;border-radius:2px;background:rgba(255,255,255,.5);
  }
  .atir-tete{padding-top:clamp(96px,26vw,140px)}
  .atir-fermer{top:20px}
}
.atir-corps strong{color:var(--encre);font-weight:700}
.atir-corps p:first-child strong{color:var(--bordeaux)}

/* ---- La barre de progression du carrousel suit le défilement ---- */
.actus-prog i,.rail-prog i{transition:transform .2s var(--ease)}
/* Les flèches gardent leur tracé blanc : pas de seconde couleur ici */
.fleche .ic-duo>*,.fleche svg>*{stroke:currentColor;fill:none}

/* ---- L'ascenseur du rail est masqué : les flèches suffisent ---- */
.rail-piste{scrollbar-width:none;-ms-overflow-style:none}
.rail-piste::-webkit-scrollbar{width:0;height:0;display:none}
/* Les entrées du rail annoncent qu'elles s'ouvrent */
.lat-liste li[data-fiche]{cursor:pointer}
.lat-liste li[data-fiche]:focus-visible{outline:3px solid var(--bordeaux);outline-offset:2px}
.lat-liste li[data-fiche]::after{
  content:"";width:6px;height:6px;flex:none;align-self:center;justify-self:end;
  border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);
  transform:rotate(-45deg);opacity:0;margin-right:2px;
  transition:opacity var(--dur-xs) var(--ease),transform var(--dur-xs) var(--ease);
}
.lat-liste li[data-fiche]:hover::after{opacity:.75;transform:rotate(-45deg) translate(2px,2px)}
.lat-liste li{grid-template-columns:auto auto minmax(0,1fr) auto}
.lat-liste li:not(:has(b)){grid-template-columns:auto minmax(0,1fr) auto}

/* ============================================================
   RESPIRATION VERTICALE — les sections ne se touchent plus
   ============================================================ */
.sec{padding-top:clamp(48px,5vw,76px);padding-bottom:clamp(52px,5.5vw,84px)}
.sec + .sec{margin-top:clamp(8px,1.2vw,20px)}
.sec-head{margin-bottom:clamp(26px,3vw,40px)}
.sec-head-ligne{gap:clamp(20px,2.6vw,44px)}
.sec-head .sec-p{margin-top:12px}
/* La bande sombre garde son propre rythme, plus ample */
.sec.sec-sombre{margin-top:clamp(40px,5vw,72px);margin-bottom:clamp(40px,5vw,72px)}
@media(min-width:1281px){
  .sec.sec-sombre{margin-left:0;margin-right:0}
}
/* Le rail institutionnel est une bande : il respire par son padding */
.sec.rail-sec{padding-top:clamp(40px,4.4vw,64px);padding-bottom:clamp(40px,4.4vw,64px);
  margin-top:clamp(28px,3.4vw,48px)}
.compteurs{margin-top:clamp(20px,2.6vw,36px);margin-bottom:clamp(28px,3.4vw,48px)}
.partenaires{margin-top:clamp(20px,2.4vw,34px)}
.pied{margin-top:clamp(44px,5vw,78px)}
@media(max-width:640px){
  .sec{padding-top:40px;padding-bottom:44px}
  .sec.sec-sombre{margin-top:32px;margin-bottom:32px}
}

/* ============================================================
   RÉPERTOIRE PUBLIC DES PROGRAMMES
   ============================================================ */
.prog-barre{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:18px}
.prog-rech{
  display:inline-flex;align-items:center;gap:10px;flex:1 1 320px;max-width:520px;
  padding:0 16px;height:50px;border-radius:14px;
  background:var(--papier);border:1px solid var(--ligne-2);
  box-shadow:0 1px 2px rgba(10,37,87,.04);
  transition:border-color var(--dur-xs) var(--ease),box-shadow var(--dur-xs) var(--ease);
}
.prog-rech:focus-within{border-color:var(--bordeaux);box-shadow:0 0 0 4px rgba(30,79,184,.12)}
.prog-rech .ic-duo{flex:none;color:var(--gris-2)}
.prog-rech input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--encre);
  font:500 14.5px "Montserrat",sans-serif;outline:none;
}
.prog-rech input::placeholder{color:var(--gris-2)}
.prog-rech input::-webkit-search-cancel-button{cursor:pointer}

.prog-filtres{display:flex;flex-wrap:wrap;gap:8px}
.prog-f{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;
  border-radius:999px;cursor:pointer;background:var(--papier);color:var(--encre);
  border:1px solid var(--ligne-2);font:600 13px "Montserrat",sans-serif;
  transition:background var(--dur-xs) var(--ease),border-color var(--dur-xs) var(--ease),color var(--dur-xs) var(--ease);
}
.prog-f b{font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;
  background:var(--puce);color:var(--gris-3)}
.prog-f:hover{border-color:var(--bordeaux);color:var(--bordeaux)}
.prog-f.on{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff}
.prog-f.on b{background:rgba(255,255,255,.24);color:#fff}

.prog-compte{margin:0 0 16px;font:600 13px "Montserrat",sans-serif;color:var(--gris-2)}
.prog-vide{margin:20px 0 0;color:var(--gris-2);font-size:14.5px}

.prog-grille{
  display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.prog{
  display:flex;flex-direction:column;gap:11px;padding:20px 20px 18px;cursor:pointer;
  border-radius:18px;background:var(--papier);border:1px solid var(--ligne);
  box-shadow:0 1px 2px rgba(10,37,87,.04),0 18px 36px -26px rgba(10,37,87,.24);
  opacity:0;transform:translateY(16px);
  animation:prog-entre .5s var(--ease) var(--delai,0ms) forwards;
  transition:border-color var(--dur-xs) var(--ease),box-shadow var(--dur-s) var(--ease),transform var(--dur-xs) var(--ease);
}
@keyframes prog-entre{to{opacity:1;transform:none}}
.prog:hover{border-color:rgba(30,79,184,.45);transform:translateY(-3px);
  box-shadow:0 26px 50px -28px rgba(30,79,184,.38)}
.prog:focus-visible{outline:3px solid var(--bordeaux);outline-offset:3px}

.prog-haut{display:flex;align-items:center;justify-content:space-between;gap:10px}
.prog-code{font:800 11px "Montserrat",sans-serif;letter-spacing:.08em;color:var(--gris-2)}
.prog-statut{font:700 10.5px "Montserrat",sans-serif;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;white-space:nowrap}
.prog-statut.t-vert{background:rgba(27,156,110,.12);color:#12805A}
.prog-statut.t-or{background:rgba(239,176,52,.16);color:#9A6B06}
.prog-statut.t-bleu{background:rgba(30,79,184,.12);color:var(--bordeaux)}
.prog-statut.t-gris{background:var(--puce);color:var(--gris-2)}
[data-theme="dark"] .prog-statut.t-vert{color:#4ED6A5}
[data-theme="dark"] .prog-statut.t-or{color:var(--or-clair)}

.prog-t{margin:0;font-family:"Quicksand",sans-serif;font-weight:700;font-size:16.5px;
  line-height:1.3;letter-spacing:-.01em;color:var(--encre)}
.prog-tags{display:flex;flex-wrap:wrap;gap:6px}
.prog-tag{font:600 11.5px "Montserrat",sans-serif;padding:4px 10px;border-radius:8px;
  background:var(--puce);color:var(--gris-3)}
.prog-tag-or{background:rgba(239,176,52,.16);color:#9A6B06}
[data-theme="dark"] .prog-tag-or{color:var(--or-clair)}
.prog-pied{margin-top:auto;padding-top:11px;border-top:1px solid var(--ligne);
  display:flex;flex-wrap:wrap;gap:6px 16px;font:600 12px "Montserrat",sans-serif;color:var(--gris-2)}

/* La fiche programme dans le tiroir */
.atir-faits{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.atir-faits li{
  display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:12px;
  background:var(--puce);font-size:14px;color:var(--encre);
}
.atir-faits li::before{content:"";width:6px;height:6px;flex:none;border-radius:2px;
  background:var(--or);transform:rotate(45deg)}
.atir-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--ligne);
  font-size:13.5px;color:var(--gris-2)}
.atir-corps p.atir-note{border-left:0;padding-left:0;font-weight:400}

@media(prefers-reduced-motion:reduce){.prog{animation:none;opacity:1;transform:none}}

/* ============================================================
   RÉACTIONS, PARTAGE ET COMMENTAIRES
   ============================================================ */
.atir-social{padding:0 clamp(26px,4vw,38px) clamp(26px,3.4vw,36px);border-top:1px solid var(--ligne)}
.atir-social[hidden]{display:none}

.atir-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  padding:18px 0;border-bottom:1px solid var(--ligne)}
.atir-jaime{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 18px;
  border-radius:999px;cursor:pointer;background:var(--papier);color:var(--encre);
  border:1px solid var(--ligne-2);font:700 13.5px "Montserrat",sans-serif;
  transition:border-color var(--dur-xs) var(--ease),color var(--dur-xs) var(--ease),background var(--dur-xs) var(--ease);
}
.atir-coeur{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;
  transition:fill var(--dur-xs) var(--ease),stroke var(--dur-xs) var(--ease)}
.atir-jaime:hover{border-color:#D94C5E;color:#D94C5E}
.atir-jaime.on{background:rgba(217,76,94,.1);border-color:#D94C5E;color:#D94C5E}
.atir-jaime.on .atir-coeur{fill:#D94C5E;stroke:#D94C5E}
.atir-jaime.bat .atir-coeur{animation:coeur-bat .5s var(--ease-rebond)}
@keyframes coeur-bat{0%{transform:scale(1)}35%{transform:scale(1.4)}60%{transform:scale(.92)}100%{transform:scale(1)}}
.atir-coeur{transform-box:fill-box;transform-origin:50% 50%}
.atir-jaime:disabled{opacity:.6;cursor:default}

.atir-partage{display:flex;align-items:center;gap:8px;margin-left:auto}
.atir-lib-p{font:700 11px "Montserrat",sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris-2);margin-right:2px}
.atir-p{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:var(--papier);color:var(--gris-3);border:1px solid var(--ligne-2);
  text-decoration:none;
  transition:transform var(--dur-xs) var(--ease),border-color var(--dur-xs) var(--ease),color var(--dur-xs) var(--ease);
}
.atir-p:hover{transform:translateY(-2px);border-color:var(--bordeaux);color:var(--bordeaux)}
.atir-p[hidden]{display:none}

.atir-com-t{display:flex;align-items:center;gap:9px;margin:22px 0 14px;
  font-family:"Quicksand",sans-serif;font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--encre)}
.atir-com-t span{font:800 11.5px "Montserrat",sans-serif;padding:3px 9px;border-radius:999px;
  background:var(--puce);color:var(--gris-3)}
.atir-coms{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.atir-com{display:flex;gap:12px;padding:14px 16px;border-radius:16px;
  background:var(--puce);animation:com-entre .4s var(--ease) both}
@keyframes com-entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.atir-com-av{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(150deg,var(--bordeaux),var(--marine));color:#fff;
  font:800 13px "Montserrat",sans-serif;letter-spacing:.02em;
}
.atir-com-bloc{display:grid;gap:5px;min-width:0}
.atir-com-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13px}
.atir-com-tete b{font-weight:700;color:var(--encre)}
.atir-com-st{color:var(--gris-2)}
.atir-com-tete time{margin-left:auto;color:var(--gris-2);font-size:12px}
.atir-com-tx{font-size:14px;line-height:1.6;color:var(--gris-3);white-space:pre-wrap;word-break:break-word}
.atir-com-vide{margin:0;padding:18px 16px;border-radius:14px;border:1px dashed var(--ligne-2);
  color:var(--gris-2);font-size:14px;text-align:center}
.atir-com-vide[hidden]{display:none}

.atir-form{margin-top:18px;display:grid;gap:12px}
.atir-champs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.atir-ch{display:grid;gap:6px;min-width:0}
.atir-ch>span{font:700 11px "Montserrat",sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris-2)}
.atir-ch>span i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500}
.atir-ch input,.atir-ch textarea{
  width:100%;padding:12px 14px;border-radius:12px;background:var(--papier);color:var(--encre);
  border:1px solid var(--ligne-2);font:500 14px "Montserrat",sans-serif;outline:none;resize:vertical;
  transition:border-color var(--dur-xs) var(--ease),box-shadow var(--dur-xs) var(--ease);
}
.atir-ch input:focus,.atir-ch textarea:focus{border-color:var(--bordeaux);
  box-shadow:0 0 0 4px rgba(30,79,184,.12)}
.atir-form-bas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.atir-moderation{margin:0;flex:1 1 200px;font-size:12.5px;color:var(--gris-2)}
.atir-envoyer{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 20px;
  border-radius:999px;border:0;cursor:pointer;background:var(--bordeaux);color:#fff;
  font:700 13.5px "Montserrat",sans-serif;
  box-shadow:0 10px 22px -10px rgba(30,79,184,.65);
  transition:transform var(--dur-s) var(--ease-rebond),background var(--dur-xs) var(--ease);
}
.atir-envoyer:hover{transform:translateY(-1px) scale(1.03)}
.atir-envoyer:disabled{opacity:.6;cursor:default;transform:none}
.atir-envoyer .ic-duo>*{stroke:currentColor}
.atir-retour{margin:0;padding:11px 15px;border-radius:12px;font-size:13.5px;
  background:rgba(27,156,110,.12);color:#12805A}
.atir-retour.ko{background:rgba(217,76,94,.12);color:#B13347}
.atir-retour[hidden]{display:none}

@media(max-width:560px){
  .atir-partage{margin-left:0;width:100%;justify-content:space-between}
  .atir-jaime{width:100%;justify-content:center}
  .atir-com-tete time{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .atir-com,.atir-jaime.bat .atir-coeur{animation:none}
}

/* ---- Ajustements téléphone ---- */
@media(max-width:560px){
  .prog-grille{grid-template-columns:minmax(0,1fr)}
  .prog-barre{gap:10px}
  .prog-filtres{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .prog-filtres::-webkit-scrollbar{display:none}
  .prog-f{white-space:nowrap}
  .sec-head-ligne{grid-template-columns:minmax(0,1fr)}
  .atir-tete{padding-top:clamp(88px,24vw,120px)}
  .atir-titre{font-size:22px}
  .rail-ctrl{gap:12px}
}

/* ============================================================
   RÉPERTOIRE — bandeau chiffré et cartes par secteur
   ============================================================ */
.prog-bandeau{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(14px,2vw,28px);margin-bottom:clamp(20px,2.6vw,30px);
  padding:clamp(22px,2.8vw,32px) clamp(20px,2.6vw,34px);border-radius:22px;color:#fff;
  background:
    radial-gradient(120% 110% at 88% 0%,rgba(40,151,232,.34),transparent 58%),
    linear-gradient(150deg,#15193A 0%,#071D46 56%,#12326F 100%);
  box-shadow:0 30px 60px -34px rgba(7,29,70,.65);
}
/* Trame discrète, animée en continu */
.prog-bandeau::before{
  content:"";position:absolute;z-index:-1;inset:-40% -10%;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px);
  background-size:22px 22px;opacity:.5;
  animation:pb-derive 34s linear infinite;
}
@keyframes pb-derive{to{transform:translate(22px,22px)}}
.prog-bandeau::after{
  content:"";position:absolute;z-index:-1;right:-60px;bottom:-90px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(239,176,52,.28),transparent 68%);
}
.pb-item{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:12px;row-gap:2px;align-items:center}
.pb-ic{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff}
.pb-ic .ic-duo>*+*{stroke:var(--or-clair)}
.pb-ic .ic-duo>:first-child:not(:only-child),
.pb-ic .ic-plein>:only-child{fill:rgba(239,176,52,.24)}
.pb-item b{font-family:"Quicksand",sans-serif;font-weight:700;font-size:clamp(22px,2.6vw,30px);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pb-item>span:last-child{font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.7)}

/* --- Filtres avec l'icône de leur secteur --- */
.prog-f{--sect:var(--bordeaux)}
.prog-f .ic-duo{flex:none;color:var(--sect)}
.prog-f.on{background:var(--sect);border-color:var(--sect)}
.prog-f.on .ic-duo{color:#fff}
.prog-f.on .ic-duo>*+*{stroke:rgba(255,255,255,.8)}
.prog-f:hover{border-color:var(--sect);color:var(--sect)}

/* --- Cartes : accent, plaque d'icône, jauge d'implantation --- */
.prog{position:relative;overflow:hidden;--sect:var(--bordeaux)}
.prog-accent{position:absolute;left:0;right:0;top:0;height:3px;background:var(--sect);
  transform:scaleX(.18);transform-origin:left;
  transition:transform .4s var(--ease)}
.prog:hover .prog-accent,.prog:focus-visible .prog-accent{transform:scaleX(1)}
.prog:hover{border-color:color-mix(in srgb,var(--sect) 45%,transparent)}

.prog-haut{display:flex;align-items:center;gap:11px}
.prog-ic{
  width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:13px;
  color:var(--sect);background:color-mix(in srgb,var(--sect) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--sect) 22%,transparent);
  transition:transform var(--dur-s) var(--ease-rebond),background var(--dur-xs) var(--ease);
}
.prog:hover .prog-ic{transform:scale(1.08) rotate(-4deg);
  background:color-mix(in srgb,var(--sect) 18%,transparent)}
.prog-ic .ic-duo>*+*{stroke:var(--or)}
.prog-ic .ic-duo>:first-child:not(:only-child){fill:color-mix(in srgb,var(--sect) 14%,transparent)}
.prog-haut-tx{display:grid;gap:2px;min-width:0;flex:1}
.prog-sect{font-size:11.5px;color:var(--gris-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog-niv{background:color-mix(in srgb,var(--sect) 13%,transparent);
  color:var(--sect);font-weight:700}

.prog-pied{align-items:center;gap:10px}
.prog-etab b{font-family:"Quicksand",sans-serif;font-weight:700;font-size:15px;color:var(--encre)}
.prog-jauge{flex:1;min-width:34px;height:4px;border-radius:2px;background:var(--puce);overflow:hidden}
.prog-jauge i{display:block;height:100%;border-radius:2px;background:var(--sect);
  transform:scaleX(var(--part,0));transform-origin:left;
  transition:transform .7s var(--ease) .2s}
.prog-ouvrir{display:inline-flex;align-items:center;gap:4px;color:var(--sect);
  font-weight:700;white-space:nowrap;opacity:0;transform:translateX(-6px);
  transition:opacity var(--dur-xs) var(--ease),transform var(--dur-xs) var(--ease)}
.prog:hover .prog-ouvrir,.prog:focus-visible .prog-ouvrir{opacity:1;transform:none}
@media(max-width:560px){.prog-ouvrir{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .prog-bandeau::before{animation:none}
  .prog-jauge i{transition:none}
}

/* ---- Plus d'air sous l'en-tête des sections ---- */
.sec-head{margin-bottom:clamp(32px,3.8vw,52px)}
.sec-head-ligne{margin-bottom:clamp(34px,4vw,56px)}
.sec-head .souligne{margin-top:14px}
#actualites .sec-head-ligne{align-items:end}

/* Deux règles anciennes remettaient la marge basse à zéro par raccourci `margin`. */
.actus-sec>.sec-head,#actualites .sec-head{margin-bottom:clamp(34px,4vw,56px)}
.rail-sec>.sec-head{margin-bottom:clamp(30px,3.4vw,44px)}

/* ============================================================
   RÉPERTOIRE — parti pris sobre : palette institutionnelle seule,
   icônes sans plaque de fond
   ============================================================ */
/* Les teintes par secteur cèdent la place à l'encre et à l'or. */
.prog,.prog-f{--sect:var(--bordeaux)}
.prog-ic{
  width:auto;height:auto;background:none;border:0;border-radius:0;
  color:var(--marine);
}
.prog:hover .prog-ic{transform:none;background:none}
.prog-ic .ic-duo>:first-child:not(:only-child),
.prog-ic .ic-plein>:only-child{fill:none}
.prog-ic .ic-duo>*+*{stroke:var(--or)}
.prog-haut{gap:12px}

.prog-accent{background:var(--ligne-2)}
.prog:hover .prog-accent,.prog:focus-visible .prog-accent{background:var(--bordeaux)}
.prog:hover{border-color:var(--ligne-3)}
.prog-niv{background:var(--puce);color:var(--gris-3);font-weight:700}
.prog-jauge i{background:var(--ligne-3)}
.prog:hover .prog-jauge i{background:var(--bordeaux)}
.prog-ouvrir{color:var(--bordeaux)}

/* Statuts : une seule couleur signifiante, le reste en gris */
.prog-statut{background:var(--puce);color:var(--gris-2)}
.prog-statut.t-vert{background:rgba(27,156,110,.12);color:#12805A}
.prog-statut.t-or,.prog-statut.t-bleu,.prog-statut.t-gris{background:var(--puce);color:var(--gris-2)}
[data-theme="dark"] .prog-statut.t-vert{color:#4ED6A5}

/* Filtres : sans aplat de couleur par secteur */
.prog-f .ic-duo{color:var(--gris-2)}
.prog-f .ic-duo>*+*{stroke:var(--gris-2)}
.prog-f:hover{border-color:var(--bordeaux);color:var(--bordeaux)}
.prog-f:hover .ic-duo,.prog-f:hover .ic-duo>*+*{color:var(--bordeaux);stroke:var(--bordeaux)}
.prog-f.on{background:var(--marine);border-color:var(--marine);color:#fff}
.prog-f.on .ic-duo{color:#fff}
.prog-f.on .ic-duo>*+*{stroke:var(--or-clair)}

/* Le bandeau chiffré : plaques d'icônes retirées elles aussi */
.pb-ic{width:auto;height:auto;background:none;border:0;border-radius:0;color:var(--or-clair)}
.pb-ic .ic-duo>*+*{stroke:#fff}
.pb-ic .ic-duo>:first-child:not(:only-child),
.pb-ic .ic-plein>:only-child{fill:none}
.prog-bandeau::after{display:none}

/* ---- Statut réduit à une pastille : vert en vigueur, bleu en cours ---- */
/* Le libellé reste dans le balisage pour les lecteurs d'écran et en infobulle. */
.lu-seul{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.prog-statut{
  width:10px;height:10px;flex:none;padding:0;border-radius:50%;
  background:var(--bordeaux);position:relative;align-self:center;
}
.prog-statut.t-vert{background:var(--vert)}
.prog-statut.t-or,.prog-statut.t-bleu,.prog-statut.t-gris{background:var(--bordeaux)}
/* Un halo discret, qui bat doucement pour l'état « en vigueur » */
.prog-statut::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid currentColor;color:inherit;opacity:.28;
}
.prog-statut.t-vert::after{color:var(--vert)}
.prog-statut.t-vert{animation:statut-bat 2.8s var(--ease) infinite}
@keyframes statut-bat{0%,100%{box-shadow:0 0 0 0 rgba(27,156,110,.45)}
  70%{box-shadow:0 0 0 7px rgba(27,156,110,0)}}
@media(prefers-reduced-motion:reduce){.prog-statut.t-vert{animation:none}}

/* ---- Film de rubrique en tête du tiroir ---- */
.atir-scene{opacity:1}
.atir-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Le texte doit rester lisible par-dessus l'image */
.atir-scene::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,29,70,.55) 0,rgba(7,29,70,.7) 45%,rgba(7,29,70,.92) 100%);
}
.atir-scene .actu-scene{opacity:.5}
@media(prefers-reduced-motion:reduce){.atir-film{display:none}}

/* ---- Le répertoire est centré, comme la FAQ et les missions ---- */
#programmes.sec{max-width:var(--large);margin-left:auto;margin-right:auto;
  padding-left:var(--gouttiere);padding-right:var(--gouttiere)}
@media(min-width:1281px){
  #programmes.sec{margin-left:auto;margin-right:auto;
    padding-left:var(--gouttiere);padding-right:var(--gouttiere)}
}
#programmes .sec-head{text-align:center;display:grid;justify-items:center}
#programmes .sec-head .eyebrow{justify-content:center}
#programmes .sec-head .souligne{transform-origin:center}
#programmes .sec-head .sec-p{max-width:62ch}
.prog-barre{justify-content:center}
.prog-filtres{justify-content:center}
.prog-compte{text-align:center}

/* ---- L'étiquette APC sans aplat jaune : un simple filet ---- */
.prog-tag-or{background:transparent;color:var(--gris-3);
  box-shadow:inset 0 0 0 1px var(--ligne-2)}
[data-theme="dark"] .prog-tag-or{color:var(--gris-3);
  box-shadow:inset 0 0 0 1px var(--ligne-2)}
.prog:hover .prog-tag-or{color:var(--bordeaux);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bordeaux) 40%,transparent)}

/* ---- La marque animée, centrée dans l'en-tête du tiroir ---- */
.atir-marque{
  position:absolute;z-index:1;top:clamp(26px,5vw,46px);left:50%;transform:translateX(-50%);
  width:min(58%,300px);height:auto;display:block;border-radius:12px;
  background:#fff;box-shadow:0 18px 40px -22px rgba(0,0,0,.6);
  animation:atir-marque-entre .8s .12s var(--ease) both;
  pointer-events:none;
}
@keyframes atir-marque-entre{
  from{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.94)}
  to{opacity:1;transform:translateX(-50%)}
}
/* Le titre descend pour laisser la place à la marque */
.atir-tete{padding-top:clamp(190px,26vw,260px)}
@media(max-width:560px){
  .atir-marque{width:min(66%,240px);top:26px}
  .atir-tete{padding-top:clamp(150px,44vw,200px)}
}
@media(prefers-reduced-motion:reduce){.atir-marque{animation:none}}

/* ---- La marque est détourée : plus de rectangle blanc ---- */
.atir-marque{background:transparent;box-shadow:none;border-radius:0}
.atir-marque[hidden]{display:none}
/* Un halo doux, pas un cartouche, pour que l'encre du logo reste lisible
   par-dessus le film sombre de la rubrique. */
.atir-marque{filter:drop-shadow(0 0 22px rgba(255,255,255,.85))
                    drop-shadow(0 0 46px rgba(255,255,255,.55))}
/* Sans la marque, l'en-tête reprend sa hauteur normale */
.atir-tete{padding-top:clamp(120px,16vw,170px)}
.atir-tete:not(.clair):has(.atir-marque:not([hidden])){padding-top:clamp(190px,26vw,260px)}
@media(max-width:560px){
  .atir-tete{padding-top:clamp(88px,24vw,120px)}
  .atir-tete:not(.clair):has(.atir-marque:not([hidden])){padding-top:clamp(150px,44vw,200px)}
}

/* ---- Le voile : un dégradé propre, de l'or au blanc ---- */
.atir-voile{
  background:linear-gradient(125deg,
    rgba(239,176,52,.26) 0,
    rgba(250,238,214,.72) 34%,
    rgba(255,255,255,.88) 72%,
    rgba(255,255,255,.94) 100%);
  backdrop-filter:saturate(1.05);
  -webkit-backdrop-filter:saturate(1.05);
}
/* En thème sombre le même dégradé, tenu côté encre pour rester lisible */
[data-theme="dark"] .atir-voile{
  background:linear-gradient(125deg,
    rgba(239,176,52,.18) 0,
    rgba(21,25,58,.78) 36%,
    rgba(7,20,45,.9) 100%);
}

/* ============================================================
   EN-TÊTE CLAIR — réservé à l'annonce du lancement
   ============================================================ */
.atir-tete.clair{
  color:var(--encre);
  background:
    radial-gradient(90% 80% at 50% 0%,rgba(30,79,184,.07),transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%,#F7FAFF 62%,var(--sable) 100%);
  border-bottom:1px solid var(--ligne);
  padding-top:clamp(30px,4vw,44px);
  padding-bottom:clamp(24px,3vw,34px);
  display:grid;justify-items:center;text-align:center;
}
.atir-tete.clair .atir-scene{display:none}
/* La marque devient le sujet : grande, centrée, sans halo blanc inutile */
.atir-tete.clair .atir-marque{
  position:static;transform:none;width:min(84%,440px);margin:0 auto clamp(14px,2vw,22px);
  filter:none;animation:atir-marque-clair .9s var(--ease) both;
}
@keyframes atir-marque-clair{
  from{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:none}
}
.atir-tete.clair .atir-tete-tx{display:grid;justify-items:center}
.atir-tete.clair .atir-titre{color:var(--encre)}
.atir-tete.clair .atir-meta{color:var(--gris-2);justify-content:center}
.atir-tete.clair .atir-fermer{
  border-color:var(--ligne-2);background:var(--papier);color:var(--encre);
}
.atir-tete.clair .atir-fermer:hover{background:var(--sable);border-color:var(--bordeaux);color:var(--bordeaux)}
/* Un trait d'or discret sépare l'en-tête du corps */
.atir-tete.clair::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--or) 22%,var(--or) 78%,transparent);
}
[data-theme="dark"] .atir-tete.clair{
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F7FD 100%);color:#0A2557;
}
[data-theme="dark"] .atir-tete.clair .atir-titre{color:#0A2557}
[data-theme="dark"] .atir-tete.clair .atir-meta{color:#5A6480}
@media(prefers-reduced-motion:reduce){.atir-tete.clair .atir-marque{animation:none}}

/* ---- L'en-tête clair doit rester compact : le corps de l'article prime ---- */
.atir-tete.clair{
  padding-top:clamp(22px,2.6vw,32px);
  padding-bottom:clamp(18px,2.2vw,26px);
}
.atir-tete.clair .atir-marque{
  width:min(62%,300px);margin-bottom:clamp(10px,1.4vw,16px);
}
.atir-tete.clair .atir-titre{font-size:clamp(20px,2.4vw,27px);margin:8px 0 8px}
@media(max-width:560px){.atir-tete.clair .atir-marque{width:min(70%,230px)}}

/* ============================================================
   ÉCRAN DE DÉMARRAGE — le logo seul, centré, sur fond blanc
   ============================================================ */
.demar{
  background:#fff;color:var(--encre);
  display:grid;place-items:center;place-content:center;gap:0;padding:clamp(20px,5vw,60px);
}
.demar-film{
  width:min(72vw,620px);height:auto;display:block;
  background:transparent;border-radius:0;box-shadow:none;
  animation:demar-film .8s var(--ease) both;
}
.demar-passer{
  border:1px solid var(--ligne-2);background:#fff;color:var(--gris-2);
  box-shadow:0 2px 10px rgba(10,37,87,.06);
}
.demar-passer:hover{background:var(--sable);border-color:var(--bordeaux);color:var(--bordeaux)}
@media(max-width:560px){.demar-film{width:82vw}}

/* ---- En-tête du tiroir : hauteur resserrée ---- */
.atir-tete{padding-top:clamp(92px,12vw,130px);padding-bottom:clamp(20px,2.4vw,28px)}
.atir-tete:not(.clair):has(.atir-marque:not([hidden])){padding-top:clamp(150px,20vw,200px)}
.atir-titre{font-size:clamp(21px,2.7vw,29px);margin:12px 0 8px}
@media(max-width:560px){
  .atir-tete{padding-top:clamp(74px,20vw,100px)}
}
/* Le pied du tiroir n'existe plus : le corps descend jusqu'en bas */
.atir-corps{padding-bottom:clamp(24px,3vw,34px)}
.atir-social{padding-bottom:clamp(30px,3.6vw,42px)}

/* ============================================================
   RÉPERTOIRE EN MOBILE — cartes tenables sur un écran étroit
   ============================================================ */
@media(max-width:640px){
  /* Une carte de la bande ne doit jamais dépasser l'écran :
     on la borne et on coupe le titre proprement. */

  /* Le bandeau chiffré : deux colonnes plutôt qu'une longue pile */
  .prog-bandeau{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;
    padding:20px 16px;border-radius:18px}
  .pb-item{grid-template-columns:auto 1fr;column-gap:9px}
  .pb-item b{font-size:21px}
  .pb-item>span:last-child{font-size:11px;line-height:1.3}

  /* Les fiches : un peu plus compactes */
  .prog{padding:16px 16px 14px;gap:9px}
  .prog-t{font-size:15.5px}
  .prog-sect{font-size:11px}
}


/* ---- Les faits d'un programme : deux colonnes, y compris sur téléphone ---- */
.atir-faits li{font-size:13.5px;padding:10px 13px;gap:8px;min-width:0}
.atir-faits li{overflow-wrap:anywhere}
@media(max-width:560px){
  .atir-faits{gap:7px}
  .atir-faits li{font-size:12.5px;padding:9px 11px}
}

/* ---- Le logo animé du rail, réduit sur téléphone ----
   La règle historique ne visait que `img` : la vidéo restait en absolu
   et remplissait tout le panneau. */
@media(max-width:640px){
  .min-photo.min-photo-logo{
    position:relative;aspect-ratio:auto;height:clamp(150px,34vw,190px);min-height:0;
  }
  .min-photo-logo .min-photo-video,
  .min-photo-logo .min-photo-img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:contain;padding:clamp(14px,4vw,22px);
  }
}
@media(max-width:400px){
  .min-photo.min-photo-logo{height:132px}
}

/* Filet de sécurité : si l'observateur ne s'exécute pas (script différé, erreur,
   navigateur ancien), rien ne doit rester invisible. */
@media(scripting:none){
  [data-reveal],[data-anim]{opacity:1!important;transform:none!important}
}

/* ---- Menu mobile ouvert : la page dessous ne défile plus ---- */
html.menu-actif{overflow:hidden}

/* ---- En mobile, le film APC touche les bords de l'écran ---- */
@media(max-width:1179px){
  .gem-corps{
    /* On annule la marge latérale de la bande GEM pour ce bloc seulement. */
    margin-left:calc(-1 * var(--marge-x));
    margin-right:calc(-1 * var(--marge-x));
    width:auto;border-radius:0;padding:clamp(16px,4vw,24px) var(--marge-x);
  }
}

/* ---- Icônes des liens du pied de page ---- */
.pied-col a{display:inline-flex;align-items:center;gap:9px}
.pied-col a .ic-duo{flex:none;opacity:.7;transition:opacity var(--dur-xs) var(--ease)}
.pied-col a:hover .ic-duo{opacity:1}
.pied-col a .ic-duo>*+*{stroke:var(--or)}

/* ---- La copie de la marque dans le menu mobile : sans cadre ---- */
@media(max-width:1024px){
  .nav.ouvert .nav-liens-marque,
  .nav-liens.ouvert .nav-liens-marque{
    background:transparent;border-radius:0;box-shadow:none;
    width:min(64%,200px);margin:6px auto 22px;
  }
}

/* ---- Bandeau chiffré : deux colonnes jusqu'au plus petit écran ---- */
@media(max-width:400px){
  .prog-bandeau{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;padding:18px 14px}
  .pb-item b{font-size:19px}
  .pb-item>span:last-child{font-size:10.5px}
  .pb-ic svg{width:17px;height:17px}
}

/* ---- Pied de page : le bloc de marque centré sur téléphone ---- */
@media(max-width:760px){
  .pied-brand{display:grid;justify-items:center;text-align:center}
  .pied-logo{justify-content:center}
  .pied-contact{justify-content:center}
  .pied-col{justify-items:center;text-align:center}
  .pied-col a,.pied-col span{justify-content:center}
  .pied-bas{text-align:center}
}

/* ---- Le film APC termine la bande GEM : aucune marge sous lui ---- */
@media(max-width:1179px){
  .sec.sec-sombre{padding-bottom:0}
  .gem-corps{padding-bottom:0;margin-bottom:0}
}

/* ---- Les chiffres du répertoire, plus affirmés ---- */
.pb-item b{
  font-size:clamp(30px,4.4vw,46px);line-height:.95;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.pb-item>span:last-child{font-size:12.5px;line-height:1.35;margin-top:4px}
.prog-bandeau{gap:clamp(18px,2.6vw,34px)}
@media(max-width:640px){
  .pb-item b{font-size:clamp(26px,7.4vw,34px)}
  .pb-item>span:last-child{font-size:11px}
}
@media(max-width:400px){.pb-item b{font-size:25px}}

/* ---- Pied de page en mobile : deux colonnes de liens, bas centré ---- */
@media(max-width:760px){
  .pied-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  /* Le bloc de marque occupe toute la largeur, les colonnes de liens se partagent le reste. */
  .pied-brand{grid-column:1 / -1}
  .pied-col{justify-items:start;text-align:left}
  .pied-col a,.pied-col span{justify-content:flex-start}
  .pied-col a{font-size:13.5px}
  .pied-bas{flex-direction:column;align-items:center;text-align:center;gap:8px}
  .pied-bas>span{width:100%}
}
@media(max-width:400px){
  .pied-grille{gap:22px 12px}
  .pied-col a{font-size:12.5px;gap:7px}
  .pied-col a .ic-duo{width:14px;height:14px}
}

/* ============================================================
   LE FILM APC SORT DU CADRE BLEU
   Le haut du plan déborde au-dessus de la bande sombre et se
   dissout : la silhouette semble s'en extraire.
   ============================================================ */
@media(min-width:1180px){
  /* La bande ne doit plus rogner ce qui dépasse. */
  .sec.sec-sombre{overflow:visible}
  .apc-film{
    top:clamp(-96px,-6vw,-56px);
    /* Deux masques combinés : le fondu vers la gauche, et le fondu du haut
       qui fait « émerger » le sujet hors du rectangle. */
    -webkit-mask-image:
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 14%,rgba(0,0,0,.72) 30%,#000 46%),
      linear-gradient(180deg,transparent 0,rgba(0,0,0,.22) 4%,rgba(0,0,0,.7) 9%,#000 16%);
    mask-image:
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 14%,rgba(0,0,0,.72) 30%,#000 46%),
      linear-gradient(180deg,transparent 0,rgba(0,0,0,.22) 4%,rgba(0,0,0,.7) 9%,#000 16%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
  /* Le voile ne doit pas assombrir la partie qui dépasse. */
  .apc-film::after{
    background:
      linear-gradient(90deg,#071D46 0,rgba(7,29,70,.88) 15%,rgba(7,29,70,.45) 31%,rgba(7,29,70,.08) 47%,transparent 62%),
      linear-gradient(180deg,transparent 0,transparent 12%,rgba(7,29,70,.18) 22%,transparent 46%,transparent 62%,rgba(7,29,70,.82) 100%);
  }
  /* Le film monte doucement à l'apparition de la section. */
  .apc-film{transform:translateY(22px);opacity:0;
    transition:transform 1s var(--ease) .1s,opacity .8s var(--ease) .1s}
  .sec-sombre.vu .apc-film{transform:none;opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .apc-film{transform:none!important;opacity:1!important;transition:none}
}

/* ============================================================
   LES CINQ MISSIONS EN FRISE
   --avancement (0 → 1) est posé par le script au défilement.
   ============================================================ */
.frise{
  --avancement:0;
  position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px);padding-top:82px;max-width:var(--large);margin-inline:auto;
}

/* --- Le fil et sa comète --- */
.frise-fil{
  position:absolute;top:39px;left:10%;right:10%;height:2px;
  background:var(--ligne-2);border-radius:2px;
}
.frise-fil i{
  position:absolute;inset:0;border-radius:2px;transform-origin:left;
  transform:scaleX(var(--avancement));
  background:linear-gradient(90deg,var(--marine),var(--bordeaux) 55%,var(--or));
}
.frise-comete{
  position:absolute;top:50%;left:calc(var(--avancement) * 100%);
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--or);opacity:calc(var(--avancement) * 1.6);
  box-shadow:0 0 0 5px rgba(239,176,52,.22),0 0 18px 4px rgba(239,176,52,.5);
}

/* --- Les étapes --- */
.frise-etape{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0;background:none;border:0;box-shadow:none;
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.frise-etape.atteint{opacity:1;transform:none}

/* Le chiffre fantôme, en filigrane derrière l'étape */
.frise-fantome{
  position:absolute;top:34px;left:50%;transform:translateX(-50%);
  font-family:"Quicksand",sans-serif;font-weight:700;font-size:112px;line-height:1;
  color:var(--encre);opacity:.05;pointer-events:none;user-select:none;z-index:0;
  transition:opacity .5s var(--ease);
}
.frise-etape.atteint .frise-fantome{opacity:.07}
[data-theme="dark"] .frise-fantome{color:#fff;opacity:.05}

/* Le jalon posé sur le fil */
.frise-jalon{
  position:absolute;top:-82px;left:50%;z-index:2;
  transform:translateX(-50%) scale(.45);
  width:64px;height:64px;display:grid;place-items:center;border-radius:50%;
  background:var(--papier);border:2px solid var(--ligne-2);color:var(--gris-2);
  transition:transform .55s var(--ease-rebond),border-color .45s var(--ease),
             background .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease);
}
.frise-etape.atteint .frise-jalon{
  transform:translateX(-50%) scale(1);
  border-color:var(--bordeaux);color:var(--marine);
  box-shadow:0 12px 28px -14px rgba(30,79,184,.55);
}
.frise-ic{display:grid;place-items:center;position:relative;z-index:1}
.frise-ic .ic-duo>*+*{stroke:var(--or)}

/* L'onde qui part du jalon au moment où il s'allume */
.frise-halo{
  position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--bordeaux);
  opacity:0;pointer-events:none;
}
.frise-etape.atteint .frise-halo{animation:frise-onde 1.1s var(--ease) both}
@keyframes frise-onde{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.85)}}

/* La carte de texte */
.frise-carte{
  position:relative;z-index:1;display:grid;gap:7px;justify-items:center;
  padding:18px 16px 20px;border-radius:18px;
  background:var(--papier);border:1px solid var(--ligne);
  box-shadow:0 1px 2px rgba(10,37,87,.04),0 18px 38px -28px rgba(10,37,87,.26);
  transition:transform var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease),
             border-color var(--dur-xs) var(--ease);
}
.frise-etape:hover .frise-carte{
  transform:translateY(-4px);border-color:rgba(30,79,184,.4);
  box-shadow:0 26px 48px -26px rgba(30,79,184,.36);
}
.frise-etape:hover .frise-jalon{background:var(--bordeaux);color:#fff;border-color:var(--bordeaux)}
.frise-etape:hover .frise-ic .ic-duo>*+*{stroke:var(--or-clair)}

.frise .mission-n{
  position:static;opacity:1;font:800 10.5px "Montserrat",sans-serif;
  letter-spacing:.18em;color:var(--bordeaux);
}
.frise h3{
  margin:0;font-family:"Quicksand",sans-serif;font-weight:700;
  font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.25;letter-spacing:-.01em;color:var(--encre);
}
.frise p{margin:0;font-size:12.5px;line-height:1.55;color:var(--gris-3);max-width:26ch}

/* Tablette : trois colonnes, le fil n'a plus de sens horizontalement */
@media(max-width:1100px) and (min-width:761px){
  .frise{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:96px}
  .frise-fil{display:none}
  .frise-etape{opacity:1;transform:none}
  .frise-jalon{transform:translateX(-50%) scale(1)}
}

/* Téléphone : la frise passe à la verticale */
@media(max-width:760px){
  .frise{grid-template-columns:minmax(0,1fr);padding-top:0;padding-left:64px;gap:22px}
  .frise-fil{top:18px;bottom:18px;left:31px;right:auto;width:2px;height:auto}
  .frise-fil i{transform:scaleY(var(--avancement));transform-origin:top;
    background:linear-gradient(180deg,var(--marine),var(--bordeaux) 55%,var(--or))}
  .frise-comete{top:calc(var(--avancement) * 100%);left:50%}
  .frise-etape{align-items:stretch;text-align:left}
  .frise-fantome{display:none}
  .frise-jalon{top:2px;left:-64px;transform:scale(.45);width:50px;height:50px}
  .frise-etape.atteint .frise-jalon{transform:scale(1)}
  .frise-carte{justify-items:start;padding:15px 16px 17px}
  .frise p{max-width:none;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .frise-etape,.frise-jalon,.frise-carte,.frise-fil i{transition:none}
  .frise-etape{opacity:1;transform:none}
  .frise-halo{animation:none}
}

/* ============================================================
   LE CADRE BLEU S'EFFACE SOUS LE FILM
   La bande reste sombre derrière le texte, puis se dissout vers
   la droite : le plan n'est plus posé dans un rectangle bleu.
   ============================================================ */
@media(min-width:1180px){
  .sec.sec-sombre{
    background:
      radial-gradient(90% 120% at 12% 0%,rgba(40,151,232,.26),transparent 58%),
      linear-gradient(90deg,
        #15193A 0%,
        #071D46 34%,
        rgba(7,29,70,.92) 48%,
        rgba(7,29,70,.55) 60%,
        rgba(7,29,70,.16) 70%,
        rgba(7,29,70,0) 78%);
  }
  /* Le voile du film s'allège d'autant : plus de teinte bleue sur le sujet. */
  .apc-film::after{
    background:
      linear-gradient(90deg,
        rgba(7,29,70,.92) 0,
        rgba(7,29,70,.7) 14%,
        rgba(7,29,70,.34) 30%,
        rgba(7,29,70,.06) 46%,
        transparent 60%),
      linear-gradient(180deg,transparent 0,transparent 14%,transparent 58%,rgba(7,29,70,.7) 100%);
  }
  /* La légende garde son propre fond localisé, pour rester lisible. */
  .apc-film-legende{
    background:linear-gradient(180deg,transparent,rgba(7,29,70,.86) 42%);
    padding-top:clamp(40px,5vw,64px);
  }
}
/* En thème clair, la page derrière le film est claire : le fondu s'y adapte. */
@media(min-width:1180px){
  .sec.sec-sombre::before{
    content:"";position:absolute;z-index:-1;inset:0;
    background:linear-gradient(90deg,transparent 0,transparent 62%,var(--papier) 88%);
    opacity:.0;
  }
}

/* ---- Tablette et téléphone : on allège le voile pour que les personnes
   restent visibles derrière les cellules, qui portent déjà leur propre fond ---- */
@media(max-width:1179px){
  .apc-film::after{
    background:
      linear-gradient(180deg,
        rgba(7,29,70,.58) 0,
        rgba(7,29,70,.34) 26%,
        rgba(7,29,70,.34) 64%,
        rgba(7,29,70,.72) 100%);
  }
  .gem-carte{background:rgba(7,29,70,.46);backdrop-filter:blur(10px) saturate(1.1);
    -webkit-backdrop-filter:blur(10px) saturate(1.1)}
}
/* Entre 761 et 1179 px, le film reste un fond : on lui donne de la hauteur
   pour que la scène se lise, et les cellules passent sur trois colonnes. */
@media(min-width:761px) and (max-width:1179px){
  .gem-corps{min-height:clamp(420px,52vw,560px)}
  .gem-corps>.grille-gem{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- La barre de progression bleue sous la bannière est retirée.
   L'élément reste en place pour le script qui l'anime. ---- */
.ban-progres{display:none}

/* ---- Moins de recadrage sur le film : le cadre se rapproche du 9:16 ---- */
@media(min-width:1180px){
  .apc-film{width:min(39%,720px)}
  .apc-film-video,.apc-video,.apc-poster{object-position:center 38%}
  .gem-corps{grid-template-columns:minmax(0,min(62%,var(--large)))}
}
@media(max-width:1179px){
  /* En fond de bloc, on remonte le cadrage sur les visages. */
  .apc-video,.apc-poster,.apc-film-video{object-position:center 32%}
}

/* ---- Frise : cartes sans ombre portée ---- */
.frise-carte{box-shadow:none}
.frise-etape:hover .frise-carte{box-shadow:none;border-color:rgba(30,79,184,.45)}
.frise-jalon{box-shadow:none}
.frise-etape.atteint .frise-jalon{box-shadow:none}
.frise-etape:hover .frise-jalon{box-shadow:none}

/* ============================================================
   BANDE GEM — TRAITEMENT HOLOGRAPHIQUE
   Panneaux de verre, liseré lumineux, balayage lent.
   Volontairement retenu : c'est un site institutionnel.
   ============================================================ */
.sec-sombre{--holo:#6FD3FF;--holo-2:#2E9BE8}

/* Trame fine et balayage, derrière tout le contenu de la bande */
.sec-sombre .gem-corps::before{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(180deg,rgba(111,211,255,.05) 0 1px,transparent 1px 4px),
    linear-gradient(90deg,rgba(111,211,255,.07) 1px,transparent 1px),
    linear-gradient(180deg,rgba(111,211,255,.07) 1px,transparent 1px);
  background-size:100% 4px,54px 54px,54px 54px;
  opacity:.5;mix-blend-mode:screen;
}
.sec-sombre .gem-corps::after{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,transparent 0,rgba(111,211,255,.16) 46%,rgba(111,211,255,.3) 50%,rgba(111,211,255,.16) 54%,transparent 100%);
  height:26%;animation:holo-balaye 7.5s linear infinite;mix-blend-mode:screen;
}
@keyframes holo-balaye{
  0%{transform:translateY(-120%);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translateY(420%);opacity:0}
}

/* Les cellules deviennent des panneaux de verre */
.gem-carte{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(160deg,rgba(111,211,255,.13),rgba(7,29,70,.34) 62%);
  backdrop-filter:blur(11px) saturate(1.25);
  -webkit-backdrop-filter:blur(11px) saturate(1.25);
  border:1px solid rgba(111,211,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 26px rgba(111,211,255,.1),
    0 18px 40px -26px rgba(0,0,0,.65);
  transition:transform var(--dur-s) var(--ease),border-color var(--dur-xs) var(--ease),
             box-shadow var(--dur-s) var(--ease);
}
/* Liseré supérieur, comme une arête de projection */
.gem-carte::before{
  content:"";position:absolute;z-index:1;top:0;left:12%;right:12%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--holo),transparent);
  opacity:.75;
}
/* Reflet oblique qui traverse le panneau au survol */
.gem-carte::after{
  content:"";position:absolute;z-index:1;inset:-40% -60%;pointer-events:none;
  background:linear-gradient(74deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
  transform:translateX(-70%);transition:transform .9s var(--ease);
}
.gem-carte:hover{
  transform:translateY(-5px);
  border-color:rgba(111,211,255,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 0 34px rgba(111,211,255,.18),
    0 26px 54px -26px rgba(46,155,232,.5);
}
.gem-carte:hover::after{transform:translateX(70%)}

/* Les icônes rayonnent */
.gem-ic{
  color:var(--holo);
  filter:drop-shadow(0 0 7px rgba(111,211,255,.65));
  transition:filter var(--dur-xs) var(--ease),transform var(--dur-s) var(--ease-rebond);
}
.gem-carte:hover .gem-ic{transform:scale(1.1);filter:drop-shadow(0 0 13px rgba(111,211,255,.9))}
.gem-ic .ic-duo>*+*{stroke:var(--or-clair)}
.gem-ic .ic-duo>:first-child:not(:only-child),
.gem-ic .ic-plein>:only-child{fill:rgba(111,211,255,.14)}

.gem-carte h3{
  color:#EAF7FF;
  text-shadow:0 0 16px rgba(111,211,255,.45);
}
.gem-carte p{color:rgba(226,243,255,.82);text-shadow:none}

/* Le titre de la bande prend la même lumière */
.sec-sombre .h2 em{color:var(--holo)}
.sec-sombre .eyebrow{color:rgba(111,211,255,.7)}
.sec-sombre .souligne{background:linear-gradient(90deg,var(--holo),var(--or))}

/* La grille et le film restent au-dessus des effets.
   On ne touche surtout pas a `position` ici : le film est absolu par rapport
   a la bande en mode bureau, et le passer en relatif l'aplatit a zero. */
.gem-corps>.grille-gem{position:relative;z-index:1}
.gem-corps>.apc-film{z-index:1}

@media(prefers-reduced-motion:reduce){
  .sec-sombre .gem-corps::after{animation:none;display:none}
  .gem-carte::after{display:none}
  .gem-carte,.gem-ic{transition:none}
}

/* ---- La trame et le balayage restent sur la colonne des cellules.
   ATTENTION : ne jamais positionner .gem-corps en mode bureau — le film
   est absolu par rapport a la bande, il s'ancrerait dessus et disparaitrait. ---- */


/* ---- Le film reste dans le cadre : plus de débordement par le haut ---- */
@media(min-width:1180px){
  .sec.sec-sombre{overflow:hidden}
  .apc-film{
    top:0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 14%,rgba(0,0,0,.72) 30%,#000 46%);
    mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 14%,rgba(0,0,0,.72) 30%,#000 46%);
    -webkit-mask-composite:source-over;
    mask-composite:add;
  }
}

/* ---- Frise : survol franc et sans ambiguïté ----
   Toute l'étape est la zone sensible, jalon compris. */
.frise-etape{cursor:default;padding-bottom:6px}
.frise-carte{
  transition:transform .34s var(--ease-rebond),border-color .22s var(--ease),
             background .22s var(--ease);
  will-change:transform;
}
.frise-etape:hover .frise-carte,
.frise-etape:focus-within .frise-carte{
  transform:translateY(-10px) scale(1.035);
  border-color:var(--bordeaux);
  background:linear-gradient(170deg,var(--papier),color-mix(in srgb,var(--bordeaux) 6%,var(--papier)));
}
.frise-jalon{will-change:transform}
.frise-etape:hover .frise-jalon,
.frise-etape:focus-within .frise-jalon{
  transform:translateX(-50%) scale(1.14);
  background:var(--bordeaux);border-color:var(--bordeaux);color:#fff;
}
.frise-etape:hover .frise-ic .ic-duo>*+*{stroke:var(--or-clair)}
.frise-etape:hover .frise-fantome{opacity:.14}
.frise-etape:hover .mission-n{color:var(--or)}
/* En vertical, le jalon n'est pas centré : on garde sa translation d'origine */
@media(max-width:760px){
  .frise-etape:hover .frise-jalon,
  .frise-etape:focus-within .frise-jalon{transform:scale(1.14)}
}
@media(prefers-reduced-motion:reduce){
  .frise-etape:hover .frise-carte,
  .frise-etape:hover .frise-jalon{transform:none}
}

/* ---- Frise : une barre d'accent se déploie en haut de la carte au survol ---- */
.frise-carte::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%) scaleX(0);
  width:72%;height:3px;border-radius:0 0 3px 3px;transform-origin:center;
  background:linear-gradient(90deg,var(--bordeaux),var(--or));
  transition:transform .34s var(--ease);
}
.frise-etape:hover .frise-carte::before,
.frise-etape:focus-within .frise-carte::before{transform:translateX(-50%) scaleX(1)}
.frise-carte{overflow:hidden}
/* L'icône du jalon pivote légèrement */
.frise-etape:hover .frise-ic{transform:rotate(-6deg);transition:transform .34s var(--ease-rebond)}

/* ============================================================
   BANNIÈRE — image plus présente et plus contrastée à droite
   Le voile se lève plus tôt, le masque atteint sa pleine opacité
   plus à gauche, et le plan reçoit un léger gain de contraste.
   ============================================================ */
@media(min-width:1025px){
  .ban-scenes{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 10%,rgba(0,0,0,.3) 26%,rgba(0,0,0,.8) 40%,#000 52%);
    mask-image:linear-gradient(90deg,transparent 0,transparent 10%,rgba(0,0,0,.3) 26%,rgba(0,0,0,.8) 40%,#000 52%);
  }
  .ban-scenes::after{
    background:
      linear-gradient(90deg,var(--sable) 0,var(--sable) 18%,rgba(238,242,249,.9) 30%,rgba(238,242,249,.46) 42%,rgba(238,242,249,.08) 54%,transparent 62%),
      linear-gradient(180deg,rgba(238,242,249,.55) 0,transparent 12%,transparent 80%,rgba(238,242,249,.45) 100%);
  }
  [data-theme="dark"] .ban-scenes::after{
    background:
      linear-gradient(90deg,#111829 0,#111829 18%,rgba(17,24,41,.9) 30%,rgba(17,24,41,.46) 42%,rgba(17,24,41,.08) 54%,transparent 62%),
      linear-gradient(180deg,rgba(17,24,41,.55) 0,transparent 12%,transparent 80%,rgba(17,24,41,.5) 100%);
  }
}


/* ---- L'effet holographique couvre toute la largeur de la bande ----
   Trame et balayage débordent jusqu'aux bords, film compris, avec une
   intensité plus douce sur la partie image pour ne pas la bruiter. */
.sec-sombre .gem-corps::before,
.sec-sombre .gem-corps::after{
  left:calc(-1 * var(--marge-x));
  right:calc(-1 * var(--marge-x));
  width:auto;
}
.sec-sombre .gem-corps::before{z-index:2;opacity:.42}
.sec-sombre .gem-corps::after{z-index:2}
/* Le film et les cellules restent sous la trame, qui les traverse. */
.gem-corps>.apc-film{z-index:0}
.gem-corps>.grille-gem{z-index:1}

/* ---- Bannière : image nette et dégagée à droite ----
   Aucun filtre sur le plan ; on agit uniquement sur le voile et le cadrage. */
.ban-poster,.ban-video{filter:none}
@media(min-width:1025px){
  /* Le voile disparaît complètement dès 56 % : la moitié droite est pleine image. */
  .ban-scenes::after{
    background:
      linear-gradient(90deg,var(--sable) 0,var(--sable) 17%,rgba(238,242,249,.88) 28%,rgba(238,242,249,.4) 40%,rgba(238,242,249,.05) 50%,transparent 56%),
      linear-gradient(180deg,rgba(238,242,249,.48) 0,transparent 11%,transparent 82%,rgba(238,242,249,.4) 100%);
  }
  [data-theme="dark"] .ban-scenes::after{
    background:
      linear-gradient(90deg,#111829 0,#111829 17%,rgba(17,24,41,.88) 28%,rgba(17,24,41,.4) 40%,rgba(17,24,41,.05) 50%,transparent 56%),
      linear-gradient(180deg,rgba(17,24,41,.48) 0,transparent 11%,transparent 82%,rgba(17,24,41,.45) 100%);
  }
  .ban-scenes{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 9%,rgba(0,0,0,.32) 24%,rgba(0,0,0,.85) 38%,#000 48%);
    mask-image:linear-gradient(90deg,transparent 0,transparent 9%,rgba(0,0,0,.32) 24%,rgba(0,0,0,.85) 38%,#000 48%);
  }
}

/* ============================================================
   BANNIÈRE — COUCHE HOLOGRAPHIQUE ALÉATOIRE
   Elle ne couvre que la moitié droite, là où l'image est pleine,
   pour ne jamais gêner la lecture du titre.
   ============================================================ */
.ban-holo{
  --decal:0%;--teinte:0deg;
  position:absolute;z-index:4;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 34%,rgba(0,0,0,.5) 48%,#000 62%);
  mask-image:linear-gradient(90deg,transparent 0,transparent 34%,rgba(0,0,0,.5) 48%,#000 62%);
}
.ban-holo>span{position:absolute;inset:0;display:block}

/* Trame de balayage très fine, animée en continu mais lentement */
.ban-holo-trame{
  background:repeating-linear-gradient(180deg,rgba(111,211,255,.09) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen;opacity:.55;
  animation:holo-trame-file 9s linear infinite;
}
@keyframes holo-trame-file{to{transform:translateY(3px)}}

/* Faisceau lumineux qui traverse à intervalle non rond */
.ban-holo-balaye{
  background:linear-gradient(105deg,transparent 42%,rgba(111,211,255,.16) 49%,rgba(255,255,255,.1) 51%,transparent 58%);
  mix-blend-mode:screen;
  animation:holo-faisceau 11.3s ease-in-out infinite;
}
@keyframes holo-faisceau{
  0%,62%{transform:translateX(-120%);opacity:0}
  66%{opacity:1}
  92%{transform:translateX(120%);opacity:0}
  100%{transform:translateX(120%);opacity:0}
}

/* Perturbation brève, déclenchée au hasard par le script */
.ban-holo-glitch{
  background:linear-gradient(180deg,transparent 0,rgba(111,211,255,.22) 46%,rgba(255,120,190,.14) 52%,transparent 60%);
  mix-blend-mode:screen;opacity:0;
}
.ban-holo.perturbe .ban-holo-glitch{
  opacity:1;
  transform:translateX(var(--decal)) translateY(calc(var(--decal) * -3));
  filter:hue-rotate(var(--teinte));
}
/* Pendant la perturbation, l'image se décale d'un cheveu */
.ban-holo.perturbe ~ .ban-vue .ban-video,
.ban-holo.perturbe ~ .ban-vue .ban-poster{transform:translateX(var(--decal))}

@media(max-width:1024px){
  .ban-holo{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 22%,#000 40%);
    mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 22%,#000 40%);
  }
}
@media(prefers-reduced-motion:reduce){.ban-holo{display:none}}

/* ============================================================
   BANNIÈRE — FONDU ENCHAÎNÉ NATUREL ENTRE LES SCÈNES
   La durée doit rester alignée sur la constante FONDU du script.
   ============================================================ */
.ban-vue{
  transition:opacity 1.6s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
/* La vidéo apparaît en même temps que sa scène, sans décalage propre. */
.ban-video{transition:opacity 1.6s cubic-bezier(.4,0,.2,1)}

/* La scène entrante se pose : elle arrive très légèrement agrandie et
   se stabilise, au lieu d'apparaître d'un bloc. */
.ban-vue .ban-poster,.ban-vue .ban-video{
  transform-origin:60% 50%;
}
.ban-vue:not(.active) .ban-poster,.ban-vue:not(.active) .ban-video{
  transform:scale(1.045);
  transition:transform 1.8s cubic-bezier(.33,1,.68,1);
}
/* La dérive continue ne redémarre plus de zéro sur chaque scène :
   elle est portée par le conteneur, qui ne change pas. */
.ban-vue.active .ban-poster,.ban-vue.active .ban-video{
  animation:ban-derive 26s ease-in-out infinite alternate;
  transition:transform 1.8s cubic-bezier(.33,1,.68,1);
}
@media(prefers-reduced-motion:reduce){
  .ban-vue,.ban-video{transition:none}
  .ban-vue .ban-poster,.ban-vue .ban-video{transform:none!important;animation:none}
}

/* ---- Balayage qui parcourt le sujet, de haut en bas ----
   Il ne se déclenche que par intermittence, via le script. */
.ban-holo-scan{
  opacity:0;pointer-events:none;
  background:
    linear-gradient(180deg,
      transparent 0,
      rgba(111,211,255,.05) 38%,
      rgba(111,211,255,.34) 47%,
      rgba(233,250,255,.72) 50%,
      rgba(111,211,255,.34) 53%,
      rgba(111,211,255,.05) 62%,
      transparent 100%);
  mix-blend-mode:screen;
  filter:blur(.4px);
}
.ban-holo.scanne .ban-holo-scan{
  animation:holo-scan-corps var(--scan-duree,2.8s) cubic-bezier(.45,.05,.55,.95) 1;
}
@keyframes holo-scan-corps{
  0%{opacity:0;transform:translateY(-92%) scaleY(.7)}
  10%{opacity:1}
  50%{transform:translateY(0) scaleY(1)}
  90%{opacity:1}
  100%{opacity:0;transform:translateY(92%) scaleY(.7)}
}
/* Pendant le passage, l'image reçoit un très léger gain lumineux :
   on sent le faisceau la traverser. */
.ban-holo.scanne ~ .ban-vue.active .ban-video,
.ban-holo.scanne ~ .ban-vue.active .ban-poster{
  filter:brightness(1.04) saturate(1.05);
  transition:filter .5s var(--ease);
}
@media(prefers-reduced-motion:reduce){.ban-holo-scan{display:none}}

/* ============================================================
   FILM APC — BALAYAGE HOLOGRAPHIQUE DU SUJET
   ============================================================ */
.apc-holo{
  position:absolute;z-index:1;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 26%,#000 44%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 26%,#000 44%);
}
.apc-holo>span{position:absolute;inset:0;display:block}
.apc-holo-trame{
  background:repeating-linear-gradient(180deg,rgba(111,211,255,.07) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen;opacity:.5;
  animation:holo-trame-file 11s linear infinite;
}
.apc-holo-scan{
  opacity:0;
  background:linear-gradient(180deg,
    transparent 0,
    rgba(111,211,255,.06) 38%,
    rgba(111,211,255,.38) 47%,
    rgba(233,250,255,.78) 50%,
    rgba(111,211,255,.38) 53%,
    rgba(111,211,255,.06) 62%,
    transparent 100%);
  mix-blend-mode:screen;filter:blur(.4px);
}
.apc-holo.scanne .apc-holo-scan{
  animation:holo-scan-corps var(--scan-duree,3s) cubic-bezier(.45,.05,.55,.95) 1;
}
/* Le sujet s'éclaire très légèrement au passage du faisceau. */
.apc-holo.scanne ~ .apc-scenes .apc-vue.active .apc-video,
.apc-film:has(.apc-holo.scanne) .apc-vue.active .apc-video{
  filter:brightness(1.05) saturate(1.06);
  transition:filter .5s var(--ease);
}
@media(max-width:1179px){
  .apc-holo{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 18%,#000 34%);
    mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 18%,#000 34%);
  }
}
@media(prefers-reduced-motion:reduce){.apc-holo{display:none}}