/* ─────────────────────────────────────────────
   KINONE v8 — direction artistique
   Papier (fond du logo) × Encre profonde × Cuivre
   Signature : le curseur du logo prend vie.
   ───────────────────────────────────────────── */
@font-face{font-family:'Bricolage';src:url('../fonts/BricolageGrotesque-Variable.woff2') format('woff2');font-weight:200 800;font-display:swap;}
@font-face{font-family:'Figtree';src:url('../fonts/Figtree-Variable.woff2') format('woff2');font-weight:300 900;font-display:swap;}

:root{
  --paper:#f2f3f5;
  --paper2:#e9ebef;
  --ink:#0f1322;          /* encre profonde — sections sombres */
  --ink2:#151a2e;
  --ink-card:#1a2038;
  --ink-line:rgba(240,242,248,.09);
  --ink-line2:rgba(240,242,248,.16);
  --txt:#1e2235;          /* texte sur papier */
  --body:#414659;
  --dim:#535a70;
  --mute:#646b80;
  --w:#f4f5f9;            /* texte sur encre */
  --w-dim:rgba(230,233,242,.76);
  --w-mute:rgba(230,233,242,.52);
  /* --copper : le cuivre de marque, pour les aplats, degrades et lisereaux. */
  /* --copper-txt : le meme, assombri juste ce qu il faut pour du TEXTE sur
     fond clair. Le cuivre de marque plafonne a 4,10:1 et ne passe pas. */
  --copper:#c2551f;--copper-txt:#b54d1b;       /* cuivre sur papier */
  --copper-hi:#e0703a;    /* cuivre sur encre */
  --copper-soft:rgba(194,85,31,.08);
  --line:#e2e4ea;
  --line2:#d3d6df;
  --ok:#2e9e63;
  --fd:'Bricolage',system-ui,sans-serif;
  --fb:'Figtree',system-ui,sans-serif;
  --fp:'Bricolage',system-ui,sans-serif;        /* labels : la même voix que les titres */
  --mw:84rem;
  --px:clamp(1.25rem,5vw,3rem);
  --nh:5rem;
  --grad-copper:linear-gradient(120deg,#e0703a 0%,#c2551f 55%,#a8441a 100%);
  --grad-copper-txt:linear-gradient(105deg,#d4652f 0%,#c2551f 60%,#e0703a 100%);
  --e-out:cubic-bezier(.19,1,.22,1);   /* expo out — la courbe maison */
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-back:cubic-bezier(.34,1.56,.64,1);
  /* Reflet en calque de fond — toujours derrière le texte */
--gloss:linear-gradient(118deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.22) 24%,rgba(255,255,255,0) 50%);
  --sh-md:0 1px 3px rgba(15,19,34,.05),0 16px 40px -16px rgba(15,19,34,.18);
  --sh-lg:0 2px 6px rgba(15,19,34,.06),0 32px 80px -24px rgba(15,19,34,.25);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* Racine fluide, façon Apple : le texte courant plafonne à 18px.
   Ce sont les TITRES qui portent l'échelle (voir .htitle / .st),
   pas le corps de texte. 16px @375 · 17.1px @1280 · 18px @1920+ */
html{font-size:clamp(1rem,.95rem + .15vw,1.125rem);scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--fb);background:var(--paper);color:var(--txt);line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
ul{list-style:none;}
::selection{background:var(--copper);color:#fff;}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:2px;}
.skip{position:absolute;top:-9rem;left:1rem;z-index:9999;padding:.5rem 1rem;background:var(--ink);color:#fff;border-radius:.5rem;font-weight:700;transition:top .2s;}
.skip:focus{top:1rem;}
.wrap{max-width:var(--mw);margin-inline:auto;padding-inline:var(--px);}

/* ── Chorégraphie ── */
@keyframes lineUp{to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes press{0%{transform:scale(1)}35%{transform:scale(.955)}100%{transform:scale(1)}}
/* Titres révélés ligne par ligne, sous masque */
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
.line>span{display:block;transform:translateY(112%);animation:lineUp 1s var(--e-out) var(--d,0s) both;}
.fu{opacity:1;transform:none;}
.js .fu{opacity:0;animation:fadeUp .9s var(--e-out) var(--d,0s) both;}
/* Apparition au scroll */
/* Regle "echouer en visible" : sans JS, tout est affiche. */
.rv{opacity:1;transform:none;}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--e-out) var(--d,0s),transform .8s var(--e-out) var(--d,0s);}
.js .rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none;}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;}
  .rv,.fu{opacity:1;transform:none;}
  .line>span{transform:none;}
  [data-parallax]{transform:none!important;}
}

/* ── Nav ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:500;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent;}
#nav.sc{background:rgba(242,243,245,.86);backdrop-filter:blur(34px) saturate(2);border-color:rgba(255,255,255,.65);-webkit-backdrop-filter:blur(34px) saturate(2);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 38px -12px rgba(15,19,34,.16);}
.nav-i{display:flex;align-items:center;justify-content:space-between;height:var(--nh);}
.logo-img{height:3.5rem;width:auto;display:block;transition:filter .4s;}
.logo-txt{font-family:var(--fd);font-size:1.25rem;font-weight:700;letter-spacing:-.02em;display:none;}
.logo-img.broken{display:none;}.logo-img.broken+.logo-txt{display:block;}
.nav-links{display:flex;align-items:center;gap:2.125rem;}
.nav-links>li>a:not(.nav-cta){font-size:.9375rem;font-weight:500;color:var(--body);position:relative;}
.nav-links>li>a:not(.nav-cta)::after{content:'';position:absolute;left:0;bottom:-4px;width:100%;height:1.5px;background:var(--txt);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-out);}
.nav-links>li>a:not(.nav-cta):hover{color:var(--txt);}
.nav-links>li>a:not(.nav-cta):hover::after{transform:scaleX(1);transform-origin:left;}
/* white-space + flex:0 0 auto : un libelle de bouton ne se replie JAMAIS.
   Sans ca, la pilule etait un element flexible que rien n'empechait de
   retrecir, donc son texte cassait sur 2 lignes a 1152px et 3 a 1024px
   (mesure le 31/08/2026). Ce n'etait pas un manque de place : c'est la
   pilule qui cedait avant la barre. */
.nav-cta{padding:.5938rem 1.3125rem;background:var(--txt);color:#fff!important;font-size:.9375rem;font-weight:600;border-radius:9999px;transition:background .25s;white-space:nowrap;flex:0 0 auto;}
.nav-cta:hover{background:var(--copper);}
/* Nav sur héro sombre : écritures claires tant qu'on n'a pas scrollé */
#nav.over-dark:not(.sc) .nav-links>li>a:not(.nav-cta){color:rgba(228,231,240,.78);}
#nav.over-dark:not(.sc) .nav-links>li>a:not(.nav-cta):hover{color:#fff;}
#nav.over-dark:not(.sc) .nav-links>li>a:not(.nav-cta)::after{background:var(--paper);}
#nav.over-dark:not(.sc) .nav-cta{background:var(--paper);color:var(--ink)!important;}
#nav.over-dark:not(.sc) .nav-cta:hover{background:var(--copper-hi);color:#fff!important;}
/* Sur le héro sombre : le logo passe en blanc plein, la découpe
   alpha fait le travail. Plus besoin de le masquer. */
#nav.over-dark:not(.sc) .logo-img{filter:brightness(0) invert(1);}

/* Recherche */
.nav-search{width:2.5rem;height:2.5rem;border-radius:9999px;border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--txt);transition:border-color .25s,color .25s;}
.nav-search:hover{border-color:var(--txt);}
.nav-search svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#nav.over-dark:not(.sc) .nav-search{color:#fff;border-color:rgba(228,231,240,.3);}
.srch{display:none;position:fixed;inset:0;background:rgba(15,19,34,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:750;justify-content:center;align-items:flex-start;padding:12vh var(--px) 2rem;}
.srch.open{display:flex;}
.srch-box{width:100%;max-width:34rem;background:var(--gloss),rgba(244,245,247,.9);backdrop-filter:blur(40px) saturate(2);-webkit-backdrop-filter:blur(40px) saturate(2);border:1px solid rgba(255,255,255,.75);border-radius:1.25rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),var(--sh-lg);overflow:hidden;animation:fadeUp .35s var(--e-out) both;}
.srch-bar{display:flex;align-items:center;gap:.875rem;padding:1.0625rem 1.25rem;border-bottom:1px solid rgba(30,34,53,.08);}
.srch-bar svg{width:1.125rem;height:1.125rem;stroke:var(--dim);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.srch-bar input{flex:1;border:none;background:none;outline:none;font-family:var(--fb);font-size:1.125rem;color:var(--txt);}
.srch-bar input::placeholder{color:var(--mute);}
.srch-esc{font-family:var(--fp);font-size:.6875rem;color:var(--mute);border:1px solid var(--line2);border-radius:.375rem;padding:.25rem .5rem;font-weight:700;}
.srch-res{max-height:50vh;overflow-y:auto;padding:.5rem;}
.srch-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:.8125rem 1rem;border-radius:.75rem;font-weight:600;font-size:1.0313rem;color:var(--txt);text-align:left;transition:background .15s;}
.srch-row:hover,.srch-row.sel{background:rgba(255,255,255,.85);}
.srch-row small{font-family:var(--fp);font-size:.6875rem;color:var(--copper);text-transform:uppercase;white-space:nowrap;font-weight:700;letter-spacing:.08em;}
.srch-empty{padding:1.25rem;text-align:center;color:var(--mute);font-size:1rem;}
/* Dropdowns */
.has-dd{position:relative;}
.has-dd>a{display:inline-flex;align-items:center;gap:.375rem;}
.has-dd>a::before{content:'';width:.3125rem;height:.3125rem;background:var(--copper);opacity:0;transition:opacity .25s;}
.has-dd:hover>a::before,.has-dd:focus-within>a::before{opacity:1;}
.dd{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);min-width:17.5rem;background:var(--gloss),rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.8);border-radius:1rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--sh-lg);padding:.5rem;opacity:0;visibility:hidden;transition:opacity .25s var(--e-out),transform .3s var(--e-out),visibility .25s;z-index:20;backdrop-filter:blur(36px) saturate(2);-webkit-backdrop-filter:blur(36px) saturate(2);}
.dd::before{content:'';position:absolute;top:-.875rem;left:0;right:0;height:.875rem;}
.has-dd:hover .dd,.has-dd:focus-within .dd{opacity:1;visibility:visible;transform:translate(-50%,4px);}
/* Fermeture forcée après un clic sur une option : tant que .dd-dismissed
   La classe est retirée dès que la souris quitte la zone (mouseleave). */
.has-dd.dd-dismissed .dd{opacity:0!important;visibility:hidden!important;}
.dd a,.dd button{display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem;width:100%;padding:.6875rem .875rem;border-radius:.625rem;font-size:1rem;font-weight:600;color:var(--txt);text-align:left;transition:background .2s;}
.dd a:hover,.dd button:hover{background:var(--paper);}
.dd a{white-space:nowrap;}
/* Ancres des trois cartes d'offres, atteintes depuis le déroulant d'une autre page : le
   navigateur saute nativement, la barre fixe recouvrirait le haut de la carte. */
