/* src/styles/polices.css */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/polices/bricolage-grotesque.woff2') format('woff2-variations');
  font-weight: 600 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/polices/atkinson-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/polices/atkinson-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/polices/dm-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/polices/dm-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

/* src/styles/jetons.css */
:root {
  /* Couleurs */
  --encre: #12303C;
  --encre-clair: #1D4657;
  --papier: #E9EDEC;
  --carte: #F7F9F8;
  --laiton: #D89B1C;
  --laiton-texte: #805C0D;
  --ouvert: #276B46;
  --ferme: #A63528;
  --secondaire: #55676D;
  --filet: #C6D0CE;

  /* Espacement, base 4 */
  --pas-1: 4px;  --pas-2: 8px;  --pas-3: 12px; --pas-4: 16px;
  --pas-5: 24px; --pas-6: 32px; --pas-7: 48px; --pas-8: 64px; --pas-9: 96px;

  /* Formes */
  --rayon-s: 6px;
  --rayon-m: 12px;
  --rayon-l: 999px;

  /* Mouvement */
  --duree: 180ms;
  --courbe: cubic-bezier(0.2, 0, 0, 1);

  /* Typographie fluide */
  --t-titre: clamp(2.25rem, 1.55rem + 3.1vw, 4rem);
  --t-section: clamp(1.5rem, 1.25rem + 1.1vw, 2.5rem);
  --t-sous-titre: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --t-texte: 1.125rem;   /* 18 px, jamais moins */
  --t-petit: 1rem;       /* 16 px, plancher absolu */
  --t-donnee: 1rem;      /* 16 px — DM Mono. Le plancher s'applique aussi aux
                            étiquettes techniques : ce sont des capitales lues
                            dehors sur un téléphone, c'est le pire des cas. */
}

/* src/styles/base.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@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;
  }
}

body {
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: var(--t-texte);
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
  text-wrap: pretty;
}

h1, h2, h3 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--t-titre); }
h2 { font-size: var(--t-section); font-weight: 600; }
h3 { font-size: var(--t-sous-titre); font-weight: 600; }

a { color: inherit; }

/* Accessibilité */
:focus-visible {
  outline: 3px solid var(--laiton-texte);
  outline-offset: 2px;
  border-radius: var(--rayon-s);
}

.saut-navigation {
  position: absolute;
  left: -9999px;
  top: var(--pas-2);
  background: var(--encre);
  color: var(--papier);
  padding: var(--pas-3) var(--pas-4);
  border-radius: var(--rayon-s);
  z-index: 200;
}
.saut-navigation:focus { left: var(--pas-2); }

