/* css/tokens.css */
/* ============================================================
   ESTÉA — DESIGN TOKENS
   Brand kit officiel (Claude Design, juin 2026). Ne pas inventer
   de valeurs : tout vient de tokens/*.css du brand kit.
   Polices auto-hébergées (woff2) dans /assets/fonts/.
   ============================================================ */

/* ---- Webfonts · sous-ensemble latin, auto-hébergées ---- */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/assets/fonts/cormorant-garamond-400.woff2") format("woff2");
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2");
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2");
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500;
  font-display: swap; src: url("/assets/fonts/cormorant-garamond-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/assets/fonts/hanken-grotesk-400.woff2") format("woff2");
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/assets/fonts/hanken-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/assets/fonts/hanken-grotesk-600.woff2") format("woff2");
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/assets/fonts/hanken-grotesk-700.woff2") format("woff2");
}

:root {
  /* ---- Neutrals · "Stone" warm scale ---- */
  --estea-paper:      #FBF8F2;
  --estea-sand:       #F5EFE4;
  --estea-linen:      #ECE3D2;
  --estea-stone-300:  #D9CDB9;
  --estea-stone-400:  #B4A78E;
  --estea-stone-500:  #8F8270;
  --estea-stone-600:  #6B6052;
  --estea-stone-700:  #4C4438;
  --estea-stone-800:  #312B22;
  --estea-ink:        #1E1914;

  /* ---- Brand accent · Bronze ---- */
  --estea-bronze:        #9C7B4F;
  --estea-bronze-deep:   #7A5C33;
  --estea-champagne:     #EFE5CF;
  --estea-bronze-bright: #C7A56F;

  /* ---- Dark section variant · "Espresso" ---- */
  --estea-espresso:      #1E1914;
  --estea-espresso-soft: #2B251D;
  --estea-cream:         #EFE8DA;
  --estea-cream-muted:   #B5A88E;

  /* ---- Semantic aliases ---- */
  --estea-bg-page:        var(--estea-paper);
  --estea-bg-section:     var(--estea-sand);
  --estea-bg-card:        #FFFDF9;
  --estea-bg-sunken:      var(--estea-linen);
  --estea-bg-dark:        var(--estea-espresso);

  --estea-text-primary:   var(--estea-ink);
  --estea-text-secondary: var(--estea-stone-600);
  --estea-text-muted:     var(--estea-stone-500);
  --estea-text-accent:    var(--estea-bronze-deep);
  --estea-text-on-dark:   var(--estea-cream);
  --estea-text-on-dark-2: var(--estea-cream-muted);

  --estea-border-hairline: #E4DAC7;
  --estea-border-strong:   var(--estea-stone-300);
  --estea-border-on-dark:  rgba(239, 232, 218, 0.16);

  --estea-link:            var(--estea-bronze-deep);
  --estea-focus-ring:      rgba(156, 123, 79, 0.45);

  --estea-action-primary-bg:         var(--estea-ink);
  --estea-action-primary-fg:         var(--estea-paper);
  --estea-action-primary-bg-hover:   #3A3327;
  --estea-action-secondary-border:   var(--estea-ink);
  --estea-action-secondary-fg:       var(--estea-ink);
  --estea-action-secondary-bg-hover: rgba(30, 25, 20, 0.05);
  --estea-action-ghost-fg:           var(--estea-bronze-deep);

  /* ---- Typographie ---- */
  --estea-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --estea-font-body: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --estea-display-size: 72px; --estea-display-lh: 1.04; --estea-display-ls: -0.015em; --estea-display-weight: 500;
  --estea-h1-size: 56px; --estea-h1-lh: 1.08; --estea-h1-ls: -0.01em; --estea-h1-weight: 500;
  --estea-h2-size: 40px; --estea-h2-lh: 1.15; --estea-h2-ls: -0.005em; --estea-h2-weight: 500;
  --estea-h3-size: 30px; --estea-h3-lh: 1.2; --estea-h3-ls: 0; --estea-h3-weight: 500;
  --estea-h4-size: 24px; --estea-h4-lh: 1.3; --estea-h4-ls: 0; --estea-h4-weight: 600;
  --estea-lead-size: 20px; --estea-lead-lh: 1.55; --estea-lead-ls: 0; --estea-lead-weight: 400;
  --estea-body-size: 17px; --estea-body-lh: 1.6; --estea-body-ls: 0; --estea-body-weight: 400;
  --estea-small-size: 15px; --estea-small-lh: 1.5; --estea-small-ls: 0.005em; --estea-small-weight: 400;
  --estea-caption-size: 13px; --estea-caption-lh: 1.45; --estea-caption-ls: 0.01em; --estea-caption-weight: 400;
  --estea-overline-size: 12px; --estea-overline-lh: 1.3; --estea-overline-ls: 0.18em; --estea-overline-weight: 600; --estea-overline-transform: uppercase;

  /* ---- Espacement ---- */
  --estea-space-1: 4px;  --estea-space-2: 8px;  --estea-space-3: 12px; --estea-space-4: 16px;
  --estea-space-5: 24px; --estea-space-6: 32px; --estea-space-7: 48px; --estea-space-8: 64px;
  --estea-space-9: 96px; --estea-space-10: 128px;

  /* ---- Rayon ---- */
  --estea-radius-xs: 2px; --estea-radius-sm: 4px; --estea-radius-md: 8px;
  --estea-radius-lg: 14px; --estea-radius-pill: 999px;

  /* ---- Élévation · chaude, très douce ---- */
  --estea-shadow-1: 0 1px 2px rgba(30, 25, 20, 0.05);
  --estea-shadow-2: 0 2px 8px -2px rgba(30, 25, 20, 0.08), 0 1px 2px rgba(30, 25, 20, 0.04);
  --estea-shadow-3: 0 12px 32px -12px rgba(30, 25, 20, 0.14), 0 2px 6px -2px rgba(30, 25, 20, 0.05);
  --estea-shadow-4: 0 32px 64px -24px rgba(30, 25, 20, 0.22);

  --estea-rule: 1px solid var(--estea-border-hairline);

  /* ---- Largeur de contenu ---- */
  --estea-content-max: 1200px;
  --estea-prose-max: 42rem;
}


