/* ═══════════════════════════════════════════════════════════════════════
   Saporini — feuille de style unique.

   Les jetons sont nommés par leur RÔLE (--fond, --texte, --accent), jamais
   par leur pigment. Les pigments de marque n'alimentent que les jetons :
   aucune règle ne les emploie directement, de sorte qu'une couleur peut
   changer sans relire la feuille.

   Deux climats : `.jour` (crème, le défaut) et `.nuit` (encre). Ils
   redéfinissent LES MÊMES jetons — un composant s'écrit une fois et
   fonctionne des deux côtés.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Pigments de marque ──────────────────────────────────────────────── */
:root {
  --p-encre:       #100E0C;   /* noir chaud, l'anthracite de l'enseigne   */
  --p-encre-clair: #1E1A16;
  --p-creme:       #F4EFE6;   /* crème papier                             */
  --p-creme-fonce: #E8E0D2;
  --p-blanc:       #FFFFFF;
  --p-rouge:       #D31220;   /* le rouge du tricolore, un ton plus dense */
  --p-vert:        #0B6B39;
  --p-or:          #C8A04B;
  --p-accent-texte:#FFFFFF;   /* ce qui s'écrit SUR l'accent */
  --p-gris:        #8A8178;

  /* Alias attendus par le module de réservation et l'administration. */
  --couleur-accent: var(--p-rouge);
  --couleur-fond:   var(--p-creme);
  --couleur-texte:  var(--p-encre);
}

/* ── Jetons de rôle — climat clair (défaut) ──────────────────────────── */
:root,
.jour {
  --fond:          var(--p-creme);
  --fond-carte:    var(--p-blanc);
  --fond-doux:     var(--p-creme-fonce);
  --texte:         var(--p-encre);
  --texte-doux:    #5E564C;
  --texte-faible:  #6B6357;   /* AA sur les trois fonds clairs : 4,52 à 5,92 */
  --accent:        var(--p-rouge);
  --accent-texte:  var(--p-accent-texte);
  --liseré:        rgba(16, 14, 12, .14);
  --liseré-fin:    rgba(16, 14, 12, .08);
  --ombre:         0 1px 2px rgba(16,14,12,.05), 0 12px 32px -12px rgba(16,14,12,.16);
  --ombre-levee:   0 2px 6px rgba(16,14,12,.07), 0 24px 56px -18px rgba(16,14,12,.26);
}

/* ── Jetons de rôle — climat sombre ──────────────────────────────────── */
.nuit {
  --fond:          var(--p-encre);
  --fond-carte:    var(--p-encre-clair);
  --fond-doux:     #17130F;
  --texte:         #F7F3EC;
  --texte-doux:    #BCB2A5;
  --texte-faible:  #8C8377;
  --accent:        #F0434F;   /* le rouge s'éclaircit pour rester lisible */
  --accent-texte:  var(--p-encre);
  --liseré:        rgba(247, 243, 236, .16);
  --liseré-fin:    rgba(247, 243, 236, .08);
  --ombre:         0 1px 2px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.7);
  --ombre-levee:   0 2px 8px rgba(0,0,0,.5), 0 28px 64px -20px rgba(0,0,0,.8);
}

/* ── Mesures ─────────────────────────────────────────────────────────── */
:root {
  --enveloppe: 78rem;
  --marge:     clamp(1.25rem, 5vw, 3.5rem);
  --rythme:    clamp(4.5rem, 9vw, 8.5rem);
  --rayon:     18px;
  --rayon-s:   12px;
  --haut-entete: 76px;

  --serif:  'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ═══ Réinitialisation ═════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--haut-entete) + 1rem);
  /* Coupe le double-tap qui zoome et les 300 ms avant chaque clic.
     Le pincement, lui, reste possible. */
  touch-action: manipulation;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; }

p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: inherit; }

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

.saut {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--p-encre); color: var(--p-creme);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--rayon-s) 0;
}
.saut:focus { left: 0; }

.enveloppe {
  width: min(100% - var(--marge) * 2, var(--enveloppe));
  margin-inline: auto;
}

/* ═══ Typographie de section ═══════════════════════════════════════════ */

.surtitre {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin-bottom: 1.1rem;
}

.titre-section {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2.35rem, 1.4rem + 3.5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.026em;
  max-width: 15em;
}

.chapo-section {
  margin-top: 1.25rem;
  font-size: clamp(1.05rem, 1rem + .34vw, 1.24rem);
  color: var(--texte-doux);
  max-width: 46ch;
}

.section-tete { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-tete--centre {
  text-align: center;
}
.section-tete--centre .titre-section,
.section-tete--centre .chapo-section { margin-inline: auto; }
.section-tete--centre .filet { margin-inline: auto; }

/* Cinq étoiles EN LIGNE. Sans ce display, un parent en grille blocifie
   l'élément et la réinitialisation (svg en display:block) les empile. */
.etoiles { display: inline-flex; gap: 2px; flex: none; }
.etoiles svg { width: 14px; height: 14px; fill: currentColor; opacity: .22; }
.etoiles svg.est-pleine { fill: var(--p-or); opacity: 1; }

/* Le filet tricolore : la signature graphique, reprise de l'enseigne. */
.filet {
  display: flex;
  width: 64px; height: 3px;
  margin-bottom: .55rem;
  border-radius: 2px;
  overflow: hidden;
}
.filet i { flex: 1; }
.filet i:nth-child(1) { background: var(--p-vert); }
.filet i:nth-child(2) { background: currentColor; opacity: .85; }
.filet i:nth-child(3) { background: var(--p-rouge); }

/* ═══ Boutons ══════════════════════════════════════════════════════════ */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  /* Un bouton cassé en deux lignes perd sa forme de pilule et décentre
     son texte : les libellés sont courts, et on ne les laisse pas plier. */
  white-space: nowrap;
  padding: .95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-texte);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }
.bouton .icone { flex: none; width: 1.05em; height: 1.05em; fill: currentColor; }

.bouton--fantome {
  background: transparent;
  border-color: color-mix(in srgb, currentColor 34%, transparent);
  color: inherit;
}
.bouton--fantome:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); }

.bouton--mince { padding: .62rem 1.15rem; font-size: .875rem; }

/* Sur fond clair, le fantôme doit lire en encre, pas en blanc. */
.bouton--encre { color: var(--texte); }

/* Sur les héros sombres, un aplat rouge plein vire au criard : le bouton
   principal s'y fait crème, et le rouge reste l'accent des détails. */
.hero--bottega .hero__boutons .bouton:not(.bouton--fantome),
.hero--vetrina .hero__boutons .bouton:not(.bouton--fantome) {
  background: var(--p-creme);
  color: var(--p-encre);
}
.hero--bottega .hero__boutons .bouton:not(.bouton--fantome):hover,
.hero--vetrina .hero__boutons .bouton:not(.bouton--fantome):hover { background: #FFFFFF; }

@media (max-width: 420px) {
  /* Plutôt pleine largeur que tronqué — mais pas plus haut qu'il ne faut. */
  .hero__boutons .bouton { width: 100%; padding-block: .8rem; }
  .hero__boutons { gap: .55rem; }
}

/* ═══ En-tête ══════════════════════════════════════════════════════════ */

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}
.entete__barre {
  width: min(100% - var(--marge) * 2, 84rem);
  margin-inline: auto;
  min-height: var(--haut-entete);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

/* Au repos, l'en-tête flotte sur le héros : texte clair, fond nul. */
.entete { color: #F7F3EC; }
.entete.est-posee {
  background: color-mix(in srgb, var(--p-creme) 97%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  color: var(--p-encre);
  box-shadow: 0 1px 0 rgba(16,14,12,.1);
}
/* Le héros « Editoriale » est clair : l'en-tête doit y lire en encre dès
   le départ, sans quoi la marque disparaît sur le fond crème. */
.heros[data-heros="b"] ~ * .entete,
body:has(.heros[data-heros="b"]) .entete:not(.est-posee) { color: var(--p-encre); }

.marque {
  display: grid;
  grid-template-areas: 'filet' 'mot' 'signature';
  justify-items: start;
  text-decoration: none;
  line-height: 1;
  flex: none;
}
.marque__filet {
  grid-area: filet;
  display: flex; width: 46px; height: 2.5px;
  margin-bottom: .34rem; border-radius: 2px; overflow: hidden;
}
.marque__filet i { flex: 1; }
.marque__filet i:nth-child(1) { background: var(--p-vert); }
.marque__filet i:nth-child(2) { background: currentColor; }
.marque__filet i:nth-child(3) { background: var(--p-rouge); }
.marque__mot {
  grid-area: mot;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.marque__signature {
  grid-area: signature;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .62;
  margin-top: .3rem;
}

.entete__nav {
  display: flex;
  gap: clamp(.9rem, 2vw, 1.9rem);
  margin-left: auto;
  font-size: .9rem;
}
.entete__nav a {
  text-decoration: none;
  padding: .3rem 0;
  position: relative;
  opacity: .88;
  transition: opacity .2s ease;
}
.entete__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform .28s ease;
}
.entete__nav a:hover { opacity: 1; }
.entete__nav a:hover::after { transform: scaleX(1); }

.entete__appel { border-color: color-mix(in srgb, currentColor 36%, transparent); background: transparent; color: inherit; }
.entete__appel:hover { background: color-mix(in srgb, currentColor 10%, transparent); border-color: currentColor; }

.entete__menu {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  padding: 11px 9px;
}
.entete__menu span {
  display: block; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .28s ease, opacity .2s ease;
}
.entete__menu span + span { margin-top: 5px; }
.entete__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.entete__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.entete__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.entete__mobile {
  display: grid;
  gap: .25rem;
  padding: 1rem var(--marge) 1.75rem;
  background: var(--p-creme);
  color: var(--p-encre);
  border-top: 1px solid rgba(16,14,12,.1);
}
.entete__mobile[hidden] { display: none; }
.entete__mobile a:not(.bouton) {
  text-decoration: none;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(16,14,12,.08);
  font-size: 1.05rem;
}
.entete__mobile .bouton { margin-top: 1rem; justify-self: start; }

@media (max-width: 940px) {
  .entete__nav, .entete__appel { display: none; }
  .entete__menu { display: block; }
  .entete.est-ouverte { background: var(--p-creme); color: var(--p-encre); }
}

/* ═══ HÉROS — le tronc commun ══════════════════════════════════════════ */

/*
   Pleine hauteur, et PLEINE. Un haut de page qui occupe tout l'écran sans
   rien y mettre oblige à défiler pour voir la première information : les
   quatre repères sont donc DANS le héros, calés en pied d'écran.
*/

.heros > .hero[hidden] { display: none; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;                 /* et non flex : `flex: 1` écraserait la
                                    largeur du conteneur intérieur */
  overflow: hidden;
}
.hero__dedans {
  position: relative;
  z-index: 2;
  display: grid;
  /* Le contenu est ancré EN HAUT par un padding constant : le titre tombe
     à la même hauteur d'une variante à l'autre. Les repères vont en bas. */
  grid-template-rows: 1fr auto;
  width: min(100% - var(--marge) * 2, 84rem);
  margin-inline: auto;
  padding-top: calc(var(--haut-entete) + clamp(1.5rem, 4vh, 3.5rem));
  padding-bottom: clamp(1.25rem, 3vh, 2rem);
  gap: clamp(1.5rem, 4vh, 3rem);
}

.hero__surtitre {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .78;
  margin-bottom: 1.1rem;
}

.hero__titre {
  font-family: var(--serif);
  font-optical-sizing: auto;
  display: grid;
  gap: .08em;
  line-height: .94;
  letter-spacing: -.03em;
}
.hero__titre-italien {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.9rem, 1.4rem + 6.2vw, 6.4rem);
  /* Deux lignes voulues — « Il gusto » / « dell'Italia » —, jamais un mot
     seul rejeté par hasard. La largeur est en em : elle suit la taille. */
  max-width: 6.2em;
}
.hero__titre-fr {
  font-weight: 600;
  font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.6rem);
  max-width: 11.5em;
}
@media (max-width: 1150px) { .hero__titre-fr { max-width: 9em; } }

.hero__chapo {
  margin-top: 1.35rem;
  font-size: clamp(1.02rem, .98rem + .36vw, 1.22rem);
  max-width: 48ch;
  opacity: .9;
}

.hero__boutons {
  margin-top: 1.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* Sur les héros sombres, un aplat rouge plein vire au criard : le bouton
   principal s'y fait crème, et le rouge reste l'accent des détails. */
.hero--bottega .hero__boutons .bouton:not(.bouton--fantome),
.hero--vetrina .hero__boutons .bouton:not(.bouton--fantome) {
  background: var(--p-creme);
  color: var(--p-encre);
}
.hero--bottega .hero__boutons .bouton:not(.bouton--fantome):hover,
.hero--vetrina .hero__boutons .bouton:not(.bouton--fantome):hover { background: #FFFFFF; }

@media (max-width: 420px) {
  /* Plutôt pleine largeur que tronqué. */
  .hero__boutons .bouton { width: 100%; padding-block: .82rem; }
  .hero__boutons { gap: .55rem; }
}

/* ── Les repères, en pied de héros ───────────────────────────────────── */

.reperes {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 2vw, 2rem);
  padding-top: clamp(1rem, 2.5vh, 1.75rem);
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  align-self: end;
}
.reperes li { display: grid; gap: .3rem; align-content: start; }
.reperes li + li {
  border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  padding-left: clamp(.75rem, 2vw, 2rem);
}
.reperes__valeur {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.reperes__libelle {
  font-size: clamp(.68rem, .62rem + .18vw, .78rem);
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .62;
}

@media (max-width: 760px) {
  .reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.1rem; }
  .reperes li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .reperes li:nth-child(3), .reperes li:nth-child(4) {
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    padding-top: 1.1rem;
  }
  .reperes__valeur .etoiles { display: none; }   /* la note suffit, serrée */
}

/* ── A · Bottega ─────────────────────────────────────────────────────── */

.hero--bottega { color: #F8F4ED; background: var(--p-encre); }
.hero--bottega .hero__fond { position: absolute; inset: 0; z-index: 0; }
.hero--bottega .hero__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 52%;
  /* Les sources d'Instagram plafonnent à 1080 px : un peu de contraste
     rattrape le flou de l'agrandissement en pleine largeur. */
  filter: saturate(1.06) contrast(1.06);
}
.hero--bottega .hero__voile {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(10,8,7,.93) 0%, rgba(10,8,7,.72) 34%, rgba(10,8,7,.18) 66%, rgba(10,8,7,.06) 100%),
    linear-gradient(to bottom, rgba(10,8,7,.62) 0%, rgba(10,8,7,.06) 26%, rgba(10,8,7,.78) 100%);
}
.hero--bottega .hero__texte { align-self: center; }

/* ── B · Editoriale ──────────────────────────────────────────────────── */

.hero--editoriale {
  background: var(--fond-doux);
  color: var(--texte);
  border-bottom: 1px solid var(--liseré-fin);
}
.hero--editoriale .hero__deux {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.hero--editoriale .hero__chapo { color: var(--texte-doux); }

.hero__collage { position: relative; min-height: min(56vh, 470px); }
.collage__piece {
  position: absolute;
  overflow: hidden;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-levee);
  will-change: transform;
  margin: 0;
}
.collage__piece img { width: 100%; height: 100%; object-fit: cover; }
.collage__piece--grande { top: 0; right: 0; width: 74%; aspect-ratio: 4 / 5; }
.collage__piece--haute  { top: 32%; left: 0; width: 41%; aspect-ratio: 3 / 4; z-index: 2; }
.collage__piece--basse  { bottom: 4%; right: 4%; width: 32%; aspect-ratio: 1 / 1; z-index: 3; }

@media (max-width: 900px) {
  /* En colonne unique, le collage repoussait les repères hors de l'écran.
     On le fait passer APRÈS eux : `display: contents` dissout le conteneur
     à deux colonnes, et les trois blocs se rangent dans la grille du héros. */
  .hero--editoriale .hero__deux { display: contents; }
  .hero--editoriale .hero__colonne { order: 1; }
  .hero--editoriale .reperes { order: 2; }
  .hero--editoriale .hero__collage { order: 3; min-height: 240px; margin-top: .5rem; }
  .hero--editoriale .hero__dedans { grid-template-rows: auto auto auto; }
}

/* ── C · Vetrina ─────────────────────────────────────────────────────── */

.hero--vetrina { background: var(--p-encre); color: #F8F4ED; }
.hero--vetrina .hero__dedans {
  grid-template-rows: 1fr auto auto;
  padding-bottom: 0;
  width: 100%;
  padding-inline: 0;
}
.hero--vetrina .hero__centre,
.hero--vetrina .reperes {
  width: min(100% - var(--marge) * 2, 84rem);
  margin-inline: auto;
}
.hero--vetrina::before {
  /* Une lueur chaude, très basse, pour que le noir ne soit pas plat. */
  content: '';
  position: absolute; left: 50%; top: 16%;
  width: min(92vw, 980px); aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(211,18,32,.18), transparent 68%);
  pointer-events: none;
}
.hero--vetrina .hero__centre {
  align-self: center;
  display: grid;
  justify-items: center;
  text-align: center;
}
.hero--vetrina .filet { margin-inline: auto; }
.hero--vetrina .hero__titre { justify-items: center; text-align: center; }
.hero--vetrina .hero__titre-italien { max-width: 7.6em; }
.hero--vetrina .hero__boutons { justify-content: center; }
.hero--vetrina .reperes { text-align: center; }
.hero--vetrina .reperes__valeur { justify-content: center; }
.hero--vetrina .reperes li { justify-items: center; }

.vetrina {
  margin-top: clamp(1rem, 2.5vh, 1.75rem);
  overflow: hidden;
  /* Les extrémités s'effacent : le ruban ne « coupe » pas net au bord. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.vetrina__ruban {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0 0 clamp(1rem, 2.5vh, 1.5rem);
  margin: 0;
  width: max-content;
  animation: defile 68s linear infinite;
}
.vetrina:hover .vetrina__ruban,
.vetrina:focus-within .vetrina__ruban { animation-play-state: paused; }
@keyframes defile {
  /* Le ruban contient deux fois la même série : à -50 % on retombe
     exactement sur le début, sans saut visible. */
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 6px)); }
}
@media (prefers-reduced-motion: reduce) {
  .vetrina__ruban { animation: none; }
  .vetrina { overflow-x: auto; }
}
.vetrina__tuile {
  flex: none;
  width: clamp(112px, 12.5vw, 172px);
  aspect-ratio: 4 / 5;
  border-radius: var(--rayon-s);
  overflow: hidden;
}
.vetrina__tuile img { width: 100%; height: 100%; object-fit: cover; }
.vetrina__ouvre {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
}
.vetrina__ouvre img { transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .3s ease; }
.vetrina__ouvre:hover img { transform: scale(1.06); opacity: .88; }