.hors-ecran {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Toute cible tactile fait au moins 48 px.

   Le garde `:not([hidden])` n'est pas une précaution : c'est la racine du
   couple qui a déjà fait deux régressions. Une déclaration d'auteur l'emporte
   toujours sur la feuille du navigateur, quelle que soit la spécificité :
   écrit `button { display: inline-flex }`, ce sélecteur écrasait le
   `[hidden] { display: none }` natif et rendait visible TOUT bouton portant
   `hidden` — donc, sans JavaScript, le bouton de repli du menu et le
   déclencheur du plan, deux commandes mortes (voir src/gabarits/base.mjs).
   C'est aussi ce qui obligeait composants.css à écrire
   `.entete__bascule:not([hidden])` pour se rattraper, et c'est cette
   spécificité gonflée (0,2,0) qui a fait perdre le repli ordinateur
   `.entete__bascule { display: none }` (0,1,0). Avec ce garde, `hidden`
   redevient opérant de lui-même et les deux règles restent comparables. */
a[class*="bouton"]:not([hidden]),
button:not([hidden]),
summary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

.enveloppe {
  width: min(100% - var(--pas-5) * 2, 1180px);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .enveloppe { width: min(100% - var(--pas-8) * 2, 1180px); }
}

/* src/styles/composants.css */

/* ============================================================
   Bouton
   ============================================================ */
.bouton {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: var(--t-texte);
  font-weight: 700;
  padding: var(--pas-3) var(--pas-5);
  border-radius: var(--rayon-s);
  border: 2px solid var(--encre);
  text-decoration: none;
  justify-content: center;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.bouton--plein { background: var(--encre); color: var(--papier); }
@media (hover: hover) {
  .bouton--plein:hover { background: var(--encre-clair); }
  .bouton:not(.bouton--plein):hover { background: var(--encre); color: var(--papier); }
}

/* La réglette : la signature.
   La piste et sa graduation 8h → 20h sont dessinées par le HTML statique :
   elles ne dépendent pas de l’heure. La bande dorée, elle, couvre la plage
   du jour — donc elle en dépend : elle sort du générateur sans largeur, et
   c’est src/scripts/reglette.js qui la déploie au chargement (transition sur
   left/width, neutralisée par prefers-reduced-motion, voir base.css). Le
   curseur et l’étiquette d’heure ne sont pas dans le HTML du tout : le
   script les crée. */
.reglette__piste { position: relative; height: 22px; border-bottom: 2px solid var(--encre); }
.reglette__bande {
  position: absolute; bottom: 0; left: 0; width: 0; height: 8px;
  background: var(--laiton); border-radius: 2px;
}
.reglette__curseur { position: absolute; bottom: -4px; width: 2px; height: 24px; background: var(--encre); }
.reglette__heure {
  position: absolute; bottom: 26px; transform: translateX(-50%);
  background: var(--encre); color: var(--papier);
  font-family: 'DM Mono', monospace; font-size: var(--t-donnee);
  padding: 2px 6px; border-radius: 3px; white-space: nowrap;
}

/* La fiche mesure : motif graphique et matière citable */
.fiche-mesure { border-left: 3px solid var(--laiton); padding-left: var(--pas-3); }
.fiche-mesure__etiquette {
  font-family: 'DM Mono', monospace; font-size: var(--t-petit);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondaire);
}
.fiche-mesure__valeur { font-family: 'DM Mono', monospace; font-size: var(--t-sous-titre); font-weight: 500; }

/* La barre du pouce : téléphone uniquement */
.barre-pouce {
  position: fixed; inset: auto 0 0 0; z-index: 100;
  display: flex; gap: var(--pas-2);
  padding: var(--pas-2) var(--pas-3);
  padding-bottom: calc(var(--pas-2) + env(safe-area-inset-bottom));
  background: var(--papier);
  border-top: 1px solid var(--filet);
  box-shadow: 0 -6px 18px rgb(18 48 60 / 0.09);
}
.barre-pouce .bouton { flex: 1; }
@media (min-width: 768px) { .barre-pouce { display: none; } }
body { padding-bottom: 84px; }
@media (min-width: 768px) { body { padding-bottom: 0; } }

/* ============================================================
   Réglette — état, pastille, libellé, plages, échelle
   Le libellé est l’élément le plus visible de la page : il suit
   la même échelle que h1. Le HTML statique y met un horaire
   (« 9h30 – 18h30 »), le script l’état du moment
   (« Ouvert jusqu’à 18h30 ») — même corps, même emplacement,
   hauteur réservée pour que la bascule ne déplace rien.
   ============================================================ */
.reglette__etat {
  display: flex;
  align-items: center;
  gap: var(--pas-3);
  margin-bottom: var(--pas-2);
}

.reglette__point {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: var(--secondaire);
}
.reglette__point--ouvert { background: var(--ouvert); }
.reglette__point--ferme { background: var(--ferme); }

/* Le vert et le rouge ne vivent que là : la pastille et la mention qui la
   suit. Deux signes discrets suffisent à dire l'état ; les étendre au plus
   gros texte de la page ferait basculer l'identité du couple encre/laiton
   vers le vert.
   Sans état — c’est-à-dire dans le HTML statique, où la mention n’est qu’un
   intertitre (« Horaires d’ouverture ») — la pastille et le texte restent
   gris : rien n’est affirmé, et rien n’est coloré. Les deux règles d’état
   ci-dessous ne s’appliquent qu’une fois le script passé. */
.reglette__etat-texte { color: var(--secondaire); }
.reglette__etat--ouvert .reglette__etat-texte { color: var(--ouvert); }
.reglette__etat--ferme .reglette__etat-texte { color: var(--ferme); }

.reglette__libelle {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: var(--t-titre);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: var(--pas-3);

  /* La place des deux lignes est réservée ici, et le texte calé sur le bas
     de cette réserve.
     Le HTML statique n’écrit qu’un horaire court — « 9h30 – 18h30 », une
     ligne partout. Au chargement, src/scripts/reglette.js le remplace par
     l’état du moment, plus long : « Ouvert jusqu’à 18h30 », et au pire
     « Fermé · ouvre demain à 9h30 » (la boutique ouvrant les sept jours, on
     ne va jamais au-delà de « demain »). À cette échelle de corps, ces
     libellés tiennent sur deux lignes — sauf, pour le plus long d’entre eux,
     dans l’étroite bande de largeurs où la trame 5/7 vient de resserrer la
     colonne alors que le corps fluide, lui, a déjà grandi. Le libellé y
     déborderait d’une ligne vers le bas ; on ne réserve pas une troisième
     ligne pour ce seul cas, qui laisserait un vide d’un corps de titre sous
     l’intertitre dans tous les autres.
     Sans réserve, le bloc grandirait d’une ligne de 4rem au moment où le
     script s’exécute et pousserait l’adresse, les boutons et tout le reste
     de la page vers le bas. Avec elle, la boîte garde la même hauteur : le
     libellé grandit vers le haut, dans un espace déjà pris, sa dernière
     ligne ne bouge pas, et la frise — alignée sur le pied de cette colonne
     en disposition ordinateur — ne bouge pas non plus.
     2 × 1.05 = deux fois la hauteur de ligne déclarée ci-dessus. */
  display: grid;
  align-content: end;
  min-height: calc(2 * 1.05em);
}

/* Le libellé reste à l’encre dans les deux états — ouvert comme fermé. Il est
   le plus gros texte de la page : coloré, c’est lui qui donnerait sa teinte à
   toute la composition. L’état est déjà porté trois fois ailleurs (la
   pastille, sa mention, et la bande dorée de la piste), et le libellé le dit
   en toutes lettres. Les deux classes sont conservées : src/scripts/reglette.js
   les bascule à chaque minute, et elles restent le crochet disponible si un
   état devait un jour se distinguer autrement que par la couleur. */
.reglette__libelle--ouvert,
.reglette__libelle--ferme { color: var(--encre); }

/* Les plages de la semaine, sous le grand libellé : le fait stable, celui qui
   reste vrai à 22 h et que le script ne touche jamais. Sans JavaScript, c’est
   l’appui du libellé — il dit « 9h30 – 18h30 », cette ligne dit de quels jours
   il s’agit et donne l’exception du dimanche ; avec, c’est le complément de
   l’état affiché. Elle reste donc en place dans les deux cas, et c’est sur sa
   ligne de pied que la frise s’aligne en disposition ordinateur. */
.reglette__plages {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-donnee);
  line-height: 1.5;
  color: var(--secondaire);
  margin-bottom: var(--pas-5);
}

