/* vigilance.meteothom.com : direction D des maquettes (mixte A et B). Thème clair, sombre ou celui du système
   (html[data-theme]). Pas de style en ligne (CSP) : tout passe par des classes et des variables. */
@font-face { font-family: "Inter"; src: url("polices/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("polices/fraunces-latin.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

:root {
  color-scheme: light;
  --fond: #f6f3ec; --carte: #fff; --trait: #e4dccb; --trait-doux: #f1ece1; --trait-puce: #d6cdb9;
  --encre: #1d1d1b; --encre-2: #3a372f; --gris: #5f5a50; --accent: #9a4a0b; --accent-fort: #6d3307;
  --inverse: #fff; --survol: #fbf9f4; --ouvert: #fffaf3; --vide: #ece6d8; --archive: #f3e3cf; --archive-texte: #6d3307;
  --ombre: rgba(29, 29, 27, .18); --pointille: #b9b1a0;
  --c1: #6cbf4f; --c2: #ffd83a; --c3: #ff922b; --c4: #e2342d;
  --sur-couleur: #1d1d1b;
  --bord-dep: #fff; --halo: #fff; --encart: #fff; --encart-trait: #c9c2b2; --repere: #8a8478;
  --hors: repeating-linear-gradient(135deg, #d9d3c5 0 3px, #ece7dc 3px 6px);
  --attente: repeating-linear-gradient(135deg, #f4f0e7 0 10px, #faf8f3 10px 20px);
  --titre: "Fraunces", Georgia, serif;
}
:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #12161b; --carte: #1a2027; --trait: #2b343e; --trait-doux: #222a33; --trait-puce: #3a4552;
  --encre: #e9edf1; --encre-2: #c3ccd5; --gris: #94a1ae; --accent: #ffb36b; --accent-fort: #ffd0a1;
  --inverse: #12161b; --survol: #202832; --ouvert: #231f1a; --vide: #252d36; --archive: #3a2a17; --archive-texte: #ffc387;
  --ombre: rgba(0, 0, 0, .5); --pointille: #4a5562;
  --c1: #3f9447; --c2: #f2cf3a; --c3: #ff922b; --c4: #ff4b42;
  --bord-dep: #12161b; --halo: #12161b; --encart: #1a2027; --encart-trait: #3a4552; --repere: #6f7c8a;
  --hors: repeating-linear-gradient(135deg, #2c343e 0 3px, #222a33 3px 6px);
  --attente: repeating-linear-gradient(135deg, #1d242c 0 10px, #222a33 10px 20px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    color-scheme: dark;
    --fond: #12161b; --carte: #1a2027; --trait: #2b343e; --trait-doux: #222a33; --trait-puce: #3a4552;
    --encre: #e9edf1; --encre-2: #c3ccd5; --gris: #94a1ae; --accent: #ffb36b; --accent-fort: #ffd0a1;
    --inverse: #12161b; --survol: #202832; --ouvert: #231f1a; --vide: #252d36; --archive: #3a2a17; --archive-texte: #ffc387;
    --ombre: rgba(0, 0, 0, .5); --pointille: #4a5562;
    --c1: #3f9447; --c2: #f2cf3a; --c3: #ff922b; --c4: #ff4b42;
    --bord-dep: #12161b; --halo: #12161b; --encart: #1a2027; --encart-trait: #3a4552; --repere: #6f7c8a;
    --hors: repeating-linear-gradient(135deg, #2c343e 0 3px, #222a33 3px 6px);
    --attente: repeating-linear-gradient(135deg, #1d242c 0 10px, #222a33 10px 20px);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 15px/1.45 "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
a { color: var(--accent); }
a:hover { color: var(--accent-fort); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.page { max-width: 1320px; margin: 0 auto; padding: 22px 32px 40px; }
.espace { flex: 1 1 20px; }
.aide { color: var(--gris); font-size: 13.5px; }
h2 { margin: 0; font-family: var(--titre); font-size: 22px; }
h2.grand { font-size: 28px; }

/* en-tête */
.entete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--encre); }
.marque { font-family: var(--titre); font-weight: 700; font-size: 22px; color: var(--encre); text-decoration: none; }
.vers-accueil { font-family: var(--titre); font-weight: 700; font-size: 22px; color: var(--gris); text-decoration: none; }
.vers-accueil:hover, .vers-accueil:focus-visible { color: var(--accent); }
.separateur { font-size: 22px; color: var(--trait-puce); margin: 0 -4px; }
.sous-marque { color: var(--gris); }
.pastille-archive { padding: 6px 12px; border-radius: 999px; background: var(--archive); color: var(--archive-texte); font-size: 13.5px; font-weight: 600; }
.bouton-direct { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--encre); color: var(--inverse); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.bouton-direct .point { width: 8px; height: 8px; border-radius: 50%; background: #6cbf4f; }
.bouton-theme { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--trait-puce); background: var(--carte); cursor: pointer; font-size: 13.5px; }
.bouton-theme svg { width: 16px; height: 16px; }

/* une */
.une { display: flex; flex-wrap: wrap; gap: 28px; padding: 22px 0 20px; align-items: flex-end; }
.une-texte { flex: 999 1 560px; min-width: 0; }
.une-date { margin: 0 0 6px; color: var(--gris); font-weight: 600; }
.une h1 { margin: 0; font-family: var(--titre); font-size: 40px; line-height: 1.1; }
.une-commentaire { margin: 12px 0 0; max-width: 760px; font-size: 16.5px; line-height: 1.55; color: var(--encre-2); }
.une-commentaire:empty { display: none; }
.national { margin-top: 10px; max-width: 760px; }
.national summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.national p { color: var(--encre-2); }
.une-compteurs { flex: 1 1 340px; min-width: 0; }
.une-compteurs .aide { margin-bottom: 8px; }
.compteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.compteur { text-align: left; padding: 12px 14px; border-radius: 12px; border: 2px dashed var(--pointille); background: transparent; cursor: pointer; }
.compteur b { display: block; font-size: 28px; line-height: 1; }
.compteur span { display: block; margin-top: 6px; font-weight: 700; }
.compteur.n4 { border-color: var(--c4); } .compteur.n3 { border-color: #c96a10; } .compteur.n2 { border-color: #c9a400; }
.compteur[aria-pressed="true"] { border-style: solid; color: var(--sur-couleur); }
.compteur.n4[aria-pressed="true"] { background: var(--c4); color: #fff; }
.compteur.n3[aria-pressed="true"] { background: var(--c3); }
.compteur.n2[aria-pressed="true"] { background: var(--c2); }
.compteur.partiel { border-style: solid; background: linear-gradient(135deg, transparent 50%, rgba(128, 128, 128, .12) 50%); }

/* cartes */
.carte-bloc, .carte-blanche { background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 16px 18px; margin-bottom: 22px; }
.carte-outils { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bascule { display: inline-flex; padding: 3px; background: var(--trait-doux); border-radius: 999px; }
.bascule button { padding: 7px 14px; border-radius: 999px; border: 0; background: transparent; color: var(--encre-2); font-weight: 600; cursor: pointer; font-size: 13.5px; }
.bascule button[aria-pressed="true"] { background: var(--encre); color: var(--inverse); }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.cartes.une-seule { grid-template-columns: minmax(0, 640px); justify-content: center; }
.carte { margin: 0; min-width: 0; }
.carte figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.carte figcaption .jour { font-family: var(--titre); font-weight: 700; font-size: 22px; }
.carte figcaption .badges { margin-left: auto; display: inline-flex; gap: 6px; }
.badge { padding: 2px 8px; border-radius: 6px; font-weight: 700; font-size: 13.5px; color: var(--sur-couleur); }
.badge.n2 { background: var(--c2); } .badge.n3 { background: var(--c3); } .badge.n4 { background: var(--c4); color: #fff; }
.badge.n1 { background: var(--c1); color: #fff; }
.carte .cadre { position: relative; max-width: 620px; margin: 0 auto; }
.carte svg { display: block; width: 100%; height: auto; }
.carte svg .dep { stroke: var(--bord-dep); stroke-width: 1.4; stroke-linejoin: round; cursor: pointer; }
.carte svg .dep.n1 { fill: var(--c1); } .carte svg .dep.n2 { fill: var(--c2); } .carte svg .dep.n3 { fill: var(--c3); } .carte svg .dep.n4 { fill: var(--c4); }
.carte svg .dep:hover, .carte svg .dep.actif { stroke: var(--encre); stroke-width: 3; }
.carte svg .encart-fond { fill: var(--encart); stroke: var(--encart-trait); stroke-width: 1.4; }
.carte svg .encart-repere { fill: none; stroke: var(--repere); stroke-width: 1.2; stroke-dasharray: 3 2; }
.carte svg .pictos { pointer-events: none; }
.carte svg .halo { fill: none; stroke: var(--halo); stroke-width: 4; }
.carte svg .pic { stroke: #000; stroke-width: 1.4; }
.carte svg .pic.n2 { fill: #ffd83a; } .carte svg .pic.n3 { fill: #ff922b; } .carte svg .pic.n4 { fill: #e2342d; }
.carte-vide { min-height: 360px; border: 2px dashed var(--trait-puce); border-radius: 14px; background: var(--attente); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; color: var(--gris); }
.carte-vide b { color: var(--encre); font-size: 17px; }
.legende { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; color: var(--encre-2); font-size: 13px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legende-droite { margin-left: auto; color: var(--gris); }
i.c1, .seg.c1 { background: var(--c1); } i.c2, .seg.c2 { background: var(--c2); } i.c3, .seg.c3 { background: var(--c3); } i.c4, .seg.c4 { background: var(--c4); }
i.hors, .seg.c0 { background: var(--hors); }
.legende i.hors { width: 18px; }
.mises-a-jour { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trait-doux); }
.mises-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.mises-tete .aide { margin-left: auto; font-size: 13px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { font-size: 13.5px; padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--trait-puce); background: var(--carte); cursor: pointer; }
.puce[aria-current="true"] { border-color: var(--encre); background: var(--encre); color: var(--inverse); font-weight: 600; }
.puce .rond { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.rond.n1 { background: var(--c1); } .rond.n2 { background: var(--c2); } .rond.n3 { background: var(--c3); } .rond.n4 { background: var(--c4); }

/* bulle */
.bulle { position: absolute; z-index: 20; width: 260px; background: var(--carte); color: var(--encre); border: 2px solid var(--encre); border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 24px var(--ombre); font-size: 13.5px; }
.bulle .tete { display: flex; align-items: baseline; gap: 8px; }
.bulle .tete b { font-family: var(--titre); font-size: 18px; }
.bulle .tete .num { color: var(--gris); font-size: 13px; }
.bulle .tete .badge { margin-left: auto; font-size: 12px; }
.bulle .fermer { border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 0 0 6px; color: var(--gris); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; font-size: 12.5px; }
.etiquette { padding: 2px 7px; border-radius: 6px; color: var(--sur-couleur); }
.etiquette.n2 { background: var(--c2); } .etiquette.n3 { background: var(--c3); font-weight: 600; } .etiquette.n4 { background: var(--c4); color: #fff; font-weight: 600; }
.bulle .mini { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 6px; align-items: center; font-size: 11.5px; color: var(--gris); }
.bulle .resume { margin-top: 6px; font-size: 12.5px; color: var(--encre-2); }
.bulle .aide { margin-top: 6px; font-size: 11.5px; }
.bulle .voir { display: inline-block; margin-top: 6px; font-weight: 600; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; }

/* barres horaires */
.barre { display: flex; height: 16px; border-radius: 4px; overflow: hidden; }
.barre.fine { height: 10px; border-radius: 3px; }
.barre.moyenne { height: 12px; border-radius: 3px; }
.seg { min-width: 0; }
.axe { display: flex; justify-content: space-between; color: var(--gris); font-size: 11px; }

/* pictos par phénomène */
.bloc-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.case { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.case input { width: 18px; height: 18px; accent-color: var(--encre); }
.lien { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font-size: 13.5px; }
.phenos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.pheno { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--trait); }
.pheno .nom { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.icone { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #000; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.icone svg { width: 30px; height: 30px; }
.icone.n2 { background: var(--c2); } .icone.n3 { background: var(--c3); } .icone.n4 { background: var(--c4); }
.choix { display: flex; flex-wrap: wrap; gap: 6px; }
.choix button { font-size: 13px; padding: 5px 10px; border-radius: 8px; border: 2px dashed; background: var(--carte); cursor: pointer; }
.choix button.n2 { border-color: #c9a400; } .choix button.n3 { border-color: #c96a10; } .choix button.n4 { border-color: #a5231d; }
.choix button[aria-pressed="true"] { border-style: solid; font-weight: 700; color: var(--sur-couleur); }
.choix button.n2[aria-pressed="true"] { background: var(--c2); }
.choix button.n3[aria-pressed="true"] { background: var(--c3); }
.choix button.n4[aria-pressed="true"] { background: var(--c4); color: #fff; }

/* tableau */
#cherche { font-size: 14px; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--trait-puce); background: var(--carte); color: var(--encre); width: 230px; }
.ligne-grille { display: grid; grid-template-columns: 28px minmax(170px, 1fr) minmax(0, 1.1fr) minmax(0, 1.6fr) 12px minmax(0, 1.6fr); align-items: center; }
.tableau .tete-tableau { color: var(--gris); font-size: 11.5px; }
.tableau .tete-tableau b { color: var(--encre); }
.dep-ligne { border-bottom: 1px solid var(--trait-doux); }
.dep-ligne > button { width: 100%; padding: 8px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.dep-ligne > button:hover { background: var(--survol); }
.dep-ligne .chevron { margin-left: 8px; transition: transform .15s; }
.dep-ligne .chevron path { stroke: var(--encre); }
.dep-ligne.ouvert { border: 2px solid var(--c3); border-radius: 12px; background: var(--ouvert); margin: 4px 0; }
.dep-ligne.ouvert.n4 { border-color: var(--c4); } .dep-ligne.ouvert.n2 { border-color: #c9a400; } .dep-ligne.ouvert.n1 { border-color: var(--trait); }
.dep-ligne.ouvert .chevron { transform: rotate(90deg); }
.dep-nom { display: flex; gap: 8px; align-items: baseline; }
.dep-nom b { font-weight: 600; }
.dep-ligne.ouvert .dep-nom b { font-family: var(--titre); font-size: 18px; font-weight: 700; }
.dep-nom span { color: var(--gris); font-size: 13px; }
.sep { align-self: stretch; border-left: 2px solid var(--encre); margin-left: 5px; }
.detail { display: flex; flex-wrap: wrap; gap: 20px; padding: 4px 14px 16px 36px; }
.detail-frises { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr) 12px minmax(0, 1fr); gap: 7px 0; align-items: center; align-content: start; font-size: 13.5px; }
.detail-bulletin { flex: 1 1 360px; min-width: 0; font-size: 14px; }
.detail-bulletin .bt { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.detail-bulletin .bt span { color: var(--gris); font-size: 13px; }
.detail-bulletin h4 { margin: 10px 0 4px; font-size: 13.5px; }
.detail-bulletin p { margin: 0 0 6px; line-height: 1.55; color: var(--encre-2); }
.tableau .vide { padding: 16px 0; color: var(--gris); }

/* historique */
.historique { margin-top: 30px; padding-top: 20px; border-top: 2px solid var(--encre); }
.historique input { font: inherit; padding: 7px 10px; border-radius: 10px; border: 1.5px solid var(--encre); background: var(--carte); color: var(--encre); }
.bouton { padding: 7px 14px; border-radius: 10px; border: 0; background: var(--encre); color: var(--inverse); font-weight: 600; cursor: pointer; }
.annees { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.calendrier { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 6px; }
.mois-cal b { display: block; margin-bottom: 8px; }
.mois-cal .jours { display: grid; grid-template-columns: repeat(7, 22px); gap: 4px; }
.jour-cal { width: 22px; height: 22px; border-radius: 5px; border: 0; padding: 0; font-size: 10px; font-weight: 700; cursor: pointer; background: var(--vide); color: var(--sur-couleur); }
.jour-cal.n1 { background: var(--c1); } .jour-cal.n2 { background: var(--c2); } .jour-cal.n3 { background: var(--c3); } .jour-cal.n4 { background: var(--c4); color: #fff; }
.jour-cal.choisi { outline: 2.5px solid var(--encre); outline-offset: 1px; }
.jour-cal:disabled { cursor: default; background: transparent; }
.frise-bloc { margin-top: 18px; }
.frise { display: flex; gap: 2px; align-items: flex-end; height: 56px; }
.frise.serree { gap: 0; }
.frise button { flex: 1 1 0; min-width: 0; border: 0; padding: 0; border-radius: 2px; cursor: pointer; }
.frise.serree button { border-radius: 0; }
.frise button.n1 { background: var(--c1); height: 22%; } .frise button.n2 { background: var(--c2); height: 50%; }
.frise button.n3 { background: var(--c3); height: 76%; } .frise button.n4 { background: var(--c4); height: 100%; }
.frise button.choisi { outline: 2px solid var(--encre); outline-offset: 1px; }
.frise-mois { display: flex; justify-content: space-between; color: var(--gris); font-size: 12.5px; margin-top: 6px; }
.pied { margin-top: 30px; color: var(--gris); font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--encre); color: var(--inverse); padding: 10px 18px; border-radius: 999px; font-weight: 600; z-index: 30; }

@media (max-width: 760px) {
  .page { padding: 14px 16px 30px; }
  .carte-bloc { padding: 12px 8px; margin-left: -8px; margin-right: -8px; }
  .carte-outils { display: none; }
  .onglets-jours { display: flex; width: 100%; margin-bottom: 10px; }
  .onglets-jours button { flex: 1 1 0; padding: 9px 10px; font-size: 15px; }
  .onglets-jours ~ .carte figcaption .jour { display: none; }
  .carte figcaption .jour { font-size: 18px; }
  .puces { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .puce { flex: 0 0 auto; }
  .mises-tete .aide { display: none; }
  .une h1 { font-size: 30px; }
  .cartes { grid-template-columns: minmax(0, 1fr); }
  .ligne-grille { grid-template-columns: 22px minmax(110px, 1fr) minmax(0, 1.5fr) 8px minmax(0, 1.5fr); }
  .ligne-grille .col-ph { display: none; }
  .detail { padding-left: 12px; }
  .detail-frises { grid-template-columns: 100px minmax(0, 1fr) 8px minmax(0, 1fr); }
  #cherche { width: 100%; }
  .bulle { position: fixed; left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; }
}