/* =============================================================================
   COSCA'29 — feuille de style de la couche publique

   LES CHEMINS DE POLICES SONT RELATIFS, ET C'EST INDISPENSABLE

   Un chemin absolu (`/assets/fonts/…`) suppose que le site est servi à la
   RACINE du domaine. Sous MAMP, où il vit dans
   `/cosca29/cosca29-web/public/`, les quatre polices partaient en 404 : la page
   s'affichait avec ses couleurs et sa mise en page, mais en Times New Roman —
   un défaut d'autant plus déroutant que tout le reste fonctionnait.

   Un chemin relatif est résolu par rapport à CETTE feuille. Elle vit dans
   `assets/`, les polices dans `assets/fonts/` : `fonts/…` est donc juste
   partout, sans rien savoir du point de montage.

   LES TOKENS SONT CEUX DU JEU, PAS DES ÉQUIVALENTS

   Chaque valeur ci-dessous est reprise à l'identique de DESIGN-SYSTEM.md §2 et
   de `cosca29-app/src/theme/tokens.ts`. Le site et l'application doivent se
   ressembler parce qu'ils partagent la MÊME charte, pas parce qu'on a approché
   les couleurs à l'œil. Une teinte redéfinie ici finirait par diverger au
   premier ajustement du jeu.

   Interface sombre en permanence : il n'existe pas de thème clair, ni ici ni
   dans l'application.
   ========================================================================== */

@font-face {
  font-family: 'Limelight';
  src: url('fonts/Limelight-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  /* --- Couleurs — DESIGN-SYSTEM §2.1 ------------------------------------
     Le fond est un bleu-nuit, pas un gris. Le laiton est un jaune franc :
     sur un brun-noir il se posait sur une teinte voisine et restait sourd ;
     sur un bleu-nuit il tombe à l'opposé du cercle chromatique et porte tout
     seul. C'est ce qui permet de le garder RARE. */
  --ink:        #080D1C;
  --ink-soft:   #101B33;
  --ink-line:   #223257;
  --ink-raised: #16233F;

  --brass:      #C9A227;
  --brass-dim:  #8A6F1B;
  --brass-glow: rgba(201, 162, 39, .18);

  /* Danger et bénéfice sont d'abord des couleurs de TEXTE : les valeurs
     sourdes d'origine tombaient à 2:1 sur le fond, illisibles au soleil. */
  --blood:      #E05B4E;
  --blood-soft: #3A1512;
  --bottle:     #59A173;
  --bottle-soft:#1E3A2A;

  --paper:      #E8E1D4;
  --ash:        #8D97AB;
  --ash-dim:    #5C667E;

  /* La prison : mêmes fonds, mais aucun or et des gris neutres. */
  --steel:      #7C858B;
  --cold-paper: #C4C9CC;

  /* --- Espacement et rayons — DESIGN-SYSTEM §2.3 ------------------------ */
  --sp-xs: 4px;  --sp-sm: 8px;  --sp-md: 12px; --sp-lg: 16px;
  --sp-xl: 24px; --sp-2xl: 32px; --sp-3xl: 48px;
  --r-sm: 4px;   --r-md: 8px;   --r-lg: 12px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  /* Le grain, en CSS pur : la vitrine ne charge aucune image pour ça. Comme
     dans le jeu, la texture ÉCLAIRCIT — sur un fond aussi sombre, une texture
     sombre est rigoureusement invisible. */
  background-image:
    repeating-linear-gradient(0deg, rgba(232, 225, 212, .012) 0 1px, transparent 1px 3px);
}

/* Chiffres tabulaires sur TOUT montant, prix, quantité ou compteur
   (règle d'or n° 13). Sans cela, l'interface tremble à chaque actualisation. */
.num, .money, table td, table th { font-variant-numeric: tabular-nums; }

a { color: var(--brass); text-decoration: none; }
a:hover { color: var(--paper); text-decoration: underline; }

.wrap { max-width: 940px; margin: 0 auto; padding: 0 var(--sp-xl); }
.wrap-large { max-width: 1120px; }

/* --- En-tête ------------------------------------------------------------- */
.top {
  border-bottom: 1px solid var(--ink-line);
  padding: var(--sp-lg) 0;
  position: sticky;
  top: 0;
  background: var(--ink);
  z-index: 5;
}
.top .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-lg); flex-wrap: wrap; }

.brand {
  font-family: 'Limelight', Georgia, serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--paper);
  text-transform: uppercase;
}
.brand:hover { text-decoration: none; color: var(--brass); }

.nav { display: flex; gap: var(--sp-xl); flex-wrap: wrap; }
.nav a {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ash);
}
.nav a:hover, .nav a[aria-current] { color: var(--brass); text-decoration: none; }