@media (min-width:1100px){#f-vitrine,#f-pro,#f-sur{scroll-margin-top:calc(var(--nh) + 1rem);}}
.dd a[aria-current]{color:var(--copper-txt);}
.dd a::after{display:none;}
.dd small{font-family:var(--fb);font-size:.875rem;font-weight:600;color:var(--dim);white-space:nowrap;}
.dd .dd-all{border-top:1px solid var(--line);border-radius:0 0 .625rem .625rem;margin-top:.25rem;color:var(--copper);font-size:.8438rem;}

#mob{display:none;position:fixed;inset:var(--nh) 0 0;background:rgba(15,19,34,.94);color:var(--w);padding:1.75rem var(--px) 2rem;flex-direction:column;z-index:490;overflow-y:auto;backdrop-filter:blur(32px) saturate(1.6);-webkit-backdrop-filter:blur(32px) saturate(1.6);}
#mob.open{display:flex;}
.mob-links{display:flex;flex-direction:column;}
.mob-links a{display:flex;align-items:baseline;gap:1rem;font-family:var(--fd);font-size:1.625rem;font-weight:700;letter-spacing:-.015em;color:var(--w);padding:.9375rem 0;border-bottom:1px solid var(--ink-line);opacity:0;transform:translateY(14px);}
#mob.open .mob-links a{animation:fadeUp .55s var(--e-out) both;}
#mob.open .mob-links a:nth-child(1){animation-delay:.04s}#mob.open .mob-links a:nth-child(2){animation-delay:.09s}#mob.open .mob-links a:nth-child(3){animation-delay:.14s}#mob.open .mob-links a:nth-child(4){animation-delay:.19s}#mob.open .mob-links a:nth-child(5){animation-delay:.24s}#mob.open .mob-links a:nth-child(6){animation-delay:.29s}
.mob-links a em{font-family:var(--fp);font-style:normal;font-size:.8125rem;color:var(--copper-hi);font-weight:700;}
.mob-foot{margin-top:auto;padding-top:1.75rem;opacity:0;}
#mob.open .mob-foot{animation:fadeUp .55s var(--e-out) .34s both;}

.mob-call{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:1.0625rem;border-radius:9999px;background:var(--copper-hi);color:#fff;font-family:var(--fd);font-size:1.125rem;font-weight:700;margin-bottom:.625rem;}
.mob-call svg{width:1.125rem;height:1.125rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.mob-mail{display:block;text-align:center;padding:.9375rem;border-radius:9999px;border:1px solid var(--ink-line2);color:var(--w-dim);font-weight:600;font-size:.9375rem;margin-bottom:.625rem;}

/* ── Boutons ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.625rem;padding:1rem 2.125rem;border-radius:9999px;font-size:1.0625rem;font-weight:600;letter-spacing:.005em;overflow:hidden;transition:color .35s var(--e-io);isolation:isolate;white-space:nowrap;}
.btn svg{width:.9375rem;height:.9375rem;stroke:currentColor;fill:none;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--e-out);}
.btn:hover svg{transform:translateX(3px);}
/* remplissage circulaire au survol */
.btn::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--fill,var(--grad-copper));transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--e-out);z-index:-1;}
.btn:hover::before{transform:scaleY(1);}
.btn-ink{background:var(--txt);color:#fff;}
.btn-ink:hover{color:#fff;}
.btn-copper{background:var(--copper);color:#fff;}
.btn-copper:hover{color:#fff;background:var(--copper-hi);}
.btn-ghost{border:1.5px solid var(--line2);color:var(--txt);--fill:var(--txt);}
.btn-ghost:hover{color:#fff;border-color:var(--txt);}
.btn-paper{background:var(--paper);color:var(--ink);--fill:var(--copper-hi);}
.btn-paper:hover{color:#fff;}
.btn.pressed{animation:press .4s var(--e-io);}

/* ── Héro — papier, grille de pixels vivante ── */
/* Le héro tient dans un écran, pilules et curseur compris.
   min-height (pas height) : il s'étire si le contenu déborde. */
#hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:calc(var(--nh) + 1.5rem) 0 2rem;overflow:hidden;}
#hero>.wrap{width:100%;position:relative;}   /* l'acteur et ses halos se posent dessus */
#hero::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 55% at 82% 8%,rgba(224,112,58,.09),transparent 70%),radial-gradient(45% 40% at 8% 92%,rgba(30,34,53,.05),transparent 70%);pointer-events:none;}
.pixcv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
@media(max-width:767px){#hero{background:var(--paper);}}
/* Tout le heros a video a ete retire : la balise .hero-video, la bascule a
   l encre (.neg), la carte de secours (.novid) et ses .hc-*. Aucune de ces
   classes n existait plus dans le HTML. Le heros est desormais une image
   fixe (fonds/hero-v2.webp) et un visuel qui monte. */
.hero-g{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:2.75rem;align-items:center;}

.hkick{display:inline-flex;align-items:center;gap:.6875rem;font-family:var(--fp);font-size:.9375rem;font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);margin-bottom:2rem;}
.hkick::before{content:'';width:.5rem;height:.5rem;background:var(--copper);box-shadow:.75rem 0 0 rgba(194,85,31,.45),1.5rem 0 0 rgba(194,85,31,.18);margin-right:1.25rem;}
.htitle{font-family:var(--fd);font-size:clamp(2.75rem,7.2vw,5.75rem);font-weight:700;line-height:1;letter-spacing:-.028em;margin-bottom:1.75rem;}
.htitle .accent{background:var(--grad-copper-txt);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hsub{font-size:clamp(1.0625rem,1.6vw,1.3125rem);color:var(--body);line-height:1.72;max-width:33rem;margin-bottom:2.5rem;}
.hsub strong{color:var(--txt);font-weight:600;}
.hctas{display:flex;flex-wrap:wrap;gap:.9375rem;align-items:center;position:relative;}

/* Le curseur du logo, acteur du héro */
#cursor-actor{position:absolute;z-index:5;width:30px;height:30px;pointer-events:none;opacity:0;filter:drop-shadow(0 4px 10px rgba(15,19,34,.35));will-change:transform;}
/* La flèche (souris) est l'acteur sur TOUS les appareils, mobile compris. */
@media(pointer:coarse){
  #cursor-actor{width:34px;height:34px;}
}
/* halo de tap qui pulse quand le doigt "appuie" */
.tap-ring{position:absolute;z-index:4;width:14px;height:14px;border-radius:50%;border:2px solid var(--copper);pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.3);}
.tap-ring.go{animation:tapRing .6s var(--e-out) forwards;}
@keyframes tapRing{0%{opacity:.7;transform:translate(-50%,-50%) scale(.3);}100%{opacity:0;transform:translate(-50%,-50%) scale(3.2);}}
/* Panneau logo */

/* Portables peu hauts : le héro se resserre au lieu de déborder. */
@media(min-width:768px) and (max-height:820px){
  .hkick{margin-bottom:1.25rem;}
  .htitle{font-size:clamp(2.25rem,5.6vw,4.375rem);margin-bottom:1.25rem;}
  .hsub{font-size:1.0625rem;margin-bottom:1.75rem;}
}
@media(min-width:768px) and (max-height:700px){
  .hkick{margin-bottom:.875rem;font-size:.8125rem;}
  .htitle{font-size:clamp(2rem,4.6vw,3.5rem);margin-bottom:1rem;}
  .hsub{margin-bottom:1.25rem;line-height:1.6;}
  #hero .btn{padding:.875rem 1.75rem;}
}

/* ── Sections communes ── */
.sec{position:relative;padding-block:clamp(5rem,10vw,8.5rem);overflow:hidden;}
.sec>.wrap{position:relative;z-index:1;}
.sec-ink{background:radial-gradient(120% 80% at 88% -10%,#1d2442 0%,var(--ink) 52%),var(--ink);color:var(--w);}

.shead{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem 2.5rem;margin-bottom:clamp(2.75rem,5vw,4.25rem);}
.shead>.sidx{grid-column:1/-1;margin-bottom:0;}
@media (min-width:980px){
  .shead{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:end;}
  .shead>h1,.shead>h2{grid-column:1;margin:0;}
  .shead>p{grid-column:2;margin:0;align-self:end;}
}
.sidx{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.125rem;font-family:var(--fp);font-size:.9375rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);}
.st{font-family:var(--fd);font-size:clamp(2rem,4.4vw,3.625rem);font-weight:700;letter-spacing:-.022em;line-height:1.06;}
.sd{color:var(--body);font-size:1.1875rem;line-height:1.75;max-width:30rem;}
.sec-ink .sd{color:var(--w-dim);}

/* ── Nos sites réalisés : l'avis du client d'abord ── */
#realisations{position:relative;}
/* Carrousel horizontal : une réalisation à la fois, on passe à la
   suivante de droite à gauche (flèches + points + glissé tactile). */

/* Flèches de navigation */

/* Points de progression */

/* L'AVIS : la star */

/* La vignette : petite, propre */

/* La capture s'affiche en entier (comme sur mobile). aspect-ratio
   sur le ratio réel des exports + object-fit:cover = zéro rognage. */

/* Desktop : chaque carte en format horizontal avis|capture,
   dans le carrousel. */
@media(min-width:900px){
  /* Chaque carte : avis à gauche, capture à droite. */
  
  
  
  
  
}
/* Mobile / tablette : flèches plus petites, ancrées dans les coins de la
   zone capture pour ne pas déborder de l'écran. */

/* ── Votre métier — tuiles visuelles ── */
.sect-tiles{display:grid;grid-template-columns:1fr;gap:1.125rem;margin-bottom:1.75rem;}
@media(min-width:560px){.sect-tiles{grid-template-columns:repeat(2,1fr);}}
/* 8 tuiles : 2 ou 4 colonnes, jamais 3 (sinon rangée bancale). */
@media(min-width:1040px){.sect-tiles{grid-template-columns:repeat(4,1fr);gap:1.375rem;}}

@media (max-width:899px){ footer{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important;} }

#contact .ct-lbl{color:rgba(244,243,238,.62);}
#contact .ct-val{color:var(--w);}
#contact .ct-item{border-bottom-color:rgba(244,243,238,.16);}

#contact .sd{color:rgba(244,243,238,.75);}
#contact .fnote{color:rgba(244,243,238,.6);}

/* coin pixel cuivre sur la tuile active */

/* Modal métier */
.sov{display:none;position:fixed;inset:0;background:rgba(15,19,34,.62);backdrop-filter:blur(8px);z-index:700;align-items:flex-end;justify-content:center;}
@media(min-width:700px){.sov{align-items:center;padding:var(--px);}}
.sov.open{display:flex;}

.sov-x{position:absolute;top:.9375rem;right:.9375rem;width:2.25rem;height:2.25rem;border-radius:9999px;color:var(--txt);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);border:1px solid var(--line);z-index:2;}
.sov-x svg{width:.9375rem;height:.9375rem;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;}
.sect-note{margin-top:1.5rem;font-size:1rem;color:var(--dim);}

/* ── Pourquoi KINONE — section simple : le titre puis l'unique
   témoignage (Custom Coding). Le relais de deux bulles a été retiré. ── */
.why-sec{background:var(--paper);}
.why-head{margin-bottom:clamp(2rem,4vw,3.25rem);}
/* le bloc contraste, désormais dans sa propre section */
/* Message prioritaire : le plus gros titre du site. */
.why-head .st.big{font-size:clamp(2.5rem,5.5vw,4.75rem);line-height:1.04;letter-spacing:-.03em;}
.why-head .sidx{margin-bottom:1rem;}

/* ── Témoignage : l'avatar entre, la bulle s'ouvre ── */
.why-testi{display:flex;align-items:flex-start;gap:clamp(1rem,2.5vw,1.75rem);max-width:56rem;}
/* Grand espace : le contraste (agence vs KINONE) n'apparaît qu'APRÈS
   qu'on a quitté les bulles d'avis. Les bulles occupent l'écran seules,
   puis on scrolle et le contraste entre en scène. */

.testi-av{flex-shrink:0;width:clamp(3.5rem,7vw,4.75rem);height:clamp(3.5rem,7vw,4.75rem);border-radius:50%;background:var(--ink);border:2px solid var(--copper);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -10px rgba(194,85,31,.5);}
.testi-av svg{width:58%;height:58%;stroke:var(--copper-hi);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.testi-deck{position:relative;flex:1;min-width:0;}
.testi-bubble{position:relative;background:var(--gloss),rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.8);border-radius:.375rem 1.25rem 1.25rem 1.25rem;padding:clamp(1.375rem,2.5vw,1.75rem) clamp(1.375rem,2.7vw,2rem);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),var(--sh-md);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);}
.testi-bubble::before{content:'';position:absolute;top:1.5rem;left:-.5rem;width:1rem;height:1rem;background:inherit;border-left:1px solid rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.8);transform:rotate(45deg);}
.tb-1{opacity:1;transform:none;transition:opacity .55s var(--e-out),transform .6s var(--e-back);}
.testi-quote{font-family:var(--fd);font-weight:700;font-size:clamp(1.25rem,2.85vw,2.1875rem);line-height:1.22;letter-spacing:-.02em;color:var(--txt);}
.testi-quote b{color:var(--copper);}
.testi-quote mark{background:linear-gradient(transparent 58%,rgba(194,85,31,.24) 58%);color:inherit;padding:0 .1em;}
.testi-who{display:flex;align-items:center;gap:1rem;margin-top:clamp(1.125rem,2.2vw,1.625rem);}
.testi-logo{height:2.75rem;width:auto;flex-shrink:0;}
.testi-logo-dark{height:3.25rem;border-radius:.625rem;border:1px solid var(--line);box-shadow:var(--sh-md);}
.testi-id{display:flex;flex-direction:column;line-height:1.3;}
.testi-id b{font-family:var(--fd);font-size:1.1875rem;color:var(--txt);letter-spacing:-.01em;}
.testi-id em{font-style:normal;font-size:.9375rem;color:var(--dim);}

.vs-col{border-radius:1.25rem;padding:clamp(1.25rem,2.5vw,1.75rem) clamp(1.375rem,2.8vw,2rem);}
.vs-them{background:rgba(15,19,34,.035);border:1px solid var(--line);}
.vs-us{background:var(--ink);color:var(--w);box-shadow:var(--sh-lg);display:flex;flex-direction:column;}
.vs-lbl{font-family:var(--fp);font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem;display:inline-flex;align-items:center;gap:.5rem;}
.vs-ico{width:1.25rem;height:1.25rem;flex-shrink:0;fill:currentColor;}
.vs-lbl-bad{color:#a8475f;}
.vs-lbl-good{color:var(--copper-hi);}
.vs-strike{font-family:var(--fd);font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:700;letter-spacing:-.025em;color:var(--dim);line-height:1.1;position:relative;display:inline-block;}
.vs-strike span{font-size:.6em;font-weight:600;color:var(--mute);}
.vs-total{margin-top:.5rem;font-family:var(--fb);font-size:1.0625rem;font-weight:600;color:var(--dim);position:relative;display:inline-block;}
.vs-total b{color:var(--body);font-weight:700;}
.vs-total::after{content:'';position:absolute;left:-.05em;right:-.05em;top:52%;height:.11em;background:#b3402e;border-radius:9999px;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e-out) .15s;}
/* Le trait se dessine au scroll : « ce coût, on l'efface ». */
.vs-strike::after{content:'';position:absolute;left:-.05em;right:-.05em;top:52%;height:.14em;background:#b3402e;border-radius:9999px;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e-out);}
.vs-price{font-family:var(--fd);font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:700;letter-spacing:-.025em;color:var(--copper-hi);line-height:1.1;}
.vs-price small{display:block;font-family:var(--fd);font-size:1.0625rem;font-weight:700;color:#fff;margin-top:.625rem;letter-spacing:0;}
.vs-sub{margin-top:.875rem;font-size:1rem;line-height:1.6;color:var(--body);}
.vs-us .vs-sub{color:var(--w-dim);}
.vs-cta{margin-top:auto;align-self:flex-start;}
.vs-us .vs-cta{margin-top:1.5rem;}
@media(max-width:640px){
  .why-head .st.big{font-size:clamp(2rem,7vw,2.75rem);}
  .why-testi{flex-direction:column;gap:.875rem;}
  .testi-bubble{border-radius:1.25rem;}
  .testi-bubble::before{display:none;}
  .testi-who{flex-wrap:wrap;gap:.75rem;}
}

/* ── Fenêtre express « Lancer mon projet » ── */
.dx-box{background:var(--gloss),rgba(244,245,247,.92);border-radius:1.25rem;padding:2.25rem;max-width:27rem;width:100%;position:relative;box-shadow:var(--sh-lg);animation:fadeUp .4s var(--e-out) both;max-height:92svh;overflow-y:auto;backdrop-filter:blur(40px) saturate(2);-webkit-backdrop-filter:blur(40px) saturate(2);border:1px solid rgba(255,255,255,.75);}
.dx-t{font-family:var(--fd);font-size:1.5625rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.375rem;}
.dx-s{font-size:.9688rem;color:var(--dim);margin-bottom:1.375rem;}
.dx-chip{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;border-radius:.875rem;background:linear-gradient(155deg,#1a2140 0%,var(--ink) 62%);color:var(--w);margin-bottom:1.125rem;}
.dx-chip-f{font-family:var(--fd);font-weight:700;font-size:1.1875rem;}
.dx-chip-f small{display:block;font-family:var(--fb);font-weight:500;font-size:.75rem;color:var(--w-dim);margin-top:.125rem;}
.dx-chip-p{font-family:var(--fd);font-size:2rem;font-weight:700;white-space:nowrap;letter-spacing:-.02em;}
.dx-chip-p sup{font-size:.8125rem;color:var(--w-mute);}
.dx-opt{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 0 1.125rem;cursor:pointer;}
.dx-opt .est-check{border-color:var(--line2);}
.dx-opt.on .est-check{background:var(--grad-copper);border-color:var(--copper);}
.dx-opt-t{font-size:.9688rem;font-weight:600;color:var(--txt);}
.dx-opt-t b{color:var(--copper);}
.dx-opt-d{font-size:.875rem;color:var(--dim);margin-top:.125rem;}
.dx-alt{display:block;text-align:center;margin-top:1rem;font-size:.9063rem;color:var(--dim);text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:none;width:100%;}
.dx-alt:hover{color:var(--copper);}

/* Numéro pixel en filigrane */

/* Motif pixel décoratif propre à chaque carte */

/* ── Estimateur — papier ── */

/* Base mobile : une colonne. Les media queries qui suivent doivent
   impérativement rester APRÈS cette règle (même spécificité). */
.plans{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:stretch;}
.plan[data-plan="signature"]{border-color:var(--copper);box-shadow:0 22px 55px -22px rgba(194,85,31,.35);}
/* Desktop : les 3 formules côte à côte, de gauche à droite. */
@media(min-width:960px){
  .plans{grid-template-columns:repeat(3,1fr);gap:1.375rem;}
  .plan{padding:1.875rem 1.75rem;}
  .plan[data-plan="signature"]{transform:scale(1.035);z-index:1;}
  .plan[data-plan="signature"]:hover{transform:scale(1.035) translateY(-4px);}
}
.plan{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:1.125rem;padding:1.75rem 1.875rem;cursor:pointer;transition:border-color .3s,box-shadow .3s,transform .3s var(--e-out);}
.plan:hover{border-color:var(--line2);transform:translateY(-2px);}
.plan.on{border-color:var(--txt);box-shadow:var(--sh-lg);}

/* Panneau récapitulatif */
/* Option remise */

.est-check{width:1.25rem;height:1.25rem;border-radius:.375rem;border:1.5px solid var(--ink-line2);flex-shrink:0;margin-top:.14rem;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s;}
.est-check svg{width:.75rem;height:.75rem;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--e-out);}

/* ── À propos — encre ── */
.about-g{display:grid;gap:3rem;grid-template-columns:1fr;align-items:center;}
@media(min-width:900px){.about-g{grid-template-columns:5fr 7fr;gap:5rem;}}
.about-card{background:var(--paper);color:var(--txt);border-radius:1.25rem;padding:clamp(2rem,3.5vw,2.75rem);box-shadow:var(--sh-lg);}
.about-photo{position:relative;border-radius:.875rem;overflow:hidden;margin-bottom:1.625rem;aspect-ratio:4/4.4;cursor:pointer;}
.about-photo img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e-out);}
.about-photo:hover img{transform:scale(1.06);}
.about-hello{position:absolute;inset:0;display:flex;align-items:flex-end;padding:1.375rem;background:linear-gradient(180deg,transparent 35%,rgba(15,19,34,.82) 100%);opacity:0;transition:opacity .45s;}
.about-photo:hover .about-hello{opacity:1;}
.about-hello p{color:#fff;font-family:var(--fd);font-weight:600;font-size:1.125rem;line-height:1.5;transform:translateY(12px);transition:transform .55s var(--e-out);margin:0;}
.about-photo:hover .about-hello p{transform:none;}
.about-hello p em{font-style:normal;font-family:var(--fp);font-size:.625rem;display:block;margin-top:.5rem;color:var(--copper-hi);letter-spacing:.04em;}
.about-photo::after{content:'';position:absolute;bottom:.875rem;right:.875rem;width:.5625rem;height:.5625rem;background:var(--copper);box-shadow:-.8438rem 0 0 rgba(194,85,31,.55),0 -.8438rem 0 rgba(194,85,31,.55),-.8438rem -.8438rem 0 rgba(194,85,31,.22);}
.about-logo{height:2.125rem;width:auto;margin-bottom:1.375rem;}
.about-sig{font-family:var(--fd);font-size:1.8125rem;font-weight:600;letter-spacing:-.02em;margin-bottom:.2rem;}
.about-role{font-size:.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-txt);margin-bottom:1.375rem;}
.about-card blockquote{font-size:1.0625rem;color:var(--body);line-height:1.8;border-left:2px solid var(--copper);padding-left:1.25rem;}
.about-txt .st{color:var(--w);margin-bottom:1.375rem;}
.about-txt p{color:var(--w-dim);font-size:1.125rem;line-height:1.85;margin-bottom:1.25rem;}
.about-txt p strong{color:var(--w);font-weight:600;}
.about-pills{display:flex;flex-wrap:wrap;gap:.5625rem;margin-top:1.5rem;}
.pill{padding:.4688rem 1.0625rem;border-radius:9999px;border:1px solid rgba(255,255,255,.22);font-size:.9375rem;font-weight:600;color:var(--w);transition:border-color .25s,color .25s;background:rgba(255,255,255,.09);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);}
.pill:hover{border-color:var(--copper-hi);color:var(--copper-hi);}

/* ── Contact — papier ── */

/* Piege des grilles, corrige le 31/08/2026 : un enfant de grille a
   min-width:auto, donc la colonne ne peut pas devenir plus etroite que le
   contenu le plus rigide qu elle porte. Ici, la largeur intrinseque des
   champs du formulaire imposait une colonne de 350 px dans une zone de
   320 : toute la page contact debordait de 10 px a 360. Le width:100% des
   champs ne suffit PAS, c est le min-width qui decide. */

.fg input,.fg select,.fg textarea{min-width:0;max-width:100%;}
.ct-val{min-width:0;overflow-wrap:anywhere;}
@media (max-width:420px){.ct-item{gap:1rem;}}

.ct-item{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;padding:1.1875rem 0;border-bottom:1px solid var(--line);}
.ct-lbl{font-size:.9063rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);}
.ct-val{font-weight:600;color:var(--txt);text-align:right;}
.ct-val a{position:relative;}
.ct-val a::after{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;background:var(--copper);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--e-out);}
.ct-val a:hover::after{transform:scaleX(1);transform-origin:left;}

.fg{margin-bottom:1.125rem;}
.fg label{display:block;font-size:.9375rem;font-weight:600;color:var(--txt);margin-bottom:.4375rem;}
.fg input,.fg textarea,.fg select{width:100%;padding:.8125rem 1rem;background:var(--paper);border:1.5px solid transparent;border-radius:.6875rem;color:var(--txt);font-family:var(--fb);font-size:1.0313rem;transition:border-color .25s,background .25s;outline:none;-webkit-appearance:none;appearance:none;}
.fg select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236d7289' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;}
.fg input::placeholder,.fg textarea::placeholder{color:var(--mute);}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--copper);background:#fff;}
.fg textarea{resize:vertical;min-height:7.25rem;line-height:1.65;}
.fsub{width:100%;margin-top:.375rem;}
.fnote{text-align:center;color:var(--mute);font-size:.9063rem;margin-top:.9375rem;}

/* ── Footer — encre ── */
footer{background:var(--ink);color:var(--w-dim);padding-block:clamp(3rem,6vw,4.5rem) 0;border-top:1px solid var(--ink-line);}
.ft-top{display:grid;grid-template-columns:1fr;gap:2.75rem;padding-bottom:clamp(2.5rem,5vw,3.5rem);}
@media(min-width:720px){.ft-top{grid-template-columns:1fr 1fr;gap:3rem 2rem;}}
@media(min-width:980px){.ft-top{grid-template-columns:1.6fr 1fr 1.2fr;gap:2.5rem;}}
.ft-brand{max-width:26rem;}
.ft-logo-img{height:2.75rem;width:auto;display:block;margin-bottom:1.25rem;}
.ft-logo{font-family:var(--fd);font-size:1.625rem;font-weight:700;color:var(--w);letter-spacing:.01em;display:block;margin-bottom:1.25rem;}
.ft-tag{font-size:1rem;line-height:1.65;color:var(--w-dim);margin-bottom:1.5rem;}
.ft-cta{padding:.8125rem 1.5rem;font-size:.9688rem;}
.ft-h{font-family:var(--fp);font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--w-mute);margin-bottom:1.25rem;}
.ft-col{display:flex;flex-direction:column;gap:.875rem;align-items:flex-start;}
.ft-col a{color:var(--w-dim);font-size:1rem;font-weight:500;transition:color .2s;}
.ft-col a:hover{color:var(--copper-hi);}
.ft-contact{display:flex;align-items:center;gap:.875rem;}
.ft-contact svg{flex-shrink:0;width:1.375rem;height:1.375rem;stroke:var(--copper-hi);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.ft-contact span{display:flex;flex-direction:column;line-height:1.3;}
.ft-contact b{font-family:var(--fd);font-size:1.0625rem;font-weight:700;color:var(--w);letter-spacing:-.01em;transition:color .2s;}
.ft-contact:hover b{color:var(--copper-hi);}
.ft-contact em{font-style:normal;font-size:.8125rem;color:var(--w-mute);font-weight:500;}
.ft-loc{display:flex;align-items:center;gap:.875rem;color:var(--w-dim);font-size:.9375rem;line-height:1.4;}
.ft-loc svg{flex-shrink:0;width:1.375rem;height:1.375rem;stroke:var(--w-mute);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.ft-bar{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;padding-block:1.75rem;border-top:1px solid var(--ink-line);}
@media(min-width:640px){.ft-bar{flex-direction:row;justify-content:space-between;text-align:left;}}
.ft-copy{font-size:.875rem;color:var(--w-mute);}
.ft-legal{display:flex;gap:1.5rem;}
.ft-legal a{color:var(--w-mute);font-size:.875rem;font-weight:500;transition:color .2s;}
.ft-legal a:hover{color:var(--copper-hi);}

/* ── Modal ── */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(15,19,34,.6);backdrop-filter:blur(8px);z-index:700;align-items:center;justify-content:center;padding:var(--px);}
.modal-ov.open{display:flex;}
.mbox{background:var(--gloss),rgba(244,245,247,.92);border-radius:1.25rem;padding:2.5rem;max-width:25rem;width:100%;text-align:center;position:relative;box-shadow:var(--sh-lg);animation:fadeUp .4s var(--e-out) both;backdrop-filter:blur(40px) saturate(2);-webkit-backdrop-filter:blur(40px) saturate(2);border:1px solid rgba(255,255,255,.75);}
.m-ico{width:3.5rem;height:3.5rem;border-radius:50%;background:rgba(46,158,99,.09);border:1px solid rgba(46,158,99,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 1.125rem;}
.m-ico svg{width:1.5rem;height:1.5rem;stroke:var(--ok);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.mbox h3{font-family:var(--fd);font-size:1.5625rem;font-weight:600;letter-spacing:-.02em;margin-bottom:.625rem;}
.mbox p{color:var(--body);line-height:1.7;margin-bottom:1.625rem;font-size:1.0625rem;}
.m-x{position:absolute;top:.875rem;right:.875rem;width:2rem;height:2rem;border-radius:.5rem;color:var(--mute);display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s;}
.m-x:hover{color:var(--txt);background:var(--paper);}
.m-x svg{width:.9375rem;height:.9375rem;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;}

@media(max-width:767px){
  :root{--nh:4.75rem;}.logo-img{height:2.625rem;}
  
}
/* La bascule vers le menu compact etait a 767px, alors que la barre
   complete ne respire pas sous 1024px : a 900 et 960, le logo touchait
   exactement la premiere entree (mesure : 0px d'ecart). Seuil porte a
   1023px. 1024 est une largeur de reference (tablette en paysage, petit
   portable) et la barre y garde 42px d'air entre logo et liens. */
@media(max-width:1023px){
  .nav-links{display:none;}
}
@media(max-width:480px){.hctas .btn{width:100%;}}
/* ── Reflet du verre ──
   Il était posé en ::after : peint APRÈS les enfants, donc par-dessus
   background : même rendu, mais toujours derrière le contenu. */
.srch-box{position:relative;}

/* ── EN-TETE DE PAGE (multipage) ───────────────────────────── */

/* (v84) Le bloc « NAV sur page à bandeau sombre » (body.dark-top) est retiré :
   aucune page ne porte cette classe, et il contenait deux sélecteurs orphelins. */

/* ── PAGE OFFRES ───────────────────────────────────────────── */
.off-grid{display:grid;gap:1.5rem;grid-template-columns:1fr;align-items:stretch;}
@media (min-width:900px){.off-grid{max-width:34rem;margin-inline:auto;gap:1.75rem;}}
@media (min-width:1100px){.off-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem;
  max-width:none;margin-inline:0;}}
@media (min-width:1400px){.off-grid{gap:1.625rem;}}
.off-card{position:relative;background:#fff;border:1.5px solid var(--line);
  border-radius:1.375rem;padding:clamp(1.75rem,2.6vw,2.5rem);
  box-shadow:0 1px 2px rgba(15,19,34,.04),0 18px 48px -22px rgba(15,19,34,.16);}
.off-card--pro{border-color:var(--copper);
  box-shadow:0 1px 2px rgba(15,19,34,.04),0 24px 60px -22px rgba(194,85,31,.32);}
.off-tag{position:absolute;top:-.8125rem;left:clamp(1.75rem,2.6vw,2.5rem);
  background:var(--grad-copper);color:#fff;font-size:.75rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:.375rem .8125rem;border-radius:999px;}
.off-n{font-family:var(--fd);font-size:1.625rem;font-weight:700;letter-spacing:-.02em;color:var(--txt);}
.off-for{margin-top:.4375rem;font-size:1.0625rem;line-height:1.5;color:var(--copper);font-weight:600;}
.off-p{margin-top:1.125rem;display:flex;align-items:baseline;gap:.4375rem;}
.off-p b{font-family:var(--fd);font-size:clamp(2.75rem,5vw,3.5rem);font-weight:700;
  letter-spacing:-.03em;line-height:1;color:var(--txt);}
.off-p span{font-size:1rem;font-weight:600;color:var(--mute);}
.off-d{margin-top:1rem;font-size:1.0125rem;line-height:1.68;color:var(--body);}
.off-l{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
  list-style:none;display:grid;gap:.8125rem;}
.off-l li{position:relative;padding-left:1.75rem;font-size:1rem;line-height:1.55;color:var(--body);}
.off-l li::before{content:'';position:absolute;left:0;top:.5rem;width:.6875rem;height:.375rem;
  border-left:2px solid var(--copper);border-bottom:2px solid var(--copper);
  transform:rotate(-45deg);}
.off-meta{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);
  display:grid;gap:.625rem;}
.off-meta div{display:flex;justify-content:space-between;gap:1rem;font-size:.9688rem;}
.off-meta dt{color:var(--body);font-weight:500;}
.off-meta dd{color:var(--txt);font-weight:650;text-align:right;margin:0;}
.off-cta{margin-top:1.75rem;width:100%;justify-content:center;}

/* projet personnalise : volontairement pas une 3e colonne de prix */
.custom{margin-top:2.5rem;background:var(--ink);color:var(--w);border-radius:1.375rem;
  padding:clamp(1.875rem,3.2vw,3rem);position:relative;overflow:hidden;}
.custom h2{font-family:var(--fd);font-size:clamp(1.625rem,2.8vw,2.125rem);font-weight:700;
  letter-spacing:-.022em;line-height:1.14;max-width:22ch;}
.custom p{margin-top:1rem;font-size:1.0625rem;line-height:1.7;color:var(--w-dim);max-width:60ch;}
.custom-ex{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5625rem;list-style:none;}
.custom-ex li{font-size:.9375rem;color:var(--w-dim);background:rgba(240,242,248,.07);
  border:1px solid var(--ink-line2);border-radius:999px;padding:.4375rem .875rem;}
.custom-q{margin-top:1.5rem;font-size:1.0625rem;font-weight:600;color:var(--copper-hi);}

/* tarifs de modification */
.mods{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.75rem;}
@media (min-width:640px){.mods{grid-template-columns:1fr 1fr;}}
@media (min-width:1000px){.mods{grid-template-columns:repeat(3,1fr);}}
.mod{background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1.375rem 1.5rem;}
.mod b{display:block;font-family:var(--fd);font-size:1.5rem;font-weight:700;
  letter-spacing:-.02em;color:var(--copper);}
.mod strong{display:block;margin-top:.4375rem;font-size:1.0125rem;font-weight:650;color:var(--txt);}
.mod span{display:block;margin-top:.3125rem;font-size:.9375rem;line-height:1.55;color:var(--dim);}
.fair{margin-top:1.75rem;background:var(--copper-soft);border:1px solid rgba(194,85,31,.2);
  border-radius:1rem;padding:1.375rem 1.5rem;font-size:1.0125rem;line-height:1.68;color:var(--body);}
.fair strong{color:var(--txt);font-weight:650;}

/* ── PILULES FLOTTANTES (mobile) — Liquid Glass, pas de bandeau ───── */
.mbar{position:fixed;left:0;right:0;z-index:900;display:none;
  justify-content:center;align-items:center;gap:.5rem;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  padding:0 1rem;pointer-events:none;
  opacity:0;transform:translateY(14px) scale(.96);
  transition:opacity .45s var(--e-out),transform .45s var(--e-out);}
.mbar.on{opacity:1;transform:none;}
.mbar>*{pointer-events:auto;}

@media (max-width:899px){.mbar{display:flex;} }
@media (prefers-reduced-motion:reduce){.mbar{transition:none;}}

/* ── TUILES METIER : compactes et informatives ────────────────── */

.sect-go{display:inline-flex;align-items:center;gap:.375rem;margin-top:.125rem;
  font-size:.9063rem;font-weight:650;color:var(--copper);}
.sect-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-out);}

/* icone dans la fenetre du metier */

/* ── BOUTON MENU (mobile) : pilule avec le mot ecrit ──────────── */
.burger{display:inline-flex;align-items:center;gap:.5rem;height:2.75rem;
  min-width:44px;padding:0 .875rem 0 .75rem;border-radius:999px;
  border:1.5px solid var(--line2);background:transparent;color:var(--txt);
  transition:border-color .25s,background .25s,color .25s;}
.burger:hover,.burger:focus-visible{border-color:var(--copper);color:var(--copper);}
.bg-i{display:flex;flex-direction:column;justify-content:center;gap:4px;width:16px;}
.bg-i i{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .4s var(--e-out),width .3s var(--e-out);transform-origin:center;}
.bg-i i:first-child{width:16px;}
.bg-i i:last-child{width:11px;}
.burger.open .bg-i i:first-child{transform:translateY(3px) rotate(45deg);}
.burger.open .bg-i i:last-child{width:16px;transform:translateY(-3px) rotate(-45deg);}
.bg-t{position:relative;display:inline-grid;font-size:.8438rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;line-height:1;}
.bg-t b{grid-area:1/1;font-weight:700;transition:opacity .25s,transform .3s var(--e-out);}
.bg-t b:last-child{opacity:0;transform:translateY(5px);}
.burger.open .bg-t b:first-child{opacity:0;transform:translateY(-5px);}
.burger.open .bg-t b:last-child{opacity:1;transform:none;}

/* entrees du panneau : libelle + a quoi sert la page */
.mob-links a{display:flex;flex-direction:column;gap:.1875rem;padding:.9375rem 0;
  border-bottom:1px solid var(--ink-line);text-decoration:none;}
.ml-t{font-family:var(--fd);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;
  line-height:1.15;color:var(--w);}
.ml-d{font-size:.9375rem;line-height:1.4;color:var(--w-mute);}
.mob-links a:hover .ml-t,.mob-links a:focus-visible .ml-t{color:var(--copper-hi);}

/* ── ACCUEIL : blocs d'orientation ────────────────────────────── */

.hp-off{display:grid;gap:1.25rem;grid-template-columns:1fr;padding-top:.875rem;}
@media (min-width:800px){.hp-off{max-width:32rem;margin-inline:auto;}}
@media (min-width:1040px){.hp-off{grid-template-columns:repeat(3,1fr);gap:1rem;
  max-width:none;margin-inline:0;}}
@media (min-width:1360px){.hp-off{gap:1.375rem;}}
.hp-o{background:#fff;border:1.5px solid var(--line);border-radius:1.25rem;
  padding:1.75rem;transition:border-color .25s,transform .35s var(--e-out);}
.hp-o:hover{border-color:var(--copper);transform:translateY(-3px);}
.hp-o b{font-family:var(--fd);font-size:1.375rem;font-weight:700;color:var(--txt);display:block;}
.hp-o i{font-style:normal;display:block;margin-top:.375rem;color:var(--copper);
  font-weight:600;font-size:1rem;line-height:1.45;}
.hp-o u{display:block;text-decoration:none;margin-top:1rem;font-family:var(--fd);
  font-size:2.25rem;font-weight:700;letter-spacing:-.03em;color:var(--txt);}
.hp-o u sup{font-size:.9375rem;font-weight:600;color:var(--mute);
  vertical-align:middle;margin-left:.25rem;}
.hp-o p{margin-top:.75rem;font-size:1rem;line-height:1.6;color:var(--body);}
.hp-note{margin-top:1.25rem;font-size:1rem;line-height:1.65;color:var(--body);}
.hp-note strong{color:var(--txt);font-weight:650;}

/* Le titre du hero ne doit jamais mordre sur la marque animee a droite. */
@media (min-width:1000px){
  .htitle{font-size:clamp(3rem,4.7vw,4.6rem);max-width:62%;}
  .hsub{max-width:44ch;}
}

/* Titre conserve pour les lecteurs d'ecran, mais non repete a l'ecran
   quand le bandeau de page porte deja la meme information. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── METIERS : familles + pastilles compactes ─────────────────── */
#secteurs [role="tablist"],#secteurs #sect-pills{display:block;}
.fam{margin-top:1.75rem;}
.fam:first-child{margin-top:0;}
.fam-t{display:flex;align-items:center;gap:.625rem;margin-bottom:.875rem;
  font-size:.8125rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mute);}
.fam-t::after{content:'';flex:1;height:1px;background:var(--line);}
.fam-t span{order:3;font-size:.75rem;letter-spacing:.04em;color:var(--copper);
  background:var(--copper-soft);border-radius:999px;padding:.1875rem .5rem;}
.fam-l{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:.5rem .875rem .5rem .625rem;border-radius:999px;
  background:#fff;border:1.5px solid var(--line);cursor:pointer;
  font-size:.9375rem;font-weight:600;color:var(--txt);text-align:left;
  transition:border-color .2s,transform .3s var(--e-out),box-shadow .3s,background .2s;}
.chip img{width:26px;height:26px;flex:0 0 auto;}
.chip:hover,.chip:focus-visible{border-color:var(--copper);transform:translateY(-2px);
  box-shadow:0 10px 24px -14px rgba(15,19,34,.35);}
@media (max-width:520px){
  .chip{font-size:.875rem;padding-right:.75rem;}
  .chip img{width:23px;height:23px;}
}

/* Sur bandeau sombre, TOUS les elements de nav passent en clair. */

/* ── FICHE METIER : en-tete compact, plus de grande zone vide ──── */

/* les pilules de contact ne doivent jamais masquer le bas de la fiche */
@media (max-width:899px){
  .sov{align-items:flex-start;padding-top:calc(var(--nh) + .75rem);}
  
}

/* ── CARTES D'OFFRE : plus désirables, hiérarchie plus nette ───── */
.off-card{position:relative;overflow:hidden;}

.off-card--pro{background:
  radial-gradient(120% 80% at 100% 0%,rgba(224,112,58,.07) 0%,transparent 60%),#fff;}
.off-n{display:flex;align-items:center;gap:.625rem;}
.off-p{align-items:baseline;}
.off-p b{background:var(--grad-copper-txt);-webkit-background-clip:text;
  background-clip:text;color:transparent;}
.off-card:not(.off-card--pro) .off-p b{background:none;color:var(--txt);
  -webkit-text-fill-color:var(--txt);}
.off-l li{padding-left:1.875rem;}
.off-l li::before{width:.75rem;height:.4375rem;border-width:0 0 2.5px 2.5px;
  border-color:var(--copper);top:.4375rem;}
.off-card--pro .off-l li::before{border-color:var(--copper-hi);}
.off-meta{background:var(--paper);border-radius:.875rem;padding:1rem 1.125rem;
  border-top:0;margin-top:1.5rem;}
.off-card--pro .off-meta{background:rgba(224,112,58,.07);}
.off-cta{height:3.25rem;font-size:1.0125rem;}
.off-card--pro .off-cta{background:var(--grad-copper);border-color:transparent;color:#fff;}
.off-card{transition:transform .4s var(--e-out),box-shadow .4s;}
.off-card:hover{transform:translateY(-4px);
  box-shadow:0 1px 2px rgba(15,19,34,.05),0 30px 60px -28px rgba(15,19,34,.3);}
.off-card--pro:hover{box-shadow:0 1px 2px rgba(15,19,34,.05),0 34px 70px -26px rgba(194,85,31,.42);}

/* l'etiquette ne doit pas etre rognee par overflow:hidden */
.off-card{overflow:visible;}

.off-card--pro{margin-top:.8125rem;}
@media (min-width:1100px){.off-card:not(.off-card--pro){margin-top:.8125rem;}}
.off-tag{top:-.75rem;z-index:2;}

/* ── ANIMATIONS AU DEFILEMENT ──────────────────────────────────
   Le geste maison : les elements montent en se devoilant, et deux couches
   d'un meme bloc n'avancent pas a la meme vitesse. Jamais de rebond. */
.js .rv{transform:translateY(26px);}
.js .rv.in{transform:none;}
/* decalage naturel entre les enfants d'une meme rangee */
.js .off-grid.in>*,.js .mods.in>*,.js .hp-off.in>*,.js .jobs.in>*{
  animation:kn-up .7s var(--e-out) both;}
.js .off-grid.in>*:nth-child(2),.js .mods.in>*:nth-child(2),.js .hp-off.in>*:nth-child(2){animation-delay:.09s;}
.js .hp-off.in>*:nth-child(3){animation-delay:.18s;}
.js .off-grid.in>*:nth-child(3),.js .mods.in>*:nth-child(3){animation-delay:.18s;}
.js .mods.in>*:nth-child(4){animation-delay:.24s;}
.js .mods.in>*:nth-child(5){animation-delay:.3s;}
.js .mods.in>*:nth-child(6){animation-delay:.36s;}
@keyframes kn-up{from{opacity:0;transform:translateY(22px) scale(.985);}
                 to{opacity:1;transform:none;}}
/* les pastilles metier arrivent par famille, pas une par une */
.js .fam.in .chip{animation:kn-chip .5s var(--e-out) both;}
@keyframes kn-chip{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.js .fam.in .chip:nth-child(2){animation-delay:.04s}
.js .fam.in .chip:nth-child(3){animation-delay:.08s}
.js .fam.in .chip:nth-child(4){animation-delay:.12s}
.js .fam.in .chip:nth-child(5){animation-delay:.16s}
.js .fam.in .chip:nth-child(6){animation-delay:.2s}
.js .fam.in .chip:nth-child(7){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv.in{transform:none!important;}
  .js .off-grid.in>*,.js .mods.in>*,.js .hp-off.in>*,.js .fam.in .chip{animation:none!important;}
}

/* ── BANDEAU DE PAGE : clair, texte encre ─────────────────────── */
.phead{position:relative;overflow:hidden;background:var(--paper);color:var(--txt);
  padding-block:clamp(6.5rem,12vw,9.5rem) clamp(3rem,5.5vw,4.25rem);
  border-bottom:1px solid var(--line);}
.phead::before{content:'';position:absolute;inset:-30% -10% auto auto;
  width:min(58%,42rem);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(224,112,58,.13) 0%,rgba(224,112,58,.05) 42%,transparent 70%);}
.phead::after{content:'';position:absolute;inset:auto auto -40% -12%;
  width:min(46%,32rem);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(30,34,53,.07) 0%,transparent 68%);}
.phead .wrap{position:relative;z-index:1;}
.pbc{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.125rem;
  font-size:.8125rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);}
