/* ==========================================================================
   NeonLand — feuille de style
   Enseignes lumineuses, néons, écrans LED, stores, lambrequins
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
html { scroll-behavior: smooth; }
/* L'en-tête est en position fixed : sans cette marge, une ancre (#etapes,
   #devis-lp...) amène le haut de la section pile sous le bandeau, qui en cache
   le titre. La valeur suit la hauteur réservée à l'en-tête. */
html { scroll-padding-top: calc(var(--h-entete) + 1rem); }
img, picture, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Tokens ---------- */
:root {
  /* Couleurs */
  --suie: #16140F;
  --suie-2: #201C15;
  --suie-line: rgba(243, 238, 228, 0.12);
  --papier: #F6F2E9;
  --papier-2: #ECE5D3;
  --papier-line: rgba(28, 25, 18, 0.12);
  --encre: #1C1912;
  --blanc-chaud: #F3EEE4;
  /* --ambre-* : accent du site. Nommées "ambre" à l'origine, elles portent
     maintenant les valeurs violettes (tout l'accent orange/jaune est passé
     au violet) pour ne pas avoir à toucher chaque usage un par un. */
  --ambre: #D6529E;
  --ambre-vif: #E36FAE;
  --ambre-sourd: #A83D7C;
  --ambre-rgb: 214, 82, 158;
  --zinc: #6E6558;
  --violet-neon: #C4237B;
  --violet-neon-vif: #D62B88;
  --violet-neon-sombre: #8F1A5B;
  --violet-clair: #D6529E;
  --violet-clair-vif: #E36FAE;
  --violet-clair-sourd: #A83D7C;

  /* Jaune doré : accent complémentaire ponctuel sur fond violet plein
     (.fond-violet), pour distinguer un repère (eyebrow) du violet ambiant.
     Ne remplace pas l'accent principal --ambre/--violet-clair. */
  --jaune-neon: #FDE68A;

  /* Typo */
  --f-display: "DM Sans", "Segoe UI", sans-serif;
  --f-corps: "DM Sans", "Segoe UI", sans-serif;
  --f-mono: "DM Sans", "Segoe UI", sans-serif;

  /* Échelle */
  --fs-hero: clamp(3rem, 2.1rem + 4.4vw, 5.6rem);
  --fs-h1: clamp(2.3rem, 1.8rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(1.7rem, 1.5rem + 1.2vw, 2.4rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-lead: clamp(1.1rem, 1.02rem + 0.35vw, 1.32rem);

  /* Rythme */
  --gouttiere: clamp(1.25rem, 1rem + 1vw, 2.5rem);
  --section-py: clamp(4rem, 3rem + 4vw, 7rem);
  --rayon: 2px;

  --largeur-max: 1180px;
  --h-entete: 90px;

  /* Flèche utilisée en masque CSS (la couleur vient du background). */
  --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 8h19M15 2l6 6-6 6'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
body {
  font-family: var(--f-corps);
  background: var(--papier);
  color: var(--encre);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-family: var(--f-corps);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ambre-sourd);
}
.fond-sombre .eyebrow { color: var(--ambre); }

p.lead {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.6;
  color: var(--zinc);
  max-width: 46ch;
}
.fond-sombre p.lead { color: rgba(243, 238, 228, 0.78); }
p.lead strong { color: var(--encre); font-weight: 700; }
.fond-sombre p.lead strong { color: var(--blanc-chaud); }

:focus-visible {
  outline: 2px solid var(--ambre);
  outline-offset: 3px;
}

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

.fond-sombre {
  background: var(--suie);
  color: var(--blanc-chaud);
}
.fond-sombre .zinc-txt { color: rgba(243, 238, 228, 0.62); }
.zinc-txt { color: var(--zinc); }

section { padding-block: var(--section-py); }

.diviseur {
  border: 0;
  border-top: 1px solid var(--papier-line);
}
.fond-sombre .diviseur { border-top-color: var(--suie-line); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--f-corps);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.85em 1.6em;
  border-radius: var(--rayon);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.icone-tel {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: currentColor;
}

/* Texte blanc sur le CTA plein : il accroche l'oeil bien mieux que l'encre.
   Le violet passe au ton foncé de la palette pour que ce blanc reste lisible,
   #D6529E ne donnait que 3.7:1 contre 5.4:1 ici (AA demande 4.5:1). */
.btn-ambre {
  background: var(--violet-neon);
  color: var(--blanc-chaud);
  box-shadow: 0 4px 18px rgba(var(--ambre-rgb), 0.4);
}
.btn-ambre:hover {
  background: var(--violet-neon-vif);
  box-shadow: 0 6px 26px rgba(var(--ambre-rgb), 0.55);
}

/* CTA principal (paire d'actions hero/CTA) : reprend l'anneau pulsé du
   bouton flottant mobile, comme une enseigne qui s'allume. */
.hero-actions .btn-ambre { position: relative; }
.hero-actions .btn-ambre::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--rayon);
  border: 2px solid var(--violet-clair);
  opacity: 0.5;
  animation: pulseCTA 2.4s ease-out infinite;
  pointer-events: none;
}

.btn-contour {
  border-color: var(--violet-clair-sourd);
  color: inherit;
  background: transparent;
  box-shadow: 0 4px 18px rgba(var(--ambre-rgb), 0.18);
}
.fond-sombre .btn-contour { border-color: var(--violet-clair); }
.btn-contour:hover {
  background: rgba(var(--ambre-rgb), 0.15);
  border-color: var(--violet-clair);
  box-shadow: 0 6px 24px rgba(var(--ambre-rgb), 0.3);
}

/* ---------- En-tête / nav ---------- */
.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(15, 13, 10, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.entete--pleine {
  background: rgba(22, 20, 15, 0.92);
  border-bottom-color: var(--suie-line);
}

body { padding-top: var(--h-entete); }

.barre-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}

.logo {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--blanc-chaud);
  text-transform: uppercase;
}
.logo span { color: var(--ambre); }

/* Le logo est passé du texte à l'image. La hauteur est fixée, la largeur suit
   le ratio 3:1 du fichier : c'est la hauteur qui conditionne l'équilibre de la
   barre de navigation, pas la largeur. */
.logo-img {
  display: block;
  height: 44px;
  width: auto;
}
.pied .logo-img,
.lp-pied .logo-img { height: 44px; }
.lp-pied .logo { display: inline-block; }
@media (max-width: 520px) {
  .logo-img { height: 32px; }
}

.nav-liens {
  display: none;
  align-items: center;
  gap: clamp(1.2rem, 1rem + 1vw, 2.4rem);
  font-family: var(--f-corps);
  font-weight: 500;
  font-size: 0.94rem;
  color: rgba(243, 238, 228, 0.75);
}
.nav-liens a { position: relative; padding-block: 0.3rem; transition: color 0.15s ease; }
.nav-liens a:hover, .nav-liens a[aria-current="page"] { color: var(--blanc-chaud); }
.nav-liens a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--ambre);
}

.nav-actions { display: flex; align-items: center; gap: 0.75rem; }

.nav-bascule {
  display: inline-flex;
  background: transparent;
  border: 1px solid var(--suie-line);
  color: var(--blanc-chaud);
  padding: 0.55em 0.7em;
  border-radius: var(--rayon);
}

@media (min-width: 880px) {
  .nav-liens { display: flex; }
  .nav-bascule { display: none; }
}

@media (max-width: 520px) {
  .logo { font-size: 1.2rem; }
  .btn-tel-entete { padding: 0.7em 0.85em; }
  .btn-tel-entete .texte-tel { display: none; }
}

