/* =====================================================================
   MOCHIMO — FEUILLE DE STYLE UNIQUE
   ---------------------------------------------------------------------
   Un seul univers visuel : fond crème, filets beige, accents dorés,
   pied de page sombre. Aucune couleur n'est laissée au hasard du
   navigateur : tout est peint explicitement.

   SOMMAIRE
     1. Palette et mesures
     2. Remise à zéro et bases
     3. Titres et texte
     4. Boutons et liens d'action
     5. En-tête et navigation
     6. Bandeau d'accroche
     7. Bande défilante (collection)
     8. Matières
     9. Conditions professionnelles
    10. Showroom : adresse, horaires, accès, carte
    11. Catalogue et QR code
    12. Pied de page
    13. Pages de texte (mentions, confidentialité, 404)
    14. Accessibilité : focus, lecteurs d'écran, moins d'animations
   ===================================================================== */

/* =====================================================================
   1. PALETTE ET MESURES
   ---------------------------------------------------------------------
   Le chiffre en commentaire est le RAPPORT DE CONTRASTE MESURÉ SUR
   BLANC (norme WCAG 2.1). Repères : 4,5 minimum pour du texte courant,
   3,0 pour du grand texte ou un élément d'interface.
   Ces valeurs sont recalculées par tools/verifier-site.mjs : si vous
   changez une couleur sans corriger le commentaire, les contrôles le
   signalent.
   ===================================================================== */
:root {
  /* --- Fonds ------------------------------------------------------- */
  --creme: #fbf8f3; /* contraste sur blanc  1,1 — fond principal */
  --beige: #f2eadd; /* contraste sur blanc  1,2 — sections alternées */
  --beige-bord: #e3d6c3; /* contraste sur blanc  1,4 — filets, séparateurs */
  --nuit: #17130e; /* contraste sur blanc 18,5 — pied de page */

  /* --- Textes ------------------------------------------------------ */
  --encre: #211c15; /* contraste sur blanc 16,9 — texte principal */
  --encre-douce: #57503f; /* contraste sur blanc  8,0 — texte secondaire */

  /* --- Accents dorés ----------------------------------------------- */
  --or-profond: #806224; /* contraste sur blanc  5,7 — liens, boutons, texte doré */
  --or: #b8873a; /* contraste sur blanc  3,2 — DÉCOR SEULEMENT.
                                  Jamais de texte courant dessus ni dedans.
                                  Sur le pied de page sombre il monte à 5,8. */

  /* --- États ------------------------------------------------------- */
  --vert-ouvert: #1f6b3f; /* contraste sur blanc  6,5 — pastille « ouvert » */
  --rouge-ferme: #8a2b20; /* contraste sur blanc  8,6 — pastille « fermé » */

  /* --- Mesures ----------------------------------------------------- */
  --largeur-max: 72rem;
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --rayon: 2px; /* angles à peine adoucis : sobriété */
  --rayon-photo: 3px;

  /* --- Rythme vertical --------------------------------------------- */
  --section-espace: clamp(3.5rem, 8vw, 6.5rem);

  /* --- Polices ------------------------------------------------------ */
  --titre: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Ombres discrètes --------------------------------------------- */
  --ombre-douce: 0 1px 2px rgba(33, 28, 21, 0.06),
    0 8px 24px rgba(33, 28, 21, 0.05);
}

/* =====================================================================
   2. REMISE À ZÉRO ET BASES
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* L'attribut `hidden` doit TOUJOURS l'emporter.
   Le navigateur le traduit par un simple `display: none` de sa feuille
   par défaut — que la moindre règle d'auteur posant un `display` écrase
   sans bruit. C'est ainsi qu'une étiquette « à compléter » masquée
   continuait d'occuper une ligne sous les boutons. */
[hidden] {
  display: none !important;
}

html {
  /* Compense la hauteur de l'en-tête collant quand on saute à une ancre :
     sans cela, le titre visé se retrouve caché sous l'en-tête. */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1rem;
  line-height: 1.65;
  /* Ceinture et bretelles contre le débordement horizontal en 390 px :
     aucun élément ne peut élargir la page. */
  overflow-x: hidden;
}

