/* ============================================
   0. POLICES LOCALES
   ============================================ */

/* Sirage · display géométrique, utilisée pour les mots d'emphase.
   Servie depuis le projet : une police installée sur le poste du
   concepteur n'existe pas chez le visiteur. */
@font-face {
  font-family: 'Sirage';
  src: url('../fonts/Sirage.woff2') format('woff2'),
       url('../fonts/Sirage.otf')   format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   1. DESIGN TOKENS
   ============================================ */
:root {
  /* Palette */
  --oxblood: #3A0F12;
  --oxblood-deep: #1F0608;
  --leather: #4D1A1F;
  --pompeii: #8B1A1F;
  --burnt: #5C2818;
  --cream: #F2EBDC;
  --cream-light: #F8F2E6;   /* respiration ultra-douce */
  --gold: #D4A537;
  --gold-soft: #BD8E2A;
  --gold-bright: #F0C557;
  --black: #000000;

  /* Typography */
  --font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-editorial: 'Fraunces', Georgia, serif;
  --font-emphasis: 'Sirage', 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --fs-hero: clamp(3.25rem, 8vw, 7.5rem);
  --fs-h1: clamp(2.5rem, 5.5vw, 4.75rem);
  --fs-h2: clamp(2rem, 4vw, 3.25rem);
  --fs-body-lg: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-mono: 0.75rem;

  /* Spacing */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-py: clamp(7rem, 12vw, 11rem);
  --max: 1280px;
  --max-narrow: 920px;

  /* Radius */
  --r-lg: 22px;
  --r-md: 14px;

  /* Easings */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--cream);
  background: var(--oxblood);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: var(--oxblood); }

/* Grain papier global */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.98 0 0 0 0 0.82 0 0 0 0 0.65 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* ============================================
   3. CURSOR CUSTOM
   ============================================ */
@media (hover: hover) and (pointer: fine) {
  * { cursor: none !important; }

  /* Curseur volontairement sobre : cible dirigeants de PME.
     Aucune interpolation, aucun libellé, pas de gros disque.
     Le point marque la position exacte, l'anneau reste discret. */

  .cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    will-change: transform;
    transition: opacity 0.2s linear, background 0.15s linear;
  }

  /* Sur une surface dorée, le curseur passe en oxblood : c'est le seul
     cas où l'or sur l'or le rendait invisible. */
  body.cursor-on-gold .cursor-dot { background: var(--oxblood); }
  body.cursor-on-gold .cursor-ring {
    border-color: var(--oxblood);
    background: rgba(58, 15, 18, 0.1);
  }
  /* Anneau en or plein : à 50 % d'opacité il devenait invisible sur les
     fonds oxblood, qui sont le fond par défaut du site. Le survol reste
     distinct grâce à son remplissage. */
  .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--gold);
    background: rgba(212, 165, 55, 0.06);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    /* Pas de transition sur width/height : l'agrandissement au survol
       est instantané, donc jamais perçu comme un décalage. */
    transition: opacity 0.2s linear, border-color 0.12s linear, background 0.12s linear;
  }

  /* Un seul état de survol, léger */
  body.cursor-link .cursor-ring {
    border-color: var(--gold);
    background: rgba(212, 165, 55, 0.14);
  }
}

/* ============================================
   4. UTILITIES
   ============================================ */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}
/* Beth Ellen exclusivement sur les <em> des grands titres (mots-pivots
   réellement mis en valeur). Le reste des italiques décoratifs (asides,
   sub-labels, italiques de corps, placeholders, etc.) reste sur Fraunces.
   Préfixe `body` pour battre la spécificité des règles dans
   subpages.css et secteurs.css qui définissent leur propre font-family. */
body .section-header h2 em,
body .subpage h1 em,
body h1.subpage-huge em,
body .secteur-hero h1 em,
body .secteur-section-header h2 em,
body .secteur-cta-final h2 em,
body .manifesto-side h2 em,
body .contact-intro h2 em {
  font-family: var(--font-emphasis);
}@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
/* ============================================
   6. NAVIGATION (floating pill on scroll)
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 0.5rem;
  pointer-events: none; /* le inner reprend les events */
}

.nav {
  width: 100%;
}

.nav-inner {
  position: relative;
  pointer-events: auto;
  max-width: 1152px;
  margin: 0.75rem auto 0;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: 100px;
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  transition:
    max-width 0.4s var(--ease-out),
    background 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out),
    backdrop-filter 0.4s var(--ease-out),
    -webkit-backdrop-filter 0.4s var(--ease-out),
    padding 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    margin 0.4s var(--ease-out);
}

.site-header.scrolled .nav-inner {
  max-width: 920px;
  margin-top: 0.6rem;
  padding: 0.55rem 0.75rem 0.55rem 1rem;
  background: rgba(31, 6, 8, 0.55);
  border-color: rgba(242, 235, 220, 0.08);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(242, 235, 220, 0.04) inset,
    0 12px 40px rgba(0, 0, 0, 0.35);
}

/* (Le centrage absolu est appliqué directement sur .nav-links pour les 2 états) */

.logo-mark {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.logo-mark-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out);
}
.logo-mark-icon img { width: 100%; height: 100%; display: block; }
.logo-mark:hover .logo-mark-icon { transform: rotate(-6deg); }

/* Wordmark "shyft" affiché à l'état initial, masqué quand la nav se contracte
   (couleur fixée via fill="#EFE9DD" directement dans le SVG) */
.logo-wordmark {
  height: 22px;
  width: auto;
  max-width: 110px;
  opacity: 1;
  transition:
    max-width 0.45s var(--ease-out),
    opacity 0.3s var(--ease-out),
    margin-left 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}
.site-header.scrolled .logo-wordmark {
  max-width: 0;
  opacity: 0;
  margin-left: -0.65rem; /* compense le gap pour ne pas laisser de vide */
  transform: translateX(-4px);
  pointer-events: none;
}

.nav-links {
  /* Centrage absolu dans .nav-inner · les liens sont toujours pile au
     milieu de la page, indépendamment des largeurs du logo et du CTA.
     Évite le saut visuel à la bascule scrolled/non-scrolled. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 2.25rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}
.nav-links a {
  opacity: 0.78;
  transition: opacity 0.2s, color 0.2s;
  position: relative;
  padding: 0.25rem 0;
}
.nav-links a:hover { opacity: 1; color: var(--gold); }

/* ===========================================================
   MÉGA-MENU · Services / Secteurs déroulants au survol
   =========================================================== */
.nav-group {
  position: relative;
  display: flex;
  align-items: center;
}
/* Chevron discret sur les items qui ont un menu */
.nav-group-trigger::after {
  content: '';
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  margin-left: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.12em);
  opacity: 0.55;
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.nav-group:hover .nav-group-trigger::after,
.nav-group:focus-within .nav-group-trigger::after {
  transform: rotate(225deg) translateY(-0.12em) translateX(-0.12em);
  opacity: 1;
}

.nav-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  margin-top: 0.9rem;
  min-width: 320px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  border-radius: 16px;
  background: rgba(26, 6, 8, 0.94);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
          backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(212, 165, 55, 0.22);
  box-shadow:
    0 28px 60px -22px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.28s var(--ease-out),
    transform 0.28s var(--ease-out),
    visibility 0s linear 0.28s;
  z-index: 60;
}
.nav-mega--wide { min-width: 360px; }

/* Zone tampon invisible pour que le curseur puisse traverser le gap */
.nav-mega::before {
  content: '';
  position: absolute;
  top: -0.9rem;
  left: 0;
  right: 0;
  height: 0.9rem;
}

.nav-group:hover .nav-mega,
.nav-group:focus-within .nav-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s, 0s, 0s;
}

.nav-links .nav-mega-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  opacity: 1;
  transition: background 0.22s var(--ease-out);
}
.nav-links .nav-mega-item:hover {
  background: rgba(212, 165, 55, 0.1);
  color: inherit;
}
.nav-mega-name {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: -0.005em;
  transition: color 0.22s;
}
.nav-mega-item:hover .nav-mega-name { color: var(--gold); }
.nav-mega-desc {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: rgba(242, 235, 220, 0.5);
  line-height: 1.4;
}

.nav-links .nav-mega-all {
  margin-top: 0.35rem;
  padding: 0.7rem 0.85rem 0.5rem;
  border-top: 1px solid rgba(212, 165, 55, 0.16);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  transition: opacity 0.22s, letter-spacing 0.28s var(--ease-out);
}
.nav-links .nav-mega-all:hover { opacity: 1; letter-spacing: 0.2em; }

/* Mobile / tablette : pas de survol fiable. Le méga-menu ne disparaît plus,
   il se déplie au toucher sous son intitulé. Le masquer revenait à cacher les
   cinq piliers et les six secteurs à la moitié des visiteurs, qui ne voyaient
   donc qu'une agence de sites web. La page hub reste atteignable par le lien
   « Voir tous les… » en bas de chaque bloc. */
/* Mobile / tablette : pas de survol fiable. Le méga-menu n'est plus un panneau
   flottant mais une simple sous-liste, toujours dépliée sous son intitulé.
   Aucun JavaScript, aucune animation : rien ne peut rester coincé. Le masquer
   revenait à cacher les cinq piliers et les six secteurs à la moitié des
   visiteurs, qui ne voyaient donc qu'une agence de sites web. */
@media (max-width: 900px), (hover: none) {
  .nav-group-trigger::after { display: none; }

  /* Le groupe est une rangée en mode bureau : ici l'intitulé et sa liste
     doivent s'empiler. */
  .nav-links .nav-group { display: block; }

  .nav-links .nav-mega {
    position: static;
    /* Déroulant en tout ou rien : pas de hauteur à animer, donc rien qui
       puisse rester bloqué à mi-chemin. */
    display: none;
    transform: none;
    margin: 0;
    padding: 0 0 0.5rem;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }
  .nav-links .nav-mega::before { display: none; }
  .nav-group.est-ouvert .nav-mega { display: block; }

  /* La règle de survol du bureau, .nav-group:hover .nav-mega, pèse (0,3,0)
     car une pseudo-classe compte comme une classe. Elle l'emportait sur la
     règle ci-dessus en (0,2,0) et réappliquait le décalage de moitié qui
     projetait le panneau hors de l'écran. On la neutralise explicitement. */
  .nav-links .nav-group:hover .nav-mega,
  .nav-links .nav-group:focus-within .nav-mega {
    position: static;
    transform: none;
    margin: 0;
  }

  /* Chevron sur l'intitulé déroulant, qui pivote une fois ouvert */
  .nav-links .nav-group-trigger { position: relative; }
  .nav-links .nav-group-trigger::before {
    content: '';
    position: absolute;
    right: 1.1rem;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--gold);
    border-bottom: 1.5px solid var(--gold);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.3s var(--ease-out);
    opacity: 0.8;
  }
  .nav-group.est-ouvert > .nav-group-trigger::before {
    transform: translateY(-30%) rotate(-135deg);
  }
  .nav-group.est-ouvert > .nav-group-trigger { color: var(--gold); opacity: 1; }

  /* Entrées décalées, pour se lire comme une sous-liste de l'intitulé */
  .nav-links .nav-mega-item,
  .nav-links .nav-mega-all { padding-left: 2rem; }
  .nav-links .nav-mega-all { padding-top: 0.7rem; padding-bottom: 0.3rem; }
}
.nav-cta {
  background: var(--cream);
  color: var(--oxblood);
  padding: 0.6rem 1.3rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s var(--ease-out);
}
.nav-cta::after { content: '→'; transition: transform 0.3s var(--ease-out); }
.nav-cta:hover { background: var(--gold); transform: translateY(-2px); }
.nav-cta:hover::after { transform: translateX(4px); }

