/* ============================================================
   PÂTON — « Blé & Encre »
   Luxe éditorial artisan : ivoire, encre espresso, or de blé.
   Voir DESIGN.md pour le contrat du système.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --creme:        #FAF6EF;
  --encre:        #231710;
  --encre-douce:  #5A4632;
  --dore:         #C08A3A;
  --dore-clair:   #DFAF5C;
  --rose:         #D9A8A0;
  --verre:        rgba(252, 248, 241, 0.72);
  --espresso:     #241812;
  --espresso-hover: #33241A;
  --lin:          #F6EDE0;

  --police-titre: 'Gambetta', Georgia, 'Times New Roman', serif;
  --police-ui:    'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --sortie-douce:  cubic-bezier(0.16, 1, 0.3, 1);   /* arrivées */
  --rouleau-bez:   cubic-bezier(0.76, 0, 0.24, 1);  /* glissements de texte */
  --panneau-bez:   cubic-bezier(0.32, 0.72, 0, 1);  /* panneaux, boutons */
  --respiration:   cubic-bezier(0.45, 0, 0.55, 1);  /* boucles lentes */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--police-ui);
  background: var(--creme);
  color: var(--encre);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

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

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

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

/* ---------- Grain papier (voile fixe, jamais sur un conteneur défilant) ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ============================================================
   ENTÊTE — îlot de verre flottant
   ============================================================ */
.entete {
  position: fixed;
  top: clamp(14px, 2.2vw, 26px);
  left: 0; right: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.entete__pilule {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
  padding: 9px 9px 9px 24px;
  border-radius: 999px;
  background: var(--verre);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  backdrop-filter: blur(20px) saturate(1.35);
  border: 1px solid rgba(35, 23, 16, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 8px -4px rgba(35, 23, 16, 0.10),
    0 18px 40px -18px rgba(35, 23, 16, 0.25);
}

.entete__marque {
  font-family: var(--police-titre);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  padding-bottom: 2px; /* assied l'empattement sur la ligne optique */
  transition: color 0.35s var(--panneau-bez);
}
.entete__marque:hover { color: var(--dore); }

/* ---------- Liste de navigation ---------- */
.entete__nav { display: contents; }

.nav__liste {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  font-family: var(--police-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--encre);
  white-space: nowrap;
}

/* Effet rouleau : le texte glisse, la copie entrante est dorée */
.rouleau {
  display: block;
  height: 1.25em;
  overflow: hidden;
}
.rouleau__txt {
  display: block;
  height: 1.25em;
  line-height: 1.25em;
  transition: transform 0.52s var(--rouleau-bez);
}
.rouleau__txt + .rouleau__txt { color: var(--dore); }
.nav__lien:hover .rouleau__txt,
.nav__lien:focus-visible .rouleau__txt { transform: translateY(-100%); }

/* Point rosé de la page active */
.nav__lien.est-actif::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--rose);
  transform: translateX(-50%);
}

/* ---------- Sous-menu « Nos produits » ---------- */
.a-sousmenu { position: relative; }

.ico-chevron {
  width: 10px; height: 10px;
  opacity: 0.55;
  transition: transform 0.4s var(--panneau-bez), opacity 0.3s;
}
.a-sousmenu.est-ouvert .ico-chevron { transform: rotate(180deg); opacity: 1; }

.sousmenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(0.97);
  min-width: 250px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(252, 249, 243, 0.9);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(35, 23, 16, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 24px 48px -16px rgba(35, 23, 16, 0.28),
    0 4px 12px -6px rgba(35, 23, 16, 0.12);
  opacity: 0;
  filter: blur(6px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.32s var(--panneau-bez),
    transform 0.32s var(--panneau-bez),
    filter 0.32s var(--panneau-bez),
    visibility 0s linear 0.32s;
}

/* Pont invisible : pas de trou de survol entre le lien et le panneau */
.sousmenu::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}

.a-sousmenu.est-ouvert .sousmenu {
  opacity: 1;
  filter: blur(0);
  transform: translateX(-50%) translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.32s var(--panneau-bez),
    transform 0.32s var(--panneau-bez),
    filter 0.32s var(--panneau-bez),
    visibility 0s;
}

.sousmenu__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sousmenu__liste > li {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--sortie-douce), transform 0.35s var(--sortie-douce);
}
.a-sousmenu.est-ouvert .sousmenu__liste > li {
  opacity: 1;
  transform: none;
  transition-delay: calc(60ms + var(--j) * 45ms);
}

.sousmenu__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 15px;
  border-radius: 11px;
  font-family: var(--police-titre);
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--encre);
  transition: background-color 0.3s var(--panneau-bez), color 0.3s;
}
.sousmenu__lien > span {
  transition: transform 0.35s var(--panneau-bez);
}
.sousmenu__lien .ico-fleche {
  width: 14px; height: 14px;
  color: var(--dore);
  opacity: 0;
  transform: translateX(-7px);
  transition: opacity 0.3s var(--panneau-bez), transform 0.35s var(--panneau-bez);
}
.sousmenu__lien:hover,
.sousmenu__lien:focus-visible {
  background: rgba(192, 138, 58, 0.10);
}
.sousmenu__lien:hover > span,
.sousmenu__lien:focus-visible > span { transform: translateX(4px); }
.sousmenu__lien:hover .ico-fleche,
.sousmenu__lien:focus-visible .ico-fleche { opacity: 1; transform: translateX(0); }
.sousmenu__lien.est-actif { color: var(--dore); }

