@charset "UTF-8";
/* ==========================================================================
   CARPENTIER - Système de design
   --------------------------------------------------------------------------
   Un seul fichier, organisé en couches : jetons, base, mise en page,
   composants, utilitaires. Aucun framework, aucune dépendance.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-400i-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-400i-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Jetons
   -------------------------------------------------------------------------- */

:root {
  /* Bleu de marque, issu du logo, décliné pour l'écran. */
  --bleu: #12a4e4;            /* couleur du logo : aplats, filets, icones */
  --bleu-bouton: #0b7cb5;     /* fonds pleins portant du texte blanc (AA) */
  --bleu-clair: #4cbdee;
  --bleu-pale: #e6f5fd;
  --bleu-voile: #f4fbfe;
  --bleu-texte: #0a72ad; /* contraste AA sur blanc */
  --bleu-profond: #075d8f;
  --bleu-nuit: #062a41;

  /* Neutres, légèrement bleutés pour rester dans l'univers de la marque. */
  --nuit: #0b1219;
  --nuit-2: #101a23;
  --nuit-3: #16232e;
  --encre: #0f1720;
  --gris-900: #1c2833;
  --gris-700: #3d4c59;
  --gris-600: #566674;
  --gris-500: #66727e;
  --gris-400: #a2adb7;
  --gris-300: #ccd4db;
  --gris-200: #e3e8ec;
  --gris-100: #eff2f5;
  --gris-50: #f6f8f9;
  --blanc: #ffffff;

  --texte: var(--encre);
  --texte-doux: var(--gris-600);
  --texte-inverse: #eef3f7;
  --texte-inverse-doux: #9fb1c0;

  --trait: var(--gris-200);
  --trait-fort: var(--gris-300);
  --trait-sombre: rgba(255, 255, 255, 0.12);

  --fond: var(--blanc);
  --fond-doux: var(--gris-50);
  --fond-sombre: var(--nuit);

  --danger: #b3261e;
  --danger-fond: #fdf1f0;
  --succes: #0d6b52;
  --succes-fond: #eef7f4;
  --alerte: #7a4a00;
  --alerte-fond: #fdf5e8;

  /* Typographie */
  --police: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-editoriale: "Newsreader", Georgia, "Times New Roman", serif;

  /* Rien en dessous de 13 px. Un texte de 12 px sur un site d'artisan
     n'est pas une finesse typographique, c'est un texte que le client
     ne lit pas. */
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1rem;
  --t-md: clamp(1.0625rem, 0.25vw + 1rem, 1.125rem);
  --t-lg: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  --t-xl: clamp(1.25rem, 0.7vw + 1.05rem, 1.5rem);
  --t-2xl: clamp(1.5rem, 1.1vw + 1.15rem, 1.9375rem);
  --t-3xl: clamp(1.75rem, 1.9vw + 1.15rem, 2.625rem);
  --t-4xl: clamp(2.125rem, 2.8vw + 1.15rem, 3.25rem);
  --t-5xl: clamp(2.375rem, 3.6vw + 1.15rem, 4.25rem);

  /* Espacements */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 2.5rem;
  --e-8: 3rem;
  --e-9: 4rem;
  --e-10: 5rem;
  --section: clamp(4rem, 7vw, 7.5rem);
  --section-large: clamp(5rem, 9vw, 10rem);

  /* Mise en page */
  --largeur: 1240px;
  --largeur-large: 1440px;
  --largeur-texte: 68ch;
  --marge: clamp(1.25rem, 5vw, 3rem);

  /* Formes */
  --r-xs: 3px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-plein: 999px;

  /* Ombres : discrètes, jamais diffuses. */
  --ombre-1: 0 1px 2px rgba(11, 18, 25, 0.05), 0 1px 1px rgba(11, 18, 25, 0.03);
  --ombre-2: 0 2px 6px rgba(11, 18, 25, 0.06), 0 8px 24px rgba(11, 18, 25, 0.05);
  --ombre-3: 0 4px 12px rgba(11, 18, 25, 0.07), 0 18px 48px rgba(11, 18, 25, 0.08);
  --ombre-bleue: 0 6px 18px rgba(18, 164, 228, 0.22);

  /* Mouvement */
  --duree: 220ms;
  --duree-lente: 520ms;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
  --courbe-douce: cubic-bezier(0.33, 0, 0.1, 1);

  --hauteur-entete: 76px;
  --z-entete: 100;
  --z-menu: 200;
  --z-bandeau: 300;
}

@media (max-width: 860px) {
  :root {
    --hauteur-entete: 64px;
  }
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + 1.5rem);
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.menu-ouvert {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--e-4);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--encre);
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); letter-spacing: -0.025em; }
h4 { font-size: var(--t-lg); letter-spacing: -0.02em; font-weight: 700; }

p {
  margin: 0 0 var(--e-4);
  text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

a {
  color: var(--bleu-texte);
  text-decoration-color: color-mix(in srgb, var(--bleu-texte) 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--duree) var(--courbe),
    text-decoration-color var(--duree) var(--courbe);
}

a:hover {
  color: var(--bleu-profond);
  text-decoration-color: currentColor;
}

img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  margin: 0 0 var(--e-4);
  padding-left: 1.35em;
}

li {
  margin-bottom: 0.4em;
}

li::marker {
  color: var(--bleu);
}

strong { font-weight: 700; }

blockquote {
  margin: var(--e-6) 0;
  padding-left: var(--e-5);
  border-left: 2px solid var(--bleu);
  font-family: var(--police-editoriale);
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--gris-900);
}

hr {
  border: 0;
  border-top: 1px solid var(--trait);
  margin: var(--e-8) 0;
}

code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--gris-100);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
}

table {
  width: 100%;
  border-collapse: collapse;
}

::selection {
  background: var(--bleu-bouton);
  color: #fff;
}

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

.lien-evitement {
  position: absolute;
  left: var(--e-4);
  top: -100px;
  z-index: 999;
  background: var(--nuit);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm);
  font-weight: 700;
  transition: top var(--duree) var(--courbe);
}

.lien-evitement:focus {
  top: var(--e-4);
  color: #fff;
}

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