@media (max-width: 880px) {
  .nav-inner { padding: 0.65rem 1rem; }
  .site-header.scrolled .nav-inner { padding: 0.45rem 0.6rem 0.45rem 0.85rem; }

  /* --- Menu mobile : ouvert par le logo --- */
  /* Le panneau se déplie sous la barre de navigation. Fermé, il est
     retiré du flux (visibility) pour ne pas capter les clics. */
  .nav-links {
    display: block;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: color-mix(in srgb, 92% var(--oxblood-deep), transparent);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid rgba(212, 165, 55, 0.22);
    border-radius: 18px;
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.65);
    /* Quinze entrées une fois les sous-listes dépliées : le panneau doit
       pouvoir défiler plutôt que déborder de l'écran. */
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.28s var(--ease-out),
                transform 0.28s var(--ease-out),
                visibility 0.28s;
  }
  .nav.is-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Liens en pleine largeur, séparés par un filet */
  .nav-links > a,
  .nav-links .nav-group > .nav-group-trigger {
    display: block;
    padding: 0.95rem 1rem;
    font-size: 1rem;
    letter-spacing: -0.01em;
    opacity: 0.9;
    border-radius: 10px;
  }
  .nav-links > a + a,
  .nav-links .nav-group + a,
  .nav-links > a + .nav-group,
  .nav-links .nav-group + .nav-group { border-top: 1px solid rgba(242, 235, 220, 0.07); }
  .nav-links > a:active,
  .nav-links .nav-group-trigger:active { background: rgba(212, 165, 55, 0.12); }

  /* Le logo devient le bouton du menu : on le signale par une rotation */
  .nav.is-open .logo-mark-icon { transform: rotate(90deg); }
  .logo-mark-icon { transition: transform 0.3s var(--ease-out); }
}

/* ============================================
   7. HERO
   ============================================ */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--oxblood-deep);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem var(--gutter) 7rem;
}/* Animation d'entrée du watermark : barres bottom→top, puis glyphe en blur-dissolve */
.hero-wm-bar {
  clip-path: inset(100% 0 0 0);
  animation: heroBarReveal 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-wm-bar--1 { animation-delay: 200ms; }
.hero-wm-bar--2 { animation-delay: 380ms; }
.hero-wm-bar--3 { animation-delay: 560ms; }
@keyframes heroBarReveal {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
/* ============================================
   7.c HERO H1 (giant headline, animé)
   ============================================ */
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--cream);
  margin-bottom: 2.5rem;
  max-width: 16ch;
  opacity: 0;
  transform: translateY(14px);
  animation: heroRise 800ms cubic-bezier(0.16, 1, 0.3, 1) 900ms forwards;
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect du prefers-reduced-motion : tout instantané */
@media (prefers-reduced-motion: reduce) {
  .hero-wm-bar,
.hero h1{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }}
/* Section dédiée aux stats · apparaît juste sous le hero au scroll */
.hero-stats-section {
  background: var(--cream);
  color: var(--oxblood);
  padding: 4.5rem var(--gutter) 5.5rem;
  position: relative;
}
.hero-stats-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(58, 15, 18, 0.18),
    transparent
  );
}
/* Inversion des couleurs des stats sur fond cream */
.hero-stats-section .hero-stat {
  border-color: rgba(58, 15, 18, 0.12);
  background: rgba(58, 15, 18, 0.015);
}
.hero-stats-section .hero-stat:hover {
  border-color: rgba(189, 142, 42, 0.55);
  background: rgba(212, 165, 55, 0.06);
}
.hero-stats-section .hero-stat-index { color: var(--gold-soft); opacity: 0.85; }
.hero-stats-section .hero-stat-num { color: var(--oxblood); }
.hero-stats-section .hero-stat-num em { color: var(--gold-soft); }
.hero-stats-section .hero-stat-lab-main { color: var(--oxblood); opacity: 0.92; }
.hero-stats-section .hero-stat-lab-sub  { color: var(--oxblood); opacity: 0.65; }
/* Mention tarifaire secondaire : information utile, hiérarchie plus discrète */
.hero-stats-section .hero-stat-lab-sub--fine { font-size: 0.8125rem; opacity: 0.55; }

/* ===========================================================
   HERO STATS · grille 3 colonnes avec vidéo centrale
   Layout :  [01]  [VIDEO]  [04]
             [02]  [VIDEO]  [03]
   =========================================================== */
.hero-stats-grid {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-areas:
    "tl video tr"
    "bl video br";
  gap: 1rem;
  align-items: stretch;
}
.hero-stat--tl { grid-area: tl; }
.hero-stat--bl { grid-area: bl; }
.hero-stat--tr { grid-area: tr; }
.hero-stat--br { grid-area: br; }
.hero-stats-video { grid-area: video; }

.hero-stats-video {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(58, 15, 18, 0.08);
  border: 1px solid rgba(58, 15, 18, 0.12);
  min-height: 320px;
  isolation: isolate;
}
.hero-stats-video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive : sur tablette / mobile, on empile en 2 colonnes et la vidéo passe en bandeau */
@media (max-width: 980px) {
  .hero-stats-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "video video"
      "tl    tr"
      "bl    br";
  }
  .hero-stats-video { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 560px) {
  .hero-stats-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "video"
      "tl"
      "bl"
      "tr"
      "br";
  }
}/* Box centrée avec bordure fine arrondie */
.hero-stat {
  position: relative;
  padding: 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  border: 1px solid rgba(242, 235, 220, 0.08);
  border-radius: 14px;
  background: rgba(242, 235, 220, 0.015);
  transition: transform 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out),
              background 0.4s var(--ease-out);
}
.hero-stat:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 165, 55, 0.3);
  background: rgba(212, 165, 55, 0.04);
}

/* Indice 01 · 04 : centré, plus de filet à gauche */
.hero-stat-index {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  opacity: 0.7;
  display: inline-block;
}

/* Chiffre principal */
.hero-stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  font-weight: 500;
  color: var(--cream);
  line-height: 1;
  letter-spacing: -0.035em;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.06em;
}
.hero-stat-num em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
  font-size: 0.62em;
  margin-left: 0.04em;
}

/* Labels centrés */
.hero-stat-lab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.15rem;
}
.hero-stat-lab-main {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--cream);
  opacity: 0.92;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.hero-stat-lab-sub {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--cream);
  opacity: 0.5;
  line-height: 1.3;
}

@media (max-width: 768px) {  .hero-stat { padding: 1.25rem 1rem; gap: 0.65rem; }
  .hero-stat-num { font-size: 2rem; }
  .hero-stat-lab-main, .hero-stat-lab-sub { font-size: 0.875rem; }
}

/* ============================================
   8. BUTTONS
   ============================================ */
.btn-primary {
  position: relative;
  isolation: isolate;
  padding: 1.15rem 2rem;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: none;
  background: var(--cream);
  color: var(--oxblood);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 0 0 1px rgba(58, 15, 18, 0.12),
    inset 0 0 16px 0 rgba(212, 165, 55, 0.12),
    inset 0 -3px 12px 0 rgba(212, 165, 55, 0.18),
    0 1px 3px 0 rgba(0, 0, 0, 0.5),
    0 4px 12px 0 rgba(0, 0, 0, 0.45);
  transition: transform 0.3s;
}
.btn-primary:active::before { transform: scale(0.975); }
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(212, 165, 55, 0.4);
}
.btn-primary .arrow { transition: transform 0.3s var(--ease-out); position: relative; z-index: 2; }
.btn-primary:hover .arrow { transform: translateX(5px); }
.btn-primary .label-text { position: relative; z-index: 2; }
.btn-primary .glow {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}
/* ============================================
   9. SECTIONS COMMUNES
   ============================================ */
section { position: relative; }

.section {
  padding: var(--section-py) var(--gutter);
}.section--cream { background: var(--cream); color: var(--oxblood); }.section--deep { background: var(--oxblood-deep); }
/* ============================================
   9.bis BANDE DE RESPIRATION
   Inserted between heavy dark stretches to give air.
   ============================================ */
.respiration {
  background: var(--cream-light);
  padding: clamp(4.5rem, 9vw, 7.5rem) var(--gutter);
  color: var(--burnt);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.respiration-mark {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(189, 142, 42, 0.7) 50%, transparent 100%);
  opacity: 0.85;
}
.respiration-mark::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: var(--gold-soft);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(248, 242, 230, 1);
}

.section--cream .label { color: var(--burnt); }
.section--cream .label::before, .section--cream .label::after { background: var(--burnt); }.section--cream ::selection { background: var(--oxblood); color: var(--cream); }

.section-header {
  margin-bottom: 4rem;
  max-width: var(--max-narrow);
}
.section-header--center { text-align: center; margin-left: auto; margin-right: auto; }

.section-header .label { margin-bottom: 1.5rem; }

.section-header h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 1.25rem;
}

.section-header .lede {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  opacity: 0.72;
  max-width: 56ch;
}
.section-header--center .lede { margin: 0 auto; }
/* ============================================
   10. MANIFESTE / CONSTAT
   ============================================ */
.manifesto {
  background: var(--oxblood);
  color: var(--cream);
  padding: var(--section-py) var(--gutter);
  position: relative;
  overflow: hidden;
}

.manifesto-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .manifesto-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.manifesto-side .label {
  margin-bottom: 1.5rem;
}
.manifesto-side h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
  color: var(--cream);
}
.manifesto-side h2 em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}

.manifesto-text {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--cream);
  opacity: 0.88;
}
.manifesto-text p + p { margin-top: 1.25rem; }
.manifesto-text p:first-child::first-line {
  font-weight: 500;
}
.manifesto-text strong {
  color: var(--gold);
  font-weight: 500;
}
.manifesto-text em {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-style: italic;
}

.manifesto-rule {
  width: 100%;
  max-width: 700px;
  margin: 3rem auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.4;
}
/* ============================================
   11.b RADIAL ORBITAL TIMELINE (méthode)
   ============================================ */
/* ============================================
   MÉTHODE · grid 2 colonnes (texte gauche / orbital droite)
   ============================================ */
/* Méthode : section resserrée verticalement */
#methode.section {
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
#methode .section-header {
  margin-bottom: clamp(1rem, 2vw, 2rem);
}

.methode-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .methode-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Colonne gauche · tout centré (phrases + flèches + promise) */
.methode-text {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
  text-align: center;
}

.methode-graphic {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Flow texte · phrases stackées + flèches, blur-dissolve séquencé */
.methode-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
}

