@import url('tokens.css');

/* ── Thème de couleurs : ce site est CLAIR, et le dit ────────────────────
   Retour de la collaboratrice d'Eric (27/08, capture iPhone en mode nuit) :
   les titres devenaient illisibles — vert foncé sur fond noir.

   Cause : le site ne déclarait RIEN sur son thème. Sans `color-scheme`, un
   navigateur qui assombrit automatiquement les pages (Chrome Android, ou un
   navigateur intégré à une application) s'autorise à inverser les fonds en
   gardant les couleurs de texte : d'où du vert foncé posé sur du noir.

   Cette déclaration est le signal normalisé qui le lui interdit. Elle ne
   change RIEN pour qui n'est pas en mode sombre. Elle ne remplace pas un
   vrai thème sombre — le site n'en a pas, et n'en demande pas. */
:root {
  color-scheme: light;
}

/* =============================================================================
   ID Solution — site.css
   Stylesheet unique pour les 9 pages reconstruites from scratch.
   Plus d'Elementor. HTML5 sémantique, design system maîtrisé.
   ========================================================================== */
/* ⚠ Ce bloc DOIT rester APRÈS l'@import ci-dessus : une règle placée avant
   un @import l'invalide, tokens.css ne se charge plus, et le site perd
   toutes ses variables — donc ses dégradés, donc ses titres. Vécu deux
   fois : avec les polices Google le 26/08, puis ici même le 27/08. */

/* Polices : DM Sans servi localement (woff2), Plus Jakarta Sans + Fraunces via Google Fonts.
   Le @font-face local évite le round-trip CSS bloquant pour la police de corps. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dmsans-rp2yp2ywxg089urii5-g4vlh9vod8cmcqbu6-k6h9q.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dmsans-rp2yp2ywxg089urii5-g4vlh9vod8cmcqbu0-k4.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans + Fraunces : chargées par <link> dans le <head> de chaque
   page. Un @import posé ICI était INVALIDE (la règle exige que tous les
   @import précèdent toute autre règle — les @font-face ci-dessus le
   disqualifiaient) : les deux polices n'ont jamais été servies en prod, et le
   site tombait sur le repli système — élégant sur Mac, tout autre sur Windows
   (retour de la collaboratrice d'Eric, 26/08). */


/* ============================================================================
   RESET & BASE
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  overflow-x:hidden;  /* défense contre tout débordement horizontal accidentel */
}
body{ overflow-x:hidden; }
body{
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.6;
  color:var(--color-neutral-900);
  background:
    radial-gradient(ellipse 1400px 900px at -10% -20%,
      color-mix(in srgb, var(--color-accent-soft) 45%, transparent),
      transparent 55%),
    radial-gradient(ellipse 1200px 800px at 110% 110%,
      var(--color-primary-50),
      transparent 60%),
    var(--color-neutral-0);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.025;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:200px 200px;
}
img,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--color-primary-600); color:#fff; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--color-neutral-100); }
::-webkit-scrollbar-thumb{ background:var(--color-neutral-300); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--color-primary-600); }


/* ============================================================================
   TYPOGRAPHY
   ========================================================================== */

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.4px;
  color:var(--color-neutral-900);
}
h1{
  font-size:clamp(1.75rem, 5vw, 4rem);
  font-weight:600;
  letter-spacing:-1.5px;
  line-height:1.08;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
h2{
  font-size:clamp(1.625rem, 3.2vw, 2.5rem);
  font-weight:600;
  letter-spacing:-.6px;
  line-height:1.15;
}
h3{
  font-size:clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight:700;
  letter-spacing:-.3px;
}
h4{ font-size:var(--text-xl); font-weight:600; }
p{ line-height:1.7; color:var(--color-neutral-700); }
strong{ color:var(--color-neutral-900); font-weight:600; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--color-accent-bold);
  margin-bottom:var(--space-4);
}
.eyebrow::before{
  content:"";
  width:24px;
  height:2px;
  background:var(--color-accent-bold);
  border-radius:2px;
}
.lead{
  font-family:'Fraunces', Georgia, serif;
  font-size:clamp(1.05rem, 1.4vw, 1.35rem);
  font-style:italic;
  font-weight:400;
  line-height:1.5;
  color:var(--color-neutral-700);
  max-width:62ch;
}


/* ============================================================================
   LAYOUT — container + section
   ========================================================================== */

.container{
  max-width:1240px;
  margin:0 auto;
  padding-left:var(--space-5);
  padding-right:var(--space-5);
}
.container--narrow{ max-width:880px; }
.container--wide{ max-width:1400px; }

.section{
  padding-top:clamp(60px, 8vw, 120px);
  padding-bottom:clamp(60px, 8vw, 120px);
  position:relative;
}
.section--tight{
  padding-top:clamp(40px, 5vw, 80px);
  padding-bottom:clamp(40px, 5vw, 80px);
}
.section-head{
  text-align:center;
  margin-bottom:var(--space-8);
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}
.section-head .eyebrow{ justify-content:center; }
.section-head .eyebrow::before{ display:none; }
.section-head .eyebrow{ padding:6px 14px; border-radius:999px; background:var(--color-accent-soft); }
.section-head h2{ margin-bottom:var(--space-3); }
.section-head p{ font-size:var(--text-lg); color:var(--color-neutral-600); }


/* ============================================================================
   HEADER (site nav)
   ========================================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:70;
  background:linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-800) 100%);
  box-shadow:0 4px 18px rgba(0,11,107,.18);
  isolation:isolate;
}
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 50%, rgba(255,255,255,.05) 0%, transparent 35%),
    radial-gradient(circle at 85% 50%, rgba(255,255,255,.03) 0%, transparent 35%);
  pointer-events:none;
  z-index:-1;
}
.site-header__inner{
  max-width:1320px;
  margin:0 auto;
  padding:18px var(--space-5);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-5);
}
.site-logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.site-logo img{
  max-height:88px;
  width:auto;
  filter:brightness(0) invert(1);
  transition:transform .25s var(--ease-base);
}
@media (max-width:900px){
  .site-logo img{ max-height:64px; }
  .site-header__inner{ padding:14px var(--space-5); }
}
@media (max-width:480px){
  .site-logo img{ max-height:52px; }
  .site-header__inner{ padding:12px var(--space-5); }
}
.site-logo:hover img{ transform:scale(1.04); }

.site-nav{
  display:flex;
  align-items:center;
  gap:var(--space-6);
}
.site-nav__list{
  display:flex;
  gap:var(--space-6);
  align-items:center;
}
.site-nav__link{
  position:relative;
  color:#fff;
  font-weight:500;
  letter-spacing:.4px;
  font-size:var(--text-sm);
  padding:8px 0;
  transition:color .2s var(--ease-base);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.site-nav__toggle{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
@media (hover:hover) and (pointer:fine){
  .site-nav__link:hover{ color:var(--color-warm); }
}
.site-nav__link.is-active{
  color:#fff;
  position:relative;
}
.site-nav__link.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background:var(--color-warm);
  border-radius:2px;
}
.site-nav__item{ position:relative; }
.site-nav__item--has-children > .site-nav__link::after{
  content:"";
  display:inline-block;
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  margin-left:6px;
  vertical-align:middle;
  transition:transform .25s var(--ease-base);
}
@media (hover:hover) and (pointer:fine){
  .site-nav__item--has-children:hover > .site-nav__link::after{ transform:rotate(180deg); }
}

.site-nav__submenu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(10px);
  background:#fff;
  border-radius:12px;
  box-shadow:0 16px 40px rgba(27,25,23,.12), 0 0 0 1px var(--color-neutral-200);
  padding:8px 0;
  min-width:260px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  /* Délai à la fermeture pour laisser le temps de bouger la souris */
  transition:opacity .2s var(--ease-base), transform .25s var(--ease-base), visibility 0s linear .35s;
  margin-top:18px;
}
/* Pont invisible entre le parent et le submenu pour ne pas perdre le hover */
.site-nav__submenu::after{
  content:"";
  position:absolute;
  top:-18px;
  left:0; right:0;
  height:18px;
  background:transparent;
}
.site-nav__submenu::before{
  content:none;
}
@media (hover:hover) and (pointer:fine){
  .site-nav__item--has-children:hover > .site-nav__submenu,
  .site-nav__item--has-children:focus-within > .site-nav__submenu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
    transition:opacity .2s var(--ease-base), transform .25s var(--ease-base), visibility 0s linear 0s;
  }
}
.site-nav__submenu a{
  display:block;
  padding:12px 20px;
  color:var(--color-neutral-900);
  font-weight:500;
  font-size:var(--text-sm);
  transition:background-color .15s, color .15s, padding-left .15s;
}
.site-nav__submenu a:hover{
  background:var(--color-accent-soft);
  color:var(--color-accent-bold);
}

.site-nav__toggle{
  display:none;
  width:44px; height:44px;
  border:1.5px solid rgba(255,255,255,.3);
  border-radius:10px;
  background:transparent;
  color:#fff;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  padding:0;
  cursor:pointer;
  flex-shrink:0;
  transition:background-color .2s var(--ease-base), border-color .2s var(--ease-base);
}
.site-nav__toggle span{
  display:block;
  width:20px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .25s var(--ease-base), opacity .2s var(--ease-base);
}
.site-nav__toggle:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.55);
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }


/* ---------- Mobile menu (drawer) ---------- */
@media (max-width:900px){
  .site-nav__toggle{ display:inline-flex; }
  .site-nav{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(86vw, 360px);
    background:linear-gradient(160deg, var(--color-primary-700) 0%, var(--color-primary-800) 100%);
    padding:96px var(--space-5) var(--space-5);
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .35s var(--ease-out);
    box-shadow:-12px 0 32px rgba(0,11,107,.25);
    z-index:60;
  }
  .site-nav.is-open{ transform:translateX(0); }
  .site-nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .site-nav__item{
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .site-nav__link{
    display:block;
    padding:14px 4px;
    font-size:var(--text-base);
    font-weight:600;
  }
  .site-nav__item--has-children > .site-nav__link::after{ float:right; margin-top:8px; }
  .site-nav__item--has-children.is-expanded > .site-nav__link::after{ transform:rotate(180deg); }
  .site-nav__submenu{
    position:static;
    transform:none;
    left:auto;
    background:transparent;
    box-shadow:none;
    padding:0 0 var(--space-3) var(--space-4);
    min-width:0;
    margin-top:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s var(--ease-base), opacity .25s var(--ease-base);
    pointer-events:auto;
    opacity:.4;
  }
  .site-nav__submenu::before,
  .site-nav__submenu::after{ display:none; }
  /* Annule l'effet desktop de hover/focus-within qui translate le sous-menu */
  .site-nav__item--has-children:hover > .site-nav__submenu,
  .site-nav__item--has-children:focus-within > .site-nav__submenu{
    transform:none;
    opacity:.4;
    visibility:visible;
    max-height:0;
  }
  .site-nav__item--has-children.is-expanded > .site-nav__submenu{
    transform:none;
    opacity:1;
    visibility:visible;
    max-height:420px;
  }
  .site-nav__submenu a{
    color:rgba(255,255,255,.85);
    padding:10px 0 10px var(--space-3);
    font-size:var(--text-sm);
    border-left:2px solid rgba(255,255,255,.20);
  }
  .site-nav__submenu a:hover{
    background:transparent;
    color:var(--color-warm);
    border-left-color:var(--color-warm);
    padding-left:var(--space-4);
  }
  /* Backdrop when nav open */
  body.nav-open::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(15,12,40,.55);
    backdrop-filter:blur(2px);
    z-index:55;
    animation:nav-fade .25s var(--ease-out) both;
  }
  body.nav-open{ overflow:hidden; }
  @keyframes nav-fade{ from{ opacity:0; } to{ opacity:1; } }
  .site-nav__toggle{ position:relative; z-index:65; }
}


/* ============================================================================
   HERO
   ========================================================================== */

.hero{
  position:relative;
  padding:clamp(80px, 12vh, 140px) 0 clamp(60px, 10vw, 120px);
  overflow:hidden;
  isolation:isolate;
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
  z-index:-2;
}
.hero::before{
  top:-15%;
  right:-12%;
  width:60vw;
  height:60vw;
  max-width:780px;
  max-height:780px;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--color-accent-bold) 32%, transparent),
    transparent 60%);
  animation:hero-orb-a 16s ease-in-out infinite alternate;
}
.hero::after{
  bottom:-25%;
  left:-15%;
  width:50vw;
  height:50vw;
  max-width:640px;
  max-height:640px;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--color-primary-600) 18%, transparent),
    transparent 70%);
  animation:hero-orb-b 22s ease-in-out infinite alternate;
}
@keyframes hero-orb-a{
  0%{ transform:translate(0,0) scale(1) rotate(0deg); }
  100%{ transform:translate(-40px,60px) scale(1.1) rotate(20deg); }
}
@keyframes hero-orb-b{
  0%{ transform:translate(0,0) scale(1) rotate(0deg); }
  100%{ transform:translate(60px,-40px) scale(1.12) rotate(-15deg); }
}
@media (prefers-reduced-motion:reduce){
  .hero::before, .hero::after{ animation:none; }
}

.hero__inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 var(--space-5);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--space-8);
  align-items:center;
}
.hero__inner--centered{
  grid-template-columns:1fr;
  text-align:center;
  max-width:880px;
}
.hero__inner--centered .lead{ margin:var(--space-5) auto 0; }
.hero__inner--centered .hero__cta{ justify-content:center; }
.hero__inner--centered .hero__title::before{ margin-left:auto; margin-right:auto; }

.hero__content{ max-width:62ch; }
/* Le titre est d'abord PEINT NORMALEMENT. Le dégradé n'est qu'un bonus,
   posé seulement si le navigateur sait le rendre — voir le bloc @supports
   juste en dessous.

   Pourquoi : un texte rendu transparent ne pardonne aucun échec. Si le
   dégradé ne peint pas, il ne reste RIEN — le titre disparaît, sans erreur.
   Deux cas réels le provoquent, tous deux reproduits le 27/08 :
     · le mode « couleurs forcées » (contraste élevé de Windows) supprime le
       dégradé mais conserve le texte transparent ;
     · color-mix() n'existe pas avant Safari 16.2 / Chrome 111 (mi-2023) :
       le dégradé devient invalide, donc absent.
   C'est ce qu'a vu la collaboratrice d'Eric sur Leadership incarné et
   Structure des ressentis : l'espace du titre, et rien dedans. */
.hero__title{
  color:var(--color-neutral-900);
  -webkit-text-fill-color:currentColor;
  margin-bottom:var(--space-4);
}
/* PLUS DE DÉGRADÉ SUR LE TITRE — décision du 27/08, après trois essais.
   Le dégradé était découpé sur le texte, donc le texte lui-même était
   transparent. Trois situations le faisaient disparaître :
     · le mode « couleurs forcées » de Windows ;
     · color-mix() sur un navigateur d'avant mi-2023 ;
     · et surtout l'assombrissement forcé d'Android (Samsung Internet,
       Chrome Android) : le moteur sait éclaircir une couleur de texte,
       jamais un dégradé — le titre restait sombre sur fond noirci.
   Le troisième cas ne se détecte pas : Samsung Internet assombrit la page
   SANS exposer prefers-color-scheme:dark (mesuré). Aucune règle
   conditionnelle ne peut donc l'attraper. Le titre est désormais une
   couleur pleine, que tous ces moteurs savent traiter. L'effet perdu était
   ténu — un léger virage vers la couleur de la page sur le dernier tiers
   des lettres — et il coûtait la lisibilité du titre. */
.hero__title::before{
  content:"";
  display:block;
  width:88px;
  height:6px;
  background:linear-gradient(90deg,
    var(--color-accent-bold) 0%,
    color-mix(in srgb, var(--color-accent-bold) 50%, var(--color-primary-600)) 100%);
  border-radius:4px;
  margin-bottom:var(--space-5);
  -webkit-text-fill-color:initial;
  background-clip:initial;
}
.hero__subtitle{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:clamp(1.25rem, 2.2vw, 1.875rem);
  font-weight:500;
  color:var(--color-neutral-600);
  margin-bottom:var(--space-5);
  line-height:1.25;
}
.hero__cta{
  display:flex;
  gap:var(--space-3);
  margin-top:var(--space-6);
  flex-wrap:wrap;
}
.hero__image{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  box-shadow:
    0 8px 24px rgba(27,25,23,.08),
    0 32px 64px rgba(27,25,23,.10);
}
.hero__image img{
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
/* image VERTICALE dans un cadre horizontal : la fenêtre s'ancre en bas
   pour garder Eric au paperboard (Formation, 25/08) */
.media-bas img{ object-position:50% 88%; }
.hero__image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,
    transparent 60%,
    color-mix(in srgb, var(--color-accent-bold) 20%, transparent) 100%);
  pointer-events:none;
}
@media (max-width:900px){
  .hero__inner{ grid-template-columns:1fr; }
}


