/* Distribution ILLER — v2 « La Maison ILLER »
   Direction : le catalogue d'une maison de bouche. Typographie éditoriale
   (Archivo en capitales d'enseigne + Source Serif 4 en labeur), rouge de la
   marque utilisé comme un tampon d'encre, filets fins plutôt qu'ombres.
   Signature : l'estampille ovale « MAISON ILLER · DEPUIS 1962 ». */

/* woff2 uniquement : tout navigateur qui décode l'AVIF du site le supporte */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --ink: #1d1a17;            /* quasi-noir chaud : titres, bandes sombres */
  --ink-deep: #16120f;       /* pied de page */
  --paper: #fcfbf9;          /* fond de page */
  --linen: #f4f0e9;          /* bandes alternées */
  --smoke: #5c564f;          /* texte courant */
  --carmine: #be000e;        /* le rouge de la marque : accent, tampon, CTA */
  --carmine-deep: #93000b;
  --bone: #f3efe8;           /* texte sur fond sombre */
  --hairline: rgba(29, 26, 23, 0.16);
  --hairline-dark: rgba(243, 239, 232, 0.18);

  --serif: "Source Serif 4", Georgia, serif;
  --grot: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --content: 860px;          /* prose */
  --wide: 1200px;            /* sections */

  --fs-body: 17px;
  --fs-small: 14px;
  --fs-label: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--smoke);
  font-family: var(--serif);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; margin: 0; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); transition: color 0.15s; }
a:hover { color: var(--carmine); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--carmine); outline-offset: 2px; }

::selection { background: var(--carmine); color: #fff; }

/* ---------- layout ---------- */
.container { max-width: var(--content); margin-inline: auto; padding-inline: 24px; }
.wide      { max-width: var(--wide);    margin-inline: auto; padding-inline: 24px; }
.band       { padding-block: 76px; }
.band--tight { padding-block: 36px; }
.band--bottom { padding-bottom: 76px; }
.band--linen { background: var(--linen); }
.band--white { background: #fff; }
.center { text-align: center; }
.rounded { border-radius: 2px; }
.img-center { margin-inline: auto; }
.link-plain { color: inherit; }

/* skip link : visible seulement au clavier */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 1000;
  background: var(--ink);
  color: var(--bone);
  padding: 10px 16px;
  font-family: var(--grot);
  font-size: var(--fs-small);
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- devices typographiques ---------- */
/* le sur-titre : petites capitales grotesque + filet carmin */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--grot);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--carmine);
}
.eyebrow::before { content: ""; width: 28px; border-top: 2px solid var(--carmine); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { content: ""; width: 28px; border-top: 2px solid var(--carmine); }
.eyebrow--light { color: var(--bone); }

.section-head { margin-bottom: 40px; }
.section-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-weight: 600;
}

/* ---------- l'estampille (signature) ----------
   Le double ovale et son texte : la signature de la maison, en haut à gauche du
   héros. Elle ne contient que du texte à nous, donc la rotation et le blanc lui
   sont permis — contrairement au bloc des labels ci-dessous. */
.stamp { display: block; color: var(--carmine); }
.stamp text {
  font-family: var(--grot);
  fill: currentColor;
  text-transform: uppercase;
}
.stamp .t1 { font-size: 17.5px; font-weight: 800; font-stretch: 110%; letter-spacing: 0.04em; }
.stamp .t2 { font-size: 10.5px; font-weight: 600; letter-spacing: 0.28em; }
.stamp .t3 { font-size: 15px; font-weight: 700; letter-spacing: 0.14em; }
/* Coin bas droit du héros, sa place d'origine. Rien ne la contraint plus en
   hauteur : les labels ont quitté ce coin pour la ligne des boutons, et le
   bloc de titre est ancré à gauche. */
.stamp--hero {
  position: absolute;
  right: 6vw;
  bottom: 48px;
  width: 190px;
  color: rgba(255, 255, 255, 0.92);
  transform: rotate(-7deg);
  z-index: 1;
}

/* ---------- le bloc des labels ----------
   Deux marques déposées. Leurs règlements d'usage n'autorisent l'affichage que
   « sans les déformer » : pas de rotation, pas de recoloration. La plaque claire
   n'est donc pas un effet de style — c'est ce qui permet de poser le rouge
   Alsace et le bleu Artisan sur la photo sombre du héros sans toucher à leurs
   couleurs. Encre plutôt que carmin pour « Certifié » : deux rouges voisins
   mais différents se disputeraient l'œil. */
.labels { display: block; color: var(--ink); }
.labels text {
  font-family: var(--grot);
  fill: currentColor;
  text-transform: uppercase;
}
.labels .tc { font-size: 15px; font-weight: 700; letter-spacing: 0.14em; }
.labels-plate { fill: rgba(255, 255, 255, 0.94); }
/* La plaque se pose sous les boutons du héros, calée à gauche comme eux. Sa
   largeur est fixe : elle ne dépend plus de la hauteur du bloc voisin, donc
   elle ne peut plus grandir jusqu'à croiser l'estampille du coin bas droit,
   quelle que soit la largeur de la fenêtre. */
.hero-labels { margin-top: 26px; }
.labels--hero {
  display: block;
  width: 230px;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(18, 13, 10, 0.35));
}
.footer-logo { display: block; width: 110px; height: auto; margin-bottom: 18px; }

/* ---------- en-tête ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  padding: 6px 20px;
}
/* La bande tient sur UNE ligne, toujours : « nowrap » le garantit
   structurellement, et les enfants sont en « flex: 0 0 auto » pour qu'un
   contenu trop large déborde au lieu de se comprimer.
   Largeur nécessaire à la bande pleine : ~1287px à 16px de police racine, dont
   1149px de partie fixe (logo, textes, bouton) et 8,6rem de gaps. Le conteneur
   en offre 1440 : la marge est de ~150px, pas de 7 comme avant. */
