/* 1. base commune */
/* Inter, hébergé sur le site : aucun appel à un serveur tiers */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-variable-latin.f22be7b7.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/anton-latin.6d1a4c95.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --marine:#123055; --marine-f:#0C2340; --marine-clair:#2C4F7C;
  --or:#9A7220;
  --txt:#1B2430; --txt-2:#5B6674; --txt-3:#79838F;
  --fond:#FFFFFF; --fond-2:#F5F7FA; --bord:#E3E7ED;
  --r:12px; --hdr:74px; --pad:5vw; --tr:.25s ease;
  --ombre:0 1px 2px rgba(18,48,85,.05),0 8px 24px rgba(18,48,85,.06);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 14px);-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--fond);
  color:var(--txt);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:4.6rem}
@media(min-width:768px){body{padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
a{color:var(--marine);text-decoration:none;transition:color var(--tr)}
a:hover{color:var(--marine-f)}
h1,h2,h3{color:var(--marine-f);font-weight:700;line-height:1.16;letter-spacing:-.018em;overflow-wrap:break-word}
h1{font-size:clamp(1.95rem,6.4vw,3.5rem);letter-spacing:-.028em}
h2{font-size:clamp(1.5rem,4.4vw,2.3rem)}
h3{font-size:clamp(1.1rem,3vw,1.32rem)}
p{overflow-wrap:break-word}
section{padding:clamp(46px,7.5vw,88px) 0;position:relative}
.wrap{width:min(100% - 2*var(--pad),1140px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--marine);outline-offset:3px;border-radius:4px}
.alt{background:var(--fond-2);border-block:1px solid var(--bord)}

/* --- composants --- */
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.38rem .9rem;border-radius:999px;
  background:var(--fond-2);border:1px solid var(--bord);font-size:.83rem;font-weight:500;color:var(--txt-2)}
.dot{width:7px;height:7px;border-radius:50%;background:#1F9D55;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
  padding:.8rem 1.5rem;border-radius:8px;font:600 1rem/1.2 inherit;text-align:center;
  border:1px solid transparent;cursor:pointer;transition:background var(--tr),border-color var(--tr),color var(--tr)}
.btn-or{background:var(--marine);color:#fff}
.btn-or:hover{background:var(--marine-f);color:#fff}
.btn-ghost{background:#fff;color:var(--marine);border-color:var(--bord)}
.btn-ghost:hover{border-color:var(--marine);color:var(--marine-f)}
.btn-wa{background:#128C4A;color:#fff}
.btn-wa:hover{background:#0E7038;color:#fff}
.verre{background:#fff;border:1px solid var(--bord);border-radius:var(--r);
  padding:clamp(1.25rem,2.6vw,1.8rem);position:relative}
.alt .verre{box-shadow:var(--ombre)}
.intro{max-width:640px;margin:0 auto clamp(26px,4.5vw,42px);text-align:center}
.intro p{margin-top:.8rem;color:var(--txt-2)}
.kw{color:var(--or)}
.note-illus{margin-top:.9rem;font-size:.8rem;color:var(--txt-3);text-align:center}

/* --- header --- */
.hdr{position:sticky;top:0;z-index:100;height:var(--hdr);background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--bord)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:100%}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--marine-f);font-weight:700;font-size:1.08rem;flex:none}
.brand img{width:42px;height:42px;border-radius:50%;border:1px solid var(--bord);flex:none}
.nav{display:none}
.hdr-right{display:flex;align-items:center;gap:.6rem;flex:none}
.hdr-tel{display:none;font-weight:700;color:var(--marine-f);white-space:nowrap}
.hdr-tel:hover{color:var(--marine)}
.burger{display:grid;place-items:center;width:46px;height:46px;background:transparent;border:0;
  color:var(--marine-f);cursor:pointer;padding:0}
.burger span{display:block;width:23px;height:2px;border-radius:2px;background:currentColor}
.burger span+span{margin-top:6px}
@media(min-width:820px){.hdr-tel{display:inline-block}}
@media(min-width:1024px){
  .nav{display:flex;align-items:center;gap:1.6rem;margin-inline:auto}
  .nav a{position:relative;color:var(--txt-2);font-size:.92rem;font-weight:500;padding:.5rem 0;white-space:nowrap}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--marine);
    transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
  .nav a:hover,.nav a[aria-current="true"]{color:var(--marine-f)}
  .nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
  .burger{display:none}
}
.navp{position:fixed;inset:0;z-index:110;background:#fff;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;padding:1rem var(--pad) calc(2rem + env(safe-area-inset-bottom));
  opacity:0;transform:translateY(-10px);transition:opacity .25s ease,transform .25s ease}
.navp[hidden]{display:none}
.nav-open .navp{opacity:1;transform:none}
.navp-top{display:flex;align-items:center;justify-content:space-between;min-height:calc(var(--hdr) - 12px);
  border-bottom:1px solid var(--bord)}
.navp-top b{color:var(--marine-f);font-size:1.05rem}
.navp-close{display:grid;place-items:center;width:46px;height:46px;background:transparent;border:0;
  color:var(--marine-f);cursor:pointer}
.navp-close svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.navp ul{list-style:none;margin-top:.6rem}
.navp ul li+li{border-top:1px solid var(--bord)}
.navp ul a{display:block;padding:.85rem 0;min-height:48px;color:var(--marine-f);font-size:1.1rem;font-weight:500}
.navp-cta{margin-top:auto;padding-top:1.5rem;display:grid;gap:.55rem}
@media(min-width:1024px){.navp{display:none!important}}

/* --- hero --- */
.hero{padding-top:clamp(34px,5vw,60px)}
.hero .wrap{display:grid;gap:clamp(30px,4.5vw,52px);align-items:center}
.hero-txt h1{margin:.9rem 0 0}
.hero-txt>p{margin-top:1rem;font-size:clamp(1rem,2.2vw,1.12rem);color:var(--txt-2);max-width:56ch}
.hero-cta{display:flex;flex-direction:column;gap:.7rem;margin-top:1.6rem}
.hero-cta .btn{width:100%}
.hero-reass{margin-top:1rem;font-size:.86rem;color:var(--txt-3)}
.hero-vis img{border-radius:var(--r);border:1px solid var(--bord)}
@media(min-width:560px){.hero-cta{flex-direction:row;flex-wrap:wrap}.hero-cta .btn{width:auto;flex:1 1 205px}}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.05fr .95fr}}

/* --- univers --- */
.univers{display:grid;gap:1.1rem}
@media(min-width:820px){.univers{grid-template-columns:1fr 1fr}}
.u-ico{width:40px;height:40px;color:var(--marine);margin-bottom:.9rem}
.u-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.univers p{color:var(--txt-2)}
.univers ul{list-style:none;margin-top:1rem;display:grid;gap:.55rem}
.univers li{position:relative;padding-left:1.5rem;color:var(--txt-2)}
.univers li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:7px;
  background:var(--or);border-radius:50%}
.u-lien{display:inline-block;margin-top:1.2rem;font-weight:600;color:var(--marine)}
.u-lien:hover{color:var(--marine-f)}

/* --- bento --- */
.bento{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:700px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.bento{grid-template-columns:repeat(4,1fr)}}
.bento>*{display:flex;flex-direction:column;gap:.65rem;min-height:172px}
.b-ico{width:38px;height:38px;color:var(--marine);flex:none}
.b-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bento p{color:var(--txt-2);font-size:.94rem}

/* --- avant/apres --- */
.ba{max-width:920px;margin:0 auto}
.ba-hint{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.9rem;
  font-size:.9rem;color:var(--txt-3)}
