/* ============================================================
   HAVENIXCI — FEUILLE DE STYLE
   ------------------------------------------------------------
   Direction : rituel de soin artisanal — savons, huiles, argiles.
   Palette   : ivoire karité, vert botanique profond, argile brûlée,
               or doux, blush poudré.
   Typo      : Fraunces (display, chaleureuse, empattements marqués)
               + Work Sans (texte courant, UI).
   Signature : formes organiques "coulée" (goutte d'huile / savon)
               utilisées comme séparateurs et halos décoratifs.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,500&family=Work+Sans:wght@300;400;500;600;700&display=swap');

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* Couleurs */
  --ivory: #F6EEE0;
  --ivory-deep: #EFE3CD;
  --card: #FFFBF3;
  --forest: #22352A;
  --forest-deep: #182620;
  --clay: #B2632B;
  --clay-dark: #8F4E22;
  --gold: #C99A3E;
  --blush: #E8B9A4;
  --charcoal: #241F1A;
  --charcoal-soft: #4A423A;
  --line: rgba(36, 31, 26, 0.12);
  --line-on-dark: rgba(246, 238, 224, 0.16);

  /* Typographie */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Échelle */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.9rem + 2.2vw, 3.6rem);
  --step-5: clamp(3rem, 2.2rem + 3.6vw, 5rem);

  /* Rythme */
  --section-pad-y: clamp(4rem, 3rem + 4vw, 7.5rem);
  --content-max: 1180px;
  --radius-card: 28px;
  --radius-blob: 62% 38% 55% 45% / 45% 55% 45% 55%;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  /* Le site conserve une identité chaude et lumineuse volontairement,
     même en préférence sombre système : pas de surcharge ici. */
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--forest-deep);
  line-height: 1.08;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h2 { font-size: var(--step-3); font-weight: 500; }
h3 { font-size: var(--step-1); font-weight: 600; }

p { margin: 0; color: var(--charcoal-soft); }

ul, ol, dl { margin: 0; padding: 0; list-style: none; }

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

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

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--forest-deep);
  color: var(--ivory);
  padding: 0.9rem 1.4rem;
  border-radius: 0 0 10px 0;
}
.lien-evitement:focus {
  left: 0;
}

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

/* Conteneur générique — appliqué via chaque section pour garder
   le HTML intact (pas de classes ajoutées). */
main > section,
header > nav,
footer {
  padding-left: clamp(1.25rem, 1rem + 3vw, 4rem);
  padding-right: clamp(1.25rem, 1rem + 3vw, 4rem);
}

main > section > *,
main > section > ul,
main > section > ol,
main > section > dl,
main > section > form {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.eyebrow-fx {
  /* réservé — non utilisé, place pour cohérence future */
}

/* Petit utilitaire d'apparition, appliqué uniquement via animation
   CSS pure (pas de JS) sur le premier affichage de page. */
@keyframes lever-voile {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   3. EN-TÊTE / NAVIGATION
   ============================================================ */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 238, 224, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

header > nav {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  gap: 1.5rem;
  position: relative;
}

header > nav > a {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--forest-deep);
  letter-spacing: -0.02em;
}

header > nav > a span::after {
  content: '';
}

header > nav > ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
}

header > nav > ul > li > a {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--charcoal-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.25s var(--ease);
}

header > nav > ul > li > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--clay);
  transition: width 0.3s var(--ease);
}

header > nav > ul > li > a:hover,
header > nav > ul > li > a:focus-visible {
  color: var(--clay-dark);
}
header > nav > ul > li > a:hover::after,
header > nav > ul > li > a:focus-visible::after {
  width: 100%;
}

/* --------------------------------------------------------------
   3bis. BOUTON HAMBURGER (.menu-toggle)
   Ce bouton est injecté dynamiquement par cosmetique.js — il
   n'existe pas dans le HTML statique. Il DOIT être stylé ici,
   sinon il reste invisible (0 taille, pas de barres, pas de
   position) même s'il est bien présent dans le DOM.
   -------------------------------------------------------------- */