.site-head-inner {
  max-width: 1440px;
  margin-inline: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
}
.site-head-inner > * { flex: 0 0 auto; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { width: 84px; }

.nav { margin-inline: auto; min-width: 0; }
.nav > ul { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 1.1rem; margin: 0; padding: 0; }
.nav a, .sub-toggle {
  display: block;
  padding: 8px 0;
  font-family: var(--grot);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover, .nav a:focus { color: var(--carmine); }
.nav .current > a, .nav li[aria-current] > a, .nav a[aria-current] { color: var(--carmine); }

.has-sub { position: relative; }
.sub-toggle {
  background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
}
.sub-toggle:hover { color: var(--carmine); }
.sub-toggle::after { content: "▾"; font-size: 9px; translate: 0 1px; }
.has-sub.current > .sub-toggle { color: var(--carmine); }
.submenu {
  list-style: none; margin: 0; padding: 10px 0;
  position: absolute; top: 100%; left: -18px; z-index: 50;
  min-width: 250px; background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--carmine);
  box-shadow: 0 14px 30px -18px rgba(29, 26, 23, 0.4);
  display: none;
}
.submenu a { padding: 9px 18px; }
.has-sub:hover .submenu, .has-sub:focus-within .submenu, .submenu.open { display: block; }

.head-actions { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
.head-tel {
  font-family: var(--grot);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
  text-align: right;
  line-height: 1.15;
}
.head-tel span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
}
.head-tel:hover { color: var(--carmine); }
.head-tel-livr {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--carmine);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 9px 14px;
  cursor: pointer;
  font-family: var(--grot);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- en-tête : les paliers ----------
   Trois états, décidés ici et nulle part ailleurs :

     > 88em   logo · navigation · téléphone · Espace client   (~1287px requis)
     74-88em  le bloc téléphone s'efface, la navigation reste  (~1086px requis)
     < 74em   logo · Espace client · bouton « Menu »

   Les seuils sont pris nettement au-dessus du strict nécessaire : au point le
   plus serré (juste au-dessus du seuil) il reste 81px de marge pour la bande
   pleine et 58px pour la bande sans téléphone.

   Les seuils sont en « em », pas en pixels, et c'est tout l'intérêt : dans une
   media query, l'em vaut la taille de police réglée dans le navigateur — celle
   qui fait aussi grandir les gaps de la bande, tous en rem. Le contenu
   s'élargit, le seuil se déplace d'autant. C'est précisément le cas que la
   mesure JavaScript cherchait à couvrir ; le CSS le couvre sans mesurer, et
   sans dépendre de l'exécution d'un script.
   L'ancienne bascule mesurée n'avait que 7px de marge (bande de 1312px dans un
   conteneur de 1320) : la moindre fenêtre non maximisée, un zoom à 150% ou une
   police « Grande » la faisait basculer en compact et l'y laissait.
   Sans JavaScript, lib/css/noscript.css déplie le menu sous la bande. */
@media (min-width: 74.0625em) and (max-width: 88em) {
  .head-tel { display: none; }
}
@media (max-width: 74em) {
  .head-tel { display: none; }
  .nav-toggle { display: block; order: 3; }
  .head-actions { margin-left: auto; order: 2; }
  .nav { display: none; }
  /* Déroulant par-dessus le contenu : avec .site-head-inner en « nowrap », un
     panneau en flux passerait sur une deuxième ligne — précisément ce qu'on
     interdit. .site-head est en position:sticky, donc bloc conteneur. */
  .nav.open {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0; z-index: 50;
    padding: 0 20px;
    background: var(--paper);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; }
  .nav > ul > li { border-bottom: 1px solid var(--hairline); }
  .nav > ul > li:last-child { border-bottom: 0; }
  .nav a, .sub-toggle { padding: 14px 4px; width: 100%; }
  .sub-toggle { justify-content: space-between; }
  .submenu { position: static; box-shadow: none; border: 0; border-left: 2px solid var(--carmine); margin: 0 0 10px 4px; min-width: 0; padding: 0; }
  .submenu a { padding-left: 18px; }
}

/* ---------- boutons ---------- */
.btn {
  display: inline-block;
  background: var(--carmine);
  color: #fff;
  padding: 15px 26px;
  border: 1px solid var(--carmine);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--grot);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover, .btn:focus { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--ghost { background: transparent; color: var(--carmine); }
.btn--ghost:hover, .btn--ghost:focus { background: var(--carmine); border-color: var(--carmine); color: #fff; }
.btn--light { background: transparent; border-color: var(--hairline-dark); color: var(--bone); }
.btn--light:hover, .btn--light:focus { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.espace-client { padding: 10px 16px; font-size: 11px; }

/* lien-flèche : l'appel discret en fin de bloc */
.arrow-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--grot);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--carmine);
  text-decoration: none;
}
/* zone tactile élargie, sans effet visuel */
.arrow-link::before { content: ""; position: absolute; inset: -12px; }
.arrow-link::after { content: "→"; transition: translate 0.15s; }
.arrow-link:hover { color: var(--ink); }
.arrow-link:hover::after { translate: 5px 0; }

/* ---------- héros ---------- */
.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
}
.hero--home { min-height: min(78vh, 720px); }
.hero--page { min-height: 440px; }
/* images de fond des héros — en classes plutôt qu'en attributs style inline,
   pour une CSP sans 'unsafe-inline' (une classe par page) */