/* ATTENTION — il n'existe volontairement AUCUNE règle `img { … }`
   générale dans cette feuille. Une règle large attrape aussi les images
   créées par le script (les tuiles de la carte) et les déforme. Chaque
   image est visée par son attribut : [data-photo], [data-qr], [data-plan],
   [data-tuile]. Si vous ajoutez un type d'image, donnez-lui son attribut
   et sa règle, ne généralisez pas. */

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

.section {
  padding-block: var(--section-espace);
}

.section--beige {
  background: var(--beige);
}

/* Filet doré très fin, utilisé comme séparation entre deux sections. */
.section--filet {
  border-top: 1px solid var(--beige-bord);
}

/* =====================================================================
   3. TITRES ET TEXTE
   ===================================================================== */
h1,
h2,
h3 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  /* Évite qu'un mot long (« intracommunautaire ») déborde en 390 px. */
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}

p {
  margin: 0;
}

/* Surtitre en petites capitales dorées : annonce la section sans crier. */
.surtitre {
  font-family: var(--texte);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-profond);
  margin: 0 0 0.9rem;
}

.chapeau {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  color: var(--encre-douce);
  max-width: 46ch;
  margin-top: 1.1rem;
}

.entete-section {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* =====================================================================
   4. BOUTONS ET LIENS D'ACTION
   ===================================================================== */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-family: var(--texte);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease;
}

/* Bouton principal : blanc sur doré profond — contraste mesuré 5,7. */
.bouton--principal {
  background: var(--or-profond);
  color: #ffffff;
  border-color: var(--or-profond);
}

.bouton--principal:hover,
.bouton--principal:focus-visible {
  background: #6a501d; /* contraste sur blanc 7,6 — assombri au survol */
  border-color: #6a501d;
}

/* Bouton secondaire : encre sur crème, filet encre. */
.bouton--secondaire {
  background: transparent;
  color: var(--encre);
  border-color: var(--encre);
}

.bouton--secondaire:hover,
.bouton--secondaire:focus-visible {
  background: var(--encre);
  color: var(--creme);
}

/* Bouton dont la donnée manque encore dans config.js : visiblement
   inactif plutôt que pointant vers un lien mort. */
.bouton[aria-disabled="true"] {
  background: var(--beige-bord);
  border-color: var(--beige-bord);
  color: var(--encre-douce);
  cursor: not-allowed;
  text-decoration: none;
}

.bouton__icone {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

/* Étiquette « À compléter » posée près d'une action incomplète. */
.manquant {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.2rem 0.55rem;
  border: 1px dashed var(--rouge-ferme);
  border-radius: var(--rayon);
  color: var(--rouge-ferme); /* contraste sur blanc 8,6 (le fond de cette étiquette est blanc) */
  background: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Lien de texte courant. */
a {
  color: var(--or-profond);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: #6a501d;
}

/* =====================================================================
   5. EN-TÊTE ET NAVIGATION
   ===================================================================== */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 248, 243, 0.92);
  border-bottom: 1px solid var(--beige-bord);
  backdrop-filter: blur(8px);
}

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

.marque {
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--encre);
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}

.marque:hover {
  color: var(--or-profond);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
}

.nav__lien {
  color: var(--encre-douce);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.nav__lien:hover,
.nav__lien:focus-visible {
  color: var(--encre);
  border-bottom-color: var(--or);
}

/* Bouton de langue : la langue affichée est celle vers laquelle on va. */
.langue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: transparent;
  border: 1px solid var(--beige-bord);
  border-radius: var(--rayon);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
}

.langue:hover,
.langue:focus-visible {
  border-color: var(--or-profond);
  color: var(--or-profond);
}

.langue__globe {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Sous 52 rem, la navigation passe sous la barre de marque. */
@media (max-width: 52rem) {
  .entete__barre {
    flex-wrap: wrap;
    padding-block: 0.75rem;
    min-height: 0;
  }

  .nav {
    order: 3;
    width: 100%;
    gap: 1.1rem;
    padding-bottom: 0.35rem;
    /* Défilement horizontal DANS la barre, pour ne pas élargir la page. */
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }
}

/* =====================================================================
   6. BANDEAU D'ACCROCHE
   ===================================================================== */
.accroche {
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem);
  position: relative;
}