/* ═══ La maison ════════════════════════════════════════════════════════ */

.maison { padding-block: var(--rythme) 0; }
.maison__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  /* Deux colonnes dont l'une porte des images : on cale en haut, sinon les
     titres se décalent dès que les hauteurs diffèrent. */
  align-items: start;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
.maison__texte > p {
  margin-top: 1.15rem;
  color: var(--texte-doux);
  font-size: clamp(1.02rem, .99rem + .3vw, 1.15rem);
  max-width: 52ch;
}
.maison__tete { margin-bottom: 1.6rem; }   /* la tête a son propre rythme */

.maison__images { position: relative; }
.maison__image { margin: 0; overflow: hidden; border-radius: var(--rayon); box-shadow: var(--ombre); }
.maison__image img { width: 100%; height: 100%; object-fit: cover; }
.maison__image--une { aspect-ratio: 4 / 5; }
.maison__image--deux {
  position: absolute;
  right: -6%; bottom: -10%;
  width: 46%;
  aspect-ratio: 1 / 1;
  box-shadow: var(--ombre-levee);
  border: 6px solid var(--fond);
}

/* La citation ne s'excuse plus dans une colonne : elle prend la page. */
.citation-large {
  margin: clamp(4.5rem, 10vw, 8rem) auto 0;
  width: min(100% - var(--marge) * 2, 56rem);
  text-align: center;
  padding-bottom: var(--rythme);
}
.citation-large p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3.15rem);
  line-height: 1.18;
  letter-spacing: -.02em;
}
.citation-large p::before { content: '« '; color: var(--accent); }
.citation-large p::after  { content: ' »'; color: var(--accent); }
.citation-large cite {
  display: block;
  margin-top: 1.5rem;
  font-style: normal;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

@media (max-width: 900px) {
  .maison__grille { grid-template-columns: 1fr; }
  .maison__image--deux { right: 0; bottom: -8%; width: 40%; }
  .maison__images { margin-bottom: 3rem; }
}

/* ═══ Les rayons — liste éditoriale, pas une grille de cartes ══════════ */

.rayons {
  padding-block: var(--rythme);
  background: var(--p-encre);
  color: #F7F3EC;
  --texte: #F7F3EC;
  --texte-doux: #BCB2A5;
  --texte-faible: #9A9084;
}
.rayons__corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.rayons__liste { list-style: none; padding: 0; margin: 0; counter-reset: rayon; }

.rayon {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.4rem, 2.6vw, 2rem) 0;
  border-top: 1px solid rgba(247,243,236,.14);
  cursor: default;
  transition: opacity .35s ease;
}
.rayon:last-child { border-bottom: 1px solid rgba(247,243,236,.14); }
.rayon__rang {
  font-family: var(--serif);
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--texte-faible);
  padding-top: .55rem;
  transition: color .3s ease;
}
.rayon__texte h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  transition: transform .4s cubic-bezier(.2,.7,.3,1), color .3s ease;
}
.rayon__texte p {
  margin-top: .55rem;
  color: var(--texte-doux);
  font-size: .99rem;
  max-width: 46ch;
}
/* Au survol d'une ligne, les autres s'effacent : c'est ce qui donne à la
   liste son relief, et ce qui désigne la photo affichée à droite. */