/* Repères horaires fixes sous la piste (8h → 20h), à distinguer de
   .reglette__heure qui, elle, suit l’heure courante. */
.reglette__echelle {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin-top: var(--pas-2);
  font-family: 'DM Mono', monospace;
  font-size: var(--t-donnee);
  color: var(--secondaire);
}
.reglette__echelle li { white-space: nowrap; }

/* ============================================================
   Bloc réponse — le paragraphe d’ouverture de chaque page
   ============================================================ */
.bloc-reponse {
  background: var(--carte);
  border-left: 4px solid var(--laiton);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
  padding: var(--pas-5) var(--pas-6);
  font-size: 1.25rem;
  line-height: 1.6;
}

/* ============================================================
   Carte besoin — tuile cliquable (« Pied large », « Hallux valgus »…)
   ============================================================ */
.carte-besoin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pas-4);
  width: 100%;
  min-height: 48px;
  padding: var(--pas-4) var(--pas-5);
  border: 2px solid var(--encre);
  border-radius: var(--rayon-s);
  background: var(--carte);
  color: var(--encre);
  text-decoration: none;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: var(--t-texte);
  font-weight: 700;
  transition:
    background var(--duree) var(--courbe),
    color var(--duree) var(--courbe),
    border-color var(--duree) var(--courbe);
}
.carte-besoin::after {
  content: '→';
  font-family: 'DM Mono', monospace;
  color: var(--laiton-texte);
  transition: transform var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.carte-besoin:focus-visible {
  background: var(--encre);
  color: var(--papier);
}
.carte-besoin:focus-visible::after {
  color: var(--laiton);
  transform: translateX(4px);
}
@media (hover: hover) {
  .carte-besoin:hover {
    background: var(--encre);
    color: var(--papier);
  }
  .carte-besoin:hover::after {
    color: var(--laiton);
    transform: translateX(4px);
  }
}

/* ============================================================
   Grille produits — vignettes carrées
   ============================================================ */
.grille-produits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pas-4);
}
@media (min-width: 768px) {
  .grille-produits { grid-template-columns: repeat(4, 1fr); gap: var(--pas-5); }
}

.produit {
  display: flex;
  flex-direction: column;
  gap: var(--pas-2);
  color: var(--encre);
  text-decoration: none;
}
.produit__cadre {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--rayon-s);
  background: var(--carte);
}
.produit__cadre img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--carte);
  display: block;
}
.produit__marque {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-petit);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondaire);
}
.produit__nom { font-size: var(--t-texte); font-weight: 700; }
.produit__prix {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-donnee);
  font-weight: 500;
  color: var(--encre);
}

/* ============================================================
   Section — seul endroit du système qui fixe le rythme vertical
   entre sections. Ne pas ajouter de marge concurrente ailleurs.

   Attention : ce qu’on lit entre deux sections, c’est la SOMME du
   bas de l’une et du haut de l’autre. Écrit `padding-block: var(--pas-9)`,
   l’intervalle valait 96 + 96 = 192 px sur ordinateur — presque un
   quart de l’écran, soit le double du pas voulu. Là où deux sections
   denses se suivent, ça passait pour une respiration ; entre les
   tuiles « pour quel pied » (64 px de haut) et « Nos modèles », puis
   après « Voir toute la collection », ça se lisait comme un trou.
   La valeur est donc la MOITIÉ de l’intervalle visé : le rythme vaut
   96 px sur téléphone et 128 px à partir de 1024 px, une seule fois,
   partout — y compris sous le haut de page (voir .regle-jour).
   ============================================================ */
.section {
  padding-block: var(--pas-7);
}
@media (min-width: 1024px) {
  .section { padding-block: var(--pas-8); }
}

/* ============================================================
   En-tête — bande encre, mot-symbole à gauche, navigation à droite
   ============================================================ */
.entete {
  background: var(--encre);
  color: var(--papier);
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pas-4);
  min-height: var(--pas-9);
  padding-block: var(--pas-3);
}
.entete__marque {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: var(--t-sous-titre);
  letter-spacing: 0.02em;
  color: var(--papier);
  text-decoration: none;
}

/* Bouton de repli, visible seulement sous 768 px, et seulement une fois
   révélé par src/scripts/menu.js (voir src/gabarits/base.mjs : il porte
   `hidden` en dur tant que ce script n'a pas confirmé qu'il est opérant).
   Le garde `:not([hidden])` évite ici de court-circuiter ce `hidden` natif
   comme pour .entete__nav ci-dessous : sans lui, cette règle imposerait
   `display: inline-flex` même sur l'élément caché. */
