/* ====================================================================
   JOSEDO — Feuille de style du site (bandeur · Caen 14) · VERSION v6
   --------------------------------------------------------------------
   Ce fichier contient TOUTE la mise en forme du site.
   Il est lu par index.html via :  <link rel="stylesheet" href="style.css">

   COMMENT C'EST ORGANISÉ (dans l'ordre, de haut en bas)
   ----------------------------------------------------
   • :root .................. les VARIABLES (couleurs + polices) — tout en haut
   • STYLES PRINCIPAUX ...... nav, héros (le grand visuel), sections, contact
   • COMPLÉMENTS V5 ......... réglages de mise en page + bandes + slider du joint
   • ADAPTATIONS MOBILE ..... ajustements pour téléphones
   • BLOC « BENTO » ......... la grande tuile « Le métier » (méthode/devis/zone)
   • LISIBILITÉ UX/UI ....... contrastes et focus (petits raffinements)

   À l'origine ces parties étaient dans 5 balises <style> séparées ; elles
   sont ici à la suite, chacune annoncée par un gros commentaire en MAJUSCULES.

   POUR MODIFIER
   -------------
   • Une COULEUR  → bloc « :root » ci-dessous (variables --teal, --rose…)
   • Une POLICE   → bloc « :root » (variables --display, --head, --body…)
   • Les tailles utilisent souvent clamp(min, idéal, max) = (petit écran, fluide, grand écran)
   • Le rendu est volontairement IDENTIQUE à la version d'origine.
   ==================================================================== */


/* ====================================================================
   STYLES PRINCIPAUX (variables, nav, héros, sections, contact, pied de page)
   ==================================================================== */

:root {
  /* =================================================================
     VARIABLES — le « panneau de réglages » du site.
     Une couleur ou une police changée ICI se met à jour PARTOUT.
     (Les #xxxxxx sont des codes couleur ; testez-les sur un
      sélecteur de couleur en ligne pour visualiser la teinte.)
     ================================================================= */

  /* --- Famille BLEU (univers « phonique ») --- */
  --teal:#4d88a1;        /* bleu principal               */
  --teal-deep:#34657d;   /* bleu foncé (titres, fonds)   */
  --teal-ink:#2c5365;    /* bleu très foncé (textes)     */

  /* --- Famille ROSE (univers « feu ») --- */
  --rose:#b46b7b;        /* rose principal               */
  --rose-deep:#94505f;   /* rose foncé (section contact) */
  --wine:#5f3640;        /* rose très foncé (réserve)    */

  /* --- Famille VERT (univers « hydro ») --- */
  --green-2:#3f8c63;     /* vert principal               */
  --mint:#95ccab;        /* vert clair                   */
  --mint-2:#c3e3d0;      /* vert très clair (textes)     */
  --vert-soft:#d8ebe0;   /* fond vert pâle               */

  /* --- Accents (jaune / orange) --- */
  --sun:#f5c543;         /* jaune soulignement / points  */
  --sun-deep:#e0a92c;    /* jaune foncé                  */
  --coral:#ef7a5a;       /* orange (mots mis en avant)   */

  /* --- Neutres (encre + tons « plâtre/carton ») --- */
  --ink:#14201f;         /* presque noir (texte, traits) */
  --board:#e8dcc4;       /* carton / placo               */
  --plaster:#efe9df;     /* fond plâtre clair (page)     */
  --cream:#ece5d7;       /* crème                        */
  --band:#faf6ee;        /* blanc cassé (cartes)         */
  --paper:#f7f3ea;       /* papier (réserve)             */

  /* --- Bleu « mur placo » du héros et des bandes --- */
  --placo:#c4dbe3;       /* bleu doux                    */
  --placo-soft:#d6e7ec;  /* bleu doux clair              */
  --placo-deep:#a8cad7;  /* bleu doux foncé              */

  /* --- POLICES (changez le 1ᵉʳ nom pour changer la police) --- */
  --display:"Anton","Arial Narrow",sans-serif;            /* gros titres   */
  --head:"Bricolage Grotesque",system-ui,sans-serif;      /* sous-titres   */
  --mono:"Space Mono",ui-monospace,monospace;             /* petits labels */
  --body:"Hanken Grotesk",system-ui,sans-serif;           /* texte courant */
}
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  font-family:var(--body);
  color:var(--ink);
  background:var(--plaster);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img {
  display:block;
  max-width:100%;
  -webkit-user-drag:none;
}
a {
  color:inherit;
  text-decoration:none;
}
::selection {
  background:var(--sun);
  color:var(--ink);
}
.wrap {
  width:min(1280px,92vw);
  margin-inline:auto;
  position:relative;
  z-index:2;
}
.stamp {
  font-family:var(--mono);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.4;
}
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:120;
  pointer-events:none;
  opacity:.04;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ NAV ============ */
.nav {
  position:sticky;
  top:0;
  z-index:100;
  background:color-mix(in srgb,var(--plaster) 86%,transparent);
  backdrop-filter:blur(9px);
  border-bottom:2px solid var(--ink);
}
.nav-in {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:62px;
  width:min(1280px,92vw);
  margin-inline:auto;
}
.brand {
  font-family:var(--display);
  font-size:24px;
  letter-spacing:.04em;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:10px;
}
.brand .dot {
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 2px var(--ink);
}
.brand small {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  color:var(--rose-deep);
  font-weight:700;
}
.nlinks {
  display:flex;
  gap:24px;
}
.nlinks a {
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:color .2s;
}
.nlinks a:hover {
  color:var(--teal);
}
.nphone {
  font-family:var(--mono);
  font-weight:700;
  font-size:13px;
  letter-spacing:.04em;
  background:var(--ink);
  color:var(--plaster);
  padding:10px 16px;
  border-radius:40px;
  transition:.22s;
}
.nphone:hover {
  background:var(--teal);
  transform:translateY(-1px);
}
@media(max-width:860px) {
  .nlinks {
    display:none;
  }
}

