/* =================================================================
   Glacier / Crêperie : feuille de style (CSS3 vanilla), gabarit « glacier »
   (16e gabarit, chantier Glacier / Crêperie du 30/10/2026).
   Référence visuelle CHOISIE par Charles, telle quelle :
   _maquettes/glacier-couleurs (« Une couleur par parfum »). L'accueil
   plein cadre et l'en-tête prennent la couleur du parfum choisi (fond,
   textes, boule du cornet, mot géant détouré) ; le reste de la page reste
   sur papier, blanc et encre. Plus Jakarta Sans 800 pour les titres et le
   texte, Instrument Serif italique pour les mots en contrepoint.

   PALETTE PAR PARFUM, LISTE FERMÉE (accent_fixed: true dans
   bot/sectors/_templates.json, comme bien-etre et cafe) : les quadruplets
   sont dans js/main.js (PARFUMS) et sur les radios de l'accueil. main.js
   copie le parfum choisi dans les variables de :root ci-dessous :
     --fond  : fond de l'accueil et de l'en-tête
     --encre : texte posé sur --fond, fond des boutons pleins
     --boule : boule, garniture, pastille de la marque (décor)
     --ombre : dessous de la boule, coulures (décor)
   Sans script, ces variables gardent le PREMIER parfum de la variante
   (framboise pour le glacier, caramel pour la crêperie, chocolat pour la
   gaufrerie, plus bas).
   --accent n'est pas défini dans le gabarit : la pastille de la marque
   prend la boule du parfum ; --accent posé par produce.py --accent (à la
   demande du client) la fixe à sa couleur, et elle seule.
   Contraste mesuré (WCAG) : l'encre de chaque parfum fait de 7,99:1 à
   10,94:1 sur son fond ; tout texte des sections fixes atteint 4,5:1.

   Variante : body[data-variante="glacier"|"creperie"|"gaufrerie"] ; un
   bloc [data-variante-seule] nomme la ou les variantes qui le montrent
   (« creperie gaufrerie ») ; les autres le masquent ici, le rendu du bot
   le retire.
   ================================================================= */

/* ---------- DESIGN TOKENS ---------- */
:root {
  color-scheme: light;

  /* Fonds et textes fixes */
  --papier:     #FBF8F4;   /* fond de page */
  --blanc:      #FFFFFF;
  --encre-base: #1E1A1D;   /* texte courant, sections sombres */
  --gris:       #6B6468;   /* texte second (5,3:1 sur papier, 5,7:1 sur blanc) */
  --ligne:      #ECE5DE;   /* filets */
  --bord:       #8C8488;   /* bord des champs (3,6:1 sur blanc) */
  --sombre-ligne: #3A3337; /* filets sur encre */
  --gris-clair: #B4ABB0;   /* texte second sur encre (7,5:1) */
  --ivoire-doux:#D6CED2;   /* texte sur encre (11,5:1) */
  --vert:       #3E8E5E;   /* pastille « ouvert » (décor, jamais du texte) */
  --danger:     #A3261E;

  /* Parfum courant : framboise (premier parfum du glacier) sans script */
  --fond:  #F6D3D8;
  --encre: #5B1630;
  --boule: #E2627D;
  --ombre: #C3415E;

  /* Typo */
  --sans:  "Plus Jakarta Sans", system-ui, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Mise en page */
  --container: 1240px;
  --gutter: 28px;
  --sec: 128px;            /* espacement des sections (84 px sur téléphone) */
  --header-h: 88px;
  --callbar-h: 68px;
  --tt-bas: 22px;          /* retrait du bas du bouton « haut de page » */

  /* Transitions */
  --t-fast:    .18s cubic-bezier(.4, 0, .2, 1);
  --t-med:     .32s cubic-bezier(.4, 0, .2, 1);
  --t-slow:    .7s cubic-bezier(.16, 1, .3, 1);
  --t-parfum:  .6s ease;
}

/* Crêperie sans script : premier parfum de la variante (caramel). */
:root:has(> body[data-variante="creperie"]) {
  --fond:  #F4DDBF;
  --encre: #4F2E0C;
  --boule: #D89443;
  --ombre: #B8752A;
}

/* Gaufrerie sans script : premier parfum de la variante (chocolat). */
:root:has(> body[data-variante="gaufrerie"]) {
  --fond:  #E9D8CC;
  --encre: #3A1F14;
  --boule: #6E4330;
  --ombre: #4F2D1F;
}