/* ---------- Portail client — pilule espresso, bouton-dans-bouton ---------- */
.portail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 7px 7px 19px;
  border-radius: 999px;
  background: var(--espresso);
  color: var(--lin);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px -12px rgba(36, 24, 18, 0.45);
  transition:
    transform 0.45s var(--panneau-bez),
    background-color 0.45s var(--panneau-bez),
    box-shadow 0.45s var(--panneau-bez);
}
.portail__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(250, 246, 239, 0.14);
  color: var(--dore-clair);
  transition: transform 0.45s var(--panneau-bez), background-color 0.45s var(--panneau-bez);
}
.portail__pastille .ico-fleche { width: 13px; height: 13px; }
.portail:hover {
  background: var(--espresso-hover);
  transform: translateY(-1.5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 16px 32px -12px rgba(36, 24, 18, 0.5);
}
.portail:hover .portail__pastille {
  background: rgba(250, 246, 239, 0.22);
  transform: translate(2px, -1px) scale(1.06);
}
.portail:active { transform: translateY(0) scale(0.97); }
.portail.est-actif .portail__pastille { background: rgba(250, 246, 239, 0.26); }

.portail--mobile { display: none; }

/* ---------- Burger (mobile) ---------- */
.burger {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.burger__barre {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--encre);
  border-radius: 2px;
  transition: transform 0.45s var(--panneau-bez);
}
.nav-ouverte .burger__barre:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav-ouverte .burger__barre:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* ============================================================
   HÉROS — la traversée : on plonge dans le blé, on sort dans l'ivoire
   ============================================================ */
.hero {
  position: relative;
  /* Piste volontairement brève : la traversée est un seuil, pas un couloir.
     On débouche sur la première vitrine en deux ou trois crans de molette. */
  height: 126vh;
  background: var(--creme);
}

.hero__colle {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #EAD9B8;        /* ton moyen de la photo pendant le chargement */
}

/* Le zoom : piloté par --p (0 → 1) le long de la piste */
.hero__scene {
  position: absolute;
  inset: 0;
  transform: scale(calc(1 + var(--p, 0) * 2.6));
  transform-origin: 50% 42%;  /* le grand épi, au centre */
  will-change: transform;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

/* La sortie dans la lumière : l'ivoire du thème envahit la fin de la traversée */
.hero__lumiere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--creme);
  opacity: calc((var(--p, 0) - 0.28) * 2.2);   /* hors [0,1] : le navigateur borne */
}

/* Voile : assise chaude en bas, baiser ivoire en haut pour l'îlot */
.hero__voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(250, 246, 239, 0.22), transparent 18%),
    linear-gradient(180deg, transparent 58%, rgba(83, 52, 18, 0.16) 100%),
    radial-gradient(120% 90% at 50% 110%, rgba(64, 38, 12, 0.16), transparent 58%);
}

/* ---------- Titre et accroche ---------- */
/* Le bloc porte la plongée : titre et accroche s'effacent et grandissent d'un seul geste */
.hero__mot {
  position: absolute;
  left: 0; right: 0;
  top: 30%;
  text-align: center;
  opacity: calc(1 - var(--p, 0) * 4.5);
  transform: scale(calc(1 + var(--p, 0) * 0.5));
}

.hero__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(4.6rem, 2.2rem + 10.5vw, 11rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: #2A1B0F;
  text-shadow: 0 2px 34px rgba(250, 240, 220, 0.3);
}

.hero__accroche {
  margin: clamp(16px, 2.4vh, 30px) auto 0;
  max-width: min(88vw, 33rem);
  padding: 0 16px;
  font-family: var(--police-titre);
  font-size: clamp(1.02rem, 1.55vw, 1.42rem);
  line-height: 1.45;
  color: #3A2717;
  text-shadow: 0 1px 20px rgba(250, 240, 220, 0.55);
}

.titre__boite {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;   /* laisse respirer les jambages */
  margin-bottom: -0.06em;
}
.titre__lettre { display: inline-block; }

/* Espace vierge après la traversée */
.hero-suite {
  height: 12vh;               /* juste une respiration : la vitrine suit presque aussitôt */
  background: var(--creme);
}

/* ============================================================
   CHORÉGRAPHIE D'ENTRÉE (états par défaut visibles sans JS)
   ============================================================ */
/* Sur l'image seule (propriété `scale`) : n'entre pas en conflit avec le zoom */
.is-ready .hero__img {
  animation: entree 2.4s var(--sortie-douce) both;
}
@keyframes entree { from { scale: 1.07; } to { scale: 1; } }

.is-ready .titre__lettre {
  animation: lever 0.95s var(--sortie-douce) calc(0.45s + var(--i) * 0.07s) both;
}
@keyframes lever {
  from { transform: translateY(112%); filter: blur(7px); opacity: 0; }
  to   { transform: none;             filter: none;      opacity: 1; }
}

/* L'accroche arrive une fois les lettres posées */
.is-ready .hero__accroche {
  animation: montee 1s var(--sortie-douce) 1.15s both;
}

.is-ready .entete {
  animation: descendre 0.9s var(--sortie-douce) 0.95s both;
}
@keyframes descendre {
  from { opacity: 0; transform: translateY(-14px); filter: blur(5px); }
  to   { opacity: 1; transform: none;              filter: none; }
}

/* ============================================================
   PAGES VIERGES
   ============================================================ */