/* Voile doré très pâle, purement décoratif, derrière l'accroche. */
.accroche::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    62rem 32rem at 78% -10%,
    rgba(184, 135, 58, 0.14),
    transparent 62%
  );
  pointer-events: none;
}

.accroche__contenu {
  position: relative;
  max-width: 52rem;
}

/* Le titre anglais est plus long que le français : cette réserve de
   largeur l'empêche de partir sur une troisième ligne en grand écran. */
.accroche__titre {
  max-width: 18ch;
}

.accroche .chapeau {
  max-width: 44ch;
}

.pastille-pro {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--or);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--or-profond); /* contraste sur crème 5,4 */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.pastille-pro::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--or);
}

/* =====================================================================
   7. BANDE DÉFILANTE (COLLECTION)
   ---------------------------------------------------------------------
   Deux pistes identiques se suivent. L'animation déplace l'ensemble de
   -50 % de sa largeur : à cet instant précis, la seconde piste occupe
   exactement la position de départ de la première, et la boucle se
   referme sans saut visible. Toute autre valeur ferait sauter la bande.
   ===================================================================== */
.bande {
  position: relative;
  /* La bande est posée HORS du conteneur centré, dans la section : elle
     occupe donc naturellement toute la largeur. On évite ainsi `100vw`,
     qui compte la barre de défilement et provoque un débordement
     horizontal de quelques pixels sur les navigateurs de bureau. */
  width: 100%;
  padding-block: 0.5rem;
  /* Empêche la bande d'ajouter une barre de défilement horizontale. */
  overflow: hidden;
  /* Estompe les deux bords : les photos entrent et sortent en douceur. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}

.bande__piste {
  display: flex;
  width: max-content;
  gap: 1rem;
  /* La durée est posée par le script, proportionnellement au nombre de
     photos, pour que la vitesse reste constante quel qu'en soit le nombre. */
  animation: bande-defile var(--bande-duree, 60s) linear infinite;
  will-change: transform;
}

@keyframes bande-defile {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* -50 % : la piste dupliquée prend la place de l'originale. */
    transform: translate3d(-50%, 0, 0);
  }
}

/* Pause au survol ET au focus clavier : une personne qui tabule dans la
   bande doit pouvoir s'arrêter sur une photo. */
.bande:hover .bande__piste,
.bande:focus-within .bande__piste,
.bande[data-en-pause="true"] .bande__piste {
  animation-play-state: paused;
}

.bande__element {
  flex: none;
  margin: 0;
  width: clamp(12rem, 24vw, 17rem);
}

/* Visée par attribut, jamais par la balise `img`. */
.bande__element [data-photo] {
  display: block;
  width: 100%;
  /* `height: auto` est INDISPENSABLE : sans lui, les attributs width et
     height du HTML l'emportent sur aspect-ratio et écrasent la photo. */
  height: auto;
  /* Format carré : c'est celui des photos de catalogue, qui montrent
     toute une gamme de coloris étalée. Les recadrer en portrait
     couperait les modèles des bords. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--rayon-photo);
  background: var(--beige-bord);
  border: 1px solid var(--beige-bord);
}

.bande__legende {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--encre-douce);
  letter-spacing: 0.02em;
}

.bande-commandes {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

.bande-pause {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: transparent;
  border: 1px solid var(--beige-bord);
  border-radius: var(--rayon);
  color: var(--encre-douce);
  font-family: var(--texte);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
}

.bande-pause:hover,
.bande-pause:focus-visible {
  border-color: var(--or-profond);
  color: var(--or-profond);
}

.bande-pause__icone {
  width: 0.8em;
  height: 0.8em;
  fill: currentColor;
}

/* =====================================================================
   8. MATIÈRES
   ===================================================================== */
.matieres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.matiere {
  padding: 1.75rem;
  background: #ffffff;
  border: 1px solid var(--beige-bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
}

.matiere__nom {
  font-family: var(--titre);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--encre);
}

.matiere__filet {
  width: 2.5rem;
  height: 2px;
  background: var(--or);
  border: 0;
  margin: 0.9rem 0 0;
}

/* =====================================================================
   9. CONDITIONS PROFESSIONNELLES
   ---------------------------------------------------------------------
   Des paires libellé / valeur, jamais des phrases fabriquées en collant
   un texte et un chiffre : le libellé et la valeur restent séparés.
   ===================================================================== */
.conditions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0;
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--beige-bord);
}