/* ============ HERO SCENE ============ */
#hero {
  position:relative;
  height:calc(100svh - 62px);
  min-height:560px;
  overflow:hidden;
  isolation:isolate;
}
.wallbase {
  position:absolute;
  inset:0;
  z-index:0;
  background:radial-gradient(135% 105% at 50% -5%,var(--placo-soft) 0%,var(--placo) 50%,var(--placo-deep) 100%);
}
.wallbase::after {
  content:"";
  position:absolute;
  inset:0;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#surface,#bands,#debris {
  position:absolute;
  inset:0;
}
#surface {
  z-index:1;
}
#bands {
  z-index:2;
}
#debris {
  z-index:3;
}
.vign {
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  box-shadow:inset 0 0 200px rgba(20,32,31,.07);
}
.content {
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(20px,4vh,54px) clamp(22px,6vw,90px);
  text-align:center;
  gap:clamp(12px,2.2vh,26px);
  pointer-events:none;
}
.content .in {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(12px,2.2vh,26px);
  max-width:1120px;
}
.content a {
  pointer-events:auto;
}
.ey {
  display:inline-flex;
  align-items:center;
  gap:13px;
  color:var(--teal-deep);
  font-size:clamp(10px,1.2vw,13px);
}
.ey .ln {
  width:34px;
  height:2px;
  background:var(--ink);
  opacity:.7;
}
.logo {
  font-family:var(--display);
  font-size:clamp(72px,17vw,260px);
  line-height:.78;
  letter-spacing:.02em;
  color:var(--ink);
}
.tag {
  font-family:var(--head);
  font-weight:700;
  font-size:clamp(18px,2.7vw,38px);
  letter-spacing:-.01em;
  line-height:1.04;
  color:var(--teal-ink);
}
.tag em {
  font-style:normal;
  color:var(--coral);
  position:relative;
  white-space:nowrap;
}
.tag em::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.12em;
  height:.12em;
  background:var(--coral);
  border-radius:3px;
  transform:scaleX(.96) rotate(-.4deg);
  opacity:.85;
}
.offer {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px 11px;
  margin-top:2px;
}
.offer li {
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(10px,1.1vw,12.5px);
  letter-spacing:.04em;
  text-transform:uppercase;
  border:2px solid var(--ink);
  border-radius:40px;
  padding:8px 14px;
  background:rgba(255,255,255,.55);
}
.offer li:nth-child(2) {
  border-color:var(--teal);
  color:var(--teal-deep);
}
.offer li:nth-child(3) {
  border-color:var(--green-2);
  color:var(--green-2);
}
.offer li:nth-child(4) {
  border-color:var(--rose);
  color:var(--rose-deep);
}
.phone {
  margin-top:clamp(6px,1.6vh,18px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.phone .lab {
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--teal-deep);
}
.phone .num {
  font-family:var(--display);
  font-size:clamp(30px,5.8vw,84px);
  line-height:.88;
  letter-spacing:.02em;
  color:var(--ink);
  white-space:nowrap;
  border-bottom:.09em solid var(--sun);
  padding-bottom:.04em;
  transition:color .2s;
}
.phone .num:hover {
  color:var(--teal-deep);
}
.corner {
  position:absolute;
  z-index:5;
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(9px,1vw,12px);
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.5;
}
.corner.tl {
  top:clamp(16px,3vh,30px);
  left:clamp(20px,4vw,52px);
  color:var(--rose-deep);
}
.corner.tr {
  top:clamp(16px,3vh,30px);
  right:clamp(20px,4vw,52px);
  text-align:right;
  color:var(--teal-deep);
}
/* mascots */
.masco-wrap {
  position:absolute;
  z-index:8;
  bottom:-3%;
  pointer-events:none;
  will-change:transform;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.masco-wrap.rose {
  left:clamp(-30px,-1.5vw,-6px);
}
.masco-wrap.bleu {
  right:clamp(-30px,-1.5vw,-6px);
}
.masco {
  display:block;
  width:clamp(104px,12.5vw,196px);
  transform-origin:50% 100%;
  transition:transform .45s cubic-bezier(.2,.8,.3,1.4);
  filter:drop-shadow(0 18px 22px rgba(20,32,31,.20));
}
.masco.bleu {
  transform:scaleX(-5);
}
.masco.idle {
  animation:bob 5.4s ease-in-out infinite;
}
.masco.bleu.idle {
  animation-name:bobflip;
}
.masco.rose.idle {
  animation-delay:-1.8s;
}
.masco.near {
  transform:translateY(-12px) scale(1.05) rotate(-2deg);
}
.masco.bleu.near {
  transform:scaleX(-1) translateY(-12px) scale(1.05) rotate(-2deg);
}
.masco.cheer {
  animation:cheer .7s cubic-bezier(.25,.9,.3,1.3) 2;
}
.masco.bleu.cheer {
  animation:cheerflip .7s cubic-bezier(.25,.9,.3,1.3) 2;
}
@keyframes bob {
  0%,100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
}
@keyframes bobflip {
  0%,100% {
    transform:scaleX(-1) translateY(0);
  }
  50% {
    transform:scaleX(-1) translateY(-10px);
  }
}
@keyframes cheer {
  0%,100% {
    transform:translateY(0) rotate(0);
  }
  30% {
    transform:translateY(-28px) rotate(-4deg);
  }
  60% {
    transform:translateY(-6px) rotate(3deg);
  }
}
@keyframes cheerflip {
  0%,100% {
    transform:scaleX(-1) translateY(0);
  }
  30% {
    transform:scaleX(-1) translateY(-28px) rotate(4deg);
  }
  60% {
    transform:scaleX(-1) translateY(-6px) rotate(-3deg);
  }
}
.bubble {
  position:absolute;
  z-index:9;
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(10px,1.05vw,12.5px);
  letter-spacing:.02em;
  background:var(--sun);
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:14px;
  padding:8px 12px;
  white-space:nowrap;
  opacity:0;
  transform:translateY(8px) scale(.9);
  transition:.4s cubic-bezier(.2,.8,.3,1.3);
  box-shadow:0 10px 18px -10px rgba(20,32,31,.5);
}
.bubble::after {
  content:"";
  position:absolute;
  bottom:-9px;
  width:14px;
  height:14px;
  background:var(--sun);
  border-right:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  transform:rotate(45deg);
}
.bubble.rose {
  left:clamp(70px,10vw,170px);
  bottom:clamp(132px,18vh,224px);
}
.bubble.rose::after {
  left:22px;
}
.bubble.bleu {
  right:clamp(70px,10vw,170px);
  bottom:clamp(132px,18vh,224px);
}
.bubble.bleu::after {
  right:22px;
}
.bubble.show {
  opacity:1;
  transform:translateY(0) scale(1);
}
/* hero chrome */
.hero-ctrl {
  position:absolute;
  z-index:10;
  left:clamp(16px,3vw,30px);
  bottom:clamp(14px,3vh,26px);
  display:flex;
  gap:8px;
}
.ghbtn {
  font-family:var(--mono);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  background:rgba(255,255,255,.5);
  color:var(--ink);
  border:1.5px solid rgba(20,32,31,.32);
  border-radius:30px;
  padding:7px 12px;
  transition:.18s;
  pointer-events:auto;
}
.ghbtn:hover {
  border-color:var(--ink);
  background:rgba(255,255,255,.75);
}
.ghbtn.on {
  background:var(--teal);
  border-color:var(--teal);
  color:var(--band);
}
.hint {
  position:absolute;
  z-index:10;
  left:50%;
  bottom:clamp(58px,9vh,96px);
  transform:translateX(-50%);
  pointer-events:none;
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal-deep);
  opacity:0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:opacity .6s;
}
.hint.show {
  opacity:.6;
  animation:hintpulse 2.6s ease-in-out infinite;
}
.hint.gone {
  opacity:0!important;
  animation:none;
}
.hint .dab {
  width:24px;
  height:9px;
  border-radius:6px;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  box-shadow:0 0 0 1px rgba(20,32,31,.12);
}
@keyframes hintpulse {
  0%,100% {
    opacity:.48;
  }
  50% {
    opacity:.76;
  }
}
.scrollcue {
  position:absolute;
  z-index:10;
  right:clamp(16px,3vw,30px);
  bottom:clamp(14px,3vh,26px);
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal-deep);
  opacity:.72;
}
.scrollcue .ar {
  width:22px;
  height:22px;
  border:2px solid var(--ink);
  border-radius:50%;
  display:grid;
  place-items:center;
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue {
  0%,100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(4px);
  }
}

/* ============ trust ============ */
.trust {
  background:var(--ink);
  color:var(--plaster);
  border-bottom:2px solid var(--ink);
}
.trust-in {
  display:flex;
  flex-wrap:wrap;
  gap:8px 30px;
  justify-content:center;
  padding:15px 0;
  width:min(1280px,92vw);
  margin-inline:auto;
}
.trust span {
  font-family:var(--mono);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.trust span::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--sun);
}