/* ============================================================================
   BUTTONS
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:16px 32px;
  border-radius:999px;
  border:2px solid transparent;
  font-family:var(--font-body);
  font-size:var(--text-sm);
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .25s var(--ease-base),
             box-shadow .25s var(--ease-base),
             background-color .2s var(--ease-base),
             border-color .2s var(--ease-base),
             color .2s var(--ease-base);
  cursor:pointer;
}
.btn::after{
  content:"→";
  font-size:16px;
  transition:transform .25s var(--ease-out);
}
.btn:hover::after{ transform:translateX(4px); }

.btn--primary{
  background:var(--color-accent-bold);
  color:#fff;
  box-shadow:0 8px 24px color-mix(in srgb, var(--color-accent-bold) 30%, transparent);
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px color-mix(in srgb, var(--color-accent-bold) 40%, transparent);
  filter:brightness(.94);
}

.btn--ghost{
  background:transparent;
  color:var(--color-neutral-900);
  /* Bordure franche : posé à côté d'un bouton plein, le contour clair
     passait pour du texte et le bouton se manquait (demande d'Eric :
     « entourer pour mieux le voir »). */
  border-color:var(--color-neutral-400);
}
.btn--ghost:hover{
  background:var(--color-neutral-100);
  border-color:var(--color-neutral-400);
}

.btn--brand{
  background:var(--color-primary-600);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,16,184,.30);
}
.btn--brand:hover{
  transform:translateY(-2px);
  background:var(--color-primary-700);
  box-shadow:0 12px 32px rgba(0,16,184,.40);
}

.btn--light{
  background:#fff;
  color:var(--color-accent-bold);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.btn--light:hover{
  transform:translateY(-2px);
  filter:brightness(.95);
  box-shadow:0 12px 32px rgba(0,0,0,.25);
}

/* Mobile : CTA qui rentrent dans l'écran */
@media (max-width:600px){
  .btn{
    padding:14px 22px;
    font-size:12px;
    letter-spacing:1px;
    white-space:normal;
    text-align:center;
    line-height:1.25;
    max-width:100%;
  }
  .hero__cta{ width:100%; flex-direction:column; }
  .hero__cta .btn{ width:100%; justify-content:center; flex:0 0 auto; }
  .callout .btn{ width:100%; max-width:340px; }
  .alt-block__content .btn{ width:100%; max-width:340px; }
}


/* ============================================================================
   CARDS — base + variants
   ========================================================================== */

.card{
  background:var(--color-neutral-0);
  border:1px solid var(--color-neutral-200);
  border-radius:18px;
  padding:var(--space-6);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  box-shadow:
    0 1px 2px rgba(27,25,23,.04),
    0 8px 24px rgba(27,25,23,.06);
  transition:transform .35s var(--ease-out),
             box-shadow .35s var(--ease-out),
             border-color .25s var(--ease-base);
  height:100%;
  display:flex;
  flex-direction:column;
}
.card::after{
  content:"";
  position:absolute;
  top:-50%; right:-50%;
  width:200px;
  height:200px;
  border-radius:50%;
  background:radial-gradient(circle, var(--color-accent-soft) 0%, transparent 70%);
  opacity:0;
  transition:opacity .4s var(--ease-out);
  z-index:-1;
}
.card:hover{
  transform:translateY(-8px);
  border-color:var(--color-accent-bold);
  box-shadow:
    0 16px 48px rgba(27,25,23,.10),
    0 0 0 1px color-mix(in srgb, var(--color-accent-bold) 40%, transparent);
}
.card:hover::after{ opacity:1; }

.card__icon{
  width:64px; height:64px;
  border-radius:16px;
  background:linear-gradient(135deg,
    var(--color-accent-soft),
    color-mix(in srgb, var(--color-accent-soft) 50%, var(--color-neutral-0)));
  display:flex; align-items:center; justify-content:center;
  color:var(--color-accent-bold);
  margin-bottom:var(--space-4);
  transition:transform .25s var(--ease-base);
}
.card:hover .card__icon{ transform:rotate(-6deg) scale(1.05); }
.card__icon svg{ width:28px; height:28px; }

.card__title{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:700;
  letter-spacing:-.3px;
  margin-bottom:var(--space-3);
  color:var(--color-neutral-900);
}
.card__body{
  font-size:var(--text-sm);
  line-height:1.7;
  color:var(--color-neutral-700);
  flex:1;
}
.card__cta{
  margin-top:var(--space-4);
  padding-top:var(--space-3);
  border-top:1px solid var(--color-neutral-100);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--color-accent-bold);
}
.card__cta::after{
  content:"→";
  transition:transform .25s var(--ease-out);
}
.card:hover .card__cta::after{ transform:translateX(4px); }


/* Service card (large) — used on home for 3-up grid */
.service-card{
  --card-accent:var(--color-accent-bold);
  --card-accent-soft:var(--color-accent-soft);
  display:block;
  background:var(--color-neutral-0);
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--color-neutral-200);
  box-shadow:
    0 1px 2px rgba(27,25,23,.04),
    0 8px 24px rgba(27,25,23,.06);
  position:relative;
  isolation:isolate;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .25s var(--ease-base);
  height:100%;
}
.service-card__media{
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--card-accent-soft);
}
.service-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.service-card__body{ padding:var(--space-5) var(--space-6) var(--space-6); }
.service-card__eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--card-accent);
  margin-bottom:var(--space-2);
}
.service-card__title{
  font-family:var(--font-display);
  font-size:1.625rem;
  font-weight:700;
  letter-spacing:-.3px;
  margin-bottom:var(--space-3);
  color:var(--color-neutral-900);
}
.service-card__body p{
  font-size:var(--text-sm);
  line-height:1.65;
  color:var(--color-neutral-600);
  margin-bottom:var(--space-3);
}
.service-card__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--card-accent);
}
.service-card__cta::after{
  content:"→";
  transition:transform .25s var(--ease-out);
}
.service-card::before{
  content:"";
  position:absolute;
  top:0; left:0; bottom:0;
  width:0;
  background:var(--card-accent);
  transition:width .25s var(--ease-base);
  z-index:1;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 16px 40px rgba(27,25,23,.10),
    0 0 0 1px var(--card-accent);
  border-color:var(--card-accent);
}
.service-card:hover::before{ width:6px; }
.service-card:hover .service-card__media img{ transform:scale(1.06); }
.service-card:hover .service-card__cta::after{ transform:translateX(4px); }

/* Service accents — applied via class on .service-card */
.service-card.is-innovation { --card-accent:var(--terra-bold);  --card-accent-soft:var(--terra-soft); }
.service-card.is-seances    { --card-accent:var(--solar-bold);  --card-accent-soft:var(--solar-soft); }
.service-card.is-formations { --card-accent:var(--indigo-bold); --card-accent-soft:var(--indigo-soft); }
.service-card.is-amenagement{ --card-accent:var(--sage-bold);   --card-accent-soft:var(--sage-soft); }


/* Atout card (with left stripe) */
.atout-card{
  background:var(--color-neutral-0);
  border:1px solid var(--color-neutral-200);
  border-radius:18px;
  padding:var(--space-6);
  position:relative;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(27,25,23,.04), 0 8px 24px rgba(27,25,23,.06);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .25s var(--ease-base);
  height:100%;
}
.atout-card::before{
  content:"";
  position:absolute;
  top:0; left:0; bottom:0;
  width:4px;
  background:linear-gradient(180deg, var(--color-accent-bold), color-mix(in srgb, var(--color-accent-bold) 60%, white));
  transition:width .25s var(--ease-base);
}
.atout-card:hover{
  transform:translateY(-4px);
  border-color:var(--color-accent-bold);
  box-shadow:0 16px 32px rgba(27,25,23,.08);
}
.atout-card:hover::before{ width:6px; }
.atout-card__title{
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:-.2px;
  margin-bottom:var(--space-3);
  padding-bottom:var(--space-3);
  position:relative;
}
.atout-card__title::after{
  content:"";
  display:block;
  width:28px;
  height:2px;
  background:var(--color-accent-bold);
  border-radius:2px;
  margin-top:var(--space-3);
}
.atout-card__body{
  font-size:var(--text-sm);
  line-height:1.65;
  color:var(--color-neutral-600);
}


/* Team card */
.team-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:340px;
  margin:0 auto;
}
.team-card__photo{
  aspect-ratio:1/1.05;
  width:100%;
  max-width:280px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(27,25,23,.04), 0 8px 24px rgba(27,25,23,.08);
  position:relative;
  isolation:isolate;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  margin-bottom:var(--space-4);
}
.team-card__photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;
  transition:transform .6s var(--ease-out);
}
.team-card__photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    transparent 55%,
    color-mix(in srgb, var(--color-accent-bold) 50%, transparent) 100%);
  opacity:0;
  transition:opacity .4s var(--ease-out);
  pointer-events:none;
}
.team-card:hover .team-card__photo{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(27,25,23,.12);
}
.team-card:hover .team-card__photo img{ transform:scale(1.04); }
.team-card:hover .team-card__photo::after{ opacity:.7; }
.team-card__name{
  font-family:var(--font-display);
  font-size:1.375rem;
  font-weight:700;
  letter-spacing:-.3px;
  margin-bottom:var(--space-2);
  position:relative;
  padding-bottom:var(--space-3);
}
.team-card__name::after{
  content:"";
  display:block;
  width:32px;
  height:2px;
  background:var(--color-accent-bold);
  border-radius:2px;
  margin:var(--space-2) auto 0;
}
.team-card__bio{
  font-size:var(--text-sm);
  line-height:1.65;
  color:var(--color-neutral-600);
}


/* Spec card (icon-box) — used on Séances + Formations */
.spec-card{
  background:var(--color-neutral-0);
  border:1px solid var(--color-neutral-200);
  border-radius:18px;
  padding:var(--space-7) var(--space-6);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--space-3);
  box-shadow:0 1px 2px rgba(27,25,23,.04), 0 8px 24px rgba(27,25,23,.06);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s var(--ease-base);
  height:100%;
}
.spec-card:hover{
  transform:translateY(-6px);
  border-color:var(--color-accent-bold);
  box-shadow:0 16px 40px rgba(27,25,23,.10);
}
.spec-card__icon{
  width:80px; height:80px;
  border-radius:24px;
  background:linear-gradient(135deg,
    var(--color-accent-soft),
    color-mix(in srgb, var(--color-accent-soft) 50%, var(--color-neutral-0)));
  display:flex; align-items:center; justify-content:center;
  color:var(--color-accent-bold);
  margin-bottom:var(--space-2);
  transition:transform .3s var(--ease-base);
}
.spec-card:hover .spec-card__icon{ transform:rotate(-6deg) scale(1.05); }
.spec-card__icon svg{ width:32px; height:32px; }
.spec-card__title{
  font-family:var(--font-display);
  font-size:1.125rem;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--color-neutral-900);
}
.spec-card__title::after{
  content:"";
  display:block;
  width:32px;
  height:2px;
  background:var(--color-accent-bold);
  border-radius:2px;
  margin:10px auto 0;
  transition:width .25s var(--ease-base);
}
.spec-card:hover .spec-card__title::after{ width:48px; }
.spec-card__body{
  font-size:var(--text-sm);
  line-height:1.65;
  color:var(--color-neutral-600);
}


/* Key-card (with watermark number) — Innovation 3 cards */
.key-card{
  background:linear-gradient(180deg,
    var(--color-neutral-0) 0%,
    color-mix(in srgb, var(--color-accent-soft) 50%, var(--color-neutral-50)) 100%);
  border:1px solid var(--color-neutral-200);
  border-radius:18px;
  padding:var(--space-7) var(--space-6);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:200px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .25s var(--ease-base);
  height:100%;
}
.key-card::before{
  content:attr(data-number);
  position:absolute;
  bottom:-15px;
  right:0;
  font-family:'Fraunces', serif;
  font-size:140px;
  font-weight:600;
  line-height:1;
  color:var(--color-accent-bold);
  opacity:.14;
  letter-spacing:-6px;
  pointer-events:none;
  z-index:-1;
  transition:opacity .25s var(--ease-base);
}
.key-card:hover{
  transform:translateY(-6px);
  border-color:var(--color-accent-bold);
  box-shadow:0 16px 48px rgba(27,25,23,.10);
}
.key-card:hover::before{ opacity:.28; }
.key-card__title{
  font-family:var(--font-display);
  font-size:1.125rem;
  font-weight:700;
  letter-spacing:-.3px;
  line-height:1.25;
  color:var(--color-neutral-900);
  padding-bottom:var(--space-3);
  position:relative;
}
.key-card__title::after{
  content:"";
  display:block;
  width:40px;
  height:3px;
  background:var(--color-accent-bold);
  border-radius:2px;
  margin-top:var(--space-3);
  transition:width .25s var(--ease-base);
}
.key-card:hover .key-card__title::after{ width:64px; }


/* Year card (formations) */
.year-card{
  background:var(--color-neutral-0);
  border:1px solid var(--color-neutral-200);
  border-radius:18px;
  padding:var(--space-7) var(--space-6);
  text-align:center;
  box-shadow:0 1px 2px rgba(27,25,23,.04), 0 8px 24px rgba(27,25,23,.06);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s var(--ease-base);
  height:100%;
}
.year-card:hover{
  transform:translateY(-4px);
  border-color:var(--color-accent-bold);
  box-shadow:0 16px 40px rgba(27,25,23,.10);
}
.year-card__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px; height:64px;
  border-radius:50%;
  background:var(--color-accent-soft);
  color:var(--color-accent-bold);
  margin-bottom:var(--space-3);
}
.year-card__title{
  font-family:var(--font-display);
  font-size:1.125rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--color-accent-bold);
  margin-bottom:var(--space-3);
}
.year-card__body{ font-size:var(--text-sm); line-height:1.6; color:var(--color-neutral-700); }


/* Info card — contact */
.info-card{
  background:var(--color-neutral-0);
  border:1px solid var(--color-neutral-200);
  border-radius:18px;
  padding:var(--space-7) var(--space-5);
  text-align:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 1px 2px rgba(27,25,23,.04), 0 8px 24px rgba(27,25,23,.06);
  transition:all .35s var(--ease-out);
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-2);
}
.info-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg, var(--color-primary-600), color-mix(in srgb, var(--color-primary-600) 60%, white));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.info-card:hover:not([data-static]){
  transform:translateY(-6px);
  border-color:var(--color-primary-600);
  box-shadow:0 16px 32px rgba(0,16,184,.10);
}
.info-card:hover:not([data-static])::before,
.info-card[data-static]::before{ transform:scaleX(1); }
.info-card__icon{
  width:64px; height:64px;
  background:var(--color-primary-50);
  color:var(--color-primary-600);
  border-radius:18px;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:var(--space-3);
}
.info-card__icon svg{ width:28px; height:28px; }
.info-card__label{
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--color-neutral-400);
}
.info-card__value{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:600;
  color:var(--color-neutral-900);
}


/* ============================================================================
   GRIDS
   ========================================================================== */

.grid{
  display:grid;
  gap:var(--space-5);
}
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--auto-logo{
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:var(--space-4);
}
@media (max-width:1024px){
  .grid--3, .grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; }
  .grid--auto-logo{ grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
}


/* ============================================================================
   CALLOUT BANNERS (CTA colored sections)
   ========================================================================== */