.entete__bascule:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pas-2);
  min-width: 48px;
  min-height: 48px;
  padding: var(--pas-2) var(--pas-4);
  background: transparent;
  border: 2px solid var(--papier);
  border-radius: var(--rayon-s);
  color: var(--papier);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: var(--t-petit);
  font-weight: 700;
}
/* Le repli ordinateur doit porter EXACTEMENT le même sélecteur que la règle
   ci-dessus, `:not([hidden])` compris. Une media query n'ajoute aucune
   spécificité : écrite `.entete__bascule` seule (0,1,0), cette règle perdait
   contre `.entete__bascule:not([hidden])` (0,2,0) et le bouton restait
   affiché sur ordinateur dès que menu.js retirait `hidden` — le HTML statique,
   lui, paraissait correct, ce qui rendait le défaut invisible hors navigateur.
   À spécificité égale, c'est l'ordre dans la feuille qui tranche, et cette
   règle vient après. `hidden` posé, aucune des deux ne s'applique : le
   `display: none` natif reprend la main. Même discipline que .entete__nav. */
@media (min-width: 768px) {
  .entete__bascule:not([hidden]) { display: none; }
}

/* La navigation s’appuie sur l’attribut natif `hidden` : c’est
   src/scripts/menu.js qui le pose ou le retire (jamais le HTML). Ici, on ne
   fait que mettre en forme l’état « non replié » — le sélecteur
   `:not([hidden])` laisse l’état replié au comportement natif de `hidden`
   (display: none), qu’aucune des deux règles ci-dessous ne doit jamais
   court-circuiter. Les deux règles portent volontairement la même
   spécificité (0,2,0 : une classe + un attribut dans :not()) pour que ce
   soit l’ordre des règles dans la feuille, et non un écart de spécificité,
   qui tranche au-delà de 768 px. */
.entete__nav:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pas-4);
  padding-block: var(--pas-4);
}
@media (min-width: 768px) {
  .entete__nav:not([hidden]) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--pas-6);
    padding-block: 0;
  }
}

.entete__liste {
  display: flex;
  flex-direction: column;
  gap: var(--pas-3);
  list-style: none;
}
@media (min-width: 768px) {
  .entete__liste { flex-direction: row; gap: var(--pas-5); }
}
.entete__liste a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--papier);
  text-decoration: none;
  font-size: var(--t-texte);
}
@media (hover: hover) {
  .entete__liste a:hover { color: var(--laiton); }
}

/* La pastille téléphone, en laiton, déployée avec la navigation */
.entete__telephone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pas-2);
  min-height: 48px;
  padding: var(--pas-2) var(--pas-4);
  border-radius: var(--rayon-l);
  background: var(--laiton);
  color: var(--encre);
  font-family: 'DM Mono', monospace;
  font-size: var(--t-donnee);
  font-weight: 500;
  text-decoration: none;
}

/* ============================================================
   Titraille de section — étiquette technique, titre, chapô
   L’étiquette est le seul « ornement » toléré : c’est du texte
   utile composé comme une gravure d’instrument.
   ============================================================ */
.section__etiquette {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-petit);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondaire);
  padding-bottom: var(--pas-2);
  border-bottom: 1px solid var(--filet);
  margin-bottom: var(--pas-5);
}
.section__titre { margin-bottom: var(--pas-4); }
.section__chapo {
  max-width: 62ch;
  color: var(--secondaire);
  margin-bottom: var(--pas-6);
}

/* Le lien de suite : une flèche, jamais un faux bouton */
.lien-suite {
  display: inline-flex;
  align-items: center;
  gap: var(--pas-2);
  min-height: 48px;
  margin-top: var(--pas-5);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--laiton);
}
.lien-suite::after {
  content: '→';
  font-family: 'DM Mono', monospace;
  color: var(--laiton-texte);
  transition: transform var(--duree) var(--courbe);
}
@media (hover: hover) {
  .lien-suite:hover::after { transform: translateX(4px); }
}

/* Deux colonnes à partir de la tablette : contenu à gauche, plan à droite */
.deux-colonnes {
  display: grid;
  gap: var(--pas-7);
}
@media (min-width: 1024px) {
  .deux-colonnes { grid-template-columns: 1fr 1fr; gap: var(--pas-8); align-items: start; }
}

/* Une rangée de fiches mesure : le motif de base de la page */
.mesures {
  display: grid;
  gap: var(--pas-5);
  list-style: none;
  margin-top: var(--pas-6);
}
@media (min-width: 480px) {
  .mesures { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .mesures--bande { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   La règle du jour — le premier écran
   Le h1 est volontairement discret : il porte l’intention de
   recherche, pas la hiérarchie visuelle (que tient le libellé
   de la réglette, voir .reglette__libelle).
   ============================================================ */
.regle-jour {
  /* Même demi-intervalle que .section : le bas du haut de page et le haut de
     la première section s’additionnent exactement comme deux sections. */
  padding-block: var(--pas-7);
  border-bottom: 1px solid var(--filet);
}
@media (min-width: 1024px) {
  .regle-jour { padding-block: var(--pas-8); }
}
.regle-jour__corps { max-width: 68ch; }
.regle-jour__titre {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-petit);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondaire);
  margin-bottom: var(--pas-5);
}
.regle-jour__adresse {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-donnee);
  margin-top: var(--pas-7);
}
.regle-jour__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas-3);
  margin-top: var(--pas-4);
}
.regle-jour .bloc-reponse { margin-top: var(--pas-6); }

