/* Maquette Julio, couvreur zingueur à Paris — direction « artisan », kit Veetrine « terracotta » recoloré.

   Parti pris : les toits de Paris. Le zinc pour les fonds (un zinc pâle pour les sections teintées, jamais un crème),
   l'ardoise pour les titres et les fonds sombres (jamais de noir pur), et la terre cuite des mitrons de cheminée
   pour agir : boutons et liens. Une seule couleur vive, réservée à l'action.

   Tout le graphisme tient dans les jetons du kit, en tête de fichier : cinq couleurs, deux polices, un rayon, une
   graisse de titre. Les autres teintes en sont calculées : il suffit de régler le kit dans l'éditeur Veetrine pour
   retrouver ce rendu. Aucun effet sur mesure : les seules animations sont celles des blocs (menu, onglets, filtres,
   carrousels d'avis, avant/après balayé, accordéons) et le survol des cartes. */
:root {
  /* ── Jetons du kit ─────────────────────────────────────────────────────────── */
  --primary: #a94a26;        /* la terre cuite des mitrons : boutons, liens */
  --primary-dark: #86391c;   /* survol des boutons */
  --primary-soft: #eef1f1;   /* fond « teinte » : un zinc pâle */
  --accent: #5d7a86;         /* le zinc patiné : pictogrammes, filets, étiquettes */
  --ink: #1d2529;            /* l'ardoise : titres et fond « sombre » */
  --police-titres: "Young Serif", Georgia, serif;
  --police-texte: "Hanken Grotesk", system-ui, sans-serif;
  --graisse-titres: 400;
  --rayon: .75rem;

  /* ── Teintes dérivées des jetons (aucun réglage de plus) ───────────────────── */
  --page: #fff;
  --texte: color-mix(in oklab, var(--ink) 80%, white);
  --doux: color-mix(in oklab, var(--ink) 60%, white);
  --trait: color-mix(in oklab, var(--accent) 18%, white);
  --trait-fort: color-mix(in oklab, var(--accent) 36%, white);
  --sur-sombre: color-mix(in oklab, var(--primary-soft) 80%, var(--ink));
  --trait-sombre: color-mix(in srgb, white 16%, transparent);
  --ombre: color-mix(in srgb, var(--ink) 30%, transparent);
  --primary-clair: color-mix(in oklab, var(--primary) 70%, white);

  /* ── Mise en page et annotations de la maquette ─────────────────────────────── */
  --conteneur: 1200px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 112px);
  --surligne: #fff1a8;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--page); color: var(--texte); font: 400 1.0625rem/1.65 var(--police-texte); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--police-titres); font-weight: var(--graisse-titres); color: var(--ink); margin: 0; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.02; }
