/* SOSERIM — feuille autonome de la page d'accueil : socle limité aux composants utilisés ici, puis hero.
   Source de vérité des composants partagés : style.css (design system). */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format("woff2")}

:root{
--font:"Poppins",system-ui,sans-serif;
--ink:#221b4e;--body:#4d4966;--muted:#6e6890;
--primary:#4a38a8;--lav50:#f7f5fc;--lav100:#efebf9;--line:#e7e4f1;--accent:#0b7d91;
--grad:linear-gradient(92deg,#4a38a8,#3f63c9 55%,#129cb5);
--r:16px;--rs:10px;
--sh1:0 1px 2px rgba(34,27,78,.05),0 4px 16px rgba(34,27,78,.07);
--sh2:0 6px 14px rgba(34,27,78,.1),0 18px 44px rgba(34,27,78,.14);
}

/* Base */
*{box-sizing:border-box;margin:0}
html{font-size:112.5%;scroll-behavior:smooth} /* 18px : lectorat senior */
body{font:400 1rem/1.65 var(--font);color:var(--body);background:#fff;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3{color:var(--ink);font-weight:700;line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2rem,5vw,3.7rem);line-height:1.12} /* plancher mobile : 36px, borne basse de l'échelle */
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:1.3rem}
p{max-width:70ch}
.lead{font-size:1.125rem;color:var(--muted)}
a{color:var(--primary);text-underline-offset:3px}
::selection{background:var(--primary);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;top:-100%;left:0;z-index:30;padding:.6rem 1.2rem;background:var(--primary);color:#fff;border-radius:0 0 var(--rs) 0}
.skip:focus{top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* libellé réservé aux lecteurs d'écran */
.wrap{max-width:1350px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
/* Destinations du menu one-page : chaque section s'arrête sous la barre collante */
#a-propos,#imagerie,#programme,#bureau,#mediatheque,#contact{scroll-margin-top:5rem}

/* Navigation : barre collante, ombre fondue dès que la page défile (classe posée par script.js) */
body>header{position:sticky;top:0;z-index:20}
.nav{padding-block:.7rem;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav.pose{box-shadow:var(--sh1)}
.nav-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem}
.nav-in>.btn{justify-self:end;padding:.6rem 1.4rem}
.nav-logo{display:flex;align-items:center;gap:.65rem;justify-self:start;color:var(--ink);text-decoration:none}
.nav-nom{display:block;font:700 1.15rem/1.15 var(--font);letter-spacing:-.01em}
.nav-nom i{display:block;font:400 .6875rem/1.3 var(--font);font-style:normal;color:var(--muted)}
.nav-logo img{height:48px;width:auto}
.nav-links{display:flex;justify-self:center;position:relative;gap:1.6rem;list-style:none;padding:0}
/* Aucun libellé ne se coupe : « Cours et formations » sur deux lignes ferait grandir la
   barre et désalignerait tout le menu. */
.nav-links a{white-space:nowrap;color:var(--body);text-decoration:none;font-weight:500;font-size:.9375rem;transition:color .25s}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--primary)}
/* Filet du menu : trait au dégradé du logo qui glisse d'une entrée à l'autre. Il se cale sous
   l'entrée courante, suit le survol et le focus ; script.js pose sa position et sa largeur. */
.nav-links::after{content:"";position:absolute;left:0;bottom:-.35rem;width:var(--w,0);height:2px;border-radius:2px;background:var(--grad);box-shadow:0 2px 10px rgba(18,156,181,.45);opacity:0;translate:var(--x,0) 0;transition:translate .42s cubic-bezier(.32,.72,0,1),width .42s cubic-bezier(.32,.72,0,1),opacity .3s}
.nav-links.filet::after{opacity:1}
.burger{display:none;flex-direction:column;gap:.32rem;align-items:center;justify-content:center;margin-left:auto;width:2.6rem;height:2.6rem;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer}
.burger i{width:1.1rem;height:2px;background:var(--ink);border-radius:2px}
/* Libellé du bouton de compte : la version courte prend le relais en tablette, où le
   libellé long casserait sur deux lignes dans sa pilule */
.nav .lib{font-size:13px}
.nav .lib-c{display:none}
/* Entre le tiroir et le desktop large, le menu à six entrées se resserre et le bouton de
   compte prend son libellé court */
@media(min-width:1001px) and (max-width:1300px){
.nav .lib{display:none}
.nav .lib-c{display:inline}
.nav-nom i{display:none}
.nav-in{gap:1.2rem}
.nav-links{gap:1rem}
.nav-links a{font-size:.875rem}
}

/* Boutons, liens, métas */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.6rem;border:1px solid transparent;border-radius:999px;font:600 .9375rem/1 var(--font);letter-spacing:.01em;color:#fff;background:var(--primary);cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s,filter .2s,border-color .2s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh2);filter:brightness(1.07)}
.btn:active{transform:none;filter:brightness(.97)}
.btn-a{background:var(--accent)}
.btn-o{background:#fff;color:var(--primary);border-color:var(--line)}
.btn-o:hover{border-color:var(--primary);filter:none}
.btn-disc{display:grid;place-items:center;flex:none;width:1.3rem;height:1.3rem;margin:-.5rem 0 -.5rem -1rem;border-radius:50%;background:rgba(255,255,255,.2)}
.btn-disc .ico,.btn>.ico{width:1.05rem;height:1.05rem}
.link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--primary);text-decoration:none}
.link .ico{transition:translate .2s}
.link:hover .ico{translate:4px 0}
.meta{display:flex;align-items:center;gap:.5rem;font-size:.9375rem;color:var(--muted)}
.meta .ico{color:var(--accent);width:1.1rem;height:1.1rem}
.ico{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Hero : diaporama plein cadre */
.hero{position:relative;display:flex;flex-direction:column;min-height:min(88vh,52rem)}
.hero-bg{position:absolute;inset:0;overflow:hidden;background:var(--ink)}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1);transition:opacity 1.2s,transform 7s linear}
.hero-bg img.on{opacity:1;transform:scale(1.09)} /* Ken Burns */
.hero-bg img:nth-child(2){transform-origin:30% 40%}
.hero-bg img:nth-child(3){transform-origin:68% 35%}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(92deg,rgba(34,27,78,.9) 25%,rgba(34,27,78,.55) 62%,rgba(11,125,145,.35))}
.hero-inner{position:relative;flex:1;display:grid;align-content:center;justify-items:start;gap:1.5rem;padding-block:4.5rem;width:100%}
.hero-inner>*{animation:rise .9s cubic-bezier(.16,1,.3,1) backwards} /* entrée en cascade */
.hero-inner>*:nth-child(2){animation-delay:.15s}
.hero-inner>*:nth-child(3){animation-delay:.3s}
@keyframes rise{from{opacity:0;translate:0 26px}}
.hero-inner h1{color:#fff;max-width:18ch}
.hero-inner .mark{color:#5fd0e4}
.hero-inner .lead{color:#d9d4ef;max-width:54ch}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem}

/* Bande prochain événement */
.count{position:relative;background:#fff;border-radius:2.25rem 2.25rem 0 0}
.count-inner{display:flex;flex-wrap:wrap;align-items:center;gap:1.8rem 2.5rem;padding-block:2.1rem}
.count-info{display:grid;gap:.7rem;justify-items:start;flex:1;min-width:min(100%,19rem)}
.count-info h2{font-size:clamp(1.6rem,2.6vw,2.05rem)}
.count-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem}
.tiles{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.tiles i{font-style:normal;font-weight:700;color:var(--muted)}
/* Tuiles façon horloge à volets : deux tons + charnière à mi-hauteur des chiffres (2.1rem = padding 1rem + demi-chiffre 1.1rem) */
.tile{position:relative;overflow:hidden;display:grid;gap:.35rem;justify-items:center;min-width:5.6rem;padding:1rem .6rem .8rem;background:linear-gradient(#2e2665 2.1rem,#221b4e 2.1rem);border-radius:14px;box-shadow:0 10px 24px rgba(34,27,78,.28)}
.tile::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 75% at 50% -12%,rgba(255,255,255,.15),transparent 55%)}
.tile::after{content:"";position:absolute;inset:2.1rem 0 auto;height:1px;background:rgba(255,255,255,.16)}
.tile b{font:700 2.2rem/1 var(--font);color:#fff;font-variant-numeric:tabular-nums}
.tile b.tick{animation:tick .5s cubic-bezier(.16,1,.3,1)}
@keyframes tick{from{opacity:0;translate:0 -.35rem}}
.tile span{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#5fd0e4;line-height:1.5}
.count hr{border:0;border-top:1px solid var(--line)}

/* Dégradé signature : 1 à 2 titres majeurs par page */
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.cy{color:var(--accent)}
.pic{display:grid;place-items:center;flex:none;border-radius:50%;background:var(--lav50)}

/* À propos : texte et quatre missions à gauche, photo à droite posée sur un aplat d'eau
   claire, trame de points en pied. Valeurs relevées sur la maquette à 1440 px. */
.ab{position:relative;overflow:hidden;padding:67px 0 50px;background:#fcfcfc}
.ab-in{display:grid;grid-template-columns:minmax(0,798fr) minmax(0,526fr);column-gap:24px;max-width:1440px;margin-inline:auto;padding:0 37px 0 63px}
.ab-kick{display:flex;align-items:center;gap:23px;max-width:none;font:500 17px/24px var(--font);letter-spacing:2.7px;text-transform:uppercase;color:#0c3c57}
.ab-kick::before{content:"";width:56px;height:3px;flex:none;background:var(--accent)}
.ab h2{max-width:720px;margin-top:40px;font-size:44px;font-weight:400;line-height:53px;color:#0a0f45}
.ab h2 strong{font-weight:700}
.ab h2 strong:first-child{display:block}
.ab h2 .cy{color:#056b77}
.ab-p{max-width:720px;margin-top:28px;font-size:19.5px;line-height:29px;color:#47506a}
.ab-p+.ab-p{margin-top:19px}
.ab-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;margin-top:31px;padding:0;list-style:none}
.acard{display:grid;grid-template-columns:81px 1fr;column-gap:26px;align-items:start;padding:21px 24px 24px 23px;background:#fff;border:1px solid #e9edf2;border-radius:12px}
.ab-ico{display:grid;place-items:center;width:81px;height:81px;border-radius:50%;background:#e4f4f4;color:#137a82}
.ab-ico .ico{width:44px;height:44px;stroke-width:1.5}
.acard div{padding-top:3px}
.acard h3{font-size:18.5px;line-height:24px;color:#0a0f45}
.acard p{margin-top:12px;font-size:15.2px;line-height:22px;color:#5a6178}
/* Intertitre « Objectifs », sous la présentation, comme sur la plaquette */
.ab-lab{margin-top:38px;font-size:28px;line-height:34px;color:#0a0f45}
.ab-lab+.ab-cards{margin-top:20px}
/* Impact et vision : un seul panneau lavande à deux colonnes, séparées d'un filet neutre */
.ab-iv{display:grid;grid-template-columns:1fr 1fr;margin-top:22px;border:1px solid var(--line);border-radius:12px;background:var(--lav50)}
.ab-iv>div{padding:24px 26px 26px}
.ab-iv>div+div{border-left:1px solid var(--line)}
.ab-iv h3{display:flex;align-items:center;gap:14px;font-size:18.5px;line-height:24px;color:#0a0f45}
.ab-iv-ico{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--primary);box-shadow:var(--sh1)}
.ab-iv-ico .ico{width:26px;height:26px;stroke-width:1.6}
.ab-iv ul{display:grid;gap:10px;margin-top:16px;padding:0;list-style:none}
.ab-iv li{position:relative;padding-left:18px;font-size:15.2px;line-height:22px;color:#5a6178}
.ab-iv li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--primary)}
.ab-btn{display:inline-flex;align-items:center;gap:22px;height:55px;margin-top:22px;padding:0 33px 0 32px;border-radius:6px;background:#04707e;color:#fff;font:500 17.4px/1 var(--font);text-decoration:none;transition:background .25s}
.ab-btn .ico{width:24px;height:24px;transition:translate .2s}
.ab-btn:hover{background:#035d69}
.ab-btn:hover .ico{translate:4px 0}
/* Colonne photo : l'aplat déborde en haut à gauche, la trame de points en bas à droite,
   tous deux sous la photo */
.ab-vis{position:relative;padding-top:78px}
.ab-vis::before{content:"";position:absolute;top:21px;left:-43px;width:282px;height:330px;border-radius:38px;background:#e6f3f4}
.ab-vis::after{content:"";position:absolute;top:709px;left:358px;width:200px;height:252px;background:radial-gradient(circle,#ccd4dc 2.4px,transparent 2.9px) 0 0/20px 18px}
/* Carrousel À propos : chaque photo monte depuis le bas et recouvre
   la précédente, qui s'assombrit dessous, puis se pose par un lent dézoom. Les segments donnent
   le rythme — la fin du remplissage du segment actif fait avancer (script.js) — et servent de
   commandes. Survol, focus ou section hors écran : le remplissage se met en pause. */
.ab-car{position:relative;z-index:1;overflow:hidden;aspect-ratio:526/805;border-radius:22px;background:#dfe7ee;box-shadow:0 24px 60px rgba(10,15,69,.16);touch-action:pan-y}
.ab-sl{position:absolute;inset:0;margin:0;clip-path:inset(100% 0 0 0);transition:clip-path .9s cubic-bezier(.77,0,.18,1)}
.ab-sl.on{z-index:2;clip-path:inset(0)}
.ab-sl.sort{z-index:1;clip-path:inset(0);transition:none}
.ab-car img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;pointer-events:none;transition:filter .9s}
.ab-sl.on img{animation:ab-kb 5.5s cubic-bezier(.16,1,.3,1) both}
.ab-sl.sort img{filter:brightness(.6)}
@keyframes ab-kb{from{transform:scale(1.16)}to{transform:scale(1)}}
.ab-car::after{content:"";position:absolute;inset:auto 0 0;z-index:3;height:38%;background:linear-gradient(transparent,rgba(10,15,69,.62));pointer-events:none}
.ab-car-bas{position:absolute;left:24px;right:24px;bottom:18px;z-index:4;display:grid;gap:8px}
.ab-car-leg{display:flex;align-items:center;gap:10px;max-width:none;font:600 15px/1.3 var(--font);color:#fff}
.ab-car-leg::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:#5fd0e4;box-shadow:0 0 0 4px rgba(95,208,228,.25)}
.ab-car-pts{display:flex;gap:8px}
.ab-car-pts button{display:grid;align-items:center;flex:1;height:24px;padding:0;border:0;background:none;cursor:pointer}
.ab-car-pts button:focus-visible{outline:2px solid #5fd0e4;outline-offset:2px}
.ab-car-pts i{display:block;height:3px;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.35)}
.ab-car-pts i::after{content:"";display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.ab-car-pts .fait i::after{transform:scaleX(1)}
.ab-car-pts [aria-current] i::after{animation:ab-prog 5s linear forwards}
.ab-car:is(:hover,:has(:focus-visible),.pause) .ab-car-pts i::after{animation-play-state:paused}
@keyframes ab-prog{to{transform:scaleX(1)}}
@media(min-width:1001px) and (max-width:1300px){
.ab-in{padding:0 32px 0 40px}
.ab h2{font-size:38px;line-height:46px}
.ab-p{font-size:18px;line-height:28px}
.ab-vis::after{top:auto;bottom:-60px;left:auto;right:-30px}
}

/* Spécialités : fond photographique nuit, en-tête centré, cartes de verre à illustration.
   Valeurs relevées sur la maquette à 1440 px ; le fond est différé par script.js. */
.spe{position:relative;overflow:hidden;padding:90px 0 72px;background:#0e153e center/cover no-repeat;color:#c0cdf1;text-align:center}
.spe.vu{background-image:url(img/reel-spe-fond.webp)}
.spe .wrap{position:relative}
.spe-trait{display:block;width:70px;height:3px;margin:0 auto;border-radius:2px;background:#3ec8dc}
.spe h2{margin-top:25px;font-size:58px;line-height:66px;color:#fff;letter-spacing:-.01em}
.spe h2 span{display:block;width:fit-content;margin-inline:auto;background:linear-gradient(90deg,#bdf6fb,#4fdcf2 60%,#39d0ea);-webkit-background-clip:text;background-clip:text;color:transparent}
.spe-lead{max-width:850px;margin:23px auto 0;font-size:22px;line-height:35px;color:#cedaf9;text-wrap:balance}
.spe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;max-width:1040px;margin:43px auto 0;padding:0;list-style:none;text-align:left}
.spe-c{position:relative;display:flex;flex-direction:column;height:100%;padding:0 26px 22px;border:1px solid rgba(110,140,230,.34);border-radius:16px;background:linear-gradient(180deg,rgba(38,52,118,.55),rgba(20,28,76,.6));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(4,8,36,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:inherit;text-decoration:none;transition:transform .25s,border-color .25s,box-shadow .25s}
/* L'illustration se fond dans la carte : ses bords s'effacent par un masque radial */
.spe-c img{align-self:center;width:200px;height:150px;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
.spe-c h3{font-size:19px;line-height:25px;color:#fff}
.spe-c p{margin-top:14px;font-size:16.5px;line-height:26px;color:#c0cdf1}
/* Flèche posée dans le coin haut droit, à côté de l'illustration : elle ne coûte aucune rangée */
.spe-go{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#0a92b0,#006c8c 70%);box-shadow:0 0 0 1px rgba(90,210,235,.25),0 8px 22px rgba(0,140,175,.35);color:#fff;transition:box-shadow .25s}
.spe-go .ico{width:17px;height:17px;transition:translate .2s}
.spe-c:hover{transform:translateY(-4px);border-color:rgba(120,210,240,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 50px rgba(4,8,36,.45)}
.spe-c:hover .spe-go{box-shadow:0 0 0 1px rgba(90,210,235,.5),0 10px 28px rgba(0,170,210,.55)}
.spe-c:hover .spe-go .ico{translate:3px 0}
.spe-trait.bas{margin-top:53px}
.spe-foot{max-width:none;margin-top:22px;font-size:20px;line-height:32px;color:#d5e2fc}
.spe-cta{display:inline-flex;align-items:center;justify-content:center;gap:28px;width:377px;height:70px;margin-top:28px;border:1px solid rgba(120,225,245,.5);border-radius:999px;background:linear-gradient(90deg,#0b90ae,#07809f 55%,#2a9dbb);box-shadow:0 10px 30px rgba(20,180,210,.3);color:#fff;font:600 18px/1 var(--font);text-decoration:none;transition:box-shadow .25s,transform .25s}
.spe-cta .ico{width:22px;height:22px;transition:translate .2s}
.spe-cta:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(20,180,210,.45)}
.spe-cta:hover .ico{translate:4px 0}

/* Programme du prochain congrès : en-tête à deux colonnes — identité à gauche, informations
   pratiques et inscription à droite —, puis les sessions en lignes illustrées. Fond lavande
   pour décrocher de la section des organisateurs, en blanc ; lignes blanches sur filet neutre.
   Le visuel de chaque ligne épouse la hauteur du texte, jamais l'inverse. */
.ag{padding:4.5rem 0;background:var(--lav50)}
.ag-head{display:grid;grid-template-columns:1fr auto;gap:1.8rem 3.5rem;align-items:start;margin-bottom:2.2rem}
.ag-intro{display:grid;gap:.75rem}
.ag-kick{font:600 .75rem/1.4 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.ag-intro .lead{max-width:46ch}
.ag-facts{display:grid;gap:.55rem}
.ag-facts .meta{font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.ag-facts .btn{margin-top:1rem}
.ag-list{display:grid;gap:.9rem;list-style:none;padding:0}
.ag-item{display:grid;grid-template-columns:clamp(13rem,26%,20rem) 1fr auto;gap:1.8rem;padding:.55rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:box-shadow .25s}
.ag-item:hover{box-shadow:var(--sh1)}
.ag-item img{width:100%;height:100%;object-fit:cover;border-radius:var(--rs)}
.ag-txt{display:grid;justify-items:start;align-content:center;gap:.45rem;padding:1.1rem 0}
.ag-txt .ag-hour{padding:.32rem .72rem;background:var(--accent);border-radius:var(--rs);font:700 .75rem/1.4 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#fff}
.ag-txt h3{margin-top:.15rem}
.ag-txt>p{font-size:.9375rem;color:var(--muted);max-width:58ch}
/* Colonne de droite : la date en bloc éditorial — mois en capitales espacées, quantième en
   très grand corps, filet signature, millésime — séparée du texte par un filet en retrait.
   Le bloc s'étire sur la hauteur de la ligne, marges comprises. */
.ag-date{display:grid;align-content:center;justify-items:center;align-self:stretch;margin-block:.9rem;padding:0 1.5rem 0 1.9rem;border-left:1px solid var(--line);text-align:center}
.ag-date .m{font:600 .75rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.ag-date b{margin-top:.4rem;font-size:2.6rem;line-height:.9;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.ag-date b::after{content:"";display:block;width:1.7rem;height:3px;margin:.6rem auto .45rem;background:var(--accent)}
.ag-date .y{font:600 .75rem/1 var(--font);letter-spacing:.14em;color:var(--muted)}

/* Appel à l'adhésion : la bande déborde le conteneur du site et court sur presque toute la
   largeur de la fenêtre, à une marge fine près. Photo d'audience teintée par le dégradé
   signature posé en produit — la foule reste lisible sous la couleur. */
.adh{padding:30px;background:#fff} /* blanc entre le programme et la médiathèque, tous deux lavande */
.adh-band{position:relative;isolation:isolate;overflow:hidden;display:grid;justify-items:center;gap:1.8rem;padding:clamp(3.5rem,7vw,5.5rem) clamp(1.5rem,5vw,3rem);border-radius:var(--r);text-align:center}
.adh-band img{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover}
.adh-band::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--grad);mix-blend-mode:multiply;opacity:.92}
/* Voile encre par-dessus le teintage : le dégradé seul laisse les hautes lumières de la photo
   vers 2:1 sous le titre blanc côté cyan ; l'encre à .55 (celle des voiles du hero) remonte
   le pire cas au-delà de 7:1 sur toute la bande */
.adh-band::after{content:"";position:absolute;z-index:-1;inset:0;background:rgba(34,27,78,.55)}
.adh-band h2{color:#fff;max-width:18ch} /* échelon headline : le display reste au h1 du hero */
.adh-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.2rem}
/* Action en deux pièces : le libellé en pilule, la pastille de flèche détachée — en cercle,
   comme toute pastille cliquable du site. Deux niveaux : le plein blanc porte l'adhésion,
   le translucide bordé (motif des fonds sombres, cf. footer) reste en retrait. */
.pill{display:flex;align-items:center;gap:.45rem;color:var(--ink);text-decoration:none;font:600 .9375rem/1 var(--font)}
.pill span{padding:.85rem 1.4rem;background:#fff;border:1px solid transparent;border-radius:999px;transition:background .2s,border-color .2s}
.pill i{display:grid;place-items:center;width:2.8rem;height:2.8rem;background:#fff;border:1px solid transparent;border-radius:50%;transition:background .2s,border-color .2s,translate .2s}
.pill:hover span,.pill:hover i{background:var(--lav100)}
.pill:hover i{translate:0 -2px}
.pill-o{color:#fff}
.pill-o span,.pill-o i{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.pill-o:hover span,.pill-o:hover i{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.65)}
.adh-band :focus-visible{outline-color:#5fd0e4} /* le cyan du système tomberait à 1,6:1 sur le voile encre */

/* Les organisateurs : en-tête à deux colonnes — la phrase de droite s'aligne sur la première
   ligne du titre —, puis les cartes violettes sur trois colonnes. Le portrait détouré est
   calé en bas et déborde derrière le texte, le filigrane hexagonal du logo passe en dessous,
   et la colonne de liens se pose par-dessus, à gauche. */
.team{padding:4.5rem 0;background:#fff}
.team-head{display:grid;grid-template-columns:1.15fr 1fr;gap:1.2rem 3.5rem;align-items:start;margin-bottom:2.8rem}
.team-intro{display:grid;justify-items:start}
.team-intro h2{max-width:15ch}
.team-head .lead{max-width:44ch}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;list-style:none;padding:0}
/* Un effectif qui ne tombe pas juste laisse une carte seule en fin de grille : elle se pose
   au milieu plutôt que collée à gauche, où elle passerait pour un trou. */
.tcard:last-child:nth-child(3n+1){grid-column:2}
.tcard{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:3/4;padding:1.5rem 1.35rem;background:var(--primary);border-radius:var(--r);transition:box-shadow .25s}
.tcard:hover{box-shadow:var(--sh2)}
.tcard::before{content:"";position:absolute;z-index:-2;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="110" height="110" fill="none" stroke="%23fff" stroke-opacity=".2" stroke-width="2.5"><path d="M70 6 97.7 22v32L70 70 42.3 54V22Z"/><path d="M32 50 52.8 62v24L32 98 11.2 86V62Z"/></svg>') no-repeat right -2.2rem top 34%/10rem auto}
/* Le portrait grandit depuis le bas au survol : jamais de vide sous ses pieds */
.tcard img{position:absolute;z-index:-1;inset:auto 0 0;width:100%;height:72%;object-fit:contain;object-position:bottom right;transform-origin:bottom right;transition:scale .4s cubic-bezier(.16,1,.3,1)}
.tcard:hover img{scale:1.04}
.tcard-txt h3{color:#fff}
.tcard-txt p{margin-top:.15rem;font-size:.9375rem;color:rgba(255,255,255,.85)}
/* Le filet ferme le bloc de texte : il se pose sous sa dernière ligne, que la carte porte
   un nom suivi d'une fonction ou la seule fonction. Le cyan le tient sur le violet. */
.tcard-txt>:last-child::after{content:"";display:block;width:2rem;height:3px;margin-top:.9rem;background:#5fd0e4}
.tcard-soc{position:absolute;left:1.1rem;bottom:1.3rem;display:grid;gap:.1rem;padding:.45rem .3rem;background:rgba(34,27,78,.45);border-radius:999px;list-style:none;margin:0}
.tcard-soc a{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;color:#fff;transition:background .2s}
.tcard-soc a:hover{background:rgba(255,255,255,.18)}
.tcard-soc .sico{width:.95rem;height:.95rem}
.tcard :focus-visible{outline-color:#5fd0e4}

/* Médiathèque : mosaïque de tuiles inégales sur quatre colonnes — la vedette occupe quatre
   cellules, l'album deux en hauteur, la présentation deux en largeur. Seuls les trois spans
   sont déclarés, le placement automatique range le reste sans une seule zone nommée.
   Fond lavande : le pied de page violet nuit suit immédiatement.
   Dans chaque tuile l'image passe derrière (z-index négatif) et le dégradé posé en fond du
   lien se peint entre elle et le texte — le titre reste lisible sans pseudo-élément. */
.md{padding:4.5rem 0;background:var(--lav50)}
.md-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 3rem;margin-bottom:2.2rem}
.md-intro{display:grid;gap:.75rem;max-width:36rem}
.md-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(8.5rem,13vw,11rem);gap:1rem;list-style:none;padding:0}
.mt{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);transition:box-shadow .25s}
.mt:hover,.mt.touche{box-shadow:var(--sh2)}
.mt>a{display:grid;align-content:end;justify-items:start;gap:.5rem;height:100%;padding:1.1rem;color:#fff;text-decoration:none;background:linear-gradient(rgba(34,27,78,0) 34%,rgba(34,27,78,.86))}
.mt img{position:absolute;z-index:-1;inset:0;width:100%;height:100%;object-fit:cover;transition:scale .5s cubic-bezier(.16,1,.3,1)}
.mt:hover img,.mt.touche img{scale:1.05}
.mt h3{color:#fff;font-size:1rem;line-height:1.35}
.mt-lg h3{font-size:1.3rem;line-height:1.18}
.mt-meta{font-size:.9375rem;color:#c9c2e8}
.mt-lg{grid-column:span 2;grid-row:span 2}
.mt-tall{grid-row:span 2}
.mt-wide{grid-column:span 2}
/* La tuile est rognée à ses angles : l'anneau de focus se dessine en dedans pour rester visible */
.mt a:focus-visible{outline-color:#5fd0e4;outline-offset:-5px}
/* Puce de type de média : seule variante utile sur cette page, celle des fonds sombres ;
   la version claire du système reste dans style.css */
.chip{display:inline-flex;align-items:center;padding:.34rem .8rem;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:999px;font:600 .75rem/1.4 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#fff}
/* Pastille de lecture : signal des replays, elle prend le cyan d'action au survol */
.mt-play{position:absolute;top:50%;left:50%;translate:-50% -50%;display:grid;place-items:center;width:2.8rem;height:2.8rem;background:rgba(34,27,78,.45);border:1px solid rgba(255,255,255,.5);border-radius:50%;transition:background .25s,border-color .25s,scale .25s}
.mt-play .ico{width:1.2rem;height:1.2rem}
.mt-lg .mt-play{width:3.6rem;height:3.6rem}
.mt-lg .mt-play .ico{width:1.5rem;height:1.5rem}
.mt:hover .mt-play,.mt.touche .mt-play{background:var(--accent);border-color:transparent;scale:1.08}
/* Porte de sortie : la seule tuile sans image, sur le violet plein */
.mt-out>a{align-content:space-between;background:var(--primary)}
.mt-out-t{font:600 1rem/1.35 var(--font);color:#fff}
.mt-go{display:grid;place-items:center;width:2.6rem;height:2.6rem;background:rgba(255,255,255,.16);border-radius:50%;transition:background .2s,translate .2s}
.mt-out:hover .mt-go{background:rgba(255,255,255,.3);translate:4px 0}

/* Guide de la mosaïque (script.js) : une main blanche cernée d'encre glisse vers une tuile et la
   touche — onde cyan au bout du doigt, tuile en état de survol —, suivie d'une pastille de verre
   sombre qui dit le geste. Posée par-dessus la grille, elle ne capte aucun clic. */
.md .wrap{position:relative}
.md-guide{position:absolute;top:0;left:0;z-index:5;pointer-events:none;opacity:0}
.md-main{display:block;width:56px;height:56px;transform-origin:43% 9%;filter:drop-shadow(0 10px 16px rgba(20,14,60,.45))}
.md-main path{fill:#fff;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.md-main .pli{fill:none;stroke-width:1}
.md-lab{position:absolute;top:60px;left:40px;display:flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(26,20,64,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(20,14,60,.35);color:#fff;font:600 14px/1 var(--font);white-space:nowrap;opacity:0}
.md-lab::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:#5fd0e4;box-shadow:0 0 0 4px rgba(95,208,228,.28)}
.md-onde{position:absolute;z-index:4;width:72px;height:72px;margin:-36px 0 0 -36px;border:2px solid rgba(255,255,255,.9);border-radius:50%;background:radial-gradient(circle,rgba(95,208,228,.5),rgba(95,208,228,0) 70%);pointer-events:none;opacity:0}
@media(max-width:600px){
.md-main{width:44px;height:44px}
.md-lab{top:48px;left:28px;padding:9px 13px;font-size:13px}
}

/* Galerie plein écran (script.js) : nuit profonde éclairée par la photo elle-même — le fond
   d'ambiance est la photo courante, floutée. Chaque photo entre en fondu avec un léger recul,
   la barre de progression rythme le diaporama et se suspend au survol de la photo. */
.gal{position:fixed;inset:0;z-index:40;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;background:#070a24;color:#fff;animation:gal-in .35s ease both}
.gal-amb{position:absolute;inset:0;pointer-events:none}
.gal-amb img{width:100%;height:100%;object-fit:cover;opacity:.32;filter:blur(48px) saturate(1.25);transform:scale(1.2);animation:gal-in .8s ease both}
.gal-top{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 28px}
.gal-n{max-width:none;font:500 15px/1 var(--font);letter-spacing:2px;color:#aeb8e0;font-variant-numeric:tabular-nums}
.gal-n b{font-weight:700;color:#fff}
.gal-act{display:flex;gap:10px}
.gal-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,border-color .2s,scale .2s}
.gal-btn[hidden]{display:none}
body:has(.gal){overflow:hidden} /* la page ne défile pas sous la galerie, quelle que soit la largeur */
.gal-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.gal-btn:active{scale:.94}
.gal-btn:focus-visible{outline:2px solid #5fd0e4;outline-offset:3px}
.gal-btn .ico{width:20px;height:20px}
.gal-lect .ico{fill:currentColor}
.gal-prec .ico{rotate:180deg}
.gal-scene{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;min-height:0;padding:0 28px}
/* Colonnes fixées : une flèche masquée ne doit pas faire glisser la photo dans sa colonne */
.gal-prec{grid-column:1}
.gal-suiv{grid-column:3}
.gal-fig{grid-column:2;position:relative;height:100%;min-height:0;margin:0;touch-action:pan-y}
.gal-fig[aria-busy]::after{content:"";position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border:3px solid rgba(255,255,255,.2);border-top-color:#5fd0e4;border-radius:50%;animation:gal-tour .8s linear infinite}
.gal-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.05);filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));pointer-events:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1)}
.gal-img.on{opacity:1;transform:none}
.gal-vide{position:absolute;top:50%;left:50%;translate:-50% -50%;width:420px;max-width:100%;font:500 18px/28px var(--font);color:#d5dcf7;text-align:center}
.gal-bas{position:relative;display:grid;justify-items:center;gap:14px;padding:18px 28px 26px;text-align:center}
.gal-leg{min-height:24px;max-width:70ch;font:500 17px/24px var(--font);color:#e6ebff}
.gal-prog{width:420px;max-width:100%;height:3px;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.16)}
.gal-prog i{display:block;height:100%;background:#5fd0e4;transform:scaleX(0);transform-origin:0 50%;animation:gal-prog 5s linear forwards}
.gal:has(.gal-fig:hover) .gal-prog i{animation-play-state:paused}
@keyframes gal-in{from{opacity:0}}
@keyframes gal-prog{to{transform:scaleX(1)}}
@keyframes gal-tour{to{rotate:360deg}}
@media(max-width:600px){
.gal-top{padding:14px 16px}
.gal-btn{width:42px;height:42px}
.gal-scene{grid-template-columns:1fr;padding:0 12px}
.gal-fig{grid-column:1}
/* Sur téléphone, les flèches se posent sur la photo : la largeur va tout entière à l'image */
.gal-prec,.gal-suiv{position:absolute;top:50%;z-index:1;translate:0 -50%}
.gal-prec{left:16px}
.gal-suiv{right:16px}
.gal-bas{padding:14px 16px 20px}
.gal-leg{font-size:15px;line-height:22px}
}

/* Nous contacter : panneau unique bord à bord — portrait de radiologue à gauche, formulaire à
   droite. Fond blanc, seule respiration claire entre la médiathèque lavande et le pied de page
   violet nuit. La hauteur du panneau est celle du formulaire ; le min-height ne sert que si
   le formulaire devient plus court que la photo. */
.ct{padding:4.5rem 0;background:#fff}
.ct-panel{display:grid;grid-template-columns:1fr 1.1fr;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1)}
.ct-vis{position:relative;min-height:26rem}
/* Cadrage haut : en bande étroite comme en portrait, le visage reste dans la fenêtre visible */
.ct-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
/* Voile à 82 % : en dessous, le texte secondaire tomberait sous 4,5:1 sur la blouse blanche */
.ct-facts{position:absolute;inset:auto 1.1rem 1.1rem;display:grid;gap:.9rem;padding:1.15rem;background:rgba(34,27,78,.82);border-radius:var(--rs)}
.ct-fact{display:flex;align-items:flex-start;gap:.8rem;font-size:.9375rem;color:#c9c2e8}
.ct-fact .pic{width:2.3rem;height:2.3rem;background:rgba(255,255,255,.12);color:#5fd0e4}
.ct-fact b{display:block;color:#fff}
.ct-form{display:grid;align-content:center;gap:1rem;padding:clamp(1.5rem,3vw,2.2rem)}
.ct-form .lead{margin-bottom:.4rem} /* le chapeau ferme l'introduction, les champs commencent après */
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ct-form .btn{justify-self:start;margin-top:.3rem}
/* Champs : seule famille de formulaire de la page hors pied de page, reprise du design system */
.field{display:grid;gap:.4rem}
.field>label{font-size:.9375rem;font-weight:600;color:var(--ink)}
.input{width:100%;padding:.7rem 1rem;background:#fff;border:1px solid var(--line);border-radius:var(--rs);font:inherit;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--lav100)}
textarea.input{min-height:6.5rem;resize:vertical}
.choice{display:flex;align-items:flex-start;gap:.6rem;font-size:.9375rem}
.choice input{flex:none;width:1.05rem;height:1.05rem;margin-top:.25rem;accent-color:var(--primary)}

/* Pied de page : bandeau lettre d'information sous halo violet — la profondeur des fonds
   sombres passe par le halo, jamais par une ombre —, puis identité, réseaux et colonnes de
   liens, enfin la barre de mentions sur un fond d'un cran plus profond. */
.ft{background:var(--ink);color:#c9c2e8}
.ft a{color:#c9c2e8;text-decoration:none;transition:color .2s}
.ft a:hover{color:#fff}
.ft :focus-visible{outline-color:#5fd0e4} /* le cyan du système tomberait à 3,2:1 sur ce fond */
.ft-news{background:radial-gradient(58% 130% at 38% -10%,#3a2c86,transparent 62%);border-bottom:1px solid rgba(255,255,255,.1)}
.ft-news-in{display:grid;grid-template-columns:1fr 1fr;gap:2rem 3.5rem;align-items:center;padding-block:3.6rem}
.ft-news h2{color:#fff;max-width:20ch} /* échelon headline, hérité du socle */
.ft-news .mark{color:#5fd0e4} /* le cyan du système tomberait à 3,2:1 sur ce fond, comme pour le hero */
.ft-sub{display:grid;gap:1.2rem}
.ft-sub-t{display:flex;align-items:flex-start;gap:.9rem;font-size:.9375rem}
.ft-sub-t .pic{width:2.4rem;height:2.4rem;background:rgba(255,255,255,.08);color:#fff}
.ft-form{display:flex;align-items:center;gap:.5rem;padding:.4rem .4rem .4rem 1.3rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;transition:border-color .2s}
.ft-form:focus-within{border-color:rgba(255,255,255,.34)}
.ft-form input{flex:1;min-width:0;padding:.55rem 0;background:none;border:0;color:#fff;font:400 .9375rem var(--font)}
.ft-form input::placeholder{color:#c9c2e8;opacity:.62}
.ft-form input:focus{outline:0} /* l'anneau se pose sur la pilule entière, pas sur le champ nu */
.ft-form button{display:grid;place-items:center;flex:none;width:2.7rem;height:2.7rem;background:var(--primary);border:0;border-radius:var(--rs);color:#fff;cursor:pointer;transition:filter .2s}
.ft-form button:hover{filter:brightness(1.15)}
.ft-top{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:2.5rem 2.4rem;padding-block:3.4rem}
.ft-id{display:grid;justify-items:start;gap:1.1rem;max-width:24rem}
.ft .ft-logo{display:flex;align-items:center;gap:.7rem;font:700 1.3rem var(--font);color:#fff}
/* Le logo est une image carrée sur fond blanc : la pastille doit contenir sa diagonale
   (2 × 1,41 = 2,83 rem) pour que ses angles se fondent dans le blanc au lieu d'en déborder. */
.ft-mark{display:grid;place-items:center;flex:none;width:3rem;height:3rem;background:#fff;border-radius:50%}
.ft-mark img{width:2rem;height:auto}
.ft-id p{font-size:.9375rem}
.ft-soc{display:flex;gap:.6rem;list-style:none;padding:0}
.ft-soc a{display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid rgba(255,255,255,.2);border-radius:50%;transition:background .2s,border-color .2s}
.ft-soc a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.sico{width:1.05rem;height:1.05rem;fill:currentColor} /* glyphes de marque : pleins, hors set trait */
.ft-col h2{font-size:1rem;color:#fff}
.ft-col ul{display:grid;gap:.7rem;margin-top:1.3rem;list-style:none;padding:0}
.ft-col a{font-size:.9375rem}
.ft-contact p{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12);font-size:.9375rem}
.ft-base{background:rgba(0,0,0,.22);border-top:1px solid rgba(255,255,255,.08)}
.ft-base-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.8rem;padding-block:1.3rem;font-size:.875rem}
.ft-base ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;padding:0}

/* État vide, quand aucun événement n'est annoncé : mieux vaut le dire clairement que
   laisser une section muette. */
.empty{display:grid;justify-items:center;gap:.6rem;padding:3rem 2rem;border:1px dashed var(--line);border-radius:var(--r);background:var(--lav50);text-align:center;color:var(--muted)}
.empty .ico{width:1.8rem;height:1.8rem;color:var(--primary)}
.empty b{color:var(--ink)}

/* Menu en tiroir (tablette et mobile) : le panneau glisse de la droite sous un voile encre, le
   burger se mue en croix et reste cliquable par-dessus, le bouton de compte se cale au pied. */
@media(max-width:1000px){
.nav-in{display:flex;justify-content:space-between}
.burger{display:flex;position:relative;z-index:23}
.burger i{transition:translate .3s,rotate .3s,opacity .2s}
.nav.open .burger i:nth-child(1){translate:0 .43rem;rotate:45deg}
.nav.open .burger i:nth-child(2){opacity:0}
.nav.open .burger i:nth-child(3){translate:0 -.43rem;rotate:-45deg}
.nav::before{content:"";position:fixed;inset:0;z-index:21;background:rgba(34,27,78,.42);opacity:0;pointer-events:none;transition:opacity .35s}
.nav.open::before{opacity:1;pointer-events:auto} /* un clic sur le voile referme (script.js) */
.nav-links,.nav-in>.btn{position:fixed;z-index:22;transition:translate .42s cubic-bezier(.32,.72,0,1)}
.nav-links{inset:0 0 0 auto;width:min(20rem,85vw);display:grid;align-content:start;gap:.35rem;padding:5.2rem 1.6rem 7.5rem;background:#fff;box-shadow:var(--sh2);overflow-y:auto;translate:100% 0}
.nav-links::after{display:none} /* le filet suit une rangée horizontale : sans objet dans le tiroir */
.nav-links a{display:block;padding:.85rem .9rem;border-radius:var(--rs);font-size:1.05rem;font-weight:600;color:var(--ink)}
.nav-links a:hover{background:var(--lav50)}
.nav-links li{opacity:0;translate:12px 0;transition:opacity .25s,translate .25s}
.nav-in>.btn{display:inline-flex;right:1.6rem;bottom:1.6rem;width:calc(min(20rem,85vw) - 3.2rem);translate:calc(100% + 1.6rem) 0}
.nav.open :is(.nav-links,.nav-in>.btn){translate:0 0}
.nav.open .nav-links li{opacity:1;translate:0 0}
.nav.open .nav-links li:nth-child(1){transition-delay:.1s}
.nav.open .nav-links li:nth-child(2){transition-delay:.16s}
.nav.open .nav-links li:nth-child(3){transition-delay:.22s}
.nav.open .nav-links li:nth-child(4){transition-delay:.28s}
.nav.open .nav-links li:nth-child(5){transition-delay:.34s}
.nav.open .nav-links li:nth-child(6){transition-delay:.4s}
body.fige{overflow:hidden} /* le fond ne défile pas sous le tiroir ouvert */
/* À propos empilé : le texte d'abord, la photo ensuite, centrée */
.ab{padding:64px 0 56px}
.ab-in{grid-template-columns:1fr;padding:0 40px}
.ab h2{font-size:36px;line-height:44px}
.ab-vis{justify-self:center;width:100%;max-width:526px;margin-top:40px;padding-top:57px}
.ab-vis::before{top:0;left:-24px}
.ab-vis::after{top:auto;bottom:-40px;left:auto;right:-24px}
}
@media(max-width:900px){
/* La bande du compte à rebours wrappe : titre, métas et tuiles se centrent d'un bloc */
.count-inner{justify-content:center;text-align:center}
.count-info{justify-items:center}
.count-meta{justify-content:center}
.tiles{margin-inline:auto}
.team-head{grid-template-columns:1fr}
.team-grid{grid-template-columns:1fr 1fr}
.tcard:last-child:nth-child(3n+1){grid-column:auto} /* le centrage ne vaut que sur trois colonnes */
/* Mosaïque sur deux colonnes : les spans tiennent tels quels, mais les rangées doivent grandir
   pour que la vedette, désormais pleine largeur, garde un cadrage de vidéo et non une bande */
.md-grid{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(8rem,26vw,13rem)}
/* Le panneau de contact s'empile : la photo devient une bande, assez haute pour que l'encart
   posé dessus ne la mange pas entièrement */
.ct-panel{grid-template-columns:1fr}
.ct-vis{min-height:20rem}
.ft-news-in{grid-template-columns:1fr;gap:1.6rem}
.ft-top{grid-template-columns:1fr 1fr;gap:2.2rem}
.ag-head{grid-template-columns:1fr}
.ag-item{grid-template-columns:1fr;gap:0}
.ag-item img{aspect-ratio:16/9;height:auto}
.ag-txt{padding:1.1rem .6rem .4rem}
.ag-date{justify-items:start;align-self:auto;margin:0 .6rem 1.2rem;padding:0;border-left:0;text-align:left}
.ag-date b::after{margin-inline:0}
.spe{padding:72px 0 64px}
.spe h2{font-size:44px;line-height:52px}
.spe-lead{font-size:19px;line-height:30px}
.spe-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
/* Footer empilé : tout se centre — identité, réseaux, colonnes de liens et contact */
.ft-top{grid-template-columns:1fr;text-align:center}
.ft-id{justify-items:center;margin-inline:auto}
.ft-soc{justify-content:center}
.ft-base-in,.ft-base ul{justify-content:center;text-align:center}
.tiles{width:100%}
.tiles i{display:none}
.tile{flex:1;min-width:0}
}
@media(max-width:560px){
/* Les deux actions du hero tiennent côte à côte : texte 14px, paddings et gap resserrés
   (hauteur tactile conservée à 40px) */
.ctas{gap:.6rem}
.ctas .btn{padding:.72rem .66rem;font-size:.78rem}
.team-grid{grid-template-columns:1fr;max-width:21rem;margin-inline:auto} /* deux colonnes serreraient trop les portraits */
/* La porte de sortie passe en bande de pied de mosaïque : sur une demi-colonne, son libellé
   et sa pastille ne tiennent plus l'un au-dessus de l'autre */
.mt-out{grid-column:span 2}
.mt-out>a{grid-template-columns:1fr auto;align-content:center;align-items:center}
.ct-row{grid-template-columns:1fr} /* deux champs côte à côte tomberaient sous 10 caractères visibles */
.ab{padding:48px 0 40px}
.ab-in{padding:0 20px}
.ab-kick{gap:14px;font-size:14px;letter-spacing:2px}
.ab-kick::before{width:36px}
.ab h2{margin-top:24px;font-size:30px;line-height:38px}
.ab-p{font-size:17px;line-height:27px}
.ab-cards{grid-template-columns:1fr}
.acard{grid-template-columns:64px 1fr;column-gap:18px;padding:20px}
.ab-ico{width:64px;height:64px}
.ab-ico .ico{width:34px;height:34px}
.ab-lab{margin-top:30px;font-size:24px;line-height:30px}
.ab-iv{grid-template-columns:1fr}
.ab-iv>div{padding:20px}
.ab-iv>div+div{border-left:0;border-top:1px solid var(--line)}
.ab-vis::before{left:-12px;width:200px;height:240px}
.ab-vis::after{right:-12px}
.spe{padding:60px 0 56px}
.spe h2{font-size:34px;line-height:42px}
.spe-lead{font-size:17px;line-height:27px}
.spe-grid{grid-template-columns:1fr}
.spe-foot{font-size:17px;line-height:27px}
.spe-cta{width:100%;max-width:377px;height:60px;font-size:16px;gap:18px}
}
/* ─────────────────────────────────────────────────────────────────────────────
   PASTILLE DES COURS
   ─────────────────────────────────────────────────────────────────────────────

   Elle annonce les cours depuis n'importe quel endroit de la page, sans rien
   recouvrir de ce qui se lit. Son entrée se fait en deux temps : la pilule
   arrive libellé déployé, le temps qu'on sache ce qu'elle est, puis se rétracte
   en pastille et ne garde que son compte. Sans ce premier temps, un disque
   portant un chiffre n'apprend rien ; sans le second, un encart resterait
   ouvert en permanence sur la page. */
.cp{position:fixed;right:1.6rem;bottom:1.6rem;z-index:25;display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.cp[hidden]{display:none}

/* La pilule. Le dégradé du logo, comme le filet du menu : c'est la même
   signature qui désigne ce qui appartient au parcours de lecture. */
.cp-b{position:relative;display:flex;align-items:center;gap:.55rem;padding:.7rem 1.05rem;border:0;border-radius:999px;background:var(--grad);color:#fff;font:600 .9375rem/1 var(--font);cursor:pointer;box-shadow:0 6px 18px rgba(34,27,78,.28);transition:transform .25s,box-shadow .25s}
.cp-b:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(34,27,78,.34)}
.cp-b .ico{width:1.15rem;height:1.15rem}
.cp-n{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(255,255,255,.22);font-weight:700;font-variant-numeric:tabular-nums}
/* Le libellé se replie par la grille plutôt que par la largeur : une largeur
   « auto » ne s'anime pas, alors qu'une colonne de 1fr à 0fr le fait. */
.cp-lib{display:grid;grid-template-columns:1fr;transition:grid-template-columns .5s cubic-bezier(.32,.72,0,1)}
.cp-lib>span{overflow:hidden;white-space:nowrap}
.cp.mini .cp-lib{grid-template-columns:0fr}

/* L'onde : deux passages au moment de l'arrivée, puis plus rien. Elle attire
   l'œil sans rester en mouvement — une animation sans fin devient du bruit. */
.cp-b::after{content:"";position:absolute;inset:0;border-radius:999px;border:2px solid var(--primary);opacity:0;pointer-events:none}
.cp.entre .cp-b{animation:cp-arrive .62s cubic-bezier(.34,1.56,.64,1) both}
.cp.entre .cp-b::after{animation:cp-onde 1.5s ease-out .5s 2}

@keyframes cp-arrive{
from{opacity:0;transform:translateY(24px) scale(.82)}
to{opacity:1;transform:none}
}
@keyframes cp-onde{
from{opacity:.55;transform:scale(1)}
to{opacity:0;transform:scale(1.45)}
}

/* Le panneau : le dernier cours paru, et la porte du catalogue. */
.cp-p{position:relative;width:19rem;padding:1.1rem 1.15rem 1.2rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh2);transform-origin:bottom right;animation:cp-ouvre .28s cubic-bezier(.32,.72,0,1) both}
.cp-p[hidden]{display:none}
/* La puce de l'accueil est taillée pour la médiathèque, sur fond sombre : blanche sur
   blanc translucide. Sur le fond clair du panneau, elle s'efface — il lui faut ici les
   couleurs du design system, celles que portent les puces du catalogue. */
.cp-p .chip{margin-bottom:.5rem;background:var(--lav100);border-color:transparent;color:var(--primary)}
.cp-p h2{font-size:1.05rem;line-height:1.3}
.cp-p p{margin-top:.35rem;font-size:.875rem;color:var(--muted)}
.cp-p .btn{width:100%;margin-top:.9rem;padding:.6rem 1rem}
.cp-p .btn .ico{width:1rem;height:1rem;transition:translate .2s}
.cp-p .btn:hover .ico{translate:3px 0}

@keyframes cp-ouvre{
from{opacity:0;transform:translateY(10px) scale(.96)}
to{opacity:1;transform:none}
}

@media(max-width:600px){
.cp{right:1rem;bottom:1rem;left:1rem;align-items:stretch}
.cp-b{justify-content:center}
.cp-p{width:auto;max-width:none}
}

@media(prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}