.callout{
  max-width:1320px;
  margin:clamp(60px, 8vw, 100px) auto;
  padding:clamp(60px, 7vw, 90px) clamp(40px, 6vw, 80px);
  border-radius:28px;
  text-align:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
}
.callout::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 600px 200px at 20% 0%, rgba(255,255,255,.10), transparent 50%),
    radial-gradient(ellipse 600px 200px at 80% 100%, rgba(0,0,0,.10), transparent 50%);
  pointer-events:none;
}
.callout > *{ position:relative; z-index:2; }
.callout::after{ z-index:0; }
.callout__lead{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 3vw, 2.25rem);
  font-weight:700;
  line-height:1.3;
  max-width:760px;
  margin:0 auto var(--space-6);
  letter-spacing:-.5px;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.18);
}
.callout--sage{ background:linear-gradient(135deg, var(--sage-bold) 0%, color-mix(in srgb, var(--sage-bold) 60%, black) 100%); }
.callout--solar{ background:linear-gradient(135deg, var(--solar-bold) 0%, color-mix(in srgb, var(--solar-bold) 55%, black) 100%); }
.callout--indigo{ background:linear-gradient(135deg, var(--indigo-bold) 0%, color-mix(in srgb, var(--indigo-bold) 70%, black) 100%); }
.callout--primary{ background:linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%); }

@media (max-width:1024px){
  .callout{ margin-left:var(--space-4); margin-right:var(--space-4); border-radius:20px; }
}


/* ============================================================================
   BANNER — quote citation card (Formations)
   ========================================================================== */

.banner-quote{
  max-width:1000px;
  margin:clamp(40px, 6vw, 80px) auto;
  background:var(--color-neutral-0);
  border:1px solid var(--color-neutral-200);
  border-left:6px solid #C53030;
  border-radius:24px;
  padding:clamp(40px, 5vw, 60px);
  box-shadow:0 1px 2px rgba(27,25,23,.04), 0 16px 48px rgba(27,25,23,.08);
}
.banner-quote__eyebrow{
  display:block;
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#C53030;
  font-weight:700;
  margin-bottom:var(--space-4);
}
.banner-quote__text{
  font-family:'Fraunces', serif;
  font-size:clamp(1.25rem, 2vw, 1.625rem);
  font-weight:500;
  line-height:1.45;
  color:var(--color-neutral-900);
  letter-spacing:-.3px;
}


/* ============================================================================
   ACCORDION (HTML5 <details>)
   ========================================================================== */

.accordion{ display:flex; flex-direction:column; gap:var(--space-3); }
.accordion details{
  background:var(--color-neutral-0);
  border:1px solid var(--color-neutral-200);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .2s var(--ease-base), box-shadow .25s var(--ease-base);
}
.accordion details:hover,
.accordion details[open]{
  border-color:var(--color-accent-bold);
  box-shadow:0 8px 24px rgba(27,25,23,.06);
}
.accordion summary{
  list-style:none;
  cursor:pointer;
  padding:var(--space-5) var(--space-6);
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--text-lg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  transition:color .2s var(--ease-base), background-color .2s var(--ease-base);
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{
  content:"+";
  width:32px;
  height:32px;
  border-radius:50%;
  border:1.5px solid var(--color-accent-bold);
  color:var(--color-accent-bold);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:300;
  flex-shrink:0;
  transition:transform .3s var(--ease-out), background-color .25s var(--ease-base), color .25s var(--ease-base);
}
.accordion details[open] summary{
  color:var(--color-accent-bold);
  background:var(--color-accent-soft);
}
.accordion details[open] summary::after{
  transform:rotate(135deg);
  background:var(--color-accent-bold);
  color:#fff;
}
.accordion__body{
  padding:var(--space-3) var(--space-6) var(--space-6);
  font-size:var(--text-base);
  line-height:1.7;
  color:var(--color-neutral-700);
  background:var(--color-accent-soft);
}


/* ============================================================================
   "DARK" Block (Qui sommes-nous section)
   ========================================================================== */

.dark-block{
  max-width:1240px;
  margin:clamp(40px, 6vw, 80px) auto;
  background:linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
  border-radius:28px;
  padding:clamp(60px, 7vw, 100px) clamp(40px, 6vw, 80px);
  color:#fff;
  text-align:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.dark-block::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 700px 350px at 10% 0%, rgba(255,255,255,.10), transparent 50%),
    radial-gradient(ellipse 700px 350px at 90% 100%, rgba(255,255,255,.06), transparent 50%);
  pointer-events:none;
}
.dark-block > *{ position:relative; z-index:1; }
.dark-block__title{
  font-family:'Fraunces', serif;
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:600;
  letter-spacing:-1px;
  margin-bottom:var(--space-5);
  color:#fff;
}
.dark-block__title::after{
  content:"";
  display:block;
  width:64px;
  height:3px;
  background:rgba(255,255,255,.8);
  border-radius:2px;
  margin:var(--space-4) auto 0;
}
.dark-block__body{
  font-family:'Fraunces', serif;
  font-size:clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight:400;
  line-height:1.65;
  color:rgba(255,255,255,.92);
  max-width:820px;
  margin:0 auto;
}


/* ============================================================================
   REFERENCES — logo grid
   ========================================================================== */

.logo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:var(--space-4);
}
.logo-cell{
  background:var(--color-neutral-0);
  border:1px solid var(--color-neutral-200);
  border-radius:14px;
  height:130px;
  padding:var(--space-5);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 2px rgba(27,25,23,.04);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .25s var(--ease-base);
}
.logo-cell img{
  max-height:70px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  transition:transform .4s var(--ease-out);
}
.logo-cell:hover{
  transform:translateY(-4px) scale(1.03);
  border-color:var(--slate-bold);
  box-shadow:0 8px 24px rgba(27,25,23,.10);
}
.logo-cell:hover img{ transform:scale(1.04); }


/* ============================================================================
   CONTACT — split layout
   ========================================================================== */

/* — Contact refondu (25/08) — l'interlocuteur puis les canaux en rangées
   entièrement cliquables. La coordonnée est AFFICHÉE (on vient souvent la
   copier) ; survol et focus dessinés ; cibles ≥ 44 px. */
.contact-person{
  display:flex; align-items:center; gap:var(--space-4);
  padding-bottom:var(--space-5);
  border-bottom:1px solid var(--color-neutral-200);
}
/* la pastille ne se compresse JAMAIS : en flex, le texte long de mobile
   écrasait la largeur (max-width:100% global) pendant que la hauteur restait
   fixe → ellipse (vu par Lionel) */
.contact-person picture{ flex:0 0 88px; width:88px; height:88px; display:block; }
.contact-person img{
  width:88px; height:88px; max-width:none; border-radius:50%; object-fit:cover;
  border:2px solid var(--color-neutral-0);
  box-shadow:0 0 0 1px var(--color-neutral-200), 0 8px 20px rgba(27,25,23,.10);
}
.contact-person__label{
  display:block; font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--color-primary-600); font-weight:700; margin-bottom:2px;
}
.contact-person__nom{ display:block; font-size:var(--text-lg); }
.contact-person__role{ display:block; color:var(--color-neutral-600); font-size:.92rem; }
.contact-channels{ list-style:none; margin:0; padding:0; }
.contact-channels li + li{ border-top:1px solid var(--color-neutral-200); }
.contact-channels a{
  display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-4) var(--space-2);
  border-radius:var(--radius-md);
  min-height:64px;
  transition:background-color .2s var(--ease-base);
}
.contact-channels a:hover{ background:var(--color-neutral-50); }
.contact-channels a:hover .contact-channels__icone{
  background:var(--color-primary-600); color:#fff; border-color:var(--color-primary-600);
}
.contact-channels a:focus-visible{ outline:2px solid var(--color-primary-600); outline-offset:2px; }
.contact-channels__icone{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--color-neutral-300); color:var(--color-primary-600);
  transition:background-color .2s var(--ease-base), color .2s var(--ease-base), border-color .2s var(--ease-base);
}
.contact-channels__icone svg{ width:20px; height:20px; }
.contact-channels__label{
  display:block; font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--color-neutral-600); font-weight:700;
}
.contact-channels__valeur{ display:block; font-size:var(--text-lg); color:var(--color-neutral-900); }
.contact-channels__itineraire{
  display:inline-block; margin-top:4px;
  font-size:.85rem; font-weight:700; color:var(--color-primary-600);
}
.contact-lieu{
  border-radius:20px; overflow:hidden;
  border:1px solid var(--color-neutral-200);
  box-shadow:0 1px 2px rgba(27,25,23,.04), 0 16px 48px rgba(27,25,23,.08);
  aspect-ratio:4/3;
}
.contact-lieu img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){
  .contact-channels__valeur{ font-size:1rem; }
}

.contact-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-6);
  align-items:stretch;
}
.contact-info{
  display:flex; flex-direction:column; gap:var(--space-5);
  background:var(--color-neutral-0);
  border:1px solid var(--color-neutral-200);
  border-radius:20px;
  padding:clamp(24px, 3vw, 40px);
  box-shadow:0 1px 2px rgba(27,25,23,.04), 0 16px 48px rgba(27,25,23,.08);
}
.contact-info p{ font-size:var(--text-lg); }
.contact-map{
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--color-neutral-200);
  box-shadow:0 1px 2px rgba(27,25,23,.04), 0 16px 48px rgba(27,25,23,.08);
  min-height:420px;
}
.contact-map iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; }
@media (max-width:900px){
  .contact-split{ grid-template-columns:1fr; }
  .contact-map{ min-height:280px; }
  .contact-map iframe{ min-height:280px; }
}

.tagline-quote{
  max-width:760px;
  margin:clamp(48px, 6vw, 80px) auto;
  padding:var(--space-6) var(--space-7);
  text-align:center;
  position:relative;
}
.tagline-quote p{
  font-family:'Fraunces', serif;
  font-size:clamp(1.25rem, 2.2vw, 1.75rem);
  font-style:italic;
  font-weight:400;
  line-height:1.35;
  color:var(--color-neutral-900);
  position:relative;
}
.tagline-quote p::before,
.tagline-quote p::after{
  font-family:'Fraunces', serif;
  font-size:64px;
  line-height:1;
  color:var(--color-primary-600);
  opacity:.4;
  position:absolute;
}
.tagline-quote p::before{ content:"\201C"; left:-32px; top:-8px; }
.tagline-quote p::after{ content:"\201D"; right:-32px; bottom:-24px; }
.tagline-quote__sign{
  display:inline-block;
  margin-top:var(--space-4);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--color-primary-600);
  font-weight:700;
}


/* ============================================================================
   ALTERNATING (image + text)
   ========================================================================== */

.alt-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px, 6vw, 80px);
  align-items:center;
}
/* débordement de grille : sans min-width:0, une colonne au contenu large
   (liste des domaines) impose sa largeur max et écrase l'autre — l'image de
   Leadership était réduite à un timbre de 112 px (25/08) */
.alt-block > *{ min-width:0; }
.alt-block--reverse > :first-child{ order:2; }
.alt-block__image{
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(27,25,23,.04), 0 16px 48px rgba(27,25,23,.10);
  aspect-ratio:4/3;
}
.alt-block__image img{ width:100%; height:100%; object-fit:cover; }
/* variante : la fenêtre de recadrage remonte — pour une image portrait dont
   le cadrage centré coupait la tête du sujet (Révélation, remarque Lionel) */
.alt-block__image--haut img{ object-position:50% 12%; }
/* Photo en PORTRAIT dans un bloc deux colonnes. Le cadre standard est en 4/3
   et recadre au centre : une image nettement plus haute que large y perdrait
   la tête du sujet. Et le plein cadre n'est pas une option — une photo
   1280×1919 y dépasse la hauteur d'un écran. */
/* En 3/4 elle dominait encore nettement la citation voisine (remarque de
   Lionel) ; le carré centré garde le sourire et le geste tout en ramenant
   la hauteur au niveau du texte. */
.alt-block__image--portrait{ aspect-ratio:1/1; }
/* une citation encadrée garde son décor quand elle sert de colonne de texte */
.alt-block__content > .banner-quote{ margin:0; max-width:none; }
.alt-block__content h2{ margin-bottom:var(--space-4); }
.alt-block__content p + p{ margin-top:var(--space-3); }
@media (max-width:900px){
  .alt-block{ grid-template-columns:1fr; }
  .alt-block--reverse > :first-child{ order:0; }
}


/* ============================================================================
   FOOTER
   ========================================================================== */

.site-footer{
  background:linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-800) 100%);
  color:rgba(255,255,255,.82);
  padding:var(--space-7) 0 var(--space-5);
  position:relative;
  overflow:hidden;
  margin-top:clamp(60px, 8vw, 100px);
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 100%, rgba(255,255,255,.05) 0%, transparent 40%);
  pointer-events:none;
}
.site-footer__inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 var(--space-5);
  position:relative;
  z-index:1;
}
.site-footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:var(--space-6);
  padding-bottom:var(--space-5);
  border-bottom:1px solid rgba(255,255,255,.14);
  margin-bottom:var(--space-4);
}
.site-footer__col h3{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:#fff;
  margin-bottom:var(--space-4);
  padding-bottom:var(--space-3);
  position:relative;
  display:inline-block;
}
.site-footer__col h3::after{
  content:"";
  display:block;
  position:absolute;
  bottom:0; left:0;
  width:32px;
  height:2px;
  background:var(--color-accent-bold);
  border-radius:2px;
}
.site-footer__col p,
.site-footer__col li{ font-size:var(--text-sm); line-height:1.65; color:rgba(255,255,255,.82); }
.site-footer__col ul li + li{ margin-top:8px; }
.site-footer__col a{
  color:rgba(255,255,255,.82);
  transition:color .2s var(--ease-base), padding-left .2s var(--ease-base);
}
.site-footer__col a:hover{
  color:var(--color-accent-bold);
  padding-left:4px;
}
.site-footer__lead{
  font-family:'Fraunces', serif;
  font-size:var(--text-lg);
  font-style:italic;
  color:rgba(255,255,255,.9);
  line-height:1.5;
}
.site-footer__social{
  display:flex;
  gap:var(--space-2);
  margin-top:var(--space-4);
}
.site-footer__social a{
  width:40px; height:40px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.32);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s var(--ease-base), background-color .25s var(--ease-base), border-color .25s var(--ease-base), color .25s var(--ease-base);
  color:#fff;
}
.site-footer__social a:hover{
  transform:translateY(-2px);
  background:var(--color-accent-bold);
  border-color:var(--color-accent-bold);
  padding-left:0;
}
.site-footer__social svg{ width:18px; height:18px; fill:currentColor; }
.site-footer__credit{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:rgba(255,255,255,.65);
  padding-top:var(--space-2);
}
.site-footer__credit a{
  color:#fff;
  font-weight:700;
  border-bottom:1px solid var(--color-accent-bold);
  transition:color .2s var(--ease-base), border-color .2s var(--ease-base);
}
.site-footer__credit a:hover{
  color:var(--color-accent-bold);
  border-color:#fff;
}
@media (max-width:900px){
  .site-footer__grid{ grid-template-columns:1fr 1fr; }
  .site-footer__credit{ flex-direction:column; gap:8px; text-align:center; }
}
@media (max-width:600px){
  .site-footer__grid{ grid-template-columns:1fr; }
}


/* ============================================================================
   ACCENT — body class drives the accent variables
   ========================================================================== */

body.service-home,
body.service-contact{
  --color-accent-bold:var(--color-primary-600);
  --color-accent-soft:var(--color-primary-50);
}
body.service-innovation{
  --color-accent-bold:var(--terra-bold);
  --color-accent-soft:var(--terra-soft);
  --color-accent-ink:var(--terra-ink);
}
body.service-seances{
  --color-accent-bold:var(--solar-bold);
  --color-accent-soft:var(--solar-soft);
  --color-accent-ink:var(--solar-ink);
}
body.service-formations{
  --color-accent-bold:var(--indigo-bold);
  --color-accent-soft:var(--indigo-soft);
  --color-accent-ink:var(--indigo-ink);
}
body.service-amenagement{
  --color-accent-bold:var(--sage-bold);
  --color-accent-soft:var(--sage-soft);
  --color-accent-ink:var(--sage-ink);
}
body.service-methodologies{
  --color-accent-bold:var(--teal-bold);
  --color-accent-soft:var(--teal-soft);
}
body.service-equipe{
  --color-accent-bold:var(--solar-bold);
  --color-accent-soft:var(--solar-soft); --color-accent-ink:var(--solar-ink);
}
body.service-references{
  --color-accent-bold:var(--slate-bold);
  --color-accent-soft:var(--slate-soft);
}


/* ============================================================================
   FOCUS / a11y
   ========================================================================== */

a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:2px solid var(--color-accent-bold);
  outline-offset:3px;
  border-radius:6px;
}