/* --- Titres — DESIGN-SYSTEM §2.2 ----------------------------------------- */
h1 {
  font-family: 'Limelight', Georgia, serif;
  font-size: clamp(34px, 7vw, 62px);
  line-height: 1.08;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: var(--sp-3xl) 0 var(--sp-lg);
  font-weight: 400;
}
h2 {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 28px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: var(--sp-2xl) 0 var(--sp-md);
  font-weight: 400;
  color: var(--paper);
}
h3 {
  font-size: 17px;
  font-weight: 600;
  margin: var(--sp-xl) 0 var(--sp-sm);
}

/* Le mot-clé coloré : la hiérarchie se fait par la couleur et le poids, jamais
   par un badge ni une pastille. */
.mark { color: var(--brass); }

.lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ash);
  max-width: 60ch;
  margin: 0 0 var(--sp-2xl);
}

p { max-width: 68ch; }

.meta {
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ash-dim);
  font-weight: 600;
}

.chapo { color: var(--ash); max-width: 68ch; }

/* --- Boutons : plats, nets. Le survol assombrit, il n'illumine pas. ------- */
.btn {
  display: inline-block;
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 17px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 12px 26px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--brass);
  /* Le laiton et le rouge sont des fonds CLAIRS : ils portent une encre
     sombre, comme un carton imprimé. */
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms linear;
}
.btn:hover { background: var(--brass-dim); color: var(--ink); text-decoration: none; }

.btn-ghost { background: transparent; color: var(--paper); border: 1px solid var(--ink-line); }
.btn-ghost:hover { background: var(--ink-soft); color: var(--paper); }

.btn-danger { background: var(--blood); color: var(--ink); }
.btn-danger:hover { background: #C24A3E; color: var(--ink); }

/* --- Blocs ---------------------------------------------------------------- */
.panel {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-md);
  padding: var(--sp-xl);
  margin: var(--sp-lg) 0;
}

.cols { display: grid; gap: var(--sp-xl); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: var(--sp-2xl) 0; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.rule { border: 0; border-top: 1px solid var(--ink-line); margin: var(--sp-3xl) 0; }

/* --- Tableaux de règles --------------------------------------------------
   Le jeu est fait de chiffres : ils méritent d'être lisibles, pas noyés. */
.tbl { width: 100%; border-collapse: collapse; margin: var(--sp-lg) 0; font-size: 15px; }
.tbl th {
  text-align: left;
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 400;
  border-bottom: 1px solid var(--ink-line);
  padding: var(--sp-sm) var(--sp-md) var(--sp-sm) 0;
}
.tbl td {
  padding: var(--sp-sm) var(--sp-md) var(--sp-sm) 0;
  border-bottom: 1px solid rgba(34, 50, 87, .5);
  vertical-align: top;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; }
.tbl-scroll { overflow-x: auto; }

/* --- Illustrations -------------------------------------------------------- */
.panorama {
  width: 100%;
  height: 96px;
  display: block;
  opacity: .5;
  margin: var(--sp-2xl) 0 0;
}

.fioles { display: flex; gap: var(--sp-lg); flex-wrap: wrap; align-items: flex-end; margin: var(--sp-xl) 0; }
.fiole { text-align: center; width: 74px; }
.fiole img { height: 78px; width: auto; display: block; margin: 0 auto var(--sp-xs); }
.fiole span { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--ash-dim); }

.villes { display: grid; gap: var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: var(--sp-xl) 0; }
.ville img { width: 100%; height: auto; display: block; opacity: .85; }
.ville strong { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1.2px; text-transform: uppercase; margin-top: var(--sp-xs); }
.ville span { font-size: 12px; color: var(--ash-dim); letter-spacing: .6px; text-transform: uppercase; }

/* --- Formulaires ---------------------------------------------------------- */
label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ash); }

input[type=text], input[type=email], input[type=password] {
  width: 100%;
  padding: 11px 13px;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-sm);
  color: var(--paper);
  font: inherit;
}
input:focus { outline: 2px solid var(--brass-dim); outline-offset: 1px; border-color: var(--brass-dim); }

.field { margin-bottom: var(--sp-lg); max-width: 420px; }

.notice { border-left: 3px solid var(--brass); padding: var(--sp-md) var(--sp-lg); background: var(--ink-soft); margin: var(--sp-lg) 0; }
.notice.err { border-left-color: var(--blood); }
.notice.ok  { border-left-color: var(--bottle); }

/* --- Documents (CGU, confidentialité) ------------------------------------ */
.doc { font-family: 'Courier Prime', 'SF Mono', Menlo, monospace; font-size: 14.5px; line-height: 1.75; }
.doc h2 { font-family: 'Bebas Neue', sans-serif; }

