/* ========================================================
   Groupe Murco — couche « premium » (13 oct. 2026)
   Moins d'éléments, plus d'air, des fonds qui se fondent l'un dans l'autre.
   Chargée après styles.v2.css.
   ======================================================== */
:root { --r-l: 22px; --r-m: 16px; --pad: clamp(4.5rem, 9vw, 8rem); }

/* Page plus calme : plus de grain, de quadrillage ni de mots géants */
body::before { display: none; }
[data-word]::after { display: none; }
.bead-top::before { display: none; }
.season-bar { display: none; }
.scroll-cue { bottom: 1.6rem; }

/* Typographie plus fine */
h1 { font-size: clamp(2.4rem, 4.8vw, 4.2rem); letter-spacing: .005em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); letter-spacing: .005em; }
.section-head p, .lead { font-size: 1.12rem; }
.eyebrow { letter-spacing: .18em; font-size: .78rem; }

/* Fonds : une seule ambiance, de l'ombre vers la lumière, sans quadrillage */
.section { padding: var(--pad) 0; }
.joint-section, .process-section, .sim-section, .section-plain, .section-mist,
main > .section.bead-top:not([class*="-"]) { background: var(--white); }
#soffites-fascias { background: linear-gradient(180deg, var(--white) 0%, var(--mist-2) 100%); }
#avant-apres { background: var(--white); }
#services { background: linear-gradient(180deg, var(--mist-2) 0%, var(--white) 100%); }
#methode { background: var(--white); }
.quiz-section, .crew {
  background: radial-gradient(120% 120% at 80% 0%, #2A2F33 0%, var(--ink) 65%);
}

/* Héros plein écran : la vidéo respire, texte en bas à gauche */
.hero-bg { min-height: calc(100svh - 82px); align-items: flex-end; }
.hero-bg::after {
  background:
    linear-gradient(180deg, rgba(18,21,24,.35) 0%, rgba(18,21,24,0) 30%, rgba(18,21,24,.55) 70%, rgba(18,21,24,.9) 100%),
    linear-gradient(90deg, rgba(18,21,24,.55) 0%, rgba(18,21,24,0) 60%);
}
.hero-bg .hero-inner { padding: 0 0 clamp(5rem, 11vh, 8rem); }
.hero-bg .hero-copy { max-width: 62ch; }
.hero-bg h1 { max-width: 17ch; }
.hero-bg .lead { font-size: 1.12rem; max-width: 46ch; }
.hero-bg .trust { display: none; }

/* Images et vidéos : coins doux, ombre légère */
.step-frame, .joint-duo, .joint-duo img, .svc-shot, .job-tile, .svc, .joint-card, .quiz-card, .process {
  border-radius: var(--r-l);
}
.joint-card { background: #fff; border: 0; box-shadow: 0 30px 60px -34px rgba(18,21,24,.35); padding: 1.1rem; }
.joint-card:hover { transform: none; }
.svc-grid { border: 0; background: transparent; gap: 1.4rem; border-radius: 0; overflow: visible; }
.svc, .section-mist .svc { border-radius: var(--r-l); background: #fff; box-shadow: 0 30px 60px -36px rgba(18,21,24,.35); }
.svc-photo { margin: -2.4rem -2rem 1.4rem; border-radius: var(--r-l) var(--r-l) 0 0; }

/* Galerie de réalisations : grille nette */
.job-grid { gap: 1.1rem; }
.job-tile { overflow: hidden; box-shadow: 0 24px 50px -32px rgba(18,21,24,.45); }
.job-tile img { transition: transform .9s var(--ease); }
.job-tile:hover img { transform: scale(1.05); }

/* Marges plus aérées entre un titre et son contenu */
.section-head { margin-bottom: 3rem; }
.joint-duo-wrap { margin-top: clamp(3rem, 6vw, 5rem); }
.joint-duo-title { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.photo-note { text-align: center; opacity: .7; font-size: .85rem; margin-top: 1.2rem; }

/* Secteur : simple ligne de liens */
.zone-slim { padding: 3.5rem 0; background: var(--mist-2); text-align: center; }
.zone-slim h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.zone-slim .svc-nav { justify-content: center; }

@media (max-width: 760px) {
  .hero-bg { min-height: calc(92svh - 70px); }
  .svc-photo { margin: -2.4rem -1.4rem 1.2rem; }
}

/* Portfolio filtrable */
.pf-filters { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 0 0 2rem; }
.pf-chip { font: inherit; font-weight: 700; font-size: .92rem; padding: .6rem 1.2rem; border-radius: 999px; border: 1.5px solid var(--alu); background: #fff; color: var(--graphite); cursor: pointer; transition: all .25s var(--ease); }
.pf-chip:hover { border-color: var(--amber); }
.pf-chip.on { background: var(--graphite); color: #fff; border-color: var(--graphite); }
.pf-grid .job-tile[hidden] { display: none; }
.tee-figure { margin: 2rem 0; text-align: center; }
.tee-figure img { width: min(100%, 360px); margin-inline: auto; filter: drop-shadow(0 24px 30px rgba(18,21,24,.25)); }
.tee-figure figcaption { font-size: .9rem; color: var(--slate); margin-top: .6rem; }

/* ===== Fond vivant : une seule ambiance qui relie toutes les sections ===== */
html { background: #F6F1E8; }
body { background: transparent; }
.bg-live { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #FBF8F2 0%, #F4EDE1 100%); }
.bg-live::before { content: ""; position: absolute; inset: -20%; will-change: transform;
  background:
    radial-gradient(38% 34% at 18% 22%, rgba(227,160,49,.30), transparent 70%),
    radial-gradient(34% 32% at 82% 30%, rgba(84,112,146,.22), transparent 70%),
    radial-gradient(40% 36% at 60% 82%, rgba(227,160,49,.20), transparent 70%),
    radial-gradient(30% 30% at 8% 88%, rgba(84,112,146,.16), transparent 70%);
  animation: bgdrift 28s ease-in-out infinite alternate; }
.bg-live::after { content: ""; position: absolute; inset: -4%; opacity: .08; will-change: transform;
  background: url("../photos/fonds/maison-bleue-flou.jpg") center / cover no-repeat;
  filter: saturate(.9); animation: bgzoom 40s ease-in-out infinite alternate; }
@keyframes bgdrift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } }
@keyframes bgzoom { from { transform: scale(1); } to { transform: scale(1.1) translate3d(-1.5%, 1%, 0); } }
@media (prefers-reduced-motion: reduce) { .bg-live::before, .bg-live::after { animation: none; } }

/* Les sections claires deviennent transparentes : on voit le fond respirer derrière */
.section, .joint-section, .process-section, .sim-section, .section-plain, .section-mist, .zone-slim,
main > .section.bead-top:not([class*="-"]), #soffites-fascias, #avant-apres, #services, #methode, #peinture-avant-apres,
.est-teaser, .city-jobs { background: transparent !important; }
/* Sections sombres : panneaux flottants arrondis, pour s'intégrer au lieu de couper la page */
.quiz-section, .crew { margin: 1.5rem clamp(.6rem, 2vw, 1.6rem); border-radius: 32px; overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(18,21,24,.55); }
.cta-band { margin: 1.5rem clamp(.6rem, 2vw, 1.6rem) 3rem; border-radius: 32px; }
.site-footer { border-radius: 32px 32px 0 0; margin: 0 clamp(.6rem, 2vw, 1.6rem); }
/* Cartes en verre : lisibles sur le fond animé */
.joint-card, .process, .est-tip, .svc, .section-mist .svc, .faq details, .section-mist .faq details {
  background: rgba(255,255,255,.72) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7) !important; }
.svc-grid { background: transparent !important; }
.pf-chip { background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.quiz-section, .crew { background: radial-gradient(120% 120% at 80% 0%, #2A2F33 0%, #121518 65%) !important; }
.zone-slim { text-align: center; }

/* Soffites en aluminium */
.alu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-bottom: 2.4rem; }
.alu-card { padding: 1.6rem 1.7rem; border-radius: var(--r-l); background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 30px 60px -38px rgba(18,21,24,.4); }
.alu-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.alu-table th { text-align: left; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-dp); padding: .4rem .5rem; }
.alu-table td { padding: .55rem .5rem; border-top: 1px solid rgba(216,208,196,.8); }
.alu-note { font-size: .86rem; color: var(--slate); margin: 1rem 0 0; }
.alu-list { margin: 0 0 1rem; padding-left: 1.2rem; }
.alu-list li { margin-bottom: .45rem; }
.alu-warranty { background: var(--mist-2); border-radius: 12px; padding: .8rem 1rem; font-size: .93rem; margin: 0; }
.alu-colors { padding: 1.8rem; border-radius: var(--r-l); background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 30px 60px -38px rgba(18,21,24,.4); }
.alu-colors h3 { font-size: 1.4rem; margin-bottom: .2rem; }
.alu-sub { font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-dp); margin: 1.2rem 0 .6rem; }
.swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.swatches li { display: flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .4rem; border-radius: 999px; background: #fff; border: 1px solid var(--alu); font-size: .86rem; }
.swatches i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(18,21,24,.18); flex: none; }
@media (max-width: 860px) { .alu-grid { grid-template-columns: 1fr; } }

/* Couleurs les plus posées */
.pop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 0 0 .8rem; }
.pop-card { display: flex; align-items: center; gap: 1.2rem; padding: 1.4rem 1.6rem; border-radius: var(--r-l); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 30px 60px -38px rgba(18,21,24,.45); }
.pop-card h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.9rem; letter-spacing: .01em; margin: 0 0 .15rem; }
.pop-card p { margin: 0; font-size: .98rem; }
.pop-black { background: #17191B; color: #fff; }
.pop-black p { color: #C9CFD3; }
.pop-white { background: rgba(255,255,255,.85); }
.pop-dot { width: 64px; height: 64px; border-radius: 50%; flex: none; border: 3px solid rgba(255,255,255,.55); box-shadow: 0 8px 20px -6px rgba(0,0,0,.4); }
.pop-white .pop-dot { border-color: var(--alu); }
.pop-note { text-align: center; font-size: .92rem; color: var(--slate); margin: 0 0 2.2rem; }
.swatches li.pop { border-color: var(--amber); background: #FFF8EA; font-weight: 700; }
@media (max-width: 700px) { .pop-grid { grid-template-columns: 1fr; } }

.scellants { margin: 3rem 0; }
.scellants .section-head { margin-bottom: 2rem; }
.scel-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.05; margin: 0 0 .5rem; }
.scel-brand { color: var(--amber-dp); font-weight: 700; font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 1rem; }

/* Aperçu interactif du soffite */
.sof-picker { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; margin-top: 1rem; }
.sof-stage { position: relative; border-radius: var(--r-l); overflow: hidden; box-shadow: 0 30px 60px -34px rgba(18,21,24,.5); }
.sof-svg { display: block; width: 100%; height: auto; }
.sof-svg .sof-color { color: #1D1E20; transition: color .35s var(--ease); }
.sof-name { position: absolute; left: 14px; bottom: 14px; padding: .35rem .9rem; border-radius: 999px; background: rgba(18,21,24,.82); color: #fff; font-weight: 700; font-size: .86rem; }
.sof-swatches { display: flex; flex-wrap: wrap; gap: .45rem; }
.sof-sw { font: inherit; display: flex; align-items: center; gap: .45rem; padding: .3rem .75rem .3rem .35rem; border-radius: 999px; background: #fff; border: 1.5px solid var(--alu); font-size: .82rem; cursor: pointer; transition: all .2s var(--ease); }
.sof-sw i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(18,21,24,.2); flex: none; }
.sof-sw:hover { border-color: var(--amber); }
.sof-sw.pop { background: #FFF8EA; font-weight: 700; }
.sof-sw[aria-checked="true"] { border-color: var(--graphite); box-shadow: 0 0 0 2px var(--amber); }
@media (max-width: 860px) { .sof-picker { grid-template-columns: 1fr; } }

.alu-block { margin: 3rem 0; }

/* Héros : trois vidéos de calfeutrage à toi, sur un fond sombre flou */
.hero-blur { background: #14171A url("../photos/calfeutrage/resultat.jpg") center / cover no-repeat; filter: blur(46px) brightness(.45) saturate(1.1); transform: scale(1.25); }
.hero-bg .hero-inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.hero-reels { display: flex; gap: clamp(.6rem, 1.4vw, 1.1rem); justify-content: flex-end; align-items: flex-end; padding-bottom: .4rem; }
.hero-reel { position: relative; margin: 0; flex: 1 1 0; max-width: 210px; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 70px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.12); background: #0c0e10; }
.hero-reel:nth-child(1) { transform: translateY(-26px); }
.hero-reel:nth-child(3) { transform: translateY(-14px); }
.hero-reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-reel figcaption { position: absolute; left: 10px; bottom: 10px; padding: .3rem .7rem; border-radius: 999px; background: rgba(18,21,24,.82); color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 980px) {
  .hero-bg .hero-inner { grid-template-columns: 1fr; }
  .hero-reels { justify-content: flex-start; margin-top: 1.6rem; }
  .hero-reel { max-width: 150px; }
  .hero-reel:nth-child(n) { transform: none; }
}
@media (max-width: 560px) { .hero-reel:nth-child(3) { display: none; } .hero-reel { max-width: 46%; } }

/* Héros : retour à la vidéo plein écran, texte en bas à gauche */
.hero-bg .hero-inner { display: block; }
.hero-reels { display: none; }
.hero-bg .hero-copy { max-width: 62ch; }

.crew-video img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===================== Menu déroulant, formulaire d'entrée, pages de services ===================== */
.hidden { display: none !important; }
.header-inner { gap: 1.2rem; }
.nav { gap: 1.25rem; align-items: center; }
.nav a { font-size: .93rem; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item.has-sub > a { padding-right: 1rem; }
.nav-item.has-sub > a::before { content: ""; position: absolute; right: 1px; top: 50%; margin-top: -2px; border: 4px solid transparent; border-top-color: currentColor; }
.nav .sub { position: absolute; left: -1rem; top: calc(100% - 2px); min-width: 300px; max-height: 70vh; overflow-y: auto; background: var(--pure); border: 1px solid var(--alu); border-radius: var(--r-m); box-shadow: var(--sh-m); padding: .55rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; z-index: 130; }
.nav-item:hover > .sub, .nav-item:focus-within > .sub { opacity: 1; visibility: visible; transform: none; }
.nav .sub a { display: block; padding: .55rem .8rem; border-radius: 6px; font-size: .92rem; font-weight: 600; }
.nav .sub a::after { display: none; }
.nav .sub a:hover { background: var(--mist); }
.nav .sub a:first-child { color: var(--amber-dp); }
.nav-villes .sub { min-width: 240px; }
@media (max-width: 1250px) { .header-phone { display: none; } }
@media (max-width: 900px) {
  .nav-item { display: block; width: 100%; }
  .nav-item.has-sub > a::before { display: none; }
  .nav .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 .5rem 1rem; min-width: 0; max-height: none; background: transparent; overflow: visible; }
  .site-header.open .nav .sub a { font-size: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--mist); border-radius: 0; font-weight: 500; }
  .nav-villes .sub { display: none; }
}

.season-bar .wrap span { font-size: .93rem; }
.footer-acq { font-size: .92rem; opacity: .85; margin-top: -.4rem; }

/* Fil d'Ariane */
.crumbs { font-size: .88rem; margin: 0 0 1.1rem; color: var(--slate); }
.crumbs a { color: var(--slate); }
.crumbs i { font-style: normal; margin: 0 .3rem; opacity: .6; }
.crumbs span { font-weight: 700; color: var(--graphite); }

/* Formulaire d'entrée */
.quote-band { background: var(--graphite); color: #fff; padding: 3rem 0; position: relative; }
.quote-band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--amber), var(--amber-lt), var(--amber)); }
.qb-wrap { display: grid; grid-template-columns: .9fr 1.3fr; gap: 3rem; align-items: center; }
.quote-band h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: .5rem; }
.quote-band .eyebrow { color: var(--amber); }
.quote-band p { color: #D4DADF; }
.qb-points { list-style: none; padding: 0; margin: 0 0 1rem; }
.qb-points li { position: relative; padding-left: 1.5rem; margin-bottom: .35rem; color: #E6EAED; font-size: 1rem; }
.qb-points li::before { content: "✓"; position: absolute; left: 0; color: var(--amber); font-weight: 700; }
.qb-tel { display: inline-flex; align-items: center; gap: .55rem; color: #fff; font-weight: 700; font-size: 1.3rem; text-decoration: none; }
.qb-tel svg { width: 22px; height: 22px; color: var(--amber); }
.qb-form { background: #fff; color: var(--graphite); border-radius: var(--r-l); padding: 1.6rem; box-shadow: var(--sh-l); }
.qb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin-bottom: 1rem; }
.qb-form .field label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .3rem; }
.qb-form input:not([type="checkbox"]), .qb-form select { width: 100%; font: inherit; font-size: 1rem; padding: .75rem .85rem; border: 1.5px solid var(--alu); border-radius: 6px; background: #fff; color: var(--graphite); }
.qb-form input:focus, .qb-form select:focus { outline: 3px solid var(--amber); outline-offset: 1px; }
.qb-form .consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: var(--slate); margin-bottom: 1rem; }
.qb-form .consent input { margin-top: .25rem; }
.qb-form .btn { width: 100%; }
@media (max-width: 900px) { .qb-wrap { grid-template-columns: 1fr; gap: 1.6rem; } .qb-grid { grid-template-columns: 1fr; } .quote-band { padding: 2.2rem 0; } }

/* En bref + photo */
.qa-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; }
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.8rem; }
.qa-item { background: var(--mist-2); border: 1px solid var(--alu); border-left: 4px solid var(--amber); border-radius: var(--r-s); padding: 1rem 1.2rem; }
.qa-item b { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-dp); margin-bottom: .3rem; }
.qa-item p { margin: 0; font-size: 1rem; }
@media (max-width: 900px) { .qa-wrap { grid-template-columns: 1fr; gap: 1.6rem; } .qa-grid { grid-template-columns: 1fr; } }

/* Signes, facteurs de prix */
.sign-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; }
.sign-grid li { background: #fff; border: 1px solid var(--alu); border-radius: var(--r-m); padding: 1.3rem 1.4rem; box-shadow: var(--sh-s); }
.sign-grid h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.sign-grid p { margin: 0; color: var(--slate); font-size: 1rem; }

/* Erreurs courantes */
.tbl-wrap { overflow-x: auto; }
.mist-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--alu); border-radius: var(--r-m); overflow: hidden; }
.mist-table th, .mist-table td { text-align: left; padding: 1rem 1.2rem; border-bottom: 1px solid var(--alu); vertical-align: top; font-size: 1rem; }
.mist-table thead th { background: var(--graphite); color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.mist-table td:first-child { color: #8B2D2D; font-weight: 600; width: 45%; }
.mist-table td:first-child::before { content: "✕ "; font-weight: 700; }
.mist-table td:last-child::before { content: "✓ "; color: var(--moss); font-weight: 700; }

/* Prix */
.cost-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }
.check-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.check-list li { position: relative; padding-left: 1.9rem; margin-bottom: .6rem; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--moss); font-weight: 700; }
.cost-wrap .price-note .btn { margin: .3rem .4rem 0 0; }
@media (max-width: 900px) { .cost-wrap { grid-template-columns: 1fr; gap: 1.6rem; } }

/* Cartes de services */
.svc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.svc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--alu); border-radius: var(--r-m); padding: 1.4rem 1.5rem; text-decoration: none; color: var(--graphite); box-shadow: var(--sh-s); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-m); border-color: var(--amber); color: var(--graphite); }
.svc-card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.svc-card p { color: var(--slate); font-size: .98rem; margin: 0 0 .8rem; }
.svc-more { margin-top: auto; font-weight: 700; font-size: .9rem; color: var(--amber-dp); }
.svc-cards-sm { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Soffites et fascias : bloc d'appel */
.cross { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.cross ul { padding: 0; margin: 0 0 1.4rem; list-style: none; }
.cross li { position: relative; padding-left: 1.9rem; margin-bottom: .5rem; }
.cross li::before { content: "✓"; position: absolute; left: 0; color: var(--moss); font-weight: 700; }
.cross-fig { margin: 0; }
.cross-fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-l); box-shadow: var(--sh-l); }
@media (max-width: 900px) { .cross { grid-template-columns: 1fr; gap: 1.6rem; } }

