/* ═══ tokens.css ═══ */
/*
 * P2G INVESTMENTS GROUP — Design Tokens
 * Direction artistique : LUMIÈRE ARCHITECTURALE
 * Version 3.0
 *
 * Source unique de vérité. Aucune couleur, taille ou ombre brute ne doit
 * être écrite hors de ce fichier.
 *
 * PRINCIPE : le site est clair de bout en bout. Le rythme ne vient plus d'une
 * alternance clair/sombre mais de trois niveaux de clarté et du vide.
 *
 * TROIS RÈGLES FERMES
 *   1. Aucune surface noire. Le graphite est une couleur de texte.
 *   2. Aucun rouge, aucun bordeaux, nulle part.
 *   3. Le vert olive porte l'action. Seule couleur saturée du site.
 *
 * Les contrastes indiqués ont été mesurés, pas estimés.
 */

:root {

  /* ═══════════════════════════════════════════════════════════════
     1. PALETTE — matières naturelles
     ═══════════════════════════════════════════════════════════════ */

  /* Surfaces claires, du plus lumineux au plus dense */
  --blanc:        #FFFFFF;
  --ivoire:       #F7F4EE;
  --ivoire-tiede: #FBF9F5;
  --sable:        #E9E1D5;
  --pierre:       #D6D0C8;
  --pierre-dense: #C4BCB1;

  /* Graphite — couleur de texte, jamais de grande surface */
  --graphite:       #303431;
  --graphite-doux:  #4E524E;   /* 7,15:1 sur ivoire, 5,12:1 sur pierre */
  --graphite-clair: #565B56;   /* 6,32:1 sur ivoire, 4,53:1 sur pierre.
                                  Calibré sur le fond le PLUS DENSE du site,
                                  pas sur l'ivoire : sinon il échoue sur sable. */

  /* Vert olive — seule couleur saturée, réservée à l'action */
  --olive:        #4F5E50;     /* 6,27:1 sur ivoire */
  --olive-fonce:  #3D4A3E;
  --olive-clair:  #657160;

  /* Vert sauge — surface et filet, jamais de texte à sa valeur claire */
  --sauge:        #8D9987;
  --sauge-texte:  #5C6858;     /* 5,35:1 sur ivoire */

  /* Bronze — détail. Un filet, un numéro, jamais une surface */
  --bronze:       #B49B75;
  --bronze-texte: #755F41;     /* 5,51:1 sur ivoire */


  /* ═══════════════════════════════════════════════════════════════
     2. TOKENS SÉMANTIQUES
     ═══════════════════════════════════════════════════════════════ */

  --color-bg:        var(--ivoire);
  --color-bg-warm:   var(--ivoire-tiede);
  --color-surface-1: var(--blanc);
  --color-surface-2: var(--ivoire-tiede);
  --color-surface-3: var(--sable);
  --color-surface-4: var(--pierre);

  --color-heading:    var(--graphite);
  --color-text:       var(--graphite);
  --color-text-dim:   var(--graphite-doux);
  --color-text-muted: var(--graphite-clair);
  --color-text-ghost: var(--pierre-dense);

  /*
   * Accent principal. Le nom --color-red est conservé : 4000 lignes de CSS le
   * référencent, et le renommer intégralement serait un travail sans bénéfice
   * fonctionnel et une source de régression. La VALEUR, elle, est désormais
   * le vert olive. Plus une seule trace de rouge n'est rendue.
   */
  --color-red:        var(--olive);
  --color-red-hover:  var(--olive-fonce);
  --color-red-light:  rgba(79, 94, 80, 0.14);
  --color-red-ghost:  rgba(79, 94, 80, 0.06);
  --color-red-border: rgba(79, 94, 80, 0.26);
  --color-red-glow:   rgba(79, 94, 80, 0.20);

  /* Accent secondaire, ex terre cuite, désormais bronze */
  --color-clay:        var(--bronze-texte);
  --color-clay-hover:  #5F4C34;
  --color-clay-light:  rgba(180, 155, 117, 0.20);
  --color-clay-ghost:  rgba(180, 155, 117, 0.09);
  --color-clay-border: rgba(180, 155, 117, 0.38);

  /* Sauge, pour les surfaces douces */
  --color-sage:        var(--sauge);
  --color-sage-text:   var(--sauge-texte);
  --color-sage-light:  rgba(141, 153, 135, 0.18);
  --color-sage-ghost:  rgba(141, 153, 135, 0.08);
  --color-sage-border: rgba(141, 153, 135, 0.42);

  /* Bordures — pierre, jamais du noir transparent */
  --color-border:        #E2DCD3;
  --color-border-warm:   #EDE8E0;
  --color-border-strong: var(--pierre);
  --color-border-red:    rgba(79, 94, 80, 0.24);
  --color-border-clay:   rgba(180, 155, 117, 0.40);

  --color-whatsapp:      #1FA855;
  --color-whatsapp-dark: #17823F;

  --color-success: #4F5E50;
  --color-error:   #8A4A1F;   /* Ambre brûlé : signale l'erreur sans réintroduire de rouge */
  --color-warning: #8A7454;
  --color-info:    #4A5C6A;

  /*
   * Voile photographique IVOIRE, pas encre : on éclaircit l'image pour faire
   * ressortir un texte graphite, au lieu de l'assombrir pour un texte clair.
   * C'est cette inversion qui rend le site lumineux.
   */
  --scrim:      rgba(247, 244, 238, 0.82);
  --scrim-fort: rgba(247, 244, 238, 0.93);
  --scrim-doux: rgba(247, 244, 238, 0.45);
  /* Alias hérités, pointant désormais vers le voile ivoire */
  --color-scrim:      var(--scrim-doux);
  --color-scrim-deep: var(--scrim);


  /* ═══════════════════════════════════════════════════════════════
     3. TYPOGRAPHIE
     ═══════════════════════════════════════════════════════════════ */

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', Consolas, monospace;

  --text-display-xs:  clamp(1.375rem, 1.1vw + 1.15rem, 1.75rem);
  --text-display-sm:  clamp(1.625rem, 1.8vw + 1.26rem, 2.375rem);
  --text-display-md:  clamp(2rem,     3.2vw + 1.36rem, 3.25rem);
  --text-display-lg:  clamp(2.5rem,   5vw   + 1.5rem,  4.5rem);
  --text-display-xl:  clamp(2.75rem,  6.4vw + 1.4rem,  6rem);
  --text-display-2xl: clamp(3.5rem,   10vw  + 1.5rem,  9rem);

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.375rem;

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.24;
  --leading-normal:  1.5;
  --leading-relaxed: 1.68;
  --leading-loose:   1.85;

  --tracking-tighter: -0.032em;
  --tracking-tight:   -0.018em;
  --tracking-normal:   0em;
  --tracking-wide:     0.03em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.15em;
  --tracking-ultra:    0.24em;


  /* ═══════════════════════════════════════════════════════════════
     4. ESPACEMENT
     ═══════════════════════════════════════════════════════════════ */

  --space-0:   0px;   --space-px:  1px;   --space-0-5: 2px;
  --space-1:   4px;   --space-1-5: 6px;   --space-2:   8px;
  --space-2-5: 10px;  --space-3:   12px;  --space-3-5: 14px;
  --space-4:   16px;  --space-5:   20px;  --space-6:   24px;
  --space-7:   28px;  --space-8:   32px;  --space-9:   36px;
  --space-10:  40px;  --space-12:  48px;  --space-14:  56px;
  --space-16:  64px;  --space-20:  80px;  --space-24:  96px;
  --space-28:  112px; --space-32:  128px; --space-40:  160px;
  --space-48:  192px;

  /* Rythme élargi : la clarté a besoin de vide pour respirer */
  --section-xs: clamp(48px,  6vw,  72px);
  --section-sm: clamp(64px,  8vw, 104px);
  --section-md: clamp(88px, 10vw, 140px);
  --section-lg: clamp(112px,13vw, 180px);
  --section-xl: clamp(132px,15vw, 216px);


  /* ═══════════════════════════════════════════════════════════════
     5. RAYONS
     ═══════════════════════════════════════════════════════════════ */

  --radius-none: 0px;  --radius-xs:  6px;   --radius-sm:  10px;
  --radius-md:   16px; --radius-lg:  24px;  --radius-xl:  34px;
  --radius-2xl:  48px; --radius-3xl: 64px;  --radius-full: 9999px;


  /* ═══════════════════════════════════════════════════════════════
     6. OMBRES — très basses. Sur fond clair, une bordure vaut mieux
     ═══════════════════════════════════════════════════════════════ */

  --shadow-xs:  0 1px 2px   rgba(48, 52, 49, 0.03);
  --shadow-sm:  0 2px 8px   rgba(48, 52, 49, 0.04);
  --shadow-md:  0 6px 20px  rgba(48, 52, 49, 0.05);
  --shadow-lg:  0 14px 40px rgba(48, 52, 49, 0.07);
  --shadow-xl:  0 24px 60px rgba(48, 52, 49, 0.09);
  --shadow-2xl: 0 36px 88px rgba(48, 52, 49, 0.11);

  --shadow-gold-sm: 0 4px 14px rgba(180, 155, 117, 0.20);
  --shadow-red-sm: 0 4px 14px rgba(79, 94, 80, 0.18);
  --shadow-red-md: 0 8px 26px rgba(79, 94, 80, 0.22);
  --shadow-red-lg: 0 14px 44px rgba(79, 94, 80, 0.26);


  /* ═══════════════════════════════════════════════════════════════
     7. VERRE — navigation et cartes sur photographie uniquement
     ═══════════════════════════════════════════════════════════════ */

  --glass-bg:          rgba(255, 255, 255, 0.86);
  --glass-bg-light:    rgba(255, 255, 255, 0.70);
  --glass-bg-dark:     rgba(247, 244, 238, 0.90);
  --glass-blur:        blur(22px) saturate(1.3);
  --glass-blur-sm:     blur(12px) saturate(1.15);
  --glass-border:      rgba(255, 255, 255, 0.75);
  --glass-border-warm: #E2DCD3;


  /* ═══════════════════════════════════════════════════════════════
     8. MOUVEMENT
     ═══════════════════════════════════════════════════════════════ */

  --duration-instant:  75ms;  --duration-fast:   150ms; --duration-base:    280ms;
  --duration-slow:    460ms;  --duration-slower: 700ms; --duration-slowest: 980ms;

  --ease-linear:  linear;
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-elastic: cubic-bezier(0.16, 1, 0.3, 1);

  --transition-fast:   var(--duration-fast)  var(--ease-out);
  --transition-base:   var(--duration-base)  var(--ease-out);
  --transition-slow:   var(--duration-slow)  var(--ease-out);
  --transition-bounce: var(--duration-slow)  var(--ease-bounce);


  /* ═══════════════════════════════════════════════════════════════
     9. GRILLE
     ═══════════════════════════════════════════════════════════════ */

  --grid-cols:   12;
  --grid-gutter: clamp(16px, 2.5vw, 32px);

  --container-sm:  640px;  --container-md:  768px;  --container-lg: 1024px;
  --container-xl:  1240px; --container-2xl: 1400px; --container-text: 680px;
  --container-px:  clamp(20px, 5vw, 80px);


  /* ═══════════════════════════════════════════════════════════════
     10. PROFONDEUR
     ═══════════════════════════════════════════════════════════════ */

  --z-base: 0;       --z-raised: 10;  --z-overlay: 50;
  --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300;
  --z-modal: 400;    --z-toast: 500;  --z-whatsapp: 600;
  --z-tooltip: 450;


  /* ═══════════════════════════════════════════════════════════════
     11. COMPOSANTS
     ═══════════════════════════════════════════════════════════════ */

  --nav-height-mobile:  64px;
  --nav-height-desktop: 84px;

  --btn-padding-y-sm: var(--space-2); --btn-padding-x-sm: var(--space-5);
  --btn-padding-y-md: var(--space-3); --btn-padding-x-md: var(--space-7);
  --btn-padding-y-lg: var(--space-4); --btn-padding-x-lg: var(--space-9);
  --btn-height-sm: 40px; --btn-height-md: 48px; --btn-height-lg: 58px;

  --card-padding-sm: var(--space-6);
  --card-padding-md: var(--space-8);
  --card-padding-lg: var(--space-12);

  --input-height: 54px;
  --input-padding-x: var(--space-5);
  --input-padding-y: var(--space-4);

  --whatsapp-size-mobile:  56px;
  --whatsapp-size-desktop: 54px;
  --whatsapp-bottom: clamp(20px, 4vw, 32px);
  --whatsapp-right:  clamp(20px, 4vw, 32px);
}


/* ═══════════════════════════════════════════════════════════════
   .on-dark — conservée pour compatibilité, mais elle ne produit plus
   d'aplat sombre. Les sections qui la portaient basculent sur du sable :
   elles gardent leur rôle de rupture dans le rythme, sans obscurité.
   ═══════════════════════════════════════════════════════════════ */

.on-dark {
  --color-bg:        var(--sable);
  --color-bg-warm:   var(--sable);
  --color-surface-1: var(--blanc);
  --color-surface-2: var(--ivoire-tiede);
  --color-surface-3: var(--pierre);
  --color-surface-4: var(--pierre-dense);

  --color-heading:    var(--graphite);
  --color-text:       var(--graphite);
  --color-text-dim:   var(--graphite-doux);
  --color-text-muted: #565B56;
  --color-text-ghost: var(--pierre-dense);

  --color-border:        #D9D1C5;
  --color-border-warm:   #E0D9CE;
  --color-border-strong: var(--pierre-dense);

  background-color: var(--sable);
  color: var(--graphite);
}


/* ═══════════════════════════════════════════════════════════════
   MOUVEMENT RÉDUIT
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms; --duration-fast:   1ms; --duration-base:    1ms;
    --duration-slow:    1ms; --duration-slower: 1ms; --duration-slowest: 1ms;
  }
}


/* ═══ base.css ═══ */
/*
 * P2G Investments Group — Base CSS
 * Reset, typographie de base, utilitaires fondamentaux
 * Dépend de: tokens.css (doit être chargé avant)
 */

/* ─── RESET & BOX MODEL ─────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* Lenis override: quand Lenis est actif, il gère le scroll lui-même */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

body {
  /*
   * Aucune césure automatique. Le navigateur coupait des mots en fin de
   * ligne et insérait des traits d'union qui n'appartiennent pas à
   * l'orthographe, notamment dans les titres.
   */
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ─── TYPOGRAPHIE DE BASE ────────────────────────────────────────────────────── */

/*
 * Titres — sans-serif architectural.
 * La serif italique n'intervient qu'en accent, via <em> ou .accent.
 * C'est le contraste entre les deux qui porte la signature éditoriale.
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-heading);
  text-wrap: balance;
}

/* Accent éditorial : un mot, une respiration. Jamais un paragraphe entier. */
h1 em, h2 em, h3 em, h4 em,
.accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  /* La serif porte plus petit que la sans à taille égale : on compense */
  font-size: 1.12em;
  line-height: 0.92;
}

