/* =========================================================
   De Clerck Expertises, main.css
   Site statique (HTML + CSS + vanilla JS), aucun build.
   Construit d'apres /tmp/dc-blueprint.md (source de verite + addendum DA seniors 2026).
   DA : bleu nuit / sable dominant / cuivre rationne (trait + CTA uniquement).
   ========================================================= */

/* ---------------------------------------------------------
   0. POLICES SELF-HOSTEES (PERF-05)
   Fontes variables servies depuis /fonts (plus de dependance Google Fonts :
   -2 connexions externes, pas de fuite vers Google, CSP plus stricte).
   Sous-ensembles latin + latin-ext (suffisant pour le francais/belge).
   font-display: swap -> texte visible immediatement (fallback puis swap).
   --------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700; /* fonte variable */
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600; /* fonte variable (axe opsz + wght) */
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------
   1. RESET MINIMAL
   --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

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

:where(h1, h2, h3, h4) {
  font-weight: 600;
}

/* ---------------------------------------------------------
   2. :ROOT, TOKENS DE DESIGN
   --------------------------------------------------------- */
:root {
  /* Couleurs */
  --navy: #0f2a3f;
  --navy-light: #1a3d5c;
  --sand: #f4efe7;
  --sand-dark: #e8e0d4;
  --copper: #b87333; /* DÉCORATIF uniquement : filets, bordures, fonds, icones */
  --copper-text: #905320; /* TEXTE cuivre sur fond clair (sand/white), contraste AA */
  --copper-light: #d48e50; /* TEXTE cuivre sur fond navy, contraste AA */
  --copper-deep: #9f6128; /* FOND de bouton plein sous texte blanc : 4.98:1 (WCAG AA). Le --copper #b87333 echoue (3.79:1) sous du blanc. */
  --ink: #1c2b36;
  --muted: #5b6b76;
  --white: #ffffff;

  /* Polices */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Echelle typographique (saut d'echelle assume, addendum) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem; /* 17px */
  --text-lead: clamp(1.125rem, 1.5vw, 1.375rem);
  --text-h3: clamp(1.5rem, 2.5vw, 1.875rem);
  --text-h2: clamp(2rem, 3.5vw, 2.75rem);
  --text-h1: clamp(2.75rem, 6vw, 5rem); /* addendum : grand saut d'echelle */

  /* Hauteurs de ligne */
  --lh-tight: 1.05;
  --lh-snug: 1.1;
  --lh-normal: 1.55;
  --lh-loose: 1.65;

  /* Espacement, base 4px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-section: clamp(3rem, 8vw, 6rem);

  /* Conteneurs */
  --container-max: 1200px;
  --container-px: clamp(1rem, 4vw, 2rem);

  /* Rayons */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Ombres (teinte navy) */
  --shadow-sm: 0 1px 2px rgba(15, 42, 63, 0.06), 0 2px 8px rgba(15, 42, 63, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 42, 63, 0.1), 0 8px 24px rgba(15, 42, 63, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 42, 63, 0.14), 0 24px 48px rgba(15, 42, 63, 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Scroll-reveal */
  --reveal-distance: 24px;
  --reveal-duration: 600ms;

  /* Header sticky */
  --header-h: 4.5rem;
}

/* ---------------------------------------------------------
   3. BASE TYPOGRAPHIQUE
   --------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--ink);
  background-color: var(--sand); /* sable dominant, addendum ratio chaud */
  /* Chiffres old-style dans le corps (microtypo) */
  font-feature-settings: "onum" 1, "kern" 1;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  color: var(--navy);
  /* Ligatures + serrage magazine (addendum branding) */
  font-feature-settings: "liga" 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-optical-sizing: auto;
}

h1 {
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
  letter-spacing: -0.01em;
}

p {
  text-wrap: pretty;
}

strong {
  font-weight: 600;
}

/* ---------------------------------------------------------
   4. UTILITAIRES
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Eyebrow : small-caps cuivre + filet cuivre dessous (systeme, addendum) */
.eyebrow {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Air sous le filet cuivre, avant le titre (sinon le trait colle au H2) */
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-text);
  text-wrap: balance;
}

.eyebrow::after {
  content: "";
  width: 32px;
  height: 1px;
  background-color: var(--copper);
}

.eyebrow--center {
  align-items: center;
}

.section-lead {
  font-size: var(--text-lead);
  line-height: var(--lh-normal);
  color: var(--muted);
  text-wrap: pretty;
  max-width: 60ch;
}

/* Icone Lucide inline */
.icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

.icon--sm {
  width: 18px;
  height: 18px;
}

/* ---------------------------------------------------------
   5. ACCESSIBILITE : skip-link, focus, ancres
   --------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  z-index: 1000;
  padding: var(--space-3) var(--space-5);
  background-color: var(--navy);
  color: var(--white);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Ancres : decalage sous le header sticky (addendum, offset en CSS) */