@media (hover: hover) and (min-width: 961px) {
  .rayons__liste:hover .rayon { opacity: .42; }
  .rayons__liste:hover .rayon:hover,
  .rayons__liste .rayon:focus-within { opacity: 1; }
  .rayon:hover .rayon__texte h3 { transform: translateX(10px); }
  .rayon:hover .rayon__rang { color: var(--accent); }
}

/* La vignette n'existe que sur écran étroit, où il n'y a pas de survol :
   sans elle, la moitié de l'information disparaîtrait. */
.rayon__vignette { display: none; }

.rayons__panneau {
  position: sticky;
  top: calc(var(--haut-entete) + 2rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre-levee);
}
.rayons__vue {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .5s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.rayons__vue img { width: 100%; height: 100%; object-fit: cover; }
.rayons__vue.est-active { opacity: 1; transform: none; }
/* La seconde image de chaque rayon : un médaillon, en bas à gauche. */
.rayons__vue--bis {
  inset: auto auto 6% 6%;
  width: 38%;
  aspect-ratio: 1 / 1;
  border-radius: var(--rayon-s);
  overflow: hidden;
  border: 5px solid var(--p-encre);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.8);
  transform: translateY(14px) scale(.96);
}
.rayons__vue--bis.est-active { transform: none; }
.rayons__vue--bis[data-rayon="0"] { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .rayons__corps { grid-template-columns: 1fr; }
  .rayons__panneau { display: none; }
  .rayon { grid-template-columns: auto 1fr; }
  .rayon__vignette {
    display: block;
    grid-column: 1 / -1;
    margin: 1.1rem 0 0;
    border-radius: var(--rayon-s);
    overflow: hidden;
    aspect-ratio: 16 / 10;
  }
  .rayon__vignette img { width: 100%; height: 100%; object-fit: cover; }
}

