/* =====================================================================
   TERRA／2050 — restyle des menus (piste 1c ＋ dossier 2a)
   Design system fromanother, aligné sur roluron/fromanother-website26 :
   palette brand (dark-blue / yellow / blue), TWK Lausanne 600 en display,
   Herbik Medium Italic en surtitre, easeOutQuart partout.
   À charger APRÈS le <style> existant de index.html.
   ===================================================================== */

@font-face { font-family: "Herbik"; src: url("./fonts/Herbik-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Herbik"; src: url("./fonts/Herbik-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Herbik"; src: url("./fonts/Herbik-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "TWK Lausanne"; src: url("./fonts/TWKLausanne-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "TWK Lausanne"; src: url("./fonts/TWKLausanne-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "TWK Lausanne"; src: url("./fonts/TWKLausanne-400Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "TWK Lausanne"; src: url("./fonts/TWKLausanne-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "TWK Lausanne"; src: url("./fonts/TWKLausanne-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Terra Entry"; src: url("./fonts/TWKLausanne-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---- Tokens fromanother (src/styles/_root.scss du site).
   --cyan/--ambre/--alerte restent des couleurs de DONNÉES (shader). ---- */
:root {
  --encre: #051236;                          /* brand-dark-blue */
  --encre-2: #071a45;
  --encre-3: #0b2358;
  --texte: #FFFDE2;                          /* brand-yellow */
  --muter: rgba(255, 253, 226, 0.6);         /* text-secondary */
  --efface: rgba(255, 253, 226, 0.3);        /* text-disabled */
  --hairline: rgba(255, 253, 226, 0.16);
  --bleu: #1740A9;                           /* brand-blue */
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);        /* easeOutQuart */
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);      /* easeInOutQuart */
  --police: "TWK Lausanne", "Inter", -apple-system, sans-serif;
  --serif: var(--police);                    /* le display du site est TWK 600, pas Herbik */
  --herbik: "Herbik", "Cormorant Garamond", serif;
  --mono: var(--police);
}

/* Rôles typographiques du site : h0/h1/h2 en TWK 600 très serré,
   b1/b2 en TWK 400, sh1 en Herbik Medium Italic. */
.fa-display { font-family: var(--police); font-weight: 600; line-height: 0.9; letter-spacing: -0.03em; }
.fa-sh1 { font-family: var(--herbik); font-weight: 500; font-style: italic; line-height: 0.9; letter-spacing: normal; }

body { background: var(--encre); color: var(--texte); }

/* ---- Chrome ultra-minimal : plus de verre flou, plus de panneaux ---- */
.panneau { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.micro { font-family: var(--police); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; }

/* Titre : wordmark seul */
#titre h1 { font-family: var(--police); font-weight: 600; font-size: 26px; letter-spacing: -0.03em; }
#titre h1 em { color: var(--bleu); }        /* remplacer <em>//</em> par <em>／</em> */
#titre .micro { display: none; }

/* Voile d'entrée */
#voile h1 { font-family: var(--police); font-weight: 600; letter-spacing: -0.03em; }
#voile h1 em { color: var(--bleu); }
#voile .sous, #voile .jauge { font-family: var(--police); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; }
#voile .entree { font-family: var(--police); font-size: 12px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--texte); border: 1px solid var(--hairline); border-radius: 999px; padding: 12px 34px; }

/* Calques : rail de dots, sans en-tête */
#calques { padding: 0; width: auto; }
#calques .micro { display: none; }
.calque { padding: 8px 0; gap: 12px; }
.calque .pastille { width: 9px; height: 9px; background: transparent; border: 1px solid var(--efface); box-sizing: border-box; }
.calque.actif .pastille { border-color: transparent; transform: none; }
.calque .nom { font-weight: 400; font-size: 12.5px; letter-spacing: 0; }
.calque .code { display: none; }
.calque { opacity: 0.9; }
.calque:not(.actif) { opacity: 0.38; }
.calque:hover { opacity: 1; }

/* Recherche : repliée en « Chercher un lieu ⌘K », hairline ; champ au focus */
#champ-recherche { font-family: var(--police); font-size: 14px; letter-spacing: 0; text-transform: none;
  background: none; border: none; border-bottom: 1px solid var(--hairline); border-radius: 0;
  padding: 10px 2px; caret-color: var(--bleu); transition: border-color 150ms ease; }
#champ-recherche:focus { border-bottom-color: var(--muter); }
#resultats { margin-top: 6px; background: var(--encre-2); border: 1px solid var(--hairline);
  backdrop-filter: none; -webkit-backdrop-filter: none; }
#resultats li { padding: 12px 18px; border-top: 1px solid var(--hairline); }
#resultats li:first-child { border-top: none; }
#resultats li:hover, #resultats li.choisi { background: var(--encre-3); transform: none; opacity: 1; }
#resultats li .nom-lieu { font-weight: 400; font-size: 14px; }
#resultats li .type-lieu { font-family: var(--police); font-size: 10px; letter-spacing: 0.14em; }
#resultats li.choisi .type-lieu { color: var(--bleu); }

/* Timeline nue : année en Herbik, ligne 1px, pas d'arc-en-ciel */
#timeline { padding: 0; width: min(480px, 60vw); transition: left 480ms var(--ease); }
#timeline > .micro { display: none; }
#timeline .an { font-family: var(--police); font-weight: 600; font-size: 96px; letter-spacing: -0.03em; }
#curseur { height: 1px; background: var(--hairline); margin-top: 16px; }
#curseur::-webkit-slider-thumb { background: var(--texte); border: 3px solid var(--encre); }
#curseur::-moz-range-thumb { background: var(--texte); border: 3px solid var(--encre); }
#timeline .bornes { font-size: 10px; letter-spacing: 0.14em; }

/* Boutons utilitaires : liens texte, pas de pilules */
.bouton-ico { font-family: var(--police); font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
  color: var(--muter); border: none; padding: 6px 0; white-space: nowrap; }
.bouton-ico.actif { color: var(--texte); }

/* HUD perf */
#hud { font-family: var(--police); letter-spacing: 0.1em; }
#hud b { color: var(--bleu); }

/* =====================================================================
   Effets de marque (source : fromanother-careers) — apparition décalée
   des rangées, 0.04s par index, fade + translateY(-8px)
   ===================================================================== */
@keyframes fa-apparaitre { from { opacity: 0; transform: translateY(-8px); } }
#resultats li{ animation: fa-apparaitre 300ms ease backwards; }
#resultats li:nth-child(1){ animation-delay: 0s; }
#resultats li:nth-child(2){ animation-delay: 0.04s; }
#resultats li:nth-child(3){ animation-delay: 0.08s; }
#resultats li:nth-child(4){ animation-delay: 0.12s; }
#resultats li:nth-child(5){ animation-delay: 0.16s; }
#resultats li:nth-child(6){ animation-delay: 0.20s; }
#resultats li:nth-child(7){ animation-delay: 0.24s; }
#resultats li:nth-child(8){ animation-delay: 0.28s; }
.micro,
#voile .sous,
.micro, #voile .sous{ font-size: 13px; }

#resultats li .type-lieu, #timeline .bornes{ font-size: 13px; }

/* ---- Display : TWK Lausanne 600, interlignage 0.9, chasse serrée ---- */
#voile h1 { font-family: var(--police); font-weight: 600; line-height: 0.9; letter-spacing: -0.03em; }
#titre h1, #timeline .an{ font-weight: 600; }
 #timeline .an{ line-height: 0.9; }
 #resultats li .nom-lieu{ letter-spacing: -0.02em; }
#curseur { background: var(--hairline); }
#curseur::-webkit-slider-thumb { background: var(--texte); border-color: var(--encre); }
#curseur::-moz-range-thumb { background: var(--texte); border-color: var(--encre); }
#champ-recherche::placeholder { color: var(--muter); }

/* ---- Soulignement de lien du site (_animation.scss .hover_line) :
   dégradé qui pousse depuis la gauche, 0.4s, 2px ---- */
.fa-lien {
  --p: 0%;
  background: linear-gradient(currentColor 0 0) calc(100% - var(--p)) 100% / var(--p) 2px no-repeat;
  padding-bottom: 3px;
  transition: background-size 0.4s var(--ease), background-position 0s, opacity 0.4s var(--ease);
}
@media (hover: hover) { .fa-lien:hover { --p: 100%; background-size: 100% 2px; } }

/* ---- Compteur à rouleau (Counter/index.tsx) : chiffres empilés,
   glissement horizontal piloté par GSAP ---- */
.odo { position: relative; display: inline-block; overflow-x: visible; overflow-y: clip; vertical-align: top; }
/* seul le roulement vertical est masque : avec un interlettrage negatif la
   colonne est plus etroite que son chiffre, et un clip horizontal rognait
   le flanc droit du 9 (fiche pays « 69 ») et du 6 du millesime */
.odo .js-number { display: block; text-align: center; will-change: transform; }
.odo .js-number:not(:first-child) { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- Révélation par caractères (Typo/Chars) : masque + yPercent ---- */
.fa-chars { display: inline-block; overflow: clip; padding-bottom: 0.115em; margin-bottom: -0.115em; }
.fa-chars .char { display: inline-block; will-change: transform; }
/* Le voile s'efface vite : c'est le rideau WebGL qui porte la transition */
#voile { transition: opacity 1.4s var(--ease), visibility 1.4s var(--ease); }

/* Jauge de chargement : même surtitre Herbik italic que le reste du voile */
#voile .jauge { font-family: var(--herbik); font-style: italic; font-weight: 500;
  font-size: 13px; letter-spacing: normal; text-transform: none; }
#voile .entree { border-color: var(--hairline); color: var(--texte); }
#voile .entree:hover { opacity: 0.65; }

/* Timeline : remplissage de progression au brand-blue (pas de dégradé) */


/* =====================================================================
   Recherche en verre liquide : le champ est transparent, la lentille est
   rendue dans le pass post-process WebGL (uVerre* de matPost).
   ===================================================================== */
#recherche { width: min(252px, 37vw); }   /* 40 % plus étroit */
#champ-recherche {
  /* pas de bordure CSS : le liseré est celui de la lentille WebGL (uVerre*) */
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; border-radius: 999px; padding: 14px 24px; text-align: center;
  transition: text-align 0.4s var(--ease);
}
#champ-recherche:focus { text-align: left; }
#resultats:not(.ouvert) { position: absolute; left: 0; right: 0; }
#resultats { margin-top: 8px; border-radius: 18px; overflow: hidden;
  background: rgba(5, 18, 54, 0.72); backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 253, 226, 0.12); }