:where(section[id], [id]) {
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

/* ---------------------------------------------------------
   6. SECTIONS, RYTHME VERTICAL
   --------------------------------------------------------- */
.section {
  padding-block: var(--space-section);
}

.section--sand {
  background-color: var(--sand);
  position: relative;
}

.section--white {
  background-color: var(--white);
}

.section--navy {
  background-color: var(--navy);
  color: var(--sand);
}

.section--navy h2,
.section--navy h3 {
  color: var(--white);
}

/* Eyebrow sur fond navy : le cuivre fonce (--copper-text) n'a pas assez de
   contraste sur le bleu nuit, on passe au cuivre clair (WCAG AA). */
.section--navy .eyebrow {
  color: var(--copper-light);
}

/* Lead sur fond navy : le gris --muted n'a pas assez de contraste sur le bleu
   nuit. On passe a un sable desature, bien lisible (WCAG AA). */
.section--navy .section-lead {
  color: color-mix(in srgb, var(--sand) 88%, transparent);
}

.section-head {
  max-width: 52ch;
  margin-bottom: var(--space-10);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .section-lead {
  margin-inline: auto;
}

/* Grain papier SVG sur le sable (addendum, data-URI, 0 requete) */
.section--sand::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 0;
}

.section--sand > .container {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   7. BOUTONS
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--transition-base),
    border-color var(--transition-base), color var(--transition-base),
    box-shadow var(--transition-base);
}

.btn:active {
  transform: translateY(1px);
}

.btn .icon {
  width: 20px;
  height: 20px;
}

/* Primaire : cuivre plein, texte blanc. Fond --copper-deep (et non --copper)
   pour que le texte blanc atteigne le contraste WCAG AA (4.98:1). */
.btn-primary {
  background-color: var(--copper-deep);
  color: var(--white);
  border-color: var(--copper-deep);
}

.btn-primary:hover {
  /* color-mix pour assombrir encore le cuivre au survol */
  background-color: color-mix(in srgb, var(--copper-deep) 88%, black);
  border-color: color-mix(in srgb, var(--copper-deep) 88%, black);
}

/* Secondaire : contour cuivre */
.btn-secondary {
  background-color: transparent;
  color: var(--copper-text);
  border-color: var(--copper);
}

.btn-secondary:hover {
  background-color: color-mix(in srgb, var(--copper) 8%, transparent);
}

/* Outline : contour navy (sur fonds clairs) */
.btn-outline {
  background-color: transparent;
  color: var(--navy);
  border-color: color-mix(in srgb, var(--navy) 30%, transparent);
}

.btn-outline:hover {
  border-color: var(--copper);
  color: var(--copper-text);
}

/* Variante fond sombre : secondaire lisible sur navy.
   Couvre la section navy, le hero et la bande cta-break (tous fond --navy)
   ou le --copper-text par defaut echouerait WCAG AA. */
.section--navy .btn-secondary,
.hero .btn-secondary,
.cta-break .btn-secondary {
  color: var(--white);
  border-color: color-mix(in srgb, var(--white) 60%, transparent);
}

.section--navy .btn-secondary:hover,
.hero .btn-secondary:hover,
.cta-break .btn-secondary:hover {
  background-color: color-mix(in srgb, var(--white) 12%, transparent);
  border-color: var(--white);
}

/* ---------------------------------------------------------
   8. HEADER STICKY
   --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--navy);
  color: var(--sand);
  /* Header shrink : on n'anime QUE des props composited (addendum, anti-CLS) */
  transition: box-shadow var(--transition-base),
    background-color var(--transition-base);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--header-h);
  padding-block: var(--space-2);
  /* Condensation au scroll : on anime height (logo) + padding via la base. */
  transition: padding-block var(--transition-base);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.1;
  color: var(--white);
  transition: color var(--transition-base);
}

/* Logo SVG colorable : prend la couleur (currentColor) du parent .brand.
   Dimensions maitrisees (ratio 992:244 ~ 4.06:1). On fixe hauteur ET largeur
   pour eviter que le <use> prenne une taille intrinseque incontrolee. */
.brand-logo {
  display: block;
  height: 44px;
  width: 179px; /* 44 * 4.06 */
  color: var(--copper); /* doré, plus raffine que le blanc en toutes lettres */
  /* Le trace SVG n'a pas d'attribut fill : on le force a suivre currentColor,
     sinon il s'affiche en noir par defaut au lieu du cuivre. */
  fill: currentColor;
  transition: height var(--transition-base), width var(--transition-base);
}

.brand-tag {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sand) 70%, transparent);
  margin-top: var(--space-1);
  /* Anime sa disparition au scroll (condensation). */
  overflow: hidden;
  transition: opacity var(--transition-base), max-height var(--transition-base);
}

/* Cluster droit (nav + actions). */
.header-end {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* Navigation desktop */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Liens secondaires + separateur : panneau mobile uniquement (caches >=768px). */
.nav-link--sub {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--sand) 70%, transparent);
}

/* Separateur entre liens principaux et secondaires (panneau mobile).
   Pas de trait propre : il sert juste de respiration. Le trait visible reste
   le border-bottom du lien precedent, on evite ainsi le double trait + le trou. */
.nav-sep {
  height: 0;
  margin-block: var(--space-2);
}

/* Desktop : pas de liens secondaires ni de separateur dans la nav reduite. */
@media (min-width: 768px) {
  .nav-link--sub,
  .nav-sep {
    display: none;
  }
}

.nav-link {
  position: relative;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 500;
  color: color-mix(in srgb, var(--sand) 88%, transparent);
  padding-block: var(--space-1);
  /* Souligne anime via background-size composited (addendum) */
  background-image: linear-gradient(var(--copper), var(--copper));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: color var(--transition-fast), background-size var(--transition-base);
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--white);
  background-size: 100% 2px;
}

/* Numero tel en clair dans le header (addendum CRO, desktop), discret. */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: color-mix(in srgb, var(--sand) 88%, transparent);
  white-space: nowrap;
}