.vierge {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ============================================================
   MOBILE — l'îlot se resserre, la nav devient un voile plein écran
   ============================================================ */
@media (max-width: 1024px) {

  .entete__pilule {
    gap: 12px;
    padding: 7px 7px 7px 20px;
    /* Un ancêtre avec backdrop-filter piègerait le voile fixé : verre plein à la place */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(252, 248, 241, 0.92);
  }

  .portail--bureau { display: none; }
  .burger { display: inline-flex; }

  /* Le <nav> devient un voile plein écran sous l'îlot */
  .entete__nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: -1; /* sous la pilule, qui reste cliquable */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 110px 32px 48px;
    background: rgba(250, 246, 239, 0.9);
    -webkit-backdrop-filter: blur(30px) saturate(1.3);
    backdrop-filter: blur(30px) saturate(1.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s var(--panneau-bez), visibility 0s linear 0.5s;
  }
  .nav-ouverte .entete__nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.5s var(--panneau-bez), visibility 0s;
  }
  .nav-ouverte { overflow: hidden; }

  .nav__liste {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* Révélation en cascade des liens */
  .nav__item {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s var(--sortie-douce), transform 0.55s var(--sortie-douce);
  }
  .nav-ouverte .nav__item {
    opacity: 1;
    transform: none;
    transition-delay: calc(90ms + var(--i) * 60ms);
  }

  .nav__lien {
    font-family: var(--police-titre);
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-transform: none;
    padding: 6px 12px;
  }
  .rouleau, .rouleau__txt { height: 1.25em; }

  .nav__lien.est-actif::after { bottom: -1px; width: 5px; height: 5px; }

  .ico-chevron { display: none; }

  /* Le sous-menu vit à plat, toujours ouvert, en retrait d'un filet */
  .sousmenu {
    position: static;
    transform: none;
    min-width: 0;
    padding: 2px 0 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    filter: none;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }
  .sousmenu::before { display: none; }
  .sousmenu__liste {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-left: 0;
    border-left: 0;
  }
  .sousmenu__liste > li {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sousmenu__lien {
    justify-content: center;
    gap: 10px;
    padding: 6px 12px;
    font-size: 1.12rem;
    color: var(--encre-douce);
  }
  .sousmenu__lien .ico-fleche { display: none; }

  .portail--mobile {
    display: inline-flex;
    margin-top: 26px;
    padding: 10px 10px 10px 24px;
    font-size: 12px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s var(--sortie-douce), transform 0.55s var(--sortie-douce);
  }
  .nav-ouverte .portail--mobile {
    opacity: 1;
    transform: none;
    transition-delay: 400ms;
  }

  /* Entrée de l'entête sans transform (le voile fixé vit dedans) */
  .is-ready .entete { animation: apparaitre 0.9s var(--sortie-douce) 0.95s both; }
  @keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }

  .hero__titre { top: 33%; }
}

@media (max-width: 560px) {
  .entete { top: 12px; }
  .entete__marque { font-size: 1.25rem; }
  .hero__img { object-position: 42% 58%; } /* garde le grand épi net au cadre */
}

/* ============================================================
   TÊTE DE PAGE — titre en lettres révélées
   ============================================================ */
.page-tete {
  padding: clamp(128px, 19vh, 196px) 24px clamp(36px, 6vh, 72px);
  text-align: center;
}

.page-titre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(2.8rem, 6.4vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: #2A1B0F;
}

.page-suite {
  height: 46vh;
  background: var(--creme);
}

/* ============================================================
   VOLETS — l'image et le texte se relaient au scroll
   ============================================================ */
.volets { height: 440vh; }   /* 110vh par volet : 4 volets ici */

.volets__colle {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 104px clamp(24px, 5vw, 76px) 52px;
}

/* ---------- La scène : l'image occupe le fond, le texte vient devant ---------- */
.volets__scene {
  position: relative;
  /* Format allongé, borné par la hauteur disponible pour ne jamais déborder */
  width: min(1400px, 94vw, calc((100vh - 190px) * 16 / 9));
  width: min(1400px, 94vw, calc((100dvh - 190px) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(18px, 1.7vw, 28px);
  background: #E6DCCB;
  box-shadow:
    0 2px 10px -6px rgba(35, 23, 16, 0.2),
    0 40px 80px -34px rgba(35, 23, 16, 0.5);
}

.volets__fond {
  position: absolute;
  inset: 0;
  display: grid;             /* les trois images se superposent */
}

.volet-img {
  grid-area: 1 / 1;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.95s var(--panneau-bez);
}
.volet-img.est-actif { opacity: 1; }

/* Le zoom, continu sur toute la piste : aucune rupture au changement de volet */
.volet-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.02 + var(--p, 0) * 0.14));
  will-change: transform;
}

/* Assise chaude : le texte se détache, l'image garde sa lumière au loin */
.volets__ombre {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(102deg, rgba(35, 23, 16, 0.34) 0%, rgba(35, 23, 16, 0.12) 44%, transparent 70%),
    linear-gradient(0deg, rgba(35, 23, 16, 0.26), transparent 46%);
}

/* ---------- La bulle : verre ivoire, même vocabulaire que l'îlot de nav ---------- */
.volets__propos {
  position: absolute;
  left: clamp(16px, 3.4%, 46px);
  bottom: clamp(16px, 4.4%, 46px);
  width: min(560px, 54%);
  padding: clamp(22px, 2.4vw, 36px) clamp(24px, 2.6vw, 38px) clamp(20px, 2.2vw, 32px);
  border-radius: clamp(16px, 1.4vw, 22px);
  background: rgba(252, 248, 241, 0.84);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 20px 44px -22px rgba(35, 23, 16, 0.5);
}

/* ---------- Les textes : le précédent s'efface vers le haut, le suivant monte ---------- */
/* Les textes se superposent (il faut que le sortant et l'entrant coexistent le temps du
   fondu), donc ils sont hors flux : c'est le JS qui donne à la pile la hauteur du volet
   actif, et la bulle se resserre ou s'ouvre avec elle. */
.volets__pile {
  position: relative;
  min-height: 6em;                    /* filet avant la première mesure du JS */
  transition: height 0.8s var(--panneau-bez);
}

.volet-txt {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  pointer-events: none;
  transition:
    opacity 0.8s var(--panneau-bez),
    transform 0.85s var(--sortie-douce),
    filter 0.8s var(--panneau-bez);
}
.volet-txt.est-passe { transform: translateY(-28px); }
.volet-txt.est-actif {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}

.volet-txt__chapitre {
  margin: 0 0 clamp(14px, 2.1vh, 24px);
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.3vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--encre);
}

.volet-txt__corps {
  margin: 0;
  font-size: clamp(0.95rem, 1.02vw, 1.07rem);
  line-height: 1.68;
  color: var(--encre-douce);
}