/* css/site.css */
/* ============================================================
   ESTÉA — Styles du site (chrome + composants)
   Implémente le design system officiel. Consomme uniquement les
   tokens --estea-* de tokens.css. Mobile-first, éditorial suisse.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--estea-bg-page);
  color: var(--estea-text-primary);
  font-family: var(--estea-font-body);
  font-size: var(--estea-body-size);
  line-height: var(--estea-body-lh);
  -webkit-font-smoothing: antialiased;
}

/* ---- Titres (serif) ---- */
h1, h2, h3, h4 {
  font-family: var(--estea-font-display);
  color: var(--estea-text-primary);
  margin: 0 0 var(--estea-space-5);
  font-weight: var(--estea-h2-weight);
}
h1 { font-size: var(--estea-h1-size); line-height: var(--estea-h1-lh); letter-spacing: var(--estea-h1-ls); font-weight: var(--estea-h1-weight); }
h2 { font-size: var(--estea-h2-size); line-height: var(--estea-h2-lh); letter-spacing: var(--estea-h2-ls); }
h3 { font-size: var(--estea-h3-size); line-height: var(--estea-h3-lh); font-weight: var(--estea-h3-weight); }
h4 { font-size: var(--estea-h4-size); line-height: var(--estea-h4-lh); font-weight: var(--estea-h4-weight); }

p { margin: 0 0 var(--estea-space-4); }
.lead { font-size: var(--estea-lead-size); line-height: var(--estea-lead-lh); color: var(--estea-text-secondary); }
small, .small { font-size: var(--estea-small-size); }

a { color: var(--estea-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; height: auto; display: block; }

/* Responsive : réduire le display sur petit écran */
@media (max-width: 640px) {
  h1 { font-size: 38px; }
  h2 { font-size: 30px; }
  h3 { font-size: 24px; }
}

/* ---- Overline · signature Estéa (filet bronze + label espacé) ---- */
.overline {
  font-size: var(--estea-overline-size);
  line-height: var(--estea-overline-lh);
  letter-spacing: var(--estea-overline-ls);
  font-weight: var(--estea-overline-weight);
  text-transform: var(--estea-overline-transform);
  color: var(--estea-text-accent);
  margin: 0 0 var(--estea-space-3);
  display: block;
}
.overline::before {
  content: "";
  display: block;
  width: 48px; height: 2px;
  background: var(--estea-bronze);
  margin-bottom: 14px;
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--estea-content-max);
  margin-inline: auto;
  padding-inline: var(--estea-space-5);
}
.prose { max-width: var(--estea-prose-max); }
.section { padding-block: var(--estea-space-8); }
.section--sand { background: var(--estea-bg-section); }
.section--dark { background: var(--estea-bg-dark); color: var(--estea-text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--estea-text-on-dark); }
.section--dark .overline { color: var(--estea-bronze-bright); }
.section--dark .lead { color: var(--estea-text-on-dark-2); }

@media (min-width: 720px) { .section { padding-block: var(--estea-space-9); } }

/* ---- Header ---- */
.site-header {
  border-bottom: var(--estea-rule);
  background: color-mix(in srgb, var(--estea-paper) 88%, transparent);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(8px);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--estea-space-6); padding-block: var(--estea-space-4);
}
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo img { height: 30px; width: auto; }
.nav-primary { display: none; gap: var(--estea-space-6); align-items: center; }
.nav-primary a {
  color: var(--estea-text-secondary);
  font-size: var(--estea-small-size);
  letter-spacing: 0.005em;
}
.nav-primary a:hover { color: var(--estea-text-accent); text-decoration: none; }
@media (min-width: 920px) { .nav-primary { display: flex; } }

/* ---- Boutons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--estea-space-2);
  font-family: var(--estea-font-body); font-weight: 600;
  font-size: var(--estea-small-size); letter-spacing: 0.04em;
  padding: 13px 26px;
  border-radius: var(--estea-radius-xs);
  border: 1px solid transparent; cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.btn--primary { background: var(--estea-action-primary-bg); color: var(--estea-action-primary-fg); }
.btn--primary:hover { background: var(--estea-action-primary-bg-hover); text-decoration: none; }
.btn--secondary { background: transparent; color: var(--estea-action-secondary-fg); border-color: var(--estea-action-secondary-border); }
.btn--secondary:hover { background: var(--estea-action-secondary-bg-hover); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--estea-action-ghost-fg); padding-inline: var(--estea-space-2); }
.btn--ghost:hover { color: var(--estea-ink); text-decoration: none; }
.btn--on-dark { background: var(--estea-paper); color: var(--estea-ink); }
.btn--on-dark:hover { background: var(--estea-cream); text-decoration: none; }
.btn--sm { padding: 9px 18px; }
.btn--lg { padding: 16px 32px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---- Carte ---- */
.card {
  background: var(--estea-bg-card);
  border: var(--estea-rule);
  border-radius: var(--estea-radius-md);
  padding: var(--estea-space-5);
  box-shadow: var(--estea-shadow-1);
  transition: transform .16s ease, box-shadow .16s ease;
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--estea-shadow-3); }
.card h3 { margin-top: 0; }

.grid { display: grid; gap: var(--estea-space-5); }
@media (min-width: 720px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: 1fr 1fr; } }

/* ---- Trust callout / disclaimer (YMYL) ---- */
.callout {
  border-left: 2px solid var(--estea-bronze);
  background: var(--estea-champagne);
  padding: var(--estea-space-4) var(--estea-space-5);
  border-radius: var(--estea-radius-sm);
  font-size: var(--estea-small-size);
  color: var(--estea-stone-700);
}

/* ---- Badge / pill ---- */
.badge {
  display: inline-flex; align-items: center;
  font-size: var(--estea-caption-size); font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 12px; border-radius: var(--estea-radius-pill);
  background: var(--estea-champagne); color: var(--estea-bronze-deep);
}

/* ---- Fil d'Ariane ---- */
.breadcrumb { font-size: var(--estea-small-size); color: var(--estea-text-muted); padding-block: var(--estea-space-4); }
.breadcrumb a { color: var(--estea-text-muted); }
.breadcrumb a:hover { color: var(--estea-text-accent); }