#resultats li:first-child { border-top: none; }

/* Wordmark statique. */
#wordmark { position: relative; display: inline-block; cursor: default; }

/* =====================================================================
   Curseur DOS : au focus le placeholder s'efface et un trait fin clignote
   à la position d'insertion (steps(1), ~530 ms comme un VGA).
   ===================================================================== */
#recherche { position: relative; }
#champ-recherche { caret-color: transparent; }
body.recherche-active #champ-recherche::placeholder { color: transparent; }
#mesure-recherche {
  position: absolute; visibility: hidden; white-space: pre; pointer-events: none;
  font: inherit; font-family: var(--police); font-size: 14px; letter-spacing: 0;
}
#caret-dos {
  position: absolute; top: 50%; width: 1.5px; height: 19px; margin-top: -9.5px;
  background: var(--texte); opacity: 0; pointer-events: none;
}
body.recherche-active #caret-dos { animation: caret-dos 1.06s steps(1) infinite; }
@keyframes caret-dos { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.titre-bloc { font-family: var(--herbik); font-style: italic; font-weight: 500;
  font-size: 13px; line-height: 0.9; color: var(--muter); margin-bottom: 12px; }

/* Écart projeté d'ici 2050, à côté de la note du critère */

/* La liste de résultats reprend la typo du système, pas la mono d'origine */
#resultats .vide { font-family: var(--herbik); font-style: italic; font-weight: 500;
  font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--muter); }

/* =====================================================================
   VOILE D'ENTRÉE — fond noir, composition centrée, effets discrets :
   champ de lignes en ambiance, grain animé, révélation par caractères.
   ===================================================================== */
:root { --noir: #000000; --filet: rgba(255, 253, 226, 0.16); }

#voile {
  background: var(--noir);
  display: flex; align-items: center; justify-content: center; gap: 0;
  transition: opacity 0.7s var(--ease), visibility 0s 0.7s;
}

/* ---- le soleil fromanother en fond : SES couleurs, opacité 50 %, rien
   d'autre — ni masque, ni voile, ni halo ---- */
.v-champ { position: absolute; inset: 0; overflow: hidden; opacity: 0.5; }
#v-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.v-centre { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
#v-flux { position: absolute; inset: -10% -6%; width: 112%; height: 120%; }
#v-flux path { fill: none; stroke: rgba(255, 253, 226, 0.5); stroke-width: 0.6;
  vector-effect: non-scaling-stroke; }
#v-flux .g1 { animation: v-derive-a 19s ease-in-out infinite alternate; }
#v-flux .g2 { animation: v-derive-b 25s ease-in-out infinite alternate; }
#v-flux .g3 { animation: v-derive-c 31s ease-in-out infinite alternate; }
@keyframes v-derive-a { to { transform: translate3d(-2.2%, 1.4%, 0) scaleY(1.06); } }
@keyframes v-derive-b { to { transform: translate3d(2.8%, -1.8%, 0) scaleY(0.94); } }
@keyframes v-derive-c { to { transform: translate3d(-1.4%, -2.4%, 0) scaleY(1.09); } }

/* ---- grain animé : déplacé par pas, jamais interpolé (sinon il glisse) ---- */
.v-grain { position: absolute; inset: -120%; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter>\
<rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: v-grain 0.9s steps(6) infinite; }
@keyframes v-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ---- composition centrée ---- */
.v-centre { position: relative; z-index: 1; display: inline-flex;
  flex-direction: column; align-items: center; gap: 20px;
  max-width: min(88vw, 640px); }
.v-eyebrow span { display: inline-block; }
.v-eyebrow { font-family: var(--police); font-weight: 500;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 253, 226, 0.66); overflow: visible; white-space: normal;
  line-height: 1.6; text-align: center;
  width: 0; min-width: 100%; padding-bottom: 0.2em; }
.v-eyebrow-bas { margin-top: -6px; }

#v-wordmark { font-family: var(--police); font-weight: 600;
  font-size: clamp(46px, 9vw, 132px); line-height: 0.9; letter-spacing: -0.04em;
  color: var(--texte); margin: 0; white-space: nowrap; }
#v-wordmark em { font-style: normal; color: var(--bleu); }
#v-wordmark .lettre { display: inline-block; will-change: transform; }
.v-masque { display: inline-block; overflow: clip;
  padding-bottom: 0.12em; margin-bottom: -0.12em; }

/* ---- chargement : filet fin, pourcentage, étoile ---- */
.v-charge { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.v-mono { font-family: var(--police); font-weight: 500;
  font-size: 10px; letter-spacing: 0.2em; color: rgba(255, 253, 226, 0.6);
  font-variant-numeric: tabular-nums; }
.v-barre { width: min(220px, 34vw); height: 1px; background: var(--filet); }
.v-barre i { display: block; height: 1px; width: 0; background: var(--texte);
  transition: width 0.5s var(--ease); }
.v-etoile { width: 11px; height: 11px; fill: var(--texte); opacity: 0.75;
  animation: v-tourne 14s linear infinite; }
@keyframes v-tourne { to { transform: rotate(360deg); } }

/* ---- entrée : soulignement qui se déploie, pas de pilule ---- */
#voile .entree {
  appearance: none; -webkit-appearance: none;
  position: relative; margin-top: 14px; padding: 6px 2px;
  font-family: var(--police); font-weight: 500; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  background: none; border: none; border-radius: 0; color: var(--texte);
  cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
#voile.pret .entree { opacity: 1; transform: none; pointer-events: auto; }
#voile .entree::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--texte); transform: scaleX(0);
  transform-origin: right center; transition: transform 0.4s var(--ease); }
#voile.pret .entree:hover::after { transform: scaleX(1); transform-origin: left center; }

@media (prefers-reduced-motion: reduce) {
  #v-flux .g1, #v-flux .g2, #v-flux .g3, .v-grain, .v-etoile { animation: none; }
}

/* Le bouton d'entrée : neutraliser le rendu natif, sinon WebKit repeint
   un fond par-dessus `background: none`. */
#voile .entree { appearance: none; -webkit-appearance: none; }

/* =====================================================================
   EN-TÊTE — wordmark, recherche et utilitaires sur une seule rangée.
   Les trois blocs partagent la même hauteur et centrent leur contenu :
   leurs hauteurs intrinsèques diffèrent, seul un centrage commun les
   aligne réellement. La recherche est centrée par la mise en page et non
   par un transform, sinon les tweens GSAP la décaleraient.
   ===================================================================== */
