/* ==========================================================================
STRIKER — feuille unique, construite depuis le relevé de striker-agency.com
(voir DESIGN-SYSTEM.md). Base claire, ancrages navy, graisses plafonnées.
========================================================================== */
/* --------------------------------------------------------------- 1. FONTES */
@font-face{font-family:Avenir;src:url(../assets/fonts/AvenirNextCyr-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Avenir;src:url(../assets/fonts/AvenirNextCyr-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Avenir;src:url(../assets/fonts/AvenirNextCyr-Demi.woff2) format('woff2');font-weight:600;font-display:swap}
/* --------------------------------------------------------------- 2. JETONS */
/* Le navigateur « ancre » le défilement : quand un élément change au-dessus de
ce qu'on regarde, il décale le scroll pour compenser. Sur une page dont
chaque section est chorégraphiée au scroll — plaques qui s'allument, sections
qui se chevauchent — cette compensation ne rattrape rien : elle fait sauter
la page sous le doigt, en général dans un entre-deux de sections. */
html{overflow-anchor:none}
:root{
/* surfaces — la base est claire */
--paper:#FDFDFD;
--panel:#F5F7F9;
--card:#FFFFFF;
--navy:#0B1A2A;
--navy-deep:#071320;
/* encre */
--ink:#0B1622;
--ink-soft:#5C6875;
--ink-mute:#8E98A3;
/* accent — charte Striker */
--blue:#0E70C4;
--blue-bright:#3B7DF0;
--blue-pale:#EAF2FB;
/* filets : presque invisibles, c'est ce qui fait le sérieux */
--line:rgba(11,22,34,.07);
--line-2:rgba(11,22,34,.11);
--line-d:rgba(255,255,255,.07);
--line-d2:rgba(255,255,255,.13);
/* ombres : quasi nulles */
--sh1:0 1px 2px rgba(11,22,34,.04);
--sh2:0 14px 34px -14px rgba(11,22,34,.13);
--sh3:0 28px 60px -24px rgba(11,22,34,.18);
/* espacement — base 2, relevée telle quelle */
--s2:2px; --s4:4px; --s6:6px; --s8:8px; --s10:10px; --s12:12px;
--s14:14px;--s16:16px;--s18:18px;--s20:20px;--s24:24px;--s28:28px;
--s32:32px; --s40:40px;--s56:56px;
--s48:48px;--s64:64px;--s80:80px;--s96:96px;--s120:120px;
/* rayons */
--r8:8px; --r12:12px; --r16:16px; --r20:20px; --r24:24px; --r28:28px; --rf:999px;
/* mise en page */
--wrap:1264px; /* 1200 de contenu + 32 de gouttière */
--gut:clamp(20px,5vw,32px);
--sec:clamp(64px,8vw,112px);
--nav-h:56px;
--ease:cubic-bezier(.22,1,.36,1);
}
/* ------------------------------------------------------------- 3. REMISE À PLAT */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
font-weight:400;font-size:15px;line-height:1.5;letter-spacing:-.01em;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blue);color:#fff}
/* ------------------------------------------------- 4. ÉCHELLE TYPOGRAPHIQUE
Relevée : 76 / 52 / 24 / 18 / 16 / 14 / 12, graisses 400-500-600, jamais plus.
L'élégance vient de l'écart entre le plus grand et le plus petit. */
.t-hero{font-size:clamp(38px,6.2vw,76px);font-weight:600;line-height:1.06;letter-spacing:-.04em;margin:0}
.t-h2 {font-size:clamp(28px,3.7vw,52px);font-weight:600;line-height:1.1;letter-spacing:-.04em;margin:0}
.t-h3 {font-size:clamp(20px,1.9vw,24px);font-weight:600;line-height:1.15;letter-spacing:-.035em;margin:0}
.t-h4 {font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.02em;margin:0}
.t-lead{font-size:clamp(15px,1.3vw,16px);font-weight:400;line-height:1.55;color:var(--ink-soft);margin:0}
.t-body{font-size:15px;font-weight:400;line-height:1.5;color:var(--ink-soft);margin:0}
.t-small{font-size:13px;font-weight:400;line-height:1.45;color:var(--ink-soft);margin:0}
.t-xs {font-size:11.5px;font-weight:500;line-height:1.4;color:var(--ink-mute);margin:0}
.t-eyebrow{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin:0}
b,strong{font-weight:600;color:var(--ink)}
.measure{max-width:58ch}
.measure-s{max-width:44ch}
/* sur fond sombre, l'encre s'inverse */
.on-dark{color:rgba(255,255,255,.92)}
.on-dark .t-lead,.on-dark .t-body,.on-dark .t-small{color:rgba(255,255,255,.62)}
.on-dark .t-xs,.on-dark .t-eyebrow{color:rgba(255,255,255,.48)}
.on-dark b,.on-dark strong{color:#fff}
/* ----------------------------------------------------------- 5. MISE EN PAGE */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:var(--sec);position:relative}
.band--dark{background:var(--navy);color:rgba(255,255,255,.92)}
.band--panel{background:var(--panel)}
section[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
/* grille 12 colonnes */
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s40) var(--s48);align-items:start}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}
/* compositions à trois zones — c'est ce qui crée le jeu (relevé : 285/630/285) */
.g3{display:grid;grid-template-columns:1fr minmax(0,630px) 1fr;gap:var(--s48);align-items:start}
.g3-center{grid-column:2}
@media (max-width:900px){
.g{gap:var(--s32)}
.c4,.c5,.c6,.c7,.c8{grid-column:1/-1}
.g3{grid-template-columns:1fr}
.g3-center{grid-column:1}
}
/* en-tête de section : groupe serré, puis grand écart avant le contenu.
6px entre l'œillet et le titre, 12 entre titre et chapô, 48 avant la suite. */
.head{display:grid;gap:var(--s12);margin-bottom:var(--s48)}
.head .t-eyebrow{margin-bottom:calc(var(--s6) * -1)}
.head.center{justify-items:center;text-align:center;margin-inline:auto;max-width:640px}
/* ==========================================================================
6. BOUTONS — pilule, contenu serré, flèche dans une pastille
========================================================================== */
.btn{
display:inline-flex;align-items:center;gap:var(--s12);
padding:10px 10px 10px 20px;border-radius:var(--rf);
font-size:14px;font-weight:500;letter-spacing:-.015em;white-space:nowrap;
background:var(--ink);color:#fff;border:1px solid transparent;
transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh2)}
.btn .pip{
display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
background:rgba(255,255,255,.14);font-size:11px;line-height:1;
transition:transform .3s var(--ease);
}
.btn:hover .pip{transform:translate(2px,-2px)}
/* --ink vaut #FFF depuis la DA sombre : un bouton blanc avec color:var(--ink)
donne du blanc sur blanc. L'encre du bouton clair est écrite en dur. */
.btn--light{background:#fff;color:#0A1826}
.btn--light span,.btn--light .lbl-l,.btn--light .lbl-s{color:inherit}
.btn--light .pip{background:rgba(11,22,34,.07)}
.btn--blue{background:var(--blue);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost .pip{background:rgba(11,22,34,.06)}
.on-dark .btn--ghost{color:rgba(255,255,255,.9);border-color:var(--line-d2)}
.on-dark .btn--ghost .pip{background:rgba(255,255,255,.1)}
.btn--sm{padding:7px 7px 7px 14px;font-size:13px}
.btn--sm .pip{width:22px;height:22px;font-size:10px}
/* ==========================================================================
7. BARRE DE MENU — flottante, discrète, texte à 13px
========================================================================== */
.nav{
position:fixed;top:clamp(14px,2.2vh,22px);left:50%;translate:-50% 0;z-index:60;
display:flex;align-items:center;height:var(--nav-h);padding:0 8px 0 18px;
max-width:calc(100vw - 2 * var(--gut));flex-wrap:nowrap;
border-radius:var(--rf);border:1px solid var(--line);
background:rgba(253,253,253,.82);backdrop-filter:blur(18px) saturate(1.4);
box-shadow:var(--sh1);
transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.over-dark{background:rgba(11,26,42,.62);border-color:var(--line-d2)}
.nav.over-dark .nav-word{filter:brightness(0) invert(1)}
.nav.over-dark .nav-links a{color:rgba(255,255,255,.7)}
.nav.over-dark .nav-links a:hover,.nav.over-dark .nav-links a.on{color:#fff;background:rgba(255,255,255,.09)}
.nav.over-dark .btn{background:#fff;color:#0A1826}
.nav.over-dark .btn span{color:inherit}
.nav.over-dark .btn .pip{background:rgba(11,22,34,.08)}
.nav-logo{flex:none;display:flex;align-items:center}
/* le fichier source est blanc : sur la barre claire il faut l'encrer, sinon il disparaît */
.nav-word{height:17px;width:auto;flex:none;filter:brightness(0);transition:filter .4s var(--ease)}
.nav-sep{width:1px;height:18px;flex:none;background:var(--line-2);margin:0 14px 0 16px}
.nav-links{display:flex;gap:var(--s2);flex:none}
.nav-links a{
padding:7px 11px;border-radius:var(--r8);font-size:13px;font-weight:500;
letter-spacing:-.012em;color:var(--ink-soft);white-space:nowrap;
transition:color .2s,background .2s;
}
.nav-links a:hover,.nav-links a.on{color:var(--ink);background:rgba(11,22,34,.045)}
.nav .btn{margin-left:12px;flex:none}
.nav-burger{display:none}
.lbl-s{display:none}
@media (max-width:520px){ .lbl-l{display:none} .lbl-s{display:inline} }
@media (max-width:900px){
/* Avec space-between et trois éléments, le bouton se retrouvait planté au
milieu, à égale distance du logo et du menu — comme s'il flottait. Le
logo tient la gauche, le bouton et le menu forment un groupe à droite. */
.nav{left:var(--gut);right:var(--gut);translate:none;justify-content:flex-start;
gap:8px;padding:0 8px 0 14px}
.nav-sep,.nav-links{display:none}
.nav .btn{
margin-left:auto;flex:none;
padding:6px 6px 6px 13px;font-size:13px;
}
.nav .btn .pip{width:26px;height:26px}
}
/* ==========================================================================
8. VOCABULAIRE DE SCHÉMA — des objets d'interface, pas des diagrammes
C'est le point qui séparait « clean » de « cheap » : le lecteur reconnaît
un tableau de bord ; il ne reconnaît pas une forme abstraite.
========================================================================== */
.ui{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r24);padding:var(--s32)}
.ui--plain{background:transparent;border:0;padding:0}
/* la carte : icône dans un carré arrondi, puis une puce numérotée */
.ui-card{
background:var(--card);border:1px solid var(--line);border-radius:var(--r16);
padding:var(--s16);display:grid;gap:var(--s12);box-shadow:var(--sh1);
}
.ui-icon{
width:32px;height:32px;border-radius:var(--r8);display:grid;place-items:center;
background:var(--blue-pale);color:var(--blue);
}
.ui-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.ui-icon--ink{background:rgba(11,22,34,.05);color:var(--ink)}
.ui-chip{display:inline-flex;align-items:center;gap:var(--s8);font-size:13px;font-weight:500;letter-spacing:-.015em}
.ui-chip i{
font-style:normal;font-size:11px;font-weight:500;color:var(--ink-mute);
background:rgba(11,22,34,.05);border-radius:var(--r8);padding:3px 6px;line-height:1;
}
.ui-card.is-dim{opacity:.5}
/* la rangée d'avatars qui se chevauchent */
.ui-faces{display:flex}
.ui-faces span{
position:relative;width:32px;height:32px;border-radius:50%;border:2px solid var(--card);
margin-left:-9px;overflow:hidden;box-shadow:var(--sh1);
background:linear-gradient(160deg,#E3E9F0,#CBD5E0);
}
/* silhouette neutre : une équipe, sans prétendre nommer qui que ce soit */
.ui-faces span::after{
content:'';position:absolute;left:50%;top:22%;translate:-50% 0;
width:34%;aspect-ratio:1;border-radius:50%;background:rgba(11,22,34,.26);
}
.ui-faces span::before{
content:'';position:absolute;left:50%;bottom:-4%;translate:-50% 0;
width:60%;height:38%;border-radius:99px 99px 0 0;background:rgba(11,22,34,.26);
}
.ui-faces span:first-child{margin-left:0}
.on-dark .ui-faces span{border-color:var(--navy)}
/* la carte de suivi — une métrique, une barre, un nom */
.ui-metric{
background:var(--card);border:1px solid var(--line);border-radius:var(--r16);
padding:var(--s16);display:grid;gap:var(--s12);box-shadow:var(--sh1);
}
.ui-metric-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s12)}
.ui-bars{display:flex;align-items:flex-end;gap:var(--s8);height:96px}
.ui-bars i{
flex:1;max-width:44px;border-radius:4px 4px 0 0;background:var(--blue-pale);
height:var(--h,30%);transition:height .9s var(--ease);
}
.ui-bars i.hot{background:var(--blue)}
/* le connecteur : une courbe pointillée très pâle, jamais une flèche */
.ui-link{position:absolute;inset:0;pointer-events:none;overflow:visible}
.ui-link path{fill:none;stroke:var(--line-2);stroke-width:1.2;stroke-dasharray:4 5}
/* la barre de progression fine */
.ui-track{height:4px;border-radius:var(--rf);background:rgba(11,22,34,.07);overflow:hidden}
.ui-track i{display:block;height:100%;border-radius:var(--rf);background:var(--blue);
width:var(--w,0%);transition:width 1.1s var(--ease)}
.on-dark .ui-track{background:rgba(255,255,255,.12)}
/* les cartes sur fond sombre */
.on-dark .ui-card,.on-dark .ui-metric{
background:rgba(255,255,255,.045);border-color:var(--line-d);box-shadow:none;color:rgba(255,255,255,.92)
}
.on-dark .ui-icon{background:rgba(59,125,240,.18);color:#8FBBFF}
.on-dark .ui-chip i{background:rgba(255,255,255,.09);color:rgba(255,255,255,.55)}
/* ==========================================================================
9. HERO — le premier ancrage sombre
========================================================================== */
.ouv-scene > .hero{
position:absolute;inset:0;z-index:1;
display:grid;align-content:center;
padding-block:calc(var(--nav-h) + var(--s32)) var(--s64);
transform:scale(var(--z,1.06));transform-origin:50% 45%;
will-change:transform;
}
.hero{
position:relative;background:var(--navy);color:rgba(255,255,255,.92);
overflow:hidden;
}
.hero::before{
content:'';position:absolute;inset:-20% 0 0;
background:radial-gradient(120% 78% at 50% -2%,rgba(59,125,240,.32),transparent 62%);
transform:translateY(var(--par,0));
will-change:transform;
}
.hero::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:180px;
background:linear-gradient(180deg,transparent,var(--paper));
opacity:0; /* la bascule vers le clair se fait plus bas */
}
.hero .wrap{position:relative;z-index:2}
.hero-inner{display:grid;justify-items:center;text-align:center;gap:var(--s24)}
@media (max-width:620px){
.hero-inner{gap:var(--s20)}
.hero{padding-block:calc(var(--nav-h) + var(--s48)) var(--s64)}
.hero .t-lead{font-size:14.5px;line-height:1.5}
.hero-actions{width:100%;flex-direction:column}
.hero-actions .btn{justify-content:space-between;width:100%}
.hero-stats{margin-top:var(--s32)}
}
.hero .t-hero{max-width:16ch}
.hero .t-lead{max-width:min(880px,100%);color:rgba(255,255,255,.62);text-wrap:pretty}
.hero-actions{display:flex;gap:var(--s10);flex-wrap:wrap;justify-content:center;margin-top:var(--s8)}
/* la pastille de créneaux — groupe serré : 6px partout */
.slots{
display:inline-flex;align-items:center;gap:var(--s10);padding:6px 16px 6px 6px;
border-radius:var(--rf);border:1px solid var(--line-d2);background:rgba(255,255,255,.05);
font-size:13px;font-weight:500;color:rgba(255,255,255,.72);
}
.slots b{
display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
background:rgba(59,125,240,.22);color:#8FBBFF;font-size:12px;font-weight:600;
}
/* la rangée de chiffres sous le hero — serrée entre elles, détachée du reste */
.hero-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s10);
margin-top:var(--s48);
}
.hero-stat{
border:1px solid var(--line-d);border-radius:var(--r16);background:rgba(255,255,255,.04);
padding:var(--s16) var(--s20);display:grid;gap:var(--s4);
}
.hero-stat b{display:block;font-size:clamp(20px,2.3vw,28px);font-weight:600;letter-spacing:-.035em;color:#fff}
.hero-stat span{font-size:11.5px;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:-.005em}
@media (max-width:760px){ .hero-stats{grid-template-columns:repeat(2,1fr)} }
/* ==========================================================================
10. CARROUSEL CLIENTS — dans une colonne, il se mesure à elle
========================================================================== */
.cf{position:relative;container-type:inline-size;border-radius:var(--r24);padding:var(--s12)}
.cf-stage{position:relative;height:clamp(300px,36cqw + 160px,410px)}
.cf-card{
position:absolute;left:52%;top:50%;width:min(58cqw,232px);aspect-ratio:3/4;
transform-origin:100% 100%;
border-radius:var(--r20);overflow:hidden;border:1px solid var(--line);
background:var(--panel);box-shadow:var(--sh2);cursor:pointer;
transition:transform .6s var(--ease),opacity .6s var(--ease),filter .6s var(--ease);
}
.cf-card img{width:100%;height:100%;object-fit:cover}
.cf-card::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(7,19,32,0) 42%,rgba(7,19,32,.86));
}
.cf-card .cf-logo{
position:absolute;left:var(--s16);right:var(--s16);bottom:var(--s16);z-index:2;
width:auto;max-width:calc(100% - 2 * var(--s16));height:24px;
object-fit:contain;object-position:left bottom;
filter:brightness(0) invert(1);
}
.cf-dots{display:flex;gap:var(--s6);justify-content:center;margin-top:var(--s20)}
.cf-dots button{width:6px;height:6px;border-radius:50%;background:rgba(11,22,34,.16);transition:.3s}
.cf-dots button.on{width:20px;border-radius:var(--rf);background:var(--blue)}
/* la fiche client, colonne de droite */
.note{display:grid;gap:var(--s12);align-content:start}
.note-res{
margin-top:var(--s8);padding-top:var(--s20);border-top:1px solid var(--line);
display:grid;gap:var(--s10);
}
.note-res div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s16);font-size:14px}
.note-res b{font-size:16px;color:var(--blue);font-weight:600}
.note > *{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.note.on > *{opacity:1;transform:none}
.note.on > *:nth-child(2){transition-delay:.04s}
.note.on > *:nth-child(3){transition-delay:.08s}
.note.on > *:nth-child(4){transition-delay:.12s}
.note.on > *:nth-child(5){transition-delay:.16s}
/* ==========================================================================
11. TÉMOIGNAGES ET CAS
========================================================================== */
.quote{
background:var(--card);border:1px solid var(--line);border-radius:var(--r24);
padding:var(--s32);display:grid;gap:var(--s20);box-shadow:var(--sh1);
}
.quote p{font-size:clamp(16px,1.5vw,19px);line-height:1.45;letter-spacing:-.025em;color:var(--ink);margin:0}
.quote-by{display:flex;align-items:center;gap:var(--s10);padding-top:var(--s16);border-top:1px solid var(--line)}
.quote-by::before{content:'';width:18px;height:1px;background:var(--blue);flex:none}
/* le comparateur avant / après, en deux colonnes lisibles */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:var(--s10)}
.ba-col{border:1px solid var(--line);border-radius:var(--r20);padding:var(--s24);display:grid;gap:var(--s12);align-content:start}
.ba-col--after{background:var(--card);box-shadow:var(--sh2)}
.ba-col ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s10)}
.ba-col li{display:grid;grid-template-columns:16px 1fr;gap:var(--s10);font-size:14px;line-height:1.4;color:var(--ink-soft)}
.ba-col li svg{width:16px;height:16px;margin-top:2px;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ba-col--before li svg{stroke:var(--ink-mute)}
.ba-col--after li svg{stroke:var(--blue)}
.ba-col--after li{color:var(--ink)}
@media (max-width:620px){ .ba{grid-template-columns:1fr} }
/* ==========================================================================
12. FAQ — accordéon, filets fins, rien d'autre
========================================================================== */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
list-style:none;cursor:pointer;padding:var(--s24) 0;
display:flex;align-items:center;justify-content:space-between;gap:var(--s24);
font-size:16px;font-weight:500;letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{
flex:none;width:26px;height:26px;border-radius:50%;background:rgba(11,22,34,.05);
display:grid;place-items:center;font-style:normal;font-size:15px;color:var(--ink-soft);
transition:transform .35s var(--ease),background .35s var(--ease);
}
.faq details[open] summary i{transform:rotate(45deg);background:var(--blue);color:#fff}
.faq-a{padding:0 0 var(--s24);max-width:64ch}
/* ==========================================================================
13. SIMULATEUR — le deuxième ancrage sombre
========================================================================== */
.sim{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s48);align-items:start}
.sim-field{display:grid;gap:var(--s10);padding-block:var(--s16);border-bottom:1px solid var(--line-d)}
.sim-field:first-child{padding-top:0}
.sim-label{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s16)}
.sim-label span{font-size:14px;font-weight:500;color:rgba(255,255,255,.8)}
.sim-label b{font-size:15px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.sim-field input[type=range]{
-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:var(--rf);
background:rgba(255,255,255,.16);outline:none;
}
.sim-field input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;
border:4px solid var(--blue);cursor:grab;box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.sim-out{
background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
border:1px solid rgba(255,255,255,.13);border-radius:var(--r24);
padding:var(--s24);display:grid;gap:var(--s18);
box-shadow:0 34px 76px -34px rgba(4,11,20,.95), inset 0 1px 0 rgba(255,255,255,.10);
}
.sim-total{font-size:clamp(34px,4.4vw,58px);font-weight:600;letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.sim-leaks{display:grid;gap:8px}
.sim-leak-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s16);font-size:13.5px}
.sim-leak-top b{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
@media (max-width:900px){ .sim{grid-template-columns:1fr;gap:var(--s32)} }
/* ==========================================================================
14. ENTRÉES AU SCROLL — discrètes. 8px, pas 40.
========================================================================== */
.rv{opacity:0;transform:translateY(10px)}
html.anim .rv{transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.anim .rv.in,html:not(.anim) .rv{opacity:1;transform:none}
.rv-d1{transition-delay:.06s}.rv-d2{transition-delay:.12s}.rv-d3{transition-delay:.18s}.rv-d4{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1!important;transform:none!important} }
/* le dirigeant, juste sous le nom de l'entreprise — même groupe, donc serré */
.note-qui{margin-top:calc(var(--s8) * -1);color:var(--ink-mute)}
/* ==========================================================================
15. LA BASCULE DU SIMULATEUR — aujourd'hui / au standard
========================================================================== */
.seg{
position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
padding:4px;border-radius:var(--rf);border:1px solid var(--line-d);
background:rgba(255,255,255,.05);justify-self:start;
}
.seg button{
position:relative;z-index:2;padding:8px 18px;border-radius:var(--rf);
font-size:13px;font-weight:500;letter-spacing:-.015em;white-space:nowrap;
color:rgba(255,255,255,.6);transition:color .35s var(--ease);
}
.seg button.on{color:var(--navy-deep)}
.seg-pill{
position:absolute;z-index:1;top:4px;bottom:4px;left:4px;
width:calc(50% - 4px);border-radius:var(--rf);background:#fff;
transition:transform .45s var(--ease);
}
.seg.is-2 .seg-pill{transform:translateX(100%)}
/* le total change de valeur : on l'accompagne, on ne le fait pas sauter */
.sim-total{transition:opacity .25s var(--ease),transform .25s var(--ease)}
.sim-total.swap{opacity:0;transform:translateY(6px)}
.sim-total.gain{color:#8FBBFF}
/* la ligne de projection : deux montants et la flèche entre les deux */
.sim-hyp{display:flex;flex-wrap:wrap;gap:var(--s6);margin-top:var(--s4)}
.sim-hyp span{
font-size:11.5px;font-weight:500;color:rgba(255,255,255,.6);
border:1px solid var(--line-d);border-radius:var(--rf);padding:4px 10px;
}
@media (max-width:420px){ .seg button{padding:8px 12px;font-size:12.5px} }
/* les trois leviers, avant -> après : c'est la démonstration, elle doit se lire d'un trait */
/* la table de projection est bâtie avec .srow — voir le bloc 57 */
/* ==========================================================================
16. TÉMOIGNAGES VIDÉO — un éventail, pas une rangée
Cinq cartes verticales disposées en arc : celle du centre est droite et
plus grande, les autres s'inclinent et descendent à mesure qu'elles
s'éloignent. Au survol, une carte se redresse et passe devant.
========================================================================== */
.vwall{
display:flex;justify-content:center;align-items:flex-start;
gap:clamp(-30px,-2.4vw,-10px);
padding-top:var(--s24);
perspective:1400px;
}
.vcard{
flex:none;width:clamp(150px,15.5vw,210px);
transform-origin:50% 100%;
transform:rotate(var(--r,0deg)) translateY(var(--y,0)) scale(var(--s,1));
transition:transform .6s var(--ease),filter .6s var(--ease);
filter:brightness(var(--b,1));
z-index:var(--z,1);
display:grid;gap:var(--s10);
}
/* l'arc : plus on s'éloigne du centre, plus la carte s'incline et descend */
.vcard:nth-child(1){--r:-11deg;--y:62px;--s:.84;--b:.72;--z:1}
.vcard:nth-child(2){--r:-5.5deg;--y:24px;--s:.92;--b:.86;--z:2}
.vcard:nth-child(3){--r:0deg;--y:0px;--s:1;--b:1;--z:3}
.vcard:nth-child(4){--r:5.5deg;--y:24px;--s:.92;--b:.86;--z:2}
.vcard:nth-child(5){--r:11deg;--y:62px;--s:.84;--b:.72;--z:1}
.vwall:hover .vcard{filter:brightness(.6)}
.vcard:hover{
--r:0deg!important;--y:-14px!important;--s:1.07!important;
filter:brightness(1.08)!important;z-index:9!important;
}
.vcard-media{
position:relative;aspect-ratio:9/16;border-radius:var(--r20);overflow:hidden;
border:1px solid rgba(255,255,255,.12);
background:linear-gradient(165deg,#1B4F9E,#0B1A2A);
box-shadow:0 26px 60px -24px rgba(4,11,20,.9), inset 0 1px 0 rgba(255,255,255,.10);
cursor:pointer;
}
.vcard-media img{width:100%;height:100%;object-fit:cover}
.vcard-media::after{content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(7,19,32,0) 42%,rgba(7,19,32,.84))}
.vcard-play{
position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.94);color:var(--navy-deep);font-size:14px;
box-shadow:0 8px 24px rgba(7,19,32,.5);
transition:transform .35s var(--ease);
}
.vcard-media:hover .vcard-play{transform:scale(1.1)}
.vcard-media.is-soon{cursor:default}
.vcard-media.is-soon .vcard-play{
width:auto;height:auto;padding:6px 13px;border-radius:var(--rf);
font-size:10.5px;font-weight:500;background:rgba(255,255,255,.14);
color:rgba(255,255,255,.9);border:1px solid var(--line-d2);box-shadow:none;
}
/* la citation vit SUR la carte, pas en dessous : le bloc reste graphique */
.vcard-q{
position:absolute;left:var(--s12);right:var(--s12);bottom:var(--s12);z-index:2;
margin:0;font-size:11.5px;line-height:1.35;color:#fff;
text-shadow:0 2px 12px rgba(4,11,20,.9);
opacity:0;transform:translateY(6px);
transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.vcard:hover .vcard-q{opacity:1;transform:none}
.vcard-by{
display:flex;align-items:center;gap:var(--s8);justify-content:center;
padding-top:0;border:0;
}
.vcard-by::before{content:'';width:14px;height:1px;background:var(--blue);flex:none}
.vcard-by .t-small{font-size:10.5px}
@media (max-width:900px){
.vwall{
display:grid;grid-auto-flow:column;grid-auto-columns:min(66vw,240px);
gap:var(--s12);overflow-x:auto;scroll-snap-type:x proximity;
perspective:none;padding-inline:var(--gut);
margin-inline:calc(var(--gut) * -1);scroll-padding-inline-start:var(--gut);
}
.vwall::-webkit-scrollbar{display:none}
.vcard{width:auto;scroll-snap-align:start;transform:none!important;filter:none!important}
.vcard-q{position:static;opacity:1;transform:none;color:var(--ink);text-shadow:none;font-size:13px}
.vwall:hover .vcard{filter:none}
}
/* ==========================================================================
17. LA COUCHE DE FINITION
Rien ne change dans la structure ni dans le copy. Tout se joue ici :
la matière, la profondeur, et la façon dont les choses arrivent.
========================================================================== */
/* --- 17.1 Révélation mot à mot des titres -------------------------------
C'est le signal le plus net d'un site cher : un titre n'apparaît pas,
il se pose. Flou + montée + décalage de 42 ms par mot. */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;
padding-bottom:.16em;margin-bottom:-.16em}
.w > i{
display:inline-block;font-style:inherit;font-weight:inherit;
transform:translateY(105%) rotate(2deg);filter:blur(5px);opacity:0;
transition:transform .82s cubic-bezier(.16,1,.3,1),
filter .62s cubic-bezier(.16,1,.3,1),
opacity .62s cubic-bezier(.16,1,.3,1);
transition-delay:var(--d,0ms);
}
.in .w > i, .w.in > i{transform:none;filter:blur(0);opacity:1}
/* --- 17.2 Grain : la texture qui enlève l'aspect « aplat écran » -------- */
body::after{
content:'';position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.028;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* --- 17.3 Les rideaux : les sections sombres montent par-dessus le clair
Le bord franc faisait « deux blocs collés ». Un coin arrondi qui recouvre
la section précédente crée la profondeur qu'il cherchait. */
.band--dark{
border-radius:clamp(20px,3vw,40px) clamp(20px,3vw,40px) 0 0;
margin-top:calc(clamp(20px,3vw,40px) * -1);
box-shadow:0 -30px 60px -30px rgba(7,16,27,.5);
}
#cta{border-radius:clamp(20px,3vw,40px) clamp(20px,3vw,40px) 0 0}
/* la section qui précède un rideau doit respirer davantage : sinon la dernière
ligne de texte vient toucher le bord sombre */
.band:has(+ .band--dark){padding-bottom:calc(var(--sec) + clamp(24px,4vw,52px))}
@supports not selector(:has(*)){
#voix,#modele{padding-bottom:calc(var(--sec) + clamp(24px,4vw,52px))}
}
/* halo froid au sommet du rideau : la lumière semble venir de derrière */
.band--dark::after{
content:'';position:absolute;inset:0;pointer-events:none;
border-radius:inherit;
/* la lueur descend de -14 % : calée sur 0 %, son bord supérieur coïncidait
avec le raccord des sections et le soulignait */
background:radial-gradient(120% 62% at 50% -14%,rgba(59,125,240,.16),transparent 62%);
}
.band--dark > .wrap{position:relative;z-index:2}
/* --- 17.4 Les cartes se soulèvent ------------------------------------- */
.ui-card,.quote,.vcard-media,.hero-stat{
transition:transform .5s var(--ease),box-shadow .5s var(--ease),
border-color .5s var(--ease);
}
.ui-card:hover,.quote:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--line-2)}
.vcard-media:hover{transform:translateY(-4px);box-shadow:var(--sh3)}
.hero-stat:hover{transform:translateY(-3px);border-color:var(--line-d2);background:rgba(255,255,255,.06)}
/* --- 17.5 Boutons magnétiques + reflet au survol ----------------------- */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn::before{
content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.24) 50%,transparent 62%);
transform:translateX(-120%);transition:transform .8s var(--ease);
}
.btn:hover::before{transform:translateX(120%)}
.btn--light::before{background:linear-gradient(105deg,transparent 38%,rgba(11,22,34,.10) 50%,transparent 62%)}
/* --- 17.6 Chiffres : chasse fixe, ils ne doivent jamais sautiller ------ */
.hero-stat b,.sim-total,.srow-val,.note-res b{font-variant-numeric:tabular-nums}
/* --- 17.7 Typographie : équilibrage des lignes et césure propre -------- */
.t-hero,.t-h2,.t-h3,.quote p,.spot-q{text-wrap:balance}
.t-lead,.t-body{text-wrap:pretty}
html{hyphens:none}
/* --- 17.8 États de focus visibles — c'est aussi un signe de finition --- */
:where(a,button,summary,input,[tabindex]):focus-visible{
outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;
}
.on-dark :where(a,button,summary,input):focus-visible{outline-color:#8FBBFF}
/* --- 17.9 Le curseur dit ce qui est cliquable ------------------------- */
.cf-card,.vcard-media:not(.is-soon),.seg button{cursor:pointer}
/* --- 17.10 On respecte ceux qui coupent les animations ----------------- */
@media (prefers-reduced-motion:reduce){
.w > i{transform:none!important;filter:none!important;opacity:1!important}
.btn::before{display:none}
.ui-card:hover,.quote:hover,.vcard-media:hover,.hero-stat:hover{transform:none}
}
/* --- 17.11 Détails qui ne se voient pas mais qui se sentent ------------- */
/* la citation démarre sur son guillemet, pas sur son retrait */
.vcard-q,.quote p{hanging-punctuation:first}
/* la barre de défilement fait partie du décor */
@supports (scrollbar-color: auto){
html{scrollbar-color:rgba(11,22,34,.22) transparent;scrollbar-width:thin}
}
/* les curseurs du simulateur : la poignée réagit sous le doigt */
.sim-field input[type=range]::-webkit-slider-thumb{
transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.sim-field input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.sim-field input[type=range]:active::-webkit-slider-thumb{
transform:scale(1.2);cursor:grabbing;box-shadow:0 0 0 8px rgba(59,125,240,.18);
}
/* la ligne du curseur se teinte à gauche de la poignée */
.sim-field{position:relative}
.sim-field input[type=range]{
background:linear-gradient(90deg,var(--blue) var(--p,0%),rgba(255,255,255,.16) var(--p,0%));
}
/* l'accordéon s'ouvre au lieu de sauter */
.faq details[open] .faq-a{animation:ouvre .5s var(--ease) both}
@keyframes ouvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq summary{transition:color .25s var(--ease)}
.faq summary:hover{color:var(--blue)}
/* le lien du menu : le point actif grandit au lieu d'apparaître */
.nav-links a{position:relative}
.nav-links a::after{
content:'';position:absolute;left:50%;bottom:3px;translate:-50% 0;
width:0;height:2px;border-radius:2px;background:var(--blue);
transition:width .35s var(--ease);
}
.nav-links a.on::after{width:14px}
.nav.over-dark .nav-links a.on::after{background:#8FBBFF}
/* la carte client active se détache franchement des autres */
.cf-card{transition:transform .6s var(--ease),opacity .6s var(--ease),
filter .6s var(--ease),box-shadow .6s var(--ease)}
/* le pied de page ferme proprement sous le rideau sombre */
footer{background:var(--navy);color:rgba(255,255,255,.55);border-top:0}
footer img{filter:brightness(0) invert(1);opacity:.8}
footer .t-xs{color:rgba(255,255,255,.45)}
/* --- 17.12 Les grilles internes doivent pouvoir rétrécir ----------------
Un enfant de grille a min-width:auto par défaut : il refuse de passer sous
la largeur de son texte et pousse tout le bloc hors de l'écran. */
.ui,.ui *,.ui-metric,.ui-metric *{min-width:0}
@media (max-width:560px){
.ui > div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
.ui{padding:var(--s20)}
}
/* ==========================================================================
18. L'OUVERTURE — on entre dans le site en traversant le logo
Reproduction en natif du geste de la landing GTA VI : une plaque navy
percée à la forme du lettrage, dont le trou grandit au scroll jusqu'à
engloutir l'écran. Zéro dépendance, zéro bibliothèque d'animation.
========================================================================== */
.ouv{position:relative;height:320vh;background:var(--navy-deep)}
/* voile navy de fin de plan : le raccord avec le hero ne se voit pas */
.ouv-scene{position:sticky;top:0;height:100vh;overflow:hidden}
/* le plan de fond : une image, légèrement poussée pour donner de la profondeur */
.ouv-fond{
position:absolute;inset:-6%;
background:url(../assets/img/photos/band-appel.webp) center/cover no-repeat;
transform:scale(var(--z,1.14));
transition:transform .1s linear;
will-change:transform;
}
.ouv-scene::after{ /* vignette : le regard reste au centre */
content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
background:radial-gradient(120% 90% at 50% 45%,transparent 30%,rgba(6,14,22,.78) 100%);
}
/* la plaque percée : deux masques, l'un plein, l'autre en forme de lettres,
combinés en « exclusion » — c'est ce qui creuse le trou. */
.ouv-voile{
position:absolute;inset:0;z-index:3;background:var(--navy-deep);
--taille:34vw;
-webkit-mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,");
mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,");
-webkit-mask-size:100% 100%,var(--taille) auto;
mask-size:100% 100%,var(--taille) auto;
-webkit-mask-position:center,center;
mask-position:center,center;
-webkit-mask-repeat:no-repeat,no-repeat;
mask-repeat:no-repeat,no-repeat;
-webkit-mask-composite:xor;
mask-composite:exclude;
will-change:mask-size;
}
@media (max-width:760px){ .ouv-voile{--taille:76vw} }
.ouv-bas{
position:absolute;left:0;right:0;bottom:clamp(24px,5vh,54px);z-index:4;
display:grid;justify-items:center;gap:var(--s12);
opacity:var(--hint,1);transition:opacity .4s var(--ease);
}
.ouv-hint{
font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
color:rgba(255,255,255,.62);
}
.ouv-hint::after{
content:'';display:block;width:1px;height:26px;margin:10px auto 0;
background:linear-gradient(rgba(255,255,255,.55),transparent);
animation:filet 1.9s ease-in-out infinite;
}
@keyframes filet{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}
/* la barre de menu n'apparaît qu'une fois l'ouverture traversée */
.nav{opacity:0;pointer-events:none;transform:translate(-50%,-14px)}
.nav.vu{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
@media (max-width:860px){
.nav{transform:translateY(-14px)}
.nav.vu{transform:none}
}
/* sans JavaScript ou en mouvement réduit, l'ouverture reste une belle image fixe */
@media (prefers-reduced-motion:reduce){
.ouv{height:100vh}
.ouv-voile{--taille:34vw}
.ouv-hint::after{animation:none}
}
html:not(.anim) .ouv{height:100vh}
html:not(.anim) .nav{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
/* ====== ce qui vient de la passe cinéma et qu'on garde : la page d'accueil ====== */
/* ==========================================================================
18. L'OUVERTURE — on entre dans le site en traversant le logo
Reproduction en natif du geste de la landing GTA VI : une plaque navy
percée à la forme du lettrage, dont le trou grandit au scroll jusqu'à
engloutir l'écran. Zéro dépendance, zéro bibliothèque d'animation.
========================================================================== */
.ouv{position:relative;height:320vh;background:var(--navy-deep)}
.ouv-scene{position:sticky;top:0;height:100vh;overflow:hidden}
/* le plan de fond : une image, légèrement poussée pour donner de la profondeur */
/* plus de photo intermédiaire : derrière les lettres, il y a le hero — et il est
déjà en place, sinon on ne verrait qu'un aplat à travers le lettrage. */
.ouv-scene .rv{opacity:1!important;transform:none!important}
.ouv-scene .w > i{transform:none!important;filter:none!important;opacity:1!important}
.ouv-scene::after{ /* vignette : le regard reste au centre */
z-index:2;
content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
background:radial-gradient(130% 100% at 50% 45%,transparent 45%,rgba(6,14,22,.55) 100%);
opacity:calc(1 - var(--fin,0));
}
/* la plaque percée : deux masques, l'un plein, l'autre en forme de lettres,
combinés en « exclusion » — c'est ce qui creuse le trou. */
.ouv-voile{
position:absolute;inset:0;z-index:3;background:#040B14;
--taille:34vw;
-webkit-mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,");
mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,");
-webkit-mask-size:100% 100%,var(--taille) auto;
mask-size:100% 100%,var(--taille) auto;
-webkit-mask-position:center,center;
mask-position:center,center;
-webkit-mask-repeat:no-repeat,no-repeat;
mask-repeat:no-repeat,no-repeat;
-webkit-mask-composite:xor;
mask-composite:exclude;
/* En grandissant, ce sont les intervalles ENTRE les lettres qui subsistent :
l'échelle seule ne fait jamais disparaître la plaque. Elle se dissout donc
sur la fin de la course. */
opacity:var(--voile,1);
will-change:mask-size,opacity;
}
@media (max-width:760px){ .ouv-voile{--taille:76vw} }
/* Le logo est PLEIN et BLANC à l'arrêt. Dès que le scroll démarre, ce calque
s'efface et les mêmes lettres deviennent la fenêtre sur le site. Il partage
la taille du masque, donc le raccord est exact au pixel. */
.ouv-marque{
position:absolute;inset:0;z-index:4;pointer-events:none;background:#fff;
-webkit-mask-image:url("data:image/svg+xml,");
mask-image:url("data:image/svg+xml,");
-webkit-mask-size:var(--taille,34vw) auto;
mask-size:var(--taille,34vw) auto;
-webkit-mask-position:center; mask-position:center;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
opacity:var(--marque,1);
}
.ouv-bas{
position:absolute;left:0;right:0;bottom:clamp(24px,5vh,54px);z-index:4;
display:grid;justify-items:center;gap:var(--s12);
opacity:var(--hint,1);transition:opacity .4s var(--ease);
}
.ouv-hint{
font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.66);text-align:center;
}
.ouv-hint::after{
content:'';display:block;width:1px;height:26px;margin:10px auto 0;
background:linear-gradient(rgba(255,255,255,.55),transparent);
animation:filet 1.9s ease-in-out infinite;
}
@keyframes filet{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}
/* --- l'invitation à descendre -------------------------------------------
Un filet d'un pixel qui respire, personne ne le lit comme « fais défiler ».
Ici : la molette avec sa bille qui tombe, et le chevron qui acquiesce en
dessous. C'est le seul signe que tout le monde reconnaît sans légende. */
.ouv-hint::after{display:none}
.ouv-molette{display:grid;justify-items:center;gap:8px;margin-top:var(--s10)}
.ouv-souris{
position:relative;display:block;width:23px;height:36px;border-radius:12px;
box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.5);
}
.ouv-souris b{
position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;
background:rgba(255,255,255,.9);transform:translateX(-50%);
animation:bille 2.1s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes bille{
0% {transform:translate(-50%,0);opacity:0}
18% {opacity:1}
62% {transform:translate(-50%,15px);opacity:1}
86%,100%{transform:translate(-50%,15px);opacity:0}
}
.ouv-chev{
width:17px;height:17px;fill:none;stroke:rgba(255,255,255,.62);
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
animation:chev 2.1s ease-in-out infinite;
}
@keyframes chev{
0%,100%{transform:translateY(-2px);opacity:.35}
55% {transform:translateY(2px);opacity:.85}
}
@media (max-width:900px){
/* pas de molette sur un téléphone : le chevron seul dit la même chose */
.ouv-souris{display:none}
.ouv-chev{width:20px;height:20px;stroke-width:1.9}
}
@media (prefers-reduced-motion:reduce){
.ouv-souris b,.ouv-chev{animation:none}
}
/* la barre de menu n'apparaît qu'une fois l'ouverture traversée */
.nav{opacity:0;pointer-events:none;transform:translateY(-14px)}
.nav.vu{opacity:1;pointer-events:auto;transform:none}
/* sans JavaScript ou en mouvement réduit, l'ouverture reste une belle image fixe */
@media (prefers-reduced-motion:reduce){
.ouv{height:100vh}
.ouv-voile{--taille:34vw}
.ouv-hint::after{animation:none}
}
html:not(.anim) .ouv{height:100vh}
html:not(.anim) .nav{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
/* ==========================================================================
20. LES CHIFFRES EN BENTO
Référence : stats-bento. Une dominante sombre à texture rayée, trois
satellites clairs de tailles inégales. La hiérarchie fait le travail.
========================================================================== */
.bento{
display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s12);
margin-top:var(--s48);
}
.bento > *{
border-radius:var(--r20);border:1px solid var(--line-d);
background:rgba(255,255,255,.045);padding:var(--s24);
transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.bento > *:hover{transform:translateY(-3px);border-color:var(--line-d2);background:rgba(255,255,255,.07)}
/* la dominante : plus grande, plus sombre, et texturée en diagonale */
.bento-a{
grid-column:span 7;grid-row:span 2;position:relative;overflow:hidden;
display:grid;align-content:space-between;gap:var(--s20);
background:linear-gradient(155deg,#0E2338,#071320);
border-color:rgba(255,255,255,.10);
padding:var(--s32);
}
.bento-a::after{ /* les rayures, très discrètes */
content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
background:repeating-linear-gradient(115deg,
rgba(255,255,255,.045) 0 1px, transparent 1px 13px);
}
.bento-a > *{position:relative;z-index:2}
.bento-a b{font-size:clamp(44px,6.4vw,86px);font-weight:600;letter-spacing:-.045em;line-height:.92;color:#fff}
.bento-a p{max-width:26ch}
.bento-chip{
justify-self:start;font-size:10.5px;font-weight:500;letter-spacing:.18em;
text-transform:uppercase;color:rgba(255,255,255,.72);
background:rgba(255,255,255,.10);border-radius:var(--rf);padding:6px 13px;
}
.bento-lab{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.5)}
.bento-b{grid-column:span 5;display:grid;gap:var(--s16);align-content:center}
.bento-b-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s20)}
.bento-b b{font-size:clamp(30px,3.6vw,46px);font-weight:600;letter-spacing:-.04em;line-height:1;color:#fff}
/* le petit graphe en bâtons de la carte « pôles pilotés » */
.spark{display:flex;align-items:flex-end;gap:3px;height:34px}
.spark i{width:4px;border-radius:2px;background:rgba(143,187,255,.55);display:block}
.bento-c{grid-column:span 5;display:grid;gap:var(--s6);align-content:center}
.bento-c b{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.04em;line-height:1;color:#fff}
.bento-d{grid-column:1/-1;display:flex;align-items:center;gap:var(--s16)}
.bento-d b{display:block;font-size:15px;font-weight:600;color:#fff;letter-spacing:-.02em}
.bento-pill{
flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
background:rgba(59,125,240,.20);border:1px solid rgba(143,187,255,.32);
color:#8FBBFF;font-size:15px;font-weight:600;letter-spacing:-.02em;
}
@media (max-width:820px){
.bento{gap:var(--s10)}
.bento-a{grid-column:1/-1;grid-row:auto}
.bento-b,.bento-c,.bento-d{grid-column:1/-1}
.bento-a{padding:var(--s24)}
}
/* --- le badge de preuve du hero : de vrais logos clients --------------- */
.tbadge{
display:inline-flex;align-items:center;gap:var(--s12);
padding:4px 15px 4px 4px;border-radius:var(--rf);
border:1px solid var(--line-d2);background:rgba(255,255,255,.05);
}
.tbadge-logos{display:flex;align-items:center}
.tbadge-logos img{
width:23px;height:23px;border-radius:50%;object-fit:cover;object-position:center 22%;
border:1.5px solid rgba(11,26,42,.92);margin-left:-8px;
box-shadow:0 2px 6px rgba(4,11,20,.5);
transition:transform .35s var(--ease),z-index .01s;
}
.tbadge-logos img:first-child{margin-left:0}
.tbadge-logos img:hover{transform:translateY(-2px) scale(1.1);z-index:2}
.tbadge-txt{font-size:11.5px;font-weight:500;color:rgba(255,255,255,.58);letter-spacing:-.005em}
@media (max-width:620px){
/* Le bandeau prenait toute la largeur et sa phrase partait sur deux lignes,
collée aux avatars. Il se resserre : pastilles plus petites, texte plus
court à l'œil, et il ne s'étire plus que sur ce dont il a besoin. */
.tbadge{
padding:5px 14px 5px 5px;gap:9px;
max-width:100%;align-items:center;
}
.tbadge-logos img{width:19px;height:19px;margin-left:-6px;border-width:1.5px}
/* min-width:0 — sans ça un enfant de flex refuse de rétrécir sous la largeur
de son texte, et la pastille sort de l'écran au lieu de passer à la ligne. */
.tbadge-txt{font-size:11px;line-height:1.3;text-align:left;min-width:0}
.tbadge-logos{flex:none}
}
/* ==========================================================================
21. LA LIGNE DE SCAN — le logo est vivant avant même qu'on scrolle
Référence : hero-futuristic. La bande lumineuse est posée SOUS la plaque :
elle n'est donc visible qu'à travers les lettres.
========================================================================== */
.ouv-scan{
position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
/* le balayage n'existe que pour animer le lettrage : il s'éteint avec la plaque */
opacity:var(--voile,1);
background:linear-gradient(180deg,
transparent 0%, rgba(143,187,255,0) 42%,
rgba(143,187,255,.55) 50%, rgba(255,255,255,.75) 51%,
rgba(143,187,255,.55) 52%, rgba(143,187,255,0) 60%, transparent 100%);
background-size:100% 260%;
animation:balayage 4.2s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes balayage{
0%,12% {background-position:0 -130%}
62%,100% {background-position:0 130%}
}
@media (prefers-reduced-motion:reduce){ .ouv-scan{animation:none;opacity:.25} }
/* ==========================================================================
22. LE CURSEUR MAGNÉTIQUE
Référence : magnetic-cursor. Un point qui colle au pointeur, un anneau qui
traîne derrière et s'ouvre au survol de ce qui est cliquable.
========================================================================== */
.curseur{position:fixed;inset:0;z-index:95;pointer-events:none;display:none}
@media (hover:hover) and (pointer:fine){
.curseur{display:block}
html.curseur-perso, html.curseur-perso *{cursor:none!important}
}
.curseur i,.curseur b{
position:absolute;left:0;top:0;border-radius:50%;
transform:translate(-50%,-50%);will-change:transform;
}
/* Le point du curseur : BLANC sur le bleu nuit — il y était bleu sur bleu et
disparaissait — et BLEU dès qu'on entre sur une section blanche, où le
blanc s'effacerait à son tour. */
.curseur i{
width:6px;height:6px;background:#fff;
box-shadow:0 0 0 1px rgba(10,24,38,.30),0 0 8px rgba(255,255,255,.55);
}
.curseur b{
width:34px;height:34px;border:1px solid rgba(255,255,255,.55);
transition:width .3s var(--ease),height .3s var(--ease),
border-color .3s var(--ease),background .3s var(--ease);
}
html.sur-clair .curseur i{
background:var(--bleu,#3B7DF0);
box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 10px rgba(59,125,240,.45);
}
html.sur-clair .curseur b{border-color:rgba(31,95,206,.42)}
html.sur-clair.curseur-actif .curseur b{background:rgba(59,125,240,.10);border-color:#1F5FCE}
html.curseur-actif .curseur b{width:56px;height:56px;background:rgba(59,125,240,.10);border-color:var(--blue)}
@media (prefers-reduced-motion:reduce){ .curseur{display:none!important} }
/* la barre n'entre en scène qu'une fois l'ouverture traversée */
.nav{opacity:0;pointer-events:none;transform:translateY(-14px)}
.nav.vu{opacity:1;pointer-events:auto;transform:none}
html:not(.anim) .nav{opacity:1;pointer-events:auto;transform:none}
/* ==========================================================================
23. LA MATIÈRE — relevé sur lagenced2s.com
Ce qui sépare « propre » de « cher » n'est pas la mise en page, c'est le
traitement des surfaces. Mesuré sur le site de Salim :
· 77 éléments en blur(16px) -> il y a de la lumière partout
· 27 en backdrop-blur(8px) -> le verre n'est pas réservé au menu
· 36 avec une lueur d'accent 0 0 6-12px
· 22 ombres à DEUX couches + un liseré clair en inset
· une majorité de textes entre 9 et 14 px
========================================================================== */
:root{
/* ombres à deux couches, plus le liseré de lumière sur l'arête haute */
--sh1:0 1px 2px rgba(11,22,34,.05),
inset 0 1px 0 rgba(255,255,255,.92);
--sh2:0 8px 22px -6px rgba(11,22,34,.16), 0 2px 6px rgba(11,22,34,.05),
inset 0 1px 0 rgba(255,255,255,.92);
--sh3:0 22px 48px -14px rgba(11,22,34,.24), 0 4px 12px rgba(11,22,34,.07),
inset 0 1px 0 rgba(255,255,255,.92);
/* la lueur d'accent : c'est elle qui fait « allumé » */
--lum:0 0 12px rgba(59,125,240,.42);
--lum-fort:0 0 20px rgba(59,125,240,.55);
}
/* --- 23.1 Les surfaces sombres portent leur propre liseré --------------- */
.on-dark .ui-card,.on-dark .ui-metric,.bento > *,.sim-out,.hero-stat,.slots,.tbadge,.seg{
box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 30px -12px rgba(4,11,20,.6);
backdrop-filter:blur(8px);
}
/* --- 23.2 Les objets d'accent émettent de la lumière -------------------- */
.ui-icon,.bento-pill,.cf-dots button.on,.btn--blue,
.ba-col--after .t-eyebrow,.tbadge-logos{position:relative}
.ui-icon{box-shadow:var(--lum)}
.on-dark .ui-icon{box-shadow:var(--lum-fort)}
.bento-pill{box-shadow:var(--lum-fort), inset 0 1px 0 rgba(255,255,255,.14)}
.cf-dots button.on{box-shadow:var(--lum)}
.ui-track i{box-shadow:0 0 8px rgba(59,125,240,.5)}
.sim-field input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 0 rgba(59,125,240,0),0 0 14px rgba(59,125,240,.55)}
.spark i{box-shadow:0 0 6px rgba(143,187,255,.45)}
.sim-total.gain{text-shadow:0 0 26px rgba(59,125,240,.55)}
.bento-a b{text-shadow:0 0 34px rgba(78,148,255,.35)}
/* --- 23.3 De la lumière derrière les sections claires aussi ------------- */
.band:not(.band--dark)::after{
content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(46% 34% at 12% 8%,rgba(59,125,240,.055),transparent 70%),
radial-gradient(38% 30% at 92% 82%,rgba(59,125,240,.045),transparent 72%);
}
.band > .wrap{position:relative;z-index:1}
/* --- 23.4 Le verre s'étend aux cartes claires --------------------------- */
.ui-card,.ui-metric,.quote,.vcard-media{
backdrop-filter:blur(6px);
background-color:rgba(255,255,255,.86);
}
/* :not(.ui--plain) — sans ça, ces reprises de fond, écrites plus bas dans la
feuille, redonnaient un panneau à la carte déclarée sans panneau */
.ui:not(.ui--plain){background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(245,247,249,.75))}
/* --- 23.5 Les micro-libellés : plus petits, plus espacés, plus nombreux -
Le relevé montre une majorité de textes entre 9 et 14 px. Nos étiquettes
étaient trop grosses pour donner cette impression de densité maîtrisée. */
.t-xs{font-size:11.5px;letter-spacing:.005em}
.t-eyebrow{font-size:10px;letter-spacing:.2em}
.ui-chip i{font-size:10px}
.bento-lab{font-size:10px;letter-spacing:.18em}
.cn-eyebrow,.tbadge-txt{font-size:11.5px}
.sim-leak-top{font-size:13px}
/* --- 23.6 Les boutons ont du relief ------------------------------------ */
.btn{box-shadow:0 6px 18px -6px rgba(11,22,34,.45), inset 0 1px 0 rgba(255,255,255,.14)}
.btn--light{box-shadow:0 8px 22px -6px rgba(4,11,20,.5), inset 0 1px 0 rgba(255,255,255,.9)}
.btn:hover{box-shadow:0 12px 30px -8px rgba(11,22,34,.5), inset 0 1px 0 rgba(255,255,255,.18)}
/* ==========================================================================
24. LA DENSITÉ DU HERO — d'après lagenced2s.com
Son hero empile huit strates de micro-preuve là où le mien en avait quatre.
C'est cette densité maîtrisée qui fait la différence, pas la taille du titre.
========================================================================== */
/* ==========================================================================
26. LA MISE EN PLACE DU SYSTÈME
Les quatre pièces s'installent UNE FOIS et restent en place — elles ne
doivent jamais disparaître. Ce qui tourne en boucle ensuite, c'est le
système EN MARCHE : le balayage, les icônes qui s'allument à tour de rôle,
les filets qui pulsent. Le montage se fait une fois, la vie continue.
========================================================================== */
#install{background:none;border:0;padding:0} /* plus de cadre autour : les pièces flottent */
.pose{--T:7s;position:relative}
/* --- l'installation : une seule fois, sans retour en arrière ------------ */
.pose .ui-card{
position:relative;
opacity:0;transform:translate(var(--dx),20px) scale(.94);filter:blur(7px);
}
.pose.joue .ui-card{
animation:poseCarte .95s cubic-bezier(.16,1,.3,1) forwards;
}
.pose .ui-card:nth-child(2){--dx:-38px}
.pose.joue .ui-card:nth-child(2){animation-delay:.05s}
.pose .ui-card:nth-child(3){--dx: 38px}
.pose.joue .ui-card:nth-child(3){animation-delay:.45s}
.pose .ui-card:nth-child(4){--dx:-38px}
.pose.joue .ui-card:nth-child(4){animation-delay:.85s}
.pose .ui-card:nth-child(5){--dx: 38px}
.pose.joue .ui-card:nth-child(5){animation-delay:1.25s}
@keyframes poseCarte{
0% {opacity:0;transform:translate(var(--dx),20px) scale(.94);filter:blur(7px)}
70% {opacity:1;transform:translateY(-3px) scale(1);filter:blur(0)}
100%{opacity:1;transform:none;filter:blur(0)}
}
/* --- le filet entre deux pièces : tracé une fois, puis il pulse --------- */
.pose .ui-card + .ui-card::before{
content:'';position:absolute;left:50%;top:-13px;width:1.5px;height:13px;
background:linear-gradient(var(--blue),rgba(59,125,240,.18));
transform-origin:top center;transform:scaleY(0);
box-shadow:0 0 6px rgba(59,125,240,.5);
}
.pose.joue .ui-card + .ui-card::before{
animation:poseFil .5s ease-out forwards, filPulse var(--T) ease-in-out infinite 2s;
}
.pose.joue .ui-card:nth-child(3)::before{animation-delay:.35s, 2s}
.pose.joue .ui-card:nth-child(4)::before{animation-delay:.75s, 2.15s}
.pose.joue .ui-card:nth-child(5)::before{animation-delay:1.15s, 2.3s}
@keyframes poseFil{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes filPulse{
0%,70%,100%{opacity:.45}
78% {opacity:1;box-shadow:0 0 12px rgba(59,125,240,.9)}
}
/* --- les icônes s'allument à tour de rôle, indéfiniment ----------------- */
.pose.joue .ui-icon{animation:poseIcone var(--T) ease-out infinite}
.pose.joue .ui-card:nth-child(2) .ui-icon{animation-delay:1.6s}
.pose.joue .ui-card:nth-child(3) .ui-icon{animation-delay:1.85s}
.pose.joue .ui-card:nth-child(4) .ui-icon{animation-delay:2.1s}
.pose.joue .ui-card:nth-child(5) .ui-icon{animation-delay:2.35s}
@keyframes poseIcone{
0%,88%,100%{box-shadow:var(--lum);transform:scale(1)}
93% {box-shadow:0 0 0 7px rgba(59,125,240,.16),0 0 22px rgba(59,125,240,.65);transform:scale(1.06)}
}
/* --- le balayage : le système tourne ------------------------------------ */
.pose-socle{
position:absolute;inset:-10px -16px;z-index:0;pointer-events:none;
border-radius:var(--r24);overflow:hidden;
}
.pose-socle::after{
content:'';position:absolute;left:0;right:0;height:38%;
background:linear-gradient(180deg,transparent,rgba(59,125,240,.13),transparent);
top:-40%;
}
.pose.joue .pose-socle::after{animation:poseBalayage var(--T) cubic-bezier(.5,0,.4,1) infinite 2s}
@keyframes poseBalayage{
0%,55% {top:-40%;opacity:0}
60% {opacity:1}
92% {top:100%;opacity:1}
96%,100%{top:100%;opacity:0}
}
@media (prefers-reduced-motion:reduce){
.pose .ui-card{opacity:1;transform:none;filter:none;animation:none!important}
.pose .ui-card + .ui-card::before{transform:scaleY(1);animation:none!important}
.pose .ui-icon{animation:none!important}
.pose-socle{display:none}
}
/* ==========================================================================
27. LES ACTES — à partir du constat, chaque section recouvre la précédente
Le principe de la landing GTA : on ne défile pas d'un bloc à l'autre, la
section suivante MONTE PAR-DESSUS pendant que la précédente recule.
Le fond reste peint par la section elle-même : aucune transparence possible.
========================================================================== */
#preuve > .wrap,#methode > .wrap,#chiffres > .wrap,#equipe > .wrap{
transform:none!important;filter:none!important;
}
/* Les coins arrondis et le décalage négatif venaient d'ici. Depuis, chaque
section est une SCÈNE épinglée qui se pose en fondu sur la précédente : une
plaque arrondie qui dépasse par-dessus ne veut plus rien dire, et sur une
section blanche elle laissait une barre grise en travers de l'écran. */
#constat,#preuve,#methode,#voix,#simulateur,#equipe,#modele,#faq,#cta{
position:relative;z-index:1;
border-radius:0;margin-top:0;box-shadow:none;
}
/* La section arrive : son contenu monte de quelques pixels et se pose.
PLUS D'ASSOMBRISSEMENT en sortie — c'est lui qui faisait paraître les
titres gris au lieu de blancs, et qui creusait un écart de luminosité
entre deux sections voisines. */
#constat > .wrap,#preuve > .wrap,#methode > .wrap,#voix > .wrap,
#simulateur > .wrap,#equipe > .wrap,#modele > .wrap,#cta > .wrap,
#definition > .wrap,#chiffres > .wrap{
transform:translateY(var(--ty,0)) scale(var(--sc,1));
transform-origin:50% 0;
will-change:transform;
}
/* ==========================================================================
28. LES CARTES DU SYSTÈME — la superposition, puis le défilement
Les quatre pièces s'empilent l'une sur l'autre pendant qu'on scrolle,
au lieu de se poser toutes seules. C'est le scroll qui fait le montage.
========================================================================== */
/* (le comportement du paquet est décrit plus bas, bloc « les cartes du système ») */
/* --- les visages de l'équipe sur la carte des collaborateurs ------------ */
.bento-faces{display:flex;margin-bottom:var(--s10)}
.bento-faces img{
width:30px;height:30px;border-radius:50%;object-fit:cover;
border:2px solid rgba(14,35,56,.95);margin-left:-10px;
box-shadow:0 2px 8px rgba(4,11,20,.5);
opacity:0;transform:translateY(6px) scale(.8);
transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.bento-faces img:first-child{margin-left:0}
.bento-faces.on img{opacity:1;transform:none}
.bento-faces.on img:nth-child(2){transition-delay:.07s}
.bento-faces.on img:nth-child(3){transition-delay:.14s}
.bento-faces.on img:nth-child(4){transition-delay:.21s}
.bento-faces.on img:nth-child(5){transition-delay:.28s}
.bento-faces .plus{
display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
margin-left:-10px;border:2px solid rgba(14,35,56,.95);
background:rgba(59,125,240,.22);color:#8FBBFF;font-size:10px;font-weight:600;
box-shadow:var(--lum);
opacity:0;transform:translateY(6px) scale(.8);
transition:opacity .5s var(--ease) .35s,transform .5s var(--ease) .35s;
}
.bento-faces.on .plus{opacity:1;transform:none}
/* les bâtons du petit graphe poussent depuis le bas */
.spark i{height:0;transition:height .9s cubic-bezier(.16,1,.3,1)}
.spark.on i{height:var(--h)}
/* ==========================================================================
29. LA COURBE DE CROISSANCE
Elle se trace quand la bande entre à l'écran, puis elle brille par
intermittence — le chiffre n'est pas un état, c'est une progression.
========================================================================== */
.bento-a{position:relative;overflow:hidden}
.courbe{
position:absolute;inset:auto 0 0 0;z-index:1;
width:100%;height:74%;pointer-events:none;
}
.courbe-trait{
stroke-dasharray:1000;stroke-dashoffset:1000;
filter:drop-shadow(0 0 8px rgba(59,125,240,.7));
}
.courbe-aire{opacity:0}
.courbe-tete{opacity:0;filter:drop-shadow(0 0 10px rgba(143,187,255,.95))}
.courbe.on .courbe-trait{
animation:trace 2.4s cubic-bezier(.32,0,.2,1) forwards,
eclat 5.5s ease-in-out 2.6s infinite;
}
.courbe.on .courbe-aire{animation:aire 1.6s ease-out 1s forwards}
.courbe.on .courbe-tete{animation:tete .5s ease-out 2.3s forwards, pulseTete 5.5s ease-in-out 2.9s infinite}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes aire{to{opacity:1}}
@keyframes tete{to{opacity:1}}
@keyframes eclat{
0%,72%,100%{filter:drop-shadow(0 0 6px rgba(59,125,240,.55))}
82% {filter:drop-shadow(0 0 16px rgba(143,187,255,.95))}
}
@keyframes pulseTete{
0%,72%,100%{r:4.5;opacity:1}
82% {r:6.5;opacity:1}
}
/* le contenu de la carte reste au-dessus de la courbe */
.bento-a > *:not(.courbe){position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){
.courbe-trait{stroke-dashoffset:0;animation:none}
.courbe-aire,.courbe-tete{opacity:1;animation:none}
}
/* ==========================================================================
30. LE TABLEAU DE BORD DES PÔLES
Ce n'est pas le tableau d'un client : c'est l'interface de pilotage que
Striker installe, avec les indicateurs de sa propre méthode. Les valeurs
bougent en continu — c'est une interface vivante, pas un résultat affiché.
========================================================================== */
.bento-b{grid-column:span 5;grid-row:span 2;display:grid;gap:var(--s16);align-content:space-between}
.dash-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s12)}
.dash-live{
display:inline-flex;align-items:center;gap:6px;
font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
color:rgba(143,187,255,.8);
}
.dash-live i{
width:6px;height:6px;border-radius:50%;background:#4ADE80;
box-shadow:0 0 8px rgba(74,222,128,.9);
animation:battement 2.4s ease-in-out infinite;
}
@keyframes battement{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.dash-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s10)}
.dash-kpi{
display:grid;gap:5px;padding:var(--s12);border-radius:var(--r12);
border:1px solid var(--line-d);background:rgba(255,255,255,.035);
}
.dash-kpi span{font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.52)}
.dash-kpi b{
font-size:clamp(17px,1.9vw,22px);font-weight:600;letter-spacing:-.035em;color:#fff;
font-variant-numeric:tabular-nums;transition:color .5s var(--ease);
}
.dash-kpi b.monte{color:#8FBBFF}
.dash-bar{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.10);overflow:hidden}
.dash-bar i{
display:block;height:100%;border-radius:2px;width:var(--w,0%);
background:linear-gradient(90deg,rgba(59,125,240,.7),#8FBBFF);
box-shadow:0 0 8px rgba(59,125,240,.55);
transition:width 1.1s cubic-bezier(.16,1,.3,1);
}
.dash-graphe{padding-top:var(--s4)}
.dash-graphe .spark{height:52px;gap:4px}
.dash-graphe .spark i{width:auto;flex:1;max-width:14px;border-radius:3px 3px 0 0}
.dash-pied{display:flex;align-items:baseline;gap:var(--s10);padding-top:var(--s12);
border-top:1px solid var(--line-d)}
.dash-pied b{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.04em;line-height:1;color:#fff}
/* la troisième rangée reprend la largeur pleine */
.bento-c{grid-column:span 5}
.bento-d{grid-column:span 7}
@media (max-width:820px){
.bento-b{grid-column:1/-1;grid-row:auto}
.bento-c,.bento-d{grid-column:1/-1}
.dash-kpis{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){ .dash-live i{animation:none} }
/* ==========================================================================
31. L'ORGANIGRAMME — la structure qu'on installe chez le client
Les nœuds arrivent de haut en bas, les liens se tracent entre eux.
========================================================================== */
.bento-c{grid-column:span 6;display:grid;gap:var(--s16);align-content:start}
.orga-total{font-size:11px;color:rgba(255,255,255,.5)}
.orga-total b{font-size:13px;font-weight:600;color:#fff}
.orga{display:grid;justify-items:center;gap:0}
.orga-rang{display:flex;gap:var(--s12);justify-content:center}
.orga-noeud{
display:grid;justify-items:center;gap:5px;
padding:var(--s12) var(--s16);border-radius:var(--r12);
border:1px solid var(--line-d);background:rgba(255,255,255,.045);
opacity:0;transform:translateY(-10px) scale(.92);
transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.orga-noeud em{font-style:normal;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.82)}
.orga-noeud i{font-style:normal;font-size:11px;font-weight:600;color:#8FBBFF}
.orga-chef{box-shadow:inset 0 1px 0 rgba(255,255,255,.10), var(--lum)}
.orga-noeud img{width:26px;height:26px;border-radius:50%;object-fit:cover;
border:1.5px solid rgba(14,35,56,.9)}
.orga-faces{display:flex}
.orga-faces img{margin-left:-9px}
.orga-faces img:first-child{margin-left:0}
.orga-liens{width:min(100%,300px);height:34px;overflow:visible}
.orga-liens path{
fill:none;stroke:rgba(143,187,255,.45);stroke-width:1.4;
stroke-dasharray:400;stroke-dashoffset:400;
transition:stroke-dashoffset 1s var(--ease) .35s;
}
.orga.on .orga-noeud{opacity:1;transform:none}
.orga.on .orga-r2 .orga-noeud{transition-delay:.55s}
.orga.on .orga-r2 .orga-noeud:last-child{transition-delay:.7s}
.orga.on .orga-liens path{stroke-dashoffset:0}
/* ==========================================================================
32. LE COMPARATIF — le marché et nous, sur la même échelle
========================================================================== */
.bento-d{grid-column:span 6;display:grid;gap:var(--s16);align-content:start}
.compare{display:grid;gap:var(--s10)}
.compare-ligne{display:grid;grid-template-columns:74px 1fr 62px;align-items:center;gap:var(--s12)}
.compare-ligne > span{font-size:12.5px;color:rgba(255,255,255,.62)}
.compare-ligne > b{
font-size:15px;font-weight:600;color:rgba(255,255,255,.72);text-align:right;
font-variant-numeric:tabular-nums;
}
.compare-piste{display:block;height:9px;border-radius:var(--rf);background:rgba(255,255,255,.08);overflow:hidden}
.compare-piste i{
display:block;height:100%;width:0;border-radius:var(--rf);
background:rgba(255,255,255,.22);
transition:width 1.3s cubic-bezier(.16,1,.3,1);
}
.compare-nous > span{color:#fff;font-weight:500}
.compare-nous > b{color:#8FBBFF;font-size:17px}
.compare-nous .compare-piste i{
background:linear-gradient(90deg,rgba(59,125,240,.85),#8FBBFF);
box-shadow:0 0 14px rgba(59,125,240,.6);
}
.compare.on .compare-piste i{width:var(--w)}
.compare-ligne:nth-child(2) .compare-piste i{transition-delay:.14s}
.compare-nous .compare-piste i{transition-delay:.28s}
@media (max-width:820px){
.bento-c,.bento-d{grid-column:1/-1}
.compare-ligne{grid-template-columns:62px 1fr 58px}
}
/* le dirigeant coiffe la structure : il garde l'autorité, pas le management */
.orga-toi{
border-style:dashed;border-color:rgba(255,255,255,.22);
background:rgba(255,255,255,.025);box-shadow:none;
}
.orga-toi em{color:#fff}
.orga-toi i{color:rgba(255,255,255,.45);font-size:10px}
.orga-liens-haut{height:22px}
.orga.on .orga-r1 .orga-noeud{transition-delay:.3s}
.orga.on .orga-r2 .orga-noeud{transition-delay:.75s}
.orga.on .orga-r2 .orga-noeud:last-child{transition-delay:.9s}
.orga.on .orga-liens-haut path{transition-delay:.18s}
.orga.on .orga-liens:not(.orga-liens-haut) path{transition-delay:.6s}
/* ==========================================================================
33. L'ORGANIGRAMME EN LARGEUR
En hauteur, quatre étages faisaient une carte deux fois trop grande.
Le flux se lit maintenant de gauche à droite : dirigeant, Head of Sales,
puis la branche des deux métiers.
========================================================================== */
.bento-c{grid-column:span 7}
.orga{
display:flex;align-items:center;justify-content:center;
gap:0;flex-wrap:nowrap;
}
.orga-noeud{
display:grid;justify-items:center;gap:4px;flex:none;
padding:var(--s10) var(--s12);border-radius:var(--r12);
border:1px solid var(--line-d);background:rgba(255,255,255,.045);
opacity:0;transform:translateX(-10px) scale(.94);
transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.orga-noeud em{font-size:11px;white-space:nowrap}
.orga-noeud i{font-size:10.5px}
.orga-noeud img{width:22px;height:22px}
.orga-branche{display:grid;gap:var(--s8);flex:none}
.orga-lien-h{width:clamp(18px,3vw,34px);height:10px;flex:none}
.orga-lien-y{width:clamp(26px,4vw,44px);height:80px;flex:none}
.orga-lien-h path,.orga-lien-y path{
fill:none;stroke:rgba(143,187,255,.45);stroke-width:1.4;
stroke-dasharray:300;stroke-dashoffset:300;
transition:stroke-dashoffset .8s var(--ease);
}
.orga.on .orga-noeud{opacity:1;transform:none}
.orga.on .orga-chef{transition-delay:.3s}
.orga.on .orga-branche .orga-noeud{transition-delay:.7s}
.orga.on .orga-branche .orga-noeud:last-child{transition-delay:.82s}
.orga.on .orga-lien-h path{transition-delay:.18s;stroke-dashoffset:0}
.orga.on .orga-lien-y path{transition-delay:.55s;stroke-dashoffset:0}
@media (max-width:520px){
.orga{flex-wrap:wrap;justify-content:flex-start;gap:var(--s8)}
.orga-lien-h,.orga-lien-y{display:none}
.orga-branche{display:flex;gap:var(--s8)}
}
/* --- les deux chiffres complémentaires -------------------------------- */
.bento-e{grid-column:span 5;display:grid;gap:var(--s10);align-content:center}
.mini{display:grid;gap:2px}
.mini b{
font-size:clamp(24px,2.8vw,34px);font-weight:600;letter-spacing:-.04em;
line-height:1;color:#fff;font-variant-numeric:tabular-nums;
}
.mini-suf{font-size:10.5px;color:rgba(255,255,255,.45)}
/* --- le comparatif prend toute la largeur ------------------------------ */
.bento-d{grid-column:1/-1}
.bento-d .compare-ligne{grid-template-columns:92px 1fr 74px}
@media (max-width:820px){
.bento-c,.bento-e,.bento-d{grid-column:1/-1}
.bento-d .compare-ligne{grid-template-columns:62px 1fr 62px}
}
/* ==========================================================================
34. LA TRAME DE COLONNES — relevé sur le template « Simple » de Cruip
Des filets verticaux presque invisibles derrière tout le site. Ils ne se
remarquent pas consciemment, mais ils donnent une structure au vide : c'est
la différence entre une page aérée et une page vide.
========================================================================== */
.band::before,.hero::after{
content:none;position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:repeating-linear-gradient(90deg,
var(--filet) 0 1px, transparent 1px var(--pas));
background-position:center top;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 84%,transparent);
mask-image:linear-gradient(180deg,transparent,#000 12%,#000 84%,transparent);
--pas:calc(min(1200px, 100vw - 2 * var(--gut)) / 12);
--filet:rgba(11,22,34,.045);
}
.band--dark::before,.hero::after{--filet:rgba(255,255,255,.038)}
/* la trame ne doit pas manger le liseré de l'arête qui recouvre */
#constat::before,#preuve::before,#methode::before,#voix::before,
#simulateur::before,#equipe::before,#modele::before,#faq::before,#cta::before{
z-index:0;height:auto;background-image:
repeating-linear-gradient(90deg,var(--filet) 0 1px,transparent 1px var(--pas)),
linear-gradient(180deg,rgba(255,255,255,.5) 0 1px,transparent 1px);
}
/* ==========================================================================
35. LE CADRE DE FENÊTRE — la maquette se lit comme un vrai écran
Trois pastilles et un intitulé : le cerveau reconnaît une application,
pas une illustration. C'est ce qui fait basculer un schéma en produit.
========================================================================== */
.chrome{
border-radius:var(--r16);overflow:hidden;
border:1px solid var(--line-d);background:rgba(4,11,20,.55);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px -20px rgba(4,11,20,.8);
}
.chrome-barre{
display:flex;align-items:center;gap:var(--s10);
padding:9px var(--s12);border-bottom:1px solid var(--line-d);
background:rgba(255,255,255,.03);
}
.chrome-points{display:flex;gap:5px}
.chrome-points i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)}
.chrome-points i:first-child{background:rgba(255,120,110,.5)}
.chrome-points i:nth-child(2){background:rgba(255,200,90,.5)}
.chrome-points i:last-child{background:rgba(120,220,150,.5)}
.chrome-titre{
flex:1;text-align:center;font-size:10.5px;font-weight:500;
color:rgba(255,255,255,.42);letter-spacing:.02em;
}
.chrome-corps{padding:var(--s16)}
/* ==========================================================================
36. LA DA SOMBRE ÉTENDUE À TOUT LE SITE
Le basculement en clair après les chiffres cassait la tension du début.
On reste dans le navy du bout en bout — mais avec des VALEURS différentes
d'une section à l'autre, pour garder le jeu de composition qui manquait à
la toute première version.
========================================================================== */
:root{
--paper:#0B1A2A;
--panel:#0E2338;
--card:rgba(255,255,255,.05);
--ink:#FFFFFF;
--ink-soft:rgba(255,255,255,.62);
--ink-mute:rgba(255,255,255,.44);
--line:rgba(255,255,255,.075);
--line-2:rgba(255,255,255,.14);
--blue-pale:rgba(59,125,240,.18);
/* les ombres perdent leur liseré blanc, qui n'a de sens que sur du clair */
--sh1:0 1px 2px rgba(4,11,20,.4), inset 0 1px 0 rgba(255,255,255,.06);
--sh2:0 14px 34px -14px rgba(4,11,20,.75), inset 0 1px 0 rgba(255,255,255,.07);
--sh3:0 28px 60px -24px rgba(4,11,20,.85), inset 0 1px 0 rgba(255,255,255,.08);
}
body{background:var(--paper);color:var(--ink)}
/* l'alternance se joue en valeurs de navy, pas en clair/sombre */
.band--panel{background:var(--panel)}
#definition{background:var(--navy)}
#preuve{background:#0C1E30}
#voix{background:var(--navy)}
#equipe{background:#0C1E30}
#modele{background:var(--panel)}
#convient{background:var(--navy)}
/* --- les composants suivent ------------------------------------------- */
.ui:not(.ui--plain){background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
border-color:var(--line)}
.ui-card,.ui-metric,.quote,.vcard-media{
background-color:rgba(255,255,255,.05);border-color:var(--line);
color:var(--ink);backdrop-filter:blur(8px);
}
.ui-icon{background:rgba(59,125,240,.18);color:#8FBBFF;box-shadow:var(--lum-fort)}
.ui-icon--ink{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85)}
.ui-chip i{background:rgba(255,255,255,.09);color:rgba(255,255,255,.55)}
.ui-track{background:rgba(255,255,255,.12)}
.ui-bars i{background:rgba(143,187,255,.28)}
.ui-bars i.hot{background:var(--blue)}
.ui-faces span{border-color:var(--navy);background:linear-gradient(160deg,#2A3F55,#1A2B3D)}
.ui-faces span::after,.ui-faces span::before{background:rgba(255,255,255,.34)}
.ba-col{border-color:var(--line)}
.ba-col--after{background:rgba(255,255,255,.05);box-shadow:var(--sh2)}
.ba-col--before li{color:var(--ink-soft)}
.ba-col--after li{color:var(--ink)}
.faq{border-color:var(--line)}
.faq details{border-color:var(--line)}
.faq summary i{background:rgba(255,255,255,.08);color:var(--ink-soft)}
.cf-card{background:var(--panel);border-color:var(--line)}
.cf-dots button{background:rgba(255,255,255,.18)}
.note-res{border-color:var(--line)}
.nav{background:rgba(11,26,42,.72);border-color:var(--line-2)}
.nav .nav-word{filter:brightness(0) invert(1)}
.nav-links a{color:var(--ink-soft)}
.nav-links a:hover,.nav-links a.on{color:#fff;background:rgba(255,255,255,.08)}
.nav .btn{background:#fff;color:var(--navy-deep)}
.nav .btn .pip{background:rgba(11,22,34,.08)}
.nav-sep{background:var(--line-2)}
.btn{background:#fff;color:var(--navy-deep)}
.btn .pip{background:rgba(11,22,34,.08)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost .pip{background:rgba(255,255,255,.1)}
.chrome{background:rgba(4,11,20,.5)}
.ruban img,.cf-logo{filter:brightness(0) invert(1)}
.tbadge-logos img{border-color:rgba(11,26,42,.9)}
footer{background:var(--navy-deep)}
/* le grain et la trame se calent sur le sombre */
.band::before,.hero::after{--filet:rgba(255,255,255,.04)}
.band:not(.band--dark)::after{
background:
radial-gradient(46% 34% at 12% 8%,rgba(59,125,240,.10),transparent 70%),
radial-gradient(38% 30% at 92% 82%,rgba(59,125,240,.08),transparent 72%);
}
.vgrid{opacity:.25}
/* ==========================================================================
37. L'UNIVERS — une seule couche fixe derrière toute la page
Le site ne doit pas être une pile de blocs posés sur du navy : il doit
donner la sensation de traverser un espace. Une lumière qui dérive, une
poussière qui flotte, l'emblème en très grand — et les sections deviennent
des voiles translucides par-dessus.
========================================================================== */
.monde{
position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
/* la nuit de la charte, avec la lueur qui monte du bas comme sur ses pages
de titre : c'est le fond du hero, appliqué à toute la page */
/* LE FOND DE LA CHARTE, À L'IDENTIQUE.
Ce n'est ni un aplat ni une descente verticale : c'est une DIAGONALE.
Le noir bleuté tient l'angle haut-gauche, l'azur s'allume sur le flanc
droit et déborde en bas à droite. Relevé sur la planche de marque. */
background:
/* le grain de la charte, déjà dosé dans le fichier : sans lui un dégradé
aussi large se dépose en bandes sur un écran 8 bits */
url(../assets/img/grain.png) repeat 0 0 / 256px 256px,
radial-gradient(126% 104% at 112% 84%, rgba(38,104,164,.62), rgba(38,104,164,0) 60%),
radial-gradient(84% 74% at 100% 40%, rgba(26,80,130,.46), rgba(26,80,130,0) 62%),
radial-gradient(70% 56% at 4% 2%, rgba(2,6,11,.75), rgba(2,6,11,0) 70%),
linear-gradient(126deg,#050B13 0%,#08131F 30%,#0C2235 58%,#10375A 100%);
}
.monde-lueur{
position:absolute;width:78vmax;height:78vmax;border-radius:50%;
left:50%;top:6%;translate:-50% -50%;
background:radial-gradient(circle,rgba(59,125,240,.30),rgba(59,125,240,.06) 46%,transparent 68%);
filter:blur(28px);
transform:translate3d(0,var(--l1,0),0);
will-change:transform;
}
.monde-lueur-2{
width:62vmax;height:62vmax;left:14%;top:72%;
background:radial-gradient(circle,rgba(94,155,255,.20),rgba(59,125,240,.05) 48%,transparent 70%);
transform:translate3d(0,var(--l2,0),0);
}
.monde-embleme{
position:absolute;left:50%;top:52%;width:min(120vmin,1400px);height:auto;
translate:-50% -50%;opacity:calc(.028 * var(--eo,1));
filter:brightness(0) invert(1);
transform:perspective(1800px) rotateY(var(--ry,-18deg)) rotateX(var(--rx,5deg)) scale(var(--es,1));
will-change:transform;
}
.monde-poussiere{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.monde-vignette{
position:absolute;inset:0;
background:radial-gradient(130% 100% at 50% 40%,transparent 42%,rgba(4,11,20,.72) 100%);
}
/* les sections laissent passer l'univers : c'est ça qui crée la continuité */
body{background:transparent}
.band,.hero,footer{background-color:transparent}
#definition{background:rgba(11,26,42,.62)}
#constat{background:#0E2338}
#preuve{background:rgba(12,30,48,.58)}
#methode{background:#122B45}
/* Ces quatre-là se posent PAR-DESSUS la précédente ou sont découvertes à
travers un lettrage : si elles sont translucides, on voit la section du
dessous au travers et tout devient laiteux. Elles restent opaques. */
#voix{background:#0B1A2A}
#simulateur{background:#070E17}
#equipe{background:#0C1E30}
#modele{background:#0E2338}
#convient{background:rgba(9,22,36,.78)}
#cta{background:rgba(7,19,32,.88)}
#chiffres{background:#091624}
.ouv{background:transparent}
.band,.hero{backdrop-filter:blur(2px)}
footer{background:rgba(4,11,20,.9)}
@media (prefers-reduced-motion:reduce){ .monde-poussiere{display:none} }
/* ==========================================================================
38. LE PLAN — le langage qui manquait aux sections
L'ouverture marche parce que c'est un PLAN : plein écran, une idée, pilotée
par le scroll. Les autres sections étaient des panneaux d'information.
Voici le même principe appliqué au constat.
========================================================================== */
.acte-plein{
position:relative;height:480vh;background:transparent;
border-radius:0;margin-top:0;box-shadow:none;
}
.acte-plein::before,.acte-plein::after{display:none}
.plan{
position:sticky;top:0;height:100vh;
display:grid;align-content:center;justify-items:center;text-align:center;
padding-inline:var(--gut);gap:var(--s24);
}
.plan-oeil{opacity:var(--o1,0);transform:translateY(var(--t1,14px));transition:none}
/* les deux titres se superposent : l'un remplace l'autre en fondu flouté,
au moment précis où la liste bascule de « sans structure » à « avec Striker » */
.plan-titres{position:relative;display:grid;justify-items:center;width:min(880px,100%)}
.plan-titre{
grid-area:1/1;max-width:18ch;font-size:clamp(30px,5vw,64px);
opacity:var(--o1,0);transform:translateY(var(--t1,20px)) scale(var(--e1,1));
filter:blur(var(--f1,0px));
will-change:opacity,filter,transform;
}
/* rouge pour le constat, vert pour la performance retrouvée.
La lueur est portée par un drop-shadow sur le groupe, PAS par un text-shadow
sur les mots : chaque mot est enfermé dans une boîte à débordement caché
(c'est elle qui masque le mot pendant qu'il monte), et cette boîte
découpait la lueur en rectangles verts autour de chaque mot. */
.plan-titre-2 b{color:#4ADE80;font-weight:600;
filter:drop-shadow(0 0 18px rgba(74,222,128,.40))}
/* le constat se dit en rouge, la solution en bleu : les deux titres
ne doivent pas porter la même couleur d'accent. */
.plan-titre-1 b{color:#FF6B5E;font-weight:600;
filter:drop-shadow(0 0 18px rgba(255,107,94,.40))}
/* les deux listes occupent le MÊME espace : l'une remplace l'autre */
/* la liste et le paragraphe occupent la MÊME zone : la page ne bouge pas,
ce sont les éléments qui se remplacent. */
.plan-zone{position:relative;display:grid;width:min(880px,100%);
min-height:clamp(210px,26vh,280px);margin-top:var(--s16);place-items:center}
.plan-zone > *{grid-area:1/1;width:100%}
.plan-listes{position:relative;width:min(560px,100%);justify-self:center;min-height:190px}
.plan-listes ul{
position:absolute;inset:0;margin:0;padding:0;list-style:none;
display:grid;align-content:center;gap:var(--s12);
}
.plan-listes li{
font-size:clamp(14px,1.5vw,17px);line-height:1.35;letter-spacing:-.02em;
display:flex;align-items:center;justify-content:center;gap:var(--s10);
}
.plan-listes li::before{
content:'';width:6px;height:6px;border-radius:50%;flex:none;
}
/* avant : gris, et chaque ligne se barre puis s'efface */
.plan-avant li{color:rgba(255,255,255,.5);opacity:var(--a,0);transform:translateY(var(--ay,10px))}
.plan-avant li::before{background:rgba(255,255,255,.28)}
.plan-avant li::after{
content:'';position:absolute;left:12%;right:12%;height:1px;
background:rgba(255,120,110,.6);transform:scaleX(var(--barre,0));transform-origin:left;
}
.plan-avant li{position:relative}
/* après : bleu, et chaque ligne s'allume */
.plan-apres li{color:#fff;opacity:var(--b,0);transform:translateY(var(--by,14px))}
.plan-apres li::before{background:#8FBBFF;box-shadow:0 0 10px rgba(143,187,255,.9)}
.plan-zone .plan-chute{
max-width:100%;text-align:center;
opacity:calc(var(--vis,1) * var(--o3,0));
font-size:clamp(17px,2.3vw,30px);line-height:1.28;
}
@media (prefers-reduced-motion:reduce){
.acte-plein{height:auto;padding-block:var(--sec)}
.plan{position:static;height:auto}
.plan-oeil,.plan-titre,.plan-chute{opacity:1;transform:none}
.plan-listes{min-height:0;display:grid;gap:var(--s24)}
.plan-listes ul{position:static}
.plan-avant li,.plan-apres li{opacity:1;transform:none}
.plan-avant li::after{display:none}
}
/* ==========================================================================
39. LA MÉTHODE EN PAQUET DE CARTES
Les quatre piliers occupent le MÊME emplacement. Chaque avancée du scroll
remplace la carte visible par la suivante, qui monte par-dessus pendant
que la précédente recule dans la pile. On gagne trois écrans de hauteur.
========================================================================== */
@media (min-width:901px){
/* La scène reste ÉPINGLÉE — le titre de gauche ne bouge pas d'un pixel —
et ce sont les cartes qui voyagent : chacune monte depuis le bas du cadre
et vient recouvrir la précédente, qui recule d'un cran en rapetissant.
Aucune ne s'efface : les quatre restent à l'écran, dans l'ordre.
Référence : images-scrolling-animation. */
#methode{
/* une fenêtre d'écran, plus un temps de montée par carte */
height:calc(100vh + 4 * 74vh);
}
#methode > .wrap{
position:sticky;top:0;height:100vh;
display:grid;align-content:center;
}
#methode .g{align-items:center}
#methode .c4 > div{position:static!important} /* le titre est déjà tenu par la scène */
#methode .c8{
position:relative;display:block;
padding-top:76px; /* la place que prend le paquet au-dessus */
/* Le cadre doit contenir la carte ENTIÈRE, ombre comprise : il était plus
court qu'elle, et son bord tranchait à la fois le bas de la carte et
l'ombre portée — c'est le rectangle net qu'on voyait dessous. */
height:clamp(600px,76vh,740px);
/* la carte qui arrive monte depuis le bas du cadre : hors du cadre, elle
n'existe pas encore */
overflow:hidden;
/* Filet de sécurité : le bord bas s'éteint au lieu de trancher. Une carte
coupée net montre des angles droits là où elle a des coins arrondis —
c'est ça qu'on lisait comme « un rectangle collé sur le côté ». */
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 95%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0,#000 95%,transparent 100%);
}
#methode .c8 > .ui{
position:absolute;left:16px;right:16px;top:76px;
/* une ombre qui ne dépasse pas du cadre : elle serait coupée net. */
box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 30px -18px rgba(4,11,20,.92);
margin:0;transform-origin:50% 0;
transform:translateY(var(--y,0px)) scale(var(--s,1));
opacity:1;filter:none;
z-index:var(--z,1);
will-change:transform;
}
@media (prefers-reduced-motion:reduce){
#methode .c8{height:auto;overflow:visible}
#methode .c8 > .ui{position:static;transform:none;margin-bottom:var(--s24)}
}
/* un compteur discret : où en est-on dans la pile */
.pile-jauge{display:flex;gap:6px;margin-top:var(--s24)}
.pile-jauge i{
width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.14);
overflow:hidden;position:relative;
}
.pile-jauge i::after{
content:'';position:absolute;inset:0;border-radius:2px;
background:var(--blue);box-shadow:0 0 8px rgba(59,125,240,.7);
transform:scaleX(var(--p,0));transform-origin:left;
}
}
/* --- les cartes du paquet doivent être OPAQUES -------------------------
Un empilement de surfaces translucides laisse voir les cartes du dessous
à travers celles du dessus : la pile ne se lit plus. Ici on peint. */
@media (min-width:901px){
#methode .c8 > .ui{
background:linear-gradient(180deg,#15304A,#0E2338);
border:1px solid rgba(255,255,255,.11);
backdrop-filter:none;
/* l'ombre ne doit rien déborder latéralement : le cadre la trancherait.
Rayon 30, retrait 20 → elle ne s'étale que de 5 px de chaque côté,
pour 16 px de marge disponible. */
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 18px 30px -20px rgba(4,11,20,.92),
0 4px 12px -8px rgba(4,11,20,.7);
}
/* les cartes intérieures se détachent sur ce fond plus clair */
#methode .c8 > .ui .ui-card,
#methode .c8 > .ui .ui-metric{
background:rgba(255,255,255,.055);
border-color:rgba(255,255,255,.10);
backdrop-filter:none;
}
}
/* ==========================================================================
40. LE SCRUB — la vidéo du Summit vient à nous
Référence : hero-scrub. La vignette grandit jusqu'à couvrir l'écran en
défilant ses images, puis rétrécit symétriquement. Tout est piloté par la
position dans la section : rien ne se déclenche tout seul.
========================================================================== */
@media (min-width:901px){
.scrub{height:260vh}
.scrub > .wrap{position:sticky;top:0;height:100vh;display:grid;align-content:center}
/* tout ce qui n'est pas la vidéo s'efface quand elle prend l'écran */
.scrub .c6:first-child,.scrub .head,.scrub .scrub-legende{
opacity:var(--reste,1);transition:none;
}
}
.scrub-carte{
position:relative;border-radius:var(--r24);overflow:hidden;
border:1px solid var(--line);background:#0B1A2A;
aspect-ratio:4/3;
box-shadow:0 30px 70px -30px rgba(4,11,20,.9), inset 0 1px 0 rgba(255,255,255,.08);
}
.scrub-carte img,.scrub-carte .scrub-video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.scrub-carte img{opacity:.82}
.scrub-carte .scrub-video{opacity:0}
.scrub-carte.a-video .scrub-video{opacity:1}
.scrub-carte.a-video img{opacity:0}
@media (min-width:901px){
.scrub-carte{
/* la carte sort de la grille pour pouvoir couvrir l'écran entier */
position:fixed;z-index:40;
left:var(--x,50%);top:var(--yy,50%);
width:var(--w,42vw);height:var(--h,31.5vw);
translate:-50% -50%;
border-radius:var(--r,24px);
aspect-ratio:auto;
transition:none;
will-change:width,height,left,top,border-radius;
}
.scrub-place{visibility:hidden} /* l'emplacement réservé dans la colonne */
}
/* ==========================================================================
41. LE PARAGRAPHE QUI SE RÉVÈLE
Les mots pas encore atteints sont flous et éteints ; ils s'allument au fil
du scroll. Certains passages portent un surlignage rouge, d'autres une
nuance en italique. C'est la phrase qui devient l'objet, pas un bloc de
texte posé sous un titre.
========================================================================== */
.revele{
max-width:min(1000px,100%);margin:0;
opacity:var(--o3,1);
font-size:clamp(20px,3.1vw,42px);line-height:1.24;letter-spacing:-.03em;
font-weight:600;text-align:left;text-wrap:pretty;
opacity:var(--vis,0);
}
.revele .m{
display:inline-block;
color:var(--ink);
opacity:var(--o,.16);
filter:blur(var(--f,5px));
transition:none;
will-change:opacity,filter;
}
/* le surlignage : UN bloc continu qui traverse les espaces entre les mots.
Le porter sur chaque mot découpait la phrase en petites étiquettes. */
/* Le bloc de couleur ne préexiste plus au texte : il se peint de gauche à
droite AU MOMENT où les mots qu'il couvre s'allument. --h vient du JS. */
.revele mark{
--teinte:59,125,240;
/* le navigateur met un fond JAUNE par défaut sur ; comme on n'anime
que background-image, il faut éteindre background-color explicitement */
background-color:transparent;
color:#fff;padding:.04em .16em;border-radius:4px;
background-image:linear-gradient(rgb(var(--teinte)),rgb(var(--teinte)));
background-repeat:no-repeat;
background-size:calc(var(--h,0) * 100%) 100%;
box-decoration-break:clone;-webkit-box-decoration-break:clone;
box-shadow:0 0 26px rgba(var(--teinte),calc(var(--h,0) * .38));
}
/* le rouge reste réservé à ce qui casse : le départ du commercial */
.revele mark.rouge{--teinte:229,50,43}
@media (prefers-reduced-motion:reduce){ .revele mark{--h:1} }
.revele mark .m{background:none;color:#fff}
/* le mot en rouge seul, sans bloc */
.revele em{font-style:normal}
.revele em .m{color:#4ADE80}
/* la nuance : plus discrète, en italique */
.revele i{font-style:italic}
.revele i .m{color:var(--ink-soft);font-weight:500}
@media (max-width:620px){ .revele{font-size:clamp(18px,5.6vw,26px)} }
/* ==========================================================================
42. LE CIRCUIT — ce qu'on installe, câblé autour du pôle
Référence : cpu-architecture. Une puce centrale, quatre pistes qui en
partent, et des impulsions lumineuses qui remontent vers elle en continu.
Le pôle n'est plus une liste : c'est un système alimenté.
========================================================================== */
.circuit{position:relative;aspect-ratio:520/420;width:100%;perspective:1100px}
/* La carte arrive inclinée puis se met à plat : c'est ce basculement qui dit
« on pose un circuit », plus que n'importe quel effet sur les traits. */
.circuit-svg{
opacity:0;transform:rotateX(22deg) scale(.94);
transform-origin:50% 60%;
transition:opacity .7s var(--ease),transform 1.15s cubic-bezier(.22,1,.28,1);
}
.circuit.joue .circuit-svg{opacity:1;transform:none}
/* la puce se pose la première, avec un léger rebond */
.circuit-puce{
opacity:0;transform:scale(.68);
transform-box:fill-box;transform-origin:50% 50%;
transition:opacity .45s var(--ease) .30s,
transform .75s cubic-bezier(.18,1.35,.35,1) .30s;
}
.circuit.joue .circuit-puce{opacity:1;transform:none}
/* puis ses broches, une par une */
.circuit-pattes rect{
opacity:0;transform:scale(0);
transform-box:fill-box;transform-origin:50% 50%;
transition:opacity .28s var(--ease),transform .38s cubic-bezier(.2,1.5,.4,1);
}
.circuit.joue .circuit-pattes rect{opacity:1;transform:none}
.circuit.joue .circuit-pattes rect:nth-child(1){transition-delay:.60s}
.circuit.joue .circuit-pattes rect:nth-child(2){transition-delay:.65s}
.circuit.joue .circuit-pattes rect:nth-child(3){transition-delay:.70s}
.circuit.joue .circuit-pattes rect:nth-child(4){transition-delay:.75s}
.circuit.joue .circuit-pattes rect:nth-child(5){transition-delay:.80s}
.circuit.joue .circuit-pattes rect:nth-child(6){transition-delay:.85s}
.circuit.joue .circuit-pattes rect:nth-child(7){transition-delay:.90s}
.circuit.joue .circuit-pattes rect:nth-child(8){transition-delay:.95s}
.circuit-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.circuit-traces path{
fill:none;stroke:rgba(143,187,255,.20);stroke-width:1.4;
/* décalage NÉGATIF : le trait part de la puce et court vers son plot,
pas l'inverse — c'est la puce qu'on pose d'abord, puis qu'on câble */
stroke-dasharray:var(--l,320);stroke-dashoffset:calc(var(--l,320) * -1);
transition:stroke-dashoffset .95s var(--ease);
}
.circuit.joue .circuit-traces path{stroke-dashoffset:0}
.circuit.joue .circuit-traces path:nth-child(1){transition-delay:.72s}
.circuit.joue .circuit-traces path:nth-child(2){transition-delay:.90s}
.circuit.joue .circuit-traces path:nth-child(3){transition-delay:1.08s}
.circuit.joue .circuit-traces path:nth-child(4){transition-delay:1.26s}
.circuit-flux path{
fill:none;stroke:#8FBBFF;stroke-width:2.2;stroke-linecap:round;
stroke-dasharray:26 340;stroke-dashoffset:366;
animation:flux 3.4s linear infinite;
animation-play-state:paused;
}
.circuit.joue .circuit-flux path{animation-play-state:running;animation-delay:2.7s}
.circuit.joue .circuit-flux path:nth-child(2){animation-delay:3.55s}
.circuit.joue .circuit-flux path:nth-child(3){animation-delay:4.40s}
.circuit.joue .circuit-flux path:nth-child(4){animation-delay:5.25s}
@keyframes flux{to{stroke-dashoffset:0}}
.circuit-plots circle{
fill:#8FBBFF;opacity:0;
transform:scale(.2);transform-box:fill-box;transform-origin:50% 50%;
transition:opacity .35s var(--ease),transform .45s cubic-bezier(.2,1.4,.4,1);
}
/* chaque plot s'allume quand SA piste arrive, pas avant */
.circuit.joue .circuit-plots circle{opacity:.55;transform:none}
.circuit.joue .circuit-plots circle:nth-child(1){transition-delay:1.50s}
.circuit.joue .circuit-plots circle:nth-child(2){transition-delay:1.68s}
.circuit.joue .circuit-plots circle:nth-child(3){transition-delay:1.86s}
.circuit.joue .circuit-plots circle:nth-child(4){transition-delay:2.04s}
/* la respiration continue ne démarre qu'une fois le circuit monté */
.circuit.joue .circuit-plots circle{animation:plot 3.4s ease-in-out 2.6s infinite}
.circuit.joue .circuit-plots circle:nth-child(2){animation-delay:3.45s}
.circuit.joue .circuit-plots circle:nth-child(3){animation-delay:4.30s}
.circuit.joue .circuit-plots circle:nth-child(4){animation-delay:5.15s}
@keyframes plot{0%,100%{opacity:.4;r:4}12%{opacity:1;r:5.4}}
.circuit-puce rect{fill:#12293F;stroke:rgba(255,255,255,.14);stroke-width:1}
.circuit-pattes rect{fill:rgba(143,187,255,.45);stroke:none}
.circuit-puce text{
fill:#fff;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.02em;
}
.circuit-puce .circuit-sous{fill:rgba(255,255,255,.5);font-size:10.5px;letter-spacing:.14em}
.circuit.joue .circuit-puce{animation:puce 3.4s ease-in-out 2.6s infinite}
@keyframes puce{0%,100%{filter:drop-shadow(0 0 10px rgba(59,125,240,.35))}
50%{filter:drop-shadow(0 0 26px rgba(59,125,240,.7))}}
/* les quatre libellés, posés au bout de leur piste */
.circuit-noeud{
position:absolute;display:grid;gap:2px;max-width:44%;
font-size:12.5px;font-weight:500;color:#fff;letter-spacing:-.015em;
opacity:0;transform:translateY(8px);
transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.circuit.joue .circuit-noeud{opacity:1;transform:none}
.circuit-noeud i{
font-style:normal;font-size:10px;font-weight:600;color:#8FBBFF;letter-spacing:.1em;
}
.circuit-noeud em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.45);line-height:1.3}
.circuit .n1{left:0;top:4%;transition-delay:1.70s}
.circuit .n2{right:0;top:4%;text-align:right;justify-items:end;transition-delay:1.88s}
.circuit .n3{left:0;bottom:4%;transition-delay:2.06s}
.circuit .n4{right:0;bottom:4%;text-align:right;justify-items:end;transition-delay:2.24s}
@media (max-width:620px){
.circuit-noeud{font-size:11px;max-width:46%}
.circuit-noeud em{display:none}
}
@media (prefers-reduced-motion:reduce){
.circuit-flux path,.circuit-plots circle,.circuit-puce{animation:none!important}
.circuit-noeud{opacity:1;transform:none}
.circuit-svg,.circuit-puce,.circuit-pattes rect,.circuit-plots circle{
opacity:1;transform:none;transition:none;
}
.circuit-plots circle{opacity:.55}
.circuit-traces path{stroke-dashoffset:0;transition:none}
}
/* ==========================================================================
43. LA CONSOLE DE PILOTAGE — la mise en route
Les chiffres ne s'affichent pas : une console s'allume. Un balayage
traverse la section, une grille apparaît, l'entête se connecte, les
équerres se tracent, puis chaque carte se matérialise avec un scintillement.
========================================================================== */
.console{position:relative}
.console > .wrap{position:relative;z-index:3}
/* le balayage d'allumage */
.console-boot{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.console-scan{
position:absolute;left:0;right:0;height:34%;top:-40%;
background:linear-gradient(180deg,transparent,rgba(143,187,255,.16),rgba(255,255,255,.10),rgba(143,187,255,.16),transparent);
box-shadow:0 0 60px rgba(59,125,240,.35);
opacity:0;
}
.console.on .console-scan{animation:consoleScan 1.5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes consoleScan{
0% {top:-40%;opacity:0}
10% {opacity:1}
85% {opacity:1}
100%{top:110%;opacity:0}
}
/* la grille technique qui reste en fond */
.console-grille{
position:absolute;inset:0;opacity:0;
background-image:
repeating-linear-gradient(0deg,rgba(143,187,255,.055) 0 1px,transparent 1px 44px),
repeating-linear-gradient(90deg,rgba(143,187,255,.055) 0 1px,transparent 1px 44px);
-webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent 78%);
mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent 78%);
}
.console.on .console-grille{animation:consoleGrille 1.2s ease-out .5s forwards}
@keyframes consoleGrille{to{opacity:1}}
/* l'entête : le point qui bat, la ligne qui s'écrit, l'état */
.console-tete{
display:flex;align-items:center;gap:var(--s10);
margin-bottom:var(--s20);
font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
color:rgba(143,187,255,.75);
opacity:0;
}
.console.on .console-tete{animation:consoleTete .5s ease-out .55s forwards}
@keyframes consoleTete{to{opacity:1}}
.console-point{
width:7px;height:7px;border-radius:50%;background:#4ADE80;
box-shadow:0 0 10px rgba(74,222,128,.9);animation:battement 2s ease-in-out infinite;
}
.console-ligne::after{
content:attr(data-txt);
display:inline-block;overflow:hidden;white-space:nowrap;
width:0;vertical-align:bottom;
}
.console.on .console-ligne::after{animation:frappe 1.1s steps(34,end) .8s forwards}
@keyframes frappe{to{width:22em}}
.console-etat{
margin-left:auto;padding:3px 10px;border-radius:var(--rf);
border:1px solid rgba(74,222,128,.35);color:#4ADE80;
background:rgba(74,222,128,.10);letter-spacing:.1em;
}
/* les équerres du cadre, tracées après le balayage */
.console-coin{
position:absolute;width:26px;height:26px;z-index:4;pointer-events:none;
border:1px solid rgba(143,187,255,.55);opacity:0;
}
.console.on .console-coin{animation:consoleCoin .5s ease-out forwards}
.console .c-hg{left:var(--gut);top:calc(var(--sec) - 14px);border-right:0;border-bottom:0;animation-delay:1.0s}
.console .c-hd{right:var(--gut);top:calc(var(--sec) - 14px);border-left:0;border-bottom:0;animation-delay:1.1s}
.console .c-bg{left:var(--gut);bottom:calc(var(--sec) - 14px);border-right:0;border-top:0;animation-delay:1.2s}
.console .c-bd{right:var(--gut);bottom:calc(var(--sec) - 14px);border-left:0;border-top:0;animation-delay:1.3s}
@keyframes consoleCoin{to{opacity:1}}
/* chaque carte se matérialise avec un scintillement */
.console .bento > *{
opacity:0;transform:translateY(14px) scale(.985);
filter:blur(4px) brightness(1.6);
}
.console.on .bento > *{animation:materialise .8s cubic-bezier(.16,1,.3,1) forwards}
.console.on .bento > *:nth-child(1){animation-delay:1.15s}
.console.on .bento > *:nth-child(2){animation-delay:1.35s}
.console.on .bento > *:nth-child(3){animation-delay:1.55s}
.console.on .bento > *:nth-child(4){animation-delay:1.75s}
.console.on .bento > *:nth-child(5){animation-delay:1.95s}
@keyframes materialise{
0% {opacity:0;transform:translateY(14px) scale(.985);filter:blur(4px) brightness(1.6)}
40% {opacity:.55;filter:blur(1.5px) brightness(1.35)}
55% {opacity:.28} /* le scintillement */
70% {opacity:1;filter:blur(0) brightness(1.1)}
100%{opacity:1;transform:none;filter:none}
}
@media (prefers-reduced-motion:reduce){
.console-scan,.console-coin{display:none}
.console-grille{opacity:1;animation:none}
.console-tete{opacity:1;animation:none}
.console-ligne::after{width:auto;animation:none}
.console .bento > *{opacity:1;transform:none;filter:none;animation:none!important}
}
/* --- la phrase qui introduit la console -------------------------------- */
.revele-intro{
margin:0 0 var(--s48);max-width:min(900px,100%);
font-size:clamp(22px,3.4vw,46px);
}
.revele-intro mark{background:#3B7DF0;box-shadow:0 0 26px rgba(59,125,240,.45)}
.revele-intro em .m{color:#FF6B5E}
/* elle reste en place une fois révélée : c'est le titre de la section */
.console .revele-intro{opacity:1}
/* ==========================================================================
44. LE CHARGEMENT — la machine se connecte
Un terminal seul à l'écran, entre le hero et la console. Chaque ligne
s'écrit puis se valide au fil du scroll. Rien n'est imposé : si le
lecteur descend vite, ça défile vite.
========================================================================== */
/* la section remonte sur le hero : le voile se pose PAR-DESSUS en fondu,
au lieu de remonter du bas comme une plaque. La page ne bouge pas. */
.charge{
position:relative;height:360vh;z-index:3;background:transparent;
margin-top:-160vh; /* le voile se pose SUR le hero ÉPINGLÉ : la page ne bouge pas */
margin-bottom:-200vh;/* la console est déjà épinglée derrière quand les lettres s'ouvrent */
}
.charge-scene{
position:sticky;top:0;height:100vh;pointer-events:none;
display:grid;place-items:center;padding-inline:var(--gut);
background:transparent;
}
/* La plaque de fin de chargement. Tant que --taille vaut 0 elle est pleine ;
quand la barre atteint 100 %, les mots NOS CHIFFRES s'y creusent et
grandissent — même mécanique que l'ouverture au logo — et la console
apparaît à travers le lettrage. */
.charge-voile{position:absolute;inset:0;z-index:1;opacity:var(--fond,0);will-change:opacity}
.charge-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.charge-mot{
font-family:Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
font-weight:600;letter-spacing:-.045em;
font-size:var(--taille,0);
}
/* sur mobile le lettrage n'est pas un trou dans la plaque : c'est un carton
de titre posé dessus, il a donc sa propre taille */
.charge-mot-plein{font-size:var(--plein,var(--taille,0));opacity:var(--marque,0)}
.charge-term{position:relative;z-index:2;opacity:var(--net,0);transition:opacity .2s linear}
/* la console attend derrière la plaque */
#chiffres{position:relative;z-index:2}
.charge-term{
width:min(720px,100%);
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:clamp(11.5px,1.25vw,14px);line-height:1.9;letter-spacing:-.005em;
color:rgba(143,187,255,.9);
}
.charge-tete{
margin:0 0 var(--s16);color:rgba(255,255,255,.35);
border-bottom:1px solid rgba(143,187,255,.16);padding-bottom:var(--s10);
}
.charge-lignes{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.charge-lignes li{
position:relative;padding-left:18px;white-space:nowrap;overflow:hidden;
color:rgba(255,255,255,.62);
width:var(--w,0);
}
.charge-lignes li::before{
content:'>';position:absolute;left:0;color:rgba(143,187,255,.55);
}
/* les points de conduite puis l'état, à droite */
.charge-lignes li::after{
content:' ' attr(data-suite);
color:rgba(255,255,255,.22);
}
.charge-lignes li b{
color:#4ADE80;font-weight:600;
}
.charge-barre{
margin-top:var(--s20);height:3px;border-radius:2px;
background:rgba(255,255,255,.10);overflow:hidden;
}
.charge-barre i{
display:block;height:100%;width:var(--p,0%);border-radius:2px;
background:linear-gradient(90deg,rgba(59,125,240,.8),#8FBBFF);
box-shadow:0 0 12px rgba(59,125,240,.7);
}
.charge-pied{margin:var(--s10) 0 0;color:rgba(255,255,255,.42)}
.charge-pct{color:#8FBBFF;font-weight:600}
/* le curseur qui clignote sur la ligne en cours */
.charge-lignes li.en-cours::after{content:'▌';color:#8FBBFF;animation:clign .9s steps(2) infinite}
@keyframes clign{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
.charge{height:100vh;margin-top:0;margin-bottom:0}
.charge-voile{opacity:.94}
.charge-svg{display:none}
.charge-term{opacity:1}
.charge-lignes li{width:auto}
.charge-barre i{width:100%}
}
/* ==========================================================================
45. UNE SECTION = UN ÉCRAN
Relevé avant correction (viewport 1100 px) :
definition 0,50 · preuve 0,65 · voix 0,71 · cta 0,46 -> trop courtes
chiffres 1,07 · modele 1,27 -> débordent
Les sections épinglées (ouverture, chargement, constat, méthode, équipe)
sont longues volontairement : c'est leur mécanique de scroll, on n'y touche pas.
========================================================================== */
#definition,#preuve,#voix,#simulateur,#modele,#convient,#faq,#cta,#chiffres{
min-height:100vh;
display:grid;
/* sans piste bornée, le conteneur intérieur prend sa max-width (1264 px)
même sur un écran plus étroit, et toute la page déborde à l'horizontale */
grid-template-columns:minmax(0,1fr);
align-content:center;
}
/* la console doit tenir d'un bloc : on resserre son rythme */
#chiffres{padding-block:clamp(48px,6vh,72px)}
#chiffres .bento{gap:var(--s10);margin-top:var(--s24)}
#chiffres .revele-intro{margin-bottom:var(--s24)}
#chiffres .console-tete{margin-bottom:var(--s16)}
#chiffres .bento-a{padding:var(--s24)}
#chiffres .bento > *{padding:var(--s20)}
/* les modalités tiennent aussi en un écran : on resserre les trois blocs */
#modele{padding-block:clamp(48px,6vh,80px)}
#modele > .wrap > .g{margin-bottom:var(--s40)!important}
#modele > .wrap > .g:last-child{margin-bottom:0!important}
#modele .head{margin-bottom:var(--s16)}
#modele .faq summary{padding-block:var(--s16)}
#modele .faq-a{padding-bottom:var(--s16)}
/* le CTA final et les sections courtes se centrent au lieu de flotter en haut */
#cta > .wrap{justify-items:center}
#faq{background:rgba(11,26,42,.66)}
#faq .faq summary{padding-block:var(--s20)}
/* ==========================================================================
46. L'ÉCRAN DE PILOTAGE
Référence : efferd-dashboard. Toute la section « Nos chiffres » devient un
seul écran d'application — barre de fenêtre, colonne de navigation, tuiles
d'indicateurs, panneaux. Un objet, une page.
========================================================================== */
.ecran{
border-radius:var(--r16);overflow:hidden;
border:1px solid rgba(255,255,255,.11);
background:linear-gradient(180deg,#0D2135,#091829);
box-shadow:inset 0 1px 0 rgba(255,255,255,.09),
0 40px 90px -40px rgba(4,11,20,.95),
0 10px 26px -12px rgba(4,11,20,.8);
}
.ecran-barre{
display:flex;align-items:center;gap:var(--s12);
padding:9px var(--s14,12px);border-bottom:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.035);
}
.ecran-barre .chrome-titre{flex:1}
.ecran-barre .console-etat{margin-left:0;display:inline-flex;align-items:center;gap:6px;font-size:9.5px}
.ecran-corps{display:grid;grid-template-columns:186px minmax(0,1fr)}
.ecran-nav{
display:grid;align-content:start;gap:1px;
padding:var(--s12) var(--s8);border-right:1px solid rgba(255,255,255,.07);
background:rgba(255,255,255,.02);
}
.ecran-nav a,.ecran-nav span{
display:block;padding:9px 12px;border-radius:8px;text-decoration:none;
font-size:12.5px;font-weight:500;color:rgba(255,255,255,.55);
transition:background .25s var(--ease),color .25s var(--ease);
}
/* les entrées de gauche sont de vrais liens : elles emmènent à la section */
.ecran-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.ecran-nav a{cursor:pointer}
.ecran-nav .on{background:rgba(59,125,240,.20);color:#fff;box-shadow:inset 0 0 0 1px rgba(143,187,255,.30)}
.ecran-nav-titre{
margin-top:var(--s14);font-size:9.5px!important;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.32)!important;padding-bottom:2px!important;
}
.ecran-nav-titre:first-child{margin-top:0}
.ecran-vue{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:rgba(255,255,255,.07)}
.ecran-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.07)}
.ekpi{
background:#0B1E31;padding:var(--s20) var(--s18) var(--s16);
display:grid;gap:4px;align-content:start;
}
/* En capitales espacées, « Chiffre d'affaires généré » partait sur trois
lignes au-dessus du nombre. En casse normale il tient en deux. */
.ekpi > span{font-size:11.5px;letter-spacing:0;color:rgba(255,255,255,.52);line-height:1.35}
.ekpi b{
font-size:clamp(24px,2.9vw,36px);font-weight:600;letter-spacing:-.04em;line-height:1.05;color:#fff;
white-space:nowrap;
font-variant-numeric:tabular-nums;
}
.ekpi em{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.50)}
.ekpi .hausse::before{content:'▲ ';color:#4ADE80;font-size:8px}
.ekpi-faces{display:flex}
.ekpi-faces img{
width:22px;height:22px;border-radius:50%;object-fit:cover;margin-left:-7px;
border:1.5px solid #0B1E31;
}
.ekpi-faces img:first-child{margin-left:0}
.ekpi-faces .plus{
display:grid;place-items:center;width:22px;height:22px;border-radius:50%;margin-left:-7px;
border:1.5px solid #0B1E31;background:rgba(59,125,240,.24);color:#8FBBFF;
font-size:9px;font-weight:600;
}
/* minmax(0,…) obligatoire : sinon une colonne refuse de descendre sous sa
largeur mini de contenu et pousse la suivante hors de l'écran. */
.ecran-panneaux{display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);
gap:1px;background:rgba(255,255,255,.07)}
/* la courbe tient la colonne de gauche sur deux rangs ; la trajectoire
s'étale sous les deux panneaux de droite. */
.epan-large{grid-row:span 2}
.epan-traj{grid-column:2 / span 2}
.epan{background:#0B1E31;padding:var(--s20) var(--s18);display:grid;gap:var(--s12);align-content:start;position:relative}
.epan-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--s10)}
.epan-tete b{font-size:14.5px;font-weight:600;color:#fff;letter-spacing:-.02em}
.epan-badge{
font-size:10.5px;font-weight:500;letter-spacing:.05em;
padding:4px 10px;border-radius:var(--rf);
border:1px solid rgba(74,222,128,.32);background:rgba(74,222,128,.10);color:#4ADE80;
}
.epan-large{overflow:hidden}
.epan-large .courbe{position:absolute;inset:auto 0 0 0;height:58%;width:100%}
.epan-large > *:not(.courbe){position:relative;z-index:2}
.epan .spark{height:44px;gap:3px}
.epan .spark i{max-width:12px}
.epan .dash-kpi{padding:var(--s10)}
.epan .compare-ligne{grid-template-columns:76px 1fr 66px;gap:var(--s10)}
@media (max-width:900px){
.ecran-corps{grid-template-columns:1fr}
.ecran-nav{display:none}
.ecran-kpis{grid-template-columns:repeat(2,1fr)}
.ecran-panneaux{grid-template-columns:1fr}
}
/* la mise en route fait apparaître les tuiles une à une */
.console .ekpi,.console .epan{opacity:0;transform:translateY(10px);filter:blur(3px)}
.console.on .ekpi,.console.on .epan{animation:materialise .7s cubic-bezier(.16,1,.3,1) forwards}
.console.on .ekpi:nth-child(1){animation-delay:1.15s}
.console.on .ekpi:nth-child(2){animation-delay:1.28s}
.console.on .ekpi:nth-child(3){animation-delay:1.41s}
.console.on .ekpi:nth-child(4){animation-delay:1.54s}
.console.on .epan:nth-child(1){animation-delay:1.70s}
.console.on .epan:nth-child(2){animation-delay:1.83s}
.console.on .epan:nth-child(3){animation-delay:1.96s}
.console.on .ecran{animation:materialise .8s cubic-bezier(.16,1,.3,1) .95s both}
/* ==========================================================================
47. LE SURLIGNAGE — relevé sur libertywebi.fr
Chez eux : un bloc plein rgb(227,30,36) derrière un span inline-block.
Ici le bloc se TRACE de gauche à droite, et le texte passe en blanc au
moment où il est recouvert. Le bleu de marque plutôt que leur rouge : sur
ce site le rouge dit « ce qui ne marche pas », il ne peut pas dire « n° 1 ».
========================================================================== */
.surlig{
position:relative;display:inline-block;
padding:0 .14em;margin:0 -.04em;
color:var(--ink);
transition:color .35s var(--ease) .22s;
isolation:isolate;
}
.surlig::before{
content:'';position:absolute;inset:.02em -.02em .04em;
background:var(--blue);border-radius:5px;z-index:-1;
transform:scaleX(0);transform-origin:left center;
box-shadow:0 0 30px rgba(59,125,240,.45);
transition:transform .78s cubic-bezier(.16,1,.3,1);
}
.surlig.on{color:#fff}
.surlig.on::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
.surlig{color:#fff}
.surlig::before{transform:scaleX(1);transition:none}
}
/* ==========================================================================
48. LES CLIENTS — la pile tourne au scroll
Plus de pastilles sous le carrousel : la section s'épingle et c'est le
scroll qui fait passer chaque carte devant. Même principe que les autres
scènes, appliqué à l'éventail.
========================================================================== */
@media (min-width:901px){
/* la section chevauche la fin du constat et s'y pose en fondu :
rien ne remonte du bas, l'écran change de contenu sur place. */
#preuve.acte-pile{
min-height:0;height:240vh;display:block;align-content:normal;padding-block:0;
margin-top:-100vh;position:relative;z-index:2;
opacity:var(--ar,1);
}
#preuve.acte-pile > .wrap{
position:sticky;top:0;height:100vh;
display:grid;align-content:center;
padding-block:clamp(40px,5vh,64px);
}
}
#preuve .cf{padding:0}
#preuve .cf-stage{height:clamp(320px,40vh,440px)}
/* la fiche démarre à la hauteur de la carte de devant, pas au-dessus */
@media (min-width:901px){ #preuve .note{margin-top:16px} }
/* ==========================================================================
49. LA CONSOLE RESTE À L'ÉCRAN
La séquence d'allumage dure environ deux secondes. Sans épinglage, le
lecteur la traverse avant qu'elle se termine — il ne voit rien. La section
se fige donc le temps que l'écran s'allume et se lise, puis relâche.
========================================================================== */
#chiffres{
min-height:0;
height:300vh;
display:block;
align-content:normal; /* sinon le .wrap est centré et sticky part 1 écran trop bas */
padding-block:0;
}
#chiffres > .wrap{
position:sticky;top:0;height:100vh;
display:grid;align-content:center;
/* Le menu flotte à 12 px du haut sur 56 px de haut : sans cette marge, la
fenêtre du dashboard passait dessous. On dégage sous la barre. */
padding-top:calc(var(--nav-h) + clamp(14px,2.2vh,22px) + clamp(20px,3vh,34px));
padding-bottom:clamp(28px,4.5vh,52px);
}
#chiffres .console-boot{position:absolute;inset:0;height:100vh;top:0}
/* les équerres suivent la fenêtre épinglée, pas la section entière */
#chiffres .console-coin{position:fixed}
#chiffres .c-hg,#chiffres .c-hd{top:calc(var(--nav-h) + 46px)}
#chiffres .c-bg,#chiffres .c-bd{bottom:46px}
@media (max-width:900px){
#chiffres{height:auto;min-height:100vh;display:grid;align-content:center}
#chiffres > .wrap{position:static;height:auto}
#chiffres .console-coin{display:none}
}
/* ==========================================================================
50. LE SIMULATEUR TIENT DANS UN ÉCRAN
Relevé : 940 px de contenu. Ça passe sur un grand écran, ça se coupe sur
un portable de 800 px. Tout se resserre en unités liées à la hauteur de
fenêtre, de sorte que le panneau de calcul reste visible sans défiler.
========================================================================== */
#simulateur > .wrap{padding-block:clamp(24px,3.4vh,48px)}
#simulateur .head{margin-bottom:clamp(14px,2vh,26px);gap:clamp(6px,1vh,12px)}
#simulateur .t-h2{font-size:clamp(22px,2.6vw,38px)}
#simulateur .t-lead{font-size:clamp(13px,1.15vw,15px)}
#simulateur .sim{gap:clamp(20px,2.6vw,44px);align-items:stretch}
#simulateur .sim-field{padding-block:clamp(7px,1.05vh,15px);gap:clamp(5px,.8vh,10px)}
#simulateur .sim-label span{font-size:clamp(12px,1.05vw,14px)}
#simulateur .sim-label b{font-size:clamp(12.5px,1.1vw,15px)}
/* en dessous de 900 px la section reprend sa hauteur naturelle */
@media (max-width:900px){
#simulateur{min-height:0;padding-block:var(--sec)}
}
/* la vue « projection » ajoute trois lignes de comparaison : sur un écran
court elle dépassait de ~50 px. On resserre le pas, pas la lisibilité. */
/* sur un écran court, on resserre le pas — jamais la lisibilité */
@media (max-height:860px) and (min-width:901px){
#simulateur .scard{padding:var(--s18);gap:var(--s16)}
#simulateur .sim-inputs{gap:var(--s12)}
#simulateur .sim-total{font-size:clamp(28px,3.2vw,42px)}
#simulateur .head{margin-bottom:var(--s16)}
#simulateur .head .t-lead{display:none}
}
/* ==========================================================================
51. LA CONSTELLATION DE L'ÉCOSYSTÈME
Trois familles de métiers reliées entre elles : les setteurs alimentent
les closers, les closers remontent au Head of Sales. Les points naissent
un à un, les liens se tracent, puis des impulsions circulent en continu.
========================================================================== */
.constel{position:relative;aspect-ratio:480/400;width:100%}
.constel-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.constel-liens line{stroke:rgba(143,187,255,.16);stroke-width:1;
stroke-dasharray:var(--l,200);stroke-dashoffset:var(--l,200);
transition:stroke-dashoffset .9s var(--ease)}
.constel.on .constel-liens line{stroke-dashoffset:0}
.constel-flux line{
stroke:#8FBBFF;stroke-width:1.8;stroke-linecap:round;
stroke-dasharray:12 999;stroke-dashoffset:var(--l,200);
opacity:0;
}
.constel.on .constel-flux line{opacity:.9;animation:constelFlux 3.6s linear infinite}
@keyframes constelFlux{to{stroke-dashoffset:0}}
.constel-points circle{
opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);
transition:opacity .5s var(--ease),transform .6s cubic-bezier(.16,1,.3,1);
}
.constel.on .constel-points circle{opacity:1;transform:none}
.constel-points .p-set{fill:rgba(143,187,255,.55)}
.constel-points .p-clo{fill:rgba(143,187,255,.85)}
.constel-points .p-hos{fill:#fff;filter:drop-shadow(0 0 12px rgba(143,187,255,.9))}
.constel.on .constel-points .p-hos{animation:constelPuls 3.6s ease-in-out infinite}
@keyframes constelPuls{0%,100%{r:9}50%{r:11}}
/* les trois étiquettes, posées sur leurs amas */
.constel-eti{
position:absolute;display:inline-flex;align-items:baseline;gap:6px;
padding:5px 11px;border-radius:var(--rf);
border:1px solid var(--line-d);background:rgba(11,26,42,.72);
backdrop-filter:blur(6px);
font-size:11px;font-weight:500;color:rgba(255,255,255,.82);white-space:nowrap;
opacity:0;transform:translateY(6px);
transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.constel.on .constel-eti{opacity:1;transform:none}
.constel-eti i{font-style:normal;font-weight:600;color:#8FBBFF;font-size:12px}
.constel .e-hos{left:50%;top:6%;translate:-50% 0;transition-delay:.9s}
.constel .e-clo{left:4%;bottom:34%;transition-delay:1.05s}
.constel .e-set{right:4%;bottom:8%;transition-delay:1.2s}
.constel-legende{display:grid;gap:var(--s8);margin-top:var(--s20)}
.constel-legende span{font-size:12px;color:var(--ink-soft);line-height:1.4}
.constel-legende b{color:#fff;font-weight:600}
/* --- le film reprend sa place dans la colonne ------------------------- */
.film{
position:relative;aspect-ratio:16/10;border-radius:var(--r24);overflow:hidden;
border:1px solid var(--line);background:#0B1A2A;cursor:pointer;
box-shadow:0 26px 60px -26px rgba(4,11,20,.9), inset 0 1px 0 rgba(255,255,255,.08);
}
.film img,.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film img{opacity:.82;transition:transform .8s var(--ease),opacity .5s var(--ease)}
.film:hover img{transform:scale(1.04);opacity:.7}
.film-video{opacity:0}
.film.a-video .film-video{opacity:1}
.film.a-video img{opacity:0}
.film::after{content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(7,19,32,.1),rgba(7,19,32,.55))}
.film-cta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
@media (prefers-reduced-motion:reduce){
.constel-flux line{animation:none}
.constel-points .p-hos{animation:none}
}
/* ==========================================================================
52. L'INSTALLATION — DES CARTES D'ÉTAPE, PAS UN RAIL
Références : onboard-card et how-it-works. Le principe : les étapes sont
EMPILÉES, celle qui est en cours passe devant — plus large, plus claire,
surélevée — pendant que les autres reculent. Sa barre se remplit. Un rail
avec des pastilles se lit comme un sommaire ; ça, ça se lit comme un
processus qui avance.
========================================================================== */
.frise{list-style:none;margin:0;padding:0;display:grid;gap:9px}
/* La première étape se calait sur l'œil de section, donc plus haut que le
titre : la colonne partait un cran trop haut. Elle démarre maintenant à la
hauteur du titre lui-même. */
@media (min-width:901px){ #modele .c7{margin-top:34px} }
.frise li{
position:relative;
display:grid;grid-template-columns:26px minmax(0,1fr);
column-gap:var(--s12);row-gap:11px;align-items:center;
padding:var(--s14) var(--s18);border-radius:14px;
/* Fonds PLEINS, jamais un voile de blanc : la section est passée à #071320,
et 5 % de blanc sur du quasi-noir ne fait plus une carte, ça fait une
tache. Le rang se lit à la valeur du fond et à l'élévation — plus aucune
étape n'est « à moitié affichée ». */
/* L'état de repos est déjà PLEIN : une étape qu'on n'a pas encore atteinte
doit se lire aussi bien que les autres. La progression se joue au ton et
à l'élévation de l'étape en cours, pas en éteignant les autres. */
background:#132A40;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
opacity:1;transform:scale(1);
transition:transform .55s var(--ease),background .55s var(--ease),
box-shadow .55s var(--ease);
}
/* l'étape faite recule d'un demi-ton, mais reste pleinement lisible */
.frise li.fait{
transform:scale(.99);background:#152D45;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
}
/* l'étape en cours vient devant */
.frise li.actif{
transform:scale(1.012);background:#1C4066;
box-shadow:inset 0 0 0 1px rgba(143,187,255,.34),
0 24px 46px -24px rgba(0,0,0,.95);
}
.frise-ico{
position:relative;display:grid;place-items:center;
width:26px;height:26px;border-radius:50%;
box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.40);
transition:box-shadow .45s var(--ease),background .45s var(--ease);
}
.frise-ico i{
font-style:normal;font-size:10px;font-weight:600;letter-spacing:.02em;
color:rgba(255,255,255,.88);transition:color .45s var(--ease),opacity .3s var(--ease);
}
/* l'anneau tourne tant que l'étape est en cours */
.frise li.actif .frise-ico{box-shadow:inset 0 0 0 1.4px rgba(143,187,255,.32)}
.frise li.actif .frise-ico i{color:#8FBBFF}
.frise li.actif .frise-ico::before{
content:'';position:absolute;inset:-1.4px;border-radius:50%;
border:1.4px solid transparent;border-top-color:#8FBBFF;
animation:friseTourne 1.1s linear infinite;
}
@keyframes friseTourne{to{transform:rotate(360deg)}}
/* une fois faite, le numéro cède la place à la coche */
.frise li.fait .frise-ico{background:#22C55E;box-shadow:none}
.frise li.fait .frise-ico i{opacity:0}
.frise li.fait .frise-ico::after{
content:'';position:absolute;left:9px;top:5.5px;width:5px;height:10px;
border:solid #08131F;border-width:0 1.8px 1.8px 0;transform:rotate(42deg);
}
.frise-txt{min-width:0}
.frise-txt b{
display:block;color:#fff;font-weight:600;
font-size:clamp(14px,1.2vw,16px);letter-spacing:-.025em;line-height:1.25;
}
.frise-txt em{
display:block;font-style:normal;margin-top:3px;
color:rgba(255,255,255,.78);font-size:12.5px;line-height:1.45;
}
.frise li.actif .frise-txt em{color:rgba(255,255,255,.85)}
.frise-barre{
grid-column:1 / -1;height:4px;border-radius:99px;
background:rgba(255,255,255,.14);overflow:hidden;
}
.frise-barre i{
display:block;height:100%;width:calc(var(--p,0) * 100%);border-radius:99px;
background:linear-gradient(90deg,rgba(59,125,240,.75),#8FBBFF);
transition:width .25s linear;
}
.frise li.fait .frise-barre i{background:linear-gradient(90deg,rgba(34,197,94,.75),#4ADE80)}
/* ce dont nous aurons besoin : une ligne, pas des cartes */
.besoins{
margin:0 0 var(--s56);padding-top:var(--s28);
border-top:1px solid var(--line);
}
/* Cette liste est une formalité administrative : elle doit exister, elle ne
doit pas peser dans la page. Repliée par défaut, elle s'ouvre d'un clic. */
.besoins > summary{
list-style:none;cursor:pointer;
display:flex;align-items:center;gap:var(--s12);
padding-bottom:var(--s6);
}
.besoins > summary::-webkit-details-marker{display:none}
.besoins > summary .t-eyebrow{margin:0}
.besoins > summary em{
font-style:normal;font-size:11px;letter-spacing:.04em;
color:rgba(255,255,255,.34);
}
.besoins > summary svg{
width:16px;height:16px;margin-left:auto;flex:none;
fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;
transition:transform .3s var(--ease),stroke .3s var(--ease);
}
.besoins > summary:hover svg{stroke:rgba(255,255,255,.85)}
.besoins[open] > summary svg{transform:rotate(180deg)}
.besoins .besoins-liste{margin-top:var(--s18)}
.besoins[open] .besoins-liste{animation:besoinsOuvre .42s var(--ease) both}
@keyframes besoinsOuvre{
from{opacity:0;transform:translateY(-6px)}
to {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
.besoins[open] .besoins-liste{animation:none}
.besoins > summary svg{transition:none}
}
.besoins-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s12)}
/* Quatre lignes de texte gris sur deux colonnes se lisaient comme une note de
bas de page. Ce sont quatre choses qu'on demande au client : elles méritent
d'être posées, chacune dans son cadre, avec son signe. */
.besoins-liste span{
position:relative;display:grid;align-content:start;gap:var(--s12);
padding:var(--s16) var(--s16) var(--s18);
border-radius:var(--r16,16px);
background:rgba(255,255,255,.035);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.075);
transition:background .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);
}
.besoins-liste span:hover{
background:rgba(59,125,240,.09);transform:translateY(-2px);
box-shadow:inset 0 0 0 1px rgba(143,187,255,.26),0 18px 34px -22px rgba(0,0,0,.9);
}
.besoins-liste em{
display:grid;place-items:center;width:34px;height:34px;flex:none;
border-radius:11px;background:rgba(59,125,240,.14);
box-shadow:inset 0 0 0 1px rgba(143,187,255,.20);
}
.besoins-liste em svg{
width:17px;height:17px;fill:none;stroke:#8FBBFF;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;
}
.besoins-liste b{
font-size:14.5px;font-weight:500;line-height:1.35;letter-spacing:-.01em;
color:var(--ink);
}
/* le numéro passe en filigrane dans le coin : il ordonne sans concurrencer */
.besoins-liste i{
position:absolute;top:var(--s14);right:var(--s14);
font-style:normal;font-size:11px;font-weight:600;letter-spacing:.04em;
color:rgba(143,187,255,.34);
}
@media (max-width:900px){
.besoins-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s10)}
.besoins-liste span{padding:var(--s14) var(--s14) var(--s16);gap:var(--s10)}
.besoins-liste b{font-size:13.5px}
.besoins-liste em{width:30px;height:30px;border-radius:10px}
.besoins-liste em svg{width:15px;height:15px}
.besoins-liste i{top:var(--s12);right:var(--s12);font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
.frise li{transform:none}
.frise li.actif .frise-ico::before{animation:none}
.frise-barre i{transition:none}
}
/* ==========================================================================
53. LA CONSOLE RESTE VIVANTE
Une fois posée, elle ne se fige pas : les barres respirent, la courbe
brille par intermittence, le point de veille bat. C'est un écran allumé.
========================================================================== */
@keyframes sparkVie{0%,100%{transform:scaleY(1)}50%{transform:scaleY(var(--v,1.14))}}
.console.on .spark i{
transform-origin:bottom;
animation:sparkVie var(--d,3.4s) ease-in-out var(--r,0s) infinite;
}
@keyframes veille{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(74,222,128,.55)}
50% {opacity:.55;box-shadow:0 0 0 5px rgba(74,222,128,0)}}
.console.on .dash-live i,.console.on .console-point{animation:veille 2.2s ease-in-out infinite}
@keyframes balayage{0%,88%,100%{opacity:0}92%{opacity:.5}}
.epan-large::after{
content:'';position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;
background:linear-gradient(105deg,transparent 38%,rgba(143,187,255,.16) 50%,transparent 62%);
}
.console.on .epan-large::after{animation:balayage 7.5s linear 3s infinite}
@keyframes pistePulse{0%,100%{filter:none}50%{filter:brightness(1.22)}}
.console.on .compare-nous .compare-piste i{animation:pistePulse 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
.console.on .spark i,.console.on .dash-live i,.console.on .console-point,
.console.on .epan-large::after,.console.on .compare-nous .compare-piste i{animation:none}
}
/* ==========================================================================
54. LES DEUX RESPIRATIONS EN CLAIR
Deux sections sortent du navy : « Ce qu'est Striker » et « Ils nous ont
confié leur vente ». Le contraste rend le reste plus sombre encore, et
ces deux-là sont celles où l'on doit LIRE, pas être impressionné.
Registre : blanc cassé, encre navy, filets fins, ombres portées douces.
========================================================================== */
.band--clair{
position:relative;
--paper:#FFFFFF;
--panel:#FFFFFF;
--card:#FFFFFF;
--ink:#0A1826;
--ink-soft:rgba(10,24,38,.60);
--ink-mute:rgba(10,24,38,.42);
--line:rgba(10,24,38,.10);
--line-2:rgba(10,24,38,.17);
--blue-pale:rgba(59,125,240,.10);
--sh1:0 1px 2px rgba(10,24,38,.06);
--sh2:0 16px 38px -18px rgba(10,24,38,.22);
--sh3:0 34px 70px -28px rgba(10,24,38,.30);
/* La planche de charte pose un blanc TEINTÉ DE BLEU (#E5F2F7). Sur écran,
collé à un site entièrement bleu nuit, ce bleu ne se lit pas comme une
nuance : il se lit comme un REFLET, comme si le fond sombre transperçait
la page blanche. On garde donc le mouvement de la charte — un blanc qui
s'ouvre en haut au centre — mais posé sur un gris NEUTRE, sans dominante.
Le fond est nommé : la preuve le repeint sur une couche à elle, sans que
le fondu de la section le dilue (voir plus bas). */
--fond-clair:
url(../assets/img/grain-clair.png) repeat 0 0 / 256px 256px,
radial-gradient(118% 100% at 50% -4%,#FFFFFF 0%,rgba(255,255,255,0) 78%),
#F5F6F7;
background:var(--fond-clair) !important;
color:var(--ink);
backdrop-filter:none;
isolation:isolate;
}
/* Plus de filet : un filet marque une coupure, or on veut l'inverse. Le blanc
sort du navy et y retourne par un dégradé, et la trame de points s'éteint
avec lui — voir le raccord plus bas. */
.band--clair,
.band--clair .t-h1,.band--clair .t-h2,.band--clair .t-h3,
.band--clair .t-lead,.band--clair .t-body,.band--clair b,.band--clair strong{color:var(--ink)}
.band--clair .t-eyebrow{color:var(--bleu,#3B7DF0)}
.band--clair .t-small,.band--clair .t-xs,.band--clair p{color:var(--ink-soft)}
.band--clair .measure b{color:var(--ink)}
/* le surlignage de titre garde le bleu, mais posé sur du clair */
.band--clair .surlig.on{color:#fff}
/* Un bouton blanc sur une page blanche ne se voit pas : sur les sections
claires, il prend le bleu nuit de la charte — la même encre que les titres,
donc le bouton appartient à la page au lieu d'y être posé. */
.band--clair .btn--light{
background:var(--navy);color:#fff;
box-shadow:0 12px 26px -12px rgba(11,26,42,.55);
}
.band--clair .btn--light .pip{background:rgba(255,255,255,.14)}
.band--clair .btn--light::before{
background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
}
.band--clair .btn--light:hover{
background:var(--navy-deep);
box-shadow:0 16px 32px -12px rgba(11,26,42,.65);
}
/* le mot de la promesse passe en bleu de marque, sans bloc : le surlignage
plein est déjà pris par le titre juste au-dessus, deux dans le même bloc
se neutraliseraient */
.az{color:var(--blue);font-weight:inherit;font-style:italic}
.band--clair .az{color:#1F5FCE}
/* --- les composants passent en clair ---------------------------------- */
.band--clair .ui:not(.ui--plain),
.band--clair .ui-card,.band--clair .ui-metric,.band--clair .quote{
background:#fff;border-color:var(--line);color:var(--ink);
box-shadow:var(--sh2);backdrop-filter:none;
}
/* sur du blanc franc, les cartes se tiennent par l'ombre, pas par un fond */
.band--clair .ui-card,.band--clair .ui-metric{background:#FCFDFE}
.band--clair .ui-icon{background:rgba(59,125,240,.10);color:#1F5FCE;box-shadow:none}
.band--clair .ui-icon--ink{background:rgba(10,24,38,.06);color:rgba(10,24,38,.7)}
.band--clair .ui-chip i{background:rgba(10,24,38,.06);color:rgba(10,24,38,.55)}
/* --- le circuit : mêmes formes, encre inversée ------------------------- */
.band--clair .circuit-traces path{stroke:rgba(10,24,38,.16)}
.band--clair .circuit-flux path{stroke:#2C6BE0}
.band--clair .circuit-plots circle{fill:#2C6BE0;opacity:.6}
.band--clair .circuit-puce rect{fill:#0A1826;stroke:rgba(10,24,38,.16)}
.band--clair .circuit-pattes rect{fill:rgba(10,24,38,.35)}
.band--clair .circuit-puce text{fill:#fff}
.band--clair .circuit-puce .circuit-sous{fill:rgba(255,255,255,.55)}
.band--clair .circuit-noeud{color:var(--ink)}
.band--clair .circuit-noeud i{color:#2C6BE0}
.band--clair .circuit-noeud em{color:var(--ink-mute)}
.band--clair .circuit.joue .circuit-puce{animation:puceClair 3.4s ease-in-out infinite}
@keyframes puceClair{0%,100%{filter:drop-shadow(0 10px 20px rgba(10,24,38,.18))}
50% {filter:drop-shadow(0 10px 30px rgba(44,107,224,.42))}}
/* --- la pile de clients ------------------------------------------------ */
.band--clair .cf-card{
border-color:rgba(10,24,38,.10);
box-shadow:0 30px 64px -26px rgba(10,24,38,.36),0 0 0 1px rgba(10,24,38,.05);
}
.band--clair .note h3,.band--clair .note b{color:var(--ink)}
.band--clair .note-qui{color:var(--ink-mute)}
.band--clair .note-res > div{border-color:var(--line)}
.band--clair .note-res b{color:#1F5FCE}
.band--clair .cf-dots button{background:rgba(10,24,38,.18)}
.band--clair .cf-dots button.on{background:var(--bleu,#3B7DF0)}
/* ==========================================================================
55. LA GRILLE FINE DU HERO
Un quadrillage bleu très léger qui dérive lentement, éteint sur les bords.
Il donne une assise technique à la page d'accueil sans jamais se voir.
========================================================================== */
.grille-fine{
position:absolute;inset:0;z-index:0;pointer-events:none;
/* Le quadrillage a été retiré : il ne restait qu'une trame de fond qui
concurrençait le titre. Seule la nappe lumineuse reste, pour la
profondeur. */
-webkit-mask-image:radial-gradient(112% 82% at 50% 44%,#000 8%,rgba(0,0,0,.45) 46%,transparent 78%);
mask-image:radial-gradient(112% 82% at 50% 44%,#000 8%,rgba(0,0,0,.45) 46%,transparent 78%);
}
/* une lueur qui balaie la grille de temps en temps */
.grille-fine::after{
content:'';position:absolute;inset:-20%;
background:radial-gradient(28% 34% at 50% 50%,rgba(143,187,255,.16),transparent 70%);
animation:grilleLueur 14s ease-in-out infinite;
}
@keyframes grilleLueur{
0%,100%{transform:translate3d(-18%,12%,0)}
50% {transform:translate3d(18%,-12%,0)}
}
.hero > .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
.grille-fine::after{animation:none}
}
/* ==========================================================================
56. LA CARTE TRAJECTOIRE
Deux bornes reliées par une flèche : ce qui est fait, ce qui est visé.
Le mot « projeté » est écrit, jamais sous-entendu.
========================================================================== */
.traj{display:grid;gap:var(--s12);margin-top:var(--s6)}
.traj-bornes{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s16);align-items:center}
.traj-b{display:grid;gap:2px}
.traj-b span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.traj-b sup{font-size:.62em;vertical-align:super}
.traj-b b{font-size:clamp(20px,2vw,30px);font-weight:600;letter-spacing:-.035em;color:#fff;line-height:1}
.traj-b em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.42)}
.traj-b--cible b{color:#8FBBFF;text-shadow:0 0 22px rgba(143,187,255,.45)}
.traj-b--cible em{color:rgba(143,187,255,.68)}
.traj-fleche svg{width:74px;height:18px;display:block}
.traj-fleche path{
fill:none;stroke:rgba(143,187,255,.5);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:130;stroke-dashoffset:130;
}
.console.on .traj-fleche path{animation:trajTrace 1.1s ease-out 1.9s forwards}
@keyframes trajTrace{to{stroke-dashoffset:0}}
.traj-piste{height:3px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.traj-piste i{
display:block;height:100%;width:0;border-radius:2px;
background:linear-gradient(90deg,rgba(59,125,240,.55),#8FBBFF);
box-shadow:0 0 12px rgba(59,125,240,.6);
}
.console.on .traj-piste i{animation:trajPiste 1.4s cubic-bezier(.16,1,.3,1) 2.1s forwards}
@keyframes trajPiste{to{width:26%}} /* 1,3 sur 5 : la barre dit la vérité */
@media (max-width:900px){
.epan-large,.epan-traj{grid-column:auto;grid-row:auto}
}
@media (prefers-reduced-motion:reduce){
.traj-fleche path{stroke-dashoffset:0;animation:none}
.traj-piste i{width:26%;animation:none}
}
/* ==========================================================================
57. LE SIMULATEUR — GRAMMAIRE DE CARTE
Référence : access-manager-card. Ce qui fait sa tenue n'est pas un effet,
c'est une discipline : UNE carte, un padding unique, un rythme vertical
unique, et CHAQUE rangée bâtie pareil — pastille + deux lignes à gauche,
valeur à droite, alignées sur la même colonne.
Deux ajouts par rapport au premier jet :
· les fonds sont OPAQUES. Empiler des translucides sur du translucide
donnait une bouillie où plus rien ne se détachait.
· la carte porte son mode. « Aujourd'hui » est un constat de perte, il est
rouge. « Avec Striker » est un gain, il est bleu et le chiffre est vert.
La bascule doit se VOIR, pas seulement se lire.
========================================================================== */
#simulateur{padding-block:clamp(34px,4.2vh,56px)}
#simulateur .head{max-width:660px;margin-bottom:var(--s16)}
#simulateur .head .t-lead{font-size:14.5px;line-height:1.5}
.sim{
display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
gap:var(--s20);align-items:stretch;
}
/* --- la carte : fond plein, une seule ombre ---------------------------- */
.scard{
--acc:#3B7DF0; --acc-clair:#8FBBFF; --acc-faible:rgba(59,125,240,.14);
position:relative;
display:grid;align-content:start;gap:var(--s16);
padding:var(--s20);border-radius:20px;
background:#0E2338;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 30px 68px -34px rgba(4,11,20,.95), inset 0 1px 0 rgba(255,255,255,.06);
}
/* le mode « constat » : registre rouge, celui de ce qui ne marche pas */
.sim-out[data-mode="auj"]{
--acc:#E5322B; --acc-clair:#FF8A80; --acc-faible:rgba(229,50,43,.14);
border-color:rgba(229,50,43,.26);
box-shadow:0 30px 68px -34px rgba(4,11,20,.95),
inset 0 1px 0 rgba(255,255,255,.06),
0 0 0 1px rgba(229,50,43,.10);
}
/* Le mode « projection » : tout ce qui était rouge passe au vert. Le rouge
dit ce qui part, le vert dit ce qui rentre — c'est la même information
retournée, elle doit se lire à la couleur avant de se lire au chiffre. */
.sim-out[data-mode="striker"]{
--acc:#22C55E; --acc-clair:#4ADE80; --acc-faible:rgba(34,197,94,.14);
border-color:rgba(34,197,94,.28);
box-shadow:0 30px 68px -34px rgba(4,11,20,.95),
inset 0 1px 0 rgba(255,255,255,.06),
0 0 0 1px rgba(34,197,94,.14);
}
/* un liseré de couleur en haut de la carte : la bascule se voit d'un coup */
.sim-out::before{
content:'';position:absolute;left:20px;right:20px;top:0;height:2px;border-radius:0 0 3px 3px;
background:linear-gradient(90deg,transparent,var(--acc),transparent);
transition:background .4s var(--ease);
}
.scard-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--s16)}
.scard-tete-g{display:flex;align-items:center;gap:var(--s12);min-width:0}
.scard-ico{
display:grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:none;
background:var(--acc-faible);box-shadow:inset 0 0 0 1px var(--acc-faible);
transition:background .4s var(--ease);
}
.scard-ico svg{width:19px;height:19px;fill:none;stroke:var(--acc-clair);stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s var(--ease)}
.scard-txt b{display:block;font-size:16px;font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1.2}
.scard-txt em{display:block;font-style:normal;font-size:12.5px;color:rgba(255,255,255,.45);margin-top:2px}
.scard-bloc{display:grid;gap:var(--s12)}
.scard-lab{
margin:0;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:rgba(255,255,255,.40);
}
.scard-hero{display:grid;gap:var(--s6)}
/* --- LA rangée : une seule et même construction partout ----------------- */
.srow{display:flex;align-items:center;justify-content:space-between;gap:var(--s12)}
.srow-g{display:flex;align-items:center;gap:var(--s12);min-width:0}
.srow-d{display:flex;align-items:center;gap:var(--s10);flex:none}
.srow-ico{
display:grid;place-items:center;width:29px;height:29px;border-radius:9px;flex:none;
font-size:11px;font-weight:600;letter-spacing:.02em;
color:var(--acc-clair);background:var(--acc-faible);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
transition:color .4s var(--ease),background .4s var(--ease);
}
.srow-ico--fort{color:#08131F;background:var(--acc-clair);box-shadow:none;font-size:13px}
.srow-txt{min-width:0}
.srow-txt b{display:block;font-size:13px;font-weight:500;color:rgba(255,255,255,.92);line-height:1.25}
.srow-txt span{display:block;font-size:11px;color:rgba(255,255,255,.42);margin-top:1px}
.srow-val{
flex:none;font-size:15px;font-weight:600;color:#fff;
font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.srow-val.hot{color:var(--acc-clair)}
/* le « i » : l'explication se demande, elle ne surgit pas au survol ------ */
.srow-i{
position:relative;
display:grid;place-items:center;width:18px;height:18px;flex:none;
border-radius:50%;cursor:pointer;
font:600 10px/1 Avenir,-apple-system,serif;font-style:italic;
color:rgba(255,255,255,.50);background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.srow-i:hover{color:#fff;background:rgba(255,255,255,.14)}
.ouvert > .srow > .srow-d > .srow-i,
.ouvert > .srow-i{color:#08131F;background:var(--acc-clair);border-color:transparent}
.srow-i--coin{position:absolute;top:var(--s12);right:var(--s12)}
/* --- les réglages : même rangée, curseur en dessous -------------------- */
.sim-inputs{display:grid;gap:var(--s14)}
.sim-field{display:grid;gap:9px;padding:0;border:0}
.sim-label{display:flex;align-items:center;justify-content:space-between;gap:var(--s16)}
.sim-label span{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.78)}
.sim-label b{
flex:none;min-width:64px;text-align:center;
padding:5px 10px;border-radius:9px;
font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;
background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.sim-field input[type=range]{height:4px}
/* --- le chiffre principal --------------------------------------------- */
.sim-total{
font-size:clamp(30px,3.6vw,44px);font-weight:600;letter-spacing:-.045em;line-height:1;
color:#fff;font-variant-numeric:tabular-nums;
}
.sim-out[data-mode="auj"] .sim-total{color:#FF8A80;text-shadow:0 0 34px rgba(229,50,43,.35)}
.sim-out[data-mode="striker"] .sim-total{color:#4ADE80;text-shadow:0 0 36px rgba(74,222,128,.38)}
#simSub{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.48)}
/* --- l'écart, les fuites, les leviers : la même carte intérieure -------- */
.sim-vs,.sim-leak,.sim-tr-row{
position:relative;
display:grid;gap:9px;padding:var(--s12) var(--s14);border-radius:14px;
background:#132C45; /* opaque : sinon plus rien ne se détache */
border:1px solid rgba(255,255,255,.07);
}
/* Le « i » du coin est positionné en absolu : sans cette réserve à droite il
vient coller la valeur de la première ligne — « 24 000 € » l'atteignait
pile. 12 px d'offset + 18 px de bouton + 16 px de respiration. */
.sim-vs{gap:var(--s10);padding-right:46px}
.sim-leaks{display:grid;gap:8px}
.sim-leak{transition:background .3s var(--ease),border-color .3s var(--ease)}
.sim-leak:hover,.sim-leak.ouvert{background:#183553;border-color:var(--acc-faible)}
.sim-leak .ui-track{height:8px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.sim-leak .ui-track i{
display:block;height:100%;width:var(--w,0);border-radius:99px;
background:linear-gradient(180deg,var(--acc-clair),var(--acc));
box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
transition:width .55s cubic-bezier(.16,1,.3,1),background .4s var(--ease);
}
/* l'explication s'ouvre AU-DESSUS : la carte ne change jamais de hauteur */
.sim-aide{
position:absolute;left:var(--s12);right:var(--s12);bottom:calc(100% + 8px);z-index:8;
margin:0;padding:11px 13px;border-radius:12px;line-height:1.45;font-size:11.5px;
background:#08131F;border:1px solid var(--acc-faible);color:rgba(255,255,255,.78);
box-shadow:0 22px 48px -18px rgba(0,0,0,.9);
opacity:0;transform:translateY(4px);pointer-events:none;
transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.ouvert > .sim-aide{opacity:1;transform:none;pointer-events:auto}
.sim-note{
margin:0;padding:10px 12px;border-radius:12px;line-height:1.45;
background:var(--acc-faible);border:1px solid rgba(255,255,255,.07);
color:rgba(255,255,255,.60);
}
/* la table de projection : même rangée, deux colonnes sur large écran */
.sim-tr{border:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sim-tr-row.is-flat .srow-val{color:rgba(255,255,255,.55)}
@media (max-width:1000px){ .sim-tr{grid-template-columns:1fr} }
/* la bascule prend sa place dans l'en-tête, à droite */
.sim-out .seg{flex:none;margin:0}
.sim-out .seg button{font-size:12px;padding:7px 13px}
#simCta{justify-self:start;margin-top:auto}
@media (max-width:900px){
.sim{grid-template-columns:1fr;gap:var(--s16)}
.scard-tete{flex-wrap:wrap;gap:var(--s12)}
}
@media (prefers-reduced-motion:reduce){
.sim-leak,.sim-leak .ui-track i{transition:none}
}
/* ==========================================================================
58. LA CONSTELLATION DES PÔLES
Dans la carte « +30 », des nœuds-avatars reliés en réseau, parcourus par une
impulsion. Silhouettes neutres : on compte des pôles, pas des personnes.
========================================================================== */
.ekpi-constel{display:block;margin-top:var(--s6)}
.constel-kpi{display:block;width:100%;height:auto;max-width:250px;overflow:hidden}
.ck-liens line{stroke:rgba(143,187,255,.22);stroke-width:1}
.ck-liens .ck-saut{stroke:rgba(143,187,255,.10)}
.ck-flux{
fill:none;stroke:#8FBBFF;stroke-width:1.8;stroke-linecap:round;
stroke-dasharray:24 300;stroke-dashoffset:324;
filter:drop-shadow(0 0 5px rgba(143,187,255,.9));
opacity:0;
}
.console.on .ck-flux,
.ekpi-constel.vu .ck-flux{animation:ckFlux 4.2s linear 2.2s infinite}
@keyframes ckFlux{
0% {stroke-dashoffset:324;opacity:0}
6% {opacity:1}
94% {opacity:1}
100%{stroke-dashoffset:0;opacity:0}
}
/* Le disque doit se détacher du fond de la carte, sinon le réseau se lit
comme une chenille noire : plus clair que le panneau, jamais plus sombre. */
.ck-fond{fill:#24486E}
.ck-anneau{fill:none;stroke:rgba(143,187,255,.55);stroke-width:1.2}
.ck-tete{fill:rgba(255,255,255,.80)}
.ck-buste{fill:none;stroke:rgba(255,255,255,.80);stroke-width:2;stroke-linecap:round}
/* un nœud sur trois est « actif » : anneau bleu plein et halo qui bat */
.ck-noeud.est-actif .ck-fond{fill:#2E5C8C}
.ck-noeud.est-actif .ck-anneau{stroke:#8FBBFF;stroke-width:1.5}
.ck-noeud.est-actif .ck-tete{fill:#fff}
.ck-noeud.est-actif .ck-buste{stroke:#fff}
.console.on .ck-noeud.est-actif,
.ekpi-constel.vu .ck-noeud.est-actif{animation:ckBat 3.4s ease-in-out calc(var(--r,0s) + 1.2s) infinite}
@keyframes ckBat{
0%,100%{filter:drop-shadow(0 0 0 rgba(59,125,240,0))}
50% {filter:drop-shadow(0 0 7px rgba(59,125,240,.85))}
}
/* Les nœuds se posent par transition, pas par keyframes : si l'animation ne
part pas, ils sont visibles quand même. */
.ck-noeud{opacity:0;transform:translateY(4px);
transition:opacity .5s var(--ease) var(--r,0s),transform .5s var(--ease) var(--r,0s)}
.console.on .ck-noeud,
.ekpi-constel.vu .ck-noeud{opacity:1;transform:none}
@media (max-width:900px){ .constel-kpi{max-width:none} }
@media (prefers-reduced-motion:reduce){
.ck-noeud{opacity:1;transform:none;transition:none;animation:none}
.ck-flux{display:none}
}
/* ==========================================================================
59. LE RIDEAU — la même ouverture au lettrage, réutilisable
Ce qui marche pour NOS CHIFFRES marche pour L'INSTALLATION : la section
précédente reste ÉPINGLÉE, une plaque se pose dessus en fondu, le mot
s'écrit en blanc plein, tient, puis se creuse et traverse l'écran — la
section suivante est déjà en place derrière.
========================================================================== */
.rideau{
position:relative;height:250vh;z-index:3;background:transparent;
margin-top:-150vh; /* le voile se pose sur l'équipe épinglée */
margin-bottom:-200vh; /* l'installation attend déjà derrière la plaque */
}
.rideau-scene{position:sticky;top:0;height:100vh;pointer-events:none;
opacity:var(--fond,0);will-change:opacity}
.rideau-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.rideau-mot{
font-family:Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
font-weight:600;letter-spacing:-.045em;
font-size:var(--taille,0);
}
.rideau-mot-plein{opacity:var(--marque,0)}
/* l'équipe s'épingle : c'est elle que le voile recouvre sans qu'elle bouge */
@media (min-width:901px){
#equipe{
min-height:0;height:220vh;display:block;align-content:normal;padding-block:0;
position:relative;z-index:1;
}
#equipe > .wrap{
position:sticky;top:0;height:100vh;display:grid;align-content:center;
/* Le haut doit dégager la barre de menu FIXE : sans ça l'œilleton
« L'ÉQUIPE » venait se coller sous le menu dès que le contenu
remplissait la hauteur d'écran. */
padding-block:calc(var(--nav-h) + clamp(34px,5.5vh,68px)) clamp(40px,5vh,64px);
}
/* l'installation est déjà épinglée quand les lettres s'ouvrent */
/* Elle était épinglée 300vh, dont 200vh consommés DERRIÈRE la plaque : une
fois les lettres ouvertes il ne restait presque plus rien avant qu'elle
s'en aille. Elle tient maintenant 180vh à découvert. */
#modele{
min-height:0;height:380vh;display:block;align-content:normal;padding-block:0;
position:relative;z-index:2;
opacity:var(--ar,1); /* verrou : elle n'apparaît pas avant son titre */
}
#modele > .wrap{
position:sticky;top:0;height:100vh;display:grid;align-content:center;
padding-block:clamp(40px,5vh,64px);
}
}
/* les témoignages se posent sur la fin de la méthode, ils ne remontent plus */
@media (min-width:901px){
#voix{
min-height:0;height:220vh;display:block;align-content:normal;padding-block:0;
margin-top:-100vh;position:relative;z-index:2;opacity:var(--ar,1);
}
#voix > .wrap{
position:sticky;top:0;height:100vh;display:grid;align-content:center;
padding-block:clamp(40px,5vh,64px);
}
}
/* ==========================================================================
Le rideau existe AUSSI sur mobile. Même recette que le chargement : pas de
chevauchement en haut — c'est lui qui fait cohabiter deux scènes — mais un
chevauchement en bas, pour que l'installation soit déjà sous les lettres
quand elles s'ouvrent. Sans ça le trou donne sur du vide.
========================================================================== */
@media (max-width:900px){
.rideau{
/* même raison qu'au chargement : de la course pour que la traversée ait
assez d'images */
height:320vh;margin-top:0;margin-bottom:-106vh;
z-index:3;position:relative;
}
/* l'installation attend derrière la plaque, et n'existe pas avant elle */
#modele{position:relative;z-index:2;opacity:var(--ar,1)}
}
@supports (height:100svh){
@media (max-width:900px){ .rideau{height:165svh} }
}
@media (prefers-reduced-motion:reduce){
.rideau{display:none}
}
/* ==========================================================================
60. LE DASHBOARD REMPLIT L'ÉCRAN
Il tenait dans une bande de 435 px au milieu d'un écran de 800 : un
bandeau, pas une console. Il occupe maintenant toute la fenêtre épinglée,
et les panneaux se partagent la hauteur restante à parts égales.
========================================================================== */
@media (min-width:901px){
#chiffres > .wrap{align-content:stretch;min-height:0}
/* La console ne s'ÉTIRE plus pour remplir l'écran : elle prend la hauteur
de ce qu'elle affiche et se centre. L'étirement forcé creusait des vides
dans chaque panneau — un dashboard aéré, pas un dashboard vide. */
#chiffres .ecran{display:grid;grid-template-rows:auto auto;height:auto;max-height:100%;min-height:0;align-self:center}
#chiffres .ecran-corps{min-height:0}
#chiffres .ecran-nav{min-height:0}
#chiffres .ecran-vue{min-height:0;grid-template-rows:auto minmax(0,1fr)}
/* Les deux rangs ne se partagent plus la hauteur à parts égales : la
trajectoire est un widget de 80 px, lui donner la moitié de l'écran
creusait un vide en travers du dashboard. Elle prend ce qu'il lui faut,
le premier rang prend le reste. */
/* Deux rangs : le premier prend la place, le second (la trajectoire, un
widget de 80 px) prend ce qu'il lui faut. Et l'ensemble est PLAFONNÉ :
au-delà, les panneaux ne font que se creuser. Ce qui reste d'écran passe
au-dessus et au-dessous de la console, pas à l'intérieur. */
#chiffres .ecran-panneaux{
min-height:0;grid-template-rows:minmax(0,1fr) auto;
max-height:clamp(400px,50vh,500px);
}
#chiffres .epan{min-height:0;overflow:hidden;align-content:space-between}
#chiffres .epan-large{align-content:start}
/* le panneau d'activité : les indicateurs en haut, la sparkline occupe le reste */
#chiffres .epan:has(.spark){grid-template-rows:auto auto minmax(0,1fr)}
#chiffres .epan .spark{height:100%;min-height:52px;align-items:flex-end;gap:4px}
#chiffres .epan .spark i{flex:1;max-width:none;border-radius:3px 3px 0 0}
/* la trajectoire s'étale sur toute la largeur des deux colonnes */
#chiffres .epan-traj .traj{align-content:center;height:100%}
#chiffres .epan-traj .traj-bornes{max-width:560px}
/* Les valeurs étaient coupées : « 18-21 % » ne tient pas dans 66 px et
trois indicateurs ne tiennent pas dans 88 px chacun. */
/* la piste doit garder une largeur : c'est elle qui porte l'information */
#chiffres .epan .compare-ligne{
grid-template-columns:minmax(0,1fr) minmax(44px,1.1fr) auto;gap:var(--s8);
}
#chiffres .compare-ligne > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chiffres .compare-ligne > b{text-align:right;white-space:nowrap;font-size:13.5px}
/* l'en-tête d'un panneau étroit passe à la ligne au lieu d'être rognée */
#chiffres .epan-tete{flex-wrap:wrap;row-gap:4px}
#chiffres .dash-kpis{gap:6px}
#chiffres .epan .dash-kpi{padding:var(--s10) var(--s8)}
#chiffres .dash-kpi span{font-size:9.5px;letter-spacing:.06em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chiffres .dash-kpi b{font-size:17px;white-space:nowrap}
#chiffres .dash-kpi{min-width:0}
/* le grand panneau lit comme un graphique, pas comme un vide */
#chiffres .epan-large{position:relative}
#chiffres .epan-large::before{
content:'';position:absolute;left:var(--s18);right:var(--s18);top:38%;bottom:var(--s18);
z-index:1;pointer-events:none;
background:repeating-linear-gradient(180deg,
rgba(255,255,255,.055) 0 1px,transparent 1px 25%);
}
#chiffres .epan-large .courbe{height:62%;z-index:1}
#chiffres .ekpi{align-content:center;padding-block:var(--s24)}
/* la courbe respire sur toute la hauteur libre du grand panneau */
#chiffres .epan-large .courbe{height:66%}
#chiffres .epan .spark{height:auto;min-height:44px;flex:1;align-items:flex-end}
#chiffres .dash-kpis{align-content:start}
}
/* ==========================================================================
61. LA BASCULE — une phrase, puis le test
Même partition que le constat : plein écran, épinglé, la phrase se révèle
mot à mot, puis le simulateur se pose dessus sans que la page bouge.
========================================================================== */
.acte-mot{position:relative;height:210vh;background:transparent;z-index:1}
.acte-mot-scene{
position:sticky;top:0;height:100vh;
display:grid;align-content:center;justify-items:center;gap:var(--s24);
padding-inline:var(--gut);text-align:center;background:#070E17;
}
.acte-mot-oeil{margin:0;opacity:var(--oeil,0);transform:translateY(var(--oeilY,14px));}
.acte-mot-phrase{
max-width:min(980px,100%);text-align:center;
font-size:clamp(24px,4vw,58px);line-height:1.16;letter-spacing:-.035em;
}
@media (min-width:901px){
/* le simulateur se pose sur la phrase : il ne remonte pas du bas */
#simulateur{
min-height:0;height:200vh;display:block;align-content:normal;padding-block:0;
margin-top:-100vh;position:relative;z-index:2;opacity:var(--ar,1);
}
#simulateur > .wrap{
position:sticky;top:0;height:100vh;display:grid;align-content:center;
padding-block:clamp(34px,4.2vh,56px);
}
}
@media (prefers-reduced-motion:reduce){
.acte-mot{height:auto;padding-block:var(--sec)}
.acte-mot-scene{position:static;height:auto}
.acte-mot-oeil{opacity:1;transform:none}
}
/* ==========================================================================
62. À QUI ÇA NE CONVIENT PAS — un énoncé à la fois
Référence : testimonal-slider. Un halo, une phrase au centre, et une rangée
de pastilles ; celle qui est active porte le rouge — c'est la couleur de ce
qui ne marche pas partout ailleurs sur le site, elle dit la même chose ici. Trois cartes plates
devenaient trois consolations ; là, chaque cas se lit seul.
========================================================================== */
.dire{position:relative;display:grid;justify-items:center;gap:var(--s24);padding-block:var(--s24)}
/* Le halo s'arrêtait net à 70 % de sa course, dans une boîte arrondie qui le
coupait au ras du texte : on voyait l'arc de la boîte et le palier du
dégradé. Ici la lueur atteint exactement zéro au bord de sa propre ellipse,
par quatre paliers rapprochés, et un flou large mange ce qui pourrait
encore se lire comme une bande. Aucune arête ne peut apparaître. */
.dire-halo{
position:absolute;left:50%;top:-9%;translate:-50% 0;
width:min(920px,116%);aspect-ratio:2.1/1;pointer-events:none;z-index:0;
background:radial-gradient(50% 50% at 50% 50%,
rgba(229,50,43,.24) 0%,
rgba(229,50,43,.145) 32%,
rgba(229,50,43,.062) 56%,
rgba(229,50,43,.018) 78%,
rgba(229,50,43,0) 100%);
filter:blur(26px);
animation:direHalo 7s ease-in-out infinite;
}
@keyframes direHalo{0%,100%{opacity:.7}50%{opacity:1}}
.dire-scene{position:relative;z-index:1;display:grid;justify-items:center;gap:var(--s18)}
.dire-ico{
display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
background:rgba(229,50,43,.12);box-shadow:inset 0 0 0 1px rgba(229,50,43,.30);
}
.dire-ico svg{width:22px;height:22px;fill:none;stroke:#FF6B5E;
stroke-width:1.9;stroke-linecap:round}
.dire-mot{
margin:0;max-width:min(820px,100%);text-align:center;
font-size:clamp(20px,2.9vw,36px);line-height:1.24;letter-spacing:-.03em;
font-weight:600;color:#fff;text-wrap:pretty;
transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.dire-mot b{color:#FF6B5E;font-weight:600}
.dire-mot.change{opacity:0;transform:translateY(8px)}
.dire-pills{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s10)}
.dire-pills button{
padding:9px 18px;border-radius:999px;cursor:pointer;
font:500 13px/1 Avenir,-apple-system,sans-serif;letter-spacing:-.01em;
color:rgba(255,255,255,.62);background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);
transition:color .3s var(--ease),background .3s var(--ease),
border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.dire-pills button:hover{color:#fff;background:rgba(255,255,255,.09)}
.dire-pills button.on{
color:#fff;background:#E5322B;border-color:transparent;
/* la pastille garde sa lueur, mais assez resserrée pour ne pas se mélanger
au halo du fond et former une flaque */
box-shadow:0 8px 20px -12px rgba(229,50,43,.85);
}
@media (prefers-reduced-motion:reduce){
.dire-halo{animation:none}
.dire-mot{transition:none}
}
/* ==========================================================================
63. LE MOTIF DE POINTS DES SECTIONS CLAIRES
Référence : dot-pattern. Une trame de points très pâle, éteinte sur les
bords par un masque radial. Sur du blanc franc, c'est ce qui empêche la
page de paraître vide sans jamais attirer l'œil.
========================================================================== */
.band--clair > .points{
position:absolute;inset:0;z-index:0;pointer-events:none;
--pas:20px; --pt:1.4px;
background-image:radial-gradient(circle at center,rgba(10,24,38,.154) var(--pt),transparent var(--pt));
background-size:var(--pas) var(--pas);
-webkit-mask-image:radial-gradient(118% 86% at 50% 42%,#000 12%,rgba(0,0,0,.5) 48%,transparent 80%);
mask-image:radial-gradient(118% 86% at 50% 42%,#000 12%,rgba(0,0,0,.5) 48%,transparent 80%);
}
/* une nappe de points plus dense derrière le titre, qui respire lentement */
.band--clair > .points::after{
content:'';position:absolute;inset:0;
background-image:radial-gradient(circle at center,rgba(59,125,240,.266) 1.6px,transparent 1.6px);
background-size:calc(var(--pas) * 2) calc(var(--pas) * 2);
-webkit-mask-image:radial-gradient(38% 46% at 26% 34%,#000,transparent 72%);
mask-image:radial-gradient(38% 46% at 26% 34%,#000,transparent 72%);
animation:pointsRespire 9s ease-in-out infinite;
}
@keyframes pointsRespire{0%,100%{opacity:.55}50%{opacity:1}}
.band--clair > .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
.band--clair > .points::after{animation:none}
}
/* ==========================================================================
64. LA COUPURE CLAIR ↔ SOMBRE — nette, pas fondue
Relevé sur les deux références citées :
· libertywebi.fr enchaîne des blocs PLEINS qui se coupent net —
#FBFAF8, #14161C, #FFFFFF, #F3F1EC — aucun dégradé, aucun arrondi.
· giants.eu ne peint même pas les sections : un seul fond, et un filet
de 1 px entre chacune.
Aucun des deux ne fond quoi que ce soit. Un dégradé entre deux aplats est
toujours une zone morte : ni l'une ni l'autre couleur, et un bord quelque
part. On coupe donc franchement, et c'est le CONTRASTE qui fait le passage.
========================================================================== */
.band--clair{border-block:0}
/* ==========================================================================
65. LE PIED DE PAGE
Référence : hover-footer. Le lettrage STRIKER dort en fond, en simple
contour ; il ne se colore que là où passe le curseur. Le reste est une
grille de quatre colonnes, la marque à gauche, et une barre légale en bas.
========================================================================== */
.pied{
position:relative;overflow:hidden;isolation:isolate;
background:#040B14;color:rgba(255,255,255,.60);
padding:clamp(48px,7vh,86px) 0 0;
border-top:1px solid rgba(255,255,255,.08);
}
/* la nappe du lettrage, derrière tout le reste */
.pied-fond{
position:absolute;left:0;right:0;bottom:-4%;height:62%;z-index:0;
pointer-events:none;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 32%);
mask-image:linear-gradient(180deg,transparent,#000 32%);
}
.pied-svg{width:100%;height:100%;display:block}
.pied-mot{
font-family:Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
font-weight:600;font-size:190px;letter-spacing:-.06em;
}
.pied-mot-trait{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
.pied-mot-plein{opacity:0;transition:opacity .45s var(--ease)}
.pied.eveille .pied-mot-plein{opacity:1}
.pied-grille{
position:relative;z-index:1;
display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;
gap:var(--s40) var(--s48);align-items:start;
}
.pied-col--marque{display:grid;justify-items:start;gap:var(--s16);max-width:38ch}
.pied-logo{height:16px;filter:brightness(0) invert(1);opacity:.9}
.pied-col--marque .t-small{color:rgba(255,255,255,.52);line-height:1.6}
.pied-col h3{
margin:0 0 var(--s16);font-size:12px;font-weight:600;
letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.38);
}
.pied-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s10)}
/* on ne vise que les liens de liste : sinon la règle repeint aussi le bouton
de la colonne marque, et on retombe sur du blanc sur blanc. */
.pied-col ul a{
display:inline-flex;align-items:center;gap:var(--s10);
color:rgba(255,255,255,.62);text-decoration:none;font-size:14px;
transition:color .25s var(--ease),transform .25s var(--ease);
}
.pied-col ul a:hover{color:#8FBBFF;transform:translateX(3px)}
.pied-ico{
display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none;
background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.pied-ico svg{width:14px;height:14px;fill:none;stroke:#8FBBFF;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.pied-col ul a:hover .pied-ico{background:rgba(59,125,240,.18);box-shadow:inset 0 0 0 1px rgba(143,187,255,.3)}
/* la pastille qui bat sur « Rejoindre l'équipe » : le recrutement est ouvert */
.pied-vif{
width:7px;height:7px;border-radius:50%;background:#4ADE80;flex:none;
animation:piedVif 2s ease-in-out infinite;
}
@keyframes piedVif{
0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}
60% {box-shadow:0 0 0 6px rgba(74,222,128,0)}
}
.pied-bas{
position:relative;z-index:1;
margin-top:clamp(40px,6vh,72px);padding:var(--s20) 0 var(--s24);
border-top:1px solid rgba(255,255,255,.08);
display:flex;align-items:center;justify-content:space-between;
gap:var(--s16);flex-wrap:wrap;
}
.pied-bas .t-xs{color:rgba(255,255,255,.40);margin:0}
.pied-legal{display:flex;gap:var(--s20);flex-wrap:wrap}
.pied-legal a{color:rgba(255,255,255,.45);text-decoration:none;font-size:12px;
transition:color .25s var(--ease)}
.pied-legal a:hover{color:#8FBBFF}
@media (max-width:900px){
.pied-grille{grid-template-columns:1fr 1fr;gap:var(--s32)}
.pied-col--marque{grid-column:1 / -1}
.pied-mot{font-size:120px}
}
@media (max-width:560px){
.pied-grille{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.pied-vif{animation:none}
.pied-col ul a:hover{transform:none}
}
/* ==========================================================================
66. L'ARCHITECTURE DE L'ÉCOSYSTÈME
Le nuage de points ne disait rien : on voyait des points, pas une structure.
Ici on lit un SCHÉMA — qui est au-dessus de qui, qui alimente qui, et par
où revient l'information. Le tracé se dessine, puis des impulsions
circulent en continu dans le sens du flux ; celle du retour remonte.
========================================================================== */
.archi{position:relative;width:100%}
.archi-svg{display:block;width:100%;height:auto;overflow:visible}
/* --- les liaisons ------------------------------------------------------ */
.ar-traces path{
fill:none;stroke:rgba(143,187,255,.22);stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:var(--l,600);stroke-dashoffset:var(--l,600);
transition:stroke-dashoffset 1.1s var(--ease);
}
.archi.on .ar-traces path{stroke-dashoffset:0}
.archi.on .ar-traces path:nth-child(1){transition-delay:.10s}
.archi.on .ar-traces path:nth-child(2){transition-delay:.30s}
.archi.on .ar-traces path:nth-child(3){transition-delay:.52s}
.archi.on .ar-traces path:nth-child(4){transition-delay:.52s}
.archi.on .ar-traces path:nth-child(5){transition-delay:.80s}
.archi.on .ar-traces path:nth-child(6){transition-delay:.94s}
.archi.on .ar-traces path:nth-child(7){transition-delay:1.14s}
.archi.on .ar-traces path:nth-child(8){transition-delay:1.24s}
/* les impulsions : un éclat court qui parcourt la liaison, en boucle */
.ar-flux path{
fill:none;stroke:#8FBBFF;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 0 6px rgba(143,187,255,.9));
stroke-dasharray:20 900;stroke-dashoffset:920;opacity:0;
}
.archi.on .ar-flux path{animation:arFlux 3.6s linear infinite}
.archi.on .ar-flux path:nth-child(1){animation-delay:1.4s}
.archi.on .ar-flux path:nth-child(2){animation-delay:1.7s}
.archi.on .ar-flux path:nth-child(3){animation-delay:2.0s}
.archi.on .ar-flux path:nth-child(4){animation-delay:2.2s}
.archi.on .ar-flux path:nth-child(5){animation-delay:2.5s}
@keyframes arFlux{
0% {stroke-dashoffset:920;opacity:0}
8% {opacity:1}
88% {opacity:1}
100%{stroke-dashoffset:0;opacity:0}
}
/* le retour remonte : même trajet, parcouru dans l'autre sens, en vert */
.ar-flux .ar-retour{stroke:#4ADE80;filter:drop-shadow(0 0 6px rgba(74,222,128,.85))}
.archi.on .ar-flux .ar-retour{animation:arRetour 4.4s linear 3s infinite}
@keyframes arRetour{
0% {stroke-dashoffset:0;opacity:0}
8% {opacity:1}
88% {opacity:1}
100%{stroke-dashoffset:920;opacity:0}
}
/* --- les nœuds --------------------------------------------------------- */
/* Registre repris de moving-dot-card : fond quasi noir, filet de 1 px, et
c'est tout. Pas de remplissage dégradé — la carte se tient par son contour
et par la lumière qui passe dessus, pas par sa matière. */
.ar-noeud rect{fill:#0A1826;stroke:rgba(255,255,255,.15);stroke-width:1}
.ar-noeud{opacity:0;transform:translateY(10px);transform-box:fill-box;transform-origin:50% 50%;
transition:opacity .6s var(--ease),transform .6s var(--ease)}
.archi.on .ar-noeud{opacity:1;transform:none}
.archi.on .ar-n1{transition-delay:.05s}
.archi.on .ar-n1b{transition-delay:.20s}
.archi.on .ar-n2{transition-delay:.40s}
.archi.on .ar-n3{transition-delay:.66s}
.archi.on .ar-n4{transition-delay:.74s}
.archi.on .ar-n5{transition-delay:1.00s}
.ar-titre{
fill:rgba(255,255,255,.72);font-family:inherit;font-size:11px;font-weight:500;
letter-spacing:.16em;text-anchor:middle;
}
.ar-nb{
fill:url(#arNb);font-family:inherit;font-size:28px;font-weight:600;
letter-spacing:-.045em;text-anchor:middle;
}
.ar-nb--pivot{font-size:23px}
.ar-tetes circle{fill:rgba(255,255,255,.34)}
.archi.on .ar-tetes circle{animation:arTete 3.2s ease-in-out infinite}
.ar-tetes circle:nth-child(2){animation-delay:.4s}
.ar-tetes circle:nth-child(3){animation-delay:.8s}
.ar-tetes circle:nth-child(4){animation-delay:1.2s}
.ar-tetes circle:nth-child(5){animation-delay:1.6s}
@keyframes arTete{0%,100%{fill:rgba(255,255,255,.30)}50%{fill:rgba(143,187,255,.95)}}
/* le pivot : la seule pièce qui respire, parce que c'est elle qui pilote */
.ar-pivot rect{fill:#0B1E33;stroke:rgba(143,187,255,.42)}
.ar-pattes rect{fill:rgba(143,187,255,.45);stroke:none}
.archi.on .ar-pivot{filter:url(#arHalo);animation:arPivot 4s ease-in-out 1.4s infinite}
@keyframes arPivot{
0%,100%{filter:drop-shadow(0 0 10px rgba(59,125,240,.35))}
50% {filter:drop-shadow(0 0 26px rgba(59,125,240,.75))}
}
/* la sortie : c'est là que l'argent arrive, elle est verte */
.ar-sortie rect{fill:rgba(34,197,94,.12);stroke:rgba(74,222,128,.45)}
.ar-sortie .ar-titre{fill:#4ADE80}
/* les petits mots posés sur les liaisons */
.ar-fil{
fill:rgba(255,255,255,.46);font-family:inherit;font-size:10.5px;
letter-spacing:.05em;text-anchor:start;
}
.ar-fil--c{text-anchor:middle}
.ar-fil--retour{fill:rgba(74,222,128,.70);text-anchor:middle;font-size:10px;letter-spacing:.09em}
.ar-noeud + .ar-fil,.ar-fil{opacity:0;transition:opacity .5s var(--ease) .9s}
.archi.on .ar-fil{opacity:1}
.archi-legende{display:grid;gap:var(--s8);margin-top:var(--s20)}
.archi-legende span{font-size:12px;color:var(--ink-soft);line-height:1.45}
.archi-legende b{color:#fff;font-weight:600}
@media (max-width:620px){
.ar-titre{font-size:13px}
.ar-nb{font-size:24px}
.ar-fil{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
.ar-traces path{stroke-dashoffset:0;transition:none}
.ar-noeud,.ar-fil{opacity:1;transform:none;transition:none}
.ar-flux path{display:none}
.archi.on .ar-pivot,.archi.on .ar-tetes circle{animation:none}
}
/* --- 66 bis. LE REGISTRE MOVING-DOT ------------------------------------ */
/* les règles de repérage : elles passent DERRIÈRE les nœuds, et c'est ça
qui donne l'impression d'un plan technique plutôt que d'un organigramme */
.ar-reperes line{stroke:rgba(255,255,255,.055);stroke-width:1}
.ar-reperes{opacity:0;transition:opacity .8s var(--ease) .1s}
.archi.on .ar-reperes{opacity:1}
/* le halo qui déborde de l'angle haut-gauche du pivot */
.ar-lueur{opacity:0;transition:opacity 1.2s var(--ease) .5s}
.archi.on .ar-lueur{opacity:1;animation:arLueur 6s ease-in-out 1.8s infinite}
@keyframes arLueur{0%,100%{opacity:.75}50%{opacity:1}}
/* le point qui court sur le contour : la pièce signature de la référence */
.ar-point{fill:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.95));opacity:0;
transition:opacity .5s var(--ease) 1.2s}
.archi.on .ar-point{opacity:1}
@media (prefers-reduced-motion:reduce){
.ar-reperes,.ar-lueur,.ar-point{opacity:1;transition:none;animation:none}
.ar-point{display:none}
}
/* --- 60 bis. LE DASHBOARD SUR UN ÉCRAN COURT ---------------------------- */
/* La marge sous le menu prise, il ne restait plus assez de hauteur : les
panneaux se coupaient (« Striker +25 % » disparaissait). On resserre le
pas — la taille des chiffres et la lisibilité, elles, ne bougent pas. */
@media (max-height:780px) and (min-width:901px){
#chiffres > .wrap{
padding-top:calc(var(--nav-h) + clamp(14px,2.2vh,22px) + 18px);
padding-bottom:20px;
}
#chiffres .ekpi{padding:var(--s12) var(--s14)}
#chiffres .ekpi b{font-size:clamp(21px,2.4vw,30px)}
#chiffres .ekpi > span{font-size:10.5px;line-height:1.3}
#chiffres .ekpi em{font-size:10.5px}
#chiffres .ekpi-constel{max-width:186px}
#chiffres .ekpi-faces img,#chiffres .ekpi-faces .plus{width:18px;height:18px;margin-left:-6px}
#chiffres .epan{padding:var(--s12) var(--s14);gap:8px}
#chiffres .epan-tete b{font-size:13px}
#chiffres .epan-badge{font-size:9.5px;padding:3px 8px}
#chiffres .compare{gap:5px}
#chiffres .epan .t-xs{font-size:10.5px;line-height:1.3}
#chiffres .traj{gap:8px;margin-top:0}
#chiffres .traj-b b{font-size:21px}
#chiffres .epan .spark{min-height:34px}
#chiffres .dash-kpis{gap:5px}
#chiffres .epan .dash-kpi{padding:8px 6px}
}
/* --- 66 ter. LA PASTILLE STRIKER --------------------------------------- */
/* Elle s'intercale entre l'entreprise et le Head of Sales : c'est le seul
endroit du schéma où l'on dit QUI pose le pilote. Elle est donc un maillon
du tracé, pas une décoration posée à côté. */
.ar-marque{opacity:0;transform:translateY(8px);transform-box:fill-box;transform-origin:50% 50%;
transition:opacity .6s var(--ease),transform .6s var(--ease)}
.archi.on .ar-marque{opacity:1;transform:none}
.ar-marque-fond{fill:#0A1826;stroke:rgba(143,187,255,.55);stroke-width:1.2}
.ar-marque-halo{fill:none;stroke:rgba(143,187,255,.18);stroke-width:1}
.archi.on .ar-marque-halo{animation:arOnde 3.6s ease-out 1.6s infinite}
@keyframes arOnde{
0% {r:19;opacity:.9}
70% {r:34;opacity:0}
100%{r:34;opacity:0}
}
.ar-marque image{opacity:.95}
@media (prefers-reduced-motion:reduce){
.ar-marque{opacity:1;transform:none;transition:none}
.ar-marque-halo{animation:none;opacity:.5}
}
/* ==========================================================================
67. LA TRAME DE LA SCÈNE D'OUVERTURE
Sur la plaque nue, le lettrage flottait dans du vide. On pose dessus une
trame très fine : un quadrillage à la limite du visible, quelques filets
qui descendent lentement, et des poussières qui dérivent. Rien ne doit
attirer l'œil — c'est de la profondeur, pas de la décoration.
========================================================================== */
.ouv-trame{
position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;
opacity:var(--voile,1);
}
/* --- le ciel : une trentaine de points, un vide au centre --------------- */
.ouv-trame{
/* la nappe entière dérive très lentement : c'est ce qui fait « espace »
plutôt que « fond étoilé ». Trois minutes pour un aller-retour. */
animation:cielDerive 180s ease-in-out infinite alternate;
}
@keyframes cielDerive{
from{transform:translate3d(-1.2%,0.8%,0) scale(1.015)}
to {transform:translate3d(1.2%,-0.8%,0) scale(1)}
}
.etoile{
position:absolute;width:var(--t,1px);height:var(--t,1px);border-radius:50%;
background:#DCEAFF;opacity:0;
animation:scintille var(--d,5s) ease-in-out var(--r,0s) infinite;
will-change:opacity,transform;
}
/* Le battement ne descend jamais très bas : une étoile qui s'éteint
complètement ne scintille pas, elle clignote. */
@keyframes scintille{
0%,100%{opacity:calc(var(--e,.5) * .58);transform:scale(.85)}
50% {opacity:var(--e,.5); transform:scale(1)}
}
/* trois ou quatre points portent une vraie lueur — juste assez pour qu'on
comprenne que le ciel a de la profondeur */
.etoile.est-vive{
background:#fff;
box-shadow:0 0 6px rgba(180,214,255,.9),0 0 14px rgba(120,170,255,.45);
}
/* et l'une d'elles a son éclat en croix, comme une vraie étoile */
.etoile.est-vive::before,
.etoile.est-vive::after{
content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
background:linear-gradient(90deg,transparent,rgba(220,234,255,.75),transparent);
}
.etoile.est-vive::before{width:16px;height:1px}
.etoile.est-vive::after{width:1px;height:16px;
background:linear-gradient(180deg,transparent,rgba(220,234,255,.75),transparent)}
@media (prefers-reduced-motion:reduce){
.ouv-trame{animation:none}
.etoile{display:none}
}
/* ==========================================================================
68. LES MAQUETTES DES CARTES DU SYSTÈME
Chaque pilier montrait une liste. Il montre maintenant l'OBJET dont il
parle — la documentation, l'organigramme, le tableau de bord, la revue
d'appels — en perspective, avec sa barre de fenêtre, et animé en continu.
Une seule et même carcasse ; seul le corps change.
========================================================================== */
.mock{
position:relative;border-radius:14px;overflow:hidden;isolation:isolate;
background:linear-gradient(180deg,#102B47,#0A1B2D);
border:1px solid rgba(255,255,255,.11);
box-shadow:0 34px 64px -34px rgba(4,11,20,.95),
inset 0 1px 0 rgba(255,255,255,.07);
transform:perspective(1500px) rotateX(8deg) rotateY(-7deg);
transform-origin:50% 100%;
animation:mockFlotte 11s ease-in-out infinite;
will-change:transform;
}
@keyframes mockFlotte{
0%,100%{transform:perspective(1500px) rotateX(8deg) rotateY(-7deg) translateY(0)}
50% {transform:perspective(1500px) rotateX(5.5deg) rotateY(-3.5deg) translateY(-7px)}
}
/* la lumière qui balaie la vitre, comme sur un vrai écran */
.mock-eclat{
position:absolute;inset:0;z-index:4;pointer-events:none;
background:linear-gradient(104deg,
rgba(255,255,255,0) 34%,rgba(255,255,255,.09) 50%,rgba(255,255,255,0) 66%);
transform:translateX(-120%);
animation:mockEclat 9s ease-in-out 1.5s infinite;
}
@keyframes mockEclat{0%,64%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}
.mock-bar{
display:flex;align-items:center;gap:10px;padding:9px 12px;
border-bottom:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.035);
}
.mock-pts{display:flex;gap:5px;flex:none}
.mock-pts i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)}
.mock-pts i:first-child{background:rgba(229,50,43,.55)}
.mock-pts i:nth-child(2){background:rgba(245,190,80,.5)}
.mock-pts i:last-child{background:rgba(74,222,128,.5)}
.mock-bar b{
flex:1;font-size:10.5px;font-weight:500;color:rgba(255,255,255,.46);
letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.mock-bar em{
flex:none;font-style:normal;font-size:9.5px;letter-spacing:.06em;
padding:2px 7px;border-radius:var(--rf);
color:#8FBBFF;background:rgba(59,125,240,.16);
}
.mock-corps{position:relative;padding:var(--s16);display:grid;gap:10px}
/* --- 01 · la documentation qui se coche -------------------------------- */
.mock--doc .mk-li{
display:flex;align-items:center;gap:10px;
font-size:12.5px;color:rgba(255,255,255,.50);
padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.03);
animation:mkLiOn 8s ease-in-out infinite;
}
.mock--doc .mk-li:nth-child(1){animation-delay:.2s}
.mock--doc .mk-li:nth-child(2){animation-delay:1.2s}
.mock--doc .mk-li:nth-child(3){animation-delay:2.2s}
.mock--doc .mk-li:nth-child(4){animation-delay:3.2s}
@keyframes mkLiOn{
0%,4% {color:rgba(255,255,255,.50);background:rgba(255,255,255,.03)}
10%,72% {color:rgba(255,255,255,.92);background:rgba(59,125,240,.10)}
86%,100% {color:rgba(255,255,255,.50);background:rgba(255,255,255,.03)}
}
.mock--doc .mk-tx{display:block}
.mock--doc .mk-li em{display:block;font-style:normal;font-size:11px;
color:rgba(255,255,255,.38);margin-top:1px}
.mk-ck{
position:relative;width:15px;height:15px;border-radius:5px;flex:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
animation:mkCk 8s ease-in-out infinite;animation-delay:inherit;
}
.mock--doc .mk-li:nth-child(1) .mk-ck{animation-delay:.2s}
.mock--doc .mk-li:nth-child(2) .mk-ck{animation-delay:1.2s}
.mock--doc .mk-li:nth-child(3) .mk-ck{animation-delay:2.2s}
.mock--doc .mk-li:nth-child(4) .mk-ck{animation-delay:3.2s}
.mk-ck::after{
content:'';position:absolute;left:4.5px;top:2px;width:4px;height:8px;
border:solid #08131F;border-width:0 1.8px 1.8px 0;transform:rotate(42deg) scale(0);
animation:mkCkV 8s ease-in-out infinite;animation-delay:inherit;
}
.mock--doc .mk-li:nth-child(1) .mk-ck::after{animation-delay:.2s}
.mock--doc .mk-li:nth-child(2) .mk-ck::after{animation-delay:1.2s}
.mock--doc .mk-li:nth-child(3) .mk-ck::after{animation-delay:2.2s}
.mock--doc .mk-li:nth-child(4) .mk-ck::after{animation-delay:3.2s}
@keyframes mkCk{
0%,4% {background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.20)}
10%,72% {background:#8FBBFF;box-shadow:inset 0 0 0 1px rgba(143,187,255,0)}
86%,100%{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.20)}
}
@keyframes mkCkV{0%,6%{transform:rotate(42deg) scale(0)}
12%,72%{transform:rotate(42deg) scale(1)}
84%,100%{transform:rotate(42deg) scale(0)}}
/* --- 03 · le tableau de bord ------------------------------------------- */
.mk-barres{display:flex;align-items:flex-end;gap:7px;height:104px}
.mk-barres i{
flex:1;border-radius:4px 4px 2px 2px;height:var(--h);
background:linear-gradient(180deg,rgba(143,187,255,.55),rgba(59,125,240,.22));
transform-origin:bottom;
animation:mkBarre 4.4s ease-in-out var(--r,0s) infinite;
}
.mk-barres i.hot{
background:linear-gradient(180deg,#8FBBFF,#2C6BE0);
box-shadow:0 0 16px rgba(59,125,240,.5);
}
@keyframes mkBarre{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.14)}}
.mk-axe{display:flex;justify-content:space-between;font-size:9.5px;color:rgba(255,255,255,.32);
letter-spacing:.08em}
@media (max-width:620px){
.mock{transform:none;animation:none}
.mk-barres{height:80px}
.mk-tuiles{grid-template-columns:1fr}
.mk-cands{flex-wrap:wrap;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
.mock,.mock-eclat,.mk-li,.mk-ck,.mk-ck::after,.mk-cand,.mk-cand::after,
.mk-pouls,.mk-barres i,.mk-mini i,.mk-rang{animation:none}
.mk-cand::after{opacity:1;transform:none}
.mock{transform:none}
.mk-ck{background:#8FBBFF}
.mk-ck::after{transform:rotate(42deg) scale(1)}
}
/* --- 02 · le Head of Sales sélectionne les closers ---------------------- */
/* Le motion raconte l'acte, pas la liste : les candidats passent sous
l'écoute du Head of Sales, la plupart sont écartés, un reste. */
.mk-hos{
display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
background:rgba(59,125,240,.12);box-shadow:inset 0 0 0 1px rgba(143,187,255,.26);
}
.mk-hos-av{
width:28px;height:28px;border-radius:50%;flex:none;
background:linear-gradient(160deg,#3E6EA8,#1B3A5A);
box-shadow:0 0 0 2px rgba(143,187,255,.32);
}
.mk-hos > div{flex:1;min-width:0}
.mk-hos b{display:block;font-size:12px;font-weight:600;color:#fff;letter-spacing:-.01em}
.mk-hos em{display:block;font-style:normal;font-size:10.5px;color:rgba(255,255,255,.46)}
.mk-pouls{width:7px;height:7px;border-radius:50%;flex:none;background:#4ADE80;
animation:mkPouls 2s ease-in-out infinite}
@keyframes mkPouls{
0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}
60% {box-shadow:0 0 0 7px rgba(74,222,128,0)}
}
.mk-cands{display:flex;gap:8px;justify-content:space-between;padding:4px 2px 2px}
.mk-cand{
position:relative;width:30px;height:30px;border-radius:50%;flex:none;
background:linear-gradient(160deg,#2A4C72,#16304C);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
animation:mkCand 9.6s ease-in-out var(--r,0s) infinite;
}
.mk-cand::after{
content:'✕';position:absolute;right:-3px;bottom:-3px;
width:14px;height:14px;border-radius:50%;
display:grid;place-items:center;font-size:8px;font-weight:600;
color:#fff;background:#E5322B;border:1.5px solid #0E2338;
opacity:0;transform:scale(.5);
animation:mkVerdict 9.6s ease-in-out var(--r,0s) infinite;
}
.mk-cand.est-pris::after{content:'✓';background:#22C55E}
@keyframes mkCand{
0%,6% {box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transform:scale(1);filter:none}
9%,13% {box-shadow:inset 0 0 0 2px rgba(143,187,255,.95);transform:scale(1.14);filter:none}
20%,86% {box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transform:scale(1);
filter:grayscale(.7) brightness(.55)}
94%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transform:scale(1);filter:none}
}
/* celui qu'on garde ne s'éteint pas : il reste net et cerclé de vert */
.mk-cand.est-pris{animation-name:mkCandPris}
@keyframes mkCandPris{
0%,6% {box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transform:scale(1)}
9%,13% {box-shadow:inset 0 0 0 2px rgba(143,187,255,.95);transform:scale(1.14)}
20%,86% {box-shadow:inset 0 0 0 2px rgba(74,222,128,.85);transform:scale(1.06)}
94%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transform:scale(1)}
}
@keyframes mkVerdict{
0%,14% {opacity:0;transform:scale(.5)}
20%,86% {opacity:1;transform:scale(1)}
92%,100%{opacity:0;transform:scale(.5)}
}
.mk-legende{margin:2px 0 0;font-size:10.5px;color:rgba(255,255,255,.40);line-height:1.4}
/* --- 04 · le tableau de bord du pilotage ------------------------------- */
.mk-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mk-tuile{
display:grid;gap:8px;align-content:start;padding:10px 11px;border-radius:11px;
background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.055);
}
.mk-tuile > span{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
color:rgba(255,255,255,.40);line-height:1.3}
.mk-tuile b{font-size:22px;font-weight:600;letter-spacing:-.04em;color:#8FBBFF;line-height:1}
.mk-tuile--fort{background:rgba(59,125,240,.12);box-shadow:inset 0 0 0 1px rgba(143,187,255,.26)}
.mk-mini{display:flex;align-items:flex-end;gap:3px;height:26px}
.mk-mini i{
flex:1;border-radius:2px;height:var(--h);transform-origin:bottom;
background:rgba(143,187,255,.42);
animation:mkBarre 4.4s ease-in-out infinite;
}
.mk-mini i:nth-child(2){animation-delay:.3s}
.mk-mini i:nth-child(3){animation-delay:.6s}
.mk-mini i:nth-child(4){animation-delay:.9s}
.mk-mini i:nth-child(5){animation-delay:1.2s;background:#8FBBFF}
.mk-equipe{display:grid;gap:6px}
.mk-rang{
display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
background:rgba(255,255,255,.03);
animation:mkRang 4.8s ease-in-out var(--r,0s) infinite;
}
@keyframes mkRang{
0%,4% {background:rgba(255,255,255,.03)}
12%,26% {background:rgba(59,125,240,.14)}
36%,100%{background:rgba(255,255,255,.03)}
}
.mk-av{width:20px;height:20px;border-radius:50%;flex:none;
background:linear-gradient(160deg,#2A4C72,#16304C)}
.mk-rang b{flex:none;width:88px;font-size:11px;font-weight:500;color:rgba(255,255,255,.72)}
.mk-jauge{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.mk-jauge i{display:block;height:100%;width:var(--w,50%);border-radius:99px;
background:linear-gradient(90deg,rgba(59,125,240,.7),#8FBBFF)}
/* ==========================================================================
69. LA COULEUR DU HERO, ÉTENDUE AUX SECTIONS BLEUES
Le hero n'a pas de fond à lui : sa couleur vient de la nappe d'univers,
#071320. Les sections sombres portaient chacune un navy différent — de
#091624 à #122B45 — ce qui faisait autant de marches d'escalier au fil du
scroll. Elles prennent toutes la même, celle du hero. Ce qui alterne,
c'est clair contre sombre, pas six nuances de bleu.
========================================================================== */
#chiffres,#constat,#methode,#voix,#simulateur,#equipe,#modele,
#convient,#faq,#cta{background:#071320}
/* ==========================================================================
70. MOBILE — LA COURSE DES SCÈNES
Relevé à 390 px : l'ouverture faisait 3,2 écrans et le chargement 3,6 —
soit près de sept écrans de pouce avant la première information. Sur un
grand écran c'est du cinéma, sur un téléphone c'est un péage. On garde les
mêmes scènes, on raccourcit leur course.
========================================================================== */
@media (max-width:900px){
/* le doigt fait défiler plus vite qu'une molette : les scènes qui se
lisent au rythme du scroll doivent être plus courtes, pas plus lentes */
.ouv{height:190vh}
/* Le chevauchement revient, mais calculé cette fois. Pas en haut — c'est
lui qui faisait cohabiter le terminal avec le hero. Uniquement EN BAS :
la console démarre 130 vh avant la fin, donc elle est déjà sous les
lettres quand elles s'ouvrent. Sans ça, le trou donne sur du vide et il
n'y a plus d'effet du tout. */
/* 320 plutôt que 260 : la traversée du lettrage disposait d'un tiers
d'écran de course, soit une poignée d'images sur un geste rapide — d'où
l'impression de saccade. Elle en a maintenant deux tiers. */
.charge{height:320vh;margin-top:0;margin-bottom:-106vh}
/* La barre de menu flotte au-dessus du contenu : tout titre qui arrive en
haut de l'écran passe dessous. On réserve donc sa hauteur partout — sauf
sur le hero, dont la composition est centrée et déjà calibrée. */
.band:not(.hero),.acte-mot-scene,
/* ces trois-là portent leur propre padding plus loin dans la feuille :
sans les nommer, la règle générale ne les atteint pas */
#simulateur,#constat .plan,#preuve.acte-pile{
padding-top:calc(var(--nav-h) + clamp(36px,5.5vh,64px));
}
/* Ces deux-là sont découvertes par un lettrage : on y atterrit à leur bord
haut, pas après un scroll. Il leur faut plus de réserve encore. */
#chiffres,#modele{padding-top:calc(var(--nav-h) + 92px)}
.acte-plein{height:330vh}
.acte-mot{height:170vh}
/* --- le dashboard ---------------------------------------------------- */
/* sans hauteur de rang imposée, le panneau du CA se tasse et sa courbe
passe au travers du texte */
#chiffres .epan-large{min-height:190px;padding-bottom:var(--s28)}
.epan-large .courbe{height:56%}
#chiffres .ecran-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.traj-bornes{gap:var(--s12)}
.traj-fleche svg{width:44px}
/* --- les cibles tactiles --------------------------------------------- */
/* Le bouton reste PETIT à l'œil — 22 px, comme sur desktop ou presque —
mais sa zone de touche est étendue à 40 px par un pseudo invisible.
On ne grossit pas un élément d'interface pour le rendre cliquable. */
.srow-i{width:20px;height:20px;font-size:11px}
.srow-i::after{
content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
width:40px;height:40px;border-radius:50%;
}
.srow-i--coin{top:var(--s10);right:var(--s10)}
.dire-pills button{padding:11px 18px;font-size:13.5px}
.cf-dots button{width:12px;height:12px}
/* l'explication pousse la mise en page au lieu de flotter : sur un
téléphone la hauteur n'est pas comptée, et une bulle déborde de l'écran */
.sim-aide{
position:static;opacity:1;transform:none;pointer-events:auto;
display:none;margin-top:8px;
}
.ouvert > .sim-aide{display:block}
/* --- le hero ---------------------------------------------------------- */
.tbadge{gap:var(--s10);padding:8px 14px 8px 8px;text-align:left}
.tbadge-txt{line-height:1.35}
/* --- le pied ---------------------------------------------------------- */
/* les listes tiennent en deux colonnes : une seule doublait sa hauteur */
.pied-grille{grid-template-columns:1fr 1fr;gap:var(--s28) var(--s24)}
.pied-col--marque{grid-column:1 / -1}
/* Le lettrage reste, mais il descend sous les colonnes et se fait plus
discret : au doigt le halo le balaie tout seul (voir pied()), il ne doit
donc pas concurrencer le texte pendant qu'il s'allume. */
.pied-fond{bottom:-1%;height:26%;opacity:.75}
.pied-mot{font-size:108px;letter-spacing:-.05em}
/* on lui laisse sa bande : sinon il vient chevaucher la dernière colonne */
.pied-grille{padding-bottom:clamp(60px,10vh,110px)}
.pied-bas{flex-direction:column;align-items:flex-start;gap:var(--s10)}
}
@media (max-width:400px){
.pied-grille{grid-template-columns:1fr}
}
/* ==========================================================================
70 bis. LE PIÈGE DU vh SUR MOBILE
Sur un téléphone, 100vh compte la zone masquée par la barre d'adresse.
Une scène épinglée en 100vh est donc plus haute que ce qu'on voit, et tout
ce qu'elle centre verticalement — le logo de l'ouverture au premier chef —
tombe sous le milieu réel, puis saute quand la barre se rétracte.
100svh est la hauteur GARANTIE visible : elle ne bouge jamais.
========================================================================== */
@supports (height:100svh){
@media (max-width:900px){
.ouv-scene,.charge-scene,.plan,.acte-mot-scene,.rideau-scene{height:100svh}
.ouv{height:160svh}
.charge{height:195svh}
.acte-plein{height:210svh}
.acte-mot{height:135svh}
#definition,#preuve,#voix,#simulateur,#modele,#convient,#faq,#cta,#chiffres,
#equipe,#methode{min-height:100svh}
.hero{min-height:100svh}
}
}
/* ==========================================================================
71. LA TRANSITION EN PANNEAU
Référence : cinematic-landing-hero. Sa grammaire tient en une phrase —
chaque section est un PANNEAU ARRONDI qui grandit hors du noir jusqu'au
plein cadre, puis se rétracte en sortant. On ne coupe plus d'un aplat à
l'autre : la section suivante arrive comme une carte qui devient l'écran.
Appliqué aux sections en flux normal seulement. Les scènes épinglées ont
déjà leur propre grammaire (le lettrage qui s'ouvre, le fondu sur place),
et une transformation sur un ancêtre casserait leur épinglage.
========================================================================== */
/* RETIRÉ. Le panneau qui rétrécit et s'arrondit en sortant dessinait
exactement ce qu'on cherche à faire disparaître : une arête entre deux
sections, plus un écart de luminosité de part et d'autre. Les fonds doivent
se fondre l'un dans l'autre — c'est le dégradé continu qui fait la
transition maintenant, pas un cadre. */
.plaque{
transform:none;border-radius:0;filter:none;
}
@media (max-width:900px){
/* moins d'amplitude au doigt : le scroll est plus rapide, et une section
qui rétrécit trop donne l'impression que la page saute */
.plaque{--pe:1}
}
@media (prefers-reduced-motion:reduce){
.plaque{transform:none;border-radius:0;filter:none}
}
/* ==========================================================================
72. LE MENU MOBILE
La barre flottante n'a pas la place d'afficher sept sections sur un
téléphone : le bouton n'ouvrait rien, il sautait au simulateur.
Première version : sept pastilles pleines empilées. Trop lourd — sept
blocs sombres alignés font un mur, pas un menu. Ici c'est une liste
éditoriale : de grands intitulés séparés par un filet, la marque en haut,
la porte de sortie en bas. Rien ne pèse, tout se lit d'un coup d'œil.
========================================================================== */
.nav-burger{
display:none;position:relative;flex:none;
width:38px;height:38px;border-radius:11px;cursor:pointer;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.nav:not(.over-dark) .nav-burger{background:rgba(11,26,42,.06);border-color:rgba(11,26,42,.12)}
.nav-burger i{
position:absolute;left:11px;width:16px;height:1.6px;border-radius:2px;
background:currentColor;transition:transform .3s var(--ease),opacity .25s var(--ease);
}
.nav-burger i:first-child{top:16px}
.nav-burger i:last-child{top:21px}
.menum{
position:fixed;inset:0;z-index:70;
display:grid;grid-template-rows:auto 1fr auto;
padding:clamp(16px,2.4vh,24px) var(--gut) calc(var(--gut) + env(safe-area-inset-bottom,0px));
background:#040B14;
opacity:0;transition:opacity .28s var(--ease);
}
.menum.ouvert{opacity:1}
.menum[hidden]{display:none}
/* la même nappe que le reste du site, pour ne pas atterrir sur un aplat mort */
.menum::before{
content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(46% 34% at 74% 8%,rgba(59,125,240,.16),rgba(59,125,240,0) 70%);
}
.menum > *{position:relative;z-index:1}
.menum-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--s16)}
.menum-logo{height:15px;filter:brightness(0) invert(1);opacity:.9}
.menum-x{
position:relative;width:40px;height:40px;flex:none;cursor:pointer;
border-radius:50%;background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
}
.menum-x i{
position:absolute;left:12px;top:19px;width:16px;height:1.6px;border-radius:2px;
background:rgba(255,255,255,.8);
}
.menum-x i:first-child{transform:rotate(45deg)}
.menum-x i:last-child{transform:rotate(-45deg)}
.menum-liens{
display:grid;align-content:center;
border-top:1px solid rgba(255,255,255,.09);
margin-top:clamp(20px,4vh,40px);
}
.menum-liens a{
display:flex;align-items:center;justify-content:space-between;gap:var(--s16);
padding:clamp(15px,2.4vh,22px) 2px;
border-bottom:1px solid rgba(255,255,255,.09);
text-decoration:none;color:#fff;
font-size:clamp(20px,5.6vw,26px);font-weight:600;letter-spacing:-.032em;
transform:translateY(12px);opacity:0;
transition:transform .5s var(--ease),opacity .5s var(--ease),color .2s var(--ease);
}
.menum.ouvert .menum-liens a{transform:none;opacity:1}
.menum-liens a:nth-child(1){transition-delay:.05s}
.menum-liens a:nth-child(2){transition-delay:.10s}
.menum-liens a:nth-child(3){transition-delay:.15s}
.menum-liens a:nth-child(4){transition-delay:.20s}
.menum-liens a:nth-child(5){transition-delay:.25s}
.menum-liens a:nth-child(6){transition-delay:.30s}
.menum-liens a:nth-child(7){transition-delay:.35s}
.menum-liens a:active{color:#8FBBFF}
.menum-liens i{
font-style:normal;font-size:15px;font-weight:400;flex:none;
color:rgba(143,187,255,.45);
transition:transform .25s var(--ease),color .2s var(--ease);
}
.menum-liens a:active i{color:#8FBBFF;transform:translate(3px,-3px)}
.menum-pied{
display:grid;gap:var(--s14);justify-items:stretch;
opacity:0;transform:translateY(12px);
transition:transform .5s var(--ease) .40s,opacity .5s var(--ease) .40s;
}
.menum.ouvert .menum-pied{opacity:1;transform:none}
.menum-cta{justify-content:center;padding-block:15px;font-size:15px}
.menum-note{
margin:0;text-align:center;font-size:11.5px;line-height:1.45;
color:rgba(255,255,255,.38);
}
body.menu-ouvert{overflow:hidden}
@media (max-width:900px){
.nav-links{display:none}
.nav-sep{display:none}
.nav-burger{display:block}
.nav{padding-right:6px;gap:var(--s10)}
}
@media (min-width:901px){
.menum{display:none!important}
}
@media (prefers-reduced-motion:reduce){
.menum,.menum-liens a,.menum-pied{transition:none}
}
/* ==========================================================================
73. LE BOUTON D'AUDIT SOUS LES BLOCS DE TEXTE
Chaque bloc explicatif se terminait sur un point. Le lecteur convaincu à
cet endroit-là n'avait rien à faire : il devait remonter au menu ou
descendre jusqu'au bas de page. La porte est maintenant sous le texte.
========================================================================== */
.bloc-cta{justify-self:start;margin-top:var(--s24)}
@media (max-width:900px){
.bloc-cta{width:100%;justify-content:center;margin-top:var(--s20)}
}
/* ==========================================================================
74. LE CARROUSEL CLIENTS SUR MOBILE
L'éventail de cartes pivotées demande de la largeur : sur un téléphone les
cartes du fond dépassent du cadre et la carte de devant devient minuscule.
On passe à UNE carte pleine largeur, et des pastilles pour choisir.
========================================================================== */
.cf-dots{display:none;justify-content:center;gap:9px;margin-top:var(--s16)}
.cf-dots button{
width:9px;height:9px;border-radius:50%;padding:0;cursor:pointer;border:0;
background:rgba(255,255,255,.22);
transition:background .3s var(--ease),transform .3s var(--ease);
}
.band--clair .cf-dots button{background:rgba(10,24,38,.20)}
.cf-dots button.on{background:var(--bleu,#3B7DF0);transform:scale(1.25)}
@media (max-width:900px){
/* l'éventail ET la fiche latérale cèdent la place à la rangée de cartes
(l'affichage de .cfm est déclaré au bloc 78, plus bas dans la feuille) */
.cf,#preuve .note,.cf-dots{display:none}
}
/* ==========================================================================
75. LES CARTES DU SYSTÈME SUR MOBILE — UN DÉFILEMENT HORIZONTAL
Empilées verticalement, les quatre cartes faisaient quatre écrans de pouce
pour une seule idée. À l'horizontale elles tiennent en un geste : la carte
suivante dépasse toujours d'un doigt sur la droite, donc on sait qu'il y en
a d'autres sans qu'on ait à l'écrire.
========================================================================== */
@media (max-width:900px){
#methode .c8{
display:grid;grid-auto-flow:column;
grid-auto-columns:min(78vw,380px);
gap:var(--s12);align-items:stretch;
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
/* on déborde jusqu'aux bords de l'écran, mais la première carte reste
alignée sur la gouttière du reste de la page */
margin-inline:calc(var(--gut) * -1);
padding:2px var(--gut) var(--s16);
}
#methode .c8::-webkit-scrollbar{display:none}
#methode .c8 > .ui{
/* accrochage au début, pas au centre : la carte se cale sur la marge et
la suivante dépasse franchement à droite */
scroll-snap-align:start;height:auto;margin-bottom:0;
display:grid;align-content:start;
}
/* le compteur redevient utile : il dit où on en est dans la rangée */
.pile-jauge{
display:flex;gap:6px;margin-top:var(--s20);
}
.pile-jauge i{
flex:1;max-width:34px;height:3px;border-radius:2px;
background:rgba(255,255,255,.14);position:relative;overflow:hidden;
}
.pile-jauge i::after{
content:'';position:absolute;inset:0;border-radius:2px;
background:var(--blue);box-shadow:0 0 8px rgba(59,125,240,.7);
transform:scaleX(var(--p,0));transform-origin:left;
transition:transform .25s var(--ease);
}
}
/* la durée se lit dans le bouton, à voix basse : on annonce l'engagement
demandé avant le clic, pas après */
.btn-duree{
font-style:normal;font-size:11.5px;font-weight:500;letter-spacing:0;
opacity:.62;margin-left:2px;
}
@media (max-width:520px){
.btn-duree{display:block;margin:2px 0 0}
}
/* sous 420 px, la cinquième pastille ne fait plus qu'épaissir le bloc */
@media (max-width:420px){
.tbadge{padding:4px 12px 4px 4px;gap:8px}
.tbadge-logos img:nth-child(n+5){display:none}
.tbadge-logos img{width:18px;height:18px;margin-left:-5px}
.tbadge-txt{font-size:10.5px}
}
/* ==========================================================================
76. LA SPHÈRE DES CLIENTS QU'ON NE PEUT PAS NOMMER
Cette carte était un aplat bleu avec un nombre posé dessus — la seule du
carrousel sans rien à regarder. On ne peut pas montrer leur visage, mais on
peut montrer qu'ils sont NOMBREUX : une boule de silhouettes qui tourne
lentement, celles du fond plus petites et plus sourdes.
Référence : img-sphere.
========================================================================== */
.boule{
position:absolute;inset:0;z-index:1;overflow:hidden;
-webkit-mask-image:radial-gradient(84% 74% at 50% 44%,#000 42%,rgba(0,0,0,.55) 74%,transparent 100%);
mask-image:radial-gradient(84% 74% at 50% 44%,#000 42%,rgba(0,0,0,.55) 74%,transparent 100%);
}
.boule-tete{
position:absolute;left:0;top:0;display:grid;place-items:center;
width:30px;height:30px;border-radius:50%;
background:#1B3A5A;box-shadow:inset 0 0 0 1px rgba(143,187,255,.20);
will-change:transform,opacity;
}
.boule-tete svg{
width:17px;height:17px;fill:none;
stroke:rgba(255,255,255,.62);stroke-width:1.7;stroke-linecap:round;
}
.boule-tete svg circle{fill:rgba(255,255,255,.62);stroke:none}
/* une sur cinq porte la couleur : la boule respire sans qu'aucune ne saute aux yeux */
.boule-tete.est-vive{background:#2A5A8E;box-shadow:inset 0 0 0 1px rgba(143,187,255,.45),
0 0 14px rgba(59,125,240,.35)}
.boule-tete.est-vive svg{stroke:#DCEAFF}
.boule-tete.est-vive svg circle{fill:#DCEAFF}
@media (max-width:900px){
.boule-tete{width:24px;height:24px}
.boule-tete svg{width:14px;height:14px}
}
/* Le voile du bas passe PAR-DESSUS la boule, le nombre par-dessus le voile :
sans ça le « +30 » se posait au milieu des silhouettes. */
.cf-card::after{z-index:2}
.cf-card .cf-logo{z-index:3}
@media (prefers-reduced-motion:reduce){
.cf-tete,.cf-tete.est-vive{animation:none;opacity:.8}
}
/* La scène qui cède la place s'efface exactement de ce que la suivante gagne
— voir posee() : sans ça les deux se superposent le temps du fondu. */
@media (min-width:901px){
#constat .plan,
#methode > .wrap,
.acte-mot-scene{opacity:var(--sortie,1)}
}
/* ==========================================================================
77. LES MONTANTS SIGNÉS
Le lecteur doit pouvoir ADDITIONNER ce qu'il voit et retomber sur le total
affiché en haut. Chaque montant porte donc son signe et sa couleur : rouge
pour ce qui part, vert pour ce qui rentre — et la pastille de gauche porte
le même signe, pour que l'œil suive la colonne sans lire les chiffres.
========================================================================== */
.srow-val.est-perte{color:#FF8A80;font-variant-numeric:tabular-nums}
.srow-val.est-gain {color:#4ADE80;font-variant-numeric:tabular-nums}
.srow-ico--perte{
color:#FF8A80;background:rgba(229,50,43,.16);
box-shadow:inset 0 0 0 1px rgba(229,50,43,.30);
font-size:14px;font-weight:600;
}
.srow-ico--gain{
color:#4ADE80;background:rgba(34,197,94,.16);
box-shadow:inset 0 0 0 1px rgba(34,197,94,.30);
font-size:14px;font-weight:600;
}
/* la ligne du manque à gagner est le pivot de la carte : elle se détache */
.sim-vs .srow:last-of-type{
margin-top:2px;padding-top:var(--s10);
border-top:1px solid rgba(255,255,255,.09);
}
.sim-vs .srow:last-of-type .srow-val{font-size:17px}
/* ==========================================================================
78. LES CLIENTS SUR MOBILE — UNE RANGÉE DE CARTES
Référence : carousel-cards. Une carte par client, image en haut, nom et
description dessous. Le tout défile à l'horizontale, la suivante dépasse
toujours d'un doigt. Avant, une carte occupait l'écran entier pour ne
montrer qu'un visage — il fallait ensuite lire la fiche en dessous.
========================================================================== */
.cfm{display:none;grid-auto-flow:column;grid-auto-columns:min(70vw,300px);
gap:var(--s12);align-items:stretch;
overflow-x:auto;overscroll-behavior-x:contain;
/* « proximity » et non « mandatory » : un conteneur à accrochage obligatoire
est re-accroché par le navigateur à chaque changement de gabarit — et
sur mobile, la barre d'adresse qui se rétracte en est un. C'est de là
que venaient les sauts de défilement. */
scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
/* sans ce scroll-padding, l'accroche « start » collerait la première carte
au bord de l'écran au lieu de la caler sur la marge du titre */
scroll-padding-inline:var(--gut);
scrollbar-width:none;
margin-inline:calc(var(--gut) * -1);
/* le défilement horizontal découpe aussi la verticale : sans cette marge
basse, l'ombre des cartes était tranchée net par le conteneur et
laissait une bande grise sous la rangée */
padding:2px var(--gut) 26px;
}
.cfm::-webkit-scrollbar{display:none}
.cfm-carte{
/* alignement au début : la carte se cale sur la marge, la suivante dépasse
franchement à droite — on voit qu'il y en a d'autres sans avoir à essayer */
scroll-snap-align:start;
display:grid;grid-template-rows:auto minmax(0,1fr);
border-radius:var(--r20);overflow:hidden;
background:#fff;border:1px solid rgba(10,24,38,.10);
/* ombre courte : deux cartes voisines ne se noircissent plus l'entre-deux */
box-shadow:0 12px 28px -18px rgba(10,24,38,.22);
}
.cfm-media{position:relative;aspect-ratio:16/11;background:#0E2338;overflow:hidden}
.cfm-media img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.cfm-media::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(7,19,32,0) 46%,rgba(7,19,32,.80));
}
.cfm-media--nuee{background:linear-gradient(165deg,#12365E,#08182A)}
.cfm-media--nuee .boule{opacity:.95}
.cfm-logo{
position:absolute!important;left:var(--s14);bottom:var(--s12);z-index:2;
height:19px!important;width:auto!important;object-fit:contain!important;
filter:brightness(0) invert(1);opacity:.95;
}
.cfm-plus{
position:absolute;left:var(--s14);bottom:var(--s10);z-index:2;
font-size:22px;font-weight:600;letter-spacing:-.04em;color:#fff;
}
.cfm-corps{display:flex;flex-direction:column;gap:4px;padding:var(--s14) var(--s16) var(--s16)}
.cfm-corps > b{font-size:16px;font-weight:600;color:#0A1826;letter-spacing:-.025em;line-height:1.2}
/* le calibrage : deux lignes réservées pour le dirigeant, trois pour la
description. Toutes les cartes tombent alors sur la même hauteur, quelle
que soit la longueur du texte d'origine. */
.cfm-corps > em{
font-style:normal;font-size:12px;line-height:1.35;color:rgba(10,24,38,.50);
min-height:2.7em;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.cfm-corps p{
margin:2px 0 0;font-size:13px;line-height:1.5;color:rgba(10,24,38,.68);
min-height:4.5em;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
/* le chiffre posé sur la photo, à l'opposé du logo */
.cfm-chip{
position:absolute;right:var(--s12);bottom:var(--s12);z-index:2;
display:inline-flex;align-items:baseline;gap:6px;
padding:5px 10px;border-radius:999px;
background:rgba(7,19,32,.52);border:1px solid rgba(255,255,255,.20);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.cfm-chip i{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.74)}
.cfm-chip b{font-size:13px;font-weight:600;color:#fff;letter-spacing:-.02em}
@media (max-width:900px){ .cfm{display:grid} }
/* ==========================================================================
79. LE RAPPEL DU TEST
Le simulateur est l'argument le plus fort de la page, et il arrive au deux
tiers. Ce bandeau le tient à portée de pouce du début à la fin — puis
s'efface pendant le test lui-même et sur le CTA final, où il ferait doublon.
Forme : celle d'une notification (référence team-invitation) — une vignette
à gauche avec son point de veille, trois lignes, l'action à droite, et la
croix pour la faire taire. Un bandeau publicitaire s'ignore ; une
notification se lit.
========================================================================== */
.rappel{
position:fixed;left:50%;bottom:clamp(14px,2.4vh,26px);z-index:55;
display:flex;align-items:center;gap:var(--s16);
padding:11px 12px 11px var(--s14);
border-radius:18px;
background:rgba(8,18,30,.88);
-webkit-backdrop-filter:blur(16px) saturate(1.3);
backdrop-filter:blur(16px) saturate(1.3);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),
0 24px 54px -24px rgba(0,0,0,.95);
translate:-50% 0;
transform:translateY(140%);opacity:0;pointer-events:none;
transition:transform .5s var(--ease),opacity .35s var(--ease);
}
.rappel.on{transform:none;opacity:1;pointer-events:auto}
.rappel.tu{display:none}
/* la vignette et son point de veille */
.rappel-ico{
position:relative;flex:none;display:grid;place-items:center;
width:40px;height:40px;border-radius:12px;
background:rgba(59,125,240,.14);box-shadow:inset 0 0 0 1px rgba(143,187,255,.22);
}
.rappel-ico img{width:20px;height:20px;object-fit:contain}
.rappel-ico i{
position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;
background:#4ADE80;box-shadow:0 0 0 2.5px rgba(8,18,30,.95);
animation:veille 2.2s ease-in-out infinite;
}
.rappel p{margin:0;display:grid;gap:1px;line-height:1.3}
.rappel b{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.01em}
.rappel-court{display:none}
/* Le bandeau flotte sur des fonds variables : ses textes doivent tenir seuls,
pas au gris de lecture d'une section. */
.rappel-dit{font-size:12.5px;color:rgba(255,255,255,.80)}
.rappel-dit em{font-style:normal;color:#fff;font-weight:600}
.rappel-meta{font-size:11px;color:rgba(255,255,255,.55);margin-top:2px}
.rappel .btn{flex:none}
.rappel-x{
flex:none;display:grid;place-items:center;width:30px;height:30px;
border:0;border-radius:9px;background:transparent;cursor:pointer;
transition:background .25s var(--ease);
}
.rappel-x svg{width:14px;height:14px;fill:none;stroke:rgba(255,255,255,.42);
stroke-width:1.8;stroke-linecap:round}
.rappel-x:hover{background:rgba(255,255,255,.07)}
.rappel-x:hover svg{stroke:rgba(255,255,255,.8)}
@media (max-width:900px){
.rappel{
left:var(--gut);right:var(--gut);bottom:10px;translate:0 0;
gap:var(--s10);padding:9px 8px 9px var(--s10);border-radius:16px;
}
/* sur un téléphone, la promesse tient en une ligne : le reste tombe */
.rappel-dit,.rappel-meta{display:none}
.rappel-long{display:none}
.rappel-court{display:block;font-size:13px}
.rappel-ico{width:32px;height:32px;border-radius:10px}
.rappel-ico img{width:16px;height:16px}
.rappel p{flex:1;min-width:0}
.rappel .btn{padding:9px 9px 9px 14px;font-size:12.5px}
.rappel .btn .pip{width:20px;height:20px}
.rappel-x{width:26px;height:26px}
}
/* sur les petits écrans, la vignette cède sa place : c'est la phrase qui doit
tenir en une ligne, pas l'illustration */
@media (max-width:560px){
.rappel-ico{display:none}
.rappel{padding-left:var(--s14)}
}
@media (prefers-reduced-motion:reduce){
.rappel{transition:none}
.rappel-ico i{animation:none}
}
/* ==========================================================================
80. LE FOND DE MARQUE — le dégradé de la charte
La charte ne pose jamais un aplat : elle pose un DÉGRADÉ, du bleu nuit
#07151F en haut vers l'azur foncé #132F40 en bas, avec un grain. Et elle
distingue deux régimes — les pages de contenu restent sourdes, les pages de
couverture portent la lueur bleue qui monte du bas.
On applique la même règle : les sections qui se lisent gardent un dégradé
discret ; les trois moments de bascule portent la lueur.
========================================================================== */
:root{
/* les deux couleurs de marque, dans l'ordre où la charte les pose */
--nuit:#07151F;
--azur:#132F40;
--fond-lecture:linear-gradient(180deg,#07151F 0%,#0B1F2E 62%,#102A3B 100%);
}
/* Chaque section prend le dégradé LÀ OÙ la précédente l'a laissé. Le fond
descend donc du bleu nuit vers l'azur foncé sur toute la page, sans jamais
se répéter d'un écran à l'autre — et sans marche à la jonction, puisque la
couleur de fin de l'une est la couleur de départ de la suivante.
Les deux respirations claires (« ce qu'est Striker », « ils nous ont confié
leur vente ») coupent la descente : elle repart d'un cran plus sombre
derrière chacune, pour que la page ne s'éclaircisse pas indéfiniment. */
/* Chaque section commence par 90 px TRANSPARENTS. Deux couleurs voisines,
même choisies égales, laissent toujours une arête au raccord — le navigateur
arrondit, l'écran tranche. En partant de rien, il n'y a plus de bord à
voir : ce qu'il y a derrière traverse, puis la couleur s'installe. */
/* ------------------------------------------------------------------------
UN SEUL FOND POUR TOUTE LA PAGE
Découper le dégradé section par section ne marche pas : chaque section a
sa propre boîte, donc son propre bord, et deux bords qui se touchent se
voient toujours — quelle que soit la couleur choisie. La rampe est donc
posée UNE fois, sur le document entier, et les sections deviennent
transparentes. Il n'y a plus de raccord, parce qu'il n'y a plus de morceaux.
------------------------------------------------------------------------ */
/* C'est L'UNIVERS du hero qui sert de sol à toute la page — la nuit bleue,
la lueur qui dérive, la poussière. Une seule couche fixe, donc une seule
valeur de fond du premier au dernier écran : aucune liaison à rater. */
html{background:#081420}
#chiffres,#constat,#methode,#voix,#equipe,#modele,#convient,#faq{
background:transparent;
}
/* Les sections de fin restent transparentes COMME LE RESTE de la page : les
rendre opaques leur retirait aussi la lueur et la poussière, et elles ne
ressemblaient plus aux autres. C'est l'EMBLÈME qu'on éteint, pas le fond —
il s'efface sur le dernier écran avant « Soyons directs ». */
/* Le simulateur est le seul à rompre la descente : c'est un écran d'outil, il
doit être le plus sombre du site. Mais une rupture franche dessine une ligne
en travers de l'écran au moment où il recouvre la scène précédente — il
part donc de la couleur de celle-ci et plonge dans les premiers 30 %. */
/* Le simulateur reste le plus sombre du site : c'est un écran d'outil. Il ne
pose pas une couleur mais un VOILE, qui fonce le fond commun sans jamais
créer de bord — le voile lui-même arrive en fondu sur 140 px. */
#simulateur{
background:linear-gradient(180deg,
rgba(3,9,15,0) 0, rgba(3,9,15,.62) 140px, rgba(3,9,15,.78) 38%,
rgba(3,9,15,.72) 100%);
}
/* --- les moments de couverture : la lueur de la charte ------------------
Un halo bleu qui monte du bas, exactement comme les pages de titre du
document de marque. Réservé à trois endroits, sinon l'effet s'use. */
/* la lueur de couverture, posée sur le fond commun : rien d'opaque */
#cta{
background:
radial-gradient(128% 74% at 50% 122%, rgba(150,190,236,.30), rgba(150,190,236,0) 62%),
radial-gradient(74% 42% at 50% 116%, rgba(214,232,252,.22), rgba(214,232,252,0) 60%);
}
/* la bascule est une plaque posée par-dessus une autre scène : elle garde sa
propre nuit, sinon on verrait la section du dessous à travers */
.acte-mot-scene{
background:
radial-gradient(128% 74% at 50% 122%, rgba(150,190,236,.30), rgba(150,190,236,0) 62%),
radial-gradient(74% 42% at 50% 116%, rgba(214,232,252,.22), rgba(214,232,252,0) 60%),
linear-gradient(180deg,#0F2A3E 0%,#0B2032 52%,#12314A 100%);
}
/* la scène de bascule est posée au-dessus d'une autre : elle doit rester opaque */
.acte-mot-scene{background-color:#0B2032}
@media (max-width:900px){
/* sur un téléphone la lueur occupe proportionnellement plus d'écran :
on la resserre pour qu'elle reste une ambiance, pas un aplat clair */
.acte-mot-scene{
background:
radial-gradient(150% 52% at 50% 122%, rgba(150,190,236,.26), rgba(150,190,236,0) 62%),
linear-gradient(180deg,#0F2A3E 0%,#0B2032 58%,#102B41 100%);
background-color:#0B2032;
}
#cta{
background:
radial-gradient(150% 52% at 50% 122%, rgba(150,190,236,.26), rgba(150,190,236,0) 62%),
linear-gradient(180deg,#14374C 0%,#102B3E 50%,#163C54 100%);
}
}
/* --- le détail des leviers, repliable ----------------------------------- */
.sim-pli{margin-top:var(--s4)}
.sim-pli > summary{
list-style:none;cursor:pointer;
display:flex;align-items:center;gap:var(--s10);
padding:10px var(--s12);border-radius:12px;
background:rgba(255,255,255,.04);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
transition:background .25s var(--ease);
}
.sim-pli > summary::-webkit-details-marker{display:none}
.sim-pli > summary:hover{background:rgba(255,255,255,.07)}
.sim-pli > summary > span{
font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
color:rgba(255,255,255,.62);
}
.sim-pli > summary em{font-style:normal;font-size:11px;color:rgba(255,255,255,.34)}
.sim-pli > summary svg{
width:15px;height:15px;margin-left:auto;flex:none;fill:none;
stroke:rgba(255,255,255,.45);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
transition:transform .3s var(--ease);
}
.sim-pli[open] > summary svg{transform:rotate(180deg)}
.sim-pli .sim-tr{margin-top:8px}
.sim-pli[open] .sim-tr{animation:besoinsOuvre .4s var(--ease) both}
@media (prefers-reduced-motion:reduce){
.sim-pli[open] .sim-tr{animation:none}
.sim-pli > summary svg{transition:none}
}
/* ==========================================================================
81. LES IMAGES
La charte ne montre jamais une photo en pleine lumière : ses images sont
sombres, à contre-jour, la lumière bleue derrière. Nos prises de vue sont
en lumière du jour — elles reçoivent donc toutes le même traitement, écrit
ici une fois : désaturation, assombrissement, voile bleu nuit.
========================================================================== */
.bande{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--s12);margin-top:var(--s28);
}
.bande img{
width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;
border-radius:14px;display:block;
filter:saturate(.62) contrast(1.06) brightness(.72);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),
0 18px 40px -26px rgba(0,0,0,.9);
transition:filter .5s var(--ease),transform .5s var(--ease);
}
.bande img:hover{filter:saturate(.78) contrast(1.04) brightness(.86);transform:translateY(-2px)}
@media (max-width:900px){
.bande{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8);margin-top:var(--s20)}
.bande img{border-radius:11px}
}
/* --- une image dans une section claire ---------------------------------
Sur blanc, le traitement de marque s'inverse : on ne noircit pas, on
désature et on refroidit. La photo doit appartenir à la page sans lui
voler la lumière. */
.photo-clair{margin:var(--s28) 0 0;padding:0}
.photo-clair img{
width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 42%;
border-radius:18px;display:block;
filter:saturate(.72) contrast(1.04) brightness(1.02);
box-shadow:0 1px 0 rgba(10,24,38,.06), 0 26px 54px -30px rgba(10,24,38,.42);
}
@media (max-width:900px){
.photo-clair{margin-top:var(--s20)}
.photo-clair img{border-radius:14px;aspect-ratio:16/10}
}
/* La trame cinétique prend la forme de l'emblème : même masque, même position,
même taille que le filigrane du fond. La marque devient une matière. */
.monde-grille{
/* le canevas couvre l'écran — c'est en coordonnées d'écran qu'on dessine —
et c'est le MASQUE qui lui donne la forme et la place de l'emblème */
position:absolute;inset:0;width:100%;height:100%;
pointer-events:none;display:block;
-webkit-mask-image:url(../assets/img/embleme.png);
mask-image:url(../assets/img/embleme.png);
-webkit-mask-size:min(120vmin,1400px) auto; mask-size:min(120vmin,1400px) auto;
-webkit-mask-position:50% 52%; mask-position:50% 52%;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
opacity:var(--eo,1);
}
/* ==========================================================================
82. « CE QU'EST STRIKER » — le texte au centre, les photos autour
Référence : drag-cards. Le titre et le texte tiennent le centre ; des photos
légèrement de travers sont dispersées de part et d'autre, et se prennent en
main. Le schéma du système vient dessous, en pleine largeur.
========================================================================== */
.def-pile{display:block}
/* la scène des photos ne couvre QUE le bloc central : sans ça les cartes
descendaient sur le schéma et masquaient ses légendes */
.def-scene{position:relative}
.def-mot{
max-width:560px;margin:0 auto;text-align:center;position:relative;z-index:2;
padding-block:clamp(20px,5vh,64px);
}
.def-mot .measure{margin-left:auto;margin-right:auto}
/* --- les photos dispersées --------------------------------------------- */
/* z-index 4 : au-dessus du texte, sinon une carte glissée par-dessus passe
DERRIÈRE lui et on la croit bloquée */
.def-photos{position:absolute;inset:0 var(--gut);pointer-events:none;z-index:4}
.dcarte{
position:absolute;margin:0;pointer-events:auto;
width:min(19vw,214px);
border-radius:16px;overflow:hidden;background:#fff;padding:7px 7px 9px;
box-shadow:0 1px 0 rgba(10,24,38,.05), 0 24px 44px -26px rgba(10,24,38,.5);
cursor:grab;touch-action:none;user-select:none;
transform:rotate(var(--tilt,0deg));
transition:box-shadow .3s var(--ease),transform .5s var(--ease);
}
.dcarte img{
display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;
filter:saturate(.72) contrast(1.04) brightness(1.02);
pointer-events:none;
}
.dcarte:hover{box-shadow:0 1px 0 rgba(10,24,38,.05), 0 32px 54px -28px rgba(10,24,38,.6)}
.dcarte.tenue{
cursor:grabbing;z-index:9;transition:box-shadow .2s var(--ease);
box-shadow:0 1px 0 rgba(10,24,38,.06), 0 40px 68px -30px rgba(10,24,38,.65);
}
/* trois à gauche, trois à droite, en quinconce */
.def-photos .d1{left:0; top:4%; --tilt:-4.5deg}
.def-photos .d2{left:4%; top:34%; --tilt:3.2deg}
.def-photos .d3{left:1%; top:56%; --tilt:-2.2deg}
.def-photos .d4{right:0; top:8%; --tilt:4.1deg}
.def-photos .d5{right:4%; top:38%; --tilt:-3.4deg}
.def-photos .d6{right:1%; top:58%; --tilt:2.6deg}
/* Sous 1180 px il n'y a plus de marge de part et d'autre du texte : les
photos reprennent le fil, en rangée sous le bloc. */
@media (max-width:1180px){
.def-photos{
position:static;pointer-events:auto;
display:grid;grid-auto-flow:column;grid-auto-columns:min(38vw,190px);
gap:var(--s12);overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);
scrollbar-width:none;
margin-inline:calc(var(--gut) * -1);padding:2px var(--gut) var(--s12);
}
.def-photos::-webkit-scrollbar{display:none}
.dcarte{position:static;width:auto;transform:none;cursor:default;scroll-snap-align:start}
.dcarte:hover{box-shadow:0 1px 0 rgba(10,24,38,.05), 0 24px 44px -26px rgba(10,24,38,.5)}
}
@media (prefers-reduced-motion:reduce){ .dcarte{transform:none} }
/* ==========================================================================
83. L'ACCORDÉON DES CLIENTS
Référence : tailwind-image-accordion. Cinq panneaux côte à côte : celui
qu'on survole s'ouvre et livre sa fiche, les autres se referment sur leur
nom à la verticale. L'éventail précédent montrait quatre dos de cartes ;
ici les cinq clients sont là en permanence.
========================================================================== */
.acco{
display:flex;gap:10px;height:clamp(380px,52vh,520px);
margin-top:var(--s28);
}
.acco-p{
position:relative;flex:1 1 0;min-width:0;
border-radius:20px;overflow:hidden;cursor:pointer;
background:#0E2338;
box-shadow:inset 0 0 0 1px rgba(10,24,38,.10), 0 22px 46px -28px rgba(10,24,38,.5);
transition:flex-grow .6s var(--ease),box-shadow .4s var(--ease);
outline:none;
}
.acco-p.est-ouvert{
flex-grow:3.6;
box-shadow:inset 0 0 0 1px rgba(10,24,38,.12), 0 30px 60px -28px rgba(10,24,38,.6);
}
.acco-p:focus-visible{box-shadow:inset 0 0 0 2px var(--blue), 0 30px 60px -28px rgba(10,24,38,.6)}
.acco-media{position:absolute;inset:0}
.acco-media img{
width:100%;height:100%;object-fit:cover;object-position:center 24%;
filter:saturate(.72) brightness(.86);
transition:filter .6s var(--ease),transform .8s var(--ease);
}
.acco-p.est-ouvert .acco-media img{filter:saturate(.9) brightness(.98);transform:scale(1.03)}
.acco-media--boule{background:linear-gradient(165deg,#12365E,#08182A)}
.acco-media::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(7,19,32,0) 34%,rgba(7,19,32,.88) 100%);
}
/* fermé : le nom à la verticale, en bas */
.acco-vert{
position:absolute;left:50%;bottom:22px;z-index:2;
transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;
font-size:13px;font-weight:600;letter-spacing:.02em;color:#fff;white-space:nowrap;
opacity:1;transition:opacity .35s var(--ease);
}
.acco-p.est-ouvert .acco-vert{opacity:0;transition-duration:.2s}
/* ouvert : la fiche */
.acco-txt{
position:absolute;left:0;right:0;bottom:0;z-index:3;
display:grid;gap:5px;align-content:end;
padding:var(--s20) var(--s20) var(--s20);
opacity:0;transform:translateY(10px);
transition:opacity .45s var(--ease) .12s,transform .45s var(--ease) .12s;
pointer-events:none;
}
.acco-p.est-ouvert .acco-txt{opacity:1;transform:none}
.acco-logo{height:20px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.95;
margin-bottom:4px;justify-self:start}
.acco-plus{font-size:24px;font-weight:600;letter-spacing:-.04em;color:#fff;margin-bottom:2px}
.acco-txt > b{font-size:19px;font-weight:600;color:#fff;letter-spacing:-.025em;line-height:1.2}
.acco-txt > em{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.58)}
.acco-txt p{
margin:4px 0 0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82);
max-width:44ch;
}
.acco-res{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s10)}
.acco-res span{
display:inline-flex;align-items:baseline;gap:6px;
padding:5px 10px;border-radius:999px;
background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.acco-res i{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.7)}
.acco-res b{font-size:13px;font-weight:600;color:#fff}
/* Au doigt, un accordéon horizontal de cinq panneaux ne laisse rien lire :
il se déplie en colonne, chaque client sur sa propre carte. */
@media (max-width:900px){
.acco{
display:grid;grid-auto-flow:column;grid-auto-columns:min(74vw,320px);
height:auto;gap:var(--s12);
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);
scrollbar-width:none;
margin-inline:calc(var(--gut) * -1);padding:2px var(--gut) 26px;
}
.acco::-webkit-scrollbar{display:none}
.acco-p{
flex:none;scroll-snap-align:start;height:clamp(400px,60vh,480px);
border-radius:16px;
}
.acco-p.est-ouvert{flex:none}
.acco-vert{display:none}
.acco-txt{opacity:1;transform:none;padding:var(--s16)}
.acco-txt > b{font-size:17px}
.acco-txt p{font-size:13px}
.acco-media img{filter:saturate(.85) brightness(.92)}
}
@media (prefers-reduced-motion:reduce){
.acco-p,.acco-txt,.acco-media img{transition:none}
}
/* ==========================================================================
84. LA CARTE DE L'ÉQUIPE — le défilé des postes
Troisième colonne de la section : les fonctions qu'on installe passent en
boucle dans un cadre, celle du milieu au premier plan. Sans nom : on montre
des postes, pas des identités.
========================================================================== */
.equipe-carte{display:grid;gap:var(--s16);padding:var(--s16)}
.ec-cadre{
position:relative;height:clamp(280px,34vh,340px);overflow:hidden;
border-radius:16px;background:rgba(255,255,255,.03);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
/* les extrémités s'éteignent : le défilé n'a ni début ni fin */
-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.ec-piste{
display:grid;gap:var(--s10);padding:var(--s12);
animation:ecDefile 22s linear infinite;
}
@keyframes ecDefile{ to{ transform:translateY(-50%) } }
.ec-cadre:hover .ec-piste{animation-play-state:paused}
.ec-m{
display:flex;align-items:center;gap:var(--s12);
padding:9px 11px;border-radius:12px;
background:rgba(255,255,255,.045);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.ec-m img{
width:42px;height:42px;border-radius:11px;object-fit:cover;flex:none;
filter:grayscale(1) contrast(1.05) brightness(.95);
}
.ec-t{display:grid;gap:1px;min-width:0}
.ec-t b{font-size:13.5px;font-weight:600;color:#fff;letter-spacing:-.015em}
.ec-t em{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.5)}
.ec-txt{margin:0;display:grid;gap:5px}
.ec-txt b{font-size:14.5px;font-weight:600;color:#fff;letter-spacing:-.015em;line-height:1.3}
.ec-txt span{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.6)}
@media (max-width:900px){
.ec-cadre{height:250px}
.ec-piste{animation-duration:26s}
}
@media (prefers-reduced-motion:reduce){
.ec-piste{animation:none}
}
/* ==========================================================================
85. LE MUR D'EXTRAITS + LA COLONNE ÉQUIPE DU DASHBOARD
Deux mouvements d'un même échange : le défilé des postes quitte la section
« l'équipe » pour devenir la quatrième colonne du dashboard, et un mur de
verticales prend sa place — deux colonnes qui glissent en sens inverse,
relevé sur lagenced2s.com et repassé à l'encre Striker.
========================================================================== */
/* --- la quatrième colonne du dashboard ---------------------------------- */
@media (min-width:901px){
.ecran-panneaux{
grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.86fr);
}
.epan-equipe{grid-column:4;grid-row:1 / span 2}
#chiffres .epan-equipe{grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch}
#chiffres .epan-equipe .ec-cadre{height:auto;min-height:0}
}
.epan-equipe .ec-cadre{
height:clamp(220px,26vh,320px);
border-radius:12px;background:rgba(255,255,255,.025);
}
.epan-equipe .ec-piste{gap:8px;padding:10px}
.epan-equipe .ec-m{padding:7px 9px;border-radius:10px}
.epan-equipe .ec-m img{width:36px;height:36px;border-radius:9px}
.epan-equipe .ec-t b{font-size:12.5px}
.epan-equipe .ec-t em{font-size:10.5px}
/* --- le mur d'extraits --------------------------------------------------- */
.mur{
display:grid;grid-template-columns:1fr 1fr;gap:12px;
height:clamp(320px,42vh,440px);
}
.mur-col{
overflow:hidden;border-radius:16px;
/* les deux bouts s'éteignent : le défilé n'a ni début ni fin */
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 76%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 76%,transparent 100%);
}
/* la seconde colonne démarre plus bas : les deux ne se lisent pas au même rythme */
.mur-col--bas{
transform:translateY(28px);height:calc(100% + 28px);
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 62%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 62%,transparent 100%);
}
.mur-piste{
display:flex;flex-direction:column;gap:12px;
animation:murHaut 34s linear infinite;
will-change:transform;
}
.mur-col--bas .mur-piste{animation-name:murBas;animation-duration:40s}
@keyframes murHaut{ from{transform:translateY(0)} to{transform:translateY(-50%)} }
@keyframes murBas { from{transform:translateY(-50%)} to{transform:translateY(0)} }
.mur:hover .mur-piste{animation-play-state:paused}
.mur-v{
position:relative;margin:0;flex:none;
aspect-ratio:9/16;border-radius:12px;overflow:hidden;
background:#081422;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 8px 20px rgba(3,9,15,.45);
transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.mur-v:hover{transform:scale(1.03);z-index:5}
.mur-v img,.mur-v video{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;pointer-events:none;
}
.mur-v video{z-index:1}
.mur-v::after{
content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg,transparent 52%,rgba(4,11,20,.88) 100%);
}
.mur-t{
position:absolute;z-index:3;left:10px;right:10px;bottom:9px;
font-size:11px;font-weight:500;line-height:1.3;color:#fff;
letter-spacing:-.005em;text-shadow:0 2px 6px rgba(0,0,0,.6);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mur-badge{
position:absolute;z-index:3;top:8px;right:8px;
padding:3px 7px;border-radius:999px;
background:rgba(59,125,240,.9);color:#fff;
font-size:9.5px;font-weight:700;letter-spacing:.04em;
}
/* la vedette : le bleu de marque, qui respire */
.mur-v--vedette{
box-shadow:inset 0 0 0 1px rgba(59,125,240,.55),
0 10px 30px rgba(59,125,240,.28),0 0 36px rgba(59,125,240,.16);
animation:murVedette 3.4s ease-in-out infinite;
}
@keyframes murVedette{
0%,100%{box-shadow:inset 0 0 0 1px rgba(59,125,240,.45),
0 10px 28px rgba(59,125,240,.24),0 0 34px rgba(59,125,240,.14)}
50% {box-shadow:inset 0 0 0 2px rgba(59,125,240,.7),
0 14px 38px rgba(59,125,240,.4),0 0 54px rgba(59,125,240,.26)}
}
@media (max-width:900px){
.mur{height:340px;gap:9px}
.mur-piste{gap:9px;animation-duration:38s}
.mur-v{border-radius:10px}
.mur-t{font-size:10.5px;left:8px;right:8px;bottom:7px}
}
@media (prefers-reduced-motion:reduce){
.mur-piste{animation:none}
.mur-v--vedette{animation:none}
}
/* ==========================================================================
87. UNE PAGE BLANCHE RESTE BLANCHE
« Ils nous ont confié leur vente » se pose en fondu sur le constat. Tant
que le fondu portait sur la SECTION ENTIÈRE, son blanc se mélangeait au
bleu nuit du dessous pendant toute la transition : on lisait un gris-bleu
sale, pas du blanc. Le fond est donc peint sur une couche à lui, qui
arrive TROIS FOIS PLUS VITE que le contenu — le temps de mélange devient
trop court pour se voir, et le fondu du contenu, lui, reste doux.
========================================================================== */
@media (min-width:901px){
#preuve.acte-pile{opacity:1;background:transparent !important}
#preuve.acte-pile::after{
content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background:var(--fond-clair);
opacity:var(--arf,1);
}
/* l'ordre de peinture : le fond, la trame de points, puis le contenu */
#preuve.acte-pile > .points{z-index:1}
#preuve.acte-pile > .wrap{z-index:2;opacity:var(--ar,1)}
}
.ouv-hint{text-shadow:0 2px 12px rgba(3,9,15,.9)}
/* La pastille du hero doit RÉTRÉCIR quand la phrase est longue.
Elle est posée en inline-flex : sans min-width:0 sur son texte, un enfant de
flex refuse de passer sous la largeur de son contenu, et la pastille sort de
l'écran au lieu de plier sa phrase sur deux lignes. */
.tbadge{max-width:100%}
.tbadge-logos{flex:none}
.tbadge-txt{min-width:0;overflow-wrap:anywhere}
/* Une colonne bornée : aucun enfant large ne peut plus élargir le hero. */
.hero-inner{grid-template-columns:minmax(0,1fr)}
/* ==========================================================================
88. L'ÉVENTAIL DU HERO — d'après hero-10 (21st.dev)
Trois cartes 4/5 : deux penchées vers l'extérieur, une droite au centre et
légèrement plus haute, les trois se chevauchant de 32 px. C'est une image
fixe, pas un défilé — donc rien à boucler, rien qui puisse laisser un trou.
========================================================================== */
.fan{
position:relative;display:flex;align-items:center;justify-content:center;
/* L'éventail doit TENIR dans l'écran d'ouverture, sous un titre de trois
lignes et deux boutons. Sa largeur est donc bornée par la hauteur
disponible autant que par la largeur. */
width:100%;max-width:min(640px,52vh,94%);margin:clamp(8px,2vh,24px) auto 0;
}
.fan-c{
position:relative;flex:none;margin:0;
aspect-ratio:4/5;border-radius:14px;overflow:hidden;
background:#081422;
box-shadow:0 26px 54px -14px rgba(3,9,15,.66);
outline:1px solid rgba(255,255,255,.12);outline-offset:-1px;
}
.fan-c img{width:100%;height:100%;object-fit:cover;display:block}
/* les proportions et les décalages du modèle, au pixel */
.fan-c1{width:38%;margin-right:-32px;z-index:1;transform:rotate(-6deg) translateY(24px)}
.fan-c2{width:42%;z-index:2;transform:translateY(-8px)}
.fan-c3{width:38%;margin-left:-32px;z-index:1;transform:rotate(6deg) translateY(24px)}
/* Pas d'animation d'entrée carte par carte : le hero est derrière la scène
d'ouverture, elle serait jouée puis terminée avant qu'on voie l'éventail.
C'est le fondu de révélation du bloc (.rv) qui s'en charge. */
@media (max-width:620px){
.fan{max-width:min(420px,52vh,94%)}
.fan-c{border-radius:11px}
.fan-c1{margin-right:-22px}
.fan-c3{margin-left:-22px}
}
/* Les pages claires : plus de trame de points, juste le grain de la charte.
Les points dessinaient un motif régulier que l'œil suit ; le grain, lui,
se voit sans se lire — c'est de la matière, pas un décor. */
.band--clair > .points{display:none}
/* Le panneau sans portrait ni logo : un monogramme, pas un trou. */
.acco-media--mono{
display:grid;place-items:center;
background:
radial-gradient(120% 100% at 50% 0%,rgba(59,125,240,.28),rgba(59,125,240,0) 66%),
linear-gradient(180deg,#123049,#0A1B2B);
}
.acco-media--mono span{
font-size:clamp(48px,7vw,86px);font-weight:600;letter-spacing:-.04em;
color:rgba(255,255,255,.16);
}
.acco-mono{
display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;
background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
font-size:13px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.82);
}
/* Le schéma dit désormais CE QUI ARRIVE avec Striker, pas qui est recruté :
un bloc d'agence — board, data, méthode — qui pilote les postes en dessous. */
.ar-marquenom{
fill:#fff;font-size:14px;font-weight:600;letter-spacing:.14em;
text-anchor:start;
}
.ar-lignes rect{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.09);stroke-width:1}
.ar-lig{
fill:rgba(255,255,255,.86);font-size:13.5px;font-weight:500;letter-spacing:-.01em;
text-anchor:start;
}
.ar-titre--s{font-size:11.5px;letter-spacing:.10em}
.archi.on .ar-n4b{transition-delay:.82s}
@media (max-width:900px){
.ar-lig{font-size:15px}
.ar-marquenom{font-size:15px}
.ar-titre--s{font-size:13px}
}
/* ==========================================================================
89. RESSOURCES — la vidéo du moment, puis deux rails qui défilent
Une page unique n'a qu'une adresse à indexer. Ce bloc en ouvre trois de
plus : la section elle-même, la page des vidéos, la page des articles.
========================================================================== */
.ress-bloc{margin-top:clamp(38px,5.6vh,64px)}
.ress-tete{
display:flex;align-items:baseline;justify-content:space-between;gap:var(--s16);
margin-bottom:var(--s20);
padding-bottom:var(--s12);border-bottom:1px solid rgba(255,255,255,.08);
}
.ress-tete .t-h3{margin:0}
.ress-plus{
flex:none;display:inline-flex;align-items:center;gap:7px;
font-size:12.5px;font-weight:600;color:#8FBBFF;text-decoration:none;
transition:color .3s var(--ease);
}
.ress-plus:hover{color:#CFE2FF}
.ress-plus i{font-style:normal;font-size:11px}
/* --- la vignette, la même partout ---------------------------------------- */
.rc{
position:relative;display:grid;align-content:start;gap:9px;
padding:var(--s16);border-radius:var(--r20);
/* Une carte doit se détacher du fond, sinon ce n'est plus une carte : un
voile à 3,5 % de blanc sur du bleu nuit ne se voit tout simplement pas. */
background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 14px 32px -18px rgba(3,9,15,.8);
color:inherit;text-decoration:none;
transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
a.rc:hover{
transform:translateY(-3px);
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.07));
box-shadow:inset 0 0 0 1px rgba(143,187,255,.42),0 22px 46px -18px rgba(3,9,15,.8);
}
.rc-film{
position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;
background:#081422;cursor:pointer;
}
.rc-film img,.rc-iframe{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block;
}
.rc-film img{filter:saturate(.95) contrast(1.04) brightness(.88)}
.rc-play{
position:absolute;left:50%;top:50%;translate:-50% -50%;
display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
background:rgba(255,255,255,.92);color:#0A1826;font-size:13px;padding-left:2px;
box-shadow:0 10px 26px rgba(3,9,15,.5);
}
.rc-duree{
position:absolute;right:9px;bottom:9px;padding:3px 8px;border-radius:999px;
background:rgba(4,11,20,.74);font-style:normal;font-size:10.5px;font-weight:600;
color:rgba(255,255,255,.9);
}
.rc-tag{
justify-self:start;padding:4px 10px;border-radius:999px;
background:rgba(59,125,240,.16);box-shadow:inset 0 0 0 1px rgba(143,187,255,.24);
font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9CC4FF;
}
.rc-t{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.02em;line-height:1.32;color:#fff}
.rc-d{margin:0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.74)}
.rc-pied{
margin-top:1px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:#8FBBFF;
}
/* « Bientôt » se dit dans le pied, pas en éteignant toute la carte : une
opacité posée sur le bloc entier emportait aussi l'image et le titre. */
.est-attente .rc-pied{
color:rgba(255,255,255,.62);
padding:3px 9px;border-radius:999px;
background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
justify-self:start;font-weight:600;
}
/* --- la vidéo du moment, en grand ---------------------------------------- */
/* La vidéo du moment tient sur DEUX blocs : l'image à gauche, ce qu'elle
raconte à droite. Un titre posé sous une vidéo de cette taille se lit comme
une légende ; posé à côté, il se lit comme une promesse. */
.rc--une{
grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
align-items:center;
padding:var(--s20);gap:clamp(18px,2.4vw,34px);margin-bottom:var(--s20);
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));
}
.rc-cote{display:grid;gap:11px;align-content:center}
.rc--une .rc-t{font-size:clamp(19px,2.4vw,26px);letter-spacing:-.03em;line-height:1.22}
.rc--une .rc-d{font-size:14.5px;line-height:1.6;max-width:46ch}
.rc--une .rc-pied{font-size:12.5px}
.rc--une .rc-play{width:62px;height:62px;font-size:18px}
@media (max-width:820px){
.rc--une{grid-template-columns:1fr;align-items:start;gap:14px}
.rc--une .rc-t{font-size:19px}
}
/* --- le rail -------------------------------------------------------------- */
.ress-rail-boite{position:relative}
.ress-rail{
/* Largeur FIXE, pas un minmax : avec minmax les colonnes se compriment pour
tenir dans le cadre et le rail ne défile jamais. */
display:grid;grid-auto-flow:column;grid-auto-columns:clamp(228px,24vw,268px);
gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
/* « proximity » et pas « mandatory » : le mandatory recale la piste à chaque
changement de hauteur de la barre d'adresse sur mobile, et la page saute. */
scroll-snap-type:x proximity;
scrollbar-width:none;
/* overflow-x rogne AUSSI en vertical : sans ce coussin, l'ombre des cartes
est coupée net et laisse une barre grise sous le rail. */
padding:2px 2px 22px;
scroll-padding-left:2px;
}
.ress-rail::-webkit-scrollbar{display:none}
.ress-rail > *{scroll-snap-align:start}
.rail-fl{
position:absolute;top:calc(50% - 22px);z-index:3;
width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
display:grid;place-items:center;font-size:19px;line-height:1;
background:rgba(10,24,38,.86);color:#fff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 10px 26px rgba(3,9,15,.55);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.rail-fl--g{left:-12px}
.rail-fl--d{right:-12px}
.rail-fl:hover{transform:scale(1.06)}
.rail-fl:disabled{opacity:0;pointer-events:none}
/* rail plus court que son cadre : les flèches n'ont rien à faire là */
.est-court .rail-fl{display:none}
@media (hover:none){ .rail-fl{display:none} }
@media (max-width:620px){
.ress-rail{grid-auto-columns:78vw;gap:11px}
.ress-tete{flex-wrap:wrap;row-gap:6px}
}
/* --- les deux pages dédiées ---------------------------------------------- */
.page-ress{background:#0C1E30}
.page-ress .band{background:transparent}
.pr-tete{padding-block:calc(var(--nav-h) + clamp(46px,8vh,86px)) clamp(20px,3vh,34px)}
.pr-retour{
display:inline-flex;align-items:center;gap:6px;margin-bottom:var(--s20);
font-size:12.5px;font-weight:600;color:rgba(255,255,255,.55);text-decoration:none;
transition:color .3s var(--ease);
}
.pr-retour:hover{color:#8FBBFF}
.pr-grille{
display:grid;gap:16px;
grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
padding-bottom:clamp(40px,7vh,90px);
}
.page-ress footer{padding-block:clamp(40px,7vh,80px)}
/* pas de filet entre l'en-tête et la grille : deux bandes qui se touchent
dessinent une ligne en travers de l'écran, et il n'y a rien à séparer ici. */
.page-ress .band::before{display:none}
.page-ress main.band{padding-block:0}
/* ==========================================================================
90. LE CERVEAU DU SCHÉMA + LA LISIBILITÉ DE LA SECTION ÉQUIPE
(Ce bloc avait sauté lors d'une réécriture de la section Ressources : les
règles du cerveau vivaient après le point de coupe. Il est rétabli ici,
adapté aux deux lobes.)
========================================================================== */
.ar-cx{
fill:rgba(59,125,240,.13);
stroke:rgba(160,198,255,.72);stroke-width:1.6;
}
.ar-plis{
fill:none;stroke:rgba(160,198,255,.48);stroke-width:1.3;stroke-linecap:round;
}
/* le lobe droit reçoit une teinte à peine plus soutenue : deux moitiés
strictement identiques se lisent comme une seule forme, pas comme deux. */
.ar-lobe--d .ar-cx{fill:rgba(59,125,240,.19)}
.ar-lobe-t{
fill:rgba(255,255,255,.94);font-size:12.5px;font-weight:600;
letter-spacing:.10em;text-anchor:middle;
}
.ar-synapses circle{fill:#EAF2FF;opacity:.45}
.archi.on .ar-synapses circle{animation:arSynapse 2.8s ease-in-out infinite}
.ar-synapses circle:nth-child(2){animation-delay:.42s}
.ar-synapses circle:nth-child(3){animation-delay:.84s}
.ar-synapses circle:nth-child(4){animation-delay:1.26s}
.ar-synapses circle:nth-child(5){animation-delay:1.68s}
.ar-synapses circle:nth-child(6){animation-delay:2.10s}
@keyframes arSynapse{
0%,100%{opacity:.40;filter:none}
50% {opacity:1;filter:drop-shadow(0 0 6px rgba(180,212,255,.95))}
}
.archi.on .ar-cx{animation:arCerveau 4.6s ease-in-out 1.6s infinite}
@keyframes arCerveau{
0%,100%{stroke:rgba(150,192,255,.60)}
50% {stroke:rgba(205,228,255,.95)}
}
.ar-nb--s{font-size:19px}
.archi.on .ar-n2b{transition-delay:.56s}
/* --- la section se lit ---------------------------------------------------
Ses textes étaient au gris de lecture du reste du site, mais ils se
trouvent sur le bleu le plus sombre de la page : il leur en faut plus. */
#equipe{--ink-soft:rgba(255,255,255,.80);--ink-mute:rgba(255,255,255,.62)}
#equipe .archi-legende span{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.78)}
#equipe .archi-legende b{color:#fff}
#equipe .t-small{color:rgba(255,255,255,.82);font-size:13.5px}
#equipe .ec-txt span{color:rgba(255,255,255,.78)}
#equipe .ec-t em{color:rgba(255,255,255,.70)}
#equipe .ec-m img{filter:grayscale(.3) contrast(1.05)}
#equipe .mur-t{color:#fff}
.ar-titre{fill:rgba(255,255,255,.94)}
.ar-fil{fill:rgba(255,255,255,.66)}
@media (prefers-reduced-motion:reduce){
.archi.on .ar-synapses circle,.archi.on .ar-cx{animation:none}
}
/* les cinq spécialités du board : une ligne d'appui sous le titre du nœud */
.ar-board{
fill:rgba(255,255,255,.72);font-size:11.5px;font-weight:500;
letter-spacing:.07em;text-anchor:middle;
}
/* le cadre de l'architecture : son titre à droite, et le filet qui sépare
l'en-tête de ce qu'elle contient */
.ar-cadre-t{
fill:rgba(160,198,255,.62);font-size:10px;font-weight:600;
letter-spacing:.16em;text-anchor:end;
}
.ar-cadre-l{stroke:rgba(255,255,255,.12);stroke-width:1}
/* ==========================================================================
91. TOUT LE TEXTE MONTE EN BLANC
Demande explicite : plus de gris. Les deux tons de lecture passent tout en
haut de l'échelle, et les textes qui portaient leur propre valeur basse
sont ramenés au même niveau. Seuls restent en retrait : les libellés
d'axe d'un graphique et les mentions légales du pied — les monter en blanc
les ferait lire avant le contenu qu'ils accompagnent.
========================================================================== */
:root{
--ink-soft:rgba(255,255,255,.94);
--ink-mute:rgba(255,255,255,.82);
}
.band--clair{
--ink-soft:rgba(10,24,38,.86);
--ink-mute:rgba(10,24,38,.70);
}
/* les textes courants, sur fond sombre */
.on-dark .t-lead,.on-dark .t-body,.on-dark .t-small,
.hero .t-lead,.tbadge-txt,.plan-avant li,
.acco-txt > em,.acco-res i,.circuit-noeud em,
.scard-txt em,.sim-label span,.srow-txt span,.sim-pli > summary em,
.ekpi > span,.ekpi em,.dash-kpi span,.compare-ligne > span,
.traj-b span,.traj-b em,.hero-stat span,.ui-chip i,.cfm-chip i,
.mk-hos em,.mk-rang b,.orga-total,.rc-d,.rappel-meta,
.ec-t em,.ec-txt span,#simSub,
#equipe .archi-legende span,#equipe .ec-t em,#equipe .ec-txt span,
.archi-legende span,.nav.over-dark .nav-links a,
.pied-col--marque .t-small,footer{
color:rgba(255,255,255,.94);
}
/* les surtitres restent des surtitres, mais lisibles */
.on-dark .t-eyebrow,.on-dark .t-xs,.mini-suf,.charge-pied{
color:rgba(255,255,255,.84);
}
/* le schéma suit le même mouvement */
.ar-titre{fill:rgba(255,255,255,.98)}
.ar-fil{fill:rgba(255,255,255,.86)}
.ar-board{fill:rgba(255,255,255,.90)}
.ar-lobe-t{fill:#fff}
.ar-cadre-t{fill:rgba(180,212,255,.92)}
.ar-lig{fill:rgba(255,255,255,.96)}
/* ce qui reste volontairement en retrait : lire un axe avant sa courbe n'a
pas de sens, et une mention légale n'a pas à concurrencer une offre. */
.mk-axe,.mk-legende{color:rgba(255,255,255,.62)}
.pied-bas .t-xs,.pied-legal a,footer .t-xs{color:rgba(255,255,255,.66)}
/* ==========================================================================
92. LES SCÈNES ÉPINGLÉES DÉGAGENT LA BARRE DE MENU
Une scène épinglée est centrée dans 100 vh, mais la barre de menu FLOTTE
par-dessus : dès que le contenu remplit la hauteur, le surtitre vient se
coller sous elle. Chaque scène réserve donc la hauteur du menu en haut.
Une seule règle pour toutes : c'était l'écart entre elles qu'on voyait.
========================================================================== */
@media (min-width:901px){
#preuve.acte-pile > .wrap,
#voix > .wrap,
#modele > .wrap,
#equipe > .wrap{
padding-block:calc(var(--nav-h) + clamp(34px,5.5vh,68px)) clamp(40px,5vh,64px);
}
/* le simulateur est le plus chargé des cinq : il garde un cran de moins */
#simulateur > .wrap{
padding-block:calc(var(--nav-h) + clamp(24px,3.6vh,46px)) clamp(30px,4vh,52px);
}
#chiffres > .wrap{padding-top:calc(var(--nav-h) + clamp(20px,3vh,38px))}
}
/* ==========================================================================
93. AUCUN DÉFILEMENT LATÉRAL, ET LES OMBRES TIENNENT DANS LEUR RAIL
Un rail horizontal rogne AUSSI en vertical : l'ombre des cartes était
tranchée par le bas du conteneur. Et quelques pixels de débordement à
droite suffisaient à faire apparaître une bande non peinte à côté d'une
section blanche — le fond de page se voyait par la fente.
`clip` et non `hidden` : `hidden` ferait de la racine un conteneur de
défilement et casserait toutes les scènes épinglées.
========================================================================== */
/* PAS de clip sur la racine : `overflow` sur crée un bloc conteneur
pour les éléments en position fixe, et le bandeau du test se mettait à
défiler avec la page au lieu de rester collé en bas. Le débordement
latéral se règle sur les rails eux-mêmes, pas au niveau du document. */
.vwall,.acco,.def-photos,.cfm,.ress-rail,#methode .c8{max-width:100vw}
@media (max-width:1180px){
.def-photos{padding-bottom:34px}
}
/* ==========================================================================
94. LES CARTES DE LA MÉTHODE SONT OPAQUES, À TOUTES LES LARGEURS
Elles héritaient du fond translucide commun à toutes les cartes `.ui`.
Dans un empilement — ou dans un rail où la suivante dépasse — on lit la
carte du dessous à travers celle du dessus. L'opacité n'était forcée qu'à
partir de 901 px : en dessous, la pile redevenait transparente.
========================================================================== */
#methode .c8 > .ui{
background:linear-gradient(180deg,#15304A,#0E2338);
border:1px solid rgba(255,255,255,.11);
-webkit-backdrop-filter:none;backdrop-filter:none;
}
#methode .c8 > .ui .ui-card,
#methode .c8 > .ui .ui-metric{
background-color:#12293F;
border-color:rgba(255,255,255,.12);
-webkit-backdrop-filter:none;backdrop-filter:none;
}
/* Les photos déplaçables n'ont plus d'ombre du tout.
Sur un fond clair, une ombre portée aussi large finit toujours par être
tranchée quelque part — par le bord du rail, par le bas du conteneur — et
une ombre coupée net se lit comme un rectangle gris. Le cadre blanc de la
carte suffit à la détacher. */
.dcarte,
.dcarte:hover,
.dcarte.tenue{
box-shadow:none;
}
/* En rangée horizontale, l'accordéon rognait le pied de l'ombre de ses
panneaux : un conteneur qui défile latéralement rogne AUSSI en vertical, et
26 px de coussin ne suffisaient pas à une ombre qui descend à 32. Sur fond
clair, ces 6 px manquants se lisent comme une barre grise sous la rangée. */
@media (max-width:900px){
.acco{padding-bottom:42px}
}
/* ==========================================================================
95. DANS UN RAIL, AUCUNE OMBRE PORTÉE — QUE DES LISERÉS
Le fond du problème : un conteneur qui défile rogne ses enfants, et une
ombre portée finit TOUJOURS par toucher ce bord. Agrandir le coussin ne
règle rien, ça ne fait que déplacer la coupure plus bas — et comme l'ombre
remplit alors tout le coussin, la bande grise devient plus grande.
La seule issue : pas d'ombre portée dans un rail. Un liseré intérieur ne
peut pas être rogné, puisqu'il est peint À L'INTÉRIEUR de la carte.
========================================================================== */
.acco > .acco-p,
.def-photos > .dcarte,
.ress-rail > .rc,
.cfm > *,
.mur-piste > .mur-v{
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.band--clair .acco > .acco-p,
.band--clair .def-photos > .dcarte,
.band--clair .cfm > *{
box-shadow:inset 0 0 0 1px rgba(10,24,38,.12);
}
/* la vedette du mur garde son halo : il est intérieur, donc jamais rogné */
.mur-piste > .mur-v--vedette{
box-shadow:inset 0 0 0 2px rgba(59,125,240,.55);
}
/* le coussin peut redevenir raisonnable : plus rien ne dépasse */
@media (max-width:900px){
.acco{padding-bottom:var(--s16)}
}
@media (max-width:1180px){
.def-photos{padding-bottom:var(--s12)}
}
/* ==========================================================================
96. LA PASTILLE DU HERO SUR MOBILE
Sa phrase s'est allongée : elle passe sur deux lignes, la pastille grandit
d'autant et vient toucher la barre de menu. On la resserre — pastilles plus
petites, quatre au lieu de cinq, texte d'un cran en dessous — et on rend au
hero la réserve de menu dont il se passait quand elle tenait sur une ligne.
========================================================================== */
@media (max-width:760px){
.hero{padding-block:calc(var(--nav-h) + clamp(30px,6vh,54px)) var(--s56)}
.tbadge{
padding:4px 13px 4px 4px;gap:8px;
max-width:min(100%,42ch);align-items:center;
}
.tbadge-logos img{width:17px;height:17px;margin-left:-5px;border-width:1.3px}
.tbadge-logos img:nth-child(n+5){display:none}
.tbadge-txt{font-size:10.5px;line-height:1.38;text-align:left}
}
@media (max-width:440px){
.tbadge-logos img:nth-child(n+4){display:none}
.tbadge-txt{font-size:10px}
}
/* Sur petit écran, l'éventail était la pièce qui poussait tout le hero vers
le haut : le contenu dépassait la hauteur d'écran et la pastille remontait
sous le menu quoi qu'on mette en marge. Il rétrécit d'un tiers. */
@media (max-width:760px){
.fan{max-width:min(320px,38vh,90%);margin-top:clamp(6px,1.6vh,18px)}
}
/* la maquette à l'intérieur d'une carte de la méthode : son ombre touchait le
bord du rail sur mobile */
@media (max-width:900px){
.mock{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
}
/* Le mur de témoignages passe lui aussi en rail sur mobile, et il n'avait
aucun coussin en bas : l'ombre de ses vignettes était tranchée net par le
bord du conteneur. Même règle que les autres rails — liseré intérieur. */
@media (max-width:900px){
.vwall{padding-bottom:var(--s12)}
.vwall .vcard-media{
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.vwall .vcard-play{box-shadow:none}
}
/* ==========================================================================
97. AUCUNE BARRE DE DÉFILEMENT VISIBLE SOUS UN RAIL
Chaque rail masquait la sienne dans SA propre requête média. Hors de cette
requête — ou dans un navigateur qui dessine des barres classiques plutôt
qu'en surimpression — la barre réapparaît : un trait clair en travers,
juste sous les cartes. On la masque une fois pour toutes, partout.
========================================================================== */
.vwall,.acco,.def-photos,.cfm,.ress-rail,#methode .c8,.mur-col{
scrollbar-width:none;
-ms-overflow-style:none;
}
.vwall::-webkit-scrollbar,
.acco::-webkit-scrollbar,
.def-photos::-webkit-scrollbar,
.cfm::-webkit-scrollbar,
.ress-rail::-webkit-scrollbar,
#methode .c8::-webkit-scrollbar,
.mur-col::-webkit-scrollbar{
width:0;height:0;display:none;
}
/* ==========================================================================
98. LE HERO TIENT DANS L'ÉCRAN, QUELLE QUE SOIT SA HAUTEUR
Son contenu est centré dans 100 vh : dès qu'il dépasse cette hauteur, il
déborde par le HAUT et la pastille passe sous la barre de menu. Aucune
marge ne corrige ça — il faut que le contenu rentre. Le titre et l'éventail
se calent donc sur la hauteur disponible, pas seulement sur la largeur.
========================================================================== */
@media (min-width:901px){
.hero-inner{gap:clamp(14px,2.2vh,26px)}
.hero{padding-block:calc(var(--nav-h) + clamp(22px,3.4vh,44px)) clamp(28px,4vh,56px)}
}
@media (min-width:901px) and (max-height:1100px){
.hero .t-hero{font-size:clamp(44px,5.9vw,76px)}
.fan{max-width:min(660px,48vh,94%)}
}
@media (min-width:901px) and (max-height:960px){
.hero .t-hero{font-size:clamp(42px,5.4vw,70px)}
.fan{max-width:min(600px,45vh,93%)}
.hero-inner{gap:clamp(11px,1.7vh,20px)}
}
@media (min-width:901px) and (max-height:840px){
.hero .t-hero{font-size:clamp(36px,4.4vw,58px)}
.hero .t-lead{font-size:15px;line-height:1.5}
.fan{max-width:min(500px,38vh,92%)}
}
@media (min-width:901px) and (max-height:740px){
.hero .t-hero{font-size:clamp(31px,3.6vw,48px)}
.hero .t-lead{font-size:14px;line-height:1.48}
.fan{max-width:min(420px,32vh,90%)}
}
/* ==========================================================================
99. LA BARRE TIENT SA LARGEUR, ET LES SCÈNES NE DÉBORDENT PLUS PAR LE HAUT
Deux défauts de la même famille : un contenu plus large — ou plus haut —
que la boîte qui le porte.
========================================================================== */
/* --- la barre --------------------------------------------------------------
Elle est plafonnée à la largeur de l'écran moins les gouttières, mais ses
enfants sont en flex:none : quand la somme dépasse, ils sortent du cadre
par la droite, et c'est le bouton qui dépasse. Le septième lien (Ressources)
a suffi à faire basculer les écrans de 1280 à 1500 px. On resserre. */
@media (min-width:901px) and (max-width:1560px){
.nav{padding:0 6px 0 14px}
.nav-links a{padding:7px 9px;font-size:12.5px}
.nav .btn{margin-left:8px}
}
@media (min-width:901px) and (max-width:1320px){
.nav-links a{padding:7px 7px;font-size:12px}
.nav .nav-word{width:76px}
.nav .btn{padding:8px 8px 8px 14px;font-size:12.5px}
}
/* --- les scènes épinglées --------------------------------------------------
`safe center` : le contenu reste centré tant qu'il tient, et se cale sur le
BORD HAUT dès qu'il déborde — au lieu de sortir par le haut et de passer
sous la barre de menu. C'est exactement ce que ce mot-clé existe pour faire. */
@media (min-width:901px){
#preuve.acte-pile > .wrap,
#voix > .wrap,
#modele > .wrap,
#equipe > .wrap,
#simulateur > .wrap,
#chiffres > .wrap,
#constat .plan,
.hero-inner{
align-content:safe center;
}
}
/* La vraie cause du bouton qui sort : la barre est en position fixe avec
`left:50%` et rien à droite. Sa largeur disponible n'est donc PAS l'écran,
c'est la moitié droite de l'écran — 720 px sur un 1440. Tant que six liens
tenaient dedans, personne ne le voyait ; le septième a fait déborder.
On l'ancre sur les deux bords et on la centre par les marges : elle dispose
enfin de toute la largeur. */
@media (min-width:901px){
.nav{
left:0;right:0;translate:none;
width:max-content;max-width:calc(100vw - 2 * var(--gut));
margin-inline:auto;
transform:translateY(-14px);
}
.nav.vu{transform:none}
}
/* ==========================================================================
100. « ILS NOUS ONT CONFIÉ LEUR VENTE » TIENT DANS L'ÉCRAN
La scène est épinglée sur la hauteur d'écran, mais son contenu — un titre
sur deux lignes, un paragraphe de six lignes et un accordéon de 380 px —
dépassait de 50 à 92 px sous 800 px de haut. Le titre et l'accordéon se
calent donc aussi sur la hauteur, comme le hero.
========================================================================== */
@media (min-width:901px) and (max-height:880px){
#preuve .head{margin-bottom:var(--s28)}
#preuve .head .t-h2{font-size:clamp(26px,3.1vw,42px)}
#preuve .head .t-lead{font-size:14px;line-height:1.5}
.acco{height:clamp(300px,45vh,460px);margin-top:var(--s20)}
}
@media (min-width:901px) and (max-height:780px){
#preuve .head{margin-bottom:var(--s20)}
#preuve .head .t-h2{font-size:clamp(24px,2.7vw,35px)}
#preuve .head .t-lead{font-size:13.5px;line-height:1.45}
.acco{height:clamp(262px,40vh,400px);margin-top:var(--s16)}
}
/* ==========================================================================
101. TOUTES LES SCÈNES ÉPINGLÉES TIENNENT DANS L'ÉCRAN
Relevé au banc : sous 900 px de haut, « l'équipe » débordait de 206 px,
le simulateur de 75, les témoignages de 46 — et l'équipe débordait encore
de 27 px sur un 1440x900, l'écran le plus courant. Chaque scène se cale
maintenant sur la hauteur autant que sur la largeur.
========================================================================== */
@media (min-width:901px) and (max-height:980px){
/* l'équipe : le schéma est la pièce haute, c'est lui qui donne le ton */
#equipe .head{margin-bottom:var(--s28)}
#equipe .head .t-h2{font-size:clamp(24px,2.9vw,38px)}
#equipe .archi-svg{max-height:48vh;width:auto;margin-inline:auto}
#equipe .archi-legende span{font-size:11.5px;line-height:1.42}
.epan-equipe .ec-cadre,.equipe-carte .ec-cadre{height:clamp(200px,26vh,300px)}
.mur{height:clamp(240px,33vh,380px)}
/* les témoignages */
#voix .head{margin-bottom:var(--s28)}
#voix .head .t-h2{font-size:clamp(24px,2.9vw,40px)}
.vcard{width:clamp(130px,13vw,180px)}
/* le simulateur — sans toucher au resserrage plus fin défini plus haut
pour les écrans sous 860 px, qui viendrait l'annuler */
#simulateur .head .t-h2{font-size:clamp(24px,2.8vw,38px)}
}
@media (min-width:901px) and (max-height:800px){
#equipe .head .t-h2{font-size:clamp(22px,2.5vw,32px)}
#equipe .archi-svg{max-height:42vh}
#equipe .archi-legende span{font-size:11px}
.epan-equipe .ec-cadre,.equipe-carte .ec-cadre{height:clamp(180px,23vh,260px)}
.mur{height:clamp(210px,29vh,320px)}
#voix .head .t-h2{font-size:clamp(22px,2.5vw,34px)}
.vcard{width:clamp(118px,11.5vw,158px)}
#simulateur .head .t-h2{font-size:clamp(22px,2.5vw,32px)}
#simulateur .scard{padding:var(--s14);gap:var(--s12)}
#simulateur .sim-total{font-size:clamp(24px,2.6vw,34px)}
#simulateur .srow-ico{width:24px;height:24px}
}
/* le simulateur est la scène la plus chargée : cinq curseurs, deux cartes et
un total. Sous 900 px de haut, ce sont les curseurs qui la font déborder. */
@media (min-width:901px) and (max-height:900px){
#simulateur .sim-field{padding-block:clamp(8px,1.4vh,16px);gap:clamp(6px,1vh,10px)}
#simulateur .sim-label span{font-size:13px}
#simulateur .sim-label b{font-size:14px}
}
@media (min-width:901px) and (max-height:790px){
#simulateur .sim-field{padding-block:clamp(6px,1vh,11px);gap:6px}
#simulateur .head .t-lead{font-size:12.5px;line-height:1.42}
#simulateur .scard-lab{font-size:11px}
}
/* dernier cran, pour les portables très courts (1280x700 et en dessous) */
@media (min-width:901px) and (max-height:730px){
#simulateur > .wrap{padding-block:calc(var(--nav-h) + 14px) 18px}
#simulateur .scard{padding:var(--s12);gap:10px}
#simulateur .sim-field{padding-block:6px;gap:5px}
#simulateur .sim-label span{font-size:12px}
#simulateur .sim-label b{font-size:13px}
#simulateur .sim-total{font-size:clamp(22px,2.3vw,30px)}
#simulateur .srow{gap:var(--s8)}
#simulateur .srow-ico{width:22px;height:22px}
#simulateur .scard-lab{font-size:10.5px}
#simulateur .sim-inputs{gap:var(--s8)}
}
/* ==========================================================================
102. LA BARRE EST BLEU NUIT, PARTOUT
Elle changeait d'habit selon ce qu'elle survolait — clair sur les sections
claires, sombre sur les sombres. Résultat : deux barres différentes dans
une même page. Elle garde désormais la même, celle de la marque, du premier
au dernier écran. Sur du blanc il lui faut juste plus de matière, sinon le
fond transparaît et elle vire au gris.
========================================================================== */
.nav,
.nav.over-dark,
.nav.over-clair{
/* pleine, pas translucide : le fond ne transparaît plus au travers */
background:#0B1A2A;
border-color:rgba(255,255,255,.14);
box-shadow:0 16px 38px -18px rgba(4,11,20,.55);
-webkit-backdrop-filter:blur(18px) saturate(1.4);
backdrop-filter:blur(18px) saturate(1.4);
}
.nav .nav-word,
.nav.over-clair .nav-word{filter:brightness(0) invert(1)}
.nav .nav-sep,
.nav.over-clair .nav-sep{background:rgba(255,255,255,.16)}
.nav .nav-links a,
.nav.over-clair .nav-links a{color:rgba(255,255,255,.88)}
.nav .nav-links a:hover,.nav .nav-links a.on,
.nav.over-clair .nav-links a:hover,.nav.over-clair .nav-links a.on{
color:#fff;background:rgba(255,255,255,.10);
}
.nav .nav-links a.on::after,
.nav.over-clair .nav-links a.on::after{background:#8FBBFF}
.nav .btn,
.nav.over-clair .btn{background:#fff;color:var(--navy-deep)}
.nav .btn .pip,
.nav.over-clair .btn .pip{background:rgba(11,22,34,.08);color:var(--navy-deep)}
.nav .nav-burger i,
.nav.over-clair .nav-burger i{background:#fff}
/* ==========================================================================
103. LES VIDÉOS PASSENT PAR LE LECTEUR MAISON
Témoignages et film du Summit : même lecteur, mêmes réglages que les
funnels (css/ffv.css + js/ffv.js). Ici, seulement l'habillage des cartes
et de la lightbox, à la charte du site.
========================================================================== */
/* --- le rail des témoignages --------------------------------------------- */
.testi-grille{
grid-auto-columns:clamp(290px,30vw,410px);
gap:16px;
}
.testi-card{
display:grid;gap:12px;align-content:start;
padding:14px 14px 16px;border-radius:18px;
background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.04));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.testi-result-tag{
justify-self:start;padding:5px 11px;border-radius:999px;
font-size:11px;font-weight:600;letter-spacing:.03em;
background:rgba(59,125,240,.18);color:#C7DCFF;
box-shadow:inset 0 0 0 1px rgba(143,187,255,.3);
}
.testi-media{
position:relative;display:block;width:100%;aspect-ratio:16/9;
padding:0;border:0;border-radius:12px;overflow:hidden;cursor:pointer;
background:#081422;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.testi-media img,.testi-apercu{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.testi-apercu{pointer-events:none;background:transparent}
.testi-play-btn{
position:absolute;inset:0;margin:auto;z-index:2;
width:52px;height:52px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.5);color:#fff;
transition:transform .2s,background .2s;
}
.testi-play-btn svg{width:22px;margin-left:2px}
.testi-media:hover .testi-play-btn,
.testi-media:focus-visible .testi-play-btn{transform:scale(1.08);background:rgba(0,0,0,.72)}
.testi-media:focus-visible{outline:2px solid #8FBBFF;outline-offset:2px}
.testi-text{margin:0;font-size:14px;line-height:1.5;color:#fff}
.testi-author{display:grid;gap:2px}
.testi-name{font-size:14px;font-weight:600;color:#fff}
.testi-role{font-size:12px;line-height:1.4;color:rgba(255,255,255,.72)}
@media (min-width:901px) and (max-height:820px){
.testi-grille{grid-auto-columns:clamp(260px,26vw,340px)}
.testi-text{font-size:13px}
}
@media (max-width:620px){
.testi-grille{grid-auto-columns:82vw}
}
/* --- la lightbox ----------------------------------------------------------- */
.testi-lb{
position:fixed;inset:0;z-index:9999;
display:flex;align-items:center;justify-content:center;padding:32px;
background:rgba(4,8,12,.92);
}
.testi-lb[hidden]{display:none}
.testi-lb-stage{
width:min(1040px,100%);aspect-ratio:16/9;background:#000;
border-radius:14px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.testi-lb-slot{position:relative;width:100%;height:100%}
.testi-lb-close{
position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:50%;
border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);
color:#fff;font-size:16px;cursor:pointer;
}
.testi-lb-close:hover{background:rgba(255,255,255,.18)}
@media (max-width:680px){
.testi-lb{padding:0}
.testi-lb-stage{border-radius:0}
.testi-lb-close{top:12px;right:12px}
}
/* --- le film du Summit ----------------------------------------------------- */
.film-lecteur{position:absolute;inset:0;z-index:3}
.film.a-video > img{opacity:0}
/* ==========================================================================
104. LES RAILS TIENNENT DANS LEUR COLONNE
Le plafond à 100vw laissait le rail prendre toute la largeur de l'écran en
partant du bord de la colonne : il dépassait à droite, et la dernière
carte restait à moitié hors champ une fois le rail au bout.
========================================================================== */
.ress-rail-boite{min-width:0;max-width:100%}
.ress-rail{min-width:0;max-width:100%}
/* ==========================================================================
105. LE POINTEUR PASSE AU-DESSUS DE TOUT
Il était sous la visionneuse des témoignages (z-index 9999) : au clic sur
une vidéo, il disparaissait. En plein écran, le lecteur passe dans une
couche que rien ne peut recouvrir : on y rend le pointeur du système.
========================================================================== */
.curseur{z-index:2147483000}
html.curseur-perso :fullscreen,
html.curseur-perso :fullscreen *{cursor:auto!important}
html.curseur-perso :-webkit-full-screen,
html.curseur-perso :-webkit-full-screen *{cursor:auto!important}
/* ==========================================================================
106. L'AFTERMOVIE DU SUMMIT EN 16/9
Le cadre était en 16/10 pour une photo. Le film est en 16/9 : on aligne le
cadre sur la vidéo pour qu'elle ne soit pas rognée, et le voile sombre
posé sur la photo ne passe pas sur l'image animée.
========================================================================== */
.film.a-video{aspect-ratio:16/9;cursor:default}
.film.a-video::after{display:none}
.film.a-video:hover img{transform:none}
.film-lecteur .ffv{width:100%;height:100%;border-radius:0}
/* ==========================================================================
107. LE RIDEAU LAISSE PASSER LES CLICS
Il remonte de 150vh sur l'équipe épinglée : sa boîte recouvrait le film du
Summit et le mur d'extraits, et avalait les clics. Il est purement
décoratif (aria-hidden) : aucun clic ne lui est destiné.
========================================================================== */
.rideau{pointer-events:none}
/* ==========================================================================
108. LE FILM DU SUMMIT S'OUVRE EN GRAND
La colonne ne sert qu'à l'aperçu muet : toute la surface ouvre la
visionneuse. La barre de commandes n'a plus de rôle ici.
========================================================================== */
.film.a-video,.film.a-video *{cursor:pointer}
.film-lecteur .ffv-bar{display:none}
/* ==========================================================================
109. AU DOIGT, LES PHOTOS DE « CE QU'EST STRIKER » DÉFILENT
Sous 1180 px, la rangée devient un rail qui glisse. `touch-action:none`
— utile à la souris pour attraper une carte — empêchait le doigt de le
faire défiler : la rangée paraissait bloquée.
========================================================================== */
@media (max-width:1180px){
.dcarte{touch-action:pan-x pan-y;cursor:default}
}
/* ==========================================================================
110. RIEN NE DÉBORDE SUR LE CÔTÉ, AU TÉLÉPHONE
Les halos et les rangées penchées dépassent de quelques pixels à droite.
Sur un mobile, ça se traduit par une page qui glisse latéralement — on
croit voir « les côtés bouger ». `clip` coupe le débordement sans créer
de conteneur de défilement : les scènes épinglées ne bougent pas.
========================================================================== */
@media (max-width:900px){
.band,.hero{overflow-x:clip}
}
/* ==========================================================================
111. STABILITÉ MOBILE
Les courses épinglées gardent EXACTEMENT les durées d'origine : elles sont
calibrées sur la chorégraphie (le lettrage, le voile, la console qui
arrive derrière). Les raccourcir laissait un écran vide à la fin.
Ici, seule l'ancre est corrigée : le titre visé ne se range plus sous le
menu.
========================================================================== */
html{scroll-padding-top:calc(var(--nav-h, 64px) + 18px)}
/* ==========================================================================
112. LE VOILE D'OUVERTURE NE BLOQUE PLUS LES BOUTONS
Il couvre tout le hero et reste dans la page une fois traversé : les deux
boutons du hero étaient dessous, donc morts au clic sur ordinateur.
Il est décoratif : il ne doit recevoir aucun clic.
========================================================================== */
.ouv-voile{pointer-events:none}
/* ==========================================================================
113. PAS DE FLOU D'ARRIÈRE-PLAN SUR TÉLÉPHONE
Chaque surface floutée est redessinée à chaque image pendant le défilement.
Sur un téléphone, c'est le poste le plus cher de la page pour un effet
qu'on ne voit presque pas. Les fonds restent, le flou saute.
========================================================================== */
@media (max-width:900px){
*{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
/* ==========================================================================
114. LES RANGÉES HORIZONTALES NE TIRENT PLUS LA PAGE (TÉLÉPHONE)
Deux mécanismes se répercutaient sur le défilement vertical :
— le magnétisme (`scroll-snap`) : arrivé près d'une carte, le navigateur
recale la rangée, et sur iOS ce recalage entraîne la page avec lui ;
— le chaînage : quand la rangée est au bout, la poussée du doigt passe à
la page, qui repart de quelques crans.
On coupe les deux : les rangées glissent librement, la page ne bouge que
quand c'est elle qu'on pousse.
========================================================================== */
@media (max-width:900px){
.ress-rail,.acco,.def-photos,.cfm,.vwall,.mur-col,.testi-grille,#methode .c8{
scroll-snap-type:none;
/* uniquement sur l'axe horizontal : sinon un geste vertical commencé sur
une rangée ne fait plus défiler la page du tout. */
overscroll-behavior-x:contain;
overscroll-behavior-y:auto;
}
.ress-rail > *,.dcarte,.acco-p,.vcard,.rc{scroll-snap-align:none}
}
/* ==========================================================================
115. AUCUN FLOU RECALCULÉ PENDANT LE DÉFILEMENT (TÉLÉPHONE)
Trois effets refaisaient un flou à chaque image, sur de grandes surfaces :
les titres du constat (jusqu'à 14 px de flou sur du texte de 64 px), chaque
mot des révélations (un flou par mot), et les deux halos de fond (78 vmax,
flou 28 px, déplacés au défilement). Un téléphone n'y arrive pas : l'image
part en retard sur le doigt, ce qui se voit comme un saut.
Le mouvement et le fondu restent — seul le flou saute.
========================================================================== */
@media (max-width:900px){
.plan-titre{filter:none!important;will-change:opacity,transform}
.revele .m{filter:none!important;will-change:opacity}
.monde-lueur{filter:none;opacity:.55}
.w > i,.in .w > i,.w.in > i{filter:none!important}
.console .ekpi,.console .epan{filter:none!important}
}
/* ==========================================================================
116. LE GESTE DE RETOUR DE SAFARI NE S'INVITE PLUS
Un glissement qui part d'une rangée horizontale, ou qui commence près du
bord, peut être compris par Safari comme « revenir à la page précédente » :
la page se réduit en carte et glisse, puis revient — d'où l'impression de
dézoom et de saut. On empêche le défilement horizontal de la page de
déborder ; le défilement vertical, lui, garde son comportement normal.
========================================================================== */
html,body{overscroll-behavior-x:none}
/* ==========================================================================
117. LE LETTRAGE GRANDIT PAR ZOOM, PAS PAR REGRAVURE (TÉLÉPHONE)
Les trois traversées (ouverture, console, rideau) agrandissaient un masque
ou une lettre au fil du défilement : jusqu'à dix-huit écrans de large,
redessinés à chaque image par le processeur principal — celui qui doit
aussi suivre le doigt. On fige la taille de départ et on agrandit la
surface : le processeur graphique s'en charge, le mouvement est le même.
========================================================================== */
@media (max-width:900px){
/* `--base` est la taille de départ, transmise par le script (elle dépend de
la longueur du mot) ; `--k` est le facteur d'agrandissement. */
.ouv-voile,.ouv-marque,.charge-voile,.rideau-scene{--taille:var(--base,11.5vw)!important}
.ouv-voile,.ouv-marque,
.charge-voile .charge-svg,
.rideau-scene .rideau-svg{transform:scale(var(--k,1));transform-origin:50% 50%}
}
/* ==========================================================================
118. LES SCÈNES NE DÉBORDENT PLUS (LA CAUSE DE L'EXCÉDENT HORIZONTAL)
Les plaques de lettrage sont agrandies jusqu'à vingt fois l'écran. Safari
compte cet agrandissement dans la largeur de la PAGE : le document passait
à près de six mille pixels de large, la page devenait déplaçable sur le
côté, et un geste vertical se mettait à lutter contre un geste horizontal
— d'où les sauts, et le fond visible sur les côtés.
`clip` coupe au bord de la scène sans créer de zone de défilement.
========================================================================== */
.ouv,.ouv-scene,
.charge,.charge-scene,
.rideau,.rideau-scene,
.monde,.acte-plein,.acte-mot{overflow:clip}
/* ==========================================================================
119. DES COURSES ÉPINGLÉES PLUS COURTES SUR TÉLÉPHONE
Mesure faite dans le moteur de Safari : 46 % de la page était épinglée,
c'est-à-dire que l'image ne bougeait pas sous le doigt. Sur une molette
c'est une mise en scène ; sur un écran tactile, c'est une page qui ne
répond pas, puis qui repart d'un coup. Les mêmes animations se jouent
donc sur une course plus courte : elles vont plus vite, et la page suit
le doigt bien plus souvent. Les valeurs sans `svh` suivent, pour les
navigateurs qui n'ont pas cette unité.
========================================================================== */
@media (max-width:900px){
.ouv{height:160vh}
.charge{height:195vh}
.acte-plein{height:210vh}
.acte-mot{height:135vh}
.rideau{height:165vh}
}
@supports (height:100svh){
@media (max-width:900px){
.ouv{height:160svh}
.charge{height:195svh}
.acte-plein{height:210svh}
.acte-mot{height:135svh}
.rideau{height:165svh}
}
}
/* ==========================================================================
120. SUR TÉLÉPHONE, C'EST LE CONTENEUR QUI DÉFILE, PAS LA PAGE
Relevé sur l'appareil : quand c'est la page qui défile, la barre d'adresse
du navigateur s'ouvre et se referme à chaque changement de sens — 18 fois
en quelques secondes — et la hauteur utile passe de 727 à 876 px. À chaque
bascule, le navigateur décale le contenu pour compenser : la section
« remonte ou descend toute seule », et le geste en cours est perdu.
Quand le défilement a lieu dans un conteneur, la barre reste en place.
Sur ordinateur, #page n'est pas un défileur : rien ne change.
========================================================================== */
@media (max-width:900px){
html,body{height:100%;overflow:hidden}
#page{
height:100%;overflow-y:auto;overflow-x:hidden;
-webkit-overflow-scrolling:touch;
overscroll-behavior-y:none; /* pas de rebond qui recale la page */
}
}
/* ==========================================================================
121. LE NAVIGATEUR LISSE LE MOUVEMENT ENTRE DEUX MISES À JOUR (TÉLÉPHONE)
Dans un conteneur de défilement, iOS ne transmet la position au site que
par à-coups pendant l'inertie : les scènes avancent par paliers et le
mouvement paraît hachuré. On demande donc au navigateur d'interpoler
lui-même entre deux valeurs : il le fait sur sa propre cadence, sans le
site. 120 ms, c'est assez pour lisser et trop court pour qu'on sente un
retard. Sur ordinateur, rien n'est touché.
========================================================================== */
@media (max-width:900px){
.ouv-voile,.ouv-marque,
.charge-voile,.charge-svg,.charge-term,
.rideau-scene,.rideau-svg,
.plan-oeil,.plan-titre,
.plan-avant li,.plan-apres li,
.revele .m,.revele mark{
transition:transform .12s linear, opacity .12s linear,
-webkit-mask-size .12s linear, mask-size .12s linear;
}
.charge-lignes li{transition:width .12s linear}
.charge-barre i{transition:width .12s linear}
}
/* ==========================================================================
122. LA BARRE DE MENU ARRIVE EN DOUCEUR
Elle est révélée par une classe : sans transition, elle apparaissait d'un
coup. On lui donne un fondu et une descente, légèrement ralentis à la
sortie — c'est ce qui donne l'impression qu'elle « se pose ».
========================================================================== */
.nav{
transition:background .4s var(--ease),border-color .4s var(--ease),
box-shadow .4s var(--ease),
opacity .5s var(--ease),transform .5s cubic-bezier(.22,1,.36,1);
}
/* ==========================================================================
123. UN PEU D'AIR ENTRE LE MENU ET LA PASTILLE DU HERO
Sur téléphone, la pastille « +35 M€ générés… » arrivait juste sous la barre
et semblait collée. On rend au hero la hauteur de la barre PLUS une vraie
respiration, au lieu de la réserve minimale.
========================================================================== */
@media (max-width:900px){
/* Le hero est CENTRÉ dans sa scène : lui ajouter du rembourrage le grandit
sans le descendre. On décale donc son contenu, ce qui ne change pas la
mise en page et laisse la pastille respirer sous la barre. */
.ouv-scene .hero-inner{transform:translateY(26px)}
}
/* ==========================================================================
124. L'ÉVENTAIL DU HERO TIENT DANS L'ÉCRAN, Y COMPRIS SUR PETIT TÉLÉPHONE
La scène d'ouverture coupe net à la hauteur d'écran. Le contenu du hero y
est CENTRÉ : dès qu'il est plus haut que la place disponible, il déborde
des deux côtés à parts égales — et ce qui dépasse par le bas, ce sont les
deux cartes extérieures de l'éventail, qui sont justement descendues de
24 px par leur inclinaison. Relevé en WebKit : rien à couper sur un grand
écran, 36 px coupés sur un écran de 664 px, 121 px sur un écran de 568 px.
On rend donc de la place sur les écrans courts, dans cet ordre : d'abord le
rembourrage de la scène, qui ne se voit pas ; puis l'éventail et les
interlignes ; enfin le corps du titre.
========================================================================== */
/* Les deux cartes extérieures sont descendues de 24 px par leur inclinaison :
elles sortent de la boîte que la mise en page mesure, qui ne sait donc pas
qu'il faut leur garder cette place. On la lui déclare. */
@media (max-width:900px){
.fan{padding-bottom:26px}
}
@media (max-width:900px) and (max-height:720px){
/* Le rembourrage haut garde la barre de menu dégagée, le bas n'a plus de
raison d'être aussi large : il ne sert qu'à éloigner le « Découvrir ». */
.ouv-scene > .hero{padding-block:calc(var(--nav-h) + var(--s24)) var(--s16)}
.hero-inner{gap:var(--s14)}
.hero .t-hero{font-size:clamp(28px,7.4vw,36px)}
.hero .t-lead{font-size:13.5px;line-height:1.44}
.fan{max-width:min(230px,26vh,84%);margin-top:clamp(4px,1.2vh,12px)}
/* Moins de place : moins de décalage, sinon on reprend d'un côté ce qu'on
vient de rendre de l'autre. */
.ouv-scene .hero-inner{transform:translateY(16px)}
}
@media (max-width:900px) and (max-height:620px){
.ouv-scene > .hero{padding-block:calc(var(--nav-h) + var(--s16)) var(--s8)}
.hero-inner{gap:var(--s10)}
.hero .t-hero{font-size:clamp(23px,6.6vw,29px)}
.hero .t-lead{font-size:12.5px;line-height:1.4}
.fan{max-width:min(165px,20vh,74%)}
.ouv-scene .hero-inner{transform:translateY(10px)}
}
/* ==========================================================================
125. LES PAGES ANNEXES — RECRUTEMENT ET MENTIONS
Trois pages de texte reprises du Webflow au moment de la bascule. Elles
n'ont pas de mise en scène : on leur donne juste de quoi être lisibles —
une colonne de lecture, des titres qui se détachent, et une rangée de
chiffres pour le recrutement. Tout le reste vient des classes existantes.
========================================================================== */
.rec-chiffres{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--s16);margin-top:var(--s40);
}
.rec-chiffres figure{
margin:0;padding:var(--s24) var(--s16);text-align:center;
border:1px solid var(--line-2);border-radius:16px;
background:rgba(255,255,255,.03);
}
.rec-chiffres b{
display:block;font-weight:700;line-height:1.05;
font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em;
}
.rec-chiffres figcaption{
display:block;margin-top:var(--s8);font-size:13px;line-height:1.35;
color:rgba(255,255,255,.62);
}
@media (max-width:760px){
.rec-chiffres{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s12)}
.rec-chiffres figure{padding:var(--s20) var(--s12)}
}
/* La colonne de lecture des pages légales. 68 caractères : au-delà, l'œil
perd la ligne en revenant à la marge. */
.texte-legal{max-width:68ch;margin-inline:auto}
.texte-legal h2{
margin:var(--s40) 0 var(--s12);font-size:clamp(19px,2.2vw,23px);
font-weight:650;letter-spacing:-.01em;
}
.texte-legal h2:first-of-type{margin-top:var(--s24)}
.texte-legal p,.texte-legal li{
margin:0 0 var(--s12);font-size:15px;line-height:1.62;
color:rgba(255,255,255,.76);
}
.texte-legal ul{margin:0 0 var(--s12);padding-left:1.1em}
.texte-legal a{color:var(--blue-bright);text-decoration:underline;text-underline-offset:3px}
.texte-legal .maj{
display:inline-block;margin-bottom:var(--s24);padding:5px 12px;
border:1px solid var(--line-2);border-radius:999px;
font-size:12.5px;color:rgba(255,255,255,.6);
}
/* ==========================================================================
126. LA PAGE RECRUTEMENT — LES POSTES À GAUCHE, LA FICHE À DROITE
Les deux fiches sont dans le HTML, l'une masquée : sans script la page
reste lisible et Google indexe les deux postes. Le script ne fait que
choisir celle qu'on montre.
========================================================================== */
.rec-duo{
display:grid;grid-template-columns:270px minmax(0,1fr);
gap:var(--s40);align-items:start;
}
.rec-cote{position:sticky;top:calc(var(--nav-h) + var(--s24));display:grid;gap:var(--s8)}
.rec-cote-titre{
margin:0 0 var(--s4);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.5);
}
.rec-poste{
display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s12);
width:100%;padding:var(--s16);text-align:left;cursor:pointer;
border:1px solid var(--line-2);border-radius:14px;
background:rgba(255,255,255,.03);color:inherit;font:inherit;
transition:border-color .2s var(--ease),background .2s var(--ease);
}
.rec-poste:hover{border-color:rgba(255,255,255,.26)}
.rec-poste[aria-selected="true"]{
border-color:var(--blue-bright);background:rgba(59,125,240,.12);
}
.rec-poste b{display:block;font-size:15.5px;font-weight:620}
.rec-poste span{display:block;margin-top:3px;font-size:12.5px;color:rgba(255,255,255,.58)}
.rec-poste i{
font-style:normal;font-size:11px;padding:3px 9px;border-radius:999px;
border:1px solid var(--line-2);color:rgba(255,255,255,.66);white-space:nowrap;
}
.rec-fiche{
padding:var(--s32);border:1px solid var(--line-2);border-radius:20px;
background:rgba(255,255,255,.035);
}
.rec-fiche[hidden]{display:none}
.rec-fiche > h2{margin:0;font-size:clamp(23px,2.8vw,30px);font-weight:680;letter-spacing:-.015em}
.rec-fiche > .rec-meta{
display:flex;flex-wrap:wrap;gap:var(--s8);margin:var(--s16) 0 var(--s28);
}
.rec-meta em{
font-style:normal;font-size:12.5px;padding:5px 11px;border-radius:999px;
border:1px solid var(--line-2);color:rgba(255,255,255,.7);
}
.rec-fiche h3{
margin:var(--s28) 0 var(--s10);font-size:15px;font-weight:650;
letter-spacing:.02em;color:#fff;
}
.rec-fiche h3:first-of-type{margin-top:0}
.rec-fiche p,.rec-fiche li{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.76);margin:0 0 var(--s10)}
.rec-fiche ul{margin:0;padding-left:1.15em}
.rec-fiche .rec-postuler{margin-top:var(--s32)}
@media (max-width:900px){
.rec-duo{grid-template-columns:minmax(0,1fr);gap:var(--s24)}
/* Les postes passent en rangée défilante : une colonne de boutons au-dessus
de la fiche repousserait le contenu hors de l'écran. */
.rec-cote{
position:static;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);
gap:var(--s10);overflow-x:auto;scroll-snap-type:x mandatory;
margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
scrollbar-width:none;
}
.rec-cote::-webkit-scrollbar{display:none}
.rec-cote-titre{display:none}
/* Sur une carte étroite, l'étiquette « Remote » à droite serrait le texte
sur trois lignes : elle passe en dessous. */
.rec-poste{scroll-snap-align:start;grid-template-columns:minmax(0,1fr)}
.rec-poste i{justify-self:start;margin-top:var(--s10)}
.rec-fiche{padding:var(--s20)}
}
/* ==========================================================================
127. LES DEUX TÉMOIGNAGES DE LA FICHE CLOSER
Mêmes cartes et même lecteur que le mur de la page d'accueil : on ne
reconstruit rien, on les met côte à côte dans la fiche.
========================================================================== */
.rec-temoins{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--s16);margin-top:var(--s16);
}
@media (max-width:820px){
.rec-temoins{grid-template-columns:minmax(0,1fr)}
}
/* ==========================================================================
128. LA CITATION DE L'ÉTUDE DE CAS
Un verdict de dirigeant, avec son visage. Sans la photo, c'est une phrase
qu'on peut avoir écrite soi-même ; avec, c'est quelqu'un qui la signe.
========================================================================== */
.cas-citation{
margin:var(--s40) 0 0;padding:var(--s28);
border:1px solid var(--line-2);border-radius:20px;
background:rgba(59,125,240,.07);
}
.cas-citation blockquote{
margin:0;font-size:clamp(16px,1.9vw,19px);line-height:1.55;
color:#fff;font-weight:450;
}
.cas-citation figcaption{
display:flex;align-items:center;gap:var(--s14);margin-top:var(--s20);
}
.cas-citation img{
width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.cas-citation figcaption span{display:grid;font-size:13px;color:rgba(255,255,255,.66)}
.cas-citation figcaption b{font-size:14.5px;font-weight:600;color:#fff}
/* Le lien vers l'étude de cas, dans la carte client ouverte. */
.acco-lien{
display:inline-flex;align-items:center;gap:7px;margin-top:var(--s14);
font-size:13.5px;font-weight:600;color:var(--blue-bright);
text-decoration:underline;text-underline-offset:3px;
}
.acco-lien i{font-style:normal;font-size:11px}
/* ==========================================================================
129. LE BANDEAU DE CONSENTEMENT
Discret mais pas caché, et surtout : « Refuser » a exactement le même poids
visuel que « Accepter ». Un bandeau où le refus est plus difficile que
l'acceptation n'est pas un consentement, c'est une case à cocher déguisée.
Il se place au-dessus de la barre de rappel, qu'on décale le temps du choix.
========================================================================== */
.conso{
position:fixed;left:50%;bottom:clamp(14px,2.4vh,26px);z-index:70;
width:min(680px,calc(100vw - 2 * var(--gut)));
translate:-50% 0;
display:grid;gap:var(--s14);
padding:var(--s18) var(--s20);
border-radius:18px;
background:rgba(8,18,30,.94);
-webkit-backdrop-filter:blur(16px) saturate(1.3);
backdrop-filter:blur(16px) saturate(1.3);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 24px 60px -18px rgba(3,9,15,.7);
opacity:0;transform:translateY(14px);
transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.conso.vu{opacity:1;transform:none}
.conso-t{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.conso-t a{color:var(--blue-bright);text-decoration:underline;text-underline-offset:3px}
.conso-b{display:flex;gap:var(--s10);justify-content:flex-end}
.conso-b button{
flex:0 0 auto;padding:9px 20px;border-radius:999px;cursor:pointer;
font:inherit;font-size:13.5px;font-weight:600;line-height:1;
transition:background .2s var(--ease),border-color .2s var(--ease);
}
.conso-x{background:transparent;border:1px solid rgba(255,255,255,.26);color:#fff}
.conso-x:hover{border-color:rgba(255,255,255,.5)}
.conso-ok{background:#fff;border:1px solid #fff;color:#0A1826}
.conso-ok:hover{background:rgba(255,255,255,.88)}
/* la barre « Tester mon pôle de vente » remonte le temps du choix */
.a-conso .rappel{transform:translate(-50%,-96px)}
@media (max-width:620px){
.conso{gap:var(--s12);padding:var(--s16)}
.conso-b{justify-content:stretch}
.conso-b button{flex:1 1 0}
.a-conso .rappel{transform:translate(-50%,-150px)}
}
/* ==========================================================================
130. LE CORPS D'UN ARTICLE
Les pages d'articles sont engendrées depuis articles/*.md : leur contenu
n'est que du texte, des titres, des listes et des citations. Ce bloc leur
donne une colonne de lecture et détache la citation, qui sinon passait pour
un paragraphe indenté.
========================================================================== */
.art-meta{
margin:var(--s12) 0 0;font-size:13px;color:rgba(255,255,255,.55);
font-variant-numeric:tabular-nums;
}
.art-corps h2{margin:var(--s40) 0 var(--s12)}
.art-corps h3{
margin:var(--s28) 0 var(--s10);font-size:clamp(16px,1.9vw,18px);
font-weight:620;color:#fff;
}
.art-corps blockquote{
margin:var(--s24) 0;padding:var(--s18) var(--s20);
border-left:3px solid var(--blue-bright);border-radius:0 14px 14px 0;
background:rgba(59,125,240,.08);
}
.art-corps blockquote p{
margin:0;font-size:clamp(15px,1.8vw,17px);line-height:1.55;
color:#fff;font-weight:450;
}
.art-corps ul,.art-corps ol{margin:0 0 var(--s16);padding-left:1.2em}
.art-corps li{margin-bottom:var(--s8)}
.art-corps li::marker{color:rgba(255,255,255,.4)}
.art-corps hr{
margin:var(--s32) 0;border:0;height:1px;background:var(--line-2);
}
.art-corps code{
padding:2px 6px;border-radius:6px;font-size:.92em;
background:rgba(255,255,255,.08);
}