.champ-piege {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Mise en page
   -------------------------------------------------------------------------- */

.contenant {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.contenant--large { max-width: var(--largeur-large); }
.contenant--etroit { max-width: 860px; }
.contenant--texte { max-width: 760px; }

.section {
  padding-block: var(--section);
  position: relative;
}

.section--serree { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--large { padding-block: var(--section-large); }
.section--douce { background: var(--fond-doux); }
.section--bleue { background: var(--bleu-voile); }

.section--sombre {
  background: var(--nuit);
  color: var(--texte-inverse);
}

.section--sombre h1,
.section--sombre h2,
.section--sombre h3,
.section--sombre h4 { color: #fff; }

.section--sombre p { color: var(--texte-inverse-doux); }

.section--sombre a { color: var(--bleu-clair); }

/* Un bouton garde la couleur de son libellé : la teinte des liens d'une
   section sombre ne doit pas l'emporter sur elle. */
.section--sombre .bouton,
.encart-cta .bouton,
.carte--vedette .bouton { color: var(--texte-bouton); }

.section--sombre .lede { color: #cddae4; }

/* Trame technique, évocation d'un plan de chantier. */
.trame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
}

.trame--claire {
  background-image: linear-gradient(rgba(11, 18, 25, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 18, 25, 0.035) 1px, transparent 1px);
}

.grille {
  display: grid;
  gap: var(--e-6);
}

@media (min-width: 720px) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .grille--4 { grid-template-columns: repeat(4, 1fr); }
}

.duo {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

/* Une icône suivie d'un texte : l'icône garde sa place à gauche et le texte
   s'aligne sous lui-même quand il passe sur plusieurs lignes. */
.ligne-icone {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.ligne-icone svg {
  flex: none;
  margin-top: 0.15em;
}

/* Colonne qui suit le défilement - uniquement quand la mise en page est
   réellement sur deux colonnes. En dessous de 900 px, « .duo » repasse en
   une seule colonne : une colonne collante s'y superposerait au contenu
   suivant, et le texte se retrouverait imprimé par-dessus un autre texte. */
@media (min-width: 900px) {
  .colonne-collante {
    position: sticky;
    top: calc(var(--hauteur-entete) + 2rem);
  }
}

@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--texte-large { grid-template-columns: 1.15fr 0.85fr; }
  .duo--visuel-large { grid-template-columns: 0.85fr 1.15fr; }
  .duo--haut { align-items: start; }
  .duo--inverse > :first-child { order: 2; }
}

/* --------------------------------------------------------------------------
   5. Typographie éditoriale
   -------------------------------------------------------------------------- */

/* Surtitre : petite capitale bleue, sans filet ni ornement. */
.surtitre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--e-4);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bleu-texte);
}

.section--sombre .surtitre { color: var(--bleu-clair); }

.surtitre--centre { justify-content: center; }

.titre-section {
  font-size: var(--t-3xl);
  margin-bottom: var(--e-4);
  max-width: 22ch;
}

.titre-section--centre {
  margin-inline: auto;
  text-align: center;
  max-width: 24ch;
}

.accent {
  color: var(--bleu-texte);
}

.section--sombre .accent { color: var(--bleu-clair); }

.editorial {
  font-family: var(--police-editoriale);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.lede {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--gris-700);
  max-width: 62ch;
}

.lede--centre {
  margin-inline: auto;
  text-align: center;
}

.entete-section {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.entete-section--centre {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

/* Corps de texte long (articles, pages légales, contenus SEO) */
.prose {
  max-width: var(--largeur-texte);
  font-size: var(--t-md);
  line-height: 1.75;
  color: var(--gris-900);
}

.prose > * + * { margin-top: var(--e-4); }

.prose h2 {
  font-size: var(--t-2xl);
  margin-top: var(--e-9);
  margin-bottom: var(--e-4);
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait);
}

.prose h2:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.prose h3 {
  font-size: var(--t-xl);
  margin-top: var(--e-7);
  margin-bottom: var(--e-3);
}

.prose h4 {
  font-size: var(--t-lg);
  margin-top: var(--e-6);
  margin-bottom: var(--e-2);
}

.prose ul,
.prose ol { padding-left: 1.25em; }

.prose li { margin-bottom: 0.55em; }

.prose blockquote { margin-block: var(--e-7); }

.prose--large { max-width: 76ch; }

.prose--inverse { color: var(--texte-inverse-doux); }
.prose--inverse h2,
.prose--inverse h3,
.prose--inverse h4 { color: #fff; border-color: var(--trait-sombre); }

/* Marqueur des informations à fournir avant la mise en ligne. */
.marqueur {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.1em 0.5em;
  border-radius: var(--r-xs);
  background: var(--alerte-fond);
  border: 1px dashed #d8a94a;
  color: var(--alerte);
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: normal;
}

.marqueur::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8a94a;
  flex: none;
}

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */

.bouton {
  --fond-bouton: var(--bleu-bouton);
  --texte-bouton: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.6em;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--fond-bouton);
  color: var(--texte-bouton);
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duree) var(--courbe),
    background-color var(--duree) var(--courbe),
    box-shadow var(--duree) var(--courbe), border-color var(--duree) var(--courbe),
    color var(--duree) var(--courbe);
}

.bouton .icone {
  transition: transform var(--duree) var(--courbe);
}

.bouton:hover {
  color: var(--texte-bouton);
  transform: translateY(-1px);
}

.bouton:active { transform: translateY(0); }

.bouton--primaire {
  background: var(--bleu-bouton);
  box-shadow: var(--ombre-bleue);
}

.bouton--primaire:hover {
  background: var(--bleu-profond);
  box-shadow: 0 8px 24px rgba(18, 164, 228, 0.3);
}

.bouton--primaire:hover .icone { transform: translateX(3px); }

.bouton--sombre {
  background: var(--nuit);
  color: #fff;
  box-shadow: var(--ombre-2);
}

.bouton--sombre:hover { background: var(--gris-900); color: #fff; }

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

.bouton--contour:hover {
  border-color: var(--encre);
  background: var(--encre);
  color: #fff;
}

/* Les blocs sombres posés dans une section claire (encart d'appel à l'action,
   carte de prestation en vedette) doivent inverser les boutons de la même
   manière qu'une section entièrement sombre. */
.section--sombre .bouton--contour,
.encart-cta .bouton--contour,
.carte--vedette .bouton--contour,
.panneau-tech .bouton--contour {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

.section--sombre .bouton--contour:hover,
.encart-cta .bouton--contour:hover,
.carte--vedette .bouton--contour:hover,
.panneau-tech .bouton--contour:hover {
  background: #fff;
  color: var(--nuit);
  border-color: #fff;
}

.bouton--clair {
  background: #fff;
  color: var(--nuit);
}

.bouton--clair:hover { background: var(--gris-100); color: var(--nuit); }

.bouton--tel {
  background: transparent;
  border-color: var(--trait-fort);
  color: var(--encre);
}

.bouton--tel:hover { border-color: var(--bleu); color: var(--bleu-texte); background: var(--bleu-voile); }

.bouton--plein { width: 100%; }
.bouton--petit { min-height: 42px; padding: 0.6em 1.1em; font-size: var(--t-sm); }
.bouton--grand { min-height: 58px; padding: 1em 1.75rem; font-size: 1.0625rem; font-weight: 800; }

.bouton:disabled,
.bouton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Lien fléché discret, très utilisé dans les cartes. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: var(--t-base);
  text-decoration: none;
  color: var(--bleu-texte);
}

.lien-fleche .icone { transition: transform var(--duree) var(--courbe); }
.lien-fleche:hover .icone { transform: translateX(4px); }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
}

@media (max-width: 480px) {
  .groupe-boutons { flex-direction: column; align-items: stretch; }
  .groupe-boutons .bouton { width: 100%; }
}

/* --------------------------------------------------------------------------
   7. En-tête et navigation
   -------------------------------------------------------------------------- */

.bandeau-annonce {
  position: relative;
  z-index: var(--z-bandeau);
  background: var(--nuit);
  color: #d7e4ee;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.bandeau-annonce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  min-height: 40px;
  padding-block: 0.4rem;
  text-align: center;
}

.bandeau-annonce strong { color: #fff; font-weight: 700; }

.bandeau-annonce .puce { color: var(--bleu); }

@media (max-width: 700px) {
  .bandeau-annonce { display: none; }
}

.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duree) var(--courbe),
    background-color var(--duree) var(--courbe),
    box-shadow var(--duree) var(--courbe);
}

.entete--defile {
  border-bottom-color: var(--trait);
  box-shadow: 0 1px 20px rgba(11, 18, 25, 0.05);
}

.entete__inner {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  min-height: var(--hauteur-entete);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  /* Marge verticale invisible : elle porte la cible tactile à 44 px minimum
     sans agrandir le logo lui-même. */
  padding-block: 6px;
  text-decoration: none;
  color: inherit;
  flex: none;
  margin-right: auto;
}

.logo img {
  width: auto;
  height: 42px;
}