.pbc a{color:var(--body);text-decoration:none;transition:color .2s;}
.pbc a:hover{color:var(--copper);}
.pbc span[aria-current]{color:#a8441a;}
.pbc i{font-style:normal;opacity:.45;}
.ph-t{font-family:var(--fd);font-size:clamp(2.25rem,5.4vw,4rem);font-weight:700;
  letter-spacing:-.026em;line-height:1.04;text-wrap:balance;max-width:17ch;color:var(--txt);}
.ph-d{margin-top:1.125rem;font-size:clamp(1.0125rem,1.3vw,1.1875rem);line-height:1.65;
  color:var(--body);max-width:52ch;}
@media (max-width:640px){.ph-t{max-width:none;}}

/* ── INTERACTIONS AU SURVOL (desktop) ─────────────────────────────
   Tout element cliquable reagit au survol, au focus et a la pression. */
@media (hover:hover) and (min-width:900px){
  
  
  
  

  .hp-o{position:relative;overflow:hidden;}
  .hp-o::after{content:'';position:absolute;inset:auto 0 0;height:2px;
    background:var(--grad-copper);transform:scaleX(0);transform-origin:left;
    transition:transform .5s var(--e-out);}
  .hp-o:hover::after{transform:scaleX(1);}

  .mod{transition:transform .35s var(--e-out),border-color .25s,box-shadow .35s;}
  .mod:hover{transform:translateY(-3px);border-color:var(--copper);
    box-shadow:0 16px 34px -20px rgba(15,19,34,.3);}

  .fam-t{transition:color .25s;}
  .chip span{transition:color .2s;}
  .chip:hover span{color:var(--copper);}
  .chip img{transition:transform .35s var(--e-out);}
  .chip:hover img{transform:scale(1.12) rotate(-4deg);}

  .sect-go svg{transition:transform .3s var(--e-out);}
  a:hover>.sect-go svg,.sect-go:hover svg{transform:translateX(5px);}

  .off-cta,.btn{transition:transform .3s var(--e-out),box-shadow .3s,background .25s,color .25s;}
  .btn:active{transform:translateY(1px) scale(.985);}
}
/* le filet se tire sous les liens de texte */
.hp-note a,.sd a{position:relative;}
.hp-note a::after,.sd a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;
  height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--e-out);}
.hp-note a:hover::after,.sd a:hover::after{transform:scaleX(1);transform-origin:left;}

/* arrivee des blocs : deux couches d'un meme bloc n'avancent pas ensemble */
.js .phead .ph-t{animation:kn-up .8s var(--e-out) both .05s;}
.js .phead .ph-d{animation:kn-up .8s var(--e-out) both .16s;}
.js .phead .pbc{animation:kn-up .7s var(--e-out) both;}
@media (prefers-reduced-motion:reduce){
  .js .phead .ph-t,.js .phead .ph-d,.js .phead .pbc{animation:none!important;}
}

/* Repere de section : cuivre fonce sur fond clair, cuivre clair sur fond sombre. */
.sidx{color:#a8441a;}
.sec-ink .sidx,[data-pix="ink"] .sidx{color:var(--copper-hi);}

/* La carte du formulaire est blanche : son texte ne suit pas la section sombre. */

/* ── BANDEAU : illustration a droite (desktop) ─────────────────────
   Image décorative posée en fond : si le fichier n'existe pas encore,
   rien ne s'affiche et la mise en page reste intacte. */
@media (min-width:1000px){
  .phead .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    align-items:center;gap:clamp(2rem,4vw,4rem);}
  .phead-txt{grid-column:1;}
  .phead-art{grid-column:2;display:block;width:100%;
    filter:drop-shadow(0 24px 46px rgba(15,19,34,.14));}
  .js .phead-art{animation:kn-art 1s var(--e-out) backwards .18s;}
}
@media (max-width:999px){.phead-art{display:none;}}
@keyframes kn-art{from{opacity:0;transform:translateY(18px) scale(.97);}
                  to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.js .phead-art{animation:none;}}

/* Menu mobile ouvert : les pilules s'effacent, elles masquaient le dernier lien. */
body.menu-open .mbar{opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;}
/* Menu ouvert : la pilule du haut s'efface. v91 : sur un petit téléphone
   (320 × 568), la nappe commence derrière elle, et la première entrée du
   menu passait sous le logo dès qu'on faisait défiler la liste. La pilule
   ne sert à rien pendant que le menu est ouvert : la barre du bas porte
   déjà « Fermer », et le logo revient dès la fermeture. */
body.menu-open #nav{opacity:0;pointer-events:none;}
nav.open{padding-bottom:calc(var(--dock-h,3.75rem) + 1.5rem + env(safe-area-inset-bottom))!important;}

/* Illustration de page aussi sur mobile : plus petite, sous le texte. */
@media (max-width:999px){
  .phead-art{display:block;width:min(74%,20rem);margin:1.75rem auto 0;
    filter:drop-shadow(0 18px 34px rgba(15,19,34,.14));}
}
@media (max-width:520px){.phead-art{width:min(86%,17rem);margin-top:1.5rem;}}

/* ── ACCUEIL : les deux offres, version desirable ─────────────── */
.hp-o{position:relative;display:flex;flex-direction:column;gap:.875rem;
  background:#fff;border:1.5px solid var(--line);border-radius:1.25rem;
  padding:1.75rem 1.75rem 1.5rem;text-decoration:none;
  box-shadow:0 1px 2px rgba(15,19,34,.04),0 16px 40px -24px rgba(15,19,34,.16);
  transition:transform .4s var(--e-out),box-shadow .4s,border-color .25s;}
.hp-o--pro{border-color:var(--copper);margin-top:.8125rem;
  background:radial-gradient(120% 80% at 100% 0%,rgba(224,112,58,.08) 0%,transparent 62%),#fff;}
@media (min-width:1040px){.hp-o:not(.hp-o--pro){margin-top:.8125rem;}}
.hp-o-tag{position:absolute;top:-.75rem;left:1.75rem;background:var(--grad-copper);
  color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.375rem .8125rem;border-radius:999px;}
.hp-o-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.hp-o-h b{font-family:var(--fd);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--txt);}
.hp-o-h u{text-decoration:none;font-family:var(--fd);font-size:2rem;font-weight:700;
  letter-spacing:-.03em;color:var(--txt);}
.hp-o--pro .hp-o-h u{background:var(--grad-copper-txt);-webkit-background-clip:text;
  background-clip:text;color:transparent;}
.hp-o-h u sup{font-size:.75rem;font-weight:600;color:var(--mute);vertical-align:middle;
  margin-left:.1875rem;-webkit-text-fill-color:var(--mute);}
.hp-o i{font-style:normal;font-size:1rem;line-height:1.5;color:var(--copper);font-weight:600;}
.hp-o-l{list-style:none;display:grid;gap:.5625rem;margin:.25rem 0 0;padding:.9375rem 0 0;
  border-top:1px solid var(--line);}
.hp-o-l li{position:relative;padding-left:1.5rem;font-size:.9688rem;line-height:1.5;color:var(--body);}
.hp-o-l li::before{content:'';position:absolute;left:0;top:.4375rem;width:.6875rem;height:.375rem;
  border-left:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(-45deg);}
.hp-o-go{display:inline-flex;align-items:center;gap:.375rem;margin-top:.375rem;
  font-size:.9375rem;font-weight:700;color:var(--copper);}
.hp-o-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-out);}
.hp-o:hover{transform:translateY(-4px);border-color:var(--copper);
  box-shadow:0 1px 2px rgba(15,19,34,.05),0 28px 56px -26px rgba(15,19,34,.28);}
.hp-o:hover .hp-o-go svg{transform:translateX(5px);}
.hp-o::after{content:none;}

/* ── HERO : visuel cliquable qui mene aux realisations ─────────── */

.hero-visu-img{display:block;width:100%;height:auto;aspect-ratio:1003/1002;object-fit:contain;
  filter:drop-shadow(0 28px 52px rgba(15,19,34,.18));
  transition:transform .55s var(--e-out),filter .45s;}

/* sur mobile le libelle reste visible : pas de survol possible */

/* ── L'ENTREE DU VISUEL ────────────────────────────────────────
   Il entre avec le reste du heros, vite, et il est en place avant qu'on
   ait fini de lire le titre. Une montee lente depuis le bas avait ete
   essayee : sur un heros immobile, on la regarde arriver au lieu de la
   remarquer, et c'est pire que pas d'animation du tout.
   Fondu + 34 px + un souffle d'echelle : l'objet se pose, il ne rebondit
   pas — les apparitions en rebond sont proscrites.
   Meme mecanisme que .fu : l'etat de depart n'existe que sous .js, donc
   sans JavaScript le visuel est simplement la, a sa place. */

@keyframes heroVisu{
  from{opacity:0;transform:translateY(34px) scale(.965);}
  to{opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .hero-visu-img{transition:none;}
  
  
}

/* Le hero devient une rangee a deux colonnes : texte a gauche, visuel a droite. */
@media (min-width:1000px){
  #hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:center;gap:clamp(2rem,4vw,4.5rem);}
  #hero .hero-g{grid-column:1;}
  #hero .hero-scene{grid-column:2;}
  
  #hero .htitle{max-width:none;}
}
@media (max-width:999px){
  #hero .hero-scene{margin-top:2rem;}
  
}

/* ── ILLUSTRATION DE BANDEAU : cliquable, zoom au survol ───────── */
.phead-art img{display:block;width:100%;height:auto;max-height:26rem;object-fit:contain;}
.phead-art{position:relative;text-decoration:none;
  transition:transform .55s var(--e-out),filter .45s var(--e-out);}
.phead-art:hover,.phead-art:focus-visible{
  transform:translateY(-6px) scale(1.035);
  filter:drop-shadow(0 32px 58px rgba(15,19,34,.22));}
.phead-art:active{transform:translateY(-2px) scale(1.01);}
.pa-go{position:absolute;left:50%;bottom:-.25rem;transform:translateX(-50%) translateY(8px);
  display:inline-flex;align-items:center;gap:.4375rem;white-space:nowrap;
  padding:.5625rem 1rem;border-radius:999px;
  background:rgba(15,19,34,.88);
  backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(244,243,238,.22);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 12px 26px -12px rgba(9,12,24,.55);
  color:var(--w);font-size:.875rem;font-weight:650;
  opacity:0;transition:opacity .35s var(--e-out),transform .35s var(--e-out);}
.pa-go svg{width:14px;height:14px;stroke:var(--copper-hi);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.phead-art:hover .pa-go,.phead-art:focus-visible .pa-go{
  opacity:1;transform:translateX(-50%) translateY(0);}
/* sans survol possible, le libelle reste affiche */
@media (hover:none),(max-width:999px){
  .pa-go{opacity:1;transform:translateX(-50%);bottom:-.5rem;}
  .phead-art:hover{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .phead-art,.pa-go{transition:none;}
  .phead-art:hover{transform:none;}
}

/* ── FOND DU HERO : couche fixe, sous les pixels vivants ───────── */
#hero{position:relative;isolation:isolate;}
#hero::before{content:'';position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(45% 40% at 8% 92%,rgba(30,34,53,.05),transparent 70%),var(--paper);}
#hero .pixcv{z-index:-1;}
@media (max-width:899px){
  /* Le fond est un ruban pose a DROITE d'un large aplat de papier. En
     cadrage etroit, un centrage ne montrerait que le papier : on decale la
     fenetre vers la droite pour que la matiere entre dans le cadre. */
}

/* La pilule depasse du bord haut : la carte ne doit pas la rogner. */
.hp-o{overflow:visible;}
.hp-o-tag{z-index:2;}

/* Reperes de section : plus lisibles, ils annoncent la section. */
.sidx{font-size:clamp(1.0625rem,1.35vw,1.25rem);letter-spacing:.1em;font-weight:700;
  margin-bottom:1.25rem;}
@media (max-width:520px){.sidx{font-size:1rem;letter-spacing:.09em;}}

/* ── Mobile : le libelle passe SOUS l'image, il ne la masque plus ── */
@media (hover:none),(max-width:999px){
  .phead-art{margin-bottom:3.5rem;}
  .pa-go{position:absolute;left:50%;bottom:-3rem;transform:translateX(-50%);
    opacity:1;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    border:1.5px solid var(--line2);box-shadow:none;color:var(--copper);
    padding:.625rem 1.125rem;font-size:.9063rem;}
  .pa-go svg{stroke:var(--copper);width:14px;height:14px;flex:0 0 14px;}
  /* meme traitement pour le visuel du hero */
  
  
  
}

/* ── Logo mobile : il empietait sur les boutons de la barre ────── */
@media (max-width:899px){
  nav .logo-img{height:1.875rem;width:auto;}
  nav .wrap{gap:.5rem;}
}
@media (max-width:400px){
  nav .logo-img{height:1.6875rem;}
  .burger{padding:0 .6875rem 0 .5625rem;gap:.375rem;}
  .bg-t{font-size:.75rem;letter-spacing:.05em;}
}
@media (max-width:340px){
  nav .logo-img{height:1.5rem;}
  .nav-search{display:none;}
}

/* ── FOND DE SECTION : image en parallaxe, sous le contenu ─────────
   Le voile est directionnel : dense la ou se pose le texte, leger a
   l'oppose pour que la photo respire. */
.sec-bg{position:absolute;inset:-12% 0;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(15,19,34,.88) 0%,rgba(15,19,34,.66) 46%,rgba(15,19,34,.34) 100%),
             var(--bg) center/cover no-repeat;
  will-change:transform;}
/* Sections claires : voile inverse, la photo reste tres discrete. */
.sec-bg--clair{background:linear-gradient(105deg,rgba(242,243,245,.94) 0%,rgba(242,243,245,.86) 48%,rgba(242,243,245,.72) 100%),
             var(--bg) center/cover no-repeat;}
@media (prefers-reduced-motion:reduce){.sec-bg{transform:none!important;}}

/* Le chapo de l'en-tete ne doit pas toucher le bloc suivant. */
.hp-note{margin-top:1.25rem;}
@media (min-width:980px){.shead{margin-bottom:clamp(2.75rem,5vw,4.25rem);}}

/* ── RESPIRATION SOUS LES TITRES ───────────────────────────────
   Mesure a l'appui : plusieurs titres avaient 0 a 9 px sous eux.
   Regle : l'espace sous un titre vaut au moins la moitie de son corps. */

.off-n{margin-bottom:.5rem;}
.off-for{margin-top:0;}
.shead>h1,.shead>h2{margin-bottom:.75rem;}
@media (min-width:980px){.shead>h1,.shead>h2{margin-bottom:0;}}
.shead .sidx{margin-bottom:1.125rem;}
.sd{margin-top:.375rem;}
.ph-t+.ph-d{margin-top:1.375rem;}

.dx-t+.dx-s{margin-top:.5rem;}

/* fenetres et messages : le titre ne colle plus a sa phrase */
#dx-panel h3+p,#dx-panel .dx-t+p,.merci h1+p{margin-top:.625rem;}

/* Renfort : l'espace sous un titre doit valoir ~0,55 x son corps. */
.off-n{margin-bottom:.875rem!important;}

.shead>h1,.shead>h2{margin-bottom:1rem;}
@media (min-width:980px){.shead>h1,.shead>h2{margin-bottom:0;}}
.ph-t+.ph-d{margin-top:1.75rem!important;}
.st+.sd,.st+p{margin-top:1rem;}
/* panneau d'estimation et page de remerciement */
#dx-panel h3,#dx-panel .dx-t{margin-bottom:.875rem!important;}
#dx-panel h3+p,#dx-panel .dx-t+p,#dx-panel h3+.dx-s{margin-top:.875rem!important;}
.dx-s{margin-top:.875rem!important;}

/* Etapes de la methode : le titre ne colle plus a sa description. */

/* ── BANDEAU DE FIN : on vient de voir le travail, on propose la suite ── */
.cta-end{position:relative;overflow:hidden;background:var(--ink);color:var(--w);
  padding-block:clamp(3.5rem,7vw,5.5rem);}
.cta-end .wrap{position:relative;z-index:1;}
.cta-in{display:grid;gap:clamp(1.75rem,3vw,3rem);align-items:center;}
@media (min-width:900px){.cta-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}}
.cta-t{font-family:var(--fd);font-size:clamp(1.75rem,3.4vw,2.75rem);font-weight:700;
  letter-spacing:-.024em;line-height:1.08;text-wrap:balance;max-width:20ch;margin:0;}
.cta-t em{font-style:normal;color:var(--copper-hi);}
.cta-d{margin-top:1.125rem;font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.68;
  color:var(--w-dim);max-width:46ch;}
.cta-act{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;}
@media (min-width:900px){.cta-act{justify-content:flex-end;}}
.cta-act .btn{min-height:3.25rem;}
.cta-b1{background:var(--grad-copper);color:#fff;border:0;}
.cta-b2{background:transparent;color:var(--w);border:1.5px solid rgba(244,243,238,.32);}
.cta-b2{--fill:var(--paper);}
.cta-b2:hover{border-color:var(--paper);color:var(--ink);}
.cta-note{margin-top:1rem;font-size:.9375rem;color:var(--w-mute);}
@media (min-width:900px){.cta-note{text-align:right;}}

/* ── LA LIMITE DITE FRANCHEMENT ────────────────────────────────
   Chaque carte nomme ce qu'elle ne fait pas. C'est ce qui rend l'ecart
   de prix lisible : on ne monte pas pour "plus", on monte pour une
   porte d'entree de plus sur Google. */

/* ── PASSERELLE ENTRE FORMULES ─────────────────────────────────
   Enleve le risque de se tromper de porte : on commence petit, on monte
   en ne payant que la difference. */
.off-up{margin-top:clamp(1.75rem,3vw,2.5rem);padding:clamp(1.25rem,2.4vw,1.75rem);
  border-radius:1.125rem;border:1.5px dashed var(--line);
  background:#fff;text-align:center;}
.off-up-t{font-family:var(--fd);font-size:1.1875rem;font-weight:700;color:var(--txt);}
.off-up-d{margin-top:.5rem;font-size:1.0125rem;line-height:1.62;color:var(--body);
  max-width:44rem;margin-inline:auto;}

/* ── TROIS CARTES DE MEME HAUTEUR ──────────────────────────────
   Sans ca, le bloc "Livraison" et le bouton flottent a trois hauteurs
   differentes et la grille parait bricolee. La limite et le bouton sont
   pousses ensemble vers le bas : les trois lignes de bouton s'alignent. */
/* Les cartes ne sont volontairement PAS de la meme hauteur : la 390 est
   la plus courte, la 990 la plus longue. C'est l'echelle qui se voit du
   premier coup d'oeil, avant meme d'avoir lu une ligne. */
.off-grid{align-items:start;}

/* ── CE QUI SE VERIFIE SUR PLACE ───────────────────────────────
   Quatre affirmations que le visiteur peut controler lui-meme, depuis la
   page qu'il est en train de lire. C'est la preuve la moins chere et la
   plus solide : elle ne demande de croire personne. */

/* ── LES METIERS, EN CLAIR ─────────────────────────────────────
   La section "votre activite est unique" ne disait que ca : elle etait un
   trou. Le visiteur y cherche UNE chose, son propre metier. On le lui
   montre au lieu de le lui promettre. */
.jobs{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1.75rem;}
.job{display:inline-flex;align-items:center;gap:.625rem;min-height:44px;padding:.5rem 1.0625rem .5rem .625rem;
  text-decoration:none;border-radius:999px;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);
  transition:transform .35s var(--e-out),border-color .3s,background .3s,box-shadow .35s;}
.job img{width:1.75rem;height:auto;flex:0 0 auto;}
.job span{font-size:.9375rem;font-weight:600;line-height:1.3;color:var(--w);}
.job:hover,.job:focus-visible{transform:translateY(-2px);border-color:var(--copper-hi);background:rgba(255,255,255,.1);
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 18px 36px -22px rgba(224,112,58,.55);}
@media (min-width:900px){.jobs{gap:.75rem;} .job{padding:.5625rem 1.25rem .5625rem .6875rem;}}
.jobs-more{margin-top:1.25rem;font-size:1.0125rem;color:var(--body);}
.sec-ink .jobs-more{color:var(--w-dim);}
.jobs-more .sect-go{font-size:1rem;margin-left:.375rem;}
@media (prefers-reduced-motion:reduce){
  .job{transition:none;}
  .job:hover{transform:none;}
}

/* ══════════════════════════════════════════════════════════════
   CLASSES ISSUES DES ANCIENS ATTRIBUTS style=""
   La CSP (style-src 'self') ignore tout attribut style= une fois en
   ligne, alors qu'il fonctionne en local : c'est le piege qui a deja
   ecrase toutes les images d'un projet au meme format. Tout ce qui
   etait calcule dans le HTML vit desormais ici.
   ══════════════════════════════════════════════════════════════ */

/* ── petites utilitaires de mise en ligne ── */
.ib{display:inline-flex;align-items:center;gap:.625rem;}
.ib-s{display:inline-flex;align-items:center;gap:.5rem;}
.w-plein{width:100%;}
.fs-droit{font-style:normal;}

/* ── pot de miel anti-robot : invisible, jamais rempli par un humain ── */
.trap{display:none;}
.trap-in{position:absolute;opacity:0;}

/* ── formulaires ── */
.ta-court{min-height:4.5rem;}
.lab-opt{color:var(--mute);font-weight:400;}

/* ── retards d'entree du premier ecran ── */
.d08{--d:.08s;} .d15{--d:.15s;} .d25{--d:.25s;} .d37{--d:.37s;}
.d49{--d:.49s;} .d62{--d:.62s;} .d74{--d:.74s;}

/* ── fonds de section (parallaxe) ── */
.bg-offres{--bg:url(../images/fonds/offres-v2.webp);}
.bg-metiers{--bg:url(../images/fonds/metiers-v2.webp);}
.bg-cta{--bg:url(../images/fonds/cta-v2.webp);}
.bg-services{--bg:url(../images/fonds/services-v2.webp);}
.bg-realisations{--bg:url(../images/fonds/realisations-v2.webp);}
.bg-qui{--bg:url(../images/fonds/qui-v2.webp);}
.bg-pourquoi{--bg:url(../images/fonds/pourquoi-v2.webp);}
.bg-methode{--bg:url(../images/fonds/methode-v2.webp);}

.bg-apropos{--bg:url(../images/fonds/apropos-v2.webp);}

/* ── illustrations de tete de page : le ratio est celui du fichier,
      jamais un cadre impose a l'image ── */
.art-realisations{--art:url(../images/pages/realisations.webp);--ratio:1081/1021;}

.art-metiers{--art:url(../images/pages/metiers.webp);--ratio:1100/718;}
.art-methode{--art:url(../images/pages/methode.webp);--ratio:986/973;}

.art-apropos{--art:url(../images/pages/a-propos.webp);--ratio:1100/797;}

/* ── cas uniques ── */

.mt-sec{margin-top:clamp(3rem,5vw,4rem);}

.note-bas{margin-top:2rem;font-size:.9688rem;}
.st-petit{font-size:clamp(1.5rem,2.6vw,2rem);}
.go-1r{font-size:1rem;}
.go-ink{font-size:1rem;margin-top:1rem;color:var(--copper-hi);}
.sur-ink{color:var(--w-dim);}
.accent-fort{color:var(--copper);font-weight:600;}
.btn-papier{background:var(--paper);color:var(--ink);max-width:22rem;}

/* repli des images, pose par le script de tete quand un fichier manque */
.repli-cache{display:none;}

/* ══ CIBLES TACTILES ══════════════════════════════════════════════════
   Mesure au doigt sur 360 px : boutons et liens de navigation sous les
   44 px reglementaires. On agrandit la zone de contact sans changer le
   dessin. Les liens en pleine phrase ne sont pas touches : la norme les
   exempte, et les rembourrer casserait l'interligne du paragraphe.
   ═══════════════════════════════════════════════════════════════════ */

/* le bouton de recherche etait a 40 px */
.nav-search{width:2.75rem;height:2.75rem;}

/* liens du pied de page : la ligne fait 26 px, la zone doit faire 44 */
.ft-col a{display:flex;align-items:center;min-height:2.75rem;}
.ft-contact{min-height:2.75rem;}

/* les appels a l'action en fin de section */
.sect-go{min-height:2.75rem;}

/* lien d'evitement au clavier */
.skip{min-height:2.75rem;display:inline-flex;align-items:center;}

/* ══ CE QUE VOUS N'AVEZ PAS ═══════════════════════════════════════════
   Chaque carte se termine par les lignes que la formule du dessus
   ajoute, barrees. Le prospect voit ce qu'il rate sans qu'on le lui
   dise. On n'affiche que le palier suivant, jamais tous : un mur de
   croix ferait passer la formule d'entree pour un piege, et on perdrait
   le client au lieu de le faire monter. */
.off-plus{margin-top:1.375rem;padding:1.0625rem 1.125rem 1.125rem;
  border-radius:1rem;background:var(--copper-soft);
  border:1px solid rgba(194,85,31,.22);}
.off-plus-t{display:flex;align-items:center;gap:.5rem;
  font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--copper-txt);}
.off-plus-t::before{content:'';width:.4375rem;height:.4375rem;border-radius:50%;
  background:var(--copper);}
.off-plus ul{list-style:none;margin-top:.8125rem;display:grid;gap:.5rem;}
.off-plus li{position:relative;padding-left:1.75rem;font-size:.9375rem;
  line-height:1.45;color:var(--body);}
/* un plus, trace en CSS : deux barres croisees a angle droit. Surtout
   pas une croix ni un texte rature — on annonce ce qu'on gagne, pas ce
   qu'on perd, et un mur de negations ferait fuir au lieu de faire monter. */
.off-plus li::before,.off-plus li::after{content:'';position:absolute;
  left:.125rem;top:.6875rem;width:.75rem;height:1.75px;border-radius:1px;
  background:var(--copper);opacity:.75;}
.off-plus li::after{transform:rotate(90deg);}
.off-plus-go{margin-top:.9375rem;padding-top:.8125rem;
  border-top:1px solid rgba(194,85,31,.18);font-size:.9375rem;line-height:1.5;
  color:var(--body);}
.off-plus-go b{color:var(--copper-txt);font-weight:700;}

/* la carte du haut n'a rien a barrer : elle affiche l'inverse */

/* le socle commun, rappele sous la grille */
.off-socle{margin-top:clamp(1.75rem,3vw,2.5rem);padding:clamp(1.25rem,2.4vw,1.75rem);
  border-radius:1.125rem;background:#fff;border:1.5px solid var(--line);
  box-shadow:0 1px 2px rgba(15,19,34,.04),0 18px 44px -26px rgba(15,19,34,.18);}
.off-socle-t{font-family:var(--fd);font-size:1.1875rem;font-weight:700;color:var(--txt);}
.off-socle-d{margin-top:.4375rem;font-size:1rem;color:var(--body);line-height:1.6;}
.off-socle ul{list-style:none;margin-top:1.125rem;display:grid;gap:.625rem;
  grid-template-columns:1fr;}
@media (min-width:700px){.off-socle ul{grid-template-columns:1fr 1fr;gap:.625rem 1.75rem;}}
@media (min-width:1100px){.off-socle ul{grid-template-columns:repeat(4,1fr);}}
.off-socle li{position:relative;padding-left:1.625rem;font-size:.9688rem;
  line-height:1.45;color:var(--body);}
.off-socle li::before{content:'';position:absolute;left:0;top:.4375rem;
  width:.6875rem;height:.375rem;border:0 solid var(--copper);
  border-width:0 0 2px 2px;transform:rotate(-45deg);}

/* meme principe sur l'accueil : la hauteur des cartes dit l'echelle */
.hp-off{align-items:start;}

/* ══════════════════════════════════════════════════════════════
   RÉALISATIONS — le mur, les cas, le socle commun
   Le geste du métier : un site, ça ne se regarde pas en photo, ça se
   fait défiler. Donc ici ce sont les sites eux-mêmes qui défilent.
   État par défaut = état final visible : sans JS, tout est en haut,
   entier et lisible. Aucune classe ne masque quoi que ce soit.
   ══════════════════════════════════════════════════════════════ */

/* ── A. LE MUR ─────────────────────────────────────────────────
   Quatre sites entiers, en colonnes décalées, qui remontent à des
   vitesses différentes. Le décalage de départ est dans le CSS : même
   figé, ça lit comme un mur et pas comme un tableau. */
/* LA PLANCHE (09/09/2026, deuxieme passe).
   Premiere passe : j'avais epingle la scene sur trois ecrans pour donner du
   temps au defilement des six colonnes. Verdict de KINONE, et il a raison :
   six captures qui defilent chacune a sa vitesse, ce n'est pas un geste, c'est
   du bruit. On ne peut en lire aucune, et allonger la duree ne faisait
   qu'allonger le bruit.
   Ce que le mur doit faire, c'est prouver en une seconde que les six sites ne
   se ressemblent pas. Donc : UNE PLANCHE CONTACT, un seul ecran, les six
   PREMIERS ecrans lisibles, nommes, et une derive lente et COMMUNE aux six qui
   les fait lire comme une seule surface au lieu de six objets qui se croisent.
   Le vrai defilement, celui qu'on regarde, est dans les six sections d'apres :
   un site a la fois, ce qui est le seul geste intuitif. */
.mur-sec{position:relative;background:var(--ink);color:var(--w);
  overflow:clip;min-height:min(104svh,60rem);}
.mur-scene{display:flex;flex-direction:column;justify-content:flex-end;
  min-height:inherit;}
/* Les colonnes commencent SOUS la rangee de pastilles : sinon le nom de domaine
   se pose sur le titre du site qu'il designe, et cache justement ce qu'on est
   venu montrer. La reserve = la barre de navigation + la hauteur d'une pastille. */
.mur{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(.5rem,1.2vw,1.125rem);
  padding:calc(var(--nh) + clamp(3.25rem,7vh,4.5rem)) clamp(.5rem,1.2vw,1.125rem) 0;
  align-items:start;}
.mur-col{overflow:hidden;border-radius:1.75rem;
  transition:opacity .5s var(--e-out),filter .5s var(--e-out);}
/* L'entree : les six colonnes montent du bas, l'une apres l'autre. L'etat par
   defaut est l'etat FINAL (regle d'or) ; le point de depart n'existe que sous
   .mur-arme, posee par le JS lui-meme. Sans JS, tout est en place. */
.mur-arme .mur-col{opacity:0;transform:translate3d(0,16%,0);}
.mur-sec.vu .mur-col{opacity:1;transform:translate3d(0,0,0);
  transition:opacity .9s var(--e-out),transform 1.15s var(--e-out);}
.mur-sec.vu .mc-1{transition-delay:0s;}      .mur-sec.vu .mc-2{transition-delay:.11s;}
.mur-sec.vu .mc-3{transition-delay:.22s;}    .mur-sec.vu .mc-4{transition-delay:.33s;}
.mur-sec.vu .mc-5{transition-delay:.44s;}    .mur-sec.vu .mc-6{transition-delay:.55s;}
/* Une colonne designee s'allume, les cinq autres reculent. Le voile general
   s'efface sur la colonne visee pour qu'on reconnaisse VRAIMENT le site. */
.mur-p-vise .mur-col{opacity:.28;filter:saturate(.55) brightness(.62);}
.mur-p-vise .mur-col.vise{opacity:1;filter:none;transform:translate3d(0,0,0) scale(1.012);}
.mur-col img{width:100%;height:auto;}
.mur-col.bouge img,.mur-col.bouge{will-change:transform;}
/* Decalage de depart : les colonnes ne s'alignent jamais. */
.mc-2{margin-top:-11%;} .mc-3{margin-top:-4%;} .mc-4{margin-top:-16%;}

/* Le voile ne sert plus a proteger du texte — le cartouche s'en charge.
   Il ne fait que deux choses : assombrir la premiere bande pour que la
   barre de navigation reste lisible quand elle passe dessus, et calmer
   l'ensemble. Il reste donc LEGER : on doit reconnaitre les quatre sites. */
/* 09/09/2026 : la bande du haut passe de .86 a .52. Elle etait la pour rendre
   la barre de navigation lisible, mais la barre porte son propre verre blanc et
   les pastilles leur propre verre d'encre : personne n'avait besoin de ce noir.
   Or, depuis que la scene est epinglee, cette bande est la partie du mur qu'on
   regarde le plus longtemps. La rendre au site, c'est rendre la matiere. */
.mur-voile{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(15,19,34,.52) 0%,
    rgba(15,19,34,.34) 13%,
    rgba(15,19,34,.26) 42%,
    rgba(15,19,34,.32) 100%);}

