/* Fondations : direction sobre, beaucoup d’air, photo réelle au premier plan. */
:root {
  color-scheme: light;
  --blanc: #FFFFFF;
  --gris: #F5F4F1; /* Fond de section et de tuile, légèrement chaud. */
  --creme: #F7F2EB;
  --anthracite: #1B1A19;
  --paprika: #C4451C;
  --paprika-hover: #A83814;
  --dore: #E0A526;
  --texte-2: #6B6660; /* Texte secondaire, AA sur blanc et sur gris. */
  --texte-2-sombre: #B8B1A7; /* Texte secondaire sur anthracite. */
  --ligne: rgba(27, 26, 25, .12);
  --ligne-claire: rgba(255, 255, 255, .14);
  --font-heading: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --text-display: clamp(2.6rem, 6.6vw, 5.4rem);
  --text-h2: clamp(2rem, 4.4vw, 3.4rem);
  --text-h3: 1.25rem;
  --text-body: 1.0625rem;
  --text-lead: clamp(1.125rem, 1.6vw, 1.3125rem);
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 48px;
  --s-9: 56px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --section-space: clamp(5rem, 11vw, 9rem);
  --container-max: 1240px;
  --gutter: clamp(var(--s-4), 4vw, var(--s-6));
  --radius-xl: 28px;
  --radius-lg: 18px;
  --radius-control: 12px;
  --control-min-height: 48px;
  --transition: 200ms ease;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --focus-color: var(--anthracite); /* 17:1 sur blanc ; doré réservé aux fonds sombres. */
  --bord-champ: #8A8178; /* Bord des champs : 3,9:1 sur blanc (WCAG 1.4.11). */
  --header-height: 56px;
}

/* Réinitialisation : préserve la sémantique des listes et des contrôles. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
body {
  min-height: 100vh;
  background: var(--blanc);
  color: var(--anthracite);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
textarea { resize: vertical; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: var(--header-height); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.03em; }
h2 { font-size: var(--text-h2); letter-spacing: -.03em; }
h3 { font-size: var(--text-h3); }
p { text-wrap: pretty; }
a {
  color: var(--paprika-hover);
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
  transition: color var(--transition);
}
:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; border-radius: 4px; }
/* Sur anthracite, l’anneau passe au doré (8,2:1). */
.section--dark :focus-visible { outline-color: var(--dore); }

/* Mise en page commune. */
.container { width: calc(100% - 2 * var(--gutter)); max-width: var(--container-max); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.section--dark { background: var(--anthracite); color: var(--blanc); }
.list-reset { padding: 0; list-style: none; }
.section-head { max-width: 780px; margin: 0 auto clamp(var(--s-8), 7vw, var(--s-11)); text-align: center; }
.section__eyebrow {
  margin-block-end: var(--s-3);
  color: var(--paprika-hover);
  font-size: .9375rem;
  font-weight: 600;
}
.section--dark .section__eyebrow { color: var(--dore); }
.section__title { font-size: var(--text-h2); }
.section__lead { max-width: 42ch; margin: var(--s-5) auto 0; color: var(--texte-2); font-size: var(--text-lead); line-height: 1.5; }
.icon { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Boutons : pilules sobres, un seul accent paprika. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--control-min-height);
  max-width: 100%;
  padding: 0 var(--s-6);
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--paprika); color: var(--blanc); }
.btn--primary:hover { background: var(--paprika-hover); color: var(--blanc); }
.btn--secondary { border-color: var(--anthracite); color: var(--anthracite); }
.btn--secondary:hover { background: var(--anthracite); color: var(--blanc); }
.btn--lg { min-height: 52px; padding-inline: var(--s-7); font-size: 1.0625rem; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* Lien de suite, à la manière d’un « En savoir plus ». */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  color: var(--paprika-hover);
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
}
.link-arrow::after { content: "›"; font-size: 1.35em; line-height: 1; transition: transform var(--transition); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow[aria-disabled="true"] { color: var(--texte-2); cursor: not-allowed; text-decoration: none; }

/* Tuile : fond gris chaud, grands rayons, aucune ombre. */
.tile { border-radius: var(--radius-xl); background: var(--gris); }

/* Accès clavier direct au contenu. */
.skip-link {
  position: fixed;
  z-index: 60;
  top: var(--s-3);
  left: var(--gutter);
  padding: var(--s-3) var(--s-4);
  border-radius: 999px;
  background: var(--anthracite);
  color: var(--blanc);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Apparitions discrètes : contenu visible sans JavaScript. */
.reveal { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.reveal-ready:not(.is-visible) { opacity: 0; transform: translateY(16px); }
.reveal.is-visible { opacity: 1; transform: none; }

/* En-tête : barre fine translucide. */
.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  height: var(--header-height);
  border-bottom: 1px solid var(--ligne);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  backdrop-filter: saturate(1.8) blur(18px);
}
.site-header.is-scrolled { background: rgba(255, 255, 255, .9); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: 100%; }
/* Logo : nom en Sora et point doré, inchangés. */
.brand {
  display: inline-flex;
  align-items: baseline;
  flex: none;
  gap: 3px;
  color: inherit;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: inherit; }
.brand__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--dore); }
.desktop-nav, .header-phone, .header-quote { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--s-3); }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--anthracite);
  transition: background-color var(--transition);
}
.menu-toggle:hover { background: var(--gris); }