.header-phone .icon {
  width: 16px;
  height: 16px;
  color: var(--copper);
}

.header-phone:hover {
  color: var(--white);
}

/* Bloc actions : filet vertical fin avant le bloc (separe tel et CTA). */
.header-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.header-cta::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-4));
  top: 50%;
  transform: translateY(-50%);
  height: 1.5rem;
  width: 1px;
  background: color-mix(in srgb, var(--sand) 16%, transparent);
}

/* Variante compacte du CTA dans le header (ne touche pas .btn global). */
.header-cta .btn {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Le tel en clair de la nav est un doublon sur desktop (header-phone le couvre) :
   on ne l'affiche que dans le panneau replie en mobile. */
.nav-phone-item {
  display: none;
}

/* Filet cuivre fin en bas du header. */
.site-header {
  border-bottom: 1px solid color-mix(in srgb, var(--copper) 28%, transparent);
}

/* Header reduit : ombre + voile quand on scrolle (composited). */
.site-header.is-scrolled {
  background-color: color-mix(in srgb, var(--navy) 92%, transparent);
  box-shadow: var(--shadow-md);
}

/* Condensation au scroll : padding reduit, logo retreci, tagline effacee. */
.site-header.is-scrolled .header-inner {
  padding-block: var(--space-1);
}

.site-header.is-scrolled .brand-logo {
  height: 34px;
  width: 138px; /* 34 * 4.06, garde le ratio */
}

.site-header.is-scrolled .brand-tag {
  opacity: 0;
  max-height: 0;
}

@supports (backdrop-filter: blur(8px)) {
  .site-header.is-scrolled {
    backdrop-filter: blur(8px);
  }
}

/* Focus visible soigne sur les elements interactifs du header. */
.nav-link:focus-visible,
.header-phone:focus-visible,
.nav-toggle:focus-visible,
.header-cta .btn:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Respect du mouvement reduit : aucune transition de condensation. */
@media (prefers-reduced-motion: reduce) {
  .header-inner,
  .brand,
  .brand-logo,
  .brand-tag {
    transition: none;
  }
}

/* Bouton burger mobile */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  /* Sans contour : 3 lignes nues (epure DA). Cible tactile 44x44 conservee,
     focus clavier net via .nav-toggle:focus-visible plus bas. */
  border: 0;
  color: var(--white);
  cursor: pointer;
}

.nav-toggle .icon-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* ---------------------------------------------------------
   9. HERO
   --------------------------------------------------------- */
.hero {
  background-color: var(--navy);
  color: var(--sand);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5.5rem);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-eyebrow {
  color: var(--copper-light);
}

.hero-eyebrow::after {
  background-color: var(--copper);
}

.hero h1 {
  color: var(--white);
  margin-block: var(--space-4) var(--space-5);
  max-width: 22ch;
  /* Taille forte mais maitrisee : le H1 d'origine (jusqu'a 5rem sur 8 lignes)
     poussait CTA et reassurance sous le pli. On garde l'impact tout en laissant
     respirer l'appel a l'action above-the-fold. Interligne resserre (rendu magazine). */
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.08;
  /* Equilibre les lignes (supprime les orphelins type "claires et" seul).
     Support large 2026 ; degradation neutre si absent. */
  text-wrap: balance;
  hyphens: none;
}

/* Mot-cle cuivre italic (addendum, point focal signature) */
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--copper-light);
}

.hero-lead {
  font-size: var(--text-lead);
  line-height: var(--lh-normal);
  color: color-mix(in srgb, var(--sand) 85%, transparent);
  max-width: 44ch;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Micro-reassurance sous les CTA (addendum) : separateur CSS, pas un caractere */
.hero-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--sand) 70%, transparent);
}

.hero-reassurance li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}

.hero-reassurance li + li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-3));
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background-color: var(--copper);
  transform: translateY(-50%);
}

.hero-reassurance .icon {
  width: 16px;
  height: 16px;
  color: var(--copper);
}

/* Visuel hero, ombre douce et filet cuivre */
.hero-media {
  position: relative;
}

.hero-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---------------------------------------------------------
   10. DUOTONE IMAGES (services + zones), addendum
   --------------------------------------------------------- */
.duotone {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--navy);
}

.duotone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Duotone DESACTIVE a la demande : on affiche les vraies photos en couleur.
     Pour le reactiver (unification des sources), retablir :
     mix-blend-mode: multiply; filter: grayscale(40%) contrast(1.05);
     et le voile .duotone::after ci-dessous. */
}

/* Voile duotone desactive (vraies photos en couleur).
.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--navy) 35%, transparent),
    color-mix(in srgb, var(--copper) 18%, transparent)
  );
  mix-blend-mode: screen;
  pointer-events: none;
}
*/

/* ---------------------------------------------------------
   11. SERVICES, blocs editoriaux (PAS de cartes a ombre)
   --------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-10) var(--space-8);
}

.service-block {
  position: relative;
  padding-top: var(--space-8);
  /* Filet cuivre 1px en haut (addendum, systeme) */
  border-top: 1px solid color-mix(in srgb, var(--copper) 70%, transparent);
  /* Colonne flex : permet d'aligner les CTA en bas de chaque bloc, quelles
     que soient les longueurs de texte (corrige la rupture de grille). */
  display: flex;
  flex-direction: column;
}