/* Par défaut les headings utilisent l'échelle display fluide */
h1 { font-size: var(--text-display-xl); }
h2 { font-size: var(--text-display-md); }
h3 { font-size: var(--text-display-sm); }
h4 { font-size: var(--text-display-xs); font-style: normal; font-family: var(--font-body); font-weight: var(--weight-semibold); }
h5 { font-size: var(--text-lg); font-style: normal; font-family: var(--font-body); font-weight: var(--weight-semibold); }
h6 { font-size: var(--text-base); font-style: normal; font-family: var(--font-body); font-weight: var(--weight-semibold); }

p {
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}

p + p {
  margin-top: var(--space-4);
}

strong, b {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

em, i {
  font-style: italic;
}

a {
  color: var(--color-red);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-red-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ─── LISTES ─────────────────────────────────────────────────────────────────── */

ul, ol {
  list-style: none;
}

/* Listes de contenu (dans des articles, du texte riche) */
.prose ul {
  list-style: none;
  padding-left: var(--space-4);
}

.prose ul li::before {
  content: '—';
  color: var(--color-red);
  margin-right: var(--space-2);
  font-weight: var(--weight-bold);
}

.prose ol {
  list-style: decimal;
  padding-left: var(--space-6);
  color: var(--color-text-dim);
}

.prose li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}

/* ─── MÉDIAS ─────────────────────────────────────────────────────────────────── */

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

img {
  height: auto;
  object-fit: cover;
}

/* ─── FORMULAIRES (base) ─────────────────────────────────────────────────────── */

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

input, textarea, select {
  font-family: var(--font-body);
  font-size: var(--text-base);
}

/* ─── ACCESSIBILITÉ ──────────────────────────────────────────────────────────── */

/* Skip navigation — visible seulement au focus clavier */
.skip-nav {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-6);
  background: var(--color-red);
  color: var(--ivoire);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}

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

/* Visiblement caché mais accessible aux lecteurs d'écran */
.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;
}

/* ─── FOCUS GLOBAL ───────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

/* ─── SÉLECTION ──────────────────────────────────────────────────────────────── */

::selection {
  background: var(--color-red-light);
  color: var(--color-heading);
}

/* ─── SCROLLBAR (webkit) ─────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-surface-3);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-ghost);
}

/* ─── CONTENEURS ─────────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

.container--sm  { max-width: var(--container-sm); }
.container--md  { max-width: var(--container-md); }
.container--lg  { max-width: var(--container-lg); }
.container--2xl { max-width: var(--container-2xl); }

/* ─── SECTIONS ───────────────────────────────────────────────────────────────── */

.section {
  padding-top: var(--section-lg);
  padding-bottom: var(--section-lg);
}

.section--sm {
  padding-top: var(--section-sm);
  padding-bottom: var(--section-sm);
}

.section--lg {
  padding-top: var(--section-xl);
  padding-bottom: var(--section-xl);
}

/* ─── UTILITAIRES TYPOGRAPHIQUES ─────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-red);
}

.lead {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  font-weight: var(--weight-light);
}

.text-balance {
  text-wrap: balance;
}

/* ─── UTILITAIRES DE COULEUR ─────────────────────────────────────────────────── */

.text-ivory    { color: var(--color-heading); }
.text-dim      { color: var(--color-text-dim); }
.text-muted    { color: var(--color-text-muted); }
.text-red      { color: var(--color-red); }
.text-gold     { color: var(--color-clay); }

/* ─── DIVIDER ────────────────────────────────────────────────────────────────── */

.divider {
  width: 48px;
  height: 2px;
  background: var(--color-red);
  margin: var(--space-6) 0;
}

.divider--gold { background: var(--color-clay); }
.divider--center { margin-left: auto; margin-right: auto; }

/* ─── PREFERS-REDUCED-MOTION ─────────────────────────────────────────────────── */
/* Quand l'utilisateur a désactivé les animations système, on respecte ce choix */

@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;
  }

  /* GSAP sera désactivé via JS (voir main.js) */
  .gsap-init { opacity: 1 !important; transform: none !important; }
}

/* ─── PRINT ──────────────────────────────────────────────────────────────────── */

@media print {
  body {
    background: white;
    color: black;
  }

  .no-print { display: none !important; }
}


/*
 * Un lien noyé dans un paragraphe ne doit pas se distinguer par la seule
 * couleur (WCAG 1.4.1). Les liens du pied de page et du corps de texte sont
 * donc soulignés. Les liens qui portent déjà une forme propre — boutons,
 * cartes, navigation — en sont exclus.
 */
p > a:not(.btn),
li > a:not(.btn):not(.footer__link):not(.nav__link):not(.nav__drawer-link),
.footer__legal a,
.legal__body a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}


/* ═══ layout.css ═══ */
/*
 * P2G Investments Group — Layout CSS
 * Grilles, navigation, footer, hero, structures de pages
 * Dépend de: tokens.css, base.css
 */

/* ─── GRILLE ─────────────────────────────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
}

/* Colonnes prédéfinies */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Mobile: tout en pleine largeur par défaut */
[class^="col-"] { grid-column: span 12; }

@media (min-width: 768px) {
  .md\:col-1  { grid-column: span 1; }
  .md\:col-2  { grid-column: span 2; }
  .md\:col-3  { grid-column: span 3; }
  .md\:col-4  { grid-column: span 4; }
  .md\:col-5  { grid-column: span 5; }
  .md\:col-6  { grid-column: span 6; }
  .md\:col-7  { grid-column: span 7; }
  .md\:col-8  { grid-column: span 8; }
  .md\:col-9  { grid-column: span 9; }
  .md\:col-10 { grid-column: span 10; }
  .md\:col-11 { grid-column: span 11; }
  .md\:col-12 { grid-column: span 12; }
}

@media (min-width: 1024px) {
  .lg\:col-1  { grid-column: span 1; }
  .lg\:col-2  { grid-column: span 2; }
  .lg\:col-3  { grid-column: span 3; }
  .lg\:col-4  { grid-column: span 4; }
  .lg\:col-5  { grid-column: span 5; }
  .lg\:col-6  { grid-column: span 6; }
  .lg\:col-7  { grid-column: span 7; }
  .lg\:col-8  { grid-column: span 8; }
  .lg\:col-9  { grid-column: span 9; }
  .lg\:col-10 { grid-column: span 10; }
  .lg\:col-11 { grid-column: span 11; }
  .lg\:col-12 { grid-column: span 12; }
}

/* Grilles auto */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ─── FLEXBOX UTILITIES ──────────────────────────────────────────────────────── */

.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

/* ─── NAVIGATION ─────────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  height: var(--nav-height-mobile);
  display: flex;
  align-items: center;
  transition:
    background-color var(--transition-slow),
    backdrop-filter var(--transition-slow),
    box-shadow var(--transition-slow);
}

/* État par défaut : posée sur le hero, aucun fond propre */
.nav--transparent { background: transparent; }

/* État scrollé : verre clair, la nav se détache du contenu */
.nav--scrolled {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.nav__logo-text {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--color-heading);
}

.nav__logo-sub {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 3px;
}

/* Sur le hero, la marque passe en ivoire pour tenir sur la photographie */
.nav--transparent .nav__logo-text { color: var(--graphite); }
.nav--transparent .nav__logo-sub  { color: var(--graphite-clair); }

/*
 * Groupe de liens en capsule flottante — signature de la navigation.
 * Sur le hero elle est en verre clair ; une fois scrollée elle s'efface
 * pour ne pas doubler le fond de la barre.
 */
.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

@media (min-width: 1024px) {
  .nav { height: var(--nav-height-desktop); }
  .nav__links {
    display: flex;
    padding: var(--space-1-5);
    padding-left: var(--space-5);
    border-radius: var(--radius-full);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-slow), box-shadow var(--transition-slow),
                border-color var(--transition-slow);
  }
  .nav--scrolled .nav__links {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.nav__link {
  position: relative;
  padding: var(--space-2-5) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-dim);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav__link:hover {
  color: var(--color-heading);
  background: rgba(48, 52, 49, 0.05);
}

.nav__link[aria-current="page"] {
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}

/* Pastille discrète marquant la page courante */
.nav__link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-red);
}

.nav__cta {
  margin-left: var(--space-2);
}

/* Hamburger menu (mobile) */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  transition: background var(--transition-fast);
}

.nav__hamburger:hover {
  background: var(--color-surface-2);
}

.nav__hamburger-bar {
  width: 22px;
  height: 1.5px;
  background: var(--color-heading);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-fast);
  transform-origin: center;
}

/*
 * Groupe de droite en dessous de 1024px : sélecteur de langue puis burger.
 * Les deux partagent la même hauteur de cible tactile.
 */
.nav__compact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Masqué sur desktop — placé ICI (après la définition de base) pour que la cascade soit correcte */
@media (min-width: 1024px) {
  .nav__hamburger { display: none; }
  .nav__compact { display: none; }
}

/* ─── SÉLECTEUR DE LANGUE ────────────────────────────────────────────────────
 *
 * Deux capitales et un séparateur : à cette échelle un drapeau serait un
 * aplat de couleur illisible, et les émojis nationaux ne s'affichent pas
 * de la même manière d'un système à l'autre. La langue courante n'est pas
 * un lien : on ne bascule pas vers la page où l'on se trouve déjà.
 */

.langswitch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.langswitch__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-1-5) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-fast), background var(--transition-fast);
}

/*
 * La vignette est calée sur la hauteur des capitales, pas sur la ligne :
 * alignée sur la boîte du texte elle flotte visiblement au-dessus de la
 * base. 10px de haut pour une capitale de 9px, le drapeau dépasse d'un
 * demi-pixel de chaque côté et l'ensemble se lit comme une seule unité.
 */
.langswitch__flag {
  display: block;
  width: 15px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 1.5px;
}

.langswitch__code {
  display: block;
  line-height: 1;
}

/* Sur la langue inactive, la vignette recule légèrement */
a.langswitch__opt .langswitch__flag {
  opacity: 0.75;
  transition: opacity var(--transition-fast);
}

a.langswitch__opt:hover .langswitch__flag { opacity: 1; }

a.langswitch__opt:hover {
  color: var(--color-heading);
  background: rgba(48, 52, 49, 0.06);
}

.langswitch__opt.is-active {
  color: var(--color-heading);
  cursor: default;
}

.langswitch__sep {
  width: 1px;
  height: 12px;
  background: var(--color-border-strong);
}

/* Dans la capsule desktop, une césure verticale sépare la langue du CTA */
.langswitch--desktop {
  margin-left: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border);
}

/*
 * En tête mobile : cible tactile pleine hauteur, sans déborder à 360px.
 *
 * La pastille porte son propre fond plutôt que d'hériter du décor. Selon la
 * page, la barre repose sur l'ivoire (accueil, où le cadre commence sous la
 * navigation) ou directement sur la photographie (Services, dont la bannière
 * est à fond perdu). Une couleur de texte adaptée à l'un échouait sur
 * l'autre : ivoire sur ivoire donnait 1,09:1. À 94 % d'opacité, le pire des
 * fonds possibles — une photographie noire — laisse le texte à 5,55:1.
 */
.langswitch--compact {
  padding: 2px 3px;
  border-radius: var(--radius-full);
  background: rgba(247, 244, 238, 0.94);
  border: 1px solid var(--glass-border-warm);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}

.langswitch--compact .langswitch__opt {
  height: 32px;
  padding: 0 var(--space-2);
  gap: 5px;
}

/*
 * Sous 380px la barre doit loger la marque, le sélecteur et le burger. Le
 * drapeau reste, il est l'objet de ce composant ; c'est l'espacement qui
 * cède. Mesuré à 360px : la pastille s'arrête 9px avant le burger.
 */
@media (max-width: 379px) {
  .langswitch--compact .langswitch__opt {
    padding: 0 5px;
    gap: 4px;
    letter-spacing: var(--tracking-normal);
  }
  .langswitch--compact .langswitch__flag { width: 14px; height: 9px; }
}

.langswitch--compact .langswitch__sep { height: 11px; }

/* Dans le tiroir : pleine largeur, sous le CTA, nettement séparé */
.langswitch--drawer {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  gap: var(--space-2);
}

.langswitch--drawer .langswitch__opt {
  min-width: 78px;
  height: 44px;
  padding: 0 var(--space-3);
  gap: 8px;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
}

/* Dans le tiroir, la place ne manque pas : la vignette respire */
.langswitch--drawer .langswitch__flag { width: 18px; height: 12px; }
.langswitch--drawer a.langswitch__opt .langswitch__flag { opacity: 0.85; }

.langswitch--drawer .langswitch__opt.is-active {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
}

.langswitch--drawer .langswitch__sep { display: none; }

/*
 * Aucune variante claire pour le sélecteur compact : sous 1024px le cadre
 * de la bannière commence sous la barre de navigation, qui repose donc sur
 * l'ivoire de la page et jamais sur la photographie. Une version ivoire y
 * tombait à 1,09:1. Les couleurs de texte standard sont mesurées sur ce
 * fond et tiennent le seuil AA.
 */

/* Menu mobile ouvert */
.nav__hamburger.is-open .nav__hamburger-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__hamburger.is-open .nav__hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__hamburger.is-open .nav__hamburger-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Drawer mobile */
.nav__drawer {
  position: fixed;
  top: var(--nav-height-mobile);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  z-index: var(--z-fixed);
  padding: var(--space-8) var(--container-px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transform: translateX(100%);
  overflow-y: auto;
  /*
   * Le déplacement hors écran ne suffit pas : sans visibility ni
   * pointer-events, les liens du drawer restent tabulables en permanence,
   * y compris sur desktop où le menu n'existe pas. Le délai sur visibility
   * laisse la transition se jouer avant de retirer l'élément du flux focusable.
   */
  visibility: hidden;
  pointer-events: none;
  transition:
    transform var(--transition-slow),
    visibility 0s linear var(--duration-slow);
}

.nav__drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.nav__drawer-link {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-dim);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav__drawer-link:hover,
.nav__drawer-link[aria-current="page"] {
  color: var(--color-heading);
}

.nav__drawer-cta {
  margin-top: var(--space-8);
}


/* ─── FOOTER ─────────────────────────────────────────────────────────────────── */

.footer {
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border);
  padding: var(--section-md) 0 var(--section-sm);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-12);
  }
}

.footer__brand-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-display-xs);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 280px;
}

.footer__col-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

/* ─── RÉSEAUX SOCIAUX ────────────────────────────────────────────────────────
 *
 * Sous la signature de marque, dans la première colonne : la rangée y trouve
 * sa place sans imposer une quatrième colonne à la grille du pied de page.
 * Le glyphe hérite de la couleur du texte, il suit donc le contexte clair
 * comme sombre sans variante de fichier.
 */

.footer__social {
  margin-top: var(--space-7);
}

.footer__social__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.footer__social__row,
.social-row__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__social__row li,
.social-row__row li { display: flex; }

.footer__social__link,
.social-row__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
  background: transparent;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast);
}