/* ---------- Flèche : invite à faire défiler, se retourne à la fin ---------- */
.volets__guide {
  position: absolute;
  right: clamp(14px, 2.6%, 38px);
  bottom: clamp(14px, 3.2%, 38px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 10px 12px;
  border-radius: 999px;
  background: rgba(252, 248, 241, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 14px 30px -16px rgba(35, 23, 16, 0.55);
}

.volets__guide-mot {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--encre-douce);
  writing-mode: vertical-rl;   /* le mot court le long de la pilule */
}

.volets__guide-fleche {
  width: 22px;
  height: 22px;
  color: var(--dore);
  /* respiration verticale : la flèche appelle le geste */
  animation: appel 2.4s var(--respiration) infinite;
}
@keyframes appel {
  0%, 100% { transform: translateY(-2px); opacity: 0.75; }
  50%      { transform: translateY(4px);  opacity: 1; }
}

/* Dernier volet : la flèche se retourne, on remonte */
.volets[data-fin="oui"] .volets__guide-fleche { animation-name: appel-haut; }
@keyframes appel-haut {
  0%, 100% { transform: rotate(180deg) translateY(-2px); opacity: 0.75; }
  50%      { transform: rotate(180deg) translateY(4px);  opacity: 1; }
}

/* ---------- Repères : où en est-on des trois volets ---------- */
.volets__reperes {
  display: flex;
  gap: 9px;
  margin: clamp(18px, 2.4vh, 28px) 0 0;
  padding: 0;
  list-style: none;
}
.volets__reperes li {
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: rgba(35, 23, 16, 0.18);
  transition:
    background-color 0.6s var(--panneau-bez),
    width 0.6s var(--panneau-bez);
}
.volets__reperes li.est-actif {
  width: 52px;
  background: var(--dore);
}

/* Le texte actif entre aussi au chargement */
.is-ready .volet-txt.est-actif { transition-delay: 0.35s; }

/* Mobile : l'image occupe toute la scène, la bulle se pose en bas */
@media (max-width: 900px) {
  .volets { height: 420vh; }   /* 105vh par volet : 4 volets ici */
  .volets__colle { padding: 88px 16px 28px; }

  .volets__scene {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  .volet-img img { object-position: center 45%; }

  .volets__ombre {
    background:
      linear-gradient(0deg, rgba(35, 23, 16, 0.42), rgba(35, 23, 16, 0.06) 52%, transparent 72%);
  }

  .volets__propos {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
  /* La flèche remonte au-dessus de la bulle et se couche à l'horizontale */
  .volets__guide {
    right: 14px;
    bottom: auto;
    top: 14px;
    flex-direction: row;
    gap: 7px;
    padding: 8px 14px 8px 12px;
  }
  .volets__guide-mot { writing-mode: horizontal-tb; font-size: 8.5px; }
  .volets__guide-fleche { width: 17px; height: 17px; }
  .volet-txt__corps { font-size: 0.95rem; line-height: 1.62; }
  .page-tete { padding: clamp(108px, 16vh, 150px) 22px clamp(28px, 4vh, 48px); }
}

/* ============================================================
   PAGE CATÉGORIE — Nos pains
   ============================================================ */
.titre__espace { display: inline-block; width: 0.26em; }

.categorie {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(120px, 17vh, 180px) 24px 90px;
}

.categorie__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(3.2rem, 7vw, 6.2rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: #2A1B0F;
  text-align: center;
}

.produits {
  list-style: none;
  width: min(1180px, 100%);
  margin: clamp(44px, 8vh, 88px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 76px) clamp(24px, 3vw, 48px);
  justify-items: stretch;      /* chaque carte prend la largeur de sa colonne */
}

.produit { min-width: 0; }

.produit__carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.produit__visuel {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: clamp(180px, 22vw, 280px);   /* socle commun : les pains s'alignent */
}

/* Halo de four : une lumière dorée s'ouvre derrière le pain au survol */
.produit__visuel::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 96%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(192, 138, 58, 0.32),
    rgba(192, 138, 58, 0.12) 45%,
    transparent 68%);
  opacity: 0;
  transform: translateX(-50%) scale(0.68);
  pointer-events: none;
  transition:
    opacity 0.6s var(--panneau-bez),
    transform 0.8s var(--sortie-douce);
}

.produit__visuel img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  transform: rotate(-2deg);
  filter: drop-shadow(0 26px 34px rgba(35, 23, 16, 0.24));
  transition:
    transform 0.7s var(--sortie-douce),
    filter 0.7s var(--panneau-bez);
}

/* `est-en-vue` = l'équivalent tactile du survol : la carte est au milieu de l'écran.
   La classe n'est posée que sur les appareils sans survol (voir initProduitsEnVue). */
.produit__carte:hover .produit__visuel::before,
.produit__carte:focus-visible .produit__visuel::before,
.produit__carte.est-en-vue .produit__visuel::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.produit__carte:hover .produit__visuel img,
.produit__carte:focus-visible .produit__visuel img,
.produit__carte.est-en-vue .produit__visuel img {
  transform: rotate(0deg) translateY(-18px) scale(1.08);
  filter: drop-shadow(0 48px 48px rgba(35, 23, 16, 0.34));
}
.produit__carte:active .produit__visuel img {
  transform: rotate(0deg) translateY(-8px) scale(1.03);
}

.produit__nom {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;              /* les noms longs reviennent à la ligne */
  max-width: 100%;
  gap: 6px 10px;
  font-family: var(--police-titre);
  font-size: clamp(1.08rem, 1.32vw, 1.36rem);
  line-height: 1.3;
  min-height: 2.6em;            /* les noms courts et longs occupent le même bloc */
  align-content: center;
  font-weight: 500;
  text-align: center;
  text-wrap: balance;
  color: var(--encre);
}

/* Filet doré qui se tire sous le nom */
.produit__nom::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--dore);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--panneau-bez);
}
.produit__carte:hover .produit__nom::after,
.produit__carte:focus-visible .produit__nom::after,
.produit__carte.est-en-vue .produit__nom::after { transform: scaleX(1); }
.produit__nom .ico-fleche {
  width: 16px; height: 16px;
  color: var(--dore);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s var(--panneau-bez), transform 0.4s var(--panneau-bez);
}
.produit__carte:hover .produit__nom .ico-fleche,
.produit__carte:focus-visible .produit__nom .ico-fleche,
.produit__carte.est-en-vue .produit__nom .ico-fleche {
  opacity: 1;
  transform: translateX(0);
}

/* Une catégorie à deux produits ne s'étale pas sur trois colonnes */
.produits--deux {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(780px, 100%);
}

/* Produit dont la photo n'est pas encore fournie */
.produit__visuel--attente::after {
  content: "Photo à venir";
  align-self: center;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px dashed rgba(35, 23, 16, 0.22);
  background: rgba(35, 23, 16, 0.03);
  font-family: var(--police-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.produit__visuel--attente { align-items: center; }
.produit__visuel--attente::before { display: none; }

@media (max-width: 900px) {
  .produits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .produits { grid-template-columns: 1fr; }
  .produit__visuel { height: clamp(190px, 46vw, 240px); }
}

/* Entrée en cascade des produits */
.is-ready .produit {
  animation: montee 0.9s var(--sortie-douce) calc(0.55s + var(--k) * 0.1s) both;
}
@keyframes montee {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: none;             filter: none; }
}

/* ============================================================
   LES TROIS CASES (accueil) — trois blocs de texte côte à côte
   Transparentes : c'est le liseré qui dessine la case, pas un aplat.
   L'aplat d'encre du premier jet faisait trois blocs trop lourds sur le papier.
   ============================================================ */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.1vw, 32px);
  width: min(1180px, 100% - clamp(32px, 8vw, 110px));
  margin: 0 auto;
  padding: clamp(44px, 7.5vh, 96px) 0 clamp(26px, 4vh, 52px);
}

.case {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 18px);
  min-width: 0;
  padding: clamp(26px, 2.9vw, 44px);
  border-radius: clamp(18px, 1.7vw, 26px);
  color: var(--encre-douce);
  background: transparent;
  border: 1.5px solid rgba(34, 22, 16, 0.18);
}