/* ------------------------------------------------------------------
   Le haut de page sur grand écran : une composition, pas un
   agrandissement.

   En pile (téléphone, tablette), l’ordre est celui de la lecture au
   pouce et .regle-jour__corps reste une colonne de 68ch — soit 793 px
   mesurés, dans une enveloppe de 1180 : près de 390 px de vide à
   droite, et une composition qui n’était que la version téléphone
   centrée. À partir de 1024 px, la même suite de blocs — aucun ajout,
   aucun retrait — se redistribue sur une trame 5/7 qui occupe toute
   l’enveloppe :

     · une ligne de tête, l’étiquette gravée ;
     · l’instrument sur toute la largeur : l’état et le grand libellé
       tiennent la colonne de 5, la frise graduée 8h → 20h prend la
       colonne de 7 (651 px). Elle n’y gagne pas en largeur — elle en
       perd un peu — mais elle cesse d’être posée SOUS le libellé pour
       venir À CÔTÉ de lui, alignée sur sa ligne de pied : c’est cette
       mise en regard, et non un allongement, qui fait lire le bloc
       comme le cadran d’un instrument plutôt que comme une pile ;
     · sous l’instrument, l’adresse et les deux actions restent dans
       la colonne de gauche, sous l’état auquel elles répondent, et le
       paragraphe de réponse prend la colonne de droite, où sa mesure
       de lecture tourne autour de 55 caractères ;
     · la bande des quatre mesures ferme la composition sur toute la
       largeur.

   La réglette reprend la même trame et le même écart de colonne que
   son parent : frise et paragraphe s’alignent donc sur le même bord.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .regle-jour__corps {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--pas-8);
    row-gap: var(--pas-7);
    align-items: start;
    grid-template-areas:
      'titre      titre'
      'instrument instrument'
      'contact    reponse'
      'mesures    mesures';
  }
  .regle-jour__titre { grid-area: titre; margin-bottom: 0; }
  .regle-jour .reglette { grid-area: instrument; }
  .regle-jour__contact { grid-area: contact; }
  .regle-jour .bloc-reponse { grid-area: reponse; margin-top: 0; }
  .regle-jour .mesures--bande { grid-area: mesures; margin-top: 0; }

  .regle-jour .reglette {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--pas-8);
    /* La frise se pose sur la ligne de pied du grand libellé. */
    align-items: end;
  }
  /* La colonne de lecture se termine désormais par les plages de la semaine :
     c’est sur leur ligne de pied que la frise vient s’aligner. */
  .regle-jour .reglette__plages { margin-bottom: 0; }
  .regle-jour__adresse { margin-top: 0; }
}

/* ============================================================
   Horaires — sept lignes, le jour courant en évidence
   (la mise en évidence est reposée au chargement par
   src/scripts/jour.js : un HTML mis en cache peut dater)
   ============================================================ */
.horaires {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.horaires__ligne { border-bottom: 1px solid var(--filet); }
.horaires__jour {
  text-align: left;
  font-weight: 400;
  padding-block: var(--pas-3);
}
.horaires__plage {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-donnee);
  text-align: right;
  padding-block: var(--pas-3);
  white-space: nowrap;
}
/* « aujourd’hui » n’est écrit que sur la ligne du jour. Le HTML pose `hidden`
   sur les six autres (voir src/pages/accueil.mjs, reposé par
   src/scripts/jour.js), mais une déclaration d'auteur l'emportant toujours
   sur la feuille du navigateur, un `display: block` nu écrasait le
   `[hidden] { display: none }` natif et la mention paraissait sous les sept
   jours. Le garde `:not([hidden])` rend `hidden` opérant — donc aussi vis-à-vis
   des lecteurs d'écran : les six autres mentions sortent de l'arbre
   d'accessibilité, seule celle du jour courant est annoncée, sur une ligne
   qui porte en plus aria-current="date". Même garde que .entete__bascule. */
.horaires__marque:not([hidden]) {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: var(--t-petit);
  letter-spacing: 0.08em;
  color: var(--laiton-texte);
}
.horaires__ligne--aujourdhui .horaires__jour { font-weight: 700; }
.horaires__ligne--aujourdhui {
  box-shadow: inset 3px 0 0 0 var(--laiton);
}
.horaires__ligne--aujourdhui .horaires__jour { padding-left: var(--pas-3); }

/* ============================================================
   Plan — schéma dessiné, carte chargée à la demande
   ============================================================ */
.plan { display: flex; flex-direction: column; }
.plan__cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-s);
  overflow: hidden;
  background: var(--carte);
}
.plan__apercu { display: block; width: 100%; height: 100%; }
.plan__fond { fill: var(--carte); }
.plan__rue { stroke: var(--filet); stroke-width: 10; fill: none; }
.plan__rue--fine { stroke-width: 4; }
.plan__graduation { stroke: var(--filet); stroke-width: 2; }
.plan__graduation--longue { stroke: var(--secondaire); }
.plan__visee { stroke: var(--secondaire); stroke-width: 1.5; fill: none; }
.plan__repere { fill: var(--laiton); stroke: var(--encre); stroke-width: 3; }

/* Le déclencheur ne paraît que si src/scripts/plan.js tourne (il porte
   `hidden` en dur, comme .entete__bascule) : sans JavaScript, on ne montre
   pas un bouton mort, le lien de la légende reste le chemin d’accès. */
.plan__declencheur:not([hidden]) {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding: var(--pas-4);
  border: 0;
  background: transparent;
  color: var(--encre);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: var(--t-texte);
  font-weight: 700;
  cursor: pointer;
}
.plan__pastille {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--pas-2) var(--pas-5);
  border-radius: var(--rayon-l);
  background: var(--laiton);
  color: var(--encre);
}
.plan__carte { width: 100%; height: 100%; border: 0; display: block; }
.plan__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pas-3);
  font-family: 'DM Mono', monospace;
  font-size: var(--t-donnee);
  color: var(--secondaire);
}
.plan__legende .lien-suite { margin-top: 0; color: var(--encre); }

