/* ==========================================================================
   Finaction & Associés — Design System
   Style inspiré de 8advisory.com : monochrome bleu, typo light géante,
   numéros serif, micro-interactions linéaires.
   ========================================================================== */

:root{
  /* Couleurs */
  --night:      #060E1C;
  --night-deep: #03080F;
  --night-soft: #1C3050;
  /* Accent : NOIR par défaut (fonds clairs). Passe en BLANC sur les fonds sombres
     via l'override plus bas. Remplace l'ancien bleu électrique. */
  --electric:   #0E1A2C;
  --celest:     #A0C8F3;
  --bg:         #F6F7F9;
  --surface:    #FFFFFF;
  --line:       #E8EBF1;
  --line-dark:  rgba(255,255,255,.12);
  --txt:        #0E1A2C;
  --txt-2:      #55647A;
  --txt-inv:    #FFFFFF;
  --txt-inv-2:  #93A5BC;

  /* Typographie */
  /* Typographie de marque Finaction : Arial Narrow pour les titres, Arial ailleurs.
     Archivo Narrow prend le relais quand Arial Narrow n'est pas installe
     (Android, Linux, Mac sans Office) : dessin quasi identique. */
  --f-head: "Arial Narrow", "Archivo Narrow", Arial, Helvetica, sans-serif;
  --f-body: Arial, Helvetica, sans-serif;
  --f-num:  "Arial Narrow", "Archivo Narrow", Arial, Helvetica, sans-serif;

  --fs-h1:    clamp(2.5rem, 5vw, 4.6rem);
  --fs-h2:    clamp(2.6rem, 6vw, 5.4rem);
  --fs-h3:    clamp(1.35rem, 2.3vw, 1.9rem);
  --fs-intro: clamp(1.15rem, 1.9vw, 1.6rem);
  --fs-stat:  clamp(4rem, 9vw, 8.75rem);

  /* Espacements */
  --sp-sec: clamp(6rem, 12vh, 10rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--f-body);
  font-weight:400;
  font-size:1rem;
  line-height:1.7;
  color:var(--txt);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
a, button{ cursor:pointer; }
ul, ol{ list-style:none; }
img{ max-width:100%; display:block; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--electric); outline-offset:4px; }

.wrap{ max-width:1280px; margin-inline:auto; padding-inline:var(--gutter); }

h1,h2,h3,h4{
  font-family:var(--f-head);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.02em;
  text-wrap:balance;
}
h1 strong, h2 strong, h3 strong{ font-weight:500; }
.accent{ color:var(--electric); }

/* ---------- Composants partagés ---------- */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-head);
  font-size:.8rem; font-weight:500;
  letter-spacing:.35em; text-transform:uppercase;
  color:var(--electric);
  margin-bottom:2rem;
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--electric); flex-shrink:0;
}
.on-dark .eyebrow{ color:var(--celest); }
.on-dark .eyebrow::before{ background:var(--electric); }

/* Lien signature : libellé + ligne animée + flèche */
.cta-line{
  display:inline-flex; align-items:center; gap:18px;
  font-family:var(--f-head);
  font-size:.78rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
}
.cta-line .line{
  width:72px; height:1px; background:currentColor;
  transform-origin:left center;
  transition:transform .45s var(--ease-out), background .3s;
}
.cta-line .arrow{ transition:transform .45s var(--ease-out); }
.cta-line:hover .line{ transform:scaleX(.55); background:var(--electric); }
.cta-line:hover .arrow{ transform:translateX(6px); color:var(--electric); }