/* ═══ Fait maison — une mosaïque ═══════════════════════════════════════ */

.cuisine { padding-block: var(--rythme); background: var(--fond-doux); }
/* Les trois éléments du titre forment UN bloc, dans le flux normal. Posés
   en lignes de grille, ils s'étiraient sur la hauteur de la colonne de
   droite : l'espacement filet → surtitre → titre n'était plus celui des
   autres sections, et il s'ouvrait un gouffre entre chacun. */
.cuisine__tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.cuisine__texte p { color: var(--texte-doux); }
.cuisine__texte p + p { margin-top: 1rem; }

@media (max-width: 900px) {
  .cuisine__tete { grid-template-columns: 1fr; }
  .cuisine__texte { margin-top: 1.25rem; }
}

/*
   Pavage à quatre colonnes qui remplit EXACTEMENT ses rangées — aucune
   case orpheline. Voir le schéma dans gabarits/page.mjs.
*/
.mosaique {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(120px, 15vw, 210px);
  gap: clamp(.5rem, 1.1vw, .85rem);
}
.mosaique__piece { overflow: hidden; border-radius: var(--rayon-s); }
.mosaique__piece--1  { grid-column: span 2; grid-row: span 2; }
.mosaique__piece--6  { grid-column: span 2; }
.mosaique__piece--9  { grid-column: span 2; }
.mosaique__piece--10 { grid-column: span 2; }

.mosaique__ouvre {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  padding: 0; border: 0; background: none;
  cursor: zoom-in;
  overflow: hidden;
}
.mosaique__ouvre img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.mosaique__ouvre:hover img,
.mosaique__ouvre:focus-visible img { transform: scale(1.05); }
/* Un dégradé ne suffit pas sur une photo claire : un badge opaque tient
   sur n'importe quel fond. */
.mosaique__legende {
  position: absolute; left: .6rem; bottom: .6rem;
  max-width: calc(100% - 1.2rem);
  background: rgba(16,14,12,.92);
  backdrop-filter: blur(6px);
  color: #F7F3EC;
  font-size: .7rem;
  letter-spacing: .05em;
  text-align: left;
  padding: .3rem .6rem;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.mosaique__ouvre:hover .mosaique__legende,
.mosaique__ouvre:focus-visible .mosaique__legende { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .mosaique { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; }
  .mosaique__piece--1  { grid-column: span 2; grid-row: span 2; }
  .mosaique__piece--6,
  .mosaique__piece--9,
  .mosaique__piece--10 { grid-column: span 2; }
  .mosaique__legende { opacity: 1; transform: none; }
}

/* ═══ Avis — une tribune, pas huit cartes ══════════════════════════════ */

.avis { padding-block: var(--rythme); }
.tribune {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.5rem, 2vw, 2rem);
  width: min(100%, 60rem);
  margin-inline: auto;
}
/* La scène garde la hauteur de l'avis le plus long : les flèches et les
   jalons ne sautent donc pas d'une citation à l'autre. */
.tribune__scene { display: grid; transition: min-height .45s cubic-bezier(.2,.7,.3,1); }
.tribune__avis {
  grid-area: 1 / 1;
  margin: 0;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1), visibility .45s;
}
.tribune__avis.est-active { opacity: 1; visibility: visible; transform: none; }
.tribune__avis .etoiles svg { width: 17px; height: 17px; }
.tribune__avis blockquote {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.15rem, .98rem + .95vw, 1.72rem);
  line-height: 1.36;
  letter-spacing: -.012em;
  max-width: 40ch;
}
.tribune__avis blockquote::before { content: '« '; }
.tribune__avis blockquote::after  { content: ' »'; }
.tribune__avis figcaption { display: grid; gap: .2rem; }
.tribune__auteur { font-weight: 550; font-size: .95rem; }
.tribune__meta { font-size: .8rem; color: var(--texte-faible); }

.tribune__fleche {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--liseré);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.tribune__fleche:hover { border-color: var(--texte); background: color-mix(in srgb, var(--texte) 6%, transparent); }
.tribune__fleche .icone { width: 20px; height: 20px; }

