/* gtasix.tools — direction artistique « Route 6 » et système de design.
   Le bord de route de Leonida au crépuscule : panneaux à filet intérieur, enseignes à segments, peinture au sol.
   Palette : le dégradé bleu, violet, magenta, rose, corail, orange et pêche, sur un fond aubergine.
   Un seul geste pour tout le site : le chevron > bascule en V à l'ouverture (menu, accordéons, onglets).
   Propriétés logiques partout (margin-inline, inset-inline) : l'arabe et l'ourdou se lisent de droite à gauche.

   Jetons : couleurs, types (--fs-*), espacements (--e-*), rayons (--r-*), élévations (--ombre-*), mouvement (--duree-*,
   --courbe-*), plans (--z-*), gabarit (--tete-h, --bas-fixe). Les capitales serrées sont réservées aux titres d'affichage
   (h1, h2, .affiche) ; tout le reste se lit en casse normale. */

:root {
  color-scheme: dark;
  /* ---------- Couleurs ---------- */
  --nuit: #1d002e;
  --encre: #12001f;
  --bitume: #26013d;
  --asphalte: #360056;
  --gravier: #4a1f70;
  --trait: #5f3a86;
  --papier: #fff6ee;
  --gris: #cdbcdc;
  --gris-2: #a48fbb;
  --ciel: #3b66cb;
  --ciel-clair: #8fb0ff;
  --violet: #8348c5;
  --magenta: #df3bb8;
  --rose: #f34b9c;
  --corail: #ff7271;
  --orange: #ff904e;
  --peche: #fbcca6;
  --orange-sombre: #47200f;
  --vert: #3ddc84;
  --vert-sombre: #0f3b2c;
  --rouge: #ff5a5f;
  --rouge-sombre: #421626;
  --bleu-sombre: #123247;
  --degrade: linear-gradient(180deg, #3b66cb 0%, #8348c5 26%, #df3bb8 46%, #fe71a0 60%, #ff7271 72%, #ff904e 88%, #fbcca6 100%);
  --degrade-oblique: linear-gradient(160deg, #3b66cb 0%, #8348c5 26%, #df3bb8 46%, #fe71a0 60%, #ff7271 72%, #ff904e 88%, #fbcca6 100%);
  --degrade-ligne: linear-gradient(90deg, #3b66cb, #8348c5, #df3bb8, #fe71a0, #ff7271, #ff904e, #fbcca6);
  /* Surfaces : du plus profond au plus proche */
  --surface-0: var(--encre);
  --surface-1: var(--bitume);
  --surface-2: var(--asphalte);
  --surface-3: var(--gravier);
  /* États : un voile clair au survol, plus marqué à l'appui */
  --voile-survol: #ffffff12;
  --voile-appui: #ffffff21;
  --anneau: var(--peche);

  /* ---------- Types ---------- */
  --titre: "Sofia XC", "Arial Narrow", system-ui, sans-serif;
  --texte: "Sofia", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --interligne-titre: .92;
  --casse-titre: uppercase;
  --espace-titre: .008em;
  --fs-1: .8125rem;   /* 13 : mentions, badges */
  --fs-2: .875rem;    /* 14 : légendes, métadonnées */
  --fs-3: 1rem;       /* 16 : interface */
  --fs-4: 1.0625rem;  /* 17 : lecture */
  --fs-5: 1.25rem;    /* 20 : chapô, intertitres d'interface */
  --fs-6: 1.5rem;     /* 24 : titre de bloc */
  --fs-7: 1.875rem;   /* 30 : titre de carte, h3 */
  --fs-titre-2: clamp(2rem, 6.5vw, 3.2rem);
  --fs-affiche: clamp(2.6rem, 11vw, 5.4rem);

  /* ---------- Espacements (base 4) ---------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;

  /* ---------- Rayons ---------- */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-plein: 999px;
  --rayon: var(--r-3);

  /* ---------- Élévations : ombre portée et liseré de lumière en haut, comme un panneau éclairé ---------- */
  --ombre-1: 0 1px 0 #ffffff0d inset, 0 2px 6px #0006;
  --ombre-2: 0 1px 0 #ffffff12 inset, 0 10px 26px #000a;
  --ombre-3: 0 1px 0 #ffffff17 inset, 0 22px 60px #000c;

  /* ---------- Mouvement ---------- */
  --duree-1: 120ms;
  --duree-2: 200ms;
  --duree-3: 320ms;
  --courbe-sortie: cubic-bezier(.2, .8, .2, 1);
  --courbe-entree: cubic-bezier(.4, 0, 1, 1);
  --courbe-ressort: cubic-bezier(.3, 1.3, .5, 1);
  --transition: .28s var(--courbe-ressort);

  /* ---------- Plans ---------- */
  --z-tete: 40;
  --z-onglets: 45;
  --z-menu: 39;
  --z-notification: 60;

  /* ---------- Gabarit ---------- */
  --gouttiere: 16px;
  --largeur: 1180px;
  --tete-h: 62px;
  --onglets-h: 64px;
  --bas-fixe: 0px; /* hauteur de ce qui reste collé en bas de l'écran (barre d'onglets du téléphone) */
}

/* Écritures : les titres gardent la même force, sans capitales là où elles n'existent pas. */
:lang(ru) { --casse-titre: uppercase; }
:lang(ar) { --titre: "Kufi", "Sofia XC", "Noto Arabe", sans-serif; --texte: "Noto Arabe", "Sofia", sans-serif; --interligne-titre: 1.25; --casse-titre: none; }
:lang(ur) { --titre: "Noto Arabe", "Sofia XC", sans-serif; --texte: "Noto Arabe", "Sofia", sans-serif; --interligne-titre: 1.35; --casse-titre: none; }
:lang(hi) { --titre: "Noto Devanagari", "Sofia XC", system-ui, sans-serif; --texte: "Noto Devanagari", "Sofia", system-ui, sans-serif; --interligne-titre: 1.2; --casse-titre: none; }
:lang(bn) { --titre: "Noto Bengali", "Sofia XC", system-ui, sans-serif; --texte: "Noto Bengali", "Sofia", system-ui, sans-serif; --interligne-titre: 1.25; --casse-titre: none; }
:lang(zh) { --titre: "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", "Sofia XC", sans-serif; --texte: "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", "Sofia", sans-serif; --interligne-titre: 1.12; --casse-titre: none; }

/* Un élément en autre langue (liste des langues) reprend la police de son écriture. */
:lang(ar), :lang(ur), :lang(hi), :lang(bn), :lang(zh) { font-family: var(--texte); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block: calc(var(--tete-h) + 22px) calc(var(--bas-fixe) + 16px); -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--nuit);
  color: var(--papier);
  font-family: var(--texte);
  font-size: var(--fs-4);
  line-height: 1.55;
  font-weight: 450;
  overflow-wrap: break-word;
  padding-block-end: var(--bas-fixe);
}
main { flex: 1; inline-size: 100%; }
img, svg, video { max-inline-size: 100%; display: block; }

/* Titres : h1 et h2 sont des titres d'affichage, en capitales serrées. h3 et au-delà restent en casse normale. */
h1, h2, h3, h4 { margin: 0 0 .4em; }
h1, h2, .affiche {
  font-family: var(--titre);
  font-weight: 800;
  line-height: var(--interligne-titre);
  letter-spacing: var(--espace-titre);
  text-transform: var(--casse-titre);
}
h1 { font-size: var(--fs-affiche); }
h2 { font-size: var(--fs-titre-2); }
h3 {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(1.45rem, 4.5vw, 1.9rem);
  line-height: 1.08;
  letter-spacing: .005em;
}
:lang(ar) h3, :lang(ur) h3, :lang(hi) h3, :lang(bn) h3, :lang(zh) h3 { line-height: var(--interligne-titre); }
h4 { font-size: var(--fs-4); font-weight: 750; line-height: 1.3; }
p { margin: 0 0 1em; }
a { color: var(--peche); text-underline-offset: .18em; text-decoration-thickness: from-font; transition: color var(--duree-1) ease; }
a:hover { color: var(--papier); }
strong, b { font-weight: 750; }
small { font-size: var(--fs-2); }
ul, ol { padding-inline-start: 1.2em; }
hr { border: 0; block-size: 6px; background: repeating-linear-gradient(90deg, var(--orange) 0 34px, transparent 34px 56px); opacity: .7; margin: 32px 0; }
table { border-collapse: collapse; inline-size: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
kbd {
  display: inline-grid; place-items: center;
  min-inline-size: 1.7em; padding: 0 .4em;
  border: 1px solid var(--trait); border-block-end-width: 2px; border-radius: var(--r-1);
  background: var(--surface-0); color: var(--gris);
  font: 700 var(--fs-1)/1.5 var(--texte);
}
::selection { background: var(--rose); color: var(--encre); }

/* Focus : un anneau pêche bien visible, jamais retiré. Sur fond clair, il passe à l'encre. */
:focus-visible { outline: 3px solid var(--anneau); outline-offset: 2px; border-radius: 4px; }
:is(.panneau--clair, .panneau--orange, .panneau--rose, .panneau--ciel, .bandeau-langue) :focus-visible { --anneau: var(--encre); }

/* Icônes du jeu ui.svg : la taille suit le texte, la couleur aussi. */
.icone { inline-size: 1.25em; block-size: 1.25em; flex: none; display: inline-block; vertical-align: -.25em; overflow: visible; }
[dir="rtl"] .icone--miroir { transform: scaleX(-1); }

/* Un élément masqué l'est vraiment, même si une classe lui donne un display. */
[hidden] { display: none !important; }
.visuellement-masque { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100; padding: 10px 14px; background: var(--orange); color: var(--encre); font-weight: 800; border-radius: var(--r-2); transform: translateY(-200%); transition: transform var(--duree-2) var(--courbe-sortie); }
.evitement:focus { transform: none; color: var(--encre); }
.conteneur { max-inline-size: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
@media (min-width: 760px) { :root { --gouttiere: 28px; } }

/* Mouvement réduit : tout s'arrête net, rien ne glisse ni ne clignote. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* gtasix.tools — coquille : en-tête, barre d'onglets du téléphone, menu >I, recherche, choix de langue, pied de page,
   transitions de page. Téléphone d'abord ; au-delà de 1024 px, la barre d'onglets cède la place à la navigation de l'en-tête. */

:root { --z-tete: 50; --z-menu: 47; --z-onglets: 45; }
@media (max-width: 1023.98px) {
  :root { --bas-fixe: calc(var(--onglets-h) + env(safe-area-inset-bottom, 0px)); }
}
/* La carte a sa propre barre en bas, et l'entraînement plein écran prend tout : la barre d'onglets s'efface. */
.page-carte, body[data-ent-plein] { --bas-fixe: 0px; }

/* ---------- En-tête ---------- */
.tete-sentinelle { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 48px; pointer-events: none; visibility: hidden; }
.tete {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-tete);
  background: color-mix(in srgb, var(--nuit) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-block-end: 2px solid var(--gravier);
  view-transition-name: tete;
}
/* Le filet du dégradé apparaît quand l'en-tête se compacte : la page défile dessous. */
.tete::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -2px; block-size: 2px;
  background: var(--degrade-ligne); opacity: 0; transition: opacity var(--duree-3) ease;
}
.tete[data-compact]::after { opacity: .85; }
.tete__rang { display: flex; align-items: center; gap: var(--e-2); block-size: var(--tete-h); transition: block-size var(--duree-3) var(--courbe-sortie); }
.marque {
  display: inline-flex; align-items: center; min-block-size: 44px;
  color: var(--papier); text-decoration: none;
  font-family: "Sofia XC", sans-serif; font-weight: 900; font-size: 1.62rem; letter-spacing: .01em; line-height: 1;
  direction: ltr; unicode-bidi: isolate; flex: none;
  transition: font-size var(--duree-3) var(--courbe-sortie);
}
.marque:hover { color: var(--papier); }
.marque__point { color: var(--orange); }

.nav { display: none; }
.nav__lien {
  position: relative; display: inline-flex; align-items: center; gap: var(--e-2);
  min-block-size: 44px; padding: 0 var(--e-3); border-radius: var(--r-2);
  color: var(--gris); text-decoration: none; font-weight: 650; font-size: var(--fs-3); white-space: nowrap;
  transition: background-color var(--duree-1) ease, color var(--duree-1) ease;
}
.nav__lien .icone { display: none; inline-size: 20px; block-size: 20px; }
.nav__lien:hover { background: var(--voile-survol); color: var(--papier); }
.nav__lien:active { background: var(--voile-appui); }
.nav__lien[aria-current] { color: var(--papier); }
.nav__lien[aria-current] .icone { color: var(--orange); }
.nav__lien[aria-current]::after {
  content: ""; position: absolute; inset-inline: var(--e-3); inset-block-end: 3px; block-size: 3px; border-radius: 3px;
  background: var(--degrade-ligne);
}

.tete__actions { display: flex; align-items: center; gap: var(--e-1); margin-inline-start: auto; }
.bouton-icone {
  display: inline-grid; place-items: center; inline-size: 46px; block-size: 46px;
  border: 0; border-radius: var(--r-2); background: transparent; color: var(--papier); cursor: pointer;
  transition: background-color var(--duree-1) ease, transform var(--duree-1) ease;
}
.bouton-icone:hover { background: var(--voile-survol); }
.bouton-icone:active { background: var(--voile-appui); transform: scale(.94); }
.bouton-icone svg, .bouton-icone .icone { inline-size: 24px; block-size: 24px; }

.tete__recherche {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  inline-size: 46px; block-size: 46px; padding: 0;
  border: 0; border-radius: var(--r-2); background: transparent; color: var(--papier); cursor: pointer;
  transition: background-color var(--duree-1) ease, border-color var(--duree-1) ease;
}
.tete__recherche .icone { inline-size: 24px; block-size: 24px; }
.tete__recherche:hover { background: var(--voile-survol); }
.tete__recherche:active { background: var(--voile-appui); }
.tete__recherche-texte, .tete__recherche kbd { display: none; }

.tete__moi {
  display: none; align-items: center; gap: var(--e-2); min-block-size: 44px; padding: 0 var(--e-3);
  border-radius: var(--r-2); color: var(--papier); text-decoration: none; font-weight: 650; font-size: var(--fs-3);
}
.tete__moi .icone { inline-size: 22px; block-size: 22px; }
.tete__moi:hover { background: var(--voile-survol); color: var(--papier); }
.tete__moi[aria-current] { color: var(--orange); }

/* Bouton du menu : « >I » fermé. À l'ouverture, le > bascule en V et le I vient se loger au milieu du V. */
.menu-bouton { inline-size: 56px; block-size: 50px; }
.menu-bouton svg { inline-size: 42px; block-size: 34px; overflow: visible; }
.menu-bouton .chevron, .menu-bouton .barre {
  transition: transform var(--transition);
  transform-box: view-box;
}
.menu-bouton .chevron { fill: none; stroke-width: 7; stroke-linejoin: miter; stroke-miterlimit: 8; transform-origin: 19px 20px; }
.menu-bouton .barre { fill: var(--papier); transform-origin: 40px 20px; }
.menu-bouton[aria-expanded="true"] { background: var(--voile-survol); }
.menu-bouton[aria-expanded="true"] .chevron { transform: translate(5px, 0) rotate(90deg); }
.menu-bouton[aria-expanded="true"] .barre { transform: translate(-16px, -4px) scaleY(.62); fill: var(--peche); }
[dir="rtl"] .menu-bouton svg { direction: ltr; }

/* ---------- Choix de la langue : sélecteur compact, noms natifs, la langue courante en clair ---------- */
.choix-langue { position: relative; }
.choix-langue__bouton {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-block-size: 44px; padding: 0 var(--e-3); border-radius: var(--r-2);
  color: var(--papier); font-weight: 650; font-size: var(--fs-3); cursor: pointer; list-style: none; user-select: none;
  transition: background-color var(--duree-1) ease;
}
.choix-langue__bouton::-webkit-details-marker { display: none; }
.choix-langue__bouton:hover { background: var(--voile-survol); }
.choix-langue__bouton .icone { inline-size: 20px; block-size: 20px; }
.choix-langue__nom { max-inline-size: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choix-langue__chevron { inline-size: 12px !important; block-size: 12px !important; color: var(--orange); transition: transform var(--transition); }
[dir="rtl"] .choix-langue__chevron { transform: scaleX(-1); }
.choix-langue[open] .choix-langue__chevron { transform: rotate(90deg); }
.choix-langue[open] > .choix-langue__bouton { background: var(--voile-appui); }
.choix-langue__liste {
  position: absolute; z-index: 5; inset-block-start: calc(100% + 6px); inset-inline-end: 0;
  min-inline-size: 220px; max-block-size: min(70vh, 560px); overflow-y: auto;
  margin: 0; padding: var(--e-1); list-style: none;
  background: var(--surface-1); border: 1px solid var(--trait); border-radius: var(--r-3); box-shadow: var(--ombre-3);
}
.choix-langue[open] .choix-langue__liste { animation: deroule var(--duree-2) var(--courbe-sortie); }
.choix-langue__liste a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  min-block-size: 44px; padding: 0 var(--e-3); border-radius: var(--r-2);
  color: var(--papier); text-decoration: none; font-weight: 600;
}
.choix-langue__liste a:hover { background: var(--voile-survol); }
.choix-langue__liste a[aria-current] { color: var(--orange); }
.choix-langue__coche { inline-size: 18px; block-size: 18px; visibility: hidden; }
.choix-langue__liste a[aria-current] .choix-langue__coche { visibility: visible; }
.choix-langue--tete { display: none; }
.choix-langue--pied .choix-langue__bouton { border: 1px solid var(--trait); background: var(--surface-1); }
.choix-langue--pied .choix-langue__nom { max-inline-size: none; }
.choix-langue--pied .choix-langue__liste { inset-block: auto calc(100% + 6px); inset-inline: 0 auto; }
@keyframes deroule { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Barre d'onglets du téléphone ---------- */
.onglets-bas {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-onglets);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-block-end: env(safe-area-inset-bottom, 0px);
  padding-inline: max(env(safe-area-inset-left, 0px), 2px) max(env(safe-area-inset-right, 0px), 2px);
  background: color-mix(in srgb, var(--encre) 90%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-block-start: 1px solid var(--gravier);
  view-transition-name: onglets-bas;
}
.onglets-bas__lien {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-block-size: var(--onglets-h); padding: 6px 2px 4px; min-inline-size: 0;
  color: var(--gris); text-decoration: none;
  font-family: var(--titre); font-weight: 700; font-size: .95rem; line-height: 1.05; letter-spacing: .015em;
  -webkit-tap-highlight-color: transparent;
}
:is(:lang(ar), :lang(ur), :lang(hi), :lang(bn), :lang(zh)) .onglets-bas__lien { font-family: var(--texte); font-size: .78rem; font-weight: 650; }
.onglets-bas__lien span { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onglets-bas__lien .icone { inline-size: 24px; block-size: 24px; transition: transform var(--duree-2) var(--courbe-ressort), color var(--duree-1) ease; }
.onglets-bas__lien::before {
  content: ""; position: absolute; inset-block-start: 6px; inline-size: 56px; block-size: 32px; border-radius: var(--r-plein);
  background: var(--voile-survol); opacity: 0; transform: scaleX(.6); transition: opacity var(--duree-2) ease, transform var(--duree-2) var(--courbe-sortie);
}
.onglets-bas__lien:hover { color: var(--papier); }
.onglets-bas__lien:active .icone { transform: scale(.86); }
.onglets-bas__lien[aria-current] { color: var(--papier); }
.onglets-bas__lien[aria-current] .icone { color: var(--orange); }
.onglets-bas__lien[aria-current]::before { opacity: 1; transform: none; background: color-mix(in srgb, var(--orange) 16%, transparent); }
.onglets-bas__lien[aria-current]::after {
  content: ""; position: absolute; inset-block-start: 0; inline-size: 24px; block-size: 3px; border-radius: 0 0 3px 3px; background: var(--degrade-ligne);
}
.onglets-bas__lien:focus-visible { outline-offset: -4px; border-radius: var(--r-3); }
.page-carte .onglets-bas, body[data-ent-plein] .onglets-bas { display: none; }
/* Clavier virtuel ouvert : la barre laisse la place au champ. */
@media (pointer: coarse) {
  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="color"]), textarea, select):focus) .onglets-bas { visibility: hidden; }
}
/* Ce qui colle en bas de l'écran dans les outils remonte au-dessus de la barre. */
:root .us-barre { inset-block-end: calc(var(--bas-fixe) + 8px); }

/* ---------- Menu >I ---------- */
.menu {
  position: fixed;
  inset: var(--menu-haut, calc(var(--tete-h) + 2px)) 0 0 0;
  z-index: var(--z-menu);
  background: var(--nuit);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--duree-2) ease, transform var(--duree-3) var(--courbe-sortie), visibility 0s linear var(--duree-3);
}
.menu[data-ouvert] { opacity: 1; visibility: visible; transform: none; transition: opacity var(--duree-2) ease, transform var(--duree-3) var(--courbe-sortie), visibility 0s; }
.menu__panneau { display: grid; gap: var(--e-5); max-inline-size: 760px; margin-inline: auto; padding: var(--e-4) var(--gouttiere) calc(var(--e-7) + env(safe-area-inset-bottom, 0px)); }
.menu[data-ouvert] .menu__panneau > * { animation: monte var(--duree-3) var(--courbe-sortie) both; }
.menu[data-ouvert] .menu__panneau > :nth-child(2) { animation-delay: 30ms; }
.menu[data-ouvert] .menu__panneau > :nth-child(3) { animation-delay: 60ms; }
.menu[data-ouvert] .menu__panneau > :nth-child(4) { animation-delay: 90ms; }
.menu[data-ouvert] .menu__panneau > :nth-child(n+5) { animation-delay: 120ms; }
@keyframes monte { from { opacity: 0; transform: translateY(10px); } }
body[data-menu-ouvert] { overflow: hidden; }

