/* ==========================================================================
   Studio Aria — feuille de style partagée (site v2)
   Palette exclusive : encre, encre 2, pêche, pêche claire, pervenche,
   pervenche foncée, nuage, brume, papier, ardoise, givre.
   ========================================================================== */

/* ---------- Polices auto-hébergées (latin, WOFF2) + replis aux métriques ajustées ----------
   Bricolage Grotesque : variable, axes wght 400–800 et opsz 12–96. Instrument Serif : italique.
   Les replis (Arial / Times) sont recalés sur les métriques mesurées (_audit/lot1/fontmetrics.py)
   pour que l'échange de police ne déplace pas la mise en page (CLS). */
@font-face{font-family:'Bricolage Grotesque';src:url(../fonts/bricolage-grotesque-var-latin.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(../fonts/instrument-serif-italic-latin.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Bricolage Fallback';src:local('Arial'),local('ArialMT');font-weight:400 600;size-adjust:102.82%;ascent-override:90.45%;descent-override:26.26%;line-gap-override:0%}
@font-face{font-family:'Bricolage Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:700 800;size-adjust:91.75%;ascent-override:101.36%;descent-override:29.43%;line-gap-override:0%}
@font-face{font-family:'Instrument Fallback';src:local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT'),local('Georgia Italic');font-style:italic;size-adjust:88%;ascent-override:112.5%;descent-override:35.23%;line-gap-override:0%}

:root{
  --encre:#1E2C5A; --encre2:#30406F; --peche:#F4D6CF; --peche-cl:#FFE9E3;
  --perv:#7586F5; --perv-f:#4C5CD4; --nuage:#EEF2FF; --brume:#F8FAFF;
  --papier:#FFFFFF; --ardoise:#626B84; --givre:#E3E7F0;
  --sur-encre:rgba(238,242,255,.8);           /* nuage atténué sur fond encre (≈ 8:1) */
  --bord-champ:#7D87A6;                       /* bordure de champ ≥ 3:1 sur blanc et brume */
  --display:'Bricolage Grotesque','Bricolage Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Instrument Serif','Instrument Fallback', Georgia, 'Times New Roman', serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .17 0 0 0 0 .35 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-cl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .95 0 0 0 0 1 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* ombre de contact d'un sticker (statique, jamais animée ; l'ombre portée animée vit sur .stk-in::before) */
  --shadow-contact:drop-shadow(0 1.5px 1px rgba(30,44,90,.22));
  --radius-panel:clamp(28px,4vw,56px);
  --gutter:clamp(16px,4vw,48px);
  --hit:44px;                                 /* cible tactile minimale */
  --nav-h:72px;                               /* hauteur occupée par la nav fixe (top + pilule) */

  /* ---------- Échelle typographique unique (390 → 1440 px, px + vw : respecte le zoom) ---------- */
  --fs-display-xxl: clamp(64px, 14px + 12.6vw, 200px); /* 64 → 195 · réservé aux numéros/visuels typographiques (404) */
  --fs-display:     clamp(56px, 17px + 9.9vw, 168px);  /* 56 → 160 · SOMMET : H1 accueil (et CTA final en écho) */
  --fs-h1:          clamp(48px, 18px + 7.6vw, 128px);  /* 48 → 127 · H1 pages secondaires */
  --fs-h2:          clamp(44px, 22px + 5.4vw, 104px);  /* 44 → 100 · titres de section */
  --fs-h2-sm:       clamp(36px, 20px + 3.8vw, 76px);   /* 36 → 75  · H2 internes, études de cas */
  --fs-h3:          clamp(26px, 18px + 1.6vw, 44px);   /* 26 → 41  · cartes, étapes, piliers */
  --fs-h4:          clamp(21px, 17px + .9vw, 28px);    /* 21 → 28  · sous-titres, phrases fortes */
  --fs-lead:        clamp(19px, 15.5px + .55vw, 24px); /* 19 → 23.4 */
  --fs-body:        clamp(17px, 16.3px + .18vw, 18.5px);
  --fs-small:       15px;
  --fs-eyebrow:     clamp(12px, 11.3px + .2vw, 13.5px);
  --fs-tag:         13px;
  --fs-foot-sign:   clamp(40px, 26px + 2.7vw, 64px);   /* slogan du pied de page : 56–64 px en desktop */
  /* Serif (Instrument Serif italique) : 3 tailles + accent inline */
  --serif-accent:   1.12em;                            /* em.s dans un titre display/H1/H2 */
  --serif-accent-t: 1.04em;                            /* em.s dans H3, lead, texte */
  --fs-serif-lead:  clamp(26px, 17px + 2.3vw, 44px);
  --fs-serif-quote: clamp(34px, 13px + 5.4vw, 88px);
  --fs-numeral:     clamp(64px, 22px + 10.8vw, 180px);
  /* Interlignage */
  --lh-xxl:.84; --lh-display:.86; --lh-h1:.88; --lh-h2:.92; --lh-h3:1; --lh-h4:1.12;
  --lh-lead:1.42; --lh-body:1.6; --lh-serif:1.02;
  /* Approche : plus serré quand c'est plus gros */
  --ls-xxl:-.058em; --ls-display:-.055em; --ls-h1:-.05em; --ls-h2:-.046em;
  --ls-h3:-.035em; --ls-h4:-.02em; --ls-lead:-.006em; --ls-body:0;
  --ls-eyebrow:.14em; --ls-serif:-.012em;
  --opsz-display:"opsz" 96;

  /* ---------- Système de motion ----------
     Objet (stickers, boutons, pins) : ressort --ease-stick. Éditorial (texte, panneaux, couleurs) :
     --ease-out sans dépassement. Uniquement transform / opacity (+ clip-path pour les masques). */
  --t-1:120ms;  /* retour d'état : press, couleur de focus */
  --t-2:200ms;  /* survol de lien, couleur, petite icône ; sorties */
  --t-3:320ms;  /* survol de carte, bouton, sticker soulevé */
  --t-4:560ms;  /* entrée de bloc, collage de sticker, menu */
  --t-5:900ms;  /* séquences (frise) : jamais plus par élément */
  --stagger:60ms; --stagger-tight:35ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --ease-stick:cubic-bezier(.34,1.45,.55,1);
  --ease-spring:var(--ease-stick);            /* alias historique */
  --lift-1:3px; --lift-2:6px; --rise:18px;
  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:110px}
body{margin:0;background:var(--brume);color:var(--encre);font-family:var(--display);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:clip;font-optical-sizing:auto}
body.menu-open{overflow:hidden}
[hidden]{display:none!important}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--perv-f)}
p{margin:0}
p,li,dd,figcaption,blockquote{text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:800;text-wrap:balance}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--peche);color:var(--encre)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.sr-f:not(:focus):not(:focus-visible){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.wrap{width:min(1280px,100% - 2*var(--gutter));margin-inline:auto}
.wrap--narrow{width:min(880px,100% - 2*var(--gutter));margin-inline:auto}
/* Accent serif : 1,12em dans les titres, 1,04em dans le texte */
em.s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:var(--ls-serif);font-size:var(--serif-accent);line-height:.8;margin-right:-.02em}
.h3 em.s,.lede em.s,p em.s,li em.s{font-size:var(--serif-accent-t)}
/* Coupures pilotées : une phrase par ligne (.l), insécable (.nb), retours desktop (.d) / mobile (.m) */
.l{display:block}
.l--i{display:inline}
.nb{white-space:nowrap}
br.m{display:none}
@media (max-width:700px){br.d{display:none} br.m{display:inline} .l--m-inline{display:inline}}
:focus-visible{outline:3px solid var(--perv-f);outline-offset:3px;border-radius:6px}
.tone-encre :focus-visible,.cta-final :focus-visible,.foot :focus-visible,.nav-panel :focus-visible,.band :focus-visible{outline-color:var(--peche)}

/* Lien d'évitement */
.skip{position:fixed;left:16px;top:16px;z-index:100;background:var(--encre);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none;transform:translateY(-100px);transition:transform var(--t-2) var(--ease-out)}
.skip:focus{transform:none}

/* Grain */
.grain{position:relative;isolation:isolate}
.grain::before{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:240px;opacity:.12;mix-blend-mode:multiply;pointer-events:none;z-index:-1;border-radius:inherit}
.tone-encre.grain::before,.cta-final.grain::before,.foot.grain::before{background-image:var(--grain-cl);opacity:.07;mix-blend-mode:screen}

/* ---------- Typographie ---------- */
.kicker{display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);line-height:1.3;text-transform:uppercase;color:var(--perv-f);margin:0 0 22px;max-width:none;text-wrap:balance}
.kicker::before{content:"";width:28px;height:2px;background:currentColor;flex:none}
.kicker .idx{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.38em;letter-spacing:0;text-transform:none}
.tone-encre .kicker,.cta-final .kicker{color:var(--peche)}
.tone-peche .kicker{color:var(--encre)}
.display,.hero .h1{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-variation-settings:var(--opsz-display)}
.display-xxl{font-size:var(--fs-display-xxl);line-height:var(--lh-xxl);letter-spacing:var(--ls-xxl);font-variation-settings:var(--opsz-display)}
.h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);font-variation-settings:var(--opsz-display);text-wrap:balance}
.hero .h1{font-size:var(--fs-display)}
.h1 em.s{color:var(--perv-f)}
.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-variation-settings:var(--opsz-display);text-wrap:balance}
.h2 em.s{color:var(--perv-f)}
.h2--md,.h2-sm{font-size:var(--fs-h2-sm)}
.h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);text-wrap:balance}
.h4{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);font-weight:700}
.tone-encre .h2 em.s,.tone-encre .h1 em.s,.tone-encre .h3 em.s,.cta-final .h2 em.s{color:var(--peche)}
.lede{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);color:var(--encre2);font-weight:500;max-width:34em;text-wrap:pretty}
.tone-encre .lede{color:var(--sur-encre)}
.serif-lead{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--fs-serif-lead);line-height:var(--lh-serif);letter-spacing:var(--ls-serif)}
.serif-quote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--fs-serif-quote);line-height:var(--lh-serif);letter-spacing:var(--ls-serif)}
.numeral{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--fs-numeral);line-height:.8;letter-spacing:-.02em}
.prose p+p{margin-top:1.1em}
.muted{color:var(--ardoise)}
/* Hauteur d'écran courte : le héros ne pousse pas les CTA sous la ligne de flottaison */
/* (le H1 reste ≥ au H1 des pages secondaires : il demeure le sommet de l'échelle) */
@media (min-width:701px) and (max-height:960px){.hero .h1{font-size:max(var(--fs-h1),min(var(--fs-display),15vh))}}

