/* Loup-garou/public/pages.css
   Feuille unique des pages statiques du site vitrine (/presentation/, /roles/, /camps/).
   Ces pages ne chargent aucun bundle : tout tient ici, et rien n'est partagé avec styles.css
   pour qu'une modification de l'application ne casse jamais le référencement.
   Le monde visuel reste celui du jeu : ardoise nocturne, Special Elite en titrage, ambre en accent. */

@font-face {
  font-family: 'Cantarell';
  src: url('/assets/fonts/Cantarell/Cantarell-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cantarell';
  src: url('/assets/fonts/Cantarell/Cantarell-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Special Elite';
  src: url('/assets/fonts/Special_Elite/SpecialElite-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --bg: #020617;
  --bg-card: #0f172a;
  --accent: #fbbf24;
  --slate-100: #e2e8f0;
  --slate-200: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-800: #1e293b;
  --camp-village: #38bdf8;
  --camp-wolves: #ef4444;
  --camp-occult: #a855f7;
  --mesure: 68ch;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--slate-100);
  font-family: 'Cantarell', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }

/* ── Barre du haut ─────────────────────────────────────────────────────────── */
/* L'en-tête tenait 113 px sur un écran de 390 px : la barre demandait 532 px de large, donc
   la navigation passait à la ligne. Trois mesures ensemble la ramènent à 53 px — retirer le
   sélecteur de langue seul n'aurait pas suffi (450 px demandés pour 358 disponibles).
     1. plus de retour à la ligne : la nav défile horizontalement si elle déborde ;
     2. rembourrage vertical réduit à 4 px, les liens gardant leurs 44 px de cible ;
     3. le choix de langue est descendu en pied de page. */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  padding: 4px 14px;
  background: rgba(2, 6, 23, 0.94);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  backdrop-filter: blur(8px);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Masqué au défilement vers le bas, rendu dès qu'on remonte (cf. pages.js). */
.topbar.cachee { transform: translateY(-100%); }

.brand {
  font-family: 'Special Elite', serif;
  font-size: clamp(16px, 4.2vw, 20px); letter-spacing: 0.04em;
  color: var(--slate-100); text-decoration: none;
  flex-shrink: 0;
}
.topbar nav { margin-left: auto; min-width: 0; }
.nav-clip {
  display: flex; align-items: center; gap: 2px; flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav-clip::-webkit-scrollbar { display: none; }
.bloc.sans-image .bloc-texte { flex: 1 1 100%; }
.topbar nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 10px;
  color: var(--slate-200); text-decoration: none;
  font-size: clamp(13px, 3.4vw, 14px); border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.topbar nav a:hover { background: rgba(148, 163, 184, 0.12); }

/* Page courante : le lien cesse d'être un lien et devient un repère. */
.topbar nav a[aria-current="page"] {
  color: var(--accent);
  background: rgba(251, 191, 36, 0.14);
  font-weight: 700;
  cursor: default;
}
.topbar nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.topbar nav a.lang-mobile { display: none; }   /* visible seulement dans le panneau replie */

/* « Jouer » vit hors de la navigation : c'est l'action principale de la page, elle reste
   visible en permanence, y compris quand le reste passe derriere le bouton burger. */
.topbar > .play {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 16px; flex-shrink: 0;
  border-radius: 999px;
  background: var(--accent); color: #111827;
  font-weight: 700; font-size: clamp(13px, 3.4vw, 14px); text-decoration: none;
  white-space: nowrap;
}
.topbar > .play:hover { background: #f59e0b; }
.topbar > .play:focus-visible { outline: 2px solid var(--slate-100); outline-offset: 2px; }

.burger {
  display: none;
  width: 44px; height: 44px; flex-shrink: 0;
  padding: 0; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger:hover { background: rgba(148, 163, 184, 0.12); }
.burger:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.burger-trait {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--slate-100);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.14s ease-out;
}
/* Ouvert, les trois traits deviennent une croix : le bouton dit ce qu'il fera, pas ce qu'il a fait. */
.burger[aria-expanded="true"] .burger-trait:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-trait:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger-trait:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Bandeau d'ouverture ───────────────────────────────────────────────────── */
main { display: block; }

.hero {
  position: relative;
  padding: clamp(64px, 14vw, 140px) 16px clamp(48px, 9vw, 96px);
  text-align: center;
  background:
    linear-gradient(rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.95)),
    url('/assets/village/nuit.webp') center bottom / cover no-repeat;
}
.hero h1 {
  font-family: 'Special Elite', serif;
  font-weight: 400;
  font-size: clamp(34px, 8vw, 68px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 auto 22px;
  max-width: 16ch;
  text-wrap: balance;
  text-shadow: 0 4px 18px rgba(2, 6, 23, 0.9);
}
.lead {
  max-width: var(--mesure);
  margin: 0 auto;
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--slate-200);
}
.hero .lead { text-shadow: 0 2px 10px rgba(2, 6, 23, 0.9); }

.btn-play {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px;
  border-radius: 999px;
  background: var(--accent); color: #111827;
  font-weight: 700; font-size: 16px; text-decoration: none;
  box-shadow: 0 8px 22px rgba(2, 6, 23, 0.6);
}
.btn-play:hover { background: #f59e0b; }
.btn-play.grand { margin-top: 30px; min-height: 54px; padding: 0 34px; font-size: 17px; }

/* ── Corps de lecture ──────────────────────────────────────────────────────── */
.entete { padding: clamp(40px, 7vw, 72px) 16px 8px; text-align: center; }
.entete h1, .fiche h1 {
  font-family: 'Special Elite', serif; font-weight: 400;
  font-size: clamp(30px, 6vw, 46px); line-height: 1.15; margin: 0 0 16px;
  text-wrap: balance;
}

.prose { max-width: 880px; margin: 0 auto; padding: clamp(40px, 8vw, 80px) 16px; }

/* Chaque section porte une illustration. Elles alternent de cote : sans ça, cinq blocs
   identiques deviendraient une liste, et l'oeil cesserait de descendre. */
.bloc {
  display: flex; align-items: flex-start; gap: clamp(20px, 4vw, 38px);
  margin-bottom: clamp(44px, 8vw, 76px);
}
.bloc:nth-child(even) { flex-direction: row-reverse; }
.bloc figure {
  margin: 0; flex-shrink: 0;
  width: clamp(120px, 26vw, 190px);
}
.bloc figure img {
  width: 100%; height: auto;
  aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.65);
}
.bloc-texte { min-width: 0; flex: 1 1 auto; }

/* Sous 560 px, la colonne de texte tomberait a une trentaine de caracteres : on empile,
   et l'image passe en bandeau large plutot qu'en vignette perdue. */
/* En dessous de 600 px, la barre demande plus de place qu'elle n'en a : la navigation passe
   derriere un bouton, « Jouer » reste dehors. */
@media (max-width: 600px) {
  .burger { display: flex; }
  .topbar { flex-wrap: wrap; row-gap: 0; }

  /* La hauteur s'anime par grid-template-rows, jamais par `height` : animer une propriete
     de layout force un recalcul a chaque image. Meme procede que le selecteur de role du jeu,
     d'ou le conteneur d'ecretage intermediaire. */
  .topbar nav {
    order: 3; flex-basis: 100%; margin-left: 0;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .topbar.menu-ouvert nav { grid-template-rows: 1fr; }
  .nav-clip {
    overflow: hidden; min-height: 0;
    flex-direction: column; align-items: stretch; gap: 0;
  }
  .topbar nav a { min-height: 48px; border-radius: 10px; }
  .topbar nav a.lang-mobile {
    display: flex; color: var(--slate-400);
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0; margin-top: 4px;
  }

  /* « Jouer » et le bouton burger sont rejetes a droite. Sans cette marge automatique ils
     se collaient a la marque : c'est la navigation qui portait le `margin-left: auto` en
     grand ecran, or elle passe ici sur sa propre ligne et ne pousse donc plus rien. */
  .topbar > .play { margin-left: auto; }

  /* Illustrations : les sources sont TOUTES en portrait 2:3. Les forcer en 16:9 ne montrait
     qu'une bande horizontale au milieu d'un portrait — ce que l'oeil lit comme un etirement.
     On garde le format d'origine et on borne la largeur. */
  .bloc, .bloc:nth-child(even) { flex-direction: column; gap: 14px; }
  .bloc figure { width: min(150px, 40vw); margin-inline: auto; }
}

.bloc h2 {
  font-family: 'Special Elite', serif; font-weight: 400;
  font-size: clamp(22px, 4vw, 30px); line-height: 1.25;
  margin: 0 0 14px; color: var(--accent);
  text-wrap: balance;
}
.bloc p { margin: 0; max-width: var(--mesure); color: var(--slate-200); }

.rappel {
  max-width: 820px; margin: 0 auto; padding: 28px 16px 60px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}
.rappel h2 { font-size: 17px; margin: 24px 0 8px; color: var(--slate-100); }
.rappel p { margin: 0; color: var(--slate-400); font-size: 14px; max-width: var(--mesure); }

/* ── Page Déroulement ──────────────────────────────────────────────────────── */
.regle { max-width: 820px; margin: 0 auto; padding: clamp(28px, 5vw, 44px) 16px 0; }
.regle h2, .etapes h2, .rythmes h2 {
  font-family: 'Special Elite', serif; font-weight: 400;
  font-size: clamp(21px, 3.6vw, 29px); line-height: 1.25;
  margin: 0 0 14px; color: var(--accent);
  text-wrap: balance;
}
.regle p { margin: 0 0 12px; max-width: var(--mesure); color: var(--slate-200); }

/* La parole est la première règle de la page, elle mérite d'être posée. */
.regle-parole {
  border-left: 1px solid rgba(251, 191, 36, 0.5);
  padding-left: 18px;
}

/* Les numéros sont ici de l'information, pas de la décoration : c'est un ordre de tour,
   et le lecteur a besoin de savoir ce qui vient après quoi. */
.etapes { max-width: 820px; margin: 0 auto; padding: clamp(34px, 6vw, 56px) 16px 0; }
.etapes ol { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.etapes li {
  counter-increment: etape;
  position: relative;
  padding-left: 54px;
  padding-bottom: clamp(20px, 3vw, 28px);
}
.etapes li::before {
  content: counter(etape);
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: var(--accent);
  font-family: 'Special Elite', serif; font-size: 16px;
}
/* Le fil qui relie les étapes : il dit que la nuit suit le crépuscule, en boucle. */
.etapes li:not(:last-child)::after {
  content: ""; position: absolute; left: 18px; top: 40px; bottom: 6px;
  width: 1px; background: rgba(251, 191, 36, 0.22);
}
.etapes h3 { margin: 6px 0 6px; font-size: calc(17px * 1); color: var(--slate-100); }
.etapes p { margin: 0; color: var(--slate-200); max-width: var(--mesure); }

.rythmes { max-width: 880px; margin: 0 auto; padding: clamp(34px, 6vw, 56px) 16px 0; }
.rythmes-lead { margin: 0 0 22px; color: var(--slate-400); max-width: var(--mesure); }
.rythmes-paire { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.rythmes-paire article {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  padding: 20px;
}
.rythme-sous {
  margin: 0 0 4px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--camp-village);
}
.rythmes-paire h3 {
  margin: 0 0 10px;
  font-family: 'Special Elite', serif; font-weight: 400;
  font-size: 22px; color: var(--slate-100);
}
.rythmes-paire p { margin: 0; color: var(--slate-200); }

/* ── Sections de rôles ─────────────────────────────────────────────────────── */
.tier { max-width: 1040px; margin: 0 auto; padding: clamp(28px, 5vw, 48px) 16px 0; }
.tier h2 {
  font-family: 'Special Elite', serif; font-weight: 400;
  font-size: clamp(20px, 3.4vw, 27px); margin: 0 0 4px;
}
.tier[data-tier="base"] h2 { color: var(--camp-village); }
.tier[data-tier="additionnel"] h2 { color: #4ade80; }
.tier[data-tier="secte"] h2 { color: var(--camp-occult); }
.tier-apart h2 { color: var(--accent); }
.tier-desc { margin: 0 0 22px; color: var(--slate-400); font-size: 14px; }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}
.tier .grille { padding: 0; }
.grille.petite { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px; }

.carte {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.18s ease-out, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.carte img {
  width: 100%; height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--slate-800);
}
.carte-nom {
  padding: 10px 12px 2px;
  font-weight: 700; font-size: 15px;
  color: var(--slate-100);
}
.carte-resume {
  padding: 0 12px 12px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--slate-400);
}
.carte[data-tier="base"] { --accent-carte: var(--camp-village); }
.carte[data-tier="additionnel"] { --accent-carte: #4ade80; }
.carte[data-tier="secte"] { --accent-carte: var(--camp-occult); }
@media (hover: hover) {
  .carte:hover { border-color: var(--accent-carte, var(--accent)); transform: translateY(-3px); }
}
.carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Fiche d'un rôle ou d'un camp ──────────────────────────────────────────── */
.fil { max-width: 820px; margin: 0 auto; padding: 22px 16px 0; }
.fil a { font-size: 14px; text-decoration: none; }
.fil a::before { content: "← "; }

/* La carte prend sa colonne, TOUT le texte passe a cote — titre, camps, variantes et
   conditions de victoire compris. La carte reste visible pendant qu'on lit : c'est elle
   qu'on garde en tete en parcourant les pouvoirs. */
/* Deux temps : la carte et son accroche cote a cote, puis le detail en pleine largeur.
   L'accroche donne le ton et l'enjeu ; la description du jeu, en dessous, donne les regles. */
.fiche { max-width: 880px; margin: 0 auto; padding: 18px 16px 40px; }
.fiche-tete {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 34px);
  align-items: center;
  margin-bottom: clamp(26px, 5vw, 42px);
}
.fiche-carte {
  width: 100%; height: auto;
  aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--accent-carte, rgba(148, 163, 184, 0.3));
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.7);
}
.fiche-accroche { min-width: 0; }
.fiche-accroche h1 { margin-top: 0; }

/* L'accroche s'adresse au joueur. Elle a droit a la voix du jeu, pas a celle d'une notice. */
.accroche {
  margin: 0;
  font-family: 'Special Elite', serif;
  font-size: clamp(15px, 2.6vw, 19px);
  line-height: 1.5;
  color: var(--slate-100);
  max-width: 46ch;
}
.fiche-note { margin: 12px 0 0; font-size: 13px; color: var(--slate-400); max-width: 46ch; }
.fiche-corps { min-width: 0; }

/* Sous 620 px, deux colonnes reduiraient l'accroche a une trentaine de caracteres : on empile
   et la carte se centre. */
@media (max-width: 620px) {
  .fiche-tete { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .fiche-visuel { width: min(180px, 46vw); margin-inline: auto; }
  .accroche, .fiche-note { max-width: none; }
  .fiche-camps { justify-content: center; }
}
.fiche-tier {
  margin: 0 0 6px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-carte, var(--slate-400));
}
.fiche[data-tier="base"] { --accent-carte: var(--camp-village); }
.fiche[data-tier="additionnel"] { --accent-carte: #4ade80; }
.fiche[data-tier="secte"] { --accent-carte: var(--camp-occult); }

/* Camps ou le role peut apparaitre. Remplace un resume qui repetait la premiere puce du
   corps trois lignes plus bas. */
.fiche-camps {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.fiche-camps li {
  font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid currentColor;
}
.fiche-camps li[data-camp="village"] { color: var(--camp-village); }
.fiche-camps li[data-camp="loups"] { color: #fca5a5; }
.fiche-camps li[data-camp="occulte"] { color: #c084fc; }

.fiche h2 {
  font-family: 'Special Elite', serif; font-weight: 400;
  font-size: clamp(19px, 3.2vw, 25px);
  margin: 36px 0 14px;
  color: var(--slate-100);
}

.variante {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.6);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.variante h3 {
  margin: 0 0 10px;
  font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.variante[data-camp="village"] { border-color: rgba(56, 189, 248, 0.4); }
.variante[data-camp="village"] h3 { color: var(--camp-village); }
.variante[data-camp="loups"] { border-color: rgba(239, 68, 68, 0.4); }
.variante[data-camp="loups"] h3 { color: #fca5a5; }
.variante[data-camp="occulte"] { border-color: rgba(168, 85, 247, 0.4); }
.variante[data-camp="occulte"] h3 { color: #c084fc; }

.variante p, .fiche > p { margin: 0 0 10px; color: var(--slate-200); max-width: var(--mesure); }
.variante ul, .fiche > ul { margin: 0 0 10px; padding-left: 20px; color: var(--slate-200); }
.variante li, .fiche > ul li { margin-bottom: 6px; max-width: var(--mesure); }

/* Conditions de victoire, reprises du glossaire du jeu : c'est la seule chose qu'un joueur
   vient verifier deux fois. On la separe du reste plutot que de la noyer dans la description. */
.victoire {
  margin-top: clamp(24px, 5vw, 36px);
  padding: 18px 20px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 14px;
  background: rgba(251, 191, 36, 0.06);
}
.victoire p:first-child strong { color: var(--accent); }
.victoire p, .victoire li { color: var(--slate-200); }

/* Progression d'un camp : l'Occultiste n'est pas un rôle distribué au départ, c'est ce que
   devient un membre de la Secte. Le bloc le montre comme une suite, pas comme un voisin. */
.amelioration {
  display: flex; gap: clamp(16px, 4vw, 30px); align-items: flex-start;
  margin-top: clamp(30px, 6vw, 48px);
  padding-top: clamp(24px, 5vw, 36px);
  border-top: 1px solid rgba(168, 85, 247, 0.32);
}
.amelioration > img {
  width: clamp(110px, 26vw, 160px); height: auto; flex-shrink: 0;
  aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.65);
}
.amelioration > div { min-width: 0; flex: 1 1 auto; }
.amelioration-rang {
  margin: 0 0 4px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #c084fc;
}
.amelioration h2 { margin: 0 0 10px; }
.amelioration-intro { color: var(--slate-200); }

@media (max-width: 600px) {
  .amelioration { flex-direction: column; gap: 14px; }
  .amelioration > img { margin-inline: auto; }
}

/* Les mises en garde du jeu (après le séparateur ---) : même rang typographique, ton plus sourd. */
.caveats {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed rgba(148, 163, 184, 0.28);
  font-size: 13.5px;
}
.caveats p, .caveats li { color: var(--slate-400); }

/* ── Pied et renvois ───────────────────────────────────────────────────────── */
.apercu { max-width: 1040px; margin: 0 auto; padding: 20px 16px 64px; }
.apercu h2 {
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--slate-400); margin: 0 0 16px;
}
.apercu .grille { padding: 0; }
.apercu-liens { display: flex; gap: 12px; flex-wrap: wrap; }
.apercu-liens a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 999px;
  text-decoration: none; color: var(--slate-100); font-size: 14px;
}
.apercu-liens a:hover { border-color: var(--accent); }

.pied {
  text-align: center;
  padding: 40px 16px 56px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.6);
}
.pied-langue {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  margin-top: 22px;
  border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 999px;
  color: var(--slate-200); text-decoration: none; font-size: 14px;
}
.pied-langue:hover { border-color: var(--accent); color: var(--slate-100); }
.pied p { margin: 20px 0 0; font-size: 13px; color: var(--slate-400); }
.pied a { color: var(--slate-400); }
.pied .btn-play { color: #111827; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carte, .topbar, .burger-trait, .topbar nav { transition: none; }
}