.methode-flow-line,
.methode-flow-arrow {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(8px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.methode-flow-line {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--cream);
}

.methode-flow-arrow {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  opacity: 0;
}

.methode-flow.is-revealed .methode-flow-line,
.methode-flow.is-revealed .methode-flow-arrow {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Flèches : opacity max 0.7 (un poil moins fortes que les phrases) */
.methode-flow.is-revealed .methode-flow-arrow {
  opacity: 0.6;
}

/* Stagger séquentiel : chaque élément ~180ms après le précédent */
.methode-flow > *:nth-child(1) { transition-delay: 150ms; }
.methode-flow > *:nth-child(2) { transition-delay: 330ms; }
.methode-flow > *:nth-child(3) { transition-delay: 510ms; }
.methode-flow > *:nth-child(4) { transition-delay: 690ms; }
.methode-flow > *:nth-child(5) { transition-delay: 870ms; }
.methode-flow > *:nth-child(6) { transition-delay: 1050ms; }
.methode-flow > *:nth-child(7) { transition-delay: 1230ms; }

@media (prefers-reduced-motion: reduce) {
  .methode-flow-line,
  .methode-flow-arrow {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .methode-flow.is-revealed .methode-flow-arrow { opacity: 0.6 !important; }
}

.orbital {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.orbital::before,
.orbital::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.orbital::before {
  inset: 12%;
  background: radial-gradient(circle, rgba(212, 165, 55, 0.12), transparent 65%);
  filter: blur(40px);
}
.orbital::after {
  inset: 28%;
  background: radial-gradient(circle, rgba(139, 26, 31, 0.4), transparent 70%);
  filter: blur(60px);
}

.orbital-ring {
  position: absolute;
  width: 65%;
  aspect-ratio: 1 / 1;
  border: 1px dashed rgba(242, 235, 220, 0.12);
  border-radius: 50%;
  z-index: 1;
}
.orbital-ring::after {
  content: '';
  position: absolute;
  inset: -8%;
  border: 1px solid rgba(242, 235, 220, 0.04);
  border-radius: 50%;
}

/* Cœur central */
.orbital-core {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 60%, var(--burnt) 130%);
  box-shadow:
    0 0 0 1px rgba(212, 165, 55, 0.4),
    0 0 40px 4px rgba(212, 165, 55, 0.35),
    inset 0 -6px 18px rgba(58, 15, 18, 0.5);
  animation: orbitalCorePulse 4s ease-in-out infinite;
}
.orbital-core-ping,
.orbital-core-ping--late {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(212, 165, 55, 0.45);
  animation: orbitalPing 2.6s ease-out infinite;
}
.orbital-core-ping--late {
  inset: -22px;
  border-color: rgba(212, 165, 55, 0.25);
  animation-delay: 0.8s;
}
.orbital-core-inner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: inset 0 -3px 6px rgba(58, 15, 18, 0.18);
}
@keyframes orbitalCorePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes orbitalPing {
  0% { transform: scale(0.85); opacity: 0.9; }
  80%, 100% { transform: scale(1.55); opacity: 0; }
}

/* Conteneur des nœuds (rotation auto via CSS var) */
.orbital-nodes {
  position: absolute;
  inset: 0;
  z-index: 6; /* au-dessus du cœur (5) pour que les cartes passent devant */
  pointer-events: none;
}

.orbital-node {
  position: absolute;
  top: 50%;
  left: 50%;
  --node-x: 0px;
  --node-y: 0px;
  transform: translate(calc(-50% + var(--node-x)), calc(-50% + var(--node-y)));
  transition: transform 0.7s var(--ease-out), opacity 0.7s var(--ease-out);
  pointer-events: auto;
}

.orbital-node-btn {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(242, 235, 220, 0.4);
  background: var(--oxblood-deep);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.35s var(--ease-out),
    background 0.35s,
    color 0.35s,
    border-color 0.35s,
    box-shadow 0.35s;
}
.orbital-node-btn::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 235, 220, 0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.orbital-node-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: scale(1.08);
}

.orbital-node--related .orbital-node-btn {
  background: rgba(212, 165, 55, 0.18);
  border-color: var(--gold);
  color: var(--cream);
  animation: orbitalRelatedPulse 1.6s ease-in-out infinite;
}
.orbital-node--related .orbital-node-btn::before { opacity: 1; }
@keyframes orbitalRelatedPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 165, 55, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(212, 165, 55, 0); }
}

.orbital-node--active .orbital-node-btn {
  background: var(--gold);
  color: var(--oxblood);
  border-color: var(--gold-bright);
  transform: scale(1.45);
  box-shadow:
    0 0 0 4px rgba(212, 165, 55, 0.18),
    0 0 30px rgba(212, 165, 55, 0.55);
}

/* Étiquette sous le nœud */
.orbital-node-label {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(242, 235, 220, 0.6);
  transition: color 0.3s, transform 0.3s var(--ease-out);
  pointer-events: none;
}
.orbital-node--active .orbital-node-label {
  color: var(--gold);
  transform: translateX(-50%) scale(1.1);
}

/* Carte expandée */
.orbital-card {
  position: absolute;
  top: calc(100% + 2.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  background: rgba(31, 6, 8, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212, 165, 55, 0.3);
  border-radius: var(--r-md);
  padding: 1.25rem 1.35rem 1.35rem;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(242, 235, 220, 0.04);
  z-index: 50;
  text-align: left;
  pointer-events: auto;
  animation: orbitalCardIn 0.4s var(--ease-out);
}
.orbital-card::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 12px;
  background: linear-gradient(to bottom, transparent, var(--gold));
}
@keyframes orbitalCardIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.orbital-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.orbital-card-status {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 100px;
  border: 1px solid rgba(242, 235, 220, 0.18);
  color: rgba(242, 235, 220, 0.7);
}
.orbital-card-status[data-status="completed"] { color: var(--gold); border-color: rgba(212, 165, 55, 0.4); }
.orbital-card-status[data-status="in-progress"] { color: var(--cream); background: var(--gold); border-color: var(--gold); }
.orbital-card-date {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgba(242, 235, 220, 0.55);
}
.orbital-card-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin-bottom: 0.5rem;
}
.orbital-card-content {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(242, 235, 220, 0.78);
}

.orbital-card-related {
  margin-top: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(242, 235, 220, 0.08);
}
.orbital-card-related h5 {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(242, 235, 220, 0.55);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.orbital-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.orbital-related-btn {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.65rem;
  border-radius: 100px;
  border: 1px solid rgba(242, 235, 220, 0.18);
  background: transparent;
  color: rgba(242, 235, 220, 0.78);
  cursor: pointer;
  transition: all 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.orbital-related-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.orbital-related-btn::after {
  content: '→';
  opacity: 0.6;
}

/* Promesse sous l'orbite */
.orbital-promise {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}
.orbital-promise .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2.4s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 720px) {
  .orbital { max-width: 100%; }
  .orbital-card { width: 240px; }
  .orbital-node-btn { width: 40px; height: 40px; font-size: 0.6875rem; }
  .orbital-node-label { font-size: 0.625rem; }
  .orbital-core { width: 64px; height: 64px; }
  .orbital-core-inner { width: 24px; height: 24px; }
}/* ============================================
   14. ÉQUIPE FULLBLEED · style No graphism
   Photo plein écran, label discret, 4 noms + rôles
   en bas, pills "nicknames" au hover de chaque zone.
   ============================================ */
.equipe-fullbleed.section {
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--oxblood-deep);
  display: flex;
  flex-direction: column;
}

.equipe-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: contrast(1.03) saturate(0.92) brightness(0.95);
  z-index: 1;
}

.equipe-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(31, 6, 8, 0.22) 0%,
      rgba(31, 6, 8, 0) 22%,
      rgba(31, 6, 8, 0) 48%,
      rgba(31, 6, 8, 0.55) 72%,
      rgba(31, 6, 8, 0.88) 92%,
      rgba(31, 6, 8, 0.95) 100%);
}

.equipe-team-label {
  position: absolute;
  bottom: clamp(14rem, 26vh, 20rem);
  left: clamp(1.5rem, 6vw, 5rem);
  z-index: 5;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  opacity: 0.95;
  letter-spacing: -0.005em;
}

.equipe-zones {
  position: relative;
  z-index: 3;
  margin-top: auto;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 clamp(1.5rem, 6vw, 5rem) clamp(7rem, 14vh, 11rem);
  align-items: end;
  pointer-events: none;   /* voir .equipe-zone : seul le bloc nom reste sensible */
}

.equipe-zone {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0.75rem;
  /* La colonne monte jusqu'en haut de la photo et intercepterait le survol des
     personnes. Or elle occupe un quart exact de la largeur, alors que les quatre
     ne sont pas répartis régulièrement : survoler Matis réveillait Anne-Carole.
     Seul le bloc nom reste sensible, le reste laisse passer vers la découpe. */
  pointer-events: none;
}
/* Membre (nom + rôle), légèrement atténué par défaut · réveille au hover */
.equipe-member {
  position: relative;
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
  color: var(--cream);
  opacity: 0.88;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.equipe-zone:hover .equipe-member {
  opacity: 1;
  transform: translateY(-8px);
}

.equipe-member h4 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.3vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 0.5rem;
  color: var(--cream);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
  position: relative;
  display: inline-block;
}
/* Petit filet gold qui apparaît sous le nom au hover · identifie la zone */
.equipe-member h4::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--gold);
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.equipe-zone:hover .equipe-member h4::after {
  width: 38px;
}

/* Découpe de la photo en quatre. Les rectangles sont exprimés en coordonnées
   de l'image et repositionnés en JS : object-fit:cover recadre l'image
   différemment à chaque format d'écran, des pourcentages du conteneur se
   décaleraient donc des personnes. */
.equipe-hitzones {
  position: absolute;
  inset: 0;
  z-index: 2;   /* sous la rangée des noms (3), qui reste cliquable */
}
.equipe-hit {
  position: absolute;
  cursor: pointer;
}
@media (max-width: 900px) { .equipe-hitzones { display: none; } }

/* Aperçu d'une personne. Épinglé en haut de la section, du côté où la personne
   se trouve : Noé et Laurent à gauche, Anne-Carole et Matis à droite. Le haut
   de l'image ne montre que le ciel et les façades, la carte ne masque donc
   jamais un visage. Elle porte le nom et le rôle parce qu'à cette hauteur les
   noms du bas sont loin. */
.equipe-apercu {
  position: absolute;
  z-index: 6;
  top: clamp(6rem, 13vh, 9rem);
  width: min(320px, 40vw);
  padding: 1.15rem 1.25rem;
  background: rgba(31, 6, 8, 0.9);
  border: 1px solid rgba(212, 165, 55, 0.3);
  border-radius: 12px;
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.75),
              0 0 70px -34px rgba(212, 165, 55, 0.55);
  opacity: 0;
  pointer-events: none;   /* le clic reste celui du nom, qui part vers LinkedIn */
}
.equipe-apercu--gauche { left: clamp(1.5rem, 6vw, 5rem); }
.equipe-apercu--droite { right: clamp(1.5rem, 6vw, 5rem); }
/* Les deux du milieu se croisent : la carte de Laurent se pose au-dessus
   d'Anne-Carole et inversement, pour ne jamais couvrir la personne survolée.
   Leur abscisse est calculée en JS, au même moment que la découpe, faute de
   quoi elle ne suivrait pas le recadrage de l'image. */
.equipe-apercu--croise { left: 0; right: auto; }
@supports (backdrop-filter: blur(8px)) {
  .equipe-apercu { background: rgba(31, 6, 8, 0.74); backdrop-filter: blur(10px); }
}
.equipe-apercu-nom {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 0.15rem;
  text-shadow: none;
}
.equipe-apercu-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
  text-shadow: none;
}
.equipe-apercu-bio {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(242, 235, 220, 0.82);
  text-shadow: none;
}
.equipe-apercu-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(242, 235, 220, 0.14);
}
.equipe-apercu-logos img {
  height: 16px;
  width: auto;
  max-width: 78px;
  object-fit: contain;
  opacity: 0.8;
}
/* Un blason quasi carré paraît deux fois plus petit à hauteur égale. */
.equipe-apercu-logos img.est-carre { height: 24px; }
.equipe-apercu-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.9rem;
}
.equipe-apercu-tags span {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242, 235, 220, 0.78);
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(242, 235, 220, 0.18);
  border-radius: 100px;
  text-shadow: none;
}