.menu-mobile {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem var(--gouttiere) 1.5rem;
  min-height: 100vh;
  background: rgba(22, 20, 15, 0.97);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  font-family: var(--f-corps);
  font-weight: 500;
  font-size: 1.02rem;
}
.menu-mobile.ouvert { display: flex; }
/* Le numéro a quitté l'en-tête mobile au profit du devis : le menu devient le
   seul endroit où on le cherche, en dehors du bouton flottant. */
.menu-mobile-tel {
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--suie-line);
  font-weight: 700;
  color: var(--ambre-vif);
}
.menu-mobile a {
  padding-block: 0.75rem;
  border-top: 1px solid var(--suie-line);
  color: rgba(243, 238, 228, 0.8);
}
.menu-mobile a[aria-current="page"] { color: var(--ambre); }

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

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--h-entete));
  padding-block: clamp(4.5rem, 3.5rem + 5vw, 8rem) clamp(3.5rem, 3rem + 3vw, 6rem);
}

.hero:not(.hero-compact) {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
}


.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-img-poster,
.hero-video {
  object-position: 58% 40%;
}
@media (max-width: 600px) {
  .hero-img-poster,
  .hero-video {
    object-position: 58% 28%;
  }
}

.hero-video {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero-video.video-prete { opacity: 1; }

@media (max-width: 879px) {
  .hero-video { display: none; }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgba(15, 13, 10, 0.72), rgba(15, 13, 10, 0.72)),
    radial-gradient(60% 55% at 50% 10%, rgba(var(--ambre-rgb), 0.18), transparent 70%),
    repeating-linear-gradient(180deg, rgba(243,238,228,0.035) 0px, rgba(243,238,228,0.035) 1px, transparent 1px, transparent 3px);
  pointer-events: none;
}
.hero-fond-leger::before {
  background:
    linear-gradient(rgba(15, 13, 10, 0.42), rgba(15, 13, 10, 0.42)),
    radial-gradient(60% 55% at 50% 10%, rgba(var(--ambre-rgb), 0.18), transparent 70%),
    repeating-linear-gradient(180deg, rgba(243,238,228,0.035) 0px, rgba(243,238,228,0.035) 1px, transparent 1px, transparent 3px);
}

.hero-contenu {
  position: relative;
  z-index: 2;
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--blanc-chaud);
  margin-top: 0.6rem;
}

.hero .ligne-2 { color: var(--ambre); }

.hero p.lead { margin-top: 1.6rem; margin-inline: auto; color: rgba(243, 238, 228, 0.72); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.4rem;
}

/* Le bandeau de logos est en position absolute au bas du hero (hors du flux) :
   sur mobile, la place manque entre les boutons et le bandeau, réserver de l'air. */
@media (max-width: 600px) {
  .hero:not(.hero-compact):has(.bandeau-marques) .hero-contenu {
    padding-bottom: 4.5rem;
  }
}

.hero-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.75rem;
  margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--suie-line);
}
.hero-specs dt {
  font-family: var(--f-corps);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ambre-sourd);
}
.fond-sombre .hero-specs dt { color: var(--ambre); }
.hero-specs dd {
  margin-top: 0.35rem;
  font-family: var(--f-corps);
  font-size: 0.95rem;
  color: var(--encre);
}
.fond-sombre .hero-specs dd { color: rgba(243, 238, 228, 0.82); }

/* ---------- Bandeau logos (hero) ---------- */
.bandeau-marques {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  overflow: hidden;
  padding-block: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  background: linear-gradient(rgba(15, 13, 10, 0), rgba(15, 13, 10, 0.6) 45%, rgba(15, 13, 10, 0.6));
  border-top: 1px solid var(--suie-line);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.bandeau-marques-piste {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 1.6rem + 1.6vw, 3.5rem);
  width: max-content;
  animation: defileMarques 32s linear infinite;
}

.logo-marque {
  flex: none;
  height: clamp(1.9rem, 1.6rem + 1.2vw, 2.6rem);
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.65;
}

@keyframes defileMarques {
  from { transform: translateX(0); }
  to { transform: translateX(var(--defile-decalage, -50%)); }
}

/* ---------- Hero compact (pages secondaires) ---------- */
.hero-compact { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.hero-compact h1 { font-size: var(--fs-h1); }

/* ---------- Fiche produit (texte + specs) ---------- */
.fiche-service {
  display: grid;
  gap: clamp(2rem, 1.6rem + 1.5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
.fiche-service .hero-specs { margin-top: 0; }
@media (min-width: 720px) {
  .fiche-service { grid-template-columns: 1.2fr 1fr; }
}

.photo-service {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border-radius: var(--rayon);
  margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem);
}

/* ---------- En-tête de section ---------- */
.entete-section {
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
  text-align: center;
}
.entete-section > .eyebrow { margin-bottom: 0.75rem; }
.entete-section h2 {
  margin: 0 auto;
  max-width: 22ch;
  font-size: clamp(2.2rem, 1.8rem + 2vw, 3.4rem);
}
.entete-section .lead {
  margin: 1.1rem auto 0;
}
.entete-section-ligne {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.entete-section-ligne h2 { margin: 0 auto; }

/* ---------- Bandeaux services (pleine largeur, alternés) ---------- */
.bandeau-service {
  --pad-bandeau: clamp(2.75rem, 2.2rem + 2.5vw, 4.5rem);
  position: relative;
  overflow: hidden;
  padding-top: var(--pad-bandeau);
}
.bandeau-service--sombre { background: var(--suie); }
.bandeau-service--violet { background: var(--violet-neon-sombre); }
@media (min-width: 760px) {
  .bandeau-service {
    min-height: 460px;
    display: flex;
    align-items: stretch;
    padding-top: 0;
  }
}

.bandeau-service-inner {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 4.5rem);
  align-items: end;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .bandeau-service-inner {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: stretch;
    width: 100%;
  }
  /* image à droite un service sur deux (alterne avec le fond noir/violet) */
  .bandeau-service--violet .bandeau-service-img { order: 2; }
  .bandeau-service--violet .bandeau-service-texte { order: 1; }
}

.bandeau-service-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bandeau-service-img img {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--rayon);
  border: 1.5px solid rgba(243, 238, 228, 0.45);
  box-shadow:
    0 0 55px 6px rgba(var(--ambre-rgb), 0.32),
    0 20px 44px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 1;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.bandeau-service:hover .bandeau-service-img img {
  transform: translateY(-3px);
  border-color: rgba(243, 238, 228, 0.7);
  box-shadow:
    0 0 72px 10px rgba(var(--ambre-rgb), 0.45),
    0 26px 56px rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.3);
}

.bandeau-service-texte {
  padding-block: 0 var(--pad-bandeau);
}
@media (min-width: 760px) {
  .bandeau-service-texte { align-self: center; padding-block: var(--pad-bandeau); }
}
.bandeau-service-texte h3 {
  color: var(--blanc-chaud);
  font-size: var(--fs-h2);
}
.bandeau-service-texte p {
  margin-top: 1rem;
  max-width: 52ch;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(243, 238, 228, 0.82);
}
.bandeau-service-texte .lien-carte {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--f-corps);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ambre);
}
.bandeau-service--violet .lien-carte { color: var(--blanc-chaud); }

