/* =========================================================
   VAROL ELEC — Feuille de style principale
   Palette « Marine & Rouge » : marine profond et bleu nuit pour la
   structure, crème pour respirer, et le rouge de la marque réservé aux
   détails — icônes, mots-clés, filets. Les boutons ne sont pas des aplats
   mais de simples cadres à l'encre marine, sur fond transparent.

   La construction est celle du site Varol Maçonnerie : même gabarit, mêmes
   six pages, même en-tête qui s'inverse au défilement. Seuls la palette et
   le contenu changent.

   RÉPARTITION DES FONDS
   Chaque bloc porte une teinte différente de ses voisins : aucune section
   ne se fond dans la suivante, et le rythme reste majoritairement clair.
   Tout tient sur deux clairs — le blanc et le crème — qui alternent.

     Accueil       bannière (photo) · réassurance (blanc) · l'artisan
                   (crème) · prestations (blanc) · réalisations (crème) ·
                   bornes IRVE (MARINE) · partenaires (crème) ·
                   pied de page (bleu nuit)
     À propos      titre (marine) · crème · blanc · crème + citation · nuit
     Prestations   titre (marine) · crème · devis (blanc) · nuit
     Réalisations  titre (marine) · crème · devis (blanc) · nuit
     Bornes        titre (marine) · crème · vidéo (NUIT) · étapes (crème) ·
                   devis (blanc) · nuit
     Contact       titre (marine) · formulaire (crème) · zone (marine) · nuit

   EN-TÊTE : il s'inverse au défilement. Tout en haut il est transparent sur
   la photo, monogramme blanc, mot-symbole blanc, menu blanc. Passé 40 px il
   prend le crème du site et tout bascule à l'encre marine — monogramme rouge,
   « ELEC » rouge, menu sombre, bouton devis encadré. Rien ne bouge : ni la
   hauteur, ni la taille du logo, ni la position du menu.

   Typographie sans empattement : Poppins en gras pour les titres,
   Lato pour le texte courant.

   Approche : mobile-first. Toutes les animations reposent exclusivement sur
   transform et opacity, les deux seules propriétés que le navigateur peut
   composer sur le GPU — c'est ce qui garantit les 60 fps, y compris sur
   mobile.
   ========================================================= */

:root{
  /* --- Structure : marine profond --- */
  --marine:       #16283D;   /* fonds des sections sombres */
  --marine-2:     #1F3A5A;
  --marine-noir:  #0B1622;   /* le plus sombre — pied de page */
  --ardoise:      #24384F;
  --ardoise-moyen:#3B5877;

  /* --- Accent : le rouge de la marque ---
     Prélevé sur l'hexagone du logo. Assez foncé pour porter du blanc sur ses
     aplats (8,1:1) et pour servir directement de couleur de texte sur le
     crème (7,4:1) : un seul rouge suffit partout, fond clair comme fond
     sombre — inutile d'en décliner un second, plus brun. */
  --rouge:        #A8121C;   /* accent signature */
  --rouge-clair:  #E86A73;   /* accent sur fond marine : 4,8:1 (AA) — #E0555F n'atteignait que 4,0:1 */
  --rouge-pale:   #FBECEE;   /* fonds de pastille très clairs */
  --on-rouge:     #FFFFFF;   /* texte posé sur les aplats rouges */

  /* --- Clairs : un crème chaud plutôt qu'un blanc froid --- */
  --white:        #FFFFFF;
  --creme:        #F6F4F0;   /* fond clair */
  --creme-doux:   #FBFAF8;   /* fond clair alterné */

  --ink:          #12202F;   /* titres sur fond clair */
  --ink-soft:     #55636F;   /* texte courant */
  --ardoise-clair:#9DAAB6;   /* texte secondaire sur fond sombre */
  --line:         rgba(18,32,47,0.10);
  --line-light:   rgba(255,255,255,0.12);

  /* Typographie */
  --font-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rythme — valeurs mobiles, réhaussées plus bas par media queries */
  --container: 1220px;
  --gutter: 18px;
  --sec-y: 64px;
  --trust-overlap: 132px;
  /* Angles francs : un tableau électrique bien fait est une affaire de lignes droites */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 5px;
  --header-h: 62px;

  /* Ombres — discrètes, jamais dures */
  --shadow-sm: 0 2px 10px rgba(11,22,34,0.07);
  --shadow-md: 0 10px 30px rgba(11,22,34,0.13);
  --shadow-lg: 0 18px 50px rgba(11,22,34,0.20);

  /* Courbes et durées */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.16,.84,.44,1);
  --dur-fast: .25s;
  --dur-med: .55s;
  --dur-slow: .9s;
}

@media (min-width: 640px){
  :root{ --gutter: 24px; --sec-y: 84px; --trust-overlap: 84px; --header-h: 70px; }
}
@media (min-width: 960px){
  :root{ --gutter: 28px; --sec-y: 104px; --trust-overlap: 74px; --header-h: 78px; }
}
@media (min-width: 1280px){
  :root{ --gutter: 32px; --sec-y: 120px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body{
  margin: 0;
  font-family: var(--font-body);
  font-size: .94rem;
  color: var(--ink);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* « clip » et non « hidden » : hidden ferait du body un conteneur de
     défilement, ce qui empêcherait la bannière de rester collée en fond. */
  overflow-x: clip;
}
@media (min-width: 960px){ body{ font-size: 1rem; } }

img, svg, video{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea{ font: inherit; }
h1, h2, h3, h4, p{ margin: 0; }

.svg-sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }
.nowrap{ white-space: nowrap; }
.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Respect des utilisateurs sensibles au mouvement */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Empêche tout scroll horizontal fantôme (parallaxe, SVG pleine largeur) */
main, section, header, footer{ overflow-x: clip; }

#accueil, #entreprise, #prestations, #location, #realisations, #galerie, #zone, #contact{
  scroll-margin-top: var(--header-h);
}

/* ---------- Accessibilité clavier ----------
   Anneau de focus double (blanc puis marine) : visible sur les fonds clairs
   comme sur la vidéo, les bandeaux sombres et le pied de page. Il n'apparaît
   qu'à la navigation au clavier, pas au clic de souris. */
:focus-visible{
  outline: 3px solid var(--white);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--marine);
}
main:focus{ outline: none; }
/* Lien d'évitement : premier arrêt de la touche Tab, invisible sinon. */
.skip-link{
  position: fixed; top: 10px; left: 10px; z-index: 3000;
  padding: 12px 18px;
  background: var(--marine); color: var(--white);
  font-family: var(--font-head); font-weight: 600; font-size: .85rem;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus{ transform: translateY(0); }

/* ---------- Typo utilitaires ----------
   Le chapeau est très espacé, sans filet : c'est lui qui donne
   le ton « chantier propre » avant même le titre. */
.eyebrow{
  display: inline-block;
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rouge);
}
.eyebrow.light{ color: var(--rouge-clair); }   /* variante pour fond sombre (AA) */
@media (min-width: 960px){
  .eyebrow{ font-size: 13px; letter-spacing: .38em; }
}

/* Titres : Poppins très gras, interlignage serré, aucune italique */
h1, .h1{
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 8.6vw, 4.6rem);
  color: var(--white);
}
h2, .h2{
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 5.8vw, 3rem);
  color: var(--ink);
}
h3, .h3{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.05rem, 3.6vw, 1.35rem);
  color: var(--ink);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.lead{
  font-size: clamp(.9rem, 3.3vw, 1.05rem);
  color: var(--ink-soft);
  line-height: 1.8;
}
/* Les mots-clés en gras dans les paragraphes passent en rouge :
   l'œil accroche les prestations sans lire toute la phrase. */
.lead b, .lead strong{ color: var(--rouge); font-weight: 700; }
/* Sur les sections sombres, ces mêmes mots-clés passent sur la version
   claire de l'accent : le rouge profond y tomberait sous les 3:1. */
.hero-content .lead b, .hero-content .lead strong,
.services .lead b, .services .lead strong,
.rental .lead b, .rental .lead strong,
.zone .lead b, .zone .lead strong,
.faq .lead b, .faq .lead strong{ color: var(--rouge-clair); }
/* La section prestations de l'accueil est sur fond blanc : le rouge clair y
   tombait à 3,7:1, le rouge profond de la marque tient l'AA. */
.services--soft .lead b, .services--soft .lead strong{ color: var(--rouge); }
.section-head{ max-width: 780px; margin-bottom: 34px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2{ margin-top: 12px; }
.section-head p{ margin-top: 12px; }
.section-head.center .eyebrow{ justify-content: center; }
@media (min-width: 960px){
  .section-head{ margin-bottom: 52px; }
  .section-head h2{ margin-top: 16px; }
  .section-head p{ margin-top: 16px; }
}
.br-lg{ display: none; }
.section-head--wide{ max-width: 940px; }
@media (min-width: 1200px){
  /* Sur grand écran il y a la place : chaque phrase prend sa ligne plutôt que
     de déborder de deux mots sur la suivante. En dessous, le retour disparaît
     — l'espace qui le précède dans le HTML évite que les phrases se collent. */
  .br-lg{ display: inline; }
  .section-head--wide{ max-width: none; }
  .section-head--wide .lead{ max-width: 1040px; margin-left: auto; margin-right: auto; }
  .section-head--wide h2{ white-space: nowrap; font-size: min(2.7rem, 3.9vw); }
}

/* ---------- Crêtes de séparation entre sections ----------
   Même silhouette réutilisée via <use>, chaque instance choisit
   ses couleurs (--sky au-dessus, --rock en dessous). */

/* ---------- Boutons ---------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  will-change: transform;
}
.btn svg{ width: 16px; height: 16px; flex: none; }
.btn:active{ transform: scale(.96); }
@media (min-width: 960px){
  .btn{ padding: 18px 34px; font-size: .84rem; gap: 10px; }
  .btn svg{ width: 18px; height: 18px; }
}

/* Le bouton d'action principal : un simple cadre à l'encre, texte à l'encre,
   fond transparent — il prend donc la couleur du bloc où il se trouve. L'aplat
   rouge plein a été retiré : il tirait l'œil plus que le contenu. Le cadre
   est plus épais que celui du bouton secondaire, c'est ce qui les hiérarchise. */
.btn-primary{
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: none;
}
/* Sur les fonds sombres — menu mobile, pied de page — le même cadre passe au
   blanc : c'est la seule chose qui change. Blanc plein, là où le bouton
   secondaire à côté se contente d'un trait à demi transparent. */
.nav-mobile-foot .btn-primary,
.site-footer .btn-primary{
  color: var(--white);
  border-color: var(--white);
}
/* Bouton « devis » de l'en-tête et de la bannière : crème, comme le
   logo et comme le fond du bloc entreprise. Il se détache sur la photo
   sombre sans ajouter une deuxième couleur au premier écran. */
.btn-light{
  background: var(--creme);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(18,32,47,0.28);
}
.btn-outline{
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.55);
}
.btn-dark{
  background: var(--marine);
  color: var(--white);
}
/* Bouton secondaire : le même cadre, mais plus fin et plus effacé, pour qu'à
   côté du bouton principal on voie tout de suite lequel est lequel. */
.btn-ghost{
  color: var(--ink-soft);
  border: 1.5px solid rgba(18,32,47,0.26);
  background: transparent;
}
/* WhatsApp reprend la couleur de la marque : c'est un repère
   universel, et le rouge du site reste réservé au devis. */
.btn-wa{
  background: #25D366;
  color: #08331A;
}
@media (hover: hover){
  .btn-primary:hover{ transform: translateY(-3px); background: var(--ink); color: var(--white); border-color: var(--ink); }
  .nav-mobile-foot .btn-primary:hover,
  .site-footer .btn-primary:hover{ background: var(--white); color: var(--ink); border-color: var(--white); }
  .btn-light:hover{ transform: translateY(-3px); background: var(--white); box-shadow: 0 14px 32px rgba(18,32,47,0.34); }
  .btn-outline:hover{ background: var(--white); color: var(--ink); border-color: var(--white); transform: translateY(-3px); }
  .btn-dark:hover{ transform: translateY(-3px); background: var(--rouge); }
  .btn-ghost:hover{ transform: translateY(-3px); background: var(--ink); color: var(--white); border-color: var(--ink); }
  .btn-wa:hover{ transform: translateY(-3px); background: #1FBE5A; }
}
.btn-block{ width: 100%; }
.btn-sm{ padding: 11px 18px; font-size: .8rem; }

/* ================= HEADER ================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* Seul le fond change au défilement : ni la hauteur ni la taille du logo,
     pour que rien ne se déplace sous les yeux du visiteur. */
  transition: background var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header.is-scrolled{
  background: rgba(251,250,248,0.94);   /* blanc du site, translucide */
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 6px 26px rgba(18,32,47,0.10);
  border-bottom: 1px solid rgba(18,32,47,0.08);
}

/* ---- Inversion au défilement ----
   Tout en haut, l'en-tête est transparent sur la photo : logo blanc, menu
   blanc. Dès qu'on descend, il bascule sur le blanc du site et tout ce
   qu'il contient passe à l'encre : logo bicolore, menu sombre, bouton
   encadré. Rien ne bouge — seules les couleurs s'échangent. */
.site-header.is-scrolled .nav-desktop a{ color: var(--ink-soft); text-shadow: none; }
.site-header.is-scrolled .nav-desktop a:hover,
.site-header.is-scrolled .nav-desktop a.is-current,
.site-header.is-scrolled .nav-desktop a[aria-current="page"]{ color: var(--ink); }
.site-header.is-scrolled .nav-desktop a::after{ background: var(--rouge); }

.site-header.is-scrolled .burger span{ background: var(--ink); }
/* Menu mobile ouvert : le panneau sombre passe par-dessus, la croix redevient
   blanche pour rester lisible. */
body.nav-open .site-header .burger span,
body.nav-open .site-header.is-scrolled .burger span{ background: var(--white); }
/* Le panneau du menu couvre toute la page : sans cela l'en-tête — et donc la
   croix de fermeture — passait dessous et devenait intouchable. On remonte
   l'en-tête au-dessus du panneau, dépouillé de son fond, et on n'y laisse que
   le logo blanc et la croix. */
body.nav-open .site-header{
  z-index: 1200;
  background: transparent;
  box-shadow: none;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
body.nav-open .site-header.is-scrolled .brand-text .b1{ color: var(--white); }
body.nav-open .site-header.is-scrolled .brand-text .b1 span{ color: var(--rouge-clair); }
body.nav-open .site-header.is-scrolled .brand-text .b2{ color: rgba(255,255,255,0.62); }
body.nav-open .site-header .nav-desktop,
body.nav-open .site-header .header-cta .btn,
body.nav-open .site-header .read-progress{ opacity: 0; visibility: hidden; }

/* Le « devis » crème disparaîtrait sur un en-tête clair : une fois
   celui-ci passé au clair, il devient le même cadre à l'encre que les autres
   boutons principaux du site. */
.site-header.is-scrolled .header-cta .btn-light{
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}
@media (hover: hover){
  .site-header.is-scrolled .header-cta .btn-light:hover{
    background: var(--ink);
    color: var(--white);
    box-shadow: none;
  }
}

/* Fine ligne bronze qui suit la progression de lecture */
.read-progress{
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--rouge);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease);
}
.site-header.is-scrolled .read-progress{ opacity: 1; }

