/* ==========================================================================
   Winter Couverture : feuille de style unique.
   Palette relevee sur le logo, un marine unique #0d3a59 decline en paliers.
   Le cuivre n apparait qu une fois, sur l urgence, et nulle part ailleurs.
   ========================================================================== */

:root {
  --nuit:        #0a2740;
  --nuit-2:      #0d3a59;
  --nuit-3:      #17507a;
  --bleu:        #17608f;
  --bleu-fonce:  #0d3a59;
  --bleu-vif:    #3d92cf;
  --brume:       #eef3f8;
  --brume-2:     #dde8f1;
  --trait:       #ccdbe8;
  --ardoise:     #4a5f73;
  --encre:       #0c1e2e;
  --blanc:       #ffffff;
  --cuivre:      #c0762a;

  --ombre-1: 0 1px 2px rgba(10, 39, 64, .06), 0 2px 8px rgba(10, 39, 64, .05);
  --ombre-2: 0 2px 6px rgba(10, 39, 64, .08), 0 12px 32px rgba(10, 39, 64, .10);
  --ombre-3: 0 18px 50px rgba(10, 39, 64, .22);

  --large: 1180px;
  --lecture: 70ch;
  --r: 4px;
  --r-2: 10px;

  --titre: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --corps: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 17px;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

/* Toutes les images du site sont enveloppees dans un <picture> pour servir
   du webp. Sans regle, ce <picture> est une boite en ligne sans hauteur :
   le « height: 100% » de l image ne se resout alors sur rien, elle garde son
   ratio d origine et « object-fit: cover » ne recadre jamais. Resultat, trois
   cartes d une meme rangee n avaient pas la meme hauteur d image.
   display: contents efface la boite et rend l image enfant direct du cadre. */
picture { display: contents; }

/* Filet de securite : un pictogramme sans regle dediee prenait la taille
   par defaut du navigateur. Il reste alignable au texte partout. */
svg { width: 20px; height: 20px; flex: none; vertical-align: middle; }

/* Le logo porte des attributs width et height reels. Fixer la seule
   hauteur en CSS l etirait, il faut relacher la largeur. */
.marque img, .pied-logo img, .volet-haut img { width: auto; max-width: none; }

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.021em;
  text-wrap: balance;
  margin: 0 0 .55em;
  color: var(--nuit);
}
h1 { font-size: clamp(2.05rem, 1.35rem + 2.6vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 1.18rem + 1.55vw, 2.4rem); }
h3 { font-size: clamp(1.16rem, 1.04rem + .45vw, 1.4rem); }
h4 { font-size: 1.05rem; letter-spacing: -.01em; }

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

a { color: var(--bleu-fonce); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--bleu); }

/* Double lisere de focus. Un lisere bleu unique mesurait 2,98 de contraste
   sur la brume et 2,86 sur le nuit-3, sous le seuil de 3 pour un element non
   textuel, et aucune teinte de bleu ne peut passer sur les deux a la fois :
   elles encadrent la gamme. On pose donc un anneau clair puis un anneau
   sombre, si bien que l un des deux tranche toujours, quel que soit le fond.
   Verifie par at_focus2.js, qui doit rendre zero element sous le seuil. */
:focus-visible {
  outline: 3px solid var(--blanc);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--nuit);
  border-radius: 2px;
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Le lien d evitement est le premier element focalisable de la page. Laisse
   masque, il donne un focus invisible : l utilisateur au clavier ne sait pas
   ou il se trouve. Il doit reapparaitre des qu il recoit le focus. */
a.sr:focus, a.sr:focus-visible {
  position: fixed; top: 10px; left: 10px; z-index: 300;
  width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
  background: var(--nuit); color: var(--blanc);
  font-family: var(--titre); font-weight: 700; font-size: .95rem;
  padding: .7rem 1.1rem; border-radius: var(--r);
  box-shadow: var(--ombre-3); text-decoration: none;
}

/* --------------------------------------------------------------- ossature */

.enveloppe { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: 22px; }

.bande { padding-block: clamp(3.2rem, 2rem + 4vw, 5.6rem); }
.bande--brume { background: var(--brume); }
.bande--nuit  { background: var(--nuit); color: #cfe0ef; }
.bande--serre { padding-block: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); }

.bande--nuit h2, .bande--nuit h3, .bande--nuit h4 { color: var(--blanc); }
.bande--nuit a { color: var(--bleu-vif); }

.mesure { max-width: var(--lecture); }

/* Le faite de toit : deux pans, repris du pictogramme du logo.
   Sert de separateur entre une bande claire et la bande marine. */
.faite {
  height: 26px; margin: 0; border: 0; padding: 0;
  background: var(--nuit);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 100%;
}
.faite--inverse { background: var(--brume); clip-path: polygon(0 0, 100% 0, 50% 100%); }