/* Liens soulignés : une seule règle. Le soulignement se dessine de gauche à droite à l'entrée
   et repart vers la droite à la sortie. .ul = présent au repos (contenu) ; .ul-in = absent au repos (navigation). */
.ul,.ul-in{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat;background-size:100% 2px;background-position:0 100%;padding-bottom:3px;transition:background-size var(--t-3) var(--ease-out)}
.ul{font-weight:700}
.ul:hover,.ul:focus-visible{background-size:0 2px;background-position:100% 100%}
.ul-in{background-size:0 2px;background-position:100% 100%;padding-bottom:2px}
.ul-in:hover,.ul-in:focus-visible{background-size:100% 2px;background-position:0 100%}

/* ---------- Boutons : un sticker qu'on presse ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 24px;border-radius:999px;background:var(--encre);color:#fff;text-decoration:none;font-weight:700;font-size:16px;line-height:1.1;letter-spacing:-.01em;border:0;cursor:pointer;text-align:center;
  transition:transform var(--t-3) var(--ease-stick),background-color var(--t-2) var(--ease-out),color var(--t-2) var(--ease-out),box-shadow var(--t-2) var(--ease-out),outline-offset var(--t-2) var(--ease-out)}
.btn:hover,.btn:focus-visible{transform:translateY(calc(-1 * var(--lift-1) + 1px)) rotate(-1.2deg);background:var(--encre2)}
.btn:active{transform:scale(.97);transition-duration:var(--t-1)}
.btn:focus-visible{outline-offset:3px}
.btn .ar{display:inline-block;transition:transform var(--t-3) var(--ease-stick)}
.btn:hover .ar,.btn:focus-visible .ar{transform:translateX(4px)}
.btn--peche{background:var(--peche);color:var(--encre)}
.btn--peche:hover,.btn--peche:focus-visible{background:var(--peche-cl)}
.btn--ghost{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 2px var(--encre)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--encre);color:#fff}
.btn--ghost-cl{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(238,242,255,.55)}
.btn--ghost-cl:hover,.btn--ghost-cl:focus-visible{background:var(--nuage);color:var(--encre)}
.btn--lg{min-height:58px;padding:18px 30px;font-size:18px}
.btn[disabled]{opacity:.7;cursor:progress;transform:none}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- Navigation ---------- */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;width:min(1180px,100% - 24px);display:flex;align-items:center;gap:12px;padding:7px 7px 7px 16px;border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(227,231,240,.95);box-shadow:0 10px 30px -14px rgba(30,44,90,.35);transition:box-shadow var(--t-3) var(--ease-inout),background-color var(--t-3) var(--ease-inout)}
.nav.scrolled{box-shadow:0 14px 40px -16px rgba(30,44,90,.45)}
.brand{display:flex;align-items:center;flex:none;border-radius:10px;min-height:var(--hit)}
.brand img{height:38px;width:auto}
.nav-links{display:flex;gap:2px;margin:0 auto;list-style:none}
.nav-links a{position:relative;display:flex;align-items:center;min-height:var(--hit);padding:9px 15px;border-radius:999px;text-decoration:none;color:var(--encre);font-weight:600;font-size:15px;transition:background-color var(--t-2) var(--ease-out)}
.nav-links a:hover,.nav-links a:focus-visible{background:var(--nuage)}
.nav-links a[aria-current="page"]{background:var(--nuage)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:4px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--perv-f)}
.nav-cta{min-height:var(--hit);padding:10px 18px;font-size:14px;margin-left:auto;white-space:nowrap}
.nav-links+.nav-cta{margin-left:0}
/* Sur la page Contact, le CTA de nav mène à la page courante : on le retire */
.nav-cta[aria-current="page"],.nav-panel .btn[aria-current="page"]{display:none}
.nav-links:has(+ .nav-cta[aria-current="page"]){margin-right:0}
.nav-toggle{display:none;flex:none;width:var(--hit);height:var(--hit);border-radius:50%;border:0;background:var(--nuage);cursor:pointer;position:relative;margin-left:auto}
.nav-cta+.nav-toggle{margin-left:0}
.nav-cta[aria-current="page"]+.nav-toggle{margin-left:auto}
.nav-toggle span{position:absolute;left:13px;right:13px;top:21px;height:2.5px;border-radius:2px;background:var(--encre);transition:transform var(--t-3) var(--ease-out)}
.nav-toggle span:first-child{transform:translateY(-4px)}
.nav-toggle span:last-child{transform:translateY(4px)}
.nav-toggle[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
body.menu-open .nav-cta{visibility:hidden}
/* Menu mobile : dialogue modal (role=dialog, aria-modal, inert sur main/footer posé en JS) */
.nav-panel{position:fixed;inset:0;z-index:55;background:var(--encre);color:var(--nuage);padding:110px var(--gutter) 40px;display:flex;flex-direction:column;gap:30px;overflow-y:auto;overscroll-behavior:contain}
.nav-panel[hidden]{display:none}
.nav-panel ul{list-style:none;display:grid;gap:2px}
.nav-panel ul a{display:flex;align-items:baseline;gap:14px;padding:8px 0;color:#fff;text-decoration:none;font-weight:800;font-size:clamp(38px,11vw,64px);letter-spacing:-.05em;line-height:1}
.nav-panel ul a small{font-family:var(--serif);font-style:italic;font-weight:400;font-size:18px;letter-spacing:0;color:var(--peche)}
.nav-panel ul a[aria-current="page"]{color:var(--peche)}
.nav-panel .muted{color:var(--sur-encre);font-size:15px;margin-top:auto}
.nav-close{align-self:flex-start;min-height:var(--hit);padding:10px 18px;border-radius:999px;border:2px solid rgba(238,242,255,.55);background:transparent;color:#fff;font-weight:700;cursor:pointer}
/* entrée : panneau puis liens décalés de 35 ms, CTA en dernier (collage court) ; sortie 60 % plus courte */
html.js .nav-panel:not([hidden]){animation:panel-in var(--t-4) var(--ease-out) backwards}
html.js .nav-panel:not([hidden]) li{animation:item-in var(--t-4) var(--ease-out) backwards}
html.js .nav-panel li:nth-child(1){animation-delay:60ms}
html.js .nav-panel li:nth-child(2){animation-delay:95ms}
html.js .nav-panel li:nth-child(3){animation-delay:130ms}
html.js .nav-panel li:nth-child(4){animation-delay:165ms}
html.js .nav-panel li:nth-child(5){animation-delay:200ms}
html.js .nav-panel:not([hidden]) > .btn{animation:stick-on-short var(--t-4) var(--ease-stick) 260ms backwards}
html.js .nav-panel.closing{animation:panel-out var(--t-2) var(--ease-out) forwards}
@keyframes panel-in{from{opacity:0;transform:translateY(-8px)}}
@keyframes panel-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes item-in{from{opacity:0;transform:translateY(12px)}}

/* ==========================================================================
   Stickers
   Déclaration :
   - sticker déplaçable : <div class="board" aria-hidden="true"><div class="stk" data-s="nom"
       style="--x:12%;--y:19%;--w:220px;--r:-8deg;--d:.7;--mx:26%;--my:11%;--tx:..;--ty:..;--tw:.."></div></div>
       --x/--y : centre (desktop) ; --mx/--my : centre ≤ 700 px ; --tx/--ty/--tw : palier tablette 701–1080 px ;
       --w : largeur ; --r : rotation ; --d : profondeur (≥ 1.2 = légère parallaxe) ;
       classes .hide-m (masqué ≤ 700), .hide-t (masqué 701–1080), .hide-d (masqué ≥ 1081).
   - sticker posé (pin, non déplaçable) : <span class="pin" data-s="nom" style="--w:200px;--r:-7deg;right:..;top:.."></span>
       ajouter data-reveal="stick" pour le coller à l'apparition.
   ========================================================================== */
.board{position:absolute;inset:0;z-index:1}
.stk{position:absolute;left:var(--x);top:var(--y);width:var(--w);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transform:translate(-50%,-50%) translate3d(calc(var(--dx,0px) + var(--px,0px)),calc(var(--dy,0px) + var(--py,0px)),0) rotate(var(--r,0deg));z-index:var(--z,1)}
.board .stk{cursor:grab;touch-action:pan-y pinch-zoom}
.board .stk.drag{will-change:transform}
.stk-in{position:relative;isolation:isolate;transform-origin:50% 60%;
  transform:perspective(520px) rotateX(calc(var(--ly,0) * 10deg * var(--lift,0) + var(--hov,0) * 12deg)) rotateY(calc(var(--lx,0) * -10deg * var(--lift,0) - var(--hov,0) * 9deg)) translateY(calc(var(--lift,0) * -3px - var(--hov,0) * 6px)) scale(calc(1 + var(--hov,0) * .05));
  transition:transform var(--t-3) var(--ease-stick)}
/* ombre portée sur calque séparé : seules opacité et transform bougent (jamais filter) */
.stk-in::before{content:"";position:absolute;inset:12% 8% 2%;z-index:-1;border-radius:42%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(30,44,90,.42),rgba(30,44,90,.18) 55%,rgba(30,44,90,0));
  opacity:calc(.5 + var(--lift,0) * .3 + var(--hov,0) * .4);transform:translateY(calc(8px + var(--lift,0) * 6px + var(--hov,0) * 12px)) scale(calc(1 + var(--hov,0) * .06));
  transition:opacity var(--t-3) var(--ease-out),transform var(--t-3) var(--ease-out)}
.stk svg{width:100%;height:auto;overflow:visible;pointer-events:none;filter:var(--shadow-contact)}
.stk:hover,.pin:hover{--hov:1}
.stk.near .stk-in{transition-duration:80ms}
.stk.drag{cursor:grabbing}
.stk.drag .stk-in{transform:perspective(520px) rotate(calc(3deg + var(--tilt,0deg))) translateY(-10px) scale(1.08);transition:transform var(--t-2) var(--ease-out)}
.stk.drag .stk-in::before{opacity:1;transform:translateY(22px) scale(1.1);transition-duration:var(--t-2)}
.stk.stuck .stk-in{animation:stick-on-short var(--t-4) var(--ease-stick)}
.stk.stuck .stk-in::before{animation:shadow-on var(--t-4) var(--ease-out)}
.stk:focus-visible{outline:3px solid var(--perv-f);outline-offset:4px;border-radius:12px}
.tone-encre .stk-in::before,.cta-final .stk-in::before,.foot .stk-in::before{background:radial-gradient(closest-side,rgba(5,10,30,.6),rgba(5,10,30,.25) 55%,rgba(5,10,30,0))}
/* sticker posé dans une section (non déplaçable) */
.pin{position:absolute;width:var(--w);transform:rotate(var(--r,0deg));z-index:3;pointer-events:auto}

@keyframes stick-on{0%{opacity:0;transform:translateY(-14px) scale(1.18) rotate(-6deg)}55%{opacity:1;transform:translateY(0) scale(.97) rotate(0)}100%{opacity:1;transform:none}}
@keyframes stick-on-short{0%{transform:scale(1.06)}45%{transform:scale(.97)}100%{transform:none}}
@keyframes shadow-on{0%{opacity:0;transform:translateY(26px) scale(1.15)}55%{opacity:.9;transform:translateY(6px) scale(.96)}100%{opacity:.5;transform:translateY(8px) scale(1)}}

/* Entrée « on pose la planche » : html.intro posé par site.js sur fonts.ready (700 ms max).
   Ordre spatial : --o (calculé en JS, du plus proche du H1 vers l'extérieur). backwards : à la fin,
   l'état normal reprend la main (survol, drag). html.intro-done retire les animations d'entrée. */
html.js:not(.intro):not(.no-intro) .board .stk-in{opacity:0}
html.intro:not(.intro-done) .board .stk-in{animation:stick-on var(--t-4) var(--ease-stick) backwards;animation-delay:calc(var(--intro-stk,420ms) + var(--o,0) * 45ms)}
html.intro:not(.intro-done) .board .stk-in::before{animation:shadow-on var(--t-4) var(--ease-out) backwards;animation-delay:calc(var(--intro-stk,420ms) + var(--o,0) * 45ms)}

/* Bulle « Psst » + « Tout recoller » : le bouton n'apparaît qu'après un premier décollage */
.hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:10px;min-height:var(--hit);font-size:13px;font-weight:600;color:var(--encre2);background:rgba(255,255,255,.86);border:1px solid var(--givre);padding:4px 4px 4px 16px;border-radius:999px;white-space:nowrap}
.hint:not(.has-reset){padding-right:16px}
.hint button{min-height:var(--hit);padding:10px 16px;font-weight:700;border:0;background:var(--encre);color:#fff;border-radius:999px;cursor:pointer;font-size:13px;transition:background-color var(--t-2) var(--ease-out),transform var(--t-3) var(--ease-stick)}
.hint button:hover,.hint button:focus-visible{background:var(--perv-f)}
.hint button:active{transform:scale(.96)}
.hint .hint-touch{display:none}
@media (pointer:coarse){.hint .hint-touch{display:inline}}
html:not(.js) .hint{display:none}

/* ---------- Entrées éditoriales (héros) ----------
   .rise   : opacité + translation (jamais sur l'élément LCP)
   .rise-t : translation seule (H1 : visible dès le premier rendu, LCP non retardé)
   délai : --dl (ex. style="--dl:60ms") */
html.js:not(.intro):not(.no-intro) .rise{opacity:0;transform:translateY(var(--rise))}
html.js:not(.intro):not(.no-intro) .rise-t{transform:translateY(var(--rise))}
html.intro:not(.intro-done) .rise{animation:rise var(--t-4) var(--ease-out) both;animation-delay:var(--dl,0ms)}
html.intro:not(.intro-done) .rise-t{animation:rise-t var(--t-4) var(--ease-out) both;animation-delay:var(--dl,0ms)}
@keyframes rise{from{opacity:0;transform:translateY(var(--rise))}}
@keyframes rise-t{from{transform:translateY(var(--rise))}}

/* ---------- Héros (accueil) ---------- */
.hero{position:relative;min-height:max(100svh,780px);display:flex;align-items:center;justify-content:center;text-align:center;padding:140px 0 110px;overflow:hidden;
  background:
    radial-gradient(60% 50% at 18% 18%,rgba(117,134,245,.30),transparent 70%),
    radial-gradient(50% 45% at 85% 85%,rgba(244,214,207,.9),transparent 70%),
    radial-gradient(40% 40% at 90% 10%,rgba(117,134,245,.18),transparent 70%),
    var(--nuage)}
.hero-in{position:relative;z-index:2;pointer-events:none;max-width:1180px;padding:0 var(--gutter)}
.hero-in a,.hero-in button{pointer-events:auto}
.hero .overline{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--encre2);background:rgba(255,255,255,.75);border:1px solid var(--givre);padding:8px 16px;border-radius:999px;margin-bottom:30px}
.hero .overline::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--perv-f);box-shadow:0 0 0 3px rgba(76,92,212,.18)}
.hero .h1{max-width:13ch;margin-inline:auto}
.hero .lede{margin:32px auto 0}
.hero .accroche{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:var(--fs-serif-lead);line-height:var(--lh-serif);color:var(--encre)}
.hero .btns{justify-content:center;margin-top:34px}
.hero .mention{margin-top:26px;font-size:14px;font-weight:600;color:var(--encre2)}

/* ---------- Héros des pages secondaires ---------- */
.phero{position:relative;overflow:hidden;padding:clamp(150px,18vw,220px) 0 clamp(70px,9vw,120px);
  background:
    radial-gradient(55% 60% at 90% 10%,rgba(117,134,245,.24),transparent 70%),
    radial-gradient(45% 55% at 100% 100%,rgba(244,214,207,.85),transparent 70%),
    var(--nuage)}
.phero .wrap{position:relative;z-index:2;pointer-events:none}
.phero .wrap a,.phero .wrap button,.phero .wrap input,.phero .wrap select,.phero .wrap textarea{pointer-events:auto}
.phero .h1{max-width:15ch}
.phero .lede{margin-top:30px}
.phero .btns{margin-top:32px}
.phero .board{left:auto;width:min(46%,620px)}
/* Fil d'Ariane : encre 2 (AA sur dégradé), cibles 44 px sans décaler la mise en page */
.crumbs{display:flex;gap:8px;font-size:14px;font-weight:600;color:var(--encre2);margin-bottom:26px;list-style:none;flex-wrap:wrap;align-items:center}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--hit);margin-block:calc((var(--hit) - 1.6em) / -2);color:var(--encre2);text-underline-offset:3px}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--encre2)}

/* ---------- Bandeau défilant (plus lent, serif, pausable : bouton, hors écran, focus) ---------- */
.band{position:relative;background:var(--encre);color:var(--nuage);overflow:hidden;padding:20px 0;border-block:1px solid var(--encre2)}
.band-track{display:flex;width:max-content;animation:marq var(--marq-dur,150s) linear infinite;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,1.2vw + 20px,40px);letter-spacing:-.01em;white-space:nowrap;line-height:1.2}
.band:hover .band-track,.band:focus-within .band-track,.band.paused .band-track,.band.off .band-track{animation-play-state:paused}
.band-track>span{display:inline-flex;align-items:center;gap:32px;padding-right:32px}
.band-track em{font-style:italic;color:var(--peche)}
.band-track i{width:10px;height:10px;border-radius:50%;background:var(--perv);display:inline-block;box-shadow:0 0 0 3px var(--encre),0 0 0 4.5px var(--perv);flex:none}
.band-pause{position:absolute;right:max(10px,var(--gutter));top:50%;transform:translateY(-50%);z-index:2;width:var(--hit);height:var(--hit);border-radius:50%;border:0;background:var(--nuage);color:var(--encre);cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 6px var(--encre);transition:background-color var(--t-2) var(--ease-out),transform var(--t-3) var(--ease-stick)}
.band-pause:hover,.band-pause:focus-visible{background:var(--peche)}
.band-pause:active{transform:translateY(-50%) scale(.94)}
.band-pause svg{width:16px;height:16px}
.band-pause .i-play{display:none}
.band-pause[aria-pressed="true"] .i-play{display:block}
.band-pause[aria-pressed="true"] .i-pause{display:none}
html:not(.js) .band-pause{display:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.sec{position:relative;padding:clamp(96px,12vw,170px) 0}
.sec--tight{padding:clamp(72px,9vw,120px) 0}
.tone-brume{background:var(--brume)}
.tone-nuage{background:var(--nuage)}
.tone-peche{background:var(--peche-cl)}
.tone-encre{background:var(--encre);color:var(--nuage)}
.panel{margin-inline:clamp(8px,1.4vw,18px);border-radius:var(--radius-panel)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px 70px;align-items:end;margin-bottom:clamp(48px,6vw,80px)}
.sec-head .lede{margin:0 0 8px}
.lede--serif{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--fs-serif-lead);line-height:var(--lh-serif);letter-spacing:var(--ls-serif);color:var(--encre)}
.sec-head--stack{grid-template-columns:1fr}