.menu-toggle {
  display: none; /* visible uniquement en dessous de 860px, voir media query */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 501;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--forest-deep);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* Anime les 3 barres en croix (X) quand le menu est ouvert */
body.menu-ouvert .menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.menu-ouvert .menu-toggle span:nth-child(2) {
  opacity: 0;
}
body.menu-ouvert .menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
  /* CORRECTIF CRITIQUE : backdrop-filter sur le header transforme ce
     dernier en "point de repère" (containing block) pour TOUS ses
     descendants en position: fixed — y compris le <ul> du menu mobile
     plus bas. Résultat : au lieu de se positionner par rapport à
     l'écran entier, le menu se positionne par rapport au header
     lui-même (~72-90px de haut), ce qui le fait apparaître comme
     "coincé"/rogné, avec le haut du texte des liens qui ne sort pas
     correctement. On désactive donc le flou uniquement sur mobile,
     où le menu déroulant a besoin d'un vrai positionnement plein écran. */
  header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--ivory);
  }

  header > nav > ul {
    display: none !important;
  }

  .menu-toggle {
    display: flex !important;
  }

  /* CORRECTIF ROBUSTESSE : le panneau utilise position: fixed avec
     un décalage en pixels calculé par le JS (--header-h-px), au lieu
     de dépendre d'un positionnement relatif au header (fragile avec
     sticky + backdrop-filter selon les navigateurs). L'état ouvert
     est vérifié à DEUX endroits — attribut sur <nav> ET classe sur
     <body> — pour garantir l'affichage même en cas de conflit CSS.
     !important utilisé volontairement ici : ce panneau doit toujours
     pouvoir s'ouvrir, quoi qu'il arrive ailleurs dans la feuille de style. */
  body.menu-ouvert header > nav[data-menu="open"] > ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    position: fixed !important;
    top: var(--header-h-px, 72px) !important;
    left: 0 !important;
    right: 0 !important;
    max-height: calc(100vh - var(--header-h-px, 72px)) !important;
    overflow-y: auto !important;
    background: var(--ivory) !important;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -18px rgba(36, 31, 26, 0.25);
    padding: 0.5rem clamp(1.25rem, 1rem + 3vw, 4rem) 1.25rem;
    z-index: 500 !important;
  }

  body.menu-ouvert header > nav[data-menu="open"] > ul > li > a {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--step-0);
  }

  body.menu-ouvert header > nav[data-menu="open"] > ul > li:last-child > a {
    border-bottom: none;
  }
}

/* ============================================================
   4. HERO — section #accueil
   ============================================================ */
#accueil {
  position: relative;
  overflow: hidden;
  padding-top: clamp(4.5rem, 3.5rem + 4vw, 8rem);
  padding-bottom: clamp(5rem, 4rem + 5vw, 9rem);
  text-align: center;
  isolation: isolate;
}

#accueil::before {
  content: '';
  position: absolute;
  inset: -10% -5% auto -5%;
  height: 130%;
  background:
    radial-gradient(ellipse 60% 45% at 18% 20%, rgba(201, 154, 62, 0.28), transparent 60%),
    radial-gradient(ellipse 55% 50% at 85% 15%, rgba(178, 99, 43, 0.22), transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(34, 53, 42, 0.10), transparent 65%);
  border-radius: var(--radius-blob);
  z-index: -1;
  animation: lever-voile 1s var(--ease) both;
}

#hero-titre {
  font-size: var(--step-5);
  max-width: 20ch;
  margin: 0 auto;
  animation: lever-voile 0.9s var(--ease) both;
}

#accueil > p {
  max-width: 56ch;
  margin: 1.75rem auto 0;
  font-size: var(--step-1);
  color: var(--charcoal-soft);
  animation: lever-voile 0.9s 0.1s var(--ease) both;
}

#accueil > div {
  margin-top: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  animation: lever-voile 0.9s 0.2s var(--ease) both;
}

