/* =============================================================
   donnees.css — extension du design system « L'Axe » pour les
   blocs de données (maquette du 01/10/2026).
   Mêmes jetons que styles.css : pierre, encre, or, Marcellus/Jost.
   Règle : un bloc par page, 3 informations maximum, chaque valeur datée.
   ============================================================= */

:root{
  --ok:   #3F6B4E;   /* état normal (métro fluide, air bon) */
  --warn: #9A6A12;   /* vigilance jaune, perturbation */
  --bad:  #8E3B2E;   /* alerte, interruption */
  --m6:   #6ECA97;
  --m9:   #B6BD00;
}

/* ---------- Pastille « en direct » ---------- */
.live{ display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-d); font-weight: 500; }
.live::before{ content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); animation: pouls 2.4s var(--ease) infinite; }
@keyframes pouls{ 0%,100%{ opacity: 1 } 50%{ opacity: .35 } }
.maj{ font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.src{ font-size: .74rem; color: var(--muted); margin: 0; }
.src a{ color: inherit; }
.num{ font-variant-numeric: tabular-nums; }

/* ---------- Accueil : la rangée de repères devient vivante ---------- */
.onsite--live .head{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 0; }
.onsite--live .stat{ text-decoration: none; color: inherit; transition: background .2s var(--ease); }
.onsite--live .stat:hover{ background: var(--accent-tint); }
.onsite--live .stat b{ font-variant-numeric: tabular-nums; }
.onsite--live .stat .go{ font-size: .78rem; color: var(--gold-d); margin-top: 2px; }
.onsite--live .foot{ display: flex; justify-content: space-between; gap: 12px; padding: 0 0 12px; flex-wrap: wrap; }
@media (max-width: 860px){
  /* Téléphone : une rangée qu'on fait défiler du doigt, pas une grille 2×2 */
  .onsite--live .row{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; padding-bottom: 4px; scrollbar-width: none; }
  .onsite--live .row::-webkit-scrollbar{ display: none; }
  .onsite--live .stat{ flex: 0 0 44%; scroll-snap-align: start; border-top: 0; border-left: 1px solid var(--line); padding: 16px 12px; }
  .onsite--live .stat:first-child{ border-left: 0; }
}

/* ---------- Bloc du jour (le composant unique) ---------- */
.bloc-jour{ background: var(--paper); border: 1px solid var(--line-2); position: relative; padding: 22px 22px 16px; }
.bloc-jour::before{ content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px; background: var(--gold); }
.bloc-jour > header{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bloc-jour h2, .bloc-jour h3{ font-size: 1.35rem; }
.bloc-jour .grand{ font-family: var(--fh); font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.bloc-jour .sous{ color: var(--muted); font-size: .95rem; }
.bloc-jour footer{ border-top: 1px solid var(--line); margin-top: 16px; padding-top: 10px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.trois{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.trois > div{ padding: 4px 16px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trois > div:first-child{ border-left: 0; padding-left: 0; }
.trois .l{ font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.trois .v{ font-family: var(--fh); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
@media (max-width: 560px){
  .trois{ grid-template-columns: 1fr; }
  .trois > div{ border-left: 0; border-top: 1px solid var(--line); padding: 10px 0; flex-direction: row; justify-content: space-between; align-items: baseline; }
  .trois > div:first-child{ border-top: 0; }
}

/* Frise de la soirée (scintillements) */
.frise{ position: relative; margin: 18px 0 6px; padding-top: 26px; }
.frise ol{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.frise ol::before{ content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line-2); }
.frise li{ position: relative; text-align: center; font-size: .85rem; color: var(--muted); padding-top: 22px; font-variant-numeric: tabular-nums; }
.frise li::before{ content: ""; position: absolute; left: 50%; top: 3px; width: 9px; height: 9px; margin-left: -4.5px; transform: rotate(45deg); background: var(--paper); box-shadow: inset 0 0 0 1px var(--gold); }
.frise li.sun::before{ border-radius: 50%; transform: none; background: var(--gold-l); box-shadow: inset 0 0 0 1px var(--gold-d); }
.frise li.next{ color: var(--ink); font-weight: 600; }
.frise li.next::before{ background: var(--gold); }
.frise li b{ display: block; font-family: var(--fh); font-weight: 400; font-size: 1.05rem; color: var(--ink); }

/* Boutons secondaires (agenda, notification) */
.actions-mini{ display: flex; gap: 10px; flex-wrap: wrap; }
.btn-mini{ display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: .45rem .9rem; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: none; border-radius: 2px; }
.btn-mini:hover{ border-color: var(--gold); }
.btn-mini svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---------- Page avec panneau latéral (ordinateur) ----------
   Téléphone : le panneau s'insère juste après la première section (la réponse).
   Ordinateur : colonne de droite, collée en haut pendant la lecture. */
.avec-panneau{ display: flex; flex-direction: column; }
.avec-panneau > .col-texte{ display: contents; }
.avec-panneau > .col-texte > *{ order: 3; }
.avec-panneau > .col-texte > :first-child{ order: 1; }
.avec-panneau > .panneau{ order: 2; }
@media (min-width: 981px){
  .avec-panneau{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 44px; align-items: start; }
  .avec-panneau > .col-texte{ display: block; min-width: 0; }
  .avec-panneau > .panneau{ position: sticky; top: 96px; padding-block: 40px; }
}
.panneau{ display: grid; gap: 16px; }
@media (max-width: 980px){ .panneau{ padding-block: 8px 24px; } }

/* ---------- Métro : passages ---------- */
.passages{ display: grid; gap: 0; }
.passage{ display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.passage:first-child{ border-top: 0; }
.passage .lb{ width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #1d1d1b; font-size: .95rem; }
.passage .dir{ min-width: 0; }
.passage .dir b{ display: block; font-weight: 500; }
.passage .dir span{ font-size: .82rem; color: var(--muted); }
.passage .min{ display: flex; gap: 6px; }
.passage .min span{ min-width: 46px; text-align: center; padding: 4px 6px; background: var(--bg); border: 1px solid var(--line); font-variant-numeric: tabular-nums; font-size: .95rem; }
.passage .min span:first-child{ background: var(--dk); color: #fff; border-color: var(--dk); }
.etat{ display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.etat::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.etat.warn::before{ background: var(--warn); }
.etat.bad::before{ background: var(--bad); }
.velos{ display: grid; gap: 0; }
.velo{ display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center; }
.velo b{ font-weight: 500; }
.velo .q{ display: flex; gap: 12px; font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.velo .q strong{ color: var(--ink); }
.pres{ font-size: .82rem; color: var(--muted); }
.voir-plus{ display: inline-block; margin-top: 8px; font-size: .9rem; }
@media (min-width: 861px){ .tel-seul{ display: none !important; } }
@media (max-width: 860px){ .ordi-seul{ display: none !important; } }

/* ---------- Tableau du jour (/aujourd-hui/) ---------- */
.jour-grille{ display: grid; grid-auto-flow: dense; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jour-grille .large{ grid-column: span 2; }
@media (max-width: 980px){ .jour-grille{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .jour-grille .large{ grid-column: span 2; } }
@media (max-width: 640px){ .jour-grille{ grid-template-columns: minmax(0,1fr); } .jour-grille .large{ grid-column: auto; } }
.jour-titre{ display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); padding-bottom: 14px; margin-bottom: 22px; }
.jour-titre .date{ font-family: var(--fsc); letter-spacing: .08em; color: var(--gold-d); }
.alerte{ display: grid; grid-template-columns: 6px minmax(0,1fr); gap: 14px; background: var(--paper); border: 1px solid var(--line-2); padding: 14px 16px 14px 0; }
.alerte::before{ content: ""; background: var(--warn); }
.alerte p{ margin: 0; }
.alerte b{ font-weight: 600; }

/* ---------- Agenda ---------- */
.filtres{ display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.filtres::-webkit-scrollbar{ display: none; }
.filtre{ flex: 0 0 auto; min-height: 40px; padding: .35rem .95rem; border: 1px solid var(--line-2); background: var(--paper); font: inherit; font-size: .9rem; color: var(--ink); border-radius: 999px; cursor: pointer; }
.filtre[aria-pressed="true"]{ background: var(--dk); color: #fff; border-color: var(--dk); }
.jours{ display: flex; border-bottom: 1px solid var(--line-2); margin: 18px 0 0; }
.jours button{ flex: 1; min-height: 48px; background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; font-family: var(--fh); font-size: 1.1rem; color: var(--muted); cursor: pointer; }
.jours button[aria-selected="true"]{ color: var(--ink); border-bottom-color: var(--gold); }
.evts{ display: grid; gap: 0; }
.evt{ display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.evt:first-child{ border-top: 0; }
.evt .h{ font-family: var(--fh); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.evt .h small{ display: block; font-family: var(--fb); font-size: .78rem; color: var(--muted); }
.evt h3{ font-size: 1.12rem; margin-bottom: 4px; }
.evt p{ margin: 0; font-size: .92rem; color: var(--muted); }
.tags{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tag{ font-size: .74rem; padding: 2px 8px; border: 1px solid var(--line-2); color: var(--muted); letter-spacing: .02em; }
.tag.or{ border-color: var(--gold); color: var(--gold-d); }
.semaine{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; margin-top: 18px; }
.semaine > section{ padding: 0; }
.semaine h3.jour{ font-family: var(--fsc); font-size: 1rem; letter-spacing: .08em; color: var(--gold-d); border-bottom: 1px solid var(--line-2); padding-bottom: 8px; }
.semaine .evt{ grid-template-columns: 1fr; gap: 4px; }

/* ---------- Seine : le Zouave ---------- */
.zouave-bloc{ display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 28px; align-items: center; }
@media (max-width: 640px){ .zouave-bloc{ grid-template-columns: 120px minmax(0,1fr); gap: 16px; } }
.zouave-bloc svg{ width: 100%; height: auto; display: block; }
.courbe{ width: 100%; height: auto; display: block; }
.reperes{ list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.reperes li{ display: flex; justify-content: space-between; gap: 10px; border-top: 1px dashed var(--line-2); padding-top: 6px; font-variant-numeric: tabular-nums; }

/* ---------- Capture d'email ---------- */
.capture{ background: var(--dk); color: #EDE6D8; padding: 26px 24px; position: relative; }
.capture::before{ content: ""; position: absolute; inset: 8px; border: 1px solid rgba(168,130,58,.5); pointer-events: none; }
.capture h2, .capture h3{ color: var(--gold-l); font-family: var(--fh); font-size: 1.4rem; margin-bottom: 6px; position: relative; }
.capture p{ color: #CFC6B4; font-size: .95rem; position: relative; }
.capture form{ display: grid; gap: 10px; position: relative; }
.capture .ligne{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 10px; }
.capture.etroit .ligne{ grid-template-columns: 1fr; }
@media (max-width: 640px){ .capture .ligne{ grid-template-columns: 1fr; } }
.capture label{ font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-l); display: grid; gap: 6px; }
.capture input{ min-height: 48px; padding: 0 12px; border: 1px solid #5b5648; background: #34322d; color: #fff; font: inherit; font-size: 16px; border-radius: 2px; text-transform: none; letter-spacing: 0; }
.capture input:focus-visible{ outline: 2px solid var(--gold); outline-offset: 1px; }
.capture .btn{ min-height: 48px; background: var(--gold); color: #1c1a16; border: 0; align-self: end; font-weight: 600; }
.capture .rgpd{ font-size: .74rem; color: #A9A190; margin: 0; }
.capture .rgpd a{ color: inherit; }
.capture ul{ margin: 0 0 10px; padding-left: 18px; color: #CFC6B4; font-size: .92rem; position: relative; }
.hp{ position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }

/* Illustration de remplacement des photos (maquette) */
.illu{ width: 100%; height: 100%; display: block; background: linear-gradient(180deg, #2c3d47 0%, #7d8a8f 55%, #d9c49a 100%); }
.illu svg{ width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: reduce){ .live::before{ animation: none; } }
.semaine .evt{ gap: 2px; padding: 12px 0; }
.semaine .evt .h{ font-size: 1rem; display: flex; gap: 8px; align-items: baseline; }
.semaine .evt .h small{ display: inline; }
/* Sur téléphone, la photo d'une page à donnée se réduit pour que la réponse du jour reste visible sans défiler */
@media (max-width: 860px){ .hero--donnees{ padding-top: 12px; } .hero--donnees .hcard{ height: 190px; max-width: 100%; border-radius: var(--vault); } }

/* ---------- Ajouts de la version locale (01/10/2026) ---------- */
[data-bloc][hidden]{ display: none !important; }
.demo{ display: inline-block; padding: 0 5px; border: 1px dashed var(--warn); color: var(--warn); font-size: .7rem; letter-spacing: .04em; }
.ligne-jour{ display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; background: var(--paper); border: 1px solid var(--line-2); padding: 10px 14px; margin: 0; font-size: .95rem; }
.liste-simple{ margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .95rem; }
.semaine-aff{ list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.semaine-aff li{ text-align: center; padding: 8px 2px; background: var(--bg); border: 1px solid var(--line); font-size: .78rem; display: grid; gap: 2px; }
.semaine-aff li b{ font-weight: 600; text-transform: capitalize; }
.semaine-aff li.forte{ background: var(--accent-tint); border-color: var(--gold); }
.passage .min .fin{ background: none; border: 0; color: var(--muted); min-width: 0; font-size: .82rem; }
.capture-retour{ margin: 4px 0 0; padding: 10px 12px; font-size: .92rem; position: relative; }
.capture-retour.ok{ background: rgba(63,107,78,.25); color: #E3F0E6; }
.capture-retour.erreur{ background: rgba(142,59,46,.3); color: #F6DCD6; }
.choix{ margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.bloc-alerte, [data-bloc="crue"]{ display: grid; grid-template-columns: 6px minmax(0,1fr); gap: 14px; background: var(--paper); border: 1px solid var(--line-2); padding: 12px 16px 12px 0; margin-block: 14px; }
.bloc-alerte::before, [data-bloc="crue"]::before{ content: ""; background: var(--warn); }
.bloc-alerte p, [data-bloc="crue"] p{ margin: 0; grid-column: 2; }
.bloc-alerte p + p{ margin-top: 6px; }
.ptable tr.auj td{ background: var(--accent-tint); font-weight: 600; }
.hero--donnees .quick-answer{ margin: 14px 0 16px; }
@media (max-width: 860px){ .hero--donnees{ padding-top: 12px; } .hero--donnees .hcard{ height: 190px; max-width: 100%; border-radius: var(--vault); } }
.evt h3 a{ color: inherit; text-decoration: none; }
.evt h3 a:hover{ text-decoration: underline; }
.evt[hidden]{ display: none; }
.services{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.seine-bloc{ display: grid; grid-template-columns: minmax(0, 320px) minmax(0,1fr); gap: 28px; align-items: center; }
@media (max-width: 700px){ .seine-bloc{ grid-template-columns: minmax(0,1fr); } .seine-bloc .echelle{ max-width: 320px; } }
.echelle{ width: 100%; height: auto; display: block; }
.avis-ferme{ margin: 0 0 12px; padding: 10px 12px; border-left: 4px solid var(--warn); background: var(--accent-tint); font-size: .92rem; }
.avis-ferme.bientot{ border-left-color: var(--gold); }
.video-direct{ margin: 0 0 18px; }
.video-direct iframe, .video-facade{ display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border: 0; background: linear-gradient(180deg, #2c3d47, #7d8a8f 60%, #d9c49a); color: #fff; text-decoration: none; font-family: var(--fh); font-size: 1.3rem; }
.video-facade span{ background: rgba(26,24,20,.7); padding: 12px 20px; }
.date{ font-family: var(--fsc); letter-spacing: .08em; color: var(--gold-d); }
.avec-panneau .col-texte > section.wrap, .avec-panneau .col-texte > .wrap, .avec-panneau .col-texte section.wrap{ padding-inline: 0; max-width: none; }
.quick-answer[data-bloc="scint-ligne"]{ display: block; }
.agenda-weekend{ display: block; }

/* ---------- v2 après le jury (01/10/2026) ---------- */
.btn-mini[hidden], [data-notif][hidden]{ display: none !important; }
.semaine2{ display: grid; gap: 22px; margin-top: 14px; }
.semaine2 h3.jour{ font-family: var(--fsc); font-size: 1rem; letter-spacing: .08em; color: var(--gold-d); border-bottom: 1px solid var(--line-2); padding-bottom: 8px; }
.tranche h4{ font-family: var(--fb); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 14px 0 2px; }
@media (min-width: 861px){
  .agenda-weekend .jours{ display: none; }
  .semaine2{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .semaine2 [data-panneau-jour][hidden]{ display: block !important; }
  .semaine2 h3.jour{ display: block; }
  .semaine2 .evt{ grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 860px){ .semaine2 h3.jour{ display: none; } }
.choix-grille{ display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
@media (max-width: 980px){ .choix-grille{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .choix-grille{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .choix-grille > *{ flex: 0 0 78%; scroll-snap-align: start; } }
.carte-choix{ display: grid; gap: 4px; padding: 14px; background: var(--paper); border: 1px solid var(--line-2); color: inherit; text-decoration: none; }
.carte-choix:hover{ border-color: var(--gold); }
.carte-choix .pourquoi{ font-size: .74rem; color: var(--gold-d); letter-spacing: .06em; }
.carte-choix h3{ font-size: 1.05rem; }
.carte-choix p{ margin: 0; font-size: .88rem; color: var(--muted); }
.tiroir{ border: 1px solid var(--line-2); background: var(--paper); }
.tiroir > summary{ list-style: none; cursor: pointer; padding: 14px 18px; min-height: 52px; display: flex; justify-content: space-between; align-items: center; font-weight: 500; }
.tiroir > summary::-webkit-details-marker{ display: none; }
.tiroir > summary::after{ content: "+"; font-size: 1.4rem; color: var(--gold-d); }
.tiroir[open] > summary::after{ content: "–"; }
@media (max-width: 860px){ .onsite--live .head, .onsite--live .foot{ padding-inline: 16px; } }
.familles{ display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1060px){ .familles{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px){ .familles{ grid-template-columns: minmax(0, 1fr); } }
.famille{ display: grid; gap: 8px; min-width: 0; }
.famille-meta{ margin: 0; font-size: .86rem; color: var(--muted); }
.famille-meta b{ color: var(--ink); font-weight: 600; }
/* légendes de photo en double sur certaines pages anciennes (relevé du jury) */
.hcard .cap + .cap{ display: none; }