/* Menu mobile en plein écran. */
.mobile-menu {
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--blanc);
  color: var(--anthracite);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu[open] { animation: fade-in 240ms var(--ease-out); }
.mobile-menu::backdrop { background: rgba(27, 26, 25, .2); }
.mobile-menu__panel { width: 100%; max-width: 600px; margin-inline: auto; padding: var(--s-3) var(--s-5) var(--s-8); }
.mobile-menu__heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.mobile-menu__nav { margin-block: var(--s-6); }
.mobile-menu__nav a {
  display: flex;
  align-items: center;
  min-height: var(--s-9);
  color: var(--anthracite);
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
}
.mobile-menu__nav a:hover { color: var(--paprika-hover); }
[data-nav-link].is-active { color: var(--paprika-hover); }
.mobile-menu__contact { display: flex; flex-direction: column; gap: var(--s-4); }
.mobile-menu__contact > a:not(.btn) { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 900px) {
  :root { --header-height: 52px; }
  .site-header .brand { font-size: 1.25rem; }
  .desktop-nav { display: block; margin-inline: auto; }
  .desktop-nav__list { display: flex; align-items: center; gap: var(--s-6); }
  .desktop-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--anthracite); font-size: .8125rem; text-decoration: none; opacity: .85; transition: opacity var(--transition), color var(--transition); }
  .desktop-nav a:hover { opacity: 1; }
  .desktop-nav a.is-active { opacity: 1; }
  .header-phone { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--anthracite); font-size: .8125rem; text-decoration: none; }
  .header-phone .icon { width: 16px; height: 16px; }
  .header-quote { display: inline-flex; min-height: 34px; padding-inline: var(--s-4); font-size: .8125rem; white-space: nowrap; }
  .menu-toggle { display: none; }
}

