/* =====================================================================
   Matrice Couvreur 2 — « Vert anglais » (version 3, 09/10/2026)
   Vert anglais profond et crème, rien d'autre : la tuile de la maquette fait l'accent.
   Gloock (titres, contraste fort) et Hanken Grotesk (texte).
   Mise en page de magazine : grand titre, bandeau de chiffres, sommaire, chantier
   raconté dans une arche qui suit la maquette, portfolio, citation en exergue.
   La maquette 3D suit le défilement (js/scene.js).
   ===================================================================== */

:root {
  --vert: #15241D;           /* fond de page */
  --vert-2: #1A2C24;         /* sections alternées */
  --vert-3: #21362C;         /* arche, cartes, champs */
  --vert-fond: #0F1A15;      /* vue éclatée, pied de page */
  --creme: #EFE8D8;          /* titres, boutons */
  --texte: #D9D1BF;          /* texte courant */
  --sauge: #A3B3A6;          /* surtitres, texte secondaire */
  --filet: rgba(239, 232, 216, .15);
  --filet-fort: rgba(239, 232, 216, .38);

  --titre: 'Gloock', Georgia, 'Times New Roman', serif;
  --police: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --entete-h: 5.25rem;
  --gouttiere: clamp(1.25rem, 5vw, 5rem);
  --ecran-h: 40vh;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete-h) + 1rem); }
body {
  margin: 0; font-family: var(--police); font-weight: 350; font-size: 1.0625rem; line-height: 1.66;
  color: var(--texte); background: var(--vert); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--creme); color: var(--vert); }
:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; border-radius: 4px; }