#titre, #recherche, #util {
  top: 0; height: 68px; transform: none; display: flex; align-items: center;
}
body.pret #titre, body.pret #recherche, body.pret #util { transform: none; }
#titre { left: 40px; }
#util { right: 40px; top: 0; gap: 22px; }
#recherche {
  left: 0; right: 0; width: auto;
  flex-direction: column; justify-content: center;
}
#champ-recherche { width: min(252px, 37vw); }
#resultats { position: absolute; top: 54px; width: min(330px, 48vw); margin-top: 0; }
@media (max-width: 720px) {
  #titre { left: 20px; } #util { right: 20px; gap: 14px; }
}

/* =====================================================================
   TIMELINE — minimale : un filet, un remplissage crème, un point de 5 px.
   Aucun halo, aucun dégradé. Trois graduations seulement.
   ===================================================================== */
#timeline .an { transition: opacity 0.35s var(--ease); }
body.cale-annee #timeline .an { opacity: 0.92; }

#curseur {
  height: 22px;                       /* zone de saisie confortable */
  background: none;                   /* la piste est un élément dédié */
  margin-top: 26px;                   /* respiration entre l'année et la ligne */
  position: relative; z-index: 2;
}


#timeline .graduations { position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: space-between; pointer-events: none; }
#timeline .graduations span { width: 1.5px; height: 8px;
  background: rgba(255, 253, 226, 0.18); transition: background 0.3s var(--ease); }
#timeline .graduations span.passe { background: rgba(255, 253, 226, 0.6); }

#curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 7px; height: 7px;
  border: none; border-radius: 50%; background: var(--texte);
  transition: transform 0.25s var(--ease); }
#curseur:hover::-webkit-slider-thumb, body.cale-annee #curseur::-webkit-slider-thumb {
  transform: scale(1.5); }
#curseur::-moz-range-thumb { width: 7px; height: 7px; border: none; border-radius: 50%;
  background: var(--texte); }

/* ---- écart projeté ---- */

/* =====================================================================
   MENUS DE L'EN-TÊTE — « Conditions de vie » + engrenage.
   Deux panneaux déroulants ancrés à droite, hairline, fond encre voilé.
   ===================================================================== */
#util .menu-groupe { position: relative; display: flex; align-items: center; }

#bouton-reglages.ouvert { color: var(--texte); }

/* engrenage : trait fin, rotation d'un cran à l'ouverture */
#bouton-reglages { padding: 6px 0 6px 4px; }
#bouton-reglages .rouage { width: 15px; height: 15px; fill: currentColor; display: block; pointer-events: none;
  transition: transform 0.6s var(--ease); }
#bouton-reglages.ouvert .rouage { transform: rotate(90deg); }

/* panneaux : masqués par défaut, glissent depuis le déclencheur */
/* l'en-tête entier passe AU-DESSUS du dossier (z 20), sinon le texte du
   dossier peint par-dessus les menus déroulants */
#util { z-index: 32; }
#menu-reglages {
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  min-width: 218px; padding: 8px 20px;
  /* verre complet : le pass WebGL réfracte le globe, le backdrop-filter
     givre le DOM qui passe derrière (dossier), le voile assoit le texte */
  background: rgba(2, 4, 10, 0.45);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 253, 226, 0.22); border-radius: 10px;
  opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
    visibility 0s 0.4s;
}
#menu-reglages.ouvert {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s;
}

#menu-reglages .bouton-ico { width: 100%; text-align: left; padding: 11px 0;
  border-top: 1px solid var(--filet); }
#menu-reglages .bouton-ico:first-child { border-top: none; }

/* Pastille violette du calque instabilité + note de bas de menu */
.calque[data-couleur="violet"].actif .pastille { background: #906BFF; }
.calque[data-couleur="violet"] .pastille::after { background: #906BFF; }
.note-calques { width: 100%; margin-top: 4px; padding: 10px 0 6px;
  border-top: 1px solid var(--filet);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 253, 226, 0.35); }

/* résultats verrouillés sous la pilule, pas au bord du conteneur */
#resultats { left: 50%; transform: translateX(-50%) translateY(-6px); }
#resultats.ouvert { transform: translateX(-50%); }
#resultats .vide { pointer-events: none; }
#resultats li.vide:hover { background: none; }

/* pistes natives du range neutralisées partout (Firefox gardait la sienne) */
#curseur::-moz-range-track { background: none; border: none; }
#curseur::-webkit-slider-runnable-track { background: none; border: none; }

/* le sous-titre du voile ne se coupe plus sur petit écran */
#voile .v-eyebrow { max-width: 88vw; text-align: center; overflow: visible;
  white-space: normal; line-height: 1.8; }

/* iOS zoome tout champ < 16px : la recherche passe à 16px sur tactile */
@media (pointer: coarse) {
  #champ-recherche { font-size: 16px; }
}

/* ---- mobile : le dossier devient une feuille basse pleine largeur ---- */
@media (max-width: 720px) {
  /* en-tête : wordmark réduit, « Conditions » en chevron seul, pilule étroite */
  #titre h1 { font-size: 22px; }
  #champ-recherche { width: min(190px, 50vw); padding: 11px 16px; }
#timeline{
    left: 50%; transform: translate(-50%, 0); width: min(480px, 86vw); }
  #timeline .an { font-size: 56px; white-space: nowrap; }
  #champ-recherche { width: min(220px, 56vw); }
}

/* =====================================================================
   RAIL DES CALQUES — retour à gauche, centré verticalement avec le globe.
   Annule le mode panneau déroulant : toujours visible, sans boîte.
   ===================================================================== */
#calques {
  position: fixed; left: 40px; top: 50%; right: auto;
  transform: translateY(-50%); z-index: 22;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  min-width: 0; width: auto; padding: 0;
  background: none; border: none; border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: none;
}
#calques .calque { width: auto; padding: 8px 0; border-top: none; }

/* bulle de survol long : verre, à droite de la rangée, centrée sur elle */
#calque-bulle {
  position: fixed; z-index: 40; max-width: 250px;
  transform: translateY(-50%) translateX(-6px);
  padding: 10px 14px; border-radius: 10px;
  background: rgba(2, 4, 10, 0.55);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 253, 226, 0.18);
  font-size: 11.5px; line-height: 1.45; letter-spacing: -0.01em;
  color: rgba(255, 253, 226, 0.85);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
#calque-bulle.visible { opacity: 1; transform: translateY(-50%) translateX(0); }

/* =====================================================================
   POPUP PÉDAGOGIQUE — première activation d'un calque : carte centrale en
   verre liquide (même lentille WebGL que les menus + givre + voile).
   ===================================================================== */
#pedago {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}
#pedago[hidden] { display: none; }
.pedago-carte {
  width: min(440px, 88vw); padding: 30px 32px 26px; border-radius: 16px;
  background: rgba(2, 4, 10, 0.5);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 253, 226, 0.2);
  color: var(--texte);
}
.pedago-titre { display: flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.pastille-pedago { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pedago-carte p { margin: 14px 0 0; font-size: 13.5px; font-weight: 300;
  line-height: 1.6; letter-spacing: -0.01em; color: rgba(255, 253, 226, 0.88); }
.pedago-source { margin-top: 14px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 253, 226, 0.4); }
.entree-pedago {
  appearance: none; -webkit-appearance: none; margin-top: 20px; padding: 6px 2px;
  position: relative; background: none; border: none; cursor: pointer;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--texte);
}
.entree-pedago::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--texte); transform: scaleX(1);
  transform-origin: right center; transition: transform 0.4s var(--ease); }
.entree-pedago:hover::after { transform: scaleX(0); }

/* mobile : rail en pastilles seules, popup inchangé */
@media (max-width: 720px) {
  #calques { left: 14px; }
  /* les noms restaient caches : sept pastilles anonymes, impossible de
     savoir ce qu'on allume. Ils reviennent, plus petits, et la cible tactile
     fait la hauteur recommandee. */
  #calques .calque .nom { display: block; font-size: 11px; letter-spacing: 0; }
  #calques .calque .code { display: none; }
  #calques .calque { padding: 9px 8px; gap: 9px; min-height: 44px; }
  #calques .calque .pastille { width: 11px; height: 11px; }
  #calque-bulle { display: none; }
}

/* =====================================================================
   RECHERCHE REPLIÉE — la classe loupe conserve l'état compact historique ;
   premium.css présente désormais l'invitation à la place du champ.
   ===================================================================== */
#champ-recherche { transition: none; }   /* la largeur appartient à GSAP */
body.loupe #champ-recherche { cursor: pointer; color: transparent; }
body.loupe #champ-recherche::placeholder { color: transparent; }