/* Introduction : titre centré, puis les deux bacs avec leurs légendes. */
.hero { padding-block: clamp(var(--s-8), 8vw, var(--s-12)) clamp(var(--s-8), 6vw, var(--s-11)); }
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__eyebrow { margin-bottom: var(--s-4); color: var(--texte-2); font-size: .8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: .32em; }
.hero__title { max-width: 17ch; color: var(--anthracite); font-size: clamp(2.375rem, 5.6vw, 4.75rem); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; }
/* Or foncé pour assurer le contraste sur fond blanc. */
.hero__accent { color: #A66D1A; }
.hero__rule { display: block; width: 56px; height: 1.5px; margin: var(--s-5) auto; background: var(--dore); }
/* Phrase descriptive : casse normale pour rester lisible d’un coup d’œil. */
.hero__tagline { max-width: 44ch; color: var(--texte-2); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3) var(--s-6); margin-block-start: var(--s-7); }
.hero__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: clamp(var(--s-8), 6vw, var(--s-11)); }
.hero__product { margin: 0; min-width: 0; }
.hero__image { display: block; width: 100%; aspect-ratio: 740 / 610; object-fit: cover; border-radius: var(--radius-lg); background: var(--gris); }
.hero__product figcaption { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); margin-top: var(--s-5); text-align: center; }
.hero__product figcaption::before { content: ""; display: block; width: 40px; height: 1.5px; margin-bottom: var(--s-2); background: var(--dore); }
.hero__product-name { font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: clamp(.8125rem, 1.4vw, 1.125rem); color: var(--anthracite); }
.hero__product-note { text-transform: uppercase; letter-spacing: .2em; font-size: clamp(.75rem, 1vw, .8125rem); color: var(--texte-2); }
/* Mention d’authenticité des photos, discrète sous les deux bacs. */
.hero__credit { margin-top: var(--s-6); color: var(--texte-2); font-size: .8125rem; text-align: center; }
/* Entrée au chargement : léger glissement seulement, le contenu reste visible dès le premier affichage. */
.hero__inner, .hero__products { animation: hero-in 600ms var(--ease-out) both; }
@keyframes hero-in { from { transform: translateY(8px); } to { transform: none; } }
@media (min-width: 700px) {
  .hero__image { border-radius: var(--radius-xl); }
}
@media (max-width: 479px) {
  .hero__products { gap: var(--s-3); }
  .hero__product figcaption { margin-top: var(--s-4); }
  /* Légendes plus grandes et moins espacées pour rester lisibles sur deux colonnes étroites. */
  .hero__product-name { font-size: .8125rem; letter-spacing: .12em; }
  .hero__product-note { font-size: .75rem; letter-spacing: .08em; }
}

/* Repères : quatre faits, texte seul. */
.facts { border-block: 1px solid var(--ligne); }
.facts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); padding-block: var(--s-7); text-align: center; }
.facts__title { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.facts__detail { margin-block-start: var(--s-1); color: var(--texte-2); font-size: .875rem; }
@media (min-width: 900px) { .facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: var(--s-8); } }

/* Produits : deux tuiles côte à côte, photo et fiche. */
.products__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.product { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: var(--s-6) var(--s-5) var(--s-5); text-align: center; }
.product__tags { color: var(--texte-2); font-size: .875rem; font-weight: 500; }
.product__title { max-width: 16ch; margin-block-start: var(--s-2); font-size: clamp(1.75rem, 3vw, 2.375rem); letter-spacing: -.03em; }
.product__description { max-width: 38ch; margin-block-start: var(--s-4); color: var(--texte-2); }
.product__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3) var(--s-6); margin-block-start: var(--s-5); }
.product__media { width: 100%; margin-block: var(--s-6) var(--s-5); overflow: hidden; border-radius: var(--radius-lg); background: var(--blanc); aspect-ratio: 4 / 3; }
.product__image { width: 100%; height: 100%; object-fit: cover; }
/* Fiche technique : libellé au-dessus de la valeur, sans couper les mots ; deux colonnes dès 360 px. */
.product__specs { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--s-5); width: 100%; font-size: .9375rem; line-height: 1.45; text-align: start; overflow-wrap: break-word; }
.product__spec-row { padding-block: var(--s-3); border-top: 1px solid var(--ligne); }
.product__spec-row dt { color: var(--texte-2); font-size: .8125rem; }
.product__spec-row dd { margin-block-start: 2px; color: var(--anthracite); }
@media (min-width: 360px) {
  .product__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product__spec-row--wide { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product { padding: var(--s-8) var(--s-7) var(--s-7); }
}

/* Contenu de la livraison : quatre lignes simples. */
.includes { margin-block-start: clamp(var(--s-10), 8vw, var(--s-12)); text-align: center; }
.includes__title { color: var(--texte-2); font-family: var(--font-body); font-size: .9375rem; font-weight: 600; }
.includes__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); max-width: 1000px; margin: var(--s-5) auto 0; }
.includes__list li { padding-block: var(--s-4); border-top: 1px solid var(--ligne); font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
@media (min-width: 700px) { .includes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); } }
@media (min-width: 1000px) { .includes__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Qualité : photo de détail et engagements, puis la raison d’être. */
.quality { background: var(--gris); }
.quality__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.quality__figure { overflow: hidden; border-radius: var(--radius-xl); background: var(--blanc); }
.quality__figure img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.quality__item { padding-block: var(--s-5); border-top: 1px solid var(--ligne); }
.quality__item:last-child { border-bottom: 1px solid var(--ligne); }
.quality__item h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -.02em; }
.quality__item p { max-width: 48ch; margin-block-start: var(--s-2); color: var(--texte-2); }
.benefits { margin-block-start: clamp(var(--s-10), 7vw, var(--s-12)); padding: var(--s-8) var(--s-5); background: var(--blanc); text-align: center; }
.benefits__title { font-size: clamp(1.5rem, 2.8vw, 2.125rem); letter-spacing: -.03em; }
.benefits__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); max-width: 1040px; margin: var(--s-6) auto 0; }
.benefits__list li { color: var(--texte-2); font-size: 1.0625rem; }
@media (min-width: 900px) {
  .quality__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--s-8), 7vw, var(--s-12)); }
  .benefits { padding: var(--s-10) var(--s-8); }
  .benefits__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
}