/* ---------- Grille segments (pour qui) ---------- */
.grille-segments {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.carte-segment {
  flex: 0 1 340px;
  background: var(--papier);
  border: 1px solid var(--papier-line);
  border-radius: var(--rayon);
  overflow: hidden;
}
.fond-sombre .carte-segment { background: var(--suie-2); border-color: var(--suie-line); }
.carte-segment-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.carte-segment-corps { padding: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); }
.carte-segment h3 { font-size: var(--fs-h3); }
.fond-sombre .carte-segment h3 { color: var(--blanc-chaud); }
.carte-segment p { color: var(--zinc); font-size: 0.95rem; margin-top: 0.5rem; }
.fond-sombre .carte-segment p { color: rgba(243, 238, 228, 0.68); }

/* ---------- Bandeau matériaux / process ---------- */
.grille-process {
  display: grid;
  gap: clamp(1.25rem, 0.9rem + 1vw, 2rem);
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 900px) {
  .grille-process { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .grille-process { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .grille-process { grid-template-columns: 1fr; }
}
.etape {
  padding: 1.75rem 1.35rem;
  border: 1px solid var(--papier-line);
  border-radius: var(--rayon);
  background: var(--papier-2);
}
.fond-sombre .etape {
  border-color: var(--suie-line);
  background: rgba(243, 238, 228, 0.05);
}
.fond-violet .etape {
  border-color: rgba(243, 238, 228, 0.28);
  background: rgba(22, 20, 15, 0.16);
}
.etape-num {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--ambre-rgb), 0.35);
  font-family: var(--f-corps);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ambre-sourd);
}
.fond-sombre .etape-num { color: var(--ambre); border-color: rgba(var(--ambre-rgb), 0.5); }
.fond-violet .etape-num {
  color: var(--blanc-chaud);
  border-color: rgba(243, 238, 228, 0.35);
}
.etape h3 { text-transform: none; font-size: var(--fs-h3); margin-top: 0.75rem; }
.etape p { color: var(--zinc); margin-top: 0.5rem; font-size: 0.95rem; }
.fond-sombre .etape p { color: rgba(243, 238, 228, 0.7); }

/* ---------- Fond violet (variante section, accent plein) ---------- */
.fond-violet {
  background: var(--violet-clair-sourd);
  color: var(--blanc-chaud);
}
.fond-violet .etape {
  text-align: center;
}
.fond-violet .eyebrow {
  color: var(--jaune-neon);
}
.fond-violet .etape-num {
  color: var(--blanc-chaud);
}
.fond-violet .etape p {
  color: var(--blanc-chaud);
}

/* ---------- Réalisations / galerie ---------- */
/* Grille et non flex : en flex, la dernière rangée incomplète se centrait sous
   les autres et cassait l'alignement des colonnes. */
.grille-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gouttiere);
}
.vignette {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(155deg, var(--suie-2), var(--suie) 70%);
  border: 1px solid var(--suie-line);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.4rem;
}
.vignette-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(45% 45% at 30% 25%, rgba(var(--ambre-rgb), 0.22), transparent 70%);
}
/* Voile plus appuyé qu'avant : sur les photos claires (façade blanche, vitrine
   éclairée), la légende et le titre passaient sous la limite de lisibilité. */
.vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15,13,10,0) 28%, rgba(15,13,10,0.6) 60%, rgba(15,13,10,0.95) 100%);
}
/* Le voile ne suffit pas sur les photos très claires : une ombre portée douce
   garde la légende lisible quelle que soit la photo dessous. */
.vignette .etiquette,
.vignette h3,
.vignette .lieu { text-shadow: 0 1px 12px rgba(15, 13, 10, 0.9); }
.vignette .etiquette {
  position: relative;
  z-index: 2;
  font-family: var(--f-corps);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ambre);
}
.vignette h3 {
  position: relative;
  z-index: 2;
  color: var(--blanc-chaud);
  font-size: 1.5rem;
  margin-top: 0.4rem;
  text-transform: none;
}
.vignette .lieu {
  position: relative;
  z-index: 2;
  color: rgba(243,238,228,0.6);
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

.bandeau-realisations {
  overflow: hidden;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.bandeau-realisations-piste {
  display: flex;
  gap: var(--gouttiere);
  width: max-content;
  padding-inline: var(--gouttiere);
  animation: defileMarques 46s linear infinite;
}
.bandeau-realisations-piste .vignette { flex: none; width: 260px; }
.bandeau-realisations:hover .bandeau-realisations-piste { animation-play-state: paused; }

/* ---------- Chiffres / confiance ---------- */
.bande-confiance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--gouttiere);
}
.point-confiance {
  padding: 1.5rem 1.35rem;
  border: 1px solid var(--papier-line);
  border-top: 3px solid var(--violet-clair);
  border-radius: 0 0 var(--rayon) var(--rayon);
  background: var(--papier-2);
}
.fond-sombre .point-confiance,
.fond-violet .point-confiance {
  border-color: var(--suie-line);
  border-top: 3px solid var(--ambre);
  background: rgba(243, 238, 228, 0.05);
}
.point-confiance h3 {
  text-transform: none;
  font-size: var(--fs-h3);
}
.point-confiance p { color: var(--zinc); margin-top: 0.4rem; font-size: 0.92rem; }
.fond-sombre .point-confiance p { color: rgba(243, 238, 228, 0.7); }

/* ---------- FAQ ---------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 42rem;
  margin: 0 auto;
}
.faq details {
  border: 1px solid var(--papier-line);
  border-radius: var(--rayon);
  background: var(--papier-2);
}
.fond-sombre .faq details {
  border-color: var(--suie-line);
  background: rgba(243, 238, 228, 0.05);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  font-family: var(--f-corps);
  font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--violet-clair);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p {
  margin: 0;
  padding: 0 1.35rem 1.1rem;
  color: var(--zinc);
  font-size: 0.95rem;
}
.fond-sombre .faq details p { color: rgba(243, 238, 228, 0.75); }

/* ---------- CTA pleine largeur ---------- */
.cta-pleine {
  text-align: center;
}
.cta-pleine .conteneur { max-width: 46rem; }
.cta-pleine h2 { color: var(--blanc-chaud); }
.cta-pleine .hero-actions { justify-content: center; }

/* ---------- Pied de page ---------- */
.pied {
  background: var(--suie);
  color: var(--blanc-chaud);
  padding-top: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  padding-bottom: clamp(3rem, 2.5rem + 2vw, 4.5rem);
}
@media (max-width: 879px) {
  .pied { padding-bottom: calc(clamp(3rem, 2.5rem + 2vw, 4.5rem) + 6rem); }
}
.pied-grille {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.3fr 1fr 1fr;
}
@media (max-width: 700px) {
  .pied-grille { grid-template-columns: 1fr; }
}
.pied h4 {
  font-family: var(--f-corps);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ambre);
  margin-bottom: 1rem;
}
.pied-liens { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: rgba(243,238,228,0.75); }
.pied-liens a:hover { color: var(--ambre); }
/* ---------- Bandeau de consentement ----------
   Posé en bas d'écran plutôt qu'en plein milieu : le visiteur peut lire la
   page et décider sans être pris en otage. Le panneau détaillé, lui, est
   modal, parce qu'on y fait un choix explicite. */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  padding: 1rem;
  display: flex;
  justify-content: center;
}
.consent-bandeau,
.consent-panneau {
  width: 100%;
  max-width: 62rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--suie-2, #1c1a14);
  border: 1px solid var(--suie-line);
  border-radius: var(--rayon);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  color: var(--blanc-chaud);
  font-family: var(--f-corps);
}
.consent-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}
.consent-texte { flex: 1 1 22rem; }
.consent-titre { font-weight: 700; font-size: 1.02rem; }
.consent-texte p:last-child {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(243, 238, 228, 0.72);
}
.consent-texte a { text-decoration: underline; text-underline-offset: 2px; }
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}
.consent-btn { font-size: 0.92rem; padding: 0.7em 1.2em; }
.consent-lien {
  background: none;
  border: 0;
  padding: 0.5em 0.2em;
  color: rgba(243, 238, 228, 0.72);
  font-family: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.consent-lien:hover { color: var(--blanc-chaud); }

/* Panneau détaillé : fond assombri, la boîte est centrée et défilable. */
.consent:has(.consent-panneau) {
  inset: 0;
  align-items: center;
  background: rgba(12, 10, 8, 0.72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}
.consent-panneau { max-width: 40rem; }
.consent-intro {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: rgba(243, 238, 228, 0.72);
}
.consent-categorie {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--suie-line);
}
.consent-categorie-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
}
.consent-categorie-tete label { cursor: pointer; }
.consent-categorie-tete input { width: 20px; height: 20px; accent-color: var(--violet-neon); cursor: pointer; }
.consent-fige { font-size: 0.82rem; color: rgba(243, 238, 228, 0.5); font-weight: 500; }
.consent-categorie p {
  margin-top: 0.4rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(243, 238, 228, 0.66);
}
.consent-actions--panneau { margin-top: 1.75rem; justify-content: flex-end; }
.consent-ouvert { overflow: hidden; }