.hero--home { background-image: url("../img/hero-accueil.avif"); }
.hero--notre-histoire { background-image: url("../img/hero-notre-histoire.avif"); }
.hero--boucherie { background-image: url("../img/hero-boucherie.avif"); }
.hero--charcuterie { background-image: url("../img/hero-charcuterie.avif"); }
.hero--poissonnerie { background-image: url("../img/hero-poissonnerie.avif"); }
.hero--salaison { background-image: url("../img/hero-salaison.avif"); }
.hero--selection { background-image: url("../img/hero-selection.avif"); }
.hero--surgeles { background-image: url("../img/hero-surgeles.avif"); }
.hero--nos-produits { background-image: url("../img/hero-nos-produits.avif"); }
.hero--nos-engagements { background-image: url("../img/flotte-camions.avif"); }
.hero--nous-contacter { background-image: url("../img/flotte-camions.avif"); }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(18, 13, 10, 0.82) 0%, rgba(18, 13, 10, 0.45) 55%, rgba(18, 13, 10, 0.25) 100%);
}
.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding: 90px 24px 70px;
}
.hero-eyebrow {
  margin-bottom: 20px;
  font-family: var(--grot);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-eyebrow::before { content: ""; width: 30px; border-top: 2px solid var(--carmine); }
.hero h1 {
  max-width: 13em;
  color: #fff;
  font-family: var(--grot);
  font-stretch: 112%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 0.98;
  /* borne basse calée sur « RESTAURATION » (12 capitales) : à 320 px de large
     le mot doit tenir dans 272 px utiles, soit ~28 px de corps maximum */
  font-size: clamp(1.75rem, 0.5rem + 6.4vw, 5.4rem);
}
.hero-sub {
  display: block;
  margin-top: 22px;
  max-width: 44ch;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  text-transform: none;
  letter-spacing: 0;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- bande de repères (chiffres vrais) ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-block: 40px;
  border-bottom: 1px solid var(--hairline);
}
.fact { border-left: 2px solid var(--carmine); padding-left: 20px; }
.fact b {
  display: block;
  font-family: var(--grot);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fact span { display: block; margin-top: 8px; font-size: var(--fs-small); line-height: 1.45; }

/* ---------- la feuille de route (page « Nos engagements ») ----------
   Variante des repères : quatre fiches numérotées plutôt que la bande
   de chiffres à filet gauche, pour ne pas répéter deux fois .facts
   sur la même page. */
.route-lead {
  max-width: 34em;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1.15rem, 1.02rem + 0.7vw, 1.45rem);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}
.route-lead::before {
  content: "";
  display: block;
  width: 46px;
  margin: 0 auto 22px;
  border-top: 2px solid var(--carmine);
}
.route-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.route-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--carmine);
  padding: 26px 22px 24px;
}
.route-no {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--grot);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--smoke);
  opacity: 0.6;
}
.route-card b {
  display: block;
  font-family: var(--grot);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding-right: 34px;
}
.route-card p {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* l'heure limite : le chiffre en vis-à-vis du texte, pas un chapeau de plus */
.cutoff {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  max-width: 860px;
  margin-inline: auto;
  text-align: left;
  background: #fff;
  border: 1px solid var(--hairline);
  padding: clamp(24px, 3.5vw, 40px);
}
.cutoff-mark {
  border-right: 2px solid var(--carmine);
  padding-right: clamp(20px, 3vw, 34px);
  text-align: center;
}
.cutoff-mark b {
  display: block;
  font-family: var(--grot);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem);
  line-height: 1;
  color: var(--carmine);
  font-variant-numeric: tabular-nums;
}
.cutoff-mark span {
  display: block;
  margin-top: 8px;
  font-family: var(--grot);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
}
.cutoff-copy p + p { margin-top: 0.9em; }
/* la photo de tournée sert de socle : la fiche « 4h » mord sur son bas */
.cutoff-scene {
  max-width: 1040px;
  margin: 0 auto;
  line-height: 0;
}
.cutoff-scene img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 62%; }
.cutoff--overlap {
  position: relative;
  margin-top: clamp(-72px, -6vw, -34px);
  box-shadow: 0 18px 44px -26px rgba(29, 26, 23, 0.55);
}

/* ---------- présentation deux colonnes ---------- */
.cols { display: flex; gap: 3.5em; align-items: center; }
.cols > * { flex: 1; min-width: 0; }
.cols .copy p + p { margin-top: 1em; }
.cols .copy .arrow-link { margin-top: 26px; }
/* titre de section dans un bloc de copie (deux colonnes, zone…) */
.copy h2, .zone-copy h2 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-weight: 600;
}
.copy h2 + p, .zone-copy h2 + p { margin-top: 18px; }
.frame { border: 1px solid var(--hairline); padding: 10px; background: #fff; }

/* ---------- les chapitres (métiers, page d'accueil) ---------- */
.chapter {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
  padding-block: 44px;
  border-top: 1px solid var(--hairline);
}
.chapter:nth-of-type(even) .chapter-media { order: 2; }
.chapter-media { display: block; overflow: hidden; }
.chapter-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.5s ease; }
.chapter-media:hover img { transform: scale(1.025); }
.chapter-no {
  font-family: var(--grot);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--carmine);
  margin-bottom: 12px;
}
.chapter h3 { margin-bottom: 16px; }
.chapter h3 a {
  font-family: var(--grot);
  font-stretch: 112%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  color: var(--ink);
  text-decoration: none;
}
.chapter h3 a:hover { color: var(--carmine); }
.chapter-body p { max-width: 46ch; }
.chapter-body .arrow-link { margin-top: 22px; }