/* ============ section base ============ */
section.s {
  padding:clamp(64px,10vh,128px) 0;
  position:relative;
}
.shead {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:50px;
}
.shead .num {
  font-family:var(--mono);
  font-weight:700;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--coral);
}
.shead h2 {
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(30px,5.2vw,72px);
  line-height:.86;
  letter-spacing:.01em;
  margin-top:8px;
}
.shead .lead {
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  color:var(--teal-ink);
  max-width:34ch;
  font-weight:500;
}
/* méthode */
.dark {
  background:var(--teal-deep);
  color:var(--plaster);
  border-block:2px solid var(--ink);
}
.dark .shead h2 {
  color:var(--mint);
}
.dark .shead .lead {
  color:var(--mint-2);
}
.dark .shead .num {
  color:var(--sun);
}
.passes {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.pass {
  background:var(--band);
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:12px;
  padding:22px 24px 28px;
  position:relative;
  box-shadow:0 22px 40px -28px rgba(0,0,0,.6);
}
.pass .figure {
  height:140px;
  margin:-4px -6px 0;
  display:grid;
  place-items:center;
  position:relative;
}
.pass .figure img {
  height:144px;
  width:auto;
  filter:drop-shadow(0 12px 12px rgba(20,32,31,.2));
}
.pass .pn {
  position:absolute;
  top:6px;
  right:8px;
  font-family:var(--display);
  font-size:50px;
  line-height:1;
  color:var(--cream);
  -webkit-text-stroke:2px var(--ink);
}
.pass h3 {
  font-family:var(--head);
  font-weight:800;
  font-size:22px;
  letter-spacing:-.01em;
  margin:6px 0 9px;
}
.pass .pk {
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--rose-deep);
}
.pass p {
  font-size:14.5px;
  line-height:1.55;
  color:var(--teal-ink);
}
.pass.c1 {
  box-shadow:0 22px 40px -28px rgba(0,0,0,.6),inset 0 4px 0 var(--rose);
}
.pass.c2 {
  box-shadow:0 22px 40px -28px rgba(0,0,0,.6),inset 0 4px 0 var(--teal);
}
.pass.c3 {
  box-shadow:0 22px 40px -28px rgba(0,0,0,.6),inset 0 4px 0 var(--green-2);
}
@media(max-width:780px) {
  .passes {
    grid-template-columns:1fr;
    max-width:430px;
    margin-inline:auto;
  }
}
/* tarif */
.tarif-sec {
  background:var(--vert-soft);
}
.tarif {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:40px;
  align-items:center;
}
.tarif .l h3 {
  font-family:var(--head);
  font-weight:800;
  font-size:clamp(23px,3vw,38px);
  letter-spacing:-.02em;
  line-height:1.04;
}
.tarif .l p {
  margin-top:15px;
  font-size:16px;
  line-height:1.6;
  color:var(--teal-ink);
  max-width:42ch;
  font-weight:500;
}
.tarif .stamp-tag {
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:22px;
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--green-2);
  border:2px solid var(--green-2);
  padding:9px 14px;
  border-radius:30px;
}
.price-cards {
  display:flex;
  flex-direction:column;
  gap:16px;
  position:relative;
}
.pc {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 26px;
  background:var(--band);
  border:2px solid var(--ink);
  border-radius:8px;
  box-shadow:0 16px 30px -22px rgba(20,32,31,.5);
}
.pc .k {
  font-family:var(--mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--rose-deep);
  max-width:16ch;
}
.pc .v {
  font-family:var(--display);
  font-size:clamp(42px,6vw,68px);
  line-height:.9;
  letter-spacing:.01em;
}
.pc .v small {
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--teal);
  letter-spacing:0;
  display:block;
  margin-top:4px;
}
.tarif-char {
  position:absolute;
  right:-34px;
  bottom:-66px;
  width:160px;
  z-index:3;
  filter:drop-shadow(0 18px 18px rgba(20,32,31,.18));
  animation:bob 5s ease-in-out infinite;
}
@media(max-width:880px) {
  .tarif {
    grid-template-columns:1fr;
    gap:26px;
  }
  .tarif-char {
    display:none;
  }
}
/* contact */
.contact {
  background:var(--rose-deep);
  color:var(--plaster);
  border-top:2px solid var(--ink);
  text-align:center;
  overflow:hidden;
}
.contact .stamp {
  color:var(--mint-2);
}
.contact h2 {
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(44px,10vw,140px);
  line-height:.84;
  letter-spacing:.01em;
  margin:16px 0 8px;
}
.contact .tel {
  display:inline-block;
  margin-top:22px;
  font-family:var(--display);
  font-size:clamp(30px,5vw,58px);
  letter-spacing:.02em;
  color:var(--plaster);
  border-bottom:4px solid var(--sun);
  padding-bottom:4px;
  transition:.2s;
}
.contact .tel:hover {
  color:var(--sun);
}
.contact .sub {
  margin-top:16px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mint-2);
}
.contact-char {
  position:absolute;
  left:4%;
  bottom:-6px;
  width:clamp(112px,15vw,196px);
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.25));
  animation:bob 5.6s ease-in-out infinite;
}
@media(max-width:880px) {
  .contact-char {
    opacity:.3;
    left:-30px;
  }
}
footer {
  background:var(--ink);
  color:var(--plaster);
  padding:32px 0;
}
.foot-in {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}
.foot-in .stamp {
  color:color-mix(in srgb,var(--plaster) 70%,transparent);
}
.foot-in .b {
  font-family:var(--display);
  font-size:22px;
  letter-spacing:.04em;
}
.mq {
  background:var(--teal);
  border-block:2px solid var(--ink);
  overflow:hidden;
  white-space:nowrap;
}
.mq .t {
  display:inline-flex;
  animation:mq 32s linear infinite;
  padding:12px 0;
}
.mq b {
  font-family:var(--display);
  font-size:clamp(19px,2.4vw,32px);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--band);
  display:inline-flex;
  align-items:center;
}
.mq b::after {
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--sun);
  margin:0 26px;
}
@keyframes mq {
  to {
    transform:translateX(-50%);
  }
}
.rv {
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
}
.rv.in {
  opacity:1;
  transform:none;
}
@media(prefers-reduced-motion:reduce) {
  .rv {
    opacity:1;
    transform:none;
  }
  .masco.idle,.tarif-char,.contact-char,.contact2 .char,.tarif2 .char,.mq .t,.hint.show {
    animation:none;
  }
}

