/* En Diagonale : feuille unique, d'apres la maquette d'octobre 2026.
   Couleurs relevees sur le logo (bleu #002966, jaune #fdc308) et sur la
   maquette (en-tete #031e5c). */
:root {
  --nuit: #031e5c;
  --nuit-2: #0a2a75;
  --bleu: #002966;
  --bleu-vif: #1d4ed8;
  --jaune: #fdc308;
  --jaune-pale: #fff7d9;
  --jaune-bord: #f7dc7a;
  --rouge: #e11d2e;
  --vert: #2e7d32;
  --texte: #1c2333;
  --gris: #5b6478;
  --trait: #e4e7ef;
  --fond: #f4f6fb;
  --blanc: #fff;
  --rayon: 12px;
  --ombre: 0 4px 18px rgba(3, 30, 92, .08);
  --titres: "Oswald", "Arial Narrow", sans-serif;
  --corps: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 18px/1.65 var(--corps); }
img, iframe, video { max-width: 100%; }
img { height: auto; }
a { color: var(--bleu-vif); text-underline-offset: 2px; }
a:hover { color: var(--bleu); }
h1, h2, h3, h4 { font-family: var(--titres); font-weight: 600; line-height: 1.15; color: var(--bleu); }
h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); margin: 0 0 .8rem; }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin: 2.2rem 0 .8rem; }
h3 { font-size: 1.3rem; margin: 1.6rem 0 .5rem; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--jaune); padding: .5rem 1rem; }