@media (max-width: 600px) {
  .consent-actions { width: 100%; }
  .consent-actions .consent-btn { flex: 1 1 auto; justify-content: center; }
  .consent-actions--panneau { justify-content: stretch; }
}

/* ---------- Page de confirmation ----------
   Pas de photo derrière : le visuel du hero est un néon rose et le titre
   accentué l'est aussi, ils se mangeaient l'un l'autre. Une page de
   confirmation n'a rien à vendre, elle doit rassurer et annoncer la suite,
   donc du texte lisible sur un fond franc et les trois prochaines étapes. */
.merci {
  /* La section remonte sous l'en-tête fixe et récupère la hauteur en padding,
     comme le fait .hero. Sans ça, le body réserve --h-entete (90px) alors que
     l'en-tête n'en occupe que 78 : la différence laissait voir une bande du
     fond clair du body juste sous le bandeau. */
  margin-top: calc(-1 * var(--h-entete));
  padding-top: calc(var(--h-entete) + var(--section-py));
  text-align: center;
}
.merci .conteneur { max-width: 56rem; }
.merci-coche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: rgba(var(--ambre-rgb), 0.16);
  border: 2px solid var(--violet-clair);
  /* Coche en blanc et non en violet : sur le fond violet translucide du
     médaillon, un trait violet sur violet ne se lisait pas. */
  color: var(--blanc-chaud);
  margin-bottom: 1.5rem;
}
.merci-coche svg { width: 34px; height: 34px; }
.merci h1 { font-size: clamp(2.2rem, 1.8rem + 2vw, 3.4rem); }
.merci .lead { margin: 1.1rem auto 0; max-width: 46ch; }

ol.merci-suite {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  margin-top: clamp(2.75rem, 2.2rem + 2vw, 4rem);
  text-align: left;
}
@media (min-width: 780px) {
  ol.merci-suite { grid-template-columns: repeat(3, 1fr); }
}
ol.merci-suite li {
  padding-top: 1.1rem;
  border-top: 2px solid var(--suie-line);
}
.merci-quand {
  display: block;
  font-family: var(--f-corps);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ambre-vif);
}
ol.merci-suite p {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: rgba(243, 238, 228, 0.72);
}

.merci-actions { margin-top: clamp(2.75rem, 2.2rem + 2vw, 4rem); }
.merci-actions-titre {
  font-size: 0.95rem;
  color: rgba(243, 238, 228, 0.6);
}
.merci-actions-boutons {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}
.merci-retour {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: 0.9rem;
  color: rgba(243, 238, 228, 0.6);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.merci-retour:hover { color: var(--blanc-chaud); }

/* ---------- Page 404 ----------
   Reprend la mise en page de la confirmation : même intention, dire où on est
   et proposer une suite plutôt que de laisser le visiteur dans le vide. */
.erreur-code {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(3rem, 2.4rem + 3vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--violet-clair);
}
ol.erreur-pistes a {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ambre-vif);
  text-decoration: underline;
  text-underline-offset: 3px;
}
ol.erreur-pistes a:hover { color: var(--blanc-chaud); }

/* ---------- Pages légales (mentions, confidentialité) ----------
   Colonne de lecture étroite : ce sont des pages qu'on parcourt à la recherche
   d'une information précise, pas des pages de vente. */
.page-legale { padding-top: calc(var(--section-py) + 1rem); }
.page-legale .conteneur { max-width: 68ch; }
.page-legale h1 { font-size: clamp(2rem, 1.7rem + 1.6vw, 3rem); }
.page-legale h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
}
.page-legale h3 {
  margin-top: 1.75rem;
  font-size: 1rem;
  text-transform: none;
  color: var(--encre);
}
.page-legale p { margin-top: 0.9rem; color: var(--zinc); }
.page-legale strong { color: var(--encre); }
.page-legale a { text-decoration: underline; text-underline-offset: 2px; }
.page-legale a:hover { color: var(--ambre-sourd); }
.legale-maj {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--zinc);
}
/* ul[class] du reset remet list-style:none, d'où le sélecteur plus précis. */
ul.legale-liste {
  margin-top: 0.9rem;
  padding-left: 1.1rem;
  list-style: disc;
  color: var(--zinc);
}
.legale-liste li { margin-top: 0.35rem; }

.pied-bas-liens a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pied-bas-liens a:hover { color: var(--ambre-vif); }
.pied-bas {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--suie-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  font-family: var(--f-corps);
  font-size: 0.82rem;
  color: rgba(243,238,228,0.5);
}

/* ---------- CTA flottant mobile ---------- */
.bouton-flottant {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%) translateY(0);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1.35rem;
  padding-bottom: calc(0.8rem + env(safe-area-inset-bottom));
  border-radius: 999px;
  background: var(--violet-neon);
  color: var(--blanc-chaud);
  font-family: var(--f-corps);
  box-shadow: 0 8px 26px rgba(var(--ambre-rgb), 0.55);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.bouton-flottant--cache {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(1.5rem);
}
@media (prefers-reduced-motion: reduce) {
  .bouton-flottant { transition: opacity 0.2s ease, visibility 0.2s ease; }
  .bouton-flottant--cache { transform: translateX(-50%) translateY(0); }
}
/* L'anneau était calé sur un bouton seul au milieu de l'écran : inset -7px et
   un pulse jusqu'à 1.4 débordaient largement, ce qui passait tant qu'il n'y
   avait rien à côté. Avec WhatsApp collé à 0.6rem, il faut qu'il reste dans
   l'emprise du bouton : il colle au bord et ne s'écarte plus que de 4px. */
.bouton-flottant-anneau {
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 2px solid var(--violet-clair);
  opacity: 0.55;
  animation: anneauPulseSerre 2.4s ease-out infinite;
  pointer-events: none;
}
.bouton-flottant svg { width: 20px; height: 20px; flex: none; }
.bouton-flottant-texte {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}
.bouton-flottant-texte strong { font-size: 0.95rem; font-weight: 700; }
.bouton-flottant-texte small {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.9;
}

@keyframes anneauPulse {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(1.4); opacity: 0; }
}
/* Amplitude calculée sur la largeur du bouton : la pastille fait ~250px, donc
   1.03 correspond à ~4px de chaque côté, à comparer aux 9.6px qui la séparent
   du bouton WhatsApp. */