.case__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.9vw, 1.72rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  text-align: center;
  text-wrap: balance;      /* un titre sur deux lignes se répartit à peu près également */
  color: #2A1B0F;
}

.case__texte {
  margin: 0;
  font-size: clamp(0.94rem, 1.02vw, 1.04rem);
  line-height: 1.62;
  color: var(--encre-douce);
}

/* En dessous de trois de front, la lecture devient trop étroite : on empile */
@media (max-width: 860px) {
  .trio {
    grid-template-columns: 1fr;
    gap: clamp(14px, 2.4vh, 22px);
    width: min(560px, 100% - clamp(32px, 9vw, 64px));
  }
}

/* ============================================================
   RAPPEL DES ENGAGEMENTS (accueil) — quatre boîtes, deux par deux
   L'image ne sert que de fond : floutée et assombrie, elle apporte la couleur,
   le texte passe devant.
   ============================================================ */
.rappels {
  /* Plus large que les vitrines : c'est ce qui allonge les boîtes à l'horizontale */
  width: min(1420px, 100% - clamp(30px, 5vw, 84px));
  margin: 0 auto;
  padding: clamp(26px, 4vh, 54px) 0 clamp(60px, 10vh, 120px);
}

.rappels__titre {
  margin: 0 0 clamp(22px, 3.4vh, 40px);
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-align: center;
  color: #2A1B0F;
}

.rappels__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.1vw, 30px);
}

/* Rectangle franchement horizontal : la hauteur est bornée, le texte est coupé
   pour y tenir — c'est le bouton qui donne la suite. */
.rappel {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  min-height: clamp(206px, 24vh, 250px);
  overflow: hidden;
  border: 2px solid var(--encre);
  border-radius: clamp(18px, 1.7vw, 26px);
}

/* Floutée, saturée pour garder la couleur, assombrie pour que le texte tienne
   quelle que soit la photo. Agrandie, sinon le flou laisse voir les bords. */
.rappel__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(13px) saturate(1.45) brightness(0.7);
  transform: scale(1.18);
}

/* Voile d'encre : plus dense en bas, là où court le texte long */
.rappel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(176deg, rgba(24, 15, 10, 0.28), rgba(24, 15, 10, 0.56));
}

.rappel__contenu {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.8vh, 18px);
  padding: clamp(26px, 2.9vw, 42px);
}

.rappel__chapitre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(1.28rem, 1.85vw, 1.66rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: #FFF8EC;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}

/* Le texte complet est bien dans le HTML — lecteurs d'écran et moteurs le voient —
   mais on n'en montre que les premières lignes : il faut cliquer pour la suite. */
.rappel__texte {
  margin: 0;
  font-size: clamp(0.92rem, 1vw, 1.02rem);
  line-height: 1.6;
  color: rgba(250, 244, 234, 0.94);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* « Lire plus » : la pilule du site, en version claire pour tenir sur la photo */
.rappel__lien {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;            /* collé en bas, aligné d'une boîte à l'autre */
  padding: 7px 7px 7px 20px;
  border-radius: 999px;
  border: 1px solid rgba(250, 244, 234, 0.34);
  background: rgba(24, 15, 10, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #FFF8EC;
  transition:
    background-color 0.42s var(--panneau-bez),
    border-color 0.42s var(--panneau-bez),
    transform 0.42s var(--panneau-bez);
}
.rappel__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(250, 244, 234, 0.16);
  color: var(--dore-clair);
  transition: transform 0.42s var(--panneau-bez), background-color 0.42s var(--panneau-bez);
}
.rappel__pastille .ico-fleche { width: 13px; height: 13px; }

.rappel__lien:hover {
  border-color: rgba(223, 175, 92, 0.6);
  background: rgba(24, 15, 10, 0.42);
  transform: translateY(-1.5px);
}
.rappel__lien:hover .rappel__pastille {
  background: rgba(223, 175, 92, 0.28);
  transform: translate(3px, -1px) scale(1.07);
}
.rappel__lien:active { transform: translateY(0) scale(0.98); }

/* Tablette : deux de front encore, mais les colonnes se resserrent — on rend
   une ligne de texte pour que l'extrait garde du sens. */
@media (max-width: 1080px) {
  .rappel { min-height: clamp(196px, 26vh, 232px); }
  .rappel__texte { -webkit-line-clamp: 4; line-clamp: 4; }
}

/* Téléphone : une par ligne, la boîte s'étire de bord à bord */
@media (max-width: 760px) {
  .rappels { width: min(560px, 100% - clamp(32px, 9vw, 64px)); }
  .rappels__grille { grid-template-columns: 1fr; gap: clamp(14px, 2.4vh, 22px); }
  .rappel { min-height: clamp(178px, 23vh, 214px); }
  .rappel__texte { -webkit-line-clamp: 3; line-clamp: 3; }
}

/* ============================================================
   VITRINES (accueil) — chaque catégorie défile doucement
   Les cartes réutilisent .produit / .produit__carte : le survol et sa
   contrepartie tactile viennent avec, sans recopier une seule valeur.
   ============================================================ */
.vitrines {
  display: grid;
  gap: clamp(34px, 5.5vh, 68px);
  padding: clamp(18px, 3.5vh, 44px) clamp(16px, 4vw, 62px) clamp(80px, 12vh, 140px);
  background: var(--creme);
}

/* min-width: 0 — sans lui, l'élément de grille s'étire à la largeur du ruban
   (plusieurs milliers de pixels) et c'est toute la page qui défile de côté. */
.vitrine {
  --ecart-vitrine: clamp(26px, 3.2vw, 52px);
  --cadre: #221610;
  position: relative;
  min-width: 0;
  /* Chaque catégorie est une boîte : liseré d'encre tout autour, coins adoucis,
     et `overflow: hidden` pour que le ruban soit bien coupé par l'arrondi. */
  overflow: hidden;
  border: 2px solid var(--cadre);
  border-radius: clamp(18px, 1.7vw, 26px);
  padding: clamp(30px, 4vh, 46px) 0 clamp(24px, 3.2vh, 38px);
  /* Le même papier que tout le site : c'est le liseré qui dessine la boîte,
     pas une teinte. La nacre du premier jet créait un écart de ton visible. */
  background: transparent;
}

.vitrine__tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 36px;
  /* Retrait mesuré depuis le liseré de la boîte, pas depuis le bord de l'écran */
  padding: 0 clamp(22px, 3.4vw, 48px);
  margin: 0 0 clamp(20px, 3vh, 34px);
}

.vitrine__titre {
  margin: 0;
  min-width: 0;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(1.55rem, 2.6vw, 2.35rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: #2A1B0F;
}

/* Lien de catégorie : pilule à liseré fin + flèche dans sa propre pastille,
   même grammaire que le Portail client, en plus discret.
   L'extrait de l'histoire réutilise le même composant — une seule source. */
.vitrine__lien,
.recit__lien {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 7px 7px 20px;
  border-radius: 999px;
  border: 1px solid rgba(35, 23, 16, 0.14);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--encre-douce);
  transition:
    color 0.42s var(--panneau-bez),
    border-color 0.42s var(--panneau-bez),
    background-color 0.42s var(--panneau-bez),
    transform 0.42s var(--panneau-bez);
}
.vitrine__pastille,
.recit__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(192, 138, 58, 0.13);
  color: var(--dore);
  transition:
    transform 0.42s var(--panneau-bez),
    background-color 0.42s var(--panneau-bez);
}
.vitrine__pastille .ico-fleche,
.recit__pastille .ico-fleche { width: 13px; height: 13px; }