/* Ordinal Fraunces italic geant en sand-dark (addendum, editorial) */
.service-ordinal {
  position: absolute;
  top: var(--space-4);
  /* Legerement rentre pour ne pas etre rogne sur la colonne de droite */
  right: var(--space-2);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  color: var(--sand-dark);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.service-icon {
  color: var(--copper); /* icone discrete, JAMAIS enfermee dans un rond plein */
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}

.service-block h3 {
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-3);
}

.service-block > p {
  color: var(--muted);
  margin-bottom: var(--space-4);
}

.service-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.service-details li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink);
}

.service-details .icon {
  width: 18px;
  height: 18px;
  color: var(--copper);
  margin-top: 2px;
}

.service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  /* Colle les CTA en bas du bloc flex : alignes entre colonnes */
  margin-top: auto;
}

/* ---------------------------------------------------------
   12. EXPERT (#expert, about)
   --------------------------------------------------------- */
.expert-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Video de presentation : SEUL media a garder une ombre (addendum) + filet
   cuivre decale. Format vertical 9:16. */
.expert-portrait {
  position: relative;
  max-width: 320px;
}

/* Cadre video : porte le border-radius + overflow:hidden pour clipper la <video>
   (un border-radius pose directement sur <video> n'est pas clippe par WebKit).
   Le box-shadow (rendu hors du cadre) n'est pas affecte par overflow:hidden. */
.expert-video-frame {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.expert-video {
  display: block;
  width: 100%;
  /* height auto : laisse l'aspect-ratio piloter la hauteur, sinon les attributs
     width/height intrinseques (1080x1920) imposeraient 1920px de haut. */
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background-color: var(--navy);
}

/* Bouton play de la video expert : plus petit que le .media-play des vignettes
   (64px) pour recouvrir moins le visage de Nicolas sur le poster. Specificite
   renforcee (.expert-video-frame ...) pour primer sur .media-play quel que soit
   l'ordre des regles. */
.expert-video-frame .expert-video-play {
  width: 52px;
  height: 52px;
}

.expert-video-frame .expert-video-play .icon {
  width: 22px;
  height: 22px;
}

/* Cadre cuivre qui depasse (addendum) */
.expert-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(var(--space-4), var(--space-4));
  border: 1px solid var(--copper);
  border-radius: var(--radius-lg);
  z-index: 0;
}

.about-lead {
  font-size: var(--text-lead);
  line-height: var(--lh-normal);
  color: var(--ink);
  margin-block: var(--space-4) var(--space-6);
}

.credentials-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.credentials-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--ink);
}

.credentials-list .icon {
  color: var(--copper);
  margin-top: 2px;
}

/* Citation editoriale Nicolas */
.expert-quote {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-style: italic;
  line-height: var(--lh-normal);
  color: var(--navy);
  padding-left: var(--space-5);
  border-left: 2px solid var(--copper);
  margin-block: var(--space-6);
  text-wrap: pretty;
}

/* Boutons d'action de la section expert : RDV (primaire) + Instagram (contour).
   align-items: center aligne les 2 boutons sur leur axe vertical (l'un a une
   icone qui changeait sa hauteur, d'ou un decalage sans cet alignement). */
.expert-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Bouton rond (icone seule) a cote des CTA de la section experte : Instagram de
   Tiffany. Contour dore (s'accorde au bouton "Appeler Tiffany"), cf.
   .footer-social pour le pendant sur fond navy. Le clic est tracke comme
   social_click (network). */
.expert-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--copper);
  color: var(--copper-text);
  background-color: transparent;
  transition: background-color var(--transition-fast);
}

/* Meme comportement au survol que .btn-secondary ("Appeler Tiffany") : leger
   fond cuivre translucide, contour et icone inchanges. */
.expert-social:hover {
  background-color: color-mix(in srgb, var(--copper) 8%, transparent);
}

/* Trait de l'icone un peu plus epais pour equilibrer avec les CTA voisins. */
.expert-social .icon {
  stroke-width: 2;
}

/* Paragraphes de presentation (section experte, qui n'a pas de liste de
   diplomes a la place du corps de texte). */
.expert-text {
  color: var(--muted);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-4);
  text-wrap: pretty;
}

/* Section experte INVERSEE (texte a gauche, video a droite) : alterne avec la
   section de Nicolas. Le DOM place .expert-content avant .expert-portrait, donc
   en 1 colonne (mobile) le texte s'affiche avant la video, ce qui est voulu. */
.expert-grid--reverse {
  grid-template-columns: 1.15fr 0.85fr;
}
/* Video calee a DROITE de sa colonne (miroir de Nicolas, calee a gauche) pour
   un equilibre symetrique. justify-self ne s'applique qu'en grille 2 colonnes :
   en 1 colonne (mobile), le margin-inline:auto du portrait reprend la main et
   recentre la video. */
.expert-grid--reverse .expert-portrait {
  justify-self: end;
}
/* Cadre cuivre decale vers l'exterieur, en miroir de la version de Nicolas. */
.expert-grid--reverse .expert-portrait::after {
  transform: translate(calc(-1 * var(--space-4)), var(--space-4));
}

/* ---------------------------------------------------------
   12b. DANS LES MEDIAS (#medias), autorite E-E-A-T
   --------------------------------------------------------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--space-10);
}

.media-card {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border: 1px solid var(--sand-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Facade video : ratio 16:9, vignette + bouton play centre */
.media-facade {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background-color: var(--navy);
}