/* ============================================================
   Séquence 01 · 02 · 03 — un vrai déroulé, donc numéroté
   ============================================================ */
.sequence {
  display: grid;
  gap: var(--pas-7);
  list-style: none;
}
@media (min-width: 768px) {
  .sequence { grid-template-columns: repeat(3, 1fr); gap: var(--pas-6); }
}
.etape { border-top: 2px solid var(--encre); padding-top: var(--pas-4); }
.etape__numero {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-sous-titre);
  font-weight: 500;
  color: var(--laiton-texte);
}
.etape__titre { margin-block: var(--pas-2) var(--pas-3); }
.etape__texte { margin-bottom: var(--pas-5); }

/* ============================================================
   Tuiles de besoin
   ============================================================ */
.tuiles {
  display: grid;
  gap: var(--pas-4);
  list-style: none;
}
@media (min-width: 768px) {
  .tuiles { grid-template-columns: repeat(3, 1fr); }
}
/* En pile, quelle que soit la largeur : la liste de maillage des pages besoin
   vit dans la colonne de droite de .deux-colonnes, où trois colonnes de
   tuiles réduiraient chaque libellé à deux mots par ligne. Déclaré APRÈS la
   requête média ci-dessus : même spécificité, c’est l’ordre qui tranche. */
.tuiles--pile { grid-template-columns: minmax(0, 1fr); }

/* ============================================================
   Marques — sept cartouches. Dorking n’a pas de logo : son
   cartouche reçoit le nom composé en caractères de titrage
   (.marque__mot), jamais une image manquante.
   ============================================================ */
.marques {
  display: grid;
  gap: var(--pas-6);
  list-style: none;
}
@media (min-width: 480px) { .marques { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .marques { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .marques { grid-template-columns: repeat(4, 1fr); } }
/* Une seule marque concernée (page hallux valgus) : la grille resterait en
   quatre colonnes et le cartouche isolé se lirait comme une grille cassée.
   Une colonne, bornée à la mesure de lecture — le fait que la marque soit
   seule EST l’information, elle doit en avoir l’air. */
.marques--seule { grid-template-columns: minmax(0, 1fr); max-width: 46ch; }

.marque__cartouche {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 60px;
  margin-bottom: var(--pas-4);
}
/* Les logos n’ont ni la même largeur ni le même rapport (de 107 × 107 à
   915 × 273) : le cartouche fixe la hauteur, `contain` fait le reste. Les
   attributs width/height du HTML portent les dimensions réelles du fichier
   (voir src/data/marques.json), jamais une valeur codée en dur. */
/* Désaturés et légèrement atténués au repos : sept logos rendus dans leurs
   couleurs de charte (deux verts, trois rouges vifs) prennent le pas sur une
   page qui ne tolère qu’une couleur vive, le laiton. La couleur pleine revient
   au survol et à la mise au point clavier — l’information n’est donc pas
   perdue, elle est mise à distance. `filter` et `opacity` ne portent aucune
   valeur hexadécimale : la palette reste celle de jetons.css. */
.marque__logo {
  height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}
.marque:focus-within .marque__logo {
  filter: none;
  opacity: 1;
}
@media (hover: hover) {
  .marque:hover .marque__logo {
    filter: none;
    opacity: 1;
  }
}
.marque__mot {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: var(--t-sous-titre);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.marque__nom { margin-bottom: var(--pas-3); }
.marque__note { margin-top: var(--pas-3); color: var(--secondaire); }

/* ============================================================
   Fidélité — cinq crans, même famille que la réglette
   ============================================================ */
.graduation {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--pas-2);
  list-style: none;
  border-top: 2px solid var(--encre);
  padding-top: var(--pas-3);
}
@media (min-width: 768px) {
  .graduation { gap: var(--pas-4); }
}
.graduation__cran {
  display: flex;
  flex-direction: column;
  gap: var(--pas-1);
  padding-top: var(--pas-4);
  border-left: 2px solid var(--filet);
  padding-left: var(--pas-2);
}
.graduation__numero {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-sous-titre);
  font-weight: 500;
  color: var(--secondaire);
}
.graduation__cran--recompense {
  border-left-color: var(--laiton);
  border-left-width: 6px;
}
.graduation__cran--recompense .graduation__numero {
  color: var(--encre);
  font-weight: 700;
}
.graduation__gain {
  display: flex;
  align-items: baseline;
  gap: var(--pas-3);
  margin-top: var(--pas-4);
}
.graduation__gain-valeur {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: var(--t-section);
  line-height: 1;
  color: var(--laiton-texte);
}

/* ============================================================
   Avis — la note d’abord, en chiffres
   ============================================================ */
.note-globale {
  display: flex;
  align-items: baseline;
  gap: var(--pas-3);
  margin-bottom: var(--pas-6);
}
.note-globale__valeur {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: var(--t-section);
  line-height: 1;
}
.note-globale__detail {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-donnee);
  color: var(--secondaire);
}
.temoignages {
  display: grid;
  gap: var(--pas-5);
}
@media (min-width: 768px) { .temoignages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .temoignages { grid-template-columns: repeat(4, 1fr); } }
.temoignage {
  display: flex;
  flex-direction: column;
  gap: var(--pas-3);
  background: var(--carte);
  border-top: 3px solid var(--laiton);
  border-radius: 0 0 var(--rayon-s) var(--rayon-s);
  padding: var(--pas-5);
}
.temoignage__note {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-donnee);
  color: var(--laiton-texte);
}
.temoignage__texte { margin: 0; }
.temoignage__signature {
  margin-top: auto;
  font-family: 'DM Mono', monospace;
  font-size: var(--t-petit);
  color: var(--secondaire);
}