/* la roue ne garde plus de rotation CSS : tout passe par GSAP */
#bouton-reglages .rouage { transition: none; }
#bouton-reglages.ouvert .rouage { transform: none; }

/* pastille du calque déclin */
.calque[data-cle="declin"].actif .pastille { background: #9A8FB8; }

/* =====================================================================
   ALIGNEMENT HISTORIQUE — premium.css centre désormais la recherche ;
   la liste suit toujours le cadre du champ pendant son déploiement.
   ===================================================================== */
#recherche { align-items: flex-end; padding-right: 78px; }
#resultats { left: auto; right: 78px; transform: translateY(-6px);
  width: min(252px, 37vw); }
#resultats.ouvert { transform: none; }
#resultats li { gap: 10px; }
#resultats li .nom-lieu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#resultats li .type-lieu { flex: none; max-width: 45%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 720px) {
  #recherche { padding-right: 60px; }
  #resultats { right: 60px; width: min(220px, 60vw); }
}

/* le caret DOS n'existe qu'en barre déployée — replié en loupe, rien */
body.loupe #caret-dos { display: none; }
body.loupe #mesure-recherche { display: none; }


/* =====================================================================
   RECHERCHE VIVANTE — la barre est le seul verre : au moment de chercher,
   elle s'étire en carré arrondi et les résultats vivent dedans. La
   lentille WebGL (uVerre) suit ce rectangle pendant tout le morph.
   ===================================================================== */
#champ-recherche { position: relative; z-index: 2; }
#caret-dos { z-index: 3; }
#resultats { position: absolute; left: auto; margin: 0; border: none;
  border-radius: 23px; background: none; backdrop-filter: none;
  -webkit-backdrop-filter: none; overflow: hidden;
  transform: none; transition: opacity 0.25s var(--ease); }
#resultats.ouvert { transform: none; }
#resultats li:first-child { border-top: 1px solid var(--hairline); }


/* survol : une buée de crème, pas une plaque sombre */
#resultats li:hover, #resultats li.choisi { background: rgba(255, 253, 226, 0.07); }

/* la piste sous l'année épouse exactement la largeur du millésime */
#timeline .an { display: inline-block; }
#curseur { display: block; width: var(--l-an, 100%); margin-left: auto; margin-right: auto; }
#timeline .bornes { width: var(--l-an, 100%); margin: 0 auto; }


/* =====================================================================
   RÈGLE DES ANNÉES — 25 traits, un par an. La vague se soulève autour de
   l'année active, anticipe le survol, l'année courante est une aiguille.
   Le range natif reste l'instrument (invisible, par-dessus).
   ===================================================================== */
#timeline .regle { display: flex; justify-content: space-between; align-items: flex-end;
  height: 38px; width: var(--l-an, 100%); margin: 0 auto; pointer-events: none; }
#timeline .regle i { width: 1.5px; height: 10px; border-radius: 1px;
  background: var(--texte); transform-origin: bottom;
  opacity: 0.25; will-change: transform, opacity; }
#curseur { display: block; width: var(--l-an, 100%); height: 44px;
  margin: -41px auto 0; position: relative; z-index: 2; cursor: ew-resize;
  background: none; }
#curseur::-webkit-slider-thumb { opacity: 0; }
#curseur::-moz-range-thumb { opacity: 0; }
#timeline .bornes { margin-top: 2px; }


/* =====================================================================
   BARRE CENTRÉE SUR LE DOSSIER — quand la fiche est ouverte, la barre de
   recherche s'aligne sur l'axe de la colonne ville (--centre-dossier est
   posé en JS : distance bord droit → centre du panneau).
   ===================================================================== */
#recherche { transition: padding-right 0.6s var(--ease); }

/* =====================================================================
   COMPOSEUR DE STORY — pop-up en verre : aperçu vivant à gauche, les
   données à cocher à droite, la planète en fond en option.
   ===================================================================== */
#story-popup { position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.35); }
#story-popup[hidden] { display: none; }
#story-partager:disabled { opacity: 0.6; cursor: progress; }
.story-carte { width: min(620px, 92vw); background: #02040a; }
.story-corps { display: flex; gap: 28px; margin-top: 20px; align-items: stretch; }
/* hauteur fluide partout : une fenetre basse, de bureau comme de telephone,
   ne doit jamais pousser le bouton de partage sous la ligne de flottaison */
#story-apercu { width: auto; height: min(427px, 62dvh); aspect-ratio: 9 / 16;
  border-radius: 14px; flex: none;
  border: 1px solid rgba(255, 253, 226, 0.16); background: #070706; }
.story-opts { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.story-opt { display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid rgba(255, 253, 226, 0.1); cursor: pointer;
  font-size: 13px; letter-spacing: -0.01em; color: rgba(255, 253, 226, 0.88); }
.story-opt input { display: none; }
.story-opt i { width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 1px solid rgba(255, 253, 226, 0.45);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease); }
.story-opt input:checked + i { background: var(--texte); border-color: var(--texte); }
#story-partager { margin-top: auto; align-self: flex-start; }
@media (max-width: 720px) {
  .story-corps { flex-direction: column; align-items: center; }
  /* l'apercu tenait 320 px de haut : le bouton de partage tombait alors sous
     la ligne de flottaison de la carte, il fallait defiler pour partager */
  /* telephone en portrait : les options passent SOUS l apercu, il faut donc
     lui laisser moins de hauteur pour que le bouton reste visible */
  #story-apercu { height: min(313px, 42dvh); }
  .story-opts { width: 100%; }
  .story-corps { gap: 14px; margin-top: 14px; }
  .story-carte { padding: 22px 22px 18px; }
}


/* pastille du calque déclin : mauve aussi à l'état actif */
.calque[data-cle="declin"].actif .pastille::after { background: #9A8FB8; }


/* =====================================================================
   INTRO PLANÈTE — le voile laisse voir la terre, surface sombre, halo
   bleu ; le clic Explorer éveille la surface (uEveil côté WebGL).
   ===================================================================== */
#voile { background: radial-gradient(ellipse 100% 92% at 50% 44%,
  rgba(4, 4, 5, 0.26) 0%, rgba(4, 4, 5, 0.52) 60%, rgba(4, 4, 5, 0.82) 100%); }

/* accroche : « Paris — c'est chez vous ? » / « Et ta ville ? » */
/* pastille d'invitation : posee au-dessus du millesime, dans le panneau
   temporel, avec une croix pour la congedier */
#accroche { position: absolute; bottom: 100%; left: 0; margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 2px; z-index: 25;
  background: rgba(5, 18, 54, 0.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 253, 226, 0.18); border-radius: 999px;
  padding: 0 4px 0 2px; transition: border-color 0.3s var(--ease); }
#accroche:hover { border-color: rgba(255, 253, 226, 0.42); }
#accroche[hidden] { display: none; }
#accroche button { background: none; border: none; cursor: pointer;
  font-family: var(--police); color: var(--texte); }
#accroche-txt { font-size: 13px; letter-spacing: -0.01em; padding: 9px 6px 9px 14px; }
#accroche-x { font-size: 15px; line-height: 1; padding: 8px 9px; opacity: 0.5;
  transition: opacity 0.25s var(--ease); }
#accroche-x:hover { opacity: 1; }

/* « dans 24 ans » : la distance vécue, sous le millésime */
#timeline .an-distance { font-family: var(--police); font-weight: 500;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muter); margin: -2px 0 4px; }
body:not(.pret) #titre, body:not(.pret) #recherche, body:not(.pret) #util,
body:not(.pret) #calques, body:not(.pret) #timeline, body:not(.pret) #accroche{
  opacity: 0; pointer-events: none; }


/* annonce pour lecteur d'ecran : presente dans l'arbre, invisible a l'oeil */
.lecteur-seul { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* encoche et Dynamic Island : le chrome haut ne passe plus dessous */
#titre, #recherche, #util {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(68px + env(safe-area-inset-top, 0px));
}
#titre { padding-left: env(safe-area-inset-left, 0px); }
#util { padding-right: env(safe-area-inset-right, 0px); }

.calque:focus-visible, .bouton-ico:focus-visible, #accroche button:focus-visible, .story-opt:focus-within, #story-partager:focus-visible{
  outline: 2px solid var(--texte); outline-offset: 3px; border-radius: 6px; }
/* les cases du composeur sont masquees : le focus se voit sur leur pastille */
.story-opt input:focus-visible + i { outline: 2px solid var(--texte); outline-offset: 3px; }