/* Uniquement à la souris. Au doigt le survol reste collé après un appui, et la
   mise en page bascule de toute façon en 2x2 sous la photo. */
@media (hover: hover) and (pointer: fine) {
  .equipe-apercu {
    transform: translateY(12px);
    transition: opacity 0.34s var(--ease-out), transform 0.34s var(--ease-out);
  }
  .equipe-apercu.est-visible { opacity: 1; transform: translateY(0); }

  /* Survoler la personne dans la photo réveille son nom en bas, et
     inversement : les deux désignent la même personne. */
  .equipe-zone.est-actif .equipe-member { opacity: 1; transform: translateY(-8px); }
  .equipe-zone.est-actif .equipe-member h4::after { width: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .equipe-apercu { transition: opacity 0.2s linear; transform: none !important; }
}

.equipe-member p {
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  color: rgba(242, 235, 220, 0.85);
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* Mobile : photo en haut, noms en dessous en 2x2, pills toujours visibles */
@media (max-width: 768px) {
  .equipe-fullbleed.section {
    min-height: 0;
    display: block;
  }
  .equipe-bg {
    position: relative;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .equipe-overlay { display: none; }
  .equipe-team-label {
    position: relative;
    bottom: auto;
    left: auto;
    display: block;
    padding: 2rem var(--gutter) 0.75rem;
  }
  .equipe-zones {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
    padding: 0 var(--gutter) 4rem;
    margin-top: 0;
  }
  .equipe-zone { padding: 0; }  .equipe-zone:hover .equipe-member { transform: none; }
}
/* ============================================
   15. APPROCHE · 5 piliers
   ============================================ */
/* ============================================
   PILLARS · orbite carrée autour du Site web
   ============================================
   Stage à aspect-ratio fixe. Le pilier central
   reste fixe au milieu, les 4 satellites tournent
   en suivant un chemin carré (TL → TR → BR → BL).
   --orbit-x / --orbit-y sont calculés par JS en
   fonction des dimensions réelles du stage.
*/
.pillars-orbit {
  position: relative;
  width: min(88%, 880px);
  margin: 0 auto;
  /* Stage moins large → la rotation se voit mieux sur les côtés */
  aspect-ratio: 1 / 1;
  --orbit-x: 0px;
  --orbit-y: 0px;
  isolation: isolate;
}

/* Path indicateur · carré pointillé qui matérialise le chemin orbital */
.pillars-orbit-path {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(212, 165, 55, 0.22);
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: 0;
}

/* Carte pilier · base commune, carré parfait, taille confortable pour le contenu */
.pillar {
  background: var(--cream-light, #F8F2E6);
  border: 1px solid rgba(58, 15, 18, 0.12);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.4rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  transition:
    border-color 0.35s,
    box-shadow 0.45s,
    background 0.35s;
}
.pillar:hover {
  border-color: rgba(212, 165, 55, 0.55);
  box-shadow: 0 16px 40px -18px rgba(58, 15, 18, 0.3);
}
/* Override aspect-ratio quand l'accordéon est ouvert · la carte peut grandir */
.pillar:has(.pillar-details.is-open) {
  aspect-ratio: auto;
  overflow: visible;
}

/* Satellites positionnés absolument, animation orbitale carrée.
   Taille = hauteur naturelle du contenu d'origine (~270px). */
.pillar--satellite {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  min-width: 250px;
  max-width: 280px;
  z-index: 2;
  animation: pillarOrbit var(--orbit-duration, 60s) cubic-bezier(0.65, 0, 0.35, 1) infinite;
  will-change: transform;
}

/* Délais qui placent chaque satellite à un coin différent au load.
   Durée = 60s, donc 25% = 15s, 50% = 30s, 75% = 45s. */
.pillar--satellite[data-orbit="0"] { animation-delay: 0s; }     /* TL */
.pillar--satellite[data-orbit="1"] { animation-delay: -15s; }   /* TR */
.pillar--satellite[data-orbit="2"] { animation-delay: -30s; }   /* BR */
.pillar--satellite[data-orbit="3"] { animation-delay: -45s; }   /* BL */

/* Au hover · on passe juste au-dessus des autres, l'orbite continue */
.pillar--satellite:hover {
  z-index: 5;
}

@keyframes pillarOrbit {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(var(--orbit-x), 0); }
  50%      { transform: translate(var(--orbit-x), var(--orbit-y)); }
  75%      { transform: translate(0, var(--orbit-y)); }
}

/* Coeur · Site web dominant, centré absolument, NE TOURNE PAS (ancre).
   Taille calibrée pour ne pas chevaucher les satellites pendant leur passage. */
.pillar--core {
  position: absolute;
  top: 50%;
  left: 50%;
  /* !important pour forcer le centrage contre toute autre transform résiduelle */
  transform: translate(-50%, -50%) !important;
  width: 33%;
  min-width: 320px;
  max-width: 340px;
  z-index: 3;
  background: var(--oxblood);
  border: 1px solid var(--gold);
  color: var(--cream);
  padding: 1.75rem 1.5rem 1.25rem;
  box-shadow: 0 20px 60px -22px rgba(212, 165, 55, 0.45), 0 0 0 1px rgba(212, 165, 55, 0.15);
  /* overflow visible !important pour que le badge "Brique principale" déborde
     au-dessus sans être clippé par overflow: hidden hérité de .pillar */
  overflow: visible !important;
}
.pillar--core:hover {
  border-color: var(--gold-bright);
  box-shadow: 0 26px 70px -22px rgba(212, 165, 55, 0.6), 0 0 0 1px rgba(212, 165, 55, 0.35);
}

.pillar-badge {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--oxblood);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(212, 165, 55, 0.4);
}

/* Header carte */
.pillar-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pillar h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--oxblood);
  line-height: 1.15;
  margin: 0;
}
.pillar--core h3 {
  color: var(--cream);
  font-size: 1.625rem;
}

/* Pitch · italique éditorial sobre */
.pillar-pitch {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--burnt);
  opacity: 0.78;
  margin: 0;
}
.pillar--core .pillar-pitch {
  color: var(--gold);
  opacity: 0.92;
  font-size: 1rem;
}

/* Prix · affichage hiérarchisé "À partir de XXX€" */
.pillar-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.5rem;
}
.pillar-price em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--burnt);
  opacity: 0.7;
}
.pillar-price strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--oxblood);
}
.pillar-price small {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--burnt);
  opacity: 0.6;
  letter-spacing: 0.04em;
}
.pillar-price--included strong {
  font-size: 1rem;
  font-style: italic;
  font-family: var(--font-editorial);
  font-weight: 300;
  color: var(--burnt);
  opacity: 0.78;
}
.pillar--core .pillar-price em { color: var(--gold); opacity: 0.85; }
.pillar--core .pillar-price strong { color: var(--cream); font-size: 1.75rem; }
.pillar--core .pillar-price small { color: var(--gold); opacity: 0.7; }

/* Toggle "Détails" + icône rotative */
.pillar-toggle {
  background: transparent;
  border: 1px solid rgba(58, 15, 18, 0.18);
  border-radius: 100px;
  padding: 0.5rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--burnt);
  cursor: pointer;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: all 0.25s var(--ease-out);
}
.pillar-toggle:hover {
  background: var(--burnt);
  color: var(--cream-light, #F8F2E6);
  border-color: var(--burnt);
}
.pillar-toggle-icon {
  font-style: normal;
  display: inline-block;
  transition: transform 0.35s var(--ease-out);
  font-size: 0.85rem;
  line-height: 1;
}
.pillar-toggle[aria-expanded="true"] .pillar-toggle-icon {
  transform: rotate(45deg);
}
.pillar--core .pillar-toggle {
  border-color: rgba(242, 235, 220, 0.3);
  color: var(--gold);
}
.pillar--core .pillar-toggle:hover {
  background: var(--gold);
  color: var(--oxblood);
  border-color: var(--gold);
}

/* CTA "En savoir plus" en bas de chaque pilier */
.pillar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--burnt);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: gap 0.3s var(--ease-out), color 0.3s ease;
  position: relative;
  z-index: 2;
}
.pillar-cta:hover { gap: 0.85rem; color: var(--oxblood); }
.pillar--core .pillar-cta { color: var(--gold); }
.pillar--core .pillar-cta:hover { color: var(--gold-bright, #F0C557); }
.pillar-cta > span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 0.9;
  letter-spacing: 0;
}

/* Détails accordéon (révélés au clic) */
.pillar-details {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s var(--ease-out);
}
.pillar-details[hidden] { display: block !important; }
.pillar-details.is-open {
  max-height: 36rem;
  opacity: 1;
}
.pillar-details ul {
  list-style: none;
  padding: 0.75rem 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-top: 1px solid rgba(58, 15, 18, 0.1);
  margin-top: 0.5rem;
}
.pillar-details li {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--burnt);
  opacity: 0.82;
  display: flex;
  gap: 0.6rem;
  padding-top: 0.3rem;
}
.pillar-details li::before {
  content: '+';
  color: var(--burnt);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.55;
  flex-shrink: 0;
  padding-top: 0.15rem;
}
.pillar--core .pillar-details ul {
  border-top-color: rgba(212, 165, 55, 0.25);
}
.pillar--core .pillar-details li {
  color: var(--cream);
  opacity: 0.82;
}
.pillar--core .pillar-details li::before {
  color: var(--gold);
  opacity: 0.85;
}

/* (Anciens connecteurs SVG retirés · remplacés par .pillars-orbit-path) */

/* Audit CTA bas (fusion offres) */
.pillars-audit {
  max-width: var(--max-narrow);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  background: var(--oxblood);
  color: var(--cream);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1.4fr auto;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  box-shadow: 0 20px 60px -25px rgba(58, 15, 18, 0.4);
}
@media (max-width: 700px) {
  .pillars-audit { grid-template-columns: 1fr; text-align: left; }
}
.pillars-audit-text { display: flex; flex-direction: column; gap: 0.5rem; }
.pillars-audit-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  opacity: 0.85;
}
.pillars-audit h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0;
}
.pillars-audit p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--cream);
  opacity: 0.85;
  margin: 0;
  max-width: 52ch;
}
.pillars-audit p em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
  opacity: 1;
}
.pillars-audit-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
}
@media (max-width: 700px) { .pillars-audit-cta { align-items: flex-start; } }
.pillars-audit-price {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
  opacity: 0.7;
}
.pillars-audit-price strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cream);
  opacity: 1;
  margin-right: 0.15rem;
}

/* Responsive : sous 900px on bascule en stack 1 col (Site web en premier),
   l'orbite est désactivée (les satellites reprennent leur place dans le flow). */