.logo__mot {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo__nom {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
  color: var(--encre);
  text-transform: uppercase;
}

.logo__signature {
  /* La signature reprend la baseline du logo imprimé, dans le même ordre :
     la climatisation d'abord, puisque c'est l'activité principale. Comme sur
     le logo, elle est plus large que le nom au-dessus (290 px contre 160 px
     mesurés) : c'est elle qui fixe la largeur du bloc, et il faut donc
     vérifier la barre de navigation avant d'y ajouter un mot. Sous 420 px
     elle disparaît, elle ne serait plus lisible. */
  font-size: 0.656rem;
  letter-spacing: 0.119em;
  text-transform: uppercase;
  color: var(--gris-500);
  line-height: 1;
  font-weight: 600;
}

@media (max-width: 420px) {
  .logo img { height: 34px; }
  .logo__nom { font-size: 1rem; letter-spacing: 0.16em; }
  .logo__signature { display: none; }
}

.nav { display: none; }

/* En-tete : le menu complet n'apparait qu'a partir de 1280 px.

   Mesure a 1080 px, ou il apparaissait avant, l'en-tete demandait 1 417 px
   pour 969 disponibles : le bouton « Demander un devis » sortait de l'ecran
   sur tous les portables courants (1280, 1366, 1440). Meme a 1920 px il
   debordait de son conteneur, qui plafonne a 1 344 px utiles.

   Largeurs demandees par le contenu, mesurees :
     logo avec signature, numero, menu     1 417 px   jamais possible
     logo seul, numero, menu               1 287 px   a partir de 1440
     logo seul, icone, menu resserre       1 131 px   de 1280 a 1439
   En dessous de 1280, le menu passe dans le bouton « Menu ». */
@media (min-width: 1280px) {
  .nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
  }
}

.nav__lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gris-700);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duree) var(--courbe), background-color var(--duree) var(--courbe);
}

.nav__lien:hover,
.nav__lien[aria-expanded="true"] {
  color: var(--encre);
  background: var(--gris-100);
}

.nav__lien[aria-current="page"],
.nav__lien--actif {
  color: var(--bleu-texte);
}

.nav__lien[aria-current="page"]::after,
.nav__lien--actif::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--bleu);
  border-radius: 2px;
}

.nav__lien .icone { transition: transform var(--duree) var(--courbe); }
.nav__lien[aria-expanded="true"] .icone { transform: rotate(180deg); }

/* Sous-menu des prestations */
.nav__groupe { position: relative; }

.sous-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: -1rem;
  width: 620px;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-3);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--duree) var(--courbe),
    transform var(--duree) var(--courbe), visibility 0s linear var(--duree);
}

.nav__groupe:hover .sous-menu,
.nav__groupe:focus-within .sous-menu,
.sous-menu[data-ouvert="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--duree) var(--courbe),
    transform var(--duree) var(--courbe), visibility 0s linear 0s;
}

.sous-menu__lien {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--encre);
  transition: background-color var(--duree) var(--courbe);
}

.sous-menu__lien:hover { background: var(--bleu-voile); color: var(--encre); }

.sous-menu__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: var(--bleu-pale);
  color: var(--bleu-texte);
}

.sous-menu__lien:hover .sous-menu__icone { background: var(--bleu-bouton); color: #fff; }

.sous-menu__titre {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  margin-bottom: 0.15rem;
}

.sous-menu__desc {
  display: block;
  font-size: var(--t-sm);
  color: var(--gris-600);
  line-height: 1.4;
}

.sous-menu__pied {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
  padding: 0.85rem 0.75rem 0.35rem;
  border-top: 1px solid var(--trait);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-4);
  font-size: var(--t-sm);
  color: var(--gris-600);
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

.entete__tel {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--encre);
  white-space: nowrap;
}

.entete__tel:hover { color: var(--bleu-texte); background: var(--bleu-voile); }
.entete__tel .icone { color: var(--bleu); }

@media (min-width: 880px) {
  .entete__tel { display: inline-flex; }
}

.entete__cta { display: none; white-space: nowrap; flex: none; }

@media (min-width: 640px) {
  .entete__cta { display: inline-flex; }
}

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  min-height: 46px;
  padding: 0 0.9rem;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--encre);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
}

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

@media (min-width: 1280px) {
  .burger { display: none; }
}

/* Quand le menu complet est affiche, la signature sous le logo s'efface :
   c'est l'element le plus large de l'en-tete (290 px) et le moins utile. Elle
   reste visible avec le bouton « Menu », ou la place ne manque pas. */
@media (min-width: 1280px) {
  .logo__signature { display: none; }
}

/* Entre 1280 et 1439 px : liens un peu plus serres, et le telephone passe en
   icone. Le numero reste lu par les lecteurs d'ecran et compose au clic. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .nav__lien { padding-inline: 0.55rem; }
  .entete__tel { padding-inline: 0.6rem; }
  .entete__tel span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.burger__traits {
  display: grid;
  gap: 4px;
  width: 18px;
}

.burger__traits span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}

/* Panneau mobile */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #fff;
  transform: translateX(100%);
  visibility: hidden;
  /* La visibilite bascule immediatement a l ouverture (pour que le focus
     puisse etre place) et seulement apres le glissement a la fermeture. */
  transition: transform var(--duree-lente) var(--courbe-douce),
    visibility 0s linear var(--duree-lente);
  overflow: hidden;
}

.menu-mobile[data-ouvert="true"] {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--duree-lente) var(--courbe-douce),
    visibility 0s linear 0s;
}

.menu-mobile__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: 0.85rem var(--marge);
  border-bottom: 1px solid var(--trait);
  min-height: var(--hauteur-entete);
}

.menu-mobile__fermer {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 46px;
  padding: 0 0.9rem;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-sm);
  background: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--t-sm);
  cursor: pointer;
  color: var(--encre);
}

.menu-mobile__corps {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--e-5) var(--marge) var(--e-8);
}

.menu-mobile__titre {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-500);
  margin: var(--e-6) 0 var(--e-3);
}

.menu-mobile__titre:first-child { margin-top: 0; }

.menu-mobile__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--trait);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--encre);
  text-decoration: none;
}

.menu-mobile__lien:hover { color: var(--bleu-texte); }
.menu-mobile__lien .icone { color: var(--gris-400); flex: none; }

.menu-mobile__lien--service {
  font-size: var(--t-base);
  font-weight: 600;
  gap: 0.75rem;
  justify-content: flex-start;
}

.menu-mobile__lien--service .sous-menu__icone { width: 34px; height: 34px; }

.menu-mobile__pied {
  padding: var(--e-4) var(--marge) calc(var(--e-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--trait);
  background: var(--gris-50);
  display: grid;
  gap: 0.6rem;
}

/* Barre d'action mobile fixe */
.barre-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.6rem var(--e-4) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--trait);
  transform: translateY(110%);
  transition: transform var(--duree-lente) var(--courbe);
}

.barre-mobile[data-visible="true"] { transform: translateY(0); }

.barre-mobile .bouton { min-height: 48px; font-size: 0.9375rem; }

@media (min-width: 880px) {
  .barre-mobile { display: none; }
}

@media (max-width: 879px) {
  body { padding-bottom: 0; }
  body.a-barre-mobile { padding-bottom: 76px; }
}

/* --------------------------------------------------------------------------
   8. Bloc d'ouverture (hero)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--bleu-voile) 100%);
  padding-block: clamp(3rem, 6vw, 6rem) clamp(3.5rem, 7vw, 7rem);
}

.hero__grille {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 1000px) {
  .hero__grille { grid-template-columns: 1.02fr 0.98fr; }
}

/* --------------------------------------------------------------------------
   Ouverture pleine hauteur

   Cinq pieces : l'accroche, les actions, le chapo, les reperes, la photo.
   Seul leur agencement change d'un ecran a l'autre.

   Grand ecran : les quatre pieces de texte se suivent dans la colonne de
   gauche, centrees verticalement ; la photo tient toute la hauteur a droite
   et va jusqu'au bord de la fenetre. L'enveloppe « surimpression » sort de la
   mise en page grace a « display: contents », ses deux enfants se placent
   donc eux memes dans la grille.

   Telephone : la photo prend l'ecran, et l'accroche et les boutons se posent
   dessus sur un degrade bleu nuit, la couleur sombre de la marque. Le chapo
   et les reperes passent dessous, sur fond clair. Ce n'est pas la colonne du
   grand ecran repliee : c'est une autre composition.
   -------------------------------------------------------------------------- */

.hero--pleine {
  padding-block: 0;
}

