/* ==========================================================================
   GiS Graphics — feuille de style unique
   --------------------------------------------------------------------------
   DIRECTION
   L'affiche de la Ducasse d'Ath, en version sobre. Le site garde le bleu du
   logo GiS, et le titre du site est composé en caractères condensés comme
   sur une affiche. Un seul ornement : les festons qui bordent le bas de
   l'en-tête, comme les lambrequins des tentures de fête et des costumes des
   géants. Tout le reste est calme : fond blanc, texte très lisible, photos
   des produits mises en avant.

   COULEURS (reprises du site Shopify et du logo)
   --couleur-bleu      #0063A7  bleu GiS (fond du pied Shopify, disque du logo) :
                                en-tête. Texte blanc dessus : 6,3:1
   --couleur-nuit      #0C345A  primaire Shopify : titres, pied, boutons
                                secondaires. Sur blanc : 12,7:1
   --couleur-encre     #030D17  texte courant (foreground Shopify). Sur blanc : 19:1
   --couleur-flambeau  #D87818  orange du logo : bouton principal (texte encre
                                dessus : 6,1:1), compteur, puces. Jamais en texte
                                sur blanc (3,2:1).
   --couleur-craie     #EEF2F7  bordure Shopify : fonds de section, fonds d'image
   --couleur-gris      #4A5A6A  texte secondaire, contours des champs. Sur blanc : 7,1:1
   --couleur-erreur    #B3261E  erreurs. Sur blanc : 6,6:1
   --couleur-succes    #1E6B3A  confirmations. Sur blanc : 6,5:1

   POLICES (auto-hébergées, WOFF2 latin + latin-ext, licence OFL)
   - Big Shoulders Display 800 : titres, noms de produits, prix mis en avant.
     Caractère condensé façon affiche en bois, en minuscules et capitales
     (jamais de capitales forcées).
   - Atkinson Hyperlegible Next 400/700 (+ italiques) : tout le texte courant,
     les formulaires et les boutons. Conçue pour la lisibilité.

   ÉCHELLE TYPOGRAPHIQUE (échelle classique 14 · 17 · 21 · 24 · 36 · 48 · 72 px)
   Mobile d'abord. Les titres grandissent à partir de 40rem et 64rem.

   ACCESSIBILITÉ
   Contrastes AA vérifiés (voir ci-dessus), focus visible (3 px, encre sur fond
   clair, blanc sur fond bleu ou nuit), cibles tactiles de 48 px au moins,
   mouvements réduits respectés.

   CLASSES PARTAGÉES (utilisées par les gabarits des pages)
   .conteneur .section .section--craie .titre-page .titre-section .texte-riche
   .grille-produits .carte-produit (.carte-produit__image, __nom, __prix, --contenu)
   .bouton .bouton--principal .bouton--secondaire
   .champ .champ--erreur .champ__aide .message-erreur .option .choix-tailles .choix-taille
   .alerte .alerte--erreur .alerte--succes .badge-epuise .prix
   .visuellement-cache .si-js .si-sans-js
   ========================================================================== */

/* --- Polices ------------------------------------------------------------- */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/big-shoulders-display-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-next-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-next-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-next-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-next-latin-ext-700-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-next-latin-700-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Variables ----------------------------------------------------------- */
:root {
  --couleur-bleu: #0063A7;
  --couleur-nuit: #0C345A;
  --couleur-encre: #030D17;
  --couleur-flambeau: #D87818;
  --couleur-flambeau-clair: #F09A3E;
  --couleur-craie: #EEF2F7;
  --couleur-papier: #FFFFFF;
  --couleur-gris: #4A5A6A;
  --couleur-trait: #C9D3DE;
  --couleur-erreur: #B3261E;
  --couleur-erreur-fond: #FBEDEC;
  --couleur-succes: #1E6B3A;
  --couleur-succes-fond: #EAF4EE;
  --couleur-focus: var(--couleur-encre);

  --police-titre: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', sans-serif-condensed, Impact, sans-serif;
  --police-texte: 'Atkinson Hyperlegible Next', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --taille-petite: 0.875rem;   /* 14 px */
  --taille-texte: 1.0625rem;   /* 17 px */
  --taille-h4: 1.3125rem;      /* 21 px */
  --taille-h3: 1.5rem;         /* 24 px */
  --taille-h2: 2.25rem;        /* 36 px */
  --taille-h1: 3rem;           /* 48 px */

  --goutiere: 1rem;
  --largeur-max: 76rem;
  --largeur-texte: 38rem;      /* ≈ 70 caractères */
  --espace-section: 3rem;
  --festons: 0.75rem;          /* rayon des festons sous l'en-tête */
  --rayon: 0.5rem;
}