/* Révélations au scroll (masquées uniquement si html.reveal) */
/* Une grammaire, quatre variantes (§3.5 motion) :
   data-reveal          paragraphes, cartes : opacité + 18 px, 560 ms
   data-reveal="lines"  titres : chaque .l se dévoile par masque (clip-path), décalage 60 ms par ligne
   data-reveal="list"   enfants directs un par un (35 ms, 8 max), translateX(-8px)
   data-reveal="stick"  pin : collé (ressort) 200 ms après l'apparition
   Délai additionnel : --dl. Focus clavier dans un bloc masqué = bloc affiché. */
html.reveal [data-reveal]{opacity:0;transform:translateY(var(--rise));transition:opacity var(--t-4) var(--ease-out),transform var(--t-4) var(--ease-out);transition-delay:var(--dl,0s)}
html.reveal [data-reveal].in,html.reveal [data-reveal]:focus-within{opacity:1;transform:none}
html.reveal [data-reveal].no-anim,html.reveal [data-reveal].no-anim *{transition:none!important;animation:none!important}
html.reveal [data-reveal="lines"]{opacity:1;transform:none}
html.reveal [data-reveal="lines"] .l{clip-path:inset(-.3em -.3em 100% -.3em);transform:translateY(.4em);transition:clip-path var(--t-4) var(--ease-out),transform var(--t-4) var(--ease-out);transition-delay:calc(var(--dl,0s) + var(--li,0) * var(--stagger))}
html.reveal [data-reveal="lines"].in .l{clip-path:inset(-.3em -.3em -.5em -.3em);transform:none}
html.reveal [data-reveal="lines"] .l:nth-child(2){--li:1}
html.reveal [data-reveal="lines"] .l:nth-child(3){--li:2}
html.reveal [data-reveal="lines"] .l:nth-child(4){--li:3}
html.reveal [data-reveal="lines"] .l:nth-child(5){--li:4}
html.reveal [data-reveal="list"]{opacity:1;transform:none}
html.reveal [data-reveal="list"]>*{opacity:0;transform:translateX(-8px);transition:opacity var(--t-3) var(--ease-out),transform var(--t-3) var(--ease-out);transition-delay:calc(var(--dl,0s) + var(--li,7) * var(--stagger-tight))}
html.reveal [data-reveal="list"].in>*,html.reveal [data-reveal="list"]:focus-within>*{opacity:1;transform:none}
html.reveal [data-reveal="list"]>:nth-child(1){--li:0}
html.reveal [data-reveal="list"]>:nth-child(2){--li:1}
html.reveal [data-reveal="list"]>:nth-child(3){--li:2}
html.reveal [data-reveal="list"]>:nth-child(4){--li:3}
html.reveal [data-reveal="list"]>:nth-child(5){--li:4}
html.reveal [data-reveal="list"]>:nth-child(6){--li:5}
html.reveal [data-reveal="list"]>:nth-child(7){--li:6}
html.reveal .pin[data-reveal]{opacity:1;transform:rotate(var(--r,0deg))}
html.reveal [data-reveal]:not(.in) .pin .stk-in,html.reveal .pin[data-reveal]:not(.in) .stk-in{opacity:0}
html.reveal [data-reveal].in .pin .stk-in,html.reveal .pin[data-reveal].in .stk-in{animation:stick-on var(--t-4) var(--ease-stick) 200ms backwards}

/* ---------- Manifeste ---------- */
.manif{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px clamp(40px,7vw,120px);align-items:start}
.manif-head{position:sticky;top:130px}
.manif-txt{font-size:var(--fs-lead);line-height:1.5;color:var(--encre2);display:grid;gap:1.05em}
.manif-txt .big{font-size:var(--fs-h3);line-height:1.1;font-weight:800;letter-spacing:var(--ls-h3);color:var(--encre)}
.manif-txt .liste{color:var(--ardoise)}
.manif-quote{position:relative;margin-top:clamp(64px,8vw,110px);padding-top:40px;border-top:2px solid var(--encre);font-family:var(--serif);font-style:italic;font-size:var(--fs-serif-quote);line-height:var(--lh-serif);letter-spacing:var(--ls-serif);max-width:18ch}
.manif-quote .pin{left:calc(100% + 24px);top:30px}
.pin-amb{right:0;top:-70px}