/* ---------- zone de livraison ---------- */
.zone { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.zone-copy p + p { margin-top: 1em; }
.zone-map { width: min(360px, 88%); margin-inline: auto; }
.zone-map .region { fill: var(--paper); stroke: var(--smoke); stroke-width: 1; stroke-linejoin: round; opacity: 0.9; }
.zone-map .route { fill: none; stroke: var(--smoke); stroke-width: 2; stroke-dasharray: 1 8; stroke-linecap: round; opacity: 0.55; }
.zone-map .city { fill: var(--ink); }
.zone-map .city--de { fill: var(--smoke); }
.zone-map .home-dot { fill: var(--carmine); }
.zone-map .home-ring { fill: none; stroke: var(--carmine); stroke-width: 1.5; opacity: 0.45; }
.zone-map text {
  font-family: var(--grot);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--ink);
}
.zone-map .home-label { fill: var(--carmine); font-size: 14px; }
.zone-map .sub-label { font-size: 9px; font-weight: 600; fill: var(--smoke); letter-spacing: 0.2em; }
.zone-map .de-label { font-size: 10px; fill: var(--smoke); }

/* ---------- références clients ---------- */
.marquee {
  --logo-h: 136px;
  margin-top: 30px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track { display: flex; align-items: center; gap: 90px; width: max-content; animation: marquee 28s linear infinite; }
.marquee img { height: calc(var(--logo-h) * var(--logo-s, 1)); width: auto; object-fit: contain; }
/* Correction optique, logo par logo : à hauteur égale, une marque large ou
   sans marge intérieure paraît bien plus grosse qu'un blason carré. Le
   facteur ramène chaque marque à la taille apparente d'AVS (référence, 1).
   Un logo absent de la table s'affiche à la hauteur nominale. */
.marquee .logo--au-chasseur             { --logo-s: 0.78; }
.marquee .logo--diabolo-poivre          { --logo-s: 0.78; }
.marquee .logo--fete-du-cochon          { --logo-s: 1.05; }
.marquee .logo--gross                   { --logo-s: 1.40; }
.marquee .logo--kohola                  { --logo-s: 0.95; }
.marquee .logo--la-fourchette-des-ducs  { --logo-s: 1.15; }
.marquee .logo--le-clou                 { --logo-s: 0.85; }
.marquee .logo--lycee-camille-schneider { --logo-s: 1.05; }
.marquee .logo--maison-kammerzell       { --logo-s: 0.95; }
.marquee .logo--o-pizzicato             { --logo-s: 0.88; }
.marquee .logo--sodexo                  { --logo-s: 0.72; }
.marquee .logo--umami                   { --logo-s: 0.75; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- pages métier ---------- */
/* le chapeau : une seule grande phrase, filet carmin à gauche */
.intro-text {
  max-width: 30em;
  border-left: 3px solid var(--carmine);
  padding-left: clamp(20px, 3vw, 34px);
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.55rem);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}

/* le schéma bi-température face au chapeau, sur la page « Nos engagements » */
.froid-split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.froid-figure { margin: 0; line-height: 0; border: 1px solid var(--hairline); }
.froid-figure img { width: 100%; height: auto; }
.froid-split .intro-text { max-width: none; }

.feature {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
  padding-block: 46px;
}
.feature + .feature { border-top: 1px solid var(--hairline); }
.feature--reverse .feature-media { order: 2; }
.feature-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* image à garder entière (diptyque, schéma) : pas de recadrage en 4/3 */
.feature-media--natural img { aspect-ratio: auto; height: auto; }
.feature-copy h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); font-weight: 600; margin-bottom: 16px; }
.feature-copy p + p { margin-top: 1em; }
.feature-copy .btn, .feature-copy .arrow-link { margin-top: 24px; }