.vitrine__lien:hover,
.recit__lien:hover {
  color: var(--encre);
  border-color: rgba(192, 138, 58, 0.5);
  background: rgba(192, 138, 58, 0.07);
  transform: translateY(-1.5px);
}
.vitrine__lien:hover .vitrine__pastille,
.recit__lien:hover .recit__pastille {
  background: rgba(192, 138, 58, 0.22);
  transform: translate(3px, -1px) scale(1.07);
}
.vitrine__lien:active,
.recit__lien:active { transform: translateY(0) scale(0.98); }

/* La piste : deux rubans identiques à la file, les bords s'estompent.
   Les marges hautes et basses ne sont pas décoratives : au survol la carte monte
   de 18 px et grossit de 8 %, et son halo déborde — sans cette réserve,
   `overflow: hidden` couperait le pain. */
.vitrine__piste {
  display: flex;
  min-width: 0;
  /* Réserve haute : au survol la carte monte de 18 px et grossit de 8 %.
     Avec ce visuel, il faut ~24 px — on en garde 28 au minimum. */
  padding: clamp(28px, 3.4vh, 38px) 0 clamp(24px, 3vh, 34px);
  overflow: hidden;
  /* Fondu court aux deux bouts : les produits se dissolvent juste avant le liseré
     de la boîte, plutôt que d'être tranchés net par lui. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent);
}

.vitrine__ruban {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: var(--ecart-vitrine);
  /* Le talon droit fait respirer la jointure entre les deux rubans. Il compte dans la
     largeur (border-box), donc le -100 % de l'animation reste juste. */
  padding: 0 var(--ecart-vitrine) 0 0;
  margin: 0;
  list-style: none;
  /* `reverse` = les produits vont de la gauche vers la droite.
     Durée proportionnelle au nombre de cartes : la vitesse reste la même partout (~38 px/s). */
  animation: defile calc(var(--n, 6) * 7s) linear infinite reverse;
}

@keyframes defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.vitrine__ruban .produit {
  flex: 0 0 auto;
  width: clamp(138px, 12.4vw, 174px);
}
.vitrine__ruban .produit__visuel { height: clamp(114px, 10.3vw, 146px); }
.vitrine__ruban .produit__nom { font-size: clamp(0.88rem, 0.94vw, 1rem); }

/* Pas de cascade d'entrée ici : les cartes défilent déjà */
.is-ready .vitrine .produit { animation: none; }

/* ---------- Arrivée de la bande dans le champ de vision ----------
   États par défaut visibles : sans JS (donc sans `est-entre`), rien ne manque. */
.is-ready .vitrine.est-entre .vitrine__titre {
  animation: montee 0.9s var(--sortie-douce) 0.06s both;
}
.is-ready .vitrine.est-entre .vitrine__lien {
  animation: montee 0.9s var(--sortie-douce) 0.16s both;
}
.is-ready .vitrine.est-entre .vitrine__piste {
  animation: revele 1.1s var(--sortie-douce) 0.3s both;
}
@keyframes revele {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Sur ordinateur, le survol arrête le ruban : on peut lire et cliquer */
@media (hover: hover) {
  .vitrine__piste:hover .vitrine__ruban,
  .vitrine__piste:focus-within .vitrine__ruban { animation-play-state: paused; }
}

@media (max-width: 700px) {
  .vitrine {
    padding: clamp(24px, 3.2vh, 36px) 0 clamp(20px, 2.8vh, 30px);
    border-radius: clamp(14px, 3.6vw, 20px);
  }
  .vitrine__tete {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
  .vitrine__ruban .produit { width: clamp(130px, 36vw, 158px); }
  .vitrine__ruban .produit__visuel { height: clamp(108px, 30vw, 132px); }
}

/* Mouvement réduit : rien ne bouge, la piste se parcourt au doigt.
   Le JS ne pose alors pas le second ruban (pas de doublon à l'écran). */
@media (prefers-reduced-motion: reduce) {
  .vitrine__ruban { animation: none; }
  .vitrine__piste {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-inline: clamp(18px, 4vw, 55px);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .vitrine__ruban .produit { scroll-snap-align: center; }
}

/* ============================================================
   FICHE PRODUIT — le titre seul, centré sur un écran
   ============================================================ */
.fiche-scene { min-height: 100vh; min-height: 100dvh; }   /* pas de piste : la scène tient dans un écran */

.fiche-scene__colle {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
  --taille-titre: clamp(2.6rem, 7.5vw, 6.8rem);   /* chaque fiche règle sa taille de titre */
  --largeur-titre: min(92vw, 15ch);
}

.fiche-titre {
  margin: 0;
  position: relative;
  z-index: 2;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: var(--taille-titre);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #2A1B0F;
  text-align: center;
  max-width: var(--largeur-titre);
}

/* Espace vierge sous la scène (le descriptif viendra là) */
.fiche-suite { height: 72vh; }

/* ============================================================
   FORMULAIRE DE CONTACT — page « Travailler avec nous »
   Même vocabulaire que le reste : papier ivoire, encre, or de blé.
   ============================================================ */
.contact {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(120px, 17vh, 180px) 24px clamp(90px, 12vh, 130px);
}

.contact__entete {
  width: min(720px, 100%);
  text-align: center;
}

/* La marque en filet au-dessus du titre : on annonce la maison, pas un deuxième logo */
.contact__marque {
  margin: 0 0 clamp(18px, 2.5vh, 26px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--dore);
}

.contact__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: #2A1B0F;
}

.contact__chapeau {
  margin: clamp(20px, 3vh, 30px) 0 0;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--encre-douce);
}

/* Un filet doré sépare l'accroche de l'en-tête, comme une manchette de journal */
.contact__accroche {
  position: relative;
  margin: clamp(24px, 3.4vh, 34px) auto 0;
  padding-top: clamp(24px, 3.4vh, 34px);
  max-width: 34rem;
  font-family: var(--police-titre);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.45;
  color: var(--encre);
}
.contact__accroche::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 54px; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--dore), transparent);
}