/* ---------- VARIANTE ---------- */
body:not([data-variante="creperie"]):not([data-variante="gaufrerie"]) [data-variante-seule]:not([data-variante-seule~="glacier"]),
body[data-variante="creperie"] [data-variante-seule]:not([data-variante-seule~="creperie"]),
body[data-variante="gaufrerie"] [data-variante-seule]:not([data-variante-seule~="gaufrerie"]) { display: none !important; }

/* Dessin de la crêperie : body[data-dessin-crepe="pile"|"assiette"], la pile par défaut (choix
   de Charles du 30/10/2026), l'assiette en repli pour un client qui la préfère. */
body:not([data-dessin-crepe="assiette"]) .visuel [data-dessin="assiette"],
body[data-dessin-crepe="assiette"] .visuel [data-dessin="pile"] { display: none !important; }

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* Aucun overflow sur <html> : l'en-tête est STICKY (piège du 18/09/2026, un overflow sur html
   ferait du body le conteneur de défilement et l'en-tête partirait avec la page). */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--papier);
  color: var(--encre-base);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
address { font-style: normal; }

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

:focus-visible { outline: 2px solid var(--encre-base); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- MISE EN PAGE ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.petit { font: 700 12px/1.25 var(--sans); letter-spacing: .16em; text-transform: uppercase; }

.sec { padding-block: var(--sec); }

/* En-tête de section : sur-titre en petites capitales grises, titre 800, chapeau à droite. */
.sec-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.sec-hd__oeil { display: block; color: var(--gris); margin-bottom: 16px; }
.sec-hd p { max-width: 25rem; font: 500 16.5px/1.65 var(--sans); color: var(--gris); }

h1, h2, h3 { font-weight: 800; }
h2 { font: 800 clamp(40px, 5vw, 76px)/.98 var(--sans); letter-spacing: -.05em; overflow-wrap: break-word; }
h1 em, h2 em, .gateau b em { font: italic 400 1.08em/1 var(--serif); letter-spacing: -.02em; }

.kicker { display: block; font: 700 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- LIEN D'ÉVITEMENT ---------- */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  background: var(--encre-base);
  color: var(--blanc);
  padding: .75rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; }

/* ---------- BOUTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  font: 700 15px/1.15 var(--sans);
  white-space: nowrap;
  transition: background var(--t-parfum), color var(--t-parfum), border-color var(--t-parfum), transform var(--t-fast);
}
.btn svg { flex-shrink: 0; }
.btn:hover { transform: translateY(-1px); }
/* Boutons qui suivent le parfum (encre sur fond, fond sur encre : même rapport de contraste). */
.btn--plein { background: var(--encre); color: var(--fond); }
.btn--ligne { border-color: var(--encre); color: var(--encre); }
/* Boutons fixes, sur les sections sombres. */
.btn--blanc { background: var(--blanc); color: var(--encre-base); }
.btn--clair { border-color: var(--blanc); color: var(--blanc); }
.btn--sm { padding: 12px 20px; font-size: 14px; }
/* Bouton pleine largeur : retour à la ligne permis et centré (leçon du garage, 22/09/2026). */
.btn--block { width: 100%; white-space: normal; text-align: center; }

/* ---------- EN-TÊTE (fond du parfum, collant) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fond);
  color: var(--encre);
  transition: background-color var(--t-parfum), color var(--t-parfum), box-shadow var(--t-med);
}
.site-header.is-scrolled { box-shadow: 0 12px 30px -20px rgba(30, 26, 29, .45); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}

/* Marque : le nom en minuscules 800 + pastille ronde de la couleur de la boule. Un nom long de
   démo (classe brand--long posée par main.js au-delà de 14 caractères) se resserre et passe sur
   deux lignes au plus. */
.brand {
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  text-decoration: none;
  color: var(--encre);
}
.brand__nom {
  font: 800 30px/1.1 var(--sans);
  letter-spacing: -.04em;
  text-transform: lowercase;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  padding-block: .04em;
}
.brand i, .footer__logo i, .site-header .brand__nom::after {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent, var(--boule));
  transition: background-color var(--t-parfum);
}
/* Dans l'en-tête, la pastille suit le DERNIER mot du nom, sur une ou deux lignes (relecture finale du 31/10/2026,
   C3 : sur deux lignes, la boîte du nom garde toute sa largeur et un i posé après elle se détachait du texte) :
   elle est dessinée au bout du texte (::after, collée au mot) ; le i du gabarit y reste, masqué. Sa place (3 +
   11 px) est réservée à droite du nom, comme avant ; sa marge négative la rend sans largeur pour la mise en
   lignes : elle ne passe jamais seule à la ligne, et l'ajustement du nom (main.js) reste celui d'avant. */