@media (min-width: 40rem) {
  :root {
    --goutiere: 1.5rem;
    --taille-h1: 3.75rem;      /* 60 px */
    --espace-section: 4rem;
  }
}
@media (min-width: 64rem) {
  :root {
    --goutiere: 2.5rem;
    --taille-texte: 1.125rem;  /* 18 px */
    --taille-h2: 3rem;         /* 48 px */
    --taille-h1: 4.5rem;       /* 72 px */
    --espace-section: 5rem;
    --festons: 1rem;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--couleur-papier);
  color: var(--couleur-encre);
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  line-height: 1.55;
  font-kerning: normal;
  overflow-wrap: break-word;
}

main {
  flex: 1 0 auto;
  /* Laisse la place aux festons qui débordent de l'en-tête. */
  padding-top: calc(var(--festons) + clamp(2rem, 1.25rem + 2vw, 3rem));
  padding-bottom: var(--espace-section);
}
main:focus { outline: none; }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 800;
  color: var(--couleur-nuit);
  line-height: 1;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--taille-h1); line-height: 1; } /* 1 et non 0.95 : les jambages (g, p) ne touchent pas la ligne suivante */
h2 { font-size: var(--taille-h2); }
h3 { font-size: var(--taille-h3); }
h4 { font-size: var(--taille-h4); }

p, ul, ol, dl, figure, fieldset { margin: 0 0 1rem; }
p { max-width: var(--largeur-texte); text-wrap: pretty; }

a { color: var(--couleur-bleu); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--couleur-nuit); text-decoration-thickness: 0.14em; }

strong, b { font-weight: 700; }
small { font-size: var(--taille-petite); }

::selection { background: var(--couleur-flambeau); color: var(--couleur-encre); }

:focus-visible {
  outline: 3px solid var(--couleur-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

[hidden] { display: none !important; }

/* --- Utilitaires --------------------------------------------------------- */
.conteneur {
  width: min(100% - 2 * var(--goutiere), var(--largeur-max));
  margin-inline: auto;
}

.section { padding-block: var(--espace-section); }
.section:first-child { padding-top: 0; }
.section--craie { background: var(--couleur-craie); padding-block: var(--espace-section); }

.titre-page { margin-bottom: 0.4em; }
.titre-section { margin-bottom: 0.6em; }

.chapeau {
  font-size: var(--taille-h4);
  line-height: 1.4;
  color: var(--couleur-gris);
  max-width: var(--largeur-texte);
}

.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Amélioration progressive : body.sans-js est retiré par un script en tête de page. */
.sans-js .si-js { display: none !important; }
body:not(.sans-js) .si-sans-js { display: none !important; }

.icone { width: 1.5rem; height: 1.5rem; flex: none; }

/* Texte riche (descriptions des produits et des collections, HTML nettoyé). */
.texte-riche { max-width: var(--largeur-texte); }
.texte-riche p { margin-bottom: 0.75rem; }
.texte-riche ul { padding-left: 1.25rem; }
.texte-riche li { margin-bottom: 0.25rem; }
.texte-riche li::marker { color: var(--couleur-flambeau); }
.texte-riche > :last-child { margin-bottom: 0; }

/* --- Lien d'évitement ---------------------------------------------------- */
.lien-evitement {
  position: absolute;
  z-index: 100;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--couleur-papier);
  color: var(--couleur-encre);
  font-weight: 700;
  border-radius: var(--rayon);
  transform: translateY(-200%);
}
.lien-evitement:focus { transform: none; }

/* --- En-tête ------------------------------------------------------------- */
.entete {
  --couleur-focus: var(--couleur-papier);
  position: relative;
  z-index: 10;
  background: var(--couleur-bleu);
  color: var(--couleur-papier);
}

/* Les festons : une rangée de demi-cercles bleus qui pendent sous l'en-tête. */
.entete::after,
.entete__menu--ouvert::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--festons);
  background:
    radial-gradient(circle at 50% 0, var(--couleur-bleu) calc(var(--festons) - 0.5px), transparent var(--festons))
    0 0 / calc(var(--festons) * 2) var(--festons) repeat-x;
  pointer-events: none;
}

.entete a { color: inherit; text-decoration: none; }
.entete a:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; }

.entete__barre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 4.5rem;
  padding-block: 0.5rem;
}

.entete__logo { flex: none; margin-right: auto; border-radius: 50%; }
.entete__logo img { width: 3.5rem; height: auto; }
.entete__logo:hover { text-decoration: none; }