.condition {
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-bottom: 1px solid var(--beige-bord);
}

.condition__libelle {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce); /* contraste sur beige 6,7 */
  margin: 0;
}

.condition__valeur {
  margin: 0.5rem 0 0;
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--encre);
  line-height: 1.25;
}

/* Valeur composée d'une liste (transporteurs, paiements) : plus petite,
   en texte courant, car elle contient plusieurs éléments. */
.condition__valeur--liste {
  font-family: var(--texte);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
}

.note {
  margin-top: 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--or);
  color: var(--encre-douce);
  font-size: 0.9rem;
  max-width: 60ch;
}

/* =====================================================================
   10. SHOWROOM : ADRESSE, HORAIRES, ACCÈS, CARTE
   ===================================================================== */
.showroom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 60rem) {
  .showroom {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bloc + .bloc {
  margin-top: 2.25rem;
}

.bloc__titre {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 0.75rem;
}

/* --- Adresse ------------------------------------------------------- */
/* Chaque ligne d'adresse est un élément de bloc à part entière. Le
   retour à la ligne est donc STRUCTUREL : il tient partout, y compris
   dans le pied de page. C'est ce qui empêche « Lot n° 12 8 rue de la
   Haie Coq » de se retrouver collé sur une seule ligne. */
.adresse {
  font-style: normal;
  line-height: 1.55;
}

.adresse__ligne {
  display: block;
}

.adresse__ligne--centre {
  font-weight: 600;
  color: var(--encre);
}

.adresse__ligne--complement {
  color: var(--or-profond);
  font-weight: 600;
}

/* --- Autres points de vente ----------------------------------------- */
/* Un filet doré sépare la seconde adresse de la première : deux adresses
   qui se suivent sans marque de séparation se lisent comme une seule. */
[data-autres-points] .bloc {
  padding-top: 1.75rem;
  border-top: 1px solid var(--beige-bord);
}

.point-vente__enseigne {
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--encre);
  margin-bottom: 0.35rem;
}

.pied__enseigne {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(226, 214, 195, 0.18);
  font-weight: 600;
  color: #ffffff;
  font-size: 0.92rem;
}

/* --- Horaires ------------------------------------------------------ */
.etat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}

.etat__pastille {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}

.etat[data-ouvert="true"] {
  color: var(--vert-ouvert); /* contraste sur son fond #eaf3ed : 5,7 */
  background: #eaf3ed;
  border-color: #c5ddcd;
}

.etat[data-ouvert="false"] {
  color: var(--rouge-ferme); /* contraste sur son fond #f7ecea : 7,4 */
  background: #f7ecea;
  border-color: #e2c7c3;
}

.etat__detail {
  font-weight: 500;
  color: var(--encre-douce);
}

.horaires {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.horaires th,
.horaires td {
  padding: 0.5rem 0;
  text-align: left;
  border-bottom: 1px solid var(--beige-bord);
  font-weight: 400;
  color: var(--encre-douce);
}

.horaires th {
  font-weight: 500;
  color: var(--encre);
}

.horaires td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* La ligne du jour courant est mise en évidence. */
.horaires tr[data-aujourdhui="true"] th,
.horaires tr[data-aujourdhui="true"] td {
  color: var(--encre);
  font-weight: 600;
}

.horaires__note {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--encre-douce);
}

/* --- Accès --------------------------------------------------------- */
.acces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  color: var(--encre-douce);
  font-size: 0.95rem;
}

.acces li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.acces__puce {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  margin-top: 0.25em;
  fill: var(--or-profond);
}

/* --- Carte --------------------------------------------------------- */
.carte {
  position: relative;
  border: 1px solid var(--beige-bord);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--beige);
  box-shadow: var(--ombre-douce);
}

.carte__cadre {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  /* Repère de position pour les tuiles ajoutées par le script. */
  overflow: hidden;
  touch-action: pan-y; /* le doigt fait toujours défiler la page */
}