/* ------------------------------------------------------------ en-tete */
.entete { background: var(--nuit); position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.entete-in { max-width: 1240px; margin: 0 auto; padding: 0 16px; min-height: 72px; display: flex; align-items: center; gap: 1.5rem; }
.marque { display: block; flex: none; line-height: 0; }
.marque img { height: 42px; width: auto; }
.menu-bouton { display: none; background: none; border: 0; color: var(--blanc); padding: .4rem; cursor: pointer; line-height: 0; }
.menu-bouton .ic { width: 28px; height: 28px; }
.menu { margin-left: auto; }
.menu > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.menu li { position: relative; list-style: none; }
.menu a { display: block; color: var(--blanc); text-decoration: none; padding: 1.55rem .62rem; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.menu > ul > li > a:hover, .menu > ul > li > a.actif { color: var(--jaune); }
.menu > ul > li > a.actif { box-shadow: inset 0 -3px 0 var(--jaune); }
.menu li ul { display: none; position: absolute; left: 0; top: 100%; min-width: 270px; padding: .5rem 0; margin: 0; background: var(--blanc); border-radius: 0 0 var(--rayon) var(--rayon); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.menu li ul a { color: var(--texte); font-weight: 400; padding: .5rem 1.1rem; white-space: normal; }
.menu li ul a:hover { color: var(--bleu); background: var(--fond); }
.menu li:hover > ul, .menu li:focus-within > ul { display: block; }
.menu-live > a { color: var(--jaune) !important; }
.menu-live > a::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .45em; border-radius: 50%; background: var(--rouge); animation: clignote 1.4s infinite; vertical-align: .05em; }

@media (max-width: 1080px) {
  .entete-in { min-height: 60px; justify-content: center; position: relative; }
  .menu-bouton { display: block; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
  .marque img { height: 34px; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--nuit); max-height: calc(100vh - 60px); overflow-y: auto; }
  .menu.ouvert { display: block; }
  .menu > ul { flex-direction: column; align-items: stretch; padding: .4rem 16px 1.2rem; }
  .menu a { padding: .7rem .2rem; }
  .menu > ul > li > a.actif { box-shadow: none; }
  .menu li ul { display: block; position: static; box-shadow: none; background: transparent; padding: 0 0 .4rem 1rem; min-width: 0; border-radius: 0; }
  .menu li ul a { color: #c9d3f0; padding: .4rem .2rem; }
  .menu li ul a:hover { background: transparent; color: var(--jaune); }
}

/* ------------------------------------------------------------ pastilles, boutons, badges */
.bandeau-live { display: block; text-align: center; background: var(--rouge); color: var(--blanc); font-weight: 700; padding: .5rem 16px; text-decoration: none; }
.bandeau-live:hover { color: var(--blanc); background: #b9141f; }
.pastille-live, .pastille-fin, .pastille-avant { display: inline-flex; align-items: center; gap: .4em; font: 700 .8rem/1 var(--corps); letter-spacing: .06em; padding: .45rem .75rem; border-radius: 999px; }
.pastille-live { background: var(--rouge); color: var(--blanc); }
.pastille-live::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--blanc); animation: clignote 1.4s infinite; }
.bandeau-live .pastille-live { background: var(--blanc); color: var(--rouge); }
.bandeau-live .pastille-live::before { background: var(--rouge); }
.pastille-fin { background: var(--vert); color: var(--blanc); }
.pastille-avant { background: var(--jaune); color: var(--nuit); }
@keyframes clignote { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pastille-live::before, .menu-live > a::before { animation: none; } }

.bouton { display: inline-flex; align-items: center; gap: .5em; background: var(--bleu-vif); color: var(--blanc); padding: .7rem 1.35rem; border-radius: 999px; text-decoration: none; font-weight: 700; line-height: 1.2; border: 2px solid transparent; }
.bouton:hover { background: var(--bleu); color: var(--blanc); }
.bouton .ic { width: 1.1em; height: 1.1em; }
.bouton-jaune { background: var(--jaune); color: var(--nuit); }
.bouton-jaune:hover { background: #ffd43b; color: var(--nuit); }
.bouton-contour { background: transparent; border-color: var(--blanc); color: var(--blanc); }
.bouton-contour:hover { background: var(--blanc); color: var(--nuit); }
.bouton-ligne { background: transparent; color: var(--bleu); border-color: var(--bleu); padding: .45rem 1rem; font-size: .95rem; }
.bouton-ligne:hover { background: var(--bleu); color: var(--blanc); }
.badge { display: inline-block; background: var(--jaune); color: var(--nuit); font: 700 .72rem/1 var(--corps); letter-spacing: .06em; text-transform: uppercase; padding: .38rem .6rem; border-radius: 4px; text-decoration: none; }
a.badge:hover { color: var(--nuit); background: #ffd43b; }

/* ------------------------------------------------------------ gabarit */
.fil { max-width: 1240px; margin: 0 auto; padding: 1rem 16px 0; font-size: .88rem; color: var(--gris); }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.fil li + li::before { content: "›"; margin: 0 .45rem; }
.fil [aria-current] { color: var(--bleu); font-weight: 600; }
.cadre { max-width: 1240px; margin: 0 auto; padding: 1rem 16px 3.5rem; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
.cadre-large { grid-template-columns: minmax(0, 1fr); max-width: 920px; }
@media (max-width: 960px) { .cadre { grid-template-columns: minmax(0, 1fr); } }
.principal { background: var(--blanc); border-radius: var(--rayon); padding: clamp(1.1rem, 3.2vw, 2.6rem); box-shadow: var(--ombre); min-width: 0; }

/* ------------------------------------------------------------ article et page */
.contenu > p:first-child { margin: 0 0 .7rem; }
.chapo { font-size: 1.12rem; color: var(--gris); margin: 0 0 1.1rem; }
.meta-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; font-size: .9rem; color: var(--gris); padding: .2rem 0 1.3rem; }
.meta-ligne > span { display: inline-flex; align-items: center; gap: .4rem; }
.partage { margin-left: auto; gap: .7rem !important; }
.partage a { color: var(--bleu); line-height: 0; }
.partage a:hover { color: var(--bleu-vif); }
.partage .ic { width: 22px; height: 22px; }
@media (max-width: 600px) { .partage { margin-left: 0; } }
.une { margin: 0 0 1.6rem; }
.une img { border-radius: var(--rayon); width: 100%; display: block; }

.prose { overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose img { border-radius: 10px; }
.prose figure { margin: 1.6rem 0; }
.prose figcaption, .wp-element-caption { font-size: .88rem; color: var(--gris); text-align: center; margin-top: .4rem; }
.prose iframe { width: 100%; border: 0; border-radius: 10px; }
.prose iframe[src*="youtube"], .prose iframe[src*="vimeo"] { aspect-ratio: 16 / 9; height: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; margin: 1.4rem 0; }
.prose th, .prose td { border-bottom: 1px solid var(--trait); padding: .55rem .7rem; text-align: left; }
.prose th, .prose thead td { background: var(--nuit); color: var(--blanc); font-weight: 600; }
.prose tbody tr:nth-child(even) td { background: #f8f9fc; }
.prose blockquote, .wp-block-quote { position: relative; margin: 1.8rem 0; padding: 1.1rem 1.4rem 1.1rem 3.6rem; border-left: 4px solid var(--bleu-vif); background: var(--fond); border-radius: 0 10px 10px 0; font-style: italic; color: var(--bleu); }
.prose blockquote::before, .wp-block-quote::before { content: "“"; position: absolute; left: 1rem; top: .2rem; font: 700 3.2rem/1 Georgia, serif; color: var(--bleu-vif); }
.prose blockquote cite { display: block; font-style: normal; font-size: .9rem; color: var(--gris); margin-top: .4rem; }
.wp-block-pullquote { border-top: 4px solid var(--bleu); border-bottom: 4px solid var(--bleu); padding: 1rem; text-align: center; font-size: 1.2rem; }
.wp-block-columns { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.wp-block-column { flex: 1 1 240px; min-width: 0; }
.wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; }
.wp-block-gallery figure { margin: 0; }
.aligncenter, .wp-block-image.aligncenter, .has-text-align-center { text-align: center; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: .3rem 1.2rem 1rem 0; }
.alignright { float: right; margin: .3rem 0 1rem 1.2rem; }
@media (max-width: 600px) { .alignleft, .alignright { float: none; margin: 1rem auto; display: block; } }
.wp-block-buttons { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.2rem 0; }
.wp-block-button__link { display: inline-block; background: var(--bleu-vif); color: var(--blanc); padding: .65rem 1.3rem; border-radius: 999px; text-decoration: none; font-weight: 700; }
.wp-block-button__link:hover { background: var(--bleu); color: var(--blanc); }
.etiquettes a { display: inline-block; margin: 0 .4rem .4rem 0; font-size: .9rem; background: var(--fond); padding: .25rem .7rem; border-radius: 20px; text-decoration: none; }

/* encadres herites des shortcodes : la note devient l'encadre "A retenir" */
.note { position: relative; background: var(--jaune-pale); border: 1px solid var(--jaune-bord); color: var(--texte); padding: 1.1rem 1.3rem 1.1rem 3.4rem; border-radius: 10px; margin: 1.6rem 0; }
.note::before { content: ""; position: absolute; left: 1rem; top: 1.15rem; width: 1.5rem; height: 1.5rem; background: var(--jaune); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26A7 7 0 0 0 12 2zM9 20h6v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26A7 7 0 0 0 12 2zM9 20h6v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.note a { color: var(--bleu); font-weight: 700; }
.note > :first-child { margin-top: 0; } .note > :last-child { margin-bottom: 0; }
.encadre { border: 1px solid var(--trait); border-radius: 10px; margin: 1.6rem 0; overflow: hidden; }
.encadre-titre { margin: 0; background: var(--nuit); color: var(--jaune); font-weight: 700; padding: .6rem 1.1rem; }
.encadre-corps { padding: .9rem 1.1rem; }
.deplier { position: relative; }
.deplier.replie { overflow: hidden; }
.deplier.replie::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(transparent, var(--blanc)); }
.deplier-bouton { background: none; border: 0; color: var(--bleu-vif); font: 700 1rem var(--corps); cursor: pointer; padding: .4rem 0; }
.bouton-centre { text-align: center; }
.enfants { margin-top: 2.5rem; padding-top: 1rem; border-top: 3px solid var(--jaune); }

/* ------------------------------------------------------------ cartes et listes */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.4rem; }
.carte { background: var(--blanc); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.carte-image { position: relative; display: block; background: var(--nuit); aspect-ratio: 16 / 10; }
.carte-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carte-image .badge { position: absolute; left: .8rem; bottom: .8rem; }
.carte h2, .carte h3 { font-size: 1.2rem; margin: .9rem 1rem .35rem; }
.carte h2 a, .carte h3 a { text-decoration: none; color: var(--bleu); }
.carte h2 a:hover, .carte h3 a:hover { color: var(--bleu-vif); }
.carte p { margin: 0 1rem .6rem; font-size: .94rem; color: var(--gris); }
.carte .carte-date { margin-top: auto; padding-bottom: .4rem; font-size: .85rem; }
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2rem; }
.pagination a, .pagination span { padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--trait); text-decoration: none; }
.pagination span { background: var(--nuit); color: var(--blanc); border-color: var(--nuit); }

/* ------------------------------------------------------------ colonne laterale */
.barre { display: grid; gap: 1.4rem; position: sticky; top: 90px; }
@media (max-width: 960px) { .barre { position: static; } }
.bloc { background: var(--blanc); border-radius: var(--rayon); padding: 1.3rem 1.4rem; box-shadow: var(--ombre); }
.bloc h2 { font-size: 1.25rem; margin: 0 0 1rem; }
.liste-vignettes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.liste-vignettes a { display: flex; gap: .8rem; align-items: flex-start; text-decoration: none; color: var(--bleu); font-weight: 600; font-size: .95rem; line-height: 1.3; }
.liste-vignettes a:hover { color: var(--bleu-vif); }
.liste-vignettes img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; }
.liste-vignettes small { display: block; font-weight: 400; color: var(--gris); font-size: .82rem; margin-top: .3rem; }
.bloc-guide { background: var(--jaune-pale); border: 1px solid var(--jaune-bord); box-shadow: none; }
.liste-icones { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.liste-icones a { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; text-decoration: none; color: var(--texte); font-size: .96rem; }
.liste-icones a:hover, .liste-icones a[aria-current] { color: var(--bleu-vif); }
.liste-icones .ic { width: 1.35em; height: 1.35em; color: var(--bleu); }
.deux-colonnes { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
@media (max-width: 520px) { .deux-colonnes { grid-template-columns: 1fr; } }
.bloc-promo { background: var(--nuit); color: var(--blanc); text-align: center; }
.bloc-promo h2 { color: var(--blanc); text-align: left; }
.bloc-promo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin-bottom: 1rem; display: block; }

/* ------------------------------------------------------------ accueil */
.accueil { display: block; }
.heros { position: relative; color: var(--blanc); background: var(--nuit) var(--heros) var(--heros-pos, center) / cover no-repeat; }
.heros::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,30,92,.88) 0%, rgba(3,30,92,.55) 45%, rgba(3,30,92,.05) 80%); }
.heros-in { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) 16px clamp(5.5rem, 10vw, 7.5rem); }
.heros h1 { color: var(--blanc); font-size: clamp(2.5rem, 7vw, 4.4rem); font-weight: 700; line-height: 1.02; max-width: 12ch; margin-bottom: 1.2rem; }
.heros h1 .saut { display: block; }
.heros h1 .jaune { color: var(--jaune); display: block; }
.heros p { max-width: 34rem; font-size: clamp(1rem, 2.2vw, 1.18rem); margin: 0 0 1.6rem; }
.heros .boutons { display: flex; flex-wrap: wrap; gap: .8rem; }
@media (max-width: 600px) {
  .heros::before { background: linear-gradient(180deg, rgba(3,30,92,.2) 0%, rgba(3,30,92,.75) 45%, rgba(3,30,92,.95) 100%); }
  .heros-in { padding-top: 9rem; }
  .heros .boutons .bouton { flex: 1 1 100%; justify-content: center; }
}
.tuiles { position: relative; z-index: 2; max-width: 1208px; margin: -3.6rem auto 0; background: var(--blanc); border-radius: var(--rayon); box-shadow: 0 10px 30px rgba(3,30,92,.14); display: grid; grid-template-columns: repeat(6, 1fr); }
.tuiles a { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; padding: 1.4rem .8rem; text-decoration: none; color: var(--texte); font-size: .92rem; line-height: 1.25; }
.tuiles a + a { border-left: 1px solid var(--trait); }
.tuiles a:hover { color: var(--bleu-vif); }
.ic-tuile { width: 2.1rem; height: 2.1rem; color: var(--bleu); }
@media (max-width: 1240px) { .tuiles { margin-left: 16px; margin-right: 16px; } }
@media (max-width: 800px) {
  .tuiles { grid-template-columns: repeat(2, 1fr); }
  .tuiles a + a { border-left: 0; }
  .tuiles a:nth-child(even) { border-left: 1px solid var(--trait); }
  .tuiles a:nth-child(n+3) { border-top: 1px solid var(--trait); }
}
.section { max-width: 1240px; margin: 0 auto; padding: 2.6rem 16px 0; }
.section-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.section-tete h2 { margin: 0; }
.section-tete a { font-size: .92rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.4rem; }
@media (max-width: 860px) { .duo { grid-template-columns: minmax(0, 1fr); } }
.carte-live { position: relative; border-radius: var(--rayon); overflow: hidden; color: var(--blanc); padding: 1.8rem; min-height: 280px; background: var(--nuit) var(--fond) center / cover no-repeat; display: flex; flex-direction: column; justify-content: flex-end; }
.carte-live::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,30,92,.95) 0%, rgba(3,30,92,.7) 55%, rgba(3,30,92,.25) 100%); }
.carte-live > * { position: relative; margin: 0 0 .9rem; max-width: 22rem; }
.carte-live h2 { color: var(--blanc); font-size: 2rem; }
.bloc-preparer { background: var(--blanc); border-radius: var(--rayon); padding: 1.6rem 1.8rem; box-shadow: var(--ombre); }
.bloc-preparer h2 { margin: 0 0 1rem; font-size: 1.55rem; }
.bandeau-ile { margin-top: 2.6rem; max-width: 1208px; border-radius: var(--rayon); padding: 0; overflow: hidden; color: var(--blanc); background: var(--nuit) var(--fond) var(--fond-pos, center) / cover no-repeat; position: relative; }
@media (max-width: 1240px) { .bandeau-ile { margin-left: 16px; margin-right: 16px; } }
.bandeau-ile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,30,92,.92) 0%, rgba(3,30,92,.6) 50%, rgba(3,30,92,.1) 100%); }
.bandeau-ile > div { position: relative; padding: 2.4rem clamp(1.4rem, 4vw, 2.6rem); max-width: 40rem; }
.bandeau-ile h2 { color: var(--blanc); margin: 0 0 .7rem; font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.accueil .cadre { margin-top: 2.6rem; }
.titre-recit { margin-top: 0; }

/* ------------------------------------------------------------ commentaires */
.commentaires { margin-top: 3rem; border-top: 3px solid var(--jaune); padding-top: 1rem; }
.commentaires ol { list-style: none; padding: 0; margin: 0; }
.commentaire { border-left: 3px solid var(--trait); padding: .2rem 0 .2rem 1rem; margin: 1.2rem 0; }
.commentaire-auteur { margin: 0; font-size: .95rem; }
.commentaire-auteur time { color: var(--gris); margin-left: .4rem; }
.commentaire-texte { font-size: .98rem; }
.commentaire-texte p { margin: .3rem 0; }
.reponses { padding-left: 1rem !important; }
.commentaires-fermes { color: var(--gris); font-style: italic; }

/* ------------------------------------------------------------ live */
.surtitre { margin: 0 0 .8rem; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.maj { color: var(--gris); font-size: .9rem; }
.live-une { background: var(--jaune-pale); border: 1px solid var(--jaune-bord); border-radius: var(--rayon); padding: 1.1rem 1.4rem; margin: 1.6rem 0; }
.live-une-label { margin: 0; font: 700 .8rem var(--corps); letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); }
.live-une-titre { font: 600 1.45rem/1.25 var(--titres); margin: .2rem 0 .4rem; color: var(--bleu); }
.table-defile { overflow-x: auto; }
.live-tableau table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.live-tableau th, .live-tableau td { padding: .55rem .7rem; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.live-tableau th { background: var(--nuit); color: var(--blanc); font-weight: 600; }
.live-tableau tr.passe td { color: var(--gris); }
.live-tableau tr.actuel td { background: var(--jaune-pale); font-weight: 700; }
.note-tableau { font-size: .88rem; color: var(--gris); }
.live-carte iframe { width: 100%; height: 480px; border: 0; border-radius: 10px; }
.live-fil { margin-top: 2rem; }
.encart { border-left: 4px solid var(--bleu-vif); padding: .2rem 0 .2rem 1.1rem; margin: 1.6rem 0; }
.encart-chaud { border-left-color: var(--rouge); }
.encart-heure small { font-weight: 400; font-size: .85em; }
.encart-heure .encart-re, .encart-heure .encart-fr { white-space: nowrap; }
.encart-heure .encart-fr { font-weight: 600; opacity: .75; }
.encart-heure { margin: 0; font-weight: 700; color: var(--bleu); display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.encart h3 { margin: .2rem 0 .4rem; }
.encart figure { margin: .8rem 0; }
.encart-liens { display: flex; flex-wrap: wrap; gap: .5rem; }
.vide { color: var(--gris); font-style: italic; }

/* ------------------------------------------------------------ pied */
.pied { background: var(--nuit); color: #c9d3f0; margin-top: 1rem; }
.pied-in { max-width: 1240px; margin: 0 auto; padding: 2.6rem 16px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; font-size: .95rem; }
@media (max-width: 760px) { .pied-in { grid-template-columns: 1fr; } }
.pied-marque img { height: 38px; width: auto; margin-bottom: .8rem; }
.pied-marque p { max-width: 30rem; margin: 0; }
.pied-titre { font: 600 1.1rem var(--titres); color: var(--jaune); margin: 0 0 .6rem; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin: .3rem 0; }
.pied a { color: var(--blanc); text-decoration: none; }
.pied a:hover { color: var(--jaune); }
.derniers .cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .derniers .cartes { grid-template-columns: minmax(0, 1fr); } }
/* telephone : le contenu prend toute la largeur, une seule marge de 16 px */
@media (max-width: 600px) {
  .cadre { padding: .8rem 0 2.5rem; gap: 1.4rem; }
  .principal { border-radius: 0; padding: 1.2rem 16px 1.6rem; box-shadow: none; }
  .barre { padding: 0 16px; }
  .meta-ligne { gap: .35rem 1rem; font-size: .85rem; }
  .section-tete a { white-space: nowrap; }
}

/* ------------------------------------------------------------ live 2026 : avant course */
.live-heros { position: relative; color: var(--blanc); background: var(--nuit) var(--fond) var(--fond-pos, center) / cover no-repeat; }
.live-heros::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,30,92,.94) 0%, rgba(3,30,92,.7) 55%, rgba(3,30,92,.35) 100%); }
.live-heros-in { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(2.2rem, 6vw, 4rem) 16px clamp(4.5rem, 8vw, 6rem); }
.live-heros h1 { color: var(--blanc); font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 700; max-width: 14ch; }
.live-heros .maj { color: #c9d3f0; }
.live-heros .boutons { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 0; }
.compte-titre { margin: .4rem 0 .7rem; font-weight: 600; color: var(--jaune); }
.compte-cases { display: flex; gap: .7rem; flex-wrap: wrap; }
.compte-cases span { display: flex; flex-direction: column; align-items: center; min-width: 4.6rem; padding: .7rem .6rem .55rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.compte-cases b { font: 700 clamp(1.8rem, 5vw, 2.6rem)/1 var(--titres); color: var(--blanc); margin-bottom: .3rem; font-variant-numeric: tabular-nums; }
.compte-cases span[hidden] { display: none; }
.chiffres { position: relative; z-index: 2; max-width: 1208px; margin: -3rem auto 0; background: var(--blanc); border-radius: var(--rayon); box-shadow: 0 10px 30px rgba(3,30,92,.14); display: grid; grid-template-columns: repeat(4, 1fr); }
.chiffres div { padding: 1.3rem 1rem; text-align: center; }
.chiffres div + div { border-left: 1px solid var(--trait); }
.chiffres b { display: block; font: 700 clamp(1.6rem, 3.5vw, 2.2rem)/1.1 var(--titres); color: var(--bleu); }
.chiffres span { font-size: .9rem; color: var(--gris); }
@media (max-width: 1240px) { .chiffres { margin-left: 16px; margin-right: 16px; } }
@media (max-width: 700px) {
  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .chiffres div + div { border-left: 0; }
  .chiffres div:nth-child(even) { border-left: 1px solid var(--trait); }
  .chiffres div:nth-child(n+3) { border-top: 1px solid var(--trait); }
}
.live .cadre { margin-top: 2rem; }
.chapo-live { font-size: 1.12rem; }
.chapo-live p:first-child { margin-top: 0; }
.favoris-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.favori { display: flex; gap: .9rem; align-items: flex-start; border: 1px solid var(--trait); border-radius: 10px; padding: 1rem; background: var(--blanc); }
.favori p { margin: 0; font-size: .95rem; }
.favori-nom { font: 600 1.15rem/1.2 var(--titres) !important; color: var(--bleu); margin-bottom: .3rem !important; }
.favori-nom small { display: block; font: 600 .75rem var(--corps); letter-spacing: .05em; text-transform: uppercase; color: var(--gris); margin-top: .2rem; }
.favori-initiales { flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--nuit); color: var(--jaune); display: grid; place-items: center; font: 700 1.05rem var(--titres); }
.infos-course { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; margin: 1.4rem 0; }
.infos-course div { background: var(--fond); border-radius: 10px; padding: .8rem 1rem; }
.infos-course dt { font: 700 .78rem var(--corps); letter-spacing: .06em; text-transform: uppercase; color: var(--bleu); }
.infos-course dd { margin: .2rem 0 0; font-size: .95rem; }
.liste-coches { list-style: none; padding: 0; columns: 2 260px; column-gap: 2rem; }
.liste-coches li { position: relative; padding-left: 1.6rem; margin: 0 0 .5rem; break-inside: avoid; }
.liste-coches li::before { content: "✓"; position: absolute; left: 0; color: var(--vert); font-weight: 700; }
.live-tableau td:nth-child(3), .live-tableau td:nth-child(4) { white-space: nowrap; }
.lives-passes { margin-top: 2.5rem; padding-top: 1rem; border-top: 3px solid var(--jaune); }
@media (max-width: 600px) {
  .compte-cases { gap: .45rem; flex-wrap: nowrap; }
  .compte-cases span { min-width: 0; flex: 1; padding: .6rem .2rem .5rem; font-size: .66rem; }
  #barrieres th:nth-child(4), #barrieres td:nth-child(4), #barrieres th:nth-child(5), #barrieres td:nth-child(5) { display: none; }
  #barrieres th, #barrieres td { padding: .5rem .4rem; font-size: .88rem; }
}

/* ------------------------------------------------------------ newsletter Brevo */
.newsletter { background: var(--nuit); color: #dfe5f7; border-radius: var(--rayon); padding: 1.4rem 1.5rem; }
.newsletter h2 { color: var(--blanc); font-size: 1.35rem; margin: 0 0 .5rem; }
.newsletter > p { margin: 0 0 .9rem; font-size: .95rem; }
.newsletter-large { padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--nuit) linear-gradient(135deg, transparent 60%, rgba(253,195,8,.18) 60%); }
.newsletter-large h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
.live .newsletter-large { margin: 2.4rem 0; }
.nl-ligne { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .7rem; }
.nl-ligne input { flex: 1 1 200px; min-width: 0; padding: .72rem 1rem; border-radius: 999px; border: 2px solid transparent; font: 1rem var(--corps); }
.nl-ligne input:focus { outline: none; border-color: var(--jaune); }
.newsletter-bloc .nl-ligne .bouton { flex: 1 1 100%; justify-content: center; }
.nl-consentement { font-size: .82rem; margin: 0; color: #c9d3f0; }
.nl-consentement label { display: flex; gap: .5rem; align-items: flex-start; }
.nl-consentement input { margin-top: .2rem; flex: none; }
.nl-consentement a { color: var(--jaune); }
.nl-message { padding: .7rem 1rem; border-radius: 8px; font-weight: 600; }
.nl-ok { background: #e6f4ea; color: #1e5b23; }
.nl-erreur { background: #fdecea; color: #8c1d18; }
.nl-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.accueil > .section > .newsletter { margin-top: .4rem; }

/* Live en direct : bandeau compact, le fil d'abord, l'avant course en bas */
.live-heros-direct .live-heros-in { padding-top: clamp(1.2rem, 3vw, 2rem); padding-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.live-heros-direct h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); max-width: none; }
.live-heros-direct .boutons { display: none; }
.live-heros-direct + .cadre { margin-top: 1.5rem; }
.live-heros-direct + .cadre .live-fil { margin-top: 0; }
.chiffres-bas { margin: 1.5rem 0 0; box-shadow: none; border: 1px solid var(--trait); }
.avant-course { margin-top: 2.5rem; padding-top: 1rem; border-top: 3px solid var(--jaune); }

.live-heros-direct + .cadre .live-fil > h2 { margin-top: 0; }
.encart figcaption { font-size: .8rem; color: var(--gris); margin-top: .3rem; }