.hero--pleine__texte {
  padding-inline: var(--marge);
}

.hero--pleine__visuel {
  position: relative;
  min-height: 0;
}

.hero--pleine__visuel img,
.hero--pleine__visuel picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Telephone : le texte se pose sur la photo ---------------------------- */

@media (max-width: 700px) {
  .hero--pleine .hero__grille--photo {
    gap: 0;
    grid-template-areas:
      "media"
      "chapo"
      "reperes";
  }

  /* La photo et le texte partagent la meme case : ils se superposent. */
  .hero__grille--photo .hero--pleine__visuel,
  .hero__grille--photo .hero__surimpression { grid-area: media; }
  .hero__grille--photo .hero__chapo-bloc { grid-area: chapo; }
  .hero__grille--photo .hero__reperes-bloc { grid-area: reperes; }

  /* « svh » suit la barre du navigateur qui se retracte au defilement : sans
     lui, l'ouverture depasse puis saute. Le repli en « vh » sert aux
     navigateurs qui ne connaissent pas l'unite. */
  .hero__grille--photo .hero--pleine__visuel {
    min-height: min(78vh, 700px);
    min-height: min(78svh, 700px);
    /* En grille, la photo s etire d office sur toute la hauteur de la case.
       Avec « height: 100 % » elle ne le faisait pas : un pourcentage de
       hauteur n a rien a quoi se raccrocher quand le parent n a qu une
       hauteur minimale. La photo gardait donc sa hauteur naturelle, 585 px,
       dans une case qui en faisait 658, et les 73 px du bas laissaient
       apparaitre le fond derriere le voile : la bande grise qui allait et
       venait selon que la barre du navigateur etait visible ou non. */
    display: grid;
  }

  .hero__grille--photo .hero--pleine__visuel picture {
    height: auto;
    aspect-ratio: auto;
  }

  .hero__grille--photo .hero--pleine__visuel img {
    object-position: 50% 42%;
  }

  .hero__surimpression {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: stretch;
    padding-top: 30%;
    /* Le voile n’est pas un reglage a l’oeil : ses paliers sont calcules sur
       la photo. Pour chaque bande de hauteur, le pixel le plus clair au 95e
       centile, puis l’opacite minimale de bleu nuit qui amene le texte blanc
       au seuil exige : 4,5 pour 1 sur le surtitre, qui est un petit texte,
       3 pour 1 sur le titre, qui est un grand texte. Les boutons portent
       leur propre fond.

       Il est ancre sur le bas et mesure une hauteur fixe, pas un pourcentage
       de la photo. C’est le point important. Le bloc de texte a une hauteur
       a peu pres constante en pixels, alors que la photo se cale sur la
       fenetre : mesure depuis le bas, le haut du surtitre reste entre 287 et
       338 px sur toutes les tailles d’ecran, tandis qu’en pourcentage il se
       promene de 27 a 64 %. Un voile exprime en pourcentage etait donc juste
       a la taille ou il avait ete regle et faux partout ailleurs : le
       surtitre tombait a 3,1 pour 1 sur un ecran de 320 px et a 3,6 sur les
       360 px d’Android, la largeur la plus repandue.

       Avec 560 px ancres en bas, le texte tombe toujours au meme endroit du
       degrade, et les 200 px du haut servent au fondu. Contraste du pire
       point, mesure sur la photo reelle :

                        surtitre   titre   boutons
         320 x 568        6,16      5,41     5,41
         360 x 640        6,23      5,63     5,96
         390 x 844        5,82      6,07     6,46
         700 x 900        7,04      7,74     9,94

       Si le bloc de texte change (une ligne de titre en plus, un bouton en
       moins), c’est la hauteur de 560 px qu’il faut reprendre, pas les
       paliers.

       La photo reste intacte au-dessus du texte, et sa partie basse retrouve
       sa matiere : le canape, le tapis et la table basse redeviennent
       lisibles au lieu de disparaitre sous une couche unie. */
    background-image: linear-gradient(
      180deg,
      rgba(6, 42, 65, 0) 0%,
      rgba(6, 42, 65, 0.03) 25%,
      rgba(6, 42, 65, 0.55) 38%,
      rgba(6, 42, 65, 0.70) 45%,
      rgba(6, 42, 65, 0.68) 55%,
      rgba(6, 42, 65, 0.58) 70%,
      rgba(6, 42, 65, 0.36) 88%,
      rgba(6, 42, 65, 0.24) 100%
    );
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 100% 560px;
  }

  .hero__grille--photo .hero__accroche { padding-bottom: var(--e-4); }
  .hero__grille--photo .hero__actions { padding-bottom: clamp(1.25rem, 4vw, 1.75rem); }

  /* Le titre est la premiere chose lue, sur un ecran ou il n’a qu’une seconde
     pour exister : il monte a 43 px sur un telephone courant, avec un
     interlignage resserre pour que les trois lignes tiennent ensemble.

     Le plancher est a 2,3 rem et pas 2,5 : a 320 px de large, 40 px faisaient
     passer le titre a quatre lignes, le bloc de texte remontait de 45 a 35 %
     de la hauteur de la photo, et le surtitre se retrouvait a 1,4 pour 1,
     illisible. A 36,8 px il tient de nouveau en trois lignes. Au-dessus de
     334 px de large, c’est le 11vw qui l’emporte : rien ne change. */
  .hero__grille--photo .hero__accroche .hero__titre {
    font-size: clamp(2.3rem, 11vw, 3.1rem);
    line-height: 0.98;
  }

  /* Deux boutons un peu moins hauts, et colles : quarante pixels gagnes,
     rendus a la photo. */
  .hero__grille--photo .hero__actions .groupe-boutons { gap: 0.6rem; }
  .hero__grille--photo .hero__actions .bouton--grand { min-height: 54px; }
  .hero__grille--photo .hero__actions .bouton--tel { min-height: 50px; }

  /* Blanc, pas bleu clair : sur le voile, un bleu pale tombe a 4,4 pour 1
     et rate le seuil des petits textes. Le bleu reste sur la ligne en
     italique du titre, qui est un grand texte. */
  .hero__grille--photo .hero__accroche .surtitre { color: #fff; }
  .hero__grille--photo .hero__accroche .hero__titre { color: #fff; margin-bottom: 0; }
  .hero__grille--photo .hero__accroche .hero__titre .editorial { color: #bfe4f8; }

  /* Contour blanc et fond bleu nuit translucide : un trait sombre
     disparaitrait dans l'image, et un fond blanc translucide eclaircirait le
     dessous au lieu de l'assombrir. Avec ce fond, le libelle blanc tient
     9,2 pour 1 quel que soit l'endroit de la photo ou le bouton tombe, et le
     voile peut donc se relacher en bas et rendre sa matiere au tapis. */
  .hero__grille--photo .hero__actions .bouton--tel {
    background: rgba(6, 42, 65, 0.45);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .hero__grille--photo .hero__chapo-bloc { padding-top: clamp(1.75rem, 6vw, 2.25rem); }

  .hero__grille--photo .hero__reperes-bloc {
    padding-bottom: clamp(2.25rem, 7vw, 3rem);
  }

  .hero__grille--photo .hero__chapo { margin-bottom: 0; }
  .hero__grille--photo .hero__reperes { margin-top: var(--e-5); gap: 0.5rem; }
}

/* --- Entre les deux : la photo reprend sa place, en bandeau --------------- */

@media (min-width: 701px) and (max-width: 999px) {
  /* L enveloppe s efface : ses deux enfants deviennent des elements de la
     grille et se rangent chacun dans sa case. */
  .hero__surimpression { display: contents; }

  .hero--pleine .hero__grille {
    gap: 0;
    grid-template-areas:
      "accroche"
      "media"
      "chapo"
      "actions"
      "reperes";
  }

  .hero__accroche { grid-area: accroche; }
  .hero--pleine__visuel { grid-area: media; }
  .hero__chapo-bloc { grid-area: chapo; }
  .hero__actions { grid-area: actions; }
  .hero__reperes-bloc { grid-area: reperes; }

  .hero__accroche { padding-block: clamp(2rem, 5vw, 3rem) clamp(1rem, 3vw, 1.5rem); }
  .hero__chapo-bloc { padding-top: clamp(1.75rem, 4vw, 2.25rem); }
  .hero__actions { padding-top: var(--e-5); }
  .hero__reperes-bloc { padding-block: var(--e-5) clamp(2.5rem, 6vw, 3.25rem); }
  .hero__accroche .hero__titre { margin-bottom: 0; }
  .hero__chapo { margin-bottom: 0; }
  .hero__reperes { margin-top: 0; }

  /* Plafonnee : en 4/3 sur toute la largeur, la photo prendrait les deux
     tiers de l'ecran pour un mur en grande partie vide. */
  .hero--pleine__visuel picture { height: min(52vh, 480px); }
  .hero--pleine__visuel img { object-position: 50% 46%; }
}

/* --- Grand ecran : deux colonnes, rien ne change -------------------------- */

@media (min-width: 1000px) {
  /* L'enveloppe s'efface : ses enfants deviennent des elements de la grille,
     ce qui permet de ranger le chapo entre le titre et les boutons. */
  .hero__surimpression { display: contents; }

  /* Les rangees en « 1fr » absorbent le vide et centrent le texte sans
     rabougrir la photo, qui traverse les six rangees. */
  .hero--pleine .hero__grille {
    gap: 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas:
      ".        visuel"
      "accroche visuel"
      "chapo    visuel"
      "actions  visuel"
      "reperes  visuel"
      ".        visuel";
    align-items: start;
    min-height: min(78vh, 720px);
  }

  .hero__accroche { grid-area: accroche; }
  .hero__chapo-bloc { grid-area: chapo; }
  .hero__actions { grid-area: actions; }
  .hero__reperes-bloc { grid-area: reperes; }
  .hero--pleine__visuel { grid-area: visuel; min-height: 100%; }

  /* Le texte s'aligne sur la colonne du site ; l'image part vers le bord. */
  .hero--pleine__texte {
    padding-inline: max(var(--marge), calc((100vw - var(--largeur-large)) / 2 + var(--marge)));
    padding-right: clamp(2rem, 4vw, 4rem);
  }

  .hero__accroche { padding-bottom: var(--e-5); }
  .hero__accroche .hero__titre { margin-bottom: 0; }
  .hero__chapo-bloc { padding-bottom: var(--e-6); }
  .hero__chapo { margin-bottom: 0; }
  .hero__reperes-bloc { padding-top: var(--e-6); }
  .hero__reperes { margin-top: 0; }

  .hero--pleine__visuel::after {
    /* Raccord doux entre l'image et le fond clair du texte. */
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 90px;
    background: linear-gradient(90deg, var(--bleu-voile), transparent);
    pointer-events: none;
  }
}

.hero__titre {
  font-size: var(--t-5xl);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: var(--e-5);
  max-width: 15ch;
}

.hero__titre .editorial {
  display: block;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--bleu-texte);
}

.hero__chapo {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--gris-700);
  max-width: 52ch;
  margin-bottom: var(--e-6);
}

/* Une colonne, pas un enroulement libre. En « flex-wrap », trois reperes de
   longueurs differentes tombaient en deux sur la premiere ligne et un tout
   seul sur la seconde, avec un bord droit en dents de scie qui donnait une
   impression de mise en page approximative. Empiles, ils sont alignes a
   gauche sur les boutons, et le rendu est le meme du telephone au grand
   ecran. */
.hero__reperes {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  margin: var(--e-6) 0 0;
  padding: 0;
  list-style: none;
}

.hero__reperes li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--gris-700);
}

