/* ===========================================================================
   TheXmafia — la coquille du site

   Les **jetons** (palette, typographie, échelle) et les quelques composants que
   toutes les pages publiques partagent : l'enveloppe, l'étiquette de section,
   les titres, les boutons, l'en-tête et le pied.

   ## Pourquoi un fichier, et non une copie par page

   Il n'y avait qu'une page publique, et tout vivait dans son `<style>`. La page
   de téléchargement en fait une seconde, et recopier quatre-vingt-dix lignes de
   palette dans un second fichier, c'est fabriquer deux règles qui disent la
   même chose — donc deux règles qui ne la diront plus, le jour où l'on ne
   corrigera que l'une. C'est exactement le défaut qu'on vient de retirer du
   choix de l'adresse du serveur, et il ne vaut pas mieux en CSS.

   Ce qui appartient à **une** page reste dans cette page : l'affiche de
   l'accueil, ses cartes, son récit, son tarif. Ce fichier ne porte que ce qui
   doit être identique partout — et si l'on hésite pour une règle, c'est qu'elle
   n'a pas sa place ici.

   ## Ce qu'il suppose

   Les fontes, chargées par `polices/polices.css`, et rien d'autre. Il ne
   dépend d'aucun script.
   =========================================================================== */

:root {
  --encre: #08090d;
  --encre-2: #0e1017;
  --surface: #151822;
  --surface-haute: #1c2130;
  --trait: rgba(232, 176, 75, .16);
  --trait-froid: rgba(244, 241, 234, .09);
  --or: #e8b04b;
  --or-clair: #f7dfa6;
  --sang: #c8322f;
  --texte: #f4f1ea;
  --doux: rgba(244, 241, 234, .66);
  --tres-doux: rgba(244, 241, 234, .40);

  --affiche: Archivo, ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --prose: Newsreader, Georgia, "Times New Roman", serif;

  /* Une échelle, et l'on s'y tient. Les tailles intermédiaires inventées au
     coup par coup sont ce qui fait qu'une page « ne tombe pas juste » sans
     qu'on sache dire pourquoi. */
  --t-affiche: clamp(3.4rem, 11vw, 8.5rem);
  --t-titre: clamp(2rem, 4.4vw, 3.25rem);
  --t-sous: clamp(1.15rem, 1.9vw, 1.45rem);
  --marge: clamp(20px, 5vw, 40px);
  --bande: clamp(72px, 11vw, 132px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--encre); color: var(--texte); font-family: var(--affiche);
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--or); color: #14100a; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 3px; }

.enveloppe { width: min(1180px, 100% - var(--marge) * 2); margin-inline: auto; }

/* ---------- L'étiquette de section ----------
   Un mot en capitales, précédé d'un trait. Le trait n'est pas décoratif : il
   donne à l'œil un point d'entrée horizontal à hauteur constante d'une section
   à l'autre, et c'est lui qui fait qu'on retrouve son chemin en défilant. */
.oeil {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--or); margin-bottom: 18px;
}
.oeil::before { content: ""; width: 34px; height: 1px; background: var(--or); opacity: .7; }

h1, h2, h3 { font-weight: 700; line-height: 1.05; letter-spacing: -.022em; text-wrap: balance; }
h2 { font-size: var(--t-titre); }
h3 { font-size: 1.16rem; letter-spacing: -.012em; line-height: 1.25; }
.chapo { font-size: var(--t-sous); color: var(--doux); max-width: 62ch; line-height: 1.55; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 15px; letter-spacing: .005em;
  background: var(--or); color: #14100a; border: 1px solid var(--or);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 30px -14px rgba(232, 176, 75, .8);
}
.bouton:hover { background: var(--or-clair); border-color: var(--or-clair); transform: translateY(-1px); }
.bouton.creux { background: transparent; color: var(--texte); border-color: rgba(244,241,234,.28); box-shadow: none; }
.bouton.creux:hover { border-color: var(--or); color: var(--or-clair); background: rgba(232,176,75,.07); }
@media (prefers-reduced-motion: reduce) { .bouton:hover { transform: none; } }

/* ---------- L'en-tête ----------
   Fixe, et elle s'opacifie au défilement plutôt que d'être opaque d'emblée :
   sur l'affiche, une barre pleine couperait l'image en deux au moment précis où
   elle doit faire son effet. */
header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--marge);
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom: 1px solid transparent;
}
header.pose {
  background: rgba(8, 9, 13, .82); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--trait-froid);
}
.marque {
  font-weight: 800; font-size: 15px; letter-spacing: .16em; text-decoration: none;
}
.marque b { color: var(--or); font-weight: 800; }
header nav { display: flex; align-items: center; gap: 26px; font-size: 14px; }
header nav a { text-decoration: none; color: var(--doux); transition: color .15s; }
header nav a:hover { color: var(--texte); }
header nav .bouton { padding: 9px 18px; font-size: 13.5px; }
@media (max-width: 720px) { .cacher-mobile { display: none; } header nav { gap: 14px; } }

/* ---------- Le pied ---------- */
footer { border-top: 1px solid var(--trait-froid); padding: 40px 0; background: var(--encre); }
.pied { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between;
  align-items: center; font-size: 13px; color: var(--tres-doux); }
.pied a { color: var(--doux); text-decoration: none; }
.pied a:hover { color: var(--or); }

/* ---------- L'apparition au défilement ----------
   Elle n'existe que si le visiteur n'a pas demandé moins d'animation — et,
   surtout, l'opacité nulle ne vit que dans cette requête média. Un contenu
   rendu invisible par une règle sans garde-fou est un contenu qui disparaît
   pour de bon le jour où le script ne s'exécute pas. */
@media (prefers-reduced-motion: no-preference) {
  .monte { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s ease; }
  .monte.vu { opacity: 1; transform: none; }
}