/* ---------- carrousels d'atelier ---------- */
.carousel { position: relative; }
.eyebrow + .carousel { margin-top: 26px; }
.carousel-track {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track img {
  width: 340px;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.carousel-track > img { flex: 0 0 auto; scroll-snap-align: start; }
.carousel-track figure { flex: 0 0 auto; margin: 0; width: 340px; scroll-snap-align: start; }
.carousel-track figcaption {
  margin-top: 12px;
  font-family: var(--grot);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
}
/* la pastille des flèches : petite, et le chevron centré dedans par flex —
   le caractère « ‹ » qu'elle contenait ne l'était sur aucun des deux axes */
.carousel-btn {
  position: absolute; top: 50%; translate: 0 -50%;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--paper); color: var(--ink);
  cursor: pointer; z-index: 2;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.carousel-btn svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.carousel-btn:hover { background: var(--carmine); border-color: var(--carmine); color: #fff; }
.carousel-btn[data-dir="prev"] { left: -8px; }
.carousel-btn[data-dir="next"] { right: -8px; }
.carousel.is-static .carousel-btn { display: none; }

/* ---------- notre histoire : le fondu à trois vues ----------
   Une seule image à l'écran, les autres en dessous d'elle dans la même
   cellule de grille : la hauteur ne bouge pas d'une vue à l'autre, et le
   fondu n'a rien à pousser. Les boutons reprennent ceux des carrousels
   (.carousel-btn), position comprise. */
.shot-media { position: relative; }
/* posée sur l'image, la pastille se fait discrète — mais garde les 44 px de
   zone tactile que sa taille visible ne donne plus */
.shot-btn { width: 28px; height: 28px; }
.shot-btn svg { width: 13px; height: 13px; }
.shot-btn::before { content: ""; position: absolute; inset: -8px; }
.shot-frame { border: 1px solid var(--hairline); padding: 10px; background: #fff; }
.shot-frame:focus-visible { outline: 2px solid var(--carmine); outline-offset: 3px; }
.shot-slides {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-areas: "vue";
}
.shot-slide {
  grid-area: vue;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}
.shot-slide.is-current { opacity: 1; visibility: visible; }
/* les trois vues n'ont pas le même format : le cadre impose le sien, celui
   de la vue par défaut (3/2), et recadre les deux autres */
.shot-slide img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.shot-dots {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.shot-dot {
  display: block;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--smoke);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
/* la pastille est minuscule : on lui donne une vraie zone tactile */
.shot-dot { position: relative; }
.shot-dot::before { content: ""; position: absolute; inset: -9px; }
.shot-dot:hover { border-color: var(--carmine); background: var(--carmine); }
.shot-dot.is-current { border-color: var(--carmine); background: var(--carmine); }
.carousel.is-static .carousel-track { justify-content: center; }

/* ---------- notre histoire : jalons ---------- */
.timeline {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 30px;
  border-top: 1px solid var(--hairline);
}
.timeline li {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 180px;
  padding-top: 16px;
  border-top: 3px solid var(--carmine);
  margin-top: -2px;
}
.timeline li b {
  font-family: var(--grot);
  font-stretch: 112%;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.timeline li span { font-size: var(--fs-small); line-height: 1.45; }

/* ---------- la carte (accueil) : les sept gammes en mosaïque ----------
   Sept tuiles photo, la première sur deux colonnes : 2+1+1 puis 1+1+1+1
   remplissent exactement la grille de quatre colonnes, sans trou.
   La hauteur de rangée est imposée ici (grid-auto-rows) plutôt que par un
   rapport d'image : la grande tuile et les petites gardent ainsi la même
   hauteur malgré des largeurs différentes. */
.carte-intro { max-width: 68ch; }
.carte-intro h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-weight: 600;
  margin-bottom: 18px;
}
.carte-intro p + p { margin-top: 12px; }

.gammes {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(190px, 19vw, 250px);
  gap: 12px;
}
.gamme:first-child { grid-column: span 2; }
.gamme a {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ink);
  text-decoration: none;
  isolation: isolate;
}
.gamme img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* le voile : le nom reste lisible quelle que soit la photo dessous */
.gamme a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(29, 26, 23, 0.84) 0%,
              rgba(29, 26, 23, 0.34) 46%,
              rgba(29, 26, 23, 0.04) 100%);
  transition: background 0.3s;
}
.gamme-label {
  position: absolute;
  z-index: 1;
  left: clamp(12px, 1.4vw, 18px);
  right: clamp(12px, 1.4vw, 18px);
  bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  color: #fff;
}
.gamme-no {
  font-family: var(--grot);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}
/* le filet carmin se déploie sous le nom au survol */
.gamme-nom {
  font-family: var(--grot);
  font-stretch: 110%;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* « ACCOMPAGNEMENTS » dans une tuile de téléphone : le mot doit pouvoir
     céder plutôt que déborder de la photo */
  min-width: 0;
  overflow-wrap: anywhere;
  padding-bottom: 5px;
  background-image: linear-gradient(var(--carmine), var(--carmine));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 0.35s ease;
}
.gamme a:hover img, .gamme a:focus-visible img { transform: scale(1.06); }
.gamme a:hover .gamme-nom,
.gamme a:focus-visible .gamme-nom { background-size: 100% 2px; }
.gamme a:hover::after,
.gamme a:focus-visible::after {
  background: linear-gradient(to top,
              rgba(190, 0, 14, 0.78) 0%,
              rgba(29, 26, 23, 0.46) 62%,
              rgba(29, 26, 23, 0.1) 100%);
}
.gamme a:focus-visible { outline: 2px solid var(--carmine); outline-offset: 3px; }
.carte-cta { margin-top: clamp(24px, 3vw, 34px); }

@media (max-width: 999px) {
  .gammes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(150px, 26vw, 210px);
  }
}
@media (max-width: 640px) {
  /* deux tuiles par ligne sur un téléphone, c'est ~150 px de large : le nom
     suit la largeur disponible pour que « ACCOMPAGNEMENTS », le plus long,
     tienne encore sur une ligne. */
  .gamme-nom { font-size: clamp(9.5px, 2.6vw, 12px); letter-spacing: 0.04em; }
}
@media (max-width: 540px) {
  .gammes { gap: 8px; grid-auto-rows: 132px; }
  /* le numéro passe au-dessus : le nom récupère toute la largeur de la tuile */
  .gamme-label {
    bottom: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
}

/* ---------- la passerelle catalogue (fin de page métier) ----------
   Le chapeau à gauche, l'appel à l'action à droite, puis le nom de la gamme
   en lettres évidées sur toute la largeur — il se remplit d'encre carmin au
   survol et la flèche s'avance. Toute cette partie est le lien ; les autres
   métiers la suivent dans le même encadré, hors du lien (on n'imbrique pas
   des liens). Le mot occupe sa propre ligne parce qu'il ne tenait pas entre
   les deux colonnes : CHARCUTERIE sortait de la bande et emportait l'appel à
   l'action avec lui. */
.cata-block {
  border-block: 1px solid var(--hairline);
  padding: clamp(26px, 3.5vw, 44px) clamp(22px, 3vw, 40px) clamp(20px, 2.4vw, 28px);
}
.cata-band {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: start;
  gap: 18px clamp(20px, 4vw, 56px);
  text-decoration: none;
}
.cata-band-copy { display: block; }
.cata-band-note {
  display: block;
  max-width: 46ch;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--smoke);
}
.cata-word-row {
  grid-column: 1 / -1;
  display: block;
  /* la ligne prend toute la largeur, quoi qu'en dise justify-items : sous
     requête de conteneur, une ligne rétrécie sur son contenu mesurerait zéro
     — et 100cqw donnerait un mot de taille nulle */
  justify-self: stretch;
  width: 100%;
  text-align: center;
  /* le mot se mesure à cette ligne, pas à la fenêtre */
  container-type: inline-size;
}
.cata-word {
  display: inline-block;
  font-family: var(--grot);
  font-stretch: 118%;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke;
  transition: color 0.25s, -webkit-text-stroke-color 0.25s;
  /* repli des navigateurs sans requête de conteneur : l'ancienne échelle */
  font-size: clamp(2.6rem, 1rem + 8vw, 6.5rem);
  /* et sinon, la plus grande taille qui tienne encore sur la ligne */
  font-size: min(clamp(2.6rem, 1rem + 8vw, 6.5rem),
                 calc(100cqw / (var(--cata-n) * 0.88)));
}
/* une règle par longueur de mot ($cata_n, catalogue-cta.php). Le repli
   ci-dessus suppose un mot de vingt lettres : trop petit, jamais rogné. */
.cata-word { --cata-n: 20; }
.cata-word--n4  { --cata-n: 4; }
.cata-word--n5  { --cata-n: 5; }
.cata-word--n6  { --cata-n: 6; }
.cata-word--n7  { --cata-n: 7; }
.cata-word--n8  { --cata-n: 8; }
.cata-word--n9  { --cata-n: 9; }
.cata-word--n10 { --cata-n: 10; }
.cata-word--n11 { --cata-n: 11; }
.cata-word--n12 { --cata-n: 12; }
.cata-word--n13 { --cata-n: 13; }
.cata-word--n14 { --cata-n: 14; }
.cata-band:hover .cata-word, .cata-band:focus-visible .cata-word {
  color: var(--carmine);
  -webkit-text-stroke-color: var(--carmine);
}
.cata-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--grot);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--carmine);
  white-space: nowrap;
}
.cata-go span { transition: translate 0.15s; }
.cata-band:hover .cata-go span { translate: 5px 0; }

