/* ══ LES SCÈNES EN CRANS : feuille partagée par site-anime.html (#volume) et methode.html (#procede) ══
   Chargée APRÈS style-vN.css : elle n'en redéfinit rien, elle ajoute.
   Règle d'or : sans JavaScript, tout est visible et POSÉ ; les textes d'acte se
   lisent l'un sous l'autre. Les états de départ (pièces hors champ, lettres
   écartées, scène épinglée, le O) n'existent que sous « .js ».
   Un cran de défilement = une étape ; l'animation de l'étape se joue dans le
   temps, en entier, par transitions.
   Ce qui est commun aux deux scènes est écrit sur `.scene3d` ; ce qui n'a de
   sens que sur une page est écrit sur son id, sinon un cran de l'une commande
   l'autre (le `.s7` de site-anime dissolvait le montage de Méthode). */

@font-face{font-family:'Marcellus';src:url('../fonts/marcellus.woff2') format('woff2');font-weight:400;font-display:swap;}

:root{--s3-r:1.75rem;--pas:130px;--etapes:13;
  --ab-fd:'Marcellus',Georgia,serif;--ab-bleu:#2a5ba8;--ab-bleu-clair:#7ea8e8;--ab-encre:#0b1728;
  --t-pose:.85s;}

/* ── La scène épinglée : une hauteur d'écran, plus un pas par étape ── */
.scene3d{position:relative;background:var(--ink);color:var(--w);overflow:clip;}
.js .scene3d{height:calc(100vh + var(--pas)*var(--etapes));height:calc(100svh + var(--pas)*var(--etapes));}
.s3-colle{position:relative;min-height:100vh;min-height:100svh;padding-top:var(--nh);}
.js .s3-colle{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;}
.s3-fond{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(48% 44% at 70% 52%,rgba(224,112,58,.14) 0%,rgba(224,112,58,0) 70%),
             radial-gradient(120% 80% at 88% -10%,#1d2442 0%,var(--ink) 52%),var(--ink);}
.s3-duo{position:relative;z-index:2;display:grid;gap:1rem 3rem;align-items:center;
  min-height:calc(100vh - var(--nh));min-height:calc(100svh - var(--nh));
  padding-bottom:calc(var(--dock-h,0px) + 1rem);}
@media (min-width:900px){.s3-duo{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:2rem 3.5rem;padding-bottom:2rem;}}

/* ── La colonne des mots : un texte par acte ── */
.s3-hero{position:relative;}
.s3-hero .sidx{color:var(--copper-hi);}
.bim-actes{display:grid;gap:2.5rem;}
.js .bim-actes{gap:0;}
.js .bim-acte{grid-area:1/1;}
.s3-titre{font-family:var(--fd);font-weight:700;letter-spacing:-.03em;line-height:.98;
  font-size:clamp(2.25rem,5vw,4.25rem);max-width:12ch;margin:0 0 1rem;}
.s3-titre em{font-style:normal;
  background-image:linear-gradient(100deg,#f19069 0%,#e0703a 58%,#c96234 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.bim-num{margin:0 0 .5rem;font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--w-mute);}
.s3-sub{color:var(--w-dim);font-size:clamp(1rem,1.3vw,1.1875rem);line-height:1.6;max-width:30rem;margin:0 0 1.25rem;}
.s3-sub strong{color:var(--w);font-weight:600;}
.s3-hero .hctas{display:flex;flex-wrap:wrap;gap:.75rem 1rem;}
.s3-hero .btn-paper{--fill:var(--copper-hi);}
.s3-hero .btn-ghost{color:var(--w);border-color:rgba(255,255,255,.28);--fill:var(--w);}
.s3-hero .btn-ghost:hover{color:var(--ink);border-color:var(--w);}
.js .bim-acte{opacity:0;pointer-events:none;transition:opacity .5s var(--e-out);}
.js .bim-acte.on{opacity:1;pointer-events:auto;}
.js .bim-acte .s3-sub{opacity:0;transform:translateY(12px);filter:blur(8px);transition:opacity .7s var(--e-out) .35s,transform .7s var(--e-out) .35s,filter .7s var(--e-out) .35s;}
.js .bim-acte.on .s3-sub{opacity:1;transform:none;filter:none;}
@media (max-width:899px){
  .s3-titre{font-size:clamp(1.875rem,8vw,2.5rem);max-width:16ch;margin-bottom:.5rem;}
  .s3-sub{font-size:.9375rem;line-height:1.5;margin-bottom:.75rem;}
  .s3-hero .hctas{display:none;}  /* le dock porte déjà l'appel et « Mon projet » ; les boutons reviennent sous la scène */
}

/* ── Les lettres : chacune arrive de son côté, dans l'ordre, dès que l'étape est là ── */
.bim-lettres .m{display:inline-block;white-space:nowrap;}
.bim-lettres .l{display:inline-block;}
.js .bim-lettres .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)*26ms),transform .85s var(--e-out) calc(var(--i,0)*26ms);}
/* Les lettres qui s'écrivent : dans l'ordre, sans voler, comme au clavier. */
.js .bim-ecrit .l{transform:none;transition:opacity .08s linear calc(var(--i,0)*var(--vit,22ms));}
.js .on .bim-lettres .l,.js .bim-lettres.pose .l{opacity:1;transform:none;}

/* ── Les pièces : hors champ tant que leur étape n'est pas là, posées ensuite ── */
.js .bim-p{opacity:0;filter:blur(10px);
  transform:perspective(900px) translate3d(var(--dx,0px),var(--dy,0px),var(--dz,0px)) rotate(var(--dr,0deg)) rotateX(var(--drx,0deg)) rotateY(var(--dry,0deg)) scale(var(--ds,1));
  transition:opacity .55s var(--e-out) calc(var(--i,0)*90ms),filter .7s var(--e-out) calc(var(--i,0)*90ms),transform var(--t-pose) var(--e-out) calc(var(--i,0)*90ms);
  will-change:transform,opacity;}
.js .bim-p.pose{opacity:1;filter:none;transform:none;}


/* ── Le O de KINONE, à droite : son clic devient la fenêtre ── */
.bim-scene{position:relative;--w:min(90vw,34rem);--u:calc(var(--w)/100);width:var(--w);margin-inline:auto;perspective:1600px;}
.bim-tilt{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transform-style:preserve-3d;transition:transform .35s var(--e-out);will-change:transform;}
@media (min-width:900px){.bim-scene{--w:min(52vw,46rem);margin-inline:0 auto;}}
.bim-o{display:none;}
/* Le logo entier, en blanc ; son O est à 44 % – 63 % de sa largeur, et c'est de là que tout part. */
.js .bim-o{display:block;position:absolute;left:50%;top:50%;width:calc(var(--u)*92);height:auto;z-index:3;pointer-events:none;
  transform:translate(-50%,-50%);transform-origin:53.5% 50%;transition:opacity .5s var(--e-out),transform .9s var(--e-out);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));}
.js .bim-o::after{content:'';position:absolute;left:44%;width:19%;top:50%;aspect-ratio:1;translate:0 -50%;border-radius:9999px;border:2px solid var(--copper-hi);opacity:0;
  animation:bim-pulse 2.4s var(--e-out) infinite;}
@keyframes bim-pulse{0%{opacity:.75;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
.js .scene3d.s1 .bim-o{opacity:0;transform:translate(-50%,-50%) scale(2.6);}
.js .scene3d.s1 .bim-o::after{animation:none;}

/* ── Le ruban de cuivre de la charte : il jaillit du O au clic, et reste derrière la fenêtre ── */
.bim-ruban{display:none;}
.js .bim-ruban{display:block;position:absolute;z-index:0;left:auto;right:-34%;bottom:-46%;width:96%;height:auto;pointer-events:none;
  opacity:0;transform:translate(-30%,-30%) rotate(-40deg) scale(.1);transform-origin:40% 40%;
  transition:opacity .7s var(--e-out) .1s,transform 1.4s var(--e-out) .05s;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.5));}
.js .scene3d.s1 .bim-ruban{opacity:.8;transform:none;}
.js #volume.s7 .bim-ruban,.js #procede.s5 .bim-ruban{opacity:.4;}

/* ── Le cadre : une fenêtre de navigateur, née du clic ── */
.bim-cadre{position:relative;z-index:1;border-radius:calc(var(--u)*2.6);background:#0d1424;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 40px 90px -30px rgba(5,7,14,.9),0 30px 70px -28px rgba(194,85,31,.35);
  overflow:hidden;}
.js .bim-cadre{opacity:0;transform:translate(calc(var(--u)*3.2),0) scale(.14);border-radius:50%;
  transition:opacity .5s var(--e-out),transform 1s var(--e-out),border-radius .9s var(--e-out);}
.js .scene3d.s1 .bim-cadre{opacity:1;transform:none;border-radius:calc(var(--u)*2.6);}
.bim-barre{display:flex;align-items:center;gap:calc(var(--u)*1.2);height:calc(var(--u)*5);padding-inline:calc(var(--u)*2.2);
  background:#161d30;border-bottom:1px solid rgba(255,255,255,.08);}
.bim-barre i{width:calc(var(--u)*1.5);height:calc(var(--u)*1.5);border-radius:9999px;background:rgba(255,255,255,.22);}
.bim-url{margin-left:calc(var(--u)*2);flex:1;height:calc(var(--u)*3);display:flex;align-items:center;padding-inline:calc(var(--u)*1.6);
  border-radius:9999px;background:rgba(255,255,255,.07);font-family:var(--fb);font-size:calc(var(--u)*1.55);color:rgba(255,255,255,.7);}
.bim-ecran{position:relative;aspect-ratio:16/10.5;overflow:hidden;background:var(--ab-encre);}

/* Acte 1 : les pièces du premier écran d'ART BÂTIMENT, aux vraies proportions. */
.bim-grp{position:absolute;inset:0;transition:opacity .6s var(--e-out);}
.js #volume.s7 .bim-grp,.js #procede.s11 .bim-grp{opacity:0;}
.bim-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;}
.bim-voile{position:absolute;inset:0;background:linear-gradient(105deg,rgba(11,23,40,.9) 0%,rgba(11,23,40,.72) 42%,rgba(11,23,40,.16) 100%);}
.bim-nav{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*7);z-index:5;transition:opacity .5s;}
.js #volume.s7 .bim-nav,.js #procede.s11 .bim-nav{background:rgba(11,23,40,.94);box-shadow:0 8px 24px -12px rgba(0,0,0,.6);}
.js #volume.s10 .bim-nav{opacity:0;}
.bim-nav{display:flex;align-items:center;gap:calc(var(--u)*2);
  padding-inline:calc(var(--u)*3);background:linear-gradient(to bottom,rgba(11,23,40,.85),rgba(11,23,40,0));}