/* Variante lien (BX1) : ouvre une URL externe au lieu d'injecter une iframe.
   La vignette source est verticale, on cadre sur le titre et le visage. */
.media-facade--link .media-thumb {
  object-position: center 72%;
}

.media-thumb {
  display: block;
  /* Absolu pour couvrir la facade SANS imposer sa hauteur intrinseque
     (la vignette BX1 est verticale : sinon elle forcerait 975px de haut et
     l'aspect-ratio 16:9 de la facade serait ignore). */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile leger pour faire ressortir le bouton play */
.media-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--navy) 22%, transparent);
  transition: background-color var(--transition-base);
}

.media-facade:hover::after,
.media-facade:focus-within::after {
  background-color: color-mix(in srgb, var(--navy) 8%, transparent);
}

/* Lecture en cours : on retire le voile et le bouton pour laisser les controles
   natifs YouTube cliquables (pause, barre de lecture). Sans cela, le voile
   ::after restait au-dessus de l'iframe et captait tous les clics. */
.media-facade.is-playing {
  cursor: default;
}

.media-facade.is-playing::after {
  content: none;
}

.media-facade.is-playing .media-play {
  display: none;
}

.media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  /* --copper-deep (et non --copper) : meme bronze que les boutons pleins, et
     l'icone blanche y est conforme WCAG (le --copper clair est reserve au decoratif). */
  background-color: var(--copper-deep);
  color: var(--white);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-base),
    background-color var(--transition-base);
}

.media-play .icon {
  width: 28px;
  height: 28px;
  margin-left: 3px; /* compense le triangle pour un centrage optique */
}

.media-facade:hover .media-play,
.expert-video-frame:hover .media-play,
.media-play:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  background-color: var(--navy);
}

/* Iframe injectee au clic (remplace la facade) */
.media-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.media-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
}

.media-kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-text);
}

.media-card-title {
  font-size: var(--text-lead);
  line-height: var(--lh-tight);
  color: var(--navy);
}

.media-card-title em {
  font-style: italic;
  color: var(--copper-text);
}

.media-text {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--ink);
  text-wrap: pretty;
}

.media-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.media-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
  transition: color var(--transition-base);
}

.media-link .icon {
  width: 18px;
  height: 18px;
  color: var(--copper);
  flex-shrink: 0;
}

.media-link:hover,
.media-link:focus-visible {
  color: var(--copper-text);
}

/* ---------------------------------------------------------
   13. DEMARCHE (#demarche), 4 etapes statiques
   --------------------------------------------------------- */
.steps-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-8);
  counter-reset: step;
}

.step-item {
  position: relative;
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--copper) 60%, transparent);
}

.step-number {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--copper-text);
  margin-bottom: var(--space-2);
}

.step-item h3 {
  font-size: 1.125rem;
  margin-bottom: var(--space-2);
}

.step-item p {
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ---------------------------------------------------------
   14. HONORAIRES (#honoraires), price-card + table
   --------------------------------------------------------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
  /* start (pas stretch) : ouvrir le detail d'une carte ne doit pas etirer les
     autres (sinon grand vide dans les cartes non ouvertes). Chaque carte garde
     sa hauteur propre ; leger ecart au repos assume. */
  align-items: start;
}

.price-card {
  background-color: var(--white);
  border: 1px solid var(--sand-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* Mise en avant quand le detail est ouvert (addendum, :has) */
.price-card:has(details[open]) {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--copper) 40%, var(--sand-dark));
}

.price-card-icon {
  color: var(--copper);
  margin-bottom: var(--space-4);
}

.price-card h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-3);
}

.price-from {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-6);
}

.price-from strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--navy);
  display: block;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1; /* chiffres tabulaires sur les prix */
}

/* details/summary natif du detail tarifaire */
.price-details {
  margin-bottom: var(--space-6);
}

.price-details summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: 600;
  color: var(--copper-text);
  list-style: none;
  /* padding-block a 16px : cible tactile >=44px (16+20+16, WCAG 2.5.5) */
  padding-block: var(--space-4);
}

.price-details summary::-webkit-details-marker {
  display: none;
}

.price-details summary .icon {
  transition: transform var(--transition-base);
}

.price-details[open] summary .icon {
  transform: rotate(180deg);
}

/* Accordeon anime via grid-template-rows (addendum) */
.price-table-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-base);
}

.price-details[open] .price-table-wrap {
  grid-template-rows: 1fr;
}

.price-table-inner {
  overflow: hidden;
  min-height: 0;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  /* Chiffres tabulaires pour aligner les colonnes (addendum) */
  font-feature-settings: "tnum" 1;
}

.price-table caption {
  text-align: left;
  font-weight: 600;
  color: var(--navy);
  padding-bottom: var(--space-2);
}

.price-table th,
.price-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--sand-dark);
}

.price-table thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.price-table td.num,
.price-table th.num {
  text-align: right;
  white-space: nowrap;
}

.price-note {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-4);
}

.price-card .btn {
  margin-top: auto;
}

.price-disclaimer {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--muted);
  /* Pas de max-width : la phrase tient sur une ligne sur desktop. Sur petit
     ecran, elle revient naturellement a la ligne (pas de white-space: nowrap,
     qui la rendrait illisible ou la ferait deborder). */
  text-wrap: pretty;
}

/* ---------------------------------------------------------
   15. TEMOIGNAGES (#temoignages), citations editoriales
   --------------------------------------------------------- */
