/*
Theme Name: Ergopix
Theme URI: https://www.ergopix.com
Update URI: https://www.ergopix.com
Author: ergopix sàrl
Version: 1.0
*/

/* ============================================================
   ALTIM — reprise intégrale de la maquette « Éditorial »
   Charte : Plates-Bandes communication (guidelines 28.05.2026)
   Retours DA du 09.09.2026 intégrés.

   Le bloc ci-dessous est le CSS de la maquette, repris tel quel.
   Trois écarts, et trois seulement :
     · .card → .ref-card, .row → .idcard-row, .row2 → .idcard-row2
       et .nav → .hd-nav, pour ne pas entrer en collision avec Bootstrap ;
     · border:0 ajouté sur .btn, que Bootstrap borde par défaut ;
     · .site devient un conteneur nommé « page », ce qu'il était déjà dans
       le shell de la maquette : les unités cqw et les @container se
       comportent donc à l'identique.
   ============================================================ */

.site {
  container-type: inline-size;
  container-name: page;
  /* Tracé de la flèche de la charte, réutilisable en masque CSS. */
  --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 11.4 11.4 4.6M6.2 4.6h5.2v5.2'/%3E%3C/svg%3E");
}

/* Garde-fou contre un débordement horizontal accidentel. Il est porté par html
   et non par body : sur l'élément racine, le débordement est propagé au
   viewport, qui reste le conteneur de défilement. Sur body, hidden en aurait
   fait un scrollport intermédiaire et neutralisé le position:sticky de .aside
   sur la fiche de référence. */
html { overflow-x: hidden; }

/* Le reboot de Bootstrap impose aux titres une couleur, une graisse 500, un
   interligne 1.2 et une marge basse. La maquette part des valeurs par défaut
   du navigateur : on les rétablit ici, avant son CSS, qui reprend la main
   partout où il est plus spécifique. */
.site :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  font-weight: bold;
  line-height: inherit;
  margin: 0;
}
.site{
  /* ---- Bleu (couleur de base + Développement) ---- */
  --dev-180:#001721; --dev-160:#002B42; --dev-140:#004263; --dev-120:#005985;
  --dev-100:#006EA5; --dev-80:#338BB7;  --dev-60:#66A8C9;  --dev-40:#99C4DB;
  --dev-20:#CCE1ED;  --dev-10:#E6F0F6;
  /* ---- Rouge (Planification) ---- */
  --pla-180:#2B0F0D; --pla-160:#59211A; --pla-140:#853026; --pla-120:#B04033;
  --pla-100:#DC5041; --pla-80:#E37367;  --pla-60:#EA968D;  --pla-40:#F1B9B3;
  --pla-20:#F8DCD9;  --pla-10:#FCEEEC;
  /* ---- Vert (Investissement) ---- */
  --inv-180:#122112; --inv-160:#214024; --inv-140:#336136; --inv-120:#458047;
  --inv-100:#55A05A; --inv-80:#77B37B;  --inv-60:#99C69C;  --inv-40:#BBD9BD;
  --inv-20:#DDECDE;  --inv-10:#EEF5EF;

  /* ---- Couleur active : bleu par défaut, remplacée dans les sections ---- */
  --c-180:var(--dev-180); --c-160:var(--dev-160); --c-140:var(--dev-140);
  --c-120:var(--dev-120); --c:var(--dev-100);     --c-80:var(--dev-80);
  --c-60:var(--dev-60);   --c-40:var(--dev-40);   --c-20:var(--dev-20);
  --c-10:var(--dev-10);

  /* ---- Neutres ---- */
  --ink:#14181C; --ink-2:#3C464F; --ink-3:#6C7883;
  --line:#E2E6EA; --bg:#FFFFFF; --bg-2:#F6F8F9; --near-black:#0B0F13;

  /* ---- Typographie (charte : Arial Black / Bold / Regular) ---- */
  --ff:Arial,"Helvetica Neue",Helvetica,"Liberation Sans",sans-serif;
  --ff-display:"Arial Black","Arial Bold",Arial,"Helvetica Neue","Liberation Sans",sans-serif;

  /* ---- Rythme et formes ---- */
  --pad:max(clamp(20px,5cqw,92px), calc((100cqw - 1500px) / 2));
  --r:16px; --r-s:9px;

  color:var(--ink); background:var(--bg); font-family:var(--ff);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.site[data-section="planification"]{
  --c-180:var(--pla-180); --c-160:var(--pla-160); --c-140:var(--pla-140);
  --c-120:var(--pla-120); --c:var(--pla-100); --c-80:var(--pla-80);
  --c-60:var(--pla-60); --c-40:var(--pla-40); --c-20:var(--pla-20); --c-10:var(--pla-10);
}
.site[data-section="investissement"]{
  --c-180:var(--inv-180); --c-160:var(--inv-160); --c-140:var(--inv-140);
  --c-120:var(--inv-120); --c:var(--inv-100); --c-80:var(--inv-80);
  --c-60:var(--inv-60); --c-40:var(--inv-40); --c-20:var(--inv-20); --c-10:var(--inv-10);
}

:where(.site) *{box-sizing:border-box}
:where(.site) img{display:block; max-width:100%}
:where(.site) a{color:inherit; text-decoration:none}
:where(.site) h1,:where(.site) h2,:where(.site) h3,:where(.site) h4,
:where(.site) p,:where(.site) ul,:where(.site) figure{margin:0}
:where(.site) ul{list-style:none; padding:0}
:where(.site) button{font:inherit; cursor:pointer}
.site h1,.site h2{font-family:var(--ff-display); font-weight:900; letter-spacing:-.02em}

/* ---------- Logo ---------- */
.logo{display:inline-flex; align-items:flex-end; gap:.5em; color:currentColor}
.logo svg{width:132px; height:auto; display:block}
.logo .lg-acc{fill:currentColor}
.site[data-section] .logo .lg-acc{fill:var(--c)}

/* ---------- Ligne tricolore (2× plus épaisse) ---------- */
.tribar{display:flex; height:16px; width:100%}
.tribar i{flex:1; display:block}
.tribar i:nth-child(1){background:var(--dev-100)}
.tribar i:nth-child(2){background:var(--pla-100)}
.tribar i:nth-child(3){background:var(--inv-100)}
/* Dans une section : déclinaison de la couleur de la section */
.site[data-section] .tribar i:nth-child(1){background:var(--c)}
.site[data-section] .tribar i:nth-child(2){background:var(--c-60)}
.site[data-section] .tribar i:nth-child(3){background:var(--c-40)}

/* ---------- En-tête ---------- */
.hd{background:#fff; color:var(--ink); position:relative; z-index:5}
.hd-in{display:flex; align-items:center; gap:clamp(16px,3cqw,44px); padding:0 var(--pad); min-height:92px}
.hd-nav{display:flex; gap:clamp(16px,2.4cqw,34px); flex:1; margin-left:clamp(20px,4cqw,60px)}
.hd-nav a{font-size:15px; color:var(--ink-2); padding:6px 0; position:relative}
.hd-nav a:hover{color:var(--ink)}
.hd-nav a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px;
  background:var(--c); opacity:0; transition:opacity .18s}
.hd-nav a:hover::after{opacity:1}
.hd-nav a[aria-current]{color:var(--ink); font-weight:700}
.hd-nav a[aria-current]::after{opacity:1}
.hd-cta{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700;
  padding:13px 22px; background:var(--c); color:#fff; border-radius:var(--r-s); transition:.18s}
.hd-cta:hover{background:var(--c-120)}
.burger{display:none; margin-left:auto; width:44px; height:44px; border:0; border-radius:var(--r-s);
  background:var(--c-20); align-items:center; justify-content:center}
.burger i{display:block; width:18px; height:2px; background:var(--c-160); position:relative}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--c-160)}
.burger i::before{top:-6px} .burger i::after{top:6px}