/* Le nom de domaine au sommet de chaque colonne, en verre d'encre.
   Pire cas calcule sur une capture entierement blanche : 9,9:1. */
/* Sous 900 px le mur n a que deux colonnes visibles alors qu il en contient
   quatre : une pastille par colonne se retrouverait au-dessus de la mauvaise
   capture. On les met donc en simple legende, centree, sur une rangee. */
.mur-noms{position:absolute;top:0;left:0;right:0;z-index:2;list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.375rem,1.5vw,.625rem);
  /* La scene etant epinglee, la rangee reste sous la barre de navigation
     pendant TOUTE la traversee : elle doit donc lui laisser sa hauteur, sinon
     elle passe derriere. --nh est la hauteur reelle declaree de la barre. */
  padding:calc(var(--nh) + clamp(.75rem,2vh,1.375rem)) clamp(.75rem,3vw,1.125rem) 0;}
.mur-noms li{justify-self:center;max-width:100%;min-width:0;}
/* Le lien est une zone tactile de 44 px, transparente ; la pilule dessinée est
   son <span>. Le rendu est le même qu'avant, la cible fait la hauteur exigée
   (qa.js, 10/09/2026 : 34 px). */
.mur-noms a{display:flex;align-items:center;justify-content:center;max-width:100%;min-height:2.75rem;
  font-family:var(--fp);font-size:clamp(.6875rem,1.5vw,.8125rem);
  font-weight:700;letter-spacing:.06em;color:var(--w);
  transition:transform .34s var(--e-out),color .34s;}
.mur-noms a span{display:block;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
  padding:.4375rem .9375rem;border-radius:9999px;
  transition:background .34s,border-color .34s,box-shadow .34s;
  background:rgba(9,12,22,.72);border:1px solid rgba(240,242,248,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -12px rgba(4,7,16,.7);
  backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7);}
.mur-noms a:hover,.mur-noms a:focus-visible{transform:translateY(-3px) scale(1.06);color:#fff;}
.mur-noms a:hover span,.mur-noms a:focus-visible span{
  background:var(--grad-copper);border-color:rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 18px 34px -14px rgba(194,85,31,.78);}
.mur-noms a:focus-visible{outline:2px solid #fff;outline-offset:3px;}
/* Les cinq autres reculent pendant qu'une est visee. */
.mur-p-vise .mur-noms a{opacity:.42;}
.mur-p-vise .mur-noms a:hover,.mur-p-vise .mur-noms a:focus-visible{opacity:1;}

/* Le cartouche : encre pleine, qui se dissout vers le haut dans le mur.
   Les mots ne flottent plus sur des captures, ils ont leur propre sol. */
/* Un mot n'a jamais son propre sol a moitie. Le degrade s'etalait sur toute la
   hauteur du cartouche, si bien que l'etiquette « LA PLANCHE » se posait en
   cuivre sur la capture de la colonne 1, par-dessus un bouton du site.
   Le cartouche est donc une vraie dalle d'encre, avec un fondu court au-dessus
   d'elle : la dissolution dans le mur existe toujours, mais elle se fait AVANT
   le premier mot, pas dessous. La hauteur du fondu et la reserve du haut sont
   le meme nombre, sinon le texte remonte dans le fondu. */
.mur-carte{position:relative;z-index:1;
  --fondu:clamp(3rem,7vh,4.5rem);
  padding-top:var(--fondu);
  padding-bottom:clamp(2.5rem,5vw,3.75rem);
  background:linear-gradient(180deg,rgba(15,19,34,0) 0,var(--ink) var(--fondu));}
.mur-carte-in{display:grid;gap:clamp(1.375rem,3vw,2.25rem);align-items:end;}
.mur-mot .st{margin-top:.75rem;}
.mur-d{color:var(--w-dim);font-size:1.0625rem;line-height:1.62;}
.mur-go{display:inline-flex;align-items:center;gap:.625rem;justify-self:start;
  padding:.9375rem 1.625rem;border-radius:9999px;min-height:2.75rem;
  font-family:var(--fp);font-weight:700;font-size:1rem;color:#fff;
  white-space:nowrap;background:var(--grad-copper);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             0 1px 2px rgba(15,19,34,.06),
             0 26px 52px -20px rgba(194,85,31,.62);
  transition:transform .38s var(--e-out),box-shadow .38s;}
.mur-go:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
             0 1px 2px rgba(15,19,34,.06),
             0 34px 66px -20px rgba(194,85,31,.78);}
.mur-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--e-out);}
.mur-go:hover svg{transform:translateY(3px);}
/* Sous 900 px, le mur ne montre que DEUX colonnes alors qu'il en contient six :
   les six pastilles se rangeaient sur trois lignes par-dessus, et recouvraient
   exactement les deux sites qu'elles nommaient. Elles quittent donc le mur et
   redeviennent une simple rangee de liens, posee sur l'encre juste au-dessus du
   cartouche. Elles gardent leur role : six liens vers les six sections. */
/* La grille du mur ne montre qu'une rangee. Les colonnes surnumeraires
   tombaient dans une deuxieme rangee « que la section ne montre pas » : ca
   tenait par chance, et depuis que les colonnes commencent plus bas, cette
   rangee reapparait a 768 px et se lit comme des cartes qui se chevauchent.
   On la retire donc pour de bon. Aucune information ne se perd : le mur est
   decoratif (aria-hidden), les six sites ont chacun leur lien dans la rangee
   juste dessous ET leur section complete plus bas. */
@media (max-width:1279.98px){.mur-sec .mc-5,.mur-sec .mc-6{display:none;}}
@media (max-width:899.98px){
  .mur-sec .mc-3,.mur-sec .mc-4{display:none;}   /* la planche de Realisations seulement : le mur de l'accueil a trois colonnes */
  .mur{padding-top:calc(var(--nh) + .75rem);}
  /* La rangee rejoint le flux, et c'est ELLE qui porte desormais le fondu :
     le sol d'encre doit commencer au-dessus des pastilles, sinon elles restent
     posees sur les captures et le probleme n'a fait que descendre de 200 px.
     Le cartouche, lui, est deja sur l'encre : il n'a plus rien a fondre. */
  .mur-noms{position:static;justify-content:flex-start;
    padding:clamp(2.5rem,7vh,3.75rem) var(--px) clamp(.875rem,2.5vw,1.25rem);
    background:linear-gradient(180deg,rgba(15,19,34,0) 0,var(--ink) clamp(2.5rem,7vh,3.75rem));}
  .mur-carte{padding-top:0;background:var(--ink);}
}
@media (min-width:900px){
  .mur{grid-template-columns:repeat(4,1fr);}
  /* A partir de 4 colonnes, chaque pastille surmonte bien sa capture. */
  .mur-noms{display:grid;grid-template-columns:repeat(4,1fr);}
  .mur-noms li{justify-self:center;}
}

/* Six sites depuis le 01/09/2026. En dessous de 1280 px la grille en compte
   quatre : les deux dernieres colonnes tombent dans une rangee que la section
   ne montre pas, exactement comme les deux dernieres sur telephone. Le mur est
   decoratif (aria-hidden) et les six sites sont detailles juste en dessous. */
@media (min-width:1280px){
  .mur{grid-template-columns:repeat(6,1fr);}
  .mur-noms{grid-template-columns:repeat(6,1fr);}
  .mc-5{margin-top:-8%;}
  .mc-6{margin-top:-14%;}
}
@media (min-width:1040px){
  /* Rangee de trois, separee par des filets fins : l'etiquette et le titre,
     puis la phrase, puis le geste. Pas d'icone, l'etiquette suffit. */
  .mur-carte-in{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;}
  .mur-carte-in>*+*{padding-left:clamp(1.5rem,3vw,2.75rem);
    border-left:1px solid var(--ink-line2);align-self:stretch;}
  .mur-d{display:flex;align-items:flex-end;}
  .mur-go{align-self:end;}
}

/* ── B. UN CAS = UNE SECTION ───────────────────────────────────
   À gauche les faits, à droite le téléphone. Une section sur deux,
   le téléphone passe à gauche : le regard ne prend pas d'habitude. */
.cas{display:grid;gap:clamp(2.25rem,4.5vw,3.75rem);align-items:center;}
/* ── LA PAIRE D'ECRANS ──────────────────────────────────────────
   L'ordinateur et le telephone cote a cote, chacun avec SA capture, qui
   defilent ensemble. C'est ce que le client achete : un site qui tient
   sur les deux. Le telephone chevauche le coin de l'ecran et depasse en
   bas — le debord est ce qui donne la profondeur. */
.cas-ecrans{display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:clamp(1.5rem,7%,3.5rem);flex-wrap:wrap;}
.cas-inv .cas-ecrans{flex-direction:row-reverse;}
.pc{position:relative;flex:0 1 78%;min-width:0;
  border-radius:1.125rem;padding:0 .5rem .5rem;
  background:linear-gradient(150deg,#3a4262 0%,#0f1322 46%,#242b47 100%);
  box-shadow:inset 0 0 0 1.5px rgba(224,112,58,.26),
             0 1px 3px rgba(15,19,34,.10),
             0 44px 88px -34px rgba(194,85,31,.44);}
.pc-barre{display:flex;align-items:center;gap:.75rem;height:2.125rem;padding:0 .25rem;}
.pc-pts{display:flex;gap:.3125rem;flex-shrink:0;}
.pc-pts i{width:.4375rem;height:.4375rem;border-radius:50%;background:rgba(240,242,248,.26);}
.pc-url{flex:1;min-width:0;text-align:center;
  font-family:var(--fp);font-size:.75rem;font-weight:650;letter-spacing:.03em;
  color:var(--w-mute);background:rgba(240,242,248,.08);
  border:1px solid rgba(240,242,248,.10);border-radius:9999px;padding:.1875rem .75rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* L'ecran est sorti du flux : sans ca, une capture de 3400 px etirerait
   la boite et le rapport 16/10 ne tiendrait pas (meme piege que le
   telephone, corrige plus haut). */
.pc-ecran{position:relative;aspect-ratio:16/10;overflow:hidden;
  border-radius:.625rem;background:#fff;}
.pc-img{position:absolute;top:0;left:0;width:100%;height:auto;display:block;}
.pc-img.bouge{will-change:transform;}
/* Le cadre garde son rapport 9/19 quoi qu'il arrive : l'ecran est sorti
   du flux (position:absolute), sinon l'image de 4600 px etire la boite —
   aspect-ratio ne resiste pas a un contenu plus haut que lui. */
.cas-ecrans .tel{flex:0 0 25%;width:auto;margin-left:-9%;margin-bottom:-7%;
  z-index:2;border-radius:1.5rem;padding:.25rem;}
.cas-inv .cas-ecrans .tel{margin-left:0;margin-right:-9%;}
.cas-ecrans .tel-ecran{inset:.25rem;border-radius:1.3125rem;}
/* Le telephone deborde de 7 % sous la ligne : la legende doit passer
   dessous, pas derriere. Le pourcentage se calcule sur la LARGEUR du
   conteneur, comme toute marge verticale en pourcentage. */
.tel-note{flex:1 0 100%;margin-top:clamp(3rem,10%,5rem);}
.tel{position:relative;width:min(17.5rem,74vw);aspect-ratio:9/19;
  padding:.5rem;border-radius:2.875rem;
  background:linear-gradient(150deg,#3a4262 0%,#0f1322 44%,#242b47 100%);
  box-shadow:inset 0 0 0 1.5px rgba(224,112,58,.30),
             0 1px 3px rgba(15,19,34,.10),
             0 48px 92px -32px rgba(194,85,31,.46);}
.tel-ecran{position:absolute;inset:.5rem;overflow:hidden;
  border-radius:2.375rem;background:#fff;}
.tel-img{width:100%;height:auto;display:block;}
.tel-img.bouge{will-change:transform;}
/* L'ÎLE DYNAMIQUE. v91 : elle existait depuis le début et ne se voyait sur
   aucun des vingt-trois faux téléphones. Cause : la barre blanche du faux
   navigateur (z-index 4) et la barre d'état (z-index 5) sont des enfants de
   .tel-ecran, mais .tel-ecran ne cree pas de contexte d'empilement — elles
   se rangeaient donc dans celui du téléphone, AU-DESSUS de l'île restée en
   z-index automatique. Elle repasse au-dessus, et se dimensionne en cqw
   comme le reste de la barre : même proportion sur un téléphone de 60 px
   et sur un de 280 px. Proportions relevées sur un vrai iPhone : l'île fait
   environ 31 % de la largeur, son creux 9 %, et l'objectif se devine à
   droite. */
.tel-encoche{position:absolute;top:3.4cqw;left:50%;width:31cqw;height:9cqw;
  border-radius:9999px;background:#0b0e18;transform:translateX(-50%);z-index:6;
  box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.07);}
.tel-encoche::after{content:'';position:absolute;top:50%;right:2.4cqw;
  width:3.4cqw;height:3.4cqw;border-radius:50%;transform:translateY(-50%);
  background:radial-gradient(circle at 34% 30%,#39426a 0%,#141a2c 58%,#05070d 100%);}
.tel-note{font-family:var(--fp);font-size:.8125rem;font-weight:650;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-align:center;}
.sec-ink .tel-note{color:var(--w-mute);}

.cas-num{font-family:var(--fd);font-weight:800;line-height:1;letter-spacing:-.045em;
  font-size:clamp(2.75rem,6.5vw,4.25rem);
  background-image:linear-gradient(100deg,#d4652f 0%,#c2551f 62%,#a8441a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.sec-ink .cas-num{background-image:linear-gradient(100deg,#f19069 0%,#e0703a 58%,#c96234 100%);}
.cas-n{font-family:var(--fd);font-weight:700;letter-spacing:-.025em;line-height:1.06;
  font-size:clamp(1.875rem,4vw,3rem);margin-top:.375rem;color:var(--txt);}
.sec-ink .cas-n{color:var(--w);}
.cas-m{margin-top:.75rem;font-size:1.0625rem;line-height:1.6;color:var(--dim);}
.sec-ink .cas-m{color:var(--w-dim);}
.cas-faits{margin-top:clamp(1.375rem,2.8vw,1.875rem);display:grid;gap:1.125rem;}
.cas-faits>div{padding-left:1.125rem;border-left:1.5px solid var(--copper);}
.sec-ink .cas-faits>div{border-left-color:var(--copper-hi);}
.cas-faits dt{font-family:var(--fp);font-size:.8125rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--copper);margin-bottom:.3125rem;}
.sec-ink .cas-faits dt{color:var(--copper-hi);}
.cas-faits dd{font-size:1.0625rem;line-height:1.62;color:var(--body);}
.sec-ink .cas-faits dd{color:var(--w-dim);}
.cas-go{display:inline-flex;align-items:center;gap:.5rem;margin-top:clamp(1.625rem,3.2vw,2.125rem);
  padding:.9375rem 1.625rem;border-radius:9999px;min-height:2.75rem;
  font-family:var(--fp);font-weight:700;font-size:1rem;color:#fff;
  background:var(--grad-copper);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             0 1px 2px rgba(15,19,34,.06),
             0 24px 48px -20px rgba(194,85,31,.58);
  transition:transform .38s var(--e-out),box-shadow .38s;}
.cas-go:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
             0 1px 2px rgba(15,19,34,.06),
             0 32px 62px -20px rgba(194,85,31,.74);}
.cas-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .32s var(--e-out);}
.cas-go:hover svg{transform:translate(2px,-2px);}
@media (min-width:900px){
  .cas{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);}
  /* v89 : l'alternance d'un cas sur deux etait ECRITE mais visait .cas-tel,
     une classe qui n'existe nulle part dans realisations.html. Les six cas
     sortaient donc identiques, ecrans a gauche, et l'oeil prenait l'habitude
     des la deuxieme entreprise. Le bon nom est .cas-ecrans. Les colonnes se
     croisent aussi, sinon la plus large resterait du meme cote. */
  .cas-inv{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);}
  .cas-inv .cas-ecrans{order:2;}
  .cas-inv .cas-txt{order:0;}
}

/* ── C. LE SOCLE COMMUN ────────────────────────────────────────
   Trois colonnes séparées par des filets fins, pas d'icône :
   l'étiquette suffit et se lit mieux. */
.commun-sec{background:var(--paper2);}
.commun-head{margin-bottom:clamp(2rem,4vw,3.25rem);max-width:44rem;}
.commun-head .st{margin-top:.75rem;}
.commun{display:grid;gap:clamp(1.75rem,3.2vw,2.5rem);}
.commun-l{font-family:var(--fp);font-size:.8125rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mute);}
.commun-v{font-family:var(--fd);font-weight:700;letter-spacing:-.028em;line-height:1.08;
  font-size:clamp(1.75rem,3.4vw,2.375rem);color:var(--txt);margin:.5rem 0 .6875rem;}
.commun-d{font-size:1rem;line-height:1.62;color:var(--body);}
.commun-note{margin-top:clamp(2.25rem,4vw,3rem);font-size:.9688rem;
  color:var(--mute);max-width:46rem;}
@media (min-width:820px){
  .commun{grid-template-columns:repeat(3,1fr);}
  .commun>div+div{padding-left:clamp(1.5rem,3vw,2.75rem);border-left:1px solid var(--line2);}
}

@media (prefers-reduced-motion:reduce){
  .mur-col,.tel-img{transform:none!important;}
  .mur-go,.cas-go,.mur-go svg,.cas-go svg{transition:none;}
  .mur-go:hover,.cas-go:hover{transform:none;}
}

/* ── Barre de navigation entre 900 et 1279 px ──────────────────────
   Zone jamais controlee jusqu'au 31/08/2026 : les captures se faisaient
   en 1440 et 360, et le controle automatique ne cherchait que les
   debordements horizontaux, qu'il n'y avait pas. Ici la barre tient, mais
   de justesse : on resserre les intervalles et on descend d'un demi-point
   la taille des entrees pour lui laisser de l'air. La pilule d'appel, elle,
   ne se replie plus quelle que soit la largeur (voir .nav-cta). */
@media (min-width:1024px) and (max-width:1279px){
  .nav-links{gap:.625rem;}
  .nav-links>li>a{white-space:nowrap;}
  .nav-links>li>a:not(.nav-cta){font-size:.8125rem;}
  .nav-cta{padding:.5rem .875rem .5rem .3125rem;font-size:.8125rem;gap:.5rem;}
  .logo-img{height:2rem;}
  .nav-i{padding-left:.875rem;}
}

/* ---------------------------------------------------------------------------
   Zones tactiles de 44 px, sans changer un pixel a l'ecran.
   Un lien de pied de page haut de 22 px se rate au pouce une fois sur trois.
   On agrandit la boite CLIQUABLE avec du remplissage vertical, et on reprend
   exactement la meme hauteur en marge negative : la mise en page ne bouge pas,
   seule la cible grandit. Releve le 01/09/2026 par outils/qa.js a 360 px.
   --------------------------------------------------------------------------- */
.ft-legal a,.nav-i>a{padding-block:.6875rem;margin-block:-.6875rem;}
/* Agrandir la zone a toucher d'un lien de texte : on ajoute du rembourrage
   et on l'annule par une marge negative, pour ne pas ecarter les lignes.
   v91 : la regle visait TOUS les liens tel: et mailto:, y compris ceux qui
   sont deja des boutons pleine largeur. Dans le menu mobile, la pilule du
   telephone et celle de l'e-mail se chevauchaient donc de treize pixels, a
   toutes les tailles d'ecran, sur les 49 pages. Elle ne vise plus que les
   liens de texte : ceux qui ne portent aucune classe. */
.pbc a,a[href^="mailto:"]:not([class]),a[href^="tel:"]:not([class]){padding-block:.8125rem;margin-block:-.8125rem;}

/* ══ PAGES MÉTIER ══════════════════════════════════════════════════
   Trente-deux pages générées par outils/generer-metiers.py à partir de
   outils/metiers_donnees.py. Le préfixe mt- est réservé à ces pages
   (contrôlé par grep avant de le poser : aucune collision). */

/* En-tête : le texte à gauche, la carte des « trois choses » à droite. */
.mt-h1{font-size:clamp(2.125rem,4.4vw,3.375rem);}
.mt-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem;}
.mt-carte{position:relative;margin-top:2rem;padding:1.5rem 1.5rem 1.375rem;border-radius:1.5rem;
  background:var(--gloss),rgba(255,255,255,.74);
  backdrop-filter:blur(40px) saturate(2);-webkit-backdrop-filter:blur(40px) saturate(2);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 2px rgba(15,19,34,.05),0 34px 70px -26px rgba(194,85,31,.30);}
.mt-carte-ic{width:4.5rem;height:4.5rem;margin-bottom:1rem;
  filter:drop-shadow(0 12px 20px rgba(194,85,31,.26));}
.mt-carte-t{font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#a8441a;margin-bottom:1rem;}
.mt-trois{list-style:none;counter-reset:trois;display:grid;gap:.875rem;}
.mt-trois li{counter-increment:trois;display:grid;grid-template-columns:1.75rem 1fr;
  gap:.125rem .75rem;align-items:baseline;padding-top:.875rem;border-top:1px solid var(--line);}
.mt-trois li:first-child{border-top:0;padding-top:0;}
.mt-trois li::before{content:counter(trois,decimal-leading-zero);grid-row:span 2;
  font-family:var(--fd);font-weight:800;font-size:.875rem;color:var(--copper-txt);}
.mt-trois b{font-family:var(--fd);font-size:1.125rem;font-weight:700;letter-spacing:-.01em;color:var(--txt);}
.mt-trois span{grid-column:2;font-size:.9375rem;color:var(--body);line-height:1.5;}
@media (min-width:1000px){
  .mt-carte{margin-top:0;grid-column:2;max-width:26rem;justify-self:end;width:100%;}
  .js .mt-carte{animation:kn-art 1s var(--e-out) backwards .18s;}
}
@media (prefers-reduced-motion:reduce){.js .mt-carte{animation:none;}}

/* Le geste : une colonne étroite, décalée, beaucoup d'air. */
.mt-geste-in{max-width:52rem;}
.mt-geste .st{max-width:24ch;}
.mt-geste-txt{margin-top:clamp(1.75rem,3vw,2.5rem);display:grid;gap:1.25rem;
  font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.72;color:var(--body);}
.mt-geste-txt p:first-child{font-size:clamp(1.1875rem,1.6vw,1.4375rem);color:var(--txt);
  font-weight:500;line-height:1.55;}
@media (min-width:900px){.mt-geste-in{padding-left:clamp(0px,7vw,7rem);}}

/* Le bandeau : cuivre foncé pour tenir 4,5:1 en blanc sur le point le plus
   clair du dégradé (#b94f1c donne 5,0:1 ; le cuivre de marque #e0703a ne
   donnerait que 3,8:1). Le reflet reste à gauche, sous la grande phrase. */
.mt-bandeau{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(115deg,#b94f1c 0%,#a8441a 55%,#8a3712 100%);
  padding-block:clamp(3rem,6vw,4.5rem);}
.mt-bandeau::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 120% at 0% 0%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 50%);}
.mt-bandeau-in{position:relative;display:grid;gap:clamp(1.5rem,3vw,3rem);align-items:start;}
.mt-peur{font-family:var(--fd);font-size:clamp(1.375rem,2.6vw,2.125rem);font-weight:700;
  letter-spacing:-.02em;line-height:1.22;color:#fff;}
.mt-preuve-k{font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.86);margin-bottom:.625rem;}
.mt-preuve-t{font-family:var(--fd);font-size:clamp(1.25rem,2vw,1.625rem);font-weight:700;
  letter-spacing:-.015em;line-height:1.25;margin-bottom:.75rem;color:#fff;}
.mt-preuve-p{font-size:1.0313rem;line-height:1.68;color:#fff;}
@media (min-width:900px){
  .mt-bandeau-in{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);}
  .mt-preuve{padding-left:clamp(1.5rem,3vw,3rem);border-left:1px solid rgba(255,255,255,.35);}
}

/* Le plan : une liste numérotée à filets, pas des cartes. */
.mt-plan{list-style:none;counter-reset:plan;border-top:1px solid var(--line2);}
.mt-plan li{counter-increment:plan;display:grid;grid-template-columns:3rem 1fr;gap:.3125rem 1rem;
  padding:1.375rem 0;border-bottom:1px solid var(--line2);}
.mt-plan li::before{content:counter(plan,decimal-leading-zero);grid-row:span 3;
  font-family:var(--fd);font-weight:800;font-size:1.375rem;letter-spacing:-.03em;line-height:1.1;
  color:var(--copper-txt);}
.mt-plan-q{font-size:1rem;line-height:1.4;color:var(--dim);font-style:italic;}
.mt-plan-n{font-family:var(--fd);font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:700;
  letter-spacing:-.02em;line-height:1.15;color:var(--txt);}
.mt-plan-d{font-size:1rem;line-height:1.62;color:var(--body);}
.mt-plan-seul{max-width:52rem;}
.mt-cas .cas-ecrans{margin-top:2.5rem;}
@media (min-width:900px){.mt-cas .cas-ecrans{margin-top:0;}}

/* Les objections : deux cartes de verre sombre. */
.mt-objs{display:grid;gap:1.25rem;}
.mt-obj{padding:clamp(1.5rem,3vw,2.25rem);border-radius:1.5rem;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid var(--ink-line2);}
.mt-obj-q{font-family:var(--fd);font-size:clamp(1.125rem,1.7vw,1.375rem);font-weight:700;
  letter-spacing:-.015em;line-height:1.3;color:var(--w);}
.mt-obj-r{margin-top:.875rem;font-size:1.0313rem;line-height:1.7;color:var(--w-dim);}
@media (min-width:900px){.mt-objs{grid-template-columns:1fr 1fr;gap:1.75rem;}}

/* La formule : le raisonnement à gauche, la carte du prix à droite. */
.mt-formule-in{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;}
.mt-f-p{margin-top:1.25rem;font-size:1.0625rem;line-height:1.7;color:var(--body);max-width:38rem;}
.mt-f-carte{display:flex;flex-direction:column;gap:.5rem;padding:2rem;border-radius:1.5rem;
  background:#fff;border:1.5px solid var(--copper);text-decoration:none;color:var(--txt);
  box-shadow:0 1px 2px rgba(15,19,34,.05),0 34px 70px -26px rgba(194,85,31,.42);
  transition:transform .45s var(--e-out),box-shadow .45s;}
.mt-f-carte:hover{transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(15,19,34,.06),0 44px 90px -30px rgba(194,85,31,.5);}
.mt-f-n{font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#a8441a;}
.mt-f-prix{font-family:var(--fd);font-size:clamp(3rem,6vw,4.5rem);font-weight:800;
  letter-spacing:-.045em;line-height:1;}
.mt-f-prix sup{font-size:.3em;font-weight:700;letter-spacing:0;margin-left:.375rem;
  vertical-align:super;color:var(--dim);}
.mt-f-l{font-size:.9688rem;line-height:1.5;color:var(--body);}
.mt-f-go{display:inline-flex;align-items:center;gap:.375rem;margin-top:.75rem;
  font-weight:700;color:var(--copper-txt);}
.mt-f-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-out);}
.mt-f-carte:hover .mt-f-go svg{transform:translateX(5px);}
@media (min-width:900px){.mt-formule-in{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);}}