@keyframes anneauPulseSerre {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(1.03); opacity: 0; }
}
/* Amplitude réduite par rapport à anneauPulse : le CTA est souvent collé à
   un autre bouton (gap 1rem), l'anneau ne doit pas déborder dessus. */
@keyframes pulseCTA {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(1.12); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-actions .btn-ambre::before { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bouton-flottant-anneau { animation: none; }
}

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

/* ---------- Actions flottantes : appel + WhatsApp (landing page) ----------
   Sur mobile, les deux entrées de contact sont côte à côte en bas de l'écran,
   le numéro à gauche et WhatsApp à droite. Sur desktop le bloc appel disparaît
   (le numéro est déjà dans l'en-tête) et WhatsApp seul se cale en bas à droite.
   C'est le conteneur qui porte le position:fixed : ailleurs sur le site,
   .bouton-flottant est seul dans la page et garde son propre positionnement. */
/* Barre pleine largeur qui centre la paire, plutôt que left:50% + translate :
   avec left:50%, la largeur disponible tombait à la moitié de l'écran et les
   deux boutons débordaient à droite. Le conteneur laisse passer les clics,
   seuls les boutons les captent. */
.actions-flottantes {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1.1rem;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding-inline: 1rem;
  padding-bottom: env(safe-area-inset-bottom);
  pointer-events: none;
}
.actions-flottantes > * { pointer-events: auto; }
.actions-flottantes .bouton-flottant {
  /* relative et non static : l'anneau pulsé est en position absolue et se
     cale sur le premier ancêtre positionné. En static, il prenait pour repère
     le conteneur pleine largeur et encerclait les deux boutons. */
  position: relative;
  /* left/bottom viennent du positionnement fixe d'origine : en relatif ils
     décaleraient le bouton de la moitié de l'écran. */
  left: auto;
  bottom: auto;
  transform: none;
  padding-bottom: 0.8rem;
  /* Sans ça, la pastille se comprime comme élément flex et le numéro casse
     sur trois lignes. */
  flex: none;
}
.actions-flottantes .bouton-flottant--cache { transform: translateY(1.5rem); }

.bouton-whatsapp {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.45);
  transition: transform 0.15s ease, background 0.15s ease;
}
.bouton-whatsapp:hover {
  transform: translateY(-2px);
  background: #1EBE5A;
}
.bouton-whatsapp svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}
/* Le mot "WhatsApp" n'est là que pour les lecteurs d'écran et les moteurs :
   à côté du logo, l'afficher n'apprend rien et alourdit la pastille. */
.bouton-whatsapp-legende {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 880px) {
  .actions-flottantes {
    left: auto;
    right: clamp(1rem, 0.6rem + 1vw, 2rem);
    bottom: clamp(1rem, 0.6rem + 1vw, 2rem);
    padding-inline: 0;
  }
  .bouton-whatsapp { width: 60px; height: 60px; }
  .bouton-whatsapp svg { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .bouton-whatsapp:hover { transform: none; }
}

/* ---------- Photo éditoriale ---------- */
.photo-bloc {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--rayon);
  border: 1px solid var(--papier-line);
}
.fond-sombre .photo-bloc { border-color: var(--suie-line); }

/* ---------- Formulaire de devis ---------- */
.badge-rappel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.5rem auto 0;
  padding: 0.6rem 1.3rem;
  border: 1px solid var(--violet-clair);
  border-radius: 999px;
  color: var(--ambre-vif);
  font-family: var(--f-corps);
  font-weight: 700;
  font-size: 0.88rem;
}
.badge-rappel svg { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }

.contact-rapide {
  margin-top: 1.25rem;
  color: rgba(243, 238, 228, 0.7);
  font-size: 0.92rem;
}
.contact-rapide a { color: var(--blanc-chaud); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.contact-rapide a:hover { color: var(--ambre); }

.form-devis {
  width: 100%;
  max-width: 42rem;
  margin: 2.5rem auto 0;
  padding: clamp(1.75rem, 1.4rem + 1.75vw, 3rem);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--suie-2);
  border: 1.5px solid var(--violet-clair);
  border-radius: var(--rayon);
  box-shadow:
    0 0 0 1px rgba(var(--ambre-rgb), 0.25) inset,
    0 0 30px 2px rgba(var(--ambre-rgb), 0.4),
    0 0 70px 12px rgba(var(--ambre-rgb), 0.22);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.form-devis:focus-within {
  border-color: var(--violet-clair-vif);
  box-shadow:
    0 0 0 1px rgba(var(--ambre-rgb), 0.35) inset,
    0 0 40px 4px rgba(var(--ambre-rgb), 0.55),
    0 0 90px 16px rgba(var(--ambre-rgb), 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .form-devis { transition: none; }
}
.form-ligne {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 560px) {
  .form-ligne { grid-template-columns: 1fr 1fr; }
}
.form-champ { display: flex; flex-direction: column; gap: 0.5rem; }
.form-champ label,
.form-radio-groupe legend {
  font-family: var(--f-corps);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--blanc-chaud);
}
.form-champ .optionnel {
  font-weight: 400;
  color: rgba(243, 238, 228, 0.55);
}
.form-champ input[type="text"],
.form-champ input[type="email"],
.form-champ input[type="tel"],
.form-champ textarea {
  width: 100%;
  padding: 0.85em 1em;
  border-radius: var(--rayon);
  border: 1px solid var(--suie-line);
  background: var(--suie);
  color: var(--blanc-chaud);
  font-family: var(--f-corps);
  font-size: 0.98rem;
  transition: border-color 0.15s ease;
}
.form-champ input::placeholder,
.form-champ textarea::placeholder { color: rgba(243, 238, 228, 0.4); }
.form-champ input:hover,
.form-champ textarea:hover { border-color: rgba(243, 238, 228, 0.3); }
.form-champ input:focus,
.form-champ textarea:focus { border-color: var(--violet-clair); }
.form-champ textarea { resize: vertical; min-height: 6.5rem; }

.form-radio-groupe { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.form-radios { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.form-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-corps);
  font-size: 0.95rem;
  color: rgba(243, 238, 228, 0.85);
  cursor: pointer;
}
.form-radio input { accent-color: var(--violet-clair); width: 1.1em; height: 1.1em; }

.form-submit { align-self: center; margin-top: 0.5rem; }

.form-statut {
  margin-top: 0.25rem;
  font-family: var(--f-corps);
  font-size: 0.92rem;
  text-align: center;
  min-height: 1.3em;
}
.form-statut[data-etat="succes"] { color: var(--ambre-vif); }
.form-statut[data-etat="erreur"] { color: #E8776F; }

/* ---------- Utilitaires ---------- */
.piege-robot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mt-0 { margin-top: 0; }
.centre { text-align: center; margin-inline: auto; }

/* ==========================================================================
   Landing pages (Google Ads) — mise en page spécifique. Réutilise les
   composants globaux (boutons, badge, formulaire, FAQ, bandeaux défilants) :
   uniquement le nécessaire en propre ici (grille du hero, atouts, avis).
   ========================================================================== */

.lp-hero-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
  /* Les deux colonnes n'ont pas la même hauteur naturelle (le formulaire est
     plus haut que le texte) : centrées sur un axe commun, elles se lisent
     comme une paire équilibrée plutôt que comme deux blocs qui pendent. */
  align-items: center;
  max-width: 68rem;
  text-align: left;
}
@media (max-width: 900px) {
  .lp-hero-grille { grid-template-columns: 1fr; text-align: center; }
}

/* Le bandeau de logos est en position absolute au bas du hero (hors du flux) :
   il ne réserve pas sa place et venait toucher le bas du formulaire. */
.hero:has(.lp-hero-grille) { padding-bottom: clamp(6rem, 5rem + 3vw, 8rem); }

/* ---------- Lisibilité du hero de landing ----------
   Le texte se pose sur le néon rose de la photo, et la ligne accentuée du H1
   est rose elle aussi : à l'œil nu elle se fondait dans le fond. Trois
   retouches légères plutôt qu'un voile noir uniforme qui tuerait la photo :
   1. photo légèrement désaturée et assombrie, le rose du néon cesse de
      concurrencer le rose de la typo ;
   2. voile directionnel, dense côté texte, léger côté formulaire où la photo
      garde sa présence ;
   3. ombre portée douce, qui décolle le texte quel que soit le pixel qui
      passe derrière. */
.hero:has(.lp-hero-grille) .hero-img { filter: saturate(0.78) brightness(0.88); }
.hero:has(.lp-hero-grille)::before {
  background:
    linear-gradient(100deg, rgba(15, 13, 10, 0.93) 0%, rgba(15, 13, 10, 0.86) 42%, rgba(15, 13, 10, 0.55) 72%, rgba(15, 13, 10, 0.38) 100%),
    radial-gradient(60% 55% at 50% 10%, rgba(var(--ambre-rgb), 0.14), transparent 70%),
    repeating-linear-gradient(180deg, rgba(243,238,228,0.035) 0px, rgba(243,238,228,0.035) 1px, transparent 1px, transparent 3px);
}
.lp-hero-texte { text-shadow: 0 2px 18px rgba(15, 13, 10, 0.8); }
@media (max-width: 900px) {
  /* En colonne le texte occupe toute la largeur : un dégradé latéral n'a plus
     de sens, on repasse à un voile uniforme, plus dense qu'avant. */
  .hero:has(.lp-hero-grille)::before {
    background:
      linear-gradient(rgba(15, 13, 10, 0.88), rgba(15, 13, 10, 0.88)),
      radial-gradient(60% 55% at 50% 10%, rgba(var(--ambre-rgb), 0.14), transparent 70%),
      repeating-linear-gradient(180deg, rgba(243,238,228,0.035) 0px, rgba(243,238,228,0.035) 1px, transparent 1px, transparent 3px);
  }
}

.lp-hero-texte .hero-actions { justify-content: flex-start; }
@media (max-width: 900px) {
  .lp-hero-texte .hero-actions { justify-content: center; }
}

.lp-autres-villes {
  margin-top: 1rem;
  color: rgba(243, 238, 228, 0.62);
  font-size: 0.95rem;
}
.lp-autres-villes strong { color: rgba(243, 238, 228, 0.88); font-weight: 600; }

.lp-atouts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin-top: 1.75rem;
}
.lp-atouts li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-corps);
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(243, 238, 228, 0.88);
}
@media (max-width: 900px) {
  .lp-atouts li { justify-content: center; }
}
.lp-atouts svg { flex: none; width: 1.3em; height: 1.3em; fill: var(--ambre-vif); }

