/* MGR : styles communs à toutes les pages (accueil, nos chantiers). */
  /* Direction D : la sobriété d'une maison automobile anglaise. Noir, laiton, grandes images, très peu de mots. */
  html, body { background: #0F0F11; }
  /* Rien ne doit élargir la page sur téléphone (sinon elle glisse de côté sous le doigt). */
  html, body { overflow-x: hidden; }
  @supports (overflow: clip) { html, body { overflow-x: clip; } }
  img, video, svg { max-width: 100%; }
  body { color: var(--marbre); }
  .titre-espace { text-transform: uppercase; letter-spacing: .32em; font-weight: 300; }

  .entete { position: fixed; inset: 0 0 auto; z-index: 20; transition: background-color .4s var(--ease); }
  .entete.plein { background: rgb(15 15 17 / .92); backdrop-filter: blur(8px); }
  .entete .page { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 88px; }
  .entete nav { display: flex; gap: 32px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
  .entete nav a { text-decoration: none; opacity: .8; }
  .entete nav a:hover { opacity: 1; }
  .entete .marque img { height: 30px; width: auto; }
  .entete .droite { justify-self: end; display: flex; align-items: center; gap: 28px; }
  .btn-filet { border: 1px solid var(--laiton); color: var(--laiton-clair); background: transparent; min-height: 46px; padding: 0 24px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
  .btn-filet:hover { background: var(--laiton); color: var(--noir); }

  /* Tunnel en perspective : les réalisations arrivent vers le visiteur au fil du défilement.
     Adapté du composant 21st « perspective-tunnel-hero » : défilement natif (pas de molette bloquée),
     tactile, couleurs MGR, version fixe si l'utilisateur limite les animations. */
  .hero { position: relative; height: 260svh; background: #0F0F11; }
  .scene { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; perspective: 1200px; isolation: isolate; }
  /* Arrière-plan : une vraie terrasse en moquette de pierre, en lumière de fin de journée.
     Elle s'approche légèrement au défilement (voir tunnel.js). */
  .scene .decor { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform-origin: 50% 60%; will-change: transform; }
  .scene .voile { position: absolute; inset: 0; pointer-events: none; background:
      radial-gradient(ellipse 60% 55% at 50% 48%, rgb(15 15 17 / .55), rgb(15 15 17 / .2) 70%, transparent),
      linear-gradient(180deg, rgb(15 15 17 / .55) 0%, rgb(15 15 17 / .1) 30%, rgb(15 15 17 / .1) 70%, #0F0F11 100%); }
  .scene .titre { position: relative; text-align: center; padding: 0 24px; max-width: 760px; will-change: transform, opacity; pointer-events: auto; text-shadow: 0 2px 24px rgb(15 15 17 / .9); }
  .scene .titre::before { content: ""; position: absolute; inset: -18% -12%; z-index: -1; background: radial-gradient(closest-side, rgb(15 15 17 / .82), rgb(15 15 17 / .5) 60%, transparent); pointer-events: none; }
  .scene h1 { font-size: clamp(32px, 5.6vw, 84px); line-height: 1.05; }
  .scene .titre p { margin: 24px auto 0; max-width: 46ch; font-size: 18px; color: #D9D6D0; }
  .scene .titre .actions { margin-top: 36px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .plan { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; display: grid; place-items: center; }
  .carte { position: absolute; left: 50%; top: 50%; aspect-ratio: 4 / 5; will-change: transform, opacity; opacity: 0; }
  .carte figure { margin: 0; position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 4px; background: #1D1D21; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .85); outline: 1px solid rgb(238 236 232 / .14); outline-offset: -1px; }
  .carte img { width: 100%; height: 100%; object-fit: cover; }
  .carte figcaption { position: absolute; inset: auto 0 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgb(15 15 17 / .85)); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--marbre); }
  /* Téléphone : hero fixe, plein écran, sans cartes en 3D (voir tunnel.js). */
  @media (max-width: 767px) {
    .hero { height: auto; }
    .scene { position: relative; height: 100svh; min-height: 560px; perspective: none; }
    .plan { transform-style: flat; }
    .plan .carte { display: none; }
    .scene .decor { transform: none !important; will-change: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero { height: auto; }
    .scene { position: relative; height: 100svh; min-height: 640px; }
  }

  .filet { width: 1px; height: 96px; background: linear-gradient(var(--laiton), transparent); margin: 0 auto; }
  .manifeste { text-align: center; padding: 72px 24px 120px; }
  .manifeste h2 { font-size: clamp(26px, 2.8vw, 40px); font-weight: 300; max-width: 26ch; margin: 0 auto; line-height: 1.3; }
  .manifeste p { margin: 24px auto 0; max-width: 56ch; color: var(--texte-clair); }

  /* Les métiers : une grande image fixe qui change au fil des textes. */
  .metiers { padding: 40px 0 120px; }
  .metiers .page { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; }
  .metiers .visuel { position: sticky; top: 104px; height: calc(100svh - 144px); border-radius: 4px; overflow: hidden; background: #1D1D21; }
  .metiers .visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .9s var(--ease), transform 1.6s var(--ease); }
  .metiers .visuel img.actif { opacity: 1; transform: none; }
  .metiers .visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 70%, rgb(15 15 17 / .5)); pointer-events: none; }
  .metiers .compteur { position: absolute; left: 24px; bottom: 20px; z-index: 1; font-size: 13px; letter-spacing: .2em; color: var(--marbre); font-variant-numeric: tabular-nums; }
  .metier { min-height: 78svh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; border-top: 1px solid #2A2A2F; }
  .metier:first-child { border-top: 0; }
  .metier h2 { font-size: clamp(28px, 3vw, 44px); transition: color .5s var(--ease); color: #6E6C69; }
  .metier.actif h2 { color: var(--marbre); }
  .metier p { margin-top: 18px; color: var(--texte-clair); max-width: 42ch; }
  .metier ul, .puces { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .metier li, .puces li { font-size: 14px; padding: 6px 12px; border: 1px solid #3A3A40; border-radius: 999px; color: #D6D3CD; }
  .metier .lien, .heritage .lien { margin-top: 28px; align-self: flex-start; color: var(--laiton-clair); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid currentColor; }
  .metier .lien svg, .heritage .lien svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
  .metier .lien:hover svg, .heritage .lien:hover svg { transform: translateX(4px); }
  .metier .photo-mobile { display: none; }

  .engagements { padding: 128px 0; }
  .engagements .page { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: center; }
  .garantie { display: flex; align-items: flex-end; gap: 24px; }
  .garantie .chiffre { font-size: clamp(120px, 15vw, 220px); font-weight: 200; line-height: .8; color: var(--laiton); letter-spacing: -.04em; }
  .garantie p { font-size: 22px; font-weight: 300; line-height: 1.35; max-width: 14ch; padding-bottom: 6px; }
  .engagements ul, .engagements ol { list-style: none; margin: 0; padding: 0; display: grid; }
  .engagements li { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid #2A2A2F; }
  .engagements li:last-child { border-bottom: 1px solid #2A2A2F; }
  .engagements svg { width: 28px; height: 28px; color: var(--laiton); }
  .engagements h3 { font-size: 22px; font-weight: 300; }
  .engagements li p { margin-top: 6px; color: var(--texte-clair); }

  .devis { background: #17171A; padding: 120px 0; }
  .devis .page { display: grid; grid-template-columns: 5fr 6fr; gap: 96px; }
  .devis h2 { font-size: clamp(30px, 3.2vw, 46px); }
  .devis .intro { margin-top: 18px; color: var(--texte-clair); max-width: 42ch; }
  .devis .tel { margin-top: 36px; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 22px; font-weight: 300; letter-spacing: .06em; }
  .devis .tel svg { width: 24px; height: 24px; color: var(--laiton); }
  /* Champs soulignés, sans boîte : plus proche d'un bon de commande que d'un formulaire administratif. */
  .formulaire { display: grid; gap: 28px; }
  .formulaire .champ label, .formulaire .legende-choix { color: var(--texte-clair); font-weight: 400; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
  .formulaire .champ input, .formulaire .champ textarea, .formulaire .champ select { background: transparent; border: 0; border-bottom: 1px solid #45454B; border-radius: 0; color: var(--marbre); padding: 10px 0; }
  .formulaire .champ input::placeholder, .formulaire .champ textarea::placeholder { color: #8E8C88; }
  .formulaire .champ input:focus, .formulaire .champ textarea:focus, .formulaire .champ select:focus { box-shadow: none; border-bottom-color: var(--laiton); }
  .formulaire .choix { grid-template-columns: 1fr 1fr; }
  .formulaire .choix legend { grid-column: 1 / -1; }
  .formulaire .choix label { background: transparent; border-color: #45454B; color: var(--marbre); }
  .formulaire .choix svg { color: var(--laiton); }
  .formulaire .choix input:checked + label { background: rgb(165 139 92 / .16); border-color: var(--laiton); }
  .formulaire .champ .aide, .formulaire .maquette-note { color: #8E8C88; }
  .ligne-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .formulaire .btn { justify-self: start; }
  .devis .merci { color: var(--marbre); }


  @media (max-width: 960px) {
    .entete nav { display: none; }
    .entete .page { grid-template-columns: auto 1fr; }
    .entete .marque { justify-self: start; }
    .engagements .page { grid-template-columns: 1fr; gap: 48px; }
    .metiers .page { grid-template-columns: 1fr; gap: 0; }
    .metiers .visuel { display: none; }
    .metier { min-height: 0; padding: 48px 0; }
    .metier h2 { color: var(--marbre); }
    .metier .photo-mobile { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; margin-bottom: 24px; }
    .devis .page { grid-template-columns: 1fr; gap: 48px; }
  }
  .questions h2 { font-size: clamp(30px, 3.2vw, 46px); }
  .questions .intro { margin-top: 16px; color: var(--texte-clair); max-width: 48ch; }

  /* De père en fils : voir le bloc « L'artisan » en fin de fichier. */

  /* Questions sur la moquette de pierre. */
  .questions { padding: 128px 0; }
  .questions .page { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; }
  .questions details { border-top: 1px solid #2A2A2F; }
  .questions details:last-child { border-bottom: 1px solid #2A2A2F; }
  .questions summary { list-style: none; cursor: pointer; padding: 26px 44px 26px 0; font-size: 20px; font-weight: 300; position: relative; }
  .questions summary::-webkit-details-marker { display: none; }
  .questions summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; border-right: 1px solid var(--laiton); border-bottom: 1px solid var(--laiton); transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease); }
  .questions details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
  .questions details p { padding-bottom: 26px; color: var(--texte-clair); max-width: 60ch; }

  /* Zone, salon, Instagram. */
  .territoire { border-block: 1px solid #2A2A2F; }
  .territoire .page { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .territoire .page > div { padding: 48px 32px 48px 0; }
  .territoire .page > div + div { padding-left: 32px; border-left: 1px solid #2A2A2F; }
  .territoire b { display: block; font-weight: 400; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--texte-clair); margin-bottom: 14px; }
  .territoire p { font-size: 22px; font-weight: 300; line-height: 1.4; }
  .territoire a { color: var(--laiton-clair); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
  .territoire a:hover { text-decoration: underline; }
  .territoire svg { width: 20px; height: 20px; }

  @media (max-width: 960px) {
    .questions .page { grid-template-columns: 1fr; gap: 48px; }
    .territoire .page { grid-template-columns: 1fr; }
    .territoire .page > div, .territoire .page > div + div { padding: 32px 0; border-left: 0; border-bottom: 1px solid #2A2A2F; }
  }
  @media (max-width: 760px) {
    .questions { padding: 80px 0; }
    .questions summary { font-size: 18px; }
  }

  @media (max-width: 760px) {
    .entete .page { height: 72px; }
    .entete .marque img { height: 22px; }
    .entete .droite .btn { display: none; }
    .hero h1 { font-size: 30px; letter-spacing: .22em; }
    .garantie p { font-size: 19px; }
    .formulaire .choix, .ligne-2 { grid-template-columns: 1fr; }
    .formulaire .btn { justify-self: stretch; }
    .engagements, .devis { padding: 80px 0; }
  }

  /* Cibles tactiles : au moins 44 px de haut pour les liens isolés. */
  .metier .lien, .heritage .lien, .territoire a, .devis .tel { min-height: 44px; display: inline-flex; align-items: center; }
  .metier .lien, .heritage .lien { padding: 10px 0 8px; }

  /* Petits écrans : les boutons longs passent à la ligne au lieu d'élargir la colonne. */
  @media (max-width: 760px) {
  }

  @media (max-width: 760px) {
    .scene .titre { padding: 0 32px; }
    .scene .titre p { font-size: 16px; }
  }

  /* Nos chantiers : vidéo, galerie et avant/après, uniquement des réalisations d'Evan. */
  .chantiers { padding: 128px 0; border-top: 1px solid #2A2A2F; }
  .chantiers h2 { font-size: clamp(30px, 3.2vw, 46px); }
  .chantiers .intro { margin-top: 16px; color: var(--texte-clair); max-width: 52ch; }
  .lecture { position: absolute; top: 12px; right: 12px; z-index: 1; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(238 236 232 / .5); background: rgb(15 15 17 / .55); color: var(--marbre); display: grid; place-items: center; cursor: pointer; }
  .lecture svg { width: 18px; height: 18px; }

  .comparaison { margin-top: 96px; display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: center; }
  .comparaison h3 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 300; }
  .comparaison p { margin-top: 14px; color: var(--texte-clair); max-width: 40ch; }
  .onglets { margin-top: 28px; display: inline-grid; grid-auto-flow: column; border: 1px solid #45454B; border-radius: var(--rayon); }
  .onglets button { min-height: 44px; padding: 0 20px; background: none; border: 0; color: var(--marbre); font: 400 15px "Jost", sans-serif; cursor: pointer; }
  .onglets button[aria-pressed="true"] { background: var(--laiton); color: var(--noir); }
  .avant-apres { position: relative; width: 100%; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3; margin-left: auto; background: #1D1D21; touch-action: pan-y; --pos: 50%; }
  .avant-apres img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .avant-apres .avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .avant-apres .ligne { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--marbre); pointer-events: none; }
  .avant-apres .poignee { position: absolute; top: 50%; left: var(--pos); width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--marbre); color: var(--noir); display: grid; place-items: center; pointer-events: none; box-shadow: 0 8px 24px rgb(0 0 0 / .45); }
  .avant-apres .poignee svg { width: 22px; height: 22px; }
  .avant-apres .etiquette { position: absolute; top: 14px; padding: 6px 12px; border-radius: 2px; background: rgb(15 15 17 / .7); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--marbre); pointer-events: none; }
  .avant-apres .e-avant { left: 14px; } .avant-apres .e-apres { right: 14px; }
  .avant-apres input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
  .avant-apres input:focus-visible ~ .poignee { outline: 3px solid var(--laiton); outline-offset: 3px; }

  @media (max-width: 960px) {
    .comparaison { grid-template-columns: 1fr; gap: 32px; }
  }
  @media (max-width: 760px) {
    .chantiers { padding: 80px 0; }
    .comparaison { margin-top: 72px; }
    .onglets { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
    .onglets button { padding: 0 8px; }
  }

  /* Barre mobile : appel + devis. */
  .devis-mobile { gap: 10px; }
  .devis-mobile .btn-appel { flex: 0 0 52px; padding: 0; background: #1D1D21; color: var(--laiton-clair); border: 1px solid var(--laiton); }
  .devis-mobile .btn-appel svg { width: 22px; height: 22px; }
  .champ select { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: var(--rayon); font: 400 16px/1.4 "Jost", sans-serif; color: var(--texte); background: #fff; }
  .formulaire .champ select option { color: var(--texte); }

  /* Demande de devis en 3 étapes. */
  .devis .page { grid-template-columns: 4fr 7fr; gap: 80px; align-items: start; }
  .devis-cote { position: sticky; top: 112px; }
  .recap { margin-top: 36px; padding: 24px; border: 1px solid #2E2E33; border-radius: 4px; background: #131316; }
  .recap-titre { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--laiton-clair); }
  .recap dl { margin: 14px 0 0; display: grid; gap: 10px; }
  .recap dl div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; font-size: 16px; animation: apparition .4s var(--ease); }
  .recap dt { color: #8E8C88; }
  .recap dd { margin: 0; color: var(--marbre); }
  @keyframes apparition { from { opacity: 0; transform: translateY(4px); } }
  .garanties { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; color: var(--texte-clair); font-size: 16px; }
  .garanties li { display: flex; align-items: center; gap: 12px; }
  .garanties svg { width: 22px; height: 22px; color: var(--laiton); flex: none; }
  .devis-cote .tel { margin-top: 28px; }

  .devis-form { padding: 40px; border: 1px solid #2A2A2F; border-radius: 4px; background: #131316; min-width: 0; }
  .etapes-nav { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .etapes-nav button { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0; background: none; border: 0; color: #8E8C88; font: 400 15px "Jost", sans-serif; text-align: left; cursor: pointer; }
  .etapes-nav button:disabled { cursor: default; opacity: .55; }
  .etapes-nav span { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid #45454B; display: grid; place-items: center; font-size: 13px; transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
  .etapes-nav [aria-current] { color: var(--marbre); }
  .etapes-nav [aria-current] span { border-color: var(--laiton); color: var(--laiton-clair); }
  .etapes-nav .fait { color: var(--texte-clair); }
  .etapes-nav .fait span { background: var(--laiton); border-color: var(--laiton); color: var(--noir); }
  .jauge { height: 2px; margin: 18px 0 36px; background: #2A2A2F; overflow: hidden; }
  .jauge span { display: block; height: 100%; background: var(--laiton); transform-origin: left; transform: scaleX(.33); transition: transform .6s var(--ease); }
  .etape { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .etape > *, .parcours { min-width: 0; }
  .etape.entre { animation: etape .5s var(--ease); }
  @keyframes etape { from { opacity: 0; transform: translateX(14px); } }

  .tuiles-projet { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .tuiles-projet legend { margin-bottom: 14px; }
  .tuiles-projet input, .pastilles input { position: absolute; opacity: 0; pointer-events: none; }
  .tuiles-projet label { position: relative; display: grid; grid-template-rows: auto 1fr; border: 1px solid #36363B; border-radius: 4px; overflow: hidden; cursor: pointer; background: #1A1A1E; transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
  .tuiles-projet img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.85) brightness(.82); transition: filter .4s var(--ease), transform .8s var(--ease); }
  .tuiles-projet label span { padding: 12px 14px; font-size: 15px; line-height: 1.3; color: var(--marbre); }
  .tuiles-projet label svg { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; color: var(--laiton-clair); background: rgb(15 15 17 / .7); border-radius: 50%; opacity: 0; transform: scale(.6); transition: opacity .25s var(--ease), transform .25s var(--ease); }
  .tuiles-projet label:hover { border-color: #6E6C69; }
  .tuiles-projet label:hover img { filter: none; transform: scale(1.04); }
  .tuiles-projet input:checked + label { border-color: var(--laiton); box-shadow: 0 0 0 1px var(--laiton); }
  .tuiles-projet input:checked + label img { filter: none; }
  .tuiles-projet input:checked + label svg { opacity: 1; transform: none; }
  .tuiles-projet input:focus-visible + label, .pastilles input:focus-visible + label { outline: 2px solid var(--laiton); outline-offset: 3px; }

  .pastilles { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
  .pastilles legend { width: 100%; margin-bottom: 14px; }
  .pastilles label { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border: 1px solid #45454B; border-radius: 999px; cursor: pointer; font-size: 15px; color: var(--marbre); transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
  .pastilles label:hover { border-color: var(--laiton); }
  .pastilles input:checked + label { background: var(--laiton); border-color: var(--laiton); color: var(--noir); }

  .suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .suggestions button { min-height: 36px; padding: 0 14px; border: 1px dashed #45454B; border-radius: 999px; background: none; color: var(--texte-clair); font: 400 14px "Jost", sans-serif; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
  .suggestions button:hover { border-color: var(--laiton); color: var(--marbre); }

  .actions-etape { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
  .actions-etape .btn { justify-self: auto; }
  .btn-retour { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; color: var(--texte-clair); font: 400 15px "Jost", sans-serif; cursor: pointer; }
  .btn-retour:hover { color: var(--marbre); }
  .btn-retour svg { width: 18px; height: 18px; }

  .devis .merci { padding: 48px 32px; text-align: center; border: 0; background: none; }
  .devis .merci > svg { width: 56px; height: 56px; color: var(--laiton); margin: 0 auto 18px; display: block; }
  .devis .merci strong { font-size: 22px; font-weight: 400; }
  .devis .merci p + p { margin-top: 10px; color: var(--texte-clair); }
  .devis .merci a { color: var(--laiton-clair); }

  @media (max-width: 960px) {
    .devis .page { grid-template-columns: 1fr; gap: 40px; }
    .devis-cote { position: static; }
  }
  @media (max-width: 760px) {
    .devis-form { padding: 22px 16px; margin-inline: -8px; }
    .tuiles-projet { grid-template-columns: 1fr 1fr; gap: 10px; }
    .tuiles-projet label span { font-size: 14px; padding: 10px; }
    .etapes-nav button { font-size: 0; gap: 0; justify-content: center; }
    .etapes-nav [aria-current] { font-size: 14px; gap: 8px; }
    .pastilles label { padding: 0 14px; font-size: 14px; }
    .actions-etape .btn { flex: 1; }
    .recap { margin-top: 28px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .etape.entre, .recap dl div { animation: none; }
  }

  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .etape-libelle, .devis-rassure { display: none; }
  .detail-option summary { list-style: none; cursor: pointer; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-clair); min-height: 44px; display: flex; align-items: center; gap: 8px; }
  .detail-option summary::-webkit-details-marker { display: none; }
  .detail-option summary::before { content: "+"; font-size: 18px; color: var(--laiton-clair); letter-spacing: 0; transition: transform .25s var(--ease); }
  .detail-option[open] summary::before { transform: rotate(45deg); }

  /* Téléphone : parcours épuré, une seule chose à la fois. */
  @media (max-width: 760px) {
    .devis { padding: 64px 0 72px; }
    .devis .page { gap: 24px; }
    .devis-cote h2 { font-size: 30px; }
    .devis-cote .intro { margin-top: 10px; font-size: 16px; }
    .recap, .garanties, .devis-cote .tel { display: none; }
    .devis-form { padding: 0; margin: 0; border: 0; background: none; }
    .etapes-nav { display: none; }
    .etape-libelle { display: block; font-size: 14px; color: var(--texte-clair); letter-spacing: .02em; }
    .jauge { margin: 10px 0 24px; }
    .etape { gap: 26px; }

    .tuiles-projet { gap: 8px; }
    .tuiles-projet legend { margin-bottom: 12px; }
    .tuiles-projet label { display: block; aspect-ratio: 4 / 3; }
    .tuiles-projet img { height: 100%; aspect-ratio: auto; }
    .tuiles-projet label span { position: absolute; inset: auto 0 0; padding: 22px 10px 9px; background: linear-gradient(transparent, rgb(15 15 17 / .9)); font-size: 13px; line-height: 1.25; }
    .tuiles-projet label svg { top: 8px; right: 8px; width: 22px; height: 22px; }

    .pastilles, .suggestions { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
    .pastilles::-webkit-scrollbar, .suggestions::-webkit-scrollbar { display: none; }
    .pastilles legend { position: absolute; }
    .pastilles { padding-top: 30px; position: relative; }
    .pastilles legend { top: 0; left: 16px; }
    .pastilles label, .suggestions button { flex: none; white-space: nowrap; scroll-snap-align: start; }
    .suggestions { margin-top: 10px; }

    .actions-etape { position: relative; }
    .devis-rassure { display: block; margin-top: 18px; text-align: center; font-size: 13px; color: #8E8C88; }
    .devis-rassure a { color: var(--laiton-clair); text-decoration: none; }
  }

  /* Présentation fluide du parcours. */
  .question { font-size: clamp(26px, 2.4vw, 34px); font-weight: 300; line-height: 1.15; margin: 0 0 -8px; color: var(--marbre); }
  .zone-etapes { position: relative; transition: height .5s var(--ease); overflow: clip; overflow-clip-margin: 12px; }
  .etape.entre { animation: none; }
  .etape.depuis-droite { animation: glisse-g .55s var(--ease) both; }
  .etape.depuis-gauche { animation: glisse-d .55s var(--ease) both; }
  @keyframes glisse-g { from { opacity: 0; transform: translateX(32px); filter: blur(3px); } }
  @keyframes glisse-d { from { opacity: 0; transform: translateX(-32px); filter: blur(3px); } }
  .tuiles-projet input:checked + label { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--laiton), 0 14px 30px -14px rgb(0 0 0 / .8); }
  .pastilles label { transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease); }
  .pastilles input:checked + label { transform: scale(1.03); }
  .jauge span { transition: transform .7s var(--ease); }
  .btn-laiton { transition: background-color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease); }
  .actions-etape .btn-laiton:hover { box-shadow: 0 10px 24px -12px rgb(165 139 92 / .7); }
  @media (max-width: 760px) {
    .question { font-size: 26px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .zone-etapes { transition: none; }
    .etape.depuis-droite, .etape.depuis-gauche { animation: none; }
  }

  /* Galerie des réalisations : filtres, grille en colonnes, visionneuse. */
  .filtres { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px; }
  .filtres button { min-height: 44px; padding: 0 18px; border: 1px solid #45454B; border-radius: 999px; background: none; color: var(--marbre); font: 400 15px "Jost", sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease); }
  .filtres button span { font-size: 12px; color: #8E8C88; transition: color .25s var(--ease); }
  .filtres button:hover { border-color: var(--laiton); }
  .filtres button[aria-pressed="true"] { background: var(--laiton); border-color: var(--laiton); color: var(--noir); }
  .filtres button[aria-pressed="true"] span { color: rgb(23 23 26 / .7); }
  .galerie-grille { margin-top: 28px; columns: 3 300px; column-gap: 14px; }
  .galerie-grille .item { break-inside: avoid; margin: 0 0 14px; position: relative; overflow: hidden; border-radius: 4px; background: #1D1D21; animation: entree-item .5s var(--ease) both; }
  .galerie-grille .item[hidden] { display: none; }
  @keyframes entree-item { from { opacity: 0; transform: translateY(10px); } }
  .galerie-grille .ouvrir { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
  .galerie-grille img, .galerie-grille video { display: block; width: 100%; height: auto; transition: transform 1s var(--ease), filter .5s var(--ease); }
  .galerie-grille .film video { aspect-ratio: 9 / 16; object-fit: cover; }
  .galerie-grille .ouvrir:hover img { transform: scale(1.035); }
  .galerie-grille figcaption { position: absolute; inset: auto 0 0; padding: 36px 14px 12px; background: linear-gradient(transparent, rgb(15 15 17 / .82)); font-size: 13px; letter-spacing: .04em; color: var(--marbre); pointer-events: none; }
  .galerie-plus { margin-top: 18px; display: flex; justify-content: center; }
  .galerie-plus[hidden] { display: none; }

  .visionneuse { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(10 10 12 / .96); color: var(--marbre); }
  .visionneuse::backdrop { background: rgb(10 10 12 / .9); }
  .visionneuse[open] { display: grid; place-items: center; animation: fondu .3s var(--ease); }
  @keyframes fondu { from { opacity: 0; } }
  .visionneuse figure { margin: 0; display: grid; gap: 14px; justify-items: center; max-width: min(92vw, 1400px); touch-action: pan-y; }
  .visionneuse img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; border-radius: 4px; user-select: none; -webkit-user-drag: none; }
  .visionneuse img.change { animation: change .35s var(--ease); }
  @keyframes change { from { opacity: 0; transform: scale(.985); } }
  .visionneuse figcaption { display: flex; gap: 16px; align-items: baseline; font-size: 15px; }
  .v-compteur { font-size: 13px; color: #8E8C88; font-variant-numeric: tabular-nums; }
  .v-btn { position: fixed; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgb(238 236 232 / .3); background: rgb(23 23 26 / .7); color: var(--marbre); display: grid; place-items: center; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
  .v-btn:hover { border-color: var(--laiton); background: rgb(23 23 26 / .95); }
  .v-btn svg { width: 22px; height: 22px; }
  .v-fermer { top: 20px; right: 20px; }
  .v-prec { left: 20px; top: 50%; transform: translateY(-50%); }
  .v-suiv { right: 20px; top: 50%; transform: translateY(-50%); }
  @media (max-width: 760px) {
    .filtres { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
    .filtres::-webkit-scrollbar { display: none; }
    .filtres button { flex: none; white-space: nowrap; font-size: 14px; padding: 0 14px; }
    .galerie-grille { columns: 2; column-gap: 10px; }
    .galerie-grille .item { margin-bottom: 10px; }
    .galerie-grille figcaption { font-size: 12px; padding: 26px 10px 9px; }
    .v-prec, .v-suiv { top: auto; bottom: 20px; transform: none; }
    .v-prec { left: calc(50% - 64px); } .v-suiv { right: calc(50% - 64px); }
    .visionneuse img { max-height: calc(100dvh - 200px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .galerie-grille .item, .visionneuse[open], .visionneuse img.change { animation: none; }
  }

/* Accueil : bandeau d'entrée vers « Nos chantiers ». */
.chantiers-entree { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; }
.chantiers-entree > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
/* La photo se fond dans le fond du site en haut et en bas : pas de coupure entre les sections. */
.chantiers-entree::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, #0F0F11 0%, rgb(15 15 17 / .75) 12%, rgb(15 15 17 / .35) 32%, rgb(15 15 17 / .35) 62%, #0F0F11 100%),
  linear-gradient(90deg, rgb(15 15 17 / .75) 0%, rgb(15 15 17 / .15) 60%); }
.chantiers-entree .page { position: relative; z-index: 1; padding: 96px 0; }
.chantiers-entree h2 { font-size: clamp(30px, 3.4vw, 50px); max-width: 18ch; }
.chantiers-entree p { margin-top: 14px; max-width: 48ch; color: #D9D6D0; }
.chantiers-entree .btn { margin-top: 28px; }
.chantiers-entree:hover > img { transform: scale(1.03); }

/* Page « Nos chantiers ». */
.page-chantiers .entete { background: rgb(15 15 17 / .92); backdrop-filter: blur(8px); }
.page-chantiers .entete nav a[aria-current] { opacity: 1; color: var(--laiton-clair); }
.intro-chantiers { padding: 168px 0 8px; }
.intro-chantiers h1 { font-size: clamp(38px, 5vw, 72px); }
.intro-chantiers p { margin-top: 18px; max-width: 54ch; color: var(--texte-clair); font-size: 18px; }
.page-chantiers .chantiers { border-top: 0; padding-top: 24px; }
.appel-chantiers { border-top: 1px solid #2A2A2F; padding: 96px 0; text-align: center; }
.appel-chantiers h2 { font-size: clamp(28px, 3vw, 44px); max-width: 22ch; margin: 0 auto; }
.appel-chantiers p { margin: 14px auto 0; max-width: 46ch; color: var(--texte-clair); }
.appel-chantiers .actions { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 760px) {
  .chantiers-entree { min-height: 64vh; }
  .chantiers-entree .page { padding: 72px 0; }
  .metiers { padding-bottom: 72px; }
  .intro-chantiers { padding-top: 120px; }
  .appel-chantiers { padding: 72px 0; }
}
@media (prefers-reduced-motion: reduce) { .chantiers-entree > img { transition: none; } }

/* Les ancres ne se cachent pas sous l'en-tête fixe. */
section[id] { scroll-margin-top: 96px; }

/* ---------- Page « Nos chantiers » : présentation éditoriale ---------- */
.page-chantiers .chantiers { padding: 120px 0 128px; }
.une { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.une > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.une::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 15 17 / .55) 0%, rgb(15 15 17 / .1) 30%, rgb(15 15 17 / .25) 55%, #0F0F11 100%), linear-gradient(90deg, rgb(15 15 17 / .55), transparent 60%); }
.une .page { position: relative; z-index: 1; padding-bottom: 104px; }
.une h1 { font-size: clamp(48px, 8vw, 128px); line-height: .95; letter-spacing: -.01em; }
.une p { margin-top: 22px; max-width: 46ch; font-size: 19px; color: #DCD9D3; }
.une .chiffres { margin-top: 30px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--laiton-clair); }
.legende-une { position: absolute; z-index: 1; right: 32px; bottom: 32px; font-size: 13px; color: #B9B7B2; letter-spacing: .04em; }
@media (prefers-reduced-motion: no-preference) {
  .une > img { animation: une-entree 2.4s var(--ease) both; }
  @keyframes une-entree { from { transform: scale(1.06); filter: blur(4px); } }
}

/* Index des savoir-faire : liste à gauche, aperçu qui change à droite. */
.savoir-faire { padding: 120px 0 64px; }
.savoir-faire .page { display: grid; grid-template-columns: 6fr 5fr; gap: 72px; align-items: center; }
.index-sf { list-style: none; margin: 0; padding: 0; border-top: 1px solid #2A2A2F; }
.index-sf li { border-bottom: 1px solid #2A2A2F; }
.index-sf a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 26px 0; text-decoration: none; color: #8E8C88; transition: color .4s var(--ease), padding-left .4s var(--ease); }
.index-sf .nom { font-size: clamp(26px, 3vw, 44px); font-weight: 300; letter-spacing: -.005em; }
.index-sf .nb { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #6E6C69; white-space: nowrap; transition: color .4s var(--ease); }
.index-sf a:hover, .index-sf a:focus-visible, .index-sf a.actif { color: var(--marbre); padding-left: 14px; }
.index-sf a:hover .nb, .index-sf a:focus-visible .nb, .index-sf a.actif .nb { color: var(--laiton-clair); }
.apercu-sf { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: #1D1D21; }
.apercu-sf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.apercu-sf img.actif { opacity: 1; transform: none; }

/* Chapitres : texte et mosaïque de trois photos, en alternance. */
.recits { padding: 40px 0 40px; }
.chapitre { display: grid; grid-template-columns: 4fr 8fr; gap: 72px; align-items: center; padding: 88px 0; border-top: 1px solid #2A2A2F; }
.chapitre.inverse { grid-template-columns: 8fr 4fr; }
.chapitre.inverse .chapitre-texte { order: 2; }
.chapitre h2 { font-size: clamp(32px, 3.6vw, 54px); font-weight: 300; }
.chapitre p { margin-top: 18px; color: var(--texte-clair); max-width: 36ch; font-size: 17px; }
.lien-chapitre { margin-top: 30px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0 4px; background: none; border: 0; border-bottom: 1px solid var(--laiton); color: var(--laiton-clair); font: 400 13px "Jost", sans-serif; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: color .3s var(--ease); }
.lien-chapitre:hover { color: var(--marbre); }
.mosaique { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; gap: 14px; height: min(78svh, 680px); min-width: 0; }
.mosaique .m { position: relative; padding: 0; border: 0; overflow: hidden; border-radius: 4px; background: #1D1D21; cursor: zoom-in; min-height: 0; }
.mosaique .m img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease), filter .6s var(--ease); filter: saturate(.92); }
.mosaique .m:hover img, .mosaique .m:focus-visible img { transform: scale(1.04); filter: none; }
.mosaique .m0 { grid-row: span 2; }
.mosaique.n1 { grid-template-columns: 1fr; } .mosaique.n1 .m0 { grid-row: span 2; }
.mosaique.n2 { grid-template-columns: 1fr 1fr; } .mosaique.n2 .m { grid-row: span 2; }
.chapitre.inverse .mosaique { grid-template-columns: 2fr 3fr; }
.chapitre.inverse .mosaique .m0 { grid-column: 2; grid-row: 1 / span 2; }
.chapitre.inverse .mosaique .m1 { grid-column: 1; grid-row: 1; }
.chapitre.inverse .mosaique .m2 { grid-column: 1; grid-row: 2; }
.chapitre.inverse .mosaique.n2 { grid-template-columns: 1fr 1fr; }
.chapitre.inverse .mosaique.n2 .m1 { grid-row: 1 / span 2; }

/* Avant / après et toutes les réalisations. */
.bloc-avant-apres { padding: 112px 0; border-top: 1px solid #2A2A2F; background: #131316; }
.bloc-avant-apres .comparaison { margin-top: 0; }
.bloc-avant-apres h2 { font-size: clamp(32px, 3.6vw, 54px); font-weight: 300; }
.titre-toutes { font-size: clamp(32px, 3.6vw, 54px); font-weight: 300; }

@media (max-width: 960px) {
  .savoir-faire .page { grid-template-columns: 1fr; gap: 0; }
  .apercu-sf { display: none; }
  .chapitre, .chapitre.inverse { grid-template-columns: 1fr; gap: 32px; padding: 64px 0; }
  .chapitre.inverse .chapitre-texte { order: 0; }
}
@media (max-width: 760px) {
  .une { min-height: 88svh; }
  .une .page { padding-bottom: 64px; }
  .une p { font-size: 17px; }
  .legende-une { display: none; }
  .savoir-faire { padding: 72px 0 24px; }
  .index-sf a { padding: 20px 0; }
  .index-sf .nom { font-size: 26px; }
  .mosaique, .chapitre.inverse .mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; gap: 8px; }
  .mosaique .m0, .chapitre.inverse .mosaique .m0 { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 3; }
  .mosaique .m1, .mosaique .m2, .chapitre.inverse .mosaique .m1, .chapitre.inverse .mosaique .m2 { grid-column: auto; grid-row: 2; aspect-ratio: 1; }
  .mosaique.n2 .m, .chapitre.inverse .mosaique.n2 .m { grid-column: auto; grid-row: 1; aspect-ratio: 4 / 5; }
  .bloc-avant-apres { padding: 72px 0; }
  .page-chantiers .chantiers { padding: 72px 0 88px; }
}

/* L'artisan : « De père en fils ».
   Ordinateur : le portrait d'Evan sort de la grille jusqu'au bord gauche de l'écran et occupe toute la hauteur
   de la section ; à droite, le titre, le fil des quatre étapes, puis le lien vers le devis.
   Le portrait est servi à sa définition d'origine (853 px de large au plus) : jamais agrandi en fichier. */
.heritage { container-type: inline-size; padding: 136px 0; background: #17171A; overflow-x: clip; }
.heritage .page {
  --debord: max(24px, (100cqw - 1240px) / 2); /* distance entre le bord de l'écran et la grille */
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 7vw, 112px);
  grid-template-areas: "portrait tete" "portrait fil" "portrait action"; grid-template-rows: auto auto 1fr;
}
.heritage-tete { grid-area: tete; }
.heritage h2 { font-size: clamp(34px, 4.2vw, 60px); }
.heritage .intro { margin-top: 20px; max-width: 38ch; font-size: 19px; line-height: 1.55; color: var(--texte-clair); }

.portrait { grid-area: portrait; position: relative; margin: 0 0 0 calc(-1 * var(--debord)); min-height: 620px; overflow: hidden; border-radius: 0 4px 4px 0; background: #1D1D21; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.portrait::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(rgb(15 15 17 / 0), rgb(15 15 17 / .55) 50%, rgb(15 15 17 / .88)); pointer-events: none; }
.portrait figcaption { position: absolute; z-index: 1; left: var(--debord); right: 24px; bottom: 26px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--marbre); }

/* Le fil : quatre étapes reliées par un trait laiton, la dernière (aujourd'hui) pleine. */
.chapitres { grid-area: fil; list-style: none; margin: 64px 0 0; padding: 0; }
.chapitres li { position: relative; padding: 0 0 36px 48px; }
.chapitres li:last-child { padding-bottom: 0; }
.chapitres li::before { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; box-sizing: border-box; transform: rotate(45deg); background: #17171A; border: 1px solid var(--laiton); }
.chapitres li:last-child::before { background: var(--laiton); }
.chapitres li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 24px; bottom: 2px; width: 1px; background: rgb(165 139 92 / .45); }
.chapitres b { display: block; font-weight: 400; font-size: 13px; line-height: 22px; letter-spacing: .18em; text-transform: uppercase; color: var(--laiton-clair); }
.chapitres h3 { margin-top: 6px; font-size: 24px; font-weight: 300; }
.chapitres p { margin-top: 8px; max-width: 44ch; font-size: 16px; color: var(--texte-clair); }
.heritage .lien { grid-area: action; justify-self: start; align-self: start; margin: 44px 0 0 48px; }

/* Tablette : le titre passe au-dessus ; le portrait, recadré en hauteur, accompagne le fil sur toute sa longueur. */
@media (max-width: 999px) {
  .heritage { padding: 104px 0; }
  .heritage .page { column-gap: 40px; grid-template-areas: "tete tete" "portrait fil" "portrait action"; }
  .heritage-tete { margin-bottom: 56px; }
  .portrait { min-height: 480px; }
  .chapitres { margin-top: 0; }
}
/* Téléphone : titre, portrait d'un bord à l'autre, puis le fil et le lien. */
@media (max-width: 760px) {
  .heritage { padding: 80px 0; }
  .heritage .page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "portrait" "fil" "action"; grid-template-rows: none; }
  .heritage-tete { margin-bottom: 40px; }
  .heritage .intro { font-size: 17px; }
  .portrait { min-height: 0; margin-right: calc(-1 * var(--debord)); aspect-ratio: 4 / 5; border-radius: 0; }
  .portrait figcaption { bottom: 20px; font-size: 12px; }
  .chapitres { margin-top: 56px; }
  .chapitres li { padding: 0 0 32px 40px; }
  .chapitres h3 { font-size: 22px; }
  .heritage .lien { margin: 36px 0 0 40px; }
}

/* Pied de page (commun aux trois pages, HTML généré par outils-site/pied.py).
   Adapté du footer 21st « Footer with Minimal Outline » (choisi par Valentin) : minimal, sans carte ni filet ni flèche.
   Le grand MGR est le tracé officiel en contour laiton seul ; il se dessine une fois (assets/pied.js).
   Sans JS et en mouvement réduit, le contour est complet. */
.pied { background: #17171A; color: var(--texte-clair); font-size: 14px; line-height: 1.5; }
.pied h2, .pied p, .pied ul, .pied address { margin: 0; }
.pied ul { list-style: none; padding: 0; }
.pied-cadre { width: var(--page); margin-inline: auto; padding-top: 104px; }

.pied-haut { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 40px; }
.pied-marque img { height: 18px; width: auto; }
.pied .pied-copyright { margin-top: 16px; color: #8E8C88; }
.pied .pied-contacts { margin-top: 14px; }

.pied-groupe h2 { margin-bottom: 6px; font-size: 14px; font-weight: 500; line-height: 22px; letter-spacing: .01em; color: var(--marbre); }
.pied a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte-clair); text-decoration: none; transition: color .25s var(--ease); }
.pied a:hover, .pied a[aria-current] { color: var(--marbre); }
.pied li { display: flex; flex-wrap: wrap; align-items: center; min-height: 44px; }
.pied li span { white-space: nowrap; }
.pied-groupe address { font-style: normal; padding-top: 11px; }
.pied-groupe-infos p { margin-top: 12px; }
.pied-groupe-infos a { margin-top: 2px; }

/* Le grand MGR : contour fin, centré, environ 56 % de la largeur sur ordinateur. */
.pied-mot { display: block; width: min(56%, 720px); height: auto; margin: 112px auto 0; overflow: visible; }
/* Épaisseur en unités du dessin (environ 1 px à l'écran) : avec pathLength, un trait « non-scaling » fausse la longueur des tirets. */
.pied-mot path { fill: none; stroke: var(--laiton); stroke-width: .9; stroke-linejoin: round; }
.pied .pied-bas { display: flex; justify-content: center; margin-top: 56px; padding-bottom: 20px; font-size: 13px; letter-spacing: .02em; }
.pied-bas a { color: #8E8C88; }
.pied-bas a:hover { color: var(--marbre); }

/* Animation : le trait se dessine (pathLength = 1), une lettre après l'autre. */
.pied-attente .pied-mot path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pied-revele .pied-mot path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.4, 0, .2, 1) var(--d, 0s); }
.pied-trace-g { --d: .15s; }
.pied-trace-r { --d: .3s; }
.pied-fini .pied-mot path { stroke-dasharray: none; } /* dessin terminé : jonctions des contours sans tiret */

/* Tablette : la marque au-dessus, les quatre colonnes en deux rangées. */
@media (max-width: 1100px) {
  .pied-haut { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 48px; }
  .pied-marque { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 40px; }
  .pied .pied-copyright, .pied .pied-contacts { margin-top: 0; }
  .pied-contacts { display: flex; flex-wrap: wrap; column-gap: 32px; }
  .pied-mot { width: min(64%, 720px); }
}
@media (max-width: 760px) {
  html { scroll-padding-bottom: 96px; } /* le focus clavier ne finit pas sous le bandeau de devis fixe */
  body:not(:has(.devis-mobile)) { padding-bottom: 0; } /* mentions légales : pas de bandeau, pas de marge vide sous le pied */
  .pied-cadre { padding-top: 64px; }
  .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .pied-marque { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
  .pied .pied-copyright { margin-top: 0; }
  .pied .pied-contacts { flex-basis: 100%; display: flex; flex-wrap: wrap; column-gap: 24px; margin-top: 10px; }
  .pied-mot { width: 100%; margin-top: 56px; }
  .pied-mot path { stroke-width: 1.4; }
  .pied .pied-bas { margin-top: 28px; padding-bottom: 32px; }
}
@media print {
  .pied-attente .pied-mot path { stroke-dasharray: none; }
}

/* Ancres des métiers (liens « Savoir-faire » du pied de page) : le titre ne passe pas sous l'en-tête fixe. */
.metier[id] { scroll-margin-top: 88px; }
@media (max-width: 760px) { .metier[id] { scroll-margin-top: 64px; } }

/* Pages métiers, pages locales et 404 (générées par outils-site/pages.py) : mêmes blocs que l'accueil et « Nos chantiers ». */
.une-seo { min-height: 84svh; }
.une-seo h1 { font-size: clamp(40px, 6.4vw, 96px); line-height: 1; }
.une .actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.fil-ariane ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #DCD9D3; }
.fil-ariane li + li::before { content: "/"; margin: 0 12px; color: var(--laiton-clair); }
.fil-ariane a { display: inline-flex; align-items: center; min-height: 44px; color: #DCD9D3; text-decoration: none; }
.fil-ariane a:hover { color: var(--marbre); text-decoration: underline; }
.fil-ariane [aria-current] { color: var(--marbre); }
.chapitre-texte .puces { margin-top: 22px; }
.chapitre-texte a:not(.lien-chapitre) { color: var(--laiton-clair); }
.mosaique figure.m { margin: 0; cursor: auto; }
.engagements .tete h2 { font-size: clamp(30px, 3.2vw, 46px); margin-bottom: 56px; max-width: 16ch; }
.engagements .num { font-size: 22px; font-weight: 300; line-height: 1.2; color: var(--laiton); font-variant-numeric: tabular-nums; }
.territoire ul { list-style: none; margin: 0; padding: 0; font-size: 20px; font-weight: 300; line-height: 1.4; }
.territoire li a { min-height: 44px; }
.metier .liens { display: flex; flex-wrap: wrap; align-items: center; gap: 0 32px; }
.metier h2 a { color: inherit; text-decoration: none; }
.metier h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.appel-chantiers .liens-metiers { margin: 28px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; list-style: none; padding: 0; }
.appel-chantiers .liens-metiers a { display: inline-flex; align-items: center; min-height: 44px; color: var(--laiton-clair); }
@media (max-width: 760px) {
  .une-seo { min-height: 80svh; }
  .une-seo h1 { font-size: clamp(34px, 10vw, 48px); }
  .fil-ariane ol { font-size: 12px; letter-spacing: .12em; }
  .engagements .tete h2 { margin-bottom: 36px; }
}