/* ==============================================================================================
   REDLIGHT · feuille commune du site public (toutes les pages de www.red-light.fr)
   ----------------------------------------------------------------------------------------------
   Le dashboard n'en charge rien : il a sa propre feuille (styles.css) et son propre thème.

   Tout ce qu'elle utilise est hébergé sur place (police Geist, licence OFL ; icônes Phosphor,
   licence MIT), parce que la politique de sécurité du site n'autorise que les ressources du domaine.

   Trois règles tiennent tout le site :
   - une seule couleur d'accent, le rouge de la marque (#ff3b4e), et ses nuances. Le vert et l'ambre
     ne servent qu'à dire un état (gagné, accepté, en attente), jamais à décorer ;
   - des formes cohérentes : tout ce qui se clique est une pilule, les surfaces ont 28 px d'arrondi,
     ce qui vit à l'intérieur en a 18, un champ de saisie 16 ;
   - aucune animation sans raison : chaque mouvement signale une hiérarchie, une réponse à un geste ou
     un changement d'état, et tout s'immobilise sous `prefers-reduced-motion`.

   Le site n'a plus de thème clair depuis le 28/09/2026 (décision prise avec le propriétaire) : le
   verre et la lumière rouge n'ont de sens que sur le noir. Le dashboard garde le sien.
   ============================================================================================== */

@font-face {
  font-family: "Geist";
  src: url("/site/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("/site/fonts/Geist-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/site/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --noir: #0a0607;
  --noir-2: #110a0c;
  --noir-3: #1b0f12;
  --encre: #f6eeee;
  --encre-2: rgb(246 238 238 / 0.74);
  --encre-3: rgb(246 238 238 / 0.58);
  --trait: rgb(255 255 255 / 0.08);

  --rouge: #ff3b4e;
  --rouge-vif: #ff6b5c;
  --rouge-profond: #8c1027;
  --rouge-halo: rgb(255 59 78 / 0.42);

  /* États. Jamais décoratifs : ils disent « gagné », « accepté », « en attente ». */
  --vert: #3ddc84;
  --vert-fond: rgb(61 220 132 / 0.1);
  --ambre: #f5b94e;
  --ambre-fond: rgb(245 185 78 / 0.1);

  /* Verre liquide. Apple ne publie AUCUN matériau pour le web : ceci en est une approximation,
     faite de flou d'arrière-plan, d'un reflet spéculaire et d'une arête réfractée (voir .verre). */
  --verre-fond: linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.02));
  --verre-teinte: rgb(24 10 13 / 0.42);
  --verre-flou: blur(22px) saturate(170%);

  --r-surface: 28px;
  --r-interne: 18px;
  --r-champ: 16px;

  /* Ressorts calculés (amortissement 0,62 et 0,86) et écrits en `linear()` : le navigateur rejoue une
     vraie courbe physique, dépassement compris, sans une ligne de JavaScript. */
  --ressort: linear(0, 0.0238, 0.0861, 0.1746, 0.2788, 0.3899, 0.5014, 0.6079, 0.706, 0.7932, 0.8682, 0.9307, 0.9808, 1.0195, 1.0477, 1.0667, 1.078, 1.083, 1.083, 1.0792, 1.0727, 1.0645, 1.0554, 1.0461, 1.0369, 1.0284, 1.0206, 1.0139, 1.0082, 1.0035, 0.9998, 0.997, 0.9951, 0.9939, 0.9932, 0.993, 0.9932, 0.9936, 0.9943, 0.995, 0.9958, 0.9966, 0.9973, 1);
  --ressort-doux: linear(0, 0.0156, 0.0559, 0.1131, 0.1809, 0.2542, 0.3295, 0.404, 0.4757, 0.5433, 0.6058, 0.6629, 0.7143, 0.76, 0.8003, 0.8355, 0.8659, 0.8919, 0.914, 0.9326, 0.9481, 0.9609, 0.9713, 0.9797, 0.9864, 0.9917, 0.9958, 0.9989, 1.0012, 1.0028, 1.0039, 1.0045, 1.0049, 1.005, 1.005, 1.0048, 1.0045, 1.0041, 1.0038, 1.0034, 1.003, 1.0027, 1.0023, 1);
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);

  --marge: clamp(16px, 4vw, 40px);
  --largeur: min(1240px, 100% - 2 * var(--marge));

  /* Échelle des couches, la seule du site : tout le reste vit dans le flux. */
  --z-contenu: 1;
  --z-nav: 40;
  --z-panneau: 45;
  --z-modale: 50;
  --z-grain: 60;
  --z-intro: 70;

  /* Anciens jetons, gardés comme alias : les scripts des pages en posent encore en style en ligne
     (couleurs de lots, barres de progression). Ne plus en utiliser dans du code neuf. */
  --bg: var(--noir);
  --bg-soft: var(--noir-2);
  --card: var(--noir-3);
  --card-border: var(--trait);
  --text: var(--encre);
  --text-muted: var(--encre-3);
  --accent: var(--rouge);
  --accent-soft: var(--rouge-vif);
  --accent-glow: var(--rouge-halo);
  --surface: rgb(255 255 255 / 0.03);
  --surface-strong: rgb(255 255 255 / 0.06);
  --surface-card: var(--verre-fond);
  --rail: rgb(0 0 0 / 0.3);
}

