/* ============ EVICO — système ============ */
.evico{
  --paper:#EEF1F2; --paper-2:#E3E8EA; --line:#D3DBDE;
  --ink:#0C1418; --ink-2:#45535B; --ink-3:#5A6970;
  --night:#0D1B24; --night-2:#16242E; --night-line:#24343F;
  --snow:#F2F5F7; --snow-2:#9FB1BC;
  --blue:#0074F1; --blue-btn:#0067D6; --blue-deep:#005FC6; --blue-light:#5CA9FF;
  --amber:#E8A33D; --amber-deep:#9C620D;
  --f-disp:"Bricolage Grotesque","Instrument Sans",Arial,sans-serif;
  --f-body:"Instrument Sans",-apple-system,Arial,sans-serif;
  --f-serif:"Instrument Serif",Georgia,serif;
  --f-mono:"IBM Plex Mono","SF Mono",Menlo,monospace;
  --wrap:1360px; --gut:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  font-family:var(--f-body); color:var(--ink); background:var(--paper);
  /* la bascule doit se sentir a peine, mais pas au prix de la lisibilite :
     le script calcule la duree et la plafonne, voir le commentaire la-bas */
  transition:background-color var(--ev-bg-t, .45s) cubic-bezier(.45,.05,.25,1);
  font-size:clamp(15px,.4vw + 14px,17px); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.evico[data-bg="night"]{background:var(--night)}
.evico *,.evico *::before,.evico *::after{box-sizing:border-box; margin:0; padding:0}
.evico h1,.evico h2,.evico h3{font-family:var(--f-disp); font-weight:560; line-height:1.04; letter-spacing:-.028em; text-wrap:balance}
.evico p{max-width:62ch}
.evico a{color:inherit; text-decoration:none}
.evico img,.evico video{max-width:100%; display:block}
.evico button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
.evico :focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:2px}
.ev-serif{font-family:var(--f-serif); font-style:italic; font-weight:400; font-size:1.05em; letter-spacing:0}
.ev-wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}

/* ---------- nav ---------- */
.ev-nav{position:fixed; inset:0 0 auto 0; z-index:56; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px var(--gut); transition:background-color .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease)}
.ev-nav.is-fixed{background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding-block:12px; box-shadow:0 1px 0 var(--line)}
.evico[data-bg="night"] .ev-nav.is-fixed{background:color-mix(in srgb, var(--night) 82%, transparent); box-shadow:0 1px 0 var(--night-line)}
.ev-nav-brand{font-family:var(--f-disp); font-weight:700; letter-spacing:-.02em; font-size:1.14rem; display:inline-flex; align-items:center; min-height:44px; padding-block:9px; margin-block:-9px}
.ev-nav-brand span{color:var(--blue-light)}
.ev-nav-links{display:flex; gap:clamp(14px,2.4vw,34px); font-size:1rem}
.ev-nav-links a{position:relative; padding-block:4px}
.ev-nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:currentColor; transition:right .35s var(--ease)}
.ev-nav-links a:hover::after{right:0}
.ev-hero-on .ev-nav:not(.is-fixed){color:#fff}
/* ---------- menus deroulants de la barre ----------
   Vingt et une prestations et sept metiers ne tiennent pas dans une barre de
   navigation. Deux panneaux pleine largeur posent la carte du site sans quitter
   la page. Ils se ferment a l'echappement, au clic dehors et au defilement. */
.evico .ev-nav-drop{position:static; display:flex; align-items:center}
.evico .ev-nav-bt{display:inline-flex; align-items:center; gap:8px; padding-block:4px; position:relative;
  font:inherit; font-size:1rem; color:inherit; background:none; border:0; cursor:pointer;
  -webkit-appearance:none; appearance:none}
.evico .ev-nav-bt::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:currentColor; transition:right .35s var(--ease)}
.evico .ev-nav-drop:hover .ev-nav-bt::after,
.evico .ev-nav-drop.is-open .ev-nav-bt::after{right:0}
.evico .ev-nav-ch{width:7px; height:7px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg);
  transition:transform .3s var(--ease)}
.evico .ev-nav-drop.is-open .ev-nav-ch{transform:translateY(1px) rotate(225deg)}

.evico .ev-mega{position:absolute; left:0; right:0; top:100%; z-index:55;
  background:var(--paper); border-top:1px solid var(--line);
  box-shadow:0 26px 64px rgba(6,12,17,.18);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s}
.evico .ev-nav-drop.is-open .ev-mega{opacity:1; visibility:visible; transform:none}
.evico .ev-mega-in{max-width:var(--wrap); margin-inline:auto; color:var(--ink);
  padding:clamp(26px,2.8vw,40px) var(--gut) clamp(24px,2.6vw,34px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:clamp(20px,2.2vw,38px)}
.evico .ev-mega-t{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:11px; border-bottom:1px solid var(--line)}
.evico .ev-mega ul{list-style:none; margin:6px 0 0; padding:0; display:grid}
.evico .ev-mega li a{display:block; padding:7px 0; font-size:.97rem; line-height:1.35; color:var(--ink-2);
  transition:color .25s var(--ease), padding-left .25s var(--ease)}
.evico .ev-mega li a:hover{color:var(--blue-deep); padding-left:5px}
.evico .ev-mega li a::after{display:none}
/* la derniere colonne n'est pas une liste : c'est ce qu'on veut que le visiteur
   retienne s'il ne clique nulle part */
.evico .ev-mega-note{background:var(--paper-2); border-radius:16px; padding:clamp(18px,1.8vw,24px);
  display:grid; align-content:start; gap:10px}
.evico .ev-mega-note h4{font-family:var(--f-disp); font-weight:600; font-size:1.06rem;
  letter-spacing:-.02em; line-height:1.25; color:var(--ink)}
.evico .ev-mega-note p{font-size:.94rem; line-height:1.5; color:var(--ink-2); max-width:none}
.evico .ev-mega-note .ev-post-link{margin-top:2px}
/* la barre reprend son fond des qu'un panneau descend : sinon il flotte au-dessus
   d'une entete transparente et la lecture se brouille */
.evico .ev-nav.has-mega{background:var(--paper); box-shadow:none}
.ev-hero-on .ev-nav.has-mega:not(.is-fixed){color:var(--ink)}
.ev-hero-on .ev-nav.has-mega:not(.is-fixed) .ev-btn-nav{background:var(--ink); color:var(--paper)}
.evico[data-bg="night"] .ev-nav.has-mega{background:var(--night-2)}
.evico[data-bg="night"] .ev-mega{background:var(--night-2); border-top-color:var(--night-line);
  box-shadow:0 26px 64px rgba(0,0,0,.5)}
.evico[data-bg="night"] .ev-mega-in{color:var(--snow)}
.evico[data-bg="night"] .ev-mega-t{color:var(--snow-2); border-bottom-color:var(--night-line)}
.evico[data-bg="night"] .ev-mega li a{color:var(--snow-2)}
.evico[data-bg="night"] .ev-mega li a:hover{color:var(--amber)}
.evico[data-bg="night"] .ev-mega-note{background:rgba(255,255,255,.045)}
.evico[data-bg="night"] .ev-mega-note h4{color:var(--snow)}
.evico[data-bg="night"] .ev-mega-note p{color:var(--snow-2)}
/* groupes du panneau mobile */
.evico .ev-menu-t{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--snow-2); padding:18px 0 8px}
.evico .ev-menu-liens a.ev-menu-sec{min-height:46px; font-family:var(--f-body); font-weight:400;
  letter-spacing:0; font-size:1.02rem; color:var(--snow-2)}
.evico .ev-menu-pied{display:grid}
.evico[data-bg="night"] .ev-nav{color:var(--snow)}
.ev-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:57; pointer-events:none}
.ev-progress i{display:block; height:100%; background:var(--blue); transform-origin:0 50%; transform:scaleX(0)}

/* ---------- boutons ---------- */
.ev-btn{display:inline-flex; align-items:center; gap:10px; font-weight:560; font-size:1rem; padding:14px 26px; border-radius:999px; transition:transform .3s var(--ease), background-color .3s, color .3s, border-color .3s; will-change:transform}
.evico .ev-btn-solid{background:var(--blue-btn); color:#fff}
.evico .ev-btn-solid:hover{background:#0554A8}
/* trait en ombre interne et non en bordure : une bordure s'ajoute au padding
   et decale le libelle de 1,5 px par rapport au bouton plein */
.evico .ev-btn-ghost{border:0; box-shadow:inset 0 0 0 1.5px currentColor}
.evico .ev-btn-ghost:hover{background:color-mix(in srgb, currentColor 8%, transparent)}
.evico .ev-btn-nav{padding:10px 20px; font-size:1rem; background:var(--ink); color:var(--paper)}
.evico .ev-btn-nav:hover{background:var(--blue-btn); color:#fff}
.evico[data-bg="night"] .ev-btn-nav{background:var(--snow); color:var(--night)}
.ev-hero-on .ev-nav:not(.is-fixed) .ev-btn-nav{background:#fff; color:var(--ink)}
/* aucun etat de focus n'existait sur les accordeons, l'index metiers ni les liens
   d'article : 23 elements interactifs inatteignables au clavier sans repere visuel */
.evico :is(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--blue); outline-offset:3px; border-radius:6px}
.evico[data-bg="night"] :is(a,button,input,select):focus-visible,
.ev-ch-dark :is(a,button,input,select):focus-visible,
.ev-hero :is(a,button):focus-visible{outline-color:var(--blue-light)}
.evico .ev-btn:focus-visible{outline-offset:4px}
.ev-btn .ev-arr{transition:transform .3s var(--ease)}
.ev-btn:hover .ev-arr{transform:translateX(4px)}

/* ---------- hero ---------- */
.ev-hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; overflow:clip; background:var(--night)}
.ev-hero-media{position:absolute; inset:0; z-index:0}
.ev-hero-media video{width:100%; height:100%; object-fit:cover}
.ev-hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,14,19,.42) 0%, rgba(7,14,19,.06) 34%, rgba(7,14,19,.16) 58%, rgba(7,14,19,.78) 100%)}
.ev-hero-body{position:relative; z-index:1; padding:0 var(--gut) clamp(24px,4vh,48px); max-width:var(--wrap); margin-inline:auto; width:100%}
/* le plafond de 62ch herite de .evico p cassait ce libelle d'une ligne en deux */
.evico .ev-hero-eb{max-width:none}
.ev-hero-eb{font-family:var(--f-mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:#DDE7EC; margin-bottom:18px}
.ev-hero-title{font-size:clamp(2.7rem,8.4vw,7.4rem); font-weight:600; line-height:.99; letter-spacing:-.035em; margin-bottom:clamp(18px,2.6vh,28px)}
.ev-ht-mask{display:block; overflow:clip; padding-block:.06em; margin-block:-.06em}
.ev-ht-mask > span{display:block}
/* règle des titres : une part en romain, l'autre en serif italique bleue.
   Bleu clair sur les chapitres sombres, bleu profond sur les clairs. */
.evico h1 .ev-serif,.evico h2 .ev-serif{color:var(--blue-deep)}
.evico .ev-ch-dark h1 .ev-serif,.evico .ev-ch-dark h2 .ev-serif,
.evico .ev-hero h1 .ev-serif{color:var(--blue-light)}
.ev-hero-sub{font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.55; color:#E7EEF2; max-width:56ch; margin-bottom:clamp(20px,3vh,32px)}
.ev-hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:clamp(26px,4.5vh,52px)}
.ev-hero-cta .ev-btn-ghost{color:#fff}
.ev-hero-strip{position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.22)}
.ev-hero-strip ul{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:0 28px; max-width:var(--wrap); margin-inline:auto; padding:16px var(--gut) 20px}
.ev-hero-strip li{font-family:var(--f-mono); font-size:.78rem; line-height:1.5; color:#C9D6DD}
.ev-hero-strip b{display:block; color:#fff; font-weight:600}
.ev-hero-side{position:absolute; inset:0; z-index:1; pointer-events:none}
.ev-hero-side p{position:absolute; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.8; color:#9FADB8; opacity:0; max-width:none}
.ev-hero-side b{display:block; color:#fff; font-weight:600}
.ev-hero-side .p1{left:var(--gut); top:8.5%}
.ev-hero-side .p2{right:var(--gut); top:8.5%; text-align:right}
.ev-hero-side .p3{left:var(--gut); bottom:7.5%}
.ev-hero-side .p4{right:var(--gut); bottom:7.5%; text-align:right}
@media (max-width:900px){.ev-hero-side{display:none}}
.ev-hero-cue{position:absolute; right:var(--gut); bottom:110px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#CFDBE2}
.ev-hero-cue i{width:1.5px; height:44px; background:linear-gradient(#fff,transparent); animation:ev-cue 1.8s var(--ease) infinite}
@keyframes ev-cue{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}55%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

/* ---------- chapitres ---------- */
.ev-ch{position:relative; padding-block:clamp(84px,12vh,150px)}
.ev-ch-dark{color:var(--snow)}
/* volume en points de mesure en fond de chapitre : il occupe toute la section,
   decale vers la droite pour ne pas passer sous la colonne de texte */
.ev-viz{position:absolute; inset:0; z-index:0; width:100%; height:100%;
  display:block; pointer-events:none; opacity:.62}
.ev-ch-dark .ev-viz{opacity:.72}
/* a gauche la forme passe sous la colonne de texte : on la retient */
.ev-viz[data-side="left"]{opacity:.38}
.ev-ch-dark .ev-viz[data-side="left"]{opacity:.48}
.ev-has-viz > .ev-wrap{position:relative; z-index:1}
@media (max-width:1020px){
  .ev-viz{display:none}   /* le texte prend toute la largeur, et une boucle de rendu en moins */
}
.ev-chhead{display:flex; align-items:baseline; gap:18px; margin-bottom:clamp(30px,4.5vh,54px)}
.ev-chnum{font-family:var(--f-mono); font-size:.8rem; font-weight:600; color:var(--blue-deep); letter-spacing:.08em}
.ev-ch-dark .ev-chnum{color:var(--amber)}
/* ---------- pictogrammes de chapitre (Lucide, licence ISC) ---------- */
/* Un par chapitre, jamais plus : le pictogramme prolonge la numerotation au
   lieu de la doubler. Marge negative pour qu'il fasse bloc avec le numero,
   l'ecart de 18px du conteneur restant pour le surtitre. */
.evico .ev-chhead .ev-ico{flex:0 0 auto; align-self:center; width:19px; height:19px;
  margin-right:-7px; color:var(--blue-deep); fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.evico .ev-ch-dark .ev-chhead .ev-ico{color:var(--amber)}
.ev-eyebrow{font-family:var(--f-mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.ev-ch-dark .ev-eyebrow{color:var(--snow-2)}
.ev-h2{font-size:clamp(2.1rem,4.6vw,4.3rem); max-width:20ch; margin-bottom:clamp(23px,3.4vh,34px)}
.ev-lead{font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.6; color:var(--ink-2); max-width:58ch}
.ev-ch-dark .ev-lead{color:var(--snow-2)}
.ev-split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,90px); align-items:start}
.ev-sticky{position:sticky; top:110px}
.ev-body-2{color:var(--ink-2)}
.ev-ch-dark .ev-body-2{color:var(--snow-2)}

/* ---------- constellation ---------- */
.ev-cst{position:relative; overflow:clip; background:#05070A; padding-bottom:clamp(60px,9vh,110px)}
.ev-cst::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1.2px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 78%)}
.ev-cst > .ev-wrap{position:relative; z-index:2}
/* la scène doit tenir sous la barre de navigation une fois épinglée */
.ev-cst-stage{position:relative; width:100%; max-width:1180px; margin:clamp(26px,5vh,60px) auto 0;
  aspect-ratio:1180/760; max-height:76svh; padding-inline:var(--gut)}
.ev-cst-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0}
.ev-cst-lines path{fill:none; stroke:rgba(255,255,255,.34); stroke-width:1.1; stroke-linecap:round}
.ev-cst-lines circle{fill:rgba(255,255,255,.5)}
/* trame de fond : segments fins qui se tracent et s'effacent en continu */
.ev-cst-mesh{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0}
.ev-static .ev-cst-mesh{opacity:1}
.ev-cst-mesh line{stroke:rgba(255,255,255,.55); stroke-width:.7; stroke-linecap:round}
.ev-cst-mesh circle{fill:rgba(255,255,255,.45)}

.ev-cst-word{position:absolute; left:var(--x); top:var(--y); z-index:2; white-space:nowrap;
  font-family:var(--f-disp); font-weight:700; font-size:clamp(2rem,5.4vw,4.6rem);
  letter-spacing:-.05em; line-height:1; color:#fff}
.ev-cst-word--ia{color:var(--blue-light)}

.ev-cst-node{position:absolute; left:var(--x); top:var(--y); width:var(--w,188px); aspect-ratio:var(--ar,188/78);
  display:flex; align-items:center; justify-content:center; gap:11px;
  padding:10px 16px; border-radius:18px; z-index:1; overflow:clip;
  background:var(--bgi); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  transition:transform .4s var(--ease), border-color .4s var(--ease)}
.ev-cst-node::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 22% -14%, rgba(255,255,255,.14), transparent 58%)}
/* grain et hachures fines : casse l'aplat des dégradés sans salir les logos */
.ev-cst-node::after{content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.55;
  background-image:repeating-linear-gradient(118deg, rgba(255,255,255,.10) 0 1px, transparent 1px 8px),
                   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  background-size:auto, 140px 140px}
.ev-cst-node:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.34)}
.ev-cst-node b{position:relative; font-family:var(--f-disp); font-weight:600;
  font-size:clamp(1rem,1.2vw,1.18rem); letter-spacing:-.02em; color:var(--fg,#fff); white-space:nowrap}
.ev-cst-node svg{position:relative; width:clamp(19px,1.8vw,25px); height:auto; color:var(--fg,#fff); flex:none}

@media (max-width:900px){
  /* Le plateau garde son max-height de 76svh, herite de la mise en scene large.
     En grille, le contenu montait a 1633 px pour 617 px de cadre : sept cartes
     sur dix etaient coupees et le mot IA, rejete en fin de grille, n'apparaissait
     jamais. La marque y perdait la moitie de son nom. */
  .evico .ev-cst-stage{aspect-ratio:auto; max-height:none; display:grid;
    grid-template-columns:1fr 1fr; gap:12px; padding-top:8px}
  .evico .ev-cst-lines{display:none}
  /* les deux moities du nom se rejoignent sur la premiere ligne, de part et
     d'autre de l'axe : on lit EVICO IA d'un bloc, puis les modeles en dessous */
  .evico .ev-cst-word{position:static; margin:0 0 clamp(12px,2.4vh,20px);
    font-size:clamp(2rem,9vw,3.2rem); line-height:1}
  /* la ligne est imposee : IA est le dernier element du balisage et le placement
     automatique le rejetait en fin de grille, a 400 px sous EVICO */
  .evico .ev-cst-word--evico{grid-column:1; grid-row:1; justify-self:end; text-align:right}
  .evico .ev-cst-word--ia{grid-column:2; grid-row:1; justify-self:start; text-align:left;
    margin-inline-start:.2em}
  /* La carte reste positionnee, et remet ses decalages a zero pour se laisser
     placer par la grille. En static, ses deux pseudo-elements en inset:0 se
     calaient sur le plateau au lieu de la carte : le halo blanc et la trame de
     grain des dix cartes se superposaient sur toute la scene et la noyaient de
     gris. Sans ratio impose, la carte se cale ensuite sur son contenu. */
  .evico .ev-cst-node{position:relative; inset:auto; width:auto; aspect-ratio:auto;
    min-height:72px; padding:12px 14px; gap:9px}
}
@media (max-width:359px){
  .evico .ev-cst-stage{grid-template-columns:1fr}
  .evico .ev-cst-word--evico,.evico .ev-cst-word--ia{grid-column:1; justify-self:center; text-align:center}
  .evico .ev-cst-word--ia{margin-inline-start:0}
}

/* ---------- 01 preuves ---------- */
.ev-figs{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.5vw,40px); margin-top:clamp(30px,5vh,56px)}
.ev-fig{border-top:1.5px solid var(--ink); padding-top:22px; position:relative}
.ev-fig-v{font-family:var(--f-disp); font-weight:620; font-size:clamp(2.6rem,4.6vw,4.6rem); letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; display:flex; align-items:baseline}
.ev-fig-v .ev-lot-ast{width:.55em; height:.55em; margin-left:.14em; align-self:center}
.ev-fig-l{margin-top:13px; font-size:1rem; color:var(--ink-2); max-width:26ch}
.ev-fig-s{margin-top:8px; font-family:var(--f-mono); font-size:.78rem; color:var(--ink-3); letter-spacing:.02em}

/* ---------- schema du deroule ---------- */
/* Le texte du schema est fixe en px dans le viewBox : sous 820 px il devient
   illisible en retrecissant. La frise qui suit porte la meme information sous
   une forme qui se replie, donc on masque le schema plutot que de le tasser. */
.evico .ev-sch{display:block; width:100%; height:auto; overflow:visible;
  margin-top:clamp(16px,2.2vh,24px)}
.evico .ev-sch-t{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--snow-2); margin-top:clamp(34px,5vh,56px); max-width:none}
.evico .ev-sch .s-box{fill:none; stroke:var(--snow); stroke-width:1.5}
.evico .ev-sch .s-box-2{fill:none; stroke:var(--night-line); stroke-width:1.5}
.evico .ev-sch .s-t{font-family:var(--f-disp); font-weight:600; font-size:16px; fill:var(--snow)}
.evico .ev-sch .s-s{font-family:var(--f-mono); font-size:11px; fill:var(--snow-2); letter-spacing:.06em}
.evico .ev-sch .s-a{stroke:var(--amber); stroke-width:1.5; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.evico .ev-sch .s-cap{font-family:var(--f-mono); font-size:11px; fill:var(--amber); letter-spacing:.12em}
@media (max-width:820px){
  .evico .ev-sch,.evico .ev-sch-t{display:none}
}

/* la bio precede la description du role : elle doit se lire comme une legende
   factuelle, pas comme la premiere phrase du paragraphe */
.evico .ev-role-bio{font-family:var(--f-mono); font-size:.8rem; line-height:1.65;
  color:var(--snow-2); margin-bottom:15px; padding-bottom:15px;
  border-bottom:1px solid var(--night-line)}

.evico .ev-sch + .ev-frise{margin-top:clamp(48px,6.6vh,76px)}

/* ---------- figures dessinees ---------- */
/* Deux graphiques et une bande video cassent un defilement de quatre mille mots.
   Chacun porte une information que le texte ne donne pas, sinon c'est du
   remplissage. Le texte des SVG est fixe en px : plutot que de le laisser
   retrecir jusqu'a l'illisible, le cadre defile, comme pour .ev-tab. */
.evico .ev-fig-w{overflow-x:auto; margin-top:clamp(30px,4.5vh,52px)}
.evico .ev-fig-w svg{display:block; width:100%; height:auto}
.evico .ev-fig-w figcaption{font-family:var(--f-mono); font-size:.78rem; line-height:1.7;
  color:var(--ink-3); margin-top:18px; max-width:70ch}
.evico .ev-ch-dark .ev-fig-w figcaption{color:var(--snow-2)}

/* courbe de decrochage d'usage, sur fond sombre */
.evico .ev-curve{min-width:640px}
.evico .ev-curve .c-ax{stroke:var(--night-line); stroke-width:1.5; fill:none}
.evico .ev-curve .c-grid{stroke:var(--night-line); stroke-width:1; stroke-dasharray:3 7; fill:none}
.evico .ev-curve .c-line{stroke:var(--amber); stroke-width:2.2; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.evico .ev-curve .c-fill{fill:color-mix(in srgb, var(--amber) 12%, transparent); stroke:none}
.evico .ev-curve .c-pt{fill:var(--night); stroke:var(--amber); stroke-width:2}
.evico .ev-curve .c-t{font-family:var(--f-mono); font-size:11px; fill:var(--snow-2); letter-spacing:.1em}
.evico .ev-curve .c-a{font-family:var(--f-mono); font-size:11.5px; fill:var(--snow)}

/* schema du referent, sur fond sombre */
.evico .ev-flow{min-width:640px}
.evico .ev-flow .f-box{fill:none; stroke:var(--night-line); stroke-width:1.5}
.evico .ev-flow .f-box.is-on{stroke:var(--snow)}
.evico .ev-flow .f-t{font-family:var(--f-disp); font-weight:600; font-size:16px; fill:var(--snow)}
.evico .ev-flow .f-s{font-family:var(--f-mono); font-size:10px; fill:var(--snow-2); letter-spacing:.06em}
.evico .ev-flow .f-arr{stroke:var(--amber); stroke-width:1.5; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.evico .ev-flow .f-arr-2{stroke:var(--snow-2); stroke-width:1.3; fill:none;
  stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:4 5}
.evico .ev-flow .f-l{font-family:var(--f-mono); font-size:10px; fill:var(--amber)}
.evico .ev-flow .f-l-2{font-family:var(--f-mono); font-size:10px; fill:var(--snow-2)}

/* matrice impact / effort */
.evico .ev-mtx{min-width:620px}
.evico .ev-mtx .m-zone{fill:color-mix(in srgb, var(--blue) 9%, transparent)}
.evico .ev-mtx .m-ax{stroke:var(--ink); stroke-width:1.5; fill:none}
.evico .ev-mtx .m-mid{stroke:var(--line); stroke-width:1.2; stroke-dasharray:4 6; fill:none}
.evico .ev-mtx .m-dot{fill:none; stroke:var(--ink-3); stroke-width:1.6}
.evico .ev-mtx .m-on{fill:var(--blue); stroke:none}
.evico .ev-mtx .m-t{font-family:var(--f-mono); font-size:11px; fill:var(--ink-3); letter-spacing:.12em}
.evico .ev-mtx .m-q{font-family:var(--f-mono); font-size:11px; fill:var(--ink-3); letter-spacing:.1em}
.evico .ev-mtx .m-q.is-on{fill:var(--blue-deep)}

/* feuille de route sur douze mois */
.evico .ev-road{min-width:620px}
.evico .ev-road .r-sep{stroke:var(--line); stroke-width:1.2; stroke-dasharray:4 6}
.evico .ev-road .r-hd{font-family:var(--f-mono); font-size:11px; fill:var(--ink-3); letter-spacing:.14em}
.evico .ev-road .r-bar{fill:var(--blue)}
.evico .ev-road .r-bar-2{fill:color-mix(in srgb, var(--blue) 38%, #fff)}
.evico .ev-road .r-bar-3{fill:none; stroke:var(--ink-3); stroke-width:1.4}
.evico .ev-road .r-l{font-family:var(--f-mono); font-size:11.5px; fill:#fff}
.evico .ev-road .r-l-d{font-family:var(--f-mono); font-size:11.5px; fill:var(--ink-2)}

/* bande video de respiration */
.evico .ev-break{padding-block:clamp(18px,2.6vh,34px)}
.evico .ev-break .ev-media-band{margin-bottom:20px}

/* ---------- enumeration de causes ---------- */
/* Cinq causes ne sont ni un classement ni une sequence : pas de numerotation,
   qui laisserait croire a un ordre. Le nom en display a gauche, l'explication a
   droite, une regle entre chaque : la lecture d'un rapport, pas d'une liste a
   puces. Se distingue de .ev-sys, dont la colonne gauche est etroite et en mono. */
.evico .ev-causes{margin-top:clamp(30px,4.5vh,52px); border-top:1.5px solid var(--snow)}
.evico .ev-causes > div{display:grid; grid-template-columns:minmax(210px,30%) 1fr;
  gap:clamp(20px,3.4vw,52px); padding-block:clamp(26px,3.4vh,36px);
  border-bottom:1px solid var(--night-line); align-items:start;
  transition:background-color .3s}
.evico .ev-causes > div:hover{background:rgba(255,255,255,.03)}
.evico .ev-causes h3{font-family:var(--f-disp); font-weight:600; color:var(--snow);
  font-size:clamp(1.18rem,2vw,1.5rem); letter-spacing:-.028em; line-height:1.15}
.evico .ev-causes p{color:var(--snow-2); font-size:1rem; line-height:1.65; max-width:64ch}
@media (max-width:760px){
  .evico .ev-causes > div{grid-template-columns:1fr; gap:9px}
}

/* ---------- cartes de constat sur deux colonnes ---------- */
/* .ev-fails empile sur toute la largeur : pour quatre constats courts, deux
   colonnes evitent une bande de quatre cartes hautes et maigres. */
.evico .ev-fails--2{grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,26px);
  margin-top:clamp(30px,4.5vh,52px)}

/* ---------- deux offres cote a cote ---------- */
.evico .ev-offers--2{grid-template-columns:1fr 1fr}

/* ---------- verbatim client ---------- */
/* Le filet ambre a gauche distingue une parole rapportee du texte de la page :
   sans lui, une citation en serif se confond avec les intertitres. */
.evico .ev-verb{margin-top:clamp(30px,4.4vh,48px);
  border-left:2px solid var(--amber); padding-left:clamp(20px,2.6vw,32px)}
.evico .ev-verb .ev-annot{margin:0; font-size:clamp(1.15rem,1.9vw,1.55rem)}
.evico .ev-ch-dark .ev-verb .ev-annot{color:var(--snow)}
.evico .ev-verb-a{font-family:var(--f-mono); font-size:.78rem; line-height:1.7;
  letter-spacing:.05em; color:var(--ink-3); margin-top:15px}
.evico .ev-ch-dark .ev-verb-a{color:var(--snow-2)}

/* ---------- specimen de livrable ---------- */
/* Aucun concurrent ne montre a quoi ressemble son livrable. Ce bloc imite un
   extrait de document. Le bandeau ambre du bas dit que les donnees sont
   fictives : sans lui, le bloc laisserait croire a un document client reel. */
.evico .ev-spec{border:1px solid var(--line); border-radius:16px; background:#fff;
  overflow:clip; margin:clamp(32px,4.6vh,52px) 0}
.evico .ev-spec-h{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline;
  justify-content:space-between; padding:16px clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--ink) 3%, #fff)}
.evico .ev-spec-h b{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); font-weight:400}
.evico .ev-spec-h span{font-family:var(--f-mono); font-size:.72rem; color:var(--ink-3)}
.evico .ev-spec-b{padding:clamp(22px,2.6vw,32px)}
.evico .ev-spec-b + .ev-spec-b{border-top:1px solid var(--line)}
.evico .ev-spec-k{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue-deep); margin:0 0 13px}
.evico .ev-spec-b h4{font-family:var(--f-disp); font-weight:600; font-size:1.14rem;
  letter-spacing:-.022em; margin:0 0 11px; color:var(--ink)}
.evico .ev-spec-b p{font-size:.98rem; line-height:1.65; color:var(--ink-2); margin:0 0 11px}
.evico .ev-spec-l{display:grid; grid-template-columns:auto 1fr; gap:8px 20px;
  font-family:var(--f-mono); font-size:.82rem; margin:16px 0 0}
.evico .ev-spec-l dt{color:var(--ink-3)}
.evico .ev-spec-l dd{color:var(--ink); margin:0}
.evico .ev-spec-f{padding:15px clamp(20px,2.4vw,30px); border-top:1px solid var(--line);
  background:color-mix(in srgb, var(--amber) 13%, #fff);
  font-family:var(--f-mono); font-size:.76rem; line-height:1.65; color:var(--amber-deep)}

/* ---------- calculateur de perimetre ---------- */
/* Sans JavaScript : les boutons radio sont poses avant la sortie, et chaque
   combinaison affiche sa ligne via le selecteur de frere ulterieur. Un script
   inline serait bloque par la CSP du site, et de toute facon un calcul de cette
   taille n'a pas besoin d'etre execute. */
.evico .ev-calc{border:1px solid var(--line); border-radius:20px; background:#fff;
  padding:clamp(24px,2.6vw,34px); margin:clamp(32px,4.6vh,52px) 0}
.evico .ev-calc > input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.evico .ev-calc-t{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:20px}
.evico .c-q{font-family:var(--f-disp); font-weight:600; font-size:1.05rem; color:var(--ink);
  margin:0 0 12px}
.evico .c-row{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px}
.evico .c-row label{font-family:var(--f-mono); font-size:.92rem; color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; padding:9px 18px; cursor:pointer;
  transition:border-color .25s, color .25s, background-color .25s}
.evico .c-row label:hover{border-color:var(--ink-3)}
.evico .c-out{border-top:1.5px solid var(--ink); padding-top:22px}
.evico .c-r{display:none; font-size:1.05rem; line-height:1.6; color:var(--ink-2)}
.evico .c-r b{font-family:var(--f-disp); font-weight:620; font-size:1.5rem; letter-spacing:-.02em;
  color:var(--ink); display:block; margin-bottom:6px}
.evico .c-note{font-family:var(--f-mono); font-size:.78rem; line-height:1.7; color:var(--ink-3);
  margin-top:18px}
.evico #evp2:checked ~ .c-row label[for="evp2"],
.evico #evp3:checked ~ .c-row label[for="evp3"],
.evico #evp4:checked ~ .c-row label[for="evp4"],
.evico #evp5:checked ~ .c-row label[for="evp5"],
.evico #evp6:checked ~ .c-row label[for="evp6"],
.evico #evs1:checked ~ .c-row label[for="evs1"],
.evico #evs2:checked ~ .c-row label[for="evs2"],
.evico #evs3:checked ~ .c-row label[for="evs3"]{background:var(--blue); border-color:var(--blue); color:#fff}
.evico #evp2:checked ~ #evs1:checked ~ .c-out .c-2-1{display:block}
.evico #evp2:checked ~ #evs2:checked ~ .c-out .c-2-2{display:block}
.evico #evp2:checked ~ #evs3:checked ~ .c-out .c-2-3{display:block}
.evico #evp3:checked ~ #evs1:checked ~ .c-out .c-3-1{display:block}
.evico #evp3:checked ~ #evs2:checked ~ .c-out .c-3-2{display:block}
.evico #evp3:checked ~ #evs3:checked ~ .c-out .c-3-3{display:block}
.evico #evp4:checked ~ #evs1:checked ~ .c-out .c-4-1{display:block}
.evico #evp4:checked ~ #evs2:checked ~ .c-out .c-4-2{display:block}
.evico #evp4:checked ~ #evs3:checked ~ .c-out .c-4-3{display:block}
.evico #evp5:checked ~ #evs1:checked ~ .c-out .c-5-1{display:block}
.evico #evp5:checked ~ #evs2:checked ~ .c-out .c-5-2{display:block}
.evico #evp5:checked ~ #evs3:checked ~ .c-out .c-5-3{display:block}
.evico #evp6:checked ~ #evs1:checked ~ .c-out .c-6-1{display:block}
.evico #evp6:checked ~ #evs2:checked ~ .c-out .c-6-2{display:block}
.evico #evp6:checked ~ #evs3:checked ~ .c-out .c-6-3{display:block}

/* ---------- tableau ---------- */
/* Une grille de notation se publie sous forme de grille. Le cadre defilant
   evite qu'un tableau de trois colonnes force la page a deborder sur mobile. */
.evico .ev-tab-w{overflow-x:auto; margin-top:clamp(30px,4.5vh,52px)}
/* paragraphe de conclusion sous une figure : il lui faut le meme retrait que
   la figure, sinon il se lit comme une legende */
.evico .ev-lead--suite{margin-top:clamp(30px,4.5vh,52px)}
.evico .ev-tab{width:100%; min-width:560px; border-collapse:collapse; text-align:left}
.evico .ev-tab th{font-family:var(--f-mono); font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400;
  padding:0 26px 17px 0; border-bottom:1.5px solid var(--ink); vertical-align:bottom}
.evico .ev-tab td{padding:clamp(24px,3vh,30px) 26px clamp(24px,3vh,30px) 0; border-bottom:1px solid var(--line);
  color:var(--ink-2); font-size:1rem; line-height:1.6; vertical-align:top}
.evico .ev-tab tbody tr{transition:background-color .3s}
.evico .ev-tab tbody tr:hover{background:rgba(12,20,24,.028)}
.evico .ev-tab .t-c{font-family:var(--f-disp); font-weight:600; font-size:1.18rem;
  color:var(--ink); letter-spacing:-.025em; display:block; margin-bottom:6px}
.evico .ev-tab .t-p{font-family:var(--f-disp); font-weight:650; font-size:1.6rem;
  color:var(--blue-deep); letter-spacing:-.03em; line-height:1}
.evico .ev-tab .t-e{font-family:var(--f-mono); font-size:.82rem; color:var(--ink-3)}
.evico .ev-tab td:first-child,.evico .ev-tab td:nth-child(2){white-space:nowrap}
/* Le tableau a quatre colonnes ne peut pas garder deux colonnes insecables :
   la tache et la solution ont besoin de se replier. */
.evico .ev-tab--wrap td:first-child,.evico .ev-tab--wrap td:nth-child(2){white-space:normal}
.evico .ev-tab--wrap{min-width:min(700px,100%)}
.evico .ev-tab--wrap.ev-tab--pill td:last-child{white-space:nowrap}
.evico .ev-tab .t-dif{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 12px; border-radius:999px; display:inline-block;
  white-space:nowrap}
.evico .ev-tab .t-dif--f{background:color-mix(in srgb, var(--blue) 13%, #fff); color:var(--blue-deep)}
.evico .ev-tab .t-dif--m{background:color-mix(in srgb, var(--amber) 22%, #fff); color:var(--amber-deep)}
.evico .ev-tab .t-dif--e{background:color-mix(in srgb, var(--ink) 9%, #fff); color:var(--ink-2)}
@media (max-width:640px){
  .evico .ev-fails--2{grid-template-columns:1fr}
  .evico .ev-offers--2{grid-template-columns:1fr}
  .evico .ev-tab td{padding:18px 16px 18px 0}
}

/* ---------- bande de references ---------- */
/* Les logos se balaient du regard, ils ne se lisent pas : une rangee qui se
   replie vaut mieux qu'un carrousel, qui impose son rythme au lecteur. Le
   gris par defaut evite que dix chartes graphiques se disputent la page. */
.evico .ev-refs{border-block:1px solid var(--line); padding-block:clamp(26px,4vh,44px)}
.evico .ev-refs-t{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:clamp(18px,2.4vh,28px); max-width:none}
/* Grille plutot que flex-wrap : avec des boites de meme largeur, le wrap laisse
   un orphelin des que le compte ne tombe pas juste. Huit logos, quatre colonnes
   puis deux : les deux comptes divisent, aucune ligne bancale. */
/* Bandeau defilant : meme mecanisme que la marquee de l'accueil, la piste est
   dupliquee par le script puis translatee de -50 %. Le masque degrade evite que
   les logos apparaissent et disparaissent net contre le bord du cadre. */
.evico .ev-refs-marq{overflow:clip; margin-top:clamp(16px,2.2vh,26px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.evico .ev-refs-piste{display:flex; align-items:center; width:max-content; will-change:transform}
/* Chaque logo occupe une fraction differente de son cadre de 250x100 : a hauteur
   imposee, les petits deviennent illisibles a cote des gros. Une boite de meme
   taille pour tous, avec object-fit, egalise le poids optique. */
.evico .ev-refs-piste img{width:118px; height:46px; object-fit:contain; object-position:center;
  flex:0 0 auto; margin-right:clamp(30px,4.4vw,64px); opacity:.62; filter:grayscale(1);
  transition:opacity .3s var(--ease), filter .3s var(--ease)}
.evico .ev-refs-piste img:hover{opacity:1; filter:grayscale(0)}
.ev-static .ev-refs-piste{transform:none}
/* texte reserve aux lecteurs d'ecran : la piste est dupliquee quatre fois par le
   script, la faire lire reviendrait a enoncer trente-deux fois huit noms */
.evico .ev-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.evico .ev-refs-b{display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(20px,2.8vw,40px); margin-top:clamp(24px,3.2vh,36px)}
/* les pastilles ont leur propre fond blanc : sous 44 px elles disparaissent
   dans le fond de page, et leur texte grave n'est plus lisible */
.evico .ev-badge{display:flex; align-items:center; gap:13px}
.evico .ev-badge img{width:46px; height:46px; flex:0 0 auto}
.evico .ev-badge b{font-family:var(--f-disp); font-weight:600; font-size:.95rem;
  color:var(--ink); display:block; line-height:1.25}
.evico .ev-badge i{font-family:var(--f-mono); font-style:normal; font-size:.72rem;
  color:var(--ink-3); display:block; margin-top:3px}
@media (max-width:640px){
  .evico .ev-refs-piste img{width:92px; height:36px; margin-right:30px}
}

/* ---------- marquee ---------- */
.ev-marq{overflow:clip; padding-block:clamp(30px,5vh,54px); border-block:1px solid var(--line); user-select:none}
.ev-marq-in{display:flex; gap:0; width:max-content; will-change:transform}
.ev-marq span{font-family:var(--f-disp); font-weight:650; font-size:clamp(3rem,7vw,6.4rem); letter-spacing:-.02em; line-height:1; text-transform:uppercase; white-space:nowrap; color:transparent; -webkit-text-stroke:1.5px var(--ink-3); padding-right:.55em}
.ev-marq span b{font-weight:650; color:var(--blue); -webkit-text-stroke:0; padding-right:.55em}

/* ---------- 02 point de départ ---------- */
.ev-fails{display:grid; gap:clamp(14px,1.6vw,22px); margin-top:8px}
.ev-fail{position:relative; background:#fff; border:1px solid var(--line); border-radius:20px; padding:clamp(28px,2.3vw,34px); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.ev-fail::after{content:attr(data-n); position:absolute; top:18px; right:24px; font-family:var(--f-disp); font-weight:650; font-size:2.4rem; line-height:1; letter-spacing:-.02em; color:transparent; -webkit-text-stroke:1.2px var(--line); transition:-webkit-text-stroke-color .35s var(--ease)}
.ev-fail:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(12,20,24,.08); border-color:color-mix(in srgb, var(--amber) 45%, var(--line))}
.ev-fail:hover::after{-webkit-text-stroke-color:var(--amber)}
.ev-fail h3{font-size:1.18rem; margin-bottom:14px}
.ev-fail p{color:var(--ink-2); font-size:1rem}
.ev-fail .ev-x{font-family:var(--f-mono); font-size:.78rem; color:var(--amber-deep); letter-spacing:.1em; text-transform:uppercase; display:inline-block; background:color-mix(in srgb, var(--amber) 14%, #fff); padding:5px 12px; border-radius:999px; margin-bottom:14px}

/* ---------- frise de parcours ---------- */
.ev-frise{display:grid; grid-template-columns:repeat(6,1fr); gap:0; margin-top:clamp(28px,4vh,46px); border-top:1.5px solid var(--snow)}
.ev-frise div{padding:22px 22px 6px 0; position:relative}
.ev-frise div::before{content:""; position:absolute; top:-1.5px; left:0; width:9px; height:9px; border-radius:50%; background:var(--blue); transform:translateY(-50%)}
.ev-frise b{display:block; font-family:var(--f-disp); font-weight:600; font-size:clamp(1.05rem,1.5vw,1.32rem); letter-spacing:-.02em; margin-bottom:6px}
.ev-frise span{font-family:var(--f-mono); font-size:.78rem; line-height:1.6; color:var(--snow-2); display:block}
.ev-ch-dark .ev-frise div::before{background:var(--amber)}
.evico .ev-ch:not(.ev-ch-dark) .ev-frise{border-top-color:var(--line)}
.evico .ev-ch:not(.ev-ch-dark) .ev-frise div{border-top-color:var(--line)}
.evico .ev-ch:not(.ev-ch-dark) .ev-frise span{color:var(--ink-3)}
@media (max-width:1080px){
  .ev-frise{grid-template-columns:repeat(3,1fr); border-top:0}
  .ev-frise div{border-top:1.5px solid var(--snow)}
}
@media (max-width:900px){
  .ev-frise{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .ev-frise{grid-template-columns:1fr; border-top:0}
  .ev-frise div{border-top:1.5px solid var(--snow); padding-right:0}
}

/* ---------- 04 méthode (pin, sombre, vidéo en fond) ---------- */
.ev-meth-stage{position:relative; color:var(--snow); background:var(--night)}
/* le cadre couvre toute la section, la vidéo y reste collée au viewport :
   seul le contenu défile par-dessus. Pas d'overflow ici, il casserait le sticky. */
.ev-meth-bg{position:absolute; inset:0; z-index:0}
.ev-meth-bg video{position:sticky; top:0; display:block; width:100%; height:100svh;
  object-fit:cover; object-position:50% var(--evop,50%); opacity:.9}
/* le faisceau de la vidéo tombe à gauche : voile fort sous le texte, plus léger
   à droite où l'image est déjà sombre */
.ev-meth-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(9,14,19,.54) 0%, rgba(9,14,19,.50) 38%, rgba(9,14,19,.46) 68%, rgba(9,14,19,.58) 100%),
             linear-gradient(180deg, var(--night) 0%, rgba(13,27,36,.86) 10%, rgba(13,27,36,.22) 26%, rgba(13,27,36,.12) 55%, rgba(13,27,36,.16) 82%, var(--night) 100%)}
/* le faisceau de la vidéo est blanc pur : chaque bloc de texte pose son propre
   lit sombre, ce qui garde l'image ouverte ailleurs */
.ev-meth-steps::before{content:""; position:absolute; inset:-52px -96px -52px -72px; z-index:-1; pointer-events:none;
  background:radial-gradient(96% 104% at 30% 50%, rgba(6,10,14,.93) 0%, rgba(6,10,14,.84) 46%, rgba(6,10,14,0) 80%)}
.ev-meth-stage > .ev-wrap{position:relative; z-index:1}
.ev-meth-vp{position:relative; z-index:1; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:96px 48px}
.ev-meth-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,5vw,80px); align-items:center; flex:1; width:100%}

/* colonne gauche : le contenu de l'étape */
.ev-meth-steps{position:relative; min-height:clamp(320px,44vh,440px); display:grid; gap:38px}
.ev-step{display:flex; flex-direction:column; justify-content:center}
.ev-meth-steps.ev-meth-live{display:block}
.ev-meth-live .ev-step{position:absolute; inset:0}
.ev-step .ev-step-n{font-family:var(--f-disp); font-weight:650; font-size:clamp(3.4rem,6vw,5.6rem); line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.34); display:block; margin-bottom:14px}
.ev-step .ev-step-k{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); margin-bottom:14px}
.ev-step h3{font-size:clamp(1.6rem,2.8vw,2.6rem); margin-bottom:16px; max-width:20ch}
.ev-step p{color:#C3D0DA; max-width:50ch; font-size:clamp(1rem,1.2vw,1.12rem)}

/* colonne droite : le rail des quatre étapes */
.ev-meth-rail{position:relative; display:grid; gap:clamp(18px,3vh,34px); padding-left:44px}
.ev-meth-rail::before{content:""; position:absolute; left:15px; top:14px; bottom:14px; width:2px; background:rgba(255,255,255,.16)}
.ev-meth-rail > i{position:absolute; left:15px; top:14px; bottom:14px; width:2px; background:linear-gradient(180deg,var(--amber),#FF7A2F); transform-origin:50% 0; transform:scaleY(0)}
.ev-meth-rail button{position:relative; display:block; width:100%; text-align:left; padding:6px 0}
.ev-meth-rail button::before{content:""; position:absolute; left:-44px; top:50%; width:32px; height:32px; margin-top:-16px; border-radius:50%;
  background:var(--night); border:2px solid rgba(255,255,255,.22); transition:border-color .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease)}
.ev-meth-rail button::after{content:attr(data-n); position:absolute; left:-44px; top:50%; width:32px; margin-top:-16px; height:32px;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:.78rem; font-weight:600; color:var(--snow-2); transition:color .4s var(--ease)}
.ev-meth-rail button b{display:block; font-family:var(--f-disp); font-weight:560; font-size:clamp(1.02rem,1.4vw,1.24rem); letter-spacing:-.02em; color:#AFBDC8; transition:color .4s var(--ease)}
.ev-meth-rail button span{display:block; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em; color:#9FB1BC; margin-top:4px; transition:color .4s var(--ease)}
.ev-meth-rail button:hover b{color:var(--snow)}
.ev-meth-rail button.on::before{border-color:var(--amber); background:var(--amber); transform:scale(1.08)}
.ev-meth-rail button.on::after{color:var(--night)}
.ev-meth-rail button.on b{color:#fff}
.ev-meth-rail button.on span{color:var(--amber)}
.ev-meth-mobile{display:none}

/* ---------- 04 binôme ---------- */
.ev-media{position:relative; overflow:clip; border-radius:20px}
.ev-media video{width:100%; height:100%; object-fit:cover; will-change:transform}
.ev-media-band{aspect-ratio:640/284; max-height:52vh; width:100%}
.ev-annot{font-family:var(--f-serif); font-style:italic; font-size:clamp(1.3rem,2.2vw,1.9rem); color:var(--ink); line-height:1.35}
/* reference bibliographique : doit se lire comme une note de bas de page, donc
   plus petite que le corps et jamais en capitales comme .ev-step-k */
.ev-src{font-family:var(--f-mono); font-size:.78rem; line-height:1.75; color:var(--ink-3);
  margin-top:clamp(26px,3.6vh,40px); max-width:74ch}
.evico .ev-ch-dark .ev-src{color:var(--snow-2)}
.ev-lotword{position:relative; display:inline-block; white-space:nowrap}
.ev-lotword .ev-lot{position:absolute; left:-4%; right:-4%; top:58%; height:1em; pointer-events:none}
.ev-duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.5vw,40px); margin-top:clamp(28px,4vh,48px)}
.ev-duo--3{grid-template-columns:repeat(3,1fr)}
.ev-duo-card{border-top:1.5px solid var(--ink); padding-top:23px}
.ev-duo-card .ev-role{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-deep); display:block; margin-bottom:10px}
.ev-duo-card h3{font-size:1.35rem; margin-bottom:13px}
.ev-duo-card p{color:var(--ink-2); font-size:1rem}
.ev-binome-media{margin-block:clamp(30px,5vh,56px)}
.ev-binome-annot{display:flex; justify-content:flex-end; padding-inline:clamp(0px,3vw,48px); margin-top:18px}

/* Inline links in body copy. The global reset kills colour and underline, so a link
   inside a paragraph was indistinguishable from the text around it. */
.evico .ev-lead a:not(.ev-btn),
.evico .ev-page-lead a:not(.ev-btn),
.evico .ev-prose p a:not(.ev-btn),
.evico .ev-prose li a:not(.ev-btn),
.evico .ev-sys dd a:not(.ev-btn),
.evico .ev-duo-card p a:not(.ev-btn),
.evico .ev-fail p a:not(.ev-btn),
.evico .ev-src a:not(.ev-btn){
  color:var(--blue-deep); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, currentColor 42%, transparent);
  transition:text-decoration-color .25s, color .25s}
.evico .ev-lead a:not(.ev-btn):hover,
.evico .ev-page-lead a:not(.ev-btn):hover,
.evico .ev-prose p a:not(.ev-btn):hover,
.evico .ev-prose li a:not(.ev-btn):hover,
.evico .ev-sys dd a:not(.ev-btn):hover,
.evico .ev-duo-card p a:not(.ev-btn):hover,
.evico .ev-fail p a:not(.ev-btn):hover,
.evico .ev-src a:not(.ev-btn):hover{text-decoration-color:currentColor}
.evico .ev-ch-dark .ev-lead a:not(.ev-btn),
.evico .ev-ch-dark .ev-page-lead a:not(.ev-btn),
.evico .ev-ch-dark .ev-sys dd a:not(.ev-btn),
.evico .ev-ch-dark .ev-duo-card p a:not(.ev-btn),
.evico .ev-ch-dark .ev-fail p a:not(.ev-btn),
.evico .ev-ch-dark .ev-src a:not(.ev-btn){color:var(--amber)}

.evico .ev-sign{margin-top:clamp(34px,5vh,54px); padding-top:clamp(20px,2.6vh,28px); border-top:1.5px solid var(--ink)}
.evico .ev-sign p:last-child{font-size:1rem; line-height:1.7; color:var(--ink-2); margin-bottom:0}

/* ---------- 05 offres ---------- */
.ev-offers{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,36px); margin-top:clamp(30px,4.5vh,52px)}
.ev-offer{background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(26px,2.6vw,38px); display:flex; flex-direction:column; gap:17px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.ev-offer:hover{transform:translateY(-4px); box-shadow:0 18px 44px rgba(12,20,24,.09); border-color:color-mix(in srgb, var(--blue) 40%, var(--line))}
.ev-offer .ev-ok{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); align-self:flex-start; background:color-mix(in srgb, var(--ink) 5%, #fff); padding:5px 12px; border-radius:999px}
.ev-offer--lead .ev-ok{background:color-mix(in srgb, var(--blue) 10%, #fff)}
.ev-offer h3{font-size:1.4rem}
.ev-offer > p{color:var(--ink-2); font-size:1rem}
.ev-offer ul{list-style:none; display:grid; gap:8px; font-size:1rem; color:var(--ink-2)}
.ev-offer li{padding-left:18px; position:relative}
.ev-offer li::before{content:""; position:absolute; left:0; top:.58em; width:8px; height:1.5px; background:var(--blue)}
.ev-offer-price{margin-top:auto; border-top:1px solid var(--line); padding-top:16px}
.ev-offer-price b{font-family:var(--f-disp); font-weight:620; font-size:1.5rem; letter-spacing:-.02em; display:block}
.ev-offer-price span{font-family:var(--f-mono); font-size:.78rem; color:var(--ink-3)}
.ev-offer--lead{outline:2px solid var(--blue); outline-offset:-2px}
.ev-offer--lead .ev-ok{color:var(--blue-deep)}

/* ---------- 06 capacités (dark) ---------- */
.ev-cap-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(28px,5vw,80px); align-items:start; margin-top:clamp(30px,5vh,60px)}
.ev-sys{border-top:1px solid var(--night-line); margin-top:clamp(30px,4.5vh,52px)}
.ev-sys > div{display:grid; grid-template-columns:minmax(90px,180px) 1fr; gap:22px; padding-block:clamp(26px,3.2vh,34px); border-bottom:1px solid var(--night-line); transition:background-color .3s}
.ev-sys > div:hover{background:rgba(255,255,255,.03)}
.ev-sys dt{font-family:var(--f-mono); font-weight:600; font-size:.85rem; letter-spacing:.06em; color:var(--amber)}
.ev-sys dd{color:var(--snow-2); font-size:1rem; max-width:58ch}
.ev-cap-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,36px); margin-top:clamp(30px,5vh,56px)}
.ev-cap-col{border-top:1.5px solid var(--snow); padding-top:21px}
.ev-cap-col h3{font-size:1.15rem; margin-bottom:13px}
/* .ev-cap-col ne vit que sur fond sombre : sans accent, un lien y prend la
   couleur exacte du corps de texte et ne se voit plus */
.ev-cap-col a{color:var(--amber); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; transition:opacity .25s}
.ev-cap-col a:hover{opacity:.75}
.ev-cap-col p{color:var(--snow-2); font-size:1rem}
.ev-media-portrait{aspect-ratio:480/600; border-radius:16px; position:relative}
.ev-media-portrait::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(13,27,36,0) 55%, rgba(13,27,36,.55)); pointer-events:none}
.ev-cap-annot{margin-top:14px; font-family:var(--f-serif); font-style:italic; font-size:1.15rem; color:var(--amber); text-align:right}

/* ---------- 07 métiers (dark index) ---------- */
.ev-idx{border-top:1px solid var(--night-line); margin-top:clamp(26px,4vh,44px)}
.evico .ev-univ ~ .ev-idx{margin-top:clamp(40px,5.6vh,60px)}
.ev-idx-row{border-bottom:1px solid var(--night-line)}
.ev-idx-head{width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(14px,2.5vw,36px); padding-block:clamp(22px,3.2vh,36px); text-align:left; color:var(--snow)}
.ev-idx-n{font-family:var(--f-mono); font-size:.85rem; color:var(--snow-2)}
.ev-idx-t{font-family:var(--f-disp); font-weight:600; font-size:clamp(1.5rem,3.6vw,3rem); letter-spacing:-.03em; line-height:1.05; transition:transform .35s var(--ease), color .3s}
.ev-idx-head:hover .ev-idx-t{transform:translateX(10px); color:var(--amber)}
.ev-idx-pl{font-size:1.6rem; font-weight:300; line-height:1; transition:transform .4s var(--ease); color:var(--snow-2)}
.ev-idx-row.open .ev-idx-pl{transform:rotate(45deg)}
.ev-idx-body{height:0; overflow:clip}
.ev-idx-body p{color:var(--snow-2); max-width:64ch; padding:0 0 26px calc(.85rem + clamp(14px,2.5vw,36px)); font-size:1rem}

/* ---------- couche commune, avant le detail par secteur ---------- */
/* Le chapitre se lit en deux temps : ce qui vaut pour tout le monde, porte par
   quatre verbes, puis la contrainte propre au metier, portee par l'index. Les
   deux temps doivent se distinguer d'un coup d'oeil, d'ou une composition
   opposee : une rangee qui s'etale, puis une pile qui se deroule. */
.evico .ev-univ{display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,3vw,40px); margin-top:clamp(40px,6.2vh,68px)}
.evico .ev-univ > div{border-top:1.5px solid var(--snow); padding-top:22px}
.evico .ev-univ h3{font-family:var(--f-disp); font-weight:600; color:var(--snow);
  font-size:clamp(1.3rem,2.4vw,1.9rem); letter-spacing:-.03em; line-height:1.05;
  margin:0 0 13px}
.evico .ev-univ p{font-size:.95rem; line-height:1.65; color:var(--snow-2); max-width:32ch}
.evico .ev-univ-sep{display:flex; align-items:center; gap:clamp(14px,2vw,24px);
  max-width:none; margin:clamp(58px,8.6vh,96px) 0 clamp(22px,2.8vh,30px);
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--snow-2)}
.evico .ev-univ-sep::after{content:""; flex:1 1 auto; height:1px; background:var(--night-line)}
.evico .ev-univ + .ev-univ-sep + .ev-lead{margin-bottom:0}
@media (max-width:900px){
  .evico .ev-univ{grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,26px)}
}
@media (max-width:540px){
  .evico .ev-univ{grid-template-columns:1fr; gap:0}
  .evico .ev-univ > div{padding-block:20px 24px}
  .evico .ev-univ p{max-width:none}
}

/* ---------- citation ---------- */

/* ---------- bande d'appel avant les questions ---------- */
.ev-cta{position:relative; overflow:clip; padding-block:clamp(84px,12vh,150px);
  background:radial-gradient(130% 150% at 50% -10%, #16262F 0%, #0D1B24 44%, #060C11 100%)}
.ev-cta-cv{position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; pointer-events:none}
/* voile local : la fleur reste lisible sur les bords, le texte garde son contraste au centre */
.ev-cta::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(66% 58% at 50% 50%, rgba(6,12,17,.80) 0%, rgba(6,12,17,.52) 52%, rgba(6,12,17,0) 80%)}
.ev-cta > .ev-wrap{position:relative; z-index:2; text-align:center}
.ev-cta .ev-chhead{justify-content:center}
/* sans cela le sur-titre est ramene a sa largeur minimale dans la ligne flex,
   et SplitText fige la casse en deux lignes */
.ev-cta .ev-chhead > *{flex:0 0 auto}
.ev-cta .ev-h2{max-width:20ch; margin-inline:auto; text-wrap:balance}
.ev-cta .ev-lead{max-width:58ch; margin-inline:auto}
/* align-items par defaut vaut stretch : le lien telephone, qui est en bloc,
   prenait la hauteur des boutons et son texte restait cale en haut de cette
   boite, une quinzaine de pixels au-dessus des libelles */
.ev-cta-act{display:flex; align-items:center; gap:14px; justify-content:center;
  flex-wrap:wrap; margin-top:clamp(26px,4vh,40px)}
/* deux classes pour passer devant `.evico p{max-width:62ch}`, qui ramenait la
   mention a 464 px et rejetait le dernier mot sur une deuxieme ligne */
.evico .ev-cta-note{margin:22px auto 0; max-width:none; font-family:var(--f-mono); font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--snow-2)}
/* le lien telephone tombe a 25 px de haut : sur mobile c'est le geste le plus
   utile du bandeau, il doit atteindre la cible tactile de 44 px */
.evico .ev-cta-act .ev-tel{display:inline-flex; align-items:center; min-height:44px; gap:.34em;
  padding-block:10px; margin-block:-10px}
@media (max-width:640px){
  .ev-cta-act .ev-btn{width:100%; justify-content:center}
}

/* ---------- journal ---------- */
.ev-posts{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,36px); margin-top:clamp(30px,4.5vh,52px)}
.ev-post{display:flex; flex-direction:column; gap:10px}
.ev-post-cov{display:block; overflow:clip; border-radius:16px; background:var(--paper-2); margin-bottom:6px}
/* Les photos sont deja etalonnees dans la palette du site a la fabrication :
   pas de filtre ici, il ne ferait que desaturer deux fois. */
.ev-post-cov img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block;
  transition:transform .6s var(--ease)}
.ev-post:hover .ev-post-cov img{transform:scale(1.045)}
/* La meme couverture ouvre le corps de l'article, calee sur la colonne de lecture. */
.evico .ev-prose .ev-cov-fig{margin:0 0 clamp(26px,3.4vh,38px); border-radius:18px; overflow:clip;
  border:1px solid var(--line); background:var(--paper-2)}
.evico .ev-prose .ev-cov-fig img{display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover}
.evico .ev-prose .ev-cov-fig figcaption{display:none}
.ev-post-k{border-top:1.5px solid var(--ink); padding-top:14px}
.ev-post-k{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em; color:var(--ink-3)}
.ev-post h3{font-size:1.22rem; line-height:1.25}
.ev-post p{color:var(--ink-2); font-size:1rem}
.ev-post-link{margin-top:6px; font-weight:560; font-size:1rem; color:var(--blue-deep); display:inline-flex; gap:8px; align-items:center; display:inline-flex; align-items:center; min-height:44px; padding-block:9px; margin-block:-9px}
.ev-post-link .ev-arr{transition:transform .3s var(--ease)}
.ev-post:hover .ev-post-link .ev-arr{transform:translateX(4px)}

/* ---------- 09 garanties ---------- */
/* bento : une cellule maitresse pour l'objection numero un, deux petites pour
   les engagements qui se disent en une ligne, trois moyennes pour le reste */
.ev-guards{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(168px,auto);
  gap:clamp(14px,1.5vw,22px); margin-top:clamp(30px,4.5vh,52px);
  grid-template-areas:"a a b b" "a a c d" "e e f f"}
.ev-guard:nth-child(1){grid-area:a}
.ev-guard:nth-child(2){grid-area:b}
.ev-guard:nth-child(3){grid-area:c}
.ev-guard:nth-child(4){grid-area:d}
.ev-guard:nth-child(5){grid-area:e}
.ev-guard:nth-child(6){grid-area:f}
/* La carte est blanche : elle impose sa propre encre. Sans cette ligne, dans un
   chapitre sombre le h3 herite du blanc de .ev-ch-dark et disparait sur le
   fond de la carte. Le paragraphe, lui, a toujours eu sa couleur explicite. */
.ev-guard{background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:20px; padding:26px 28px; position:relative; overflow:clip; display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.ev-guard:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(12,20,24,.08); border-color:color-mix(in srgb, var(--blue) 40%, var(--line))}
.ev-guard::before{content:""; position:absolute; top:0; left:0; height:2.5px; width:100%; background:var(--blue); transform:scaleX(0); transform-origin:0 50%; transition:transform .8s var(--ease)}
.ev-guard.rv-done::before{transform:scaleX(1)}
.ev-gviz{display:block; width:100%; max-width:186px; height:auto; margin:auto; color:var(--blue);
  overflow:visible}
.ev-gviz path,.ev-gviz rect,.ev-gviz circle{fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.ev-gviz .gv-drift{fill:currentColor; stroke:none}
.ev-gviz .gv-track{stroke:var(--line); stroke-width:1.6}
.ev-gviz .gv-flash{stroke:var(--amber-deep)}
.ev-guard h3{font-size:1.08rem; margin-bottom:8px}
.ev-guard p{color:var(--ink-2); font-size:1rem}
.ev-guard h3{margin-top:20px}
/* cellule maitresse : plus de souffle, un fond qui la detache sans l'assombrir */
.ev-guard--lead{padding:clamp(28px,2.4vw,38px);
  background:linear-gradient(158deg,#fff 0%,#F4F8FC 54%,#E8F1FC 100%);
  border-color:color-mix(in srgb, var(--blue) 24%, var(--line))}
.ev-guard--lead .ev-gviz{max-width:min(300px,74%)}
.ev-guard--lead h3{font-size:clamp(1.3rem,1.9vw,1.68rem); line-height:1.15; margin-top:26px}
.ev-guard--lead p{max-width:46ch}
/* cellules etroites : le visuel ne doit pas manger la moitie de la carte */
.ev-guard--tight{padding:24px}
.ev-guard--tight .ev-gviz{max-width:132px}
.ev-guard--tight h3{margin-top:18px}

/* ---------- 10 faq ---------- */
.ev-faq{border-top:1px solid var(--line); margin-top:clamp(26px,4vh,44px)}
.ev-acc{border-bottom:1px solid var(--line)}
.ev-acc-h{width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-block:26px; text-align:left}
.ev-acc-h h3{font-size:clamp(1.05rem,1.5vw,1.3rem); font-weight:560; transition:color .3s}
.ev-acc-h:hover h3{color:var(--blue-deep)}
.ev-acc-pl{font-size:1.5rem; font-weight:300; line-height:1; color:var(--ink-3); transition:transform .4s var(--ease); flex:none}
.ev-acc.open .ev-acc-pl{transform:rotate(45deg)}
.ev-acc-b{height:0; overflow:clip}
.ev-acc-b p{color:var(--ink-2); padding-top:2px; padding-bottom:30px; max-width:66ch}

/* ---------- 11 contact (dark) ---------- */
.ev-contact{padding-bottom:0}
.ev-contact .ev-h2{font-size:clamp(2.4rem,5.6vw,5.2rem); max-width:16ch}
.ev-contact-grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(30px,5vw,80px); align-items:start; margin-top:clamp(30px,5vh,56px)}
.ev-brief{border:1px solid var(--night-line); border-radius:18px; padding:28px}
.ev-brief-k{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.ev-brief-k span{color:var(--snow-2)}
.ev-brief ul{list-style:none; display:grid; gap:12px; color:var(--snow-2); font-size:1rem}
.ev-brief li{padding-left:18px; position:relative}
.ev-brief li::before{content:""; position:absolute; left:0; top:.6em; width:8px; height:1.5px; background:var(--blue-light)}
.ev-form{display:grid; gap:26px}
.ev-field{display:grid; gap:8px}
.ev-field label{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--snow-2)}
.ev-field input,.ev-field select{font:inherit; color:var(--snow); background:none; border:0; border-bottom:1.5px solid var(--night-line); padding:10px 2px; border-radius:0; transition:border-color .3s; appearance:none; -webkit-appearance:none}
.ev-field select option{color:var(--ink); background:#fff; font-size:1rem}
.ev-field input:focus,.ev-field select:focus{outline:none; border-color:var(--blue-light)}
.ev-field{position:relative}
.ev-field::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--blue-light); transition:right .5s var(--ease)}
.ev-field:focus-within::after{right:0}
.ev-form-ok{display:none; font-family:var(--f-mono); font-size:1rem; color:var(--amber); padding-top:6px}
.ev-form.sent .ev-form-ok{display:block}

/* --- formulaire Elementor : on le rhabille avec le langage de la page.
   Doublement de .evico pour passer devant la feuille du constructeur, qui est
   imprimee apres la notre. --- */
.evico.evico .elementor-form .elementor-field-group{display:grid; gap:8px; width:100%; max-width:none}
.evico.evico .elementor-form .elementor-field-label{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--snow-2); padding:0}
.evico.evico .elementor-form .elementor-field-textual{font:inherit; color:var(--snow); background:none; border:0;
  border-bottom:1.5px solid var(--night-line); border-radius:0; padding:10px 2px; width:100%; min-height:0;
  transition:border-color .3s; appearance:none; -webkit-appearance:none; box-shadow:none}
.evico.evico .elementor-form .elementor-field-textual:focus{outline:none; border-color:var(--blue-light); box-shadow:none}
.evico.evico .elementor-form .elementor-field-textual::placeholder{color:var(--night-line)}
.evico.evico .elementor-form select option{color:var(--ink); background:#fff; font-size:1rem}
/* le select est enveloppe par Elementor, avec son propre chevron */
.evico.evico .elementor-form .elementor-select-wrapper{position:relative; display:block; border:0; padding:0}
.evico.evico .elementor-form .elementor-select-wrapper .select-caret-down-wrapper{position:absolute; right:2px;
  bottom:14px; width:12px; pointer-events:none; color:var(--snow-2); display:block; transform:none; inset-inline-end:2px}
.evico.evico .elementor-form .elementor-select-wrapper svg{width:12px; height:12px; fill:currentColor}
/* le bouton est etire par defaut : on lui rend sa largeur de contenu */
.evico.evico .elementor-form .elementor-field-type-submit{margin-top:4px; display:block}
.evico.evico .elementor-form .elementor-button{display:inline-flex; align-items:center; gap:10px;
  width:auto; flex-basis:auto; flex-grow:0;
  font-family:var(--f-body); font-weight:560; font-size:1rem; line-height:1.2; padding:14px 26px;
  border-radius:999px; border:0; background:var(--blue-btn); color:#fff; fill:#fff; cursor:pointer;
  text-shadow:none; transition:transform .3s var(--ease), background-color .3s}
.evico.evico .elementor-form .elementor-button:hover{background:#0554A8}
.evico.evico .elementor-form .elementor-button-content-wrapper{display:inline-flex; align-items:center; gap:10px}
/* le retour d'envoi doit parler la meme langue que le reste : mono, ambre */
.evico.evico .elementor-message{font-family:var(--f-mono); font-size:1rem; letter-spacing:.02em; padding-top:10px; background:none}
.evico.evico .elementor-message.elementor-message-success{color:var(--amber)}
.evico.evico .elementor-message.elementor-message-danger{color:#FF8E7A}
.evico.evico .elementor-form .elementor-field-required .elementor-field-label::after{content:" *"; color:var(--amber)}
@media(max-width:900px){
  .evico.evico .elementor-form .elementor-button{width:100%; justify-content:center}
}
.ev-footer{margin-top:clamp(50px,8vh,90px); border-top:1px solid var(--night-line)}
.ev-footer .ev-wrap{display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:26px; font-family:var(--f-mono); font-size:.78rem; color:var(--snow-2); flex-wrap:wrap}

/* ---------- lottie hosts ---------- */
.ev-lot svg{display:block; width:100%; height:100%}
.ev-lot-ast{display:inline-block}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .ev-duo--3{grid-template-columns:1fr}
  .ev-split,.ev-cap-grid,.ev-contact-grid{grid-template-columns:1fr}
  .ev-sticky{position:static}
  .ev-figs{grid-template-columns:1fr 1fr; gap:28px}
  .ev-offers,.ev-cap-cols,.ev-posts{grid-template-columns:1fr 1fr}
  .ev-guards{grid-template-columns:1fr 1fr; grid-template-areas:"a a" "b b" "c d" "e e" "f f"}
  .ev-guard--lead .ev-gviz{max-width:min(260px,60%)}
  .ev-media-portrait{max-width:420px}
}
@media (max-width:900px){
  .ev-meth-stage .ev-meth-vp{display:none}
  .ev-meth-mobile{display:grid; gap:34px; margin-top:38px}
  .ev-meth-mobile .ev-step{position:relative}
  .ev-meth-mobile .ev-step::before{content:""; position:absolute; inset:-22px -26px; z-index:-1; pointer-events:none;
    background:radial-gradient(100% 100% at 40% 50%, rgba(6,10,14,.93) 0%, rgba(6,10,14,.84) 52%, rgba(6,10,14,0) 86%)}
  .ev-meth-mobile .ev-step{position:static; opacity:1; visibility:visible}
  .ev-nav-links{display:none}
  .evico .ev-mega{display:none}
}
@media (max-width:640px){
  .ev-hero-strip ul{grid-template-columns:1fr 1fr; gap:14px 20px}
  .ev-hero-cue{display:none}
  .ev-hero-eb{display:none}
  .ev-hero-body{padding-top:96px}
  .ev-sys > div{grid-template-columns:1fr; gap:6px}
  .ev-offers,.ev-cap-cols,.ev-duo,.ev-figs,.ev-posts{grid-template-columns:1fr}
  .ev-guards{grid-template-columns:1fr; grid-template-areas:none; grid-auto-rows:auto}
  .ev-guard:nth-child(n){grid-area:auto}
  .ev-binome-annot{justify-content:flex-start}
}

/* ---------- états statiques (reduced motion / sans JS) ---------- */
@media (prefers-reduced-motion:reduce){
  .ev-hero-cue i{animation:none}
  .evico{transition:none}
}
.ev-static .ev-marq-in{transform:none}
.ev-static .ev-meth-vp{display:none}
.ev-static .ev-meth-mobile{display:grid; gap:34px; margin-top:38px}
.ev-static .ev-meth-mobile .ev-step{position:static; opacity:1; visibility:visible}
.ev-static .ev-guard::before{transform:scaleX(1)}
.ev-static .ev-gviz .gv-flash{opacity:.55}
.ev-static .ev-idx-body,.ev-static .ev-acc-b{height:auto}


/* ============ avis Google (widget Trustindex) ============
   Le widget garde sa marque Google, qui fait la credibilite : etoiles, mention
   « verifie par ». On ne reprend que la typographie, les couleurs et la carte. */
.evico .ev-avis{position:relative}
.evico .ev-avis .elementor-widget-container{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.evico .ti-widget{font-family:var(--f-body) !important; margin:0 !important}
.evico .ti-widget .ti-review-item{padding:6px !important}
.evico .ti-widget .ti-inner{background:#fff !important; border:1px solid var(--line) !important;
  border-radius:20px !important; padding:26px 28px !important; box-shadow:none !important;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.evico .ti-widget .ti-review-item:hover .ti-inner{transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(12,20,24,.08); border-color:color-mix(in srgb, var(--blue) 40%, var(--line))}
.evico .ti-widget .ti-name{font-family:var(--f-disp) !important; font-weight:650 !important;
  font-size:1rem !important; color:var(--ink) !important; letter-spacing:-.01em}
.evico .ti-widget .ti-date{font-family:var(--f-mono) !important; font-size:.78rem !important;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3) !important}
.evico .ti-widget .ti-review-text,
.evico .ti-widget .ti-review-text-container{font-family:var(--f-body) !important;
  font-size:1rem !important; line-height:1.6 !important; color:var(--ink-2) !important}
.evico .ti-widget .ti-read-more{font-weight:560 !important; color:var(--blue-deep) !important}
.evico .ti-widget .ti-profile-img img,
.evico .ti-widget .ti-profile-img{border-radius:999px !important}
.evico .ti-widget .ti-verified-by,
.evico .ti-widget .ti-disclaimer{font-family:var(--f-mono) !important; font-size:.78rem !important;
  letter-spacing:.08em; color:var(--ink-3) !important}
/* fleches du carrousel : memes pastilles que le reste de la page */
.evico .ti-widget .ti-prev, .evico .ti-widget .ti-next{
  background:#fff !important; border:1px solid var(--line) !important; border-radius:999px !important;
  width:44px !important; height:44px !important; box-shadow:none !important}
.evico .ti-widget .ti-prev:hover, .evico .ti-widget .ti-next:hover{border-color:var(--blue) !important}


/* ============ fenetre surgissante de sortie ============
   Le conteneur porte la classe .evico : toute la charte s'y applique. */
.evico.ev-pop-wrap{background:linear-gradient(158deg,#16262F 0%,#0D1B24 52%,#070E14 100%);
  border:1px solid var(--night-line); border-radius:22px; color:var(--snow)}
.evico .ev-pop .ev-eyebrow{color:var(--snow-2); margin-bottom:14px}
.evico .ev-pop h2{font-family:var(--f-disp); font-weight:600; font-size:clamp(1.4rem,2.4vw,1.75rem);
  line-height:1.18; letter-spacing:-.025em; color:var(--snow); text-wrap:balance; margin-bottom:12px}
.evico .ev-pop-l{font-size:1rem; line-height:1.55; color:#DDE7EC; max-width:44ch; margin-bottom:26px}
.evico .ev-pop-f{margin-top:20px; padding-top:18px; border-top:1px solid var(--night-line);
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--snow-2)}
.evico .ev-pop-f .ev-tel{color:var(--snow); text-transform:none; letter-spacing:0; font-size:1rem}
.evico .ev-pop-f .ev-tel:hover{color:var(--blue-light)}

.evico .ev-brief-tel{margin-top:20px; padding-top:16px; border-top:1px solid var(--night-line); font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--snow-2)}
.evico .ev-brief-tel .ev-tel{text-transform:none; letter-spacing:0; font-size:1rem}

/* ============ ligne de conversion, integree au chapitre ============
   Pas de bandeau ni de fond : un simple filet en fin de section, comme une
   respiration de fin de chapitre. */
.evico .ev-conv{display:flex; align-items:baseline; justify-content:space-between;
  gap:clamp(18px,3vw,44px); flex-wrap:wrap;
  margin-top:clamp(32px,4.5vh,58px); padding-top:clamp(22px,3vh,30px); border-top:1px solid var(--line)}
.evico .ev-ch-dark .ev-conv{border-top-color:var(--night-line)}
.evico .ev-conv p{font-family:var(--f-disp); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.3; color:var(--text,var(--ink)); max-width:38ch}
.evico .ev-ch-dark .ev-conv p{color:var(--snow)}
.evico .ev-conv p span{display:block; margin-top:7px; font-family:var(--f-mono); font-weight:400;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.evico .ev-ch-dark .ev-conv p span{color:var(--snow-2)}
.evico .ev-conv-a{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
@media (max-width:700px){
  .evico .ev-conv-a{width:100%}
  .evico .ev-conv-a .ev-btn{flex:1 1 100%; justify-content:center}
}

/* ============ avis : contraste force ============
   Trustindex impose ses propres gris, souvent trop clairs sur fond blanc.
   On repart d'une couleur d'encre pour tout, puis on nuance. */
.evico .ti-widget, .evico .ti-widget *{color:var(--ink-2) !important}
.evico .ti-widget .ti-name, .evico .ti-widget .ti-name *{color:var(--ink) !important}
.evico .ti-widget .ti-date, .evico .ti-widget .ti-date *,
.evico .ti-widget .ti-verified-by, .evico .ti-widget .ti-verified-by *,
.evico .ti-widget .ti-disclaimer, .evico .ti-widget .ti-disclaimer *{color:var(--ink-3) !important}
.evico .ti-widget .ti-read-more, .evico .ti-widget a{color:var(--blue-deep) !important}
.evico .ti-widget .ti-star, .evico .ti-widget img,
.evico .ti-widget trustindex-image{color:initial !important}


/* ============ fenetre surgissante ============
   Les regles de neutralisation des conteneurs Elementor sont ecrites pour les
   sections pleine largeur de la page : elles vident aussi le padding de la
   fenetre. On le rend ici, avec assez de poids pour repasser devant. */
.evico.ev-modal{position:fixed; inset:0; z-index:9000; display:grid; place-items:center;
  padding:clamp(16px,4vw,40px)}
.evico.ev-modal[hidden]{display:none}
.evico .ev-modal-fond{position:absolute; inset:0; background:rgba(6,12,17,.72);
  opacity:0; transition:opacity .26s var(--ease); backdrop-filter:blur(3px)}
.evico.ev-modal.est-ouvert .ev-modal-fond{opacity:1}
.evico .ev-modal-boite{position:relative; width:min(468px,100%); max-height:86svh; overflow:auto;
  border-radius:22px; outline:none;
  transform:translateY(14px) scale(.985); opacity:0;
  transition:transform .3s var(--ease), opacity .3s var(--ease)}
.evico.ev-modal.est-ouvert .ev-modal-boite{transform:none; opacity:1}
/* espacement interne rendu au conteneur Elementor de la fenetre */
.evico .ev-modal-boite .elementor,
.evico .ev-modal-boite .e-con,
.evico .ev-modal-boite .elementor-element{border-radius:22px}
.evico .ev-modal-boite > .elementor > .e-con{padding:clamp(28px,5vw,36px) !important}
.evico .ev-modal-boite .elementor-widget:not(:last-child){margin-bottom:0}
/* seul le sur-titre est a la hauteur de la croix : le titre et le paragraphe
   gardent toute la largeur */
.evico .ev-pop .ev-eyebrow{padding-right:44px}
.evico .ev-modal-x{position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px;
  display:grid; place-items:center; border:0; border-radius:999px; cursor:pointer;
  font-size:1.35rem; line-height:1; background:rgba(255,255,255,.10); color:var(--snow);
  transition:background-color .25s}
.evico .ev-modal-x:hover{background:rgba(255,255,255,.20)}
/* les filets des champs restent dans la marge du contenu */
.evico .ev-modal-boite .elementor-form .elementor-field-group{margin-bottom:20px}
.evico .ev-modal-boite .elementor-form .elementor-field-type-submit{margin-bottom:0}
@media (prefers-reduced-motion:reduce){
  .evico .ev-modal-fond,.evico .ev-modal-boite{transition:none}
}

/* ============ pages interieures ============ */
/* Entete des pages interieures : trois couches sur le fond nuit. Un halo de la
   famille bleue derriere la colonne de texte, une braise ambree plus bas, et le
   degrade de base. La braise se place entre le texte et l'image, jamais dessous,
   sinon elle disparaitrait derriere une photo opaque.
   Chaque page redefinit les variables plus bas : la teinte change, le montage
   reste le meme. */
.evico .ev-page-hero{
  --gl1:#0074F1; --g1a:32%; --g1b:11%; --gx:20%;
  --gl2:#E8A33D; --g2a:16%; --gex:52%;
  padding-block:clamp(120px,16vh,190px) clamp(70px,9vh,110px);
  background:
    radial-gradient(76% 98% at var(--gx) 2%,
      color-mix(in srgb, var(--gl1) var(--g1a), transparent) 0%,
      color-mix(in srgb, var(--gl1) var(--g1b), transparent) 42%,
      transparent 72%),
    radial-gradient(62% 80% at var(--gex) 100%,
      color-mix(in srgb, var(--gl2) var(--g2a), transparent) 0%,
      transparent 66%),
    radial-gradient(120% 140% at 22% -10%, #16262F 0%, #0D1B24 46%, #070E14 100%)}
.evico[data-page="comment-ca-marche"] .ev-page-hero{--gx:18%; --g2a:18%; --gex:56%}
.evico[data-page="services"] .ev-page-hero{--gl1:#5CA9FF; --g1a:26%; --g1b:9%; --gx:30%;
  --gl2:#0074F1; --g2a:26%; --gex:46%}
.evico[data-page="a-propos"] .ev-page-hero{--gx:14%; --g2a:30%; --gex:44%}
.evico[data-page="journal"] .ev-page-hero{--gl1:#5CA9FF; --g1a:24%; --g1b:8%; --gx:44%;
  --g2a:13%; --gex:62%}
.evico[data-page="article"] .ev-page-hero{--gx:10%; --g2a:24%; --gex:34%}
/* page administrative : la meme structure, presque eteinte */
.evico[data-page="mentions-legales"] .ev-page-hero{--g1a:13%; --g1b:5%; --g2a:7%}
.evico .ev-page-title{font-family:var(--f-disp); font-weight:600; letter-spacing:-.035em; line-height:1.02;
  font-size:clamp(2.3rem,5.4vw,4.4rem); color:var(--snow); max-width:19ch; margin:16px 0 0; text-wrap:balance}
.evico .ev-page-title .ev-serif{color:var(--blue-light)}
.evico .ev-page-lead{margin-top:clamp(18px,2.6vh,26px); font-size:clamp(1.05rem,1.5vw,1.22rem);
  line-height:1.6; color:#DDE7EC; max-width:62ch}
/* etapes detaillees */
.evico .ev-steps-list{display:grid; gap:clamp(16px,2vw,26px); margin-top:clamp(30px,4.5vh,52px)}
/* Deux ecritures de fiche coexistent : celle du kit pose ses quatre enfants a
   plat (numero, libelle, titre, corps), celle ecrite a la main enveloppe le
   texte dans un div. Une grille a deux colonnes suffisait a la seconde, la
   premiere y creait quatre colonnes implicites et la fiche partait en biais.
   On place donc explicitement : le numero a gauche sur toute la hauteur, tout
   le reste dans la colonne de droite. */
.evico .ev-step-card{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,2.6vw,34px);
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:clamp(24px,2.6vw,34px);
  align-content:start}
.evico .ev-step-card > .ev-step-n{grid-column:1; grid-row:1 / -1; align-self:start}
.evico .ev-step-card > :not(.ev-step-n){grid-column:2}
.evico .ev-ch-dark .ev-step-card{background:var(--night-2); border-color:var(--night-line)}
.evico .ev-step-n{font-family:var(--f-disp); font-weight:700; font-size:clamp(1.6rem,3vw,2.4rem);
  line-height:1; color:var(--blue-deep); letter-spacing:-.04em}
.evico .ev-ch-dark .ev-step-n{color:var(--blue-light)}
/* Le libelle court, en capitales monospace ; le corps, en texte courant.
   Les deux classes avaient fini par designer l'inverse d'une page a l'autre :
   sur les vingt-quatre pages du kit, .ev-step-d portait le paragraphe entier et
   se lisait donc en capitales monospace de 0,78 rem. */
.evico .ev-step-card .ev-step-k{display:block; font-family:var(--f-mono); font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.evico .ev-ch-dark .ev-step-card .ev-step-k{color:var(--amber)}
.evico .ev-step-card h3{font-size:1.16rem; margin-bottom:9px}
.evico .ev-step-d,
.evico .ev-step-card > div > p{color:var(--ink-2); font-size:1rem; line-height:1.62}
.evico .ev-ch-dark .ev-step-d,
.evico .ev-ch-dark .ev-step-card > div > p{color:var(--snow-2)}
/* grid-template-areas:none ne suffit pas : les enfants gardent leur grid-area
   nommee, qui cree alors des lignes implicites. Les trois cartes se
   superposaient au meme endroit et une seule etait visible. */
.evico .ev-guards-3{grid-template-columns:repeat(3,1fr); grid-template-areas:none; grid-auto-rows:auto}
.evico .ev-guards-3 .ev-guard{grid-area:auto}
/* la marge haute du titre reservait la place du visuel du bento ; sans visuel
   elle ne laisse qu'un creux de 46 px au-dessus de la premiere ligne */
.evico .ev-guards-3 .ev-guard h3{margin-top:0}
/* corps d'article */
.evico .ev-prose{max-width:68ch; margin-inline:auto}
.evico .ev-prose h2{font-family:var(--f-disp); font-weight:600; letter-spacing:-.025em; line-height:1.2;
  font-size:clamp(1.4rem,2.4vw,1.9rem); margin:clamp(38px,5vh,58px) 0 14px; text-wrap:balance}
.evico .ev-prose p{font-size:1.06rem; line-height:1.72; color:var(--ink-2); margin-bottom:18px}
.evico .ev-prose ul{margin:0 0 22px; padding:0; list-style:none; display:grid; gap:11px}
.evico .ev-prose li{position:relative; padding-left:20px; font-size:1.02rem; line-height:1.6; color:var(--ink-2)}
.evico .ev-prose li::before{content:""; position:absolute; left:0; top:.68em; width:9px; height:1.5px; background:var(--blue)}
.evico .ev-prose blockquote{margin:clamp(28px,4vh,42px) 0; padding-left:22px; border-left:2.5px solid var(--blue)}
/* Un troisieme niveau manquait au corps d'article : sans regle propre, h3
   retombait sur la taille par defaut du navigateur et se lisait comme du corps. */
.evico .ev-prose h3{font-family:var(--f-disp); font-weight:600; letter-spacing:-.02em;
  font-size:1.18rem; line-height:1.3; color:var(--ink); margin:28px 0 10px}
/* Reponse courte en tete d'article : c'est ce bloc qui est repris en position
   zero, il doit se lire seul et sortir du fil du texte. */
.evico .ev-prose .ev-rep{margin:0 0 28px; padding:clamp(16px,2vh,20px) clamp(18px,2vw,24px);
  border-radius:14px; background:color-mix(in srgb, var(--blue) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--blue) 20%, transparent)}
.evico .ev-prose .ev-rep p{margin:0; color:var(--ink); font-size:1.07rem; line-height:1.62}
.evico .ev-prose .ev-rep p + p{margin-top:11px}
.evico .ev-ch-dark .ev-prose h3{color:var(--snow)}

.evico .ev-prose blockquote p{font-family:var(--f-serif); font-style:italic; font-size:clamp(1.15rem,1.9vw,1.4rem);
  line-height:1.45; color:var(--ink)}
@media (max-width:900px){
  .evico .ev-guards-3{grid-template-columns:1fr}
  .evico .ev-step-card{grid-template-columns:1fr; gap:12px}
}

/* titres et couvertures d'article rendus cliquables */
/* Index d'articles : la carte porte son titre en lien, comme les cartes du journal */
.evico .ev-duo-card h3 a{color:inherit; transition:color .3s var(--ease)}
.evico .ev-duo-card h3 a:hover{color:var(--blue-deep)}
.evico .ev-ch-dark .ev-duo-card h3 a:hover{color:var(--amber)}
.evico .ev-post h3 a{color:inherit; transition:color .3s var(--ease)}
.evico .ev-post h3 a:hover{color:var(--blue-deep)}
.evico a.ev-post-cov{display:block}

/* Section sombre qui peint son propre fond : elle n'a pas besoin de faire
   basculer celui de la racine, donc pas de transition a traverser. */
.evico .ev-ch-solid{background:var(--night)}

/* ============ hero des pages interieures : texte a gauche, image a droite ============ */
.evico .ev-hero2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,clamp(270px,32%,400px));
  gap:clamp(30px,5vw,76px); align-items:center}
.evico .ev-hero2-t{min-width:0}
.evico .ev-hero2-t .ev-page-title{max-width:16ch}
.evico .ev-hero2-t .ev-page-lead{max-width:52ch}
.evico .ev-hero2-i{position:relative; margin:0; border-radius:22px; overflow:clip;
  box-shadow:0 34px 80px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08)}
.evico .ev-hero2-i img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover}
/* une lueur bleue en haut, une ombre en bas : l'image entre dans la palette */
.evico .ev-hero2-i::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(202deg, rgba(0,116,241,.16) 0%, rgba(0,116,241,0) 42%,
             rgba(6,12,17,.30) 78%, rgba(6,12,17,.55) 100%)}
@media (max-width:960px){
  .evico .ev-hero2{grid-template-columns:1fr; gap:clamp(26px,4vh,40px)}
  .evico .ev-hero2-t .ev-page-title,.evico .ev-hero2-t .ev-page-lead{max-width:none}
  /* en pile, l'image reprend un format large plutot que de manger l'ecran */
  .evico .ev-hero2-i img{aspect-ratio:16/10}
}

/* ============ article : corps a gauche, sommaire et contact a droite ============ */
/* Le texte demarre sur le meme rail que le titre de l'entete et que la marque du
   menu : la colonne de gauche prend la place restante, la prose y est calee a
   gauche et plafonnee a sa mesure de lecture. La colonne laterale, elle, se pose
   sur le rail de droite. */
.evico .ev-art{display:grid; align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,19rem); gap:clamp(34px,4.4vw,76px)}
.evico .ev-art .ev-prose{max-width:42rem; margin-inline:0}
.evico .ev-art-side{position:sticky; top:104px; display:grid; gap:clamp(20px,2.2vw,28px)}

/* fil d'ariane et reperes de l'entete d'article */
.evico .ev-page-hero .ev-eyebrow a{color:var(--snow-2); box-shadow:inset 0 -1px 0 transparent;
  transition:color .3s var(--ease), box-shadow .3s var(--ease)}
.evico .ev-page-hero .ev-eyebrow a:hover{color:var(--snow); box-shadow:inset 0 -1px 0 currentColor}
.evico .ev-art-meta{list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px;
  margin-top:clamp(22px,3vh,32px); font-family:var(--f-mono); font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--snow-2)}
.evico .ev-art-meta li{position:relative; padding-left:17px}
.evico .ev-art-meta li:first-child{padding-left:0}
.evico .ev-art-meta li:not(:first-child)::before{content:""; position:absolute; left:0; top:.6em;
  width:8px; height:1.5px; background:var(--blue-light)}

/* sommaire */
.evico .ev-toc-t{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:13px; border-bottom:1px solid var(--line)}
.evico .ev-toc ol{list-style:none; margin:0; padding:0; display:grid}
.evico .ev-toc li{border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent)}
.evico .ev-toc li:last-child{border-bottom:0}
.evico .ev-toc a{display:block; position:relative; padding:12px 0 12px 21px; font-size:1rem;
  line-height:1.4; color:var(--ink-3); transition:color .3s var(--ease)}
/* pas de changement de graisse a l'etat actif : dans une colonne etroite le libelle
   se recasserait et la ligne sauterait a chaque section franchie */
.evico .ev-toc a::before{content:""; position:absolute; left:0; top:1.15em; width:9px; height:1.5px;
  background:var(--line); transition:background-color .3s var(--ease), width .3s var(--ease)}
.evico .ev-toc a:hover{color:var(--ink)}
.evico .ev-toc a.is-on{color:var(--ink)}
.evico .ev-toc a.is-on::before{background:var(--blue); width:15px}

/* encart contact */
.evico .ev-side-cta{background:var(--night); border-radius:20px; color:var(--snow);
  padding:clamp(22px,2vw,28px); display:grid; gap:13px; justify-items:start}
.evico .ev-side-cta .ev-eyebrow{color:var(--snow-2)}
.evico .ev-side-cta p{max-width:none; font-size:1rem; line-height:1.55; color:var(--snow-2)}
.evico .ev-side-cta p b{color:var(--snow); font-weight:560}
.evico .ev-side-cta .ev-btn{width:100%; justify-content:center; margin-top:3px}
.evico .ev-side-cta .ev-tel{font-size:1rem; color:var(--snow-2); transition:color .3s var(--ease); gap:.34em;
  display:inline-flex; align-items:center; min-height:44px; margin-block:-11px}
.evico .ev-side-cta .ev-tel b{color:var(--snow); font-weight:560}
.evico .ev-side-cta .ev-tel:hover{color:var(--blue-light)}

/* suite de lecture : meme rail que la colonne de texte */
.evico .ev-next{max-width:none}
.evico .ev-next .ev-chhead{margin-bottom:clamp(20px,3vh,32px)}
.evico .ev-next .ev-h2{font-size:clamp(1.8rem,3.4vw,2.9rem)}
.evico .ev-next .ev-posts{margin-top:clamp(26px,3.6vh,40px)}
.evico .ev-ch-dark .ev-post-k{border-top-color:var(--snow); color:var(--snow-2)}
.evico .ev-ch-dark .ev-post p{color:var(--snow-2)}
.evico .ev-ch-dark .ev-post-cov{background:var(--night-2)}
.evico .ev-ch-dark .ev-post-link{color:var(--blue-light)}
.evico .ev-next-all{margin-top:clamp(26px,3.6vh,38px); padding-top:22px; border-top:1px solid var(--night-line);
  display:inline-flex; align-items:center; gap:9px; font-size:1rem; font-weight:560; color:var(--snow);
  width:100%; transition:color .3s var(--ease)}
.evico .ev-next-all:hover{color:var(--blue-light)}
.evico .ev-next-all .ev-arr{transition:transform .3s var(--ease)}
.evico .ev-next-all:hover .ev-arr{transform:translateX(4px)}

/* sur un ecran bas, la colonne collante depasserait la fenetre et le bas de
   l'encart deviendrait inatteignable : on la laisse defiler avec le texte */
@media (max-height:700px) and (min-width:1081px){
  .evico .ev-art-side{position:static}
}
@media (max-width:1080px){
  /* le rail disparait : le sommaire remonte au-dessus du texte, l'encart contact
     tombe juste apres la derniere ligne, la ou se terminait la bande d'appel */
  .evico .ev-art{grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vh,40px)}
  .evico .ev-art-side{display:contents}
  .evico .ev-toc{order:-1; position:static}
  .evico .ev-side-cta{order:1; max-width:42rem}
}

/* ============ prestations : scene epinglee (page Services) ============ */
/* Meme dispositif que la methode de l'accueil, en clair et en plus grand :
   une prestation a la fois, le rail donne la position et sert de raccourci. */
.evico .ev-offr-vp{position:relative; z-index:1; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding-block:clamp(64px,8vh,104px) clamp(44px,6vh,72px)}
.evico .ev-offr-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(30px,5vw,84px); align-items:center; flex:1; width:100%}
.evico .ev-offr-steps{position:relative; min-height:clamp(360px,46vh,480px); display:grid; gap:44px}
/* en mode anime les trois fiches occupent la meme cellule : la hauteur se cale
   sur la plus haute et ne saute plus d'une fiche a l'autre. Superposer en
   position absolue obligerait a deviner cette hauteur, et la fiche la plus
   longue depasserait du cadre. */
.evico .ev-offr-live .ev-offr{grid-area:1 / 1}
.evico .ev-offr{display:flex; flex-direction:column; justify-content:center}
.evico .ev-offr-n{display:block; font-family:var(--f-disp); font-weight:650; line-height:1; letter-spacing:-.04em;
  font-size:clamp(3.4rem,6vw,5.6rem); color:transparent; -webkit-text-stroke:1.5px var(--line); margin-bottom:10px}
.evico .ev-offr-k{display:block; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue-deep); margin-bottom:14px}
.evico .ev-offr h3{font-size:clamp(1.9rem,3.4vw,3rem); margin-bottom:16px; max-width:18ch}
.evico .ev-offr > p{max-width:52ch; font-size:clamp(1.02rem,1.25vw,1.16rem); line-height:1.6; color:var(--ink-2)}
/* liste sur deux colonnes : en grand format, cinq lignes empilees creusent la fiche */
.evico .ev-offr ul{list-style:none; margin:clamp(20px,2.6vh,30px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px clamp(24px,3vw,44px)}
.evico .ev-offr li{position:relative; padding-left:20px; font-size:1rem; line-height:1.5; color:var(--ink-2)}
.evico .ev-offr li::before{content:""; position:absolute; left:0; top:.66em; width:9px; height:1.5px; background:var(--blue)}
.evico .ev-offr-price{margin-top:clamp(22px,2.8vh,32px); padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:1rem; color:var(--ink-3)}
.evico .ev-offr-price b{font-family:var(--f-disp); font-weight:620; font-size:clamp(1.3rem,1.9vw,1.6rem);
  letter-spacing:-.02em; color:var(--ink); display:block; margin-bottom:4px}

/* rail des trois prestations */
.evico .ev-offr-rail{position:relative; display:grid; gap:clamp(20px,3.4vh,40px); padding-left:44px}
.evico .ev-offr-rail::before{content:""; position:absolute; left:15px; top:16px; bottom:16px; width:2px; background:var(--line)}
.evico .ev-offr-rail > i{position:absolute; left:15px; top:16px; bottom:16px; width:2px;
  background:linear-gradient(180deg,var(--blue),var(--blue-deep)); transform-origin:50% 0; transform:scaleY(0)}
.evico .ev-offr-rail button{position:relative; display:block; width:100%; text-align:left; padding:6px 0}
.evico .ev-offr-rail button::before{content:""; position:absolute; left:-44px; top:50%; width:32px; height:32px;
  margin-top:-16px; border-radius:50%; background:var(--paper); border:2px solid var(--line);
  transition:border-color .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease)}
.evico .ev-offr-rail button::after{content:attr(data-n); position:absolute; left:-44px; top:50%; width:32px; height:32px;
  margin-top:-16px; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono);
  font-size:.78rem; font-weight:600; color:var(--ink-3); transition:color .4s var(--ease)}
.evico .ev-offr-rail button b{display:block; font-family:var(--f-disp); font-weight:560; letter-spacing:-.02em;
  font-size:clamp(1.02rem,1.4vw,1.24rem); color:var(--ink-3); transition:color .4s var(--ease)}
.evico .ev-offr-rail button span{display:block; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em;
  color:var(--ink-3); margin-top:4px; transition:color .4s var(--ease)}
.evico .ev-offr-rail button:hover b{color:var(--ink)}
.evico .ev-offr-rail button.on::before{border-color:var(--blue-btn); background:var(--blue-btn); transform:scale(1.08)}
.evico .ev-offr-rail button.on::after{color:#fff}
.evico .ev-offr-rail button.on b{color:var(--ink)}
.evico .ev-offr-rail button.on span{color:var(--blue-deep)}

/* Fenetre basse : la fiche la plus longue depasserait le cadre epingle et son
   bas serait coupe pendant tout le defilement. On resserre l'echelle. */
@media (min-width:901px) and (max-height:780px){
  .evico .ev-offr-vp{padding-block:clamp(52px,7vh,80px) clamp(36px,5vh,56px)}
  .evico .ev-offr-n{font-size:clamp(2.6rem,3.6vw,3.4rem); margin-bottom:4px}
  .evico .ev-offr-k{margin-bottom:10px}
  .evico .ev-offr h3{font-size:clamp(1.6rem,2.5vw,2.2rem); margin-bottom:12px}
  .evico .ev-offr > p{font-size:1.02rem}
  .evico .ev-offr ul{margin-top:16px; gap:8px clamp(20px,3vw,40px)}
  .evico .ev-offr-price{margin-top:16px; padding-top:12px}
  .evico .ev-offr-price b{font-size:1.3rem; margin-bottom:2px}
}

/* Repli petit ecran : les memes fiches redeviennent des cartes empilees. Un
   second bloc reserve au mobile aurait duplique les trois offres dans le HTML,
   donc dans l'index de Google. */
@media (max-width:900px){
  .evico .ev-offr-vp{display:block; min-height:0; padding-block:0}
  .evico .ev-offr-grid{display:block}
  .evico .ev-offr-rail{display:none}
  .evico .ev-offr-steps{min-height:0; gap:clamp(18px,2.6vw,28px); margin-top:clamp(30px,4.5vh,52px)}
  .evico .ev-offr{background:#fff; border:1px solid var(--line); border-radius:22px;
    padding:clamp(24px,4vw,34px); justify-content:flex-start}
  .evico .ev-offr-n{font-size:2.6rem; margin-bottom:2px}
  .evico .ev-offr h3{font-size:1.5rem; margin-bottom:12px}
  .evico .ev-offr > p{font-size:1rem}
  .evico .ev-offr ul{grid-template-columns:1fr; margin-top:18px; gap:9px}
  .evico .ev-offr-price{margin-top:20px}
  .evico .ev-offr-price b{font-size:1.4rem}
}

/* ---- scene des prestations en fond video : la section passe en sombre ---- */
/* Le cadre couvre toute la section, la video y reste collee au viewport. Pas
   d'overflow ici, il casserait le sticky. Meme montage que la methode. */
.evico .ev-offr-stage.ev-ch-dark{background:var(--night)}
.evico .ev-offr-bg{position:absolute; inset:0; z-index:0}
.evico .ev-offr-bg video{position:sticky; top:0; display:block; width:100%; height:100svh;
  object-fit:cover; object-position:50% var(--evop,50%); opacity:.9}
.evico .ev-offr-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(9,14,19,.60) 0%, rgba(9,14,19,.54) 40%, rgba(9,14,19,.48) 70%, rgba(9,14,19,.60) 100%),
             linear-gradient(180deg, var(--night) 0%, rgba(13,27,36,.86) 10%, rgba(13,27,36,.24) 26%, rgba(13,27,36,.14) 55%, rgba(13,27,36,.18) 82%, var(--night) 100%)}
.evico .ev-offr-stage > .ev-wrap{position:relative; z-index:1}
/* la fiche pose son propre lit sombre : le voile general peut rester leger et
   l'image garder son grain ailleurs */
.evico .ev-ch-dark .ev-offr-steps::before{content:""; position:absolute;
  inset:-48px -90px -48px -68px; z-index:-1; pointer-events:none;
  background:radial-gradient(94% 104% at 32% 50%, rgba(6,10,14,.94) 0%, rgba(6,10,14,.86) 46%, rgba(6,10,14,0) 80%)}

/* palette sombre de la fiche et du rail : ambre, comme les autres fonds nuit */
.evico .ev-ch-dark .ev-offr-n{-webkit-text-stroke-color:rgba(255,255,255,.30)}
.evico .ev-ch-dark .ev-offr-k{color:var(--amber)}
.evico .ev-ch-dark .ev-offr > p{color:#C3D0DA}
.evico .ev-ch-dark .ev-offr li{color:#C3D0DA}
.evico .ev-ch-dark .ev-offr li::before{background:var(--amber)}
.evico .ev-ch-dark .ev-offr-price{border-top-color:rgba(255,255,255,.18); color:var(--snow-2)}
.evico .ev-ch-dark .ev-offr-price b{color:var(--snow)}
.evico .ev-ch-dark .ev-offr-rail::before{background:rgba(255,255,255,.16)}
.evico .ev-ch-dark .ev-offr-rail > i{background:linear-gradient(180deg,var(--amber),#FF7A2F)}
.evico .ev-ch-dark .ev-offr-rail button::before{background:var(--night); border-color:rgba(255,255,255,.22)}
.evico .ev-ch-dark .ev-offr-rail button::after{color:var(--snow-2)}
.evico .ev-ch-dark .ev-offr-rail button b{color:#AFBDC8}
.evico .ev-ch-dark .ev-offr-rail button span{color:#9FB1BC}
.evico .ev-ch-dark .ev-offr-rail button:hover b{color:var(--snow)}
.evico .ev-ch-dark .ev-offr-rail button.on::before{border-color:var(--amber); background:var(--amber)}
.evico .ev-ch-dark .ev-offr-rail button.on::after{color:var(--night)}
.evico .ev-ch-dark .ev-offr-rail button.on b{color:#fff}
.evico .ev-ch-dark .ev-offr-rail button.on span{color:var(--amber)}
@media (max-width:900px){
  /* la video ne paie pas son poids sur mobile : les fiches redeviennent des
     cartes claires posees sur le fond nuit de la section */
  .evico .ev-offr-bg{display:none}
  .evico .ev-ch-dark .ev-offr-steps::before{display:none}
  .evico .ev-ch-dark .ev-offr{background:var(--night-2); border-color:var(--night-line)}
}

/* ---- .ev-sys en chapitre clair (page Services) ---- */
/* Les valeurs de base visent un fond nuit, l'accueil s'en sert toujours ainsi.
   On ne surcharge que sur un chapitre clair. */
.evico .ev-ch:not(.ev-ch-dark) .ev-sys{border-top-color:var(--line)}
.evico .ev-ch:not(.ev-ch-dark) .ev-sys > div{border-bottom-color:var(--line)}
.evico .ev-ch:not(.ev-ch-dark) .ev-sys > div:hover{background:rgba(12,20,24,.035)}
.evico .ev-ch:not(.ev-ch-dark) .ev-sys dt{color:var(--blue-deep)}
.evico .ev-ch:not(.ev-ch-dark) .ev-sys dd{color:var(--ink-2)}

/* ============ pied de page ============ */
/* Un seul modele, servi par le snippet comme la barre de navigation : le
   constructeur n'en porte aucune copie, donc rien a resynchroniser page a page. */
.evico .ev-foot{position:relative; background:var(--night); color:var(--snow);
  padding-block:clamp(56px,8vh,92px) clamp(24px,3.4vh,36px)}
/* La colonne des liens est passee de trois a quatre blocs : on lui rend de la
   place sur la marque, sans quoi le quatrieme bloc partait seul a la ligne. */
.evico .ev-foot-haut{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,2.1fr);
  gap:clamp(38px,4.4vw,72px); align-items:start}
.evico .ev-foot-marque{display:grid; justify-items:start}
.evico .ev-foot-logo{font-family:var(--f-disp); font-weight:700; letter-spacing:-.03em;
  font-size:1.34rem; color:var(--snow);
  /* cible tactile de 44 px sans creuser la colonne : le remplissage est repris
     par une marge negative de meme valeur */
  display:inline-flex; align-items:center; min-height:44px; padding-block:5px; margin-block:-5px}
.evico .ev-foot-logo span{color:var(--blue-light)}
.evico .ev-foot-baseline{margin-top:14px; max-width:44ch; font-size:1rem; line-height:1.6; color:var(--snow-2)}
.evico .ev-foot-eb{margin-top:clamp(26px,3.4vh,38px); font-family:var(--f-mono); font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--snow-2)}
/* le numero est la premiere information du pied de page, il se lit de loin */
.evico .ev-foot-tel{display:inline-flex; align-items:center; margin-top:10px;
  font-family:var(--f-disp); font-weight:600; letter-spacing:-.03em; line-height:1.05;
  font-size:clamp(1.9rem,3.4vw,2.7rem); color:var(--snow); transition:color .3s var(--ease);
  /* sur telephone le numero tombe a 32 px de haut : c'est le geste principal
     du pied de page, il doit atteindre les 44 px de cible tactile */
  min-height:44px; padding-block:6px; margin-block:4px -6px}
.evico .ev-foot-tel:hover{color:var(--blue-light)}
.evico .ev-foot-note{margin-top:14px; max-width:42ch; font-size:1rem; line-height:1.55; color:var(--snow-2)}
.evico .ev-foot-marque .ev-btn{margin-top:clamp(20px,2.6vh,28px)}

/* Le pied de page est passe de trois a quatre colonnes : en largeur fixe la
   quatrieme se serrait, on laisse donc la grille se replier d'elle-meme. */
.evico .ev-foot-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:clamp(24px,2.4vw,40px)}
.evico .ev-foot-t{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--snow-2); padding-bottom:14px; border-bottom:1px solid var(--night-line)}
.evico .ev-foot-col ul{list-style:none; margin:0; padding:0; display:grid}
.evico .ev-foot-col li{border-bottom:1px solid color-mix(in srgb, var(--night-line) 60%, transparent)}
.evico .ev-foot-col li:last-child{border-bottom:0}
.evico .ev-foot-col a{display:block; padding:12px 0; font-size:1rem; line-height:1.4;
  color:#AFBDC8; transition:color .3s var(--ease)}
.evico .ev-foot-col a:hover{color:var(--snow)}

.evico .ev-foot-bas{display:flex; flex-wrap:wrap; align-items:center; gap:4px clamp(18px,3vw,40px);
  margin-top:clamp(40px,5.5vh,68px); padding-top:20px; border-top:1px solid var(--night-line);
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em; color:var(--snow-2)}
.evico .ev-foot-bas p{max-width:none}
/* la cible tactile atteint 44 px sans ecarter la ligne : la marge negative
   reprend ce que le remplissage ajoute */
.evico .ev-foot-bas a{color:var(--snow-2); display:inline-flex; align-items:center; min-height:44px;
  padding-block:12px; margin-block:-12px; transition:color .3s var(--ease)}
.evico .ev-foot-bas a:hover{color:var(--blue-light)}
.evico .ev-foot-bas > :last-child{margin-left:auto}

@media (max-width:1020px){
  .evico .ev-foot-haut{grid-template-columns:1fr; gap:clamp(34px,5vh,54px)}
  .evico .ev-foot-baseline,.evico .ev-foot-note{max-width:56ch}
}
@media (max-width:640px){
  .evico .ev-foot-cols{grid-template-columns:1fr; gap:clamp(22px,3vh,32px)}
  .evico .ev-foot-marque .ev-btn{width:100%; justify-content:center}
  .evico .ev-foot-bas > :last-child{margin-left:0}
}

/* marqueur des donnees que seul le client peut fournir : visible, pas discret,
   pour qu'aucune ne parte en ligne par oubli */
.evico .ev-todo{background:color-mix(in srgb, var(--amber) 26%, #fff); color:var(--amber-deep);
  font-family:var(--f-mono); font-size:.86em; letter-spacing:.02em; padding:2px 8px;
  border-radius:5px; white-space:nowrap}
.evico .ev-prose dl.ev-legal{display:grid; gap:0; margin:8px 0 24px; border-top:1px solid var(--line)}
.evico .ev-prose dl.ev-legal > div{display:grid; grid-template-columns:minmax(120px,210px) minmax(0,1fr);
  gap:8px 24px; padding-block:14px; border-bottom:1px solid var(--line)}
.evico .ev-prose dl.ev-legal dt{font-family:var(--f-mono); font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); padding-top:2px}
.evico .ev-prose dl.ev-legal dd{font-size:1.02rem; line-height:1.55; color:var(--ink-2)}
@media (max-width:640px){
  .evico .ev-prose dl.ev-legal > div{grid-template-columns:1fr; gap:4px}
}

/* ============ etiquettes flottantes de l'entete ============ */
/* Annotations posees autour de l'image, qui derivent avec le pointeur. Purement
   decoratives : masquees au tactile, au petit ecran et en mouvement reduit. */

/* ============ curseur ============ */
/* Trois pieces dans un calque fixe et sans evenements : un anneau qui traine et
   s'allonge dans l'axe du geste, un point de visee qui colle au pointeur, une
   bille qui suit de loin. Tout est en currentColor, la teinte du calque suit
   celle de la page. */
/* Au-dessus de la fenetre modale, qui est a 9000 : sinon elle passe devant le
   curseur et, le curseur natif etant masque partout, il n'y en a plus aucun.
   will-change force un calque de composition propre : une video transformee est
   promue par le navigateur et peut sinon se peindre par-dessus. */
.ev-cur-wrap{position:fixed; inset:0; z-index:9500; pointer-events:none; opacity:0;
  color:var(--blue-btn); will-change:transform; transition:opacity .25s var(--ease)}
.ev-cur-wrap.is-on{opacity:1}
.ev-cur-wrap > *{position:absolute; top:0; left:0; will-change:transform}
.ev-cur-ring{width:38px; height:38px; margin:-19px 0 0 -19px}
/* l'anneau est porte par un enfant : la piece exterieure prend l'echelle du
   survol, l'interieure la deformation a la vitesse. Deux sources d'echelle sur
   un meme element se seraient ecrasees. */
.ev-cur-ring > i{display:block; width:100%; height:100%; border-radius:50%; will-change:transform;
  box-shadow:inset 0 0 0 1.5px currentColor; transition:background-color .3s var(--ease)}
.ev-cur-ring.is-actif > i{background:color-mix(in srgb, currentColor 15%, transparent)}
.ev-cur-dot{width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:currentColor}
.ev-cur-ball{width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:currentColor; opacity:.3}
/* La teinte ne suit pas la racine mais ce qu'il y a reellement sous le pointeur :
   les entetes interieures et le pied de page portent leur propre fond sombre
   sans changer data-bg, et le curseur y restait en bleu fonce sur fond nuit. */
.evico .ev-cur-wrap.is-sombre{color:var(--blue-light)}
@media (pointer:fine){
  html.ev-cur-on,html.ev-cur-on *{cursor:none}
  /* la saisie garde le sien : sans barre de texte on ne sait plus ou on ecrit */
  html.ev-cur-on :is(input,textarea,select,[contenteditable]){cursor:auto}
}
@media (pointer:coarse),(prefers-reduced-motion:reduce){
  .ev-cur-wrap{display:none}
}

/* ============ menu mobile ============ */
/* Sous 900 px la barre ne gardait que la marque et le bouton d'audit : aucune
   navigation. Le bouton et le panneau vivent dans le snippet, comme la barre. */
.evico .ev-burger{display:none; position:relative; width:44px; height:44px; margin-right:-10px;
  flex:0 0 auto; color:inherit}
.evico .ev-burger span{position:absolute; left:11px; width:22px; height:1.5px; background:currentColor;
  border-radius:2px; transition:transform .38s var(--ease), opacity .25s var(--ease)}
.evico .ev-burger span:first-child{top:19px}
.evico .ev-burger span:last-child{top:25px}
.evico .ev-burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.evico .ev-burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* Le panneau contenait six liens, il en contient vingt et un : centre sur un
   contenu plus haut que l'ecran, le flex rognait le haut. Les marges auto
   centrent quand il y a la place et laissent defiler quand il n'y en a plus. */
.evico .ev-menu{position:fixed; inset:0; z-index:55; display:flex; flex-direction:column;
  justify-content:flex-start; gap:clamp(20px,3.4vh,32px); padding:96px var(--gut) clamp(34px,6vh,56px);
  background:var(--night); color:var(--snow); overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
  transition:opacity .34s var(--ease), transform .34s var(--ease), visibility 0s linear .34s}
.evico .ev-menu.is-open{opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .34s var(--ease), transform .34s var(--ease), visibility 0s}
.evico .ev-menu-liens{display:grid; gap:clamp(2px,.6vh,8px); margin-top:auto}
.evico .ev-menu-pied{margin-bottom:auto}
.evico .ev-menu-liens a{display:flex; align-items:center; min-height:54px;
  font-family:var(--f-disp); font-weight:560; letter-spacing:-.03em; line-height:1.15;
  font-size:clamp(1.42rem,5.4vw,1.86rem); color:var(--snow);
  border-bottom:1px solid var(--night-line); transition:color .3s var(--ease)}
.evico .ev-menu-liens a:last-child{border-bottom:0}
.evico .ev-menu-liens a:active{color:var(--blue-light)}
.evico .ev-menu-pied{display:grid; gap:16px; justify-items:start}
.evico .ev-menu-pied .ev-btn{width:100%; justify-content:center}
.evico .ev-menu-pied .ev-tel{display:inline-flex; align-items:center; min-height:44px; gap:.34em;
  font-size:1rem; color:var(--snow-2)}
.evico .ev-menu-pied .ev-tel b{color:var(--snow); font-weight:560}
@media (max-width:900px){
  .evico .ev-burger{display:block}
  /* le bouton d'audit se cassait en deux lignes entre la marque et le burger ;
     il est repris dans le panneau, en pleine largeur */
  .evico .ev-nav .ev-btn-nav{display:none}
}
@media (min-width:901px){
  /* jamais de panneau ouvert sur grand ecran, meme apres un redimensionnement */
  .evico .ev-menu{display:none}
}
@media (prefers-reduced-motion:reduce){
  .evico .ev-menu,.evico .ev-burger span{transition-duration:.01ms}
}


/* ============ scene par etapes en fond video ============ */
/* Meme montage que la scene des prestations : le cadre couvre la section, la
   video y reste collee au viewport, et les fiches defilent par-dessus. Pas
   d'overflow sur le cadre, il casserait le sticky. */
.evico .ev-scene-stage{position:relative}
.evico .ev-scene-bg{position:absolute; inset:0; z-index:0}
.evico .ev-scene-bg video{position:sticky; top:0; display:block; width:100%; height:100svh;
  object-fit:cover; object-position:50% var(--evop,50%); opacity:.9}
.evico .ev-scene-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(9,14,19,.62) 0%, rgba(9,14,19,.52) 44%, rgba(9,14,19,.62) 100%),
             linear-gradient(180deg, var(--night) 0%, rgba(13,27,36,.86) 10%, rgba(13,27,36,.24) 28%, rgba(13,27,36,.16) 56%, rgba(13,27,36,.20) 82%, var(--night) 100%)}
.evico .ev-scene-stage > .ev-wrap{position:relative; z-index:1}
.evico .ev-scene-vp{position:relative; z-index:1; min-height:100svh; display:flex;
  flex-direction:column; justify-content:center; padding-block:clamp(40px,6vh,72px)}
.evico .ev-scene-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(40px,5vw,86px); align-items:center}
.evico .ev-scene-cards{position:relative; min-height:clamp(320px,42vh,440px); display:grid; gap:44px}
/* La fiche pose son propre lit sombre : le voile general peut rester leger et
   l'image garder son grain sur les cotes. */
.evico .ev-scene-cards::before{content:""; position:absolute; inset:-46px -84px; z-index:-1;
  pointer-events:none;
  background:radial-gradient(94% 104% at 34% 50%, rgba(6,10,14,.94) 0%, rgba(6,10,14,.84) 48%, rgba(6,10,14,0) 82%)}
/* Dans la scene, la fiche n'est plus une carte : elle occupe le cadre. */
.evico .ev-scene-cards .ev-step-card{background:transparent; border:0; padding:0;
  gap:clamp(20px,2.6vw,36px); align-items:start}
.evico .ev-scene-live .ev-step-card{grid-area:1 / 1; align-content:center}
.evico .ev-scene-cards .ev-step-n{font-size:clamp(2.3rem,4.4vw,3.5rem); color:var(--amber); line-height:.94}
.evico .ev-scene-cards .ev-step-card h3{font-size:clamp(1.46rem,2.5vw,2rem); line-height:1.1;
  letter-spacing:-.025em; margin-bottom:12px; color:var(--snow)}
.evico .ev-scene-cards .ev-step-card .ev-step-k{color:var(--amber); margin-bottom:14px}
.evico .ev-scene-cards .ev-step-card p{color:#C6D2DB; font-size:clamp(1rem,1.15vw,1.08rem);
  line-height:1.62; max-width:56ch}

/* le rail : meme grammaire que celui des prestations, en ambre sur fond nuit */
.evico .ev-scene-rail{position:relative; display:grid; gap:clamp(14px,2.6vh,32px); padding-left:44px}
.evico .ev-scene-rail::before{content:""; position:absolute; left:15px; top:16px; bottom:16px;
  width:2px; background:rgba(255,255,255,.16)}
.evico .ev-scene-rail > i{position:absolute; left:15px; top:16px; bottom:16px; width:2px;
  transform-origin:top; transform:scaleY(0); background:linear-gradient(180deg,var(--amber),#FF7A2F)}
.evico .ev-scene-rail button{position:relative; display:block; width:100%; text-align:left; padding:6px 0}
.evico .ev-scene-rail button::before{content:""; position:absolute; left:-44px; top:50%; width:32px;
  height:32px; margin-top:-16px; border-radius:50%; background:var(--night);
  border:1.5px solid rgba(255,255,255,.22); transition:transform .3s var(--ease),
  background-color .3s var(--ease), border-color .3s var(--ease)}
.evico .ev-scene-rail button::after{content:attr(data-n); position:absolute; left:-44px; top:50%;
  width:32px; height:32px; margin-top:-16px; display:grid; place-items:center;
  font-family:var(--f-mono); font-size:.7rem; color:var(--snow-2); transition:color .3s var(--ease)}
.evico .ev-scene-rail button b{display:block; font-family:var(--f-disp); font-weight:560;
  letter-spacing:-.02em; font-size:1.02rem; color:#AFBDC8; transition:color .3s var(--ease)}
.evico .ev-scene-rail button span{display:block; font-family:var(--f-mono); font-size:.73rem;
  letter-spacing:.06em; color:#8FA1AD; margin-top:3px}
.evico .ev-scene-rail button:hover b{color:var(--snow)}
.evico .ev-scene-rail button.on::before{border-color:var(--amber); background:var(--amber); transform:scale(1.08)}
.evico .ev-scene-rail button.on::after{color:var(--night)}
.evico .ev-scene-rail button.on b{color:#fff}
.evico .ev-scene-rail button.on span{color:var(--amber)}

@media (max-width:900px){
  /* la video ne paie pas son poids sur telephone : les fiches redeviennent la
     liste d'etapes ordinaire, posee sur le fond nuit de la section */
  .evico .ev-scene-bg{display:none}
  .evico .ev-scene-cards::before{display:none}
  .evico .ev-scene-vp{display:block; min-height:0; padding-block:0}
  .evico .ev-scene-grid{grid-template-columns:1fr; gap:0}
  .evico .ev-scene-rail{display:none}
  .evico .ev-scene-cards{gap:clamp(16px,2vw,26px); min-height:0}
  .evico .ev-scene-cards .ev-step-card{background:var(--night-2); border:1px solid var(--night-line);
    border-radius:20px; padding:clamp(24px,2.6vw,34px)}
  .evico .ev-scene-cards .ev-step-n{font-size:clamp(1.6rem,3vw,2.4rem)}
  .evico .ev-scene-cards .ev-step-card h3{font-size:1.16rem}
}
/* mouvement refuse : la scene reste une liste, comme sur telephone */
.ev-static .evico .ev-scene-vp,.evico.ev-static .ev-scene-vp{display:block; min-height:0}


/* ============ formulaire de contact ============ */
/* Deux niveaux de surface, et pas un seul : le formulaire pose un panneau
   clair-nuit, les champs y sont creuses dans la teinte de la page. Sans cette
   difference, un champ au meme fond que son panneau redevient invisible, ce que
   l'ajout du fond etait justement cense corriger.
   L'encart voisin prend le meme panneau, sinon les deux colonnes ne se
   repondaient plus. */
.evico .ev-contact .elementor-form,
.evico .ev-contact .ev-brief{
  background:var(--night-2);
  border:1px solid var(--night-line);
  border-radius:20px;
  padding:clamp(24px,2.6vw,34px)}
.evico .ev-contact .elementor-form{color-scheme:dark}
.evico .ev-contact .elementor-widget-form .elementor-widget-container{background:none; padding:0}

/* ---------- les champs ----------
   Le fond est peint en background-image et non en background-color, et c'est
   voulu : sur ces champs, le navigateur impose sa propre couleur de fond claire
   au-dessus de toute declaration d'auteur, y compris en ligne et en !important.
   Verifie : une couleur posee en background-color reste blanche a l'ecran, un
   degrade plat de la meme couleur passe. On garde quand meme la couleur, pour
   les navigateurs qui la respectent et pour la selection de texte.
   appearance:none accompagne le procede, faute de quoi la surface native se
   redessine par-dessus. Consequence : la fleche du menu deroulant disparait
   avec l'apparence native, elle est redessinee plus bas. color-scheme:dark fait
   rendre la liste des options dans la meme gamme. */
.evico .ev-contact .elementor-form .elementor-field-textual{
  -webkit-appearance:none; appearance:none;
  background-color:var(--night);
  background-image:linear-gradient(var(--night),var(--night));
  border:1px solid var(--night-line);
  border-radius:12px;
  padding:14px 16px;
  color:var(--snow);
  font-family:var(--f-body); font-size:1rem; line-height:1.5;
  transition:border-color .25s var(--ease), background-image .25s var(--ease)}
.evico .ev-contact .elementor-form .elementor-field-textual:hover{border-color:#31434F}
/* le contour general du site reste la marque du focus clavier : on ne l'annule
   pas, on ajoute seulement la teinte du champ */
.evico .ev-contact .elementor-form .elementor-field-textual:focus{
  border-color:var(--blue-light);
  background-color:#12212C;
  background-image:linear-gradient(#12212C,#12212C)}
.evico .ev-contact .elementor-form .elementor-field-textual::placeholder{
  color:var(--ink-3); opacity:1}
.evico .ev-contact .elementor-form textarea.elementor-field-textual{
  min-height:124px; resize:vertical}
/* la fleche redessinee, posee sur le degrade de fond */
.evico .ev-contact .elementor-form select.elementor-field-textual{
  cursor:pointer; padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FB1BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),linear-gradient(var(--night),var(--night));
  background-repeat:no-repeat,no-repeat;
  background-position:right 15px center,0 0;
  background-size:18px 18px,100% 100%}
.evico .ev-contact .elementor-form select.elementor-field-textual:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FB1BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),linear-gradient(#12212C,#12212C)}
.evico .ev-contact .elementor-form .elementor-field-label{margin-bottom:9px}
/* le remplissage automatique de Chrome repeint le champ : seule une ombre
   interne assez large le recouvre */
.evico .ev-contact .elementor-form .elementor-field-textual:-webkit-autofill{
  -webkit-text-fill-color:var(--snow);
  -webkit-box-shadow:0 0 0 60px var(--night) inset;
  caret-color:var(--snow)}
@media (max-width:600px){
  /* 16 px minimum sur telephone, sinon Safari zoome a la mise au point */
  .evico .ev-contact .elementor-form .elementor-field-textual{font-size:16px; padding:13px 14px}
  .evico .ev-contact .elementor-form,
  .evico .ev-contact .ev-brief{padding:22px; border-radius:18px}
}


/* ============ chaque chapitre peint son propre fond ============ */
/* Avant, seule la racine portait une couleur et le script la faisait basculer
   au defilement, en fondu. Pendant ce fondu la couleur de fond traversait celle
   du texte, du chapitre qui sort comme de celui qui entre, et les couleurs de
   texte, elles, ne bougent pas : elles appartiennent a la section. Mesure faite
   a 1,15 s de fondu, le texte clair passait 0,64 s sous le seuil de contraste
   et le texte sombre 0,86 s, avec un instant a 1:1, donc invisible.

   Chaque chapitre pose donc sa propre couleur. Le bord entre deux chapitres
   devient net, et il n'y a plus d'etat intermediaire a traverser.

   Les sections qui peignaient deja quelque chose sont exclues : les deux
   entetes, la bande d'appel et la scene des prestations posent des degrades,
   .ev-ch-solid sa couleur pleine. La scene par etapes, elle, n'est pas exclue :
   sa couleur sert de sol sous la video.

   La racine garde sa couleur et sa bascule : elle n'est plus visible derriere
   les chapitres, mais elle habille le depassement elastique en haut et en bas,
   et l'attribut data-bg pilote aussi la barre de navigation. */
.evico .ev-ch:not(.ev-page-hero, .ev-cta, .ev-ch-solid, .ev-offr-stage, .ev-hero),
.evico section[data-bg="paper"]:not(.ev-page-hero, .ev-cta, .ev-ch-solid, .ev-offr-stage, .ev-hero){
  background-color:var(--paper)}
.evico .ev-ch-dark:not(.ev-page-hero, .ev-cta, .ev-ch-solid, .ev-offr-stage, .ev-hero),
.evico section[data-bg="night"]:not(.ev-page-hero, .ev-cta, .ev-ch-solid, .ev-offr-stage, .ev-hero){
  background-color:var(--night)}