/* ============================================================
   Wander Ride - « Vos informations utiles » (version 40).

   Le modele flyer etait ecrit EN LIGNE dans les treize vigilance.html.
   La version 40 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.

   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)}
.dates{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.dates a{display:inline-block;border:2px solid var(--encre);border-radius:9px;
 background:var(--carte);padding:5px 11px;font-size:.8rem;font-weight:700;
 color:var(--encre);text-decoration:none;box-shadow:2px 2px 0 var(--ombre)}
.dates a[aria-current="page"]{background:var(--surligne)}
.vide{margin-top:22px;padding:16px 18px;border:2px dashed var(--trait);
 border-radius:var(--r);color:var(--sourd)}