/* ══════════════════════════════════════════════════════════════════════════
   ARTIP COMMUNICATION — feuille de style
   Noir · gris · vert #6DA729. Aucune dépendance externe.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Polices auto-hébergées ─────────────────────────────────────────────── */
@font-face{font-family:'Anton';src:url('../fonts/anton-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212;}
@font-face{font-family:'Anton';src:url('../fonts/anton-latin-ext.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2020,U+20A0-20AB;}
@font-face{font-family:'Grotesk';src:url('../fonts/spacegrotesk-latin.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Grotesk';src:url('../fonts/spacegrotesk-latin-ext.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF;}

/* ── Jetons ─────────────────────────────────────────────────────────────── */
:root{
  --vert:#6DA729;
  --vert-vif:#8BCB33;
  --vert-sombre:#4C7A17;
  --noir:#151814;
  --noir-2:#1C201A;
  --noir-3:#262B22;
  --gris:#9BA396;
  --gris-clair:#D3D9CE;
  --blanc:#F7F8F5;

  --max:1360px;
  --gout:clamp(20px,5vw,68px);          /* gouttière latérale */
  --ob:clamp(38px,5.5vw,96px);          /* inclinaison des sections obliques */

  --t-mega:clamp(3.4rem,11vw,10.5rem);
  --t-h1:clamp(2.6rem,7.6vw,6.4rem);
  --t-h2:clamp(2rem,5vw,4.2rem);
  --t-h3:clamp(1.28rem,2.5vw,2rem);
  --t-lead:clamp(1.06rem,1.7vw,1.42rem);
  --t-body:clamp(0.98rem,1.15vw,1.09rem);
  --t-pet:clamp(0.76rem,0.95vw,0.86rem);

  --r-card:16px;                        /* rayon des cartes */
  --r-btn:11px;                         /* rayon des boutons et champs */
  --bord:rgba(255,255,255,.08);         /* filet de carte */
  --carte:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));

  --ease:cubic-bezier(.16,1,.3,1);
}
section[id]{scroll-margin-top:72px}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
html.no-js .loader{display:none}
body{
  font-family:'Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--t-body);line-height:1.62;
  color:var(--blanc);background:var(--noir);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;                 /* clip, pas hidden : sticky continue de marcher */
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--vert);color:var(--noir)}
:focus-visible{outline:3px solid var(--vert-vif);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gout)}
.mono{font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:-.02em;line-height:.94}
.vert{color:var(--vert)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── Loader ─────────────────────────────────────────────────────────────── */
.loader{position:fixed;inset:0;z-index:9999;background:var(--noir);
  display:grid;place-items:center;transition:opacity .6s var(--ease),visibility .6s}
.loader[hidden]{opacity:0;visibility:hidden;pointer-events:none;display:grid}
.loader__in{text-align:center;width:min(340px,70vw)}
.loader__bar{height:3px;background:rgba(255,255,255,.12);margin-top:26px;overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--vert);transition:width .25s linear}

/* ── Le monogramme artip ────────────────────────────────────────────────── */
.mark{font-family:'Anton',Impact,sans-serif;letter-spacing:-.03em;line-height:1;
  display:inline-flex;align-items:flex-start}
.mark i{font-style:normal;position:relative}
.mark i::after{content:'';position:absolute;left:50%;top:-.09em;transform:translateX(-50%);
  width:.2em;height:.2em;border-radius:50%;background:var(--vert)}

/* ── En-tête ────────────────────────────────────────────────────────────── */
.hdr{position:fixed;inset:0 0 auto;z-index:900;transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent}
.hdr.dur{background:rgba(21,24,20,.88);backdrop-filter:blur(18px);border-bottom-color:rgba(255,255,255,.09)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--gout);max-width:var(--max);margin-inline:auto}
.hdr__logo{display:block;line-height:1}
.hdr__logo .mark{font-size:clamp(1.5rem,2.4vw,2rem)}
.hdr__logo small{display:block;font-family:'Grotesk',sans-serif;
  font-size:clamp(.46rem,.72vw,.58rem);letter-spacing:.34em;text-transform:uppercase;
  margin-top:.5em;color:var(--gris);font-weight:700}
.nav{display:flex;gap:clamp(14px,2vw,32px);align-items:center}
.nav a{font-size:var(--t-pet);letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--gris-clair);transition:color .25s;position:relative;padding:6px 0}
.nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--vert);
  transition:width .3s var(--ease)}
.nav a:hover{color:var(--blanc)}
.nav a:hover::after{width:100%}
.nav__cta,.nav__tel{display:none}
.hdr .cta{background:var(--vert);color:var(--noir);padding:10px 18px;border-radius:var(--r-btn);
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:var(--t-pet);
  transition:background .25s,transform .25s}
.hdr .cta:hover{background:var(--vert-vif);transform:translateY(-2px)}
.burger{display:none;background:none;border:0;width:44px;height:44px;position:relative;cursor:pointer}
.burger span{position:absolute;left:9px;width:26px;height:2px;background:var(--blanc);transition:.3s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-block:150px clamp(60px,10vh,120px);overflow:hidden}
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.56}
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,24,20,.80) 0%,rgba(21,24,20,.12) 46%,rgba(21,24,20,.94) 100%)}
.hero__in{position:relative;z-index:2;width:100%}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:var(--t-pet);
  letter-spacing:.3em;text-transform:uppercase;color:var(--vert);font-weight:700;margin-bottom:26px}
.eyebrow::before{content:'';width:44px;height:2px;background:var(--vert)}
.hero h1{font-size:var(--t-mega);text-transform:uppercase;margin-bottom:30px}
.hero h1 em{font-style:normal;color:var(--vert);display:block}
.hero__lead{font-size:var(--t-lead);max-width:52ch;color:var(--gris-clair)}
.hero__foot{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,64px);margin-top:clamp(38px,5vh,64px);
  padding-top:30px;border-top:1px solid rgba(255,255,255,.14)}
.stat b{display:block;font-family:'Anton',sans-serif;font-size:clamp(2rem,3.6vw,3.1rem);color:var(--blanc);line-height:1}
.stat span{font-size:var(--t-pet);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

/* ── Bandes défilantes en diagonale ─────────────────────────────────────── */
.mqwrap{position:relative;z-index:5;margin-block:clamp(-30px,-3vw,-14px);pointer-events:none}
.mq{width:118%;margin-left:-9%;background:var(--vert);color:var(--noir);
  padding:16px 0;overflow:hidden;white-space:nowrap}
.mq--a{transform:rotate(-2.1deg)}
.mq--b{transform:rotate(1.7deg);background:var(--noir-3);color:var(--blanc);
  border-block:1px solid rgba(109,167,41,.35)}
.mq__track{display:inline-flex;animation:mqrun 34s linear infinite;will-change:transform}
.mq--b .mq__track{animation-duration:44s;animation-direction:reverse}
.mq__grp{display:inline-flex;align-items:center;gap:38px;padding-right:38px;flex:none}
.mq__grp span{font-family:'Anton',sans-serif;font-size:clamp(1.1rem,2.1vw,1.75rem);
  text-transform:uppercase;letter-spacing:.02em}
.mq__grp .dot{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
@keyframes mqrun{to{transform:translateX(-50%)}}
.mq:hover .mq__track{animation-play-state:paused}

/* ── Sections ───────────────────────────────────────────────────────────── */
.sec{position:relative;padding-block:clamp(76px,11vw,168px)}
.sec--alt{background:
  radial-gradient(1100px 520px at 88% -8%, rgba(109,167,41,.075), transparent 62%),
  radial-gradient(900px 460px at -6% 108%, rgba(109,167,41,.05), transparent 58%),
  var(--noir-2)}
.oblique{clip-path:polygon(0 var(--ob),100% 0,100% calc(100% - var(--ob)),0 100%);
  margin-block:calc(var(--ob) * -1);padding-block:calc(clamp(76px,11vw,168px) + var(--ob))}
.secvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.30;pointer-events:none}
.sec--alt::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,32,26,.68),rgba(28,32,26,.34) 30%,rgba(28,32,26,.34) 70%,rgba(28,32,26,.68))}
.secimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:.30;pointer-events:none}
.sec--img::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,24,20,.72),rgba(21,24,20,.28) 40%,rgba(21,24,20,.86))}
.sec > .wrap{position:relative;z-index:2}
.sec::before{content:attr(data-num);position:absolute;right:var(--gout);top:clamp(40px,6vw,90px);
  font-family:'Anton',sans-serif;font-size:clamp(5rem,15vw,14rem);color:rgba(255,255,255,.032);
  line-height:1;z-index:1;pointer-events:none;user-select:none}

.shead{margin-bottom:clamp(38px,5vw,72px);max-width:66ch}
.shead h2{font-size:var(--t-h2);text-transform:uppercase;margin-bottom:18px}
.shead p{font-size:var(--t-lead);color:var(--gris-clair)}

.videoplus{margin-top:clamp(46px,6vw,84px)}
.videoplus h3{font-size:clamp(24px,3.2vw,40px);text-transform:uppercase;margin-bottom:12px}
.videoplus p{font-size:var(--t-lead);color:var(--gris-clair);margin-bottom:22px;max-width:66ch}

/* ── Grille des métiers ─────────────────────────────────────────────────── */
.metiers{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.metier{position:relative;background:var(--carte),var(--noir-2);padding:clamp(24px,3vw,40px);
  text-align:left;border:1px solid var(--bord);border-radius:var(--r-card);cursor:pointer;
  transition:background .35s var(--ease),border-color .35s,transform .35s var(--ease);
  display:flex;flex-direction:column;gap:14px;min-height:clamp(210px,22vw,280px);overflow:hidden}
@media (min-width:881px){
  .metier{background:var(--carte),rgba(28,32,26,.72);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}
.metier::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:3px;
  background:var(--vert);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.metier:hover,.metier:focus-visible{background:var(--carte),var(--noir-3);
  border-color:rgba(109,167,41,.45);transform:translateY(-3px)}
.metier:hover::after,.metier:focus-visible::after{transform:scaleX(1)}
.metier__ico{width:46px;height:46px;color:var(--vert);transition:transform .45s var(--ease)}
.metier:hover .metier__ico{transform:translateY(-4px) scale(1.06)}
.metier h3{font-size:var(--t-h3);text-transform:uppercase;font-family:'Anton',sans-serif;
  letter-spacing:-.01em;line-height:1.06}
.metier p{color:var(--gris);font-size:var(--t-pet);line-height:1.6;flex:1}
.metier__go{font-size:var(--t-pet);letter-spacing:.15em;text-transform:uppercase;
  color:var(--vert);font-weight:700;display:inline-flex;align-items:center;gap:9px}
.metier__go svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.metier:hover .metier__go svg{transform:translateX(5px)}

/* ── Panneau latéral produit ────────────────────────────────────────────── */
.panneau{position:fixed;inset:0;z-index:1000;visibility:hidden;pointer-events:none}
.panneau.on{visibility:visible;pointer-events:auto}
.panneau__voile{position:absolute;inset:0;background:rgba(10,12,9,.74);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .45s var(--ease)}
.panneau.on .panneau__voile{opacity:1}
.panneau__box{position:absolute;right:0;top:0;height:100%;width:min(680px,100%);
  background:var(--noir-2);border-left:3px solid var(--vert);overflow-y:auto;
  border-radius:22px 0 0 22px;
  transform:translateX(101%);transition:transform .5s var(--ease);
  padding:clamp(24px,4vw,56px);padding-top:clamp(70px,8vw,90px)}
.panneau.on .panneau__box{transform:none}
.panneau__x{position:absolute;top:20px;right:20px;width:46px;height:46px;border:0;border-radius:50%;
  background:rgba(255,255,255,.10);color:var(--blanc);cursor:pointer;font-size:1.4rem;
  display:grid;place-items:center;transition:background .25s}
.panneau__x:hover{background:var(--vert);color:var(--noir)}
.panneau h3{font-family:'Anton',sans-serif;font-size:clamp(1.9rem,4vw,3rem);
  text-transform:uppercase;margin-bottom:14px;line-height:1.02}
.panneau .kick{font-size:var(--t-pet);letter-spacing:.22em;text-transform:uppercase;
  color:var(--vert);font-weight:700;margin-bottom:12px}
.panneau__desc{color:var(--gris-clair);margin-bottom:30px}
.panneau h4{font-size:var(--t-pet);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris);margin:30px 0 14px;font-weight:700}
.fiche{border-top:1px solid rgba(255,255,255,.1)}
.fiche div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.09);font-size:var(--t-pet)}
.fiche dt{color:var(--gris)}
.fiche dd{text-align:right;font-weight:600}
.expl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.expl button{border:0;padding:0;background:var(--noir-3);aspect-ratio:4/3;overflow:hidden;cursor:pointer;
  position:relative}
