/* =====================================================================
   Béa & Clara — feuille de style unique.
   Un seul univers visuel : le PRUNE porte le site, le gris étain
   l'accompagne, le crème sert de lumière. Écrit à la main, sans
   framework, sans étape de construction.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. COULEURS
   Toutes les couleurs du site sont déclarées ici, en toutes lettres.
   Deux rapports de contraste sont notés pour chacune :
     • « sur blanc », référence demandée, calculée sur #FFFFFF ;
     • « sur prune », le contraste RÉEL, sur le fond de page --prune-900.
   Rappel WCAG : AA = 4,5:1 pour le texte courant, 3:1 pour le grand
   texte (≥ 24 px, ou ≥ 19 px en gras) et pour les bordures utiles.
   Les valeurs ci-dessous sont calculées, pas estimées ; le contrôle
   « Contrastes » de tools/verifier-site.mjs les revérifie sur la page
   rendue, texte par texte.
   --------------------------------------------------------------------- */
:root {
  /* ---- Prune : la couleur du site ---- */
  --nuit:      #1E0F1A;  /* sur blanc 18,44:1 · sur prune  1,09:1 — pied de page   */
  --prune-900: #2B1526;  /* sur blanc 16,96:1 · fond de page                       */
  --prune-800: #3D1E36;  /* sur blanc 14,61:1 · sur prune  1,16:1 — section alternée */
  --prune-700: #5A2B4C;  /* sur blanc 11,14:1 · sur prune  1,52:1 — aplats, filets */
  --prune-600: #6E3A5E;  /* sur blanc  8,64:1 · sur prune  1,84:1 — survols        */
  --prune-500: #8A5578;  /* sur blanc  5,75:1 · sur prune  2,63:1 — DÉCOR sur prune */
  --prune-400: #B189A2;  /* sur blanc  3,01:1 · sur prune  5,63:1 — libellés       */
  --prune-300: #C9A9BE;  /* sur blanc  2,12:1 · sur prune  8,00:1 — texte second   */
  --prune-200: #DCC3D3;  /* sur blanc  1,58:1 · sur prune 10,33:1 — texte second   */
  --prune-100: #EFE3EB;  /* sur blanc  1,25:1 · sur prune 13,62:1 — texte courant  */
  --prune-050: #F8F2F6;  /* sur blanc  1,10:1 · fond de l'îlot clair               */
  --prune-bord:#48263E;  /* filet sur fond prune : 1,33:1 avec --prune-900         */

  /* ---- Gris étain : la seconde couleur, pour l'îlot clair ---- */
  --gris-900: #1C1D20;  /* sur blanc 16,85:1 — texte de l'îlot clair               */
  --gris-700: #3A3D42;  /* sur blanc 10,90:1 — texte de l'îlot clair               */
  --gris-600: #565A61;  /* sur blanc  6,93:1 — texte second de l'îlot clair        */
  --gris-500: #6E737B;  /* sur blanc  4,77:1 — mentions, limite AA                 */
  --gris-300: #C6CAD0;  /* sur blanc  1,65:1 — DÉCOR : filets                      */
  --gris-200: #DFE1E5;  /* sur blanc  1,31:1 — DÉCOR : filets                      */
  --gris-100: #F0F1F3;  /* sur blanc  1,13:1 — DÉCOR                               */

  --blanc: #FFFFFF;
  --creme: #FBFAFB;      /* sur prune-900 16,29:1 — titres et texte fort           */

  /* ---- Signalétique ouvert / fermé, sur fond prune.
          Le point coloré n'est JAMAIS la seule information : le mot
          « Ouvert » ou « Fermé » l'accompagne toujours (daltonisme). ---- */
  --ouvert-fond:  #1B3B29;
  --ouvert-texte: #A8E0BF;   /* sur --ouvert-fond 8,26:1                            */
  --ouvert-point: #5FC98C;   /* sur --ouvert-fond 6,00:1                            */
  --ferme-fond:   #3A2C35;
  --ferme-texte:  #C9B9C2;   /* sur --ferme-fond  7,04:1                            */
  --ferme-point:  #8A7F85;   /* sur --ferme-fond  3,43:1                            */

  /* ---------------------------------------------------------------
     RÔLES — c'est par eux que passent tous les composants.
     L'îlot clair (.section--claire) redéfinit ces mêmes rôles :
     ses enfants basculent alors ensemble, sans règle particulière.
     --------------------------------------------------------------- */
  --fond: var(--prune-900);
  --surface: var(--prune-800);         /* panneaux posés sur le fond              */
  --texte: var(--creme);               /* 16,29:1 — titres, texte fort            */
  --texte-courant: var(--prune-100);   /* 13,62:1 — paragraphes                   */
  --texte-doux: var(--prune-200);      /* 10,33:1 — texte secondaire              */
  --texte-mention: var(--prune-300);   /*  8,00:1 — mentions, légendes            */
  --libelle: var(--prune-400);         /*  5,63:1 — surtitres et intitulés        */
  --lien: var(--creme);
  --lien-survol: var(--prune-200);
  --filet: var(--prune-bord);
  --filet-fort: var(--prune-700);
  --focus: var(--prune-200);

  /* Bouton plein : sur fond prune, c'est le CRÈME qui ressort. */
  --plein-fond: var(--creme);
  --plein-texte: var(--prune-900);     /* 16,29:1                                 */
  --plein-fond-survol: var(--prune-100);
  /* Bouton au trait */
  --trait-texte: var(--creme);
  --trait-bord: var(--prune-500);
  --trait-bord-survol: var(--prune-200);
  --trait-fond-survol: var(--prune-800);

  /* Mesures */
  --largeur-max: 1180px;
  --gouttiere: clamp(1.25rem, 5vw, 3rem);
  --rythme: clamp(3rem, 7vw, 5.5rem);
  --rayon: 2px;          /* angles presque droits : sobre, pas « appli »      */
  --rayon-doux: 10px;

  /* Typographie auto-hébergée (voir polices.css) */
  --titre: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --courant: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* L'ÎLOT CLAIR — une seule section du site, celle des conditions.
   Les mêmes rôles y prennent les valeurs claires : tout ce qu'elle
   contient suit, sans qu'aucun composant ait à le savoir. */
.section--claire {
  --fond: var(--creme);
  --surface: var(--blanc);
  --texte: var(--prune-900);           /* 16,29:1 sur --creme                     */
  --texte-courant: var(--gris-700);    /* 10,47:1                                 */
  --texte-doux: var(--gris-600);       /*  6,65:1                                 */
  --texte-mention: var(--gris-500);    /*  4,58:1 — au-dessus du seuil AA         */
  --libelle: var(--prune-700);         /* 10,09:1                                 */
  --lien: var(--prune-700);
  --lien-survol: var(--prune-900);
  --filet: var(--gris-200);
  --filet-fort: var(--gris-300);
  --focus: var(--prune-700);
  --plein-fond: var(--prune-700);
  --plein-texte: var(--blanc);         /* 11,14:1                                 */
  --plein-fond-survol: var(--prune-600);
  --trait-texte: var(--prune-700);
  --trait-bord: var(--gris-300);
  --trait-bord-survol: var(--prune-700);
  --trait-fond-survol: var(--prune-050);
}

/* ---------------------------------------------------------------------
   2. RÉINITIALISATION MINIMALE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden doit l'emporter sur toute règle d'affichage. Sans
   cela, une classe déclarée plus bas (.bouton { display: inline-flex })
   le neutralise et l'élément reste visible alors que le script l'a
   masqué. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--prune-900);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--prune-900);
  color: var(--texte-courant);
  font-family: var(--courant);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  /* Garde-fou : rien ne doit déborder horizontalement, même à 320 px. */
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--texte);
  margin: 0 0 0.5em;
  /* Un titre anglais est plus long qu'en français : on l'autorise à
     couper proprement plutôt qu'à déborder de son conteneur. */
  overflow-wrap: break-word;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--lien); text-underline-offset: 0.18em; }
