/* ============================================================
   TMATH BÂTIMENT — Feuille de style du site
   Concept directeur : la verticale ascendante (fil continu,
   pointe dorée en tête, tracé de bas en haut).
   Fichier unique partagé par toutes les pages.
   ============================================================ */

/* --- 1. Polices auto-hébergées -----------------------------
   Aucune requête vers un serveur tiers : les fichiers .woff2
   sont servis depuis /assets/fonts/ (voir LISEZ-MOI.txt).
   font-display:swap affiche immédiatement la police de repli
   puis substitue, sans décalage de mise en page perceptible. */

@font-face{
  font-family:"Inter";
  src:url("fonts/inter-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("fonts/cormorant-garamond-400-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}

/* --- 2. Jetons de design ----------------------------------- */
:root{
  /* Palette officielle (Manuel d'identité visuelle) */
  --creme:        #FAF9F6;
  --creme-fonce:  #F1EFE8;
  --anthracite:   #0A0A0A;
  --encre:        #111111;
  --or:           #B98A2E;
  --or-clair:     #D4AF5A;
  --gris:         #6B6A63;
  --gris-clair:   #9A988E;
  --filet:        rgba(17,17,17,.14);
  --filet-or:     rgba(185,138,46,.34);
  --filet-clair:  rgba(241,239,232,.16);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", Helvetica, Arial, sans-serif;

  --gouttiere: 2rem;
  --largeur:   1240px;
  --hauteur-entete: 84px;
}

*,*::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(--creme);
  color:var(--encre);
  font-family:var(--sans);
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; }

:focus-visible{ outline:2px solid var(--or); outline-offset:3px; }

.saut-contenu{
  position:absolute; left:-9999px; top:0;
  background:var(--anthracite); color:var(--creme);
  padding:.75rem 1.25rem; z-index:200;
}
.saut-contenu:focus{ left:.5rem; top:.5rem; }

/* --- 3. Structures communes -------------------------------- */
.conteneur{
  width:100%; max-width:var(--largeur);
  margin-inline:auto; padding-inline:var(--gouttiere);
}

.section{ padding-block:clamp(5rem,10vw,8.5rem); }
.section--sombre{ background:var(--anthracite); color:var(--creme-fonce); }
.section--nuance{ background:var(--creme-fonce); }
.section--serre{ padding-block:clamp(3.5rem,7vw,5.5rem); }

.entete-section{
  display:grid; grid-template-columns:auto 1fr; gap:1.5rem;
  align-items:start; margin-bottom:clamp(2.5rem,5vw,4rem);
}
.entete-section__index{
  font-size:.75rem; font-weight:500; letter-spacing:.16em;
  color:var(--or); padding-top:.9rem; font-variant-numeric:tabular-nums;
}
.entete-section h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.15; letter-spacing:-.01em; margin:0 0 .6rem;
}
.entete-section p{ margin:0; max-width:56ch; color:var(--gris); font-size:1.0625rem; }
.section--sombre .entete-section p{ color:var(--gris-clair); }

/* --- 4. Marque et fil à plomb ------------------------------ */
.marque{ display:flex; align-items:center; gap:.85rem; text-decoration:none; color:inherit; }
.marque__signe{ height:38px; width:34px; flex:none; }
.marque__mot{ display:flex; flex-direction:column; line-height:1; }
.marque__nom{ font-family:var(--serif); font-size:1.6rem; font-weight:500; letter-spacing:.02em; }
.marque__sous{ font-size:.62rem; font-weight:600; letter-spacing:.32em; color:var(--or); margin-top:.32rem; }

/* --- 5. En-tête -------------------------------------------- */
.entete{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--hauteur-entete);
  display:flex; align-items:center;
  background:rgba(250,249,246,0);
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease;
}
.entete--pose{
  background:rgba(250,249,246,.94);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--filet);
}
/* Pages intérieures : l'en-tête est posé dès le chargement */
.entete--fixe{
  position:sticky;
  background:rgba(250,249,246,.94);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--filet);
}
.entete .conteneur{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
@media (max-width:900px){
  .entete .conteneur{ gap:1rem; }
}

.navigation{ display:flex; align-items:center; gap:2.25rem; }
.navigation a{
  text-decoration:none; font-size:.875rem; color:var(--encre);
  position:relative; padding-block:.35rem;
}
.navigation a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--or); transition:width .3s ease;
}
.navigation a:hover::after,
.navigation a[aria-current="true"]::after,
.navigation a[aria-current="page"]::after{ width:100%; }

.entete__action{ display:flex; align-items:center; gap:1.5rem; }

.bascule{
  display:none; width:44px; height:44px; border:1px solid var(--filet);
  background:transparent; border-radius:2px; cursor:pointer;
  padding:0; align-items:center; justify-content:center;
}
.bascule span{ display:block; width:18px; height:1px; background:var(--encre); position:relative; transition:background .2s ease; }
.bascule span::before,.bascule span::after{
  content:""; position:absolute; left:0; width:18px; height:1px;
  background:var(--encre); transition:transform .28s ease;
}
.bascule span::before{ top:-6px; }
.bascule span::after{ top:6px; }
.bascule[aria-expanded="true"] span{ background:transparent; }
.bascule[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.bascule[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

.voile{
  position:fixed; inset:var(--hauteur-entete) 0 0 0; z-index:90;
  background:var(--creme); padding:2.5rem var(--gouttiere);
  display:flex; flex-direction:column; gap:.25rem;
  transform:translateY(-12px); opacity:0; visibility:hidden;
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.voile[data-ouvert="true"]{ transform:none; opacity:1; visibility:visible; }
.voile a{
  text-decoration:none; font-family:var(--serif); font-size:1.75rem;
  padding-block:.85rem; border-bottom:1px solid var(--filet);
}
.voile .bouton{ margin-top:2rem; }

/* --- 6. Boutons -------------------------------------------- */
.bouton{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.9375rem; font-weight:500;
  padding:.95rem 1.9rem; border-radius:2px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.bouton--plein{ background:var(--anthracite); color:var(--creme); }
.bouton--plein:hover{ background:var(--or); color:var(--anthracite); }
.bouton--filet{ background:transparent; color:var(--encre); border-color:var(--filet); }
.bouton--filet:hover{ border-color:var(--or); color:var(--or); }
.bouton--clair{ background:var(--creme); color:var(--anthracite); }
.bouton--clair:hover{ background:var(--or-clair); }
.bouton--compact{ padding:.7rem 1.35rem; font-size:.85rem; }
.bouton[disabled]{ opacity:.55; cursor:progress; }

/* --- 7. Héros (accueil) ------------------------------------ */
.heros{
  position:relative;
  padding-top:calc(var(--hauteur-entete) + clamp(3.5rem,9vw,7rem));
  padding-bottom:clamp(3rem,7vw,5.5rem);
  overflow:hidden;
}
.heros .conteneur{
  display:grid; grid-template-columns:minmax(0,1fr) 240px;
  gap:clamp(2rem,6vw,5rem); align-items:center;
}
.heros__etiquette{
  display:flex; align-items:center; gap:.9rem;
  font-size:.8125rem; color:var(--gris); margin:0 0 1.75rem;
}
.heros__etiquette::before{ content:""; width:34px; height:1px; background:var(--or); flex:none; }
.heros h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.75rem,6.4vw,4.75rem);
  line-height:1.06; letter-spacing:-.015em;
  margin:0 0 1.6rem; max-width:15ch;
}
.heros__texte{
  margin:0 0 2.75rem; max-width:56ch; color:var(--gris);
  font-size:clamp(1rem,1.4vw,1.125rem); line-height:1.7;
}
.heros__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

.confiance{
  display:flex; flex-wrap:wrap; align-items:center;
  margin:clamp(3rem,6vw,4.5rem) 0 0; padding:1.75rem 0 0;
  border-top:1px solid var(--filet); gap:0;
}
.confiance li{
  list-style:none;
  font-size:.8125rem; font-weight:500; letter-spacing:.04em; color:var(--encre);
  padding:.25rem 1.6rem; border-left:1px solid var(--filet-or);
}
.confiance li:first-child{ padding-left:0; border-left:0; }

/* Colonne verticale du fil à plomb */
.jalonnement{ position:relative; align-self:stretch; min-height:340px; padding-left:2.25rem; }
.jalonnement__fil{
  position:absolute; left:0; top:34px; bottom:0; width:1px;
  background:var(--filet-or);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform 1.1s cubic-bezier(.4,0,.15,1);
}
.charge .jalonnement__fil{ transform:scaleY(1); }
.jalonnement__masse{
  position:absolute; left:-10px; top:0; width:21px; height:34px;
  opacity:0; transition:opacity .5s ease .95s;
}
.charge .jalonnement__masse{ opacity:1; }
.jalonnement ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; justify-content:space-between;
  height:100%; min-height:340px;
}
.jalonnement li{
  position:relative; font-size:.75rem; letter-spacing:.06em; color:var(--gris);
  opacity:0; transform:translateX(-6px);
  transition:opacity .5s ease, transform .5s ease;
}
.charge .jalonnement li{ opacity:1; transform:none; }
.charge .jalonnement li:nth-child(1){ transition-delay:.35s; }
.charge .jalonnement li:nth-child(2){ transition-delay:.5s; }
.charge .jalonnement li:nth-child(3){ transition-delay:.65s; }
.charge .jalonnement li:nth-child(4){ transition-delay:.8s; }
.jalonnement li::before{
  content:""; position:absolute; left:-2.25rem; top:.7em;
  width:14px; height:1px; background:var(--or);
}
.jalonnement li span{ display:block; color:var(--encre); font-size:.9375rem; letter-spacing:0; margin-top:.15rem; }

@media (prefers-reduced-motion:reduce){
  .jalonnement__fil,.jalonnement__masse,.jalonnement li{ transition:none; transform:none; opacity:1; }
  .jalonnement__fil{ transform:scaleY(1); }
}

/* --- 8. Bandeau de page (pages intérieures) ---------------- */
.bandeau{
  padding-block:clamp(3.5rem,8vw,6rem) clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--filet);
}
.bandeau__intitule{
  display:flex; align-items:center; gap:.9rem;
  font-size:.8125rem; color:var(--gris); margin:0 0 1.5rem;
}
.bandeau__intitule::before{ content:""; width:34px; height:1px; background:var(--or); flex:none; }
.bandeau h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem,5.4vw,3.9rem);
  line-height:1.07; letter-spacing:-.015em; margin:0 0 1.4rem; max-width:18ch;
}
.bandeau__chapeau{ margin:0; max-width:62ch; color:var(--gris); font-size:clamp(1rem,1.3vw,1.125rem); line-height:1.7; }

/* --- 9. Méthode : étapes ----------------------------------- */
.etapes{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--filet-clair); }
.etape{ padding:2.25rem 1.75rem 2.5rem; border-right:1px solid var(--filet-clair); position:relative; }
.etape:last-child{ border-right:0; }
.etape__rang{
  font-size:.75rem; letter-spacing:.14em; color:var(--or-clair);
  font-variant-numeric:tabular-nums; display:block; margin-bottom:1.5rem;
}
.etape h3{ font-family:var(--serif); font-weight:400; font-size:1.4rem; margin:0 0 .75rem; color:var(--creme); }
.etape p{ margin:0; font-size:.9375rem; color:var(--gris-clair); line-height:1.6; }
.etape::after{
  content:""; position:absolute; top:-1px; left:0; height:1px; width:0;
  background:var(--or-clair); transition:width .7s ease;
}
.etapes[data-vue="true"] .etape::after{ width:100%; }
.etapes[data-vue="true"] .etape:nth-child(2)::after{ transition-delay:.15s; }
.etapes[data-vue="true"] .etape:nth-child(3)::after{ transition-delay:.3s; }
.etapes[data-vue="true"] .etape:nth-child(4)::after{ transition-delay:.45s; }

.note-legale{
  margin:3rem 0 0; padding-left:1.5rem;
  border-left:1px solid var(--filet-or);
  font-size:.875rem; color:var(--gris-clair); max-width:70ch;
}
.note-legale--clair{ color:var(--gris); }

/* --- 10. Prestations (aperçu accueil) ---------------------- */
.prestations{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.prestation{ padding:0 2.5rem; border-left:1px solid var(--filet); }
.prestation:first-child{ padding-left:0; border-left:0; }
.prestation:last-child{ padding-right:0; }
.prestation__chiffre{
  font-family:var(--serif); font-size:1.05rem; color:var(--or);
  letter-spacing:.1em; display:block; margin-bottom:1.1rem;
}
.prestation h3{ font-family:var(--serif); font-weight:400; font-size:1.55rem; margin:0 0 .85rem; line-height:1.2; }
.prestation p{ margin:0; color:var(--gris); font-size:.9375rem; }
/* Six prestations : deux rangées de trois. Le filet de gauche ne doit
   apparaître qu'entre colonnes, jamais en début de rangée. */
.prestations{ row-gap:clamp(2.5rem,5vw,3.5rem); }
.prestation:nth-child(3n+1){ padding-left:0; border-left:0; }
.prestation:nth-child(3n){ padding-right:0; }

/* --- 11. Fiche détaillée (page Prestations) ---------------- */
.fiche-lot{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  padding-block:clamp(3rem,6vw,4.5rem);
  border-top:1px solid var(--filet);
}
.fiche-lot:first-of-type{ border-top:0; padding-top:0; }
.fiche-lot__chiffre{
  font-family:var(--serif); font-size:1.05rem; color:var(--or);
  letter-spacing:.1em; display:block; margin-bottom:1rem;
}
.fiche-lot h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.8rem,3.2vw,2.5rem); line-height:1.14;
  margin:0 0 1.2rem; letter-spacing:-.01em;
}
.fiche-lot p{ margin:0 0 1.1rem; color:var(--gris); max-width:58ch; }
.fiche-lot__aside h3{
  font-size:.75rem; font-weight:600; letter-spacing:.12em;
  color:var(--or); margin:0 0 1.2rem;
}
.ouvrages{ list-style:none; margin:0 0 2rem; padding:0; }
.ouvrages li{
  position:relative; padding:.7rem 0 .7rem 1.6rem;
  border-bottom:1px solid var(--filet); font-size:.9375rem;
}
.ouvrages li::before{
  content:""; position:absolute; left:0; top:1.35em;
  width:9px; height:1px; background:var(--or);
}

/* --- 12. Déroulé vertical (page Méthode) ------------------- */
.deroule{ list-style:none; margin:0; padding:0; position:relative; }
.deroule::before{
  content:""; position:absolute; left:0; top:.6rem; bottom:3rem;
  width:1px; background:var(--filet-or);
}
.deroule > li{
  position:relative; padding:0 0 clamp(3rem,6vw,4.5rem) clamp(2.5rem,5vw,4rem);
}
.deroule > li:last-child{ padding-bottom:0; }
.deroule > li::before{
  content:""; position:absolute; left:0; top:.95rem;
  width:18px; height:1px; background:var(--or);
}
.deroule__rang{
  display:block; font-size:.75rem; letter-spacing:.14em;
  color:var(--or); margin-bottom:.7rem; font-variant-numeric:tabular-nums;
}
.deroule h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.15; margin:0 0 1rem;
}
.deroule p{ margin:0 0 1.1rem; color:var(--gris); max-width:62ch; }
.livrable{
  display:inline-flex; align-items:baseline; gap:.7rem;
  margin-top:.6rem; padding:.7rem 1.1rem;
  background:var(--creme-fonce); border-left:2px solid var(--or);
  font-size:.875rem;
}
.livrable strong{ font-weight:600; }
.livrable span{ color:var(--gris); }

/* --- 13. Garanties ----------------------------------------- */
.garanties{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--filet); }
.garantie{ background:var(--creme-fonce); padding:2.25rem 2rem; }
.garantie__duree{
  font-family:var(--serif); font-size:2.4rem; line-height:1;
  color:var(--or); display:block; margin-bottom:.85rem;
}
.garantie h3{ font-size:1rem; font-weight:600; margin:0 0 .5rem; letter-spacing:.01em; }
.garantie p{ margin:0; font-size:.875rem; color:var(--gris); }
.garantie__source{ display:block; margin-top:.9rem; font-size:.75rem; color:var(--gris-clair); }

/* --- 14. Obligations du maître d'ouvrage ------------------- */
.obligations{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--filet); }
.obligations li{ background:var(--creme); padding:1.75rem 1.85rem; }
.obligations h3{ font-size:.9375rem; font-weight:600; margin:0 0 .55rem; }
.obligations p{ margin:0; font-size:.875rem; color:var(--gris); }
.obligations em{ display:block; margin-top:.6rem; font-style:normal; font-size:.75rem; color:var(--or); }

/* --- 15. État vide (page Réalisations) --------------------- */
.attente{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.75rem,5vw,3.5rem); align-items:start;
  padding-block:clamp(3rem,7vw,5rem);
}
.attente__plomb{ width:34px; height:120px; opacity:.9; }
.attente h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.14; margin:0 0 1.2rem;
}
.attente p{ margin:0 0 1.1rem; color:var(--gris); max-width:62ch; }
.attente .bouton{ margin-top:1.25rem; }

.dossier{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--filet); margin-top:1rem; }
.dossier > div{ background:var(--creme); padding:1.75rem 1.85rem; }
.dossier h3{ font-size:.9375rem; font-weight:600; margin:0 0 .55rem; }
.dossier p{ margin:0; font-size:.875rem; color:var(--gris); }

/* --- 15 bis. Galerie de chantiers ---------------------------
   Grille fluide : une colonne sur mobile, deux à partir de
   560 px, trois à partir de 900 px. Les images conservent leur
   proportion et ne débordent jamais de leur colonne.          */
.galerie{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.25rem,3vw,2rem);
  margin:0;
  padding:0;
  list-style:none;
}
@media (min-width:560px){ .galerie{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .galerie{ grid-template-columns:repeat(3,1fr); } }

.galerie figure{ margin:0; }
.galerie img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  background:var(--creme-fonce);   /* réserve l'espace avant chargement */
  border-radius:2px;
}
.galerie figcaption{
  margin-top:.7rem;
  padding-top:.7rem;
  border-top:1px solid var(--filet-or);
  font-size:.8125rem;
  line-height:1.5;
  color:var(--gris);
}
.galerie figcaption strong{
  display:block;
  font-weight:600;
  font-size:.9375rem;
  color:var(--encre);
  margin-bottom:.2rem;
}
.galerie__mention{
  display:block;
  margin-top:.35rem;
  font-size:.75rem;
  color:var(--gris-clair);
}

/* --- 16. Contact et formulaire ----------------------------- */
.contact{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.contact h2{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,3.8vw,3rem); line-height:1.12; margin:0 0 1.25rem; }
.contact__intro{ color:var(--gris-clair); margin:0 0 2.5rem; max-width:46ch; }
.coordonnees{ list-style:none; margin:0; padding:0; display:grid; gap:1.35rem; }
.coordonnees dt{ font-size:.75rem; letter-spacing:.12em; color:var(--or-clair); margin-bottom:.3rem; }
.coordonnees dd{ margin:0; font-size:1.0625rem; }
.coordonnees a{ text-decoration:none; border-bottom:1px solid rgba(212,175,90,.4); }
.coordonnees a:hover{ border-bottom-color:var(--or-clair); }

.formulaire{ display:grid; gap:1.35rem; }
.formulaire p{ margin:0; }
.champ{ display:grid; gap:.5rem; }
.champ label{ font-size:.8125rem; letter-spacing:.04em; color:var(--gris-clair); }
.champ input,.champ select,.champ textarea{
  font-family:var(--sans); font-size:1rem; color:var(--creme-fonce);
  background:transparent; border:0; border-bottom:1px solid rgba(241,239,232,.24);
  padding:.7rem 0; border-radius:0; transition:border-color .25s ease;
}
.champ textarea{ resize:vertical; min-height:110px; }
.champ input:focus,.champ select:focus,.champ textarea:focus{ outline:none; border-bottom-color:var(--or-clair); }
.champ select option{ color:var(--encre); }
.champ--duo{ display:grid; grid-template-columns:1fr 1fr; gap:1.35rem; }
.consentement{ display:flex; gap:.75rem; align-items:flex-start; font-size:.8125rem; color:var(--gris-clair); line-height:1.55; }
.consentement input{ margin-top:.25rem; accent-color:var(--or); flex:none; }
.consentement a{ color:var(--or-clair); }
.formulaire__etat{ font-size:.8125rem; margin:0; min-height:1.2em; color:var(--or-clair); }

/* --- 17. Rappel de fin de page ----------------------------- */
.rappel{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; }
.rappel h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.15; margin:0; max-width:22ch; }

/* --- 18. Pied de page -------------------------------------- */
.pied{ background:var(--anthracite); color:var(--gris-clair); padding-block:4rem 2.5rem; }
.pied__haut{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.75rem; border-bottom:1px solid rgba(241,239,232,.14);
}
.pied .marque__nom{ color:var(--creme-fonce); }
.pied__devise{ font-family:var(--serif); font-style:italic; color:var(--or-clair); margin:1.25rem 0 0; }
.pied h4{ font-size:.75rem; letter-spacing:.14em; color:var(--creme-fonce); margin:0 0 1.1rem; font-weight:600; }
.pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; font-size:.875rem; }
.pied a{ text-decoration:none; }
.pied a:hover{ color:var(--or-clair); }
.pied__bas{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:1.75rem; font-size:.75rem; line-height:1.7;
}
.pied__mentions{ max-width:70ch; margin:0; }
.pied__liens{ display:flex; gap:1.5rem; }

/* --- 19. Pages juridiques ---------------------------------- */
.juridique{ max-width:78ch; margin-inline:auto; padding-block:clamp(3.5rem,8vw,6rem) clamp(4rem,9vw,7rem); }
.juridique__intitule{ display:flex; align-items:center; gap:.9rem; font-size:.8125rem; color:var(--gris); margin:0 0 1.5rem; }
.juridique__intitule::before{ content:""; width:34px; height:1px; background:var(--or); flex:none; }
.juridique h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(2.25rem,5vw,3.4rem);
  line-height:1.1; letter-spacing:-.015em; margin:0 0 1rem;
}
.juridique__maj{ color:var(--gris); font-size:.875rem; margin:0 0 3rem; padding-bottom:2rem; border-bottom:1px solid var(--filet); }
.juridique h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.6vw,1.95rem);
  line-height:1.2; margin:3.25rem 0 1.1rem; padding-top:1.75rem; border-top:1px solid var(--filet);
}
.juridique h2:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.juridique h3{ font-size:1rem; font-weight:600; margin:2rem 0 .6rem; }
.juridique p{ margin:0 0 1.1rem; }
.juridique ul{ margin:0 0 1.4rem; padding-left:1.1rem; }
.juridique li{ margin-bottom:.55rem; }
.juridique li::marker{ color:var(--or); }
.juridique a{ text-decoration:none; border-bottom:1px solid var(--filet-or); }
.juridique a:hover{ border-bottom-color:var(--or); color:var(--or); }

.fiche{ margin:0 0 1.4rem; display:grid; grid-template-columns:minmax(190px,auto) 1fr; gap:.15rem 2rem; }
.fiche dt{ color:var(--gris); font-size:.875rem; padding-block:.35rem; }
.fiche dd{ margin:0; padding-block:.35rem; }

.statut{ margin:0 0 2.5rem; padding:1.5rem 1.75rem; background:var(--creme-fonce); border-left:2px solid var(--or); font-size:.9375rem; }
.statut p{ margin:0; }
.source{ margin:1.5rem 0 0; padding-left:1.5rem; border-left:1px solid var(--filet-or); font-size:.875rem; color:var(--gris); }
.aremplir{ background:rgba(185,138,46,.1); padding:.05em .4em; border-bottom:1px solid var(--filet-or); font-size:.95em; }
.retour{ font-size:.875rem; text-decoration:none; border-bottom:1px solid var(--filet-or); padding-bottom:2px; }
.retour:hover{ border-bottom-color:var(--or); color:var(--or); }

.tableau{ width:100%; border-collapse:collapse; margin:0 0 1.6rem; font-size:.9375rem; }
.tableau caption{ text-align:left; color:var(--gris); font-size:.8125rem; padding-bottom:.75rem; }
.tableau th,.tableau td{ text-align:left; vertical-align:top; padding:.85rem 1rem .85rem 0; border-bottom:1px solid var(--filet); }
.tableau th{ font-weight:600; font-size:.8125rem; color:var(--gris); }
.tableau thead th{ border-bottom-color:var(--or); }
.tableau td:last-child,.tableau th:last-child{ padding-right:0; }

/* --- 20. Adaptations --------------------------------------- */
@media (max-width:1080px){
  .heros .conteneur{ grid-template-columns:1fr; }
  .jalonnement{ display:none; }
  .fiche-lot{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .navigation,.entete__action .bouton{ display:none; }
  .bascule{ display:flex; }
  .etapes{ grid-template-columns:1fr 1fr; }
  .etape{ border-bottom:1px solid var(--filet-clair); }
  .etape:nth-child(2){ border-right:0; }
  .prestations{ grid-template-columns:1fr; }
  .prestation{ border-left:0; border-top:1px solid var(--filet); padding:2.25rem 0 0; }
  .prestation:first-child{ border-top:0; padding-top:0; }
  .garanties,.obligations,.dossier{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .pied__haut{ grid-template-columns:1fr; }
  .attente{ grid-template-columns:1fr; }
  .attente__plomb{ height:80px; }
}
@media (max-width:700px){
  .fiche{ grid-template-columns:1fr; }
  .fiche dt{ padding-bottom:0; }
  .fiche dd{ padding-top:.1rem; padding-bottom:.9rem; }
  .tableau,.tableau tbody,.tableau tr,.tableau td{ display:block; width:100%; }
  .tableau thead{ display:none; }
  .tableau tr{ border-bottom:1px solid var(--or); padding-bottom:.75rem; margin-bottom:1rem; }
  .tableau td{ border-bottom:0; padding:.2rem 0; }
  .tableau td::before{ content:attr(data-intitule); display:block; font-size:.75rem; color:var(--gris); }
}
@media (max-width:600px){
  :root{ --gouttiere:1.5rem; }
  .etapes{ grid-template-columns:1fr; }
  .etape{ border-right:0; }
  .confiance li{ border-left:0; padding:.15rem 0; flex-basis:100%; }
  .champ--duo{ grid-template-columns:1fr; }
  .heros__actions .bouton{ width:100%; }
  .marque__nom{ font-size:1.35rem; }
}