/* Page « L'équipe en direct » : même identité que l'accueil (polices, fond, marque, pied de page).
   La charte d'Iris (media/direct/da-equipe-en-direct.css, classe eed sur la page) règle la scène et donne
   les couleurs des membres (classes m-<id>, variable --m) ; ce fichier n'écrit aucune couleur de membre. */
/* Polices de la charte d'Iris : Saira pour les bulles et les noms de la scène, Inter pour l'heure des bulles */
@font-face{font-family:'Saira';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/saira-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Saira';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/saira-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{--ink:#eaf0fa;--muted:#a3aec4;--navy:#0c1324;--line:rgba(226,236,255,.13);--cyan:#83e3d4}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--navy);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;line-height:1.55}
/* Le texte de la page garde la police de l'accueil ; bulles et noms de la scène ont celles de la charte */
body.eed{font-family:'DM Sans',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
::selection{background:#83e3d4;color:#0c1324}
.shell{width:min(1160px,calc(100% - 48px));margin:auto}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--cyan);color:#0a2029;padding:10px 16px;border-radius:8px;font-weight:700}
.skip:focus{top:12px}
.cache{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* En-tête et pied de page : ceux de l'accueil */
.top{border-bottom:1px solid var(--line);background:rgba(12,19,36,.88)}
.nav{min-height:83px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font:700 1.17rem 'Space Grotesk',sans-serif;letter-spacing:-.04em}
.brand-name{white-space:nowrap}
.brand-dot{color:var(--cyan)}
.brand-mark{width:33px;height:33px;display:grid;place-items:center;background:var(--cyan);color:var(--navy);border-radius:10px;transform:rotate(-12deg);font-size:22px}
.brand-mark span{transform:rotate(12deg)}
.nav-lien{color:#bac5d8;font-size:.89rem;border-bottom:1px solid #6b809e;padding-bottom:2px}
.nav-lien:hover{color:var(--cyan);border-color:var(--cyan)}
footer{border-top:1px solid var(--line);padding:28px 0;color:#899ab2;font-size:.8rem}
.foot{display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap}
.foot strong{color:#eaf0fa}
.foot a{border-bottom:1px solid #6b809e}
.foot a:hover{color:var(--cyan)}

/* Haut de page : titre, phrase et ligne d'état */
.intro{padding:72px 0 30px;background:radial-gradient(ellipse 52% 60% at 15% -20%,rgba(62,166,158,.14),transparent 95%)}
.eyebrow{font-size:.84rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:12px}
.eyebrow:before{content:'';width:27px;height:1px;background:currentColor}
h1{font:600 clamp(2.7rem,6.4vw,5rem)/1 'Space Grotesk',sans-serif;letter-spacing:-.065em;margin:20px 0 18px}
.lead{max-width:600px;margin:0;color:#b7c2d4;font-size:1.08rem;line-height:1.7}
.etat-direct{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:24px 0 0}
.ligne-etat{display:inline-flex;align-items:center;gap:11px;margin:0;padding:9px 16px;border:1px solid var(--line);border-radius:18px;background:#111a2d;color:#c9d3e3;font-size:.9rem;line-height:1.45}
.point{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:#6b7a93}
.ligne-etat.direct .point{background:#4ade80}
.ligne-etat.direct .point:after{content:'';position:absolute;inset:0;border-radius:50%;background:#4ade80;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.7}to{transform:scale(2.8);opacity:0}}
/* Mettre en pause / Reprendre, à côté de la ligne d'état ; en pause, le point ne pulse plus */
.pause{padding:9px 16px;border:1px solid var(--line);border-radius:18px;background:none;color:#c9d3e3;font:inherit;font-size:.9rem;line-height:1.45;cursor:pointer}
.pause:hover,.pause[aria-pressed="true"]{color:var(--cyan);border-color:var(--cyan)}
.pause:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.ligne-etat.fige .point:after{display:none}

/* La scène du QG (direct/scene.js), en complément de la charte : décor 16:9 en entier à toutes les tailles.
   Sans décor (le manifeste n'en nomme pas, ou les places d'Iris manquent), qg.webp n'est pas demandé : un fond calme
   à la place. */
.qg:not(.decor){background-image:radial-gradient(ellipse 70% 60% at 50% 45%,color-mix(in srgb,var(--eed-equipe) 7%,transparent),transparent)}
/* Grille d'un coin du repli (direct/scene.js, sans les places d'Iris) : le pas d'un jeton et de son nom, en pixels
   d'écran, car jeton et nom ont une taille minimale ; ils ne se touchent jamais, même à 9 dans le même coin */
.qg{--jeton:max(18px,calc(56 * var(--eed-px)));--pas-x:max(76px,calc(100 * var(--eed-px)));--pas-y:calc(var(--jeton) + 16 * var(--eed-px) + 24px)}
/* Direct en pause ou coupé : les dernières places restent, immobiles ; seuls le décor et les personnages
   s'atténuent, les noms et les bulles gardent leur contraste */
.qg.attenue::before{content:'';position:absolute;inset:0;background:color-mix(in srgb,var(--eed-void) 45%,transparent);pointer-events:none}
.qg.attenue .qg-membre{filter:saturate(.35) brightness(.8)}
.qg.attenue .qg-membre,.qg.attenue .bulle::before{animation-play-state:paused}
/* Pause demandée par le visiteur (WCAG 2.2.2) : plus aucune animation ni transition dans la scène */
.qg.fige *,.qg.fige *::before,.qg.fige *::after{animation:none!important;transition:none!important}
/* Le nom suit son membre pendant le trajet ; direct/scene.js donne à chaque tronçon sa durée (longueur ÷ vitesse),
   en ligne, au membre et à son nom, à la place des 2,4 s d'ici et de .qg-membre.trajet dans la charte */
.qg .nom.trajet{transition:left 2.4s linear,top 2.4s linear}
/* Bande d'une seule image, ou repli sans bande : pas d'animation ; le repli n'est jamais retourné */
.qg-membre.fixe,.qg-membre.repli{animation:none}
.qg-membre.repli.vers-droite{scale:none}
/* Repli : le mini-portrait en rond, de la taille d'une tête, posé au-dessus de l'ancre (80,150) */
.qg-membre .tete{display:none}
.qg-membre.repli .tete{position:absolute;left:50%;bottom:calc(10 * var(--eed-px));translate:-50% 0;display:grid;place-items:center;width:var(--jeton);aspect-ratio:1;overflow:hidden;border-radius:50%;border:max(1.5px,calc(3 * var(--eed-px))) solid var(--m,var(--eed-equipe));background:var(--eed-verre);color:var(--m,var(--eed-equipe));font:700 max(10px,calc(26 * var(--eed-px)))/1 var(--eed-hud)}
.qg-membre .tete img{display:block;width:100%;height:100%;object-fit:cover}
/* Bulle centrée sur sa pointe (charte) : près d'un bord du décor, direct/scene.js la glisse vers l'intérieur
   de --glisse ; sa flèche revient d'autant et reste sur la pointe */
.bulle{margin-left:var(--glisse,0px)}
.bulle::after{translate:calc(-1 * var(--glisse,0px)) 0}

/* La liste des membres, lisible sans la scène */
.liste{padding:48px 0 80px}
h2{font:600 clamp(1.7rem,3vw,2.3rem)/1.15 'Space Grotesk',sans-serif;letter-spacing:-.05em;margin:0 0 20px}
/* Chaque carte porte m-<id> (couleur --m de la charte) ; un membre sans couleur prend le turquoise de l'équipe */
.membres{--m:var(--eed-equipe);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.membres:empty{min-height:270px}
.membre{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px;border-radius:14px;border:1px solid color-mix(in srgb,var(--m),transparent 70%);background:linear-gradient(135deg,color-mix(in srgb,var(--m),transparent 91%),#151f32 62%)}
.portrait{width:48px;height:48px;border-radius:50%;overflow:hidden;display:grid;place-items:center;border:2px solid var(--m);background:#1c2a44;color:var(--m);font:600 1.3rem 'Space Grotesk',sans-serif}
.portrait img{display:block;width:100%;height:100%;object-fit:cover}
.membre h3{margin:2px 0 0;font:600 1.12rem/1.25 'Space Grotesk',sans-serif;letter-spacing:-.03em;color:var(--m)}
.membre .etat{margin:3px 0 0;color:#dce6f5;font-size:.93rem;line-height:1.4}
.membre .depuis{color:var(--muted);white-space:nowrap}
/* Direct en pause ou coupé : les dernières nouvelles restent ; seuls le portrait et le fond de la carte
   s'atténuent, jamais ses textes (contraste d'au moins 4,5:1) */
.membres.attenue .membre{border-color:var(--line);background:#151f32}
.membres.attenue .portrait{filter:saturate(.35)}
.membres.attenue .portrait img{opacity:.7}
.note{margin:20px 0 0;max-width:640px;color:var(--muted);font-size:.86rem}

@media(max-width:1100px){.membres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.shell{width:min(100% - 34px,570px)}.nav{min-height:70px}.intro{padding:52px 0 24px}.liste{padding:40px 0 64px}}
/* Format haut : le décor reste 16:9 et en entier, en pleine largeur ; la liste dessous reste la lecture principale
   et montre les bulles, masquées dans la scène pour qu'elles ne se recouvrent pas */
@media(max-width:639.98px){.scene.shell{width:100%}.qg{border-radius:0}.qg .bulle{display:none}.membres{grid-template-columns:1fr}.membres:empty{min-height:836px}.lead{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.ligne-etat.direct .point:after{animation:none;display:none}.bulle--attend::before{animation:none}}