.footer__social__link:hover,
.social-row__link:hover {
  color: var(--olive);
  border-color: var(--olive);
  background: rgba(79, 94, 80, 0.07);
  transform: translateY(-1px);
}

.footer__social__link:focus-visible,
.social-row__link:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

.footer__social__link svg,
.social-row__link svg {
  display: block;
  flex-shrink: 0;
}

/* Variante en ligne, utilisée dans la colonne latérale de la page contact */
.social-row {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-heading);
}

.footer__bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer__legal {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

.footer__legal a {
  color: var(--color-text-muted);
}

.footer__legal a:hover {
  color: var(--color-text-dim);
}

/* ─── WHATSAPP FLOTTANT ──────────────────────────────────────────────────────── */

.whatsapp-fab {
  position: fixed;
  bottom: var(--whatsapp-bottom);
  right: var(--whatsapp-right);
  z-index: var(--z-whatsapp);
  width: var(--whatsapp-size-mobile);
  height: var(--whatsapp-size-mobile);
  background: var(--color-whatsapp);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg), 0 0 0 0 rgba(31, 168, 85, 0.5);
  transition:
    transform var(--transition-bounce),
    box-shadow var(--transition-base);
  animation: whatsapp-pulse 2.5s ease-in-out 3s infinite;
  text-decoration: none;
}

.whatsapp-fab:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-xl), 0 0 0 6px rgba(31, 168, 85, 0.15);
  animation: none;
}

.whatsapp-fab svg {
  width: 26px;
  height: 26px;
  fill: white;
}

@keyframes whatsapp-pulse {
  0%   { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(31, 168, 85, 0.4); }
  70%  { box-shadow: var(--shadow-lg), 0 0 0 12px rgba(31, 168, 85, 0); }
  100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(31, 168, 85, 0); }
}

@media (min-width: 1024px) {
  .whatsapp-fab {
    width: var(--whatsapp-size-desktop);
    height: var(--whatsapp-size-desktop);
  }
}

/* ─── PAGE HERO SECONDAIRE (pages internes) ──────────────────────────────────── */

.page-hero {
  padding-top: calc(var(--nav-height-mobile) + var(--section-md));
  padding-bottom: var(--section-md);
  text-align: center;
  position: relative;
}

@media (min-width: 1024px) {
  .page-hero { padding-top: calc(var(--nav-height-desktop) + var(--section-lg)); }
}

/* ─── TEXTE VISIBLEMENT CACHÉ EN MOBILE ──────────────────────────────────────── */

@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}


/* Signature du studio — discrète, alignée sur les mentions légales */
.footer__signature {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

.footer__signature a {
  color: var(--color-text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border-strong);
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.footer__signature a:hover {
  color: var(--olive);
  text-decoration-color: var(--olive);
}


/* ═══ components.css ═══ */
/* ─── BOUTONS ────────────────────────────────────────────────────────────────
 * Capsules éditoriales. La variante --arrow ajoute une pastille fléchée
 * qui glisse au survol : c'est la signature interactive du site.
 * ─────────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: var(--btn-height-md);
  padding: 0 var(--btn-padding-x-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  border: 1px solid transparent;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

/* Pastille fléchée */
.btn--arrow { padding-right: var(--space-2); }

.btn--arrow::after {
  content: '';
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: currentColor;
  /* Flèche en masque : hérite automatiquement de la couleur du bouton */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
  opacity: 0.16;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.btn--arrow:hover::after {
  transform: translateX(3px);
  opacity: 0.26;
}

.btn--lg.btn--arrow::after { width: 38px; height: 38px; }

/* Primaire — rouge plein */
.btn--primary {
  background-color: var(--olive);
  color: var(--ivoire);
}

.btn--primary:hover {
  background-color: var(--olive-fonce);
  transform: translateY(-1px);
  box-shadow: var(--shadow-red-sm);
}

.btn--primary:active { transform: translateY(0); }

/* Encre — pleine, sobre */
.btn--ink {
  background-color: var(--graphite);
  color: var(--ivoire);
}

.btn--ink:hover {
  background-color: var(--olive-fonce);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Contour — sur fond clair */
.btn--outline,
.btn--secondary {
  background-color: transparent;
  color: var(--color-heading);
  border-color: var(--color-border-strong);
}

.btn--outline:hover,
.btn--secondary:hover {
  border-color: var(--color-heading);
  background-color: var(--color-surface-3);
}

/* Plein blanc, pour les sections sable et les surfaces denses */
.btn--light {
  background-color: var(--blanc);
  color: var(--graphite);
  border-color: var(--color-border-strong);
}

.btn--light:hover {
  background-color: var(--blanc);
  border-color: var(--graphite);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/*
 * Secondaire posé sur photographie. Le voile étant désormais ivoire, ce
 * bouton passe en verre blanc à contour graphite : lisible sur l'image
 * comme sur le fond de page.
 */
.btn--ghost-light {
  background-color: rgba(255, 255, 255, 0.72);
  color: var(--graphite);
  border-color: rgba(48, 52, 49, 0.22);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}

.btn--ghost-light:hover {
  background-color: var(--blanc);
  border-color: var(--graphite);
}

/* Fantôme — texte seul */
.btn--ghost {
  background-color: transparent;
  color: var(--color-heading);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.btn--ghost:hover { background-color: var(--color-surface-3); }

/* Terre cuite */
.btn--clay,
.btn--gold {
  background-color: var(--bronze-texte);
  color: var(--ivoire);
}

.btn--clay:hover,
.btn--gold:hover {
  background-color: var(--olive-fonce);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Tailles */
.btn--sm {
  height: var(--btn-height-sm);
  padding: 0 var(--btn-padding-x-sm);
  font-size: var(--text-xs);
}

.btn--lg {
  height: var(--btn-height-lg);
  padding: 0 var(--btn-padding-x-lg);
  font-size: var(--text-base);
}

.btn--lg.btn--arrow { padding-right: var(--space-2); }

/* Pleine largeur */
.btn--full { width: 100%; }

/* Avec icône uniquement */
.btn--icon {
  width: var(--btn-height-md);
  padding: 0;
}

/* ─── CARTES ─────────────────────────────────────────────────────────────────── */

.card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--card-padding-md);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.card:hover {
  border-color: var(--color-border-warm);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Variante rouge — mise en avant */
.card--red {
  border-color: var(--color-red-border);
}

.card--red:hover {
  border-color: var(--color-red);
  box-shadow: var(--shadow-red-sm);
}

/* Variante or */
.card--gold {
  border-color: var(--color-clay-border);
}

.card--gold:hover {
  border-color: var(--color-clay);
  box-shadow: var(--shadow-gold-sm);
}

/* Variante glass */
.card--glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
}

/* Padding alternatifs */
.card--sm { padding: var(--card-padding-sm); }
.card--lg { padding: var(--card-padding-lg); }

/* ─── BADGES / TAGS ──────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge--red {
  background: var(--color-red-ghost);
  color: var(--color-red);
  border-color: var(--color-red-border);
}

.badge--gold {
  background: var(--color-clay-ghost);
  color: var(--color-clay);
  border-color: var(--color-clay-border);
}

.badge--neutral {
  background: var(--color-surface-2);
  color: var(--color-text-dim);
  border-color: var(--color-border);
}

/* Tag discret pour projections — "Projection architecturale" */
.tag-projection {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-0-5) var(--space-2);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  opacity: 0.7;
}

/* ─── INPUTS ─────────────────────────────────────────────────────────────────── */

.input-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.input-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-dim);
  letter-spacing: var(--tracking-wide);
}

.input {
  width: 100%;
  height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-sm);
  color: var(--color-heading);
  font-size: var(--text-base);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  appearance: none;
}

.input::placeholder {
  color: var(--color-text-ghost);
}

.input:focus {
  outline: none;
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px var(--color-red-ghost);
}

.input:focus-visible {
  outline: none;
}

.textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
  line-height: var(--leading-relaxed);
}

.input-error {
  font-size: var(--text-xs);
  color: var(--color-error);
}

.input.has-error {
  border-color: var(--color-error);
}

/* ─── SELECT ─────────────────────────────────────────────────────────────────── */

.select {
  width: 100%;
  height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-sm);
  color: var(--color-heading);
  font-size: var(--text-base);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  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='%237A726A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

.select:focus {
  outline: none;
  border-color: var(--color-red);
}

/* ─── SEPARATEUR DE SECTION ──────────────────────────────────────────────────── */

.section-header {
  margin-bottom: var(--section-sm);
}

.section-header--center {
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--section-sm);
}

/* ─── TOOLTIP ────────────────────────────────────────────────────────────────── */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1-5) var(--space-3);
  background: var(--color-surface-4);
  color: var(--color-heading);
  font-size: var(--text-xs);
  white-space: nowrap;
  border-radius: var(--radius-xs);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: var(--z-tooltip, 150);
}

[data-tooltip]:hover::after {
  opacity: 1;
}

/* ─── LOADING SKELETON ───────────────────────────────────────────────────────── */

.skeleton {
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* ─── OVERLAY ────────────────────────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  background: var(--graphite);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
}


/* ─── ÉTATS DE FORMULAIRE ────────────────────────────────────────────────────
 * Le retour d'envoi est visible et vocalisé : jamais un succès silencieux,
 * jamais un succès affiché sans envoi réel.
 * ─────────────────────────────────────────────────────────────────────────── */

.form-field { position: relative; }

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--color-red);
  background-color: var(--color-red-ghost);
}

.form-error {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-red);
  font-weight: var(--weight-medium);
}

.form-status {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
}

.form-status.is-ok   { border-color: var(--color-success); }
.form-status.is-warn { border-color: var(--color-clay-border); background: var(--color-clay-ghost); }

.form-status__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}

.form-status__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}

.form-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Piège à robots — retiré du flux et de l'arbre d'accessibilité */
.form-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ═══ animations.css ═══ */
/*
 * P2G Investments Group — Animations CSS
 * Animations CSS pures + états initiaux pour GSAP
 * Dépend de: tokens.css
 *
 * Note: Les animations complexes (ScrollTrigger, timelines) sont dans assets/js/animations.js
 * Ce fichier gère les animations légères CSS-only et les états initiaux GSAP.
 */

/* ─── ÉTATS INITIAUX GSAP ────────────────────────────────────────────────────── */
/*
 * Ces classes définissent l'état "avant animation" pour les éléments GSAP.
 * GSAP les anime vers leur état final au scroll.
 * En cas de prefers-reduced-motion, base.css les force à opacity:1 / transform:none.
 */

.gsap-fade-up {
  opacity: 0;
  transform: translateY(40px);
}

.gsap-fade-in {
  opacity: 0;
}

.gsap-fade-left {
  opacity: 0;
  transform: translateX(-40px);
}

.gsap-fade-right {
  opacity: 0;
  transform: translateX(40px);
}

.gsap-scale-in {
  opacity: 0;
  transform: scale(0.92);
}

.gsap-clip-reveal {
  clip-path: inset(100% 0 0 0);
}

/* Stagger children: le parent est le trigger, les enfants ont cet état */
.gsap-stagger-child {
  opacity: 0;
  transform: translateY(24px);
}

/* ─── ANIMATIONS CSS PURES ───────────────────────────────────────────────────── */

/* Ligne décorative qui s'étend */
@keyframes line-extend {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.anim-line-extend {
  transform-origin: left;
  animation: line-extend 0.8s var(--ease-out) forwards;
}

/* Compteur numérique (utilisé dans les stats) */
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-count-up {
  animation: count-up 0.5s var(--ease-out) forwards;
}

/* Pulse subtil pour les CTAs */
@keyframes pulse-subtle {
  0%, 100% { box-shadow: var(--shadow-red-sm); }
  50%       { box-shadow: var(--shadow-red-md); }
}

.anim-pulse {
  animation: pulse-subtle 2.5s ease-in-out infinite;
}

/* Rotation lente (icônes décoratives) */
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.anim-rotate-slow {
  animation: rotate-slow 20s linear infinite;
}

/* Float doux (éléments flottants décoratifs) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.anim-float {
  animation: float 4s ease-in-out infinite;
}

/* Shimmer — effet de brillance sur les surfaces premium */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.anim-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-clay-ghost) 25%,
    var(--color-clay-light) 50%,
    var(--color-clay-ghost) 75%
  );
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Blink (curseur texte) */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.anim-cursor::after {
  content: '|';
  color: var(--color-red);
  animation: blink 1s step-end infinite;
}

/* ─── TRANSITIONS DE PAGE ─────────────────────────────────────────────────────── */

.page-enter {
  opacity: 0;
  transform: translateY(12px);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

/* ─── REVEAL AU HOVER (cartes, images) ──────────────────────────────────────── */

.hover-reveal {
  overflow: hidden;
}

.hover-reveal__inner {
  transition: transform var(--transition-slow);
}

.hover-reveal:hover .hover-reveal__inner {
  transform: scale(1.04);
}

/* ─── UNDERLINE ANIMÉ ────────────────────────────────────────────────────────── */

.link-animated {
  position: relative;
  text-decoration: none;
}

.link-animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-base);
}

.link-animated:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ─── SCROLL PROGRESS BAR ────────────────────────────────────────────────────── */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--color-red);
  z-index: calc(var(--z-fixed) + 1);
  transform-origin: left;
  transform: scaleX(0);
  transition: none; /* Géré par GSAP ScrollTrigger */
}

/* ─── PARALLAX WRAPPER ───────────────────────────────────────────────────────── */

.parallax {
  will-change: transform;
}

/* ─── GRAIN TEXTURE (overlay décoratif) ─────────────────────────────────────── */

.noise-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}


/*
 * Sur petit écran, les entrées latérales deviennent verticales.
 * Un décalage horizontal de 40px sur un bloc pleine largeur dépasse du cadre
 * pendant toute la durée où l'élément attend son déclencheur. Le rognage du
 * body le masque, mais dépendre de ce rognage est fragile : mieux vaut ne
 * jamais produire le débordement.
 */
@media (max-width: 767px) {
  .gsap-fade-left,
  .gsap-fade-right {
    transform: translateY(24px);
  }
}


/* ═══ pages.css ═══ */
/*
 * P2G Investments Group — Pages CSS
 * Styles spécifiques aux pages individuelles
 * Dépend de: tokens.css, base.css, layout.css, components.css
 */

/* ═══════════════════════════════════════════════════════════════
   ACCUEIL — index.html
   Direction artistique : Héritage Contemporain
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   PRIMITIVES ÉDITORIALES partagées par toutes les sections
   ─────────────────────────────────────────────────────────────── */

/* Label à puce : la micro-typographie qui structure chaque section */
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: var(--space-5);
}

.label .dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-red);
  flex-shrink: 0;
}


/* ───────────────────────────────────────────────────────────────
   1 · HERO
   ─────────────────────────────────────────────────────────────── */