.sur-titre {
  font-family: var(--titre);
  font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .15em;
  color: var(--bleu); margin: 0 0 .7rem;
  display: flex; align-items: center; gap: .6rem;
}
.sur-titre::before {
  content: ""; width: 26px; height: 2px; background: var(--bleu); flex: none;
}
.bande--nuit .sur-titre { color: var(--bleu-vif); }
.bande--nuit .sur-titre::before { background: var(--bleu-vif); }

.chapo { font-size: 1.12rem; color: var(--ardoise); max-width: 62ch; }
.bande--nuit .chapo { color: #9fbdd6; }

/* --------------------------------------------------------------- boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--titre); font-size: 1rem; font-weight: 700;
  padding: .82rem 1.45rem; border-radius: var(--r); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 19px; height: 19px; flex: none; }

.btn--tel { background: var(--bleu); color: var(--blanc); }
.btn--tel:hover { background: var(--bleu-fonce); color: var(--blanc); }

.btn--devis { background: var(--blanc); color: var(--nuit); border-color: var(--nuit); }
.btn--devis:hover { background: var(--nuit); color: var(--blanc); }

.btn--clair { background: var(--blanc); color: var(--nuit); }
.btn--clair:hover { background: var(--brume); color: var(--nuit); }

.btn--fantome { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,.5); }
.btn--fantome:hover { background: rgba(255,255,255,.12); color: var(--blanc); border-color: var(--blanc); }

.duo-btn { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

/* --------------------------------------------------------------- en-tete */

.bandeau {
  background: var(--nuit); color: #a9c6de;
  font-size: .82rem; padding: .42rem 0;
}
.bandeau .enveloppe { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; justify-content: space-between; }
.bandeau b { color: var(--blanc); font-weight: 600; }
.bandeau-liste { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; list-style: none; margin: 0; padding: 0; }
.bandeau-liste li { display: flex; align-items: center; gap: .4rem; }
.bandeau-liste svg { width: 14px; height: 14px; color: var(--bleu-vif); flex: none; }
.bandeau-tel { color: inherit; text-decoration: none; }
.bandeau-tel b { color: var(--blanc); }
.bandeau-tel:hover b { text-decoration: underline; }
/* Sous 700 px le bandeau passait a trois lignes et prenait 180 px du
   premier ecran. Ces deux mentions sont reprises telles quelles dans les
   pastilles du hero et dans la barre d appel du bas. */
@media (max-width: 699px) { .bandeau-liste li.bandeau-second { display: none; } }

.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--trait);
  backdrop-filter: saturate(1.5) blur(6px);
}
.entete .enveloppe {
  display: flex; align-items: center; gap: 1.2rem;
  min-height: 74px;
}
.marque { display: flex; align-items: center; flex: none; margin-right: auto; }
.marque img { height: 58px; width: auto; }
@media (min-width: 900px) { .marque img { height: 70px; } }

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; align-items: center; gap: .2rem; }
}
.nav > a, .menu > button {
  font-family: var(--titre); font-size: .93rem; font-weight: 600;
  color: var(--nuit); text-decoration: none;
  padding: .55rem .7rem; border-radius: var(--r);
  background: none; border: 0; cursor: pointer; line-height: 1.3;
  display: inline-flex; align-items: center; gap: .3rem;
}
.nav > a:hover, .menu > button:hover { background: var(--brume); color: var(--bleu-fonce); }
.nav > a[aria-current="page"] { color: var(--bleu); box-shadow: inset 0 -2px 0 var(--bleu); }

.menu { position: relative; }
.menu > button svg { width: 13px; height: 13px; transition: transform .16s ease; }
.menu[data-ouvert="oui"] > button svg { transform: rotate(180deg); }
.menu-liste {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 290px; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: var(--r-2);
  box-shadow: var(--ombre-2); padding: .5rem; margin: 0;
  list-style: none; display: none; max-height: 70vh; overflow-y: auto;
}
.menu[data-ouvert="oui"] .menu-liste { display: block; }
.menu-liste a {
  display: block; padding: .5rem .7rem; border-radius: var(--r);
  font-size: .93rem; color: var(--nuit); text-decoration: none;
}
.menu-liste a:hover { background: var(--brume); color: var(--bleu-fonce); }

.entete .btn { padding: .62rem 1rem; font-size: .93rem; }
.entete-tel { display: none; }
@media (min-width: 700px) { .entete-tel { display: inline-flex; } }

.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--trait);
  border-radius: var(--r); background: var(--blanc); cursor: pointer; color: var(--nuit);
}
.hamburger svg { width: 22px; height: 22px; }
@media (min-width: 1000px) { .hamburger { display: none; } }

/* Le volet mobile est pose en fin de body par le script, hors de l en-tete
   colle, sinon le contexte d empilement de l en-tete l enfermerait. */