.expl img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);opacity:.92}
.expl button:hover img{transform:scale(1.07);opacity:1}
.panneau .btn{width:100%;margin-top:32px;position:sticky;bottom:0;
  box-shadow:0 -22px 34px rgba(28,32,26,.92)}

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--vert);color:var(--noir);border:0;cursor:pointer;
  padding:13px 24px;border-radius:var(--r-btn);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;font-size:var(--t-pet);transition:background .25s,transform .25s}
.btn svg{width:15px;height:15px;flex:none}
.btn:hover{background:var(--vert-vif);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--blanc);border:1px solid rgba(255,255,255,.28)}
.btn--ghost:hover{background:rgba(255,255,255,.09);border-color:var(--vert);color:var(--vert)}

/* ── Onglets parc machines ──────────────────────────────────────────────── */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.tabs button{background:rgba(21,24,20,.5);border:1px solid rgba(255,255,255,.16);color:var(--gris-clair);
  padding:10px 18px;border-radius:999px;cursor:pointer;font-size:var(--t-pet);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;transition:.25s}
.tabs button[aria-selected="true"]{background:var(--vert);border-color:var(--vert);color:var(--noir)}
.tabs button:hover:not([aria-selected="true"]){border-color:var(--vert);color:var(--blanc)}
.machines{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.machine{background:var(--carte),var(--noir-2);padding:clamp(22px,2.6vw,34px);
  display:flex;flex-direction:column;gap:10px;border:1px solid var(--bord);
  border-radius:var(--r-card);transition:background .3s,border-color .3s}
.machine:hover{background:var(--carte),var(--noir-3);border-color:rgba(109,167,41,.35)}
@media (min-width:881px){
  .machine{background:var(--carte),rgba(28,32,26,.72);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}
.machine .marque{font-size:var(--t-pet);letter-spacing:.2em;text-transform:uppercase;color:var(--vert);font-weight:700}
.machine h3{font-family:'Anton',sans-serif;font-size:clamp(1.2rem,2vw,1.6rem);text-transform:uppercase;line-height:1.06}
.machine p{color:var(--gris);font-size:var(--t-pet)}
.machine .fmt{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--t-pet);color:var(--gris-clair)}
.machine .fmt b{color:var(--vert-vif);font-family:'Anton',sans-serif;font-size:1.2em;letter-spacing:0}

/* ── Wall'Art ───────────────────────────────────────────────────────────── */
.wa{display:grid;gap:clamp(30px,4vw,60px);grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  align-items:start}
.tarifs{border-top:2px solid var(--vert)}
.tarifs div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.09);font-size:var(--t-pet)}
.tarifs dt{color:var(--gris-clair)}
.tarifs dd{font-family:'Anton',sans-serif;color:var(--vert-vif);font-size:1.22em;letter-spacing:0}

/* ── Galerie ────────────────────────────────────────────────────────────── */
.galerie{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.galerie button{border:0;padding:0;background:var(--noir-3);overflow:hidden;cursor:pointer;
  aspect-ratio:4/3;position:relative}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),opacity .3s;opacity:.86}
.galerie button:hover img{transform:scale(1.06);opacity:1}
.galerie figcaption{position:absolute;left:0;bottom:0;width:100%;padding:14px 16px;
  background:linear-gradient(transparent,rgba(21,24,20,.94));
  font-size:var(--t-pet);text-align:left;letter-spacing:.05em;text-transform:uppercase;font-weight:600}

/* ── Visionneuse ────────────────────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:1100;background:rgba(10,12,9,.96);display:grid;place-items:center;
  visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s;padding:clamp(20px,5vw,70px)}
.lb.on{visibility:visible;opacity:1}
.lb img{max-width:100%;max-height:82vh;object-fit:contain}
.lb__x,.lb__p,.lb__n{position:absolute;border:0;background:rgba(255,255,255,.1);color:var(--blanc);
  width:52px;height:52px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  font-size:1.5rem;transition:background .25s}
.lb__x:hover,.lb__p:hover,.lb__n:hover{background:var(--vert);color:var(--noir)}
.lb__x{top:22px;right:22px}.lb__p{left:22px;top:50%;transform:translateY(-50%)}
.lb__n{right:22px;top:50%;transform:translateY(-50%)}
.lb__cap{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:var(--t-pet);
  letter-spacing:.12em;text-transform:uppercase;color:var(--gris-clair);text-align:center;width:90%}

/* ── Équipe ─────────────────────────────────────────────────────────────── */
.equipe{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.pers{background:var(--carte),var(--noir-2);padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--bord);border-radius:var(--r-card);transition:background .3s,border-color .3s}
.pers:hover{background:var(--carte),var(--noir-3);border-color:rgba(109,167,41,.3)}
.pers .ini{width:56px;height:56px;border-radius:50%;background:var(--vert);color:var(--noir);
  display:grid;place-items:center;font-family:'Anton',sans-serif;font-size:1.25rem;margin-bottom:16px}
.pers h3{font-size:1.06rem;font-weight:700;letter-spacing:.02em}
.pers .role{color:var(--vert);font-size:var(--t-pet);letter-spacing:.1em;text-transform:uppercase;
  margin-top:5px;font-weight:600}
.pers a{color:var(--gris);font-size:var(--t-pet);display:inline-block;margin-top:12px;
  border-bottom:1px solid transparent;transition:.25s}
.pers a:hover{color:var(--vert-vif);border-bottom-color:var(--vert-vif)}

/* ── Formulaire de devis ────────────────────────────────────────────────── */
.devis{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.champ{margin-bottom:18px}
.champ label{display:block;font-size:var(--t-pet);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);margin-bottom:8px;font-weight:600}
.champ input,.champ select,.champ textarea{width:100%;background:var(--noir-3);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-btn);padding:13px 15px;
  color:var(--blanc);transition:border-color .25s,background .25s;appearance:none}