.site-header .brand i { display: none; }
.site-header .brand__nom { padding-right: 14px; }
.site-header .brand__nom::after { content: ""; display: inline-block; margin-left: 3px; margin-right: -14px; }
.brand--long { align-items: center; }
.brand--long .brand__nom { font-size: 22px; letter-spacing: -.02em; }

/* Navigation : écart FIXE (en-têtes du 18/09/2026), libellés insécables. */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 32px; }
.nav__link {
  text-decoration: none;
  font: 600 14.5px/1 var(--sans);
  color: var(--encre);
  white-space: nowrap;
  padding-block: 8px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-fast);
}
.nav__link:hover { border-bottom-color: currentColor; }

/* Éléments du menu mobile, masqués en bureau */
.nav__phone, .nav__cta--mobile { display: none; }
/* Spécificité 0,2,0 : bat la règle .lang-switch { display: inline-flex } plus bas */
.nav .lang-switch--mobile { display: none; }
/* Voile du tiroir tablette : masqué partout par défaut, affiché de 601 px au seuil du burger. */
.nav-scrim { display: none; }

.header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* ---------- SÉLECTEUR DE LANGUE ---------- */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
}
.lang-switch__btn {
  font: 700 12px/1 var(--sans);
  letter-spacing: .08em;
  color: var(--encre);
  padding: 8px 10px;
  border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-switch__btn:hover { background: rgba(255, 255, 255, .8); }
.lang-switch__btn.active { background: var(--encre); color: var(--fond); }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--encre);
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- ACCUEIL EN COULEUR DU PARFUM ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--fond);
  color: var(--encre);
  transition: background-color var(--t-parfum), color var(--t-parfum);
}
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 32px;
  align-items: center;
  min-height: calc(min(92vh, 860px) - var(--header-h));
  padding-block: 40px 128px;
}
.hero__txt { min-width: 0; }
.hero__title {
  margin-top: 24px;
  font: 800 clamp(52px, 6.6vw, 104px)/.92 var(--sans);
  letter-spacing: -.055em;
  overflow-wrap: break-word;
}
/* L'italique du titre part toujours à la ligne (« Chaque parfum / a sa couleur. », maquette). */
.hero__title em { display: block; padding-bottom: .04em; }
.hero__lead { margin-top: 26px; max-width: 31rem; font: 500 18px/1.65 var(--sans); }