.hero__reperes .icone { color: var(--bleu); flex: none; }

/* Panneau technique : la pièce maîtresse du bloc d'ouverture. */
.panneau-tech {
  position: relative;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--nuit-3) 0%, var(--nuit) 55%, #060c12 100%);
  color: #fff;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 30px 70px -30px rgba(6, 24, 38, 0.55),
    0 2px 10px rgba(6, 24, 38, 0.2);
  overflow: hidden;
  isolation: isolate;
}

.panneau-tech::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 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: 34px 34px;
  mask-image: radial-gradient(100% 100% at 70% 10%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(100% 100% at 70% 10%, #000 20%, transparent 75%);
  z-index: -1;
}

.panneau-tech::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -160px;
  top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 164, 228, 0.32), transparent 68%);
  z-index: -1;
}

.panneau-tech__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-bottom: var(--e-4);
  margin-bottom: var(--e-5);
  border-bottom: 1px solid var(--trait-sombre);
}

.panneau-tech__label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bleu-clair);
}

.panneau-tech__ref {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: #8298aa;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Sur petit écran, les deux libellés se superposent plutôt que de se casser. */
@media (max-width: 520px) {
  .panneau-tech__entete {
    display: grid;
    justify-items: start;
    gap: 0.35rem;
  }
  .panneau-tech__ref { text-align: left; }
}

.panneau-tech__visuel {
  margin: 0 auto;
  max-width: 460px;
}

/* Variante photographique du panneau d'ouverture. */
.panneau-tech--photo {
  margin: 0;
}

.panneau-tech__photo {
  overflow: hidden;
  border-radius: var(--r-sm);
  background: #0d1620;
}

.panneau-tech__photo picture,
.panneau-tech__photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Sans repere a afficher, la liste ne doit rien occuper : sinon une bande
   sombre vide reste sous la photo. */
.panneau-tech__legende:empty { display: none; }

.panneau-tech__legende {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait-sombre);
  list-style: none;
  padding-left: 0;
}

.panneau-tech__legende li { margin: 0; }

.panneau-tech__legende dt,
.panneau-tech__cle {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8298aa;
  margin-bottom: 0.25rem;
}

.panneau-tech__valeur {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   9. Cartes
   -------------------------------------------------------------------------- */

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  transition: transform var(--duree) var(--courbe),
    box-shadow var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}

/* Le corps porte la colonne : le pied reste collé en bas de la carte,
   quelle que soit la longueur du texte au-dessus. */
.carte__corps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.carte__points {
  margin-top: var(--e-4);
  margin-bottom: 0;
}

.carte--lien:hover {
  transform: translateY(-3px);
  border-color: var(--trait-fort);
  box-shadow: var(--ombre-3);
}

.carte__icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--e-5);
  border-radius: var(--r);
  background: var(--bleu-pale);
  color: var(--bleu-texte);
  flex: none;
  transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}

.carte--lien:hover .carte__icone { background: var(--bleu-bouton); color: #fff; }

.carte__titre {
  font-size: var(--t-xl);
  margin-bottom: var(--e-3);
}

.carte__titre a {
  color: inherit;
  text-decoration: none;
}

.carte__titre a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Au-dessus des autres éléments de la carte, sinon le paragraphe - qui
     vient après dans le balisage - reçoit le clic à sa place. */
  z-index: 1;
}

.carte__texte {
  color: var(--gris-600);
  font-size: var(--t-base);
  line-height: 1.6;
  margin-bottom: var(--e-5);
  flex: 1;
}

.carte__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: auto;
}

.carte__index {
  font-family: var(--police-editoriale);
  font-style: italic;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--gris-300);
}

/* Carte de prestation mise en avant */
.carte--vedette {
  background: linear-gradient(155deg, var(--nuit-3), var(--nuit) 60%, #070e14);
  border-color: transparent;
  color: #fff;
  overflow: hidden;
}

.carte--vedette::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -120px;
  bottom: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 164, 228, 0.28), transparent 70%);
}

.carte--vedette > * { position: relative; }