h2 { font-size: clamp(1.95rem, 3.4vw, 2.85rem); line-height: 1.08; }
h3 { font-size: 1.24rem; line-height: 1.25; letter-spacing: -0.005em; }
p { margin: 0; }
.insecable { white-space: nowrap; }
.chiffre { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .01em; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.fond-sombre :focus-visible { outline-color: var(--primary-clair); }
.a-completer { background: var(--surligne); color: #3d3200; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .2em; border-radius: 2px; font-weight: 400; font-family: var(--police-texte); font-size: .94em; }

.conteneur { width: 100%; max-width: calc(var(--conteneur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 0 var(--gouttiere); }
.section { padding: var(--section) 0; }
section[id] { scroll-margin-top: 84px; }
/* Les trois fonds du kit */
.fond-page { background: var(--page); }
.fond-teinte { background: var(--primary-soft); }
.fond-sombre { background: var(--ink); color: var(--sur-sombre); }
.fond-sombre h2, .fond-sombre h3 { color: #fff; }
.surtitre { margin-bottom: 14px; font-weight: 600; font-size: .95rem; letter-spacing: .02em; color: var(--accent); }
.surtitre--clair { color: color-mix(in oklab, var(--primary-soft) 70%, var(--accent)); }

/* ── Boutons et liens (styles du kit : primaire, secondaire, lien) ────────── */
.boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.boutons--centre { justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1.5px solid var(--primary); border-radius: var(--rayon); background: var(--primary); color: #fff; font: 600 1rem/1 var(--police-texte); text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; box-shadow: 0 10px 22px -16px var(--primary-dark); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn--petit { min-height: 42px; padding: 0 16px; font-size: .94rem; }
.btn--tel span { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.btn--contour { background: transparent; color: var(--ink); border-color: var(--trait-fort); box-shadow: none; }
.btn--contour svg { color: var(--primary); }
.btn--contour:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--clair { background: transparent; color: #fff; border-color: color-mix(in srgb, white 45%, transparent); box-shadow: none; }
.btn--clair svg { color: var(--primary-clair); }
.btn--clair:hover { background: transparent; border-color: #fff; color: #fff; }
.lien { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 600; text-decoration: none; }
.lien svg { width: 17px; height: 17px; transition: transform .2s; }
.lien:hover svg, a:hover > .lien svg { transform: translateX(3px); }

/* ── En-tête : Navbar 12, sous-menu large en deux groupes ─────────────────── */
.entete { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 32px; min-height: 76px; padding: 0 var(--gouttiere); background: color-mix(in srgb, white 96%, transparent); border-bottom: 1px solid var(--trait); backdrop-filter: blur(8px); }
.logo { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; }
.logo-mot { display: grid; line-height: 1.1; }
.logo-mot b { font: 400 1.6rem/1 var(--police-titres); color: var(--ink); letter-spacing: -0.01em; }
.logo-mot span { margin-top: 3px; font-size: .8rem; font-weight: 500; color: var(--accent); letter-spacing: .02em; }
.logo--clair .logo-mot b { color: #fff; }
.logo--clair .logo-mot span { color: color-mix(in oklab, var(--primary-soft) 70%, var(--accent)); }
.nav { display: flex; align-items: center; gap: 28px; }
.nav > a, .menu-deroulant > a { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 500; font-size: .98rem; text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
.nav a[aria-current] { border-bottom-color: var(--primary); }
/* Sur la page de devis, le bouton porte le même trait que les liens */
.entete-devis { position: relative; }
.entete-devis[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -6px; height: 2px; background: var(--primary); }
.mega li a[aria-current] b { color: var(--primary); }
.mega li a[aria-current] { background: var(--primary-soft); }
.nav > a:hover, .menu-deroulant > a:hover { color: var(--primary); }
/* Le sous-menu large se centre sous la barre entière : il ne dépasse jamais de l'écran */
.menu-deroulant { position: static; }
.menu-deroulant > a svg { width: 16px; height: 16px; }
.mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px 28px; width: min(760px, 80vw); padding: 22px 24px 24px; background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: 0 24px 50px -24px var(--ombre); opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s; }
.menu-deroulant:hover .mega, .menu-deroulant:focus-within .mega { opacity: 1; visibility: visible; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; }
.mega-titre { margin: 0 0 6px; padding: 0 10px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.mega ul { margin: 0; padding: 0; list-style: none; }
.mega li a { display: grid; gap: 2px; padding: 9px 10px; border-radius: calc(var(--rayon) - 4px); text-decoration: none; }
.mega li a b { color: var(--ink); font-weight: 600; font-size: .98rem; }
.mega li a span { color: var(--doux); font-size: .88rem; }
.mega li a:hover { background: var(--primary-soft); }
.mega li a:hover b { color: var(--primary); }
.mega-tous { display: inline-flex; align-items: center; gap: 8px; margin: 14px 10px 0; padding-top: 14px; border-top: 1px solid var(--trait); color: var(--primary); font-weight: 600; font-size: .93rem; text-decoration: none; line-height: 1.4; }
.mega-tous svg { width: 16px; height: 16px; flex: none; }
.entete-actions { display: flex; align-items: center; gap: 10px; }
.burger { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: #fff; color: var(--ink); cursor: pointer; }
.menu-mobile { display: none; }

/* ── Hero : Header 36, texte à gauche, photo bord à bord à droite ───────── */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: clamp(580px, calc(100svh - 76px), 800px); }
.hero-texte { align-self: center; padding: clamp(56px, 7vw, 96px) clamp(32px, 5vw, 72px) clamp(56px, 7vw, 96px) calc(max(0px, (100vw - var(--conteneur) - 2 * var(--gouttiere)) / 2) + var(--gouttiere)); }
.hero h1 { font-size: clamp(2.7rem, 5.6vw, 4.8rem); }
.accroche { max-width: 33em; margin-top: 22px; font-size: clamp(1.06rem, 1.45vw, 1.2rem); }
.hero .boutons { margin-top: 32px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 28px 0 0; padding: 0; list-style: none; font-size: .97rem; color: var(--ink); }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.coche { width: 18px; height: 18px; color: var(--primary); }
.hero-photo { min-height: 100%; border-radius: 0; }
.hero-photo img { position: absolute; inset: 0; }
.mention { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 68%, transparent); color: #fff; font-size: .76rem; }

/* ── Photos ───────────────────────────────────────────────────────────────── */
.photo { position: relative; overflow: hidden; border-radius: var(--rayon); background: var(--trait); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.fond-photo { position: absolute; inset: 0; z-index: -1; }
.fond-photo img { width: 100%; height: 100%; object-fit: cover; }
.fond-photo::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 72%, transparent); }

/* ── En-têtes de section ──────────────────────────────────────────────────── */
.tete { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.tete p:not(.surtitre) { margin-top: 14px; font-size: 1.08rem; }
.tete--centre { margin-left: auto; margin-right: auto; text-align: center; }
/* Layout 251 : étiquette et titre à gauche, texte à droite */
.tete-cote { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 72px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.tete-cote > p { font-size: 1.1rem; }

/* ── Colonnes à photo : Layout 251 et 239, six cartes égales (survol : « zoom ») ── */
.colonnes-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 28px; }
.colonne { display: flex; flex-direction: column; gap: 10px; color: var(--texte); text-decoration: none; }
.colonne .photo { aspect-ratio: 4 / 3; margin-bottom: 10px; }
.colonne .photo img, .chantier .photo img { transition: transform .5s; }
.colonne:hover .photo img, .chantier:hover .photo img { transform: scale(1.04); }
.colonne h3 { font-size: 1.36rem; }
.colonne:hover h3 { color: var(--primary); }
.colonne .lien { margin-top: auto; padding-top: 6px; }

/* ── Présentation et atouts : Layout 220, 16 et 207 ───────────────────────── */
.atouts { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px 72px; align-items: center; }
.atouts--photo-gauche { grid-template-columns: 1fr 1.12fr; }
.atouts > .photo { aspect-ratio: 4 / 5; }
.atouts .intro { margin-top: 16px; font-size: 1.1rem; }
.grille-atouts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; margin: 34px 0 0; padding: 0; list-style: none; }
.grille-atouts .picto { width: 44px; height: 44px; margin-bottom: 14px; padding: 10px; border-radius: var(--rayon); background: #fff; color: var(--primary); }
.grille-atouts h3 { font-size: 1.12rem; margin-bottom: 6px; }
.grille-atouts p { font-size: .97rem; }
.liste-icones { display: grid; gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; }
.liste-icones li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.liste-icones .picto { width: 44px; height: 44px; padding: 10px; border-radius: var(--rayon); background: var(--primary-soft); color: var(--primary); }
.fond-teinte .liste-icones .picto { background: #fff; }
.liste-icones h3 { font-size: 1.12rem; margin-bottom: 4px; }
.liste-icones p { font-size: .98rem; }

/* ── Collection Chantiers : Portfolio 11, la liste d'une collection ────────── */
.chantiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.chantier { display: flex; flex-direction: column; gap: 8px; color: var(--texte); text-decoration: none; }
.chantier[hidden] { display: none; }
.chantier .photo { aspect-ratio: 3 / 2; margin-bottom: 8px; }
.chantier-cat { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--accent); font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.fond-teinte .chantier-cat { background: #fff; }
.chantier h3 { font-size: 1.24rem; }
.chantier:hover h3 { color: var(--primary); }
.chantier-lieu { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; color: var(--doux); }
.chantier-lieu .picto { width: 16px; height: 16px; color: var(--accent); }
.note-cms { max-width: 760px; margin: 32px auto 0; text-align: center; font-size: .9rem; }
.note-cms + .boutons { margin-top: 20px; }
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -12px 0 40px; }
.filtres button { min-height: 42px; padding: 0 18px; border: 1.5px solid var(--trait-fort); border-radius: 999px; background: #fff; color: var(--ink); font: 600 .95rem var(--police-texte); cursor: pointer; }
.filtres button:hover { border-color: var(--ink); }
.filtres button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── Onglets : Layout 501, titre centré, barre centrée, texte à gauche et photo à droite ── */
.onglets-barre { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 40px; padding: 5px; border-radius: calc(var(--rayon) + 5px); background: #fff; }
.onglets-barre button { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--rayon); background: none; color: var(--texte); font: 600 .97rem var(--police-texte); cursor: pointer; }
.onglets-barre button:hover { color: var(--ink); }
.onglets-barre button[aria-selected="true"] { background: var(--ink); color: #fff; }
.onglets-panneau { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px 72px; align-items: center; }
.onglets-panneau[hidden] { display: none; }
.onglets-panneau h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; }
.onglets-panneau > div > p { margin-top: 16px; font-size: 1.08rem; }
.onglets-panneau .photo { aspect-ratio: 4 / 3; }

/* ── Étapes : Timeline 1 (frise à côté du titre) et Timeline 17 (horizontale) ── */
.laterale { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 40px 88px; align-items: start; }
.laterale-tete { position: sticky; top: 112px; }
.laterale-tete > p { margin-top: 16px; font-size: 1.08rem; }
.frise-v { position: relative; display: grid; gap: 36px; margin: 0; padding: 0 0 0 40px; list-style: none; }
.frise-v::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: var(--trait-fort); }
.frise-v li { position: relative; }
.frise-v li::before { content: ""; position: absolute; left: -40px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--primary-soft); border: 3px solid var(--accent); }
.fond-teinte .frise-v li::before { background: var(--primary-soft); }
.frise-v li:last-child::before { background: var(--primary); border-color: var(--primary); }
.frise-num { display: block; margin-bottom: 6px; font-size: .84rem; font-weight: 600; letter-spacing: .03em; color: var(--accent); }
.frise-v h3, .frise h3 { margin-bottom: 6px; }
.frise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 0; padding: 0; list-style: none; }
.frise li { position: relative; padding-top: 34px; border-top: 2px solid var(--trait-fort); }
.frise li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--primary-soft); }
.frise li:last-child::before { background: var(--primary); }

/* ── Texte long avec sommaire : Content 27 ────────────────────────────────── */
.sommaire-grille { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: 40px 80px; align-items: start; }
.sommaire { position: sticky; top: 108px; padding: 24px; border-radius: var(--rayon); background: var(--primary-soft); }
.sommaire-titre { margin-bottom: 10px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 2px; }
.sommaire li { counter-increment: s; }
.sommaire a { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 7px 0; color: var(--ink); text-decoration: none; font-size: .96rem; line-height: 1.4; }
.sommaire a::before { content: counter(s); color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.sommaire a:hover { color: var(--primary); }
.texte-long { max-width: 70ch; }
.texte-long > h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.texte-intro { margin-top: 16px; font-size: 1.16rem; color: var(--ink); }
.texte-long section { margin-top: 44px; scroll-margin-top: 100px; }
.texte-long h3 { font-size: 1.5rem; margin-bottom: 12px; }
.texte-long p + p { margin-top: 12px; }
.texte-long ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.texte-long li { position: relative; padding-left: 26px; }
.texte-long li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 10px; height: 2px; background: var(--primary); }

/* ── Avant / après balayé (propre à Veetrine) : un curseur que le visiteur fait glisser ── */
.balaye { max-width: 1000px; margin: 0 auto; }
.balaye-cadre { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--rayon); background: var(--trait); --coupe: 50%; user-select: none; }
.balaye-cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.balaye-apres { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--coupe)); }
.balaye-trait { position: absolute; top: 0; bottom: 0; left: var(--coupe); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); pointer-events: none; }
.balaye-poignee { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; gap: 2px; width: 52px; height: 52px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 10px 24px -8px var(--ombre); transition: transform .15s; }
.balaye-poignee svg { width: 16px; height: 16px; }
.balaye-curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.balaye-cadre:hover .balaye-poignee, .balaye-curseur:active ~ .balaye-trait .balaye-poignee { transform: translate(-50%, -50%) scale(1.06); }
.balaye-cadre:has(.balaye-curseur:focus-visible) .balaye-poignee { outline: 3px solid var(--primary); outline-offset: 3px; }
.balaye-label { position: absolute; top: 14px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 72%, transparent); color: #fff; font-size: .85rem; font-weight: 600; pointer-events: none; }
.balaye-label--avant { left: 14px; }
.balaye-label--apres { right: 14px; }
.balaye figcaption { margin-top: 14px; text-align: center; font-size: .94rem; color: var(--doux); }

/* ── Avis : Testimonial 23 (trois cartes, flèches de chaque côté) et 41 (titre à gauche) ── */
.avis-carte { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 30px 28px; background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); }
.fond-page .avis-carte { background: var(--primary-soft); border-color: transparent; }
.avis-source { align-self: flex-start; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.avis-carte blockquote { margin: 0; font-size: 1.04rem; color: var(--ink); }
.avis-carte figcaption { display: grid; gap: 2px; margin-top: auto; font-size: .92rem; }
.avis-carte figcaption b { color: var(--ink); }
.avis-carte figcaption span { color: var(--doux); font-size: .86rem; }
.avis-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; border: 1px solid var(--trait-fort); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.avis-btn:hover { border-color: var(--ink); }
.avis-btn--pause .i-lecture, .avis-btn--pause[aria-pressed="true"] .i-pause { display: none; }
.avis-btn--pause[aria-pressed="true"] .i-lecture { display: block; }
.ac { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 20px; }
.ac-piste { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.ac-piste::-webkit-scrollbar { display: none; }
.ac-piste > .avis-carte { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
.ac-bas { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 12px; }
.ac-bas .avis-btn--pause { width: 36px; height: 36px; padding: 9px; }
.ac-points { display: flex; }
.ac-points button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.ac-points button::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--trait-fort); transition: width .2s, background .2s; }
.ac-points button[aria-current="true"]::before { width: 22px; background: var(--ink); }
.ac--laterale { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 32px 64px; align-items: center; }
.ac--laterale .laterale-tete { position: static; }
.ac--laterale .ac-bas { grid-column: auto; justify-content: flex-start; margin-top: 28px; }
.ac--laterale .ac-piste > .avis-carte { flex-basis: calc((100% - 24px) / 2); }

/* ── Zone d'intervention : zone.scinde (accueil) et zone.liste (page Devis) ── */
.zone { display: grid; grid-template-columns: 1fr 1.25fr; gap: 32px 72px; align-items: start; }
.zone > div:first-child > p { margin-top: 16px; font-size: 1.08rem; }
.zone-secteur { margin-bottom: 16px; color: var(--ink); font-weight: 600; line-height: 1.7; }
.zone-communes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.zone-communes li { padding: 6px 12px; background: #fff; border: 1px solid var(--trait); border-radius: 999px; color: var(--texte); font-size: .94rem; }
.fond-page .zone-communes li { background: var(--primary-soft); border-color: transparent; }
.zone--liste { display: block; text-align: center; }
.zone--liste .zone-intro { max-width: 680px; margin: 14px auto 22px; font-size: 1.08rem; }
.zone--liste .zone-communes { justify-content: center; max-width: 980px; margin: 0 auto; }

/* ── FAQ : FAQ 10 (deux colonnes) et FAQ 3 (titre à gauche) ──────────────── */
.questions details { border-bottom: 1px solid var(--trait-fort); }
.questions summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; list-style: none; cursor: pointer; font: 600 1.08rem/1.4 var(--police-texte); color: var(--ink); }
.questions summary::-webkit-details-marker { display: none; }
.questions summary:hover { color: var(--primary); }
.questions summary svg { width: 20px; height: 20px; flex: none; color: var(--primary); transition: transform .2s; }
.questions details[open] summary svg { transform: rotate(180deg); }
.questions details p { padding: 0 0 22px; max-width: 70ch; }
.questions--deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; }
.questions + .boutons { margin-top: 40px; }
.scinde { display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px 72px; align-items: start; }
.scinde > div:first-child p { margin: 14px 0 22px; }

/* ── Appels ───────────────────────────────────────────────────────────────── */
.deux-appels-titre { text-align: center; }
.deux-appels { display: grid; grid-template-columns: 1fr 1fr; margin-top: 44px; border-top: 1px solid var(--trait-sombre); }
.deux-appels > div { padding: 36px 44px 4px 0; }
.deux-appels > div + div { padding: 36px 0 4px 44px; border-left: 1px solid var(--trait-sombre); }
.deux-appels h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); margin-bottom: 12px; }
.deux-appels .boutons { margin-top: 24px; }
.appel-photo, .appel-ligne-photo { position: relative; isolation: isolate; overflow: hidden; }
.appel-photo { padding: clamp(96px, 12vw, 170px) 0; }
.appel-photo .fond-photo::after { background: linear-gradient(color-mix(in srgb, var(--ink) 50%, transparent), color-mix(in srgb, var(--ink) 80%, transparent)); }
.appel-photo--gauche .fond-photo::after { background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 90%, transparent) 30%, color-mix(in srgb, var(--ink) 35%, transparent)); }
.appel-centre { max-width: 760px; margin: 0 auto; text-align: center; }
.appel-centre p, .appel-gauche p { margin-top: 16px; font-size: 1.1rem; }
.appel-gauche { max-width: 560px; }
.appel-ligne-photo { padding: clamp(72px, 9vw, 120px) 0; }
.appel-ligne-photo .fond-photo::after { background: color-mix(in srgb, var(--ink) 40%, transparent); }
.carte-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; padding: clamp(32px, 4.5vw, 52px); border-radius: var(--rayon); background: #fff; }
.carte-ligne h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); }
.carte-ligne p { margin-top: 10px; }
.carte-ligne .boutons { margin-top: 0; }
.appel-cote { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 72px; align-items: center; }
.appel-cote p { margin-top: 16px; font-size: 1.08rem; }
.appel-cote .photo { aspect-ratio: 4 / 3; }