/* Bouton plein */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--f-head); font-size:.78rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  padding:1.05rem 2rem;
  border:1px solid var(--line-dark);
  color:var(--txt-inv);
  background:transparent;
  transition:background .3s, border-color .3s, color .3s;
}
/* Fond plein derrière du texte blanc : NOIR (le blanc ferait blanc sur blanc). */
.btn:hover{ background:#0E1A2C; border-color:#0E1A2C; color:#fff; }
.btn.solid{ background:#0E1A2C; border-color:#0E1A2C; }
.btn.solid:hover{ background:#1E2A40; }
.btn.dark{ color:var(--night); border-color:var(--night); }
.btn.dark:hover{ background:var(--night); color:#fff; }

/* CTA animé « remplissage liquide » : le bleu électrique envahit le bouton, la flèche apparaît */
.btn.fill{ position:relative; overflow:hidden; }
.btn.fill > span{ position:relative; z-index:1; }
.btn.fill::before{
  content:""; position:absolute; inset:0;
  background:#3E8CFF;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .45s var(--ease-out);
}
.btn.fill:hover::before{ transform:scaleX(1); }
.btn.fill .arr{
  display:inline-block; opacity:0; transform:translateX(-10px);
  transition:opacity .3s .1s, transform .45s var(--ease-out) .05s;
}
.btn.fill:hover .arr{ opacity:1; transform:none; }
.btn.fill:hover{ border-color:#3E8CFF; color:#fff; }
.btn.solid.fill:hover{ background:#0E1A2C; }
.btn.dark.fill:hover{ background:transparent; }

/* CTA animé « tracé de bordure » : la bordure bleue se dessine tout autour
   (les 4 traits <i> sont injectés par main.js) */
.btn.draw{ position:relative; }
.btn.draw i{
  position:absolute; display:block; background:#3E8CFF;
  transition:transform .4s var(--ease-out); pointer-events:none;
}
.btn.draw i:nth-of-type(1){ top:0; left:0; width:100%; height:1px; transform:scaleX(0); transform-origin:left; }
.btn.draw i:nth-of-type(2){ top:0; right:0; width:1px; height:100%; transform:scaleY(0); transform-origin:top; transition-delay:.1s; }
.btn.draw i:nth-of-type(3){ bottom:0; left:0; width:100%; height:1px; transform:scaleX(0); transform-origin:right; transition-delay:.2s; }
.btn.draw i:nth-of-type(4){ top:0; left:0; width:1px; height:100%; transform:scaleY(0); transform-origin:bottom; transition-delay:.3s; }
.btn.draw:hover i{ transform:none; }
.btn.draw:hover{ color:var(--celest); }
@media (prefers-reduced-motion: reduce){
  .btn.fill::before, .btn.fill .arr, .btn.draw i{ transition:none; }
}

/* ---------- Header ---------- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s, box-shadow .4s;
}
.site-head.scrolled{
  background:rgba(14,26,44,.9);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line-dark);
}
.head-in{
  display:flex; align-items:center; justify-content:space-between;
  min-height:104px; gap:2rem;
}
.logo{
  display:inline-flex; align-items:center;
  color:var(--txt-inv);
}
.logo img{ width:186px; height:auto; display:block; }
@media (max-width:860px){
  .head-in{ min-height:84px; }
  .logo img{ width:150px; }
}
.main-nav{ display:flex; align-items:center; gap:2.4rem; }
.main-nav a{
  font-family:var(--f-head);
  font-size:.74rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-inv-2);
  padding:8px 0;
  position:relative;
  transition:color .3s;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--electric);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .35s var(--ease-out);
}
.main-nav a:hover{ color:#fff; }
.main-nav a:hover::after{ transform:scaleX(1); }
.main-nav a.active{ color:#fff; }
.main-nav a.active::after{ transform:scaleX(1); }
.nav-contact{
  border:1px solid var(--line-dark);
  padding:.7rem 1.4rem !important;
  color:#fff !important;
  transition:background .3s, border-color .3s;
}
.nav-contact::after{ display:none; }
.nav-contact:hover{ background:#0E1A2C; border-color:#0E1A2C; }

/* Burger */
.burger{
  display:none;
  flex-direction:column; justify-content:center; gap:6px;
  width:48px; height:48px; padding:12px;
  background:transparent; border:1px solid var(--line-dark);
}
.burger span{
  display:block; height:1px; background:#fff;
  transition:transform .35s var(--ease-out), opacity .3s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Menu mobile */
.mobile-menu{
  position:fixed; inset:0; z-index:90;
  background:var(--night-deep);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--gutter);
  opacity:0; visibility:hidden;
  transition:opacity .4s, visibility .4s;
}
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu a{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(1.8rem, 7vw, 2.6rem);
  color:var(--txt-inv);
  padding:.55rem 0;
  border-bottom:1px solid var(--line-dark);
  display:flex; justify-content:space-between; align-items:center;
}
.mobile-menu a .num{
  font-family:var(--f-num); font-size:1rem; color:var(--celest);
}

@media (max-width: 920px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
}

/* ---------- Hero (fond « Dotted Surface » interactif, texte centré) ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  background:var(--night);
  color:var(--txt-inv);
  overflow:hidden;
  padding:calc(84px + 2rem) 0 clamp(5rem, 10vh, 7rem);
}
canvas.dots,
canvas.fluid,
canvas.sparkles{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
/* fondu d'apparition du champ d'étincelles (équivalent du motion.div opacity 0→1, 1s) */
canvas.sparkles{
  opacity:0;
  transition:opacity 1s ease;
}
canvas.sparkles.is-on{ opacity:1; }
/* Fond « Background Paths » (chemins courbes animés) */
.paths{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:hidden; pointer-events:none;
  background:var(--night);
  color:var(--celest);
}
.paths svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.paths path{
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  animation:pathFlow var(--dur,24s) linear var(--del,0s) infinite;
  will-change:stroke-dashoffset;
}
/* le tiret (dasharray inline, unités normalisées par pathLength=1) s'écoule le long de la courbe */
@keyframes pathFlow{
  0%   { stroke-dashoffset:1; }
  100% { stroke-dashoffset:0; }
}
@media (prefers-reduced-motion: reduce){
  .paths path{ animation:none; stroke-dasharray:none !important; }
}
.hero::after,
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 45% at 50% 42%, rgba(6,14,28,.78) 0%, rgba(6,14,28,.25) 60%, rgba(6,14,28,0) 100%);
  pointer-events:none;
}
.hero-content{
  position:relative; z-index:2;
  max-width:920px;
  margin:0 auto;
  padding:0 var(--gutter);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero-content .eyebrow{ justify-content:center; }
.hero-content .eyebrow::after{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--electric); flex-shrink:0;
}
/* Meme taille que les bandeaux des pages internes, pour que l'accueil ne
   detonne pas : clamp identique a celui de .page-hero h1. */
.hero h1{
  font-size:clamp(2.8rem, 6vw, 5.4rem);
  max-width:20ch;
  margin-bottom:1.8rem;
}
.baseline{
  font-size:clamp(1rem, 1.3vw, 1.2rem);
  font-weight:400;
  line-height:1.65;
  color:var(--celest);
  max-width:56ch;
  margin-bottom:2.6rem;
}
.hero-ctas{ display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; }


/* ---------- Animation d'entrée du texte (pop) ---------- */
.w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; }
.wi{ display:inline-block; transform:translateY(115%); }
.go .wi{
  transform:translateY(0);
  transition:transform .55s cubic-bezier(.3,1.4,.45,1);
  transition-delay:var(--pd, 0s);
}
.pop-el{ opacity:0; transform:translateY(18px) scale(.96); filter:blur(6px); }
.go .pop-el{
  opacity:1; transform:none; filter:none;
  transition:
    opacity .45s ease-out,
    transform .55s cubic-bezier(.3,1.4,.45,1),
    filter .4s ease-out;
  transition-delay:var(--pd, 0s);
}
@media (prefers-reduced-motion: reduce){
  .wi{ transform:none; }
  .pop-el{ opacity:1; transform:none; filter:none; }
}
/* ---------- Sections ---------- */
.sec{ padding-block:var(--sp-sec); background:var(--bg); }
.sec.on-dark{ background:var(--night); color:var(--txt-inv); }
.sec.on-deep{ background:var(--night-deep); color:var(--txt-inv); }

/* ---------- Anneaux décoratifs (déclinés des cercles du bandeau CTA) :
   grands cercles au trait fin, très discrets, sur les fonds bleu marine.
   Tailles et dispositions variées par section via .v1 → .v4. ---------- */
.sec.on-dark, .sec.on-deep{ overflow:hidden; }
.arcs{ position:absolute; inset:0; pointer-events:none; }
.arcs ~ .wrap{ position:relative; z-index:1; }
.arcs i{
  position:absolute; display:block;
  border:1px solid var(--night-soft);
  border-radius:50%;
}
/* Fonds clairs : même motif, trait bleu ciel pâle (décliné de --celest) */
.sec:has(> .arcs){ overflow:hidden; }
.arcs.day i{ border-color:rgba(160,200,243,.55); }
/* v1 — deux grands anneaux qui débordent en haut à gauche + un petit en bas */
.arcs.v1 i:nth-child(1){ left:-14%; top:-55%; width:54vw; height:54vw; }
.arcs.v1 i:nth-child(2){ left:-4%;  top:-34%; width:36vw; height:36vw; }
.arcs.v1 i:nth-child(3){ right:14%; bottom:-18%; width:15vw; height:15vw; }
/* v2 — anneaux en bas à droite, tailles contrastées + petit en haut à gauche */
.arcs.v2 i:nth-child(1){ right:-22%; bottom:-62%; width:60vw; height:60vw; }
.arcs.v2 i:nth-child(2){ right:-9%;  bottom:-42%; width:40vw; height:40vw; }
.arcs.v2 i:nth-child(3){ left:7%; top:12%; width:11vw; height:11vw; }
/* v3 — grand anneau centré à gauche, moyen en haut à droite, petit en bas */
.arcs.v3 i:nth-child(1){ left:-26%; top:22%; width:46vw; height:46vw; }
.arcs.v3 i:nth-child(2){ right:-11%; top:-32%; width:30vw; height:30vw; }
.arcs.v3 i:nth-child(3){ left:34%; bottom:-14%; width:19vw; height:19vw; }
/* v4 — moyen en haut au centre + très grand qui déborde en bas à gauche */
.arcs.v4 i:nth-child(1){ left:38%; top:-40%; width:32vw; height:32vw; }
.arcs.v4 i:nth-child(2){ left:-30%; bottom:-70%; width:64vw; height:64vw; }
.arcs.v4 i:nth-child(3){ right:6%; bottom:8%; width:13vw; height:13vw; }

/* Accent BLANC sur tous les fonds sombres (sinon l'accent noir par défaut serait
   invisible). Les fonds clairs gardent l'accent noir défini dans :root. */
.site-head, .mobile-menu, .page-hero, .hero,
.sec.on-dark, .sec.on-deep, .cta-band,
.pillar, .member, .quote, .site-foot,
.tm-card, .tm-panel{
  --electric:#ffffff;
}

/* ---------- Transition rideau généralisée (effet Eight) : chaque section
   s'épingle et se fait recouvrir par la suivante à chaque bascule de fond ---------- */
main > section{ position:relative; z-index:1; }
body.stack main > section{
  position:sticky;
  top:0; /* corrigé par JS pour les sections plus hautes que l'écran */
  box-shadow:0 -28px 56px -16px rgba(3,8,15,.45);
}
main > section .wrap,
main > section .hero-content{ will-change:transform, opacity; }
.pin-stats{
  min-height:100svh;
  display:flex; align-items:center;
}
.pin-stats .wrap{ width:100%; }
.sec-head{ margin-bottom:clamp(3rem, 6vh, 5rem); }
.sec-head h2{ font-size:clamp(3rem, 7.6vw, 6.6rem); letter-spacing:-.025em; }
.sec-head .sub{
  margin-top:1.4rem;
  font-size:1.05rem; color:var(--txt-2);
  max-width:92ch;   /* largeur de lecture confortable, sans coupures serrees */
}
.on-dark .sec-head .sub, .on-deep .sec-head .sub{ color:var(--txt-inv-2); }

/* ---------- Chiffres clés ---------- */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line-dark);
}
.stat{
  padding:clamp(2rem, 4vh, 3.4rem) 1.6rem;
  border-right:1px solid var(--line-dark);
}
.stat:last-child{ border-right:0; }
.stat .num{
  font-family:var(--f-head); font-weight:400;
  font-size:var(--fs-stat);
  line-height:.95; letter-spacing:-.035em;
  color:#fff;
  font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline;
}
.stat .num sup{
  font-size:.32em; color:var(--electric); font-weight:400;
  transform:translateY(-1.2em);
}
.stat .lbl{
  margin-top:1.1rem;
  font-family:var(--f-head); font-size:.72rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--txt-inv-2);
}
@media (max-width: 920px){
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--line-dark); }
}
@media (max-width: 520px){
  .stats-grid{ grid-template-columns:1fr; }
  .stat{ border-right:0 !important; border-bottom:1px solid var(--line-dark); }
  .stat:last-child{ border-bottom:0; }
}

/* ---------- Liste d'expertises numérotées, groupées par pôle ---------- */
.xp-group{ margin-bottom:clamp(4.5rem, 10vh, 8rem); }
.xp-group:last-child{ margin-bottom:0; }

/* En-tête de pôle : grand titre = « partie » nettement séparée */
.xp-group-head{
  display:flex; align-items:baseline; gap:1.4rem; flex-wrap:wrap;
  padding-bottom:1.6rem; margin-bottom:.6rem;
  border-bottom:1px solid var(--line);
}
a.xp-group-head{ text-decoration:none; color:inherit; cursor:pointer; }
.xp-group-idx{
  font-family:var(--f-num);
  font-size:clamp(1.6rem, 3.2vw, 2.6rem);
  line-height:1; color:var(--electric);
  flex-shrink:0;
  transition:color .3s;
}
.xp-group-title{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(2rem, 5.2vw, 3.7rem);
  letter-spacing:-.025em; line-height:1.02;
  color:var(--night); margin:0;
  transition:color .3s;
}
.xp-group-count{
  margin-left:auto; align-self:center;
  font-family:var(--f-head); font-size:.72rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--txt-2);
}
.xp-group-go{
  align-self:center; flex-shrink:0;
  font-size:1.5rem; line-height:1; color:var(--night);
  transition:transform .35s var(--ease-out), color .3s;
}
a.xp-group-head:hover .xp-group-title,
a.xp-group-head:hover .xp-group-idx,
a.xp-group-head:hover .xp-group-go{ color:var(--electric); }
a.xp-group-head:hover .xp-group-go{ transform:translateX(8px); }
@media (max-width: 700px){ .xp-group-go{ display:none; } }