.lp-hero-form .form-devis {
  margin: 0;
  max-width: none;
  padding: 1.5rem;
  gap: 0.8rem;
}
/* Bouton d'envoi sur toute la largeur de la carte : ses bords tombent
   exactement sur ceux des champs au-dessus, au lieu d'un bouton centré
   qui ne s'alignait sur rien. */
.lp-hero-form .form-submit {
  align-self: stretch;
  justify-content: center;
  margin-top: 0.25rem;
}
/* Badge et ligne téléphone déplacés à l'intérieur du cadre du formulaire :
   ils flottaient sous la carte, désalignés avec elle et avec le bouton
   d'envoi. Ils forment maintenant un seul bloc centré avec le bouton. */
.lp-hero-form .badge-rappel { margin: 0 auto; }
.lp-hero-form .contact-rapide { margin-top: 0; }
/* Le message de statut ne réserve sa place que lorsqu'il a du contenu :
   vide, il creusait un trou entre le bouton et le badge. */
.lp-hero-form .form-statut:empty { display: none; }

/* ---------- Avis clients (bandeau défilant) ---------- */
.bandeau-avis {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.bandeau-avis-piste {
  display: flex;
  gap: var(--gouttiere);
  width: max-content;
  padding-inline: var(--gouttiere);
  animation: defileMarques 40s linear infinite;
}
.bandeau-avis:hover .bandeau-avis-piste { animation-play-state: paused; }

.carte-avis {
  flex: none;
  width: 300px;
  padding: 1.5rem 1.35rem;
  border: 1px solid var(--suie-line);
  border-top: 3px solid var(--ambre);
  border-radius: 0 0 var(--rayon) var(--rayon);
  background: rgba(243, 238, 228, 0.05);
}
/* Étoiles / citation / auteur sur 3 rangées fixes : la citation absorbe la
   place restante, donc la ligne d'auteur tombe au même niveau sur toutes les
   cartes malgré des textes de longueurs différentes. */
.carte-avis {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.carte-avis .etoiles { color: var(--jaune-neon); letter-spacing: 0.12em; font-size: 0.95rem; }
.carte-avis p { margin-top: 0.75rem; color: rgba(243, 238, 228, 0.82); font-size: 0.92rem; line-height: 1.5; }
/* Deux lignes réservées : un nom + ville qui passe sur 2 lignes décalait
   sa carte par rapport aux voisines (bloc ancré en bas de carte). */
.carte-avis .avis-auteur {
  margin-top: 1rem;
  min-height: 3.1em;
  font-family: var(--f-corps);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blanc-chaud);
}
.carte-avis .avis-lieu { font-weight: 400; color: rgba(243, 238, 228, 0.55); }

/* ---------- Alignement strict des grilles de cartes (landing page) ----------
   Sans ça, chaque carte se met en page indépendamment : un titre sur 1 ligne
   contre 2 ailleurs décale tout le texte en dessous, et les cartes voisines ne
   se lisent plus comme des colonnes parallèles. Les rangées sont partagées
   entre toutes les cartes de la grille (subgrid), donc badge, titre et texte
   démarrent exactement au même niveau d'une carte à l'autre. Scopé aux
   sections de landing page : les mêmes classes servent ailleurs sur le site. */
@supports (grid-template-rows: subgrid) {
  .lp-section .bande-confiance { grid-template-rows: auto auto; }
  .lp-section .point-confiance {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    align-content: start;
    gap: 0.4rem;
  }
  .lp-section .point-confiance p { margin-top: 0; }
}

/* ---------- Argumentaire avec visuel carré (landing page) ----------
   Section sombre pleine largeur : la photo est prise de nuit, elle appartient
   à ce fond-là, pas à un cadre beige posé au milieu de la page. Le décor tient
   en trois gestes secs (halo violet très discret, étiquette d'offre inclinée,
   aplat violet décalé derrière la photo) plutôt qu'en effets lumineux.
   Ordre du DOM pensé pour le mobile : titre, offre, image, puis le texte.
   L'image arrive tôt sur petit écran, elle porte l'argument à elle seule, et
   passe en colonne de droite dès qu'il y a la place, sans rien réordonner. */
.section-argumentaire {
  position: relative;
  overflow: hidden;
  background: var(--suie);
}
.section-argumentaire::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--ambre-rgb), 0.18), transparent 62%);
  pointer-events: none;
}
.section-argumentaire > .conteneur { position: relative; }

