(contenu dupliqué par site.js) */
.marquee{overflow:hidden;border-block:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-in{display:flex;gap:56px;width:max-content;padding-block:18px;animation:defile 38s linear infinite}
.marquee:hover .marquee-in{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}
/* cartes qui s'inclinent légèrement sous la souris : .tilt */
.tilt{transition:transform .35s ease;transform-style:preserve-3d;will-change:transform}
/* halo qui suit la souris dans un panneau : .spot */
.spot{position:relative;isolation:isolate}
.spot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(200,16,46,.16),transparent 70%)}
.spot:hover::after{opacity:1}
/* ruban du logo, tracé au défilement : */
.ruban path{fill:none;stroke:var(--carmin);stroke-width:2;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.marquee-in{animation:none}.js .mots .w>span{transform:none;transition:none}.progress{display:none}}
/* ---- lisibilité (retour Paul 20/10 soir) : plus d'air, texte plus grand et plus clair, des pauses ---- */
:root{--bone-2:#C4A3A9;--t-m:18px;--t-l:22px}
body{line-height:1.65}
.lede{line-height:1.5;max-width:32em}
.sec{padding-block:clamp(88px,9vw,128px)}
.sec-head{margin-bottom:clamp(48px,5vw,80px)}
.sec-head .lede{margin-top:28px}
/* une section claire par page, pour casser le fond sombre : */
/* une pause : une seule phrase, beaucoup d'espace.
…
… …
*/
.pause{padding-block:clamp(96px,12vw,180px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.pause .mono{color:var(--carmin-c)}
.pause-t{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(32px,4.2vw,64px);line-height:.95;max-width:14em;margin-top:28px;text-wrap:balance}
.pause-t em{font-style:normal;color:var(--carmin-c)}
.pause .ruban{position:absolute;right:-4%;top:50%;width:min(520px,46vw);height:auto;transform:translateY(-50%);opacity:.5;pointer-events:none}
/* détails repliés : le texte secondaire reste disponible sans charger la page */
.plus{margin-top:14px}
.plus summary{cursor:pointer;list-style:none;font-family:var(--f-mono);font-weight:500;font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--carmin-c);display:inline-flex;gap:8px;align-items:center}
.plus summary::-webkit-details-marker{display:none}
.plus summary::after{content:"+";transition:transform .2s}
.plus[open] summary::after{transform:rotate(45deg)}
.plus>div{margin-top:10px;color:var(--bone-2);font-size:var(--t-s)}
/* ---- deux thèmes (retour Paul 20/10) : sombre par défaut ici, clair si le système est clair ; bouton .theme-t pour basculer ---- */
@media (prefers-color-scheme:light){:root:not([data-tt="dark"]){--ink:#FFFFFF;--ink-2:#FBF2F3;--ink-3:#EFE3E5;--bone:#1B0A0E;--bone-2:#6B5257;--bone-3:#96787E;--line:rgba(27,10,14,.13);--line-2:rgba(27,10,14,.28);--carmin-c:#C8102E;--laiton:#8C6A1C;--grid-1:rgba(27,10,14,.05);--grid-2:rgba(27,10,14,.022);--top-bg:rgba(255,255,255,.9);--todo-b:rgba(140,106,28,.5);color-scheme:light}}
:root[data-tt="light"]{--ink:#FFFFFF;--ink-2:#FBF2F3;--ink-3:#EFE3E5;--bone:#1B0A0E;--bone-2:#6B5257;--bone-3:#96787E;--line:rgba(27,10,14,.13);--line-2:rgba(27,10,14,.28);--carmin-c:#C8102E;--laiton:#8C6A1C;--grid-1:rgba(27,10,14,.05);--grid-2:rgba(27,10,14,.022);--top-bg:rgba(255,255,255,.9);--todo-b:rgba(140,106,28,.5);color-scheme:light}
/* section inversée : claire dans le thème sombre, sombre dans le thème clair */
.sec--papier{--ink:#FFFFFF;--ink-2:#FBF2F3;--ink-3:#EFE3E5;--bone:#1B0A0E;--bone-2:#6B5257;--bone-3:#96787E;--line:rgba(27,10,14,.13);--line-2:rgba(27,10,14,.28);--carmin-c:#C8102E;--laiton:#8C6A1C;--grid-1:rgba(27,10,14,.05);--grid-2:rgba(27,10,14,.022);--top-bg:rgba(255,255,255,.9);--todo-b:rgba(140,106,28,.5);color-scheme:light;background-color:var(--ink);color:var(--bone);border-bottom:0}
@media (prefers-color-scheme:light){:root:not([data-tt="dark"]) .sec--papier{--ink:#1B0A0E;--ink-2:#12060A;--ink-3:#2E0F15;--bone:#F7EAEC;--bone-2:#C4A3A9;--bone-3:#96757C;--line:rgba(247,234,236,.16);--line-2:rgba(247,234,236,.32);--carmin-c:#C8102E;--laiton:#D4B06A;--grid-1:rgba(247,234,236,.045);--grid-2:rgba(247,234,236,.018);--top-bg:rgba(27,10,14,.86);--todo-b:rgba(212,176,106,.55);color-scheme:dark}}
:root[data-tt="light"] .sec--papier{--ink:#1B0A0E;--ink-2:#12060A;--ink-3:#2E0F15;--bone:#F7EAEC;--bone-2:#C4A3A9;--bone-3:#96757C;--line:rgba(247,234,236,.16);--line-2:rgba(247,234,236,.32);--carmin-c:#C8102E;--laiton:#D4B06A;--grid-1:rgba(247,234,236,.045);--grid-2:rgba(247,234,236,.018);--top-bg:rgba(27,10,14,.86);--todo-b:rgba(212,176,106,.55);color-scheme:dark}
body,.sec--papier{transition:background-color .3s,color .3s}
.theme-t{background:none;border:1px solid var(--line-2);color:var(--bone);width:42px;height:42px;display:grid;place-items:center;cursor:pointer;flex:none}
.theme-t:hover{border-color:var(--carmin)}
.theme-t svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.theme-t .sun{display:none}
@media (prefers-color-scheme:light){:root:not([data-tt="dark"]) .theme-t .sun{display:block}:root:not([data-tt="dark"]) .theme-t .moon{display:none}}
:root[data-tt="light"] .theme-t .sun{display:block}:root[data-tt="light"] .theme-t .moon{display:none}
@media (max-width:420px){.theme-t{width:38px;height:38px}}
/* ---- couleurs écrites en dur dans les schémas SVG : ramenées aux variables pour suivre le thème ---- */
[stroke="#F7EAEC"]{stroke:var(--bone)}
[fill="#F7EAEC"]{fill:var(--bone)}
[stroke="#C4A3A9"]{stroke:var(--bone-2)}
[stroke="#96757C"]{stroke:var(--bone-3)}[fill="#96757C"]{fill:var(--bone-3)}
[fill="#1B0A0E"]{fill:var(--ink)}[fill="#12060A"]{fill:var(--ink-2)}
[stroke="#C8102E"]{stroke:var(--carmin-c)}[fill="#C8102E"]{fill:var(--carmin-c)}[stop-color="#C8102E"]{stop-color:var(--carmin-c)}
[fill="#D4B06A"]{fill:var(--laiton)}[stroke="#D4B06A"]{stroke:var(--laiton)}
[stroke^="rgba(247,234,236,.1"],[stroke^="rgba(247,234,236,.2"]{stroke:var(--line)}
[stroke^="rgba(247,234,236,.3"],[stroke^="rgba(247,234,236,.4"],[stroke^="rgba(247,234,236,.5"]{stroke:var(--line-2)}
@media (max-width:420px){.top .btn{font-size:0;padding:9px 10px}.top .btn::before{content:"Démo";font-size:11px;letter-spacing:.08em}}
/* ==== passe 4 (analyse du 21/10) : moins de bruit, échelle stricte, rouge réservé, pleine largeur ==== */
/* 1. quadrillage seulement derrière le haut de page et les schémas */
body{background-image:none}
.hero,.phead,.grille{background-image:linear-gradient(var(--grid-1) 1px,transparent 1px),linear-gradient(90deg,var(--grid-1) 1px,transparent 1px);background-size:160px 160px}
/* 2. échelle stricte : 6 tailles */
:root{--t-mono:12px;--t-src:13px;--t-s:15px;--t-m:18px;--t-l:22px;--t-h3:clamp(22px,2vw,26px);--t-h2:clamp(30px,3.2vw,40px);--t-h1:clamp(42px,5.6vw,84px)}
.src,.source{font-size:var(--t-src);color:var(--bone-2)}
/* 3. rouge réservé : bouton d'action, chiffre clé, mot fort du titre de page */
.h2 em{color:inherit}
.sec-head .mono,.sec-head>.mono{color:var(--bone-2);border-top:1px solid var(--line-2)}
.more{color:var(--bone)}
.more:hover{color:var(--carmin-c)}
/* 4. étiquette au-dessus du titre, contenu pleine largeur */
.sec-head{grid-template-columns:minmax(0,1fr);gap:14px;max-width:46em}
.sec-head .mono{justify-self:start;padding-right:16px}
/* 5. éléments à fournir : masqués en mode présentation, visibles en mode relecture */
html:not(.relecture) .todo{display:none}
.relect{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:var(--ink-2);color:var(--bone-2);border:1px solid var(--line-2);padding:9px 12px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.relect i{width:8px;height:8px;border:1px solid var(--laiton);border-radius:50%}
.relecture .relect{color:var(--laiton);border-color:var(--laiton)}
.relecture .relect i{background:var(--laiton)}
/* 8. bande finale plus courte, apparition réservée aux schémas et chiffres */
.final{padding-block:clamp(64px,7vw,88px)}
p.rv,.lede.rv{opacity:1!important;transform:none!important}
.log-head{background:var(--ink-3);color:var(--bone);border-bottom-color:var(--line-2)}
.log-head .mono{color:var(--bone-2)}
.fixed{border-color:var(--line-2)}.fixed>div+div{border-color:var(--line-2)}
.crumb{border-bottom-color:var(--line-2)}.crumb .here{color:var(--bone)}
.coords{border-bottom-color:var(--line-2)}
.pain .mono{color:var(--bone-2)}.pain:hover .mono{color:var(--carmin-c)}
/* ---- menu v2 (21/10) : intitulés courts et lisibles, panneaux avec icônes ---- */
.top .wrap{gap:20px}
.nav{gap:2px;margin-left:12px;margin-right:auto}
.nav-g>button,.nav-l{font-family:var(--f-text);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--bone);background:none;border:0;padding:10px 14px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;text-decoration:none;white-space:nowrap;border-radius:2px}
.nav-g>button::after{opacity:.6;transition:transform .18s}
.nav-g>button:hover,.nav-l:hover,.nav-g:hover>button,.nav-g.open>button{background:var(--ink-3);color:var(--bone)}
.nav-g.cur>button,.nav-l.cur{box-shadow:inset 0 -2px 0 var(--carmin-c)}
.nav-g.open>button::after,.nav-g:hover>button::after{transform:rotate(225deg) translateY(-1px)}
.nav-dd{top:calc(100% + 8px);left:-8px;min-width:340px;padding:10px;border:1px solid var(--line-2);border-top:2px solid var(--carmin);box-shadow:0 18px 40px rgba(0,0,0,.28);gap:10px}
.nav-dd::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-g.open .nav-dd{opacity:1;visibility:visible;transform:none}
.nav-dd--feat{grid-template-columns:minmax(0,1fr) 190px;min-width:560px}
.nav-its{display:grid;gap:2px}
.nav-dd .nav-its a{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:10px;font-size:15px}
.nav-dd .nav-its a b{display:block;font-weight:600;color:var(--bone)}
.nav-dd .nav-its a small{display:block;font-size:13px;line-height:1.35;color:var(--bone-2);margin-top:2px}
.nav-dd .ic{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--bone-2);transition:color .15s,border-color .15s}
.nav-dd .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.nav-dd .nav-its a:hover .ic,.nav-dd .nav-its a[aria-current="page"] .ic{color:var(--carmin-c);border-color:var(--carmin-c)}
.nav-feat{display:grid;align-content:end;gap:6px;padding:16px;background:var(--carmin);color:#fff;text-decoration:none;min-height:150px;background-image:radial-gradient(circle at 80% 20%,rgba(255,255,255,.18) 0 22px,transparent 23px),radial-gradient(circle at 80% 20%,transparent 0 40px,rgba(255,255,255,.18) 41px 42px,transparent 43px)}
.nav-feat b{font-size:16px;font-weight:600}
.nav-feat small{font-size:13px;line-height:1.35;color:rgba(255,255,255,.85)}
.nav-feat:hover{background-color:#A50D26}
@media (max-width:859px){.nav{display:none}.burger{display:grid}.mnav{display:block}}
@media (min-width:860px){.burger{display:none}.mnav{display:none!important}}
/* menu téléphone : groupes repliables, texte lisible */
.mnav .mgrp{border-bottom:1px solid var(--line-2)}
.mnav summary{list-style:none;cursor:pointer;padding:16px 0;font-family:var(--f-text);font-size:20px;font-weight:600;color:var(--bone);display:flex;justify-content:space-between;align-items:center}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.mnav details[open] summary::after{transform:rotate(225deg)}
.mnav .mgrp a{display:block;padding:10px 0 10px 14px;border:0;border-left:1px solid var(--line-2);font-family:var(--f-text);font-weight:500;text-transform:none;font-size:17px;color:var(--bone)}
.mnav .mgrp a small{display:block;font-size:13px;font-weight:400;color:var(--bone-2);margin-top:2px}
.mnav .mgrp a[aria-current="page"]{border-left:2px solid var(--carmin-c)}
.mnav .mgrp details{margin:0}
.mnav .mgrp a:last-child{margin-bottom:12px}
.mnav a.mnav-solo{display:block;padding:16px 0;border-bottom:1px solid var(--line-2);font-family:var(--f-text);font-weight:600;font-size:20px;text-transform:none;color:var(--bone)}
.mnav .mnav-cta{display:flex;justify-content:center;margin-top:28px;font-size:13px}
.nav a.nav-l{font-family:var(--f-text);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--bone)}
.nav-dd a.nav-feat,.nav-dd a.nav-feat b{color:#fff}
.nav-dd a.nav-feat small{color:rgba(255,255,255,.88)}
.mnav.open ~ .relect{display:none}
/* ---- passe 5 (21/10) : typo hiérarchisée, validée sur l'accueil ----
Capitales étroites (Big Shoulders) : titre de page .h1 et grands chiffres .big seulement.
Tout le reste en Archivo, casse normale. */
.h2,.h3,.final .h2{font-family:var(--f-text);text-transform:none;font-weight:700;letter-spacing:-.02em;line-height:1.12}
.h2{font-size:clamp(28px,2.8vw,38px)}
.h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.01em;line-height:1.2}
.h3.sys-t{font-size:clamp(28px,2.8vw,38px)}
.h2 em,.h3 em{color:var(--carmin-c)}
.final .h2{font-size:clamp(30px,3.2vw,44px);max-width:16em}
.final .h2 em{color:#1B0A0E}
main .btn,.final .btn{font-family:var(--f-text);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;padding:14px 22px}
@media (min-width:421px){.top .btn{font-family:var(--f-text);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;padding:10px 16px}}
@media (max-width:420px){.top .btn::before{font:600 13px/1 var(--f-text);letter-spacing:0}}
.pain .mono,.more,.go{font-family:var(--f-text);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
.readout h3,.person h3,.orbit-list strong{font-family:var(--f-text);text-transform:none;font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.pause-t{font-family:var(--f-text);text-transform:none;font-weight:700;letter-spacing:-.02em;line-height:1.1}
/* sections : moins de vide, fonds alternés */
.sec{padding-block:clamp(64px,7vw,88px);border-bottom:0}
.hero,.phead{border-bottom:0}
main>section.sec:not(.sec--papier):nth-of-type(even){background:var(--ink-2)}
/* deux colonnes réutilisables : titre à gauche (collant), contenu à droite */
.duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.duo>.sec-head{margin-bottom:0;grid-template-columns:minmax(0,1fr);position:sticky;top:110px}
.cle{display:grid;gap:8px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line-2);max-width:22em}
.cle .big{color:var(--carmin-c)}
.cle span:last-child{color:var(--bone-2);font-size:var(--t-s);line-height:1.5}
@media (max-width:900px){.duo{grid-template-columns:minmax(0,1fr)}.duo>.sec-head{position:static}}
/* menu v3 (21/10) : barre horizontale dès 760 px, menu téléphone compact */
@media (min-width:860px) and (max-width:1100px){
.top .wrap{gap:12px}.nav{margin-left:4px}
.nav-g>button,.nav-l,.nav a.nav-l{padding:8px 9px;font-size:14.5px}
.top .btn{font-size:0!important;padding:10px 14px!important}
.top .btn::before{content:"Démo";font:600 14px/1 var(--f-text);letter-spacing:0}
}
@media (max-width:859px){
.mnav{inset:calc(64px + env(safe-area-inset-top,0px)) 0 auto 0!important;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);
padding:8px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px))!important;
border-bottom:2px solid var(--carmin);box-shadow:0 0 0 100vmax rgba(0,0,0,.45),0 20px 40px rgba(0,0,0,.3)}
.mnav summary,.mnav a.mnav-solo{font-size:17px;padding:13px 0}
.mnav .mgrp a{font-size:15.5px;padding:8px 0 8px 14px}
.mnav .mgrp a small{display:none}
.mnav .mnav-cta{margin-top:16px}
}
.top .btn,.mnav .btn{text-transform:none;letter-spacing:0;font-family:var(--f-text);font-weight:600}.mnav .btn{font-size:15px}
/* ---- passe 6 (22/10) : affinages validés par Paul ---- */
/* 1. titres de section d'une seule couleur : le rouge reste au titre de page, aux chiffres, aux boutons */
.h2 em,.h3 em{color:inherit}
.final .h2 em{color:inherit}
/* 2. une seule taille de titre de page (intérieures), l'accueil un peu plus grand */
.h1,.h1.sm{font-size:clamp(40px,4.6vw,66px)}
.hero .h1{font-size:clamp(44px,5.6vw,84px)}
/* 4. moins d'étiquettes : l'étiquette au-dessus d'un titre de section disparaît, les libellés des panneaux grandissent */
.sec-head>.mono,.sec-head>span.mono{display:none}
.inst-head .mono,.inst .mono{font-family:var(--f-text);font-size:13px;letter-spacing:0;text-transform:none;font-weight:500}
/* 5. thème clair : alternance beige / blanc cassé plus franche */
@media (prefers-color-scheme:light){:root:not([data-tt="dark"]) main>section.sec:not(.sec--papier):nth-of-type(even){background:#FBF2F3}}
:root[data-tt="light"] main>section.sec:not(.sec--papier):nth-of-type(even){background:#FBF2F3}
/* 6. pied de page en quatre colonnes équilibrées */
.foot-grid{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr))}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid>div:first-child{grid-column:1/-1}}
/* ---- passe 7 (22/10) : couleur secondaire bleu pétrole, bandes pleine largeur ----
Rouge carmin : actions, titre de page, valeur critique. Pétrole : schémas, données, chiffres positifs. */
.big{color:var(--petrole)}
.cle .big{color:var(--petrole)}
.acc{color:var(--petrole)}
/* bande pleine largeur : une phrase ou un chiffre fort, pour casser le rythme */
.bande{position:relative;overflow:hidden;padding-block:clamp(56px,7vw,96px);color:#F7EAEC}
.bande--petrole{background:var(--petrole-f)}
.bande--rouge{background:var(--carmin)}
.bande .wrap{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;position:relative;z-index:1}
.bande-n{font-family:var(--f-display);font-weight:800;font-size:clamp(72px,11vw,160px);line-height:.85;letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.bande--petrole .bande-n{color:var(--petrole-c)}
.bande-t{font-size:clamp(22px,2.4vw,32px);line-height:1.3;font-weight:600;letter-spacing:-.01em;max-width:28em;text-wrap:balance}
.bande-s{margin-top:14px;font-size:var(--t-src);color:rgba(247,234,236,.75)}
.bande-s a{color:inherit}
.bande::before{content:"";position:absolute;right:-8vw;top:50%;width:46vw;max-width:640px;aspect-ratio:1;border-radius:50%;transform:translateY(-50%);
background:radial-gradient(circle,transparent 0 38%,rgba(255,255,255,.07) 38.3% 38.8%,transparent 39% 58%,rgba(255,255,255,.06) 58.3% 58.8%,transparent 59%);animation:bande-r 18s linear infinite}
@keyframes bande-r{to{transform:translateY(-50%) rotate(360deg)}}
.bande--centre .wrap{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}
@media (max-width:700px){.bande .wrap{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.bande::before{animation:none}}
/* cartes en grille : variante de mise en page */
.grille-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.carte-v{border:1px solid var(--line-2);background:var(--ink);padding:24px;display:grid;gap:10px;align-content:start;transition:border-color .2s,transform .2s}
.carte-v:hover{border-color:var(--petrole);transform:translateY(-3px)}
.carte-v .n{font-family:var(--f-display);font-weight:800;font-size:34px;color:var(--petrole);line-height:1}
/* phrase centrée */
.phrase{padding-block:clamp(56px,7vw,96px);text-align:center}
.phrase p{font-size:clamp(24px,2.8vw,38px);line-height:1.3;font-weight:600;letter-spacing:-.015em;max-width:24em;margin:0 auto;text-wrap:balance}
.phrase p em{font-style:normal;color:var(--petrole)}
/* apparition un peu plus vivante */
.rv{transition-duration:.7s}
/* passe 7b (22/10) : le bleu pétrole jurait avec la palette chaude → ocre (or ancien). Les noms de variables restent --petrole-*. */
:root{--petrole:#E8A1AE;--petrole-f:#3A1219;--petrole-f2:#4A1720;--petrole-f3:#56202A;--petrole-c:#F4BCC6;--petrole-t2:#E6C9CF;--petrole-t3:#C4A3A9;--petrole-d:rgba(232,161,174,.16)}
@media (prefers-color-scheme:light){:root:not([data-tt="dark"]){--petrole:#A3475A;--petrole-f:#3A1219;--petrole-d:rgba(163,71,90,.12)}}
:root[data-tt="light"]{--petrole:#A3475A;--petrole-f:#3A1219;--petrole-d:rgba(163,71,90,.12)}
.sec--papier{--petrole:#A3475A;--petrole-d:rgba(163,71,90,.12)}
@media (prefers-color-scheme:light){:root:not([data-tt="dark"]) .sec--papier{--petrole:#E8A1AE;--petrole-d:rgba(232,161,174,.16)}}
:root[data-tt="light"] .sec--papier{--petrole:#E8A1AE;--petrole-d:rgba(232,161,174,.16)}
/* passe 8 (22/10) : esthétique Orbite gardée, couleurs de la charte Twimi v1.0 (encre profonde, ivoire, rose papier, carmin) ; couleur secondaire en rose */
/* ---- essai 8 (22/10), accueil seul (body.essai8) : module avatar de la charte, un seul aplat carmin, rose papier, pilules, étiquettes lisibles ---- */
/* 5. étiquettes plus lisibles en sombre */
body.essai8{--bone-3:#AD8A91;--bone-2:#D2B4BA}
@media (prefers-color-scheme:light){:root:not([data-tt="dark"]) body.essai8{--bone-3:#96787E;--bone-2:#6B5257}}
:root[data-tt="light"] body.essai8{--bone-3:#96787E;--bone-2:#6B5257}
.essai8 .mono{letter-spacing:.14em}
/* 3. sections : alternance plus franche en sombre, une section rose papier */
.essai8 main>section.sec:not(.sec--papier):nth-of-type(even){background:#26111A}
@media (prefers-color-scheme:light){:root:not([data-tt="dark"]) .essai8 main>section.sec:not(.sec--papier):nth-of-type(even){background:#FBF2F3}}
:root[data-tt="light"] .essai8 main>section.sec:not(.sec--papier):nth-of-type(even){background:#FBF2F3}
.essai8 .sec--papier{--ink:#FBF2F3;--ink-2:#FFFFFF;--ink-3:#F5E6E9;background-color:#FBF2F3}
@media (prefers-color-scheme:light){:root:not([data-tt="dark"]) .essai8 .sec--papier{--ink:#1B0A0E;--ink-2:#12060A;--ink-3:#2E0F15;background-color:#1B0A0E}}
:root[data-tt="light"] .essai8 .sec--papier{--ink:#1B0A0E;--ink-2:#12060A;--ink-3:#2E0F15;background-color:#1B0A0E}
/* 4. pilules */
.essai8 .btn,.essai8 .q,.essai8 .burger,.essai8 .theme-t{border-radius:99px}
.essai8 main .btn,.essai8 .final .btn{padding:15px 26px}
.essai8 .q{padding:8px 15px}
.essai8 .top .btn{padding-inline:20px}
/* 1. module avatar : dégradé grenat, l'or seulement pour la parole */
.module-av{--bone:#F7EAEC;--bone-2:#C4A3A9;--bone-3:#AD8A91;--line:rgba(247,234,236,.14);--line-2:rgba(247,234,236,.28);--ink:#1B0A0E;--ink-2:#12060A;
background:linear-gradient(168deg,#3A1219,#1B0A0E)!important;border:0!important;border-radius:14px;overflow:hidden;color:var(--bone);
box-shadow:0 34px 70px -28px rgba(0,0,0,.7),0 0 0 1px rgba(247,234,236,.08)}
.module-av .tick{display:none}
.module-av .inst-head{border-bottom-color:var(--line)}
.module-av .live,.module-av .say b{color:#FFC400}
.module-av .live i{background:#FFC400;animation:pulse-or 1.8s infinite}
@keyframes pulse-or{0%{box-shadow:0 0 0 0 rgba(255,196,0,.55)}70%{box-shadow:0 0 0 10px rgba(255,196,0,0)}100%{box-shadow:0 0 0 0 rgba(255,196,0,0)}}
.module-av .face circle[fill="#C8102E"]{fill:#F7EAEC}
.module-av .face path[stroke="#C8102E"]{stroke:#FFC400}
.module-av .face{border-bottom-color:var(--line)}
.module-av .q{color:var(--bone);border-color:var(--line-2);background:transparent}
.module-av .q:hover{border-color:var(--bone)}
.module-av .q[aria-pressed="true"]{background:#F7EAEC;color:#1B0A0E;border-color:#F7EAEC}
@media (prefers-reduced-motion:reduce){.module-av .live i{animation:none}}
/* ---- passe 9 (22/10) : angles arrondis, module avatar aussi sur Avatar, moins d'étiquettes, bandes sans cercle ---- */
/* 1. cartes et panneaux à 14 px, puces et onglets en pilule, plus d'équerres */
.tick{display:none}
:is(.inst,.readout,.log,.fixed,.guards,.carte-v,.photo,.cards,.tbl-wrap,.tools,.gpi,.sv-sim,.demo-wrap,.net,.vstat,.fb,.case,.form,.signal,.reach,.ba,.baw,.fiche,.ch-t,.door,.cols2,.ro,.proof,.idcard,.kpis,.limits,.tocas,.scope,.tbl,.refuse,.docx,.tr-b,.fcard,.est,.vs,.quiz,.mt-ro,.iab-t,.freins-intro,.sv-req,.sv-task,.lvl,.pn-bar){border-radius:14px}
:is(.inst,.log,.fixed,.guards,.tbl-wrap,.tbl,.demo-wrap,.cards,.vs,.est,.cols2,.kpis){overflow:hidden}
:is(.msg,.photo span,.st,.badge,.price-line){border-radius:8px}
:is(.chip,.ig-tab,.mt-tags span,.demo-tab,.relect,.todo){border-radius:99px}
.mt-tags span{padding:3px 10px}
.carte-v.soon{border-style:dashed}
.mt-cartes .carte-v p{font-size:var(--t-s);color:var(--bone-2)}
/* 4. étiquettes au-dessus des titres retirées hors panneaux de démonstration */
main .wrap>.mono:has(+ .h2),main :is(.demo-intro,.sec-head,.mission,.duo)>.mono:has(+ .h2),main .vstrip .wrap>.mono:first-child,main .phead .coords{display:none}
/* 5. bandes : le chiffre seul, sans cercle tournant */
.bande::before{display:none}
/* ==== passe 10 (23/10) : l'identité Orbite revient par le mouvement ==== */
/* 1. logo : le ruban part du bas, fait le tour et se noue (au chargement dans l'en-tête, puis au survol) */
@property --enr{syntax:'';inherits:false;initial-value:360deg}
.logo img{transform-origin:50% 82%;-webkit-mask:conic-gradient(from 180deg,#000 var(--enr),transparent 0);mask:conic-gradient(from 180deg,#000 var(--enr),transparent 0)}
.logo:hover img,.logo:focus-visible img,.logo.noue img{animation:noue 1.35s cubic-bezier(.55,0,.25,1) both}
@keyframes noue{0%{--enr:0deg;transform:translateY(6px) scale(.92)}66%{--enr:360deg;transform:none}78%{--enr:360deg;transform:scale(1.12,.86)}89%{--enr:360deg;transform:scale(.96,1.05)}100%{--enr:360deg;transform:none}}
/* 2. en-têtes : petite orbite avant l'étiquette, satellite qui file sur le trait du fil d'Ariane */
.crumb,.hero-grid>div>.mono:first-child{position:relative;align-items:center}
.hero-grid>div>.mono:first-child{display:flex;gap:12px;align-items:center}
.crumb::before,.hero-grid>div>.mono:first-child::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;
background:radial-gradient(circle at 50% 8%,var(--carmin-c) 0 2.6px,transparent 3.2px),radial-gradient(circle,var(--carmin-c) 0 2px,transparent 2.6px),radial-gradient(circle,transparent 0 57%,var(--bone-3) 59% 62%,transparent 64%);
animation:orb-sat 3.2s linear infinite}
@keyframes orb-sat{to{transform:rotate(360deg)}}
.crumb::after{content:"";position:absolute;left:0;bottom:-3px;width:5px;height:5px;border-radius:50%;background:var(--carmin-c);box-shadow:0 0 0 3px color-mix(in srgb,var(--carmin-c) 22%,transparent);animation:orb-file 7s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes orb-file{to{left:calc(100% - 5px)}}
/* 3. titres de section : un trait carmin se dessine sous le titre */
main .sec .h2.mots::after{content:"";display:block;width:72px;height:3px;margin-top:.45em;background:var(--carmin-c);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s .45s cubic-bezier(.6,.1,.2,1)}
main .sec .h2.mots.vu::after{transform:none}
main .sec :is([style*="text-align:center"],.centre,.bande--centre) .h2.mots::after,main .sec .h2.mots[style*="center"]::after{margin-inline:auto;transform-origin:50% 50%}
/* 4. blocs en cascade : posés par site.js */
.js .rv.casc{transform:translateY(34px) scale(.985)}
.js .rv.casc.vu{transform:none}
/* 5. bandes chiffrées : l'orbite tourne de nouveau, avec son satellite */
.bande::before{display:block;background:radial-gradient(circle at 50% 11.4%,rgba(255,255,255,.85) 0 5px,transparent 6px),radial-gradient(circle,transparent 0 38%,rgba(255,255,255,.09) 38.3% 38.8%,transparent 39% 58%,rgba(255,255,255,.07) 58.3% 58.8%,transparent 59%)}
/* 6. bouton d'action : un reflet passe au survol */
.btn--go{position:relative;overflow:hidden}
.btn--go::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);transform:translateX(-130%);transition:transform .75s cubic-bezier(.3,.6,.2,1);pointer-events:none}
.btn--go:hover::after,.btn--go:focus-visible::after{transform:translateX(130%)}
/* 7. bandeau des métiers sous l'accueil */
.marquee.metiers{background:var(--ink-2);border-color:var(--line-2)}
.marquee.metiers .marquee-in{gap:40px;padding-block:16px;animation-duration:32s}
.marquee.metiers span{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.2vw,28px);text-transform:uppercase;letter-spacing:.02em;color:var(--bone);white-space:nowrap}
.marquee.metiers i{width:10px;height:10px;border-radius:50%;background:var(--carmin-c);align-self:center;flex:none}
@media (prefers-reduced-motion:reduce){.logo img,.logo:hover img,.logo.noue img{animation:none!important}.crumb::before,.crumb::after,.hero-grid>div>.mono:first-child::before{animation:none}main .sec .h2.mots::after{transform:none;transition:none}.btn--go::after{display:none}}
/* ==== passe 11 (23/10) : accueil plus vivant, signature, transitions ==== */
/* 1. trois portes sous l'accroche */
.portes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:22px}
.portes .mono{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);margin-right:4px}
.portes a{font-size:15px;font-weight:600;color:var(--bone);text-decoration:none;padding:6px 14px;border:1px solid var(--line-2);border-radius:99px;transition:border-color .2s,color .2s,background .2s}
.portes a:hover,.portes a:focus-visible{border-color:var(--carmin-c);color:var(--carmin-c)}
/* 2. avatar : regard et bouche */
#av-yeux{transition:transform .25s ease-out;transform-box:view-box}
.module-av .oeil{animation:cligne 5.5s infinite;transform-box:fill-box;transform-origin:center}
@keyframes cligne{0%,94%,100%{transform:none}96%{transform:scaleY(.1)}}
#av-bouche{transform-box:fill-box;transform-origin:50% 0}
.parle #av-bouche{animation:bouche .22s ease-in-out infinite alternate}
@keyframes bouche{from{transform:scaleY(.4)}to{transform:scaleY(2.1)}}
/* 4. signature du pied de page : le mot en grand, le ruban se noue à l'arrivée */
.signe{display:flex;align-items:center;gap:clamp(8px,1vw,14px);margin-top:40px;overflow:hidden;user-select:none}
.signe img{width:clamp(36px,6.5vw,95px);height:auto;flex:none}
.signe span{font-family:var(--f-display);font-weight:800;font-size:clamp(48px,10.5vw,165px);line-height:.78;letter-spacing:-.01em;text-transform:lowercase;color:var(--bone);transform:translateY(40%);opacity:0;transition:transform 1s cubic-bezier(.2,.7,.1,1) .25s,opacity .8s .25s}
.signe.vu span{transform:none;opacity:1}
.signe img{-webkit-mask:conic-gradient(from 180deg,#000 var(--enr),transparent 0);mask:conic-gradient(from 180deg,#000 var(--enr),transparent 0);transform-origin:50% 82%}
.js .signe:not(.vu) img{--enr:0deg}
.signe.vu img{animation:noue 1.6s cubic-bezier(.55,0,.25,1) both}
/* 5. passage d'une page à l'autre : un rideau carmin avec le ruban */
.rideau{position:fixed;inset:0;z-index:200;background:var(--carmin);display:grid;place-items:center;pointer-events:none;transform:scaleY(0);transform-origin:50% 100%}
.rideau img{width:72px;height:auto;filter:brightness(0) invert(1);opacity:0;transition:opacity .2s}
.rideau.entre{transform:scaleY(1);transition:transform .38s cubic-bezier(.7,0,.3,1)}
.rideau.entre img{opacity:1;transition-delay:.2s}
.rideau.couvre{transform:scaleY(1);transform-origin:50% 0}
.rideau.couvre img{opacity:1}
.rideau.sort{transform:scaleY(0);transform-origin:50% 0;transition:transform .5s cubic-bezier(.7,0,.3,1) .05s}
@media (prefers-reduced-motion:reduce){.rideau{display:none}.signe span{transform:none;opacity:1;transition:none}.signe img,.signe.vu img{animation:none;--enr:360deg}.module-av .oeil,.parle #av-bouche{animation:none}}
.np-card{scroll-margin-top:110px}
/* accueil : usages de l'avatar (texte d'Eric, 24/10), dans le style des pastilles */
.usages{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.usages li{font-size:15px;font-weight:600;color:var(--bone);padding:6px 14px;border:1px solid var(--line-2);border-radius:99px}
/* accueil : tête maillée de l'ancien site (tete.js) */
.tete-box{position:relative;aspect-ratio:5/4;max-width:100%;background:linear-gradient(168deg,#3A1219 0%,#1B0A0E 74%);border-bottom:1px solid var(--line);overflow:hidden}
#face{position:absolute;inset:0;width:100%;height:100%;display:block}
.tete-box .viz{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;align-items:flex-end;gap:3px;height:26px}
.tete-box .viz i{display:block;width:3px;border-radius:2px;background:#FFC400;height:4px}
.tete-box .tete-l,.tete-box .tete-r{position:absolute;top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}
.tete-box .tete-l{left:16px}.tete-box .tete-r{right:16px}
@media (max-width:420px){.tete-box .tete-r{display:none}}
/* accueil : quatre chiffres qui plaident pour un avatar */
.pourquoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pq{display:grid;grid-template-rows:auto 1fr auto auto;gap:14px;padding:26px 22px;border:1px solid var(--line-2);border-radius:14px;background:var(--ink-2);min-width:0}
.pq-n{font-family:var(--f-display);font-weight:800;font-size:clamp(64px,6.4vw,96px);line-height:.85;color:var(--carmin-c);font-variant-numeric:tabular-nums}
.pq-n small{font-size:.5em;margin-left:2px}
.pq-f{margin:0;font-size:16px;line-height:1.5;color:var(--bone)}
.pq-r{margin:0;padding-top:14px;border-top:1px solid var(--line-2);font-size:15px;line-height:1.5;color:var(--bone-2)}
.pq-r .mono{display:block;margin-bottom:4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--carmin-c)}
.pq-s{margin:0;font-size:12px;color:var(--bone-3)}
.pq-s a{color:inherit}
@media (max-width:1100px){.pourquoi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pourquoi{grid-template-columns:minmax(0,1fr)}}
/* passe 12 (03/11) : cartes chiffres alignées ligne à ligne */
@supports (grid-template-rows:subgrid){
.pourquoi{grid-auto-rows:auto}
.pq{grid-row:span 4;grid-template-rows:subgrid;row-gap:14px}
}
.nav-rdv{white-space:nowrap}
.seo-l{margin-top:12px;font-size:15px;color:var(--bone-2);max-width:34em}
#c-egoiste.case--lead{grid-template-columns:minmax(0,1fr)}
.fr-l{margin-top:14px;font-weight:600;color:var(--bone)}
.stars{font-size:22px;letter-spacing:2px;color:var(--carmin-c);white-space:nowrap}
.stars i{font-style:normal;color:var(--line-2)}
.fcard{position:relative}.fcard .pop{position:absolute;top:-12px;left:22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--carmin);padding:4px 10px;border-radius:999px}
.opt{margin-top:18px;font-size:var(--t-s);color:var(--bone-2)}
.gg-k{display:block;margin-bottom:12px;color:var(--carmin-c)}
@media (max-width:1079px){.nav-rdv{display:none}}
.phrase .phrase-s{margin:16px auto 0;max-width:40em;font-family:var(--f-text);font-size:var(--t-m);font-weight:400;line-height:1.5;color:var(--bone-2);text-transform:none;letter-spacing:0}
#c-cahe{grid-column:1/-1}
/* bascule de langue FR / EN */
.lang-s{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;flex:none;border:1px solid var(--line-2);color:var(--bone);text-decoration:none;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em}
.lang-s:hover{border-color:var(--carmin-c);color:var(--carmin-c)}
@media (max-width:1100px){.lang-s{width:38px;height:38px}}
@media (max-width:420px){html[lang="en"] .top .btn::before{content:"Demo"}}
@media (min-width:860px) and (max-width:1100px){html[lang="en"] .top .btn::before{content:"Demo"}}
/* ── corrections responsive (03/11) ─────────────────────────────────────────
En-tête entre 320 et 600 px : logo, bouton, EN, thème et menu ne tenaient pas sur une ligne
et le bouton « Démo » était écrasé (texte coupé). Les boutons ne rétrécissent plus ; sous 600 px
le bouton affiche « Démo » et les espacements se resserrent ; sous 360 px le bouton de thème
disparaît (le site suit alors le réglage clair/sombre du téléphone). */
.top .btn,.top .burger,.top .lang-s,.top .theme-t{flex-shrink:0}
@media (max-width:600px){
.top .wrap{gap:8px}
.top .btn{font-size:0!important;padding:10px 14px!important}
.top .btn::before{content:"Démo";font:600 14px/1 var(--f-text);letter-spacing:0}
html[lang="en"] .top .btn::before{content:"Demo"}
}
@media (max-width:359px){.top .theme-t{display:none}}
/* ── forme « latérale » du widget d'Antoine (10/11) ───────────────────────────
Ouvert, le widget pose html.twap-lateral.twap-ouvert, la largeur du panneau dans --twap-l (340 à 520 px, 380 par
défaut) et la marge correspondante sur (twap-gauche si le panneau est à gauche). Les media queries regardent
la fenêtre, pas la place restante, et ne lisent pas les variables : paliers prévus pour tout panneau de 340 à 520 px. */
/* place restante 860–1 200 px environ (l'en-tête complet en demande 1 200) : en-tête serré, règles du menu 860–1100 */
@media (min-width:1380px) and (max-width:1719px){
html.twap-lateral.twap-ouvert .top .wrap{gap:12px}
html.twap-lateral.twap-ouvert .nav{margin-left:4px}
html.twap-lateral.twap-ouvert .nav-g>button,html.twap-lateral.twap-ouvert .nav-l,html.twap-lateral.twap-ouvert .nav a.nav-l{padding:8px 9px;font-size:14.5px}
html.twap-lateral.twap-ouvert .nav-rdv{display:none}
html.twap-lateral.twap-ouvert .lang-s{width:38px;height:38px}
html.twap-lateral.twap-ouvert .top .btn{font-size:0!important;padding:10px 14px!important}
html.twap-lateral.twap-ouvert .top .btn::before{content:"Démo";font:600 14px/1 var(--f-text);letter-spacing:0}
html.twap-lateral.twap-ouvert[lang="en"] .top .btn::before{content:"Demo"}
}
/* place restante trop courte : menu burger, ouvert à côté du panneau */
@media (min-width:860px) and (max-width:1379px){
html.twap-lateral.twap-ouvert .nav{display:none}
html.twap-lateral.twap-ouvert .burger{display:grid}
html.twap-lateral.twap-ouvert .top .btn{margin-left:auto}
html.twap-lateral.twap-ouvert .mnav{display:block!important;position:fixed;top:calc(64px + env(safe-area-inset-top,0px));bottom:auto;left:0;right:var(--twap-l,400px);
max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow:auto;background:var(--ink);z-index:19;padding:8px 16px 20px;
border-bottom:2px solid var(--carmin);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
html.twap-lateral.twap-ouvert.twap-gauche .mnav{left:var(--twap-l,400px);right:0}
html.twap-lateral.twap-ouvert .mnav.open{opacity:1;visibility:visible;transform:none}
}
/* ── grands écrans (10/11) : le contenu s'élargit au-delà de 1 600 px de fenêtre ──
Les paragraphes gardent leur longueur de ligne (max-width en em) ; seules les grilles et les colonnes gagnent de la place. */
@media (min-width:1600px){:root{--max:1400px}}
@media (min-width:1900px){:root{--max:1520px}}