.entete__bouton-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid rgb(255 255 255 / 0.55);
  border-radius: var(--rayon);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.entete__bouton-menu[aria-expanded='true'] { background: var(--couleur-nuit); border-color: var(--couleur-nuit); }

/* Panneau du menu, mobile : sous la barre, même bleu, mêmes festons. */
.entete__menu {
  display: none;
  position: absolute;
  z-index: 2;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0.5rem var(--goutiere) 1.5rem;
  background: var(--couleur-bleu);
  border-top: 1px solid rgb(255 255 255 / 0.25);
}
.entete__menu--ouvert { display: block; }

.entete__liens,
.entete__langues {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entete__liens a {
  display: block;
  padding: 0.75rem 0;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--taille-h3);
  line-height: 1.1;
}
.entete__liens li + li { border-top: 1px solid rgb(255 255 255 / 0.2); }

.entete a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.25em;
}

.entete__langues {
  display: flex;
  gap: 0.25rem;
  margin-top: 1rem;
}
.entete__langues a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  padding: 0 0.5rem;
  border-radius: var(--rayon);
  font-weight: 700;
  font-size: var(--taille-petite);
  letter-spacing: 0.04em;
}
.entete__langues a[aria-current='true'] {
  background: var(--couleur-papier);
  color: var(--couleur-bleu);
}
.entete__langues a[aria-current='true']:hover { text-decoration: none; }

.entete__facebook {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  margin-top: 0.5rem;
}

.lien-demande {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 3rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--rayon);
  font-weight: 700;
  white-space: nowrap;
}
.lien-demande__texte { display: none; }
.lien-demande__compteur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--couleur-flambeau);
  color: var(--couleur-encre);
  font-size: var(--taille-petite);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Sans JavaScript : pas de bouton, le menu est toujours affiché sous la barre. */
.sans-js .entete__barre { flex-wrap: wrap; }
.sans-js .entete__bouton-menu { display: none; }
.sans-js .entete__nav { order: 4; flex-basis: 100%; }
.sans-js .entete__menu { display: block; position: static; padding-inline: 0; }

@media (min-width: 22rem) {
  .lien-demande__texte { display: inline; }
}

@media (min-width: 64rem) {
  .entete__barre { min-height: 5.5rem; gap: 1.5rem; }
  .entete__logo { margin-right: 0; }
  .entete__logo img { width: 4.5rem; }
  .entete__nav { flex: 1; }

  .entete__bouton-menu { display: none; }
  .entete__menu,
  .sans-js .entete__menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: static;
    padding: 0;
    border: 0;
  }
  .entete__menu--ouvert::after { content: none; }

  .entete__liens { display: flex; gap: 1.75rem; margin-right: auto; }
  .entete__liens li + li { border: 0; }
  .entete__liens a { padding: 0.5rem 0; font-size: var(--taille-h4); }

  .entete__langues { margin: 0; }
  .entete__langues a { min-width: 2.75rem; min-height: 2.75rem; }
  .entete__facebook { margin: 0; }

  .lien-demande { padding-inline: 1rem; border: 2px solid rgb(255 255 255 / 0.55); }
  .lien-demande:hover { border-color: var(--couleur-papier); }
}

/* --- Pied de page -------------------------------------------------------- */
.pied {
  --couleur-focus: var(--couleur-papier);
  background: var(--couleur-nuit);
  color: var(--couleur-craie);
  padding-block: 3rem 2rem;
  font-size: var(--taille-petite);
}
.pied a { color: var(--couleur-papier); }
.pied a:hover { color: var(--couleur-papier); }
.pied ul { list-style: none; margin: 0; padding: 0; }

.pied__grille { display: grid; gap: 2rem; }

.pied__marque { display: flex; gap: 1rem; align-items: center; }
.pied__marque img { width: 4rem; flex: none; }
.pied__marque p {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--taille-h4);
  line-height: 1.15;
  color: var(--couleur-papier);
}

.pied__contact li + li { margin-top: 0.75rem; }
.pied__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  font-size: var(--taille-texte);
}
.pied__contact .icone { width: 1.25rem; height: 1.25rem; }

.pied__legal ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.pied__legal a { display: inline-block; padding-block: 0.5rem; }

.pied__bas {
  border-top: 1px solid rgb(238 242 247 / 0.25);
  padding-top: 1.25rem;
  color: #B9C6D3;
}
.pied__bas p { margin: 0 0 0.25rem; max-width: none; }

@media (min-width: 48rem) {
  .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
  .pied__bas { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 2rem; }
  .pied__legal ul { flex-direction: column; }
}

