/* Page d'accueil (/) — gabarit bespoke propre à cette page. Repris de
   moltow-08-2026/index.html — tokens (--terra/--green/--amber/etc.) déjà
   globaux via tokens.css. Header/nav/footer déjà couverts globalement par
   header-styles.css/footer-styles.css/Footer.astro — non repris (le
   <footer> dupliqué dans le corps de la source, comme sur toutes les pages
   précédentes, est omis du dépôt).

   Deux pièges trouvés en lisant la source jusqu'au bout (pas seulement le
   premier bloc <style>) :
   1. section#gamme a DEUX définitions dans la source : un bloc "Gamme
      technique" tôt dans le fichier (figure/figcaption/b[data-tag]) qui ne
      correspond à AUCUN élément du vrai corps, et un bloc "teaser-gamme"
      bien plus loin (après les schémas JSON-LD) qui, lui, style
      exactement la vraie structure (ul[data-proof]/div[data-pieces]/
      dl[data-chiffres]/nav[data-decouvrir]) en bandeau sombre premium.
      Seul le second est repris.
   2. Un fichier externe `css/homepage-warm-palette.css` est chargé après
      le <style> inline et gagne la cascade sur plusieurs couleurs — dont
      plusieurs qui corrigent un bleu/indigo résiduel de l'ancien système
      resté dans le <style> inline (ex. nav Partenaires, CTA gamme au survol,
      chiffres clés, dégradé collections) : même motif "couleur générique
      jamais recolorée" que sur tout le reste de ce chantier, ici trouvé à
      l'intérieur même de la maquette plutôt que dans le legacy PHP. Ce
      fichier contient aussi 10 AUTRES variantes de palette + un sélecteur
      flottant (.palette-chooser) — un outil de comparaison pour le patron,
      jamais destiné aux visiteurs (data-palette="sable" est le choix
      figé par défaut, posé en dur ci-dessous plutôt que par attribut+JS).
      Scopé à `main` (pas `:root`) pour ne pas teinter le header/footer
      globaux, qui doivent rester identiques au reste du site.
      (Était `body > main` — sélecteur mort côté beta, corrigé 2026-09-08,
      cf. bloc de tokens plus bas.) */