/* ===================== MONDE DES BANDES — la page est un mur ===================== */
/* joint bandé horizontal = intro de section */
.seamrow {
  position:relative;
  background:var(--placo);
  border-block:2px solid var(--ink);
  overflow:hidden;
}
.seamrow .band {
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  height:clamp(60px,9vh,96px);
  pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(245,240,230,.0) 6%,#efe9dc 26%,#fbf8f1 44%,#ffffff 50%,#fbf8f1 56%,#efe9dc 74%,rgba(245,240,230,0) 94%);
}
.seamrow .band::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  transform:translateY(-50%);
  background:rgba(20,32,31,.05);
}
.seamrow .band::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  height:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));
  opacity:.6;
}
.seamrow .wrap {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  padding:clamp(30px,5.5vh,52px) 0;
}
.seamrow .num {
  font-family:var(--display);
  font-size:clamp(26px,4vw,46px);
  color:var(--ink);
  line-height:1;
}
.seamrow .nm {
  font-family:var(--mono);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:clamp(11px,1.3vw,14px);
  color:var(--ink);
}
.seamrow .tboard {
  font-family:var(--mono);
  font-weight:700;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:5px 11px;
  border:1.5px solid var(--ink);
  border-radius:20px;
  background:rgba(255,255,255,.65);
}
.seamrow.b .tboard {
  color:var(--teal-deep);
  border-color:var(--teal-deep);
}
.seamrow.v .tboard {
  color:var(--green-2);
  border-color:var(--green-2);
}
.seamrow.r .tboard {
  color:var(--rose-deep);
  border-color:var(--rose-deep);
}
.panel {
  position:relative;
  overflow:hidden;
  border-bottom:2px solid var(--ink);
}
.panelhead {
  margin-bottom:clamp(32px,6vh,60px);
  max-width:780px;
  position:relative;
  z-index:2;
}
.panelhead h2 {
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(34px,6.4vw,100px);
  line-height:.96;
  letter-spacing:.005em;
}
.panelhead p {
  margin-top:20px;
  font-size:clamp(15px,1.7vw,19px);
  line-height:1.55;
  max-width:48ch;
  font-weight:500;
}
/* 01 — coupe d'un joint */
.methode2 {
  background:var(--teal-deep);
  color:var(--plaster);
  padding:clamp(60px,9vh,120px) 0;
}
.methode2 .panelhead h2 {
  color:#fff;
}
.methode2 .panelhead p {
  color:var(--mint-2);
}
.jdiagram {
  display:grid;
  grid-template-columns:1fr clamp(96px,9vw,148px) 1fr;
  grid-template-rows:repeat(3,1fr);
  gap:clamp(20px,4vh,46px) clamp(20px,4vw,60px);
  align-items:center;
  min-height:clamp(440px,60vh,700px);
  position:relative;
  z-index:2;
}
.jstrip {
  grid-column:2;
  grid-row:1 / 4;
  position:relative;
  align-self:stretch;
  border:2.5px solid var(--ink);
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(180deg,#b09f80 0%,#b8a98c 16%,#cabd9d 36%,#e6dcc2 58%,#f6f1e6 78%,#ffffff 100%);
  box-shadow:0 30px 50px -30px rgba(0,0,0,.6);
}
.jstrip .seam {
  position:absolute;
  left:50%;
  top:0;
  width:8px;
  height:100%;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(28,22,14,.7),transparent);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 20%,transparent 50%);
  mask-image:linear-gradient(180deg,#000 0,#000 20%,transparent 50%);
}
.jstrip .mesh {
  position:absolute;
  left:50%;
  top:24%;
  width:36px;
  height:32%;
  transform:translateX(-50%);
  background:repeating-linear-gradient(45deg,rgba(20,32,31,.22) 0 1.5px,transparent 1.5px 7px),repeating-linear-gradient(-45deg,rgba(20,32,31,.22) 0 1.5px,transparent 1.5px 7px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);
}
.jstrip .scr {
  position:absolute;
  left:50%;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#7d7768;
  border:1.6px solid var(--ink);
  transform:translateX(-50%);
  z-index:2;
}
.jstrip .scr::after {
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:8px;
  height:1.6px;
  background:var(--ink);
  border-radius:2px;
  transform:rotate(35deg);
}
.jstrip .lab {
  position:absolute;
  left:0;
  right:0;
  text-align:center;
  font-family:var(--mono);
  font-weight:700;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(20,32,31,.5);
}
.anno {
  position:relative;
}
.anno.r {
  text-align:right;
}
.anno .n {
  font-family:var(--display);
  font-size:clamp(44px,5.8vw,90px);
  line-height:.82;
  color:transparent;
  -webkit-text-stroke:2px var(--mint);
}
.anno h3 {
  font-family:var(--head);
  font-weight:800;
  font-size:clamp(19px,2.1vw,27px);
  margin:6px 0 9px;
  color:#fff;
}
.anno p {
  font-size:14px;
  line-height:1.55;
  color:var(--mint-2);
  max-width:34ch;
}
.anno.r p,.anno.r .n {
  margin-left:auto;
}
.a1 {
  grid-column:1;
  grid-row:1;
}
.a2 {
  grid-column:3;
  grid-row:2;
}
.a3 {
  grid-column:1;
  grid-row:3;
}
@media(max-width:820px) {
  .jdiagram {
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:22px;
    min-height:0;
  }
  .jstrip {
    display:none;
  }
  .anno,.anno.r {
    grid-column:1!important;
    grid-row:auto!important;
    text-align:left;
  }
  .anno.r p,.anno.r .n {
    margin-left:0;
  }
}
/* 02 — le métré */
.tarif2 {
  background:#c4e2d1;
  color:var(--ink);
  padding:clamp(60px,9vh,120px) 0;
  position:relative;
}
.tarif2 .metregrid {
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.5;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(20,32,31,.07) 0 1px,transparent 1px 70px),repeating-linear-gradient(90deg,rgba(20,32,31,.07) 0 1px,transparent 1px 70px);
}
.ruler {
  position:relative;
  z-index:2;
  height:34px;
  margin:2px 0 26px;
  border-bottom:2px solid var(--ink);
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 40px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 58%,#000 58%);
  mask-image:linear-gradient(180deg,transparent 0,transparent 58%,#000 58%);
}
.ruler::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:18px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 200px);
}
.ruler .cap {
  position:absolute;
  left:0;
  bottom:6px;
  font-family:var(--mono);
  font-weight:700;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal-ink);
  background:#c4e2d1;
  padding:0 8px;
}
.tix {
  display:flex;
  gap:clamp(18px,3vw,32px);
  flex-wrap:wrap;
  margin-top:6px;
  position:relative;
  z-index:2;
}
.tix .t {
  flex:1;
  min-width:300px;
  background:var(--band);
  border:2.5px solid var(--ink);
  border-radius:14px;
  padding:clamp(24px,3vw,36px);
  box-shadow:0 24px 44px -30px rgba(20,32,31,.5);
  position:relative;
  overflow:hidden;
}
.tix .t::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:7px;
  background:var(--green-2);
}
.tix .t.alt::before {
  background:var(--teal);
}
.tix .tt {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
}
.tix .k {
  font-family:var(--mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--rose-deep);
  max-width:20ch;
}
.tix .unit {
  font-family:var(--display);
  font-size:clamp(20px,2.4vw,30px);
  color:var(--cream);
  -webkit-text-stroke:1.6px var(--ink);
}
.tix .big {
  font-family:var(--display);
  font-size:clamp(76px,11vw,148px);
  line-height:.8;
  letter-spacing:.01em;
  margin:14px 0 4px;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.tix .big small {
  font-family:var(--mono);
  font-size:clamp(13px,1.4vw,16px);
  font-weight:700;
  color:var(--teal-deep);
  letter-spacing:0;
  margin-top:12px;
}
.tix .incl {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 20px;
}
.tix .incl li {
  font-family:var(--mono);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--teal-ink);
  border:1.5px solid rgba(20,32,31,.28);
  border-radius:20px;
  padding:6px 11px;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.tix .incl li::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green-2);
}
.tix .ex {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:10px;
  background:var(--vert-soft);
  border:1.5px dashed var(--green-2);
}
.tix .ex .lab {
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--teal-ink);
}
.tix .ex .arr {
  font-family:var(--mono);
  font-weight:700;
  color:var(--rose-deep);
}
.tix .ex b {
  font-family:var(--display);
  font-size:clamp(26px,3.4vw,40px);
  line-height:.9;
  margin-left:auto;
  color:var(--ink);
}
.tarif-foot {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 22px;
  margin-top:clamp(24px,4vh,42px);
  position:relative;
  z-index:2;
}
.tarif-foot p {
  font-size:15.5px;
  line-height:1.55;
  max-width:46ch;
  color:var(--teal-ink);
  font-weight:500;
}
.fcomp {
  font-family:var(--mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--green-2);
  border:2px solid var(--green-2);
  border-radius:30px;
  padding:10px 16px;
  transform:rotate(-2deg);
  background:rgba(255,255,255,.5);
}
.tarif2 .char {
  position:absolute;
  right:2%;
  bottom:-10px;
  width:clamp(120px,14vw,196px);
  z-index:1;
  filter:drop-shadow(0 18px 18px rgba(20,32,31,.18));
  animation:bob 5s ease-in-out infinite;
}
@media(max-width:900px) {
  .tarif2 .char {
    display:none;
  }
}
/* 03 — radar 50 km */
.zone2 {
  background:var(--board);
  color:var(--ink);
  padding:clamp(60px,9vh,120px) 0;
  position:relative;
}
.radar {
  position:relative;
  height:clamp(440px,60vw,680px);
  margin-top:14px;
  z-index:2;
}
.radar .sweep {
  position:absolute;
  left:50%;
  top:50%;
  width:104%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  z-index:0;
  background:conic-gradient(from 0deg,rgba(63,140,99,.22),rgba(63,140,99,0) 65%);
  animation:spin 7s linear infinite;
  -webkit-mask-image:radial-gradient(circle,#000 0,#000 99%,transparent 100%);
  mask-image:radial-gradient(circle,#000 0,#000 99%,transparent 100%);
}
@keyframes spin {
  to {
    transform:translate(-50%,-50%) rotate(360deg);
  }
}
.radar .ring {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:2px dashed rgba(20,32,31,.32);
  border-radius:50%;
}
.radar .r1 {
  width:26%;
  aspect-ratio:1;
}
.radar .r2 {
  width:52%;
  aspect-ratio:1;
}
.radar .r3 {
  width:78%;
  aspect-ratio:1;
}
.radar .r4 {
  width:104%;
  aspect-ratio:1;
  border-style:solid;
  border-color:rgba(20,32,31,.18);
}
.radar .core {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:var(--rose-deep);
  color:var(--plaster);
  font-family:var(--display);
  font-size:clamp(19px,2.4vw,32px);
  letter-spacing:.04em;
  width:clamp(84px,11vw,124px);
  height:clamp(84px,11vw,124px);
  display:grid;
  place-items:center;
  border-radius:50%;
  border:2.5px solid var(--ink);
  z-index:3;
  box-shadow:0 14px 26px -12px rgba(20,32,31,.5);
}
.radar .km {
  position:absolute;
  left:50%;
  top:4%;
  transform:translateX(-50%);
  font-family:var(--display);
  font-size:clamp(30px,5vw,68px);
  color:rgba(20,32,31,.16);
  letter-spacing:.04em;
}
.radar .pin {
  position:absolute;
  transform:translate(-50%,-50%);
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(10px,1.1vw,12.5px);
  letter-spacing:.03em;
  text-transform:uppercase;
  background:var(--band);
  border:2px solid var(--ink);
  border-radius:30px;
  padding:6px 11px;
  white-space:nowrap;
  z-index:2;
  box-shadow:0 8px 16px -8px rgba(20,32,31,.4);
}
.radar .pin .d {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--teal);
  margin-right:7px;
  vertical-align:middle;
}
.radar .pin.far .d {
  background:var(--rose-deep);
}
.radar .rlab {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-weight:700;
  font-size:10px;
  letter-spacing:.1em;
  color:rgba(20,32,31,.4);
  z-index:1;
  background:var(--board);
  padding:0 6px;
}
@media(max-width:680px) {
  .radar .pin {
    font-size:9px;
    padding:4px 8px;
  }
  .radar .pin .d {
    margin-right:5px;
  }
}
/* 04 — finale contact */
.contact2 {
  background:var(--rose-deep);
  color:var(--plaster);
  text-align:center;
  position:relative;
  overflow:hidden;
  padding:clamp(72px,12vh,144px) 0 clamp(60px,9vh,112px);
}
.contact2 .stamp {
  color:var(--mint-2);
}
.contact2 h2 {
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(48px,11vw,164px);
  line-height:.92;
  letter-spacing:.005em;
  margin:14px 0 6px;
  position:relative;
  z-index:2;
}
.contact2 .tel {
  display:inline-block;
  margin-top:20px;
  font-family:var(--display);
  font-size:clamp(30px,5vw,66px);
  letter-spacing:.02em;
  color:#fff;
  border-bottom:5px solid var(--sun);
  padding-bottom:5px;
  transition:.2s;
  position:relative;
  z-index:2;
  white-space:nowrap;
}
.contact2 .tel:hover {
  color:var(--sun);
}
.contact2 .sub {
  margin-top:16px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mint-2);
  position:relative;
  z-index:2;
}
.contact2 .char {
  position:absolute;
  bottom:-6px;
  width:clamp(108px,13vw,184px);
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.25));
  animation:bob 5.4s ease-in-out infinite;
  z-index:1;
}
.contact2 .char.l {
  left:3%;
}
.contact2 .char.r {
  right:3%;
  transform:scaleX(-1);
}
@media(max-width:820px) {
  .contact2 .char.r {
    display:none;
  }
  .contact2 .char.l {
    opacity:.4;
  }
}