/* ---- Formulaire lead ---- */
.lead-form { display: grid; gap: var(--estea-space-4); max-width: var(--estea-prose-max); }
.lead-form label {
  font-size: var(--estea-small-size); font-weight: 600;
  color: var(--estea-text-secondary); display: block; margin-bottom: 6px;
}
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%; font: inherit; font-size: var(--estea-body-size);
  padding: 12px 14px;
  border: 1px solid var(--estea-border-hairline);
  border-radius: var(--estea-radius-xs);
  background-color: var(--estea-bg-sunken); color: var(--estea-ink);
}
.lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--estea-stone-500); }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: none;
  border-color: var(--estea-bronze);
  box-shadow: 0 0 0 3px var(--estea-focus-ring);
  background-color: var(--estea-bg-card);
}
.lead-form__row { display: grid; gap: var(--estea-space-4); }
@media (min-width: 600px) { .lead-form__row--2 { grid-template-columns: 1fr 1fr; } }
.lead-form__consent { font-size: var(--estea-caption-size); color: var(--estea-text-muted); }
/* champ dans une section sombre */
.section--dark .lead-form label { color: var(--estea-cream-muted); }
.section--dark .lead-form input, .section--dark .lead-form textarea,
.section--dark .lead-form select {
  background-color: var(--estea-espresso-soft); color: var(--estea-cream);
  border-color: var(--estea-border-on-dark);
}
.section--dark .lead-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B5A88E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.section--dark .lead-form select option, .section--dark .lead-form select optgroup { color: var(--estea-ink); background: var(--estea-bg-card); }

/* ---- Bandeau de consentement (Consent Mode) ---- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  padding: var(--estea-space-4);
  display: flex; justify-content: center;
}
.consent[hidden] { display: none; }
.consent__inner {
  width: 100%; max-width: 960px;
  display: flex; align-items: center; gap: var(--estea-space-5);
  background: var(--estea-espresso, #1e1914); color: var(--estea-cream, #efe8da);
  border: 1px solid var(--estea-border-on-dark, rgba(239,232,218,0.18));
  border-radius: var(--estea-radius-md, 16px);
  padding: var(--estea-space-4) var(--estea-space-5);
  box-shadow: 0 12px 40px rgba(20,16,12,0.28);
}
.consent__text { margin: 0; font-size: var(--estea-caption-size, 0.875rem); line-height: 1.5; }
.consent__text a { color: var(--estea-cream, #efe8da); text-decoration: underline; }
.consent__actions { display: flex; gap: var(--estea-space-3); flex-shrink: 0; }
.consent__actions .btn--ghost { color: var(--estea-cream, #efe8da); border-color: var(--estea-border-on-dark, rgba(239,232,218,0.3)); }
@media (max-width: 640px) {
  .consent__inner { flex-direction: column; align-items: stretch; gap: var(--estea-space-4); }
  .consent__actions { justify-content: flex-end; }
}
.footer-wf__legal { display: inline-flex; align-items: center; gap: var(--estea-space-3); }
.footer-wf__cookies {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline; opacity: 0.85;
}
.footer-wf__cookies:hover { opacity: 1; }

/* ---- Panneau de contact (conversion) ---- */
.contact-perks { list-style: none; padding: 0; margin: var(--estea-space-5) 0 0; display: grid; gap: var(--estea-space-3); }
.contact-perks li { display: flex; align-items: center; gap: 10px; color: var(--estea-cream, #efe8da); font-size: 0.95rem; }
.contact-perks li svg { color: var(--estea-bronze-bright, #c9a25e); flex-shrink: 0; }
.contact-wa { margin-top: var(--estea-space-5); }
.contact-wa__intro { margin: 0 0 var(--estea-space-3); color: var(--estea-cream-muted, rgba(239,232,218,0.72)); font-size: 0.9rem; }

/* ---- Footer · variante espresso (moment de confiance) ---- */
.site-footer {
  background: var(--estea-espresso); color: var(--estea-text-on-dark);
  padding-block: var(--estea-space-9) var(--estea-space-6);
  margin-top: var(--estea-space-10);
  font-size: var(--estea-small-size);
}
.site-footer__grid { display: grid; gap: var(--estea-space-7); grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.site-footer__brand img { height: 30px; }
.site-footer__tag { color: var(--estea-cream-muted); margin-top: var(--estea-space-3); max-width: 30ch; }
.site-footer h4 {
  font-family: var(--estea-font-body); font-size: var(--estea-caption-size);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  color: var(--estea-cream-muted); margin: 0 0 var(--estea-space-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--estea-space-2); }
.site-footer a { color: var(--estea-cream); }
.site-footer a:hover { color: var(--estea-bronze-bright); }
.site-footer__legal {
  margin-top: var(--estea-space-8); padding-top: var(--estea-space-5);
  border-top: 1px solid var(--estea-border-on-dark);
  color: var(--estea-cream-muted); font-size: var(--estea-caption-size);
}

/* ---- FAQ (accordéon sans JS) ---- */
.faq { max-width: var(--estea-prose-max); display: grid; gap: 0; }
.faq__item { border-bottom: var(--estea-rule); }
.faq__item summary {
  cursor: pointer; list-style: none;
  padding: var(--estea-space-4) 0;
  font-family: var(--estea-font-display);
  font-size: var(--estea-h4-size); line-height: 1.3;
  color: var(--estea-ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--estea-space-4);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--estea-bronze-deep); font-family: var(--estea-font-body); font-weight: 400; }
.faq__item[open] summary::after { content: "\2013"; }
.faq__a { padding: 0 0 var(--estea-space-5); color: var(--estea-text-secondary); }
.faq__a p { margin: 0 0 var(--estea-space-3); }

/* ---- Listes éditoriales (puce diamant bronze) ---- */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--estea-space-3); max-width: var(--estea-prose-max); }
.feature-list li { display: flex; gap: var(--estea-space-3); }
.feature-list li::before {
  content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 10px;
  transform: rotate(45deg); background: var(--estea-bronze);
}

/* ---- Tableau de prix indicatifs ---- */
.price-table { width: 100%; border-collapse: collapse; max-width: var(--estea-prose-max); font-size: var(--estea-body-size); }
.price-table th, .price-table td { text-align: left; padding: var(--estea-space-3) var(--estea-space-4); border-bottom: var(--estea-rule); }
.price-table th { font-family: var(--estea-font-body); font-weight: 600; font-size: var(--estea-small-size); text-transform: uppercase; letter-spacing: 0.06em; color: var(--estea-text-muted); }
.price-table td:last-child { text-align: right; white-space: nowrap; color: var(--estea-text-accent); font-weight: 600; }

/* ---- Accessibilité ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a.skip-link {
  position: absolute; left: var(--estea-space-4); top: -60px;
  background: var(--estea-ink); color: var(--estea-paper);
  padding: 10px 16px; border-radius: var(--estea-radius-xs); z-index: 100;
  transition: top .16s ease;
}
a.skip-link:focus { top: var(--estea-space-3); }
:focus-visible { outline: 2px solid var(--estea-bronze); outline-offset: 2px; }

/* ---- Motifs animés (fonds organiques, brand kit) ---- */
.has-motif { position: relative; overflow: hidden; }
.has-motif > .container { position: relative; z-index: 1; }
.motif-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  display: block;
}
/* léger voile pour garder le texte lisible par-dessus le motif */
.has-motif::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--estea-paper) 0%, rgba(251,248,242,0.45) 48%, rgba(251,248,242,0) 100%);
}
.section--sand.has-motif::after {
  background: linear-gradient(90deg, var(--estea-sand) 0%, rgba(245,239,228,0.4) 52%, rgba(245,239,228,0) 100%);
}