a:hover { color: var(--lien-survol); }

/* Focus visible et net sur TOUT élément atteignable au clavier. */
:where(a, button, [tabindex], summary, input):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--rayon);
}

/* Toutes les images du site portent l'attribut data-img.
   On vise cet ATTRIBUT et jamais la balise `img` : un sélecteur `img`
   attraperait aussi les tuiles de carte insérées par le script et les
   étirerait. `height: auto` est indispensable, sinon les attributs
   width/height du HTML l'emportent sur aspect-ratio et déforment la photo. */
[data-img] {
  display: block;
  max-width: 100%;
  height: auto;
}

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

.saut-contenu {
  position: absolute;
  left: 0; top: 0;
  z-index: 100;
  transform: translateY(-120%);
  background: var(--creme);
  color: var(--prune-900);        /* 16,29:1 */
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  text-decoration: none;
}
.saut-contenu:focus { transform: translateY(0); color: var(--prune-900); }

.contenant {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--rythme); background: var(--fond); }
.section--teinte { --fond: var(--prune-800); }

.surtitre {
  font-family: var(--courant);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--libelle);
  margin: 0 0 1rem;
}

.intro {
  font-size: 1.0625rem;
  color: var(--texte-doux);
  max-width: 56ch;
}

.mention {
  font-size: 0.875rem;
  color: var(--texte-mention);
}

