/* ==========================================================================
BEELEVEN — global.css v2 (refonte 2026, direction « B8 »)
Toutes les pages chargent : /fonts/fonts.css, /styles/global.css, /scripts/site.js (defer).
Exemples vivants de chaque composant : /design/composants.html
Squelette d'une page intérieure : /design/gabarit-page.html
RÈGLES DE LA DIRECTION (ne pas réintroduire) :
- pas de petites étiquettes en majuscules espacées au-dessus des titres ;
- pas de grilles de cases / cartes à fond ; des filets fins et du vide ;
- pas d'italique doré sur un mot du titre : le mot-clé s'allume au surligneur (.kw) ;
- titres en Clash Display (var(--disp)), texte en Satoshi (var(--txt)) ; Lora = logo uniquement.
SOMMAIRE DES CLASSES
Mise en page ....... .in (conteneur + gouttières) .sec (section, grand padding) .sec.tight
.rule (filet) .cols (2 colonnes texte/contenu) .stack (pile espacée)
En-tête ............ nav#nav .nav-logo .nlinks .nl (.act = page courante) .ndd/.ndd-m (menu Services)
.ncta (bouton de l'en-tête) .mtog + .mmenu .mm-big .mm-small (JS : site.js)
Héros intérieur .... .phero .crumb (fil d'Ariane, casse normale) .big (titre géant) .lead
Titres ............. .big (h1 accueil) .h-xl .h-l .h-m .h-s Texte : .lead .dim .cap .or
Animations ......... .split (titre révélé mot à mot) .rv (bloc qui monte) .fade (JS ajoute .v)
.kw (surligneur or ; .kw.io = s'allume à l'apparition) .rot (mot qui défile)
Chiffres ........... .num[data-count][data-dec][data-suf] (compteur, largeur réservée) .num.out (contour)
.band3 > .stat > .num + .sd (bande de 3 chiffres)
Listes ............. .rc (lignes à filets : h3 à gauche, texte à droite) .posts > a.post (liste de liens)
.olist > .orow (offres : nom, rôle, prix, lien) .faq > details > summary
Boutons ............ = action principale (pilule or)
= petite pilule (en-tête, prix)
= lien secondaire (souligné or au survol)
= grand lien affiche
Balisage obligatoire : Libellé
Alias acceptés : .btn-a / .btn-c sur l'élément à la place de data-bs.
Formulaires ........ form.cf > .fl (label + champ) .fl.full .consent .opts (options cochables) .f-msg (retour d'envoi)
.dmw#demande > .dm-h + form.dm[data-lead] (demande d'audit / stratégie / accompagnement / devis)
envoi : form[data-lead] → API de leads de Detekia (site.js)
form.dk (champ Detekia : input + bouton .more)
Texte long ......... .prose (articles, mentions légales : h2, h3, listes, citations, tableaux, code)
Pied de page ....... footer .ft-big (grand lien) .ft .ft-brand .ft-col .ft-h .ft-quiet
Divers ............. .grain (bruit fixe) .sr-only .skip-link .dv (devise lettre à lettre)
========================================================================== */
/* ---------- Jetons ---------- */
/* ---------- Polices (copie des déclarations Clash Display et Satoshi de /fonts/fonts.css) ----------
Mêmes fichiers, mêmes URL : le doublon ne télécharge rien de plus. Une page qui n'utilise ni Lora ni DM Sans
peut se passer du vers /fonts/fonts.css (une feuille bloquante de moins). Licence : voir fonts.css. */
@font-face{font-family:'Clash Display';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/clash-display-500.woff2') format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/clash-display-600.woff2') format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/clash-display-700.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/satoshi-400.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/satoshi-500.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/satoshi-700.woff2') format('woff2')}
:root{
--noir:#0A0A0A;--nuit:#1A1A1A;--or:#C9A84C;--or-l:#E8C97A;--iv:#F0ECE0;--gr:#a8a8a8;--gr-l:#a3a3a3;
--line:rgba(240,236,224,.12);
--g:clamp(20px,8vw,150px); /* gouttière latérale */
--sec:clamp(96px,16vh,190px); /* respiration verticale d'une section */
--disp:'Clash Display','Helvetica Neue',Arial,sans-serif;
--txt:'Satoshi','Helvetica Neue',Arial,sans-serif;
--ease:cubic-bezier(.2,.8,.2,1);--ease-io:cubic-bezier(.7,0,.2,1);
}
/* ---------- Base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--txt);font-size:16px;line-height:1.55;background:var(--noir);color:var(--iv);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%}
::selection{background:var(--or);color:var(--noir)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:absolute;top:-60px;left:12px;z-index:9999;background:var(--or);color:var(--noir);padding:10px 16px;font-weight:500}
.skip-link:focus{top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--or);outline-offset:3px}
/* Tout autre élément focalisable (zones défilantes, régions à tabindex…) : même anneau or */
:where([tabindex]:not([tabindex="-1"]),[contenteditable]):focus-visible{outline:2px solid var(--or);outline-offset:3px}
@view-transition{navigation:auto}
/* ---------- Mise en page ---------- */
.in{width:100%;padding-left:var(--g);padding-right:var(--g);max-width:1760px;margin:0 auto}
.sec{padding:var(--sec) 0;position:relative}
.sec.tight{padding:clamp(64px,10vh,120px) 0}
.sec+.sec.flush{padding-top:0}
.rule{border:0;border-top:1px solid var(--line)}
.stack>*+*{margin-top:clamp(18px,2.4vh,28px)}
.cols{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;gap:clamp(32px,6vw,110px);align-items:start}
/* ---------- Grain ---------- */
.grain{position:fixed;inset:-50%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px 256px;opacity:.035;pointer-events:none;z-index:8000;animation:gs 8s steps(10) infinite}
@keyframes gs{0%{transform:translate(0,0)}25%{transform:translate(-2%,-1%)}50%{transform:translate(1%,2%)}75%{transform:translate(-1%,1%)}100%{transform:translate(2%,-2%)}}
/* ---------- En-tête : transparent en haut, voilé au défilement, masqué en descendant (desktop) ---------- */
nav#nav{position:fixed;top:0;left:0;right:0;z-index:9000;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:18px var(--g);border-bottom:1px solid transparent;transition:background .4s,border-color .4s,padding .4s,transform .5s var(--ease)}
nav#nav.scrolled{background:rgba(10,10,10,.72);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--line);padding-top:11px;padding-bottom:11px}
nav#nav.hid{transform:translateY(calc(-100% - 2px))}
nav#nav.hid:focus-within{transform:none}
.nav-logo{display:block;line-height:0;flex:none}
.nlinks{display:flex;align-items:center;gap:34px}
.nl{position:relative;font-family:var(--txt);font-size:15px;font-weight:500;color:rgba(240,236,224,.76);padding:6px 0;background:none;border:0;cursor:pointer;transition:color .3s}
.nl::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--or);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-io)}
.nl:hover,.nl.act,.ndd:hover>.nl,.ndd:focus-within>.nl{color:var(--iv)}
.nl:hover::after,.nl.act::after,.ndd:hover>.nl::after,.ndd:focus-within>.nl::after{transform:scaleX(1);transform-origin:left}
.nl.act{color:var(--or-l)}
.ndd{position:relative}
.ndd>.nl{display:inline-flex;align-items:center;gap:7px}
.ndd>.nl svg{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s}
.ndd:hover>.nl svg,.ndd:focus-within>.nl svg,.ndd.open>.nl svg{transform:rotate(180deg)}
.ndd-m{position:absolute;top:calc(100% + 16px);left:-22px;min-width:252px;padding:12px 22px 14px;display:flex;flex-direction:column;background:rgba(10,10,10,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-left:1px solid var(--or);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s,transform .45s var(--ease),visibility .3s}
.ndd-m::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.ndd:hover .ndd-m,.ndd:focus-within .ndd-m,.ndd.open .ndd-m{opacity:1;visibility:visible;transform:none}
.ndd-m a{font-size:15px;color:rgba(240,236,224,.74);padding:7px 0;transition:color .25s,padding .35s var(--ease)}
.ndd-m a:hover,.ndd-m a:focus-visible,.ndd-m a.act{color:var(--or-l);padding-left:6px}
.ndd-m a:first-child{font-size:13px;color:var(--gr);padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.nlinks .ncta{margin-left:4px}
.mtog{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;flex-direction:column;align-items:flex-end;justify-content:center;gap:7px;position:relative;z-index:9002}
.mtog i{display:block;height:1.5px;background:var(--iv);transition:transform .45s var(--ease-io),width .35s}
.mtog i:nth-child(1){width:26px}.mtog i:nth-child(2){width:16px}
.mtog.open i:nth-child(1){transform:translateY(4.25px) rotate(45deg);width:24px}
.mtog.open i:nth-child(2){transform:translateY(-4.25px) rotate(-45deg);width:24px}
.mmenu{position:fixed;inset:0;z-index:8990;background:var(--noir);display:flex;flex-direction:column;justify-content:flex-end;padding:110px var(--g) 40px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.mmenu.open{opacity:1;visibility:visible}
.mm-big a{display:block;width:max-content;font-family:var(--disp);font-weight:600;font-size:clamp(46px,14vw,84px);line-height:1.04;letter-spacing:-.03em;padding:2px 0}
.mm-small{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.mm-small a{font-size:15px;color:var(--gr)}
.mmenu>.more{margin-top:30px;align-self:flex-start}
.mm-big a,.mm-small,.mmenu>.more{opacity:0;transform:translateY(26px);transition:opacity .45s,transform .65s var(--ease)}
.mmenu.open .mm-big a,.mmenu.open .mm-small,.mmenu.open>.more{opacity:1;transform:none;transition-delay:calc(var(--i) * 70ms + 90ms)}
/* ---------- Typographie ---------- */
.big{font-family:var(--disp);font-weight:600;font-size:clamp(44px,7.3vw,138px);line-height:.95;letter-spacing:-.028em}
.h-xl{font-family:var(--disp);font-weight:600;font-size:clamp(40px,6.6vw,124px);line-height:.98;letter-spacing:-.028em}
.h-l{font-family:var(--disp);font-weight:600;font-size:clamp(32px,4.3vw,76px);line-height:1;letter-spacing:-.022em}
.h-m{font-family:var(--disp);font-weight:600;font-size:clamp(26px,2.6vw,44px);line-height:1.04;letter-spacing:-.02em}
.h-s{font-family:var(--disp);font-weight:500;font-size:clamp(20px,1.6vw,26px);line-height:1.15;letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:rgba(240,236,224,.82);max-width:46ch}
.dim{color:var(--gr)}
.or{color:var(--or-l)}
.cap{font-size:13px;color:#8d8d8d;line-height:1.5}
.cap a{text-decoration:underline;text-underline-offset:3px}
p+p.lead,.lead+.lead{margin-top:18px}
/* ---------- Héros intérieur (pages hors accueil) ---------- */
.phero{padding:clamp(140px,22vh,220px) 0 clamp(56px,9vh,100px);position:relative}
.phero .big,.phero .h-xl{max-width:16ch}
.phero .lead{margin-top:clamp(24px,4vh,40px)}
.phero .acts{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:clamp(32px,5vh,52px)}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--gr);margin-bottom:clamp(20px,3vh,32px)}
.crumb a{color:var(--gr);transition:color .3s;padding:2px 0}
.crumb a:hover{color:var(--iv)}
.crumb span[aria-hidden]{color:#555}
/* ---------- Révélations ---------- */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .w>span{display:inline-block;transform:translateY(108%);transition:transform .95s var(--ease);transition-delay:calc(var(--i) * 55ms)}
.split.v .w>span{transform:none}
.split.quick .w>span{transition-duration:.45s;transition-delay:calc(var(--i) * 18ms)}
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.v{opacity:1;transform:none}
.fade{opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s var(--ease)}
.fade.v{opacity:1;transform:none}
.no-js .split .w>span,.no-js .rv,.no-js .fade{transform:none;opacity:1}
/* Héros des pages intérieures : le chapeau (.fade) est visible dès le premier affichage (élément LCP) ;
seul le léger glissement reste animé. */
.phero .fade{opacity:1}
/* ---------- Surligneur or : le mot-clé s'allume ---------- */
.kw{background:linear-gradient(var(--or),var(--or)) no-repeat 0 55%/0% 88%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .07em;margin:0 -.07em;transition:background-size .9s var(--ease-io),color .45s .3s}
.kw.on{background-size:100% 88%;color:var(--noir)}
/* ---------- Mot qui défile (masque : l'ancien sort par le haut, le suivant entre par le bas) ---------- */
.rot{display:inline-grid;vertical-align:top;overflow:hidden;color:var(--or);padding-bottom:.12em;margin-bottom:-.12em}
.rot>span{grid-area:1/1;opacity:0;transform:translateY(105%);transition:transform .7s var(--ease-io)}
.rot>span.on{opacity:1;transform:none}
.rot>span.out{opacity:1;transform:translateY(-105%)}
.rot>span.snap{transition:none!important}
/* ---------- Boutons ---------- */
.cta,.more{position:relative;display:inline-flex;align-items:center;gap:12px;font-family:var(--txt);font-weight:500;text-transform:none;letter-spacing:0;border:0;background:none;color:inherit;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;isolation:isolate}
.cta .bt,.more .bt{position:relative;z-index:1}
.ba{position:relative;z-index:1;display:inline-flex;align-items:center;flex:none}
.ba i{display:block;height:1.5px;width:12px;background:currentColor;border-radius:1px;transition:width .45s var(--ease)}
.ba svg{width:7px;height:12px;margin-left:-6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cta:focus-visible,.more:focus-visible{outline:2px solid var(--or-l);outline-offset:4px}
.cta:disabled,.more:disabled{cursor:default}
/* A — pilule or (actions principales) */
.cta:is([data-bs="a"],.btn-a){font-size:16px;color:var(--noir);background:var(--or);border-radius:999px;padding:10px 10px 10px 30px;min-height:58px;gap:20px;transition:background .3s,box-shadow .4s,translate .5s var(--ease)}
.cta:is([data-bs="a"],.btn-a) .ba{width:38px;height:38px;border-radius:50%;background:var(--iv);color:var(--noir);justify-content:center;overflow:hidden;transition:transform .5s var(--ease)}
.cta:is([data-bs="a"],.btn-a):hover{background:var(--or-l);box-shadow:0 14px 44px -10px rgba(201,168,76,.55)}
.cta:is([data-bs="a"],.btn-a):hover .ba{transform:rotate(-45deg)}
.cta:is([data-bs="a"],.btn-a):active{box-shadow:none}
.cta:is([data-bs="a"],.btn-a).sent{background:#4a8c5c;color:var(--iv)}
.cta:is([data-bs="a"],.btn-a).sent .ba{background:var(--iv);color:#4a8c5c}
.cta:is([data-bs="a"],.btn-a).err{background:#8c4a4a;color:var(--iv)}
.more:is([data-bs="a"],.btn-a){font-size:15px;color:var(--iv);min-height:44px;padding:4px 4px 4px 18px;gap:12px;border-radius:999px;border:1px solid rgba(240,236,224,.18);transition:border-color .3s,background .3s}
.more:is([data-bs="a"],.btn-a) .ba{width:30px;height:30px;border-radius:50%;background:var(--or);color:var(--noir);justify-content:center;transition:transform .45s var(--ease)}
.more:is([data-bs="a"],.btn-a) .ba i{width:9px}
.more:is([data-bs="a"],.btn-a):hover{border-color:rgba(201,168,76,.6);background:rgba(201,168,76,.06)}
.more:is([data-bs="a"],.btn-a):hover .ba{transform:rotate(-45deg)}
/* C — lien affiche (secondaire) */
.cta:is([data-bs="c"],.btn-c){font-family:var(--disp);font-weight:600;font-size:clamp(22px,2vw,28px);letter-spacing:-.01em;color:var(--iv);padding:10px 0 14px;min-height:58px;gap:18px}
.cta:is([data-bs="c"],.btn-c)::before{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;background:rgba(240,236,224,.22)}
.cta:is([data-bs="c"],.btn-c)::after,.more:is([data-bs="c"],.btn-c)::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-io)}
.cta:is([data-bs="c"],.btn-c) .ba{color:var(--or)}
.cta:is([data-bs="c"],.btn-c) .ba i{width:34px;height:2px}
.cta:is([data-bs="c"],.btn-c) .ba svg{width:10px;height:18px;margin-left:-9px;stroke-width:2}
.cta:is([data-bs="c"],.btn-c):is(:hover,:focus-visible)::after,.more:is([data-bs="c"],.btn-c):is(:hover,:focus-visible)::after{transform:scaleX(1)}
.cta:is([data-bs="c"],.btn-c):hover .ba i{width:58px}
.more:is([data-bs="c"],.btn-c){font-size:15px;color:var(--or-l);min-height:44px;padding:0 0 2px;gap:10px}
.more:is([data-bs="c"],.btn-c)::after{bottom:9px;height:1px;background:var(--or-l)}
.more:is([data-bs="c"],.btn-c) .ba i{width:14px;height:1px}
.more:is([data-bs="c"],.btn-c):hover .ba i{width:26px}
/* ---------- Chiffres ---------- */
.num{display:inline-block;font-variant-numeric:tabular-nums;word-spacing:.12em;font-family:var(--disp);font-weight:700;font-size:clamp(64px,8vw,128px);line-height:.8;letter-spacing:-.045em;white-space:nowrap}
.num.out{color:transparent;-webkit-text-stroke:1.5px var(--or)}
.sd{max-width:32ch;font-size:clamp(15px,1.15vw,18px);line-height:1.5}
.sd .cap{margin-top:12px}
/* Bande de 3 chiffres : trois colonnes séparées par des filets verticaux */
.band3{display:grid;grid-template-columns:repeat(3,1fr)}
.band3 .stat{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:4px clamp(20px,2.6vw,44px) 0}
.band3 .stat:first-child{padding-left:0}
.band3 .stat:last-child{padding-right:0}
.band3 .stat+.stat{border-left:1px solid var(--line)}
/* ---------- Listes ---------- */
/* .rc : lignes à filets (titre à gauche, texte à droite) */
.rc{list-style:none;margin-top:clamp(40px,7vh,80px);border-top:1px solid var(--line)}
.rc li{display:grid;grid-template-columns:minmax(240px,.9fr) 1.1fr;gap:clamp(24px,5vw,90px);align-items:baseline;padding:clamp(26px,4vh,44px) 0;border-bottom:1px solid var(--line)}
.rc h3{font-family:var(--disp);font-weight:600;font-size:clamp(26px,2.6vw,44px);line-height:1.02;letter-spacing:-.02em}
.rc p,.rc li>div{font-size:clamp(16px,1.2vw,19px);line-height:1.55;color:rgba(240,236,224,.78);max-width:52ch}
.rc li>div p+p{margin-top:12px}
.rc .n{font-family:var(--disp);font-weight:500;color:var(--or);margin-right:.5em}
/* .posts : liste de liens (articles) */
.posts{margin-top:clamp(40px,6vh,70px);border-bottom:1px solid var(--line)}
.post{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:30px 0;border-top:1px solid var(--line);font-family:var(--disp);font-weight:500;font-size:clamp(22px,2.5vw,42px);line-height:1.12;letter-spacing:-.015em;transition:padding .45s var(--ease),color .3s}
.post small{display:block;font-family:var(--txt);font-weight:400;font-size:14px;letter-spacing:0;color:var(--gr);margin-top:10px;line-height:1.5}
.post i{font-style:normal;color:var(--or);transition:transform .4s;flex:none}
.post:hover{padding-left:22px;color:var(--or-l)}
.post:hover i{transform:translateX(8px)}
/* .olist : offres (nom, rôle, description, prix, lien) */
.olist{border-top:1px solid var(--line);margin-top:clamp(40px,6vh,70px)}
.orow{display:grid;grid-template-columns:minmax(220px,.9fr) 1.2fr auto;gap:clamp(20px,4vw,70px);align-items:baseline;padding:clamp(28px,4.5vh,48px) 0;border-bottom:1px solid var(--line)}
.orow h3{font-family:var(--disp);font-weight:600;font-size:clamp(26px,2.6vw,44px);line-height:1.02;letter-spacing:-.02em}
.orow .role{font-size:clamp(17px,1.3vw,20px);color:var(--or-l);margin-bottom:10px}
.orow p{color:rgba(240,236,224,.78);max-width:52ch}
.orow .price{font-family:var(--disp);font-weight:500;font-size:22px;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
/* .faq : questions dépliables */
.faq{border-top:1px solid var(--line);margin-top:clamp(40px,6vh,70px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:26px 0;font-family:var(--disp);font-weight:500;font-size:clamp(20px,1.8vw,28px);line-height:1.2;letter-spacing:-.01em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--txt);font-weight:400;color:var(--or);font-size:1.2em;line-height:1;transition:transform .4s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--or-l)}
.faq details>div{padding:0 0 28px;max-width:70ch;color:rgba(240,236,224,.8);font-size:17px;line-height:1.65}
.faq details>div p+p{margin-top:12px}
/* ---------- Devise lettre à lettre ---------- */
.dv{font-family:var(--disp);font-weight:700;font-size:clamp(64px,15vw,280px);line-height:.86;letter-spacing:-.05em}
.dv p:nth-child(2){padding-left:17vw}
.dv p:nth-child(3){text-align:right}
.dv .c{display:inline-block;opacity:.08;transform:translateY(18%);transition:opacity .35s,transform .5s var(--ease)}
.dv .c.on{opacity:1;transform:none}
.dv .c.dot{color:var(--or)}
/* ---------- Formulaires ----------
Tous les formulaires sont posés dans un cadre fin or et leurs champs sont « en boîte » pour être vus.
.cf : contact de l'accueil (data-lead="contact")
.dm : formulaire « demande » des pages Audit / Stratégie / Accompagnement / devis (data-lead="audit|strategie|accompagnement|devis")
.opts : options de l'audit cochables (fieldset sans cadre, filets) .f-msg : message de retour sous le bouton (site.js)
.dk : champ Detekia (URL + bouton) */
.cf,.dm{background:var(--nuit);border:1px solid rgba(201,168,76,.25);border-radius:24px;padding:clamp(22px,3.2vw,44px)}
.cf{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px;margin-top:clamp(48px,8vh,90px);max-width:980px}
.fl{display:flex;flex-direction:column;gap:8px;min-width:0}
.fl.full{grid-column:1/-1}
.fl label{font-size:15px;font-weight:500;color:var(--iv)}
.fl label .opt{font-weight:400;color:var(--gr)}
.fl input,.fl textarea,.fl select{font:inherit;font-size:16px;color:var(--iv);background:#232323;border:1px solid rgba(240,236,224,.22);border-radius:14px;padding:14px 16px;outline:none;resize:vertical;width:100%;transition:border-color .25s,box-shadow .25s,background .25s}
.fl textarea{min-height:108px;line-height:1.5}
.fl select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23C9A84C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.fl select option{background:var(--nuit);color:var(--iv)}
.fl input:hover,.fl textarea:hover,.fl select:hover{border-color:rgba(240,236,224,.38)}
.fl input:focus,.fl textarea:focus,.fl select:focus,.fl input:focus-visible,.fl textarea:focus-visible,.fl select:focus-visible{outline:none;border-color:var(--or);background:#262626;box-shadow:0 0 0 1px var(--or),0 0 0 6px rgba(201,168,76,.14)}
.fl input::placeholder,.fl textarea::placeholder{color:#9a9a9a}
.consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:14px;color:rgba(240,236,224,.72);line-height:1.6;cursor:pointer}
.consent input{accent-color:var(--or);margin-top:3px;width:18px;height:18px;flex:none}
.consent a{color:var(--or-l);text-decoration:underline;text-underline-offset:3px}
.cf .cta,.dm .cta{grid-column:1/-1;justify-self:start;margin-top:6px}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.opts{grid-column:1/-1;border:0;margin:0;padding:0;min-width:0}
.opts legend{font-size:15px;font-weight:500;color:var(--iv);padding:0;margin-bottom:10px}
.opts legend .opt{color:var(--gr);font-weight:400}
.opts .consent{padding:12px 0;border-top:1px solid var(--line)}
.opts .consent:last-child{border-bottom:1px solid var(--line)}
.opts .consent b{color:var(--iv);font-weight:500}
.f-msg{grid-column:1/-1;flex-basis:100%;font-size:14px;line-height:1.6;color:#e0a3a3;margin:0}
.f-book{grid-column:1/-1;margin:0;font-size:14px;line-height:1.6;color:var(--gr-l)}
.f-book a{color:var(--or);text-decoration:underline;text-underline-offset:3px}
.f-msg:empty{display:none}
.f-msg.ok{color:var(--or-l)}
.f-msg a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Formulaire « demande » */
.dmw{scroll-margin-top:110px;margin-top:clamp(40px,7vh,72px);max-width:980px}
.dm-h{font-family:var(--disp);font-weight:600;font-size:clamp(26px,2.6vw,40px);line-height:1.08;letter-spacing:-.02em;margin-bottom:clamp(18px,2.6vh,26px)}
.dm-h .kw{padding:0 .12em}
.dm{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px}
.dmw.closed{display:none}
/* Champ Detekia : URL + bouton */
.dk-l{display:block;font-size:15px;font-weight:500;color:var(--or-l);margin-top:18px}
.dk{display:flex;align-items:center;gap:12px;margin-top:10px;background:#232323;border:1px solid rgba(240,236,224,.22);border-radius:999px;padding:6px 6px 6px 22px;transition:border-color .25s,box-shadow .25s}
.dk:focus-within{border-color:var(--or);box-shadow:0 0 0 1px var(--or),0 0 0 6px rgba(201,168,76,.14)}
.dk input{flex:1;min-width:0;background:none;border:0;color:var(--iv);font:inherit;font-size:16px;padding:10px 0;outline:none}
.dk input:focus-visible{outline:none}
.dk input::placeholder{color:#9a9a9a}
.dk .more{white-space:nowrap}
/* ---------- Texte long (articles de blog, pages légales) ---------- */
.prose{max-width:72ch;font-size:clamp(17px,1.2vw,19px);line-height:1.72;color:rgba(240,236,224,.86)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-family:var(--disp);font-weight:600;font-size:clamp(28px,2.8vw,44px);line-height:1.06;letter-spacing:-.02em;color:var(--iv);margin-top:2.2em}
.prose h3{font-family:var(--disp);font-weight:500;font-size:clamp(21px,1.8vw,27px);line-height:1.2;letter-spacing:-.01em;color:var(--iv);margin-top:1.8em}
.prose h2+*,.prose h3+*{margin-top:.8em}
.prose strong{color:var(--iv);font-weight:500}
.prose em{font-style:italic}
.prose a{color:var(--or-l);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .3s}
.prose a:hover{color:var(--iv)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose ul li::marker{color:var(--or)}
.prose ol li::marker{color:var(--or);font-family:var(--disp)}
.prose blockquote{border-left:1px solid var(--or);padding:.2em 0 .2em 1.2em;font-family:var(--disp);font-weight:500;font-size:1.25em;line-height:1.35;color:var(--iv)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:rgba(240,236,224,.07);padding:.12em .4em;border-radius:3px}
.prose pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;line-height:1.6;background:#111;border-left:1px solid var(--or);padding:18px 20px;overflow-x:auto}
.prose pre code{background:none;padding:0;font-size:inherit}
.prose table{width:100%;border-collapse:collapse;font-size:.92em;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.prose th{font-weight:500;color:var(--iv);border-bottom-color:rgba(201,168,76,.45)}
.prose figure img{display:block;width:100%;height:auto}
.prose figcaption{font-size:13px;color:#8d8d8d;margin-top:8px}
/* ---------- Pied de page ---------- */
footer{border-top:1px solid var(--line);padding:clamp(80px,14vh,150px) 0 30px;position:relative}
.ft-big{position:relative;display:inline-block;font-family:var(--disp);font-weight:600;font-size:clamp(48px,9vw,172px);line-height:.92;letter-spacing:-.035em;color:var(--iv);padding-bottom:.08em}
.ft-big::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-io)}
.ft-big:hover::after,.ft-big:focus-visible::after{transform:scaleX(1)}
.ft-big .ar{color:var(--or);display:inline-block;margin-left:.2em;transition:transform .5s var(--ease)}
.ft-big:hover .ar{transform:translateX(.14em)}
.ft{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;margin-top:clamp(64px,10vh,110px);padding-top:36px;border-top:1px solid var(--line)}
.ft-quiet{opacity:.7;font-size:.92em}
.ft-brand{display:flex;flex-direction:column;gap:16px}
.ft-copy{font-size:12px;color:#8d8d8d}
.ft-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.ft-h{font-size:14px;font-weight:500;color:var(--or);margin-bottom:6px}
.ft-col a{font-size:15px;color:rgba(240,236,224,.7);background:linear-gradient(var(--or),var(--or)) no-repeat 0 100%/0 1px;padding-bottom:2px;transition:color .3s,background-size .45s var(--ease-io)}
.ft-col a:hover{color:var(--iv);background-size:100% 1px}
/* ---------- Tablette ---------- */
@media(max-width:1024px){
.nlinks{gap:24px}
.nlinks .ncta{display:none}
.ft{grid-template-columns:1fr 1fr}
.ft-brand{grid-column:1/-1}
.cols{grid-template-columns:1fr}
.orow{grid-template-columns:1fr 1fr}
.orow .price{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
}
/* ---------- Mobile ---------- */
@media(max-width:768px){
nav#nav{padding:10px var(--g)}
.grain{animation:none;inset:0}
.nlinks{display:none}.mtog{display:flex}
.big{font-size:clamp(40px,11.4vw,64px)}
.h-xl{font-size:clamp(38px,11vw,64px)}
.h-l{font-size:clamp(30px,9vw,48px)}
.phero{padding-top:120px}
.band3{grid-template-columns:1fr}
.band3 .stat{padding:0;gap:12px}
.band3 .stat+.stat{border-left:0;border-top:1px solid var(--line);margin-top:26px;padding-top:26px}
.band3 .num{font-size:clamp(60px,18vw,84px)}
.rc li,.orow{grid-template-columns:1fr;gap:10px}
.orow .price{grid-column:auto}
.post{padding:22px 0}
.cf,.dm{grid-template-columns:1fr}
.dv p:nth-child(2){padding-left:8vw}
.ft-big{font-size:clamp(42px,12.5vw,72px)}
.ft{grid-template-columns:1fr;gap:30px}
}
/* Grain : immobile sur écran tactile (mobile et tablette) ; calque réduit à la fenêtre */
@media(pointer:coarse){.grain{animation:none;inset:0}}
/* ---------- Mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
.grain{animation:none!important}
nav#nav,.nl::after,.ndd-m,.mmenu,.mm-big a,.mm-small,.mmenu>.more{transition:none!important}
.split .w>span,.rv,.fade,.dv .c{transition:none!important;transform:none!important;opacity:1!important}
.kw{transition:none}
.cta,.more,.cta *,.more *,.cta::before,.more::before,.cta::after,.more::after{transition:none!important}
.cta:hover .ba,.more:hover .ba{transform:none!important}
.cta:is([data-bs="c"],.btn-c):hover .ba i{width:34px}.more:is([data-bs="c"],.btn-c):hover .ba i{width:14px}
.ft-big::after,.ft-big .ar,.ft-col a,.post,.post i,.faq summary::after{transition:none}
}
/* ==========================================================================
Animations des pages intérieures — pilotées par /scripts/anim.js
Tout est conditionné à html.an (ajouté par anim.js, jamais en prefers-reduced-motion) :
sans JS ou en mouvement réduit, chaque élément reste dans son état final.
========================================================================== */
/* Cameo : l'abeille quitte le logo et se pose près du mot surligné du titre (derrière le texte) */
.cameo{position:fixed;left:0;top:0;width:0;height:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s}
.cameo.on{opacity:1}
.cameo.out{opacity:0}
.cameo svg{position:absolute;left:0;top:0;width:34px;height:34px;max-width:none;overflow:visible;transform-origin:50% 50%;will-change:transform;filter:drop-shadow(0 0 10px rgba(201,168,76,.35))}
.cameo .bw,.fd-bee .bw{transform-box:fill-box;transform-origin:50% 100%;animation:bwf .1s linear infinite alternate}
.cameo.land .bw{animation-duration:.16s}
.cameo.land svg{animation:camhov 1.2s ease-in-out infinite}
@keyframes bwf{to{transform:scaleY(.3)}}
@keyframes camhov{50%{translate:0 -4px}}
html.an .phero>.in{position:relative;z-index:2}
/* Audit (#apercu-audit) : l'exemple se construit */
html.an #apercu-audit .score-n::after{content:'';display:block;height:4px;margin-top:22px;max-width:320px;background:linear-gradient(var(--or),var(--or)) 0 0/0 100% no-repeat,rgba(240,236,224,.1);transition:background-size 1.7s var(--ease) .3s}
html.an #apercu-audit .score.an-in .score-n::after{background-size:44% 100%,auto}
html.an #apercu-audit .llms .bar i{transform:scaleX(0);transition:transform 1.4s var(--ease) .15s}
html.an #apercu-audit .llms.an-in .bar i{transform:scaleX(var(--p))}
html.an #apercu-audit .bm-t i{transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--ease) calc(.2s + var(--k,0)*.12s)}
html.an #apercu-audit .panel.an-in .bm-t i{transform:scaleX(1)}
html.an #apercu-audit .stack3 span{transform:scaleX(0);transition:transform .8s var(--ease)}
html.an #apercu-audit .stack3 .neu{transition-delay:.7s}
html.an #apercu-audit .stack3 .neg{transition-delay:1.35s}
html.an #apercu-audit .panel.an-in .stack3 span{transform:none}
html.an #apercu-audit .qt tbody tr{opacity:0;transform:translateY(14px);transition:opacity .5s calc(var(--k,0)*.14s),transform .7s var(--ease) calc(var(--k,0)*.14s)}
html.an #apercu-audit .qt.an-in tbody tr{opacity:1;transform:none}
html.an #apercu-audit .qt .yes{display:inline-block;transform:scale(0) rotate(-20deg);transition:transform .45s cubic-bezier(.3,1.6,.5,1) calc(var(--k,0)*.14s + .35s)}
html.an #apercu-audit .qt.an-in .yes{transform:none}
/* Detekia : jauge du score, critères l'un après l'autre */
html.an .score .score-n .sc+.score-l::after{content:'';display:block;height:4px;margin-top:18px;max-width:320px;background:linear-gradient(var(--or),var(--or)) 0 0/0 100% no-repeat,rgba(240,236,224,.1);transition:background-size 1.7s var(--ease) .3s}
html.an .score.an-in .score-n .sc+.score-l::after{background-size:70% 100%,auto}
html.an .crits .cr-b i{transform:scaleX(0);transition:transform 1s var(--ease) calc(.25s + var(--k,0)*.16s)}
html.an .crits.an-in .cr-b i{transform:scaleX(var(--p))}
/* Stratégie : trait or Semaine 1 → 2 → 3, livrables cochés au passage */
html.an .tl li{position:relative;border-top-color:rgba(201,168,76,.16)}
html.an .tl li::before{content:'';position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .8s linear}
html.an .tl li:nth-child(2)::before{transition-delay:.8s}
html.an .tl li:nth-child(3)::before{transition-delay:1.6s}
html.an .tl .tl-w{color:rgba(240,236,224,.35);transition:color .5s}
html.an .tl li:nth-child(1) .tl-w{transition-delay:.1s}
html.an .tl li:nth-child(2) .tl-w{transition-delay:.9s}
html.an .tl li:nth-child(3) .tl-w{transition-delay:1.7s}
html.an .tl.an-in li::before{transform:scaleX(1)}
html.an .tl.an-in .tl-w{color:var(--iv)}
@media(max-width:900px){html.an .tl li::before{transition-duration:.6s}html.an .tl li:nth-child(2)::before{transition-delay:.45s}html.an .tl li:nth-child(3)::before{transition-delay:.9s}}
html.an .an-chk .n::after{content:'';display:inline-block;width:.42em;height:.2em;margin:0 .1em .16em .35em;border-left:2px solid var(--or);border-bottom:2px solid var(--or);transform:rotate(-45deg) scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1) .35s}
html.an .an-chk li.v .n::after{transform:rotate(-45deg) scale(1)}
/* Accompagnement : les mois s'allument en boucle, les éléments inclus un à un */
html.an .an-cyc li{position:relative;border-top-color:rgba(201,168,76,.18);transition:border-color .6s}
html.an .an-cyc li::before{content:'';position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--or);transform:scaleX(0);transform-origin:left}
html.an .an-cyc li.on::before{transform:scaleX(1);transition:transform 2.1s linear}
html.an .an-cyc .ph-w{color:rgba(201,168,76,.38);transition:color .6s}
html.an .an-cyc li.on .ph-w{color:var(--or)}
html.an .an-dot li h3{position:relative}
html.an .an-dot li h3::before{content:'';position:absolute;left:-22px;top:.42em;width:8px;height:8px;border-radius:50%;background:var(--or);box-shadow:0 0 12px rgba(201,168,76,.7);transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) .3s}
html.an .an-dot li.v h3::before{transform:scale(1)}
html.an .ticks li::before{transform:rotate(-45deg) scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
html.an .ticks.v li::before{transform:rotate(-45deg) scale(1)}
html.an .ticks.v li:nth-child(2)::before{transition-delay:.12s}html.an .ticks.v li:nth-child(3)::before{transition-delay:.24s}
html.an .ticks.v li:nth-child(4)::before{transition-delay:.36s}html.an .ticks.v li:nth-child(5)::before{transition-delay:.48s}
html.an .ticks.v li:nth-child(n+6)::before{transition-delay:.6s}
@media(max-width:700px){html.an .an-dot li h3::before{left:-14px;width:6px;height:6px}}
/* Services : parcours des offres relié par le pointillé de l'abeille */
html.an .an-path{position:relative}
.svc-path{position:absolute;left:-30px;width:2px;pointer-events:none}
.svc-path::before,.svc-path i{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to bottom,var(--or) 0 3px,transparent 3px 8px)}
.svc-path::before{opacity:.18}
.svc-path i{display:block;transform:scaleY(var(--pg,0));transform-origin:top}
html.an .an-path li{position:relative}
html.an .an-path li::before{content:'';position:absolute;left:-35px;top:calc(var(--dy,40px) - 6px);width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(201,168,76,.4);background:var(--noir);transition:border-color .4s,background .4s,box-shadow .4s,transform .4s}
html.an .an-path li.lit::before{border-color:var(--or);background:var(--or);box-shadow:0 0 14px rgba(201,168,76,.6);transform:scale(1.1)}
html.an .an-path .n{transition:color .4s,text-shadow .4s}
html.an .an-path li:not(.lit) .n{color:rgba(201,168,76,.45)}
html.an .an-path li.lit .n{text-shadow:0 0 18px rgba(201,168,76,.55)}
@media(max-width:700px){.svc-path{left:-13px}html.an .an-path li::before{left:-18px;width:10px;height:10px;top:calc(var(--dy,30px) - 5px)}}
/* Devis : barre des prompts, ouverture douce du formulaire */
.pr-bar{display:block;height:3px;margin:2px 0 10px;background:rgba(240,236,224,.1);overflow:hidden}
.pr-bar i{display:block;height:100%;background:var(--or);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .5s var(--ease)}
html.an .dm-devis:not(.closed){animation:dmopen .6s var(--ease)}
@keyframes dmopen{from{opacity:0;transform:translateY(-14px)}}
/* Blog : barre de lecture, titres soulignés, articles liés */
.rd-bar{position:fixed;left:0;right:0;top:0;height:2px;z-index:9001;pointer-events:none}
.rd-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--or),var(--or-l));transform:scaleX(var(--p,0));transform-origin:left}
html.an .an-h2{position:relative}
html.an .an-h2::after{content:'';position:absolute;left:0;bottom:-10px;width:64px;height:2px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .15s}
html.an .an-h2.an-in::after{transform:scaleX(1)}
.art .rel-list a{position:relative;padding-right:40px}
.art .rel-list a::after{content:'\2192';position:absolute;right:6px;top:50%;color:var(--or);opacity:0;transform:translate(-12px,-50%);transition:opacity .3s,transform .4s var(--ease)}
.art .rel-list a:hover::after,.art .rel-list a:focus-visible::after{opacity:1;transform:translate(0,-50%)}
/* À propos : l'abeille se pose près du nom */
html.an .an-fd{position:relative}
.fd-bee{position:absolute;width:36px;height:36px;pointer-events:none;opacity:0;transform:translate(-70px,-60px) rotate(-25deg) scale(.6);transition:opacity .4s,transform 1.3s var(--ease-io)}
.fd-bee svg{width:36px;height:36px;max-width:none;overflow:visible;filter:drop-shadow(0 0 10px rgba(201,168,76,.35))}
html.an .an-fd.an-in .fd-bee{opacity:1;transform:none;animation:camhov 1.6s ease-in-out 1.4s infinite}
.fd-bee .bw{animation-duration:.14s}
/* ==========================================================================
Accessibilité (audit du 04/11/2026) : contrastes AA dans la palette, scène des offres sans JavaScript
========================================================================== */
/* Accueil : légende du lecteur et onglets inactifs du parcours (styles de index.html, renforcés ici) */
.demo .pl-ill{color:#8d8d8d}
#pl .pl-nav button{color:rgba(240,236,224,.55)}
#pl .pl-nav button:hover,#pl .pl-nav button[aria-selected="true"]{color:var(--iv)}
/* Page Audit : tiret « non cité » du tableau d'aperçu */
#apercu-audit .no{color:#8d8d8d}
/* Accueil sans JavaScript : les trois offres de la scène s'affichent l'une sous l'autre (comme en mouvement réduit) */
html.no-js #offres.scene{height:auto}
html.no-js #offres .stage{position:relative;height:auto;overflow:visible}
html.no-js #offres .stage-in{height:auto;padding-top:clamp(96px,16vh,190px);padding-bottom:clamp(96px,16vh,190px)}
html.no-js #offres .verb,html.no-js #offres .rail{display:none}
html.no-js #offres .panels{display:block;position:static;width:auto;margin:48px 0 0}
html.no-js #offres .panel{opacity:1;transform:none;transition:none;pointer-events:auto;padding:44px 0;border-top:1px solid var(--line);max-width:640px}
html.no-js #offres .pverb{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(56px,10vw,170px);line-height:.88;letter-spacing:-.045em;margin-bottom:22px}