/* ============================================================================
   UTILITIES
   ========================================================================== */

.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;
}
.text-center{ text-align:center; }
.mt-0{ margin-top:0 !important; }


/* ============================================================================
   TEXT JUSTIFY — appliqué à tous les paragraphes / listes du contenu, avec
   exceptions pour les blocs explicitement centrés (sections-head, callouts,
   citations, hero centré, etc.).
   ========================================================================== */

main p,
main ul li,
main ol li{
  text-align:justify;
  text-align-last:start;
  /* Aucun mot coupé en fin de ligne, nulle part (demande d'Eric,
     commentaires de maquette : « ra-rement », « pré-sence »,
     « techno-logies »). La justification reste, la césure part. */
  hyphens:none;
  -webkit-hyphens:none;
}

/* Exceptions : contenus centrés ou décoratifs qui DOIVENT rester centrés */
.section-head p,
.section-head h2,
.callout p,
.callout__lead,
.dark-block__body,
.dark-block__title,
.tagline-quote p,
.banner-quote__text,
.banner-quote__eyebrow,
.hero__inner--centered p,
.hero__inner--centered .lead,
.hero__inner--centered .hero__subtitle,
.team-card__bio,
.spec-card__body,
.year-card__body,
.info-card__value,
.text-center,
.text-center p{
  text-align:center;
  text-align-last:auto;
}

/* Mobile : on relâche la justification — trop peu de caractères par ligne,
   les trous inter-mots deviennent disgracieux. */
@media (max-width:600px){
  main p,
  main ul li,
  main ol li{
    text-align:left;
  }
}


/* ============================================================================
   FADE-UP entrance animation
   ========================================================================== */

@media (prefers-reduced-motion:no-preference){
  .fade-in{
    animation:fade-up .7s var(--ease-out) both;
  }
  @keyframes fade-up{
    from{ opacity:0; transform:translateY(16px); }
    to{   opacity:1; transform:translateY(0); }
  }
  .delay-1{ animation-delay:.08s; }
  .delay-2{ animation-delay:.16s; }
  .delay-3{ animation-delay:.24s; }

  /* ============================================================================
     Scroll-reveal — variants ciblés, jamais sur du texte courant
     Le JS assigne UNE classe de motion par élément (reveal-up / -zoom / -fade /
     -left / -right) + éventuellement -slow / -fast pour la durée.
     ========================================================================== */
  [data-reveal]{
    opacity:0;
    transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
    will-change:opacity, transform;
  }
  .reveal-up        { transform:translateY(22px); }
  .reveal-zoom      { transform:scale(.96); }
  .reveal-fade      { transform:none; }
  .reveal-left      { transform:translateX(-22px); }
  .reveal-right     { transform:translateX(22px); }
  .reveal-slow      { transition-duration:.85s; }
  .reveal-fast      { transition-duration:.45s; }
  [data-reveal].is-visible{
    opacity:1;
    transform:none;
  }

  /* Stagger des grilles : 60 ms entre items, suffisant pour le rythme sans lourdeur */
  .grid > [data-reveal]:nth-child(2){ transition-delay:.06s; }
  .grid > [data-reveal]:nth-child(3){ transition-delay:.12s; }
  .grid > [data-reveal]:nth-child(4){ transition-delay:.18s; }
  .grid > [data-reveal]:nth-child(5){ transition-delay:.24s; }
  .grid > [data-reveal]:nth-child(6){ transition-delay:.30s; }

  /* Accordéon : items en cascade serrée */
  .accordion > [data-reveal]:nth-child(2){ transition-delay:.05s; }
  .accordion > [data-reveal]:nth-child(3){ transition-delay:.10s; }
  .accordion > [data-reveal]:nth-child(4){ transition-delay:.15s; }
  .accordion > [data-reveal]:nth-child(5){ transition-delay:.20s; }
  .accordion > [data-reveal]:nth-child(6){ transition-delay:.25s; }

  /* Logo grid : ondulation discrète (par paquets de 4 colonnes) */
  .logo-grid > [data-reveal]:nth-child(4n+2){ transition-delay:.04s; }
  .logo-grid > [data-reveal]:nth-child(4n+3){ transition-delay:.08s; }
  .logo-grid > [data-reveal]:nth-child(4n){   transition-delay:.12s; }
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; }
}


/* ============================================================================
   POLISH MOBILE — paddings, gaps, gabarits
   ========================================================================== */

@media (max-width:600px){
  .hero{ padding-top:48px; padding-bottom:48px; }
  .hero__inner{ gap:var(--space-5); }
  .hero__title::before{ width:64px; height:4px; margin-bottom:var(--space-3); }
  .hero__cta{ gap:10px; }

  .section-head{ margin-bottom:var(--space-6); }
  .section-head .eyebrow{ font-size:10px; letter-spacing:2px; }

  .card, .atout-card, .spec-card, .key-card, .year-card, .info-card{
    padding:var(--space-5);
  }
  .service-card__body{ padding:var(--space-4) var(--space-5) var(--space-5); }

  .callout{ margin-left:var(--space-4); margin-right:var(--space-4); padding:var(--space-7) var(--space-5); }
  .callout__lead{ font-size:1.2rem; }

  .dark-block{ padding:var(--space-7) var(--space-5); margin-left:var(--space-4); margin-right:var(--space-4); }
  .banner-quote{ padding:var(--space-6) var(--space-5); }
  .tagline-quote{ padding:var(--space-4) var(--space-3); }
  .tagline-quote p::before{ left:-16px; top:-4px; font-size:48px; }
  .tagline-quote p::after{ right:-16px; bottom:-16px; font-size:48px; }

  .accordion summary{ padding:var(--space-4) var(--space-4); font-size:var(--text-base); }
  .accordion__body{ padding:var(--space-3) var(--space-4) var(--space-5); }

  .site-footer{ padding:var(--space-6) 0 var(--space-4); }
  .site-footer__grid{ gap:var(--space-5); }
}


/* ============================================================================
   EFFETS DÉCO — micro-interactions supplémentaires
   ========================================================================== */

@media (prefers-reduced-motion:no-preference){
  /* Cards : ombre interne qui glisse au hover */
  .service-card, .atout-card, .spec-card, .key-card, .info-card, .year-card{
    will-change:transform;
  }


  /* Logos refs : leve doucement au hover */
  .logo-cell{ will-change:transform; }

  /* Sections : un séparateur dégradé fin entre sections */
  .section + .section::before{
    content:"";
    position:absolute;
    top:0; left:50%;
    width:120px; height:1px;
    background:linear-gradient(90deg, transparent, var(--color-neutral-300), transparent);
    transform:translateX(-50%);
  }

  /* Image hero : reflet brillant qui passe au load */
  .hero__image::before{
    content:"";
    position:absolute;
    top:0; left:-60%;
    width:40%; height:100%;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
    transform:skewX(-12deg);
    animation:hero-shine 2.4s var(--ease-out) .4s both;
    pointer-events:none;
    z-index:2;
  }
  @keyframes hero-shine{
    0%  { left:-60%; }
    100%{ left:160%; }
  }
}


/* ============================================================================
   A11Y — Skip link (accessibilité clavier / lecteur d'écran)
   Invisible tant que non focus, visible et net au tab.
   ========================================================================== */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:1000;
  background:var(--color-primary-700);
  color:#fff;
  padding:12px 20px;
  font-weight:700;
  border-radius:0 0 8px 0;
  text-decoration:none;
}
.skip-link:focus{
  left:0;
  outline:3px solid var(--color-warm);
  outline-offset:2px;
}

/* Cibles tactiles WCAG 2.2 AA — boutons à 48 px de haut minimum sur mobile.
   Bump invisible visuellement (padding interne plus généreux). */
@media (max-width:600px){
  .btn{
    min-height:48px;
    padding-top:14px;
    padding-bottom:14px;
  }
  .site-nav__link{
    min-height:48px;
    display:flex;
    align-items:center;
  }
}

/* RGPD — Bouton de consentement avant chargement de la carte Google.
   Style sobre, cohérent avec la charte. */
.contact-map .map-consent{
  width:100%;
  height:100%;
  min-height:420px;
  background:linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-neutral-100) 100%);
  border:1px dashed var(--color-neutral-300);
  border-radius:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  padding:32px;
  text-align:center;
  transition:background-color .2s var(--ease-base), border-color .2s var(--ease-base);
}
.contact-map .map-consent:hover,
.contact-map .map-consent:focus-visible{
  background:linear-gradient(135deg, var(--color-primary-50) 0%, #fff 100%);
  border-color:var(--color-primary-600);
}
.map-consent__title{
  font-family:var(--font-display);
  font-size:1.125rem;
  font-weight:700;
  color:var(--color-primary-700);
}
.map-consent__sub{
  font-size:var(--text-sm);
  color:var(--color-neutral-700);
}
.map-consent__hint{
  font-size:12px;
  color:var(--color-neutral-600);
  max-width:340px;
  line-height:1.45;
  margin-top:8px;
}
@media (max-width:900px){
  .contact-map .map-consent{ min-height:280px; }
}


/* ============================================================================
   MODERNISATION 2026 — couche finale (12/08).
   L'identité v1 reste (bleu logo, accents par page, cartes photos) ; cette
   couche ne fait que raffiner : typo display plus ample et resserrée, rayons
   et ombres adoucis, survols plus vivants, header verre dépoli, et UN geste
   signature discret : le halo du logo iD en filigrane du hero — l'anneau du
   « i », qui est aussi le ☉ de Révélation.
   ========================================================================== */
:root{
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --shadow-lg:0 6px 14px rgba(27,25,23,.05), 0 22px 52px rgba(27,25,23,.09);
  --shadow-xl:0 10px 22px rgba(27,25,23,.06), 0 40px 88px rgba(27,25,23,.12);
}

/* Typo display : plus grand, plus serré — la modernité est dans la typo. */
.hero__title{
  font-size:clamp(38px, 4.8vw, 62px);
  line-height:1.07;
  letter-spacing:-.022em;
}
.section-head h2, h2{ letter-spacing:-.018em; }
.lead{ font-size:clamp(17px, 1.35vw, 19px); line-height:1.7; }

/* Le halo signature, en filigrane du hero — jamais au-dessus du contenu. */
.hero{ position:relative; overflow:hidden; }
.hero::after{ content:none; }
.hero__inner{ position:relative; z-index:1; }
@media (max-width:900px){
  .hero::after{ width:300px; height:300px; border-width:40px; right:-130px; top:-130px; }
}

/* Header : verre dépoli au lieu du bandeau opaque. */
.site-header{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--color-primary-700) 88%, transparent);
}

/* Boutons : la flèche qui glisse — le micro-détail qui fait 2026. */
.btn::after{ content:"→"; font-weight:800; margin-left:2px; transition:transform .2s var(--ease-base); }
.btn:hover::after{ transform:translateX(4px); }
.btn:hover{ transform:translateY(-2px); }

/* Cartes : envol plus franc, ombre plus profonde, photo qui respire. */
.service-card, .spec-card, .atout-card, .key-card, .card, .team-card, .year-card, .info-card{
  transition:transform .22s var(--ease-base), box-shadow .22s var(--ease-base), border-color .22s var(--ease-base);
}
.service-card:hover, .spec-card:hover, .atout-card:hover, .key-card:hover, .card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-xl);
}
.service-card__media{ overflow:hidden; }
.service-card__media img{ transition:transform .5s var(--ease-out); }
.service-card:hover .service-card__media img{ transform:scale(1.045); }

/* Images éditoriales : rayon généreux + ombre douce. */
.hero__image img, .alt-block__image img{ border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); }

/* Sections : un souffle de plus entre les blocs. */
.section{ padding-block:clamp(64px, 8vw, 112px); }
.section--tight{ padding-block:clamp(36px, 5vw, 64px); }

/* Focus dessiné, même modernisé. */
:focus-visible{ outline:3px solid var(--color-warm); outline-offset:3px; border-radius:6px; }

/* Les citations Fraunces gagnent un corps. */
.banner-quote__text, .tagline-quote p{ font-size:clamp(1.3rem, 2.4vw, 1.75rem); }

@media (prefers-reduced-motion: reduce){
  .btn, .btn::after, .service-card, .spec-card, .atout-card, .key-card, .card,
  .team-card, .year-card, .info-card, .service-card__media img{ transition:none; }
  .service-card:hover, .spec-card:hover, .atout-card:hover, .key-card:hover, .card:hover{ transform:none; }
}


/* ============================================================================
   PASSE « WEBDESIGN 2026 » — 12/08/2026
   Demandes de Lionel : hero qui tient sur un écran (il débordait de 300 px),
   image plus généreuse, animations modernes, blancs verticaux maîtrisés,
   une couleur VRAIMENT distincte par service, blocs sombres allégés,
   sous-menus qui ne cassent plus, citations et équipe repensées.
   ========================================================================== */

/* ── 1 · HERO D'ACCUEIL : tient dans l'écran, image généreuse ─────────── */
.hero--full{
  /* --header-h est mesurée en direct par site.js : la hauteur du header
     change (logo, scroll, mobile), une constante en dur débordait. */
  min-height:calc(100svh - var(--header-h, 92px));
  display:flex; align-items:center;
  padding-block:clamp(24px, 4vh, 56px);
  position:relative;
}
.hero--full .hero__inner{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.06fr);
  gap:clamp(28px, 4vw, 64px);
  align-items:center;
  width:100%;
}
/* Le titre se cale sur la HAUTEUR d'écran autant que sur la largeur :
   c'est ce qui empêche le débordement sur un portable 900 px. */
.hero--full .hero__title{
  font-size:clamp(30px, 2.1vw + 2.1vh, 52px);
  line-height:1.08;
  margin-bottom:clamp(12px, 1.8vh, 22px);
}
.hero--full .hero__title span{ display:block; }
.hero--full .eyebrow{ margin-bottom:clamp(10px, 1.4vh, 18px); }
.hero--full .lead{
  font-size:clamp(15px, .55vw + .55vh, 18px);
  line-height:1.62; max-width:52ch;
  margin-bottom:clamp(16px, 2.4vh, 30px);
}
.hero--full .hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.hero--full .hero__image{ position:relative; }
.hero--full .hero__image img{
  width:100%;
  height:clamp(300px, 62svh, 620px);   /* l'image occupe vraiment la place */
  object-fit:cover;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
}

/* Indicateur de défilement — discret, il disparaît dès qu'on scrolle. */
.hero__scroll{
  position:absolute; left:50%; bottom:18px; translate:-50% 0;
  width:26px; height:42px; border-radius:999px;
  border:2px solid color-mix(in srgb, var(--color-neutral-900) 28%, transparent);
  display:grid; justify-items:center; padding-top:8px;
}
.hero__scroll span{
  width:3px; height:8px; border-radius:2px;
  background:var(--color-accent-bold);
  animation:scroll-hint 1.8s var(--ease-base) infinite;
}
@keyframes scroll-hint{
  0%{ opacity:0; transform:translateY(0); }
  35%{ opacity:1; }
  100%{ opacity:0; transform:translateY(12px); }
}
@media (max-height:720px){ .hero__scroll{ display:none; } }

/* ── 2 · ANIMATION 2026 : révélation par masque, ligne à ligne ────────── */
.reveal-line{
  display:block;
  animation:line-in .9s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--i, 0) * 90ms + 80ms);
}
@keyframes line-in{
  from{ opacity:0; transform:translateY(18px); clip-path:inset(0 0 100% 0); }
  to{ opacity:1; transform:none; clip-path:inset(0 0 -10% 0); }
}
/* Parallaxe très douce de l'image, pilotée par la souris (site.js). */
.hero--full .hero__image img{
  transform:translate3d(calc(var(--px, 0) * 7px), calc(var(--py, 0) * 7px), 0) scale(1.02);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}

/* ── 3 · HERO DES PAGES INTERNES : nettement plus court ───────────────── */
.hero:not(.hero--full){
  padding-block:clamp(40px, 6vh, 76px) clamp(36px, 5vw, 64px);
}
.hero:not(.hero--full) .hero__title{ font-size:clamp(30px, 3.4vw, 48px); }
.hero:not(.hero--full) .hero__image img{ max-height:min(46svh, 420px); object-fit:cover; width:100%; }