/*
 * Desktop : le cadre affleure le bord haut, la navigation repose sur la
 * photographie éclaircie par le voile ivoire.
 *
 * Mobile : le cadre démarre SOUS la navigation. Sinon le ciel bleu de la
 * photographie transparaît derrière la nav transparente et produit une
 * bande bleue en haut d'écran. Faire démarrer le cadre plus bas règle la
 * cause plutôt que de masquer le symptôme par un voile opaque.
 */
.hero {
  padding: var(--nav-height-mobile) var(--space-3) var(--space-3);
  background: var(--color-bg);
}

@media (min-width: 900px) {
  .hero { padding: 0 var(--space-4) var(--space-4); }
}

.hero__frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 76svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-8) var(--space-6) var(--space-10);
}

@media (min-width: 768px) {
  .hero__frame {
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    min-height: 92svh;
    padding: var(--space-12) var(--space-10) var(--space-12);
  }
}

@media (min-width: 1200px) {
  .hero__frame {
    padding: var(--space-16) var(--space-16) var(--space-14);
  }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media picture,
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/*
 * Voile IVOIRE, non encre. On éclaircit la photographie pour faire ressortir
 * un texte graphite, au lieu de l'assombrir pour un texte clair. C'est cette
 * inversion qui produit la sensation de lumière.
 *
 * Le dégradé est fort à gauche, là où le texte se pose, et nul à droite, où
 * l'architecture reste pleinement visible. Mesuré : sur le pixel le plus
 * sombre de la zone de texte, le graphite conserve 8,4:1.
 */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /*
   * Dégradé SOMBRE localisé, texte ivoire par-dessus.
   *
   * Le voile ivoire précédent devait monter à 0,88 pour porter un texte
   * graphite, ce qui délavait la photographie. Un scrim sombre atteint le
   * même contraste à opacité bien moindre, parce que l'écart entre l'ivoire
   * du texte et le fond assombri est plus grand qu'entre le graphite et un
   * fond éclairci.
   *
   * Mesuré : sur le pixel le plus clair de la zone de texte (valeur 200),
   * l'ivoire conserve 6,3:1 avec un scrim à 0,62. La photographie garde
   * son ciel, ses bois et sa piscine sur toute la partie droite.
   */
  background:
    linear-gradient(98deg,
      rgba(18, 22, 19, 0.80) 0%,
      rgba(18, 22, 19, 0.68) 26%,
      rgba(18, 22, 19, 0.42) 46%,
      rgba(18, 22, 19, 0.14) 62%,
      rgba(18, 22, 19, 0.00) 76%),
    /* Bande haute renforcée : sans elle, la marque en ivoire tombe sur les
       zones claires de la photographie et devient illisible. */
    linear-gradient(to bottom,
      rgba(18, 22, 19, 0.68) 0%,
      rgba(18, 22, 19, 0.40) 9%,
      rgba(18, 22, 19, 0.08) 24%,
      rgba(18, 22, 19, 0.00) 48%,
      rgba(18, 22, 19, 0.24) 100%);
}


/*
 * Sous 900px le texte occupe toute la largeur : un dégradé horizontal
 * laisserait la moitié droite des lignes sur l'image nue. Le voile devient
 * donc uniforme, et seul le bas s'éclaircit davantage pour les boutons.
 */
@media (max-width: 899px) {
  /* Le texte occupe la moitié basse : le voile n'a plus à couvrir le haut.
     La photographie garde son ciel et sa matière sur le tiers supérieur. */
  .hero__media::after {
    background:
      linear-gradient(to top,
        rgba(18, 22, 19, 0.86) 0%,
        rgba(18, 22, 19, 0.78) 46%,
        rgba(18, 22, 19, 0.52) 66%,
        rgba(18, 22, 19, 0.22) 84%,
        rgba(18, 22, 19, 0.10) 100%);
  }
  /* 52 % cadre sur l'architecture plutôt que sur le ciel : en portrait,
     un cadrage haut ne montrait qu'un aplat bleu. */
  .hero__media img { object-position: center center; }
}

.hero__body {
  position: relative;
  z-index: 2;
  max-width: var(--container-2xl);
  width: 100%;
  margin: 0 auto;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.88);
  margin-bottom: var(--space-6);
}

.hero__eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--sauge);
  flex-shrink: 0;
}

.hero__title {
  font-size: var(--text-display-xl);
  line-height: 0.98;
  letter-spacing: var(--tracking-tighter);
  color: var(--ivoire);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-8);
  /* Le titre doit tenir dans la colonne protégée par le voile. À 15ch et
     6rem il débordait jusqu'à 56 % de la largeur, là où le voile s'éteint :
     le contraste y tombait à 1,05:1. On plafonne le corps plutôt que la
     largeur, pour garder « pilotée sur place. » sur une seule ligne. */
  max-width: 17ch;
  font-size: clamp(2.5rem, 5.4vw + 1rem, 5rem);
}

/* Accent serif en sauge clair : chromatique autant que typographique,
   et parfaitement lisible sur le scrim sombre. */
.hero__title em {
  color: var(--sauge);
}

@media (min-width: 1024px) {
  .hero__title { margin-bottom: var(--space-10); }
}

/* Bloc secondaire : décalé à droite sur grand écran, sous le titre sinon */
.hero__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

@media (min-width: 1024px) {
  .hero__aside {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-16);
  }
}

.hero__desc {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgba(247, 244, 238, 0.90);
  font-weight: var(--weight-regular);
  max-width: 46ch;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-shrink: 0;
}

.hero__scroll {
  position: absolute;
  left: var(--space-6);
  bottom: var(--space-5);
  display: none;
  align-items: center;
  gap: var(--space-3);
  z-index: 2;
}

@media (min-width: 1200px) {
  .hero__scroll {
    display: flex;
    left: var(--space-16);
  }
}

.hero__scroll-line {
  width: 42px;
  height: 1px;
  background: rgba(247, 244, 238, 0.42);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ivoire);
  transform-origin: left;
  animation: scroll-sweep 2.4s var(--ease-in-out) infinite;
}

@keyframes scroll-sweep {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

.hero__scroll-label {
  font-size: var(--text-2xs, 11px);
  font-size: 11px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.68);
}


/* ───────────────────────────────────────────────────────────────
   2 · BANDE DE CONFIANCE
   ─────────────────────────────────────────────────────────────── */

.trustbar {
  padding: var(--section-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.trustbar__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 900px) {
  .trustbar__list { grid-template-columns: repeat(4, 1fr); }
}

.trustbar__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: var(--space-5);
  border-left: 1px solid var(--color-border);
}

.trustbar__index {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-red);
}

.trustbar__text {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  line-height: var(--leading-snug);
}


/* ───────────────────────────────────────────────────────────────
   3 · LE PROBLÈME
   ─────────────────────────────────────────────────────────────── */

.problem { padding: var(--section-lg) 0; }

.problem__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 1024px) {
  .problem__grid {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-20);
    align-items: start;
  }
}

.problem__title {
  font-size: var(--text-display-md);
  line-height: 1.04;
  max-width: 15ch;
}

.problem__text {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  margin-bottom: var(--space-5);
  max-width: 58ch;
}

.problem__fears {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.problem__fears li {
  padding: var(--space-4) 0 var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  color: var(--color-text-dim);
  position: relative;
}

.problem__fears li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 1px;
  background: var(--color-red);
}


/* ───────────────────────────────────────────────────────────────
   4 · PRÉSENTATION P2G — collage photographique
   ─────────────────────────────────────────────────────────────── */

.intro {
  padding: var(--section-lg) 0;
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .intro__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-20);
  }
}

.intro__collage {
  position: relative;
  padding-bottom: var(--space-16);
  padding-right: var(--space-10);
}

@media (min-width: 1024px) {
  .intro__collage { padding-bottom: var(--space-20); }
}

.intro__shot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.intro__shot picture,
.intro__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro__shot--main { aspect-ratio: 4 / 5; }

@media (min-width: 1024px) {
  .intro__shot--main { border-radius: var(--radius-xl); }
}

/* Vignette décalée : donne la profondeur du collage éditorial */
.intro__shot--inset {
  position: absolute;
  right: 0;
  bottom: var(--space-6);
  width: 48%;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--color-surface-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 1024px) {
  .intro__shot--inset {
    width: 52%;
    bottom: var(--space-8);
    border-width: 10px;
    border-radius: var(--radius-lg);
  }
}

.intro__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.intro__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
  margin-bottom: var(--space-6);
  max-width: 16ch;
}

.intro__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  margin-bottom: var(--space-5);
  max-width: 56ch;
}

.intro__signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-clay);
  margin: var(--space-8) 0;
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-clay-border);
  line-height: var(--leading-snug);
}


/* ───────────────────────────────────────────────────────────────
   5 · LES CINQ DOMAINES — liste éditoriale sur fond encre
   ─────────────────────────────────────────────────────────────── */

.domains { padding: var(--section-lg) 0; }

.domains__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--section-sm);
}

@media (min-width: 1024px) {
  .domains__header {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-16);
    align-items: end;
  }
}

.domains__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
}

.domains__intro {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 52ch;
}

.domains__list {
  border-top: 1px solid var(--color-border);
}

/* Une ligne = un domaine. Grille asymétrique qui respire. */
.domain {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-base);
}

@media (min-width: 900px) {
  .domain {
    grid-template-columns: 64px minmax(0, 1.25fr) minmax(0, 1fr) auto;
    gap: var(--space-8);
    align-items: start;
    padding: var(--space-10) var(--space-4);
    margin: 0 calc(-1 * var(--space-4));
  }
  .domain:hover { background: rgba(247, 243, 237, 0.03); }
}

.domain__num {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-red);
  padding-top: 4px;
}

.domain__title {
  font-size: var(--text-display-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
  color: var(--color-heading);
}

.domain__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 42ch;
}

.domain__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}

.domain__points li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  padding-left: var(--space-5);
  position: relative;
}

.domain__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 1px;
  background: var(--color-clay);
}

.domain__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  text-decoration: none;
  white-space: nowrap;
  padding-top: 4px;
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.domain__link:hover {
  gap: var(--space-3);
  color: var(--color-red);
}

/* ───────────────────────────────────────────────────────────────
   CARTES EMPILÉES — les cinq domaines
   ───────────────────────────────────────────────────────────────
   Chaque carte devient sticky à son tour et la suivante vient la
   recouvrir. L'empilement repose entièrement sur position:sticky :
   il fonctionne sans JavaScript, et sans jamais capturer le scroll.
   GSAP n'ajoute que le retrait d'échelle des cartes déjà dépassées.
   ─────────────────────────────────────────────────────────────── */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.stack__card {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  transform-origin: center top;
  will-change: transform;
}

@media (min-width: 900px) {
  .stack {
    /* L'espacement disparaît : ce sont les décalages sticky qui créent
       le rythme, un gap ajouterait des trous entre les cartes empilées. */
    gap: 0;
  }

  .stack__card {
    position: sticky;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 460px;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
  }

  /* Décalage progressif : chaque carte s'arrête un cran plus bas que la
     précédente, ce qui laisse voir la tranche de celles du dessous. */
  .stack__card[data-stack="01"] { top: calc(var(--nav-height-desktop) + 24px); }
  .stack__card[data-stack="02"] { top: calc(var(--nav-height-desktop) + 44px); }
  .stack__card[data-stack="03"] { top: calc(var(--nav-height-desktop) + 64px); }
  .stack__card[data-stack="04"] { top: calc(var(--nav-height-desktop) + 84px); }
  .stack__card[data-stack="05"] { top: calc(var(--nav-height-desktop) + 104px); }

  /* Marges de défilement : sans elles, toutes les cartes se colleraient
     immédiatement et l'empilement serait invisible. */
  .stack__card + .stack__card { margin-top: var(--space-16); }
}

.stack__body {
  padding: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 900px) {
  .stack__body { padding: var(--space-12) var(--space-12); }
}

.stack__num {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  color: var(--color-clay);
  margin-bottom: var(--space-5);
}

.stack__title {
  font-size: var(--text-display-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin-bottom: var(--space-4);
}

.stack__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 44ch;
  margin-bottom: var(--space-7);
}

.stack__points {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stack__points li {
  position: relative;
  padding-left: var(--space-7);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-dim);
}

.stack__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 14px;
  height: 1px;
  background: var(--color-sage);
}

.stack__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--olive);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.stack__link:hover { gap: var(--space-4); }

.stack__media {
  order: -1;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

@media (min-width: 900px) {
  .stack__media { order: 0; aspect-ratio: auto; }
}

.stack__media picture,
.stack__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slower);
}

.stack__card:hover .stack__media img { transform: scale(1.03); }

/* Sans JavaScript ni sur écran réduit, les cartes restent simplement empilées
   verticalement : le contenu est intégralement accessible. */
@media (prefers-reduced-motion: reduce) {
  .stack__card { position: relative; top: auto; transform: none; }
  .stack { gap: var(--space-6); }
  .stack__card + .stack__card { margin-top: 0; }
}

.domains__foot {
  margin-top: var(--section-sm);
}


/* ───────────────────────────────────────────────────────────────
   6 · SERVICE MIS EN AVANT — carte posée sur photographie
   ─────────────────────────────────────────────────────────────── */

.showcase {
  position: relative;
  padding: var(--section-lg) 0;
  min-height: 620px;
  display: flex;
  align-items: center;
}

.showcase__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.showcase__media picture,
.showcase__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.showcase__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(247, 244, 238, 0.34) 0%,
    rgba(247, 244, 238, 0.10) 46%,
    rgba(247, 244, 238, 0.00) 100%);
}

.showcase__card {
  position: relative;
  z-index: 2;
  background: var(--blanc);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  max-width: 560px;
  box-shadow: var(--shadow-xl);
}

@media (min-width: 768px) {
  .showcase__card {
    padding: var(--space-12) var(--space-12);
    border-radius: var(--radius-2xl);
  }
}

.showcase__title {
  font-size: var(--text-display-sm);
  line-height: 1.08;
  margin-bottom: var(--space-7);
}

.showcase__list {
  list-style: none;
  margin: 0 0 var(--space-9);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.showcase__list li {
  font-size: var(--text-base);
  color: var(--color-text-dim);
  padding: var(--space-3-5) 0 var(--space-3-5) var(--space-7);
  border-top: 1px solid var(--color-border);
  position: relative;
}

.showcase__list li:last-child { border-bottom: 1px solid var(--color-border); }

.showcase__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 14px;
  height: 1px;
  background: var(--color-red);
}



/* Le contenu des sections à média de fond doit toujours passer au-dessus */
.showcase > .container,
.closing  > .container {
  position: relative;
  z-index: 2;
}

/* ───────────────────────────────────────────────────────────────
   7 · NOTRE MÉTHODE
   ─────────────────────────────────────────────────────────────── */

.method { padding: var(--section-lg) 0; }

.method__header {
  max-width: 620px;
  margin-bottom: var(--section-sm);
}

.method__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
  margin-bottom: var(--space-5);
}

.method__intro {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}

.method__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 700px) {
  .method__steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .method__steps {
    grid-template-columns: repeat(3, 1fr);
    border-radius: var(--radius-xl);
  }
}