/* Le lien du titre porte une zone de clic qui doit couvrir TOUTE la carte.
   Cette zone se cale sur le premier ancêtre positionné : si le titre en est
   un, elle se réduit au titre et seul le mot est cliquable. On rend donc le
   titre statique sur les cartes-liens. Le halo décoratif est dans le coin
   bas-droit, loin du titre : rien ne change à l'écran. */
.carte--vedette.carte--lien > .carte__titre,
.carte--vedette.carte--lien > .carte__corps,
.carte--vedette.carte--lien > .carte__corps > .carte__titre {
  position: static;
}

.carte--vedette .carte__titre { color: #fff; }
.carte--vedette .carte__texte { color: #adc0cf; }
.carte--vedette .carte__icone { background: rgba(18, 164, 228, 0.18); color: var(--bleu-clair); }
.carte--vedette:hover .carte__icone { background: var(--bleu-bouton); color: #fff; }
.carte--vedette .lien-fleche { color: var(--bleu-clair); }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.7em;
  border-radius: var(--r-plein);
  background: var(--bleu-bouton);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.etiquette--douce {
  background: var(--bleu-pale);
  color: var(--bleu-profond);
}

.etiquette--neutre {
  background: var(--gris-100);
  color: var(--gris-700);
}

/* La climatisation occupe toute la largeur : la hiérarchie se lit avant
   d'être lue. Les quatre autres métiers s'alignent en dessous, à égalité.
   Aucune carte ne s'étire pour rattraper une voisine plus haute. */
@media (min-width: 1000px) {
  .grille-prestations {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--e-5);
  }
  .grille-prestations > * { grid-column: span 1; }
  .grille-prestations > :first-child { grid-column: 1 / -1; }

  /* Carte pleine largeur : le discours à gauche, les preuves à droite. */
  .grille-prestations > .carte--vedette {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    column-gap: var(--e-7);
    align-items: center;
  }
  .grille-prestations > .carte--vedette .carte__titre { font-size: var(--t-2xl); }
  .grille-prestations > .carte--vedette .carte__points { margin: 0; }
}

@media (min-width: 720px) and (max-width: 999px) {
  .grille-prestations { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-5); }
  .grille-prestations > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 719px) {
  .grille-prestations { display: grid; gap: var(--e-4); }
}

/* --------------------------------------------------------------------------
   10. Blocs éditoriaux
   -------------------------------------------------------------------------- */

/* Étapes numérotées */
.etapes {
  counter-reset: etape;
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.etapes__item {
  counter-increment: etape;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--trait);
  margin: 0;
}

.etapes__item:last-child { border-bottom: 1px solid var(--trait); }

.section--sombre .etapes__item { border-color: var(--trait-sombre); }

.etapes__numero {
  font-family: var(--police-editoriale);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--bleu);
  min-width: 2.2ch;
  font-variant-numeric: tabular-nums;
}

.etapes__numero::before {
  content: "0" counter(etape);
}

/* Numero editorial autonome, hors liste numerotee. */
.numero-editorial {
  font-family: var(--police-editoriale);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--bleu-clair);
  font-variant-numeric: tabular-nums;
}

.etapes__titre {
  font-size: var(--t-xl);
  margin-bottom: var(--e-2);
}

.etapes__texte {
  color: var(--gris-600);
  max-width: 62ch;
  margin: 0;
}

.section--sombre .etapes__texte { color: var(--texte-inverse-doux); }

/* Liste de points avec coche */
.liste-coches {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-3);
}

.liste-coches li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin: 0;
  line-height: 1.55;
}

.liste-coches .icone {
  color: var(--bleu);
  margin-top: 0.25em;
  flex: none;
}

.section--sombre .liste-coches li { color: var(--texte-inverse-doux); }
.section--sombre .liste-coches .icone { color: var(--bleu-clair); }

/* Bandeau de repères */
.reperes {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.repere {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-4);
  align-items: start;
}

.repere__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--bleu-pale);
  color: var(--bleu-texte);
  flex: none;
}

.section--sombre .repere__icone {
  background: rgba(18, 164, 228, 0.16);
  color: var(--bleu-clair);
}

.repere__titre {
  font-size: var(--t-base);
  font-weight: 700;
  margin-bottom: 0.25rem;
  line-height: 1.35;
}

.repere__texte {
  font-size: var(--t-sm);
  color: var(--gris-600);
  line-height: 1.55;
  margin: 0;
}

.section--sombre .repere__texte { color: var(--texte-inverse-doux); }

/* Citation éditoriale */
.citation {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--bleu-voile);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--bleu);
}

.citation__texte {
  font-family: var(--police-editoriale);
  font-style: italic;
  font-size: var(--t-2xl);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin: 0 0 var(--e-4);
}

.citation__auteur {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-600);
  margin: 0;
}

/* Encart d'appel à l'action */
.encart-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--nuit-3), var(--nuit) 55%, #060c12);
  color: #fff;
  padding: clamp(2rem, 5vw, 4rem);
}

.encart-cta::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -180px;
  top: -240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 164, 228, 0.26), transparent 68%);
}

.encart-cta > * { position: relative; }

.encart-cta h2 { color: #fff; }
.encart-cta p { color: #b7c8d6; }

.encart-cta__grille {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .encart-cta__grille { grid-template-columns: 1.2fr 0.8fr; }
}

/* Bloc d'état vide, assumé et éditorialisé */
.etat-vide {
  display: grid;
  gap: var(--e-5);
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px dashed var(--trait-fort);
  border-radius: var(--r-lg);
  background: var(--gris-50);
  text-align: center;
  justify-items: center;
}

.etat-vide__icone {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--trait);
  color: var(--gris-400);
}

.etat-vide h3 { margin-bottom: var(--e-2); }
.etat-vide p { color: var(--gris-600); max-width: 56ch; margin-inline: auto; }

/* Tableau d'informations légales */
.tableau-infos {
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}

.tableau-infos__ligne {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--trait);
}

@media (min-width: 620px) {
  .tableau-infos__ligne { grid-template-columns: 260px 1fr; align-items: baseline; }
}

.tableau-infos__ligne:last-child { border-bottom: 0; }
.tableau-infos__ligne:nth-child(odd) { background: var(--gris-50); }

.tableau-infos__cle {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gris-600);
}

.tableau-infos__valeur { font-weight: 600; }

/* Accordéon FAQ */
.faq { display: grid; gap: 0; }

.faq__item {
  border-top: 1px solid var(--trait);
}

.faq__item:last-child { border-bottom: 1px solid var(--trait); }

.section--sombre .faq__item { border-color: var(--trait-sombre); }

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-5);
  width: 100%;
  padding: 1.35rem 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.faq__question:hover { color: var(--bleu-texte); }
.section--sombre .faq__question:hover { color: var(--bleu-clair); }

.faq__signe {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--trait-fort);
  margin-top: 0.15rem;
  transition: background-color var(--duree) var(--courbe),
    border-color var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}

.faq__signe::before,
.faq__signe::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}

.faq__signe::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__question[aria-expanded="true"] .faq__signe {
  background: var(--bleu-bouton);
  border-color: var(--bleu-bouton);
  color: #fff;
}

.faq__question[aria-expanded="true"] .faq__signe::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.faq__reponse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duree-lente) var(--courbe-douce);
}

.faq__reponse[data-ouvert="true"] { grid-template-rows: 1fr; }

.faq__reponse > div { overflow: hidden; }

.faq__reponse p {
  padding-bottom: 1.5rem;
  max-width: 68ch;
  color: var(--gris-600);
  margin: 0;
}

.section--sombre .faq__reponse p { color: var(--texte-inverse-doux); }

/* Avis client */
.avis {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  height: 100%;
}

.avis__note {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--bleu);
}

.avis__texte {
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--gris-900);
  flex: 1;
  margin: 0;
}

.avis__auteur {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: var(--e-4);
  border-top: 1px solid var(--trait);
  font-size: var(--t-sm);
  margin: 0;
}

.avis__nom { font-weight: 700; color: var(--encre); }
.avis__meta { color: var(--gris-500); }