/* Logo officiel : l'hexagone « VE » suivi du mot-symbole composé en Poppins.
   Le mot-symbole n'est pas une image : c'est du texte, il reste net à toutes
   les tailles et change de couleur avec l'en-tête sans changer de fichier. */
.brand{ display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
/* Les deux versions du monogramme occupent la même case de grille : même
   dessin, même cadrage, seule l'opacité les échange. Aucun saut. */
.brand-mark{ display: inline-grid; align-items: center; flex: none; }
.brand-mark img{
  grid-area: 1 / 1;
  height: 34px;
  width: auto;
  transition: opacity var(--dur-med) var(--ease);
}
.brand-text{ display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-text .b1{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--white);
  white-space: nowrap;
  transition: color var(--dur-med) var(--ease);
}
.brand-text .b1 span{ color: var(--rouge-clair); transition: color var(--dur-med) var(--ease); }
.brand-text .b2{
  font-size: .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  white-space: nowrap;
  transition: color var(--dur-med) var(--ease);
}
@media (min-width: 960px){
  .brand{ gap: 12px; }
  .brand-mark img{ height: 42px; }
  .brand-text .b1{ font-size: 1.14rem; }
  .brand-text .b2{ font-size: .55rem; }
}
/* Sur téléphone, trois choses doivent tenir sur une seule ligne : la marque,
   le bouton devis et la croix du menu. Le mot-symbole se resserre et perd sa
   ligne de baseline — l'hexagone et « VAROL ELEC » suffisent à cette taille. */
@media (max-width: 699px){
  .brand{ gap: 8px; }
  .brand-mark img{ height: 30px; }
  .brand-text .b1{ font-size: .92rem; }
  .brand-text .b2{ display: none; }
  .site-header .header-cta{ gap: 4px; }
  .site-header .header-cta .btn{ padding: 10px 14px; font-size: .76rem; }
}
@media (max-width: 380px){
  .brand-text .b1{ font-size: .85rem; }
  .site-header .header-cta .btn{ padding: 10px 11px; font-size: .72rem; }
}

.nav-desktop{ display: none; }
.nav-desktop ul{ display: flex; align-items: center; gap: 34px; }
.nav-desktop a{
  position: relative;
  font-size: .86rem;
  font-weight: 500;
  color: rgba(255,255,255,0.84);
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease);
}
.nav-desktop a::after{
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px;
  background: var(--rouge-clair);
  transition: right var(--dur-med) var(--ease);
}
/* La page en cours est soulignée en permanence : le visiteur sait toujours
   où il se trouve, sans avoir à relire l'adresse. */
.nav-desktop a:hover,
.nav-desktop a.is-current,
.nav-desktop a[aria-current="page"]{ color: var(--white); }
.nav-desktop a:hover::after,
.nav-desktop a.is-current::after,
.nav-desktop a[aria-current="page"]::after{ right: 0; }
.nav-desktop a[aria-current="page"]{ font-weight: 600; }
.nav-desktop a[aria-current="page"]::after{ background: var(--rouge); height: 2px; }

.header-cta{ display: flex; align-items: center; gap: 8px; }
.header-cta .btn{ padding: 12px 22px; font-size: .85rem; }

/* ---- Le numero, et rien d'autre ----
   Beaucoup de visiteurs ne lisent pas le site : ils appellent. Le bouton de
   devis a donc quitte l'en-tete ; il reste dans la banniere, dans le menu
   telephone, dans le bandeau de relance et dans le pied de page. */
.header-cta .btn-tel{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-size: .95rem;
  letter-spacing: .01em;
  /* Le numero est un chiffre, pas un intitule : il garde ses minuscules et son
     interlettrage normal, sinon il devient penible a lire d'un coup d'oeil. */
  text-transform: none;
}
.header-cta .btn-tel svg{ width: 16px; height: 16px; flex: none; }
/* Le cadre est là dès le départ, simplement transparent : quand il apparaît au
   défilement, la taille du bouton ne bouge pas d'un pixel. */
.header-cta .btn-light{ border: 2px solid transparent; }
.header-cta > a.btn-primary{ display: none; }
.burger{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0;
  z-index: 1200;
}
.burger span{
  width: 22px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-fast) var(--ease);
}
body.nav-open .burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity: 0; }
body.nav-open .burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---- Menu mobile plein écran ---- */
.nav-mobile{
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: linear-gradient(160deg, var(--marine) 0%, #0B1622 100%);
  display: flex;
  flex-direction: column;
  /* Les liens partent du haut, juste sous l'en-tête, au lieu d'être centrés :
     centrés, ils laissaient un grand vide au-dessus sur téléphone. */
  justify-content: flex-start;
  padding: calc(var(--header-h) + 34px) 26px calc(28px + env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  overflow-y: auto;
  transition: opacity var(--dur-med) var(--ease),
              transform var(--dur-med) var(--ease),
              visibility 0s linear var(--dur-med);
}
body.nav-open .nav-mobile{
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--dur-med) var(--ease),
              transform var(--dur-med) var(--ease),
              visibility 0s;
}
.nav-mobile ul{ display: flex; flex-direction: column; }
.nav-mobile li{ border-bottom: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
.nav-mobile a{
  display: block;
  padding: 12px 2px;
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--white);
  opacity: 0;
  transform: translateY(16px);
  transition: transform var(--dur-med) var(--ease),
              opacity var(--dur-med) var(--ease),
              color var(--dur-fast);
}
body.nav-open .nav-mobile a{ opacity: 1; transform: translateY(0); }
.nav-mobile a:hover{ color: var(--rouge-clair); }
.nav-mobile a[aria-current="page"]{ color: var(--rouge-clair); }
.nav-mobile a[aria-current="page"]::before{
  content: "";
  display: inline-block;
  width: 22px; height: 2px;
  margin-right: 14px;
  vertical-align: middle;
  background: var(--rouge-clair);
}
.nav-mobile-foot{ margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
/* « .nav-mobile a » donnait aux boutons la taille des liens du menu :
   ils reprennent ici celle de tous les boutons du site. */
.nav-mobile-foot a.btn{ display: inline-flex; padding: 15px 22px; font-size: .78rem; }
.nav-mobile-foot .socials{ display: flex; justify-content: center; gap: 14px; }
body.nav-open{ overflow: hidden; }

/* ================= HERO ================= */
.hero{
  position: relative;
  /* Une banniere, pas un ecran d'accueil : elle laisse voir qu'il y a du
     contenu dessous et remonte normalement au defilement. */
  min-height: 560px;
  display: flex;
  align-items: center;
  background: var(--marine);
  overflow: hidden;
  padding-top: var(--header-h);
}
@media (min-width: 900px){ .hero{ min-height: 620px; } }
@media (min-width: 1400px){ .hero{ min-height: 680px; } }
.hero-media{
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--marine);
}
.hero-media picture,
.hero-media img,
.hero-media video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Le cadrage est calé pour que les deux mini-pelles restent au premier
     plan, juste au-dessus de la crête, quelle que soit la hauteur d'écran. */
  object-position: center 24%;
}
@media (min-width: 700px){
  .hero-media picture,
  .hero-media img,
  .hero-media video{ object-position: center 32%; }
}
/* La vidéo n'apparaît qu'une fois prête : sinon on verrait un cadre noir
   le temps du premier décodage. L'affiche reste visible dessous. */
.hero-media-video{ opacity: 0; transition: opacity .9s var(--ease); }
.hero-media-video.is-ready{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .hero-media-video{ display: none; }
}
/* Plus de zoom continu : c'est lui qui donnait l'impression d'une photo
   scotchée à l'écran pendant qu'on faisait défiler la page. */
.hero-media-overlay{
  position: absolute; inset: 0;
  z-index: 2;
  /* Pas de teinte de couleur : juste un voile sombre léger et régulier, qui
     garde le titre lisible sans repeindre la photo, puis retour au marine
     en bas pour rejoindre la crête. */
  /* Plus de crête à rejoindre : la bannière se termine sur une ligne franche.
     Le bas reste assombri pour ancrer la bande blanche qui vient s'y poser,
     mais la photo reste lisible jusqu'au bord. */
  background:
    linear-gradient(180deg, rgba(11,22,34,0.52) 0%, rgba(11,22,34,0.38) 32%,
                    rgba(11,22,34,0.36) 60%, rgba(11,22,34,0.56) 86%,
                    rgba(11,22,34,0.72) 100%);
}
/* Grain fin : casse les aplats du dégradé et masque la montée en résolution */
.hero-media-grain{
  position: absolute; inset: -50%;
  z-index: 3;
  opacity: .16;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

.hero-content{
  position: relative;
  z-index: 5;
  width: 100%;
  /* La carte de réassurance remonte de la moitié de sa hauteur dans la
     bannière : le bas doit lui réserver la place, sinon elle se pose sur les
     boutons. Sur téléphone la carte est sur deux colonnes, donc plus haute. */
  padding: 24px var(--gutter) calc(var(--trust-overlap) + 46px);
  text-align: center;
}
.hero-content .eyebrow{ color: rgba(255,255,255,0.92); }

.hero-slogan{
  margin: 16px auto 0;
  max-width: 900px;
  text-align: center;
  text-wrap: balance;
}
.hero-slogan em{
  font-style: normal;
  color: var(--white);
}
/* Révélation ligne par ligne : chaque ligne remonte derrière son propre masque.
   C'est une animation et non une transition déclenchée par JS : elle part au
   premier rendu, sans rien attendre — ni script, ni image, ni police. */
.line-mask{ display: block; overflow: hidden; padding-bottom: .06em; }
.line-mask > span{
  display: block;
  animation: line-rise 1s var(--ease) both;
}
.line-mask:nth-child(2) > span{ animation-delay: .12s; }
@keyframes line-rise{
  from{ transform: translateY(104%); }
  to{ transform: translateY(0); }
}

.hero-content .lead{
  color: rgba(255,255,255,0.78);
  max-width: 880px;
  margin: 16px auto 0;
}
@media (min-width: 1200px){
  /* Une phrase = une ligne : le chapô a besoin de toute la largeur pour ça. */
  .hero-content .lead{ max-width: 1180px; }
}
.hero-actions{
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-actions .btn{ flex: 1 1 100%; max-width: 320px; }

.hero-badges{
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 10px;
  max-width: 430px;
  margin-left: auto; margin-right: auto;
}
.hero-badge{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: rgba(255,255,255,0.84);
  font-size: .64rem;
  line-height: 1.25;
  text-align: left;
}
.hero-badge svg{ width: 15px; height: 15px; color: var(--rouge-clair); flex: none; }

.scroll-cue{ display: none; }

@media (min-width: 640px){ .hero-actions .btn{ flex: 0 0 auto; } }
@media (min-width: 960px){
  .hero-content{ padding: 50px var(--gutter) 190px; }
  .hero-slogan{ margin-top: 22px; }
  .hero-content .lead{ margin-top: 22px; }
  .hero-actions{ margin-top: 52px; gap: 16px; }
  .hero-badges{
    margin-top: 54px;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 30px;
    max-width: none;
  }
  .hero-badge{ font-size: .82rem; }
  .hero-badge svg{ width: 20px; height: 20px; }
  .scroll-cue{
    position: absolute;
    left: 50%; bottom: 70px;   /* juste au-dessus du bandeau blanc, loin des boutons */
    transform: translateX(-50%);
    z-index: 5;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.6);
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  .scroll-cue .line{
    width: 1px; height: 34px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.75), transparent);
    animation: scrollcue 2.2s var(--ease) infinite;
  }
}
@media (min-width: 1180px){ .hero-content{ padding-bottom: 215px; } }
/* Le texte de la bannière part de la même hauteur que le titre des autres
   pages (en-tête + 0,8 × l'espacement de section, comme .page-head) : en
   changeant de page, « Électricien à Annecy » et « À propos » tombent au
   même endroit au lieu de sauter d'une cinquantaine de pixels. */