/* L'image de plan livrée avec le site : visible tout de suite, valable
   hors ligne, derrière un filtre d'entreprise et dans un aperçu. */
.carte__plan[data-plan] {
  display: block;
  width: 100%;
  height: auto; /* même piège que pour les photos */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Les tuiles ajoutées par le script ont leur propre règle. Aucune règle
   générale sur `img` ne vient les étirer. */
.carte__tuile[data-tuile] {
  position: absolute;
  width: 256px;
  height: 256px;
  /* Ni `max-width` ni `height: auto` ici : une tuile fait exactement
     256 × 256 px, toute souplesse la déformerait. */
  user-select: none;
  -webkit-user-drag: none;
}

.carte__couche-tuiles {
  position: absolute;
  inset: 0;
  cursor: grab;
}

.carte__couche-tuiles[data-glisse="true"] {
  cursor: grabbing;
}

/* Repère du showroom. La rotation est écrite DANS le même `transform`,
   à la suite du déplacement. Écrite à part dans la propriété `rotate`,
   elle s'appliquerait AVANT `transform` : le déplacement serait alors
   calculé dans un repère incliné, et le repère atterrirait à côté. */
.carte__repere {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: 0;
  transform: translate(-50%, -100%) rotate(-45deg);
  transform-origin: center;
  border-radius: 50% 50% 50% 0;
  background: var(--or-profond);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(23, 19, 14, 0.35);
  pointer-events: none;
}

/* Repère d'un point de vente secondaire : même dessin, plus discret.
   Deux repères identiques laisseraient croire à deux showrooms
   équivalents. */
.carte__repere--autre {
  width: 20px;
  height: 20px;
  background: var(--or);
}

.carte__repere--autre::after {
  width: 6px;
  height: 6px;
}

.carte__repere::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  /* Le point central est remis d'aplomb : on annule la rotation du
     parent après l'avoir centré, toujours dans un seul `transform`. */
  transform: translate(-50%, -50%) rotate(45deg);
  background: #ffffff;
  border-radius: 50%;
}

.carte__barre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border-top: 1px solid var(--beige-bord);
  font-size: 0.78rem;
  color: var(--encre-douce);
}

.carte__activer {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  background: transparent;
  border: 1px solid var(--encre);
  border-radius: var(--rayon);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.carte__activer:hover,
.carte__activer:focus-visible {
  background: var(--encre);
  color: var(--creme);
}

.carte__credit {
  margin-left: auto;
  font-size: 0.72rem;
}

.carte__credit a {
  color: var(--encre-douce);
}

/* Commandes de zoom, visibles seulement une fois la carte activée. */
.carte__zoom {
  position: absolute;
  right: 0.6rem;
  top: 0.6rem;
  display: none;
  flex-direction: column;
  gap: 0.35rem;
}

.carte[data-active="true"] .carte__zoom {
  display: flex;
}

.carte__zoom button {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--beige-bord);
  border-radius: var(--rayon);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.carte__zoom button:hover,
.carte__zoom button:focus-visible {
  border-color: var(--or-profond);
  color: var(--or-profond);
}

/* Message affiché si les fonds de plan ne répondent pas. */
.carte__avertissement {
  padding: 0.6rem 1rem;
  background: #f7ecea;
  border-top: 1px solid #e2c7c3;
  color: var(--rouge-ferme);
  font-size: 0.78rem;
}

/* =====================================================================
   11. CATALOGUE ET QR CODE
   ===================================================================== */
.catalogue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: center;
}

@media (max-width: 46rem) {
  .catalogue {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}

.qr {
  padding: 1.1rem;
  background: #ffffff;
  border: 1px solid var(--beige-bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
  line-height: 0;
}

/* Le QR est visé par son attribut, comme les autres images. */
.qr [data-qr] {
  display: block;
  width: clamp(9rem, 26vw, 12rem);
  height: auto;
  aspect-ratio: 1 / 1;
}

.qr__provisoire {
  display: block;
  margin-top: 0.85rem;
  max-width: 12rem;
  color: var(--rouge-ferme);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
}

/* =====================================================================
   12. PIED DE PAGE
   ===================================================================== */
.pied {
  background: var(--nuit);
  color: var(--beige); /* contraste sur nuit 15,5 */
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 2.5rem;
}

.pied__titre {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or); /* contraste sur nuit 5,8 */
  margin: 0 0 0.9rem;
}

.pied a {
  color: var(--beige);
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 214, 195, 0.3);
}