.evitement { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--creme); color: var(--vert); padding: .7rem 1rem; text-decoration: none; border-radius: 999px; }
.evitement:focus { top: 1rem; }
.bandeau-demo { position: relative; z-index: 60; background: var(--vert-fond); color: #B4BDB3; font-size: .8125rem; line-height: 1.4; text-align: center; padding: .45rem 1rem; }

/* ---------------------------------------------------------- en-tête */
.entete { position: sticky; top: 0; z-index: 50; height: var(--entete-h); border-bottom: 1px solid var(--filet); transition: background-color .3s ease; }
.entete--defile { background: rgba(21, 36, 29, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.entete__interieur { height: 100%; display: flex; align-items: center; gap: 2rem; padding: 0 var(--gouttiere); }
.marque { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--creme); flex-shrink: 0; }
.marque__signe { width: 2.3rem; height: 1.85rem; fill: none; stroke: var(--creme); stroke-width: 1.5; stroke-linejoin: round; }
.marque__tuiles { stroke-width: 1.2; }
.marque__nom { font-family: var(--titre); font-size: 1.55rem; line-height: 1; letter-spacing: -.005em; white-space: nowrap; }
.nav { margin-left: clamp(1rem, 5vw, 5rem); }
.nav__liste { list-style: none; display: flex; gap: 2rem; }
.nav__liste a { white-space: nowrap; text-decoration: none; font-size: .95rem; color: rgba(239, 232, 216, .78); padding: .35rem 0; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.nav__liste a:hover { color: var(--creme); }
.nav__liste a[aria-current="true"] { color: var(--creme); border-bottom-color: var(--creme); }
.entete__actions { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.entete__tel { text-decoration: none; color: var(--creme); font-weight: 600; font-size: .95rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-bouton { display: none; }
.menu-mobile { position: absolute; top: var(--entete-h); left: 0; right: 0; background: var(--vert-2); border-top: 1px solid var(--filet); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .7); padding: .6rem 1.25rem 1.2rem; }
.menu-mobile ul { list-style: none; }
.menu-mobile a { display: block; padding: .8rem 0; text-decoration: none; font-family: var(--titre); font-size: 1.35rem; color: var(--creme); border-bottom: 1px solid var(--filet); }

/* ---------------------------------------------------------- boutons */
.bouton {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
  padding: 1.05rem 1.8rem; min-height: 3.3rem; border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bouton--creme { background: var(--creme); color: var(--vert); }
.bouton--creme:hover { background: #fff; }
.bouton--contour { border-color: var(--filet-fort); color: var(--creme); font-weight: 500; }
.bouton--contour:hover { border-color: var(--creme); }
.bouton--petit { padding: .7rem 1.3rem; min-height: 2.7rem; font-size: .92rem; }

/* ---------------------------------------------------------- la maquette, l'arche et les étiquettes */
.plateau { position: fixed; left: 0; top: 0; z-index: 1; width: 720px; height: 720px; transform-origin: 50% 50%; pointer-events: none; will-change: transform, opacity; }
.plateau canvas { width: 100%; height: 100%; display: block; }
.arche {
  position: fixed; left: 0; top: 0; z-index: 1; width: 100px; height: 100px; opacity: 0; pointer-events: none;
  background: var(--vert-3); will-change: transform, opacity;
}
.arche::after { content: ""; position: absolute; inset: 12px 12px 0; border: 1px solid rgba(239, 232, 216, .22); border-bottom: 0; border-radius: inherit; }
.arche--niche { box-shadow: 0 0 0 1px rgba(239, 232, 216, .32), 0 24px 40px -22px rgba(0, 0, 0, .8); }
.traits { position: absolute; inset: 0; overflow: visible; opacity: 0; }
.traits path { fill: none; stroke: rgba(239, 232, 216, .5); stroke-width: 1.1; }
.traits circle { fill: var(--creme); }
.traits path.actif { stroke: var(--creme); stroke-width: 1.8; }
.legendes { position: absolute; left: 0; top: 0; list-style: none; opacity: 0; }
.legendes li {
  position: absolute; left: 0; top: 0; white-space: nowrap; font-size: .82rem; font-weight: 600; letter-spacing: .02em; line-height: 1;
  color: var(--creme); background: rgba(15, 26, 21, .86); border: 1px solid var(--filet-fort); padding: .5rem .85rem; border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}
.legendes li.actif { background: var(--creme); border-color: var(--creme); color: var(--vert); }
.ecran { display: none; }

/* images de secours : mouvement réduit, sans JavaScript, ou si l'animation ne démarre pas */
.repli { display: none; }
html:not(.js) .plateau, .mouvement-reduit .plateau, .sans-anim .plateau, html:not(.js) .arche, .mouvement-reduit .arche, .sans-anim .arche,
.mouvement-reduit .ecran, .sans-anim .ecran { display: none; }
html:not(.js) .repli, .mouvement-reduit .repli, .sans-anim .repli { display: block; height: auto; }

/* ---------------------------------------------------------- éléments communs */
.cle { display: flex; align-items: center; gap: .85rem; font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sauge); }
.cle i { display: block; width: .5rem; height: .5rem; border-radius: 50%; border: 1px solid var(--sauge); }
.titre { margin-top: 1.1rem; font-family: var(--titre); font-weight: 400; color: var(--creme); font-size: clamp(2.4rem, 1.2rem + 2.9vw, 4.3rem); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.chapo { margin-top: 1.2rem; font-size: 1.12rem; color: var(--texte); font-weight: 300; max-width: 36rem; }
.mention-exemple { margin-top: 1.6rem; font-size: .92rem; color: var(--sauge); }
.section { position: relative; padding: clamp(5.5rem, 12vh, 9rem) var(--gouttiere); }
.enveloppe { position: relative; z-index: 2; max-width: min(75vw, 76rem); }

/* ---------------------------------------------------------- accueil */
.accueil { position: relative; min-height: calc(100vh - var(--entete-h) - 1.9rem); display: flex; align-items: center; padding: 0 var(--gouttiere) 8.5rem; }
.accueil__texte { position: relative; z-index: 2; width: min(45vw, 44rem); }
.accueil__titre { margin-top: 1.6rem; font-family: var(--titre); font-weight: 400; color: var(--creme); font-size: min(clamp(3.4rem, 1.2rem + 5.2vw, 7rem), 11.5vh); line-height: .98; letter-spacing: -.015em; }
.accueil__intro { margin-top: 1.9rem; max-width: 34rem; font-size: 1.16rem; line-height: 1.62; color: var(--texte); font-weight: 300; }
.accueil__actions { margin-top: 2.3rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.accueil__maquette { position: absolute; right: -1vw; top: calc(50% - 4rem); transform: translateY(-50%); width: min(55vw, 84vh); aspect-ratio: 1; }
.chiffres { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--filet); background: rgba(10, 18, 14, .32); }
.chiffres li { display: flex; align-items: center; gap: 1.2rem; padding: 1.7rem var(--gouttiere); }
.chiffres li + li { border-left: 1px solid var(--filet); }
.chiffres strong { font-family: var(--titre); font-weight: 400; font-size: 2.5rem; line-height: 1; color: var(--creme); white-space: nowrap; }
.chiffres span { font-size: .92rem; line-height: 1.4; color: var(--sauge); }

/* ---------------------------------------------------------- services : le sommaire */
.services { background: var(--vert-2); }
.services__texte { position: relative; z-index: 2; width: min(54vw, 56rem); }
.services .titre { max-width: 16ch; }
.sommaire { list-style: none; margin-top: 3.4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
.sommaire li { display: grid; grid-template-columns: 3.2rem 1fr; column-gap: .4rem; padding: 1.3rem 0 1.4rem; border-top: 1px solid var(--filet); }
.sommaire span { grid-row: span 2; font-family: var(--titre); font-size: 1.3rem; color: var(--sauge); line-height: 1.3; }
.sommaire h3 { font-family: var(--titre); font-weight: 400; font-size: 1.75rem; line-height: 1.15; color: var(--creme); }
.sommaire p { margin-top: .35rem; font-size: .95rem; line-height: 1.55; color: var(--texte); font-weight: 300; }
.encadre { margin-top: 2.8rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 2rem; padding: 1.5rem 1.8rem; border-radius: 18px; background: var(--creme); color: var(--vert); }
.encadre p { max-width: 26rem; font-size: 1.02rem; line-height: 1.5; }
.encadre strong { font-family: var(--titre); font-weight: 400; font-size: 1.3rem; margin-right: .2rem; }
.encadre__tel { font-family: var(--titre); font-size: clamp(1.9rem, 1.3rem + 1.3vw, 2.6rem); line-height: 1; color: var(--vert); text-decoration: none; white-space: nowrap; }

/* ---------------------------------------------------------- le chantier */
.recit { position: relative; z-index: 2; margin-left: 52vw; max-width: 38rem; }
.etapes { list-style: none; margin-top: 3.4rem; }
.etape__rail { display: flex; gap: 5px; width: min(100%, 15rem); }
.etape__rail i { flex: 1; height: 2px; background: rgba(239, 232, 216, .18); }
.etape__rail i.fait { background: var(--creme); }
.etape { min-height: 62vh; padding-top: 1.5rem; opacity: .26; transition: opacity .35s ease; }
.etape.actif { opacity: 1; }
.etape__num { display: block; margin-top: .9rem; font-size: .76rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sauge); }
.etape h3 { margin-top: .4rem; font-family: var(--titre); font-weight: 400; font-size: clamp(2.3rem, 1.4rem + 2vw, 3.6rem); line-height: 1.02; color: var(--creme); }
.etape p { margin-top: 1.1rem; font-size: 1.1rem; font-weight: 300; color: var(--texte); max-width: 32rem; }
.etape:last-child { min-height: 46vh; }

/* ---------------------------------------------------------- sous les tuiles (vue éclatée) */
.toit { background: var(--vert-fond); }
.toit__texte { position: relative; z-index: 2; width: min(36vw, 32rem); }
.couches { list-style: none; margin-top: 2.6rem; }
.couches li { min-height: 15vh; padding: 1.1rem 0; border-top: 1px solid var(--filet); opacity: .4; transition: opacity .3s ease; }
.couches li.actif { opacity: 1; }
.couches h3 { font-family: var(--titre); font-weight: 400; font-size: 1.55rem; line-height: 1.1; color: var(--creme); }
.couches p { margin-top: .3rem; font-size: .96rem; color: var(--texte); font-weight: 300; }

/* ---------------------------------------------------------- réalisations : le portfolio */
.tete-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 3rem; }
.tete-ligne .chapo { max-width: 24rem; margin: 0; color: var(--sauge); font-size: .98rem; }
.portfolio { list-style: none; margin-top: 3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem 1.6rem; }
.portfolio img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: var(--vert-3); }
.portfolio h3 { margin-top: .9rem; font-family: var(--titre); font-weight: 400; font-size: 1.35rem; color: var(--creme); }
.portfolio p { font-size: .9rem; color: var(--sauge); }

/* ---------------------------------------------------------- avis : la citation en exergue */
.avis { background: var(--vert-2); }
.exergue { margin-top: 2.2rem; max-width: 58rem; }
.exergue blockquote { font-family: var(--titre); font-size: clamp(2rem, 1.2rem + 2.2vw, 3.4rem); line-height: 1.12; color: var(--creme); text-wrap: balance; }
.exergue figcaption { margin-top: 1.4rem; font-size: .95rem; color: var(--sauge); }
.avis__bas { margin-top: 3.6rem; padding-top: 2.2rem; border-top: 1px solid var(--filet); display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }
.note { display: flex; flex-direction: column; gap: .5rem; }
.note__chiffre { font-family: var(--titre); font-size: 4.2rem; line-height: .9; color: var(--creme); }
.note__detail { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--sauge); }
.etoiles { display: flex; gap: 3px; }
.etoiles svg { width: 1rem; height: 1rem; fill: var(--creme); }
.temoignages { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.temoignages blockquote { font-size: 1.06rem; line-height: 1.6; color: var(--texte); font-weight: 300; }
.temoignages p { margin-top: .8rem; font-size: .88rem; color: var(--sauge); font-weight: 500; }

/* ---------------------------------------------------------- zone */
.villes { margin-top: 2.4rem; max-width: 62rem; font-family: var(--titre); font-size: clamp(1.45rem, 1rem + 1.1vw, 2.1rem); line-height: 1.5; color: var(--creme); }
.villes i { font-style: normal; color: var(--sauge); padding: 0 .25em; }
.zone .chapo { color: var(--sauge); }

/* ---------------------------------------------------------- questions */
.faq { background: var(--vert-2); }
.faq__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 2rem 5vw; align-items: start; }
.questions { border-top: 1px solid var(--filet); }
.questions details { border-bottom: 1px solid var(--filet); }
.questions summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.3rem 0; font-family: var(--titre); font-size: 1.4rem; line-height: 1.25; color: var(--creme); }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: ""; flex-shrink: 0; width: 2rem; height: 2rem; border: 1px solid var(--filet-fort); border-radius: 50%; background: linear-gradient(var(--creme), var(--creme)) center / .7rem 1px no-repeat, linear-gradient(var(--creme), var(--creme)) center / 1px .7rem no-repeat; transition: transform .25s ease; }
.questions details[open] summary::after { transform: rotate(45deg); }
.questions details p { padding: 0 3rem 1.5rem 0; color: var(--texte); font-weight: 300; }

/* ---------------------------------------------------------- contact */
.contact__texte { position: relative; z-index: 2; margin-left: 52vw; max-width: 40rem; }
.contact__tel { display: inline-block; margin-top: 1.8rem; font-family: var(--titre); font-size: clamp(2.4rem, 1.6rem + 2vw, 3.6rem); line-height: 1; color: var(--creme); text-decoration: none; }
.contact__horaires { margin-top: .8rem; font-size: .92rem; color: var(--sauge); }
.formulaire { margin-top: 2.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
.champ { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.champ--large { grid-column: 1 / -1; }
.champ label, .choix legend { font-size: .9rem; font-weight: 600; color: var(--creme); }
.facultatif { font-weight: 400; color: var(--sauge); }
.champ input:not([type="radio"]):not([type="checkbox"]), .champ textarea {
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--creme); background: var(--vert-3);
  border: 1px solid rgba(239, 232, 216, .22); border-radius: 10px; padding: .8rem .95rem; min-height: 3.1rem; width: 100%;
}
.champ textarea { resize: vertical; min-height: 7rem; }
.champ input[type="file"] { padding: .6rem; font-size: .9rem; color: var(--sauge); }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--creme); box-shadow: 0 0 0 3px rgba(239, 232, 216, .14); }
.champ [aria-invalid="true"] { border-color: #E6A991 !important; }
.champ__erreur { font-size: .86rem; color: #EDB8A3; font-weight: 500; }
.champ.choix { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
.choix legend { width: 100%; margin-bottom: .5rem; padding: 0; }
.choix label { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(239, 232, 216, .3); border-radius: 999px; padding: .5rem 1rem; cursor: pointer; font-weight: 500; font-size: .94rem; color: var(--texte); }
.choix input { accent-color: var(--creme); width: 1rem; height: 1rem; margin: 0; }
.choix label:has(input:checked) { border-color: var(--creme); background: rgba(239, 232, 216, .1); color: var(--creme); }
.choix .champ__erreur { width: 100%; }
.champ--case { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: .7rem; }
.champ--case input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--creme); flex-shrink: 0; }
.champ--case label { flex: 1; font-weight: 400; font-size: .9rem; color: var(--sauge); }
.champ--case .champ__erreur { width: 100%; }
.formulaire__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .4rem; }
.formulaire__statut { font-size: .95rem; }
.formulaire__statut.ok { color: #B9D8C1; font-weight: 500; }
.formulaire__statut.erreur { color: #EDB8A3; font-weight: 500; }

/* ---------------------------------------------------------- pied */
.pied { position: relative; z-index: 3; background: var(--vert-fond); color: var(--sauge); padding: 4rem var(--gouttiere) 2.2rem; }
.pied__interieur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.pied__nom { font-family: var(--titre); font-size: 2.1rem; line-height: 1; color: var(--creme); margin-bottom: .6rem; }
.pied ul { list-style: none; display: grid; grid-template-columns: repeat(2, auto); gap: .35rem 3rem; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--creme); text-decoration: underline; }
.pied__legal { margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--filet); font-size: .8rem; color: #7F8C82; }
.barre-appel { display: none; }

/* ---------------------------------------------------------- sans animation : images fixes posées dans la page */
@media (min-width: 1024px) and (min-aspect-ratio: 21/20) {
  :is(html:not(.js), .mouvement-reduit, .sans-anim) .accueil__maquette .repli { width: 100%; }
  /* sans animation : l'image fixe partage la case de grille du contenu et reste collée tant que sa section défile */
  :is(html:not(.js), .mouvement-reduit, .sans-anim) .section:has(> .repli) { display: grid; }
  :is(html:not(.js), .mouvement-reduit, .sans-anim) .section:has(> .repli) > * { grid-area: 1 / 1; }
  :is(html:not(.js), .mouvement-reduit, .sans-anim) .section > .repli { position: sticky; z-index: 1; align-self: start; margin: 0; top: calc(var(--entete-h) + 7vh); width: min(42vw, 74vh); justify-self: start; }
  :is(html:not(.js), .mouvement-reduit, .sans-anim) .toit > .repli { justify-self: end; }
}
:is(html:not(.js), .mouvement-reduit, .sans-anim) .etape, :is(html:not(.js), .mouvement-reduit, .sans-anim) .couches li { min-height: 0; opacity: 1; padding-bottom: 2rem; }

/* ---------------------------------------------------------- écrans moyens */
@media (max-width: 1279px) {
  .nav__liste { gap: 1.3rem; }
  .entete__tel { display: none; }
  .sommaire { grid-template-columns: minmax(0, 1fr); }
  .portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .temoignages { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------- téléphone et tablette (même règle que js/scene.js) */
@media (max-width: 1023px), (max-aspect-ratio: 21/20) {
  :root { --entete-h: 4.25rem; --gouttiere: 1.25rem; }
  .nav { display: none; }
  .marque__nom { font-size: 1.35rem; }
  .entete__actions { gap: .6rem; }
  .entete__actions > .bouton { display: none; }
  .menu-bouton { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--creme); color: var(--vert); cursor: pointer; }
  .menu-bouton svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; }
  .menu-bouton .i-fermer { display: none; }
  .menu-bouton[aria-expanded="true"] .i-ouvrir { display: none; }
  .menu-bouton[aria-expanded="true"] .i-fermer { display: block; }

  .section { padding: 4.5rem var(--gouttiere); }
  .accueil { display: block; min-height: 0; padding: calc(var(--ecran-h) + 1.4rem) var(--gouttiere) 0; }
  .accueil__texte { width: auto; }
  .accueil__titre { font-size: clamp(3rem, 1rem + 9vw, 4.6rem); }
  .accueil__maquette { display: none; }
  .chiffres { position: static; margin: 3rem calc(-1 * var(--gouttiere)) 0; grid-template-columns: minmax(0, 1fr); }
  .chiffres li + li { border-left: 0; border-top: 1px solid var(--filet); }
  .chiffres li { padding: 1.2rem var(--gouttiere); }
  .services__texte, .toit__texte, .enveloppe, .recit, .contact__texte { width: auto; max-width: 40rem; margin-left: 0; }
  .sommaire { grid-template-columns: minmax(0, 1fr); }
  .js:not(.mouvement-reduit):not(.sans-anim) :is(.chantier, .toit) { padding-top: calc(var(--ecran-h) + 2rem); }
  .etape { min-height: 34vh; }
  .couches li { min-height: 0; }
  .portfolio { grid-template-columns: minmax(0, 1fr); }
  .avis__bas, .faq__grille { grid-template-columns: minmax(0, 1fr); }
  .formulaire { grid-template-columns: minmax(0, 1fr); }
  .ecran { display: block; position: fixed; left: 0; right: 0; top: var(--entete-h); height: var(--ecran-h); z-index: 3; pointer-events: none; opacity: 0; }
  .ecran::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.5rem; height: 1.5rem; background: inherit; -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent); }
  .legendes, .traits, .arche { display: none; }
  .barre-appel { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding-bottom: env(safe-area-inset-bottom); background: var(--vert-fond); border-top: 1px solid var(--filet); }
  .barre-appel a { display: grid; place-items: center; min-height: 3.5rem; font-weight: 600; font-size: 1rem; text-decoration: none; }
  .barre-appel__tel { background: var(--creme); color: var(--vert); }
  .barre-appel__devis { color: var(--creme); }
  body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
  html:not(.js) .repli, .mouvement-reduit .repli, .sans-anim .repli { width: min(100%, 26rem); margin: 0 auto 1.5rem; }
  :is(html:not(.js), .mouvement-reduit, .sans-anim) .accueil { padding-top: 2rem; }
  :is(html:not(.js), .mouvement-reduit, .sans-anim) .accueil__maquette { display: block; position: static; transform: none; width: min(100%, 26rem); margin: 0 auto 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------- contact compact (09/10/2026)
   Le formulaire tient en entier dans l'écran, même en 1280×720 ; le numéro et le titre ne l'écrasent plus.
   Sur téléphone, les champs restent en 16 px (sinon l'iPhone zoome à la saisie). */
.contact.section { padding-top: clamp(3.5rem, 8vh, 6rem); padding-bottom: clamp(3.5rem, 8vh, 6rem); }
.contact .titre { font-size: clamp(2rem, 1.2rem + 1.6vw, 2.9rem); }
.contact__tel { margin-top: 1.1rem; font-size: clamp(1.6rem, 1.2rem + .8vw, 2.1rem); }
.contact__horaires { margin-top: .5rem; }
.formulaire { margin-top: 1.5rem; gap: .7rem .9rem; }
.champ { gap: .28rem; }
.champ label, .choix legend { font-size: .82rem; }
.champ input:not([type="radio"]):not([type="checkbox"]), .champ textarea { font-size: .95rem; padding: .5rem .75rem; min-height: 2.55rem; }
.champ textarea { min-height: 4.4rem; }
.champ input[type="file"] { padding: .35rem .5rem; font-size: .82rem; }
.champ.choix { gap: .35rem; }
.choix legend { margin-bottom: .3rem; }
.choix label { padding: .3rem .75rem; font-size: .85rem; gap: .4rem; }
.champ--case label { font-size: .8rem; line-height: 1.45; }
.formulaire__bas { margin-top: .1rem; }
@media (max-width: 1023px), (max-aspect-ratio: 21/20) {
  .champ input:not([type="checkbox"]):not([type="radio"]), .champ select, .champ textarea { font-size: 16px; }
  .formulaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* nom | téléphone, e-mail | commune */
}
@media (max-width: 359px) {
  .formulaire { grid-template-columns: minmax(0, 1fr); }
  .formulaire > * { grid-column: 1 / -1; }
}