.volet {
  position: fixed; inset: 0; z-index: 200;
  background: var(--nuit); color: var(--blanc);
  overflow-y: auto; padding: 1.1rem 1.2rem 3rem;
  display: none;
}
.volet[data-ouvert="oui"] { display: block; }
.volet-haut { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.volet-haut img { height: 60px; width: auto; }
.volet-fermer {
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.3);
  background: none; color: var(--blanc); border-radius: var(--r); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.volet-fermer svg { width: 22px; height: 22px; }
.volet h3 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--bleu-vif); margin: 1.6rem 0 .5rem;
}
.volet ul { list-style: none; margin: 0; padding: 0; }
.volet a { display: block; padding: .6rem 0; color: var(--blanc); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.09); }
.volet .duo-btn { margin-top: 1.8rem; }
.volet .btn {
  width: 100%;
  /* on rend au bouton ce que « .volet a » lui avait pris */
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .82rem 1.45rem; border-bottom: 0;
}

/* --------------------------------------------------------------- heros */

.hero { position: relative; background: var(--nuit); overflow: hidden; }
.hero-fond { position: absolute; inset: 0; }
.hero-fond img { width: 100%; height: 100%; object-fit: cover; }
/* Voile allege le 2026-09-14. A 94 pour cent d opacite a gauche, la photo
   disparaissait completement derriere le titre : le hero n avait plus de
   sujet. Aucune photo du vivier n est reellement sombre, la plus basse est
   mesuree a 0,35 de luminance, c est donc le voile qui etait en cause.
   La lisibilite reste verifiee par at_contraste.js, qui doit rendre zero
   element sous le seuil. */
.hero-fond::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,39,64,.84) 0%, rgba(10,39,64,.72) 46%, rgba(10,39,64,.38) 100%),
    linear-gradient(to top, rgba(10,39,64,.7), rgba(10,39,64,0) 58%);
}
/* Le titre et l accroche gagnent une ombre portee discrete : elle rattrape
   le contraste sur les zones claires de la photo sans reassombrir le tout. */
/* Sur un ecran etroit, un degrade a 100 degres se projette presque
   entierement sur son premier arret : tout le hero se retrouvait a 0,84
   d opacite et la photo disparaissait, le hero mobile n etait plus qu un
   aplat bleu. On repasse donc en degrade vertical, sombre la ou il y a du
   texte et clair en bas, ou le formulaire occupe deja la place. */
@media (max-width: 899px) {
  /* Le hero mobile porte le formulaire : il mesure pres de trois mille
     pixels de haut. Une photo posee en fond sur toute cette hauteur est
     zoomee a l extreme et ne montre plus rien d identifiable, le hero
     n etait qu un aplat bleu. On la cantonne donc au haut du hero, la ou
     se trouvent le fil d Ariane, le titre et l accroche, avec un cadrage
     de proportion tenable, et le reste repose sur le bleu nuit. */
  .hero-fond { inset: 0 0 auto 0; height: min(58%, 640px); }
  .hero-fond::after {
    background: linear-gradient(to bottom,
      rgba(10,39,64,.78) 0%, rgba(10,39,64,.86) 64%, rgba(10,39,64,1) 100%);
  }
}
.hero h1, .hero-intro { text-shadow: 0 1px 14px rgba(10,39,64,.55); }
.hero .enveloppe { position: relative; z-index: 1; }
.hero-grille {
  display: grid; gap: 2.4rem;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  align-items: start;
}
/* Les deux colonnes du hero etaient calees en haut, mais le formulaire
   mesure 849 px quand le bloc de titre en fait 359 : il restait jusqu a
   490 px de vide sous les boutons, mesure sur huit pages. On centre les
   deux colonnes l une par rapport a l autre, le vide se repartit alors de
   part et d autre du titre au lieu de pendre sous lui. Uniquement en
   bureau : en dessous la grille repasse sur une seule colonne. */
@media (min-width: 1000px) {
  .hero-grille {
    grid-template-columns: minmax(0,1.05fr) 420px;
    gap: 3.2rem;
    align-items: center;
  }
}

