/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
}

.hero__track {
  position: relative;
  height: 100%;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* visibility retire aussi les liens de l'ordre de tabulation ; le délai
     égal à la durée du fondu la fait basculer une fois la transition finie,
     pour que le fondu croisé reste identique. */
  visibility: hidden;
  transition:
    opacity 700ms var(--ease-out),
    visibility 0s linear 700ms;
  pointer-events: none;
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 700ms var(--ease-out),
    visibility 0s linear 0s;
  pointer-events: auto;
}

.hero__bg {
  position: absolute;
  inset: 0;
  margin: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(44, 31, 20, 0.72) 0%,
    rgba(44, 31, 20, 0.35) 60%,
    rgba(44, 31, 20, 0.08) 100%
  );
}

.hero__content {
  position: absolute;
  bottom: 18%;
  left: 0;
  right: 0;
  z-index: 2;
}

.hero__eyebrow {
  font-family: var(--font-hero);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  display: block;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  color: var(--color-bg);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-xs);
  max-width: 22ch;
}

.hero__script {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  line-height: 1;
  display: block;
}

.btn--hero {
  background: transparent;
  border-color: rgba(250, 247, 242, 0.7);
  color: var(--color-bg);
}

.btn--hero:hover,
.btn--hero:focus-visible {
  background: var(--color-bg);
  border-color: var(--color-bg);
  color: var(--color-text);
}

/* ------------------------------------------------------------
   BOUTON À FLUX SUR PHOTOGRAPHIE
   Même mécanique que « Nous contacter » et « Envoyer ma demande », mais
   inversée : sur un fond sombre, c'est le crème qui doit se lire au repos et
   le disque qui doit être clair. Au survol, le libellé et les flèches passent
   au brun profond, sur le disque crème.
   Le fond plein de .btn--hero:hover est neutralisé : ici c'est le disque qui
   remplit — sans quoi les deux se superposeraient.
   ------------------------------------------------------------ */
.btn--flow.btn--hero {
  border-color: rgba(250, 247, 242, 0.7);
  color: var(--color-bg);
}

.btn--flow.btn--hero::before,
.btn--flow.btn--hero::after {
  background-color: var(--color-bg);
}

.btn--flow.btn--hero .btn__flow-fill {
  background: var(--color-bg);
}

.btn--flow.btn--hero:hover,
.btn--flow.btn--hero:focus-visible {
  background: transparent;
  border-color: transparent;
  color: var(--color-text);
}

.btn--flow.btn--hero:hover::before,
.btn--flow.btn--hero:focus-visible::before,
.btn--flow.btn--hero:hover::after,
.btn--flow.btn--hero:focus-visible::after {
  background-color: var(--color-text);
}

/* Contrôles */
.hero__controls {
  position: absolute;
  bottom: var(--spacing-lg);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  z-index: 10;
}

.hero__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(250, 247, 242, 0.12);
  border: 1px solid rgba(250, 247, 242, 0.3);
  color: var(--color-bg);
  cursor: pointer;
  transition: background var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out);
}

.hero__arrow:hover,
.hero__arrow:focus-visible {
  background: rgba(250, 247, 242, 0.25);
  border-color: rgba(250, 247, 242, 0.65);
}

/* Barres de progression du slider */
.hero__bars {
  display: flex;
  gap: 6px;
  align-items: center;
}

.hero__bar {
  width: 40px;
  height: 3px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(250, 247, 242, 0.30);
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
  transition: opacity var(--duration) var(--ease-out);
}

/* Zone tactile de 40 × 25 px autour d'une barre qui reste visuellement
   de 3 px. Un pseudo-élément plutôt qu'une hauteur réelle : la barre ne
   bouge pas d'un pixel et la rangée de contrôles garde sa position. */
.hero__bar::after {
  content: '';
  position: absolute;
  inset: -11px 0;
}

.hero__bar:hover,
.hero__bar:focus-visible {
  opacity: 0.75;
}

.hero__bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: rgba(250, 247, 242, 0.95);
  border-radius: 2px;
}

/* ============================================================
   SECTIONS PLEINE PAGE
   Chaque section occupe au minimum la hauteur de l'écran et centre son
   contenu. min-height (et non height) : une section plus longue que
   l'écran s'étend normalement au lieu d'être rognée.
   ============================================================ */
