/* ═══════════════════════════════════════════════════════════
   loom — Feuille de style principale
   ═══════════════════════════════════════════════════════════

   TABLE DES MATIÈRES
   ------------------
   1.  Tokens / variables
   2.  Reset & base
   3.  Navigation (header fixe + variantes)
   4.  Hero (animation scroll)
   5.  Tagline
   6.  Scroll cue
   7.  Page-intro (bandeau ink des pages internes)
   8.  Services
   9.  Page-empty (portfolio)
   10. Boutons (système)
   11. Intro (hook sous le hero)
   12. Process (services — 4 étapes)
   13. CTA-band (bandeau audit gratuit)
   14. Manifeste (à propos)
   15. Valeurs (à propos)
   16. Contact — options + email direct
   17. Footer (partagé)
   18. Reduced motion
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   1. Tokens / variables
───────────────────────────────────────── */
:root {
  /* ─── Palette BRAND (≈ 90% des surfaces) ──────────────────────
     Palette canonique loom. Sur tout le site, tout ce qui n'est PAS
     une « carte projet » ou un « swatch journal » DOIT utiliser
     exclusivement ces 3 tokens — règle 3% Virgil sur le rouge fil. */
  --color-ink:    #1D1D1F;  /* Noir doux — fonds sombres, textes sur clair */
  --color-cream:  #FFFFFF;  /* Blanc pur — fonds dominants */
  --color-thread: #E63946;  /* Rouge — accents stratégiques uniquement */

  /* ─── Extension PORTFOLIO (≈ 10%, strictement scopée) ─────────
     Couleurs autorisées UNIQUEMENT dans les blocs « carte projet »
     et « swatch éditorial » qui jouent le rôle d'échantillons de
     tissu : grille clients sur l'accueil, vignettes du journal,
     orbites du hero. JAMAIS sur l'UI globale (boutons, nav, footer,
     texte courant, sections de fond). */
  /* Note règle 3 % Virgil — chaque swatch a bg coloré + fg neutre
     (cream ou ink) pour que le rouge thread (status "livré", arrow,
     accents…) reste la seule couleur qui interpelle sur les cartes.
     Pas de duo couleur/couleur qui fight le rouge. */
  --swatch-clay:      #B85A35;  /* terracotta atténué — KOMMA */
  --swatch-clay-fg:   #F4EADF;  /* crème chaude → texte sur clay */
  --swatch-forest:    #2B3D2B;  /* vert forêt — Studio Ourse */
  --swatch-forest-fg: #F0E6D2;  /* crème chaude → texte sur forest */
  --swatch-paper:     #F2EDE4;  /* off-white papier — Camille Hertz */
  --swatch-paper-fg:  #1D1D1F;  /* ink → texte sur paper */
  --swatch-petrol:    #173842;  /* petrol profond — projet 4 */
  --swatch-petrol-fg: #F4EADF;  /* crème chaude → texte sur petrol */

  /* Teintes pastel des cartes du journal */
  --tint-sky:    #D9E2EB;  /* Web */
  --tint-clay:   #F0D7C7;  /* Réseaux */
  --tint-sand:   #EFE2C7;  /* Branding */
  --tint-sage:   #DCE5D6;  /* Audit */

  /* Note règle 3 % Virgil — les orbites sont DANS la zone brand (hero),
     pas dans une zone portfolio. Donc retour à la palette stricte :
     uniquement ink + cream + thread. La 1re orbite garde le rouge, les
     3 autres passent en ink → laisse le rouge ressortir seul. */
  --orbit-ink:    #1D1D1F;
  --orbit-thread: #E63946;

  /* Typo édito 2026 :
     · Fraunces (variable, axe optical-size) en display → caractère "craft
       éditorial" qui matche la métaphore loom (tissage, métier d'art).
       Plus de personnalité que Inter, garde une lecture parfaite en grand.
     · Geist en body → grotesque raffiné moderne (fonte Vercel), moins
       générique que Inter, lecture nette à toutes les tailles.
     · JetBrains Mono inchangé en mono → kickers, prix, étiquettes. */
  /* Une seule famille pour tout le site : Inter.
     Variations de weight (400 body / 600-700 display) + italique pour la
     signature → DA simple et moderne, lisible partout, zéro chichi. */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Inter', sans-serif;
  --font-mono:    'Inter', ui-monospace, monospace;

  /* Hauteur approximative du header fixe ; sert à caler le sticky
     des cartes pour qu'elles s'arrêtent juste sous le header. */
  --header-h: 80px;

  /* ═══════════════════════════════════════════════════════════
     DESIGN SYSTEM v2 — Tokens fermés (cohabitation avec l'ancien)
     Chaque échelle est verrouillée à un nombre fini de valeurs pour
     remplacer les magic numbers. Migration progressive section par
     section. Tant qu'un sélecteur utilise encore une valeur en dur,
     il continuera de fonctionner — les anciennes règles ne sont pas
     supprimées tant que la section n'a pas été refactorée.
     ═══════════════════════════════════════════════════════════ */

  /* ─── 1. Scale typographique — 8 valeurs, ratio 1.25 fluide ─── */
  --text-xs       : 12px;                         /* mono labels, tags */
  --text-sm       : 14px;                         /* small body, footer */
  --text-base     : clamp(15px, 0.95vw + 0.4rem, 17px);
  --text-lg       : clamp(18px, 1.4vw, 22px);     /* lede */
  --text-xl       : clamp(22px, 2vw, 30px);       /* sub-headings */
  --text-2xl      : clamp(30px, 3.5vw, 48px);     /* h3 */
  --text-3xl      : clamp(40px, 5.5vw, 72px);     /* h2 */
  --text-4xl      : clamp(56px, 8.5vw, 112px);    /* h1 page */
  --text-display  : clamp(72px, 12vw, 168px);     /* hero */

  /* ─── 2. Spacing — base 4 px, 9 paliers ─── */
  --space-1  : 4px;
  --space-2  : 8px;
  --space-3  : 12px;
  --space-4  : 16px;
  --space-5  : 24px;
  --space-6  : 32px;
  --space-7  : 48px;
  --space-8  : 64px;
  --space-9  : 96px;

  /* Section padding fluide + container max-width */
  --section-y : clamp(80px, 12vw, 160px);
  --section-x : clamp(24px, 6vw, 80px);
  --container : 1320px;

  /* ─── 3. Border-radius — 4 valeurs ─── */
  --radius-sm   : 6px;       /* inputs, small buttons */
  --radius-md   : 14px;      /* cards moyennes */
  --radius-lg   : 24px;      /* cards hero, panels */
  --radius-full : 999px;     /* pills, nav menu */

  /* ─── 4. Elevations — 3 ombres subtiles ─── */
  --shadow-1 : 0 1px 2px rgba(29, 29, 31, 0.06), 0 1px 3px rgba(29, 29, 31, 0.04);
  --shadow-2 : 0 4px 12px rgba(29, 29, 31, 0.08), 0 2px 6px rgba(29, 29, 31, 0.04);
  --shadow-3 : 0 20px 50px rgba(29, 29, 31, 0.12), 0 8px 16px rgba(29, 29, 31, 0.06);

  /* ─── 5. Motion — 2 easings, 3 durées ─── */
  --ease-out    : cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out : cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast    : 150ms;
  --dur-base    : 250ms;
  --dur-slow    : 450ms;

  /* ─── 6. Letter-spacing — 4 valeurs ─── */
  --track-tight  : -0.04em;   /* display ≥ 72 px */
  --track-snug   : -0.02em;   /* titres 24-56 px */
  --track-normal : 0;
  --track-wide   : 0.18em;    /* mono kickers/eyebrows */

  /* ─── 7. Line-heights — 4 valeurs ─── */
  --leading-tight   : 1.05;   /* display, hero */
  --leading-snug    : 1.2;    /* h2/h3 */
  --leading-normal  : 1.55;   /* body */
  --leading-loose   : 1.75;   /* long form articles */

  /* ─── 8. Breakpoints — 4 valeurs (référence pour les @media) ─── */
  /* Note : ces tokens sont indicatifs. Les @media en CSS standard ne
     peuvent pas utiliser var(), donc on garde les valeurs en dur dans
     les @media mais on s'aligne sur ces 4 seuils uniquement. */
  --bp-sm : 640px;
  --bp-md : 768px;
  --bp-lg : 1024px;
  --bp-xl : 1280px;
}

@media (max-width: 600px) {
  :root {
    --header-h: 64px;
  }
}

/* ─────────────────────────────────────────
   2. Reset & base
───────────────────────────────────────── */

/* Utilitaire : masque visuellement un élément tout en le gardant
   accessible aux lecteurs d'écran et aux moteurs de recherche. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — accessible au focus clavier uniquement */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--color-ink);
  color: var(--color-cream);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-thread);
  border-radius: 4px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--color-thread);
  outline-offset: 2px;
}
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Scroll fluide pour les clics sur ancres (#contenu, #form, etc.) */
  scroll-behavior: smooth;
}

html, body {
  background: var(--color-ink);
  color: var(--color-cream);
  /* Sécurité contre tout débordement horizontal qui créerait
     un scrollbar horizontal sur grand écran. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  /* Active l'axe optical-size variable de Fraunces : les petits textes
     utilisent un dessin plus contrasté (lisibilité), les grands titres
     un dessin plus ouvert (présence). C'est ça qui rend la typo
     "moderne édito" plutôt que "Google Fonts standard". */
  font-optical-sizing: auto;
  /* Ligatures + chiffres tabulaires actifs pour les détails soignés. */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Sur les titres, on tire un peu plus sur les ligatures alternatives et
   les optical-sizing pour de gros corps. Fraunces brille en grand. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

a { color: inherit; }

/* ─────────────────────────────────────────
   2a-bis. Baseline UX/a11y universelle (skill ui-ux-pro-max)
   - Sécurité responsive sur toutes les images
   - cursor: pointer explicite sur les éléments cliquables
   - Focus ring fallback si aucune règle spécifique
   - Touch target minimum 44px sur petit pointer (mobile)
   - Smooth scrolling avec respect du reduced-motion
───────────────────────────────────────── */

/* Images : ne débordent jamais leur conteneur, ratio préservé.
   SVG exclu volontairement — les icônes inline ont des dimensions fixées via
   width/height attribute et bouger leur display global casserait le layout. */
img, picture, video {
  max-width: 100%;
  height: auto;
}

/* Cursor pointer sur tout ce qui est cliquable, même si le navigateur
   pose un défaut différent (ex. button sans hover styling). */
button,
[role="button"],
summary,
[type="submit"],
[type="reset"],
[type="button"] {
  cursor: pointer;
}

/* Focus ring de secours — toute élément focusable qui n'a pas son propre
   :focus-visible bénéficie d'un anneau rouge visible. */
:focus-visible {
  outline: 2px solid var(--color-thread);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Touch target : sur pointeur grossier (mobile, tablette), les éléments
   interactifs visuellement petits passent au minimum à 44×44 px (WCAG 2.5.5).
   Volontairement exclu : .nav-menu-link (taille pilotée par le calc du panel
   dropdown — toucher cette valeur casse l'animation du curseur crème). */
@media (pointer: coarse) {
  .footer-social-link,
  .hero-corner--link,
  .clients-cta,
  .services-v2-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Smooth scrolling natif, désactivé si l'utilisateur préfère moins de mouvement. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Grain de papier retiré — il faisait virer le blanc en crème.
   Si on veut le réactiver un jour, le bloc body::after est dans
   l'historique git. */

/* ─────────────────────────────────────────
   3. Header — askphill-style
   - Conteneur fixe transparent, grille 3 colonnes (gauche / centre / droite)
   - Menu pilule rouge à gauche
   - Logo loom entier au centre, en mix-blend-difference (s'adapte au fond)
   - Bouton Contact pilule rouge à droite
───────────────────────────────────────── */

.loom-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Le header forme un stacking context au-dessus de TOUT le contenu
     de la page — le menu et le bouton Contact restent toujours visibles.
     Le logo est désormais en dehors du header (z-10001) pour que son
     mix-blend-difference puisse traverser jusqu'au contenu de la page. */
  z-index: 10000;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  pointer-events: none;        /* laisse passer les clics au contenu */
}
.loom-header > * {
  pointer-events: auto;
}

/* Logo loom — lettres en mix-blend-mode: difference, ligne rouge superposée
   en élément frère SANS blend pour qu'elle reste rouge sur tous les fonds.
   Sorti du <header> pour que le blend traverse jusqu'à la page (pas isolé). */
.loom-logo-fixed {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  display: block;
  height: 32px;
  line-height: 0;
  text-decoration: none;
  color: #ffffff;              /* blanc pur — math du blend propre */
  mix-blend-mode: difference;  /* s'applique aux lettres (et seulement à elles) */
  transition: transform 0.2s ease;
}
.loom-logo-fixed:hover {
  transform: translateX(-50%) translateY(-1px);
}

/* La ligne rouge — frère du <a>, même position, AUCUN blend → reste rouge. */
.loom-logo-line {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10002;              /* par-dessus les lettres */
  display: block;
  height: 32px;
  line-height: 0;
  pointer-events: none;        /* laisse passer le clic au <a> en dessous */
}
.loom-logo-line svg {
  display: block;
  height: 100%;
  width: auto;
  overflow: visible;
}
.loom-logo-svg {
  display: block;
  height: 100%;
  width: auto;
  overflow: visible;
}
/* Les 3 lettres prennent la couleur du parent (currentColor) ;
   la ligne rouge reste toujours rouge. */
.loom-logo-svg path:not(.logo-line) {
  fill: currentColor;
}
.loom-logo-svg .logo-line {
  stroke: var(--color-thread);
}

/* Bouton Contact, en haut à droite — même DA que la pilule Menu. */
.loom-contact-btn {
  justify-self: end;
  position: relative;
  z-index: 50;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  /* Liquid glass dark — gradient padding-box + bord réfractif border-box.
     Texte cream + backdrop-filter pour fondre dans le contexte de page. */
  background:
    linear-gradient(155deg,
      rgba(20, 20, 22, 0.78) 0%,
      rgba(10, 10, 12, 0.68) 45%,
      rgba(20, 20, 22, 0.74) 100%) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.3) 100%) border-box;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid transparent;
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  text-decoration: none;
  border-radius: 999px;
  /* Specular insets : highlight top-left, ombre bottom-right (lumière haut-gauche) */
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.32),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.04),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.03),
    0 6px 18px -6px rgba(29, 29, 31, 0.35);
  transition: background 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease;
  white-space: nowrap;
}
.loom-contact-btn:hover {
  background:
    linear-gradient(155deg,
      rgba(28, 28, 30, 0.86) 0%,
      rgba(18, 18, 20, 0.78) 45%,
      rgba(28, 28, 30, 0.82) 100%) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(255, 255, 255, 0.14) 50%,
      rgba(255, 255, 255, 0.4) 100%) border-box;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.4),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.05),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.04),
    0 12px 28px -8px rgba(29, 29, 31, 0.5);
  transform: translateY(-1px);
}
.loom-contact-btn:active { transform: scale(0.97); }

/* ─────────────────────────────────────────
   3b. Menu déroulant askphill-style
   La même pilule rouge sert de bouton ET de panneau :
   - Fermée : pilule à hauteur du bouton (40px), opacité 0 (invisible)
   - Ouverte : la pilule grandit en hauteur pour révéler les liens en dessous
   Le bouton "Menu" reste z-2 par-dessus la pilule, comme askphill.
───────────────────────────────────────── */

.nav-menu {
  --nm-color: var(--color-ink);
  --nm-accent: var(--color-cream);
  --nm-btn-h: 40px;
  --nm-btn-w: 121px;
  --nm-btn-hover-w: 161px;      /* au survol : le bouton s'allonge à la largeur du panneau */
  --nm-panel-w: 161px;          /* askphill : panneau légèrement plus large que le bouton */
  --nm-circle: 32px;
  --nm-link-h: 44px;
  --nm-pad: 10px;
  position: relative;
  z-index: 50;                  /* au-dessus du contenu (mais sous le logo blend) */
  justify-self: start;
  font-family: var(--font-body);
  line-height: 1;
  width: var(--nm-panel-w);     /* réserve l'espace même quand fermé */
  height: var(--nm-btn-h);
}

/* Bouton Menu — toujours visible, z-2, centré dans le conteneur (donc visuellement
   au milieu de la pilule de panneau qui est plus large). */
.nav-menu-btn {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--nm-btn-h);
  width: var(--nm-btn-w);
  padding: 4px;
  /* Liquid glass dark — même langage que .loom-contact-btn et .orbit-info */
  background:
    linear-gradient(155deg,
      rgba(20, 20, 22, 0.78) 0%,
      rgba(10, 10, 12, 0.68) 45%,
      rgba(20, 20, 22, 0.74) 100%) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.3) 100%) border-box;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid transparent;
  color: var(--nm-accent);
  border-radius: 999px;
  cursor: pointer;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.32),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.04),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.03),
    0 6px 18px -6px rgba(29, 29, 31, 0.35);
  transition:
    width 0.48s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease,
    box-shadow 0.3s ease;
  font-family: inherit;
}
/* Au survol — et quand le menu est ouvert — le bouton s'allonge à la largeur
   du panneau, le cercle roule vers le milieu, le label "Menu" s'efface, et
   les reflets du verre s'intensifient. */
.nav-menu-btn:hover,
.nav-menu.is-open .nav-menu-btn {
  width: var(--nm-btn-hover-w);
  background:
    linear-gradient(155deg,
      rgba(28, 28, 30, 0.86) 0%,
      rgba(18, 18, 20, 0.78) 45%,
      rgba(28, 28, 30, 0.82) 100%) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(255, 255, 255, 0.14) 50%,
      rgba(255, 255, 255, 0.4) 100%) border-box;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.4),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.05),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.04),
    0 12px 28px -8px rgba(29, 29, 31, 0.5);
}
.nav-menu-btn:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

.nav-menu-btn-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nm-circle);
  height: var(--nm-circle);
  border-radius: 50%;
  background: var(--nm-accent);
  color: var(--nm-color);
  flex-shrink: 0;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Roule vers le milieu de la pilule étendue (translate + rotation complète). */
.nav-menu-btn:hover .nav-menu-btn-circle,
.nav-menu.is-open .nav-menu-btn-circle {
  transform:
    translateX(calc((var(--nm-btn-hover-w) / 2) - 4px - (var(--nm-circle) / 2)))
    rotate(360deg);
}