@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --ressort: cubic-bezier(0.34, 1.45, 0.64, 1);
    --ressort-doux: cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* Navigation entre pages : un fondu, et le bandeau qui ne bouge pas d'un pixel. Les navigateurs qui ne
   savent pas faire (Firefox à ce jour) changent de page comme avant, sans rien perdre. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--noir);
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--noir);
  color: var(--encre);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Le pied de page reste en bas de l'écran même quand la page est courte (écran de connexion). */
body > main {
  flex: 1 0 auto;
}

body.menu-ouvert,
body.modale-ouverte {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* `display: grid`/`flex` posés par une classe l'emportent sur l'attribut `hidden` : sans cette règle,
   une visionneuse ou un panneau « caché » reste affiché. */
[hidden] {
  display: none !important;
}

::selection {
  background: rgb(255 59 78 / 0.38);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--rouge-vif);
  outline-offset: 3px;
}

.ic {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

.contenu {
  width: var(--largeur);
  margin-inline: auto;
}

.mono {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Barres de défilement discrètes, à la couleur du site, partout où une zone défile. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.14) transparent;
}

/* ── Accessibilité et couches fixes ─────────────────────────────────────────────────────────── */

.evitement {
  position: fixed;
  left: 16px;
  top: -64px;
  z-index: calc(var(--z-intro) + 1);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--encre);
  color: var(--noir);
  font-weight: 600;
  transition: top 0.4s var(--sortie);
}

.evitement:focus {
  top: 16px;
}

/* Grain photographique, fixe et hors du flux : posé sur un élément qui défile, il obligerait le
   navigateur à le repeindre à chaque image. Ici il ne bouge jamais. */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sentinelle {
  position: absolute;
  top: 48px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ── Verre liquide ───────────────────────────────────────────────────────────────────────────── */

.verre {
  position: relative;
  isolation: isolate;
  background: var(--verre-fond), var(--verre-teinte);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border-radius: var(--r-surface);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    inset 0 -1px 0 rgb(255 255 255 / 0.03),
    0 30px 80px -30px rgb(0 0 0 / 0.85);
}

/* Reflet spéculaire : une tache de lumière que le pointeur peut déplacer (--lx, --ly). */
.verre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(130% 90% at var(--lx, 18%) var(--ly, -12%), rgb(255 255 255 / 0.1), transparent 55%);
}

/* Arête réfractée : une bordure dégradée, blanche en haut à gauche, rougie en bas à droite, tracée par
   masque pour ne pas épaissir la boîte. C'est elle qui donne l'épaisseur du verre. */
.verre::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(140deg, rgb(255 255 255 / 0.34), rgb(255 255 255 / 0.06) 36%, rgb(255 255 255 / 0.02) 62%, rgb(255 90 100 / 0.3));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

