/* ==========================================================================
   CHANANEE — feuille globale
   Tokens, typographie, boutons, en-tete, menu mobile, pied de page,
   diagnostic. Extraite telle quelle de la maquette validee : aucune
   declaration n'a ete reecrite. Polices auto-hebergees (aucun appel
   vers fonts.googleapis.com ou fonts.gstatic.com).
   ========================================================================== */

/* --- polices auto-hebergees --- */
@font-face{font-family:'Instrument Serif';font-style:italic;font-display:swap;font-weight:400;src:url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-display:swap;font-weight:400;src:url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-display:swap;font-weight:400;src:url('../fonts/instrument-serif-latin-ext-400-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-display:swap;font-weight:400;src:url('../fonts/instrument-serif-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:400;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:500;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:600;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:400;src:url('../fonts/inter-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:500;src:url('../fonts/inter-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:600;src:url('../fonts/inter-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:400;src:url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:500;src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:600;src:url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:700;src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:400;src:url('../fonts/space-grotesk-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:500;src:url('../fonts/space-grotesk-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:600;src:url('../fonts/space-grotesk-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:700;src:url('../fonts/space-grotesk-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* --- utilitaires accessibilite --- */
/* L'attribut hidden doit toujours masquer. La feuille du navigateur ne lui
   donne qu'un display:none de faible priorite : n'importe quelle regle
   d'auteur portant un display (par exemple .msg-form{display:flex}) le
   neutralise sans bruit. Le formulaire de message de la page Contact restait
   ainsi affiche, bouton fige sur « Envoi… », alors que la demande etait bel
   et bien enregistree et que l'ecran de confirmation s'affichait plus bas,
   hors de la carte. Cette regle ferme la porte a toute cette famille de bugs. */
[hidden]{display:none !important;}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:#9A0B31;color:#fff;padding:12px 20px;font-family:'Space Grotesk',Arial,sans-serif;font-size:14px;text-decoration:none;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid #E45C8B;outline-offset:3px;}

/* --- styles globaux issus de la maquette --- */
html{scroll-behavior:smooth;}
:root{
    --noir:#0B0B0D;
    --surface-d:#121215;
    --card-d:#17171B;
    --line-d:#26262C;
    --blanc:#FFFFFF;
    --casse:#F6F4F0;
    --card-l:#FFFFFF;
    --line-l:#E5E1DA;
    --ink:#141416;
    --ink-2:#55555A;
    --ink-3:#8B8B90;
    --ink-d1:#F2F2F0;
    --ink-d2:#A8A8AE;
    --ink-d3:#6E6E75;
    --bdx:#9A0B31;
    --bdx-soft:rgba(154,11,49,.12);
    --disp:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
    --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
    --body:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
    --r:12px;
  }
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);background:var(--noir);color:var(--ink-d1);line-height:1.5;
    -webkit-font-smoothing:antialiased;}
.wrap{max-width:1200px;margin:0 auto;padding:0 48px;}
@media(max-width:720px){
.wrap{padding:0 22px;}
}
/* ---------- séparateurs de moments (méta, hors design) ---------- */
.moment-tag{background:#000;border-top:1px solid #1c1c20;border-bottom:1px solid #1c1c20;
    padding:10px 48px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:#5c5c63;
    font-family:var(--disp);}
.moment-tag b{color:#9a9aa2;}
/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;
    font-size:14.5px;padding:15px 28px;border-radius:100px;text-decoration:none;letter-spacing:.01em;
    transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s;}
.btn:hover{transform:translateY(-2px);}
.btn-bdx{background:var(--bdx);color:#fff;}
.btn-bdx:hover{background:#B01040;}
.btn-ghost-d{border:1px solid #3a3a41;color:var(--ink-d1);}
.btn-ghost-d:hover{border-color:#6a6a72;}
.btn-ghost-l{border:1px solid #cfcac2;color:var(--ink);}
.kicker{font-family:var(--disp);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;
    color:var(--ink-d3);}
.kicker .dot{color:var(--bdx);}
/* =========================================================
     MOMENT A — HERO
  ==========================================================*/
/* grille stratégique très discrète */
/* espace : champ d'étoiles en dérive lente derrière le titre */
/* preuve immédiate */
/* orientation : routeur de besoins */
/* fond stratégie : échiquier en perspective + Dame fantôme + trajectoire */
@keyframes qin{to{opacity:1;}}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes pop{to{opacity:.5;}}
nav.top{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;
    padding:26px 48px;}
nav.top .logo{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.12em;color:#fff;}
nav.top .logo em{font-family:var(--serif);font-style:italic;color:var(--bdx);font-size:19px;}
nav.top ul{display:flex;gap:32px;list-style:none;font-size:13.5px;color:var(--ink-d2);font-weight:500;}
nav.top ul li a{color:inherit;text-decoration:none;transition:color .25s;}
nav.top ul li{cursor:pointer;transition:color .25s;}
nav.top ul li:hover a{color:#fff;}
nav.top .mini{text-decoration:none;color:inherit;cursor:pointer;}
nav.top ul li:hover{color:#fff;}
nav.top .mini{font-family:var(--disp);font-size:13px;font-weight:600;color:#fff;
    border:1px solid #3a3a41;border-radius:100px;padding:10px 20px;}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;
    background:transparent;border:1px solid #3a3a41;border-radius:11px;cursor:pointer;flex:none;}
.burger span{display:block;position:relative;width:18px;height:1.6px;background:#fff;transition:background .3s;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.6px;
    background:#fff;transition:transform .3s,top .3s;}
.burger span::before{top:-6px;}
.burger span::after{top:6px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}
.mnav{position:fixed;inset:0;z-index:90;background:rgba(11,11,13,.97);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    display:flex;flex-direction:column;padding:96px 26px 40px;gap:2px;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .3s,transform .35s,visibility .3s;}
.mnav.open{opacity:1;visibility:visible;transform:none;}
.mnav a{font-family:var(--disp);font-size:22px;font-weight:600;letter-spacing:-.02em;
    color:var(--ink-d1);text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.mnav .mcta{margin-top:26px;border-bottom:none;}
.mnav .mclose{position:absolute;top:22px;right:22px;}
body.locked{overflow:hidden;}
@media(max-width:1080px){
nav.top ul{display:none;}
.burger{display:flex;}
nav.top .mini{display:none;}
}
@media(min-width:1081px){
.mnav{display:none;}
}
@keyframes strike{to{transform:rotate(-2deg) scaleX(1);}}
/* système qui s'assemble */
/* contenus vivants des modules latéraux */
/* CRM : mini-kanban avec vraies affaires */
@keyframes kmove{
    0%,20%{transform:translate(0,0);}
    30%{transform:translate(calc(50% + 4px),-9px);}
    38%,58%{transform:translate(calc(100% + 6px),0);}
    68%{transform:translate(calc(150% + 10px),-9px);}
    76%,92%{transform:translate(calc(200% + 12px),0);}
    100%{transform:translate(calc(200% + 12px),0);opacity:0;}
  }
/* Mobile : vrai mini-téléphone avec vraie mini-app */
@keyframes notif{6%,55%{opacity:1;transform:translateY(0);}0%,68%,100%{opacity:0;transform:translateY(-6px);}}
@keyframes pulseb{0%,100%{transform:scaleY(.75);}50%{transform:scaleY(1);}}
@keyframes iapulse{0%,100%{transform:scale(.8);opacity:.6;}50%{transform:scale(1.15);opacity:1;}}
@keyframes iatxt{0%{content:"Analyse des relances…";}33%{content:"5 clients prioritaires";}66%{content:"3 tâches créées ✓";}}
/* écran central premium */
@keyframes drawln{to{stroke-dashoffset:0;}}
/* fil d'activité */
@keyframes fin{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
@keyframes asm3d{from{opacity:0;transform:translateY(34px) scale(.96) rotateX(12deg);}
    to{opacity:1;transform:translateY(0) scale(1) rotateX(0);}}
@keyframes asm{to{opacity:1;transform:translateY(0) scale(1);}}
/* =========================================================
     MOMENT B — SOLUTION LAB (clair)
  ==========================================================*/
/* scroll normal : la section défile, on change de vue au clic */
/* ------ histoire au-dessus du dashboard ------ */
@keyframes stin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
/* ================= LAB V3 : vitrine holographique ================= */
/* aurora : nappes qui respirent */
@keyframes aur1{to{transform:translate(90px,60px) scale(1.15);}}
@keyframes aur2{to{transform:translate(-70px,-50px) scale(1.1);}}
@keyframes aur3{to{transform:translate(-60px,40px) scale(.92);}}
/* grain cinéma */
/* spotlight curseur */
/* sol brillant */
@keyframes ghin{from{opacity:0;letter-spacing:.12em;}to{opacity:1;letter-spacing:.02em;}}
/* panneau de verre */
/* liseré lumineux qui voyage (panneau principal = .beam) */
@keyframes beamspin{to{--angle:360deg;}}
@keyframes flyin{from{opacity:0;transform:var(--tf,none) translateY(52px) rotateY(-10deg);}
    to{opacity:1;transform:var(--tf,none) translateY(0);}}
@keyframes gfloat{0%,100%{transform:var(--tf,none) translateY(0);}50%{transform:var(--tf,none) translateY(-9px);}}
/* codes repris de la référence */
@keyframes dseg{from{stroke-dasharray:0 251;}to{stroke-dasharray:var(--seg) 251;}}
/* direction : un seul écran englobant, récap de toute l'entreprise */
/* fiche client */
/* parcours client (le chemin) */
/* avatars contacts */
/* rendez-vous */
/* dossiers */
@keyframes landin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes drawarc{to{stroke-dashoffset:0;}}
@keyframes dotin{from{opacity:0;transform:scale(0);}60%{transform:scale(1.5);}to{opacity:1;transform:scale(1);}}
@keyframes frring{0%{opacity:.9;transform:scale(1);}100%{opacity:0;transform:scale(3.4);}}
/* ------ dashboard sombre premium (même langage que le hero) ------ */
/* composants de scène */
@keyframes fadeup{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes drop{from{opacity:0;transform:translateY(-22px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes toast{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes ring{from{transform:scale(.6);opacity:1;}to{transform:scale(2.4);opacity:0;}}
@keyframes grow{to{transform:scaleX(var(--w,1));}}
@keyframes urgin{from{opacity:0;transform:translateY(-30px) scale(.95);}60%{transform:translateY(3px);}to{opacity:1;transform:none;}}
/* kanban commercial */
/* réseau */
/* service : planning */
/* direction */
/* =========================================================
     MOMENT C — CASE STUDY (sombre)
  ==========================================================*/
/* scroll normal : les chapitres se parcourent au clic */
/* deck aux couleurs de la marque cliente (Euro Pare-Brise+) : papier clair + magenta */
/* composants du dossier client en version claire */
/* texture papier + lueur */
/* icônes SVG trait */
/* lauriers */
/* voitures vitrage */
/* épingles carte plus nettes */
/* courbe de production */
/* ---- case study : compositions schématisées ---- */
/* ================= SECTIONS ACCUEIL : services / stack / growth ================= */
/* bento — ce que nous construisons */
@keyframes bin{from{opacity:0;transform:translateY(30px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes tglmove{0%,38%{transform:translateX(0)}50%,88%{transform:translateX(20px)}100%{transform:translateX(0)}}
@keyframes blinkx{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes crmmv{0%,20%{left:calc(6% + 7px);top:36px}
    34%,58%{left:calc(36.5% + 7px);top:56px}
    72%,96%{left:calc(67% + 7px);top:36px}100%{left:calc(67% + 7px);top:36px}}
@keyframes selp{0%,100%{box-shadow:0 0 0 0 rgba(228,92,127,.55)}50%{box-shadow:0 0 0 7px rgba(228,92,127,0)}}
@keyframes bgrow{0%,8%{transform:scaleY(.5)}42%,58%{transform:scaleY(1)}92%,100%{transform:scaleY(.5)}}
@keyframes sparkd{0%{stroke-dashoffset:260;opacity:1}40%{stroke-dashoffset:0}
    78%{stroke-dashoffset:0;opacity:1}86%{opacity:0}87%{stroke-dashoffset:260;opacity:0}
    95%,100%{stroke-dashoffset:260;opacity:1}}
@keyframes pind{0%,8%{transform:rotate(-45deg) translate(16px,-16px);opacity:0}
    22%,86%{transform:rotate(-45deg) translate(0,0);opacity:1}96%,100%{opacity:0}}
@keyframes ringx{0%,22%{transform:scale(.4);opacity:0}32%{opacity:.8}75%,100%{transform:scale(3.4);opacity:0}}
@keyframes bpop{0%,55%{transform:scale(1)}63%{transform:scale(1.5)}72%,100%{transform:scale(1)}}
@keyframes flyx{0%,44%{transform:translate(0,0) scale(1);opacity:0}50%{opacity:1}
    60%{transform:translate(48px,-10px) scale(.55);opacity:1}62%,100%{opacity:0}}
/* engagement — touche humaine */
/* briques — panneau */
@keyframes dotgo{0%{transform:translateX(0);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translateX(31px);opacity:0}}
/* étape 1 — visiteurs */
/* étape 2 — leads */
@keyframes typew{0%,12%{width:0}45%,100%{width:55%}}
@keyframes pressx{0%,68%{transform:scale(1)}76%{transform:scale(.93)}84%,100%{transform:scale(1)}}
/* étape 3 — rendez-vous */
/* étape 4 — clients */
/* reveals génériques */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);}
.reveal.in{opacity:1;transform:none;}
/* ================= MOBILE : hero + solution lab ================= */
@media(max-width:700px){
/* hero */
.btn{padding:13px 22px;font-size:13.5px;}
/* lab / vitrine */
}
@media (prefers-reduced-motion: reduce){
*{animation:none !important;transition:none !important;}
.reveal{opacity:1;transform:none;}
html{scroll-behavior:auto;}
}
/* ================= FOOTER ================= */
.ftr{background:var(--noir);border-top:1px solid #1d1d22;position:relative;overflow:hidden;}
.ftr-cta{max-width:1160px;margin:0 auto;padding:90px 24px 70px;text-align:center;position:relative;}
.ftr-cta::before{content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);
    width:760px;height:420px;background:radial-gradient(closest-side,rgba(154,11,49,.22),transparent 70%);
    filter:blur(30px);pointer-events:none;}
.ftr-cta h2{position:relative;font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:1.05;
    font-size:clamp(32px,4.4vw,54px);color:#fff;}
.ftr-cta h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:#E45C8B;}
.ftr-cta p{position:relative;margin:16px auto 0;max-width:560px;color:var(--ink-d2);font-size:16px;line-height:1.6;}
.ftr-cta .btn{margin-top:30px;}
.ftr-grid{max-width:1160px;margin:0 auto;padding:26px 24px 44px;display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;border-top:1px solid #1d1d22;}
.ftr-brand .lg{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;
    letter-spacing:.18em;font-size:15px;color:#fff;}
.ftr-brand .lg i{font-style:normal;color:#E45C8B;font-size:19px;}
.ftr-brand p{margin-top:14px;font-size:13px;color:var(--ink-d2);line-height:1.7;max-width:280px;}
.ftr-brand .loc{margin-top:16px;display:inline-flex;align-items:center;gap:7px;
    font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-d3);}
.ftr-brand .loc i{font-style:normal;width:7px;height:7px;border-radius:50%;
    background:#E45C7F;box-shadow:0 0 8px rgba(228,92,127,.8);}
.ftr-contact{margin-top:14px;display:flex;flex-direction:column;gap:6px;}
.ftr-contact a{font-family:var(--disp);font-size:13px;font-weight:600;color:var(--ink-d1);
    text-decoration:none;transition:color .25s;width:fit-content;}
.ftr-contact a:hover{color:#E45C8B;}
.ftr-grid h5{font-family:var(--disp);font-size:11px;letter-spacing:.2em;color:#E45C8B;font-weight:700;
    margin-bottom:16px;}
.ftr-grid ul{list-style:none;margin:0;padding:0;}
.ftr-grid li{margin-bottom:9px;}
.ftr-grid a{font-size:13px;color:var(--ink-d2);text-decoration:none;transition:color .25s;}
.ftr-grid a:hover{color:#fff;}
.ftr-seo{max-width:1160px;margin:0 auto;padding:0 24px 26px;}
.ftr-seo p{font-size:11.5px;color:#5a5a62;line-height:1.7;max-width:860px;}
.ftr-bar{border-top:1px solid #1d1d22;}
.ftr-bar .inb{max-width:1160px;margin:0 auto;padding:18px 24px;display:flex;flex-wrap:wrap;
    gap:10px 26px;align-items:center;justify-content:space-between;}
.ftr-bar span,.ftr-bar a{font-family:var(--disp);font-size:11.5px;color:var(--ink-d3);text-decoration:none;}
.ftr-bar a:hover{color:#fff;}
.ftr-bar .lks{display:flex;gap:22px;}
@media(max-width:900px){
.ftr-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
.ftr-grid{grid-template-columns:1fr;}
.ftr-bar .inb{justify-content:center;text-align:center;}
}
/* ================= FAQ ================= */
/* ================= CONFIANCE ================= */
/* ================= AVANT / APRÈS ================= */
/* ================= BUILD RUN GROW strip ================= */
/* ================= CONVERSION ================= */
/* témoignage — composant placeholder */
/* formulaire */
/* ===== MICRO-DIAGNOSTIC (tunnel unique) ===== */
@keyframes dgin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* modale */
.dgm{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;}
.dgm.open{display:flex;}
.dgm-veil{position:absolute;inset:0;background:rgba(6,6,8,.78);backdrop-filter:blur(6px);
    animation:dgfade .3s ease both;}
@keyframes dgfade{from{opacity:0}to{opacity:1}}
.dgm-panel{position:relative;width:min(560px,100%);max-height:calc(100vh - 48px);overflow:auto;
    background:linear-gradient(180deg,#131318,#0E0E12);border:1px solid #26262E;border-radius:18px;
    padding:26px 28px 24px;box-shadow:0 40px 110px rgba(0,0,0,.7),0 0 60px rgba(154,11,49,.10);
    animation:dgpop .38s cubic-bezier(.2,.8,.2,1) both;}
@keyframes dgpop{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.dgm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;}
.dgm-head .kick{font-family:var(--disp);font-size:10.5px;letter-spacing:.24em;color:#E45C8B;font-weight:700;}
.dgm-head p{margin-top:8px;font-size:13.5px;color:var(--ink-d2);line-height:1.55;max-width:38ch;}
.dgm-x{appearance:none;flex:none;width:32px;height:32px;border-radius:50%;cursor:pointer;
    border:1px solid #2A2A32;background:#16161B;color:var(--ink-d2);font-size:15px;line-height:1;
    transition:border-color .25s,color .25s;}
.dgm-x:hover{border-color:rgba(228,92,127,.5);color:#fff;}
.dgm-x:focus-visible{outline:2px solid #E45C7F;outline-offset:2px;}
body.dgm-lock{overflow:hidden;}
@media(max-width:560px){
.dgm{padding:0;align-items:flex-end;}
.dgm-panel{width:100%;max-height:92vh;border-radius:18px 18px 0 0;padding:22px 20px 20px;}
}
/* états techniques du tunnel (erreur, envoi, honeypot, mention légale) */
/* modale : clavier mobile — hauteur dynamique et bouton toujours atteignable */
@supports(height:100dvh){
.dgm-panel{max-height:calc(100dvh - 48px);}
@media(max-width:560px){
.dgm-panel{max-height:92dvh;}
}
}
.dgm-panel input:focus{scroll-margin-block:80px;}
/* visuel Automatisation & IA (carte 4) */
@keyframes atick{0%,12%{opacity:0;transform:scale(.6)}26%,84%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}
/* ===== SCENE 4 : parcours d'acquisition (premier clic -> client) ===== */
/* emplacements de logos : deposer les SVG officiels Stripe / PayPal ici */
/* CTA discret sous une démonstration */

/* --- marque Chananee -----------------------------------------------------
   Seule la hauteur est imposee : la largeur suit le rapport du fichier.
   Aucun etirement possible. La variante creme est utilisee sur les fonds
   sombres du site, ou la moitie sombre du logo serait invisible.        */
/* Specificite volontairement plus forte (nav.top a.logo) : le verrouillage
   de la marque doit survivre aux feuilles de page qui redefinissent
   « nav.top .logo » avec leur propre traitement typographique. */
nav.top a.logo{display:inline-flex;align-items:center;gap:11px;}
nav.top a.logo .mark{height:30px;width:auto;display:block;flex:none;}
nav.top a.logo > span{display:inline-block;}
.ftr-brand .lg .mark{height:28px;width:auto;display:block;flex:none;}
@media(max-width:1080px){ nav.top a.logo .mark{height:26px;} }
@media(max-width:520px){
  nav.top a.logo{gap:9px;}
  nav.top a.logo .mark{height:24px;}
}

/* ==========================================================================
   DIAGNOSTIC — composant global
   Le diagnostic est mutualisé : son gabarit (template-parts/diagnostic.php)
   et son script (diagnostic.js) sont chargés sur toutes les pages. Ses styles
   vivaient dans huit feuilles de page et manquaient sur Solutions et
   Réalisations, où la fenêtre s'affichait donc sans mise en forme. Ils sont
   désormais ici, une seule fois, pour tout le site.
   ========================================================================== */
.diag{display:flex;flex-direction:column;min-height:472px;}
/* Hote de l'instance en ligne : meme respiration sur toutes les pages qui
   l'affichent. La page Contact conserve ensuite son propre reglage. */
#diagInline{margin-top:22px;}
#diagInline .diag{min-height:450px;}
.diag-prog{height:2px;border-radius:2px;background:#24232B;overflow:hidden;flex:none;}
.diag-prog i{display:block;height:100%;width:25%;background:linear-gradient(90deg,#9A0B31,#E45C7F);
    transition:width .45s cubic-bezier(.2,.8,.2,1);}
.diag-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;flex:none;
    font-family:var(--disp);font-size:10.5px;letter-spacing:.16em;font-weight:700;color:var(--ink-d3);}
.diag-meta .dm-note{letter-spacing:.06em;font-weight:500;text-transform:none;color:var(--ink-d3);}
.diag-body{flex:1;display:flex;flex-direction:column;justify-content:flex-start;}
.diag-step{display:none;}
.diag-step.on{display:block;animation:dgin .34s cubic-bezier(.2,.8,.2,1) both;}
.diag h4{margin:18px 0 0;font-family:var(--disp);font-weight:700;font-size:19px;
    letter-spacing:-.02em;color:#fff;line-height:1.25;}
.diag h4 em{font-family:var(--serif);font-style:italic;font-weight:400;color:#E08BA4;}
.diag-opts{margin-top:16px;display:flex;flex-direction:column;gap:8px;}
.diag-opts button{appearance:none;width:100%;text-align:left;cursor:pointer;
    font-family:var(--disp);font-size:14px;font-weight:500;color:var(--ink-d1);
    padding:13px 16px;border-radius:11px;border:1px solid #26262E;background:#141419;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    transition:border-color .25s,background .25s,color .25s,transform .25s;}
.diag-opts button::after{content:"";width:7px;height:7px;border-right:1.5px solid #4A4A54;
    border-top:1.5px solid #4A4A54;transform:rotate(45deg);flex:none;transition:border-color .25s;}
.diag-opts button:hover{border-color:rgba(228,92,127,.45);background:#1A141A;transform:translateX(2px);}
.diag-opts button:hover::after{border-color:#E45C7F;}
.diag-opts button:focus-visible{outline:2px solid #E45C7F;outline-offset:2px;}
.diag-opts button[aria-pressed="true"]{border-color:rgba(228,92,127,.55);background:#1C1119;color:#fff;}
.diag-fields{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.diag-fields .dfull{grid-column:1/-1;}
.diag-fields label{display:block;font-family:var(--disp);font-size:10px;letter-spacing:.16em;
    font-weight:700;color:var(--ink-d3);margin-bottom:6px;}
.diag-fields label i{font-style:normal;letter-spacing:.02em;font-weight:500;text-transform:none;opacity:.8;}
.diag-fields input{width:100%;background:#101015;border:1px solid #26262E;border-radius:10px;
    padding:12px 14px;color:#fff;font-family:var(--body);font-size:14px;transition:border-color .25s;}
.diag-fields input::placeholder{color:#57575F;}
.diag-fields input:focus{outline:none;border-color:rgba(228,92,127,.55);}
.diag-send{margin-top:16px;width:100%;justify-content:center;}
.diag-recap{margin-top:14px;font-size:12px;color:var(--ink-d3);line-height:1.6;}
.diag-recap b{color:var(--ink-d2);font-weight:600;}
.diag-foot{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;}
.diag-back{appearance:none;background:none;border:0;cursor:pointer;padding:4px 0;
    font-family:var(--disp);font-size:12.5px;font-weight:600;color:var(--ink-d3);
    transition:color .25s;visibility:hidden;}
.diag-back:hover{color:#E45C7F;}
.diag-back:focus-visible{outline:2px solid #E45C7F;outline-offset:3px;}
.diag[data-step="1"] .diag-back,.diag[data-step="5"] .diag-back{visibility:hidden;}
.diag[data-step="2"] .diag-back,.diag[data-step="3"] .diag-back,
  .diag[data-step="4"] .diag-back{visibility:visible;}
.diag-trust{font-family:var(--disp);font-size:11px;color:var(--ink-d3);letter-spacing:.02em;}
.diag-done{text-align:center;padding-top:26px;}
.diag-done .dchk{width:46px;height:46px;border-radius:50%;margin:0 auto;
    border:1px solid rgba(228,92,127,.45);background:rgba(154,11,49,.14);
    display:flex;align-items:center;justify-content:center;color:#E45C7F;font-size:20px;}
.diag-done h4{margin-top:16px;}
.diag-done p{margin-top:10px;font-size:13.5px;color:var(--ink-d2);line-height:1.65;}
.diag-extra{margin-top:22px;padding-top:18px;border-top:1px solid #22222A;text-align:left;}
.diag-extra .dx-k{font-family:var(--disp);font-size:10px;letter-spacing:.16em;font-weight:700;color:var(--ink-d3);}
.diag-extra p{margin-top:6px;font-size:13px;color:var(--ink-d2);}
.diag-extra .diag-opts{margin-top:12px;}
.diag-extra .diag-opts button{padding:10px 14px;font-size:13px;}
.diag-skip{margin-top:12px;font-family:var(--disp);font-size:12px;color:var(--ink-d3);
    background:none;border:0;cursor:pointer;padding:2px 0;}
.diag-skip:hover{color:#E45C7F;}
.diag-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.diag-send[disabled]{opacity:.6;cursor:progress;}
.diag-err{margin-top:14px;padding:12px 14px;border-radius:10px;
    border:1px solid rgba(228,92,127,.4);background:rgba(154,11,49,.10);}
.diag-err .de-msg{margin:0;font-size:13px;color:#F0C8D4;line-height:1.55;}
.diag-retry{appearance:none;margin-top:10px;cursor:pointer;font-family:var(--disp);
    font-size:12.5px;font-weight:700;color:#fff;padding:7px 14px;border-radius:100px;
    border:1px solid rgba(228,92,127,.55);background:rgba(154,11,49,.28);
    transition:background .25s;}
.diag-retry:hover{background:rgba(154,11,49,.5);}
.diag-retry:focus-visible{outline:2px solid #E45C7F;outline-offset:2px;}
.diag-err .de-fallback{display:block;margin-top:9px;font-size:11.5px;color:var(--ink-d3);}
.diag-err .de-fallback a{color:var(--ink-d2);}
.diag-legal{margin-top:12px;font-size:11px;line-height:1.55;color:var(--ink-d3);}
.diag-legal a{color:var(--ink-d3);text-decoration:underline;text-underline-offset:2px;}
.diag-legal a:hover{color:#E45C8B;}
.diag-budget-msg{margin-top:10px;font-size:12.5px;color:var(--ink-d2);}
.diag-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.diag-form{position:relative;}
@media(max-width:560px){
.diag-fields{grid-template-columns:1fr;}
.diag{min-height:0;}
}
@media(prefers-reduced-motion:reduce){
.diag-step.on,.dgm-panel,.dgm-veil{animation:none;}
.diag-opts button:hover{transform:none;}
}