.step {
  background: var(--color-bg);
  padding: var(--space-8) var(--space-7) var(--space-10);
  transition: background var(--transition-base);
}

.step:hover { background: var(--color-surface-1); }

.step__num {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-red);
  margin-bottom: var(--space-6);
}

.step__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
  color: var(--color-heading);
}

.step__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}

.method__foot { margin-top: var(--section-xs); }


/* ───────────────────────────────────────────────────────────────
   8 · CONTRÔLE À DISTANCE — maquette de rapport
   ─────────────────────────────────────────────────────────────── */

.control { padding: var(--section-lg) 0; }

.control__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .control__grid {
    grid-template-columns: 1fr 460px;
    gap: var(--space-20);
  }
}

.control__title {
  font-size: var(--text-display-sm);
  line-height: 1.08;
  margin-bottom: var(--space-6);
  max-width: 20ch;
}

.control__text {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 52ch;
}

.control__list {
  list-style: none;
  margin: var(--space-9) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.control__list li {
  font-size: var(--text-base);
  color: var(--color-text-dim);
  padding-left: var(--space-7);
  position: relative;
}

.control__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 14px;
  height: 1px;
  background: var(--color-clay);
}

/* Maquette de rapport — illustration explicitement fictive */
.control__panel { margin: 0; }

.report {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.report__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.report__tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-clay);
}

.report__week {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.report__shot {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.report__shot picture,
.report__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.report__rows { padding: var(--space-3) var(--space-6) var(--space-6); }

.report__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.report__row:last-child { border-bottom: none; }

.report__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.report__value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  text-align: right;
}

.report__bar {
  display: block;
  width: 64px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  overflow: hidden;
}

.report__bar > span {
  display: block;
  height: 100%;
  background: var(--color-clay);
  border-radius: inherit;
}

.report__caption {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  font-style: italic;
}


/* ───────────────────────────────────────────────────────────────
   9 · ENGAGEMENTS
   ─────────────────────────────────────────────────────────────── */

.pledges {
  padding: var(--section-lg) 0;
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.pledges__header {
  max-width: 620px;
  margin-bottom: var(--section-sm);
}

.pledges__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
  margin-bottom: var(--space-5);
}

.pledges__intro {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}

.pledges__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px)  { .pledges__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pledges__grid { grid-template-columns: repeat(4, 1fr); } }

.pledge {
  background: var(--blanc);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-6);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.pledge:hover {
  border-color: var(--color-clay-border);
  transform: translateY(-2px);
}

.pledge__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
  color: var(--color-heading);
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-red);
  display: inline-block;
}

.pledge__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}


/* ───────────────────────────────────────────────────────────────
   10 · PROJECTIONS
   ─────────────────────────────────────────────────────────────── */

.works { padding: var(--section-lg) 0; }

.works__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--section-sm);
}

@media (min-width: 1024px) {
  .works__header {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: end;
  }
}

.works__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
}

/* Avertissement de nature : jamais une réalisation présentée comme telle */
.works__note {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 54ch;
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-border-strong);
}

.works__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 700px)  { .works__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .works__grid { grid-template-columns: repeat(3, 1fr); } }

.work__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
}

.work__media picture,
.work__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.work:hover .work__media img { transform: scale(1.035); }

.work__badge {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--graphite);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  padding: var(--space-2) var(--space-3-5);
  border-radius: var(--radius-full);
}

.work__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2);
  color: var(--color-heading);
}

.work__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.works__foot { margin-top: var(--section-sm); }


/* ───────────────────────────────────────────────────────────────
   11 · DIASPORA
   ─────────────────────────────────────────────────────────────── */

.diaspora {
  padding: var(--section-lg) 0;
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
}

.diaspora__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .diaspora__grid {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-20);
  }
}

.diaspora__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
  margin-bottom: var(--space-6);
  max-width: 17ch;
}

.diaspora__text {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 54ch;
}

.diaspora__list {
  list-style: none;
  margin: var(--space-9) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5);
}

.diaspora__list li {
  font-size: var(--text-base);
  color: var(--color-text-dim);
  padding-left: var(--space-7);
  position: relative;
}

.diaspora__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 14px;
  height: 1px;
  background: var(--color-red);
}

.diaspora__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.diaspora__panel {
  background: var(--blanc);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.diaspora__photo {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.diaspora__photo picture,
.diaspora__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.diaspora__panel-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-7) var(--space-7) var(--space-5);
}

.diaspora__countries {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-7) var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5);
}

.diaspora__countries li {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-dim);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}


/* ───────────────────────────────────────────────────────────────
   12 · FAQ — accordéon natif <details>
   ─────────────────────────────────────────────────────────────── */

.faq { padding: var(--section-lg) 0; }

.faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 1024px) {
  .faq__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-20);
    align-items: start;
  }
  .faq__lead { position: sticky; top: calc(var(--nav-height-desktop) + var(--space-8)); }
}

.faq__title {
  font-size: var(--text-display-sm);
  line-height: 1.06;
  margin-bottom: var(--space-6);
  max-width: 14ch;
}

.faq__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.faq__note a {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq__list { border-top: 1px solid var(--color-border); }

.qa { border-bottom: 1px solid var(--color-border); }

.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition-fast);
}

.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { color: var(--color-red); }

/* Croix qui pivote en moins à l'ouverture */
.qa__icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.qa__icon::before,
.qa__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--color-red);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.qa__icon::before {
  width: 14px; height: 1.5px;
  transform: translate(-50%, -50%);
}

.qa__icon::after {
  width: 1.5px; height: 14px;
  transform: translate(-50%, -50%);
}

.qa[open] .qa__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.qa__a {
  padding: 0 var(--space-12) var(--space-7) 0;
  animation: qa-reveal var(--duration-base) var(--ease-out);
}

.qa__a p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 62ch;
}

@keyframes qa-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ───────────────────────────────────────────────────────────────
   13 · CTA FINAL
   ─────────────────────────────────────────────────────────────── */

.closing {
  position: relative;
  padding: var(--section-xl) 0;
  text-align: center;
}

.closing__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.closing__media picture,
.closing__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.closing__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Radial centré : la lisibilité est assurée au centre, les bords de
     l'image respirent. Un aplat uniforme effaçait toute la photographie. */
  background:
    radial-gradient(ellipse 62% 72% at 50% 52%,
      rgba(247, 244, 238, 0.88) 0%,
      rgba(247, 244, 238, 0.70) 55%,
      rgba(247, 244, 238, 0.22) 100%),
    linear-gradient(to bottom,
      rgba(247, 244, 238, 0.30) 0%,
      rgba(247, 244, 238, 0.10) 50%,
      rgba(247, 244, 238, 0.34) 100%);
}

.closing__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

.closing .label { justify-content: center; }

.closing__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
  margin-bottom: var(--space-6);
}

.closing__text {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  margin-bottom: var(--space-10);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.closing__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.closing__note {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}


/* ═══════════════════════════════════════════════════════════════
   SERVICES — services.html
   Cinq compositions distinctes, un tronc éditorial commun
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   PRIMITIVE PARTAGÉE — hero des pages intérieures
   Utilisée aussi par contact, notre-methode, projets, ressources :
   ne pas supprimer avec la refonte de la page Services.
   ─────────────────────────────────────────────────────────────── */

.page-hero {
  padding-top: calc(var(--nav-height-mobile) + var(--section-md));
  padding-bottom: var(--section-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
  .page-hero { padding-top: calc(var(--nav-height-desktop) + var(--section-lg)); }
}

.page-hero__eyebrow { margin-bottom: var(--space-5); }

.page-hero__title {
  font-size: var(--text-display-lg);
  color: var(--color-heading);
  margin-bottom: var(--space-6);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.page-hero__desc {
  font-size: var(--text-xl);
  color: var(--color-text-dim);
  font-weight: var(--weight-light);
  max-width: 600px;
  margin: 0 auto var(--space-8);
  line-height: var(--leading-relaxed);
}


/* ───────────────────────────────────────────────────────────────
   1 · HERO DE PAGE
   Bandeau encre, sans photographie : la navigation transparente
   du haut de page doit rester lisible, et le contraste avec la
   page d'accueil doit rester net.
   ─────────────────────────────────────────────────────────────── */

.svc-hero {
  padding-top: calc(var(--nav-height-mobile) + var(--section-sm));
  padding-bottom: var(--section-sm);
}

@media (min-width: 1024px) {
  .svc-hero {
    padding-top: calc(var(--nav-height-desktop) + var(--section-md));
    padding-bottom: var(--section-md);
  }
}

.svc-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
}

@media (min-width: 1024px) {
  .svc-hero__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-20);
    align-items: end;
  }
}

.svc-hero__title {
  font-size: var(--text-display-lg);
  line-height: 1.0;
  letter-spacing: var(--tracking-tighter);
  max-width: 13ch;
}

.svc-hero__desc {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 54ch;
}

.svc-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}


/* ───────────────────────────────────────────────────────────────
   2 · NAVIGATION PAR ANCRE
   Barre collante sous la navigation principale. Défilement
   horizontal sur mobile pour garder une seule ligne.
   ─────────────────────────────────────────────────────────────── */

.svc-nav {
  position: sticky;
  top: var(--nav-height-mobile);
  z-index: calc(var(--z-fixed) - 1);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
}

@media (min-width: 1024px) {
  .svc-nav { top: var(--nav-height-desktop); }
}

.svc-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Sous 1100px les cinq services ne tiennent pas : la liste défile.
     Le fondu de bord droit signale qu'il reste du contenu à atteindre. */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
}

.svc-nav__list::-webkit-scrollbar { display: none; }

.svc-nav__list > li { scroll-snap-align: start; }

@media (min-width: 1100px) {
  .svc-nav__list {
    justify-content: center;
    overflow-x: visible;
    /* Tout tient à cette largeur : plus de défilement, donc plus de fondu */
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.svc-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-dim);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-full);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.svc-nav__link:hover {
  color: var(--color-heading);
  background: var(--color-surface-3);
}

.svc-nav__num {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-red);
}


/* ───────────────────────────────────────────────────────────────
   3 · L'APPROCHE 360°
   ─────────────────────────────────────────────────────────────── */

.svc-approach {
  padding: var(--section-lg) 0;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}

.svc-approach__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 1024px) {
  .svc-approach__grid {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-20);
    align-items: start;
  }
}

.svc-approach__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
  margin-bottom: var(--space-6);
  max-width: 16ch;
}

.svc-approach__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 58ch;
}

.svc-approach__map {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.svc-approach__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

.svc-approach__num {
  grid-row: span 2;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-red);
  padding-top: 2px;
}

.svc-approach__item a {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.svc-approach__item a:hover { color: var(--color-red); }

.svc-approach__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}


/* ───────────────────────────────────────────────────────────────
   4 · SECTIONS SERVICE — tronc commun
   Cinq compositions distinctes partagent le même corps éditorial :
   accroche, problème, bénéfice, prise en charge, action.
   ─────────────────────────────────────────────────────────────── */

/* Le décalage d'ancre dégage la barre fixe ET la barre collante des services */
.svc {
  padding: var(--section-lg) 0;
  scroll-margin-top: calc(var(--nav-height-mobile) + var(--space-20));
}

@media (min-width: 1024px) {
  .svc { scroll-margin-top: calc(var(--nav-height-desktop) + var(--space-20)); }
}

/* Fonds : l'alternance ivoire, chaud, encre porte le rythme de la page */
.svc--warm {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Les bandeaux encre pèsent plus lourd : on resserre leur respiration */
.svc--panel { padding: var(--section-md) 0; }

.svc--panel .svc__frame { border-radius: var(--radius-xl); }

@media (min-width: 1024px) {
  .svc--panel .svc__frame { border-radius: var(--radius-2xl); }
}

.svc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .svc__grid { gap: var(--space-20); grid-template-columns: 1.05fr 1fr; }
  .svc__grid--media-start { grid-template-columns: 1fr 1.15fr; }
  .svc__grid--media-end   { grid-template-columns: 1.15fr 1fr; }

  /* Le collage déborde de sa colonne : on lui laisse moins de largeur nominale */
  .svc--collage .svc__grid { grid-template-columns: 1fr 0.92fr; }
}

/* Corps longs : le texte commande, l'image s'aligne en haut */
.svc--wide .svc__grid,
.svc--warm .svc__grid { align-items: start; }

/* Le parcours foncier se lit sur toute la hauteur : l'image l'accompagne */
@media (min-width: 1024px) {
  .svc--warm .svc__frame {
    position: sticky;
    top: calc(var(--nav-height-desktop) + var(--space-16));
  }
}

/* Composition C : titre pleine largeur avant la grille */
.svc__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--section-xs);
}

@media (min-width: 1024px) {
  .svc__header {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-20);
    align-items: end;
  }
}

.svc__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
  margin-bottom: var(--space-5);
  max-width: 17ch;
}

.svc__header .svc__title { margin-bottom: 0; }

.svc__kicker {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 48ch;
}

/* Le point de départ du client : mis en retrait par un filet */
.svc__problem {
  margin-top: var(--space-7);
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-border-strong);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 52ch;
}

.svc__header + .svc__grid .svc__problem { margin-top: 0; }

/* Le bénéfice : une ligne, soulignée de rouge, jamais un paragraphe */
.svc__benefit {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-red);
  display: inline-block;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  max-width: 42ch;
}

.svc__charge { margin-top: var(--space-9); }

.svc__charge-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.svc__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.svc__list li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-dim);
}

/* Aligné sur la première ligne du texte, pas sur le centre de l'élément :
   les intitulés courent souvent sur deux lignes. */
.svc__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.8em;
  width: 14px;
  height: 1px;
  background: var(--color-red);
}

@media (min-width: 900px) {
  .svc__list--cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-10);
  }
}

.svc__body > .btn { margin-top: var(--space-9); }


/* ── Composition A : collage photographique (01) ── */

.svc__collage {
  position: relative;
  padding-bottom: var(--space-16);
  padding-left: var(--space-10);
}

@media (min-width: 1024px) {
  .svc__collage { padding-bottom: var(--space-20); }
}

.svc__shot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.svc__shot picture,
.svc__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc__shot--main { aspect-ratio: 4 / 5; }

@media (min-width: 1024px) {
  .svc__shot--main { border-radius: var(--radius-xl); }
}

.svc__shot--inset {
  position: absolute;
  left: 0;
  bottom: var(--space-6);
  width: 48%;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 1024px) {
  .svc__shot--inset {
    width: 52%;
    bottom: var(--space-8);
    border-width: 10px;
    border-radius: var(--radius-lg);
  }
}


/* ── Compositions B, C, D, E : cadre photographique simple ── */

.svc__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
  .svc__frame { border-radius: var(--radius-xl); }
}

.svc__frame--tall { aspect-ratio: 4 / 5; }
.svc__frame--badged { aspect-ratio: 1 / 1; }

.svc__frame picture,
.svc__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Honnêteté visuelle : une projection ne se présente jamais autrement */
.svc__badge {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--graphite);
  background: var(--blanc);
  padding: var(--space-2) var(--space-3-5);
  border-radius: var(--radius-full);
}