/* Guide */
.guide-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; }
.guide-body h2.guide-h { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2rem 0 .6rem; }
.guide-body h2.guide-h:first-child { margin-top: 0; }
.guide-ol { padding-left: 1.4rem; }
.guide-ol li { margin-bottom: .5rem; }
.guide-aside { position: sticky; top: 110px; display: grid; gap: 1.2rem; }
.toc { list-style: none; padding: 0; margin: 0; font-size: .98rem; }
.toc li { padding: .35rem 0; border-bottom: 1px solid var(--alu); }
@media (max-width: 900px) { .guide-wrap { grid-template-columns: 1fr; } .guide-aside { position: static; } }

/* Scellants */
.seal-section .alu-card h3 { margin-bottom: .2rem; }
.scel-brand { color: var(--slate); font-size: .95rem; margin-bottom: .8rem; }

/* Estimation : déroulement */
.est-flow { padding: 0; }
.has-photo .crumbs, .has-photo .crumbs a { color: rgba(255,255,255,.82); }
.has-photo .crumbs span { color: #fff; }
@media (max-width: 900px) { .site-header.open .nav > a { display: block; width: 100%; text-align: left; } }
.quote-band { scroll-margin-top: 82px; }
@media (pointer: coarse) {
  .sof-sw, .qb-tel, .svc-more { min-height: 44px; display: inline-flex; align-items: center; }
  .qb-form .consent input { width: 22px; height: 22px; }
  .qb-form input:not([type="checkbox"]), .qb-form select { min-height: 48px; }
  .toc li { padding: .6rem 0; }
}

/* Cartes de services avec image en fond */
.svc-card.has-bg { position: relative; overflow: hidden; min-height: 190px; isolation: isolate; }
.svc-card.has-bg::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--bg); background-repeat: no-repeat; transition: transform .6s var(--ease); }
.svc-card.has-bg.bg-photo::before { background-size: cover; background-position: center; }
.svc-card.has-bg.bg-ill::before { background-size: auto 88%; background-position: right 10px bottom 8px; }
.svc-card.has-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #fff 30%, rgba(255,255,255,.82) 55%, rgba(255,255,255,.2) 100%); }
.svc-card.has-bg:hover::before { transform: scale(1.06); }
.svc-card.has-bg h3, .svc-card.has-bg p { max-width: 78%; }
.svc-cards-sm .svc-card.has-bg { min-height: 130px; }
@media (max-width: 560px) { .svc-card.has-bg h3, .svc-card.has-bg p { max-width: 100%; } .svc-card.has-bg::after { background: linear-gradient(90deg, #fff 45%, rgba(255,255,255,.7) 75%, rgba(255,255,255,.3) 100%); } }

/* Scellants et nuancier */
.seal-main { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.seal-card { display: flex; gap: 1.4rem; align-items: flex-start; }
.seal-prod { width: 92px; height: auto; flex: none; border-radius: 8px; }
.cl-box { background: #fff; border: 1px solid var(--alu); border-radius: var(--r-l); padding: 1.4rem; box-shadow: var(--sh-s); }
.cl-stage { margin-bottom: 1rem; }
.cl-bar { display: block; height: 74px; border-radius: 10px; border: 1px solid rgba(0,0,0,.15); background: #F4F4F2; }
.cl-label { margin: .55rem 0 0; font-size: 1rem; }
.cl-sub { font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-dp); margin: 1rem 0 .5rem; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .5rem; }
.cl-sw { display: flex; flex-direction: column; align-items: center; gap: .3rem; background: none; border: 2px solid transparent; border-radius: 8px; padding: .3rem .15rem; cursor: pointer; font: inherit; color: var(--graphite); }
.cl-sw i { width: 100%; height: 30px; border-radius: 6px; border: 1px solid rgba(0,0,0,.18); display: block; }
.cl-sw span { font-size: .68rem; line-height: 1.15; text-align: center; font-weight: 600; }
.cl-sw[aria-checked="true"] { border-color: var(--amber); background: var(--mist-2); }
.cl-sw:hover { border-color: var(--alu); }
@media (max-width: 1000px) { .seal-main { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cl-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); } .seal-card { flex-direction: column; } }

/* Signes : image d'exemple */
.sign-grid-img { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sign-grid .sign-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.sign-card > div { padding: 1.1rem 1.3rem 1.3rem; }
.sign-img { display: block; height: 124px; background-color: var(--mist-2); background-image: var(--bg); background-repeat: no-repeat; border-bottom: 1px solid var(--alu); }
.sign-photo { background-size: cover; background-position: center; }
.sign-ill { background-size: auto 92%; background-position: center; }

/* ===== Rythme plus serré et rendu plus pro sur les pages de services ===== */
.svc-page .section { padding: clamp(2.2rem, 4vw, 3.4rem) 0 !important; }
.svc-page .section-head { margin-bottom: 1.6rem; }
.svc-page h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.svc-page .page-head { padding: 3.2rem 0 2.6rem; }
.svc-page .process { margin: 0; }
.svc-page .process-head { margin-bottom: 1.4rem; }
.svc-page .process-steps li { padding-block: 1rem; }
.svc-page .quote-band { padding: 2.4rem 0; }
.svc-page .cta-band { padding: 3.4rem 0; }
.ps-ic { width: 22px; height: 22px; color: var(--amber-dp); vertical-align: -4px; margin-right: .5rem; }
.aside-fig { margin: 0; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-m); background: var(--mist-2); border: 1px solid var(--alu); }
.aside-fig img { width: 100%; height: auto; aspect-ratio: 16 / 10; display: block; }
.aside-photo img { object-fit: cover; }
.aside-ill { padding: 1.2rem; }
.aside-ill img { object-fit: contain; }
@media (max-width: 900px) { .svc-page .section { padding: 2rem 0 !important; } }

/* ===== Division soffites, menu groupé, figures de guide ===== */
.nav .sub .sub-h { display: block; padding: .6rem .8rem .2rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); font-weight: 700; }
.nav .sub .sub-h:not(:first-child) { margin-top: .4rem; border-top: 1px solid var(--mist); }
.nav .sub a:first-child { color: inherit; }
.nav .sub a[href^="guide-"], .nav .sub a[href="soffites-fascias.html"], .nav .sub a[href="calfeutrage.html"] { color: var(--amber-dp); }
.gentek { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.4rem; align-items: center; }
.gentek-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.gentek-photos figure { margin: 0; }
.gentek-photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-m); box-shadow: var(--sh-m); }
.gentek-photos figcaption { font-size: .85rem; font-weight: 700; margin-top: .4rem; text-align: center; }
.gentek-photos .photo-note { grid-column: 1 / -1; }
@media (max-width: 900px) { .gentek { grid-template-columns: 1fr; gap: 1.4rem; } }
.guide-fig { margin: 1.4rem 0 .4rem; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--alu); background: var(--mist-2); box-shadow: var(--sh-s); }
.guide-fig img { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; }
.guide-photo img { object-fit: cover; }
.guide-ill { padding: 1rem; }
.guide-ill img { object-fit: contain; aspect-ratio: 16 / 7; }