@media (max-width: 900px) {
  .pillars-orbit {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .pillars-orbit-path { display: none; }
  /* En mobile · cartes pleine largeur, plus de carré (sinon trop hautes), plus d'orbite */
  .pillar {
    aspect-ratio: auto;
    overflow: visible;
  }
  .pillar--core,
  .pillar--satellite {
    position: relative;
    top: auto;
    left: auto;
    transform: none !important;
    width: 100%;
    max-width: none;
    animation: none !important;
  }
  .pillar--core { order: -1; }
}
@media (max-width: 700px) {
  .pillar { padding: 1.4rem 1.2rem; }
  .pillar--core { padding: 1.75rem 1.4rem 1.4rem; }
}

/* prefers-reduced-motion : pas d'orbite, satellites figés aux 4 coins */
@media (prefers-reduced-motion: reduce) {
  .pillar--satellite {
    animation: none !important;
  }
  /* Positions statiques de fallback via data-orbit */
  .pillar--satellite[data-orbit="0"] { transform: translate(0, 0); }
  .pillar--satellite[data-orbit="1"] { transform: translate(var(--orbit-x), 0); }
  .pillar--satellite[data-orbit="2"] { transform: translate(var(--orbit-x), var(--orbit-y)); }
  .pillar--satellite[data-orbit="3"] { transform: translate(0, var(--orbit-y)); }
}

.prestations-note {
  margin-top: 3rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--burnt);
  opacity: 0.65;
}
.prestations-note span { color: var(--gold-soft); }

/* ============================================
   15.b SECTEURS · grille de cartes
   ============================================ */
.sectors-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1000px) { .sectors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .sectors-grid { grid-template-columns: 1fr; } }

.sector {
  background: var(--oxblood-deep);
  border: 1px solid rgba(242, 235, 220, 0.07);
  border-radius: var(--r-lg);
  padding: 2.25rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease-out);
}
.sector::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.3;
  transition: opacity 0.4s;
}
.sector:hover {
  border-color: rgba(212, 165, 55, 0.4);
  transform: translateY(-4px);
}
.sector:hover::before { opacity: 0.75; }

/* ===========================================================
   Dégradé par secteur : chaque .sector--xxx reprend la couleur
   d'accent et la même diagonale de gradient que le hero de sa
   page secteur associée.
   =========================================================== */
.sector--retail   { --accent: #B0703A; --accent-rgb: 176, 112, 58; }
.sector--pharma   { --accent: #2C4F63; --accent-rgb: 44, 79, 99;  }
.sector--finance  { --accent: #313F63; --accent-rgb: 49, 63, 99;  }
.sector--it-saas  { --accent: #5A5080; --accent-rgb: 90, 80, 128; }
.sector--energies { --accent: #4A6B53; --accent-rgb: 74, 107, 83;  }
.sector--conseil  { --accent: #6B3540; --accent-rgb: 107, 53, 64;  }

.sector[class*="sector--"] {
  background:
    linear-gradient(135deg,
      var(--accent) 0%,
      color-mix(in srgb, var(--accent) 60%, var(--oxblood-deep)) 55%,
      var(--oxblood-deep) 100%);
  border-color: rgba(var(--accent-rgb), 0.45);
}
/* Vignette douce pour préserver la lisibilité du texte */
.sector[class*="sector--"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 25%, rgba(0, 0, 0, 0.12), transparent 60%),
    radial-gradient(circle at 15% 90%, rgba(0, 0, 0, 0.32), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.sector[class*="sector--"] > * {
  position: relative;
  z-index: 1;
}
.sector[class*="sector--"]:hover {
  border-color: rgba(var(--accent-rgb), 0.9);
  box-shadow: 0 14px 36px -16px rgba(var(--accent-rgb), 0.45);
}
/* Filet du séparateur stats reprend la teinte du secteur */
.sector[class*="sector--"] .sector-stats {
  border-top-color: rgba(var(--accent-rgb), 0.4);
}

.sector-head {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}.sector h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cream);
  line-height: 1.25;
}

/* Pitch : phrase complète, sans serif, douce */
.sector-pitch {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--cream);
  opacity: 0.75;
  margin: 0;
}

/* Refs : retirées du HTML (déjà présentes dans le marquee Heritage).
   Règles conservées en dead-code pour rollback éventuel. */

/* Stats : 1 ou 2 par carte, séparateur top avant le bloc */
.sector-stats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(242, 235, 220, 0.08);
}
.sector-stats li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  font-size: 0.8125rem;
}
.sector-stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--gold);
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  min-width: 5rem;
}
.sector-stat-lab {
  color: var(--cream);
  opacity: 0.72;
  line-height: 1.35;
}

.sectors-note {
  margin-top: 3rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cream);
  opacity: 0.6;
}
.sectors-note span { color: var(--gold); }

/* ============================================
   15.bis UNIVERS · Études de style (showcase démos)
   ============================================ */
.showcase-section {
  position: relative;
  overflow: hidden;
}
.showcase-aura {
  position: absolute;
  top: -10%;
  left: 50%;
  width: 70%;
  height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(212, 165, 55, 0.10) 0%,
    rgba(212, 165, 55, 0.03) 40%,
    transparent 70%);
  pointer-events: none;
  filter: blur(40px);
  z-index: 0;
}
.showcase-section > .container { position: relative; z-index: 1; }

.showcase-grid {
  list-style: none;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  align-items: start;
  counter-reset: showcase;
}
@media (max-width: 1000px) { .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .showcase-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.showcase-item {
  list-style: none;
  display: flex;
}

.showcase-card {
  position: relative;
  display: block;
  width: 100%;
  background: var(--oxblood-deep);
  border: 1px solid rgba(242, 235, 220, 0.08);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: inherit;
  isolation: isolate;
  transition: transform 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.5s;
}
/* Label de secteur sous chaque démonstration */
.showcase-tag {
  display: block;
  padding: 0.85rem 1.1rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.5;
  border-top: 1px solid rgba(242, 235, 220, 0.07);
  transition: opacity 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.showcase-card:hover .showcase-tag {
  opacity: 1;
  color: var(--gold);
}

.showcase-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.25;
  transition: opacity 0.4s;
  z-index: 4;
  pointer-events: none;
}
.showcase-card:hover {
  transform: translateY(-8px);
  border-color: rgba(212, 165, 55, 0.45);
  box-shadow:
    0 28px 60px -22px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(212, 165, 55, 0.12);
}
.showcase-card:hover::before { opacity: 0.85; }

.showcase-index {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.3s;
  background: rgba(15, 5, 6, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(212, 165, 55, 0.18);
}
.showcase-index em {
  font-style: normal;
  opacity: 0.55;
}
.showcase-card:hover .showcase-index { opacity: 0.9; }

/* ---------- Frame (mock browser) ---------- */
.showcase-frame {
  position: relative;
  background: #0d0405;
  border-radius: calc(var(--r-lg) - 1px);
  overflow: hidden;
}

.showcase-frame-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  background: linear-gradient(180deg, rgba(242,235,220,0.05), rgba(242,235,220,0.015));
  border-bottom: 1px solid rgba(242, 235, 220, 0.06);
  position: relative;
  z-index: 2;
}
.showcase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.showcase-dot:nth-child(1) { background: #E26B5C; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.2) inset; }
.showcase-dot:nth-child(2) { background: #E2B14A; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.2) inset; }
.showcase-dot:nth-child(3) { background: #7DB969; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.2) inset; }

.showcase-url {
  flex: 1;
  min-width: 0;
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.7;
  text-align: center;
  padding: 0.3rem 0.7rem;
  background: rgba(242, 235, 220, 0.06);
  border-radius: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: background 0.3s, opacity 0.3s;
}
.showcase-card:hover .showcase-url {
  background: rgba(212, 165, 55, 0.12);
  opacity: 0.95;
  color: var(--gold);
}
.showcase-url-lock {
  width: 7px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 1.5px;
  position: relative;
  flex-shrink: 0;
  opacity: 0.7;
}
.showcase-url-lock::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}
/* ---------- Frame viewport (iframe + hover overlay) ---------- */
.showcase-frame-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--oxblood-deep);
}
.showcase-frame-viewport iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  border: 0;
  transform-origin: top left;
  transform: scale(0.27);
  pointer-events: none;
  background: #fff;
  transition: filter 0.5s var(--ease-out);
  filter: saturate(0.92) contrast(0.96);
}
.showcase-card:hover .showcase-frame-viewport iframe {
  filter: saturate(1.05) contrast(1.02);
}

.showcase-frame-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(15, 5, 6, 0) 0%, rgba(15, 5, 6, 0.55) 100%),
    linear-gradient(180deg, rgba(58,15,18,0) 55%, rgba(15, 5, 6, 0.75) 100%);
  opacity: 0.55;
  transition: opacity 0.5s var(--ease-out);
  z-index: 1;
}
.showcase-card:hover .showcase-frame-veil { opacity: 0.15; }

.showcase-frame-pill {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translate(-50%, 14px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem;
  background: var(--gold);
  color: var(--oxblood);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 100px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(212, 165, 55, 0.4);
  transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out);
}
.showcase-frame-pill em {
  font-style: normal;
  font-size: 0.95rem;
  transition: transform 0.3s var(--ease-out);
}
.showcase-card:hover .showcase-frame-pill {
  opacity: 1;
  transform: translate(-50%, 0);
}
.showcase-card:hover .showcase-frame-pill em {
  transform: translate(2px, -2px);
}
/* Mobile: simplifier les interactions */
@media (max-width: 768px) {
  .showcase-frame-pill { display: none; }
  .showcase-frame-veil { opacity: 0.15; }
  .showcase-index { top: 0.7rem; right: 0.7rem; }
}
/* ============================================
   16. FAQ
   ============================================ */
.faq-list {
  max-width: var(--max-narrow);
  margin: 0 auto;
  border-top: 1px solid rgba(242, 235, 220, 0.1);
}
.faq-item {
  border-bottom: 1px solid rgba(242, 235, 220, 0.1);
}
.faq-trigger {
  width: 100%;
  background: transparent;
  border: none;
  padding: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  text-align: left;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  transition: color 0.3s;
}
.faq-trigger:hover { color: var(--gold); }
.faq-trigger .num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 1.5rem;
  align-self: center;
  opacity: 0.85;
}
.faq-trigger .question { flex: 1; }
.faq-trigger .icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(242, 235, 220, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: all 0.4s var(--ease-out);
}
.faq-trigger .icon::before, .faq-trigger .icon::after {
  content: '';
  position: absolute;
  background: var(--cream);
  transition: background 0.3s, transform 0.4s var(--ease-out);
}
.faq-trigger .icon::before {
  width: 12px; height: 1px;
}
.faq-trigger .icon::after {
  width: 1px; height: 12px;
}
.faq-item.open .faq-trigger .icon {
  background: var(--gold);
  border-color: var(--gold);
}
.faq-item.open .faq-trigger .icon::before,
.faq-item.open .faq-trigger .icon::after {
  background: var(--oxblood);
}
.faq-item.open .faq-trigger .icon::after {
  transform: scaleY(0);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out);
}
/* La réponse occupe exactement la colonne de la question : même retrait à
   gauche, et à droite le dégagement de l'icône. Le plafond de 60ch la
   coupait 219 px avant la fin de la question, d'où le déséquilibre. */
.faq-answer-inner {
  padding: 0 4rem 2rem 4rem;
  font-size: var(--fs-body);
  line-height: 1.65;
  opacity: 0.78;
}
.faq-answer-inner em {
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--gold);
}
@media (max-width: 600px) {
  .faq-trigger .num { display: none; }
  .faq-answer-inner { padding-left: 0; padding-right: 0; }
}

/* ============================================
   17. CONTACT · formulaire 2 colonnes
   ============================================ */
.contact-section {
  background: var(--oxblood);
  padding: var(--section-py) var(--gutter);
  position: relative;
  overflow: hidden;
}
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(212, 165, 55, 0.08), transparent 60%);
  pointer-events: none;
}

.contact-grid {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  align-items: stretch;
}
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; gap: 0; }
}