/* Apparition étagée : l'en-tête surgit, les domaines suivent en cascade */
.xp-group[data-reveal]{ opacity:1; transform:none; transition:none; }
.xp-group .xp-group-head,
.xp-group .xp-row{
  opacity:0; transform:translateY(30px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.xp-group.in .xp-group-head{ opacity:1; transform:none; transition-delay:0s; }
.xp-group.in .xp-list .xp-row{ opacity:1; transform:none; }
.xp-group.in .xp-list .xp-row:nth-child(1){ transition-delay:.30s; }
.xp-group.in .xp-list .xp-row:nth-child(2){ transition-delay:.39s; }
.xp-group.in .xp-list .xp-row:nth-child(3){ transition-delay:.48s; }
.xp-group.in .xp-list .xp-row:nth-child(4){ transition-delay:.57s; }
.xp-group.in .xp-list .xp-row:nth-child(5){ transition-delay:.66s; }
.xp-group.in .xp-list .xp-row:nth-child(6){ transition-delay:.75s; }
@media (prefers-reduced-motion: reduce){
  .xp-group .xp-group-head,
  .xp-group .xp-row{ opacity:1; transform:none; transition:none; }
}
.xp-row{
  display:grid;
  grid-template-columns:110px 1fr auto;
  align-items:center;
  gap:2rem;
  padding:1.7rem 0;
  border-top:1px solid var(--line);
  position:relative;
  transition:padding-left .4s var(--ease-out);
}
.xp-list .xp-row:last-child{ border-bottom:1px solid var(--line); }
.xp-num{
  font-family:var(--f-num);
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  color:var(--celest);
  line-height:1;
  transition:color .3s;
}
.xp-body h3{ font-size:var(--fs-h3); margin-bottom:.35rem; transition:color .3s; }
.xp-body p{ color:var(--txt-2); font-size:.95rem; max-width:60ch; }
.xp-arrow{
  width:46px; height:46px;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--night);
  transition:background .3s, border-color .3s, color .3s, transform .4s var(--ease-out);
  flex-shrink:0;
}
.xp-row:hover{ padding-left:14px; }
.xp-row:hover .xp-num{ color:var(--electric); }
.xp-row:hover .xp-body h3{ color:var(--electric); }
.xp-row:hover .xp-arrow{
  background:#0E1A2C; border-color:#0E1A2C;
  color:#fff; transform:rotate(-45deg);
}
@media (max-width: 700px){
  .xp-row{ grid-template-columns:64px 1fr; }
  .xp-arrow{ display:none; }
}

/* ---------- Pôles d'expertise (accueil) : bento grid des 4 postes ----------
   Porté en vanilla depuis le composant React « BentoGrid/BentoCard » (21st.dev,
   shadcn) : blocs de tailles différentes selon la quantité de texte —
   Stratégie (texte long) en grand bloc vertical, Financement en bloc large,
   Pilotage & DFO en blocs compacts. Icône couleur du logo (--dot), halo en
   fond, et au survol : contenu qui remonte + CTA « Découvrir » qui apparaît. */
.offer-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:minmax(clamp(13rem, 28vh, 17rem), auto);
  gap:clamp(.9rem, 1.4vw, 1.2rem);
}
/* Ordre de lecture = chaine de valeur : pilotage, direction financiere,
   strategie, financement, expertise independante. */
.o-pilotage    { grid-column:1;     grid-row:1; }
.o-dfo         { grid-column:2;     grid-row:1; }
.o-strategie   { grid-column:3;     grid-row:1; }
.o-financement { grid-column:1 / 3; grid-row:2; }
.o-independance{ grid-column:3;     grid-row:2; }
.offer-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:#fff;
  border-radius:18px;
  box-shadow:0 0 0 1px rgba(6,14,28,.04), 0 2px 4px rgba(6,14,28,.05), 0 12px 24px rgba(6,14,28,.06);
  transition:background .4s, box-shadow .4s;
}
.offer-card:hover{
  background:#FAFBFD;
  box-shadow:0 0 0 1px rgba(6,14,28,.05), 0 4px 8px rgba(6,14,28,.06), 0 18px 36px rgba(6,14,28,.09);
}
/* Halo décoratif dans la couleur du poste (calque « background » du bento) */
.offer-bg{
  position:absolute; top:-6rem; right:-6rem;
  width:18rem; height:18rem; border-radius:50%;
  background:radial-gradient(circle, var(--dot, var(--electric)) 0%, transparent 70%);
  opacity:.1; filter:blur(14px);
  pointer-events:none;
  transition:opacity .45s, transform .45s var(--ease-out);
}
.offer-card:hover .offer-bg{ opacity:.18; transform:scale(1.18); }
.offer-body{
  position:relative; z-index:1;
  padding:clamp(1.6rem, 2.6vw, 2.4rem);
  transition:transform .35s var(--ease-out);
}
.offer-card:hover .offer-body{ transform:translateY(-14px); }
.offer-icon{
  width:44px; height:44px;
  color:var(--dot, var(--electric));
  margin-bottom:1rem;
  transform-origin:left bottom;
  transition:transform .35s var(--ease-out);
}
.offer-card:hover .offer-icon{ transform:scale(.78); }
.offer-card h3{
  font-family:var(--f-head); font-weight:600;
  font-size:clamp(1.6rem, 2.5vw, 2.3rem);
  letter-spacing:-.02em; line-height:1.08;
  color:var(--night); margin:0 0 .8rem;
}
.offer-card p{ color:var(--txt-2); font-size:1rem; line-height:1.65; max-width:46ch; }
/* CTA masqué qui surgit du bas au survol (comme le BentoCard) */
.offer-cta{
  position:absolute; left:0; bottom:0; z-index:1;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:1.15rem clamp(1.6rem, 2.6vw, 2.4rem);
  font-family:var(--f-head); font-size:.76rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--electric); text-decoration:none;
  opacity:0; transform:translateY(12px);
  transition:opacity .35s, transform .35s var(--ease-out), color .3s;
}
.offer-card:hover .offer-cta,
.offer-card:focus-within .offer-cta{ opacity:1; transform:none; }
.offer-cta .arr{ transition:transform .3s var(--ease-out); }
.offer-cta:hover{ color:var(--night); }
.offer-cta:hover .arr{ transform:translateX(6px); }
@media (max-width: 880px){
  .offer-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .o-strategie, .o-financement, .o-pilotage, .o-dfo, .o-independance{ grid-column:auto; grid-row:auto; }
  .offer-card{ min-height:15rem; }
  .offer-card:hover .offer-body{ transform:none; }
  .offer-cta{ position:relative; opacity:1; transform:none; padding-top:0; }
}
@media (prefers-reduced-motion: reduce){
  .offer-body, .offer-icon, .offer-bg, .offer-cta{ transition:none; }
  .offer-card:hover .offer-body, .offer-card:hover .offer-icon{ transform:none; }
  .offer-cta{ opacity:1; transform:none; }
}

/* ---------- Pôles : liste verticale sobre (voir .xp-* plus haut) ----------
   La liste des 17 domaines s'affiche en 3 groupes (.xp-group) avec en-tête de pôle
   cliquable et apparition en cascade au scroll ; le style est défini dans le bloc
   « .xp-* » ci-dessus. */
/* #expertises garde sa propre chorégraphie : on l'exclut du rideau sticky */
body.stack main > section#expertises{ position:relative; top:auto; box-shadow:none; }

/* Sections de dossiers dépliables (pages pôles) : leur hauteur change quand on ouvre
   un accordéon, ce qui est incompatible avec le rideau sticky à hauteur figée (les
   dossiers du bas se retrouvaient poussés hors de l'écran, recouverts par la section
   suivante). On les sort donc du rideau — défilement normal. */
body.stack main > section#domaines{ position:relative; top:auto; box-shadow:none; }

/* ---------- Fond animé « Background Paths » (porté en vanilla, SVG) ----------
   Nappe de traits noirs qui ondulent en boucle sur fond blanc. Épinglé (sticky)
   pendant tout le défilement de sa section hôte, derrière les contenus. Les traits
   sont générés par le JS (2 sens × 36 courbes). Utilisé sur la section « associés »
   de cabinet.html (#team). */