/* ---------------------------------------------------------------------
   4. BOUTONS
   --------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-family: var(--courant);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.bouton--plein {
  background: var(--plein-fond);
  color: var(--plein-texte);
}
.bouton--plein:hover { background: var(--plein-fond-survol); color: var(--plein-texte); }
.bouton--ligne {
  background: transparent;
  color: var(--trait-texte);
  border-color: var(--trait-bord);
}
.bouton--ligne:hover {
  background: var(--trait-fond-survol);
  border-color: var(--trait-bord-survol);
  color: var(--trait-texte);
}
.bouton--discret {
  background: transparent;
  color: var(--texte-doux);
  border-color: var(--filet-fort);
}
.bouton--discret:hover { border-color: var(--trait-bord-survol); color: var(--texte); }
.bouton__icone { flex: none; width: 1.15em; height: 1.15em; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  .bouton { transition: none; }
}

/* ---------------------------------------------------------------------
   5. EN-TÊTE
   --------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--prune-900) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--prune-bord);
}
.entete__barre {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
  padding-block: 0.75rem;
}
.marque {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--creme);
  margin-right: auto;
  /* Sans cette ligne, un enfant en white-space: nowrap empêche le
     conteneur flexible de se rétrécir et pousse tout l'en-tête hors
     de l'écran sur un téléphone. */
  min-width: 0;
}
.marque__nom {
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.marque__metier {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--prune-300);        /* 8,00:1 */
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav__lien {
  font-size: 0.9375rem;
  color: var(--prune-100);        /* 13,62:1 */
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav__lien:hover { color: var(--creme); border-bottom-color: var(--prune-500); }

.entete__outils { display: flex; align-items: center; gap: 0.6rem; flex: none; }

.langue {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.7rem;
  background: transparent;
  border: 1px solid var(--prune-500);
  border-radius: var(--rayon);
  color: var(--prune-100);        /* 13,62:1 */
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.langue:hover { border-color: var(--prune-200); color: var(--creme); }

/* Menu repliable sous 900 px */
.bascule-menu { display: none; }

@media (max-width: 900px) {
  .bascule-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem; height: 2.6rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--prune-500);
    border-radius: var(--rayon);
    color: var(--prune-100);
    cursor: pointer;
  }
  .nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--prune-800);
    border-bottom: 1px solid var(--prune-bord);
    padding: 0.5rem var(--gouttiere) 1rem;
  }
  .nav[hidden] { display: none; }
  .nav__lien {
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--prune-bord);
  }
  .entete__barre { position: relative; }
  /* La ligne de métier reprend le surtitre du bandeau d'accueil, juste
     en dessous : sur un téléphone, où elle ferait déborder l'en-tête,
     elle est retirée sans rien perdre. */
  .marque__metier { display: none; }
}

/* ---------------------------------------------------------------------
   6. BANDEAU D'ACCUEIL
   --------------------------------------------------------------------- */
