/* Chantier en ligne — feuille de style
   Palette : béton, encre de plan, bleu cordeau, jaune mètre ruban */

:root {
  --beton: #edefec;
  --blanc: #ffffff;
  --encre: #15243f;
  --encre-doux: #46536b;
  --cordeau: #2453c9;
  --cordeau-fonce: #1b3f9c;
  --plan: #16336f;
  --metre: #f3c316;
  --metre-clair: #ffd84a;
  --trait: #cdd2da;
  --titre: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  --texte: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --largeur: 1180px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--cordeau);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--cordeau-fonce);
}

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

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  line-height: 1.05;
}

h1,
h2 {
  font-family: var(--titre);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4.25rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem);
  font-weight: 600;
  max-width: 24ch;
}

h3 {
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.4em;
}

p {
  margin: 0 0 1em;
  max-width: 62ch;
}

.conteneur {
  width: min(100% - 2.5rem, var(--largeur));
  margin-inline: auto;
}

.section {
  padding-block: clamp(4rem, 2.5rem + 5vw, 7rem);
}

.chapo {
  font-size: 1.2rem;
  color: var(--encre-doux);
  max-width: 58ch;
}

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  background: var(--encre);
  color: var(--blanc);
  padding: 0.6rem 1rem;
  border-radius: 6px;
}

.lien-evitement:focus {
  top: 1rem;
  color: var(--blanc);
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.75rem 1.4rem;
  font-family: var(--texte);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bouton--jaune {
  background: var(--metre);
  border-color: var(--metre);
  color: var(--encre);
}

.bouton--jaune:hover {
  background: var(--metre-clair);
  border-color: var(--metre-clair);
  color: var(--encre);
}

.bouton--contour {
  background: transparent;
  border-color: var(--encre);
  color: var(--encre);
}

.bouton--contour:hover {
  background: var(--encre);
  color: var(--blanc);
}

.bouton--encre {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--blanc);
}

.bouton--encre:hover {
  background: var(--cordeau-fonce);
  border-color: var(--cordeau-fonce);
  color: var(--blanc);
}

.bouton--petit {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.98rem;
}

/* ---------- En-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--trait);
}

.entete__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 72px;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
}

.marque:hover {
  color: var(--encre);
}

.marque__icone {
  width: 22px;
  height: 30px;
  flex: none;
}

.nav {
  display: flex;
  gap: 1.9rem;
  margin-left: auto;
}

.nav a {
  color: var(--encre);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.nav a:hover {
  color: var(--cordeau);
  text-decoration: underline;
}

/* ---------- Accueil : panneau de chantier ---------- */

.hero {
  background: var(--beton);
  border-bottom: 4px solid var(--encre);
  overflow: hidden;
}

.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: end;
  padding-top: clamp(3.5rem, 2rem + 5vw, 6.5rem);
}

.hero__texte {
  padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem);
}

.hero h1 {
  max-width: 11.5em;
}

.hero__chapo {
  font-size: 1.25rem;
  color: var(--encre-doux);
  max-width: 44ch;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.hero__garanties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  font-weight: 500;
}

.hero__garanties li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.coche {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--cordeau);
}

.panneau {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.panneau__plaque {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--blanc);
  border: 4px solid var(--encre);
  border-radius: 4px;
  box-shadow: 8px 8px 0 rgba(21, 36, 63, 0.12);
}

.panneau__titre {
  margin: 0;
  max-width: none;
  padding: 0.7rem 2.5rem 0.6rem;
  background: var(--cordeau);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: clamp(1.7rem, 1.3rem + 1vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.panneau__lignes {
  margin: 0;
  padding: 0.35rem 1.5rem 1.1rem;
}

.panneau__ligne {
  display: grid;
  grid-template-columns: 8.75rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--trait);
  animation: poser 0.55s ease-out both;
  animation-delay: calc(var(--i, 0) * 140ms + 250ms);
}

.panneau__ligne:last-child {
  border-bottom: 0;
}

.panneau__ligne dt {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--encre-doux);
}

.panneau__ligne dd {
  margin: 0;
  font-family: var(--titre);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.15;
}

.vis {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #dfe4ec;
  box-shadow: inset 0 0 0 1px rgba(21, 36, 63, 0.35);
}

.vis::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 5px;
  height: 1px;
  background: rgba(21, 36, 63, 0.55);
  transform: rotate(-35deg);
}

.vis--hg { top: 9px; left: 9px; }
.vis--hd { top: 9px; right: 9px; }
.vis--bg { bottom: 9px; left: 9px; }
.vis--bd { bottom: 9px; right: 9px; }

.panneau__pieds {
  display: flex;
  justify-content: space-between;
  width: min(66%, 320px);
  height: clamp(64px, 3rem + 5vw, 120px);
}

.panneau__pieds span {
  width: 14px;
  background: linear-gradient(90deg, #8c94a3, #c3c9d3 45%, #8c94a3);
}

@keyframes poser {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Constat ---------- */

.constat__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.constat__point {
  border-top: 3px solid var(--encre);
  padding-top: 1.25rem;
}

.constat__point p {
  color: var(--encre-doux);
  margin: 0;
}

/* ---------- Plan annoté ---------- */

.plan {
  background-color: var(--plan);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
  color: var(--blanc);
}

.plan h2 {
  color: var(--blanc);
}

.plan .chapo {
  color: rgba(255, 255, 255, 0.82);
}

.plan__schema {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
}

.plan__note {
  margin: 2.5rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
}

.reperes {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.repere {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.85rem;
}

.repere h3 {
  font-family: var(--titre);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.1;
  margin: 0.1rem 0 0.3rem;
  color: var(--blanc);
}

.repere p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.lettre {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--metre);
  color: var(--encre);
  font-family: var(--titre);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 1000px) {
  .plan__schema {
    column-gap: 4.5rem;
    min-height: 840px;
  }

  .repere {
    position: absolute;
    top: var(--y);
    width: 100%;
    align-items: start;
  }

  .reperes--gauche .repere {
    right: 0;
    grid-template-columns: minmax(0, 1fr) 30px;
    text-align: right;
  }

  .reperes--gauche .repere .lettre {
    order: 2;
  }

  .reperes--gauche .repere p {
    margin-left: auto;
  }

  .reperes--droite .repere {
    left: 0;
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .repere::after {
    content: "";
    position: absolute;
    top: 14px;
    width: calc(4.5rem - 27px);
    border-top: 2px dashed rgba(255, 255, 255, 0.6);
  }

  .reperes--gauche .repere::after {
    left: calc(100% + 6px);
  }

  .reperes--droite .repere::after {
    right: calc(100% + 6px);
  }
}

/* Téléphone d'exemple */

.telephone {
  position: relative;
  width: 300px;
  margin: 0 auto;
  justify-self: center;
}

.telephone__cadre {
  border: 10px solid #0d1830;
  border-radius: 38px;
  background: #0d1830;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.ecran {
  overflow: hidden;
  border-radius: 28px;
  background: #ffffff;
  color: #1d2a40;
  font-family: var(--texte);
  font-size: 12px;
  line-height: 1.35;
}

.ecran__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 10px;
}

.ecran__logo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 12.5px;
}

.ecran__logo span {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #3b4a63;
}

.ecran__menu {
  display: grid;
  gap: 3px;
}

.ecran__menu i {
  display: block;
  width: 16px;
  height: 2px;
  background: #1d2a40;
}

.ecran__visuel {
  position: relative;
  height: 128px;
}

.ecran__visuel svg {
  width: 100%;
  height: 100%;
}

.ecran__accroche {
  padding: 12px 16px 14px;
}

.ecran__titre {
  margin: 0 0 2px;
  font-family: var(--titre);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.05;
  color: #1d2a40;
}

.ecran__sous-titre {
  margin: 0 0 10px;
  font-size: 11.5px;
  color: #5d6a80;
}

.ecran__boutons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.ecran__boutons span {
  display: grid;
  place-items: center;
  height: 32px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
}

.ecran__appel {
  background: #1d2a40;
  color: #ffffff;
}

.ecran__devis {
  background: var(--metre);
  color: #1d2a40;
}

.ecran__bloc {
  padding: 12px 16px;
  border-top: 1px solid #e6e9ee;
}

.ecran__bloc-titre {
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 600;
}

.ecran__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}

.ecran__liste li {
  display: flex;
  justify-content: space-between;
  padding: 6px 9px;
  border-radius: 5px;
  background: #f1f3f6;
  font-size: 11.5px;
}

.ecran__liste li::after {
  content: "›";
  color: #8a95a8;
}

.ecran__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.ecran__photo {
  position: relative;
  height: 62px;
  border-radius: 5px;
  overflow: hidden;
}

.ecran__photo svg {
  width: 100%;
  height: 100%;
}

.ecran__photo em {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.92);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
}

.ecran__avis-liste {
  display: grid;
  gap: 10px;
}

.ecran__avis {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ecran__etoiles {
  color: #e8b400;
  font-size: 13px;
  letter-spacing: 1px;
}

.ecran__lignes {
  flex: 1;
  display: grid;
  gap: 4px;
}

.ecran__lignes i,
.ecran__champ {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: #e3e7ed;
}

.ecran__lignes i:last-child {
  width: 65%;
}

.ecran__formulaire {
  display: grid;
  gap: 6px;
}

.ecran__champ {
  height: 24px;
  border-radius: 5px;
  background: #ffffff;
  border: 1px solid #d5dbe4;
}

.ecran__envoyer {
  display: grid;
  place-items: center;
  height: 28px;
  border-radius: 6px;
  background: var(--metre);
  font-size: 11.5px;
  font-weight: 600;
}

.ecran__bas {
  height: 14px;
}

.telephone .lettre {
  position: absolute;
  box-shadow: 0 0 0 3px var(--plan);
}

.telephone .lettre--gauche {
  left: -15px;
}

.telephone .lettre--droite {
  right: -15px;
}

/* ---------- Services ---------- */

.services {
  background: var(--beton);
}

.services__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem 2.75rem;
  margin-top: 3rem;
}

.service {
  border-top: 2px solid var(--encre);
  padding-top: 1.4rem;
}

.service svg {
  width: 34px;
  height: 34px;
  margin-bottom: 1rem;
  color: var(--cordeau);
}

.service p {
  margin: 0;
  color: var(--encre-doux);
}

.metiers {
  margin-top: clamp(3.5rem, 2.5rem + 3vw, 5rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--trait);
}

.metiers__titre {
  font-family: var(--titre);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 1.25rem;
}

.metiers__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.metiers__liste li {
  padding: 0.4rem 0.95rem;
  border: 1.5px solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  font-size: 1rem;
  font-weight: 500;
}

.metiers p {
  margin: 0;
  color: var(--encre-doux);
}

/* ---------- Méthode ---------- */

.methode__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: start;
  margin-top: 3rem;
}

.etapes {
  counter-reset: etape;
  margin: 0;
  padding: 0;
  list-style: none;
}

.etape {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 1.25rem;
  padding-bottom: 2.25rem;
}

.etape::before {
  counter-increment: etape;
  content: counter(etape);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--cordeau);
  border-radius: 50%;
  background: var(--blanc);
  color: var(--cordeau);
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 700;
}

.etape::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 52px;
  bottom: 0;
  border-left: 2px dashed var(--cordeau);
}

.etape:last-child {
  padding-bottom: 0;
}

.etape:last-child::after {
  display: none;
}

.etape h3 {
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  margin: 0.55rem 0 0.35rem;
}

.etape p {
  margin: 0;
  color: var(--encre-doux);
}

.engagements {
  position: sticky;
  top: 104px;
  padding: 2rem 2rem 2.25rem;
  border-radius: 8px;
  background: var(--encre);
  color: var(--blanc);
}

.engagements h3 {
  font-family: var(--titre);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 1.25rem;
}

.engagements ul {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.engagements li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 0.75rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

.engagements li strong {
  color: var(--blanc);
}

.engagements .coche {
  margin-top: 4px;
  color: var(--metre);
}

/* ---------- Questions ---------- */

.questions {
  background: var(--beton);
}

.questions__liste {
  max-width: 820px;
  margin-top: 2.5rem;
}

.question {
  border-top: 1.5px solid var(--encre);
}

.question:last-child {
  border-bottom: 1.5px solid var(--encre);
}

.question summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.15rem 0;
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.question summary::-webkit-details-marker {
  display: none;
}

.question summary::after {
  content: "+";
  flex: none;
  font-family: var(--titre);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--cordeau);
}

.question[open] summary::after {
  content: "−";
}

.question summary:hover {
  color: var(--cordeau);
}

.question p {
  margin: 0;
  padding: 0 0 1.4rem;
  color: var(--encre-doux);
}

/* ---------- Contact ---------- */

.contact {
  background: var(--encre);
  color: var(--blanc);
}

.contact__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  align-items: start;
}

.contact h2 {
  color: var(--blanc);
}

.contact .chapo {
  color: rgba(255, 255, 255, 0.82);
}

.contact__direct {
  display: grid;
  gap: 0.9rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.contact__direct a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--blanc);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}

.contact__direct a:hover {
  color: var(--metre);
  text-decoration: underline;
}

.contact__direct svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--metre);
}

.contact__direct-libelle {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}

.formulaire {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border-radius: 8px;
  background: var(--blanc);
  color: var(--encre);
}

.formulaire__alerte {
  grid-column: 1 / -1;
  margin: 0;
  max-width: none;
  padding: 0.85rem 1rem;
  border-left: 4px solid #c4321f;
  border-radius: 4px;
  background: #fdecea;
  color: #7a1e12;
  font-size: 1rem;
  font-weight: 500;
}

.champ {
  display: grid;
  gap: 0.4rem;
}

.champ--large {
  grid-column: 1 / -1;
}

.champ label {
  font-size: 0.98rem;
  font-weight: 600;
}

.champ .facultatif {
  font-weight: 400;
  color: var(--encre-doux);
}

.champ input,
.champ textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid #aeb6c4;
  border-radius: 6px;
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-size: 1rem;
}

.champ textarea {
  min-height: 120px;
  resize: vertical;
}

.champ input:focus,
.champ textarea:focus {
  border-color: var(--cordeau);
  outline: 3px solid rgba(36, 83, 201, 0.25);
  outline-offset: 0;
}

.case {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--encre-doux);
}

.case input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--cordeau);
}

.formulaire .bouton {
  grid-column: 1 / -1;
  justify-self: start;
}

.insecable {
  white-space: nowrap;
}

.pot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Pied de page ---------- */

.pied {
  padding-block: 2.5rem;
  background: var(--beton);
  font-size: 0.98rem;
  color: var(--encre-doux);
}

.pied__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.pied .marque {
  font-size: 1.35rem;
}

.pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pied__liens a {
  color: var(--encre);
}

.pied p {
  margin: 0;
}

/* ---------- Barre d'action mobile ---------- */

.barre-mobile {
  display: none;
}

/* ---------- Pages simples (mentions, confidentialité, merci) ---------- */

.page-simple {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.page-simple .conteneur {
  max-width: 780px;
}

.page-simple h1 {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  max-width: none;
}

.page-simple h2 {
  font-size: 1.75rem;
  margin-top: 2.5rem;
  max-width: none;
}

.page-simple p,
.page-simple li {
  color: var(--encre-doux);
}

.page-simple ul {
  padding-left: 1.2rem;
}

.page-simple strong {
  color: var(--encre);
}

.merci {
  min-height: 60vh;
  display: grid;
  align-items: center;
  background: var(--beton);
  border-bottom: 4px solid var(--encre);
}

.merci .bouton {
  margin-top: 1rem;
}

/* ---------- Adaptations écrans ---------- */

@media (max-width: 999px) {
  .plan__schema {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .telephone {
    order: -1;
  }

  .reperes {
    display: grid;
    gap: 1.5rem;
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
  }

  .reperes--droite {
    margin-top: -1rem;
  }

  .services__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .nav {
    display: none;
  }

  .entete .bouton {
    margin-left: auto;
  }

  .hero__grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .hero__texte {
    padding-bottom: 1.5rem;
  }

  .constat__grille,
  .methode__grille,
  .contact__grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .engagements {
    position: static;
  }
}

@media (max-width: 700px) {
  body {
    padding-bottom: 76px;
  }

  .conteneur {
    width: min(100% - 2rem, var(--largeur));
  }

  .entete__inner {
    min-height: 64px;
    gap: 1rem;
  }

  .marque {
    font-size: 1.4rem;
  }

  .entete .bouton {
    display: none;
  }

  .services__liste {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }

  .panneau__lignes {
    padding-inline: 1.1rem;
  }

  .panneau__ligne {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
    padding: 0.7rem 0;
  }

  .formulaire {
    grid-template-columns: minmax(0, 1fr);
  }

  .formulaire .bouton {
    justify-self: stretch;
  }

  .hero__actions .bouton {
    flex: 1 1 100%;
  }

  .barre-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--trait);
  }

  .barre-mobile .bouton {
    min-height: 48px;
    padding-inline: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}