/* --- Boutons ------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bouton:hover { text-decoration: none; }

.bouton--principal {
  background: var(--couleur-flambeau);
  border-color: var(--couleur-flambeau);
  color: var(--couleur-encre);
}
.bouton--principal:hover {
  background: var(--couleur-flambeau-clair);
  border-color: var(--couleur-flambeau-clair);
  color: var(--couleur-encre);
}

.bouton--secondaire {
  background: transparent;
  border-color: var(--couleur-nuit);
  color: var(--couleur-nuit);
}
.bouton--secondaire:hover {
  background: var(--couleur-craie);
  color: var(--couleur-nuit);
}

.bouton:disabled,
.bouton[aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Bouton discret (ex. « Supprimer » dans la demande). */
.bouton-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: none;
  color: var(--couleur-bleu);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.bouton-lien:hover { color: var(--couleur-nuit); }

/* --- Formulaires --------------------------------------------------------- */
.champ {
  display: grid;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
  max-width: 32rem;
}
.champ > label:not(.option),
.champ > legend { font-weight: 700; }

.champ input:not([type='radio']):not([type='checkbox']),
.champ select,
.champ textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 2px solid var(--couleur-gris);
  border-radius: var(--rayon);
  background: var(--couleur-papier);
  color: var(--couleur-encre);
  font: inherit;
}
.champ textarea { min-height: 8rem; resize: vertical; }
.champ select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230C345A' stroke-width='2.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  border-color: var(--couleur-encre);
}

.champ__aide { margin: 0; font-size: var(--taille-petite); color: var(--couleur-gris); }
.champ .obligatoire { color: var(--couleur-erreur); font-weight: 700; }

.message-erreur {
  margin: 0;
  color: var(--couleur-erreur);
  font-size: var(--taille-petite);
  font-weight: 700;
}
.message-erreur:empty { display: none; }

.champ--erreur > label:not(.option),
.champ--erreur > legend { color: var(--couleur-erreur); }
.champ--erreur input:not([type='radio']):not([type='checkbox']),
.champ--erreur select,
.champ--erreur textarea,
[aria-invalid='true']:not([type='radio']):not([type='checkbox']) {
  border-color: var(--couleur-erreur);
  border-width: 3px;
}

fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

/* Case ou bouton radio accompagné de son libellé. */
.option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-block: 0.5rem;
  cursor: pointer;
}
.option input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.1rem 0 0;
  accent-color: var(--couleur-nuit);
}
.champ--erreur .option input { outline: 2px solid var(--couleur-erreur); outline-offset: 2px; }

/* Choix de taille : boutons radio présentés en pastilles. */
.choix-tailles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choix-taille { position: relative; }
.choix-taille input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choix-taille input + span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  min-height: 3rem;
  padding: 0 0.875rem;
  border: 2px solid var(--couleur-gris);
  border-radius: var(--rayon);
  background: var(--couleur-papier);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.choix-taille input:checked + span {
  background: var(--couleur-nuit);
  border-color: var(--couleur-nuit);
  color: var(--couleur-papier);
}
.choix-taille input:focus-visible + span { outline: 3px solid var(--couleur-focus); outline-offset: 2px; }
.choix-taille input:disabled { cursor: not-allowed; }
.choix-taille input:disabled + span {
  border-style: dashed;
  border-color: var(--couleur-trait);
  color: var(--couleur-gris);
  text-decoration: line-through;
}

/* --- Alertes ------------------------------------------------------------- */
.alerte {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 6px solid var(--couleur-nuit);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  background: var(--couleur-craie);
  color: var(--couleur-encre);
  max-width: var(--largeur-texte);
}
.alerte > :last-child { margin-bottom: 0; }
.alerte--erreur { border-color: var(--couleur-erreur); background: var(--couleur-erreur-fond); }
.alerte--succes { border-color: var(--couleur-succes); background: var(--couleur-succes-fond); }
.alerte:empty { display: none; }

/* --- Prix et badge ------------------------------------------------------- */
/* Les prix sont composés avec la police des titres : le zéro barré d'Atkinson
   Hyperlegible se lit mal dans un montant. */
.prix {
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 1.15em;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* « Épuisé » : un cachet posé de travers, comme sur une affiche barrée. */
.badge-epuise {
  display: inline-block;
  padding: 0.2rem 0.6rem 0.25rem;
  border-radius: 0.25rem;
  background: var(--couleur-encre);
  color: var(--couleur-papier);
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--taille-h4);
  line-height: 1;
  letter-spacing: 0.02em;
  transform: rotate(-4deg);
}

