/* ═══════════════════════════════════════════════════════════════════════
   BMC Services — feuille de style du site.

   Identité reprise de la charte commerciale validée (offres de prix et
   dossier « exemple de rapport ») : marine #162640, orange #E27300,
   bordures #D1D5DB, fonds #F9FAFB. Ce n'est PAS le rouge #D82325 des
   pages de garde des rapports, qui appartient à un autre gabarit.

   Le ton visuel vise l'entreprise de terrain : dense, carré, lisible —
   pas la page de logiciel. Angles courts, filets nets, marine en aplat.

   100 % hors ligne : polices système, aucun appel à un serveur tiers.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --marine: #162640;
  --marine-2: #1F3757;      /* survol, dégradés */
  --marine-3: #0D1929;      /* pied de page, aplats profonds */
  --orange: #E27300;
  --orange-2: #C25F00;      /* survol */
  --orange-voile: #FFF3E4;  /* fond teinté */
  --encre: #16202E;
  --gris: #55637A;
  --gris-2: #78849A;
  --hair: #E4E8ED;
  --hair-2: #D1D5DB;
  --voile: #F9FAFB;
  --voile-2: #F1F4F8;
  --blanc: #FFFFFF;
  --vert: #157347;          /* disponibilité, confirmations */
  --rouge: #B42318;         /* erreurs de formulaire */
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, sans-serif;
  --rayon: 10px;
  --ombre: 0 1px 2px rgba(22, 38, 64, .06), 0 8px 24px rgba(22, 38, 64, .07);
  --ombre-forte: 0 2px 4px rgba(22, 38, 64, .08), 0 18px 46px rgba(22, 38, 64, .14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  font-family: var(--police);
  color: var(--encre);
  background: var(--blanc);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
::selection { background: var(--orange); color: #fff; }

a { color: var(--marine); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--hair-2); text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--orange); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { letter-spacing: -.022em; line-height: 1.14; font-weight: 700; }

.conteneur { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.etroit { max-width: 820px; margin-left: auto; margin-right: auto; }

section { padding: 96px 0; }
/* Vaut pour les <section id> comme pour un titre visé par une ancre
   (#sonde) : sans cela la cible se range sous la barre collante. */
section[id], h2[id], h3[id] { scroll-margin-top: 96px; }
.voile { background: var(--voile); border-top: 1px solid var(--hair);
         border-bottom: 1px solid var(--hair); }

/* Un titre de section : sur-titre orange, titre marine, chapeau gris. */
.sur-titre {
  color: var(--orange); font-weight: 700; font-size: 12.5px;
  letter-spacing: .13em; text-transform: uppercase; margin-bottom: 14px;
}
h2.titre {
  font-size: clamp(26px, 3.0vw, 34px);
  color: var(--marine); max-width: 24ch;
}
p.chapeau-section {
  color: var(--gris); margin-top: 18px; max-width: 64ch; font-size: 17.5px;
}
.centre { text-align: center; }
.centre h2.titre, .centre p.chapeau-section { margin-left: auto; margin-right: auto; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: var(--rayon);
  font-weight: 650; font-size: 15.5px; letter-spacing: -.01em;
  border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none !important; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .08s;
  font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-2); }
.btn-marine { background: var(--marine); color: #fff; }
.btn-marine:hover { background: var(--marine-2); }
.btn-ligne { background: #fff; color: var(--marine); border-color: var(--hair-2); }
.btn-ligne:hover { border-color: var(--marine); }
.btn-fantome { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-fantome:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-large { padding: 16px 30px; font-size: 16.5px; }

/* ── En-tête ─────────────────────────────────────────────────────────── */
/* La barre du haut reprend le marine du pied de page : les deux extremites
   du site se repondent. */
header.site {
  position: sticky; top: 0; z-index: 60;
  background: var(--marine-3);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.entete { display: flex; align-items: center; gap: 22px; min-height: 84px; }
/* Meme raison qu'au pied de page : le logo est dessine pour du blanc, et
   sa version blanchie soude les lettres a cette taille. On le pose donc
   sur une plaque. */
.entete .marque {
  flex: none; text-decoration: none !important;
  display: inline-flex; background: #fff;
  padding: 7px 13px; border-radius: 8px;
}
.entete .marque img { height: 32px; width: auto; }

nav.principal { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
nav.principal > a,
nav.principal .depliant > button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 10px; border-radius: 7px;
  color: rgba(255,255,255,.74); font-size: 15.5px; font-weight: 550;
  text-decoration: none !important; border: none; background: none;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
nav.principal > a:hover,
nav.principal .depliant > button:hover { color: #fff; background: rgba(255,255,255,.09); }
nav.principal > a[aria-current="page"] { color: #fff; font-weight: 650; }

/* Sous-menu « Recherche & diagnostic » : ouvert au survol sur grand écran,
   au clic au clavier et sur tablette. Les deux mécanismes coexistent parce
   qu'un survol seul est inatteignable sans souris. */
.depliant { position: relative; }
.depliant > button::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
.depliant[data-ouvert="1"] > button::after { transform: rotate(225deg); margin-top: 2px; }
.depliant-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
  min-width: 290px; padding: 8px;
  background: #fff; border: 1px solid var(--hair);
  border-radius: 12px; box-shadow: var(--ombre-forte);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .14s, transform .14s, visibility .14s;
}
.depliant:hover .depliant-menu,
.depliant[data-ouvert="1"] .depliant-menu {
  opacity: 1; visibility: visible; transform: none;
}
.depliant-menu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--marine); font-size: 14.5px; font-weight: 600;
  text-decoration: none !important;
}
.depliant-menu a span { display: block; color: var(--gris-2); font-size: 13px;
                        font-weight: 450; line-height: 1.4; margin-top: 1px; }
.depliant-menu a:hover { background: var(--voile-2); }

.entete-actions { display: flex; align-items: center; gap: 10px; flex: none; }
/* Les deux numeros tiennent empiles dans la hauteur de la barre : cote a
   cote, ils la feraient deborder des que le menu est complet. */
.entete-tel {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 700; white-space: nowrap;
}
.entete-tel svg { width: 19px; height: 19px; color: var(--orange); flex: none; }
.entete-tel .numeros { display: flex; flex-direction: column; line-height: 1.25; }
.entete-tel .numeros a {
  color: #fff; font-size: 15.5px; font-weight: 700;
  text-decoration: none !important;
}
.entete-tel .numeros a:hover { color: var(--orange); }
.entete-actions .btn { padding: 10px 17px; font-size: 14.5px; }

/* Bouton hamburger : masqué tant que la barre tient en largeur. */
.burger {
  display: none; flex: none; width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,.24); border-radius: 9px;
  background: none; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 18px; height: 1.8px; background: #fff;
               position: relative; transition: background .12s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.8px;
  background: #fff; transition: transform .16s, top .16s;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ── Bandeau d'appel fixe (téléphone uniquement) ─────────────────────── */
.barre-appel {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #fff; border-top: 1px solid var(--hair-2);
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  gap: 9px; box-shadow: 0 -4px 18px rgba(22,38,64,.09);
}
.barre-appel .btn { flex: 1; padding: 14px 10px; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { padding: 74px 0 84px; background:
        linear-gradient(180deg, var(--voile) 0%, #fff 78%); }
.hero-grille {
  display: grid; grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: center;
}
.hero .kicker {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--orange-voile); color: var(--orange-2);
  border-radius: 999px; padding: 6px 15px;
  font-size: 13px; font-weight: 650; letter-spacing: .01em; margin-bottom: 24px;
}
.hero .kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
}
.hero h1 {
  font-size: clamp(34px, 4.4vw, 51px); line-height: 1.05;
  letter-spacing: -.033em; color: var(--marine); max-width: 17ch;
}
/* La forme juridique accompagne le nom sans lui disputer la taille :
   en exposant, plus petite et en gris, comme sur un en-tête de courrier. */
.hero h1 .forme {
  /* L'espace avant le SPAN est une vraie espace dans le texte, pas une marge :
     sinon un lecteur d'ecran annonce « ServicesSRL » d'un seul tenant. */
  display: inline-block; margin-left: .06em;
  font-size: .34em; font-weight: 700; letter-spacing: .08em;
  color: var(--gris-2); vertical-align: .62em;
}

/* La photo du hero n'a pas de légende : le cadre reste donc fermé en bas. */
.hero-photo { border-radius: 12px; }
.hero-photo img { aspect-ratio: 4/3; }
.hero p.chapeau {
  margin-top: 22px; font-size: 18.5px; color: var(--gris); max-width: 52ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 18px; font-size: 14.5px; color: var(--gris-2); }

/* Repères de confiance sous le hero. */
.reperes {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--hair); border: 1px solid var(--hair);
  border-radius: var(--rayon); overflow: hidden; margin-top: 44px;
}
.reperes div { background: #fff; padding: 18px 20px; }
.reperes b { display: block; color: var(--marine); font-size: 19px; letter-spacing: -.02em; }
.reperes span { display: block; color: var(--gris-2); font-size: 13.5px; margin-top: 2px; }

/* ── Bandeau pratique : zone, horaires, délai ────────────────────────── */
/* En pleine largeur, cette bande sombre coupait la page en deux et se
   lisait comme un pied : un aplat d'un bord a l'autre ferme une page.
   Contenue dans une carte, elle redevient un bloc parmi les autres. */
.bandeau-pratique { padding: 0 28px; }
.bandeau-pratique .grille {
  max-width: 1224px; margin: 0 auto;
  background: var(--marine); color: #fff;
  border-radius: 14px; padding: 30px 34px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.bandeau-pratique .item { display: flex; gap: 14px; align-items: flex-start; }
.bandeau-pratique svg { width: 22px; height: 22px; flex: none; color: var(--orange); margin-top: 3px; }
.bandeau-pratique b { display: block; font-size: 15.5px; letter-spacing: -.01em; }
.bandeau-pratique span { display: block; color: rgba(255,255,255,.72); font-size: 14.5px;
                         line-height: 1.5; margin-top: 2px; }

/* ── Cartes ──────────────────────────────────────────────────────────── */
.grille-cartes { display: grid; gap: 22px; margin-top: 46px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.carte {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--hair); border-radius: 12px;
  padding: 28px; transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.carte { text-decoration: none !important; color: inherit; }
a.carte:hover { border-color: var(--hair-2); box-shadow: var(--ombre); transform: translateY(-2px); }
.carte .puce {
  width: 42px; height: 42px; border-radius: 10px; flex: none;
  background: var(--orange-voile); color: var(--orange-2);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.carte .puce svg { width: 22px; height: 22px; }
.carte h3 { font-size: 19.5px; color: var(--marine); }
.carte p { color: var(--gris); margin-top: 10px; font-size: 15.5px; flex: 1; }
.carte .lien-suite {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
  color: var(--orange-2); font-weight: 650; font-size: 14.5px;
}
.carte .lien-suite::after {
  content: ""; width: 6px; height: 6px; border-top: 1.7px solid currentColor;
  border-right: 1.7px solid currentColor; transform: rotate(45deg);
  transition: transform .15s;
}
a.carte:hover .lien-suite::after { transform: rotate(45deg) translate(2px, -2px); }

/* Liste à puces cochées. */
ul.coches { list-style: none; display: grid; gap: 11px; }
ul.coches li { position: relative; padding-left: 30px; color: var(--gris); }
ul.coches li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 16px; height: 9px; border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange); transform: rotate(-45deg);
}
ul.coches li b { color: var(--encre); font-weight: 650; }
/* Dans un bloc centre, chaque coche se reduit a la largeur de son texte :
   sans cela la puce resterait plaquee au bord gauche de la liste, loin
   de la phrase qu'elle annonce. */
.centre ul.coches { justify-items: center; }
.centre ul.coches li { text-align: left; }

/* Liste simple à tirets. */
ul.tirets { list-style: none; display: grid; gap: 9px; }
ul.tirets li { position: relative; padding-left: 20px; color: var(--gris); }
ul.tirets li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 10px; height: 2px; background: var(--hair-2);
}

/* ── Déroulé en étapes ───────────────────────────────────────────────── */
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 46px; }
.etape { position: relative; padding: 0 28px; border-left: 1px solid var(--hair); }
.etape:first-child { padding-left: 0; border-left: none; }
.etape .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--marine); color: #fff; font-weight: 700; font-size: 15px;
  margin-bottom: 16px;
}
.etape h3 { font-size: 18.5px; color: var(--marine); }
.etape p { color: var(--gris); margin-top: 9px; font-size: 15.5px; }

/* ── Section marine ──────────────────────────────────────────────────── */
.marine-plein {
  background: var(--marine);
  background-image: radial-gradient(1100px 460px at 78% -8%, var(--marine-2), transparent 62%);
  color: #fff;
}
.marine-plein h2.titre, .marine-plein h3 { color: #fff; }
.marine-plein .sur-titre { color: #FFB25E; }
.marine-plein p.chapeau-section, .marine-plein p { color: rgba(255,255,255,.76); }
.marine-plein ul.coches li { color: rgba(255,255,255,.82); }
.marine-plein ul.coches li b { color: #fff; }
.marine-plein a { color: #FFB25E; }

/* Trois pages du rapport, presentees en eventail. Les images sont
   decoratives : le document entier s'ouvre plus bas dans la page. */
.pile-pages { display: flex; align-items: center; justify-content: center; padding: 14px 0; }
.pile-pages img {
  position: relative; width: 38%; height: auto;
  border-radius: 3px; background: #fff;
  border: 1px solid var(--hair);
  box-shadow: 0 10px 26px rgba(22,38,64,.15);
}
.pile-pages img + img { margin-left: -7%; }
.pile-pages img:nth-child(1) { transform: rotate(-7deg) translateY(10px); z-index: 1; }
.pile-pages img:nth-child(2) { transform: scale(1.07); z-index: 3; }
.pile-pages img:nth-child(3) { transform: rotate(7deg) translateY(10px); z-index: 2; }

/* ── Avis clients ───────────────────────────────────── */
/* Les avis sont retapés en texte plutôt que publiés en image : un visuel
   de 1200 px ne se lit pas sur un téléphone, ne se sélectionne pas et
   n'est lu ni par un lecteur d'écran ni par un moteur de recherche. */
.avis .carte { padding: 30px 32px; }
.avis .etoiles { color: var(--orange); font-size: 17px; letter-spacing: 4px; }
.avis blockquote { margin: 16px 0 0; flex: 1; }
.avis blockquote p { margin: 0; color: var(--gris); font-size: 15.5px; }
.avis blockquote p + p { margin-top: 10px; }
.avis figcaption {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair);
  color: var(--gris-2); font-size: 14.5px;
}
.avis figcaption b { color: var(--marine); }

/* ── Galerie de réalisations ─────────────────────────────────────────── */
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 46px; }
.galerie figure {
  border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: #fff;
}
/* `height: auto` est indispensable : sans lui, l'attribut height="900"
   de la balise donne a l'image une hauteur definie, et `aspect-ratio`
   est alors ignore -- la vignette s'affiche a sa hauteur reelle. */
.galerie img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.galerie figcaption { padding: 13px 16px; font-size: 14.5px; }
.galerie figcaption b { display: block; color: var(--marine); }
/* La page Réalisations aligne onze photos : quatre colonnes plutôt que
   trois, pour des vignettes qui ne mangent pas tout l'écran. Les paliers
   sont en bas de feuille, après la règle qui passe .galerie à une colonne. */
.galerie.compacte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* ── Modèle de rapport : couverture cliquable + texte ────────────────── */
.modele {
  display: grid; grid-template-columns: 310px minmax(0, 1fr);
  gap: 52px; align-items: center;
}
.modele .couverture {
  display: block; border: 1px solid var(--hair-2); border-radius: 4px;
  overflow: hidden; box-shadow: var(--ombre-forte); background: #fff;
  transition: transform .18s, box-shadow .18s;
}
.modele .couverture:hover { transform: translateY(-3px); }
.modele .couverture img { width: 100%; height: auto; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq { max-width: 830px; margin: 46px auto 0; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none; cursor: pointer; padding: 21px 44px 21px 0; position: relative;
  font-weight: 650; font-size: 17px; color: var(--marine);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 29px;
  width: 9px; height: 9px; border-right: 2px solid var(--gris-2);
  border-bottom: 2px solid var(--gris-2); transform: rotate(45deg);
  transition: transform .18s;
}
.faq details[open] summary::after { transform: rotate(225deg); top: 33px; }
.faq .reponse { padding: 0 44px 22px 0; color: var(--gris); }
.faq .reponse p + p { margin-top: 12px; }

/* ── Encadrés ────────────────────────────────────────────────────────── */
.encadre {
  border: 1px solid var(--hair); border-left: 3px solid var(--orange);
  background: var(--voile); border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 22px 26px; margin: 30px 0;
}
.encadre b { color: var(--marine); }
.encadre p + p { margin-top: 10px; }

/* Appel à l'action de fin de page. */
/* La carte reprenait le fond teinté de sa section : on ne voyait qu'une
   grande plage grise. Fond blanc, et deux fois moins d'air — depuis que le
   paragraphe est parti, il n'y a plus qu'un titre et deux boutons. */
.cta-fin { padding: 56px 0; }
.bloc-cta {
  border: 1px solid var(--hair); border-radius: 14px; background: #fff;
  padding: 32px; text-align: center;
}
.bloc-cta h2 { font-size: clamp(25px, 3vw, 33px); color: var(--marine); }
.bloc-cta p { color: var(--gris); margin: 14px auto 0; max-width: 54ch; }
.bloc-cta .actions { display: flex; gap: 12px; justify-content: center;
                     flex-wrap: wrap; margin-top: 22px; }

/* ── Corps rédactionnel des pages métier ─────────────────────────────── */
.texte h2 { font-size: clamp(25px, 2.9vw, 32px); color: var(--marine); margin-top: 52px; }
.texte h3 { font-size: 20px; color: var(--marine); margin-top: 34px; }
.texte h2:first-child, .texte h3:first-child { margin-top: 0; }
.texte p { margin-top: 15px; color: var(--gris); }
.texte ul { margin-top: 16px; }
.texte > ul.coches li, .texte > ul.tirets li { font-size: 16.5px; }

/* Page de service : colonne rédactionnelle + encart qui suit le défilement.
   Les deux colonnes sont en minmax(0, …) : sans cela une longue URL ou un
   tableau élargit la piste au-delà de sa part et fait déborder la page. */
.grille-article {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .8fr);
  gap: 56px; align-items: start;
}
.encart-lateral { position: sticky; top: 96px; display: grid; gap: 18px; }
.encart-lateral .carte { padding: 24px; }
.encart-lateral .carte h3 { font-size: 17px; }
.encart-lateral .carte p, .encart-lateral .carte li { font-size: 15px; }
.encart-lateral ul.tirets { margin-top: 12px; }
.encart-lateral .carte.appel { background: var(--marine); border-color: var(--marine); }
.encart-lateral .carte.appel h3 { color: #fff; }
.encart-lateral .carte.appel p { color: rgba(255,255,255,.72); }
.encart-lateral .carte.appel .btn { margin-top: 16px; width: 100%; }

/* Fil d'Ariane. */
.fil { padding: 20px 0 0; font-size: 13.5px; color: var(--gris-2); }
.fil a { color: var(--gris-2); text-decoration: none !important; }
.fil a:hover { color: var(--marine); }
.fil span { margin: 0 7px; opacity: .6; }

/* En-tête de page intérieure. Sur fond teinté, fil d'Ariane compris :
   sans cette bande, le titre et le corps de la page flottaient dans le
   même blanc, séparés par un vide que rien ne justifiait. C'est le
   pendant du dégradé du hero, sur les pages intérieures. */
.haut-page, .entete-page { background: var(--voile); }
.entete-page {
  padding: 26px 0 46px;
  border-bottom: 1px solid var(--hair);
}
.entete-page h1 { font-size: clamp(29px, 3.4vw, 39px); color: var(--marine); max-width: 22ch; }
.entete-page p.chapeau {
  margin-top: 20px; font-size: 18.5px; color: var(--gris); max-width: 62ch;
}

/* ── En-tête de page illustré ────────────────────────────────────────────
   Chaque page de service porte une photo de chantier : c'est ce qui fait
   la différence entre un site de métier et une brochure. Le texte reste à
   gauche, la photo à droite — aucune surimpression, donc n'importe quelle
   photo convient sans souci de lisibilité. */
.entete-grille {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: 44px; align-items: center;
}
.illustration {
  border: 1px solid var(--hair); border-radius: 12px;
  overflow: hidden; background: var(--voile);
}
.illustration img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
/* Un document — un plan, par exemple — garde ses proportions : le recadrer
   en 4/3 lui couperait les bords, c'est-a-dire une partie du reseau. */
.illustration.document img { aspect-ratio: auto; object-fit: contain; background: #fff; }
.illustration.document { background: #fff; }
/* Le plan s'ouvre en grand au clic ; sans legende pour le dire, c'est le
   curseur qui porte l'information. */
.illustration.document a { display: block; cursor: zoom-in; }

/* ── Formulaire ──────────────────────────────────────────────────────── */
.grille-contact { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: start; }
.form-champs { display: grid; gap: 16px; }
.duo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: block; font-size: 14px; font-weight: 650; color: var(--marine); margin-bottom: 6px; }
label .facultatif { color: var(--gris-2); font-weight: 450; }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 16px;
  color: var(--encre); background: #fff;
  border: 1px solid var(--hair-2); border-radius: 9px;
  transition: border-color .14s, box-shadow .14s;
}
textarea { min-height: 148px; resize: vertical; line-height: 1.55; }
select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%),
                    linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(226,115,0,.15);
}
/* Piège à robots : invisible pour l'œil, atteignable pour un script. */
.pot-de-miel {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.mention-rgpd { font-size: 13.5px; color: var(--gris-2); margin-top: 4px; }
.retour-form { margin-top: 16px; padding: 13px 16px; border-radius: 9px; font-size: 15px; display: none; }
.retour-form.ok { display: block; background: #E8F5EE; color: var(--vert); border: 1px solid #BCE2CD; }
.retour-form.ko { display: block; background: #FDECEA; color: var(--rouge); border: 1px solid #F5C6C2; }

/* Carte de coordonnées à côté du formulaire. */
.carte-coord { background: var(--voile); border: 1px solid var(--hair);
               border-radius: 12px; padding: 30px; }
.carte-coord h3 { font-size: 18px; color: var(--marine); }
.carte-coord dl { margin-top: 20px; display: grid; gap: 18px; }
.carte-coord dt { font-size: 12.5px; font-weight: 700; color: var(--gris-2);
                  text-transform: uppercase; letter-spacing: .08em; }
.carte-coord dd { margin-top: 3px; color: var(--encre); }
.carte-coord dd a { font-weight: 650; text-decoration: none !important; }
.carte-coord dd.gros a { font-size: 21px; color: var(--marine); letter-spacing: -.02em; }

/* ── Pied de page ────────────────────────────────────────────────────── */
footer.site { background: var(--marine-3); color: rgba(255,255,255,.66); padding: 62px 0 30px; font-size: 15px; }
footer.site .grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
/* Le logo d'origine est dessine pour du blanc : son grand « S », sa fleche
   et son filet sont des aplats marine, qui disparaissent sur le fond du
   pied. Une version blanchie soude les lettres a petite taille. On pose
   donc le logo REEL sur une plaque blanche — fidele et toujours lisible. */
footer.site img.logo-pied {
  height: 34px; width: auto; display: block;
}
footer.site .plaque-logo {
  display: inline-block; background: #fff;
  padding: 11px 16px; border-radius: 8px; margin-bottom: 20px;
}
footer.site h4 { color: #fff; font-size: 13px; text-transform: uppercase;
                 letter-spacing: .1em; margin-bottom: 16px; font-weight: 700; }
footer.site ul { list-style: none; display: grid; gap: 10px; }
footer.site a { color: rgba(255,255,255,.66); text-decoration: none !important; }
footer.site a:hover { color: #fff; }
footer.site .bas {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 13.5px; color: rgba(255,255,255,.5);
}
footer.site .bas a { color: rgba(255,255,255,.5); }

/* ═══════════ Adaptation aux petits écrans ═══════════ */
/* Dernier palier avant le menu replié : on resserre l'espacement des entrées
   plutôt que d'en rapetisser le texte, qui est justement ce qu'on vient
   d'agrandir. */
@media (max-width: 1220px) {
  nav.principal > a, nav.principal .depliant > button { padding: 9px 7px; }
}

@media (max-width: 1040px) {
  .hero-grille { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero h1 { max-width: 20ch; }
  .grille-article { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .entete-grille { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* Empilee sous le texte, la photo prendrait toute la largeur du
     conteneur : pres de 1000 px sur une tablette. */
  .entete-grille .illustration { max-width: 460px; }
  .encart-lateral { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Sur une seule colonne, l'éventail prendrait toute la largeur :
     trois pages A4 à 400 px de large mangent un écran entier. */
  .pile-pages { max-width: 460px; margin: 0 auto; }
  .modele { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .modele .couverture { max-width: 280px; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1160px) {
  /* La barre du haut ne tient plus : le menu bascule en panneau déroulant. */
  .burger { display: flex; }
  .entete { min-height: 64px; gap: 14px; }
  .entete-actions .btn { display: none; }
  nav.principal {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--hair);
    box-shadow: var(--ombre-forte); padding: 10px 18px 20px;
    max-height: calc(100dvh - 64px); overflow-y: auto;
    display: none;
  }
  nav.principal.ouvert { display: flex; }
  /* Le panneau est blanc : les entrees reprennent la couleur du texte,
     qu'elles ont perdue en passant sur la barre marine. */
  nav.principal > a, nav.principal .depliant > button {
    padding: 13px 8px; font-size: 16px; width: 100%;
    border-bottom: 1px solid var(--hair);
    color: var(--gris);
  }
  nav.principal > a:hover, nav.principal .depliant > button:hover {
    color: var(--marine); background: var(--voile-2);
  }
  nav.principal > a[aria-current="page"] { color: var(--marine); }
  nav.principal .depliant { width: 100%; }
  nav.principal .depliant > button { justify-content: space-between; }
  /* En panneau, le sous-menu se déplie dans le flux plutôt qu'en surimpression :
     un menu flottant sortirait de l'écran. */
  .depliant-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-radius: 0; min-width: 0;
    padding: 4px 0 10px 12px; display: none;
  }
  .depliant:hover .depliant-menu { display: none; }
  .depliant[data-ouvert="1"] .depliant-menu { display: block; }
  .depliant-menu a span { display: none; }

  .barre-appel { display: flex; }
  body { padding-bottom: 74px; }

  section { padding: 72px 0; }
  .g-3, .g-2, .galerie, .etapes, .bandeau-pratique .grille { grid-template-columns: minmax(0, 1fr); }
  /* Deux encarts cote a cote deviennent illisibles sous 700 px, et leur
     largeur minimale faisait gonfler toute la colonne d'article. */
  .encart-lateral { grid-template-columns: minmax(0, 1fr); }
  .etape { padding: 0; border-left: none; padding-top: 26px; border-top: 1px solid var(--hair); }
  .etape:first-child { padding-top: 0; border-top: none; }
  .reperes { grid-template-columns: repeat(2, 1fr); }
  .bandeau-pratique .grille { gap: 20px; }
}

@media (max-width: 560px) {
  .conteneur { padding: 0 20px; }
  .bandeau-pratique { padding: 0 20px; }
  .bandeau-pratique .grille { padding: 26px 22px; }
  body { font-size: 16px; }
  /* Sous 400 px, un libelle long comme « Recevoir un exemple de rapport »
     depasse tant qu'il refuse de se couper. Les libelles courts, eux, ne
     passent pas a la ligne pour autant. */
  .btn { white-space: normal; text-align: center; }
  .hero { padding: 48px 0 60px; }
  .hero-actions .btn { width: 100%; }
  .g-4, .reperes { grid-template-columns: minmax(0, 1fr); }
  .bloc-cta { padding: 32px 22px; }
  .bloc-cta .actions .btn { width: 100%; }
  .duo-champs { grid-template-columns: 1fr; }
  .carte, .carte-coord { padding: 24px; }
  footer.site .grille { grid-template-columns: 1fr; gap: 32px; }
  .entete .marque img { height: 28px; }
  /* Sous 560 px, l'en-tete n'affichait plus que l'icone telephone — et
     depuis que les numeros sont des liens distincts, cette icone ne
     menait nulle part. La barre d'appel du bas fait deja le travail. */
  .entete-tel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

@media print {
  header.site, footer.site, .barre-appel, .bloc-cta { display: none; }
  body { padding-bottom: 0; }
  section { padding: 24px 0; }
}

/* ── Galerie compacte : paliers ─────────────────────────── */
@media (max-width: 1160px) { .galerie.compacte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .galerie.compacte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .galerie.compacte { grid-template-columns: minmax(0, 1fr); } }