.champ select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238BCB33' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:42px}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--vert);background:var(--noir-2)}
.champ textarea{min-height:130px;resize:vertical}
.champ--2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pot{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.rgpd{font-size:.78rem;color:var(--gris);margin-top:14px;line-height:1.55}

/* ── Bouton flottant demande spéciale ───────────────────────────────────── */
.flot{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:880;
  background:var(--vert);color:var(--noir);border:0;border-radius:100px;cursor:pointer;
  padding:12px 20px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  font-size:var(--t-pet);display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 14px 44px rgba(0,0,0,.55);transition:transform .3s var(--ease),background .25s;
  transform:translateY(160%)}
.flot.on{transform:none}
.flot:hover{background:var(--vert-vif);transform:translateY(-3px)}
.flot svg{width:16px;height:16px}

/* ── Barre d'action mobile (devis + appel, toujours à un pouce) ─────────── */
.barre{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:880;display:none;gap:10px;padding:10px;border-radius:20px;
  background:rgba(21,24,20,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(0,0,0,.55);
  transform:translateY(180%);transition:transform .45s var(--ease)}
.barre.on{transform:none}
.barre .btn{flex:1;padding:13px 10px}
.barre__tel{flex:none;width:48px;border:1px solid rgba(255,255,255,.16);border-radius:13px;
  display:grid;place-items:center;color:var(--blanc);background:rgba(255,255,255,.05)}
.barre__tel svg{width:19px;height:19px}

/* ── Contact ────────────────────────────────────────────────────────────── */
.lieux{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.lieu{background:var(--carte),var(--noir-2);padding:clamp(24px,2.8vw,40px);
  border:1px solid var(--bord);border-radius:var(--r-card)}
.lieu .tag{font-size:var(--t-pet);letter-spacing:.2em;text-transform:uppercase;color:var(--vert);
  font-weight:700;margin-bottom:14px}
.lieu h3{font-family:'Anton',sans-serif;font-size:var(--t-h3);text-transform:uppercase;margin-bottom:10px}
.lieu address{font-style:normal;color:var(--gris-clair);line-height:1.75}
.lieu a{color:var(--vert-vif)}

/* ── Pied de page ───────────────────────────────────────────────────────── */
.ft{background:
  radial-gradient(900px 420px at 12% -20%, rgba(109,167,41,.06), transparent 60%),
  var(--noir-2);padding-block:clamp(50px,6vw,80px) 34px;border-top:1px solid rgba(255,255,255,.09)}
.ft__grid{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.09)}
.ft h4{font-size:var(--t-pet);letter-spacing:.18em;text-transform:uppercase;color:var(--gris);
  margin-bottom:16px;font-weight:700}
.ft li{list-style:none;margin-bottom:9px}
.ft a{color:var(--gris-clair);font-size:var(--t-pet);transition:color .25s}
.ft a:hover{color:var(--vert-vif)}
.ft__bas{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding-top:26px;
  font-size:.76rem;color:var(--gris)}
.label{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--vert);
  color:var(--vert);padding:8px 16px;border-radius:999px;font-size:var(--t-pet);
  letter-spacing:.1em;text-transform:uppercase;font-weight:700}

/* ── Apparitions au scroll ──────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.vu{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width:880px){
  /* ⚠️ .hdr porte un backdrop-filter : il devient bloc conteneur des enfants en
     position:fixed. On ne peut donc pas compter sur translateY(-100%) pour sortir
     le menu de l'écran — d'où visibility + opacity, qui eux ne dépendent de rien. */
  .nav{position:fixed;inset:0;height:100svh;background:var(--noir);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:16px;z-index:890;padding:90px 34px 40px;counter-reset:m;
    visibility:hidden;opacity:0;transform:translateY(-14px);
    transition:opacity .35s var(--ease),transform .45s var(--ease),visibility .35s}
  .nav.on{visibility:visible;opacity:1;transform:none}
  .nav a{font-size:1.45rem;font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.02em}
  .nav a:not(.nav__cta):not(.nav__tel):not(.nav__espace){counter-increment:m}
  .nav a:not(.nav__cta):not(.nav__tel):not(.nav__espace)::before{content:counter(m,decimal-leading-zero);
    font-family:'Grotesk',sans-serif;font-size:.58em;color:var(--vert);
    margin-right:14px;vertical-align:.25em;letter-spacing:.1em}
  .nav a::after{display:none}
  .nav__cta{display:inline-flex;margin-top:26px;background:var(--vert);color:var(--noir);
    padding:15px 30px;border-radius:var(--r-btn);
    font-family:'Grotesk',sans-serif !important;font-weight:700;
    font-size:.82rem !important;letter-spacing:.07em;text-transform:uppercase}
  .nav__tel{display:block;font-family:'Grotesk',sans-serif !important;font-size:1rem !important;
    color:var(--gris-clair);letter-spacing:.04em}
  .burger{display:block;z-index:901}
  .hdr .cta{display:none}
  .oblique{clip-path:none;margin-block:0;padding-block:clamp(60px,9vw,120px)}
  .sec{padding-block:clamp(60px,9vw,120px)}
  .sec::before{font-size:3.6rem;top:26px}
  .shead{margin-bottom:30px}

  /* fonds réellement visibles sur téléphone */
  .hero__vid{opacity:.52}
  .secvid{opacity:.34}

  /* stats du hero : 2 colonnes compactes */
  .hero{padding-block:120px 90px}
  .hero__foot{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-top:30px}
  .stat b{font-size:1.6rem}

  /* une seule bande défilante (la liste machines = bruit sur téléphone) */
  .mq--b{display:none}

  /* grille métiers : 2 colonnes courtes, l'accroche part dans le panneau */
  .metiers{grid-template-columns:1fr 1fr;gap:10px}
  .metier{min-height:0;padding:16px 13px;gap:9px;border-radius:14px}
  .metier p{display:none}
  .metier h3{font-size:.98rem;letter-spacing:0}
  .metier__ico{width:30px;height:30px}
  .metier__go{font-size:.6rem;letter-spacing:.1em}
  .metier__go svg{width:13px;height:13px}
  .metier:last-child{grid-column:1/-1}

  .machines{gap:10px}
  .machine{border-radius:14px}
  .equipe{grid-template-columns:1fr 1fr;gap:10px}
  .pers{border-radius:14px;padding:18px 14px}
  .pers .ini{width:44px;height:44px;font-size:1rem;margin-bottom:12px}
  .pers h3{font-size:.95rem}
  .lieux{gap:10px}
  .lieu{border-radius:14px}

  .panneau__box{border-radius:0;border-left:0;border-top:3px solid var(--vert)}
  .expl{grid-template-columns:1fr 1fr}
  .champ--2{grid-template-columns:1fr}
  .lb__p,.lb__n{width:44px;height:44px}
  .lb__p{left:8px}.lb__n{right:8px}

  /* le bouton flottant cède la place à la barre d'action */
  .flot{display:none}
  .barre{display:flex}
  body{padding-bottom:120px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .mq__track{animation:none}
}

/* ── Remerciement à l'équipe ────────────────────────────────────────────── */
.merci{margin-top:clamp(46px,6vw,84px);padding:clamp(30px,4vw,54px);
  background:var(--carte),var(--noir-2);border:1px solid var(--bord);
  border-left:3px solid var(--vert);border-radius:var(--r-card);max-width:78ch}
.merci__txt{font-size:var(--t-lead);line-height:1.7;color:var(--gris-clair)}
.merci__txt strong{color:var(--blanc);font-weight:700}

/* ── Bande photos défilante ─────────────────────────────────────────────── */
.sec--photos{padding-bottom:clamp(56px,7vw,110px)}
.bande{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bande__piste{display:flex;width:max-content;animation:bandeRun 92s linear infinite;
  will-change:transform}
.bande:hover .bande__piste,.bande:focus-within .bande__piste{animation-play-state:paused}
.bande--saisie{cursor:grabbing}
.bande--saisie .bande__grp img{transition:none}
.bande--saisie .bande__grp button{pointer-events:none}
.bande--libre{overflow-x:auto;cursor:default;
  -webkit-mask-image:none;mask-image:none}
.bande--libre .bande__piste{animation:none}
@keyframes bandeRun{to{transform:translateX(-50%)}}
.bande__grp{display:flex;gap:14px;padding-right:14px;flex:none}
.bande__grp button{position:relative;flex:none;border:0;padding:0;cursor:pointer;
  width:clamp(210px,26vw,340px);height:clamp(150px,19vw,240px);overflow:hidden;
  background:var(--noir-3);border-radius:2px}
.bande__grp img{width:100%;height:100%;object-fit:cover;opacity:.86;-webkit-user-drag:none;
  transition:transform .7s var(--ease),opacity .4s}
.bande__grp button:hover img,.bande__grp button:focus-visible img{transform:scale(1.07);opacity:1}
.bande__grp button::after{content:'';position:absolute;inset:auto 0 0 0;height:3px;
  background:var(--vert);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.bande__grp button:hover::after,.bande__grp button:focus-visible::after{transform:scaleX(1)}
.bande__grp span{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  text-align:left;font-size:var(--t-pet);line-height:1.35;font-weight:600;
  background:linear-gradient(transparent,rgba(21,24,20,.94));
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease)}
.bande__grp button:hover span,.bande__grp button:focus-visible span{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .bande__piste{animation:none}
  .bande{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .bande__grp span{opacity:1;transform:none}
}

/* ── Fonds vidéo : on veut voir TOUTE l'image, pas seulement son centre ──
   Les versions -mobile sont encodées en 9:16 avec l'image 16:9 entière au
   centre et un remplissage flouté : `cover` ne coupe donc plus rien. */
.hero__vid,.secvid{object-position:center center}
@media (max-width:880px){
  .hero{min-height:100svh}
}

/* ── Rangée d'actions (devis / mail direct) ─────────────────────────────── */
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.actions .btn{flex:none}

/* ══════════════════════════════════════════════════════════════════════════
   AJOUTS DU 03/08 — sélecteur de langue, espace client
   Rien au-dessus n'a été modifié : tout ce qui suit ne fait qu'ajouter.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Sélecteur de langue (en-tête) ──────────────────────────────────────── */
.lang{display:flex;align-items:center;gap:2px;flex:none}
.lang a{font-size:.68rem;font-weight:700;letter-spacing:.06em;color:var(--gris);
  padding:6px 8px;border-radius:9px;border:1px solid transparent;line-height:1;
  transition:color .2s,background .2s,border-color .2s}
.lang a::after{display:none}
.lang a:hover{color:var(--blanc);border-color:rgba(255,255,255,.22)}
.lang a[aria-current]{background:var(--vert);color:var(--noir);border-color:var(--vert)}

/* ── Lien « Mon espace » : visible seulement quand il y a la place ───────── */
.nav__espace{display:none}
.nav__espace svg{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:6px}
@media (min-width:1181px){.nav__espace{display:inline-flex;align-items:center}}

/* ── Bandeau « connecté » posé par app.js sous l'en-tête du formulaire ──── */
/* ⚠️ display:flex écrase l'attribut hidden : il faut le rétablir, sinon le
   bandeau reste visible (et vide) pour les visiteurs non connectés. */
.connecte[hidden]{display:none}
.connecte{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:rgba(109,167,41,.12);border:1px solid rgba(109,167,41,.4);
  border-radius:var(--r-btn);padding:11px 15px;margin-bottom:20px;font-size:var(--t-pet)}
.connecte b{color:var(--vert-vif)}
.connecte a{color:var(--gris-clair);border-bottom:1px solid rgba(255,255,255,.25)}
.connecte a:hover{color:var(--vert-vif);border-bottom-color:var(--vert-vif)}

/* ── Invitation à créer un compte, sous le formulaire ───────────────────── */
.invite{margin-top:16px;font-size:var(--t-pet);color:var(--gris);line-height:1.6}
.invite a{color:var(--vert-vif);border-bottom:1px solid transparent;transition:.2s}
.invite a:hover{border-bottom-color:var(--vert-vif)}
.rgpd a{color:var(--vert-vif)}

/* ══════════════════════════════════════════════════════════════════════════
   ESPACE CLIENT (compte/index.php) — même charte, page autonome
   ══════════════════════════════════════════════════════════════════════════ */
.esp-body{background:
  radial-gradient(900px 480px at 88% -10%,rgba(109,167,41,.10),transparent 62%),
  var(--noir);min-height:100svh}
.esp-hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px var(--gout);border-bottom:1px solid rgba(255,255,255,.09);
  max-width:var(--max);margin-inline:auto}
.esp-hdr__droite{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.esp{max-width:1000px;margin-inline:auto;padding:clamp(34px,6vw,72px) var(--gout) 80px}
.esp h1{font-size:var(--t-h2);text-transform:uppercase;margin-bottom:14px}
.esp__intro{font-size:var(--t-lead);color:var(--gris-clair);max-width:60ch;margin-bottom:30px}

.esp-alerte{border-radius:var(--r-btn);padding:13px 16px;margin-bottom:20px;font-size:var(--t-pet);
  border:1px solid var(--bord);background:var(--noir-2)}
.esp-alerte--ko{border-color:rgba(226,90,70,.55);background:rgba(226,90,70,.12)}
.esp-alerte--ok{border-color:rgba(109,167,41,.55);background:rgba(109,167,41,.13)}

.esp-grille{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  align-items:start}
.esp-carte{background:var(--carte),var(--noir-2);border:1px solid var(--bord);
  border-radius:var(--r-card);padding:clamp(22px,3vw,34px)}
.esp-carte h2{font-family:'Anton',sans-serif;font-size:var(--t-h3);text-transform:uppercase;
  line-height:1.05;margin-bottom:20px}
.esp-aide{font-size:.78rem;color:var(--gris);margin:-6px 0 16px;line-height:1.55}
/* Les libellés du formulaire n'ont pas tous la même hauteur : on aligne les
   champs par le bas pour que les deux colonnes restent sur la même ligne. */
.esp-carte .champ--2{align-items:end}
.esp-opt{color:var(--gris);font-weight:400;letter-spacing:0;text-transform:none}

.esp-profil{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--carte),var(--noir-2);border:1px solid var(--bord);border-left:3px solid var(--vert);
  border-radius:var(--r-card);padding:clamp(20px,2.6vw,30px);margin-bottom:20px}
.esp-bonjour{font-family:'Anton',sans-serif;font-size:var(--t-h3);text-transform:uppercase;line-height:1.05}
.esp-mail{color:var(--vert-vif);font-size:var(--t-pet);margin-top:6px;overflow-wrap:anywhere}
.esp-depuis{color:var(--gris);font-size:var(--t-pet);margin-top:4px}

.esp-histo h2{font-family:'Anton',sans-serif;font-size:var(--t-h3);text-transform:uppercase;
  margin-bottom:16px}
.esp-vide{color:var(--gris);background:var(--noir-2);border:1px dashed var(--bord);
  border-radius:var(--r-card);padding:26px;text-align:center;font-size:var(--t-pet)}
.esp-tableau{overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--noir-2);border:1px solid var(--bord);border-radius:var(--r-card)}
.esp-tableau table{width:100%;border-collapse:collapse;min-width:520px}
.esp-tableau th{text-align:left;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);font-weight:700;padding:13px 16px;border-bottom:1px solid var(--bord);white-space:nowrap}
.esp-tableau td{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);
  font-size:var(--t-pet);color:var(--gris-clair)}