/* Réalisation */
.realisation {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--gris-100);
  border: 1px solid var(--trait);
}

.realisation__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gris-200);
}

.realisation__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duree-lente) var(--courbe-douce);
}

.realisation:hover .realisation__image img { transform: scale(1.04); }

.realisation__corps {
  padding: var(--e-5);
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.realisation__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--t-sm);
  color: var(--gris-500);
}

/* Le nombre de photos se cale en bas : d'une carte à l'autre, les titres
   font une ou deux lignes, mais la dernière ligne reste alignée.

   « margin » et non « margin-top » seul : la classe utilitaire « marge-0 »,
   déclarée plus bas dans ce fichier, écrasait la marge automatique et laissait
   les lignes en escalier. */
.realisation__compte {
  margin: auto 0 0;
  padding-top: var(--e-3);
}

/* Carte cliquable : le lien du titre couvre toute la carte. */
.realisation__lien {
  color: inherit;
  text-decoration: none;
}

.realisation__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}

.realisation--liee:focus-within {
  outline: 2px solid var(--bleu);
  outline-offset: 3px;
}

.realisation__lien:focus-visible { outline: none; }

.realisation__compte {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--bleu-texte);
}

/* Galerie d'un chantier.
   Grille et non colonnes : les photos racontent une progression - avant,
   pendant, apres - et des colonnes la feraient lire de haut en bas au lieu de
   gauche a droite. Les hauteurs varient donc un peu, et c'est le bon compromis :
   chaque photo garde son cadrage d'origine, sans recadrage impose. */
.galerie-chantier {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: var(--e-6) var(--e-5);
  align-items: start;
}

.galerie-chantier__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

/* Toutes les vignettes au même format. Les photos de chantier arrivent en
   portrait comme en paysage : à hauteur libre, chaque paysage laissait un
   trou de 250 px sous lui dans sa rangée. Un cadre unique règle le problème
   et donne une grille régulière. La photo entière reste consultable en
   cliquant dessus. */
.galerie-chantier__item picture {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--trait);
  background: var(--gris-200);
}

.galerie-chantier__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Encadré « possibilité ».
   Sert à présenter ce que l'entreprise peut faire sans le vendre comme une
   prestation. Le poids visuel est délibérément inférieur à celui d'une
   section : pas de pleine largeur, pas de fond sombre, un titre au niveau
   des sous-titres. C'est ce qui le distingue des cinq métiers. */
.encart-possibilite {
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  background: var(--fond-doux);
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
}

.encart-possibilite__titre {
  font-size: var(--t-2xl);
  letter-spacing: -0.02em;
  margin: 0 0 var(--e-4);
}

.encart-possibilite__photos {
  /* Trois vignettes côte à côte sur large écran, empilées deux par deux dès
     que la place manque. Le cadre est plus bas que dans la galerie de
     chantier : ces photos illustrent, elles ne s'examinent pas. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--e-3);
  margin-top: var(--e-5);
}

.encart-possibilite__vue {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.encart-possibilite__vue picture {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--trait);
  background: var(--gris-200);
}

.encart-possibilite__vue img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Article */
.article-carte {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5) 0;
  border-top: 1px solid var(--trait);
  position: relative;
}

.article-carte__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: var(--t-sm);
  color: var(--gris-500);
}

.article-carte__titre {
  font-size: var(--t-xl);
  margin: 0;
}

.article-carte__titre a { color: inherit; text-decoration: none; }

.article-carte__titre a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.article-carte__titre a:hover { color: var(--bleu-texte); }

.article-carte__chapo {
  color: var(--gris-600);
  margin: 0;
  max-width: 70ch;
}

/* Fil d'Ariane */
.fil {
  padding-block: var(--e-4);
  font-size: var(--t-sm);
  color: var(--gris-500);
}

.fil ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.fil li { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.fil a { color: var(--gris-600); text-decoration: none; }
.fil a:hover { color: var(--bleu-texte); text-decoration: underline; }
.fil [aria-current="page"] { color: var(--encre); font-weight: 600; }
.fil .sep { color: var(--gris-300); }

/* --------------------------------------------------------------------------
   11. Formulaires
   -------------------------------------------------------------------------- */

.formulaire {
  display: grid;
  gap: var(--e-5);
}

.champs {
  display: grid;
  gap: var(--e-4);
  /* Sans cela, une case dont la voisine porte un texte d'aide s'étire pour
     remplir la hauteur de la ligne : les deux champs n'ont plus la même
     hauteur et ne sont plus alignés. */
  align-items: start;
}

@media (min-width: 640px) {
  .champs--2 { grid-template-columns: repeat(2, 1fr); }
}

.champ { display: grid; gap: 0.4rem; align-content: start; }

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

.champ label,
.legende {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gris-900);
}

.champ__obligatoire { color: var(--bleu-texte); }

.champ__aide {
  font-size: var(--t-sm);
  color: var(--gris-500);
  line-height: 1.45;
}

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ input[type="url"],
.champ input[type="number"],
.champ input[type="date"],
.champ input[type="password"],
.champ select,
.champ textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--encre);
  font-family: inherit;
  font-size: var(--t-base);
  line-height: 1.5;
  transition: border-color var(--duree) var(--courbe),
    box-shadow var(--duree) var(--courbe);
  appearance: none;
}

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

.champ select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23566674' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}

.champ input:hover,
.champ select:hover,
.champ textarea:hover { border-color: var(--gris-500); }

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(18, 164, 228, 0.16);
}

.champ input::placeholder,
.champ textarea::placeholder { color: #68757f; }

.champ--erreur input,
.champ--erreur select,
.champ--erreur textarea {
  border-color: var(--danger);
  background: var(--danger-fond);
}

.champ--erreur input:focus,
.champ--erreur select:focus,
.champ--erreur textarea:focus {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14);
}

.champ__erreur {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--danger);
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.options {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 620px) {
  .options--2 { grid-template-columns: repeat(2, 1fr); }
  .options--3 { grid-template-columns: repeat(3, 1fr); }
}

.option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-sm);
  background: #fff;
  cursor: pointer;
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.4;
  transition: border-color var(--duree) var(--courbe),
    background-color var(--duree) var(--courbe);
}

.option:hover { border-color: var(--bleu); background: var(--bleu-voile); }

.option input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0.1rem 0 0;
  accent-color: var(--bleu);
  cursor: pointer;
}

.option:has(input:checked) {
  border-color: var(--bleu);
  background: var(--bleu-voile);
  font-weight: 600;
}

.option:has(input:focus-visible) {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
}

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-sm);
  background: var(--gris-50);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--gris-700);
  cursor: pointer;
}

.consentement input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0.1rem 0 0;
  accent-color: var(--bleu);
}

.mention-legale {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--gris-500);
}

.mention-legale a { color: var(--gris-700); }

/* Messages */
.message {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-sm);
  border: 1px solid;
  font-size: var(--t-base);
  line-height: 1.55;
}

.message p { margin: 0; }
.message p + p { margin-top: 0.4rem; }
.message .icone { margin-top: 0.15em; }

.message--erreur {
  background: var(--danger-fond);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  color: #7e1b15;
}

.message--succes {
  background: var(--succes-fond);
  border-color: color-mix(in srgb, var(--succes) 30%, transparent);
  color: #0a5340;
}

.message--info {
  background: var(--bleu-voile);
  border-color: color-mix(in srgb, var(--bleu) 30%, transparent);
  color: var(--bleu-nuit);
}

.message--alerte {
  background: var(--alerte-fond);
  border-color: #e0b968;
  color: var(--alerte);
}

.message strong { font-weight: 700; }

/* Bloc formulaire encadré */
.panneau-formulaire {
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-2);
}

/* --------------------------------------------------------------------------
   12. Carte de zone (SVG maison)
   -------------------------------------------------------------------------- */

.zone-carte {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--nuit);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
}

.zone-carte svg { width: 100%; height: auto; }