/* ── 4 · RYTHME VERTICAL : un seul souffle entre deux blocs ───────────── */
.section{ padding-block:clamp(52px, 6.5vw, 92px); }
.section--tight{ padding-block:clamp(32px, 4vw, 52px); }
/* Deux sections qui se suivent ne cumulent plus leurs marges. */
.section + .section{ padding-top:0; }
.section + .callout, .section + .tagline-quote{ margin-top:clamp(16px, 2.5vw, 32px); }
.banner-quote{ margin-block:clamp(28px, 4vw, 52px); }
.dark-block{ margin-block:clamp(28px, 4vw, 52px); }

/* ── 5 · SOUS-MENU : plus jamais de libellé qui casse ─────────────────── */
.site-nav__submenu{ min-width:max-content; }
.site-nav__submenu a{ white-space:nowrap; }
@media (max-width:940px){
  .site-nav__submenu{ min-width:0; }
  .site-nav__submenu a{ white-space:normal; }
}

/* ── 6 · UNE COULEUR PAR SERVICE (5 accents distincts) ────────────────── */
body.service-leadership{ --color-accent-bold:var(--lead-bold);  --color-accent-soft:var(--lead-soft); --color-accent-ink:var(--lead-ink); }
body.service-revelation{ --color-accent-bold:var(--sage-bold);  --color-accent-soft:var(--sage-soft); --color-accent-ink:var(--sage-ink); }
body.service-ressentis { --color-accent-bold:var(--sens-bold);  --color-accent-soft:var(--sens-soft); --color-accent-ink:var(--sens-ink); }
.service-card.is-leadership{ --card-accent:var(--lead-bold); --card-accent-soft:var(--lead-soft); }
.service-card.is-revelation{ --card-accent:var(--sage-bold); --card-accent-soft:var(--sage-soft); }
.service-card.is-ressentis { --card-accent:var(--sens-bold); --card-accent-soft:var(--sens-soft); }

/* ── 7 · CITATIONS : la couleur suit la page, plus de rouge en dur ────── */
.banner-quote{ border-left-color:var(--color-accent-bold) !important; }
.banner-quote__eyebrow{ color:var(--color-accent-bold) !important; }

/* ── 8 · BLOCS SOMBRES : allégés, plus modernes ───────────────────────── */
.dark-block{
  background:
    radial-gradient(120% 130% at 12% 0%,
      color-mix(in srgb, var(--color-accent-bold) 22%, transparent) 0%, transparent 58%),
    linear-gradient(150deg, #101A4D 0%, #0B1236 100%);
  padding:clamp(40px, 5vw, 68px) clamp(28px, 5vw, 64px);
  position:relative; overflow:hidden;
  box-shadow:0 24px 60px rgba(11,18,54,.22);
}
.dark-block::after{
  content:''; position:absolute; right:-90px; top:-120px;
  width:320px; height:320px; border-radius:50%;
  border:44px solid color-mix(in srgb, var(--color-accent-bold) 26%, transparent);
  pointer-events:none;
}
.dark-block__title{ position:relative; }
.dark-block__body{ position:relative; opacity:.9; max-width:70ch; margin-inline:auto; }
.callout{ padding-block:clamp(44px, 6vw, 76px); }

/* ── 9 · ÉQUIPE : disposition dynamique, cartes vivantes ──────────────── */
.team-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:clamp(16px, 2.2vw, 26px);
}
.team-card{
  text-align:left; padding:0; overflow:hidden;
  border-radius:var(--radius-xl);
  border:1px solid var(--color-neutral-200); background:#fff;
}
.team-card__photo{ margin:0; position:relative; overflow:hidden; }
.team-card__photo img{
  width:100%; height:clamp(230px, 26vw, 300px); object-fit:cover;
  border-radius:0; border:0; margin:0;
  transition:transform .55s var(--ease-out), filter .4s var(--ease-base);
  filter:grayscale(.25);
}
.team-card:hover .team-card__photo img{ transform:scale(1.05); filter:none; }
.team-card__photo::after{
  content:''; position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(to top, rgba(11,18,54,.55), transparent);
  opacity:0; transition:opacity .35s var(--ease-base);
}
.team-card:hover .team-card__photo::after{ opacity:1; }
.team-card__name{ padding:18px 22px 0; margin:0; font-size:1.08rem; }
.team-card__role{ padding:2px 22px 0; color:var(--color-accent-bold); font-weight:700; font-size:.86rem; }
.team-card__bio{ padding:10px 22px 22px; margin:0; font-size:.94rem; color:var(--color-neutral-600); }

@media (prefers-reduced-motion: reduce){
  .reveal-line{ animation:none; }
  .hero__scroll span{ animation:none; }
  .hero--full .hero__image img{ transform:none; transition:none; }
  .team-card__photo img{ transition:none; }
}


/* ============================================================================
   HEADER 2026 — barre claire flottante (remplace le bandeau bleu massif)
   Le logo est nativement BLEU : il était forcé en blanc par un filtre pour
   tenir sur le bandeau. Sur fond clair, on le rend à sa vraie couleur — c'est
   lui qui porte l'identité, plus un aplat de 124 px de haut.
   ========================================================================== */
:root{ --header-height:74px; }

.site-header{
  position:sticky; top:0; z-index:70;
  background:transparent;
  box-shadow:none;
  padding:10px 0;
  transition:padding .3s var(--ease-base);
}
.site-header::before{ display:none; }

.site-header__inner{
  max-width:1280px;
  padding:8px 10px 8px 18px;
  border-radius:999px;
  background:color-mix(in srgb, var(--color-neutral-0) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.6);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:0 1px 2px rgba(27,25,23,.05), 0 10px 30px rgba(27,25,23,.07);
  border:1px solid color-mix(in srgb, var(--color-neutral-200) 70%, transparent);
  transition:box-shadow .3s var(--ease-base), background .3s var(--ease-base);
}
.site-header.is-scrolled .site-header__inner{
  background:color-mix(in srgb, var(--color-neutral-0) 94%, transparent);
  box-shadow:0 2px 6px rgba(27,25,23,.06), 0 14px 40px rgba(27,25,23,.10);
}
.site-header.is-scrolled{ padding:6px 0; }

/* Le logo retrouve son bleu. */
.site-logo img{ filter:none; max-height:52px; }
@media (max-width:900px){ .site-logo img{ max-height:44px; } }

/* Liens en encre, pastille douce au survol — plus de blanc sur bleu. */
.site-nav__link{
  color:var(--color-neutral-900);
  padding:9px 14px;
  border-radius:999px;
  font-weight:600;
  transition:background .2s var(--ease-base), color .2s var(--ease-base);
}
.site-nav__link:hover{ background:var(--color-primary-50); color:var(--color-primary-700); }
.site-nav__link.is-active{ color:var(--color-primary-600); }
.site-nav__link.is-active::after{ background:var(--color-accent-bold); }
.site-nav__item--has-children > .site-nav__link::after{ color:var(--color-neutral-400); }

/* Les trois traits du menu mobile, en encre. */
.site-nav__toggle span{ background:var(--color-neutral-900); }