body {
  margin: 0;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* -moz-osx-font-smoothing conservé (équivalent Firefox/macOS, absent de la
     maquette qui ne cible que WebKit) ; text-rendering repris de la maquette. */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Reset image de la maquette (`img{max-width:100%;height:auto;display:block}`)
   — jamais porté : sans `height:auto`, l'attribut `height=".."` des <img>
   déposés (ex. `width="748" height="468"`) agit comme hint présentation et
   NEUTRALISE `aspect-ratio` sur les cartes qui s'appuient dessus (#offre,
   #realisations) → images étirées en hauteur. Scopé à `main` pour ne pas
   toucher le chrome global (Header/Footer ont leurs propres tailles d'icônes). */
main img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Scopé à `main` — PAS `body > main` : Layout.astro enveloppe le <main> dans
   `body > .page > .content > main`, donc `body > main` ne matchait jamais et
   tout ce bloc était mort (la homepage tournait sur les tokens globaux de
   tokens.css : --bg #fff, --green #3f7d5c, ombres bleutées, + font-size 16px
   au lieu du clamp). Corrigé en `main` 2026-09-08, feu vert patron. Le scope
   « pas le chrome » est préservé : `main` (descendant) ne touche ni header ni
   footer.
   - font-size : repris de `body{font-size:var(--step-0)}` de la maquette
     (page-base.css ne pose ni font-family ni font-size sur body) — hérité par
     les [data-cta] sans taille propre (bouton « Découvrir toute la gamme »).
   - le reste : palette « chaude » de la maquette (homepage-warm-palette.css
     :root, choix par défaut « sable »). */
main {
  font-size: var(--step-0);
  --green: #6f765b;
  --amber: #b88345;
  --bg: #fbf8f3;
  --bg-alt: #f3ede5;
  --bg-inset: #ebe1d5;
  --ink: #332820;
  --ink-soft: #57483e;
  --ink-mute: #7b6d62;
  --line: #dfd3c7;
  --card: #fffdf9;
  --shadow: 0 16px 42px rgba(69, 48, 34, 0.12);
  --shadow-sm: 0 5px 18px rgba(69, 48, 34, 0.08);
}
@media (prefers-contrast: more) {
  main {
    --terra: #745039;
    --ink-soft: #44372f;
    --ink-mute: #66584e;
  }
}

main mark {
  background: none;
  color: var(--amber);
}

/* ---- Primitives typographiques ---------------------------- */
/* Générique du gabarit source (`h1,h2,h3{...}`, `h1{font-size:var(--step-4)}`
   etc.) — oublié au premier portage : chaque section avait bien son propre
   h3 de carte stylé, mais aucun fallback pour les h2 de titre de section
   sans override dédié (#offre/#packs/#etapes/#realisations/#collections/
   #avis/#faq, #gamme > hgroup > h2) — ceux-ci retombaient silencieusement
   sur un vieux `h2{font-size:...}` générique de page-base.css (résidu
   legacy, tailles/couleurs sans rapport). Une section avec son propre h1/h2/
   h3 plus spécifique (ex. `section[aria-labelledby='hero-title'] h1`)
   continue de gagner sur ce fallback, spécificité oblige. */
main h1,
main h2,
main h3 {
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 800;
}
main h1 {
  font-size: var(--step-4);
}
main h2 {
  font-size: var(--step-3);
}
main h3 {
  font-size: var(--step-1);
}
main [data-eyebrow] {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.8rem;
}
main [data-cta] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
  border: 1.5px solid transparent;
}
main [data-cta='primary'] {
  background: var(--terra);
  color: #fff;
}
main [data-cta='primary']:hover {
  background: var(--terra-dark);
  transform: translateY(-1px);
}
main [data-cta='ghost'] {
  border-color: var(--terra);
  color: var(--ink);
}
main [data-cta='ghost']:hover {
  border-color: var(--terra);
  color: var(--terra);
  background: rgba(138, 98, 72, 0.06);
}

/* ============================================================
   HERO
   ============================================================ */
main > section[aria-labelledby='hero-title'] {
  /* page-base.css ne pose pas de `body{color}` — sans ça le h1/les valeurs de
     stats du hero tombaient sur le noir pur du navigateur au lieu de --ink
     (le reste du texte a une couleur explicite). Posé sur la section pour que
     le hero de la home matche celui des autres pages (demande patron 2026-09-07
     sur /pour-qui/ffe). */
  color: var(--ink);
  background: radial-gradient(70rem 42rem at 92% -8%, rgba(166, 128, 99, 0.24), transparent 68%), linear-gradient(135deg, #f7f0e7 0%, #eee2d5 55%, #e7d7c8 100%);
  padding-block: clamp(2rem, 4vh, 3.5rem);
  padding-inline: max(clamp(1rem, 5vw, 3rem), calc((100% - var(--measure) - 4rem) / 2));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
main > section[aria-labelledby='hero-title'] h1 {
  font-size: clamp(2.1rem, 1.55rem + 2.5vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 0.35em;
  text-wrap: balance;
}
main > section[aria-labelledby='hero-title'] > header [data-eyebrow] {
  font-size: 0.72rem;
  margin-bottom: 1.1rem;
  letter-spacing: 0.16em;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
main > section[aria-labelledby='hero-title'] > header [data-eyebrow]::before {
  content: '';
  width: 2rem;
  height: 2px;
  background: var(--terra);
  border-radius: 2px;
}
main > section[aria-labelledby='hero-title'] > header > hgroup > p:last-of-type {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 40ch;
  margin-top: 0.8rem;
  line-height: 1.5;
}
main > section[aria-labelledby='hero-title'] em {
  font-style: normal;
  color: var(--terra);
  background: linear-gradient(transparent 68%, var(--terra-soft) 0);
  border-radius: 0.15em;
}
main > section[aria-labelledby='hero-title'] > header > ul {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--step-0);
}
main > section[aria-labelledby='hero-title'] > header > ul > li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
main > section[aria-labelledby='hero-title'] > header > ul > li::before {
  content: '✓';
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  display: grid;
  place-items: center;
}
main > section[aria-labelledby='hero-title'] > header > nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.3rem;
}
main > section[aria-labelledby='hero-title'] > header > nav > [data-cta='primary'] {
  padding: 1rem 1.9rem;
  font-size: var(--step-0);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--terra) 32%, transparent);
}
main > section[aria-labelledby='hero-title'] > header > dl {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  justify-content: start;
  column-gap: clamp(1.6rem, 3vw, 3rem);
  row-gap: 0.05rem;
  margin: 1.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
main > section[aria-labelledby='hero-title'] > header > dl > dt {
  font-weight: 900;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}
main > section[aria-labelledby='hero-title'] > header > dl > dd {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-mute);
}
main > section[aria-labelledby='hero-title'] > header > dl a:hover {
  color: var(--terra);
}
main > section[aria-labelledby='hero-title'] > figure {
  margin: 0;
  position: relative;
}
main > section[aria-labelledby='hero-title'] > figure::before {
  content: '';
  position: absolute;
  inset: 10% -1.4rem -1.4rem 10%;
  background: rgba(138, 98, 72, 0.18);
  border-radius: var(--radius-lg);
}
main > section[aria-labelledby='hero-title'] > figure > img {
  position: relative;
  width: 100%;
  /* height:auto indispensable ici : la balise <img> porte des attributs HTML
     width/height (854/569, "size hint" natif du navigateur, priorité la plus
     basse mais rien ne le bat sans ça) — sans le neutraliser, il impose sa
     propre hauteur et aspect-ratio ci-dessous est ignoré pour la hauteur
     réellement rendue. La maquette a un reset global `img{height:auto}` que
     beta n'a pas (repéré par Katia, cf. memory moltow_css_redesign) ; fix
     scopé ici plutôt que d'ajouter ce reset partout sans lui en parler. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
main > section[aria-labelledby='hero-title'] > figure > figcaption {
  position: absolute;
  inset-block-end: 1.3rem;
  inset-inline-start: -1.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 18px;
  padding: 1rem 1.4rem;
  display: grid;
  gap: 0.15rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
}
main > section[aria-labelledby='hero-title'] > figure > figcaption > b {
  font-size: var(--step-2);
  font-weight: 900;
  color: var(--terra);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
main > section[aria-labelledby='hero-title'] > figure > p {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  margin: 0;
  background: rgba(56, 42, 33, 0.76);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
}
@media (max-width: 40rem) {
  main > section[aria-labelledby='hero-title'] > figure::before {
    inset-inline-end: -0.6rem;
    inset-block-end: -0.6rem;
  }
  main > section[aria-labelledby='hero-title'] > figure > figcaption {
    inset-inline-start: 0.8rem;
  }
}
@media (min-width: 64rem) {
  main > section[aria-labelledby='hero-title'] {
    grid-template-columns: 1.05fr 0.95fr;
  }
  main > section[aria-labelledby='hero-title'] > figure > figcaption {
    padding: 1.15rem 1.6rem;
    inset-inline-start: -1.8rem;
  }
}

/* ============================================================
   Bandeau confiance (logos partenaires)
   ============================================================ */
main > nav[aria-label='Partenaires'] {
  border-block-end: 1px solid var(--line);
  text-align: center;
  background: linear-gradient(180deg, #e7d7c8 0%, #f1e8de 100%);
  padding-block: 1.6rem 1.9rem;
  margin: 0;
  padding-inline: clamp(1rem, 5vw, 3rem);
}
main > nav[aria-label='Partenaires'] > p {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #705f53;
  margin-bottom: 1rem;
}
main > nav[aria-label='Partenaires'] > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1.1rem);
  color: var(--ink-mute);
  font-weight: 800;
  font-size: var(--step-0);
}
main > nav[aria-label='Partenaires'] > ul > li {
  background: #fffaf4;
  border-radius: 14px;
  padding: 0.7rem 1.3rem;
  box-shadow: 0 6px 18px rgba(69, 48, 34, 0.08);
  display: flex;
  align-items: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
main > nav[aria-label='Partenaires'] > ul > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(69, 48, 34, 0.14);
}
main > nav[aria-label='Partenaires'] > ul img {
  height: 32px;
  width: auto;
}
main > nav[aria-label='Partenaires'] > ul img[alt='Locacolocs'] {
  height: 34px;
}

/* ============================================================
   Sections génériques
   ============================================================ */
main > section {
  padding-block: var(--pad-section);
  padding-inline: clamp(1rem, 5vw, 3rem);
}
main > section > hgroup {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
main > section > hgroup > p {
  font-size: var(--step-1);
  color: var(--ink-soft);
}
main > section:nth-of-type(even) {
  background: var(--bg-alt);
}

/* ---- #gamme : bandeau premium sombre "teaser" (2e définition de la
   source, la seule qui correspond au vrai corps — voir note en tête de
   fichier) ---------------------------------------------------------- */
main > section#gamme {
  background: linear-gradient(135deg, #3f3027 0%, #604737 55%, #886248 100%);
  color: #fff;
  text-align: center;
  padding-block: clamp(3rem, 2.2rem + 3.5vw, 4.6rem);
}
main > section#gamme > hgroup {
  margin-bottom: clamp(1.4rem, 2.5vw, 1.9rem);
}
main > section#gamme > hgroup > [data-eyebrow] {
  color: #e8cdb6;
}
main > section#gamme > hgroup > h2 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
main > section#gamme > hgroup > p:last-of-type {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--step-0);
}
main > section#gamme > ul[data-proof] {
  list-style: none;
  margin: 0 auto clamp(1.8rem, 3vw, 2.4rem);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.7rem;
  max-width: var(--measure);
}
main > section#gamme > ul[data-proof] > li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
main > section#gamme > ul[data-proof] > li::before {
  content: '✓';
  font-weight: 900;
  color: #fff;
}
main > section#gamme > div[data-pieces] {
  max-width: min(56rem, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: start;
  text-align: left;
}
main > section#gamme article > h3 {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e8cdb6;
  margin: 0 0 0.55rem;
}
main > section#gamme article > figure {
  margin: 0 0 0.8rem;
}
main > section#gamme article > figure > img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(8, 9, 38, 0.45);
}
main > section#gamme article > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}
main > section#gamme article > ul > li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-weight: 600;
  font-size: var(--step--1);
  color: #fff;
  line-height: 1.4;
}
main > section#gamme article > ul > li::before {
  content: '✓';
  flex: none;
  font-weight: 900;
  font-size: 0.8rem;
  color: #e8cdb6;
}
main > section#gamme article > ul a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: border-color 0.15s, color 0.15s;
}
main > section#gamme article > ul a:hover {
  color: #f0d9c5;
  border-color: #f0d9c5;
}
main > section#gamme > dl[data-chiffres] {
  max-width: var(--measure);
  margin: clamp(1.8rem, 3vw, 2.4rem) auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0.9rem 0;
  text-align: center;
}
main > section#gamme > dl[data-chiffres] > dt {
  display: none;
}
main > section#gamme > dl[data-chiffres] > dd {
  margin: 0;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem);
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
main > section#gamme > dl[data-chiffres] > dd:first-of-type {
  border-left: 0;
}
main > section#gamme > dl[data-chiffres] > dd::after {
  content: attr(data-label);
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8cdb6;
  margin-top: 0.35rem;
}
main > section#gamme > nav[data-decouvrir] {
  margin-top: clamp(1.6rem, 2.5vw, 2rem);
  display: flex;
  justify-content: center;
}
/* Valeurs reprises telles quelles du <style id="teaser-gamme"> de la maquette
   (repos #fff/#3f3027, survol #e6e5ff/#3f3027) — remplace les valeurs
   #fffaf4/#eee1d5 qui venaient de homepage-warm-palette.css (l'outil de
   comparaison de palettes, cf. en-tête de ce fichier), pas du rendu réel de
   la maquette. Demande patron 2026-09-08. */
