/* ============================================================
   Wander Gourmet - « Vos informations utiles » (version 43).

   Le modele flyer etait ecrit EN LIGNE dans les treize vigilance.html. La
   version 43 en fait trois pages par locale, soit trente-neuf : recopier cent
   lignes de CSS trente-neuf fois aurait fige la charte dans les pages. Elle
   est ici, chargee une fois, mise en cache sept jours par le .htaccess.

   Tire du fichier de meme nom de Ride v45, dont le modele est le meme, avec
   ce que Gourmet a de propre : pas de pages datees, un selecteur de six
   parcours au lieu de deux echeances, et des rubriques vides qui se disent.

   Les quatre couleurs de vigilance sont celles de Meteo-France et ne sont pas
   negociables : v1 vert, v2 jaune, v3 orange, v4 rouge. Les couleurs de texte
   qui vont dessus (--sur-v1..4) sont choisies pour rester lisibles sur elles.
   ============================================================ */
:root{--fond:#fbf0df;--carte:#fffcf6;--encre:#371a1f;--sourd:#75544c;--trait:#e9d5bd;
 --accent:#7a1d2c;--pop:#c94a35;--soleil:#eda43b;--surligne:#f3cf8f;--ombre:#3f2227;
 --neutre-f:#f3e7d4;--r:18px;--rs:12px;
 --f:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
 --v1:#31AA35;--v2:#FFF600;--v3:#F08000;--v4:#E0001B;
 --sur-v1:#FFFFFF;--sur-v2:#371a1f;--sur-v3:#371a1f;--sur-v4:#FFFFFF;
 --terre:#e6d6bd;--lisere:#fffcf6}
:root:not([data-theme="light"]){@media (prefers-color-scheme:dark){
 --fond:#221317;--carte:#2d1a1f;--encre:#f7e9df;--sourd:#c39c8f;--trait:#4a2e30;
 --accent:#e0836f;--soleil:#e5ad55;--surligne:#6b4a1f;--ombre:#0d0608;
 --neutre-f:#3a2528;--terre:#3a2528;--lisere:#2d1a1f}}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--f);
 font-size:.95rem;line-height:1.5;-webkit-font-smoothing:antialiased}
.page{max-width:1100px;margin:0 auto;padding:clamp(18px,4vw,40px) clamp(14px,4vw,28px) 60px}
.entete{background:linear-gradient(135deg,var(--accent) 20%,var(--pop));color:#fff6ee;
 border:2px solid var(--encre);border-radius:var(--r);box-shadow:6px 6px 0 var(--ombre);
 padding:18px 20px;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;
 justify-content:space-between}
.e-sur{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;opacity:.9;font-weight:700}
h1{font-size:clamp(1.4rem,4vw,2.1rem);font-weight:900;letter-spacing:-.01em;line-height:1.05;margin:4px 0 0}
.e-droite{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.e-date{background:rgba(30,5,10,.28);border-radius:8px;padding:5px 11px;font-weight:600;font-size:.82rem}
.e-etat{background:var(--soleil);color:#3a2205;border:2px solid var(--encre);border-radius:8px;
 padding:5px 13px;font-weight:800;transform:rotate(-2deg);font-size:.95rem}
.charge{margin:26px 0;padding:16px 18px;border:2px dashed var(--trait);border-radius:var(--r);color:var(--sourd)}
.selecteur{display:flex;gap:10px;margin:22px 0 0}
.selecteur button{font:inherit;font-weight:800;font-size:.82rem;letter-spacing:.06em;
 text-transform:uppercase;border:2px solid var(--encre);border-radius:14px;background:var(--carte);
 color:var(--encre);padding:8px 18px;cursor:pointer;box-shadow:3px 3px 0 var(--ombre)}
.selecteur button[aria-pressed="true"]{background:var(--surligne);box-shadow:1px 1px 0 var(--ombre);transform:translate(2px,2px)}
.selecteur button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.verdict{margin-top:18px;background:var(--carte);border:2px solid var(--encre);border-radius:var(--r);
 border-inline-start:10px solid var(--niv,var(--v1));box-shadow:4px 4px 0 var(--ombre);padding:16px 20px}
.verdict b{display:block;font-size:1.35rem;font-weight:900}
.verdict p{margin:6px 0 0;color:var(--sourd);max-width:64ch}
.verdict .quand{font-size:.8rem;margin-top:4px}
.grille{margin-top:20px;display:grid;gap:20px;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr)}
@media (max-width:880px){.grille{grid-template-columns:minmax(0,1fr)}}
.bloc{background:var(--carte);border:2px solid var(--encre);border-radius:var(--r);
 box-shadow:4px 4px 0 var(--ombre);padding:14px 16px 16px}
.bloc h2{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sourd);
 font-weight:800;margin:0 0 12px}
.bloc svg{display:block;width:100%;height:auto}
.dep{stroke:var(--lisere);stroke-width:1.2;stroke-linejoin:round}
.lisere{fill:none;stroke:var(--carte);stroke-width:5;stroke-linejoin:round}
.arr{stroke:rgba(255,255,255,.6);stroke-width:1.3;stroke-linejoin:round}
.num{font-size:23px;font-weight:800;fill:rgba(0,0,0,.5);pointer-events:none}
.nom{font-size:38px;font-weight:900;fill:#fff6ee;stroke:rgba(30,5,10,.45);stroke-width:6;paint-order:stroke fill}
.depart circle{fill:#371a1f;stroke:#fff6ee;stroke-width:4}
.legende{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:12px;padding-top:12px;
 border-top:2px dashed var(--trait);font-size:.78rem;color:var(--sourd);font-weight:600}
.legende span{display:inline-flex;align-items:center;gap:7px}
.pastille{width:14px;height:14px;border-radius:4px;border:2px solid var(--encre)}
.deps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
/* MESURE DU 31/08/2026 : a 320 px, le grec debordait de 37 px. Un element de
   grille a min-width:auto, donc il ne descend pas sous la largeur de son mot le
   plus long : « ΠΟΡΤΟΚΑΛΙ » ne tient pas dans un quart de 320 px. Deux
   colonnes sous 420 px, min-width:0 pour autoriser le retrecissement, et la
   coupure en dernier recours si une langue apporte un mot plus long encore. */
@media (max-width:420px){.deps{grid-template-columns:repeat(2,1fr)}}
.tuile{border:2px solid var(--encre);border-radius:var(--rs);padding:9px 4px;text-align:center;
 border-top:7px solid var(--niv);background:var(--neutre-f);min-width:0}
.tuile b{display:block;font-size:1.3rem;font-weight:900}
.tuile span{display:block;font-size:.62rem;font-weight:800;letter-spacing:.08em;
 text-transform:uppercase;color:var(--sourd);overflow-wrap:anywhere}
.phen{display:flex;flex-direction:column;gap:8px}
.ligne{display:flex;align-items:center;gap:12px;border:2px solid var(--encre);border-radius:var(--rs);
 padding:8px 12px;border-inline-start:8px solid var(--niv)}
.ligne strong{font-weight:700;flex:1;font-size:.9rem}
.badge{border:2px solid var(--encre);border-radius:9px;font-weight:800;font-size:.66rem;
 letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;background:var(--niv);color:var(--sur-niv)}
.pied{margin-top:26px;font-size:.78rem;color:var(--sourd)}
.pied a{color:var(--accent);font-weight:700}
.autres{margin-top:20px;display:grid;gap:20px;align-items:start;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.ligne-info{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
 border-inline-start:8px solid var(--soleil)}
.ligne-info strong{flex:none;font-size:.88rem;line-height:1.35}
.ligne-info .note{font-size:.74rem;font-weight:700;color:var(--sourd)}
.ligne-info a{color:inherit;text-decoration:underline;text-underline-offset:3px;
 text-decoration-thickness:2px}
.culturel{margin-top:20px}
.culturel .ligne-info{border-inline-start-color:var(--surligne)}
.src{margin:12px 0 0;padding-top:10px;border-top:2px dashed var(--trait);
 font-size:.72rem;font-weight:600;color:var(--sourd)}

/* --- VERSION 40 : ce qui est propre aux trois pages « informations utiles » --
   Tout ce qui suit est du contenu STATIQUE, lisible sans JavaScript et donc
   indexable : le fil d'Ariane, le chapeau, les deux cartes du carrefour, les
   quatre niveaux expliques, et la barre des archives. Les donnees du jour,
   elles, restent injectees par js/infos-utiles.js. */
.fil{margin:0 0 14px;font-size:.78rem;font-weight:700;color:var(--sourd);
 display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fil a{color:var(--accent);text-decoration:none}
.fil a:hover,.fil a:focus-visible{text-decoration:underline}
.fil span{opacity:.55}
.chapeau{margin:22px 0 0;font-size:1.02rem;line-height:1.6;max-width:68ch;color:var(--encre)}
.cartes{margin-top:24px;display:grid;gap:20px;align-items:start;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
a.carte{display:block;text-decoration:none;color:inherit;background:var(--carte);
 border:2px solid var(--encre);border-radius:var(--r);box-shadow:5px 5px 0 var(--ombre);
 padding:18px 20px 20px;transition:transform .12s ease,box-shadow .12s ease}
a.carte:hover,a.carte:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ombre)}
a.carte:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
a.carte .k{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
 font-weight:800;color:var(--sourd)}
a.carte h2{font-size:1.18rem;font-weight:900;margin:6px 0 8px;line-height:1.15;
 letter-spacing:0;text-transform:none;color:var(--encre)}
a.carte p{margin:0;color:var(--sourd);font-size:.9rem;line-height:1.55}
.niveaux{margin-top:26px}
.niveaux h2,.rubrique h2{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
 color:var(--sourd);font-weight:800;margin:0 0 12px}
.niveaux ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.niveaux li{border:2px solid var(--encre);border-radius:var(--rs);padding:10px 14px;
 border-inline-start:10px solid var(--niv);background:var(--neutre-f)}
.niveaux b{display:block;font-size:.95rem;font-weight:900}
.niveaux p{margin:3px 0 0;color:var(--sourd);font-size:.87rem;max-width:70ch}
.barre{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;
 padding-top:16px;border-top:2px dashed var(--trait);font-size:.82rem;font-weight:700}
.barre a{color:var(--accent)}
.vide{margin-top:22px;padding:16px 18px;border:2px dashed var(--trait);
 border-radius:var(--r);color:var(--sourd)}

/* --- VERSION 43 : le selecteur de parcours et les rubriques qui se disent ---
   SIX pastilles au lieu de deux, et elles portent des noms propres
   translitteres (« ル・マレ », « לה מארה », « Маре »). D'ou deux ecarts avec
   le selecteur d'echeance de la page meteo : elles passent a la ligne, et
   elles ne sont PAS mises en capitales -- text-transform:uppercase abime un
   nom propre et, en grec, fait tomber les accents. */
.selecteur{flex-wrap:wrap;gap:8px}
.selecteur.parcours{margin:18px 0 0}
.selecteur.parcours button{text-transform:none;letter-spacing:0;font-size:.86rem;
 font-weight:800;padding:8px 15px}
.selecteur-titre{margin:24px 0 0;font-size:.7rem;letter-spacing:.18em;
 text-transform:uppercase;color:var(--sourd);font-weight:800}

/* Une rubrique sans contenu ne disparait plus : elle dit ce que sa source dit,
   et rien de plus. « La Ville de Paris ne signale aucun chantier bloquant dans
   ce perimetre » est un fait verifiable ; « aucun chantier » n'en serait pas
   un, la base ne recensant pas tout. La rubrique des rassemblements fait
   exception et reste cachee : il n'y a derriere elle aucune source, seulement
   un fichier tenu a la main, et une absence s'y lirait comme une garantie. */
.rien{margin:0;font-size:.84rem;line-height:1.5;color:var(--sourd);font-weight:600;
 border:2px dashed var(--trait);border-radius:var(--rs);padding:10px 13px}

/* Le nom du parcours affiche est rappele dans le titre de chaque rubrique :
   une liste de rues sans le quartier auquel elle se rapporte ne veut rien
   dire quand six quartiers partagent la page. */
.bloc h2 .quoi{text-transform:none;letter-spacing:0;color:var(--encre);font-weight:900}