.nav-menu-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  display: block;
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.nav-menu-icon-close {
  opacity: 0;
  transform: rotate(-90deg);
}
.nav-menu.is-open .nav-menu-icon-burger {
  opacity: 0;
  transform: rotate(90deg);
}
.nav-menu.is-open .nav-menu-icon-close {
  opacity: 1;
  transform: rotate(0);
}

.nav-menu-btn-label {
  flex: 1;
  text-align: center;
  padding-right: 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--nm-accent);
  line-height: 1;
  transition: opacity 0.28s ease;
}
/* Le cercle roule par-dessus le label → on l'efface au survol pour laisser
   place à l'animation, comme askphill. */
.nav-menu-btn:hover .nav-menu-btn-label,
.nav-menu.is-open .nav-menu-btn-label {
  opacity: 0;
}

/* Panneau pilule rouge — collé au top, même largeur que le conteneur (--nm-panel-w),
   hauteur = celle du bouton quand fermé (et opacité 0 → invisible). Grandit à l'ouverture. */
.nav-menu-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--nm-btn-h);
  padding: var(--nm-pad);
  padding-top: calc(var(--nm-btn-h) + 4px);
  /* Liquid glass dark — pour que le panneau ouvert raccorde le bouton
     sans cassure visuelle. Même formule que .nav-menu-btn. */
  background:
    linear-gradient(155deg,
      rgba(20, 20, 22, 0.82) 0%,
      rgba(10, 10, 12, 0.72) 45%,
      rgba(20, 20, 22, 0.78) 100%) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.3) 100%) border-box;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid transparent;
  border-radius: 22px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.32),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.04),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.03),
    0 14px 32px -10px rgba(0, 0, 0, 0.22),
    0 4px 12px -4px rgba(0, 0, 0, 0.14);
  transition: height 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.28s ease;
  z-index: 1;
  color: var(--nm-accent);
}
.nav-menu.is-open .nav-menu-panel {
  opacity: 1;
  pointer-events: auto;
  /* 5 liens × hauteur + zone bouton + padding-bottom (contact retiré,
     déjà présent en haut-droite du header) */
  height: calc(var(--nm-btn-h) + 4px + (5 * var(--nm-link-h)) + var(--nm-pad));
}

.nav-menu-link {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--nm-link-h);
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  text-transform: capitalize;
  color: var(--nm-accent);
  border-radius: 999px;
  transition: color 0.22s ease;
  flex-shrink: 0;
}
.nav-menu-link:hover,
.nav-menu-link:focus-visible,
.nav-menu-link.is-current {
  color: var(--nm-color);
  outline: none;
}
.nav-menu-link--cta {
  font-weight: 700;
}

/* Curseur crème qui glisse sous le lien actif/survolé.
   Top de départ = juste sous la zone bouton + petit gap. */
.nav-menu-cursor {
  position: absolute;
  left: var(--nm-pad);
  right: var(--nm-pad);
  top: calc(var(--nm-btn-h) + 4px);
  height: var(--nm-link-h);
  background: var(--nm-accent);
  border-radius: 999px;
  z-index: 1;
  opacity: 0;
  transform: translateY(var(--nm-cursor-y, 0));
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.22s ease;
  pointer-events: none;
}
.nav-menu.is-open .nav-menu-cursor {
  opacity: 1;
}

/* Mobile — légèrement plus compact. La pilule reste lisible. */
@media (max-width: 600px) {
  .loom-header {
    padding: 14px 16px;
    gap: 12px;
  }
  .loom-logo-fixed,
  .loom-logo-line { height: 26px; top: 14px; }
  .loom-contact-btn {
    height: 36px;
    padding: 0 16px;
    font-size: 19px;
  }
  .nav-menu {
    --nm-btn-w: 104px;
    --nm-btn-hover-w: 140px;
    --nm-panel-w: 140px;
    --nm-btn-h: 36px;
    --nm-circle: 28px;
    --nm-link-h: 40px;
  }
  .nav-menu-btn-label {
    font-size: 19px;
  }
}

/* ─────────────────────────────────────────
   MODAL DE RÉSERVATION — slide-up plein écran
   Trigger : tout élément avec data-modal="reservation"
   Bloque le scroll du body, ferme par X / Échap / clic backdrop
───────────────────────────────────────── */
.reservation-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  visibility: hidden;
}

.reservation-modal.is-open {
  pointer-events: auto;
  visibility: visible;
}

.reservation-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(29, 29, 31, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s ease;
  cursor: pointer;
}

.reservation-modal.is-open .reservation-modal-backdrop {
  opacity: 1;
}

.reservation-modal-panel {
  position: relative;
  margin-top: auto;
  width: 100%;
  height: 96vh;
  max-height: 96vh;
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  transform: translateY(100%);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.25);
}

.reservation-modal.is-open .reservation-modal-panel {
  transform: translateY(0);
}

.reservation-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(29, 29, 31, 0.14);
  border-radius: 50%;
  color: var(--color-ink);
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.reservation-modal-close:hover {
  background: var(--color-ink);
  color: var(--color-cream);
  transform: scale(1.05);
}

.reservation-modal-header {
  padding: clamp(28px, 4vw, 48px) clamp(24px, 5vw, 64px) clamp(20px, 2.5vw, 28px);
  background: #ffffff;
  border-bottom: 1px solid rgba(29, 29, 31, 0.06);
  flex-shrink: 0;
}

.reservation-modal-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.55);
  margin-bottom: 14px;
}

.reservation-modal-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  max-width: 20ch;
}

/* Zone iframe : aucun scroll du conteneur (overflow hidden).
   L'iframe Google gère son propre scroll en interne si besoin. */
.reservation-modal-frame {
  flex: 1;
  overflow: hidden;
  background: #ffffff;
}

.reservation-modal-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
}

@media (max-width: 768px) {
  .reservation-modal-panel {
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reservation-modal-panel {
    transition: none;
  }
  .reservation-modal-backdrop {
    transition: none;
  }
}

/* ─────────────────────────────────────────
   RESERVATION — page dédiée avec iframe Google natif
   L'iframe Google a un fond blanc qu'on ne peut pas changer
   (cross-origin), donc on met le wrapper en blanc aussi pour
   que ça blend, encadré d'une ombre crème → effet "feuille".
───────────────────────────────────────── */
.reservation-section {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 60px) clamp(60px, 9vw, 110px);
}

.reservation-inner {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: clamp(14px, 1.8vw, 22px);
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 14px 56px -24px rgba(29, 29, 31, 0.3);
  border: 1px solid rgba(29, 29, 31, 0.08);
}

.reservation-iframe {
  display: block;
  width: 100%;
  height: 1500px;
  border: 0;
  background: #ffffff;
}

@media (max-width: 1024px) {
  .reservation-iframe {
    height: 1600px;
  }
}

@media (max-width: 768px) {
  .reservation-iframe {
    height: 1750px;
  }
}

@media (max-width: 480px) {
  .reservation-iframe {
    height: 1900px;
  }
}

/* ─────────────────────────────────────────
   4. Hero pitch — version actuelle (cf. id="anim-hero")
   Fond gris très clair, titre XXL centré, carte CTA noire.
   Le bloc .hero plus bas est conservé pour compat héritée
   mais n'est plus utilisé par index.html.
───────────────────────────────────────── */
.hero-pitch {
  background: var(--color-ink);
  color: var(--color-cream);
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* top : laisse de l'air sous le header fixe — bottom : --section-y */
  padding: clamp(120px, 16vh, 180px) var(--section-x) var(--section-y);
  position: relative;
  overflow: hidden;
}
/* Aura claire diffuse derrière le bloc — deux gradients radiaux pour donner
   de la profondeur sur le fond sombre, sans surcharger. */
.hero-pitch::before,
.hero-pitch::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}
.hero-pitch::before {
  /* Halo principal autour du titre */
  width: clamp(420px, 60vw, 880px);
  height: clamp(420px, 60vw, 880px);
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.05) 35%,
    transparent 70%
  );
  filter: blur(40px);
}
.hero-pitch::after {
  /* Halo secondaire plus serré derrière la carte CTA */
  width: clamp(360px, 45vw, 620px);
  height: clamp(220px, 30vw, 360px);
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.06) 40%,
    transparent 75%
  );
  filter: blur(50px);
}
.hero-pitch-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Largeur élargie pour laisser respirer le titre. Le sub-titre et la
     carte gardent leurs propres max-widths plus serrées, ça ne les
     déforme pas. */
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-pitch-title {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  /* Range custom (38px min) pour que "Affirmez votre" tienne sur 1 ligne
     même sur iPhone SE — c'est plus serré que --text-display standard. */
  font-size: clamp(38px, 11vw, 140px);
  line-height: 0.94;                  /* tighter que --leading-tight, voulu pour display ≥ 8rem */
  letter-spacing: var(--track-tight); /* -0.04em */
  color: var(--color-cream);
  /* Réserve la hauteur de 2 lignes — évite tout layout shift entre phrases */
  min-height: calc(0.94em * 2);
  width: 100%;
}

/* Chaque phrase occupe le même emplacement ; on les fait alterner en
   fade vertical doux. État piloté par JS via la classe .is-current
   (auto-rotation + avance immédiate au survol). */
.hero-pitch-phrase {
  /* Flex column → chaque ligne est un item indépendant, centré sur
     l'axe horizontal via align-items: center. Chaque ligne se
     dimensionne à son propre contenu (pas de bloc 100% qui fausse
     le centrage). */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.hero-pitch-phrase.is-current {
  opacity: 1;
  transform: translateY(0);
}
.hero-pitch-phrase.is-leaving {
  opacity: 0;
  transform: translateY(-14px);
}
/* Fallback NO-JS uniquement : si JS n'est pas dispo, on affiche la 1ʳᵉ
   phrase et on cache les 2 autres. La classe .js est posée par un script
   inline en tête de <head>, donc dès que JS tourne, cette règle est
   neutralisée et c'est .is-current / .is-leaving qui pilotent tout.
   IMPORTANT : sans ce scope, après que le JS retire .is-leaving au bout
   de 700 ms, la phrase 1 redevenait opacity 1 par la règle .--1 →
   superposition avec la phrase 2 en cours d'affichage. */
html:not(.js) .hero-pitch-phrase--1 {
  opacity: 1;
  transform: translateY(0);
}
html:not(.js) .hero-pitch-phrase--2,
html:not(.js) .hero-pitch-phrase--3 {
  display: none;
}

/* Curseur "interactif" quand on survole le titre — indique qu'on peut
   forcer le changement en passant dessus. */
.hero-pitch-title { cursor: pointer; }

.hero-pitch-line {
  /* Item flex auto-dimensionné à son contenu → vraiment centré.
     White-space nowrap pour rester sur 1 ligne. */
  position: relative;
  display: block;
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
}

/* Accent rouge — point final de chaque phrase. Sorti du flux
   (position: absolute) pour ne pas décaler le centrage de la ligne :
   sans ça, "marque." est centré incluant le point, ce qui pousse
   visuellement le mot "marque" un peu à gauche par rapport à
   "Affirmez votre" au-dessus. */
.hero-pitch-dot {
  position: absolute;
  left: 100%;
  bottom: 0;
  color: var(--color-thread);
}

@media (prefers-reduced-motion: reduce) {
  .hero-pitch-phrase {
    transition: opacity 0.15s linear;
    transform: none !important;
  }
  .hero-pitch-title { cursor: default; }
}

.hero-pitch-sub {
  /* Air généreux : sub plus aéré (gap au titre + au card) que dans v1 */
  margin: var(--space-6) 0 var(--space-7);
  font-family: var(--font-body);
  font-weight: 300;                    /* poids 300 = sensation premium, contraste avec le 800 du titre */
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  letter-spacing: var(--track-normal);
  color: rgba(255, 255, 255, 0.72);    /* cream à 72 % sur ink → ratio AA garanti */
  max-width: 52ch;                     /* augmenté de 44 → 52ch : moins serré, plus éditorial */
}
.hero-pitch-sub em {
  font-style: italic;
  color: #ffffff;                      /* italique = cream pur, contraste fort vs reste à 72 % */
  font-weight: 400;
}

/* ── Carte CTA blanche — élévation tokenisée, hover subtil ── */
.hero-pitch-card {
  width: 100%;
  max-width: 520px;
  /* Liquid glass — fond translucide qui laisse passer le ink du hero,
     backdrop-filter pour le flou frosted, saturate pour le côté "verre
     humide" légèrement vibrant. Inset top highlight = "rim light" comme
     sur une vraie pièce de verre éclairée par le haut. */
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),     /* rim light haut */
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),          /* ombre interne basse */
    0 8px 24px -10px rgba(0, 0, 0, 0.28),        /* ombre courte sous le verre */
    0 28px 70px -24px rgba(0, 0, 0, 0.45);       /* ombre longue de profondeur */
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    background var(--dur-slow) var(--ease-out);
  will-change: transform;
}
.hero-pitch-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 12px 32px -10px rgba(0, 0, 0, 0.32),
    0 36px 90px -24px rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .hero-pitch-card {
    transition: none;
  }
  .hero-pitch-card:hover {
    transform: none;
  }
}

.hero-pitch-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 56px;
  padding: 0 var(--space-5);
  background: var(--color-thread);      /* rouge thread → CTA principal */
  color: var(--color-cream);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: var(--track-normal);
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}
.hero-pitch-primary:hover {
  background: #d62f3c;                  /* thread légèrement assombri */
  transform: translateY(-1px);
}
.hero-pitch-primary:active { transform: scale(0.98); }
.hero-pitch-primary-icon { transition: transform var(--dur-base) var(--ease-out); }
.hero-pitch-primary:hover .hero-pitch-primary-icon {
  transform: translate(2px, -2px);
}

.hero-pitch-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);                  /* 8px */
}

.hero-pitch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;                         /* 44 + air */
  padding: 0 var(--space-4);            /* 16px */
  background: #F4F4F5;                  /* neutre clair, contraste subtle vs cream pur de la carte */
  color: var(--color-ink);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: var(--track-normal);
  text-decoration: none;
  transition:
    background var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.hero-pitch-btn:hover {
  background: #E8E8E9;
  transform: translateY(-1px);
}
.hero-pitch-btn:active { transform: scale(0.98); }

/* ── Stats ── */
.hero-pitch-stats {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: var(--space-4) var(--space-2) var(--space-1);
  border-top: 1px solid rgba(29, 29, 31, 0.08);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.hero-pitch-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  position: relative;
}
.hero-pitch-stats li + li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(29, 29, 31, 0.08);
}

.hero-pitch-stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: var(--track-snug);
  color: var(--color-ink);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.hero-pitch-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.55);
  line-height: 1.3;
  text-align: center;
}

@media (max-width: 520px) {
  .hero-pitch-card {
    padding: 14px;
    border-radius: 20px;
  }
  .hero-pitch-primary {
    height: 52px;
    font-size: 15px;
  }
  .hero-pitch-btn {
    height: 44px;
    font-size: 13px;
  }
  .hero-pitch-stat-num {
    font-size: 17px;
  }
  .hero-pitch-stat-label {
    font-size: 8.5px;
    letter-spacing: 0.14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pitch-primary,
  .hero-pitch-btn,
  .hero-pitch-primary-icon {
    transition: none;
  }
}

/* ─────────────────────────────────────────
   4. Hero — manifesto éditorial brutaliste (LEGACY, non utilisé)
   Pleine hauteur, fond ink, trame de points subtile,
   4 coins en mono, manifeste serif cascadé, rotateur "now"
───────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  background: var(--color-ink);
  color: var(--color-cream);
  padding:
    clamp(140px, 17vh, 200px)        /* top — laisse de l'air sous le header */
    clamp(28px, 6vw, 88px)
    clamp(96px, 11vh, 140px);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  overflow: hidden;
  isolation: auto;
}

/* Petit point qui pulse — status "live, disponible" */
.hero-dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-thread);
  box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.55);
  animation: hero-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hero-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.55); }
  60%      { box-shadow: 0 0 0 10px rgba(230, 57, 70, 0); }
}

@keyframes hero-line-in {
  to { opacity: 1; transform: translateY(0); }
}

/* — Rotateur "now" — mono, défilement vertical des verbes — */
.hero-now {
  position: relative;
  z-index: 2;
  justify-self: center;
  align-self: end;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: clamp(8px, 2vh, 24px);
  color: var(--color-cream);
  opacity: 0;
  animation: hero-line-in 0.8s ease-out 0.95s forwards;
}
@keyframes hero-now-cycle {
  0%, 22%   { transform: translateY(0); }
  25%, 47%  { transform: translateY(-1.2em); }
  50%, 72%  { transform: translateY(-2.4em); }
  75%, 97%  { transform: translateY(-3.6em); }
  100%      { transform: translateY(-4.8em); } /* boucle propre */
}

/* — Mobile — réduit les cascades pour pas déborder — */
@media (max-width: 768px) {
  .hero {
    padding:
      clamp(120px, 16vh, 160px)
      24px
      clamp(80px, 10vh, 110px);
    min-height: 92svh;
  }
  .hero-statement {
    font-size: clamp(46px, 14vw, 96px);
    letter-spacing: -0.03em;
  }
  .hero-line[data-line="01"] { padding-left: 0; }
  .hero-line[data-line="02"] { padding-left: 7vw; }
  .hero-line[data-line="03"] { padding-left: 18vw; }
  .hero-line[data-line="04"] { padding-left: 5vw; }
  .hero-corner {
    font-size: 9px;
    letter-spacing: 0.14em;
    gap: 7px;
  }
  .hero-corner-rule { width: 14px; }
  /* En mobile, on cache les coins haut-droit + bas-droit pour éviter la collision
     avec le bouton Contact et la place réduite. */
  .hero-corner--tr,
  .hero-corner--br {
    display: none;
  }
  .hero-now {
    font-size: 11px;
  }
}

/* ─────────────────────────────────────────
   HERO CTA — 3 boutons (Réserver / WhatsApp / Email)
   Sous le hero, en pleine largeur, glass sur fond noir.
───────────────────────────────────────── */
.hero-cta {
  background: var(--color-ink);
  padding: clamp(20px, 3vh, 36px) clamp(20px, 5vw, 60px) clamp(60px, 9vw, 120px);
}

.hero-cta-btn--primary {
  background: rgba(230, 57, 70, 0.85);
  border-color: rgba(230, 57, 70, 0.55);
}

.hero-cta-btn--primary:hover {
  background: rgba(214, 47, 60, 0.92);
  border-color: rgba(230, 57, 70, 0.8);
}

.hero-cta-btn--primary .hero-cta-icon {
  background: rgba(255, 255, 255, 0.15);
}

.hero-cta-btn--primary .hero-cta-meta {
  color: rgba(255, 255, 255, 0.75);
}