/* Publics : grille typographique. */
.audience__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--s-8); }
.audience__item { padding-block: var(--s-6); border-top: 1px solid var(--ligne); }
.audience__item h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: -.025em; }
.audience__item p { max-width: 34ch; margin-block-start: var(--s-2); color: var(--texte-2); }
@media (min-width: 640px) { .audience__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .audience__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Processus : trois étapes, numéros dans un cercle fin. */
.process { background: var(--gris); }
.process__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); text-align: center; }
.process__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-block-end: var(--s-5);
  border: 1.5px solid var(--paprika);
  border-radius: 50%;
  color: var(--paprika-hover);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
}
.process__step h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -.02em; }
.process__step p { max-width: 34ch; margin: var(--s-3) auto 0; color: var(--texte-2); }
.process__cta { display: flex; justify-content: center; margin-block-start: var(--s-10); }
@media (min-width: 900px) { .process__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Livraison : la seule section sombre, en contrepoint. */
.delivery__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.delivery__content .section__title { max-width: 16ch; }
.delivery__facts { margin-block-start: var(--s-7); }
.delivery__fact { padding-block: var(--s-5); border-top: 1px solid var(--ligne-claire); }
.delivery__fact dt { color: var(--texte-2-sombre); font-size: .875rem; }
.delivery__fact dd { margin-block-start: var(--s-1); font-family: var(--font-heading); font-size: clamp(1.125rem, 1.8vw, 1.375rem); font-weight: 600; letter-spacing: -.015em; }
.delivery__note { margin-block-start: var(--s-5); color: var(--texte-2-sombre); font-size: .875rem; }
/* Carte : contour réel des Bouches-du-Rhône, base marseillaise en paprika. */
.delivery__map { width: 100%; max-width: 560px; margin: 0; justify-self: center; }
.delivery__map-svg { width: 100%; height: auto; overflow: visible; }
.delivery__land { fill: var(--blanc); fill-opacity: .035; stroke: var(--blanc); stroke-opacity: .5; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.delivery__sea { fill: var(--texte-2-sombre); font-family: var(--font-body); font-size: 13px; font-style: italic; letter-spacing: .08em; opacity: .7; }
.delivery__town circle { fill: var(--blanc); opacity: .7; }
.delivery__town text { fill: var(--texte-2-sombre); font-family: var(--font-body); font-size: 13px; }
.delivery__base-halo { fill: none; stroke: var(--paprika); stroke-width: 1.5; opacity: .7; transform-box: fill-box; transform-origin: center; animation: base-pulse 3.2s var(--ease-out) infinite; }
.delivery__base-dot { fill: var(--paprika); stroke: var(--anthracite); stroke-width: 2; }
.delivery__base text { fill: var(--blanc); font-family: var(--font-heading); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.delivery__map-caption { margin-block-start: var(--s-4); color: var(--texte-2-sombre); font-size: .8125rem; text-align: center; }
/* Sur mobile, la carte rétrécit : les libellés grossissent pour rester lisibles. */
@media (max-width: 639px) {
  .delivery__town text, .delivery__sea { font-size: 18px; }
  .delivery__base text { font-size: 24px; }
}
@keyframes base-pulse { 0% { transform: scale(.7); opacity: .8; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
@media (min-width: 900px) { .delivery__layout { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-12); } }

/* FAQ : colonne étroite centrée. */
.faq__inner { max-width: 860px; }
.faq__list { border-bottom: 1px solid var(--ligne); }
.faq__item { border-top: 1px solid var(--ligne); }
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--control-min-height);
  padding-block: var(--s-5);
  font-family: var(--font-heading);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question > span { min-width: 0; }
.faq__chevron { color: var(--texte-2); transition: transform 300ms var(--ease-out); }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__answer { max-width: 62ch; padding-block-end: var(--s-5); color: var(--texte-2); }
.faq__item[open] .faq__answer { animation: fade-in 300ms var(--ease-out); }
.faq__contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2); margin-block-start: var(--s-7); color: var(--texte-2); }
.faq__contact > a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Devis : en-tête centré, formulaire en tuile blanche sur gris. */
.quote { background: var(--gris); }
.quote__inner { max-width: 880px; }
.quote__points { margin-block-start: var(--s-4); color: var(--texte-2); font-size: .9375rem; }
.quote__points a { font-weight: 600; }
.quote-form {
  display: grid;
  gap: var(--s-5);
  min-width: 0;
  padding: clamp(var(--s-5), 5vw, var(--s-10));
  border-radius: var(--radius-xl);
  background: var(--blanc);
}
.quote-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.quote-form__field { display: grid; align-content: start; gap: var(--s-2); min-width: 0; }
.quote-form__field > label, .quote-form__products > legend { font-size: .9375rem; font-weight: 600; }
.quote-form__requirement { color: var(--texte-2); font-size: .8125rem; font-weight: 400; }
.quote-form__field :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: var(--control-min-height);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--bord-champ);
  border-radius: var(--radius-control);
  background: var(--blanc);
  color: var(--anthracite);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.quote-form__field :is(input, select, textarea):hover { border-color: var(--anthracite); }