main > section#gamme [data-cta='primary'] {
  background: #fff;
  color: #3f3027;
  box-shadow: 0 10px 30px rgba(8, 9, 38, 0.35);
}
main > section#gamme [data-cta='primary']:hover {
  background: #e6e5ff;
  color: #3f3027;
}
@media (max-width: 760px) {
  main > section#gamme > div[data-pieces] {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  main > section#gamme article > figure > img {
    height: 170px;
  }
  main > section#gamme > dl[data-chiffres] > dd {
    flex: 1 1 100%;
    border-left: 0;
    padding-block: 0.25rem;
  }
}

/* ---- #offre : "ce qui est inclus", cartes pièce par pièce -------- */
section#offre > ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--measure);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--gutter);
}
section#offre > ul > li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}
section#offre > ul > li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
section#offre article {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}
section#offre article > img,
section#offre article > a > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
section#offre article > a:first-child {
  display: block;
}
section#offre article > h3 {
  margin: 1.2rem 1.3rem 0.6rem;
}
section#offre article > ul {
  list-style: none;
  margin: 0 1.3rem 1.4rem;
  padding: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
section#offre article > ul > li {
  padding: 0.2rem 0 0.2rem 1.1rem;
  position: relative;
}
section#offre article > ul > li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.65em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--terra);
}