/* Les flèches ↗ sont retirées — on garde les boutons épurés. */

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

@keyframes pulse {
  0%, 100% { transform: translateY(0);   opacity: 0.38; }
  50%       { transform: translateY(7px); opacity: 0.70; }
}

/* ─────────────────────────────────────────
   7. Page-intro — bandeau ink en haut des pages internes
───────────────────────────────────────── */
.page-intro {
  background: var(--color-ink);
  color: var(--color-cream);
  padding: clamp(115px, 14vw, 175px) clamp(24px, 6vw, 80px) clamp(50px, 8vw, 100px);
}

.page-intro > * {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Variante sur fond sombre : le tiret rouge reste, le texte devient
   crème sourdine. Pas de fond ni de bordure. */
.section-num--inverse {
  color: rgba(255, 255, 255, 0.55);
  border: 0;
  background: transparent;
}

/* Sur fond clair (cream), --inverse reprend le style ink. */
.sub-hero .section-num--inverse,
.home-process .section-num--inverse,
.faq .section-num--inverse,
.why-loom .section-num--inverse,
.home-portfolio .section-num--inverse {
  color: rgba(29, 29, 31, 0.55);
}

.page-title {
  /* Big titles → Geist (sans grotesk moderne, fonte Vercel). Weight 700,
     line-height serré 0.88, tracking -0.04em : pleine puissance sans
     que ça ne hurle. Les section-titles (orbit, process, etc.) prennent
     Fraunces pour le contraste édito. */
  margin-top: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(48px, 9vw, 130px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--color-cream);
  max-width: 14ch;
}

.page-lede {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  max-width: 60ch;
}
.page-lede em {
  font-style: italic;
  color: var(--color-cream);
}

/* ─────────────────────────────────────────
   8. Services
───────────────────────────────────────── */
.services {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(60px, 9vw, 110px) clamp(24px, 6vw, 80px) clamp(70px, 10vw, 140px);
}

/* Eyebrow style pill (comme "Studio indépendant · Bruxelles" du hero),
   réutilisé partout sur le site pour les labels de section. */
/* Label de section : retour à un kicker typographique flat, sans pill.
   Mono uppercase, fine, légèrement décollé du titre par une barre rouge
   courte qui rappelle le fil. Plus printmaker, moins SaaS. */
.section-num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.55);
  padding: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Le tiret rouge à gauche, court, comme un fil tendu. */
.section-num::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--color-thread);
  flex-shrink: 0;
}

/* — Liste des offres — */
.services-list {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  padding-left: 56px;
  display: flex;
  flex-direction: column;
}

/* — Fil rouge vertical (track + fill scroll-driven) — */
.services-thread {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  pointer-events: none;
}

.thread-track,
.thread-fill {
  position: absolute;
  left: 6.5px;
  top: 0;
  width: 1px;
  height: 100%;
}

.thread-track {
  background: rgba(230, 57, 70, 0.18);
}

.thread-fill {
  background: var(--color-thread);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.08s linear;
}

/* — Une offre — */
.offer {
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(50px, 7vw, 90px) 0;
  border-top: 1px solid rgba(29, 29, 31, 0.14);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  /* Offset le scroll vers l'ancre pour ne pas passer sous le header fixe */
  scroll-margin-top: calc(var(--header-h) + 32px);
}

/* — Nœud sur le fil, aligné avec le numéro d'offre — */
.offer-node {
  position: absolute;
  left: -53.5px;
  top: clamp(78px, 9vw, 110px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-cream);
  border: 2px solid rgba(230, 57, 70, 0.4);
  transition: background 0.45s ease, border-color 0.45s ease, transform 0.45s ease, box-shadow 0.45s ease;
  z-index: 2;
}

.offer.is-active .offer-node {
  background: var(--color-thread);
  border-color: var(--color-thread);
  transform: scale(1.5);
  box-shadow: 0 0 0 6px rgba(230, 57, 70, 0.12);
}

/* — Chiffre romain en filigrane — */
.offer-filigree {
  position: absolute;
  top: 50%;
  right: -2vw;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(160px, 26vw, 340px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--color-thread);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}

.offer-meta,
.offer-body {
  position: relative;
  z-index: 1;
}

.offer:last-child {
  border-bottom: 1px solid rgba(29, 29, 31, 0.14);
}

.offer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* — Colonne gauche : numéro + kicker — */
.offer-meta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 8px;
}

.offer-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 1;
  color: var(--color-thread);
}

.offer-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.55);
}

/* — Colonne droite : titre + desc + tiers — */
.offer-body {
  display: flex;
  flex-direction: column;
}

.offer-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  max-width: 22ch;
}

.offer-desc {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.05vw, 14px);
  line-height: 1.75;
  color: rgba(29, 29, 31, 0.7);
  max-width: 56ch;
}

/* — Liste des formules — */
.tiers {
  list-style: none;
  margin-top: clamp(36px, 4vw, 56px);
  display: flex;
  flex-direction: column;
}

.tier {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: baseline;
  gap: clamp(18px, 3vw, 40px);
  padding: 28px 0;
  border-top: 1px solid rgba(29, 29, 31, 0.1);
}

.tier:last-child {
  border-bottom: 1px solid rgba(29, 29, 31, 0.1);
}

.tier-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.tier-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tier-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-cream);
  background: var(--color-thread);
  padding: 4px 10px;
  border-radius: 999px;
}

.tier-price {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.1;
  color: var(--color-thread);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.tier-from {
  display: block;
  width: 100%;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.5);
  margin-bottom: 2px;
}

.tier-period {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.55);
}

.tier-body {
  display: flex;
  flex-direction: column;
}

.tier-line {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
  color: rgba(29, 29, 31, 0.78);
}

.tier-inclus {
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tier-inclus li {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(29, 29, 31, 0.7);
  padding-left: 18px;
  position: relative;
}

.tier-inclus li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: -2px;
  font-size: 1.4em;
  font-weight: 700;
  color: var(--color-thread);
}

.tier--recommended .tier-line {
  color: var(--color-ink);
}

/* — Note sous les offres (devis) — */
.services-note {
  max-width: 720px;
  margin: clamp(70px, 10vw, 120px) auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.6;
  color: rgba(29, 29, 31, 0.55);
}

.services-note-mark {
  display: inline-block;
  margin: 0 14px;
  color: var(--color-thread);
  font-style: normal;
}

/* — Responsive — */
@media (max-width: 768px) {
  .services-list {
    padding-left: 0;
  }

  .services-thread,
  .offer-node {
    display: none;
  }

  .offer {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .offer-meta {
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
    padding-top: 0;
  }

  .offer-num {
    font-size: 36px;
  }

  .offer-filigree {
    font-size: clamp(120px, 38vw, 200px);
    right: -4vw;
    opacity: 0.05;
  }

  .tier {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px 0;
  }

  .tier-meta {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 16px;
  }
}

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  .offer {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .thread-fill {
    transition: none;
  }

  .offer-node {
    transition: none;
  }
}

/* ─────────────────────────────────────────
   9. Pages "vides" — portfolio, à propos, contact
───────────────────────────────────────── */
.page-empty {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(80px, 12vw, 160px) clamp(24px, 6vw, 80px) clamp(120px, 16vw, 220px);
  text-align: center;
}

.empty-mark {
  display: inline-block;
  margin: 0 18px;
  color: var(--color-thread);
  font-style: normal;
}

/* ─────────────────────────────────────────
   10. Boutons (système)
───────────────────────────────────────── */
/* Boutons style liquid glass : pilule, Inter sentence case, blur subtil
   pour donner un effet "verre" sur tous les fonds. La nav-cta garde son
   style plein et n'hérite pas de ces propriétés (règle séparée). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 980px;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.2s ease, transform 0.15s ease, box-shadow 0.3s ease;
}

.btn:active {
  transform: scale(0.97);
}

/* Primary : rouge plein semi-transparent + glass derrière.
   Sur fond clair il reste rouge ; sur photo/dégradé, le glass laisse filtrer. */
.btn-primary {
  background: rgba(230, 57, 70, 0.92);
  color: #ffffff;
  box-shadow: 0 6px 24px -10px rgba(230, 57, 70, 0.45);
}

.btn-primary:hover {
  background: rgba(214, 47, 60, 0.95);
  box-shadow: 0 10px 32px -10px rgba(230, 57, 70, 0.55);
}

/* Ghost glass : transparent + bord subtil, texte clair (sur fond sombre) */
.btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-cream);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Sur fond clair (cream/blanc) — texte noir, bord noir subtil */
.btn-on-cream.btn-primary {
  background: rgba(230, 57, 70, 0.92);
  color: #ffffff;
}

.btn-on-cream.btn-primary:hover {
  background: rgba(214, 47, 60, 0.95);
}

.btn-on-cream.btn-ghost {
  background: rgba(29, 29, 31, 0.04);
  color: var(--color-ink);
  border-color: rgba(29, 29, 31, 0.18);
}

.btn-on-cream.btn-ghost:hover {
  background: rgba(29, 29, 31, 0.08);
  border-color: rgba(29, 29, 31, 0.35);
}

.btn-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
  font-weight: 400;
}

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

.btn-link {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 18px);
  color: inherit;
  text-decoration: none;
  padding-bottom: 4px;
  transition: color 0.25s ease;
}

.btn-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-thread);
  transform-origin: left center;
}

.btn-link:hover {
  color: var(--color-thread);
}

.btn-link:hover::after {
  animation: loom-thread-restitch 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Animation signature loom : le fil rouge se rétracte à droite,
   puis se retisse depuis la gauche. Utilisée sur les liens texte. */
@keyframes loom-thread-restitch {
  0%   { transform-origin: right center; transform: scaleX(1); }
  45%  { transform-origin: right center; transform: scaleX(0); }
  46%  { transform-origin: left center;  transform: scaleX(0); }
  100% { transform-origin: left center;  transform: scaleX(1); }
}

.home-about-block.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Offset = hauteur EXACTE jusqu'à la ligne du header (padding-top + num
   + padding-bottom + border) → la card du dessus atterrit pile sur la
   ligne et la recouvre, plus de petit espace en dessous. */
.offer-stack-card--2 {
  top: calc(var(--header-h) + clamp(58px, 6.9vw, 92px));
  background: var(--color-thread);
  color: var(--color-cream);
}

/* Card 3 en ink (comme la 1ère) : séquence symétrique ink → rouge → ink,
   et la 3e card retrouve son effet "papier" sur fond crème. */
.offer-stack-card--3 {
  top: calc(var(--header-h) + clamp(116px, 13.8vw, 184px));
  background: var(--color-ink);
  color: var(--color-cream);
}

/* — Points de croix (× × ×), motif de broderie décoratif — */
.cross-stitches {
  display: block;
  width: clamp(120px, 14vw, 180px);
  height: auto;
  margin-top: clamp(36px, 5vw, 60px);
}

/* — Section portfolio : layout vertical asymétrique, style ōnō.
   Padding aligné sur les stack cards pour continuité visuelle. */
.home-portfolio {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(40px, 5vw, 70px) clamp(28px, 7vw, 110px) clamp(80px, 12vw, 160px);
}

@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes scissors-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* — Liste des projets : grille 2 colonnes, projets carrés — */
.portfolio-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(60px, 7vw, 100px) clamp(32px, 4vw, 60px);
  margin: 0 0 clamp(80px, 10vw, 140px);
}

.portfolio-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Variante "à venir" : carte non-cliquable, hover désactivé */
.portfolio-item-link--coming {
  cursor: default;
}

.portfolio-item-link--coming:hover .portfolio-item-visual {
  transform: none;
  border-color: rgba(29, 29, 31, 0.07);
}

.portfolio-item-link--coming:hover .portfolio-item-name {
  color: var(--color-ink);
}

.portfolio-item-link--coming:hover .portfolio-item-name::after {
  transform: scaleX(0);
}

.portfolio-item-link:hover .portfolio-item-visual,
.portfolio-item-link:focus-visible .portfolio-item-visual {
  transform: scale(1.012);
  border-color: rgba(230, 57, 70, 0.3);
}

.portfolio-item-link:hover .portfolio-item-visual--has-image img {
  transform: scale(1.04);
}

.portfolio-item-link:hover .portfolio-item-name,
.portfolio-item-link:focus-visible .portfolio-item-name {
  color: var(--color-thread);
}

.portfolio-item-link:hover .portfolio-item-name::after,
.portfolio-item-link:focus-visible .portfolio-item-name::after {
  transform: scaleX(1);
}

/* Header compact en haut de chaque stack card — c'est l'onglet visible
   quand une autre carte vient se poser par-dessus. num roman italique +
   kicker mono, séparés par une fine ligne sous le tout. */
.offer-stack-header {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 1.8vw, 22px);
  width: 100%;
  padding-bottom: clamp(14px, 1.6vw, 20px);
  margin-bottom: clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid currentColor;
  opacity: 0.95;
}

/* Sur la carte rouge, le num rouge serait invisible → cream. */
.offer-stack-card--2 .offer-stack-num {
  color: var(--color-cream);
}

/* Sur la carte rouge, le point thread serait invisible → on passe en crème */
.offer-stack-card--2 .offer-stack-points li::before {
  color: var(--color-cream);
}

/* Sur mobile : sticky cascade conservé.
   Image en haut (visible dès l'entrée dans la card), contenu
   serré pour tenir dans la fenêtre visible avant que la card
   suivante remonte. */
@media (max-width: 768px) {
  .home-stack-sequence {
    width: auto;
  }

  .offer-stack-card {
    padding: clamp(28px, 5vw, 44px) clamp(20px, 6vw, 36px) clamp(28px, 5vw, 44px);
    /* Pas de min-height: 100vh sur mobile : chaque card fait juste
       sa hauteur naturelle. Le sticky cascade fonctionne tant que
       la card est plus haute que le viewport disponible. */
    min-height: 88vh;
  }

  /* Cascade resserrée : ~50px d'offset par carte */
  .offer-stack-card--2 {
    top: calc(var(--header-h) + 50px);
  }
  .offer-stack-card--3 {
    top: calc(var(--header-h) + 100px);
  }

  .offer-stack-inner {
    gap: clamp(16px, 3vw, 24px);
  }

  /* Image en haut, texte en dessous : visuel d'abord, contexte ensuite */
  .offer-stack-text {
    order: 2;
  }
  .offer-stack-media {
    order: 1;
    flex: 1 1 100%;
    aspect-ratio: 16 / 11;
    max-height: 30vh;
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Titre & contenu compactés pour tenir dans le peek visible */
  .offer-stack-title {
    font-size: clamp(40px, 10vw, 60px);
    margin-bottom: clamp(12px, 2.5vw, 20px);
  }

  .offer-stack-desc {
    font-size: 13px;
    line-height: 1.55;
  }

  .offer-stack-points {
    margin-top: clamp(12px, 2vw, 18px);
    gap: 5px;
  }

  .offer-stack-points li {
    font-size: 12px;
    line-height: 1.4;
  }

  .offer-stack-num {
    height: clamp(38px, 5vw, 50px);
    margin-bottom: clamp(8px, 1.5vw, 14px);
  }

  /* Coin "œillet" plus petit */
  .offer-stack-card::after {
    top: clamp(14px, 3vw, 22px);
    right: clamp(14px, 4vw, 24px);
    width: 12px;
    height: 12px;
  }
}

.step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────
   13. CTA-band (bandeau audit gratuit récurrent)
───────────────────────────────────────── */
.cta-band {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: var(--section-y) var(--section-x);
}

.cta-band-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-7);
}

.cta-band-line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-snug);
  color: var(--color-ink);
  max-width: 24ch;
}

.cta-band-line em {
  color: var(--color-ink);
}

.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-6);
}

/* ─────────────────────────────────────────
   14. Manifeste (à propos)
   Prose éditoriale : paragraphes Inter à taille de lecture confortable
   et pull-quote XL en italique vrai, sans bordure rouge (qui faisait
   "blockquote de blog 2018"). La typo seule porte l'importance.
───────────────────────────────────────── */
.manifesto {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(80px, 11vw, 140px) clamp(24px, 6vw, 80px);
}

.manifesto-inner {
  max-width: 720px;
  margin: 0 auto;
}

.manifesto-paragraph {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: rgba(29, 29, 31, 0.82);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.manifesto-paragraph.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.manifesto-paragraph em {
  color: var(--color-ink);
  font-weight: 500;
}

/* Pull-quote XL — moment éditorial central de la page. Italique vrai,
   pleine puissance typographique, pas de bordure rouge (la précision
   et la taille suffisent à marquer la respiration). */
.manifesto-pull {
  margin: clamp(48px, 7vw, 80px) 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.manifesto-pull.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────
   15. Valeurs (à propos)
───────────────────────────────────────── */
.values {
  background: var(--color-ink);
  color: var(--color-cream);
  padding: clamp(60px, 9vw, 120px) clamp(24px, 6vw, 80px);
}

.values-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.values-title {
  margin-top: 28px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-cream);
  margin-bottom: clamp(40px, 5vw, 70px);
}

.values-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 3.5vw, 50px) clamp(32px, 4vw, 60px);
}

.value {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.value.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.value-num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  color: var(--color-thread);
}

.value-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  color: var(--color-cream);
}

.value-desc {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 768px) {
  .values-list {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────
   16. Contact — options + email direct
───────────────────────────────────────── */
.contact-options {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(80px, 11vw, 140px) clamp(24px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 600px));
  justify-content: center;
  gap: clamp(32px, 4vw, 60px);
}

/* Quand on arrive via une ancre, on décale le scroll pour ne pas
   atterrir collé sous le header fixe. */
#audit,
#appel,
#appointment,
#form,
#contact-form,
#offer-sites,
#offer-sociaux,
#offer-audit {
  scroll-margin-top: calc(var(--header-h) + clamp(32px, 5vw, 64px));
}

/* On annule le btn-on-cream sur ce bouton précis (card est ink, pas cream). */
.appt-card .appt-btn.btn-on-cream {
  background: var(--color-cream);
  color: var(--color-ink);
}

.appt-card .appt-btn.btn-on-cream:hover {
  background: var(--color-thread);
  color: var(--color-cream);
}

/* Note d'aiguillage sous le fieldset radio quand on a retiré l'option "appel" */
.form-fieldset-note {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(29, 29, 31, 0.6);
}

