/* Makatrans — styles communs. Repris du <style> de la maquette Claude Design (40-makatrans, 17/09/2026),
   plus les hovers (style-hover → classes), le header transparent → plein au défilement (état React → classe),
   et le menu large / étroit (la maquette bascule à 1080 px). */
html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; color: #16181A; font-family: Barlow, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
* { box-sizing: border-box; }
a { color: #14801F; text-decoration: none; }
a:hover { color: #0C5714; }
img { display: block; max-width: 100%; }
input, textarea, button, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

@keyframes mRise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mLeft { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mRight { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mWipe { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes mCut { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes mFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mPar { from { transform: translate3d(0,-7%,0) scale(1.16); } to { transform: translate3d(0,7%,0) scale(1.16); } }
@keyframes mMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mHeroIn { from { opacity: 0; transform: translateY(34px) skewY(1.2deg); } to { opacity: 1; transform: translateY(0) skewY(0); } }
@keyframes mHeroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes mIntro { 0%, 52% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes mIntroBar { 0% { transform: scaleX(0); } 62%, 100% { transform: scaleX(1); } }
@keyframes mIntroText { 0% { opacity: 0; transform: translateY(16px); } 26%, 70% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes mDot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Apparitions de la maquette : Chrome les pilote au défilement (animation-timeline) ; ailleurs (Firefox, Safari
   anciens) l'animation reste en pause sur son état de départ et site.js la lance quand l'élément entre à l'écran. */
@supports not (animation-timeline: view()) {
  [data-reveal] { animation-play-state: paused !important; }
  [data-reveal].rv-in { animation-play-state: running !important; }
  [data-reveal].rv-scrub { animation: none !important; opacity: 1 !important; transform: scale(1.12) !important; clip-path: none !important; }
  #scroll-bar { display: none; }
}
/* Apparitions ajoutées (pages services, réalisations, contact, footer) : déclenchées par site.js partout */
.rv { opacity: 0; transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), clip-path 1.1s cubic-bezier(.7,0,.3,1); transition-delay: var(--d, 0s); }
.rv-up { transform: translateY(42px); }
.rv-left { transform: translateX(-54px); }
.rv-right { transform: translateX(54px); }
.rv-zoom { transform: scale(.94); }
.rv.rv-in { opacity: 1; transform: none; }
/* Rideaux (clip-path) : jamais observés eux-mêmes — un élément entièrement découpé n'« entre » jamais à l'écran
   pour IntersectionObserver ; c'est leur parent .rv qui les déclenche. */
.rv-wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s cubic-bezier(.7,0,.3,1) var(--d, 0s); }
.rv-cut { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.7,0,.3,1) var(--d, 0s); }
.rv-in .rv-wipe, .rv-in .rv-cut { clip-path: inset(0 0 0 0); }
.rv-bar { transform: scaleX(0); transform-origin: left center; transition: transform 1s cubic-bezier(.7,0,.3,1) var(--d, .2s); }
.rv-in .rv-bar, .rv-bar.rv-in { transform: scaleX(1); }
/* titres en lignes masquées qui montent */
.ligne { display: block; overflow: hidden; padding-bottom: .06em; }
.ligne > span { display: block; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); }
.rv-in .ligne > span, .ligne.rv-in > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .rv { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .ligne > span, .rv-bar { transform: none !important; transition: none !important; }
  .kb { animation: none !important; }
}
@keyframes kenburns { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.16) translate3d(-1.5%,-1.5%,0); } }
.kb { animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes descend { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } }

/* header : transparent sur le hero de l'accueil, plein dès qu'on défile (sentinelle de la maquette) */
#site-header { background: rgba(10,11,12,.96); border-bottom: 1px solid #23262A; }
#site-header.hd-clair { background: rgba(10,11,12,.18); border-bottom-color: transparent; }

/* menu : large / étroit (la maquette bascule à 1080 px) */
.nav-narrow { display: none !important; }
@media (max-width: 1080px) {
  .nav-wide { display: none !important; }
  .nav-narrow { display: grid !important; }
}

/* hovers de la maquette (attribut style-hover) */
.logo-lk:hover { color: #FFFFFF; }
.nav-lk { color: #EDEFEF; }                      .nav-lk:hover { color: var(--gn,#2ECC40); }
.btn-gn:hover { background: #FFFFFF !important; color: #0A0B0C; }
.btn-ghost:hover { border-color: #FFFFFF !important; background: rgba(255,255,255,.1); color: #FFFFFF; }
.card:hover { border-color: #0A0B0C !important; }
.row-lk:hover { background: var(--sf,#F4F4F1) !important; color: var(--ink,#16181A); }
.btn-bk:hover { background: var(--gn,#2ECC40) !important; color: #0A0B0C !important; }
.btn-wa:hover { background: #0A0B0C !important; color: #FFFFFF !important; border-color: #0A0B0C !important; }
.ft-lk { color: #CDD1D0; }                       .ft-lk:hover { color: var(--gn,#2ECC40); }
#menu-mobile a:hover { color: var(--gn,#2ECC40); }
[data-zoom] { cursor: zoom-in; }

/* icônes (cartes contact et pied de page) */
.ico { display: inline-flex; align-items: center; gap: 10px; }
.ico svg { width: 18px; height: 18px; flex-shrink: 0; }

/* titre du hero : « Makatrans » à 58 px déborde sous 360 px */
@media (max-width: 380px) { .h1-big { font-size: 52px !important; } }

/* pages intérieures (légales, plan, 404) */
.prose { font-size: 16.5px; line-height: 1.72; color: var(--mu,#4E5559); }
.prose h2 { margin: 48px 0 0; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 3.4vw, 38px); line-height: 1; color: var(--ink,#16181A); }
.prose h3 { margin: 30px 0 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 18px; color: var(--ink,#16181A); }
.prose p, .prose ul { margin: 14px 0 0; }
.prose li { margin: 4px 0; }
.prose strong { color: var(--ink,#16181A); }
.prose a { color: var(--gd,#14801F); text-decoration: underline; text-underline-offset: 3px; }
/* pages services : H2 en questions, listes à tirets verts (tirets de la maquette) */
.prose-svc h2:first-child { margin-top: 0; }
.prose-svc ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.prose-svc li { display: flex; gap: 12px; align-items: baseline; color: var(--ink,#16181A); }
.prose-svc li::before { content: ""; flex-shrink: 0; width: 14px; height: 3px; background: var(--gn,#2ECC40); transform: translateY(-4px); }

/* cartes de service entièrement cliquables (lien étiré sur le titre) */
.lien-carte::after { content: ""; position: absolute; inset: 0; }
.lien-carte:hover { color: var(--gd,#14801F) !important; }
.card-mini:hover { background: #FFFFFF; }

/* sous-menu Services (survol, clavier, tactile) */
.sm-panel { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; }
/* pas de :focus-within — un lien cliqué garde le focus et laissait le panneau ouvert (bug 25/09/2026) */
@media (hover: hover) { .sm:hover .sm-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.sm.sm-open .sm-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sm.sm-ferme .sm-panel { opacity: 0 !important; visibility: hidden !important; }
.sm-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.sm-item:hover { background: #16191C; color: var(--gn,#2ECC40); }

/* FAQ */
.faq summary::-webkit-details-marker { display: none; }
.faq[open] .faq-plus { transform: rotate(45deg); }
.faq-plus { transition: transform .2s ease; }

/* formulaire par étapes (page contact) */
#ct-form { scroll-margin-top: 100px; }
.grille2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.etiq { display: grid; gap: 7px; min-width: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--mu,#4E5559); }
.champ { min-width: 0; width: 100%; padding: 13px 14px; border: 1px solid #C9CBC6; border-radius: 3px; background: #FFFFFF; font-family: Barlow, system-ui, sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--ink,#16181A); }
.champ:focus { outline: 2px solid rgba(46,204,64,.5); outline-offset: 1px; border-color: var(--gd,#14801F); }
#ct-etapes li.et-on { color: var(--ink,#16181A); }
#ct-etapes li.et-on .et-barre { background: var(--gn,#2ECC40) !important; }
#ct-etapes li.et-cur { color: var(--gd,#14801F); }
.choix:hover { border-color: #0A0B0C !important; }
.choix:has(input:checked), .choix.choix-on { border-color: var(--gd,#14801F) !important; box-shadow: 0 0 0 2px var(--gn,#2ECC40) inset; }
.choix:has(input:focus-visible) { outline: 2px solid rgba(46,204,64,.6); outline-offset: 2px; }

/* ═══ Éléments communs ajoutés le 25/09/2026 (retours Wakny : plus pro, plus animé) ═══ */
.eyebrow { display: flex; align-items: center; gap: 13px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: 13px; color: var(--gd,#14801F); }
.eyebrow::before { content: ""; display: block; width: 38px; height: 4px; background: var(--gn,#2ECC40); }
.eyebrow.sur-noir { color: var(--gn,#2ECC40); }
.titre-xl { margin: 18px 0 0; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 5.6vw, 74px); line-height: .92; letter-spacing: -.01em; color: var(--ink,#16181A); }
.sur-noir .titre-xl, .titre-xl.sur-noir { color: #FFFFFF; }
.bouton { display: inline-flex; align-items: center; gap: 12px; padding: 17px 26px; border-radius: 4px; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 16px; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.bouton .fl { display: inline-block; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.bouton:hover .fl { transform: translateX(6px); }
.bouton:active { transform: translateY(1px); }
.b-vert { background: var(--gn,#2ECC40); color: #0A0B0C; }
.b-vert:hover { background: #FFFFFF; color: #0A0B0C; }
.b-vert.sur-blanc:hover { background: #0A0B0C; color: #FFFFFF; }
.b-ligne { border: 1px solid rgba(255,255,255,.45); color: #FFFFFF; font-style: normal; font-family: Barlow, sans-serif; font-weight: 600; text-transform: none; letter-spacing: 0; }
.b-ligne:hover { border-color: #FFFFFF; background: rgba(255,255,255,.1); color: #FFFFFF; }
.b-noir { background: #0A0B0C; color: #FFFFFF; }
.b-noir:hover { background: var(--gn,#2ECC40); color: #0A0B0C; }
/* reflet qui passe sur les boutons verts */
.b-vert { position: relative; overflow: hidden; }
.b-vert::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: reflet 5.5s ease-in-out infinite; pointer-events: none; }
@keyframes reflet { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.zoom-img { overflow: hidden; }
.zoom-img img { transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.zoom-img:hover img, .card:hover .zoom-img img { transform: scale(1.07); }
.card { transition: border-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(10,11,12,.55); }
.card img { transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.card:hover img { transform: scale(1.06); }

/* header : lien Contact + bouton devis */
.nav-tel { display: inline-flex; align-items: center; gap: 8px; color: #EDEFEF; font-weight: 700; font-size: 14.5px; }
.nav-tel svg { width: 17px; height: 17px; color: var(--gn,#2ECC40); }
.nav-tel:hover { color: var(--gn,#2ECC40); }
@media (max-width: 1240px) { .nav-tel .num { display: none; } }

/* ── Page service ── */
.svc-hero { position: relative; margin-top: -78px; min-height: min(92vh, 860px); display: flex; align-items: flex-end; overflow: hidden; background: #0A0B0C; color: #FFFFFF; }
.svc-hero-grille { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; padding: 150px 24px 70px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr); gap: 48px; align-items: end; }
@media (max-width: 960px) { .svc-hero-grille { grid-template-columns: 1fr; gap: 34px; padding-bottom: 56px; } }
.svc-bref { background: rgba(10,11,12,.72); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); border-top: 4px solid var(--gn,#2ECC40); padding: 26px 26px 28px; }
.svc-num { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: clamp(90px, 13vw, 190px); line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(46,204,64,.9); }
.defile-bas { position: absolute; left: 50%; bottom: 18px; width: 2px; height: 46px; background: rgba(255,255,255,.2); overflow: hidden; }
.defile-bas::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 50%; background: var(--gn,#2ECC40); animation: descend 1.8s cubic-bezier(.7,0,.3,1) infinite; }
@media (max-width: 960px) { .defile-bas { display: none; } }
/* sections en zigzag */
.zz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 90px); align-items: center; }
.zz + .zz { margin-top: clamp(70px, 9vw, 120px); }
.zz.inverse .zz-img { order: 2; }
@media (max-width: 860px) { .zz { grid-template-columns: 1fr; } .zz.inverse .zz-img { order: 0; } }
.zz-img { position: relative; isolation: isolate; }
.zz-img figure { margin: 0; height: clamp(300px, 38vw, 520px); overflow: hidden; }
.zz-img img { width: 100%; height: 100%; object-fit: cover; }
.zz-img .zz-cadre { position: absolute; inset: 22px -22px -22px 22px; border: 3px solid var(--gn,#2ECC40); z-index: -1; }
.zz.inverse .zz-img .zz-cadre { inset: 22px 22px -22px -22px; }
@media (max-width: 860px) { .zz-img .zz-cadre, .zz.inverse .zz-img .zz-cadre { inset: 14px -10px -14px 14px; } }
.zz-no { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 20px; color: var(--gd,#14801F); letter-spacing: .08em; }
.zz-texte h2 { margin: 10px 0 0; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 3.8vw, 50px); line-height: .95; color: var(--ink,#16181A); }
.zz-texte p { margin: 18px 0 0; font-size: 17px; line-height: 1.75; color: var(--mu,#4E5559); }
.zz-texte ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 1px; background: var(--ln,#DDDEDA); border: 1px solid var(--ln,#DDDEDA); }
.zz-texte li { display: flex; gap: 14px; align-items: center; background: #FFFFFF; padding: 14px 18px; font-size: 16px; color: var(--ink,#16181A); font-weight: 500; }
.zz-texte li::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; background: var(--gn,#2ECC40); transform: skewX(-12deg); }
.zz-texte strong { color: var(--ink,#16181A); }
/* section sans photo : bandeau noir */
.zz-seul { background: var(--bk,#0A0B0C); color: #FFFFFF; padding: clamp(40px, 6vw, 70px); border-left: 6px solid var(--gn,#2ECC40); }
.zz-seul h2 { color: #FFFFFF; }
.zz-seul p { color: #D3D7D6; }
/* tuiles « ce que comprend » */
.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #23262A; border: 1px solid #23262A; }
.tuile { position: relative; background: #111316; padding: 30px 26px 32px; overflow: hidden; transition: background .35s ease; }
.tuile:hover { background: #16191C; }
.tuile .n { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 54px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(46,204,64,.85); transition: color .35s ease; }
.tuile:hover .n { color: var(--gn,#2ECC40); }
.tuile .t { margin-top: 14px; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1.05; color: #FFFFFF; }
.tuile::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gn,#2ECC40); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16,1,.3,1); }
.tuile:hover::after { transform: scaleX(1); }
/* étapes */
.etapes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.etapes::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ln,#DDDEDA); }
.etapes .fil { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #0A0B0C; transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.7,0,.3,1) .2s; }
.etapes.rv-in .fil { transform: scaleX(1); }
.etape { position: relative; padding: 34px 26px 10px 0; }
.etape::before { content: ""; position: absolute; top: -6px; left: 0; width: 15px; height: 15px; background: var(--gn,#2ECC40); border: 3px solid #0A0B0C; }

/* ── Carrousels (réalisations) ── */
.car { position: relative; background: #0A0B0C; }
.car-piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.car-piste::-webkit-scrollbar { display: none; }
.car-diapo { flex: 0 0 100%; scroll-snap-align: start; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; }
.car-diapo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.car:hover .car-diapo img { transform: scale(1.04); }
.car-btn { position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; display: grid; place-items: center; background: rgba(10,11,12,.72); color: #FFFFFF; border: 1px solid rgba(255,255,255,.25); cursor: pointer; font-size: 20px; line-height: 1; transition: background .25s ease, color .25s ease, opacity .25s ease; }
.car-btn:hover { background: var(--gn,#2ECC40); color: #0A0B0C; }
.car-btn[disabled] { opacity: 0; pointer-events: none; }
.car-prec { left: 12px; } .car-suiv { right: 12px; }
.car-points { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.car-points span { width: 22px; height: 4px; background: rgba(255,255,255,.45); transition: background .3s ease, width .3s ease; }
.car-points span.on { width: 36px; background: var(--gn,#2ECC40); }
.car-compte { position: absolute; top: 12px; right: 12px; background: rgba(10,11,12,.72); color: #FFFFFF; padding: 5px 10px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .12em; font-size: 13px; }
@media (hover: none) { .car-btn { display: none; } }
.projet { border: 1px solid var(--ln,#DDDEDA); background: #FFFFFF; transition: border-color .3s ease, box-shadow .35s ease; }
.projet:hover { border-color: #0A0B0C; box-shadow: 0 30px 60px -38px rgba(10,11,12,.6); }
.projet-corps { padding: 22px 24px 26px; }
.projet-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; color: var(--mu,#4E5559); }
.projet-meta a, .projet-meta .tag { background: var(--sf,#F4F4F1); border: 1px solid var(--ln,#DDDEDA); padding: 5px 10px; color: var(--gd,#14801F); }
.projet-meta a:hover { background: var(--gn,#2ECC40); color: #0A0B0C; border-color: var(--gn,#2ECC40); }
.projet h3 { margin: 14px 0 0; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1; color: var(--ink,#16181A); }
.projet p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--mu,#4E5559); }
.projets { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 22px; }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre { cursor: pointer; background: #FFFFFF; border: 1px solid #C9CBC6; padding: 11px 16px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; color: var(--ink,#16181A); transition: background .25s ease, color .25s ease, border-color .25s ease; }
.filtre:hover { border-color: #0A0B0C; }
.filtre.on { background: #0A0B0C; color: #FFFFFF; border-color: #0A0B0C; }
.projet[hidden] { display: none !important; }

/* lightbox avec navigation */
.lb-nav { position: absolute; top: 50%; margin-top: -28px; width: 56px; height: 56px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #FFFFFF; border: 1px solid rgba(255,255,255,.25); cursor: pointer; font-size: 24px; transition: background .25s ease, color .25s ease; }
.lb-nav:hover { background: var(--gn,#2ECC40); color: #0A0B0C; }
.lb-prec { left: 18px; } .lb-suiv { right: 18px; }
.lb-legende { position: absolute; left: 24px; right: 24px; bottom: 20px; text-align: center; font-size: 14.5px; color: #CDD1D0; }
.lb-legende b { color: var(--gn,#2ECC40); font-family: 'Barlow Condensed', sans-serif; letter-spacing: .12em; margin-right: 10px; }

/* ── Footer ── */
.ft-grille { display: grid; grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(170px, 1fr)); gap: 44px; }
@media (max-width: 1000px) { .ft-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ft-grille { grid-template-columns: 1fr 1fr; gap: 36px 20px; } .ft-grille > :first-child, .ft-grille > :last-child { grid-column: 1 / -1; } }
.ft-titre { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: 13px; color: var(--gn,#2ECC40); }
.ft-liste { margin-top: 16px; display: grid; gap: 10px; font-size: 15px; }
.ft-liste a { color: #CDD1D0; display: inline-flex; align-items: center; gap: 10px; transition: color .2s ease, transform .25s ease; }
.ft-liste a:hover { color: var(--gn,#2ECC40); transform: translateX(4px); }
.ft-liste svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--gn,#2ECC40); }
.ft-mot { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(64px, 17vw, 260px); line-height: .8; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px #2A2E32; white-space: nowrap; text-align: center; user-select: none; }
.ft-haut { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid #2A2E32; color: #FFFFFF; transition: background .25s ease, color .25s ease; }
.ft-haut:hover { background: var(--gn,#2ECC40); color: #0A0B0C; }

@media (max-width: 700px) {
  #lightbox { padding: 20px 10px 90px !important; }
  .lb-nav { top: auto; bottom: 18px; margin-top: 0; width: 48px; height: 48px; }
  .lb-legende { bottom: 76px; font-size: 13px; }
}
/* page contact */
.ct-hero { position: relative; margin-top: -78px; background: #0A0B0C; color: #FFFFFF; overflow: hidden; }
.ct-grille { position: relative; max-width: 1320px; margin: 0 auto; padding: 130px 24px 80px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
@media (max-width: 960px) { .ct-grille { grid-template-columns: 1fr; gap: 40px; padding-top: 118px; } }
.ct-tuiles { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 480px) { .ct-tuiles { grid-template-columns: 1fr; } }
.ct-tuile { display: grid; gap: 6px; padding: 18px 18px 20px; border: 1px solid #23262A; background: #111316; color: #FFFFFF; transition: border-color .25s ease, background .25s ease, transform .3s cubic-bezier(.16,1,.3,1); }
a.ct-tuile:hover { border-color: var(--gn,#2ECC40); background: #16191C; transform: translateY(-3px); color: #FFFFFF; }
.ct-tuile .l { display: inline-flex; align-items: center; gap: 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--gn,#2ECC40); }
.ct-tuile .l svg { width: 16px; height: 16px; }
.ct-tuile .v { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 23px; line-height: 1.05; word-break: break-word; }
.ct-tuile .v.petit { font-family: Barlow, sans-serif; font-style: normal; font-weight: 600; font-size: 15.5px; }

/* ═══ Accueil enrichi (25/09/2026, retours Wakny : « beaucoup trop simple », plus d'animation au défilement) ═══ */
/* cartes services */
.svc-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.svc-carte { position: relative; display: block; border: 1px solid var(--ln,#DDDEDA); background: #FFFFFF; color: var(--ink,#16181A); overflow: hidden; transition: border-color .3s ease, transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
.svc-carte:hover { border-color: #0A0B0C; transform: translateY(-6px); box-shadow: 0 30px 60px -36px rgba(10,11,12,.55); color: var(--ink,#16181A); }
.svc-carte .ph { position: relative; height: 250px; overflow: hidden; }
.svc-carte .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .6s ease; filter: saturate(.9); }
.svc-carte:hover .ph img { transform: scale(1.08); filter: saturate(1.1); }
.svc-carte .no { position: absolute; left: 18px; top: 14px; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 46px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px #FFFFFF; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.svc-carte .corps { padding: 26px 26px 28px; }
.svc-carte h3 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1; }
.svc-carte p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.66; color: var(--mu,#4E5559); }
.svc-carte .plus { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 13.5px; color: var(--gd,#14801F); }
.svc-carte .plus .fl { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.svc-carte:hover .plus .fl { transform: translateX(8px); }
.svc-carte::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--gn,#2ECC40); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.svc-carte:hover::after { transform: scaleX(1); }

/* chiffres qui comptent */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chiffre { padding: 40px 28px; border-right: 1px solid #23262A; }
.chiffre:last-child { border-right: 0; }

.chiffre .val { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: clamp(54px, 6vw, 86px); line-height: .9; color: #FFFFFF; white-space: nowrap; }
.chiffre .val small { font-size: .45em; color: var(--gn,#2ECC40); margin-left: 6px; }
.chiffre .lib { margin-top: 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: 13px; color: #B9BEBD; }

/* spécialité citernes */
.spec { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
@media (max-width: 900px) { .spec { grid-template-columns: 1fr; } }
.spec-img { position: relative; height: clamp(360px, 44vw, 600px); }
.spec-img .a { position: absolute; left: 0; top: 0; width: 78%; height: 82%; overflow: hidden; }
.spec-img .b { position: absolute; right: 0; bottom: 0; width: 52%; height: 50%; overflow: hidden; border: 8px solid #FFFFFF; box-shadow: 0 30px 60px -30px rgba(10,11,12,.5); }
.spec-img img { width: 100%; height: 100%; object-fit: cover; }
.spec-badge { position: absolute; left: 6%; bottom: 8%; background: var(--gn,#2ECC40); color: #0A0B0C; padding: 18px 22px 16px; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; line-height: .9; box-shadow: 0 20px 40px -20px rgba(10,11,12,.6); }
.spec-badge b { display: block; font-size: 44px; }
.spec-badge span { font-size: 14px; letter-spacing: .12em; }
.spec-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.spec-points li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.spec-points .n { width: 44px; height: 44px; display: grid; place-items: center; background: #0A0B0C; color: var(--gn,#2ECC40); font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 20px; }
.spec-points b { display: block; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 20px; line-height: 1.05; color: var(--ink,#16181A); }
.spec-points span { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.6; color: var(--mu,#4E5559); }

/* galerie horizontale épinglée (réalisations de l'accueil) */
.hgal { position: relative; background: var(--sf,#F4F4F1); color: var(--ink,#16181A); border-top: 1px solid var(--ln,#DDDEDA); }
.hgal-colle { position: sticky; top: 78px; height: calc(100vh - 78px); min-height: 560px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hgal-tete { max-width: 1320px; width: 100%; margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.hgal-piste { display: flex; gap: 22px; padding: 34px 24px 0 max(24px, calc((100vw - 1320px) / 2 + 24px)); will-change: transform; }
.hgal-carte { position: relative; flex: 0 0 auto; width: clamp(300px, 34vw, 520px); height: clamp(300px, 52vh, 520px); margin: 0; overflow: hidden; cursor: zoom-in; background: #0A0B0C; color: #FFFFFF; }
.hgal-carte.haute { width: clamp(240px, 24vw, 360px); }
.hgal-carte img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 1.4s cubic-bezier(.16,1,.3,1), filter .8s ease; filter: grayscale(.55) brightness(.8); }
.hgal-carte.vue img { transform: scale(1); filter: none; }
.hgal-carte:hover img { transform: scale(1.05); }
.hgal-carte figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 18px; background: linear-gradient(transparent, rgba(10,11,12,.92)); transform: translateY(12px); opacity: 0; transition: transform .6s cubic-bezier(.16,1,.3,1) .15s, opacity .6s ease .15s; }
.hgal-carte.vue figcaption { transform: none; opacity: 1; }
.hgal-carte figcaption b { display: block; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1.05; }
.hgal-carte figcaption span { display: block; margin-top: 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--gn,#2ECC40); }
.hgal-fin { flex: 0 0 auto; width: clamp(260px, 26vw, 380px); display: grid; align-content: center; gap: 18px; padding: 0 20px; }
.hgal-barre { max-width: 1320px; width: calc(100% - 48px); margin: 30px auto 0; height: 3px; background: var(--ln,#DDDEDA); }
.hgal-barre span { display: block; height: 100%; width: 100%; background: var(--gn,#2ECC40); transform: scaleX(0); transform-origin: left; }
.hgal-nav { display: flex; gap: 8px; }
.hgal-nav button { width: 50px; height: 50px; display: grid; place-items: center; background: #FFFFFF; color: #0A0B0C; border: 1px solid #C9CBC6; cursor: pointer; font-size: 20px; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.hgal-nav button:hover { background: var(--gn,#2ECC40); color: #0A0B0C; border-color: var(--gn,#2ECC40); }
/* mobile, ou mouvement réduit : carrousel à glisser, sans épinglage */
.hgal.libre .hgal-colle { position: static; height: auto; min-height: 0; padding: 90px 0 70px; }
.hgal.libre .hgal-piste { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; transform: none !important; }
.hgal.libre .hgal-piste::-webkit-scrollbar { display: none; }
.hgal.libre .hgal-carte { scroll-snap-align: center; width: 78vw; height: 64vw; max-height: 420px; }
.hgal.libre .hgal-carte.haute { width: 60vw; height: 64vw; }
.hgal.libre .hgal-fin { width: 70vw; scroll-snap-align: center; }

/* étapes en frise qui se remplit au défilement */
.proc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
@media (max-width: 900px) { .proc { grid-template-columns: 1fr; } }
.proc-gauche { position: sticky; top: 130px; }
@media (max-width: 900px) { .proc-gauche { position: static; } }
.proc-liste { position: relative; list-style: none; margin: 0; padding: 0 0 0 64px; }
.proc-liste::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 3px; background: #23262A; }
.proc-liste::after { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 3px; background: var(--gn,#2ECC40); transform: scaleY(var(--p, 0)); transform-origin: top; }
.proc-etape { position: relative; padding: 0 0 64px; opacity: .35; transform: translateX(16px); transition: opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.proc-etape:last-child { padding-bottom: 0; }
.proc-etape.actif { opacity: 1; transform: none; }
.proc-pastille { position: absolute; left: -64px; top: 0; width: 45px; height: 45px; display: grid; place-items: center; background: #0A0B0C; border: 3px solid #3A3F44; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 19px; color: #8E9493; transition: background .4s ease, border-color .4s ease, color .4s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.proc-etape.actif .proc-pastille { background: var(--gn,#2ECC40); border-color: var(--gn,#2ECC40); color: #0A0B0C; transform: rotate(-8deg) scale(1.08); }
.proc-etape .gros { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: clamp(64px, 8vw, 112px); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px #3A3F44; transition: -webkit-text-stroke-color .5s ease; }
.proc-etape.actif .gros { -webkit-text-stroke-color: var(--gn,#2ECC40); }
.proc-etape h3 { margin: 10px 0 0; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 3.2vw, 40px); line-height: 1; color: #FFFFFF; }
.proc-etape p { margin: 12px 0 0; max-width: 520px; font-size: 16.5px; line-height: 1.7; color: #B9BEBD; }
.proc-etape .tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.proc-etape .tags span { border: 1px solid #2A2E32; padding: 6px 11px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: #CDD1D0; }
@media (prefers-reduced-motion: reduce) { .proc-etape { opacity: 1; transform: none; } .hgal-carte img { transform: none; filter: none; } .hgal-carte figcaption { opacity: 1; transform: none; } }

/* formulaire : cartes « quel chantier » en texte seul */
.choix-txt { display: grid; place-items: center; min-height: 84px; padding: 14px 12px !important; text-align: center; }

/* Bouton flottant : Philippe, Loman, Contact (Wakny 25/09/2026 : « quand on va dessus il est tout noir ») */
.fab-groupe { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 8px; justify-items: end; }
.fab { display: inline-flex; align-items: center; gap: 10px; min-width: 238px; justify-content: flex-start; background: var(--gn,#2ECC40); color: #0A0B0C; padding: 13px 20px; border-radius: 99px; font-weight: 700; font-size: 15px; box-shadow: 0 18px 40px -14px rgba(0,0,0,.55); transition: background .25s ease, color .25s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.fab svg { width: 18px; height: 18px; flex-shrink: 0; }
.fab .fab-l { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; }
.fab .fab-n { margin-left: auto; }
.fab:hover { background: #0A0B0C; color: #FFFFFF; transform: translateX(-4px); }
.fab:hover svg { color: var(--gn,#2ECC40); }
.fab-ct { background: #0A0B0C; color: #FFFFFF; }
.fab-ct svg { color: var(--gn,#2ECC40); }
.fab-ct:hover { background: #FFFFFF; color: #0A0B0C; }
.fab-groupe .fab { animation: mFade .5s both; }
.fab-groupe .fab:nth-child(2) { animation-delay: .06s; } .fab-groupe .fab:nth-child(3) { animation-delay: .12s; }
/* mobile : barre fixe de 3 boutons en bas de l'écran */
@media (max-width: 1080px) {
  .fab-groupe { left: 0; right: 0; bottom: 0; grid-template-columns: repeat(3, 1fr); gap: 0; background: #0A0B0C; border-top: 2px solid var(--gn,#2ECC40); padding-bottom: env(safe-area-inset-bottom); }
  .fab { min-width: 0; border-radius: 0; justify-content: center; flex-direction: column; gap: 3px; padding: 9px 4px 10px; font-size: 13px; box-shadow: none; animation: none !important; }
  .fab .fab-n { margin-left: 0; font-size: 12.5px; }
  .fab .fab-l { font-size: 11.5px; }
  .fab:hover { transform: none; }
  .fab + .fab { border-left: 1px solid rgba(10,11,12,.25); }
  .fab-ct { border-left: 0 !important; }
}

/* Grilles symétriques (règle be-web-fix 08) : 3 colonnes, puis 2, puis 1 — jamais de rangée incomplète type 5 + 1 */
@media (max-width: 1000px) {
  .svc-grille, .projets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres, .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffre:nth-child(2n) { border-right: 0; } .chiffre:nth-child(-n+2) { border-bottom: 1px solid #23262A; }
  .autres-svc { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  .projets { grid-template-columns: 1fr !important; }   /* pas de rail : un carrousel dans un rail horizontal se contrarie au doigt */
  /* règle be-web-fix 01 : sur mobile une liste ne s'empile pas, elle devient un rail à faire glisser */
  .tuiles, .svc-grille, .autres-svc { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; margin-left: -24px; margin-right: -24px; padding: 0 24px 6px; scroll-padding: 0 24px; background: none; border: 0; }
  .tuiles::-webkit-scrollbar, .svc-grille::-webkit-scrollbar, .autres-svc::-webkit-scrollbar { display: none; }
  .tuiles > *, .svc-grille > *, .autres-svc > * { flex: 0 0 82%; scroll-snap-align: start; }
  .tuile { border: 1px solid #23262A; }
}
@media (max-width: 520px) {
  .chiffres, .etapes { grid-template-columns: 1fr; }
  .chiffre { border-right: 0; border-bottom: 1px solid #23262A; }
}
.choix-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choix-grille .choix-autre { grid-column: 1 / -1; min-height: 56px; }
@media (max-width: 520px) { .choix-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* bandeau « Et aussi » de l’accueil : services secondaires en liens (27/09/2026) */
.aussi-lk { color: var(--ink,#16181A); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gn,#2ECC40); text-underline-offset: 4px; }
.aussi-lk:hover { color: var(--gd,#14801F); }

/* ═══════════════════════════════════════════════════════════════════════
   BLOG — standard « article digeste » BE WEB, adapté aux classes/variables
   du site Makatrans (var(--gn)=accent, var(--gd)=accent foncé, var(--ink),
   var(--mu), var(--ln), var(--sf) ; animation .rv/.rv-up au lieu de .reveal
   — c'est ce que site.js observe). Bloc ajouté une seule fois (27/09/2026).
   ═══════════════════════════════════════════════════════════════════════ */

/* Puces accent robustes dans le corps d'article */
.article-body ul { list-style: none; padding-left: 0; }
.article-body ul li { position: relative; padding-left: 1.1rem; }
.article-body ul li::before { content: '•'; position: absolute; left: 0; color: var(--gn,#2ECC40); font-weight: 700; }

/* Liens de contenu visibles, SAUF les boutons (.bouton = CTA, .reno-btn = encadré réalisations) */
.article-body a:not(.bouton):not(.reno-btn) { color: var(--gd,#14801F); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:not(.bouton):not(.reno-btn):hover { color: var(--gn,#2ECC40); }

.article-meta { margin: 18px 0 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; color: var(--mu,#4E5559); }
.publish-gate__locked { margin: 28px 0; padding: 20px 24px; border: 1px dashed var(--ln,#DDDEDA); border-radius: 4px; color: var(--mu,#4E5559); font-size: 15px; }

/* Résumé · sommaire · exergue */
.article-brief { margin: 28px 0 34px; padding: 26px 28px; background: rgba(46,204,64,.07); border-left: 4px solid var(--gn,#2ECC40); border-radius: 4px; }
.article-brief h2 { margin: 0 0 14px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--gd,#14801F); }
.article-brief ul { margin: 0; display: grid; gap: 10px; font-size: 16px; line-height: 1.6; color: var(--ink,#16181A); }
.article-toc { margin: 0 0 34px; padding: 24px 28px; border: 1px solid var(--ln,#DDDEDA); border-radius: 4px; }
.article-toc h2 { margin: 0 0 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--mu,#4E5559); }
.article-toc ol { margin: 0; padding-left: 1.3rem; }
.article-toc li { margin-bottom: 6px; font-size: 15.5px; }
.article-quote { margin: 34px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--gn,#2ECC40); font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700; font-size: 1.3rem; line-height: 1.45; color: var(--ink,#16181A); }
.article-faq { margin-top: 10px; }

/* Encadré « Découvrez nos réalisations » (milieu d'article).
   ⚠️ Bouton ciblé `.article-realisations a.reno-btn` (haute spécificité) : sans ça, la règle
   générique `.article-body a` rendrait le texte du bouton accent-sur-accent = invisible. */
.article-realisations { margin: 48px 0; padding: 48px 30px; text-align: center; background: linear-gradient(160deg, rgba(46,204,64,.10), rgba(46,204,64,.03)); border: 1px solid rgba(46,204,64,.28); border-radius: 6px; }
.reno-eyebrow { display: inline-block; margin-bottom: 10px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; color: var(--gd,#14801F); }
.article-realisations h3 { margin: 0 0 10px; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 1.6rem; color: var(--ink,#16181A); }
.reno-sub { margin: 0 auto 26px; max-width: 460px; color: var(--mu,#4E5559); font-size: 15.5px; }
.reno-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.article-realisations a.reno-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; background: var(--gn,#2ECC40); color: #0A0B0C; text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; border-radius: 999px; box-shadow: 0 4px 14px rgba(46,204,64,.30); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.article-realisations a.reno-btn span { transition: transform .18s ease; }
.article-realisations a.reno-btn:hover { background: #0A0B0C; color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(46,204,64,.38); }
.article-realisations a.reno-btn:hover span { transform: translateX(4px); }

/* FAQ d'article (même langage visuel que le `.faq` des pages service) */
.article-faq .faq-item { border-bottom: 1px solid var(--ln,#DDDEDA); padding: 20px 0; }
.article-faq .faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 18px; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 19px; line-height: 1.15; color: var(--ink,#16181A); }
.article-faq .faq-item summary::-webkit-details-marker { display: none; }
.article-faq .faq-item summary::after { content: '+'; flex-shrink: 0; color: var(--gd,#14801F); font-size: 24px; line-height: 1; }
.article-faq .faq-item[open] summary::after { content: '−'; }
.article-faq .faq-answer p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--mu,#4E5559); }

/* À lire aussi · On intervient aussi */
.article-more { margin: 40px 0; padding-top: 28px; border-top: 1px solid var(--ln,#DDDEDA); }
.article-more h3 { margin: 0 0 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 17px; color: var(--ink,#16181A); }
.article-more ul { display: grid; gap: 8px; }
.article-zones { margin: 40px 0; padding: 20px 26px; border-left: 3px solid var(--gn,#2ECC40); background: var(--sf,#F4F4F1); }
.article-zones h3 { margin: 0 0 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 17px; color: var(--ink,#16181A); }
.article-zones p { margin: 0; color: var(--mu,#4E5559); font-size: 15.5px; line-height: 1.6; }

/* CTA de fin d'article : même style que .article-cta ailleurs sur le site (fond sombre) */
.article-cta { margin: 48px 0 0; padding: 44px 32px; text-align: center; background: var(--bk,#0A0B0C); border-radius: 6px; color: #FFFFFF; }
.article-cta h3 { margin: 0 0 10px; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 1.7rem; }
.article-cta p { margin: 0 0 22px; color: #D3D7D6; font-size: 15.5px; }

/* Cartes du blog (index + section « Dernières actualités » de l'accueil) */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.blog-grid[data-max] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .blog-grid[data-max] { grid-template-columns: 1fr; } }
.blog-card { display: block; padding: 28px 26px; background: #FFFFFF; border: 1px solid var(--ln,#DDDEDA); border-radius: 4px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { border-color: var(--gn,#2ECC40); transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(10,11,12,.35); }
.blog-card__img { display: block; width: calc(100% + 52px); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: -28px -26px 20px; border-radius: 4px 4px 0 0; }
.blog-card__date { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; color: var(--gd,#14801F); }
.blog-card h3 { margin: 12px 0 0; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1.08; color: var(--ink,#16181A); }
.blog-card p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--mu,#4E5559); }
.blog-card__lire { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: var(--gd,#14801F); }

/* Vidéo du bandeau d'accueil (28/10/2026) : masquée si mouvement réduit, la photo dessous prend le relais */
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* Galerie d'un projet seul sur une page service (Location : « Notre matériel », 28/10/2026) : 3 colonnes, 2 sur tablette, 2 serrées sur téléphone */
.galerie-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.galerie-svc figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sf,#F4F4F1); cursor: zoom-in; }
.galerie-svc img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) { .galerie-svc figure:hover img { transform: scale(1.04); } }
@media (max-width: 860px) { .galerie-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* Service de formulaires BE WEB (bascule du 09/11/2026) : zone de message du script commun */
.beweb-message { margin: 4px 0 0; }
.beweb-message:empty { display: none; }
.beweb-message p { margin: 0; font-size: 15px; line-height: 1.6; }
.beweb-message p + p { margin-top: 6px; }
.beweb-message a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.beweb-erreur { border: 2px solid #B3261E; background: #FDECEA; color: #7A1A14; padding: 14px 16px; overflow-wrap: anywhere; }
.beweb-ok { border: 2px solid var(--gn,#2ECC40); background: var(--sf,#F4F4F1); color: var(--ink,#16181A); padding: 34px 26px; text-align: center; }
.beweb-ok p { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 24px; line-height: 1.15; }
.beweb-turnstile { margin: 4px 0 0; }