/* ---- Packs & tarifs --------------------------------------- */
section#packs > ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--measure);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--gutter);
}
section#packs > ul a {
  display: block;
  height: 100%;
}
section#packs article {
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
}
section#packs article:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
section#packs li:nth-child(2) article {
  border: 2px solid var(--terra);
}
section#packs figure {
  margin: 0;
  position: relative;
}
section#packs figure > img {
  width: 100%;
  height: 13.5rem;
  object-fit: cover;
}
section#packs figure > figcaption {
  position: absolute;
  inset-block-start: 0.8rem;
  inset-inline-end: 0.8rem;
  background: var(--terra);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
section#packs article > h3 {
  margin: 1.1rem 1.3rem 0.1rem;
}
section#packs article > p {
  margin: 0 1.3rem;
  color: var(--ink-mute);
  font-size: var(--step--1);
}
section#packs article > b {
  display: block;
  margin: 0.7rem 1.3rem 0;
  font-size: var(--step-2);
  font-weight: 900;
  letter-spacing: -0.02em;
}
section#packs article > b > small {
  font-size: 0.55em;
  font-weight: 700;
  color: var(--ink-soft);
}
section#packs article > p:last-of-type {
  margin: 0.1rem 1.3rem 1.3rem;
  color: var(--green);
  font-weight: 700;
}
section#packs li:last-child {
  grid-column: span 2;
}
section#packs li:last-child article {
  border: 2px solid var(--terra);
}
@media (max-width: 44rem) {
  section#packs li:last-child {
    grid-column: auto;
  }
}
section#packs > p {
  text-align: center;
  margin: 2.2rem 0 0;
  font-weight: 600;
}
section#packs > p > a {
  color: var(--terra);
  font-weight: 800;
}