.menu__recherche {
  display: flex; align-items: center; gap: var(--e-3); inline-size: 100%;
  min-block-size: 52px; padding: 0 var(--e-4);
  border: 1px solid var(--trait); border-radius: var(--r-plein); background: var(--surface-1);
  color: var(--gris); font-size: var(--fs-4); text-align: start; cursor: pointer;
  transition: border-color var(--duree-1) ease, background-color var(--duree-1) ease;
}
.menu__recherche .icone { inline-size: 22px; block-size: 22px; color: var(--orange); }
.menu__recherche span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__recherche:hover { border-color: var(--orange); background: var(--surface-2); }

.menu__principal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); list-style: none; margin: 0; padding: 0; }
.menu__principal a {
  position: relative; display: flex; align-items: center; gap: var(--e-2);
  min-block-size: 60px; padding: var(--e-2) var(--e-3);
  background: var(--surface-1); border-radius: var(--r-3); outline: 2px solid var(--trait); outline-offset: -6px;
  color: var(--papier); text-decoration: none;
  font-family: var(--titre); font-weight: 800; font-size: clamp(1.12rem, 4.6vw, 1.42rem); line-height: 1.05; letter-spacing: .01em;
  transition: background-color var(--duree-1) ease, transform var(--duree-1) ease;
}
:is(:lang(ar), :lang(ur), :lang(hi), :lang(bn), :lang(zh)) .menu__principal a { font-family: var(--texte); font-size: 1.02rem; font-weight: 700; }
.menu__principal a > span { flex: 1; min-inline-size: 0; overflow-wrap: break-word; }
.menu__principal a .icone { inline-size: 24px; block-size: 24px; color: var(--orange); }
.menu__principal .menu__chevron { display: none; inline-size: 14px; block-size: 14px; color: var(--gris-2); }
[dir="rtl"] .menu__principal .menu__chevron { transform: scaleX(-1); }
.menu__principal a:hover { background: var(--surface-2); color: var(--papier); }
.menu__principal a:active { transform: scale(.98); }
.menu__principal a[aria-current] { background: var(--orange); color: var(--encre); outline-color: var(--encre); }
.menu__principal a[aria-current] .icone, .menu__principal a[aria-current] .menu__chevron { color: var(--encre); }
.menu__principal a:focus-visible { outline: 3px solid var(--anneau); outline-offset: 2px; }

.menu__bloc { display: grid; gap: var(--e-2); }
.menu__bloc[hidden] { display: none; }
.menu__titre, .pied__titre {
  display: flex; align-items: center; gap: var(--e-2); margin: 0;
  font-family: var(--texte); font-size: var(--fs-1); font-weight: 750; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--gris);
}
:is(:lang(ar), :lang(ur), :lang(hi), :lang(bn), :lang(zh)) :is(.menu__titre, .pied__titre) { letter-spacing: 0; font-size: var(--fs-2); }
.menu__titre .icone { inline-size: 16px; block-size: 16px; color: var(--orange); }
.menu__familles, .menu__recents { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu__familles a, .menu__recents a {
  display: flex; align-items: center; gap: var(--e-3); min-block-size: 50px; padding: 0 var(--e-3);
  border-radius: var(--r-2); color: var(--papier); text-decoration: none; font-weight: 650;
  transition: background-color var(--duree-1) ease;
}
.menu__familles a:hover, .menu__recents a:hover { background: var(--surface-1); color: var(--papier); }
.menu__familles .icone, .menu__recents .icone { inline-size: 22px; block-size: 22px; color: var(--orange); }
.menu__famille-nom, .menu__recents span { flex: 1; min-inline-size: 0; }
.menu__familles a[aria-current] { background: var(--surface-1); color: var(--orange); }
.menu__langues { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }
.menu__langues a {
  display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 var(--e-4);
  border: 1px solid var(--trait); border-radius: var(--r-plein); color: var(--papier); text-decoration: none; font-weight: 600; font-size: var(--fs-3);
}
.menu__langues a:hover { border-color: var(--orange); color: var(--papier); }
.menu__langues a[aria-current] { background: var(--orange); border-color: var(--orange); color: var(--encre); }
.menu__installer { display: none; gap: var(--e-2); justify-items: start; padding-block-start: var(--e-2); border-block-start: 1px dashed var(--gravier); }
.menu__installer p { margin: 0; color: var(--gris); font-size: var(--fs-2); }
html[data-installation="possible"] .menu__installer { display: grid; }

@media (min-width: 560px) {
  .menu__principal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu__principal .menu__chevron { display: inline-block; }
  .menu__familles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-2); }
}