/* ---- Hero ---- */
.hero { padding-block: var(--estea-space-9) var(--estea-space-9); }
.hero h1 { max-width: 16ch; }
.hero .lead { max-width: 52ch; margin-top: var(--estea-space-5); }
.actions { display: flex; flex-wrap: wrap; gap: var(--estea-space-4); margin-top: var(--estea-space-6); }

/* ---- Hero en deux colonnes ---- */
.hero-split { display: grid; gap: var(--estea-space-8); align-items: center; }
@media (min-width: 920px) { .hero-split { grid-template-columns: 1.05fr 0.9fr; gap: var(--estea-space-9); } }
.hero-split h1 { max-width: 14ch; }
.hero-split .lead { max-width: 46ch; }

/* ---- Cadre de motif : visuel CONTENU (jamais derrière le texte) ---- */
.motif-frame {
  position: relative; border-radius: var(--estea-radius-lg); overflow: hidden;
  border: 1px solid var(--estea-border-hairline); box-shadow: var(--estea-shadow-2);
  background: var(--estea-paper);
}
.motif-frame canvas { display: block; width: 100%; height: 100%; }
.motif-frame--portrait { aspect-ratio: 4 / 5; }
.motif-frame--wide { aspect-ratio: 16 / 9; }
.motif-frame__label {
  position: absolute; top: 16px; left: 16px;
  font-size: var(--estea-overline-size); font-weight: 600;
  letter-spacing: var(--estea-overline-ls); text-transform: uppercase;
  color: var(--estea-bronze-deep);
}
.motif-frame--dark .motif-frame__label { color: var(--estea-bronze-bright); }

/* ---- Bandeau de confiance ---- */
.trust-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--estea-space-6) var(--estea-space-5); }
@media (min-width: 760px) { .trust-strip { grid-template-columns: repeat(4, 1fr); } }
.trust-strip__item { border-top: 2px solid var(--estea-bronze); padding-top: var(--estea-space-3); }
.trust-strip__item b { display: block; font-family: var(--estea-font-display); font-weight: 500; font-size: var(--estea-h4-size); line-height: 1.2; margin-bottom: var(--estea-space-1); }
.trust-strip__item span { font-size: var(--estea-small-size); color: var(--estea-text-secondary); }

/* ---- Carte média (domaine) : visuel de motif en en-tête ---- */
.media-card {
  display: flex; flex-direction: column; background: var(--estea-bg-card);
  border: 1px solid var(--estea-border-hairline); border-radius: var(--estea-radius-md);
  overflow: hidden; box-shadow: var(--estea-shadow-1);
  transition: transform .16s ease, box-shadow .16s ease;
}
.media-card:hover { transform: translateY(-3px); box-shadow: var(--estea-shadow-3); }
.media-card__visual { position: relative; height: 168px; }
.media-card__visual canvas { display: block; width: 100%; height: 100%; }
.media-card__body { padding: var(--estea-space-5); display: flex; flex-direction: column; gap: var(--estea-space-3); flex: 1; }
.media-card__body h3 { margin: 0; }
.media-card__body .feature-list { margin: var(--estea-space-1) 0 0; gap: var(--estea-space-2); }
.media-card__body .feature-list li::before { margin-top: 9px; }
.media-card__body .actions { margin-top: auto; }