/* En-tete avis : titre a gauche, note Google a droite (desktop). */
.testimonials-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.testimonials-header .section-head {
  margin-bottom: 0;
  flex: 1 1 360px;
}

/* Bloc note Google : score reel + etoiles + nombre d'avis, cliquable.
   display flex + width fit-content : ne s'etire pas, reste compact a droite. */
.google-rating {
  display: flex;
  width: fit-content;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border: 1px solid color-mix(in srgb, var(--navy) 15%, transparent);
  border-radius: var(--radius-lg);
  background-color: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.google-rating:hover,
.google-rating:focus-visible {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--copper) 50%, transparent);
}

.google-rating-score {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
  color: var(--navy);
}

.google-rating-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stars--inline {
  margin-top: 0;
}

.google-rating-count {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-10) var(--space-8);
}

/* Bouton "voir tous les avis" sous la grille. */
.testimonials-more {
  margin-top: var(--space-12);
  text-align: center;
}

/* PAS de boite (addendum) : citation editoriale sur sable. */
.testimonial {
  position: relative;
}

.testimonial blockquote {
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--ink);
  text-wrap: pretty;
  margin-bottom: var(--space-5);
}

/* Guillemets cuivre signature, INTEGRES au flux du texte (ouvrant et fermant
   assortis) : un peu plus gros, couleur cuivre, sans casser l'interligne. */
.quote-mark {
  color: var(--copper-text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35em;
  line-height: 1;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Monogramme cuivre (exception assumee a la rationalisation du cuivre) */
.testimonial-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--copper);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}

.testimonial-author {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Etoiles decoratives, fill cuivre (aria-hidden cote HTML) */
.stars {
  display: inline-flex;
  gap: 2px;
  margin-top: var(--space-1);
}

.stars .icon {
  width: 16px;
  height: 16px;
  fill: var(--copper);
  stroke: var(--copper);
}

/* Bloc CTA intermediaire apres temoignages (addendum, rompt le scroll) */
.cta-break {
  margin-top: var(--space-16);
  padding: var(--space-10);
  background-color: var(--navy);
  color: var(--sand);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.cta-break h3 {
  color: var(--white);
  max-width: 24ch;
}

.cta-break-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.cta-break-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--white);
}

.cta-break-phone .icon {
  color: var(--copper);
}

.cta-break-phone:hover {
  color: var(--copper-light);
}

/* ---------------------------------------------------------
   16. ZONES (#zones)
   --------------------------------------------------------- */
.zones-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.zones-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.zone-item {
  display: flex;
  gap: var(--space-4);
}

.zone-item .icon {
  color: var(--copper);
  margin-top: 2px;
}

.zone-item h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-1);
}

.zone-item p {
  font-size: var(--text-sm);
  color: var(--muted);
}

.zone-note {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: var(--space-6);
  text-wrap: pretty;
}

.zones-media .duotone {
  /* Carte des zones au format carre (1:1), image affichee en entier. */
  aspect-ratio: 1 / 1;
}

/* ---------------------------------------------------------
   17. FAQ (#faq), details/summary natifs
   --------------------------------------------------------- */
.faq-list {
  max-width: 68ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--sand-dark);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--navy);
  line-height: var(--lh-snug);
}

.faq-item summary .icon {
  color: var(--copper);
  transition: transform var(--transition-base);
}

.faq-item[open] summary .icon {
  transform: rotate(180deg);
}

/* Accordeon anime via grid-template-rows (addendum) */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-base);
}

.faq-item[open] .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-answer-inner p {
  padding-bottom: var(--space-5);
  color: var(--muted);
  text-wrap: pretty;
}

/* Ligne de fin de FAQ (addendum) */
.faq-more {
  max-width: 68ch;
  margin: var(--space-10) auto 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

/* Le texte occupe toute la largeur : les deux CTA passent ENSEMBLE sur la ligne
   suivante, centres et alignes (evite "Appeler" colle au texte et "WhatsApp"
   seul dessous). */
.faq-more p {
  flex-basis: 100%;
  margin-bottom: var(--space-2);
  color: var(--muted);
}

/* ---------------------------------------------------------
   18. CONTACT (#contact, navy), CTA directs
   --------------------------------------------------------- */
.contact-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-block: var(--space-10) var(--space-6);
}

.contact-btn {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--navy-light);
  color: var(--sand);
  border: 1px solid color-mix(in srgb, var(--sand) 14%, transparent);
  transition: border-color var(--transition-base),
    background-color var(--transition-base);
}

.contact-btn:hover {
  border-color: var(--copper);
  background-color: color-mix(in srgb, var(--navy-light) 92%, var(--copper));
}

.contact-btn .icon {
  width: 28px;
  height: 28px;
  color: var(--copper);
}

.contact-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.contact-btn-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--sand) 70%, transparent);
}

.contact-btn-value {
  font-weight: 600;
  color: var(--white);
}

.contact-meta {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--sand) 80%, transparent);
  text-wrap: pretty;
}

.contact-meta strong {
  color: var(--white);
}

/* ---------------------------------------------------------
   19. FOOTER
   --------------------------------------------------------- */
.site-footer {
  background-color: var(--navy);
  color: color-mix(in srgb, var(--sand) 80%, transparent);
  padding-block: var(--space-16) var(--space-10);
  border-top: 1px solid color-mix(in srgb, var(--sand) 12%, transparent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-10) var(--space-8);
  margin-bottom: var(--space-10);
}