/* --- Grille et cartes produit -------------------------------------------- */
.grille-produits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .grille-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
}
@media (min-width: 64rem) {
  .grille-produits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.carte-produit {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.carte-produit__image {
  position: relative;
  order: -1;
  margin-bottom: 0.5rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--couleur-craie);
}
.carte-produit__image img,
.carte-produit__image picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Visuels très allongés (marque-pages) : affichés en entier. */
.carte-produit--contenu .carte-produit__image img { object-fit: contain; padding: 0.75rem; }
.carte-produit__image .badge-epuise { position: absolute; top: 0.75rem; left: 0.75rem; }

.carte-produit__nom {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--taille-h4);
  line-height: 1.05;
  color: var(--couleur-nuit);
}
.carte-produit__nom a { color: inherit; text-decoration: none; }
.sans-coupure { white-space: nowrap; }
/* Toute la carte est cliquable par le lien du nom. */
.carte-produit__nom a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.carte-produit:hover .carte-produit__nom a { text-decoration: underline; text-decoration-thickness: 2px; }
.carte-produit__nom a:focus-visible { outline: none; }
.carte-produit__nom a:focus-visible::after { outline: 3px solid var(--couleur-focus); outline-offset: 4px; border-radius: var(--rayon); }
.carte-produit__prix { margin: 0; color: var(--couleur-encre); }

@media (min-width: 64rem) {
  .carte-produit__nom { font-size: var(--taille-h3); }
}

/* ==========================================================================
   Pages catalogue : accueil, collections, fiches produit, 404, racine
   ========================================================================== */

/* --- Fil d'Ariane -------------------------------------------------------- */
.fil-ariane { margin-bottom: 1.25rem; font-size: var(--taille-petite); color: var(--couleur-gris); }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0; margin: 0; padding: 0; list-style: none; }
.fil-ariane li { display: inline-flex; align-items: center; }
.fil-ariane li + li::before { content: '›'; margin-inline: 0.5rem; color: var(--couleur-gris); }
.fil-ariane a { display: inline-block; padding-block: 0.375rem; color: var(--couleur-gris); }
.fil-ariane a:hover { color: var(--couleur-nuit); }
.fil-ariane [aria-current] { color: var(--couleur-encre); }

/* --- Accueil : bannière -------------------------------------------------- */
body[data-page='accueil'] main { padding-top: 0; }

.banniere { background: var(--couleur-nuit); color: var(--couleur-papier); }
.banniere__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 34rem;
  object-fit: cover;
  object-position: 50% 15%;
}
.banniere__texte { padding-block: 1.75rem 2.25rem; }
.banniere__titre {
  margin-bottom: 0.25em;
  line-height: 1.1; /* le jambage du g (« Draag ») ne touche pas la capitale de la ligne suivante */
  color: var(--couleur-papier);
  font-size: var(--taille-h1);
}
.banniere__sous-titre {
  margin-bottom: 1.5rem;
  font-size: var(--taille-h4);
  line-height: 1.35;
  color: var(--couleur-craie);
}
.banniere .bouton { --couleur-focus: var(--couleur-papier); }
.banniere .bouton:focus-visible { outline-color: var(--couleur-papier); }

@media (min-width: 40rem) {
  .banniere__image img { aspect-ratio: 2244 / 1265; max-height: 80vh; object-position: 50% 40%; }
  .banniere__texte { padding-block: 2.5rem 3rem; text-align: center; }
  .banniere__titre, .banniere__sous-titre { margin-inline: auto; }
  .banniere__titre { max-width: 18ch; }
}

/* --- Accueil : présentation, étapes, Facebook ---------------------------- */
.presentation__texte p:first-child { font-size: var(--taille-h4); line-height: 1.45; }
@media (min-width: 64rem) {
  .presentation__grille { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: start; }
}

.vedettes { padding-top: 0; }

.etapes__liste {
  counter-reset: etape;
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.etapes__liste li {
  counter-increment: etape;
  position: relative;
  padding-left: 3.75rem;
  min-height: 2.75rem;
  max-width: var(--largeur-texte);
}
.etapes__liste li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: -0.2rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--couleur-flambeau);
  color: var(--couleur-encre);
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--taille-h3);
  line-height: 1;
}
@media (min-width: 48rem) {
  .etapes__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .etapes__liste li { padding-left: 0; padding-top: 3.75rem; }
}