/* ---------- Expertises (cartes) ---------- */
.xgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.xcard{grid-column:span 2;position:relative;display:flex;flex-direction:column;gap:20px;background:var(--papier);border:1px solid var(--givre);border-radius:30px;padding:26px 26px 28px;transition:transform var(--t-3) var(--ease-stick),box-shadow var(--t-3) var(--ease-out),border-color var(--t-2) var(--ease-out)}
.xcard:nth-child(n+4){grid-column:span 3}
/* focus clavier = même rendu que le survol (le lien étiré porte le focus) */
.xcard:hover,.xcard:has(a:focus-visible){transform:translateY(calc(-1 * var(--lift-2)));box-shadow:0 30px 60px -32px rgba(30,44,90,.45);border-color:var(--perv)}
.xcard:has(a:focus-visible){outline:3px solid var(--perv-f);outline-offset:4px}
.xcard h3 a:focus-visible{outline:none}
.xcard .num{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--ardoise)}
.xcard .num .go{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--nuage);color:var(--encre);font-size:18px;transition:transform var(--t-3) var(--ease-stick),background-color var(--t-2) var(--ease-out),color var(--t-2) var(--ease-out)}
.xcard:hover .num .go,.xcard:has(a:focus-visible) .num .go{background:var(--encre);color:#fff;transform:rotate(-45deg)}
.xcard h3 a{color:inherit;text-decoration:none}
.xcard h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.xcard p{color:var(--ardoise);font-size:16px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;list-style:none}
.tags li{font-size:var(--fs-tag);font-weight:700;padding:6px 11px;border-radius:999px;background:var(--nuage);color:var(--encre2)}
.tone-encre .tags li{background:var(--encre2);color:var(--nuage)}
.xcard .pin{top:-30px;right:20px}
.x-foot{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;margin-top:clamp(40px,5vw,64px)}
.x-foot p{font-family:var(--serif);font-style:italic;font-size:var(--fs-serif-lead);line-height:var(--lh-serif)}

/* Mini-interfaces (décoratives) */
.mui{position:relative;border-radius:20px;background:var(--nuage);border:1px solid var(--givre);padding:14px;font-size:12px;line-height:1.3;overflow:hidden;min-height:170px;color:var(--encre2)}
.mui b,.mui strong{color:var(--encre)}
/* 01 marque */
.m-brand{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-sw{display:flex;align-items:flex-end;height:96px;gap:0;grid-column:span 2}
.m-sw i{flex:1;height:100%;border-radius:14px;margin-left:-14px;box-shadow:-4px 0 10px -4px rgba(30,44,90,.25);transition:margin .45s var(--ease-spring),transform .45s var(--ease-spring);display:flex;align-items:flex-end;padding:8px 10px;font-style:normal;font-size:10px;font-weight:700}
.m-sw i:first-child{margin-left:0}
.m-sw i:nth-child(1){background:var(--encre);color:var(--nuage)}
.m-sw i:nth-child(2){background:var(--perv-f);color:#fff}
.m-sw i:nth-child(3){background:var(--peche);color:var(--encre)}
.m-sw i:nth-child(4){background:#fff;color:var(--encre)}
.xcard:hover .m-sw i{margin-left:6px}
.xcard:hover .m-sw i:first-child{margin-left:0}
.xcard:hover .m-sw i:nth-child(2){transform:translateY(-6px)}
.m-spec{background:#fff;border-radius:12px;padding:8px 10px;display:flex;align-items:baseline;gap:8px}
.m-spec b{font-size:34px;line-height:1;letter-spacing:-.05em}
.m-spec em{font-family:var(--serif);font-size:36px;line-height:1;color:var(--perv-f)}
.m-axis{background:#fff;border-radius:12px;padding:10px;display:grid;gap:8px;font-weight:700;font-size:10px}
.m-axis div{position:relative;height:6px;border-radius:3px;background:var(--givre)}
.m-axis div::after{content:"";position:absolute;top:50%;left:72%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--perv-f);box-shadow:0 0 0 3px #fff;transition:left .6s var(--ease-spring)}
.xcard:hover .m-axis div::after{left:86%}
.m-axis span{display:flex;justify-content:space-between;color:var(--ardoise)}
/* 02 web */
.m-browser{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px -6px rgba(30,44,90,.25)}
.m-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:var(--givre)}
.m-bar i{width:7px;height:7px;border-radius:50%;background:#fff}
.m-bar span{margin-left:8px;flex:1;background:#fff;border-radius:6px;font-size:10px;color:var(--ardoise);padding:2px 8px}
.m-page{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;padding:10px}
.m-hero{border-radius:10px;background:linear-gradient(160deg,var(--perv),var(--encre));background-size:100% 180%;background-position:0 0;color:#fff;padding:12px;min-height:110px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;transition:background-position .6s var(--ease-out)}
.xcard:hover .m-hero{background-position:0 100%}
.m-hero b{color:#fff;font-size:18px;line-height:.95;letter-spacing:-.04em}
.m-hero em{font-family:var(--serif);font-weight:400;font-size:20px}
.m-hero span{align-self:flex-start;background:var(--peche);color:var(--encre);border-radius:999px;padding:4px 10px;font-weight:700;font-size:10px}
.m-blocks{display:grid;gap:6px;align-content:start}
.m-blocks i{height:9px;border-radius:5px;background:var(--givre)}
.m-blocks i:nth-child(2){width:70%}
.m-blocks .card-i{height:40px;border-radius:8px;background:var(--nuage);border:1px dashed var(--perv)}
.m-cursor{position:absolute;right:26px;bottom:20px;width:22px;transition:transform .6s var(--ease-spring)}
.xcard:hover .m-cursor{transform:translate(-60px,-34px)}
/* 03 campagnes */
.m-ads{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-ad{background:#fff;border-radius:12px;padding:8px;display:grid;gap:6px;box-shadow:0 4px 14px -8px rgba(30,44,90,.3);transition:transform .45s var(--ease-spring)}
.m-ad small{font-size:9px;font-weight:700;color:var(--ardoise);display:flex;justify-content:space-between}
.m-ad .vis{height:54px;border-radius:8px;background:linear-gradient(135deg,var(--peche) 0 50%,var(--perv) 50%)}
.m-ad:nth-child(2) .vis{background:radial-gradient(circle at 70% 40%,var(--peche-cl) 0 22%,transparent 23%),var(--encre)}
.m-ad i{height:7px;border-radius:4px;background:var(--givre)}
.m-ad i+i{width:60%}
.xcard:hover .m-ad:first-child{transform:rotate(-3deg) translateY(-4px)}
.xcard:hover .m-ad:nth-child(2){transform:rotate(3deg) translateY(-4px)}
.m-bars{grid-column:span 2;background:#fff;border-radius:12px;padding:10px;display:flex;align-items:flex-end;gap:6px;height:66px}
.m-bars i{flex:1;border-radius:4px 4px 2px 2px;background:var(--nuage);height:var(--h);transition:height .6s var(--ease-spring)}
.m-bars i.on{background:var(--perv-f)}
.xcard:hover .m-bars i{height:calc(var(--h) + 12%)}
.xcard:hover .m-bars i.on{height:100%}
/* 04 contenu */
.m-feed{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.xcard .m-feed,.xp-vis .m-feed{grid-template-columns:repeat(3,1fr);max-width:300px}
.xcard:nth-child(n+4) .m-feed{grid-template-columns:repeat(6,1fr);max-width:none}
.m-feed i{aspect-ratio:4/5;border-radius:9px;background:var(--givre);position:relative;transition:transform .45s var(--ease-spring);font-style:normal}
.m-feed i:nth-child(1){background:linear-gradient(160deg,var(--encre2),var(--encre))}
.m-feed i:nth-child(2){background:var(--peche)}
.m-feed i:nth-child(3){background:linear-gradient(180deg,var(--perv),var(--perv-f))}
.m-feed i:nth-child(4){background:#fff}
.m-feed i:nth-child(5){background:linear-gradient(200deg,var(--peche-cl),var(--peche))}
.m-feed i:nth-child(6){background:var(--encre2)}
.m-feed i.play::after{content:"";position:absolute;left:50%;top:50%;margin:-8px 0 0 -5px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff}
.m-feed i.txt::after{content:"Aa";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--encre)}
.xcard:hover .m-feed i:nth-child(odd){transform:translateY(-5px)}
.xcard:hover .m-feed i:nth-child(even){transform:translateY(4px)}
.m-chip{margin-top:10px;display:flex;align-items:center;gap:8px;font-weight:700}
.m-chip b{background:var(--encre);color:#fff;border-radius:999px;padding:3px 9px;font-size:10px}
/* 05 automatisation */
.m-flow{display:grid;gap:10px}
.m-node{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:9px 12px;font-weight:700;box-shadow:0 4px 14px -8px rgba(30,44,90,.3)}
.m-node i{width:24px;height:24px;border-radius:8px;flex:none;background:var(--nuage);display:grid;place-items:center;font-style:normal;font-size:12px;color:var(--perv-f)}
.m-node:nth-child(2) i{background:var(--peche);color:var(--encre)}
.m-node:nth-child(3) i{background:var(--perv-f);color:#fff}
.m-node small{margin-left:auto;font-size:10px;color:var(--ardoise);font-weight:600}
.m-node+.m-node::before{content:"";position:absolute;left:23px;top:-11px;width:2px;height:11px;background:var(--perv)}
.m-node .dot{position:absolute;left:20px;top:-14px;width:8px;height:8px;border-radius:50%;background:var(--perv-f);opacity:0}
.xcard:hover .m-node .dot{animation:flowdot 1.4s var(--ease-out) infinite}
.xcard:hover .m-node:nth-child(3) .dot{animation-delay:.5s}
@keyframes flowdot{0%{opacity:0;transform:translateY(-6px)}30%{opacity:1}100%{opacity:0;transform:translateY(8px)}}
.m-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}

/* ---------- Ambitions ---------- */
.amb{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:50px clamp(40px,7vw,110px);align-items:end}
.amb .prose{font-size:var(--fs-lead);color:var(--sur-encre)}
.amb .prose strong{color:#fff;font-weight:700}
.amb-concl{margin-top:clamp(56px,7vw,96px);display:flex;flex-wrap:wrap;gap:28px 50px;align-items:center;justify-content:space-between;padding-top:36px;border-top:1px solid rgba(238,242,255,.18)}
.amb-concl p{font-size:var(--fs-h3);line-height:1.08;letter-spacing:var(--ls-h3);font-weight:800;max-width:24ch}
.amb-concl p em{font-family:var(--serif);font-weight:400;color:var(--peche)}
.scale{display:flex;align-items:flex-end;gap:clamp(8px,1.4vw,16px);margin-top:clamp(40px,5vw,60px)}
.scale span{display:grid;place-items:center;border-radius:50%;border:2px solid rgba(238,242,255,.35);font-weight:800;color:#fff;letter-spacing:-.03em;transition:transform var(--t-3) var(--ease-stick),background-color var(--t-2) var(--ease-out),border-color var(--t-2) var(--ease-out)}
.scale span:nth-child(1){width:54px;height:54px;font-size:15px}
.scale span:nth-child(2){width:78px;height:78px;font-size:19px}
.scale span:nth-child(3){width:110px;height:110px;font-size:25px}
.scale span:nth-child(4){width:150px;height:150px;font-size:34px;background:var(--peche);color:var(--encre);border-color:var(--peche)}
.scale:hover span{transform:translateY(-6px)}
.scale span:hover{background:var(--perv-f);border-color:var(--perv-f);color:#fff}
.scale-note{margin-top:14px;color:var(--sur-encre);font-family:var(--serif);font-style:italic;font-size:20px}

/* ---------- Méthode ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative;list-style:none;counter-reset:st}
.steps::before,.steps::after{content:"";position:absolute;left:0;right:0;top:38px;height:2px;background:var(--givre)}
.steps::after{background:var(--perv-f);transform-origin:left;transition:transform calc(var(--t-5) * 2) var(--ease-out) .2s}
html.reveal .steps:not(.in)::after{transform:scaleX(0)}
.step{position:relative;padding-top:80px}
.step .dot{position:absolute;top:24px;left:0;width:30px;height:30px;border-radius:50%;background:var(--brume);border:2px solid var(--perv-f);display:grid;place-items:center;transition:background-color .4s,transform .4s var(--ease-spring)}
.step .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--perv-f)}
.step:hover .dot{transform:scale(1.2);background:var(--peche)}
.step .n{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--perv-f)}
.step h3{font-size:var(--fs-h3);letter-spacing:var(--ls-h3);line-height:var(--lh-h3);margin:6px 0 16px}
.step p{color:var(--ardoise);font-size:17px;max-width:30ch}
.methode .pin{right:2%;top:-40px}
@media (max-width:1080px){.methode .pin{top:-96px}.pin-amb{top:-132px}.xcard .pin{top:-14px}}
@media (max-width:700px){.wrap.perso-wrap > .pin{top:-132px}}

/* ---------- Réalisations / étude de cas ---------- */
.case{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(50px,6vw,90px);align-items:center}
.stage{position:relative;padding:20px 4% 70px}
.laptop{position:relative;width:100%;transition:transform var(--t-4) var(--ease-out)}
.lap-screen{background:var(--encre);border-radius:20px 20px 6px 6px;padding:12px 12px 16px;box-shadow:0 40px 70px -30px rgba(30,44,90,.6)}
.lap-screen img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:8px;background:var(--encre2)}
.lap-base{height:16px;margin:0 -6%;background:linear-gradient(var(--givre),#C9D0E2);border-radius:0 0 18px 18px;position:relative}
.lap-base::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:16%;height:6px;background:#C9D0E2;border-radius:0 0 8px 8px}
.phone{position:absolute;width:clamp(96px,13vw,178px);aspect-ratio:9/19;background:var(--encre);border-radius:clamp(18px,2.2vw,30px);padding:clamp(5px,.55vw,8px);box-shadow:0 30px 50px -24px rgba(30,44,90,.6);transition:transform var(--t-4) var(--ease-stick)}
.phone .scr{width:100%;height:100%;border-radius:clamp(14px,1.8vw,23px);overflow:hidden;position:relative;background:#0f1733;display:flex;align-items:center}
.phone .scr::before{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);width:34%;height:10px;border-radius:999px;background:var(--encre);z-index:2}
.phone img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ph1{right:-2%;bottom:-2%;transform:rotate(7deg)}
.ph2{left:-3%;bottom:-8%;transform:rotate(-8deg);width:clamp(84px,11vw,150px)}
.case-stage:hover .ph1{transform:rotate(4deg) translateY(-10px)}
.case-stage:hover .ph2{transform:rotate(-5deg) translateY(-14px)}
.case-stage:hover .laptop{transform:translateY(-4px)}
.stage .pin{left:2%;top:-14px}
.case-label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--encre);color:#fff;padding:6px 12px;border-radius:999px;margin-bottom:18px}
.case h3{font-size:var(--fs-h2-sm);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.case h3 .sub{display:block;margin-top:10px;font-size:.5em;letter-spacing:-.03em;line-height:1.1;color:var(--encre2)}
.case h3 em.s{color:var(--perv-f)}
.case .tags{margin:22px 0 0}
.case .tags li{background:#fff}
.case p.desc{margin-top:20px;color:var(--ardoise);font-size:18px}
.case .btns{margin-top:30px}
.next{margin-top:clamp(56px,7vw,90px);display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:26px 30px;border-radius:28px;border:2px dashed rgba(76,92,212,.45);text-decoration:none;color:var(--encre);background:rgba(255,255,255,.55);transition:background-color var(--t-2) var(--ease-out),border-color var(--t-2) var(--ease-out),transform var(--t-3) var(--ease-stick)}
.next:focus-visible{outline-offset:4px}
.next:hover,.next:focus-visible{background:#fff;border-color:var(--perv-f);transform:translateY(-4px)}
.next .plus{width:58px;height:58px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-size:28px;font-weight:600;transition:transform .5s var(--ease-spring)}
.next:hover .plus,.next:focus-visible .plus{transform:rotate(90deg)}
.next strong{display:block;font-size:var(--fs-h4);letter-spacing:var(--ls-h3);line-height:1.05}
.next strong em{font-family:var(--serif);font-weight:400;color:var(--perv-f)}
.next span.small{display:block;color:var(--ardoise);font-size:15px;margin-top:4px}
.next .ar{font-size:26px;transition:transform .3s var(--ease-spring)}
.next:hover .ar,.next:focus-visible .ar{transform:translateX(6px)}

/* ---------- Personnalité ---------- */
.perso{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:clamp(40px,5vw,64px)}
.perso-card{position:relative;padding:clamp(26px,3vw,40px);border-radius:30px;background:var(--papier);border:1px solid var(--givre);font-size:var(--fs-lead);color:var(--encre2)}
.perso-card .sign{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:800;margin-bottom:20px;background:var(--peche);color:var(--encre)}
.perso-card.minus .sign{background:var(--nuage)}
.perso-end{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
.perso-end p{padding:clamp(26px,3vw,40px);border-radius:30px;font-size:var(--fs-h4);line-height:1.3;font-weight:700;letter-spacing:var(--ls-h4)}
.perso-end p:first-child{background:var(--encre);color:var(--nuage)}
.perso-end p:last-child{background:var(--peche);color:var(--encre);font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--fs-serif-lead);line-height:var(--lh-serif);letter-spacing:var(--ls-serif)}
.perso-wrap{position:relative}
.perso-wrap .pin{right:-10px;top:-46px}

/* ---------- CTA final ---------- */
.cta-final{position:relative;overflow:hidden;text-align:center;background:var(--encre);color:var(--nuage);padding:clamp(120px,15vw,210px) 0}
.cta-final .wrap{position:relative;z-index:2;pointer-events:none}
.cta-final .wrap a{pointer-events:auto}
.cta-final .h2{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);max-width:12ch;margin-inline:auto}
/* :not(.kicker) : le sur-titre garde sa taille d'eyebrow (bug de cascade corrigé) */
.cta-final p:not(.kicker){max-width:560px;margin:30px auto 0;color:var(--sur-encre);font-size:var(--fs-lead);line-height:var(--lh-lead)}
.cta-final p.racontez{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:var(--fs-serif-lead);line-height:var(--lh-serif);color:#fff}
.cta-final .btns{justify-content:center;margin-top:36px}
.cta-final .kicker{justify-content:center}

/* ---------- Pied de page signé Savoie (identique sur toutes les pages) ----------
   Aplat encre (contraste avec le CTA final pêche de l'accueil), slogan réduit (56–64 px) pour ne pas
   concurrencer le CTA final, heure locale « Savoie · HH:MM » (Europe/Paris, mise à jour en JS),
   wordmark négatif en signature. Cibles de liens ≥ 44 px. */
.foot{position:relative;background:var(--encre);color:var(--sur-encre);font-size:var(--fs-small);padding:clamp(64px,8vw,104px) 0 0;margin:clamp(8px,1.4vw,18px) clamp(8px,1.4vw,18px) 0;border-radius:var(--radius-panel) var(--radius-panel) 0 0;overflow:hidden}
.foot-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 40px;padding-bottom:clamp(40px,5vw,64px);border-bottom:1.5px solid rgba(238,242,255,.22)}
.foot-sign{font-size:var(--fs-foot-sign);line-height:.94;letter-spacing:var(--ls-h1);font-weight:800;color:#fff;font-variation-settings:var(--opsz-display);margin:0}
.foot-sign em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--serif-accent);line-height:.8;letter-spacing:var(--ls-serif);color:var(--peche)}
.foot-clock{display:flex;align-items:baseline;gap:10px;margin:0;color:var(--nuage);font-weight:700;font-size:15px;letter-spacing:.02em;white-space:nowrap}
.foot-clock::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--peche);box-shadow:0 0 0 4px rgba(244,214,207,.18);align-self:center}
.foot-clock time{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(28px,2vw + 16px,40px);line-height:1;letter-spacing:0;color:var(--peche);font-variant-numeric:tabular-nums}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:34px clamp(30px,5vw,80px);padding:clamp(36px,4vw,56px) 0}
.foot-id p{max-width:34ch;color:var(--sur-encre)}
.foot-id p+p{margin-top:8px}
.foot-id strong{display:block;color:#fff;font-size:var(--fs-h4);letter-spacing:var(--ls-h4);margin-bottom:6px}
.foot h2{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--peche);margin:0 0 6px;font-weight:700}
.foot ul{list-style:none;display:grid;gap:0}
.foot ul a{display:inline-flex;align-items:center;min-height:var(--hit);color:#fff;text-decoration:none;font-weight:600;font-size:16px}
.foot ul a:hover,.foot ul a:focus-visible{color:var(--peche)}
.foot-mark{display:block;width:min(100%,600px);height:auto;margin:0 0 clamp(18px,2vw,28px) -1%}
.foot-b{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding:18px 0 22px;border-top:1px solid rgba(238,242,255,.18);font-size:13px;color:var(--sur-encre)}
html:not(.js) .foot-clock{display:none}

/* ---------- Page Expertises ---------- */
.subnav{position:sticky;top:84px;z-index:20;margin-top:-28px}
.subnav ul{display:flex;gap:6px;list-style:none;overflow-x:auto;scrollbar-width:none;padding:6px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--givre);border-radius:999px;width:max-content;max-width:100%;margin-inline:auto;box-shadow:0 10px 30px -18px rgba(30,44,90,.35)}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:flex;align-items:center;min-height:var(--hit);white-space:nowrap;padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--encre2);font-weight:700;font-size:14px;transition:background-color var(--t-2) var(--ease-out),color var(--t-2) var(--ease-out)}
.subnav a:hover{background:var(--nuage)}
.subnav a.on{background:var(--encre);color:#fff}
.xp{padding:clamp(80px,10vw,140px) 0;border-bottom:1px solid var(--givre);scroll-margin-top:90px}
.xp:last-of-type{border-bottom:0}
.xp-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px clamp(40px,6vw,90px);align-items:start}
.xp-head .num{font-family:var(--serif);font-style:italic;font-size:clamp(48px, 30px + 4.6vw, 80px);line-height:1;color:var(--perv-f)}
.xp-head .h2{font-size:var(--fs-h2-sm);margin:8px 0 24px}
.xp-head .lede{color:var(--encre2)}
.xp-head .tags{margin-top:24px}
.xp-vis{position:relative}
.xp-vis .mui{min-height:220px;padding:18px;font-size:13px}
.xp-vis .pin{right:-12px;top:-36px}
.xp-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(40px,5vw,64px)}
.xp-col{background:var(--papier);border:1px solid var(--givre);border-radius:26px;padding:26px 26px 28px}
.xp-col h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--perv-f);margin-bottom:16px;font-weight:800}
.xp-col ul,.xp-col ol{list-style:none;display:grid;gap:12px;font-size:16px;color:var(--encre2)}
.xp-col ul li{position:relative;padding-left:22px}
.xp-col ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--peche);box-shadow:0 0 0 2px var(--encre)}
.xp-col ol{counter-reset:o}
.xp-col ol li{counter-increment:o;display:grid;grid-template-columns:30px 1fr;gap:4px}
.xp-col ol li::before{content:counter(o,decimal-leading-zero);font-family:var(--serif);font-style:italic;color:var(--perv-f);font-size:19px;line-height:1.3}
.xp-col ol li b{color:var(--encre)}
.xp-cta{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center;margin-top:30px}
.xp-cta p{color:var(--ardoise);font-size:16px}
.loop{margin-top:22px;background:var(--encre);color:var(--nuage);border-radius:30px;padding:clamp(26px,3vw,40px);position:relative;overflow:hidden}
.loop h3{font-size:var(--fs-h3);letter-spacing:var(--ls-h3);line-height:1.05;color:#fff}
.loop h3 em{font-family:var(--serif);font-weight:400;color:var(--peche)}
.loop>p{margin-top:10px;color:var(--sur-encre);max-width:62ch}
.loop ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px}
.loop li{position:relative;background:var(--encre2);border-radius:20px;padding:20px}
.loop li b{display:block;font-size:22px;letter-spacing:-.03em;color:#fff;margin-bottom:6px}
.loop li span{font-size:15px;color:var(--sur-encre);display:block}
.loop li:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:20px;width:24px;height:24px;border-radius:50%;background:var(--peche);color:var(--encre);display:grid;place-items:center;font-size:13px;font-weight:800;z-index:1}
.ia-note{margin-top:22px;padding:18px 22px;border-radius:20px;background:var(--nuage);color:var(--encre2);font-size:16px}
.ia-note b{color:var(--encre)}

/* ---------- Page Projets ---------- */
.plist{display:grid;gap:24px}
.pcard{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0;border-radius:36px;overflow:hidden;background:var(--encre);color:var(--nuage);text-decoration:none;transition:transform var(--t-3) var(--ease-stick),box-shadow var(--t-3) var(--ease-out)}
.pcard:focus-visible{outline-offset:5px}
.pcard:hover,.pcard:focus-visible{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(30,44,90,.7)}
.pcard .pc-vis{position:relative;min-height:420px;overflow:hidden}
.pcard .pc-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-5) var(--ease-out)}
.pcard:hover .pc-vis img,.pcard:focus-visible .pc-vis img{transform:scale(1.04)}
.pcard .pc-txt{padding:clamp(30px,4vw,56px);display:flex;flex-direction:column;gap:18px}
.pcard .pc-txt img.logo{width:min(260px,80%);height:auto}
.pcard h2{font-size:var(--fs-h2-sm);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);color:#fff}
.pcard h2 em{font-family:var(--serif);font-weight:400;color:var(--peche)}
.pcard p{color:var(--sur-encre)}
.pcard .tags li{background:var(--encre2);color:var(--nuage)}
.pcard .more{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--peche)}
.pcard .more .ar{transition:transform var(--t-3) var(--ease-stick)}
.pcard:hover .more .ar,.pcard:focus-visible .more .ar{transform:translateX(6px)}
.p-note{margin-top:28px;color:var(--ardoise);font-size:15px}

/* ---------- Étude de cas ---------- */
.cs-hero{background:var(--encre);color:var(--nuage);padding:clamp(150px,17vw,210px) 0 clamp(60px,7vw,90px);position:relative;overflow:hidden}
.cs-hero .crumbs,.cs-hero .crumbs a{color:var(--sur-encre)}
.cs-hero .h1{color:#fff;max-width:16ch}
.cs-hero .h1 em.s{color:var(--peche)}
.cs-hero .client-logo{width:min(320px,70%);height:auto;margin-bottom:30px}
.cs-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(238,242,255,.2)}
.cs-meta div{padding:18px 20px 0 0}
.cs-meta dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--peche);margin-bottom:6px}
.cs-meta dd{margin:0;font-weight:600;color:var(--nuage)}
.cs-cover{margin-top:clamp(-60px,-4vw,-30px);position:relative;z-index:2}
.cs-cover figure{margin:0;border-radius:var(--radius-panel);overflow:hidden;box-shadow:0 40px 80px -40px rgba(30,44,90,.6);background:var(--encre2)}
.cs-cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cs-block{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:30px clamp(40px,6vw,100px);padding:clamp(56px,7vw,96px) 0;border-bottom:1px solid var(--givre)}
.cs-block:last-child{border-bottom:0}
.cs-block .kicker{margin:0}
.cs-block .h3{margin-top:14px}
.cs-block .prose{font-size:var(--fs-lead);color:var(--encre2)}
.cs-livr{display:grid;gap:18px}
.cs-livr article{background:var(--papier);border:1px solid var(--givre);border-radius:26px;padding:24px 26px}
.cs-livr h3{font-size:24px;letter-spacing:-.035em}
.cs-livr p{margin-top:8px;color:var(--ardoise)}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.gallery figure{margin:0;border-radius:24px;overflow:hidden;background:var(--givre);position:relative}
.gallery figure img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-5) var(--ease-out)}
.gallery figure:hover img{transform:scale(1.03)}
.gallery figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);color:var(--encre);font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px}
.g-wide{grid-column:span 8}
.g-tall{grid-column:span 4}
.g-third{grid-column:span 4}
.g-logo{grid-column:span 12;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g-logo div{border-radius:24px;display:grid;place-items:center;padding:clamp(30px,5vw,70px)}
.g-logo div:first-child{background:#fff;border:1px solid var(--givre)}
.g-logo div:last-child{background:var(--encre)}
.g-logo img{width:min(420px,100%)}
.results{display:flex;gap:18px;align-items:center;padding:26px 30px;border-radius:26px;background:var(--peche-cl);border:1px solid var(--peche);color:var(--encre);font-weight:600}
.results .ic{width:46px;height:46px;flex:none;border-radius:50%;background:var(--encre);color:var(--peche);display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:24px}

/* ---------- Le studio ---------- */
.orbit{position:relative;aspect-ratio:1;width:min(520px,100%);margin-inline:auto}
.orbit::before,.orbit::after{content:"";position:absolute;border-radius:50%;border:1.5px dashed rgba(76,92,212,.4)}
.orbit::before{inset:6%}
.orbit::after{inset:24%}
.orbit .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36%;aspect-ratio:1;border-radius:50%;background:var(--encre);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:800;letter-spacing:-.03em;font-size:clamp(16px,2vw,22px);line-height:1.05;padding:10px;box-shadow:0 30px 50px -24px rgba(30,44,90,.6)}
.orbit .core em{display:block;font-family:var(--serif);font-weight:400;color:var(--peche);font-size:1.15em}
.orbit .sat{position:absolute;left:var(--ox);top:var(--oy);transform:translate(-50%,-50%);background:#fff;border:1px solid var(--givre);border-radius:999px;padding:8px 14px;font-size:clamp(12px,1.3vw,15px);font-weight:700;white-space:nowrap;box-shadow:0 10px 24px -14px rgba(30,44,90,.45);transition:transform var(--t-3) var(--ease-stick)}
.orbit .sat:hover{transform:translate(-50%,-50%) scale(1.08)}
.orbit .sat.alt{background:var(--peche)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pillar{background:var(--papier);border:1px solid var(--givre);border-radius:30px;padding:30px;transition:transform var(--t-3) var(--ease-stick),box-shadow var(--t-3) var(--ease-out)}
.pillar:hover,.pillar:has(a:focus-visible){transform:translateY(-5px);box-shadow:0 30px 50px -30px rgba(30,44,90,.4)}
.pillar .n{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--perv-f)}
.pillar h3{font-size:var(--fs-h3);letter-spacing:var(--ls-h3);line-height:var(--lh-h3);margin:8px 0 14px}
.pillar p{color:var(--ardoise)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,7vw,110px);align-items:center}
.nots{list-style:none;display:grid;gap:12px;margin-top:30px}
.nots li{display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(238,242,255,.18);font-size:var(--fs-h4);font-weight:700;letter-spacing:var(--ls-h4);color:#fff}
.nots li::before{content:"×";flex:none;width:34px;height:34px;border-radius:50%;background:var(--peche);color:var(--encre);display:grid;place-items:center;font-size:20px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:start}
.form-card{position:relative;background:var(--papier);border:1px solid var(--givre);border-radius:34px;padding:clamp(24px,4vw,48px);box-shadow:0 40px 80px -60px rgba(30,44,90,.5)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
.field{display:grid;gap:8px;align-content:start}
.field--full{grid-column:1/-1}
.field label{font-weight:700;font-size:15px;color:var(--encre)}
.field label .opt{font-weight:500;color:var(--ardoise)}
.field label .req{color:var(--perv-f)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:13px 16px;border-radius:16px;border:1.5px solid var(--bord-champ);background:var(--brume);font-size:16px;color:var(--encre);transition:border-color var(--t-2) var(--ease-out),box-shadow var(--t-2) var(--ease-out),background-color var(--t-2) var(--ease-out);appearance:none;-webkit-appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231E2C5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;cursor:pointer}
.field textarea{min-height:160px;resize:vertical;line-height:1.5}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--perv)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--perv-f);box-shadow:0 0 0 4px rgba(76,92,212,.18);background:#fff}
.field [aria-invalid="true"]{border-color:#B4233C;background:#fff}
.field .err{display:flex;gap:6px;align-items:flex-start;font-size:14px;font-weight:600;color:#B4233C}
.field .err:empty{display:none}
.field .err::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:#B4233C;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:1px}
.field .hint-t{font-size:13px;color:var(--ardoise)}
.form-foot{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between}
.form-foot p{font-size:13px;color:var(--ardoise);max-width:340px}
.form-status{margin-top:18px;font-weight:600}
.form-status:empty{display:none}
.form-status.err{padding:14px 18px;border-radius:16px;background:#FDECEF;color:#8E1B2F;border:1px solid #F3C2CB}
.hp-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.spin{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.done{text-align:center;padding:clamp(30px,5vw,60px) 10px}
.done[hidden]{display:none}
.done .ok{width:84px;height:84px;margin:0 auto 26px;border-radius:50%;background:var(--peche);display:grid;place-items:center}
.done .ok svg{width:40px}
.done h2{font-size:var(--fs-h2-sm);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.done h2 em{font-family:var(--serif);font-weight:400;color:var(--perv-f)}
.done p{margin:18px auto 0;color:var(--ardoise);max-width:420px}
.done .btns{justify-content:center;margin-top:26px}
.aside-steps{list-style:none;display:grid;gap:16px;counter-reset:a}
.aside-steps li{counter-increment:a;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:20px;border-radius:22px;background:rgba(255,255,255,.65);border:1px solid var(--givre)}
.aside-steps li::before{content:counter(a,decimal-leading-zero);width:44px;height:44px;border-radius:50%;background:var(--encre);color:var(--peche);display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:20px}
.aside-steps b{display:block;color:var(--encre);font-size:18px;letter-spacing:-.02em}
.aside-steps span{color:var(--ardoise);font-size:var(--fs-small)}
.demo-flag{display:inline-block;margin-bottom:16px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--peche);color:var(--encre);padding:5px 10px;border-radius:999px}

/* ---------- Pages légales ---------- */
.legal{padding:clamp(150px,17vw,200px) 0 clamp(80px,10vw,130px)}
.legal .h1{font-size:var(--fs-h2);margin-bottom:26px}
.legal .warn{margin:30px 0 50px;padding:18px 22px;border-radius:20px;background:var(--peche-cl);border:1px solid var(--peche);color:var(--encre);font-weight:600}
.legal h2{font-size:var(--fs-h4);letter-spacing:var(--ls-h3);margin:48px 0 14px}
.legal p,.legal li{color:var(--encre2)}
.legal ul{padding-left:20px;display:grid;gap:6px;margin-top:10px}
.legal dl{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:10px 20px;margin:0}
.legal dt{font-weight:700;color:var(--encre)}
.legal dd{margin:0;color:var(--encre2)}
.todo{background:var(--peche);color:var(--encre);font-weight:700;padding:1px 8px;border-radius:6px;font-style:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---------- 404 ---------- */
.e404{min-height:100svh;display:flex;align-items:center}
.e404 .big{font-size:clamp(110px,24vw,340px);line-height:.8;letter-spacing:-.07em;font-weight:800;color:var(--encre)}
.e404 .big em{font-family:var(--serif);font-weight:400;color:var(--perv-f)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:980px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav-cta,.nav-links+.nav-cta{margin-left:auto}
}
/* Palier tablette des stickers (701–1080 px) : positions --tx/--ty, échelle --tw (0,75 par défaut),
   .hide-t masque les stickers secondaires. Règle : aucun sticker sur un texte ou un CTA (contrôlé par
   _audit/lot1/overlap.py de 360 à 1600 px). */
@media (min-width:1081px){.stk.hide-d{display:none}}
@media (min-width:701px) and (max-width:1080px){.stk.hide-t{display:none}}
@media (min-width:701px) and (max-width:1080px){
  .board .stk{left:var(--tx,var(--x));top:var(--ty,var(--y));width:calc(var(--w) * var(--tw,.75))}
  .pin{width:calc(var(--w) * var(--tw,.8))}
}
@media (max-width:1080px){
  .xgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xcard,.xcard:nth-child(n+4){grid-column:span 1}
  .xcard:last-child{grid-column:span 2}
  .case{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
  .steps::before,.steps::after{display:none}
  .amb{grid-template-columns:minmax(0,1fr)}
  .xp-cols{grid-template-columns:1fr 1fr}
  .xp-cols .xp-col:last-child{grid-column:span 2}
  .loop ol{grid-template-columns:1fr 1fr}
  .loop li:nth-child(2)::after{display:none}
  .pillars{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .pcard{grid-template-columns:1fr}
  .pcard .pc-vis{min-height:300px}
}
@media (max-width:860px){
  .sec-head{grid-template-columns:1fr}
  .manif{grid-template-columns:1fr}
  .manif-head{position:static}
  .manif-quote .pin{left:auto;right:4px;top:auto;bottom:-128px}
  .xp-head{grid-template-columns:1fr}
  .cs-block{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .perso,.perso-end{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>:first-child{grid-column:span 2}
  .phero .board{width:100%;opacity:.95}
  .g-wide,.g-tall,.g-third{grid-column:span 12}
  .g-logo{grid-template-columns:1fr}
  .cs-meta{grid-template-columns:1fr}
  .legal dl{grid-template-columns:1fr;gap:2px 0}
  .legal dd{margin-bottom:12px}
}
@media (max-width:700px){
  .brand img{height:32px}
  .nav{padding:6px 6px 6px 12px;gap:8px}
  .nav-cta{padding:9px 13px;font-size:13px}
  .hero{min-height:max(100svh,760px);padding:170px 0 190px}
  .hero .overline{font-size:12px;letter-spacing:.06em;padding:7px 12px;margin-bottom:24px;border-radius:16px;text-wrap:balance;justify-content:center}
  .hero .overline::before{display:none}
  .hero .btns .btn{width:100%}
  .stk.hide-m{display:none}
  .board .stk{left:var(--mx,var(--x));top:var(--my,var(--y));width:calc(var(--w) * .58)}
  .pin{width:calc(var(--w) * .72)}
  .phero{padding-bottom:150px}
  .phero .board{top:auto;height:150px;bottom:0}
  .xgrid{grid-template-columns:1fr;gap:34px}
  .xcard,.xcard:nth-child(n+4),.xcard:last-child{grid-column:span 1}
  .steps{grid-template-columns:1fr}
  .step{padding-top:56px}
  .step .dot{top:10px}
  .stage{padding:30px 0 50px}
  .next{grid-template-columns:auto 1fr;padding:22px}
  .next .ar{display:none}
  .xp-cols{grid-template-columns:1fr}
  .xp-cols .xp-col:last-child{grid-column:span 1}
  .loop ol{grid-template-columns:1fr}
  .loop li::after{display:none!important}
  .fgrid{grid-template-columns:1fr}
  .form-foot .btn{width:100%}
  .hint{bottom:18px;font-size:12px}
  .scale span:nth-child(4){width:120px;height:120px;font-size:28px}
  .scale span:nth-child(3){width:92px;height:92px}
  .subnav{top:76px}
  .cs-cover{margin-top:0}
  .orbit .sat{padding:6px 10px}
  .btns .btn{flex:1 1 auto}
  .band-pause{right:8px}
  .foot-head{align-items:flex-start;flex-direction:column}
}
@media (max-width:400px){
  .brand img{height:28px}
  .nav-cta{padding:9px 12px;font-size:12.5px}
  .nav-cta .ar{display:none}
  .scale span:nth-child(1){width:44px;height:44px}
  .scale span:nth-child(2){width:62px;height:62px}
  .scale span:nth-child(3){width:80px;height:80px;font-size:21px}
  .scale span:nth-child(4){width:104px;height:104px;font-size:26px}
}

/* Mouvement réduit : rien ne se déplace, mais les fondus d'état (couleur, opacité, focus) restent
   (120 ms). animation-duration:1ms plutôt que none : les animationend se déclenchent toujours. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;
    transition-property:color,background-color,border-color,opacity,outline-color!important;
    transition-duration:var(--t-1)!important;transition-delay:0s!important;
    scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  [data-reveal]:not(.pin),.rise,.rise-t,.stk-in,.nav-panel,.nav-panel li{transform:none!important}
  html.reveal [data-reveal]:not(.pin),html.reveal [data-reveal]>*,html.reveal [data-reveal] .l{opacity:1;transform:none;clip-path:none}
  html.reveal .pin[data-reveal],html.reveal [data-reveal] .pin .stk-in{opacity:1}
  html.js .rise,html.js .board .stk-in{opacity:1!important}
  .band-track{animation:none!important;transform:none;flex-wrap:wrap;width:auto;justify-content:center;white-space:normal;padding-inline:var(--gutter)}
  .band-track>span{flex-wrap:wrap;justify-content:center}
  .band-track>span+span{display:none}
  .band-pause{display:none}
  .stk:hover,.pin:hover{--hov:0}
}
@media print{
  .nav,.nav-panel,.board,.pin,.hint,.band,.band-pause,.foot-clock,.skip{display:none!important}
  html.reveal [data-reveal],html.reveal [data-reveal]>*,html.reveal [data-reveal] .l,.rise,.rise-t{opacity:1!important;transform:none!important;clip-path:none!important}
  .foot{background:none;color:#000;margin:0}
  .foot *{color:#000!important}
  .foot-mark{display:none}
}