/* ── En-têtes de page : Header 44, 50, 62, 65 ─────────────────────────────── */
.page-tete { padding: clamp(56px, 8vw, 104px) 0; }
.page-tete .chapo { max-width: 680px; margin-top: 18px; font-size: 1.15rem; }
.page-tete--centre { text-align: center; }
.page-tete--centre h1 { max-width: 900px; margin: 0 auto; }
.page-tete--centre .chapo { margin-left: auto; margin-right: auto; }
.page-tete--photo { position: relative; isolation: isolate; overflow: hidden; padding: clamp(96px, 12vw, 160px) 0; color: var(--sur-sombre); }
.page-tete--photo .fond-photo::after { background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 90%, transparent) 25%, color-mix(in srgb, var(--ink) 40%, transparent)); }
.page-tete--photo h1 { color: #fff; max-width: 860px; }
.page-tete--photo-centre { text-align: center; }
.page-tete--photo-centre .fond-photo::after { background: color-mix(in srgb, var(--ink) 66%, transparent); }
.page-tete--photo-centre h1, .page-tete--photo-centre .chapo { margin-left: auto; margin-right: auto; }

/* ── Devis : Contact 12 ───────────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px 56px; align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; padding: clamp(24px, 4vw, 44px); background: #fff; border: 1px solid var(--trait-fort); border-radius: var(--rayon); }
.form h2 { grid-column: 1 / -1; font-size: 1.8rem; }
.form .plein { grid-column: 1 / -1; }
.form-intro { margin: -4px 0 6px; color: var(--texte); }
.form label { display: grid; gap: 6px; font-size: .94rem; font-weight: 500; color: var(--ink); }
.form input, .form select, .form textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--trait-fort); border-radius: calc(var(--rayon) - 4px); background: color-mix(in oklab, var(--primary-soft) 45%, white); color: var(--ink); font: 400 1rem var(--police-texte); }
.form textarea { min-height: 130px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
.form-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.note { font-size: .9rem; color: var(--doux); }
.form-ok { display: none; grid-column: 1 / -1; padding: 16px; border-radius: var(--rayon); background: #e3f0e5; color: #1e4d2b; }
.form.envoye .form-ok { display: block; }
.coordonnees { display: grid; gap: 30px; padding-top: 8px; }
.coordonnees > div { position: relative; padding-left: 42px; }
.coordonnees .picto { position: absolute; left: 0; top: 2px; width: 26px; height: 26px; color: var(--accent); }
.coordonnees h3 { font-size: 1.1rem; margin-bottom: 6px; }
.coordonnees p { font-size: .97rem; }
.tel-grand { display: block; margin-bottom: 4px; font-size: 1.4rem; color: var(--ink); text-decoration: none; }

/* ── Pied de page : Footer 5, colonnes sur fond sombre (l'ardoise) ────────── */
.pied { padding: 80px 0 calc(32px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--sur-sombre); font-size: .96rem; }
.pied-colonnes { display: grid; grid-template-columns: 1.5fr 1.2fr 1fr 1fr; gap: 40px; }
.pied-marque p { margin-top: 16px; max-width: 340px; }
.pied-tel { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; color: #fff; font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; }
.pied-tel svg { width: 20px; height: 20px; color: var(--primary-clair); }
.pied-titre { margin-bottom: 12px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in oklab, var(--primary-soft) 60%, var(--accent)); }
.pied-titre--suite { margin-top: 26px; }
.pied ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pied ul a { text-decoration: none; }
.pied ul a:hover { color: #fff; text-decoration: underline; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--trait-sombre); font-size: .84rem; color: color-mix(in oklab, var(--sur-sombre) 75%, var(--ink)); }
.barre-appel { display: none; }

/* ── Tablette ─────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .entete { flex-wrap: wrap; gap: 12px; }
  .nav, .entete-tel { display: none; }
  .burger { display: grid; place-items: center; }
  .entete.ouvert .menu-mobile { display: grid; flex-basis: 100%; gap: 2px; padding: 8px 0 18px; max-height: calc(100svh - 80px); overflow-y: auto; }
  .menu-mobile a { padding: 11px 4px; border-bottom: 1px solid var(--trait); color: var(--ink); font-weight: 500; text-decoration: none; }
  .menu-mobile .mega-titre { margin: 14px 0 2px; padding: 0 4px; }
  .menu-mobile a[aria-current] { color: var(--primary); font-weight: 600; box-shadow: inset 3px 0 0 var(--primary); padding-left: 12px; }
  .hero { min-height: 0; }
  .colonnes-3, .chantiers { grid-template-columns: 1fr 1fr; }
  .ac-piste > .avis-carte { flex-basis: calc((100% - 24px) / 2); }
  .ac--laterale { grid-template-columns: 1fr; }
  .frise { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .laterale, .sommaire-grille { grid-template-columns: 1fr; }
  .laterale-tete, .sommaire { position: static; }
  .atouts, .atouts--photo-gauche, .appel-cote, .onglets-panneau { gap: 40px 48px; }
  .grille-atouts { gap: 24px; }
  .pied-colonnes { grid-template-columns: 1fr 1fr; }
}

/* ── Téléphone ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body { font-size: 1rem; padding-bottom: 68px; }
  .entete { min-height: 64px; }
  .entete-devis { display: none; }
  .logo-mot b { font-size: 1.4rem; }
  .hero { grid-template-columns: 1fr; }
  .hero-texte { padding: 40px var(--gouttiere) 36px; }
  .hero-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .tete-cote { grid-template-columns: 1fr; }
  .colonnes-3, .chantiers { grid-template-columns: 1fr; }
  .grille-atouts { grid-template-columns: 1fr; }
  .ac { grid-template-columns: auto 1fr auto; gap: 18px 12px; }
  .ac-piste { grid-column: 1 / -1; grid-row: 1; }
  .ac-prec, .ac-suiv, .ac:not(.ac--laterale) .ac-bas { grid-row: 2; }
  .ac-prec { grid-column: 1; }
  .ac-suiv { grid-column: 3; }
  .ac:not(.ac--laterale) .ac-bas { grid-column: 2; }
  .ac--laterale .laterale-tete { grid-row: 1; }
  .ac--laterale .ac-piste { grid-row: 2; }
  .ac-piste > .avis-carte, .ac--laterale .ac-piste > .avis-carte { flex-basis: 100%; }
  .boutons .btn { flex: 1 1 100%; justify-content: center; }
  .scinde, .zone, .atouts, .atouts--photo-gauche, .contact, .appel-cote, .onglets-panneau, .questions--deux { grid-template-columns: 1fr; }
  .frise { grid-template-columns: 1fr; }
  .atouts > .photo { aspect-ratio: 4 / 3; }
  .atouts:not(.atouts--photo-gauche) > .photo, .appel-cote .photo { order: -1; }
  .onglets-panneau .photo { order: -1; }
  .onglets-barre { width: 100%; }
  .onglets-barre button { flex: 1 1 auto; padding: 0 12px; }
  .filtres button { flex: 1 1 auto; }
  .deux-appels { grid-template-columns: 1fr; }
  .deux-appels > div, .deux-appels > div + div { padding: 32px 0 4px; border-left: 0; }
  .deux-appels > div + div { margin-top: 32px; border-top: 1px solid var(--trait-sombre); }
  .balaye-cadre { aspect-ratio: 4 / 3; }
  .form { grid-template-columns: 1fr; }
  .pied-colonnes { grid-template-columns: 1fr; }
  .barre-appel { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, white 97%, transparent); border-top: 1px solid var(--trait); }
  .barre-appel a { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 50px; border-radius: var(--rayon); font-weight: 600; text-decoration: none; }
  .barre-appel svg { width: 18px; height: 18px; }
  .barre-appel .appeler { border: 1.5px solid var(--ink); color: var(--ink); }
  .barre-appel .devis { background: var(--primary); color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .lien svg, .ac-points button::before, .colonne .photo img, .chantier .photo img { transition: none; }
  .colonne:hover .photo img, .chantier:hover .photo img { transform: none; }
  .ac-piste { scroll-behavior: auto; }
}