.footer-logo {
  height: 38px;
  width: 154px; /* ratio 4.06:1 maitrise */
  color: var(--copper); /* doré, coherent avec le header */
  fill: currentColor; /* meme fix que le header : sans fill, le trace est noir */
  display: block;
  margin-bottom: var(--space-1);
}

/* Tagline sous le logo, miroir de .brand-tag du header (small-caps sable). */
.footer-tag {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sand) 70%, transparent);
  margin-bottom: var(--space-4);
}

.footer-brand address {
  font-style: normal;
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}

.footer-brand .footer-legal-name {
  color: color-mix(in srgb, var(--sand) 65%, transparent);
}

/* Colonne navigation decalee vers la droite (centree dans sa cellule) pour
   equilibrer le bloc marque a gauche, sans coller au bord. Neutralise sous
   1024px (cf. media query). */
.footer-col {
  justify-self: center;
}

.footer-col h2 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--copper-light);
  margin-bottom: var(--space-4);
}

.footer-nav li {
  margin-bottom: var(--space-1);
}

/* Cible tactile confortable sans grossir le texte (inline-flex + min-height).
   38px : volontairement un peu resserre pour la lisibilite de la liste, reste
   au-dessus du minimum WCAG AA 2.5.8 (24px). */
.footer-nav a {
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  min-height: 38px;
}

.footer-nav a:hover {
  color: var(--white);
}

.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-3);
}

.footer-phone .icon {
  color: var(--copper);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--sand) 25%, transparent);
  color: var(--sand);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.footer-social a:hover {
  border-color: var(--copper);
  color: var(--copper-light);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-8);
  border-top: 1px solid color-mix(in srgb, var(--sand) 12%, transparent);
  font-size: var(--text-sm);
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: color-mix(in srgb, var(--sand) 60%, transparent);
}

.footer-legal-links a {
  color: inherit;
  transition: color var(--transition-fast);
  /* Cible tactile >= 44px (WCAG 2.5.5) sans grossir le texte. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-legal-links a:hover {
  color: var(--white);
}

.footer-copy {
  color: color-mix(in srgb, var(--sand) 60%, transparent);
}

/* Credit agence (Graficart) : meme teinte que le copy, souligne au survol. */
.footer-credit {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--copper) 50%, transparent);
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.footer-credit:hover,
.footer-credit:focus-visible {
  color: var(--copper-light);
}

/* Coeur du credit "realise avec amour par Graficart" : icone SVG inline pleine
   cuivre, dans le flux normal de la phrase, assise sur la ligne de base.
   aria-label cote SVG porte le sens accessible. Pas d'orphelin : le coeur est
   soude a "avec" et "par" par des espaces insecables (&#160;) cote HTML. */
.footer-heart {
  /* display:inline-block OBLIGATOIRE : le reset global svg { display:block }
     mettrait sinon le coeur sur sa propre ligne (saut force dans le <p>).
     C'etait la vraie cause des sauts de ligne, pas le wrapping. */
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: var(--copper);
  vertical-align: -0.125em;
}

/* Le segment "avec coeur par Graficart." reste sur une seule ligne (insecable) :
   il bascule en entier a la ligne suivante si la place manque, jamais de coeur
   ni de mot orphelin. white-space:nowrap sur le wrapper inline (PAS inline-block,
   qui casserait la mise en page). */
.footer-made {
  white-space: nowrap;
}

/* ---------------------------------------------------------
   20. BARRE CONTACT MOBILE FIXE
   --------------------------------------------------------- */
.mobile-contact-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-contact-bar {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-2);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: var(--space-3);
    background-color: color-mix(in srgb, var(--navy) 96%, transparent);
    /* Separation toujours lisible, meme sur fond navy (ou la barre se fondait) :
       filet cuivre net (rappel du filet header) + ombre sombre (et non navy,
       invisible sur navy) qui decolle la barre du contenu. */
    border-top: 1px solid color-mix(in srgb, var(--copper) 32%, transparent);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.32);
  }

  @supports (backdrop-filter: blur(8px)) {
    .mobile-contact-bar {
      backdrop-filter: blur(8px);
    }
  }

  /* Hierarchie : Appeler dominant (addendum) */
  .mobile-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--sand);
    border: 1px solid color-mix(in srgb, var(--sand) 20%, transparent);
  }

  .mobile-cta .icon {
    width: 20px;
    height: 20px;
  }

  .mobile-cta--primary {
    background-color: var(--copper-deep);
    color: var(--white);
    border-color: var(--copper-deep);
  }

  /* Place pour la barre fixe : padding-bottom base sur sa hauteur reelle */
  body {
    padding-bottom: 4.75rem;
  }
}

/* ---------------------------------------------------------
   21. CONTENT-VISIBILITY (sections sous le fold), addendum
   --------------------------------------------------------- */
#expert,
#temoignages,
#zones,
#faq {
  content-visibility: auto;
  /* contain-intrinsic-size OBLIGATOIRE pour eviter le CLS (addendum) */
  contain-intrinsic-size: auto 600px;
}

/* ---------------------------------------------------------
   22. ANIMATIONS, scroll-reveal + reveal d'onglets
   --------------------------------------------------------- */

