/* =====================================================================
   LG FROID & PLOMBERIE — feuille de style
   DA « Atelier vert » : base claire verdie, vert sapin porteur en aplats,
   jaune relevé au pixel sur sa cuve de filtration.
   Clone de craft : luxury-reparation (structure et densité), palette neuve.
   ===================================================================== */

/* --- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* [hidden] doit gagner sur tout display: posé plus bas (piège déjà payé) */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img, svg, video {
  display: block;
  max-width: 100%;
  /* sans height:auto, l'attribut HTML height écrase aspect-ratio — bug K2S */
  height: auto;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

/* --- Jetons --------------------------------------------------------- */
:root {
  /* Bleu marine, bleu ciel, blanc — code couleur demandé par le client.
     Le BLANC domine (les voisins de métier sont navy-dominants), le marine
     porte l'encre et les bandeaux, le ciel est le seul accent saturé. */
  --paper:      #FFFFFF;
  --paper-2:    #F1F6FB;   /* blanc bleuté, ni gris béton ni crème */
  --ink:        #0A1F3C;   /* bleu marine profond */
  --ink-soft:   #46536B;
  --ink-mute:   #65728C;   /* 4,84:1 sur blanc, WCAG AA */
  --navy:       #0A1F3C;
  --navy-2:     #061630;
  --navy-3:     #14406F;
  --sky:        #3FA9F5;   /* bleu ciel, accent unique */
  --sky-2:      #2B93DE;
  --sky-soft:   #DCEEFC;
  --sky-ink:    #06213E;   /* texte posé SUR le ciel : marine, jamais blanc */
  --line:       #DCE6F0;
  --line-strong:#C3D2E2;
  --white:      #FFFFFF;

  /* Typo */
  --f-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --f-ui:      "Inter Tight", system-ui, -apple-system, sans-serif;

  /* Échelle — plafonds imposés : H1 ≤ 64/42, H2 34-46/28-34, corps 16-18.
     L'amplitude est portée par les CHIFFRES, jamais par le H1. */
  --fs-h1:   clamp(2.1rem, 1.35rem + 2.6vw, 3.9rem);
  --fs-h2:   clamp(1.72rem, 1.35rem + 1.3vw, 2.75rem);
  --fs-h3:   clamp(1.15rem, 1.02rem + .45vw, 1.4rem);
  --fs-body: clamp(1rem, .97rem + .12vw, 1.1rem);
  --fs-lead: clamp(1.06rem, 1rem + .3vw, 1.22rem);
  --fs-num:  clamp(2.6rem, 1.6rem + 4.2vw, 6.5rem);   /* l'amplitude vit ici */
  --fs-ui:   .82rem;

  /* Trame */
  --gut: clamp(1.1rem, .6rem + 2vw, 2.6rem);
  --wrap: 1280px;
  --r: 3px;            /* volontairement dur : atelier, pas application */
  --r-lg: 5px;
  --header-h: 76px;
  --t: 260ms cubic-bezier(.22,.61,.36,1);
  --t-fast: 150ms ease;
}

body {
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; }
p { text-wrap: pretty; }

.wrap { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; }
.lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 62ch; }
.eyebrow {
  font-size: var(--fs-ui); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy);
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Sections : chaque surface déclare SON fond ET SA couleur */
.section { padding-block: clamp(3.4rem, 2rem + 5vw, 7rem); background: var(--paper); color: var(--ink); }
.section--alt   { background: var(--paper-2); color: var(--ink); }
.section--navy{ background: var(--navy); color: #EAF2EC; }
.section--navy .lead { color: #C3D8CB; }
.section--navy .eyebrow { color: var(--sky); }
.section--ink   { background: var(--ink); color: #E6EAE7; }
.section--ink .lead { color: #A9B4AE; }
.section--ink .eyebrow { color: var(--sky); }

.section-head { max-width: 68ch; margin-bottom: clamp(1.8rem, 1rem + 2vw, 3rem); }
.section-head h2 { margin-top: .5rem; }
.section-head .lead { margin-top: 1rem; }

/* --- Boutons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 50px; padding: .82rem 1.5rem;
  font-family: var(--f-ui); font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  border-radius: var(--r); border: 1.5px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn--navy { background: var(--navy); color: #F2F8F3; }
.btn--navy:hover { background: var(--navy-2); }
.btn--sky { background: var(--sky); color: var(--sky-ink); }
.btn--sky:hover { background: var(--sky-2); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn--onDark { border-color: rgba(255,255,255,.34); color: #EFF5F0; background: transparent; }
.btn--onDark:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.btn--block { width: 100%; }
.btn .ic { width: 18px; height: 18px; flex: none; }

/* --- En-tête (variante : rail latéral compact + barre fine) --------- */
.topline {
  background: var(--ink); color: #CBD4CE;
  font-size: .78rem; letter-spacing: .04em;
}
.topline .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 34px; }
.topline b { color: var(--sky); font-weight: 600; }
.topline-right { display: flex; gap: 1.2rem; }
@media (max-width: 760px) { .topline-right { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-bar {
  display: flex; align-items: center; gap: 1.4rem;
  min-height: var(--header-h);
  width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto;
}
.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.brand-mark {
  width: 40px; height: 40px; flex: none; border-radius: 2px;
  background: var(--navy); color: var(--sky);
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.03em;
}
.brand-word { display: flex; flex-direction: column; line-height: 1.05; }
.brand-word b { font-family: var(--f-display); font-size: 1.02rem; letter-spacing: -.02em; }
.brand-word span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav a {
  font-size: .92rem; font-weight: 500; padding-block: .4rem;
  border-bottom: 2px solid transparent; transition: border-color var(--t-fast), color var(--t-fast);
}
.nav a:hover { color: var(--navy); }
.nav a[aria-current="page"] { border-bottom-color: var(--sky); color: var(--navy); }
@media (max-width: 1060px) {
  .nav { display: none; }
  .header-cta { display: none; }   /* CTA header retiré sous 1060px */
}

/* le burger vit HORS d'un conteneur display:none (piège déjà payé) */
.burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line-strong);
  border-radius: var(--r); position: relative;
}
.burger span {
  position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink);
  transition: transform var(--t), opacity var(--t-fast);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.is-menu .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.is-menu .burger span:nth-child(2) { opacity: 0; }
.is-menu .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1060px) { .burger { display: block; } }

.drawer {
  position: fixed; inset: 0; z-index: 70;
  background: var(--ink); color: #E6EAE7;
  padding: calc(var(--header-h) + 1.4rem) var(--gut) 2rem;
  display: flex; flex-direction: column; gap: .2rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  overflow-y: auto; overscroll-behavior: contain;
}
.is-menu .drawer { opacity: 1; visibility: visible; transform: none; }
.drawer a.d-link {
  font-family: var(--f-display); font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2rem);
  padding: .72rem 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.drawer .d-group { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin-top: 1.4rem; }
.drawer-foot { margin-top: auto; padding-top: 1.6rem; display: grid; gap: .6rem; }

/* --- Le hero : triptyque des trois métiers -------------------------- */
.hero { position: relative; background: var(--ink); color: #EDF2EE; overflow: hidden; }
.hero-inner {
  width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto;
  padding-block: clamp(2.6rem, 1.6rem + 3vw, 4.2rem) clamp(2rem, 1rem + 2vw, 3rem);
}
/* deux colonnes sur grand écran : sans ça, la moitié droite du hero
   restait vide au-dessus du triptyque */
@media (min-width: 1000px) {
  .hero-top { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem,1rem+3vw,4.5rem); align-items: end; }
}
.hero h1 { max-width: 17ch; color: #FFFFFF; }
.hero-side { border-left: 2px solid var(--sky); padding-left: 1.3rem; }
.hero-side dt { font-family: var(--f-display); font-size: 1.06rem; color: #FFFFFF; }
.hero-side dd { margin: .15rem 0 1.1rem; font-size: .92rem; color: #A9B7AF; }
.hero-side dd:last-child { margin-bottom: 0; }
@media (max-width: 999px) { .hero-side { margin-top: 1.8rem; } }
.hero .hero-sub { margin-top: 1.1rem; max-width: 54ch; color: #B4C0B9; font-size: var(--fs-lead); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }

.tryp {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  margin-top: clamp(2rem, 1rem + 3vw, 3.4rem);
}
.tryp-panel {
  position: relative; display: block;
  /* les trois panneaux faisaient 180 px écrasés dans la page : ils tenaient
     la promesse « trois métiers » sans qu'on voie rien. Ils prennent
     maintenant la moitié de l'écran. */
  min-height: clamp(340px, 46vh, 520px);
  overflow: hidden; background: var(--navy-2);
}
.tryp-panel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(.9) brightness(.8);
  transition: transform var(--t), filter var(--t);
}
.tryp-panel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,22,48,0) 34%, rgba(6,22,48,.92) 100%);
}
.tryp-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.3rem; }
.tryp-body b { font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); color: #FFF; }
.tryp-body span { font-size: .9rem; color: #C3CFC7; margin-top: .3rem; }
.tryp-tag {
  align-self: flex-start; margin-bottom: .7rem;
  background: var(--sky); color: var(--sky-ink);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 2px;
}
.tryp-panel:hover img, .tryp-panel:focus-visible img { transform: scale(1.04); filter: saturate(1) brightness(.95); }
.tryp-panel:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }

@media (max-width: 820px) {
  /* Le rail horizontal ne montrait qu'un métier et demi : la piscine, celle
     que le nom de l'entreprise cache déjà, était invisible sans balayer.
     Trois bandes empilées, les trois se voient. */
  .tryp { grid-template-columns: 1fr; gap: 6px; }
  .tryp-panel { min-height: 168px; }
  .tryp-body { padding: 1rem 1.1rem; }
  .tryp-body b { font-size: 1.25rem; }
  .tryp-body span { font-size: .84rem; }
}

/* --- Bande de faits ------------------------------------------------- */
.facts { background: var(--navy); color: #EAF2EC; }
.facts-in {
  width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: rgba(255,255,255,.14);
}
.fact { background: var(--navy); padding: 1.6rem 1.3rem; }
.fact b { display: block; font-family: var(--f-display); font-size: var(--fs-num); line-height: .92; color: var(--sky); letter-spacing: -.04em; }
.fact span { display: block; margin-top: .5rem; font-size: .9rem; color: #C3D8CB; }

/* --- Métiers -------------------------------------------------------- */
.trades { display: grid; gap: clamp(2.4rem, 1.4rem + 3vw, 4.6rem); }
.trade { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.6rem, 1rem + 3vw, 3.6rem); align-items: center; }
.trade:nth-child(even) .trade-art { order: 2; }
.trade-art { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); }
.trade-art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.trade-art .stamp {
  position: absolute; left: 0; bottom: 0;
  background: var(--sky); color: var(--sky-ink);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .8rem;
}
.trade h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.trade-list { margin-top: 1.2rem; display: grid; gap: .55rem; }
.trade-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .98rem; }
.trade-list li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: .55rem;
  background: var(--sky); border-radius: 1px;
}
.trade-cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 860px) {
  .trade { grid-template-columns: 1fr; }
  .trade:nth-child(even) .trade-art { order: 0; }
}