.form-fieldset-note a {
  color: var(--color-thread);
  text-decoration: underline;
  text-decoration-color: rgba(230, 57, 70, 0.5);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.form-fieldset-note a:hover {
  text-decoration-color: var(--color-thread);
}

.contact-option {
  /* Liquid glass : fond crème translucide + blur + reflet supérieur. */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  padding: clamp(36px, 4vw, 56px);
  border: 1px solid rgba(29, 29, 31, 0.12);
  border-radius: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  box-shadow:
    0 26px 56px -28px rgba(29, 29, 31, 0.22),
    0 4px 10px -4px rgba(29, 29, 31, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition:
    opacity 0.7s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.45s ease,
    background-color 0.3s ease;
  will-change: transform;
}

.contact-option.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hover : la fiche se soulève, gagne une ombre rouge subtile, et la bordure
   passe au rouge accent. */
.contact-option.is-visible:hover,
.contact-option.is-visible:focus-within {
  transform: translateY(-8px);
  border-color: var(--color-thread);
  box-shadow:
    0 24px 48px -22px rgba(29, 29, 31, 0.28),
    0 4px 12px -4px rgba(230, 57, 70, 0.22);
}

/* Le tag glisse légèrement et l'underline s'épaissit. */
.contact-option .option-tag {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-bottom-width 0.25s ease,
              padding-bottom 0.25s ease;
}
.contact-option.is-visible:hover .option-tag,
.contact-option.is-visible:focus-within .option-tag {
  transform: translateX(4px);
  border-bottom-width: 2px;
  padding-bottom: 11px;
}

/* Le titre se décale d'1 px vers le haut — sensation de relief. */
.contact-option .option-title {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact-option.is-visible:hover .option-title,
.contact-option.is-visible:focus-within .option-title {
  transform: translateY(-2px);
}

.contact-option--primary {
  /* Variante glass-dark : ink translucide + blur + reflet blanc subtil. */
  background: rgba(29, 29, 31, 0.92);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  color: var(--color-cream);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 28px 56px -28px rgba(0, 0, 0, 0.45),
    0 4px 10px -4px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* La variante sombre : au survol, on garde le fond ink et on amplifie
   l'ombre rouge (pas de border-color rouge sur fond noir, trop violent). */
.contact-option--primary.is-visible:hover,
.contact-option--primary.is-visible:focus-within {
  border-color: var(--color-ink);
  box-shadow:
    0 28px 56px -22px rgba(0, 0, 0, 0.5),
    0 6px 16px -4px rgba(230, 57, 70, 0.35);
}

.option-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-thread);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-thread);
  align-self: flex-start;
  margin-bottom: 28px;
}

.option-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin-bottom: 22px;
}

.option-desc {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.05vw, 14px);
  line-height: 1.7;
  margin-bottom: 28px;
  color: inherit;
  opacity: 0.78;
}

.option-list {
  list-style: none;
  margin-bottom: 36px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}

.option-list li {
  padding: 10px 0;
  padding-left: 22px;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.option-list li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.option-list li::before {
  content: '·';
  color: var(--color-thread);
  position: absolute;
  left: 0;
  font-weight: 700;
}

.contact-option .btn {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 768px) {
  .contact-options {
    grid-template-columns: 1fr;
  }
}

/* — Formulaire de contact — */
.contact-form-section {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(60px, 9vw, 120px) clamp(24px, 6vw, 80px) clamp(80px, 11vw, 140px);
}

.contact-form-inner {
  max-width: 880px;
  margin: 0 auto;
}

.contact-form-header {
  margin-bottom: clamp(50px, 7vw, 80px);
}

.contact-form-title {
  margin-top: 32px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  max-width: 16ch;
}

.contact-form-lede {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.1vw, 14px);
  line-height: 1.7;
  color: rgba(29, 29, 31, 0.62);
  max-width: 56ch;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid rgba(29, 29, 31, 0.12);
  border-radius: clamp(22px, 2.4vw, 32px);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 26px 56px -28px rgba(29, 29, 31, 0.22),
    0 4px 10px -4px rgba(29, 29, 31, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.form-honeypot {
  position: absolute;
  left: -10000px;
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

.form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.form-legend {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-thread);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-thread);
  margin-bottom: 20px;
}

.form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.form-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.form-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.form-radio-label {
  display: inline-block;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-ink);
  border: 1px solid rgba(29, 29, 31, 0.22);
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.form-radio:hover .form-radio-label {
  border-color: var(--color-ink);
}

.form-radio input[type="radio"]:checked + .form-radio-label {
  background: var(--color-ink);
  color: var(--color-cream);
  border-color: var(--color-ink);
}

.form-radio input[type="radio"]:focus-visible + .form-radio-label {
  outline: 2px solid var(--color-thread);
  outline-offset: 3px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 32px) clamp(20px, 3vw, 36px);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.78);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.form-required {
  color: var(--color-thread);
  font-size: 13px;
}

.form-optional {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1.5px;
  color: rgba(29, 29, 31, 0.55);
  text-transform: lowercase;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.5;
  color: var(--color-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(29, 29, 31, 0.22);
  border-radius: 0;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-body);
  font-weight: 500;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(29, 29, 31, 0.32);
  font-family: var(--font-body);
  font-weight: 400;
}

.contact-form input:hover,
.contact-form textarea:hover {
  border-bottom-color: rgba(29, 29, 31, 0.45);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: var(--color-thread);
}

.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown) {
  border-bottom-color: rgba(230, 57, 70, 0.55);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin-top: clamp(8px, 1.5vw, 16px);
}

.contact-form button[type="submit"] {
  border: none;
  font: inherit;
  cursor: pointer;
}

.form-note {
  font-family: var(--font-display);
  font-size: 14px;
  color: rgba(29, 29, 31, 0.55);
}

.form-note-mark {
  display: inline-block;
  margin-right: 10px;
  color: var(--color-thread);
  font-style: normal;
}

/* Bloc de remerciement après envoi — remplace ENTIÈREMENT le formulaire
   (le JS cache .contact-form et révèle ce bloc). Pas un encart en plus,
   un vrai message qui occupe l'espace du formulaire. */
.contact-form-success {
  padding: clamp(40px, 7vw, 88px) clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.5vw, 28px);
  border: 1px solid rgba(29, 29, 31, 0.12);
  border-radius: clamp(22px, 2.4vw, 32px);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 26px 56px -28px rgba(29, 29, 31, 0.22),
    0 4px 10px -4px rgba(29, 29, 31, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: form-success-in 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* L'attribut HTML `hidden` doit cacher complètement le bloc — il n'apparaît
   qu'une fois le formulaire envoyé (le JS retire l'attribut). */
.contact-form-success[hidden],
.contact-form-error[hidden] {
  display: none !important;
}

/* État d'erreur : même layout que .contact-form-success, accent rouge
   sur l'eyebrow pour signaler le problème sans changer le rythme visuel. */
.contact-form-error {
  padding: clamp(40px, 7vw, 88px) clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.5vw, 28px);
  border: 1px solid rgba(230, 57, 70, 0.25);
  border-radius: clamp(22px, 2.4vw, 32px);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 26px 56px -28px rgba(29, 29, 31, 0.22),
    0 4px 10px -4px rgba(230, 57, 70, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: form-success-in 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-form-error .form-success-eyebrow {
  color: var(--color-thread);
  border-bottom-color: var(--color-thread);
}

@keyframes form-success-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-success-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-thread);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-thread);
}

.form-success-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
}

.form-success-text {
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.75;
  color: rgba(29, 29, 31, 0.75);
  max-width: 56ch;
  margin: 0;
}

.form-success-text strong {
  color: var(--color-ink);
  font-weight: 400;
  font-family: var(--font-display);
  font-size: 1.05em;
}

.form-success-text--alt {
  color: rgba(29, 29, 31, 0.65);
  font-size: clamp(13px, 1.05vw, 14.5px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(29, 29, 31, 0.1);
}

.form-success-text a {
  color: var(--color-thread);
  text-decoration: underline;
  text-decoration-color: rgba(230, 57, 70, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.form-success-text a:hover {
  text-decoration-color: var(--color-thread);
}

.form-success-signature {
  margin-top: clamp(12px, 1.5vw, 20px);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 18px);
  color: rgba(29, 29, 31, 0.55);
}

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

  .form-radios {
    gap: 8px;
  }

  .form-radio-label {
    padding: 9px 14px;
    font-size: 11px;
    letter-spacing: 1.5px;
  }
}

/* — Email direct (fond ink) — */
.contact-direct {
  background: var(--color-ink);
  color: var(--color-cream);
  padding: clamp(80px, 11vw, 140px) clamp(24px, 6vw, 80px);
  text-align: center;
}

.contact-direct-line {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: clamp(36px, 5vw, 60px);
}

.contact-mark {
  display: inline-block;
  margin: 0 14px;
  color: var(--color-thread);
  font-style: normal;
}

.contact-link {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 56px);
  color: var(--color-cream);
  text-decoration: none;
  padding-bottom: 6px;
  transition: color 0.25s ease;
}

.contact-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--color-thread);
  transform-origin: left center;
}

.contact-link:hover {
  color: var(--color-thread);
}

.contact-link:hover::after {
  animation: loom-thread-restitch 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.contact-meta {
  margin-top: clamp(40px, 5vw, 60px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* ─────────────────────────────────────────
   16b. Mentions légales — page sobre, lisible
───────────────────────────────────────── */
.legal {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(60px, 9vw, 110px) clamp(24px, 6vw, 80px) clamp(80px, 12vw, 160px);
}

.legal-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 60px);
}

.legal-block {
  padding-top: 28px;
  border-top: 1px solid rgba(29, 29, 31, 0.14);
}

.legal-block:first-child {
  border-top: none;
  padding-top: 0;
}

.legal-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2;
  color: var(--color-ink);
  margin-bottom: 20px;
}

.legal-text {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.75;
  color: rgba(29, 29, 31, 0.78);
  margin-bottom: 14px;
}

.legal-text:last-child {
  margin-bottom: 0;
}

.legal-text a {
  color: var(--color-thread);
  text-decoration: none;
  border-bottom: 1px solid rgba(230, 57, 70, 0.4);
  transition: border-color 0.2s ease;
}

.legal-text a:hover {
  border-bottom-color: var(--color-thread);
}

.legal-text em {
  font-family: var(--font-display);
  font-size: 1.05em;
  color: rgba(29, 29, 31, 0.55);
}

/* — Note RGPD sous le formulaire de contact — */
.form-rgpd {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: rgba(29, 29, 31, 0.5);
  letter-spacing: 0.02em;
}

.form-rgpd a {
  color: var(--color-thread);
  text-decoration: none;
  border-bottom: 1px solid rgba(230, 57, 70, 0.4);
  transition: border-color 0.2s ease;
}

.form-rgpd a:hover {
  border-bottom-color: var(--color-thread);
}

/* ─────────────────────────────────────────
   17. Footer (partagé)
───────────────────────────────────────── */
.site-footer {
  background: var(--color-ink);
  color: var(--color-cream);
  padding: clamp(60px, 8vw, 100px) clamp(24px, 6vw, 80px) clamp(28px, 4vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: clamp(40px, 5vw, 60px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-mark {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-wordmark {
  display: inline-flex;
  align-items: center;
  height: 56px;
  text-decoration: none;
  align-self: flex-start;
  line-height: 0;
}

.footer-logo-svg {
  height: 100%;
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .footer-wordmark {
    height: 48px;
  }
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  max-width: 30ch;
  line-height: 1.5;
}

.footer-tagline em {
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.footer-nav a {
  position: relative;
  align-self: flex-start;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}

.footer-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-thread);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

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

.footer-nav a:hover::after {
  transform: scaleX(1);
}

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.footer-email {
  position: relative;
  color: var(--color-cream);
  text-decoration: none;
  padding-bottom: 3px;
  align-self: flex-start;
  transition: color 0.25s ease;
}

.footer-email::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-thread);
  transform-origin: left center;
}

.footer-email:hover {
  color: var(--color-thread);
}

.footer-email:hover::after {
  animation: loom-thread-restitch 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.footer-place {
  color: rgba(255, 255, 255, 0.45);
}

/* — Boutons réseaux sociaux — */
.footer-social {
  display: flex;
  gap: 12px;
  margin: 6px 0 4px;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  max-width: 36px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.footer-social-link svg {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0 9px;
}

.footer-social-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  opacity: 0;
  margin-right: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.25s ease 0.05s,
    margin-right 0.35s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  max-width: 200px;
  color: var(--color-cream);
  border-color: var(--color-thread);
  background: rgba(230, 57, 70, 0.08);
  outline: none;
}

.footer-social-link:hover .footer-social-text,
.footer-social-link:focus-visible .footer-social-text {
  opacity: 1;
  margin-right: 14px;
  transform: translateX(0);
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ─────────────────────────────────────────
   17b. Photo-spot — emplacements photo réutilisables
   Usage :
     <figure class="photo-spot photo-spot--portrait">
       <span class="photo-spot-label">photo</span>
     </figure>
   Pour ajouter une vraie photo, remplacer le <span> par
     <img src="assets/votre-photo.jpg" alt="…">
   Le placeholder dashed disparaît automatiquement.
───────────────────────────────────────── */
.photo-spot {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 24px;
  border: 1.5px dashed currentColor;
  opacity: 0.5;
  overflow: hidden;
  background: transparent;
  transition: opacity 0.3s ease;
}

/* Si une vraie image est présente : on retire l'aspect placeholder
   et on ajoute un cadre rouge décalé derrière (effet signature "fil rouge"). */
.photo-spot:has(img) {
  border: none;
  opacity: 1;
  overflow: visible;
  isolation: isolate;
}

.photo-spot:has(img)::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--color-thread);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  transform: translate(12px, 12px);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.photo-spot:has(img) img {
  position: relative;
  z-index: 1;
  border-radius: inherit;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.photo-spot:has(img):hover img {
  transform: translate(-4px, -4px);
}

.photo-spot:has(img):hover::before {
  transform: translate(18px, 18px);
}

.photo-spot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .photo-spot:has(img)::before,
  .photo-spot:has(img) img {
    transition: none;
  }
  .photo-spot:has(img):hover img,
  .photo-spot:has(img):hover::before {
    transform: translate(12px, 12px);
  }
  .photo-spot:has(img):hover img {
    transform: none;
  }
}

.photo-spot:has(img) .photo-spot-label {
  display: none;
}

.photo-spot--portrait  { aspect-ratio: 3 / 4; }
.photo-spot--square    { aspect-ratio: 1 / 1; }

/* ─────────────────────────────────────────
   17c. À propos — section atelier (portrait + atelier)
───────────────────────────────────────── */
.atelier {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(55px, 8vw, 100px) clamp(24px, 6vw, 80px);
}

.atelier-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.atelier-portrait {
  max-width: 440px;
  width: 100%;
}

.atelier-side {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}

.atelier-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-thread);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-thread);
  align-self: flex-start;
}

.atelier-quote {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.3;
  color: var(--color-ink);
}

.atelier-quote em {
  color: var(--color-thread);
}

.atelier-byline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.55);
}

.atelier-studio {
  max-width: 360px;
  align-self: flex-end;
  width: 100%;
}

@media (max-width: 768px) {
  .atelier-inner {
    grid-template-columns: 1fr;
    gap: clamp(40px, 8vw, 60px);
  }

  .atelier-portrait {
    max-width: 260px;
    align-self: start;
  }

  .atelier-studio {
    max-width: 220px;
    align-self: start;
  }
}

/* ─────────────────────────────────────────
   17e. Contact — portrait à côté du form-header
───────────────────────────────────────── */
.contact-form-header--with-photo {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 70px);
  align-items: end;
}

.contact-form-header--with-photo .contact-form-photo {
  max-width: 280px;
  width: 100%;
  justify-self: end;
}

@media (max-width: 768px) {
  .contact-form-header--with-photo {
    grid-template-columns: 1fr;
  }
  .contact-form-header--with-photo .contact-form-photo {
    max-width: 180px;
    justify-self: start;
  }
}

/* ─────────────────────────────────────────
   17g. Page projet (case study) — DA loom + visuels client
───────────────────────────────────────── */

/* — Intro projet (en-tête) — */
.project-intro {
  background: var(--color-ink);
  color: var(--color-cream);
  padding: clamp(110px, 14vw, 170px) clamp(24px, 6vw, 80px) clamp(50px, 7vw, 90px);
}

.project-intro-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.project-back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  margin-bottom: clamp(40px, 5vw, 60px);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.3s ease;
}

.project-back:hover {
  color: var(--color-thread);
  border-bottom-color: var(--color-thread);
}

.project-title {
  margin-top: 38px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--color-cream);
}

.project-title em {
  color: var(--color-cream);
  display: inline-block;
  margin-top: 0.15em;
  font-size: 0.7em;
  line-height: 1.05;
  color: rgba(255, 255, 255, 0.7);
}

.project-title-comma {
  color: var(--color-thread);
  font-style: normal;
  font-family: var(--font-display);
}

.project-lede {
  margin-top: 36px;
  max-width: 60ch;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
}

.project-meta {
  margin-top: clamp(50px, 6vw, 80px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

.project-meta div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-meta dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-thread);
}

.project-meta dd {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 768px) {
  .project-meta {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

/* — Disclaimer "projet d'école / lieu fictif" sous les meta — */
.project-disclaimer {
  margin-top: clamp(32px, 4vw, 50px);
  padding-top: clamp(20px, 2.5vw, 30px);
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
  max-width: 60ch;
}

.project-disclaimer-mark {
  display: inline-block;
  margin-right: 10px;
  color: var(--color-thread);
  font-weight: 600;
}

@media (max-width: 480px) {
  .project-meta {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* — Image hero (devanture) — fond ink, coins arrondis, padding pour respirer — */
.project-hero-image {
  margin: 0;
  background: var(--color-ink);
  padding: clamp(20px, 3vw, 48px) clamp(20px, 4vw, 60px) clamp(28px, 4vw, 48px);
}

.project-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
  border-radius: clamp(14px, 1.8vw, 24px);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Variante compacte du hero (mise en page condensée) */
.project-hero-image--compact img {
  max-height: 48vh;
}

.project-hero-image figcaption {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-top: 18px;
  padding-left: clamp(4px, 0.8vw, 12px);
  color: rgba(255, 255, 255, 0.55);
}

/* — Figure (image + caption) — */
.project-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.project-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: rgba(29, 29, 31, 0.04);
  border-radius: clamp(12px, 1.5vw, 20px);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-figure:hover img {
  transform: scale(1.015);
}

.project-figure figcaption {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-top: 16px;
  padding-left: 2px;
}

/* — Figcaption uniformisée : numéro [XX·X] + texte — */
.figcap-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--color-thread);
  flex-shrink: 0;
  font-weight: 500;
}

.figcap-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.55);
  line-height: 1.4;
}