/* Colonne intro (gauche, dorée) */
.contact-intro {
  background: var(--gold);
  color: var(--oxblood);
  padding: 3.5rem 3rem 3.5rem 3.25rem;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
@media (max-width: 960px) {
  .contact-intro { border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 2.75rem 2rem; }
}
.contact-intro::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: rgba(58, 15, 18, 0.15);
}
@media (max-width: 960px) {
  .contact-intro::after { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 1px; }
}
.contact-intro .label {
  color: var(--oxblood);
  margin-bottom: 1.75rem;
  opacity: 0.7;
}
.contact-intro .label::before { background: var(--oxblood); opacity: 0.5; }
.contact-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--oxblood);
  margin-bottom: 1.5rem;
}
.contact-intro h2 em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  color: var(--burnt);
}
.contact-intro > p {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--oxblood);
  opacity: 0.78;
  margin-bottom: 1.75rem;
  max-width: 38ch;
}
.contact-bullets {
  list-style: none;
  margin-bottom: 2.5rem;
}
.contact-bullets li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(58, 15, 18, 0.15);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
  opacity: 0.78;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.contact-bullets li::before {
  content: '+';
  color: var(--oxblood);
  font-weight: 600;
}
.contact-bullets li:last-child { border-bottom: none; }
.contact-direct {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--oxblood);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid rgba(58, 15, 18, 0.4);
  padding-bottom: 0.3rem;
  align-self: flex-start;
  transition: gap 0.3s var(--ease-out), border-color 0.3s;
}
.contact-direct .arrow { transition: transform 0.3s var(--ease-out); }
.contact-direct:hover { gap: 0.7rem; border-color: var(--oxblood); }
.contact-direct:hover .arrow { transform: translate(3px, -3px); }

/* Colonne formulaire (droite, sombre) */
.contact-form {
  background: var(--oxblood-deep);
  color: var(--cream);
  padding: 3.5rem 3rem;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  border: 1px solid rgba(242, 235, 220, 0.06);
  border-left: none;
}
@media (max-width: 960px) {
  .contact-form { border-radius: 0 0 var(--r-lg) var(--r-lg); border-left: 1px solid rgba(242, 235, 220, 0.06); padding: 2.75rem 2rem; }
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 1.4rem 2rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 700px) {
  .contact-form-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Desktop : les 4 champs courts restent à gauche · message prend toute la colonne droite */
@media (min-width: 701px) {
  .contact-field:not(.contact-field--message) { grid-column: 1; }
  .contact-field--message {
    grid-column: 2;
    grid-row: 1 / span 4;
  }
  .contact-field--message textarea {
    flex: 1;
    min-height: 100%;
  }
}

/* Hint sous le formulaire · lien vers page contact dédiée */
.contact-hint {
  margin: 0 0 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cream);
  opacity: 0.55;
}
.contact-hint a {
  color: var(--gold);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 0.2s, color 0.2s;
}
.contact-hint a:hover { color: var(--gold-bright); }
.contact-field label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.78;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.contact-field .req { color: var(--gold); }

.contact-field input,
.contact-field textarea,
.contact-field select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(242, 235, 220, 0.18);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 0.7rem 0;
  outline: none;
  transition: border-color 0.3s, color 0.3s;
}
.contact-field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(242, 235, 220, 0.35);
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
}
.contact-field input:focus,
.contact-field textarea:focus,
.contact-field select:focus {
  border-bottom-color: var(--gold);
}
.contact-legal {
  font-size: 0.75rem;
  line-height: 1.55;
  color: rgba(242, 235, 220, 0.55);
  margin: 0 0 2rem;
  max-width: 65ch;
}
.contact-legal a {
  color: var(--gold);
  border-bottom: 1px solid rgba(212, 165, 55, 0.3);
  transition: border-color 0.2s;
}
.contact-legal a:hover { border-bottom-color: var(--gold); }

.contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 1rem 1.85rem;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: all 0.3s var(--ease-out);
}
.contact-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  z-index: -1;
}
.contact-submit:hover {
  color: var(--oxblood);
  box-shadow: 0 12px 32px rgba(212, 165, 55, 0.3);
}
.contact-submit:hover::before { transform: scaleX(1); }
.contact-submit .arrow { transition: transform 0.3s var(--ease-out); }
.contact-submit:hover .arrow { transform: translateX(4px); }

/* État succès / erreur (léger) */
.contact-form.is-sent .contact-submit { background: var(--gold); color: var(--oxblood); border-color: var(--gold); }

/* ---- États d'envoi du formulaire ---- */
/* Pot de miel : sorti du flux sans display:none, que certains robots détectent. */
.champ-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-long-form.is-sent .contact-submit,
.contact-form.is-sent .contact-submit {
  background: var(--gold);
  color: var(--oxblood);
  border-color: var(--gold);
}
.est-en-cours .contact-submit { opacity: 0.7; cursor: progress; }
.contact-submit[disabled] { pointer-events: none; }
.est-en-cours .contact-submit .arrow { animation: pulse-envoi 1s ease-in-out infinite; }
@keyframes pulse-envoi {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50%      { transform: translateX(4px); opacity: 0.5; }
}
.form-etat {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
}
.form-etat--ok { color: var(--gold); }
.form-etat--erreur { color: #E8A0A0; }
@media (prefers-reduced-motion: reduce) {
  .est-en-cours .contact-submit .arrow { animation: none; }
}

/* ============================================
   18. FOOTER
   ============================================ */
footer {
  background: var(--oxblood-deep);
  padding: 6rem var(--gutter) 3rem;
  border-top: 1px solid rgba(212, 165, 55, 0.08);
  position: relative;
  overflow: hidden;
}

.footer-content {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Wordmark en watermark plein cadre */
.footer-mark {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
  cursor: default;
  line-height: 0;
}
.footer-mark-svg {
  width: 100%;
  height: auto;
  display: block;
}
/* Base wordmark : couleur du fond → invisible par défaut.
   Au hover, on bascule sur var(--oxblood) pour qu'une silhouette discrète apparaisse. */
.footer-mark-svg--base {
  fill: var(--oxblood-deep);
  opacity: 1;
  transition: fill 0.7s var(--ease-out);
}
.footer-mark-svg--spot {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
}
footer:hover .footer-mark-svg--base { fill: var(--oxblood); }
/* Opacity max réduite (0.55 au lieu de 1) pour que la lumière du spot
   ne mange pas la lisibilité du texte du footer par-dessus */
footer:hover .footer-mark-svg--spot { opacity: 0.55; }

.footer-cols {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem 2.5rem;
  margin-bottom: 3rem;
}

/* ---- Barre du bas : marque à gauche, mentions à droite ----
   Une ligne centrée mettait les trois informations sur le même plan et
   entrait en concurrence avec le wordmark en fond. Ici la marque ancre le
   coin gauche, l'administratif file à droite, et le centre reste vide. */
.footer-bar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(212, 165, 55, 0.12);
}
.footer-bar-mark {
  display: block;
  line-height: 0;
  flex-shrink: 0;
}
.footer-bar-mark svg {
  width: 104px;
  height: auto;
  fill: var(--cream);
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.footer-bar-mark:hover svg { opacity: 1; }

.footer-bar-liens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-bar-copy {
  color: var(--cream);
  opacity: 0.42;
  white-space: nowrap;
}
.footer-bar-liens a {
  color: var(--cream);
  opacity: 0.62;
  text-decoration: none;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.footer-bar-liens a:hover,
.footer-bar-liens a:focus-visible { opacity: 1; color: var(--gold); }

/* Le logo LinkedIn : seule tache pleine de la barre, il attire l'œil en bout
   de ligne sans avoir besoin d'être gros. Le tracé porte lui-même son carré et
   ses coins arrondis, on ne lui met donc aucun fond, sinon deux carrés se
   superposeraient. La couleur vient de currentColor, pour virer à l'or. */
.footer-bar-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  opacity: 0.9;
  transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.footer-bar-in svg {
  display: block;
  width: 30px;
  height: 30px;
}
.footer-bar-in:hover,
.footer-bar-in:focus-visible {
  color: var(--gold);
  opacity: 1;
  transform: translateY(-2px);
}

@media (max-width: 680px) {
  .footer-bar { justify-content: center; text-align: center; }
  .footer-bar-liens { justify-content: center; gap: 0.75rem 1.5rem; }
}
@media (max-width: 980px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 3rem 2.5rem; }
}
@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr; gap: 2.5rem; }
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(212, 165, 55, 0.18);
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer-col li { line-height: 1.4; }
.footer-col p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--cream);
  opacity: 0.7;
}
.footer-col a {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--cream);
  opacity: 0.7;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition: opacity 0.25s, color 0.25s, gap 0.3s var(--ease-out);
  position: relative;
}
.footer-col a::before {
  content: '→';
  font-family: var(--font-mono);
  font-size: 0.75rem;
  display: inline-block;
  opacity: 0;
  width: 0;
  margin-right: 0;
  transition: opacity 0.3s, width 0.3s var(--ease-out), margin-right 0.3s var(--ease-out);
  overflow: hidden;
}
.footer-col a:hover {
  opacity: 1;
  color: var(--gold);
}
.footer-col a:hover::before {
  opacity: 1;
  width: 1em;
  margin-right: 0.4rem;
}
.footer-meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.75rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cream);
  opacity: 0.5;
  padding-top: 2rem;
  border-top: 1px solid rgba(212, 165, 55, 0.12);
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-meta a {
  color: var(--cream);
  text-decoration: none;
  transition: color 0.25s;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.footer-meta a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ============================================
   19. REVEAL ON SCROLL
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s var(--ease-out) var(--reveal-delay, 0ms),
    transform 0.9s var(--ease-out) var(--reveal-delay, 0ms);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   19.b MOTION SYSTÈME (étape 4)
   Split-words, stagger, page-peel, magnetic.
   ============================================ */

/* --- Split words sur les h2 (data-split) --- */
[data-split] {
  /* Le conteneur reste opaque. L'animation se fait sur les mots. */
}
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
  will-change: opacity, transform;
}
[data-split].is-revealed .split-word {
  opacity: 1;
  transform: translateY(0);
}

/* --- Stagger des enfants d'une grille (data-stagger) ---
   On passe par une CSS var dédiée au reveal pour ne pas
   impacter les transitions :hover des cartes. */
[data-stagger] > * {
  --reveal-delay: calc(var(--i, 0) * 110ms);
}

/* --- Block POP : enfants directs d'une grille [data-stagger] qui ont .reveal
   reçoivent une entrée scale + overshoot à la place du fade-up classique.
   On utilise une animation (et non une transition) pour que la timing function
   "back" (overshoot) ne pollue pas les transitions :hover des cartes après. */
[data-stagger] > .reveal {
  opacity: 0;
  transform: translateY(20px) scale(0.85);
  transition: none;
}
[data-stagger] > .reveal.in-view {
  animation: blockPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--reveal-delay, 0ms) forwards;
}
@keyframes blockPop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.85); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  [data-stagger] > .reveal,
  [data-stagger] > .reveal.in-view {
    animation: none;
    transition: opacity 0.4s ease;
    opacity: 1;
    transform: none;
  }
}

/* --- Page-peel : entrée verticale en clip-path (data-peel)
   On clippe par le BAS (inset(0 0 100% 0)) pour que la section
   se déroule du haut vers le bas, dans le sens du scroll. */
[data-peel] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path;
}
[data-peel].is-peeled {
  clip-path: inset(0 0 0 0);
}