/* Métiers proches, sous le bloc de fin : le maillage entre pages. */
.mt-proches{position:relative;z-index:1;margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;
  border-top:1px solid var(--ink-line2);display:flex;flex-wrap:wrap;align-items:center;gap:.625rem;}
.mt-proches p{font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--w-mute);margin-right:.5rem;}
.mt-proches a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem 1.125rem;
  border-radius:9999px;border:1px solid rgba(244,243,238,.28);color:var(--w);
  font-size:.9375rem;font-weight:600;
  transition:border-color .25s,color .25s,transform .3s var(--e-out);}
.mt-proches a:hover{border-color:var(--copper-hi);color:var(--copper-hi);transform:translateY(-2px);}
@media (prefers-reduced-motion:reduce){
  .mt-f-carte,.mt-proches a,.mt-f-go svg{transition:none;}
  .mt-f-carte:hover,.mt-proches a:hover{transform:none;}
}

/* ══ OFFRES EN CARROUSEL SOUS LA GRILLE ═══════════════════════════════
   Sur téléphone et tablette, les trois formules se parcourent au doigt,
   côte à côte, au lieu de s'empiler. Défilement natif, aimanté sur
   chaque carte, commandé par le visiteur : rien ne bouge tout seul. Les
   points de position sont posés par le JS ; sans JS, le conteneur
   défile quand même. L'indication écrite reste dans tous les cas sous la
   grille ; sur grand écran, les trois cartes sont visibles, elle disparaît. */
@media (max-width:1039px){
  .hp-off{display:flex;grid-template-columns:none;max-width:none;overflow-x:auto;
    overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:1rem;
    margin-inline:calc(-1*var(--px));padding:.875rem var(--px) 1.25rem;
    scroll-padding-inline:var(--px);-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .hp-off::-webkit-scrollbar{display:none;}
  .hp-off>.hp-o{flex:0 0 min(84vw,22rem);scroll-snap-align:center;margin-top:.8125rem;}
}
/* Sous 1100 px, les trois cartes d'Offres ne sont plus un carrousel (KINONE,
   9 septembre au soir : « pas ce qu'un utilisateur apprecie le plus »). Elles
   s'empilent, et le JS pose des ONGLETS : une seule carte visible, choisie par
   une barre Vitrine / Pro / Sur mesure collee sous la barre de navigation.
   Sans JS : les trois empilees, rien de cache. */
@media (max-width:1099px){
  .off-grid{max-width:34rem;margin-inline:auto;}
  .js .off-grid.onglets>.off-card:not(.on){display:none;}
  .car--1099,.car-pts--1099{display:none!important;}
}
.off-onglets{display:none;}
@media (max-width:1099px){
  .js .off-onglets{display:flex;gap:.375rem;position:sticky;top:calc(var(--nh) + .5rem);z-index:20;
    margin:0 auto 1rem;padding:.3125rem;max-width:34rem;border-radius:9999px;
    background:rgba(255,255,255,.72);border:1px solid var(--line2);
    backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
    box-shadow:0 1px 2px rgba(15,19,34,.05),0 18px 40px -24px rgba(15,19,34,.35);}
  .off-onglets button{flex:1;min-height:2.75rem;padding:.5rem .5rem;border-radius:9999px;border:0;background:none;
    font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
    transition:background .3s,color .3s;}
  .off-onglets button[aria-selected="true"]{background:var(--grad-copper);color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 22px -12px rgba(194,85,31,.7);}
  .off-onglets button:focus-visible{outline:2px solid var(--copper);outline-offset:2px;}
  /* La carte visee se cale sous la barre ET sous les onglets. */
  .off-card{scroll-margin-top:calc(var(--nh) + 4.5rem);}
}
.car-hint{display:none;font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);text-align:center;margin-top:.25rem;}
.car-pts{display:none;justify-content:center;gap:.25rem;margin-top:.125rem;}
.car-pts button{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:9999px;}
.car-pts button i{display:block;width:.5rem;height:.5rem;border-radius:9999px;background:var(--line2);
  transition:transform .3s var(--e-out),background .3s;}
.car-pts button[aria-current="true"] i{background:var(--copper);transform:scale(1.5);}
/* L'indication et les points sont AU-DESSUS des cartes depuis le 6 septembre
   2026, à la demande de KINONE : en bas, on ne voyait pas en même temps le prix
   (qui est en haut de la carte) et le repère qui dit qu'il y en a deux autres à
   côté. Les sélecteurs frères ne peuvent plus servir — ils ne regardent que ce
   qui SUIT — d'où un marqueur de largeur posé dans le HTML sur chaque page. */
.car-hint{margin:0 0 .625rem;}
.car-pts{margin:0 0 .875rem;}
@media (max-width:1039px){.car--1039{display:block;} .car-pts--1039{display:flex;}}
@media (max-width:1099px){.car--1099{display:block;} .car-pts--1099{display:flex;}}

/* ══ ACCUEIL : la photo de Kilian dans « Qui fait le travail » ═══════
   La moitié droite de la bande sombre était vide. La vraie photo, celle
   de la page À propos, servie en 400 px sur téléphone. */
.qui-g{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;}
.qui-photo{margin:0;width:100%;max-width:20rem;justify-self:center;}
.qui-photo img{display:block;width:100%;height:auto;border-radius:1.5rem;
  border:1px solid rgba(244,243,238,.14);
  box-shadow:0 1px 2px rgba(0,0,0,.25),0 40px 80px -30px rgba(224,112,58,.45);}
.qui-photo figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem;
  margin-top:1rem;padding-left:.25rem;}
.qui-photo b{font-family:var(--fd);font-size:1.125rem;font-weight:700;color:var(--w);}
.qui-photo span{font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--copper-hi);}
@media (min-width:900px){
  .qui-g{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
  .qui-photo{justify-self:end;max-width:22rem;}
}

/* La mesure vivante du sous-titre (temps d'affichage relevé chez le visiteur). */
.hsub .mesure{font-family:var(--fd);font-weight:700;color:var(--txt);white-space:nowrap;
  transition:color .6s var(--e-out);}
.hsub .mesure.releve{color:var(--copper-txt);}
@media (prefers-reduced-motion:reduce){.hsub .mesure{transition:none;}}

/* Le surtitre du héros tient sur une ligne sur les petits écrans. */
@media (max-width:420px){.hkick{font-size:.75rem;letter-spacing:.01em;gap:.5rem;} .hkick::before{margin-right:1rem;}}

/* ══ NAVIGATION v76 ════════════════════════════════════════════════════
   Plus de barre pleine largeur : une PASTILLE de verre flottante, centrée,
   qui se détache du papier au défilement. Sur téléphone et tablette, la
   navigation descend au pouce : un DOCK en bas (menu, recherche, appel,
   projet), le logo seul en haut, le menu qui monte en nappe. L'icône de
   menu est une grille de neuf pixels, l'ADN du logo, dont les bords
   s'effacent pour laisser une croix. Ces règles remplacent celles de la
   barre v75 plus haut dans la feuille (même sélecteurs, écrites après). */
:root{--nh:5.5rem;}
#nav{padding-top:.875rem;background:none;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:padding .45s var(--e-out),opacity .3s var(--e-out);}
/* v91 : au defilement, la barre gardait l'ombre pleine largeur de l'epoque
   ou elle avait un fond sur toute la largeur. Le fond, le flou et le bord
   avaient ete retires quand la barre est devenue une pilule ; l'ombre, non.
   Elle dessinait une bande transparente d'un bord a l'autre de l'ecran, qui
   assombrissait le contenu sous elle sans rien porter. La pilule a la sienne. */
#nav.sc{padding-top:.5rem;background:none;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;}
.nav-i{height:auto;max-width:74rem;margin-inline:auto;padding:.5rem .5rem .5rem 1.25rem;border-radius:9999px;
  background:var(--gloss),rgba(242,243,245,.8);
  backdrop-filter:blur(40px) saturate(2);-webkit-backdrop-filter:blur(40px) saturate(2);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 1px 2px rgba(15,19,34,.05),0 18px 44px -24px rgba(15,19,34,.22);
  transition:box-shadow .45s var(--e-out),padding .45s var(--e-out);}
#nav.sc .nav-i{padding:.375rem .375rem .375rem 1.125rem;
  box-shadow:0 1px 2px rgba(15,19,34,.06),0 30px 70px -26px rgba(194,85,31,.36);}
.nav-logo{display:block;flex-shrink:0;}
.logo-img{flex-shrink:0;}
.logo-img{height:2.25rem;}
#nav.over-dark:not(.sc) .logo-img{filter:none;}
#nav.over-dark:not(.sc) .nav-links>li>a:not(.nav-cta){color:var(--body);}
#nav.over-dark:not(.sc) .nav-links>li>a:not(.nav-cta):hover{color:var(--txt);}
#nav.over-dark:not(.sc) .nav-links>li>a:not(.nav-cta)::after{background:var(--txt);}
#nav.over-dark:not(.sc) .nav-search{color:var(--txt);border-color:var(--line2);}
.nav-links{gap:1.5rem;}
.nav-links>li>a{white-space:nowrap;}
.nav-links>li>a[aria-current]{color:var(--txt);}
.nav-links>li>a[aria-current]::after{transform:scaleX(1);background:var(--copper);}
.nav-cta,#nav.over-dark:not(.sc) .nav-cta{display:inline-flex;align-items:center;gap:.625rem;height:2.875rem;padding:.3125rem 1.125rem .3125rem .3125rem;
  background:var(--grad-copper);color:#fff!important;font-size:.9375rem;font-weight:700;border-radius:9999px;
  box-shadow:0 1px 2px rgba(15,19,34,.08),0 14px 30px -14px rgba(194,85,31,.6);transition:transform .3s var(--e-out),box-shadow .3s;}
.nav-cta:hover,#nav.over-dark:not(.sc) .nav-cta:hover{background:var(--grad-copper);color:#fff!important;transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(15,19,34,.08),0 20px 40px -16px rgba(194,85,31,.7);}
.nc-ic{width:2.25rem;height:2.25rem;flex:0 0 auto;display:grid;place-items:center;border-radius:9999px;background:rgba(255,255,255,.2);}
.nc-ic svg{width:1rem;height:1rem;fill:#fff;stroke:#fff;stroke-width:1.2;stroke-linejoin:round;}
.nav-cta:hover .nc-ic svg{animation:press .5s var(--e-out);}

/* Le dock et l'icône en pixels. */
.dock{position:fixed;left:50%;transform:translateX(-50%);z-index:950;display:none;align-items:center;gap:.25rem;
  bottom:calc(.875rem + env(safe-area-inset-bottom));max-width:calc(100vw - 1.5rem);padding:.375rem;border-radius:9999px;
  background:rgba(13,17,32,.88);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);
  border:1px solid rgba(244,243,238,.14);box-shadow:0 1px 2px rgba(0,0,0,.3),0 24px 60px -20px rgba(0,0,0,.6);}
.dock .burger{height:2.875rem;padding:0 .875rem 0 .875rem;border:0;color:var(--w);background:none;border-radius:9999px;gap:.625rem;}
.dock .burger:hover,.dock .burger:focus-visible{color:var(--copper-hi);border:0;}
.dock .bg-t{font-size:.875rem;}
.bg-i{display:grid;grid-template-columns:repeat(3,4px);grid-auto-rows:4px;gap:3px;width:auto;}
.bg-i i{width:4px;height:4px;border-radius:1px;background:currentColor;transform:none;transition:opacity .3s,transform .35s var(--e-out),background .3s;}
.burger.open .bg-i i:first-child,.burger.open .bg-i i:last-child{width:4px;transform:none;}
.burger.open .bg-i i:nth-child(2),.burger.open .bg-i i:nth-child(4),.burger.open .bg-i i:nth-child(6),.burger.open .bg-i i:nth-child(8){opacity:0;transform:scale(.2);}
.burger.open .bg-i i:nth-child(5){background:var(--copper-hi);}
.dock-tel{width:2.875rem;height:2.875rem;border-radius:9999px;display:grid;place-items:center;background:var(--grad-copper);color:#fff;}
.dock-tel svg{width:1.0625rem;height:1.0625rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.dock-cta{height:2.875rem;padding:0 1.125rem;display:inline-flex;align-items:center;border-radius:9999px;
  background:var(--paper);color:var(--ink);font-family:var(--fd);font-weight:700;font-size:.9375rem;white-space:nowrap;}
body.menu-open .dock{z-index:960;}

/* ── LE MENU MOBILE ─────────────────────────────────────────────
   v91, sur trois remarques de KINONE : « trop chargé, on ne sait plus où
   cliquer », « avec un gros doigt », « il y a des choses qui se superposent ».
   Avant : six cartes en deux colonnes, chacune avec bordure, fond, icône,
   titre replié sur deux lignes et légende, puis un pied de trois éléments.
   Sur 360 px, ça ne tenait pas, il fallait faire défiler le menu, et le
   bouton d'appel finissait sous la barre du bas.
   Maintenant : une liste. Une entrée par ligne, toute la largeur, 60 px de
   haut au minimum, l'icône à gauche, le chevron à droite, la ligne entière
   se touche. L'entrée « Contact » est retirée : elle faisait doublon avec
   « Mon projet » de la barre du bas, et la navigation du grand écran ne l'a
   pas non plus. Cinq lignes plus le contact tiennent sans défiler. */
#mob{inset:auto 0 0 0;max-height:88svh;overflow:auto;border-radius:1.75rem 1.75rem 0 0;
  padding:1.125rem var(--px) calc(var(--dock-h,3.75rem) + 2.75rem + env(safe-area-inset-bottom));
  background:rgba(15,19,34,.96);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);
  border-top:1px solid rgba(244,243,238,.14);box-shadow:0 -30px 80px -30px rgba(0,0,0,.7);}
#mob.open{display:block;}
/* La poignée : elle dit que la nappe se referme, et elle sépare le menu du
   contenu qu'on voit encore au-dessus. */
#mob::before{content:'';display:block;width:2.25rem;height:.25rem;margin:0 auto 1rem;
  border-radius:9999px;background:rgba(244,243,238,.22);}
.mob-links{display:flex;flex-direction:column;gap:0;}
.mob-links a{position:relative;display:grid;grid-template-columns:2.75rem 1fr .75rem;
  align-items:center;column-gap:.875rem;row-gap:.0625rem;
  padding:.75rem .25rem;min-height:60px;border:0;border-radius:.875rem;background:none;}
.mob-links a+a{border-top:1px solid var(--ink-line);}
.mob-links img{grid-row:1/3;width:2.75rem;height:2.75rem;margin:0;padding:.625rem;
  border-radius:.875rem;background:rgba(224,112,58,.11);
  box-shadow:inset 0 0 0 1px rgba(224,112,58,.16);}
.mob-links .ml-t{grid-column:2;font-family:var(--fd);font-weight:700;font-size:1.125rem;
  letter-spacing:-.015em;line-height:1.2;}
.mob-links .ml-d{grid-column:2;display:block;font-family:var(--fb);font-size:.8125rem;
  font-weight:400;color:var(--w-mute);line-height:1.35;}
.mob-links a::after{content:'';grid-column:3;grid-row:1/3;justify-self:end;
  width:.5rem;height:.5rem;border-right:2px solid rgba(244,243,238,.34);
  border-top:2px solid rgba(244,243,238,.34);transform:rotate(45deg);
  transition:transform .3s var(--e-out),border-color .3s;}
.mob-links a:active{background:rgba(255,255,255,.05);}
.mob-links a:active::after,.mob-links a:focus-visible::after{border-color:var(--copper-hi);
  transform:rotate(45deg) translate(2px,-2px);}
/* La page où l'on est : un trait de cuivre à gauche, comme le soulignement
   de la barre du grand écran. */
.mob-links a[aria-current]::before{content:'';position:absolute;left:-.375rem;top:.875rem;bottom:.875rem;
  width:3px;border-radius:9999px;background:var(--grad-copper);}
.mob-links a[aria-current] .ml-t{color:var(--copper-hi);}
.mob-foot{margin-top:1.125rem;padding-top:1.125rem;border-top:1px solid var(--ink-line2);display:grid;gap:.75rem;}
nav.open{padding-bottom:calc(var(--dock-h,3.75rem) + 2.75rem + env(safe-area-inset-bottom))!important;}
/* Fenêtre basse (360 × 640, la plus dure) : les cinq lignes et le contact
   doivent tenir sans faire défiler le menu. On resserre les lignes, pas le
   texte, et la zone tactile reste au-dessus de 44 px. */
@media (max-height:820px){
  #mob{max-height:92svh;padding-top:1rem;}
  #mob::before{margin-bottom:.75rem;}
  .mob-links a{min-height:56px;padding-block:.625rem;}
  .mob-foot{margin-top:.875rem;padding-top:.875rem;gap:.625rem;}
}
@media (max-height:700px){
  #mob{max-height:94svh;padding-top:.75rem;}
  #mob::before{margin-bottom:.5rem;}
  .mob-links a{min-height:54px;padding-block:.5rem;}
  .mob-links img{width:2.5rem;height:2.5rem;padding:.5625rem;}
  .mob-links .ml-t{font-size:1.0625rem;}
  .mob-foot{margin-top:.75rem;padding-top:.75rem;gap:.5rem;}
  .mob-call{padding:.875rem;font-size:1.0625rem;}
  .mob-mail{padding:.75rem;}
}