.section-products,
.section-about,
.section-moments,
.section-news {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============================================================
   SECTION PRODUITS
   ============================================================ */
.section-products {
  padding: var(--spacing-xl) 0;
}

/* ---- En-tête : texte gauche + boutons droite ---- */
.section-products__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.section-products__header-text {
  display: flex;
  flex-direction: column;
}

.section-products__nav {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  padding-bottom: 0.125rem;
}

.section-products__btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--color-primary);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: background var(--duration) var(--ease-out),
              color var(--duration) var(--ease-out),
              opacity var(--duration);
}

.section-products__btn:hover:not(:disabled) {
  background: var(--color-primary);
}

.section-products__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.section-products__eyebrow {
  display: block;
  font-family: var(--font-hero);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--spacing-xs);
}

.section-products__title {
  margin-bottom: var(--spacing-xs);
}

.section-products__script {
  font-family: var(--font-script);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-sm);
  line-height: 1.2;
  display: block;
  max-width: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

.section-products__intro {
  /* Assez large pour tenir sur 2 lignes et garder la section dans l'écran */
  max-width: 72ch;
  color: var(--color-text-light);
  font-size: 1rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

.section-products__script.is-visible,
.section-products__intro.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sans JavaScript, .is-visible n'arrive jamais et la revendication centrale
   de la marque — « reproduire le geste du cuisinier » — resterait invisible
   pour toujours. La classe .no-js est retirée dans le <head> avant le premier
   rendu : quand le script tourne, cette règle ne s'applique pas et l'apparition
   au défilement est exactement celle d'avant. */
.no-js .section-products__script,
.no-js .section-products__intro {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .section-products__script,
  .section-products__intro {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ---- Track (pleine largeur) ---- */
.section-products__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-left: max(var(--spacing-md), calc((100vw - 1200px) / 2 + var(--spacing-md)));
  padding-right: max(var(--spacing-md), calc((100vw - 1200px) / 2 + var(--spacing-md)));
  scroll-padding-inline-start: max(var(--spacing-md), calc((100vw - 1200px) / 2 + var(--spacing-md)));
}

.section-products__track::-webkit-scrollbar {
  display: none;
}

/* ---- Cards overlay ---- */
.product-card {
  flex-shrink: 0;
  width: 340px;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
}

.product-card__link {
  display: block;
  position: relative;
  /* S'adapte aux écrans peu hauts pour que la section tienne dans la page,
     sans dépasser la hauteur d'origine sur grand écran. */
  height: clamp(320px, 44vh, 420px);
  text-decoration: none;
  color: inherit;
}

.product-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}

.product-card:hover .product-card__image {
  transform: scale(1.04);
}

.product-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(44, 31, 20, 0.88) 0%,
    rgba(44, 31, 20, 0.20) 55%,
    transparent 100%
  );
}

.product-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-lg) var(--spacing-md);
}

.product-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-bg);
  margin-bottom: var(--spacing-xs);
  line-height: 1.2;
}

.product-card__desc {
  font-size: 0.875rem;
  color: rgba(250, 247, 242, 0.75);
  margin-bottom: var(--spacing-sm);
  line-height: 1.65;
  max-width: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-hero);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  transition: gap var(--duration) var(--ease-out);
}

.product-card:hover .product-card__cta {
  gap: 0.7rem;
}

/* ---- Dots ---- */
.section-products__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Sans écart : les boutons de 24 px se touchent sans se chevaucher, et
     l'espace visible entre deux points reste celui d'avant (8 px autour
     du point actif). Un écart en plus écarterait les points inutilement. */
  gap: 0;
  margin-top: var(--spacing-md);
  padding: 0;
  list-style: none;
}

/* Le bouton porte la zone tactile de 24 × 24 px ; le point visible est
   dessiné par ::before et garde ses dimensions d'origine (8 px, 24 px
   à l'état actif). Le point ne change ni de taille ni de forme. */
.section-products__dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.section-products__dot::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-primary);
  opacity: 0.3;
  transition: opacity var(--duration) var(--ease-out),
              width var(--duration) var(--ease-out);
}

.section-products__dot.is-active::before {
  opacity: 1;
  width: 24px;
}

/* ============================================================
   SECTION ABOUT
   ============================================================ */