/* ---- Étapes numérotées ---- */
.steps { display: grid; gap: var(--estea-space-6); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step__num { font-family: var(--estea-font-display); font-size: 40px; line-height: 1; color: var(--estea-bronze); display: block; margin-bottom: var(--estea-space-3); }
.step h3 { margin: 0 0 var(--estea-space-2); font-size: var(--estea-h4-size); }
.step p { margin: 0; color: var(--estea-text-secondary); }

/* ---- Intro de section ---- */
.section__intro { max-width: 56ch; color: var(--estea-text-secondary); margin: 0 0 var(--estea-space-7); font-size: var(--estea-lead-size); line-height: var(--estea-lead-lh); }

/* ---- Deux colonnes éditoriales ---- */
.cols-2 { display: grid; gap: var(--estea-space-7); align-items: start; }
@media (min-width: 860px) { .cols-2 { grid-template-columns: 1fr 1fr; gap: var(--estea-space-9); } }

/* ---- Communes (couverture locale) ---- */
.commune-list { display: flex; flex-wrap: wrap; gap: var(--estea-space-2); list-style: none; margin: 0; padding: 0; }
.commune-list li { font-size: var(--estea-small-size); color: var(--estea-text-secondary); border: 1px solid var(--estea-border-hairline); border-radius: var(--estea-radius-pill); padding: 6px 14px; background: var(--estea-bg-card); }


/* css/webflow.css */
/* ============================================================
   ESTÉA — Couche "Webflow" (navbar flottante, bento, panneaux,
   cartes domaines, FAQ, CTA, footer). Consomme les tokens --estea-*.
   Style moderne : pilules, grands rayons, ombres douces, fonds animés
   en arrière-plan (canvas) avec scrim de lisibilité.
   ============================================================ */

/* ---- Navbar flottante (pilule) ---- */
.navbar { position: sticky; top: 0; z-index: 60; padding: 16px; }
.navbar__inner {
  max-width: var(--estea-content-max); margin: 0 auto;
  background: rgba(255,253,249,0.82); backdrop-filter: blur(16px);
  border: 1px solid var(--estea-border-hairline); border-radius: 999px;
  box-shadow: 0 10px 30px -14px rgba(30,25,20,0.18);
  padding: 9px 9px 9px 22px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.navbar__brand { display: flex; align-items: center; justify-self: start; }
.navbar__brand img { height: 26px; width: auto; display: block; }
.navbar__nav { display: none; gap: 28px; justify-self: center; }
.navbar__nav a { font-size: 14px; font-weight: 500; color: var(--estea-stone-700); text-decoration: none; white-space: nowrap; }
.navbar__nav a:hover { color: var(--estea-bronze-deep); }
.navbar__cta { justify-self: end; }
@media (max-width: 980px) { .navbar__inner { grid-template-columns: 1fr auto; } }
@media (min-width: 981px) { .navbar__nav { display: flex; } }

/* ---- Navbar : menus deroulants (CSS pur, hover + focus) ---- */
.navbar__item { position: relative; display: flex; align-items: center; }
.navbar__item > a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--estea-stone-700); text-decoration: none; white-space: nowrap; }
.navbar__item > a:hover { color: var(--estea-bronze-deep); }
.navbar__caret { opacity: 0.55; transition: transform .16s ease; }
.navbar__item--lang > a { border: 1px solid var(--estea-stone-300, rgba(0,0,0,.14)); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--estea-stone-700); }
.navbar__item--lang > a:hover { border-color: var(--estea-bronze-deep); color: var(--estea-bronze-deep); }
.navbar__item--has-menu:hover .navbar__caret { transform: rotate(180deg); }
.navbar__menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 14px; display: none; z-index: 70; }
.navbar__item--has-menu:hover .navbar__menu,
.navbar__item--has-menu:focus-within .navbar__menu { display: block; }
.navbar__menu-inner { background: var(--estea-bg-card); border: 1px solid var(--estea-border-hairline); border-radius: 16px; box-shadow: var(--estea-shadow-3); padding: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 230px; }
.navbar__menu-inner a { padding: 9px 14px; border-radius: 10px; font-size: 14px; color: var(--estea-stone-700); text-decoration: none; white-space: nowrap; transition: background .14s ease, color .14s ease; }
.navbar__menu-inner a:hover { background: var(--estea-sand); color: var(--estea-ink); }

/* ---- Cluster : navigation entre poles de soin ---- */
.cluster { display: flex; flex-wrap: wrap; gap: 10px; }
.cluster__link { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--estea-border-strong); background: var(--estea-bg-card); font-size: 14px; font-weight: 500; color: var(--estea-stone-700); text-decoration: none; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.cluster__link:hover { border-color: var(--estea-bronze); color: var(--estea-ink); }
.cluster__link--active { background: var(--estea-ink); color: var(--estea-paper); border-color: var(--estea-ink); }

/* ---- Boutons pilule (dans la home webflow) ---- */
.btn--pill { border-radius: 999px; padding: 14px 24px; letter-spacing: 0.01em; }
.btn--pill.btn--lg { padding: 16px 28px; }
.btn--pill svg { width: 16px; height: 16px; }
.btn--cream { background: var(--estea-cream); color: var(--estea-ink); }
.btn--cream:hover { background: #fff; text-decoration: none; }
.btn--outline-bronze { background: transparent; color: var(--estea-bronze-bright); border: 1px solid rgba(199,165,111,0.5); }
.btn--outline-bronze:hover { color: var(--estea-cream); border-color: var(--estea-cream); text-decoration: none; }

/* ---- Pilule eyebrow (badge de section) ---- */
.pill-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--estea-bg-card); border: 1px solid var(--estea-border-hairline);
  border-radius: 999px; padding: 7px 15px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--estea-bronze-deep);
}
.pill-eyebrow svg { width: 15px; height: 15px; }
.pill-eyebrow__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--estea-bronze); }
.pill-eyebrow--on-dark { background: rgba(199,165,111,0.16); border: none; color: var(--estea-bronze-bright); }

/* ---- Conteneur de section webflow ---- */
.wf { max-width: var(--estea-content-max); margin: 0 auto; padding-inline: 24px; position: relative; z-index: 1; }
.wf-section { padding-bottom: 88px; }
.wf-section--first { padding-top: 8px; }

/* ---- Aura du hero (mesh + ondes interactives) ---- */
.home-aura { position: absolute; top: 0; left: 0; width: 100%; height: 920px; pointer-events: none; z-index: 0; overflow: hidden; }
.home-aura__mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 78% 18%, rgba(199,165,111,0.18), rgba(199,165,111,0) 70%),
    radial-gradient(50% 40% at 12% 8%, rgba(156,123,79,0.12), rgba(156,123,79,0) 70%);
}
.home-aura__waves { position: absolute; top: 0; left: 0; width: 100%; height: 880px; display: block; }

/* ---- Hero centré ---- */
.hero-center { max-width: 820px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 64px 0 80px; }
.hero-center h1 { font-family: var(--estea-font-display); font-weight: 500; font-size: clamp(42px, 5.4vw, 76px); line-height: 1.04; letter-spacing: -0.015em; margin: 0; max-width: 11ch; }
.hero-center p { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--estea-stone-700); margin: 0; max-width: 34em; }
.hero-center .actions { justify-content: center; margin-top: 4px; }

/* ---- En-tête de section centré ---- */
.head-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-bottom: 40px; }
.head-center h2 { font-family: var(--estea-font-display); font-weight: 500; font-size: clamp(32px, 4vw, 46px); line-height: 1.08; margin: 0; max-width: 14em; }
.head-center p { font-size: 17px; line-height: 1.6; color: var(--estea-stone-700); margin: 0; max-width: 38em; }

/* ---- Icon badge ---- */
.icon-badge { display: flex; width: 44px; height: 44px; border-radius: 12px; background: var(--estea-champagne); align-items: center; justify-content: center; color: var(--estea-bronze-deep); }
.icon-badge svg { width: 20px; height: 20px; }