@media (prefers-reduced-transparency: reduce) {
  .verre {
    background: var(--noir-3);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Plateaux de jeu (roulette, blackjack, coffres) : du verre SANS flou d'arrière-plan.
   Derrière eux, le fond de la page est uni : le flou n'y change rien à l'œil (écart moyen inférieur à un
   niveau de couleur sur 255, mesuré le 11/10/2026), mais le navigateur le recalcule à chaque image de
   chaque animation. Sur un PC sans carte graphique efficace, la roue tournait à 11 images par seconde ;
   sans ce flou, à 29 — et à 38 avec le grain effacé pendant le tour (voir roulette.html). Le bandeau et
   l'en-tête, posés sur la lumière rouge, gardent le leur : là, il se voit. */
.table-jeu .verre {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Surface intérieure : ce qui vit DANS un panneau de verre (tuiles, lignes, encarts). */
.tuile {
  border-radius: var(--r-interne);
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

/* ── Boutons ─────────────────────────────────────────────────────────────────────────────────── */

.bouton,
.bouton-verre {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    scale 0.5s var(--ressort),
    box-shadow 0.35s var(--sortie),
    background-color 0.35s var(--sortie),
    opacity 0.3s;
}

.bouton:active:not(:disabled),
.bouton-verre:active:not(:disabled) {
  scale: 0.965;
}

.bouton:disabled,
.bouton-verre:disabled,
.bouton[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Le rouge du milieu, là où se trouve le texte, garde un contraste de 5,1:1 avec le blanc. */
.bouton {
  color: #fff;
  text-shadow: 0 1px 0 rgb(60 0 8 / 0.35);
  background: linear-gradient(180deg, #f2384d 0%, #d4172f 52%, #a10e26 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.34),
    inset 0 -3px 8px rgb(70 0 10 / 0.35),
    0 0 0 1px rgb(255 82 98 / 0.55),
    0 12px 32px -10px var(--rouge-halo);
}

.bouton:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    inset 0 -3px 8px rgb(70 0 10 / 0.35),
    0 0 0 1px rgb(255 110 124 / 0.7),
    0 18px 44px -10px rgb(255 59 78 / 0.6);
}

.bouton .ic-fleche,
.bouton-verre .ic-fleche {
  transition: translate 0.55s var(--ressort);
}

.bouton:hover .ic-fleche,
.bouton-verre:hover .ic-fleche {
  translate: 4px 0;
}

.bouton--petit {
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
  gap: 8px;
}

.bouton--moyen {
  height: 46px;
  padding: 0 22px;
  font-size: 15px;
}

.bouton--grand {
  height: 62px;
  padding: 0 34px;
  font-size: 17px;
}

.bouton--plein {
  width: 100%;
}

.bouton-verre {
  color: var(--encre);
  background: rgb(255 255 255 / 0.05);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

.bouton-verre:hover {
  background-color: rgb(255 255 255 / 0.1);
}

/* Bouton rond, une seule icône : fermer, joindre un fichier, envoyer. */
.bouton-rond {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 19px;
  color: var(--encre-2);
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  transition:
    color 0.25s,
    background-color 0.25s,
    scale 0.45s var(--ressort);
}

.bouton-rond:hover:not(:disabled) {
  color: var(--encre);
  background: rgb(255 255 255 / 0.1);
}

.bouton-rond:active:not(:disabled) {
  scale: 0.92;
}

.bouton-rond:disabled {
  opacity: 0.4;
}

.magnetique {
  translate: var(--mx, 0px) var(--my, 0px);
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--encre);
}

.lien-fleche .ic {
  color: var(--rouge-vif);
  transition: translate 0.55s var(--ressort);
}

.lien-fleche:hover .ic,
a:hover > .lien-fleche .ic {
  translate: 4px 0;
}

.lien-retour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--encre-2);
  transition: color 0.25s;
}

.lien-retour:hover {
  color: var(--encre);
}

.lien-retour .ic {
  transition: translate 0.55s var(--ressort);
}

.lien-retour:hover .ic {
  translate: -3px 0;
}

.puce-18 {
  display: inline-grid;
  place-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--rouge);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Petite étiquette d'information (« Mise : 1 000 », « 15 chapitres »). */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--encre-2);
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
  white-space: nowrap;
}

.pastille strong {
  color: var(--encre);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pastille .ic {
  color: var(--rouge-vif);
}

/* Série de flammes d'un membre (« 🔥 326 » dans son pseudo Discord), redessinée avec une vraie icône. */
.flamme {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  padding: 1px 7px 1px 5px;
  border-radius: 999px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.74em;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 0.12em;
  color: #ffb3a8;
  background: rgb(255 59 78 / 0.13);
}

.flamme .ic {
  width: 1.05em;
  height: 1.05em;
  color: var(--rouge-vif);
}

/* Squelettes : la forme finale, en attente des chiffres. Jamais de roue qui tourne. */
.squelette {
  display: inline-block;
  min-width: 3ch;
  border-radius: 8px;
  color: transparent;
  background: linear-gradient(100deg, rgb(255 255 255 / 0.05) 40%, rgb(255 255 255 / 0.11) 50%, rgb(255 255 255 / 0.05) 60%) 0 0 / 300% 100%;
  animation: reflet 1.6s linear infinite;
}

.squelette-bloc {
  display: block;
  border-radius: var(--r-interne);
  background: linear-gradient(100deg, rgb(255 255 255 / 0.035) 40%, rgb(255 255 255 / 0.08) 50%, rgb(255 255 255 / 0.035) 60%) 0 0 / 300% 100%;
  animation: reflet 1.6s linear infinite;
}

@keyframes reflet {
  to {
    background-position: -150% 0;
  }
}

/* ── Champs de saisie ────────────────────────────────────────────────────────────────────────── */

.champ {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 0;
  border-radius: var(--r-champ);
  background: rgb(0 0 0 / 0.28);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.09),
    inset 0 2px 6px rgb(0 0 0 / 0.25);
  color: var(--encre);
  font-size: 15px;
  line-height: 1.5;
  transition: box-shadow 0.25s var(--sortie);
}

.champ::placeholder {
  color: var(--encre-3);
}

.champ:hover {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    inset 0 2px 6px rgb(0 0 0 / 0.25);
}

.champ:focus,
.champ:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgb(255 107 92 / 0.8),
    0 0 0 4px rgb(255 59 78 / 0.16);
}

textarea.champ {
  resize: vertical;
  min-height: 120px;
}

.etiquette {
  display: block;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--encre-2);
}