/* « Essayez un parfum » : pastilles-radios (input.choix masqué, label visible). */
.essai { margin-top: 34px; }
.essai__titre { display: block; margin-bottom: 12px; font: 700 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.pastilles { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.choix { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.pastilles label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 16px 9px 10px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, .45);
  font: 700 14px/1.1 var(--sans);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.pastilles label i {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.pastilles label:hover { background: rgba(255, 255, 255, .75); }
.choix:checked + label { background: var(--blanc); border-color: var(--encre); }
.choix:focus-visible + label { outline: 2px solid var(--encre); outline-offset: 3px; }

.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }

/* Dessin : cornet et boule (glacier), pile de crêpes (crêperie) ou gaufre et sa boule (gaufrerie),
   couleurs du parfum. */
.visuel { position: relative; display: grid; place-items: center; min-width: 0; }
.visuel svg { width: min(100%, 430px); height: auto; overflow: visible; }
.flotte { animation: flotte 5s ease-in-out infinite; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.boule { fill: var(--boule); transition: fill var(--t-parfum); }
.ombre { fill: var(--ombre); transition: fill var(--t-parfum); }
.anneau { stroke: var(--encre); transition: stroke var(--t-parfum); }

/* Carte « Nouveau cette semaine » (masquable). */
.nouveau {
  position: absolute;
  left: 0;
  bottom: 12%;
  max-width: 220px;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--blanc);
  color: var(--encre-base);
  box-shadow: 0 24px 50px -24px rgba(30, 26, 29, .35);
}
.nouveau small { display: block; font: 700 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.nouveau b { display: block; margin-top: 8px; font: italic 400 24px/1.05 var(--serif); overflow-wrap: break-word; }
/* Prix et description d'une nouveauté ou d'un spécial réels (posés par le bot, jamais sur l'exemple). */
.nouveau__prix { display: block; margin-top: 8px; font: 700 15px/1.2 var(--sans); }
.nouveau__desc { display: block; margin-top: 6px; font: 400 13.5px/1.4 var(--sans); color: var(--gris); overflow-wrap: break-word; }
/* Carte « Nouveau » dans le flux, sous le dessin, dans la colonne du visuel (main.js, placerNouveau : flottante,
   elle recouvrirait une forme du dessin). */
.nouveau.nouveau--flux { position: static; max-width: min(100%, 430px); margin-top: 16px; }

/* Mot géant détouré : nom du parfum dans la langue courante (écrit par main.js), centré même
   quand il déborde (flex), coupé par l'accueil (overflow: hidden). Décor : aria-hidden. */
.mot {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -.18em;
  display: flex;
  justify-content: center;
  font: 800 clamp(110px, 17vw, 270px)/1 var(--sans);
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 2px var(--encre);
  opacity: .14;
  white-space: nowrap;
  pointer-events: none;
  transition: -webkit-text-stroke-color var(--t-parfum);
}

/* ---------- LA CARTE, EN LISTES À PASTILLES ---------- */
.carte__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; margin-top: 64px; }
.col { min-width: 0; }
.col h3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 16px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--encre-base);
  font: 800 26px/1.1 var(--sans);
  letter-spacing: -.03em;
}
.col h3 small { font: 600 13px/1.3 var(--sans); color: var(--gris); letter-spacing: 0; }
.prixboules { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 6px; }
.prixboules > span {
  padding: 9px 14px;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: var(--blanc);
  font: 600 13.5px/1.2 var(--sans);
}
.prixboules b { font-weight: 800; white-space: nowrap; }
.lignes li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--ligne);
}
.lignes li i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c);
  transform: translateY(2px);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.lignes b { font: 700 17px/1.3 var(--sans); letter-spacing: -.01em; overflow-wrap: break-word; }
.lignes small { grid-column: 2; font: 500 14px/1.45 var(--sans); color: var(--gris); }
.lignes .pr { font: 700 15.5px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag {
  display: inline-block;
  margin-left: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #EEF2E3;
  color: #4C5E2C;
  font: 700 10.5px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.tag--nv { background: #FBE3E8; color: #8A2140; }

/* ---------- LES CRÉATIONS ---------- */
.creations { padding-top: 0; }
.creations__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 60px; }
.crea {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 22px 22px 24px;
  border-radius: 28px;
  background: var(--f);
  color: var(--e);
}
.crea svg { width: 100%; height: auto; margin-bottom: 10px; }
.crea b { font: 800 22px/1.1 var(--sans); letter-spacing: -.03em; overflow-wrap: break-word; }
.crea span { font: 500 14.5px/1.5 var(--sans); }
.crea .pr { margin-top: 8px; font: italic 400 26px/1 var(--serif); }

/* ---------- LE SALON EN PHOTOS (absent sans vraies photos) ---------- */
.photos[hidden] { display: none; }
.photos { padding-top: 0; }
.photos__grille {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.photo { min-width: 0; }
.photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; background: var(--ligne); }

/* ---------- LE SALON ---------- */
.salon { background: var(--blanc); }
/* Atouts posés d'après la fiche : autant de cartes que d'atouts gardés, qui remplissent la ligne. */
.atouts { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 56px; }
.atout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1 1 300px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--ligne);
  border-radius: 24px;
}
.atout__ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fond);
  color: var(--encre);
  transition: background-color var(--t-parfum), color var(--t-parfum);
}
.atout__txt { min-width: 0; }
.atout__txt b { display: block; font: 800 20px/1.2 var(--sans); letter-spacing: -.02em; overflow-wrap: break-word; }
.atout__txt small { display: block; margin-top: 6px; font: 500 15px/1.5 var(--sans); color: var(--gris); }