/* Barre des trois entités */
.ents{display:flex; padding:0 var(--pad); background:var(--bg-2)}
.ents a{flex:1; padding:14px 14px; font-size:12.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); border-top:4px solid transparent; text-align:center}
/* Chaque entité porte sa propre couleur, au survol comme à l'état actif */
.ents a[data-entite="developpement"]{--c:var(--dev-100)}
.ents a[data-entite="planification"]{--c:var(--pla-100)}
.ents a[data-entite="investissement"]{--c:var(--inv-100)}
.ents a:hover{color:var(--ink); border-top-color:var(--c)}
.ents a[aria-current]{color:var(--ink); border-top-color:var(--c)}
.ents .short{display:none}

/* Option en-tête sombre */
.site[data-hdr="dark"] .hd{background:var(--near-black); color:#fff}
.site[data-hdr="dark"] .hd-nav a{color:#A9B5BF}
.site[data-hdr="dark"] .hd-nav a:hover,
.site[data-hdr="dark"] .hd-nav a[aria-current]{color:#fff}
.site[data-hdr="dark"] .ents{background:#0E1318}
.site[data-hdr="dark"] .ents a{color:#7C8994}
.site[data-hdr="dark"] .ents a:hover,
.site[data-hdr="dark"] .ents a[aria-current]{color:#fff}
.site[data-hdr="dark"] .ents a:hover{border-top-color:var(--c)}
.site[data-hdr="dark"] .burger{background:var(--c-160)}
.site[data-hdr="dark"] .burger i,
.site[data-hdr="dark"] .burger i::before,
.site[data-hdr="dark"] .burger i::after{background:#fff}

/* ---------- Boutons ---------- */
.arw{width:1em; height:1em; display:block; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.btn .ar,.more .ar{display:block; font-size:1.15em}
.more{display:inline-flex; align-items:center; gap:9px}
.btn{display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:700;
  padding:16px 28px; border:0; border-radius:var(--r-s); background:var(--c); color:#fff; transition:.18s}
.btn:hover{background:var(--c-120)}
.btn--light{background:#fff; color:var(--c-160)}
.btn--light:hover{background:var(--c-20)}
.btn--soft{background:rgba(255,255,255,.2); color:#fff}
.btn--soft:hover{background:#fff; color:var(--c-160)}
.btn--160{background:var(--c-160); color:#fff}
.btn--160:hover{background:var(--c-140)}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:clamp(420px,52cqw,660px); display:flex; align-items:flex-end;
  color:#fff; overflow:hidden}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,12,16,.55) 0%,rgba(8,12,16,.3) 42%,rgba(8,12,16,.85) 100%)}
.hero-in{position:relative; z-index:2; padding:clamp(36px,5cqw,88px) var(--pad) clamp(48px,5.5cqw,90px); width:100%}
.hero h1{font-size:clamp(34px,5.4cqw,72px); line-height:1.02; max-width:19ch; margin-bottom:22px}
.hero p{font-size:clamp(16.5px,1.55cqw,21px); color:rgba(255,255,255,.86); max-width:56ch; line-height:1.6}
.hero .cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap}
.hero .tribar{position:absolute; left:0; right:0; bottom:0; z-index:3}
.hero--sm{min-height:clamp(330px,40cqw,520px)}

.eyebrow{display:inline-flex; align-items:center; gap:14px; font-size:12.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:24px; color:#fff}
.eyebrow i{display:block; width:34px; height:4px; border-radius:2px; background:var(--c)}

/* ---------- Sections ---------- */
.sec{padding:clamp(56px,7cqw,124px) var(--pad); position:relative; overflow:hidden}
.sec--tint{background:var(--c-10)}
.sec--grey{background:var(--bg-2)}
.sec--dark{background:var(--c-180); color:#fff}
.sec--dark .head h2{color:#fff}
.sec--dark .head p{color:rgba(255,255,255,.72)}
.sec--dark .head .k{color:var(--c-40)}
/* cartes claires posées sur une section sombre */
.sec--dark .dom{color:var(--ink)}
.sec--dark .dom p{color:var(--ink-2)}
.head{margin-bottom:clamp(32px,4cqw,60px)}
.head .k{font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--c); margin-bottom:16px; display:block}
.head h2{font-size:clamp(28px,3.8cqw,52px); line-height:1.06; max-width:25ch}
.head p{margin-top:18px; font-size:clamp(17px,1.5cqw,21px); color:var(--ink-2); max-width:58ch}
.head .more{display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  font-size:16px; font-weight:700; color:var(--c)}
.head .more:hover{color:var(--c-120)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5cqw,90px); align-items:start}

/* ---------- Cartes entités (aplat 20 %, 100 % au survol) ---------- */
.ecards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8cqw,26px)}
.ecard{display:flex; flex-direction:column; padding:clamp(26px,3cqw,40px);
  border-radius:var(--r); background:var(--c-20); color:var(--ink);
  min-height:clamp(210px,22cqw,270px); transition:.22s}
.ecard[data-entite="developpement"]{--c:var(--dev-100); --c-20:var(--dev-20)}
.ecard[data-entite="planification"]{--c:var(--pla-100); --c-20:var(--pla-20)}
.ecard[data-entite="investissement"]{--c:var(--inv-100); --c-20:var(--inv-20)}
.ecard:hover{background:var(--c); color:#fff}
.ecard h3{font-size:clamp(19px,1.9cqw,25px); font-weight:700; line-height:1.15; margin-bottom:8px;
  font-family:var(--ff); letter-spacing:-.01em}
.ecard .old{font-size:14px; color:var(--ink-3); margin-bottom:16px}
.ecard p{font-size:16.5px; color:var(--ink-2); line-height:1.5}
.ecard .go{margin-top:auto; padding-top:26px; font-size:15px; font-weight:700; color:var(--c)}
.ecard:hover .old,.ecard:hover p{color:rgba(255,255,255,.88)}
.ecard:hover .go{color:#fff}

/* ---------- Chiffres clés sur image ---------- */
.stats{position:relative; color:#fff; overflow:hidden; padding:clamp(44px,5.5cqw,86px) var(--pad)}
.stats img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.stats::after{content:""; position:absolute; inset:0; background:rgba(6,20,28,.62)}
.stats-in{position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3cqw,52px)}
.stat .v{font-family:var(--ff-display); font-weight:900; font-size:clamp(38px,5cqw,68px);
  letter-spacing:-.035em; line-height:.95}
.stat .l{font-size:15px; margin-top:14px; line-height:1.45; color:rgba(255,255,255,.8); max-width:22ch}

/* ---------- Listes à flèches ---------- */
.arrows li{display:grid; grid-template-columns:clamp(30px,2.6cqw,42px) 1fr; gap:clamp(14px,2cqw,28px);
  padding:clamp(18px,2.2cqw,30px) 0; border-top:1px solid var(--c-20); align-items:baseline}
.arrows li:last-child{border-bottom:1px solid var(--c-20)}
.arrows .ar{color:var(--c); padding-top:.3em}
.arrows .ar .arw{width:19px; height:19px}
.arrows li > span:not(.ar){max-width:74ch}
.arrows b{display:block; font-size:clamp(18px,1.7cqw,23px); font-weight:700; margin-bottom:8px; letter-spacing:-.01em}
.arrows span span,.arrows li > span:not(.ar){font-size:17px; line-height:1.6; color:var(--ink-2)}

/* ---------- Domaines (aplat 20 %) ---------- */
.doms{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2cqw,30px)}
.dom{padding:clamp(24px,2.6cqw,36px); border-radius:var(--r); background:var(--c-20); display:flex;
  flex-direction:column; gap:14px}
.dom .ico{width:40px; height:40px; color:var(--c-140)}
.dom .ico svg{width:100%; height:100%}
.dom h3{font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1.2; font-family:var(--ff)}
.dom p{font-size:16.5px; color:var(--ink-2)}

/* ---------- Cartes références (image monochrome, couleur au survol) ---------- */
.ref-card[data-entite="developpement"]{--c:var(--dev-100); --c-140:var(--dev-140); --duo:var(--dev-100)}
.ref-card[data-entite="planification"]{--c:var(--pla-100); --c-140:var(--pla-140); --duo:var(--pla-120)}
.ref-card[data-entite="investissement"]{--c:var(--inv-100); --c-140:var(--inv-140); --duo:var(--inv-120)}
/* Rouge et vert sont plus clairs que le bleu : on assombrit un peu l'image
   pour garder la même densité de duotone d'une entité à l'autre. */
.ref-card[data-entite="planification"] img,
.ref-card[data-entite="investissement"] img{filter:grayscale(1) brightness(.74) contrast(1.02)}
.ref-card[data-entite="planification"]:hover img,
.ref-card[data-entite="investissement"]:hover img{filter:none}
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.2cqw,32px)}
.ref-card{position:relative; display:block; overflow:hidden; border-radius:var(--r);
  background:var(--duo,var(--c)); color:#fff; aspect-ratio:22/15}
.ref-card .im{position:absolute; inset:0; display:block; background:var(--duo,var(--c)); isolation:isolate}
/* Duotone : dégradé du noir vers la couleur de section, du blanc vers le blanc.
   Techniquement = image en niveaux de gris en fusion « screen » sur un aplat de couleur. */
.ref-card img{width:100%; height:100%; object-fit:cover; mix-blend-mode:screen;
  filter:grayscale(1) brightness(.96) contrast(.97); transition:filter .45s, transform .6s cubic-bezier(.2,.7,.3,1)}
.ref-card:hover img{mix-blend-mode:normal; filter:none; transform:scale(1.03)}
.ref-card::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(0,20,32,0) 42%,rgba(0,20,32,.72) 100%)}
.ref-card .bd{position:absolute; inset:auto 0 0 0; z-index:2; padding:clamp(18px,2.2cqw,30px)}
.ref-card h3{font-size:clamp(17px,1.6cqw,22px); font-weight:700; line-height:1.25; margin-top:12px;
  font-family:var(--ff); letter-spacing:-.01em}
.ref-card .meta{font-size:14px; color:rgba(255,255,255,.82); margin-top:10px}
.tag{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:7px 13px; border-radius:100px; background:#fff; color:var(--c-140)}

/* ---------- Filtres ---------- */
.ref-card:hover .tag{background:var(--c); color:#fff}

.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:clamp(26px,3cqw,44px)}
.filters button{border:0; background:#ECF0F3; color:var(--ink-2); font-size:14.5px; font-weight:700;
  padding:13px 22px; border-radius:100px; transition:.18s}
.filters button:hover{background:var(--c-20)}
.filters button[aria-pressed="true"]{background:var(--ink); color:#fff}
.filters button .c{opacity:.55; margin-left:8px; font-weight:400}

/* ---------- Frise des phases (chevrons) ----------
   Silhouette et dégradé relevés sur la maquette retour du graphiste :
   chevrons détachés, encoche à gauche, pointe à droite, texte centré,
   fondu de la couleur de section vers le gris #CCC, inactif en gris plein. */
.phases{display:flex; gap:8px; width:100%}
.phase{flex:1; min-width:0; position:relative; display:flex; align-items:center; justify-content:center;
  padding:17px 30px; font-size:13px; font-weight:700; line-height:1.25; text-align:center;
  color:#fff; --ph:var(--c)}
.phase .chev{position:absolute; inset:0; width:100%; height:100%; fill:var(--ph); overflow:visible}
.phase span{position:relative; z-index:1; display:block}
.phase:nth-child(2){--ph:color-mix(in srgb, var(--c) 80%, #CCCCCC)}
.phase:nth-child(3){--ph:color-mix(in srgb, var(--c) 60%, #CCCCCC)}
.phase:nth-child(4){--ph:color-mix(in srgb, var(--c) 40%, #CCCCCC)}
.phase:nth-child(5){--ph:color-mix(in srgb, var(--c) 20%, #CCCCCC)}
.phase:nth-child(6){--ph:color-mix(in srgb, var(--c) 10%, #CCCCCC)}
.phase.off{--ph:#CCCCCC}

/* ---------- Bandeau contact (fond 180 %) ---------- */
.band{background:var(--c-180); color:#fff; padding:clamp(52px,6cqw,104px) var(--pad); position:relative; overflow:hidden}
.band h2{font-size:clamp(28px,3.6cqw,48px); line-height:1.06; max-width:26ch; color:var(--c-20)}
.band p{color:rgba(255,255,255,.72); margin-top:20px; font-size:17px}
.band .cta{margin-top:32px}
.amark{position:absolute; right:clamp(20px,5cqw,92px); top:0; bottom:0; opacity:.09; color:#fff;
  pointer-events:none; display:flex; align-items:stretch}
.amark svg{height:100%; width:auto; display:block}

/* ---------- Pied ---------- */
.ft{background:var(--near-black); color:#fff; padding:0 var(--pad)}
.ft-in{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:clamp(24px,3cqw,52px);
  padding:clamp(44px,5cqw,80px) 0 clamp(34px,4cqw,58px)}
.ft h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.12em; color:#5F6C78; margin-bottom:18px}
.ft li,.ft p{font-size:16px; color:#A9B5BF; margin-bottom:10px}
.ft a:hover{color:#fff}
.ft .logo{color:#fff; margin-bottom:20px}
.ft-bot{border-top:1px solid rgba(255,255,255,.1); padding:20px 0; display:flex; justify-content:space-between;
  gap:16px; font-size:14px; color:#5F6C78; flex-wrap:wrap}
.ft .tribar{width:auto; margin:0 calc(var(--pad) * -1)}

/* ---------- Fiche référence ---------- */
.ref-hero{position:relative; min-height:clamp(360px,44cqw,560px); display:flex; align-items:flex-end;
  color:#fff; overflow:hidden}
.ref-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ref-hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,12,16,.45),rgba(8,12,16,.15) 40%,rgba(8,12,16,.8))}
.ref-hero .in{position:relative; z-index:2; padding:clamp(30px,4cqw,70px) var(--pad) clamp(38px,4cqw,66px); width:100%}
.ref-hero h1{font-size:clamp(28px,4.2cqw,56px); line-height:1.05; max-width:22ch; margin-top:18px}
.ref-hero .tag{background:var(--c); color:#fff}
.crumb{font-size:14px; color:rgba(255,255,255,.75)}
.crumb a:hover{color:#fff}
.ref-hero .meta{margin-top:20px; font-size:15.5px; color:rgba(255,255,255,.82)}
.ref-hero .tribar{position:absolute; left:0; right:0; bottom:0; z-index:3}

.figs{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(22px,3cqw,52px);
  background:var(--c-180); color:#fff; padding:clamp(26px,3cqw,42px) var(--pad)}
.fig .v{font-family:var(--ff-display); font-weight:900; font-size:clamp(24px,2.8cqw,36px);
  letter-spacing:-.03em; line-height:1; color:var(--c-20)}
.fig .l{font-size:14.5px; color:rgba(255,255,255,.66); margin-top:10px}

.ref-body{display:grid; grid-template-columns:1fr 350px; gap:clamp(30px,5cqw,88px); padding:clamp(44px,5.5cqw,96px) var(--pad)}
.blk{margin-bottom:clamp(30px,3.6cqw,52px)}
.blk h2{font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--c); margin-bottom:18px; font-family:var(--ff)}
.blk .lead{font-size:clamp(19px,1.9cqw,26px); line-height:1.45; font-weight:400; letter-spacing:-.01em}
.blk p{font-size:17px; color:var(--ink-2); line-height:1.65; max-width:64ch}
.ul{display:grid; gap:12px; margin-top:16px}
.ul li{display:grid; grid-template-columns:18px 1fr; gap:13px; font-size:16.5px; color:var(--ink-2); line-height:1.55}
.ul li > .arw{width:18px; height:18px; color:var(--c); margin-top:.28em}
.contribs{display:grid}
.contrib{padding:24px 0; border-top:1px solid var(--c-20)}
.contrib:first-child{border-top:0; padding-top:0}
.contrib h3{font-size:17.5px; font-weight:700; margin-bottom:12px; font-family:var(--ff)}

.aside{align-self:start; position:sticky; top:20px; display:grid; gap:14px}
.idcard{background:var(--c-20); border-radius:var(--r); padding:30px 28px 14px; color:var(--ink)}
.idcard > h3{font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--c-140); margin-bottom:24px; font-family:var(--ff)}
.idcard-row{padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid var(--c-40)}
.idcard-row:last-child{border-bottom:0}
.idcard-row .k{display:block; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-140); margin-bottom:8px}
.idcard-row .v{display:block; font-size:16.5px; line-height:1.45; color:var(--ink)}
.idcard-row2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.idcard-row2 .idcard-row{border-bottom:0; padding-bottom:0; margin-bottom:18px}
.idcard-row .v.ent-dot{display:flex; align-items:center; gap:10px}
.ent-dot i{display:block; width:11px; height:11px; border-radius:2px; background:var(--c); flex:none}
.actions{display:grid; gap:12px}
.actions .btn{justify-content:center; width:100%}
.share{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:4px 2px}
.share span{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.share a{font-size:15.5px; color:var(--ink-2)}
.share a:hover{color:var(--c)}

/* Marqueur « contenu à produire » */
.todo{display:inline-block; font-size:13px; line-height:1.4; letter-spacing:.02em;
  background:#FFF6E2; color:#7A5B12; border-radius:var(--r-s); padding:6px 12px; font-weight:700}

/* ---------- Requêtes de conteneur ---------- */
@container page (max-width:1000px){
  .ecards,.doms{grid-template-columns:repeat(2,1fr)}
  .cards.trois{grid-template-columns:repeat(2,1fr)}
  .stats-in{grid-template-columns:repeat(2,1fr); gap:34px}
  .ref-body,.split{grid-template-columns:1fr}
  .aside{position:static}
  .hd-nav,.hd-cta{display:none}
  .burger{display:flex}
  .ft-in{grid-template-columns:repeat(2,1fr)}
  .ents .full{display:none}
  .ents .short{display:inline}
}
@container page (max-width:720px){
  .ecards,.doms,.cards,.cards.trois{grid-template-columns:1fr}
  .stats-in{grid-template-columns:repeat(2,1fr); gap:26px 22px}
  .phases{flex-direction:column; gap:3px}
  .phase{padding:14px 18px; justify-content:flex-start}
  .phase .chev{display:none}
  .phase{background:var(--ph); border-radius:var(--r-s)}
  .arrows li{grid-template-columns:1fr; gap:6px}
  .idcard-row2{grid-template-columns:1fr; gap:0}
  .ft-in{grid-template-columns:1fr}
  .ents a{font-size:11px; padding:12px 6px}
  .amark{opacity:.06}
}


/* ============================================================
   Additions strictement nécessaires au passage sous WordPress.
   Rien ici ne modifie le rendu des écrans maquettés.
   ============================================================ */

/* Valeurs que la maquette écrit en style en ligne sur l'écran « Références »
   et sur le vis-à-vis des pages d'entité : reprises à l'identique. */
/* L'en-tête de l'archive des références reprend désormais celui des autres
   pages intérieures (.hero--sm) : hauteur et corps de titre identiques. */
.split-lead { font-size: clamp(17px, 1.6cqw, 21px); line-height: 1.6; }
.split-mention { margin-top: 20px; font-size: 15.5px; color: var(--ink-3); }
/* Le premier paragraphe du vis-à-vis fait office de chapeau, les suivants
   reprennent le corps courant. */
.split-texte > p:first-child { font-size: clamp(17px, 1.6cqw, 21px); line-height: 1.6; color: var(--ink); }
.split-texte > p:last-child { margin-bottom: 0; }

/* Cadrage portrait, pour les grilles de personnes. */
.tuiles--portrait .tuile__media img { aspect-ratio: 4 / 5; }

/* Galerie facultative d'une fiche, absente de la maquette : même grille et
   même gouttière que .cards. */
.ref-galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.2cqw, 32px); margin-top: 16px; }
.ref-galerie img { width: 100%; border-radius: var(--r); }

/* Les zones à compléter dans les textes légaux reprennent le marqueur
   « contenu à produire » de la maquette. */
.the-content mark {
  display: inline-block; padding: 4px 10px;
  font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .02em;
  background: #FFF6E2; color: #7A5B12; border-radius: var(--r-s);
}

/* ---------- Pages document : mentions légales, politique de confidentialité ----------
   .the-content est réglé pour du texte court et démonstratif. Sur un document
   de plusieurs milliers de signes, ses titres de 38 px et ses puces en flèche
   produisent un mur peu lisible. Ce bloc resserre tout. */
.page-document .the-content { max-width: 68ch; }

.page-document .the-content > h2 {
  font-size: clamp(18px, 1.5cqw, 21px);
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--ink);
  margin-top: clamp(40px, 3.6cqw, 60px);
  padding-top: clamp(18px, 1.8cqw, 26px);
  border-top: 1px solid var(--line);
}
.page-document .the-content > h2:first-child {
  margin-top: 0; padding-top: 0; border-top: 0;
}
.page-document .the-content > h3 {
  font-size: 16.5px; margin-top: 28px; margin-bottom: .5em; color: var(--ink);
}
.page-document .the-content p { font-size: 16.5px; line-height: 1.7; }

/* Chapeau d'introduction */
.page-document .the-content .lead {
  font-size: clamp(17px, 1.5cqw, 20px);
  line-height: 1.6;
  color: var(--ink);
}

/* Puces neutres : la flèche ↗ signale une action ailleurs sur le site,
   elle n'a pas sa place dans une énumération juridique. */
.page-document .the-content ul { gap: 10px; }
.page-document .the-content ul li { padding-left: 26px; line-height: 1.7; }
.page-document .the-content ul li::before {
  -webkit-mask: none; mask: none;
  width: 12px; height: 1px; top: .88em;
  background-color: var(--c-60);
}

/* Colonne d'identité des mentions légales : légèrement détachée du texte. */
.page-document .the-content > ul:first-child { margin-top: 0; }

/* ---------- Barre basse du pied ----------
   Trois défauts corrigés par rapport à la maquette :
     1. le gris #5F6C78 sur le fond noir donnait 3,6:1, sous le seuil AA
        de 4,5:1 exigé pour du texte de 14 px ;
     2. liens et texte informatif avaient exactement la même apparence :
        rien ne signalait ce qui était cliquable avant le survol ;
     3. quatre éléments répartis par space-between s'éparpillaient, et
        s'empilaient sans ordre lisible sur petit écran.
   L'information est désormais groupée à gauche, la navigation à droite,
   et les liens sont plus clairs que le texte qui les entoure. */
.ft-bot {
  align-items: center;
  gap: 16px clamp(24px, 3cqw, 48px);
}

.ft-bot__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: #8A97A3;
}
/* Séparateur discret entre les informations. */
.ft-bot__info > span + span::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  margin-right: 18px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  vertical-align: middle;
}

/* « Site sans cookie » se lit comme une affirmation, pas comme une mention
   légale : une pastille la distingue du reste sans la rendre tapageuse. */
.ft-cookie {
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 100px;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: #A9B5BF;
}
.ft-bot__info > span + .ft-cookie::before { display: none; }

/* Navigation : plus claire que le texte, soulignée au survol et au clavier. */
.ft-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ft-legal a {
  color: #A9B5BF;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
  transition: color .18s, text-decoration-color .18s;
}
.ft-legal a:hover,
.ft-legal a:focus-visible { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }

@container page (max-width: 720px) {
  .ft-bot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ft-bot__info { gap: 10px 14px; }
  .ft-bot__info > span + span::before { margin-right: 14px; }
  .ft-legal { gap: 6px 18px; }
}

/* ---------- Formulaires Gravity ---------- */
/* Les champs reprennent les bordures, rayons et couleurs de la charte, et la
   grille native de Gravity Forms est laissée intacte. */
.site .gform_wrapper .gfield_label {
  display: block; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.site .gform_wrapper .gfield_required { margin-left: 3px; color: var(--c); }
.site .gform_wrapper .gform_required_legend { display: none; }

.site .gform_wrapper input[type="text"],
.site .gform_wrapper input[type="email"],
.site .gform_wrapper input[type="tel"],
.site .gform_wrapper input[type="url"],
.site .gform_wrapper input[type="number"],
.site .gform_wrapper textarea,
.site .gform_wrapper select {
  width: 100%; padding: 14px 16px;
  font: inherit; font-size: 16px; line-height: 1.4;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-s);
  transition: border-color .18s, box-shadow .18s;
}
.site .gform_wrapper textarea { min-height: 170px; resize: vertical; }
.site .gform_wrapper input:focus,
.site .gform_wrapper textarea:focus,
.site .gform_wrapper select:focus {
  border-color: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
  outline: none;
}
.site .gform_wrapper .gfield_consent_label,
.site .gform_wrapper .gfield_description {
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.site .gform_wrapper .gform_footer { margin-top: 8px; padding: 0; }
.site .gform_wrapper .gfield_error input,
.site .gform_wrapper .gfield_error textarea { border-color: var(--pla-100); }
.site .gform_wrapper .validation_message {
  margin-top: 8px; font-size: 14px; color: var(--pla-140);
  background: none; border: 0; padding: 0;
}
.site .gform_wrapper .gform_validation_errors {
  border: 1px solid var(--pla-40); background: var(--pla-10);
  border-radius: var(--r-s); box-shadow: none; padding: 16px 20px;
}
.site .gform_wrapper .gform_validation_errors h2 { font-size: 16px; color: var(--pla-140); font-family: var(--ff); }
.site .gform_confirmation_wrapper {
  border: 1px solid var(--c-40); background: var(--c-10);
  border-radius: var(--r-s); padding: 20px 24px; color: var(--ink);
}

/* Un formulaire inséré dans un bloc de texte ne doit pas hériter des puces ↗. */
.the-content .gform_wrapper ul { display: block; }
.the-content .gform_wrapper ul li { display: block; padding-left: 0; }
.the-content .gform_wrapper ul li::before { content: none; }

/* ============================================================
   Corrections demandées par le client — document du 16.09.2026
   Ces règles viennent après le CSS de la maquette et le corrigent.
   ============================================================ */

/* Boutons : couleur de texte au survol.
   Bootstrap applique « color: var(--bs-btn-hover-color) » au survol de tout
   .btn, mais ne renseigne cette variable que dans ses propres variantes
   (.btn-primary, .btn-light…). Les boutons de la maquette, eux, n'en ont pas :
   la déclaration devenait invalide et le texte repassait en sombre sur
   l'aplat de couleur, illisible. On restitue la couleur attendue. */
.site .btn:hover,
.site .btn:focus,
.site .btn:focus-visible,
.site .btn:active { color: #fff; }

.site .btn--light:hover,
.site .btn--light:focus,
.site .btn--light:focus-visible,
.site .btn--light:active { color: var(--c-160); }

.site .btn--soft:hover,
.site .btn--soft:focus,
.site .btn--soft:focus-visible,
.site .btn--soft:active { color: var(--c-160); }

/* Même cause pour la flèche, qui hérite de la couleur du bouton. */
.site .btn:hover .arw,
.site .btn:focus-visible .arw { stroke: currentColor; }

/* Fiche référence : l'encadré de droite sortait de l'écran sur fenêtre étroite.
   En cause, la largeur intrinsèque de la frise des phases, qui empêchait la
   colonne principale de se comprimer et poussait la colonne fixe hors cadre. */
.ref-body { grid-template-columns: minmax(0, 1fr) minmax(0, 350px); }
.ref-body > div,
.ref-body > .aside { min-width: 0; }

/* La frise devient compressible : rembourrage et corps fluides, césure permise.
   Aux largeurs de référence de la maquette, les valeurs plafonnées sont
   exactement celles d'origine — le rendu ne bouge pas. */
.phase {
  padding: 17px clamp(14px, 1.9cqw, 30px);
  font-size: clamp(12px, .95cqw, 13px);
  /* Sans césure, « préliminaires » fixe une largeur minimale que la frise ne
     peut pas descendre : c'est elle qui poussait l'encadré hors de l'écran.
     overflow-wrap prend le relais si le navigateur n'a pas les motifs de
     césure du français. */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Galerie d'une fiche : elle restait sur deux colonnes jusqu'en 375 px,
   où chaque vignette tombait à 160 px. */
@container page (max-width: 720px) {
  .ref-galerie { grid-template-columns: 1fr; }
}

/* « Développement et direction de projet » demande 336 px sur une ligne, pour
   320 px utiles sur un écran de 360. À ce corps et à ce rembourrage, les cinq
   libellés tiennent sur une ligne et la pastille garde sa forme. */
@container page (max-width: 720px) {
  .filters { gap: 8px; }
  .filters button { padding: 11px 16px; font-size: 13px; }
}

/* Fiche référence : le duo contenu + encadré ne se séparait qu'à 1000 px.
   Juste au-dessus, la colonne de texte tombait à 457 px — trop étroit pour
   un corps de 17 px. Le confort de lecture (environ 64 caractères) demande
   600 px, atteints seulement au-delà de 1120 px de fenêtre. */
@container page (max-width: 1120px) {
  .ref-body { grid-template-columns: 1fr; }
  .aside { position: static; }
}

/* Grilles de références : passage à une colonne plus tôt. À deux colonnes,
   sous 900 px la carte descend sous 320 px de large et les titres longs
   débordent du bandeau bas. La maquette ne basculait qu'à 720 px. */
@container page (max-width: 900px) {
  .cards,
  .cards.trois { grid-template-columns: 1fr; }
}

/* Phases couvertes : plus de dégradé. Les phases exécutées portent la couleur
   pleine de l'entité, les autres une variante claire lisible. */
.phase:nth-child(2),
.phase:nth-child(3),
.phase:nth-child(4),
.phase:nth-child(5),
.phase:nth-child(6) { --ph: var(--c); }
.phase.off { --ph: #E2E6EA; color: var(--ink-2); }

/* Le filtrage des références se fait côté client. */
.ref-item.is-hidden { display: none; }
.refs-empty { padding: 60px 0; text-align: center; color: var(--ink-3); }

/* Le CSS de base du plugin coupe tous les outlines ; on rétablit un anneau
   de focus au clavier, invisible à la souris. */
.site :focus-visible {
  outline: 2px solid var(--c) !important;
  outline-offset: 3px;
  border-radius: 3px;
}
.skip-link {
  position: absolute; top: 1rem; left: 1rem; z-index: 1080;
  background: #fff; padding: .75rem 1.25rem; border-radius: var(--r-s);
}

/* Contenu saisi dans l'éditeur : on aligne sur la typographie de la maquette. */
.the-content > *:last-child { margin-bottom: 0; }
.the-content h2 { font-size: clamp(26px, 2.6cqw, 38px); margin-bottom: .6em; }
.the-content h3 { font-size: clamp(19px, 1.8cqw, 24px); font-weight: 700; margin-bottom: .6em; font-family: var(--ff); }
.the-content p, .the-content ul, .the-content ol { margin-bottom: 1.15em; }
.the-content p { font-size: 17px; color: var(--ink-2); line-height: 1.65; }
.the-content a:not(.btn) { color: var(--c); text-decoration: underline; text-underline-offset: .2em; }
.the-content ul { list-style: none; padding-left: 0; display: grid; gap: 12px; }
/* Marqueur positionné plutôt qu'en grille : un <li> saisi à l'éditeur peut
   mêler du gras et du texte libre, qui deviendraient chacun une cellule et
   passeraient à la ligne. Le positionnement absolu accepte n'importe quel
   contenu en ligne.
   La flèche reprend le tracé de .arw en masque : on ne peut pas injecter de
   SVG dans du contenu d'éditeur, mais le dessin et la couleur sont identiques. */
.the-content ul li {
  position: relative;
  padding-left: 31px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.the-content ul li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 18px; height: 18px;
  background-color: var(--c);
  -webkit-mask: var(--fleche) center / contain no-repeat;
  mask: var(--fleche) center / contain no-repeat;
}

/* ============================================================
   Modules du boilerplate conservés pour les pages à venir
   (Contact, Qui sommes-nous, mentions légales).
   Habillés dans le langage de la maquette : mêmes gouttières fluides,
   mêmes rayons, même palette de section.
   ============================================================ */

/* Dans ce thème, la gouttière de page est portée par .sec (via --pad) : on
   neutralise .container, que Bootstrap plafonne et centre, pour éviter un
   double retrait si un contenu en contient un. */
.site .container,
.site .container-fluid {
  width: 100%; max-width: none;
  margin-left: 0; margin-right: 0;
  padding-left: 0; padding-right: 0;
}

/* Un h1 dans une titraille se cale sur le h2 de la maquette. */
.head h1 { font-size: clamp(28px, 3.8cqw, 52px); line-height: 1.06; max-width: 25ch; }

/* Titraille centrée : les largeurs de lecture restent, recentrées. */
.head--centre { text-align: center; }
.head--centre h1,
.head--centre h2,
.head--centre p { margin-left: auto; margin-right: auto; }

/* Pagination de WordPress, aux couleurs de la section. */
.pagination { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border-radius: 100px; background: #ECF0F3;
  font-size: 14.5px; font-weight: 700; color: var(--ink-2);
}
.pagination .page-numbers:hover { background: var(--c-20); }
.pagination .page-numbers.current { background: var(--ink); color: #fff; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Gouttières fluides, pilotées par les variables de grille de Bootstrap. */
.gx-split { --bs-gutter-x: clamp(28px, 5cqw, 90px); }
.g-cards  { --bs-gutter-x: clamp(16px, 2.2cqw, 32px); --bs-gutter-y: clamp(16px, 2.2cqw, 32px); }

/* Titres d'affichage : en Arial Black, un mot comme « parahospitalière » ou
   « investissements » dépasse la largeur utile d'un écran de 320 à 390 px. La
   césure française prend le relais ; la coupure franche ne sert que de filet,
   si le navigateur n'a pas le dictionnaire. */
.site h1,
.site h2,
.ecard h3,
.ref-card h3,
.tuile__titre {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Les colonnes Bootstrap basculent sur le viewport, tout le reste de la page
   sur le conteneur « page ». Selon les classes choisies dans l'admin, une
   grille de tuiles pouvait donc rester à deux colonnes là où .cards et .ecards
   étaient déjà empilées. On aligne le passage à la colonne unique sur 720 px,
   quel que soit le col-* retenu. */
@container page (max-width: 720px) {
  .row.g-cards > [class*="col-"] { flex: 0 0 auto; width: 100%; }
}

/* Images de contenu : rayon et légende de la charte. */
.figure-image { display: block; width: 100%; height: auto; border-radius: var(--r); }
.figure-legende { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }

/* Tuile de contenu : même aplat et même bascule au survol que .ecard. */
.tuile {
  display: flex; flex-direction: column; height: 100%;
  border-radius: var(--r); overflow: hidden;
  background: var(--c-20); color: var(--ink);
  transition: background .22s, color .22s;
}
a.tuile:hover { background: var(--c); color: #fff; }
.tuile__media { display: block; }
.tuile__media img { display: block; width: 100%; aspect-ratio: 22 / 15; object-fit: cover; }
.tuile__corps { display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 2.6cqw, 36px); }
.tuile__k {
  display: block; font-size: 12.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c); margin-bottom: 12px;
}
.tuile__titre {
  display: block; font-size: clamp(19px, 1.9cqw, 25px); font-weight: 700;
  line-height: 1.15; letter-spacing: -.01em; margin-bottom: 10px;
}
.tuile__texte { display: block; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.tuile__go { display: block; margin-top: auto; padding-top: 26px; font-size: 15px; font-weight: 700; color: var(--c); }
a.tuile:hover .tuile__k,
a.tuile:hover .tuile__go { color: #fff; }
a.tuile:hover .tuile__texte { color: rgba(255, 255, 255, .88); }

/* ============================================================
   Retours du 24.09.2026
   ============================================================ */

/* Listes à flèches plus compactes : le client trouvait trop de blanc entre
   le texte et les filets (30 px de part et d'autre à 1440 px, 20 px ici). */
.arrows li { padding: clamp(14px, 1.4cqw, 20px) 0; }
.arrows b { margin-bottom: 4px; }

/* ---------- Apparition au défilement ----------
   La classe .js-reveal n'est posée par le script que si le visiteur n'a pas
   demandé à réduire les animations : sans JavaScript, tout reste visible.
   Le script retire .reveal une fois l'entrée jouée, pour rendre à chaque
   élément ses propres transitions (survol des cartes, notamment). */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
  transition-delay: var(--d, 0s);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* Entrée de l'en-tête visuel : l'image se pose, le texte monte en cascade. */
@keyframes altim-monte { from { opacity: 0; transform: translateY(20px); } }
@keyframes altim-pose  { from { transform: scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  .hero > img,
  .ref-hero > img { animation: altim-pose 1.8s cubic-bezier(.2, .7, .3, 1) both; }
  .hero-in > *,
  .ref-hero .in > * { animation: altim-monte .8s cubic-bezier(.2, .7, .3, 1) both; }
  .hero-in > :nth-child(2),
  .ref-hero .in > :nth-child(2) { animation-delay: .1s; }
  .hero-in > :nth-child(3),
  .ref-hero .in > :nth-child(3) { animation-delay: .2s; }
  .hero-in > :nth-child(4),
  .ref-hero .in > :nth-child(4) { animation-delay: .3s; }
}

/* ---------- Micro-interactions ---------- */
/* Cartes cliquables : légère levée au survol, en plus de l'aplat plein. */
.ecard,
a.tuile { transition: background .22s, color .22s, transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s; }
.ecard:hover,
a.tuile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--c-180) 60%, transparent); }

/* La flèche ↗ des boutons et liens « plus » file dans sa direction. */
.btn .ar,
.more .ar { transition: transform .22s cubic-bezier(.2, .7, .3, 1); }
.btn:hover .ar,
.more:hover .ar { transform: translate(2px, -2px); }

/* Soulignement du menu : il se déroule depuis la gauche au lieu d'apparaître. */
.hd-nav a::after { transform: scaleX(0); transform-origin: left; transition: opacity .18s, transform .28s cubic-bezier(.2, .7, .3, 1); }
.hd-nav a:hover::after,
.hd-nav a[aria-current]::after { transform: none; }

/* Barre des entités : le filet de couleur glisse en place. */
.ents a { transition: color .18s, border-color .18s; }

@media (prefers-reduced-motion: reduce) {
  .ecard:hover,
  a.tuile:hover,
  .btn:hover .ar,
  .more:hover .ar { transform: none; }
}

/* ---------- Accueil : l'en-tête laisse voir la suite ----------
   Les associés ne pensaient pas à faire défiler : l'en-tête remplissait
   l'écran. Titre plus compact pour que le haut de la section suivante
   apparaisse, et invitation explicite à descendre. */
.hero:not(.hero--sm) { min-height: min(clamp(420px, 48cqw, 640px), calc(100svh - 300px)); }
/* La section qui suit remonte un peu, pour que son titre entre dans l'écran. */
.hero:not(.hero--sm) + .sec { padding-top: clamp(44px, 4.6cqw, 72px); }
.hero:not(.hero--sm) h1 { font-size: clamp(34px, 4.3cqw, 60px); max-width: 24ch; margin-bottom: 18px; }
.hero:not(.hero--sm) .hero-in { padding-top: clamp(32px, 4cqw, 64px); padding-bottom: clamp(44px, 4.6cqw, 76px); }
.hero:not(.hero--sm) .cta { margin-top: 26px; }

.hero-suite {
  position: absolute; z-index: 3; right: var(--pad); bottom: clamp(44px, 4.6cqw, 76px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fff;
}
.hero-suite svg {
  width: 52px; height: 52px; padding: 15px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .55);
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  transition: background .2s, color .2s, border-color .2s;
}
.hero-suite:hover { color: #fff; }
.hero-suite:hover svg { background: #fff; border-color: #fff; color: var(--c-160); }
@keyframes altim-rebond { 0%, 100% { transform: none; } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-suite svg { animation: altim-rebond 1.8s ease-in-out 1.2s 5; }
}
@container page (max-width: 720px) {
  .hero-suite { display: none; }
}

/* ---------- Barre des entités plus explicite ----------
   Trois onglets teintés de la couleur de leur entité, avec pastille et
   flèche : ils se lisent comme des boutons avant même le survol. Au survol
   et sur la page en cours, l'onglet passe en couleur pleine. */
.ents { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
.ents a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 14px; border-top: 0; border-radius: var(--r-s);
  background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--ink);
  transition: color .18s, background .18s;
}
.ents-dot { display: block; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--c); transition: background .18s; }
.ents .ar { display: block; color: var(--c); transition: color .18s, transform .22s cubic-bezier(.2, .7, .3, 1); }
.ents .ar .arw { width: 14px; height: 14px; }
.ents a:hover,
.ents a[aria-current] { background: var(--c); color: #fff; }
.ents a:hover .ents-dot,
.ents a[aria-current] .ents-dot,
.ents a:hover .ar,
.ents a[aria-current] .ar { background: transparent; color: #fff; }
.ents a:hover .ents-dot,
.ents a[aria-current] .ents-dot { background: #fff; }
.ents a:hover .ar { transform: translate(2px, -2px); }
@container page (max-width: 720px) {
  .ents { gap: 4px; padding-top: 6px; padding-bottom: 6px; }
  .ents a { gap: 6px; padding: 11px 6px; }
  .ents .ar, .ents-dot { display: none; }
}

/* ---------- Mini-CV des associés ---------- */
button.tuile {
  width: 100%; padding: 0; border: 0; text-align: left; font: inherit; cursor: pointer;
}
.tuile--cv:hover { background: var(--c); color: #fff; }
.tuile--cv:hover .tuile__k,
.tuile--cv:hover .tuile__go { color: #fff; }
.tuile--cv:hover .tuile__texte { color: rgba(255, 255, 255, .88); }
.tuile--cv { transition: background .22s, color .22s, transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s; }
.tuile--cv:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--c-180) 60%, transparent); }

.cv-dialog {
  /* Le modal est plafonné à 960 px : sa largeur ne suit pas celle de la page.
     Il porte donc son propre conteneur, et la bascule une colonne plus bas
     dépend de sa largeur réelle, pas de celle du viewport. */
  container-type: inline-size; container-name: cv;
  width: min(960px, calc(100vw - 32px)); max-height: calc(100svh - 48px);
  padding: 0; border: 0; border-radius: var(--r); overflow: auto;
  background: #fff; color: var(--ink);
}
.cv-dialog::backdrop { background: rgba(8, 12, 16, .62); backdrop-filter: blur(3px); }
.cv { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.cv[hidden] { display: none; }
.cv__photo img { width: 100%; height: 100%; min-height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cv__corps { padding: clamp(28px, 4vw, 52px); padding-right: clamp(56px, 6vw, 72px); }
.cv__k {
  display: block; margin-bottom: 12px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--c);
}
.cv__nom { font-size: clamp(26px, 3cqw, 38px); line-height: 1.08; margin-bottom: 22px !important; }
.cv__texte p,
.cv__texte ul { font-size: 16.5px; }
.cv-fermer {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--c-20); color: var(--c-160); transition: background .18s, color .18s;
}
.cv-fermer:hover { background: var(--c); color: #fff; }
.cv-fermer svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cv-nav {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px clamp(20px, 3vw, 32px); border-top: 1px solid var(--line);
}
.cv-nav button {
  border: 0; background: none; padding: 8px 4px;
  font-size: 15px; font-weight: 700; color: var(--c); transition: color .18s;
}
.cv-nav button:hover { color: var(--c-160); }
@keyframes altim-ouvre { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: no-preference) {
  .cv-dialog[open] { animation: altim-ouvre .35s cubic-bezier(.2, .7, .3, 1); }
}
@container cv (max-width: 760px) {
  .cv { grid-template-columns: 1fr; }
  .cv__photo img { aspect-ratio: 16 / 11; object-position: 50% 22%; }
  .cv__corps { padding: 24px 22px 28px; }
}

/* Mini-CV : intertitres en surtitre de la charte, périodes resserrées. */
.cv__texte > p:first-child { font-size: 17px; color: var(--ink); }
.cv__texte h3 {
  margin: 26px 0 12px !important;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c);
}
.cv__texte ul { gap: 8px; margin-bottom: 0; }
.cv__texte p { margin-bottom: .9em; line-height: 1.55; }
.cv__texte p strong { color: var(--ink); }
.cv__photo { background: var(--c-20); }
.cv__photo img { object-position: 50% 20%; }

/* Menu principal un peu plus grand (15 → 17 px), bouton en proportion. */
.hd-nav a { font-size: 17px; }
.hd-cta { font-size: 15.5px; }

/* ---------- Menu mobile ----------
   Le panneau est rendu hors de .site (il doit rester fixé au viewport) :
   il n'héritait donc d'aucune variable de la charte, d'où un rendu noir et
   blanc et un bouton « Contacter » blanc sur transparent, invisible.
   On lui redonne les couleurs, puis on l'habille comme le reste du site :
   ligne tricolore, liens en gros corps avec la flèche, entités en onglets
   teintés, bouton plein. */
.menu-mobile {
  --dev-100:#006EA5; --dev-120:#005985; --dev-160:#002B42; --dev-20:#CCE1ED; --dev-10:#E6F0F6;
  --pla-100:#DC5041; --inv-100:#55A05A;
  --c:var(--dev-100); --c-120:var(--dev-120); --c-160:var(--dev-160); --c-20:var(--dev-20); --c-10:var(--dev-10);
  --ink:#14181C; --ink-2:#3C464F; --ink-3:#6C7883; --line:#E2E6EA; --bg-2:#F6F8F9;
  --r:16px; --r-s:9px;
  --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 11.4 11.4 4.6M6.2 4.6h5.2v5.2'/%3E%3C/svg%3E");
  --bs-offcanvas-width: min(420px, 90vw);
  font-family: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  color: var(--ink);
}
.menu-mobile a { text-decoration: none; }
.menu-mobile .tribar { display: flex; height: 8px; width: 100%; flex: none; }
.menu-mobile .tribar i { flex: 1; display: block; }
.menu-mobile .tribar i:nth-child(1) { background: var(--dev-100); }
.menu-mobile .tribar i:nth-child(2) { background: var(--pla-100); }
.menu-mobile .tribar i:nth-child(3) { background: var(--inv-100); }

.menu-mobile .offcanvas-header { padding: 18px 22px; border-bottom: 0; }
.menu-mobile .logo { color: var(--ink); }
.menu-mobile .logo svg { width: 118px; }
.menu-mobile .logo .lg-acc { fill: var(--c); }
.menu-mobile .btn-close {
  width: 44px; height: 44px; padding: 0; margin: 0 0 0 auto; opacity: 1; border-radius: 50%;
  background: var(--c-20) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23002B42' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: background-color .18s;
}
.menu-mobile .btn-close:hover { background-color: var(--c-40, #99C4DB); }
.menu-mobile .offcanvas-body { display: flex; flex-direction: column; padding: 6px 22px 28px; }

/* Liens principaux : gros corps, flèche de la charte, filets fins. */
.menu-mobile__link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
.menu-mobile__link::after {
  content: ""; flex: none; width: 18px; height: 18px; background-color: var(--c);
  -webkit-mask: var(--fleche) center / contain no-repeat; mask: var(--fleche) center / contain no-repeat;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}
.menu-mobile__link:hover,
.menu-mobile__link[aria-current] { color: var(--c); }
.menu-mobile__link:hover::after { transform: translate(2px, -2px); }

.menu-mobile__label {
  display: block; margin: 30px 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}

/* Entités : mêmes onglets teintés que la barre du bureau. */
.menu-mobile__ents { display: grid; gap: 8px; }
.menu-mobile__ent {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: var(--r-s);
  background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--ink);
  font-size: 16px; font-weight: 700; transition: background .18s, color .18s;
}
.menu-mobile__ent[data-entite="developpement"] { --c: var(--dev-100); }
.menu-mobile__ent[data-entite="planification"] { --c: var(--pla-100); }
.menu-mobile__ent[data-entite="investissement"] { --c: var(--inv-100); }
.menu-mobile__ent > span:not(.ar) { flex: 1; }
.menu-mobile__ent .ents-dot { display: block; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.menu-mobile__ent .ar { color: var(--c); }
.menu-mobile__ent .arw { width: 16px; height: 16px; }
.menu-mobile__ent:hover,
.menu-mobile__ent[aria-current] { background: var(--c); color: #fff; }
.menu-mobile__ent:hover .ents-dot,
.menu-mobile__ent[aria-current] .ents-dot { background: #fff; }
.menu-mobile__ent:hover .ar,
.menu-mobile__ent[aria-current] .ar { color: #fff; }

/* Bouton de contact plein, poussé en bas du panneau s'il reste de la place. */
.menu-mobile__cta { margin-top: 30px; padding: 17px 28px; font-size: 16px; gap: 10px; }
.menu-mobile__cta .ar { display: block; }
.menu-mobile__social { display: flex; gap: 10px; margin-top: auto; padding-top: 26px; }
.menu-mobile__social a {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-10); color: var(--c-160); font-size: 18px; transition: background .18s, color .18s;
}
.menu-mobile__social a:hover { background: var(--c); color: #fff; }