.ba-hint svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ba-cmp{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--bord);background:var(--fond-2);--ba:50%}
.ba-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.ba-cmp.on .ba-apres{clip-path:inset(0 0 0 var(--ba));will-change:clip-path}
.ba-cmp.on .ba-handle,.ba-cmp.on .ba-range{opacity:1;visibility:visible}
.ba-range,.ba-handle{opacity:0;visibility:hidden}
.ba-range{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);width:100%;
  height:min(48%,120px);margin:0;z-index:4;background:transparent;-webkit-appearance:none;appearance:none;
  cursor:ew-resize;touch-action:pan-y}
.ba-range::-webkit-slider-runnable-track{background:transparent;border:0}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:46px;height:46px;border-radius:50%;background:transparent;cursor:ew-resize}
.ba-range::-moz-range-track{background:transparent;border:0}
.ba-range::-moz-range-thumb{width:46px;height:46px;border:0;border-radius:50%;background:transparent;cursor:ew-resize}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--ba);transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;pointer-events:none}
.ba-handle i{flex:1;width:2px;background:#fff;box-shadow:0 0 6px rgba(12,35,64,.45)}
.ba-knob{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--bord);box-shadow:0 3px 12px rgba(12,35,64,.28);transition:transform .2s ease}
.ba-knob svg{width:24px;height:24px;fill:none;stroke:var(--marine);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ba-range:hover+.ba-handle .ba-knob,.ba-range:active+.ba-handle .ba-knob{transform:scale(1.1)}
.ba-range:focus-visible+.ba-handle .ba-knob{outline:2px solid var(--marine);outline-offset:4px}
.tag{position:absolute;top:.8rem;z-index:5;pointer-events:none;padding:.3rem .7rem;border-radius:6px;
  background:rgba(255,255,255,.94);border:1px solid var(--bord);color:var(--marine-f);font-size:.78rem;font-weight:600}
.tag-a{left:.8rem} .tag-b{right:.8rem}
.ba figcaption{margin-top:.95rem;color:var(--txt-2);font-size:.94rem;text-align:center}

/* --- grilles simples --- */
.g3{display:grid;gap:1rem}
@media(min-width:820px){.g3{grid-template-columns:repeat(3,1fr)}}
.g3 p{margin-top:.5rem;color:var(--txt-2);font-size:.95rem}

/* --- zone --- */
.zone-list{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.5rem}
.zone-list li{padding:.45rem .95rem;background:#fff;border:1px solid var(--bord);border-radius:6px;
  font-size:.9rem;color:var(--txt-2)}
.zone-list li.pivot{background:var(--marine);border-color:var(--marine);color:#fff;font-weight:600}

/* --- avis --- */
.avis{max-width:700px;margin-inline:auto;text-align:center}
.avis .stars{color:var(--or);font-size:1.15rem;letter-spacing:.18em}
.avis p{margin-top:.8rem;color:var(--txt-2)}
.avis .btn{margin-top:1.4rem}

/* --- contact --- */
.contact-grid{display:grid;gap:1.3rem}
@media(min-width:900px){.contact-grid{grid-template-columns:1.15fr .85fr;align-items:start}}
.champ{margin-bottom:.95rem}
.champ label{display:block;margin-bottom:.35rem;font-weight:500;font-size:.92rem;color:var(--txt-2)}
.champ input,.champ textarea{width:100%;padding:.8rem .95rem;background:#fff;border:1px solid var(--bord);
  border-radius:8px;color:var(--txt);font:400 16px/1.5 inherit;transition:border-color var(--tr)}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--marine)}
.champ textarea{resize:vertical;min-height:108px}
.form-note{margin-top:.75rem;font-size:.83rem;color:var(--txt-3)}
.cartes{display:grid;gap:.7rem}
.carte{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;color:var(--txt);transition:border-color var(--tr)}
.carte:hover{border-color:var(--marine);color:var(--txt)}
.carte svg{width:24px;height:24px;color:var(--marine);flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.carte strong{display:block;color:var(--marine-f)}
.carte span{font-size:.88rem;color:var(--txt-2)}
.carte.wa svg{color:#128C4A;fill:currentColor;stroke:none}

/* --- bandeau final --- */
.final{background:var(--marine-f);text-align:center}
.final h2{color:#fff}
.final .tel-xl{display:inline-block;margin:.9rem 0;font-size:clamp(1.8rem,6.5vw,3rem);font-weight:700;
  color:#fff;letter-spacing:-.02em}
.final .tel-xl:hover{color:#CBD7E6}
.final-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:.3rem}
.final .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.final .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.final-preuves{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;justify-content:center;margin-top:1.5rem;
  font-size:.87rem;color:rgba(255,255,255,.72)}

/* --- footer --- */
.ftr{background:var(--fond-2);padding:clamp(38px,5.5vw,60px) 0 1.8rem;border-top:1px solid var(--bord)}
.ftr-grid{display:grid;gap:1.7rem}
@media(min-width:760px){.ftr-grid{grid-template-columns:1.1fr 1fr 1fr}}
.ftr h4{color:var(--marine-f);font-size:.82rem;margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.07em}
.ftr p,.ftr address{font-style:normal;color:var(--txt-2);font-size:.93rem}
.ftr a{color:var(--txt-2)} .ftr a:hover{color:var(--marine)}
.ftr-bas{margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--bord);
  font-size:.83rem;color:var(--txt-3);text-align:center}

/* --- barre mobile + wa --- */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:#fff;
  border-top:1px solid var(--bord);box-shadow:0 -2px 12px rgba(18,48,85,.07);
  padding-bottom:env(safe-area-inset-bottom)}
.barre a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  min-height:56px;padding:.45rem .2rem;color:var(--txt-2);font-size:.72rem;font-weight:600;text-align:center}
.barre a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.barre a.wa svg{fill:currentColor;stroke:none;color:#128C4A}
.barre a.devis{color:var(--marine)}
.wa-float{position:fixed;right:1rem;bottom:5.2rem;z-index:60;width:54px;height:54px;display:grid;
  place-items:center;border-radius:50%;background:#128C4A;box-shadow:0 4px 14px rgba(18,140,74,.35);
  transition:transform .2s,opacity .28s ease,visibility .28s}
.wa-float:hover{transform:scale(1.06)}
.wa-float.cache{opacity:0;visibility:hidden;pointer-events:none}
.wa-float svg{width:28px;height:28px;fill:#fff}
@media(min-width:768px){.barre{display:none}.wa-float{bottom:calc(1.25rem + env(safe-area-inset-bottom))}}

/* --- bande de specialites sous le hero --- */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:1.6rem;padding-top:1.5rem;
  border-top:1px solid var(--bord)}
@media(min-width:700px){.specs{grid-template-columns:repeat(4,1fr);gap:.9rem}}
.spec{display:flex;align-items:center;gap:.55rem;font-size:.87rem;font-weight:600;color:var(--marine-f)}
.spec svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--or);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* --- numerotation des univers --- */
.u-num{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--or)}
.u-num::after{content:"";flex:1;height:1px;background:var(--bord)}
.u-pour{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--bord);
  font-size:.85rem;color:var(--txt-3)}
.u-pour b{color:var(--txt-2);font-weight:600}

/* --- tuiles de service avec visuel + accordeon --- */
.bento>*{padding:0;overflow:hidden}
.b-img{position:relative;aspect-ratio:4/3;background:var(--fond-2);border-bottom:1px solid var(--bord)}
.b-img img{width:100%;height:100%;object-fit:cover}
.b-corps{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.b-corps h3{display:flex;align-items:center;gap:.6rem}
.b-corps h3 svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--or);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.b-det{margin-top:auto;border-top:1px solid var(--bord);padding-top:.75rem}
.b-det summary{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  list-style:none;cursor:pointer;min-height:44px;font-size:.88rem;font-weight:600;color:var(--marine);
  transition:color var(--tr)}