dl.kv dt { font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--ash-dim); font-weight: 600; margin-top: var(--sp-lg); }
dl.kv dd { margin: 2px 0 0; font-size: 17px; }

/* --- FAQ -----------------------------------------------------------------
   `<details>` natif : aucun JavaScript. Une FAQ qui ne s'ouvre pas sans JS
   est une FAQ que les moteurs lisent mal et que personne ne peut imprimer. */
/* --- Recherche dans la FAQ ------------------------------------------------
   Le champ est posé par `assets/cosca.js`, donc il n'existe que là
   où il fonctionne. Pas de loupe : une icône décorative dans un champ dont le
   libellé dit déjà « Chercher une réponse » ne fait qu'ajouter du bruit et
   voler de la place à la saisie sur un téléphone. */
.faq-recherche { margin: var(--sp-2xl) 0 0; }

.faq-recherche-label {
  display: block;
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ash-dim);
  margin-bottom: var(--sp-sm);
}

.faq-recherche-champ { display: flex; gap: var(--sp-sm); align-items: stretch; }

.faq-recherche-champ input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-sm);
  color: var(--paper);
  /* SEIZE PIXELS AU MINIMUM : en deçà, iOS zoome sur le champ à la mise au
     point et ne dézoome jamais — la page reste de travers jusqu'au
     rechargement. */
  font-size: 16px;
  font-family: inherit;
  padding: 12px 14px;
}
.faq-recherche-champ input::placeholder { color: var(--ash-dim); }
/* La croix native de `type="search"` doublait le bouton « Effacer », à deux
   centimètres de lui. Elle est minuscule, sans libellé, et Safari iOS ne
   l'affiche pas du tout : garder les deux, c'était du bruit sur ordinateur
   pour un moyen d'effacer qui n'existe pas sur téléphone. */
.faq-recherche-champ input::-webkit-search-cancel-button { display: none; }
.faq-recherche-champ input:focus {
  outline: none;
  border-color: var(--brass-dim);
  box-shadow: 0 0 0 3px var(--brass-glow);
}

.faq-recherche-vider {
  flex: none;
  background: none;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-sm);
  color: var(--ash);
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 16px;
  cursor: pointer;
}
.faq-recherche-vider:hover { color: var(--brass); border-color: var(--brass-dim); }

.faq-recherche-compte {
  margin: var(--sp-sm) 0 0;
  font-size: 14px;
  color: var(--ash-dim);
  min-height: 20px;
}

/* Pendant une recherche, le sommaire perd sa marge basse : les sections qui
   restent se rapprochent du champ, au lieu de laisser un trou là où les autres
   ont disparu. */
.faq-recherche-active + .faq-nav { margin-bottom: var(--sp-lg); }

.faq-nav { display: flex; gap: var(--sp-sm); flex-wrap: wrap; margin: var(--sp-xl) 0 var(--sp-2xl); }
.faq-nav a {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ash);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-sm);
  padding: 6px 12px;
}
.faq-nav a:hover { color: var(--brass); border-color: var(--brass-dim); text-decoration: none; }

.qa {
  border-bottom: 1px solid var(--ink-line);
  padding: var(--sp-md) 0;
}
.qa > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  color: var(--paper);
  list-style: none;
  display: flex;
  gap: var(--sp-md);
  align-items: baseline;
}
.qa > summary::-webkit-details-marker { display: none; }
/* Le chevron est un caractère, pas une image : il tourne à l'ouverture et ne
   coûte aucune requête. */
.qa > summary::before {
  content: '+';
  font-family: 'Bebas Neue', sans-serif;
  color: var(--brass);
  font-size: 20px;
  line-height: 1;
  flex: none;
  width: 14px;
}
.qa[open] > summary::before { content: '–'; }
.qa > summary:hover { color: var(--brass); }
.qa > div { padding: var(--sp-sm) 0 var(--sp-sm) 26px; color: var(--ash); }
.qa > div p { margin: var(--sp-sm) 0; }
.qa > div p:first-child { margin-top: 0; }
.qa strong { color: var(--paper); }

.faq-section { margin: var(--sp-3xl) 0 0; scroll-margin-top: 80px; }

/* --- Sommaire d'article --------------------------------------------------- */
.toc { border-left: 2px solid var(--ink-line); padding-left: var(--sp-lg); margin: var(--sp-xl) 0 var(--sp-3xl); }
.toc ol { margin: 0; padding-left: var(--sp-lg); color: var(--ash); }
.toc li { margin: var(--sp-xs) 0; }