/* Sur fond ink (hero), couleur claire pour figcap */
.project-hero-image .figcap-text {
  color: rgba(255, 255, 255, 0.55);
}

.pullquote-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.8vw, 68px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.pullquote-text em {
  color: var(--color-thread);
}

.pullquote-attribution {
  margin-top: clamp(32px, 4vw, 50px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.45);
}

/* — Statement : un visuel valorisé, sur cream, sans bloc autour — */
.project-statement {
  background: var(--color-cream);
  padding: clamp(48px, 7vw, 100px) clamp(24px, 5vw, 80px);
}

.stat-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(64px, 9vw, 112px);
  line-height: 0.85;
  color: var(--color-thread);
  letter-spacing: -0.03em;
}

.stat-unit {
  font-size: 0.45em;
  margin-left: 2px;
  display: inline-block;
  vertical-align: top;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
}

/* — Duo : 2 visuels côte à côte, max-width contenu — */
.project-duo {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}

/* — Panel fusionné : texte à gauche + grille de visuels à droite — */
.project-panel {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(50px, 7vw, 90px) clamp(24px, 5vw, 60px);
}

.project-panel--ink {
  background: var(--color-ink);
  color: var(--color-cream);
}

.project-panel-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2.2fr);
  gap: clamp(32px, 4.5vw, 70px);
  align-items: start;
}

.project-panel-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: sticky;
  top: clamp(90px, 11vh, 130px);
}

.project-panel-title {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.project-panel--ink .project-panel-title {
  color: var(--color-cream);
}

.project-panel-body {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.05vw, 14px);
  line-height: 1.75;
  color: rgba(29, 29, 31, 0.75);
  max-width: 42ch;
}

.project-panel--ink .project-panel-body {
  color: rgba(255, 255, 255, 0.75);
}

.project-panel-body em {
  font-family: var(--font-display);
  font-size: 1.06em;
  color: var(--color-thread);
}

/* — Grille visuelle interne du panel — */
.project-panel-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
}

/* Élément "feature" qui s'étend sur 2 colonnes */
.project-panel-figure--feature {
  grid-column: span 2;
}

/* Sur fond ink : background subtil clair pour les figures */
.project-panel--ink .project-figure img {
  background: rgba(255, 255, 255, 0.04);
}

.project-panel--ink .figcap-text {
  color: rgba(255, 255, 255, 0.55);
}

/* Responsive : panel passe en colonne unique */
@media (max-width: 900px) {
  .project-panel-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .project-panel-text {
    position: static;
  }
  .project-panel-body {
    max-width: none;
  }
}

@media (max-width: 540px) {
  .project-panel-media {
    grid-template-columns: 1fr;
  }
  .project-panel-figure--feature {
    grid-column: auto;
  }
}

.project-mosaic-section--ink .figcap-text {
  color: rgba(255, 255, 255, 0.55);
}

.project-mosaic-section--ink .project-figure img {
  background: rgba(255, 255, 255, 0.04);
}

/* — SPLIT 50/50 : texte + visuel côte à côte — */
.project-split {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(50px, 6vw, 85px) clamp(24px, 6vw, 80px);
}

.project-split-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

.project-split-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.project-split-title {
  margin-top: 28px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.project-split--ink .project-split-title {
  color: var(--color-cream);
}

.project-split-body {
  margin-top: clamp(24px, 3vw, 36px);
  font-family: var(--font-display);
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.75;
  color: rgba(29, 29, 31, 0.75);
  max-width: 50ch;
}

.project-split--ink .project-split-body {
  color: rgba(255, 255, 255, 0.75);
}

.project-split-body em {
  font-family: var(--font-display);
  font-size: 1.06em;
  color: var(--color-thread);
}

.project-split-image {
  margin: 0;
}

.project-split-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 1.8vw, 22px);
  background: rgba(29, 29, 31, 0.03);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-split-image:hover img {
  transform: scale(1.012);
}

.project-split-image figcaption {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-top: 14px;
  padding-left: 2px;
}

/* Caption claire sur fond ink */
.project-split--ink .project-split-image .figcap-text {
  color: rgba(255, 255, 255, 0.55);
}

/* Quote dans le split brief */
.project-split-quote {
  margin: 0;
  padding-left: clamp(24px, 3vw, 44px);
  border-left: 2px solid var(--color-thread);
}

.project-split-quote .pullquote-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

.project-split-quote .pullquote-text em {
  color: var(--color-thread);
}

.project-split-quote .pullquote-attribution {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.45);
}

/* Duo vertical à l'intérieur d'un split (digital section) */
.project-split-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}

/* Stats compactes dans un split */
.project-stats-mini {
  list-style: none;
  margin-top: clamp(28px, 3.5vw, 44px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.5vw, 36px) clamp(20px, 3vw, 40px);
  width: 100%;
  border-top: 1px solid rgba(29, 29, 31, 0.15);
  padding-top: clamp(24px, 3vw, 36px);
}

.project-stats-mini li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.project-stats-mini .stat-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 0.9;
  color: var(--color-thread);
  letter-spacing: -0.02em;
}

.project-stats-mini .stat-unit {
  font-size: 0.5em;
  margin-left: 1px;
}

.project-stats-mini .stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.55);
  line-height: 1.5;
}

/* Sur fond ink, on inverse les couleurs des stats (label + trait) */
.project-split--ink .project-stats-mini,
.project-panel--ink .project-stats-mini {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.project-split--ink .project-stats-mini .stat-label,
.project-panel--ink .project-stats-mini .stat-label {
  color: rgba(255, 255, 255, 0.65);
}

/* Responsive split */
@media (max-width: 860px) {
  .project-split-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .project-split-body {
    max-width: none;
  }
  .project-split-quote {
    padding-left: 20px;
  }
}

/* — Crédits — */
.project-credits {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(60px, 8vw, 100px) clamp(24px, 6vw, 80px);
  border-top: 1px solid rgba(29, 29, 31, 0.12);
}

.project-credits-inner {
  max-width: 880px;
  margin: 0 auto;
}

.project-credits-title {
  margin-top: 32px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.15;
  color: var(--color-ink);
  margin-bottom: clamp(36px, 5vw, 56px);
}

.project-credits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.project-credits-list li {
  padding: 18px 0;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.6;
  color: rgba(29, 29, 31, 0.78);
  border-top: 1px solid rgba(29, 29, 31, 0.1);
}

.project-credits-list li:last-child {
  border-bottom: 1px solid rgba(29, 29, 31, 0.1);
}

.project-credits-list strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15em;
  color: var(--color-ink);
  margin-right: 12px;
}

.project-credits-note {
  margin-top: clamp(36px, 5vw, 56px);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(29, 29, 31, 0.55);
}

/* — Section "next / retour portfolio" — */
.project-next {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(40px, 6vw, 70px) clamp(24px, 6vw, 80px);
  border-top: 1px solid rgba(29, 29, 31, 0.12);
  text-align: center;
}

.project-next-line {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.8vw, 22px);
  color: rgba(29, 29, 31, 0.55);
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

/* ═══════════════════════════════════════════════════════════
   HOME — Nouvelles sections de la refonte
   Sub-hero · Constat · Home-process · Why-loom · FAQ
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   ORBIT — phrase centrale + 4 infos qui gravitent
   Parallax au curseur via JS (data-depth sur chaque info).
───────────────────────────────────────── */
.orbit {
  background: var(--color-cream);
  color: var(--color-ink);
  /* Section pleine fenêtre. Padding aligné sur --section-x (rythme global).
     Top/bottom légèrement réduit (clamp custom) parce que la grille
     orbit-info est calculée en % de la stage. */
  padding: clamp(64px, 9vh, 110px) var(--section-x);
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.orbit-stage {
  position: relative;
  width: 100%;
  max-width: var(--container);          /* 1320px tokenisé */
  margin: 0 auto;
  min-height: clamp(420px, 56vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit-center {
  position: relative;
  z-index: 2;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.orbit-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-thread);
  margin-bottom: var(--space-5);
}

.orbit-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-4xl);              /* 56-112px tokenisé */
  line-height: var(--leading-tight);       /* 1.05 — tight pour display */
  letter-spacing: var(--track-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-6);              /* 32px d'air avant les CTAs */
}

/* Mots-clés des titres : couleur grise muted plutôt qu'italique.
   Plus moderne, donne du caractère sans le côté "vieux livre". */
.orbit-title em,
.investment-title em,
.home-process-title em,
.home-portfolio-title em,
.why-loom-title em,
.faq-title em,
.page-title em {
  font-style: normal;
  font-weight: 400;
  color: rgba(29, 29, 31, 0.55);
}

/* Sur fond sombre (.page-intro, .why-loom si sombre), em devient gris clair */
.page-intro em {
  color: rgba(255, 255, 255, 0.5);
}

.orbit-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);                     /* 12px */
}

/* 4 cartes-info absolues qui gravitent autour du centre */
.orbit-infos {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* ── Liquid Glass SOMBRE pour les 4 cartes en orbite ──
   Même langage que les cartes portfolio : surface ink translucide,
   bord réfractif, backdrop blur, reflets internes, ::before specular. */
.orbit-info {
  position: absolute;
  isolation: isolate;
  width: clamp(180px, 18vw, 230px);
  padding: var(--space-4) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);          /* 14px → cohérent autres cards */
  background:
    linear-gradient(155deg,
      rgba(20, 20, 22, 0.86) 0%,
      rgba(10, 10, 12, 0.76) 45%,
      rgba(20, 20, 22, 0.82) 100%) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(255, 255, 255, 0.3) 100%) border-box;
  backdrop-filter: blur(36px) saturate(180%) brightness(0.88);
  -webkit-backdrop-filter: blur(36px) saturate(180%) brightness(0.88);
  color: var(--color-cream);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: auto;
  box-shadow:
    0 28px 60px -28px rgba(0, 0, 0, 0.5),
    0 4px 12px -4px rgba(0, 0, 0, 0.2),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.32),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.16),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.06),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.04);
  transition:
    transform var(--dur-slow) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
  will-change: transform;
}

.orbit-info::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.03) 35%,
    transparent 55%,
    rgba(255, 255, 255, 0.04) 80%,
    rgba(255, 255, 255, 0.08) 100%
  );
  mix-blend-mode: overlay;
}

/* Positions des 4 orbites — couleurs unifiées par le liquid glass. */
.orbit-info--tl { top: 4%;   left: 0; }
.orbit-info--tr { top: 8%;   right: 0; }
.orbit-info--bl { bottom: 6%; left: 4%; }
.orbit-info--br { bottom: 2%; right: 2%; }

.orbit-info-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
/* Petit point blanc devant le numéro */
.orbit-info-num::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.orbit-info-value {
  font-family: var(--font-display);
  font-weight: 500;                          /* +1 weight pour ancrer le chiffre */
  font-size: var(--text-xl);
  line-height: 1;
  letter-spacing: var(--track-snug);
  color: var(--color-cream);
}

.orbit-info-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  line-height: var(--leading-normal);
}

/* Hover : la plaque de verre s'éclaire — reflets renforcés, lift vertical. */
.orbit-info:hover {
  transform: translateY(-4px);
  background:
    linear-gradient(155deg,
      rgba(28, 28, 32, 0.9) 0%,
      rgba(14, 14, 16, 0.82) 45%,
      rgba(28, 28, 32, 0.88) 100%) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.5) 100%) border-box;
  box-shadow:
    0 42px 80px -28px rgba(0, 0, 0, 0.6),
    0 8px 18px -6px rgba(0, 0, 0, 0.25),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.52),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.28),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.1),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.08);
}

@media (max-width: 860px) {
  .orbit-stage {
    min-height: auto;
    flex-direction: column;
    gap: 48px;
  }
  .orbit-infos {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
  }
  .orbit-info,
  .orbit-info--tl,
  .orbit-info--tr,
  .orbit-info--bl,
  .orbit-info--br {
    position: static;
    width: 100%;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  .orbit-infos {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-center,
  .orbit-info { transition: none; transform: none !important; }
}

.constat-problem.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.constat-answer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────
   SERVICES-GRID — 3 cards services alignées (home)
   Remplace l'ancien système sticky stack cards par
   une grille simple, plus lisible et aérée.
───────────────────────────────────────── */
.services-grid {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(80px, 11vw, 140px) clamp(24px, 6vw, 80px);
}

/* Prix sur la card service — discret, en haut du CTA */
.service-card-price {
  width: 100%;
  margin-bottom: clamp(20px, 2.5vw, 28px);
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid rgba(29, 29, 31, 0.12);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: rgba(29, 29, 31, 0.6);
}

/* ─────────────────────────────────────────
   INVESTMENT — section "ce que ça coûte"
   Layout sobre, chaque ligne = service / description / prix
───────────────────────────────────────── */
/* ─────────────────────────────────────────
   SERVICES V2 (home) — layout 2 colonnes éditorial
   Gauche : titre XL sticky · lede · CTA pill blanc
   Droite : 3 cards empilées, l'active (crème) révèle desc + tags beige + flèche
───────────────────────────────────────── */
.services-v2 {
  background: #0a0a0a;
  color: #ffffff;
  padding: var(--section-y) var(--section-x);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.services-v2-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.services-v2-grid {
  display: grid;
  /* Règle des tiers : 1/3 texte + 2/3 cartes. */
  grid-template-columns: 1fr 2fr;
  gap: clamp(48px, 7vw, 100px);
  align-items: start;
}

/* Colonne gauche sticky */
.services-v2-left {
  position: sticky;
  top: clamp(96px, 12vh, 130px);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.services-v2-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(72px, 11vw, 160px);    /* range custom — XL section */
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: #ffffff;
}
.services-v2-lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;                       /* léger : contraste avec titre 700 */
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.55);
  max-width: 52ch;
}
.services-v2-lede em {
  font-style: italic;
  color: #ffffff;
}
.services-v2-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-4) var(--space-6);
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--track-normal);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition:
    transform var(--dur-base) var(--ease-in-out),
    box-shadow var(--dur-base) var(--ease-out);
  margin-top: var(--space-2);
}
.services-v2-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px rgba(255, 255, 255, 0.22);
}
.services-v2-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-base) var(--ease-in-out);
}
.services-v2-cta:hover .services-v2-cta-arrow {
  transform: translate(2px, -2px);
}

/* Colonne droite : stack de cards */
.services-v2-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.service-v2-card {
  position: relative;
  background: #141414;
  color: #ffffff;
  border-radius: var(--radius-lg);        /* 24px — au lieu de 32 (un cran plus modeste) */
  padding: clamp(28px, 3vw, 44px);
  cursor: pointer;
  transition:
    background var(--dur-slow) var(--ease-in-out),
    color var(--dur-slow) var(--ease-in-out);
}
.service-v2-card.is-active {
  background: var(--color-cream);
  color: var(--color-ink);
}

.service-v2-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.service-v2-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);             /* 30-48 px — un cran sous les sections H2 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--track-snug);
}
.service-v2-card-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ink);
  color: var(--color-cream);
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.5) rotate(-45deg);
  transition:
    opacity var(--dur-base) var(--ease-in-out),
    transform var(--dur-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.service-v2-card.is-active .service-v2-card-arrow {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.service-v2-card-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: rgba(29, 29, 31, 0.62);
  margin: 0;
  max-width: 52ch;
  /* État repos : caché */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height var(--dur-slow) var(--ease-in-out),
    opacity var(--dur-base) ease 0.05s,
    margin var(--dur-slow) ease;
}
.service-v2-card.is-active .service-v2-card-desc {
  max-height: 220px;
  opacity: 1;
  margin: var(--space-5) 0 var(--space-6);
}
.service-v2-card-desc sup {
  font-size: 0.7em;
}

.service-v2-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  transition: margin var(--dur-slow) ease;
}
.service-v2-card.is-active .service-v2-tags {
  margin-top: 0;
}
.service-v2-tags li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--track-normal);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: #2A2A2A;
  color: var(--color-cream);
  transition:
    background var(--dur-slow) var(--ease-in-out),
    color var(--dur-slow) var(--ease-in-out);
  white-space: nowrap;
}
.service-v2-card.is-active .service-v2-tags li {
  background: #D4C5A9;
  color: var(--color-ink);
}

/* Reduced motion : pas d'animations gourmandes, juste l'état visible */
@media (prefers-reduced-motion: reduce) {
  .service-v2-card,
  .service-v2-card-desc,
  .service-v2-tags,
  .service-v2-tags li,
  .service-v2-card-arrow {
    transition: none;
  }
}

/* Responsive : 1 colonne en dessous de 880 px */
@media (max-width: 880px) {
  .services-v2 {
    padding: clamp(56px, 14vw, 96px) clamp(20px, 6vw, 40px);
  }
  .services-v2-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .services-v2-left {
    position: static;
  }
  .services-v2-title {
    font-size: clamp(56px, 16vw, 88px);
  }
  .service-v2-card {
    padding: 28px 26px;
    border-radius: 24px;
  }
  .service-v2-card-title {
    font-size: clamp(30px, 8vw, 44px);
  }
  .service-v2-card-arrow {
    width: 38px;
    height: 38px;
  }
  .service-v2-card-arrow svg {
    width: 18px;
    height: 18px;
  }
  .service-v2-tags li {
    font-size: 13px;
    padding: 8px 16px;
  }
}

/* ─────────────────────────────────────────
   INVESTMENT / SERVICES (home) — fond sombre, texte sticky à gauche,
   accordéon de 3 services à droite. Cards "glass" cream-subtle.
   [DEPRECATED — remplacé par .services-v2 ci-dessus]
───────────────────────────────────────── */
.investment {
  background: var(--color-ink);
  color: var(--color-cream);
  padding: clamp(80px, 11vw, 140px) clamp(24px, 6vw, 80px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Bloc service ─────────────────────────
   Grille 2 colonnes : visuel d'un côté, texte de l'autre. Le modificateur
   --reverse inverse l'ordre via la grille (1er enfant à droite). */
.service-block {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 120px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

/* Numéro géant en italique rouge, débordant légèrement. Le trait vertical
   sous le chiffre est généré en ::after.
   z-index 10 — au-dessus de la pile de photos (qui culmine à z-index 3),
   sinon le chiffre se retrouvait peint DERRIÈRE la photo de premier plan. */
.service-number {
  position: absolute;
  top: -32px;
  right: -16px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(120px, 14vw, 224px);
  line-height: 1;
  color: var(--color-thread);
  letter-spacing: -0.04em;
  z-index: 10;
  pointer-events: none;
}

/* Au survol du bloc, la pile s'éparpille un peu — accent ludique. */
.service-block:hover .service-stack-card--back {
  transform: translate(-50%, -50%) translate(-44px, 28px) rotate(-9deg);
}

/* ── Responsive ─────────────────────────── */
@media (max-width: 900px) {
  .service-block,
  .service-block--reverse {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 56px);
  }
  .service-block--reverse .service-visual { order: 0; }
  .service-block--reverse .service-text { order: 0; }
  .service-visual {
    height: clamp(320px, 70vw, 460px);
  }
  .service-number {
    font-size: clamp(96px, 22vw, 160px);
  }
}

/* ─────────────────────────────────────────
   HOME-PROCESS — 4 étapes compact
───────────────────────────────────────── */
.home-process {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: var(--section-y) var(--section-x);
  border-top: 1px solid rgba(29, 29, 31, 0.08);
}

.home-process-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.home-process-title {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-snug);
  color: var(--color-ink);
  max-width: 16ch;
}

.home-process-lede {
  margin-top: var(--space-5);
  margin-bottom: var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: rgba(29, 29, 31, 0.7);
  max-width: 56ch;
}

.home-process-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3.5vw, 48px);
  position: relative;
}