/* ---- Bento (cartes de réassurance) ---- */
.bento { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .bento { grid-template-columns: repeat(4, 1fr); } }
.bento-card { background: var(--estea-bg-card); border: 1px solid var(--estea-border-hairline); border-radius: 20px; padding: 28px 26px; box-shadow: 0 18px 40px -22px rgba(30,25,20,0.16); }
.bento-card .icon-badge { display: flex; margin-bottom: 18px; }
.bento-card b { display: block; font-family: var(--estea-font-display); font-weight: 500; font-size: 26px; line-height: 1.1; color: var(--estea-ink); }
.bento-card span { display: block; font-size: 14px; color: var(--estea-stone-600); margin-top: 6px; }

/* ---- Panneau (grande carte de section) ---- */
.panel { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid var(--estea-border-hairline); padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px); }
.panel--sand { background: var(--estea-sand); }
.panel__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.panel__scrim { position: absolute; inset: 0; }
.panel__scrim--sand { background: linear-gradient(180deg, rgba(245,239,228,0.55), rgba(245,239,228,0.78)); }
.panel__content { position: relative; z-index: 1; }

/* ---- Étapes (webflow) ---- */
.steps-wf { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .steps-wf { grid-template-columns: repeat(3, 1fr); } }
.step-card { background: var(--estea-bg-card); border: 1px solid var(--estea-border-hairline); border-radius: 20px; padding: 32px 30px; box-shadow: 0 18px 40px -22px rgba(30,25,20,0.16); display: flex; flex-direction: column; gap: 14px; }
.step-card__num { display: flex; width: 46px; height: 46px; border-radius: 999px; background: var(--estea-ink); color: var(--estea-paper); align-items: center; justify-content: center; font-family: var(--estea-font-display); font-size: 20px; }
.step-card h3 { font-family: var(--estea-font-display); font-weight: 500; font-size: 25px; line-height: 1.2; margin: 0; }
.step-card p { font-size: 15px; line-height: 1.6; color: var(--estea-stone-600); margin: 0; }

/* ---- Cartes domaines ---- */
.domains { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .domains { grid-template-columns: 1fr 1fr; } }
.domain-card { position: relative; overflow: hidden; border-radius: 24px; min-height: 440px; display: flex; }
.domain-card__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.domain-card__canvas--blob { left: auto; right: -10%; top: -10%; width: 70%; height: 90%; filter: blur(40px); opacity: 0.9; }
.domain-card__scrim { position: absolute; inset: 0; }
.domain-card__body { position: relative; z-index: 1; padding: 40px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; width: 100%; }
.domain-card h3 { font-family: var(--estea-font-display); font-weight: 500; font-size: clamp(26px, 3vw, 34px); line-height: 1.08; margin: 0; }
.domain-card p { font-size: 15.5px; line-height: 1.6; margin: 0; max-width: 26em; }
.domain-card__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.domain-card__cta { margin-top: auto; }
.domain-card--dark { background: var(--estea-espresso); box-shadow: 0 30px 60px -28px rgba(30,25,20,0.5); }
.domain-card--dark .domain-card__scrim { background: linear-gradient(160deg, rgba(20,16,12,0.5) 0%, rgba(20,16,12,0.82) 70%); }
.domain-card--dark h3 { color: var(--estea-cream); }
.domain-card--dark p { color: var(--estea-cream-muted); }
.domain-card--dark .domain-card__eyebrow { color: var(--estea-bronze-bright); }
.domain-card--dark .icon-badge { background: rgba(199,165,111,0.18); color: var(--estea-bronze-bright); border-radius: 13px; }
.domain-card--light { background: var(--estea-sand); border: 1px solid var(--estea-border-hairline); box-shadow: 0 30px 60px -30px rgba(30,25,20,0.28); }
.domain-card--light .domain-card__scrim { background: linear-gradient(160deg, rgba(245,239,228,0.4) 0%, rgba(245,239,228,0.72) 70%); }
.domain-card--light h3 { color: var(--estea-ink); }
.domain-card--light p { color: var(--estea-stone-700); }
.domain-card--light .domain-card__eyebrow { color: var(--estea-bronze-deep); }
.domain-card--light .icon-badge { border-radius: 13px; }