.article h2 { scroll-margin-top: 80px; border-top: 1px solid var(--ink-line); padding-top: var(--sp-2xl); }
.article h2:first-of-type { border-top: 0; padding-top: 0; }
.article blockquote {
  margin: var(--sp-xl) 0;
  padding: var(--sp-md) var(--sp-lg);
  border-left: 3px solid var(--brass);
  background: var(--ink-soft);
  color: var(--paper);
  font-size: 17px;
}
.article blockquote p { margin: 0; }

/* --- Pied de page --------------------------------------------------------- */
.bottom { border-top: 1px solid var(--ink-line); margin-top: var(--sp-3xl); padding: var(--sp-xl) 0 var(--sp-3xl); color: var(--ash-dim); font-size: 14px; }
.bottom .wrap { display: flex; justify-content: space-between; gap: var(--sp-lg); flex-wrap: wrap; }
.bottom a { color: var(--ash); }

/* --- Accessibilité -------------------------------------------------------- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--sp-lg); top: var(--sp-lg); background: var(--brass); color: var(--ink); padding: var(--sp-sm) var(--sp-md); z-index: 10; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* =============================================================================
   LANDING
   ========================================================================== */

/* --- Bandeau d'ouverture -------------------------------------------------- */
.hero { padding: var(--sp-3xl) 0 var(--sp-2xl); }
.hero h1 { margin-top: 0; }
.hero .actions { display: flex; gap: var(--sp-md); flex-wrap: wrap; margin-top: var(--sp-xl); }

/* --- Section de landing --------------------------------------------------- */
.bloc {
  display: grid;
  gap: var(--sp-3xl);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
  padding: var(--sp-3xl) 0;
  border-top: 1px solid var(--ink-line);
}
.bloc-texte h2 { margin-top: 0; }
/* Une section sur deux inverse l'ordre : le regard ne descend pas en colonne. */
.bloc.inverse .bloc-visuel { order: -1; }
@media (max-width: 700px) {
  .bloc.inverse .bloc-visuel { order: 0; }
}

/* --- Emplacement de capture d'écran --------------------------------------
   Réservé, pas décoré. Le cadre respecte le ratio d'un iPhone moderne
   (9 / 19,5) pour qu'une capture réelle s'y substitue sans décaler la mise en
   page — un emplacement qui change de taille au moment du remplissage oblige à
   reprendre toute la section. */
.shot {
  aspect-ratio: 9 / 19.5;
  max-width: 260px;
  margin: 0 auto;
  border: 1px dashed var(--ink-line);
  border-radius: var(--r-lg);
  background: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-lg);
  text-align: center;
  color: var(--ash-dim);
}
.shot-large { max-width: 300px; }
.shot .shot-titre {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ash);
}
.shot .shot-note { font-size: 12px; line-height: 1.5; }
.shot img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
/* Rempli : le cadre en pointillés disparaît, la capture prend toute la place. */
.shot.rempli { border-style: solid; border-color: var(--ink-line); padding: 0; background: transparent; }

/* Une rangée de deux ou trois captures côte à côte. */
.shots { display: grid; gap: var(--sp-xl); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: var(--sp-2xl) 0; }

/* --- Chiffres-clés -------------------------------------------------------- */
.chiffres { display: grid; gap: var(--sp-xl); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: var(--sp-2xl) 0; }
.chiffre strong {
  display: block;
  font-family: 'Limelight', Georgia, serif;
  font-size: 40px;
  line-height: 1.1;
  color: var(--brass);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.chiffre span { font-size: 13px; color: var(--ash); }

/* --- Ce que le jeu ne fera jamais ---------------------------------------- */
.jamais { list-style: none; padding: 0; margin: var(--sp-lg) 0; max-width: 68ch; }
.jamais li { padding: var(--sp-md) 0; border-bottom: 1px solid var(--ink-line); }
.jamais li:last-child { border-bottom: 0; }
.jamais strong { color: var(--paper); }

/* --- Appel final ---------------------------------------------------------- */
.final { text-align: center; padding: var(--sp-3xl) 0; border-top: 1px solid var(--ink-line); }
.final h2 { font-size: 34px; }
.final .actions { display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-xl); }

/* --- Contact -------------------------------------------------------------- */
.contact-liste { display: grid; gap: var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: var(--sp-xl) 0; }
.contact-carte { background: var(--ink-soft); border: 1px solid var(--ink-line); border-radius: var(--r-md); padding: var(--sp-lg); }
.contact-carte h3 { margin-top: 0; }
.contact-carte p { font-size: 14px; color: var(--ash); }
.contact-carte a { word-break: break-word; }

/* --- Champs légaux à renseigner ------------------------------------------
   Rendus VISIBLES, jamais discrets : une mention légale incomplète qui passe
   inaperçue part en production, et engage l'éditeur. */
.a-completer {
  color: var(--blood);
  font-style: normal;
  border-bottom: 1px dashed var(--blood);
}