/* ── Composition D : parcours du titre foncier (04) ── */

.svc__path {
  margin-top: var(--space-8);
  padding: var(--space-7);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.svc__path-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.svc__path-list {
  counter-reset: step;
  margin: 0;
  padding: 0;
}

.svc__path-list li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--space-5) var(--space-9);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-dim);
}

.svc__path-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-clay);
}

/* Filet de liaison entre les étapes, sauf après la dernière */
.svc__path-list li::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 1.5em;
  bottom: var(--space-2);
  width: 1px;
  background: var(--color-border-strong);
}

.svc__path-list li:last-child { padding-bottom: 0; }
.svc__path-list li:last-child::after { display: none; }


/* ── Composition E : domaines couverts (05) ── */

.svc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5);
  margin: var(--space-8) 0 0;
  padding: 0;
}

.svc__chips li {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-dim);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}


/* ───────────────────────────────────────────────────────────────
   5 · PROMESSE TRANSVERSE — carte posée sur photographie
   ─────────────────────────────────────────────────────────────── */

/* isolation: isolate est structurel ici : sans contexte d'empilement local,
   le média en z-index négatif retombe derrière le fond de la section. */
.svc-promise {
  position: relative;
  padding: var(--section-lg) 0;
  min-height: 620px;
  display: flex;
  align-items: center;
}

.svc-promise__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.svc-promise > .container {
  position: relative;
  z-index: 2;
}

.svc-promise__media picture,
.svc-promise__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.svc-promise__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--color-scrim-deep) 0%,
    var(--color-scrim) 58%,
    transparent 100%);
}

.svc-promise__card {
  background: var(--blanc);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  max-width: 580px;
  box-shadow: var(--shadow-xl);
}

@media (min-width: 768px) {
  .svc-promise__card {
    padding: var(--space-12);
    border-radius: var(--radius-2xl);
  }
}

.svc-promise__title {
  font-size: var(--text-display-sm);
  line-height: 1.08;
  margin-bottom: var(--space-7);
}

.svc-promise__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.svc-promise__list li {
  position: relative;
  padding: var(--space-3-5) 0 var(--space-3-5) var(--space-7);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  color: var(--color-text-dim);
}

.svc-promise__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 14px;
  height: 1px;
  background: var(--color-red);
}

.svc-promise__signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-clay);
  margin: var(--space-8) 0;
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-clay-border);
  line-height: var(--leading-snug);
}


/* ───────────────────────────────────────────────────────────────
   6 · CTA FINAL
   ─────────────────────────────────────────────────────────────── */

/* Même contrainte : la photographie doit passer au-dessus du fond encre
   de la section, donc au sein d'un contexte d'empilement local. */
.svc-closing {
  position: relative;
  padding: var(--section-xl) 0;
  text-align: center;
}

/*
 * Pas de voile en surcouche : la photographie est atténuée sur le fond
 * encre de la section, ce qui garantit le contraste sans couleur écrite.
 */
.svc-closing__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.3;
}

/* Sans voile, la note de bas de section tombait à 2,07:1 sur les zones claires.
   0.70 garantit 6,4:1 même sur un pixel blanc de la photographie. */
.svc-closing__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.90);
}

.svc-closing > .container {
  position: relative;
  z-index: 2;
}

.svc-closing__media picture,
.svc-closing__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.svc-closing__inner {
  max-width: 720px;
  margin: 0 auto;
}

.svc-closing .label { justify-content: center; }

.svc-closing__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
  margin-bottom: var(--space-6);
}

.svc-closing__text {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  margin: 0 auto var(--space-10);
  max-width: 54ch;
}

.svc-closing__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.svc-closing__note {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}


/* ═══════════════════════════════════════════════════════════════
   NOTRE APPROCHE — approche.html (Module 4)
   ═══════════════════════════════════════════════════════════════ */

/* ── Intro approche ── */
.approche-intro {
  padding: var(--section-lg) 0;
  border-bottom: 1px solid var(--color-border);
}

.approche-intro__grid {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .approche-intro__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

.approche-intro__title {
  font-size: var(--text-display-md);
  margin-bottom: var(--space-6);
  line-height: var(--leading-snug);
}

.approche-intro__text {
  font-size: var(--text-md);
  color: var(--color-text-dim);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

/* Boîte piliers */
.approche-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.approche-pillar {
  padding: var(--space-5);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.approche-pillar__icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
  line-height: 1;
}

.approche-pillar__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-1);
}

.approche-pillar__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ── Timeline 7 étapes ── */
.approche-steps {
  padding: var(--section-lg) 0;
}

.approche-steps__header {
  text-align: center;
  margin-bottom: var(--section-sm);
}

.approche-steps__header h2 {
  margin-bottom: var(--space-5);
}

.approche-timeline {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}

/* Ligne verticale */
.approche-timeline::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--color-border) 5%,
    var(--color-border) 95%,
    transparent 100%
  );
}

@media (min-width: 768px) {
  .approche-timeline::before { left: 36px; }
}

.approche-step {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
  position: relative;
}

.approche-step:last-child {
  margin-bottom: 0;
}

.approche-step__num-wrap {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .approche-step__num-wrap {
    width: 72px;
    height: 72px;
  }
}

.approche-step__num-bg {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: border-color var(--transition-base), background var(--transition-base);
}

.approche-step:hover .approche-step__num-bg {
  border-color: var(--color-red);
  background: rgba(176, 31, 36, 0.05);
}

.approche-step__num {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.approche-step:hover .approche-step__num {
  color: var(--color-red);
}

.approche-step__body {
  padding-top: var(--space-3);
  flex: 1;
}

.approche-step__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-clay);
  margin-bottom: var(--space-2);
}

.approche-step__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.approche-step__desc {
  font-size: var(--text-base);
  color: var(--color-text-dim);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.approche-step__detail {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-surface-3);
  font-style: italic;
}

/* ── Engagements section ── */
.approche-engagements {
  padding: var(--section-lg) 0;
  background: var(--color-surface-1);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.approche-engagements__header {
  text-align: center;
  margin-bottom: var(--section-sm);
}

.approche-engagements__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .approche-engagements__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .approche-engagements__grid { grid-template-columns: repeat(3, 1fr); }
}

.engagement-card {
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.engagement-card:hover {
  border-color: var(--color-clay);
  transform: translateY(-2px);
}

.engagement-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.engagement-card__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-clay);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.engagement-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}

.engagement-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  line-height: var(--leading-relaxed);
}

/* ── Différence P2G ── */
.approche-difference {
  padding: var(--section-lg) 0;
  border-bottom: 1px solid var(--color-border);
}

.approche-difference__grid {
  display: grid;
  gap: var(--space-10);
}

@media (min-width: 1024px) {
  .approche-difference__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
  }
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.comparison-table th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  text-align: left;
}

.comparison-table th:first-child { color: var(--color-text-muted); }
.comparison-table th:last-child { color: var(--color-clay); }

.comparison-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border-top: 1px solid var(--color-border);
  vertical-align: top;
}

.comparison-table tr:nth-child(odd) td { background: var(--color-surface-1); }

.comparison-table td:first-child {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.comparison-table td:last-child {
  color: var(--color-heading);
  font-weight: var(--weight-medium);
}

.comparison-table td .check {
  color: var(--color-clay);
  margin-right: var(--space-2);
  font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   PROJECTIONS — projections.html (Module 5)
   ═══════════════════════════════════════════════════════════════ */

/* ── Disclaimer disclaimer ── */
.projections-disclaimer {
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}

.projections-disclaimer__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

.projections-disclaimer__icon {
  color: var(--color-clay);
  flex-shrink: 0;
  font-size: 1rem;
}

/* ── Filtres ── */
.projections-filters {
  padding: var(--space-8) 0 0;
}

.projections-filters__inner {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

.filter-btn {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.filter-btn:hover {
  color: var(--color-heading);
  border-color: var(--color-text-dim);
}

.filter-btn.is-active {
  color: var(--color-heading);
  background: var(--color-surface-2);
  border-color: var(--color-red);
}

/* ── Grille projections ── */
.projections-section {
  padding: var(--section-md) 0 var(--section-lg);
}

.projections-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .projections-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .projections-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Carte projection (version page complète — plus grande) */
.projection-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-base), transform var(--transition-base);
  cursor: default;
}

.projection-card:hover {
  border-color: var(--color-clay);
  transform: translateY(-3px);
}

.projection-card--featured {
  grid-column: span 2;
}

@media (max-width: 639px) {
  .projection-card--featured { grid-column: span 1; }
}

.projection-card__visual {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
}

.projection-card--featured .projection-card__visual {
  aspect-ratio: 16/7;
}

.projection-card__visual-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3rem, 8vw, 7rem);
  color: var(--color-clay);
  opacity: 0.12;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.projection-card:hover .projection-card__visual-inner {
  opacity: 0.18;
  transform: scale(1.04);
}

.projection-card__visual picture,
.projection-card__visual picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-slow);
  display: block;
}

.projection-card:hover .projection-card__visual picture img {
  transform: scale(1.04);
}

.service-visual__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}

/* Overlay gradient */
.projection-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(247, 244, 238, 0.72) 70%,
    rgba(247, 244, 238, 0.95) 100%
  );
}

/* Tag (micro-étiquette) */
.projection-card__tag {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  background: rgba(247, 244, 238, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(247, 243, 237, 0.12);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.projection-card__body {
  padding: var(--space-5) var(--space-5) var(--space-5);
}

.projection-card__type {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-clay);
  margin-bottom: var(--space-2);
}

.projection-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.projection-card--featured .projection-card__title {
  font-size: var(--text-xl);
}

.projection-card__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.projection-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  line-height: var(--leading-relaxed);
}

/* ── CTA projections ── */
.projections-cta {
  padding: var(--section-md) 0 var(--section-lg);
  text-align: center;
  border-top: 1px solid var(--color-border);
}

/* ═══════════════════════════════════════════════════════════════
   RESSOURCES — ressources.html (Module 6)
   ═══════════════════════════════════════════════════════════════ */

/* ── Hub ressources ── */
.ressources-hub {
  padding: var(--section-lg) 0;
}

.ressources-hub__header {
  text-align: center;
  margin-bottom: var(--section-sm);
}

.ressources-hub__header h2 {
  margin-bottom: var(--space-5);
}

.ressources-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .ressources-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ressources-grid { grid-template-columns: repeat(3, 1fr); }
}

.ressource-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.ressource-card:hover {
  border-color: var(--color-clay);
  transform: translateY(-3px);
}

.ressource-card__thumb {
  aspect-ratio: 16/7;
  position: relative;
  overflow: hidden;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3rem, 7vw, 5rem);
  color: var(--color-clay);
  opacity: 0.25;
  transition: opacity var(--transition-slow);
}

.ressource-card:hover .ressource-card__thumb {
  opacity: 0.4;
}

.ressource-card__body {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ressource-card__cat {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-3);
}

.ressource-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
  flex: 1;
}

.ressource-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.ressource-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.ressource-card__read {
  color: var(--color-text-dim);
  font-weight: var(--weight-medium);
  transition: color var(--transition-fast);
}

.ressource-card:hover .ressource-card__read {
  color: var(--color-clay);
}

/* Guide PDF section */
.ressources-guide {
  padding: var(--section-md) 0;
  background: var(--color-surface-1);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.ressources-guide__inner {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 1024px) {
  .ressources-guide__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

.guide-mockup {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.guide-mockup::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(122, 59, 46,0.05) 0%, transparent 65%);
}

.guide-mockup__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-display-sm);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
  position: relative;
}

.guide-mockup__sub {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  position: relative;
}

.guide-mockup__chapters {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
}

.guide-mockup__chapter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.guide-mockup__chapter:last-child { border-bottom: none; }