.hero h1 { color: var(--blanc); }
.hero-intro { color: #c6dbec; font-size: 1.14rem; max-width: 58ch; }
.hero .sur-titre { color: var(--bleu-vif); }
.hero .sur-titre::before { background: var(--bleu-vif); }

.hero-preuves { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.6rem; padding: 0; list-style: none; }
.hero-preuves li {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  border-radius: 100px; padding: .36rem .85rem;
  font-size: .86rem; color: var(--blanc);
}
.hero-preuves svg { width: 15px; height: 15px; color: var(--bleu-vif); flex: none; }

/* hero des pages interieures : plus bas, meme grammaire */
.hero--page .hero-grille { padding-block: clamp(2.4rem, 1.8rem + 3vw, 4rem); grid-template-columns: 1fr; }
.hero--page .hero-intro { max-width: 66ch; }

.fil { font-size: .82rem; color: #8fb1cb; margin-bottom: 1rem; }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.fil li::after { content: "›"; margin-left: .4rem; color: #5c819e; }
.fil li:last-child::after { content: ""; }
.fil a { color: #8fb1cb; text-decoration: none; }
.fil a:hover { color: var(--blanc); text-decoration: underline; }

/* --------------------------------------------------------------- formulaire */

.devis {
  background: var(--blanc); border-radius: var(--r-2);
  box-shadow: var(--ombre-3); padding: 1.5rem 1.4rem 1.4rem;
  border-top: 4px solid var(--bleu);
}
.devis h2 { font-size: 1.32rem; margin-bottom: .2rem; }
.devis-note { font-size: .86rem; color: var(--ardoise); margin-bottom: 1.1rem; }
.champ { margin-bottom: .8rem; }
.champ label { display: block; font-size: .82rem; font-weight: 600; color: var(--nuit); margin-bottom: .28rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; font: inherit; font-size: .97rem; color: var(--encre);
  padding: .66rem .8rem; border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--blanc);
}
.champ textarea { min-height: 92px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--bleu); }
.devis .btn { width: 100%; margin-top: .3rem; }
.devis-pied { font-size: .78rem; color: var(--ardoise); margin-top: .8rem; text-align: center; }
.leurre { position: absolute; left: -9999px; }

.reponse { margin-top: .9rem; padding: .75rem .9rem; border-radius: var(--r); font-size: .9rem; display: none; }
.reponse[data-etat="ok"]  { display: block; background: #e6f4ea; color: #14532d; border: 1px solid #9ed3b0; }
.reponse[data-etat="ko"]  { display: block; background: #fdecec; color: #7f1d1d; border: 1px solid #e9a8a8; }

/* --------------------------------------------------------------- cartes */

.grille { display: grid; gap: 1.2rem; }
/* 1fr vaut minmax(auto, 1fr) et le minimum auto est la largeur du plus long
   mot insecable. « Monistrol-sur-Loire » elargissait sa colonne et les trois
   cartes n avaient plus la meme largeur. min-width 0 remet les pistes a
   egalite, sans quoi aucun aspect-ratio ne tient. */
.grille > * { min-width: 0; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.carte {
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-2);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.carte:hover { box-shadow: var(--ombre-2); transform: translateY(-2px); border-color: var(--brume-2); }
/* flex: none, sinon l image se laisse etirer par la repartition de la hauteur
   dans la carte et son ratio ne tient plus : les trois cartes d une rangee
   n avaient alors pas la meme hauteur d image. */
.carte-img { position: relative; aspect-ratio: 3 / 2; background: var(--brume-2); flex: none; overflow: hidden; }
/* L image est sortie du flux. « height: 100% » sur un enfant dont le parent
   tire sa hauteur d un aspect-ratio est une reference circulaire : la regle
   retombe sur auto, l image garde son ratio d origine et fait grandir la
   boite. En position absolue, le cadre garde son ratio et l image le remplit
   vraiment. */
.carte-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-corps { padding: 1.05rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.carte-corps h3 { margin-bottom: .4rem; font-size: 1.1rem; }
.carte-corps p { font-size: .93rem; color: var(--ardoise); }
.carte-lien {
  margin-top: auto; padding-top: .8rem;
  font-family: var(--titre); font-size: .88rem; font-weight: 700; color: var(--bleu);
  display: inline-flex; align-items: center; gap: .35rem;
}
.carte a.couvre::after { content: ""; position: absolute; inset: 0; }
.carte { position: relative; }

.carte-etiq {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 1;
  background: var(--nuit); color: var(--blanc);
  font-family: var(--titre); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .26rem .6rem; border-radius: 3px;
}

/* carte de ville, compacte, avec photo */
.carte-ville { display: flex; flex-direction: row; align-items: stretch; gap: 0; }   /* la direction doit etre remise : .carte impose column */
.carte-ville .vignette { width: 92px; flex: none; background: var(--brume-2); position: relative; overflow: hidden; }
.carte-ville .vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-ville--texte .repere {
  width: 56px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--brume-2); color: var(--bleu);
}
.carte-ville--texte .repere svg { width: 20px; height: 20px; }
.carte-ville .texte { padding: .7rem .85rem; display: flex; flex-direction: column; justify-content: center; }
.carte-ville .texte strong { font-family: var(--titre); font-size: .98rem; color: var(--nuit); display: block; }
.carte-ville .texte span { font-size: .8rem; color: var(--ardoise); }

/* ----------------------------------------------- video de fond du hero */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .6s ease;
  pointer-events: none;
}
.hero-video--prete { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* --------------------------------------------------------------- duo texte + photo */

.duo { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.duo--inverse .duo-photo { order: -1; }
@media (max-width: 899px) { .duo--inverse .duo-photo { order: 0; } }
.duo-photo { border-radius: var(--r-2); overflow: hidden; box-shadow: var(--ombre-2); background: var(--brume-2); }
.duo-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.duo-photo figcaption {
  font-size: .82rem; color: var(--ardoise); padding: .55rem .8rem;
  background: var(--blanc); border-top: 1px solid var(--trait);
}
.bande--nuit .duo-photo figcaption { background: var(--nuit-2); color: #9fbdd6; border-color: var(--nuit-3); }

/* --------------------------------------------------------------- etapes */

.etapes { counter-reset: pas; display: grid; gap: 1.1rem; }
@media (min-width: 760px) { .etapes { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
.etape { position: relative; padding-top: 2.9rem; }
.etape::before {
  counter-increment: pas; content: counter(pas, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--titre); font-size: 1.05rem; font-weight: 800;
  color: var(--blanc); background: var(--bleu);
  width: 2.1rem; height: 2.1rem; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
}
.etape h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.etape p { font-size: .93rem; color: var(--ardoise); }
.bande--nuit .etape p { color: #9fbdd6; }
.bande--nuit .etape::before { background: var(--bleu-vif); color: var(--nuit); }

/* --------------------------------------------------------------- listes */

.puces { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 700px) { .puces--2 { grid-template-columns: 1fr 1fr; gap: .6rem 1.6rem; } }
.puces li { position: relative; padding-left: 1.75rem; font-size: .97rem; }
.puces li::before {
  content: ""; position: absolute; left: 0; top: .46em;
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--bleu); transform: rotate(45deg);
}
.bande--nuit .puces li::before { background: var(--bleu-vif); }

.chiffres { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.chiffre strong {
  display: block; font-family: var(--titre); font-weight: 800;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); color: var(--blanc);
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.chiffre span { font-size: .9rem; color: #9fbdd6; display: block; margin-top: .4rem; }

/* --------------------------------------------------------------- galerie */

.galerie { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.galerie figure { margin: 0; border-radius: var(--r-2); overflow: hidden; background: var(--brume-2); }
.galerie img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .3s ease; }
.galerie figure:hover img { transform: scale(1.04); }
.galerie figcaption { font-size: .8rem; color: var(--ardoise); padding: .45rem .55rem; background: var(--blanc); }

.bande--haute { position: relative; }
.large-photo { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-2); }
@media (max-width: 700px) { .large-photo { aspect-ratio: 16 / 10; } }

/* --------------------------------------------------------------- faq */

.faq { display: grid; gap: .55rem; max-width: 80ch; }
.faq details {
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-2);
}
.faq summary {
  cursor: pointer; list-style: none; padding: .95rem 3rem .95rem 1.1rem;
  font-family: var(--titre); font-weight: 700; font-size: 1rem; color: var(--nuit);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
/* La question est cliquable mais ne repondait pas au survol : aucun retour
   visuel sur un element qui s ouvre au clic. Le curseur seul ne suffit pas. */
.faq summary:hover { background: var(--brume); color: var(--bleu-fonce); }
.faq summary:hover::after { border-color: var(--bleu-fonce); }
.faq details[open] summary { background: var(--brume); }
.bande--nuit .faq summary:hover { background: var(--nuit-3); color: var(--blanc); }
.bande--nuit .faq details[open] summary { background: var(--nuit-3); }
.faq summary { transition: background-color .14s ease, color .14s ease; }
.faq summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.faq .rep { padding: 0 1.1rem 1.1rem; font-size: .97rem; color: var(--ardoise); }
.bande--nuit .faq details { background: var(--nuit-2); border-color: var(--nuit-3); }
.bande--nuit .faq summary { color: var(--blanc); }
.bande--nuit .faq .rep { color: #9fbdd6; }

/* --------------------------------------------------------------- urgence */

.urgence {
  background: var(--nuit-2); border-left: 4px solid var(--cuivre);
  border-radius: var(--r); padding: 1.2rem 1.3rem;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  color: var(--blanc);
}
.urgence p { color: #c6dbec; font-size: .95rem; margin: 0; max-width: 56ch; }
.urgence strong { color: var(--blanc); font-family: var(--titre); display: block; font-size: 1.12rem; margin-bottom: .2rem; }
.urgence .btn { background: var(--cuivre); color: var(--nuit); }
.urgence .btn:hover { background: #c07c22; color: var(--nuit); }

/* --------------------------------------------------------------- tableau */

.tableau { width: 100%; overflow-x: auto; }
.tableau table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 480px; }
.tableau th, .tableau td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--trait); }
.tableau th { font-family: var(--titre); font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--nuit); background: var(--brume); }
.tableau td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------------- pied */

.pied { background: var(--nuit); color: #9fbdd6; padding-block: 3.2rem 1.6rem; font-size: .92rem; }
.pied h3 {
  font-family: var(--titre); font-size: .76rem; font-weight: 600; color: var(--blanc);
  text-transform: uppercase; letter-spacing: .14em; margin: 0 0 .9rem;
}
.pied-grille { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .38rem; }
.pied a { color: #9fbdd6; text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied-logo img { height: 76px; width: auto; margin-bottom: .9rem; }
.pied-bas {
  margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--nuit-3);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-size: .84rem; color: #7fa2bd;
}

.pied-villes { display: flex; flex-wrap: wrap; gap: .3rem .9rem; list-style: none; margin: 0; padding: 0; font-size: .85rem; }

/* barre d appel mobile, collee en bas */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; gap: 1px; background: var(--nuit-3);
  box-shadow: 0 -4px 16px rgba(10,39,64,.22);
}
.barre-mobile a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .85rem .5rem; font-family: var(--titre); font-weight: 700; font-size: .95rem;
  text-decoration: none;
}
.barre-mobile a:first-child { background: var(--bleu); color: var(--blanc); }
.barre-mobile a:last-child  { background: var(--nuit); color: var(--blanc); }
.barre-mobile a:only-child  { background: var(--bleu); color: var(--blanc); }
.barre-mobile svg { width: 18px; height: 18px; }
@media (min-width: 760px) { .barre-mobile { display: none; } }
@media (max-width: 759px) { body { padding-bottom: 54px; } }

/* --------------------------------------------------- tailles des icones */
.bandeau-liste svg { width: 14px; height: 14px; }
.btn svg          { width: 19px; height: 19px; }
.entete .btn svg  { width: 17px; height: 17px; }
.hero-preuves svg { width: 15px; height: 15px; }
.menu > button svg { width: 13px; height: 13px; }
.hamburger svg, .volet-fermer svg { width: 22px; height: 22px; }
.carte-lien svg   { width: 15px; height: 15px; }
.pied ul svg      { width: 15px; height: 15px; margin-right: .35rem; }
.barre-mobile svg { width: 18px; height: 18px; }
.sur-titre svg    { width: 16px; height: 16px; }
.puces svg        { width: 16px; height: 16px; }
.pied ul li       { display: flex; align-items: flex-start; gap: .1rem; }

/* ------------------------------------------- cartes des trois territoires */
.carte-zone .carte-img { aspect-ratio: 16 / 10; }
.carte-zone .carte-etiq { font-size: .82rem; letter-spacing: .04em; }
.carte-compte {
  font-family: var(--titre); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--bleu); margin-bottom: .55rem;
}
.carte-villes { font-size: .88rem; margin-top: .2rem; }
.carte-villes a { color: var(--ardoise); text-decoration: none; }
.carte-villes a::after { content: ","; color: var(--trait); }
.carte-villes a:last-child::after { content: ""; }
.carte-villes a:hover { color: var(--bleu); text-decoration: underline; }
.carte-zone .carte-lien { text-decoration: none; }

/* ------------------------------------- les trois territoires dans le hero */
.hero-zones {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .5rem; list-style: none; margin: 1.7rem 0 0; padding: 0;
  max-width: 560px;
}
.hero-zones li {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.17);
  border-radius: var(--r-2); padding: .7rem .8rem .75rem;
}
.hero-zones strong {
  display: block; font-family: var(--titre); font-weight: 800;
  font-size: 1.35rem; line-height: 1; color: var(--bleu-vif);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hero-zones span {
  display: block; color: var(--blanc); font-size: .86rem;
  line-height: 1.25; margin-top: .3rem;
}
.hero-zones .hero-zone__n {
  color: #9fbdd6; font-size: .76rem; margin-top: .15rem;
}
@media (max-width: 560px) {
  .hero-zones { grid-template-columns: 1fr 1fr; }
  .hero-zones li:last-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------- pied, version courte */
.pied { padding-block: 2.6rem 1.3rem; }
.pied-grille { grid-template-columns: 1.3fr .9fr 1.7fr .7fr; gap: 1.8rem 1.6rem; align-items: start; }
@media (max-width: 900px) { .pied-grille { gap: 1.4rem 1.6rem; } }
@media (max-width: 900px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .pied-grille { grid-template-columns: 1fr; } }
.pied-marque p { font-size: .88rem; margin-bottom: .9rem; }
.pied-marque img { height: 48px; width: auto; margin-bottom: .8rem; }
.pied h4 {
  font-family: var(--titre); font-size: .84rem; font-weight: 700;
  color: var(--blanc); margin: 0 0 .3rem; display: flex; gap: .45rem; align-items: baseline;
}
.pied h4 span {
  font-size: .72rem; color: var(--bleu-vif); font-variant-numeric: tabular-nums;
}
.pied-zone { margin-bottom: .9rem; }
.pied-zone ul { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .84rem; }
.pied-zone ul li { display: inline; }
.pied-zone ul li::after { content: ","; color: var(--nuit-3); }
.pied-zone ul li:last-child::after { content: ""; }
/* sur mobile tout s empile sur une colonne : les dix prestations et les
   cinq liens de site font a eux seuls la moitie de la hauteur du pied */
@media (max-width: 900px) {
  .pied-deux, .pied-grille > div:last-child ul { grid-template-columns: 1fr 1fr; gap: .38rem 1rem; }
}
.pied-toutes { margin-top: .2rem; font-size: .86rem; }
.pied-toutes a { display: inline-flex; align-items: center; gap: .35rem; color: var(--bleu-vif); font-weight: 600; }
.pied-bas { margin-top: 1.9rem; padding-top: 1rem; }

/* L en-tete colle fait 74 px : sans cette marge, l ancre amene le haut du
   formulaire exactement dessous et le titre est masque. */
#devis, [id] { scroll-margin-top: 92px; }

/* ------------------------------------------------------------------------
   Les regles de couleur de .bande--nuit visent le texte pose DIRECTEMENT
   sur le marine. Elles debordaient dans les blocs a fond clair imbriques :
   le titre du formulaire de contact sortait blanc sur blanc, mesure a 1,00
   de contraste, et les titres de cartes a 3,30 au lieu de 4,5.
   Chaque bloc clair reprend donc explicitement ses couleurs, apres coup dans
   la feuille pour gagner a specificite egale.
   Voir [[feedback-cascade-specificite-egale]].
   ------------------------------------------------------------------------ */
.bande--nuit .carte h3,
.bande--nuit .carte h4,
.bande--nuit .carte strong      { color: var(--nuit); }
.bande--nuit .carte a           { color: var(--bleu-fonce); }
.bande--nuit .carte a:hover     { color: var(--bleu); }
.bande--nuit .carte p,
.bande--nuit .carte span        { color: var(--ardoise); }
.bande--nuit .carte .carte-lien { color: var(--bleu-fonce); }
/* span.carte-etiq et non .carte-etiq : la regle « .bande--nuit .carte span »
   ci-dessus vaut (0,2,1) et l emporterait sur (0,2,0). L etiquette serait
   alors ardoise sur marine, mesure a 2,71. */
.bande--nuit .carte span.carte-etiq { color: var(--blanc); }

.bande--nuit .devis,
.bande--nuit .devis label       { color: var(--encre); }
.bande--nuit .devis h2,
.bande--nuit .devis h3          { color: var(--nuit); }
.bande--nuit .devis a           { color: var(--bleu-fonce); }
.bande--nuit .devis .devis-note,
.bande--nuit .devis .devis-pied { color: var(--ardoise); }
.bande--nuit .devis .btn--tel   { color: var(--blanc); }


/* ================================================ tableaux sur telephone ==

   A placer EN FIN de feuille : a specificite egale c est la derniere regle
   qui l emporte, et « .tableau table » declare plus haut impose une largeur
   minimale qui empecherait tout empilement.
   ========================================================================= */

/* Le conteneur DOIT rester positionne, le degrade du bord droit se cale
   dessus. Sans cela il se positionnerait sur la page entiere et barrerait
   tout le cote droit. */
.tableau { position: relative; }

/* Deux colonnes, libelle et fourchette : sur telephone le tableau s empile,
   le montant passe sous son libelle et plus aucun prix ne sort de l ecran. */
@media (max-width: 620px) {
  .tableau--prix { overflow-x: visible; }
  .tableau--prix table { min-width: 0; width: 100%; }
  .tableau--prix thead { position: absolute; left: -9999px; }
  .tableau--prix table, .tableau--prix tbody,
  .tableau--prix tr, .tableau--prix td {
    display: block; width: auto;
  }
  .tableau--prix tr {
    border-bottom: 1px solid var(--trait);
    padding: .75rem 0;
  }
  .tableau--prix tr:last-child { border-bottom: 0; }
  .tableau--prix td { border: 0; padding: 0; }
  .tableau--prix td:first-child {
    font-size: .95rem; color: var(--encre); padding-bottom: .25rem;
  }
  .tableau--prix td:last-child {
    font-family: var(--titre); font-weight: 700; color: var(--bleu-fonce);
    font-variant-numeric: tabular-nums;
  }
}

/* Les tableaux a trois colonnes ne peuvent pas s empiler sans perdre le lien
   entre l en-tete et la valeur. Ils gardent leur defilement, avec un degrade
   qui dit qu il reste du contenu a droite. */
@media (max-width: 760px) {
  .tableau:not(.tableau--prix)::after {
    content: ""; position: absolute; inset-block: 0; right: 0; width: 34px;
    pointer-events: none;
    background: linear-gradient(to left, var(--blanc), rgba(255, 255, 255, 0));
  }
  .bande--brume .tableau:not(.tableau--prix)::after {
    background: linear-gradient(to left, var(--brume), rgba(238, 244, 250, 0));
  }
}

/* Les actions du volet sont posees en haut, juste sous le logo : c est la
   que le pouce arrive quand on ouvre le menu, et le volet fait deux fois la
   hauteur de l ecran. Elles restent visibles pendant qu on fait defiler la
   liste des prestations. */
.volet-actions {
  position: sticky; top: 0; z-index: 2;
  margin-bottom: .4rem; padding-bottom: .7rem;
  background: var(--nuit);
  box-shadow: 0 10px 14px -8px rgba(10, 39, 64, .9);
}

/* ------------------------------------------------ rythme vertical

   Les respirations entre blocs passaient par des div de calage ecrits dans
   le generateur, avec six hauteurs differentes. Le rythme se decide ici,
   en trois pas, et nulle part ailleurs. */
.cale { height: 1.8rem; }
.cale--s { height: 1.4rem; }
.cale--m { height: 1.8rem; }
.cale--l { height: 2.4rem; }
@media (max-width: 700px) {
  /* sur telephone on resserre : la meme respiration parait deux fois plus
     grande quand la colonne est trois fois plus etroite */
  .cale--s { height: 1rem; }
  .cale--m { height: 1.3rem; }
  .cale--l { height: 1.7rem; }
}
.cale-haut--s { margin-top: 1.4rem; }
.cale-haut--l { margin-top: 2.4rem; }
.tableau-note { margin-top: 1.4rem; font-size: .92rem; }
.texte-appuye { font-size: 1.05rem; }
.bande-serree { padding-block: 3rem; }

/* --------------------------------------------- voile de hero adaptatif */
/* Le voile etait identique pour toutes les photos alors que le vivier va
   de 0,35 a 0,64 de luminance, presque du simple au double. Sur les plus
   sombres il ne restait qu un aplat bleu nuit et le hero perdait son
   sujet. at_construire.py pose desormais une classe selon la photo servie.
   Attention, une media query n ajoute pas de specificite, voir
   [[feedback-cascade-specificite-egale]] : sans redeclarer les variantes
   dans le bloc mobile, la regle bureau a deux classes l emporterait sur la
   regle mobile qui n en porte qu une. */
.hero-fond--sombre::after {
  background:
    linear-gradient(100deg, rgba(10,39,64,.76) 0%, rgba(10,39,64,.64) 46%, rgba(10,39,64,.30) 100%),
    linear-gradient(to top, rgba(10,39,64,.66), rgba(10,39,64,0) 58%);
}
.hero-fond--clair::after {
  background:
    linear-gradient(100deg, rgba(10,39,64,.88) 0%, rgba(10,39,64,.78) 46%, rgba(10,39,64,.44) 100%),
    linear-gradient(to top, rgba(10,39,64,.74), rgba(10,39,64,0) 58%);
}
@media (max-width: 899px) {
  .hero-fond::after {
    background: linear-gradient(to bottom,
      rgba(10,39,64,.62) 0%, rgba(10,39,64,.76) 64%, rgba(10,39,64,1) 100%);
  }
  .hero-fond--sombre::after {
    background: linear-gradient(to bottom,
      rgba(10,39,64,.54) 0%, rgba(10,39,64,.70) 64%, rgba(10,39,64,1) 100%);
  }
  .hero-fond--clair::after {
    background: linear-gradient(to bottom,
      rgba(10,39,64,.70) 0%, rgba(10,39,64,.82) 64%, rgba(10,39,64,1) 100%);
  }
}

/* Le lien de la page courante porte son soulignement en ombre interne.
   L anneau exterieur du focus, pose lui aussi en box-shadow, le remplacait
   purement et simplement : en naviguant au clavier on perdait le repere de
   la page ou l on se trouve. On redonne les deux ensemble. */
.nav > a[aria-current="page"]:focus-visible {
  box-shadow: inset 0 -2px 0 var(--bleu), 0 0 0 8px var(--nuit);
}

/* Le fil d Ariane vivait dans la colonne de gauche du hero. En centrant les
   deux colonnes il descendait au milieu de l ecran, alors qu un fil d Ariane
   se lit en haut. On le sort de la grille : il reste cale en haut de
   l enveloppe et seul le bloc de titre se centre en face du formulaire. */
.hero .enveloppe > .fil {
  position: relative; z-index: 1;
  padding-top: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  margin-bottom: 0;
}
@media (min-width: 1000px) {
  .hero .enveloppe > .fil + .hero-grille { padding-top: 1.2rem; }
}