.section-about {
  padding: var(--spacing-2xl) 0;
  background: var(--color-bg-alt);
}

.section-about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
  align-items: stretch;
}

.section-about__image-col {
  display: flex;
  flex-direction: column;
}

.section-about__figure {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.section-about__figure img {
  width: 100%;
  flex: 1;
  min-height: 400px;
  object-fit: cover;
  border-radius: 12px;
  /* Seule l'ombre portée est retirée — 0 10px 40px rgba(44,31,20,0.2), qui
     faisait flotter la photographie. La seconde valeur reste : ce n'est pas
     une ombre mais un liseré, un trait de 1 px en beige doré obtenu par un
     rayon d'étalement sans décalage ni flou. Le filet est un élément du
     système, l'élévation n'en était pas un. */
  box-shadow: 0 0 0 1px rgba(203, 187, 160, 0.4);
}

.section-about__caption {
  display: block;
  margin-top: var(--spacing-xs);
  font-family: var(--font-label);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--color-text-light);
}

.section-about__eyebrow {
  display: block;
  font-family: var(--font-hero);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--spacing-sm);
}

.section-about__title {
  margin-bottom: var(--spacing-md);
}

.section-about__text {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
  font-size: 1rem;
  line-height: 1.8;
  max-width: none;
}

.section-about__facts {
  display: flex;
  /* Centrés comme le bouton qui les suit : les deux éléments de la colonne
     qui ne sont pas du texte courant partagent le même axe. */
  justify-content: center;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  list-style: none;
  flex-wrap: wrap;
}

.section-about__facts li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Les trois repères, l'un après l'autre — mais réglés sur la FIN du compte,
   pas sur son départ. « IFS » ne paraît qu'une fois 1985 réellement posé :
   sinon il arrivait au milieu du défilement des chiffres, et l'on voyait
   deux repères pendant qu'un troisième cherchait encore sa valeur.

   1400 ms n'est pas un chiffre libre : c'est la durée du compte, DURATION
   dans le module de main.js. Les deux valeurs doivent rester égales, et le
   banc compteur.mjs le vérifie — modifier l'une sans l'autre fait tomber une
   assertion au lieu de désaccorder la séquence en silence.

     0 ms      1985 paraît et commence à monter
     1400 ms   1985 est posé — IFS paraît
     1600 ms   +15 % paraît et commence à monter (data-count-delay identique)
     3000 ms   +15 % est posé

   Sous mouvement réduit ou sans script, les trois sont là d'emblée : les
   délais n'ont pas d'effet et les chiffres portent déjà leur valeur finale. */
.section-about__facts li.js-reveal:nth-child(1) { transition-delay: 0ms; }
.section-about__facts li.js-reveal:nth-child(2) { transition-delay: 1400ms; }
.section-about__facts li.js-reveal:nth-child(3) { transition-delay: 1600ms; }

.section-about__fact-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent-text);
  line-height: 1;
}

.section-about__facts span {
  font-size: 0.8rem;
  color: var(--color-text-light);
  letter-spacing: 0.04em;
}

/* Bouton centré dans sa colonne (le texte, lui, reste aligné à gauche) */
.section-about__text-col > .btn {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

/* ============================================================
   SECTION MOMENTS
   ============================================================ */
.section-moments {
  position: relative;
  padding: var(--spacing-2xl) 0;
  isolation: isolate;
}

.section-moments::before {
  display: none;
}

.section-moments::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--color-bg) 0%, transparent 90px),
    linear-gradient(to top,    var(--color-bg) 0%, transparent 90px);
  pointer-events: none;
  z-index: -1;
}

.section-moments__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.section-moments__header {
  text-align: center;
}

.section-moments__eyebrow {
  display: block;
  font-family: var(--font-hero);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  opacity: 1;
  margin-bottom: var(--spacing-xs);
  text-align: left;
}

.section-moments__title {
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

.section-moments__script {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--color-text-light);
  line-height: 1.2;
  max-width: none;
  text-align: center;
}

.moments-carousel {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding-bottom: 4px; /* évite le clip de l'ombre */
}

.moments-carousel::-webkit-scrollbar {
  display: none;
}

.moments-carousel.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.moments-carousel__item {
  flex: 0 0 calc(33.333% - var(--spacing-sm));
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: 12px;
  margin: 0;
}