.b-det summary::-webkit-details-marker{display:none}
.b-det summary:hover{color:var(--marine-f)}
.b-det summary svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease}
.b-det[open] summary svg{transform:rotate(180deg)}
.b-det ul{list-style:none;margin-top:.7rem;display:grid;gap:.42rem}
.b-det li{position:relative;padding-left:1.15rem;font-size:.88rem;color:var(--txt-2);line-height:1.5}
.b-det li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  background:var(--or);border-radius:50%}

/* --- supports personnalisables --- */
.supports{margin-top:clamp(30px,4.5vw,46px);padding-top:clamp(26px,4vw,38px);border-top:1px solid var(--bord)}
.supports-in{display:grid;gap:1.4rem;align-items:center}
@media(min-width:820px){.supports-in{grid-template-columns:1.15fr .85fr}}
.supports img{border-radius:var(--r);border:1px solid var(--bord)}
.supports h3{margin-bottom:.6rem}
.supports p{color:var(--txt-2)}
.sup-list{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.sup-list li{padding:.34rem .78rem;background:#fff;border:1px solid var(--bord);border-radius:6px;
  font-size:.85rem;color:var(--txt-2)}

/* --- pictos pourquoi --- */
.g3 .p-ico{width:36px;height:36px;color:var(--marine);margin-bottom:.85rem}
.g3 .p-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* --- zone par departement --- */
.zone-cols{display:grid;gap:1rem;margin-top:1.6rem;text-align:left}
@media(min-width:700px){.zone-cols{grid-template-columns:1fr 1fr}}
.zone-col{background:#fff;border:1px solid var(--bord);border-radius:var(--r);padding:1.15rem 1.25rem}
.zone-col h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--or);margin-bottom:.8rem}
.zone-col ul{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}
.zone-col li{padding:.34rem .78rem;background:var(--fond-2);border:1px solid var(--bord);
  border-radius:6px;font-size:.87rem;color:var(--txt-2)}
.zone-col li.pivot{background:var(--marine);border-color:var(--marine);color:#fff;font-weight:600}
.zone-note{margin-top:1.2rem;font-size:.85rem;color:var(--txt-3)}

/* --- avis : lien facebook --- */
.avis-cta{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.4rem}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ===== AJOUTS SITE MULTI-PAGES ===== */

/* --- fil d'ariane --- */
.fil{padding:1rem 0 0;font-size:.85rem;color:var(--txt-3)}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.fil li+li::before{content:"›";margin-right:.4rem;color:var(--bord)}
.fil a{color:var(--txt-2)}

/* --- en-tete de page interieure --- */
.tete{padding:clamp(28px,4.5vw,52px) 0 clamp(26px,4vw,44px);border-bottom:1px solid var(--bord)}
.tete h1{margin-top:.7rem}
.tete p{margin-top:.9rem;color:var(--txt-2);max-width:62ch;font-size:clamp(1rem,2.2vw,1.1rem)}
.tete-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}

/* --- etapes numerotees --- */
.etapes{list-style:none;counter-reset:e;display:grid;gap:1rem}
@media(min-width:700px){.etapes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.etapes.q4{grid-template-columns:repeat(4,1fr)}
  .etapes.q3{grid-template-columns:repeat(3,1fr)}}
.etapes li{counter-increment:e;background:#fff;border:1px solid var(--bord);border-radius:var(--r);
  padding:1.25rem 1.35rem 1.4rem}
.alt .etapes li{box-shadow:var(--ombre)}
.etapes li::before{content:"0" counter(e);display:block;font-size:.78rem;font-weight:700;
  letter-spacing:.14em;color:var(--or);margin-bottom:.6rem}
.etapes h3{font-size:1.06rem;margin-bottom:.4rem}
.etapes p{color:var(--txt-2);font-size:.94rem}

/* --- grille de prestations --- */
.presta{display:grid;gap:.8rem}
@media(min-width:620px){.presta{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.presta{grid-template-columns:repeat(3,1fr)}}
.presta li{list-style:none;background:#fff;border:1px solid var(--bord);border-radius:var(--r);
  padding:1.05rem 1.2rem}
.presta h3{font-size:1rem;display:flex;align-items:center;gap:.55rem;margin-bottom:.35rem}
.presta h3 svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--or);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.presta p{color:var(--txt-2);font-size:.9rem}

/* --- modes d'intervention --- */
.modes{display:grid;gap:1rem;margin-top:clamp(26px,4vw,40px)}
@media(min-width:820px){.modes{grid-template-columns:repeat(3,1fr)}}
.mode{background:#fff;border:1px solid var(--bord);border-radius:var(--r);padding:1.3rem 1.4rem}
.mode .m-ico{width:34px;height:34px;color:var(--marine);margin-bottom:.8rem}
.mode .m-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.mode p{color:var(--txt-2);font-size:.93rem;margin-top:.35rem}

/* --- cartes techniques (DTF / sublimation / flex) --- */
.tech{display:grid;gap:1rem}
@media(min-width:900px){.tech{grid-template-columns:repeat(3,1fr)}}
.tech article{background:#fff;border:1px solid var(--bord);border-radius:var(--r);
  padding:1.4rem 1.45rem 1.5rem;display:flex;flex-direction:column}
.alt .tech article{box-shadow:var(--ombre)}
.tech .t-tag{align-self:flex-start;padding:.3rem .75rem;border-radius:6px;background:var(--fond-2);
  border:1px solid var(--bord);font-size:.76rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--or)}