.hero{ align-items: flex-start; }
.hero .hero-content{ padding-top: calc(var(--sec-y) * .8); }
@keyframes scrollcue{
  0%{ transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%{ transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%{ transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100%{ transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ================= BANDEAU DE RÉASSURANCE =================
   Hauteur nulle : le bloc ne prend pas de place dans le flux,
   il est ancré sur la ligne hero / prestations. */
.trust-strip{ position: relative; z-index: 6; height: 0; }
.trust-card{
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  top: 0;
  transform: translateY(-50%);
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 22px 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 10px;
}
.trust-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.trust-item .ico{
  flex: none;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--rouge-pale);
  color: var(--rouge);
}
.trust-item .ico svg{ width: 18px; height: 18px; }
.trust-item strong{ display: block; font-size: .78rem; color: var(--marine); font-weight: 700; line-height: 1.25; }
.trust-item .txt > span{ display: block; font-size: .68rem; color: var(--ink-soft); margin-top: 3px; line-height: 1.3; }

@media (min-width: 640px){
  .trust-card{ grid-template-columns: repeat(4, 1fr); padding: 26px 22px; gap: 20px; left: 0; right: 0; }
}
@media (min-width: 960px){
  .trust-card{ padding: 22px 32px; gap: 24px; }
  .trust-item{ flex-direction: row; align-items: center; justify-content: center; text-align: left; gap: 12px; }
  .trust-item .ico{ width: 40px; height: 40px; }
  .trust-item .ico svg{ width: 20px; height: 20px; }
  .trust-item strong{ font-size: .92rem; }
  .trust-item .txt > span{ font-size: .78rem; }
}

/* ================= L'ENTREPRISE / HISTOIRE ================= */
.story{
  position: relative;
  padding: calc(var(--sec-y) + var(--trust-overlap)) 0 var(--sec-y);
  background: var(--creme);
}
.story .container{
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}
/* Trame de points en écho au visuel : elle déborde de la photo
   en haut à gauche et en bas à droite, comme un calque de plan. */
.story-visual{ position: relative; }
.story-visual::before,
.story-visual::after{
  content: "";
  position: absolute;
  z-index: 0;
  width: 118px; height: 118px;
  background-image: url("../images/pointilles.svg");
  background-size: 12px;
  pointer-events: none;
}
.story-visual::before{ top: -22px; left: -22px; }
.story-visual::after{ right: -22px; bottom: -22px; }
.story-photo{
  z-index: 1;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 2/3;
  max-height: 62vh;
  background: var(--ardoise);
  box-shadow: var(--shadow-lg);
}
.story-photo img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-soft);
}
.story-visual:hover .story-photo img{ transform: scale(1.07); }
/* Vignette secondaire : l'enseigne de l'atelier */
.story-inset{
  position: absolute;
  z-index: 2;
  right: -6px; bottom: -26px;
  width: 44%;
  max-width: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 5px solid var(--creme);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/3;
}
.story-inset img{ width: 100%; height: 100%; object-fit: cover; }
.story-since{
  position: absolute;
  z-index: 2;
  left: -6px; top: 18px;
  background: var(--marine);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.story-since strong{
  display: block;
  font-family: var(--font-head);
  font-size: 1.3rem;
  /* Comme tous les chiffres du site : le rouge exact du logo. Sur le marine
     du badge il tombe à 3,2:1 — trop juste pour du petit texte, largement
     suffisant pour un nombre de 1,3 rem en gras. */
  color: var(--rouge);
  line-height: 1;
}
.story-since span{
  display: block;
  font-size: .56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 5px;
}

.story-text h2{ margin-top: 12px; }
.story-text p{ margin-top: 14px; font-size: .9rem; line-height: 1.78; color: var(--ink-soft); }
.story-text p.first::first-letter{
  float: left;
  font-family: var(--font-head);
  font-size: 3.1rem;
  line-height: .82;
  padding: 6px 10px 0 0;
  color: var(--rouge);
}
.story-motto{ text-align: center; }
.story-sign{
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
}
.story-sign .avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--marine);
  color: var(--rouge-clair);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  flex: none;
}
.story-sign strong{ display: block; font-size: .9rem; color: var(--marine); }
.story-sign span{ display: block; font-size: .74rem; color: var(--ink-soft); margin-top: 2px; }

.story-stats{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.story-stat{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  text-align: center;
}
.story-stat b{
  display: block;
  font-family: var(--font-head);
  font-size: 1.4rem;
  color: var(--rouge);
  line-height: 1;
}
.story-stat span{
  display: block;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 7px;
  line-height: 1.35;
}

@media (min-width: 960px){
  /* La colonne de texte porte maintenant le comparateur avant/après : elle est
     bien plus haute que le visuel, qui reste donc collé en haut et accompagne
     la lecture au lieu de flotter au milieu d'un grand vide. */
  .story .container{ grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
  .story-visual{ position: sticky; top: calc(var(--header-h) + 40px); }
  .story-photo{ aspect-ratio: 2/3; max-height: none; }
  .story-inset{ right: -34px; bottom: -34px; width: 52%; }
  .story-since{ left: -22px; top: 26px; padding: 14px 20px; }
  .story-since strong{ font-size: 1.7rem; }
  .story-since span{ font-size: .6rem; }
  .story-text h2{ margin-top: 16px; }
  .story-text p{ margin-top: 18px; font-size: .98rem; }
  .story-stats{ margin-top: 34px; gap: 14px; }
  .story-stat{ padding: 20px 14px; }
  .story-stat b{ font-size: 1.9rem; }
  .story-stat span{ font-size: .68rem; }
}

/* ================= BANDEAU DÉFILANT ================= */
.marquee{
  position: relative;
  background: var(--marine);
  color: rgba(255,255,255,0.72);
  padding: 15px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.marquee-track{
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-group{ display: flex; align-items: center; flex: none; }
.marquee-group span{
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 0 22px;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-group span::after{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rouge);
  flex: none;
}
@keyframes marquee{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }
}
@media (min-width: 960px){
  .marquee{ padding: 19px 0; }
  .marquee-group span{ font-size: .82rem; padding: 0 28px; gap: 28px; }
}

/* ================= PRESTATIONS =================
   Bandeau marine, colonnes nues : pas de carte, pas de
   bordure, pas d'ombre. Seuls l'icône rouge et le titre en gras
   structurent la lecture — le fond sombre fait le reste. */
.services{
  position: relative;
  padding: var(--sec-y) 0;
  background: var(--marine);
}
.services .section-head h2{ color: var(--white); }
.services .section-head p{ color: var(--ardoise-clair); }
.services-grid{ display: grid; grid-template-columns: 1fr; gap: 30px; }
.service-card{
  position: relative;
  padding: 0 0 0 44px;
  transition: transform var(--dur-med) var(--ease-soft);
  will-change: transform;
}
.service-card .ico{
  position: absolute;
  left: 0; top: 2px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--rouge);
  transition: transform var(--dur-med) var(--ease-soft);
}
.service-card .ico svg{ width: 26px; height: 26px; }
.service-card h3{ color: var(--white); }
.service-card p{
  margin-top: 9px;
  font-size: .88rem;
  color: var(--ardoise-clair);
  line-height: 1.72;
}
.service-card .tag{
  display: inline-flex;
  margin-top: 12px;
  font-family: var(--font-head);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rouge);
  transition: color var(--dur-med);
}
@media (hover: hover){
  .service-card:hover{ transform: translateY(-4px); }
  .service-card:hover .ico{ transform: scale(1.12); }
  .service-card:hover .tag{ color: var(--rouge-clair); }
}
/* La moitié basse de la carte de réassurance déborde sur la section qui la
   suit : sur téléphone et tablette la carte est haute, il faut lui laisser
   la place, sinon elle recouvre le titre « Nos services ». */
@media (max-width: 959px){
  .trust-strip + .services{ padding-top: calc(var(--trust-overlap) + var(--sec-y) * .5); }
}
@media (min-width: 640px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); gap: 36px 30px; }
  /* Textes de longueurs différentes : « Voir le détail » est poussé en bas
     de chaque carte pour rester sur une même ligne d'une carte à l'autre. */
  .service-card{ display: flex; flex-direction: column; }
  .service-body{ flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
  .service-card .tag{ margin-top: auto; padding-top: 12px; }
}
@media (min-width: 960px){
  .services-grid{ grid-template-columns: repeat(4, 1fr); gap: 46px 34px; }
  .service-card{ padding: 0; }
  .service-card .ico{ position: static; width: 34px; height: 34px; margin-bottom: 18px; }
  .service-card .ico svg{ width: 30px; height: 30px; }
  .service-card p{ margin-top: 12px; font-size: .9rem; }
  .service-card .tag{ padding-top: 16px; font-size: .66rem; }
}

.services-note{
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center;
  font-size: .88rem;
  color: var(--ardoise-clair);
  line-height: 1.7;
}
.services-note b{ color: var(--white); }

/* Le site n'utilise plus de silhouette de montagne entre les sections :
   elles s'enchaînent sur une ligne franche, et la bande blanche de
   réassurance se pose à cheval sur la coupure photo / entreprise. */

/* Version claire de la section prestations : la page d'accueil doit
   respirer, on garde le sombre pour la bannière et la location. */
.services--soft{ background: var(--white); }
.services--soft .section-head h2{ color: var(--ink); }
.services--soft .section-head p{ color: var(--ink-soft); }
.services--soft .service-card h3{ color: var(--ink); }
.services--soft .service-card p{ color: var(--ink-soft); }
.services--soft .eyebrow{ color: var(--rouge); }

/* ================= BANNIÈRE =================
   Un voile noir très léger sur la photo — assez pour asseoir le texte blanc,
   trop discret pour la repeindre : la photo garde ses couleurs, elle est
   seulement un cran plus sourde. Le texte conserve son ombre portée, qui fait
   le reste du travail sur les zones claires de l'image. */
.top-clair .hero-media-overlay{
  background:
    linear-gradient(180deg, rgba(11,22,34,0.42) 0%, rgba(11,22,34,0.30) 38%,
                    rgba(11,22,34,0.34) 72%, rgba(11,22,34,0.48) 100%);
}
.top-clair .hero-media-grain{ opacity: .07; }
.top-clair .hero-slogan{
  color: var(--white);
  text-shadow: 0 2px 22px rgba(9,18,28,0.55), 0 1px 3px rgba(9,18,28,0.45);
}
.top-clair .hero-slogan em{ color: var(--white); }
.top-clair .hero-content .eyebrow{
  color: var(--white);
  text-shadow: 0 1px 12px rgba(9,18,28,0.6);
}
.top-clair .hero-content .lead{
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 14px rgba(9,18,28,0.62), 0 1px 3px rgba(9,18,28,0.5);
}
.top-clair .hero-content .lead b,
.top-clair .hero-content .lead strong{ color: var(--rouge-clair); }
.top-clair .scroll-cue{ color: rgba(255,255,255,0.85); text-shadow: 0 1px 10px rgba(9,18,28,0.6); }

/* La bannière défile comme un bloc ordinaire : la vidéo remonte avec elle
   au lieu de rester fixée au fond de la fenêtre. */
.top-clair .hero{ overflow: visible; background: transparent; }
.top-clair .hero-media{ z-index: 0; }
/* Le texte de la bannière passe au-dessus de la vidéo. L'indication
   « Défiler » garde sa position absolue : en « relative », elle devenait un
   élément de la bannière à côté du texte et décentrait tout de 30 px. */
.top-clair .hero-content{ position: relative; z-index: 5; }
/* Tout ce qui suit passe au-dessus de la photo restée en fond. */
.top-clair main > *:not(.hero),
.top-clair .site-footer{ position: relative; z-index: 2; }
/* La bande blanche est à cheval sur la coupure : elle doit rester au-dessus
   de la section qui la suit, sinon sa moitié basse se fait recouvrir. */
.top-clair main > .trust-strip{ z-index: 6; }

/* ---- En-tête au-dessus de la bannière ----
   Transparent tant qu'on est en haut : rien ne coupe la photo. Le menu reste
   au même endroit, en haut comme après défilement — rien ne doit bouger sous
   le curseur du visiteur. */
/* Logo blanc tant qu'on est sur la photo, logo aux vraies couleurs de la
   marque — hexagone rouge, « ELEC » rouge — dès qu'on descend. */
/* Le mot-symbole reste rouge en toutes circonstances : c'est la couleur de
   l'entreprise, elle ne se dilue pas en blanc sur les fonds sombres. */
.site-header.is-scrolled .brand-text .b1{ color: var(--ink); }
.site-header.is-scrolled .brand-text .b1 span{ color: var(--rouge); }
.site-header.is-scrolled .brand-text .b2{ color: var(--ink-soft); }
/* Dans le pied de page, seule la version claire a un sens. */
.top-clair .site-header:not(.is-scrolled) .nav-desktop a{
  color: rgba(255,255,255,0.86);
  text-shadow: 0 1px 10px rgba(9,18,28,0.55);
}
.top-clair .site-header:not(.is-scrolled) .nav-desktop a:hover,
.top-clair .site-header:not(.is-scrolled) .nav-desktop a[aria-current="page"]{ color: var(--white); }

/* ================= PAGE LOCATION =================
   Le parc en cartes claires — une photo, un nom, une phrase — puis un bloc
   sombre pour la vidéo, puis les trois étapes. */
.mat{ padding: var(--sec-y) 0; background: var(--creme); }
.mat-grid{ display: grid; grid-template-columns: 1fr; gap: 20px; }
.mat-card{
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease);
}
.mat-media{ aspect-ratio: 4/3; overflow: hidden; background: var(--marine); }
.mat-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-soft);
}
.mat-body{ padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.mat-body h3{ font-size: 1.05rem; color: var(--ink); }
.mat-body p{ font-size: .88rem; line-height: 1.7; color: var(--ink-soft); flex: 1; }
.mat-body .chip{
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rouge);
  background: var(--rouge-pale);
  padding: 6px 11px;
  border-radius: 999px;
}
@media (hover: hover){
  .mat-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
  .mat-card:hover .mat-media img{ transform: scale(1.06); }
}
@media (min-width: 620px){ .mat-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1060px){ .mat-grid{ grid-template-columns: repeat(4, 1fr); } }

/* Le bloc vidéo garde le fond sombre du reste du site. */
.rental--media .rental-aside{ max-width: 780px; margin: 0 auto; }
.rental--media .section-head h2{ color: var(--white); }