@media (max-width:1023px){
  :root{--nh:4.25rem;}
  #nav{padding-top:.625rem;}
  #nav.sc{padding-top:.5rem;}
  .nav-i{display:inline-flex;max-width:none;padding:.375rem .625rem .375rem .5rem;
    background:none;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
  #nav.sc .nav-i{padding:.375rem .625rem .375rem .5rem;background:var(--gloss),rgba(242,243,245,.82);
    backdrop-filter:blur(40px) saturate(2);-webkit-backdrop-filter:blur(40px) saturate(2);
    border-color:rgba(255,255,255,.88);box-shadow:0 1px 2px rgba(15,19,34,.05),0 18px 44px -24px rgba(15,19,34,.25);}
  .logo-img{height:2.25rem;}
  #nav .wrap{text-align:center;}   /* le logo au centre, comme KINONE le demande sur téléphone */
  .nav-i{padding-inline:.625rem;}
  .nav-links{display:none;}
  .dock{display:flex;}
}
@media (min-width:1024px){.dock{display:none;} #mob{display:none!important;}}
@media (prefers-reduced-motion:reduce){.nav-cta:hover .nc-ic svg{animation:none;} .bg-i i,.nav-i,#nav{transition:none;}}

/* ══ HÉROS v78 : LA RECHERCHE JOUÉE ══════════════════════════════════
   Consolidé le 3 septembre 2026 : ce bloc remplace les trois blocs
   v76 / v77 qui s'écrasaient l'un l'autre. Une vraie fenêtre de
   navigateur et un vrai téléphone, chacun avec le premier écran d'un
   site client. Sur ordinateur, au chargement : la page vierge d'un
   moteur sans marque, le curseur clique la barre, un clavier de verre
   monte au pied de la fenêtre, tape « art batiment », Entrée, les
   résultats, le clic, le vrai site s'ouvre sur les deux écrans, puis la
   carte de conclusion se pose. Sans JS, sur téléphone, en mouvement
   réduit : le site est là tout de suite, la carte aussi.
   Retirés en v78, à la demande de KINONE : les trois étiquettes
   flottantes, le mot KINONE en filigrane, la dissolution en damier. */
/* z-index 2 : le fondu du bas (#hero::after) passait DEVANT la légende et la carte, c'est ce qui les cachait. */
.hero-scene{position:relative;z-index:2;perspective:1600px;}
.hero-ecrans{position:relative;z-index:1;padding-bottom:clamp(1.5rem,7%,3.5rem);
  transform:rotateX(calc(var(--my,0)*-3deg)) rotateY(calc(var(--mx,0)*5deg));
  transform-style:preserve-3d;transition:transform .7s var(--e-out);will-change:transform;}
/* La nappe de lumière sous les appareils : ce qui les pose sur quelque chose
   au lieu de les laisser flotter. Elle s'incline avec eux. */
.hero-ecrans::after{content:'';position:absolute;left:2%;right:2%;bottom:-6%;height:38%;z-index:0;pointer-events:none;
  background:radial-gradient(52% 58% at 50% 62%,rgba(194,85,31,.30),rgba(194,85,31,.11) 46%,transparent 74%);
  filter:blur(18px);}
.hero-pc{position:relative;z-index:1;flex:0 1 82%;}
/* Le relief, fin : une arête éclairée en haut, une tranche de trois pixels
   en bas, une ombre de contact courte. L'inclinaison à la souris fait le
   reste ; plus épais, ça ferait jouet. */
.hero-pc,.hero-tel{box-shadow:
  inset 0 1px 0 rgba(255,255,255,.20),
  inset 0 -1px 0 rgba(0,0,0,.38),
  inset 0 0 0 1.5px rgba(224,112,58,.26),
  0 1px 0 #2a3255,0 2px 0 #1c2243,0 3px 0 #11152c,
  0 5px 8px rgba(15,19,34,.22),
  0 44px 88px -34px rgba(194,85,31,.44);}
/* Les boutons sur la tranche du téléphone : deux à gauche, un à droite. */
.hero-tel::before,.hero-tel::after{content:'';position:absolute;width:2px;border-radius:9999px;background:#1c2243;}
.hero-tel::before{left:-2px;top:19%;height:1.5rem;box-shadow:0 2.25rem 0 #1c2243;}
.hero-tel::after{right:-2px;top:25%;height:2.25rem;}
/* Les images : premier écran, rien ne glisse. Dans le téléphone, le site
   commence SOUS la barre du navigateur, comme sur un vrai iPhone. */
.hero-ecran img{transition:opacity .55s var(--e-out);}
/* Les sites défilent DANS leurs écrans quand on descend (--hs écrit par le JS,
   0 en haut de page). Les captures sont la page entière, avec le premier écran
   réel (barre de navigation comprise) recomposé en tête : outils/refs-ecran1.py
   ne suffisait plus, voir PROJET.md v80. */
.hero-ecran img.on{transform:translateY(calc(var(--hs,0)*-.55px));}
.hero-tel .tel-img.on{transform:translateY(calc(var(--hs,0)*-.85px));}
.hero-ecran img:not(.on),.hero-tel .tel-img:not(.on){opacity:0;pointer-events:none;}
/* Le téléphone est un conteneur : sa barre (heure, île, réseau, batterie,
   pilule d'adresse) se mesure en cqw, donc elle suit sa largeur réelle,
   150 px sur grand écran comme 130 px sur téléphone. En rem, elle débordait
   sur mobile. */
.hero-tel{--tel-chrome:33cqw;container-type:inline-size;}
.hero-tel .tel-img{position:absolute;left:0;top:var(--tel-chrome);width:100%;height:auto;transition:opacity .55s var(--e-out);}
/* La barre du téléphone : heure, île, réseau et batterie, puis la pilule d'adresse. */
.tel-haut{position:absolute;left:0;right:0;top:0;height:16cqw;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:2cqw 6cqw 0;font-family:var(--fp);font-size:6cqw;font-weight:700;letter-spacing:.01em;color:var(--ink);}
.th-etat{display:flex;gap:2.5cqw;align-items:center;}
.th-etat i{display:block;}
.th-reseau{width:6.5cqw;height:4.5cqw;background:linear-gradient(to right,var(--ink) 0 22%,transparent 22% 39%,var(--ink) 39% 61%,transparent 61% 78%,var(--ink) 78%);
  clip-path:polygon(0 62%,100% 0,100% 100%,0 100%);}
.th-batt{width:9cqw;height:4.5cqw;padding:1px;border:1px solid rgba(15,19,34,.5);border-radius:.125rem;
  background:linear-gradient(to right,var(--ink) 0 78%,transparent 78%) content-box;}
.tel-url{position:absolute;left:5cqw;right:5cqw;top:17.5cqw;height:13cqw;z-index:5;display:flex;align-items:center;justify-content:center;gap:2cqw;padding:0 3cqw;
  border-radius:9999px;background:var(--paper2);font-family:var(--fp);font-size:6cqw;font-weight:650;letter-spacing:.02em;color:var(--txt);
  white-space:nowrap;overflow:hidden;}
.tel-url svg{width:5.5cqw;height:5.5cqw;fill:none;stroke:var(--mute);stroke-width:2.2;stroke-linecap:round;flex:0 0 auto;}
/* La barre du navigateur a un vrai fond : quand le site défile dans l'écran, il
   passe DESSOUS, pas au travers (vu sur mobile : le site apparaissait derrière l'heure). */
.hero-tel-ecran::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--tel-chrome);background:#fff;border-bottom:1px solid var(--line);z-index:4;}
/* Le moteur : accueil (barre centrée) puis résultats. Le même bloc dans le
   téléphone, plus petit, sous la barre du navigateur. */
.hero-moteur{display:none;position:absolute;inset:0;z-index:4;background:#fff;}
.js .hero-ecran.recherche .hero-moteur,.js .hero-scene.recherche .hero-moteur-tel{display:block;}
.hero-moteur.part{opacity:0;transition:opacity .45s var(--e-out);}
.hero-moteur .hm-accueil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem;}
.hero-moteur .hm-page{position:absolute;inset:0;padding:1.125rem 1.5rem;opacity:0;visibility:hidden;transition:opacity .35s var(--e-out);}
.hero-moteur.resultats .hm-accueil{opacity:0;visibility:hidden;}
.hero-moteur.resultats .hm-page{opacity:1;visibility:visible;}
.hm-marque{width:2.75rem;height:2.75rem;border-radius:9999px;display:grid;place-items:center;background:var(--paper);}
.hm-marque svg{width:1.25rem;height:1.25rem;stroke:var(--copper);fill:none;stroke-width:2.2;stroke-linecap:round;}
.hm-barre{display:flex;align-items:center;gap:.625rem;height:2.5rem;padding:0 .875rem;border-radius:9999px;
  border:1.5px solid var(--line2);background:#fff;font-family:var(--fb);font-size:.9375rem;color:var(--txt);
  box-shadow:0 1px 2px rgba(15,19,34,.04);transition:border-color .3s,box-shadow .3s;}
.hm-barre.actif{border-color:var(--copper);box-shadow:0 0 0 4px rgba(194,85,31,.12);}
.hm-barre svg{width:1rem;height:1rem;stroke:var(--mute);fill:none;stroke-width:2;stroke-linecap:round;flex:0 0 auto;}
.hm-txt{white-space:nowrap;overflow:hidden;}
/* v89 — le trait de saisie est un enfant flex de la barre, il heritait donc
   du gap de .625rem : 10 px entre la derniere lettre et le curseur de texte.
   Un vrai champ de saisie colle le trait a la lettre. La marge negative annule
   l essentiel du gap sans toucher au reste de la barre. */
.hm-caret{width:1.5px;height:1.125rem;background:var(--copper);opacity:0;flex:0 0 auto;
  margin-left:-.45rem;}
.hm-barre.actif .hm-caret{animation:hmCaret 1s steps(2) infinite;}
@keyframes hmCaret{to{opacity:1;}}
.hm-accueil .hm-barre{width:min(78%,22rem);}
.hm-btns{display:flex;gap:.5rem;}
.hm-btns i{display:block;width:5.5rem;height:1.625rem;border-radius:9999px;background:var(--paper2);}
.hm-res{margin-top:.875rem;display:grid;gap:.75rem;}
.hm-r{padding:.75rem .875rem;border-radius:.875rem;}
.hm-r1{border:1.5px solid var(--line);transition:border-color .25s,background .25s;}
.hm-r1.vise{border-color:var(--copper);background:var(--copper-soft);}
.hm-r1 b{display:block;font-family:var(--fd);font-size:.875rem;font-weight:700;color:#1a3fa8;line-height:1.25;}
.hm-r1 span{display:block;font-size:.6875rem;color:var(--ok);margin:.125rem 0 .25rem;}
.hm-r1 em{display:block;font-style:normal;font-size:.75rem;line-height:1.45;color:var(--body);}
.hm-vide i{display:block;height:.5rem;border-radius:9999px;background:var(--paper2);margin-bottom:.4375rem;}
.hm-vide i:first-child{width:62%;height:.625rem;} .hm-vide i:nth-child(2){width:36%;} .hm-vide i:last-child{width:88%;margin-bottom:0;}
/* Dans le téléphone : tout plus petit, et la requête ne passe jamais à la ligne. */
.hero-moteur-tel{top:var(--tel-chrome);}
.hero-moteur-tel .hm-accueil{gap:7cqw;padding:10cqw 6cqw;}
.hero-moteur-tel .hm-marque{width:22cqw;height:22cqw;}
.hero-moteur-tel .hm-marque svg{width:10cqw;height:10cqw;}
.hero-moteur-tel .hm-barre{width:100%;height:19cqw;font-size:6.75cqw;padding:0 5cqw;gap:3cqw;border-width:1px;}
.hero-moteur-tel .hm-barre svg{width:7.5cqw;height:7.5cqw;}
.hero-moteur-tel .hm-caret{height:9cqw;}
.hero-moteur-tel .hm-page{padding:8cqw 6cqw 0;}
.hero-moteur-tel .hm-res{margin-top:7cqw;gap:5cqw;}
.hero-moteur-tel .hm-r{padding:5cqw 6cqw;border-radius:7cqw;}
.hero-moteur-tel .hm-r1 b{font-size:6.75cqw;} .hero-moteur-tel .hm-r1 span{font-size:5.5cqw;}
.hero-moteur-tel .hm-vide i{height:4cqw;margin-bottom:4cqw;} .hero-moteur-tel .hm-vide i:first-child{height:5cqw;}
/* La barre d'adresse de la fenêtre charge. */
.pc-barre{position:relative;}
.pc-charge{position:absolute;left:.75rem;right:.75rem;bottom:-1px;height:2px;border-radius:9999px;background:var(--grad-copper);
  transform:scaleX(0);transform-origin:left;opacity:0;}
.pc-charge.va{opacity:1;animation:pcCharge .5s var(--e-io) forwards;}
@keyframes pcCharge{to{transform:scaleX(1);}}
.pc-url{transition:border-color .3s,box-shadow .3s,color .3s;}
.pc-url.actif{border-color:var(--copper-hi);color:var(--w);box-shadow:0 0 0 3px rgba(224,112,58,.22);text-align:left;padding-left:.875rem;}

/* Le clavier de verre : centré sous la fenêtre, posé à son pied. Le JS
   mesure la fenêtre et écrit --kx / --ky ; il vit dans .hero-ecrans pour
   s'incliner avec elle. */
.hero-clavier{position:absolute;left:var(--kx,41%);top:var(--ky,86%);z-index:6;display:grid;gap:.25rem;padding:.5rem;border-radius:.875rem;
  background:var(--gloss),rgba(242,243,245,.86);backdrop-filter:blur(40px) saturate(2);-webkit-backdrop-filter:blur(40px) saturate(2);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(15,19,34,.06),0 30px 60px -22px rgba(194,85,31,.45);
  opacity:0;transform:translate(-50%,18px) scale(.96);transition:opacity .4s var(--e-out),transform .5s var(--e-out);pointer-events:none;}
.hero-clavier.la{opacity:1;transform:translate(-50%,0);}
.hk-row{display:flex;gap:.25rem;justify-content:center;}
.hk-k{width:1.5rem;height:1.5rem;border-radius:.375rem;display:grid;place-items:center;
  font-family:var(--fp);font-size:.6875rem;font-weight:700;text-transform:uppercase;color:var(--txt);
  background:#fff;border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 0 var(--line2),0 3px 6px rgba(15,19,34,.08);
  transition:transform .09s,box-shadow .09s,background .12s,color .12s;}
.hk-k.esp{width:9rem;}
.hk-k.entree{width:3.5rem;font-size:.625rem;letter-spacing:.02em;}
.hk-k.on{transform:translateY(2px);box-shadow:0 0 0 var(--line2),0 1px 2px rgba(15,19,34,.1);background:var(--copper);color:#fff;border-color:var(--copper);}
/* Les flèches, au bord des écrans : elles n'apparaissent qu'une fois le site ouvert. */
/* Un chevron nu, sans rond : 44 px de zone tactile, un trait fin, une ombre
   douce pour rester lisible sur le ruban orange. Sur téléphone, où il tombe sur
   la photo du site, il garde un petit disque de verre. */
.hero-fl{position:absolute;top:42%;z-index:5;width:2.75rem;height:2.75rem;border-radius:9999px;display:grid;place-items:center;
  color:var(--txt);background:none;border:0;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.9)) drop-shadow(0 6px 14px rgba(15,19,34,.18));
  transition:transform .3s var(--e-out),color .25s,opacity .4s;}
.hero-fl svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.hero-fl:hover{color:var(--copper-txt);}
.hero-fl-prev:hover{transform:translateX(-3px);} .hero-fl-next:hover{transform:translateX(3px);}
.hero-fl-prev{left:-2.75rem;} .hero-fl-next{right:-2.75rem;}
#hero.attente .hero-fl{opacity:0;pointer-events:none;}
/* La carte de conclusion : ce que la scène vient de prouver, dit en une
   phrase. Posée sur le coin bas gauche de la fenêtre une fois le site
   ouvert. Sans JS et en mouvement réduit elle est là d'emblée. */
/* Sous les écrans : la carte à gauche, la légende à droite, rien ne se chevauche.
   La hauteur du bandeau ne dépend PAS de son contenu : pendant la scène, la légende
   n'a qu'une ligne et la carte est repliée ; si la mise en page changeait à la fin,
   tout le héros se recentrerait d'un coup (mesuré : 89 px, en v78). */
.hero-bas{position:relative;z-index:2;display:grid;justify-items:center;margin-top:1.25rem;}
.hero-bas>*{grid-area:1/1;}
.hero-conclu{position:relative;z-index:3;display:grid;gap:.1875rem;width:fit-content;max-width:22rem;margin:0;padding:.875rem 1.125rem .9375rem 2.125rem;
  border-radius:1.25rem;background:var(--gloss),rgba(255,255,255,.80);
  backdrop-filter:blur(40px) saturate(2);-webkit-backdrop-filter:blur(40px) saturate(2);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(15,19,34,.06),0 30px 60px -24px rgba(194,85,31,.42);
  clip-path:circle(160% at 1.25rem 1.5rem);
  transition:opacity .35s var(--e-out),clip-path .85s var(--e-out);}
.hero-conclu::before{content:'';position:absolute;left:1rem;top:1.25rem;width:.5rem;height:.5rem;border-radius:9999px;background:var(--copper);
  box-shadow:0 0 0 4px rgba(194,85,31,.16);}
.hero-conclu b{font-family:var(--fd);font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--txt);line-height:1.2;}
.hero-conclu span{font-size:.8438rem;line-height:1.4;color:var(--body);}
.hero-conclu .hc-go{display:inline-flex;align-items:center;gap:.375rem;margin-top:.25rem;padding-block:.6875rem;margin-block:-.4375rem;min-height:2.75rem;
  font-family:var(--fd);font-size:.8438rem;font-weight:700;color:var(--copper-txt);}
.hero-conclu .hc-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-out);}
.hero-conclu .hc-go:hover svg{transform:translateX(4px);}
/* Le site montré et le lien vers les autres, en pied de carte : une seule pilule sous les écrans. */
.hc-site{display:block;margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(15,19,34,.08);
  font-family:var(--fp);font-size:.75rem;letter-spacing:.02em;color:var(--mute);}
.hc-site a{font-weight:700;color:var(--txt);white-space:nowrap;padding-block:.625rem;margin-block:-.625rem;}
.hc-plus{white-space:nowrap;}
.hc-plus a{color:var(--copper-txt);}
.hc-site a:hover{color:var(--copper-txt);}
/* Pendant la scène, la carte n'existe pas encore ; le curseur vient la « cliquer »
   et elle se déplie depuis son point cuivre, comme un halo de clic qui s'étale. */
.hero-scene.conclu-attend .hero-conclu{opacity:0;clip-path:circle(0% at 1.25rem 1.5rem);pointer-events:none;}
/* La légende : trois temps pendant la scène, puis le nom du site et l'invitation. */
/* ── La frise des trois temps, au-dessus des écrans ──────────────────
   C'est elle qui raconte ce que la scène montre : « votre client cherche
   sur Google, il vous trouve, il est chez vous ». Posée là où l'œil se
   pose en premier, loin du clavier et de tout ce qui bouge. État par
   défaut (sans JS, en mouvement réduit, scène finie) : les trois temps
   cochés. Pendant la scène, le JS pose .actif sur le temps en cours et
   .fait sur ceux passés ; le reste attend, en gris. */
.hero-etapes{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.375rem .5rem;position:relative;z-index:2;}
.he{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .875rem .375rem .375rem;border-radius:9999px;
  font-family:var(--fd);font-size:.8125rem;font-weight:650;letter-spacing:-.005em;color:var(--txt);line-height:1.2;
  background:transparent;transition:background .35s var(--e-out),color .35s,transform .35s var(--e-out);}
.he-n{position:relative;flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:9999px;display:grid;place-items:center;
  background:var(--grad-copper);color:#fff;box-shadow:0 1px 2px rgba(15,19,34,.08),0 10px 20px -10px rgba(194,85,31,.7);
  transition:background .35s,box-shadow .35s,transform .35s var(--e-out);}
.he-n svg{position:absolute;inset:0;margin:auto;width:.875rem;height:.875rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .45s var(--e-out) .1s,opacity .2s;}
.he-n b{font-family:var(--fp);font-size:.6875rem;font-weight:700;opacity:0;transition:opacity .2s;}
/* Pendant la scène : ce qui n'est pas encore arrivé attend, en gris. */
#hero.attente .he:not(.fait){color:var(--mute);}
#hero.attente .he:not(.fait) .he-n{background:var(--paper2);color:var(--mute);box-shadow:none;}
#hero.attente .he:not(.fait) .he-n svg{stroke-dashoffset:24;opacity:0;}
#hero.attente .he:not(.fait) .he-n b{opacity:1;}
/* Le temps en cours : pilule cuivre pâle, encre, anneau cuivre qui respire. */
#hero.attente .he.actif{color:var(--txt);background:var(--copper-soft);transform:translateY(-1px);}
#hero.attente .he.actif .he-n{background:#fff;color:var(--copper-txt);box-shadow:0 0 0 1.5px var(--copper);animation:heRespire 1.6s ease-in-out infinite;}
@keyframes heRespire{0%,100%{box-shadow:0 0 0 1.5px var(--copper),0 0 0 0 rgba(194,85,31,.35);}50%{box-shadow:0 0 0 1.5px var(--copper),0 0 0 6px rgba(194,85,31,0);}}
@media (prefers-reduced-motion:reduce){.he,.he-n,.he-n svg{transition:none;} #hero.attente .he.actif .he-n{animation:none;}}
/* Le bas du héros se fond dans la section suivante, sans damier. */
#hero::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:7rem;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(242,243,245,0),var(--paper));}
@media (min-width:1000px){
  /* Une rangée : la carte à gauche, la légende à droite en deux lignes fixes.
     Quand la rangée manque de place (1000 à 1200 px), la légende passe dessous, à droite. */
  .hero-etapes{margin:1.75rem 0 0;}
  .hero-bas{margin-top:.5rem;justify-items:start;}
  .hero-conclu{margin-left:-4%;max-width:21rem;}
  /* Les écrans prennent toute la colonne. Seule exception : un écran très bas
     (portable à 768 px, barre Windows en moins), où la scène se borne pour que la
     carte reste visible sans défiler. `width`, pas `max-width` + marge auto : sur un
     enfant de grille, une marge auto le ramène à sa largeur de contenu. */
  .hero-scene{width:min(100%,calc(100svh - 9rem));justify-self:end;}
}
@media (max-width:999px){
  .hero-clavier,.hero-ecran .hero-moteur{display:none!important;}   /* la fenêtre montre le site ; le téléphone joue la scène courte */
  .hero-ecrans{transform:none;}
  .hero-fl{top:44%;width:2.75rem;height:2.75rem;filter:none;   /* 44 px : la zone tactile minimale */background:var(--gloss),rgba(255,255,255,.82);
    backdrop-filter:blur(30px) saturate(2);-webkit-backdrop-filter:blur(30px) saturate(2);border:1px solid rgba(255,255,255,.9);
    box-shadow:0 1px 2px rgba(15,19,34,.08),0 12px 28px -14px rgba(194,85,31,.5);}
  .hero-fl svg{width:1.125rem;height:1.125rem;stroke-width:2.2;}
  .hero-fl-prev{left:-.375rem;} .hero-fl-next{right:-.375rem;}
  .hero-bas{margin-top:1.5rem;}
}
@media (prefers-reduced-motion:reduce){
  .hero-moteur,.hero-moteur-tel,.hero-clavier,.pc-charge{display:none!important;}
  .hero-ecrans{transform:none!important;transition:none;}
  .hero-conclu,.hero-fl{transition:none;clip-path:none;}
  .hero-ecran img.on,.hero-tel .tel-img.on{transform:none;}
}

/* ══ ACCUEIL v82 : LA SUITE DU HÉROS ══════════════════════════════════
   Le héros promet, la bande d'encre qui suit prouve : trois vrais sites en
   colonnes qui défilent (le mur de Réalisations, en plus court), la seule
   citation client qu'on a, le bouton vers les sites en entier. Puis les
   offres avec leur socle, les métiers, la démonstration en bande compacte
   sur papier plus dense, Kilian, la conversion. Papier, encre, papier,
   papier, papier dense, encre, encre : l'encre marque la preuve, la
   personne, la conversion. */
.vit{overflow:clip;}
.vit-g{display:grid;gap:2.5rem;align-items:center;}
.vit-txt .sd{max-width:34rem;}
.vit-avis{margin:1.75rem 0 0;padding:0 0 0 1.125rem;border-left:2px solid var(--copper-hi);}
.vit-avis blockquote{margin:0;font-family:var(--fd);font-size:clamp(1.0625rem,1.5vw,1.25rem);font-weight:600;line-height:1.45;letter-spacing:-.01em;color:var(--w);}
.vit-avis figcaption{margin-top:.625rem;font-size:.875rem;color:var(--w-mute);}
.vit-avis figcaption b{color:var(--w);font-weight:700;}
.vit-avis figcaption a{color:var(--copper-hi);font-weight:700;}
.vit-txt .btn{margin-top:1.75rem;}
/* Le mur : trois colonnes dans une boîte, fondues en haut et en bas. */
.vit-mur{position:relative;height:min(68vh,36rem);border-radius:1.75rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);}
.vit-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;padding:0;align-items:start;}
.vit-cols .mur-col{border-radius:1.25rem;box-shadow:0 1px 2px rgba(0,0,0,.3),0 30px 60px -30px rgba(224,112,58,.5);}
.vit-cols .mc-2{margin-top:-9%;} .vit-cols .mc-3{margin-top:-3%;}
.vit-droite{display:grid;gap:.875rem;}
/* Les trois adresses, en pilules d'encre sous le mur (hors du fondu). */
.vit-noms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;}
.vit-noms li{font-family:var(--fp);font-size:clamp(.6875rem,1.2vw,.8125rem);font-weight:700;letter-spacing:.06em;color:var(--w);
  padding:.4375rem .9375rem;border-radius:9999px;background:rgba(9,12,22,.72);border:1px solid rgba(240,242,248,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -12px rgba(4,7,16,.7);}
/* Le socle, sous les trois cartes d'offres : ce qui ne se discute pas. */
.socle{list-style:none;margin:1.5rem 0 0;padding:1rem 1.25rem;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem 1.375rem;
  border-radius:9999px;background:var(--gloss),rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(15,19,34,.05),0 20px 40px -24px rgba(194,85,31,.3);font-size:.9375rem;color:var(--body);}
/* La pilule ne vaut que tant que la liste tient sur UNE ligne. Sous 900 px les
   cinq mentions passent à la ligne, et le rayon de 9999 px transforme le bloc en
   grosse gélule avec des bouts arrondis vides : signalé par KINONE le 6 septembre
   2026, « visuellement incohérent ». Le seuil est 900 px, mesuré : au-dessus les
   cinq mentions tiennent sur une ligne et la pilule est juste. Essayé à 1039 px,
   annulé — à 1024 la liste en colonne laisse 700 px de vide à droite, c'est pire
   que le défaut qu'on corrige. En dessous de 900 px, on garde la même matière
   (verre, liseré, ombre teintée) mais un rayon généreux et une lecture en liste,
   alignée à gauche. */
@media (max-width:899px){
  .socle{border-radius:1.5rem;justify-content:flex-start;align-items:flex-start;
    flex-direction:column;gap:.625rem;padding:1.125rem 1.25rem 1.25rem;}
  .socle .socle-t{margin-bottom:.125rem;}
}
.socle li{position:relative;padding-left:1rem;}
.socle li::before{content:'';position:absolute;left:0;top:.55em;width:.375rem;height:.375rem;border-radius:9999px;background:var(--copper);}
.socle .socle-t{padding-left:0;font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-txt);}
.socle .socle-t::before{content:none;}
/* La démonstration, compacte, sur un papier un peu plus dense : une valeur
   proche, pas un contraste. */
.sec-preuve{background:linear-gradient(180deg,var(--paper2),var(--paper));}
.preuves{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.preuves li{padding:1.375rem 0;border-bottom:1px solid var(--line);}
.preuves li:last-child{border-bottom:0;}
.preuves i{display:block;font-style:normal;font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-txt);}
.preuves b{display:block;margin-top:.5rem;font-family:var(--fd);font-size:clamp(1.25rem,1.9vw,1.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--txt);}
.preuves span{display:block;margin-top:.5rem;font-size:.9375rem;line-height:1.55;color:var(--body);}
.preuves .mesure.releve{color:var(--copper-txt);}
@media (min-width:600px){
  .preuves{grid-template-columns:1fr 1fr;}
  .preuves li{padding:1.5rem 1.5rem;border-bottom:0;}
  .preuves li:nth-child(odd){border-right:1px solid var(--line);padding-left:0;}
  .preuves li:nth-child(-n+2){border-bottom:1px solid var(--line);}
}

@media (min-width:1000px){
  .vit-g{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,4vw,4.5rem);}
  .vit-mur{height:min(74vh,40rem);}
  .socle{justify-content:center;}
}
@media (min-width:1000px){
  .preuves{grid-template-columns:repeat(4,1fr);}
  .preuves li,.preuves li:nth-child(odd),.preuves li:nth-child(-n+2){border:0;border-left:1px solid var(--line);padding:1.5rem 1.75rem;}
  .preuves li:first-child{border-left:0;padding-left:0;}
}


/* ══ v85 : LE FONDU AUX RUPTURES ═════════════════════════════════════
   Remplace le fondu en pixels de la v84 (KINONE, 3 septembre 2026 : « ça
   agresse l'œil »). Au bas de chaque bande d'encre, la couleur de la section
   suivante monte dans celle-ci en un dégradé dont la courbe est adoucie aux
   deux bouts : un dégradé linéaire laisse voir une arête là où il commence
   et là où il finit (bande de Mach), une courbe en S ne laisse rien voir.
   La bande vit au bas de la section qu'elle termine, sous le contenu
   (z-index 0, .wrap est à 1), au-dessus du fond en parallaxe, et sa hauteur
   ne dépasse jamais le rembourrage bas de la section : elle ne touche pas
   le texte. */