/* ---------- Recherche : plein écran sur téléphone, panneau centré sur grand écran ---------- */
.recherche {
  position: fixed; inset: 0; margin: 0;
  inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: none;
  padding: 0; border: 0; background: var(--nuit); color: var(--papier);
  flex-direction: column;
}
.recherche[open] { display: flex; animation: apparait var(--duree-2) var(--courbe-sortie); }
.recherche::backdrop { background: #0a0014d0; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes apparait { from { opacity: 0; transform: translateY(12px); } }
.recherche__tete {
  display: flex; align-items: center; gap: var(--e-1);
  padding: max(var(--e-2), env(safe-area-inset-top, 0px)) var(--gouttiere) var(--e-2) var(--e-2);
  border-block-end: 1px solid var(--gravier); background: var(--nuit);
}
.recherche__champ { position: relative; flex: 1; min-inline-size: 0; display: flex; align-items: center; }
.recherche__champ > .icone { position: absolute; inset-inline-start: 14px; inline-size: 22px; block-size: 22px; color: var(--orange); pointer-events: none; }
.recherche .recherche__champ input {
  inline-size: 100%; min-block-size: 50px; padding-block: 0; padding-inline: 46px 46px;
  border: 2px solid var(--trait); border-radius: var(--r-plein); background: var(--surface-1);
  font-size: var(--fs-4); -webkit-appearance: none; appearance: none;
}
.recherche__champ input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.recherche .recherche__champ input:focus { border-color: var(--orange); outline: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 22%, transparent); }
.recherche__effacer {
  position: absolute; inset-inline-end: 3px; display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px;
  border: 0; border-radius: var(--r-plein); background: transparent; color: var(--gris); cursor: pointer;
}
.recherche__effacer:hover { background: var(--voile-survol); color: var(--papier); }
.recherche__effacer[hidden] { display: none; }
.recherche__effacer .icone { inline-size: 18px; block-size: 18px; }
.recherche__corps { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--e-3) var(--gouttiere) calc(var(--e-6) + env(safe-area-inset-bottom, 0px)); }
.recherche__liste:empty { display: none; }
.recherche__groupe { display: grid; gap: 2px; margin-block-end: var(--e-4); }
.recherche__groupe-titre { padding: var(--e-2) var(--e-3) var(--e-1); }
.recherche__option {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--e-3);
  min-block-size: 58px; padding: var(--e-2) var(--e-3); border-radius: var(--r-3);
  color: var(--papier); text-decoration: none; cursor: pointer;
  transition: background-color var(--duree-1) ease;
}
.recherche__option:hover { background: var(--surface-1); color: var(--papier); }
.recherche__option[aria-selected="true"] { background: var(--surface-2); }
.recherche__option[aria-selected="true"]::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 10px; inline-size: 3px; border-radius: 3px; background: var(--orange); }
.recherche__vignette { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--r-2); background: var(--surface-1); color: var(--orange); }
.recherche__option[aria-selected="true"] .recherche__vignette { background: var(--nuit); }
.recherche__vignette .icone { inline-size: 22px; block-size: 22px; }
.recherche__texte { display: grid; gap: 1px; min-inline-size: 0; }
.recherche__texte strong { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recherche__texte small { color: var(--gris); font-size: var(--fs-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.recherche__option > .icone { inline-size: 16px; block-size: 16px; color: var(--gris-2); opacity: 0; transition: opacity var(--duree-1) ease; }
[dir="rtl"] .recherche__option > .icone { transform: scaleX(-1); }
.recherche__option[aria-selected="true"] > .icone, .recherche__option:hover > .icone { opacity: 1; }
.recherche mark { background: transparent; color: var(--orange); font-weight: 800; text-decoration: underline 2px; text-underline-offset: .2em; }
.recherche__accueil { display: grid; gap: var(--e-4); }
.recherche__accueil:empty { display: none; }
.recherche__puces { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.recherche__puce {
  display: inline-flex; align-items: center; gap: var(--e-2); min-block-size: 44px; padding: 0 var(--e-4);
  border: 1px solid var(--trait); border-radius: var(--r-plein); background: var(--surface-1);
  color: var(--papier); font-weight: 600; text-decoration: none; cursor: pointer;
}
.recherche__puce:hover { border-color: var(--orange); color: var(--papier); }
.recherche__puce .icone { inline-size: 18px; block-size: 18px; color: var(--orange); }
.recherche__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.recherche__lien-discret { min-block-size: 44px; padding: 0 var(--e-2); border: 0; background: none; color: var(--peche); font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.recherche__pied { display: none; }

@media (min-width: 760px) {
  .recherche {
    inset: 9vh 0 auto; margin-inline: auto;
    inline-size: min(700px, calc(100vw - 48px)); block-size: auto; max-block-size: min(78vh, 760px);
    border: 1px solid var(--trait); border-radius: var(--r-4); background: var(--surface-0); box-shadow: var(--ombre-3); overflow: hidden;
  }
  .recherche__tete { padding: var(--e-3); background: var(--surface-0); }
  .recherche__retour { display: none; }
  .recherche__corps { padding: var(--e-3) var(--e-3) var(--e-4); }
  .recherche__pied {
    display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); margin: 0; padding: var(--e-3) var(--e-4);
    border-block-start: 1px solid var(--gravier); color: var(--gris); font-size: var(--fs-2);
  }
  .recherche__pied span { display: inline-flex; align-items: center; gap: var(--e-2); }
  .recherche__pied .icone { inline-size: 13px; block-size: 13px; }
}

/* ---------- Bandeau de suggestion de langue ---------- */
.bandeau-langue { background: var(--peche); color: var(--encre); font-weight: 700; animation: monte var(--duree-3) var(--courbe-sortie); }
.bandeau-langue .conteneur { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-items: center; justify-content: space-between; padding-block: var(--e-1); }
.bandeau-langue a, .bandeau-langue button { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 var(--e-2); color: var(--encre); font-weight: 800; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Pied de page ---------- */
.pied {
  margin-block-start: var(--e-7); padding-block: var(--e-6) var(--e-5);
  background: var(--encre); color: var(--gris); font-size: var(--fs-2);
  border-block-start: 6px solid transparent;
  border-image: repeating-linear-gradient(90deg, var(--orange) 0 34px, transparent 34px 56px) 6;
}
.pied a { color: var(--papier); text-decoration: none; }
.pied a:hover { color: var(--orange); text-decoration: underline; }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5) var(--e-4); }
.pied__marque { grid-column: 1 / -1; display: grid; gap: var(--e-2); justify-items: start; align-content: start; }
.pied__marque p { margin: 0; max-inline-size: 36ch; }
.pied__marque .marque { font-size: 1.5rem; }
.pied__col { display: grid; gap: var(--e-2); align-content: start; min-inline-size: 0; }
.pied__col ul { display: flex; flex-wrap: wrap; column-gap: var(--e-5); list-style: none; margin: 0; padding: 0; }
.pied__col a { display: flex; align-items: center; min-block-size: 44px; font-weight: 550; }
.pied__mention { display: flex; gap: var(--e-2); align-items: flex-start; margin: var(--e-5) 0 0; padding-block-start: var(--e-4); border-block-start: 1px solid var(--gravier); font-size: var(--fs-1); line-height: 1.5; }
.pied__mention .icone { inline-size: 16px; block-size: 16px; margin-block-start: 2px; color: var(--gris-2); }
@media (min-width: 760px) {
  .pied__grille { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
  .pied__marque { grid-column: auto; }
  .pied__col ul { display: grid; }
}

/* ---------- Grand écran : navigation dans l'en-tête, menu en tiroir ---------- */
@media (min-width: 1024px) {
  :root { --tete-h: 70px; }
  .page-carte { --tete-h: 62px; }
  .nav { display: flex; align-items: center; gap: 2px; margin-inline-start: var(--e-4); }
  .choix-langue--tete, .tete__moi { display: inline-flex; }
  .choix-langue--tete { display: block; }
  .onglets-bas { display: none; }
  .tete[data-compact] .tete__rang { block-size: 58px; }
  .tete[data-compact] .marque { font-size: 1.45rem; }
  .page-carte .tete[data-compact] .tete__rang { block-size: var(--tete-h); }
  .page-carte .tete[data-compact] .marque { font-size: 1.62rem; }
  .menu {
    inset-inline: auto 0; inset-block-end: 0;
    inline-size: min(460px, 100vw);
    border-inline-start: 1px solid var(--gravier); box-shadow: var(--ombre-3);
    transform: translateX(24px);
  }
  [dir="rtl"] .menu { transform: translateX(-24px); }
  .menu[data-ouvert] { transform: none; }
  .menu__panneau { padding-inline: var(--e-5); }
  .menu__principal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu__familles { grid-template-columns: 1fr; }
  body[data-menu-ouvert]::after {
    content: ""; position: fixed; inset: 0; z-index: calc(var(--z-menu) - 1);
    background: #0a0014a8; animation: apparait-voile var(--duree-2) ease;
  }
  body[data-menu-ouvert] { overflow: auto; }
}
@keyframes apparait-voile { from { opacity: 0; } }
@media (min-width: 1280px) {
  .nav__lien .icone { display: inline-block; }
  .tete__recherche {
    inline-size: 230px; justify-content: flex-start; padding: 0 var(--e-2) 0 var(--e-3);
    border: 1px solid var(--trait); border-radius: var(--r-plein); background: var(--surface-1); color: var(--gris);
  }
  .tete__recherche .icone { inline-size: 20px; block-size: 20px; color: var(--orange); }
  .tete__recherche:hover { border-color: var(--orange); background: var(--surface-2); }
  .tete__recherche-texte { display: inline; flex: 1; text-align: start; font-size: var(--fs-3); }
  .tete__recherche kbd { display: inline-grid; }
  .tete__actions { gap: var(--e-2); }
}

/* ---------- Transitions de page (amélioration progressive) ---------- */
@view-transition { navigation: auto; }
[data-titre-page] { view-transition-name: titre-page; }
::view-transition-old(root) { animation: var(--duree-2) var(--courbe-entree) both vt-sort; }
::view-transition-new(root) { animation: var(--duree-3) var(--courbe-sortie) both vt-entre; }
::view-transition-group(titre-page) { animation-duration: var(--duree-3); animation-timing-function: var(--courbe-sortie); }
@keyframes vt-sort { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-entre { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* gtasix.tools — composants : panneaux, onglets de panneau, boutons, accordéons, formulaires, onglets, badges de confiance,
   alertes, notifications, états vides, squelettes de chargement, bouton favori, tuiles et lignes de l'espace « Moi ».
   États communs : survol (voile clair), appui (enfoncé), focus (anneau pêche), désactivé (atténué), chargement (aria-busy). */

/* ---------- Panneaux de route ---------- */
.panneau {
  position: relative;
  background: var(--surface-1);
  border-radius: var(--rayon);
  padding: 22px 20px;
  outline: 2px solid var(--trait);
  outline-offset: -7px;
}
.panneau--clair { background: var(--papier); color: var(--encre); outline-color: var(--encre); }
.panneau--orange { background: var(--orange); color: var(--encre); outline-color: var(--encre); }
.panneau--orange a { color: var(--encre); }
.panneau--rose { background: var(--rose); color: var(--encre); outline-color: var(--encre); }
.panneau--ciel { background: var(--ciel); color: var(--encre); outline-color: var(--encre); }
.onglet {
  display: inline-block;
  padding: 3px 12px 1px;
  background: var(--orange);
  color: var(--encre);
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.35;
  text-transform: var(--casse-titre);
  border-radius: 8px 8px 0 0;
  margin-inline-start: 16px;
  transform: translateY(2px);
}
.onglet--rose { background: var(--rose); }
.onglet--ciel { background: var(--ciel); color: #fff; }

.section { padding-block: 34px; }
.section__entete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 18px; margin-block-end: 18px; }
.section__entete h2 { margin: 0; }
.section__intro { color: var(--gris); margin: 4px 0 0; max-inline-size: 60ch; }

/* ---------- Boutons : l'extrémité est une flèche de marquage au sol ---------- */
.bouton {
  --fond: var(--orange);
  --encre-bouton: var(--encre);
  --pointe: 16px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-block-size: 52px;
  padding: 8px calc(var(--pointe) + 18px) 8px 20px;
  border: 0;
  border-radius: var(--r-2) 0 0 var(--r-2);
  background: var(--fond);
  color: var(--encre-bouton);
  font-family: var(--texte);
  font-weight: 750;
  font-size: var(--fs-4);
  line-height: 1.15;
  letter-spacing: .005em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--pointe)) 0, 100% 50%, calc(100% - var(--pointe)) 100%, 0 100%);
  transition: transform var(--duree-1) var(--courbe-sortie), background-color var(--duree-1) ease, color var(--duree-1) ease;
  -webkit-tap-highlight-color: transparent;
}
[dir="rtl"] .bouton {
  padding: 8px 20px 8px calc(var(--pointe) + 18px);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  clip-path: polygon(var(--pointe) 0, 100% 0, 100% 100%, var(--pointe) 100%, 0 50%);
}
.bouton:hover { --fond: var(--papier); --encre-bouton: var(--encre); color: var(--encre); transform: translateX(3px); }
[dir="rtl"] .bouton:hover { transform: translateX(-3px); }
.bouton:active { transform: translateX(0) scale(.97); transition-duration: 60ms; }
.bouton:focus-visible { outline-offset: 4px; }
.bouton svg, .bouton .icone { inline-size: 22px; block-size: 22px; flex: none; }
/* Variantes */
.bouton--rose { --fond: var(--rose); }
.bouton--ciel { --fond: var(--ciel); --encre-bouton: #fff; }
.bouton--sobre { --fond: var(--asphalte); --encre-bouton: var(--papier); }
.bouton--sobre:hover { --fond: var(--gravier); --encre-bouton: var(--papier); color: var(--papier); }
.bouton--fantome { --fond: transparent; --encre-bouton: var(--papier); box-shadow: inset 0 0 0 2px var(--trait); }
.bouton--fantome:hover { --fond: var(--voile-survol); --encre-bouton: var(--papier); color: var(--papier); box-shadow: inset 0 0 0 2px var(--orange); }
.bouton--danger { --fond: var(--rouge-sombre); --encre-bouton: #ffb3b6; box-shadow: inset 0 0 0 2px #ff5a5f66; }
.bouton--danger:hover { --fond: var(--rouge); --encre-bouton: var(--encre); color: var(--encre); }
/* Forme plate, sans pointe : boutons secondaires, barres d'action */
.bouton--plat, [dir="rtl"] .bouton--plat { --pointe: 0px; clip-path: none; border-radius: var(--r-2); padding-inline: 18px; }
.bouton--plat:hover, [dir="rtl"] .bouton--plat:hover { transform: translateY(-1px); }
/* Tailles */
.bouton--petit { min-block-size: 44px; font-size: var(--fs-3); padding-inline: 14px calc(var(--pointe) + 12px); --pointe: 12px; }
[dir="rtl"] .bouton--petit { padding-inline: 14px calc(var(--pointe) + 12px); }
.bouton--petit.bouton--plat { padding-inline: 14px; }
.bouton--grand { min-block-size: 60px; font-size: var(--fs-5); --pointe: 20px; padding-inline-start: 26px; }
/* Bouton carré à icône seule (l'aria-label porte le nom) */
.bouton--icone, [dir="rtl"] .bouton--icone { --pointe: 0px; clip-path: none; inline-size: 48px; min-block-size: 48px; padding: 0; border-radius: var(--r-2); }
.bouton--icone.bouton--petit { inline-size: 44px; min-block-size: 44px; }
/* Désactivé et chargement */
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.bouton[aria-busy="true"] { color: transparent; pointer-events: none; }
.bouton[aria-busy="true"] > * { visibility: hidden; }
.bouton[aria-busy="true"]::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: calc(50% - var(--pointe) / 2);
  inline-size: 20px; block-size: 20px; margin-block-start: -10px; margin-inline-start: -10px; border-radius: 50%;
  border: 3px solid var(--encre-bouton); border-inline-end-color: transparent; animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(1turn); } }

.boutons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Lien d'action discret, avec chevron qui avance au survol */
.lien-fleche { display: inline-flex; align-items: center; gap: var(--e-1); min-block-size: 44px; font-weight: 700; text-decoration: none; color: var(--peche); }
.lien-fleche .icone { inline-size: 16px; block-size: 16px; transition: transform var(--duree-2) var(--courbe-ressort); }
[dir="rtl"] .lien-fleche .icone { transform: scaleX(-1); }
.lien-fleche:hover .icone { transform: translateX(3px); }
[dir="rtl"] .lien-fleche:hover .icone { transform: scaleX(-1) translateX(3px); }

/* ---------- Accordéon : le chevron > bascule en V, comme le menu ---------- */
.plie { border-block-end: 2px dashed var(--gravier); }
.plie summary {
  display: flex; align-items: center; gap: 12px; min-block-size: 52px; padding: 12px 6px; margin-inline: -6px;
  border-radius: var(--r-2); cursor: pointer; font-weight: 750; font-size: 1.08rem; list-style: none;
  transition: background-color var(--duree-1) ease;
}
.plie summary:hover { background: var(--voile-survol); }
.plie summary::-webkit-details-marker { display: none; }
.plie summary::before { content: ""; flex: none; inline-size: 12px; block-size: 18px; background: var(--orange); clip-path: polygon(0 0, 35% 0, 100% 50%, 35% 100%, 0 100%, 62% 50%); transition: transform var(--transition); }
[dir="rtl"] .plie summary::before { transform: scaleX(-1); }
.plie[open] summary::before { transform: rotate(90deg); }
.plie > div { padding-block-end: 14px; color: var(--gris); }
/* Ouverture en douceur là où le navigateur sait animer la hauteur automatique */
@supports (interpolate-size: allow-keywords) {
  .plie { interpolate-size: allow-keywords; }
  .plie::details-content { block-size: 0; overflow: clip; transition: block-size var(--duree-3) var(--courbe-sortie), content-visibility var(--duree-3) allow-discrete; }
  .plie[open]::details-content { block-size: auto; }
}

/* ---------- Formulaires ---------- */
.champ { display: flex; flex-direction: column; gap: 5px; margin-block-end: 14px; }
.champ label, .champ__titre { font-weight: 750; }
.champ small, .champ__aide { color: var(--gris); font-size: var(--fs-2); }
.champ__erreur { color: #ff9ea1; font-size: var(--fs-2); font-weight: 650; }
.champ__erreur:empty { display: none; }
input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="url"], input[type="date"], input[type="time"], input[type="tel"], input[type="password"], select, textarea {
  inline-size: 100%;
  min-block-size: 48px;
  padding: 10px 12px;
  background: var(--nuit);
  border: 2px solid var(--trait);
  border-radius: var(--r-2);
  transition: border-color var(--duree-1) ease, box-shadow var(--duree-1) ease, background-color var(--duree-1) ease;
}
:is(input, select, textarea):hover:not(:disabled, :focus) { border-color: var(--gris-2); }
input:focus, select:focus, textarea:focus { border-color: var(--orange); outline: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 22%, transparent); }
:is(input, select, textarea):disabled { opacity: .5; cursor: not-allowed; }
:is(input, select, textarea):user-invalid { border-color: var(--rouge); }
::placeholder { color: var(--gris-2); opacity: 1; }
input[type="range"] { accent-color: var(--orange); inline-size: 100%; min-block-size: 36px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--orange); inline-size: 22px; block-size: 22px; }
.coche { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; cursor: pointer; }
/* Champ avec icône en tête (recherche, filtre) */
.champ-icone { position: relative; display: flex; align-items: center; }
.champ-icone > .icone { position: absolute; inset-inline-start: 13px; inline-size: 20px; block-size: 20px; color: var(--orange); pointer-events: none; }
.champ-icone > input { padding-inline-start: 42px; }

/* ---------- Onglets : groupe de boutons à aria-selected (ou aria-pressed) ---------- */
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-block-end: 14px; }
.onglets button {
  min-block-size: 44px; padding: 6px 16px; border: 0; border-radius: var(--r-2);
  background: var(--asphalte); color: var(--papier); cursor: pointer; font-weight: 700;
  transition: background-color var(--duree-1) ease, color var(--duree-1) ease, transform var(--duree-1) ease;
}
.onglets button:hover { background: var(--gravier); }
.onglets button:active { transform: scale(.97); }
.onglets button[aria-selected="true"], .onglets button[aria-pressed="true"] { background: var(--orange); color: var(--encre); }
.onglets button:disabled { opacity: .45; cursor: not-allowed; }
/* Variante segmentée : un rail d'un seul tenant */
.onglets--segment { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; border-radius: var(--r-plein); background: var(--surface-1); border: 1px solid var(--trait); }
.onglets--segment button { border-radius: var(--r-plein); background: transparent; }

.resultat { font-family: var(--titre); font-weight: 900; font-size: clamp(3rem, 15vw, 5.5rem); line-height: 1; color: var(--orange); margin: 0; }
.resultat small { font-size: .42em; color: var(--papier); }
.mesure { block-size: 16px; background: var(--gravier); border-radius: 4px; overflow: hidden; }
.mesure > i { display: block; block-size: 100%; inline-size: 0; background: linear-gradient(90deg, var(--violet), var(--rose), var(--orange)); transition: inline-size .3s ease; }
.mesure[data-progres] > i { inline-size: var(--p, 0%); }
.tableau-defile { overflow-x: auto; }
.tableau { font-size: .96rem; }
.tableau th { text-align: start; font-size: .85rem; color: var(--gris); padding: 8px 10px; border-block-end: 2px solid var(--trait); white-space: nowrap; }
.tableau td { padding: 9px 10px; border-block-end: 1px solid var(--gravier); }