/* ============================================================
   Questions fréquentes
   ============================================================ */
.questions { border-top: 1px solid var(--filet); }
.question { border-bottom: 1px solid var(--filet); }
.question__intitule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pas-4);
  min-height: 48px;
  padding-block: var(--pas-4);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.question__intitule::-webkit-details-marker { display: none; }
.question__intitule::after {
  content: '+';
  font-family: 'DM Mono', monospace;
  font-size: var(--t-sous-titre);
  color: var(--laiton-texte);
  transition: transform var(--duree) var(--courbe);
}
.question[open] .question__intitule::after { transform: rotate(45deg); }
.question__reponse {
  max-width: 70ch;
  padding-bottom: var(--pas-5);
  color: var(--secondaire);
}

/* ============================================================
   Pages besoin — le haut des trois pages « pied difficile »

   Ce bloc ne réemploie pas .regle-jour, malgré la parenté visuelle :
   à partir de 1024 px, .regle-jour__corps devient une grille nommée
   (titre / instrument / contact / réponse / mesures) taillée pour la
   réglette de l’accueil, et ses règles annulent les marges du bloc
   réponse et de la bande de mesures. Sans réglette à placer, ces
   pages n’ont besoin que du rythme vertical et du filet de bas de
   bloc — les deux seules déclarations reprises ici.
   ============================================================ */
.entete-besoin {
  /* Même demi-intervalle que .section et .regle-jour : le bas du haut de
     page et le haut de la première section s’additionnent. */
  padding-block: var(--pas-7);
  border-bottom: 1px solid var(--filet);
}
@media (min-width: 1024px) {
  .entete-besoin { padding-block: var(--pas-8); }
}
/* Le h1 porte ici la hiérarchie visuelle (contrairement à l’accueil, où
   c’est la réglette qui la tient) : il garde sa taille de titre et se borne
   à la mesure d’un titre, pas à celle d’un paragraphe. */
.entete-besoin__titre { max-width: 22ch; margin-block: 0; }
.entete-besoin .bloc-reponse { max-width: 66ch; margin-top: var(--pas-6); }

/* Le fil d’Ariane visible. Il double le BreadcrumbList des données
   structurées : l’un pour les moteurs, l’autre pour qui remonte d’un cran. */
.fil-ariane { margin-bottom: var(--pas-4); }
.fil-ariane__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pas-2);
  list-style: none;
  font-family: 'DM Mono', monospace;
  font-size: var(--t-petit);
  color: var(--secondaire);
}
.fil-ariane__liste li { display: flex; align-items: center; gap: var(--pas-2); }
.fil-ariane__liste li + li::before { content: '/'; color: var(--filet); }
/* 48 px de haut sur le maillon cliquable comme sur le maillon courant :
   la ligne ne doit pas se dandiner selon qu’on est ou non sur la page. */
.fil-ariane a,
.fil-ariane [aria-current='page'] {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--encre);
}
.fil-ariane a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--laiton);
}

/* ============================================================
   Prose — les colonnes de texte rédigé des pages reprises
   (/notre-histoire, /equipe). base.css remet les marges à zéro :
   c'est l'écart de la grille qui espace les paragraphes, une
   seule déclaration plutôt qu'une marge par élément.
   ============================================================ */
.prose {
  display: grid;
  gap: var(--pas-5);
  max-width: 66ch;
}

/* La citation qui ouvrait /notre-histoire et /equipe. Elle réemploie le
   cartouche du témoignage — même filet laiton, même fond carte — et n'ajoute
   qu'une composition de titrage : c'est une parole, pas un paragraphe. */
.citation {
  max-width: 62ch;
  margin-bottom: var(--pas-7);
}
.citation .temoignage__texte {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--t-sous-titre);
  line-height: 1.35;
}

/* ============================================================
   Carte de fidélité — le seul bloc applicatif du site
   ============================================================
   Les noms de classe en anglais de ce bloc (.page-tab, .stamp-card,
   .card-badge, .badge-progress, .badge-reward, .coupon, .stamp,
   .progress-bar-fill, .success-banner et les modificateurs .active,
   .visible, .earned, .show) sont un CONTRAT avec src/scripts/fidelite.js —
   le script du chantier de sécurisation, repris sans y toucher. Les
   renommer casserait la carte : c'est lui qui les pose et les retire.
   Tout ce qu'il n'atteint pas porte, lui, les noms français du reste
   du système.

   src/scripts/fidelite.js écrit par ailleurs des styles en ligne qui
   appellent var(--mid) et var(--cognac), deux jetons de l'ancienne
   direction artistique. Plutôt que de modifier ce script, les deux noms
   sont raccordés aux jetons actuels, sur la seule page qui en a besoin.
   ============================================================ */
.page--fidelite {
  --mid: var(--secondaire);
  --cognac: var(--laiton-texte);
}