/* Toutes les animations sous prefers-reduced-motion: no-preference */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* REVEAL AU SCROLL.
   Principe de securite (addendum DA motion) : le contenu est VISIBLE par defaut.
   L'effet d'entree est purement additif et pilote par le JS (IntersectionObserver),
   moteur unique et fiable. On a retire la couche CSS scroll-driven `animation-timeline: view()`
   car elle laissait du contenu fige a opacity:0 quand la timeline ne progressait pas
   (elements deja dans le viewport au chargement, certains contextes de rendu).
   Le JS pose la classe `js-anim` sur <html> UNIQUEMENT s'il va animer (IO dispo +
   pas de prefers-reduced-motion). Si JS absent ou mouvement reduit : tout reste visible. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim [data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition: opacity var(--reveal-duration) ease,
      transform var(--reveal-duration) ease;
  }

  .js-anim [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}



/* Mouvement reduit : tout fige, accordeons instantanes */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .faq-answer,
  .price-table-wrap {
    transition: none;
  }
}

/* ---------------------------------------------------------
   23. MEDIA QUERIES
   --------------------------------------------------------- */

/* Tablette */
@media (max-width: 1024px) {
  .hero-grid,
  .expert-grid,
  .zones-grid,
  .media-grid {
    grid-template-columns: 1fr;
  }

  .hero-media,
  .zones-media {
    order: -1;
    max-width: 520px;
  }

  .expert-portrait {
    margin-inline: auto;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  /* Sous 1024px, la nav revient calee a gauche (plus de bloc marque a sa gauche). */
  .footer-col {
    justify-self: start;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --header-h: 4rem;
    /* Sections un peu plus aerees en mobile : le clamp plafonne sinon a son
       minimum (3rem) sous 768px. On remonte legerement l'espace vertical. */
    --space-section: 3.75rem;
  }

  /* Navigation repliee en panneau */
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 auto;
    width: min(82vw, 320px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--space-6);
    background-color: var(--navy);
    border-left: 1px solid color-mix(in srgb, var(--sand) 14%, transparent);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
  }

  .nav.is-open {
    transform: translateX(0);
  }

  /* Menu ouvert : on neutralise le backdrop-filter du header scrolle. Sinon il
     transforme le header en containing block pour les descendants position:fixed,
     et le panneau .nav (fixed, enfant du header) se retrouve confine a la boite
     du header (~4rem) au lieu du viewport. On garde le header opaque. */
  .site-header:has(.nav.is-open) {
    backdrop-filter: none;
    background-color: var(--navy);
  }

  /* Overlay (scrim) : assombrit la page derriere le panneau quand le menu est
     ouvert. z-index 99 = SOUS le header sticky (100) qui contient le panneau,
     donc l'overlay ne recouvre jamais le menu (le header cree son propre
     contexte d'empilement ; un z-index plus eleve sur .nav y serait piege).
     Le clic dessus ferme le menu (gere par le "clic exterieur" de main.js).
     Apparition douce ; absent du DOM visuel quand le menu est ferme. */
  .nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 99;
    background-color: color-mix(in srgb, var(--navy) 60%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }

  .nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav-link {
    display: block;
    padding-block: var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--sand) 12%, transparent);
    font-size: var(--text-base);
    background-image: none;
  }

  /* Dernier lien (tel) : pas de trait orphelin en bas du panneau. */
  .nav-list > li:last-child .nav-link {
    border-bottom: 0;
  }

  /* Actions header masquees en mobile : le tel est deja repris dans la barre de
     contact fixe (bas) et dans le panneau nav, le CTA rdv dans le burger + le
     hero. On ne garde que le logo et le burger dans la barre du header. */
  .header-cta {
    display: none;
  }

  /* Reaffiche le tel en clair dans le panneau nav mobile */
  .nav-phone-item {
    display: block;
  }

  .nav .nav-link[href^="tel:"] {
    color: var(--copper-light);
    font-weight: 600;
    white-space: normal;
  }

  /* Reserve l'espace de la barre de contact fixe pour qu'elle ne masque
     jamais le bas du contenu (hero, footer). Hauteur barre ~64px + air. */
  body {
    padding-bottom: calc(64px + var(--space-4));
  }

  .hero h1 {
    max-width: none;
  }

  .hero-actions,
  .expert-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn,
  .expert-actions .btn {
    width: 100%;
  }

  /* Section Tiffany, mobile : la video passe AVANT la description (order: -1
     sur le portrait, qui suit .expert-content dans le DOM). La grille est en
     1 colonne sous 1024px, donc order s'applique. */
  #expert-tiffany .expert-portrait {
    order: -1;
  }

  /* Section Tiffany, mobile : les 3 boutons sur UNE seule ligne (Ecrire,
     Appeler, Instagram). Les libelles sont raccourcis (le " Tiffany" est masque,
     cf. .btn-name-extra) pour que les deux CTA texte tiennent cote a cote ;
     chacun prend une part egale (flex:1), le bouton rond Instagram garde ses
     44px (flex:none). */
  #expert-tiffany .expert-actions {
    flex-flow: row nowrap;
    align-items: stretch;
  }

  #expert-tiffany .expert-actions .btn {
    flex: 1;
    width: auto;
    min-width: 0;
    padding-inline: var(--space-3);
  }

  /* Masque " Tiffany" dans les libelles des CTA en mobile (place insuffisante
     pour les 3 boutons sur une ligne). Reste visible des 768px. */
  #expert-tiffany .btn-name-extra {
    display: none;
  }

  .cta-break {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-break-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-actions .btn {
    width: 100%;
  }
}

/* Petit mobile */
@media (max-width: 380px) {
  .mobile-contact-bar {
    grid-template-columns: 1fr 1fr 1fr;
  }
}