.aide-champ {
  margin-top: 7px;
  font-size: 13px;
  color: var(--encre-3);
}

/* ── Messages d'état ─────────────────────────────────────────────────────────────────────────── */

.bandeau {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-interne);
  font-size: 14.5px;
  line-height: 1.5;
  background: rgb(255 59 78 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(255 59 78 / 0.28);
  color: #ffc4bd;
}

.bandeau > .ic {
  margin-top: 1px;
  font-size: 18px;
}

.bandeau--ok {
  background: var(--vert-fond);
  box-shadow: inset 0 0 0 1px rgb(61 220 132 / 0.3);
  color: #9ff0c1;
}

.bandeau--attente {
  background: var(--ambre-fond);
  box-shadow: inset 0 0 0 1px rgb(245 185 78 / 0.3);
  color: #fbd99a;
}

.bandeau--info {
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  color: var(--encre-2);
}

/* Écran d'invitation à se connecter : une seule action, au centre de ce qu'on veut voir. */
.connexion {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 520px;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 52px) clamp(24px, 4vw, 44px);
  text-align: center;
}

.connexion-icone {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  font-size: 32px;
  color: var(--rouge-vif);
  background: rgb(255 59 78 / 0.12);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    inset 0 0 0 1px rgb(255 59 78 / 0.22);
}

.connexion h2 {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.connexion p {
  max-width: 40ch;
  color: var(--encre-2);
  font-size: 15.5px;
}

.connexion .bouton {
  margin-top: 10px;
}

.connexion small {
  max-width: 42ch;
  font-size: 12.5px;
  color: var(--encre-3);
}

/* Notification brève, en bas de l'écran (achat réussi, message envoyé). */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: var(--z-modale);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 13px 20px 13px 16px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  translate: -50% 0;
  animation: toast-entree 0.6s var(--ressort) both;
}

.toast .ic {
  font-size: 19px;
}

.toast--ok .ic {
  color: var(--vert);
}

.toast--erreur .ic {
  color: var(--rouge-vif);
}

.toast.sort {
  animation: toast-sortie 0.3s var(--sortie) forwards;
}

@keyframes toast-entree {
  from {
    opacity: 0;
    translate: -50% 24px;
    scale: 0.94;
  }
}

@keyframes toast-sortie {
  to {
    opacity: 0;
    translate: -50% 12px;
  }
}

/* ── Navigation ──────────────────────────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: var(--z-nav);
  translate: -50% 0;
  /* Mêmes bords que le contenu : le bandeau et la page tombent sur une seule grille. */
  width: min(1240px + 24px, 100% - 24px);
  height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  view-transition-name: rl-nav;
  transition:
    height 0.6s var(--ressort-doux),
    top 0.6s var(--ressort-doux);
}

/* Au défilement, le verre s'épaissit : sur du contenu clair ou chargé, un bandeau trop transparent
   devient illisible. */
.nav.est-compacte {
  top: 10px;
  height: 56px;
  --verre-teinte: rgb(14 7 9 / 0.74);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  flex: none;
}

.marque img {
  width: 26px;
  height: 26px;
}

.nav-liens {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 18px;
}

.nav-lien {
  position: relative;
  z-index: 1;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--encre-2);
  transition: color 0.3s var(--sortie);
}

.nav-lien:hover,
.nav-lien[aria-current="page"] {
  color: var(--encre);
}

/* Une goutte de verre qui glisse d'un lien à l'autre. Sa largeur et sa position suivent un ressort :
   elle s'étire en voyageant, puis se pose. */
.nav-indicateur {
  position: absolute;
  top: 50%;
  left: 0;
  height: 38px;
  width: var(--w, 0px);
  translate: var(--x, 0px) -50%;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.075);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    inset 0 0 0 1px rgb(255 255 255 / 0.06);
  opacity: 0;
  pointer-events: none;
}

.nav-indicateur.est-pret {
  opacity: 1;
  transition:
    translate 0.62s var(--ressort),
    width 0.62s var(--ressort),
    opacity 0.3s;
}

/* Page hors du bandeau (formation staff) : la goutte ne se pose que sous le pointeur. */
.nav-indicateur.est-libre:not(.est-survol) {
  opacity: 0;
}

.nav-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.nav-compte {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--encre-2);
  transition:
    color 0.3s,
    background-color 0.3s;
}

.nav-compte span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-compte:hover,
.nav-compte[aria-expanded="true"] {
  color: var(--encre);
  background: rgb(255 255 255 / 0.06);
}

.nav-compte img {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

/* Bouton « Vérification » : le seul élément du bandeau qui brille, tant que la personne n'est pas
   vérifiée. Une arête en dégradé conique qui tourne lentement (même masque que l'arête du verre) et un
   halo rouge qui respire. Une fois vérifiée, il redevient un lien calme, coche verte : on n'insiste pas
   auprès de quelqu'un qui l'a déjà fait. */
@property --verif-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.nav-verif {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  height: 40px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--encre);
  background: linear-gradient(180deg, rgb(255 59 78 / 0.2), rgb(255 59 78 / 0.07));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 0 18px -6px var(--rouge-halo);
  animation: verif-halo 3.4s ease-in-out infinite;
  transition: background-color 0.3s;
}