/* ====================================================================
   COMPLÉMENTS V5 — sections resserrées, étiquettes « placo », bandes douces, slider du joint
   ==================================================================== */

/* sections plafonnées à 900px / 95vh, layout texte (gauche) + contenu (droite) */
.panel.fit {
  display:grid;
  align-content:center;
  justify-content:center;
  padding-block:clamp(34px,5.5vh,60px);
}
@media(min-width:901px) {
  .panel.fit {
    min-height:min(900px,95vh);
  }
}
.panel.fit .panelhead h2 {
  font-size:clamp(30px,4.4vw,66px);
  line-height:.94;
}
.psplit {
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:clamp(28px,4vw,64px);
  align-items:center;
  position:relative;
  z-index:2;
}
.psplit .col-txt .panelhead {
  margin-bottom:0;
  max-width:none;
}
.zsplit {
  grid-template-columns:0.82fr 1fr;
}
@media(max-width:880px) {
  .psplit,.zsplit {
    grid-template-columns:1fr;
    gap:30px;
  }
  .panel.fit {
    min-height:0;
  }
}
/* étiquette type de placo — haut gauche de chaque section */
.plabel {
  position:absolute;
  top:clamp(16px,3vh,30px);
  left:clamp(20px,4vw,52px);
  z-index:4;
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 13px;
  border:1.6px solid currentColor;
  border-radius:30px;
}
.plabel::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:2px;
  background:currentColor;
}
.bento-head .plabel {
  position:static;
  align-self:flex-start;
  color:var(--teal-deep);
  background:rgba(255,255,255,.6);
}
.methode2 .plabel {
  color:var(--mint);
  background:rgba(20,32,31,.22);
}
.tarif2 .plabel {
  color:var(--teal-deep);
  background:rgba(255,255,255,.55);
}
.zone2 .plabel {
  color:var(--rose-deep);
  background:rgba(255,255,255,.55);
}

/* ---- séparateurs interactifs : bande pleine largeur, douce (visuel ancien) ---- */
.seamrow {
  position:relative;
  overflow:hidden;
  background:var(--placo);
}
/* joint ouvert : fine rainure douce au centre, pleine largeur */
.seamrow::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  height:3px;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(20,32,31,.16),rgba(20,32,31,.04));
  box-shadow:0 1px 0 rgba(255,255,255,.4);
}
.seamcanvas {
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}
.seam-wrap {
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:clamp(16px,3vw,40px);
  padding:clamp(30px,5.2vh,50px) 0;
}
.seam-meta {
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:116px;
}
.seam-meta .num {
  font-family:var(--display);
  font-size:clamp(28px,4vw,50px);
  line-height:.84;
}
.seam-meta .nm {
  font-family:var(--mono);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:clamp(10px,1.15vw,13px);
  color:var(--ink);
}
.seamrow.b .num {
  color:var(--teal-deep);
}
.seamrow.v .num {
  color:var(--green-2);
}
.seamrow.r .num {
  color:var(--rose-deep);
}
.seamrow:not(.b):not(.v):not(.r) .num {
  color:var(--ink);
}
.shint {
  margin-left:auto;
  flex:0 0 auto;
  font-family:var(--mono);
  font-weight:700;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(20,32,31,.52);
  display:inline-block;
  white-space:nowrap;
  transition:opacity .45s;
  pointer-events:none;
}
.shint .sup {
  font-size:.72em;
  vertical-align:.42em;
  letter-spacing:.04em;
}
.shint::before {
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:24px;
  height:8px;
  margin-right:9px;
  border-radius:5px;
  background:linear-gradient(90deg,transparent,#fff,transparent);
}
.seamrow.done .shint {
  opacity:0;
}
@media(prefers-reduced-motion:no-preference) {
  .shint::before {
    animation:shintp 2.4s ease-in-out infinite;
  }
}
@keyframes shintp {
  0%,100% {
    opacity:.45;
    transform:translateX(-7px);
  }
  50% {
    opacity:.95;
    transform:translateX(7px);
  }
}
@media(max-width:560px) {
  .seam-meta {
    min-width:86px;
  }
  .seam-meta .nm {
    display:none;
  }
  .shint {
    font-size:9px;
  }
}
/* bandes bonus (joints à lisser) — placées sur fonds colorés */
.jbandlite {
  position:relative;
  width:100%;
  height:clamp(74px,11vh,108px);
  overflow:hidden;
}
.jbandlite::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:3px;
  transform:translateY(-50%);
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(20,32,31,.24),rgba(255,255,255,.14));
}
.jbandlite .seamcanvas {
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}
.jbandlite .shint {
  position:absolute;
  z-index:3;
  right:clamp(20px,4vw,52px);
  top:50%;
  transform:translateY(-50%);
  margin:0;
  font-family:var(--mono);
  font-weight:700;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  display:inline-block;
  white-space:nowrap;
  transition:opacity .45s;
  pointer-events:none;
}
.jbandlite.done .shint {
  opacity:0;
}
.jbandlite.lit {
  cursor:none;
}
body.touch .jbandlite.lit {
  cursor:default;
}
.jbandlite.onteal {
  background:var(--teal-deep);
}
.jbandlite.ondark {
  background:var(--ink);
}
.contact2 .jbandlite {
  position:relative;
  z-index:3;
  margin-top:clamp(22px,4vh,44px);
}
footer .jbandlite {
  margin-bottom:24px;
}