.bim-nav img{width:calc(var(--u)*7.5);height:auto;}
.bim-nav ul{list-style:none;display:flex;gap:calc(var(--u)*2);margin:0 auto 0 calc(var(--u)*1.5);padding:0;font-family:var(--fb);font-size:calc(var(--u)*1.55);color:rgba(255,255,255,.85);}
.bim-nav .outil{color:var(--ab-bleu-clair);font-weight:600;}
.bim-navtel{font-family:var(--fb);font-size:calc(var(--u)*1.55);font-weight:600;color:#fff;white-space:nowrap;}
.bim-navbtn{display:inline-flex;align-items:center;height:calc(var(--u)*4);padding-inline:calc(var(--u)*1.8);border-radius:9999px;
  background:var(--ab-bleu);color:#fff;font-family:var(--fb);font-size:calc(var(--u)*1.45);font-weight:600;white-space:nowrap;}
.bim-logo{position:absolute;left:calc(var(--u)*5);top:calc(var(--u)*9.5);width:calc(var(--u)*22);height:auto;}
.bim-sur{position:absolute;left:calc(var(--u)*5.5);top:calc(var(--u)*26);margin:0;font-family:var(--fb);font-size:calc(var(--u)*1.5);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ab-bleu-clair);}
.bim-h{position:absolute;left:calc(var(--u)*5.5);top:calc(var(--u)*29);width:calc(var(--u)*62);margin:0;
  font-family:var(--ab-fd);font-weight:400;font-size:calc(var(--u)*4.1);line-height:1.12;color:#fff;}
.bim-h em{font-style:normal;color:var(--ab-bleu-clair);}
.bim-txt{position:absolute;left:calc(var(--u)*5.5);top:calc(var(--u)*39.5);width:calc(var(--u)*50);margin:0;font-family:var(--fb);font-size:calc(var(--u)*1.85);line-height:1.5;color:rgba(255,255,255,.8);}
.bim-btns{position:absolute;left:calc(var(--u)*5.5);top:calc(var(--u)*47.5);display:flex;gap:calc(var(--u)*1.4);}
.bim-btn{display:inline-flex;align-items:center;height:calc(var(--u)*5.4);padding-inline:calc(var(--u)*2.6);border-radius:9999px;
  font-family:var(--fb);font-size:calc(var(--u)*1.8);font-weight:600;color:#fff;white-space:nowrap;}
.bim-btn.plein{background:linear-gradient(120deg,#3a6fc4,var(--ab-bleu) 60%,#20477f);box-shadow:0 8px 20px -10px rgba(42,91,168,.8);}
.bim-btn.contour{border:1px solid rgba(255,255,255,.55);}
.bim-past{position:absolute;left:calc(var(--u)*5.5);bottom:calc(var(--u)*2.5);width:calc(var(--u)*62);
  display:grid;grid-template-columns:1fr 1.15fr 1.25fr;padding:calc(var(--u)*1.6) calc(var(--u)*2.2);border-radius:calc(var(--u)*2.2);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.bim-past>div{padding-inline:calc(var(--u)*1.5);border-left:1px solid rgba(255,255,255,.16);}
.bim-past>div:first-child{padding-left:0;border-left:0;}
.bim-past span{display:block;font-family:var(--fb);}
.bim-past .t{font-size:calc(var(--u)*1.25);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:calc(var(--u)*.4);}
.bim-past .v{font-size:calc(var(--u)*1.8);font-weight:600;color:#fff;white-space:nowrap;}

/* Les étiquettes qui se posent à côté de chaque pièce quand elle atterrit. */
.bim-tag{position:absolute;z-index:7;display:inline-flex;align-items:center;gap:calc(var(--u)*.8);
  padding:calc(var(--u)*.55) calc(var(--u)*1.3) calc(var(--u)*.55) calc(var(--u)*.9);border-radius:9999px;
  background:var(--grad-copper);color:#fff;font-family:var(--fb);font-size:calc(var(--u)*1.4);font-weight:600;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 28px -10px rgba(194,85,31,.75);}
.bim-tag::before{content:'';width:calc(var(--u)*1);height:calc(var(--u)*1);border-radius:9999px;background:#fff;}
.tag-photo{right:calc(var(--u)*4);top:calc(var(--u)*9.5);}
.tag-logo{left:calc(var(--u)*29);top:calc(var(--u)*15);}
.tag-phrase{right:calc(var(--u)*4);top:calc(var(--u)*33);}
.tag-btns{left:calc(var(--u)*58);top:calc(var(--u)*48.6);}
.tag-past{left:calc(var(--u)*69.5);bottom:calc(var(--u)*4);}

/* Acte 2 : la vraie page en ligne se substitue au montage, défile, puis le curseur clique. */
.bim-page{position:absolute;left:0;top:0;width:100%;height:auto;z-index:4;}
.js .bim-page{opacity:0;transition:opacity .6s var(--e-out),transform 2.8s var(--e-io),filter .8s var(--e-out);}
.js #volume.s7 .bim-page{opacity:1;}
.js #volume.s8 .bim-page{transform:translateY(calc(var(--d2,0)*-1px));}
.js #volume.s10 .bim-page{filter:blur(10px) brightness(.45);}
.bim-curseur{position:absolute;z-index:9;left:var(--cx,50%);top:var(--cy,50%);width:calc(var(--u)*4);height:calc(var(--u)*4);
  display:none;pointer-events:none;transform:translate(-30%,-20%);}
.js .bim-curseur{display:block;opacity:0;transition:opacity .4s var(--e-out),left 1s var(--e-io),top 1s var(--e-io);}
.js .scene3d.s1 .bim-curseur{opacity:1;}
.bim-curseur svg{width:100%;height:100%;fill:var(--copper-hi);stroke:#fff;stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));}
.bim-curseur::after{content:'';position:absolute;left:0;top:0;width:calc(var(--u)*6);height:calc(var(--u)*6);margin:calc(var(--u)*-1.6);
  border-radius:9999px;border:2px solid var(--copper-hi);opacity:0;transform:scale(.3);}
.bim-curseur.clic::after{animation:bim-onde .7s var(--e-out) both;}
@keyframes bim-onde{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}

/* Acte 3 : l'estimateur, ses onze postes qui arrivent de partout. */
.bim-estim{position:absolute;inset:calc(var(--u)*7) calc(var(--u)*5) calc(var(--u)*4);z-index:6;
  padding:calc(var(--u)*3.2) calc(var(--u)*3.4);border-radius:calc(var(--u)*2.6);
  background:linear-gradient(160deg,#ffffff,#eef1f6);color:#14213a;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);}
.js .bim-estim{opacity:0;transform:translateY(calc(var(--u)*6));transition:opacity .5s var(--e-out),transform .8s var(--e-out);pointer-events:none;}
.js #volume.s10 .bim-estim{opacity:1;transform:none;}
.bim-estim .eh{margin:0 0 calc(var(--u)*1);font-family:var(--ab-fd);font-weight:400;font-size:calc(var(--u)*3.6);line-height:1.1;color:#14213a;}
.bim-estim .eh em{font-style:normal;color:var(--ab-bleu);}
.bim-etapes{display:flex;gap:calc(var(--u)*1.2);margin:0 0 calc(var(--u)*1.6);padding:0;list-style:none;font-family:var(--fb);font-size:calc(var(--u)*1.3);color:#6b7280;}
.bim-etapes li{display:flex;align-items:center;gap:calc(var(--u)*.6);}
.bim-etapes b{display:grid;place-items:center;width:calc(var(--u)*2.4);height:calc(var(--u)*2.4);border-radius:9999px;background:#e5e9f2;color:#14213a;font-size:calc(var(--u)*1.15);}
.bim-etapes li:first-child b{background:var(--ab-bleu);color:#fff;}
.bim-estim .eq{margin:0 0 calc(var(--u)*1.2);font-family:var(--fb);font-size:calc(var(--u)*1.7);font-weight:600;color:#14213a;}
.bim-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*1);margin:0;padding:0;list-style:none;}
.bim-chip{display:grid;gap:calc(var(--u)*.2);padding:calc(var(--u)*1) calc(var(--u)*1.2);border-radius:calc(var(--u)*1.4);
  background:#fff;border:1px solid #dfe4ee;font-family:var(--fb);}
.bim-chip strong{font-size:calc(var(--u)*1.45);font-weight:700;color:#14213a;}
.bim-chip span{font-size:calc(var(--u)*1.1);color:#6b7280;line-height:1.3;}
.js #volume.s12 .bim-chip[data-choisi]{border-color:var(--ab-bleu);background:#eef4ff;box-shadow:0 0 0 2px rgba(42,91,168,.25);transition:all .3s .95s;}
.bim-estim .ebtn{position:absolute;right:calc(var(--u)*3.4);bottom:calc(var(--u)*2.6);display:inline-flex;align-items:center;height:calc(var(--u)*4.6);
  padding-inline:calc(var(--u)*2.4);border-radius:9999px;background:#c7cfdd;color:#fff;font-family:var(--fb);font-size:calc(var(--u)*1.6);font-weight:600;}
.js #volume.s12 .bim-estim .ebtn{background:var(--ab-bleu);transition:background .3s 1s;}

/* L'ombre longue sous le cadre. */
.bim-scene::after{content:'';position:absolute;left:6%;right:6%;bottom:-12%;height:24%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(3,5,10,.7),rgba(3,5,10,0) 72%);filter:blur(16px);
  opacity:0;transition:opacity 1s;}
.js .scene3d.s1 .bim-scene::after{opacity:1;}

/* Sur téléphone, les boutons de la scène reviennent juste après elle. */
.bim-apres{display:none;}
@media (max-width:899px){.bim-apres{display:flex;flex-wrap:wrap;gap:.75rem;padding:1.5rem var(--px) 2.5rem;background:var(--ink);}}
.bim-apres .btn-paper{--fill:var(--copper-hi);}
.bim-apres .btn-ghost{color:var(--w);border-color:rgba(255,255,255,.28);--fill:var(--w);}
.bim-apres .btn-ghost:hover{color:var(--ink);border-color:var(--w);}

/* L'indice : un cran à la fois. */
.s3-indice{display:none;}
.js .s3-indice{display:flex;position:absolute;left:0;right:0;bottom:calc(var(--dock-h,0px) + .75rem);z-index:3;
  justify-content:center;align-items:center;gap:.75rem;
  font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--w-mute);
  transition:opacity .4s;pointer-events:none;}
.js .scene3d.s2 .s3-indice{opacity:0;}
.s3-indice i{display:block;width:1px;height:2.25rem;background:linear-gradient(to bottom,var(--copper-hi),transparent);
  transform-origin:top;animation:s3-fil 2.2s var(--e-io) infinite;}
@keyframes s3-fil{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* Hors de la scène, les pièces et les lettres se posent quand on les découvre, avec le même moteur. */
.js .bim-lettres.pose .l{opacity:1;transform:none;}

/* ── Ce que contient l'option : trois colonnes, filets fins, grands numéros ── */
.an-trois{list-style:none;margin:0;padding:0;display:grid;gap:2rem;}
@media (min-width:900px){.an-trois{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;}
  .an-trois li{padding-inline:clamp(1.5rem,2.6vw,2.5rem);border-left:1px solid var(--line2);}
  .an-trois li:first-child{padding-left:0;border-left:0;}}
.an-trois b{display:block;font-family:var(--fd);font-size:clamp(2.5rem,4vw,3.5rem);font-weight:700;letter-spacing:-.03em;line-height:1;
  background-image:var(--grad-copper-txt);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:1rem;}
.an-trois h3{margin:0 0 .625rem;font-family:var(--fd);font-size:clamp(1.25rem,1.7vw,1.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--txt);}
.an-trois p{margin:0;color:var(--body);font-size:1.0625rem;line-height:1.65;}

/* ── Les objections : la phrase qu'on se dit, puis la réponse ── */
.an-obj{margin:0;display:grid;gap:clamp(1.75rem,3vw,2.5rem);max-width:46rem;}
.an-obj dt{font-family:var(--fd);font-size:clamp(1.375rem,2.2vw,1.875rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--txt);}
.an-obj dd{margin:.625rem 0 0;color:var(--body);font-size:1.0625rem;line-height:1.7;}

/* ── La fin, en encre, avec le numéro ── */
.s3-fin .st{max-width:18ch;}
.s3-fin .hctas{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin-top:2rem;}
.s3-fin .btn-paper{--fill:var(--copper-hi);}
.s3-tel{font-family:var(--fd);font-weight:700;letter-spacing:.01em;}

/* ═══════════════════════════════════════════════════════════════════════════
   MÉTHODE (#procede) : le devis qui s'écrit et se signe, l'acompte, le site qui
   se monte, le solde, la mise en ligne à son nom. Quinze crans, trois étapes.
   Le même cadre joue deux rôles : une feuille (crans 1 à 4), puis, au cran 5,
   il s'élargit et devient la fenêtre du navigateur. Sans JavaScript, c'est la
   fenêtre finale qui est posée ; la feuille n'existe que sous « .js ».
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:900px){#procede .bim-scene{--w:min(52vw,46rem,calc((100svh - var(--nh) - 5rem)*1.25));}}
#procede .bim-cadre{margin-inline:auto;height:calc(var(--u)*67.5);}
#procede .bim-ecran{aspect-ratio:auto;height:calc(var(--u)*62.5);}
.js #procede .bim-cadre{transition:opacity .5s var(--e-out),transform 1s var(--e-out),border-radius .9s var(--e-out),
  width 1.1s var(--e-io),height 1.1s var(--e-io),background-color .8s var(--e-out),border-color .8s var(--e-out);}
.js #procede:not(.s5) .bim-cadre{width:calc(var(--u)*64);height:calc(var(--u)*80);background-color:#fff;border-color:rgba(255,255,255,.6);}
.js #procede:not(.s5) .bim-barre,.js #procede:not(.s5) .bim-ecran{opacity:0;}
#procede .bim-barre,#procede .bim-ecran{transition:opacity .5s var(--e-out) .5s;}

/* La feuille : un devis KINONE, tel qu'il sort de KINONE FLOW (en-tête, parties,
   lignes, totaux, deux cases de signature). Tout en unités du cadre. */
.bim-feuille{display:none;}
.js .bim-feuille{display:block;position:absolute;inset:0;z-index:8;padding:calc(var(--u)*4) calc(var(--u)*4.5);
  color:#141F38;font-family:var(--fb);transition:opacity .45s var(--e-out);}
.js #procede.s5 .bim-feuille{opacity:0;pointer-events:none;}
.fe-tete{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:calc(var(--u)*1.8);border-bottom:1px solid #e6e8ee;}
.fe-tete img{width:calc(var(--u)*13);height:auto;}
.fe-doc{text-align:right;}
.fe-doc b{display:block;font-family:var(--fd);font-weight:700;font-size:calc(var(--u)*2.5);letter-spacing:.06em;line-height:1;}
.fe-doc span{display:block;margin-top:calc(var(--u)*.5);font-size:calc(var(--u)*1.15);color:#8a90a3;}
.fe-parties{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2);padding:calc(var(--u)*1.8) 0 calc(var(--u)*1.4);}
.fe-parties i{display:block;font-style:normal;font-size:calc(var(--u)*1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:calc(var(--u)*.4);}
.fe-parties b{display:block;font-size:calc(var(--u)*1.45);font-weight:700;}
.fe-parties span{display:block;font-size:calc(var(--u)*1.2);color:#6b7280;}
.fe-objet{margin:0 0 calc(var(--u)*1.2);font-size:calc(var(--u)*1.35);}
.fe-objet b{font-weight:700;}
.fe-lignes{width:100%;border-collapse:collapse;font-size:calc(var(--u)*1.3);}
.fe-lignes th{text-align:left;padding:0 0 calc(var(--u)*.55);font-size:calc(var(--u)*1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid #141F38;}
.fe-lignes td{padding:calc(var(--u)*.8) 0;border-bottom:1px solid #eceef3;color:#2b3149;vertical-align:top;}
.fe-lignes th.p,.fe-lignes td.p{text-align:right;white-space:nowrap;}
.fe-lignes td.p{font-weight:600;color:#141F38;}
.fe-totaux{margin:calc(var(--u)*1.4) 0 0 auto;width:62%;font-size:calc(var(--u)*1.25);}
.fe-totaux div{display:flex;justify-content:space-between;gap:calc(var(--u)*2);padding:calc(var(--u)*.45) 0;border-bottom:1px solid #f0f1f4;color:#6b7280;}
.fe-totaux div b{color:#141F38;font-weight:600;}
.fe-totaux .tt{margin-top:calc(var(--u)*.4);padding-top:calc(var(--u)*.8);border-top:2px solid #141F38;border-bottom:0;color:#141F38;font-weight:700;font-size:calc(var(--u)*1.5);}
.fe-tva{margin:calc(var(--u)*.5) 0 0;text-align:right;font-size:calc(var(--u)*1);font-style:italic;color:#aab0c0;}
.fe-sigs{position:absolute;left:calc(var(--u)*4.5);right:calc(var(--u)*4.5);bottom:calc(var(--u)*4);display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2);}
.fe-sig{position:relative;height:calc(var(--u)*13);padding:calc(var(--u)*1.1) calc(var(--u)*1.3);border:1px solid #e8e8e8;border-radius:calc(var(--u)*.7);}
.fe-sig.client{border-color:#C1703B;}
.fe-sig i{display:block;font-style:normal;font-size:calc(var(--u)*.95);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.fe-sig.client i{color:#C1703B;}
/* Les signatures : deux écritures manuscrites (polices libres, sous-ensemblées : 17 et 15
   glyphes), révélées de gauche à droite comme un stylo qui avance. Kilian signe en premier,
   le client écrit « Bon pour accord » puis signe. */
@font-face{font-family:'SignatureClient';src:url('../fonts/signature-client.woff2') format('woff2');font-weight:400;font-display:swap;}
.fe-bpa{display:block;margin-top:calc(var(--u)*.5);font-size:calc(var(--u)*1.15);font-style:italic;color:#8a90a3;}
.bim-sig{position:absolute;left:calc(var(--u)*1.6);bottom:calc(var(--u)*1.5);white-space:nowrap;font-style:normal;line-height:1;}
/* Kilian signe en standard : son nom dans la police de titre, un trait cuivre qui se trace dessous. */
.sig-kilian{font-family:var(--fd);font-weight:700;font-size:calc(var(--u)*2.1);letter-spacing:-.02em;color:#1e2235;display:grid;gap:calc(var(--u)*.3);}
.sig-trait{width:calc(var(--u)*13);height:calc(var(--u)*1);overflow:visible;}
.sig-trait path{fill:none;stroke:var(--copper);stroke-width:1.6;stroke-linecap:round;}
.js .sig-trait path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--e-io) .9s;}
.js .bim-sig.pose .sig-trait path{stroke-dashoffset:0;}
.sig-client{font-family:'SignatureClient',cursive;font-size:calc(var(--u)*3.6);color:#2b2f45;bottom:calc(var(--u)*1.2);}
.js .bim-sig{clip-path:inset(-30% 100% -30% -6%);transition:clip-path 1.3s var(--e-io) calc(var(--i,0)*.6s + .15s);}
.js .bim-sig.pose{clip-path:inset(-30% -6% -30% -6%);}

/* Le tampon : il arrive de face, se pose de biais, et reste. */
.bim-tampon{position:absolute;z-index:9;transform:rotate(-9deg);pointer-events:none;}
.bim-tampon>span{display:grid;justify-items:center;gap:calc(var(--u)*.2);padding:calc(var(--u)*1.1) calc(var(--u)*2);
  border:calc(var(--u)*.42) solid var(--copper);border-radius:calc(var(--u)*1.1);box-shadow:inset 0 0 0 calc(var(--u)*.22) #fff;
  color:var(--copper);font-family:var(--fd);font-weight:800;font-size:calc(var(--u)*2.1);line-height:1;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.82);--t-pose:.5s;}
.bim-tampon small{font-family:var(--fb);font-size:calc(var(--u)*1.05);font-weight:700;letter-spacing:.2em;}
.tampon-acompte{right:calc(var(--u)*5);bottom:calc(var(--u)*19.5);}

/* La barre d'adresse : « aperçu » pendant le travail, le vrai domaine au cran 13. */
#procede .bim-url{position:relative;}
.url-apercu{display:none;}
.js .url-apercu{display:block;position:absolute;left:calc(var(--u)*1.6);color:rgba(255,255,255,.5);transition:opacity .3s;}
.js #procede.s13 .url-apercu{opacity:0;}
.url-cadenas{width:calc(var(--u)*1.6);height:calc(var(--u)*1.6);margin-right:calc(var(--u)*.8);fill:none;stroke:#8fd39a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.js .url-cadenas{opacity:0;transition:opacity .4s var(--e-out) .9s;}
.js #procede.s13 .url-cadenas{opacity:1;}

/* Le cran 11 : la vraie page défile, le téléphone arrive à droite. */
.js #procede.s11 .bim-page{opacity:1;transform:translateY(calc(var(--d2,0)*-1px));}
.js #procede.s13 .bim-page{transform:none;transition-duration:.6s,1.4s,.8s;}
.bim-tel{position:absolute;z-index:8;right:-4%;bottom:-8%;width:24%;border-radius:calc(var(--u)*3);border:calc(var(--u)*1.1) solid #0d1424;
  background:#0d1424;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.4),0 40px 80px -30px rgba(5,7,14,.9);pointer-events:none;}
.bim-tel img{display:block;width:100%;height:auto;}
.bim-tel::before{content:'';position:absolute;left:50%;top:calc(var(--u)*.9);width:34%;height:calc(var(--u)*1.6);translate:-50% 0;border-radius:9999px;background:#0d1424;z-index:1;}
.tag-tel{right:24%;bottom:12%;}

/* Le cran 12 : la facture de solde arrive à gauche, et son tampon se pose. */
.bim-recu{position:absolute;z-index:8;left:-3%;bottom:10%;width:40%;padding:calc(var(--u)*2.2) calc(var(--u)*2.4) calc(var(--u)*2.6);
  border-radius:calc(var(--u)*1.6);background:#fff;color:#141F38;font-family:var(--fb);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 30px 60px -24px rgba(5,7,14,.8);pointer-events:none;transition:opacity .5s var(--e-out);}
.js #procede.s13 .bim-recu{opacity:0;}
.bim-recu i{display:block;font-style:normal;font-size:calc(var(--u)*1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.bim-recu b{display:block;margin-top:calc(var(--u)*.5);font-family:var(--fd);font-size:calc(var(--u)*2.2);font-weight:700;letter-spacing:-.02em;}
.bim-recu span{display:block;margin-top:calc(var(--u)*.4);font-size:calc(var(--u)*1.2);color:#6b7280;}
.tampon-solde{right:calc(var(--u)*-1.5);top:calc(var(--u)*-2.4);}

/* Le cran 14 : trois étiquettes se posent sur le site, et le curseur de KINONE s'en va. */
/* À la gauche du téléphone, qui occupe le coin bas-droit de la scène. */
.tag-nom1{right:calc(var(--u)*27);top:calc(var(--u)*10);}
.tag-nom2{right:calc(var(--u)*27);top:calc(var(--u)*16);}
.tag-nom3{right:calc(var(--u)*27);top:calc(var(--u)*22);}
.js #procede.s14 .bim-curseur{opacity:0;transition:opacity .5s var(--e-out) .9s,left 1.2s var(--e-io),top 1.2s var(--e-io);}

@media (prefers-reduced-motion:reduce){
  .js .bim-lettres .l,.js .bim-p,.js .bim-acte .s3-sub,.js .bim-cadre,.js .bim-o,.js .bim-page,.js .bim-estim,.js .bim-sig,.js .bim-feuille{transition:none;}
  .js .bim-p{filter:none;}
  .js .bim-o::after,.s3-indice i{animation:none;}
  .bim-curseur.clic::after{animation:none;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MÉTHODE, sous la scène : le dossier qui se remplit, et le calendrier.
   Le visiteur coche ce qu'il a déjà ; une feuille vole dans la chemise, le
   compteur avance, la phrase dit où on en est. Sans JavaScript : les cases
   cochent (natif), la liste est complète, la chemise reste posée, le compteur
   n'existe pas.
   ═══════════════════════════════════════════════════════════════════════════ */
.dos{display:grid;gap:2.5rem;}
@media (min-width:900px){.dos{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,6vw,6rem);align-items:start;}
  .dos-gauche{position:sticky;top:calc(var(--nh) + 1.5rem);}}
.dos-chemise{position:relative;width:min(100%,21rem);aspect-ratio:5/4;margin-bottom:1.5rem;}
.dc-dos{position:absolute;inset:14% 0 0;border-radius:1.25rem;background:linear-gradient(165deg,#b4501e,#8a3512 70%,#7a2f10);
  box-shadow:0 1px 2px rgba(15,19,34,.05),0 30px 60px -28px rgba(194,85,31,.55);}
.dc-dos::before{content:'';position:absolute;left:0;top:-9%;width:40%;height:11%;border-radius:.9rem .9rem 0 0;background:#b4501e;}
.dc-feuilles{position:absolute;left:9%;right:9%;top:9%;bottom:24%;}
.dc-feuilles i{position:absolute;inset:0;border-radius:.6rem;background:#fff;
  box-shadow:0 1px 2px rgba(15,19,34,.06),0 16px 34px -18px rgba(15,19,34,.45);
  transform:translateY(58%) rotate(0deg);opacity:0;transition:transform .8s var(--e-out),opacity .35s var(--e-out);}
.dc-feuilles i::before,.dc-feuilles i::after{content:'';position:absolute;left:12%;height:5%;border-radius:9999px;background:#e2e4ea;}
.dc-feuilles i::before{top:14%;width:52%;}
.dc-feuilles i::after{top:26%;width:34%;background:#c2551f;opacity:.7;}
.dc-feuilles i:nth-child(1){--r:-5deg;--ty:2%;}
.dc-feuilles i:nth-child(2){--r:3deg;--ty:-1%;}
.dc-feuilles i:nth-child(3){--r:-2deg;--ty:-4%;}
.dc-feuilles i:nth-child(4){--r:4deg;--ty:-7%;}
.dc-feuilles i:nth-child(5){--r:-3deg;--ty:-10%;}
.dc-feuilles i:nth-child(6){--r:1deg;--ty:-13%;}
.dos[data-n="1"] .dc-feuilles i:nth-child(-n+1),.dos[data-n="2"] .dc-feuilles i:nth-child(-n+2),.dos[data-n="3"] .dc-feuilles i:nth-child(-n+3),
.dos[data-n="4"] .dc-feuilles i:nth-child(-n+4),.dos[data-n="5"] .dc-feuilles i:nth-child(-n+5),.dos[data-n="6"] .dc-feuilles i:nth-child(-n+6){
  opacity:1;transform:translateY(var(--ty)) rotate(var(--r));}
.dc-face{position:absolute;inset:44% 0 0;border-radius:1.25rem;background:var(--grad-copper);color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;padding:1.25rem 1.5rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(15,19,34,.08);}
.dc-face::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--gloss);opacity:.35;pointer-events:none;}
.dc-n{display:none;position:relative;font-family:var(--fd);font-size:clamp(2.5rem,4vw,3.5rem);font-weight:800;line-height:1;letter-spacing:-.03em;}
.js .dc-n{display:block;}
.dc-n small{font-size:.45em;font-weight:700;opacity:.8;letter-spacing:0;}
.dc-t{position:relative;margin-top:.35rem;font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.9;}
.dos-verdict{font-size:1.0625rem;line-height:1.6;color:var(--body);max-width:24rem;min-height:5.2em;transition:opacity .3s;}
.dos-verdict strong{color:var(--txt);font-weight:650;}
.dos-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem;}
.dos-liste{list-style:none;margin:0;padding:0;display:grid;border-bottom:1px solid var(--line2);}
.dos-item{position:relative;display:grid;grid-template-columns:1.75rem 1fr;gap:.2rem 1rem;padding:1.125rem 0;border-top:1px solid var(--line2);cursor:pointer;}
.dos-item input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.dos-case{grid-row:span 2;width:1.5rem;height:1.5rem;margin-top:.15rem;border-radius:.45rem;border:2px solid var(--line2);background:#fff;
  display:grid;place-items:center;transition:background .3s var(--e-out),border-color .3s,transform .35s var(--e-back),box-shadow .3s;}
.dos-case svg{width:72%;height:72%;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s var(--e-out) .08s;}
.dos-item:hover .dos-case{border-color:var(--copper);}
.dos-item input:checked + .dos-case{background:var(--grad-copper);border-color:var(--copper);transform:scale(1.1);
  box-shadow:0 1px 2px rgba(15,19,34,.08),0 10px 20px -10px rgba(194,85,31,.7);}
.dos-item input:checked + .dos-case svg{stroke-dashoffset:0;}
.dos-item input:focus-visible + .dos-case{outline:2px solid var(--copper);outline-offset:3px;}
.dos-txt{display:grid;gap:.2rem;}
.dos-txt b{font-family:var(--fd);font-size:1.125rem;font-weight:700;letter-spacing:-.01em;color:var(--txt);line-height:1.25;transition:color .25s;}
.dos-txt span{font-size:.9688rem;line-height:1.55;color:var(--body);}
.dos-item input:checked ~ .dos-txt b{color:var(--copper-txt);}
.dc-vol{position:fixed;z-index:600;width:1.75rem;height:2.25rem;border-radius:.35rem;background:#fff;pointer-events:none;
  box-shadow:0 1px 2px rgba(15,19,34,.1),0 16px 30px -14px rgba(15,19,34,.5);}
.dc-vol::before{content:'';position:absolute;left:18%;top:22%;width:50%;height:9%;border-radius:9999px;background:#c2551f;}
.dc-vol::after{content:'';position:absolute;left:18%;top:42%;width:64%;height:9%;border-radius:9999px;background:#e2e4ea;}

/* Sur téléphone (demande de KINONE, 8 septembre) : on coche en bas, la chemise doit se voir se
   remplir. La liste passe en premier ; la chemise, son compteur et la phrase deviennent une
   carte collée au bas de l'écran, au-dessus du dock, tant qu'on parcourt la liste ; elle se
   range à sa place ensuite, et les boutons viennent après. */
/* .sec est en overflow:hidden, ce qui tue un sticky (piège n°5) : la section du dossier passe en clip. */
#dossier.sec{overflow:clip;}
.dos-suivi-n{display:none;}
@media (max-width:899px){
  .dos-gauche{display:contents;}
  .dos-liste{order:1;}
  .dos-suivi{order:2;position:sticky;bottom:calc(var(--dock-h,0px) + 1.25rem);z-index:5;
    display:grid;grid-template-columns:4.25rem 1fr;gap:.25rem .875rem;align-items:center;
    margin-top:.75rem;padding:.75rem .875rem;border-radius:1.25rem;
    background:var(--gloss),rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.9);
    backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);
    box-shadow:0 1px 2px rgba(15,19,34,.06),0 24px 50px -22px rgba(15,19,34,.35);}
  .dos-chemise{grid-row:span 2;width:4.25rem;margin:0;}
  /* La carte vit dans les 15 % du bas de l'écran, hors de la marge de l'observateur : la chemise est posée d'office. */
  .js .dos-chemise.bim-p{opacity:1;filter:none;transform:none;transition:none;}
  .dc-dos{border-radius:.5rem;} .dc-dos::before{border-radius:.35rem .35rem 0 0;}
  .dc-face{border-radius:.5rem;padding:0;} .dc-face .dc-n,.dc-face .dc-t{display:none;}
  .dc-feuilles i{border-radius:.2rem;}
  .dos-suivi-n{display:flex;align-items:baseline;gap:.5rem;margin:0;}
  .dos-suivi-n .dc-n{display:block;font-family:var(--fd);font-size:1.5rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--txt);}
  .dos-suivi-n .dc-n small{font-size:.55em;font-weight:700;color:var(--mute);}
  .dos-suivi-n .dc-t{font-family:var(--fp);font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-txt);}
  .dos-verdict{margin:0;font-size:.8125rem;line-height:1.35;min-height:0;max-width:none;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .dos-actions{order:3;margin-top:1.25rem;}
}

/* Le calendrier : trois colonnes à filets, la formule, le délai en grand, le suivi. */
.cal-bande{display:grid;gap:1.5rem;margin:0 0 clamp(2.75rem,5vw,4.5rem);}
@media (min-width:700px){.cal-bande{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;}
  .cal-bande{gap:clamp(1.5rem,3vw,3rem);}}
.cal-bande dt{font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-hi);}
.cal-bande dd{margin:.5rem 0 0;}
.cal-bande b{display:block;font-family:var(--fd);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;letter-spacing:-.025em;line-height:1.05;color:var(--w);}
.cal-bande span{display:block;margin-top:.4rem;font-size:.9688rem;line-height:1.5;color:var(--w-dim);}
.cal-fin{padding-top:clamp(1.5rem,3vw,2.5rem);}
.cal-fin .cta-t{font-size:clamp(1.75rem,3.6vw,2.75rem);}
#calendrier .sd{color:var(--w);}

/* ═══════════════════════════════════════════════════════════════════════════
   OFFRES (#formules) : UNE SEULE ZONE DE LECTURE, UN SEUL OBJET QUI GRANDIT.
   À gauche : le titre de la page, puis un prix en grand et une phrase, un acte par
   formule. À droite : un objet en vraie 3D CSS (cartes de papier avec épaisseur, cube de
   cuivre, palette, agenda, curseur) qui grandit d'un cran à l'autre : une page ; trois
   pages, le cube, les couleurs ; les outils branchés. Dernier cran : les trois prix en
   rappel et la suite. Retenu le 9 septembre après cinq formes refusées (maquette
   abstraite, pictogrammes, image générée, ruban, trois cartes) : « trop d'info partout,
   on ne sait plus où lire ». Ici on lit une chose à la fois. Sans JavaScript : les quatre
   textes l'un sous l'autre, l'objet complet.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:900px){.of-duo{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);}}
.of-h1{margin:0 0 clamp(1rem,2.4vh,1.75rem);font-family:var(--fd);font-weight:700;letter-spacing:-.025em;line-height:1.05;color:var(--w);font-size:clamp(1.5rem,2.4vw,2rem);max-width:22ch;}
.of-prix{margin:0 0 .75rem;display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem .75rem;font-family:var(--fd);font-weight:800;letter-spacing:-.045em;line-height:.9;color:var(--w);font-size:clamp(3.5rem,8vw,6.5rem);}
.of-prix span{font-size:.28em;font-weight:700;letter-spacing:0;color:var(--w-mute);}
.of-prix em{display:block;width:100%;font-style:normal;font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-hi);margin-top:.5rem;}
.of-prix--pro b{background-image:linear-gradient(100deg,#f19069 0%,#e0703a 58%,#c96234 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.of-saut{margin:0 0 .5rem;font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.06em;color:var(--copper-hi);}
.of-t{margin:0 0 .75rem;font-family:var(--fd);font-weight:700;letter-spacing:-.025em;line-height:1.08;color:var(--w);font-size:clamp(1.5rem,2.6vw,2.25rem);max-width:18ch;}
.of-t em{font-style:normal;background-image:linear-gradient(100deg,#f19069 0%,#e0703a 58%,#c96234 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.of-recap{margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--w-mute);}
.of-recap span{display:flex;align-items:baseline;gap:.4rem;}
.of-recap b{font-family:var(--fd);font-size:1.75rem;letter-spacing:-.03em;color:var(--w);text-transform:none;}
.of-recap .pro b{color:var(--copper-hi);}
/* Le prix arrive avec son acte : il monte et se pose, la phrase suit (mécanique des actes). */
.js .bim-acte .of-prix,.js .bim-acte .of-t,.js .bim-acte .of-saut,.js .bim-acte .of-recap{opacity:0;transform:translateY(18px);transition:opacity .6s var(--e-out),transform .8s var(--e-out);}
.js .bim-acte.on .of-prix,.js .bim-acte.on .of-t,.js .bim-acte.on .of-saut,.js .bim-acte.on .of-recap{opacity:1;transform:none;}
.js .bim-acte.on .of-t{transition-delay:.12s;}
.of-scene{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(14rem,40vh,24rem);}
/* ── L'objet, en em : sa taille se règle par font-size sur .px-3d ── */
.px-3d{position:relative;font-size:clamp(2.1rem,3.6vw,3.3rem);width:11em;height:8em;perspective:24em;transform-style:preserve-3d;}
.c3{position:absolute;left:50%;bottom:.4em;width:3.8em;height:4.9em;margin-left:-1.9em;border-radius:.6em;padding:.55em .5em;
  display:grid;gap:.3em;align-content:start;transform-style:preserve-3d;transform-origin:50% 100%;
  background:linear-gradient(165deg,#ffffff 0%,#eceef2 100%);
  box-shadow:0 1px 2px rgba(15,19,34,.12),0 .9em 1.6em -.7em rgba(5,7,14,.9);transition:transform 1.2s var(--e-out),opacity .6s var(--e-out);}
.c3::before{content:'';position:absolute;inset:0;border-radius:inherit;background:#b9bec9;transform:translateZ(-.4em) translate(.18em,.22em);}
.c3 em{display:block;height:1.55em;border-radius:.35em;background:var(--grad-copper);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}
.c3 b{display:block;height:.28em;border-radius:9999px;background:#1e2235;width:72%;}
.c3 b:nth-of-type(2){width:52%;} .c3 b:nth-of-type(3){width:62%;background:#c9cdd8;}
.c3-1{transform:rotateY(-10deg) rotateX(8deg) translateZ(.6em);}
.c3-2{transform:rotateZ(-14deg) translateX(-1.9em) translateZ(-.6em);opacity:.96;}
.c3-3{transform:rotateZ(14deg) translateX(1.9em) translateZ(-1.2em);opacity:.92;}
.c3-bulle{position:absolute;right:22%;bottom:.6em;width:1.7em;height:1.7em;border-radius:50%;background:var(--grad-copper);
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 .5em .9em -.35em rgba(194,85,31,.9);transform:translateZ(1.2em);transition:transform 1s var(--e-out) .3s,opacity .5s var(--e-out) .3s;}
.c3-bulle::after{content:'';position:absolute;inset:32%;border-radius:50%;background:#fff;opacity:.9;}
.c3-cube{position:absolute;left:50%;top:.1em;width:1.5em;height:1.5em;margin-left:-.75em;transform-style:preserve-3d;
  transform:translateY(0) rotateX(-26deg) rotateY(38deg);transition:transform 1.1s var(--e-out) .35s,opacity .5s var(--e-out) .35s;}
.c3-cube u{position:absolute;inset:0;background:var(--grad-copper);border-radius:.2em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);}
.c3-cube u:nth-child(1){transform:translateZ(.75em);}
.c3-cube u:nth-child(2){transform:rotateY(180deg) translateZ(.75em);filter:brightness(.55);}
.c3-cube u:nth-child(3){transform:rotateY(90deg) translateZ(.75em);filter:brightness(.8);}
.c3-cube u:nth-child(4){transform:rotateY(-90deg) translateZ(.75em);filter:brightness(.7);}
.c3-cube u:nth-child(5){transform:rotateX(90deg) translateZ(.75em);filter:brightness(1.2);}
.c3-cube u:nth-child(6){transform:rotateX(-90deg) translateZ(.75em);filter:brightness(.5);}
.c3-pal{position:absolute;left:10%;bottom:.5em;display:flex;gap:.25em;padding:.3em;border-radius:9999px;background:#fff;
  box-shadow:0 .4em .8em -.4em rgba(5,7,14,.9);transform:translateZ(1.4em);transition:transform 1s var(--e-out) .5s,opacity .5s var(--e-out) .5s;}
.c3-pal b{display:block;width:.6em;height:.6em;border-radius:50%;}
.c3-pal b:nth-child(1){background:#c2551f;} .c3-pal b:nth-child(2){background:#0f1322;} .c3-pal b:nth-child(3){background:#e0703a;}
.c3-agenda{position:absolute;right:6%;bottom:.4em;display:grid;grid-template-columns:repeat(4,1fr);gap:.16em;padding:.35em;border-radius:.5em;background:#fff;
  box-shadow:0 .5em .9em -.45em rgba(5,7,14,.9);transform:translateZ(1.6em) rotateY(-14deg);transition:transform 1s var(--e-out) .45s,opacity .5s var(--e-out) .45s;}
.c3-agenda b{display:block;width:.42em;height:.42em;border-radius:.12em;background:#e2e4ea;}
.c3-agenda b:nth-child(7){background:var(--grad-copper);}
.c3-curseur{position:absolute;left:4%;bottom:2.6em;width:2.4em;height:1.2em;padding:.35em .35em;border-radius:.45em;background:#fff;
  box-shadow:0 .5em .9em -.45em rgba(5,7,14,.9);transform:translateZ(1.8em) rotateY(14deg);transition:transform 1s var(--e-out) .6s,opacity .5s var(--e-out) .6s;}
.c3-curseur b{display:block;position:relative;height:.24em;border-radius:9999px;background:#e2e4ea;}
.c3-curseur b::before{content:'';position:absolute;left:0;top:0;height:100%;width:60%;border-radius:9999px;background:var(--grad-copper);}
.c3-curseur b::after{content:'';position:absolute;left:60%;top:50%;width:.55em;height:.55em;translate:-50% -50%;border-radius:50%;background:#fff;border:2px solid var(--copper);}
/* Ce que chaque cran ajoute. Avant : rangé (opacité nulle, posé plus bas). Sans JS : tout est là. */
.js #formules:not(.s1) .of-scene .c3-2,.js #formules:not(.s1) .of-scene .c3-3{transform:rotateZ(0) translateX(0) translateZ(-.2em);opacity:0;}
.js #formules:not(.s1) .of-scene .c3-cube,.js #formules:not(.s1) .of-scene .c3-pal,.js #formules:not(.s2) .of-scene .c3-agenda,.js #formules:not(.s2) .of-scene .c3-curseur{opacity:0;transform:translateY(1.4em) translateZ(0);}
.js #formules.s1 .of-scene .c3-bulle{opacity:0;transform:translateY(1em) translateZ(0);}
/* L'ombre longue sous l'objet, et la lueur */
.of-scene::before{content:'';position:absolute;left:15%;right:15%;bottom:8%;height:18%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(3,5,10,.75),rgba(3,5,10,0) 72%);filter:blur(14px);}
.of-scene::after{content:'';position:absolute;inset:-10%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(224,112,58,.18),transparent 62%);}
.of-scene .bim-tilt{position:relative;z-index:1;}
/* Au dernier cran, l'objet est pose au-dessus de son prix : il ne suit plus la souris. */
.js #formules.s3 .of-scene .bim-tilt{transform:none;transition:transform .6s var(--e-out);}
@media (max-width:899px){
  .of-h1{font-size:1.25rem;margin-bottom:.75rem;max-width:none;}
  .of-prix{font-size:2.75rem;margin-bottom:.4rem;} .of-prix em{margin-top:.25rem;font-size:.6875rem;}
  .of-t{font-size:1.25rem;margin-bottom:.5rem;}
  .of-saut{font-size:.75rem;}
  .of-recap b{font-size:1.25rem;}
  .of-scene{min-height:11rem;}
  .px-3d{font-size:1.5rem;}
}
/* LE DERNIER CRAN RECOMPOSE (idée de KINONE, 9 septembre) : le texte de gauche s'efface,
   l'objet se DÉCOMPOSE, ses pièces volent au milieu de l'écran et se posent chacune
   au-dessus de son prix : la page seule sur Vitrine, l'éventail, le cube et la palette sur
   Pro, l'agenda et le curseur sur Sur mesure. Positions mesurées par le script (--fx/--fy/
   --fs) en mise en page. Sans JavaScript : le final n'existe pas, l'acte 3 se lit à gauche. */
.of-final{display:none;}
.js .of-final{display:grid;position:absolute;inset:0;z-index:4;align-content:center;justify-items:center;gap:clamp(.75rem,1.6vh,1.25rem);
  padding-inline:var(--px);opacity:0;pointer-events:none;transition:opacity .7s var(--e-out) .6s;text-align:center;}
.js #formules.s3 .of-final{opacity:1;pointer-events:auto;}
.js .of-txt{transition:opacity .5s var(--e-out),transform .7s var(--e-out);}
.js #formules.s3 .of-txt{opacity:0;transform:translateX(-30px);pointer-events:none;}
.js .of-scene::before,.js .of-scene::after{transition:opacity .6s var(--e-out);}
.js #formules.s3 .of-scene::before,.js #formules.s3 .of-scene::after{opacity:0;}
.of-fin-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,4vw,4rem);width:100%;max-width:62rem;align-items:end;}
.of-fin-col{position:relative;}
.of-fin-obj{height:clamp(6rem,15vh,8.5rem);}
.of-fin-prix{margin:0;font-family:var(--fd);font-weight:800;font-size:clamp(2.25rem,4.4vw,3.75rem);letter-spacing:-.04em;line-height:.9;color:var(--w);}
.of-fin-prix span{font-size:.3em;font-weight:700;letter-spacing:0;color:var(--w-mute);}
.of-fin-col--pro .of-fin-prix b{background-image:linear-gradient(100deg,#f19069 0%,#e0703a 58%,#c96234 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.of-fin-nom{margin:.5rem 0 0;font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-hi);}
.of-fin-p{margin:.35rem 0 0;font-size:.9375rem;line-height:1.4;color:var(--w-dim);}
.of-fin-tag{margin:0 0 .5rem;display:inline-block;padding:.3rem .7rem;border-radius:9999px;background:var(--grad-copper);color:#fff;font-family:var(--fp);font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.of-fin-aide{margin:.25rem 0 0;max-width:48rem;font-size:.9375rem;line-height:1.5;color:var(--w-dim);}
.of-fin-aide strong{color:var(--w);}
.of-final .hctas{justify-content:center;}
.of-final .btn-paper{--fill:var(--copper-hi);}
/* Le grand objet glisse et rétrécit sur Sur mesure ; les deux objets complets de Vitrine et
   de Pro en sortent (ils partent de sa position, grands, et se posent dans leur fente). */
.js .of-scene .px-3d{transition:transform 1.4s var(--e-out);}
.js #formules.s3 .of-scene .px-3d{transform:translate(var(--fx,0px),var(--fy,0px)) scale(var(--fs,1));}
.of-fin-obj{display:flex;justify-content:center;align-items:flex-end;}
.of-fin-obj .px-3d{font-size:calc(clamp(6rem,15vh,8.5rem)/8);}
.js .of-fin-obj .px-3d{opacity:0;transform:translate(var(--gx,0px),var(--gy,0px)) scale(var(--gs,1));transition:transform 1.4s var(--e-out),opacity .5s var(--e-out);}
.js #formules.s3 .of-fin-obj .px-3d{opacity:1;transform:none;transition:transform 1.4s var(--e-out),opacity .4s var(--e-out) .2s;}
.js #formules.s3 .of-fin-col--pro .px-3d{transition-delay:.08s;}
.px-3d--v .c3-1{transform:rotateY(-16deg) rotateX(9deg) translateY(-.35em);}
.px-3d--v .c3-bulle{right:14%;bottom:.4em;}
@media (max-width:899px){
  .of-fin-grille{grid-template-columns:1fr;gap:.5rem;max-width:none;}
  .of-fin-col{display:grid;grid-template-columns:5.5rem 1fr;grid-template-areas:"o prix" "o nom" "o p";column-gap:.75rem;align-items:center;text-align:left;}
  .of-fin-obj{grid-area:o;height:4.5rem;}
  .of-fin-prix{grid-area:prix;font-size:2rem;} .of-fin-nom{grid-area:nom;margin-top:.15rem;font-size:.6875rem;} .of-fin-p{grid-area:p;font-size:.8125rem;margin-top:.15rem;}
  .of-fin-aide{font-size:.8125rem;} .of-final .hctas{display:none;}
  /* .s3-colle porte deja la hauteur de la barre en padding, et .of-final se cale
     sur .s3-duo qui commence sous ce padding : compter --nh ici le comptait deux
     fois (68 px perdus, et « Vous hesitez ? » finissait sous la frise 1-2-3). */
  .js .of-final{align-content:start;padding-top:1rem;}
}
@media (prefers-reduced-motion:reduce){.js .of-final,.js .of-txt{transition:none;}}
/* LA FRISE (KINONE, 9 septembre : « au défilement on peut passer de l'offre 1 à 3 sans le
   vouloir, il faut quelque chose qui montre qu'il y a trois offres »). Trois repères
   visibles d'avance, la formule en cours allumée, les trois à la fin, cliquables. */
.of-frise{display:none;}
.js .of-frise{display:flex;position:absolute;left:0;right:0;bottom:calc(var(--dock-h,0px) + .875rem);z-index:5;justify-content:flex-end;gap:.5rem;margin:0;padding:0 var(--px);list-style:none;}
@media (max-width:899px){.js .of-frise{justify-content:center;}}
.of-frise button{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .85rem .4rem .4rem;border-radius:9999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:var(--w-mute);font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:color .3s,border-color .3s,background .3s,transform .3s var(--e-out);}
.of-frise b{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(255,255,255,.08);color:var(--w-dim);font-family:var(--fd);font-size:.8125rem;transition:background .3s,color .3s;}
.of-frise button:hover{color:var(--w);border-color:rgba(255,255,255,.3);transform:translateY(-1px);}
.of-frise li.on button{color:var(--w);border-color:rgba(224,112,58,.5);background:rgba(224,112,58,.1);}
.of-frise li.on b{background:var(--grad-copper);color:#fff;}
.js #formules:not(.s1) .of-frise li:nth-child(1),.js #formules.s1:not(.s2) .of-frise li:nth-child(2),.js #formules.s2:not(.s3) .of-frise li:nth-child(3),
.js #formules.s3 .of-frise li{}
@media (max-width:899px){.of-frise button span{display:none;} .of-frise button{padding:.3rem;min-width:2.75rem;min-height:2.75rem;justify-content:center;} .js .of-frise{bottom:calc(var(--dock-h,0px) + .5rem);gap:.4rem;}}
.js #formules.s3 .s3-indice{opacity:0;}

/* ── Le sélecteur : deux questions, une réponse ── */
.sec-court{padding-block:clamp(3.5rem,7vw,5.5rem);}
.chx{display:grid;gap:1.5rem;}
/* Trois questions en rangée, le verdict en bande pleine largeur dessous : c'est la
   forme d'un vrai diagnostic, pas d'un gadget à deux cases. */
@media (min-width:900px){.chx{grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2rem);align-items:start;}
  .chx-r{grid-column:1/-1;}}
.chx-q{margin:0;padding:clamp(1.25rem,2.4vw,1.75rem);border:1px solid var(--line2);border-radius:1.375rem;background:rgba(255,255,255,.7);min-width:0;}
.chx-q legend{float:left;width:100%;margin-bottom:1rem;font-family:var(--fd);font-size:1.1875rem;font-weight:700;letter-spacing:-.01em;color:var(--txt);}
.chx-q label{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem .875rem;margin-top:.5rem;border-radius:1rem;border:1.5px solid var(--line2);background:#fff;cursor:pointer;
  font-size:1rem;line-height:1.45;color:var(--body);transition:border-color .25s,background .3s,color .25s,transform .3s var(--e-out);}
.chx-q label:hover{border-color:var(--copper);transform:translateY(-1px);}
/* Ce que la réponse déclenche dans le site : le fait au-dessus, le livrable en dessous. */
.chx-q label em{display:block;margin-top:.3125rem;font-style:normal;font-size:.8125rem;line-height:1.45;color:var(--mute);}
.chx-q label:has(input:checked) em{color:var(--copper-txt);}
.chx-q input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.chx-q label::before{content:'';flex-shrink:0;width:1.25rem;height:1.25rem;margin-top:.1rem;border-radius:50%;border:2px solid var(--line2);background:#fff;transition:border-color .25s,box-shadow .3s;}
.chx-q label:has(input:checked){border-color:var(--copper);background:rgba(224,112,58,.08);color:var(--txt);}
.chx-q label:has(input:checked)::before{border-color:var(--copper);box-shadow:inset 0 0 0 .3rem var(--copper);}
.chx-q label:has(input:focus-visible){outline:2px solid var(--copper);outline-offset:3px;}
.chx-r{padding:clamp(1.5rem,2.6vw,2rem);border-radius:1.375rem;background:var(--ink);color:var(--w);display:flex;flex-direction:column;gap:.75rem;
  box-shadow:0 1px 2px rgba(15,19,34,.05),0 34px 70px -26px rgba(194,85,31,.42);}
.chx-r-t{margin:0;font-family:var(--fd);font-size:clamp(1.375rem,2.2vw,1.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;}
.chx-r-t b{background-image:linear-gradient(100deg,#f19069 0%,#e0703a 58%,#c96234 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.chx-r:not(.on) .chx-r-t b{background:none;color:var(--w);-webkit-text-fill-color:var(--w);}
.chx-r-d{margin:0;color:var(--w-dim);font-size:1.0313rem;line-height:1.6;flex:1;}
/* La précision qui suit la réponse. Vide au repos et sans JavaScript : elle ne prend
   alors aucune place, ni en hauteur ni en séparateur. */
.chx-r-plus{margin:0;font-size:.9375rem;line-height:1.55;color:var(--w-dim);}
.chx-r-plus:empty{display:none;}
.chx-r-plus:not(:empty){padding-top:.8125rem;border-top:1px solid rgba(255,255,255,.14);}
.chx-r .btn{align-self:flex-start;margin-top:.5rem;}
@media (min-width:900px){
  .chx-r{display:grid;grid-template-columns:1.35fr .65fr;column-gap:clamp(1.75rem,3.5vw,3rem);row-gap:.75rem;align-items:start;}
  .chx-r-t{grid-column:1;grid-row:1;}
  .chx-r-d{grid-column:1;grid-row:2;}
  .chx-r .btn{grid-column:1;grid-row:3;justify-self:start;margin-top:.75rem;}
  .chx-r-plus{grid-column:2;grid-row:1/4;align-self:stretch;padding:.25rem 0 0 clamp(1.5rem,3vw,2.25rem);
    border-top:0;border-left:1px solid rgba(255,255,255,.14);}
  .chx-r-plus:not(:empty){padding-top:.25rem;border-top:0;}
}
.off-card.conseil{border-color:var(--copper);box-shadow:0 1px 2px rgba(15,19,34,.05),0 34px 70px -26px rgba(194,85,31,.42);}
.off-card.conseil::after{content:'Mon conseil';position:absolute;top:-.75rem;right:clamp(1.75rem,2.6vw,2.5rem);z-index:2;padding:.375rem .8125rem;border-radius:999px;
  background:var(--ink);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT (#demande) : la demande tout de suite. Encre, le titre en lettres, trois faits
   qui rassurent, le téléphone en grand ; à droite le formulaire dans une carte de papier,
   des puces qui écrivent le message, une ligne qui dit ce qui se passe après.
   ═══════════════════════════════════════════════════════════════════════════ */
.ctc{position:relative;overflow:clip;color:var(--w);padding:calc(var(--nh) + 1.5rem) 0 clamp(3rem,6vw,5rem);}
.ctc-ruban{position:absolute;right:-18%;top:-22%;width:min(62vw,56rem);height:auto;z-index:0;opacity:.55;pointer-events:none;transform:rotate(-8deg);
  filter:drop-shadow(0 40px 70px rgba(194,85,31,.25));}
.ctc-duo{position:relative;z-index:2;display:grid;gap:2.5rem;align-items:start;}
@media (min-width:1000px){.ctc-duo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,5vw,5rem);}
  .ctc-txt{position:sticky;top:calc(var(--nh) + 1.5rem);}}
.pbc--encre{color:var(--w-mute);} .pbc--encre a{color:var(--w-dim);} .pbc--encre span[aria-current]{color:var(--copper-hi);}
.ctc-h1{color:var(--w);font-size:clamp(2.5rem,5.4vw,4.25rem);max-width:none;}
.ctc-sub{margin-top:1.125rem;font-size:clamp(1rem,1.3vw,1.1875rem);line-height:1.65;color:var(--w-dim);max-width:34rem;}
.ctc-sub strong{color:var(--w);font-weight:600;}
.ctc-faits{margin:clamp(1.75rem,3vw,2.5rem) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;}
.ctc-faits{gap:clamp(1rem,2vw,2rem);}
.ctc-faits dt{font-family:var(--fd);font-size:clamp(1.25rem,2vw,1.75rem);font-weight:800;letter-spacing:-.025em;line-height:1.05;color:var(--w);}
.ctc-faits dd{margin:.35rem 0 0;font-size:.875rem;line-height:1.4;color:var(--w-mute);}
.ctc-direct{margin-top:clamp(2rem,3.5vw,3rem);}
.ctc-direct-t{margin:0 0 .5rem;font-family:var(--fp);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-hi);}
.ctc-tel{display:inline-flex;align-items:center;gap:.75rem;padding-block:.5rem;margin-block:-.5rem;font-family:var(--fd);font-size:clamp(1.75rem,3.2vw,2.75rem);font-weight:800;letter-spacing:-.03em;color:var(--w);line-height:1;transition:color .25s;}
.ctc-tel svg{width:.8em;height:.8em;fill:none;stroke:var(--copper-hi);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ctc-tel:hover{color:var(--copper-hi);}
.ctc-direct-d{margin:.75rem 0 0;font-size:.9375rem;line-height:1.5;color:var(--w-mute);}
.ctc-direct-d a{color:var(--w-dim);border-bottom:1px solid var(--ink-line2);}
.ctc-direct-d a:hover{color:var(--w);border-color:var(--w);}
/* La carte du formulaire : papier, verre, sur l'encre */
.ctc-carte{position:relative;border-radius:1.75rem;padding:clamp(1.5rem,2.8vw,2.5rem);
  background:var(--gloss),rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.9);color:var(--txt);
  box-shadow:0 1px 2px rgba(15,19,34,.08),0 40px 90px -30px rgba(5,7,14,.9),0 30px 70px -28px rgba(194,85,31,.35);}
.ctc-form-t{margin:0 0 1.25rem;font-family:var(--fd);font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--txt);}
.ctc-deux{display:grid;gap:0 1rem;}
@media (min-width:600px){.ctc-deux{grid-template-columns:1fr 1fr;}}
.ctc-form .fg label{font-size:.875rem;}
.ctc-form .fg input,.ctc-form .fg select,.ctc-form .fg textarea{border-color:var(--line);}
.ctc-puces{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .625rem;}
.ctc-puces button{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:9999px;border:1.5px solid var(--line2);background:#fff;
  font-size:.8125rem;font-weight:600;color:var(--body);cursor:pointer;transition:border-color .25s,background .3s,color .25s,transform .3s var(--e-back);}
.ctc-puces button::before{content:'+';font-weight:800;color:var(--copper);}
.ctc-puces button:hover{border-color:var(--copper);color:var(--txt);transform:translateY(-1px);}
.ctc-puces button.mis{background:var(--grad-copper);border-color:transparent;color:#fff;}
.ctc-puces button.mis::before{content:'✓';color:#fff;}
.ctc-form textarea{min-height:8.5rem;}
.ctc-envoi{width:100%;margin-top:.5rem;height:3.5rem;font-size:1.0625rem;}
.ctc-apres{margin:.875rem 0 0;text-align:center;font-size:.875rem;line-height:1.5;color:var(--mute);transition:color .3s;}
.ctc-apres.on{color:var(--txt);}
/* Et après : trois temps */
.ctc-temps{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem;}
@media (min-width:800px){.ctc-temps{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;}
  .ctc-temps{gap:clamp(1.5rem,3vw,3rem);}}
.ctc-temps b{display:block;font-family:var(--fd);font-size:clamp(2.25rem,4vw,3.25rem);font-weight:800;letter-spacing:-.03em;line-height:1;
  background-image:var(--grad-copper-txt);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ctc-temps strong{display:block;margin-top:.75rem;font-family:var(--fd);font-size:1.1875rem;font-weight:700;letter-spacing:-.015em;color:var(--txt);}
.ctc-temps span{display:block;margin-top:.4rem;font-size:.9688rem;line-height:1.55;color:var(--body);}
@media (max-width:999px){.ctc-ruban{right:-40%;top:auto;bottom:-10%;width:120vw;opacity:.35;}}
/* Téléphone : les trois faits en trois lignes, le fait et sa suite sur la même ligne. */
@media (max-width:599px){.ctc-faits{grid-template-columns:1fr;gap:.5rem;}
  .ctc-faits>div{display:flex;align-items:baseline;gap:.6rem;padding:0;}
  .ctc-faits dt{font-size:1.25rem;} .ctc-faits dd{margin:0;font-size:.875rem;}}
.ctc-form textarea{min-height:7rem;}

/* ── Contact v3 : Kilian en personne, le formulaire en trois temps, l'illustration de la page ── */
.ctc-kilian{display:flex;align-items:center;gap:1rem;margin-top:clamp(1.25rem,2.4vw,1.75rem);max-width:34rem;}
.ctc-kilian img{width:5.5rem;height:5.5rem;border-radius:50%;object-fit:cover;object-position:50% 20%;flex-shrink:0;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 20px 40px -18px rgba(194,85,31,.7);outline:2px solid rgba(224,112,58,.55);outline-offset:3px;}
.ctc-kilian p{margin:0;font-family:var(--fd);font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--w);}
.ctc-kilian em{display:block;margin-top:.35rem;font-family:var(--fp);font-style:normal;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-hi);}
.ctc-illu{position:absolute;right:-3.5rem;top:-4.5rem;width:clamp(10rem,16vw,16rem);height:auto;z-index:3;pointer-events:none;
  filter:drop-shadow(0 30px 50px rgba(5,7,14,.7));}
@media (max-width:999px){.ctc-illu{right:-1.5rem;top:-3.5rem;width:8.5rem;}}
.ctc-carte{overflow:visible;}
.ctc-prog{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;gap:.5rem;flex-wrap:wrap;}
.ctc-prog li{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .8rem .35rem .35rem;border-radius:9999px;background:var(--paper);color:var(--mute);
  font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background .3s,color .3s;}
.ctc-prog b{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#fff;color:var(--txt);font-family:var(--fd);font-size:.8125rem;box-shadow:0 1px 2px rgba(15,19,34,.12);}
.ctc-prog li.on{background:rgba(224,112,58,.12);color:var(--copper-txt);}
.ctc-prog li.on b{background:var(--grad-copper);color:#fff;}
.ctc-prog li.fait b{background:var(--txt);color:#fff;}
.ctc-etape{margin:0;padding:0;border:0;min-width:0;}
/* Pas de flottant sur la legende : un flottant pleine largeur repoussait la grille du recapitulatif hors de la carte. */
.ctc-etape legend{float:none;padding:0;margin:0 0 1rem;}
.ctc-etape .ctc-form-t{margin-bottom:1rem;}
.js .ctc-etape{display:none;}
.js .ctc-etape.on{display:block;animation:ctc-entre .6s var(--e-out) both;}
@keyframes ctc-entre{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.ctc-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.5rem;}
.ctc-nav .btn{margin-left:auto;height:3.25rem;}
.ctc-nav--fin{justify-content:flex-start;margin-top:1rem;}
.ctc-retour{padding:.5rem 0;font-size:.9375rem;font-weight:600;color:var(--dim);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.ctc-retour:hover{color:var(--txt);}
.ctc-recap{margin:0 0 1.25rem;display:grid;gap:.75rem;}
.ctc-recap div{display:grid;gap:.15rem;padding:.75rem .9rem;border-radius:.875rem;background:var(--paper);}
.ctc-recap dt{font-family:var(--fp);font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.ctc-recap dd{margin:0;font-size:1rem;line-height:1.45;color:var(--txt);white-space:pre-line;}
.ctc-recap dd:empty::before{content:'à compléter';color:var(--mute);font-style:italic;}
html:not(.js) .ctc-nav,html:not(.js) .ctc-prog,html:not(.js) .ctc-recap{display:none;}
@media (prefers-reduced-motion:reduce){.js .ctc-etape.on{animation:none;}}

/* ── Dernier cran d'Offres : les retours du 9 septembre au soir ─────────
   Les tuiles sont des liens vers le haut de leur carte. */
.of-fin-col{display:block;color:inherit;text-decoration:none;border-radius:1.25rem;
  transition:transform .4s var(--e-out);}
.of-fin-col:hover{transform:translateY(-4px);}
.of-fin-col:focus-visible{outline:2px solid var(--copper-hi);outline-offset:6px;}
/* Le haut de la carte visee se cale sous la barre, pas derriere. */
.off-card{scroll-margin-top:calc(var(--nh) + 1.25rem);}
/* Fenetre courte (portable + barre Windows) : le cran se compacte pour que les
   pilules restent dans l'ecran. Rien n'est masque, tout est plus petit. */
@media (min-width:900px) and (max-height:820px){
  .js .of-final{gap:.5rem;}
  .of-fin-obj{height:clamp(4.5rem,11vh,6.5rem);}
  .of-fin-obj .px-3d{font-size:calc(clamp(4.5rem,11vh,6.5rem)/8);}
  .of-fin-prix{font-size:clamp(1.875rem,4.6vh,3rem);}
  .of-fin-p{font-size:.875rem;}
  .of-fin-aide{font-size:.875rem;max-width:44rem;}
  .of-final .hctas{margin-top:.25rem;}
}
/* Telephone : trois rangees a filets, l'objet a gauche, le prix a droite. Une
   colonne d'objets flottants ne se lisait pas ; une liste, si. */
@media (max-width:899.98px){
  .of-fin-grille{grid-template-columns:1fr;gap:0;max-width:none;border-top:1px solid var(--ink-line2);}
  .of-fin-col{display:grid;grid-template-columns:4.75rem minmax(0,1fr);column-gap:1rem;align-items:center;
    text-align:left;padding:.75rem 0;border-bottom:1px solid var(--ink-line2);border-radius:0;}
  .of-fin-col:hover{transform:none;}
  .of-fin-obj{height:4rem;grid-area:o;justify-content:flex-start;align-items:center;}
  .of-fin-obj .px-3d{font-size:calc(4rem/8);}
  /* La pastille « La plus choisie » partage la rangee du prix, a droite : elle
     n'ajoute aucune hauteur, la fin de scene tient dans un ecran de 700 px. */
  .of-fin-tag{grid-area:prix;justify-self:end;align-self:center;margin:0;padding:.25rem .55rem;font-size:.5625rem;}
  .of-fin-prix{grid-column:2;font-size:2rem;}
  .of-fin-nom{grid-column:2;margin-top:.15rem;}
  .of-fin-p{grid-column:2;margin-top:.15rem;font-size:.875rem;}
}

/* Telephone, dernier cran : les objets 3D debordaient de leur case et se
   chevauchaient d'une rangee a l'autre. Plus petits, centres, et de l'air. */
@media (max-width:899.98px){
  .of-fin-col{padding:1rem 0;grid-template-columns:4.25rem minmax(0,1fr);}
  .of-fin-obj{height:3.75rem;justify-content:center;align-items:center;overflow:visible;}
}
@media (max-width:899.98px) and (max-height:680px){
  .of-fin-col{padding:.625rem 0;}
  .of-fin-obj .px-3d{font-size:calc(3rem/8);}
  .of-fin-obj .px-3d--p{font-size:calc(2.5rem/8);}
}

/* ── Fenetre courte sur ordinateur (zoom Windows 125 % : 1536 x 688) ──
   Les tailles de la scene suivent la largeur (vw) et debordaient d'un ecran
   court : les pilules des crans 0 a 2 sortaient de 46 px. Ici tout suit AUSSI
   la hauteur. Rien n'est masque. */
@media (min-width:900px) and (max-height:820px){
  .s3-hero .sidx{margin-bottom:.5rem;}
  .s3-titre{font-size:clamp(1.75rem,5.6vh,3.25rem);margin-bottom:.5rem;}
  .of-saut{margin-bottom:.25rem;}
  .of-prix{font-size:clamp(2.75rem,9vh,5rem);margin-bottom:.5rem;}
  .of-prix em{margin-top:.25rem;}
  .of-t{font-size:clamp(1.25rem,3.4vh,1.875rem);margin-bottom:.5rem;}
  .s3-sub{font-size:1rem;line-height:1.5;margin-bottom:.875rem;}
  .of-recap{margin-bottom:.625rem;} .of-recap b{font-size:1.5rem;}
  .s3-duo{padding-bottom:1rem;}
}