/* --- Magnetic button : transition douce du transform en sortie --- */
/* Le transform est piloté par le module magnetic (motion.js), qui règle
   lui-même sa transition : rapide à l'approche, souple au retour.
   On ne déclare ici que le box-shadow pour ne pas entrer en conflit. */
.btn-primary[data-cta] {
  transition: box-shadow 0.25s var(--ease-out);
  will-change: transform;
}

/* Le curseur magnétique a été retiré : il déplaçait l'anneau avec une
   transition de 0.32s, perçue comme de la latence, et faisait bouger les
   boutons sous la souris. Contre-productif pour une cible de dirigeants. */

/* --- Reduced motion / Mobile : tout désactivé --- */
@media (prefers-reduced-motion: reduce) {
  .split-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-peel] {
    clip-path: none !important;
    transition: none !important;
  }
  .btn-primary[data-cta] { transition: none !important; }
}
@media (max-width: 767px) {
  /* Sur mobile : pas d'effets de mots ou de peel pour rester rapide */
  .split-word {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-peel] {
    clip-path: none;
  }
}

/* ============================================
   20. ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
/* =====================================================================
   HERO · variante "Glass Video" (style 21st.dev)
   Vidéo de fond plein écran + carte glass centrée.
   ===================================================================== */

.hero.hero--glass {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0d0405;
  isolation: isolate;
}

/* Fond statique : image hero (cover) avec fallback couleur. */
.hero--glass .hero-static {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #150507 url('../img/hero.jpg') center / cover no-repeat;
}

@media (max-width: 900px) {
  /* Même visuel en définition mobile : 12 Ko au lieu de 124 */
  .hero--glass .hero-static {
    background-image: url('../img/hero-mobile.jpg');
  }
}

/* Scrim pour lisibilité (assombrit le shader autour du texte) */
.hero--glass .hero-scrim {
  position: absolute; inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(10, 4, 5, 0.35) 0%, rgba(10, 4, 5, 0.18) 35%, rgba(10, 4, 5, 0.5) 100%),
    radial-gradient(70% 90% at 50% 50%, transparent 0%, rgba(10, 4, 5, 0.3) 100%);
}

/* Grain léger */
.hero--glass .hero-grain {
  position: absolute; inset: 0;
  z-index: 3; pointer-events: none;
  opacity: 0.15;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.85  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* 3 stripes du wordmark · accent décoratif en bas-droite du hero (taille x2) */
.hero-stripes {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 3rem);
  right: clamp(1.5rem, 4vw, 3rem);
  width: clamp(240px, 28vw, 400px);
  height: auto;
  z-index: 2;
  opacity: 0.05;
  color: var(--cream);
  pointer-events: none;
  user-select: none;
}

/* Conteneur du contenu centré */
.hero-glass-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(2rem, 6vh, 5rem) var(--gutter);
  max-width: 1200px;
  width: 100%;
}/* ---- Headline ---- */
.hero-glass-h1 {
  font-family: var(--font-editorial);
  font-weight: 500;
  color: var(--cream);
  font-size: clamp(2.6rem, 7.5vw, 6.5rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 2rem 0 0;
  max-width: 22ch;
  text-wrap: balance;
  /* L'animation d'entrée est désormais gérée par les .word-animate enfants
     (chacun avec son délai data-delay, déclenché par motion.js) */
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

/* Mot animé · blur + slide + scale au load avec stagger via JS */
.hero-glass-h1 .word-animate {
  display: inline-block;
  opacity: 0;
  margin: 0 0.08em;
  transition: color 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform, filter;
}
.hero-glass-h1 .word-animate:hover {
  color: var(--gold-bright);
  transform: translateY(-2px);
}

@keyframes word-appear {
  0%   { opacity: 0; transform: translateY(30px) scale(0.8);  filter: blur(10px); }
  50%  { opacity: 0.8; transform: translateY(10px) scale(0.95); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0)   scale(1);    filter: blur(0); }
}

/* prefers-reduced-motion · pas d'animation, les mots apparaissent direct */
@media (prefers-reduced-motion: reduce) {
  .hero-glass-h1 .word-animate {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}
/* SVG inline dans le h1 · remplace un mot (ex. "conversion") par une image */
.hero-glass-h1 .h1-svg {
  display: inline-block;
  height: 0.86em;
  width: auto;
  vertical-align: -0.08em;
  margin: 0 0.12em;
  transform: translateY(5px);
  filter: drop-shadow(0 0 24px rgba(212, 165, 55, 0.25));
}

.hero-glass-h1 em {
  font-family: var(--font-emphasis);
  font-style: normal;
  font-weight: 400;
  color: var(--gold);
  /* Sirage a une x-height normale et un dessin large : ni sur-dimension
     ni inclinaison, contrairement à la manuscrite précédente. */
  font-size: 0.96em;
  display: inline-block;
  margin: 0 0.04em;
  text-shadow: 0 0 30px rgba(212, 165, 55, 0.35);
}

/* ---- Subtext ---- */
.hero-glass-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  color: rgba(242, 235, 220, 0.82);
  margin: 1.4rem 0 0;
  max-width: 640px;
  opacity: 0;
  transform: translateY(10px);
  animation: heroGlassIn 700ms var(--ease-out) 750ms forwards;
}

/* Promesse forte du hero : un cran au-dessus du texte courant qui la porte.
   Un reflet oxblood balaie l'or toutes les trois secondes. La couleur pleine
   reste la valeur de repli : si le rognage sur le texte n'est pas supporté,
   la phrase s'affiche simplement en or. */
.hero-glass-sub-fort {
  display: inline-block;
  margin-top: 0.35em;
  font-size: 1.35em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gold);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-glass-sub-fort {
    background-color: var(--gold);
    background-image: linear-gradient(
      118deg,
      var(--gold) 0%,
      var(--oxblood) 44%,
      var(--oxblood) 56%,
      var(--gold) 100%
    );
    background-repeat: no-repeat;
    background-size: 62% 260%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: balayage-or 4s linear infinite;
  }
}

/* 2,2 s de passage puis 1,8 s de pause : le reflet traverse en oblique,
   assez vite pour accrocher, assez espacé pour ne pas lasser. */
@keyframes balayage-or {
  0%   { background-position: -70% 0; }
  55%  { background-position: 220% 0; }
  100% { background-position: 220% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glass-sub-fort { animation: none; background-image: none; -webkit-text-fill-color: var(--gold); }
}

/* Liens contextuels du manifeste.
   Deux traits superposés : un filet constant qui signale le lien au repos,
   et un trait dégradé qui se déploie de la gauche vers la droite au survol.
   Le filet du repos passe par background-image plutôt que border-bottom,
   pour que les deux traits partagent exactement la même ligne de base. */
/* Mécanique partagée : trait fin permanent, puis soulignement dégradé qui
   s'ouvre au survol. Le manifeste et les liens du cocon refonte doivent se
   reconnaître pareil, un lien ne doit jamais dépendre de la page où il tombe. */
.manifesto-text a,
.lien-or {
  position: relative;
  color: var(--gold);
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(rgba(212, 165, 55, 0.32), rgba(212, 165, 55, 0.32));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color 0.25s ease;
}

/* Satoshi 900 : le texte courant est en General Sans, plafonnée à 700.
   Basculer sur la police d'affichage donne un vrai extra bold sans
   télécharger de graisse supplémentaire. Réservé au manifeste, dont le
   corps est assez gros pour le porter. */
.manifesto-text a {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.015em;
}

.manifesto-text a::after,
.lien-or::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--burnt) 0%, var(--gold) 55%, #F0C557 100%);
  transition: width 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.manifesto-text a:hover,
.lien-or:hover { color: #F0C557; }
.manifesto-text a:hover::after,
.manifesto-text a:focus-visible::after,
.lien-or:hover::after,
.lien-or:focus-visible::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .manifesto-text a::after,
  .lien-or::after { transition: none; }
}


/* ---- CTAs ---- */
.hero-glass-ctas {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  animation: heroGlassIn 700ms var(--ease-out) 1000ms forwards;
}
.hero-glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 2rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: filter 0.3s ease, transform 0.3s var(--ease-out), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.hero-glass-btn--primary {
  background: var(--gold);
  color: var(--oxblood);
  box-shadow:
    0 10px 30px rgba(212, 165, 55, 0.28),
    0 0 0 1px rgba(212, 165, 55, 0.55);
}
.hero-glass-btn--primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow:
    0 14px 38px rgba(212, 165, 55, 0.4),
    0 0 0 1px rgba(212, 165, 55, 0.8);
}
.hero-glass-btn--ghost {
  background: rgba(58, 15, 18, 0.4);
  color: var(--cream);
  border-color: rgba(242, 235, 220, 0.25);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.hero-glass-btn--ghost:hover {
  background: rgba(58, 15, 18, 0.6);
  border-color: rgba(212, 165, 55, 0.55);
  color: var(--gold);
  transform: translateY(-2px);
}

@keyframes heroGlassIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 720px) {  .hero-glass-h1 { font-size: clamp(2.2rem, 10vw, 3.6rem); margin-top: 1.5rem; }
  .hero-glass-sub { font-size: 0.98rem; }
  .hero-glass-btn { height: 48px; font-size: 0.95rem; padding: 0 1.5rem; width: 100%; }
  .hero-glass-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero--glass *,
  .hero--glass *::before,
  .hero--glass *::after { animation: none !important; }
  .hero-glass-h1,
.hero-glass-sub,
.hero-glass-ctas{
    opacity: 1 !important; transform: none !important;
  }
}
/* Grain SVG en overlay */
.hero-grain {
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.85  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}/* =====================================================================
   MOBILE · refonte des trois zones qui tenaient mal sous 900px
   1. Méthode : timeline verticale à la place de l'orbite
   2. Piliers : cartes compactes, hiérarchie conservée
   3. Footer : épuré, sans filigrane ni colonnes
   ===================================================================== */

/* ---------- 1. MÉTHODE ---------- */


/* ---------- 2. PILIERS ---------- */

@media (max-width: 700px) {
  /* Cartes nettement plus basses : titre, pitch et prix sur une seule
     lecture, sans le pavé vertical qu'imposait le format desktop. */
  .pillar {
    padding: 1.25rem 1.15rem;
    gap: 0.5rem;
    border-radius: var(--r-md);
  }
  .pillar--core { padding: 1.4rem 1.15rem 1.25rem; }

  .pillar h3 { font-size: 1.25rem; }
  .pillar-pitch {
    font-size: 0.875rem;
    line-height: 1.5;
    opacity: 0.75;
  }

  /* Prix sur une seule ligne au lieu d'un bloc empilé */
  .pillar-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0.15rem 0 0;
  }
  .pillar-price em { font-size: 0.625rem; letter-spacing: 0.12em; }
  .pillar-price strong { font-size: 1.5rem; }
  .pillar-price small { font-size: 0.6875rem; }

  .pillar-toggle {
    font-size: 0.5625rem;
    padding: 0.4rem 0.8rem;
  }
  /* Le badge chevauchait le bord de la carte sur petit écran */
  .pillar-badge {
    position: static;
    align-self: flex-start;
    margin-bottom: 0.35rem;
    transform: none;
  }
}

/* ---------- 3. FOOTER ---------- */