.nav-verif::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(
    from var(--verif-angle),
    rgb(255 120 110 / 0.95),
    rgb(255 59 78 / 0.12) 28%,
    rgb(255 255 255 / 0.55) 50%,
    rgb(255 59 78 / 0.12) 72%,
    rgb(255 120 110 / 0.95)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: verif-arete 5s linear infinite;
}

.nav-verif .ic {
  font-size: 17px;
  color: var(--rouge-vif);
}

.nav-verif:hover {
  background-color: rgb(255 59 78 / 0.12);
}

.nav-verif[hidden],
.menu-verif[hidden] {
  display: none;
}

.nav-verif.est-verifie {
  color: var(--encre-2);
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(61 220 132 / 0.22);
  animation: none;
}

.nav-verif.est-verifie::before {
  display: none;
}

.nav-verif.est-verifie .ic,
.menu-verif.est-verifie .ic {
  color: var(--vert);
}

@keyframes verif-arete {
  to {
    --verif-angle: 360deg;
  }
}

@keyframes verif-halo {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.12),
      0 0 16px -8px var(--rouge-halo);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.12),
      0 0 26px -4px var(--rouge-halo);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-verif,
  .nav-verif::before {
    animation: none;
  }
}

/* Le bouton « Rejoindre » du bandeau n'apparaît qu'une fois celui du héros sorti de l'écran : le
   visiteur l'a toujours sous la main, mais jamais en double. */
.nav-cta {
  opacity: 0;
  scale: 0.85;
  width: 0;
  padding-inline: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s,
    scale 0.55s var(--ressort),
    width 0.55s var(--ressort),
    padding 0.55s var(--ressort);
}

.nav.montre-cta .nav-cta {
  opacity: 1;
  scale: 1;
  width: 136px;
  padding-inline: 18px;
  pointer-events: auto;
}

.nav-menu {
  display: none;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  font-size: 22px;
}

.nav-menu:hover {
  background: rgb(255 255 255 / 0.07);
}

/* Le bouton « Vérification » perd son texte avant que la place ne manque : avec un pseudo long et
   « Rejoindre » affiché, le libellé complet faisait déborder le bandeau sous 1 280 px. */
@media (max-width: 1280px) {
  .nav-verif {
    width: 42px;
    padding: 0;
  }

  .nav-verif span {
    display: none;
  }
}

/* Téléphone : quand l'accueil fait apparaître « Rejoindre » dans le bandeau, les deux boutons ne
   tiennent plus côte à côte (36 px de trop à 390 px). « Vérification » cède sa place, il reste dans le
   menu ; sur les autres pages, sans « Rejoindre », il est toujours là. */
@media (max-width: 460px) {
  .nav.montre-cta .nav-verif {
    display: none;
  }
}

/* Seuil du menu escamotable : 1 180 px et non plus 1 100 px. À 1 101 px, un pseudo long et « Rejoindre »
   faisaient déjà dépasser le bandeau de 16 px, avant même l'ajout du bouton « Vérification ». Le même
   seuil est repris dans site-nav.js (fermeture du menu quand la fenêtre s'élargit). */
@media (max-width: 1180px) {
  .nav-liens,
  .nav-compte {
    display: none;
  }

  .nav-menu {
    display: grid;
  }
}

/* ── Panneau du profil (bandeau) ─────────────────────────────────────────────────────────────── */

.profil {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: var(--z-panneau);
  width: 320px;
  padding: 18px;
  --verre-teinte: rgb(16 8 10 / 0.86);
  transform-origin: top right;
  animation: profil-entree 0.5s var(--ressort) both;
}

@keyframes profil-entree {
  from {
    opacity: 0;
    scale: 0.94;
    translate: 0 -6px;
  }
}

.profil-tete {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profil-tete img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

.profil-nom {
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profil-sous {
  font-size: 13px;
  color: var(--encre-3);
}

.profil-corps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.profil-stat {
  padding: 12px 14px;
}

.profil-stat span {
  display: block;
  font-size: 12.5px;
  color: var(--encre-3);
}

.profil-stat strong {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.profil-stat strong .rl-icon,
.profil-stat strong .ic {
  font-size: 16px;
  color: var(--rouge-vif);
}

.profil-xp {
  grid-column: 1 / -1;
  padding: 2px 2px 0;
}

.profil-xp-barre {
  height: 6px;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.07);
  overflow: hidden;
}

.profil-xp-barre span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rouge-profond), var(--rouge), var(--rouge-vif));
  transform-origin: left;
  animation: jauge 1s var(--ressort-doux) both 0.15s;
}