.esp-tableau tr:last-child td{border-bottom:0}
.esp-ref{font-family:'Anton',sans-serif;letter-spacing:.02em;color:var(--blanc);white-space:nowrap}
.esp-statut{display:inline-block;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid var(--bord);white-space:nowrap}
.esp-statut--nouvelle{background:var(--vert);color:var(--noir);border-color:var(--vert)}
.esp-statut--en_cours{background:rgba(226,169,70,.20);color:#E8B85C;border-color:rgba(226,169,70,.45)}
.esp-statut--devis_envoye{background:rgba(90,150,226,.18);color:#8FBBF0;border-color:rgba(90,150,226,.45)}
.esp-statut--gagnee{background:rgba(109,167,41,.22);color:var(--vert-vif);border-color:rgba(109,167,41,.5)}
.esp-statut--perdue{background:rgba(226,90,70,.16);color:#EE9B8D;border-color:rgba(226,90,70,.42)}
.esp-statut--archivee{background:rgba(255,255,255,.06);color:var(--gris)}
.esp-actions{margin-top:24px}
.esp-histo .esp-aide{margin-top:16px}
/* ── Espace client : la liste de demandes (le « panier ») ──────────────── */
.esp-panier,.esp-coord{margin-top:22px}
.esp-lignes{list-style:none;counter-reset:pn;display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.esp-lignes li{counter-increment:pn;display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;padding:14px 16px 14px 46px;position:relative;border-radius:var(--r-btn);
  background:rgba(0,0,0,.26);border:1px solid var(--bord)}
.esp-lignes li::before{content:counter(pn);position:absolute;left:15px;top:15px;display:grid;
  place-items:center;width:22px;height:22px;border-radius:50%;background:var(--vert);
  color:var(--noir);font-weight:900;font-size:.7rem}
.esp-lignes strong{display:block;font-size:var(--t-body);color:var(--blanc);overflow-wrap:anywhere}
.esp-lignes span{display:block;font-size:var(--t-pet);color:var(--vert-vif);margin-top:3px}
.esp-lignes small{display:block;font-size:var(--t-pet);line-height:1.55;color:var(--gris);margin-top:6px}
.esp-retirer{background:transparent;border:1px solid var(--bord);border-radius:var(--r-btn);
  color:var(--gris);padding:8px 12px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}
.esp-retirer:hover{color:var(--blanc);border-color:rgba(226,90,70,.6)}
.esp-envoi{padding-top:6px;border-top:1px solid var(--bord);margin-bottom:26px}
.esp-envoi .btn{width:100%;margin-top:4px}
.esp-ajout{padding-top:20px;border-top:1px dashed var(--bord)}
.esp-ajout .btn{width:100%;margin-top:4px}
.esp-coord .btn{width:100%;margin-top:4px}

.esp-pied{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09);
  font-size:var(--t-pet);color:var(--gris)}
.esp-pied a{color:var(--gris-clair);border-bottom:1px solid transparent}
.esp-pied a:hover{color:var(--vert-vif);border-bottom-color:var(--vert-vif)}

/* ── Mentions légales / confidentialité ─────────────────────────────────── */
.doc{max-width:820px;margin-inline:auto;padding:clamp(34px,6vw,80px) var(--gout) 80px}
.doc h1{font-size:var(--t-h2);text-transform:uppercase;margin-bottom:26px}
.doc h2{font-family:'Anton',sans-serif;font-size:var(--t-h3);text-transform:uppercase;
  margin:38px 0 12px;color:var(--blanc)}
.doc h3{font-size:1rem;font-weight:700;margin:20px 0 6px;color:var(--vert-vif)}
.doc p{color:var(--gris-clair);margin-bottom:12px}
.doc address{font-style:normal;color:var(--gris-clair);line-height:1.8}
.doc a{color:var(--vert-vif);border-bottom:1px solid transparent}
.doc a:hover{border-bottom-color:var(--vert-vif)}
.doc .esp-pied{margin-top:44px}

/* ── Ajustements téléphone pour les ajouts ci-dessus ────────────────────── */
@media (max-width:880px){
  .hdr__in{gap:10px}
  /* Le menu plein écran passe au-dessus des enfants non positionnés de
     l'en-tête : on remonte le sélecteur de langue pour qu'il reste joignable
     même menu ouvert. */
  .lang{position:relative;z-index:901}
  .lang a{font-size:.62rem;padding:5px 6px}
  .nav__espace{display:block;margin-top:18px;font-family:'Grotesk',sans-serif !important;
    font-size:.95rem !important;color:var(--gris-clair);letter-spacing:.04em}
  .esp-hdr{padding-block:12px}
  .esp-profil{flex-direction:column}
  .esp-tableau table{min-width:460px}
}

/* ── v4.1 (03/08 soir) — barre du haut compacte sur ordinateur ──────────────
   La droite de la barre devient une grappe unique : langues · Mon espace ·
   téléphone (icône) · bouton devis. « Mon espace » quitte la navigation sur
   ordinateur (il y créait un 7e lien) et reste une entrée du menu mobile. */
.hdr__actions{display:flex;align-items:center;gap:9px;flex:none}
.hdr__espace,.hdr__tel{display:none}
@media (min-width:881px){
  .hdr__espace{display:inline-flex;align-items:center;gap:7px;height:38px;
    padding:0 13px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-btn);
    color:var(--gris-clair);font-size:var(--t-pet);font-weight:600;
    letter-spacing:.07em;text-transform:uppercase;
    transition:border-color .25s,color .25s}
  .hdr__espace:hover{color:var(--blanc);border-color:var(--vert)}
  .hdr__espace svg{width:15px;height:15px;flex:none}
  .hdr__tel{display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-btn);color:var(--gris-clair);
    transition:border-color .25s,color .25s}
  .hdr__tel:hover{color:var(--vert-vif);border-color:var(--vert)}
  .hdr__tel svg{width:16px;height:16px}
  /* le lien « Mon espace » de la navigation est réservé au menu mobile */
  .nav .nav__espace{display:none}
}
@media (min-width:881px) and (max-width:1280px){
  .hdr__espace{width:38px;justify-content:center;padding:0}
  .hdr__espace span{display:none}
}
@media (max-width:880px){
  .hdr__actions{gap:8px}
  .hdr__espace,.hdr__tel{display:none}
  .nav .nav__espace{display:flex;align-items:center;gap:10px}
}

/* v4.1b — la barre tient sur UNE ligne à toutes les largeurs d'ordinateur */
@media (min-width:881px){
  .hdr__in{flex-wrap:nowrap}
  .nav a{white-space:nowrap}
}
@media (min-width:881px) and (max-width:1180px){
  .hdr__in{gap:14px}
  .nav{gap:11px}
  .nav a{font-size:.66rem;letter-spacing:.09em}
  .lang a{padding:4px 7px}
  .hdr .cta{padding:10px 13px;letter-spacing:.04em}
  .hdr__logo .mark{font-size:1.4rem}
}
@media (min-width:881px) and (max-width:1180px){.hdr__in{padding-inline:16px}}

.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:6px}
.trio figure{margin:0}
.trio video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.12);pointer-events:none;display:block}
.trio figcaption{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-clair);margin-top:8px}
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.1)}
.machgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.machgrid figure{margin:0}
.machgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.1)}
.machgrid figcaption{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-clair);margin-top:6px}
.confiance{margin-top:clamp(46px,6vw,84px)}
.logowall{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0;margin:0 0 14px}
.logowall li{font-family:'Anton',Impact,sans-serif;font-size:clamp(16px,2vw,22px);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.conf-note{color:var(--gris-clair);font-size:14px}
@media(max-width:880px){.trio{grid-template-columns:1fr}.strip{grid-template-columns:repeat(2,1fr)}.machgrid{grid-template-columns:repeat(2,1fr)}}

.barre a svg,.barre__tel svg{width:22px;height:22px;flex:0 0 22px}
.bande{touch-action:pan-y}
@media(max-width:880px){.bande__piste img{max-height:150px}}
.sec--photos .trio{margin-bottom:18px}

/* ── 06/08 · Bandes par familles, vignettes vidéo, vidéo repliable ─────── */
.bandes{display:grid;gap:clamp(20px,2.6vw,34px);margin:6px 0 0}
.bgrp__t{display:flex;align-items:center;gap:14px;margin:0 0 12px;
  font-size:var(--t-pet);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris-clair);font-weight:700}
.bgrp__t b{color:var(--vert);font-weight:800;letter-spacing:.08em}
.bgrp__t::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.13)}
.bandes .bande__grp button{width:clamp(168px,20vw,280px);height:clamp(118px,14vw,190px)}
.bandes .bande__grp{gap:12px;padding-right:12px}

.vidrow{margin-top:clamp(34px,4.5vw,60px)}
.vidrow__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vidcard{position:relative;display:block;border:0;padding:0;cursor:pointer;
  border-radius:12px;overflow:hidden;background:var(--noir-3);aspect-ratio:16/9}
.vidcard img{width:100%;height:100%;object-fit:cover;opacity:.85;
  transition:transform .6s var(--ease),opacity .3s}
.vidcard:hover img,.vidcard:focus-visible img{transform:scale(1.06);opacity:1}
.vidcard__play{position:absolute;inset:0;display:grid;place-items:center}
.vidcard__play svg{width:48px;height:48px;padding:13px;color:#fff;
  background:rgba(11,12,10,.55);border:1px solid rgba(255,255,255,.35);border-radius:50%;
  transition:background .25s,color .25s,transform .25s}
.vidcard:hover .vidcard__play svg,.vidcard:focus-visible .vidcard__play svg{
  background:var(--vert);color:var(--noir);transform:scale(1.08)}
.vidcard__cap{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;text-align:left;
  color:var(--blanc);background:linear-gradient(transparent,rgba(21,24,20,.93))}
@media(max-width:880px){
  .vidrow__grid{gap:8px}
  .vidcard__play svg{width:34px;height:34px;padding:9px}
  .vidcard__cap{font-size:8.5px;letter-spacing:.07em;padding:14px 7px 6px}
}

.vfold{margin-top:clamp(26px,3.5vw,46px);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;background:var(--noir-3);overflow:hidden}
.vfold summary{list-style:none;display:flex;align-items:center;gap:16px;
  padding:18px 22px;cursor:pointer}