/* ---- 01 · slider de montage du joint (bas → haut) ---- */
.bu {
  display:grid;
  grid-template-columns:26px auto 1fr;
  gap:clamp(14px,1.8vw,28px);
  align-items:center;
}
.bu-rail {
  position:relative;
  width:8px;
  height:clamp(300px,44vh,430px);
  border-radius:6px;
  justify-self:center;
  cursor:ns-resize;
  background:linear-gradient(0deg,rgba(255,255,255,.14),rgba(255,255,255,.14));
  overflow:visible;
  touch-action:none;
}
.bu-rail::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:var(--p,0%);
  border-radius:6px;
  background:linear-gradient(180deg,var(--mint),var(--mint-2));
}
.bu-handle {
  position:absolute;
  left:50%;
  top:var(--p,0%);
  transform:translate(-50%,-50%);
  width:30px;
  height:13px;
  border-radius:7px;
  z-index:2;
  background:linear-gradient(180deg,#fff,var(--cream));
  border:2.5px solid var(--ink);
  box-shadow:0 5px 12px rgba(0,0,0,.45);
}
.bu-handle::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:14px;
  height:2px;
  border-radius:2px;
  background:rgba(20,32,31,.45);
}
.bu-stage {
  position:relative;
  width:clamp(150px,15vw,210px);
  height:clamp(300px,44vh,430px);
  border:2.5px solid var(--ink);
  border-radius:12px;
  overflow:hidden;
  cursor:ns-resize;
  touch-action:none;
  background:linear-gradient(90deg,#b6a888 0%,#c3b591 18%,#cfc09c 50%,#c3b591 82%,#b6a888 100%);
  box-shadow:0 26px 46px -30px rgba(0,0,0,.6);
}
.bu-seam {
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:10px;
  transform:translateX(-50%);
  z-index:1;
  background:linear-gradient(90deg,transparent,rgba(20,32,31,.5),transparent);
}
.bu-layer {
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  transform:translateX(-50%);
  z-index:2;
  opacity:0;
  will-change:opacity,clip-path;
}
.bu-layer.l1 {
  width:13px;
  background:linear-gradient(90deg,#cdc5b3,#b3a791 50%,#cdc5b3);
  box-shadow:inset 0 0 6px rgba(20,32,31,.22);
}
.bu-layer.l2 {
  width:52px;
  background:#ece3d1;
  background-image:radial-gradient(rgba(20,32,31,.11) .7px,transparent 1.1px);
  background-size:6px 6px;
  border-inline:1px solid rgba(20,32,31,.09);
}
.bu-layer.l3 {
  width:106px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#f4eee1 26%,#fffdf8 50%,#f4eee1 74%,rgba(255,255,255,0));
}
.bu-layer.l4 {
  width:178px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#faf6ee 20%,#ffffff 47%,#ffffff 53%,#faf6ee 80%,rgba(255,255,255,0));
}
.bu-stage .dcap {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:4;
  text-align:center;
  padding:9px 6px;
  transition:opacity .3s;
  font-family:var(--mono);
  font-weight:700;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(20,32,31,.66);
  background:linear-gradient(0deg,rgba(255,255,255,.78),transparent);
}
.bu.started .dcap {
  opacity:0;
}
.bu-steps {
  list-style:none;
  display:flex;
  flex-direction:column-reverse;
  gap:clamp(8px,1.4vh,15px);
}
.bu-step {
  position:relative;
  padding:11px 15px 11px 48px;
  border:1.6px solid rgba(255,255,255,.2);
  border-radius:10px;
  transition:.3s;
  opacity:.46;
  color:var(--mint-2);
  cursor:pointer;
}
.bu-step:hover {
  opacity:.92;
  border-color:rgba(148,204,171,.5);
}
.bu-step .sn {
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--display);
  font-size:22px;
  color:transparent;
  -webkit-text-stroke:1.5px var(--mint);
  transition:.3s;
}
.bu-step h4 {
  font-family:var(--head);
  font-weight:800;
  font-size:clamp(14px,1.45vw,17px);
  color:#fff;
  margin-bottom:1px;
  letter-spacing:-.01em;
}
.bu-step p {
  font-size:12px;
  line-height:1.42;
}
.bu-step.done {
  opacity:.82;
  border-color:rgba(148,204,171,.4);
}
.bu-step.on {
  opacity:1;
  border-color:var(--mint);
  background:rgba(148,204,171,.13);
}
.bu-step.on .sn {
  color:var(--mint);
  -webkit-text-stroke:0;
}
@media(max-width:560px) {
  .bu {
    grid-template-columns:22px 1fr;
    gap:12px;
  }
  .bu-rail {
    height:220px;
  }
  .bu-stage {
    width:100%;
    height:220px;
  }
  .bu-steps {
    grid-column:1/-1;
    flex-direction:row;
    flex-wrap:wrap;
  }
  .bu-step {
    flex:1;
    min-width:140px;
  }
}

/* ---- 02 · tarif (nouveau modèle) ---- */
.tnote {
  margin-top:clamp(16px,2.6vh,28px);
  max-width:44ch;
  border-left:3px solid var(--green-2);
  padding-left:16px;
}
.tnote .tn-k {
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--green-2);
}
.tnote p {
  margin-top:6px;
  font-size:14px;
  line-height:1.55;
  color:var(--teal-ink);
  font-weight:500;
}
.tcards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(13px,1.5vw,20px);
}
.tc {
  position:relative;
  background:var(--band);
  border:2.5px solid var(--ink);
  border-radius:14px;
  padding:clamp(17px,1.9vw,25px);
  overflow:hidden;
  box-shadow:0 24px 44px -32px rgba(20,32,31,.5);
}
.tc::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:7px;
  background:var(--green-2);
}
.tc.alt::before {
  background:var(--teal);
}
.tc-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.tc .k {
  font-family:var(--mono);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--rose-deep);
  line-height:1.35;
}
.tc .badge {
  font-family:var(--mono);
  font-weight:700;
  font-size:9px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--green-2);
  border:1.4px solid var(--green-2);
  border-radius:20px;
  padding:5px 9px;
  white-space:nowrap;
}
.tc .badge.alt {
  color:var(--teal);
  border-color:var(--teal);
}
.tc .big {
  font-family:var(--display);
  font-size:clamp(50px,6vw,80px);
  line-height:.84;
  margin:13px 0 6px;
  display:flex;
  align-items:flex-start;
  gap:6px;
}
.tc .big small {
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--teal-deep);
  margin-top:8px;
}
.tc-note {
  font-size:12.5px;
  line-height:1.42;
  color:var(--teal-ink);
  font-weight:500;
  min-height:36px;
}
.tc .ex {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:13px;
  padding:11px 13px;
  border-radius:10px;
  background:var(--vert-soft);
  border:1.5px dashed var(--green-2);
}
.tc.alt .ex {
  border-color:var(--teal);
  background:color-mix(in srgb,var(--teal) 13%,#fff);
}
.tc .ex span {
  font-family:var(--mono);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--teal-ink);
  line-height:1.4;
}
.tc .ex span i {
  font-style:normal;
  color:var(--rose-deep);
}
.tc .ex .arr {
  color:var(--rose-deep);
}
.tc .ex b {
  font-family:var(--display);
  font-size:clamp(24px,3vw,36px);
  line-height:.9;
  color:var(--ink);
  margin-left:auto;
}
.tangle {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  margin-top:clamp(13px,1.8vh,20px);
  padding:14px 18px;
  border:2px solid var(--ink);
  border-radius:12px;
  background:rgba(255,255,255,.5);
}
.tangle .ta-k {
  font-family:var(--display);
  font-size:clamp(17px,1.9vw,23px);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.tangle .ta-d {
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.03em;
  color:var(--teal-ink);
}
@media(max-width:480px) {
  .tcards {
    grid-template-columns:1fr;
  }
}
/* tableau d'exemples tarif — prix alignés, jamais coupés */
.tcards {
  align-items:start;
}
.ttab {
  margin-top:clamp(11px,1.6vh,15px);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ttab .trow {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:3px 14px;
  padding:11px 13px;
  border-radius:10px;
  background:var(--vert-soft);
  border:1.5px dashed var(--green-2);
}
.ttab .trow.alt {
  border-color:var(--teal);
  background:color-mix(in srgb,var(--teal) 12%,#fff);
}
.ttab .tl {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ttab .tl b {
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--teal-ink);
  line-height:1.32;
}
.ttab .tl i {
  font-style:normal;
  font-family:var(--mono);
  font-weight:700;
  font-size:9.5px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--rose-deep);
  line-height:1.32;
}
.ttab .tp {
  font-family:var(--display);
  font-size:clamp(23px,2.8vw,33px);
  line-height:.9;
  white-space:nowrap;
  text-align:right;
}
.tdisc {
  margin-top:clamp(12px,1.8vh,17px);
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.03em;
  line-height:1.5;
  color:var(--teal-ink);
  display:flex;
  gap:9px;
  align-items:flex-start;
}
.tdisc::before {
  content:"";
  flex:0 0 auto;
  width:7px;
  height:7px;
  margin-top:5px;
  border-radius:50%;
  background:var(--green-2);
}
.tdisc b {
  color:var(--rose-deep);
}

/* ---- 02 · devis (sans prix) ---- */
.devis-card {
  display:grid;
  grid-template-columns:1.12fr .88fr;
  border:2.5px solid var(--ink);
  border-radius:16px;
  overflow:hidden;
  background:var(--band);
  box-shadow:0 26px 46px -30px rgba(20,32,31,.55);
}
.dc-incl {
  padding:clamp(20px,2.5vw,30px);
}
.dc-h,.dc-ql {
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green-2);
}
.dc-list {
  list-style:none;
  margin-top:15px;
  display:flex;
  flex-direction:column;
  gap:clamp(12px,1.7vh,17px);
}
.dc-list li {
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-left:24px;
  position:relative;
}
.dc-list li::before {
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:11px;
  height:11px;
  border-radius:3px;
  background:var(--green-2);
}
.dc-list li:nth-child(2)::before {
  background:var(--teal);
}
.dc-list li:nth-child(3)::before {
  background:var(--sun-deep);
}
.dc-n {
  font-family:var(--body);
  font-weight:700;
  font-size:clamp(17px,2vw,22px);
  color:var(--ink);
  letter-spacing:-.01em;
  line-height:1.1;
}
.dc-d {
  font-size:13px;
  line-height:1.5;
  color:var(--teal-ink);
  font-weight:500;
}
.dc-quote {
  background:var(--teal-deep);
  color:var(--band);
  padding:clamp(22px,2.6vw,30px) clamp(18px,2.2vw,26px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.dc-quote .dc-ql {
  color:var(--mint);
}
.dc-qv {
  font-family:var(--display);
  font-size:clamp(38px,5vw,60px);
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin-top:5px;
  color:#fff;
}
.dc-qs {
  font-family:var(--mono);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--mint-2);
  margin-top:3px;
  line-height:1.4;
}
.dc-cta {
  margin-top:15px;
  align-self:flex-start;
  font-family:var(--display);
  font-size:clamp(17px,1.9vw,23px);
  letter-spacing:.01em;
  white-space:nowrap;
  color:#fff;
  text-decoration:none;
  border-bottom:3px solid var(--sun);
  padding-bottom:2px;
  transition:.18s;
}
.dc-cta:hover {
  color:var(--sun);
}
@media(max-width:560px) {
  .devis-card {
    grid-template-columns:1fr;
  }
}

/* ---- 03 · radar + paliers de distance ---- */
.tiers {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:clamp(16px,2.6vh,26px);
}
.tier {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:4px 14px;
  padding:11px 15px 11px 17px;
  border:2px solid var(--ink);
  border-radius:10px;
  background:var(--band);
  position:relative;
  overflow:hidden;
}
.tier::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:7px;
}
.tier.t1::before {
  background:var(--green-2);
}
.tier.t2::before {
  background:var(--sun-deep);
}
.tier.t3::before {
  background:var(--rose-deep);
}
.tier .tk {
  font-family:var(--mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--teal-ink);
}
.tier .tv {
  font-family:var(--display);
  font-size:clamp(16px,1.8vw,21px);
  text-align:right;
  line-height:1;
  white-space:nowrap;
}
.tier .tv i {
  font-family:var(--mono);
  font-size:11px;
  font-style:normal;
  color:var(--teal-deep);
}
.tier .td {
  grid-column:1/-1;
  font-family:var(--mono);
  font-weight:700;
  font-size:9.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(20,32,31,.5);
}
.tile-zone .radar .r1 {
  width:40%;
  border-color:color-mix(in srgb,var(--green-2) 62%,transparent);
}
.tile-zone .radar .r2 {
  width:70%;
  border-color:color-mix(in srgb,var(--sun-deep) 72%,transparent);
}
.tile-zone .radar .r3 {
  width:100%;
  border-style:solid;
  border-color:color-mix(in srgb,var(--rose-deep) 55%,transparent);
}
.tile-zone .radar .pin .d {
  background:var(--green-2);
}
.tile-zone .radar .pin.z2 .d {
  background:var(--sun-deep);
}
.tile-zone .radar .pin.z3 .d {
  background:var(--rose-deep);
}
.tile-zone .radar .rlab {
  background:var(--vert-soft);
}


/* ====================================================================
   ADAPTATIONS MOBILE (v6) — réglages pour petits écrans
   ==================================================================== */

/* ===================== POLISH MOBILE v6 ===================== */
@media(max-width:560px) {
  /* hero : boutons recentrés entre les mascottes, on retire le doublon "Découvrir" */
  .hero-ctrl {
    left:50%;
    transform:translateX(-50%);
    bottom:clamp(10px,2.4vh,18px);
  }
  .scrollcue {
    display:none;
  }
  .corner {
    font-size:9px;
    letter-spacing:.1em;
    line-height:1.45;
  }
  .masco {
    width:clamp(90px,25vw,118px);
  }
  /* sections : on resserre un peu le vertical */
  .panelhead p {
    font-size:15px;
  }
}
@media(max-width:430px) {
  .brand {
    font-size:21px;
    gap:8px;
  }
  .brand small {
    display:none;
  }
  .nphone {
    padding:9px 13px;
    font-size:12px;
  }
  .nav-in {
    height:58px;
  }
  .phone .num {
    font-size:clamp(27px,7.4vw,40px);
  }
  .logo {
    font-size:clamp(62px,19vw,120px);
  }
  .trust-in {
    gap:7px 18px;
    padding:13px 0;
  }
  .trust span {
    font-size:10.5px;
  }
}
@media(max-width:360px) {
  .tag em {
    white-space:normal;
  }
  .offer li {
    font-size:10px;
    padding:7px 11px;
  }
}
@media(max-width:560px) {
  .radar .pin.mob-hide {
    display:none;
  }
}


/* ====================================================================
   BLOC « BENTO » — la grande tuile Métier : méthode + devis + zone réunis
   ==================================================================== */

/* ===================== BENTO — méthode + devis + zone réunis ===================== */
.bento2 {
  background:var(--plaster);
  color:var(--ink);
  padding:clamp(40px,6vh,84px) 0;
  border-bottom:2px solid var(--ink);
}
.bento-head {
  margin-bottom:clamp(20px,3vh,34px);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.bento-head h2 {
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(28px,4.4vw,60px);
  line-height:.96;
  letter-spacing:.005em;
}
.bento {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.4vw,20px);
}
.btile {
  border:2.5px solid var(--ink);
  border-radius:18px;
  padding:clamp(18px,2vw,28px);
  position:relative;
  overflow:hidden;
  box-shadow:0 26px 46px -34px rgba(20,32,31,.5);
}
.bt-k {
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:inline-block;
}
.btile h3 {
  font-family:var(--head);
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.02;
  margin-top:8px;
}
/* TILE méthode — le mur placo ENTIER, joint monté au couteau (slider) */
.tile-methode {
  grid-column:1/-1;
  display:block;
  padding:0;
  min-height:clamp(360px,46vh,470px);
  overflow:hidden;
  color:#fff;
  background:linear-gradient(158deg,#5d97ad 0%,#4d88a1 44%,#3d7184 100%);
}
.tile-methode .bu {
  position:absolute;
  inset:0;
  display:block;
  cursor:ns-resize;
  touch-action:none;
}
.tile-methode .bu-stage {
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  cursor:ns-resize;
}
.tile-methode .bu-seam,.tile-methode .bu-layer {
  left:70%;
}
.tile-methode .bu-rail {
  position:absolute;
  left:calc(70% + 58px);
  top:10%;
  bottom:10%;
  width:10px;
  height:auto;
  transform:none;
  z-index:6;
  justify-self:auto;
  border:1.5px solid rgba(20,32,31,.3);
  background-color:rgba(20,32,31,.18);
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(25% - 1.5px),rgba(255,255,255,.32) calc(25% - 1.5px),rgba(255,255,255,.32) 25%);
  box-shadow:inset 0 1px 3px rgba(20,32,31,.25);
}
.tile-methode .bu-rail::before {
  content:"\2193";
  position:absolute;
  left:50%;
  top:-23px;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-weight:700;
  font-size:13px;
  color:var(--mint);
  opacity:.9;
  pointer-events:none;
}
.tile-methode .bu.started .bu-rail::before {
  opacity:0;
}
@media(prefers-reduced-motion:no-preference) {
  .tile-methode .bu-rail::before {
    animation:railhint 1.9s ease-in-out infinite;
  }
}
@keyframes railhint {
  0%,100% {
    transform:translate(-50%,0);
  }
  50% {
    transform:translate(-50%,4px);
  }
}
.tile-methode .bu-handle {
  width:34px;
  height:14px;
  box-shadow:0 6px 14px rgba(0,0,0,.5);
}
.tile-methode .bu-scrim {
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(98deg,rgba(26,55,69,.96) 0%,rgba(32,66,82,.84) 30%,rgba(32,66,82,.2) 52%,transparent 66%),linear-gradient(0deg,rgba(26,55,69,.5) 0%,transparent 24%);
}
.tile-methode .bu-over {
  position:absolute;
  z-index:4;
  left:0;
  top:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(7px,1.3vh,13px);
  padding:clamp(20px,2.4vw,32px);
  max-width:55%;
  pointer-events:none;
}
.tile-methode .bt-k {
  color:var(--mint);
}
.tile-methode h3 {
  font-size:clamp(23px,3vw,38px);
  color:#fff;
  margin-top:6px;
}
.tile-methode .bt-mp {
  margin-top:6px;
  font-size:clamp(13px,1.3vw,15px);
  line-height:1.5;
  color:var(--mint-2);
  max-width:32ch;
  font-weight:500;
}
.tile-methode .bu-steps {
  position:static;
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:12px;
}
.tile-methode .bu-step {
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px 13px 8px 8px;
  border:1.6px solid rgba(149,204,171,.32);
  border-radius:30px;
  opacity:1;
  pointer-events:auto;
  color:var(--mint-2);
  background:rgba(20,32,31,.16);
  cursor:pointer;
  transition:transform .2s,border-color .2s,background .2s,color .2s;
}
.tile-methode .bu-step .sn {
  display:flex;
  align-items:center;
  justify-content:center;
  position:static;
  left:auto;
  top:auto;
  transform:none;
  width:24px;
  height:24px;
  flex:none;
  border-radius:50%;
  background:rgba(149,204,171,.2);
  border:1.5px solid rgba(149,204,171,.5);
  color:var(--mint);
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  -webkit-text-stroke:0;
  transition:.2s;
}
.tile-methode .bu-step h4 {
  font-family:var(--mono);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:inherit;
  margin:0;
}
.tile-methode .bu-step::after {
  content:"\203A";
  margin-left:auto;
  font-family:var(--head);
  font-weight:800;
  font-size:17px;
  line-height:1;
  color:rgba(149,204,171,.55);
  transition:transform .2s,color .2s;
}
.tile-methode .bu-step:hover,.tile-methode .bu-step:focus-visible {
  transform:translateX(4px);
  border-color:var(--mint);
  background:rgba(149,204,171,.16);
  color:#fff;
  outline:none;
}
.tile-methode .bu-step:hover::after,.tile-methode .bu-step:focus-visible::after {
  transform:translateX(3px);
  color:var(--mint);
}
.tile-methode .bu-step:hover .sn,.tile-methode .bu-step:focus-visible .sn {
  border-color:var(--mint);
  color:#fff;
}
.tile-methode .bu-step.on {
  border-color:var(--mint);
  background:var(--mint);
  color:var(--teal-ink);
}
.tile-methode .bu-step.on .sn {
  background:var(--teal-deep);
  border-color:var(--teal-deep);
  color:#fff;
}
.tile-methode .bu-step.on h4 {
  color:var(--teal-ink);
}
.tile-methode .bu-step.on::after {
  color:var(--teal-deep);
}
.tile-methode .bu-step.done {
  border-color:rgba(149,204,171,.45);
  color:var(--mint-2);
}
.tile-methode .bu-step.done .sn {
  background:rgba(149,204,171,.32);
  color:#fff;
}
.tile-methode .dcap2 {
  margin-top:8px;
  font-family:var(--mono);
  font-weight:700;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.66);
  transition:opacity .3s;
}
.tile-methode .bu.started .dcap2 {
  opacity:0;
}
@media(max-width:560px) {
  .tile-methode .bu-seam,.tile-methode .bu-layer {
    left:77%;
  }
  .tile-methode .bu-rail {
    left:calc(77% + 44px);
  }
  .tile-methode .bu-layer.l1 {
    width:12px;
  }
  .tile-methode .bu-layer.l2 {
    width:38px;
  }
  .tile-methode .bu-layer.l3 {
    width:64px;
  }
  .tile-methode .bu-layer.l4 {
    width:104px;
  }
  .tile-methode .bu-over {
    max-width:60%;
  }
  .tile-methode .bu-step {
    flex:0 0 auto;
    min-width:0;
  }
}
/* TILE devis — crème */
.tile-devis {
  background:var(--band);
  display:flex;
  flex-direction:column;
}
.tile-devis .bt-k {
  color:var(--green-2);
}
.tile-devis h3 {
  font-size:clamp(22px,2.5vw,33px);
}
.bd-list {
  list-style:none;
  margin:clamp(15px,2.2vh,22px) 0;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.bd-list li {
  position:relative;
  padding-left:30px;
  font-size:14.5px;
  line-height:1.5;
  color:var(--teal-ink);
}
.bd-list li::before {
  content:"\2713";
  position:absolute;
  left:0;
  top:1px;
  width:19px;
  height:19px;
  border-radius:50%;
  background:var(--green-2);
  color:#fff;
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.bd-list li:nth-child(2)::before {
  background:var(--teal);
}
.bd-list li:nth-child(3)::before {
  background:var(--sun-deep);
}
.bd-list b {
  color:var(--ink);
  font-weight:700;
}
.bd-quote {
  margin-top:auto;
  background:var(--teal-deep);
  color:#fff;
  border-radius:12px;
  padding:clamp(16px,1.8vw,22px);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.bd-ql {
  font-family:var(--mono);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mint);
}
.bd-qv {
  font-family:var(--display);
  font-size:clamp(30px,3.6vw,46px);
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.bd-cta {
  font-family:var(--display);
  font-size:clamp(19px,2.1vw,27px);
  color:#fff;
  text-decoration:none;
  border-bottom:3px solid var(--sun);
  align-self:flex-start;
  margin-top:8px;
  padding-bottom:1px;
  white-space:nowrap;
  transition:.18s;
}
.bd-cta:hover {
  color:var(--sun);
}
.bd-qs {
  font-family:var(--mono);
  font-weight:700;
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--mint-2);
  margin-top:8px;
  line-height:1.45;
}
/* TILE zone — vert doux */
.tile-zone {
  background:var(--vert-soft);
  display:flex;
  flex-direction:column;
}
.tile-zone .bt-k {
  color:var(--rose-deep);
}
.tile-zone h3 {
  font-size:clamp(22px,2.5vw,33px);
}
.tile-zone .radar {
  position:relative;
  height:clamp(230px,25vw,320px);
  margin:8px auto 0;
  max-width:430px;
  width:100%;
  z-index:2;
}
.zone-chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:15px;
}
.zchip {
  font-family:var(--mono);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--band);
  border:2px solid var(--ink);
  border-radius:30px;
  padding:7px 13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.zchip::before {
  content:"";
  width:9px;
  height:9px;
  border-radius:3px;
  flex:none;
}
.zchip.z1::before {
  background:var(--green-2);
}
.zchip.z2::before {
  background:var(--sun-deep);
}
.zchip.z3::before {
  background:var(--rose-deep);
}
@media(max-width:860px) {
  .bento {
    grid-template-columns:1fr;
  }
}


/* ====================================================================
   LISIBILITÉ UX/UI — contrastes, survols de menu, focus clavier
   ==================================================================== */

/* ===================== LISIBILITÉ UX/UI ===================== */
/* 1 · focus clavier visible et cohérent sur tous les éléments interactifs */
a:focus-visible,button:focus-visible {
  outline:3px solid var(--sun);
  outline-offset:3px;
  border-radius:6px;
}
.nphone:focus-visible,.ghbtn:focus-visible {
  outline-offset:2px;
}
/* 2 · liens du téléphone : zone de clic confortable + indice « cliquable » */
.phone .num,.contact2 .tel,.bd-cta {
  cursor:pointer;
}
.nphone,.ghbtn {
  min-height:40px;
  display:inline-flex;
  align-items:center;
}
/* 3 · étapes de la méthode : meilleur contraste */
.tile-methode .bt-mp {
  color:#e6f3ec;
}
/* 4 · barre de confiance : un cran plus lisible sur fond sombre */
.trust span {
  font-size:12px;
  color:#f4efe4;
}
/* 5 · puces d'offre du héros : contraste de bordure plus net */
.offer li {
  background:rgba(255,255,255,.72);
}
/* 6 · liste du devis : interligne et taille un peu plus généreux */
.bd-list li {
  font-size:15px;
  line-height:1.55;
}
/* 7 · indices d'interaction des joints : un peu plus présents */
.shint {
  color:rgba(20,32,31,.66);
}
.jbandlite .shint {
  color:rgba(255,255,255,.78);
}
/* 8 · état de survol clair sur les liens de navigation */
.nlinks a {
  position:relative;
  padding-bottom:2px;
}
.nlinks a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:2px;
  background:var(--teal);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s;
}
.nlinks a:hover::after,.nlinks a:focus-visible::after {
  transform:scaleX(1);
}