@keyframes jauge {
  from {
    scale: 0 1;
  }
}

.profil-xp p {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--encre-3);
}

.profil-liens {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--trait);
}

.profil-liens a,
.profil-liens button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 14.5px;
  color: var(--encre-2);
  text-align: left;
  transition:
    color 0.2s,
    background-color 0.2s;
}

.profil-liens a:hover,
.profil-liens button:hover {
  color: var(--encre);
  background: rgb(255 255 255 / 0.06);
}

.profil-liens .ic,
.profil-liens .rl-icon {
  font-size: 17px;
  color: var(--encre-3);
}

.profil-liens .profil-deconnexion {
  color: #ff9a90;
}

.profil-liens .profil-deconnexion .ic {
  color: inherit;
}

/* ── Menu sur petit écran ────────────────────────────────────────────────────────────────────── */

.menu {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 18px var(--marge) 28px;
  border: 0;
  color: var(--encre);
  background: rgb(10 6 7 / 0.72);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  display: none;
  flex-direction: column;
}

.menu[open] {
  display: flex;
  animation: menu-entree 0.6s var(--sortie) both;
}

.menu.se-ferme {
  animation: menu-sortie 0.34s cubic-bezier(0.4, 0, 1, 1) both;
}

.menu::backdrop {
  background: transparent;
}

/* La feuille s'ouvre en goutte depuis le bouton qui l'a appelée (--ox, --oy). */
@keyframes menu-entree {
  from {
    clip-path: circle(0 at var(--ox, 100%) var(--oy, 0%));
  }
  to {
    clip-path: circle(150% at var(--ox, 100%) var(--oy, 0%));
  }
}

@keyframes menu-sortie {
  from {
    clip-path: circle(150% at var(--ox, 100%) var(--oy, 0%));
  }
  to {
    clip-path: circle(0 at var(--ox, 100%) var(--oy, 0%));
  }
}

.menu-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
}

.menu-fermer {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 22px;
  background: rgb(255 255 255 / 0.07);
}

.menu-liens {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 40px;
}

.menu-liens a {
  width: fit-content;
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.25;
  opacity: 0;
  translate: 0 18px;
}

.menu[open] .menu-liens a {
  animation: menu-lien 0.7s var(--ressort-doux) forwards;
  animation-delay: calc(0.08s + var(--i, 0) * 45ms);
}

.menu-liens a[aria-current="page"] {
  color: var(--rouge-vif);
}

@keyframes menu-lien {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.menu-pied {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.menu-pied .bouton,
.menu-pied .bouton-verre {
  width: 100%;
}

.menu-verif {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    inset 0 0 0 1px rgb(255 59 78 / 0.35),
    0 0 26px -10px var(--rouge-halo);
}

.menu-verif .ic {
  color: var(--rouge-vif);
}

.menu-verif.est-verifie {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    inset 0 0 0 1px rgb(61 220 132 / 0.22);
}

.menu-pied .bouton-verre img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

/* ── En-tête des pages intérieures ───────────────────────────────────────────────────────────────
   Même langage que le héros de l'accueil — surtitre en verre, grand titre dont la fin passe en
   italique rouge, lumière rouge au-dessus — mais sans WebGL : une page de jeu a déjà sa propre
   animation, et deux choses qui bougent se disputent le regard. */

.tete-page {
  position: relative;
  isolation: isolate;
  padding: clamp(128px, 14vw, 168px) 0 clamp(36px, 5vw, 56px);
}

.tete-lumiere {
  position: absolute;
  inset: 0 0 -30% 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}

.tete-lumiere::before,
.tete-lumiere::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.tete-lumiere::before {
  width: min(1100px, 90vw);
  aspect-ratio: 1;
  right: -14%;
  top: max(-620px, -52vw);
  background: radial-gradient(closest-side, rgb(255 59 78 / 0.34), rgb(140 16 39 / 0.2) 48%, transparent);
  animation: lumiere-a 19s ease-in-out infinite alternate;
}

.tete-lumiere::after {
  width: min(620px, 60vw);
  aspect-ratio: 1;
  left: -8%;
  top: max(-360px, -34vw);
  background: radial-gradient(closest-side, rgb(255 120 100 / 0.14), transparent);
  animation: lumiere-b 23s ease-in-out infinite alternate;
}

@keyframes lumiere-a {
  to {
    transform: translate(-9%, 7%) scale(1.08);
  }
}

@keyframes lumiere-b {
  to {
    transform: translate(12%, 10%) scale(0.92);
  }
}

.tete-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 48px;
  align-items: end;
}

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  padding: 6px 15px 6px 8px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--encre-2);
}

.surtitre .ic,
.surtitre .rl-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 50%;
  color: var(--rouge-vif);
  background: rgb(255 59 78 / 0.14);
}