/* Les trois étapes, numérotées comme les repères de barghachpictures.com. */
.etapes-sec{ padding: var(--sec-y) 0; background: var(--creme); }
.etapes{ list-style: none; display: grid; grid-template-columns: 1fr; gap: 30px; }
.etapes li{ display: flex; gap: 20px; align-items: flex-start; }
.etapes .num{
  flex: none;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--rouge);
  padding-top: 2px;
  position: relative;
}
.etapes .num::after{
  content: "";
  display: block;
  width: 34px; height: 1px;
  margin-top: 12px;
  background: rgba(168,18,28,0.35);
}
.etapes h3{ font-size: 1.05rem; color: var(--ink); }
.etapes p{ margin-top: 9px; font-size: .9rem; line-height: 1.75; color: var(--ink-soft); }
@media (min-width: 900px){
  .etapes{ grid-template-columns: repeat(3, 1fr); gap: 44px; }
  .etapes li{ flex-direction: column; gap: 16px; }
  .etapes .num::after{ width: 48px; }
}

/* ================= BLOCS DE COORDONNÉES (PAGE CONTACT) =================
   Le téléphone, WhatsApp, l'e-mail et la zone, chacun dans sa carte, au-dessus
   du formulaire : le visiteur qui veut juste appeler n'a pas à lire un
   formulaire pour trouver le numéro. */
/* Coordonnées à gauche, formulaire à droite : celui qui veut juste le numéro
   le trouve d'un coup d'œil sans traverser le formulaire. */
.contact-cols{
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}
.contact-grid--solo{ grid-template-columns: 1fr !important; }
.aside-title{
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 18px;
}
.contact-aside .info-cards{ grid-template-columns: 1fr; margin-bottom: 0; gap: 12px; }
/* En colonne, chaque bloc devient une ligne : l'icône à gauche, le libellé,
   la valeur et la précision empilés à droite. */
.contact-aside .info-card{
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 16px;
  row-gap: 3px;
  align-items: center;
  text-align: left;
  padding: 18px 20px;
}
.contact-aside .info-card .ico{ grid-column: 1; grid-row: 1 / 4; align-self: center; }
.contact-aside .info-card h3,
.contact-aside .info-card strong,
.contact-aside .info-card em{ grid-column: 2; }
@media (min-width: 620px){ .contact-aside .info-cards{ grid-template-columns: 1fr; } }
@media (min-width: 980px){
  .contact-cols{ grid-template-columns: .82fr 1.18fr; gap: 44px; }
  .contact-aside{ position: sticky; top: calc(var(--header-h) + 24px); }
}

.info-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 44px;
}
.info-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 26px 18px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.info-card .ico{
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rouge-pale);
  color: var(--rouge);
}
.info-card .ico svg{ width: 21px; height: 21px; }
.info-card h3{
  font-family: var(--font-head);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}
.info-card strong{ font-size: .95rem; color: var(--ink); overflow-wrap: anywhere; }
.info-card em{ font-style: normal; font-size: .78rem; color: var(--ink-soft); }
@media (hover: hover){
  a.info-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
}
@media (min-width: 620px){ .info-cards{ grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1000px){ .info-cards{ grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 58px; } }

/* ================= « ILS NOUS ONT FAIT CONFIANCE » =================
   Une simple rangée de logos, détourés, posés sur la crème. Ils sont
   volontairement sobres : c'est une caution, pas une publicité. */
.avis{
  position: relative;
  padding: var(--sec-y) 0;
  /* Crème : le bloc bornes juste au-dessus est sombre et le pied de page
     l'est aussi — cette dernière note claire n'a pas besoin d'être teintée
     pour se détacher. */
  background: var(--creme);
}
/* Il y a la largeur qu'il faut : à partir de 1100 px on laisse la phrase
   courir sur une seule ligne, avec un corps qui suit la fenêtre pour qu'elle
   ne déborde jamais. En dessous, elle se replie normalement. */
@media (min-width: 1100px){
  .avis .section-head .lead{
    max-width: none;
    white-space: nowrap;
    font-size: min(1rem, 1.24vw);
  }
}
.logos{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 64px;
}
.logos li{ display: flex; align-items: center; justify-content: center; }
.logos a{ display: block; line-height: 0; }
.logos img{
  display: block;
  width: auto;
  max-width: 260px;
  /* Les marges vides des deux fichiers ont été rognées : ils peuvent donc
     partager la même hauteur et se lire à la même échelle. */
  max-height: 96px;
  object-fit: contain;
  /* Pas d'atténuation au repos : les logos gardent leurs couleurs d'origine,
     seul le léger soulèvement au survol subsiste. */
  transition: transform var(--dur-fast) var(--ease);
}
@media (hover: hover){
  .logos li:hover img{ transform: translateY(-3px); }
}
@media (min-width: 700px){
  .logos{ gap: 48px 110px; }
  .logos img{ max-width: 320px; max-height: 118px; }
}

/* ---- Note Google, cartes d'avis, partenaires, Instagram ----
   Les cartes sont blanches sur la crème. Au téléphone elles défilent de
   côté (on voit le bord de la suivante : on comprend qu'il y en a d'autres),
   à partir de 700 px elles passent en grille. */
.avis-note{
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: 100%;
  margin: -6px auto 30px;
  padding: 12px 22px 12px 16px;
  background: var(--white);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.avis-note__g svg{ display: block; width: 30px; height: 30px; }
.avis-note__chiffre{ font-family: var(--font-head); font-weight: 700; font-size: 2rem; line-height: 1; }
.avis-note__detail{ display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--ink-soft); }
@media (hover: hover){
  .avis-note:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
}

.etoiles{ display: inline-flex; gap: 2px; }
.etoiles svg{ width: 15px; height: 15px; fill: #F4B400; }

.avis-liste{
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Les cartes vont jusqu'au bord de l'écran, puis la première et la
     dernière se recalent sur la marge du site. */
  margin: 0 calc(var(--gutter) * -1);
  padding: 6px var(--gutter) 22px;
  scroll-padding-inline: var(--gutter);
}
.avis-liste::-webkit-scrollbar{ display: none; }
.avis-carte{ scroll-snap-align: start; display: flex; }
.avis-carte figure{
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 22px 22px 20px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--rouge);
}
.avis-carte__haut{ display: flex; align-items: center; justify-content: space-between; }
.avis-carte__g svg{ display: block; width: 18px; height: 18px; }
.avis-carte blockquote{ margin: 0; flex: 1; }
.avis-carte blockquote p{ font-size: .92rem; line-height: 1.7; color: var(--ink); }
.avis-carte figcaption{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.avis-carte__initiale{
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: var(--marine);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
}
.avis-carte figcaption > span:last-child{ display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.avis-carte figcaption strong{ font-family: var(--font-head); font-size: .88rem; color: var(--ink); }
.avis-carte figcaption strong + span{ font-size: .74rem; color: var(--ink-soft); }

.avis-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
/* Au téléphone, les deux boutons s'empilent sur toute la largeur
   plutôt que de se replier chacun à sa taille. */
@media (max-width: 639px){
  .avis-actions{ flex-direction: column; }
  .avis-actions .btn{ width: 100%; }
}
.avis-source{ margin-top: 14px; text-align: center; font-size: .72rem; color: var(--ink-soft); }

.partenaires{
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.partenaires__titre{
  display: block;
  margin-bottom: 26px;
  line-height: 1.4;
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Logos partenaires : au téléphone, des tuiles blanches qui défilent de
   côté comme les avis ; à partir de 700 px, la rangée centrée d'origine. */
@media (max-width: 699px){
  .partenaires .logos{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    justify-content: start;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1);
    padding: 6px var(--gutter) 22px;
    scroll-padding-inline: var(--gutter);
  }
  .partenaires .logos::-webkit-scrollbar{ display: none; }
  .partenaires .logos li{ scroll-snap-align: start; }
  .partenaires .logos a{
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    height: 150px;
    padding: 20px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .partenaires .logos img{ max-width: 100%; max-height: 92px; }
}

/* Instagram : la dernière publication, puis l'invitation à suivre. */
.suivez{
  display: grid;
  margin-top: 56px;
  background: var(--marine);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--white);
}
.suivez__photo{ position: relative; display: block; line-height: 0; overflow: hidden; }
.suivez__photo img{
  display: block;
  width: 100%;
  height: auto;
  /* Carré au téléphone : on retire le haut du ciel, la maison et le logo
     Varol Elec (en bas de la photo) restent entiers. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center bottom;
  transition: transform var(--dur-med) var(--ease);
}
.suivez__pseudo{
  position: absolute;
  left: 14px; top: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(11,22,34,0.72);
  backdrop-filter: blur(6px);
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1;
  color: var(--white);
}
.suivez__pseudo svg{ width: 15px; height: 15px; }
@media (hover: hover){
  .suivez__photo:hover img{ transform: scale(1.04); }
}
.suivez__corps{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px 18px;
  padding: 24px 22px;
}
.suivez__icone{
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--rouge-clair);
  color: var(--rouge-clair);
}
.suivez__icone svg{ width: 24px; height: 24px; }
.suivez__texte h3{ font-size: 1.15rem; color: var(--white); }
.suivez__texte p{ margin-top: 4px; font-size: .85rem; line-height: 1.6; color: rgba(255,255,255,0.68); }
.suivez__btn{ grid-column: 1 / -1; }

@media (min-width: 700px){
  .avis-liste{
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    margin: 0;
    padding: 6px 0 22px;
    gap: 20px;
  }
  /* Sur ordinateur, 6 avis seulement (2 × 3 ou 3 × 2) : le 7e reste
     visible au téléphone, dans le défilement. */
  .avis-carte:nth-child(n+7){ display: none; }
  .suivez{ grid-template-columns: minmax(0, 300px) 1fr; }
  .suivez__photo img{ height: 100%; min-height: 300px; aspect-ratio: auto; object-position: center; }
  .suivez__corps{ padding: 34px; align-content: center; }
  .suivez__btn{ justify-self: start; }
}
@media (min-width: 1000px){
  .avis-liste{ grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .avis-note{ margin-bottom: 40px; }
  .partenaires{ margin-top: 72px; padding-top: 52px; }
  .suivez{ margin-top: 72px; grid-template-columns: 340px 1fr; }
  .suivez__corps{ padding: 44px 56px; gap: 22px 24px; }
  .suivez__texte h3{ font-size: 1.6rem; }
  .suivez__texte p{ font-size: .95rem; }
}

/* La citation ferme la page À propos. Elle remonte se coller au texte de la
   dernière section — 216 px de blanc l'en séparaient et elle paraissait
   décrochée. Elle garde en dessous une respiration normale avant le pied de
   page, ni un vide béant ni un texte collé au bord. */
.apropos + .divider-quote{
  padding-top: 0;
  padding-bottom: calc(var(--sec-y) * .8);
}
.apropos:has(+ .divider-quote){ padding-bottom: calc(var(--sec-y) * .6); }

/* ================= PAGE À PROPOS ================= */
.apropos{ padding: var(--sec-y) 0; background: var(--creme); }
.apropos--alt{ background: var(--white); }
.apropos-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}
.apropos-text h2{ font-size: clamp(1.45rem, 4.6vw, 2.1rem); line-height: 1.16; }
.apropos-text p{ margin-top: 16px; font-size: .95rem; line-height: 1.8; color: var(--ink-soft); }
.apropos-list{ list-style: none; margin-top: 20px; display: grid; gap: 10px; }
.apropos-list li{
  position: relative;
  padding-left: 26px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.apropos-list li::before{
  content: "";
  position: absolute;
  left: 2px; top: .45em;
  width: 12px; height: 6px;
  border-left: 2px solid var(--rouge);
  border-bottom: 2px solid var(--rouge);
  transform: rotate(-45deg);
}
@media (min-width: 900px){
  /* Mêmes proportions que les familles de la page Prestations : les photos
     y ont toutes la taille de celle d'« Installation & rénovation ». */
  .apropos-grid{ grid-template-columns: .85fr 1.15fr; gap: 48px; }
  .apropos--alt .apropos-grid{ grid-template-columns: 1.15fr .85fr; }
  .apropos--alt .apropos-grid .apropos-text{ order: 2; }
}

/* ================= EMPLACEMENT PHOTO RÉSERVÉ =================
   Bloc sombre volontairement vide, en attente d'une vraie photo de chantier.
   Il occupe déjà la place et le format définitifs : le jour où la photo
   arrive, on remplace le bloc par un <picture>, rien d'autre ne bouge. */
.photo-slot{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, var(--marine-2) 0%, var(--marine-noir) 100%);
  color: var(--ardoise-clair);
  text-align: center;
  overflow: hidden;
}
.photo-slot::after{
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(224,85,95,0.34);
  border-radius: var(--radius-md);
  pointer-events: none;
}
.photo-slot svg{ width: 30px; height: 30px; color: var(--rouge-clair); opacity: .9; }
.photo-slot span{
  font-family: var(--font-head);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
}
.photo-slot small{
  font-size: .74rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(157,170,182,0.72);
  max-width: 22ch;
  line-height: 1.5;
}
@media (min-width: 960px){ .photo-slot{ aspect-ratio: 3/2; } }

/* ---- La vraie photo, quand elle arrive ----
   Meme cadre et meme rayon que l'emplacement reserve : les blocs ne bougent
   pas d'un pixel quand on passe de l'un a l'autre. */
.apropos-photo{
  margin: 0;
  align-self: start;
}
.apropos-photo img{
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.apropos-photo figcaption{
  margin-top: 12px;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: center;
}
@media (min-width: 960px){ .apropos-photo img{ aspect-ratio: 3/2; } }

/* Famille de prestations : le texte à gauche, l'emplacement photo à droite. */
.famille-top{
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
  margin-bottom: 34px;
}
@media (min-width: 860px){
  /* La photo a toujours la grande colonne (1.15fr), qu'elle soit à droite
     ou à gauche : les quatre photos ont ainsi la même taille. */
  .famille-top{ grid-template-columns: .85fr 1.15fr; gap: 48px; margin-bottom: 40px; }
  .famille:nth-child(even) .famille-top{ grid-template-columns: 1.15fr .85fr; }
  .famille:nth-child(even) .famille-top .famille-head{ order: 2; }
}

/* ================= BANDEAU DE TITRE DES PAGES INTÉRIEURES =================
   La version courte de la bannière : pas de photo, pas de crête, juste le
   titre de la page. Une page intérieure n'a pas à rejouer l'accueil. */
.page-head{
  position: relative;
  padding: calc(var(--header-h) + var(--sec-y) * .8) 0 calc(var(--sec-y) * .8);
  background: var(--marine);
  text-align: center;
}
.page-head--marine-noir{ background: var(--marine-noir); }

/* ---- Bandeau de titre en photo ----
   Meme principe que la banniere d'accueil : la photo dessous, un voile sombre
   par-dessus. Le voile est assez dense pour que le blanc du titre passe sur
   n'importe quelle photo, y compris un ciel clair. */
.page-head--photo{ overflow: hidden; }
.page-head-media{
  position: absolute; inset: 0;
  z-index: 0;
  background: var(--marine);
}
.page-head-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.page-head-media::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,22,34,0.80) 0%, rgba(11,22,34,0.62) 40%,
                    rgba(11,22,34,0.66) 72%, rgba(11,22,34,0.86) 100%);
}
.page-head .container{ max-width: 1000px; position: relative; z-index: 2; }
.page-head h1{
  margin-top: 12px;
  font-size: clamp(1.9rem, 6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--white);
}
.page-head .lead{
  margin-top: 16px;
  color: var(--ardoise-clair);
}
@media (min-width: 1200px){
  /* Un titre de page = une ligne. Le min() rattrape les titres les plus longs
     en réduisant le corps plutôt qu'en les cassant en deux. */
  .page-head .container{ max-width: none; }
  .page-head h1{ white-space: nowrap; font-size: min(3.1rem, 4.4vw); }
  .page-head .lead{ max-width: 1080px; margin-left: auto; margin-right: auto; }
}
.page-head .lead b, .page-head .lead strong{ color: var(--rouge-clair); font-weight: 700; }
/* Chapeau des bandeaux de page : le rouge profond était illisible sur la
   photo assombrie (2:1). */
.page-head .eyebrow{ color: var(--rouge-clair); }

/* Les garanties, en une ligne de coches plutôt qu'un paragraphe de plus. */
.page-head-points{
  list-style: none;
  margin: 26px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}
.page-head-points li{
  position: relative;
  padding-left: 24px;
  font-size: .84rem;
  color: var(--ardoise-clair);
}
.page-head-points li::before{
  content: "";
  position: absolute;
  left: 3px; top: .42em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--rouge-clair);
  border-bottom: 2px solid var(--rouge-clair);
  transform: rotate(-45deg);
}

/* ================= LIEN DE FIN DE SECTION =================
   « Voir la suite » plutôt que de tout déverser sur la page d'accueil. */
.section-more{ margin-top: 42px; text-align: center; }
@media (min-width: 960px){ .section-more{ margin-top: 54px; } }

/* ================= FICHES PRESTATION SUR FOND CLAIR ================= */
.services--light{
  background: var(--creme);
  padding: var(--sec-y) 0;
}
.services--light .service-card h3{ color: var(--ink); }
.services--light .service-card p{ color: var(--ink-soft); }
.famille + .famille{
  margin-top: 48px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}
.famille-head{ max-width: 620px; margin-bottom: 30px; }
.famille-head h2{ font-size: clamp(1.4rem, 4.4vw, 2rem); line-height: 1.15; }
.famille-head p{ margin-top: 12px; font-size: .92rem; line-height: 1.72; color: var(--ink-soft); }
/* La cible d'ancre doit dégager la hauteur de l'en-tête fixe. */
.famille{ scroll-margin-top: calc(var(--header-h) + 20px); }
@media (min-width: 960px){
  .famille + .famille{ margin-top: 62px; padding-top: 58px; }
  .famille-head{ margin-bottom: 38px; }
}

/* ================= APERÇU LOCATION EN PAGE D'ACCUEIL ================= */
.rental-teaser{
  position: relative;
  /* C'est le seul bloc sombre du corps de la page d'accueil, et c'est voulu :
     il coupe la suite des blancs, il fait ressortir la photo de la mini-pelle,
     et il reprend le marine de la page Bornes vers laquelle il mène. */
  padding: var(--sec-y) 0;
  background: var(--marine);
  overflow: hidden;
}
.rental-teaser .container{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}
.rental-teaser h2{ margin-top: 12px; color: var(--white); font-size: clamp(1.5rem, 5vw, 2.2rem); line-height: 1.14; }
.rental-teaser p{ margin-top: 14px; font-size: .92rem; line-height: 1.74; color: var(--ardoise-clair); }
.rental-teaser .eyebrow{ color: var(--rouge-clair); }
/* Fond sombre : le bouton à contour reprend le blanc. */
.rental-teaser .btn-outline{ border-color: rgba(255,255,255,0.55); color: var(--white); }
.rental-teaser .btn{ margin-top: 24px; }
.rt-media{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3/2;
}
.rt-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 860px){
  .rental-teaser .container{ grid-template-columns: 1fr 1fr; gap: 56px; }
  .rt-media{ aspect-ratio: 3/2; }
}