.home-process-steps::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 57, 70, 0.4) 18%, rgba(230, 57, 70, 0.4) 82%, transparent);
  pointer-events: none;
}

.home-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.home-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.home-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);                  /* 64×64 */
  border-radius: var(--radius-full);
  background: var(--color-cream);
  border: 1px solid rgba(29, 29, 31, 0.18);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-thread);
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 1;
}

.home-step-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-snug);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.home-step-tag {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-thread);
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgba(230, 57, 70, 0.35);
  border-radius: var(--radius-full);
}

.home-step-desc {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: rgba(29, 29, 31, 0.65);
  max-width: 28ch;
}

@media (max-width: 900px) {
  .home-process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 36px;
  }
  .home-process-steps::before {
    display: none;
  }
}

@media (max-width: 540px) {
  .home-process-steps {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.why-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 3.2vw, 40px) clamp(24px, 2.5vw, 32px);
  background: var(--color-cream);
  border: 1px solid rgba(29, 29, 31, 0.14);
  border-radius: clamp(14px, 1.8vw, 22px);
  transition: border-color 0.3s ease, transform 0.4s ease, box-shadow 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
}

.why-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}

.why-card:hover {
  border-color: var(--color-thread);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -18px rgba(29, 29, 31, 0.4);
}

/* ─────────────────────────────────────────
   FAQ — Accordéon natif <details>
───────────────────────────────────────── */
.faq {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: var(--section-y) var(--section-x);
  border-top: 1px solid rgba(29, 29, 31, 0.08);
}

.faq-inner {
  max-width: 880px;
  margin: 0 auto;
}

.faq-header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.faq-title {
  margin-top: var(--space-5);
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-snug);
  color: var(--color-ink);
  max-width: 18ch;
}

.faq-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid rgba(29, 29, 31, 0.14);
}

.faq-item:last-child {
  border-bottom: 1px solid rgba(29, 29, 31, 0.14);
}

.faq-item details {
  /* reset */
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-1);
  user-select: none;
  transition: color var(--dur-fast) var(--ease-out);
}

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

.faq-q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-snug);
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-out);
}

.faq-item summary:hover .faq-q {
  color: var(--color-thread);
}

.faq-marker {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.faq-marker::before,
.faq-marker::after {
  content: '';
  position: absolute;
  background: var(--color-thread);
  border-radius: 1px;
  transition: transform var(--dur-base) var(--ease-out);
}

.faq-marker::before {
  top: 10px;
  left: 2px;
  right: 2px;
  height: 2px;
}

.faq-marker::after {
  top: 2px;
  bottom: 2px;
  left: 10px;
  width: 2px;
}

.faq-item details[open] .faq-marker::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq-a {
  padding: 0 var(--space-1) var(--space-6);
  max-width: 64ch;
}

.faq-a p {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: rgba(29, 29, 31, 0.75);
}

.faq-a strong {
  color: var(--color-ink);
  font-weight: 400;
  font-family: var(--font-display);
  font-size: 1.1em;
}

.faq-a a {
  color: var(--color-thread);
  text-decoration: underline;
  text-decoration-color: rgba(230, 57, 70, 0.5);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.faq-a a:hover {
  text-decoration-color: var(--color-thread);
}

/* ─────────────────────────────────────────
   18. Reduced motion (étend la règle existante)
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .step,
  .value,
  .contact-option,
  .manifesto-paragraph,
  .manifesto-pull,
  .constat-problem,
  .constat-answer,
  .home-step,
  .why-card,
  .faq-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn-link:hover::after,
  .footer-email:hover::after,
  .contact-link:hover::after {
    animation: none;
  }

  .footer-nav a::after,
  .portfolio-item-name::after {
    transition: none;
  }

  .why-card:hover {
    transform: none;
  }
}

@keyframes marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ─── Stitch reveal sur .section-num (fil qui se trace) ── */
.section-num.with-stitch {
  position: relative;
}
.section-num.with-stitch::before {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  background: var(--color-thread);
  margin: 0 0 18px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.section-num.with-stitch.is-drawn::before {
  transform: scaleX(1);
}

/* ─── Portfolio hover label "voir →" ───────────────────── */
.portfolio-cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9998;
  padding: 10px 18px;
  background: var(--color-thread);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border-radius: 999px;
  opacity: 0;
  transform: translate3d(-50%, calc(-50% - 36px), 0) scale(0.7);
  transition: opacity 0.2s ease,
              transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4);
  will-change: transform, opacity;
}

.portfolio-cursor-label.is-visible {
  opacity: 1;
  transform: translate3d(-50%, calc(-50% - 36px), 0) scale(1);
}

@media (hover: none), (pointer: coarse) {
  .portfolio-cursor-label { display: none; }
}

/* ─── Magnetic CTAs & tilt subtle ──────────────────────── */
.magnetic {
  display: inline-flex;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.tilt-3d {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* ─── Process steps : pas de hover ───────────────────────
   Les étapes ne sont pas cliquables → on retire toute interaction au
   survol (lift, fill rouge du num, tag rouge) qui suggérait à tort
   qu'on pouvait cliquer pour aller quelque part. */
.home-step {
  cursor: default;
}

/* Sub-hero stats : zoom doux du chiffre, label qui s'assombrit */
.sub-hero-stats li {
  cursor: default;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* Investment accord : nom qui glisse, marker plus expressif */
.investment-accord-item summary {
  transition: padding-left 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* FAQ : marker qui se déplace et nom de question qui glisse */
.faq-item summary {
  transition: padding-left 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.faq-item summary:hover {
  padding-left: 8px;
}

/* Btn-arrow : nudge supplémentaire au hover (cumulé avec les transitions existantes) */
.btn:hover .btn-arrow,
.hero-cta-btn:hover .btn-arrow {
  transform: translateX(4px);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* Reduced motion : neutralise les nouveaux hovers */
@media (prefers-reduced-motion: reduce) {
  .home-step.is-visible:hover,
  .home-step:hover .home-step-num,
  .sub-hero-stats li:hover,
  .sub-hero-stats li:hover .sub-hero-stat-num,
  .portfolio-item:hover,
  .investment-accord-item summary:hover,
  .faq-item summary:hover,
  .investment-accord-item:hover .investment-accord-num {
    transform: none !important;
    padding-left: 0 !important;
  }
}

/* ─── Split-text reveal (titres qui apparaissent mot par mot) ──
   Padding généreux pour accueillir les descenders (p, q, j) et surtout
   la pente italique qui dépasse à droite ; marge négative pour conserver
   l'espacement visuel inter-mots inchangé. */
.split-reveal .split-word,
[data-split] .split-word {
  display: inline-block;
  /* overflow: clip + overflow-clip-margin = on clippe pendant l'anim
     (le mot remonte par en bas) MAIS on autorise les descenders, la
     pente italique et les ascenders à déborder un peu sans être coupés.
     Fallback overflow:hidden pour les navigateurs anciens — combiné au
     padding/marge négative ça suffit à protéger la plupart des cas. */
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 0.35em;
  vertical-align: top;
  padding: 0.08em 0.12em 0.22em;
  margin: -0.08em -0.06em -0.22em;
}
.split-reveal .split-word > span,
[data-split] .split-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.split-reveal.is-revealed .split-word > span,
[data-split].is-revealed .split-word > span {
  transform: translateY(0);
}

.stat-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.stat-block::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 1px;
  background: var(--color-thread);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.stat-block.is-visible::before {
  transform: scaleX(1);
}
.stat-block:hover {
  transform: translateY(-4px);
}

.stat-unit {
  font-size: 0.35em;
  font-style: italic;
  color: var(--color-cream);
  letter-spacing: -0.01em;
}

/* ─── Mega CTA — bloc plein écran avant footer ───────── */
.mega-cta {
  background: var(--color-ink);
  color: var(--color-cream);
  padding: clamp(56px, 7.5vw, 110px) clamp(24px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}

.mega-cta-inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.mega-cta .section-num {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.7);
}

.mega-cta-title {
  margin: 20px auto 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 6.5vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-cream);
  text-align: center;
  /* Espace généreux pour absorber les descenders + la pente italique
     de "conversation." sans risquer de couper les lettres (le reveal
     animé via [data-split] applique overflow:hidden). */
  padding: 0.06em 0.1em 0.18em;
}
.mega-cta-title em {
  font-style: italic;
  font-weight: 700;
  color: var(--color-thread);
}

.mega-cta-lede {
  max-width: 56ch;
  margin: 0 auto clamp(28px, 3.5vw, 44px);
  font-family: var(--font-mono);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.mega-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: clamp(28px, 3.5vw, 40px);
}

.mega-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  text-decoration: none;
  border-radius: 14px;
  transition: background 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease,
              transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  min-width: 240px;
}

.mega-cta-btn--primary {
  background: var(--color-thread);
  color: var(--color-cream);
  border: 1px solid var(--color-thread);
}
.mega-cta-btn--primary:hover {
  transform: translateY(-4px);
  background: #d92b39;
  border-color: #d92b39;
}

.mega-cta-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--color-cream);
}
.mega-cta-btn--ghost:hover {
  transform: translateY(-4px);
  border-color: var(--color-thread);
  color: var(--color-thread);
}

.mega-cta-btn-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.mega-cta-btn-meta {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
}

.mega-cta-btn > span:first-child {
  flex: 1;
}

.mega-cta-btn-arrow {
  font-family: var(--font-display);
  font-size: 19px;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.mega-cta-btn:hover .mega-cta-btn-arrow {
  transform: translate(5px, -5px);
}

.mega-cta-reassure {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.mega-cta-reassure li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mega-cta-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-thread);
}

@media (max-width: 700px) {
  .mega-cta-btn {
    min-width: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat-block::before { transform: scaleX(1); }
  .stat-block:hover,
  .mega-cta-btn:hover { transform: none; }
  .split-reveal .split-word > span,
  [data-split] .split-word > span { transform: translateY(0); transition: none; }
}
@keyframes weaving-draw {
  to { stroke-dashoffset: 0; }
}

/* ─── Counter "odometer" — digit roll au viewport entry ── */
.counter {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Hérite font-family / size / color du parent (.sub-hero-stat-num) */
}

.counter-digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: top;
  line-height: 1;
}

.counter-strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  will-change: transform;
}

.counter-strip > span {
  display: block;
  height: 1em;
  line-height: 1;
}

.counter-static {
  display: inline-block;
  line-height: 1;
}

/* ─── Respect prefers-reduced-motion ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .portfolio-cursor-label { display: none; }

  .woven-track { animation: none; }

  .section-num.with-stitch::before { transform: scaleX(1); }

  .magnetic, .tilt-3d { transform: none !important; transition: none; }

  .counter-strip { transform: none !important; transition: none; }
}

/* ─────────────────────────────────────────
   19. Page loader
   Overlay plein écran affiché au chargement de chaque page.
   Logo crème sur fond ink, ligne rouge qui se dessine en travers.
───────────────────────────────────────── */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ink);
  opacity: 1;
  transition: opacity 0.7s cubic-bezier(.22,.61,.36,1),
              visibility 0.7s linear;
}

.page-loader-logo {
  width: min(58vw, 460px);
  height: auto;
  display: block;
  opacity: 0;
  transform: scale(.94);
  animation: pageLoaderLogoIn 1s cubic-bezier(.22,.61,.36,1) .15s forwards;
}

.page-loader-letters path { fill: var(--color-cream); }

/* La ligne rouge est animée en JS (path `d` mis à jour à chaque frame).
   On la garde simplement visible ici, avec un léger halo qui renforce
   l'aspect vivant et tissé. */
.page-loader-line {
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(230, 57, 70, .25));
}

.page-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes pageLoaderLogoIn {
  to { opacity: 1; transform: scale(1); }
}

/* Empêche le scroll tant que le loader est visible (navigateurs modernes) */
body:has(.page-loader:not(.is-leaving)) { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .page-loader-logo {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Le loader logo ne se joue qu'à la 1re entrée dans la session.
   Aux pages suivantes (drapeau `loomEntered` posé en JS), on coupe
   l'élément avant tout rendu via l'inline script en tête de <body>. */
html.loom-no-loader .page-loader { display: none; }

/* ─────────────────────────────────────────
   CLIENTS — texte XL à gauche, deck de cartes à droite
───────────────────────────────────────── */
.clients {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: var(--section-y) 0;
  overflow: hidden;
}

/* Layout en miroir de la section .services-v2 :
   services-v2 = texte à GAUCHE (sticky) + cards à DROITE.
   clients     = texte à DROITE (sticky) + cards à GAUCHE. */
.clients-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--section-x);
  display: grid;
  /* Règle des tiers — miroir de .services-v2-grid : cartes 2 tiers, texte 1 tiers. */
  grid-template-columns: 2fr 1fr;
  gap: clamp(48px, 7vw, 100px);
  align-items: start;
}

.clients-text {
  order: 2;
  position: sticky;
  top: clamp(96px, 12vh, 130px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: var(--space-5);                 /* 24px d'air entre titre, lede, CTA */
}

.clients-title {
  margin: 0;
  font-family: var(--font-display);    /* aligné sur display family */
  font-weight: 700;
  font-size: clamp(72px, 11vw, 160px); /* range custom — display XL section */
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--color-ink);
}

.clients-lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;                    /* léger pour contraste fort vs titre 700 */
  line-height: var(--leading-normal);
  color: rgba(29, 29, 31, 0.62);
  max-width: 52ch;
}
.clients-lede em {
  font-style: italic;
  color: var(--color-ink);
}

/* CTA pill — miroir du .services-v2-cta (blanche sur noir).
   Ici fond ink sur fond crème → pill noire texte crème. */
.clients-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-end;
  padding: var(--space-4) var(--space-6);
  margin-top: var(--space-2);
  background: var(--color-ink);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--track-normal);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition:
    transform var(--dur-base) var(--ease-in-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.clients-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.clients-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-base) var(--ease-in-out);
}
.clients-cta:hover .clients-cta-arrow {
  transform: translate(2px, -2px);
}

/* ── Deck — 3 cartes empilées en pile vue de face ──
   Largeur contenue (~960 max), chevauchement vertical de 26 px par
   margin négative, z-index croissant en DOM → la dernière passe par-dessus. */
.clients-deck {
  order: 1;                            /* deck affiché à gauche */
  position: relative;
  width: 100%;
  max-width: 620px;
  margin-right: auto;
  margin-left: 0;
  isolation: isolate;
}

.client-card {
  position: relative;
  display: grid;
  grid-template-columns: 45% 1fr;
  align-items: stretch;
  width: 100%;
  /* Aspect-ratio fixé sur la carte → toutes les cartes ont la même
     hauteur, donc toutes les photos aussi. Sans ça, un nom à 2 lignes
     (Camille Hertz, Studio Ourse) rendait son body plus haut et tirait
     la photo en hauteur de cette carte uniquement. */
  aspect-ratio: 2.4 / 1;
  padding: var(--space-4);
  background: var(--card-bg);
  color: var(--card-fg);
  border-radius: var(--radius-md);     /* 14px tokenisé, cohérent autres cards */
  text-decoration: none;
  box-shadow: var(--shadow-1);         /* ombre subtile — contraste bg fait le travail */
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
  will-change: transform;
}

/* Chevauchement entre cartes — effet "deck". Réglé pour que la zone
   pills (bas de la carte) reste visible au-dessus du recouvrement par
   la carte suivante. À combiner avec padding-bottom du body ≥ overlap. */
.client-card + .client-card {
  margin-top: -42px;
}

/* Z-index croissant : la 3ᵉ carte passe par-dessus la 2ᵉ qui passe
   par-dessus la 1ʳᵉ → effet de pile vue de face. */
.client-card--1 {
  z-index: 1;
  --card-bg: var(--swatch-clay);
  --card-fg: var(--swatch-clay-fg);
}
.client-card--2 {
  z-index: 2;
  --card-bg: var(--swatch-forest);
  --card-fg: var(--swatch-forest-fg);
}
.client-card--3 {
  z-index: 3;
  --card-bg: var(--swatch-paper);
  --card-fg: var(--swatch-paper-fg);
}
.client-card--4 {
  z-index: 4;
  --card-bg: var(--swatch-petrol);
  --card-fg: var(--swatch-petrol-fg);
}

/* Variante "à venir" / "en cours" — non cliquable, légèrement adoucie. */
.client-card--coming {
  cursor: default;
}
.client-card--coming:hover {
  transform: none;
}

.client-card:hover,
.client-card:focus-visible {
  /* Léger soulèvement, comme si on tirait doucement la carte vers le
     haut. On NE TOUCHE PAS au z-index → l'empilement original est
     préservé (les cartes du dessus restent au-dessus). */
  transform: translateY(-12px);
  box-shadow: var(--shadow-3);
  outline: none;
}

.client-card-visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);     /* aligné sur la carte */
  background: rgba(0, 0, 0, 0.08);
}
.client-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out);
}
.client-card:hover .client-card-visual img {
  transform: scale(1.05);
}

.client-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  /* Padding-bottom = overlap entre cartes (42px), pour que les pills
     restent visibles au-dessus du recouvrement par la carte suivante. */
  padding: clamp(14px, 2vw, 24px) clamp(16px, 2.4vw, 28px) var(--space-6) clamp(20px, 2.6vw, 32px);
  min-width: 0;
}

.client-card-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--card-fg);
  opacity: 0.88;
}