.tete-page h1 {
  margin-top: 22px;
  max-width: 17ch;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 640;
  text-wrap: balance;
}

/* L'accent tient à l'italique et à la couleur de la même famille, jamais à une seconde police. */
.tete-page h1 em,
.titre-section em {
  font-style: italic;
  font-weight: 460;
  color: var(--rouge-vif);
}

.tete-sous {
  margin-top: 20px;
  max-width: 56ch;
  font-size: clamp(16.5px, 1.25vw, 18.5px);
  line-height: 1.6;
  color: var(--encre-2);
  text-wrap: pretty;
}

.tete-infos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.tete-cote {
  justify-self: end;
}

@media (max-width: 860px) {
  .tete-grille {
    grid-template-columns: 1fr;
  }

  .tete-cote {
    justify-self: start;
  }
}

/* Solde de crédits : affiché dans l'en-tête des pages où l'on dépense. */
.solde {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 14px;
  border-radius: 22px;
}

.solde-icone {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  font-size: 24px;
  color: var(--rouge-vif);
  background: rgb(255 59 78 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(255 59 78 / 0.22);
}

.solde-lib {
  display: block;
  font-size: 12.5px;
  color: var(--encre-3);
}

.solde-val {
  display: block;
  font-size: 26px;
  font-weight: 620;
  letter-spacing: -0.035em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

/* Le solde qui vient de changer clignote une fois dans la couleur du gain ou de la perte. */
.solde-val.monte {
  animation: solde-monte 1.1s var(--sortie);
}

.solde-val.descend {
  animation: solde-descend 1.1s var(--sortie);
}

@keyframes solde-monte {
  25% {
    color: var(--vert);
  }
}

@keyframes solde-descend {
  25% {
    color: var(--rouge-vif);
  }
}

/* ── Titres de section, apparitions ──────────────────────────────────────────────────────────── */

.section {
  position: relative;
  padding: clamp(72px, 9vw, 130px) 0;
}

.titre-section {
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: 630;
  text-wrap: balance;
}

.chapo {
  margin-top: 16px;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--encre-2);
  text-wrap: pretty;
}

/* Entrée des titres : les mots montent un à un depuis leur ligne, puis le reste suit. Le découpage est
   fait par site-nav.js (voir `animerTitres`) sur tout élément portant [data-mots]. */
.mot {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: 0.12em;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  vertical-align: top;
}

.mot > span {
  display: inline-block;
}

html.js [data-mots] .mot > span {
  translate: 0 108%;
}

/* Tant qu'il n'est pas découpé, le titre reste masqué : sinon il s'afficherait une image entière, puis
   disparaîtrait pour jouer son entrée. */
html.js [data-mots]:not([data-mots-fait]) {
  opacity: 0;
}

html.js [data-entree] {
  opacity: 0;
  translate: 0 22px;
}

html.js body.entree-lancee [data-mots] .mot > span {
  translate: 0 0;
  transition: translate 1.05s var(--ressort-doux);
  transition-delay: calc(var(--retard, 0s) + var(--i, 0) * 45ms);
}

html.js body.entree-lancee [data-entree] {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.9s var(--sortie),
    translate 1.1s var(--ressort-doux);
  transition-delay: calc(var(--retard, 0s) + var(--i, 0) * 80ms);
}

/* Apparition au défilement. Cachée seulement quand le script tourne : sans lui, tout reste lisible. */
html.js [data-revele] {
  opacity: 0;
  translate: 0 30px;
}

html.js [data-revele].est-visible {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.9s var(--sortie),
    translate 1.15s var(--ressort-doux);
  transition-delay: calc(var(--i, 0) * 75ms);
}

/* ── Fenêtre modale ──────────────────────────────────────────────────────────────────────────────
   Un vrai <dialog> : piège du focus, touche Échap et inertie de la page viennent du navigateur. */

.modale {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-surface);
  color: var(--encre);
  background: transparent;
  overflow: visible;
}

.modale[open] {
  animation: modale-entree 0.55s var(--ressort) both;
}

.modale::backdrop {
  background: rgb(6 3 4 / 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fondu 0.3s var(--sortie) both;
}

.modale-corps {
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: clamp(22px, 3vw, 32px);
  --verre-teinte: rgb(18 9 11 / 0.84);
  scrollbar-width: none;
}

.modale-corps::-webkit-scrollbar {
  display: none;
}

.modale-fermer {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}

@keyframes modale-entree {
  from {
    opacity: 0;
    scale: 0.94;
    translate: 0 14px;
  }
}

@keyframes fondu {
  from {
    opacity: 0;
  }
}

/* Visionneuse d'image (pièces jointes d'une conversation). */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: var(--z-modale);
  display: grid;
  place-items: center;
  padding: 30px;
  background: rgb(4 2 3 / 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fondu 0.25s var(--sortie) both;
}

.visionneuse img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--r-interne);
  box-shadow: 0 40px 100px -20px rgb(0 0 0 / 0.9);
  animation: modale-entree 0.5s var(--ressort) both;
}