@media (max-width:940px){
  .site-header__inner{ border-radius:22px; }
  .site-nav{ background:#fff; }
  .site-nav__list{ gap:2px; }
}


/* ── Correctif : le dégradé de texte du H1 se peignait sur le <h1>, mais le
   texte vit maintenant dans des <span> lignes — résultat : titre invisible.
   On repeint chaque ligne, et sur les pages internes on garde le dégradé. */
.hero--full .hero__title{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:var(--color-neutral-900);
}
/* Le titre de l'accueil est en ENCRE PLEINE — c'est un choix assumé plus
   bas dans cette feuille (« un seul mot mis en couleur »). On se contente
   donc de garantir qu'il est peint, sans dégradé. */
.hero--full .hero__title span{
  color:var(--color-neutral-900);
  -webkit-text-fill-color:currentColor;
}

/* ── Menu : chaque service porte SA couleur au survol ─────────────────── */
.site-nav__submenu a{
  border-left:3px solid transparent;
  transition:background .18s var(--ease-base), color .18s var(--ease-base), border-color .18s var(--ease-base);
}
.site-nav__submenu a:hover,
.site-nav__submenu a:focus-visible,
.site-nav__submenu a.is-active{
  background:var(--lien-soft, var(--color-primary-50));
  color:var(--lien-bold, var(--color-primary-700));
  border-left-color:var(--lien-bold, var(--color-primary-600));
}
.site-nav__submenu a[href*="innovation-manageriale"]{ --lien-bold:var(--terra-bold);  --lien-soft:var(--terra-soft); }
.site-nav__submenu a[href*="leadership-incarne"]   { --lien-bold:var(--lead-bold);   --lien-soft:var(--lead-soft); }
.site-nav__submenu a[href*="formations"]           { --lien-bold:var(--indigo-bold); --lien-soft:var(--indigo-soft); }
.site-nav__submenu a[href*="methode-revelation"]   { --lien-bold:var(--sage-bold);   --lien-soft:var(--sage-soft); }
.site-nav__submenu a[href*="structure-des-ressentis"]{ --lien-bold:var(--sens-bold); --lien-soft:var(--sens-soft); }
.site-nav__submenu a[href*="methodologies"]        { --lien-bold:var(--teal-bold);   --lien-soft:var(--teal-soft); }
.site-nav__submenu a[href*="lequipe"]              { --lien-bold:var(--solar-bold);  --lien-soft:var(--solar-soft); }


/* ============================================================================
   AFFINAGE DU HERO + ALLÈGEMENT DU BLEU (retours de Lionel, 12/08)
   ========================================================================== */

/* 1 · Le titre : plus de dégradé par ligne (la 2e ligne virait au bleu en
   plein milieu de la phrase). Encre pleine, et UN SEUL mot mis en couleur
   — c'est plus net, plus moderne, et ça guide l'œil. */
.hero--full .hero__title span{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:var(--color-neutral-900);
}
.hero--full .hero__title em{
  font-style:normal;
  color:var(--color-primary-600);
}
/* Le petit trait flottant sous l'œil-de-section n'a plus lieu d'être. */
.hero--full .hero__title::before{ display:none; }
.hero--full .eyebrow{ margin-bottom:clamp(12px, 1.8vh, 22px); }

/* 2 · Les deux boutons : côte à côte, plus fins, hiérarchie claire.
   Le second devient un lien fléché — deux pilules pleines, c'était lourd. */
/* Les deux appels tiennent sur UNE ligne dans la colonne de 496 px : en rendant
   son contour au bouton fantôme (demande d'Eric), la rangée débordait de 30 px
   et passait à deux lignes. On resserre les deux pilules de la même façon. */
.hero--full .hero__cta{ align-items:center; gap:8px 14px; }
.hero--full .hero__cta .btn--primary{
  padding:13px 18px;
  font-size:.92rem;
  box-shadow:0 6px 18px rgba(0,16,184,.18);
}
/* Eric, deux fois dans ses commentaires (version ordi ET version smartphone) :
   « entourer le bouton NOTRE METHODE pour mieux le voir ». Il était réduit ici
   à un lien fléché sans contour — invisible à côté de la pilule pleine. On lui
   rend un contour franc sans en refaire une deuxième pilule pleine. */
.hero--full .hero__cta .btn--ghost{
  background:none; padding:13px 18px;
  border:2px solid var(--color-neutral-400);
  color:var(--color-neutral-900); box-shadow:none;
}
/* Entre 900 et 1180 px la colonne du héros descend à ~450 px : les deux pilules
   ne tiennent plus côte à côte. Plutôt qu'un retour à la ligne subi, on empile
   franchement, à largeur égale. */
@media (min-width:901px) and (max-width:1180px){
  .hero--full .hero__cta{ flex-direction:column; align-items:stretch; gap:10px; }
  .hero--full .hero__cta .btn{ width:100%; max-width:300px; justify-content:center; }
}
.hero--full .hero__cta .btn--ghost::after{ transition:transform .2s var(--ease-base); }
.hero--full .hero__cta .btn--ghost:hover{
  transform:none; color:var(--color-primary-600);
  border-color:var(--color-primary-600);
  background:var(--color-neutral-50);
}
.hero--full .hero__cta .btn--ghost:hover::after{ transform:translateX(4px); }

/* 3 · Le bleu en aplat total est lourd : on l'allège partout où il couvre
   de grandes surfaces — dégradé plus profond, moins saturé, et respiration. */
.callout--primary, .callout--solar, .callout--indigo, .callout--sage, .callout{
  background:
    radial-gradient(110% 130% at 15% 0%,
      color-mix(in srgb, var(--color-accent-bold) 26%, transparent) 0%, transparent 60%),
    linear-gradient(150deg, #16215C 0%, #0C1233 100%);
}
.btn--primary{
  background:var(--color-primary-600);
  box-shadow:0 6px 18px rgba(0,16,184,.18);
}
.btn--primary:hover{ background:var(--color-primary-700); }


/* ── LOGO : lockup horizontal (symbole + nom à côté) ──────────────────── */
.site-header__inner{ padding-left:26px; }
.site-logo{ display:inline-flex; align-items:center; gap:12px; }
.site-logo__mark{
  height:40px; width:auto; filter:none;
  transition:transform .3s var(--ease-out);
}
.site-logo:hover .site-logo__mark{ transform:rotate(-6deg) scale(1.05); }
.site-logo__word{
  display:inline-flex; align-items:center; gap:.36em;
  font-family:var(--font-display);
  font-size:.98rem; font-weight:600; letter-spacing:.18em;
  color:var(--color-neutral-900); text-transform:uppercase;
  white-space:nowrap;
}
.site-logo__word b{ font-weight:800; color:var(--color-primary-600); letter-spacing:.12em; }
/* Le point de liaison a été retiré le 20/08 : Eric veut lire
   « ID SOLUTION », sans rien entre les deux mots. */
@media (max-width:600px){
  .site-header__inner{ padding-left:18px; }
  .site-logo__mark{ height:34px; }
  .site-logo__word{ font-size:.82rem; letter-spacing:.14em; }
}
/* Le nom ne disparaît plus sur les petits téléphones : Eric le veut
   « en plus du logo » sur la version smartphone. Il rétrécit, il reste. */
@media (max-width:380px){
  .site-logo__word{ font-size:.72rem; letter-spacing:.08em; gap:.3em; }
  .site-logo__mark{ height:30px; }
  .site-header__inner{ padding-left:12px; }
}


/* ============================================================================
   PASSE « IMPACT » — hero percutant, sections vivantes, footer moderne
   (retours de Lionel, 12/08 : « plus wow », « gros bloc CTA à revoir »,
   « footer pareil », dans l'esprit sur-mesure du studio)
   ========================================================================== */

/* ── HERO : plus massif, un geste fort ────────────────────────────────── */
.hero--full .eyebrow{
  padding:7px 14px; border-radius:999px;
  background:color-mix(in srgb, var(--color-primary-50) 80%, transparent);
  border:1px solid var(--color-primary-100);
  color:var(--color-primary-700);
  font-size:.72rem;
}
.hero--full .eyebrow::before{ content:none; }
.hero--full .hero__title{
  font-size:clamp(34px, 2.6vw + 2.6vh, 62px);
  line-height:1.04;
  letter-spacing:-.028em;
  font-weight:800;
}
/* Le mot-clef : souligné d'un trait vivant qui se déploie à l'arrivée. */
.hero--full .hero__title em{
  position:relative; font-style:normal; color:var(--color-primary-600); white-space:nowrap;
}


/* Les preuves, intégrées AU hero — des chiffres qui montent à l'arrivée. */
.hero__proof{
  display:flex; gap:clamp(20px, 3vw, 44px);
  margin-top:clamp(20px, 3.4vh, 40px);
  padding-top:clamp(14px, 2vh, 22px);
  border-top:1px solid var(--color-neutral-200);
}
.hero__proof b{
  display:block; font-family:var(--font-display);
  font-size:clamp(1.5rem, 1.4vw + 1vh, 2.1rem); font-weight:800;
  color:var(--color-primary-600); line-height:1;
}
.hero__proof b i{ font-style:normal; color:var(--color-accent-bold); }
.hero__proof span{ font-size:.82rem; color:var(--color-neutral-600); }

/* L'image en ARCHE : le passage — la transformation. Le geste signature. */
.hero__image--arch img{
  border-radius:calc(min(46vw, 300px)) calc(min(46vw, 300px)) var(--radius-xl) var(--radius-xl) !important;
}

.hero__image--arch{ position:relative; }

/* ── STATEMENT : la conviction en très grand (remplace l'encadré) ─────── */
.statement{
  padding-block:clamp(72px, 10vw, 130px);
  text-align:center; position:relative; overflow:hidden;
}

.statement__kicker{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--color-accent-bold); margin-bottom:22px;
}
.statement__text{
  font-family:var(--font-quote); font-style:italic;
  font-size:clamp(1.7rem, 3.6vw, 3rem); line-height:1.3;
  color:var(--color-neutral-900);
  max-width:22ch; margin:0 auto 18px;
}
.statement__text em{ font-style:italic; color:var(--color-primary-600); }
.statement__sub{ max-width:64ch; margin:0 auto 26px; color:var(--color-neutral-600); }
.statement__chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.statement__chips span{
  padding:9px 18px; border-radius:999px;
  border:1px solid var(--color-neutral-200); background:#fff;
  font-weight:600; font-size:.88rem; color:var(--color-neutral-700);
  transition:transform .2s var(--ease-base), border-color .2s, color .2s;
}
.statement__chips span:hover{
  transform:translateY(-2px);
  border-color:var(--color-primary-300); color:var(--color-primary-700);
}

/* ── CTA FINAL : une carte, plus jamais l'aplat pleine largeur ────────── */
.cta-card{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px;
  background:
    radial-gradient(120% 160% at 90% -20%, color-mix(in srgb, var(--color-accent-bold) 14%, transparent) 0%, transparent 55%),
    linear-gradient(140deg, #101A4D 0%, #0C1233 100%);
  border-radius:28px;
  padding:clamp(36px, 5vw, 64px) clamp(28px, 5vw, 64px);
  color:#fff; position:relative; overflow:hidden;
  box-shadow:0 30px 70px rgba(12,18,51,.25);
}
.cta-card::before{
  content:""; position:absolute; right:-70px; bottom:-110px;
  width:280px; height:280px; border-radius:50%;
  border:38px solid color-mix(in srgb, var(--color-accent-bold) 30%, transparent);
  pointer-events:none;
}
.cta-card h2{
  color:#fff; margin:0 0 6px;
  font-size:clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing:-.02em;
}
.cta-card p{ margin:0; color:rgba(255,255,255,.85); max-width:46ch; }
.cta-card .btn--light{ position:relative; }

/* ── FOOTER : sombre profond, arrondi, la signature en grand ──────────── */
.site-footer{
  background:
    radial-gradient(110% 120% at 85% 0%, color-mix(in srgb, var(--color-primary-500) 22%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, #101A4D 0%, #0A0F2E 100%);
  border-radius:32px 32px 0 0;
  margin-top:clamp(28px, 4vw, 56px);
  position:relative; overflow:hidden;
}
.site-footer::before{
  content:""; position:absolute; left:-90px; bottom:-140px;
  width:340px; height:340px; border-radius:50%;
  border:46px solid rgba(255,255,255,.05);
  pointer-events:none;
}
.site-footer__lead{
  font-family:var(--font-quote); font-style:italic;
  font-size:1.15rem; line-height:1.5; opacity:.94;
}
.site-footer h3{
  color:var(--color-warm);
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
}
.site-footer a{ transition:color .18s var(--ease-base), padding-left .18s var(--ease-base); }

@media (prefers-reduced-motion: reduce){
  .hero--full .hero__title em::after{ animation:none; transform:scaleX(1); }
  .statement__chips span{ transition:none; }
}


/* ── Citation plus LARGE + affinages de la suite de page (12/08) ──────── */
.statement__text{ max-width:30ch; font-size:clamp(1.8rem, 4vw, 3.3rem); }
.statement__sub{ max-width:72ch; font-size:1.02rem; line-height:1.7; }
.statement{ padding-block:clamp(64px, 8vw, 108px); }

/* En-tête de section éditoriale : titre à gauche, complément à droite. */
.section-head--split{
  display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
  gap:24px 56px; align-items:end; text-align:left;
  max-width:none; margin-bottom:clamp(28px, 4vw, 44px);
}
.section-head--split h2{ margin-bottom:0; }
.section-head--split p{ margin:0 0 6px; }
@media (max-width:860px){ .section-head--split{ grid-template-columns:1fr; align-items:start; } }

/* Cartes services : la pastille du service en couleur, l'œil s'y retrouve. */
.service-card__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
}
.service-card__eyebrow::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--card-accent);
}


/* ── HERO apaisé (retours 12/08) : titre plus raisonnable, image entière
   en rectangle doux, fond PROPRE — plus d'orbes ni de voile bleu. ─────── */
.hero--full{ background:#fff; }
.hero--full::before, .hero--full::after{ content:none; }
.hero--full .hero__title{
  font-size:clamp(30px, 1.75vw + 1.75vh, 44px);
  letter-spacing:-.02em;
}
.hero__image--arch img{
  border-radius:var(--radius-xl) !important;   /* fini l'arche qui coupe */
  height:clamp(300px, 56svh, 560px);
}


/* ── ŒIL-DE-SECTION : la pastille arrondie partout, sur UNE ligne ─────── */
/* La pastille ne dépend plus de color-mix() (retour d'Edge, 27/08 : elle
   apparaissait blanche). Trois valeurs mélangées à la volée, c'est trois
   occasions de ne rien obtenir sur un navigateur qui ignore la fonction —
   la pastille perdait alors son fond ET son contour, donc son existence.
   On prend les jetons de la page directement : même rendu, aucune
   dépendance. */
.eyebrow, .statement__kicker{
  display:inline-flex; align-items:center;
  padding:7px 16px; border-radius:999px;
  background:var(--color-accent-soft);
  border:1px solid var(--color-accent-bold);
  color:var(--color-accent-bold);
  font-size:.7rem; font-weight:700;
  letter-spacing:.07em;            /* resserré : une ligne, pas deux */
  text-transform:uppercase;
  white-space:nowrap;              /* jamais de pastille sur deux lignes */
  max-width:100%;
  margin-bottom:16px;
}
.eyebrow::before{ content:none; }
.section-head .eyebrow{ margin-bottom:14px; }
@media (max-width:640px){
  .eyebrow, .statement__kicker{ white-space:normal; line-height:1.5; border-radius:18px; }
}


/* ── Retours 12/08 (soir) : alignements + effet des chips ─────────────── */

/* 1 · En-tête services : TOUT le texte à gauche, empilé. */
.section-head--split{
  display:block; text-align:left; max-width:none;
}
.section-head--split h2{ max-width:26ch; margin-bottom:12px; }
.section-head--split p{ max-width:56ch; margin:0; }

/* 2 · La pastille du hero : UNE ligne, quelle que soit la largeur. */
.hero--full .eyebrow{
  font-size:clamp(.56rem, .62vw, .7rem);
  letter-spacing:.05em;
  white-space:nowrap;
}

/* 3 · Le statement s'aligne comme les services : à gauche. */
.statement--gauche{ text-align:left; }
.statement--gauche .statement__text{ margin-left:0; max-width:24ch; }
.statement--gauche .statement__sub{ margin-left:0; }
.statement--gauche .statement__chips{ justify-content:flex-start; }

/* 4 · Les chips : entrée en cascade + couleur propre au survol. */
.statement__chips span{ transition-delay:calc(var(--n, 0) * 70ms); }
.statement__chips span:nth-child(1){ --n:0; --chip:var(--solar-bold);  --chip-soft:var(--solar-soft); }
.statement__chips span:nth-child(2){ --n:1; --chip:var(--terra-bold);  --chip-soft:var(--terra-soft); }
.statement__chips span:nth-child(3){ --n:2; --chip:var(--sens-bold);   --chip-soft:var(--sens-soft); }
.statement__chips span:nth-child(4){ --n:3; --chip:var(--indigo-bold); --chip-soft:var(--indigo-soft); }
.statement__chips span:hover{
  transform:translateY(-3px) rotate(-.5deg);
  border-color:var(--chip); color:var(--chip); background:var(--chip-soft);
  box-shadow:0 8px 20px color-mix(in srgb, var(--chip) 22%, transparent);
  transition-delay:0ms;
}


/* ── Retours 12/08 (suite) : plus de cercles décoratifs, hero aéré ────── */

/* 1 · Les anneaux dans la carte CTA et le footer : retirés. */
.cta-card::before, .site-footer::before, .dark-block::after,
.tagline-quote::before{ content:none; }

/* 2 · Le hero respire : la réduction du titre l'avait tassé. */
.hero--full .hero__title{
  font-size:clamp(32px, 2vw + 2vh, 48px);
  line-height:1.1;
  margin-bottom:clamp(18px, 2.6vh, 28px);
}
.hero--full .eyebrow{ margin-bottom:clamp(16px, 2.4vh, 26px); }
.hero--full .lead{
  font-size:clamp(15.5px, .6vw + .6vh, 18px);
  line-height:1.75;
  max-width:50ch;
  margin-bottom:clamp(22px, 3.4vh, 36px);
}
.hero--full .hero__inner{ gap:clamp(36px, 5vw, 80px); }


/* ── Statement pleine largeur (retour 12/08) ──────────────────────────── */
.statement--gauche .statement__text{ max-width:none; }
.statement--gauche .statement__sub{ max-width:none; }


/* ── MARQUEE des 4 domaines : défilement continu, plein écran ─────────── */
.statement--gauche{ padding-bottom:0; }
.marquee{
  overflow:hidden; padding:clamp(28px, 4vw, 44px) 0;
  margin-top:clamp(8px, 2vw, 20px);
  border-top:1px solid var(--color-neutral-200);
  border-bottom:1px solid var(--color-neutral-200);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__piste{
  display:inline-flex; align-items:center; gap:clamp(28px, 4vw, 56px);
  white-space:nowrap; width:max-content;
  animation:defile 36s linear infinite;
}
.marquee:hover .marquee__piste{ animation-play-state:paused; }
.marquee__piste span{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.5rem, 3vw, 2.6rem);
  color:var(--color-neutral-900); letter-spacing:-.02em;
}
.marquee__piste span:nth-of-type(odd){ color:var(--color-primary-600); }
.marquee__piste i{
  font-style:normal; font-size:clamp(1rem, 1.8vw, 1.5rem);
  color:var(--color-accent-bold); opacity:.75;
}
@keyframes defile{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee__piste{ animation:none; }
  .marquee{ mask-image:none; -webkit-mask-image:none; }
}

/* ── En-tête services : poids mêlés, tout à gauche ────────────────────── */
.section-head--edito{ text-align:left; max-width:none; margin-bottom:clamp(28px, 4vw, 44px); }
.section-head--edito h2{
  font-size:clamp(1.7rem, 2.6vw, 2.5rem);
  line-height:1.22; letter-spacing:-.02em;
  max-width:34ch; margin-bottom:14px;
}
.section-head--edito h2 strong{ font-weight:800; color:var(--color-primary-600); }
.section-head--edito h2 span{ font-weight:600; color:var(--color-neutral-900); }
.section-head--edito p{ max-width:58ch; margin:0; color:var(--color-neutral-600); }


/* ── Derniers retours 12/08 : footer + statement recentré ─────────────── */

/* 1 · Footer : la petite barre bleue sous les titres de colonnes jurait
   sur le bleu foncé — un trait chaud discret à la place. */
.site-footer__col h3::after{
  background:var(--color-warm);
  opacity:.85;
  width:26px;
}

/* 2 · Le statement revient centré : citation, phrase, et le défilé passe
   en pleine largeur naturellement. */
.statement--gauche{ text-align:center; }
.statement--gauche .statement__text{ margin-inline:auto; }
.statement--gauche .statement__sub{ margin-inline:auto; max-width:78ch; }


/* ── Le défilé en CAPSULES (retour 12/08 : « les capsules mais défilant ») */
.marquee{ border:0; padding:clamp(18px, 2.6vw, 30px) 0; mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__piste{ gap:14px; animation-duration:30s; }
.marquee__piste i{ display:none; }
.marquee__piste span{
  font-family:var(--font-body); font-weight:600;
  font-size:.92rem; letter-spacing:0; color:var(--color-neutral-700);
  padding:10px 20px; border-radius:999px;
  border:1px solid var(--color-neutral-200); background:#fff;
}
.marquee__piste span:nth-of-type(odd){ color:var(--color-neutral-700); }
.marquee__piste span:nth-of-type(4n+1){ border-color:color-mix(in srgb, var(--solar-bold) 45%, transparent);  color:var(--solar-bold);  background:var(--solar-soft); }
.marquee__piste span:nth-of-type(4n+2){ border-color:color-mix(in srgb, var(--terra-bold) 45%, transparent);  color:var(--terra-bold);  background:var(--terra-soft); }
.marquee__piste span:nth-of-type(4n+3){ border-color:color-mix(in srgb, var(--sens-bold) 45%, transparent);   color:var(--sens-bold);   background:var(--sens-soft); }
.marquee__piste span:nth-of-type(4n+4){ border-color:color-mix(in srgb, var(--indigo-bold) 45%, transparent); color:var(--indigo-bold); background:var(--indigo-soft); }


/* ── En-tête services : titre à GAUCHE, complément à DROITE, même hauteur */
.section-head--edito{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
  gap:20px 64px;
  align-items:end;
}
.section-head--edito h2{ margin-bottom:0; }
.section-head--edito p{ margin:0 0 6px; text-align:left; }
@media (max-width:860px){
  .section-head--edito{ grid-template-columns:1fr; align-items:start; }
}


/* ── Retours 12/08 (fin de soirée) ────────────────────────────────────── */
/* 1 · Pastille du hero : un cran plus lisible. */
.hero--full .eyebrow{ font-size:clamp(.66rem, .72vw, .8rem); letter-spacing:.06em; }

/* 2 · Citation + phrase : centrées sur LA MÊME largeur. */
.statement--gauche .statement__text,
.statement--gauche .statement__sub{
  max-width:min(880px, 100%);
  margin-inline:auto;
}

/* 3 · Le défilé reste dans la largeur du contenu, pas bord à bord. */
.marquee{
  width:min(1240px, calc(100% - 48px));
  margin-inline:auto;
}


/* ── Statement : même largeur que la section suivante, texte à gauche,
   hauteur inchangée (retour 13/08) ────────────────────────────────────── */
.statement--gauche{ text-align:left; }
.statement--gauche .statement__kicker{ margin-left:0; }
.statement--gauche .statement__text,
.statement--gauche .statement__sub{
  max-width:none;
  margin-inline:0;
  text-align:left;
}


/* ── Retour 18/08 : SEULE la phrase de conviction se recentre ──────────
   Le reste du bloc (« Notre conviction » et le paragraphe qui suit)
   garde l'alignement à gauche demandé le 13/08. ──────────────────────── */
.statement--gauche .statement__text{
  text-align:center;
  margin-inline:auto;
  /* Sans mesure, la phrase s'étale sur 1192px et « seul regard. » retombe
     seul à gauche : le centrage ne se lit plus. 880px + balance = deux
     lignes équilibrées. */
  max-width:min(880px, 100%);
  text-wrap:balance;
}


/* ── Retour 13/08 : titre services plus discret ───────────────────────── */
.section-head--edito h2{
  font-size:clamp(1.4rem, 1.9vw, 1.85rem);
  line-height:1.3;
  max-width:38ch;
}


/* ── JONCTION conviction → services (retour 13/08) ────────────────────────
   Le passage était invisible : deux blocs blancs collés. La section
   services devient une BANDE douce arrondie — le langage des capsules,
   à l'échelle de la section — et chacun retrouve sa respiration. ─────── */
.statement--gauche{ padding-bottom:clamp(48px, 6vw, 80px); }
.marquee{ margin-bottom:0; }

/* bandeau photo large et court dans une section bande : le cadre coupe
   haut et bas de l'image (cover), le groupe reste au centre */
.bande-panorama{
  max-width:1000px; margin:clamp(24px, 3vw, 40px) auto;
  border-radius:24px; overflow:hidden;
  aspect-ratio:21/8;
  box-shadow:0 1px 2px rgba(27,25,23,.06), 0 16px 40px rgba(27,25,23,.12);
}
.bande-panorama img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
.bande-panorama--haute{ aspect-ratio:16/9; }
.bande-panorama--haute img{ object-position:50% 30%; }
@media (max-width:700px){ .bande-panorama{ aspect-ratio:16/10; } }

.section--bande{
  background:linear-gradient(180deg, #F7F8FB 0%, #F3F4F9 100%);
  border-radius:40px;
  width:calc(100% - clamp(16px, 2vw, 40px));
  margin-inline:auto;
  padding-block:clamp(64px, 7vw, 96px) clamp(64px, 7vw, 96px);
}
/* L'exception à la règle « deux sections qui se suivent » : la bande
   garde son air du haut. */
.section + .section--bande{ padding-top:clamp(64px, 7vw, 96px); }
.section--bande + .section{ padding-top:clamp(52px, 6.5vw, 92px); }

/* Le titre de l'en-tête édito : à GAUCHE, vraiment (il restait centré
   par héritage de .section-head). */
.section-head--edito, .section-head--edito > div,
.section-head--edito h2, .section-head--edito p{ text-align:left; }
.section-head--edito h2{ margin-inline:0; }

/* Les cartes services sur la bande : fond blanc net, elles ressortent. */
.section--bande .service-card{ background:#fff; }


/* ═══ RETOURS 13/08 : header, défilé, cartes services ═══════════════════ */
/* « ID SOLUTION tout en bleu dans le header » */
.site-logo__word, .site-logo__word b{ color:var(--color-primary-600); }

/* Défilé : apparition plus franche aux bords (fondu 28px au lieu de 6%) */
.marquee{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

/* Cartes services : plus de « Service 0X », le titre porte la couleur */
.service-card.is-innovation{ --carte-c:var(--terra-bold);  --carte-h:var(--terra-soft); }
.service-card.is-leadership{ --carte-c:var(--lead-bold);   --carte-h:var(--lead-soft); }
.service-card.is-formations{ --carte-c:var(--indigo-bold); --carte-h:var(--indigo-soft); }
.service-card__title{ color:var(--carte-c, var(--color-neutral-900)); }

/* ═══ SIGNATURE SUR-MESURE : « les quatre regards » ═════════════════════
   Une seule idée, déclinée partout : le fil aux 4 couleurs de l'équipe
   (créativité · facilitation · thérapeutique · systémique) + le geste
   de la maison — révéler ce qui agit en silence. ─────────────────────── */

/* 1. Le fil de lecture : il se tisse en haut de l'écran au fil du scroll */
.fil-regards{
  position:fixed; top:0; left:0; z-index:400;
  width:100%; height:3px;
  background:linear-gradient(90deg, var(--solar-bold), var(--terra-bold), var(--sens-bold), var(--indigo-bold));
  transform:scaleX(var(--lu, 0)); transform-origin:0 50%;
  pointer-events:none;
}

/* 2. La révélation au survol : la couleur du service affleure là où le
   curseur passe — l'invisible devient visible. */
.service-card, .atout-card, .key-card, .team-card{ position:relative; overflow:hidden; }
.service-card::after, .atout-card::after, .key-card::after, .team-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    var(--carte-h, var(--color-accent-soft, var(--color-primary-50))) 0%, transparent 70%);
  opacity:0; transition:opacity .2s cubic-bezier(.4,0,.2,1);
}
.service-card:hover::after, .atout-card:hover::after,
.key-card:hover::after, .team-card:hover::after{ opacity:.55; }
.service-card__media, .service-card__body,
.atout-card > *, .key-card > *, .team-card > *{ position:relative; z-index:1; }

/* 3. Les listes de contenu : la puce devient le glyphe ☉ du logo,
   dans la couleur de la page. */
.container--narrow ul{ list-style:none; padding-left:0; }
.container--narrow ul li{ position:relative; padding-left:1.7em; }
.container--narrow ul li::before{
  content:"☉"; position:absolute; left:.15em; top:0;
  color:var(--color-accent-bold, var(--color-primary-600));
  font-size:.9em;
}

/* 4. Jusqu'à la sélection de texte. */
::selection{ background:var(--color-primary-600); color:#fff; }

/* 5. Le fil referme la page : liseré 4 couleurs en tête de footer. */
.site-footer{
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg, var(--solar-bold), var(--terra-bold), var(--sens-bold), var(--indigo-bold)) 1;
}

/* Retour : le liseré doit épouser la forme du footer (le border-image
   ignore les arrondis) → barre absolue, clippée par l'overflow. */
.site-footer{ border-top:0; border-image:none; }
.site-footer::after{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--solar-bold), var(--terra-bold), var(--sens-bold), var(--indigo-bold));
}

/* Retour : « En savoir plus » au même niveau dans les 3 cartes. */
.service-card{ display:flex; flex-direction:column; }
.service-card__body{ flex:1; display:flex; flex-direction:column; }
.service-card__cta{ margin-top:auto; align-self:flex-start; }


/* ═══ LE STYLE DE L'ACCUEIL SUR TOUTES LES PAGES (13/08) ════════════════
   Chaque page parle le langage de l'accueil — pastilles, bande douce,
   cartes — dans LA couleur de son service. ─────────────────────────── */

/* 1. L'eyebrow devient partout la pastille de l'accueil, teintée page.

   ⚠ Ni le contour ni le texte ne passent par color-mix() : c'est cette
   règle-ci qui l'emporte sur toutes les autres, et sur un navigateur qui
   ignore la fonction, le contour disparaissait purement et simplement. Le
   fond n'étant qu'un voile très pâle (16 % d'écart avec le blanc), il ne
   restait plus rien à voir — « le bouton au-dessus du titre est blanc »,
   signalé sur Edge le 27/08. Un contour plein règle le cas partout. */
.eyebrow{
  gap:8px; padding:8px 16px; border-radius:999px;
  background:var(--color-accent-soft);
  border:1px solid var(--color-accent-bold);
  color:var(--color-accent-ink, var(--color-accent-bold));
  font-size:11px; letter-spacing:1.8px;
}

/* 2. Le hero des pages porte un voile léger de SA couleur. */
.hero:not(.hero--full){
  background:
    radial-gradient(90% 120% at 80% -10%,
      color-mix(in srgb, var(--color-accent-soft) 65%, transparent) 0%, transparent 60%),
    #fff;
}

/* 3. Les boutons pleins prennent la couleur de la page
   (sur l'accueil, l'accent EST le bleu du logo — rien ne change). */
.btn--primary{
  background:var(--color-accent-bold);
  box-shadow:0 6px 18px color-mix(in srgb, var(--color-accent-bold) 22%, transparent);
}
.btn--primary:hover{ background:color-mix(in srgb, var(--color-accent-bold) 82%, #000); }

/* 4. Les citations aussi. */
.banner-quote__text{ color:var(--color-accent-bold); }
.banner-quote__eyebrow{ color:color-mix(in srgb, var(--color-accent-bold) 70%, #000); }

/* 5. Le gros callout bleu devient la carte douce de l'accueil,
   teintée par la page. */
.callout, .callout--primary, .callout--solar, .callout--indigo, .callout--sage{
  background:
    radial-gradient(110% 140% at 12% -10%,
      color-mix(in srgb, var(--color-accent-soft) 90%, transparent) 0%, transparent 62%),
    var(--color-neutral-50);
  border:1px solid color-mix(in srgb, var(--color-accent-bold) 14%, transparent);
  border-radius:40px;
  width:min(1240px, calc(100% - clamp(16px, 2vw, 40px)));
  margin-inline:auto;
}
.callout__lead{ color:var(--color-neutral-900); }
.callout .btn--light{
  background:var(--color-accent-bold); color:#fff; border:0;
  box-shadow:0 6px 18px color-mix(in srgb, var(--color-accent-bold) 25%, transparent);
}
.callout .btn--light:hover{ background:color-mix(in srgb, var(--color-accent-bold) 82%, #000); }

/* 6. Les sections à cartes des pages passent sur la bande douce
   de l'accueil. */
main .section:has(> .container > .grid):not(.section--bande){
  background:linear-gradient(180deg, #F7F8FB 0%, #F3F4F9 100%);
  border-radius:40px;
  width:calc(100% - clamp(16px, 2vw, 40px));
  margin-inline:auto;
  padding-block:clamp(56px, 6vw, 88px);
}
main .section:has(> .container > .grid) .atout-card,
main .section:has(> .container > .grid) .key-card,
main .section:has(> .container > .grid) .card{ background:#fff; }

/* 7. Les cartes des pages : le liseré de survol prend la couleur
   de la page (comme les cartes services de l'accueil). */
.atout-card:hover, .key-card:hover, .spec-card:hover, .card:hover{
  border-color:var(--color-accent-bold);
  box-shadow:0 16px 40px rgba(27,25,23,.10), 0 0 0 1px var(--color-accent-bold);
}

/* 8. Dans le footer, chaque renvoi de service s'allume dans SA couleur. */
.site-footer__col a[href*="innovation-manageriale"]:hover{ color:color-mix(in srgb, var(--terra-bold) 55%, #fff); }
.site-footer__col a[href*="leadership-incarne"]:hover   { color:color-mix(in srgb, var(--lead-bold) 45%, #fff); }
.site-footer__col a[href*="formations"]:hover           { color:color-mix(in srgb, var(--indigo-bold) 50%, #fff); }
.site-footer__col a[href*="methode-revelation"]:hover   { color:color-mix(in srgb, var(--sage-bold) 55%, #fff); }
.site-footer__col a[href*="structure-des-ressentis"]:hover{ color:color-mix(in srgb, var(--sens-bold) 55%, #fff); }

/* La petite barre décorative au-dessus des titres de hero : l'accueil
   ne l'a plus, les pages non plus (la pastille suffit). */
.hero__title::before{ content:none; }

/* Le voile clair/sombre du callout datait du fond bleu nuit : sur la
   carte douce, il faisait une tache — retiré. */
.callout::after{ content:none; }


/* ═══ RETOURS 13/08 : Leadership modernisé + capsules raffinées ═════════ */

/* Les 3 capacités (Voir plus clair / Décider plus juste / Agir ensemble) :
   fini les blocs orange — liste ☉ aérée, l'accent porte les mots-clés. */
.liste-capacites{ margin-top:24px; display:grid; gap:14px; list-style:none; padding:0; }
.liste-capacites li{ position:relative; padding-left:1.9em; line-height:1.65; }
.liste-capacites li::before{
  content:"☉"; position:absolute; left:.15em; top:0;
  color:var(--color-accent-bold); font-size:.95em;
}
.liste-capacites li strong{ color:var(--color-accent-bold); }

/* Les 7 domaines d'intervention : cartes blanches sur la bande douce,
   le langage de l'accueil. */
.domaines-grid{
  list-style:none; padding:0; max-width:1000px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:14px;
}
.domaines-grid li{
  position:relative; background:#fff;
  border:1px solid var(--color-neutral-200); border-radius:16px;
  padding:18px 22px 18px 54px; font-weight:600; color:var(--color-neutral-900);
  transition:border-color .2s var(--ease-base), box-shadow .2s var(--ease-base),
             transform .2s var(--ease-base);
}
.domaines-grid li::before{
  content:"☉"; position:absolute; left:24px; top:18px;
  color:var(--color-accent-bold); font-size:.95em;
}
.domaines-grid li:hover{
  transform:translateY(-2px); border-color:var(--color-accent-bold);
  box-shadow:0 10px 26px rgba(27,25,23,.08);
}
@media (prefers-reduced-motion: reduce){ .domaines-grid li:hover{ transform:none; } }

/* Capsules du défilé : fini les fonds bonbon (« école primaire ») —
   pilule blanche, le texte garde sa couleur, bord discret. */
.marquee__piste span:nth-of-type(4n+1),
.marquee__piste span:nth-of-type(4n+2),
.marquee__piste span:nth-of-type(4n+3),
.marquee__piste span:nth-of-type(4n+4){
  background:#fff;
  box-shadow:0 2px 10px rgba(20,22,60,.06);
}
.marquee__piste span:nth-of-type(4n+1){ border-color:color-mix(in srgb, var(--solar-bold) 32%, transparent); }
.marquee__piste span:nth-of-type(4n+2){ border-color:color-mix(in srgb, var(--terra-bold) 32%, transparent); }
.marquee__piste span:nth-of-type(4n+3){ border-color:color-mix(in srgb, var(--sens-bold) 32%, transparent); }
.marquee__piste span:nth-of-type(4n+4){ border-color:color-mix(in srgb, var(--indigo-bold) 32%, transparent); }

/* btn--brand suit aussi la couleur de la page (bleu logo par défaut). */
.btn--brand{
  background:var(--color-accent-bold);
  box-shadow:0 8px 24px color-mix(in srgb, var(--color-accent-bold) 30%, transparent);
}
.btn--brand:hover{ background:color-mix(in srgb, var(--color-accent-bold) 82%, #000); }

/* Le justify hérité créait des trous dans les cartes étroites. */
.domaines-grid li{ text-align:left; }


/* ═══ MOBILE (13/08) : hero empilé + tiroir de menu refait ═══════════════
   Les couches « modernisation » n'avaient pas de règles mobile : hero
   resté en 2 colonnes (titre tronqué), tiroir hérité du header bleu nuit
   (liens blancs sur panneau devenu blanc). Tout se rejoue ici. ────────── */
@media (max-width:900px){

  /* ── Le hero de l'accueil s'empile ─────────────────────────────────── */
  .hero--full{ min-height:auto; padding-block:clamp(18px, 3vh, 36px) 44px; }
  .hero--full .hero__inner{ grid-template-columns:1fr; gap:26px; }
  .hero--full .hero__content{ max-width:none; }
  .hero--full .hero__title{ font-size:clamp(1.9rem, 8.4vw, 2.7rem); line-height:1.12; }
  .hero--full .hero__title span,
  .hero--full .hero__title .reveal-line{ white-space:normal; }
  .hero--full .eyebrow{
    white-space:normal; max-width:100%; line-height:1.5; text-align:left;
  }
  .hero--full .lead{ max-width:none; }
  .hero--full .hero__image img{
    height:min(60vw, 360px);
    transform:none;             /* pas de parallaxe souris au doigt */
  }
  .hero__scroll{ display:none; }

  /* ── Le tiroir du menu : panneau clair plein écran, tout visible ───── */
  .site-nav{
    position:fixed; top:0; right:0; left:auto; bottom:auto;
    width:min(420px, 100%); height:100dvh; max-height:none;
    display:block;
    background:#fff;
    padding:calc(var(--header-h, 76px) + 16px) 28px 48px;
    overflow-y:auto;
    z-index:60;
    transform:translateX(105%); visibility:hidden;
    transition:transform .3s var(--ease-out), visibility 0s .3s;
    box-shadow:-24px 0 60px rgba(10, 15, 46, .16);
  }
  .site-nav.is-open{
    transform:none; visibility:visible;
    transition:transform .3s var(--ease-out);
  }
  .site-nav__list{ display:block; width:100%; padding:0; margin:0; }
  .site-nav__item{ width:100%; border-bottom:1px solid var(--color-neutral-100); }
  .site-nav__item:last-child{ border-bottom:0; }
  .site-nav__link{
    display:block; width:100%;
    color:var(--color-neutral-900);
    font-size:1.05rem; padding:15px 2px;
  }
  .site-nav__link.is-active{ color:var(--color-primary-600); }
  /* « Nos services » / « ID Solution » (liens vides) deviennent des
     intitulés de groupe : leurs pages sont TOUJOURS dépliées dessous. */
  .site-nav__item--has-children > .site-nav__link{
    pointer-events:none;
    font-size:.78rem; text-transform:uppercase; letter-spacing:1.6px;
    color:var(--color-neutral-400);
    padding:16px 2px 6px;
  }
  .site-nav__item--has-children > .site-nav__link::after{ content:none; }
  .site-nav__submenu,
  .site-nav__item--has-children:hover > .site-nav__submenu,
  .site-nav__item--has-children:focus-within > .site-nav__submenu,
  .site-nav__item--has-children.is-expanded > .site-nav__submenu{
    display:block; position:static; transform:none;
    visibility:visible; opacity:1;
    max-height:none; overflow:visible;
    background:transparent; box-shadow:none;
    padding:0 0 12px 4px; margin:0; min-width:0;
  }
  .site-nav__submenu a{
    display:block;
    color:var(--color-neutral-700);          /* fini le blanc sur blanc */
    border-left:2px solid var(--color-neutral-200);
    padding:11px 0 11px 14px; font-size:.98rem;
    white-space:normal;
  }
  .site-nav__submenu a:hover, .site-nav__submenu a:focus-visible,
  .site-nav__submenu a.is-active{
    color:var(--lien-bold, var(--color-primary-600));
    border-left-color:var(--lien-bold, var(--color-primary-600));
    background:transparent; padding-left:14px;
  }

  /* ── Confort général des sections sur petit écran ──────────────────── */
  .section--bande,
  main .section:has(> .container > .grid):not(.section--bande){ border-radius:24px; }
  .callout{ padding-inline:22px; }
  .statement--gauche{ padding-bottom:40px; }
}

/* Les guillemets décoratifs 64px dépassaient du cadre sur téléphone. */
@media (max-width:900px){
  .tagline-quote{ padding-inline:16px; }
  .tagline-quote p::before, .tagline-quote p::after{ content:none; }
}

/* Dans le tiroir, pas de soulignement desktop du lien actif. */
@media (max-width:900px){
  .site-nav .site-nav__link::after,
  .site-nav .site-nav__link::before{ content:none; }
  .site-nav .site-nav__link{ border-bottom:0; }
}

/* Retour iPhone : la hauteur forcée recadrait la photo du hero (plafond
   gardé, personnes coupées). Sur mobile l'image reprend son ratio 4:3
   entier — rien n'est rogné. */
@media (max-width:900px){
  .hero--full .hero__image img{ height:auto; object-fit:contain; }
}

/* La photo du hero entière sur mobile : l'aspect-ratio 4/3 du CSS
   l'emportait encore sur les vraies dimensions. */
@media (max-width:900px){
  .hero--full .hero__image img{ aspect-ratio:auto; }
}

/* Retour iPhone : la pilule blanche du header flottait mal sur les
   voiles colorés des pages. Le haut du hero redevient blanc sous le
   header et fond ensuite vers la couleur — la pilule repose sur du
   blanc, le voile commence dessous. */
.hero:not(.hero--full){
  background:
    linear-gradient(180deg,
      #fff calc(var(--header-h, 76px) + 14px),
      rgba(255,255,255,0) calc(var(--header-h, 76px) + 170px)),
    radial-gradient(90% 120% at 80% -10%,
      color-mix(in srgb, var(--color-accent-soft) 65%, transparent) 0%, transparent 60%),
    #fff;
}


/* ═══ ÉQUIPE (13/08) : rangées éditoriales alternées ════════════════════
   4 bios de longueurs très inégales → une rangée par personne, photo
   alternée gauche/droite. Compact, vivant, plus de grands vides. ─────── */
.equipe-flux{ display:grid; gap:clamp(24px, 3vw, 40px); max-width:1060px; margin-inline:auto; }
.membre{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0, 320px) minmax(0, 1fr);
  gap:clamp(22px, 3.5vw, 48px); align-items:center;
  background:#fff; border:1px solid var(--color-neutral-200);
  border-radius:24px; padding:clamp(18px, 2.2vw, 28px);
  transition:border-color .25s var(--ease-base), box-shadow .25s var(--ease-base),
             transform .25s var(--ease-base);
}
.membre:nth-child(even){ grid-template-columns:minmax(0, 1fr) minmax(0, 320px); }
.membre:nth-child(even) .membre__photo{ order:2; }
.membre:hover{
  transform:translateY(-3px);
  border-color:var(--color-accent-bold);
  box-shadow:0 16px 40px rgba(27,25,23,.10);
}
.membre__photo{ position:relative; z-index:1; }
.membre__photo img{
  width:100%; aspect-ratio:1/1.05; object-fit:cover; object-position:50% 22%;
  border-radius:16px; display:block;
  transition:transform .4s var(--ease-out);
}
.membre:hover .membre__photo img{ transform:scale(1.03); }
.membre__nom{
  position:relative; z-index:1;
  font-family:var(--font-display); font-size:clamp(1.2rem, 1.5vw, 1.45rem);
  font-weight:700; color:var(--color-neutral-900); margin-bottom:10px;
}
/* la signature : le fil des quatre regards sous chaque nom */
.membre__nom::after{
  content:""; display:block; width:46px; height:3px; margin-top:10px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--solar-bold), var(--terra-bold), var(--sens-bold), var(--indigo-bold));
}
.membre__bio{
  position:relative; z-index:1;
  font-size:.97rem; line-height:1.72; color:var(--color-neutral-600);
}
/* le halo « révélation » au survol, comme les autres cartes */
.membre::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
    var(--color-accent-soft, var(--color-primary-50)) 0%, transparent 70%);
  opacity:0; transition:opacity .2s cubic-bezier(.4,0,.2,1);
}
.membre:hover::after{ opacity:.45; }
@media (prefers-reduced-motion: reduce){
  .membre:hover{ transform:none; }
  .membre:hover .membre__photo img{ transform:none; }
}
@media (max-width:760px){
  .membre, .membre:nth-child(even){ grid-template-columns:1fr; gap:16px; align-items:start; }
  .membre:nth-child(even) .membre__photo{ order:0; }
  .membre__photo img{ aspect-ratio:4/3; }
}

/* Le conteneur texte du membre (nom+bio groupés : 3 enfants dans une
   grille 2 colonnes envoyaient la bio sous la photo). */
.membre__texte{ position:relative; z-index:1; min-width:0; }

/* Bios à gauche (le justify hérité creusait des trous). */
.membre__bio{ text-align:left; hyphens:none; }


/* ═══ JALONS DES PAGES SERVICES (13/08) ═════════════════════════════════
   « On ne remarque pas la structure » : les citations deviennent des
   bandes-jalons teintées de la couleur de page, et les sections texte
   muettes reçoivent leur pastille. Le rythme devient :
   blanc → jalon coloré → blanc → carte. ────────────────────────────── */
.section--jalon{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent-soft) 45%, #fff) 0%,
    color-mix(in srgb, var(--color-accent-soft) 78%, #fff) 100%);
  border-radius:40px;
  width:calc(100% - clamp(16px, 2vw, 40px));
  margin-inline:auto;
  padding-block:clamp(56px, 6.5vw, 92px);
}
.section + .section--jalon{ padding-top:clamp(56px, 6.5vw, 92px); }
.section--jalon + .section{ padding-top:clamp(48px, 6vw, 80px); }

/* La citation, posée nue sur le jalon : plus de carte à liseré. */
.section--jalon .banner-quote{
  background:transparent; border:0 !important; box-shadow:none;
  margin-block:0; padding:0;
}
/* Le ☉ de la maison ouvre le jalon. */
.section--jalon .banner-quote::before{
  content:"☉"; display:block; text-align:center;
  color:var(--color-accent-bold); font-size:1.5rem;
  margin-bottom:16px; opacity:.85;
}
@media (max-width:900px){
  .section--jalon{ border-radius:24px; }
}

/* Jalon : respiration resserrée, citation un cran plus grande. */
.section--jalon{ padding-block:clamp(44px, 5vw, 68px); }
.section + .section--jalon{ padding-top:clamp(44px, 5vw, 68px); }
.section--jalon .banner-quote__text{ font-size:clamp(1.4rem, 2.6vw, 2rem); line-height:1.4; }


/* ═══ ESPACEMENT UNIFIÉ AUTOUR DES SURFACES (13/08) ═════════════════════
   Une « surface » = bande, jalon, ou bande auto des sections à cartes.
   Règles : après une surface, l'air revient ; deux surfaces qui se
   suivent se séparent d'une vraie marge. ─────────────────────────────── */
:is(.section--bande, .section--jalon,
    main .section:has(> .container > .grid)) + .section{
  padding-top:clamp(48px, 6vw, 80px);
}
:is(.section--bande, .section--jalon,
    main .section:has(> .container > .grid))
+ :is(.section--bande, .section--jalon, .section:has(> .container > .grid)){
  margin-top:clamp(24px, 3vw, 40px);
}

/* Plus de petite flèche à côté des entrées à sous-menu. */
.site-nav__item--has-children > .site-nav__link::after{ content:none; }


/* ═══ LES 4 MOUVEMENTS — Méthode Révélation ☉ (18/08) ═══════════════════
   Le document d'Eric les donnait en pastilles rondes de 4 couleurs. On les
   reprend dans le langage « capsule » déjà validé (pilule claire, texte dans
   l'accent de la page) : pas de cercle décoratif, et le contraste tient. */
.mouvements{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px, 1.6vw, 20px);
}
.mouvements__item{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:18px 20px;
  border-radius:var(--radius-pill);
  background:var(--color-neutral-0);
  border:1px solid color-mix(in srgb, var(--color-accent-bold) 32%, transparent);
  box-shadow:0 2px 10px color-mix(in srgb, var(--color-accent-bold) 10%, transparent);
  transition:transform 180ms cubic-bezier(.4,0,.2,1),
             box-shadow 180ms cubic-bezier(.4,0,.2,1);
}
.mouvements__item:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 22px color-mix(in srgb, var(--color-accent-bold) 18%, transparent);
}
/* L'accent pur ne passe pas AA sur blanc (4,09:1 sur la page Révélation) :
   on l'assombrit vers le neutre foncé — même teinte, contraste tenu. */
.mouvements__rang{
  flex:none;
  font-family:var(--font-display);
  font-size:var(--text-sm); font-weight:700;
  color:color-mix(in srgb, var(--color-accent-bold) 80%, var(--color-neutral-900));
  font-variant-numeric:tabular-nums;
}
.mouvements__nom{
  font-family:var(--font-display);
  font-size:var(--text-lg); font-weight:700;
  color:color-mix(in srgb, var(--color-accent-bold) 80%, var(--color-neutral-900));
  line-height:1.2;
}
@media (prefers-reduced-motion: reduce){
  .mouvements__item{ transition:none; }
  .mouvements__item:hover{ transform:none; }
}
@media (max-width:860px){
  .mouvements{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:420px){
  .mouvements{ grid-template-columns:1fr; }
}


/* ═══ ACCROCHE DE HERO LONGUE (18/08) ═══════════════════════════════════
   Le texte d'Eric — « Accompagnement pour dirigeants, équipes et
   entreprises en transformation » — demande 545px pour 494px de colonne :
   en nowrap la pastille le tronquait. Elle passe à la ligne. */
.hero .eyebrow{
  white-space:normal;
  text-wrap:balance;
  line-height:1.6;
  max-width:100%;
}


/* ═══ ENCART FORT — paragraphes de conclusion (18/08) ═══════════════════
   Retour Lionel : « ces paragraphes peuvent être un peu plus mis en
   évidence ». Ce sont les phrases que le document d'Eric met ENTIÈREMENT
   en gras — on leur donne le langage des bandes teintées de la page.
   Couleur et graisse posées explicitement : la règle globale
   `strong{color:neutral-900;font-weight:600}` écrase sinon l'héritage. */
.encart-fort{
  max-width:880px;
  margin:clamp(28px, 4vw, 44px) auto 0;
  padding:clamp(24px, 3.4vw, 38px) clamp(22px, 3.6vw, 44px);
  border-radius:32px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent-soft) 78%, var(--color-neutral-0)) 0%,
    color-mix(in srgb, var(--color-accent-soft) 42%, var(--color-neutral-0)) 100%);
  /* Aligné à gauche : centré, un pavé de 4-5 lignes devient illisible
     (retour Lionel 18/08). Pas de césure ni de justification ici. */
  text-align:left;
  hyphens:none;
  -webkit-hyphens:none;
  font-size:clamp(1.04rem, 1.45vw, 1.2rem);
  line-height:1.65;
  font-weight:700;
  color:var(--color-neutral-900);
  text-wrap:pretty;
}
.encart-fort strong{
  font-weight:700;
  color:color-mix(in srgb, var(--color-accent-bold) 80%, var(--color-neutral-900));
}
/* Sur une section déjà teintée, l'encart se démarque par un liseré. */
.section--bande .encart-fort{
  background:var(--color-neutral-0);
  box-shadow:0 2px 14px color-mix(in srgb, var(--color-accent-bold) 12%, transparent);
}
@media (max-width:600px){
  .encart-fort{ border-radius:24px; text-align:left; }
}


/* ═══ CORPS DE TEXTE DES PAGES DE SERVICE — UNE SEULE TAILLE (18/08) ════
   Retour Lionel : « des paragraphes plus petits que d'autres ». Le premier
   paragraphe de chaque section portait un font-size en dur (1.125rem) et
   les suivants retombaient à 16px — marche visible au milieu du texte.
   La taille vit ici, plus dans les attributs style des pages.
   `:not(.service-home)` écarte mentions légales et confidentialité, qui
   partagent cette classe de corps et gardent leur échelle. */
body:not(.service-home) .container--narrow > p:not(.encart-fort),
body:not(.service-home) .container--narrow > ul > li{
  font-size:1.125rem;
  line-height:1.75;
}


/* ═══ DERNIÈRE LIGNE DES BLOCS CENTRÉS (18/08) ═════════════════════════
   Le site justifie tout le corps de texte avec `text-align-last:start`
   (règle « TEXT JUSTIFY »). Cette propriété s'hérite et force la DERNIÈRE
   ligne à gauche même quand le bloc est centré : sur l'accueil, la 2ᵉ ligne
   de « Aucune organisation… » démarrait au bord gauche, 57px hors de l'axe.
   `auto` rend la dernière ligne à son text-align. Tout bloc centré doit
   figurer ici — la liste d'exceptions plus haut ne couvrait pas ces cas. */
.statement__text,
.encart-fort,
main [style*="text-align:center"]{
  text-align-last:auto;
}


/* ═══ TABLEAU DES PILIERS — Méthodologies (18/08) ══════════════════════
   L'en-tête était peint en dur au bleu du logo (#000F8F) alors que la page
   est en turquoise : la couleur jurait (signalement Lionel). Tout passe par
   l'accent de la page, donc le tableau se recolore seul sur n'importe
   quelle page — et plus aucune valeur n'est écrite en dur dans le HTML. */
.tableau-piliers{
  width:100%;
  max-width:980px;
  margin-inline:auto;
  border-collapse:collapse;
  font-size:.975rem;
}
.tableau-piliers th{
  text-align:left;
  padding:14px 18px;
  background:var(--color-accent-bold);
  color:var(--color-neutral-0);
  font-family:var(--font-display);
}
.tableau-piliers th:first-child{ border-radius:10px 0 0 0; width:32%; }
.tableau-piliers th:last-child{ border-radius:0 10px 0 0; }
.tableau-piliers td{ padding:16px 18px; vertical-align:top; }
.tableau-piliers td:first-child{ font-weight:700; }
.tableau-piliers tbody tr{
  border-bottom:1px solid color-mix(in srgb, var(--color-accent-bold) 14%, transparent);
}
.tableau-piliers tbody tr:nth-child(even){
  background:color-mix(in srgb, var(--color-accent-bold) 4%, transparent);
}
.tableau-piliers tbody tr:last-child{ border-bottom:0; }
/* Sur mobile la colonne « pilier » ne doit pas s'étrangler. */
@media (max-width:600px){
  .tableau-piliers{ font-size:.92rem; }
  .tableau-piliers th, .tableau-piliers td{ padding:12px 14px; }
  .tableau-piliers th:first-child{ width:38%; }
}

/* ── LIENS DE TEXTE ────────────────────────────────────────────────────
   Retour de Lionel (21/08) : « mets plus en avant les liens intra ».
   La règle de base `a{color:inherit;text-decoration:none}` vaut pour TOUT
   le document — donc un lien posé au milieu d'une phrase avait exactement
   l'aspect du texte qui l'entoure. Personne ne pouvait deviner qu'il menait
   quelque part.

   On ne rhabille QUE les liens de texte : ceux SANS CLASSE. Inventaire fait
   au navigateur sur les 12 pages — il y en a 11 en tout, 9 dans un paragraphe
   et 2 dans une cellule du tableau des méthodologies. Tout le reste (boutons,
   cartes, navigation, pied de page) porte une classe et garde son traitement.
   Première tentative ratée : j'avais énuméré p/li/dd et oublié td — les deux
   liens des méthodologies restaient invisibles (relevé par Lionel).

   La couleur est celle de la PAGE (--color-accent-bold) : un lien dans
   Leadership est azur, dans Révélation vert sauge. Le site garde sa
   cohérence par page au lieu d'imposer un bleu de lien universel. */
main a:not([class]) {
    color: var(--color-accent-bold);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--color-accent-bold) 38%, transparent);
    transition:
        text-decoration-color 0.18s ease,
        color 0.18s ease;
}
main a:not([class]):hover {
    text-decoration-color: currentColor;
}