/* ---- Loi Alur --------------------------------------------- */
section#alur {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  max-width: var(--measure);
  margin-inline: auto;
}
section#alur > hgroup {
  text-align: start;
  margin: 0;
  max-width: none;
}
section#alur > hgroup > b {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--terra-soft);
  color: var(--terra);
  font-weight: 800;
  font-size: var(--step--1);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
section#alur > hgroup > p {
  color: var(--ink-soft);
  font-size: var(--step-0);
}
section#alur > hgroup > ul {
  list-style: none;
  margin: 1.4rem 0;
  padding: 1.5rem;
  background: var(--bg-inset);
  border-radius: var(--radius);
  columns: 2;
  column-gap: 1.6rem;
}
section#alur > hgroup > ul > li {
  break-inside: avoid;
  padding: 0.4rem 0 0.4rem 1.6rem;
  position: relative;
  font-size: var(--step--1);
  font-weight: 600;
}
section#alur > hgroup > ul > li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.35em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 0.65rem;
  display: grid;
  place-items: center;
  font-weight: 900;
}
section#alur > figure {
  margin: 0;
}
section#alur > figure > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
@media (max-width: 40rem) {
  section#alur > hgroup > ul {
    columns: 1;
  }
}

/* ---- Étapes (liste ordonnée) ------------------------------ */
section#etapes > ol {
  list-style: none;
  counter-reset: step;
  margin: 0 auto;
  padding: 0;
  max-width: var(--measure);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--gutter);
}
section#etapes > ol > li {
  counter-increment: step;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