/* --- Mur de réalisations ------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.filter {
  padding: .5rem .95rem; min-height: 44px; display: inline-flex; align-items: center;
  border: 1.5px solid var(--line-strong); border-radius: var(--r);
  font-size: .88rem; font-weight: 500; transition: all var(--t-fast);
}
.filter:hover { border-color: var(--navy); color: var(--navy); }
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #F2F8F3; }

/* Le mur était en colonnes CSS avec des photos portrait, paysage et carré
   mélangées : des trous blancs énormes et aucune ligne d'horizon commune.
   Grille régulière, un seul format pour toutes : c'est ça, la justesse. */
/* grid-auto-flow: dense — sans lui, une tuile double qui ne tient plus sur
   la ligne passe à la suivante et laisse une case vide derrière elle. Sur
   trente-neuf photos ça faisait six trous en pleine grille. */
.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, .5rem + .6vw, 18px); grid-auto-flow: dense; }
.wall figure { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: var(--paper-2); }
.wall img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--t); }
/* Une photo sur sept prend deux places, pour que le mur respire. Mais sur
   six photos cette règle laissait une tuile orpheline en bas de grille :
   elle ne s'applique qu'aux murs assez fournis pour l'absorber. */
.wall--long figure:nth-child(7n+1) { grid-column: span 2; }
.wall--long figure:nth-child(7n+1) img { aspect-ratio: 8 / 3; }
.wall figure:hover img { transform: scale(1.03); }
.wall figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem .9rem .8rem;
  background: linear-gradient(180deg, transparent, rgba(6,22,48,.88));
  color: #EDF2EE; font-size: .84rem;
  opacity: 0; transition: opacity var(--t);
}
.wall figure:hover figcaption, .wall figure:focus-within figcaption { opacity: 1; }
@media (max-width: 900px) { .wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  /* deux colonnes et non une : douze photos en pleine largeur faisaient
     quinze écrans de défilement d'affilée */
  .wall { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .wall--long figure:nth-child(7n+1) { grid-column: span 2; }
  .wall figcaption { font-size: .78rem; padding: 1.4rem .6rem .6rem; }
}

/* --- Méthode -------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.step { background: var(--paper); padding: 1.7rem 1.4rem; }
.step-k { display: block; width: 34px; height: 34px; border-radius: 2px; background: var(--navy); color: var(--sky); display: grid; place-items: center; }
.step-k svg { width: 18px; height: 18px; }
.step h3 { margin-top: 1rem; }
.step p { margin-top: .5rem; font-size: .95rem; color: var(--ink-soft); }

/* --- Marques -------------------------------------------------------- */
.brands { display: flex; flex-wrap: wrap; gap: .6rem; }
.brand-chip {
  border: 1.5px solid rgba(255,255,255,.26); border-radius: var(--r);
  padding: .6rem 1.1rem; font-family: var(--f-display); font-size: 1.05rem; letter-spacing: .01em;
}

/* --- Chantiers datés ------------------------------------------------ */
.sites { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.site-card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.site-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.site-card .sc-body { padding: 1.1rem 1.2rem 1.3rem; }
.site-card b { font-family: var(--f-display); font-size: 1.15rem; }
.site-card time { display: block; margin-top: .2rem; font-size: .82rem; color: var(--ink-mute); letter-spacing: .04em; }
.site-card p { margin-top: .6rem; font-size: .93rem; color: var(--ink-soft); }

/* --- Formulaire ----------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.field input, .field select, .field textarea {
  /* ≥16px sinon iOS zoome au focus */
  font-size: 16px; padding: .82rem .9rem;
  background: var(--white); color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: var(--r);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(63,169,245,.22);
}
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: block; padding: .9rem 1rem; min-height: 56px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--white);
  font-weight: 500; transition: all var(--t-fast);
}
.choice input:checked + span { border-color: var(--navy); background: var(--sky-soft); color: var(--navy); }
.choice input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 2px; }
.form-actions { display: grid; gap: .6rem; margin-top: 1.4rem; }
@media (min-width: 620px) { .form-actions { grid-template-columns: 1fr 1fr; } }
.form-note { margin-top: .9rem; font-size: .85rem; color: var(--ink-mute); }

/* --- Recap ---------------------------------------------------------- */
.recap { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); padding: 1.2rem 1.3rem; }
.recap h3 { font-size: 1.05rem; }
.recap dl { margin-top: .8rem; display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; font-size: .92rem; }
.recap dt { color: var(--ink-mute); }
.recap dd { margin: 0; font-weight: 500; }

/* --- FAQ ------------------------------------------------------------ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2.4rem 1.15rem 0; position: relative;
  font-family: var(--f-display); font-size: 1.12rem; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .3rem; top: 1.5rem;
  width: 10px; height: 10px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(45deg); transition: transform var(--t-fast);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq-a { padding-bottom: 1.2rem; color: var(--ink-soft); max-width: 72ch; }

/* --- Valeur en attente ---------------------------------------------- */
/* Tant que config.js n'est pas rempli : pointillé, jamais un faux numéro */
.await {
  border-bottom: 1.5px dotted var(--sky); color: var(--ink-mute);
  font-style: normal;
  /* pas de nowrap : une mention longue poussait la page à 363 px sur un
     écran de 360 (constaté sur les mentions légales) */
  overflow-wrap: anywhere;
}
.section--ink .await, .section--navy .await, .site-footer .await { color: #A9B4AE; }

/* --- Barre mobile collante ------------------------------------------ */
.mbar {
  position: fixed; inset: auto 0 0 0; z-index: 55;
  display: none; gap: .5rem; padding: .55rem var(--gut) calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(10,31,60,.97); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.14);
}
.mbar .btn { flex: 1; min-height: 48px; }
@media (max-width: 860px) { .mbar { display: flex; } body { padding-bottom: 74px; } }

/* Le hero porte déjà « Chiffrer » et « Demander un rappel ». Laisser la
   barre collante par-dessus, c'est afficher les deux mêmes actions deux
   fois sur le premier écran. Elle ne monte qu'une fois le hero dépassé. */
.mbar { transform: translateY(0); transition: transform .28s var(--t); }
body.hero-visible .mbar { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) { .mbar { transition: none; } }

/* --- Révélation ----------------------------------------------------- */
/* filet .has-js : sans JS, rien ne reste invisible */
.has-js .rv { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--t), transform .5s var(--t); }
.has-js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .has-js .rv { opacity: 1; transform: none; transition: none; } }

/* --- En-tête de page interne (jamais plein écran) ------------------- */
.page-head { background: var(--navy); color: #EAF2EC; padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); }
.page-head .crumbs { font-size: .8rem; letter-spacing: .06em; color: #A8C4B4; margin-bottom: .8rem; }
.page-head .crumbs a:hover { color: var(--sky); }
.page-head h1 { color: #FFFFFF; max-width: 20ch; }
.page-head .lead { margin-top: .9rem; color: #C3D8CB; }

/* =====================================================================
   PAGES INTERNES
   ===================================================================== */

/* Cartes « ce qu'on installe » — jamais trois cartes à icônes identiques :
   chaque carte porte un intitulé métier et un texte différent. */
/* Les trois pages métier ont six cartes. En auto-fit le poste large
   tombait sur quatre colonnes : la seconde rangée laissait deux cases
   vides, un trou gris en pleine grille. Trois colonnes tombent juste. */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--white); padding: 1.6rem 1.4rem; }
.card b { display: block; font-family: var(--f-display); font-size: 1.16rem; letter-spacing: -.01em; }
.card p { margin-top: .5rem; font-size: .95rem; color: var(--ink-soft); }
.card .tag { display: inline-block; margin-bottom: .8rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); background: var(--sky-soft); padding: .24rem .55rem; border-radius: 2px; }

/* Duo de photos pleine largeur */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duo figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--paper-2); }
.duo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.duo figcaption { padding: .8rem .2rem 0; font-size: .88rem; color: var(--ink-mute); }
@media (max-width: 700px) { .duo { grid-template-columns: 1fr; } }

/* Ce qui est compris / ce qui ne l'est pas */
.scope { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.scope-box { border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.4rem 1.6rem; background: var(--white); }
.scope-box--plus { background: var(--paper-2); }
.scope-t { font-family: var(--f-display); font-size: 1.05rem; margin-bottom: .9rem; }
.scope-box li { display: flex; gap: .6rem; padding: .45rem 0; font-size: .95rem; color: var(--ink-soft); }
.scope-box li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .5rem; border-radius: 1px; background: var(--sky); }
.scope-box--plus li::before { background: var(--line-strong); }
@media (max-width: 760px) { .scope { grid-template-columns: 1fr; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.6rem, 1rem + 3vw, 3.4rem); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.cbox { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); display: grid; }
.cbox > * { padding: 1.15rem 1.3rem; }
.cbox > * + * { border-top: 1px solid var(--line); }
.cbox b { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .3rem; }
.cbox span, .cbox a { font-size: 1rem; }
.cbox a:hover { color: var(--navy-3); }

/* Prose légale */
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); margin-top: 2.4rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { margin-top: .9rem; color: var(--ink-soft); }
.prose li { display: flex; gap: .6rem; }
.prose li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .62rem; border-radius: 1px; background: var(--sky); }
.prose dl { margin-top: 1rem; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; }
.prose dt { color: var(--ink-mute); font-size: .92rem; }
.prose dd { margin: 0; font-weight: 500; }