/* les autres métiers, sous le mot : ni titre ni filet, la bande fait cadre */
.cata-more {
  list-style: none;
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(18px, 2.6vw, 34px);
}
.cata-more a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--grot);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--smoke);
}
/* zone tactile élargie : les lignes ne sont espacées que de 10px */
.cata-more a::before { content: ""; position: absolute; inset: -7px -10px; }
.cata-more a::after { content: "→"; color: var(--carmine); transition: translate 0.15s; }
.cata-more a:hover { color: var(--carmine); }
.cata-more a:hover::after { translate: 4px 0; }

@media (max-width: 782px) {
  .cata-band { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .cata-band-note { max-width: none; margin-inline: auto; }
  .cata-band .eyebrow { justify-content: center; }
  .cata-band .eyebrow::after { content: ""; width: 28px; border-top: 2px solid var(--carmine); }
}

/* ---------- nos produits : les gammes ---------- */
/* la cible d'une ancre s'arrête sous l'en-tête collant */
.prod-feature, .prod-card { scroll-margin-top: 100px; }

/* la gamme phare : grand bandeau image + copie */
.prod-feature {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: center;
  gap: clamp(28px, 4.5vw, 64px);
  background: #fff;
  border: 1px solid var(--hairline);
  text-decoration: none;
  margin-bottom: 28px;
  transition: border-color 0.2s;
}
.prod-feature:hover, .prod-feature:focus-visible { border-color: var(--carmine); }
.prod-feature-media { overflow: hidden; align-self: stretch; }
.prod-feature-media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.prod-feature:hover .prod-feature-media img { transform: scale(1.025); }
.prod-feature-copy { padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 48px) clamp(24px, 3vw, 40px) 0; }
.prod-feature-copy h2 {
  font-family: var(--grot);
  font-stretch: 112%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1;
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
  margin: 12px 0 16px;
}
.prod-feature:hover .prod-feature-copy h2 { color: var(--carmine); }
.prod-feature-copy > p { max-width: 46ch; }
.prod-feature .arrow-link { margin-top: 22px; }

/* mots-clés : les sous-sections du catalogue, en petites étiquettes */
.prod-tags {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.prod-tags li {
  font-family: var(--grot);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smoke);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 5px 10px;
  background: var(--paper);
}

