/* RG Plomberie — charte « Chantier » (validée le 1er octobre 2026 sur l'ébauche 1).
   Noir, photo des camions, rouge franc, titres massifs en Archivo, texte en Inter.
   À plat : aucun dégradé, aucun halo, aucune ombre portée, aucun bouton en gélule. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("../fonts/archivo.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/inter.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --ink: #0e0e10;
    --ink-2: #1b1b1e;
    --red: #d71920;
    --red-d: #b3141a;
    --red-l: #ff4b4b;
    --paper: #ffffff;
    --soft: #f3f3f1;
    --line: #e2e2df;
    --muted: #5c5c62;
    --top-h: 72px;
    --ease: cubic-bezier(0.7, 0, 0.2, 1);
}

/* Socle */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font: 400 1rem/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { min-width: 0; padding: 0; border: 0; }
h1, h2, h3 { font-family: Archivo, Inter, sans-serif; letter-spacing: -0.02em; line-height: 1.04; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; z-index: 400; left: 12px; top: -60px; padding: 10px 14px; color: #fff; background: var(--red); font-weight: 700; }
.skip:focus { top: 12px; }

.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic--fill { fill: currentColor; stroke: none; }

.kicker { color: var(--red); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.hero .kicker, .page-head .kicker, .block--ink .kicker { color: var(--red-l); }

/* Boutons */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 20px;
    font: inherit; font-weight: 700; line-height: 1.1; text-decoration: none;
    border: 2px solid transparent; cursor: pointer;
}
.btn--big { min-height: 58px; padding: 14px 26px; font-size: 1.05rem; }
.btn--full { width: 100%; }
.btn--red { color: #fff; background: var(--red); border-color: var(--red); }
.btn--red:hover { background: var(--red-d); border-color: var(--red-d); }
.btn--line { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.btn--line:hover { border-color: #fff; }
.btn--ink { color: #fff; background: var(--ink); border-color: var(--ink); }
.btn--ink:hover { background: var(--ink-2); }
.btn--outline { color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { color: #fff; background: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--red); }

/* Accueil */

.hero { position: relative; overflow: hidden; color: #fff; background: var(--ink); }
.hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 64px; align-items: center; padding: 84px 0 56px; }
.hero__title { margin-top: 22px; font-size: clamp(2.6rem, 4.9vw, 4.3rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.hero h1 em, .page-head h1 em { font-style: normal; color: var(--red-l); }
.hero__lead { max-width: 33em; margin-top: 26px; color: rgba(255, 255, 255, 0.74); font-size: 1.12rem; line-height: 1.65; }
.hero__actions { margin-top: 34px; }
.hero__rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 28px; color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; text-decoration: none; }
.hero__stars { color: #e8a200; font-size: 1rem; letter-spacing: 0.08em; }
.hero__rating strong { color: #fff; font-family: Archivo, sans-serif; font-size: 1.02rem; font-weight: 800; }
.hero__rating .ic { width: 16px; height: 16px; color: var(--red-l); transition: transform 350ms var(--ease); }
.hero__rating:hover .ic { transform: translateX(4px); }
.hero__rating:hover span:not(.hero__stars) { color: #fff; }

/* L'avant / après, net, sans cadre */
.hero__case { position: relative; }
.hero__frame { position: relative; }
.hero .compare { border: 0; }
.hero .compare img { aspect-ratio: 1 / 0.94; }
.hero__caption { margin-top: 14px; color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; }

/* Bandeau de confiance au pied du hero */
.hero__bar { position: relative; background: var(--ink); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.hero__trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero__trust li { display: flex; align-items: center; gap: 14px; padding: 24px 20px 24px 0; }
.hero__trust li + li { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.hero__trust .ic { width: 26px; height: 26px; color: var(--red-l); stroke-width: 1.6; }
.hero__trust span { display: grid; gap: 2px; }
.hero__trust strong { font-family: Archivo, sans-serif; font-size: 1.02rem; font-weight: 800; }
.hero__trust small { color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; }

/* Hero clair (accueil) : posé entre la barre noire du haut et le bandeau noir des garanties */
.hero__bar { color: #fff; }
.hero--light { color: var(--ink); background: var(--soft); }
.hero--light .kicker, .hero--light h1 em { color: var(--red); }
.hero--light .hero__lead { color: var(--muted); }
.hero--light .btn--line { color: var(--ink); border-color: var(--ink); }
.hero--light .btn--line:hover { color: #fff; background: var(--ink); border-color: var(--ink); }
.hero--light .hero__rating { color: var(--muted); }
.hero--light .hero__rating strong { color: var(--ink); }
.hero--light .hero__rating:hover span:not(.hero__stars) { color: var(--ink); }
.hero--light .hero__rating .ic { color: var(--red); }
.hero--light .hero__caption { color: var(--muted); }
.hero--light .compare:focus-within { outline-color: var(--ink); }
/* L'avant / après fait partie du fond : il occupe toute la moitié droite, du menu au bandeau noir,
   jusqu'au bord de l'écran ; le texte reste à gauche sur le clair. */
.hero--light .hero__main { position: relative; }
.hero--light .hero__in { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(600px, calc(100vh - 96px), 860px); padding-bottom: 72px; }
.hero--light .hero__title { font-size: clamp(2.5rem, 4.1vw, 3.9rem); }
.hero--light .hero__case { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; margin: 0; }
.hero--light .hero__frame, .hero--light .compare { position: absolute; inset: 0; }
.hero--light .compare img { height: 100%; aspect-ratio: auto; }
.hero--light .compare__tag { top: 150px; }
.hero--light .compare__tag--before { left: 24px; }
.hero--light .compare__tag--after { right: 24px; }
.hero--light .hero__caption { position: absolute; z-index: 2; right: 24px; bottom: 24px; margin: 0; padding: 8px 12px; color: #fff; background: rgba(14, 14, 16, 0.78); font-size: 0.78rem; pointer-events: none; }
/* Style « fondu » : l'image s'élargit et se fond dans le clair par la gauche, la poignée est ronde,
   les étiquettes suivent la séparation, une carte blanche est posée sur l'image. */
.hero--light { background: #f6f5f2; }
.hero--light .hero__case { width: 58%; }
.hero--light .hero__frame {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.25) 10%, rgba(0, 0, 0, 0.8) 22%, #000 32%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.25) 10%, rgba(0, 0, 0, 0.8) 22%, #000 32%);
}
.hero--light .hero__text { position: relative; z-index: 2; max-width: 560px; }
.hero--light .hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; color: var(--muted); font-size: 0.74rem; letter-spacing: 0.16em; }
.hero__kicker-line { flex: none; width: 40px; height: 2px; background: var(--red); }
.hero--light .hero__kicker strong { color: var(--ink); font-weight: 800; }
.hero__kicker-sep { flex: none; width: 1px; height: 18px; background: #cfcfc9; }
.hero--light .hero__title { margin-top: 26px; font-size: clamp(2.4rem, 3.75vw, 3.6rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; }
.hero__l1, .hero__l2 { display: block; text-wrap: balance; }
.hero--light .hero__l2 { color: var(--red); }
.hero--light .hero__lead { max-width: 31em; margin-top: 24px; font-size: 1.08rem; line-height: 1.7; }
.hero--light .btn--line { color: var(--ink); background: #fff; border: 1px solid #d3d3ce; }
.hero--light .btn--line:hover { color: var(--ink); background: #fff; border-color: var(--ink); }
.hero__up { transform: rotate(-45deg); transition: transform 350ms var(--ease); }
.btn:hover .hero__up { transform: rotate(-45deg) translate(3px, 0); }
.hero--light .compare__tag--before { left: auto; right: calc(100% - var(--position) + 14px); }
.hero--light .compare__tag--after { right: auto; left: calc(var(--position) + 14px); }
.hero--light .compare__tag { background: var(--ink); }
.hero--light .compare__tag--after { background: var(--red); }
.hero--light .compare__line { width: 2px; background: rgba(255, 255, 255, 0.95); }
.hero--light .compare__line i { width: 58px; height: 58px; border-radius: 50%; }
.hero__card {
    position: absolute; z-index: 3; right: 32px; bottom: 32px; display: grid; gap: 6px; max-width: 270px; padding: 18px 22px 16px;
    color: var(--ink); background: #fff; border-left: 3px solid var(--red); pointer-events: none;
}
.hero__card-kicker { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.hero__card strong { font-size: 0.98rem; font-weight: 700; line-height: 1.5; }
.hero__card small { color: var(--muted); font-size: 0.75rem; }


/* Entrée : le titre monte ligne par ligne, l'avant / après se dévoile, le reste suit */
@media (prefers-reduced-motion: no-preference) {
    .js .hero [data-intro], .js .hero__trust li { opacity: 0; transform: translateY(18px); animation: hero-rise 900ms var(--ease) forwards; animation-delay: calc(160ms + var(--i) * 80ms); }
    .js .hero__title { clip-path: inset(0 0 100% 0); transform: translateY(26px); animation: hero-title 1100ms var(--ease) 200ms forwards; }
    .js .hero__frame { clip-path: inset(100% 0 0 0); animation: hero-wipe 1300ms var(--ease) 380ms forwards; }
    .js .hero--light .hero__frame { clip-path: inset(0 0 0 100%); animation: hero-slide 1300ms var(--ease) 300ms forwards; }
    .js .hero__caption { opacity: 0; animation: hero-rise 800ms var(--ease) 1200ms forwards; }
    .js .hero__card { opacity: 0; transform: translateY(18px); animation: hero-rise 800ms var(--ease) 1300ms forwards; }
}
@keyframes hero-rise { to { opacity: 1; transform: none; } }
@keyframes hero-title { to { clip-path: inset(0 0 -10% 0); transform: none; } }
@keyframes hero-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes hero-slide { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

/* Comparateur avant / après */

.compare { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; background: var(--ink-2); border: 6px solid #fff; --position: 50%; }
.compare img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; pointer-events: none; }
.compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--position)); }
.compare__after img { height: 100%; }
.compare__line { position: absolute; top: 0; bottom: 0; left: var(--position); width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; }
.compare__line i { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 46px; height: 46px; color: var(--ink); background: #fff; transform: translate(-50%, -50%); }
.compare__line i::before { content: ""; width: 24px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 6 7 0v12zm24 0-7 6V0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 6 7 0v12zm24 0-7 6V0z'/%3E%3C/svg%3E") center / contain no-repeat; }
.compare__tag { position: absolute; top: 12px; padding: 6px 10px; color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; }
.compare__tag--before { left: 12px; background: var(--ink); }
.compare__tag--after { right: 12px; background: var(--red); }
/* Le curseur natif reste invisible mais accessible au clavier ; le glisser est géré sur le cadre. */
.compare { cursor: ew-resize; }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.compare:focus-within { outline: 3px solid var(--red); outline-offset: 2px; }
.compare-note { margin-top: 10px; color: rgba(255, 255, 255, 0.55); font-size: 0.78rem; }
.compare-wide .compare img { aspect-ratio: 16 / 10; }
.compare-wide .compare-note { color: var(--muted); }

/* En-tête des pages intérieures */

.page-head { position: relative; overflow: hidden; color: #fff; background: var(--ink); }
.page-head__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; opacity: 0.16; }
.page-head__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 56px; align-items: center; padding: 64px 0 72px; }
.page-head__in--solo { grid-template-columns: minmax(0, 1fr); }
.page-head h1 { margin-top: 14px; font-size: clamp(2.3rem, 4.6vw, 3.8rem); font-weight: 900; }
.page-head__lead { max-width: 36em; margin-top: 18px; color: rgba(255, 255, 255, 0.78); font-size: 1.08rem; }
.page-head__photo { position: relative; }
.page-head__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 6px solid #fff; }
.page-head__photo figcaption { position: absolute; left: 6px; bottom: 6px; padding: 7px 11px; background: var(--red); font-size: 0.76rem; font-weight: 800; }
.page-head__photo--illus figcaption { background: var(--ink); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: rgba(255, 255, 255, 0.6); font-size: 0.82rem; }
.crumbs a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: 0.5; }
.crumbs + .kicker { display: block; margin-top: 22px; }

/* Sections */

.block { padding: 96px 0; }
.block--soft { background: var(--soft); }
.block--ink { color: #fff; background: var(--ink); }
.block--tight { padding: 64px 0; }
.head { display: grid; gap: 12px; max-width: 46rem; margin-bottom: 44px; }
.head h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 900; }
.head p:not(.kicker) { color: var(--muted); }
.block--ink .head p:not(.kicker) { color: rgba(255, 255, 255, 0.7); }
.head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; max-width: none; }
.head--row > div { display: grid; gap: 12px; max-width: 46rem; }
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.split h2 { margin-top: 12px; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 900; }
.prose { display: grid; gap: 16px; color: var(--muted); font-size: 1.05rem; }
.block--ink .prose { color: rgba(255, 255, 255, 0.75); }
.prose strong { color: var(--ink); }

/* Grille de prestations (accueil, page prestations) */

.svc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 3px solid var(--ink); }
.svc li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.svc li:first-child { border-left: 1px solid var(--line); }
.svc a { position: relative; display: grid; align-content: start; gap: 12px; height: 100%; padding: 26px 22px 64px; text-decoration: none; }
.svc a:hover { background: var(--soft); }
.svc__n { color: var(--red); font-size: 0.8rem; font-weight: 800; }
.svc__ic { width: 34px; height: 34px; }
.svc h3 { font-size: 1.25rem; font-weight: 800; }
.svc p { color: var(--muted); font-size: 0.92rem; }
.svc__go { position: absolute; left: 22px; bottom: 22px; color: var(--red); }

/* Cartes numérotées (détail d'une prestation, situations de dépannage, engagements) */

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 3px solid var(--ink); border-left: 1px solid var(--line); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards > * { display: grid; align-content: start; gap: 10px; padding: 26px 24px 30px; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cards span { color: var(--red); font-size: 0.8rem; font-weight: 800; }
.cards h3 { font-size: 1.3rem; font-weight: 800; }
.cards p { color: var(--muted); font-size: 0.95rem; }
.cards a { justify-self: start; margin-top: 6px; font-size: 0.9rem; font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--red); }

/* Points de contrôle (sur fond noir) */

.checks { display: grid; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.checks li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.checks strong { color: #fff; font-family: Archivo, sans-serif; font-size: 1.1rem; font-weight: 800; }
.checks span { color: rgba(255, 255, 255, 0.72); }

/* Étapes numérotées */

.steps { display: grid; gap: 0; border-top: 3px solid var(--ink); counter-reset: step; }
.steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); color: var(--red); font-family: Archivo, sans-serif; font-size: 1.5rem; font-weight: 900; line-height: 1.1; }
.steps strong { display: block; font-size: 1.08rem; }
.steps p { color: var(--muted); }
.block--ink .steps { border-top-color: #fff; }
.block--ink .steps li { border-bottom-color: rgba(255, 255, 255, 0.16); }
.block--ink .steps p { color: rgba(255, 255, 255, 0.72); }
.page-head .steps { border-top-color: #fff; }
.page-head .steps li { padding: 14px 0; border-bottom-color: rgba(255, 255, 255, 0.16); }
.page-head .steps p { color: rgba(255, 255, 255, 0.72); }

/* Questions fréquentes */

.faq { border-top: 3px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-family: Archivo, sans-serif; font-size: 1.15rem; font-weight: 800; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--red); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { max-width: 46rem; padding: 0 0 22px; color: var(--muted); }

/* Réalisations */

.works { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 14px; }
.work { position: relative; overflow: hidden; background: var(--ink); }
.work img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.work--wide img { aspect-ratio: auto; }
.work figcaption, .fleet figcaption { position: absolute; left: 0; bottom: 0; padding: 10px 14px; color: #fff; background: var(--ink); font-size: 0.85rem; font-weight: 700; }
.fleet { position: relative; overflow: hidden; margin-top: 14px; background: var(--ink); }
.fleet img { width: 100%; aspect-ratio: 1654 / 608; object-fit: cover; }
.fleet--solo { margin-top: 0; }
.source { margin-top: 14px; color: var(--muted); font-size: 0.85rem; }

/* Demande par SMS */

.lead-box { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.lead-box h2 { margin-top: 12px; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 900; }
.lead-box__copy > p:not(.kicker) { margin-top: 18px; color: rgba(255, 255, 255, 0.72); }
.phone-tile { display: inline-grid; margin-top: 30px; padding: 16px 22px; color: #fff; text-decoration: none; background: var(--red); }
.phone-tile small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.phone-tile strong { font-family: Archivo, sans-serif; font-size: 2rem; font-weight: 900; white-space: nowrap; }
.hours { display: grid; gap: 6px; margin-top: 28px; max-width: 320px; font-size: 0.92rem; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 6px; border-bottom: 1px solid rgba(127, 127, 127, 0.3); }
.hours dt { font-weight: 700; }
.form { padding: 32px; color: var(--ink); background: #fff; }
.block--soft .form, .form--bordered { border: 1px solid var(--line); }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chips legend { margin-bottom: 14px; padding: 0; font-weight: 800; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: flex; align-items: center; min-height: 50px; padding: 10px 14px; font-size: 0.92rem; font-weight: 700; line-height: 1.2; border: 1px solid #cfcfcb; }
.chips label:hover span { border-color: var(--ink); }
.chips input:checked + span { color: #fff; background: var(--ink); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.fields { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; margin: 18px 0; }
.field { display: grid; gap: 7px; font-size: 0.86rem; font-weight: 700; }
.field small { font-size: 0.78rem; font-weight: 500; opacity: 0.7; }
.field input { width: 100%; min-height: 50px; padding: 10px 13px; font: inherit; font-size: 1rem; font-weight: 400; border: 1px solid #b9b9b4; }
.field input:focus { outline: 2px solid var(--ink); outline-offset: 0; }
.form__note { margin-top: 10px; color: var(--muted); font-size: 0.8rem; text-align: center; }
.form__result:empty { display: none; }
.form__result { margin-top: 14px; }
.form__error { padding: 10px 12px; color: #9b1c1c; background: #fdecec; font-weight: 700; }
.form__ok { display: grid; gap: 8px; padding: 14px; color: #1f2a22; background: #eef5f0; }
.form__ok pre { margin: 0; white-space: pre-wrap; font: inherit; font-size: 0.86rem; }
.form__ok button { justify-self: start; }

/* Avis */

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 3px solid var(--ink); }
.quotes figure { display: grid; align-content: start; gap: 18px; margin-right: 28px; padding: 30px 28px 30px 0; border-right: 1px solid var(--line); }
.quotes figure:last-child { margin-right: 0; border-right: 0; }
.quotes blockquote { font-size: 1.12rem; font-weight: 600; line-height: 1.5; }
.quotes figcaption { color: var(--muted); font-size: 0.86rem; font-weight: 700; }
.stars { color: #e8a200; letter-spacing: 0.1em; }
.score-tile { display: grid; gap: 6px; padding: 30px; color: var(--ink); background: #fff; border: 6px solid #fff; }
.score-tile strong { font-family: Archivo, sans-serif; font-size: 4rem; font-weight: 900; line-height: 1; }
.score-tile strong small { color: var(--muted); font-size: 0.45em; }
.score-tile .stars { font-size: 1.4rem; }
.score-tile p { color: var(--muted); }

/* Secteur */

.zone-box { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 60px; align-items: center; }
.zone-box .head { margin-bottom: 0; }
.towns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.towns li { padding: 16px 18px; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 700; }

/* Chiffres de l'entreprise */

.ids { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 3px solid var(--ink); }
.ids div { display: grid; gap: 4px; padding: 22px 20px 22px 0; border-bottom: 1px solid var(--line); }
.ids span { color: var(--muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ids strong { font-family: Archivo, sans-serif; font-size: 1.35rem; font-weight: 800; }

/* Mentions légales */

.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.legal__nav { position: sticky; top: 100px; display: grid; gap: 8px; padding-top: 14px; border-top: 3px solid var(--ink); }
.legal__nav a { color: var(--muted); font-weight: 600; text-decoration: none; }
.legal__nav a:hover { color: var(--ink); }
.legal__nav p { margin-top: 10px; color: var(--muted); font-size: 0.82rem; }
.legal__body { display: grid; gap: 48px; }
.legal__body article { display: grid; gap: 14px; }
.legal__body h2 { font-size: 1.6rem; font-weight: 900; }
.legal__body p { color: var(--muted); }
.legal__body dl { display: grid; border-top: 1px solid var(--line); }
.legal__body dl div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.legal__body dt { font-weight: 700; }
.legal__body dd { color: var(--muted); }

/* Page 404 */

.notfound { position: relative; padding: 120px 0; }
.notfound h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 900; }
.notfound p { max-width: 34em; margin-top: 16px; color: rgba(255, 255, 255, 0.75); }

/* Pied de page */

/* Pied de page en trois bandes : la marque et les infos utiles, une ligne de liens, la ligne légale */
.foot { padding-top: 64px; color: rgba(255, 255, 255, 0.66); background: var(--ink); font-size: 0.9rem; line-height: 1.6; }
.foot a { color: #fff; text-decoration: none; }
.foot__top { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr); gap: 56px; align-items: center; padding-bottom: 48px; }
.foot__logo img { width: 200px; transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.foot__logo:hover img { transform: scale(1.04) rotate(-1.5deg); }
.foot__brand p { max-width: 20em; margin-top: 14px; }
.foot__info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foot__info div { padding: 4px 28px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.foot__info dt { margin-bottom: 8px; color: var(--red-l); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.foot__info dd { color: rgba(255, 255, 255, 0.8); }
.foot__phone { display: block; font-family: Archivo, sans-serif; font-size: 1.35rem; font-weight: 900; line-height: 1.2; white-space: nowrap; transition: color 200ms ease; }
.foot__phone:hover { color: var(--red-l); }
.foot__info dd span { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; }
.foot__info .foot__hours span { margin-top: 0; color: rgba(255, 255, 255, 0.8); font-size: inherit; white-space: nowrap; }

/* Une seule ligne de liens ; un trait rouge se trace sous celui qu'on survole */
.foot__nav { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.foot__nav ul { display: flex; flex-wrap: wrap; gap: 6px 30px; padding: 22px 0; }
.foot__nav a { position: relative; display: inline-block; padding: 4px 0; color: rgba(255, 255, 255, 0.82); font-weight: 600; transition: color 200ms ease; }
.foot__nav a::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 450ms var(--ease); }
.foot__nav a:hover { color: #fff; }
.foot__nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

.foot__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 20px 0; color: rgba(255, 255, 255, 0.42); font-size: 0.78rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }

.callbar { display: none; }

/* Apparition douce au défilement (désactivée si l'utilisateur réduit les animations) */

@media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 500ms ease; }
    .js [data-reveal].is-visible { opacity: 1; transform: none; }
}

@media (max-width: 1080px) {
    .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .svc li:nth-child(4) { border-left: 1px solid var(--line); }
    .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
    :root { --top-h: 64px; }
    body { padding-bottom: 58px; }
    .wrap { width: calc(100% - 32px); }
    .hero__in, .page-head__in { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 56px; }
    .compare img { aspect-ratio: 4 / 3; }
    .block { padding: 64px 0; }
    .split, .lead-box, .zone-box, .legal { grid-template-columns: 1fr; gap: 32px; }
    .legal__nav { position: static; }
    .svc { grid-template-columns: 1fr; }
    .svc li, .svc li:nth-child(4) { border-left: 1px solid var(--line); }
    .svc a { grid-template-columns: auto 1fr; gap: 6px 14px; padding: 20px; }
    .svc__n, .svc__go { display: none; }
    .svc__ic { grid-row: 1 / span 2; }
    .cards, .cards--4 { grid-template-columns: 1fr; }
    .checks li { grid-template-columns: 1fr; gap: 4px; }
    .works { grid-template-columns: 1fr 1fr; }
    .work--wide { grid-column: 1 / -1; }
    .work--wide img { aspect-ratio: 4 / 3; }
    .form { padding: 20px; }
    .fields { grid-template-columns: 1fr; }
    .quotes { grid-template-columns: 1fr; }
    .quotes figure { margin-right: 0; padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .towns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .legal__body dl div { grid-template-columns: 1fr; gap: 2px; }
    .foot { padding-top: 56px; }
    .callbar { position: fixed; z-index: 150; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr 1fr; min-height: 58px; color: #fff; }
    .callbar a { display: grid; place-items: center; font-weight: 800; text-decoration: none; }
    .callbar a:first-child { background: var(--ink); }
    .callbar a:last-child { background: var(--red); }
}

@media (max-width: 400px) {
    .chips span { padding: 8px 10px; font-size: 0.86rem; }
    .ids { grid-template-columns: 1fr; }
}

/* ==========================================================================
   En-tête
   Barre claire, logo posé à même la barre (version claire du logo : seule la ligne des
   métiers passe en noir), liens centrés. La barre s'affine au défilement, se retire quand on descend et revient quand on
   remonte. Un filet rouge suit la lecture. « Prestations » ouvre un panneau détaillé.
   ========================================================================== */

.top {
    position: fixed; z-index: 100; top: 0; right: 0; left: 0; color: var(--ink); background: #fff;
    border-bottom: 1px solid #e6e6e1;
    transition: background 300ms ease, border-color 300ms ease, transform 450ms var(--ease);
}
.top.is-hidden { transform: translateY(-100%); }
.top__in { display: flex; align-items: center; gap: 24px; min-height: 92px; transition: min-height 350ms var(--ease); }
.top.is-solid .top__in { min-height: 72px; }
.logo { flex: none; }
.logo img { width: auto; height: 64px; transition: height 350ms var(--ease); }
.top.is-solid .logo img { height: 52px; }

/* Filet de lecture */
.top__progress { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--red); transform: scaleX(var(--read, 0)); transform-origin: 0 50%; opacity: 0; transition: opacity 300ms ease; }
.top.is-solid .top__progress { opacity: 1; }

/* Liens : le texte roule au survol, un trait rouge se trace de gauche à droite */
.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: 18px; }
.nav__link { position: relative; display: block; padding: 12px 0; font-size: 0.92rem; font-weight: 600; text-decoration: none; }
.nav__link::after { content: ""; position: absolute; right: 0; bottom: 6px; left: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 450ms var(--ease); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav__roll { display: block; overflow: hidden; height: 1.4em; line-height: 1.4; }
.nav__roll span { display: block; opacity: 0.86; text-shadow: 0 1.4em currentColor; transition: transform 450ms var(--ease), opacity 200ms ease; }
.nav__link:hover .nav__roll span { opacity: 1; transform: translateY(-1.4em); }
.nav__link[aria-current="page"] .nav__roll span { opacity: 1; }

/* Prestations : lien + petit bouton qui ouvre le panneau */
.nav__mega { display: flex; align-items: center; gap: 2px; }
.nav__more { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; color: inherit; background: transparent; border: 0; cursor: pointer; opacity: 0.7; }
.nav__more .ic { width: 16px; height: 16px; stroke-width: 2.4; transition: transform 350ms var(--ease); }
.nav__more:hover, .nav__more[aria-expanded="true"] { opacity: 1; }
.nav__more[aria-expanded="true"] .ic { transform: rotate(180deg); }

.mega {
    position: absolute; top: 100%; right: 0; left: 0; color: var(--ink); background: #fff;
    border-top: 1px solid #e6e6e1; border-bottom: 1px solid #e6e6e1;
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path 450ms var(--ease), visibility 0s linear 450ms;
}
.is-mega .mega { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 500ms var(--ease), visibility 0s; }
.mega__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1.25fr); }
.mega__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid #e6e6e1; }
.mega__list li { border-right: 1px solid #e6e6e1; }
.mega__card { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 18px 18px 22px; text-decoration: none; transition: background 250ms ease; }
.mega__card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform 450ms var(--ease); }
.mega__card:hover { background: #f6f5f2; }
.mega__card:hover::before { transform: scaleX(1); }
.mega__ic { width: 24px; height: 24px; fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 450ms var(--ease); }
.mega__card:hover .mega__ic { transform: translateY(-3px); }
.mega__name { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-family: Archivo, sans-serif; font-size: 1.12rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.mega__name .mega__ic { flex: none; }
/* Le titre du panneau, et la photo de chaque prestation (chargée à la première ouverture) */
.mega__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 14px; }
.mega__label { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.mega__all { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 0.86rem; font-weight: 700; text-decoration: none; }
.mega__all .ic { width: 16px; height: 16px; color: var(--red); transition: transform 350ms var(--ease); }
.mega__all:hover .ic { transform: translateX(4px); }
.mega__in { margin-bottom: 26px; border-top: 1px solid #e6e6e1; border-bottom: 1px solid #e6e6e1; }
.mega__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--soft); }
.mega__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 400ms ease, transform 900ms var(--ease); }
.mega__media img.is-loaded { opacity: 1; }
.mega__card:hover .mega__media img { transform: scale(1.1); }
.mega__tag { position: absolute; top: 8px; left: 8px; padding: 4px 7px; color: #fff; background: rgba(14, 14, 16, 0.82); font-size: 0.6rem; font-style: normal; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.mega__tag.is-real { background: var(--red); }
.mega__txt { color: var(--muted); font-size: 0.84rem; line-height: 1.5; }
.mega__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.84rem; font-weight: 700; text-decoration: none; }
/* « Découvrir » toujours au même niveau, en bas de chaque carte */
.mega__card .mega__go { margin-top: auto; padding-top: 8px; }
.mega__go .ic { width: 16px; height: 16px; color: var(--red); transition: transform 350ms var(--ease); }
.mega__card:hover .mega__go .ic, .mega__go:hover .ic { transform: translateX(5px); }
.mega__urgent { display: grid; align-content: center; gap: 12px; padding: 28px 30px; color: #fff; background: var(--red); }
.mega__kicker { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.mega__urgent strong { font-family: Archivo, sans-serif; font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
.mega__phone { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-family: Archivo, sans-serif; font-size: 1.5rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
.mega__urgent .mega__go .ic { color: #fff; }
.mega__list li, .mega__urgent { opacity: 0; transform: translateY(12px); transition: opacity 200ms ease, transform 200ms ease; }
.is-mega .mega__list li, .is-mega .mega__urgent { opacity: 1; transform: none; transition: opacity 500ms ease var(--d, 0ms), transform 600ms var(--ease) var(--d, 0ms); }
.mega__list li:nth-child(1) { --d: 120ms; }
.mega__list li:nth-child(2) { --d: 170ms; }
.mega__list li:nth-child(3) { --d: 220ms; }
.mega__list li:nth-child(4) { --d: 270ms; }
.mega__urgent { --d: 320ms; }

/* Appel et devis */
.top__phone { display: grid; flex: none; gap: 1px; line-height: 1.15; text-align: right; text-decoration: none; }
.top__phone small { color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.top__phone strong { font-family: Archivo, sans-serif; font-size: 1.08rem; font-weight: 800; white-space: nowrap; transition: color 200ms ease; }
.top__phone:hover strong { color: var(--red); }
.top__cta { flex: none; min-height: 46px; padding: 10px 18px; }
.top__call { display: none; }

/* Bouton menu (tablette et téléphone) */
.burger {
    display: none; align-items: center; gap: 12px; height: 46px; padding: 0 14px 0 16px;
    color: var(--ink); background: transparent; border: 1px solid rgba(14, 14, 16, 0.25); cursor: pointer;
    font: 700 0.92rem/1 Inter, system-ui, sans-serif; transition: border-color 200ms ease;
}
.burger:hover { border-color: var(--ink); }
.burger__label { min-width: 3.3em; text-align: left; }
.burger__icon { display: grid; gap: 6px; }
.burger__icon i { display: block; width: 20px; height: 2px; background: currentColor; transition: transform 450ms var(--ease), width 450ms var(--ease); }
.burger__icon i:last-child { width: 14px; justify-self: end; }
.burger:hover .burger__icon i:last-child { width: 20px; }
.menu-open .burger__icon i:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .burger__icon i:last-child { width: 20px; transform: translateY(-4px) rotate(-45deg); }

/* Le haut de chaque page passe sous l'en-tête */
.hero__in { padding-top: 180px; }
.page-head__in { padding-top: 186px; }

/* Le menu plein écran (tablette et téléphone) : un rideau clair qui descend */
.drawer {
    position: fixed; z-index: -1; inset: 0; display: none;
    overflow-y: auto; overscroll-behavior: contain; color: var(--ink); background: #fff;
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path 550ms var(--ease), visibility 0s linear 550ms;
}
.menu-open .drawer { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 650ms var(--ease), visibility 0s; }
.drawer__in { display: grid; align-content: space-between; gap: 40px; min-height: 100%; padding: 100px 0 32px; }
.drawer__list { border-top: 1px solid #e6e6e1; }
.drawer__list > li { border-bottom: 1px solid #e6e6e1; }
.drawer__link { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 16px 0; text-decoration: none; }
.drawer__n { align-self: start; padding-top: 0.55em; color: var(--red); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; }
.drawer__t { display: block; overflow: hidden; font-family: Archivo, sans-serif; font-size: clamp(1.9rem, 7.4vw, 2.8rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.025em; }
.drawer__t span { display: block; }
.drawer__link .ic { width: 22px; height: 22px; opacity: 0.4; transition: transform 350ms var(--ease), opacity 200ms ease; }
.drawer__link:hover .ic { opacity: 1; transform: translateX(4px); }
.drawer__link[aria-current="page"] .drawer__t { color: var(--red); }
.drawer__link[aria-current="page"] .ic { color: var(--red); opacity: 1; }
.drawer__sub { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: -4px 0 0; padding: 0 0 18px 42px; }
.drawer__sub a { color: var(--muted); font-size: 0.94rem; font-weight: 600; text-decoration: none; }
.drawer__sub a:hover { color: var(--ink); }
.drawer__foot { display: grid; gap: 10px; }
.drawer__hours { margin-top: 8px; color: var(--muted); font-size: 0.84rem; }
.drawer .btn--line { color: var(--ink); border-color: var(--ink); }

/* Entrée du menu : chaque titre monte de derrière son trait, l'un après l'autre */
.drawer__t span { transform: translateY(105%); transition: transform 250ms ease-in; }
.drawer__n, .drawer__link .ic, .drawer__sub, .drawer__foot { opacity: 0; transition: opacity 200ms ease; }
.drawer__foot { transform: translateY(16px); transition: opacity 200ms ease, transform 200ms ease; }
.menu-open .drawer__t span { transform: none; transition: transform 800ms var(--ease) var(--d); }
.menu-open .drawer__n, .menu-open .drawer__link .ic, .menu-open .drawer__sub { opacity: 1; transition: opacity 600ms ease calc(var(--d) + 200ms); }
.menu-open .drawer__link[aria-current="page"] .ic { opacity: 1; }
.menu-open .drawer__foot { opacity: 1; transform: none; transition: opacity 600ms ease 620ms, transform 700ms var(--ease) 620ms; }
.drawer__list > li:nth-child(1) { --d: 180ms; }
.drawer__list > li:nth-child(2) { --d: 240ms; }
.drawer__list > li:nth-child(3) { --d: 300ms; }
.drawer__list > li:nth-child(4) { --d: 360ms; }
.drawer__list > li:nth-child(5) { --d: 420ms; }
.drawer__list > li:nth-child(6) { --d: 480ms; }
.drawer__list > li:nth-child(7) { --d: 540ms; }
.menu-open { overflow: hidden; }

/* Bandeau d'infos au-dessus de la barre : l'état d'ouverture en direct (horaires de la fiche),
   la zone, la note Google et le devis gratuit. Il s'efface quand la barre s'affine. */
.top__strip { overflow: hidden; height: 36px; color: rgba(255, 255, 255, 0.72); background: var(--ink); font-size: 0.78rem; font-weight: 600; transition: height 350ms var(--ease), opacity 250ms ease; }
.top.is-solid .top__strip { height: 0; opacity: 0; }
.top__strip-in { display: flex; align-items: center; gap: 26px; height: 36px; white-space: nowrap; }
.top__status { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; }
.top__dot { position: relative; flex: none; width: 8px; height: 8px; background: #8a8a90; border-radius: 50%; }
[data-open-status].is-open .top__dot { background: #2fbf71; }
[data-open-status].is-open .top__dot::after { content: ""; position: absolute; inset: 0; background: #2fbf71; border-radius: 50%; animation: top-pulse 2.2s ease-out infinite; }
[data-open-status].is-closed .top__dot { background: var(--red-l); }
@keyframes top-pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3.2); opacity: 0; } }
.top__zone { margin-left: auto; }
.top__score { color: inherit; text-decoration: none; transition: color 200ms ease; }
.top__score span[aria-hidden] { color: #e8a200; }
.top__score:hover { color: #fff; }
.top__free { padding-left: 26px; color: #fff; border-left: 1px solid rgba(255, 255, 255, 0.16); }

/* Un seul trait rouge glisse d'un lien à l'autre, puis revient sur la page en cours */
/* Le trait est placé par rapport à toute la barre (pas au menu, sinon le panneau Prestations rétrécit) */
.nav__glide { position: absolute; bottom: 30px; left: 0; width: 0; height: 2px; background: var(--red); opacity: 0; pointer-events: none; transition: transform 550ms var(--ease), width 550ms var(--ease), opacity 250ms ease, bottom 350ms var(--ease); }
.top.is-solid .nav__glide { bottom: 20px; }
.js .nav__link::after { display: none; }

/* Le téléphone sonne de temps en temps */
.top__phone { display: flex; align-items: center; gap: 10px; text-align: left; }
.top__phone-text { display: grid; gap: 1px; }
.top__ring { display: grid; flex: none; place-items: center; width: 38px; height: 38px; color: #fff; background: var(--red); transition: background 200ms ease; }
.top__ring .ic { width: 17px; height: 17px; animation: top-ring 4.5s ease-in-out infinite; }
.top__phone:hover .top__ring { background: var(--red-d); }
@keyframes top-ring { 0%, 78%, 100% { transform: rotate(0); } 81% { transform: rotate(-16deg); } 84% { transform: rotate(14deg); } 87% { transform: rotate(-12deg); } 90% { transform: rotate(9deg); } 93% { transform: rotate(-5deg); } 96% { transform: rotate(2deg); } }

/* Le logo réagit au survol */
.logo img { transition: height 350ms var(--ease), transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.logo:hover img { transform: scale(1.05) rotate(-1.5deg); }

@media (max-width: 1240px) {
    .top__phone { display: none; }
}

@media (max-width: 1080px) {
    .foot__top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .nav, .top__cta { display: none; }
    .top__in { gap: 10px; min-height: 76px; }
    .top.is-solid .top__in { min-height: 64px; }
    .logo { margin-right: auto; }
    .logo img, .top.is-solid .logo img { height: 50px; }
    .top__call { display: grid; place-items: center; width: 46px; height: 46px; color: #fff; background: var(--red); }
    .top__call .ic { width: 20px; height: 20px; }
    .burger { display: inline-flex; }
    .drawer { display: block; }
    .menu-open .top__progress { opacity: 0; }
    .hero__in { padding-top: 172px; }
    .page-head__in { padding-top: 166px; }
    .top__zone, .top__free { display: none; }
    .top__score { margin-left: auto; }
    .drawer__in { padding-top: 136px; }
}

@media (max-width: 920px) {
    .hero__in, .page-head__in { padding-top: 150px; }
    .menu-open .callbar { transform: translateY(100%); }
    .callbar { transition: transform 300ms ease; }
}

@media (max-width: 600px) {
    .foot__info { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .foot__info div { padding: 0 0 0 16px; }
    .foot__nav ul { gap: 4px 20px; }
}

/* Au doigt : des zones de toucher d'au moins 44 px de haut sur les liens isolés */
@media (max-width: 920px) {
    .crumbs a { display: inline-block; padding: 12px 0; margin: -12px 0; }
    .head a.link, .final__sms, .hero__rating, .issue2__sms, .foot__phone, .vitrine__note a { min-height: 44px; }
    .head a.link, .final__sms, .issue2__sms { display: inline-flex; align-items: center; }
    .foot__nav a { padding: 10px 0; }
    .foot__phone { display: flex; align-items: center; }
    .legal__nav { gap: 0; }
    .legal__nav a { display: block; padding: 10px 0; }
    .works2__item figcaption button { flex: none; }
    /* Les points de la carte sont plus faciles à toucher */
    .zone__hit { transform: scale(2.6); }
}

@media (max-width: 420px) {
    .top__score-more { display: none; }
    .hero__rating { gap: 4px 8px; font-size: 0.86rem; }
    .hero__stars { letter-spacing: 0; }
    .ent-hero__media figcaption { top: 0; bottom: auto; }
}

@media (max-width: 400px) {
    .burger__label { display: none; }
    .burger { width: 46px; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .top, .top__in, .logo img, .mega, .drawer, .is-mega .mega, .menu-open .drawer { transition: none; }
    .nav__roll span, .drawer__t span, .menu-open .drawer__t span, .drawer__foot, .menu-open .drawer__foot,
    .mega__list li, .mega__urgent, .is-mega .mega__list li, .is-mega .mega__urgent { transform: none; transition: opacity 150ms ease; }
    .nav__link:hover .nav__roll span { transform: none; }
}

/* ==========================================================================
   Prestations de l'accueil : cinq panneaux photo côte à côte.
   Le panneau survolé s'ouvre en couleur et montre son texte sur une plaque
   noire ; les autres restent étroits, assombris, le titre à la verticale.
   Au téléphone : un carrousel qu'on fait glisser, avec un filet de progression.
   ========================================================================== */

.panels { display: flex; gap: 6px; height: clamp(460px, 40vw, 560px); }
.panel {
    position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
    color: #fff; background: var(--ink); text-decoration: none;
    transition: flex-grow 750ms var(--ease);
}
.panel.is-open { flex-grow: 3.6; }
.panel::after { content: ""; position: absolute; z-index: 3; top: 0; right: 0; left: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms var(--ease); }
.panel.is-open::after { transform: scaleX(1); transition-delay: 150ms; }
.panel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transform: scale(1.12); transition: filter 750ms ease, transform 1400ms var(--ease); }
.panel.is-open .panel__img { filter: none; transform: scale(1); }
.panel__shade { position: absolute; inset: 0; background: rgba(14, 14, 16, 0.6); transition: background 750ms ease; }
.panel:hover .panel__shade { background: rgba(14, 14, 16, 0.5); }
.panel.is-open .panel__shade { background: rgba(14, 14, 16, 0.12); }

.panel__n { position: absolute; z-index: 2; top: 22px; left: 22px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; }
.panel__tag {
    position: absolute; z-index: 2; top: 18px; right: 18px; padding: 6px 10px;
    background: var(--ink); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
    opacity: 0; transform: translateY(-6px); transition: opacity 300ms ease, transform 400ms var(--ease);
}
.panel__tag--real { background: var(--red); }
.panel.is-open .panel__tag { opacity: 1; transform: none; transition-delay: 350ms; }

/* Panneau fermé : icône et titre à la verticale, en bas */
.panel__side {
    position: absolute; z-index: 2; bottom: 26px; left: 50%; display: flex; align-items: center; gap: 14px;
    font-family: Archivo, sans-serif; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap;
    writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg);
    transition: opacity 300ms ease;
}
.panel__side .ic { width: 22px; height: 22px; color: var(--red-l); transform: rotate(180deg); }
.panel.is-open .panel__side { opacity: 0; transition-delay: 0ms; }
.panel:not(.is-open) .panel__side { transition-delay: 300ms; }

/* Panneau ouvert : plaque noire en bas à gauche */
.panel__body {
    position: absolute; z-index: 2; bottom: 0; left: 0; display: grid; gap: 10px; width: min(410px, 100%); padding: 28px 30px 26px;
    background: var(--ink);
    opacity: 0; transform: translateY(24px); transition: opacity 250ms ease, transform 300ms ease;
}
.panel.is-open .panel__body { opacity: 1; transform: none; transition: opacity 500ms ease 380ms, transform 700ms var(--ease) 380ms; }
.panel__ic { width: 30px; height: 30px; color: var(--red-l); stroke-width: 1.6; }
.panel__t { font-family: Archivo, sans-serif; font-size: 1.6rem; font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; }
.panel__d { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; line-height: 1.55; }
.panel__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.88rem; font-weight: 800; }
.panel__go .ic { width: 18px; height: 18px; color: var(--red-l); transition: transform 350ms var(--ease); }
.panel:hover .panel__go .ic { transform: translateX(5px); }
.panel:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.panels-track { display: none; }

@media (max-width: 1080px) {
    .panel.is-open { flex-grow: 3; }
    .panel__side { font-size: 1.1rem; }
}

@media (max-width: 920px) {
    /* Carrousel : chaque carte est ouverte, on la fait glisser */
    .panels {
        display: grid; grid-auto-columns: 84%; grid-auto-flow: column; gap: 10px; height: auto;
        margin-inline: -16px; padding-inline: 16px; overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none;
    }
    .panels::-webkit-scrollbar { display: none; }
    .panel { height: 440px; scroll-snap-align: start; }
    .panel::after { transform: scaleX(1); }
    .panel__img, .panel.is-open .panel__img { filter: none; transform: none; }
    .panel__shade, .panel.is-open .panel__shade { background: rgba(14, 14, 16, 0.12); }
    .panel__tag, .panel__body { opacity: 1; transform: none; }
    .panel__side { display: none; }
    .panel__body { right: 10px; bottom: 10px; left: 10px; width: auto; padding: 20px 20px 18px; }
    .panel__t { font-size: 1.35rem; }
    .panel__d { font-size: 0.9rem; }
    .panels-track { display: block; position: relative; height: 2px; margin-top: 18px; background: var(--line); }
    .panels-track i { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; background: var(--red); }
}

@media (prefers-reduced-motion: reduce) {
    .panel, .panel__img, .panel__shade, .panel__body, .panel__tag, .panel::after { transition: none; }
}

/* ==========================================================================
   Réalisations de l'accueil : une vitrine. Grande photo à gauche dans un cadre
   à repères rouges, liste des chantiers à droite. Le chantier actif s'ouvre,
   un filet rouge avance, puis la vitrine passe au suivant (pause au survol).
   ========================================================================== */

.vitrine { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.vitrine__frame { position: relative; overflow: hidden; aspect-ratio: 5 / 6; background: var(--ink); }
.vitrine__media { position: relative; padding: 12px; border: 1px solid var(--line); background: #fff; }
.vitrine__media::before, .vitrine__media::after { content: ""; position: absolute; z-index: 3; width: 38px; height: 38px; border: 0 solid var(--red); pointer-events: none; }
.vitrine__media::before { top: -1px; left: -1px; border-top-width: 3px; border-left-width: 3px; }
.vitrine__media::after { right: -1px; bottom: -1px; border-right-width: 3px; border-bottom-width: 3px; }

/* Les photos sont empilées ; la nouvelle balaie l'ancienne de gauche à droite */
.vitrine__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 100% 0 0); transform: scale(1.06); }
.vitrine__slide.is-leaving { z-index: 1; clip-path: inset(0 0 0 0); transform: none; }
.vitrine__slide.is-active { z-index: 2; clip-path: inset(0 0 0 0); transform: none; transition: clip-path 1000ms var(--ease), transform 1600ms var(--ease); }
.vitrine__tag { position: absolute; z-index: 3; left: 0; bottom: 0; padding: 9px 14px; color: #fff; background: var(--ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.vitrine__count { position: absolute; z-index: 3; top: 16px; right: 16px; padding: 7px 11px; color: #fff; background: var(--ink); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; }
.vitrine__count b { color: var(--red-l); }

/* La liste des chantiers */
.vitrine__list { border-top: 3px solid var(--ink); }
.vitrine__list li { border-bottom: 1px solid var(--line); }
.vitrine__item {
    position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 8px; width: 100%; padding: 24px 0 26px;
    color: var(--ink); text-align: left; background: transparent; border: 0; cursor: pointer; font: inherit;
}
.vitrine__n { grid-row: 1 / span 2; padding-top: 0.5em; color: var(--muted); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; transition: color 300ms ease; }
.vitrine__name { font-family: Archivo, sans-serif; font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; color: #8a8a90; transition: color 300ms ease; }
.vitrine__tags { margin-top: 6px; color: var(--muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.vitrine__item:hover .vitrine__name, .vitrine__item.is-active .vitrine__name { color: var(--ink); }
.vitrine__item.is-active .vitrine__n { color: var(--red); }

/* Le chantier actif s'ouvre et montre sa description */
.vitrine__more { grid-column: 2; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 600ms var(--ease); }
.vitrine__more > span { overflow: hidden; max-width: 30em; color: var(--muted); font-size: 0.98rem; line-height: 1.6; opacity: 0; transition: opacity 300ms ease; }
.vitrine__item.is-active .vitrine__more { grid-template-rows: 1fr; }
.vitrine__item.is-active .vitrine__more > span { padding-top: 12px; opacity: 1; transition: opacity 500ms ease 200ms; }

/* Le filet de progression du chantier actif */
.vitrine__bar { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; overflow: hidden; }
.vitrine__bar i { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
.vitrine__item.is-active .vitrine__bar i { animation: vitrine-progress 7s linear forwards; }
.vitrine:not(.is-playing) .vitrine__bar i, .vitrine:hover .vitrine__bar i, .vitrine:focus-within .vitrine__bar i { animation-play-state: paused; }
@keyframes vitrine-progress { to { transform: scaleX(1); } }

.vitrine__nav { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.vitrine__arrow { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; color: var(--ink); background: transparent; border: 1px solid var(--ink); cursor: pointer; transition: color 200ms ease, background 200ms ease; }
.vitrine__arrow:hover { color: #fff; background: var(--ink); }
.vitrine__arrow .ic { width: 20px; height: 20px; }
.vitrine__arrow:first-child .ic { transform: rotate(180deg); }
.vitrine__note { margin-left: 14px; color: var(--muted); font-size: 0.82rem; }

@media (max-width: 920px) {
    .vitrine { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .vitrine__frame { aspect-ratio: 4 / 4.2; }
    .vitrine__media { padding: 8px; }
    .vitrine__item { grid-template-columns: 40px minmax(0, 1fr); padding: 18px 0 20px; }
    .vitrine__name { font-size: 1.3rem; }
    .vitrine__nav { flex-wrap: wrap; }
    .vitrine__note { flex: 1 1 100%; margin: 6px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vitrine__slide.is-active, .vitrine__more, .vitrine__more > span { transition: none; }
    .vitrine__item.is-active .vitrine__bar i { animation: none; transform: scaleX(1); }
}

/* ==========================================================================
   Avis de l'accueil : la note Google en grand sur un panneau noir, un avis mis
   en avant en gros caractères, deux autres en dessous.
   ========================================================================== */

.reviews { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; border-top: 3px solid var(--ink); }
.reviews__score { grid-row: 1 / span 2; display: grid; align-content: start; padding: 40px 36px 36px; color: #fff; background: var(--ink); }
.reviews__label { color: var(--red-l); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.reviews__note { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; font-family: Archivo, sans-serif; font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; }
.reviews__note strong { font-size: clamp(5rem, 9vw, 7.6rem); }
.reviews__note span { color: rgba(255, 255, 255, 0.45); font-size: 2rem; }
.reviews__stars { margin-top: 14px; color: #e8a200; font-size: 1.5rem; letter-spacing: 0.12em; }
.reviews__count { max-width: 16em; margin-top: 12px; color: rgba(255, 255, 255, 0.65); font-size: 0.95rem; }
.reviews__btn { justify-self: start; margin-top: 30px; }
.reviews__btn .ic { transition: transform 350ms var(--ease); }
.reviews__btn:hover .ic { transform: translateX(4px); }

.review { position: relative; display: grid; align-content: space-between; gap: 26px; padding: 34px 0 34px 44px; }
.review blockquote { color: var(--ink); font-size: 1.08rem; font-weight: 500; line-height: 1.6; }
.review figcaption { display: flex; align-items: center; gap: 14px; }
.review figcaption > span:last-child { display: grid; gap: 1px; }
.review strong { font-size: 0.98rem; }
.review small { color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.review__initial { display: grid; flex: none; place-items: center; width: 44px; height: 44px; color: var(--ink); background: var(--soft); font-family: Archivo, sans-serif; font-size: 1.15rem; font-weight: 900; }

/* L'avis mis en avant : grand guillemet rouge, texte en Archivo */
.review--big { grid-column: 2 / span 2; padding-top: 30px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.review--big::before { content: "«"; display: block; height: 0.62em; margin-bottom: 4px; color: var(--red); font-family: Archivo, sans-serif; font-size: 5.6rem; font-weight: 900; line-height: 1; }
.review--big blockquote { max-width: 26em; font-family: Archivo, sans-serif; font-size: clamp(1.45rem, 2.4vw, 2.1rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; }
.review--big .review__initial { color: #fff; background: var(--red); }
.review--big + .review + .review { border-left: 1px solid var(--line); }

/* Un trait rouge se trace au-dessus des petits avis au survol */
.review:not(.review--big)::before { content: ""; position: absolute; top: -1px; right: 0; left: 44px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform 500ms var(--ease); }
.review:not(.review--big):hover::before { transform: scaleX(1); }

@media (max-width: 1080px) {
    .reviews { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .reviews__score { grid-row: auto; grid-column: 1 / -1; grid-template-columns: auto auto 1fr; align-items: end; column-gap: 28px; }
    .reviews__label { grid-column: 1 / -1; }
    .reviews__note { grid-row: 2 / span 2; }
    .reviews__stars, .reviews__count { grid-column: 2 / -1; }
    .reviews__btn { grid-column: 1 / -1; }
    .review { padding-left: 0; }
    .review--big { grid-column: 1 / -1; }
    .review:not(.review--big)::before { left: 0; }
    .review--big + .review + .review { padding-left: 32px; }
    .review--big + .review { padding-right: 32px; }
}

@media (max-width: 600px) {
    .reviews { grid-template-columns: minmax(0, 1fr); }
    .reviews__score { display: grid; grid-template-columns: minmax(0, 1fr); padding: 30px 24px; }
    .reviews__note, .reviews__stars, .reviews__count, .reviews__btn { grid-column: auto; grid-row: auto; }
    .reviews__btn { justify-self: stretch; }
    .review--big::before { font-size: 4.4rem; }
    .review--big + .review { padding-right: 0; }
    .review--big + .review + .review { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
}

/* ==========================================================================
   Secteur de l'accueil : carte schématique dessinée à l'échelle (coordonnées
   réelles des communes), cercles de 10 et 20 km autour du siège. La liste et
   la carte se répondent au survol.
   ========================================================================== */

.zone { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.zone__text h2 { margin-top: 12px; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 900; }
.zone__text > p:not(.kicker):not(.zone__note) { margin-top: 14px; color: var(--muted); }
.zone__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin-top: 28px; border-top: 3px solid var(--ink); }
.zone__list li { border-bottom: 1px solid var(--line); }
.zone__list button {
    position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 0;
    color: var(--ink); text-align: left; background: transparent; border: 0; cursor: pointer; font: inherit; font-weight: 700; transition: color 200ms ease, padding 300ms var(--ease);
}
.zone__list button::before { content: ""; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; background: var(--red); transform: translateY(-50%) scale(0); transition: transform 300ms var(--ease); }
.zone__list small { color: var(--muted); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.zone__list li:first-child small { color: var(--red); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; }
.zone__list button.is-hot { color: var(--red); }
.zone__list button.is-picked { padding-left: 18px; color: var(--red); }
.zone__list button.is-picked::before { transform: translateY(-50%) scale(1); }
.zone__note { margin-top: 14px; color: var(--muted); font-size: 0.8rem; }

.zone__map { position: relative; padding: 12px; background: #fff; border: 1px solid var(--line); }
.zone__map::before, .zone__map::after { content: ""; position: absolute; z-index: 1; width: 38px; height: 38px; border: 0 solid var(--red); pointer-events: none; }
.zone__map::before { top: -1px; left: -1px; border-top-width: 3px; border-left-width: 3px; }
.zone__map::after { right: -1px; bottom: -1px; border-right-width: 3px; border-bottom-width: 3px; }
.zone__svg { display: block; width: 100%; height: auto; overflow: hidden; background: #fbfbfa; }
.zone__grid line { stroke: #e9e9e5; stroke-width: 1.5; }
.zone__area { fill: #fbe8e8; stroke: #fbe8e8; stroke-width: 84; stroke-linejoin: round; }
.zone__area-edge { fill: none; stroke: #efb9bb; stroke-width: 88; stroke-linejoin: round; }
.zone__ring { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 6 8; opacity: 0.55; }
.zone__ring-label { fill: var(--red); font: 800 15px Inter, sans-serif; letter-spacing: 0.06em; }
.zone__scale path { fill: none; stroke: var(--ink); stroke-width: 2; }
.zone__scale text, .zone__north text { fill: var(--ink); font: 700 15px Inter, sans-serif; }
.zone__north path { fill: var(--ink); }

.zone__svg text { -webkit-user-select: none; user-select: none; }
.zone__pt { cursor: pointer; outline: none; }
.zone__hit { fill: transparent; }
.zone__pt:focus-visible .zone__dot { stroke: var(--red); stroke-width: 4; }
.zone__pt--hq:focus-visible .zone__hq { stroke: var(--ink); }

/* Les rayons depuis le siège, et le trajet de la commune choisie qui se trace */
.zone__spoke { fill: none; stroke: #d5d5cf; stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.zone__route { fill: none; stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 250ms ease; }
.zone__route.is-hot { stroke-dashoffset: 0; transition: stroke-dashoffset 750ms var(--ease); }
.zone__badge { opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.zone__badge.is-hot { opacity: 1; transition: opacity 300ms ease 450ms; }
.zone__badge rect { fill: var(--ink); }
.zone__badge text { fill: #fff; font: 800 17px Inter, sans-serif; }
.zone__ping { fill: none; stroke: var(--red); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: zone-ping 2.8s ease-out infinite; }
@keyframes zone-ping { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3.4); opacity: 0; } }

/* La fiche de la commune, sous la carte */
.zone__card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 12px; padding: 18px 8px 8px; border-top: 1px solid var(--line); }
.zone__card-text { display: grid; gap: 2px; min-width: 0; }
.zone__card-kicker { color: var(--red); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.zone__card-text strong { font-family: Archivo, sans-serif; font-size: 1.45rem; font-weight: 900; line-height: 1.15; letter-spacing: -0.015em; }
.zone__card-text span:last-child { color: var(--muted); font-size: 0.9rem; }
.zone__card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.zone__card-actions .btn { min-height: 46px; padding: 10px 18px; }
.zone__dot { fill: var(--ink); stroke: #fff; stroke-width: 3; transition: transform 300ms var(--ease), fill 200ms ease; }
.zone__pt--major .zone__dot { transform: scale(1.35); }
.zone__label { fill: var(--ink); font: 700 19px Inter, sans-serif; paint-order: stroke; stroke: #fbfbfa; stroke-width: 5px; stroke-linejoin: round; transition: fill 200ms ease; }
.zone__hq { fill: var(--red); stroke: #fff; stroke-width: 3; }
.zone__hq-in { fill: #fff; }
.zone__label--hq { font-family: Archivo, sans-serif; font-size: 22px; font-weight: 900; }
.zone__sub { fill: var(--red); font: 800 13px Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; paint-order: stroke; stroke: #fbfbfa; stroke-width: 4px; }
.zone__pt.is-hot .zone__dot, .zone__pt.is-picked .zone__dot { fill: var(--red); transform: scale(1.7); }
.zone__pt.is-hot .zone__label, .zone__pt.is-picked .zone__label { fill: var(--red); }

/* Les cercles de distance se tracent quand la carte arrive à l'écran */
@media (prefers-reduced-motion: no-preference) {
    .js .zone__ring { stroke-dashoffset: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.2); opacity: 0; transition: transform 1400ms var(--ease), opacity 600ms ease; }
    .js .zone__map.is-visible .zone__ring { transform: none; opacity: 0.55; }
    .js .zone__map.is-visible .zone__ring + .zone__ring { transition-delay: 150ms; }
    .js .zone__pt { opacity: 0; transition: opacity 500ms ease; }
    .js .zone__map.is-visible .zone__pt { opacity: 1; transition-delay: 500ms; }
}

/* ==========================================================================
   Bandeau final rouge : les métiers défilent en grandes lettres détourées,
   puis l'appel direct dans un bloc blanc, et la demande par SMS en dessous.
   ========================================================================== */

.final { overflow: hidden; color: #fff; background: var(--red); }
.final__band { padding: 34px 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.final__track { display: flex; width: max-content; animation: final-band 48s linear infinite; }
.final__track span { padding-right: 0.3em; color: transparent; font-family: Archivo, sans-serif; font-size: clamp(3.4rem, 8vw, 7rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.42); }
@keyframes final-band { to { transform: translateX(-50%); } }
.final__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 48px; align-items: center; padding: 52px 0 64px; }
.final h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; }
.final p { grid-row: 2; max-width: 34em; opacity: 0.92; }
.final__cta { grid-row: 1 / span 2; grid-column: 2; display: grid; justify-items: stretch; gap: 14px; }
.final__phone { display: flex; align-items: center; gap: 18px; padding: 16px 30px 16px 16px; color: var(--ink); background: #fff; text-decoration: none; transition: background 250ms ease, color 250ms ease; }
.final__ic { display: grid; flex: none; place-items: center; width: 58px; height: 58px; color: #fff; background: var(--red); transition: background 250ms ease; }
.final__ic .ic { width: 24px; height: 24px; }
.final__phone small { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; transition: color 250ms ease; }
.final__phone strong { display: block; font-family: Archivo, sans-serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; line-height: 1.1; white-space: nowrap; }
.final__phone:hover { color: #fff; background: var(--ink); }
.final__phone:hover small { color: rgba(255, 255, 255, 0.6); }
.final__sms { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-weight: 700; text-decoration: none; }
.final__sms .ic { width: 18px; height: 18px; transition: transform 350ms var(--ease); }
.final__sms:hover { text-decoration: underline; }
.final__sms:hover .ic { transform: translateX(4px); }

@media (max-width: 920px) {
    .zone { grid-template-columns: minmax(0, 1fr); }
    .zone__map { order: -1; padding: 8px; }
    .zone__label { font-size: 0; stroke-width: 0; }
    .zone__pt--major .zone__label, .zone__label--hq { font-size: 40px; stroke-width: 9px; }
    .zone__pt--major .zone__label { transform: translateY(-18px); }
    .zone__sub { display: none; }
    .zone__label--hq { text-anchor: end; }
    .zone__ring-label { font-size: 26px; }
    .zone__dot { transform: scale(1.6); }
    .zone__pt--major .zone__dot { transform: scale(2); }
    .zone__hq { transform: scale(1.4); }
    .zone__scale text, .zone__north text { font-size: 28px; }
    .zone__pt.is-hot .zone__label { font-size: 40px; stroke-width: 9px; }
    .zone__pt.is-hot .zone__dot { transform: scale(2.4); }
    .zone__badge-in { transform: scale(1.9); }
    .zone__route { stroke-width: 6; }
    .zone__card { padding: 14px 4px 4px; }
    .zone__card-actions, .zone__card-actions .btn { flex: 1 1 auto; }
    .final__band { padding-top: 26px; }
    .final__in { grid-template-columns: minmax(0, 1fr); padding: 40px 0 48px; }
    .final p { grid-row: auto; }
    .final__cta { grid-row: auto; grid-column: auto; margin-top: 18px; }
    .final__phone { padding-right: 18px; }
}

@media (max-width: 600px) {
    .zone__list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .top__ring .ic, [data-open-status].is-open .top__dot::after { animation: none; }
    .final__track, .zone__ping { animation: none; }
    .zone__ping { display: none; }
    .zone__route, .zone__route.is-hot { transition: none; }
}

/* ==========================================================================
   Réalisations : avant / après interactifs (la séparation suit la souris,
   balayage à l'arrivée, boutons Avant / 50-50 / Après, filtres), photos de
   chantiers, et visionneuse plein écran pour les deux.
   ========================================================================== */

.ba .head--row { flex-direction: column; align-items: flex-start; }
.ba .head--row > .ba-filters { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; margin-top: 8px; }
.ba-filters button {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
    color: var(--ink); background: #fff; border: 1px solid #d3d3ce; cursor: pointer; font: 700 0.88rem/1 Inter, system-ui, sans-serif;
    transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.ba-filters button span { color: var(--muted); font-size: 0.76rem; transition: color 200ms ease; }
.ba-filters button:hover { border-color: var(--ink); }
.ba-filters button[aria-pressed="true"] { color: #fff; background: var(--ink); border-color: var(--ink); }
.ba-filters button[aria-pressed="true"] span { color: var(--red-l); }

.ba-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.ba-card { display: grid; align-content: start; background: #fff; border: 1px solid var(--line); }
.ba-card[hidden] { display: none; }
.ba-card.is-in { animation: ba-in 550ms var(--ease) var(--d, 0ms) both; }
@keyframes ba-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.ba-card__compare, .lb__compare { border: 0; }
.ba-card__compare img, .lb__compare img { aspect-ratio: 3 / 2; }
/* Les étiquettes suivent la séparation ; la poignée est ronde */
.ba .compare__tag--before, .lb .compare__tag--before { left: auto; right: calc(100% - var(--position) + 12px); }
.ba .compare__tag--after, .lb .compare__tag--after { right: auto; left: calc(var(--position) + 12px); }
.ba .compare__line i, .lb .compare__line i { width: 52px; height: 52px; border-radius: 50%; }
.ba-card__zoom {
    position: absolute; z-index: 3; right: 12px; bottom: 12px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
    color: var(--ink); background: #fff; border: 0; cursor: zoom-in; opacity: 0; transform: translateY(6px);
    transition: opacity 250ms ease, transform 350ms var(--ease), background 200ms ease, color 200ms ease;
}
.ba-card__zoom .ic { width: 18px; height: 18px; }
.ba-card__compare:hover .ba-card__zoom, .ba-card__zoom:focus-visible { opacity: 1; transform: none; }
.ba-card__zoom:hover { color: #fff; background: var(--red); }

.ba-card__body { display: grid; gap: 10px; padding: 22px 24px 24px; }
.ba-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ba-card__cat { color: var(--red); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.ba-card__note { color: var(--muted); font-size: 0.74rem; }
.ba-card h3 { font-size: 1.35rem; font-weight: 900; }
.ba-card p { color: var(--muted); font-size: 0.95rem; }
.ba-switch { display: inline-flex; justify-self: start; margin-top: 6px; border: 1px solid var(--ink); }
.ba-switch button { min-height: 40px; padding: 0 16px; color: var(--ink); background: transparent; border: 0; cursor: pointer; font: 700 0.84rem/1 Inter, system-ui, sans-serif; transition: color 200ms ease, background 200ms ease; }
.ba-switch button + button { border-left: 1px solid var(--ink); }
.ba-switch button:hover { background: var(--soft); }
.ba-switch button[aria-pressed="true"] { color: #fff; background: var(--ink); }
.ba-hint { color: var(--muted); font-size: 0.88rem; }

/* Photos de chantiers : zoom doux au survol, clic pour agrandir */
.works2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.works2__item { position: relative; overflow: hidden; height: clamp(320px, 36vw, 480px); background: var(--ink); cursor: zoom-in; }
.works2__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.works2__item:hover img { transform: scale(1.06); }
.works2__item figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 0 16px; color: #fff; background: var(--ink); font-size: 0.88rem; font-weight: 700; }
.works2__item figcaption button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; color: #fff; background: var(--red); border: 0; cursor: zoom-in; transition: background 200ms ease; }
.works2__item figcaption button:hover { background: var(--red-d); }
.works2__item figcaption .ic { width: 18px; height: 18px; }

/* Visionneuse plein écran */
.lb { position: fixed; z-index: 300; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); color: #fff; background: rgba(14, 14, 16, 0.96); opacity: 0; transition: opacity 280ms ease; }
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb__top { display: flex; align-items: center; gap: 20px; padding: 16px 20px 16px 28px; }
.lb__title { font-family: Archivo, sans-serif; font-size: 1.2rem; font-weight: 800; }
.lb__count { margin-right: auto; color: rgba(255, 255, 255, 0.5); font-size: 0.86rem; font-weight: 700; }
.lb__btn { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); cursor: pointer; transition: background 200ms ease, border-color 200ms ease; }
.lb__btn:hover { background: var(--red); border-color: var(--red); }
.lb__btn .ic { width: 20px; height: 20px; }
.lb__stage { display: grid; place-items: center; min-height: 0; padding: 0 92px 36px; }
.lb__compare { width: min(1180px, 100%, calc((100vh - 140px) * 1.5)); }
.lb__photo { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; }
.lb__prev, .lb__next { position: absolute; top: 50%; margin-top: -25px; }
.lb__prev { left: 22px; }
.lb__prev .ic { transform: rotate(180deg); }
.lb__next { right: 22px; }
.lb.is-swap .lb__stage > * { animation: lb-in 500ms var(--ease) both; }
@keyframes lb-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.lb-open { overflow: hidden; }

@media (hover: none) {
    .ba-card__zoom { opacity: 1; transform: none; }
}

@media (max-width: 920px) {
    .ba-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .ba-card__body { padding: 18px 18px 20px; }
    .works2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .works2__item--wide { grid-column: 1 / -1; }
    .works2__item { height: 300px; }
    .lb__stage { padding: 0 12px 76px; }
    .lb__compare { width: 100%; }
    .lb__prev, .lb__next { top: auto; bottom: 14px; margin-top: 0; }
    .lb__prev { left: calc(50% - 58px); }
    .lb__next { right: calc(50% - 58px); }
    .lb__top { padding: 12px 12px 12px 16px; }
    .lb__title { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ba-card.is-in, .lb.is-swap .lb__stage > * { animation: none; }
}

/* ==========================================================================
   Page Dépannage : dans l'esprit de la page en ligne (appel en grand + demande
   par SMS dès l'arrivée), avec les pannes cliquables, les bons réflexes, les
   étapes reliées par un trait qui se trace, les avis et le secteur.
   ========================================================================== */

.dep-hero { color: var(--ink); background: #f6f5f2; border-bottom: 1px solid var(--line); }
.dep-hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: 176px 0 72px; }
.dep-hero .crumbs { color: var(--muted); }
.dep-hero .crumbs a { color: var(--ink); }
.dep-hero .hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; color: var(--muted); font-size: 0.74rem; letter-spacing: 0.16em; }
.dep-hero .hero__kicker strong { color: var(--ink); font-weight: 800; }
.dep-hero__title { margin-top: 22px; font-size: clamp(2.3rem, 3.5vw, 3.4rem); font-weight: 900; line-height: 1.03; letter-spacing: -0.03em; text-wrap: balance; }
.dep-hero__title em { display: block; color: var(--red); font-style: normal; }
.dep-hero__lead { max-width: 32em; margin-top: 22px; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
.dep-hero__lead strong { color: var(--ink); }

/* Le gros bouton d'appel, son icône qui sonne, et l'état d'ouverture en direct */
.dep-call { display: inline-flex; align-items: center; gap: 18px; margin-top: 30px; padding: 14px 30px 14px 14px; color: #fff; background: var(--red); text-decoration: none; transition: background 200ms ease, transform 300ms var(--ease); }
.dep-call:hover { background: var(--red-d); transform: translateY(-2px); }
.dep-call__ic { display: grid; place-items: center; width: 60px; height: 60px; background: rgba(0, 0, 0, 0.18); }
.dep-call__ic .ic { width: 26px; height: 26px; animation: top-ring 4.5s ease-in-out infinite; }
.dep-call__text { display: grid; gap: 2px; }
.dep-call small { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; }
.dep-call strong { font-family: Archivo, sans-serif; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 900; line-height: 1.05; white-space: nowrap; }
.dep-status { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 0.9rem; font-weight: 700; }
.dep-perks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-weight: 700; }
.dep-perks li { display: inline-flex; align-items: center; gap: 8px; }
.dep-perks .ic { width: 18px; height: 18px; color: var(--red); stroke-width: 2.4; }
.dep-perks small { color: var(--muted); font-weight: 600; }
.dep-fine { margin-top: 10px; color: var(--muted); font-size: 0.78rem; }

/* La demande par SMS, dans une carte */
.dep-form { padding: 30px 30px 26px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); scroll-margin-top: 110px; }
.dep-form h2 { font-size: 1.6rem; font-weight: 900; }
.dep-form__sub { margin: 6px 0 22px; color: var(--muted); }
.form--bare { padding: 0; background: transparent; border: 0; }
.dep-form .chips span { min-height: 46px; }
.dep-form.is-picked { animation: dep-pulse 900ms var(--ease); }
@keyframes dep-pulse { 0% { outline: 3px solid rgba(215, 25, 32, 0.6); outline-offset: 0; } 100% { outline: 3px solid rgba(215, 25, 32, 0); outline-offset: 16px; } }

/* Les pannes : appeler, ou cocher la panne dans la demande par SMS */
.issues2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.issue2 { position: relative; display: grid; align-content: start; gap: 10px; padding: 26px 24px 22px; background: #fff; border: 1px solid var(--line); transition: border-color 250ms ease, transform 350ms var(--ease); }
.issue2::before { content: ""; position: absolute; top: -1px; right: -1px; left: -1px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform 450ms var(--ease); }
.issue2:hover { border-color: #c9c9c4; transform: translateY(-3px); }
.issue2:hover::before { transform: scaleX(1); }
.issue2__ic { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 6px; color: var(--red); background: #fbeaea; transition: color 250ms ease, background 250ms ease; }
.issue2__ic .ic { width: 24px; height: 24px; stroke-width: 1.8; }
.issue2:hover .issue2__ic { color: #fff; background: var(--red); }
.issue2 h3 { font-size: 1.2rem; font-weight: 900; }
.issue2 p { color: var(--muted); font-size: 0.93rem; }
.issue2__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.issue2__call { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; color: #fff; background: var(--ink); font-size: 0.86rem; font-weight: 800; text-decoration: none; transition: background 200ms ease; }
.issue2__call:hover { background: var(--red); }
.issue2__call .ic { width: 15px; height: 15px; }
.issue2__sms { display: inline-flex; align-items: center; gap: 8px; padding: 0; color: var(--ink); background: none; border: 0; cursor: pointer; font: 800 0.86rem/1 Inter, system-ui, sans-serif; }
.issue2__sms .ic { width: 15px; height: 15px; color: var(--red); transition: transform 350ms var(--ease); }
.issue2__sms:hover .ic { transform: translateX(4px); }

/* Les bons réflexes, sur fond noir */
.tips__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.14); }
.tips__list li { position: relative; display: grid; align-content: start; gap: 10px; padding: 28px 24px 30px 0; }
.tips__list li + li { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.tips__n { color: var(--red-l); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; }
.tips__list .ic { width: 30px; height: 30px; color: #fff; stroke-width: 1.6; }
.tips__list h3 { font-size: 1.2rem; font-weight: 900; }
.tips__list p { color: rgba(255, 255, 255, 0.66); font-size: 0.93rem; }
.tips__warn { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; padding: 18px 20px; color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 75, 75, 0.45); }
.tips__warn .ic { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--red-l); }
.tips__warn strong { color: #fff; }

/* Les étapes, reliées par un trait rouge qui se trace à l'arrivée */
.timeline { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.timeline::before, .timeline::after { content: ""; position: absolute; top: 27px; right: calc(100% / 6); left: calc(100% / 6); height: 2px; }
.timeline::before { background: var(--line); }
.timeline::after { background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1600ms var(--ease) 200ms; }
.timeline.is-on::after { transform: scaleX(1); }
.timeline li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; text-align: center; }
.timeline__dot { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; color: var(--ink); background: #fff; border: 2px solid var(--line); font-family: Archivo, sans-serif; font-weight: 900; transition: color 400ms ease, background 400ms ease, border-color 400ms ease; }
.timeline.is-on li .timeline__dot { color: #fff; background: var(--red); border-color: var(--red); }
.timeline.is-on li:nth-child(1) .timeline__dot { transition-delay: 200ms; }
.timeline.is-on li:nth-child(2) .timeline__dot { transition-delay: 900ms; }
.timeline.is-on li:nth-child(3) .timeline__dot { transition-delay: 1600ms; }
.timeline h3 { font-size: 1.2rem; font-weight: 900; }
.timeline p { max-width: 22em; color: var(--muted); }

/* Le secteur */
.dep-zone { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.dep-zone h2 { margin-top: 12px; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 900; }
.dep-towns { display: flex; flex-wrap: wrap; gap: 8px; }
.dep-towns li { padding: 9px 14px; background: #fff; border: 1px solid var(--line); font-size: 0.9rem; font-weight: 700; transition: border-color 200ms ease, color 200ms ease; }
.dep-towns li:hover { color: var(--red); border-color: var(--red); }
.dep-zone__note { margin-top: 16px; color: var(--muted); }
.dep-zone__note a { color: var(--ink); font-weight: 800; }

@media (max-width: 1080px) {
    .dep-hero__in { padding-top: 168px; }
    .issues2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tips__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tips__list li:nth-child(3) { padding-left: 0; border-left: 0; }
    .tips__list li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
}

@media (max-width: 920px) {
    .dep-hero__in { grid-template-columns: minmax(0, 1fr); padding: 150px 0 48px; }
    .dep-form { padding: 22px 18px 20px; }
    .dep-call { width: 100%; }
    .timeline { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .timeline::before, .timeline::after { top: 28px; right: auto; bottom: 28px; left: 27px; width: 2px; height: auto; transform-origin: 50% 0; }
    .timeline::after { transform: scaleY(0); }
    .timeline.is-on::after { transform: scaleY(1); }
    .timeline li { grid-template-columns: 56px minmax(0, 1fr); justify-items: start; column-gap: 18px; text-align: left; }
    .timeline__dot { grid-row: 1 / span 2; margin: 0; }
    .dep-zone { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 600px) {
    .issues2, .tips__list { grid-template-columns: minmax(0, 1fr); }
    .tips__list li, .tips__list li + li { padding: 22px 0; border-left: 0; }
    .tips__list li + li { border-top: 1px solid rgba(255, 255, 255, 0.14); }
}

@media (prefers-reduced-motion: reduce) {
    .dep-call__ic .ic, .dep-form.is-picked { animation: none; }
    .timeline::after { transition: none; }
}

/* ==========================================================================
   L'entreprise : titre qui apparaît mot à mot, tampon qui tourne, plan
   « cinéma » des camions qui s'ouvre au défilement, compteurs, engagements
   qui s'allument un à un, fiche d'identité.
   ========================================================================== */

.ent-hero { color: var(--ink); background: #f6f5f2; overflow: hidden; }
.ent-hero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(40px, 6vw, 96px); align-items: center; padding: 176px 0 96px; }
.ent-hero .crumbs { color: var(--muted); }
.ent-hero .crumbs a { color: var(--ink); }
.ent-hero .hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; color: var(--muted); font-size: 0.74rem; letter-spacing: 0.16em; }
.ent-hero .hero__kicker strong { color: var(--ink); font-weight: 800; }
.ent-hero__title { margin-top: 24px; font-size: clamp(2.6rem, 5vw, 4.6rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.035em; }
.ent-line { display: block; }
.ent-w { display: inline-block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; vertical-align: top; }
.ent-w > span { display: inline-block; }
.ent-w--red { color: var(--red); }
.ent-hero__lead { max-width: 34em; margin-top: 26px; color: var(--muted); font-size: 1.08rem; line-height: 1.7; }
.ent-hero .btn--line { color: var(--ink); background: #fff; border: 1px solid #d3d3ce; }
.ent-hero .btn--line:hover { border-color: var(--ink); }

/* La photo en carte, et le tampon qui tourne à cheval sur son angle */
.ent-hero__media { position: relative; justify-self: end; width: min(100%, 420px); }
.ent-hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ent-hero__media figcaption { position: absolute; right: 0; bottom: 0; padding: 9px 14px; color: #fff; background: var(--ink); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ent-badge { position: absolute; bottom: -54px; left: -64px; display: grid; place-items: center; width: 168px; height: 168px; color: var(--ink); background: #fff; border-radius: 50%; }
.ent-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: ent-spin 26s linear infinite; }
.ent-badge text { fill: var(--ink); font: 800 13px Inter, sans-serif; letter-spacing: 0.08em; }
.ent-badge:hover svg { animation-duration: 6s; }
.ent-badge__core { display: grid; place-items: center; width: 92px; height: 92px; color: #fff; background: var(--red); border-radius: 50%; line-height: 1; }
.ent-badge__core small { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.ent-badge__core strong { margin-top: -10px; font-family: Archivo, sans-serif; font-size: 1.7rem; font-weight: 900; }
@keyframes ent-spin { to { transform: rotate(360deg); } }

/* Entrée : les mots montent un à un, la photo se dévoile, le tampon arrive en tournant */
@media (prefers-reduced-motion: no-preference) {
    .js .ent-w > span { transform: translateY(110%); animation: hero-line 900ms var(--ease) forwards; animation-delay: calc(150ms + var(--i) * 70ms); }
    .js .ent-hero__lead, .js .ent-hero .actions { opacity: 0; transform: translateY(16px); animation: hero-rise 900ms var(--ease) 900ms forwards; }
    .js .ent-hero__media img { clip-path: inset(100% 0 0 0); animation: hero-wipe 1300ms var(--ease) 300ms forwards; }
    .js .ent-badge { opacity: 0; transform: scale(0.6) rotate(-90deg); animation: ent-badge-in 1000ms cubic-bezier(0.34, 1.56, 0.64, 1) 1100ms forwards; }
}
@keyframes hero-line { to { transform: none; } }
@keyframes ent-badge-in { to { opacity: 1; transform: none; } }

/* Le plan « cinéma » : la photo des camions s'ouvre jusqu'au plein écran au défilement */
.reel { position: relative; height: 230vh; background: var(--ink); }
.reel__sticky { position: sticky; top: 0; display: grid; place-items: center; height: 100vh; overflow: hidden; }
.reel__frame { position: absolute; inset: 0; margin: 0; clip-path: inset(calc((1 - var(--p, 0)) * 22%) calc((1 - var(--p, 0)) * 26%)); }
.reel__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform: scale(calc(1.18 - var(--p, 0) * 0.18)); }
.reel__frame::after { content: ""; position: absolute; inset: 0; background: rgba(14, 14, 16, calc(var(--p, 0) * 0.45)); }
.reel__caption { position: absolute; z-index: 2; left: max(20px, calc((100% - 1180px) / 2)); bottom: 9vh; display: grid; color: #fff; font-family: Archivo, sans-serif; font-weight: 900; line-height: 1; letter-spacing: -0.03em; opacity: calc((var(--p, 0) - 0.55) * 3); transform: translateY(calc((1 - var(--p, 0)) * 60px)); }
.reel__caption span { font-size: clamp(1.4rem, 2.6vw, 2.4rem); }
.reel__caption strong { margin-top: 8px; color: var(--red-l); font-size: clamp(3rem, 8vw, 7.5rem); }

/* Les compteurs */
.counters { padding: 72px 0; }
.counters__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.counters__list li { display: grid; gap: 8px; padding: 6px 28px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.counters__list li:first-child { padding-left: 0; border-left: 0; }
.counters__list strong { font-family: Archivo, sans-serif; font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.counters__list strong span { color: var(--red-l); }
.counters__list li > span { color: rgba(255, 255, 255, 0.62); font-size: 0.92rem; }

/* Les engagements s'allument un à un ; le titre reste à gauche */
.values__in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.values__side { position: sticky; top: 120px; }
.values__side h2 { margin-top: 12px; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 900; }
.values__lead { max-width: 28em; margin-top: 16px; color: var(--muted); }
.values__count { margin-top: 30px; color: var(--muted); font-family: Archivo, sans-serif; font-size: 1.1rem; font-weight: 800; }
.values__count b { color: var(--red); font-size: 2.6rem; }
.values__list { border-top: 3px solid var(--ink); }
.values__item { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 10px; padding: 38px 0; border-bottom: 1px solid var(--line); opacity: 0.28; transition: opacity 500ms ease; }
.values__item.is-active { opacity: 1; }
.values__n { grid-row: 1 / span 2; padding-top: 0.9em; color: var(--red); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; }
.values__item h3 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 900; letter-spacing: -0.03em; transition: transform 500ms var(--ease); }
.values__item.is-active h3 { transform: translateX(6px); }
.values__item p { max-width: 28em; margin-top: 10px; color: var(--muted); font-size: 1.02rem; }

/* La fiche d'identité */
.idcard { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: stretch; }
.idcard__card { padding: 36px 36px 30px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); }
.idcard__card h2 { margin-top: 10px; font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 900; }
.idcard__list { margin-top: 24px; border-top: 1px solid var(--line); }
.idcard__list div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.idcard__list dt { color: var(--muted); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.idcard__list dd { font-weight: 700; }
.idcard__photo { position: relative; min-height: 360px; margin: 0; overflow: hidden; }
.idcard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease); }
.idcard__photo:hover img { transform: scale(1.05); }
.idcard__photo figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 12px 16px; color: #fff; background: var(--ink); font-size: 0.82rem; font-weight: 700; }

@media (max-width: 1080px) {
    .ent-hero__in { padding-top: 168px; }
    .counters__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
    .counters__list li:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 920px) {
    .ent-hero__in { grid-template-columns: minmax(0, 1fr); padding: 150px 0 72px; }
    .ent-hero__media { justify-self: center; width: min(86%, 380px); margin-top: 40px; }
    .ent-badge { bottom: -40px; left: -34px; width: 132px; height: 132px; }
    .ent-badge__core { width: 72px; height: 72px; }
    .ent-badge__core strong { font-size: 1.35rem; }
    /* Au téléphone, la photo des camions reste en paysage (sinon on n'en voit qu'un fragment flou) */
    .reel { height: 160vh; }
    .reel__frame { inset: auto 0; top: 50%; height: clamp(240px, 78vw, 520px); transform: translateY(-58%); clip-path: inset(calc((1 - var(--p, 0)) * 16%) calc((1 - var(--p, 0)) * 14%)); }
    .reel__frame img { object-position: 38% 50%; }
    .reel__caption { bottom: 12vh; }
    .values__in, .idcard { grid-template-columns: minmax(0, 1fr); }
    .values__side { position: static; }
    .values__count { display: none; }
    .values__item { padding: 28px 0; }
    .idcard__card { padding: 26px 20px 22px; }
    .idcard__list div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .idcard__photo { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
    .ent-badge svg { animation: none; }
    .reel { height: auto; }
    .reel__sticky { position: relative; height: 70vh; }
    .reel__frame { clip-path: none; }
    .reel__frame img { transform: none; }
    .reel__caption { opacity: 1; transform: none; }
    .values__item { opacity: 1; }
}

/* Hero de l'accueil sur tablette et téléphone (après les réglages d'en-tête) */
@media (max-width: 1080px) {
    .hero__in { gap: 44px; }
    .hero__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__trust li:nth-child(3) { padding-left: 0; border-left: 0; }
    .hero__trust li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.1); }
}
@media (max-width: 920px) {
    .hero__in { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 48px; }
    .hero--light .hero__in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: 40px; }
    .hero--light .hero__case { position: relative; width: 100%; }
    .hero--light .hero__frame, .hero--light .compare { position: relative; inset: auto; }
    .hero--light .compare img { height: auto; aspect-ratio: 4 / 3.3; }
    .hero--light .compare__tag--before { left: 12px; }
    .hero--light .compare__tag--after { right: 12px; }
    .hero--light .hero__case { width: 100%; }
    .hero--light .hero__frame { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.6) 9%, #000 20%); mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.6) 9%, #000 20%); }
    .hero--light .compare__tag { top: 24%; }
    .hero__card { right: 12px; bottom: 12px; padding: 7px 10px; border-left-width: 2px; }
    .hero__card strong, .hero__card-kicker { display: none; }
    .hero__card small { font-size: 0.75rem; }
    .hero__kicker-sep { display: none; }
    .hero--light .compare__line i { width: 46px; height: 46px; }
    .hero__title { font-size: clamp(2.4rem, 10vw, 3.4rem); }
    .hero .compare img { aspect-ratio: 4 / 3.3; }
}
@media (max-width: 600px) {
    .hero__actions .btn { flex: 1 1 100%; }
    .hero__trust li { gap: 10px; padding: 16px 10px 16px 0; }
    .hero__trust li + li { padding-left: 14px; }
    .hero__trust li:nth-child(3) { padding-left: 0; }
    .hero__trust li { flex-direction: column; align-items: flex-start; gap: 8px; }
    .hero__trust .ic { width: 22px; height: 22px; }
    .hero__trust strong { font-size: 0.92rem; }
    .hero__trust small { font-size: 0.74rem; }
}