/* ===== Rendu « entreprise établie » : badges, barre de sections, pied de page ===== */
.head-badges { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.head-badges li { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); border-radius: 999px; padding: .42rem .85rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.head-badges li::before { content: "✓"; color: var(--amber); font-weight: 800; }
.page-tabs { position: sticky; top: 82px; z-index: 90; background: rgba(253,251,248,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--alu); box-shadow: 0 6px 16px -14px rgba(28,33,38,.5); }
.page-tabs .wrap { display: flex; gap: .3rem; align-items: center; overflow-x: auto; scrollbar-width: none; }
.page-tabs .wrap::-webkit-scrollbar { display: none; }
.page-tabs a { flex: none; padding: .95rem .9rem; font-weight: 700; font-size: .9rem; color: var(--graphite); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.page-tabs a:hover { border-bottom-color: var(--amber); color: var(--graphite); }
.page-tabs .pt-cta { margin-left: auto; background: var(--amber); color: var(--graphite); border-radius: 4px; padding: .55rem 1rem; border-bottom: 0; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
.page-tabs .pt-cta:hover { background: var(--amber-lt); }
.svc-page [id] { scroll-margin-top: 150px; }
.qa-item { position: relative; padding-left: 3.4rem; }
.qa-ic { position: absolute; left: 1rem; top: 1rem; width: 26px; height: 26px; color: var(--amber-dp); }
.footer-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.6rem 0; margin-bottom: 1.6rem; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.ft-item b { display: block; color: #fff; font-size: 1rem; }
.ft-item span { color: #AEB7BE; font-size: .88rem; }
@media (max-width: 900px) { .footer-trust { grid-template-columns: 1fr 1fr; } .page-tabs { top: 70px; } .svc-page [id] { scroll-margin-top: 130px; } }
@media (max-width: 560px) { .footer-trust { grid-template-columns: 1fr; } .head-badges li { font-size: .8rem; } .qa-item { padding-left: 3rem; } }

/* RBQ dans l'en-tête, logos dans le pied de page */
.brand-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.brand-rbq { font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--graphite); line-height: 1; padding-left: 2px; white-space: nowrap; }
.footer-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.fl-chip { display: inline-flex; align-items: center; gap: .6rem; background: #fff; border-radius: 10px; padding: .7rem 1.1rem; min-height: 58px; text-decoration: none; }
.fl-chip img { height: 34px; width: auto; display: block; }
.fl-rbq { color: var(--graphite); }
.fl-rbq b { font-family: var(--display); font-size: 1.7rem; letter-spacing: .04em; line-height: 1; }
.fl-rbq span { font-weight: 700; font-size: .9rem; line-height: 1.15; }
@media (max-width: 900px) { .brand-rbq { font-size: .72rem; } }

/* ===== Accueil : bande de confiance, pourquoi, guides ===== */
.assure-bar { background: var(--white); border-bottom: 1px solid var(--alu); }
.assure-bar ul { list-style: none; margin: 0; padding: 1.1rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.assure-bar li { display: flex; align-items: center; gap: .8rem; }
.assure-bar svg { width: 34px; height: 34px; flex: none; color: var(--amber-dp); }
.assure-bar b { display: block; color: var(--graphite); margin: 0; font-size: .98rem; line-height: 1.2; }
.assure-bar span { font-size: .84rem; color: var(--slate); }
.why-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.why-grid li { background: #fff; border: 1px solid var(--alu); border-radius: var(--r-m); padding: 1.5rem 1.4rem; box-shadow: var(--sh-s); }
.why-grid svg { width: 40px; height: 40px; color: var(--amber-dp); margin-bottom: .8rem; }
.why-grid h3 { font-size: 1.08rem; }
.why-grid p { margin: 0; color: var(--slate); font-size: .98rem; }
@media (max-width: 1000px) { .assure-bar ul, .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .assure-bar ul, .why-grid { grid-template-columns: 1fr; } .assure-bar ul { gap: .7rem; padding: 1rem 0; } }

/* ===== Accueil « wow » : panneaux photo, ligne du temps, effets ===== */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.split-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px; border-radius: var(--r-l); overflow: hidden; color: #fff; text-decoration: none; padding: 2rem 2rem 2.1rem; isolation: isolate; box-shadow: var(--sh-l); }
.split-card::before { content: ""; position: absolute; inset: 0; background: var(--bg) center / cover no-repeat; z-index: -2; transition: transform .9s var(--ease); }
.split-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,21,24,.12) 0%, rgba(18,21,24,.55) 48%, rgba(18,21,24,.93) 100%); }
.split-card:hover::before { transform: scale(1.07); }
.split-card:hover { color: #fff; }
.split-kicker { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); font-weight: 700; margin-bottom: .5rem; }
.split-card h3 { color: #fff; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 4vw, 3.3rem); line-height: 1; margin: 0 0 .6rem; letter-spacing: 0; }
.split-card p { color: #E3E8EC; max-width: 34em; margin-bottom: 1rem; }
.split-card ul { list-style: none; padding: 0; margin: 0 0 1.3rem; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.split-card li { font-weight: 600; font-size: .95rem; }
.split-card li::before { content: "✓ "; color: var(--amber); font-weight: 800; }
.split-cta { align-self: flex-start; }
.timeline { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.tl-step { position: relative; background: #fff; border: 1px solid var(--alu); border-radius: var(--r-m); padding: 1.9rem 1.3rem 1.4rem; box-shadow: var(--sh-s); }
.tl-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -1.4rem; width: 1.4rem; border-top: 2px dashed var(--amber); }
.tl-n { position: absolute; top: -19px; left: 1.2rem; width: 38px; height: 38px; border-radius: 50%; background: var(--amber); color: var(--graphite); display: grid; place-items: center; font-weight: 800; box-shadow: 0 6px 14px -6px rgba(227,160,49,.8); }
.tl-step svg { width: 38px; height: 38px; color: var(--amber-dp); margin-bottom: .6rem; }
.tl-step h3 { font-size: 1.08rem; }
.tl-step p { margin: 0; color: var(--slate); font-size: .98rem; }
@media (max-width: 1000px) { .timeline { grid-template-columns: 1fr 1fr; } .tl-step:nth-child(2)::after { display: none; } }
@media (max-width: 900px) { .split-grid { grid-template-columns: 1fr; } .split-card { min-height: 380px; } }
@media (max-width: 560px) { .timeline { grid-template-columns: 1fr; } .tl-step::after { display: none; } }
/* les cartes qui apparaissent gardent un survol vivant */
.js .svc-card.rv.in, .js .why-grid li.rv.in, .js .split-card.rv.in, .js .tl-step.rv.in { transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .2s, opacity .6s; }
.js .svc-card.rv.in:hover { transform: translateY(-5px); }
.js .why-grid li.rv.in:hover, .js .tl-step.rv.in:hover { transform: translateY(-4px); box-shadow: var(--sh-m); }
.js .split-card.rv.in:hover { transform: translateY(-4px); }
.why-grid li, .tl-step { transition: box-shadow .28s var(--ease), transform .28s var(--ease); }

/* ===== Page FAQ + menu à 6 onglets ===== */
.faq-filters { justify-content: center; margin: 0 0 1.6rem; }
.faq-wrap { max-width: 880px; }
.faq-h { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2rem 0 .6rem; }
.faq-group[hidden] { display: none; }
.faq-group .faq { margin-inline: 0; max-width: none; }
@media (min-width: 901px) and (max-width: 1240px) { .nav { gap: .85rem; } .nav a { font-size: .88rem; } .header-inner { gap: .9rem; } .header-actions .btn { padding: .7rem .95rem; font-size: .88rem; } }
@media (min-width: 901px) and (max-width: 1000px) { .nav { gap: .6rem; } .nav a { font-size: .82rem; } .header-actions .btn { padding: .6rem .8rem; font-size: .8rem; } .brand img { height: 40px; } }

/* ===== Conversion : texto, vérification RBQ, badge Netlify ===== */
.qb-sms { margin: -.4rem 0 1rem; font-size: .98rem; }
.qb-sms a { color: var(--amber); font-weight: 700; }
.ft-item a { color: var(--amber); }
.form-step input[type="file"] { width: 100%; padding: .6rem; border: 1.5px dashed var(--alu); border-radius: 6px; background: #fff; font: inherit; }
#nl-badge-frame { display: none !important; }

/* ===== Menu mobile en accordéon : un sous-menu à la fois ===== */
.nav-mobile-only { display: none; }
@media (max-width: 900px) {
  .nav-item.has-sub > a { position: relative; display: block; padding-right: 2rem; }
  .nav-item.has-sub > a::before { display: block; content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; margin: 0; border: 0; border-right: 2.5px solid var(--graphite); border-bottom: 2.5px solid var(--graphite); transform: translateY(-70%) rotate(45deg); transition: transform .25s; }
  .nav-item.has-sub.open-sub > a::before { transform: translateY(-30%) rotate(-135deg); }
  .nav .sub, .nav-villes .sub { display: none; }
  .nav-item.open-sub > .sub { display: block; background: var(--mist-2); border-radius: 8px; margin: .2rem 0 .6rem; padding: .2rem .9rem .4rem; }
  .nav-item.open-sub > a { color: var(--amber-dp); }
  .site-header.open .nav .nav-mobile-only { display: block; }
  .site-header.open .nav .nav-mobile-cta { background: var(--amber); color: var(--graphite); text-align: center; border-radius: 6px; margin-top: 1rem; border-bottom: 0; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; }
  .site-header.open .nav .nav-mobile-tel { text-align: center; border-bottom: 0; font-weight: 800; }
}

/* ===== Punch : chiffres, marques, portée, bouton flottant ===== */
.stats-band { background: linear-gradient(160deg, #15191C, #232A2F); color: #fff; padding: clamp(2.6rem, 5vw, 4rem) 0; position: relative; overflow: hidden; }
.stats-band::before { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(227,160,49,.22), transparent 66%); }
.stats-band .wrap { position: relative; text-align: center; }
.stats-band .eyebrow { color: var(--amber); }
.stats-band h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 1.8rem; }
.stats-band .stats { text-align: center; }
.stats-band .stat .n { color: var(--amber); }
.stats-band .stat p { color: #C9D1D7; }
.brands { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; }
.brands-label { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #AEB7BE; font-weight: 700; }
.brand-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .4rem 1rem; font-weight: 800; letter-spacing: .03em; }
.dd-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2rem; }
.dd { border-radius: var(--r-m); padding: 1.6rem 1.7rem; border: 1px solid var(--alu); background: #fff; box-shadow: var(--sh-s); }
.dd h3 { font-size: 1.15rem; margin-bottom: .8rem; }
.dd ul { list-style: none; padding: 0; margin: 0; }
.dd li { position: relative; padding-left: 1.8rem; margin-bottom: .55rem; }
.dd-do { border-top: 4px solid var(--moss); }
.dd-do li::before { content: "✓"; position: absolute; left: 0; color: var(--moss); font-weight: 800; }
.dd-dont { border-top: 4px solid #B24A3A; }
.dd-dont li::before { content: "✕"; position: absolute; left: 0; color: #B24A3A; font-weight: 800; }
@media (max-width: 760px) { .dd-grid { grid-template-columns: 1fr; } }
.float-cta { display: none; }
@media (min-width: 1000px) {
  .float-cta { position: fixed; right: 22px; bottom: 22px; z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
  .float-cta.show { opacity: 1; transform: none; pointer-events: auto; }
  .float-cta a { text-decoration: none; font-weight: 800; border-radius: 999px; padding: .85rem 1.4rem; box-shadow: var(--sh-m); }
  .float-cta .fc-main { background: var(--amber); color: var(--graphite); text-transform: uppercase; letter-spacing: .04em; font-size: .86rem; }
  .float-cta .fc-main:hover { background: var(--amber-lt); }
  .float-cta .fc-tel { background: var(--graphite); color: #fff; font-size: .95rem; }
}
@media (max-width: 900px) { .nav-item > a { display: block; } }

/* ===== Expérience + produit Adfast ===== */
.prod-wrap { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: clamp(1.4rem, 4vw, 3.4rem); align-items: center; }
.prod-fig { margin: 0; display: flex; justify-content: center; }
.prod-fig img { width: auto; height: clamp(260px, 36vw, 400px); max-width: 100%; filter: drop-shadow(0 18px 24px rgba(20,24,28,.28)); }
.prod-copy h2 { margin-bottom: .8rem; }
.prod-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
@media (max-width: 700px) { .prod-wrap { grid-template-columns: 1fr; text-align: left; } .prod-fig img { height: 260px; } }

/* ===== Photos en images ===== */
.photo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 880px; margin: 0 auto; }
.photo-duo figure { margin: 0; border-radius: var(--r-m); overflow: hidden; background: #fff; box-shadow: var(--sh-m); }
.photo-duo img { display: block; width: 100%; height: clamp(300px, 42vw, 520px); object-fit: cover; }
.photo-duo figcaption { padding: .8rem 1rem; font-weight: 700; font-size: .95rem; text-align: center; }
@media (max-width: 700px) { .photo-duo { grid-template-columns: 1fr; } .photo-duo img { height: 380px; } }

.photo-duo:has(.pd-wide) { grid-template-columns: 1.6fr 1fr; max-width: 1000px; }
.pd-wide img { object-position: center 60%; }
@media (max-width: 700px) { .photo-duo:has(.pd-wide) { grid-template-columns: 1fr; } }

/* ===== Galerie avant / après ===== */
.ba-grid { display: grid; gap: 1.4rem; margin: 0 auto; max-width: 980px; grid-template-columns: repeat(2, 1fr); }
.ba-grid.ba-1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.ba-grid.ba-3 { grid-template-columns: repeat(3, 1fr); max-width: 1160px; }
.ba-grid figure { margin: 0; border-radius: var(--r-m); overflow: hidden; background: #fff; box-shadow: var(--sh-m); }
.ba-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1122 / 1402; object-fit: cover; }
.ba-grid figcaption { display: flex; justify-content: space-between; gap: .6rem; padding: .8rem 1rem; font-weight: 700; font-size: .95rem; }
.ba-grid figcaption span { color: var(--moss); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) { .ba-grid, .ba-grid.ba-3 { grid-template-columns: 1fr; max-width: 520px; } }
/* ===== Soffite de pres ===== */
.gentek-near { max-width: 780px; margin: 0 auto 2.4rem; text-align: center; }
.gentek-near h3 { margin-bottom: .5rem; }
.gn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.2rem; }
.gn-pair figure { margin: 0; }
.gn-pair img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; box-shadow: var(--sh-m); display: block; }
.gn-pair figcaption { font-weight: 700; font-size: .9rem; margin-top: .55rem; }
@media (max-width: 560px) { .gn-pair { grid-template-columns: 1fr; } }

/* ===== Mulco Supra Expert ===== */
.mulco-chart { margin: 1.2rem 0 0; }
.mulco-chart img { width: 100%; max-width: 420px; height: auto; border-radius: 14px; border: 1px solid var(--alu); background: #fff; display: block; }
.mulco-chart figcaption { font-size: .82rem; opacity: .8; margin-top: .4rem; }

/* ===== Au travail ===== */
.work-grid { display: grid; gap: 1.2rem; margin: 0 auto; max-width: 1100px; grid-template-columns: repeat(3, 1fr); }
.work-grid.work-2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; }
.work-grid.work-1 { grid-template-columns: minmax(0, 640px); justify-content: center; }
.work-grid figure { margin: 0; border-radius: var(--r-m); overflow: hidden; background: #fff; box-shadow: var(--sh-m); }
.work-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.work-grid figcaption { padding: .75rem 1rem; font-weight: 700; font-size: .95rem; }
@media (max-width: 760px) { .work-grid, .work-grid.work-2 { grid-template-columns: 1fr; max-width: 560px; } }

/* ===== Photos dans les étapes ===== */
.process-steps .ps-photo { display: block; width: 100%; height: auto; max-width: 380px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; margin-top: .8rem; box-shadow: var(--sh-s); }

/* ===== Ce qui peut arriver ===== */
.risk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; max-width: 1180px; margin: 0 auto; }
.risk-card { margin: 0; background: #fff; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sh-m); border-top: 4px solid #B24A3A; }
.risk-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.risk-card figcaption { padding: .9rem 1rem 1.1rem; }
.risk-card figcaption b { display: block; font-size: 1.05rem; margin-bottom: .35rem; }
.risk-card figcaption span { display: block; font-size: .92rem; line-height: 1.45; }
.risk-cta { text-align: center; margin-top: 1.6rem; }
@media (max-width: 1000px) { .risk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .risk-grid { grid-template-columns: 1fr; } }

.risk-grid.risk-3 { grid-template-columns: repeat(3, 1fr); max-width: 1000px; }
.risk-card.risk-text figcaption { padding: 1.4rem 1.3rem; }
.risk-card.risk-text figcaption b { font-size: 1.15rem; }
@media (max-width: 800px) { .risk-grid.risk-3 { grid-template-columns: 1fr; max-width: 520px; } }

.work-grid.work-4 { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
@media (max-width: 760px) { .work-grid.work-4 { grid-template-columns: 1fr; max-width: 560px; } }
/* ===== Etapes en photos (accueil) ===== */
#calfeutrage-de-pres .step-frame { aspect-ratio: 4 / 3 !important; height: auto !important; }
#calfeutrage-de-pres .step-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
#calfeutrage-de-pres .step-vid { max-width: none; }
.work-grid.work-6 { grid-template-columns: repeat(3, 1fr); max-width: 1100px; }
@media (max-width: 760px) { .work-grid.work-6 { grid-template-columns: 1fr 1fr; gap: .8rem; } .work-grid.work-6 figcaption { font-size: .82rem; padding: .55rem .7rem; } }

/* ===== Cartes de services : photo bien visible ===== */
.svc-cards:has(.bg-photo) { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.3rem; }
.svc-card.has-bg.bg-photo { min-height: 340px; justify-content: flex-end; padding: 1.5rem 1.6rem; border: 0; color: #fff; box-shadow: var(--sh-m); }
.svc-card.has-bg.bg-photo::after { background: linear-gradient(180deg, rgba(12,14,16,0) 28%, rgba(12,14,16,.55) 58%, rgba(12,14,16,.92) 100%); }
.svc-card.has-bg.bg-photo h3 { font-size: 1.3rem; max-width: 100%; color: #fff; }
.svc-card.has-bg.bg-photo p { max-width: 100%; color: #E3E8EC; margin-bottom: .6rem; }
.svc-card.has-bg.bg-photo .svc-more { color: var(--amber); margin-top: .2rem; }
.svc-card.has-bg.bg-photo:hover { color: #fff; border: 0; }
@media (max-width: 560px) { .svc-card.has-bg.bg-photo { min-height: 280px; } .svc-card.has-bg.bg-photo::after { background: linear-gradient(180deg, rgba(12,14,16,0) 25%, rgba(12,14,16,.6) 60%, rgba(12,14,16,.92) 100%); } }

/* ===== Resultat : 3 cartes alignees ===== */
.joint-duo-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch; }
.joint-duo-wrap .joint-duo-title { grid-column: 1 / -1; text-align: center; margin-bottom: .4rem; }
.joint-duo-wrap .joint-gallery { display: contents; }
.joint-duo-wrap .joint-card { display: flex; flex-direction: column; }
.joint-duo-wrap .joint-gallery .joint-duo img, .joint-duo-wrap .joint-gallery .joint-duo.tall img { aspect-ratio: 3 / 4; }
.joint-duo-wrap .joint-perfect { margin: 0; display: flex; flex-direction: column; background: #fff; padding: 1.1rem; border-radius: var(--r-l); }
.joint-duo-wrap .joint-perfect img { flex: 1; height: 100%; min-height: 0; aspect-ratio: auto; border-radius: var(--r-m); object-position: 40% 60%; }
.joint-duo-wrap .joint-perfect .ba-tag { bottom: 1.8rem; left: 1.9rem; }
@media (max-width: 900px) { .joint-duo-wrap { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } .joint-duo-wrap .joint-perfect img { aspect-ratio: 4 / 3; flex: none; } }

.joint-duo-wrap .joint-gallery .joint-duo, .joint-duo-wrap .joint-gallery .joint-duo.tall { grid-template-columns: 1fr; gap: 8px; }
.joint-duo-wrap .joint-gallery .joint-duo img, .joint-duo-wrap .joint-gallery .joint-duo.tall img { aspect-ratio: 4 / 3; }
.joint-duo-wrap .joint-gallery .joint-card .joint-duo figure, .joint-duo-wrap .joint-gallery .joint-card .joint-duo img { height: auto; }

.joint-duo-wrap .joint-gallery .joint-duo img, .joint-duo-wrap .joint-gallery .joint-duo.tall img { aspect-ratio: 16 / 10 !important; height: auto !important; width: 100%; }
.joint-duo-wrap .joint-gallery .joint-duo { flex: none !important; }
.joint-duo-wrap .joint-gallery .joint-duo figure { height: auto !important; }

/* ===== Video publicitaire ===== */
.pub-video { margin: 0 auto; max-width: 960px; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-l); background: #14171A; }
.pub-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #14171A; }

/* ===== Accueil : photo plus lumineuse ===== */
.hero-bg::after { background: linear-gradient(90deg, rgba(18,21,24,.62) 0%, rgba(18,21,24,.32) 38%, rgba(18,21,24,0) 62%), linear-gradient(0deg, rgba(18,21,24,.5) 0%, rgba(18,21,24,0) 38%) !important; }
@media (max-width: 900px) { .hero-bg::after { background: linear-gradient(180deg, rgba(18,21,24,.15) 0%, rgba(18,21,24,.4) 55%, rgba(18,21,24,.75) 100%) !important; } }

/* ===== A propos ===== */
.ap-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.ap-team { margin: 0; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-l); position: relative; }
.ap-team img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.ap-team figcaption { position: absolute; left: 1rem; bottom: 1rem; background: rgba(18,21,24,.82); color: #fff; font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; padding: .45rem .85rem; border-radius: 999px; }
.ap-copy h2 { margin-bottom: .8rem; }
.ap-copy .ap-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
.ap-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; max-width: 1180px; margin: 0 auto; }
.ap-card { margin: 0; background: #fff; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-m); }
.ap-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ap-card figcaption { padding: 1.1rem 1.3rem 1.4rem; }
.ap-card figcaption b { display: block; font-size: 1.1rem; margin-bottom: .35rem; }
.ap-card figcaption span { display: block; font-size: .95rem; line-height: 1.5; }
.ap-commit { list-style: none; padding: 0; margin: 0 auto; max-width: 1100px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ap-commit li { background: #fff; border-radius: var(--r-m); padding: 1.2rem 1.3rem 1.3rem 3.1rem; position: relative; box-shadow: var(--sh-s); border-top: 4px solid var(--amber); line-height: 1.45; }
.ap-commit li::before { content: "✓"; position: absolute; left: 1.1rem; top: 1.15rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--amber); color: var(--graphite); font-weight: 800; display: grid; place-items: center; font-size: .85rem; }
.ap-commit li strong { display: block; margin-bottom: .25rem; }
@media (max-width: 900px) { .ap-split { grid-template-columns: 1fr; } .ap-cards, .ap-commit { grid-template-columns: 1fr; max-width: 560px; } }
.hero-bg-img img { object-position: 60% 50% !important; }
@media (max-width: 900px) { .hero-bg-img img { object-position: 72% 50% !important; } }
.hero-bg::after { background: linear-gradient(90deg, rgba(18,21,24,.5) 0%, rgba(18,21,24,.22) 36%, rgba(18,21,24,0) 58%), linear-gradient(0deg, rgba(18,21,24,.38) 0%, rgba(18,21,24,0) 32%) !important; }

/* ===== Accueil cellulaire : photo en haut, texte en dessous ===== */
@media (max-width: 760px) {
  .hero.hero-bg { min-height: 0; display: block; background: #14171A; }
  .hero-bg .hero-bg-img { position: relative; inset: auto; height: 62vw; max-height: 300px; min-height: 210px; }
  .hero-bg .hero-bg-img img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50% !important; }
  .hero-bg::after { display: none !important; }
  .hero-bg .hero-inner { padding: 1.5rem 0 2rem; }
  .hero-bg h1 { max-width: none; font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .hero-bg .lead { font-size: 1.02rem; max-width: none; color: #E3E8EC; }
  .hero-bg .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.2rem; }
  .hero-bg .hero-actions .btn:first-child { grid-column: 1 / -1; }
  .hero-bg .hero-actions .btn { width: 100%; justify-content: center; text-align: center; padding-inline: .6rem; }
}

/* ===== Photos de chantier reelles ===== */
.terrain-sec .work-grid img { aspect-ratio: 4 / 3; object-fit: cover; }
.terrain-sec .work-grid figure:nth-child(n+4) img { object-position: 50% 45%; }

/* ===== Avant reel / apres simule ===== */
.sim-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; max-width: 1100px; margin: 0 auto; }
.sim-pair { margin: 0; background: #fff; border-radius: var(--r-l); padding: .8rem; box-shadow: var(--sh-m); }
.sim-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: var(--r-m); overflow: hidden; }
.sim-imgs span { position: relative; display: block; }
.sim-imgs img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.sim-pair:nth-child(-n+3) .sim-imgs { grid-template-columns: 1fr; }
.sim-pair:nth-child(-n+3) .sim-imgs img { aspect-ratio: 16 / 7; }
.sim-imgs .ba-tag { position: absolute; left: .6rem; bottom: .6rem; top: auto; right: auto; font-size: .7rem; }
.sim-pair figcaption { padding: .7rem .4rem .2rem; font-weight: 700; font-size: .95rem; }
@media (max-width: 760px) { .sim-grid { grid-template-columns: 1fr; } }

/* Facebook visible */
.header-fb{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#1877F2;color:#fff;flex:none}
.header-fb svg{width:20px;height:20px}
.header-fb:hover{background:#0f5fd0}
.footer-fb{display:inline-flex;align-items:center;gap:8px;background:#1877F2;color:#fff!important;padding:9px 14px;border-radius:8px;font-weight:600;text-decoration:none}
.footer-fb svg{width:18px;height:18px}
.nav-mobile-fb{color:#1877F2!important;font-weight:600}
@media (max-width:760px){.header-fb{width:36px;height:36px}}

/* Accueil : photo rue, texte en haut a gauche, camion bien visible */
@media (min-width: 901px) {
  .hero-bg { align-items: flex-start; }
  .hero-bg .hero-bg-img img { object-position: 50% 0% !important; }
  .hero-bg .hero-inner { padding: clamp(1.5rem, 4vh, 3rem) 0 0; }
  .hero-bg h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); max-width: 18ch; }
  .hero-bg .lead { max-width: 40ch; font-size: 1.02rem; }
  .hero-bg .hero-actions { margin-top: 1rem; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(18,21,24,.6) 0%, rgba(18,21,24,.25) 40%, rgba(18,21,24,0) 62%) !important; }
}
/* Accueil mobile : photo plus haute, centree sur le camion */
@media (max-width: 760px) {
  .hero-bg .hero-bg-img { height: 92vw; max-height: 420px; }
  .hero-bg .hero-bg-img img { object-position: 46% 50% !important; }
}@media (max-width: 760px) {
  .hero-bg .hero-bg-img { overflow: hidden; }
  .hero-bg .hero-bg-img img { transform: scale(1.7); transform-origin: 40% 64%; }
}
/* Accueil ordinateur : camion agrandi, entier, decale a droite */
@media (min-width: 901px) and (min-aspect-ratio: 13/10) {
  .hero-bg { background: #14171A; }
  .hero-bg .hero-bg-img { overflow: hidden; }
  .hero-bg .hero-bg-img img { position: absolute !important; left: 0 !important; top: auto !important; bottom: -24vw !important; width: 130% !important; max-width: none !important; height: auto !important; object-fit: fill !important; object-position: 0 0 !important; }
  .hero-bg .hero-title, .hero-bg h1 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); }
}@media (min-width: 901px) and (min-aspect-ratio: 13/10) {
  .hero-bg .hero-tel { display: none; }
}
/* Accueil ordinateur v2 : zoom sur le camion, centre */
@media (min-width: 901px) and (min-aspect-ratio: 13/10) {
  .hero-bg .hero-bg-img img { width: 165% !important; left: -23% !important; bottom: -31.7vw !important; }
  .hero-bg .lead { display: none; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(18,21,24,.62) 0%, rgba(18,21,24,.3) 34%, rgba(18,21,24,0) 55%) !important; }
}@media (max-width: 760px) {
  .hero-bg .hero-bg-img img { transform-origin: 40% 50%; }
}@media (max-width: 760px) {
  .hero-bg .hero-bg-img img { transform: translateY(9%) scale(1.7); }
}
/* Tablette / ecran presque carre : photo en haut, texte dessous */
@media (min-width: 761px) and (max-aspect-ratio: 13/10) {
  .hero.hero-bg { min-height: 0; display: block; background: #14171A; }
  .hero-bg .hero-bg-img { position: relative; inset: auto; height: 64vw; max-height: 620px; overflow: hidden; }
  .hero-bg .hero-bg-img img { position: static !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: 44% 55% !important; transform: scale(1.35); transform-origin: 40% 60%; }
  .hero-bg::after { display: none !important; }
  .hero-bg .hero-inner { padding: 2rem 0 2.5rem; }
  .hero-bg .lead { display: block; max-width: none; }
  .hero-bg h1 { max-width: none; font-size: clamp(2.2rem, 6vw, 3.2rem); }
}