.bg-paths{
  position:sticky; top:0;
  height:100vh; margin-bottom:-100vh;
  z-index:0; pointer-events:none; overflow:hidden;
}
.bg-paths svg{ position:absolute; inset:0; width:100%; height:100%; }
.bg-paths path{ fill:none; stroke:#000; stroke-linecap:round; }
@keyframes bgPathFlow{
  0%   { stroke-dashoffset:1; }
  100% { stroke-dashoffset:0; }
}
@media (prefers-reduced-motion: reduce){
  .bg-paths path{ animation:none !important; }
}
/* Section hôte du fond animé (associés) : fond blanc, exclue du rideau, contenu au-dessus */
#team{ background:#fff; }
#team .wrap{ position:relative; z-index:1; }
body.stack main > section#team{ position:relative; top:auto; box-shadow:none; }

/* ---------- Globe décoratif (sections chiffres, accueil & cabinet) ----------
   Sphère de points en rotation lente (canvas 2D), calée à droite derrière les
   chiffres. Pur élément de décor : aucune interaction, aucun repère dessus. */
.has-globe{ overflow:hidden; }
.has-globe .wrap{ position:relative; z-index:1; }
canvas.globe{
  position:absolute; top:50%; right:clamp(-14rem, -8vw, -4rem);
  transform:translateY(-50%);
  width:min(44rem, 52vw); aspect-ratio:1 / 1;
  pointer-events:none; z-index:0;
  opacity:.5;
}
@media (max-width: 880px){ canvas.globe{ display:none; } }

/* ---------- Piliers / valeurs ---------- */
.pillars{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1px; background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.pillar{
  background:var(--night);
  padding:clamp(2rem, 4vw, 3.2rem);
  min-height:340px;
  display:flex; flex-direction:column;
  transition:background .4s;
}
.pillar:hover{ background:var(--night-soft); }
.pillar .p-num{
  font-family:var(--f-num); font-size:2.4rem;
  color:var(--electric); margin-bottom:auto;
}
.pillar h3{ font-size:1.5rem; margin:2.2rem 0 .9rem; }
.pillar p{ color:var(--txt-inv-2); font-size:.95rem; }
@media (max-width: 880px){ .pillars{ grid-template-columns:1fr; } }

/* ---------- Équipe ---------- */
.team-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(1rem, 1.8vw, 1.6rem);
}
@media (max-width: 1040px){ .team-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px){ .team-grid{ grid-template-columns:1fr; } }
/* Badge solide : volume, coins arrondis, biseaux (validé en widget) */
.member{
  background:linear-gradient(155deg, #16283F 0%, #0A1830 48%, #060E1C 100%);
  border:1px solid rgba(160,200,243,.20);
  border-radius:22px;
  padding:clamp(1.8rem, 3vw, 2.6rem);
  position:relative;
  transform-style:preserve-3d;
  transition:transform .08s linear, box-shadow .45s;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.16),
    inset 0 -3px 6px rgba(0,0,0,.5),
    0 18px 40px -18px rgba(2,7,15,.55);
}
.member::before{
  content:""; position:absolute; inset:0;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 30%, transparent 48%);
  pointer-events:none;
}
.member::after{
  content:""; position:absolute; inset:-3px;
  border-radius:25px;
  background:#02070F;
  transform:translateZ(-10px);
}
.member:hover{ box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.16),
    inset 0 -3px 6px rgba(0,0,0,.5),
    0 28px 56px -20px rgba(2,7,15,.75);
}
.member .avatar{
  width:64px; height:64px;
  border-radius:14px;
  background:linear-gradient(160deg, #1E3252, #0B1B33);
  border:1px solid rgba(160,200,243,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 4px 10px rgba(2,7,15,.5);
  color:var(--celest);
  font-family:var(--f-num); font-size:1.5rem;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.6rem;
  transform:translateZ(36px);
}
.member h3{ font-size:1.35rem; font-weight:400; color:#fff; transform:translateZ(30px); }
.member .role{
  font-family:var(--f-head); font-size:.68rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--electric);
  margin:.5rem 0 1.1rem;
  transform:translateZ(26px);
}
.member p{ font-size:.93rem; color:var(--txt-inv-2); transform:translateZ(20px); }
.member .creds{
  margin-top:1.4rem; padding-top:1.1rem;
  border-top:1px solid rgba(160,200,243,.18);
  font-size:.83rem; color:var(--txt-inv-2);
  transform:translateZ(16px);
}
.member .creds b{ font-weight:600; color:#fff; }

/* ---------- Vitrine équipe (porté du composant cybernetic-team-showcase) ---------- */
#team{ overflow:hidden; }
.tm-aurora{ position:absolute; inset:0; pointer-events:none; opacity:.55; }
.tm-aurora i{ position:absolute; border-radius:50%; filter:blur(110px); will-change:transform; }
.tm-aurora i:first-child{
  width:44vw; height:44vw; left:-10vw; top:-8vw;
  background:radial-gradient(circle, rgba(62,140,255,.32), transparent 65%);
  animation:moveAurora1 16s ease-in-out infinite alternate;
}
.tm-aurora i:last-child{
  width:38vw; height:38vw; right:-8vw; bottom:-10vw;
  background:radial-gradient(circle, rgba(160,200,243,.20), transparent 65%);
  animation:moveAurora2 19s ease-in-out infinite alternate;
}
@keyframes moveAurora1{ from{ transform:translate(0,0); } to{ transform:translate(100px,80px); } }
@keyframes moveAurora2{ from{ transform:translate(0,0); } to{ transform:translate(-100px,-80px); } }

.tm-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(1rem, 1.8vw, 1.6rem);
  perspective:1200px;
}
@media (max-width:1180px){ .tm-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:880px){ .tm-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .tm-grid{ grid-template-columns:1fr; } }

.tm-card{
  position:relative; aspect-ratio:3/4;
  border-radius:14px;
  background:linear-gradient(160deg,#0D1B30,#060E1C);
  transform-style:preserve-3d;
}
.tm-card.is-partner{ cursor:pointer; }
.tm-card[data-reveal].tilt{ transition:transform .08s linear; }
/* Entrée en cascade avec rebond (surcharge du data-reveal générique) */
.tm-card[data-reveal]{
  opacity:0; transform:translateY(60px) scale(.96);
  transition:opacity .55s ease var(--d,0s), transform .9s cubic-bezier(.3,1.45,.45,1) var(--d,0s);
}
.tm-card[data-reveal].in{ opacity:1; transform:none; }

.tm-inner{
  position:absolute; inset:.9rem;
  container-type:inline-size;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:1.5rem 1.1rem 1.2rem;
  background:rgba(6,14,28,.7);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(160,200,243,.18);
  border-radius:10px;
  transform:translateZ(50px);
}
.tm-tag{
  position:absolute; top:.85rem; right:.85rem;
  font-family:var(--f-head); font-size:.58rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--celest); border:1px solid rgba(160,200,243,.35);
  padding:.3em .75em; border-radius:99px;
}
.tm-photo{
  width:66%; height:auto; aspect-ratio:1;               /* repli si cqi absent */
  width:66cqi; height:66cqi; max-width:200px; max-height:200px;
  border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#1E3252,#0B1B33);
  border:2px solid rgba(160,200,243,.35);
  color:var(--celest);
  margin:auto 0 1.1rem;
}
.tm-photo svg{ width:46%; height:46%; }
.tm-photo img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center center;
  border-radius:50%;
}
/* Cartes « photo + nom » sans fonction : contenu centré verticalement */
.tm-card.is-name .tm-inner{ justify-content:center; }
.tm-card.is-name .tm-photo{ margin:0 0 1.1rem; }
.tm-card h3{ font-size:1.1rem; font-weight:700; color:#fff; line-height:1.25; }
.tm-role{
  font-family:var(--f-head); font-size:.6rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--electric); margin-top:.5rem;
}
.tm-foot{
  margin-top:auto; padding-top:.8rem;
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
}
.tm-link{
  color:var(--txt-inv-2);
  opacity:0; transform:translateY(6px);
  transition:opacity .3s, transform .3s, color .3s;
}
.tm-card:hover .tm-link, .tm-card:focus-visible .tm-link{ opacity:1; transform:none; }
.tm-link:hover{ color:#fff; }
.tm-link svg{ width:18px; height:18px; display:block; }
.tm-more{
  font-family:var(--f-head); font-size:.62rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--celest); opacity:0; transition:opacity .3s;
}
.tm-card.is-partner:hover .tm-more, .tm-card.is-partner:focus-visible .tm-more{ opacity:.85; }

/* Overlay profil associé */
.tm-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  background:rgba(2,7,15,.78);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .35s;
}
.tm-overlay[hidden]{ display:none; }
.tm-overlay.open{ opacity:1; }
.tm-panel{
  position:relative; width:min(640px, 100%);
  max-height:min(84vh, 100%); overflow:auto;
  background:linear-gradient(160deg,#0F2038,#060E1C);
  border:1px solid rgba(160,200,243,.22);
  border-radius:18px;
  padding:clamp(1.8rem, 4vw, 3rem);
  transform:translateY(26px) scale(.97);
  transition:transform .4s cubic-bezier(.22,1.2,.36,1);
}
.tm-overlay.open .tm-panel{ transform:none; }
.tm-close{
  position:absolute; top:1rem; right:1rem;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(160,200,243,.3);
  background:transparent; color:var(--celest);
  font-size:1.3rem; line-height:1; cursor:pointer;
  transition:background .3s, color .3s;
}
.tm-close:hover{ background:rgba(160,200,243,.15); color:#fff; }
.tm-profile{ text-align:left; }
.tm-profile .tm-photo{ width:120px; max-width:120px; height:120px; margin:0 0 1.2rem; }
.tm-profile h3{ font-size:1.7rem; font-weight:600; color:#fff; }
.tm-profile .tm-role{ margin:.5rem 0 1.2rem; }
.tm-profile p{ font-size:.95rem; color:var(--txt-inv-2); }
.tm-profile p + p{ margin-top:.9rem; }
.tm-creds{
  margin-top:1.3rem; padding-top:1.1rem;
  border-top:1px solid rgba(160,200,243,.18);
  font-size:.85rem;
}
.tm-creds b{ color:#fff; font-weight:600; }

@media (prefers-reduced-motion: reduce){
  .tm-aurora i{ animation:none; }
  .tm-overlay, .tm-panel{ transition:none; }
}

/* ---------- Témoignages ---------- */
.quotes-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(2rem, 4vw, 3.5rem);
}
.quote{
  border-top:1px solid var(--line-dark);
  padding-top:1.8rem;
  display:flex; flex-direction:column;
}
.quote blockquote{
  font-family:var(--f-head); font-weight:400;
  font-size:1.12rem; line-height:1.55;
  color:#DCE6F2;
  flex:1; margin-bottom:1.8rem;
}
.quote blockquote::before{ content:"« "; color:var(--electric); }
.quote blockquote::after{ content:" »"; color:var(--electric); }
.quote .who b{ display:block; font-weight:600; font-size:.95rem; color:#fff; }
.quote .who span{
  font-family:var(--f-head); font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--txt-inv-2);
}
@media (max-width: 880px){ .quotes-grid{ grid-template-columns:1fr; } }

/* ---------- Actualités (carrousel) ---------- */
.news-track{
  display:flex; gap:clamp(1.2rem, 2vw, 2rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:1.2rem;
  scrollbar-width:none;
}
.news-track::-webkit-scrollbar{ display:none; }
.news-card{
  flex:0 0 min(420px, 82vw);
  scroll-snap-align:start;
  background:var(--surface);
  border:1px solid var(--line);
  padding:clamp(1.8rem, 3vw, 2.4rem);
  display:flex; flex-direction:column;
  min-height:320px;
  transition:transform .45s var(--ease-out), box-shadow .45s;
}
.news-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -24px rgba(14,26,44,.18); }
.news-card .tag{
  display:inline-flex; align-self:flex-start;
  font-family:var(--f-head); font-size:.62rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--electric);
  border:1px solid var(--electric);
  padding:.35rem .8rem;
  margin-bottom:1.6rem;
}
.news-card time{
  font-family:var(--f-head); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-2);
}
.news-card h3{ font-size:1.28rem; font-weight:400; margin:.6rem 0 .9rem; }
.news-card p{ font-size:.92rem; color:var(--txt-2); flex:1; }
.news-card .cta-line{ margin-top:1.6rem; color:var(--night); }

/* ---------- Bande CTA ---------- */
.cta-band{
  background:var(--night);
  color:var(--txt-inv);
  padding-block:var(--sp-sec);
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute;
  right:-16%; top:-45%;
  width:56vw; height:56vw;
  border:1px solid var(--night-soft);
  border-radius:50%;
}
.cta-band::after{
  content:""; position:absolute;
  right:-10%; top:-32%;
  width:44vw; height:44vw;
  border:1px solid rgba(62,140,255,.25);
  border-radius:50%;
}
.cta-band h2{ font-size:var(--fs-h2); max-width:18ch; margin-bottom:2.6rem; }
.cta-band .wrap{ position:relative; z-index:2; }
/* Page Finaction & Associes : le bandeau de fin renvoie vers les deux pages
   d'expertise plutot que vers la prise de contact. */
.cta-liens{ display:flex; flex-wrap:wrap; gap:1.2rem; }

/* ---------- Page hero (pages internes) — même fond à points, texte centré ---------- */
.page-hero{
  background:var(--night);
  color:var(--txt-inv);
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(84px + clamp(3rem, 7vh, 5rem)) 0 clamp(3.5rem, 7vh, 5rem);
  position:relative; overflow:hidden;
}
.page-hero h1{ font-size:clamp(2.8rem, 6vw, 5.4rem); max-width:20ch; margin-bottom:1.8rem; }
.page-hero .baseline{ font-size:clamp(1.1rem, 1.6vw, 1.5rem); max-width:82ch; margin-bottom:0; }
/* Mentions legales : une page de texte administratif n'a besoin ni d'un
   en-tete pleine hauteur ni d'une animation de fond. On garde le titre,
   on rend la place au contenu. */
.page-hero.is-court{
  min-height:0;
  padding:calc(84px + clamp(2.4rem, 5vh, 3.4rem)) 0 clamp(2rem, 4vh, 3rem);
}
.page-hero.is-court h1{ font-size:clamp(2rem, 3.4vw, 3rem); margin-bottom:0; }

/* ---------- Variantes de disposition du texte de hero (pages internes) ----------
   Chaque onglet cale son texte d'accueil à un endroit différent de l'espace :
   à gauche (Le cabinet), en diagonale (Finance & Évaluation), à droite (Capital Markets).
   Le halo de lisibilité (::after) suit la position du texte. Le bord gauche/droit
   s'aligne sur la colonne de contenu (1280px) comme le reste du site. */
.page-hero.hv-left,
.page-hero.hv-right{ padding-inline:max(var(--gutter), calc((100% - 1280px) / 2)); }
.page-hero.hv-left{ justify-content:flex-start; }
.page-hero.hv-right{ justify-content:flex-end; }
.page-hero.hv-bottom{ align-items:flex-end; }

.page-hero.hv-left .hero-content{ margin:0; padding:0; text-align:left; align-items:flex-start; }
.page-hero.hv-right .hero-content{ margin:0; padding:0; text-align:right; align-items:flex-end; }
/* hv-bottom : reste centré horizontalement, simplement ancré en bas */

.page-hero.hv-left::after{
  background:radial-gradient(ellipse 55% 62% at 30% 50%, rgba(6,14,28,.80) 0%, rgba(6,14,28,.28) 60%, rgba(6,14,28,0) 100%);
}
.page-hero.hv-right::after{
  background:radial-gradient(ellipse 55% 62% at 70% 50%, rgba(6,14,28,.80) 0%, rgba(6,14,28,.28) 60%, rgba(6,14,28,0) 100%);
}
.page-hero.hv-bottom::after{
  background:radial-gradient(ellipse 70% 52% at 50% 70%, rgba(6,14,28,.80) 0%, rgba(6,14,28,.28) 60%, rgba(6,14,28,0) 100%);
}

/* Variante diagonale : le bloc de texte est incliné pour courir en diagonale (bas-gauche
   → haut-droite) dans l'espace du hero. On centre le bloc puis on le fait pivoter. */
.page-hero.hv-diag{ justify-content:center; align-items:center; }
.page-hero.hv-diag .hero-content{
  transform:rotate(-11deg);
  transform-origin:center center;
  max-width:780px;
  text-align:center; align-items:center;
}
.page-hero.hv-diag::after{
  background:radial-gradient(ellipse 62% 58% at 50% 50%, rgba(6,14,28,.80) 0%, rgba(6,14,28,.28) 62%, rgba(6,14,28,0) 100%);
}

/* Mobile : on revient au centré pour ne pas coller le texte aux bords (et on redresse
   la diagonale, qui déborderait sur écran étroit). */
@media (max-width: 720px){
  .page-hero.hv-left, .page-hero.hv-right{ justify-content:center; padding-inline:0; }
  .page-hero.hv-left .hero-content,
  .page-hero.hv-right .hero-content{
    margin:0 auto; padding:0 var(--gutter);
    text-align:center; align-items:center;
  }
  .page-hero.hv-diag .hero-content{ transform:none; max-width:920px; }
}

/* ---------- Domaines détaillés (pages pôles) ---------- */
[id]{ scroll-margin-top:110px; }
/* ---------- Domaines : « dossiers » dépliables (accordéon façon Apple) ---------- */
.domain{ border-top:1px solid var(--line); position:relative; }
.domain:last-of-type{ border-bottom:1px solid var(--line); }

/* En-tête cliquable du dossier */
.acc-head{
  width:100%; background:none; border:0; cursor:pointer;
  font:inherit; color:inherit; text-align:left;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:clamp(1rem, 2.5vw, 2rem);
  padding:clamp(1.4rem, 3.2vh, 2.1rem) clamp(.7rem, 1.5vw, 1.3rem);
  border-radius:16px;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out);
}
.acc-head .dnum{
  font-family:var(--f-num);
  font-size:clamp(1.7rem, 3vw, 2.6rem);
  color:var(--metier, var(--celest));
  line-height:1; font-variant-numeric:tabular-nums;
}
.acc-head .acc-title{
  font-family:var(--f-head); font-weight:500;
  font-size:clamp(1.2rem, 2vw, 1.65rem);
  letter-spacing:-.01em; color:var(--txt); line-height:1.2;
}
/* Survol d'un dossier fermé : simple relief (carte soulevée + ombre). AUCUN déplacement
   de la mise en page — pas d'aperçu qui se déplie au survol — pour que la sensation soit
   strictement identique quel que soit le sens de déplacement du curseur (haut→bas comme
   bas→haut). La citation s'affiche au clic (dossier ouvert). */