/* ---------- Badges de confiance : une icône, un mot, la couleur en plus (jamais seule) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: .08em;
  padding: 1px 8px 1px 6px; border-radius: var(--r-1);
  font-size: .78rem; font-weight: 800; line-height: 1.5; letter-spacing: .01em;
  background: var(--gravier); color: var(--papier); white-space: nowrap;
}
.badge:is(.badge--officiel, .badge--presse, .badge--communaute, .badge--rumeur, .badge--deduction)::before {
  content: ""; flex: none; inline-size: 13px; block-size: 13px; background: currentColor;
  -webkit-mask: var(--badge-icone) center / contain no-repeat; mask: var(--badge-icone) center / contain no-repeat;
}
.badge--officiel { background: var(--vert-sombre); color: var(--vert); --badge-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M12 2.5 20 5.8v6.2c0 4.6-3.3 8-8 9.5-4.7-1.5-8-4.9-8-9.5V5.8z'/%3E%3Cpath d='m8.3 12 2.6 2.6 4.8-5.2'/%3E%3C/svg%3E"); }
.badge--presse { background: var(--bleu-sombre); color: #7cc8ff; --badge-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M4 3.5h16v17H4z'/%3E%3Cpath d='M8 8.5h8M8 12.5h8M8 16.5h5'/%3E%3C/svg%3E"); }
.badge--communaute { background: var(--orange-sombre); color: var(--orange); --badge-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Ccircle cx='9' cy='8' r='3.6'/%3E%3Cpath d='M2.5 20.5c0-3.8 2.9-6.3 6.5-6.3s6.5 2.5 6.5 6.3M16 4.6a3.6 3.6 0 0 1 0 6.8M18.2 14.6c2 .8 3.3 2.8 3.3 5.9'/%3E%3C/svg%3E"); }
.badge--rumeur { background: var(--rouge-sombre); color: #ff8fb4; --badge-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M3 4h18v12.5h-9.5L6 20.5v-4H3z'/%3E%3Cpath d='M9.8 8.6a2.2 2.2 0 1 1 2.9 2.1c-.5.2-.7.6-.7 1.1v.3M12 14.6v.4'/%3E%3C/svg%3E"); }
.badge--deduction { background: var(--gravier); color: var(--papier); --badge-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M9 17.5h6M10 21h4'/%3E%3Cpath d='M12 2.8a6.2 6.2 0 0 0-3.7 11.1c.4.4.7.9.7 1.4v.4h6v-.4c0-.5.3-1 .7-1.4A6.2 6.2 0 0 0 12 2.8z'/%3E%3C/svg%3E"); }
.legende-confiance__liste { display: grid; gap: var(--e-2); margin: 0; }
.legende-confiance__liste > div { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: var(--e-3); align-items: baseline; }
.legende-confiance__liste dd { margin: 0; color: var(--gris); font-size: var(--fs-2); }

.alerte { padding: 12px 14px; border-radius: var(--r-2); background: var(--orange-sombre); color: var(--peche); border-inline-start: 6px solid var(--orange); margin-block: 14px; }
.alerte--info { background: var(--bleu-sombre); color: #cfe6ff; border-inline-start-color: var(--ciel-clair); }
.alerte--ok { background: var(--vert-sombre); color: #c8f5dc; border-inline-start-color: var(--vert); }
.alerte--erreur { background: var(--rouge-sombre); color: #ffd1d3; border-inline-start-color: var(--rouge); }

/* Pastille de nombre */
.indicateur { display: inline-grid; place-items: center; min-inline-size: 26px; block-size: 24px; padding: 0 7px; border-radius: var(--r-plein); background: var(--surface-2); color: var(--gris); font-size: var(--fs-1); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Notification : posée au-dessus de la barre d'onglets ---------- */
.notification {
  position: fixed; inset-inline: 16px; inset-block-end: calc(var(--bas-fixe) + 14px); z-index: var(--z-notification);
  display: flex; align-items: center; justify-content: center; gap: var(--e-2);
  margin-inline: auto; max-inline-size: 440px; min-block-size: 48px; padding: 10px 16px;
  border-radius: var(--r-3); background: var(--papier); color: var(--encre); font-weight: 750; text-align: center;
  box-shadow: var(--ombre-3);
  opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none;
  transition: opacity var(--duree-2) ease, transform var(--duree-3) var(--courbe-ressort);
}
.notification[data-visible] { opacity: 1; transform: none; }
.notification::before {
  content: ""; flex: none; inline-size: 20px; block-size: 20px; background: var(--vert-sombre);
  -webkit-mask: var(--notif-icone) center / contain no-repeat; mask: var(--notif-icone) center / contain no-repeat;
  --notif-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='m4.5 12.5 5 5 10-10.5'/%3E%3C/svg%3E");
}
.notification[data-type="erreur"] { background: #ffd1d3; }
.notification[data-type="erreur"]::before { background: #7a0f1a; --notif-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M12 3.5 21.5 20h-19z'/%3E%3Cpath d='M12 9.5v5M12 17v.5'/%3E%3C/svg%3E"); }
.notification[data-type="info"]::before { background: var(--asphalte); --notif-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); }
.notification:empty { visibility: hidden; }

/* ---------- État vide : une icône, une phrase, une action ---------- */
.vide {
  display: grid; justify-items: center; gap: var(--e-2); padding: var(--e-5) var(--e-4);
  border: 2px dashed var(--gravier); border-radius: var(--r-3); color: var(--gris); text-align: center;
}
.vide > .icone { inline-size: 36px; block-size: 36px; color: var(--trait); }
.vide p { margin: 0; max-inline-size: 42ch; }
.vide[hidden] { display: none; }

/* ---------- Squelettes de chargement ---------- */
.squelette {
  display: block; block-size: 1em; border-radius: var(--r-1);
  background: linear-gradient(90deg, var(--surface-1) 0 40%, var(--surface-2) 50%, var(--surface-1) 60% 100%) 0 0 / 300% 100%;
  animation: luit 1.4s linear infinite;
}
.squelette--ligne { block-size: .9em; margin-block: .35em; }
.squelette--ligne:nth-child(even) { inline-size: 72%; }
.squelette--bloc { block-size: 96px; border-radius: var(--r-3); }
@keyframes luit { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .squelette { animation: none; } }
[aria-busy="true"] > .squelette { display: block; }

/* ---------- Bouton favori : l'étoile, vide ou pleine, et son mot ---------- */
.bouton-favori {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-block-size: 44px; min-inline-size: 44px; padding: 0 var(--e-4) 0 var(--e-3);
  border: 1px solid var(--trait); border-radius: var(--r-plein); background: var(--surface-1);
  color: var(--papier); font-weight: 700; font-size: var(--fs-3); cursor: pointer;
  transition: background-color var(--duree-1) ease, border-color var(--duree-1) ease, color var(--duree-1) ease;
}
.bouton-favori .icone { inline-size: 22px; block-size: 22px; color: var(--orange); }
.bouton-favori :is(.bouton-favori__plein, .icone--pleine) { display: none; }
.bouton-favori:hover { border-color: var(--orange); background: var(--surface-2); }
.bouton-favori:active .icone { transform: scale(.85); }
.bouton-favori[aria-pressed="true"] { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 16%, var(--surface-1)); }
.bouton-favori[aria-pressed="true"] :is(.bouton-favori__vide, .icone--vide) { display: none; }
.bouton-favori[aria-pressed="true"] :is(.bouton-favori__plein, .icone--pleine) { display: inline-block; animation: etoile var(--duree-3) var(--courbe-ressort); }
/* Sans mot à côté de l'étoile : un rond de 44 px */
.bouton-favori:not(:has(.bouton-favori__texte)) { padding: 0; inline-size: 44px; }
@keyframes etoile { from { transform: scale(.4) rotate(-30deg); } }
.bouton-favori--compact { padding: 0; inline-size: 44px; border-color: transparent; background: transparent; }
.bouton-favori--compact:hover { background: var(--voile-survol); border-color: transparent; }
.bouton-favori--compact[aria-pressed="true"] { background: transparent; border-color: transparent; }

/* ---------- Tuiles et lignes (espace « Moi », listes d'outils) ---------- */
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--e-3); }
.tuile {
  position: relative; display: grid; gap: var(--e-2); align-content: start;
  padding: var(--e-4); border-radius: var(--r-3); background: var(--surface-1);
  outline: 2px solid var(--trait); outline-offset: -6px; color: var(--papier);
}
.tuile__haut { display: flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--gris); font-family: var(--texte); font-weight: 750; font-size: var(--fs-3); line-height: 1.3; letter-spacing: 0; }
.tuile__valeur[hidden] { display: none; }
.tuile__legende { margin: -4px 0 0; color: var(--peche); font-weight: 750; font-size: var(--fs-2); }
.tuile__legende[hidden] { display: none; }
.tuile__haut .icone { inline-size: 20px; block-size: 20px; color: var(--orange); }
.tuile__valeur { display: flex; align-items: flex-end; gap: var(--e-2); direction: ltr; justify-content: flex-start; margin: 0; }
[dir="rtl"] .tuile__valeur { justify-content: flex-end; }
.tuile__valeur .chiffre { block-size: 58px; }
.tuile__unite { font-family: var(--titre); font-weight: 900; font-size: 2.2rem; line-height: 1; color: var(--peche); }
.tuile__texte { margin: 0; color: var(--gris); font-size: var(--fs-2); }
.tuile__texte strong { color: var(--papier); }
.tuile .mesure { block-size: 10px; }
.tuile .lien-fleche { justify-self: start; }

.lignes-outils { display: grid; gap: var(--e-1) var(--e-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); list-style: none; margin: 0; padding: 0; }
.ligne-outil { display: flex; align-items: center; gap: var(--e-2); border-radius: var(--r-3); background: var(--surface-1); padding-inline-end: var(--e-1); }
.ligne-outil__lien {
  flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: var(--e-3);
  min-block-size: 60px; padding: var(--e-2) var(--e-3); border-radius: var(--r-3);
  color: var(--papier); text-decoration: none;
}
.ligne-outil__lien:hover { color: var(--papier); background: var(--voile-survol); }
.ligne-outil__vignette { display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: var(--r-2); background: var(--nuit); color: var(--orange); }
.ligne-outil__vignette .icone { inline-size: 22px; block-size: 22px; }
.ligne-outil__texte { display: grid; min-inline-size: 0; }
.ligne-outil__texte strong { font-weight: 700; line-height: 1.25; }
.ligne-outil__texte small { color: var(--gris); }