/* ================= APPEL AU DEVIS DE FIN DE PAGE =================
   Un seul par page. Le bouton « devis » de chaque fiche prestation a été
   retiré : répété neuf fois, il ne veut plus rien dire. */
.cta-band{
  position: relative;
  padding: var(--sec-y) 0;
  /* Blanc franc : sur les quatre pages où il apparaît, le bandeau devis suit
     un bloc en crème. C'est ce demi-ton d'écart qui le détache, sans
     ajouter ni teinte ni aplat sombre. */
  background: var(--white);
  text-align: center;
  overflow: hidden;
}
.cta-band .container{ position: relative; z-index: 2; max-width: 880px; }
/* Sur la page location, la bande devis remonte du noir : elle porte alors une
   crête et doit lui réserver sa hauteur. */


/* Sur les pages intérieures, le bandeau de titre remplace l'en-tête de section :
   la section qui suit n'a plus de titre à espacer, seulement sa crête. Sans ça
   on garde un grand vide entre les montagnes et le premier contenu. */

.cta-band h2{ font-size: clamp(1.5rem, 5vw, 2.3rem); line-height: 1.14; }
.cta-band p{ margin-top: 14px; font-size: .95rem; line-height: 1.74; color: var(--ink-soft); }
.cta-actions{
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.cta-actions .btn{ flex: 1 1 100%; max-width: 320px; }
.cta-band .btn-ghost svg{ width: 17px; height: 17px; }
@media (min-width: 560px){ .cta-actions .btn{ flex: 0 0 auto; } }

/* ================= LOCATION DE MATÉRIEL ================= */
.rental{
  position: relative;
  padding: var(--sec-y) 0;
  background: var(--marine-noir);
  color: var(--white);
  overflow: hidden;
}
.rental::before{
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background-image: url("../images/beton-texture.svg");
  background-size: 420px;
  opacity: .5;
  mix-blend-mode: soft-light;
}
.rental .container{ position: relative; z-index: 2; }
.rental .section-head{ max-width: 920px; }
.rental .section-head h2{ color: #fff; }
.rental .section-head p{ color: rgba(255,255,255,0.72); }

.rental-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
.rental-list{ display: flex; flex-direction: column; gap: 10px; }
.rental-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform var(--dur-med) var(--ease-soft),
              background var(--dur-med) var(--ease),
              border-color var(--dur-med) var(--ease);
  will-change: transform;
}
.rental-thumb{
  flex: none;
  width: 74px; height: 74px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--marine-noir);
}
.rental-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-soft);
}
.rental-item .txt{ min-width: 0; }
.rental-item h3{ color: #fff; font-size: 1rem; }
.rental-item p{
  margin-top: 4px;
  font-size: .76rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.62);
}
.rental-item .chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rouge-clair);
}
.rental-item .chip::before{
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--rouge-clair);
}
@media (hover: hover){
  .rental-item:hover{
    transform: translateX(6px);
    background: rgba(255,255,255,0.08);
    border-color: rgba(168,18,28,0.38);
  }
  .rental-item:hover .rental-thumb img{ transform: scale(1.1); }
}

/* ---------- Colonne de droite : le carrousel du matériel ----------
   Les fiches sont toutes empilées au même endroit ; c'est le script
   qui leur donne une position par un simple transform. Rien ne bouge
   dans le flux, donc aucun recalcul de mise en page pendant l'animation. */
.rental-aside{ display: flex; flex-direction: column; gap: 16px; }

.deck{
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  /* Le débordement est masqué : les fiches voisines sont coupées par
     les bords, ce qui produit l'effet de pile qui se poursuit. */
  overflow: hidden;
  padding-bottom: 34px;   /* place pour les puces */
}
/* La fiche occupe 76 % de la largeur et doit rester en 9/16.
   On donne donc à la scène le rapport 1 / (0,76 × 16/9) = 37/50,
   pour que la hauteur suive toujours la largeur de la fiche.
   C'est ce calcul qui manquait : la vidéo se retrouvait rognée. */
.deck-stage{
  position: relative;
  aspect-ratio: 3/2;
}
.deck-card{
  position: absolute;
  top: 0;
  left: 50%;
  width: 76%;
  height: 100%;
  margin-left: -38%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--marine-noir);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  /* Position de départ : au fond de la pile, le script prend le relais */
  transform: translate3d(0,0,0) scale(.78);
  opacity: 0;
  transition: transform .62s var(--ease), opacity .62s var(--ease);
  will-change: transform, opacity;
}
.deck-card.is-active{ cursor: default; }
.deck-media{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Les fiches en arrière-plan sont assombries pour que l'œil aille au centre */
.deck-card::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(9,18,28,0.55);
  opacity: 1;
  transition: opacity .62s var(--ease);
  pointer-events: none;
}
.deck-card.is-active::after{ opacity: 0; }

.deck-label{
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: rgba(11,22,34,0.74);
  backdrop-filter: blur(8px);
  font-size: .7rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.deck-card.is-active .deck-label{ opacity: 1; transform: translateY(0); }
.deck-label .dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #25D366;
  flex: none;
  animation: pulseDot 1.9s var(--ease) infinite;
}
@keyframes pulseDot{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.45); opacity: .55; }
}

/* Flèches : posées sur les bords, au-dessus des fiches en retrait */
.deck-nav{
  position: absolute;
  top: calc(50% - 17px);
  transform: translateY(-50%);
  z-index: 6;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92);
  color: var(--marine);
  box-shadow: var(--shadow-md);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.deck-nav svg{ width: 19px; height: 19px; }
.deck-nav:hover{ background: var(--rouge); color: var(--on-rouge); }
.deck-nav:active{ transform: translateY(-50%) scale(.92); }
.deck-prev{ left: 4px; }
.deck-next{ right: 4px; }