.domain:not(.open):hover{ z-index:5; }
.domain:not(.open):hover .acc-head{
  background:var(--surface);
  box-shadow:0 14px 32px -14px rgba(6,14,28,.30), 0 2px 6px -3px rgba(6,14,28,.14);
  transform:translateY(-3px);
  position:relative; z-index:2;
}
.acc-chev{
  width:11px; height:11px; margin-right:2px;
  border-right:2px solid var(--txt-2);
  border-bottom:2px solid var(--txt-2);
  transform:rotate(45deg); transition:transform .35s var(--ease-out);
}
.domain.open .acc-chev{ transform:rotate(-135deg); }

/* Panneau dépliant : animation de hauteur via grid-template-rows 0fr→1fr */
.acc-panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease-out);
}
.domain.open .acc-panel{ grid-template-rows:1fr; }
.acc-panel-in{ overflow:hidden; }
.acc-panel-pad{
  padding:.2rem 0 clamp(1.8rem, 3.5vh, 2.6rem);
  padding-left:clamp(0rem, 4vw, 3.6rem);
  opacity:0; transition:opacity .4s var(--ease-out) .05s;
}
.domain.open .acc-panel-pad{ opacity:1; }


/* Tableau des prestations : chaque catégorie devient une CARTE en relief — surface
   blanche, ombre en couches, filet accent dégradé (bleu ciel → marine) sur la catégorie,
   puces en losange, et légère élévation au survol. */