.gateau {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 20px;
  padding: 34px 38px;
  border-radius: 28px;
  background: var(--encre-base);
  color: var(--blanc);
}
.gateau__txt { min-width: 0; flex: 1 1 360px; }
.gateau b { display: block; font: 800 30px/1.15 var(--sans); letter-spacing: -.03em; overflow-wrap: break-word; }
/* Italique du bandeau : le fond du parfum, pastel, sur l'encre (contraste 9:1 et plus). */
.gateau b em { color: var(--fond); transition: color var(--t-parfum); }
.gateau p { margin-top: 8px; font: 500 15.5px/1.5 var(--sans); color: var(--ivoire-doux); }

/* ---------- AVIS EN CARTES ---------- */
.avis__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.avi {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--ligne);
  border-radius: 24px;
  background: var(--blanc);
}
.avi__et { color: #946200; letter-spacing: .12em; font-size: 15px; line-height: 1; }
.avi__cit { display: block; margin-top: 14px; font: 600 18px/1.5 var(--sans); letter-spacing: -.01em; overflow-wrap: break-word; }
q.avi__cit { quotes: "«\00a0" "\00a0»"; }
:lang(nl) q.avi__cit, :lang(en) q.avi__cit { quotes: "\201C" "\201D"; }
.avi__auteur { margin-top: auto; padding-top: 16px; font: 500 14px/1.4 var(--sans); color: var(--gris); }

/* ---------- COMMANDER OU RÉSERVER (formule Standard) ---------- */
.commander { background: var(--blanc); }
.commander__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
.commander__intro { min-width: 0; }
.commander__intro .kicker { color: var(--gris); }
.commander__intro h2 { margin-top: 20px; }
.commander__lead { margin-top: 26px; max-width: 28rem; font: 500 17.5px/1.65 var(--sans); color: var(--gris); }
.commander__alt { margin-top: 24px; font: 500 15px/1.5 var(--sans); color: var(--gris); }
.commander__alt a { color: var(--encre-base); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--boule); white-space: nowrap; }

.commande { min-width: 0; padding: 36px 34px 32px; border: 1px solid var(--ligne); border-radius: 28px; background: var(--papier); }
.form { display: grid; gap: 20px; min-width: 0; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field__label { font: 700 13px/1.3 var(--sans); color: var(--encre-base); }
.field__optional { font-weight: 500; color: var(--gris); }
.field__input {
  width: 100%;
  min-width: 0;
  padding: 13px 16px;
  border: 1.5px solid var(--bord);
  border-radius: 14px;
  background: var(--blanc);
  font: 500 16px/1.4 var(--sans);
  color: var(--encre-base);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field__input::placeholder { color: #6F676B; opacity: 1; }
.field__input:focus { outline: none; border-color: var(--encre-base); box-shadow: 0 0 0 3px rgba(30, 26, 29, .14); }
textarea.field__input { resize: vertical; min-height: 116px; }
.field__error { font: 600 13.5px/1.35 var(--sans); color: var(--danger); }
.field__error:empty { display: none; }
.field.has-error .field__input { border-color: var(--danger); }
.form__rgpd { font: 500 13.5px/1.55 var(--sans); color: var(--gris); }
.form__rgpd a { color: var(--encre-base); }
.form__success {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--ligne);
  background: var(--blanc);
  font: 600 15px/1.5 var(--sans);
  color: var(--encre-base);
}
.form__success[hidden] { display: none; }
.form__success svg { flex: none; margin-top: 2px; color: var(--vert); }

/* ---------- HORAIRES ET ACCÈS (sur encre) ---------- */
.venir { background: var(--encre-base); color: var(--blanc); }
.venir .sec-hd__oeil { color: var(--gris-clair); }
.venir__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; margin-top: 56px; }
.horaires { min-width: 0; }
.horaires__titre { font: 800 22px/1.2 var(--sans); letter-spacing: -.02em; }
/* « Ouvert aujourd'hui jusqu'à … » sur sa propre ligne, réservée avant que main.js l'écrive :
   le remplir ne déplace rien (CLS nul). */
.ouvert { display: block; min-height: 1.4em; margin-top: 10px; font: 500 15px/1.4 var(--sans); color: var(--ivoire-doux); }
.ouvert[hidden] { display: none; }
.ouvert b { color: var(--blanc); font-weight: 700; }
.ouvert .pt {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--vert);
  box-shadow: 0 0 0 3px rgba(62, 142, 94, .3);
  vertical-align: .05em;
}
.ouvert .pt--ferme { background: var(--gris-clair); box-shadow: 0 0 0 3px rgba(180, 171, 176, .25); }
/* Jour et horaires trop longs pour une ligne (règle du garage, décision « G1 » du 04/10/2026) :
   la ligne se replie seulement quand ils ne tiennent plus côte à côte ; les horaires passent
   alors dessous, calés à droite. */