/* Bandeau d'appel de fin de page */
.closing { background: var(--navy); color: #E7EEF8; text-align: center; padding-block: clamp(2.8rem, 1.8rem + 3vw, 4.6rem); }
.closing h2 { color: #FFFFFF; max-width: 22ch; margin-inline: auto; }
.closing p { margin: 1rem auto 0; max-width: 56ch; color: #B7C6DA; }
.closing .hero-actions { justify-content: center; }

/* Avertissement honnête : ce que l'entreprise n'a pas encore fourni */
.todo { border: 1px dashed var(--sky); border-radius: var(--r); background: var(--sky-soft); padding: 1.1rem 1.3rem; }
.todo b { display: block; font-family: var(--f-display); font-size: 1.02rem; margin-bottom: .4rem; color: var(--navy); }
.todo p, .todo li { font-size: .93rem; color: #33455F; }
.todo li { display: flex; gap: .55rem; padding: .18rem 0; }
.todo li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .55rem; background: var(--sky); border-radius: 1px; }

/* Les listes de définitions des mentions légales débordaient à 390 px :
   la colonne « auto » plus une valeur longue dépassaient la largeur. */
.prose dl { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
.prose dd, .prose dt { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 560px) {
  .prose dl { grid-template-columns: 1fr; gap: .15rem; }
  .prose dt { margin-top: .8rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
}
.cbox span, .cbox a { overflow-wrap: anywhere; }

/* Le formulaire restait sur deux colonnes jusqu'à 360 px : Échéance et
   Commune se retrouvaient à 155 px de large chacune. Une colonne sous 640. */
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; gap: .95rem; }
  .choices { grid-template-columns: 1fr; }
  .recap dl { grid-template-columns: 1fr; gap: .1rem; }
  .recap dt { margin-top: .7rem; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; }
}
.recap dl { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
.recap dd, .recap dt { overflow-wrap: anywhere; min-width: 0; }

/* =====================================================================
   CIBLES TACTILES — relevé de l'audit du 2026-09-03
   Trois défauts systématiques, présents sur les 8 pages et toutes les
   largeurs : le logo à 40 px, les liens de pied de page à 18 px et les
   liens de navigation à 39 px. La règle du studio est 44 px minimum.
   ===================================================================== */
.brand { min-height: 44px; }

/* Les liens du pied de page ne faisaient que la hauteur de leur texte :
   la zone cliquable était l'écriture elle-même, pas la ligne. */
.footer-top li { padding: 0; }
.footer-top li a { display: block; padding: .55rem 0; min-height: 44px; display: flex; align-items: center; }

.nav a { padding-block: .78rem; }

/* Le lien du pied de page vers le studio, et ceux des mentions légales */
.footer-bottom a { display: inline-block; padding-block: .35rem; }
.prose a { padding-block: .2rem; }

/* =====================================================================
   RETOURS DE L'AUDIT CODEX — 2026-09-03
   ===================================================================== */

/* 1. Entre 861 et 1060 px, le bouton du header était masqué et la barre
   mobile pas encore affichée : aucune action principale à l'écran.
   On aligne les deux seuils sur 1060. */
@media (max-width: 1060px) { .mbar { display: flex; } body { padding-bottom: 74px; } }

/* 2. Le tiroir passe au-dessus du header, le burger transformé en croix
   était donc recouvert : il fallait connaître la touche Échap pour sortir. */
.drawer-close {
  position: absolute; top: 1rem; inset-inline-end: var(--gut);
  width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r); color: #E6EEF8;
  display: grid; place-items: center;
}
.drawer-close:hover { border-color: var(--sky); color: var(--sky); }
.drawer-close svg { width: 20px; height: 20px; }

/* 6. Sur téléphone, le descriptif du hero mangeait un écran entier avant
   d'arriver aux photos. Il se resserre en trois lignes compactes. */
@media (max-width: 820px) {
  .hero-side { border-left: 0; border-top: 2px solid var(--sky); padding: 1rem 0 0; margin-top: 1.4rem; }
  .hero-side dt { font-size: .95rem; }
  .hero-side dd { margin: .1rem 0 .7rem; font-size: .86rem; line-height: 1.5; }
  .hero-side dd:last-child { margin-bottom: 0; }
  .tryp { grid-auto-columns: 72%; }
  .tryp-panel { min-height: 260px; }
}

/* 7. Les légendes de chantier n'apparaissaient qu'au survol : sur un
   téléphone, elles n'existaient tout simplement pas. */
@media (hover: none), (max-width: 768px) {
  .wall figcaption { opacity: 1; font-size: .86rem; padding-top: 2.2rem; }
}

/* 12. Les trois pages métier tombaient sur la même cadence. On resserre
   une section sur deux pour casser la régularité. */
.section--tight { padding-block: clamp(2.2rem, 1.4rem + 2.4vw, 4rem); }

/* 3. Bouton d'envoi verrouillé tant que la demande est inexploitable */
.btn.is-off { opacity: .5; cursor: not-allowed; }
.form-manque {
  margin-top: .8rem; padding: .7rem .9rem; font-size: .9rem;
  color: var(--navy); background: var(--sky-soft);
  border-inline-start: 3px solid var(--sky); border-radius: 0 var(--r) var(--r) 0;
}


/* =====================================================================
   RESPIRATION — sur 42 photos, aucune n'était montrée en grand.
   Une bande pleine largeur casse la succession de vignettes.
   ===================================================================== */
.bande { position: relative; background: var(--navy); }
.bande img { width: 100%; height: clamp(280px, 44vh, 520px); object-fit: cover; display: block; }
/* Le dégradé partait de transparent pile là où commence le titre : sur une
   photo claire (carrelage blanc, faïence, PVC gris) le texte blanc devenait
   illisible. Il est maintenant déjà à mi-densité sous la première ligne. */
.bande-txt {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 clamp(1.4rem,1rem+2vw,2.6rem);
  background: linear-gradient(180deg,
    transparent 0%, rgba(6,22,48,.42) 32%, rgba(6,22,48,.84) 64%, rgba(6,22,48,.96) 100%);
}
.bande-txt .wrap { color: #FFFFFF; }
.bande-txt b { display: block; font-family: var(--f-display); font-size: clamp(1.3rem,1.1rem+1vw,2rem); text-shadow: 0 1px 14px rgba(6,22,48,.6); }
.bande-txt span { display: block; margin-top: .3rem; color: #CBD9EA; font-size: .95rem; max-width: 52ch; text-shadow: 0 1px 10px rgba(6,22,48,.6); }


/* =====================================================================
   LES TROIS MÉTIERS — refonte du 2026-09-04
   Ils étaient trois blocs « photo à gauche / texte à droite » alternés :
   le squelette le plus banal du web, et trois écrans de haut. Une seule
   composition, trois colonnes alignées sur la même ligne d'horizon, la
   moitié de la hauteur, et les trois métiers se comparent d'un coup d'oeil.
   ===================================================================== */
.metiers3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, .6rem + 1.4vw, 2rem); }
.metier { display: flex; flex-direction: column; min-width: 0; }
.metier-art { position: relative; border-radius: var(--r); overflow: hidden; background: var(--paper-2); }
.metier-art img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform var(--t); }
.metier:hover .metier-art img { transform: scale(1.03); }
.metier-art .stamp {
  position: absolute; left: 0; bottom: 0; background: var(--sky); color: var(--sky-ink);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .34rem .7rem;
}
.metier h3 { margin-top: 1.1rem; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); }
.metier > p { margin-top: .5rem; font-size: .95rem; color: var(--ink-soft); }
.metier ul { margin-top: .9rem; display: grid; gap: .4rem; }
.metier li { display: flex; gap: .55rem; font-size: .92rem; color: var(--ink-soft); }
.metier li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .5rem; background: var(--sky); border-radius: 1px; }
.metier .metier-cta { margin-top: auto; padding-top: 1.2rem; }
.metier .metier-cta a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  font-weight: 600; font-size: .93rem; color: var(--navy); border-bottom: 2px solid var(--sky); }
.metier .metier-cta a:hover { color: var(--navy-3); }
@media (max-width: 880px) {
  .metiers3 { grid-template-columns: 1fr; gap: 2.2rem; }
  .metier-art img { aspect-ratio: 16 / 10; }
}

/* La bande des marques était presque vide : trois puces perdues dans un
   aplat marine. Elle se resserre et les marques prennent du poids. */
.brands { gap: .7rem; }
.brand-chip { font-size: clamp(1.1rem, 1rem + .6vw, 1.6rem); padding: .7rem 1.4rem; }

/* =====================================================================
   LE PREMIER ÉCRAN — refonte du 2026-09-04
   Retour de Salim : « il faut que tout soit sur la première page quand tu
   rentres sur un site ». Le hero tient désormais dans un écran, repères,
   promesse, actions et les trois métiers compris. Et la bandelette de
   texte du haut, datée, a disparu au profit de repères en pastilles.
   ===================================================================== */