/* les autres gammes : fiches en grille */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.prod-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hairline);
  text-decoration: none;
  transition: border-color 0.2s;
}
.prod-card:hover, .prod-card:focus-visible { border-color: var(--carmine); }
.prod-card-media { position: relative; overflow: hidden; }
.prod-card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.5s ease; }
.prod-card:hover .prod-card-media img { transform: scale(1.03); }
.prod-card h3 {
  margin: 0;
  padding: 20px 22px 8px;
  font-family: var(--grot);
  font-stretch: 110%;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.prod-card:hover h3 { color: var(--carmine); }
.prod-card > p { padding: 0 22px; font-size: var(--fs-small); line-height: 1.55; }
.prod-card .prod-tags { padding: 0 22px; }
.prod-card .arrow-link { margin: 18px 22px 22px; margin-top: auto; padding-top: 18px; }

.tile-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.tile {
  flex: 0 1 calc(33.333% - 19px);
  background: #fff;
  border: 1px solid var(--hairline);
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: border-color 0.2s;
}
.tile:hover, .tile:focus-visible { border-color: var(--carmine); }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s ease; }
.tile:hover img { transform: scale(1.03); }
.tile h3 {
  margin: 0;
  padding: 20px 20px 6px;
  font-family: var(--grot);
  font-stretch: 110%;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.tile:hover h3 { color: var(--carmine); }
.tile p { margin: 0; padding: 0 20px 22px; font-size: var(--fs-small); line-height: 1.5; }
.catalogue-cta { text-align: center; margin-top: 48px; }

/* ---------- nous rejoindre ---------- */
.job-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.job { border-left: 2px solid var(--carmine); padding-left: 22px; }
.job h3 {
  font-family: var(--grot);
  font-stretch: 110%;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.job ul { margin: 0; padding: 0; list-style: none; }
.job li { padding-block: 5px; border-bottom: 1px solid var(--hairline); font-size: var(--fs-small); }
.job li:last-child { border-bottom: 0; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.contact-aside { border-top: 3px solid var(--carmine); padding-top: 26px; display: flex; flex-direction: column; gap: 26px; }
.contact-aside h2 {
  font-family: var(--grot);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--carmine);
}
.contact-block p { margin: 0; }
.contact-block .big {
  font-family: var(--grot);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}
.contact-block .big:hover { color: var(--carmine); }
.contact-block .note { font-size: var(--fs-small); }

.form { display: flex; flex-direction: column; gap: 20px; }
.form .row { display: flex; gap: 20px; }
.form .field { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.form label {
  font-family: var(--grot);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.form input, .form textarea, .form select {
  font: inherit;
  padding: 13px 14px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
}
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--carmine); outline-offset: 0; border-color: var(--carmine); }
.form textarea { resize: vertical; min-height: 150px; }
.form select { height: 49px; cursor: pointer; }
.form .opt { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.55; }
/* Le bouton d'envoi prend toute la largeur, comme les champs au-dessus : il
   ferme la colonne au lieu de flotter à gauche. (Il est enveloppé dans un <p>,
   donc c'est bien width et non align-self qui compte ici.) */
.form button[type="submit"] { display: block; width: 100%; }
/* pot de miel : hors écran pour un humain, présent pour un robot */
.form .field--alt { position: absolute; left: -9999px; }
.form-msg { display: none; padding: 13px 15px; border-radius: 2px; font-weight: 600; }
.form-msg.ok    { display: block; background: #e8f3ec; color: #2c6b4c; }
.form-msg.error { display: block; background: #fbeceb; color: var(--carmine); }

/* ---------- 404 ---------- */
.error-404 { padding-top: 70px; }
.error-code {
  font-family: var(--grot);
  font-stretch: 118%;
  font-size: clamp(120px, 24vw, 250px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--carmine);
  animation: rise 0.6s ease-out both;
}
.error-title { font-size: 1.8rem; margin-top: 14px; }
.error-text { max-width: 46ch; margin: 14px auto 0; }
.error-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.error-suggest-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 24px; color: var(--ink); }
.tile--suggest { max-width: 340px; margin-inline: auto; }
.error-more { margin-top: 24px; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .error-code { animation: none; } }

/* ---------- bande « devenir client » ---------- */
.cta-band { background: var(--ink); color: var(--bone); }
/* sur la bande sombre, le survol encre du .btn disparaîtrait : il passe en clair */
.cta-band .btn:hover, .cta-band .btn:focus { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px 60px;
  padding-block: 60px;
}
.cta-band .eyebrow--light::before { border-color: var(--carmine); }
.cta-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  font-weight: 600;
  color: #fff;
  max-width: 18em;
  text-wrap: balance;
}
/* Numéro et bouton empilés l'un au-dessus de l'autre, à droite du texte :
   en colonne le bloc est assez étroit pour tenir sur la même ligne que le
   titre (qui, lui, est bridé à 18em). flex-shrink: 0 pour que le numéro ne
   soit jamais coupé ; sous ~782px .cta-inner finit par passer à la ligne et
   le bloc revient sous le texte. */
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex-shrink: 0;
}
.cta-tel {
  font-family: var(--grot);
  font-stretch: 110%;
  font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  letter-spacing: 0.01em;
  color: #fff;
  text-decoration: none;
  line-height: 1.1;
}
.cta-tel span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.7;
  margin-top: 6px;
}
.cta-tel:hover { color: var(--carmine); }
.cta-band a.cta-tel:hover { color: #d9414d; }

/* ---------- pied de page ---------- */
.site-footer {
  background: var(--ink-deep);
  color: var(--bone);
  border-top: 1px solid var(--hairline-dark);
  padding: 64px 24px 50px;
  font-size: var(--fs-small);
}
.site-footer a { color: var(--bone); }
.site-footer a:hover { color: #fff; }
.footer-inner {
  max-width: var(--wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 44px;
}
.footer-col h2 {
  font-family: var(--grot);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
.footer-col p, .footer-col li { line-height: 1.6; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-brand {
  font-family: var(--grot);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 14px;
}
.footer-small { opacity: 0.85; }

.copyright { background: var(--ink-deep); color: var(--bone); border-top: 1px solid var(--hairline-dark); padding: 16px 24px; }
.copyright-inner {
  max-width: var(--wide); margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-family: var(--grot);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.copyright a { color: var(--bone); }
.legal-links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.legal-links a { text-decoration: none; border-bottom: 1px solid var(--hairline-dark); padding-bottom: 2px; }
.legal-links a:hover, .legal-links a:focus { border-bottom-color: var(--bone); }

/* ---------- pages légales (mentions, données personnelles) ---------- */
/* Pas de héros photographique ici : ce sont des pages de texte, qu'on vient
   lire et non admirer. Un bandeau sobre, puis de la prose lisible. */
.legal-head { background: var(--ink); color: var(--bone); padding: 64px 24px 54px; }
.legal-head-inner { max-width: var(--content); margin-inline: auto; }
.legal-head h1 { color: #fff; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); }
.legal-head .eyebrow--light::before { border-color: var(--carmine); }
.legal-updated {
  font-family: var(--grot); font-size: var(--fs-label);
  letter-spacing: 0.08em; opacity: 0.75; margin-top: 14px;
}
.legal-prose { font-size: var(--fs-body); line-height: 1.7; }
.legal-prose h2 {
  font-size: 1.35rem; font-weight: 600; color: var(--ink);
  margin-top: 2.6em; padding-top: 0.9em; border-top: 1px solid var(--hairline);
}
.legal-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-prose h3 {
  font-family: var(--grot); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  margin-top: 1.9em;
}
.legal-prose p, .legal-prose ul, .legal-prose dl { margin-top: 0.9em; }
.legal-prose ul { padding-left: 1.2em; list-style: disc; }
.legal-prose li { margin-top: 0.4em; }
.legal-prose dl { display: grid; grid-template-columns: 15em 1fr; gap: 0.5em 1.5em; }
.legal-prose dt { font-family: var(--grot); font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.legal-prose dd { margin: 0; }
/* Champ que seul le client peut fournir : visible, impossible à rater en
   relecture, et le déploiement doit attendre qu'il ait disparu. */
.legal-todo {
  background: #fff2b2; color: #6b4b00; font-weight: 700;
  padding: 1px 8px; border-radius: 2px;
}
@media (max-width: 620px) {
  .legal-prose dl { grid-template-columns: 1fr; gap: 0.15em; }
  .legal-prose dd { margin-bottom: 0.7em; }
}

/* ---------- bandeau cookies ---------- */
/* Volontairement non modal : il n'enferme personne et ne bloque pas la page.
   « Refuser » et « Accepter » ont le même poids visuel — deux boutons de même
   taille côte à côte — parce qu'un refus doit être aussi facile qu'un accord. */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  /* au-dessus de tout, en-tête collant (999) compris : quand il s'ouvre, rien
     ne doit pouvoir passer devant */
  z-index: 1000;
  background: var(--ink-deep);
  color: var(--bone);
  border-top: 2px solid var(--carmine);
  padding: 12px 24px;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.3);
}
.cookie-banner[hidden] { display: none; }
/* L'état ouvert doit l'emporter sur le `[hidden] { display: none !important }`
   du reset : même arme, et il passe après dans la feuille. Sans ce !important,
   retirer l'attribut suffit en théorie — mais en pratique une seule règle
   `display` oubliée quelque part rend le bandeau invisible sans rien casser
   d'autre, et le clic semble ne rien faire. */
.cookie-banner.is-open { display: block !important; }
.cookie-inner {
  max-width: var(--wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}
.cookie-text { font-size: var(--fs-small); line-height: 1.55; max-width: 68ch; }
.cookie-title {
  font-family: var(--grot);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 3px;
}
.cookie-text a { color: var(--bone); }
.cookie-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-actions .btn { padding: 7px 24px; cursor: pointer; font: inherit; }
.cookie-actions .btn--ghost { color: var(--bone); border-color: var(--hairline-dark); }
.cookie-actions .btn--ghost:hover, .cookie-actions .btn--ghost:focus {
  background: var(--bone); border-color: var(--bone); color: var(--ink);
}

@media (max-width: 782px) {
  .cookie-inner { flex-direction: column; align-items: stretch; }
  .cookie-actions .btn { flex: 1; text-align: center; }
}

/* ---------- apparition au défilement ---------- */
.reveal { opacity: 0; }
.reveal.in { opacity: 1; animation: fadeUp 0.7s ease-out both; }
.delay-200ms { animation-delay: 150ms; }
.delay-400ms { animation-delay: 300ms; }
@keyframes fadeUp { from { transform: translateY(22px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; }
  .reveal.in { animation: none; }
  .marquee-track { animation: none; }
  .carousel-track { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- responsive ---------- */
/* très petits écrans : l'en-tête (logo · espace client · menu) doit
   toujours tenir sur une seule ligne */
@media (max-width: 480px) {
  .site-head { padding-inline: 14px; }
  .site-head-inner { gap: 0.8rem; }
  .brand img { width: 64px; height: auto; }
  .espace-client { padding: 9px 10px; font-size: 10px; letter-spacing: 0.08em; }
  .nav-toggle { padding: 8px 10px; }
}

@media (max-width: 999px) {
  .facts, .route-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-feature { grid-template-columns: 1fr; gap: 0; }
  .prod-feature-media img { min-height: 0; aspect-ratio: 16 / 9; }
  .prod-feature-copy { padding: 24px 22px 26px; }
  .carousel-btn[data-dir="prev"] { left: 0; }
  .carousel-btn[data-dir="next"] { right: 0; }
  .tile { flex-basis: calc(50% - 14px); }
  .job-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .stamp--hero { width: 130px; right: 24px; bottom: 24px; }
  /* la plaque garde sa largeur fixe ; seul son écart aux boutons se resserre. */
  .hero-labels { margin-top: 22px; }
}

@media (max-width: 782px) {
  .band { padding-block: 48px; }
  .band--tight { padding-block: 26px; }
  .cols, .form .row { flex-direction: column; align-items: stretch; }
  .cols { gap: 2em; }
  .chapter, .feature, .zone, .froid-split { grid-template-columns: 1fr; }
  .cutoff-scene img { aspect-ratio: 16 / 9; }
  .cutoff--overlap { margin-top: -22px; }
  .chapter:nth-of-type(even) .chapter-media, .feature--reverse .feature-media { order: 0; }
  .chapter { padding-block: 34px; }
  .facts { grid-template-columns: 1fr 1fr; gap: 22px; }
  .route-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }
  .cutoff { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .cutoff-mark { border-right: 0; border-bottom: 2px solid var(--carmine); padding: 0 0 18px; }
  .job-grid { grid-template-columns: 1fr; }
  .tile { flex-basis: 100%; }
  .prod-grid { grid-template-columns: 1fr; }
  .hero { min-height: 440px; }
  .hero--home { min-height: 520px; }
  .hero--page { min-height: 360px; }
  .hero-inner { padding: 70px 24px 54px; }
  .carousel-track img, .carousel-track figure { width: 260px; }
  .footer-inner { grid-template-columns: 1fr; gap: 34px; }
  .copyright-inner { flex-direction: column; text-align: center; }
  /* .hero-labels et pas seulement la plaque : sinon le porteur garderait son
     écart au-dessus, sous les boutons. */
  .stamp--hero, .hero-labels { display: none; }
  .timeline { justify-content: flex-start; }
}