#accueil > div > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.3s var(--ease);
}

#accueil > div > a:first-child {
  background: var(--forest-deep);
  color: var(--ivory);
  box-shadow: 0 10px 30px -12px rgba(24, 38, 32, 0.55);
}
#accueil > div > a:first-child:hover {
  background: var(--forest);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -12px rgba(24, 38, 32, 0.6);
}

#accueil > div > a:last-child {
  background: var(--clay);
  color: var(--ivory);
  box-shadow: 0 10px 30px -12px rgba(178, 99, 43, 0.55);
}
#accueil > div > a:last-child:hover {
  background: var(--clay-dark);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -12px rgba(178, 99, 43, 0.6);
}

/* ============================================================
   5. QUI SOMMES-NOUS
   ============================================================ */
#qui-sommes-nous {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  text-align: center;
  position: relative;
}

#qui-titre {
  font-size: var(--step-3);
  margin-bottom: 1.5rem;
}

#qui-titre::before {
  content: 'Notre histoire';
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--clay);
  font-weight: 600;
  margin-bottom: 0.9rem;
}

#qui-sommes-nous > p {
  max-width: 62ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--forest-deep);
  line-height: 1.5;
}

/* ============================================================
   6. NOS CATÉGORIES — section #categories
   ============================================================ */
#categories {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

#categories-titre,
#pourquoi-titre,
#comment-titre,
#produits-titre,
#engagements-titre,
#faq-titre,
#formulaire-titre {
  text-align: center;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

#categories > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.1rem;
}

#categories > ul > li > article {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2.1rem 1.4rem 1.7rem;
  text-align: center;
  position: relative;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

#categories > ul > li > article::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 1.1rem;
  background: linear-gradient(135deg, var(--gold), var(--clay));
  border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
}

#categories > ul > li:nth-child(2) > article::before { background: linear-gradient(135deg, var(--clay), var(--forest)); }
#categories > ul > li:nth-child(3) > article::before { background: linear-gradient(135deg, var(--forest), var(--gold)); }
#categories > ul > li:nth-child(4) > article::before { background: linear-gradient(135deg, var(--blush), var(--clay)); }
#categories > ul > li:nth-child(5) > article::before { background: linear-gradient(135deg, var(--gold), var(--forest)); }
#categories > ul > li:nth-child(6) > article::before { background: linear-gradient(135deg, var(--clay), var(--blush)); }
#categories > ul > li:nth-child(7) > article::before { background: linear-gradient(135deg, var(--forest), var(--clay)); }

#categories > ul > li > article > h3 {
  font-size: var(--step-0);
  font-weight: 600;
}

#categories > ul > li > article:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px -18px rgba(36, 31, 26, 0.25);
  border-color: transparent;
}

/* ============================================================
   7. POURQUOI CHOISIR NOS PRODUITS — dark band
   ============================================================ */
#pourquoi-nous {
  background: var(--forest-deep);
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  position: relative;
  overflow: hidden;
}

#pourquoi-nous::after {
  content: '';
  position: absolute;
  right: -8%;
  bottom: -18%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 154, 62, 0.18), transparent 70%);
  border-radius: 50%;
}

#pourquoi-titre { color: var(--ivory); }

#pourquoi-nous > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line-on-dark);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
}

#pourquoi-nous > ul > li > article {
  background: var(--forest-deep);
  padding: 2rem 1.6rem;
  height: 100%;
  transition: background 0.35s var(--ease);
}

#pourquoi-nous > ul > li > article:hover {
  background: #1c2b23;
}

#pourquoi-nous > ul > li > article > h3 {
  color: var(--ivory);
  font-size: var(--step-0);
  font-weight: 500;
  position: relative;
  padding-left: 2rem;
}

#pourquoi-nous > ul > li > article > h3::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: -0.05em;
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 700;
}

/* ============================================================
   8. COMMENT COMMANDER — timeline
   ============================================================ */
#comment-commander {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