/* le curseur d'annee : son pouce est invisible, il lui faut un focus visible */
#curseur:focus-visible { outline: none; }
#curseur:focus-visible ~ .regle i:nth-child(1),
#timeline:focus-within .regle i { background: var(--texte); }
#timeline:focus-within .an { text-decoration: underline; text-underline-offset: 10px;
  text-decoration-thickness: 2px; text-decoration-color: rgba(255, 253, 226, 0.5); }

/* composeur de story sur mobile : la carte défile, le fond se ferme */
#story-popup { overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) {
  #story-popup { align-items: flex-start; background: rgba(0, 0, 0, 0.72);
    padding: max(14px, env(safe-area-inset-top)) 0 max(14px, env(safe-area-inset-bottom)); }
  .story-carte { background: #02040a; }
  #story-partager { align-self: stretch; text-align: center; min-height: 48px; margin-top: 14px; }
  .story-opt { min-height: 44px; }
  #pedago { background: rgba(0, 0, 0, 0.55); }
}

/* iOS : pas de rebond de page, pas de flash au toucher, pas de menu long-press sur le globe */
html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
#scene { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
button, .calque, #curseur { touch-action: manipulation; }
#bouton-reglages, #accroche-x{ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* le partage TERRA vit dans le menu réglages, en tête */
#menu-reglages #bouton-partager { color: var(--texte); }
@media (max-width: 720px) { .story-carte { background: rgba(2, 4, 10, 0.94); } }
/* le champ deploye est deja son propre etat de focus : pas de cadre par-dessus (rectangle blanc sur iOS) */
#champ-recherche:focus, #champ-recherche:focus-visible { outline: none; }

/* tactile large (iPad, iPhone paysage) : rangées de calques et pilules d'alternatives à 44 px */
@media (pointer: coarse) {
  .calque { min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
}

/* iPhone en paysage (large mais bas) : l'annee et le rail des calques se
   partageaient le meme coin ; tout se resserre pour tenir en 343 px de haut.
   `body.pret #timeline` est necessaire : la regle d'entree porte cette
   specificite et gagnerait sinon avec son translate(-50%). */
/* (pointer: coarse) est indispensable : sans lui, une fenetre de bureau
   simplement basse (1440x500) basculait dans la mise en page telephone,
   croix detachee de la fiche et rail des calques efface. */
@media (min-width: 721px) and (max-height: 520px) and (pointer: coarse) {
  #timeline, body.pret #timeline {
    left: auto; right: 24px; bottom: 6px; transform: none;
    width: min(280px, 34vw); text-align: right; }
  #timeline .an { font-size: 38px; text-align: right; }
  #timeline .an-distance { text-align: right; }
  #curseur { margin-top: 6px; }
  /* sept rangees a 44 px ne tiennent pas dans 343 px de haut : le rail passe
     en deux colonnes plutot que de rapetisser les cibles tactiles */
  #calques { top: 50%; flex-flow: column wrap; max-height: 190px; gap: 0 18px; }
  .calque, #calques .calque { min-height: 44px; padding: 4px 8px; }
  /* la feuille basse du mobile n'a pas de sens sur 343 px : on revient au rail */
  #story-apercu { width: 120px; height: 214px; }
  .story-corps { flex-direction: row; }
}
@media (pointer: coarse) { #champ-recherche { min-height: 44px; } }

/* =====================================================================
   COMPOSEUR DE STORY — relecture d'accessibilite : la carte tient toujours
   dans l'ecran, la sortie existe au doigt, les options se prennent au
   clavier, et rien ne descend sous 44 px sur ecran tactile.
   ===================================================================== */
.story-carte { max-height: calc(100dvh - 28px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pedago-titre { position: relative; padding-right: 42px; }
#story-fermer { position: absolute; top: -6px; right: -8px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--texte); opacity: 0.65;
  transition: opacity 0.25s var(--ease); }
#story-fermer:hover { opacity: 1; }
#story-fermer svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.6;
  fill: none; stroke-linecap: round; }
/* la case reste invisible mais focalisable : `display:none` la sortait de
   l'ordre de tabulation et des lecteurs d'ecran */
.story-opt input { display: revert; position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (pointer: coarse) {
  .story-opt { min-height: 44px; }
  #story-partager { min-height: 44px; display: inline-flex; align-items: center; }
}
/* ecran bas (paysage telephone) : l'apercu retrecit pour que le bouton
   de partage reste visible sans defiler */
/* ecran bas, de bureau comme de telephone : les options reviennent A COTE de
   l apercu, ce qui rend sa hauteur possible. Pas de (pointer: coarse) ici :
   c est cette regle qui empeche le bouton de partage de tomber sous la ligne
   de flottaison dans une fenetre de 500 px. */
@media (max-height: 560px) {
  #story-apercu { height: min(313px, 62dvh); }
  .story-corps { flex-direction: row; gap: 18px; margin-top: 12px; align-items: flex-start; }
  .story-opt { padding: 6px 0; min-height: 38px; }
  .story-carte { padding: 18px 22px 14px; }
}
body:not(.pret) { --police: "Terra Entry", -apple-system, sans-serif; }
body:not(.pret) #titre, body:not(.pret) #recherche, body:not(.pret) #util,
body:not(.pret) #calques, body:not(.pret) #timeline{
  content-visibility: hidden;
}

/* les grilles des calques arrivent apres l entree : tant qu'elles ne sont pas
   la, le rail respire doucement plutot que d'allumer un calque vide */
body.calques-en-attente #calques { opacity: 0.55; }
body.calques-en-attente .calque .pastille { animation: attente-calque 1.6s ease-in-out infinite; }
@keyframes attente-calque { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { body.calques-en-attente .calque .pastille { animation: none; } }

/* La liste signale que l'annuaire arrive si l'on cherche avant son chargement. */

/* les rangees de resultats faisaient 41 px sous le doigt, sous le seuil de 44 */
@media (pointer: coarse) {
  #resultats li { min-height: 44px; display: flex; align-items: center; }
}

/* Mesure a l'ecran : un calque eteint tombait a 3,04:1, sous le seuil AA de
   4,5. Ce sont les sept commandes principales du produit, et elles se lisent
   par-dessus un globe dont la luminosite varie. L'ecart avec un calque allume
   reste net (0,58 contre 0,95), la hierarchie tient. */
.calque:not(.actif) { opacity: 0.58; }
.calque { opacity: 0.95; }

/* defaut releve en relecture : les boutons du chrome restaient sous 44 px au
   doigt (partage 34, son 35, langue 35, Explorer 24) */
@media (pointer: coarse) {
  .bouton-ico, #bouton-partager, #bouton-son, #bouton-langue { min-height: 44px;
    display: inline-flex; align-items: center; }
  .entree { min-height: 48px; padding-top: 14px; padding-bottom: 14px; }
  #accroche button { min-height: 44px; }
}

/* grille de calque manquante : le rail devient inerte et le dit, plutot que
   d'afficher « aucun risque » sur toute la Terre */
body.calques-indisponibles .calque { opacity: 0.35; cursor: not-allowed; }
.calques-note { margin-top: 10px; max-width: 150px; font-size: 10px; line-height: 1.5;
  letter-spacing: 0.02em; color: rgba(255, 253, 226, 0.6); }

/* perte de cartes au chargement : le voile le dit, au lieu d'afficher un
   « 100 % » propre suivi d'un globe incomplet */
.v-panne { margin-top: 18px; max-width: 320px; font-size: 11px; line-height: 1.6;
  color: rgba(255, 253, 226, 0.66); }

/* =====================================================================
   LIRE LE GLOBE AU POINTEUR — étiquette qui suit le curseur (pays, ville
   proche, indice à l'année affichée) et noms des grandes villes posés sur
   la planète. Sous le chrome, au-dessus de la toile.
   ===================================================================== */
#survol { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
  padding: 9px 11px; border-radius: 9px; white-space: normal;
  width: max-content; max-width: min(300px, calc(100vw - 16px)); box-sizing: border-box;
  background: rgba(2, 4, 10, 0.66); border: 1px solid rgba(255, 253, 226, 0.16);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--texte); font-family: var(--police); font-size: 13px; line-height: 1.25;
  opacity: 0; transition: opacity 0.18s var(--ease); will-change: transform; }