.hero {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem);
  /* Une lueur prune, très basse, pour que le fond ne soit pas un aplat
     mort. Purement décorative. */
  background:
    radial-gradient(120% 90% at 15% 0%, #3E1C36 0%, rgba(62, 28, 54, 0) 62%),
    var(--prune-900);
}
.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__titre {
  /* Plafonné pour qu'un titre anglais, plus long, tienne sur deux lignes. */
  font-size: clamp(2.5rem, 6.2vw, 4.25rem);
  margin-bottom: 0.35em;
}
.hero__chapeau {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--texte-doux);
  max-width: 46ch;
  margin-bottom: 1.75rem;
}
.hero__mention { margin-top: 1.25rem; }
.hero__aparte {
  border-left: 1px solid var(--prune-700);
  padding-left: 1.5rem;
}
.hero__aparte dl { margin: 0; display: grid; gap: 1.25rem; }
.hero__aparte dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--libelle);
}
.hero__aparte dd {
  margin: 0.15rem 0 0;
  font-size: 1rem;
  color: var(--texte-courant);
}

@media (max-width: 860px) {
  .hero__grille { grid-template-columns: minmax(0, 1fr); }
  .hero__aparte { border-left: 0; border-top: 1px solid var(--prune-700); padding-left: 0; padding-top: 1.75rem; }
  .hero__aparte dl { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}

/* ---------------------------------------------------------------------
   7. BANDE DÉFILANTE
   La piste est dupliquée à l'identique et translatée jusqu'à -50 % de
   SA PROPRE largeur : à cet instant la seconde copie occupe exactement
   la position de départ de la première, donc la boucle ne saute pas.
   --------------------------------------------------------------------- */
.bande { overflow: hidden; }
.bande__cadre {
  position: relative;
  /* Débordement volontaire des gouttières : la bande touche les bords. */
  margin-inline: calc(var(--gouttiere) * -1);
  overflow: hidden;
  /* Fondu latéral discret, pour que les vignettes n'apparaissent pas
     coupées net. Masque uniquement décoratif. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.bande__piste {
  display: flex;
  gap: 1rem;
  width: max-content;
  will-change: transform;
  animation: defile var(--duree-bande, 70s) linear infinite;
}
@keyframes defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Pause au survol ET au focus clavier : un client qui tabule dans la
   bande doit pouvoir lire la vignette sans qu'elle s'échappe. */
.bande__cadre:hover .bande__piste,
.bande__cadre:focus-within .bande__piste,
.bande__cadre[data-pause='oui'] .bande__piste { animation-play-state: paused; }

.bande__element {
  flex: none;
  width: clamp(12rem, 22vw, 17rem);
  margin: 0;
}
.bande__photo {
  width: 100%;
  /* Les photos de produits sont carrées : un cadre carré les montre
     entières, sans recadrage. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--rayon);
  background: var(--prune-700);   /* couleur d'attente, jamais de blanc nu */
  border: 1px solid var(--prune-bord);
}
.bande__commande { margin-top: 1.25rem; }

/* Moins d'animations : la bande s'arrête net et devient un rail que
   l'on fait défiler soi-même, au doigt ou au clavier. */
@media (prefers-reduced-motion: reduce) {
  .bande__piste {
    animation: none;
    transform: none;
  }
  .bande__cadre {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .bande__element { scroll-snap-align: start; }
  .bande__commande { display: none; }
}

/* ---------------------------------------------------------------------
   8. CONDITIONS — l'unique îlot clair du site.
   --------------------------------------------------------------------- */
.conditions__grille {
  display: grid;
  /* Six conditions : trois colonnes puis deux, jamais « auto-fit ».
     Avec quatre colonnes, la seconde rangée laisserait deux cases
     vides, visibles puisque les filets sont faits par l'écart entre
     les cellules. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2.5rem;
  background: var(--filet);
  border: 1px solid var(--filet);
}
@media (max-width: 900px) { .conditions__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .conditions__grille { grid-template-columns: minmax(0, 1fr); } }

.condition {
  background: var(--surface);
  padding: 1.75rem 1.5rem;
  margin: 0;
}
.condition__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--libelle);
  margin: 0 0 0.6rem;
}
.condition__valeur {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--texte-courant);
}
.condition__chiffre {
  display: block;
  font-family: var(--titre);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--texte);
  margin-bottom: 0.35rem;
}
.jetons { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.jeton {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  font-size: 0.8125rem;
  color: var(--texte-courant);
  background: var(--surface);
}

/* ---------------------------------------------------------------------
   9. COMMENT COMMANDER
   --------------------------------------------------------------------- */
.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}
/* La numérotation dit quelque chose de vrai : ces trois blocs sont
   une SUITE d'actions, dans cet ordre. */
.etape { counter-increment: etape; }
.etape::before {
  content: counter(etape, decimal-leading-zero);
  display: block;
  font-family: var(--titre);
  font-size: 1.5rem;
  color: var(--libelle);
  border-bottom: 1px solid var(--filet);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}
.etape__titre { font-size: 1.3125rem; margin-bottom: 0.35em; }
.etape__texte { margin: 0; color: var(--texte-doux); font-size: 0.9375rem; }

/* ---------------------------------------------------------------------
   10. CATALOGUE ET QR CODE
   Le QR reste sombre sur clair : un code clair sur fond sombre n'est
   pas lu par tous les appareils photo.
   --------------------------------------------------------------------- */
.catalogue__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.5rem;
  background: var(--creme);
  border: 1px solid var(--prune-500);
  border-radius: var(--rayon-doux);
  text-align: center;
  max-width: 20rem;
}
.qr__image { width: 13rem; height: 13rem; }
.qr__legende { margin: 0; font-size: 0.8125rem; color: var(--gris-600); max-width: 15rem; }

@media (max-width: 780px) {
  .catalogue__grille { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* ---------------------------------------------------------------------
   11. SHOWROOM
   --------------------------------------------------------------------- */
.showroom__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: 2.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .showroom__grille { grid-template-columns: minmax(0, 1fr); }
}

.bloc + .bloc { margin-top: 2.25rem; }
.bloc__titre {
  font-family: var(--courant);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--libelle);
  margin: 0 0 0.75rem;
}

/* L'adresse : chaque composant sur SA ligne, structurellement.
   « Lot n° 70 » et « 8 rue de la Haie Coq » ne peuvent donc jamais
   se retrouver collés — ici comme dans le pied de page. */
.adresse { font-style: normal; margin: 0; color: var(--texte-courant); }
.adresse__ligne { display: block; }
.adresse__batiment { font-weight: 500; color: var(--texte); }

.liste-nue { list-style: none; margin: 0; padding: 0; }
.acces__item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding-block: 0.5rem;
  color: var(--texte-courant);
  font-size: 0.9375rem;
}
.acces__icone { flex: none; width: 1.2rem; height: 1.2rem; margin-top: 0.22rem; color: var(--prune-300); }

/* Horaires */
.horaires { margin: 0; }
.horaires__ligne {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.45rem;
  border-bottom: 1px solid var(--filet);
  font-size: 0.9375rem;
}
.horaires__ligne:last-child { border-bottom: 0; }
.horaires__jour { color: var(--texte-courant); }
.horaires__heures { color: var(--texte-doux); font-variant-numeric: tabular-nums; text-align: right; }
.horaires__ligne[data-aujourdhui='oui'] .horaires__jour,
.horaires__ligne[data-aujourdhui='oui'] .horaires__heures {
  color: var(--texte);
  font-weight: 600;
}

/* Indicateur ouvert / fermé */
.etat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--ferme-fond);
  color: var(--ferme-texte);      /* 7,04:1 sur son fond */
  border: 1px solid color-mix(in srgb, var(--ferme-texte) 22%, transparent);
}
.etat__point {
  flex: none;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--ferme-point);
}
.etat[data-ouvert='oui'] {
  background: var(--ouvert-fond);
  color: var(--ouvert-texte);     /* 8,26:1 sur son fond */
  border-color: color-mix(in srgb, var(--ouvert-texte) 26%, transparent);
}
.etat[data-ouvert='oui'] .etat__point { background: var(--ouvert-point); }
/* Le point bat doucement seulement quand c'est ouvert, jamais si le
   visiteur a demandé moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  .etat[data-ouvert='oui'] .etat__point { animation: battement 2.4s ease-in-out infinite; }
}
@keyframes battement {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ouvert-point) 55%, transparent); }
  60%      { box-shadow: 0 0 0 0.32rem color-mix(in srgb, var(--ouvert-point) 0%, transparent); }
}
.etat--entete { display: none; }
@media (min-width: 1060px) { .etat--entete { display: inline-flex; } }

/* ---------------------------------------------------------------------
   12. CARTE
   Le plan est d'abord une IMAGE servie avec le site : la page reste
   entière hors ligne, derrière un filtre d'entreprise et en aperçu.
   Les tuiles ne sont chargées qu'à la demande, et la couche ne se
   révèle qu'une fois qu'elle a vraiment quelque chose à montrer.
   --------------------------------------------------------------------- */
