/* ============================================================
   Gabarit Direct — /direct/
   Repris de maquettes/maquette-direct-byu-france.html (parties propres à la page).
   Bandeau « En direct » et point pulsant : assets/css/src/04-entete.css.
   ============================================================ */
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;font-stretch:112%;line-height:1.05;letter-spacing:-.015em}

/* ---------- Tête du direct ---------- */
.tete-direct{background:var(--nuit);color:var(--papier);position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(28px,4vw,48px) 0 clamp(32px,5vw,52px)}
.tete-direct::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle,rgba(159,180,232,.13) 38%,transparent 40%) 0 0/5px 5px,
    linear-gradient(100deg,var(--nuit) 30%,rgba(11,27,57,.86) 100%)}
.fil{font-size:.85rem;color:#9FB4E8;margin-bottom:18px}
.fil a{text-decoration:none}
.fil a:hover{color:#fff}
.fil span{margin:0 8px;opacity:.5}
.en-direct{display:inline-flex;align-items:center;background:var(--rouge);color:#fff;font-weight:800;
  font-size:.78rem;letter-spacing:.08em;padding:5px 12px 5px 10px;border-radius:2px;text-transform:uppercase}
.en-direct .point{background:#fff}
/* Ajout thème : états « avant » et « après », que la maquette ne montrait qu'en passant. */
.en-direct.avant{background:var(--bleu)}
.en-direct.apres{background:transparent;border:1px solid rgba(159,180,232,.5);color:#C6CEE0}
.tete-direct h1{font-weight:900;font-stretch:118%;line-height:.95;letter-spacing:-.03em;
  font-size:clamp(2.1rem,5.4vw,3.7rem);margin-top:14px;max-width:18ch}
.tete-direct .ou{margin-top:12px;color:#9FB4E8;font-size:1rem}

/* Tableau de bord : calculé (heure de départ + participations), jamais saisi */
.bord{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(159,180,232,.25);
  border:1px solid rgba(159,180,232,.25);margin-top:28px}
/* Ajout thème : moins de cinq cases → autant de colonnes que de cases. */
.bord.n4{grid-template-columns:repeat(4,1fr)}
.bord.n3{grid-template-columns:repeat(3,1fr)}
.bord.n2{grid-template-columns:repeat(2,1fr)}
.bord.n1{grid-template-columns:1fr}
.bord div{background:rgba(11,27,57,.72);padding:16px}
.bord b{display:block;font-size:clamp(1.5rem,3.2vw,2.3rem);font-style:italic;font-weight:900;
  font-stretch:118%;line-height:1;white-space:nowrap}
.bord i{font-style:normal;font-size:.75rem;color:#9FB4E8;display:block;margin-top:6px;line-height:1.35}
.bord .prochain b{color:#fff}
.bord .prochain{background:linear-gradient(180deg,rgba(224,42,34,.35),rgba(224,42,34,.08))}
.actions-direct{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn-chrono{font-size:1.12rem;padding:.9em 1.7em}
.actions-direct .note{font-size:.85rem;color:#8FA3D8;max-width:44ch;line-height:1.4}

/* ---------- Suivre ailleurs ---------- */
.ailleurs{background:#fff;border-bottom:1px solid var(--trait)}
.ailleurs .wrap{display:grid;grid-template-columns:auto repeat(4,1fr);gap:0;align-items:stretch}
/* Ajout thème : un autre nombre de liens que quatre → colonnes égales automatiques. */
.ailleurs .wrap.libre{grid-template-columns:auto;grid-auto-flow:column;grid-auto-columns:1fr}
.ailleurs .titre-ailleurs{font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--gris);
  align-self:center;padding-right:24px;text-transform:uppercase}
.lien-ext{display:flex;flex-direction:column;justify-content:center;padding:18px 20px;text-decoration:none;
  border-left:1px solid var(--trait);transition:background .15s}
.lien-ext:hover{background:var(--papier)}
.lien-ext b{font-weight:800;font-stretch:108%;font-size:1rem}
.lien-ext b::after{content:" ↗";color:var(--rouge-sombre)}
.lien-ext i{font-style:normal;font-size:.8rem;color:var(--gris)}
/* Demande de Ronan (15/09/2026, maquette parcours-finale) : tuile « Le parcours », lien
   interne vers le bloc parcours de la page Team France. */
.lien-ext.interne{background:#FFF5F4}
.lien-ext.interne:hover{background:#FFE9E7}
.lien-ext.interne b::after{content:" →"}

/* ---------- Le direct : fil + colonne ---------- */
.direct{padding:clamp(36px,5vw,64px) 0}
.direct .wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"fil cote";
  gap:clamp(28px,4vw,56px);align-items:start}
/* Ajout thème : sans moment fort (ni encouragements), le fil prend toute la largeur. */
.direct .wrap.sans-colonne{grid-template-columns:minmax(0,1fr);grid-template-areas:"fil"}
.colonne{grid-area:cote;position:sticky;top:92px;min-width:0}
.fil-direct{grid-area:fil;min-width:0}

.tete-fil{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:2px solid var(--encre)}
.filtre{display:flex;border:1px solid var(--trait);border-radius:2px;background:#fff}
.filtre button{background:none;border:none;padding:8px 14px;font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;color:var(--encre)}
.filtre button + button{border-left:1px solid var(--trait)}
.filtre button[aria-pressed="true"]{background:var(--encre);color:var(--papier)}
.maj{font-size:.82rem;color:var(--gris);margin-top:10px}

.nouveaux{width:100%;margin-top:16px;background:var(--bleu);color:#fff;border:none;
  border-radius:2px;padding:12px 16px;font:inherit;font-weight:800;cursor:pointer}
.nouveaux:hover{background:var(--bleu-clair)}

/* Message épinglé */
.epingle{background:#fff;border:1px solid var(--trait);border-top:3px solid var(--bleu);padding:18px 20px;margin-top:20px}
.epingle .etiq{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--bleu);text-transform:uppercase}
.epingle h3{font-size:1.08rem;margin:4px 0 6px}
.epingle p{font-size:.95rem;color:var(--gris)}
.epingle p + p{margin-top:8px}

/* Partenaires de l'équipe dans la tête de page (demande de Ronan, 11/10/2026 ; remplace la
   ligne grise sous les messages épinglés du 07/10). Logos en couleur sur pastilles blanches :
   leur fond blanc se confond avec la pastille. Ordinateur : à droite du titre, en 2 × 2 ;
   mobile : sous les boutons, en rangée. */
.tete-direct .wrap.avec-partenaires{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,4vw,56px);
  grid-template-areas:"titre partenaires" "bord bord" "actions actions"}
.avec-partenaires .tete-titre{grid-area:titre}
.avec-partenaires .bord{grid-area:bord}
.avec-partenaires .actions-direct{grid-area:actions}
.partenaires-tete{grid-area:partenaires;align-self:end}
.titre-partenaires{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9FB4E8;margin-bottom:10px}
.logos-partenaires{display:grid;grid-template-columns:repeat(2,150px);gap:10px}
.logos-partenaires a,.logos-partenaires .nom{display:flex;align-items:center;justify-content:center;height:84px;padding:8px 12px;
  background:#fff;border-radius:2px;color:var(--nuit);text-decoration:none;font-weight:800;font-stretch:108%;text-align:center;
  transition:transform .15s,box-shadow .15s}
.logos-partenaires a:is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.3)}
.logos-partenaires img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}

/* Séparateur de jour (maquette : texte en capitales ; ici en CSS, lu normalement) */
.jour{margin:34px 0 4px;font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--gris);
  display:flex;align-items:center;gap:12px;text-transform:uppercase;max-width:none}
.jour::after{content:"";flex:1;height:1px;background:var(--trait)}

/* Un message */
.message{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;padding:22px 0;border-bottom:1px solid var(--trait);
  scroll-margin-top:90px}
.message .quand{text-align:right;padding-top:2px}
.message .quand time{display:block;font-weight:900;font-style:italic;font-stretch:112%;font-size:1.3rem;line-height:1}
.message .quand span{display:block;font-size:.74rem;font-weight:700;color:var(--gris);margin-top:5px;letter-spacing:.03em;text-transform:uppercase}
.message h3{font-size:1.14rem;font-weight:800;font-stretch:106%;line-height:1.25}
.message .texte{margin-top:8px}
.message .texte p + p{margin-top:10px}
.message figure{margin-top:14px}
.message figure img{width:auto;max-height:720px;height:auto}
.message figcaption{font-size:.8rem;color:var(--gris);margin-top:6px}
.message .video{display:block;margin-top:14px;max-width:360px;width:100%;height:auto;background:var(--nuit)}
/* Demande de Ronan (14/09) : pas de « Partager » par message (maquette), un bouton pour toute
   la page dans la tête du direct. Bouton fantôme des maquettes, en police du bouton rouge. */
.partager-direct{font:inherit;font-weight:700;font-stretch:108%;cursor:pointer}
.partager-direct.copie{border-color:#3CC36B;color:#fff}

/* Moment fort : repère rouge, visible d'un coup d'œil */
.message.fort{background:#fff;border:1px solid var(--trait);border-left:5px solid var(--rouge);
  padding:22px 20px 22px 0;margin:14px 0}
.message.fort .quand time{color:var(--rouge-sombre)}
.badge-fort{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.08em;background:var(--rouge);
  color:#fff;padding:3px 8px;border-radius:2px;margin-bottom:8px;text-transform:uppercase}
/* Message arrivé en direct : bref surlignage (coupé si prefers-reduced-motion) */
.message.arrive{animation:arrive 2.5s ease-out}
@keyframes arrive{0%{background:#EAF0FB}100%{background:transparent}}
.message.fort.arrive{animation:none}

.vide{margin-top:22px;padding:20px;background:#fff;border:1px dashed var(--trait);color:var(--gris);font-size:.95rem;max-width:none}
.plus-anciens{margin-top:26px;display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.plus-anciens a{font-weight:700;color:var(--bleu)}

/* ---------- Colonne : encourager + moments forts ---------- */
.carte-cote{background:#fff;border:1px solid var(--trait);padding:22px}
.carte-cote + .carte-cote{margin-top:20px}
.carte-cote h2{font-size:1.2rem;margin-bottom:6px}
.carte-cote .sous{font-size:.88rem;color:var(--gris);line-height:1.45}

.emojis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.emoji{position:relative;background:var(--papier);border:1px solid var(--trait);border-radius:2px;
  padding:10px 4px 8px;text-align:center;font:inherit;color:var(--encre);transition:border-color .15s,transform .1s}
button.emoji{cursor:pointer}
button.emoji:hover{border-color:var(--bleu)}
button.emoji:active{transform:scale(.94)}
.emoji .e{display:block;font-size:1.7rem;line-height:1.1}
.emoji .n{display:block;font-size:.78rem;font-weight:800;margin-top:4px}
.emoji .n.saut{animation:saut .35s ease-out}
@keyframes saut{0%{transform:scale(1)}40%{transform:scale(1.35);color:var(--rouge-sombre)}100%{transform:scale(1)}}
.total{margin-top:14px;font-size:.9rem;color:var(--gris)}
.total b{font-style:italic;font-weight:900;font-stretch:112%;font-size:1.25rem;color:var(--encre)}
.lien-insta{margin-top:14px;padding-top:14px;border-top:1px solid var(--trait);font-size:.9rem;color:var(--gris)}
.lien-insta a{font-weight:700;color:var(--bleu)}

/* Émoji qui s'envole (coupé si prefers-reduced-motion, avec toutes les animations) */
.envol{position:fixed;z-index:80;pointer-events:none;font-size:1.8rem;animation:envol 1.1s ease-out forwards}
@keyframes envol{0%{opacity:1;transform:translate(-50%,-50%) scale(.8)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-170px) scale(1.4)}}

.forts{list-style:none;margin-top:12px}
.forts li{border-top:1px solid var(--trait)}
.forts a{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:10px 0;text-decoration:none;font-size:.92rem;line-height:1.3}
.forts a:hover b{color:var(--bleu)}
.forts time{font-weight:900;font-style:italic;color:var(--rouge-sombre)}
.forts time em{display:block;font-style:normal;font-weight:700;font-size:.7rem;color:var(--gris)}


/* ---------- Coureur par coureur ---------- */
.en-course{background:var(--nuit);color:var(--papier);padding:clamp(44px,6vw,76px) 0}
.en-course h2{color:var(--papier)}
.en-course .intro{color:#9FB4E8;margin:10px 0 26px}
.equipe{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  border-top:1px solid rgba(159,180,232,.2);border-left:1px solid rgba(159,180,232,.2)}
.membre{border-right:1px solid rgba(159,180,232,.2);border-bottom:1px solid rgba(159,180,232,.2);display:grid;
  grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:12px 14px}
.membre .vignette{width:42px;height:42px;border-radius:50%;overflow:hidden;background:var(--bleu);border:2px solid rgba(159,180,232,.45);
  display:grid;place-items:center;font-weight:900;font-style:italic;font-size:.8rem;color:#fff}
.membre .vignette img{width:100%;height:100%;object-fit:cover;object-position:center top}
.membre b{display:block;font-weight:800;font-size:.95rem;line-height:1.2}
.membre i{font-style:normal;font-size:.76rem;color:#9FB4E8;white-space:pre-line;line-height:1.4;display:block}
.membre i.oui::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#3CC36B;margin-right:6px}
.membre.arrete{opacity:.55}
.membre.arrete .vignette{background:#2A3550}
.pouce{position:relative;background:rgba(244,243,239,.08);border:1px solid rgba(159,180,232,.35);color:#fff;
  border-radius:2px;padding:6px 9px;font:inherit;font-weight:800;font-size:.82rem;white-space:nowrap}
button.pouce{cursor:pointer}
button.pouce:hover{border-color:#fff}
.legende{margin-top:16px;font-size:.82rem;color:#8FA3D8}

/* Demande de Ronan (07/10/2026), pas de maquette : message à un coureur, sous la liste.
   Champs sur fond nuit ; contrastes ≥ 4,5:1 (texte clair sur #0B1B39). */
.mot-coureur{margin-top:clamp(32px,4vw,48px);padding-top:clamp(24px,3vw,36px);border-top:1px solid rgba(159,180,232,.2);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(20px,4vw,56px);scroll-margin-top:90px}
.mot-tete h3{color:var(--papier);font-size:1.4rem;font-weight:900;font-stretch:108%}
.mot-tete p{color:#9FB4E8;margin-top:8px;font-size:.95rem}
.mot-avis{grid-column:1/-1;padding:12px 16px;border-radius:2px;font-weight:700;max-width:none}
.mot-avis.succes{background:rgba(60,195,107,.15);border:1px solid #3CC36B;color:#fff}
.mot-avis.echec{background:rgba(224,42,34,.15);border:1px solid var(--rouge);color:#fff}
.mot-formulaire{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.mot-formulaire .champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.mot-formulaire .champ.large,.mot-formulaire .envoi{grid-column:1/-1}
.mot-formulaire label{font-weight:700;font-size:.88rem;color:var(--papier)}
.mot-formulaire input,.mot-formulaire select,.mot-formulaire textarea{font:inherit;font-size:1rem;color:var(--encre);background:#fff;
  border:1px solid #9FB4E8;border-radius:2px;padding:10px 12px;width:100%}
.mot-formulaire textarea{resize:vertical;min-height:96px}
.mot-formulaire [aria-invalid="true"]{border:2px solid #FF8A84}
.mot-formulaire .aide{font-size:.8rem;color:#9FB4E8}
.mot-formulaire .erreur{font-size:.85rem;font-weight:700;color:#FFB4AF}
.mot-formulaire .btn{border:none;cursor:pointer;font:inherit;font-weight:700}
.leurre{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------- Classement des nations ----------
   Demande de Ronan (11/10/2026), maquette direct-mobile : feuille officielle, aussi sur ordinateur. */
.classement{padding:clamp(44px,6vw,76px) 0;border-bottom:1px solid var(--trait)}
.classement .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,4vw,56px);align-items:start}
.maj-classement{font-size:.82rem;color:var(--gris);margin-top:8px}
.france{margin-top:22px;background:var(--bleu);color:#fff;border-radius:2px;padding:16px 18px;display:grid;
  grid-template-columns:auto 1fr;gap:4px 16px;align-items:center}
.france[hidden]{display:none}
.france .rang{grid-row:span 2;font-size:2.8rem;font-weight:900;font-style:italic;font-stretch:115%;line-height:1}
.france sup,.chiffre sup{font-size:.5em;line-height:0;vertical-align:.75em}
.france b{font-weight:800;font-size:1.02rem;line-height:1.25}
.france i{font-style:normal;font-size:.84rem;color:#C9D6F6;line-height:1.35}
.nations{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--trait);font-size:.95rem}
.nations th{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);text-align:left;
  padding:9px 16px;border-bottom:1px solid var(--trait)}
.nations td{padding:9px 16px;border-bottom:1px solid var(--trait)}
.nations td:first-child{font-weight:900;font-style:italic;width:56px}
.nations td:nth-child(n+3),.nations th:nth-child(n+3){text-align:right}
.nations tr.fra td{background:#E6ECFA;font-weight:800;color:var(--bleu)}
.nations tr.saut td{text-align:center;color:var(--gris);padding:2px}
.note-classement{font-size:.82rem;color:var(--gris);margin-top:12px}

/* ---------- Barre du bas et panneaux : mobile seulement (maquette direct-mobile) ----------
   Les blocs « Encourager » et « Classement » de la page deviennent des panneaux ouverts par la
   barre. Le panneau « Voir le suivi » s'ouvre aussi sur ordinateur, en fenêtre, depuis le lien
   placé au-dessus de l'encadré des émojis (demande de Ronan, 11/10/2026). */
.pied-direct,.voile-direct,.suivi,.fermer-panneau,.liens-panneau{display:none}

/* Lien « Suivi live de nos 15 coureurs » en tête de colonne (ordinateur). */
.lien-suivi{display:block;margin-bottom:20px;padding:16px 20px;background:var(--bleu);color:#fff;text-decoration:none;
  border-radius:2px;transition:background .15s}
.lien-suivi:hover{background:var(--nuit)}
.lien-suivi b{display:block;font-weight:800;font-stretch:108%;font-size:1.05rem;line-height:1.25}
.lien-suivi b::after{content:" →"}
.lien-suivi i{display:block;font-style:normal;font-size:.82rem;color:#C9D6F6;margin-top:4px}

/* Bouton de fermeture : collé en haut du panneau pendant le défilement ; marge négative :
   le flottant ne réduit pas la largeur du contenu qui suit. */
.fermer-panneau{place-items:center;position:sticky;top:10px;float:right;z-index:2;
  margin:10px 12px -48px 8px;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--trait);
  font:inherit;font-size:1.3rem;line-height:1;color:var(--encre);cursor:pointer}
.liens-panneau button,.liens-panneau a{display:block;text-align:center;text-decoration:none;font:inherit;font-weight:700;
  font-size:.92rem;padding:11px;border-radius:2px;border:2px solid var(--bleu);color:var(--bleu);background:#fff;cursor:pointer}

/* Contenu du panneau « Voir le suivi » : les Français, en course d'abord. */
.tete-suivi{padding:16px var(--gouttiere) 12px;border-bottom:1px solid var(--trait)}
.tete-suivi h2{font-size:1.3rem}
.resume{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--trait);border-bottom:1px solid var(--trait)}
.resume div{background:#fff;padding:10px 12px}
.resume b{display:block;font-size:1.35rem;font-weight:900;font-style:italic;font-stretch:112%;line-height:1}
.resume i{font-style:normal;font-size:.7rem;color:var(--gris);line-height:1.25;display:block;margin-top:3px}
.separateur{padding:12px var(--gouttiere) 6px;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.separateur[hidden]{display:none}
.coureurs{list-style:none}
.coureurs li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:9px var(--gouttiere);border-bottom:1px solid var(--trait);background:#fff}
.coureurs .dos{font-size:.72rem;font-weight:800;color:var(--gris);text-align:center}
.coureurs b{display:block;font-size:.93rem;font-weight:800;line-height:1.2}
.coureurs i{font-style:normal;font-size:.78rem;color:var(--gris);white-space:pre-line;line-height:1.4;display:block}
.coureurs i.oui::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#2E9E55;margin-right:6px}
.coureurs li.arrete{background:var(--papier)}
.coureurs li.arrete b{color:var(--gris)}
.suivi .pouce{background:var(--papier);border-color:var(--trait);color:var(--encre);min-width:62px}
.suivi .liens-panneau{padding:0 var(--gouttiere)}

/* Ordinateur : le suivi en fenêtre centrée. */
@media (min-width:901px){
  .voile-direct{display:block;position:fixed;inset:0;z-index:85;background:rgba(11,27,57,.55)}
  .voile-direct[hidden]{display:none}
  .suivi.panneau-direct{display:block;position:fixed;top:50%;left:50%;z-index:90;width:min(600px,calc(100vw - 48px));
    max-height:min(84vh,820px);overflow-y:auto;overscroll-behavior:contain;background:var(--papier);border-radius:6px;
    padding-bottom:16px;opacity:0;visibility:hidden;transform:translate(-50%,-47%);
    transition:opacity .2s,transform .2s,visibility 0s .2s}
  .suivi.panneau-direct.ouvert{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:opacity .2s,transform .2s}
  .suivi:focus{outline:none}
  .suivi .fermer-panneau{display:grid}
  .suivi .liens-panneau{display:grid;margin-top:16px}
}

/* ---------- Écrire aux coureurs ---------- */
.ecrire{padding:clamp(40px,5vw,64px) 0;background:#fff;border-bottom:1px solid var(--trait)}
.ecrire .wrap{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.ecrire p{color:var(--gris);margin-top:10px}
.ecrire .boutons{display:flex;gap:12px;flex-wrap:wrap}
.btn-bleu{background:var(--bleu);border-color:var(--bleu)}
.btn-bleu:hover{background:var(--nuit);border-color:var(--nuit)}

@media (max-width:1000px){
  .bord,.bord.n4{grid-template-columns:repeat(3,1fr)}
  .ailleurs .wrap,.ailleurs .wrap.libre{grid-template-columns:repeat(2,1fr);grid-auto-flow:row}
  .ailleurs .titre-ailleurs{grid-column:1/-1;padding:16px 0 4px}
  .lien-ext{border-left:none;border-top:1px solid var(--trait);padding:14px 0}
}
@media (max-width:900px){
  .direct .wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"cote" "fil"}
  .colonne{position:static}
  /* Mobile : les moments forts défilent à l'horizontale, au-dessus du fil */
  .forts{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
  .forts li{flex:0 0 72%;border:1px solid var(--trait);scroll-snap-align:start;background:var(--papier)}
  .forts a{padding:10px 12px}
  .ecrire .wrap{grid-template-columns:1fr}
  .mot-coureur{grid-template-columns:minmax(0,1fr)}
  .classement .wrap{grid-template-columns:minmax(0,1fr)}
  .tete-direct .wrap.avec-partenaires{display:block}
  .partenaires-tete{margin-top:26px}
  .logos-partenaires{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .logos-partenaires a,.logos-partenaires .nom{height:68px}

  /* Barre du bas : ligne d'état (boucle, prochain départ) + trois boutons. */
  :root{--pied-direct:calc(98px + env(safe-area-inset-bottom))}
  body:has(.pied-direct){padding-bottom:var(--pied-direct)}
  .pied-direct{display:block;position:fixed;left:0;right:0;bottom:0;z-index:75}
  .etat-direct{display:flex;justify-content:space-between;align-items:center;gap:10px;max-width:none;background:var(--nuit);
    color:#fff;font-size:.82rem;font-weight:700;padding:7px var(--gouttiere);border-top:1px solid rgba(159,180,232,.25);line-height:1.4}
  .etat-direct .point{width:7px;height:7px;background:var(--rouge);display:inline-block;margin-right:7px;vertical-align:1px}
  .etat-direct .prochain{color:#9FB4E8;font-weight:600}
  .etat-direct .prochain b{color:#fff;font-weight:900;font-style:italic;font-size:.98rem;margin-left:4px}
  .barre-direct{display:flex;background:#fff;border-top:1px solid var(--trait);
    height:calc(62px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
  .barre-direct a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;
    text-decoration:none;font-size:.76rem;font-weight:700;color:var(--gris);white-space:nowrap}
  .barre-direct .chiffre{font-size:1.18rem;font-weight:900;font-style:italic;font-stretch:112%;color:var(--encre);line-height:1}
  .barre-direct a[aria-expanded="true"]{color:var(--bleu)}
  .barre-direct a[aria-expanded="true"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;background:var(--bleu)}
  .barre-direct .encourager{flex:1.35 1 0;flex-direction:row;gap:6px;background:var(--rouge);color:#fff;margin:8px 10px 8px 4px;
    border-radius:2px;font-size:.92rem;font-weight:800;font-stretch:108%}
  .barre-direct .encourager[aria-expanded="true"]{background:var(--rouge-sombre);color:#fff}
  .barre-direct .encourager[aria-expanded="true"]::before{display:none}
  .barre-direct .encourager .e{font-size:1.3rem}

  /* Panneaux : glissent au-dessus de la barre ; un seul ouvert à la fois (assets/js/direct.js). */
  .voile-direct{display:block;position:fixed;inset:0;z-index:65;background:rgba(11,27,57,.5)}
  .voile-direct[hidden]{display:none}
  .panneau-direct{position:fixed;left:0;right:0;bottom:var(--pied-direct);z-index:70;margin:0;
    max-height:calc(100dvh - var(--pied-direct) - 64px);overflow-y:auto;overscroll-behavior:contain;
    background:var(--papier);border:none;border-radius:10px 10px 0 0;
    transform:translateY(calc(100% + var(--pied-direct)));visibility:hidden;transition:transform .25s ease-out,visibility 0s .25s}
  .panneau-direct.ouvert{transform:none;visibility:visible;transition:transform .25s ease-out}
  .panneau-direct:focus{outline:none}
  .panneau-direct .fermer-panneau{display:grid}
  .panneau-direct .liens-panneau{display:grid;gap:8px;margin-top:16px}
  /* La barre donne déjà accès au suivi. */
  .lien-suivi.avec-barre{display:none}

  /* Panneau « Encourager » : l'encadré des émojis de la colonne. */
  .carte-cote.panneau-direct{padding:18px var(--gouttiere) 20px}
  .carte-cote.panneau-direct h2{padding-top:4px}

  /* Panneau « Classement » : la section du classement. */
  .classement.panneau-direct{padding:0 0 18px}
  .classement.panneau-direct .wrap{display:block;padding:0}
  .classement.panneau-direct .tete-classement{padding:16px var(--gouttiere) 0}
  .classement.panneau-direct h2{font-size:1.3rem}
  .classement.panneau-direct .france{margin:14px 0}
  .classement.panneau-direct .nations{border-left:none;border-right:none;font-size:.88rem}
  .classement.panneau-direct .note-classement{padding:0 var(--gouttiere)}

  /* Panneau « Voir le suivi ». */
  .suivi{display:block;padding-bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  .panneau-direct,.panneau-direct.ouvert{transition:none}
}
@media (max-width:560px){
  .bord,.bord.n4,.bord.n3{grid-template-columns:repeat(2,1fr)}
  .bord > div:last-child:nth-child(odd){grid-column:1/-1}
  .message{grid-template-columns:minmax(0,1fr);gap:6px}
  .message .quand{text-align:left;display:flex;gap:10px;align-items:baseline}
  .message .quand span{margin-top:0}
  .message.fort{padding:18px 16px}
  .btn-chrono{width:100%;text-align:center}
  .mot-formulaire{grid-template-columns:minmax(0,1fr)}
}