.encart-facebook {
  --couleur-focus: var(--couleur-papier);
  display: grid;
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  border-radius: var(--rayon);
  background: var(--couleur-bleu);
  color: var(--couleur-papier);
}
.encart-facebook__icone { width: 3rem; height: 3rem; }
.encart-facebook__titre { color: var(--couleur-papier); font-size: var(--taille-h3); margin-bottom: 0.4em; }
.encart-facebook p { margin-bottom: 1.25rem; }
@media (min-width: 48rem) {
  .encart-facebook { grid-template-columns: auto 1fr; gap: 1.5rem; padding: 2.5rem; align-items: start; }
  .encart-facebook__icone { width: 4rem; height: 4rem; }
}

.bouton--secondaire-clair { background: transparent; border-color: var(--couleur-papier); color: var(--couleur-papier); }
.bouton--secondaire-clair:hover { background: var(--couleur-papier); color: var(--couleur-bleu); }

/* --- Tuiles de collection ------------------------------------------------ */
.grille-collections {
  display: grid;
  gap: 2rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .grille-collections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* « Les autres collections » : deux tuiles côte à côte, plus petites. */
.grille-collections--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; max-width: 52rem; }

.tuile-collection { position: relative; display: flex; flex-direction: column; }
.tuile-collection__image {
  order: -1;
  margin-bottom: 0.75rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--couleur-encre);
}
@media (min-width: 40rem) { .tuile-collection__image { aspect-ratio: 4 / 5; } }
.tuile-collection__image img,
.tuile-collection__image picture { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.tuile-collection:hover .tuile-collection__image img { transform: scale(1.03); }
.tuile-collection__nom { margin: 0 0 0.25rem; font-size: var(--taille-h3); }
.tuile-collection__nom a { color: inherit; text-decoration: none; }
.tuile-collection__nom a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.tuile-collection__nom a:focus-visible { outline: none; }
.tuile-collection__nom a:focus-visible::after { outline: 3px solid var(--couleur-focus); outline-offset: 4px; border-radius: var(--rayon); }
.tuile-collection:hover .tuile-collection__nom a { text-decoration: underline; text-decoration-thickness: 2px; }
.tuile-collection__lien { margin: 0; font-weight: 700; color: var(--couleur-bleu); }
.tuile-collection__lien::after { content: ' →'; }
.grille-collections--deux .tuile-collection__nom { font-size: var(--taille-h4); }
.grille-collections--deux .tuile-collection__image { aspect-ratio: 1; }
@media (min-width: 40rem) { .grille-collections--deux .tuile-collection__image { aspect-ratio: 4 / 3; } }

/* --- Page collection ----------------------------------------------------- */
.entete-collection { display: grid; gap: 1.5rem 3rem; margin-bottom: 2.5rem; }
.entete-collection__image { display: none; }
@media (min-width: 64rem) {
  .entete-collection { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
  .entete-collection__image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--rayon);
    background: var(--couleur-encre);
  }
  .entete-collection__image img,
  .entete-collection__image picture { width: 100%; height: 100%; object-fit: cover; }
}
.entete-collection__nombre {
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--couleur-gris);
}
.entete-collection__description { color: var(--couleur-encre); }
.autres-collections { margin-top: var(--espace-section); }
main:has(> .autres-collections:last-child),
main:has(> .meme-collection:last-of-type) { padding-bottom: 0; }

/* Sur fond craie, le fond des visuels passe au blanc pour rester visible. */
.section--craie .carte-produit__image { background: var(--couleur-papier); }

/* Cartes des marque-pages : visuel vertical affiché en entier. */
.carte-produit--contenu .carte-produit__image { aspect-ratio: 3 / 4; }

/* --- Fiche produit ------------------------------------------------------- */
.fiche { display: grid; gap: 2rem; }
@media (min-width: 64rem) {
  .fiche { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
  .fiche__galerie { position: sticky; top: 1.5rem; }
}

.galerie__images { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.galerie__image {
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--couleur-craie);
}
.galerie__image img { width: 100%; }
.galerie--js .galerie__image:not(.est-active) { display: none; }

.fiche--contenu .galerie__image { display: grid; place-items: center; padding: 1.5rem; }
.fiche--contenu .galerie__image img { width: auto; max-height: 75vh; }

.galerie__vignettes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.galerie__vignette {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--couleur-trait);
  border-radius: var(--rayon);
  background: var(--couleur-craie);
  cursor: pointer;
}
.galerie__vignette img,
.galerie__vignette picture { width: 100%; height: 100%; object-fit: cover; }
.fiche--contenu .galerie__vignette img { object-fit: contain; }
.galerie__vignette:hover { border-color: var(--couleur-gris); }
.galerie__vignette[aria-pressed='true'] { border-color: var(--couleur-nuit); box-shadow: 0 0 0 1px var(--couleur-nuit); }