/* ---- Chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 13px; border-radius: 999px; font-size: 12.5px; }
.chip--on-dark { border: 1px solid rgba(239,232,218,0.22); color: var(--estea-cream); }
.chip--light { background: var(--estea-bg-card); border: 1px solid var(--estea-border-strong); color: var(--estea-stone-700); }

/* ---- Pourquoi (texte + grille de features) ---- */
.why { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 880px) { .why { grid-template-columns: 0.92fr 1.08fr; gap: 56px; } }
.why__text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.why__text h2 { font-family: var(--estea-font-display); font-weight: 500; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; margin: 0; max-width: 12em; }
.why__text p { font-size: 17px; line-height: 1.7; color: var(--estea-stone-700); margin: 0; max-width: 34em; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.feature-card { background: var(--estea-bg-card); border: 1px solid var(--estea-border-hairline); border-radius: 20px; padding: 26px 24px; box-shadow: 0 18px 40px -24px rgba(30,25,20,0.16); }
.feature-card .icon-badge { margin-bottom: 16px; }
.feature-card h3 { font-family: var(--estea-font-display); font-weight: 500; font-size: 22px; line-height: 1.2; margin: 0 0 6px; }
.feature-card p { font-size: 14px; line-height: 1.55; color: var(--estea-stone-600); margin: 0; }

/* ---- Couverture ---- */
.coverage { background: var(--estea-bg-card); border: 1px solid var(--estea-border-hairline); border-radius: 28px; padding: clamp(32px, 4vw, 56px); box-shadow: 0 24px 50px -30px rgba(30,25,20,0.2); display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 820px) { .coverage { grid-template-columns: 0.8fr 1.2fr; gap: 48px; } }
.coverage h2 { font-family: var(--estea-font-display); font-weight: 500; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; margin: 0; }
.coverage p { font-size: 16px; line-height: 1.6; color: var(--estea-stone-700); margin: 0; max-width: 26em; }
.chip--commune { padding: 11px 19px; border-radius: 999px; background: var(--estea-paper); border: 1px solid var(--estea-border-strong); font-size: 14px; color: var(--estea-stone-700); transition: border-color .15s, color .15s; }
.chip--commune:hover { border-color: var(--estea-bronze); color: var(--estea-ink); }

/* ---- FAQ (webflow, accordéon <details>) ---- */
.faq-wf { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-wf__item { background: var(--estea-bg-card); border: 1px solid var(--estea-border-hairline); border-radius: 18px; box-shadow: 0 12px 30px -22px rgba(30,25,20,0.18); overflow: hidden; }
.faq-wf__item summary { list-style: none; cursor: pointer; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.faq-wf__item summary::-webkit-details-marker { display: none; }
.faq-wf__q { font-family: var(--estea-font-display); font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25; color: var(--estea-ink); }
.faq-wf__sign { flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px; background: var(--estea-sand); color: var(--estea-bronze-deep); display: flex; align-items: center; justify-content: center; font-family: var(--estea-font-display); font-size: 22px; }
.faq-wf__sign::after { content: "+"; }
.faq-wf__item[open] .faq-wf__sign::after { content: "\2212"; }
.faq-wf__a { padding: 0 26px 24px; font-size: 16px; line-height: 1.65; color: var(--estea-stone-700); }
.faq-wf__a p { margin: 0; }

/* ---- CTA (webflow, espresso) ---- */
.cta-wf { position: relative; overflow: hidden; background: var(--estea-espresso); border-radius: 32px; box-shadow: 0 40px 80px -36px rgba(30,25,20,0.6); }
.cta-wf__canvas { position: absolute; left: -6%; bottom: -30%; width: 52%; height: 130%; filter: blur(58px); opacity: 0.5; }
.cta-wf__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,12,0.35), rgba(20,16,12,0.7)); }
.cta-wf__grid { position: relative; z-index: 1; padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px); display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 860px) { .cta-wf__grid { grid-template-columns: 1fr 1fr; gap: 56px; } }
.cta-wf__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.cta-wf h2 { font-family: var(--estea-font-display); font-weight: 500; font-size: clamp(32px, 4vw, 48px); line-height: 1.06; color: var(--estea-cream); margin: 0; max-width: 11em; }
.cta-wf__text > p { font-size: 18px; line-height: 1.6; color: var(--estea-cream-muted); margin: 0; max-width: 26em; }
.cta-wf__reassure { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--estea-cream-muted); }
.cta-wf__reassure svg { width: 16px; height: 16px; color: var(--estea-bronze-bright); flex-shrink: 0; }
.cta-card { background: var(--estea-espresso-soft); border: 1px solid rgba(239,232,218,0.16); border-radius: 20px; padding: 32px; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.5); }

/* Formulaire de lead en thème sombre dans la CTA */
.cta-card .lead-form { max-width: none; gap: 16px; }
.cta-card .lead-form label { color: var(--estea-cream); }
.cta-card .lead-form input, .cta-card .lead-form textarea {
  background: rgba(20,16,12,0.5); border: 1px solid rgba(239,232,218,0.18);
  color: var(--estea-cream); border-radius: 12px;
}
.cta-card .lead-form input::placeholder, .cta-card .lead-form textarea::placeholder { color: var(--estea-cream-muted); }
.cta-card .lead-form input:focus, .cta-card .lead-form textarea:focus {
  border-color: var(--estea-bronze-bright); box-shadow: none; background: rgba(20,16,12,0.6);
}
.cta-card .lead-form__consent { color: var(--estea-cream-muted); }
.cta-card .btn--primary { background: var(--estea-cream); color: var(--estea-ink); border-radius: 999px; }
.cta-card .btn--primary:hover { background: #fff; }
.cta-card .btn--secondary { color: var(--estea-bronze-bright); border-color: rgba(199,165,111,0.5); border-radius: 999px; }
.cta-card .btn--secondary:hover { color: var(--estea-cream); border-color: var(--estea-cream); }

/* ---- Boutons pilule dans les contextes home ---- */
.hero-center .btn, .cta-wf .btn, .navbar .btn, .domain-card .btn, .why .btn, .panel .btn, .coverage .btn { border-radius: 999px; }

/* ---- Footer webflow (espresso arrondi) ---- */
.footer-wf { background: var(--estea-espresso); border-top-left-radius: 32px; border-top-right-radius: 32px; margin-top: var(--estea-space-7); color: var(--estea-cream); }
.footer-wf__grid { max-width: var(--estea-content-max); margin: 0 auto; padding: 64px 24px 40px; display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 760px) { .footer-wf__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } }
.footer-wf__brand img { height: 34px; display: block; }
.footer-wf__brand p { font-size: 13.5px; line-height: 1.6; color: var(--estea-cream-muted); margin: 14px 0 0; max-width: 28ch; }
.footer-wf h4 { font-family: var(--estea-font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--estea-cream-muted); margin: 0 0 14px; }
.footer-wf__col { display: flex; flex-direction: column; gap: 12px; }
.footer-wf__col a { font-size: 14px; color: var(--estea-cream); text-decoration: none; }
.footer-wf__col a:hover { color: var(--estea-bronze-bright); }
.footer-wf__note { font-size: 12px; line-height: 1.5; color: var(--estea-cream-muted); margin: 6px 0 0; }
.footer-wf__bar { border-top: 1px solid var(--estea-border-on-dark); }
.footer-wf__bar-inner { max-width: var(--estea-content-max); margin: 0 auto; padding: 18px 24px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 12px; color: var(--estea-cream-muted); }

/* ============================================================
   HERO "PAGE DE SERVICE" (pilier + leaves) : carte editoriale +
   carte "En bref" + sous-nav sticky avec scroll-spy. Fond grille.
   ============================================================ */
.svc { padding-top: 18px; }
.svc-hero {
  position: relative; overflow: hidden;
  background: var(--estea-bg-card);
  border: 1px solid rgba(30,25,20,0.08);
  border-radius: 22px;
  box-shadow: 0 30px 60px -30px rgba(30,25,20,0.30);
}
.svc-hero__body { position: relative; overflow: hidden; background: var(--estea-paper); }
.svc-hero__motif { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.35; display: block; }
.svc-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,248,242,0.6), rgba(251,248,242,0.82)); }
.svc-hero__inner { position: relative; padding: 40px 48px; }

.svc-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 13px; color: var(--estea-stone-500); margin-bottom: 26px; }
.svc-crumb a { text-decoration: none; color: inherit; }
.svc-crumb a:hover { color: var(--estea-bronze-deep); }
.svc-crumb svg { width: 14px; height: 14px; opacity: 0.6; }
.svc-crumb__current { color: var(--estea-ink); font-weight: 500; }