/* ---------- Le formulaire ---------- */
.formulaire {
  width: min(680px, 100%);
  margin: clamp(48px, 8vh, 84px) 0 0;
}

/* Grille à deux colonnes : les champs longs la traversent, les courts se rangent par deux.
   Un champ = un <li>, pour que la numérotation reste 1…7 sans doublon. */
.formulaire__liste {
  counter-reset: champ;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 4.4vh, 44px) clamp(18px, 2.6vw, 28px);
}

.champ {
  counter-increment: champ;
  min-width: 0;
  grid-column: 1 / -1;
}
.champ--demi { grid-column: span 1; }

/* Le numéro en or, à la façon d'une manchette : hors du flux, il ne pousse rien */
.champ__label {
  position: relative;
  display: block;
  padding-left: 30px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre);
}
.champ__label::before {
  content: counter(champ);
  position: absolute;
  left: 0; top: -0.1em;
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dore);
}

.champ__aide {
  margin: 7px 0 0 30px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--encre-douce);
}

.champ__saisie {
  width: 100%;
  margin-top: 13px;
  padding: 14px 17px;
  font-family: var(--police-ui);
  font-size: 1rem;
  color: var(--encre);
  background: rgba(255, 253, 249, 0.75);
  border: 1px solid rgba(35, 23, 16, 0.13);
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(35, 23, 16, 0.04);
  transition:
    border-color 0.35s var(--panneau-bez),
    box-shadow 0.35s var(--panneau-bez),
    background-color 0.35s var(--panneau-bez);
}
.champ__saisie::placeholder { color: rgba(90, 70, 50, 0.5); }

.champ__saisie:hover { border-color: rgba(35, 23, 16, 0.22); }

.champ__saisie:focus {
  outline: none;
  background: #FFFDF9;
  border-color: var(--dore);
  box-shadow:
    inset 0 1px 2px rgba(35, 23, 16, 0.04),
    0 0 0 3px rgba(192, 138, 58, 0.16);
}

/* Le navigateur ne signale l'erreur qu'après une tentative d'envoi, jamais en cours de frappe */
.formulaire.a-ete-soumis .champ__saisie:invalid {
  border-color: #B4553F;
  box-shadow: 0 0 0 3px rgba(180, 85, 63, 0.13);
}

.champ__saisie--zone {
  resize: vertical;
  min-height: 132px;
  line-height: 1.55;
}

/* ---------- Adresse : suggestions de la Base Adresse Nationale ---------- */
.auto { position: relative; }

.auto__liste {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0; right: 0;
  max-height: 302px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 7px;
  list-style: none;
  border-radius: 18px;
  background: rgba(252, 249, 243, 0.94);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(35, 23, 16, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 24px 48px -16px rgba(35, 23, 16, 0.28),
    0 4px 12px -6px rgba(35, 23, 16, 0.12);
}
.auto__liste[hidden] { display: none; }

.auto__option {
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--encre);
  cursor: pointer;
  transition: background-color 0.22s var(--panneau-bez);
}
.auto__option[aria-selected="true"] { background: rgba(192, 138, 58, 0.13); }
.auto__option:hover { background: rgba(192, 138, 58, 0.09); }

/* La partie déjà tapée reste en or : on voit ce que la proposition complète */
.auto__option b { color: var(--dore); font-weight: 600; }

.auto__option--vide {
  color: var(--encre-douce);
  cursor: default;
  font-style: italic;
}
.auto__option--vide:hover { background: none; }

/* ---------- Pied du formulaire ---------- */
.formulaire__pied {
  margin-top: clamp(34px, 5vh, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.envoi {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 11px 11px 11px 26px;
  border-radius: 999px;
  background: var(--espresso);
  color: var(--lin);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px -12px rgba(36, 24, 18, 0.45);
  transition:
    transform 0.45s var(--panneau-bez),
    background-color 0.45s var(--panneau-bez),
    box-shadow 0.45s var(--panneau-bez),
    opacity 0.3s;
}
.envoi__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(250, 246, 239, 0.14);
  color: var(--dore-clair);
  transition: transform 0.45s var(--panneau-bez), background-color 0.45s var(--panneau-bez);
}
.envoi__pastille .ico-fleche { width: 15px; height: 15px; }
.envoi:hover {
  background: var(--espresso-hover);
  transform: translateY(-1.5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 16px 32px -12px rgba(36, 24, 18, 0.5);
}
.envoi:hover .envoi__pastille {
  background: rgba(250, 246, 239, 0.22);
  transform: translate(2px, -1px) scale(1.06);
}
.envoi:active { transform: translateY(0) scale(0.97); }

/* Pendant l'envoi : la flèche tourne, le bouton refuse un second clic */
.envoi[disabled] { opacity: 0.62; cursor: progress; transform: none; }
.envoi[disabled] .envoi__pastille { animation: tourne 0.9s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

.formulaire__mention {
  margin: 0;
  max-width: 30rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--encre-douce);
}

.formulaire__erreur {
  margin: clamp(26px, 3.6vh, 34px) 0 0;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(180, 85, 63, 0.3);
  background: rgba(180, 85, 63, 0.07);
  font-size: 0.92rem;
  line-height: 1.5;
  color: #8E4231;
}
.formulaire__erreur[hidden] { display: none; }

/* ---------- Remerciement (remplace le formulaire) ---------- */
.merci {
  width: min(560px, 100%);
  margin: clamp(48px, 8vh, 84px) 0 0;
  text-align: center;
}
.merci[hidden] { display: none; }

.merci__sceau {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px; height: 66px;
  margin: 0 auto;
  border-radius: 50%;
  color: var(--dore);
  background: rgba(192, 138, 58, 0.11);
  border: 1px solid rgba(192, 138, 58, 0.26);
}
.merci__sceau svg { width: 30px; height: 30px; }

.merci__titre {
  margin: clamp(22px, 3vh, 30px) 0 0;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #2A1B0F;
}

.merci__texte {
  margin: clamp(16px, 2.4vh, 22px) 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--encre-douce);
}

.merci__signature {
  margin: clamp(22px, 3vh, 28px) 0 0;
  font-family: var(--police-titre);
  font-size: 1.18rem;
  color: var(--dore);
}

/* L'arrivée du remerciement, une fois le JS passé */
.is-ready .merci:not([hidden]) {
  animation: montee 0.75s var(--sortie-douce) both;
}

@media (max-width: 560px) {
  .champ--demi { grid-column: 1 / -1; }
  .envoi { width: 100%; justify-content: space-between; }
}

/* ============================================================
   QUI SOMMES-NOUS — les deux fondateurs, puis l'histoire
   ============================================================ */
/* Les deux bulles en quinconce : la première tire à gauche, la seconde passe
   dessous en tirant à droite. Les colonnes se chevauchent volontairement. */
.duo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* Rangées à hauteur identique : sans ça la bulle à deux distinctions est plus
     haute que celle à une, et les deux ne se ressemblent plus. */
  grid-auto-rows: 1fr;
  gap: clamp(24px, 4vh, 52px) 0;
  width: min(1120px, 100% - clamp(32px, 8vw, 110px));
  margin: 0 auto;
  padding: 0 0 clamp(54px, 9vh, 108px);
}