.deck-dots{
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.deck-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.deck-dot.is-active{ background: var(--rouge); transform: scale(1.35); }

@media (min-width: 960px){
  .deck{ max-width: 460px; }
  .deck-nav{ width: 46px; height: 46px; }
  .deck-nav svg{ width: 21px; height: 21px; }
  .deck-label{ font-size: .76rem; padding: 11px 13px; left: 12px; right: 12px; bottom: 12px; }
}
.rental-note{
  border-radius: var(--radius-md);
  border: 1px dashed rgba(168,18,28,0.38);
  background: rgba(168,18,28,0.10);
  padding: 16px;
  font-size: .8rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
}
.rental-note b{ color: var(--rouge-clair); }
.rental-cta{ margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.rental-cta .btn{ width: 100%; }

@media (min-width: 640px){
  .rental-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rental-cta{ flex-direction: row; }
  .rental-cta .btn{ width: auto; }
}
@media (min-width: 960px){
  .rental-grid{ grid-template-columns: 1.1fr .9fr; gap: 46px; }
  .rental-list{ grid-template-columns: 1fr; gap: 14px; }
  .rental-item{ padding: 14px; gap: 18px; }
  .rental-thumb{ width: 104px; height: 92px; border-radius: 12px; }
  .rental-item h3{ font-size: 1.12rem; }
  .rental-item p{ font-size: .85rem; margin-top: 6px; }
}

/* ================= PAGE EN CONSTRUCTION =================
   Une page volontairement vide doit quand meme avoir l'air soignee : le dessin
   occupe la moitie de l'ecran, le texte l'autre, et deux boutons evitent que
   le visiteur reparte les mains vides. */
.en-construction{
  padding: var(--sec-y) 0;
  background: var(--creme);
}
.en-construction .container{
  display: grid;
  gap: 34px;
  align-items: center;
  max-width: 1120px;
}
.en-construction-visuel{ margin: 0; }
.en-construction-visuel img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.en-construction-texte h2{
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  line-height: 1.15;
  color: var(--marine);
}
.en-construction-texte p{
  margin-top: 16px;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.en-construction-note{
  margin-top: 18px;
  padding: 18px 20px;
  border-left: 3px solid var(--rouge);
  background: var(--white);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.en-construction-actions{
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.en-construction-actions .btn{ flex: 1 1 100%; max-width: 320px; }
/* Le bouton à contour est prévu pour les fonds sombres (texte blanc) : sur
   le fond clair de cette section, son texte disparaissait. */
.en-construction .btn-outline{ color: var(--ink); border-color: var(--ink); }
@media (hover: hover){
  .en-construction .btn-outline:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); }
}
@media (min-width: 560px){ .en-construction-actions .btn{ flex: 0 0 auto; } }
@media (min-width: 900px){
  .en-construction .container{ grid-template-columns: 1.05fr .95fr; gap: 56px; }
}

/* ================= BLOC « PROCHAINEMENT » =================
   Pose sur un fond sombre : il remplace un carrousel de photos, il doit donc
   occuper la meme place a l'ecran plutot que laisser un trou. */
.a-venir{
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 26px;
  text-align: center;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(224,85,95,0.38);
}
.a-venir-pastille{
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(224,85,95,0.16);
  color: var(--rouge-clair);
  font-family: var(--font-head);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}
.a-venir h3{
  margin-top: 18px;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  line-height: 1.2;
  color: var(--white);
}
.a-venir p{
  margin-top: 14px;
  font-size: .9rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.74);
}
.a-venir .a-venir-note{ font-size: .82rem; color: rgba(255,255,255,0.56); }
.a-venir-actions{
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.a-venir-actions .btn{ flex: 1 1 100%; max-width: 300px; }
@media (min-width: 560px){
  .a-venir{ padding: 52px 44px; }
  .a-venir-actions .btn{ flex: 0 0 auto; }
}

/* ================= AVANT / APRÈS ================= */
/* Le comparateur a retrouve une section a lui, sur la page Realisations : il
   etait a l'etroit dans la colonne de texte de l'accueil. Meme creme que les
   photos de chantier juste au-dessus — c'est la suite du meme propos, pas un
   bloc de plus. */
.ba-section{
  position: relative;
  padding: 0 0 var(--sec-y);
  background: var(--creme);
  overflow: hidden;
}
.ba-section .section-head{ margin-bottom: 28px; }
/* Le curseur se manipule : au-dela d'une certaine largeur il devient penible
   a traverser, et la photo perd en definition. */
.ba-wrap{
  max-width: 920px;
  margin: 0 auto;
}
/* Deux comparateurs : l'un sous l'autre sur telephone, cote a cote des que la
   place le permet. */
.ba-wrap--duo{
  display: grid;
  gap: 34px;
  max-width: 1080px;
}
@media (min-width: 900px){
  .ba-wrap--duo{ grid-template-columns: 1fr 1fr; gap: 30px; }
}
/* Les photos de chantier sont en portrait : un cadre 16/9 leur couperait
   le plafond, qui est justement ce qu'il y a a montrer. */
.ba-wrap--duo .ba-stage{ aspect-ratio: 3/4; }

.ba{ margin: 0; }
.ba-stage{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--marine-noir);
  touch-action: pan-y;
  isolation: isolate;
}
.ba-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.ba-img--before{ clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-badge{
  position: absolute; top: 12px;
  z-index: 4;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  transition: opacity var(--dur-fast) var(--ease);
}
.ba-badge--before{ left: 12px; background: rgba(11,22,34,0.78); color: #fff; }
.ba-badge--after{ right: 12px; background: rgba(255,255,255,0.92); color: var(--marine); }
.ba-badge.is-hidden{ opacity: 0; }

.ba-handle{
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  z-index: 3;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 0 0 1px rgba(18,32,47,0.16), 0 0 22px rgba(18,32,47,0.4);
  pointer-events: none;
}
.ba-knob{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--marine);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ba-knob svg{ width: 17px; height: 17px; }
.ba-range{
  position: absolute; inset: 0;
  z-index: 5;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  touch-action: pan-y;
}
.ba-range::-webkit-slider-thumb{ -webkit-appearance: none; width: 56px; height: 100px; }
.ba-range::-moz-range-thumb{ width: 56px; height: 100px; border: 0; }
.ba-range:focus{ outline: none; }
.ba-range:focus-visible ~ .ba-handle .ba-knob{ box-shadow: 0 0 0 4px rgba(168,18,28,0.55), var(--shadow-md); }
.ba-range:active ~ .ba-handle .ba-knob{ transform: translate(-50%,-50%) scale(1.08); }

.ba-caption{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
}
.ba-caption strong{ font-size: .95rem; color: var(--marine); }
.ba-caption span{ font-size: .78rem; color: var(--ink-soft); line-height: 1.55; }

@media (min-width: 640px){
  .ba-stage{ aspect-ratio: 16/10; }
  .ba-knob{ width: 52px; height: 52px; }
  .ba-knob svg{ width: 20px; height: 20px; }
  .ba-badge{ top: 18px; font-size: .69rem; padding: 7px 15px; }
  .ba-badge--before{ left: 18px; }
  .ba-badge--after{ right: 18px; }
  .ba-caption{ margin-top: 22px; }
  .ba-caption strong{ font-size: 1.05rem; }
  .ba-caption span{ font-size: .85rem; }
}
@media (min-width: 1100px){ .ba-stage{ aspect-ratio: 16/9; } }
@media (min-width: 640px){ .ba-wrap--duo .ba-stage{ aspect-ratio: 3/4; } }
@media (min-width: 1100px){ .ba-wrap--duo .ba-stage{ aspect-ratio: 3/4; } }
/* Un seul comparateur : même cadre portrait, centré, à taille raisonnable. */
.ba-wrap--solo{ max-width: 480px; }
.ba-wrap--solo .ba-stage{ aspect-ratio: 3/4; }

/* ================= GALERIE DES RÉALISATIONS ================= */
/* Réalisations sur fond blanc : ce sont les photos de chantier
   qui portent la section, tout le reste s'efface. */
.gallery{
  position: relative;
  padding: var(--sec-y) 0;
  /* Le crème doux est à trois points du blanc pur : il ne peut
     pas servir de bloc distinct. Les réalisations prennent donc le
     crème, entre le blanc des prestations et le marine des bornes. */
  background: var(--creme);
  overflow: hidden;
}
.gallery .container{ position: relative; z-index: 2; }

/* Onglets de filtre : simple texte, l'actif prend une pastille rouge pâle */
.filters{
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}
.filters::-webkit-scrollbar{ display: none; }
.filter{
  flex: none;
  scroll-snap-align: start;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.filter:active{ transform: scale(.95); }
.filter:hover{ color: var(--rouge); }
.filter.is-active{
  background: var(--rouge-pale);
  color: var(--rouge);
  font-weight: 700;
}
@media (min-width: 640px){
  .filters{ justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 32px; }
  .filter{ padding: 12px 24px; font-size: .88rem; }
}

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.shot{
  position: relative;
  display: block;
  /* Les visuels sont en 1200×800 : les cadres suivent leur format, sinon on en
     perdrait un tiers au recadrage. */
  aspect-ratio: 3/2;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ardoise);
  cursor: zoom-in;
  transform: translateZ(0) scale(1);
  transition: transform var(--dur-med) var(--ease-soft),
              opacity var(--dur-med) var(--ease-soft),
              box-shadow var(--dur-med) var(--ease-soft);
  will-change: transform, opacity;
}
.shot img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-soft);
}
.shot .cap{
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 12px 11px;
  font-size: .7rem;
  line-height: 1.35;
  color: #fff;
  background: linear-gradient(180deg, rgba(11,22,34,0) 0%, rgba(11,22,34,0.88) 100%);
  transform: translateY(6px);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.shot .cap b{ display: block; font-weight: 600; }
.shot .cap em{
  display: block;
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rouge-clair);
  margin-top: 3px;
}
.shot .zoom{
  position: absolute;
  top: 9px; right: 9px;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(11,22,34,0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.shot .zoom svg{ width: 13px; height: 13px; }
/* Sur écran tactile, la légende reste lisible sans survol */
@media (hover: none){
  .shot .cap{ opacity: 1; transform: translateY(0); }
}
@media (hover: hover){
  .shot:hover{ box-shadow: var(--shadow-lg); }
  .shot:hover img{ transform: scale(1.08); }
  .shot:hover .cap{ opacity: 1; transform: translateY(0); }
  .shot:hover .zoom{ opacity: 1; transform: scale(1); }
}
/* Masquage filtré : on anime, puis le JS retire l'élément du flux */
.shot.is-hidden{ opacity: 0; transform: scale(.9); pointer-events: none; }
.shot.is-gone{ display: none; }

@media (min-width: 640px){ .gallery-grid{ grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 960px){
  .gallery-grid{ grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .shot .cap{ font-size: .78rem; padding: 30px 14px 14px; }
  .shot .zoom{ width: 30px; height: 30px; }
  .shot .zoom svg{ width: 15px; height: 15px; }
}

.gallery-more{ margin-top: 26px; display: flex; justify-content: center; }

/* Accueil : la grille de photos prend toute la largeur de l'écran sur
   ordinateur, avec la même marge latérale que le reste du site. Sous 960 px,
   le bandeau garde exactement la largeur du conteneur, donc rien ne bouge. */
.gallery-wide{ position: relative; z-index: 2; padding: 0 var(--gutter); }
@media (min-width: 960px){
  .gallery--accueil .gallery-grid,
  .gallery--large .gallery-grid{ gap: 14px; }
}
@media (max-width: 959px){
  .gallery-wide{ max-width: var(--container); margin: 0 auto; }
}

/* ---- Visionneuse plein écran ---- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(9,18,28,0.95);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
}
.lightbox.is-open{
  opacity: 1; visibility: visible;
  transition: opacity var(--dur-med) var(--ease), visibility 0s;
}
.lightbox-figure{
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: scale(.94);
  transition: transform var(--dur-med) var(--ease);
}
.lightbox.is-open .lightbox-figure{ transform: scale(1); }
.lightbox-figure img{
  max-height: calc(100svh - 150px);
  width: auto;
  margin: 0 auto;
  border-radius: var(--radius-md);
  object-fit: contain;
  box-shadow: var(--shadow-lg);
}
.lightbox-figure figcaption{
  text-align: center;
  color: rgba(255,255,255,0.8);
  font-size: .82rem;
  line-height: 1.5;
}
.lightbox-figure figcaption em{
  display: block;
  font-style: normal;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rouge-clair);
  margin-top: 5px;
}
/* Flèches, croix et compteur au-dessus de la photo : la figure (agrandie
   par transform à l'ouverture) vient après eux dans la page et les
   recouvrait, ce qui les rendait impossibles à cliquer sur les photos larges. */
.lb-btn,
.lb-close,
.lb-count{ z-index: 3; }
.lb-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.lb-btn svg{ width: 20px; height: 20px; }
.lb-btn:hover{ background: var(--rouge); border-color: var(--rouge); }
.lb-prev{ left: 10px; }
.lb-next{ right: 10px; }
.lb-close{
  position: absolute;
  top: 14px; right: 14px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.lb-close svg{ width: 18px; height: 18px; }
.lb-close:hover{ background: var(--rouge); border-color: var(--rouge); transform: rotate(90deg); }
.lb-count{
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  font-size: .72rem;
  letter-spacing: .14em;
  color: rgba(255,255,255,0.55);
}
@media (min-width: 960px){
  .lb-prev{ left: 26px; }
  .lb-next{ right: 26px; }
  .lb-btn{ width: 52px; height: 52px; }
}

/* ================= CITATION ================= */
.divider-quote{
  position: relative;
  padding: calc(var(--sec-y) * .8) 0;
  /* La citation prolonge le dernier bloc À propos : même fond, pas de couture
     au milieu d'une même respiration. */
  background: var(--creme);
  text-align: center;
}
.divider-quote .container{ position: relative; z-index: 2; }
.divider-quote blockquote{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.15rem, 4.2vw, 1.9rem);
  color: var(--ink);
  max-width: 1040px;
  margin: 0 auto;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.divider-quote cite{
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: .67rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rouge);
  line-height: 1.6;
}
@media (min-width: 1200px){
  /* La citation ferme la page : cassée en deux lignes, elle perd son souffle. */
  .divider-quote blockquote{ max-width: none; white-space: nowrap; font-size: min(1.9rem, 2.55vw); }
}
@media (min-width: 960px){
  .divider-quote cite{ margin-top: 18px; font-size: .74rem; letter-spacing: .2em; }
}

/* ================= ZONE D'INTERVENTION ================= */
.zone{
  position: relative;
  padding: var(--sec-y) 0;
  background: var(--marine);
  color: var(--white);
  overflow: hidden;
  overflow: clip;
}
.zone::before{
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background-image: url("../images/beton-texture.svg");
  background-size: 420px;
  opacity: .45;
  mix-blend-mode: soft-light;
}
.zone .container{ position: relative; z-index: 2; }
.zone .section-head{ max-width: 920px; }
.zone .section-head h2{ color: #fff; }
.zone .section-head p{ color: rgba(255,255,255,0.72); }

.zone-grid{ display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.zone-secteurs{ display: flex; flex-direction: column; gap: 24px; }

.zone-group h4{
  font-size: .67rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rouge-clair);
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
/* Le compte évite d'avoir à déplier pour savoir ce que le secteur contient. */
.zone-count{
  font-size: .62rem;
  letter-spacing: .1em;
  font-weight: 500;
  color: rgba(255,255,255,0.42);
  text-transform: none;
}

/* --- Les communes en pastilles ---
   Elles étaient présentées en deux colonnes de lignes soulignées : 49 communes
   dans ce format faisaient deux écrans et demi de haut, et laissaient la moitié
   droite de la section vide. En pastilles, la même liste tient en quelques
   lignes et se lit d'un coup d'œil. */
.zone-towns{ display: flex; flex-wrap: wrap; gap: 8px; }
.zone-towns li{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  line-height: 1;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 8px 13px 8px 10px;
}
.zone-towns li::before{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rouge-clair);
  flex: none;
}

/* Le surplus de communes est replié dans un <details> natif : le texte reste
   dans le HTML — donc indexable — sans occuper l'écran. Même raisonnement que
   la section « Questions fréquentes ». */
.zone-plus{ margin-top: 10px; }
.zone-plus summary{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  font-size: .74rem;
  color: rgba(255,255,255,0.6);
  padding: 6px 2px;
  transition: color var(--dur-fast);
}
.zone-plus summary::-webkit-details-marker{ display: none; }
.zone-plus summary::before{
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px,-1px);
  transition: transform var(--dur-fast) var(--ease);
  flex: none;
}
.zone-plus[open] summary::before{ transform: rotate(-135deg) translate(-2px,-2px); }
.zone-plus summary:hover{ color: var(--rouge-clair); }
.zone-plus .zone-towns{ margin-top: 10px; }

/* --- Colonne de droite : carte + repères --- */
.zone-carte{ display: flex; flex-direction: column; gap: 16px; }

/* ---- Version simple : la carte et trois reperes, sans la liste des communes.
   Les 49 noms restaient dans la fiche JSON-LD pour les moteurs ; a l'ecran ils
   faisaient un mur de pastilles que personne ne lisait. ---- */
.zone-simple{
  display: grid;
  gap: 26px;
  align-items: center;
}
@media (min-width: 860px){
  .zone-simple{ grid-template-columns: 1.15fr .85fr; gap: 44px; }
}
.map-frame{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 4px solid rgba(255,255,255,0.08);
  aspect-ratio: 4/3;
}
.map-frame iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }
/* Écran d'attente de la carte : rien n'est chargé chez Google avant le clic. */
.map-frame--consent{ background: rgba(255,255,255,0.04); }
.map-consent{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center;
}
.map-consent__titre{ font-family: var(--font-head); font-weight: 600; color: var(--white); font-size: 1rem; }
.map-consent__texte{ max-width: 360px; font-size: .82rem; line-height: 1.6; color: rgba(255,255,255,0.78); }
.map-consent__texte a{ color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.map-consent__btn{ margin-top: 4px; }

.zone-reperes{ display: flex; flex-direction: column; gap: 2px; }
.zone-reperes li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  font-size: .8rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.zone-reperes li:last-child{ border-bottom: none; }
.zone-reperes svg{ width: 17px; height: 17px; color: var(--rouge-clair); flex: none; margin-top: 1px; }
.zone-reperes strong{ color: var(--white); font-weight: 600; }

.zone-note{
  margin-top: 26px;
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
}
.zone-note a{ color: var(--rouge-clair); text-decoration: underline; text-underline-offset: 3px; }
.zone-note a:hover{ color: var(--white); }

@media (min-width: 960px){
  /* La liste tenant désormais dans la hauteur de la carte, les deux colonnes
     se répondent : plus besoin de rendre la carte collante pour combler
     le vide de la moitié droite. */
  .zone-grid{ grid-template-columns: 1.15fr 1fr; gap: 56px; }
  .zone-secteurs{ gap: 30px; }
  .zone-group h4{ font-size: .75rem; letter-spacing: .16em; margin-bottom: 14px; }
  .zone-count{ font-size: .68rem; }
  .zone-towns{ gap: 9px; }
  .zone-towns li{ font-size: .84rem; padding: 9px 15px 9px 11px; }
  .zone-plus summary{ font-size: .8rem; }
  .map-frame{ border-width: 6px; }
  .zone-reperes li{ font-size: .87rem; padding: 15px 0; }
  .zone-note{ margin-top: 40px; font-size: .85rem; text-align: center; }
}

/* ================= QUESTIONS FRÉQUENTES =================
   Accordéon en <details> natif : pas une ligne de JavaScript, le contenu
   des réponses reste dans le HTML et donc lisible par les moteurs même
   replié — ce qu'un panneau masqué en display:none piloté au script ne
   garantit pas. Fond marine, précédé de sa crête : la section reprend
   le sombre après la respiration claire du bloc citation. */
.faq{
  position: relative;
  padding: var(--sec-y) 0;
  background: var(--marine);
  color: var(--white);
}
.faq .container{ position: relative; z-index: 2; }
.faq .section-head h2{ color: #fff; }
.faq .section-head p{ color: rgba(255,255,255,0.72); }

.faq-grid{ display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; }

.faq-item{
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 2px solid transparent;
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.faq-item:hover{ background: rgba(255,255,255,0.075); }
.faq-item[open]{
  background: rgba(255,255,255,0.075);
  border-left-color: var(--rouge);
}

.faq-item summary{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
}
/* Le chevron par défaut de Safari se loge dans ::-webkit-details-marker */
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary:focus-visible{ outline: 2px solid var(--rouge); outline-offset: 2px; }

.faq-item summary h3{
  flex: 1;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
}

/* Croix qui bascule en tiret : une seule barre pivote, l'autre reste fixe */
.faq-item .faq-sign{
  position: relative;
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
}
.faq-item .faq-sign::before,
.faq-item .faq-sign::after{
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 13px; height: 2px;
  background: var(--rouge);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-fast) var(--ease);
}
.faq-item .faq-sign::after{ transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-sign::after{ transform: translate(-50%, -50%) rotate(0deg); }

.faq-body{
  padding: 0 50px 16px 16px;
  margin-top: -4px;
  animation: faqIn var(--dur-fast) var(--ease-soft) both;
}
.faq-body p{
  font-size: .84rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.74);
}
@keyframes faqIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

.faq-more{
  margin-top: 26px;
  text-align: center;
  font-size: .78rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
}
.faq-more a{ color: var(--rouge-clair); border-bottom: 1px solid rgba(232,106,115,0.4); }
.faq-more a:hover{ border-bottom-color: var(--rouge-clair); }

@media (min-width: 960px){
  /* Une seule colonne, mais bridée en largeur : sur deux colonnes, une
     question qui passe à la ligne décale sa voisine et la grille se
     désaligne dès qu'un panneau s'ouvre. */
  .faq-grid{ max-width: 920px; margin: 0 auto; gap: 12px; }
  .faq-item summary{ padding: 18px 20px; gap: 16px; }
  .faq-item summary h3{ font-size: 1.02rem; }
  .faq-body{ padding: 0 56px 20px 20px; }
  .faq-body p{ font-size: .9rem; }
  .faq-more{ margin-top: 40px; font-size: .85rem; }
}

/* ================= CONTACT ================= */
.contact{
  position: relative;
  padding: var(--sec-y) 0;
  background: var(--white);   /* blanc à la demande du client (01/10/2026), au lieu de la crème */
}
.contact .container{ position: relative; z-index: 2; }
.contact .section-head{ max-width: 1000px; }

.contact-grid{ display: grid; grid-template-columns: 1fr; gap: 16px; }
.contact-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  box-shadow: var(--shadow-sm);
}
.contact-card .card-title{ margin-bottom: 16px; }
.contact-card .card-sub{ font-size: .8rem; color: var(--ink-soft); margin: -10px 0 4px; }
.contact-methods{ display: flex; flex-direction: column; gap: 10px; }
.contact-method{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--creme-doux);
  border: 1px solid var(--line);
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast);
}
.contact-method .ico{
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: none;
  color: #fff;
}
.contact-method .ico svg{ width: 19px; height: 19px; }
.contact-method.tel .ico{ background: linear-gradient(135deg, var(--rouge-clair), var(--rouge)); color: var(--on-rouge); }
.contact-method.wa .ico{ background: linear-gradient(135deg, #25D366, #1FBE5A); }
.contact-method.mail .ico{ background: linear-gradient(135deg, var(--ardoise), var(--marine)); }
.contact-method .txt{ min-width: 0; }
.contact-method .txt small{
  display: block;
  font-size: .61rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.contact-method .txt strong{ display: block; font-size: .92rem; margin-top: 3px; color: var(--marine); }

.contact-place{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .8rem;
  color: var(--ink-soft);
}
.contact-place .ico{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(168,18,28,0.13);
  color: var(--rouge);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.contact-place .ico svg{ width: 18px; height: 18px; }

.contact-form{ display: flex; flex-direction: column; gap: 12px; }
.field{ display: flex; flex-direction: column; gap: 6px; }
.field label{
  font-size: .69rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field textarea, .field select{
  background: var(--creme-doux);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 16px;              /* évite le zoom automatique sur iOS */
  color: var(--ink);
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
/* Placeholder assombri : #98A3AD sur blanc tombait sous le contraste AA. */
.field input::placeholder, .field textarea::placeholder{ color: #6B7682; }
.field-opt{ font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Consentement : case obligatoire, alignée sur la première ligne du texte. */
.field-consent{ display: flex; align-items: flex-start; gap: 10px; font-size: .78rem; line-height: 1.5; color: var(--ink-soft); }
.field-consent input{ flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--rouge); }
.field-consent a{ color: var(--rouge); text-decoration: underline; text-underline-offset: 2px; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline: none;
  border-color: var(--rouge);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(168,18,28,0.20);
}
.field textarea{ resize: vertical; min-height: 96px; }
.form-actions{ display: flex; flex-direction: column; gap: 10px; }
.form-note{ font-size: .69rem; line-height: 1.5; color: var(--ink-soft); }
.form-success{
  display: none;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: #0E7A3E;
  background: rgba(37,211,102,0.12);
  border: 1px solid rgba(37,211,102,0.35);
  padding: 11px 14px;
  border-radius: var(--radius-sm);
}
.form-success.show{ display: flex; }

@media (hover: hover){
  .contact-method:hover{ transform: translateX(6px); background: var(--white); border-color: rgba(168,18,28,0.40); }
}
@media (min-width: 640px){
  .form-actions{ flex-direction: row; }
  .form-actions .btn{ flex: 1; }
}
@media (min-width: 960px){
  .contact-grid{ grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-card{ padding: 34px 28px; }
  .contact-card .card-title{ margin-bottom: 22px; }
  .contact-methods{ gap: 14px; }
  .contact-method{ padding: 16px 18px; gap: 16px; }
  .contact-method .ico{ width: 48px; height: 48px; }
  .contact-method .ico svg{ width: 22px; height: 22px; }
  .contact-method .txt small{ font-size: .69rem; }
  .contact-method .txt strong{ font-size: 1rem; }
  .contact-place{ margin-top: 26px; padding-top: 22px; font-size: .88rem; gap: 14px; }
  .contact-place .ico{ width: 44px; height: 44px; }
  .contact-form{ gap: 16px; }
  .field{ gap: 8px; }
  .field label{ font-size: .77rem; }
  .field input, .field textarea, .field select{ padding: 14px 16px; font-size: .95rem; }
  .field textarea{ min-height: 110px; }
  .form-note{ font-size: .75rem; }
}

/* ================= FOOTER ================= */
.site-footer{
  position: relative;
  background: var(--marine-noir);
  color: rgba(255,255,255,0.65);
  padding: calc(var(--sec-y) * .8) 0 calc(var(--sec-y) * .8 + env(safe-area-inset-bottom));
}
.site-footer .container{ position: relative; z-index: 2; }

/* --- Bandeau de relance ---
   Premier bloc du pied de page, avant les liens : on arrive ici en fin de
   lecture, c'est le moment où l'on décroche son téléphone. Le filet rouge
   cuite en haut le détache du corps de la page sans ajouter de fond. */
.footer-relance{
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-relance__texte h3{
  font-family: var(--font-head);
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 8px;
}
.footer-relance__texte p{
  font-size: .85rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
}
.footer-relance__actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.footer-relance__actions .btn{ flex: 1 1 auto; }

/* Prestations, réalisations et location se terminent déjà par une bande
   « cta-band » qui propose exactement les deux mêmes actions. Y ajouter la
   relance ferait le même appel deux fois en un demi-écran. Plutôt que de
   maintenir deux pieds de page, la relance s'efface d'elle-même là où la
   page se termine déjà par un appel au devis — le HTML du pied de page
   reste ainsi rigoureusement identique sur les six pages.
   Les navigateurs sans :has() affichent simplement les deux : c'est
   redondant, jamais cassé. */
main:has(> .cta-band:last-child) + .site-footer .footer-relance{ display: none; }

.footer-top{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand{ grid-column: 1 / -1; }
.footer-brand .brand{ margin-bottom: 16px; }
.footer-brand .brand-mark img{ height: 44px; }
.footer-brand .brand-text .b1{ font-size: 1.3rem; }
.footer-brand .brand-text .b2{ font-size: .6rem; }
.footer-brand p{ font-size: .8rem; line-height: 1.7; max-width: 340px; color: rgba(255,255,255,0.5); }
.footer-socials{ display: flex; gap: 10px; margin-top: 16px; }
.social-btn{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast), border-color var(--dur-fast);
}
.social-btn svg{ width: 16px; height: 16px; }
.social-btn:hover{ transform: translateY(-4px); background: var(--rouge); border-color: var(--rouge); color: var(--white); }
/* « Suivez-nous » : Instagram et la fiche Google, sous les boutons de contact. */
.footer-follow{ display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.footer-follow__titre{
  margin-right: 4px;
  font-family: var(--font-head);
  font-size: .67rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
@media (min-width: 960px){
  .footer-follow{ gap: 12px; margin-top: 16px; }
  .footer-follow__titre{ font-size: .77rem; letter-spacing: .15em; }
}

.footer-col h4{
  font-size: .67rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 12px;
}
.footer-col ul{ display: flex; flex-direction: column; gap: 9px; }
.footer-col a{ font-size: .79rem; transition: color var(--dur-fast); }
.footer-col a:hover{ color: var(--rouge-clair); }
.footer-col li{ display: flex; align-items: center; gap: 8px; font-size: .79rem; }
.footer-col li svg{ width: 14px; height: 14px; color: var(--rouge-clair); flex: none; }
.footer-col--contact{ grid-column: 1 / -1; }

/* Les coordonnées peuvent passer à la ligne (l'e-mail est long) : on aligne
   donc l'icône sur la première ligne de texte plutôt qu'au centre du bloc. */
.footer-contact-list li{ align-items: flex-start; line-height: 1.5; }
.footer-contact-list li svg{ margin-top: 2px; }
.footer-contact-list a{ word-break: break-word; }

.footer-bottom{
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: .69rem;
  color: rgba(255,255,255,0.62);   /* 0.4 donnait 3,8:1, sous l'AA */
  line-height: 1.5;
}
.footer-legal{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.footer-legal a{ transition: color var(--dur-fast); }
.footer-legal a:hover{ color: var(--rouge-clair); }

@media (min-width: 640px){
  .footer-top{ grid-template-columns: repeat(3, 1fr); }
  .footer-brand{ grid-column: 1 / -1; }
  .footer-col--contact{ grid-column: auto; }
  .footer-relance{ flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; }
  .footer-relance__actions .btn{ flex: 0 0 auto; }
  .footer-bottom{ flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
}
@media (min-width: 960px){
  .site-footer{ padding-bottom: 26px; }
  .footer-relance{ padding-bottom: 44px; margin-bottom: 44px; }
  .footer-relance__texte h3{ font-size: 1.6rem; }
  .footer-relance__texte p{ font-size: .92rem; }
  .footer-top{ grid-template-columns: 1.4fr .8fr 1fr 1.2fr; gap: 30px; padding-bottom: 44px; }
  .footer-brand{ grid-column: auto; }
  .footer-brand .brand-mark img{ height: 54px; }
  .footer-brand .brand-text .b1{ font-size: 1.55rem; }
  .footer-brand p{ font-size: .87rem; }
  .footer-socials{ gap: 12px; margin-top: 20px; }
  .social-btn{ width: 40px; height: 40px; }
  .footer-col h4{ font-size: .77rem; letter-spacing: .15em; margin-bottom: 18px; }
  .footer-col ul{ gap: 11px; }
  .footer-col a, .footer-col li{ font-size: .87rem; }
  .footer-bottom{ padding-top: 26px; font-size: .77rem; }
}


/* ================= RETOUR EN HAUT ================= */
.to-top{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 700;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--white);
  color: var(--marine);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.9);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility 0s linear .25s;
}
.to-top.show{
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s;
}
.to-top svg{ width: 19px; height: 19px; }
.to-top:hover{ background: var(--rouge); color: var(--white); }

@media (min-width: 960px){
  .nav-desktop{ display: block; }
  .burger{ display: none; }
  .header-cta > a.btn-primary{ display: inline-flex; }
  .to-top{ right: 22px; bottom: 26px; width: 48px; height: 48px; }
  .to-top svg{ width: 20px; height: 20px; }
}

/* ================= RÉVÉLATIONS AU SCROLL =================
   Uniquement transform + opacity : jamais de reflow pendant l'animation. */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft);
  will-change: transform, opacity;
}
[data-reveal].in-view{ opacity: 1; transform: translateY(0); }
[data-reveal="scale"]{ transform: translateY(0) scale(.94); }
[data-reveal="scale"].in-view{ transform: translateY(0) scale(1); }
[data-reveal="left"]{ transform: translateX(-24px); }
[data-reveal="left"].in-view{ transform: translateX(0); }
[data-reveal="right"]{ transform: translateX(24px); }
[data-reveal="right"].in-view{ transform: translateX(0); }

[data-stagger] > *{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft);
}
[data-stagger].in-view > *{ opacity: 1; transform: translateY(0); }

/* Une fois l'animation jouée, on rend la main au navigateur */
.anim-done{ will-change: auto; }

/* ---------- Écran de chargement ---------- */
/* ================= PASSAGE D'UNE PAGE À L'AUTRE =================
   Plus d'écran de chargement : la page s'affiche directement. Là où le
   navigateur le gère, le changement de page se fait en un fondu court — assez
   pour que ça ne clignote pas, assez bref pour qu'on ne l'attende jamais.
   Partout ailleurs, la navigation reste simplement instantanée. */
@view-transition{ navigation: auto; }
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .18s;
  animation-timing-function: var(--ease-soft);
}
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation: none; }
}

/* ================= PAGES LÉGALES =================
   Mentions légales et confidentialité, sur le modèle d'une politique
   imprimée : dates sous le titre, sommaire encadré, parties numérotées
   « 01 — » séparées par un filet, tableaux sobres. Une colonne de lecture
   étroite pour que les lignes restent confortables. */
.legal-dates{
  margin-top: 14px;
  font-size: .82rem;
  color: rgba(255,255,255,0.72);
}
.legal{ background: var(--white); padding: calc(var(--sec-y) * .8) 0 var(--sec-y); }
.legal-body{ max-width: 820px; }
.legal-intro{ font-size: 1rem; line-height: 1.8; color: var(--ink-soft); }

/* Sommaire */
.legal-toc{
  margin-top: 32px;
  padding: 26px 28px 28px;
  background: #F4F5F7;
  border: 1px solid #E4E7EB;
  border-radius: 12px;
}
.legal-toc__titre{
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.05rem; color: var(--ink);
}
.legal-toc ol{
  margin-top: 16px;
  padding-left: 24px;
  list-style: decimal;
  display: grid;
  gap: 10px 36px;
}
.legal-toc li{ padding-left: 4px; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.legal-toc li::marker{ color: var(--ink-soft); }
.legal-toc a{ color: var(--ink); text-decoration: none; }
.legal-toc a:hover{ color: var(--rouge); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 620px){ .legal-toc ol{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px){ .legal-toc ol{ grid-template-columns: repeat(3, 1fr); } }

/* Parties numérotées */
.legal-section{
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid #E8EAED;
}
.legal-section h2{
  font-size: clamp(1.25rem, 3.4vw, 1.65rem);
  line-height: 1.25;
  color: var(--ink);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.legal-num{ color: var(--rouge); margin-right: 2px; }
.legal-section p,
.legal-section li{ font-size: .95rem; line-height: 1.8; color: var(--ink-soft); }
.legal-section p{ margin-top: 14px; }
.legal-section strong{ color: var(--ink); }
.legal-section a{ color: var(--rouge); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Listes à puces */
.legal-section ul{ margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.legal-section ul li{ position: relative; padding-left: 20px; }
.legal-section ul li::before{
  content: ""; position: absolute; left: 3px; top: .8em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rouge);
}
/* Listes de définitions (droits, services) : libellé en gras, sans puce */
.legal-section .legal-defs{ gap: 12px; padding-left: 16px; border-left: 2px solid #E8EAED; }
.legal-section .legal-defs li{ padding-left: 0; }
.legal-section .legal-defs li::before{ content: none; }

/* Tableaux */
.legal-table-wrap{ margin-top: 18px; }
.legal-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  line-height: 1.6;
  border: 1px solid #E4E7EB;
}
.legal-table th{
  background: #F4F5F7;
  text-align: left;
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  color: var(--ink);
  padding: 14px 16px;
  border: 1px solid #E4E7EB;
}
.legal-table td{
  padding: 14px 16px;
  vertical-align: top;
  color: var(--ink-soft);
  border: 1px solid #E4E7EB;
}
.legal-table td:first-child{ color: var(--ink); font-weight: 700; }
/* Sur téléphone, chaque ligne devient une fiche : libellé de colonne au-dessus
   de chaque valeur, plutôt qu'un tableau à faire défiler de côté. */
@media (max-width: 639px){
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td{ display: block; width: 100%; }
  .legal-table{ border: 0; }
  .legal-table thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-table tr{ border: 1px solid #E4E7EB; border-radius: 8px; overflow: hidden; }
  .legal-table tr + tr{ margin-top: 10px; }
  .legal-table td{ border: 0; padding: 10px 14px; }
  .legal-table td:first-child{ background: #F4F5F7; }
  .legal-table td:not(:first-child)::before{
    content: attr(data-label);
    display: block;
    font-family: var(--font-head); font-weight: 600; font-size: .7rem;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 2px;
  }
  .legal-toc{ padding: 20px 20px 22px; }
  .legal-section{ margin-top: 36px; padding-top: 30px; }
}

.a-completer{ background: #FFF1B8; color: #5C4600; padding: 0 4px; border-radius: 2px; font-weight: 700; }
html{ scroll-padding-top: calc(var(--header-h) + 16px); }

/* ================= TYPOGRAPHIE TÉLÉPHONE =================
   Sous 640 px seulement : tablette et ordinateur ne bougent pas. Le but n'est
   pas de tout rétrécir mais de tenir une hiérarchie pensée pour un écran de
   poche — un H1 franc, des H2 nettement en dessous, un texte courant
   confortable, le secondaire plus discret, des blocs moins espacés. */
@media (max-width: 639px){
  /* La carte de réassurance ne fait plus qu'une ligne : elle déborde moins
     sur la bannière et sur la section suivante. */
  :root{ --sec-y: 56px; --trust-overlap: 60px; }

  /* Réassurance : les quatre engagements sur une seule ligne, icône + titre,
     sans la description — un coup d'œil suffit. */
  .trust-card{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 14px 6px;
    gap: 4px;
  }
  .trust-item{ gap: 6px; }
  .trust-item .ico{ width: 30px; height: 30px; }
  .trust-item .ico svg{ width: 15px; height: 15px; }
  .trust-item strong{ font-size: .66rem; line-height: 1.2; }
  .trust-item .txt > span{ display: none; }

  /* Titres principaux */
  h1, .h1{ font-size: clamp(1.7rem, 7.4vw, 2rem); line-height: 1.08; }
  .page-head h1{ font-size: clamp(1.55rem, 6.8vw, 1.85rem); line-height: 1.12; margin-top: 10px; }
  /* Le masque de révélation coupait le bas des lettres (q, g, p) avec
     l'interlignage serré du slogan : il lui faut un peu plus de marge. */
  .line-mask{ padding-bottom: .14em; margin-bottom: -.08em; }
  .hero-slogan{ margin-top: 18px; }

  /* Titres de section, puis sous-titres de bloc un cran en dessous */
  h2, .h2{ font-size: clamp(1.3rem, 5.8vw, 1.5rem); line-height: 1.18; }
  .apropos-text h2,
  .famille-head h2,
  .rental-teaser h2,
  .cta-band h2,
  .en-construction-texte h2{ font-size: clamp(1.2rem, 5.3vw, 1.35rem); line-height: 1.2; }
  h3, .h3{ font-size: 1rem; line-height: 1.3; }

  /* Texte courant */
  .lead{ font-size: .9rem; line-height: 1.65; }
  .hero-content .lead{ margin-top: 20px; }
  .apropos-text p,
  .cta-band p,
  .en-construction-texte p,
  .rental-teaser p,
  .famille-head p{ font-size: .9rem; line-height: 1.65; }
  .apropos-text p{ margin-top: 12px; }
  .service-card p,
  .mat-body p,
  .etapes p{ font-size: .86rem; line-height: 1.62; }

  /* Secondaire */
  .eyebrow{ font-size: 10.5px; letter-spacing: .28em; }

  /* Rythme vertical */
  .section-head{ margin-bottom: 26px; }
  .section-head h2, .section-head p{ margin-top: 10px; }
  .services-grid{ gap: 24px; }
  .service-card p{ margin-top: 6px; }
  .service-card .tag{ margin-top: 8px; }
  .hero-actions{ margin-top: 42px; }
  .btn{ padding: 14px 22px; }

  /* Les paires de boutons restent côte à côte au lieu de s'empiler : deux
     moitiés égales, le libellé passe sur deux lignes s'il le faut. */
  .hero-actions,
  .cta-actions,
  .en-construction-actions,
  .footer-relance__actions,
  .form-actions{
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
  }
  /* Bannière haute : la photo occupe l'essentiel de l'écran et le texte,
     centré dedans, garde de l'air au-dessus et en dessous. */
  .hero{ min-height: min(580px, 80svh); }
  /* Le texte de la bannière descend un peu vers le centre de la photo
     (à mi-chemin, pas plus) : ~36 px sur un écran de 390 × 844, moins sur
     les petits écrans où les boutons approchent déjà du bandeau. */
  .hero .hero-content{ padding-top: calc(var(--sec-y) * .8 + clamp(12px, 9svh - 40px, 40px)); }
  .hero-actions .btn,
  .cta-actions .btn,
  .en-construction-actions .btn,
  .footer-relance__actions .btn,
  .form-actions .btn{
    flex: 1 1 0;
    min-width: 0;
    max-width: 240px;
    padding: 13px 10px;
    font-size: .7rem;
    letter-spacing: .05em;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    gap: 6px;
  }
  .hero-actions .btn svg,
  .cta-actions .btn svg,
  .en-construction-actions .btn svg,
  .footer-relance__actions .btn svg,
  .form-actions .btn svg{ width: 14px; height: 14px; }

  /* Une colonne « 1fr » s'élargit jusqu'au plus long contenu (l'adresse
     mail, le formulaire) : minmax(0, 1fr) la tient dans l'écran. */
  .contact-cols,
  .contact-grid{ grid-template-columns: minmax(0, 1fr); }
}

/* Très petits écrans */
@media (max-width: 360px){
  :root{ --gutter: 14px; }
  /* Logo, bouton téléphone et menu tiennent tout juste : on gagne les
     quelques pixels qui faisaient dépasser le menu à droite. */
  .site-header .header-cta{ gap: 2px; }
  .site-header .header-cta .btn{ padding: 10px 8px; gap: 6px; }
  .burger{ width: 36px; }
  .hero-badge{ font-size: .65rem; }
  .story-stat b{ font-size: 1.2rem; }
  .story-stat span{ font-size: .56rem; }
}

/* Prestations : texte complémentaire face à la photo, sur ordinateur
   seulement (au téléphone, la famille garde son intro courte). */
.famille-plus{ display: none; }
@media (min-width: 860px){
  .famille-plus{ display: block; }
  .famille-plus p{ margin-top: 14px; font-size: .92rem; line-height: 1.75; color: var(--ink-soft); }
  .famille-plus .apropos-list{ margin-top: 18px; }
}

/* Page Réalisations en blanc (demande du client, 01/10/2026) : la galerie
   et l'avant / après quittent la crème. Le bandeau devis, blanc lui aussi,
   s'en sépare par un simple filet. */
.gallery--large,
.ba-section{ background: var(--white); }
.ba-section + .cta-band{ border-top: 1px solid var(--line); }