#comment-commander > ol {
  counter-reset: etape;
  max-width: 760px;
  position: relative;
  padding-left: clamp(2.2rem, 1.5rem + 2vw, 3rem);
}

#comment-commander > ol::before {
  content: '';
  position: absolute;
  left: clamp(1.05rem, 0.7rem + 1vw, 1.45rem);
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--clay) 0 6px, transparent 6px 12px);
}

#comment-commander > ol > li {
  counter-increment: etape;
  position: relative;
  padding-bottom: 2.6rem;
}

#comment-commander > ol > li:last-child {
  padding-bottom: 0;
}

#comment-commander > ol > li::before {
  content: counter(etape);
  position: absolute;
  left: clamp(-2.2rem, -1.5rem - 2vw, -3rem);
  top: -0.15rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 2px solid var(--clay);
  color: var(--clay-dark);
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 50%;
  font-size: var(--step-0);
}

#comment-commander > ol > li > h3 {
  font-size: var(--step-1);
  margin-bottom: 0.4rem;
}

#comment-commander > ol > li > p {
  max-width: 46ch;
}

/* ============================================================
   9. NOS PRODUITS — grille
   ============================================================ */
#produits {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

#produits > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.6rem;
}

#produits > ul > li > article {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

#produits > ul > li > article:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -18px rgba(36, 31, 26, 0.28);
}

#produits > ul > li > article > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background:
    linear-gradient(135deg, var(--ivory-deep), var(--blush));
}

#produits > ul > li > article > h3 {
  font-size: var(--step-0);
  font-weight: 600;
  padding: 1.3rem 1.4rem 0;
}

#produits > ul > li > article > p:not(:has(span)) {
  padding: 0.5rem 1.4rem 0;
  font-size: var(--step--1);
}

#produits > ul > li > article > p:has(span) {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 1rem 1.4rem 0;
  margin-top: auto;
}

#produits > ul > li > article > p:has(span) > span {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--charcoal-soft);
}

#produits > ul > li > article > p:has(span) > data {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--clay-dark);
}

#produits > ul > li > article > button {
  margin: 1.1rem 1.4rem 1.4rem;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  background: var(--forest-deep);
  color: var(--ivory);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

#produits > ul > li > article > button:hover {
  background: var(--clay);
  transform: translateY(-2px);
}

/* ============================================================
   10. NOS ENGAGEMENTS — bandeau
   ============================================================ */
#engagements {
  padding-top: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  padding-bottom: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#engagements > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
}

#engagements > ul > li {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--forest-deep);
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}

/* ============================================================
   11. FAQ
   ============================================================ */
#faq {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

#faq > dl {
  max-width: 780px;
  border-top: 1px solid var(--line);
}

#faq > dl > div {
  border-bottom: 1px solid var(--line);
  padding: 1.6rem 0;
}

#faq > dl > div > dt {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--forest-deep);
  position: relative;
  padding-left: 1.8rem;
}

#faq > dl > div > dt::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--clay);
}

#faq > dl > div > dd {
  margin: 0.75rem 0 0 1.8rem;
  color: var(--charcoal-soft);
  max-width: 58ch;
}

/* Accordéon FAQ : le JS transforme <dt> en bouton et enveloppe
   <dd> avec dataset.open pour piloter l'affichage. */
#faq > dl > div > dt > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

#faq > dl > div > dd[data-open="false"] {
  display: none;
}
#faq > dl > div > dd[data-open="true"] {
  display: block;
}

/* ============================================================
   12. FORMULAIRE INTELLIGENT
   ============================================================ */
#formulaire {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  background: var(--ivory-deep);
}

#formulaire > form {
  background: var(--card);
  border-radius: clamp(20px, 2vw, 36px);
  padding: clamp(1.75rem, 1.4rem + 2vw, 3.5rem);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(36, 31, 26, 0.2);
}

#formulaire fieldset {
  border: none;
  padding: 0;
  margin: 0 0 2.2rem;
}