.spec-table{
  margin-top:1.3rem;
  display:flex; flex-direction:column;
  gap:clamp(.8rem, 1.4vw, 1.1rem);
}
.spec-row{
  display:grid; grid-template-columns:200px 1fr;
  gap:clamp(1.2rem, 2.6vw, 2.6rem);
  padding:clamp(1.35rem, 2.4vw, 2rem);
  border-radius:16px;
  background:var(--surface);
  box-shadow:
    0 0 0 1px rgba(6,14,28,.05),
    0 2px 4px rgba(6,14,28,.04),
    0 16px 34px -20px rgba(6,14,28,.22);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.spec-row:hover{
  transform:translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(6,14,28,.06),
    0 6px 12px rgba(6,14,28,.05),
    0 28px 52px -20px rgba(6,14,28,.30);
}
/* Catégorie : label + filet vertical dégradé (accent de marque) */
.spec-cat{
  font-family:var(--f-head);        /* police Apple (SF Pro) */
  font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight:700;
  letter-spacing:-.015em; text-transform:none;
  color:var(--night); line-height:1.25;
  padding:.05rem 0 0 1rem;
  position:relative;
}
.spec-cat::before{
  content:""; position:absolute; left:0; top:.2rem; bottom:.1rem;
  width:3px; border-radius:3px;
  background:linear-gradient(180deg, var(--metier, var(--celest)), transparent);
}
.spec-cells{ display:grid; grid-template-columns:1fr 1fr; gap:.15rem 2.4rem; }
.spec-cells ul{ display:block; }
.spec-cells li{
  padding:.5rem .6rem; border-radius:9px;
  font-family:var(--f-head);        /* police Apple (SF Pro) */
  font-size:.93rem; font-weight:600; color:var(--txt); line-height:1.45;
  letter-spacing:-.01em;
  display:flex; gap:.7rem; align-items:baseline;
  transition:background .25s, transform .25s var(--ease-out);
}
.spec-cells li:hover{ background:rgba(28,48,80,.06); transform:translateX(2px); }
.spec-cells li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--txt);            /* puce ronde noire */
  flex-shrink:0; transform:translateY(1px);
}
@media (max-width: 760px){
  .acc-panel-pad{ padding-left:0; }
  .spec-row{ grid-template-columns:1fr; gap:.5rem; padding:1.3rem 1.2rem; }
  .spec-cat{ padding-top:0; }
  .spec-cells{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .acc-panel{ transition:none; }
  .acc-chev, .acc-panel-pad, .acc-head, .spec-row, .spec-cells li{ transition:none; }
  .domain:not(.open):hover .acc-head{ transform:none; }
  .spec-row:hover{ transform:none; }
  .spec-cells li:hover{ transform:none; }
}

/* ---------- Contact ---------- */
.contact-cards{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(1.2rem, 2vw, 2rem);
  margin-bottom:clamp(3rem, 7vh, 5rem);
}
.ccard{
  background:var(--surface);
  border:1px solid var(--line);
  padding:clamp(1.6rem, 2.6vw, 2.4rem);
  position:relative; overflow:hidden;
}
.ccard::before{
  content:""; position:absolute; top:0; left:0;
  width:100%; height:3px; background:var(--electric);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .45s var(--ease-out);
}
.ccard:hover::before{ transform:scaleX(1); }
.ccard h3{ font-size:1.3rem; font-weight:600; }
.ccard .role{
  font-family:var(--f-head); font-size:.66rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--electric); margin:.5rem 0 1.3rem;
}
.ccard .row{
  display:flex; gap:1rem;
  padding:.6rem 0; border-top:1px solid var(--line);
  font-size:.9rem;
}
.ccard .row b{ min-width:70px; font-weight:600; }
.ccard .row a{ color:var(--txt-2); transition:color .3s; overflow-wrap:anywhere; }
.ccard .row a:hover{ color:var(--electric); }
@media (max-width: 880px){ .contact-cards{ grid-template-columns:1fr; } }

/* Le bloc de coordonnees a ete retire : il faisait doublon avec les fiches
   des associes au-dessus et avec le pied de page. Reste le formulaire seul,
   ramene a une largeur de lecture confortable et centre sous les fiches. */
.contact-split{
  display:grid; grid-template-columns:minmax(0, 680px);
  justify-content:start;   /* au fer a gauche, comme le reste du site */
}
/* Accroche du formulaire : sans elle, la page passait des fiches des associes
   directement aux champs a remplir, sans rien dire au visiteur. */
.form-titre{
  font-size:clamp(1.7rem, 2.6vw, 2.3rem);
  margin-bottom:clamp(1.4rem, 2.5vh, 2rem);
}
.coord{
  display:flex; gap:1.2rem;
  padding:.85rem 0; border-top:1px solid var(--line);
  font-size:.95rem;
}
.coord b{ min-width:88px; font-weight:600; }
.coord a{ color:var(--txt-2); transition:color .3s; }
.coord a:hover{ color:var(--electric); }