/* En-tête posé SUR le hero : plus de bandeau qui vole de la hauteur. */
.site-header--sur {
  position: absolute; inset: 0 0 auto 0; z-index: 60;
  background: transparent; backdrop-filter: none; border-bottom: 0;
}
.site-header--sur .brand-word b { color: #FFFFFF; }
.site-header--sur .brand-word span { color: #9DB0C6; }
.site-header--sur .nav a { color: #DCE6F2; }
.site-header--sur .nav a:hover { color: var(--sky); }
.site-header--sur .burger { border-color: rgba(255,255,255,.3); }
.site-header--sur .burger span { background: #FFFFFF; }
/* le hero est en marine : l'en-tête redevient opaque dès qu'on le quitte */
body.is-scrolled .site-header--sur {
  position: fixed; background: rgba(10,31,60,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  animation: descend .28s var(--t) both;
}
@keyframes descend { from { transform: translateY(-100%); } to { transform: none; } }

/* Le hero occupe l'écran, pas plus, pas moins. */
.hero { display: flex; align-items: stretch; min-height: 100svh; }
.hero-inner {
  display: flex; flex-direction: column; justify-content: center;
  width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto;
  padding-block: calc(var(--header-h) + 1.4rem) 1.6rem;
}
.hero-top { flex: none; }

/* Repères en pastilles, à la place de l'ancienne bandelette de texte */
.hero-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }
.hero-tags span {
  font-family: var(--f-ui); font-size: .76rem; font-weight: 500; letter-spacing: .02em;
  color: #CBDAEA; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill, 100px);
  padding: .34rem .8rem;
}
.hero-tags span:first-child { color: var(--sky); border-color: rgba(63,169,245,.45); background: rgba(63,169,245,.12); }

.hero h1 { max-width: 15ch; }
.hero .hero-sub { margin-top: .9rem; max-width: 48ch; }
.hero-actions { margin-top: 1.4rem; }
.hero-side dd { margin-bottom: .8rem; }

/* Le triptyque prend la hauteur qui reste, sans jamais pousser la page. */
.tryp { margin-top: clamp(1.4rem, .8rem + 1.6vw, 2.4rem); flex: 1 1 auto; min-height: 0; }
.tryp-panel { min-height: 0; height: 100%; }

@media (max-width: 1100px) {
  .hero-top { display: block; }
  .hero-side { display: none; }   /* la colonne de droite passe en dessous */
}
@media (max-width: 820px) {
  .hero-inner { padding-block: calc(var(--header-h) + .8rem) 1rem; }
  .hero .hero-sub { font-size: 1rem; margin-top: .7rem; }
  .hero-actions { margin-top: 1.1rem; gap: .5rem; }
  .hero-actions .btn { flex: 1; min-width: 0; padding-inline: .9rem; }
  .tryp { gap: 5px; }
  .tryp-panel { min-height: 88px; }
  .tryp-body { padding: .7rem .9rem; }
  .tryp-body b { font-size: 1.05rem; }
  .tryp-body span { font-size: .76rem; }
  .tryp-tag { margin-bottom: .35rem; padding: .2rem .45rem; font-size: .62rem; }
}

/* L'en-tête est maintenant posé par-dessus : les pages internes doivent
   lui laisser sa hauteur, sinon le fil d'Ariane passe dessous. */
.page-head { padding-block: calc(var(--header-h) + clamp(1.6rem, 1rem + 2vw, 3rem)) clamp(2rem, 1.2rem + 2.4vw, 3.4rem); }

/* Sur le hero marine, le bouton marine et le carré du logo marine
   devenaient invisibles : ils s'inversent. */
.site-header--sur .brand-mark { background: var(--sky); color: var(--navy); }
.site-header--sur .header-cta .btn { background: var(--sky); color: var(--sky-ink); border-color: var(--sky); }
.site-header--sur .header-cta .btn:hover { background: var(--sky-2); border-color: var(--sky-2); }
body.is-scrolled .site-header--sur .brand-mark { background: var(--sky); color: var(--navy); }

/* =====================================================================
   PROPORTIONS DU PREMIER ÉCRAN SUR TÉLÉPHONE
   Le titre, la promesse et les deux boutons occupaient les deux tiers de
   l'écran : le troisième métier passait sous la barre collante. Chaque
   bloc reprend sa juste part.
   ===================================================================== */
@media (max-width: 820px) {
  /* le hero s'arrête au-dessus de la barre collante, il ne passe pas dessous */
  .hero { min-height: calc(100svh - 74px); }

  /* les repères tiennent sur une seule ligne */
  .hero-tags { gap: .3rem; margin-bottom: .8rem; }
  .hero-tags span { font-size: .68rem; padding: .26rem .55rem; }

  /* le titre garde son autorité sans manger l'écran */
  .hero h1 { font-size: clamp(1.72rem, 1.3rem + 2vw, 2.1rem); max-width: 14ch; }
  .hero .hero-sub { font-size: .94rem; line-height: 1.55; max-width: 40ch; margin-top: .6rem; }

  /* deux boutons, une ligne chacun, jamais deux */
  .hero-actions .btn {
    min-height: 46px; padding: .6rem .7rem; font-size: .84rem;
    letter-spacing: 0; white-space: nowrap;
  }

  /* les trois métiers prennent la hauteur restante, à parts égales */
  .tryp { margin-top: 1rem; gap: 5px; }
  .tryp-panel { min-height: 104px; }
  .tryp-body { padding: .6rem .8rem; }
  .tryp-body b { font-size: 1rem; }
  .tryp-body span { font-size: .72rem; }
  .tryp-tag { margin-bottom: .28rem; padding: .16rem .42rem; font-size: .58rem; letter-spacing: .08em; }
}
@media (max-width: 400px) {
  .hero-tags span:last-child { display: none; }  /* trois pastilles ne tiennent pas sous 400 */
}

/* La barre collante fait 96 px, pas 74 : le triptyque la chevauchait de
   quelques pixels. Une seule variable pour les deux réservations. */
:root { --mbar-h: 96px; }
@media (max-width: 1060px) { body { padding-bottom: var(--mbar-h); } }
@media (max-width: 820px)  { .hero { min-height: calc(100svh - var(--mbar-h)); } }
@media (max-width: 440px)  { .hero-tags span:last-child { display: none; } }

/* Écrans courts (iPhone SE et assimilés, 360x780) : le triptyque dépassait
   encore de 17 px. On resserre à la hauteur, pas à la largeur. */
@media (max-width: 820px) and (max-height: 800px) {
  .hero-tags { margin-bottom: .6rem; }
  .hero h1 { font-size: 1.62rem; }
  .hero .hero-sub { font-size: .88rem; margin-top: .5rem; }
  .hero-actions { margin-top: .9rem; }
  .hero-actions .btn { min-height: 44px; font-size: .8rem; }
  .tryp { margin-top: .8rem; gap: 4px; }
  .tryp-panel { min-height: 92px; }
  .tryp-body { padding: .5rem .7rem; }
  .tryp-body b { font-size: .95rem; }
  .tryp-body span { font-size: .68rem; }
}

/* iPhone SE (375x667) et écrans très courts : la promesse passe sous le
   pli, les trois métiers restent visibles. C'est eux qui vendent. */
@media (max-width: 820px) and (max-height: 700px) {
  .hero .hero-sub { display: none; }
  .hero h1 { font-size: 1.5rem; }
  .hero-tags span { font-size: .64rem; padding: .22rem .5rem; }
  .tryp-panel { min-height: 78px; }
  .tryp-body b { font-size: .9rem; }
  .tryp-body span { display: none; }
}

/* =====================================================================
   LES TROIS MÉTIERS — les photos reprennent leur place
   Elles étaient en 3/4 portrait, soit 400x530 par colonne : trois murs
   d'images côte à côte, et le texte relégué sous le pli. Sur un site de
   services, la photo appuie le propos, elle ne le remplace pas.
   ===================================================================== */
.metier-art img { aspect-ratio: 16 / 10; }
.metier h3 { margin-top: .9rem; }
.metier > p { margin-top: .45rem; }
.metier ul { margin-top: .8rem; }
@media (max-width: 880px) {
  /* en pile, une photo par métier en bandeau fin : on la voit, elle ne
     pousse pas le texte à trois écrans de distance */
  .metier-art img { aspect-ratio: 21 / 9; }
  .metiers3 { gap: 1.8rem; }
}

/* Deuxième passe : en 16/10 la photo dominait encore chaque colonne.
   Bandeau 21/9 : elle situe le métier, le titre reprend la main. */
.metier-art img { aspect-ratio: 21 / 9; }
.metier-art .stamp { font-size: .64rem; padding: .28rem .6rem; }
.metier h3 { margin-top: .85rem; font-size: clamp(1.14rem, 1.02rem + .4vw, 1.35rem); }
.metier > p { font-size: .92rem; }
.metier li { font-size: .89rem; }
/* la section respirait trop : près de 200 px de vide avant le titre */
#metiers { padding-block: clamp(2.6rem, 1.8rem + 3vw, 4.6rem); }
#metiers .section-head { margin-bottom: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); }
@media (max-width: 880px) { .metier-art img { aspect-ratio: 2 / 1; } }

/* L'en-tête est collant : sans cette réserve, un clic sur « Nos métiers »
   fait atterrir le titre de section dessous. */
section[id], [id]:target { scroll-margin-top: calc(var(--header-h) + 14px); }

/* =====================================================================
   MENU À SOUS-MENUS — demande client du 2026-09-04
   Trois colonnes, une par métier, ouvertes au survol et au clavier.
   ===================================================================== */
.nav-item { position: relative; }
.nav-trig {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .92rem; font-weight: 500; padding-block: .78rem;
  border-bottom: 2px solid transparent; color: inherit;
}
.nav-trig svg { transition: transform var(--t-fast); }
.nav-item:hover .nav-trig, .nav-trig[aria-expanded="true"] { color: var(--sky); }
.nav-item:hover .nav-trig svg, .nav-trig[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-drop {
  /* Ancré sur le déclencheur, un panneau de 760 px sortait de l'écran :
     à droite en 1440, à gauche en 1280. On l'aligne sur le bord du
     contenu, comme le fait n'importe quel méga-menu qui tient. */
  position: fixed; top: calc(var(--header-h) + 10px);
  left: max(var(--gut), calc((100vw - var(--wrap)) / 2));
  width: min(760px, calc(100vw - var(--gut) * 2));
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -28px rgba(6,22,48,.5);
  padding: 1.4rem; z-index: 80;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
/* pont invisible : on ne perd pas le survol entre le lien et le panneau */
.nav-drop::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop,
.nav-trig[aria-expanded="true"] + .nav-drop { opacity: 1; visibility: visible; transform: none; }

.nd-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.nd-col { min-width: 0; }
.nd-head {
  display: block; font-family: var(--f-display); font-size: 1rem; color: var(--navy);
  padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.nd-head:hover { color: var(--navy-3); }
.nd-link {
  display: flex; align-items: center; min-height: 40px;
  font-size: .88rem; color: var(--ink-soft); padding: .2rem .4rem;
  border-radius: var(--r); transition: background var(--t-fast), color var(--t-fast);
}
.nd-link:hover { background: var(--sky-soft); color: var(--navy); }
.nd-foot {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line);
  min-height: 44px; font-weight: 600; font-size: .9rem; color: var(--navy);
}
.nd-foot:hover { color: var(--navy-3); }

/* sous-liens du tiroir mobile */
.d-sub {
  display: block; font-size: .85rem; color: #9DB3CB;
  padding: 0 0 .7rem; margin-top: -.5rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.d-sub:hover { color: var(--sky); }

/* --- Zone d'intervention --------------------------------------------- */
.secteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.secteur { background: var(--white); padding: 1.5rem 1.4rem 1.7rem; }
.secteur h2 { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.secteur > p { margin-top: .4rem; font-size: .9rem; color: var(--ink-mute); }
.communes { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.communes li {
  font-size: .84rem; color: var(--ink-soft);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: .3rem .6rem;
}

/* --- Rappel de zone sur l'accueil ------------------------------------ */
.zone-flash { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,1rem+3vw,3.4rem); align-items: center; }
.zone-flash .lead { color: #BCCDE2; }
.zone-puces { display: flex; flex-wrap: wrap; gap: .4rem; align-content: center; }
.zone-puces li {
  font-size: .86rem; color: #DCE8F5;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r); padding: .42rem .75rem;
}
@media (max-width: 880px) { .zone-flash { grid-template-columns: 1fr; gap: 1.6rem; } }

/* L'en-tête posé sur le hero passe ses liens en blanc : le panneau, lui,
   est sur fond clair. Il reprend ses propres couleurs, quoi qu'il arrive. */
.site-header .nav-drop .nd-head,
.site-header--sur .nav-drop .nd-head { color: var(--navy); }
.site-header .nav-drop .nd-link,
.site-header--sur .nav-drop .nd-link { color: var(--ink-soft); }
.site-header .nav-drop .nd-link:hover,
.site-header--sur .nav-drop .nd-link:hover { color: var(--navy); background: var(--sky-soft); }
.site-header .nav-drop .nd-foot,
.site-header--sur .nav-drop .nd-foot { color: var(--navy); }
.site-header--sur .nav-drop .nd-head:hover,
.site-header--sur .nav-drop .nd-foot:hover { color: var(--navy-3); }

/* =====================================================================
   LE HERO — scène plein écran, 2026-09-04
   Retour de Salim : « je trouve ça bien fade ». Le hero était un aplat
   marine avec du texte. Il devient une photo de chantier plein écran qui
   change, pilotée par les trois métiers du rail : survoler un métier
   change le fond. Le décor n'est pas décoratif, il montre le travail.
   ===================================================================== */
.hero { position: relative; overflow: hidden; isolation: isolate; }

.hero-bg { position: absolute; inset: 0; z-index: -2; background: var(--navy-2); }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s ease, transform 9s linear;
}
.hero-slide.is-on { opacity: 1; transform: scale(1.14); }

/* Le voile : assez dense à gauche pour que le texte tienne, assez clair à
   droite pour qu'on voie le chantier. Ni photo éteinte, ni texte illisible. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(6,22,48,.95) 0%, rgba(6,22,48,.86) 38%, rgba(6,22,48,.5) 70%, rgba(6,22,48,.62) 100%),
    linear-gradient(180deg, rgba(6,22,48,.6) 0%, transparent 26%, transparent 52%, rgba(6,22,48,.88) 100%);
}
@media (max-width: 880px) {
  .hero::before {
    background: linear-gradient(180deg, rgba(6,22,48,.9) 0%, rgba(6,22,48,.78) 42%, rgba(6,22,48,.94) 100%);
  }
}

/* Le rail des trois métiers, en bas de la scène */
.hero-rail {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, .3rem + 1vw, 1.6rem);
  margin-top: auto; padding-top: clamp(1.6rem, 1rem + 2vw, 2.8rem);
}
.hr {
  display: flex; flex-direction: column; gap: .2rem;
  padding-top: .9rem; min-width: 0;
  color: #C6D6E8; transition: color var(--t-fast);
}
.hr-bar { display: block; height: 2px; background: rgba(255,255,255,.22); margin-bottom: .7rem; overflow: hidden; }
.hr-bar i { display: block; height: 100%; width: 0; background: var(--sky); }
.hr[aria-selected="true"] .hr-bar i { width: 100%; transition: width 6s linear; }
.hr-tag {
  align-self: flex-start; font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sky);
}
.hr b { font-family: var(--f-display); font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem); color: #FFFFFF; letter-spacing: -.01em; }
.hr-sub { font-size: .84rem; color: #9DB3CB; }
.hr:hover, .hr:focus-visible { color: #FFFFFF; }
.hr:hover .hr-sub { color: #C6D6E8; }
.hr[aria-selected="true"] .hr-sub { color: #C6D6E8; }
.hr:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; }

@media (max-width: 700px) {
  .hero-rail { grid-template-columns: 1fr; gap: 0; padding-top: 1.2rem; }
  .hr { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: .5rem; padding: .7rem 0 .8rem; }
  .hr-bar { position: absolute; left: 0; right: 0; margin: 0; }
  .hr { position: relative; }
  .hr b { font-size: 1.02rem; }
  .hr-sub { flex: 1 1 100%; font-size: .76rem; }
  .hr-tag { font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity .01s; transform: none; }
  .hero-slide.is-on { transform: none; }
  .hr[aria-selected="true"] .hr-bar i { transition: none; }
}

/* La règle « en-tête sur le hero » ne visait que les <a> : le déclencheur
   du sous-menu est un <button>, il restait marine sur marine, invisible. */
.site-header--sur .nav-trig { color: #DCE6F2; }
.site-header--sur .nav-trig:hover,
.site-header--sur .nav-trig[aria-expanded="true"] { color: var(--sky); }
body.is-scrolled .site-header--sur .nav-trig { color: #DCE6F2; }

/* Le hero laissait un grand vide entre la promesse et le rail : une
   invitation à faire défiler, discrète, occupe la place. */
.hero-scroll {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: clamp(1.6rem, 1rem + 2vw, 3rem);
  font-family: var(--f-ui); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: #8FA6C0;
}
.hero-scroll span { display: block; width: 34px; height: 1px; background: var(--sky); transform-origin: left; animation: tire 2.4s ease-in-out infinite; }
@keyframes tire { 0%,100% { transform: scaleX(.35); } 50% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hero-scroll span { animation: none; transform: scaleX(1); } }
@media (max-width: 880px) { .hero-scroll { display: none; } }

/* Les photos de chantier sont prises au téléphone : sous le voile marine
   elles viraient au gris. Un rappel de contraste et de saturation leur
   rend leur matière, sans les dénaturer. */
.hero-slide { filter: saturate(1.12) contrast(1.08) brightness(1.04); }
/* Le voile est très dense sur le tiers gauche, là où vit le titre. Le
   groupe extérieur de la première photo est décalé vers la zone claire
   pour rester lisible derrière le texte. */
.hero-slide--clim { object-position: 62% center; }
@media (max-width: 880px) { .hero-slide--clim { object-position: 48% center; } }
.hero::before {
  background:
    linear-gradient(100deg, rgba(6,22,48,.94) 0%, rgba(6,22,48,.82) 36%, rgba(6,22,48,.38) 68%, rgba(6,22,48,.52) 100%),
    linear-gradient(180deg, rgba(6,22,48,.55) 0%, transparent 24%, transparent 54%, rgba(6,22,48,.9) 100%);
}

/* Le texte de droite passe sur trois photos différentes, dont une très
   claire : il lui faut son propre fond, pas seulement le voile général.
   Sinon la lisibilité dépend de la photo affichée à cet instant. */
.hero-side {
  background: linear-gradient(90deg, rgba(6,22,48,.72), rgba(6,22,48,.5));
  backdrop-filter: blur(3px);
  padding: 1.1rem 1.3rem 1.1rem 1.3rem;
  border-left: 2px solid var(--sky);
  border-radius: 0 var(--r) var(--r) 0;
}
@media (max-width: 999px) { .hero-side { padding: 1rem 1.1rem; } }

/* =====================================================================
   TROIS CONFIGURATIONS POUR LE RAIL DU HERO
   La classe se pose sur .hero-rail. Par défaut : la version « filets ».
   ===================================================================== */
.hr-vig { display: none; }

/* --- B · MINIATURES : on voit ce que le fond va montrer --------------- */
.hero-rail--vignettes { grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.hero-rail--vignettes .hr {
  padding: 0; border-radius: var(--r); overflow: hidden;
  background: rgba(6,22,48,.55); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.hero-rail--vignettes .hr:hover { transform: translateY(-3px); }
.hero-rail--vignettes .hr[aria-selected="true"] { border-color: var(--sky); background: rgba(63,169,245,.16); }
.hero-rail--vignettes .hr-vig { display: block; }
/* 16/9 poussait le rail hors de l'écran : la miniature s'aplatit et la
   ligne de description passe à la trappe, le nom du métier suffit. */
.hero-rail--vignettes .hr-vig img { width: 100%; aspect-ratio: 2.6 / 1; object-fit: cover; }
.hero-rail--vignettes .hr-sub { display: none; }
.hero-rail--vignettes .hr b { margin-bottom: .8rem; }
.hero-rail--vignettes .hr-bar { margin: 0; }
.hero-rail--vignettes .hr-tag { margin: .7rem .9rem 0; }
.hero-rail--vignettes .hr b { margin: .1rem .9rem 0; }
.hero-rail--vignettes .hr-sub { margin: 0 .9rem .9rem; }


/* B sur téléphone : trois miniatures côte à côte deviendraient illisibles.
   La photo passe à gauche en petit, le nom du métier à côté. */
@media (max-width: 700px) {
  .hero-rail--vignettes { grid-template-columns: 1fr; gap: .45rem; }
  .hero-rail--vignettes .hr {
    display: grid; grid-template-columns: 76px 1fr; align-items: center;
    gap: .8rem; padding: 0; overflow: hidden;
  }
  .hero-rail--vignettes .hr-vig { grid-row: span 3; }
  .hero-rail--vignettes .hr-vig img { aspect-ratio: 1; height: 100%; }
  .hero-rail--vignettes .hr-tag { margin: .5rem .8rem 0 0; }
  .hero-rail--vignettes .hr b { margin: 0 .8rem .5rem 0; font-size: 1rem; }
  .hero-rail--vignettes .hr-bar { grid-column: 2; }
}

/* Ordinateurs à écran court (1280x800, MacBook Air 13") : le hero
   dépassait de 46 px. On resserre à la hauteur, la largeur va bien. */
@media (min-width: 881px) and (max-height: 880px) {
  .hero-inner { padding-block: calc(var(--header-h) + .8rem) 1.1rem; }
  .hero h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); }
  .hero .hero-sub { font-size: 1rem; margin-top: .7rem; }
  .hero-actions { margin-top: 1.1rem; }
  .hero-scroll { margin-top: 1.1rem; }
  .hero-rail { padding-top: 1.2rem; }
  .hero-rail--vignettes .hr-vig img { aspect-ratio: 3.4 / 1; }
  .hero-rail--vignettes .hr-tag { margin-top: .5rem; }
  .hero-rail--vignettes .hr b { margin-bottom: .55rem; }
  .hero-side dd { margin-bottom: .55rem; }
}

/* Tablette en paysage et petits portables (hauteur ≤ 740) : il faut
   choisir. La promesse s'efface, les trois métiers restent. */
@media (min-width: 701px) and (max-height: 740px) {
  .hero .hero-sub { display: none; }
  .hero-scroll { display: none; }
  .hero h1 { font-size: 1.9rem; }
  .hero-tags { margin-bottom: .7rem; }
  .hero-actions { margin-top: 1rem; }
  .hero-rail { padding-top: 1rem; }
  .hero-rail--vignettes .hr-vig img { aspect-ratio: 4.2 / 1; }
}

/* La barre collante s'affiche dès 1060 px de large, mais le hero ne lui
   réservait sa hauteur qu'en dessous de 820 : entre les deux, le rail
   passait sous la barre. Même seuil pour les deux, une bonne fois. */
@media (max-width: 1060px) { .hero { min-height: calc(100svh - var(--mbar-h)); } }

/* Très petits écrans : quelques pixels manquaient encore. */
@media (max-width: 820px) and (max-height: 660px) {
  .hero-tags { display: none; }
  .hero h1 { font-size: 1.42rem; }
  .hero-rail--vignettes .hr-vig img { aspect-ratio: 1.4 / 1; }
}

/* Deux sections de même couleur qui se suivent additionnaient leurs marges :
   220 px de vide au milieu d'un aplat marine. La jonction se resserre. */
.section--navy + .section--navy,
.section--alt + .section--alt,
.section--navy + .closing { padding-top: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); }

/* Les pastilles de communes sur fond clair */
.section--alt .zone-puces li {
  color: var(--ink-soft); background: var(--white);
  border-color: var(--line-strong);
}
.section--alt .zone-flash .lead { color: var(--ink-soft); }

/* =====================================================================
   PIED DE PAGE — refait le 2026-09-04
   L'ancien tenait sur trois colonnes maigres, avec les coordonnées
   écrasées sous la description. Quatre blocs, de l'air, et une hiérarchie
   qui se lit : la marque et comment la joindre, puis le plan du site,
   puis les communes.
   ===================================================================== */
.site-footer {
  background: var(--navy); color: #B9C9DD;
  padding-block: clamp(3.2rem, 2.2rem + 3.6vw, 5.4rem) 1.8rem;
}
.footer-top {
  display: grid; grid-template-columns: 1.15fr 1.85fr;
  gap: clamp(2.2rem, 1.4rem + 3vw, 4.6rem);
}
.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 1rem + 2vw, 3rem); }

.site-footer .brand { min-height: 44px; margin-bottom: 1.1rem; }
.site-footer .brand-mark { background: var(--sky); color: var(--navy); }
.site-footer .brand-word b { color: #FFFFFF; }
.site-footer .brand-word span { color: #8FA6C0; }

.footer-baseline { font-size: .93rem; line-height: 1.7; max-width: 38ch; color: #A9BCD2; }

.footer-coord { margin-top: 1.6rem; display: grid; gap: .1rem; }
.footer-coord li {
  display: grid; grid-template-columns: 92px 1fr; align-items: baseline;
  gap: .8rem; padding: .58rem 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.fc-k { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7E93AC; }
.fc-v { font-size: .95rem; color: #E4EDF7; }

.footer-cta { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
/* 44 px minimum, même sur les boutons compacts du pied de page */
.btn-sm { min-height: 44px; padding: .6rem 1.05rem; font-size: .86rem; }

.footer-col h4 {
  font-family: var(--f-ui); font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sky); margin-bottom: 1rem;
}
.footer-col li { padding: 0; }
.footer-col li a {
  display: flex; align-items: center; min-height: 44px;
  font-size: .93rem; color: #B9C9DD; transition: color var(--t-fast);
}
.footer-col li a:hover { color: #FFFFFF; }

.footer-villes { display: flex; flex-wrap: wrap; gap: .3rem; }
.footer-villes li { font-size: .8rem; color: #9CB0C7; padding: .22rem 0; }
.footer-villes li::after { content: " ·"; color: #55697F; }
.footer-villes li:last-child::after { content: ""; }
.footer-note { margin-top: .9rem; font-size: .78rem; line-height: 1.6; color: #7E93AC; max-width: 34ch; }

.footer-bottom {
  margin-top: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .9rem; justify-content: space-between;
  font-size: .8rem; color: #7E93AC;
}
.footer-bottom a { display: inline-block; padding-block: .35rem; }
.footer-bottom a:hover { color: #FFFFFF; }

@media (max-width: 980px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .footer-nav { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-coord li { grid-template-columns: 1fr; gap: .1rem; }
  .footer-cta .btn { flex: 1; }
}

/* =====================================================================
   L'APPEL DE FIN DE PAGE
   Il était marine sur un pied de page marine : les deux se fondaient, avec
   200 px de vide au milieu et un grand blanc à droite des boutons.
   Un bloc à part, deux colonnes, collé au pied de page.
   ===================================================================== */
.appel {
  background: linear-gradient(160deg, var(--navy-3) 0%, var(--navy) 62%);
  color: #E7EEF8;
  padding-block: clamp(2.6rem, 1.8rem + 3vw, 4.4rem);
  border-top: 1px solid rgba(255,255,255,.1);
}
.appel .eyebrow { color: var(--sky); }
.appel .lead { color: #BCCDE2; }
.appel-in {
  display: grid; grid-template-columns: 1.4fr .9fr;
  gap: clamp(1.8rem, 1.2rem + 3vw, 4rem); align-items: center;
}
.appel-actions { display: grid; gap: .6rem; }
.appel-note { font-size: .82rem; line-height: 1.55; color: #93A9C2; margin-top: .3rem; }
/* collé au pied de page : plus d'aplat marine vide entre les deux */
.appel + .site-footer { padding-top: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); }
@media (max-width: 860px) { .appel-in { grid-template-columns: 1fr; gap: 1.6rem; } }

/* Une photo dans la colonne latérale : les pages Devis et Contact
   n'avaient aucune image, la colonne de droite finissait dans le vide. */
.aside-photo { margin: 1.4rem 0 0; border-radius: var(--r); overflow: hidden; background: var(--paper-2); }
.aside-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.aside-photo figcaption { padding: .7rem .1rem 0; font-size: .84rem; color: var(--ink-mute); }

/* --- Recentrage climatisation réversible (2026-09-06) ------------------ */
.nd-col--sec .nd-head { color: var(--ink-mute); font-weight: 500; }
.aussi { margin-top: 1.6rem; color: var(--ink-mute); font-size: .95rem; text-align: center; }
.aussi a { color: var(--navy-3); text-decoration: underline; text-underline-offset: 3px; }
.eco3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.eco3 article { background: var(--white); padding: 1.5rem 1.4rem; }
.eco3 h3 { font-family: var(--f-display); font-size: 1.15rem; margin: .6rem 0 .5rem; letter-spacing: -.01em; }
.eco3 p { color: var(--ink-soft); font-size: .95rem; }
.eco-k { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sky-soft); color: var(--navy-3); font-weight: 700; }
@media (max-width: 900px) { .eco3 { grid-template-columns: 1fr; } }
/* formulaire de besoin */
.input-unit { position: relative; }
.input-unit input { padding-right: 3.2rem; }
.input-unit span { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--ink-mute); font-size: .9rem; }
.lab-opt { text-transform: none; letter-spacing: 0; color: var(--ink-mute); font-weight: 400; }
.consent { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; font-size: .92rem; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.consent input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--sky-2); flex: none; }
.recap-box { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); padding: 1.1rem 1.2rem; }
.recap-box > b { display: block; font-family: var(--f-display); font-size: 1.05rem; margin-bottom: .6rem; }
.recap-box dl { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: .35rem .8rem; font-size: .92rem; }
.recap-box dt { color: var(--ink-mute); }
.recap-box dd { color: var(--ink); overflow-wrap: anywhere; }
.steps-mini { margin-top: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.steps-mini > div { display: flex; gap: .9rem; align-items: flex-start; }
.steps-mini b { display: block; font-weight: 600; color: var(--ink); }
.steps-mini p { color: var(--ink-soft); font-size: .9rem; margin-top: .15rem; }
.step-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 700; font-size: .85rem; }
.form-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.envoi-ok { border: 1px solid var(--sky-2); background: var(--sky-soft); border-radius: var(--r); padding: 1.6rem 1.5rem; }
.envoi-ok h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.envoi-ok .ref { font-family: var(--f-display); color: var(--navy-3); }
.envoi-ko { border: 1px solid #E5B7A9; background: #FBF0EC; border-radius: var(--r); padding: 1.1rem 1.2rem; margin-top: 1rem; }
.btn.is-busy { opacity: .6; pointer-events: none; }

/* marques lues sur les appareils : photos, pas logos ---------------------- */
.marques3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, .5rem + 1vw, 1.4rem); }
.marques3 figure { margin: 0; border-radius: var(--r); overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.marques3 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.marques3 figcaption { padding: .8rem 1rem 1rem; }
.marques3 figcaption b { display: block; font-family: var(--f-display); font-size: 1.15rem; color: #FFFFFF; }
.marques3 figcaption span { display: block; color: #C3D2E2; font-size: .88rem; margin-top: .15rem; }
@media (max-width: 760px) { .marques3 { grid-template-columns: 1fr; } }

/* =====================================================================
   MISE EN PRODUCTION — 2026-10-07
   ===================================================================== */
/* Bandeau cookies : n'existe que si un identifiant Google est posé dans
   config.js. Refuser et Accepter ont la même taille (exigence CNIL). */
.cookie-bar {
  position: fixed; z-index: 90;
  left: max(var(--gut), calc((100vw - var(--wrap)) / 2)); bottom: 1rem;
  width: min(620px, calc(100vw - var(--gut) * 2));
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem;
  padding: 1rem 1.1rem; background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg, 10px);
  box-shadow: 0 24px 60px -28px rgba(6,22,48,.55);
  opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s;
}
.cookie-bar.in { opacity: 1; transform: none; }
.cookie-bar p { flex: 1 1 300px; margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.cookie-bar p b { color: var(--ink); margin-right: .35rem; }
.cookie-bar a { color: var(--navy-3); text-decoration: underline; }
.cookie-actions { display: flex; gap: .5rem; flex: 0 0 auto; }
.cookie-actions .btn { min-width: 112px; }
@media (max-width: 520px) { .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1; } }

/* Lien « Cookies » du pied de page : bouton qui se lit comme un lien */
.footer-cookies {
  font: inherit; color: inherit; background: none; border: 0; padding: .35rem 0; cursor: pointer;
  min-height: 44px; text-decoration: underline; text-underline-offset: 3px;
}
.footer-cookies:hover { color: #FFFFFF; }
.footer-note a { color: #B9CBE0; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
/* Sous-liens du menu mobile : 35 px mesurés, sous le minimum tactile */
.drawer .d-sub { min-height: 44px; display: flex; align-items: center; }

/* Coordonnées cliquables (numéro, e-mail) injectées depuis config.js */
.fc-v a, .cbox a, .prose dd a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.zone-hors {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper-2);
}
.zone-hors .lead { margin: 0; flex: 1 1 420px; }
/* Barre mobile : « Demander un devis » passait sur deux lignes à 390 px.
   Le devis prend plus de place qu'« Appeler », texte centré, sans retour. */
.mbar .btn { white-space: nowrap; justify-content: center; text-align: center; padding-inline: .8rem; }
.mbar .btn:first-child { flex: 1.45; }
/* Encadré qui prolonge la section précédente : pas de double marge */
.section--suite { padding-top: 0; }