.hours { margin-top: 14px; }
.hours__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding-block: 15px;
  border-bottom: 1px solid var(--sombre-ligne);
  font: 600 16px/1.3 var(--sans);
}
.hours__day { flex: 1 1 0; }
.hours__time { margin-left: auto; color: var(--ivoire-doux); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ligne du jour : le fond pastel du parfum sur l'encre (9:1 et plus). */
.hours__row.is-today, .hours__row.is-today .hours__time { color: var(--fond); font-weight: 800; }
.venir__adr { min-width: 0; }
.venir__adr address { font: 500 18px/1.7 var(--sans); color: var(--ivoire-doux); overflow-wrap: anywhere; }
.venir__adr address b { display: block; font: 800 30px/1.15 var(--sans); letter-spacing: -.03em; color: var(--blanc); }
.venir__adr address a { text-decoration: none; border-bottom: 1px solid var(--sombre-ligne); }
.venir__adr address a:hover { color: var(--blanc); border-bottom-color: currentColor; }
.venir__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.saison { margin-top: 24px; font: 500 15px/1.6 var(--sans); color: var(--gris-clair); }

/* ---------- PIED DE PAGE (encre) ---------- */
.footer { background: var(--encre-base); color: var(--gris-clair); border-top: 1px solid var(--sombre-ligne); font: 500 14.5px/1.55 var(--sans); }
.footer a { text-decoration: none; transition: color var(--t-fast); }
.footer a:hover { color: var(--blanc); }
.footer__inner {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: 72px 56px;
}
.footer__logo { display: inline-flex; align-items: baseline; gap: 3px; color: var(--blanc); }
.footer__nom { font: 800 28px/1.15 var(--sans); letter-spacing: -.04em; text-transform: lowercase; overflow-wrap: anywhere; }
.footer__tagline { margin-block: 16px 18px; max-width: 34ch; }
.footer__call { display: inline-flex; align-items: center; gap: 8px; color: var(--blanc); font-weight: 700; font-size: 17px; }
.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.footer__col-title {
  margin-bottom: 16px;
  font: 700 12px/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blanc);
}
.footer__col ul { display: grid; gap: 10px; }

/* Ligne du bas : société, copyright, liens légaux. Dernière ligne du pied, gouttière du
   conteneur gardée (jamais de padding horizontal à zéro, constat du 03/10/2026). */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 24px;
  border-top: 1px solid var(--sombre-ligne);
  font-size: 13.5px;
}
.footer__company { flex-basis: 100%; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* Fin de page : le bouton « haut de page » se poserait sur la dernière ligne du pied. Sous elle,
   le pied garde la place du bouton : son retrait du bas, sa hauteur et 12 px d'air ; sur
   téléphone, le retrait du bas compte aussi la barre basse. Au-delà de 1388 px (1371 px de
   largeur utile + 17 px de barre de défilement classique), le bouton est dans la marge du
   conteneur (22 + 44 px < (largeur - 1240) / 2) : rendu inchangé. */
@media (max-width: 1388px) {
  .footer__bottom { padding-bottom: calc(var(--tt-bas) + 44px + 12px); }
}

/* ---------- BARRE BASSE DU TÉLÉPHONE ---------- */
/* Classe floating-cta en plus : la règle des démos (.to-top,.floating-cta { margin-bottom }) la
   remonte au-dessus du bandeau. Affichée sur téléphone seulement (plus bas). */
.callbar { display: none; }

/* ---------- BOUTON « HAUT DE PAGE » ---------- */
.to-top {
  position: fixed;
  right: 22px;
  bottom: var(--tt-bas);
  z-index: 85;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--encre);
  border: 1px solid var(--ligne);
  box-shadow: 0 12px 26px -12px rgba(30, 26, 29, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med), background var(--t-fast), color var(--t-fast);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--encre); color: var(--fond); }