section#etapes > ol > li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: var(--terra);
  color: #fff;
  font-weight: 900;
  font-size: var(--step-1);
  margin-bottom: 1rem;
}
section#etapes h3 {
  margin-bottom: 0.4rem;
}
section#etapes p {
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* ---- Réalisations ----------------------------------------- */
section#realisations > ul {
  list-style: none;
  margin: 0 auto 2.4rem;
  padding: 0;
  max-width: var(--measure);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--gutter);
}
section#realisations article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--card);
  transition: transform 0.2s, box-shadow 0.2s;
  display: grid;
  grid-template-rows: auto 1fr;
}
section#realisations article:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
section#realisations figure {
  margin: 0;
  position: relative;
  overflow: hidden;
}
section#realisations figure > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.4s;
}
section#realisations article:hover figure > img {
  transform: scale(1.05);
}
section#realisations figure > figcaption {
  position: absolute;
  inset-block-start: 0.7rem;
  inset-inline-start: 0.7rem;
  background: var(--card);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
section#realisations article > h3 {
  margin: 1.1rem 1.2rem 0.3rem;
  font-size: var(--step-1);
}
section#realisations article > p {
  margin: 0 1.2rem;
  color: var(--ink-mute);
  font-size: var(--step--1);
}
section#realisations article > b {
  margin: 0.7rem 1.2rem 1.2rem;
  color: var(--terra);
  font-weight: 800;
}
section#realisations > a[data-cta] {
  display: inline-flex;
  margin-inline: auto;
}
section#realisations {
  text-align: center;
}

/* ---- Collections ------------------------------------------ */
section#collections > ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--measure);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gutter);
}
section#collections > ul > li {
  grid-column: span 2;
}
section#collections > ul > li:nth-child(-n + 2) {
  grid-column: span 3;
}
section#collections figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: 100%;
}
section#collections figure > img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s;
}
section#collections > ul > li:nth-child(-n + 2) figure > img {
  aspect-ratio: 16 / 9;
}
section#collections a:hover figure > img,
section#collections a:focus-visible figure > img {
  transform: scale(1.05);
}
section#collections figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 3rem 1.2rem 1.1rem;
  background: linear-gradient(transparent, rgba(48, 37, 31, 0.9));
  color: #fff;
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}
@media (max-width: 56rem) {
  section#collections > ul {
    grid-template-columns: 1fr 1fr;
  }
  section#collections > ul > li,
  section#collections > ul > li:nth-child(-n + 2) {
    grid-column: span 1;
  }
  section#collections > ul > li:nth-child(-n + 2) figure > img {
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 36rem) {
  section#collections > ul {
    grid-template-columns: 1fr;
  }
}

/* ---- Stats ------------------------------------------------ */
section[aria-label='Chiffres clés'] {
  background: #3b2d25 !important;
  color: #fff;
}
section[aria-label='Chiffres clés'] > dl {
  margin: 0 auto;
  max-width: var(--measure);
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  grid-auto-columns: 1fr;
  column-gap: var(--gutter);
  row-gap: 0;
  text-align: center;
}
@media (max-width: 40rem) {
  section[aria-label='Chiffres clés'] > dl {
    grid-template-rows: repeat(4, auto);
  }
  section[aria-label='Chiffres clés'] dd:not(:last-of-type) {
    margin-bottom: 1.4rem;
  }
}
section[aria-label='Chiffres clés'] dt {
  font-size: var(--step-3);
  font-weight: 900;
  color: #e6c8ae;
  letter-spacing: -0.03em;
}
section[aria-label='Chiffres clés'] dd {
  margin: 0.2rem 0 0;
  font-size: var(--step--1);
  color: #d8c9bd;
}