.guide-mockup__chapter-num {
  font-size: var(--text-xs);
  color: var(--color-clay);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT — contact.html (Module 7)
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout contact ── */
.contact-layout {
  padding: var(--section-md) 0 var(--section-lg);
}

.contact-layout__grid {
  display: grid;
  gap: var(--space-12);
}

@media (min-width: 1024px) {
  .contact-layout__grid {
    grid-template-columns: 1fr 420px;
    gap: var(--space-16);
    align-items: start;
  }
}

/* ── Formulaire ── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .form-group--row { grid-template-columns: 1fr; }
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-dim);
  letter-spacing: var(--tracking-wide);
}

.form-label span { color: var(--color-red); margin-left: 2px; }

.form-input,
.form-select,
.form-textarea {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-heading);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-clay);
  box-shadow: 0 0 0 3px rgba(122, 59, 46,0.12);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a08050' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

.form-select option {
  background: var(--color-surface-2);
  color: var(--color-heading);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: var(--leading-relaxed);
}

.form-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ── Sidebar infos ── */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-info-card {
  padding: var(--space-6);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.contact-info-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.contact-detail:last-child { border-bottom: none; }

.contact-detail__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(122, 59, 46,0.08);
  border: 1px solid rgba(122, 59, 46,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--text-base);
}

.contact-detail__body { display: flex; flex-direction: column; gap: 2px; }

.contact-detail__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.contact-detail__value {
  font-size: var(--text-sm);
  color: var(--color-heading);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

a.contact-detail__value:hover { color: var(--color-clay); }

.contact-detail__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.contact-guarantees {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-guarantee {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.contact-guarantee__icon { color: var(--color-clay); font-size: var(--text-xs); flex-shrink: 0; }

/* WhatsApp CTA */
.whatsapp-card {
  background: rgba(31, 168, 85,0.05);
  border: 1px solid rgba(31, 168, 85,0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.whatsapp-card:hover {
  background: rgba(31, 168, 85,0.08);
  border-color: rgba(31, 168, 85,0.35);
}

.whatsapp-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(31, 168, 85,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.3rem;
}

.whatsapp-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  margin-bottom: 2px;
}

.whatsapp-card__sub { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── Zones d'intervention ── */
.contact-zones {
  padding: var(--section-sm) 0;
  background: var(--color-surface-1);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.contact-zones__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .contact-zones__grid { grid-template-columns: repeat(4, 1fr); }
}

.zone-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
  transition: border-color var(--transition-base);
}

.zone-card:hover { border-color: var(--color-clay); }

.zone-card__flag { font-size: 1.75rem; margin-bottom: var(--space-2); }
.zone-card__city { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-heading); margin-bottom: 2px; }
.zone-card__country { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── Feedback soumission ── */
.form-success {
  display: none;
  background: rgba(122, 59, 46,0.06);
  border: 1px solid rgba(122, 59, 46,0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
}

.form-success.is-visible { display: block; }

.form-success__icon { font-size: 2.5rem; margin-bottom: var(--space-4); }

.form-success__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-display-xs);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════
   ARTICLES BLOG — blog/*.html (Module 6)
   ═══════════════════════════════════════════════════════════════ */

/* ── Article layout ── */
.article-hero {
  padding-top: calc(var(--nav-height-mobile) + var(--section-md));
  padding-bottom: var(--section-sm);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
  .article-hero { padding-top: calc(var(--nav-height-desktop) + var(--section-lg)); }
}

.article-hero__cat {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-4);
}

.article-hero__title {
  font-size: var(--text-display-md);
  color: var(--color-heading);
  max-width: 780px;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-5);
}

.article-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.article-hero__meta-sep {
  color: var(--color-text-muted);
}

/* ── Corps de l'article ── */
.article-layout {
  padding: var(--section-md) 0 var(--section-lg);
}

.article-layout__grid {
  display: grid;
  gap: var(--space-12);
}

/*
 * Un élément de grille conserve min-width: auto, c'est-à-dire qu'il refuse
 * de descendre sous la largeur minimale de son contenu. Les tableaux de
 * coûts demandent 645px : sous 1024px la colonne s'élargissait donc à 645px
 * au lieu des 318px disponibles, et la page entière débordait à droite.
 * Ramener le minimum à zéro laisse le tableau défiler dans son cadre, qui
 * porte déjà overflow-x: auto.
 */
.article-layout__grid > * { min-width: 0; }

@media (min-width: 1024px) {
  .article-layout__grid {
    grid-template-columns: 1fr 320px;
    gap: var(--space-16);
    align-items: start;
  }
}

/* ── Contenu riche ── */
.article-body {
  font-size: var(--text-md);
  color: var(--color-text-dim);
  line-height: var(--leading-relaxed);
  max-width: 720px;
}

.article-body h2 {
  font-size: var(--text-display-xs);
  color: var(--color-heading);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug);
}

.article-body h3 {
  font-size: var(--text-xl);
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.article-body p {
  margin-bottom: var(--space-5);
}

.article-body ul, .article-body ol {
  padding-left: var(--space-5);
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.article-body li {
  line-height: var(--leading-relaxed);
}

.article-body ul li::marker { color: var(--color-clay); }
.article-body ol li::marker { color: var(--color-red); font-weight: var(--weight-bold); }

.article-body strong {
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}

.article-body em { color: var(--color-text-dim); }

.article-callout {
  border-left: 3px solid var(--color-red);
  background: rgba(176, 31, 36, 0.05);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
  font-size: var(--text-base);
  color: var(--color-text-dim);
  line-height: var(--leading-relaxed);
}

.article-callout strong { color: var(--color-red); }

.article-table-wrap {
  overflow-x: auto;
  margin: var(--space-8) 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.article-table th {
  background: var(--color-surface-2);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.article-table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-dim);
  line-height: var(--leading-normal);
}

.article-table tr:nth-child(even) td { background: var(--color-surface-1); }

/* ── Sidebar article ── */
.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.sidebar-card {
  padding: var(--space-6);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.sidebar-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.sidebar-card__cta {
  background: rgba(176, 31, 36,0.06);
  border-color: rgba(176, 31, 36,0.2);
}

.sidebar-toc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-toc a {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  text-decoration: none;
  display: block;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast);
}

.sidebar-toc a:hover { color: var(--color-heading); }
.sidebar-toc li:last-child a { border-bottom: none; }

/* ── Articles liés ── */
.article-related {
  padding: var(--section-sm) 0 var(--section-lg);
  border-top: 1px solid var(--color-border);
}

.article-related__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-6);
}


/* ═══════════════════════════════════════════════════════════════
   PAGES INTÉRIEURES — bandeau de titre commun
   ═══════════════════════════════════════════════════════════════ */

.pagehead {
  padding: calc(var(--nav-height-desktop) + var(--section-md)) 0 var(--section-sm);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}

.pagehead--tight {
  padding-bottom: var(--section-xs);
}

.pagehead__title {
  font-size: var(--text-display-lg);
  line-height: 1.02;
  letter-spacing: var(--tracking-tighter);
  max-width: 18ch;
  margin-bottom: var(--space-6);
}

.pagehead__lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 60ch;
}


/* ═══════════════════════════════════════════════════════════════
   FAQ — faq.html
   ═══════════════════════════════════════════════════════════════ */

.faqpage { padding: var(--section-md) 0 var(--section-lg); }

.faqpage__group + .faqpage__group { margin-top: var(--section-sm); }

.faqpage__group-title {
  font-size: var(--text-display-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-red);
  display: inline-block;
}


/* ═══════════════════════════════════════════════════════════════
   DEMANDE DE DEVIS — demander-un-devis.html
   ═══════════════════════════════════════════════════════════════ */

.quote { padding: var(--section-md) 0 var(--section-lg); }

.quote__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 1024px) {
  .quote__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
    gap: var(--space-16);
  }
  /* La colonne d'accompagnement suit la lecture du formulaire */
  .quote__aside {
    position: sticky;
    top: calc(var(--nav-height-desktop) + var(--space-6));
  }
}

.form-block {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-10);
}

.form-block__legend {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 0 var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

@media (min-width: 700px) {
  .form-row { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

.form-field { margin-bottom: var(--space-5); }
.form-row .form-field { margin-bottom: 0; }

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  margin-bottom: var(--space-2-5);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-heading);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.form-textarea {
  min-height: 150px;
  resize: vertical;
  line-height: var(--leading-relaxed);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635C53' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 18px;
  padding-right: var(--space-12);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px var(--color-red-light);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-text-muted); }

.form-hint {
  margin-top: var(--space-2-5);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.form-consent { margin: var(--space-8) 0; }

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  cursor: pointer;
}

.form-check input[type="checkbox"] {
  /* 24px : seuil minimal de cible tactile WCAG 2.2 AA (SC 2.5.8) */
  width: 24px;
  height: 24px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-red);
  cursor: pointer;
}

.form-check a {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-legal {
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* Colonne latérale */
.quote__card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.quote__card + .quote__card { margin-top: var(--space-6); }

.quote__card--direct {
  background: var(--color-surface-3);
  border-color: var(--color-clay-border);
}

.quote__card-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin-bottom: var(--space-6);
}

.quote__card-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  margin-bottom: var(--space-6);
}

.quote__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  counter-reset: none;
}

.quote__steps li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.quote__step-num {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-red);
  flex-shrink: 0;
  padding-top: 2px;
}

.quote__step-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}

.quote__alt { margin-top: var(--space-3); }


/* ═══════════════════════════════════════════════════════════════
   PAGES LÉGALES — mentions-legales.html, confidentialite.html
   ═══════════════════════════════════════════════════════════════ */

.legal { padding: var(--section-md) 0 var(--section-lg); }

.legal__body {
  max-width: var(--container-text);
}

.legal__body h2 {
  font-size: var(--text-display-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin: var(--space-12) 0 var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.legal__body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal__body p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  margin-bottom: var(--space-5);
}

.legal__body ul {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.legal__body li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-7);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}

.legal__body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 12px;
  height: 1px;
  background: var(--color-clay);
}

.legal__body strong { color: var(--color-heading); font-weight: var(--weight-semibold); }

.legal__body a {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__body p.legal__note {
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-3);
  border-left: 2px solid var(--color-clay);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
}

.legal__body p.legal__updated {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}


/* Sections services à média de fond : contenu au-dessus de la photographie */
.svc-promise > .container,
.svc-closing > .container {
  position: relative;
  z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════
   À PROPOS — a-propos.html
   ═══════════════════════════════════════════════════════════════ */

/* ── Variante photographique du bandeau commun ──
   Partagée avec diaspora.html. S'appuie sur .pagehead / .pagehead__title /
   .pagehead__lead déjà définis plus haut ; n'ajoute que la couche média,
   la mise en colonnes et la rangée de repères. */
.pagehead--feature {
  position: relative;
  padding: 0;
  border-bottom: none;
}

/*
 * Même structure que le hero de l'accueil : le cadre porte le rythme vertical
 * et n'a aucun fond propre, sinon la couche média passerait dessous. Le fond
 * encre reste sur la section et sert de repli si la photographie ne charge pas.
 */
.pagehead__frame {
  position: relative;
  padding-top: calc(var(--nav-height-mobile) + var(--section-md));
  padding-bottom: var(--section-md);
}

@media (min-width: 1024px) {
  .pagehead__frame {
    padding-top: calc(var(--nav-height-desktop) + var(--section-md));
  }
}

.pagehead__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pagehead__frame > .container {
  position: relative;
  z-index: 2;
}

.pagehead__media picture,
.pagehead__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

/*
 * Voile en trois couches. Contrairement au hero de l'accueil, dont tout le
 * texte tient en bas à gauche, ce bandeau porte du texte des deux côtés à
 * mi-hauteur : une base uniforme est donc nécessaire, sans quoi le bloc de
 * droite retombe sur les zones claires de la photographie et devient illisible.
 */
.pagehead__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /*
   * Scrim SOMBRE localisé à gauche, texte ivoire par-dessus.
   *
   * Les images de bannière vont de 85 à 166 de luminance moyenne : aucun
   * voile clair unique ne pouvait convenir à toutes. Un scrim sombre, lui,
   * fonctionne sur toute la plage. Mesuré : même sur le pixel le plus clair
   * de ces photographies (valeur 200), l'ivoire conserve 6,3:1.
   *
   * Le dégradé s'éteint à 74 % : la photographie garde ses couleurs, son
   * ciel et sa matière sur toute la partie droite, là où se pose la carte.
   */
  background:
    linear-gradient(96deg,
      rgba(20, 24, 21, 0.78) 0%,
      rgba(20, 24, 21, 0.66) 26%,
      rgba(20, 24, 21, 0.38) 48%,
      rgba(20, 24, 21, 0.10) 64%,
      rgba(20, 24, 21, 0.00) 74%),
    /* Bande supérieure renforcée : sans elle, la marque en ivoire tombait
       sur les zones claires de la photographie et devenait illisible. */
    linear-gradient(to bottom,
      rgba(20, 24, 21, 0.62) 0%,
      rgba(20, 24, 21, 0.34) 12%,
      rgba(20, 24, 21, 0.04) 30%,
      rgba(20, 24, 21, 0.00) 55%);
}

/*
 * En portrait, le texte occupe toute la largeur : un scrim horizontal
 * laisserait la moitié droite des lignes sur l'image nue. Il devient donc
 * vertical, dense là où le texte se pose, transparent sur le haut de
 * l'image pour en préserver la matière.
 */
@media (max-width: 899px) {
  .pagehead__media::after {
    background:
      linear-gradient(to bottom,
        rgba(20, 24, 21, 0.55) 0%,
        rgba(20, 24, 21, 0.30) 18%,
        rgba(20, 24, 21, 0.58) 44%,
        rgba(20, 24, 21, 0.76) 100%);
  }
}


/*
 * Le bloc de droite tombe sur la partie la plus lumineuse de la photographie.
 * Plutôt que d'assombrir toute l'image, il porte son propre fond de verre :
 * la lecture est garantie et l'architecture reste visible tout autour.
 */
.pagehead--feature .pagehead__aside {
  /* Blanc quasi opaque : le graphite y tient 12,6:1 quelle que soit la photo */
  /* Le voile du bandeau étant désormais ivoire, ce panneau passe en blanc
     opaque : le graphite y tient 12,6:1 quelle que soit la photographie. */
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}

/* Colonne gauche : texte clair sur le scrim sombre */
.pagehead--feature .pagehead__head .label { color: rgba(247, 244, 238, 0.86); }
.pagehead--feature .pagehead__head .label .dot { background: var(--sauge); }

.pagehead--feature .pagehead__title {
  color: var(--ivoire);
  text-shadow: none;
}

.pagehead--feature .pagehead__title em { color: var(--sauge); }

.pagehead__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .pagehead__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: end;
  }
}

.pagehead--feature .pagehead__title {
  margin-bottom: 0;
  max-width: 15ch;
}

.pagehead--feature .pagehead__lead {
  max-width: 46ch;
}

.pagehead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5);
  margin: var(--space-7) 0 0;
  padding: 0;
}

.pagehead__meta li {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-dim);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--glass-bg-dark);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}


/* ── Pourquoi P2G existe ── */
.about-origin {
  padding: var(--section-lg) 0;
  border-bottom: 1px solid var(--color-border);
}

.about-origin__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 1024px) {
  .about-origin__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-20);
    align-items: start;
  }
}

.about-origin__title {
  font-size: var(--text-display-md);
  line-height: 1.04;
  margin-bottom: var(--space-6);
  max-width: 13ch;
}

.about-origin__text {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  margin-bottom: var(--space-5);
  max-width: 56ch;
}

.about-gaps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 640px) {
  .about-gaps { grid-template-columns: repeat(2, 1fr); }
}

.about-gap {
  background: var(--color-bg);
  padding: var(--space-7) var(--space-6) var(--space-8);
}

.about-gap__num {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-red);
  margin-bottom: var(--space-5);
}

.about-gap__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}

.about-gap__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}

.about-origin__note {
  margin-top: var(--space-8);
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-red-border);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 60ch;
}


/* ── Mission et approche 360° ── */
.about-mission {
  padding: var(--section-lg) 0;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}

.about-mission__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 1024px) {
  .about-mission__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-20);
  }
  /* La photographie accompagne la lecture de la colonne de texte */
  .about-mission__media {
    position: sticky;
    top: calc(var(--nav-height-desktop) + var(--space-10));
  }
}

.about-mission__media { margin: 0; }

.about-mission__media picture {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-mission__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.about-mission__caption {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.about-mission__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
  margin-bottom: var(--space-6);
  max-width: 17ch;
}

.about-mission__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  margin-bottom: var(--space-5);
  max-width: 58ch;
}

.about-scope {
  margin: var(--space-10) 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.about-scope__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 700px) {
  .about-scope__item {
    grid-template-columns: 32px minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: var(--space-6);
    align-items: baseline;
  }
}

.about-scope__num {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-red);
}

.about-scope__name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}

.about-scope__desc {
  grid-column: 2 / -1;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}

@media (min-width: 700px) {
  .about-scope__desc { grid-column: auto; }
}


/* ── Présence locale et interlocuteur unique ── */
.about-local { padding: var(--section-lg) 0; }

.about-local__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .about-local__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-20);
  }
}

.about-local__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
  margin-bottom: var(--space-6);
  max-width: 17ch;
}

.about-local__text {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 54ch;
}

.about-local__list {
  list-style: none;
  margin: var(--space-9) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5);
}

.about-local__list li {
  font-size: var(--text-base);
  color: var(--color-text-dim);
  padding-left: var(--space-7);
  position: relative;
}

.about-local__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 14px;
  height: 1px;
  background: var(--color-clay);
}

.about-local__media { margin: 0; }

.about-local__media picture {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-local__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.about-local__caption {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.about-flow-wrap {
  margin-top: var(--section-sm);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.about-flow__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.about-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
}

@media (min-width: 900px) {
  .about-flow {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10);
  }
}

.about-flow__step {
  position: relative;
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-red);
}

/* Filet de liaison : la responsabilité passe de gauche à droite */
@media (min-width: 900px) {
  .about-flow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: -1px;
    right: calc(-1 * var(--space-10));
    width: var(--space-10);
    height: 2px;
    background: var(--color-border-strong);
  }
}