.pied a:hover,
.pied a:focus-visible {
  color: #ffffff;
  border-bottom-color: var(--or);
}

.pied__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.92rem;
}

.pied .adresse {
  font-size: 0.92rem;
  color: var(--beige);
}

.pied .adresse__ligne--complement {
  color: var(--or); /* contraste sur nuit 5,8 */
}

.pied .adresse__ligne--centre {
  color: #ffffff;
}

.pied__bas {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(226, 214, 195, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  font-size: 0.8rem;
  color: #cfc4b1; /* contraste sur nuit 10,7 */
}

.pied__rappel-pro {
  margin-left: auto;
  color: var(--or);
}

@media (max-width: 46rem) {
  .pied__rappel-pro {
    margin-left: 0;
  }
}

/* =====================================================================
   13. PAGES DE TEXTE (MENTIONS, CONFIDENTIALITÉ, 404)
   ===================================================================== */
.page-texte {
  padding-block: clamp(3rem, 7vw, 5rem);
  min-height: 60vh;
}

.page-texte__contenu {
  max-width: 46rem;
}

.page-texte h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--beige-bord);
}

.page-texte h2:first-of-type {
  margin-top: 2.5rem;
}

.page-texte p {
  margin-top: 1rem;
  color: var(--encre-douce);
}

.page-texte .chapeau {
  max-width: none;
}

/* Fiche d'identité légale : libellé à gauche, valeur à droite. */
.fiche {
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: minmax(11rem, auto) minmax(0, 1fr);
  gap: 0;
}

@media (max-width: 40rem) {
  .fiche {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fiche__libelle {
  padding: 0.7rem 1.5rem 0.7rem 0;
  border-bottom: 1px solid var(--beige-bord);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--encre-douce);
}

.fiche__valeur {
  margin: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--beige-bord);
  color: var(--encre);
  overflow-wrap: break-word;
}

@media (max-width: 40rem) {
  .fiche__libelle {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .fiche__valeur {
    padding-top: 0.15rem;
  }
}

.fiche__valeur .adresse__ligne {
  display: block;
}

/* Page 404 : centrée, sobre. */
.erreur {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 60vh;
  padding-block: 4rem;
}

.erreur__code {
  font-family: var(--titre);
  font-size: clamp(5rem, 18vw, 9rem);
  line-height: 1;
  color: var(--or);
  margin: 0;
}

.erreur .chapeau {
  margin-inline: auto;
}

.erreur .actions {
  justify-content: center;
}

/* =====================================================================
   14. ACCESSIBILITÉ
   ===================================================================== */

/* Lien d'évitement : caché jusqu'à ce qu'il reçoive le focus clavier. */
.evitement {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1.2rem;
  background: var(--encre);
  color: var(--creme);
  border-radius: var(--rayon);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: top 0.15s ease;
}

.evitement:focus {
  top: 0.5rem;
  color: var(--creme);
}

/* Anneau de focus visible partout, y compris sur fond sombre. */
:focus-visible {
  outline: 2px solid var(--or-profond);
  outline-offset: 3px;
  border-radius: 1px;
}

.pied :focus-visible,
.bouton--principal:focus-visible {
  outline-color: var(--or);
}

/* Réservé aux lecteurs d'écran. */
.lecteur-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Moins d'animations -------------------------------------------- */
/* Quand le système demande à réduire les animations, la bande s'ARRÊTE
   franchement — elle ne ralentit pas. Le contenu reste entièrement
   lisible et atteignable, en défilement manuel. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .bande__piste {
    animation: none !important;
    transform: none !important;
  }

  /* La bande devient une zone que l'on fait défiler soi-même. */
  .bande {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .bande-commandes {
    display: none;
  }
}

/* --- Impression ----------------------------------------------------- */
@media print {
  .entete,
  .bande,
  .bande-commandes,
  .carte__barre,
  .actions {
    display: none;
  }

  body {
    background: #ffffff;
    color: #000000;
  }
}