/* ---- Témoignages ------------------------------------------ */
section#avis > ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--measure);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--gutter);
}
section#avis blockquote {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-rows: auto 1fr;
}
section#avis blockquote > img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
section#avis blockquote > p {
  margin: 1.4rem 1.4rem 1rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
section#avis blockquote > p:first-of-type {
  color: var(--amber);
  letter-spacing: 2px;
  margin-bottom: 0.3rem;
}
/* Figcaption : refinements finaux de la source (bloc "cartes-avis-fix",
   qui gagne sur la définition générique plus haut dans le même fichier) */
section#avis figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  margin: 0 1.4rem 1.4rem;
}
section#avis figcaption > b {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--terra-soft);
  color: var(--terra-dark);
  font-weight: 800;
  font-size: var(--step--1);
}
section#avis cite {
  font-style: normal;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
section#avis cite > b {
  display: block;
  font-size: 0.95rem;
  line-height: 1.2;
}
section#avis cite > small {
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
section#avis figcaption > a {
  flex-basis: 100%;
  margin: 0 0 0 3.3rem !important;
  font-size: 0.88rem;
  color: var(--terra);
  font-weight: 700;
  white-space: nowrap;
}
section#avis figcaption > a:hover {
  text-decoration: underline;
}

/* ---- FAQ (details/summary natif) -------------------------- */
section#faq > ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 52rem;
}
section#faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  margin-bottom: 0.8rem;
  overflow: hidden;
}
section#faq summary {
  cursor: pointer;
  padding: 1.1rem 1.3rem;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
section#faq summary::-webkit-details-marker {
  display: none;
}
section#faq summary::after {
  content: '+';
  color: var(--terra);
  font-size: var(--step-1);
  font-weight: 700;
}
section#faq details[open] summary::after {
  content: '−';
}
section#faq details > p {
  margin: 0 1.3rem 1.2rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* ---- CTA final -------------------------------------------- */