@media (max-width: 700px) {
  /* Le wordmark en filigrane passait derrière les liens et les rendait
     illisibles (fond bordeaux sur texte bordeaux). Retiré sur mobile. */
  .footer-mark { display: none; }

  footer { padding-top: 3rem; }

  /* Une seule colonne, listes resserrées */
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-bottom: 2.25rem;
  }
  .footer-col h4 {
    font-size: 0.625rem;
    padding-bottom: 0.55rem;
    margin-bottom: 0.75rem;
  }
  .footer-col li + li { margin-top: 0.5rem; }
  .footer-col a { font-size: 0.9375rem; }
  /* Flèche au survol inutile sans souris : on récupère la place */
  .footer-col a::before { content: none; }

  .footer-meta {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
  }
}

/* =====================================================================
   MOBILE · allègement de la home
   Mesuré avant : 17 690 px de haut (21 écrans) et ~20 Mo de médias.
   Rien n'est perdu : tout reste accessible sur les pages dédiées
   ou en dépliant à la demande.
   ===================================================================== */

.showcase-more { display: none; }

@media (max-width: 900px) {

  /* ---- Carnet : 4 démos au lieu de 9 ---- */
  .showcase-grid:not(.is-expanded) .showcase-item:nth-child(n + 5) { display: none; }

  .showcase-more {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.75rem auto 0;
    padding: 0.8rem 1.4rem;
    background: transparent;
    border: 1px solid rgba(212, 165, 55, 0.4);
    border-radius: 100px;
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .showcase-more em { font-style: normal; font-size: 1rem; line-height: 1; }
  .showcase-section .container { display: flex; flex-direction: column; }

  /* ---- Contact : le formulaire vit sur contact.html ---- */
  #contact .contact-form { display: none; }
  #contact .contact-grid { display: block; }
  .contact-cta-mobile { display: inline-flex; margin-top: 1.75rem; }

  /* ---- Secteurs : cartes resserrées ---- */
  .sector { padding: 1.5rem 1.35rem; gap: 0.85rem; }
  .sector h3 { font-size: 1.0625rem; }
  .sector-pitch { font-size: 0.875rem; line-height: 1.5; }
  /* Les chiffres détaillés restent sur chaque page secteur */
  .sector-stats { display: none; }
  .sector-cta { margin-top: 0.85rem !important; }

  /* ---- Respiration : purement décoratif ---- */
  .respiration { display: none; }

  /* ---- Équipe : image de fond allégée ---- */
  .equipe-fullbleed { min-height: 420px; }
}

/* Le CTA mobile du contact n'existe pas au-delà : le formulaire est là */
@media (min-width: 901px) {
  .contact-cta-mobile { display: none; }
}

/* ---------------------------------------------------------------------
   MOBILE · respiration verticale
   Les marges de section valaient 112px en haut et en bas, calibrées pour
   un grand écran. Sur 390px de large elles représentaient à elles seules
   près de 3 écrans de vide. Ramenées à 64px, l'air reste suffisant.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --section-py: 4rem; }

  /* Entêtes de section : l'écart au contenu était calibré desktop */
  .section-header { margin-bottom: 2rem; }
  .section-header h2 { margin-bottom: 0.85rem; }
  .section-header .lede { font-size: 0.9375rem; line-height: 1.55; }


  /* Bloc audit : mise en page verticale compacte */
  .pillars-audit { padding: 1.75rem 1.35rem; gap: 1.25rem; }
  .pillars-audit h3 { font-size: 1.25rem; }
  .pillars-audit p { font-size: 0.875rem; line-height: 1.55; }

  /* Notes de bas de section : utiles, mais discrètes */
  .prestations-note,
  .sectors-note { font-size: 0.6875rem; margin-top: 1.75rem; }
}

/* ---------------------------------------------------------------------
   MOBILE · footer sur deux colonnes
   Les 17 liens empilés faisaient 879px. En deux colonnes la hauteur est
   divisée par deux sans rien retirer : les liens restent dans le DOM,
   donc le maillage interne pour le référencement est préservé.
   --------------------------------------------------------------------- */
@media (max-width: 700px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1.25rem;
  }
  .footer-col h4 { font-size: 0.5625rem; letter-spacing: 0.16em; }
  .footer-col a  { font-size: 0.8125rem; }
  .footer-col li + li { margin-top: 0.4rem; }
}

/* Entête de la section approche : le chapô était calibré pour deux colonnes */
@media (max-width: 900px) {
  #approche .section-header .lede { font-size: 0.875rem; max-width: 34ch; }
  #approche .section-header { margin-bottom: 1.5rem; }
}

/* =====================================================================
   MÉTHODE · accordéon « vous / nous »
   Remplace la roue orbitale. Chaque étape indique qui mène, et se
   déplie sur deux colonnes : ce que le client apporte, ce que nous
   produisons. Le titre « co-construite » devient lisible d'un regard.
   ===================================================================== */


.duo {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  padding-left: 2.75rem;
}

/* Axe vertical : or plein sur toute la hauteur */
.duo-axis {
  position: absolute;
  left: 0.75rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--gold);
  border-radius: 2px;
  overflow: hidden;
}

.duo-step {
  position: relative;
  border-bottom: 1px solid rgba(242, 235, 220, 0.09);
}
.duo-step:first-child { border-top: 1px solid rgba(242, 235, 220, 0.09); }

/* Pastille sur l'axe, alignée sur le titre */
.duo-step::before {
  content: '';
  position: absolute;
  left: -2.24rem;
  top: 1.85rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--oxblood-deep);
  border: 2px solid rgba(212, 165, 55, 0.4);
  transition: background 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out),
              transform 0.35s var(--ease-out);
  z-index: 2;
}
.duo-step:hover::before { border-color: var(--gold); }
.duo-step.is-open::before {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(212, 165, 55, 0.14),
              0 0 18px rgba(212, 165, 55, 0.6);
}

/* --- Ligne cliquable --- */
.duo-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem 0.25rem 1.35rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: padding-left 0.35s var(--ease-out);
}
.duo-step:hover .duo-head,
.duo-step.is-open .duo-head { padding-left: 0.5rem; }

.duo-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  opacity: 0.55;
  transition: opacity 0.3s;
}
.duo-step.is-open .duo-num { opacity: 1; }

.duo-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--cream);
  line-height: 1.15;
  transition: color 0.3s;
}
.duo-step.is-open .duo-title { color: var(--gold); }

.duo-chev {
  position: relative;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.duo-chev::before,
.duo-chev::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1.5px;
  background: var(--gold);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-out), opacity 0.3s;
}
.duo-chev::after { transform: translate(-50%, -50%) rotate(90deg); }
.duo-step.is-open .duo-chev::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* --- Panneau dépliant --- */
.duo-panel {
  display: grid;
  grid-template-rows: 0fr;                 /* dépliage fluide, sans hauteur fixe */
  transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.duo-step.is-open .duo-panel { grid-template-rows: 1fr; }

.duo-panel-inner {
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s var(--ease-out) 0.08s,
              transform 0.4s var(--ease-out) 0.08s;
}
.duo-step.is-open .duo-panel-inner {
  opacity: 1;
  transform: translateY(0);
  padding: 0.25rem 0 2.5rem;
}

/* Numéro en filigrane, ancré à droite du panneau */
.duo-ghost {
  position: absolute;
  right: -0.5rem;
  bottom: -2.5rem;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-size: 11rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}

.duo-col { position: relative; z-index: 1; }
.duo-col h4 {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(242, 235, 220, 0.12);
}
.duo-col--you h4 { color: var(--cream); opacity: 0.75; }
.duo-col--us  h4 { color: var(--gold); }
.duo-col p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--cream);
  opacity: 0.72;
  margin: 0;
}


/* --- Mobile --- */
@media (max-width: 760px) {
  .duo { padding-left: 2rem; }
  .duo-axis { left: 0.5rem; }
  .duo-step::before { left: -1.78rem; top: 1.5rem; }

  .duo-title { font-size: 1.125rem; }

  .duo-panel-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .duo-step.is-open .duo-panel-inner { padding-bottom: 1.75rem; }
  .duo-ghost { font-size: 6rem; bottom: -1.5rem; opacity: 0.045; }
  .duo-col p { font-size: 0.875rem; }
}

/* ---------------------------------------------------------------------
   MÉTHODE · répartition desktop / mobile
   La roue orbitale reste la version de référence sur grand écran.
   Sous 900px elle devient illisible (nœuds superposés, carte de détail
   par-dessus) : l'accordéon prend le relais avec le même contenu.
   --------------------------------------------------------------------- */
.duo { display: none; }

@media (max-width: 900px) {
  .methode-grid { display: none; }
  .duo { display: block; }
}

/* ---------------------------------------------------------------------
   ÉQUIPE · prénoms cliquables vers LinkedIn
   Présent sur la home (.equipe-member) et sur la page agence
   (.agence-member-name). Le prénom reste identique au repos ; seul le
   passage en or au survol signale qu'il est cliquable.
   --------------------------------------------------------------------- */

/* Texte réservé aux lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.member-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.member-link:hover { color: var(--gold); }


/* Saut de ligne réservé au mobile (mise en page des accroches) */
.br-mobile { display: none; }
@media (max-width: 700px) {
  .br-mobile { display: block; }
}

/* ---------------------------------------------------------------------
   PILIERS · une carte dépliée doit rester au-dessus de la suite
   Les cartes sont en position absolue dans un conteneur à ratio fixe :
   dépliée, une carte du bas dépassait sous le bloc « Commencez par un
   audit », qui la recouvrait. On élève le stage tant qu'une carte est
   ouverte, et on maintient le bloc audit en dessous.
   --------------------------------------------------------------------- */
.pillars-orbit:has(.pillar-details.is-open) {
  z-index: 30;
}
.pillars-audit {
  position: relative;
  z-index: 1;
}
/* Repli pour les navigateurs sans :has() — la classe est posée en JS */
.pillars-orbit.has-open {
  z-index: 30;
}

/* Orbite figée pendant la lecture d'une carte : le contenu déplié reste
   stable, lisible et cliquable — et sa position ne varie plus, donc le
   calcul de débordement au-dessus du bloc audit reste valable. */
.pillars-orbit.has-open .pillar--satellite,
.pillars-orbit:has(.pillar-details.is-open) .pillar--satellite {
  animation-play-state: paused;
}

/* ============================================
   APERÇU AU SURVOL · liens des piliers
   Carte flottante qui suit le curseur. Passe sous le curseur
   personnalisé (z-index 9999) et ne capte jamais la souris.
   ============================================ */
.apercu {
  position: fixed;
  top: 0; left: 0;
  z-index: 9500;
  width: 260px;
  padding: 1rem 1rem 0.85rem;
  background: var(--oxblood-deep);
  border: 1px solid rgba(212, 165, 55, 0.28);
  border-radius: 12px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7),
              0 0 60px -30px rgba(212, 165, 55, 0.5);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.22s ease,
              transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: transform, opacity;
}
.apercu.est-visible { opacity: 1; transform: translateY(0) scale(1); }

.apercu-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 100%;
  margin-bottom: 0.7rem;
}

/* Variante sans logo : une page qui n'est pas un pilier n'a pas de pictogramme,
   un titre texte tient le même rôle en haut de la carte. */
.apercu-titre {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--cream);
  margin-bottom: 0.6rem;
}
/* .apercu-logo est en display:block, l'attribut hidden ne suffit pas à le masquer. */
.apercu-logo[hidden],
.apercu-titre[hidden] { display: none; }

.apercu-desc {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(242, 235, 220, 0.72);
}

.apercu-cta {
  display: block;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(242, 235, 220, 0.12);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .apercu { transition: opacity 0.15s linear; transform: none; }
  .apercu.est-visible { transform: none; }
}