.visionneuse .bouton-rond {
  position: absolute;
  top: 18px;
  right: 18px;
}

/* ── Pied de page ────────────────────────────────────────────────────────────────────────────── */

.pied {
  position: relative;
  border-top: 1px solid rgb(255 255 255 / 0.06);
  padding: 64px 0 36px;
  background: linear-gradient(180deg, var(--noir-2), var(--noir));
}

.pied-grille {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
}

.pied-marque p {
  margin-top: 16px;
  max-width: 34ch;
  font-size: 14.5px;
  color: var(--encre-2);
}

.pied-marque .puce-18 {
  margin-top: 18px;
}

.pied nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pied h3 {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--encre-3);
}

.pied nav a {
  width: fit-content;
  font-size: 14.5px;
  color: var(--encre-2);
  transition: color 0.25s;
}

.pied nav a:hover {
  color: var(--encre);
}

.pied-bas {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.06);
  font-size: 13.5px;
  color: var(--encre-3);
}

@media (max-width: 900px) {
  .pied-grille {
    grid-template-columns: 1fr 1fr;
  }

  .pied-marque {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .pied-bas {
    flex-direction: column;
    gap: 4px;
  }
}

/* ── Filet de sécurité ───────────────────────────────────────────────────────────────────────────
   Posé par le script en tête de chaque page quand le script principal ne s'est pas signalé au bout de
   trois secondes (bloqueur, erreur réseau) : tout s'affiche tel quel plutôt qu'une page vide. */
html.secours [data-entree],
html.secours [data-mots]:not([data-mots-fait]),
html.secours [data-mots] .mot > span,
html.secours [data-revele] {
  opacity: 1;
  translate: none;
}

/* ── Mouvement réduit ────────────────────────────────────────────────────────────────────────────
   Tout ce qui bouge de soi-même s'arrête ; les états restent, sans transition. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  html.js [data-revele],
  html.js [data-entree],
  html.js [data-mots] .mot > span {
    opacity: 1;
    translate: none;
  }
}

/* ── Contrôles partagés ──────────────────────────────────────────────────────────────────────── */

/* Sélecteur à segments (périodes, onglets courts) : une goutte de verre glisse sous le choix actif. */
.segments {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.28);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
}

.segments button {
  position: relative;
  z-index: 1;
  height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--encre-2);
  white-space: nowrap;
  transition: color 0.3s var(--sortie);
}

.segments button:hover,
.segments button[aria-pressed="true"],
.segments button[aria-selected="true"] {
  color: var(--encre);
}

.segments-goutte {
  position: absolute;
  top: 4px;
  left: 0;
  height: 34px;
  width: var(--w, 0px);
  translate: var(--x, 0px) 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.09);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    inset 0 0 0 1px rgb(255 255 255 / 0.07);
  pointer-events: none;
}

.segments-goutte.est-pret {
  transition:
    translate 0.55s var(--ressort),
    width 0.55s var(--ressort);
}

/* Interrupteur : une vraie case à cocher, habillée. Le clavier et les lecteurs d'écran la voient. */
.interrupteur {
  position: relative;
  flex: none;
  display: inline-block;
  width: 50px;
  height: 30px;
}

.interrupteur input {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.interrupteur input:disabled {
  cursor: wait;
}

.interrupteur span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  transition: background-color 0.3s var(--sortie);
}

.interrupteur span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.4);
  transition: translate 0.5s var(--ressort);
}

.interrupteur input:checked + span {
  background: linear-gradient(180deg, #f2384d, #b3122a);
}

.interrupteur input:checked + span::after {
  translate: 20px 0;
}

.interrupteur input:focus-visible + span {
  outline: 2px solid var(--rouge-vif);
  outline-offset: 3px;
}

.interrupteur input:disabled + span {
  opacity: 0.5;
}

.modale--large {
  width: min(1000px, calc(100vw - 32px));
}

.pastille .rl-icon {
  color: var(--rouge-vif);
}

.surtitre a {
  color: var(--encre);
  transition: color 0.25s;
}

.surtitre a:hover {
  color: var(--rouge-vif);
}

/* Fenêtre de confirmation (SiteNav.confirmer). */
.modale--confirmation {
  width: min(440px, calc(100vw - 32px));
}

.confirmation {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 32px 28px 26px;
}

.confirmation h2 {
  font-size: 22px;
  font-weight: 620;
  letter-spacing: -0.03em;
}

.confirmation p {
  color: var(--encre-2);
  font-size: 15px;
}

.confirmation-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

/* À l'ouverture, le focus se pose sur le panneau (autofocus) et non sur la croix : l'anneau autour du
   bouton « Fermer » laissait croire qu'il était déjà enfoncé. Tab mène ensuite aux contrôles. */
.modale-corps:focus {
  outline: none;
}