.argumentaire {
  display: grid;
  gap: 1.35rem;
}
.argumentaire-titre {
  font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.5rem);
  max-width: 15ch;
  line-height: 1.05;
}
.argumentaire-titre span { color: var(--ambre-vif); }
.argumentaire-offre {
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 1.3rem;
  background: var(--violet-neon);
  color: var(--blanc-chaud);
  font-weight: 700;
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.18rem);
  transform: rotate(-1.2deg);
}
.argumentaire-offre-chiffre {
  font-size: 1.55em;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.argumentaire-media { margin: 0; }
/* Aplat violet décalé en bas à droite : la photo est posée dessus, ça lui
   donne une assise sans bordure ni ombre portée. */
.argumentaire-cadre {
  position: relative;
  display: block;
}
.argumentaire-cadre::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  background: var(--violet-neon);
}
.argumentaire-cadre img { position: relative; }
.argumentaire-etiquette {
  position: absolute;
  top: 1rem;
  left: -0.6rem;
  z-index: 2;
  padding: 0.4rem 0.9rem;
  background: var(--blanc-chaud);
  color: var(--suie);
  font-family: var(--f-corps);
  font-weight: 700;
  font-size: 0.82rem;
  transform: rotate(-2.5deg);
}
.argumentaire-media img {
  width: 100%;
  /* height: auto est indispensable ici : les attributs width/height du HTML
     posent une hauteur de 800px que aspect-ratio ne peut pas recalculer tant
     que la hauteur n'est pas auto. Sans ça l'image s'étire en portrait. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--rayon);
}
.argumentaire-media figcaption {
  margin-top: 1.5rem;
  font-size: 0.86rem;
  color: rgba(243, 238, 228, 0.55);
}
.argumentaire-corps p { color: var(--zinc); }
.argumentaire-corps p + p { margin-top: 1rem; }
.argumentaire-corps strong { color: var(--encre); }
.fond-sombre .argumentaire-corps p { color: rgba(243, 238, 228, 0.72); }
.fond-sombre .argumentaire-corps strong { color: var(--blanc-chaud); }
.argumentaire-corps .btn { margin-top: 1.5rem; }

@media (min-width: 900px) {
  .argumentaire {
    grid-template-columns: 1.15fr 0.85fr;
    column-gap: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
    row-gap: 1.25rem;
    align-items: start;
  }
  .argumentaire-titre,
  .argumentaire-offre,
  .argumentaire-corps { grid-column: 1; }
  .argumentaire-media {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }
}

/* Bandeau de logos sorti du hero : dans le hero il est en absolute au bas de
   l'image, ici c'est un bloc normal dans le flux. Le dégradé et la bordure du
   hero n'ont plus lieu d'être, le masque latéral si (il fait disparaître les
   logos sur les bords au lieu de les couper net). */
.bandeau-marques-libre {
  position: static;
  padding-block: 0;
  background: none;
  border-top: 0;
}
.entete-section--serre { margin-bottom: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
.entete-section--intercalaire {
  margin-top: clamp(3rem, 2.4rem + 2.4vw, 5rem);
}

/* ---------- Zones d'intervention (landing page) ----------
   Deux colonnes quand on connaît la ville (ses quartiers, ses voisines), une
   seule large quand on retombe sur le département. Les listes se déploient en
   colonnes automatiques : 10 quartiers ou 20 villes tiennent sans étirer la
   page. */
.zones {
  display: grid;
  gap: clamp(1.75rem, 1.4rem + 1.5vw, 3rem);
}
@media (min-width: 780px) {
  .zones:has(.zones-bloc + .zones-bloc) { grid-template-columns: 1fr 1fr; }
}
.zones-bloc h3 {
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--papier-line);
  font-size: 1.15rem;
  text-transform: none;
}
.fond-sombre .zones-bloc h3 { border-bottom-color: var(--suie-line); }
ul.zones-liste {
  margin-top: 1.1rem;
  columns: 2;
  column-gap: 1.5rem;
  font-size: 0.95rem;
  color: var(--zinc);
}
.zones-bloc--large ul.zones-liste { columns: 3; }
.fond-sombre ul.zones-liste { color: rgba(243, 238, 228, 0.72); }
ul.zones-liste li {
  break-inside: avoid;
  padding: 0.3rem 0 0.3rem 0.9rem;
  position: relative;
}
/* Puce dessinée plutôt que list-style : elle reste alignée sur la première
   ligne quand un nom de commune passe sur deux lignes. */
ul.zones-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 5px;
  height: 1px;
  background: var(--ambre);
}
.zones-note {
  margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  font-size: 0.92rem;
  color: var(--zinc);
}
.zones-note a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 480px) {
  ul.zones-liste,
  .zones-bloc--large ul.zones-liste { columns: 2; }
}

/* Relance après le bandeau d'avis : la preuve sociale ne sert à rien si on ne
   propose rien juste derrière. */
.avis-relance {
  margin-top: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
}
.avis-relance-note {
  font-size: 0.88rem;
  color: rgba(243, 238, 228, 0.6);
}

/* ---------- Méthode : titre à gauche, points à droite (landing page) ----------
   Remplace les quatre cartes beiges à liseré : elles empilaient un fond, une
   bordure et un accent pour dire quatre phrases courtes. Ici le titre tient sa
   propre colonne et chaque point n'est plus qu'un filet horizontal, qui prend
   la couleur d'accent au survol. Moins de matière, même information. */
.methode {
  display: grid;
  gap: clamp(2rem, 1.4rem + 2vw, 3.5rem);
}
.methode-intro h2 {
  font-size: clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
  max-width: 14ch;
  line-height: 1.08;
}
.methode-intro .lead { margin-top: 1.1rem; max-width: 42ch; }
.methode-liste {
  display: grid;
  column-gap: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
  row-gap: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}
.methode-item {
  padding-top: 1.15rem;
  border-top: 2px solid var(--papier-line);
  transition: border-color 0.2s ease;
}
.fond-sombre .methode-item { border-top-color: var(--suie-line); }
.methode-item:hover { border-top-color: var(--violet-neon); }
.methode-item h3 { font-size: 1.18rem; text-transform: none; }
.methode-item p {
  margin-top: 0.55rem;
  font-size: 0.95rem;
  color: var(--zinc);
}
.fond-sombre .methode-item p { color: rgba(243, 238, 228, 0.7); }
@media (min-width: 620px) {
  .methode-liste { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .methode {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }
}

/* ---------- Parcours en étapes (landing page) ----------
   Un flux, pas cinq cartes : les encadrés découpaient le parcours en blocs
   sans lien entre eux alors que c'est une suite d'étapes. Ici chaque étape
   se lit picto > repère de temps > titre > phrase, et le lien entre elles
   est porté par la flèche (large) ou le fil vertical (mobile).
   Mobile d'abord : picto à gauche, texte à droite. */
.flux {
  --flux-gap: clamp(1.6rem, 1rem + 1.6vw, 2.75rem);
  --flux-pile: 1.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--flux-pile);
}
.flux-etape {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 1.1rem;
  align-content: start;
}
.flux-icone {
  grid-row: 1 / span 3;
  color: var(--encre);
}
.flux-icone svg {
  display: block;
  width: 46px;
  height: 46px;
}
.flux-icone .ac { stroke: var(--ambre); }
.fond-sombre .flux-icone { color: var(--blanc-chaud); }
/* Fil vertical qui relie les pictos entre eux quand la liste est empilée. */
.flux-etape:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 54px;
  bottom: calc(var(--flux-pile) * -1);
  width: 1px;
  background: rgba(var(--ambre-rgb), 0.3);
}
.flux-num {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ambre-sourd);
}
.fond-sombre .flux-num { color: var(--ambre-vif); }
.flux-etape h3 {
  text-transform: none;
  font-size: var(--fs-h3);
  margin-top: 0.2rem;
}
.flux-etape > p:last-child {
  color: var(--zinc);
  font-size: 0.95rem;
  margin-top: 0.45rem;
}
.fond-sombre .flux-etape > p:last-child { color: rgba(243, 238, 228, 0.7); }