main > section[aria-label="Appel à l'action"] {
  background: linear-gradient(135deg, #8a6248, #654533) !important;
  color: #fff;
  text-align: center;
}
main > section[aria-label="Appel à l'action"] > hgroup {
  margin-bottom: 1.6rem;
}
main > section[aria-label="Appel à l'action"] > hgroup > p {
  color: rgba(255, 255, 255, 0.92);
}
main > section[aria-label="Appel à l'action"] > nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}
main > section[aria-label="Appel à l'action"] [data-cta='primary'] {
  background: #fffaf4;
  color: #604231;
}
main > section[aria-label="Appel à l'action"] [data-cta='ghost'] {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 760px) {
  main > section {
    padding-block: 2.3rem !important;
  }
  main > section > hgroup {
    margin-bottom: 1.4rem !important;
  }
  main > section > hgroup > p {
    font-size: 0.95rem;
  }

  /* Carrousels swipe (pas de grille, défilement horizontal) */
  #realisations > ul,
  #packs > ul,
  #gamme [data-pieces],
  #offre > ul,
  #avis > ul {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.9rem;
    padding: 0 1.1rem 1rem;
    margin: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #realisations > ul::-webkit-scrollbar,
  #packs > ul::-webkit-scrollbar,
  #gamme [data-pieces]::-webkit-scrollbar,
  #offre > ul::-webkit-scrollbar,
  #avis > ul::-webkit-scrollbar {
    display: none;
  }
  #realisations > ul > li {
    flex: 0 0 84%;
    scroll-snap-align: center;
  }
  #packs > ul > li {
    flex: 0 0 74%;
    scroll-snap-align: center;
  }
  #gamme [data-pieces] > * {
    flex: 0 0 80%;
    scroll-snap-align: center;
  }
  #offre > ul > li {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }
  #avis > ul > li {
    flex: 0 0 84%;
    scroll-snap-align: center;
  }

  /* Gamme : pastilles proof compactes sur 2 colonnes */
  #gamme [data-proof] {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    font-size: 0.8rem;
  }

  /* Hero compact */
  section[aria-labelledby='hero-title'] [data-eyebrow] {
    display: none !important;
  }
  #alur img,
  #alur figure {
    display: none !important;
  }
  /* Numéro de téléphone → bouton picto, à la suite du CTA */
  section[aria-labelledby='hero-title'] > header > nav {
    align-items: stretch;
  }
  section[aria-labelledby='hero-title'] a[href^='tel:'] {
    font-size: 0;
    gap: 0;
    padding: 0 1.05rem;
    border-radius: 999px;
    border: 1.5px solid var(--terra, #8a6248);
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  section[aria-labelledby='hero-title'] a[href^='tel:']::before {
    content: '';
    width: 1.15rem;
    height: 1.15rem;
    display: block;
    background: var(--terra, #8a6248);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.24 1.02l-2.21 2.2z"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.24 1.02l-2.21 2.2z"/></svg>') center / contain no-repeat;
  }
  section[aria-labelledby='hero-title'] {
    padding-block: 1.66rem 1.4rem !important;
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
    row-gap: 0 !important;
  }
  section[aria-labelledby='hero-title'] > header {
    display: contents;
  }
  section[aria-labelledby='hero-title'] hgroup {
    order: 1;
    margin: 0 !important;
    padding: 0;
  }
  section[aria-labelledby='hero-title'] hgroup h1 {
    margin-bottom: 0.3em;
    line-height: 1.12;
    font-size: clamp(1.7rem, 7.5vw, 2.1rem);
  }
  section[aria-labelledby='hero-title'] hgroup > p:last-of-type {
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0 0 1.4rem !important;
  }
  section[aria-labelledby='hero-title'] > header > nav {
    order: 2;
    margin: 0 0 1.2rem !important;
    padding: 0;
    display: flex;
    width: 100%;
    gap: 0.7rem;
  }
  section[aria-labelledby='hero-title'] > header > nav a[data-cta='primary'] {
    flex: 1;
    justify-content: center;
  }
  section[aria-labelledby='hero-title'] > header > dl {
    order: 3;
    margin: 0 0 1.4rem !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.3rem !important;
    white-space: nowrap;
    font-size: 0.78rem;
  }
  section[aria-labelledby='hero-title'] > header > dl dt:nth-of-type(2) {
    margin-left: 0.8rem;
  }
  section[aria-labelledby='hero-title'] > header > dl dt {
    font-size: 0.86rem;
    margin: 0;
  }
  section[aria-labelledby='hero-title'] > header > dl dd {
    margin: 0;
    color: var(--ink-mute, #7b6d62);
  }
  section[aria-labelledby='hero-title'] > header > dl dd:first-of-type {
    display: none;
  }
  section[aria-labelledby='hero-title'] > header > dl dt:first-of-type::after {
    content: '·';
    margin-left: 0.4rem;
    color: var(--ink-mute, #7b6d62);
    font-weight: 400;
  }
  section[aria-labelledby='hero-title'] > figure {
    order: 4;
    margin: 0;
  }
  ul[data-proof] {
    gap: 0.45rem;
  }

  #offre article ul {
    display: block;
    padding: 0 0 0 1.1rem;
    margin: 0;
  }
  #offre article ul li {
    font-size: 0.85rem;
    line-height: 1.5;
  }
  #offre article h3 {
    margin-bottom: 0.2rem;
  }
  /* Pas de puce "Déco & plantes premium" sur la carte Salon en mobile
     (source : le libellé de la source est trop long pour une carte
     compacte en défilement horizontal) */
  #offre > ul > li:first-child article ul li:last-child {
    display: none;
  }
}