#formulaire legend {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--forest-deep);
  margin-bottom: 1rem;
  padding: 0;
}

#produits-selectionnes-info {
  font-size: var(--step--1);
  font-style: italic;
  color: var(--charcoal-soft);
  margin-bottom: 0.75rem;
}

#liste-produits-selectionnes {
  min-height: 3rem;
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-content: flex-start;
}

.liste-vide-message {
  font-size: var(--step--1);
  color: var(--charcoal-soft);
  font-style: italic;
}

.chip-produit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.9rem;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  color: var(--forest-deep);
}

.chip-produit > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--line);
  color: var(--charcoal);
  font-size: 1rem;
  line-height: 1;
}
.chip-produit > button:hover {
  background: var(--clay);
  color: var(--ivory);
}

#formulaire fieldset > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

#formulaire fieldset > ul > li {
  position: relative;
}

#formulaire input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

#formulaire fieldset > ul > li > label {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.15rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--charcoal-soft);
  background: var(--ivory);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

#formulaire fieldset > ul > li > input[type="radio"]:checked + label {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  color: var(--ivory);
}

#formulaire fieldset > ul > li > input[type="radio"]:focus-visible + label {
  outline: 3px solid var(--clay);
  outline-offset: 2px;
}

#formulaire fieldset > ul > li > label:hover {
  border-color: var(--clay);
  color: var(--clay-dark);
}

#formulaire > form > p {
  margin: 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#formulaire label[for] {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--forest-deep);
}

#formulaire input[type="text"],
#formulaire input[type="tel"],
#formulaire input[type="email"],
#formulaire textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--step-0);
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--ivory);
  color: var(--charcoal);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

#formulaire input:focus,
#formulaire textarea:focus {
  outline: none;
  border-color: var(--clay);
  background: var(--card);
}

#formulaire textarea {
  resize: vertical;
  min-height: 8rem;
}

#formulaire > form > button[type="submit"] {
  width: 100%;
  margin-top: 0.5rem;
  padding: 1.1rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #2CA24C, #1E7A38);
  color: #fff;
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  box-shadow: 0 14px 30px -12px rgba(30, 122, 56, 0.55);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

#formulaire > form > button[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 36px -12px rgba(30, 122, 56, 0.6);
}

.message-erreur {
  color: #B3261E;
  font-size: var(--step--1);
  font-weight: 500;
  margin: 0.4rem 0 0;
}

.champ-erreur {
  border-color: #B3261E !important;
}

.message-etat-envoi {
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  font-size: var(--step--1);
  font-weight: 500;
  text-align: center;
}
.message-etat-envoi[data-type="erreur"] {
  background: #FBE7E5;
  color: #B3261E;
}
.message-etat-envoi[data-type="succes"] {
  background: #E4F3E7;
  color: #1E7A38;
}

/* ============================================================
   13. PIED DE PAGE
   ============================================================ */
footer {
  background: var(--forest-deep);
  color: var(--ivory);
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
}

footer > p {
  color: rgba(246, 238, 224, 0.7);
  font-size: var(--step--1);
  margin-bottom: 1.2rem;
}

footer nav > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
}

footer nav > ul > li > a {
  font-size: var(--step--1);
  color: var(--ivory);
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: opacity 0.25s var(--ease);
}

footer nav > ul > li > a:hover {
  opacity: 1;
  color: var(--gold);
}

/* ============================================================
   14. APPARITIONS AU DÉFILEMENT (data-reveal, posé par le JS)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   15. RESPONSIVE — ajustements ciblés
   ============================================================ */
@media (max-width: 640px) {
  #comment-commander > ol {
    padding-left: 2.6rem;
  }
  #comment-commander > ol > li::before {
    left: -2.6rem;
    width: 2.1rem;
    height: 2.1rem;
    font-size: var(--step--1);
  }
  #accueil > div {
    flex-direction: column;
    align-items: stretch;
  }
  #accueil > div > a {
    justify-content: center;
  }
}