/* ---------- RÉVÉLATIONS AU DÉFILEMENT ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  transition-delay: var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* =================================================================
   RESPONSIVE
   ================================================================= */

/* Menu replié (burger) jusqu'à 1099 px : la barre dépliée (marque, quatre liens, FR/NL/EN,
   bouton de l'en-tête) demande environ 900 px dans la langue la plus longue ; le seuil laisse la
   place d'un nom de démo plus long que celui du modèle. Seuil repris par main.js (matchMedia,
   même requête) : le menu se referme en quittant la plage. */
@media (max-width: 1099px) {
  /* MENU MOBILE : panneau plein écran sous l'en-tête, fermé par opacité et visibilité
     seulement (aucun positionnement hors écran : jamais de défilement horizontal). */
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 14px var(--gutter) 40px;
    background: var(--fond);
    border-top: 1px solid rgba(30, 26, 29, .1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med), background-color var(--t-parfum);
  }
  .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__link {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding-block: 10px;
    border-bottom: 1px solid rgba(30, 26, 29, .12);
    font: 800 30px/1.1 var(--sans);
    letter-spacing: -.04em;
    white-space: normal;
  }
  .nav__link:hover, .nav__link:focus-visible { border-bottom-color: currentColor; }

  .nav__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--encre);
    text-decoration: none;
    font: 700 18px/1.2 var(--sans);
  }
  .nav__phone svg { flex-shrink: 0; }

  .nav__cta--mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 14px 20px;
    border-radius: 999px;
    background: var(--encre);
    color: var(--fond);
    text-decoration: none;
    text-align: center;
    font: 700 16px/1.25 var(--sans);
  }

  .nav .lang-switch--mobile { display: inline-flex; align-self: flex-start; }
  .lang-switch--desktop { display: none; }

  .burger { display: flex; }

  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
}

/* MENU TABLETTE : de 601 px au seuil du burger, le panneau devient un tiroir ancré à droite, avec
   un voile cliquable (aucun translateX : pas de défilement horizontal). */
@media (min-width: 601px) and (max-width: 1099px) {
  .nav {
    left: auto;
    width: min(80vw, 420px);
    box-shadow: -24px 0 60px -24px rgba(30, 26, 29, .35);
    z-index: 95;                 /* au-dessus du voile (90), sous l'en-tête (100) */
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(30, 26, 29, .38);
    /* Retient le défilement de la page sous le voile (le verrou du body le double). */
    overflow: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-med), visibility var(--t-med);
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
}