.onglets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas-2);
  border-bottom: 2px solid var(--filet);
}
.page-tab {
  min-height: 48px;
  padding: var(--pas-3) var(--pas-5);
  margin-bottom: -2px;
  border: 0;
  border-bottom: 4px solid transparent;
  background: transparent;
  color: var(--secondaire);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: var(--t-texte);
  font-weight: 700;
  cursor: pointer;
}
.page-tab.active {
  color: var(--encre);
  border-bottom-color: var(--laiton);
}

.panneau {
  margin-top: var(--pas-5);
  padding: var(--pas-5);
  border: 2px solid var(--filet);
  border-radius: var(--rayon-s);
  background: var(--carte);
}
@media (min-width: 768px) {
  .panneau { padding: var(--pas-6); }
}
.panneau__note {
  color: var(--secondaire);
  margin-block: var(--pas-2) var(--pas-5);
}

/* Champs de saisie : 48 px de haut comme toute cible tactile, et jamais
   sous 16 px — un champ plus petit fait zoomer les navigateurs mobiles. */
.champ {
  width: 100%;
  min-height: 48px;
  padding: var(--pas-3) var(--pas-4);
  border: 2px solid var(--encre);
  border-radius: var(--rayon-s);
  background: var(--papier);
  color: var(--encre);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: var(--t-texte);
}
.champ-ligne { display: grid; gap: var(--pas-3); }
@media (min-width: 480px) {
  .champ-ligne { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.champ-bloc {
  display: grid;
  gap: var(--pas-2);
  margin-bottom: var(--pas-5);
}
.champ-bloc label {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-petit);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondaire);
}
/* Les messages du script (« Recherche en cours… », erreurs) : la hauteur est
   réservée pour que leur apparition ne pousse pas le bouton. */
.message {
  min-height: var(--pas-5);
  margin-top: var(--pas-4);
}

/* La carte à tampons et le bon : masqués tant que le script ne les a pas
   révélés en posant .visible. */
.stamp-card { display: none; }
.stamp-card.visible { display: block; }

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pas-4);
  margin-bottom: var(--pas-6);
}
.card-name {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: var(--t-sous-titre);
}
.card-meta {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-donnee);
  color: var(--secondaire);
}
.card-badge {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--pas-2) var(--pas-4);
  border-radius: var(--rayon-l);
  font-family: 'DM Mono', monospace;
  font-size: var(--t-donnee);
  font-weight: 500;
}
.badge-progress { background: var(--filet); color: var(--encre); }
.badge-reward { background: var(--laiton); color: var(--encre); }

/* Cinq crans, comme la graduation de l'accueil — ici ce sont des tampons
   réellement acquis, posés un à un par le script. */
.stamps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--pas-3);
  max-width: 420px;
  margin-bottom: var(--pas-6);
}
.stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 2px solid var(--filet);
  border-radius: 50%;
  background: var(--papier);
}
.stamp.earned {
  background: var(--laiton);
  border-color: var(--laiton-texte);
}
.stamp.earned::after {
  content: '✦';
  color: var(--encre);
  font-size: var(--t-sous-titre);
}

.progression { margin-bottom: var(--pas-5); }
.progress-bar-bg {
  width: 100%;
  max-width: 420px;
  height: 8px;
  border-radius: var(--rayon-l);
  background: var(--filet);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: var(--rayon-l);
  background: var(--laiton);
  transition: width var(--duree) var(--courbe);
}
.progression__texte { margin-top: var(--pas-3); color: var(--secondaire); }
.historique {
  border-top: 1px solid var(--filet);
  padding-top: var(--pas-4);
  font-size: var(--t-petit);
  color: var(--secondaire);
}

.coupon {
  display: none;
  margin-bottom: var(--pas-6);
  border: 2px dashed var(--laiton-texte);
  border-radius: var(--rayon-s);
  overflow: hidden;
}
.coupon.visible { display: block; }
.coupon__haut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pas-4);
  padding: var(--pas-5);
  background: var(--encre);
  color: var(--papier);
}
.coupon__taux {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: var(--t-section);
  line-height: 1;
}
.coupon__objet { font-weight: 700; }
.coupon__note { font-size: var(--t-petit); }
.coupon__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pas-3);
  padding: var(--pas-4) var(--pas-5);
  background: var(--carte);
}
.coupon__porteur { font-weight: 700; }
.coupon__mention {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-petit);
  color: var(--secondaire);
}

/* La confirmation de création, posée puis retirée par le script après 3,5 s.
   Elle se place sous l'en-tête, jamais sur la barre du pouce. */
.success-banner {
  display: none;
  position: fixed;
  left: 50%;
  top: var(--pas-5);
  z-index: 300;
  transform: translateX(-50%);
  max-width: calc(100% - var(--pas-5) * 2);
  padding: var(--pas-4) var(--pas-6);
  border-radius: var(--rayon-s);
  background: var(--ouvert);
  color: var(--papier);
  font-weight: 700;
}
.success-banner.show { display: block; }

/* ============================================================
   Pied de page — discret, même bande encre
   ============================================================ */
.pied {
  background: var(--encre);
  color: var(--papier);
  padding-block: var(--pas-6);
}
.pied__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pas-4);
}
.pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas-4);
  list-style: none;
}
.pied a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--papier);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-size: var(--t-petit);
}
.pied__mention {
  font-size: var(--t-petit);
  color: var(--papier);
}