.fondu{position:absolute;left:0;right:0;bottom:-1px;height:clamp(5rem,10vw,8.5rem);z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(242,243,245,0) 0%,rgba(242,243,245,.012) 9%,rgba(242,243,245,.046) 17%,
    rgba(242,243,245,.1) 25%,rgba(242,243,245,.17) 33%,rgba(242,243,245,.255) 41%,
    rgba(242,243,245,.35) 49%,rgba(242,243,245,.45) 56%,rgba(242,243,245,.55) 63%,
    rgba(242,243,245,.65) 70%,rgba(242,243,245,.745) 77%,rgba(242,243,245,.83) 84%,
    rgba(242,243,245,.9) 90%,rgba(242,243,245,.955) 95%,rgba(242,243,245,.988) 98%,var(--paper) 100%);}

/* Le pied de page est encre : la dernière section claire s'y fond aussi. */

/* ══ v84 : MÉTHODE, sans scène épinglée ═══════════════════════════════
   Les trois étapes côte à côte, séparées par des filets, chacune avec ce
   que fait le client et ce que je fais. Tout est visible d'un coup : une
   scène épinglée laissait un écran de vide sur les captures et sur les
   écrans bas. */
.mth-etapes{list-style:none;margin:0;padding:0;display:grid;gap:2.25rem;}
.mth-etape{display:grid;gap:1rem;grid-template-columns:auto 1fr;align-items:start;}
.mth-ill{width:clamp(4.25rem,6.5vw,5.75rem);flex-shrink:0;}
.mth-ill svg{width:100%;height:auto;}
.mth-n{font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-hi);}
.mth-etape h3{margin-top:.5rem;font-family:var(--fd);font-size:clamp(1.375rem,2.2vw,1.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--w);}
.mth-p{margin-top:.75rem;font-size:1.0313rem;line-height:1.68;color:var(--w-dim);}
.mth-qui{margin:1.125rem 0 0;padding-top:1rem;border-top:1px solid var(--ink-line2);display:grid;gap:.75rem;}
.mth-qui div{display:grid;grid-template-columns:3.25rem 1fr;gap:.5rem;}
.mth-qui dt{font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-hi);padding-top:.25em;}
.mth-qui dd{font-size:.9375rem;line-height:1.55;color:var(--w-dim);}
.mth-note{display:flex;align-items:flex-start;gap:.625rem;margin-top:clamp(2rem,4vw,3rem);font-size:1.0313rem;color:var(--w-dim);max-width:52rem;}
.mth-note svg{width:1rem;height:1rem;margin-top:.3rem;stroke:var(--ok);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
@media (min-width:900px){
  .mth-etapes{grid-template-columns:repeat(3,1fr);gap:0;}
  .mth-etape{grid-template-columns:1fr;padding-inline:clamp(1.25rem,2.5vw,2.5rem);}
  .mth-etape+.mth-etape{border-left:1px solid var(--ink-line2);}
  .mth-etape:first-child{padding-left:0;}
  .mth-etape:last-child{padding-right:0;}
}
/* Le dossier : ce que le client envoie, une liste à filets, pas des cartes.
   La puce est un pixel de cuivre, l'ADN du logo. */
.mth-dossier{list-style:none;margin:0;padding:0;display:grid;}
.mth-dossier li{display:grid;grid-template-columns:2rem 1fr;gap:.25rem .875rem;padding:1.125rem 0;border-top:1px solid var(--line2);}
.mth-dossier li::before{content:'';grid-row:span 2;width:1.25rem;height:1.25rem;margin-top:.2rem;border-radius:.375rem;
  background:var(--grad-copper);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 16px -8px rgba(194,85,31,.7);}
.mth-dossier b{font-family:var(--fd);font-size:1.125rem;font-weight:700;letter-spacing:-.01em;color:var(--txt);line-height:1.25;}
.mth-dossier span{grid-column:2;font-size:.9688rem;line-height:1.55;color:var(--body);}
@media (min-width:860px){.mth-dossier{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,4rem);}}

/* ══ v84 : FICHES DE RÉALISATION (realisation-<slug>.html) ════════════ */
.rea-phead-in{display:grid;gap:2.25rem;align-items:center;}
.rea-kick{display:flex;align-items:center;gap:.75rem;margin-bottom:.875rem;font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-txt);}
.rea-num{font-family:var(--fd);font-size:1.75rem;font-weight:800;letter-spacing:-.04em;line-height:1;
  background-image:var(--grad-copper-txt);-webkit-background-clip:text;background-clip:text;color:transparent;}
.rea-h1{font-size:clamp(1.875rem,3.6vw,2.875rem);}
.rea-pills{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;}
.rea-pills li{padding:.4375rem .875rem;border-radius:9999px;font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.02em;color:var(--txt);
  background:var(--gloss),rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(15,19,34,.05),0 12px 28px -18px rgba(194,85,31,.35);}
/* Les premiers écrans sont figés : ils remplissent leur cadre par le haut. */
.rea-ecrans .pc-img,.rea-ecrans .tel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;}
.rea-ecrans .tel-ecran{background:#fff;}
@media (min-width:1000px){.rea-phead-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);}}
.rea-faits{display:grid;gap:1.375rem;}
.sec-ink .rea-faits dt{font-family:var(--fd);font-size:1.1875rem;font-weight:700;letter-spacing:-.015em;text-transform:none;color:var(--w);margin-bottom:.4375rem;}
@media (min-width:760px){.rea-faits{grid-template-columns:1fr 1fr;gap:1.75rem clamp(1.5rem,3vw,3rem);}}
.rea-avant{margin-top:clamp(2.5rem,5vw,4rem);display:grid;gap:1.75rem;}
.rea-av{margin:0;}
.rea-av figcaption{margin-bottom:.75rem;display:flex;align-items:center;gap:.625rem;font-family:var(--fp);font-size:.9375rem;font-weight:650;color:var(--w-dim);}
.rea-av-k{padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(240,242,248,.10);color:var(--w);border:1px solid var(--ink-line2);}
.rea-av-k--apres{background:var(--grad-copper);border-color:transparent;color:#fff;}
.rea-av .pc{width:100%;}
.rea-av .pc-ecran{aspect-ratio:16/11;}
.rea-avant-txt{grid-column:1/-1;font-size:1.0313rem;line-height:1.65;color:var(--w-dim);max-width:46rem;}
@media (min-width:900px){.rea-avant{grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:start;}}
.rea-avis{margin-top:clamp(2rem,4vw,3rem);max-width:44rem;}
/* Sur la page Réalisations : sous « Ouvrir », le lien vers la fiche. */
.cas-fiche{display:inline-flex;align-items:center;gap:.4rem;margin-top:clamp(1.625rem,3.2vw,2.125rem);margin-left:1.125rem;min-height:2.75rem;
  font-family:var(--fp);font-weight:700;font-size:.9688rem;color:var(--copper-txt);}
.sec-ink .cas-fiche{color:var(--copper-hi);}
.cas-fiche svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-out);}
.cas-fiche:hover svg{transform:translateX(3px);}
@media (prefers-reduced-motion:reduce){.cas-fiche svg{transition:none;}}

/* ══ v84 : OFFRES, la fin de page resserrée ═══════════════════════════
   Les deux règles du suivi côte à côte, dans une seule section avec les
   évolutions : la page perd un écran de vide sous le bloc sombre. */
.off-regles{display:grid;gap:1rem;}
.off-regles .fair{margin-top:0;height:100%;}
.off-regle-t{font-family:var(--fd);font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;color:var(--txt);margin-bottom:.5rem;}
@media (min-width:900px){.off-regles{grid-template-columns:1fr 1fr;gap:1.25rem;}}
#delais .shead{margin-bottom:clamp(1.75rem,3vw,2.5rem);}
#offres{padding-bottom:clamp(3rem,6vw,5rem);}

/* ══ v84 : LA GRILLE D'EN-TÊTE RÉTABLIE, ET SES EXCEPTIONS ═══════════
   Deux sélecteurs orphelins (voir le journal v84) empêchaient .shead de
   passer en deux colonnes et .st de prendre sa taille hors des bandes
   d'encre. Rétablis, ils s'appliquent aussi dans les bandes où le texte
   n'a qu'une demi-largeur (« En ligne aujourd'hui », « Qui fait le
   travail ») : là, deux colonnes seraient deux colonnes étroites. On
   empile. */
.vit-txt .shead,.qui-g .shead{grid-template-columns:minmax(0,1fr);}
.vit-txt .shead>p,.qui-g .shead>p{grid-column:1;}

/* ══ v84 : LE HÉROS DANS UNE FENÊTRE BASSE (règle KINONE du 03/09/2026) ═
   Un portable avec la barre Windows et celle du navigateur laisse 650 à
   760 px à la page. Le héros est calé sur la hauteur de la fenêtre, mais
   ses marges et la scène étaient réglées pour 900 : la carte de conclusion
   passait sous le pli, donc sous la barre des tâches. Ici on serre tout
   d'un cran, et la scène se borne plus court, pour que le dernier élément
   du premier écran reste visible sans défiler. */
@media (min-width:1000px) and (max-height:780px){
  #hero{padding-top:calc(var(--nh) + .25rem);padding-bottom:.75rem;}
  .htitle{font-size:clamp(2.5rem,5.2vw,4rem);margin-bottom:1rem;}
  .hsub{margin-bottom:1.375rem;font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.6;}
  /* Mesuré : à 1440 × 720 le héros finissait à 736 px avec 100svh - 14rem ; à 18rem il tient. */
  .hero-scene{width:min(100%,max(23rem,calc(100svh - 12rem)));}
  .hero-etapes{margin-top:1rem;}
  .hero-bas{margin-top:.375rem;}
  .hero-conclu{padding-block:.875rem;}
}
/* Tablette en paysage, fenêtre très basse (1024 × 620) : encore un cran. Mesuré : 633 px pour 620. */
@media (min-width:1000px) and (max-width:1279px) and (max-height:700px){
  .htitle{font-size:clamp(2rem,4.2vw,3rem);}
  /* v85 : la phrase du héros a gagné une ligne ; la frise repasse sur une seule ligne
     et le chapô perd un cran. Mesuré avant : 639 px pour 620. */
  .hsub{font-size:.85rem;line-height:1.45;margin-bottom:.75rem;}
  .hkick{margin-bottom:.5rem;}
  .hero-etapes{gap:.25rem .375rem;}
  /* La colonne des écrans ne prend que sa largeur (348 px à 620 de haut) : le texte
     récupère 150 px, les deux boutons tiennent sur une ligne, la frise aussi. */
  #hero .wrap{grid-template-columns:minmax(0,1fr) auto;}
  /* la frise est dans la colonne du texte : c'est elle qui décide de la hauteur ici.
     Mesuré : 654 px pour 620 avant ce cran. */
  .hero-scene{width:min(100%,max(19rem,calc(100svh - 17rem)));}
  .hero-etapes{margin-top:.875rem;}
  .he{font-size:.7rem;padding:.2rem .5rem .2rem .2rem;gap:.375rem;}
  .hero-conclu{font-size:.9rem;padding-block:.75rem;}
}
/* Téléphone bas (640 px, un iPhone SE ou un Android ancien avec la barre du navigateur) :
   le titre et ses boutons doivent rester au-dessus du pli. Mesuré : 660 px pour 640. */
@media (max-width:999px) and (max-height:700px){
  #hero{padding-top:calc(var(--nh) + .5rem);}
  .hkick{margin-bottom:.75rem;}
  .htitle{font-size:clamp(2.25rem,9.5vw,2.75rem);margin-bottom:1rem;}
  .hsub{font-size:1rem;line-height:1.55;margin-bottom:1.375rem;}
}

/* ══ v85 : LE CONTRASTE DES PRIX, scène épinglée en trois temps ═══════
   KINONE (3 septembre 2026) : « j'aimais bien le système où au scroll les
   étapes s'affichaient ». Règle d'or respectée : l'état par défaut est
   l'état final (deux cartes côte à côte, prix barré, rien d'épinglé). Le
   JS pose .scene sur #w-vs et .js-scene sur #vs-space : alors seulement
   l'espace de défilement existe, l'agence est seule au centre, son prix
   se barre, puis KINONE arrive de la droite et la pousse hors du centre.
   overflow:clip et non hidden : hidden tuerait le sticky (piège n°5). */
.vs-pin{position:relative;background:var(--paper);overflow:clip;}
.vs-space{position:relative;}
.vs-space.js-scene{height:150vh;}   /* v86 : 190 → 150, KINONE : « un scroll trop prolongé » */
.vs-stage{position:relative;padding-block:clamp(1rem,3vw,2.5rem) clamp(5rem,10vw,8.5rem);}
.js-scene .vs-stage{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;padding-top:calc(var(--nh) + 1rem);padding-bottom:2rem;}
.vs-stage>.wrap{width:100%;position:relative;z-index:1;}
.vs-scene{position:relative;max-width:62rem;margin:0 auto;display:grid;gap:1.25rem;align-items:stretch;}
@media (min-width:860px){.vs-scene{grid-template-columns:.9fr 1.1fr;gap:1.5rem;}}
.vs-lbl-good{display:inline-flex;align-items:center;gap:.5rem;color:var(--w);}
.vs-logo{height:1.15em;width:auto;display:inline-block;}
.vs-lbl-good .ft-logo{font-family:var(--fd);font-weight:800;letter-spacing:.06em;color:var(--copper-hi);}
.vs-us{box-shadow:0 2px 6px rgba(15,19,34,.06),0 34px 70px -26px rgba(194,85,31,.42);}
.vs-us .vs-cta{margin-top:1.5rem;align-self:flex-start;}
.vs-strike::after,.vs-total::after{transform:scaleX(1);}
.vs-strike,.vs-total{color:var(--mute);}
/* Le total sur sa propre ligne, en largeur de contenu pour que la rayure s'arrête au dernier mot. */
.vs-total{display:table;}
/* L'indice de défilement n'existe que pendant la scène. */
.vs-indice{display:none;}
/* ── La scène (JS seulement) ── */
.vs-scene.scene{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:24rem;}
.vs-scene.scene>.vs-col{grid-area:1/1;}
.vs-scene.scene .vs-them{position:relative;z-index:2;width:min(36rem,100%);background:var(--gloss),rgba(255,255,255,.6);
  backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);border-color:rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--sh-md);
  transition:transform .9s var(--e-out),opacity .7s var(--e-out),box-shadow .7s;}
.vs-scene.scene .vs-us{position:relative;z-index:3;width:min(34rem,100%);opacity:0;transform:translateX(min(80vw,60rem)) rotate(3deg);
  transition:transform 1s var(--e-out),opacity .55s var(--e-out);}
/* Temps 1 : le prix n'est pas encore barré. */
.vs-scene.scene:not(.struck) .vs-strike::after,.vs-scene.scene:not(.struck) .vs-total::after{transform:scaleX(0);}
.vs-scene.scene:not(.struck) .vs-strike,.vs-scene.scene:not(.struck) .vs-total{color:var(--dim);}
.vs-scene.scene .vs-strike::after{transition:transform .6s var(--e-out);}
.vs-scene.scene .vs-total::after{transition:transform .55s var(--e-out) .15s;}
.vs-scene.scene .vs-strike,.vs-scene.scene .vs-total{transition:color .4s;}
/* Temps 3 : KINONE arrive au centre, l'agence est poussée à gauche, penchée, rétrécie, effacée. */
.vs-scene.scene.s3 .vs-us{opacity:1;transform:none;}
.vs-scene.scene.s3 .vs-them{transform:translateX(-56%) rotate(-5deg) scale(.78);opacity:.38;box-shadow:none;}
.js-scene .vs-indice{display:inline-flex;align-items:center;gap:.5rem;margin:1.5rem auto 0;justify-content:center;width:100%;
  font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-txt);
  opacity:1;transition:opacity .4s;}
.js-scene .vs-indice svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:vsIndice 1.6s ease-in-out infinite;}
@keyframes vsIndice{0%,100%{transform:translateY(-2px);}50%{transform:translateY(3px);}}
.vs-scene.scene.s3+.vs-indice{opacity:0;}
/* Téléphone : KINONE monte du bas et se glisse par-dessus l'agence, qui recule derrière. */
@media (max-width:859px){
  .vs-scene.scene .vs-us{transform:translateY(70vh) rotate(0);}
  .vs-scene.scene.s3 .vs-them{transform:translateY(-12%) scale(.9);opacity:.3;}
}
@media (prefers-reduced-motion:reduce){.vs-scene .vs-col,.vs-strike::after,.vs-total::after{transition:none!important;}.js-scene .vs-indice svg{animation:none;}}

/* ══ v85 : VOTRE MÉTIER, l'explorateur ════════════════════════════════
   La liste est dans le HTML (des liens, complète sans JavaScript). Le JS
   ajoute un champ de recherche, et le survol d'une pastille remplit la
   fiche de verre à côté : ce que ses clients vérifient, la formule qui
   suffit, le bouton vers la page. Sur téléphone la fiche suit la liste et
   c'est la recherche qui la pilote (le premier métier trouvé). */
.explo{display:grid;gap:2rem;align-items:start;}
@media (min-width:1000px){.explo{grid-template-columns:minmax(0,1.15fr) minmax(20rem,.85fr);gap:clamp(2rem,4vw,4rem);}}
.explo-cherche:not(:empty){margin-bottom:1.5rem;}
.explo-in{display:flex;align-items:center;gap:.75rem;padding:.25rem .5rem .25rem 1.125rem;border-radius:9999px;
  background:var(--gloss),rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--sh-md);
  backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);
  transition:box-shadow .3s,border-color .3s;}
.explo-in:focus-within{border-color:var(--copper);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 6px rgba(15,19,34,.05),0 24px 50px -22px rgba(194,85,31,.45);}
.explo-in svg{width:1.125rem;height:1.125rem;flex-shrink:0;stroke:var(--copper-txt);fill:none;stroke-width:2.2;stroke-linecap:round;}
.explo-in input{flex:1;min-width:0;height:2.75rem;border:0;background:none;font:inherit;font-size:1.0313rem;color:var(--txt);outline:none;}
.explo-in input::placeholder{color:var(--mute);}
.explo-in input::-webkit-search-cancel-button{-webkit-appearance:none;}
.explo-vide{margin-top:1rem;font-size:1rem;color:var(--dim);}
.fam.vide,.chip.hors{display:none;}
.sec-explo .chip{padding:.375rem .875rem .375rem .375rem;gap:.625rem;}
.sec-explo .chip img{width:2rem;height:2rem;border-radius:9999px;background:var(--copper-soft);padding:.25rem;transition:transform .35s var(--e-out),background .25s;}
.sec-explo .chip:hover img,.sec-explo .chip:focus-visible img{transform:rotate(-8deg) scale(1.08);}
.sec-explo .chip.on{border-color:var(--copper);background:var(--copper-soft);box-shadow:0 10px 24px -14px rgba(194,85,31,.45);}
.sec-explo .chip.on img{background:#fff;}
/* La fiche : ce qu'on verrait en ouvrant la page, en verre, à côté de la liste. */
.explo-fiche{position:relative;}
@media (min-width:1000px){.explo-fiche{position:sticky;top:calc(var(--nh) + 1.25rem);}}
.ef-in{position:relative;border-radius:1.5rem;padding:clamp(1.5rem,3vw,2.25rem);overflow:hidden;
  background:var(--gloss),rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(40px) saturate(2);-webkit-backdrop-filter:blur(40px) saturate(2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 6px rgba(15,19,34,.05),0 34px 70px -26px rgba(194,85,31,.38);
  transition:opacity .22s,transform .4s var(--e-out);}
.explo-fiche.maj .ef-in{opacity:0;transform:translateY(10px);}
.ef-ico{width:clamp(4.5rem,7vw,6rem);height:auto;margin-bottom:1rem;}
.ef-fam{font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-txt);}
.ef-nom{margin-top:.375rem;font-family:var(--fd);font-size:clamp(1.5rem,2.6vw,2.125rem);font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--txt);}
.ef-acc{margin-top:.875rem;font-size:1rem;line-height:1.62;color:var(--body);}
.ef-lbl{margin-top:1.375rem;padding-top:1.125rem;border-top:1px solid var(--line2);font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);}
.ef-trois{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.5rem;counter-reset:ef;}
.ef-trois li{counter-increment:ef;display:grid;grid-template-columns:1.5rem 1fr;gap:.125rem .625rem;align-items:baseline;}
.ef-trois li::before{content:counter(ef,decimal-leading-zero);grid-row:span 2;font-family:var(--fd);font-size:.8125rem;font-weight:800;color:var(--copper-txt);}
.ef-trois b{font-family:var(--fd);font-size:1rem;font-weight:700;color:var(--txt);}
.ef-trois span{grid-column:2;font-size:.9063rem;color:var(--dim);line-height:1.45;}
.ef-form{margin-top:1.375rem;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.75rem 1rem;border-radius:1rem;background:rgba(15,19,34,.04);border:1px solid var(--line);}
.ef-form span{font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);flex:1;}
.ef-form b{font-family:var(--fd);font-size:1.0625rem;font-weight:700;color:var(--txt);}
.ef-form em{font-style:normal;font-family:var(--fd);font-size:1.0625rem;font-weight:800;background-image:var(--grad-copper-txt);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ef-actes{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.625rem;}
.ef-go-t{font-weight:inherit;}
/* La preuve : trois métiers, trois sites en ligne, dans leur fenêtre. */
.explo-refs{display:grid;gap:1.75rem;}
@media (min-width:760px){.explo-refs{grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2rem);}}
.ref{display:block;position:relative;}
.ref .pc{flex:none;width:100%;transition:transform .5s var(--e-out),box-shadow .5s;}
.ref:hover .pc,.ref:focus-visible .pc{transform:translateY(-5px);box-shadow:inset 0 0 0 1.5px rgba(224,112,58,.5),0 1px 3px rgba(15,19,34,.1),0 52px 96px -34px rgba(194,85,31,.6);}
.ref .pc-img{transition:transform .8s var(--e-out);}
.ref:hover .pc-img{transform:scale(1.035);}
.ref-txt{margin-top:1rem;display:grid;gap:.125rem;}
.ref-met{font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-hi);}
.ref-txt b{font-family:var(--fd);font-size:1.125rem;font-weight:700;color:var(--w);letter-spacing:-.01em;}
.ref-txt em{font-style:normal;display:inline-flex;align-items:center;gap:.35rem;margin-top:.25rem;font-family:var(--fp);font-size:.9063rem;font-weight:700;color:var(--w-mute);transition:color .25s;}
.ref-txt em svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-out);}
.ref:hover .ref-txt em{color:var(--copper-hi);}
.ref:hover .ref-txt em svg{transform:translateX(3px);}
.explo-fin{margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--ink-line2);display:grid;gap:1.25rem;align-items:center;}
@media (min-width:860px){.explo-fin{grid-template-columns:1fr auto;gap:2rem;}}
.explo-fin p{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.55;color:var(--w-dim);max-width:44rem;}
.explo-fin p b{color:var(--w);}
@media (prefers-reduced-motion:reduce){.ef-in,.ref .pc,.ref .pc-img,.sec-explo .chip img{transition:none;}}

/* ══ v86 : LA BARRE DU TÉLÉPHONE SUR TOUS LES FAUX TÉLÉPHONES ═══════════
   KINONE : le téléphone du héros a sa barre (heure, île, réseau, batterie,
   adresse), ceux de Réalisations et des fiches ne l'avaient pas. Même
   dessin, mêmes règles .tel-haut / .tel-url (en cqw, donc à l'échelle de
   chaque téléphone). Le site commence sous la barre : l'image est
   repoussée de la hauteur de la barre, et le JS du défilement en tient
   compte (course = bas de l'image - hauteur de l'écran). */
.tel-chrome{container-type:inline-size;--tel-chrome:33cqw;}
.tel-chrome .tel-ecran::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--tel-chrome);background:#fff;border-bottom:1px solid var(--line);z-index:4;}
.tel-chrome .tel-img{margin-top:var(--tel-chrome);}

/* ══ v86 : SUR LES FICHES, LES ÉCRANS RESTENT ET LE SITE SUIT LA LISTE ═══
   KINONE : « le faux pc et le faux mobile restent sur place pendant qu'on
   fait défiler les 01, 02, 03, et le site défile dedans en même temps ».
   La paire d'écrans est collante à droite (au-dessus de 900 px), la liste
   défile à gauche, et le JS fait avancer le site dans les écrans au rythme
   de la liste. La question en face du milieu de l'écran s'allume. */
@media (min-width:900px){
  .mt-cas{align-items:start;}
  /* overflow:hidden sur la section tuerait le sticky (piège n°5) : clip ne le tue pas. */
  .mt-plan-sec{overflow:clip;}
  .mt-cas .cas-ecrans{position:sticky;top:calc(var(--nh) + 1.5rem);}
  .mt-cas .mt-plan{padding-block:clamp(1rem,3vh,2.5rem) clamp(4rem,12vh,8rem);}
  .mt-cas .mt-plan li{padding:clamp(1.5rem,3vh,2.25rem) 0;transition:opacity .4s;}
  .js .mt-cas .mt-plan li:not(.on){opacity:.55;}
  .js .mt-cas .mt-plan li.on{opacity:1;}
  .mt-cas .mt-plan li.on::before{color:var(--copper);transform:scale(1.15);transform-origin:left top;}
  .mt-cas .mt-plan li::before{transition:transform .35s var(--e-out),color .3s;}
}
@media (prefers-reduced-motion:reduce){.js .mt-cas .mt-plan li:not(.on){opacity:1;}}

/* ══ v86 : MÉTHODE, LE FIL DES ÉTAPES ═════════════════════════════════════
   KINONE veut « un système sympa au scroll » sur les trois étapes. Sans JS
   (état par défaut) : les trois côte à côte, comme en v84. Avec JS, le
   fil (.js-fil) : à gauche un rail collant construit par le JS (le numéro
   de l'étape en grand, son illustration, une jauge qui se remplit, son
   titre), à droite les trois étapes empilées ; celle qui passe au milieu
   de l'écran s'allume, les autres s'effacent à 40 %. Sur téléphone, pas
   de rail : les étapes s'allument l'une après l'autre le long d'un trait. */