#survol.visible { opacity: 1; }
#survol.fige { pointer-events: auto; cursor: pointer; }
#survol.fige { min-height: 44px; box-sizing: border-box; }
#survol .s-nom { font-weight: 600; }
#survol .s-indice { margin-left: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
#survol .s-indice:empty { display: none; }
#survol .s-sous { display: block; margin-top: 4px; font-size: 11px; color: var(--muter); }
#survol .s-detail { display: block; margin-top: 5px; font-size: 11px; font-variant-numeric: tabular-nums; }
#survol .s-note { display: block; margin-top: 6px; font-size: 10px; line-height: 1.4; color: var(--muter); }
#survol .s-detail:empty, #survol .s-note:empty { display: none; }
#survol:focus-visible { outline: 2px solid var(--texte); outline-offset: 3px; }
body.sur-lieu #scene { cursor: pointer; }
#etiquettes { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
body:not(.pret) #etiquettes { display: none; }
.etiquette { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer;
  min-width: 44px; min-height: 44px;
  background: none; border: 0; padding: 3px 6px 10px; margin: 0;
  transform: translate(-50%, -100%); will-change: transform, opacity;
  color: rgba(255, 253, 226, 0.74); font-family: var(--police); font-weight: 500;
  font-size: 10.5px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  transition: color 0.2s var(--ease); }
.etiquette::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 50%; background: rgba(255, 253, 226, 0.7);
  box-shadow: 0 0 6px rgba(255, 253, 226, 0.45); }
.etiquette:hover { color: var(--texte); }
.etiquette:focus-visible { outline: 2px solid var(--texte); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 720px) {
  /* la liste de résultats passait par-dessus le rail des calques : deux textes mêlés */
  body.recherche-active #calques { opacity: 0; pointer-events: none; }
  #survol { font-size: 14px; }
}