.carte {
  position: relative;
  border: 1px solid var(--prune-700);
  border-radius: var(--rayon-doux);
  overflow: hidden;
  background: var(--prune-800);
}
.carte__plan {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.carte__couche {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: pan-x pan-y;
  cursor: grab;
  /* Transparente et effacée tant qu'aucune tuile n'est arrivée : le
     plan servi avec le site reste visible dessous. */
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.carte__couche[data-pret='oui'] { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .carte__couche { transition: none; }
}
.carte__couche[hidden] { display: none; }
.carte__couche[data-glisse='oui'] { cursor: grabbing; }
.carte__tuiles { position: absolute; inset: 0; }
/* Les tuiles sont insérées par le script. Elles sont visées par leur
   attribut, jamais par la balise `img`, et gardent leur taille exacte.
   Le traitement sombre est EXACTEMENT celui appliqué au plan servi
   avec le site (voir tools/generer-carte.mjs) : le passage de l'un à
   l'autre ne doit pas se voir. */
.carte__tuiles [data-tuile] {
  position: absolute;
  width: 256px;
  height: 256px;
  user-select: none;
  -webkit-user-drag: none;
  filter: grayscale(1) invert(1) brightness(0.96) contrast(1.02) sepia(0.38) hue-rotate(255deg) saturate(1.35);
}
.carte__repere {
  position: absolute;
  width: 2rem; height: 2rem;
  margin: -2rem 0 0 -1rem;   /* la pointe du repère tombe sur le point */
  color: var(--prune-100);
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.55));
  pointer-events: none;
}
.carte__outils {
  position: absolute;
  right: 0.6rem; bottom: 0.6rem;
  display: flex;
  gap: 0.35rem;
}
.carte__bouton {
  width: 2.1rem; height: 2.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--prune-900);
  border: 1px solid var(--prune-500);
  border-radius: var(--rayon);
  color: var(--creme);            /* 16,29:1 */
  font: 600 1.05rem/1 var(--courant);
  cursor: pointer;
}
.carte__bouton:hover { border-color: var(--prune-200); }
.carte__credit {
  position: absolute;
  left: 0; bottom: 0;
  margin: 0;
  padding: 0.2rem 0.5rem;
  background: color-mix(in srgb, var(--prune-900) 88%, transparent);
  font-size: 0.6875rem;
  color: var(--prune-200);        /* 10,33:1 */
}
.carte__credit a { color: inherit; }
.carte__pied { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.carte__alerte {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.85rem;
  background: var(--prune-800);
  border-left: 2px solid var(--prune-400);
  font-size: 0.875rem;
  color: var(--texte-courant);
}

/* ---------------------------------------------------------------------
   13. CONTACT
   --------------------------------------------------------------------- */
.contact__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}
.contact__canal { margin: 0; }
.contact__label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--libelle); margin: 0 0 0.4rem;
}
.contact__valeur { margin: 0; font-size: 1.125rem; }
.contact__valeur a { text-decoration-thickness: 1px; }