.client-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  /* Taille calée pour qu'un prénom de 7-8 lettres (ex: "Camille") tienne
     dans la colonne de droite sans déborder à la largeur max du deck. */
  font-size: clamp(1.85rem, 4.4vw, 3.1rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--card-fg);
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.client-card-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.client-card-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--card-fg);
  color: var(--card-bg);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;                   /* taille spécifique — entre xs et sm */
  letter-spacing: var(--track-normal);
  line-height: 1;
}
/* Sur carte 3 (paper), card-bg = crème → card-fg = ink. La pill devient
   donc ink avec texte crème : contraste max, lecture confortable. */
.client-card--3 .client-card-pill {
  background: var(--card-fg);
  color: var(--swatch-paper);
}

/* ── Responsive ─────────────────────────── */
@media (max-width: 960px) {
  .clients-inner {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  /* En 1 colonne : texte en premier, à gauche, alignement standard. */
  .clients-text {
    order: 0;
    position: static;
    align-items: flex-start;
    text-align: left;
  }
  .clients-cta {
    align-self: flex-start;
  }
  .clients-deck {
    order: 0;
    margin: 0 auto;
    max-width: 720px;
  }
}

@media (max-width: 720px) {
  .client-card {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    padding: 14px;
    border-radius: 24px;
  }
  .client-card + .client-card {
    /* En mobile, les cartes s'empilent verticalement avec moins de chevauchement */
    margin-top: -28px;
  }
  .client-card-body {
    padding: 18px 14px 6px;
  }
  .client-card-visual {
    aspect-ratio: 16 / 10;
  }
  .client-card-name {
    font-size: clamp(2.4rem, 9vw, 3.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-card,
  .client-card-visual img {
    transition: none;
  }
}

/* ─────────────────────────────────────────
   BLOG — 3 cartes empilées au centre, qui se dispersent
   en colonnes au moment où la section entre dans le viewport.
───────────────────────────────────────── */
.blog {
  background: var(--color-ink);
  color: var(--color-cream);
  padding: var(--section-y) var(--section-x);
  overflow: hidden;
}

.blog-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.blog-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  margin-bottom: var(--space-9);
}

.blog-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  margin: 0;
  color: var(--color-cream);
}
.blog-title em {
  font-style: italic;
  color: var(--color-thread);
  font-weight: 400;
}

.blog-lede {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-cream);
  opacity: 0.7;
  max-width: 52ch;
  margin: 0;
}

/* ── Deck dispersable ─────────────────────
   Layout final = 3 colonnes égales. État initial = toutes les cartes
   ramenées au centre par transform. .is-visible (posée par main.js via
   data-reveal) retire les transforms → la grille reprend ses droits. */
.blog-deck {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.blog-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* ── Liquid Glass Apple-style poussé ──
     1. Surface : gradient diagonal (plus laiteuse haut → plus claire bas)
     2. Bord réfractif via background-clip padding-box / border-box
     3. Backdrop blur agressif (40px) + saturation 200% + brightness 1.08
     4. 4 reflets internes pour le biseau verre (lumière en haut-gauche)
     5. ::before = specular highlight diagonal en overlay */
  border: 1px solid transparent;
  background:
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.72) 45%,
      rgba(255, 255, 255, 0.82) 100%) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.35) 50%,
      rgba(255, 255, 255, 0.85) 100%) border-box;
  backdrop-filter: blur(40px) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.08);
  color: var(--color-ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  box-shadow:
    0 36px 80px -32px rgba(0, 0, 0, 0.6),
    0 6px 18px -6px rgba(0, 0, 0, 0.22),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.55),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.18),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.12);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}

/* Specular highlight : nappe de lumière diagonale qui traverse le verre,
   en blend overlay pour réagir à ce qu'il y a derrière (l'image, le fond
   ink). C'est ce qui donne la signature "verre liquide" Apple. */
.blog-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.04) 35%,
    transparent 55%,
    rgba(255, 255, 255, 0.06) 80%,
    rgba(255, 255, 255, 0.14) 100%
  );
  mix-blend-mode: overlay;
}

/* Entrée sobre : fade-up décalé légèrement. Plus de teintes par carte —
   le liquid glass uniforme prend le relais. */
.blog-card--1 { transition-delay: 0s;    }
.blog-card--2 { transition-delay: 0.08s; }
.blog-card--3 { transition-delay: 0.16s; }
.blog-card--4 { transition-delay: 0.24s; }

.blog-deck.is-visible .blog-card {
  opacity: 1;
  transform: translateY(0);
}

.blog-card:hover,
.blog-card:focus-visible {
  transform: translateY(-12px) rotate(0deg) scale(1.025);
  background:
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.82) 45%,
      rgba(255, 255, 255, 0.9) 100%) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0.95) 100%) border-box;
  box-shadow:
    0 60px 120px -32px rgba(0, 0, 0, 0.8),
    0 12px 24px -6px rgba(230, 57, 70, 0.22),
    inset 0 1.5px 1px rgba(255, 255, 255, 1),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.75),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.3),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.2);
  z-index: 10;
  outline: none;
}

/* Quand la carte est survolée, le titre passe en rouge fil et la
   meta gagne un soupçon de vivacité — toute la carte "s'allume". */
.blog-card-title {
  transition: color var(--dur-base) var(--ease-out);
}
.blog-card:hover .blog-card-title,
.blog-card:focus-visible .blog-card-title {
  color: var(--color-thread);
}

.blog-card-visual {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-ink);
  /* Clip arrondi indépendant : l'image est rognée AUX ANGLES DE LA CARTE
     même si le clip du parent (overflow + border-radius + backdrop-filter
     + transform au hover) flanche sur Safari/Chrome. Les 2 coins du haut
     suivent le radius de .blog-card (24px), les 2 du bas restent droits
     (la zone meta dessous est plate). On laisse 1px de marge intérieure
     pour éviter une fine ligne blanche entre image et bord verre. */
  border-radius: 23px 23px 0 0;
  isolation: isolate;
}
.blog-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.blog-card:hover .blog-card-visual img {
  transform: scale(1.04);
}

.blog-card-meta {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.blog-card-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-thread);
}

.blog-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-snug);
  margin: 0;
  color: var(--color-ink);
}

.blog-card-excerpt {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: rgba(29, 29, 31, 0.7);
  margin: 0;
}

/* ── Responsive ─────────────────────────── */
@media (max-width: 1100px) {
  .blog-deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .blog-deck {
    grid-template-columns: 1fr;
  }
}

/* En tablette/mobile : on supprime juste le délai pour que toutes les
   cartes apparaissent ensemble (pas de stagger sur petit écran). */
@media (max-width: 1100px) {
  .blog-card--1,
  .blog-card--2,
  .blog-card--3,
  .blog-card--4 {
    transition-delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card {
    transition: none;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ARTICLE — Page d'un article du journal loom
   Mise en page longue lecture : fil d'Ariane, titre XL, méta-data,
   visuel, corps avec hiérarchie typographique soignée, CTA et
   articles liés en pied. Pensée pour le SEO (structure sémantique
   <article><header><time> + JSON-LD côté HTML).
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   PAGE ABOUT — surcharge typographique scopée
   Cette page utilise Inter variable avec son axe italique
   (chargé localement dans le <head> de a-propos.html). On
   surcharge les tokens display/body pour Inter et on active
   l'italique authentique sur les <em> (au lieu du gris muted).
   ═══════════════════════════════════════════════════════════ */
body.page-about {
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Sur cette page, on exploite l'italique Inter pour les emphases.
   Override de la règle globale (qui mettait em en gris muted upright). */
body.page-about .page-title em,
body.page-about .atelier-quote em,
body.page-about .manifesto-paragraph em,
body.page-about .manifesto-pull em,
body.page-about .values-title em,
body.page-about .cta-band-line em {
  font-style: italic;
  font-weight: 400;
  color: inherit;
  opacity: 0.92;
}

.article-page {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: calc(var(--header-h) + clamp(40px, 6vw, 88px)) clamp(24px, 6vw, 64px) 0;
}

.article {
  max-width: 760px;
  margin: 0 auto;
}

/* ── En-tête : breadcrumb + tag + titre + lede + byline ────── */
.article-header {
  margin-bottom: clamp(40px, 6vw, 72px);
}

.article-breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(29, 29, 31, 0.55);
  margin-bottom: clamp(28px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.article-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.article-breadcrumb a:hover {
  color: var(--color-thread);
}
.article-breadcrumb .is-current {
  color: var(--color-ink);
  opacity: 0.85;
}

.article-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-thread);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.article-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 0 0 clamp(20px, 2.5vw, 32px);
}

.article-lede {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: rgba(29, 29, 31, 0.78);
  margin: 0 0 clamp(24px, 3vw, 36px);
  max-width: 60ch;
}

.article-byline {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(29, 29, 31, 0.6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.article-byline a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(230, 57, 70, 0.4);
  transition: border-color 0.2s ease;
}
.article-byline a:hover {
  border-bottom-color: var(--color-thread);
}

/* ── Visuel d'illustration ─────────────────────────────────── */
.article-hero {
  margin: clamp(8px, 1vw, 16px) 0 clamp(40px, 5vw, 64px);
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-ink);
}
.article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Corps de l'article ────────────────────────────────────── */
.article-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-ink);
}

.article-body p {
  margin: 0 0 1.4em;
}

.article-body p:first-child::first-letter {
  /* Une élégante drop cap optionnelle sur le 1er paragraphe */
  font-family: var(--font-display);
  font-size: 3.2em;
  line-height: 0.9;
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--color-thread);
}

.article-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin: 2.4em 0 0.8em;
}

.article-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 1.8em 0 0.6em;
}

.article-body a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-thread);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color 0.2s ease;
}
.article-body a:hover {
  color: var(--color-thread);
}

.article-body strong { font-weight: 600; }
.article-body em { font-style: italic; }

.article-body ul,
.article-body ol {
  margin: 0 0 1.4em;
  padding-left: 1.4em;
}
.article-body li {
  margin-bottom: 0.5em;
}
.article-body ul li::marker { color: var(--color-thread); }
.article-body ol li::marker { color: var(--color-thread); font-family: var(--font-mono); }

.article-body blockquote {
  margin: 2em 0;
  padding: 0 0 0 clamp(20px, 2.4vw, 32px);
  border-left: 3px solid var(--color-thread);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: rgba(29, 29, 31, 0.85);
}

.article-body hr {
  border: 0;
  border-top: 1px dashed rgba(29, 29, 31, 0.2);
  margin: 2.4em 0;
}

.article-body figure {
  margin: 2em 0;
}
.article-body figure img {
  width: 100%;
  border-radius: 12px;
  display: block;
}
.article-body figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(29, 29, 31, 0.55);
  text-align: center;
}

/* ── Pied de l'article : CTA ───────────────────────────────── */
.article-footer {
  margin: clamp(56px, 7vw, 96px) 0 clamp(72px, 10vw, 128px);
  padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 44px);
  background: var(--color-ink);
  color: var(--color-cream);
  border-radius: clamp(18px, 2vw, 28px);
  text-align: center;
}
.article-footer-line {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
}
.article-footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ── Articles liés en fin de page ──────────────────────────── */
.article-related {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 0 clamp(80px, 10vw, 140px);
}
.article-related-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.55);
  margin: 0 0 clamp(20px, 2.4vw, 32px);
}
.article-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
@media (max-width: 800px) {
  .article-related-grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════
   PORTFOLIO — version refondue
   Intro typo XL bold + deck de cartes empilées (réutilise
   les palettes .client-card--1 → --4).
   ═════════════════════════════════════════════════════════ */
.portfolio-intro {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(120px, 18vh, 200px) clamp(24px, 6vw, 80px) clamp(40px, 6vw, 70px);
}
.portfolio-intro-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
}
.portfolio-intro-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(72px, 13vw, 200px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}
.portfolio-intro-lede {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.5;
  color: rgba(29, 29, 31, 0.55);
  max-width: 60ch;
}
.portfolio-intro-lede em {
  font-style: italic;
  color: var(--color-ink);
}

.portfolio-cases {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 12vw, 160px);
  overflow: hidden;
}
.portfolio-cases-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}

/* Deck portfolio : grille propre 4 colonnes (2×2 desktop), cartes verticales
   noires avec texte blanc. Un SVG "fil rouge" se superpose en absolute et
   relie le centre de chaque carte (cf. main.js setupPortfolioThread). */
.portfolio-cases-deck {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  isolation: isolate;
}

/* SVG fil rouge — épouse exactement la zone du deck, ne capture pas les
   clics, et se place au-dessus des cartes pour que les pins soient
   visibles "épinglés" sur les photos. */
.portfolio-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}

.portfolio-thread .thread-path {
  stroke: var(--color-thread);
  stroke-width: 2.2;
  filter: drop-shadow(0 1px 2px rgba(230, 57, 70, 0.35));
}

/* Pins : un halo translucide derrière, un point plein devant. Tous deux
   passent de scale(0) à scale(1) avec un léger délai progressif pour
   donner l'illusion qu'ils sont posés un par un sur le tracé. */
.portfolio-thread .thread-pin-halo,
.portfolio-thread .thread-pin-dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.portfolio-thread .thread-pin-halo {
  fill: var(--color-thread);
  opacity: 0;
}
.portfolio-thread .thread-pin-dot {
  fill: var(--color-thread);
  filter: drop-shadow(0 2px 4px rgba(230, 57, 70, 0.45));
}

/* Cercle de hit-test : invisible, mais large (r=22 → 44 px de diamètre) →
   zone survolable généreuse autour du pin. pointer-events: all → reçoit
   le hover même si fill est transparent. */
.portfolio-thread .thread-pin-hit {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
}

/* État "épinglé arraché", posé par le JS au mouseenter sur la zone de hit.
   Le dot scale up et disparaît, le halo s'efface en parallèle. */
.portfolio-thread .thread-pin-dot.is-popped {
  transform: scale(1.8) !important;
  opacity: 0 !important;
  transition:
    transform 0.34s cubic-bezier(0.34, 1.7, 0.4, 1),
    opacity 0.28s ease 0.06s !important;
}
.portfolio-thread .thread-pin-halo.is-popped {
  opacity: 0 !important;
}

/* Délais d'apparition des pins maintenant posés en inline-style par le JS,
   donc plus de :nth-of-type ici. */

.portfolio-cases-deck.thread-drawing .thread-pin-halo {
  transform: scale(1);
  opacity: 0.22;
}
.portfolio-cases-deck.thread-drawing .thread-pin-dot {
  transform: scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-thread .thread-path {
    transition: none !important;
    stroke-dashoffset: 0 !important;
  }
  .portfolio-thread .thread-pin-halo,
  .portfolio-thread .thread-pin-dot {
    transition: none !important;
    transform: scale(1);
    opacity: 1;
  }
}

/* ── Liquid Glass SOMBRE (portfolio) ──
   Même langage que les cartes blog mais inversé : surface très sombre,
   reflets clairs subtils pour le biseau verre fumé. */
.portfolio-cases-deck .client-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  aspect-ratio: 3 / 4.2;
  width: 100%;
  margin-top: 0;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid transparent;
  background:
    linear-gradient(155deg,
      rgba(20, 20, 22, 0.88) 0%,
      rgba(10, 10, 12, 0.78) 45%,
      rgba(20, 20, 22, 0.84) 100%) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(255, 255, 255, 0.3) 100%) border-box;
  backdrop-filter: blur(40px) saturate(180%) brightness(0.85);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(0.85);
  color: var(--color-cream);
  --card-bg: var(--color-ink);
  --card-fg: var(--color-cream);
  box-shadow:
    0 36px 80px -32px rgba(0, 0, 0, 0.55),
    0 6px 18px -6px rgba(0, 0, 0, 0.22),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.35),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.06),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.04);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    opacity 0.6s ease;
}

/* Specular highlight diagonal en overlay → réfraction d'une plaque
   de verre fumé éclairée du haut-gauche. */
.portfolio-cases-deck .client-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.03) 35%,
    transparent 55%,
    rgba(255, 255, 255, 0.04) 80%,
    rgba(255, 255, 255, 0.08) 100%
  );
  mix-blend-mode: overlay;
}

.portfolio-cases-deck .client-card-visual {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 14px;
}
.portfolio-cases-deck .client-card-body {
  flex: 0 0 auto;
  padding-top: 14px;
  color: var(--color-cream);
}

/* Tag, nom, pills : forcés en cream/transparent cream pour la lisibilité
   sur le fond noir, quoi que les règles globales aient pu coller. */
.portfolio-cases-deck .client-card-tag {
  color: rgba(242, 235, 224, 0.6);
}
.portfolio-cases-deck .client-card-name {
  color: var(--color-cream);
}
.portfolio-cases-deck .client-card-pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--color-cream);
}

/* Reveal : opacité + petite remontée. Pas de rotation aléatoire. */
.portfolio-cases-deck .client-card[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}
.portfolio-cases-deck .client-card[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hover : la plaque de verre s'éclaire — reflets renforcés, lift vertical. */
.portfolio-cases-deck .client-card:hover,
.portfolio-cases-deck .client-card:focus-visible {
  transform: translateY(-10px);
  background:
    linear-gradient(155deg,
      rgba(28, 28, 32, 0.92) 0%,
      rgba(14, 14, 16, 0.85) 45%,
      rgba(28, 28, 32, 0.9) 100%) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.5) 100%) border-box;
  box-shadow:
    0 60px 120px -32px rgba(0, 0, 0, 0.7),
    0 12px 24px -6px rgba(230, 57, 70, 0.22),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.55),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.3),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.1),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.08);
  outline: none;
}

/* La carte "tombe" quand son pin saute : translateY + rotate + ombre lourde.
   Spécificité 0,3,0 > la règle :hover → l'emporte même si la souris est sur
   la carte. Le retour (sortie de la souris du pin) se fait via JS qui
   retire .is-falling et la carte revient avec la même transition. */
.portfolio-cases-deck .client-card.is-falling,
.portfolio-cases-deck .client-card.is-falling:hover {
  transform: translateY(140px) rotate(-3.5deg);
  opacity: 0.92;
  box-shadow:
    0 70px 90px -32px rgba(0, 0, 0, 0.5),
    0 12px 24px -8px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.7s cubic-bezier(0.34, 1.2, 0.64, 1),
    opacity 0.4s ease,
    box-shadow 0.5s ease;
}

@media (max-width: 1100px) {
  .portfolio-cases-deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .portfolio-intro {
    padding-top: clamp(96px, 14vh, 140px);
  }
  .portfolio-cases-deck {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 380px;
    margin: 0 auto;
  }
}