.flux-cta {
  margin-top: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.flux-cta-note {
  font-size: 0.88rem;
  color: var(--zinc);
}
.fond-sombre .flux-cta-note { color: rgba(243, 238, 228, 0.6); }

@media (min-width: 901px) {
  .flux {
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--flux-gap);
    row-gap: 0.45rem;
  }
  .flux-etape {
    display: block;
    grid-template-columns: none;
  }
  .flux-etape:not(:last-child)::after { content: none; }
  .flux-icone { grid-row: auto; margin-bottom: 1rem; }
  .flux-icone svg { width: 54px; height: 54px; }
  /* Flèche posée au milieu de la gouttière, à hauteur des pictos. */
  .flux-etape + .flux-etape::before {
    content: "";
    position: absolute;
    top: 27px;
    left: calc(var(--flux-gap) / -2);
    width: 20px;
    height: 14px;
    transform: translate(-50%, -50%);
    background: var(--ambre);
    -webkit-mask: var(--fleche) center / contain no-repeat;
    mask: var(--fleche) center / contain no-repeat;
  }
}

/* Les titres tiennent sur 1 ou 2 lignes selon l'étape : sans lignes partagées,
   chaque colonne se met en page dans son coin et les phrases ne démarrent
   plus au même niveau. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .flux { grid-template-rows: auto auto auto auto; }
    .flux-etape {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      align-content: start;
    }
    .flux-etape h3 { margin-top: 0; }
    .flux-etape > p:last-child { margin-top: 0; }
  }
}

/* ---------- Pied de page allégé (landing page) ---------- */
.lp-pied {
  background: var(--suie);
  padding-block: 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(243, 238, 228, 0.55);
}
.lp-pied-desc {
  max-width: 62ch;
  margin: 0 auto 1rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(243, 238, 228, 0.62);
}
.lp-pied .lp-pied-liens { margin-top: 0.5rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.lp-pied a { color: rgba(243, 238, 228, 0.75); text-decoration: underline; text-underline-offset: 2px; }
.lp-pied a.logo { color: var(--blanc-chaud); text-decoration: none; }
.lp-pied a:hover { color: var(--ambre-vif); }

/* ---------- En-tête landing page : grille, boutons à deux lignes, pastille ----------
   Avant, la légende "Appel & service gratuit" était posée en absolute sous le
   bouton : elle sortait de la hauteur de l'en-tête et la bordure du bandeau la
   coupait en deux. Elle vit maintenant dans le bouton. La barre est une grille
   3 colonnes (logo | nav | actions) et les actions sont une grille de colonnes
   étirées, donc les deux boutons font exactement la même hauteur quel que soit
   le nombre de lignes de texte. */
.entete-lp .barre-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  padding-block: 0.8rem;
}
.entete-lp .nav-liens { justify-self: center; }
.entete-lp .nav-actions {
  display: grid;
  grid-auto-flow: column;
  align-items: stretch;
  gap: 0.75rem;
}
.entete-lp .nav-actions > .btn { justify-content: center; }

/* Bouton menu : un carré calé sur la taille du logo, et trois barres qui se
   plient en croix à l'ouverture. L'ancien "☰" était un glyphe de police, donc
   ni dimensionnable proprement ni animable. Piloté par aria-expanded, que le
   script bascule déjà : aucun état à dupliquer en classe. */
.entete-lp .nav-bascule {
  width: 40px;
  height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.nav-bascule-barres,
.nav-bascule-barres::before,
.nav-bascule-barres::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, background-color 0.15s ease;
}
.nav-bascule-barres { position: relative; }
.nav-bascule-barres::before,
.nav-bascule-barres::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-bascule-barres::before { top: -6px; }
.nav-bascule-barres::after { top: 6px; }
.nav-bascule[aria-expanded="true"] .nav-bascule-barres { background: transparent; }
.nav-bascule[aria-expanded="true"] .nav-bascule-barres::before { transform: translateY(6px) rotate(45deg); }
.nav-bascule[aria-expanded="true"] .nav-bascule-barres::after { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-bascule-barres,
  .nav-bascule-barres::before,
  .nav-bascule-barres::after { transition: none; }
}
/* .btn-contour hérite sa couleur du contexte : dans l'en-tête sombre il faut
   la forcer, sinon le texte reste en encre sur fond suie. */
.entete-lp .btn-contour { color: var(--blanc-chaud); border-color: var(--violet-clair); }

.entete-lp .btn-tel-entete .texte-tel,
.lp-btn-devis-texte {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.entete-lp .btn-tel-entete .texte-tel strong,
.lp-btn-devis-texte strong { font-size: 0.95rem; font-weight: 700; }
.entete-lp .btn-tel-entete .texte-tel small,
.lp-btn-devis-texte small {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Le bouton téléphone est sur fond sombre : la légende peut être atténuée.
   Sur le bouton plein, blanc atténué sur violet retombe à 3.4:1, donc on
   garde le blanc franc et la hiérarchie se fait à la taille. */
.entete-lp .btn-tel-entete .texte-tel small { opacity: 0.75; }
.lp-btn-devis-texte { text-align: center; }

.lp-btn-devis-entete { white-space: nowrap; }

/* La pastille est en position absolue : tout bouton qui en porte une doit
   servir de repère, sinon elle se cale sur un ancêtre lointain. */
.btn:has(> .pastille-notif) { position: relative; }

/* Pastille de notification : la pastille de non-lu, pour que l'œil aille au
   devis avant le reste. Posée sur le coin, avec un liseré sombre pour qu'elle
   se détache du bouton violet. */
.pastille-notif {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--jaune-neon);
  box-shadow: 0 0 0 2px rgba(22, 20, 15, 0.6);
  animation: pastillePulse 2.6s ease-in-out infinite;
}
.bouton-flottant .pastille-notif { top: -2px; right: 2px; }

@keyframes pastillePulse {
  0% { box-shadow: 0 0 0 2px rgba(22, 20, 15, 0.6), 0 0 0 0 rgba(253, 230, 138, 0.55); }
  70%, 100% { box-shadow: 0 0 0 2px rgba(22, 20, 15, 0.6), 0 0 0 10px rgba(253, 230, 138, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pastille-notif { animation: none; }
}

/* Mobile : le bouton d'appel disparaît de l'en-tête au profit du devis. Le
   téléphone est déjà porté par le bouton flottant, en bas de l'écran et
   présent en permanence : le répéter en haut consommait la seule place
   disponible sans rien ajouter, alors que la demande de devis n'était nulle
   part. La légende passe à la trappe pour tenir sur une ligne. */
@media (max-width: 880px) {
  .entete-lp .nav-actions { justify-self: end; }
  .entete-lp .btn-tel-entete { display: none; }
  .entete-lp .lp-btn-devis-entete {
    display: inline-flex;
    padding: 0.7em 1.05em;
  }
  .entete-lp .lp-btn-devis-texte small { display: none; }
}