.quote-form__field :is(input, select, textarea):focus-visible { border-color: var(--anthracite); outline-offset: 1px; }
.quote-form__field [aria-invalid="true"] { border-color: var(--paprika-hover); background: #FDF7F4; }
.quote-form__field textarea { min-height: 140px; }
.quote-form__products { min-width: 0; margin: 0; padding: 0; border: 0; }
.quote-form__products > legend { margin-block-end: var(--s-2); padding: 0; }
.quote-form__choices { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.quote-form__choice {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--control-min-height);
  padding: var(--s-3) var(--s-5) var(--s-3) var(--s-4);
  border: 1px solid var(--bord-champ);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}
.quote-form__choice:hover { border-color: var(--anthracite); }
.quote-form__choice:has(input:checked) { border-color: var(--paprika); background: #FCF1EC; }
.quote-form__choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--paprika-hover); }
.quote-form__help, .quote-form__status { color: var(--texte-2); font-size: .875rem; }
/* Message d’erreur placé sous le champ concerné. */
.quote-form__error { color: var(--paprika-hover); font-size: .875rem; font-weight: 500; }
.quote-form__status { min-height: 1.6em; }
.quote-form__status:not(:empty) { color: var(--anthracite); }
.quote-form > .btn { justify-self: center; min-height: 52px; padding-inline: var(--s-8); }
@media (min-width: 640px) { .quote-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pied de page : clair et discret. */
.site-footer { border-top: 1px solid var(--ligne); background: var(--gris); color: var(--anthracite); padding-top: var(--s-10); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); padding-bottom: var(--s-8); }
.site-footer__brand .brand { margin-bottom: var(--s-3); font-size: 1.5rem; }
.site-footer__brand p { max-width: 34ch; color: var(--texte-2); font-size: .875rem; }
.site-footer__title { margin-bottom: var(--s-3); font-family: var(--font-body); font-size: .8125rem; font-weight: 600; letter-spacing: 0; }
.site-footer__links a, .site-footer__contact a { display: inline-flex; align-items: center; min-height: 40px; color: var(--texte-2); font-size: .875rem; text-decoration: none; }
.site-footer__links a:hover, .site-footer__contact a:hover { color: var(--anthracite); text-decoration: underline; }
.site-footer__links li { color: var(--texte-2); font-size: .875rem; }
.site-footer__contact { display: flex; flex-direction: column; align-items: flex-start; font-style: normal; }
.site-footer__contact p, .site-footer__hours { color: var(--texte-2); font-size: .875rem; }
.site-footer__hours { margin-top: var(--s-3); }
.site-footer__bottom { padding-block: var(--s-5); border-top: 1px solid var(--ligne); color: var(--texte-2); font-size: .8125rem; }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; } }