/* Place sheet: one reading surface, with year and actions kept in view. */
#dossier {
  --fiche-fond: #080b0ee8; --fiche-secondaire: #b5bec8; --fiche-ligne: #ffffff20;
  position: fixed; z-index: 25; inset: 84px 24px 24px auto; width: min(510px, 46vw);
  display: flex; flex-direction: column; gap: 0; overflow: clip;
  color: #f2f3ef; background: linear-gradient(135deg, #ffffff12, transparent 36%, #8ea9c60c), var(--fiche-fond); backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); isolation: isolate; border: 1px solid var(--fiche-ligne);
  border-radius: 28px; box-shadow: inset 0 1px 0 #ffffff38, inset 1px 0 0 #ffffff12, 0 28px 90px #000b; text-align: left;
  opacity: 0; visibility: hidden; transform: translateX(64px) scale(.94); pointer-events: none;
  transition: opacity 360ms ease, transform 650ms cubic-bezier(.16,1,.3,1), visibility 360ms;
  font-family: var(--police); font-size: 14px; line-height: 1.5;
}
#dossier.ouvert { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
#dossier *, #dossier *::before, #dossier *::after { box-sizing: border-box; }
#dossier p, #dossier h2, #dossier h3 { margin: 0; }
#dossier h3 { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
#dossier button, #dossier summary { font: inherit; color: inherit; cursor: pointer; }
#dossier button { border: 0; background: none; }
#dossier [hidden], #dossier-frappe:empty, #dossier-pop:empty, #dossier-ailleurs:empty, #dossier-evolution:empty { display: none; }
#dossier :is(button, summary, input):focus-visible { outline: 2px solid #416e9b; outline-offset: 3px; }
#dossier .fiche-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 14px; flex: none; }
#dossier .fiche-entete > div { min-width: 0; }
#dossier-scope { color: var(--fiche-secondaire); font-size: 13px; margin-bottom: 4px !important; }
#dossier-nom { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.035em; font-weight: 600; overflow-wrap: anywhere; }
#dossier #dossier-croix { position: static; display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 10px; border-radius: 50%; background: #ffffff0d; opacity: 1; transform: none; pointer-events: auto; }
#dossier-croix svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#dossier #dossier-croix:hover { background: #ffffff22; }
#dossier-temps { flex: none; position: relative; padding: 12px 24px 14px; border-bottom: 1px solid var(--fiche-ligne); background: #ffffff03; }
#dossier .fiche-temps-label { font-family: ui-monospace, 'SFMono-Regular', monospace; letter-spacing: .08em; text-transform: uppercase; position: absolute; top: 14px; left: 24px; font-size: 14px; color: var(--fiche-secondaire); }
body.pret #dossier #timeline { position: relative; inset: auto; width: 100%; max-width: none; padding: 0; margin: 0; transform: none; opacity: 1; background: none; border: 0; border-radius: 0; box-shadow: none; }
#dossier #timeline > .micro:not(.bornes), #dossier #timeline .an-distance { display: none; }
body.pret #dossier #timeline .an { display: block; width: 100%; font-family: var(--police); font-size: 22px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; text-align: right; margin: 0; padding: 0; }
#dossier #curseur { display: block; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0; background: none; }
#dossier #curseur::-webkit-slider-runnable-track { height: 3px; background: #91a39b; border-radius: 2px; }
#dossier #curseur::-webkit-slider-thumb { opacity: 1; width: 18px; height: 18px; margin-top: -7.5px; border: 3px solid #e8ece7; background: #d0def0; }
#dossier #curseur::-moz-range-track { height: 3px; background: #91a39b; border-radius: 2px; }
#dossier #curseur::-moz-range-thumb { opacity: 1; width: 16px; height: 16px; border: 3px solid #e8ece7; background: #d0def0; }
#dossier #timeline .bornes { display: flex; justify-content: space-between; margin: 0; width: 100%; color: var(--fiche-secondaire); font: 12px var(--police); letter-spacing: 0; text-transform: none; }
#dossier .fiche-corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 24px; scrollbar-width: thin; scrollbar-color: #a0aaa4 transparent; }
#dossier .fiche-corps > * + * { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fiche-ligne); }
#dossier .verdict { display: flex; align-items: baseline; gap: 8px; }
#dossier .verdict .point { display: none; }
#dossier .verdict h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.025em; }
#dossier .conseil { font-size: 15px; line-height: 1.55; margin-top: 10px; color: #c1c9d0; }
#dossier .frappe { font: 500 15px/1.5 var(--police); margin-top: 12px; padding-left: 12px; border-left: 2px solid currentColor; }
#dossier .fiche-indice { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
#dossier .score { display: flex; align-items: baseline; gap: 4px; flex: none; }
#dossier .score .valeur { display: flex; font-size: 48px; font-weight: 400; letter-spacing: -.045em; line-height: 1; }
#dossier .score-sur { color: var(--fiche-secondaire); font-size: 15px; }
#dossier .fiche-indice > div:last-child { font-size: 13px; }
#dossier .fiche-secondaire { font-size: 13px; color: var(--fiche-secondaire); line-height: 1.5; }
#dossier-evolution { margin-top: 8px !important; color: var(--fiche-secondaire); font-size: 13px; }
#dossier .fiche-section-titre h3 { font: 13px/1.4 ui-monospace, 'SFMono-Regular', monospace; letter-spacing: .08em; text-transform: uppercase; }
#dossier .fiche-section-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
#dossier-annee { color: var(--fiche-secondaire); font-size: 14px; }
#dossier-risques { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 22px; margin-top: 14px; }
#dossier .fiche-risques > .fiche-secondaire { margin-top: 8px; }
#dossier .risque { border-bottom: 1px solid var(--fiche-ligne); min-width: 0; }
#dossier .risque[open] { grid-column: 1 / -1; }
#dossier .risque summary { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 18px; align-items: center; gap: 6px 10px; min-height: 152px; padding: 16px 0; list-style: none; }
#dossier summary::-webkit-details-marker { display: none; }
#dossier .risque .nom-crit { font: 12px/1.4 ui-monospace, 'SFMono-Regular', monospace; letter-spacing: .075em; text-transform: uppercase; }
#dossier .risk-reading { font-size: 34px; letter-spacing: -.05em; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
#dossier .risk-number { font-weight: 400; }
#dossier .risk-reading small { font-size: 12px; letter-spacing: 0; color: var(--fiche-secondaire); margin-left: 3px; }
#dossier .risk-meter { position: relative; justify-self: center; width: 8px; height: 36px; border-radius: 8px; background: linear-gradient(#db7965, #efbc77 44%, #b5cbea 88%); }
#dossier .risk-meter i { position: absolute; width: 14px; height: 2px; background: #ffffff; left: -3px; top: clamp(2px, calc(100% - var(--risk,0) * 1%), calc(100% - 2px)); transform: translateY(-50%); transition: top 350ms cubic-bezier(.2,.7,.2,1); }
#dossier .risque .val { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
#dossier .risque .v-now { font-size: 13px; font-weight: 500; }
#dossier .risque .v-vers { display: none; }
#dossier .risk-change { grid-column: 1 / -1; color: var(--fiche-secondaire); font-size: 11px; font-variant-numeric: tabular-nums; }
#dossier .risque-chevron { font-size: 20px; font-weight: 300; color: var(--fiche-secondaire); text-align: center; transition: transform 200ms ease; }
#dossier .risque[open] .risque-chevron { transform: rotate(45deg); }
#dossier .risque .detail { white-space: pre-line; color: #c1c9d0; font-size: 14px; line-height: 1.6; padding: 2px 0 20px; }
#dossier .risque[open] .detail { animation: risque-ouvrir 480ms cubic-bezier(.16,1,.3,1) both; }
#dossier .risque summary:hover .nom-crit { color: #b6d7ff; }
@keyframes risque-ouvrir { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
#dossier .trajectoire > .fiche-secondaire { margin: 6px 0 18px; }
#dossier-courbe { display: block; width: 100%; height: 58px; overflow: visible; }
#dossier-courbe .aire { fill: url(#grad-traj); }
#dossier-courbe .trait { fill: none; stroke: #b6d7ff; stroke-width: 1; }
#dossier-courbe .curseur-an { stroke: #9baec5; stroke-width: .3; stroke-dasharray: 1 1; }
#dossier-courbe .point-an { fill: #edf3ff; }
#dossier .bornes-courbe { display: flex; justify-content: space-between; color: var(--fiche-secondaire); font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 12px; }
#dossier .population-valeur { margin: 8px 0; font-size: 25px; letter-spacing: -.025em; }
#dossier-ailleurs .titre-bloc { color: inherit; font: 600 17px/1.3 var(--police); letter-spacing: -.015em; text-transform: none; margin-bottom: 12px; }
#dossier-ailleurs .alt-rangee { display: flex; flex-direction: column; gap: 6px; }
#dossier-ailleurs .alt { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; padding: 10px 12px; border-radius: 8px; background: #ffffff09; text-align: left; }
#dossier-ailleurs .alt:hover { background: #ffffff16; }
#dossier-ailleurs .alt .sc { font-variant-numeric: tabular-nums; color: #b5bec8; }
#dossier .rien { color: var(--fiche-secondaire); font-size: 14px; }
#dossier .fiche-methode summary { min-height: 44px; padding: 10px 0; font-weight: 500; }
#dossier .fiche-methode p { margin-top: 12px; color: var(--fiche-secondaire); font-size: 13px; line-height: 1.6; }
#dossier .sources { overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; }
#dossier .sources a { color: inherit; text-underline-offset: 3px; }
#dossier .coords { text-transform: none; letter-spacing: 0; }
#dossier .duel:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
#dossier .duel { margin-top: 14px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--fiche-ligne); border-radius: 8px; }
#dossier .comparison-missing { flex-basis: 100%; text-align: center; color: var(--fiche-mute); font-size: 12px; }
#dossier .actions { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; flex: none; padding: 14px 18px; border-top: 1px solid var(--fiche-ligne); background: var(--fiche-fond); }
#dossier .actions button { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px; border: 1px solid #ffffff25; border-radius: 8px; font-size: 13px; font-weight: 500; line-height: 1.25; text-align: center; }
#dossier .actions button:hover { background: #ffffff16; }
#dossier .actions #dossier-story { background: linear-gradient(115deg, #d8e5f01f, #8cabc329); color: #f2f3ef; border-color: #ffffff40; }
#dossier.sans-donnees :is(.trajectoire,.fiche-indice) { display: none; }
#scrim-dossier { position: fixed; inset: 0; z-index: 15; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent 35%, #0005); transition: opacity 220ms ease; }
#scrim-dossier.ouvert { opacity: 1; }
body:not(.pret) #dossier { visibility: hidden; }
body.dossier-ouvert #recherche { padding-right: 78px; }
#recherche { z-index: 31; }
#accroche { position: fixed; bottom: 24px; left: 24px; max-width: min(360px, calc(100vw - 48px)); z-index: 21; margin: 0; }
@media(max-width:720px) {
  #accroche { top: 72px; bottom: auto; left: 12px; max-width: calc(100vw - 24px); }
  #dossier { inset: 88px 0 0; width: 100%; border-radius: 22px 22px 0 0; border-bottom: 0; transform: translateY(24px); }
  #dossier .fiche-entete { padding: 16px 20px 10px; }
  #dossier-nom { font-size: 30px; }
  #dossier-temps { padding: 9px 20px 10px; }
  #dossier .fiche-temps-label { left: 20px; top: 11px; }
  #dossier .fiche-corps { padding: 20px; }
  #dossier .actions { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); gap: 6px; }
  #dossier .actions button { font-size: 12px; }
  #dossier .verdict h3 { font-size: 22px; }
  body.dossier-ouvert #calques { opacity: 0; pointer-events: none; }
}
@media(max-width:380px) {
  #dossier .fiche-entete { padding: 12px 16px 8px; }
  #dossier-nom { font-size: 27px; }
  #dossier .fiche-corps { padding: 18px 16px; }
  #dossier .risque summary { gap: 7px; }
  #dossier .risque .nom-crit { font-size: 13px; }
  #dossier .risque .v-now { font-size: 12px; }
  #dossier .fiche-indice { gap: 14px; }
}
@media(max-height:500px) and (orientation:landscape) {
  #accroche { top: 8px; bottom: auto; left: 180px; max-width: calc(100vw - 300px); }
  #dossier { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0,1fr) auto; inset: 58px 10px 8px auto; width: min(600px, 78vw); border-radius: 14px; }
  #dossier .fiche-entete { grid-column: 1; grid-row: 1; padding: 12px 16px 8px; border-bottom: 1px solid var(--fiche-ligne); }
  #dossier-nom { font-size: 24px; }
  #dossier-scope { font-size: 11px; }
  #dossier-temps { grid-column: 2; grid-row: 1; padding: 10px 56px 0 12px; }
  #dossier .fiche-temps-label { left: 12px; top: 12px; }
  #dossier #dossier-croix { position: absolute; top: 8px; right: 8px; z-index: 2; }
  #dossier #timeline .bornes { display: none; }
  #dossier .actions { grid-column: 1 / -1; grid-row: 3; padding: 6px 10px; }
  #dossier .fiche-corps { grid-column: 1 / -1; grid-row: 2; padding: 16px; }
  body.dossier-ouvert #calques { opacity: 0; pointer-events: none; }
}
@media(prefers-reduced-motion:reduce) { #dossier, #scrim-dossier, #dossier .risk-meter i, #dossier .risque-chevron { transition: none; } #dossier .risque[open] .detail { animation: none; } }

#layer-context { white-space: pre-line; max-width: 210px; margin-top: 16px; color: #d8e0e9; font: 11px/1.6 var(--police); text-align: left; letter-spacing: 0; }
@media(max-width:720px), (max-height:500px) { #layer-context { max-width: 165px; font-size: 10px; margin-top: 8px; } }

#dossier .fiche-entete { padding-top: 14px; padding-bottom: 8px; }
#dossier-temps { padding-top: 10px; padding-bottom: 8px; }
#dossier #timeline .bornes { display: none; }
#dossier .fiche-temps-label { font-size: 11px; }
#dossier .fiche-bilan { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; }
#dossier .fiche-indice { grid-column: 1; grid-row: 1 / 3; display: block; margin: 0; }
#dossier .fiche-indice > div:last-child { margin-top: 8px; font-size: 12px; }
#dossier .fiche-indice .fiche-secondaire { font-size: 12px; }
#dossier .verdict { grid-column: 2; align-self: end; }
#dossier .verdict h3 { font-size: 20px; font-weight: 500; }
#dossier .conseil { grid-column: 2; margin: 0; font-size: 13px; }
#dossier-evolution, #dossier-duel { grid-column: 1 / -1; }
#dossier .fiche-risques > .frappe { display: none; }
#dossier .risque summary { min-height: 110px; padding: 10px 0; }
#dossier .fiche-corps { padding-top: 12px; }
#dossier.sans-donnees .fiche-bilan { display: block; }
#dossier.sans-donnees .conseil { margin-top: 12px; }
@media(max-width:380px) { #dossier .fiche-bilan { gap: 8px 12px; } #dossier .score .valeur { font-size: 44px; } #dossier .verdict h3 { font-size: 18px; } #dossier-risques { column-gap: 16px; } #dossier .risk-reading { font-size: 30px; } }
@media(max-height:500px) and (orientation:landscape) { #dossier .fiche-entete { padding: 12px 16px 8px; } #dossier-temps { padding: 10px 56px 0 12px; } }

#dossier::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
#dossier::after { content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, #c5e0ff18 48%, transparent 60%); transform: translateX(-80%); }
#dossier.ouvert::after { animation: verre-reflet 1050ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes verre-reflet { to { transform: translateX(80%); } }
#dossier .risque { border: 1px solid #ffffff14; border-radius: 14px; padding: 0 12px; background: linear-gradient(145deg,#ffffff09,#ffffff02); transition: background 250ms, border-color 250ms; }
#dossier .risque:hover, #dossier .risque[open] { background: linear-gradient(145deg,#ffffff13,#ffffff04); border-color: #ffffff30; }
#dossier-risques { gap: 8px; margin-top: 10px; }
#dossier .risk-reading { font-size: 29px; }
#dossier .risque .nom-crit { font-size: 11px; letter-spacing: .045em; }
#dossier .risque .detail { padding-bottom: 14px; font-size: 13px; }
#dossier .risk-meter i { box-shadow: 0 0 8px #ffffff80; transition: top 650ms cubic-bezier(.16,1,.3,1); }
#dossier .fiche-section-titre h3 { font-size: 11px; }
#dossier .fiche-indice > div:last-child { margin-top: 4px; }
#dossier .verdict h3 { font-size: 18px; }
#dossier .conseil, #dossier .fiche-secondaire { line-height: 1.4; }
#dossier .fiche-corps { padding-bottom: 16px; }
#dossier .actions { padding-top: 8px; padding-bottom: max(8px,env(safe-area-inset-bottom)); background: #080b0ef5; }
body.pret #dossier #timeline .an { font-size: 28px; }
#dossier #timeline .regle { display: flex; width: 100%; height: 36px; margin: 0; }
#dossier #timeline .regle i { background: #e6edf3; width: 2px; }
#dossier #curseur { width: 100%; margin: -39px 0 0; height: 44px; }
#dossier #curseur::-webkit-slider-runnable-track { background: transparent; }
#dossier #curseur::-moz-range-track { background: transparent; }
#dossier #curseur::-webkit-slider-thumb { opacity: 0; }
#dossier #curseur::-moz-range-thumb { opacity: 0; }
#timeline .an-distance { display: none; }
#layer-context { max-width: 220px; padding: 10px 12px; margin-top: 14px; border-left: 1px solid #ffffff35; background: linear-gradient(90deg,#05090e99,transparent); color: #b7c4d3; font-size: 10px; line-height: 1.6; }
#layer-context::first-line { color: #f2f3ef; font-size: 12px; }
@media(max-width:720px) { #dossier .fiche-entete { padding: 12px 16px 8px; } #dossier-nom { font-size: 27px; } #dossier-temps { padding: 8px 16px 4px; } #dossier .fiche-temps-label { left: 16px; } #dossier .fiche-corps { padding: 12px 16px; } }
@media(max-height:500px) and (orientation:landscape) { #dossier-temps { padding: 6px 56px 0 12px; } #dossier .fiche-temps-label { left: 12px; font-size: 9px; } body.pret #dossier #timeline .an { font-size: 22px; } }
@media(prefers-reduced-motion:reduce) { #dossier::after { display: none; } #dossier, #dossier .risque, #dossier .risk-meter i { transition: none; } #dossier .risque[open] .detail { animation: none; } }

#model-notice { position: fixed; left: 24px; bottom: 22px; z-index: 12; max-width: 248px; padding: 12px 14px; background: #080c12d9; border: 1px solid #ffffff16; border-radius: 12px; color: #aebbc9; font: 11px/1.5 var(--police); backdrop-filter: blur(14px); }
#model-notice #layer-context { margin: 0 0 6px; padding: 0; border: 0; background: none; max-width: none; }
#model-notice p { margin: 0; }
#model-notice a { display: flex; align-items: center; min-height: 44px; margin-top: 6px; color: #e7edf4; text-underline-offset: 3px; }
body:not(.pret) #model-notice { display: none; }

.etiquette { transition: opacity 350ms ease, color 200ms ease; }
@media(max-width:720px), (max-height:500px) { #model-notice { left: 10px; bottom: 10px; max-width: 155px; padding: 8px 10px; font-size: 9px; } #model-notice #layer-context { font-size: 9px; line-height: 1.4; } body.dossier-ouvert #model-notice { visibility: hidden; } }
@media(prefers-reduced-motion:reduce) { .etiquette { transition: none; } }

@media(min-width:721px) and (min-height:501px) { #accroche { bottom: 190px; } }
#model-notice summary { cursor: pointer; color: #c7d0db; min-height: 32px; }
#model-notice details[open] p { margin-top: 6px; }
#model-notice:has(details[open]) { z-index: 40; }
@media(max-width:720px) and (orientation:portrait) { #model-notice { max-width: calc(100vw - 158px); font-size: 9px; } body.pret:not(.dossier-ouvert) #timeline { left: auto; right: 12px; bottom: 16px; width: 130px; transform: none; } body.pret:not(.dossier-ouvert) #timeline .an { font-size: 46px; } }
@media(max-height:500px) and (orientation:landscape) { #calques, body.pret #calques { top: 66px; transform: none; max-height: 176px; } #model-notice { bottom: 8px; } }


@media(max-width:720px), (max-height:500px) { #model-notice #layer-context { max-height: 1.4em; overflow: hidden; } #model-notice:has(details[open]) { max-width: min(300px,calc(100vw - 20px)); width: 300px; } #model-notice:has(details[open]) #layer-context { max-height: none; } #model-notice summary { min-height: 44px; } }

@media(max-height:500px) and (orientation:landscape) { #recherche { pointer-events: none; } #champ-recherche, #explore-city, #resultats.ouvert { pointer-events: auto; } }
html:lang(ja){--police:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;--herbik:'Hiragino Mincho ProN','Yu Mincho',serif;--mono:'Hiragino Kaku Gothic ProN',sans-serif}
html:lang(zh){--police:'PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif;--herbik:'Songti SC','Noto Serif CJK SC',serif;--mono:'PingFang SC','Microsoft YaHei',sans-serif}
html:lang(vi){--police:Arial,sans-serif;--herbik:Georgia,serif}
#bouton-langue{min-height:44px;color:var(--texte);font:14px/1.5 var(--police);text-transform:none;letter-spacing:0}
:is(html:lang(ja),html:lang(zh)) :is(.risk-heading,.fiche-eyebrow,.micro,.nom,.detail){letter-spacing:0;line-height:1.65}
:is(html:lang(ja),html:lang(zh)) .fiche-methode{line-height:1.8}
.risk-heading{overflow-wrap:anywhere}
body.comparaison-active #champ-recherche { caret-color: #b5cbea; }
#model-notice details[open] { animation: beta-reveal 280ms ease-out; }
@keyframes beta-reveal { from { opacity: .6; } to { opacity: 1; } }
@media(max-width:720px) and (orientation:portrait) {
  #calques, body.pret #calques { left: 12px; right: 12px; top: auto; bottom: max(116px,calc(env(safe-area-inset-bottom) + 100px)); transform: none; display: flex; flex-flow: row nowrap; gap: 8px; max-height: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 0; }
  #calques .calque { flex: 0 0 auto; min-height: 44px; padding: 10px 14px; border: 1px solid #ffffff25; border-radius: 24px; background: #080c12e8; white-space: nowrap; }
  #calques .calque.actif { border-color: #b5cbea99; }
  #dossier-risques { grid-template-columns: minmax(0,1fr); gap: 10px; }
  #dossier .risque summary { min-height: 118px; padding: 14px; row-gap: 5px; }
  #dossier .risk-reading { font-size: 32px; }
  body.dossier-ouvert #accroche { visibility: hidden; }
  #dossier .risque .nom-crit { font-size: 12px; }
  #dossier .actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  #dossier-comparer { grid-column: 1 / -1; min-height: 44px; }
}
@media(prefers-reduced-motion:reduce) { #model-notice details[open] { animation: none; } }

/* Method limits accompany the map contact link and the experimental index. */
#map-inspector .v-science { margin: 8px 4px 4px; font-size: 11px; line-height: 1.6; color: var(--glass-muted); letter-spacing: 0; text-transform: none; text-align: left; }
.score-method-note { margin: 12px 0; font-size: 11px; line-height: 1.5; color: var(--fiche-secondaire); }

/* A pinned model reading must leave the primary controls usable. Keep its
   state while the filter picker is open, then show the updated reading. */
body.pret #globe-dock { z-index: 31; }
body:has(#map-inspector.choix-ouvert) #survol { visibility: hidden; pointer-events: none; }