/* ---------------------------------------------------------------------
   14. PIED DE PAGE — le point le plus sombre du site.
   --------------------------------------------------------------------- */
.pied {
  background: var(--nuit);
  color: var(--prune-200);        /* 11,23:1 sur --nuit */
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.pied a { color: var(--creme); }  /* 17,72:1 sur --nuit */
.pied a:hover { color: var(--prune-300); }
.pied .adresse { color: var(--prune-200); }
.pied .adresse__batiment { color: var(--creme); }
.pied .horaires__ligne { border-bottom-color: color-mix(in srgb, var(--prune-300) 22%, transparent); }
.pied .horaires__jour { color: var(--prune-200); }
.pied .horaires__heures { color: var(--prune-300); }
.pied .horaires__ligne[data-aujourdhui='oui'] .horaires__jour,
.pied .horaires__ligne[data-aujourdhui='oui'] .horaires__heures { color: var(--creme); }
.pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2.5rem;
}
.pied__titre {
  font-family: var(--courant);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--prune-400);        /* 6,12:1 sur --nuit */
  margin: 0 0 0.9rem;
}
.pied__liste li + li { margin-top: 0.5rem; }
.pied__bas {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--prune-300) 26%, transparent);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-size: 0.8125rem;
  color: var(--prune-300);        /* 8,70:1 sur --nuit */
}