form{ display:flex; flex-direction:column; gap:1.3rem; }
.field label{
  display:block;
  font-family:var(--f-head); font-size:.64rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--txt-2); margin-bottom:.55rem;
}
.field input, .field textarea{
  width:100%;
  border:1px solid var(--line);
  background:var(--surface);
  padding:.9rem 1rem;
  font-family:var(--f-body); font-size:.95rem; font-weight:400;
  color:var(--txt);
  transition:border-color .3s;
}
.field input:focus, .field textarea:focus{
  outline:2px solid var(--electric); outline-offset:0;
  border-color:var(--electric);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
@media (max-width: 560px){ .field-row{ grid-template-columns:1fr; } }
form .btn{ align-self:flex-start; }

.legal{
  margin-top:clamp(3rem, 7vh, 5rem);
  padding-top:2.2rem;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1.6rem;
  font-size:.83rem; color:var(--txt-2);
}
.legal b{
  display:block;
  font-family:var(--f-head); font-size:.62rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--txt); margin-bottom:.35rem;
}
@media (max-width: 760px){ .legal{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
/* Le pied de page est le dernier volet du rideau : il doit recouvrir
   entierement la section epinglee qu'il remonte. Il lui faut donc au moins
   la hauteur de l'ecran, sinon le bandeau precedent reste visible au-dessus.
   Le contenu est centre verticalement dans ce volet. */
.site-foot{
  background:var(--night-deep);
  color:var(--txt-inv-2);
  padding:clamp(3.5rem, 7vh, 5.5rem) 0 2.4rem;
  font-size:.9rem;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
}
.foot-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:3rem;
  padding-bottom:3rem;
  margin-bottom:2rem;
  border-bottom:1px solid var(--line-dark);
}
.foot-brand{ font-family:var(--f-head); font-size:1.3rem; font-weight:500; color:#fff; }
.foot-brand img{ width:198px; height:auto; display:block; }
.foot-tag{ margin-top:.8rem; max-width:34ch; }
.foot-h{
  font-family:var(--f-head); font-size:.66rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--celest); margin-bottom:1.2rem;
}
.site-foot li{ padding:.32rem 0; }
.site-foot a{ transition:color .3s; }
.site-foot a:hover{ color:#fff; }
.foot-legal{
  display:flex; gap:2rem; flex-wrap:wrap;
  font-size:.78rem;
}
@media (max-width: 760px){ .foot-grid{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- Pile de cartes « Nos valeurs » (effet card-stack) ---------- */
.vstack{ display:flex; flex-direction:column; align-items:center; }
.vstack-viewport{
  position:relative;
  width:100%; max-width:780px;
  height:620px;
  margin-inline:auto;
  overflow:hidden;
}
.vs-card{
  position:absolute;
  left:50%; bottom:0;
  width:min(740px, 96%);
  min-height:460px;
  transform:translateX(-50%);
  background:linear-gradient(155deg, #16283F 0%, #0A1830 55%, #081426 100%);
  border:1px solid rgba(160,200,243,.20);
  border-radius:24px;
  padding:3rem 2.8rem;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.14),
    inset 0 -3px 6px rgba(0,0,0,.5),
    0 30px 60px -22px rgba(2,7,15,.9);
  transition:transform .72s cubic-bezier(.22,1,.36,1), opacity .5s ease;
  will-change:transform, opacity;
}
/* Chiffres style Apple (San Francisco) */
.vs-num{
  font-family:var(--f-head);
  font-variant-numeric:tabular-nums;
  font-weight:500; letter-spacing:-.02em;
  font-size:3.9rem; line-height:1;
  color:var(--electric);
  display:block; margin-bottom:1.6rem;
}
/* Texte agrandi ×1.5 */
.vs-card h3{ font-size:2.25rem; font-weight:400; color:#fff; line-height:1.1; margin-bottom:1.2rem; }
.vs-card p{ font-size:1.46rem; line-height:1.5; color:#C6D4E6; }

.vs-card{ cursor:pointer; }
.vs-card.is-front{ transform:translateX(-50%) translateY(0)      scale(1);   z-index:3; opacity:1; }
.vs-card.is-mid{   transform:translateX(-50%) translateY(-28px)  scale(.95); z-index:2; opacity:.94; }
.vs-card.is-back{  transform:translateX(-50%) translateY(-56px)  scale(.9);  z-index:1; opacity:.82; }
.vs-card.is-gone{  transform:translateX(-50%) translateY(530px)  scale(1);   z-index:0; opacity:0; pointer-events:none; }

/* Indice « double tap » — très discret et petit */
.vs-hint{
  position:absolute; bottom:22px; left:50%;
  width:9px; height:9px; margin-left:-4.5px;
  border-radius:50%;
  background:rgba(200,224,255,.5);
  z-index:6; pointer-events:none;
  animation:vsTap 3s ease-in-out infinite;
}
.vs-hint::before{
  content:""; position:absolute; inset:-4px;
  border-radius:50%;
  border:1px solid rgba(160,200,243,.45);
  opacity:0;
  animation:vsRing 3s ease-in-out infinite;
}
@keyframes vsTap{
  0%,30%,100%{ transform:scale(1); }
  6%{ transform:scale(.55); }
  12%{ transform:scale(1); }
  18%{ transform:scale(.55); }
  24%{ transform:scale(1); }
}
@keyframes vsRing{
  0%{ transform:scale(1); opacity:0; }
  6%{ opacity:.5; }
  15%{ transform:scale(2.3); opacity:0; }
  17%{ transform:scale(1); opacity:.5; }
  26%{ transform:scale(2.3); opacity:0; }
  27%,100%{ opacity:0; transform:scale(1); }
}

/* État final : les 3 cartes côte à côte, une fois swipées */
.vstack.spread .vstack-viewport{
  max-width:100%; height:auto;
  display:flex; gap:clamp(1rem,1.8vw,1.6rem);
  overflow:visible;
}
.vstack.spread .vs-card{
  position:static; transform:none; opacity:1;
  width:auto; flex:1 1 0; min-height:0;
  cursor:default;
  animation:vsAppear .55s var(--ease-out) both;
}
.vstack.spread .vs-card:nth-child(2){ animation-delay:.08s; }
.vstack.spread .vs-card:nth-child(3){ animation-delay:.16s; }
.vstack.spread .vs-hint{ display:none; }

/* Stepper discret sous la pile : progression en 3 étapes. Une fois les 3
   cartes alignées, il s'illumine puis fond. */
.vs-steps{
  display:flex; justify-content:center; gap:.55rem;
  margin-top:1.7rem;
}
.vs-steps span{
  width:22px; height:2px; border-radius:2px;
  background:rgba(160,200,243,.22);
  transition:background .4s;
}
.vs-steps span.on{ background:var(--electric); }
.vs-steps.done{ opacity:0; transition:opacity .9s ease .9s; }
.vs-steps.done span{ animation:vsStepGlow .9s ease forwards; }
@keyframes vsStepGlow{
  0%  { box-shadow:none; }
  35% { background:var(--celest); box-shadow:0 0 10px rgba(62,140,255,.9), 0 0 22px rgba(62,140,255,.5); }
  100%{ background:var(--electric); box-shadow:0 0 6px rgba(62,140,255,.35); }
}
@media (prefers-reduced-motion: reduce){ .vs-steps{ display:none; } }
@keyframes vsAppear{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

@media (max-width:860px){
  .vstack.spread .vstack-viewport{ flex-direction:column; }
}
@media (max-width:600px){
  .vstack-viewport{ height:600px; }
  .vs-card{ padding:2.2rem 1.8rem; min-height:400px; }
  .vs-num{ font-size:3.2rem; }
  .vs-card h3{ font-size:1.9rem; }
  .vs-card p{ font-size:1.24rem; }
}

/* ---------- Révélations au scroll ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d, 0s);
}
[data-reveal].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ---------- Formulaire de contact : pot de miel + message d'état ---------- */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{
  margin:0; font-size:.95rem; line-height:1.5;
  padding:.85rem 1.1rem; border-radius:10px;
  border:1px solid rgba(6,14,28,.14); background:rgba(6,14,28,.04); color:var(--txt-2);
}
.form-status.is-ok{ border-color:rgba(30,140,90,.35); background:rgba(30,140,90,.08); color:#1B6A47; }
.form-status.is-err{ border-color:rgba(190,60,60,.35); background:rgba(190,60,60,.07); color:#96302F; }

/* ---------- Vitrine equipe : groupes Partners / Consultants ---------- */
.tm-group + .tm-group{ margin-top:clamp(2.6rem, 4.5vw, 4rem); }
.tm-group-title{
  font-family:var(--f-head); font-size:.72rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--electric);
  margin:0 0 1.3rem;
}

/* ---------- Page mentions legales ---------- */
.legal-page{ display:flex; flex-direction:column; gap:clamp(2.4rem,4vw,3.6rem); max-width:70ch; }
.legal-page h2{
  font-family:var(--f-head); font-weight:600; font-size:clamp(1.3rem,2.2vw,1.7rem);
  margin:0 0 1rem;
}
.legal-page p{ color:var(--txt-2); line-height:1.7; margin:0 0 .9rem; }
.legal-page p:last-child{ margin-bottom:0; }
.legal-row{
  display:flex; gap:1.2rem; align-items:baseline;
  padding:.7rem 0; border-top:1px solid var(--line); margin:0;
}
.legal-row b{ min-width:180px; font-weight:600; color:var(--txt); }
@media (max-width:560px){
  .legal-row{ flex-direction:column; gap:.2rem; }
  .legal-row b{ min-width:0; }
}

/* ---------- Lignes animees des heros ----------
   Le bleu vient de --celest : sur fond sombre, --electric est redefini en blanc
   par le design system, il ne peut donc pas servir ici. */
.paths{ color:var(--celest); }

/* ---------- Rubrique « Votre croissance » (page Finaction & Associés) ---------- */
.growth{ display:flex; flex-direction:column; gap:clamp(2rem,3.5vw,3rem); max-width:96ch; }
.growth-intro{ font-size:clamp(1.02rem,1.4vw,1.2rem); line-height:1.75; color:var(--txt-inv-2); }
.growth-intro strong{ color:#fff; font-weight:600; }
.growth-label{
  font-family:var(--f-head); font-size:.72rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--celest);
}
.growth-claim{
  font-family:var(--f-head); font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.35; color:#fff;
}

/* ---------- Citation dans le profil d'un collaborateur ---------- */
.tm-quote{
  margin:1.4rem 0 0; padding-left:1.1rem;
  border-left:2px solid var(--electric);
  font-size:1.02rem; line-height:1.65; font-style:italic;
  color:var(--txt-inv-2);
}

/* ---------- Les quatre engagements operationnels (page Finaction & Associes) ---------- */
.growth-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1rem, 1.8vw, 1.6rem);
}
@media (max-width:760px){ .growth-grid{ grid-template-columns:1fr; } }
.growth-card{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line-dark);
  border-radius:14px;
  padding:clamp(1.3rem, 2vw, 1.8rem);
  display:flex; flex-direction:column; gap:.7rem;
  transition:background .4s, border-color .4s, transform .4s var(--ease-out);
}
.growth-card:hover{
  background:rgba(255,255,255,.06);
  border-color:color-mix(in srgb, var(--metier) 55%, transparent);
  transform:translateY(-3px);
}
.growth-card svg{ width:26px; height:26px; color:var(--metier); flex:none; }
.growth-card h3{
  font-family:var(--f-head); font-weight:700;
  font-size:clamp(1.15rem,1.7vw,1.4rem); color:#fff;
}
.growth-card p{ color:var(--txt-inv-2); font-size:1rem; line-height:1.55; }

/* Signature de fin de rubrique : centree, detachee du corps de texte */
.growth-sign{
  margin-top:clamp(1rem,2vw,2rem);
  padding-top:clamp(1.8rem,3vw,2.6rem);
  border-top:1px solid var(--line-dark);
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  text-align:center;
}

/* ---------- Track-record : cartes business case qui se retournent ---------- */
.case-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:clamp(1rem, 1.8vw, 1.6rem);
  perspective:1400px;
}
/* La perspective doit porter sur la CARTE, pas sur la grille : c'est la carte
   qui contient l'element pivotant. Posee sur la grille, elle ne s'appliquait
   pas a la rotation, qui se faisait donc a plat — l'image semblait se refleter
   au lieu de tourner. */
.case{ aspect-ratio:3/4; cursor:pointer; background:none; border:0; perspective:1400px; }
.case:focus-visible{ outline:2px solid var(--electric); outline-offset:4px; border-radius:16px; }
.case-in{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.case.is-flipped .case-in{ transform:rotateY(180deg); }
/* La carte se retourne d'elle-meme au survol. Reserve aux appareils qui ont
   un vrai pointeur : sur un ecran tactile, « survoler » colle l'etat et la
   carte resterait retournee. La-bas, c'est l'appui qui retourne (classe
   is-flipped posee par le script). */
@media (hover:hover) and (pointer:fine){
  .case:hover .case-in{ transform:rotateY(180deg); }
}
.case-face{
  position:absolute; inset:0;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg,#0D1B30,#060E1C);
  border:1px solid var(--line-dark);
  padding:clamp(1.2rem,1.8vw,1.6rem);
  display:flex; flex-direction:column; gap:.7rem;
}
.case-back{ transform:rotateY(180deg); justify-content:center; }
/* Safari n'applique pas de maniere fiable le masquage de la face arriere quand
   celle-ci porte un coin arrondi et un debordement masque : l'image restait
   visible, retournee, pendant tout le pivot. On ne s'y fie donc plus : les deux
   faces s'echangent franchement a mi-rotation (0,35 s sur 0,7 s), par un simple
   changement d'opacite sans duree. Le resultat est identique sur tous les
   navigateurs, et le masquage ci-dessus reste en complement. */
.case-face{ transition:opacity 0s linear .35s; }
.case-back{ opacity:0; }
.case.is-flipped .case-front{ opacity:0; }
.case.is-flipped .case-back{ opacity:1; }
@media (hover:hover) and (pointer:fine){
  .case:hover .case-front{ opacity:0; }
  .case:hover .case-back{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .case-face{ transition:none; }
}
/* Ceinture et bretelles : on redit a la vignette et a l'image de disparaitre
   quand leur face tourne le dos. */
.case-visuel, .case-visuel img{
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.case-visuel{
  flex:1 1 auto; border-radius:10px; min-height:0;
  /* Photo du secteur, teintee pour rester dans la palette du site */
  position:relative; overflow:hidden;
  background:#0B1B33;
  border:1px solid var(--line-dark);
}
.case-secteur{
  font-family:var(--f-head); font-size:.68rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  /* les couleurs sombres de la charte (le marine) ne tiennent pas sur fond nuit :
     on les eclaircit juste ce qu'il faut pour rester lisibles */
  color:var(--celest);
}
.case h3{
  font-family:var(--f-head); font-weight:600;
  font-size:clamp(1.1rem,1.6vw,1.35rem); color:#fff; line-height:1.2;
}
.case-texte{ font-size:.94rem; line-height:1.6; color:var(--txt-inv-2); }
@media (prefers-reduced-motion: reduce){ .case-in{ transition:none; } }

/* ---------- Visuel incruste a cote du titre de section ---------- */
.head-visuel{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem, 4vw, 4rem); align-items:center;
  margin-bottom:clamp(3rem, 6vh, 5rem);
}
.head-visuel .sec-head{ margin-bottom:0; }
.head-visuel .sec-head h2{ font-size:clamp(2.4rem, 4.4vw, 4rem); }
@media (max-width:900px){
  .head-visuel{ grid-template-columns:1fr; gap:2rem; }
  .head-visuel .incrust{ order:-1; }
}
/* Traitement « suggestion » : l'image n'est pas posee dans un cadre, elle se
   dissout dans la page. Pas de bordure, pas d'ombre, pas d'angle net : un
   masque en degrade efface les bords, quel que soit le fond de la section. */
.incrust{
  margin:0; position:relative;
  aspect-ratio:4/3;
  overflow:visible;
}
.incrust img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:1;
  filter:saturate(.98) contrast(1.05) brightness(1.04);
  /* deux degrades croises : chaque bord s'efface, l'image n'a plus de contour */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-composite:intersect;
}
/* Les photos les plus chaudes sont ramenees vers la palette marine */
.incrust.is-warm img{ filter:saturate(.85) hue-rotate(-8deg) contrast(1.05) brightness(1.03); opacity:.95; }

/* ---------- Filet de securite typographique sur petits ecrans ----------
   Les titres sont calibres pour Arial Narrow / Archivo Narrow. Si le webfont
   ne charge pas (reseau coupe, filtrage), le repli est Arial, sensiblement
   plus large : sans garde-fou, le titre d'accueil deborde sous 380 px. */
@media (max-width: 430px){
  .hero h1{ font-size:1.95rem; }
  .page-hero h1{ font-size:2.3rem; }
  .sec-head h2{ font-size:clamp(1.9rem, 8.5vw, 2.6rem); }
  .cta-band h2{ font-size:clamp(1.9rem, 8.5vw, 2.6rem); }
}
/* Aucun mot ne doit pouvoir depasser son conteneur, quelle que soit la police */
h1, h2, h3, .acc-title, .case h3{ overflow-wrap:break-word; }

/* ---------- Heros illustre par une photo pleine largeur (accueil) ---------- */
.hero-photo{ position:absolute; inset:0; overflow:hidden; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Bandeau « Trajectoires » : le cadrage garde la fuite des trainees vers la
   droite, la ou le regard doit aller. Le texte occupe la gauche. */
.hero-photo.is-trajectoire img{ object-position:68% 62%; }
/* voile marine : la photo reste un fond, le texte garde toute sa lisibilite */
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(6,14,28,.82) 0%, rgba(6,14,28,.48) 46%, rgba(6,14,28,.12) 100%),
    linear-gradient(to top, rgba(6,14,28,.62), rgba(6,14,28,0) 52%);
}
@media (max-width:760px){
  .hero-photo::after{ background:linear-gradient(to top, rgba(6,14,28,.92), rgba(6,14,28,.55)); }
}
/* Heros au fer a gauche : le texte s'aligne sur la grille de la page, donc sur le logo */
.hero-left .hero-content{
  text-align:left; align-items:flex-start;
  max-width:1280px; width:100%;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.hero-left .hero-content h1,
.hero-left .hero-content .baseline{ margin-left:0; margin-right:auto; }
.hero-left .hero-ctas{ justify-content:flex-start; }

/* ---------- Lignes animees ----------
   La geometrie est desormais construite directement dans le bon sens : plus
   aucune transformation ici, sinon les extremites reviendraient dans le cadre. */


/* ---------- Initiales aux couleurs de la marque (page Finaction & Associes) ---------- */
.h-init{ color:var(--init); }

/* ---------- Ligne LinkedIn des fiches contact : au bleu de LinkedIn ---------- */
.ccard .row.is-linkedin b,
.ccard .row.is-linkedin a{ color:#0A66C2; }
.ccard .row.is-linkedin a:hover{ color:#004182; }

/* ---------- Numeros des engagements : une couleur de la charte par carte ---------- */
.vs-num{ color:var(--num, var(--electric)); }

/* ---------- Signature de rubrique : pleine largeur, au fer a gauche ---------- */
.growth-sign{
  align-items:flex-start;
  text-align:left;
  max-width:none;
}
.growth-sign .growth-claim{ max-width:none; }
/* Intitule d'expertise des business cases : couleur metier de la charte */
.case h3{ color:var(--exp, #fff); }

/* ---------- Vignettes des business cases ---------- */
/* Aucun filtre ici : le traitement colorimetrique est cuit dans les fichiers
   images. Un filtre CSS placait l'image sur sa propre couche de composition,
   qui ignorait le masquage de la face arriere : pendant le pivot, l'image
   restait affichee a l'envers par-dessus le texte. Meme raison pour le zoom
   au survol, retire : de toute facon la carte se retourne a cet instant. */
.case-visuel img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* voile marine : les photos restent en arriere-plan du texte */
.case-visuel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(6,14,28,.20), rgba(6,14,28,0) 45%);
}