.tech h3{margin:.9rem 0 .2rem}
.tech .t-sous{color:var(--txt-3);font-size:.88rem}
.tech dl{margin-top:1.1rem;display:grid;gap:.85rem}
.tech dt{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.tech dd{color:var(--txt-2);font-size:.93rem;margin-top:.2rem}

/* --- tableau horaires --- */
.horaires{width:100%;border-collapse:collapse;margin-top:.4rem}
.horaires th,.horaires td{padding:.55rem 0;text-align:left;font-size:.93rem;
  border-bottom:1px solid var(--bord);vertical-align:top}
.horaires th{font-weight:500;color:var(--txt-2);white-space:nowrap;padding-right:1rem}
.horaires td{color:var(--marine-f);font-weight:600}
.horaires tr:last-child th,.horaires tr:last-child td{border-bottom:0}
.horaires .ferme{color:var(--txt-3);font-weight:500}

/* --- listes d'atouts (paiements, equipements) --- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem}
.chips li{padding:.34rem .78rem;background:var(--fond-2);border:1px solid var(--bord);
  border-radius:6px;font-size:.85rem;color:var(--txt-2)}

/* --- formulaire : radios en boutons + rgpd --- */
.radios{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.15rem}
.radios input{position:absolute;opacity:0;width:1px;height:1px}
.radios label{display:inline-flex;align-items:center;min-height:46px;padding:.6rem 1.15rem;
  border:1px solid var(--bord);border-radius:8px;background:#fff;color:var(--txt);
  font-size:.94rem;font-weight:500;cursor:pointer;margin:0;
  transition:background var(--tr),border-color var(--tr),color var(--tr)}
.radios input:checked+label{background:var(--marine);border-color:var(--marine);color:#fff}
.radios input:focus-visible+label{outline:2px solid var(--marine);outline-offset:3px}
fieldset{border:0;padding:0;margin:0 0 .95rem}
legend{padding:0;margin-bottom:.35rem;font-weight:500;font-size:.92rem;color:var(--txt-2)}
.rgpd{display:flex;align-items:flex-start;gap:.65rem;margin:.2rem 0 1.15rem}
.rgpd input{flex:none;width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:var(--marine)}
.rgpd label{margin:0;font-size:.87rem;font-weight:400;color:var(--txt-2);line-height:1.55}
.champ .aide{margin-top:.35rem;font-size:.82rem;color:var(--txt-3)}
.form-err{display:none;margin-bottom:1rem;padding:.8rem 1rem;border-radius:8px;
  background:#FDF2F2;border:1px solid #F0C9C9;color:#8A2A2A;font-size:.9rem}
.form-err.on{display:block}

/* --- pages de texte legal --- */
.prose{max-width:78ch}
.prose h2{font-size:clamp(1.25rem,3.2vw,1.6rem);margin:2.2rem 0 .7rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.05rem;margin:1.4rem 0 .4rem}
.prose p,.prose li{color:var(--txt-2)}
.prose p{margin-bottom:.85rem}
.prose ul{margin:0 0 .95rem 1.1rem}
.prose li{margin-bottom:.35rem}
.prose .maj{display:inline-block;margin-top:1.8rem;font-size:.85rem;color:var(--txt-3)}

/* --- page merci --- */
.merci{text-align:center;max-width:620px;margin-inline:auto;padding:clamp(48px,9vw,96px) 0}
.merci .m-ok{width:62px;height:62px;margin:0 auto 1.4rem;border-radius:50%;display:grid;place-items:center;
  background:#EAF6EF;border:1px solid #BFE3CD}
.merci .m-ok svg{width:30px;height:30px;fill:none;stroke:#1F9D55;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.merci p{margin-top:.9rem;color:var(--txt-2)}
.merci .btn{margin-top:1.7rem}

/* --- page 404 --- */
.err404{text-align:center;max-width:560px;margin-inline:auto;padding:clamp(48px,9vw,96px) 0}
.err404 .code{font-size:.8rem;font-weight:700;letter-spacing:.18em;color:var(--or)}
.err404 p{margin-top:.9rem;color:var(--txt-2)}
.err404 .btn{margin-top:1.6rem}

/* --- header : evite le debordement entre 1024 et 1200 px (nav complete + tel + bouton) --- */
@media(min-width:1024px){
  .nav{gap:clamp(.85rem,1.7vw,1.6rem)}
  .hdr .wrap{gap:.7rem}
}
@media(min-width:1024px) and (max-width:1199px){
  .hdr-tel{display:none}
}

/* --- bouton devis du header : inutile sur petit ecran (la barre du bas porte deja « Devis ») --- */
.hdr-devis{display:none;min-height:42px;padding:.55rem 1.05rem;font-size:.92rem}
@media(min-width:560px){.hdr-devis{display:inline-flex}}
/* build 20260917-1553 */


/* 2. profil de métier : atelier-double-temperature */
/* =============================================================================
   PROFIL « atelier double température » — Vince and Co
   -----------------------------------------------------------------------------
   Idée : le site change de température en descendant. L'informatique est froide
   et solide (marine), la personnalisation est chaude et colorée (corail). C'est
   ce contraste qui raconte « deux métiers, un seul interlocuteur ».

   Fondation conforme à la veille 2026 : neutres forts (crème + charbon) et UNE
   couleur d'accent affirmée par univers — pas d'arc-en-ciel.

   ⚠️ Tous les ratios ci-dessous sont CALCULÉS, pas estimés :
      charbon sur corail vif ... 4.91  AA        creme sur terracotta ..... 5.01  AA
      charbon sur pêche ....... 14.22  AA        creme sur marine ........ 10.26  AA
      charbon sur bleu doux ... 13.96  AA        creme sur marine nuit ... 14.48  AA
      or sur marine nuit ....... 5.35  AA        charbon sur or ........... 5.65  AA
      creme sur corail vif ..... 3.11  → INTERDIT en texte courant, titres XXL seulement
   Cette feuille se charge APRÈS style.css et en redéfinit les tokens.
   ============================================================================= */

:root{
  /* --- neutres de fondation --- */
  --creme:#F7F9FC; --creme-2:#EEF2F8; --charbon:#0B1226; --charbon-2:#1B2540;

  /* --- univers froid : informatique --- */
  --froid:#003C84; --froid-nuit:#061A3A; --froid-doux:#E6EEF8;

  /* --- univers chaud : personnalisation --- */
  --chaud:#8A6100; --chaud-vif:#E4B43C; --chaud-doux:#FBF3DC;

  /* --- accent rare --- */
  --or:#C8921A;

  /* --- on réécrit les tokens de la base --- */
  --marine:var(--froid); --marine-f:var(--froid-nuit); --marine-clair:#2A62B0;
  --txt:var(--charbon); --txt-2:#475069; --txt-3:#5F6880;
  --fond:var(--creme); --fond-2:var(--creme-2); --bord:#DCE3EE;
  --r:14px; --hdr:76px;
  --ombre:0 1px 2px rgba(11,18,38,.04),0 10px 30px rgba(11,18,38,.07);

  /* --- typographie d'affichage --- */
  --display:'Anton',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
}

body{background:var(--creme)}

/* -----------------------------------------------------------------------------
   1. TYPOGRAPHIE — des titres qui occupent la largeur
   -------------------------------------------------------------------------- */
h1,h2,.display{
  font-family:var(--display);
  font-weight:400;              /* Anton n'a qu'une graisse, déjà très grasse */
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.002em;
  color:var(--charbon);
}
h1{font-size:clamp(2.9rem,10.5vw,6.6rem)}
h2{font-size:clamp(2.1rem,6.4vw,4.1rem)}
h3{font-family:inherit;font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--charbon)}

/* le mot mis en valeur passe en couleur d'univers, pas en or pâle */
.kw{color:var(--froid)}
.chaud-zone .kw,.kw-chaud{color:var(--chaud)}

/* petit sur-titre qui accompagne les grands titres */
.surtitre{
  display:inline-block;margin-bottom:1rem;font-family:Inter,sans-serif;
  font-size:.79rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--chaud)
}
.froid-zone .surtitre{color:var(--froid)}

/* -----------------------------------------------------------------------------
   2. FONDS PLEINS — le site change de couleur en descendant
   -------------------------------------------------------------------------- */
.alt{background:var(--creme-2);border-block:1px solid var(--bord)}
.bloc-froid{background:var(--froid-doux);border-block:1px solid #D2DEEC}
.bloc-chaud{background:var(--chaud-doux);border-block:1px solid #EBDDB0}
.bloc-nuit{background:var(--froid-nuit);color:#D9E2EE}
.bloc-nuit h1,.bloc-nuit h2,.bloc-nuit h3{color:var(--creme)}
.bloc-nuit p{color:#BCC8D8}
.bloc-nuit .kw{color:var(--or)}
.bloc-corail{background:var(--chaud-vif)}
/* sur le corail on n'écrit qu'en charbon : le crème n'y passe pas le contraste AA */
.bloc-corail h2,.bloc-corail h3,.bloc-corail p,.bloc-corail li{color:var(--charbon)}
.bloc-corail .kw{color:var(--froid-nuit)}

/* -----------------------------------------------------------------------------
   3. BOUTONS — pleins, francs, sans dégradé
   -------------------------------------------------------------------------- */
.btn{border-radius:10px;font-weight:700;letter-spacing:.005em;min-height:52px;
  transition:transform .15s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn:active{transform:translateY(1px)}
.btn-or{background:var(--froid);color:var(--creme);border-color:var(--froid)}
.btn-or:hover{background:var(--froid-nuit);border-color:var(--froid-nuit);color:var(--creme)}
.btn-chaud{background:var(--chaud);color:var(--creme);border-color:var(--chaud)}
.btn-chaud:hover{background:#6E4D00;border-color:#6E4D00;color:var(--creme)}
.btn-ghost{background:transparent;color:var(--charbon);border-color:var(--charbon)}
.btn-ghost:hover{background:var(--charbon);color:var(--creme);border-color:var(--charbon)}
.bloc-nuit .btn-ghost{color:var(--creme);border-color:rgba(247,249,252,.5)}
.bloc-nuit .btn-ghost:hover{background:var(--creme);color:var(--charbon);border-color:var(--creme)}
.bloc-corail .btn-ghost{color:var(--charbon);border-color:var(--charbon)}

/* -----------------------------------------------------------------------------
   4. HERO éditorial asymétrique — les deux métiers visibles en une seconde
   -------------------------------------------------------------------------- */
.hero{padding:clamp(30px,5vw,58px) 0 0;background:var(--creme);position:relative;overflow:hidden}
.hero .wrap{display:grid;gap:clamp(26px,4vw,44px);align-items:start}
.hero h1{margin:0}
.hero h1 .l2{display:block;color:var(--chaud)}
.hero-txt>p{margin-top:1.3rem;font-size:clamp(1.02rem,2.2vw,1.18rem);color:var(--txt-2);max-width:52ch}
.hero-cta{display:flex;flex-direction:column;gap:.7rem;margin-top:1.8rem}
.hero-cta .btn{width:100%}
@media(min-width:560px){.hero-cta{flex-direction:row;flex-wrap:wrap}.hero-cta .btn{width:auto;flex:1 1 210px}}
@media(min-width:960px){.hero .wrap{grid-template-columns:1.08fr .92fr;align-items:center}}

/* le visuel du hero est coupé par un aplat de couleur : ça casse le rectangle */
.hero-vis{position:relative}
.hero-vis img{border-radius:var(--r);border:0;position:relative;z-index:1}
.hero-vis::after{content:"";position:absolute;z-index:0;inset:auto -18px -18px auto;
  width:62%;height:62%;background:var(--chaud-vif);border-radius:var(--r)}
@media(min-width:960px){.hero-vis::after{inset:auto -26px -26px auto}}

/* la bande de spécialités devient une frise contrastée */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:2.2rem;
  border-top:2px solid var(--charbon);border-bottom:2px solid var(--charbon);padding:0}
@media(min-width:700px){.specs{grid-template-columns:repeat(4,1fr)}}
.spec{display:flex;align-items:center;gap:.55rem;padding:.95rem .5rem;font-size:.84rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--charbon)}
.spec+.spec{border-left:1px solid var(--bord)}
@media(max-width:699px){.spec:nth-child(3){border-left:0;border-top:1px solid var(--bord)}
  .spec:nth-child(4){border-top:1px solid var(--bord)}}
.spec svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--chaud);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.froid-spec svg{stroke:var(--froid)}

/* -----------------------------------------------------------------------------
   5. LES DEUX MÉTIERS — bascule de température plein écran
   -------------------------------------------------------------------------- */
.temperatures{display:grid}
@media(min-width:900px){.temperatures{grid-template-columns:1fr 1fr}}
.temperature{padding:clamp(40px,6vw,76px) var(--pad);display:flex;flex-direction:column}
.temperature .dedans{width:min(100%,520px);margin-inline:auto;display:flex;flex-direction:column;flex:1}
.froid-zone{background:var(--froid-nuit)}
.froid-zone h2{color:var(--creme)} .froid-zone p{color:#BCC8D8}
.froid-zone .surtitre{color:var(--or)}
.chaud-zone{background:var(--chaud-vif)}
.chaud-zone h2,.chaud-zone p{color:var(--charbon)}
.chaud-zone .surtitre{color:var(--froid-nuit)}
.temperature ul{list-style:none;margin:1.4rem 0 0;display:grid;gap:.6rem}
.temperature li{position:relative;padding-left:1.6rem;font-size:.96rem}
.froid-zone li{color:#BCC8D8} .chaud-zone li{color:var(--charbon-2)}
.temperature li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px}
.froid-zone li::before{background:var(--or)} .chaud-zone li::before{background:var(--froid-nuit)}
.temperature .btn{margin-top:1.9rem;align-self:flex-start}
.temperature .numero{font-family:var(--display);font-size:clamp(3.4rem,7vw,5rem);line-height:.8;
  margin-bottom:.5rem;display:block}
.froid-zone .numero{color:rgba(201,138,18,.38)} .chaud-zone .numero{color:rgba(6,26,58,.22)}

/* -----------------------------------------------------------------------------
   6. CHIFFRES CLÉS — la preuve en très grand
   -------------------------------------------------------------------------- */
.chiffres{display:grid;gap:1px;background:var(--bord);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden}
@media(min-width:620px){.chiffres{grid-template-columns:repeat(3,1fr)}}
.chiffre{background:var(--creme);padding:clamp(1.5rem,3vw,2.2rem) 1.3rem;text-align:center}
.chiffre b{display:block;font-family:var(--display);font-size:clamp(2.6rem,6vw,3.8rem);
  line-height:.9;color:var(--chaud)}
.chiffre:nth-child(2) b{color:var(--froid)}
.chiffre:nth-child(3) b{color:var(--charbon)}
.chiffre>span{display:block;margin-top:.5rem;font-size:.9rem;color:var(--txt-2)}
.chiffre b span{font:inherit;color:inherit;display:inline;margin:0}

/* -----------------------------------------------------------------------------
   7. Ajustements des composants hérités
   -------------------------------------------------------------------------- */
.verre{background:var(--creme);border-color:var(--bord);border-radius:var(--r)}
.bloc-froid .verre{background:#fff;border-color:#D2DEEC}
.bloc-chaud .verre{background:#fff;border-color:#EBDDB0}
.pill{background:var(--chaud-doux);border-color:#EBDDB0;color:var(--chaud);font-weight:600}
.dot{background:var(--chaud-vif)}
.hdr{background:rgba(247,249,252,.94);border-bottom:2px solid var(--charbon)}
.brand{font-family:var(--display);font-size:1.3rem;letter-spacing:.01em;text-transform:uppercase}
.nav a{font-weight:600}
.nav a::after{background:var(--chaud)}
.final{background:var(--froid-nuit)}
.final .tel-xl{font-family:var(--display);letter-spacing:.01em}
.ftr{background:var(--charbon);border-top:0;color:#B9C0CE}
.ftr h4{color:var(--creme)} .ftr p,.ftr address{color:#B9C0CE}
.ftr a{color:#D7DDE7} .ftr a:hover{color:var(--or)}
.ftr-bas{border-top-color:rgba(255,255,255,.12);color:#8E97A8}
.ftr .brand{color:var(--creme)}
.barre{background:var(--creme);border-top:2px solid var(--charbon)}
.barre a.devis{color:var(--chaud)}
.u-num{color:var(--chaud)}
.b-corps h3 svg,.presta h3 svg,.supports h3 svg{stroke:var(--chaud)}
.tech .t-tag{background:var(--chaud-doux);border-color:#EBDDB0;color:var(--chaud)}
.etapes li::before{color:var(--chaud);font-family:var(--display);font-size:1.5rem}
.zone-col h3{color:var(--chaud)}
.zone-col li.pivot,.zone-list li.pivot{background:var(--froid);border-color:var(--froid)}
.horaires td{color:var(--charbon)}
.radios input:checked+label{background:var(--froid);border-color:var(--froid)}
.b-det summary{color:var(--chaud)}
.u-lien{color:var(--chaud)}

/* --- respirations : les titres XXL ont besoin d'air au-dessus --- */
.hero .pill,.tete .pill{margin-bottom:1.15rem}
.hero h1,.tete h1{margin-top:0}
.tete{padding-top:clamp(22px,3.5vw,38px);border-bottom:2px solid var(--charbon)}
.tete p{margin-top:1.2rem}
/* sur les pages chaudes, le mot-clé suit la température de la page */
.page-chaude .kw{color:var(--chaud)}
.fil{padding-top:1.1rem}
.fil a{color:var(--txt-2)}

/* =============================================================================
   CORRECTIFS D'ACCESSIBILITÉ — issus de la mesure des contrastes RÉELLEMENT
   rendus dans le navigateur (493 éléments testés), pas d'un calcul théorique.
   ============================================================================= */

/* 1. le bouton fantôme était en charbon sur le bloc marine nuit : ratio 1.06, invisible.
      La zone froide porte la classe .froid-zone, pas .bloc-nuit — d'où l'oubli. */
.froid-zone .btn-ghost{color:var(--creme);border-color:rgba(247,249,252,.55)}
.froid-zone .btn-ghost:hover{background:var(--creme);color:var(--charbon);border-color:var(--creme)}
.chaud-zone .btn-ghost{color:var(--charbon);border-color:var(--charbon)}
.chaud-zone .btn-ghost:hover{background:var(--charbon);color:var(--creme)}

/* 2. sur le corail, seul le charbon plein passe AA (4.91) ; le charbon adouci était à 3.83 */
.chaud-zone li,.bloc-corail li{color:var(--charbon)}

/* 3. le gris secondaire était sous 4.5 sur tous les fonds clairs (crème, pêche, bleu doux) */
:root{--txt-3:#5F6678}

/* 4. le vert WhatsApp hérité était à 4.31 avec du texte blanc : à peine sous AA.
      #118345 garde la couleur reconnaissable de WhatsApp et passe à 4.82. */
.btn-wa{background:#118345;border-color:#118345}
.btn-wa:hover{background:#0C6535;border-color:#0C6535}

/* 5. le sur-titre de la page 404 était en or sur crème (2.71) : il passe en terracotta */
.err404 .code{color:var(--chaud)}


/* 2 bis. couche effets visuels */
/* =============================================================================
   COUCHE EFFETS — catalogue Espritz (references/effets-visuels.md)
   -----------------------------------------------------------------------------
   Règles respectées, sans exception :
   • on n'anime que transform et opacity (GPU) ;
   • 150-250 ms pour les micro-interactions, 300-600 ms pour les entrées ;
   • jamais linear : cubic-bezier(.4,0,.2,1) par défaut ;
   • le contenu reste lisible sans JS (voir .js-fx plus bas) ;
   • aucun effet ne touche au CLS ;
   • le hover n'existe pas sur mobile : tout effet de survol est neutre au tactile ;
   • prefers-reduced-motion neutralise TOUT mouvement (bloc en fin de fichier).
   ============================================================================= */

:root{--fx:cubic-bezier(.4,0,.2,1);--fx-court:.2s;--fx-long:.5s}

/* -----------------------------------------------------------------------------
   §2 REVEAL AU SCROLL — garde-fou en trois niveaux
   L'opacité de départ n'est posée QUE si le JS a marqué <html class="js-fx">.
   Sans JS, sans IntersectionObserver, ou si l'observer ne part pas (filet de 3 s),
   le contenu reste visible. Le contenu invisible est le pire bug possible.
   -------------------------------------------------------------------------- */
.js-fx .fx-reveal{opacity:0;transform:translateY(18px);
  transition:opacity var(--fx-long) var(--fx),transform var(--fx-long) var(--fx)}
.js-fx .fx-reveal.is-visible{opacity:1;transform:none}
/* cascade légère pour les enfants d'une grille */
.js-fx .fx-cascade>*{opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--fx),transform .45s var(--fx)}
.js-fx .fx-cascade.is-visible>*{opacity:1;transform:none}
.js-fx .fx-cascade.is-visible>*:nth-child(2){transition-delay:.07s}
.js-fx .fx-cascade.is-visible>*:nth-child(3){transition-delay:.14s}
.js-fx .fx-cascade.is-visible>*:nth-child(4){transition-delay:.21s}
.js-fx .fx-cascade.is-visible>*:nth-child(5){transition-delay:.28s}
.js-fx .fx-cascade.is-visible>*:nth-child(6){transition-delay:.35s}
/* revele par le filet de securite : pas de transition, pas de decalage, visible tout de suite */
.fx-instant .fx-reveal,.fx-reveal.fx-instant,.fx-instant .fx-cascade>*,.fx-cascade.fx-instant>*{transition:none!important;transition-delay:0s!important;opacity:1!important;transform:none!important}

/* -----------------------------------------------------------------------------
   §2 HEADER QUI SE COMPACTE — hauteur pilotée par transform, jamais par height
   -------------------------------------------------------------------------- */
.hdr{transition:box-shadow var(--fx-court) var(--fx),background var(--fx-court) var(--fx)}
.hdr .brand img{transition:transform var(--fx-court) var(--fx);transform-origin:left center}
.est-compact .hdr{box-shadow:0 2px 14px rgba(11,18,38,.1)}
.est-compact .hdr .brand img{transform:scale(.82)}
.est-compact .hdr .brand span{transform:translateX(-4px);display:inline-block;
  transition:transform var(--fx-court) var(--fx)}

/* -----------------------------------------------------------------------------
   §4 TICKER — bandeau de mots-clés en défilement infini
   -------------------------------------------------------------------------- */
.fx-ticker{overflow:hidden;background:var(--charbon);color:var(--creme);
  border-block:2px solid var(--charbon);padding:.85rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.fx-ticker-piste{display:flex;width:max-content;animation:fx-defile 34s linear infinite}
.fx-ticker:hover .fx-ticker-piste{animation-play-state:paused}
.fx-ticker-suite{display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem;flex:none}
.fx-ticker b{font-family:var(--display);font-size:clamp(1rem,2.4vw,1.35rem);
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;font-weight:400}
.fx-ticker i{width:7px;height:7px;border-radius:50%;background:var(--chaud-vif);flex:none}
@keyframes fx-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* -----------------------------------------------------------------------------
   §3 KEN BURNS — lent panoramique sur la photo du hero
   -------------------------------------------------------------------------- */
.fx-kenburns{overflow:hidden;border-radius:var(--r)}
.fx-cadre{display:block;position:relative;z-index:1;border-radius:var(--r)}
.fx-kenburns img{animation:fx-kb 26s var(--fx) infinite alternate;will-change:transform}
@keyframes fx-kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.07) translate(-1.2%,-1.2%)}}

/* -----------------------------------------------------------------------------
   §5 HOVER ZOOM — l'image grossit, le cadre ne bouge pas
   -------------------------------------------------------------------------- */
.b-img,.supports img,.hero-vis img{will-change:transform}
.b-img{overflow:hidden}
.b-img img{transition:transform .45s var(--fx)}
@media(hover:hover){.verre:hover .b-img img{transform:scale(1.06)}}

/* -----------------------------------------------------------------------------
   §1 BOUTONS — soulèvement au survol, onde au clic
   -------------------------------------------------------------------------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
@media(hover:hover){.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(11,18,38,.18)}}
.btn::after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;
  background:currentColor;opacity:0;transform:scale(1);pointer-events:none;z-index:-1}
.btn.fx-onde::after{animation:fx-ripple .55s var(--fx)}
@keyframes fx-ripple{from{opacity:.28;transform:scale(1)}to{opacity:0;transform:scale(42)}}

/* §1 soulignement qui pousse — sur les liens de texte courant */
.prose a,.cfg-rappel a{background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  text-decoration:none;transition:background-size .25s var(--fx)}
@media(hover:hover){.prose a:hover,.cfg-rappel a:hover{background-size:100% 1px}}

/* -----------------------------------------------------------------------------
   §2 COMPTEURS — le chiffre monte quand on le voit (JS pose le contenu)
   -------------------------------------------------------------------------- */
.chiffre b{font-variant-numeric:tabular-nums}

/* -----------------------------------------------------------------------------
   §9 TRACÉ SVG — la timeline des étapes se dessine
   -------------------------------------------------------------------------- */
.fx-trace{position:absolute;left:0;right:0;top:0;height:2px;background:var(--bord);overflow:hidden}
.fx-trace span{display:block;height:100%;background:var(--chaud);transform:scaleX(0);
  transform-origin:left;transition:transform 1.1s var(--fx)}
.fx-trace.is-visible span{transform:scaleX(1)}
.etapes{position:relative;padding-top:1.6rem}

/* -----------------------------------------------------------------------------
   §8 RETOURS D'ÉTAT — focus, validation, bouton en cours d'envoi
   -------------------------------------------------------------------------- */
:focus-visible{outline:3px solid var(--chaud);outline-offset:3px;border-radius:4px}
.champ input:user-invalid,.champ textarea:user-invalid{border-color:#B3261E}
.champ input:user-valid,.champ textarea:user-valid{border-color:#1F7A4C}
.fx-shake{animation:fx-shake .4s var(--fx)}
@keyframes fx-shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}
  50%{transform:translateX(-5px)}100%{transform:none}}
.btn[data-envoi-en-cours]{pointer-events:none;opacity:.75}
.btn[data-envoi-en-cours]::before{content:"";width:17px;height:17px;margin-right:.6rem;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:fx-tourne .7s linear infinite}
@keyframes fx-tourne{to{transform:rotate(360deg)}}

/* -----------------------------------------------------------------------------
   §7 TRANSITIONS DE PAGE — View Transitions API, natif, même en multi-pages
   -------------------------------------------------------------------------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fx-sortie .18s var(--fx) both}
::view-transition-new(root){animation:fx-entree .28s var(--fx) both}
@keyframes fx-sortie{to{opacity:0}}
@keyframes fx-entree{from{opacity:0;transform:translateY(8px)}}


/* =============================================================================
   LOT 2 — sélection élargie du catalogue (18/09, Dylan lève « un effet par page »)
   Critère de choix : sert un site d'artisan à deux univers, reste crédible,
   respecte les règles dures. Écartés : curseur custom, tilt 3D, glows, WebGL,
   mode sombre, scroll snap, loader.
   ============================================================================= */

/* --- §4 HERO : le titre arrive mot par mot (spans posés au build) ------------ */
.fx-mot{display:inline-block;max-width:100%;overflow-wrap:anywhere}
/* animation et non transition : une transition declenchee pendant une View Transition
   cross-document peut rester figee a son etat de depart (titre invisible, vu le 18/09) */
.js-fx .fx-mot{animation:fx-mot-in .5s var(--fx) var(--d,0s) both}
@keyframes fx-mot-in{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}

/* --- §5 RIDEAU : l'image se dévoile de gauche à droite --------------------- */
.js-fx .fx-rideau:not(.fx-au-chargement){clip-path:inset(0 100% 0 0);transition:clip-path .85s var(--fx) .15s}
.js-fx .fx-rideau.is-visible{clip-path:inset(0 0 0 0)}
.js-fx .fx-rideau.fx-au-chargement{animation:fx-rideau-in .85s var(--fx) .15s both}
@keyframes fx-rideau-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* --- §2 PARALLAXE légère sur le hero (variable posée par le JS, GPU) ------- */
@media(min-width:900px){
  .hero-vis::after{transform:translateY(calc(var(--py,0px) * -1))}
  .hero-vis .fx-cadre{transform:translateY(calc(var(--py,0px) * .45))}
  .hero-vis .fx-cadre,.hero-vis::after{transition:transform .08s linear}
}

/* --- §2 BARRE DE PROGRESSION de lecture (native, JS en repli) -------------- */
.fx-progres{position:fixed;left:0;top:0;right:0;height:3px;z-index:120;pointer-events:none;
  background:transparent}
.fx-progres span{display:block;height:100%;background:var(--accent-page,var(--chaud));
  transform:scaleX(0);transform-origin:left}
@supports (animation-timeline:scroll()){
  .fx-progres span{animation:fx-prog linear both;animation-timeline:scroll(root)}
  @keyframes fx-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.page-froide{--accent-page:var(--froid)}

/* --- §2 HEADER : disparaît en descendant, revient en remontant -------------- */
.hdr{transition:transform .28s var(--fx),box-shadow var(--fx-court) var(--fx)}
.est-cache:not(.nav-open) .hdr{transform:translateY(-100%)}

/* --- §3 MATIÈRE : grain sur les fonds sombres, grille fine sur l'univers froid.
       Jamais sur le corail : la marge de contraste y est trop courte. ---------- */
.froid-zone,.bloc-nuit,.final,.ftr,.fx-ticker{position:relative;isolation:isolate}
.froid-zone::before,.bloc-nuit::before,.final::before,.ftr::before{content:"";position:absolute;inset:0;
  pointer-events:none;z-index:-1;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.froid-zone::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px}
.froid-zone .dedans{position:relative;z-index:1}

/* --- §3/§5 DUOTONE : les tuiles de service prennent la couleur de leur univers,
       la photo revient en couleur au survol (neutre au tactile) --------------- */
.fx-duo{position:relative}
.fx-duo img{filter:grayscale(1) contrast(1.08);transition:filter .5s var(--fx),transform .45s var(--fx)}
.fx-duo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--duo,var(--froid));mix-blend-mode:screen;opacity:.92;transition:opacity .5s var(--fx)}
.fx-duo-chaud{--duo:var(--chaud-vif)}
@media(hover:hover){
  .verre:hover .fx-duo img{filter:grayscale(0) contrast(1)}
  .verre:hover .fx-duo::after{opacity:0}
}

/* --- §4 TEXTE CONTOURNÉ sur les grands numéros 01 / 02 --------------------- */
.temperature .numero{color:transparent;-webkit-text-stroke:2px currentColor}
.froid-zone .numero{color:transparent;-webkit-text-stroke:2px rgba(201,138,18,.55)}
.chaud-zone .numero{color:transparent;-webkit-text-stroke:2px rgba(6,26,58,.4)}

/* --- §6 DIAGONALE entre les deux températures ------------------------------- */
.temperatures{background:var(--froid-nuit)}
.chaud-zone{clip-path:polygon(0 0,100% 5%,100% 100%,0 100%);padding-top:clamp(56px,8vw,96px)}
@media(min-width:900px){
  .chaud-zone{clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);padding-top:clamp(40px,6vw,76px)}
  .chaud-zone .dedans{padding-left:clamp(0px,3vw,36px)}
}

/* --- §6 CHEVAUCHEMENT : les chiffres clés mordent sur le bandeau ------------ */
section.fx-overlap{padding-top:0}
.fx-overlap .chiffres{margin-top:calc(-1 * clamp(26px,4vw,46px));position:relative;z-index:3;
  box-shadow:var(--ombre)}

/* --- §6 BORDURE ANIMÉE : un trait parcourt la carte technique au survol ------ */
@property --fx-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.tech article{position:relative;isolation:isolate;overflow:visible}
.tech article::before{content:"";position:absolute;inset:-2px;border-radius:calc(var(--r) + 2px);z-index:-1;
  background:conic-gradient(from var(--fx-angle),transparent 0 68%,var(--chaud) 92%,transparent 100%);
  opacity:0;transition:opacity .3s var(--fx)}
@media(hover:hover){
  .tech article:hover::before{opacity:1;animation:fx-tour 1.6s linear infinite}
}
@keyframes fx-tour{to{--fx-angle:360deg}}

/* --- §7 MENU MOBILE : les liens entrent en cascade ------------------------- */
.nav-open .navp ul li{animation:fx-glisse .38s var(--fx) both}
.nav-open .navp ul li:nth-child(2){animation-delay:.05s}
.nav-open .navp ul li:nth-child(3){animation-delay:.1s}
.nav-open .navp ul li:nth-child(4){animation-delay:.15s}
.nav-open .navp ul li:nth-child(5){animation-delay:.2s}
.nav-open .navp-cta{animation:fx-glisse .38s var(--fx) .26s both}
@keyframes fx-glisse{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* --- §7 TRANSITION DE PAGE : le header reste en place, seul le contenu fond -- */
.hdr{view-transition-name:entete}
::view-transition-old(entete),::view-transition-new(entete){animation:none;mix-blend-mode:normal}

/* --- §8 COCHE qui se dessine sur la page merci (CSS pur, visible sans JS) --- */
.merci .m-ok svg path{stroke-dasharray:32;stroke-dashoffset:32;
  animation:fx-coche .55s var(--fx) .25s forwards}
@keyframes fx-coche{to{stroke-dashoffset:0}}

/* --- §9 ICÔNES : le tracé se dessine à l'apparition ------------------------ */
.js-fx .fx-cascade svg :is(path,rect,circle,ellipse){stroke-dasharray:90;stroke-dashoffset:90;
  transition:stroke-dashoffset .9s var(--fx) .2s}
.js-fx .fx-cascade.is-visible svg :is(path,rect,circle,ellipse){stroke-dashoffset:0}

/* --- le filet de sécurité couvre aussi le lot 2 ---------------------------- */
.fx-instant .fx-mot,.fx-instant.fx-mot{animation:none!important;opacity:1!important;transform:none!important}
.fx-instant .fx-rideau,.fx-rideau.fx-instant{animation:none!important;clip-path:none!important;transition:none!important}
.fx-instant .fx-cascade svg :is(path,rect,circle,ellipse),.fx-cascade.fx-instant svg :is(path,rect,circle,ellipse){stroke-dashoffset:0!important;transition:none!important}

/* =============================================================================
   ACCESSIBILITÉ — exigence, pas option : on neutralise TOUT mouvement
   ============================================================================= */
@media(prefers-reduced-motion:reduce){
  .js-fx .fx-reveal,.js-fx .fx-cascade>*{opacity:1!important;transform:none!important;transition:none!important}
  .fx-ticker-piste{animation:none;transform:none}
  .fx-kenburns img{animation:none}
  .btn:hover{transform:none;box-shadow:none}
  .btn.fx-onde::after{animation:none}
  .fx-trace span{transition:none;transform:scaleX(1)}
  .fx-shake{animation:none}
  .est-compact .hdr .brand img{transform:none}
  @view-transition{navigation:none}
  .js-fx .fx-mot{animation:none;opacity:1;transform:none}
  .js-fx .fx-rideau{animation:none;clip-path:none;transition:none}
  .hero-vis .fx-cadre,.hero-vis::after{transform:none!important}
  .fx-progres span{animation:none;transform:scaleX(0)}
  .est-cache:not(.nav-open) .hdr{transform:none}
  .fx-duo img{transition:none} .fx-duo::after{transition:none}
  .tech article:hover::before{animation:none}
  .nav-open .navp ul li,.nav-open .navp-cta{animation:none}
  .merci .m-ok svg path{animation:none;stroke-dashoffset:0}
  .js-fx .fx-cascade svg :is(path,rect,circle,ellipse){stroke-dashoffset:0;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* 3. bloc signature : configurateur */
/* ===== BLOC SIGNATURE : configurateur de personnalisation =====================
   Le visiteur compose son marquage et l'envoie sur WhatsApp. Aucun prix affiché :
   la demande part avec le récapitulatif, Vincent rappelle avec le devis.
   Aucune dépendance : SVG inline + un calque HTML pour le texte.
   ============================================================================ */
.cfg{display:grid;gap:clamp(1.4rem,3vw,2.4rem);margin-top:clamp(1.6rem,3vw,2.4rem)}
@media(min-width:900px){.cfg{grid-template-columns:.95fr 1.05fr;align-items:start}}

/* --- aperçu --- */
.cfg-vue{position:sticky;top:calc(var(--hdr) + 12px)}
@media(max-width:899px){.cfg-vue{position:static}}
.cfg-scene{position:relative;background:#fff;border:1px solid #EBDDB0;border-radius:var(--r);
  padding:clamp(.8rem,2vw,1.4rem);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.cfg-svg{width:100%;height:100%;display:block}
/* l'attribut hidden ne masque pas un <g> SVG : il faut le dire explicitement */
.cfg-svg [data-support][hidden]{display:none}
.cfg-tissu{fill:var(--cfg-support,#FFFFFF);stroke:#C2CAD8;stroke-width:2;
  transition:fill .25s ease}
.cfg-ombre{fill:rgba(0,0,0,.09)}
.cfg-trait{fill:none;stroke:rgba(0,0,0,.18);stroke-width:3;stroke-linecap:round}
.cfg-trait2{fill:none;stroke:#C2CAD8;stroke-width:8;stroke-linecap:round}

/* le calque de marquage se déplace selon le support */
.cfg-marquage{position:absolute;display:grid;place-items:center;text-align:center;
  pointer-events:none;overflow:hidden;
  left:var(--zx,34%);top:var(--zy,42%);width:var(--zw,32%);height:var(--zh,18%);
  transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease}
.cfg-marquage span{
  color:var(--cfg-encre,#0B1226);line-height:1.05;word-break:break-word;
  font-size:var(--cfg-taille,1.25rem);transition:color .2s ease,font-size .2s ease}
.cfg-marquage[data-style="bloc"] span{font-family:var(--display);text-transform:uppercase;letter-spacing:.01em}
.cfg-marquage[data-style="net"] span{font-family:Inter,sans-serif;font-weight:700;letter-spacing:-.01em}
.cfg-marquage[data-style="script"] span{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700}
.cfg-note{margin-top:.8rem;font-size:.82rem;color:var(--txt-3);text-align:center}

/* --- réglages --- */
.cfg-reglages{display:grid;gap:1.15rem;align-content:start}
.cfg-champ{border:0;padding:0;margin:0}
.cfg-champ legend,.cfg-champ>label{padding:0;margin-bottom:.55rem;display:block;
  font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--chaud)}
.cfg-champ input[type=text]{width:100%;padding:.85rem 1rem;background:#fff;
  border:1px solid #DCE3EE;border-radius:10px;color:var(--charbon);font:700 17px/1.4 Inter,sans-serif}
.cfg-champ input[type=text]:focus{outline:none;border-color:var(--chaud);box-shadow:0 0 0 3px rgba(179,72,15,.16)}

.cfg-choix{display:flex;flex-wrap:wrap;gap:.5rem}
.cfg-choix input{position:absolute;opacity:0;width:1px;height:1px}
.cfg-choix label{display:inline-flex;align-items:center;min-height:46px;padding:.55rem 1.05rem;
  background:#fff;border:1px solid #DCE3EE;border-radius:10px;color:var(--charbon);
  font-size:.93rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.cfg-choix label:hover{border-color:var(--chaud)}
.cfg-choix input:checked+label{background:var(--charbon);border-color:var(--charbon);color:var(--creme)}
.cfg-choix input:focus-visible+label{outline:2px solid var(--chaud);outline-offset:3px}

.cfg-pastilles{display:flex;flex-wrap:wrap;gap:.55rem}
.cfg-pastilles input{position:absolute;opacity:0;width:1px;height:1px}
.cfg-pastilles label{width:42px;height:42px;border-radius:50%;cursor:pointer;display:block;
  border:2px solid #DCE3EE;box-shadow:inset 0 0 0 3px #fff;transition:transform .15s,border-color .2s}
.cfg-pastilles label:hover{transform:scale(1.08)}
.cfg-pastilles input:checked+label{border-color:var(--charbon);transform:scale(1.08)}
.cfg-pastilles input:focus-visible+label{outline:2px solid var(--chaud);outline-offset:3px}

.cfg-envoi{width:100%;margin-top:.4rem}
.cfg-rappel{font-size:.84rem;color:var(--txt-2);text-align:center}
.cfg-rappel a{color:var(--chaud);text-decoration:underline}

@media(prefers-reduced-motion:reduce){
  .cfg-marquage,.cfg-tissu,.cfg-pastilles label{transition:none}
}