@media (max-width: 1020px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); padding-block: 24px 104px; min-height: 0; }
  .visuel svg { width: min(78%, 360px); }
  .carte__grille { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .creations__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photos__grille { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avis__grille { grid-template-columns: minmax(0, 1fr); }
  .commander__grille, .venir__grille { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

/* Téléphone : le dessin passe AU-DESSUS du titre (maquette) ; barre basse « Commander ·
   Itinéraire ». Le bouton « haut de page » monte au-dessus de la barre (son retrait du bas la
   compte). */
@media (max-width: 760px) {
  :root {
    --header-h: 70px;
    --tt-bas: calc(var(--callbar-h) + 12px);
  }

  .callbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    height: var(--callbar-h);
    padding: 10px var(--gutter);
    background: rgba(251, 248, 244, .98);
    border-top: 1px solid var(--ligne);
    box-shadow: 0 -12px 28px -16px rgba(30, 26, 29, .3);
    transition: opacity var(--t-fast), visibility var(--t-fast);
  }
  .callbar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 48px;
    padding: 0 10px;
    border-radius: 999px;
    text-decoration: none;
    font: 700 15px/1.1 var(--sans);
    white-space: nowrap;
  }
  .callbar__btn svg { flex-shrink: 0; }
  .callbar__btn--form { background: var(--encre); color: var(--fond); transition: background-color var(--t-parfum), color var(--t-parfum); }
  .callbar__btn--route { border: 1.5px solid var(--encre-base); color: var(--encre-base); background: var(--blanc); }
  /* Saisie dans la section de commande (clavier ouvert) : la barre s'efface pour ne pas couvrir
     le champ ou le bouton d'envoi ; elle revient dès que le focus quitte la section. */
  body.saisie-en-cours .callbar { opacity: 0; visibility: hidden; }
}

@media (max-width: 600px) {
  :root { --gutter: 20px; --sec: 84px; }
  .brand__nom { font-size: 26px; }
  .brand--long .brand__nom { font-size: 20px; }
  .hero__grid { gap: 8px; padding-block: 16px 96px; }
  /* Le dessin passe au-dessus du texte ; la carte « Nouveau » (nouveauté ou spécial réels, avec prix et
     description) sort du dessin et se place dans le flux, sous l'accueil, sans rien recouvrir. */
  .visuel { display: contents; }
  .visuel svg { order: -1; justify-self: center; width: 200px; margin: -8px 0 -18px; }
  .nouveau { position: static; order: 1; max-width: none; margin-top: 16px; padding: 14px 16px; border-radius: 18px; }
  .nouveau b { font-size: 20px; }
  .hero__lead { font-size: 16.5px; }
  .hero__cta .btn { flex: 1 1 100%; white-space: normal; text-align: center; }
  /* Créations sur téléphone : dessin à gauche, texte à droite (carte basse, quatre d'affilée). */
  .creations__grille { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 44px; }
  .crea {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
    padding: 16px 18px 16px 12px;
    border-radius: 24px;
  }
  .crea svg { grid-column: 1; grid-row: 1 / span 3; align-self: center; margin: 0; }
  .crea b { font-size: 19px; }
  .crea span { font-size: 14px; }
  .crea .pr { margin-top: 4px; font-size: 23px; }
  .atout { padding: 20px; }
  .gateau { padding: 28px 24px; }
  .gateau b { font-size: 26px; }
  .gateau .btn { width: 100%; white-space: normal; text-align: center; }
  .commande { padding: 26px 18px 22px; border-radius: 24px; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .venir__adr address b { font-size: 26px; }
  .venir__cta .btn { flex: 1 1 auto; white-space: normal; text-align: center; }
}

/* Petits téléphones : gouttière de 16 px. */
@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .photos__grille { grid-template-columns: minmax(0, 1fr); }
  .pastilles label { padding-right: 13px; font-size: 13.5px; }
  .col h3 { font-size: 23px; }
}

/* Nom de démo qui ne tient pas, même à 15 px, à côté du bouton de l'en-tête (main.js, classe
   entete--serre posée sur le téléphone seulement) : le bouton s'efface, la barre basse le porte. */
@media (max-width: 600px) {
  .site-header.entete--serre .header__cta { display: none; }
}

/* Très petits téléphones : le bouton de l'en-tête s'efface (la barre basse le porte). */
@media (max-width: 359px) {
  .header__cta { display: none; }
  .hero__title { font-size: 46px; }
  .callbar__btn { font-size: 14px; gap: 6px; }
}

/* Liens du pied sur une colonne de la marque jusqu'à 1024 px, deux colonnes jusqu'à 720 px
   (colonne Contact sur toute la largeur, décision de Charles du 03/10/2026 pour le garage,
   l'artisan et l'agence, même pied ici), une seule jusqu'à 480 px : minmax(0, 1fr) et
   overflow-wrap: anywhere, un e-mail plus long que l'écran passe à la ligne. 1 / -1 et non
   1 / 3 : sous 481 px, sur une colonne, 1 / 3 créerait une colonne vide. */
@media (max-width: 1024px) {
  .footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .footer__nav { grid-template-columns: 1fr 1fr; }
  .footer__col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer__inner, .footer__nav { grid-template-columns: minmax(0, 1fr); }
  .footer__inner { overflow-wrap: anywhere; }
}

/* ---------- MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .flotte { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .nav, .nav.is-open { transform: none; }
}

/* Adresse e-mail affichée dans la page (04/10/2026, décision de Charles « E2 ») : le bot pose une
   coupure permise juste après « @ » (<wbr>) et enveloppe dans .itx-email une adresse écrite seule
   hors d'un lien. Cette coupure ne joue que dans l'adresse de « Horaires et accès », jusqu'à la
   largeur où sa section passe sur une colonne ; ailleurs (pied de page), elle est neutralisée. */
a[href^="mailto:"] wbr, .itx-email wbr { display: none; }
@media (max-width: 1020px) {
  .venir__adr a[href^="mailto:"] wbr, .venir__adr .itx-email wbr { display: inline; }
  .venir__adr a[href^="mailto:"], .venir__adr .itx-email { overflow-wrap: anywhere; }
}