.tribune__jalons {
  list-style: none; padding: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem;
}
.tribune__jalons button {
  width: 30px; height: 4px;
  padding: 0;
  border: 0; border-radius: 2px;
  background: var(--liseré);
  cursor: pointer;
  transition: background-color .3s ease, width .3s ease;
}
.tribune__jalons button[aria-current="true"] { background: var(--accent); width: 46px; }
.a11y {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 620px) {
  .tribune { grid-template-columns: 1fr; }
  .tribune__fleche { display: none; }   /* les jalons suffisent, et le doigt */
}

/* ═══ Magasins — des onglets, pas trois cartes ═════════════════════════ */

.magasins { padding-block: var(--rythme) 0; background: var(--fond-doux); }

.onglets {
  display: flex;
  justify-content: center;
  gap: .4rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .25rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.onglets::-webkit-scrollbar { display: none; }
.onglets button {
  flex: none;
  white-space: nowrap;
  padding: .8rem 1.6rem;
  border: 1px solid var(--liseré);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: .95rem;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.onglets button[aria-selected="true"] {
  background: var(--texte); color: var(--fond); border-color: var(--texte);
}

.volet {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: stretch;
  background: var(--fond-carte);
}
.volet[hidden] { display: none; }
.volet__photo { position: relative; min-height: 380px; }
.volet__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.volet__infos {
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 42rem;
}
.volet__ville {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.volet address { font-style: normal; color: var(--texte-doux); font-size: 1.05rem; line-height: 1.5; }
.volet__note { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--texte-faible); }

/* Les trois magasins ont les MÊMES horaires : le détail jour par jour en
   trois colonnes cassait les heures en deux lignes pour rien. Le résumé
   suffit ici ; le détail reste au pied de page, sur une colonne. */
.volet__horaires {
  padding-block: .9rem;
  border-block: 1px solid var(--liseré-fin);
  display: grid;
  gap: .3rem;
}
.volet__ouvert {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem;
  font-size: 1.02rem;
}
.volet__ouvert strong {
  font-weight: 600;
  white-space: nowrap;        /* « 10h00 – 18h00 » ne se coupe jamais */
}
.volet__ferme { font-size: .88rem; color: var(--texte-faible); }

.volet__sur-place {
  display: inline-flex; align-items: center; gap: .45rem;
  align-self: start;
  font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--p-vert);
  background: color-mix(in srgb, var(--p-vert) 10%, transparent);
  padding: .38rem .75rem; border-radius: 999px;
}
.volet__sur-place .icone { width: .95em; height: .95em; fill: currentColor; flex: none; }
/* Les actions rejoignent le bas : le volet garde son assise quelle que
   soit la longueur du bloc d'horaires. */
.volet__actions { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 900px) {
  .volet { grid-template-columns: 1fr; }
  .volet__photo { min-height: 0; aspect-ratio: 16 / 10; }
  .volet__photo img { position: static; }
}

/* ═══ Instagram ════════════════════════════════════════════════════════ */

.insta { padding-block: var(--rythme); }
.insta__grille {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(46%, 170px), 1fr));
  gap: clamp(.55rem, 1.2vw, .85rem);
}
.insta__grille a {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--rayon-s);
  overflow: hidden;
  text-decoration: none;
}
.insta__grille img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.insta__grille a:hover img { transform: scale(1.06); }
.insta__date {
  position: absolute; left: .55rem; bottom: .55rem;
  display: inline-block; width: fit-content;
  /* Quasi opaque : à .78, le badge laissait passer assez de photo pour que
     le blanc devienne illisible sur un cliché clair. */
  background: rgba(16,14,12,.92);
  backdrop-filter: blur(6px);
  color: #F7F3EC;
  font-size: .68rem;
  letter-spacing: .05em;
  padding: .28rem .55rem;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.insta__grille a:hover .insta__date,
.insta__grille a:focus-visible .insta__date { opacity: 1; transform: translateY(0); }
.insta__lien { margin-top: 2.25rem; text-align: center; }

/* ═══ Visionneuse ══════════════════════════════════════════════════════ */

/*
   Un <dialog> fermé est masqué par la feuille du navigateur. TOUTE règle
   `display` posée sans la condition [open] l'écrase — et la boîte reste
   visible, vide, par-dessus la page, sans moyen de la fermer.
*/
.loupe:not([open]) { display: none; }
.loupe[open] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
}
.loupe {
  position: fixed;
  inset: 0;
  width: 100%; max-width: 100%;
  height: 100%; max-height: 100%;
  padding: clamp(.75rem, 2.5vw, 2rem);
  border: 0;
  background: rgba(8,7,6,.96);
  color: #F7F3EC;
  overscroll-behavior: contain;
}
.loupe::backdrop { background: rgba(8,7,6,.9); }

/* La zone d'affichage est IDENTIQUE pour tous les clichés : l'image est
   sortie du flux et centrée, sinon c'est elle qui dicterait la hauteur du
   cadre, et la légende sauterait d'une image à l'autre. */
.loupe__cadre {
  position: relative;
  grid-area: 1 / 2;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%; height: 100%;
  margin: 0;
}
.loupe__image {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  border-radius: 14px;          /* sur ses vrais bords, pas sur la zone */
}