.moments-carousel__item img {
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 500ms var(--ease-out);
  pointer-events: none;
}

.moments-carousel__item:hover img {
  transform: scale(1.03);
}

.section-moments__cta {
  text-align: center;
}

.btn--light {
  --btn-fill: var(--color-accent);
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

.btn--light:hover,
.btn--light:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* ============================================================
   SECTION NEWS
   ============================================================ */
.section-news {
  padding: var(--spacing-2xl) 0;
  background: var(--color-bg-alt);
}

/* État vide de la section actualités — visible uniquement quand aucun
   article n'est publié dans la langue courante. Depuis que blog.css est
   chargé sur l'accueil, l'apparence vient de lui ; il ne reste ici que ce
   qu'il ne peut pas savoir : le message traverse la grille au lieu de se
   ranger dans sa première colonne. */
.section-news .post-archive-empty {
  grid-column: 1 / -1;
}

/* Séquence de la section actualités : le titre, puis les trois articles de
   gauche à droite.

   POURQUOI UNE ANIMATION ET NON UNE TRANSITION, ICI SEULEMENT
   .post-card déclare son propre raccourci `transition: box-shadow, transform`
   dans blog.css, chargé APRÈS style.css sur l'accueil. À spécificité égale,
   c'est lui qui l'emportait sur celui de .js-reveal — et comme opacity n'y
   figure pas, elle basculait de 0 à 1 d'un coup. Un transition-delay ne
   retarde que les propriétés effectivement transitionnées : les trois cartes
   apparaissaient donc ensemble, à l'instant du titre.
   Pire, ce délai s'appliquait au survol : la carte attendait 1,15 s avant de
   se soulever.
   Une @keyframes ne passe pas par transition-property et échappe au conflit.
   animation-fill-mode: backwards — et non both — pour qu'après l'animation la
   carte reprenne ses valeurs déclarées : le soulèvement au survol, en 0,22 s,
   retrouve la main.
   Les images clés vivent dans style.css : .stat-item, sur Qui sommes-nous,
   est dans le même cas et appelle la même animation. Le banc reveal-cascade
   tient la liste des composants autorisés à déroger.

   QUAND LA PREMIÈRE CARTE PART
   600 ms, et non la durée entière du titre. --ease-out vaut
   cubic-bezier(0.22, 1, 0.36, 1), une courbe très en avance : à 600 ms le
   titre est déjà à 96 % d'opacité, à 1150 ms il l'était à 100 % depuis
   longtemps. Attendre la fin nominale laissait un demi-seconde de vide.
   Le banc reveal-cascade.mjs recalcule cette courbe et vérifie que la
   première carte ne part jamais avant que le titre soit lisible. */
.section-news__title.js-reveal {
  transition-duration: 1200ms;
}

.section-news .post-card.js-reveal.is-visible {
  animation: mp-card-reveal 900ms var(--ease-out) backwards;
}

.section-news .post-card.js-reveal:nth-child(1).is-visible { animation-delay: 600ms; }
.section-news .post-card.js-reveal:nth-child(2).is-visible { animation-delay: 780ms; }
.section-news .post-card.js-reveal:nth-child(3).is-visible { animation-delay: 960ms; }

/* Mouvement réduit : aucune animation, la carte est simplement là. */
@media (prefers-reduced-motion: reduce) {
  .section-news .post-card.js-reveal.is-visible {
    animation: none;
  }
}

.section-news__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.section-news__title {
  margin: 0;
}

.section-news__all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-hero);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  transition: gap var(--duration) var(--ease-out);
}

.section-news__all:hover {
  gap: 0.7rem;
}/* Les trois cartes ont déjà la même hauteur : la grille les étire sur la
   hauteur de la rangée. Mais leur contenu ne l'occupait pas — le lien était
   un bloc à hauteur naturelle, si bien que « Lire l'article » se posait sous
   un titre de deux lignes ici, de trois lignes là, et flottait à trois
   hauteurs différentes.
   La chaîne carte → lien → corps est donc en colonne flexible, et seul
   « Lire l'article » porte margin-top: auto. Tout l'espace restant se
   rassemble au-dessus de lui : le lien tombe au ras du fond de sa carte,
   quelle que soit la longueur du titre ou du chapô. */

/* ============================================================
   SECTION QUALIFICATION B2B
   ============================================================ */
.section-b2b {
  padding: var(--spacing-2xl) 0;
  background: var(--color-bg);
  position: relative;
  isolation: isolate;
}

.section-b2b::before {
  content: '';
  position: absolute;
  inset: 80% 0 0 0;
  background-image: url("../images-opt/Fond/A4-vertical-grege.png");
  background-repeat: repeat;
  background-size: 700px auto;
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.section-b2b__inner {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--spacing-2xl);
  align-items: start;
  position: relative;
  z-index: 1;
}

.section-b2b__intro {
  padding-top: var(--spacing-lg);
}

.section-b2b__intro-sticky {
  position: sticky;
  top: calc(64px + var(--spacing-lg));
}

.section-b2b__eyebrow {
  display: block;
  font-family: var(--font-hero);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--spacing-sm);
}

.section-b2b__title {
  margin-bottom: var(--spacing-md);
}

.section-b2b__text {
  color: var(--color-text-light);
  font-size: 1rem;
  line-height: 1.8;
  max-width: none;
}

/* Formulaire.
   Le panneau était crème sur crème — la même couleur que la section qui le
   porte — entouré d'un brun à 35 % qui, composé sur ce fond, donnait un gris
   ≈ #8A8079. Il n'était donc pas un objet posé sur la page, mais une zone
   découpée dedans, et rien n'y désignait la marque.

   Trois déclarations, aucune géométrie : le fond de carte du système le
   décolle de la section, le beige doré — la couleur du macaron, celle qui
   identifie sans crier — remplace le gris, et le terracotta signe l'arête
   haute comme il le fait déjà sur les cartes de la page contact.

   Les épaisseurs restent à 2 px : la boîte de contenu ne bouge pas d'un
   pixel, et les champs conservent exactement leur largeur.

   Pas d'ombre : « plat au repos, l'ombre ne signale qu'un état ». */
/* Pot de miel : hors champ, sans hauteur, hors du pointeur et hors de la
   tabulation (tabindex="-1" côté balisage). Masquage identique à celui de
   .contact-form__hp dans contact.css, qui n'est pas chargé sur l'accueil.
   Ni display:none ni visibility:hidden : certains robots ignorent les champs
   ainsi masqués, et le piège ne prendrait plus. */
.qualification-form__hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

.qualification-form {
  background: #fff;
  padding: var(--spacing-xl);
  border: 2px solid rgba(44, 31, 20, 0.35);
  border-radius: 4px;
}

/* Réassurance sous le bouton d'envoi */
.qualification-form__reassurance {
  margin: var(--spacing-sm) 0 0;
  max-width: none;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-light);
  /* Les deux phrases sont en italique. Le <em> de la seconde reste dans le
     texte : il porte l'emphase, que l'italique du paragraphe rend seulement
     invisible ici. */
  font-style: italic;
}

.qualification-form__reassurance a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration) var(--ease-out);
}

.qualification-form__reassurance a:hover,
.qualification-form__reassurance a:focus-visible {
  color: var(--color-text);
}

/* Résumé d'erreurs en tête de formulaire */
.form-errors {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: #FFF8F8;
  border-left: 3px solid #e05252;
}

.form-errors[hidden] {
  display: none;
}

.form-errors:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.form-errors__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: #C53030;
}

.form-errors__list {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
}

.form-errors__list li {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #C53030;
}

.form-errors__list a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Message d'erreur attaché à un champ */
.form-field__error {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  color: #C53030;
}

.form-field__error[hidden] {
  display: none;
}

/* Le champ case à cocher est en ligne : le message passe sous la paire */
.form-field--checkbox .form-field__error {
  flex-basis: 100%;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
  margin-bottom: 0;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: var(--spacing-sm);
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label {
  font-family: var(--font-hero);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.form-field input:not([type="checkbox"]),
.form-field select,
.form-field textarea {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-muted);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  transition: border-color var(--duration) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  width: 100%;
}

/* Même repère de focus que le formulaire de contact : un seul anneau, posé
   sur le bord du champ par un outline-offset négatif. Sans lui, l'anneau
   global de style.css se dessinait 2 px au-dehors et doublait la bordure. */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
}

.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B4F35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.625rem;
}

/* Case à cocher — la coche se trace au lieu d'apparaître.
   Le crochet est un chemin SVG long de 9,9 unités : stroke-dasharray le
   couvre entièrement et stroke-dashoffset le rétracte. Ramener l'offset à
   zéro fait courir le trait de la pointe basse vers le haut en 200 ms. Le
   décrochage inverse, plus lent, le laisse repartir sans à-coup.
   La case reste un <input type="checkbox"> natif : le clic sur le libellé,
   la contrainte required, la tabulation et l'annonce vocale restent celles
   du navigateur. Aucun rôle ARIA n'est ajouté, aucun état n'est simulé.
   Bloc repris à l'identique dans contact.css, qui n'est pas chargé ici. */
.form-check {
  position: relative;
  display: inline-flex;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  transition: transform 200ms var(--ease-out);
}

.form-check:hover  { transform: scale(1.05); }
.form-check:active { transform: scale(0.95); }

.form-field--checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out);
}

.form-field--checkbox input[type="checkbox"]:checked {
  background: var(--color-accent);
}

.form-check__mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: #fff;
}

.form-check__mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  opacity: 0;
  transition: stroke-dashoffset 200ms var(--ease-out) 100ms,
              opacity 100ms var(--ease-out);
}

.form-check input[type="checkbox"]:checked ~ .form-check__mark path {
  stroke-dashoffset: 0;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .form-check,
  .form-check__mark path {
    transition: none;
  }
}

.form-field--checkbox label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text-light);
}

.form-field--checkbox label a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Champs en erreur + messages de formulaire : déplacés dans style.css
   (chargé globalement) pour servir aussi le formulaire de contact. */

/* ============================================================
   RESPONSIVE — HOME
   ============================================================ */
@media (max-width: 1024px) {
  /* Le header passe à 70px sous 1024px (navigation.css) : le hero doit
     soustraire la même valeur, sinon il déborde de 6px. */
  .hero {
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px);
  }

  .section-products__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .section-about__inner {
    gap: var(--spacing-xl);
  }

  .moments-carousel__item {
    flex: 0 0 calc(50% - var(--spacing-xs));
  }

  .section-b2b__intro-sticky {
    position: static;
  }
}

@media (max-width: 768px) {
  .hero__content {
    bottom: 22%;
  }

  .section-about__inner {
    grid-template-columns: 1fr;
  }

  .section-about__image-col {
    order: -1;
  }

  .section-b2b__inner {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .qualification-form {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  /* Les Moments : 2 colonnes à 768px (scroll snap) */
  .moments-carousel__item {
    flex: 0 0 calc(50% - var(--spacing-xs));
  }

  .section-about__facts {
    gap: var(--spacing-lg);
  }
}

@media (max-width: 480px) {
  /* Hero : viewport complet moins le header mobile (60px) */
  .hero {
    height: calc(100dvh - 60px);
  }

  .hero__overlay {
    background: linear-gradient(
      to top,
      rgba(44, 31, 20, 0.80) 0%,
      rgba(44, 31, 20, 0.40) 55%,
      rgba(44, 31, 20, 0.12) 100%
    );
  }

  .hero__content {
    bottom: 16%;
  }

  .hero__content {
    text-align: center;
  }

  .hero__title {
    font-size: 2.25rem;
    max-width: none;
    text-align: center;
  }

  .hero__script {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
  }

  .hero__controls {
    gap: var(--spacing-sm);
  }

  .hero__bar {
    width: 28px;
  }/* Grilles produits : 1 colonne */

  .product-card {
    width: 80vw;
    max-width: 300px;
  }

  /* Les Moments : 1 item visible */
  .moments-carousel__item {
    flex: 0 0 85%;
  }

  .section-about__facts {
    gap: var(--spacing-md);
  }

  .section-news__header {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* Même raison que pour le formulaire de contact : en dessous de 16 px, Safari
   sur iPhone agrandit la page dès qu'on touche un champ et ne la remet pas.
   Ajouté en fin de feuille — à spécificité égale, le dernier l'emporte. */
@media (max-width: 768px) {
  .form-field input:not([type="checkbox"]),
  .form-field select,
  .form-field textarea {
    font-size: 16px;
  }
}