/* ---------- Boîte de confirmation (action qu'on ne peut pas défaire) ---------- */
.confirmation {
  inline-size: min(440px, calc(100vw - 32px)); padding: var(--e-5); margin: auto;
  border: 1px solid var(--trait); border-radius: var(--r-4); background: var(--surface-1); color: var(--papier); box-shadow: var(--ombre-3);
}
.confirmation[open] { animation: apparait var(--duree-2) var(--courbe-sortie); }
.confirmation::backdrop { background: #0a0014d0; }
.confirmation__titre { display: flex; align-items: center; gap: var(--e-2); font-size: var(--fs-6); text-transform: none; font-family: var(--titre); }
.confirmation__titre .icone { color: var(--rouge); }
.confirmation p { color: var(--gris); }
.confirmation .boutons { justify-content: flex-end; }

/* ---------- Installation : chaque bloc ne paraît que dans le cas qui le concerne ---------- */
[data-installation-pour] { display: none !important; }
html[data-installation="possible"] [data-installation-pour~="possible"],
html[data-installation="installee"] [data-installation-pour~="installee"],
html[data-installation="ios"] [data-installation-pour~="ios"] { display: flex !important; }
html[data-installation="possible"] .menu__installer[data-installation-pour~="possible"] { display: grid !important; }

/* ---------- Espace « Moi » ---------- */
.espace { display: grid; gap: var(--e-6); }
.espace__tete { display: grid; gap: var(--e-1); }
.espace__tete h1 { margin: 0; }
.espace__tete .chapo { margin: 0; color: var(--gris); max-inline-size: 62ch; font-size: var(--fs-5); }
.espace__sur { display: inline-flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--peche); font-weight: 750; font-size: var(--fs-2); }
.espace__sur .icone { inline-size: 18px; block-size: 18px; }
.espace__compte { margin: var(--e-1) 0 0; color: var(--gris-2); font-size: var(--fs-2); }
.espace__compte:empty { display: none; }
.espace__section { display: grid; gap: var(--e-3); align-content: start; }
.espace__titre { display: flex; align-items: center; gap: var(--e-2); margin: 0; font-size: clamp(1.7rem, 5.6vw, 2.3rem); }
.espace__titre .icone { inline-size: .8em; block-size: .8em; color: var(--orange); }
.espace__grille { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.espace__carte { display: grid; gap: var(--e-3); align-content: start; }
.espace__carte h3 { display: flex; align-items: center; gap: var(--e-2); margin: 0; font-size: var(--fs-6); }
.espace__carte h3 .icone { inline-size: 22px; block-size: 22px; color: var(--orange); }
.espace__carte p { margin: 0; color: var(--gris); }
.espace__code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.3rem; font-weight: 700; letter-spacing: .06em;
  padding: var(--e-3) var(--e-4); border-radius: var(--r-2); background: var(--nuit); border: 1px dashed var(--trait); color: var(--peche) !important;
  direction: ltr; text-align: center; overflow-wrap: anywhere;
}
.espace__code[data-vide] { font-family: var(--texte); font-size: var(--fs-3); letter-spacing: 0; color: var(--gris-2) !important; font-weight: 600; }
.espace__etat { min-block-size: 1.4em; font-size: var(--fs-2); font-weight: 650; }
.espace__etat[data-type="erreur"] { color: #ff9ea1 !important; }
.espace__etat[data-type="ok"] { color: var(--vert) !important; }
.espace__reprendre { display: grid; gap: var(--e-2); padding-block-start: var(--e-3); border-block-start: 1px dashed var(--gravier); justify-items: start; }
.espace__reprendre .champ { margin: 0; inline-size: 100%; }
.espace__reprendre input { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; direction: ltr; }
.espace__fichier:has(input:focus-visible) { outline: 3px solid var(--anneau); outline-offset: 3px; }
.espace__texte { margin: 0; color: var(--gris); max-inline-size: 62ch; }
.espace__installation { display: none; }
html[data-installation] .espace__installation { display: grid; }
.espace__installer { align-items: center; flex-wrap: wrap; gap: var(--e-2) var(--e-3); margin: 0; color: var(--gris); }
.espace__installer p { margin: 0; flex: 1 1 260px; }
.espace__installer .icone { color: var(--orange); }
.espace .tuile[data-tuile="defi"][data-fait="true"] { outline-color: var(--vert); }
.espace .lignes-outils[hidden] { display: none; }

/* gtasix.tools — pages : une et compteur, vedettes du jour J, grilles d'outils, pages, prose, accueil. */
/* ---------- Une : le compte à rebours ---------- */
.une { position: relative; overflow: clip; isolation: isolate; padding-block: 18px 30px; border-block-end: 8px solid; border-image: linear-gradient(90deg, #3b66cb, #8348c5, #df3bb8, #fe71a0, #ff7271, #ff904e, #fbcca6) 1; }
.une::before {
  content: ""; position: absolute; z-index: -1;
  inset-block: -6% -6%;
  inset-inline-end: -46vw;
  inline-size: 100vw;
  background: var(--degrade-oblique);
  clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%);
  }
[dir="rtl"] .une::before { transform: scaleX(-1); }
.une__sur { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px; font-family: var(--titre); font-weight: 800; font-size: 1.35rem; text-transform: var(--casse-titre); color: var(--peche); line-height: 1.1; }
.une__sur span + span { color: var(--papier); }
.une h1 { font-size: clamp(3.1rem, 15.5vw, 7rem); margin-block-end: 14px; max-inline-size: 15ch; }
.une__note { color: var(--gris); font-size: .95rem; margin: 10px 0 0; }

.compteur { position: relative; background: var(--encre); border-radius: var(--rayon); padding: 16px 16px 12px; outline: 2px solid var(--gravier); outline-offset: -7px; box-shadow: 0 18px 44px #0009; max-inline-size: 640px; }
.compteur__case { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.compteur__case--jours { flex-direction: row; align-items: flex-end; gap: 12px; }
.compteur__reste { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-block-start: 12px; padding-block-start: 12px; border-block-start: 2px dashed var(--gravier); }
.compteur__sep { font-family: "Sofia XC", sans-serif; font-weight: 900; font-size: 2.3rem; line-height: 1.5; color: var(--rose); }
.compteur__unite { font-family: var(--titre); font-weight: 800; color: var(--papier); font-size: 1.05rem; line-height: 1; text-transform: var(--casse-titre); }
.compteur__case--jours .compteur__unite { font-size: clamp(1.8rem, 9vw, 3rem); color: var(--peche); padding-block-end: 4px; }
.nombre { display: inline-flex; gap: .09em; }
.chiffre { block-size: 54px; inline-size: auto; aspect-ratio: 60 / 104; }
.nombre--jours .chiffre { block-size: clamp(116px, 38vw, 190px); }
.chiffre .s { opacity: .1; transition: opacity .1s linear; }
.chiffre[data-n="0"] :is(.s0, .s1, .s2, .s3, .s4, .s5),
.chiffre[data-n="1"] :is(.s1, .s2),
.chiffre[data-n="2"] :is(.s0, .s1, .s3, .s4, .s6),
.chiffre[data-n="3"] :is(.s0, .s1, .s2, .s3, .s6),
.chiffre[data-n="4"] :is(.s1, .s2, .s5, .s6),
.chiffre[data-n="5"] :is(.s0, .s2, .s3, .s5, .s6),
.chiffre[data-n="6"] :is(.s0, .s2, .s3, .s4, .s5, .s6),
.chiffre[data-n="7"] :is(.s0, .s1, .s2),
.chiffre[data-n="8"] .s,
.chiffre[data-n="9"] :is(.s0, .s1, .s2, .s3, .s5, .s6) { opacity: 1; }
.defs-svg { position: absolute; inline-size: 0; block-size: 0; }

.une__partage { margin-block-start: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.partage-rapide { display: flex; gap: 6px; }
.partage-rapide a, .partage-rapide button { display: inline-grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 10px; border: 0; background: var(--asphalte); color: var(--papier); cursor: pointer; }
.partage-rapide a:hover, .partage-rapide button:hover { background: var(--orange); color: var(--encre); }
.partage-rapide svg { inline-size: 22px; block-size: 22px; }

/* Après la sortie : le compteur quitte le haut de page et les outils prennent sa place. */
html[data-phase="apres"] .seulement-avant { display: none !important; }
html[data-phase="avant"] .seulement-apres { display: none !important; }

.vedette { padding-block: 22px 30px; border-block-end: 8px solid; border-image: linear-gradient(90deg, #3b66cb, #8348c5, #df3bb8, #fe71a0, #ff7271, #ff904e, #fbcca6) 1; }
.vedette__rail { display: grid; gap: 14px; }
.vedette__carte { display: block; color: var(--papier); text-decoration: none; }
.vedette__carte:hover { color: var(--papier); }
.vedette__carte.panneau--orange, .vedette__carte.panneau--orange:hover { color: var(--encre); }
.vedette__carte h2 { margin-block-end: 8px; font-size: clamp(1.7rem, 3vw, 2.4rem); }
@media (min-width: 860px) { .vedette__rail { grid-template-columns: 2fr 1fr 1fr; } }

@media (min-width: 760px) {
  .une { padding-block: 34px 44px; }
  .une::before { inset-inline-end: -14vw; inline-size: 58vw; }
  .compteur { display: flex; align-items: stretch; gap: 24px; max-inline-size: 760px; padding: 22px; }
  .compteur__case--jours { flex-direction: column; align-items: flex-start; gap: 6px; }
  .nombre--jours .chiffre { block-size: 138px; }
  .compteur__case--jours .compteur__unite { font-size: 1.9rem; padding: 0; }
  .compteur__reste { margin: 0; padding: 0 0 0 22px; border-block-start: 0; border-inline-start: 2px dashed var(--gravier); align-self: stretch; align-items: center; flex: 1; }
  [dir="rtl"] .compteur__reste { padding: 0 22px 0 0; }
  .compteur__reste .chiffre { block-size: 86px; }
}
/* Grand écran : le chevron et sa barre forment le >I de la marque, à l'échelle de la page. */
@media (min-width: 1100px) {
  .une::before { inset-inline-end: 7vw; inline-size: 34vw; }
  .une::after { content: ""; position: absolute; z-index: -1; inset-block: 8% 8%; inset-inline-end: 3vw; inline-size: 2.6vw; background: var(--papier); }
}

/* ---------- Grille d'outils ---------- */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.carte {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 18px 18px 16px;
  background: var(--bitume);
  border-radius: var(--rayon);
  outline: 2px solid var(--trait);
  outline-offset: -6px;
  color: var(--papier);
  text-decoration: none;
  transition: transform .14s ease, background-color .14s ease;
}
a.carte:hover { background: var(--asphalte); color: var(--papier); transform: translateY(-3px); }
.carte h3 { font-size: 1.62rem; margin: 2px 0 2px; }
.carte p { margin: 0; color: var(--gris); font-size: .98rem; }
.carte__sortie { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .84rem; font-weight: 800; letter-spacing: .06em; color: var(--orange); text-transform: uppercase; }
.etat { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: .78rem; font-weight: 800; letter-spacing: .03em; background: var(--gravier); color: var(--gris); text-transform: none; }
.etat--pret { background: #0f3b2c; color: var(--vert); }

/* ---------- Pages ---------- */
.page { padding-block: 26px 44px; }
.fil { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; padding: 0; margin: 0 0 12px; font-size: .92rem; color: var(--gris); }
.fil a { color: var(--gris); }
.fil li + li::before { content: ">"; color: var(--orange); margin-inline-end: 8px; font-weight: 800; }
.chapo { font-size: 1.16rem; color: var(--gris); max-inline-size: 62ch; }
.prose { max-inline-size: 72ch; }
.prose h2 { margin-block-start: 1.3em; font-size: clamp(1.8rem, 5.5vw, 2.5rem); }
.prose h3 { margin-block-start: 1.2em; }
.prose table { margin-block: 1em; font-size: .96rem; }
.prose th, .prose td { padding: 8px 10px; border-block-end: 1px solid var(--trait); text-align: start; vertical-align: top; }
.source { font-size: .9rem; color: var(--gris); }


/* Note du compteur, seulement dans les pays où les boutiques donnent une heure unique. */
.seulement-boutique { display: none; }
html[data-heure-boutique] .seulement-boutique { display: inline; }

/* Tableaux : les mots restent entiers, le tableau défile dans son cadre. */
.tableau, .prose table { overflow-wrap: normal; word-break: normal; }

/* Accueil : rappel du préchargement et entrée de la carte. */
.bande-prechargement { margin: 0; padding: 12px var(--gouttiere); background: var(--bitume); text-align: center; font-family: var(--titre); font-weight: 800; font-size: 1.32rem; line-height: 1.2; text-transform: var(--casse-titre); }
.bande-prechargement a { margin-inline-start: 10px; color: var(--peche); white-space: nowrap; }
.teaser-carte { display: grid; gap: 12px; align-items: center; padding: 22px 20px; background: var(--bitume); border-radius: var(--rayon); outline: 2px solid var(--trait); outline-offset: -7px; color: var(--papier); text-decoration: none; overflow: hidden; }
.teaser-carte:hover { color: var(--papier); background: var(--asphalte); }
.teaser-carte h2 { margin-block-end: 6px; }
.teaser-carte p { color: var(--gris); }
.teaser-carte__dessin { inline-size: 100%; max-block-size: 260px; margin-inline: auto; }
@media (min-width: 760px) { .teaser-carte { grid-template-columns: 3fr 2fr; padding: 34px; } .teaser-carte__dessin { max-block-size: 340px; } }

/* gtasix.tools — vitrine : couleurs des familles, pastilles de pictogrammes, pastilles de filtre, interrupteur, cartes d'outil.
   Chaque famille a sa couleur, tirée de la palette du 6 : --fc (fond), --fe (encre posée dessus), --ft (texte sur fond sombre,
   éclairci quand la couleur seule n'atteint pas le contraste AA sur l'aubergine). */
.f-sortie { --fc: var(--orange); --fe: var(--encre); --ft: var(--orange); }
.f-entrainement { --fc: var(--rose); --fe: var(--encre); --ft: var(--rose); }
.f-progression { --fc: var(--violet); --fe: var(--papier); --ft: color-mix(in srgb, var(--violet) 55%, #fff); }
.f-vehicules { --fc: var(--ciel); --fe: var(--papier); --ft: var(--ciel-clair); }
.f-combat { --fc: var(--corail); --fe: var(--encre); --ft: var(--corail); }
.f-argent { --fc: var(--peche); --fe: var(--encre); --ft: var(--peche); }
.f-secrets { --fc: var(--magenta); --fe: var(--encre); --ft: color-mix(in srgb, var(--magenta) 80%, #fff); }
.f-communaute { --fc: var(--ciel-clair); --fe: var(--encre); --ft: var(--ciel-clair); }
.f-createurs { --fc: #fe71a0; --fe: var(--encre); --ft: #fe71a0; }
.f-crew { --fc: var(--gris-2); --fe: var(--encre); --ft: var(--gris-2); }
.f-carte { --fc: var(--magenta); --fe: var(--encre); --ft: color-mix(in srgb, var(--magenta) 80%, #fff); }

/* ---------- Pastille de pictogramme : un petit panneau à filet intérieur ---------- */
.picto {
  --taille: 44px;
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: var(--taille);
  block-size: var(--taille);
  border-radius: calc(var(--taille) * .24);
  background: var(--fc, var(--orange));
  color: var(--fe, var(--encre));
  outline: 1.5px solid color-mix(in srgb, var(--fe, var(--encre)) 42%, transparent);
  outline-offset: calc(var(--taille) * -.1);
}
.picto--l { --taille: 56px; }
.picto--xl { --taille: 76px; }
.f-carte .picto, .picto.f-carte, .picto.f-createurs { background: var(--degrade-oblique); }
.picto__svg { inline-size: calc(var(--taille) * .56); block-size: calc(var(--taille) * .56); overflow: visible; }
.picto--xl .picto__svg { inline-size: calc(var(--taille) * .52); block-size: calc(var(--taille) * .52); }

/* ---------- Pastilles de filtre et de navigation ---------- */
.pastilles {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 4px var(--gouttiere);
  margin-inline: calc(-1 * var(--gouttiere));
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.pastilles::-webkit-scrollbar { display: none; }
.pastilles > li { flex: none; }
.pastille {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 6px 14px;
  border: 2px solid var(--trait);
  border-radius: 999px;
  background: var(--bitume);
  color: var(--papier);
  font-weight: 750;
  font-size: .95rem;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease;
}
.pastille:hover { border-color: var(--ft, var(--orange)); color: var(--papier); }
.pastille__svg { flex: none; inline-size: 20px; block-size: 20px; color: var(--ft, var(--orange)); }
.pastille__n { font-size: .8rem; font-weight: 700; color: var(--gris); font-variant-numeric: tabular-nums; }
.pastille[aria-pressed="true"] { background: var(--fc, var(--orange)); border-color: var(--fc, var(--orange)); color: var(--fe, var(--encre)); }
.pastille[aria-pressed="true"] :is(.pastille__svg, .pastille__n) { color: inherit; }
.pastille--vide { opacity: .5; }
@media (min-width: 760px) {
  .pastilles { flex-wrap: wrap; overflow: visible; padding-inline: 0; margin-inline: 0; }
}

/* ---------- Interrupteur (case à cocher en forme de bascule) ---------- */
.interrupteur { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; cursor: pointer; font-weight: 750; }
.interrupteur input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  margin: 0;
  inline-size: 50px;
  block-size: 30px;
  border-radius: 999px;
  border: 2px solid var(--trait);
  background: var(--gravier);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.interrupteur input::before {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: var(--papier);
  transition: transform .15s ease;
}
.interrupteur input:checked { background: var(--vert); border-color: var(--vert); }
.interrupteur input:checked::before { transform: translateX(20px); background: var(--encre); }
[dir="rtl"] .interrupteur input:checked::before { transform: translateX(-20px); }
.interrupteur input:focus-visible { outline: 3px solid var(--peche); outline-offset: 3px; }

/* Bouton favori : style et bascule viennent de la coquille (30-composants.css, site.js). */

/* ---------- Cartes d'outil (vignettes) ---------- */
.vignettes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.vignette { position: relative; min-inline-size: 0; }
.vignette[hidden], .vignettes[hidden] { display: none; }
.vignette__lien {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  block-size: 100%;
  padding: 14px 16px;
  background: var(--bitume);
  border-radius: var(--rayon);
  outline: 2px solid var(--trait);
  outline-offset: -6px;
  color: var(--papier);
  text-decoration: none;
  transition: background-color .14s ease, outline-color .14s ease;
}
.vignette:has(.bouton-favori) .vignette__lien { padding-inline-end: 60px; }
.vignette__lien:hover { background: var(--asphalte); outline-color: var(--ft, var(--orange)); color: var(--papier); }
.vignette__lien:focus-visible { outline: 3px solid var(--peche); outline-offset: 2px; }
.vignette__lien .picto { transition: transform var(--transition); }
.vignette__lien:hover .picto { transform: translateY(-2px) rotate(-3deg); }
.vignette__corps { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.vignette__sur { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; color: var(--ft, var(--orange)); }
.vignette__titre { margin: 0; font-size: 1.42rem; line-height: 1.04; }
.vignette__desc { color: var(--gris); font-size: .93rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vignette .bouton-favori { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; }
.vignette .etat { letter-spacing: .02em; }

/* Une seule carte mise en avant (« commence par là », outil lié à un article). */
.vignettes--une { grid-template-columns: 1fr; }
.vignettes--une .vignette__lien { padding: 18px 20px; align-items: center; }
.vignettes--une .picto { --taille: 64px; }
.vignettes--une .vignette__titre { font-size: clamp(1.7rem, 5vw, 2.3rem); }
.vignettes--une .vignette__desc { -webkit-line-clamp: 4; font-size: 1rem; }

/* Outils phares de l'accueil : petites tuiles sur deux colonnes au téléphone, quatre sur grand écran. */
@media (max-width: 599px) {
  .vignettes--phares { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vignettes--phares .vignette__lien { flex-direction: column; gap: 10px; padding: 14px 12px 14px 14px; }
  .vignettes--phares .vignette__desc { display: none; }
  .vignettes--phares .vignette__titre { font-size: 1.24rem; }
}
@media (min-width: 1000px) {
  .vignettes--phares { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vignettes--phares .vignette__lien { flex-direction: column; gap: 12px; padding: 18px; }
}

/* gtasix.tools — vitrine : accueil. Sous le compteur, les intentions ; puis les outils phares, le défi du jour, la carte,
   les actualités et les guides. Les blocs sont séparés par la peinture au sol, sans remplissage. */

/* ---------- Intentions ---------- */
.intentions { padding-block: 26px 24px; }
.intentions__titre { font-size: clamp(1.9rem, 6.4vw, 2.9rem); margin-block-end: 14px; }
.intentions__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.intention { min-inline-size: 0; }
.intention__lien {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  block-size: 100%;
  min-block-size: 80px;
  padding: 12px 16px 12px 12px;
  background: var(--bitume);
  border-radius: var(--rayon);
  outline: 2px solid var(--trait);
  outline-offset: -6px;
  color: var(--papier);
  text-decoration: none;
  transition: background-color .14s ease, outline-color .14s ease;
}
[dir="rtl"] .intention__lien { padding: 12px 12px 12px 16px; }
.intention__lien:hover { background: var(--asphalte); outline-color: var(--ft); color: var(--papier); }
.intention__lien:focus-visible { outline: 3px solid var(--peche); outline-offset: 2px; }
.intention__texte { flex: 1; display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.intention__titre { font-family: var(--titre); font-weight: 800; font-size: 1.6rem; line-height: 1; text-transform: var(--casse-titre); }
.intention__desc { color: var(--gris); font-size: .92rem; line-height: 1.35; }
.intention__fleche { flex: none; font-family: "Sofia XC", sans-serif; font-weight: 900; font-size: 2rem; line-height: 1; color: var(--ft); transition: transform var(--transition); }
.intention__lien:hover .intention__fleche { transform: translateX(4px); }
/* Le signe > est miroir en arabe et en ourdou : l'algorithme bidi le dessine déjà en <. */
[dir="rtl"] .intention__lien:hover .intention__fleche { transform: translateX(-4px); }
@media (min-width: 1100px) {
  .intentions__liste { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .intention__lien { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 18px 22px; }
  [dir="rtl"] .intention__lien { padding: 18px 18px 22px; }
  .intention__fleche { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; }
  .intention__titre { font-size: 1.75rem; }
}
html[data-phase="apres"] .intentions { padding-block-start: 30px; }

/* ---------- Blocs de l'accueil : peinture au sol entre deux blocs ---------- */
.accueil-bloc { position: relative; padding-block: 34px 8px; }
.accueil-bloc::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--gouttiere);
  block-size: 4px;
  background: repeating-linear-gradient(90deg, var(--gravier) 0 34px, transparent 34px 56px);
}
.accueil-bloc .section__entete h2 { font-size: clamp(1.9rem, 6.4vw, 2.9rem); }

/* ---------- Défi du jour ---------- */
.defi-accueil {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 18px;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ciel-clair) 22%, var(--bitume)), var(--bitume) 65%);
  border-radius: var(--rayon);
  outline: 2px solid var(--trait);
  outline-offset: -7px;
  color: var(--papier);
  text-decoration: none;
  transition: outline-color .14s ease;
}
.defi-accueil:hover { outline-color: var(--ciel-clair); color: var(--papier); }
.defi-accueil:focus-visible { outline: 3px solid var(--peche); outline-offset: 2px; }
.defi-accueil__texte { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.defi-accueil__sur { font-size: .8rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ciel-clair); }
.defi-accueil__titre { margin: 0; font-size: clamp(2rem, 7vw, 3rem); }
.defi-accueil__desc { color: var(--gris); max-inline-size: 60ch; }
.defi-accueil__etat { font-weight: 750; color: var(--peche); }
.defi-accueil__etat:empty { display: none; }
.defi-accueil[data-fait] .defi-accueil__etat { color: var(--vert); }
.defi-accueil__cta { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 599px) { .defi-accueil > .picto { --taille: 56px; align-self: start; } }
@media (min-width: 760px) {
  .defi-accueil { grid-template-columns: auto minmax(0, 1fr) auto; padding: 28px; gap: 18px 26px; }
  .defi-accueil__cta { grid-column: auto; }
}

/* ---------- Après la sortie : les outils à tour de rôle ---------- */
.vedette { padding-block: 26px 34px; }
.vedette h1 { font-size: clamp(2.8rem, 12vw, 5.6rem); margin-block-end: 6px; }
.vedette .chapo { margin-block-end: 18px; }
.vedette__carte { display: flex; flex-direction: column; gap: 6px; }
.vedette__carte .picto { margin-block-end: 8px; }
.vedette__carte.panneau--orange .picto { --fc: var(--encre); --fe: var(--orange); }
.vedette__sur { font-size: .8rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ft); }
.vedette__carte.panneau--orange .vedette__sur { color: var(--encre); }
.vedette__carte p { margin: 0; color: var(--gris); }
.vedette__carte.panneau--orange p { color: var(--encre); }
.vedette__carte:hover { outline-color: var(--ft); }
.vedette__carte.panneau--orange:hover { outline-color: var(--encre); }
@media (min-width: 860px) { .vedette__carte:first-child h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); } }

/* ---------- Entrée de la carte ---------- */
.teaser-carte__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.teaser-carte__texte .picto { margin-block-end: 8px; }
.teaser-carte__texte .bouton { margin-block-start: 6px; }
.teaser-carte:hover .bouton { --fond: var(--papier); }
.teaser-carte:focus-visible { outline: 3px solid var(--peche); outline-offset: 2px; }
/* Au téléphone, après la sortie : l'outil du jour en grand, les deux suivants en lignes compactes, pour que les intentions
   restent à portée de pouce. */
@media (max-width: 599px) {
  .vedette__rail { gap: 10px; }
  .vedette__carte:not(:first-child) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px 16px; }
  .vedette__carte:not(:first-child) .picto { --taille: 48px; grid-row: 1 / span 2; margin: 0; }
  .vedette__carte:not(:first-child) h2 { margin: 0; font-size: 1.5rem; }
  .vedette__carte:not(:first-child) p { display: none; }
}

/* gtasix.tools — vitrine : catalogue des outils, pages de famille, liste des guides, liste des actualités. */

/* ---------- En-tête des pages de liste ---------- */
.catalogue__tete { margin-block-end: 12px; }
.catalogue__tete h1 { margin-block-end: 8px; }
.catalogue__tete .chapo { margin-block-end: 6px; }
.catalogue__resume { margin: 0; color: var(--peche); font-weight: 700; max-inline-size: 62ch; }
.titre-section { font-size: clamp(1.7rem, 5.4vw, 2.4rem); }

/* ---------- Barre de filtres du catalogue ---------- */
.catalogue__barre {
  display: grid;
  gap: 12px;
  margin-block: 14px 8px;
  padding: 14px;
  background: var(--encre);
  border-radius: var(--rayon);
  outline: 2px solid var(--gravier);
  outline-offset: -7px;
}
.catalogue__barre[hidden], .catalogue__vide[hidden], .catalogue__groupes[hidden], .catalogue__groupe[hidden] { display: none; }
.catalogue__recherche { position: relative; }
.catalogue__recherche input { min-block-size: 54px; padding-inline-start: 46px; font-size: 1.08rem; background: var(--nuit); }
.catalogue__loupe { position: absolute; inset-inline-start: 14px; inset-block-start: 50%; inline-size: 22px; block-size: 22px; transform: translateY(-50%); color: var(--gris); pointer-events: none; }
.catalogue__barre .pastilles { padding-block: 4px; }
.catalogue__options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; }
.catalogue__tri { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-inline-size: 100%; font-weight: 750; }
.catalogue__tri select { flex: 1 1 auto; inline-size: auto; min-inline-size: 0; max-inline-size: 100%; min-block-size: 44px; padding-block: 6px; }
.catalogue__options > * { min-inline-size: 0; max-inline-size: 100%; }
.catalogue__compte { margin: 0; font-weight: 800; color: var(--peche); }
.catalogue__compte[data-vide] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 760px) {
  .catalogue__barre { padding: 18px; gap: 14px; }
}

.catalogue__vide { margin-block: 18px; padding: 26px 20px; text-align: center; border-radius: var(--rayon); border: 2px dashed var(--gravier); color: var(--gris); }
.catalogue__vide p { margin: 0 0 12px; }
.catalogue__plat { margin-block: 18px 8px; }
.catalogue__groupe { padding-block: 22px 6px; }
.catalogue__entete { display: flex; align-items: center; gap: 14px; margin-block-end: 12px; }
.catalogue__entete-texte { min-inline-size: 0; }
.catalogue__entete h2 { margin: 0; font-size: clamp(1.8rem, 5.6vw, 2.6rem); }
.catalogue__entete h2 a { color: var(--papier); text-decoration: none; }
.catalogue__entete h2 a::after { content: ">"; display: inline-block; margin-inline-start: .3em; color: var(--ft); font-family: "Sofia XC", sans-serif; transition: transform var(--transition); }
.catalogue__entete h2 a:hover { color: var(--ft); }
.catalogue__entete h2 a:hover::after { transform: translateX(4px); }
[dir="rtl"] .catalogue__entete h2 a:hover::after { transform: translateX(-4px); }
.catalogue__entete p { margin: 2px 0 0; color: var(--gris); }

/* ---------- Page de famille ---------- */
.famille-tete {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-block-end: 8px;
  padding: 22px 20px;
  border-radius: var(--rayon);
  background: linear-gradient(120deg, color-mix(in srgb, var(--fc) 28%, var(--bitume)), var(--bitume) 72%);
  outline: 2px solid color-mix(in srgb, var(--fc) 60%, transparent);
  outline-offset: -7px;
}
.famille-tete__texte { min-inline-size: 0; }
.famille-tete__sur { margin: 0 0 4px; font-size: .86rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--papier); }
.famille-tete h1 { margin: 0; font-size: clamp(2.3rem, 9vw, 4.6rem); }
.famille-tete .chapo { margin: 8px 0 0; color: var(--papier); }
@media (max-width: 479px) {
  .famille-tete { flex-direction: column; align-items: flex-start; }
}
.famille-depart { padding-block: 22px 0; }
.autres-familles .pastilles { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }

/* ---------- Liste des guides ---------- */
.guides-nav { margin-block: 6px 12px; }
.page-guides > .legende { max-inline-size: 760px; }
.guides-categorie { padding-block: 22px 6px; }
.grille--guides { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.carte-guide { gap: 6px; }
.carte-guide h3 { font-size: 1.45rem; line-height: 1.05; }
.carte-guide p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carte-guide__sur { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }

/* Liste de liens vers des guides (pages d'outil, de famille, accueil). */
.liste-guides { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.liste-guides a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-block-size: 56px;
  padding: 12px 16px;
  background: var(--bitume);
  border-radius: 12px;
  border-inline-start: 4px solid var(--orange);
  color: var(--papier);
  text-decoration: none;
}
.liste-guides a:hover { background: var(--asphalte); color: var(--papier); }
.liste-guides strong { font-weight: 750; line-height: 1.3; }
.liste-guides span { color: var(--gris); font-size: .85rem; }
@media (min-width: 760px) { .liste-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .liste-guides--accueil { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Actualités ---------- */
.etiquette { display: inline-block; padding: 2px 9px; border-radius: 6px; background: var(--orange); color: var(--encre); font-size: .74rem; font-weight: 800; letter-spacing: .05em; line-height: 1.5; text-transform: uppercase; }
.actus-outils { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 0; font-size: .92rem; }
.actus-outils a { display: inline-flex; align-items: center; min-block-size: 44px; }
.actus { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.actu { min-inline-size: 0; }
.actu__lien {
  display: flex;
  flex-direction: column;
  gap: 6px;
  block-size: 100%;
  padding: 16px 18px;
  background: var(--bitume);
  border-radius: var(--rayon);
  outline: 2px solid var(--trait);
  outline-offset: -6px;
  color: var(--papier);
  text-decoration: none;
  transition: background-color .14s ease;
}
.actu__lien:hover { background: var(--asphalte); color: var(--papier); }
.actu__lien:focus-visible { outline: 3px solid var(--peche); outline-offset: 2px; }
.actu__sur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .86rem; font-weight: 700; color: var(--gris); }
.actu__titre { margin: 0; font-size: clamp(1.45rem, 4.6vw, 1.85rem); line-height: 1.04; }
.actu__chapo { color: var(--gris); font-size: .96rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.actu__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-block-start: auto; padding-block-start: 4px; }
.actu__ia { font-size: .78rem; color: var(--gris-2); }
.actu--une .actu__lien { padding: 22px 22px 20px; background: linear-gradient(140deg, color-mix(in srgb, var(--violet) 30%, var(--bitume)), var(--bitume) 70%); }
.actu--une .actu__titre { font-size: clamp(2rem, 7.4vw, 3.2rem); }
.actu--une .actu__chapo { color: var(--papier); -webkit-line-clamp: 4; font-size: 1.04rem; }
@media (min-width: 900px) {
  .actus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actu--une { grid-column: 1 / -1; }
  .actus--accueil, .actus--compactes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.actus--accueil, .actus--compactes { margin-block-start: 0; }
.actus--compactes .actu__chapo { -webkit-line-clamp: 2; }

/* Bandeau du direct, en tête des actualités. */
.bandeau-direct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-block: 14px 0;
  padding: 12px 16px;
  border-radius: var(--rayon);
  background: var(--encre);
  outline: 2px solid var(--rose);
  outline-offset: -6px;
  color: var(--papier);
  font-weight: 750;
  text-decoration: none;
}
.bandeau-direct:hover { color: var(--papier); background: var(--bitume); }
.bandeau-direct__texte { flex: 1; min-inline-size: 12em; }
.bandeau-direct__fleche { font-family: "Sofia XC", sans-serif; font-weight: 900; font-size: 1.6rem; color: var(--rose); }
.direct-etat { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px; border-radius: 999px; background: var(--orange); color: var(--encre); font-size: .82rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.direct-etat__point { inline-size: 10px; block-size: 10px; border-radius: 50%; background: currentColor; }
:is(.bandeau-direct--ouvert, .direct-tete--ouvert) .direct-etat { background: var(--rose); }
:is(.bandeau-direct--ouvert, .direct-tete--ouvert) .direct-etat__point { animation: pouls 1.4s ease-in-out infinite; }
.direct-tete--termine .direct-etat { background: var(--gravier); color: var(--papier); }
@keyframes pouls { 50% { opacity: .2; } }

/* gtasix.tools — vitrine : cadre de la page d'outil. Le contenu de l'outil (.outil) n'est pas touché ici. */
.page-outil { padding-block-start: 18px; }

/* ---------- En-tête compact : pictogramme, famille, numéro de sortie, état, titre, actions ---------- */
.outil-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: start; margin-block-end: 16px; }
.outil-tete > .picto { margin-block-start: 4px; }
.outil-tete__texte { min-inline-size: 0; }
.outil-tete__sur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 4px; font-size: .82rem; font-weight: 800; line-height: 1.3; }
.outil-tete__sur a { display: inline-flex; align-items: center; min-block-size: 24px; color: var(--ft); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.outil-tete__sur a:hover { text-decoration: underline; color: var(--papier); }
.outil-tete__sortie {
  display: inline-block;
  padding: 2px 9px 1px;
  border-radius: 6px 6px 0 0;
  background: var(--fc);
  color: var(--fe);
  font-family: var(--titre);
  font-size: 1rem;
  line-height: 1.25;
  text-transform: var(--casse-titre);
  letter-spacing: .02em;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--fe) 35%, transparent);
}
.outil-tete h1 { margin: 0 0 8px; font-size: clamp(2.1rem, 8.4vw, 3.9rem); }
.outil-tete .chapo { margin: 0; font-size: 1.06rem; }
.outil-tete__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 10px; }
@media (min-width: 900px) {
  .outil-tete { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 20px; margin-block-end: 22px; }
  .outil-tete > .picto { --taille: 68px; }
  .outil-tete__actions { grid-column: 3; grid-row: 1; margin: 2px 0 0; justify-content: flex-end; max-inline-size: 22em; }
}

.bouton-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 6px 14px;
  border: 2px solid var(--trait);
  border-radius: 10px;
  background: var(--bitume);
  color: var(--papier);
  font: inherit;
  font-size: .95rem;
  font-weight: 750;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}
.bouton-action:hover { border-color: var(--ft, var(--orange)); color: var(--papier); }
.bouton-action .icone { flex: none; inline-size: 20px; block-size: 20px; }

/* ---------- Étape suivante ---------- */
.suite { margin-block: 30px 0; }
.suite__titre { margin: 0 0 8px; font-family: var(--texte); font-size: .86rem; font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; color: var(--gris); }
.suite__lien {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--rayon);
  background: linear-gradient(100deg, color-mix(in srgb, var(--fc) 30%, var(--bitume)), var(--bitume) 72%);
  outline: 2px solid color-mix(in srgb, var(--fc) 55%, transparent);
  outline-offset: -6px;
  color: var(--papier);
  text-decoration: none;
}
.suite__lien:hover { color: var(--papier); outline-color: var(--fc); }
.suite__lien:focus-visible { outline: 3px solid var(--peche); outline-offset: 2px; }
.suite__texte { flex: 1; display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.suite__texte strong { font-family: var(--titre); font-weight: 800; font-size: clamp(1.6rem, 5.4vw, 2.3rem); line-height: 1; text-transform: var(--casse-titre); }
.suite__texte span { color: var(--gris); font-size: .95rem; }
.suite__fleche { flex: none; font-family: "Sofia XC", sans-serif; font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--ft); transition: transform var(--transition); }
.suite__lien:hover .suite__fleche { transform: translateX(5px); }
[dir="rtl"] .suite__lien:hover .suite__fleche { transform: translateX(-5px); }
@media (max-width: 479px) { .suite__lien .picto { --taille: 48px; } }
#voisins .vignettes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

/* ---------- Sommaire de la page, puis mode d'emploi et questions côte à côte ---------- */
.sommaire-puces { margin-block: 30px 0; }
.sommaire-puces ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sommaire-puces a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 6px 14px;
  border: 2px solid var(--trait);
  border-radius: 999px;
  background: var(--bitume);
  color: var(--papier);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}
.sommaire-puces a::before { content: ""; flex: none; inline-size: 12px; block-size: 8px; background: var(--orange); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.sommaire-puces a:hover { border-color: var(--orange); color: var(--papier); }
.outil-aide { display: grid; gap: 0 56px; }
.outil-aide__bloc { padding-block: 22px 8px; scroll-margin-block-start: 84px; min-inline-size: 0; }
.outil-aide .outil-aide__bloc > h2 { margin-block: 0 .5em; font-size: clamp(1.8rem, 5.6vw, 2.4rem); }
.outil-aide .prose { max-inline-size: 70ch; }
.outil-aide .prose h3 { font-size: clamp(1.25rem, 4vw, 1.5rem); margin-block: 1.2em .35em; }
.outil-aide .prose p, .outil-aide .prose li { color: color-mix(in srgb, var(--papier) 88%, var(--gris)); }
.outil-aide__faq .plie summary { font-size: 1.02rem; min-block-size: 52px; }
.outil-aide__faq .plie > div { line-height: 1.55; }
@media (min-width: 1000px) {
  .outil-aide--double { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .outil-aide--double .outil-aide__faq { padding: 22px 22px 14px; margin-block-start: 0; border-radius: var(--rayon); background: var(--bitume); outline: 2px solid var(--trait); outline-offset: -7px; }
}
:is(#voisins, #guides-lies, #a-lire) { scroll-margin-block-start: 84px; }

/* gtasix.tools — vitrine : lecture. Guides, articles, direct, pages générales, 404 : en bref, sommaire, ancres, progression,
   légende des niveaux de confiance, tableaux lisibles sur téléphone, sources regroupées en fin. */

/* ---------- Barre de progression de lecture ---------- */
.lecture-progres { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 55; block-size: 4px; pointer-events: none; }
.lecture-progres span { display: block; inline-size: 100%; block-size: 100%; background: linear-gradient(90deg, #3b66cb, #8348c5, #df3bb8, #ff7271, #ff904e); transform: scaleX(var(--p, 0)); transform-origin: left center; }
[dir="rtl"] .lecture-progres span { transform-origin: right center; background: linear-gradient(270deg, #3b66cb, #8348c5, #df3bb8, #ff7271, #ff904e); }

/* ---------- En-tête de lecture ---------- */
.lecture-tete { max-inline-size: 920px; margin-block-end: 18px; }
.lecture-tete h1 { margin-block-end: 10px; font-size: clamp(2.2rem, 8.4vw, 4.3rem); }
.lecture-tete__sur { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0 0 10px; color: var(--gris); font-size: .92rem; font-weight: 650; }

/* ---------- Grille : en bref, sommaire et légende à côté du texte sur grand écran ---------- */
.lecture-grille { display: grid; gap: 14px; }
.en-bref { padding: 16px 18px 16px; border-radius: var(--rayon); background: var(--orange-sombre); border-inline-start: 6px solid var(--orange); }
.en-bref__titre { margin: 0 0 6px; font-size: 1.3rem; color: var(--orange); }
.en-bref .chapo { margin: 0; max-inline-size: 70ch; color: var(--papier); font-size: 1.08rem; line-height: 1.55; }
.lecture-cote { display: grid; gap: 10px; align-content: start; }
.lecture-corps { min-inline-size: 0; max-inline-size: 74ch; }
@media (min-width: 1100px) {
  .lecture-grille { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "bref cote" "corps cote"; grid-template-rows: auto 1fr; column-gap: 56px; row-gap: 18px; }
  .en-bref { grid-area: bref; max-inline-size: 74ch; }
  .lecture-cote { grid-area: cote; position: sticky; inset-block-start: 80px; max-block-size: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
  .lecture-corps { grid-area: corps; }
}

/* ---------- Sommaire ---------- */
.sommaire__plie { border-radius: var(--rayon); background: var(--bitume); outline: 2px solid var(--trait); outline-offset: -6px; }
.sommaire__plie > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 52px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.32rem;
  line-height: 1.1;
  text-transform: var(--casse-titre);
}
.sommaire__plie > summary::-webkit-details-marker { display: none; }
.sommaire__plie > summary::before { content: ""; flex: none; inline-size: 12px; block-size: 18px; background: var(--orange); clip-path: polygon(0 0, 35% 0, 100% 50%, 35% 100%, 0 100%, 62% 50%); transition: transform var(--transition); }
[dir="rtl"] .sommaire__plie > summary::before { transform: scaleX(-1); }
.sommaire__plie[open] > summary::before { transform: rotate(90deg); }
.sommaire__n { margin-inline-start: auto; padding: 1px 8px; border-radius: 6px; background: var(--asphalte); font-family: var(--texte); font-size: .8rem; font-weight: 800; color: var(--gris); }
.sommaire__liste { margin: 0; padding: 0 10px 12px; list-style: none; counter-reset: partie; }
.sommaire__liste li { counter-increment: partie; }
.sommaire__liste a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  padding: 6px 8px;
  border-radius: 8px;
  border-inline-start: 3px solid transparent;
  color: var(--papier);
  font-weight: 650;
  font-size: .95rem;
  line-height: 1.25;
  text-decoration: none;
}
.sommaire__liste a::before { content: counter(partie, decimal-leading-zero); flex: none; font-family: "Sofia XC", sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--orange); }
.sommaire__liste a:hover { background: var(--asphalte); color: var(--papier); }
.sommaire__liste a[aria-current] { background: var(--asphalte); border-inline-start-color: var(--orange); color: var(--peche); }

/* ---------- Légende des niveaux de confiance ---------- */
.legende { border-radius: var(--rayon); background: var(--bitume); outline: 2px solid var(--trait); outline-offset: -6px; }
.legende > summary { display: flex; align-items: center; gap: 12px; min-block-size: 48px; padding: 8px 16px; cursor: pointer; list-style: none; font-weight: 750; font-size: .95rem; line-height: 1.25; }
.legende > summary::-webkit-details-marker { display: none; }
.legende > summary::before { content: ""; flex: none; inline-size: 10px; block-size: 15px; background: var(--peche); clip-path: polygon(0 0, 35% 0, 100% 50%, 35% 100%, 0 100%, 62% 50%); transition: transform var(--transition); }
[dir="rtl"] .legende > summary::before { transform: scaleX(-1); }
.legende[open] > summary::before { transform: rotate(90deg); }
.legende__liste { display: grid; gap: 10px; margin: 0; padding: 4px 16px 6px; }
.legende__liste > div { display: grid; grid-template-columns: minmax(6.5em, auto) 1fr; gap: 10px; align-items: baseline; }
.legende__liste dt { margin: 0; }
.legende__liste dd { margin: 0; color: var(--gris); font-size: .9rem; line-height: 1.4; }
.legende > p { margin: 0; padding: 0 16px 12px; font-size: .9rem; }
.legende > p a { display: inline-flex; align-items: center; min-block-size: 44px; }

/* ---------- Texte ---------- */
.lecture-corps.prose, .page-article .prose { font-size: 1.06rem; line-height: 1.68; }
.prose > p:first-child { font-size: 1.1rem; }
.prose h2 { margin-block: 1.5em .45em; font-size: clamp(1.85rem, 6vw, 2.6rem); scroll-margin-block-start: 84px; }
.prose h3 { margin-block: 1.3em .35em; font-size: clamp(1.35rem, 4.4vw, 1.7rem); }
.partie { scroll-margin-block-start: 84px; }
.ancre { display: inline-block; margin-inline-start: .3em; padding-inline: .12em; color: var(--gris-2); font-family: "Sofia XC", sans-serif; text-decoration: none; opacity: .8; }
.ancre:hover, .ancre:focus-visible { color: var(--orange); opacity: 1; }
.prose blockquote.alerte { margin-inline: 0; }
.prose li + li { margin-block-start: .35em; }
/* Badges de confiance dans le texte : visibles mais discrets, pour ne pas hacher la lecture. */
.prose .badge { padding: 1px 6px 0; border-radius: 5px; font-size: .66rem; letter-spacing: .03em; line-height: 1.4; vertical-align: .14em; white-space: nowrap; }

/* ---------- Tableaux : première colonne figée et défilement, ou fiches sur téléphone ---------- */
.tableau-defile { position: relative; margin-block: 1.1em; border-radius: 12px; background: var(--bitume);
  background-image: linear-gradient(to right, var(--bitume), var(--bitume)), linear-gradient(to right, var(--bitume), var(--bitume)),
    linear-gradient(to right, #0008, transparent), linear-gradient(to left, #0008, transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll; }
.tableau-defile:focus-visible { outline: 3px solid var(--peche); outline-offset: 2px; }
.prose .tableau-defile .tableau, .tableau-defile .tableau { margin: 0; font-size: .95rem; }
.tableau thead th { padding: 10px 12px 8px; background: var(--encre); white-space: normal; vertical-align: bottom; }
.tableau thead th:first-child { border-start-start-radius: 12px; }
.tableau thead th:last-child { border-start-end-radius: 12px; }
.tableau tbody th { padding: 9px 12px; border-block-end: 1px solid var(--gravier); color: var(--papier); font-size: inherit; font-weight: 750; text-align: start; vertical-align: top; white-space: normal; }
.tableau tbody td { padding: 9px 12px; vertical-align: top; }
.tableau tbody tr:last-child > * { border-block-end: 0; }
.tableau[data-mode="fige"] tbody th, .tableau[data-mode="fige"] thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--bitume); box-shadow: inset -2px 0 0 var(--gravier); }
[dir="rtl"] .tableau[data-mode="fige"] tbody th, [dir="rtl"] .tableau[data-mode="fige"] thead th:first-child { box-shadow: inset 2px 0 0 var(--gravier); }
.tableau[data-mode="fige"] thead th:first-child { background: var(--encre); }
.tableau[data-mode="fige"] tbody th { min-inline-size: 7.5em; max-inline-size: 13em; }
@media (max-width: 639px) {
  .tableau-defile[data-mode="fiches"] { overflow: visible; background: none; }
  .tableau[data-mode="fiches"], .tableau[data-mode="fiches"] tbody, .tableau[data-mode="fiches"] tr, .tableau[data-mode="fiches"] th, .tableau[data-mode="fiches"] td { display: block; }
  .tableau[data-mode="fiches"] thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tableau[data-mode="fiches"] tbody tr { margin-block-end: 8px; padding: 12px 14px 10px; border-radius: 12px; background: var(--bitume); outline: 2px solid var(--trait); outline-offset: -2px; }
  .tableau[data-mode="fiches"] tbody th { padding: 0 0 6px; border: 0; font-size: 1.04rem; }
  .tableau[data-mode="fiches"] tbody td { padding: 6px 0 4px; border: 0; border-block-start: 1px dashed var(--gravier); }
  .tableau[data-mode="fiches"] tbody td::before { content: attr(data-label); display: block; margin-block-end: 1px; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
  .tableau[data-mode="fiches"] tbody td:empty { display: none; }
  .tableau[data-mode="fiches"][data-colonnes="2"] tbody td::before { display: none; }
  .tableau[data-mode="fiches"][data-colonnes="2"] tbody td { border-block-start: 0; padding-block-start: 0; color: var(--gris); }
  .tableau[data-mode="fige"] { font-size: .9rem; }
  .tableau[data-mode="fige"] tbody th, .tableau[data-mode="fige"] tbody td, .tableau[data-mode="fige"] thead th { padding-inline: 9px; }
}

/* ---------- Sources regroupées en fin, liens vers le site ---------- */
.partie--sources, .sources-article { margin-block-start: 2.2em; padding: 6px 18px 16px; border-radius: var(--rayon); background: var(--encre); outline: 2px dashed var(--gravier); outline-offset: -6px; font-size: .92rem; line-height: 1.5; }
.partie--sources h2, .sources-article h2 { margin-block: .8em .5em; font-size: 1.5rem; }
.sources-liste { display: grid; gap: 6px; margin: 0; padding-inline-start: 1.7em; }
.sources-liste li { padding-inline-start: 2px; }
.sources-liste li::marker { color: var(--orange); font-weight: 800; }
.partie--liens { margin-block-start: 2em; padding: 6px 18px 12px; border-radius: var(--rayon); background: var(--bitume); }
.partie--liens h2 { margin-block: .7em .4em; font-size: 1.5rem; }
.partie--liens p:last-child { margin-block-end: 0; color: var(--gris); font-size: .92rem; }

/* ---------- Article ---------- */
.article-tete .chapo { font-size: 1.18rem; color: var(--papier); max-inline-size: 66ch; }
.article-tete__pied, .article-tete .mention-ia { max-inline-size: 780px; }
.article-tete__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-block: 14px 4px; }
.article-confiance { margin: 0; color: var(--gris); font-weight: 700; font-size: .92rem; }
.article-confiance .badge { font-size: .82rem; padding: 1px 8px; }
.mention-ia { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--bitume); font-size: .86rem; }
.page-article .prose { max-inline-size: 72ch; }
.article-outil { padding-block-end: 0; }

/* ---------- Direct ---------- */
.direct-tete { margin-block-end: 22px; padding: 20px; border-radius: var(--rayon); background: var(--encre); outline: 2px solid var(--gravier); outline-offset: -7px; }
.direct-tete h1 { margin-block: 12px 8px; font-size: clamp(2.2rem, 9vw, 4.4rem); }
.direct-tete .chapo { margin-block-end: 0; }
.direct-tete__maj { margin: 10px 0 0; color: var(--peche); font-weight: 700; }
.direct-grille { display: grid; gap: 18px 48px; }
@media (min-width: 1000px) {
  .direct-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .direct-grille--fil { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.programme, .fil-direct { list-style: none; margin: 0; padding: 0; }
.programme__etape, .direct-entree { position: relative; padding-block: 0 20px; padding-inline-start: 32px; }
.programme__etape::before, .direct-entree::before { content: ""; position: absolute; inset-inline-start: 6px; inset-block: 10px -6px; border-inline-start: 3px dashed var(--gravier); }
.programme__etape:last-child::before, .direct-entree:last-child::before { display: none; }
.programme__etape::after, .direct-entree::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 5px; inline-size: 15px; block-size: 15px; border-radius: 4px; background: var(--nuit); border: 3px solid var(--orange); }
.programme__etape[data-passe] { opacity: .62; }
.programme__etape[data-passe]::after { background: var(--orange); }
.programme__etape[data-prochain]::after { background: var(--rose); border-color: var(--rose); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rose) 30%, transparent); }
.programme__date, .direct-entree__heure { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 3px; font-family: var(--titre); font-weight: 800; font-size: 1.32rem; line-height: 1.2; text-transform: var(--casse-titre); color: var(--peche); }
.programme__marque { padding: 1px 8px; border-radius: 6px; background: var(--rose); color: var(--encre); font-family: var(--texte); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; }
.programme__texte { margin: 0; }
.direct-entree__corps > :last-child { margin-block-end: 0; }

/* ---------- Pages générales ---------- */
.generale-tete { max-inline-size: 900px; margin-block-end: 14px; }
.generale-tete h1 { margin-block-end: 8px; font-size: clamp(2.3rem, 9vw, 4.4rem); }
.generale-grille { display: grid; gap: 28px; }
.generale-corps { min-inline-size: 0; }
.generale-corps .prose { max-inline-size: 70ch; font-size: 1.04rem; line-height: 1.65; }
.generales-nav { align-self: start; padding: 14px 14px 10px; border-radius: var(--rayon); background: var(--bitume); outline: 2px solid var(--trait); outline-offset: -6px; }
.generales-nav__titre { margin: 0 0 4px; padding-inline: 8px; font-size: .8rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); }
.generales-nav ul { list-style: none; margin: 0; padding: 0; }
.generales-nav a { display: flex; align-items: center; min-block-size: 44px; padding: 4px 8px; border-radius: 8px; color: var(--papier); font-weight: 650; text-decoration: none; }
.generales-nav a:hover { background: var(--asphalte); color: var(--papier); }
.generales-nav a[aria-current] { background: var(--asphalte); color: var(--peche); }
@media (min-width: 1000px) {
  .generale-grille { grid-template-columns: minmax(0, 1fr) 270px; column-gap: 56px; }
  .generales-nav { position: sticky; inset-block-start: 84px; }
}
.generale-corps form { max-inline-size: 640px; }

/* ---------- 404 ---------- */
.erreur-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-block-end: 26px; }
.erreur-tete h1 { margin-block-end: 6px; font-size: clamp(2rem, 7vw, 3.6rem); }
.erreur-tete .chapo { margin: 0; }
.nombre--404 .chiffre { block-size: clamp(92px, 26vw, 156px); }
.erreur-sorties { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.erreur-sortie { display: flex; align-items: center; gap: 12px; min-block-size: 64px; padding: 10px 14px 10px 10px; border-radius: var(--rayon); background: var(--bitume); outline: 2px solid var(--trait); outline-offset: -6px; color: var(--papier); font-family: var(--titre); font-weight: 800; font-size: 1.4rem; text-transform: var(--casse-titre); text-decoration: none; }
.erreur-sortie:hover { background: var(--asphalte); color: var(--papier); }
.page-404 ul.section { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.page-404 ul.section li { padding: 8px 12px; border-radius: 10px; background: var(--bitume); }

/* gtasix.tools — kits partagés par les familles d'outils. */
/* ---------- Entraînement : parcours, scène de jeu, chiffres à segments, résultat, classement ---------- */
.ent-parcours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-block-end: 14px; }
.ent-parcours a { display: flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 44px; padding: 4px; border-radius: 8px; background: var(--bitume); color: var(--gris); font-family: var(--titre); font-weight: 800; font-size: 1.02rem; line-height: 1; text-align: center; text-decoration: none; text-transform: var(--casse-titre); }
.ent-parcours a::before { content: ""; flex: none; inline-size: 8px; block-size: 12px; background: currentColor; clip-path: polygon(0 0, 35% 0, 100% 50%, 35% 100%, 0 100%, 62% 50%); transition: transform var(--transition); }
[dir="rtl"] .ent-parcours a::before { transform: scaleX(-1); }
.ent-parcours a[data-etat="fait"] { background: #0f3b2c; color: var(--vert); }
.ent-parcours a[aria-current] { background: var(--orange); color: var(--encre); }
.ent-parcours a[aria-current]::before { transform: rotate(90deg); }
.ent-etat { margin: 0 0 10px; color: var(--gris); font-size: .94rem; }
.ent-etat:empty { display: none; }
.ent-choix { margin-block-end: 10px; }
.ent-son { padding-block: 4px; color: var(--gris); font-size: .94rem; }
.ent-scene { position: relative; inline-size: 100%; block-size: clamp(300px, 58dvh, 620px); overflow: hidden; border-radius: var(--rayon); outline: 2px solid var(--trait); outline-offset: -7px; background: var(--encre); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ent-scene canvas { display: block; inline-size: 100%; block-size: 100%; }
.ent-scene[data-plein] { position: fixed; inset: 0; z-index: 70; block-size: 100dvh; border-radius: 0; outline: 0; }
body[data-ent-plein] { overflow: hidden; }
.ent-hud { position: absolute; inset-block-start: 10px; inset-inline: 14px; display: flex; justify-content: space-between; gap: 10px; pointer-events: none; font-family: var(--titre); font-weight: 800; font-size: 1.35rem; line-height: 1.1; color: var(--papier); text-shadow: 0 1px 2px #000; }
.ent-quitter { position: absolute; inset-block-end: 10px; inset-inline-end: 10px; min-block-size: 44px; padding: 6px 14px; border: 0; border-radius: 8px; background: var(--asphalte); color: var(--papier); font-weight: 750; cursor: pointer; }
.ent-voile { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; background: #12001fd0; }
.ent-voile[hidden] { display: none; }
.ent-voile p { margin: 0; max-inline-size: 34ch; }
.ent-voile strong { font-family: var(--titre); font-weight: 900; font-size: clamp(1.9rem, 8vw, 3rem); line-height: 1; text-transform: var(--casse-titre); color: var(--orange); }
.ent-led { display: inline-flex; align-items: flex-end; gap: 8px; direction: ltr; }
.ent-led .chiffre { block-size: clamp(54px, 17vw, 84px); }
.ent-led__point { flex: none; align-self: flex-end; inline-size: 8px; block-size: 8px; margin-inline: 2px; background: var(--peche); }
.ent-led__unite { font-family: var(--titre); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--peche); }
.chiffre[data-n="-"] .s6 { opacity: 1; }
.ent-resultat { display: grid; gap: 12px; }
.ent-resultat[hidden] { display: none; }
.ent-resultat__haut h2 { margin-block-end: 8px; font-size: clamp(1.6rem, 5vw, 2.1rem); }
.ent-resultat p { margin: 0; }
.ent-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: 0; }
.ent-stats div { padding: 8px 10px; border-radius: 8px; background: var(--nuit); }
.ent-stats dt { color: var(--gris); font-size: .84rem; font-weight: 700; }
.ent-stats dd { margin: 0; font-family: var(--titre); font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
.ent-classement summary { font-family: var(--titre); font-weight: 800; font-size: 1.3rem; text-transform: var(--casse-titre); }
.ent-classement__liste { margin: 0 0 10px; padding-inline-start: 1.6em; }
.ent-classement__liste:empty { display: none; }
.ent-classement__liste li span { margin-inline-end: 10px; }
.ent-progres { display: grid; gap: 6px; }
.ent-progres h3 { margin: 0; }
.ent-courbe { inline-size: 100%; block-size: 56px; }
.ent-courbe polyline { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; }
.ent-progres__lignes { margin: 0; padding: 0; list-style: none; font-size: .96rem; }
.ent-verif { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--orange-sombre); color: var(--orange); font-size: .8rem; font-weight: 800; }

/* ---------- Kit des outils de sortie : écran à segments, puces, lignes de faits, verdict ---------- */
.ecran { position: relative; background: var(--encre); border-radius: var(--rayon); padding: 18px 18px 16px; outline: 2px solid var(--gravier); outline-offset: -7px; box-shadow: 0 14px 34px #0007; }
.ecran__sur { margin: 0 0 8px; font-family: var(--titre); font-weight: 800; font-size: 1.32rem; line-height: 1.1; text-transform: var(--casse-titre); color: var(--peche); }
.ecran__note { margin: 10px 0 0; color: var(--gris); font-size: 1rem; }
.ecran__note strong { color: var(--papier); }
.nombre--ecran .chiffre { block-size: clamp(74px, 25vw, 124px); }
.nombre--moyen .chiffre { block-size: clamp(42px, 13vw, 66px); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 6px 14px; border: 2px solid var(--trait); border-radius: 10px; background: var(--bitume); color: var(--papier); font-weight: 750; cursor: pointer; text-align: start; }
.puce::before { content: ""; flex: none; inline-size: 9px; block-size: 14px; background: var(--orange); clip-path: polygon(0 0, 35% 0, 100% 50%, 35% 100%, 0 100%, 62% 50%); transition: transform var(--transition); }
[dir="rtl"] .puce::before { transform: scaleX(-1); }
.puce:hover { border-color: var(--orange); }
.puce[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--encre); }
.puce[aria-pressed="true"]::before { background: var(--encre); transform: rotate(90deg); }
.lignes { margin: 0; }
.lignes > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; padding-block: 9px; border-block-end: 1px dashed var(--gravier); }
.lignes > div:last-child { border-block-end: 0; }
.lignes dt { color: var(--gris); font-weight: 600; }
.lignes dd { margin: 0; font-weight: 800; }
.provenance { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: .86rem; font-weight: 500; color: var(--gris); }
.provenance a { color: var(--gris); }
.verdict { margin: 0; font-family: var(--titre); font-weight: 900; font-size: clamp(3.2rem, 17vw, 6rem); line-height: 1; text-transform: var(--casse-titre); }
.verdict--oui { color: var(--vert); }
.verdict--non { color: var(--rouge); }
.verdict--attente { color: var(--orange); }
.saisie-unite { display: flex; align-items: stretch; gap: 8px; }
.saisie-unite input { flex: 1; min-inline-size: 0; }
.saisie-unite span { align-self: center; font-weight: 800; color: var(--gris); }
.bloc { margin-block: 14px; }
.bloc > h2 { font-size: clamp(1.7rem, 5.6vw, 2.3rem); }
.onglets button[aria-disabled="true"] { opacity: .5; }
.ent-reglages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-block-end: 8px; }
.ent-reglages .onglets { margin: 0; }
.ent-reglages__nom { font-weight: 700; font-size: .92rem; color: var(--gris); }
.ent-pas { min-inline-size: 44px; padding-inline: 8px !important; }
.outil [hidden] { display: none !important; }
.panneau--orange .provenance, .panneau--orange .provenance a { color: var(--encre); }
.ent-quitter { z-index: 2; }

/* ---------- Outils d'usage : listes à cocher, fiches, chevron qui bascule, exemples étiquetés ---------- */
.us-chevron { flex: none; inline-size: 12px; block-size: 18px; background: var(--orange); clip-path: polygon(0 0, 35% 0, 100% 50%, 35% 100%, 0 100%, 62% 50%); transition: transform var(--transition); }
[dir="rtl"] .us-chevron { transform: scaleX(-1); }
[aria-expanded="true"] > .us-chevron { transform: rotate(90deg); }
.us-confirmer { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--gravier); color: var(--peche); font-size: .84rem; font-weight: 800; }
.us-tete[data-fini="true"] { outline-color: var(--vert); }
.us-chiffre { display: flex; align-items: flex-end; gap: 8px; direction: ltr; justify-content: flex-start; }
[dir="rtl"] .us-chiffre { justify-content: flex-end; }
.us-unite { font-family: var(--titre); font-weight: 900; font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1; color: var(--peche); }
.us-compte { margin: 8px 0 8px; font-weight: 750; font-size: 1.1rem; }
.us-prochain { margin: 10px 0 0; color: var(--gris); font-size: .98rem; }
.us-prochain[hidden] { display: none; }
.us-filtres { display: grid; gap: 10px; }
.us-filtres .coche { padding-block: 4px; }
.us-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.us-ligne { background: var(--bitume); border-radius: 10px; }
.us-ligne[data-fait="true"] { background: #0f3b2c; }
.us-ligne__haut { display: flex; align-items: stretch; gap: 2px; min-block-size: 48px; }
.us-ligne__haut--base { align-items: center; gap: 6px; padding-inline-end: 6px; }
.us-ligne__coche { flex: none; display: grid; place-items: center; inline-size: 48px; cursor: pointer; }
.us-ligne__bouton { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: 10px; min-block-size: 48px; padding: 6px 10px; border: 0; background: none; color: var(--papier); font-weight: 700; text-align: start; cursor: pointer; }
.us-ligne[data-masque="true"] .us-ligne__titre { color: var(--gris); font-style: italic; }
.us-ligne__titre strong { display: block; font-weight: 750; }
.us-ligne__titre small { display: block; color: var(--gris); font-weight: 500; font-size: .86rem; }
.us-ligne__corps { padding: 2px 14px 12px; color: var(--gris); }
.us-ligne__corps h4 { margin: 12px 0 4px; color: var(--papier); font-size: 1rem; }
.us-ligne__source { margin: 10px 0 0; }
.us-mini { min-block-size: 44px; padding: 4px 10px; border: 2px solid var(--trait); border-radius: 8px; background: none; color: var(--papier); font-weight: 700; font-size: .86rem; cursor: pointer; }
.us-mini[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--encre); }
.us-vide { padding: 14px; border-radius: 10px; background: var(--bitume); color: var(--gris); text-align: center; }
.us-vide[hidden] { display: none; }
.us-exemple { position: relative; padding: 14px; border: 2px dashed var(--orange); border-radius: var(--rayon); }
.us-exemple__etiquette { display: inline-block; margin: 0 0 10px; padding: 1px 10px; border-radius: 6px; background: var(--orange); color: var(--encre); font-family: var(--titre); font-weight: 800; text-transform: var(--casse-titre); }
.us-grille-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.us-grille-etapes li { display: flex; gap: 10px; align-items: flex-start; }
.us-grille-etapes li::before { content: ""; flex: none; margin-block-start: 6px; inline-size: 12px; block-size: 14px; background: var(--orange); clip-path: polygon(0 0, 35% 0, 100% 50%, 35% 100%, 0 100%, 62% 50%); }
[dir="rtl"] .us-grille-etapes li::before { transform: scaleX(-1); }
.us-aide { color: var(--gris); font-size: .95rem; margin: 6px 0; }
.us-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 0 12px; }
.us-outils { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.us-test { display: block; color: var(--vert); font-size: .86rem; font-weight: 700; }
.us-tests { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .92rem; }
.us-tests li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.us-test-form { margin-block-start: 8px; padding-block-start: 8px; border-block-start: 2px dashed var(--gravier); }
.us-barre { position: sticky; inset-block-end: 8px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--papier); color: var(--encre); font-weight: 750; box-shadow: 0 8px 24px #0009; }
.us-barre[hidden] { display: none; }
.us-barre .bouton { min-block-size: 40px; }
.us-comparaison th[scope="row"] { color: var(--gris); font-weight: 700; white-space: normal; }
.us-comparaison td { min-inline-size: 118px; vertical-align: top; }

/* ---------- Kit de la famille communaute : tuiles >V, carte schématique, options, réflexe, barres de vote ---------- */
.cm-grille { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; direction: ltr; }
.cm-case { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 8px; background: var(--asphalte); outline: 2px solid var(--trait); outline-offset: -5px; transition: background var(--transition); }
.cm-case::before { content: ""; inline-size: 14px; block-size: 22px; background: var(--gris-2); clip-path: polygon(0 0, 35% 0, 100% 50%, 35% 100%, 0 100%, 62% 50%); transition: transform var(--transition); }
.cm-case[data-actif] { outline-color: var(--orange); }
.cm-case[data-note="top"] { background: var(--violet); }
.cm-case[data-note="moyen"] { background: var(--orange); }
.cm-case[data-note="rate"] { background: var(--encre); }
.cm-case[data-note="top"]::before, .cm-case[data-note="moyen"]::before { background: var(--papier); transform: rotate(90deg); }
.cm-carte { overflow: hidden; border-radius: var(--rayon); outline: 2px solid var(--trait); outline-offset: -2px; background: var(--encre); touch-action: none; }
.cm-carte svg { display: block; inline-size: 100%; block-size: min(56dvh, 520px); cursor: crosshair; }
.cm-carte svg:focus-visible { outline: 3px solid var(--peche); outline-offset: -3px; }
.cm-terre { fill: var(--asphalte); stroke: var(--trait); stroke-width: var(--trait-carte, 2); }
.cm-lac { fill: var(--encre); stroke: var(--trait); stroke-width: var(--trait-carte, 2); }
.cm-pin { fill: none; stroke: var(--orange); stroke-linejoin: miter; }
.cm-vrai { fill: var(--vert); }
.cm-zone { fill: #3ddc8433; stroke: var(--vert); }
.cm-ligne { stroke: var(--papier); stroke-dasharray: 6 6; }
.cm-retour { min-block-size: 1.5em; margin: 0; font-weight: 750; }
.cm-retour[data-bon] { color: var(--vert); }
.cm-retour[data-rate] { color: var(--corail); }
.cm-options { display: grid; gap: 8px; }
.cm-options .puce { inline-size: 100%; }
.cm-options .puce[data-bon] { background: #0f3b2c; border-color: var(--vert); color: var(--vert); }
.cm-options .puce[data-bon]::before { background: var(--vert); transform: rotate(90deg); }
.cm-options .puce[data-faux] { background: #421626; border-color: var(--corail); color: var(--corail); }
.cm-options .puce[data-faux]::before { background: var(--corail); }
.cm-options .puce:disabled { cursor: default; }
.cm-reflexe { inline-size: 100%; min-block-size: 34dvh; padding: 18px; border: 0; border-radius: var(--rayon); outline: 2px solid #0006; outline-offset: -8px; font-family: var(--titre); font-weight: 900; font-size: clamp(2rem, 9vw, 3.4rem); line-height: 1.05; text-transform: var(--casse-titre); color: var(--encre); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.cm-reflexe[data-etat="pret"], .cm-reflexe[data-etat="fini"] { background: var(--orange); }
.cm-reflexe[data-etat="attente"] { background: var(--rouge); }
.cm-reflexe[data-etat="go"] { background: var(--vert); }
.cm-scores { display: grid; gap: 8px; }
.cm-scores h3 { margin: 0; }
.cm-scores .ent-classement__liste li { display: flex; justify-content: space-between; gap: 10px; }
.cm-vote { display: grid; gap: 10px; }
.cm-vote h3 { margin: 0; font-size: clamp(1.45rem, 5vw, 1.8rem); }
.cm-vote p { margin: 0; }
.cm-barres { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cm-barres__haut { display: flex; justify-content: space-between; gap: 10px; font-size: .96rem; font-weight: 650; }
.cm-barres li[data-mien] .cm-barres__haut { color: var(--orange); }
.cm-barres li[data-bon] .cm-barres__haut { color: var(--vert); }
.outil .nombre { direction: ltr; }

/* ---------- Carnet du joueur et blocs repliés des outils d'usage ---------- */
.us-carnet { display: grid; gap: 8px; }
.us-carnet__titre { margin: 0; font-size: 1.5rem; }
.us-carnet__form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.us-carnet__form input { flex: 1 1 200px; min-inline-size: 0; }
.us-carnet__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.us-carnet__compte { margin: 0; font-weight: 750; }
.us-carnet__compte[hidden] { display: none; }
.us-carnet__nom { flex: 1; min-inline-size: 0; font-weight: 700; overflow-wrap: anywhere; }
.us-faits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.us-faits li { display: grid; gap: 2px; padding-block: 8px; border-block-end: 1px dashed var(--gravier); }
.us-faits li:last-child { border-block-end: 0; }
.us-faits strong { font-weight: 750; }
.us-rangee { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; }
.us-rangee__texte { color: var(--gris); font-weight: 700; padding-block-end: 6px; }
.outil .plie > summary { min-block-size: 48px; }


/* Lignes de liste des outils : les boutons passent à la ligne plutôt que d'élargir la page sur un petit écran. */
.us-liste, .us-ligne { min-inline-size: 0; max-inline-size: 100%; }
.us-ligne__haut { flex-wrap: wrap; min-inline-size: 0; }

/* Le champ fichier des navigateurs a une largeur propre : il suit celle de son conteneur. */
input[type="file"] { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }

/* Droite à gauche : le navigateur retourne lui-même le signe > en <, comme tout caractère symétrique.
   Un nom latin qui commence par un chiffre ou une apostrophe garde son ordre de lecture. */
.us-ligne__titre strong, .ve-titre, .ar-titre { unicode-bidi: plaintext; }
[dir="rtl"] .us-ligne__titre strong, [dir="rtl"] .ve-titre, [dir="rtl"] .ar-titre { text-align: right; }
td time { white-space: nowrap; }

/* Droite à gauche : les chevrons dessinés en clip-path ne sont pas retournés par le navigateur, on les retourne ici. */
[dir="rtl"] :is(.ent-parcours a, .puce, .us-grille-etapes li, .cm-case)::before { transform: scaleX(-1); }