.loupe__fleche, .loupe__fermer {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(247,243,236,.24);
  border-radius: 999px;
  background: rgba(247,243,236,.06);
  color: inherit;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.loupe__fleche:hover, .loupe__fermer:hover { background: rgba(247,243,236,.16); border-color: rgba(247,243,236,.5); }
.loupe__fleche { width: 52px; height: 52px; }
.loupe__fleche .icone { width: 22px; height: 22px; }
.loupe__fleche--avant { grid-area: 1 / 1; }
.loupe__fleche--apres { grid-area: 1 / 3; }
.loupe__fermer {
  position: absolute; top: clamp(.75rem, 2.5vw, 2rem); right: clamp(.75rem, 2.5vw, 2rem);
  z-index: 2;
  width: 46px; height: 46px;
}
.loupe__fermer .icone { width: 20px; height: 20px; }

/* Hauteur FIXE, pas un min-height : une légende de trois lignes raboterait
   sinon la zone du cliché, qui ne serait plus la même d'une image à l'autre. */
.loupe__pied {
  grid-area: 2 / 1 / 3 / 4;
  height: 62px;
  /* La légende est CENTRÉE sous le cliché, le compteur reste à droite :
     une colonne fantôme de la largeur du compteur équilibre la ligne, sans
     quoi « centré » voudrait dire « décalé de la largeur du compteur ». */
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem;
  align-items: center;
  gap: 1rem;
  padding-top: .9rem;
}
.loupe__legende {
  grid-column: 2;
  text-align: center;
  font-size: .9rem;
  color: #CFC6B9;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.loupe__compteur {
  grid-column: 3;
  text-align: right;
  font-size: .82rem; color: #8C8377;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .loupe[open] { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
  .loupe__cadre { grid-area: 1 / 1; }
  /* Sous le pouce, on glisse : les flèches encombreraient le cliché. */
  .loupe__fleche { display: none; }
  .loupe__pied { grid-area: 2 / 1; }
}

/* ═══ Erreur 404 ═══════════════════════════════════════════════════════ */

.erreur {
  padding-top: calc(var(--haut-entete) + 6rem);
  padding-bottom: 8rem;
  text-align: center;
}
.erreur .filet { margin-inline: auto; }
.erreur .titre-section, .erreur .chapo-section { margin-inline: auto; }
.erreur .hero__boutons { justify-content: center; }

/* ═══ Pied ═════════════════════════════════════════════════════════════ */

.pied {
  background: var(--p-encre);
  color: #CFC6B9;
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
}
.pied__corps {
  width: min(100% - var(--marge) * 2, var(--enveloppe));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pied .marque { color: #F7F3EC; }
.pied__bce { margin-top: 1.2rem; font-size: .8rem; color: #857C71; }
.pied__bloc h2 {
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #857C71;
  margin-bottom: 1rem;
}
.pied__horaires { display: grid; gap: .3rem; font-size: .9rem; }
.pied__horaires > div { display: flex; justify-content: space-between; gap: 1rem; }
.pied__horaires .est-ferme { color: #8C8377; }   /* 5,16:1 sur l'encre du pied */
.pied__horaires dt { color: inherit; }

.pied__magasins { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; font-size: .9rem; }
.pied__magasins li { display: grid; gap: .1rem; }
.pied__magasins strong { color: #F7F3EC; font-weight: 550; }
.pied__magasins a { color: #CFC6B9; text-decoration: none; margin-top: .2rem; }
.pied__magasins a:hover { color: #F7F3EC; text-decoration: underline; }

.pied__reseaux { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; font-size: .9rem; }
/* Un lien qui mêle une icône et du texte doit être inline-flex : sinon la
   réinitialisation (svg en display:block) renvoie l'icône sur sa propre
   ligne, au-dessus du texte. */
.pied__reseaux a {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; color: #CFC6B9;
}
.pied__reseaux a:hover { color: #F7F3EC; }
.pied__reseaux .icone { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }

.pied__bas {
  border-top: 1px solid rgba(247,243,236,.1);
  padding-block: 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  font-size: .8rem;
  color: #857C71;
}
.pied__bas > * {
  width: min(100% - var(--marge) * 2, var(--enveloppe));
  margin-inline: auto;
}
.pied__credit { margin-top: .3rem; }

@media (max-width: 760px) {
  .pied { padding-bottom: 76px; }  /* la barre d'action mobile */
}

/* ═══ Barre d'action mobile ════════════════════════════════════════════ */

.barre-appel {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: none;
  /* Fond OPAQUE sur la barre elle-même : avec un gap sur un conteneur
     translucide, la page défile dans les interstices. Les séparateurs sont
     donc des bordures, pas des espaces. */
  background: var(--p-encre);
  border-top: 1px solid rgba(247,243,236,.12);
  padding-bottom: env(safe-area-inset-bottom);
}
.barre-appel a {
  flex: 1;
  min-height: 60px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .22rem;
  color: #F7F3EC;
  text-decoration: none;
  font-size: .72rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.barre-appel a + a { border-left: 1px solid rgba(247,243,236,.12); }
.barre-appel .icone { width: 19px; height: 19px; fill: currentColor; }

@media (max-width: 760px) {
  .barre-appel { display: flex; }
}

/* ═══ Erreur 404 ═══════════════════════════════════════════════════════ */

.erreur {
  padding-top: calc(var(--haut-entete) + 6rem);
  padding-bottom: 8rem;
  text-align: center;
}
.erreur .filet { margin-inline: auto; }
.erreur .titre-section, .erreur .chapo-section { margin-inline: auto; }
.erreur .hero__boutons { justify-content: center; }

/* ═══ Apparitions ══════════════════════════════════════════════════════ */

/* L'opacité de départ n'est posée QUE si le script a démarré : sans lui,
   la page reste entièrement lisible. */
.js .apparait {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.js .apparait.est-vue { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .apparait { opacity: 1; transform: none; }
}

/* ═══ Commutateur de direction (provisoire) ════════════════════════════ */

.commutateur {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 95;
  background: rgba(16,14,12,.94);
  backdrop-filter: blur(16px);
  color: #F7F3EC;
  border: 1px solid rgba(247,243,236,.16);
  border-radius: 14px;
  padding: .85rem;
  width: min(calc(100vw - 2rem), 288px);
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.8);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
/* Replié, il ne laisse dépasser que sa poignée. */
.commutateur.est-repliee { transform: translateY(calc(100% - 44px)); }
.commutateur__poignee {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; background: none; border: 0; cursor: pointer;
  padding: 0 0 .65rem; margin: 0; color: inherit;
}
.commutateur__poignee svg {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  transition: transform .3s ease;
}
.commutateur.est-repliee .commutateur__poignee svg { transform: rotate(180deg); }
.commutateur__titre {
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9A9084;
  margin-bottom: .6rem;
}
.commutateur__choix { display: grid; gap: .3rem; }
.commutateur__choix button {
  display: grid;
  gap: .12rem;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: .5rem .65rem;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.commutateur__choix button:hover { background: rgba(247,243,236,.07); }
.commutateur__choix button[aria-checked="true"] {
  background: rgba(247,243,236,.11);
  border-color: rgba(247,243,236,.28);
}
.commutateur__choix strong { font-size: .86rem; font-weight: 550; }
.commutateur__choix span { font-size: .74rem; color: #9A9084; }

@media (max-width: 760px) {
  .commutateur { bottom: 68px; left: .75rem; right: .75rem; width: auto; }
  .commutateur.est-repliee { transform: translateY(calc(100% - 42px)); }
}

/* ═══ Contact ══════════════════════════════════════════════════════════ */

.contact {
  padding-block: var(--rythme);
  background: var(--fond-doux);
}
.contact__grille {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact__ou {
  margin-top: 2.25rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.contact__tels {
  list-style: none; padding: 0; margin: .9rem 0 0;
  border-top: 1px solid var(--liseré-fin);
}
.contact__tels li { border-bottom: 1px solid var(--liseré-fin); }
/* Un lien qui mêle une icône et du texte doit être inline-flex : sinon la
   réinitialisation (svg en display:block) renvoie l'icône sur sa ligne. */
.contact__tels a {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .75rem .2rem;
  text-decoration: none;
  transition: color .2s ease;
}
.contact__tels a:hover { color: var(--accent); }
.contact__tels .icone {
  width: .9em; height: .9em; fill: currentColor; flex: none;
  opacity: .35; align-self: center;
}
.contact__tels strong {
  /* Une largeur commune, pas `flex: 1` : les trois numéros démarrent alors
     au même endroit, quelle que soit la longueur du nom du magasin. */
  flex: none;
  min-width: 10.5rem;
  font-size: .8rem; font-weight: 550;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texte-faible);
}
.contact__tels a:hover strong { color: inherit; }
/* Le numéro, en chiffres tabulaires : les trois s'alignent au chiffre près. */
.contact__tels .numero {
  font-family: var(--serif);
  font-size: 1.12rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.formulaire {
  background: var(--fond-carte);
  border: 1px solid var(--liseré-fin);
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--ombre);
  display: grid;
  gap: 1rem;
}
.formulaire__ligne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1rem;
}
.champ { display: grid; gap: .4rem; margin: 0; align-content: start; }
.champ label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.champ input,
.champ textarea {
  font: inherit;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--liseré);
  border-radius: var(--rayon-s);
  padding: .8rem .9rem;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.champ textarea { resize: vertical; min-height: 7rem; }
.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: var(--accent); }
.champ__astuce { font-size: .76rem; color: var(--texte-faible); }

/* Le champ piège : hors de l'écran, mais TOUJOURS dans le flux. Ni `hidden`
   ni `display:none`, que certains robots repèrent. */
.piege {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden;
}

.formulaire__pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: .35rem;
}
.formulaire__etat { font-size: .9rem; color: var(--texte-doux); }
.formulaire__etat.est-ok { color: var(--p-vert); }
.formulaire__etat.est-ko { color: var(--accent); }
.formulaire[aria-busy="true"] button { opacity: .6; pointer-events: none; }

@media (max-width: 900px) {
  .contact__grille { grid-template-columns: 1fr; }
}

/* ── Le <select> habillé ──────────────────────────────────────────────
   Le menu d'un <select> natif est dessiné par le système : gris, carré,
   différent sur chaque machine. On garde le select — c'est lui que le
   formulaire envoie — et on pose une couche par-dessus. */
.choix { position: relative; }
/* Le masquage force ses dimensions : un `width: 100%` posé sur les champs
   l'emporterait, et le select resterait sous le doigt, invisible. */
.choix__natif {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important; height: 1px !important;
  pointer-events: none !important;
}
.choix__bouton {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%;
  font: inherit;
  text-align: left;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--liseré);
  border-radius: var(--rayon-s);
  padding: .8rem .9rem;
  cursor: pointer;
}
.choix__bouton svg { flex: none; opacity: .5; }
.choix[data-ouvert="oui"] .choix__bouton svg { transform: rotate(180deg); opacity: .9; }
.choix[data-ouvert="oui"] .choix__bouton { border-color: var(--accent); }
.choix__liste { display: none; }
.choix[data-ouvert="oui"] .choix__liste {
  display: block;
  position: absolute; z-index: 40;
  left: 0; right: 0; top: calc(100% + .35rem);
  background: var(--fond-carte);
  border: 1px solid var(--liseré);
  border-radius: var(--rayon-s);
  box-shadow: var(--ombre-levee);
  padding: .3rem;
  margin: 0;
  list-style: none;
  max-height: 15rem;
  overflow: auto;
}
/* Ouverte vers le haut quand elle sortirait de la fenêtre. */
.choix--haut .choix__liste { top: auto; bottom: calc(100% + .35rem); }
.choix__option {
  display: block;
  width: 100%;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  padding: .6rem .7rem;
  border-radius: 7px;
  cursor: pointer;
  font-size: .95rem;
}
.choix__option:hover,
.choix__option.est-choisi { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.choix__valeur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }