/* Au Grenier – feuille de style commune
   Ordinateur d'abord ; en dessous de 900 px de large, mise en page téléphone (fin du fichier). */

@font-face { font-family: "Alata"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/polices/alata-400.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/polices/albert-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/polices/albert-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/polices/albert-sans-700.woff2") format("woff2"); }

:root {
  --orange: #F58F23;
  --orange-texte: #D97200;
  --orange-icone: #E07A0E;
  --orange-clair: #FFB264;
  --encre: #1E2124;
  --texte: #23272A;
  --gris-texte: #50565B;
  --gris-doux: #5B6166;
  --anthracite: #33383C;
  --bande: #5F666C;
  --clair: #E3E6E9;
  --trait: #C7CCD0;
  --filet: #E1E4E6;
  --titre: "Alata", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; background: #FFFFFF; color: var(--texte);
  font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.6; overflow-x: hidden;
}
html.bloque, html.bloque body { overflow: hidden; }
img { max-width: 100%; }
h1, h2, h3, p, figure, blockquote, dl, dd, address { margin: 0; }
address { font-style: normal; }
a { color: #A65400; }
a:hover { color: #7A3D00; }
/* Repère du clavier : foncé sur fond clair ou orange, blanc sur fond sombre */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, iframe:focus-visible {
  outline: 3px solid var(--focus, #1E2124); outline-offset: 2px;
}
.promo, .hero__bande, .section--avis, .pied { --focus: #FFFFFF; }
main:focus { outline: none; }
button { font: inherit; }
.mobile { display: none; }
[hidden] { display: none !important; }

.lecteur { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }

.aller-contenu {
  position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--encre); color: #FFFFFF;
  padding: 10px 16px; text-decoration: none;
}
.aller-contenu:focus { top: 8px; color: #FFFFFF; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--titre); font-size: 19px; line-height: 1.3; text-decoration: none;
  border-radius: 4px; cursor: pointer; border: none;
}
.bouton--orange { background: var(--orange); color: var(--encre); padding: 15px 28px; }
.bouton--orange:hover { background: #E8821A; color: var(--encre); }
.bouton--contour { color: #FFFFFF; padding: 13px 26px; border: 2px solid #FFFFFF; }
.bouton--contour:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.bouton--sombre { background: var(--anthracite); color: #FFFFFF; font-size: 17px; padding: 13px 22px; }
.bouton--sombre:hover { background: var(--encre); color: #FFFFFF; }
.bouton--contour-sombre { color: var(--encre); font-size: 17px; padding: 11px 22px; border: 2px solid var(--anthracite); }
.bouton--contour-sombre:hover { background: #FFFFFF; color: var(--encre); }
.bouton--large { width: 100%; }

.trait { width: 140px; height: 4px; background: var(--orange); flex: none; }

/* ---------- Bandeau promo ---------- */
.promo { background: var(--anthracite); color: #F1F2F3; padding: 10px 24px; font-size: 15px; line-height: 1.5; text-align: center; }
.promo strong { color: var(--orange-clair); font-weight: 600; }
.promo sup { line-height: 0; }
.promo__court { display: none; }

/* ---------- Bandeau orange ---------- */
.entete { background: var(--orange); }
.entete__in {
  max-width: 1152px; margin: 0 auto; padding: 9px 0 14px 25px;
  display: flex; align-items: stretch; gap: 0 24px;
}
.entete__logo { flex: none; display: block; line-height: 0; }
@media (max-width: 1200px) and (min-width: 900px) { .entete__in { padding-right: 20px; } }
@media (max-width: 1040px) and (min-width: 900px) {
  .entete__in { gap: 0 16px; }
  .entete__slogan { font-size: 25px; line-height: 34px; }
  .entete__droite .nav__lien { padding: 13px 12px; font-size: 20px; }
}
.entete__logo img { width: 290px; height: 145px; display: block; }
.entete__droite {
  flex: 1 1 520px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding-top: 28px; min-width: 0;
}
.entete__slogan {
  text-align: center; font-family: var(--titre); font-size: 28px; font-weight: 700; line-height: 39px;
  color: #1E2124;
}
.nav, .compact__nav { display: flex; flex-wrap: wrap; justify-content: center; font-family: var(--titre); font-size: 21px; font-weight: 600; }
.nav__lien { color: #020101; text-decoration: none; padding: 13px 20px; line-height: 20px; }
.nav__lien:hover { color: #020101; box-shadow: inset 0 -3px 0 rgba(63, 68, 75, .4); }
.nav__lien[aria-current="page"] { box-shadow: inset 0 -3px 0 #3F444B; }
.burger {
  display: none; width: 52px; height: 52px; padding: 0; border: none; background: transparent; color: var(--encre);
  align-items: center; justify-content: center; cursor: pointer; flex: none;
}

/* ---------- Menu compact (apparaît en descendant) ---------- */
.compact {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: var(--orange);
  box-shadow: 0 4px 16px rgba(30, 33, 36, .18);
  transform: translateY(-110%); transition: transform .25s ease; visibility: hidden;
}
.compact.est-visible { transform: none; visibility: visible; }
.compact__in {
  max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 72px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.compact__logo { justify-self: start; display: block; line-height: 0; }
.compact__logo img { width: 124px; height: 62px; display: block; }
.burger--compact { justify-self: end; }

/* ---------- Menu téléphone ---------- */
.menu-mobile { position: fixed; inset: 0; z-index: 50; background: #FFFFFF; overflow-y: auto; font-size: 16px; line-height: 1.5; }
.menu-mobile__entete { background: var(--orange); height: 84px; padding: 0 8px 0 4px; display: flex; align-items: center; justify-content: space-between; }
.menu-mobile__entete img { width: 164px; height: 82px; display: block; }
.menu-mobile__entete .burger { display: flex; }
.menu-mobile__nav { display: flex; flex-direction: column; padding-top: 8px; }
.menu-mobile__lien {
  color: var(--encre); text-decoration: none; font-family: var(--titre); font-size: 24px; font-weight: 600;
  padding: 16px 24px; border-bottom: 1px solid var(--filet); display: block;
}
.menu-mobile__lien:hover { color: var(--encre); background: #FFF7EE; }
.menu-mobile__lien[aria-current="page"] { background: #FFF1E3; }
.menu-mobile__bas { padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.menu-mobile__bas .bouton { height: 56px; font-size: 19px; }
.menu-mobile__slogan { margin-top: 6px; text-align: center; font-family: var(--titre); font-size: 16px; font-weight: 700; color: var(--gris-texte); }

/* ---------- Ouverture de l'accueil ---------- */
.hero__photo { display: block; width: 100%; height: 640px; object-fit: cover; object-position: center 45%; }
.hero__slogan { display: none; }
.hero__bande { background: var(--bande); color: #FFFFFF; }
.hero__in {
  max-width: 1040px; margin: 0 auto; padding: 56px 32px 60px; /* assez large pour le titre sur une ligne */
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
}
.hero__titre { font-family: var(--titre); font-weight: 400; font-size: 46px; line-height: 1.15; color: #FFFFFF; text-wrap: balance; }
.hero__texte { margin-top: 4px; font-size: 19px; color: #F1F2F3; max-width: 780px; }
@media (min-width: 900px) and (max-width: 979px) { .hero__titre { font-size: 42px; } } /* titre sur une ligne, même sur écran étroit */
.hero__note { display: flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; font-size: 15px; }
.hero__note:hover { color: #FFFFFF; text-decoration: underline; }
.etoiles { display: inline-flex; gap: 2px; }
.etoiles--google { color: #FBBC04; }
.hero__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ---------- Sections ---------- */
.section { background: #FFFFFF; }
.section--gris { background: var(--clair); }
.section__in { max-width: 1200px; margin: 0 auto; padding: 72px 32px; display: flex; flex-direction: column; gap: 52px; }
.section__in--etroit { max-width: 820px; gap: 40px; }
.section__tete { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.section__tete h2 { font-family: var(--titre); font-weight: 400; font-size: 36px; line-height: 1.2; color: var(--encre); }
.section__tete p { margin-top: 4px; font-size: 20px; color: var(--gris-texte); }

/* Flexibilité et simplicité : 3 colonnes (un chiffre clé + 2 avantages), puis le service client.
   Dans chaque colonne, le texte forme un bloc centré sous lequel tout s'aligne à gauche (colonne du milieu
   centrée sous le titre). Grille « 1fr auto 1fr » partagée par la case et les lignes de la liste (subgrid). */
.flex { display: flex; flex-direction: column; gap: 40px; }
.flex__chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 32px; }
/* 3 lignes partagées par les 3 colonnes (case, 1er avantage, 2e avantage) : tout reste aligné d'une colonne à l'autre */
.colonne { grid-row: span 3; display: grid; grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr); grid-template-rows: subgrid; }
.chiffre { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-bottom: 40px; padding: 28px 0;
  background: #F4F5F6; border-radius: 10px; }
.colonne__in { grid-column: 2; min-width: 0; }
/* case : texte centré sur toute la largeur ; liste : bloc centré (colonne « auto »), coches alignées à gauche dedans */
.chiffre .colonne__in { grid-column: 1 / -1; padding: 0 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.chiffre__gros { font-family: var(--titre); font-size: 32px; line-height: 1.15; color: var(--encre); }
.chiffre .chiffre__avant { font-family: "Albert Sans", system-ui, sans-serif; font-size: 18px; color: var(--gris-texte); }
.chiffre__petit { font-size: 17px; color: var(--gris-texte); }
.colonne__liste { grid-column: 1 / -1; grid-row: span 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; list-style: none; margin: 0; padding: 0; }
.colonne__liste li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--filet); font-size: 18px; }
.colonne__liste .colonne__in { display: flex; align-items: center; gap: 14px; }
.colonne__liste svg { flex: none; color: var(--orange-icone); stroke-width: 2.4; }
.flex__service { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 23px; line-height: 1.45; color: var(--gris-texte); text-align: center; }
.flex__service svg { flex: none; color: var(--orange-icone); }
.flex__service strong { color: var(--orange-texte); font-weight: 700; }
.flex__liste {
  grid-area: liste; align-self: start; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 0 40px;
}
.flex__liste li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--filet); font-size: 18px; }
.flex__liste svg { flex: none; color: var(--orange-icone); stroke-width: 2.4; }
@media (max-width: 1199px) and (min-width: 900px) {
  .flex__chiffres { column-gap: 20px; }
  .colonne { grid-template-columns: minmax(10px, 1fr) auto minmax(10px, 1fr); }
  .colonne__liste li { font-size: 17px; }
  .chiffre { padding: 24px 0; }
  .chiffre__gros { font-size: 28px; }
  .chiffre .chiffre__avant { display: block; }
  .chiffre__plus { display: none; }
}

/* Photo + liste (Sécurité, Qualité) */
.duo { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: center; }
.duo--inverse { flex-wrap: wrap-reverse; }
.duo__photo { flex: 1 1 460px; min-width: 0; width: 100%; height: 480px; object-fit: cover; display: block; }
.duo__photo--facade { object-position: 35% 60%; }
.points { flex: 1 1 420px; display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.point { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--trait); }
.point:last-child { border-bottom: 1px solid var(--trait); }
.point svg { flex: none; margin-top: 2px; color: var(--anthracite); stroke-width: 1.8; }
.point h3 { font-family: var(--titre); font-weight: 400; font-size: 20px; line-height: 1.6; color: var(--encre); }
.point p { margin-top: 2px; color: var(--gris-texte); }

/* Facilité d'accès */
.acces { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: center; }
.acces__texte { flex: 1 1 380px; display: flex; flex-direction: column; gap: 18px; }
.acces__texte p { font-size: 18px; color: #32373B; }
.acces__texte address { font-family: var(--titre); font-size: 20px; line-height: 1.4; color: var(--encre); }
.acces__boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.carte {
  flex: 1 1 520px; min-width: 0; height: 400px; background: #F7F8F9; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.carte__fond { position: absolute; inset: 0; }
.carte__bouton {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: transparent; border: none; cursor: pointer; padding: 12px;
}
.carte__bouton span { background: #FFFFFF; padding: 6px 12px; font-size: 14px; color: #32373B; border: 1px solid var(--trait); }
.carte__bouton:hover span { border-color: var(--anthracite); }
.carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Avis */
.section--avis { background: var(--bande); color: #FFFFFF; overflow: hidden; }
.section__in--avis { gap: 40px; }
.section--avis h2 { color: #FFFFFF; }
.avis__note { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.avis__note > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.avis__chiffre { font-family: var(--titre); font-size: 48px; line-height: 1; }
.avis__total { font-size: 15px; color: #F1F2F3; }
.carrousel { position: relative; }
.carrousel__piste {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.avis {
  flex: 0 0 360px; scroll-snap-align: start; background: #FFFFFF; color: var(--texte);
  padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 14px; min-height: 260px;
}
.avis__tete { display: flex; align-items: center; gap: 12px; }
.avis__initiale {
  flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--clair); color: var(--anthracite);
  display: flex; align-items: center; justify-content: center; font-family: var(--titre); font-size: 18px;
}
.avis__qui { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.avis__nom { display: block; font-weight: 600; color: var(--encre); }
.etoiles--avis { color: #F2A100; gap: 1px; }
.avis__texte { font-size: 16px; line-height: 1.55; color: #32373B; }
.avis__bas { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.avis__fleches { display: flex; gap: 12px; }
.fleche {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid #FFFFFF; background: transparent; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.fleche:hover { background: rgba(255, 255, 255, .14); }
.avis__lien, .avis__lien:hover { color: #FFFFFF; font-weight: 600; }

/* Formulaire « Une question ? » */
.section__tete p a { font-weight: 600; }
.section--gris a:not(.bouton) { color: #9A4E00; }
.section--gris a:not(.bouton):hover { color: #7A3D00; }
.formulaire { display: flex; flex-direction: column; gap: 18px; }
.formulaire__deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.champ { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; color: var(--encre); }
.champ input, .champ textarea {
  font: inherit; font-weight: 400; font-size: 17px; padding: 13px 14px; border: 1px solid #B4B9BD; border-radius: 4px;
  background: #FFFFFF; color: var(--texte); width: 100%;
}
.champ textarea { resize: vertical; }
.formulaire__bas { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6px; }
.bouton--envoyer { font-size: 18px; padding: 14px 34px; }
.formulaire__aide { font-size: 14px; color: var(--gris-doux); }
.formulaire__retour { font-size: 15px; font-weight: 600; color: var(--encre); text-align: center; }
.formulaire__retour--ok { color: #1D6B34; }
.formulaire__retour--erreur { color: #A61B1B; }
.formulaire__retour:focus { outline: none; }
/* Page Localisation : temps de trajet et accès */
.trajets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 980px; margin: 0 auto; width: 100%; }
.trajets__carte { background: var(--clair); padding: 28px 32px; display: flex; flex-direction: column; gap: 18px; }
.trajets__carte h3 { font-family: var(--titre); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--encre); }
.trajets__communes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.trajets__communes li { padding: 8px 0; border-bottom: 1px solid var(--trait); }
.trajets__route { display: flex; align-items: flex-start; gap: 12px; }
.trajets__route svg { flex: none; color: var(--orange-icone); margin-top: 3px; }
.trajets__acces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.trajets__acces li { display: flex; align-items: flex-start; gap: 12px; }
.trajets__acces svg { flex: none; color: var(--orange-icone); margin-top: 3px; }
@media (max-width: 899px) {
  .trajets { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .trajets__carte { padding: 22px 18px; }
  .trajets__carte h3 { font-size: 20px; }
}
/* Formulaire suspendu (mesure d'urgence de l'administration) */
.formulaire-suspendu { background: #FFFFFF; border: 1px solid var(--filet); padding: 32px 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.formulaire-suspendu svg { color: var(--orange-icone); }
.formulaire-suspendu__titre { font-size: 19px; font-weight: 700; color: var(--encre); }
.formulaire-suspendu a { color: var(--orange-texte); font-weight: 600; }
.champ__erreur { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: #A61B1B; }
[aria-invalid="true"]:not([type="radio"]) { border-color: #A61B1B !important; box-shadow: 0 0 0 1px #A61B1B; }
.piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.reglage .formulaire { max-width: 560px; width: 100%; margin: 0 auto; }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: #C9CDD0; font-size: 15px; }
.pied__in { max-width: 1200px; margin: 0 auto; padding: 64px 32px 112px; display: flex; flex-direction: column; gap: 40px; }
.pied__colonnes { display: flex; flex-wrap: wrap; gap: 36px 64px; }
.pied__marque { flex: 2 1 320px; display: flex; flex-direction: column; gap: 16px; }
.pied__marque p { max-width: 380px; }
.pied__logo { width: 180px; height: 90px; display: block; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.pied__bloc { flex: 1 1 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pied__titre { margin: 0 0 6px; font-family: var(--titre); font-weight: 400; font-size: 18px; color: #FFFFFF; }
.pied__contact, .pied__contact:hover { color: var(--orange-clair); }
.pied__lien, .pied__lien:hover { color: #C9CDD0; }
.pied__version { margin-top: -24px; font-size: 13px; color: var(--orange-clair); }
.pied__notes { border-top: 1px solid #3A3F43; padding-top: 20px; font-size: 13px; color: #A9AEB2; }

/* ---------- Boutons flottants et panneau contact ---------- */
.flottants {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none;
}
.flottants > * { pointer-events: auto; }
.flottants__boutons { display: flex; align-items: center; gap: 12px; }
.flottant {
  height: 56px; display: inline-flex; align-items: center; gap: 10px; border-radius: 28px;
  font-family: var(--titre); font-size: 18px; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.flottant--devis { background: var(--orange); color: var(--encre); padding: 0 24px; border: none; box-shadow: 0 8px 24px rgba(30, 33, 36, .25); }
.flottant--devis:hover { background: #E8821A; color: var(--encre); }
.flottant--contact {
  padding: 0 24px 0 20px; border: 1px solid var(--trait); background: #FFFFFF; color: var(--encre);
  box-shadow: 0 10px 28px rgba(30, 33, 36, .32);
}
.flottant--contact svg { color: var(--orange-icone); stroke-width: 2.2; }
.flottant--contact:hover { border-color: var(--anthracite); }
.flottant__mobile { display: none; }

.panneau {
  order: -1; width: 320px; background: #FFFFFF; color: var(--texte); box-shadow: 0 18px 50px rgba(30, 33, 36, .28);
  border-top: 5px solid var(--orange); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 14px;
}
.panneau__entete { display: flex; align-items: center; justify-content: space-between; }
.panneau__titre { font-family: var(--titre); font-size: 20px; color: var(--encre); }
.panneau__fermer {
  width: 44px; height: 44px; margin: -10px -10px -10px 0; border: none; background: transparent; color: var(--anthracite);
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.panneau__pc { display: flex; flex-direction: column; gap: 14px; }
.panneau__numero { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; margin: 4px 0 12px; }
.panneau__aide { font-size: 14px; color: var(--gris-doux); }
.panneau__tel { font-family: var(--titre); font-size: 30px; line-height: 1.2; color: var(--encre); letter-spacing: .01em; }
.panneau__mail { height: 48px; padding: 0 16px; font-family: inherit; font-weight: 600; font-size: 16px; gap: 8px; }
.panneau__adresse { font-size: 13px; color: var(--gris-doux); text-align: center; }
.panneau__mobile { display: none; }
.voile { display: none; }

@media (prefers-reduced-motion: reduce) {
  .compact { transition: none; }
  .carrousel__piste { scroll-behavior: auto; }
}

/* =====================================================================
   Téléphone et petite tablette (moins de 900 px de large)
   ===================================================================== */
@media (max-width: 899px) {
  body { font-size: 16px; line-height: 1.55; }
  html { scroll-padding-top: 76px; }
  .pc { display: none; }
  .mobile { display: inline-block; }

  .promo { padding: 8px 14px; font-size: 13px; }
  .promo__long { display: none; }
  .promo__court { display: block; }

  .entete__in { height: 84px; padding: 0 8px 0 4px; align-items: center; justify-content: space-between; }
  .entete__logo img { width: 164px; height: 82px; }
  .entete__droite { display: none; }
  .burger { display: flex; }

  .compact__in { height: 64px; padding: 0 12px; display: flex; justify-content: space-between; }
  .compact__logo img { width: 112px; height: 56px; }
  .compact__nav { display: none; }

  .bouton { font-size: 18px; }

  .hero__photo { height: 230px; }
  .hero__slogan {
    display: block; background: #363A3E; padding: 12px 20px; text-align: center;
    font-family: var(--titre); font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--orange);
  }
  .hero__in { padding: 26px 20px 30px; gap: 12px; }
  .hero__titre { font-size: 27px; }
  .trait { width: 110px; }
  .hero__texte { margin-top: 0; font-size: 15px; }
  .hero__note { font-size: 14px; gap: 8px; }
  .hero__note svg { width: 15px; height: 15px; }
  .hero__boutons { align-self: stretch; flex-direction: column; gap: 10px; margin-top: 6px; }
  .hero__boutons .bouton { height: 54px; padding: 0 16px; }

  .section__in { padding: 44px 20px; gap: 26px; }
  .section__tete { gap: 12px; }
  .section__tete h2 { font-size: 26px; }
  .section__tete p { margin-top: 2px; font-size: 17px; line-height: 1.45; }

  .flex { gap: 26px; }
  .flex__chiffres { display: flex; flex-direction: column; gap: 0; }
  .colonne, .colonne__liste { display: contents; }
  .chiffre { order: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 14px 18px; }
  .chiffre .colonne__in { display: contents; padding: 0; }
  .chiffre__gros { font-size: 24px; line-height: 1.2; white-space: nowrap; }
  .chiffre .chiffre__avant { display: none; }
  .chiffre__petit { font-size: 15px; text-align: right; }
  .colonne__liste li { display: block; padding: 7px 18px; font-size: 17px; }
  .colonne__liste .colonne__in { gap: 12px; }
  .colonne__liste svg { width: 20px; height: 20px; }
  .colonne__liste .o1 { order: 1; margin-top: 16px; } .colonne__liste .o2 { order: 2; } .colonne__liste .o3 { order: 3; }
  .colonne__liste .o4 { order: 4; } .colonne__liste .o5 { order: 5; } .colonne__liste .o6 { order: 6; }
  .flex__liste { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .flex__liste li { padding: 7px 0; font-size: 17px; gap: 12px; }
  .flex__liste svg { width: 20px; height: 20px; }
  .flex__service { display: block; font-size: 20px; line-height: 1.5; }
  .flex__service svg { display: inline-block; width: 20px; height: 20px; vertical-align: -3px; margin-right: 8px; }

  .duo, .duo--inverse { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 26px; }
  .duo--inverse { flex-direction: column-reverse; }
  .duo__photo { flex: none; height: 220px; }
  .points { flex: none; }
  .point { gap: 14px; padding: 16px 0; }
  .point svg { width: 26px; height: 26px; }
  .point h3 { font-size: 19px; }
  .point p { font-size: 15px; }

  .acces { flex-direction: column; align-items: stretch; gap: 26px; }
  .acces__texte { flex: none; gap: 26px; text-align: center; }
  .acces__texte p { font-size: 17px; }
  .acces__texte address { font-size: 19px; }
  .acces__boutons { flex-direction: column; gap: 10px; margin-top: 0; }
  .acces__boutons .bouton { height: 54px; font-size: 18px; padding: 0 16px; }
  .carte { flex: none; height: 200px; border: 1px solid var(--trait); }

  .section__in--avis { padding: 44px 0 40px; gap: 22px; }
  .section__in--avis .section__tete { padding: 0 20px; }
  .avis__note { gap: 12px; margin-top: 10px; }
  .avis__chiffre { font-size: 40px; }
  .avis__note .etoiles svg { width: 15px; height: 15px; }
  .avis__total { font-size: 14px; }
  .carrousel__piste { gap: 14px; padding: 0 20px; scroll-padding: 0 20px; }
  .avis { flex: 0 0 min(300px, 82vw); padding: 20px; gap: 12px; min-height: 0; }
  .avis__tete { gap: 10px; }
  .avis__initiale { width: 38px; height: 38px; font-size: 17px; }
  .etoiles--avis svg { width: 15px; height: 15px; }
  .avis__texte { font-size: 15px; line-height: 1.5; }
  .avis__bas { gap: 14px; }

  .formulaire { gap: 16px; }
  .champ input, .champ textarea { padding: 12px 14px; }
  .formulaire__bas { align-items: stretch; margin-top: 0; }
  .bouton--envoyer { height: 54px; padding: 0 16px; }
  .formulaire__aide { text-align: center; }

  .pied__in { padding: 40px 20px 104px; gap: 28px; }
  .pied__colonnes { flex-direction: column; gap: 28px; }
  .pied__marque { flex: none; gap: 12px; }
  .pied__logo { width: 160px; height: 80px; }
  .pied__bloc { flex: none; gap: 6px; }
  .pied__titre { margin-bottom: 4px; }
  .pied__contact { padding: 6px 0; }
  .pied__bloc:last-child { gap: 2px; }
  .pied__lien { padding: 8px 0; }
  .pied__notes { padding-top: 16px; font-size: 12px; line-height: 1.5; }

  .flottants { right: 14px; bottom: 22px; left: 14px; }
  .flottants__boutons { gap: 10px; }
  .flottant { height: 54px; font-size: 16px; gap: 8px; border-radius: 27px; }
  .flottant--devis { padding: 0 20px; box-shadow: 0 8px 22px rgba(30, 33, 36, .28); }
  .flottant--contact { padding: 0 18px 0 16px; box-shadow: 0 10px 26px rgba(30, 33, 36, .32); }
  .flottant--contact svg { width: 20px; height: 20px; }
  .flottant__pc { display: none; }
  .flottant__mobile { display: inline; }

  .panneau {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto; z-index: 2; box-shadow: none;
    padding: 18px 16px 28px; gap: 6px; max-height: 100vh; max-height: 100dvh; overflow-y: auto;
  }
  .panneau__entete { padding: 0 4px 6px; }
  .panneau__titre { font-size: 22px; }
  .panneau__fermer { margin: 0; }
  .panneau__pc { display: none; }
  .panneau__mobile { display: flex; flex-direction: column; gap: 6px; }
  .choix {
    display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 14px; color: var(--encre);
    text-decoration: none; border-bottom: 1px solid var(--filet);
  }
  .choix:hover { color: var(--encre); background: #F7F8F9; }
  .choix > span { display: flex; flex-direction: column; }
  .choix svg { flex: none; color: var(--anthracite); }
  .choix__titre { font-family: var(--titre); font-size: 18px; }
  .choix__sous { font-size: 14px; color: var(--gris-doux); }
  .choix:nth-last-child(2) { border-bottom: none; }
  .choix--principal, .choix--principal:hover { min-height: 64px; background: var(--anthracite); color: #FFFFFF; border-radius: 4px; border-bottom: none; }
  .choix--principal svg { color: #FFFFFF; }
  .choix--principal .choix__sous { color: #D9DCDE; }
  .panneau__lieu { padding: 8px 4px 0; font-size: 13px; color: var(--gris-doux); }
  .voile { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(30, 33, 36, .6); }
  .flottants.panneau-ouvert .flottants__boutons { visibility: hidden; }
}

/* Très petits téléphones : le bouton contact ne garde que son icône */
@media (max-width: 359px) {
  .flottants { right: 10px; left: 10px; bottom: 16px; }
  .flottant--devis { padding: 0 16px; font-size: 15px; }
  .flottant--contact { width: 54px; padding: 0; justify-content: center; }
  .flottant__mobile { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (min-width: 900px) {
  .menu-mobile { display: none !important; }
}

/* =====================================================================
   Pages intérieures (étape 2) : Contact, Localisation, Devis, pages légales
   ===================================================================== */
.mobile-bloc, .mobile-txt, .mobile-br { display: none; }

.page__in { max-width: 860px; margin: 0 auto; padding: 64px 32px 48px; display: flex; flex-direction: column; gap: 20px; }
.page__in > p { font-size: 18px; color: #32373B; }
.page__tete { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 10px; }
.page__tete h1 { font-family: var(--titre); font-weight: 400; font-size: 40px; line-height: 1.15; color: var(--encre); }
.demi-gras { font-weight: 600; } /* légèrement gras (Albert Sans 600) */
.page__sous { margin-top: 4px; font-size: 20px; color: #32373B; }

.bande { background: var(--bande); color: #FFFFFF; padding: 36px 32px; text-align: center; --focus: #FFFFFF; }
.bande p { max-width: 836px; margin: 0 auto; font-family: var(--titre); font-size: 25px; line-height: 1.45; }
.bande--devis { padding: 40px 32px; display: flex; flex-direction: column; gap: 10px; }
/* Phrase un peu plus petite, pour tenir sur une ligne sur ordinateur */
.bande--une-ligne p { max-width: none; font-size: 22px; }
@media (min-width: 900px) and (max-width: 1039px) { .bande--une-ligne p { font-size: 19px; } }
.bande--devis p { font-size: 24px; }

/* Contact */
.contact { flex-direction: row; gap: 72px; align-items: flex-start; }
.contact__coord { flex: 0 0 400px; display: flex; flex-direction: column; gap: 34px; }
.contact__titre { margin-bottom: -6px; font-family: var(--titre); font-weight: 400; font-size: 30px; color: var(--encre); }
.coord { display: flex; gap: 16px; align-items: flex-start; }
.coord > svg { flex: none; color: var(--orange-icone); }
.coord > div { display: flex; flex-direction: column; }
.coord__pile { gap: 10px; }
.coord__pile > div { display: flex; flex-direction: column; }
.coord__label { display: block; font-size: 15px; color: var(--gris-texte); }
.coord__tel { font-family: var(--titre); font-size: 30px; line-height: 1.2; color: var(--encre); text-decoration: none; }
.section--gris a.coord__tel, .section--gris a.coord__tel:hover { color: var(--encre); }
.coord__mail { font-family: var(--titre); font-size: 22px; color: var(--encre); overflow-wrap: anywhere; }
.coord__horaires { font-family: var(--titre); font-size: 20px; color: var(--encre); }
.coord__bouton { align-self: flex-start; padding: 12px 22px; }
.contact__devis { border-top: 1px solid var(--trait); padding: 30px 0 0 42px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.contact__devis span { font-size: 17px; color: #32373B; }
.contact__formulaire { flex: 1; min-width: 0; background: #FFFFFF; padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.contact__formtete h2 { font-family: var(--titre); font-weight: 400; font-size: 26px; line-height: 1.3; color: var(--encre); }
.contact__formulaire .formulaire__deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Localisation */
.loc { flex-direction: row; gap: 56px; align-items: stretch; }
.loc__infos { flex: 0 0 400px; display: flex; flex-direction: column; gap: 22px; }
.loc__adresse { display: flex; gap: 16px; align-items: flex-start; }
.loc__adresse > svg { flex: none; color: var(--orange-icone); }
.loc__lignes { display: block; font-family: var(--titre); font-size: 24px; line-height: 1.35; color: var(--encre); }
.loc__boutons { display: flex; flex-direction: column; gap: 10px; }
.loc__boutons .bouton { height: 54px; font-size: 18px; padding: 0 16px; }
.loc__photo { width: 100%; height: 250px; object-fit: cover; object-position: center 60%; display: block; margin-top: auto; }
.carte--grande { flex: 1; min-height: 560px; border: 1px solid var(--trait); }
/* Plan de situation (Bordeaux, Bassin, Le Barp) ; la carte Google ne se charge qu'au clic */
.carte--plan { background: #DDEFE3; align-self: flex-start; height: auto; min-height: 0; aspect-ratio: 729 / 544; }
@supports not (aspect-ratio: 1) { .carte--plan { height: 400px; } }
/* accueil : quand le plan passe sous le texte (écrans moyens), il ne s'étale pas sur toute la largeur */
@media (min-width: 900px) { .acces .carte--plan { max-width: 640px; margin: 0 auto; } }
.carte--plan .carte__bouton { position: absolute; left: 12px; top: 12px; flex-direction: row; gap: 6px; padding: 6px 12px;
  background: #FFFFFF; border: 1px solid var(--trait); border-radius: 24px; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); color: var(--encre); }
.carte--plan .carte__bouton span { background: none; border: 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--encre); }
.carte--plan .carte__bouton svg { color: var(--orange-icone); }
.carte--plan .carte__bouton:hover { border-color: var(--anthracite); }
.carte__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; display: block; }
.carte__source { position: absolute; left: 0; bottom: 0; padding: 1px 6px; background: rgba(255, 255, 255, .8); font-size: 10px; color: #444; }

/* Tableau des box */
.tailles { max-width: 1152px; margin: 0 auto; padding: 64px 32px 24px; }
.tailles__defile { overflow-x: auto; }
.tableau { border-collapse: collapse; font-size: 17px; line-height: 1.4; min-width: 900px; margin: 0 auto; color: var(--encre); }
.tableau caption { padding-bottom: 28px; }
.tableau__titre { display: flex; flex-direction: column; align-items: center; gap: 16px; font-family: var(--titre); font-size: 30px; line-height: 1.2; }
.tableau__titre::after { content: ""; width: 140px; height: 4px; background: var(--orange); }
.tableau th, .tableau td { padding: 10px 12px; border: 1px solid var(--trait); text-align: center; vertical-align: middle; }
.tableau__l1 { background: var(--bande); color: #FFFFFF; font-family: var(--titre); font-size: 18px; }
.tableau__l1 th { font-weight: 400; }
.c-logement { width: 200px; } .c-cat, .c-surface, .c-volume { width: 110px; } .c-largeur { width: 90px; }
.tableau__l2 { background: var(--clair); font-size: 15px; font-weight: 600; }
.tableau tbody .tableau__logement { text-align: left; font-weight: 600; background: #F4F5F6; }
.tableau__categorie { background: var(--orange); font-family: var(--titre); font-size: 22px; font-weight: 700; }
.tableau tr.debut > * { border-top: 2px solid var(--bande); }
.tableau tr.debut--leger > * { border-top: 2px solid var(--trait); }
.tableau td.oui { background: #FFF1E3; }
.tableau .case { display: inline-flex; vertical-align: middle; }
.tableau .case svg { width: 20px; height: 20px; color: #C25E00; stroke-width: 3; }
.tableau td.non .case { display: none; }

/* Formulaire de devis */
.devis { max-width: 860px; margin: 0 auto; padding: 40px 32px 80px; }
.devis__form { gap: 30px; }
.groupe { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.groupe legend { padding: 0; margin-bottom: 12px; font-family: var(--titre); font-size: 22px; color: var(--encre); }
.groupe--liste { gap: 8px; }
.groupe--liste legend { margin-bottom: 10px; font-size: 20px; }
.tuiles { display: flex; flex-wrap: wrap; gap: 10px; }
.tuile {
  flex: 1 1 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px;
  border: 1px solid #B4B9BD; border-radius: 4px; color: var(--encre); cursor: pointer; background: #FFFFFF;
}
.tuile:hover { border-color: var(--anthracite); }
.tuile:has(input:checked) { border: 2px solid var(--anthracite); background: #FFF1E3; padding: 11px 9px; }
.tuile:has(input:focus-visible) { outline: 3px solid var(--encre); outline-offset: 2px; }
.tuile__haut { display: flex; align-items: center; gap: 8px; font-family: var(--titre); font-size: 20px; }
.tuile__bas { font-size: 14px; color: var(--gris-texte); }
.choix-radio { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.choix-radio input, .tuile input { width: 18px; height: 18px; margin: 0; accent-color: var(--anthracite); flex: none; }
.devis__deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.devis__identite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 48px; }
.devis__civilite, .devis__type { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.devis__etiquette { font-weight: 600; font-size: 15px; color: var(--encre); }
.devis__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.devis__champs .champ input { padding: 12px 14px; }
.devis__envoi { display: flex; flex-direction: column; align-items: center; gap: 10px; border-top: 1px solid var(--filet); padding-top: 26px; }
.bouton--envoyer-devis { font-size: 20px; padding: 16px 40px; }

/* Pages légales */
.page--texte .page__in { padding: 64px 32px 80px; gap: 30px; }
.texte__corps { display: flex; flex-direction: column; gap: 12px; }
.texte__corps h2 { margin-top: 22px; font-family: var(--titre); font-weight: 400; font-size: 24px; line-height: 1.3; color: var(--encre); }
.texte__corps h3 { margin-top: 10px; font-family: var(--titre); font-weight: 400; font-size: 19px; color: var(--encre); }
.texte__corps p, .texte__corps li { font-size: 17px; line-height: 1.65; color: #32373B; }
.texte__corps ul { margin: 0; padding-left: 26px; display: flex; flex-direction: column; gap: 4px; }
.texte__corps ul ul { margin-top: 4px; }
.texte__corps strong { color: var(--encre); }
.texte__corps a { overflow-wrap: anywhere; }
.cg { max-width: 1200px; }
.cg__grille { display: flex; gap: 56px; align-items: flex-start; }
.cg__sommaire {
  flex: 0 0 280px; position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto;
  background: var(--clair); padding: 22px 24px; display: flex; flex-direction: column; gap: 2px; font-size: 16px;
}
.cg__sommaire-titre { font-family: var(--titre); font-size: 19px; color: var(--encre); margin-bottom: 8px; }
.cg__sommaire a { padding: 4px 0; color: #9A4E00; text-decoration: none; line-height: 1.35; }
.cg__sommaire a:hover { text-decoration: underline; color: #7A3D00; }
.cg .texte { flex: 1; min-width: 0; max-width: 780px; }
.cg__soustitre { max-width: 780px; margin-left: calc(280px + 56px); font-family: var(--titre); font-size: 20px; line-height: 1.4; color: var(--encre); }
.cg .page__tete { margin-bottom: 6px; }

@media (max-width: 899px) {
  .pc-bloc { display: none !important; }
  .mobile-bloc { display: block; }
  .mobile-txt { display: inline; }
  .mobile-br { display: inline; }

  .page__in { padding: 36px 20px 30px; gap: 26px; }
  .page__in > p { font-size: 16px; }
  .page__tete { gap: 12px; margin-bottom: 0; }
  .page__tete h1 { font-size: 28px; line-height: 1.2; }
  .page__sous { margin-top: 2px; font-size: 17px; line-height: 1.45; color: var(--gris-texte); }

  .bande { padding: 24px 22px; }
  .bande p { font-size: 20px; }
  .bande--devis { padding: 26px 22px; gap: 8px; }
  .bande--devis p { font-size: 19px; }

  .contact { flex-direction: column; gap: 26px; align-items: stretch; padding-bottom: 0; }
  .contact__coord { flex: none; gap: 26px; }
  .contact__titre { margin: 0; font-size: 22px; text-align: center; }
  .contact__boutons { display: flex; flex-direction: column; gap: 10px; }
  .grand-choix {
    min-height: 64px; border-radius: 4px; background: #FFFFFF; border: 2px solid var(--anthracite); color: var(--encre);
    text-decoration: none; display: flex; align-items: center; gap: 14px; padding: 8px 18px;
  }
  .grand-choix:hover { color: var(--encre); background: #F7F8F9; }
  .grand-choix > svg { flex: none; }
  .grand-choix > span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .grand-choix__titre { font-family: var(--titre); font-size: 18px; }
  .grand-choix__sous { font-size: 14px; color: var(--gris-texte); overflow-wrap: anywhere; }
  .grand-choix--principal, .grand-choix--principal:hover { background: var(--anthracite); border-color: var(--anthracite); color: #FFFFFF; }
  .grand-choix--principal .grand-choix__sous { color: #D9DCDE; }
  .section--gris a.grand-choix { color: var(--encre); }
  .section--gris a.grand-choix--principal { color: #FFFFFF; }
  .contact__devis { border-top: none; padding: 6px 0 0; align-items: stretch; text-align: center; gap: 26px; }
  .contact__devis span { font-size: 16px; }
  .contact__devis .bouton { height: 54px; padding: 0 16px; font-size: 18px; }
  .contact__formulaire { margin: 0 -20px; padding: 40px 20px 48px; gap: 26px; }
  .contact__formtete { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .contact__formtete h2 { font-size: 26px; line-height: 1.2; }
  .contact__formtete p { margin-top: 2px; font-size: 17px; line-height: 1.45; color: var(--gris-texte); }
  .contact__formulaire .formulaire__deux { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .loc { flex-direction: column; gap: 26px; padding-top: 0; }
  .loc__infos { flex: none; gap: 26px; }
  .loc__photo { order: -1; margin: 0 -20px 10px; width: calc(100% + 40px); max-width: none; height: 230px; }
  .loc__adresse { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .loc__lignes { font-size: 21px; }
  .carte--grande { flex: none; min-height: 0; height: 280px; }
  .carte--plan, .carte--plan.carte--grande { width: 100%; height: auto; align-self: stretch; }
  .carte--plan .carte__bouton { left: 8px; top: 8px; padding: 5px 10px; }
  .carte--plan .carte__bouton span { font-size: 12px; }

  .tailles { padding: 28px 10px; }
  .tailles__defile { overflow: visible; }
  .tableau { width: 100%; min-width: 0; table-layout: fixed; font-size: 12.5px; line-height: 1.25; }
  .tableau caption { padding: 0; }
  .tableau__titre { display: block; background: var(--bande); color: #FFFFFF; font-size: 18px; padding: 8px 6px; }
  .tableau__titre::after { display: none; }
  .tableau th, .tableau td { padding: 3px 2px; border-color: #B4B9BD; height: 22px; }
  .tableau__l1 { background: var(--clair); color: var(--encre); font-family: inherit; font-size: 12.5px; }
  .tableau__l1 th { font-weight: 600; }
  .c-logement { width: 21%; } .c-cat { width: 10%; } .c-surface, .c-volume { width: 12%; } .c-largeur { width: 11.25%; }
  .tableau__l2 { background: #F4F5F6; font-size: 11.5px; font-weight: 400; }
  .tableau__l2 .tableau__largeur { background: #FFF6D6; }
  .tableau tbody .tableau__logement { text-align: center; font-weight: 400; }
  .tableau__categorie { font-size: 15px; }
  .tableau td.oui { background: #DDF2DD; }
  .tableau .case { width: 13px; height: 13px; border: 1px solid #A9AEB2; background: #FFFFFF; align-items: center; justify-content: center; }
  .tableau td.oui .case { border-color: var(--bande); }
  .tableau td.non .case { display: inline-flex; }
  .tableau .case svg { width: 11px; height: 11px; color: var(--encre); stroke-width: 3.4; }

  .devis { padding: 36px 20px 48px; }
  .devis__form { gap: 26px; }
  .groupe { gap: 14px; }
  .groupe legend, .groupe--liste legend { margin-bottom: 10px; font-size: 20px; }
  .groupe--liste { gap: 0; }
  .tuiles { gap: 8px; }
  .tuile { flex: 1 1 96px; padding: 10px 6px; }
  .tuile:has(input:checked) { padding: 9px 5px; }
  .tuile__haut { font-size: 19px; gap: 6px; }
  .tuile__bas { font-size: 13px; }
  .choix-radio { min-height: 40px; }
  .devis__deux { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .devis__identite { flex-direction: column; align-items: flex-start; gap: 4px; }
  .devis__type { flex-direction: column; align-items: flex-start; gap: 0; }
  .devis__champs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .devis__vide { display: none; }
  .devis__envoi { align-items: stretch; text-align: center; }
  .bouton--envoyer-devis { height: 54px; padding: 0 16px; font-size: 18px; }

  .page--texte .page__in { padding: 36px 20px 48px; gap: 26px; }
  .texte__corps { gap: 10px; }
  .texte__corps h2 { margin-top: 18px; font-size: 20px; }
  .texte__corps h3 { font-size: 17px; }
  .texte__corps p, .texte__corps li { font-size: 15px; line-height: 1.6; }
  .texte__corps ul { padding-left: 20px; }
  .cg__grille { flex-direction: column; gap: 10px; }
  .cg__soustitre { margin-left: 0; font-size: 17px; text-align: center; }
  .cg__sommaire { position: static; max-height: none; flex: none; margin: 14px 0 8px; padding: 16px 18px; font-size: 15px; }
  .cg__sommaire-titre { font-size: 17px; margin-bottom: 6px; }
  .cg__sommaire a { padding: 7px 0; }
}

/* Page introuvable */
.liste-404 { list-style: none; margin: 0 auto; padding: 0; align-items: center; display: flex; flex-direction: column; gap: 12px; font-size: 18px; }
.liste-404 a { color: var(--encre); text-decoration-color: var(--orange); text-underline-offset: 4px; }
.liste-404 a:hover { text-decoration-thickness: 2px; }

/* Pages Particuliers / Professionnels / Questions fréquentes, et « Pour qui ? » de l'accueil */
.usages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.usages--quatre { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.usage { background: #FFFFFF; padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--orange); }
.usage svg { color: var(--anthracite); stroke-width: 1.8; }
.usage h3 { font-family: var(--titre); font-weight: 400; font-size: 22px; line-height: 1.3; color: var(--encre); }
.usage p { color: var(--gris-texte); }
.flex__liste--seule { grid-area: auto; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
.flex__liste--seule li { align-items: flex-start; }
.flex__liste--seule li svg { margin-top: 2px; }
.suite { font-size: 18px; color: #32373B; text-align: center; }
.suite__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pourqui { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; width: 100%; }
.pourqui__carte { background: #FFFFFF; padding: 28px; display: flex; flex-direction: column; gap: 10px; color: var(--gris-texte); text-decoration: none; border-top: 3px solid var(--orange); transition: box-shadow .2s; }
.pourqui__carte:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .1); color: var(--gris-texte); }
.pourqui__carte svg { color: var(--anthracite); stroke-width: 1.8; }
.pourqui__titre { font-family: var(--titre); font-size: 24px; color: var(--encre); }
.section--gris a.pourqui__carte, .section--gris a.pourqui__carte:hover { color: var(--gris-texte); }
/* Lien vers la FAQ, au-dessus du formulaire de l'accueil */
.faq-lien { display: flex; align-items: center; gap: 18px; background: #FFFFFF; padding: 20px 24px; border-left: 4px solid var(--orange);
  color: var(--gris-texte); text-decoration: none; transition: box-shadow .2s; }
.faq-lien:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .1); color: var(--gris-texte); }
.faq-lien svg { flex: none; color: var(--orange-icone); }
.faq-lien__texte { display: flex; flex-direction: column; gap: 2px; }
.faq-lien__titre { font-size: 18px; color: var(--encre); }
.faq-lien__action { font-weight: 600; color: #9A4E00; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
  .faq-lien { gap: 14px; padding: 16px 18px; }
  .faq-lien svg { width: 28px; height: 28px; }
  .faq-lien__titre { font-size: 16px; line-height: 1.45; }
}
.pourqui__lien { margin-top: 6px; font-weight: 600; color: #9A4E00; text-decoration: underline; text-underline-offset: 3px; }
.secteur { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.secteur h3 { font-family: var(--titre); font-weight: 400; font-size: 20px; color: var(--encre); }
.acces__texte .secteur p { font-size: 16px; color: var(--gris-texte); }
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--trait); }
.faq__question { border-bottom: 1px solid var(--trait); }
.faq__question summary { cursor: pointer; padding: 18px 36px 18px 0; font-family: var(--titre); font-size: 20px; line-height: 1.35; color: var(--encre); list-style: none; position: relative; }
.faq__question summary::-webkit-details-marker { display: none; }
.faq__question summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 26px; color: #9A4E00; }
.faq__question[open] summary::after { content: "–"; }
.faq__question p { padding: 0 0 20px; font-size: 17px; color: #32373B; }
@media (max-width: 600px) {
  .usage { padding: 22px 20px; }
  .faq__question summary { font-size: 18px; }
}