.fiche__nom { font-size: var(--taille-h2); margin-bottom: 0.3em; }
@media (min-width: 64rem) { .fiche__nom { font-size: 3.5rem; } }
.fiche__prix { margin-bottom: 1.5rem; font-size: var(--taille-h3); color: var(--couleur-encre); }

.ajout-demande {
  margin-bottom: 2rem;
  padding: 1.25rem;
  border: 2px solid var(--couleur-craie);
  border-radius: var(--rayon);
  background: var(--couleur-papier);
}
.ajout-demande .champ:last-of-type { margin-bottom: 1.25rem; }
.champ--quantite input[type='number'] { max-width: 7rem; }
.ajout-demande .bouton { width: 100%; }
@media (min-width: 40rem) { .ajout-demande .bouton { width: auto; } }
.retour-ajout { margin: 0.75rem 0 0; font-weight: 700; }
.retour-ajout:empty { display: none; }

.fiche__description { margin-bottom: 1.5rem; }
.fiche__collection a { font-weight: 700; }
.meme-collection { margin-top: var(--espace-section); }

/* --- 404 ----------------------------------------------------------------- */
.introuvable { display: grid; gap: 2.5rem; }
.introuvable__langue + .introuvable__langue { padding-top: 2rem; border-top: 2px solid var(--couleur-craie); }
.introuvable h2 { font-size: var(--taille-h3); }

/* --- Racine (choix de la langue) ----------------------------------------- */
.page-racine { background: var(--couleur-bleu); color: var(--couleur-papier); --couleur-focus: var(--couleur-papier); }
.racine {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2rem;
  min-height: 100vh;
  padding: 2rem var(--goutiere);
  text-align: center;
}
.racine__logo { width: 8rem; }
.racine__langues { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.racine__langues li { display: grid; gap: 0.5rem; justify-items: center; }
.racine__invite { font-size: var(--taille-petite); color: var(--couleur-craie); }
.racine__langues .bouton { min-width: 12rem; }

/* ==========================================================================
   Demande, Merci, Contact (T7)
   ========================================================================== */

/* --- Formulaires de la demande et du contact ----------------------------- */
.formulaire { max-width: 34rem; }
.formulaire__legende { margin-bottom: 1.25rem; }
.formulaire__envoyer { width: 100%; }
@media (min-width: 40rem) { .formulaire__envoyer { width: auto; } }
.formulaire .alerte--erreur ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.champ__facultatif { font-weight: 400; color: var(--couleur-gris); }
.champ--consentement { max-width: none; }
.champ--consentement .option { font-size: var(--taille-petite); line-height: 1.5; }
.option__aide { margin: -0.375rem 0 0.25rem calc(1.375rem + 0.75rem); }

.bloc-adresse {
  margin: 0 0 1.25rem;
  padding: 1.25rem 1.25rem 0.25rem;
  border-left: 6px solid var(--couleur-bleu);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  background: var(--couleur-craie);
}
.bloc-adresse__titre {
  margin-bottom: 0.75rem;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--taille-h4);
  color: var(--couleur-nuit);
}
.bloc-adresse__ligne { display: grid; gap: 0 1rem; }
@media (min-width: 30rem) {
  .bloc-adresse__ligne { grid-template-columns: 9rem minmax(0, 1fr); }
}

/* --- Page Demande -------------------------------------------------------- */
.demande { display: grid; gap: 2.5rem; margin-top: 1.5rem; }
@media (min-width: 64rem) {
  .demande { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
  .demande__recap { position: sticky; top: 1.5rem; }
}
.demande__recap h2:focus { outline: none; }
.demande__lignes { margin: 0 0 1rem; padding: 0; list-style: none; border-top: 2px solid var(--couleur-craie); }

.ligne-demande {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
  padding-block: 1rem;
  border-bottom: 2px solid var(--couleur-craie);
}
.ligne-demande__vignette {
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--couleur-craie);
}
.ligne-demande__vignette img { width: 100%; height: 100%; object-fit: contain; }
.ligne-demande__infos p { margin: 0; }
.ligne-demande__nom {
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--taille-h4);
  line-height: 1.1;
}
.ligne-demande__nom a { color: var(--couleur-nuit); text-decoration: none; }
.ligne-demande__nom a:hover { text-decoration: underline; }
.ligne-demande__detail { font-size: var(--taille-petite); color: var(--couleur-gris); }
.ligne-demande__detail .prix { color: var(--couleur-encre); font-size: 1.05em; }
.ligne-demande__actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1rem;
}
.ligne-demande__quantite { display: grid; gap: 0.25rem; font-size: var(--taille-petite); font-weight: 700; }
.ligne-demande__quantite input {
  width: 5.5rem;
  min-height: 2.75rem;
  padding: 0.375rem 0.625rem;
  border: 2px solid var(--couleur-gris);
  border-radius: var(--rayon);
  font: inherit;
  font-size: var(--taille-texte);
  font-weight: 400;
}
.ligne-demande__sous-total { margin: 0 0 0.5rem auto; font-size: var(--taille-h4); }
.ligne-demande__supprimer { margin-left: -0.5rem; font-size: var(--taille-petite); }
@media (min-width: 40rem) {
  .ligne-demande { grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; }
  .ligne-demande__vignette { width: 5.5rem; height: 5.5rem; }
  .ligne-demande__actions { grid-column: 3; justify-content: flex-end; }
  .ligne-demande__supprimer { margin-left: 0; }
  /* Largeur fixe : quantités et sous-totaux alignés d'une ligne à l'autre. */
  .ligne-demande__sous-total { min-width: 6.5rem; text-align: right; }
}