/* Même empan de colonnes des deux côtés, et pas de `justify-self` : sans ça
   chaque bulle se dimensionne sur son contenu et elles finissent inégales. */
.fiche-perso--gauche { grid-column: 1 / span 9; }
.fiche-perso--droite { grid-column: 4 / span 9; }

/* Même grammaire que les trois cases de l'accueil : transparent, c'est le liseré
   qui dessine. Rayon plus généreux, pour que ça se lise comme une bulle. */
.fiche-perso {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.8vw, 42px);
  min-width: 0;
  padding: clamp(22px, 2.5vw, 36px) clamp(26px, 3vw, 46px);
  border: 1.5px solid rgba(34, 22, 16, 0.18);
  border-radius: clamp(22px, 2.4vw, 34px);
}

/* Le portrait se pose du côté extérieur : à gauche pour la bulle de gauche,
   à droite pour celle de droite. */
.fiche-perso--droite { flex-direction: row-reverse; text-align: right; }

.fiche-perso__mots {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1vh, 11px);
  min-width: 0;
}

.fiche-perso__portrait {
  flex: 0 0 auto;
  width: clamp(104px, 12.5vw, 158px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(34, 22, 16, 0.16);
}

/* En attendant les photos */
.fiche-perso__portrait--attente {
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-style: dashed;
  border-color: rgba(34, 22, 16, 0.22);
  background: rgba(35, 23, 16, 0.03);
}
.fiche-perso__portrait--attente::after {
  content: "Photo à venir";
  font-family: var(--police-ui);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
  color: var(--encre-douce);
}

.fiche-perso__nom {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(1.85rem, 3.1vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: #2A1B0F;
}

.fiche-perso__role {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--dore);
}

.fiche-perso__titres {
  margin: clamp(8px, 1.2vh, 14px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(10px, 1.4vh, 15px);
}

/* Un filet doré ouvre chaque distinction, sans puce ni tiret.
   Il s'aligne sur le bord du texte, donc à droite dans la bulle de droite. */
.fiche-perso__titres li {
  position: relative;
  padding-top: 13px;
  font-family: var(--police-titre);
  font-size: clamp(0.98rem, 1.12vw, 1.13rem);
  line-height: 1.42;
  color: var(--encre-douce);
}
.fiche-perso__titres li::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 30px; height: 1px;
  background: linear-gradient(90deg, var(--dore), transparent);
}
.fiche-perso--droite .fiche-perso__titres li::before {
  left: auto; right: 0;
  background: linear-gradient(90deg, transparent, var(--dore));
}

.fiche-perso__titres sup { font-size: 0.62em; vertical-align: 0.42em; }

.histoire {
  width: min(720px, 100% - clamp(32px, 8vw, 110px));
  margin: 0 auto;
}

.histoire__titre {
  margin: 0 0 clamp(22px, 3.4vh, 40px);
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-align: center;
  color: #2A1B0F;
}

/* Un seul bloc, d'une seule coulée : pas de paragraphes détachés, et la fin
   ne se distingue plus du reste. */
.histoire__texte p {
  margin: 0;
  font-size: clamp(1rem, 1.08vw, 1.09rem);
  line-height: 1.75;
  color: var(--encre-douce);
}

/* Écrans étroits : plus de quinconce, les bulles prennent toute la largeur et
   le portrait passe au-dessus, centré — côte à côte le texte serait illisible. */
@media (max-width: 760px) {
  .fiche-perso--gauche,
  .fiche-perso--droite {
    grid-column: 1 / -1;
    justify-self: stretch;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(14px, 2.2vh, 22px);
  }
  .fiche-perso__mots { align-items: center; }
  .fiche-perso__titres li::before,
  .fiche-perso--droite .fiche-perso__titres li::before {
    left: 50%; right: auto;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--dore), transparent);
  }
}

/* ============================================================
   EXTRAIT DE L'HISTOIRE (accueil) — quelques lignes, puis le lien
   ============================================================ */
.recit {
  width: min(760px, 100% - clamp(32px, 8vw, 110px));
  margin: 0 auto;
  padding: clamp(46px, 7.5vh, 96px) 0 clamp(20px, 3vh, 40px);
  text-align: center;
}

.recit__titre {
  margin: 0 0 clamp(20px, 3vh, 34px);
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: #2A1B0F;
}

/* Huit lignes, pas une de plus. Le dégradé de sortie dit qu'il y a une suite —
   plus élégant qu'une coupe nette, et ça appelle le clic. */
.recit__texte {
  --lignes: 8;
  --interligne: 1.78;
  display: grid;
  gap: clamp(12px, 1.8vh, 20px);
  max-height: calc(var(--lignes) * var(--interligne) * 1em);
  overflow: hidden;
  text-align: left;
  font-size: clamp(1rem, 1.08vw, 1.09rem);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.12));
  mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.12));
}

.recit__texte p {
  margin: 0;
  line-height: var(--interligne);
  color: var(--encre-douce);
}

.recit__pied {
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, 3vh, 32px);
}

@media (max-width: 700px) {
  .recit__texte { --lignes: 10; }
}

/* ============================================================
   MOUVEMENT RÉDUIT — tout reste visible, rien ne bouge
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}