.mth-rail{display:none;}
@media (min-width:900px){
  .mth-fil.js-fil{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start;}
  .js-fil .mth-etapes{grid-template-columns:minmax(0,1fr);gap:0;}
  .js-fil .mth-etape{grid-template-columns:minmax(0,1fr);padding:clamp(2.25rem,5vh,3.75rem) 0;border-left:0;border-top:1px solid var(--ink-line2);
    opacity:.4;transform:translateX(24px);transition:opacity .55s var(--e-out),transform .7s var(--e-out);}
  .js-fil .mth-etape:first-child{border-top:0;padding-top:.5rem;}
  .js-fil .mth-etape.on{opacity:1;transform:none;}
  .js-fil .mth-etape .mth-ill{display:none;}
  .js-fil .mth-etape h3{font-size:clamp(1.625rem,2.6vw,2.25rem);}
  .js-fil .mth-p{max-width:40rem;}
  .js-fil .mth-qui{max-width:40rem;}
  .js-fil .mth-rail{display:block;position:sticky;top:calc(var(--nh) + 2rem);}
  /* .sec est en overflow:hidden, ce qui tue le sticky (piège n°5) : clip ne le tue pas. */
  #methode.sec{overflow:clip;}
}
.mr-num{display:flex;align-items:baseline;gap:.5rem;font-family:var(--fd);font-weight:800;letter-spacing:-.04em;line-height:1;}
.mr-num b{font-size:clamp(4rem,6vw,5.5rem);background-image:linear-gradient(120deg,#e0703a 0%,#f0a274 60%,#e0703a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.mr-num span{font-size:1.125rem;color:var(--w-mute);font-weight:700;letter-spacing:.02em;}
.mr-ill{position:relative;width:clamp(5.5rem,8vw,7.5rem);aspect-ratio:1;margin-top:1.5rem;}
.mr-ill svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.9);transition:opacity .45s var(--e-out),transform .6s var(--e-out);}
.mr-ill svg.on{opacity:1;transform:none;}
.mr-barre{position:relative;width:3px;height:6.5rem;margin-top:1.75rem;border-radius:9999px;background:var(--ink-line2);overflow:hidden;}
.mr-barre i{position:absolute;left:0;right:0;top:0;height:0;border-radius:9999px;background:var(--grad-copper);transition:height .3s var(--e-out);}
.mr-t{margin-top:1rem;font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-hi);}
/* Téléphone et tablette : un trait à gauche, un point par étape qui s'allume. */
@media (max-width:899px){
  .js-fil .mth-etapes{position:relative;padding-left:1.75rem;}
  .js-fil .mth-etapes::before{content:'';position:absolute;left:.5rem;top:.5rem;bottom:.5rem;width:2px;border-radius:9999px;background:var(--ink-line2);}
  .js-fil .mth-etape{position:relative;opacity:.55;transition:opacity .5s var(--e-out);}
  .js-fil .mth-etape.on{opacity:1;}
  .js-fil .mth-etape::before{content:'';position:absolute;left:-1.75rem;top:.35rem;width:1.125rem;height:1.125rem;border-radius:9999px;background:var(--ink);border:2px solid var(--ink-line2);transition:border-color .3s,background .3s,box-shadow .3s;}
  .js-fil .mth-etape.on::before{background:var(--copper-hi);border-color:var(--copper-hi);box-shadow:0 0 0 5px rgba(224,112,58,.22);}
}
@media (prefers-reduced-motion:reduce){.js-fil .mth-etape{opacity:1;transform:none;}.mr-ill svg,.mr-barre i,.js-fil .mth-etape{transition:none;}}

/* ── LES PAGES LÉGALES ──────────────────────────────────────────
   v90 : elles vivaient sur une seconde feuille de style, sans la barre de
   navigation ni le pied de page du site, dans d'autres polices. Un visiteur
   qui cliquait « Mentions légales » atterrissait visiblement ailleurs — et
   depuis la v89 ces pages sont indexées, donc Google peut y envoyer
   directement. Elles reviennent ici, dans la coquille du site, en un seul
   bloc de texte long : pas de carte, pas de colonne, on lit du haut en bas. */
.legal{max-width:52rem;}
/* La section légale n'a pas besoin du grand blanc d'une section de vente :
   on arrive de l'en-tête et on veut lire tout de suite. */
.sec:has(>.wrap>.legal){padding-block:clamp(2.5rem,5vw,4rem) clamp(4rem,8vw,6.5rem);}
.legal .lead{margin:0 0 2.25rem;font-size:1.125rem;line-height:1.6;color:var(--dim);
  padding-bottom:1.5rem;border-bottom:1px solid var(--line);}
.legal h2{margin:2.75rem 0 .875rem;font-family:var(--fp);font-size:.8125rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--copper-txt);}
.legal h2:first-child{margin-top:0;}
.legal p{margin:0 0 1.125rem;font-size:1.0313rem;line-height:1.7;color:var(--body);}
.legal p:last-child{margin-bottom:0;}
.legal strong{color:var(--txt);font-weight:650;}
/* Le filet ne sépare pas les articles : il porte le blanc. Un trait par
   article ferait huit traits sur une page qu'on ne lit qu'en diagonale. */
.legal h2+p{padding-top:.125rem;}
.legal a{color:var(--copper-txt);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s var(--e-out),color .2s;}
.legal a:hover{color:var(--txt);background-size:0 1px;}
.legal .ext::after{content:'↗';margin-left:.25em;font-size:.85em;opacity:.7;}
/* Un lien seul dans son paragraphe est un geste, pas un mot souligne : sur
   telephone il doit offrir 44 px de haut a toucher, comme un bouton. */
.legal-lien{margin:0 0 1.125rem;}
.legal .legal-lien a{display:inline-flex;align-items:center;min-height:44px;
  padding:.4375rem .9375rem;border-radius:9999px;background:var(--copper-soft);
  border:1px solid rgba(194,85,31,.22);background-image:none;font-weight:600;}
.legal .legal-lien a:hover{background:var(--copper);border-color:transparent;color:#fff;}
@media (min-width:900px){
  .legal p{font-size:1.0625rem;}
}

/* La pastille « Message reçu » de merci.html, et la paire de boutons que
   portent merci.html et 404.html : ce sont des en-têtes sans illustration,
   le geste suivant doit donc être dans l'en-tête lui-même. */
.merci-ok{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.125rem;
  padding:.4375rem .9375rem .4375rem .75rem;border-radius:9999px;
  background:rgba(46,158,99,.1);border:1px solid rgba(46,158,99,.28);
  font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#1f7a48;}
.merci-ok svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;}
.merci-actes{margin-top:1.875rem;display:flex;flex-wrap:wrap;gap:.75rem;}
@media (max-width:479px){.merci-actes .btn{width:100%;}}

/* ── EN-TÊTE DE PAGE SUR UNE FENÊTRE BASSE ──────────────────────
   v90 : sur un portable avec la barre Windows et celle du navigateur, il ne
   reste que 620 à 720 px de hauteur. L'en-tête des 38 pages profondes y
   dépassait l'écran, et le geste suivant tombait dessous — précisément sur
   les pages où Google envoie les gens. On ne touche pas au dessin sur un
   grand écran : on ne resserre que lorsque la hauteur manque vraiment. */
@media (max-height:860px){
  .phead{padding-block:clamp(5.5rem,10vw,7.25rem) clamp(1.75rem,3.2vw,2.75rem);}
  .phead-art img{max-height:19rem;}
}
@media (max-height:740px){
  .phead{padding-block:clamp(5.25rem,9vw,6.5rem) clamp(1.5rem,2.6vw,2.125rem);}
  .phead-art img{max-height:15.5rem;}
  .pbc{margin-bottom:.75rem;}
  .ph-d{margin-top:.875rem;}
}
@media (min-width:1000px) and (max-height:740px){
  /* Le titre est bridé à 17 caractères de large pour bien tomber sur un grand
     écran. Sur une fenêtre basse, cette bride le fait passer à cinq lignes et
     c'est elle, pas la taille du texte, qui pousse le bouton sous le pli : on
     lui rend de la largeur avant de toucher au corps. */
  .ph-t{font-size:clamp(2rem,4.2vw,3.125rem);max-width:26ch;}
  .phead .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
    gap:clamp(1.5rem,3vw,2.5rem);}
}

/* Suite : les deux familles de pages profondes ont un en-tête plus chargé que
   les autres (une carte de preuve pour les métiers, la paire d'écrans et des
   pilules pour les fiches). Sur une fenêtre basse, c'est le geste qui doit
   rester visible, pas la décoration. */
@media (max-height:740px){
  .rea-kick{margin-bottom:.5rem;}
  .rea-pills{margin-top:.875rem;gap:.375rem;}
  .rea-pills li{padding:.3125rem .6875rem;font-size:.75rem;}
  .mt-ctas{margin-top:1.25rem;}
}
@media (min-width:1000px) and (max-height:740px){
  .rea-h1{font-size:clamp(1.75rem,3.1vw,2.375rem);}
  .rea-ecrans{max-width:34rem;margin-inline:auto;}
}
/* Téléphone bas (360 × 640 et au-dessous) : le titre des pages profondes
   prenait six lignes et poussait les deux boutons sous la barre d'action.
   On resserre le titre et l'interligne du chapô, rien d'autre. */
@media (max-width:999px) and (max-height:700px){
  .ph-t{font-size:clamp(1.875rem,7.4vw,2.25rem);letter-spacing:-.03em;}
  .ph-d{margin-top:.75rem;font-size:.9688rem;line-height:1.55;}
  .pbc{margin-bottom:.625rem;font-size:.75rem;}
  /* Les deux boutons s'empilent sur un téléphone : c'est l'espace ENTRE eux
     qui coûte le plus, pas leur taille. On garde la zone tactile de 44 px. */
  .mt-ctas{gap:.5rem;margin-top:1.125rem;}
  .mt-ctas .btn{padding-block:.875rem;}
  /* La barre flottante s'arrête à 51 px sur téléphone : 72 px de
     retrait laissent encore 21 px de dégagement sous elle. */
  .phead{padding-block:4.5rem 1.375rem;}
}

/* Fiches de réalisation, fenêtre basse : les pilules (métier, ville, nombre de
   pages) sont de l'information de contexte, pas le geste. Sur une fenêtre où
   tout ne tient pas, elles passent APRÈS les deux boutons. Rien n'est masqué —
   la parité entre écrans reste entière, seul l'ordre change. */
@media (max-height:740px){
  .rea-phead .phead-txt{display:flex;flex-direction:column;}
  .rea-phead .rea-pills{order:2;margin-top:1.125rem;}
  .rea-phead .mt-ctas{order:1;}
}

/* ── v97 : six entrées dans la pilule (« Pourquoi KINONE » ajoutée le 08/09/2026) ──
   Les réglages 1024-1279 écrits plus haut (« Barre de navigation entre 900 et
   1279 px ») étaient ÉCRASÉS par le bloc NAVIGATION v76 : même spécificité, écrit
   après. Piège n°3. On les repose ici, après lui, portés par #nav. Mesuré par
   mesure-nav.js : la barre tient sur une ligne, logo intact, de 1024 à 1920. */
@media (min-width:1024px) and (max-width:1279px){
  #nav .nav-links{gap:.5rem;}
  #nav .nav-links>li>a:not(.nav-cta){font-size:.8125rem;}
  #nav .nav-cta{padding:.375rem .875rem .375rem .3125rem;font-size:.8125rem;gap:.5rem;height:2.625rem;}
  #nav .nav-search{width:2.5rem;height:2.5rem;}
  #nav .logo-img{height:1.875rem;}
  #nav .nav-i{padding-left:.875rem;}
}
@media (min-width:1280px) and (max-width:1439px){
  #nav .nav-links{gap:1rem;}
  #nav .nav-links>li>a:not(.nav-cta){font-size:.875rem;}
  #nav .logo-img{height:2.125rem;}
}

/* ── v97b : boutons contour sur l'encre, espacement des pilules, révélation en volume ──
   1. `.btn-ghost` était écrit pour le papier (texte encre, remplissage encre) : posé sur
      une bande d'encre, il était ton sur ton au repos et invisible au survol. Sur l'encre
      il devient blanc, et se remplit de papier avec un texte encre. */
.sec-ink .btn-ghost,[data-pix="ink"] .btn-ghost,.cta-end .btn-ghost{color:var(--w);border-color:rgba(255,255,255,.28);--fill:var(--w);}
.sec-ink .btn-ghost:hover,[data-pix="ink"] .btn-ghost:hover,.cta-end .btn-ghost:hover{color:var(--ink);border-color:var(--w);}
/* 2. Les pilules sous la parole d'un client respirent. */
.pq-actes{margin-top:clamp(2rem,4vw,3rem);}
/* 3. La révélation au défilement, en volume : chaque bloc arrive du côté où il vit
      (--rvx posé par le script : gauche, droite ou monte), depuis la profondeur, net en
      arrivant. 22 px de montée, personne ne voyait rien (CLAUDE.md, « Ce qui rend un site
      vivant ») ; c'est ce qui séparait Méthode des autres pages. */
.js .rv{opacity:0;filter:blur(8px);
  transform:perspective(1100px) translate3d(var(--rvx,0px),var(--rvy,46px),-150px) rotateX(var(--rvrx,-6deg)) rotateY(var(--rvry,0deg));
  transition:opacity .7s var(--e-out) var(--d,0s),filter .8s var(--e-out) var(--d,0s),transform 1s var(--e-out) var(--d,0s);}
.js .rv.in{opacity:1;filter:none;transform:none;}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;filter:none;transform:none!important;transition:none;}}

/* ── v97 : le titre de page arrive en lettres qui volent (voir main.js, LETTRES DU TITRE) ── */
.let .m{display:inline-block;white-space:nowrap;}
.let .l{display:inline-block;}
.js .let .l{opacity:0;transform:perspective(600px) translate(var(--dx,0px),var(--dy,0px)) rotate(var(--dr,0deg)) rotateY(var(--dry,0deg)) scale(var(--ds,1));
  transition:opacity .5s var(--e-out) calc(var(--i,0)*var(--pas,26ms)),transform .85s var(--e-out) calc(var(--i,0)*var(--pas,26ms));}
.js .let.let-on .l{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.js .let .l{opacity:1;transform:none;transition:none;}}

/* v97 : sur telephone, en haut d'une page qui s'ouvre en encre (Methode, Offres, l'option animee),
   la pilule n'a pas encore de fond et le logo restait sombre sur sombre (regle v76 ecrite pour
   la pilule claire). La barre porte les DEUX fichiers du logo (le sombre, le blanc avec ses
   pixels cuivre) : le blanc s'affiche tant que la barre n'a pas defile sur une page sombre.
   Jamais de filtre d'inversion sur un logo : il inverse aussi ses couleurs de marque. */
.logo-img--blanc{display:none;}
@media (max-width:1023px){
  #nav.over-dark:not(.sc) .logo-img:not(.logo-img--blanc){display:none;}
  #nav.over-dark:not(.sc) .logo-img--blanc{display:block;}
}

/* ── v97 : LE FOND DU HÉROS EN COUCHES (demande de KINONE, 8 septembre : « le héros est
   fade, peut-être le fond ? »). Le ruban cuivre n'est plus une photo à plat : c'est le
   ruban détouré de la charte (eclate/ruban.webp, le même que sur Méthode et Offres), posé
   derrière les écrans, rogné par le bord, avec une copie lointaine floue et une lueur qui
   respire. Chaque couche a sa vitesse au défilement (data-parallax) et à la souris
   (--mx/--my, pointeur fin) : c'est ce qui donne la profondeur. Le texte, les pilules et
   la scène ne bougent pas. Sous prefers-reduced-motion : tout est posé. ── */
.hero-fond{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;--mx:0;--my:0;}
.hf-lueur{position:absolute;right:-8%;top:-24%;width:64%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(224,112,58,.38) 0%,rgba(224,112,58,.12) 38%,transparent 66%);
  animation:hf-souffle 9s ease-in-out infinite alternate;}
@keyframes hf-souffle{from{opacity:.6;transform:scale(.96)}to{opacity:1;transform:scale(1.05)}}
.hf-loin,.hf-pres{position:absolute;will-change:transform;}
/* Le ruban lointain ne passe jamais derrière le texte : il vit dans le coin haut gauche, et seulement quand la fenêtre est assez large pour lui laisser un coin vide. */
.hf-loin{display:none;left:-9%;top:-14%;width:24%;opacity:.3;}
@media (min-width:1560px){.hf-loin{display:block;}}
.hf-pres{right:-16%;top:-18%;width:62%;}
.hf-loin img,.hf-pres img{display:block;width:100%;height:auto;transition:transform 1.1s var(--e-out);}
.hf-pres img{transform:translate3d(calc(var(--mx)*-22px),calc(var(--my)*-14px),0) rotate(-8deg);
  filter:drop-shadow(0 40px 70px rgba(194,85,31,.28));}
.hf-loin img{transform:translate3d(calc(var(--mx)*10px),calc(var(--my)*8px),0) rotate(14deg);}
@media (min-width:1560px){.hf-pres{width:56%;right:-12%;}}
@media (max-width:899px){
  .hf-lueur{right:-45%;top:-6%;width:120%;}
  .hf-pres{right:-46%;top:auto;bottom:-14%;width:136%;}
}
@media (prefers-reduced-motion:reduce){.hf-lueur{animation:none;} .hf-loin img,.hf-pres img{transition:none;}}

/* ── À PROPOS : « Et si demain vous n'êtes plus là ? » ──────────────
   Trois reponses separees par des filets fins, jamais des cartes : une
   grille de cartes ferait « offre », or ce sont des faits, pas des
   arguments. Aucune icone, l'etiquette suffit et se lit mieux. */
.seul{display:grid;gap:clamp(1.75rem,3.5vw,2.5rem);margin-top:clamp(2rem,4vw,3rem);}
@media (min-width:900px){
  .seul{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;}
  .seul-c+.seul-c{padding-left:clamp(1.5rem,3vw,2.75rem);border-left:1px solid var(--line2);}
  .seul-c{padding-right:clamp(1.5rem,3vw,2.75rem);}
  .seul-c:last-child{padding-right:0;}
}
.seul-e{font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--copper-txt);margin:0 0 .625rem;}
.seul-t{font-family:var(--fd);font-size:clamp(1.375rem,2.1vw,1.625rem);font-weight:700;
  letter-spacing:-.02em;line-height:1.2;color:var(--txt);margin:0 0 .75rem;}
.seul-d{color:var(--body);font-size:1.0313rem;line-height:1.72;margin:0;}
.seul-fin{margin-top:clamp(2rem,4vw,2.75rem);color:var(--dim);font-size:1.0313rem;line-height:1.7;
  max-width:52rem;}
.seul-fin a{color:var(--copper-txt);font-weight:650;
  box-shadow:inset 0 -1px 0 rgba(181,77,27,.42);transition:box-shadow .3s,color .3s;}
.seul-fin a:hover{color:var(--txt);box-shadow:inset 0 -2px 0 var(--copper);}

/* ── À PROPOS : L'INTERRUPTEUR ──────────────────────────────────────
   « On est locataire de son site » ne se lit pas, ça se coupe. Un geste,
   deux resultats. Tout en CSS a partir d'une vraie case a cocher : ca
   marche sans JavaScript, au clavier, et l'etat se voit. */
.bsc{margin-top:clamp(1.75rem,3.5vw,2.5rem);}
.bsc-i{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}

/* La commande. Une pilule, comme tout ce qui se clique dans la maison. */
.bsc-l{display:inline-flex;align-items:center;gap:.875rem;cursor:pointer;
  padding:.625rem 1.375rem .625rem .875rem;border-radius:9999px;min-height:2.75rem;
  background:#fff;border:1.5px solid var(--line2);
  box-shadow:0 1px 2px rgba(15,19,34,.05),0 22px 44px -26px rgba(15,19,34,.35);
  transition:border-color .3s,box-shadow .3s,background .3s;}
.bsc-l:hover{border-color:var(--copper);}
.bsc-i:focus-visible+.bsc-l{outline:2px solid var(--copper);outline-offset:3px;}
.bsc-piste{position:relative;flex:0 0 auto;width:3.375rem;height:1.875rem;border-radius:9999px;
  background:var(--grad-copper);
  box-shadow:inset 0 1px 2px rgba(15,19,34,.28);transition:background .4s;}
.bsc-pouce{position:absolute;top:.1875rem;left:.1875rem;width:1.5rem;height:1.5rem;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(15,19,34,.3),0 4px 10px -3px rgba(15,19,34,.4);
  transition:transform .42s var(--e-out);}
.bsc-i:checked+.bsc-l .bsc-piste{background:linear-gradient(120deg,#5c6379 0%,#3c4258 100%);}
.bsc-i:checked+.bsc-l .bsc-pouce{transform:translateX(1.5rem);}
.bsc-mots{font-family:var(--fd);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em;color:var(--txt);}
.bsc-m2,.bsc-i:checked+.bsc-l .bsc-m1{display:none;}
.bsc-i:checked+.bsc-l .bsc-m2{display:inline;}

/* Les deux ecrans. */
.bsc-duo{display:grid;gap:clamp(1.5rem,3vw,2.25rem);margin-top:clamp(1.75rem,3.5vw,2.5rem);}
@media (min-width:820px){.bsc-duo{grid-template-columns:1fr 1fr;gap:clamp(1.75rem,3.5vw,2.75rem);}}
/* L'etiquette doit se lire avant le dessin : on doit savoir de quel cote on
   est sans avoir a deduire quoi que ce soit du contenu de l'ecran. */
.bsc-tag{margin:0 0 .875rem;}
.bsc-tag b{display:block;font-family:var(--fd);font-size:clamp(1.25rem,1.9vw,1.5rem);
  font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--txt);}
.bsc-tag span{display:block;margin-top:.25rem;font-family:var(--fp);font-size:.75rem;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--mute);}
.bsc-kin .bsc-tag b{color:var(--copper-txt);}
.bsc-cadre{border-radius:1.125rem;padding:0 .5rem .5rem;
  background:linear-gradient(150deg,#3a4262 0%,#0f1322 46%,#242b47 100%);
  box-shadow:inset 0 0 0 1.5px rgba(240,242,248,.10),
             0 1px 3px rgba(15,19,34,.10),
             0 34px 68px -30px rgba(15,19,34,.55);
  transition:box-shadow .55s var(--e-out),filter .55s var(--e-out),transform .55s var(--e-out);}
.bsc-kin .bsc-cadre{box-shadow:inset 0 0 0 1.5px rgba(224,112,58,.30),
             0 1px 3px rgba(15,19,34,.10),
             0 40px 78px -30px rgba(194,85,31,.48);}
.bsc-barre{display:flex;align-items:center;gap:.625rem;height:2rem;padding:0 .25rem;}
.bsc-pts{display:flex;gap:.3125rem;flex-shrink:0;}
.bsc-pts i{width:.4375rem;height:.4375rem;border-radius:50%;background:rgba(240,242,248,.26);}
.bsc-url{flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--fp);font-size:.6875rem;font-weight:650;letter-spacing:.03em;
  color:var(--w-mute);background:rgba(240,242,248,.08);
  border:1px solid rgba(240,242,248,.10);border-radius:9999px;padding:.1875rem .75rem;
  transition:color .5s,text-decoration-color .5s;}
.bsc-vivant{flex:0 0 auto;font-family:var(--fp);font-size:.5625rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:.1875rem .5rem;
  border-radius:9999px;background:var(--grad-copper);}
/* L'ecran reste petit : c'est une maquette qui explique, pas une capture
   qu'on lit. Trop large, elle se vidait par le milieu. */
.bsc-cadre{max-width:27rem;}
.bsc-vue{position:relative;border-radius:.75rem;overflow:hidden;background:var(--paper);
  aspect-ratio:16/10.5;}

/* Le faux site, dessine en CSS : jamais la capture d'un vrai client. */
.bsc-faux{position:absolute;inset:0;padding:.875rem;display:flex;flex-direction:column;gap:.5rem;
  transition:opacity .55s var(--e-out),filter .55s var(--e-out);}
.bsc-faux>*{display:block;border-radius:.3125rem;background:#ccd0da;}
.bf-nav{display:flex;gap:.375rem;background:none!important;}
.bf-nav i{flex:0 0 1.75rem;height:.4375rem;border-radius:9999px;background:#c3c8d4;}
.bf-nav i:first-child{flex:0 0 2.75rem;background:var(--copper);}
.bf-h1{height:1.125rem;width:78%;background:#98a0b2!important;margin-top:.375rem;}
.bf-h2{height:.5rem;width:56%;}
.bf-btn{height:1.0625rem;width:6.25rem;border-radius:9999px!important;
  background:var(--grad-copper)!important;margin-top:.1875rem;}
.bf-img{flex:1 1 auto;min-height:1.75rem;border-radius:.4375rem!important;
  background:linear-gradient(128deg,#b9bfcd 0%,#cdd2dc 46%,#dfe2e9 100%)!important;}
.bf-grille{display:flex;gap:.375rem;background:none!important;flex:0 0 auto;}
.bf-grille i{flex:1;height:1.875rem;border-radius:.375rem;background:#d5d9e2;}

/* Coupe le robinet : le site loue s'eteint, l'autre ne bouge pas. */
.bsc-mort{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.75rem;background:#e6e8ee;
  opacity:0;visibility:hidden;transition:opacity .5s var(--e-out),visibility .5s;}
/* #6b7186 ne donnait que 3,96:1 sur le gris de l'ecran eteint, et 15 px gras
   n'est pas du « grand texte » au sens WCAG (il faut 18,66 px). #565c70 : 5,42:1. */
.bsc-mort p{margin:0;font-family:var(--fd);font-weight:700;font-size:.9375rem;color:#565c70;text-align:center;}
.bsc-mort-ic{width:2.25rem;height:2.25rem;border-radius:50%;border:2px solid #949aac;position:relative;}
.bsc-mort-ic::before,.bsc-mort-ic::after{content:'';position:absolute;inset:auto;
  left:50%;top:50%;width:1.0625rem;height:2px;border-radius:2px;background:#949aac;}
.bsc-mort-ic::before{transform:translate(-50%,-50%) rotate(45deg);}
.bsc-mort-ic::after{transform:translate(-50%,-50%) rotate(-45deg);}
.bsc-i:checked~.bsc-duo .bsc-loue .bsc-faux{opacity:0;filter:grayscale(1);}
.bsc-i:checked~.bsc-duo .bsc-loue .bsc-mort{opacity:1;visibility:visible;}
.bsc-i:checked~.bsc-duo .bsc-loue .bsc-cadre{filter:grayscale(.85);transform:translateY(6px);
  box-shadow:inset 0 0 0 1.5px rgba(240,242,248,.08),0 12px 26px -18px rgba(15,19,34,.4);}
.bsc-i:checked~.bsc-duo .bsc-loue .bsc-url{color:rgba(230,233,242,.34);text-decoration:line-through;}

/* Ce qu'il reste, en toutes lettres sous chaque ecran. */
.bsc-reste{margin:.9375rem 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;}
.bsc-reste span{font-family:var(--fp);font-size:.6875rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute);}
.bsc-reste b{font-family:var(--fd);font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;color:var(--txt);}
.bsc-loue .bsc-r2{color:#a8402a;}
.bsc-kin .bsc-r1,.bsc-kin .bsc-r2{color:var(--copper-txt);}
.bsc-r2{display:none;}
.bsc-i:checked~.bsc-duo .bsc-r1{display:none;}
.bsc-i:checked~.bsc-duo .bsc-r2{display:inline;}

.bsc-dit{margin:clamp(1.5rem,3vw,2rem) 0 0;max-width:56rem;color:var(--body);
  font-size:1.0313rem;line-height:1.72;}

@media (prefers-reduced-motion:reduce){
  .bsc-pouce,.bsc-faux,.bsc-mort,.bsc-cadre,.bsc-url{transition:none;}
}

/* Le lien vers la demonstration, dans le bloc de l'option immersive d'Offres :
   un vrai lien, cuivre et souligne, pas un mot gris dans une phrase. */
.off-imm a{color:var(--copper-txt);font-weight:650;box-shadow:inset 0 -1px 0 rgba(181,77,27,.42);transition:box-shadow .3s,color .3s;}
.off-imm a:hover{color:var(--txt);box-shadow:inset 0 -2px 0 var(--copper);}