.svc-hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.svc-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.svc-copy h1 { font-family: var(--estea-font-display); font-weight: 500; font-size: clamp(38px, 4.6vw, 54px); line-height: 1.06; color: var(--estea-ink); margin: 0; max-width: 11em; }
.svc-copy .lead { font-size: 18px; line-height: 1.65; color: var(--estea-stone-700); margin: 0; max-width: 32em; }
.svc-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; flex-wrap: wrap; }
.svc-actions .btn { border-radius: 999px; }
.svc-link { font-weight: 600; font-size: 14px; color: var(--estea-bronze-deep); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.svc-link:hover { color: var(--estea-ink); }

/* Carte "En bref" */
.svc-spec { background: var(--estea-bg-card); border: 1px solid var(--estea-border-hairline); border-radius: 18px; box-shadow: 0 24px 50px -26px rgba(30,25,20,0.28); padding: 8px 24px 24px; }
.svc-spec__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 14px; border-bottom: 1px solid var(--estea-border-hairline); }
.svc-spec__title { font-family: var(--estea-font-display); font-size: 21px; }
.svc-spec__brand { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--estea-bronze-deep); }
.svc-spec__row { display: flex; align-items: center; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--estea-border-hairline); }
.svc-spec__row:last-of-type { border-bottom: none; padding-bottom: 18px; }
.svc-spec__icon { display: flex; width: 38px; height: 38px; border-radius: 11px; background: var(--estea-champagne); color: var(--estea-bronze-deep); align-items: center; justify-content: center; flex-shrink: 0; }
.svc-spec__icon svg { width: 18px; height: 18px; }
.svc-spec__label { font-size: 12px; color: var(--estea-stone-500); }
.svc-spec__value { font-size: 15px; color: var(--estea-ink); }
.svc-spec .btn { width: 100%; justify-content: center; border-radius: 999px; padding: 13px; font-size: 13.5px; margin-top: 4px; }

/* Sous-nav d'ancres (PAS sticky : on evite le double menu sous la navbar
   globale, qui reste la seule barre fixe). Bande sous le hero. */
.svc-subnav { background: var(--estea-bg-card); margin-top: 14px; margin-bottom: var(--estea-space-7); border-radius: 999px; border: 1px solid var(--estea-border-hairline); box-shadow: var(--estea-shadow-1); }
.svc-subnav__inner { max-width: var(--estea-content-max); margin: 0 auto; padding: 2px 16px; display: flex; gap: 6px; flex-wrap: wrap; }
.svc-subnav__link { padding: 14px 16px; font-size: 14px; color: var(--estea-stone-600); text-decoration: none; border-bottom: 2px solid transparent; transition: color 140ms ease, border-color 140ms ease; }
.svc-subnav__link:hover { color: var(--estea-ink); }
.svc-subnav__link--active { color: var(--estea-ink); font-weight: 600; border-bottom-color: var(--estea-bronze); }

/* Ancrages : compenser la navbar fixe */
[id] { scroll-margin-top: 92px; }

@media (max-width: 860px) {
  .svc-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .svc-hero__inner { padding: 28px 22px; }
  .svc-subnav__inner { padding: 0 18px; overflow-x: auto; flex-wrap: nowrap; }
}

/* prefers-reduced-motion : le fond reste visible mais figé (géré en JS,
   qui rend une image statique au lieu d'animer). On ne le cache pas. */

/* ============================================================
   Menu mobile (hamburger) + champ select du formulaire
   ============================================================ */
.navbar__toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--estea-border-hairline); background: var(--estea-bg-card); color: var(--estea-ink); cursor: pointer; padding: 0; }
.navbar__toggle svg { width: 22px; height: 22px; }
.navbar__toggle .navbar__toggle-close { display: none; }
.navbar--open .navbar__toggle .navbar__toggle-open { display: none; }
.navbar--open .navbar__toggle .navbar__toggle-close { display: block; }

@media (max-width: 980px) {
  .navbar__toggle { display: inline-flex; }
  .navbar__cta-btn { display: none; }          /* le CTA passe dans le menu */
  .navbar--open .navbar__nav {
    display: flex; flex-direction: column; align-items: stretch;
    grid-column: 1 / -1; justify-self: stretch;
    position: absolute; top: calc(100% + 10px); left: 16px; right: 16px;
    background: var(--estea-bg-card); border: 1px solid var(--estea-border-hairline);
    border-radius: 20px; box-shadow: var(--estea-shadow-3);
    padding: 12px; gap: 2px; max-height: 74vh; overflow-y: auto; z-index: 80;
  }
  .navbar--open .navbar__item { flex-direction: column; align-items: stretch; }
  .navbar--open .navbar__item > a { padding: 12px 14px; border-radius: 10px; font-size: 15px; color: var(--estea-ink); }
  .navbar--open .navbar__item > a:hover { background: var(--estea-sand); }
  .navbar--open .navbar__caret { display: none; }
  .navbar--open .navbar__menu { position: static; display: block; padding: 0; transform: none; }
  .navbar--open .navbar__menu-inner { box-shadow: none; border: none; background: transparent; padding: 2px 0 10px 14px; min-width: 0; }
  .navbar--open .navbar__menu-inner a { padding: 8px 12px; font-size: 14px; }
  .navbar--open .navbar__mobile-cta { display: block; margin-top: 8px; }
  .navbar--open .navbar__mobile-cta a { display: flex; justify-content: center; }
}
.navbar__mobile-cta { display: none; }

/* Select du formulaire : fl&egrave;che custom (clair) */
.lead-form__select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6052' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  padding-right: 40px; cursor: pointer;
}
/* Select dans la CTA sombre */
.cta-card .lead-form select {
  background-color: rgba(20,16,12,0.5); border: 1px solid rgba(239,232,218,0.18);
  color: var(--estea-cream); border-radius: 12px;
}
.cta-card .lead-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B5A88E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.cta-card .lead-form select:focus { border-color: var(--estea-bronze-bright); box-shadow: none; }
.cta-card .lead-form select option, .cta-card .lead-form select optgroup { color: var(--estea-ink); background: var(--estea-bg-card); }