.zone-niveaux { display: grid; gap: var(--e-5); }

.zone-niveau {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-5) 0;
  border-top: 1px solid var(--trait);
}

.zone-niveau__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-3);
}

.zone-niveau__titre { font-size: var(--t-xl); margin: 0; }

.zone-villes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.zone-villes li { margin: 0; }

.zone-villes span {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-plein);
  background: var(--gris-100);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--gris-700);
}

/* --------------------------------------------------------------------------
   13. Pied de page
   -------------------------------------------------------------------------- */

.pied {
  background: var(--nuit);
  color: var(--texte-inverse-doux);
  padding-block: var(--section) var(--e-6);
  position: relative;
  overflow: hidden;
}

.pied a { color: #cbd9e4; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }

.pied__grille {
  display: grid;
  gap: clamp(2.5rem, 4vw, 4rem);
}

@media (min-width: 780px) {
  .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 1080px) {
  .pied__grille { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
}

.pied__logo img { height: 56px; width: auto; margin-bottom: var(--e-4); }

.pied__signature {
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: 38ch;
  color: #8ea3b4;
}

.pied__titre {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--e-4);
}

.pied__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
  font-size: 0.9375rem;
}

.pied__liste li { margin: 0; }

.pied__contact {
  display: grid;
  gap: var(--e-3);
  font-size: 0.9375rem;
}

.pied__contact-ligne {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
}

.pied__contact-ligne .icone { color: var(--bleu); margin-top: 0.2em; }

.pied__bas {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait-sombre);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  font-size: var(--t-sm);
  color: #7d93a6;
}

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

.pied__legaux li { margin: 0; }

/* Le credit de l'agence passe sous la ligne des mentions, sur toute la
   largeur : dans le « space-between » de la barre, un troisieme element se
   serait glisse au milieu. */
.pied__credit {
  flex-basis: 100%;
  font-size: var(--t-xs);
}

.reseaux {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: var(--e-5) 0 0;
}

.reseaux li { margin: 0; }

.reseaux a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--trait-sombre);
  color: #cbd9e4;
  transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}

.reseaux a:hover { background: var(--bleu-bouton); color: #fff; border-color: var(--bleu-bouton); }

/* Newsletter */
.newsletter__form {
  display: grid;
  gap: 0.6rem;
  margin-top: var(--e-4);
}

/* Sur mobile, le bouton prend toute la largeur sous le champ : sinon il
   reste étroit et calé à gauche, sous une case pleine largeur. */
@media (max-width: 479px) {
  .newsletter__ligne { display: grid; gap: 0.5rem; }
  .newsletter__ligne .bouton { width: 100%; }
}

@media (min-width: 480px) {
  .newsletter__ligne { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
}

.newsletter input[type="email"] {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--trait-sombre);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: inherit;
  font-size: var(--t-base);
}

.newsletter input[type="email"]::placeholder { color: #7d93a6; }

.newsletter input[type="email"]:focus {
  outline: none;
  border-color: var(--bleu);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(18, 164, 228, 0.2);
}

.newsletter .consentement {
  background: transparent;
  border-color: var(--trait-sombre);
  color: #9fb1c0;
}

.newsletter .mention-legale { color: #7d93a6; }
.newsletter .mention-legale a { color: #a9bdcc; text-decoration: underline; }

/* --------------------------------------------------------------------------
   14. Bandeau cookies
   -------------------------------------------------------------------------- */

.cookies {
  position: fixed;
  left: var(--e-4);
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 400;
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: #fff;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-3);
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  visibility: hidden;
  transition: transform var(--duree-lente) var(--courbe),
    opacity var(--duree-lente) var(--courbe), visibility 0s linear var(--duree-lente);
}

.cookies[data-visible="true"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--duree-lente) var(--courbe),
    opacity var(--duree-lente) var(--courbe), visibility 0s linear 0s;
}

.cookies__titre { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.cookies__texte { font-size: var(--t-sm); color: var(--gris-600); line-height: 1.55; margin-bottom: var(--e-4); }
.cookies__actions { display: grid; gap: 0.5rem; }

@media (min-width: 480px) {
  .cookies__actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 879px) {
  body.a-barre-mobile .cookies { bottom: 84px; }
}

/* --------------------------------------------------------------------------
   15. Animations
   -------------------------------------------------------------------------- */

/* Le contenu est visible dès le premier rendu. Aucune apparition au
   défilement : elle masquait durablement les blocs dont l'observateur
   ratait le déclenchement, et elle donnait au site un air de gabarit. */
[data-anim] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-anim] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   16. Utilitaires
   -------------------------------------------------------------------------- */

.centre { text-align: center; }
.marge-0 { margin: 0; }
/* --------------------------------------------------------------------------
   Formulaire en étapes
   Sans JavaScript, les étapes s'empilent et restent toutes visibles.
   -------------------------------------------------------------------------- */

.etapes-form {
  display: grid;
  gap: var(--e-7);
}

.etape-form__titre {
  font-size: var(--t-xl);
  margin: 0.35rem 0 1.25rem;
}

.etape-form__titre:focus-visible {
  outline: 2px solid var(--bleu-bouton);
  outline-offset: 4px;
}

.etapes-form[data-pas-a-pas] { gap: 0; }
.etapes-form[data-pas-a-pas] .etape-form { display: none; }
.etapes-form[data-pas-a-pas] .etape-form.est-active { display: block; }

.etapes-jauge {
  height: 4px;
  margin-bottom: var(--e-6);
  background: var(--gris-200);
  border-radius: var(--r-plein);
  overflow: hidden;
}

.etapes-jauge__barre {
  height: 100%;
  width: 20%;
  background: var(--bleu-bouton);
  border-radius: var(--r-plein);
  transition: width 280ms var(--courbe);
}

.etapes-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-top: var(--e-6);
}

.etapes-nav [hidden] { display: none !important; }

.mb-3 { margin-bottom: var(--e-3); }
.mb-7 { margin-bottom: var(--e-7); }
.mb-8 { margin-bottom: var(--e-8); }
.mt-3 { margin-top: var(--e-3); }
.mt-4 { margin-top: var(--e-4); }
.mt-5 { margin-top: var(--e-5); }
.mt-6 { margin-top: var(--e-6); }
.mt-7 { margin-top: var(--e-7); }
.mt-8 { margin-top: var(--e-8); }
.mb-4 { margin-bottom: var(--e-4); }
.mb-5 { margin-bottom: var(--e-5); }
.mb-6 { margin-bottom: var(--e-6); }
.pile { display: grid; gap: var(--e-4); }
.pile--large { display: grid; gap: var(--e-6); }
.rang { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
/* Une icone posee au milieu d’une phrase doit rester dans la ligne.
   La regle generale plus haut met tous les svg en « display: block » pour
   supprimer l’espace fantome sous les images ; appliquee a une icone
   inseree dans un texte, elle la jetait sur sa propre ligne, ou elle venait
   chevaucher le titre. On la neutralise ici.

   Sans effet dans les contextes en flex ou en grille, tres majoritaires sur
   le site (boutons, liens flechees, pastilles rondes) : « display » y est de
   toute facon ignore pour les enfants directs. */
.icone {
  flex: none;
  display: inline-block;
  vertical-align: -0.18em;
}
.texte-doux { color: var(--gris-600); }
.texte-petit { font-size: var(--t-sm); }
.defilement-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   17. Impression
   -------------------------------------------------------------------------- */

@media print {
  .entete,
  .bandeau-annonce,
  .barre-mobile,
  .cookies,
  .menu-mobile,
  .encart-cta,
  .newsletter,
  .lien-evitement { display: none !important; }

  body { font-size: 11pt; color: #000; background: #fff; }
  .section { padding-block: 1rem; }
  .section--sombre { background: #fff !important; color: #000 !important; }
  .section--sombre h2, .section--sombre h3, .section--sombre p { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .pied { background: #fff; color: #000; }
}