/* Barre d’action mobile : apparaît après l’introduction, s’efface sur le formulaire. */
.mobile-cta {
  position: fixed;
  z-index: 25;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ligne);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  backdrop-filter: saturate(1.8) blur(18px);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 320ms var(--ease-out), visibility 0s linear 320ms;
}
.mobile-cta.is-visible { transform: none; visibility: visible; transition: transform 320ms var(--ease-out), visibility 0s; }
.mobile-cta__quote { flex: 1; }
.mobile-cta__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--control-min-height);
  height: var(--control-min-height);
  border: 1.5px solid var(--anthracite);
  border-radius: 999px;
  color: var(--anthracite);
}
/* Tant que le numéro n’est pas renseigné, le bouton d’appel reste masqué. */
.mobile-cta__call[aria-disabled="true"] { display: none; }
@media (min-width: 900px) { .mobile-cta { display: none; } }
@media (width < 900px) {
  body:has(.mobile-cta) .site-footer { padding-bottom: calc(var(--s-11) + env(safe-area-inset-bottom)); }
}

/* Une image absente laisse son cadre, sans icône d’image cassée. */
:is(.hero__image, .product__image).is-unavailable { opacity: 0; }

/* Préférence sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .reveal.reveal-ready:not(.is-visible) { opacity: 1; transform: none; }
}

/* Polices locales officielles : deux sous-ensembles par famille, sans service externe. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-ext-variable.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../assets/fonts/sora-latin-ext-variable.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../assets/fonts/sora-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Pages informatives : colonne de lecture centrée. */
.document-page { background: var(--blanc); }
.document-page__content { max-width: 760px; margin-inline: auto; }
.document-page__title { margin-block-end: var(--s-6); }
.document-page__content p,
.document-page__content ul { color: var(--texte-2); }
.document-page__updated { margin-block-start: var(--s-8); }
.document-page__section { margin-block-start: var(--s-8); padding-block-start: var(--s-6); border-top: 1px solid var(--ligne); }
.document-page__section h2 { max-width: 36ch; margin-block-end: var(--s-5); color: var(--anthracite); font-size: clamp(1.25rem, 2.5vw, 1.5rem); letter-spacing: -.015em; }
.document-page__section p + p,
.document-page__section p + ul,
.document-page__section ul + p { margin-block-start: var(--s-5); }
.document-page__section ul { padding-inline-start: var(--s-5); }
.document-page__section li + li { margin-block-start: var(--s-3); }
/* Une ligne dorée distingue les données à renseigner. */
.document-page__pending { margin-block: var(--s-5); padding-inline-start: var(--s-4); border-inline-start: 3px solid var(--dore); color: var(--texte-2); }