/* Menuiserie Mertens — pages intérieures et compléments (03/10/2026). Composants repris d'USB Châssis Construct
   (référence /figer-claude-design), recolorés aux valeurs de la maquette Usine « chantier » : Oswald / Work Sans,
   anthracite #1E1F22, sable #F5F1EB / #EAE3D9, vert #00D623 (texte posé dessus : #141414). maquette.css reste intact. */
:root { --nuit: #1E1F22; --nuit2: #2A2B2F; --nuit3: #141518; --trait-s: #34353A; --ac: #00D623; --ac-txt: #141414; --ac-fonce: #00A81C; --clair: #AEFFC2;
        --fond: #F5F1EB; --fond2: #EAE3D9; --trait: #DDD6CB; --trait2: #E3DDD4; --txt: #1E1F22; --txt2: #45464A; --gris: #5B5C60; --gris-s: #9D9A94; --sur-s: #C9C6C0; }
img { max-width: 100%; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.eyebrow { font-weight: 600; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #2A2B2E; }
.eyebrow--clair { color: var(--clair); }
.ttl { margin: 12px 0 0; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 700; font-size: clamp(23px, 3.17vw, 42px); line-height: .95; text-transform: uppercase; }
.ttl > span { display: block; overflow: hidden; padding: .12em 0 .04em; margin-top: -.12em; }
.ttl > span > span { display: block; }
.lk-u { color: var(--txt); font-weight: 600; border-bottom: 2px solid var(--ac); padding-bottom: 2px; }
.lk-u:hover { color: var(--txt); border-bottom-color: var(--txt); }
.btn-p { position: relative; display: inline-block; padding: 17px 28px; background: var(--ac); color: var(--ac-txt); font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; transition: transform .25s, background .25s, color .25s; }
.btn-p:hover { background: #FFFFFF; color: #2A2B2E; transform: translateY(-2px); }
.btn-o { display: inline-block; padding: 17px 28px; border: 1.5px solid rgba(255,255,255,.65); color: #FFFFFF; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; transition: background .25s; }
.btn-o:hover { background: rgba(255,255,255,.12); color: #FFFFFF; }

/* Cartes services de l'accueil : toute la carte est cliquable (lien étiré sur le titre) */
#services article [data-carte-lien]::after { content: ""; position: absolute; inset: 0; }
#services article { cursor: pointer; }
@media (min-width: 761px) { #services [data-rail-mobile] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* Sous-menu Services à vignettes (règle 10) */
.sm { position: relative; display: flex; align-items: center; }
.sm-btn { display: inline-flex; align-items: center; gap: 6px; }
.sm-panel { position: absolute; left: -18px; top: calc(100% + 26px); width: 660px; z-index: 70; background: #FFFFFF; border: 1px solid var(--trait2); border-top: 4px solid var(--ac); padding: 12px; box-shadow: 0 30px 60px -30px rgba(20,21,24,.45); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; font-size: 15px; }
.sm-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 30px; }
@media (hover: hover) { .sm:hover .sm-panel { opacity: 1; visibility: visible; transform: none; } }
.sm.sm-open .sm-panel, .sm:focus-within .sm-panel { opacity: 1; visibility: visible; transform: none; }
.sm-panel { gap: 18px; align-items: start; }
.sm-grp { display: grid; gap: 2px; align-content: start; }
.sm-cat { display: block; margin: 2px 10px 6px; padding-bottom: 8px; border-bottom: 2px solid var(--ac); font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--txt); }
.sm-grp + .sm-grp .sm-cat { color: var(--ac-fonce); }
.sm-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; color: var(--txt); }
.sm-item:hover { background: var(--fond); color: var(--txt); }
.sm-item img { width: 56px; height: 40px; object-fit: cover; flex-shrink: 0; }
.sm-item b { display: block; font-size: 14.5px; }
.sm-item small { display: block; font-size: 12.5px; font-weight: 500; color: var(--gris); margin-top: 2px; }
@media (max-width: 1100px) and (min-width: 761px) { [data-nav] { font-size: 14px !important; gap: 16px !important; } }
/* Menu mobile de la maquette (html.usine-menu-ouvert) : le sous-menu devient une liste simple */
@media (max-width: 760px) {
  html.usine-menu-ouvert [data-nav] > .sm { display: block; padding: 14px 4px 6px; border-top: 1px solid #E3DDD4; }
  html.usine-menu-ouvert .sm-panel { position: static; width: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 4px 0 0 12px; grid-template-columns: 1fr; font-size: 16px; }
  html.usine-menu-ouvert .sm-item { padding: 8px 0; }
  html.usine-menu-ouvert .sm-cat { margin: 10px 0 4px; font-size: 13px; }
  html.usine-menu-ouvert .sm-item img, html.usine-menu-ouvert .sm-item small, html.usine-menu-ouvert .sm-btn svg { display: none; }
  html.usine-menu-ouvert .sm-item b { font-weight: 500; font-size: 16px; color: var(--txt2); }
}

/* Grilles symétriques (règle 08) et rails mobiles (règle 01) */
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) {
  .g3.rail-m { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -24px; padding: 0 24px 6px; scroll-padding-inline: 24px; scrollbar-width: none; }
  .g3.rail-m::-webkit-scrollbar { display: none; }
  .g3.rail-m > * { flex: 0 0 78%; scroll-snap-align: start; }
  .g3:not(.rail-m) { grid-template-columns: 1fr; }
}

/* FAQ */
.faq { border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); padding: 22px 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 500; font-size: clamp(13px, 1.22vw, 15px); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--ac-fonce); font-size: 26px; line-height: 1; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 14px 0 0; max-width: 760px; font-size: 16px; line-height: 1.7; color: var(--txt2); }

/* Bulle de Vincent (règle 09, refonte du 03/10/2026) : un rond vert au-dessus du chatbot (assets/js/chatbot.js),
   prénom au survol ; cachée en haut de page et quand le footer est à l'écran. */
.fab { position: fixed; right: 24px; bottom: 98px; z-index: 89; transition: opacity .3s, transform .3s; }
.fab.off { opacity: 0; pointer-events: none; transform: translateY(16px); }
.fab-tel { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #FFFFFF; color: #1E1F22; box-shadow: 0 12px 28px -10px rgba(20,21,24,.55), inset 0 0 0 3px #00D623; animation: gPulse 2.4s 4s infinite; }
.fab-tel svg { width: 24px; height: 24px; }
.fab-tel span { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; padding: 8px 12px; background: #1E1F22; color: #FFFFFF; font-weight: 700; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.fab-tel:hover span, .fab-tel:focus-visible span { opacity: 1; transform: translateY(-50%); }
.fab-tel:hover { background: #00D623; color: #141414; }
@media (max-width: 760px) { .fab { right: 16px; bottom: 92px; } .fab-tel { width: 52px; height: 52px; } }

/* Pages intérieures — hero (rideau + zoom, comme l'ouverture du hero de la maquette) */
@keyframes mOpen { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes mZoom { from { transform: scale(1.22); } to { transform: scale(1); } }
@keyframes mLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ph { position: relative; overflow: hidden; background: var(--nuit); color: #FFFFFF; }
.ph-bg { position: absolute; inset: 0; animation: mOpen 1.1s .1s cubic-bezier(.7,0,.2,1) both; }
.ph-bg img { width: 100%; height: 100%; object-fit: cover; animation: mZoom 2.4s .1s cubic-bezier(.2,.8,.2,1) both; }
.ph-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,31,34,.45) 0%, rgba(30,31,34,.3) 38%, rgba(30,31,34,.94) 100%), linear-gradient(90deg, rgba(30,31,34,.7) 0%, rgba(30,31,34,0) 70%); }
.ph-lines { position: absolute; inset: 0; pointer-events: none; display: grid; grid-template-columns: 1fr 1fr 1fr; max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.ph-lines i { border-left: 1px solid rgba(255,255,255,.12); transform-origin: top; animation: mLine 1.2s .5s cubic-bezier(.7,0,.2,1) both; }
.ph-lines i:last-child { border-right: 1px solid rgba(255,255,255,.12); }
.ph-in { position: relative; max-width: 1320px; margin: 0 auto; padding: clamp(80px, 11vw, 160px) 24px clamp(44px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: end; }
.ph--court .ph-in { grid-template-columns: 1fr; padding-top: clamp(64px, 8vw, 110px); }
@media (max-width: 960px) { .ph-in { grid-template-columns: 1fr; } }
.ph-bande { height: 14px; background: var(--ac); }
.crumb { font-weight: 600; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--clair); animation: gFade .8s .3s both; }
.crumb a { color: var(--sur-s); } .crumb a:hover { color: #FFFFFF; }
.ph h1 { margin: 16px 0 0; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 700; font-size: clamp(35px, 5.76vw, 92px); line-height: .9; letter-spacing: -.01em; text-transform: uppercase; animation: gRise .9s .35s cubic-bezier(.2,.8,.2,1) both; }
.ph--court h1 { font-size: clamp(42px, 6.4vw, 96px); }
.ph p.ph-intro { margin: 24px 0 0; max-width: 620px; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.6; color: #EDE9E3; text-wrap: pretty; animation: gRise .9s .5s cubic-bezier(.2,.8,.2,1) both; }
.ph-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; animation: gRise .9s .62s cubic-bezier(.2,.8,.2,1) both; }
.bref { background: rgba(30,31,34,.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--trait-s); border-top: 5px solid var(--ac); padding: 22px 22px 18px; animation: gRise .9s .75s cubic-bezier(.2,.8,.2,1) both; }
.bref-n { font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 700; font-size: 35px; line-height: 1; color: var(--ac); }
.bref h2 { margin: 10px 0 12px; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--clair); font-weight: 600; }
.bref ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; line-height: 1.45; color: #EDE9E3; }
.bref li { display: flex; gap: 10px; } .bref li::before { content: ""; flex: none; width: 18px; height: 8px; margin-top: 6px; background: var(--ac); }
@media (max-width: 480px) { .ph h1 { font-size: 46px; } }

/* Pages services — animation du métier */
.anim { background: var(--nuit); color: #FFFFFF; }
.anim-in { max-width: 1320px; margin: 0 auto; padding: clamp(44px, 5vw, 72px) 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .anim-in { grid-template-columns: 1fr; } }
.anim-txt h2 { margin: 12px 0 0; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 700; font-size: clamp(22px, 2.59vw, 35px); line-height: .98; text-transform: uppercase; }
.anim-txt p { margin: 16px 0 0; max-width: 480px; font-size: 16.5px; line-height: 1.65; color: var(--sur-s); }
.anim-svg { position: relative; aspect-ratio: 16 / 10; background: var(--nuit2); border: 10px solid var(--trait-s); overflow: hidden; }
.anim-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.anim-svg .k { fill: none; stroke: var(--ac); stroke-width: 3; stroke-linecap: square; }
.anim-svg .k2 { fill: none; stroke: #8E8B85; stroke-width: 2; }
.anim-svg .vit { fill: rgba(0,214,35,.12); stroke: none; }
.anim-svg .sol { stroke: #45464B; stroke-width: 2; }
.anim-svg [data-t] { opacity: 0; }
.anim-svg.go .dr { stroke-dasharray: var(--l, 1200); stroke-dashoffset: var(--l, 1200); animation: aDraw 1.6s cubic-bezier(.6,0,.2,1) both; }
.anim-svg.go [data-t] { animation: aIn .8s cubic-bezier(.2,.8,.2,1) both; }
.anim-svg.go .loop { animation: var(--a) 5s 2.4s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes aDraw { to { stroke-dashoffset: 0; } }
@keyframes aIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes aSlide { 0%, 15% { transform: none; } 45%, 65% { transform: translateX(var(--dx, -150px)); } 95%, 100% { transform: none; } }
@keyframes aUp { 0%, 15% { transform: none; } 45%, 65% { transform: translateY(var(--dy, -150px)); } 95%, 100% { transform: none; } }
@keyframes aSwing { 0%, 15% { transform: none; } 45%, 65% { transform: perspective(600px) rotateY(var(--ry, -55deg)); } 95%, 100% { transform: none; } }
@keyframes aClimb { 0%, 10% { transform: none; } 20% { transform: translate(60px, -40px); } 30% { transform: translate(120px, -80px); } 40% { transform: translate(180px, -120px); } 50% { transform: translate(240px, -160px); } 60%, 80% { transform: translate(300px, -200px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .anim-svg [data-t] { opacity: 1; } .anim-svg .dr { stroke-dasharray: none; } .anim-svg .loop { animation: none !important; } }

/* « Ce qui est compris » (3 × 2) */
.inc { padding: clamp(64px, 8vw, 110px) 0 0; }
.inc .g3 { margin-top: 26px; gap: 2px; background: var(--trait); border: 2px solid var(--trait); }
.inc-t { background: #FFFFFF; padding: 26px 24px; display: flex; gap: 16px; align-items: center; font-weight: 600; font-size: 16.5px; line-height: 1.4; transition: background .35s, color .35s; }
.inc-t:hover { background: var(--ac); color: var(--ac-txt); }
.inc-t:hover .pic { color: var(--ac-txt); border-color: rgba(20,20,20,.35); }
.pic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--trait); color: var(--ac-fonce); transition: color .35s, border-color .35s; }
.pic svg { width: 24px; height: 24px; }
@media (max-width: 760px) { .inc .g3.rail-m { background: none; border: 0; gap: 10px; } .inc .g3.rail-m > .inc-t { border: 1px solid var(--trait); } }

/* Texte en zigzag (photo / texte), bandes sombres et encarts */
.zz { padding: clamp(64px, 8vw, 110px) 0 0; }
.zz-in { max-width: 1320px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.zz--inv .zz-media { order: 2; }
.zz-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--trait); padding: 0; border: 0; cursor: zoom-in; }
.zz-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.zz-media:hover img { transform: scale(1.05); }
.zz-media::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 8px; background: var(--ac); }
.zz-n { font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 700; font-size: 40px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--ac-fonce); }
.zz h2 { margin: 12px 0 0; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 700; font-size: clamp(20px, 2.3vw, 30px); line-height: 1; text-transform: uppercase; text-wrap: balance; }
.zz p { margin: 0 0 16px; font-size: 17px; line-height: 1.72; color: var(--txt2); text-wrap: pretty; }
.zz p:last-child { margin-bottom: 0; }
.zz p.lead { margin-top: 20px; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; font-weight: 500; color: var(--txt); }
.zz a, .prose a { color: var(--txt); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ac); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.zz a:hover, .prose a:hover { color: var(--ac-fonce); }
.zz-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; border-top: 1px solid var(--trait); }
.zz-list li { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--trait); font-size: 16.5px; line-height: 1.5; }
.zz-list .pic { width: 40px; height: 40px; } .zz-list .pic svg { width: 20px; height: 20px; }
.zz--bande { margin-top: clamp(64px, 8vw, 110px); padding: clamp(52px, 6vw, 90px) 0; background: var(--nuit); color: #FFFFFF; }
.zz--bande .zz-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.zz--bande p { color: var(--sur-s); } .zz--bande p.lead { color: #FFFFFF; margin-top: 0; }
.zz--bande h2 { color: #FFFFFF; } .zz--bande .zz-n { -webkit-text-stroke-color: var(--ac); }
.zz--bande a { color: #FFFFFF; } .zz--bande a:hover { color: var(--ac); }
.zz--bande .zz-list, .zz--bande .zz-list li { border-color: var(--trait-s); color: #EDE9E3; }
.zz--bande .pic { border-color: #45464B; color: var(--ac); }
.zz--encart { padding-bottom: 0; }
.zz--encart .zz-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.zz--encart p.lead { margin-top: 0; padding: 22px 24px; background: var(--fond2); border-left: 5px solid var(--ac); }
@media (max-width: 860px) {
  .zz-in, .zz--bande .zz-in, .zz--encart .zz-in { grid-template-columns: 1fr; }
  .zz--inv .zz-media { order: 0; }
}

/* Réalisations : un carrousel par projet, photos seules (règle 07) */
.pj-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .pj-g { grid-template-columns: 1fr; } }
.pj { position: relative; }
.pj-tr { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 3.2; background: var(--trait); }
.pj-tr::-webkit-scrollbar { display: none; }
.pj-tr button { flex: 0 0 100%; scroll-snap-align: start; padding: 0; border: 0; cursor: zoom-in; position: relative; }
.pj-tr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj-nav { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; }
.pj-nav button { width: 38px; height: 38px; display: grid; place-items: center; background: rgba(30,31,34,.85); color: #FFFFFF; border: 0; cursor: pointer; font-size: 16px; }
.pj-nav button:hover { background: var(--ac); color: var(--ac-txt); }
.pj-nav span { min-width: 46px; text-align: center; padding: 9px 8px; background: rgba(30,31,34,.85); color: #FFFFFF; font-size: 13px; font-weight: 600; }
.pj--seul .pj-nav { display: none; }

/* Cartes « autres services » (6, règle 08) */
.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.carte { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--nuit); color: #FFFFFF; }
.carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,31,34,0) 35%, rgba(30,31,34,.92) 100%); }
.carte:hover img { transform: scale(1.06); }
.carte span { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; display: grid; gap: 4px; }
.carte b { font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 600; font-size: 17px; text-transform: uppercase; color: #FFFFFF; }
.carte small { font-size: 14px; color: var(--sur-s); }
.carte:hover b { color: var(--ac); }
@media (max-width: 1000px) { .cartes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .cartes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -24px; padding: 0 24px 6px; scrollbar-width: none; } .cartes::-webkit-scrollbar { display: none; } .carte { flex: 0 0 78%; scroll-snap-align: start; } }

/* Page contact : infos pratiques */
.info-c { background: #FFFFFF; border: 1px solid var(--trait2); border-top: 5px solid var(--ac); padding: 28px 26px; }
.info-c h2 { margin: 18px 0 8px; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 600; font-size: 16px; text-transform: uppercase; }
.info-c p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--txt2); }
.info-c a { color: var(--txt); text-decoration: underline; text-decoration-color: var(--ac); text-underline-offset: 3px; }

/* Formulaire : second bouton WhatsApp + note (rien n'est stocké) */
.fm-wa { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; background: transparent; border: 1.5px solid #45464B; color: #FFFFFF; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.fm-wa:hover { background: #FFFFFF; color: var(--nuit); border-color: #FFFFFF; }
.fm-wa svg { width: 18px; height: 18px; }
.fm-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gris-s); }

/* Textes longs (légales, plan du site) */
.prose { max-width: 820px; font-size: 16.5px; line-height: 1.75; color: var(--txt2); }
.prose h2 { margin: 44px 0 12px; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 700; font-size: clamp(17px, 1.87vw, 23px); line-height: 1.05; text-transform: uppercase; color: var(--txt); }
.prose h3 { margin: 28px 0 8px; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 600; font-size: 14px; text-transform: uppercase; color: var(--txt); }
.prose ul { padding-left: 20px; } .prose li { margin: 6px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 16px 0; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--trait); vertical-align: top; }

/* Navigateurs sans animation-timeline (Firefox, Safari) : site.js rejoue les entrées au défilement (classe rv-in) */
@supports not (animation-timeline: view()) {
  [data-reveal] { opacity: 1; }
}


/* Police du site : Bricolage Grotesque, titres et texte (choix de Wakny le 03/10/2026, parmi 7 comparées sur la démo).
   Changer de police = ces variables + fonts.css. Les tailles de titres ont été calées pour Archivo élargie : --f-k
   agrandit les grands titres de 12 % pour rattraper la largeur (rendu identique à celui validé sur la démo). */
:root { --f-titre: 'Bricolage Grotesque', system-ui, sans-serif; --f-texte: 'Bricolage Grotesque', system-ui, sans-serif; --f-nav: var(--f-titre); --f-larg: 100%; --f-k: 1.12; }
:is(main h1, main h2, .ac-chiffre b, .bref-n, .sd-track b) { zoom: var(--f-k); }
body { font-family: var(--f-texte); font-stretch: 100%; }

/* Header retravaillé (03/10/2026) : majuscules Archivo élargie, page active soulignée en vert,
   bloc téléphone de Vincent, zone d'intervention dans le bandeau, en-tête compact au défilement. */
body > header { transition: box-shadow .3s; }
body > header > div { transition: padding .3s; }
body > header img { transition: height .3s; }
html.hd-compact body > header { box-shadow: 0 10px 30px -18px rgba(20,21,24,.45); }
html.hd-compact body > header > div { padding-top: 4px !important; padding-bottom: 4px !important; }
html.hd-compact body > header img { height: 54px !important; }
[data-nav] { font-family: var(--f-nav); font-stretch: var(--f-larg); font-weight: 700 !important; font-size: 13.5px !important; letter-spacing: .07em; text-transform: uppercase; gap: clamp(14px, 1.9vw, 28px) !important; }
[data-nav] > a:not(.hd-tel):not([href="/contact"]), .sm-btn { position: relative; padding: 8px 0; color: #1E1F22; }
[data-nav] > a:not(.hd-tel):not([href="/contact"])::after, .sm-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #00D623; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
[data-nav] > a:hover::after, [data-nav] > a.on::after, .sm:hover .sm-btn::after, .sm.on .sm-btn::after { transform: scaleX(1); }
[data-nav] > a[href="/contact"] { font-size: 14px !important; letter-spacing: .07em !important; }
.hd-tel { display: inline-flex; align-items: center; gap: 10px; padding-left: clamp(12px, 1.6vw, 22px); border-left: 1px solid #E3DDD4; color: #1E1F22; text-transform: none; letter-spacing: 0; }
.hd-tel-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #00D623; color: #141414; }
.hd-tel-ic svg { width: 18px; height: 18px; }
.hd-tel small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5B5C60; }
.hd-tel b { display: block; font-family: var(--f-titre); font-size: 15px; font-weight: 800; font-stretch: var(--f-larg); }
.hd-tel:hover .hd-tel-ic { background: #1E1F22; color: #FFFFFF; }
@media (max-width: 1180px) and (min-width: 761px) { .hd-tel small { display: none; } .hd-tel b { display: none; } .hd-tel { padding-left: 0; border: 0; } }
@media (max-width: 760px) { html.usine-menu-ouvert [data-nav] > .hd-tel { padding: 14px 4px; border-left: 0; border-top: 1px solid #E3DDD4; } }
.tb-zone { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 1000px) { .tb-zone { display: none; } }
[data-tb-contact], .tb-zone, body > div:first-of-type a { letter-spacing: .02em; }

/* ===== Entrées à l'écran (data-vu → .vu, site.js) : seulement si le JS tourne, jamais de bloc invisible sans lui ===== */
.js [data-vu]:not(.ac-frise) > * { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1), background .35s, color .35s; transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-vu].vu:not(.ac-frise) > * { opacity: 1; transform: none; }
.trace svg :is(path, rect, circle, line) { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js [data-vu] .trace svg :is(path, rect, circle, line) { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1); transition-delay: calc(var(--i, 0) * 90ms + .25s); }
.js [data-vu].vu .trace svg :is(path, rect, circle, line) { stroke-dashoffset: 0; }

/* « Ce qui est compris » animé : cases l'une après l'autre, picto tracé, trait vert qui balaie le bas de la case */
.inc-t { position: relative; }
.inc-t::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ac); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.6,0,.2,1); transition-delay: calc(var(--i, 0) * 90ms + .35s); }
.vu > .inc-t::after, html:not(.js) .inc-t::after { transform: scaleX(1); }
.js .vu > .inc-t .pic { animation: incPic .9s both; animation-delay: calc(var(--i, 0) * 90ms + .2s); }
@keyframes incPic { 0% { background: transparent; } 35% { background: var(--ac); color: var(--ac-txt); border-color: var(--ac); } 100% { background: transparent; } }

/* ===== Pages services allégées (03/10/2026) ===== */
.sv-h { margin: 0; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; font-size: clamp(24px, 3vw, 40px); line-height: .98; text-transform: uppercase; text-wrap: balance; }
/* 1. Ce qu'on fait : photo + une phrase + 6 types en tuiles */
.sq { padding: clamp(64px, 8vw, 110px) 0; }
.sq-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sq-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3.6; overflow: hidden; padding: 0; border: 0; background: var(--trait); cursor: zoom-in; }
.sq-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.sq-media:hover img { transform: scale(1.05); }
.sq-media::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 10px; background: var(--ac); }
.sq-lead { margin: 18px 0 0; max-width: 520px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--txt2); }
.sq-types { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sq-types li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #FFFFFF; border: 1px solid var(--trait); font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.sq-types li:hover { background: var(--nuit); color: #FFFFFF; } .sq-types li:hover .pic { color: var(--ac); border-color: #45464B; }
.sq-types .pic { width: 40px; height: 40px; } .sq-types .pic svg { width: 21px; height: 21px; }
.sq-lien { margin: 22px 0 0; }
/* 2. Trois atouts, bande sombre, gros pictos tracés */
.sa { padding: clamp(64px, 8vw, 110px) 0; background: var(--nuit); color: #FFFFFF; }
.sa-g { margin-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--trait-s); }
.sa-it { padding: 34px clamp(20px, 2.6vw, 40px) 8px 0; border-right: 1px solid var(--trait-s); }
.sa-it + .sa-it { padding-left: clamp(20px, 2.6vw, 40px); }
.sa-it:last-child { border-right: 0; }
.sa-pic { display: block; width: 64px; height: 64px; color: var(--ac); }
.sa-pic svg { width: 64px; height: 64px; stroke-width: 1.3; }
.sa-it h3 { margin: 22px 0 0; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; font-size: clamp(19px, 1.9vw, 25px); line-height: 1; text-transform: uppercase; }
.sa-it p { margin: 12px 0 0; max-width: 340px; font-size: 16.5px; line-height: 1.6; color: var(--sur-s); }
/* 3. Déroulé : 4 étapes sur une ligne, trait qui se remplit */
.sd { padding: clamp(64px, 8vw, 110px) 0; background: var(--fond2); }
.sd-track { position: relative; list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 30px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sd-track::before, .sd-track::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(30,31,34,.15); }
.sd-track::after { background: var(--nuit); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.6,0,.2,1); }
.sd-track.vu::after, html:not(.js) .sd-track::after { transform: scaleX(1); }
.sd-track li { position: relative; }
.sd-track li::before { content: ""; position: absolute; top: -38px; left: 0; width: 16px; height: 16px; background: var(--ac); border: 3px solid var(--nuit); }
.sd-track b { display: block; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--ac-fonce); }
.sd-track h3 { margin: 14px 0 0; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; font-size: 18px; text-transform: uppercase; }
.sd-track p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--txt2); }
/* 4. Zone : photo voilée, communes qui s'allument */
.sz { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 110px) 0; background: var(--nuit); color: #FFFFFF; }
.sz-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.sz-in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sz .sv-h { margin-top: 12px; }
.sz p { margin: 18px 0 26px; max-width: 460px; font-size: 17px; line-height: 1.6; color: var(--sur-s); }
.sz-communes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sz-communes li { padding: 12px 18px; border: 1px solid rgba(255,255,255,.4); background: rgba(30,31,34,.55); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; }
.sz-communes li:first-child { background: var(--ac); border-color: var(--ac); color: var(--ac-txt); }
@media (max-width: 960px) { .sd-track { grid-template-columns: 1fr 1fr; row-gap: 56px; } .sd-track::before, .sd-track::after { display: none; } .sd-track { padding-top: 0; } .sd-track li::before { display: none; } }
@media (max-width: 860px) {
  .sq-in, .sz-in { grid-template-columns: 1fr; }
  .sa-g { grid-template-columns: 1fr; }
  .sa-it, .sa-it + .sa-it { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--trait-s); display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; }
  .sa-pic, .sa-pic svg { width: 52px; height: 52px; } .sa-pic { grid-row: span 2; }
  .sa-it h3 { margin-top: 4px; }
}
@media (max-width: 520px) { .sq-types li { padding: 12px 10px; gap: 10px; font-size: 14px; } .sq-types .pic { width: 32px; height: 32px; } .sq-types .pic svg { width: 18px; height: 18px; } .sd-track { column-gap: 16px; row-gap: 36px; } .sd-track b { font-size: 36px; } }
@media (max-width: 370px) { .sq-types, .sd-track { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .js [data-vu]:not(.ac-frise) > *, .js [data-vu] .trace svg :is(path, rect, circle, line) { opacity: 1; transform: none; stroke-dashoffset: 0; transition: none; }
  .inc-t::after { transform: scaleX(1); transition: none; } .js .vu > .inc-t .pic { animation: none; } .sd-track::after { transform: scaleX(1); transition: none; }
}

/* ===== Blog (03/10/2026) : standard « digeste » BE WEB aux couleurs du site ===== */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.blog-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--trait); border-bottom: 5px solid var(--ac); color: var(--txt); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(30,31,34,.5); }
.blog-card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--trait); }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.blog-card:hover .blog-card__img img { transform: scale(1.05); }
.blog-card__txt { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.blog-card__cat { align-self: flex-start; padding: 5px 10px; background: var(--nuit); color: var(--ac); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.blog-card h3 { margin: 14px 0 0; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; font-size: 18px; line-height: 1.15; text-transform: uppercase; }
.blog-card__ext { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--txt2); }
.blog-card__lire { margin-top: auto; padding-top: 16px; font-weight: 700; font-size: 14px; color: var(--ac-fonce); }
@media (max-width: 960px) { .blog-grid { grid-template-columns: 1fr 1fr; } .blog-grid[data-max] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -24px; padding: 0 24px 8px; } .blog-grid[data-max] .blog-card { flex: 0 0 min(80%, 360px); scroll-snap-align: start; } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }
.bl-sec { padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 9vw, 120px); }
.bl-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.bl-filtres button { padding: 11px 16px; border: 1.5px solid var(--nuit); background: transparent; color: var(--txt); font: inherit; font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; scroll-margin-top: 140px; }
.bl-filtres button.on, .bl-filtres button:hover { background: var(--nuit); color: #FFFFFF; }
.bl-filtres button.on { box-shadow: inset 0 -4px 0 var(--ac); }
/* Article */
.art-h1 { font-size: clamp(28px, 3.6vw, 52px) !important; line-height: 1 !important; max-width: 900px; text-wrap: balance; }
.art-sec { padding: clamp(48px, 6vw, 80px) 24px clamp(72px, 9vw, 120px); }
.article-body { max-width: 780px; margin: 0 auto; font-size: 17.5px; line-height: 1.75; color: var(--txt2); }
.article-body > .publish-gate__content > h2, .article-body h2[id] { margin: 52px 0 14px; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.08; text-transform: uppercase; color: var(--txt); scroll-margin-top: 130px; text-wrap: balance; }
.article-body p { margin: 0 0 18px; }
.article-body strong { color: var(--txt); }
.article-body ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.article-body ul li { position: relative; padding-left: 26px; }
.article-body ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 14px; height: 6px; background: var(--ac); }
.article-body a:not(.btn-p):not(.btn-o):not(.reno-btn):not(.lk-u) { color: var(--txt); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ac); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.article-meta { margin: 0 0 26px !important; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.publish-gate__locked { padding: 22px 24px; background: var(--fond2); border-left: 5px solid var(--ac); }
.article-brief { margin: 0 0 28px; padding: 24px 26px; background: var(--nuit); color: #EDE9E3; border-top: 5px solid var(--ac); }
.article-brief h2, .article-toc h2 { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ac); }
.article-brief ul { margin: 0; } .article-brief strong { color: #FFFFFF; }
.article-toc { margin: 0 0 32px; padding: 22px 26px; border: 1px solid var(--trait); background: #FFFFFF; }
.article-toc h2 { color: var(--gris); }
.article-toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; font-weight: 600; }
.article-toc a { color: var(--txt); }
.art-fig { margin: 8px 0 34px; }
.art-fig img { display: block; width: 100%; height: auto; }
.art-fig figcaption { margin-top: 10px; padding-left: 14px; border-left: 3px solid var(--ac); font-size: 14px; line-height: 1.5; color: var(--gris); }
.article-quote { margin: 40px 0 !important; padding: 4px 0 4px 22px; border-left: 6px solid var(--ac); font-family: var(--f-titre); font-stretch: var(--f-larg); font-size: clamp(19px, 2vw, 24px); line-height: 1.3; font-weight: 700; color: var(--txt); }
.article-realisations { margin: 44px 0; padding: clamp(28px, 4vw, 44px); background: var(--nuit); color: #FFFFFF; text-align: center; }
.reno-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ac); }
.article-realisations h3 { margin: 10px 0 8px; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); text-transform: uppercase; color: #FFFFFF; }
.reno-sub { margin: 0 auto 22px !important; max-width: 460px; color: var(--sur-s); font-size: 16px; }
.reno-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.article-realisations a.reno-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; background: var(--ac); color: var(--ac-txt); font-weight: 800; font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: background .25s, color .25s; }
.article-realisations a.reno-btn:hover { background: #FFFFFF; color: var(--txt); }
.article-faq { margin-top: 8px; }
.article-more { margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--trait); }
.article-more h3, .article-zones h3 { margin: 0 0 12px; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; font-size: 17px; text-transform: uppercase; color: var(--txt); }
.article-zones { margin: 36px 0; padding: 18px 22px; border-left: 4px solid var(--ac); background: var(--fond2); }
.article-zones p { margin: 0; font-size: 16px; }
.article-cta { margin-top: 48px; padding: clamp(28px, 4vw, 44px); background: var(--ac); color: var(--ac-txt); }
.article-cta h3 { margin: 0; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.05; text-transform: uppercase; }
.article-cta p { margin: 12px 0 20px; color: var(--ac-txt); }
.article-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.article-cta .btn-p { background: var(--nuit); color: #FFFFFF; } .article-cta .btn-o { color: var(--txt); border-color: var(--nuit); }
.art-retour { margin-top: 36px !important; }
.blog-card[hidden] { display: none !important; }

/* ===== Pages villes (/seo/, 03/10/2026) ===== */
.vl-cat { margin: 24px 0 0; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-fonce); }
.vl-types { margin-top: 10px; }
.vl-types li { padding: 0; }
.vl-types a { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; color: inherit; }
.vl-rep { margin: 18px 0 0; max-width: 760px; font-size: 17.5px; line-height: 1.65; color: var(--sur-s); }
.vl-rep--clair { color: var(--txt2); }
.vl-blog { padding: clamp(64px, 8vw, 110px) 0 0; }
.vl-zones { padding: clamp(56px, 7vw, 90px) 0; }
.vl-chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vl-chips a { display: inline-block; padding: 12px 18px; border: 1.5px solid var(--nuit); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--txt); transition: background .25s, color .25s; }
.vl-chips a:hover { background: var(--nuit); color: #FFFFFF; }
.vl-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vl-types a { gap: 10px; padding: 11px 10px; font-size: 14.5px; }
.vl-types .pic { width: 32px; height: 32px; } .vl-types .pic svg { width: 18px; height: 18px; }
@media (max-width: 1100px) and (min-width: 861px) { .vl-types { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .vl-types { grid-template-columns: 1fr; } }
.pied-zones { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: #8E8B85; }
.pied-zones a { color: #B5B2AC; text-decoration: underline; text-decoration-color: #45464B; text-underline-offset: 3px; }
.pied-zones a:hover { color: #00D623; }
.sz-communes li a { color: inherit; }
.sz-communes li:has(a):hover { background: #FFFFFF; color: var(--txt); border-color: #FFFFFF; }

/* ===== Briques de l'accueil réutilisées ailleurs (titres, sections) ===== */
.ac-t { font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.ac-sec { padding: clamp(72px, 9vw, 130px) 24px; }
.ac-in { max-width: 1320px; margin: 0 auto; }
.ac-h2 { margin: 0; font-size: clamp(30px, 3.8vw, 52px); line-height: .98; }

/* ===== Recrutement + candidature express (accueil et page Recrutement, 03/10/2026) ===== */
.ac-recrute { background: #1E1F22; color: #FFFFFF; border-top: 8px solid #00D623; }
.ac-recrute .ac-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ac-recrute p { margin: 16px 0 0; max-width: 520px; font-size: 17.5px; line-height: 1.65; color: #D8D5CF; }
.ac-recrute .ac-h2, .ac-recrute .sv-h { color: #FFFFFF; }
.ac-recrute .ac-h2 span, .ac-recrute .sv-h span { display: block; color: #00D623; }
.ac-cand { background: #2A2B2F; padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; border-top: 5px solid #00D623; }
.ac-cand label, .ac-cand legend { display: grid; gap: 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #9D9A94; }
.ac-cand input, .ac-cand select, .ac-cand textarea { padding: 13px 15px; background: #1E1F22; border: 1px solid #45464B; color: #FFFFFF; font: inherit; font-size: 16px; text-transform: none; letter-spacing: 0; border-radius: 0; }
.ac-cand input:focus, .ac-cand select:focus, .ac-cand textarea:focus { outline: none; border-color: #00D623; }
.ac-cand .ac-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ac-cand fieldset { border: 0; margin: 0; padding: 0; }
.ac-cand .ac-oui { display: flex; gap: 10px; text-transform: none; letter-spacing: 0; }
.ac-cand .ac-oui label { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid #45464B; color: #FFFFFF; font-size: 15px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.ac-cand .ac-oui input { accent-color: #00D623; padding: 0; }
.ac-cand .ac-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-cand button { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; border: 0; background: #00D623; color: #141414; font: inherit; font-weight: 800; font-stretch: var(--f-larg); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.ac-cand button + button { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1.5px #45464B; }
.ac-cand button:hover { background: #FFFFFF; color: #1E1F22; }
.ac-cand button svg { width: 18px; height: 18px; }
.ac-cand small { color: #9D9A94; font-size: 13px; line-height: 1.5; }
.ac-cand .ac-err { color: #FFB4A8; font-size: 14px; }
@media (max-width: 860px) { .ac-recrute .ac-in { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ac-cand .ac-ligne { grid-template-columns: 1fr; } }
/* carrousel de 3 photos (logo de Vincent au dos), fondu automatique (site.js, data-fondu) */
.ac-rec-photos { position: relative; margin-top: 28px; aspect-ratio: 3 / 2; overflow: hidden; background: #2A2B2F; max-width: 560px; }
.ac-rec-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1.2s ease, transform 5s linear; }
.ac-rec-photos img.on { opacity: 1; transform: scale(1); }
.ac-rec-photos::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 8px; background: #00D623; }
.ac-recrute.ac-sec { padding: clamp(72px, 9vw, 130px) 24px; }
.ac-recrute .ac-in { max-width: 1320px; margin: 0 auto; }

/* ===== Frise des étapes (accueil et page devis, sortie d'accueil.html le 03/10/2026) ===== */
/* Étapes : alignées (image en haut, hauteurs égales), frise qui se remplit, cartes qui entrent l'une après l'autre */
.ac-etapes { background: #EAE3D9; }
.ac-etape b, .ac-etape h3 { font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; text-transform: uppercase; }
.ac-frise { position: relative; margin-top: clamp(40px, 5vw, 64px); padding-top: 34px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ac-frise::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(30,31,34,.15); }
.ac-frise::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #1E1F22; transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.6,0,.2,1); }
.ac-frise.vu::after { transform: scaleX(1); }
.ac-etape { position: relative; display: grid; grid-template-rows: auto auto auto 1fr; background: #FFFFFF; border-bottom: 5px solid #00D623; opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.ac-etape::before { content: ""; position: absolute; top: -42px; left: 0; width: 20px; height: 20px; background: #00D623; border: 3px solid #1E1F22; transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.ac-frise.vu .ac-etape { opacity: 1; transform: none; }
.ac-frise.vu .ac-etape::before { transform: scale(1); }
.ac-frise.vu .ac-etape:nth-child(2), .ac-frise.vu .ac-etape:nth-child(2)::before { transition-delay: .3s; }
.ac-frise.vu .ac-etape:nth-child(3), .ac-frise.vu .ac-etape:nth-child(3)::before { transition-delay: .6s; }
.ac-frise.vu .ac-etape:nth-child(4), .ac-frise.vu .ac-etape:nth-child(4)::before { transition-delay: .9s; }
.ac-etape:hover { box-shadow: 0 20px 40px -24px rgba(30,31,34,.45); }
.ac-etape figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.ac-etape figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.ac-etape:hover figure img { transform: scale(1.06); }
.ac-etape b { display: block; padding: 20px 22px 0; font-size: 36px; line-height: 1; color: #00A81C; }
.ac-etape h3 { margin: 10px 22px 0; font-size: 18px; }
.ac-etape p { margin: 8px 22px 24px; font-size: 15.5px; line-height: 1.6; color: #45464A; }
@media (max-width: 960px) { .ac-frise { grid-template-columns: 1fr 1fr; } .ac-frise::before, .ac-frise::after, .ac-etape::before { display: none; } .ac-frise { padding-top: 0; } }
@media (max-width: 760px) { .ac-frise { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 40px -24px 0; padding: 0 24px 8px; scroll-padding-inline: 24px; scrollbar-width: none; } .ac-frise::-webkit-scrollbar { display: none; } .ac-etape { flex: 0 0 80%; scroll-snap-align: start; } }
@media (prefers-reduced-motion: reduce) { .ac-etape { opacity: 1; transform: none; transition: none; } .ac-frise::after { transform: none; } .ac-etape::before { transform: none; } }

/* ===== Page Demander un devis : onglets (03/10/2026) ===== */
.dv-onglets { background: var(--nuit); border-bottom: 1px solid var(--trait-s); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; }
.dv-onglets .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.dv-onglets button { display: grid; gap: 4px; text-align: left; padding: 20px clamp(14px, 2vw, 28px); background: transparent; border: 0; border-bottom: 5px solid transparent; color: #C9C6C0; font: inherit; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.dv-onglets button b { font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; font-size: clamp(15px, 1.6vw, 19px); text-transform: uppercase; color: #FFFFFF; }
.dv-onglets button small { font-size: 14px; }
.dv-onglets button.on { border-bottom-color: var(--ac); background: #2A2B2F; }
.dv-onglets button:hover { background: #2A2B2F; }
.info-c h3 { margin: 18px 0 8px; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; font-size: 17px; text-transform: uppercase; }
.info-c .lk-u { display: inline-block; margin-top: 14px; }
.dv-coord { margin-top: clamp(28px, 3.5vw, 44px); }
@media (max-width: 560px) { .dv-onglets button small { display: none; } }
.pj[hidden] { display: none !important; }
/* Nos fournisseurs (07/10/2026) : accueil + Notre atelier ; logos gris, couleur au survol ou au focus */
.fz { padding: clamp(48px, 6vw, 84px) 0; background: var(--fond); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.fz-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.fz-h { margin: 10px 0 0; font-family: var(--f-titre); font-stretch: var(--f-larg); font-weight: 800; font-size: clamp(20px, 2vw, 28px); line-height: 1.05; text-transform: uppercase; text-wrap: balance; }
.fz-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: clamp(24px, 4vw, 56px); }
.fz-logos a { display: block; padding: 8px; border-radius: 6px; }
.fz-logos img { display: block; height: calc(clamp(64px, 6.4vw, 92px) * var(--r, .6)); width: auto; max-width: min(260px, 80vw); object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.fz-logos a:hover img, .fz-logos a:focus-visible img { filter: none; opacity: 1; }
.fz-logos a:focus-visible { outline: 2px solid var(--ac-fonce); outline-offset: 2px; }
@media (hover: none) { .fz-logos img { filter: none; opacity: 1; } }
@media (max-width: 760px) { .fz-in { grid-template-columns: 1fr; } .fz-logos { justify-content: center; gap: 20px 32px; } }