/* ---------------------------------------------------------------------
   15. PAGES DE TEXTE (mentions légales, confidentialité, 404)
   --------------------------------------------------------------------- */
.page-texte { padding-block: clamp(3rem, 7vw, 5rem); }
.page-texte__contenu { max-width: 68ch; }
.page-texte h1 { font-size: clamp(2.125rem, 4.5vw, 3rem); margin-bottom: 0.6em; }
.page-texte h2 {
  font-size: 1.4375rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--prune-700);
}
.page-texte h2:first-of-type { margin-top: 2rem; }
.page-texte p, .page-texte li { color: var(--texte-courant); }
.page-texte ul { padding-left: 1.2rem; }

.fiche { margin: 1.25rem 0 0; }
.fiche__ligne {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--filet);
}
.fiche__ligne:last-child { border-bottom: 0; }
.fiche__cle { margin: 0; font-size: 0.875rem; color: var(--texte-mention); }
.fiche__valeur { margin: 0; color: var(--texte); }
@media (max-width: 620px) {
  .fiche__ligne { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding-block: 0.7rem; }
}

.page-404 {
  display: grid;
  place-items: center;
  min-height: 62vh;
  text-align: center;
  padding-block: var(--rythme);
}
.page-404__code {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--libelle); margin: 0 0 1rem;
}
.page-404 h1 { font-size: clamp(2rem, 5vw, 3rem); }
.page-404 p { max-width: 46ch; margin-inline: auto; color: var(--texte-doux); }

/* ---------------------------------------------------------------------
   16. IMPRESSION
   Une feuille imprimée doit rester utile ET économe : le fond prune
   n'est pas imprimé, tout repasse en noir sur blanc.
   --------------------------------------------------------------------- */
@media print {
  :root, .section--claire {
    --fond: #FFFFFF; --surface: #FFFFFF;
    --texte: #000000; --texte-courant: #000000; --texte-doux: #222222;
    --texte-mention: #444444; --libelle: #444444;
    --lien: #000000; --filet: #999999; --filet-fort: #666666;
  }
  .entete, .bande, .etapes, .actions, .carte__outils, .carte__couche,
  .bascule-menu, .langue, .saut-contenu, .bande__commande { display: none !important; }
  html, body { background: #FFFFFF; color: #000000; font-size: 11pt; }
  .section, .hero { background: #FFFFFF; padding-block: 1.25rem; break-inside: avoid; }
  .pied { background: #FFFFFF; color: #000000; padding-block: 1rem; }
  .pied a, .pied__titre, .pied__bas, .pied .adresse, .pied .horaires__jour,
  .pied .horaires__heures { color: #000000; }
  h1, h2, h3 { color: #000000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; }
  .qr { border: 1px solid #000000; }
  .etat { border: 1px solid #000000; background: #FFFFFF; color: #000000; }
}

/* ---------------------------------------------------------------------
   NOTE SUR LES CONTRASTES
   Le fond de page est --prune-900 (#2B1526) ; la seule section claire
   est celle des conditions, sur --creme (#FBFAFB). Les deux jeux de
   rôles sont déclarés côte à côte en haut de ce fichier, avec leurs
   rapports mesurés. Le couple le plus juste du site est --gris-500 sur
   --creme, à 4,58:1, au-dessus du seuil AA de 4,5:1 ; sur fond prune,
   le plus juste est --prune-400 à 5,63:1. Toute couleur notée
   « DÉCOR » ne doit jamais porter de texte.
   Le contrôle « Contrastes » de tools/verifier-site.mjs revérifie tout
   cela sur la page rendue : une couleur changée à la main sans son
   rapport fait échouer les contrôles.
   --------------------------------------------------------------------- */