/* Ligne dont le produit ou la taille n'existe plus : barrée, hors total. */
.ligne-demande--indisponible .ligne-demande__vignette { opacity: 0.45; filter: grayscale(1); }
.ligne-demande--indisponible .ligne-demande__nom { color: var(--couleur-gris); text-decoration: line-through; }
.ligne-demande--indisponible .ligne-demande__nom a { color: inherit; }
.ligne-demande__indisponible {
  margin-top: 0.375rem !important;
  color: var(--couleur-erreur);
  font-size: var(--taille-petite);
  font-weight: 700;
}

.demande__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  max-width: none;
  margin-bottom: 0.25rem;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--taille-h3);
  color: var(--couleur-nuit);
}
.demande__total .prix { font-size: 1.25em; color: var(--couleur-encre); }
.demande__mention { font-size: var(--taille-petite); color: var(--couleur-gris); }

.demande__collections { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }

/* Le formulaire sur une feuille craie, comme une fiche à remplir. */
.demande__formulaire {
  padding: 1.5rem var(--goutiere) 2rem;
  margin-inline: calc(-1 * var(--goutiere));
  background: var(--couleur-craie);
}
.demande__formulaire .bloc-adresse { background: var(--couleur-papier); }
@media (min-width: 40rem) {
  .demande__formulaire { margin-inline: 0; padding: 2rem; border-radius: var(--rayon); }
}

/* --- Page Merci ---------------------------------------------------------- */
.merci__numero {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-block: 0.5rem 1.5rem;
  padding: 1rem 1.25rem;
  border: 3px dashed var(--couleur-bleu);
  border-radius: var(--rayon);
  max-width: 100%;
}
.merci__numero strong {
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--taille-h3);
  letter-spacing: 0.04em;
  color: var(--couleur-nuit);
  overflow-wrap: anywhere;
}
.merci__liens { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* --- Page Contact -------------------------------------------------------- */
.contact { display: grid; gap: 2.5rem; margin-top: 1.5rem; }
@media (min-width: 64rem) {
  .contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
}
.contact__autres {
  padding: 1.5rem;
  border-radius: var(--rayon);
  background: var(--couleur-craie);
}
.contact__autres h3 { margin-bottom: 0.3em; font-size: var(--taille-h4); }
.contact__autres p:last-child { margin-bottom: 0; }
.contact__email { font-weight: 700; overflow-wrap: anywhere; }

/* --- Pages légales (T8) -------------------------------------------------- */
.page-legale .titre-page + .champ__aide { margin-bottom: 1.5rem; }
.page-legale__texte h2 { font-size: var(--taille-h3); margin-top: 2rem; }
.page-legale__texte .chapeau { margin-bottom: 1.5rem; }
.page-legale__texte code { font-size: 0.92em; overflow-wrap: anywhere; }
.page-legale__fiche { list-style: none; padding-left: 0 !important; }
.page-legale__fiche a { overflow-wrap: anywhere; }
/* Champ de src/_data/legal.json pas encore rempli. */
.a-completer {
  padding: 0 0.25em;
  border-radius: 2px;
  background: var(--couleur-flambeau-clair);
  color: var(--couleur-encre);
  font-weight: 700;
}

/* --- Mouvements réduits -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* --- Impression ---------------------------------------------------------- */
@media print {
  .entete__nav, .lien-demande, .lien-evitement, .pied__contact, .pied__legal { display: none !important; }
  .entete, .pied { background: none; color: var(--couleur-encre); }
  .entete::after { content: none; }
}