/* ─────────────────────────────────────────
   HOME SERVICES — version simple : 3 rectangles arrondis glass
   sur fond ink. Même DA que le reste de la page d'accueil.
───────────────────────────────────────── */
.home-services {
  background: var(--color-ink);
  color: var(--color-cream);
  padding: clamp(80px, 11vw, 140px) clamp(24px, 6vw, 80px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.home-services-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.home-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}

.home-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(28px, 3vw, 40px);
  min-height: clamp(280px, 26vw, 360px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: clamp(20px, 2.4vw, 28px);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  text-decoration: none;
  color: var(--color-cream);
  overflow: hidden;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease;
}

.home-service-card:hover,
.home-service-card:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(230, 57, 70, 0.45);
  transform: translateY(-6px);
  box-shadow:
    0 28px 56px -24px rgba(0, 0, 0, 0.6),
    0 6px 16px -6px rgba(230, 57, 70, 0.18);
  outline: none;
}

.home-service-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-cream);
}

.home-service-desc {
  margin: 0;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  flex: 1 1 auto;
}

.home-service-price {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  padding-top: 18px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}
.home-service-price strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--color-cream);
}

.home-service-arrow {
  position: absolute;
  top: clamp(20px, 2vw, 28px);
  right: clamp(20px, 2vw, 28px);
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-cream);
  opacity: 0.4;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease,
              color 0.3s ease;
}

.home-service-card:hover .home-service-arrow,
.home-service-card:focus-visible .home-service-arrow {
  opacity: 1;
  color: var(--color-thread);
  transform: translate(4px, -4px);
}

@media (max-width: 900px) {
  .home-services-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
}

/* Sur services.html, la note partage le fond ink → texte cream transparent
   au lieu du gris sombre par défaut. */
.home-services .services-note {
  color: rgba(255, 255, 255, 0.55);
  margin-top: clamp(56px, 7vw, 96px);
}
.home-services .services-note-mark {
  color: var(--color-thread);
}

/* ─── Variante claire pour services.html : même structure, fond cream,
   texte ink, cards glass sur fond clair. ─── */
.home-services--light {
  background: var(--color-cream);
  color: var(--color-ink);
  border-top-color: rgba(29, 29, 31, 0.08);
}
.home-services--light .home-services-title {
  color: var(--color-ink);
}
.home-services--light .home-services-lede {
  color: rgba(29, 29, 31, 0.65);
}
.home-services--light .home-service-card {
  border-color: rgba(29, 29, 31, 0.14);
  background: rgba(29, 29, 31, 0.025);
  color: var(--color-ink);
}
.home-services--light .home-service-card:hover,
.home-services--light .home-service-card:focus-visible {
  background: rgba(29, 29, 31, 0.05);
  border-color: rgba(230, 57, 70, 0.45);
  box-shadow:
    0 28px 56px -24px rgba(29, 29, 31, 0.25),
    0 6px 16px -6px rgba(230, 57, 70, 0.18);
}
.home-services--light .home-service-name {
  color: var(--color-ink);
}
.home-services--light .home-service-desc {
  color: rgba(29, 29, 31, 0.7);
}
.home-services--light .home-service-price {
  color: rgba(29, 29, 31, 0.6);
  border-top-color: rgba(29, 29, 31, 0.16);
}
.home-services--light .home-service-price strong {
  color: var(--color-ink);
}
.home-services--light .home-service-arrow {
  color: var(--color-ink);
  opacity: 0.45;
}
.home-services--light .home-service-card:hover .home-service-arrow,
.home-services--light .home-service-card:focus-visible .home-service-arrow {
  color: var(--color-thread);
  opacity: 1;
}
.home-services--light .services-note {
  color: rgba(29, 29, 31, 0.55);
}

/* ─────────────────────────────────────────
   services.html — variante page entière en blanc.
   Override des sections par défaut sombres → fond cream, texte ink.
───────────────────────────────────────── */
body.services-light {
  background: var(--color-cream);
}

/* Hero / intro de page */
body.services-light .page-intro {
  background: var(--color-cream);
  color: var(--color-ink);
}
body.services-light .page-title,
body.services-light .page-lede {
  color: var(--color-ink);
}
body.services-light .page-lede {
  color: rgba(29, 29, 31, 0.65);
}
/* Sur services-light (fond cream), les <em> du lede héritaient d'un
   color: cream → invisible sur cream. On force la couleur ink. */
body.services-light .page-lede em,
body.services-light .page-intro em {
  color: var(--color-ink) !important;
}
body.services-light .page-intro .section-num--inverse {
  border-color: rgba(29, 29, 31, 0.16);
  background: rgba(29, 29, 31, 0.03);
  color: rgba(29, 29, 31, 0.7);
}

/* Stats (48h / 6 sem. / 100%) */
body.services-light .services-stats {
  background: var(--color-cream);
  color: var(--color-ink);
  border-bottom-color: rgba(29, 29, 31, 0.08);
}
body.services-light .services-stats .stat-eyebrow {
  color: var(--color-thread);
}
body.services-light .services-stats .stat-figure,
body.services-light .services-stats .stat-unit,
body.services-light .services-stats .counter {
  color: var(--color-ink);
}
body.services-light .services-stats .stat-caption {
  color: rgba(29, 29, 31, 0.6);
}

/* Mega CTA final */
body.services-light .mega-cta {
  background: var(--color-cream);
  color: var(--color-ink);
}
body.services-light .mega-cta-title,
body.services-light .mega-cta-title em {
  color: var(--color-ink);
}
body.services-light .mega-cta-title em {
  color: var(--color-thread);
}
body.services-light .mega-cta-lede {
  color: rgba(29, 29, 31, 0.7);
}
body.services-light .mega-cta .section-num {
  background: rgba(29, 29, 31, 0.03);
  border-color: rgba(29, 29, 31, 0.16);
  color: rgba(29, 29, 31, 0.7);
}
body.services-light .mega-cta-btn--ghost {
  border-color: rgba(29, 29, 31, 0.2);
  color: var(--color-ink);
}
body.services-light .mega-cta-btn--ghost:hover {
  background: rgba(29, 29, 31, 0.05);
  border-color: var(--color-ink);
}
body.services-light .mega-cta-reassure {
  border-top-color: rgba(29, 29, 31, 0.1);
  color: rgba(29, 29, 31, 0.6);
}

/* Sur services.html, on supprime les bordures entre sections pour que
   tout le bloc cream se lise comme un seul flux continu. */
body.services-light .services-stats {
  border-bottom: none;
}
body.services-light .home-services {
  border-top: none;
}

/* Sur services.html : intro centrée + titre en gras. */
body.services-light .page-intro {
  text-align: center;
}
body.services-light .page-title {
  font-weight: 700;
  margin-left: auto;
  margin-right: auto;
  /* Le max-width 14ch par défaut est trop étroit pour un titre 2 lignes.
     On libère la contrainte : chaque ligne se centre proprement dans le parent. */
  max-width: none;
}
body.services-light .page-lede {
  margin-left: auto;
  margin-right: auto;
  /* Paragraphe centré comme bloc, mais texte aligné à gauche à
     l'intérieur → toutes les lignes commencent au même endroit
     (plus lisible qu'un texte centré multi-lignes). */
  max-width: 52ch;
  text-align: left;
  text-wrap: pretty;
}

.title-dot {
  color: var(--color-thread);
  /* L'em hérité peut adoucir le point sur certains H1 → on force le style
     direct pour que le point lise bien quelle que soit la phrase qui le précède. */
  font-style: normal;
  display: inline-block;
}

/* services.html — vides verticaux serrés pour éviter les grands trous
   entre sections après les suppressions (stats, manifesto, etc.). */
body.services-light .page-intro {
  padding-bottom: clamp(28px, 4vw, 56px);
}
body.services-light .home-services {
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(56px, 7vw, 90px);
}
body.services-light .home-services .services-note {
  margin-top: clamp(32px, 4vw, 56px);
}
body.services-light .mega-cta {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(56px, 7vw, 90px);
}

/* contact.html — intro centrée + titre en gras (même traitement que
   services.html, scopé à cette page seule). */
body.contact-light .page-intro {
  text-align: center;
}
body.contact-light .page-title {
  font-weight: 700;
  margin-left: auto;
  margin-right: auto;
}
body.contact-light .page-lede {
  margin-left: auto;
  margin-right: auto;
}

/* ─────────────────────────────────────────
   UX guidance — barre de progression scroll + pill contact flottant.
   Petits guides ambiants qui rassurent l'utilisateur sur sa progression
   et lui laissent une porte de sortie vers la conversion sans jamais
   être intrusifs.
───────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-thread);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.12s linear;
  z-index: 9998;
  pointer-events: none;
}

.floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Ancrages : quand on cible une section via #id, on laisse un peu de
   place pour le header sticky (~80 px) → atterrissage propre, pas de
   titre coincé sous la nav. */
section[id],
:target {
  scroll-margin-top: 96px;
}

/* Reduce-motion : on coupe l'apparition du pill (apparaît direct, ou
   pas du tout selon la pref user). Et la barre scroll snape sans
   transition. */
@media (prefers-reduced-motion: reduce) {
  .floating-cta {
    transition: none;
  }
  #scroll-progress {
    transition: none;
  }
}

/* Mobile : pill plus compact, sans meta line pour ne pas écraser l'écran. */
@media (max-width: 540px) {
  .floating-cta {
    padding: 12px 38px 12px 16px;
    border-radius: 999px;
  }
  .floating-cta-label {
    font-size: 13px;
  }
  .floating-cta-meta {
    display: none;
  }
  .floating-cta-arrow {
    right: 14px;
    font-size: 16px;
  }
}

/* ─────────────────────────────────────────
   Back-to-top — bouton flottant rond en bas à droite, en pill ink.
   Apparaît au-delà de 60 % du scroll (gestion JS via .is-visible).
   Présent sur toutes les pages (injecté par main.js).
───────────────────────────────────────── */
#back-to-top {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(20px, 3vw, 32px);
  z-index: 90;
  isolation: isolate;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* ── Liquid Glass sombre (mêmes recettes que les cartes orbit/portfolio) ──
     Surface ink translucide + bord réfractif gradient + backdrop blur. */
  border: 1px solid transparent;
  background:
    linear-gradient(155deg,
      rgba(20, 20, 22, 0.78) 0%,
      rgba(10, 10, 12, 0.66) 45%,
      rgba(20, 20, 22, 0.74) 100%) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.35) 100%) border-box;
  backdrop-filter: blur(20px) saturate(180%) brightness(0.9);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(0.9);
  border-radius: 999px;
  color: var(--color-cream);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow:
    0 18px 36px -14px rgba(0, 0, 0, 0.55),
    0 3px 10px -3px rgba(0, 0, 0, 0.3),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.4),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.2),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.08),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.05);
}

/* Specular highlight diagonal — nappe de lumière qui traverse le verre. */
#back-to-top::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 35%,
    transparent 55%,
    rgba(255, 255, 255, 0.05) 80%,
    rgba(255, 255, 255, 0.1) 100%
  );
  mix-blend-mode: overlay;
}

/* Place l'icône au-dessus du highlight specular */
#back-to-top svg {
  position: relative;
  z-index: 2;
}

#back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

#back-to-top:hover {
  background:
    linear-gradient(155deg,
      rgba(28, 28, 32, 0.85) 0%,
      rgba(14, 14, 16, 0.72) 45%,
      rgba(28, 28, 32, 0.82) 100%) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.55) 100%) border-box;
  transform: translateY(-2px) scale(1);
  box-shadow:
    0 24px 48px -14px rgba(0, 0, 0, 0.65),
    0 6px 14px -3px rgba(0, 0, 0, 0.35),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.6),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.32),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.12),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.08);
}

#back-to-top:active {
  transform: translateY(0) scale(0.96);
}

#back-to-top:focus-visible {
  outline: 2px solid var(--color-thread);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  #back-to-top {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #back-to-top {
    transition: opacity 0.15s linear;
    transform: none !important;
  }
  #back-to-top.is-visible {
    transform: none !important;
  }
}

/* ─────────────────────────────────────────
   Service modal — gros rectangle qui apparaît au-dessus de la page
   au clic sur une carte service. Contenu cloné par JS depuis
   #services-details (qui reste hidden).
───────────────────────────────────────── */
.service-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  pointer-events: none;
  visibility: hidden;
}

.service-modal.is-open {
  pointer-events: auto;
  visibility: visible;
}

/* Backdrop ink fortement flouté — l'arrière-plan disparaît derrière
   un voile glass profond. */
.service-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(230, 57, 70, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(56, 96, 230, 0.18) 0%, transparent 50%),
    rgba(10, 10, 14, 0.7);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  opacity: 0;
  transition: opacity 0.35s ease;
  cursor: pointer;
}
.service-modal.is-open .service-modal-backdrop {
  opacity: 1;
}

/* Panel = grosse carte ink à coins très arrondis, gradient subtil,
   reflets internes pour un look "verre teinté éclairé". */
.service-modal-panel {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1140px;
  max-height: 88vh;
  border-radius: 32px;
  overflow: hidden auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #000000;
  color: var(--color-cream);
  box-shadow:
    0 80px 160px -32px rgba(0, 0, 0, 0.7),
    0 24px 48px -12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(40px) scale(0.94);
  transition:
    opacity 0.4s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-modal.is-open .service-modal-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Scrollbar masquée — le scroll fonctionne, mais aucune barre visible. */
.service-modal-panel { scrollbar-width: none; }
.service-modal-panel::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Bouton fermer — pill liquid glass en haut à droite, fixe pendant le scroll */
.service-modal-close {
  position: sticky;
  top: clamp(16px, 2.4vw, 24px);
  right: clamp(16px, 2.4vw, 24px);
  margin-left: auto;
  margin-right: clamp(16px, 2.4vw, 24px);
  margin-top: clamp(16px, 2.4vw, 24px);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: 50%;
  color: var(--color-cream);
  cursor: pointer;
  z-index: 5;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  float: right;
}
.service-modal-close:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.32);
  transform: scale(1.05);
}
.service-modal-close:focus-visible {
  outline: 2px solid var(--color-thread);
  outline-offset: 3px;
}

.service-modal-body {
  padding: clamp(36px, 6vw, 80px) clamp(28px, 5.5vw, 72px) clamp(48px, 7vw, 88px);
  color: var(--color-cream);
}

/* ─── Article offer cloné dans la modal — reset + relook éditorial ── */
.service-modal-body .offer {
  display: block;
  padding: 0;
  border-top: 0;
  opacity: 1;
  transform: none;
  transition: none;
}
.service-modal-body .offer-node,
.service-modal-body .offer-filigree,
.service-modal-body .services-thread {
  display: none;
}

/* Header pastille (numéro + kicker) supprimé visuellement — le titre
   suffit, on garde le numéro/kicker en accessibilité via le DOM cloné. */
.service-modal-body .offer-meta {
  display: none;
}
.service-modal-body .offer-title {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--color-cream);
  max-width: 22ch;
}
.service-modal-body .offer-desc {
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  max-width: 62ch;
}

/* ─── Tiers en grid 3 colonnes, chacun en mini liquid glass ── */
.service-modal-body .tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.service-modal-body .tier {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease,
    background 0.25s ease;
}
.service-modal-body .tier:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

/* Tier "recommandé" : inversé en blanc plein pour qu'il ressorte */
.service-modal-body .tier--recommended {
  background: #FFFFFF;
  color: var(--color-ink);
  border-color: #FFFFFF;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.4);
}
.service-modal-body .tier--recommended:hover {
  background: #FFFFFF;
}

.service-modal-body .tier-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.service-modal-body .tier--recommended .tier-meta {
  border-bottom-color: rgba(29, 29, 31, 0.08);
}

.service-modal-body .tier-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.service-modal-body .tier-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--color-thread);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 999px;
}

.service-modal-body .tier-price {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.service-modal-body .tier-from {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-right: 2px;
  align-self: center;
}
.service-modal-body .tier--recommended .tier-from {
  color: rgba(29, 29, 31, 0.5);
}
.service-modal-body .tier-period {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 16px);
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.5);
}
.service-modal-body .tier--recommended .tier-period {
  color: rgba(29, 29, 31, 0.55);
}

.service-modal-body .tier-line {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(13.5px, 1.1vw, 15px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 12px;
}
.service-modal-body .tier--recommended .tier-line {
  color: rgba(29, 29, 31, 0.75);
}

.service-modal-body .tier-inclus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-modal-body .tier-inclus li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}
.service-modal-body .tier--recommended .tier-inclus li {
  color: rgba(29, 29, 31, 0.8);
}
.service-modal-body .tier-inclus li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
}
/* Sur le tier recommandé (fond blanc), le point passe en noir */
.service-modal-body .tier--recommended .tier-inclus li::before {
  background: var(--color-ink);
}

.service-modal-body .tier-body {
  display: flex;
  flex-direction: column;
}

/* ── Responsive ──────────────────────────── */
@media (max-width: 900px) {
  .service-modal-body .tiers {
    grid-template-columns: 1fr;
  }
}

/* Empêche le scroll du body quand la modal est ouverte */
body.modal-locked {
  overflow: hidden;
}

@media (max-width: 700px) {
  .service-modal {
    padding: 0;
  }
  .service-modal-panel {
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-modal-backdrop,
  .service-modal-panel {
    transition: opacity 0.15s linear;
  }
  .service-modal.is-open .service-modal-panel {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   A11Y — Accessibilité clavier & contraste
   ═══════════════════════════════════════════════════════════

   :focus-visible se déclenche UNIQUEMENT quand l'utilisateur
   navigue au clavier (Tab), pas au clic souris. Pas de
   bordure gênante sur clic, focus clair au clavier.
─────────────────────────────────────────────────────────── */

:where(a, button, [role="link"], [role="button"], [data-href]):focus-visible {
  outline: 2px solid var(--color-thread);
  outline-offset: 3px;
  border-radius: 3px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-thread);
  outline-offset: 2px;
}

/* Skip-link visible dès qu'il reçoit le focus (invisible sinon). */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 9999;
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 10px 16px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13px;
  border-radius: 0 0 6px 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--color-thread);
  outline-offset: 2px;
}

/* Contraste renforcé pour utilisateurs qui préfèrent plus de contraste
   (Windows High Contrast, macOS Augmenter le contraste, etc.). */
@media (prefers-contrast: more) {
  :root {
    --color-thread: #C41E2E;
  }
  .page-lede,
  body.services-light .page-lede,
  body.contact-light .page-lede,
  .home-service-desc,
  .footer-tagline,
  .tier-line,
  .tier-from {
    color: var(--color-ink) !important;
    opacity: 1 !important;
  }
}