.vfold summary::-webkit-details-marker{display:none}
.vfold summary:hover .vfold__chev{color:var(--vert)}
.vfold__t{font-size:clamp(17px,2.2vw,24px);text-transform:uppercase}
.vfold__note{margin-left:auto;font-size:var(--t-pet);color:var(--vert);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.vfold__chev{width:22px;height:22px;flex:none;transition:transform .3s var(--ease)}
.vfold[open] .vfold__chev{transform:rotate(180deg)}
.vfold__p{padding:2px 22px 0;color:var(--gris-clair);max-width:72ch}
.vfold video{display:block;width:calc(100% - 44px);margin:16px 22px 22px;
  border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#000}
@media(max-width:640px){
  .vfold summary{padding:14px 16px;gap:10px}
  .vfold__note{display:none}
  .vfold__p{padding:2px 16px 0}
  .vfold video{width:calc(100% - 32px);margin:14px 16px 16px}
}

.vlb{position:fixed;inset:0;z-index:1100;background:rgba(10,12,9,.96);
  display:grid;place-items:center;visibility:hidden;opacity:0;
  transition:opacity .3s,visibility .3s;padding:clamp(16px,4vw,60px)}
.vlb.on{visibility:visible;opacity:1}
.vlb video{max-width:min(1100px,94vw);max-height:78vh;width:100%;
  border-radius:14px;border:1px solid rgba(255,255,255,.14);background:#000}
.vlb__x{position:absolute;top:22px;right:22px;border:0;background:rgba(255,255,255,.1);
  color:var(--blanc);width:52px;height:52px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:1.5rem;transition:background .25s}
.vlb__x:hover{background:var(--vert);color:var(--noir)}
.vlb__cap{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-size:var(--t-pet);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris-clair);text-align:center;width:90%}

/* mur de références : logos clients sur tuiles claires */
.logogrid{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.logogrid li{display:grid;place-items:center;background:#F2F3F0;border-radius:12px;
  padding:18px 20px;min-height:92px}
.logogrid img{max-width:100%;max-height:56px;object-fit:contain;display:block}
@media(max-width:640px){.logogrid{grid-template-columns:repeat(2,1fr);gap:9px}
  .logogrid li{min-height:74px;padding:12px}}
.logogrid__txt{font-family:'Anton',Impact,sans-serif;color:#20231F;font-size:17px;
  letter-spacing:.04em;text-transform:uppercase;text-align:center;line-height:1.2}
.logogrid__txt small{display:block;font-family:'Space Grotesk',sans-serif;font-size:9px;
  letter-spacing:.34em;color:#6b6f68;margin-top:3px;font-weight:700}

/* ══════════════════════════════════════════════════════════════════════════
   VERSION FINALE 08/08 — lumière, portfolio fini, devis guidé et carte
   ══════════════════════════════════════════════════════════════════════════ */
body{background:#f3f1eb}
.sec{background:#f5f4ef;color:var(--noir)}
.sec--alt,.sec--photos,.sec--img{background:
  radial-gradient(900px 440px at 92% 0,rgba(109,167,41,.10),transparent 64%),
  linear-gradient(180deg,#eef0e9,#f7f5f0)}
.sec--alt::after,.sec--img::after{background:linear-gradient(180deg,rgba(247,245,240,.84),rgba(247,245,240,.68))}
.secvid{opacity:.075;filter:grayscale(.25) contrast(.9)}
.sec::before{color:rgba(21,24,20,.045)}
.oblique{clip-path:none;margin-block:0;padding-block:clamp(76px,11vw,168px)}
.sec .shead p,.sec .videoplus p{color:#555d53}
.sec .btn--ghost{color:var(--noir);border-color:rgba(21,24,20,.25);background:rgba(255,255,255,.5)}
.sec .btn--ghost:hover{color:var(--vert-sombre);border-color:var(--vert);background:#fff}
.hero .btn--ghost{color:var(--blanc);border-color:rgba(255,255,255,.34);background:transparent}
.hero .btn--ghost:hover{color:var(--vert-vif);background:rgba(255,255,255,.08)}

/* Cartes claires : le vert reste l'accent de marque, le contenu respire. */
.metier,.machine,.pers,.lieu{background:rgba(255,255,255,.86);border-color:rgba(21,24,20,.10);
  box-shadow:0 18px 50px rgba(33,42,29,.055);color:var(--noir)}
@media(min-width:881px){.metier,.machine{background:rgba(255,255,255,.80);backdrop-filter:blur(16px)}}
.metier:hover,.metier:focus-visible,.machine:hover,.pers:hover{background:#fff;border-color:rgba(109,167,41,.45);
  box-shadow:0 24px 64px rgba(33,42,29,.11)}
.metier p,.machine p,.pers a{color:#626a60}
.machine .fmt{border-color:rgba(21,24,20,.10);color:#41483f}
.tabs button{background:#fff;border-color:rgba(21,24,20,.16);color:#485046}
.tabs button:hover:not([aria-selected="true"]){color:var(--noir)}
.tarifs{background:rgba(255,255,255,.72);padding:10px 22px;border-radius:0 0 14px 14px}
.tarifs div{border-color:rgba(21,24,20,.10)}
.tarifs dt{color:#41483f}
.sec .wa [style*="var(--gris-clair)"]{color:#555d53!important}
.merci{background:#e5ebdf;border-color:rgba(109,167,41,.25)}
.merci__txt{color:#394037}

/* Galeries sans boucle, sans doublon : navigation native, boutons et compteur. */
.bandes{gap:clamp(34px,5vw,68px);grid-template-columns:minmax(0,1fr);width:100%;min-width:0;overflow:hidden}
.bgrp{width:100%;min-width:0;max-width:100%;overflow:hidden}
.bgrp__head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}
.bgrp__t{margin:0;color:#343a32;min-width:0;flex:1}
.bgrp__t::after{background:rgba(21,24,20,.14)}
.bgrp__t small{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;
  background:#dfe7d8;color:var(--vert-sombre);font-size:.66rem;letter-spacing:0}
.bgrp__actions{display:flex;align-items:center;gap:7px;flex:none}
.bgrp__actions button{height:38px;min-width:38px;padding:0 11px;border-radius:999px;border:1px solid rgba(21,24,20,.16);
  background:#fff;color:var(--noir);cursor:pointer;font-weight:700;transition:.25s}
.bgrp__actions button:hover{border-color:var(--vert);color:var(--vert-sombre);transform:translateY(-1px)}
.bgrp__actions .bgrp__all{padding-inline:15px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.bande{overflow-x:auto;overflow-y:hidden;cursor:grab;touch-action:auto;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--vert) rgba(21,24,20,.08);
  -webkit-mask-image:none;mask-image:none;padding:0 var(--gout) 14px;scroll-padding-left:var(--gout)}
.bande:active{cursor:grabbing}
.bande__piste{animation:none!important;transform:none!important;width:max-content;will-change:auto}
.bandes .bande__grp{gap:14px;padding-right:var(--gout)}
.bandes .bande__grp button{width:clamp(230px,28vw,390px);height:clamp(168px,20vw,275px);
  border-radius:14px;scroll-snap-align:start;box-shadow:0 14px 32px rgba(21,24,20,.11)}
.bande__grp img{opacity:1}
.bande__grp span{opacity:1;transform:none;color:#fff;padding:48px 16px 14px}
.bande::-webkit-scrollbar{height:6px}.bande::-webkit-scrollbar-track{background:rgba(21,24,20,.08)}
.bande::-webkit-scrollbar-thumb{background:var(--vert);border-radius:999px}

/* Réalisations en mouvement et références. */
.vidrow .bgrp__t{color:#343a32}
.vfold{background:#fff;border-color:rgba(21,24,20,.12);box-shadow:0 16px 40px rgba(21,24,20,.06)}
.vfold__t{color:var(--noir)}.vfold__p{color:#555d53}.vfold__chev{color:var(--vert-sombre)}
.logogrid{grid-template-columns:repeat(5,1fr);gap:12px}
.logogrid li{background:#fff;border:1px solid rgba(21,24,20,.08);min-height:108px;
  box-shadow:0 14px 34px rgba(21,24,20,.05);transition:transform .28s var(--ease),box-shadow .28s}
.logogrid li:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(21,24,20,.10)}
.logogrid img{max-height:66px}

/* Devis guidé : deux étapes, familles rapides et aide contextuelle. */
.devis{background:rgba(255,255,255,.82);border:1px solid rgba(21,24,20,.10);border-radius:22px;
  padding:clamp(22px,4vw,52px);box-shadow:0 24px 70px rgba(21,24,20,.08)}
.devis__step{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.1rem,2vw,1.45rem);margin-bottom:18px;color:var(--noir)}
.devis__quicktitle{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:#677064;margin-bottom:10px}
.devis__quick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.devis__quick button{border:1px solid rgba(21,24,20,.15);background:#f4f5f1;color:#30362e;
  border-radius:999px;padding:8px 13px;cursor:pointer;font-size:.76rem;font-weight:700;transition:.22s}
.devis__quick button:hover,.devis__quick button.on{background:var(--vert);border-color:var(--vert);color:var(--noir)}
.devis__aide{margin:-6px 0 20px;padding:12px 14px;border-left:3px solid var(--vert);
  background:#eef2e9;color:#525b4f;font-size:.8rem;line-height:1.55}
.champ label{color:#525a50}
.champ input,.champ select,.champ textarea{background:#fff;border-color:rgba(21,24,20,.16);color:var(--noir)}
.champ input::placeholder,.champ textarea::placeholder{color:#858b82}
.rgpd,.invite{color:#687066}
.connecte{color:var(--noir)}.connecte a{color:var(--vert-sombre);border-color:rgba(76,122,23,.3)}
.panneau__actions{display:grid;gap:10px;margin-top:32px}.panneau .panneau__actions .btn{position:static;margin:0;box-shadow:none}
.btn--soft{background:rgba(255,255,255,.08);color:var(--blanc);border:1px solid rgba(255,255,255,.20)}
.btn--soft:hover{background:rgba(255,255,255,.14);color:var(--vert-vif)}

/* Carte : adresse visible immédiatement, itinéraire dans Google Maps. */
.mapcard{margin-top:18px;border-radius:20px;overflow:hidden;background:#fff;border:1px solid rgba(21,24,20,.10);
  box-shadow:0 22px 60px rgba(21,24,20,.08)}
.mapcard iframe{width:100%;height:clamp(320px,42vw,500px);border:0;display:block;filter:saturate(.8) contrast(.96)}
.mapcard__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px}
.mapcard__foot div{display:grid;gap:3px}.mapcard__foot strong{font-size:.9rem}.mapcard__foot span{font-size:.76rem;color:#666e63}

@media(max-width:880px){
  .sec{padding-block:72px}.oblique{padding-block:72px}
  .bgrp__head{align-items:flex-end}.bgrp__actions>button:not(.bgrp__all){display:none}
  .bgrp__actions .bgrp__all{font-size:.6rem;padding-inline:11px}
  .bgrp__t{gap:8px;font-size:.67rem;letter-spacing:.13em}.bgrp__t::after{display:none}
  .bande{padding-left:20px;scroll-padding-left:20px}.bandes .bande__grp{padding-right:20px}
  .bandes .bande__grp button{width:min(78vw,310px);height:clamp(188px,55vw,230px)}
  .vidrow__grid{grid-template-columns:1fr;gap:10px}.vidcard__cap{font-size:.65rem;padding:34px 12px 10px}
  .logogrid{grid-template-columns:repeat(2,1fr)}
  .devis{padding:20px;gap:30px}.champ--2{grid-template-columns:1fr;gap:0}
  .mapcard__foot{align-items:flex-start;flex-direction:column}.mapcard__foot .btn{width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   V2 — ATELIER EN MOUVEMENT
   Direction sombre, vidéos assumées, textes cadrés et produits incarnés.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --v2-fond:#090c08;
  --v2-fond-2:#0e130c;
  --v2-carte:rgba(14,19,12,.88);
  --v2-carte-forte:rgba(8,12,7,.94);
  --v2-bord:rgba(255,255,255,.13);
  --v2-ombre:0 28px 80px rgba(0,0,0,.34);
}

body{background:var(--v2-fond);color:var(--blanc)}
main{background:
  radial-gradient(1100px 720px at 110% 8%,rgba(109,167,41,.10),transparent 68%),
  radial-gradient(900px 680px at -10% 54%,rgba(139,203,51,.055),transparent 65%),
  var(--v2-fond)}

/* Le film redevient une vraie matière visuelle, sans compromettre la lecture. */
.hero__vid{opacity:.78;filter:saturate(1.16) contrast(1.08) brightness(.76);transform:scale(1.015)}
.hero::after{background:
  linear-gradient(90deg,rgba(5,8,5,.84) 0%,rgba(5,8,5,.48) 48%,rgba(5,8,5,.15) 78%),
  linear-gradient(180deg,rgba(5,8,5,.72) 0%,rgba(5,8,5,.08) 44%,rgba(5,8,5,.94) 100%)}
.hero__copy{position:relative;width:min(940px,100%);padding:clamp(24px,4.8vw,64px);
  background:linear-gradient(135deg,rgba(7,10,6,.90),rgba(13,18,11,.68));
  border:1px solid rgba(255,255,255,.16);border-left:4px solid var(--vert);
  border-radius:4px 26px 26px 4px;box-shadow:0 38px 110px rgba(0,0,0,.44);
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);overflow:hidden}
.hero__copy::after{content:'';position:absolute;right:-90px;bottom:-120px;width:310px;height:310px;
  border:1px solid rgba(139,203,51,.20);border-radius:50%;box-shadow:0 0 0 38px rgba(109,167,41,.035);
  pointer-events:none}
.hero h1{font-size:clamp(3.4rem,9.2vw,8.8rem);margin-bottom:24px;text-wrap:balance}
.hero__lead{color:#e2e6dd;max-width:55ch}
.hero__foot{padding:24px clamp(20px,3vw,36px);border:1px solid rgba(255,255,255,.13);
  border-left:4px solid rgba(109,167,41,.72);border-radius:4px 18px 18px 4px;
  background:rgba(7,10,6,.70);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* Les sections se fondent dans un même plateau sombre et continu. */
.sec,.sec--alt,.sec--photos,.sec--img{color:var(--blanc);background:
  radial-gradient(950px 500px at 92% 0,rgba(109,167,41,.075),transparent 67%),
  linear-gradient(180deg,#0d110c 0%,#090c08 100%)}
.sec{border-top:1px solid rgba(255,255,255,.055)}
.sec:nth-of-type(even){background:
  radial-gradient(900px 620px at -8% 20%,rgba(109,167,41,.07),transparent 66%),
  linear-gradient(180deg,#090c08 0%,#10140e 48%,#090c08 100%)}
.oblique{clip-path:none;margin-block:0;padding-block:clamp(84px,11vw,168px)}
.sec::before{color:rgba(255,255,255,.045);z-index:2}
.sec > .wrap{z-index:3}
.secvid{opacity:.56;filter:saturate(1.2) contrast(1.08) brightness(.62);transform:scale(1.012)}
.sec--alt::after,.sec--img::after,#machines::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,10,6,.82),rgba(7,10,6,.38) 56%,rgba(7,10,6,.60)),
    linear-gradient(180deg,rgba(7,10,6,.83),rgba(7,10,6,.18) 34%,rgba(7,10,6,.34) 70%,rgba(7,10,6,.90))}

/* Le texte est posé dans des cadres, le mouvement reste lisible derrière. */
.shead{position:relative;width:min(760px,100%);max-width:none;padding:clamp(22px,3.5vw,42px);
  margin-bottom:clamp(34px,5vw,70px);border:1px solid var(--v2-bord);border-left:4px solid var(--vert);
  border-radius:3px 20px 20px 3px;background:linear-gradient(135deg,var(--v2-carte-forte),rgba(16,22,13,.70));
  box-shadow:var(--v2-ombre);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.shead h2{color:var(--blanc);text-wrap:balance}
.sec .shead p,.sec .videoplus p{color:#cbd2c6}
.shead .eyebrow{margin-bottom:18px}

.sec .btn--ghost{color:var(--blanc);border-color:rgba(255,255,255,.28);background:rgba(7,10,6,.55)}
.sec .btn--ghost:hover{color:var(--vert-vif);border-color:var(--vert);background:rgba(7,10,6,.86)}

/* Cartes métiers : une réalisation réelle introduit chaque famille achetable. */
.metiers{gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.metier{--media-h:clamp(170px,16vw,230px);padding:0;gap:0;min-height:430px;
  background:linear-gradient(180deg,rgba(17,23,14,.94),rgba(8,12,7,.97));
  border-color:var(--v2-bord);box-shadow:0 20px 54px rgba(0,0,0,.28);
  backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
  transition:transform .24s var(--ease),border-color .2s,box-shadow .24s var(--ease)}
.metier__media{display:block;width:100%;height:var(--media-h);overflow:hidden;background:#11170e;position:relative}
.metier__media::after{content:'';position:absolute;inset:0;background:
  linear-gradient(180deg,transparent 35%,rgba(8,12,7,.76) 100%),
  linear-gradient(90deg,rgba(109,167,41,.12),transparent 50%)}
.metier__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.04);
  transition:transform .42s var(--ease),filter .28s}
.metier__ico{position:relative;z-index:2;width:54px;height:54px;margin:-27px 24px 0;padding:12px;
  color:var(--vert-vif);background:#11170e;border:1px solid rgba(139,203,51,.54);border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.32)}
.metier h3,.metier p,.metier__go{margin-inline:24px}
.metier h3{margin-top:17px;color:var(--blanc)}
.metier p{margin-top:10px;color:#aeb7aa}
.metier__go{margin-top:19px;margin-bottom:24px;color:var(--vert-vif)}
.metier::after{height:4px}
.metier:hover,.metier:focus-visible{transform:translateY(-7px);background:linear-gradient(180deg,#151d11,#0a0e08);
  border-color:rgba(139,203,51,.58);box-shadow:0 32px 78px rgba(0,0,0,.40)}
.metier:hover .metier__media img,.metier:focus-visible .metier__media img{transform:scale(1.055);filter:saturate(1.1) contrast(1.08)}
.metier:hover .metier__ico{transform:translateY(-3px)}

/* Machines et tarifs gardent la même profondeur que les cartes produits. */
.machine,.pers,.lieu{color:var(--blanc);background:linear-gradient(180deg,rgba(17,23,14,.92),rgba(9,13,8,.96));
  border-color:var(--v2-bord);box-shadow:0 20px 52px rgba(0,0,0,.25)}
@media(min-width:881px){.machine{background:linear-gradient(180deg,rgba(17,23,14,.84),rgba(9,13,8,.91));
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}}
.machine:hover,.pers:hover{background:linear-gradient(180deg,#172013,#0b1009);border-color:rgba(139,203,51,.42);
  box-shadow:0 28px 66px rgba(0,0,0,.34)}
.machine p,.pers a{color:#aeb7aa}.machine .fmt{border-color:rgba(255,255,255,.10);color:#d2d8ce}
.tabs button{background:rgba(8,12,7,.78);border-color:rgba(255,255,255,.18);color:#c9d0c4}
.tabs button:hover:not([aria-selected="true"]){color:var(--blanc);background:rgba(17,23,14,.94)}
.wa>div,.tarifs{padding:clamp(24px,3.2vw,42px);border:1px solid var(--v2-bord);border-top:3px solid var(--vert);
  border-radius:4px 18px 18px 18px;background:var(--v2-carte);box-shadow:var(--v2-ombre);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.tarifs{border-top-width:3px}.tarifs div{border-color:rgba(255,255,255,.10)}.tarifs dt{color:#d3d9ce}
.sec .wa [style*="var(--gris-clair)"]{color:#cbd2c6!important}

/* Galerie : les photos restent intactes, leur environnement rejoint la V2. */
.bgrp__t,.vidrow .bgrp__t{color:#e3e7df}.bgrp__t::after{background:rgba(255,255,255,.16)}
.bgrp__t small{background:rgba(109,167,41,.16);color:var(--vert-vif);border:1px solid rgba(109,167,41,.32)}
.bgrp__actions button{background:#11170e;color:var(--blanc);border-color:rgba(255,255,255,.16)}
.bgrp__actions button:hover{background:#182113;color:var(--vert-vif);border-color:var(--vert)}
.bande::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
.bandes .bande__grp button{box-shadow:0 18px 44px rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.07)}
.vfold{background:rgba(12,17,10,.93);border-color:var(--v2-bord);box-shadow:0 22px 58px rgba(0,0,0,.30)}
.vfold__t{color:var(--blanc)}.vfold__p{color:#b4bcb0}.vfold__chev{color:var(--vert-vif)}

/* Logos : véritables fichiers de marque, jamais des photos de façade recadrées. */
.logogrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.logogrid li{position:relative;min-height:126px;padding:24px 22px;overflow:hidden;
  background:linear-gradient(145deg,#f8f8f4,#e9ece5);border:1px solid rgba(255,255,255,.14);
  border-radius:15px;box-shadow:0 18px 44px rgba(0,0,0,.24),inset 0 1px 0 #fff;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .2s}
.logogrid li::after{content:'';position:absolute;inset:auto 0 0;height:3px;background:var(--vert);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.logogrid li:hover{transform:translateY(-5px);border-color:rgba(139,203,51,.58);
  box-shadow:0 28px 58px rgba(0,0,0,.34),inset 0 1px 0 #fff}
.logogrid li:hover::after{transform:scaleX(1)}
.logogrid li.logo--dark{background:linear-gradient(145deg,#171c16,#080b08);box-shadow:0 18px 44px rgba(0,0,0,.34)}
.logogrid img{max-width:90%;max-height:72px;object-fit:contain}

/* Équipe, devis et contact : panneaux denses, mais champs immédiatement lisibles. */
.merci{background:linear-gradient(135deg,rgba(18,25,14,.96),rgba(9,13,8,.96));
  border-color:rgba(109,167,41,.30);box-shadow:var(--v2-ombre)}
.merci__txt{color:#cbd2c6}
.devis{background:linear-gradient(135deg,rgba(14,20,11,.96),rgba(8,12,7,.97));
  border-color:var(--v2-bord);box-shadow:var(--v2-ombre)}
.devis__step{color:var(--blanc)}.devis__quicktitle,.champ label{color:#aeb7aa}
.devis__quick button{background:#131a10;color:#dce1d8;border-color:rgba(255,255,255,.14)}
.devis__quick button:hover,.devis__quick button.on{background:var(--vert);border-color:var(--vert);color:var(--noir)}
.devis__aide{background:rgba(109,167,41,.10);color:#c6cec1;border-color:var(--vert)}
.champ input,.champ select,.champ textarea{background:#0b1009;border-color:rgba(255,255,255,.15);color:var(--blanc)}
.champ input::placeholder,.champ textarea::placeholder{color:#737d70}
.rgpd,.invite{color:#909a8d}.connecte{color:var(--blanc)}.connecte a{color:var(--vert-vif)}
.mapcard{background:#0d120b;border-color:var(--v2-bord);box-shadow:var(--v2-ombre)}
.mapcard iframe{filter:saturate(.86) contrast(1.02) brightness(.88)}
.mapcard__foot strong{color:var(--blanc)}.mapcard__foot span{color:#aeb7aa}

/* Mouvement court et intentionnel : opacité + transformation uniquement. */
.reveal{transform:translateY(22px);transition:opacity .42s var(--ease),transform .42s var(--ease)}
.reveal[data-d="1"]{transition-delay:.055s}.reveal[data-d="2"]{transition-delay:.11s}.reveal[data-d="3"]{transition-delay:.165s}
.btn{transition:background .18s,color .18s,transform .18s var(--ease),border-color .18s}
.btn:active,.metier:active,.bgrp__actions button:active{transform:scale(.98)}

@media(max-width:1100px){
  .metiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logogrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:880px){
  .sec,.oblique{padding-block:76px}
  .hero__vid{opacity:.72;filter:saturate(1.1) contrast(1.06) brightness(.66)}
  .hero::after{background:linear-gradient(180deg,rgba(5,8,5,.75),rgba(5,8,5,.20) 36%,rgba(5,8,5,.94) 100%)}
  .hero__copy{padding:24px 20px;border-radius:3px 18px 18px 3px;background:rgba(7,10,6,.82)}
  .hero h1{font-size:clamp(3.2rem,17vw,6.2rem)}
  .hero__foot{padding:20px;margin-top:22px}
  .secvid{opacity:.50;filter:saturate(1.1) contrast(1.05) brightness(.56)}
  .shead{padding:22px 20px;border-radius:3px 16px 16px 3px}
  .metiers{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .metier{--media-h:150px;min-height:365px;border-radius:14px}
  .metier p{display:block}.metier h3,.metier p,.metier__go{margin-inline:18px}
  .metier__ico{width:48px;height:48px;margin:-24px 18px 0;padding:10px}
  .metier h3{font-size:1.18rem}.metier__go{margin-bottom:19px}
  .logogrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .logogrid li{min-height:96px;padding:17px 14px}.logogrid img{max-height:56px}
  .devis{padding:20px}
}
@media(max-width:600px){
  .metiers{grid-template-columns:1fr}
  .metier{--media-h:190px;min-height:410px}.metier:last-child{grid-column:auto}
  .hero__copy::after{display:none}
  .hero__foot{grid-template-columns:1fr 1fr}
}

/* ── Mur de références cliquable (18/08) ───────────────────────────────── */
.logogrid a{display:grid;place-items:center;width:100%;height:100%;
  border-radius:8px;transition:transform .22s var(--ease)}
.logogrid a:hover img{transform:scale(1.04)}
.logogrid img{transition:transform .22s var(--ease)}
.logogrid a:focus-visible{outline:3px solid var(--vert-vif);outline-offset:4px}

/* ══════════════════════════════════════════════════════════════════════════
   HERO v3 (18/08) — fond neutre travaillé, texte compact à gauche,
   vidéo des réalisations encadrée à droite, rien devant elle.
   ══════════════════════════════════════════════════════════════════════════ */
.hero{min-height:auto;display:block;padding:clamp(96px,11vh,150px) 0 clamp(40px,6vh,72px);
  background:#0E120D;overflow:hidden}
.hero::after{content:none}
.hero__fond{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% 34%, rgba(139,203,51,.16), transparent 62%),
    radial-gradient(760px 520px at 8% 88%, rgba(109,167,41,.10), transparent 66%),
    linear-gradient(160deg,#10150F 0%,#0B0E0A 58%,#0E120D 100%)}
.hero__fond::before{content:'';position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(1200px 700px at 50% 40%,#000,transparent 78%);
          mask-image:radial-gradient(1200px 700px at 50% 40%,#000,transparent 78%)}
.hero__in{position:relative;z-index:2;display:grid;gap:clamp(26px,4vw,58px);align-items:center;
  grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr)}
.hero__copy{width:auto;padding:0;background:none;border:none;box-shadow:none;backdrop-filter:none}
.hero__copy::after{content:none}
.hero h1{font-size:clamp(1.85rem,3.15vw,3.05rem);line-height:1.02;margin-bottom:18px;letter-spacing:.005em}
.hero h1 em{display:block}
.hero .eyebrow{margin-bottom:14px}
.hero__lead{font-size:clamp(.94rem,1.06vw,1.06rem);line-height:1.62;max-width:46ch;color:#D6DBD0}
.hero .actions{margin-top:26px}

/* L'écran : cadre net, rien par-dessus, non cliquable */
.hero__ecran{position:relative;margin:0;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);background:#000;
  box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 0 1px rgba(139,203,51,.16),
             0 0 90px rgba(139,203,51,.10)}
.hero__ecran::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.hero__vid{position:static;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  display:block;opacity:1;filter:none;transform:none;pointer-events:none}
.hero__ecran-lg{position:absolute;left:14px;bottom:12px;z-index:3;
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:#EAF0E4;background:rgba(12,15,11,.62);
  padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}

.hero__foot{margin-top:clamp(30px,4.6vh,54px)}

@media(max-width:980px){
  .hero{padding-top:clamp(80px,10vh,120px)}
  .hero__in{grid-template-columns:1fr}
  .hero__lead{max-width:60ch}
  .hero h1{font-size:clamp(1.7rem,6.4vw,2.5rem)}
}
.hero__bas{position:relative;z-index:2}
.hero__foot{display:flex;flex-wrap:nowrap;gap:clamp(14px,2.6vw,42px);align-items:stretch}
.hero__foot .stat{flex:1 1 0;min-width:0}
@media(max-width:700px){.hero__foot{flex-wrap:wrap}.hero__foot .stat{flex:1 1 42%}}

/* ══════════════════════════════════════════════════════════════════════════
   ARTIP WEB — l'offre site internet (18/08). Aucun prix affiché : le
   parcours se termine par une demande, le chiffrage se fait au rendez-vous.
   ══════════════════════════════════════════════════════════════════════════ */
.sec--web{background:linear-gradient(165deg,#10150F 0%,#0C100B 62%,#0E120D 100%);color:var(--blanc);
  position:relative;overflow:hidden}
.sec--web::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 520px at 82% 12%,rgba(139,203,51,.15),transparent 64%)}
.sec--web .wrap{position:relative;z-index:1}
.sec--web h2,.sec--web h3{color:var(--blanc)}
.sec--web .shead p{color:#D2D8CB;max-width:62ch}
.web__badge{display:inline-block;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:#0E120D;background:var(--vert-vif);
  padding:6px 14px;border-radius:999px;margin-bottom:16px}
.web__inct{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1rem,1.7vw,1.3rem);margin:clamp(30px,4vw,46px) 0 18px}
.web__pack{list-style:none;margin:0 0 clamp(34px,5vw,56px);padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.web__pack li{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  border-radius:14px;padding:16px 18px;display:grid;gap:5px;align-content:start}
.web__pack li b{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.03em;
  font-size:.98rem;color:var(--vert-vif)}
.web__pack li span{font-size:.86rem;line-height:1.5;color:#C9D0C2}
.webform{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:22px;
  padding:clamp(22px,4vw,46px);box-shadow:0 26px 70px rgba(0,0,0,.34)}
.webform__p{color:#C9D0C2;margin-bottom:22px;max-width:56ch}
.webform__grille{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.webform .champ{display:grid;gap:6px;margin:0 0 14px}
.webform label{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#AFB8A7}
.webform input[type=text],.webform input[type=email],.webform input[type=tel],
.webform select,.webform textarea{width:100%;background:rgba(0,0,0,.32);color:var(--blanc);
  border:1px solid rgba(255,255,255,.16);border-radius:11px;padding:12px 14px;font:inherit;font-size:.95rem}
.webform select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8BCB33 50%),
  linear-gradient(135deg,#8BCB33 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.webform :is(input,select,textarea):focus-visible{outline:3px solid var(--vert-vif);outline-offset:2px;
  border-color:transparent}
.web__deja{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;margin:4px 0 16px}
.web__deja legend{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#AFB8A7;padding:0 8px}
.web__deja label{display:inline-flex;align-items:center;gap:9px;margin:6px 18px 6px 0;
  letter-spacing:normal;text-transform:none;font-size:.9rem;font-weight:400;color:#DDE3D6;cursor:pointer}
.web__deja input{width:19px;height:19px;accent-color:var(--vert-vif);cursor:pointer}
.webform .etat{margin-top:14px;font-size:.92rem;min-height:1.2em}
.webform .rgpd{margin-top:12px;font-size:.76rem;line-height:1.5;color:#98A091}
.webform .pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media(max-width:640px){.web__pack{grid-template-columns:1fr}}
.nav__web{color:var(--vert-vif)!important;font-weight:700}
.nav__web::after{content:'•';margin-left:5px;color:var(--vert-vif);font-size:.8em;vertical-align:top}
/* Devis : matériaux et support */
.mat{border:1px solid rgba(21,24,20,.16);border-radius:14px;padding:14px 16px;margin:0 0 16px}
.mat legend{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#5d6459;padding:0 8px}
.mat__grille{display:grid;gap:8px 14px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.mat__grille label{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:#20231F;cursor:pointer}
.mat__grille input{width:18px;height:18px;accent-color:var(--vert);cursor:pointer;flex:none}
.mat__aide{margin-top:10px;font-size:.78rem;color:#6b6f68;line-height:1.5}

/* ── Correctifs de contraste (18/08, outil bloquant) ───────────────────────
   Le panneau de devis est en thème sombre : les matériaux héritent du blanc.
   Le badge « Nouveau » était écrasé par `.sec--web .shead p`. */
.mat{border-color:rgba(255,255,255,.16)}
.mat legend{color:#AFB8A7}
.mat__grille label{color:#E4E9DD}
.mat__grille label span{color:inherit}
.mat__aide{color:#AFB8A7}
.sec--web .shead p.web__badge{color:#0E120D}

/* ══════════════════════════════════════════════════════════════════════════
   19/08 — GALERIE CLÉ USB, sections propres, hero vidéo verticale.
   ══════════════════════════════════════════════════════════════════════════ */

/* Fonds de section nets : fini les dégradés qui bavent entre 01 et 02. */
.sec--photos{background:#0E120D;color:var(--blanc)}
.sec--photos .shead h2{color:var(--blanc)}
.sec--photos .shead p{color:#C9D0C2}
.sec--alt{background:#f5f4ef}
.sec--img{background:#0E120D}

/* La vidéo du hero : écran large 16/9, à droite, élargi le 19/08. */
.hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;
  gap:clamp(24px,3.4vw,52px)}
.hero__ecran{width:100%;max-width:820px;justify-self:end;margin-right:0}
.hero__vid{aspect-ratio:16/9;height:auto;object-fit:cover}
@media(max-width:1180px){.hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:980px){.hero__in{grid-template-columns:1fr}
  .hero__ecran{width:100%;max-width:none;justify-self:stretch;margin-right:0}}

/* Puces de familles */
.gal__chips{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 26px}
.galchip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);color:#DDE3D6;text-decoration:none;
  font-family:'Space Grotesk',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.05em;
  transition:border-color .2s,color .2s,background .2s}
.galchip b{font-weight:700;color:#0E120D;background:var(--vert-vif);border-radius:999px;
  padding:1px 8px;font-size:.74rem}
.galchip:hover,.galchip.on{border-color:var(--vert-vif);color:var(--vert-vif);background:rgba(139,203,51,.07)}
.galchip:focus-visible{outline:3px solid var(--vert-vif);outline-offset:2px}

/* Un bloc par famille — comme les dossiers de la clé */
.galcat{margin-bottom:clamp(34px,5vw,58px);scroll-margin-top:110px}
.galcat__head{display:flex;align-items:baseline;gap:16px;margin-bottom:14px}
.galcat__head h3{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1.15rem,2.1vw,1.6rem);color:var(--blanc)}
.galcat__head h3 b{color:var(--vert-vif);margin-right:12px;font-size:.82em}
.galcat__head p{color:#9BA396;font-size:.85rem;font-family:'Space Grotesk',sans-serif;font-weight:700}
.galgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.galgrid button{position:relative;display:block;padding:0;margin:0;border:0;cursor:zoom-in;
  border-radius:11px;overflow:hidden;background:#161A15;aspect-ratio:4/3}
.galgrid img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s var(--ease)}
.galgrid button:hover img{transform:scale(1.045)}
.galgrid button:focus-visible{outline:3px solid var(--vert-vif);outline-offset:2px}
.galgrid span{position:absolute;left:0;right:0;bottom:0;padding:20px 10px 8px;
  font-family:'Space Grotesk',sans-serif;font-size:.72rem;font-weight:700;color:#EAF0E4;
  background:linear-gradient(transparent,rgba(10,12,9,.86));text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.galgrid{grid-template-columns:repeat(2,1fr);gap:7px}
  .galcat{scroll-margin-top:84px}}

/* La rangée vidéo qui reste dans le bloc 1, sur fond sombre */
.sec--photos .vidrow .bgrp__t{color:var(--blanc)}
.hero__ecran-lg{max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.secvid{max-width:100%}

/* ══════════════════════════════════════════════════════════════════════════
   RÉALISATIONS — grille filtrée + « je veux la même chose » (19/08/2026)
   Une seule grille, une famille à la fois. Chaque photo peut être mise dans
   une sélection qui part chez ARTIP par e-mail, pièces jointes comprises.
   ══════════════════════════════════════════════════════════════════════════ */

/* la barre de familles devient une vraie commande, pas une ancre */
.gal__chips{margin:6px 0 22px}
.galchip{background:transparent;cursor:pointer;font:inherit;font-family:'Space Grotesk',sans-serif;
  font-size:.82rem;font-weight:700;letter-spacing:.05em;line-height:1}
.galchip[aria-pressed="true"]{border-color:var(--vert-vif);color:#0E120D;background:var(--vert-vif)}
.galchip[aria-pressed="true"] b{background:#0E120D;color:var(--vert-vif)}

.galgrid{grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:14px}

.galcard{position:relative;margin:0;display:flex;flex-direction:column;
  background:#161A15;border:1px solid rgba(255,255,255,.08);border-radius:13px;overflow:hidden;
  transition:border-color .22s,box-shadow .22s,transform .22s}
.galcard:hover{border-color:rgba(139,203,51,.42);transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.42)}
.galgrid .galcard__zoom{position:relative;aspect-ratio:4/3;border-radius:0;width:100%;
  background:#101410;cursor:zoom-in}
.galcard figcaption{padding:9px 12px 8px;font-family:'Space Grotesk',sans-serif;font-size:.76rem;
  font-weight:700;color:#D7DDD0;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.galgrid .galcard__pick{position:static;display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;aspect-ratio:auto;border-radius:0;border-top:1px solid rgba(255,255,255,.09);
  padding:10px 10px;cursor:pointer;background:rgba(139,203,51,.10);color:var(--vert-vif);
  font-family:'Space Grotesk',sans-serif;font-size:.73rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;transition:background .2s,color .2s}
.galcard__pick svg{width:14px;height:14px;flex:none;transition:transform .25s}
.galcard__pick span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.galgrid .galcard__pick:hover{background:var(--vert-vif);color:#0E120D}
.galcard.is-pris{border-color:var(--vert-vif);box-shadow:0 0 0 1px var(--vert-vif) inset}
.galcard.is-pris .galcard__pick{background:var(--vert-vif);color:#0E120D}
.galcard.is-pris .galcard__pick svg{transform:rotate(45deg)}

.galplus{display:flex;justify-content:center;margin-top:26px}
.galplus .btn b{margin-left:10px;font-family:'Space Grotesk',sans-serif;font-size:.76rem;opacity:.72}
.galfin{margin-top:22px;text-align:center;color:#9BA396;font-size:.84rem;
  font-family:'Space Grotesk',sans-serif;font-weight:700}

@media(max-width:640px){
  .galgrid{grid-template-columns:repeat(2,1fr);gap:9px}
  .galcard figcaption{font-size:.7rem;padding:7px 9px 6px}
  .galgrid .galcard__pick{font-size:.62rem;padding:8px 6px;letter-spacing:.02em}
}

/* ── LE TERMINAL DE SÉLECTION ────────────────────────────────────────── */
.selbar[hidden],.selpan[hidden]{display:none}
.selbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;
  display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border:0;
  border-radius:999px;cursor:pointer;background:var(--vert-vif);color:#0E120D;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.86rem;letter-spacing:.03em;
  box-shadow:0 18px 44px rgba(0,0,0,.44),0 0 0 1px rgba(255,255,255,.14)}
.selbar__n{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;
  padding:0 7px;border-radius:999px;background:#0E120D;color:var(--vert-vif);font-size:.82rem}
.selbar__go{padding-left:12px;border-left:1px solid rgba(14,18,13,.28);text-transform:uppercase;
  font-size:.74rem}
.selbar:hover{background:#9AD93C}
.selbar:focus-visible{outline:3px solid #0E120D;outline-offset:3px}
.selbar.pulse{animation:selpulse .9s ease}
@keyframes selpulse{0%{transform:translateX(-50%) scale(1)}
  35%{transform:translateX(-50%) scale(1.07)}100%{transform:translateX(-50%) scale(1)}}

.selpan{position:fixed;inset:0;z-index:80;background:rgba(6,9,6,.72);backdrop-filter:blur(5px);
  display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .26s}
.selpan.on{opacity:1}
.selpan__in{width:min(760px,100%);max-height:92vh;overflow:auto;background:#12160F;color:var(--blanc);
  border:1px solid rgba(255,255,255,.12);border-radius:20px 20px 0 0;
  padding:clamp(18px,3vw,30px);transform:translateY(24px);transition:transform .26s var(--ease)}
.selpan.on .selpan__in{transform:none}
.selpan__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.selpan__head h3{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1.3rem,3vw,1.9rem)}
.selpan__x{border:0;background:transparent;color:#C9D0C1;font-size:2rem;line-height:1;cursor:pointer;
  padding:0 4px}
.selpan__x:hover{color:var(--vert-vif)}
.selpan__intro{color:#AEB6A5;font-size:.9rem;line-height:1.55;margin-bottom:16px;max-width:58ch}

.selpan__refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;
  margin-bottom:20px}
.selref{position:relative;margin:0;background:#191E17;border:1px solid rgba(255,255,255,.09);
  border-radius:11px;overflow:hidden}
.selref img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.selref figcaption{padding:7px 9px 8px;font-family:'Space Grotesk',sans-serif;font-size:.7rem;
  font-weight:700;color:#DDE3D6;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selref figcaption small{display:block;color:#8E9787;font-size:.64rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.selref__x{position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;border-radius:999px;
  background:rgba(8,11,7,.78);color:#F2F5EE;font-size:1.05rem;line-height:1;cursor:pointer}
.selref__x:hover{background:#C4442E}
.selvide{grid-column:1/-1;color:#8E9787;font-size:.86rem;line-height:1.5;
  border:1px dashed rgba(255,255,255,.16);border-radius:12px;padding:16px}

.selform__ligne{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.selform .champ{margin:0 0 12px}
.selform label{display:block;margin-bottom:5px;font-family:'Space Grotesk',sans-serif;
  font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#AEB6A5}
.selform input,.selform select,.selform textarea{width:100%;padding:11px 13px;border-radius:9px;
  border:1px solid rgba(255,255,255,.16);background:#0D110C;color:var(--blanc);
  font-family:'Space Grotesk',sans-serif;font-size:.92rem}
.selform input:focus,.selform select:focus,.selform textarea:focus{outline:none;
  border-color:var(--vert-vif);box-shadow:0 0 0 3px rgba(139,203,51,.18)}
.selform input[type=file]{padding:9px;background:#141911;cursor:pointer}
.selform__aide{display:block;margin-top:5px;color:#8E9787;font-size:.72rem;
  font-family:'Space Grotesk',sans-serif}
.selform__pied{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.selform__etat{margin-top:12px;font-family:'Space Grotesk',sans-serif;font-size:.86rem;font-weight:700;
  min-height:1.2em}
.selform__etat.ok{color:var(--vert-vif)}
.selform__etat.err{color:#FF8A6B}

@media(max-width:620px){
  .selform__ligne{grid-template-columns:1fr}
  .selpan__in{max-height:96vh;border-radius:16px 16px 0 0}
  .selbar{left:12px;right:12px;bottom:12px;transform:none;justify-content:center}
  .selbar.pulse{animation:none}
}
@media(prefers-reduced-motion:reduce){
  .selpan,.selpan__in,.galcard{transition:none}
  .selbar.pulse{animation:none}
}

/* rappel de la sélection, en tête du formulaire de devis */
.selrappel{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:26px;
  padding:14px 16px;border:1px solid rgba(139,203,51,.34);border-radius:14px;
  background:rgba(139,203,51,.07)}
.selrappel__vues{display:flex;align-items:center;gap:-6px}
.selrappel__vues img{width:46px;height:46px;object-fit:cover;border-radius:8px;
  border:2px solid #12160F;margin-right:-10px}
.selrappel__vues span{margin-left:16px;font-family:'Space Grotesk',sans-serif;font-size:.78rem;
  font-weight:700;color:var(--vert-vif)}
.selrappel p{flex:1 1 220px;margin:0;font-family:'Space Grotesk',sans-serif;font-size:.9rem;
  font-weight:700}
.selrappel p b{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  margin-left:8px;padding:0 7px;border-radius:999px;background:var(--vert-vif);color:#0E120D;
  font-size:.8rem}
@media(max-width:620px){.selrappel{gap:10px;padding:12px}.selrappel .btn{width:100%}}

/* ══════════════════════════════════════════════════════════════════════════
   JONCTIONS DE SECTIONS — correctif du 20/08/2026
   Les vidéos de fond portent transform:scale(1.012) : sur une section de
   2 000 px, elles dépassaient de 11 px en haut et 12 px en bas (mesuré sur
   #metiers : section 3279→5258, vidéo 3268→5270). Ce débord se peignait
   par-dessus la section précédente — d'où les liserés où l'on voyait la
   vidéo passer entre deux sections. On borne le débord à la section.
   ══════════════════════════════════════════════════════════════════════════ */
.sec{overflow:hidden}
@supports (overflow:clip){.sec{overflow:clip}}   /* garde sticky et ancres intactes */

/* Le plateau sombre est censé être continu : le filet blanc entre deux
   sections dessinait justement la séparation qu'on ne veut pas voir. */
.sec{border-top:0}

/* Le lien du site actuel, dans la demande de site internet */
.champ--site input{font-family:'Space Grotesk',sans-serif}
.champ__aide{display:block;margin-top:6px;font-family:'Space Grotesk',sans-serif;
  font-size:.75rem;line-height:1.45;color:#8E9787}

/* Avis Google vérifiés le 24/08/2026 : bandeau défilant + un seul CTA. */
.avis{margin-top:clamp(42px,7vw,78px);padding-top:clamp(28px,4vw,44px);
  border-top:1px solid rgba(14,18,13,.14)}
.avis__head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  flex-wrap:wrap;margin-bottom:24px}
.avis__label{font-family:'Space Grotesk',sans-serif;font-size:.72rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#5B6457;margin-bottom:7px}
.avis__head h3{font-family:'Anton',sans-serif;font-size:clamp(1.55rem,3.4vw,2.5rem);
  line-height:1.05;text-transform:uppercase;color:#0E120D;max-width:20ch}
.avis__score{margin-top:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;color:#46503F}
.avis__score span,.avis__stars{color:#6DA729;letter-spacing:.08em}
.avis__fenetre{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.avis__track{display:flex;gap:14px;width:max-content;animation:avis-defile 34s linear infinite}
.avis__track:hover{animation-play-state:paused}
.avis article{width:min(380px,82vw);padding:20px;border:1px solid rgba(14,18,13,.14);
  border-radius:16px;background:#fff;box-shadow:0 14px 36px rgba(14,18,13,.08);flex:none}
.avis blockquote{margin:10px 0 18px;font-family:'Space Grotesk',sans-serif;font-size:.97rem;
  line-height:1.55;color:#20271E}
.avis article footer{display:flex;flex-direction:column;gap:2px;font-family:'Space Grotesk',sans-serif}
.avis article footer strong{font-size:.86rem;color:#0E120D}
.avis article footer span{font-size:.7rem;color:#6A7465;text-transform:uppercase;letter-spacing:.09em}
@keyframes avis-defile{to{transform:translateX(calc(-50% - 7px))}}
@media(max-width:640px){.avis__head{align-items:flex-start}.avis__head .btn{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.avis__track{animation:none;flex-wrap:wrap;width:auto}.avis article[aria-hidden=true]{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   24/08/2026 — LA PREUVE REMONTE, LE PARC S'ALLÈGE
   ══════════════════════════════════════════════════════════════════════════ */

/* La bande d'avis Google, désormais juste après les photos.
   Les cartes d'avis sont dessinées pour un fond clair : la bande l'est aussi. */
.sec--avis{background:#f5f4ef;padding-block:clamp(44px,5.5vw,84px)}
.sec--avis .avis{margin-top:0;padding-top:0;border-top:0}

/* Le parc machines : douze noms, trois familles, aucun paragraphe. */
.parc{display:grid;gap:clamp(18px,2.4vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.parc__fam h3{font-family:'Anton',sans-serif;font-size:clamp(1rem,1.5vw,1.2rem);
  text-transform:uppercase;letter-spacing:.06em;color:var(--vert);
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14)}
.parc__fam ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.parc__fam li{display:flex;flex-direction:column;gap:2px}
.parc__fam b{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:var(--t-body);color:var(--blanc);line-height:1.25}
.parc__fam span{font-size:var(--t-pet);line-height:1.45;color:var(--gris)}
.parc__lien{margin-top:clamp(22px,3vw,38px)}
.parc__lien a{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--t-pet);
  letter-spacing:.06em;color:var(--vert-vif);border-bottom:1px solid transparent;
  padding-bottom:2px;transition:border-color .2s}
.parc__lien a:hover{border-bottom-color:var(--vert-vif)}

/* ══════════════════════════════════════════════════════════════════════════
   30/08/2026 — V2 « LE MUR DE L'ATELIER » (sur ordre de Paul, deux fois)
   DA inchangée : noir · gris · vert ARTIP #6DA729, Anton + Grotesk.
   Trois gestes, rien d'autre :
   1. le héro montre un mur de 24 réalisations réelles qui défile lentement ;
   2. la galerie 01 devient une mosaïque magazine (grandes tuiles, flux dense) ;
   3. micro-animations : entrée du héro et des tuiles, dérive des numéros,
      barre de progression de lecture. Le tout en CSS pur, CSP-safe,
      éteint sous prefers-reduced-motion et sans JavaScript.
   Ce fichier remplace style.css (cache o2switch 7 j → nom neuf).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LE MUR ─────────────────────────────────────────────────────────── */
.hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
.hmur{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  align-items:start;gap:clamp(10px,1.1vw,16px);
  height:clamp(460px,60vh,680px);overflow:hidden;
  transform:rotate(-3deg) scale(1.08);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.hmur__col{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,16px);
  will-change:transform;animation:hmurDerive 104s linear infinite}
.hmur__col--a{animation-duration:112s}
.hmur__col--b{animation-duration:138s;animation-direction:reverse}
.hmur__col--c{animation-duration:124s}
.hmur__grp{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,16px);flex:none}
.hmur img{width:100%;height:auto;border-radius:12px;display:block;
  border:1px solid rgba(255,255,255,.08);background:#161A15;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
@keyframes hmurDerive{to{transform:translateY(-50%)}}
html.no-js .hmur__col{animation:none}

.hero__preuve{margin-top:20px;display:flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;font-size:var(--t-pet);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#C9D0C2}
.hero__preuve span{color:var(--vert-vif);font-size:1.05rem;letter-spacing:0;line-height:1}

@media(max-width:980px){
  /* Sur mobile, le mur devient la matière du fond : réel, discret, lisible. */
  .hmur{position:absolute;inset:-60px -8vw 0;height:auto;z-index:0;
    transform:rotate(-3deg) scale(1.14);opacity:.15;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent);
            mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent)}
  .hmur img{box-shadow:none}
  .hero__copy{position:relative;z-index:2}
}

/* ── 2 · ENTRÉE DU HÉRO (après le loader, une seule fois) ───────────────── */
@keyframes heroEntre{from{opacity:0;transform:translateY(26px)}}
@keyframes heroFondu{from{opacity:0}}
@media(prefers-reduced-motion:no-preference){
  html:not(.no-js) .hero__copy>.eyebrow{animation:heroEntre .7s var(--ease) .05s backwards}
  html:not(.no-js) .hero__copy>h1{animation:heroEntre .7s var(--ease) .14s backwards}
  html:not(.no-js) .hero__copy>.hero__lead{animation:heroEntre .7s var(--ease) .24s backwards}
  html:not(.no-js) .hero__copy>.actions{animation:heroEntre .7s var(--ease) .34s backwards}
  html:not(.no-js) .hero__copy>.hero__preuve{animation:heroEntre .7s var(--ease) .44s backwards}
  html:not(.no-js) .hmur{animation:heroFondu 1.2s var(--ease) .2s backwards}
}
@media(prefers-reduced-motion:reduce){
  .hmur__col{animation:none}
}

/* ── 3 · LA MOSAÏQUE MAGAZINE ───────────────────────────────────────────── */
@media(min-width:700px){
  .galgrid{grid-auto-flow:dense;gap:12px}
  .galcard:nth-child(8n+1){grid-column:span 2;grid-row:span 2}
  .galcard:nth-child(8n+1) .galcard__zoom{aspect-ratio:auto;flex:1 1 auto;min-height:0}
  .galcard:nth-child(8n+1) figcaption{font-size:.84rem}
}
.galgrid .galcard__zoom img{transition:transform .45s var(--ease)}
.galgrid .galcard__zoom:hover img{transform:scale(1.06)}
@keyframes tuileEntre{from{opacity:0;transform:translateY(18px) scale(.985)}}
@media(prefers-reduced-motion:no-preference){
  .galcard{animation:tuileEntre .5s var(--ease) backwards}
  .galcard:nth-child(6n+2){animation-delay:.05s}
  .galcard:nth-child(6n+3){animation-delay:.1s}
  .galcard:nth-child(6n+4){animation-delay:.15s}
  .galcard:nth-child(6n+5){animation-delay:.2s}
  .galcard:nth-child(6n+6){animation-delay:.25s}
}

/* ── 4 · MICRO-MOTION AU DÉFILEMENT (progressif : @supports) ───────────── */
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .sec::before{animation:numDerive linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
  }
}
@keyframes numDerive{from{transform:translateY(110px)}to{transform:translateY(-130px)}}
@supports(animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    body::after{content:'';position:fixed;top:0;left:0;right:0;height:3px;z-index:1200;
      pointer-events:none;background:linear-gradient(90deg,var(--vert),var(--vert-vif));
      transform-origin:0 50%;transform:scaleX(0);
      animation:barreLecture linear both;animation-timeline:scroll(root)}
  }
}
@keyframes barreLecture{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── 5 · LISIBILITÉ — étoiles vertes sur fond clair (contrôle du 30/08) ─── */
.sec--avis .avis__score span,.sec--avis .avis__stars{color:var(--vert-sombre)}

/* ── 6 · MOBILE — l'eyebrow passe DEVANT le mur (sonde pixels du 30/08) ──
   Mesuré à 390 px : #6DA729 sur le mur atténué tombait à 4,10:1. Le mur
   s'efface un peu et le surtitre prend le vert vif → 6:1 et plus. */
@media(max-width:980px){
  .hmur{opacity:.10}
  .hero .eyebrow{color:var(--vert-vif)}
}


/* ══════════════════════════════════════════════════════════════════════════
   SEO / accessibilité — 06/09/2026 (audit du jour)
   - A-I1 : à ≤ 980 px le mur est en position absolue mais la grille du héros
     gardait deux colonnes (règle « LE MUR » plus bas dans le fichier que le
     media query de 1281) : la colonne texte tombait à ~170 px et le bouton
     « Demander un devis » était tronqué. Une seule colonne sous 980 px.
   - A-I4 : les dix attributs style="" du gabarit deviennent des classes.
   - Logos : width/height posés dans le HTML → width/height:auto ici pour
     que les attributs ne servent qu'au ratio (zéro décalage de mise en page).
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:980px){
  .hero__in{grid-template-columns:minmax(0,1fr)}
  .hero .actions .btn{white-space:normal;text-align:center}
}
.loader .mark--loader{font-size:3rem}
.wa .wa__h3{font-size:var(--t-h3);text-transform:uppercase;margin-bottom:18px}
.wa .wa__p{color:var(--gris-clair);margin-bottom:24px}
.btn.btn--full{width:100%}
#formEtat.form__etat{margin-top:14px;font-size:var(--t-pet)}
.lieu address .lieu__note{color:var(--gris)}
.ft .ft__mark{font-size:1.4rem;margin-bottom:12px;opacity:.92}
.ft .ft__mark small{font-family:'Space Grotesk',sans-serif;font-size:.55em;letter-spacing:.28em;color:var(--gris);font-weight:600}
.ft .ft__tagline{color:var(--gris);font-size:var(--t-pet);max-width:34ch}
.logogrid img{width:auto;height:auto}