.about-flow__who {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}

.about-flow__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 36ch;
}


/* ═══════════════════════════════════════════════════════════════
   DIASPORA — diaspora.html
   Préfixe .dsp- pour ne pas entrer en collision avec le bloc
   .diaspora de la page d'accueil.
   ═══════════════════════════════════════════════════════════════ */

/* ── Le contexte ── */
.dsp-context {
  padding: var(--section-lg) 0;
  border-bottom: 1px solid var(--color-border);
}

.dsp-context__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 1024px) {
  .dsp-context__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-20);
  }
}

.dsp-context__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
  margin-bottom: var(--space-6);
  max-width: 15ch;
}

.dsp-context__text {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  margin-bottom: var(--space-5);
  max-width: 56ch;
}

.dsp-context__panel {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.dsp-context__photo {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.dsp-context__photo picture,
.dsp-context__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dsp-context__panel-title {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-7) var(--space-7) var(--space-4);
}

.dsp-context__blocks {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-7) var(--space-8);
}

.dsp-context__blocks li {
  position: relative;
  padding: var(--space-3-5) 0 var(--space-3-5) var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}

.dsp-context__blocks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--space-3-5) + 0.62em);
  width: 12px;
  height: 1px;
  background: var(--color-red);
}


/* ── Ce que nous portons à votre place ── */
.dsp-carry {
  padding: var(--section-lg) 0;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}

.dsp-carry__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--section-sm);
}

@media (min-width: 1024px) {
  .dsp-carry__header {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: end;
  }
}

.dsp-carry__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
}

.dsp-carry__intro {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 54ch;
}

.dsp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 700px)  { .dsp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .dsp-steps {
    grid-template-columns: repeat(3, 1fr);
    border-radius: var(--radius-xl);
  }
}

.dsp-step {
  background: var(--color-surface-1);
  padding: var(--space-8) var(--space-7) var(--space-10);
  transition: background var(--transition-base);
}

.dsp-step:hover { background: var(--color-bg); }

.dsp-step__num {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-red);
  margin-bottom: var(--space-6);
}

.dsp-step__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}

.dsp-step__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}

.dsp-permit {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 900px) {
  .dsp-permit {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    border-radius: var(--radius-xl);
  }
}

.dsp-permit__media { aspect-ratio: 16 / 9; }

@media (min-width: 900px) {
  .dsp-permit__media { aspect-ratio: auto; }
}

.dsp-permit__media picture,
.dsp-permit__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dsp-permit__body { padding: var(--space-8) var(--space-7) var(--space-9); }

@media (min-width: 900px) {
  .dsp-permit__body { padding: var(--space-10); }
}

.dsp-permit__tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-clay);
  margin-bottom: var(--space-4);
}

.dsp-permit__title {
  font-size: var(--text-display-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin-bottom: var(--space-4);
}

.dsp-permit__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 56ch;
}

.dsp-permit__note {
  margin-top: var(--space-5);
  padding-left: var(--space-5);
  border-left: 1px solid var(--color-border-strong);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 54ch;
}


/* ── Le suivi à distance ── */
.dsp-remote { padding: var(--section-lg) 0; }

.dsp-remote__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--section-sm);
}

@media (min-width: 1024px) {
  .dsp-remote__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: end;
  }
}

.dsp-remote__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
}

.dsp-remote__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 52ch;
}

.dsp-rhythm {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 640px)  { .dsp-rhythm { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dsp-rhythm { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }

.dsp-beat {
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-red);
}

.dsp-beat__when {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: var(--space-4);
}

.dsp-beat__what {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}

.dsp-remote__foot {
  margin-top: var(--section-sm);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .dsp-remote__foot {
    grid-template-columns: minmax(0, 1.6fr) auto;
    gap: var(--space-16);
    align-items: center;
  }
}

.dsp-remote__money {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 68ch;
}


/* ── Cas d'usage ── */
.dsp-cases {
  padding: var(--section-lg) 0;
  border-bottom: 1px solid var(--color-border);
}

.dsp-cases__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--section-sm);
}

@media (min-width: 1024px) {
  .dsp-cases__header {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: end;
  }
}

.dsp-cases__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
}

/* Avertissement de nature : un cas d'usage n'est ni un client ni un chantier livré */
.dsp-cases__note {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 54ch;
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-border-strong);
}

.dsp-cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .dsp-cases__grid { grid-template-columns: repeat(3, 1fr); }
}

.dsp-case {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-7) var(--space-9);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.dsp-case:hover {
  border-color: var(--color-clay-border);
  transform: translateY(-2px);
}

.dsp-case__origin {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-5);
}

.dsp-case__title {
  font-size: var(--text-display-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug);
}

.dsp-case__situation {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}

.dsp-case__label {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.dsp-case__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}

.dsp-case__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-dim);
}

.dsp-case__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 1px;
  background: var(--color-clay);
}

.dsp-case__out {
  margin-top: auto;
  padding-top: var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}


/* ── Communication ── */
.dsp-comm {
  padding: var(--section-lg) 0;
  background: var(--color-surface-2);
}

.dsp-comm__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 1024px) {
  .dsp-comm__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-20);
  }
  .dsp-comm__media {
    position: sticky;
    top: calc(var(--nav-height-desktop) + var(--space-10));
  }
}

.dsp-comm__title {
  font-size: var(--text-display-md);
  line-height: 1.05;
  margin-bottom: var(--space-6);
  max-width: 15ch;
}

.dsp-comm__text {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  max-width: 54ch;
}

.dsp-comm__points {
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 640px) {
  .dsp-comm__points { grid-template-columns: repeat(2, 1fr); }
}

.dsp-point {
  background: var(--color-surface-1);
  padding: var(--space-7) var(--space-6) var(--space-8);
}

.dsp-point__title {
  display: inline-block;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  padding-top: var(--space-4);
  margin-bottom: var(--space-3);
  border-top: 2px solid var(--color-red);
}

.dsp-point__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}

.dsp-comm__media { margin: 0; }

.dsp-comm__media picture {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.dsp-comm__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.dsp-comm__caption {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}


/* ── Carte visuelle de fin de grille des étapes ──────────────────────────
   La grille de 7 étapes sur 3 colonnes laissait deux cases vides en
   dernière rangée. Cette carte occupe l'espace avec un visuel de fin de
   parcours et une légende, plutôt qu'un aplat sans contenu. */
.step--visual {
  grid-column: span 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-3);
}

@media (min-width: 1100px) {
  .step--visual { grid-column: span 2; flex-direction: row; }
}

.step__shot {
  flex: 1 1 55%;
  min-height: 200px;
  overflow: hidden;
}

.step__shot picture,
.step__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slower);
}

.step--visual:hover .step__shot img { transform: scale(1.03); }

.step__caption {
  flex: 1 1 45%;
  padding: var(--space-8) var(--space-7);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.step__caption-strong {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}


/* ── Bannières de page : variations de composition ───────────────────────
   Le motif est commun mais chaque page décale son cadrage, sa hauteur et
   la répartition de ses colonnes, pour éviter la bannière copiée-collée. */

.pagehead__media img { object-position: var(--pos, center 45%); }

.pagehead__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

/* Notre méthode : bandeau plus bas, texte plus large, image de plans */
.pagehead--method .pagehead__frame { padding-bottom: var(--section-sm); }
@media (min-width: 1024px) {
  .pagehead--method .pagehead__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

/* Projets : colonnes équilibrées, bandeau plus haut */
@media (min-width: 1024px) {
  .pagehead--works .pagehead__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
.pagehead--works .pagehead__frame { padding-top: calc(var(--nav-height-desktop) + var(--section-md)); }

/* Devis : le texte prime, l'aside reste étroit pour laisser voir la photo */
@media (min-width: 1024px) {
  .pagehead--quote .pagehead__inner { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr); }
}


/* ═══════════════════════════════════════════════════════════════
   BANNIÈRE SERVICES — svc-hero--feature
   Même famille que les autres bannières, composition propre :
   le titre à gauche sur scrim, et les cinq métiers listés à droite
   pour que le visiteur sache d'emblée ce que couvre P2G.
   ═══════════════════════════════════════════════════════════════ */

.svc-hero--feature {
  position: relative;
  background: var(--graphite);
  padding: calc(var(--nav-height-mobile) + var(--section-md)) 0 var(--section-md);
  overflow: hidden;
}

@media (min-width: 900px) {
  .svc-hero--feature {
    padding: calc(var(--nav-height-desktop) + var(--section-md)) 0 var(--section-md);
    min-height: 78svh;
    display: flex;
    align-items: center;
  }
}

.svc-hero__media { position: absolute; inset: 0; z-index: 0; }

.svc-hero__media picture,
.svc-hero__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}

.svc-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(98deg,
      rgba(18, 22, 19, 0.82) 0%,
      rgba(18, 22, 19, 0.68) 28%,
      rgba(18, 22, 19, 0.40) 50%,
      rgba(18, 22, 19, 0.12) 66%,
      rgba(18, 22, 19, 0.00) 80%),
    linear-gradient(to bottom,
      rgba(18, 22, 19, 0.70) 0%,
      rgba(18, 22, 19, 0.42) 9%,
      rgba(18, 22, 19, 0.08) 26%,
      rgba(18, 22, 19, 0.00) 60%);
}

.svc-hero--feature > .container { position: relative; z-index: 2; }

.svc-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 1024px) {
  .svc-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-16);
  }
}

.svc-hero--feature .label { color: rgba(247, 244, 238, 0.86); }
.svc-hero--feature .label .dot { background: var(--sauge); }

.svc-hero__title {
  font-size: clamp(2.375rem, 4.8vw + 1rem, 4.25rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.02;
  color: var(--ivoire);
  margin-bottom: var(--space-6);
}

.svc-hero__title em { color: var(--sauge); }

.svc-hero__desc {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgba(247, 244, 238, 0.90);
  max-width: 46ch;
  margin-bottom: var(--space-8);
}

.svc-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Panneau des cinq métiers */
.svc-hero__panel {
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-xl);
}

.svc-hero__panel-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.svc-hero__list {
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.svc-hero__list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3-5) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
}

.svc-hero__list li span {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-clay);
  flex-shrink: 0;
}

.svc-hero__panel-note {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-dim);
}



/* ═══════════════════════════════════════════════════════════════
   REPRISE MOBILE
   Le mobile n'est pas un desktop compressé. Cette section reprend
   la hauteur utile, la longueur de ligne, le rythme vertical et la
   taille des cibles, pour un défilement plus agréable.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 899px) {

  /* ── Hero : plus haut, plus respirant, texte mieux calibré ── */
  .hero__frame {
    min-height: 86svh;
    justify-content: flex-end;
    padding: var(--space-8) var(--space-6) var(--space-9);
  }

  .hero__eyebrow {
    font-size: 11px;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-5);
  }

  .hero__title {
    /* Une ligne de titre mobile confortable tourne autour de 11 signes.
       Au-delà, le titre occupe tout l'écran et étouffe la lecture. */
    font-size: clamp(2.375rem, 10.5vw, 3.125rem);
    line-height: 1.04;
    max-width: 12ch;
    margin-bottom: var(--space-6);
  }

  .hero__desc {
    font-size: var(--text-base);
    line-height: 1.62;
    max-width: 34ch;
  }

  .hero__aside { gap: var(--space-7); }

  .hero__ctas { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .hero__ctas .btn { width: 100%; height: 54px; font-size: var(--text-base); }

  /* ── Rythme vertical : sections plus resserrées, blocs plus aérés ── */
  .problem, .intro, .domains, .method, .control,
  .pledges, .works, .diaspora, .faq { padding: var(--section-sm) 0; }

  .showcase { padding: var(--section-md) 0; min-height: 0; }
  .closing  { padding: var(--section-md) 0; }

  /* ── Titres de section : plus courts, mieux hiérarchisés ── */
  .problem__title, .intro__title, .domains__title, .method__title,
  .control__title, .pledges__title, .works__title, .diaspora__title,
  .faq__title, .closing__title, .showcase__title {
    font-size: clamp(1.75rem, 7.4vw, 2.25rem);
    line-height: 1.1;
    max-width: 16ch;
  }

  .label { margin-bottom: var(--space-4); }

  /* ── Corps de texte : longueur de ligne maîtrisée ── */
  .problem__text, .intro__text, .method__intro, .control__text,
  .pledges__intro, .diaspora__text, .domains__intro, .closing__text {
    font-size: var(--text-base);
    line-height: 1.65;
    max-width: 38ch;
  }

  /* ── Cartes empilées : version verticale simple, sans sticky ── */
  .stack { gap: var(--space-6); }
  .stack__card { border-radius: var(--radius-lg); }
  .stack__body { padding: var(--space-7) var(--space-6) var(--space-8); }
  .stack__title { font-size: var(--text-xl); }
  .stack__media { aspect-ratio: 16 / 10; }

  /* ── Boutons : pleine largeur, cible confortable ── */
  .domains__foot .btn, .method__foot .btn, .works__foot .btn,
  .closing__ctas .btn, .diaspora__ctas .btn, .svc-hero__ctas .btn,
  .pagehead__ctas .btn {
    width: 100%;
    height: 54px;
    justify-content: center;
  }

  .closing__ctas, .diaspora__ctas, .svc-hero__ctas, .pagehead__ctas {
    flex-direction: column;
    align-items: stretch;
  }

  /* ── Bande de confiance : deux colonnes lisibles ── */
  .trustbar { padding: var(--section-xs) 0; }
  .trustbar__list { gap: var(--space-6) var(--space-5); }
  .trustbar__text { font-size: var(--text-sm); }

  /* ── Grille des étapes : une colonne, sans case visuelle ── */
  .method__steps { border-radius: var(--radius-lg); }
  .step { padding: var(--space-7) var(--space-6); }
  .step--visual { display: none; }

  /* ── Bannières intérieures : titre calibré, panneau détaché ── */
  .pagehead--feature .pagehead__frame,
  .svc-hero--feature {
    padding-top: calc(var(--nav-height-mobile) + var(--section-sm));
    padding-bottom: var(--section-sm);
  }

  .pagehead--feature .pagehead__title,
  .svc-hero__title {
    font-size: clamp(2.125rem, 9vw, 2.75rem);
    line-height: 1.06;
    max-width: 13ch;
  }

  .pagehead--feature .pagehead__aside,
  .svc-hero__panel { padding: var(--space-6); }

  .svc-hero__desc { font-size: var(--text-base); max-width: 36ch; }

  /* ── Le bouton WhatsApp ne doit jamais masquer un CTA de bas de section ── */
  .closing { padding-bottom: calc(var(--section-md) + 72px); }
}

@media (max-width: 380px) {
  /* Très petits écrans : on gagne de la largeur utile */
  :root { --container-px: 18px; }
  .hero__title { font-size: clamp(2.125rem, 10vw, 2.5rem); }
  .hero__frame { padding: var(--space-7) var(--space-5) var(--space-8); }
}