/* ==========================================================================
   Maçonnerie Bougie — styles.css
   Site par Liberio. HTML5 + CSS vanilla, mobile-first.

   PALETTE (5 couleurs, tirées du logo Logo.jpeg)
   ---------------------------------------------------------------------------
   Rôle          Token          Hex       Origine / usage
   Primaire      --c-primary    #8F5326   Cuivre du logo (truelle, « B », script).
                                          Boutons, liens, accents sur fond pâle.
                                          Blanc sur cuivre : 6.12:1 (AA texte normal).
                                          Cuivre sur pâle  : 5.34:1 (AA texte normal).
   Secondaire    --c-secondary  #2B2523   Charbon du logo (wordmark, pointe de truelle).
                                          Sections foncées, en-têtes, footer.
                                          Pâle sur charbon : 13.17:1.
   Accent        --c-accent     #D08B50   Cuivre clair (extrémité claire du dégradé du logo).
                                          Surlignements et liens sur fond charbon uniquement.
                                          Accent sur charbon : 5.38:1 (AA). Jamais en texte sur blanc.
   Neutre pâle   --c-pale       #F3EFE9   Mortier pâle (fond blanc cassé et joints du logo).
                                          Fonds de sections alternées.
   Neutre foncé  --c-ink        #1E1917   Texte courant. Sur pâle : 15.19:1, sur blanc : 17.4:1.

   Dérivés (pas des couleurs de marque, utilitaires) :
   --c-white #FFFFFF, --c-mortar #E4DED5 (bordures, joints), --c-muted #5C534E
   (texte secondaire, 6.9:1 sur pâle).

   SIGNATURE VISUELLE : le « joint de brique » (appareil à joints croisés, running bond).
   On le retrouve dans le filet sous les titres, la barre de progression du formulaire
   (les briques se remplissent), la texture des sections charbon et les tuiles de la galerie.
   ========================================================================== */

:root {
  /* Couleurs */
  --c-primary: #8F5326;
  --c-primary-dark: #74421D;
  --c-secondary: #2B2523;
  --c-secondary-deep: #1C1715;
  --c-accent: #D08B50;
  --c-pale: #F3EFE9;
  --c-ink: #1E1917;
  --c-white: #FFFFFF;
  --c-mortar: #E4DED5;
  --c-muted: #5C534E;
  --c-error: #A83226;

  /* Typographie */
  /* Typo alignée sur la référence Maçonnerie Élégance : Titillium Web (titres) + Raleway (texte) */
  --f-display: "Titillium Web", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --fs-0: 0.875rem;
  --fs-1: 1rem;
  --fs-2: 1.125rem;
  --fs-3: 1.375rem;
  --fs-4: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --fs-5: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);
  --lh-body: 1.6;
  --measure: 65ch;

  /* Espacements */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6.5rem;
  --section: clamp(4rem, 6vw + 1.5rem, 7.5rem);

  /* En-tête : grand à l'arrivée, rétréci une fois qu'on défile */
  --h-header: clamp(88px, 4vw + 72px, 108px);
  --h-header-min: 72px;
  --logo-header: clamp(64px, 3vw + 52px, 80px);
  --logo-header-min: 52px;

  /* Forme */
  --radius: 3px;
  --container: 1160px;
  --gutter: clamp(1.125rem, 4vw, 2.5rem);
  --shadow: 0 10px 30px -12px rgba(30, 25, 23, 0.25);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-med: 280ms;

  /* Motif joints de brique (charbon, faible opacité) */
  --brick-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70' viewBox='0 0 140 70'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.07' stroke-width='2'%3E%3Cpath d='M0 1h140M0 35h140M0 69h140'/%3E%3Cpath d='M70 1v34M0 35v34M140 35v34'/%3E%3C/g%3E%3C/svg%3E");
  --brick-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70' viewBox='0 0 140 70'%3E%3Cg fill='none' stroke='%238F5326' stroke-opacity='0.1' stroke-width='2'%3E%3Cpath d='M0 1h140M0 35h140M0 69h140'/%3E%3Cpath d='M70 1v34M0 35v34M140 35v34'/%3E%3C/g%3E%3C/svg%3E");
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-1);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-2);
  color: inherit;
  text-wrap: balance;
}
h1 { font-size: var(--fs-5); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-3); }
h4 { font-size: var(--fs-2); }

p { margin: 0 0 var(--sp-2); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--sp-2); padding-left: 1.25rem; }
li + li { margin-top: 0.35rem; }
/* Listes disposées en ligne : elles gèrent leur espacement avec gap, la marge de
   prose ci-dessus décalait tous les items sauf le premier vers le bas. */
:is(.nav, .zone-panel) li + li { margin-top: 0; }

a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--c-primary-dark); }

strong { font-weight: 600; }
small { font-size: var(--fs-0); }

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute; top: -100px; left: var(--sp-2);
  background: var(--c-secondary); color: var(--c-white);
  padding: 0.6rem 1rem; border-radius: var(--radius); z-index: 100;
}
.skip-link:focus { top: var(--sp-2); }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--section); }
.section--pale { background: var(--c-pale); }
.section--tight { padding-block: clamp(3rem, 4vw + 1rem, 5rem); }
.section--dark {
  background: var(--c-secondary);
  color: var(--c-pale);
}
.section--dark a { color: var(--c-accent); }
.section--dark a:hover { color: var(--c-white); }

/* Titre de section : titre + filet « joint de brique » */
.section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 46rem; }
.section-head h2 { margin-bottom: var(--sp-2); }
.section-head p { font-size: var(--fs-2); color: var(--c-muted); }
.section--dark .section-head p { color: var(--c-mortar); }

.joint {
  display: block; width: 84px; height: 14px; margin-bottom: var(--sp-3);
  color: var(--c-primary);
}
.section--dark .joint { color: var(--c-accent); }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 1.6rem; min-height: 3.25rem;
  font: 600 1rem/1 var(--f-body);
  border: 2px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) ease-out, color var(--t-fast) ease-out,
              border-color var(--t-fast) ease-out, transform var(--t-fast) ease-out;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.btn--primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: var(--c-white); }

.btn--light { background: var(--c-white); color: var(--c-secondary); border-color: var(--c-white); }
.btn--light:hover { background: var(--c-pale); border-color: var(--c-pale); color: var(--c-secondary); }

.btn--outline { background: transparent; color: var(--c-white); border-color: rgba(255, 255, 255, 0.75); }
.btn--outline:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--c-white); color: var(--c-white); }

.btn--ghost { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn--ghost:hover { background: var(--c-primary); color: var(--c-white); }

.btn--lg { padding: 1.1rem 2rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-secondary-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: box-shadow var(--t-med) ease-out;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.8); }

.header-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: var(--h-header);
  transition: min-height var(--t-med) var(--ease);
}
.site-header.is-scrolled .header-bar { min-height: var(--h-header-min); }

.brand {
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none; color: var(--c-pale);
}
.brand img {
  width: var(--logo-header); height: var(--logo-header);
  transition: width var(--t-med) var(--ease), height var(--t-med) var(--ease);
}
.site-header.is-scrolled .brand img { width: var(--logo-header-min); height: var(--logo-header-min); }
.brand-name {
  display: flex; flex-direction: column; line-height: 1;
  font-family: var(--f-display);
}
.brand-name .brand-top {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
.brand-name .brand-bottom {
  font-size: 1.35rem; font-weight: 700; font-style: italic; color: var(--c-accent);
  letter-spacing: -0.01em; margin-top: 0.15rem;
}

.nav { display: none; }
.nav ul { display: flex; gap: clamp(1rem, 2vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
.nav a {
  color: var(--c-pale); text-decoration: none; font-weight: 500; font-size: 0.95rem;
  padding: 0.5rem 0; position: relative; white-space: nowrap;
}
.nav a:hover { color: var(--c-white); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-phone { display: none; }
.header-cta { display: none; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; background: none;
  border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--radius); cursor: pointer;
  color: var(--c-pale);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  display: none; border-top: 1px solid rgba(255, 255, 255, 0.12); background: var(--c-secondary-deep);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: var(--sp-1) 0; }
.mobile-nav a {
  display: block; padding: 0.85rem 0; color: var(--c-pale); text-decoration: none;
  font-weight: 500; font-size: 1.0625rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav .btn { margin-block: var(--sp-2); }

@media (min-width: 901px) {
  .nav { display: block; }
  .nav-toggle, .mobile-nav { display: none !important; }
  .header-cta { display: inline-flex; white-space: nowrap; }
}
@media (min-width: 1140px) {
  .header-phone {
    display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
    color: var(--c-pale); text-decoration: none; font-weight: 600; margin-right: 0.5rem;
  }
  .header-phone svg { width: 18px; height: 18px; color: var(--c-accent); }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  min-height: calc(100svh - var(--h-header));
  display: flex; align-items: flex-end;
  color: var(--c-white);
  background: var(--c-secondary);
  padding-block: clamp(3rem, 8vw, 6rem);
  /* Mobile : dégagement pour le bouton Appeler collant en bas d'écran */
  padding-bottom: calc(clamp(3rem, 8vw, 6rem) + 3.5rem);
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(28, 23, 21, 0.55) 0%, rgba(28, 23, 21, 0.25) 35%, rgba(28, 23, 21, 0.82) 100%),
    linear-gradient(90deg, rgba(28, 23, 21, 0.55) 0%, rgba(28, 23, 21, 0) 70%);
}

.hero-inner { max-width: 52rem; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 500; font-size: 0.95rem; color: var(--c-pale);
  margin-bottom: var(--sp-3);
}
.hero-kicker svg { width: 18px; height: 18px; color: var(--c-accent); }
.hero h1 { color: var(--c-white); margin-bottom: var(--sp-3); max-width: 15ch; }
.hero h1 em { font-style: italic; color: var(--c-accent); }
.hero-lead { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3rem); color: var(--c-pale); max-width: 40rem; margin-bottom: var(--sp-4); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: var(--sp-4); }
.hero-actions .btn { flex: 1 1 15rem; }

.hero-note { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--fs-0); color: var(--c-mortar); }
.hero-note strong { color: var(--c-white); }
.hero-rating { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--c-white); text-decoration: none; font-weight: 500; }
.hero-rating .stars svg { width: 16px; height: 16px; }
.hero-rating:hover { color: var(--c-accent); }

@media (min-width: 901px) {
  .hero { min-height: min(88svh, 820px); align-items: center; padding-bottom: clamp(3rem, 8vw, 6rem); }
  .hero-actions .btn { flex: 0 0 auto; min-width: 15rem; }
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.services-intro {
  display: grid; gap: var(--sp-4); margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.services-intro figure { margin: 0; }
.services-intro img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.services-intro figcaption { font-size: var(--fs-0); color: var(--c-muted); margin-top: 0.5rem; }

.service-grid { display: grid; gap: var(--sp-3); }

.service {
  background: var(--c-white);
  border: 1px solid var(--c-mortar);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: var(--sp-2);
  position: relative;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.service-photo {
  aspect-ratio: 16 / 9; margin: calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) 0.25rem;
  background: var(--c-pale); border-bottom: 1px solid var(--c-mortar);
  display: block; padding: 0; overflow: hidden;
}
.service-photo span { font-size: 0.8rem; font-weight: 600; color: var(--c-primary); background: var(--c-white); padding: 0.25rem 0.55rem; border: 1px solid var(--c-mortar); border-radius: var(--radius); }
.service-photo picture, .service-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Diaporama dans la photo d'une carte de service (l'histoire du linteau). */
.service-photo--slides { position: relative; }
.service-photo--slides .slides { position: absolute; inset: 0; }
.service-photo--slides .slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 450ms var(--ease), visibility 450ms;
}
.service-photo--slides .slide[data-active] { opacity: 1; visibility: visible; }
.service-photo--slides .slide img { width: 100%; height: 100%; object-fit: cover; }
/* .service-photo span est une pastille pale : on reprend le badge sombre des tuiles. */
.service-photo--slides .slide-step {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-white); background: rgba(28, 23, 21, 0.72);
  border: none; border-radius: 999px; padding: 0.25rem 0.55rem;
}
.service-photo--slides:hover .slide-nav,
.service-photo--slides:focus-within .slide-nav { opacity: 1; }

.service h3 { margin: 0; }
.service h3 small { display: block; font-family: var(--f-body); font-weight: 500; font-size: 0.85rem; color: var(--c-muted); letter-spacing: 0.02em; margin-top: 0.3rem; }
.service p { color: var(--c-ink); }
.service .signs { margin: 0; padding: 0; list-style: none; font-size: 0.95rem; color: var(--c-muted); }
.service .signs li { padding-left: 1.1rem; position: relative; }
.service .signs li::before {
  content: ""; position: absolute; left: 0; top: 0.65em; width: 0.5rem; height: 3px;
  background: var(--c-primary);
}
.service .signs-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-primary); margin-bottom: 0.3rem; }
.service a { margin-top: auto; align-self: flex-start; font-weight: 600; text-decoration: none; }
.service a:hover { text-decoration: underline; }

@media (min-width: 641px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 901px) {
  .services-intro { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
}

/* Bloc « Travaux en hauteur » (sous les services) */
.capability {
  margin-top: var(--sp-3); display: grid; background: var(--c-white); border: 1px solid var(--c-mortar);
  border-radius: 14px; overflow: hidden;
}
.capability-text { padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
.capability-text h3 { font-size: var(--fs-4); margin: 0; }
.capability-text p { color: var(--c-ink); margin: 0; }
.capability-text a { font-weight: 600; text-decoration: none; align-self: flex-start; }
.capability-text a:hover { text-decoration: underline; }
.capability-photo { margin: 0; min-height: 240px; }
.capability-photo picture, .capability-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 901px) {
  .capability { grid-template-columns: 1fr 1.1fr; }
  .capability-photo { min-height: 360px; }
}

/* --------------------------------------------------------------------------
   Comment ça marche
   -------------------------------------------------------------------------- */
.process { display: grid; gap: var(--sp-5); align-items: center; }
.process-photo { margin: 0; }
.process-photo picture { position: relative; display: block; }
.process-photo img { width: 100%; border-radius: var(--radius); filter: sepia(0.22) saturate(0.95); }
.process-photo figcaption { font-size: var(--fs-0); color: var(--c-muted); margin-top: 1rem; }

.flow { display: grid; gap: 1.5rem; }
.flow-item h3 { margin-bottom: 0.35rem; }
.flow-item p { color: var(--c-muted); font-size: 1.0625rem; }
.flow-item--key {
  position: relative; background: var(--c-pale); padding: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-block: 0.5rem; border-radius: var(--radius);
}
.flow-item--key p { color: var(--c-ink); }
.steps-cta { margin-top: var(--sp-4); }

@media (min-width: 901px) {
  .process { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-7); }
  .process-photo { max-width: 420px; }
}

/* --------------------------------------------------------------------------
   Avis (carrousel)
   -------------------------------------------------------------------------- */
.reviews-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); align-items: end; }
.platforms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.platform {
  display: flex; flex-direction: column; gap: 0.15rem; min-width: 8.5rem;
  padding: 0.7rem 1rem; border: 1px solid var(--c-mortar); border-radius: 10px; background: var(--c-white);
  text-decoration: none; color: var(--c-ink); transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.platform:hover { border-color: var(--c-primary); box-shadow: var(--shadow); color: var(--c-ink); }
.platform-name { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.platform-score { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; line-height: 1; color: var(--c-secondary); }
.platform-count { font-size: 0.85rem; color: var(--c-muted); }
.platform--rated { border-color: var(--c-primary); }
.stars { display: inline-flex; gap: 2px; color: #E0A526; }
.stars svg { width: 16px; height: 16px; }

.carousel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0.75rem; }
.carousel-track { grid-column: 1 / -1; grid-row: 1; }
.carousel-btn[data-prev] { justify-self: end; }
.carousel-btn[data-next] { justify-self: start; }
.carousel-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-mortar); background: var(--c-white);
  color: var(--c-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--t-fast) ease-out, color var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
.carousel-btn svg { width: 20px; height: 20px; }
.carousel-btn:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.carousel-track {
  display: flex; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: 0.5rem 0.25rem 1rem;
}
.carousel-track::-webkit-scrollbar { display: none; }
.review {
  flex: 0 0 100%; scroll-snap-align: start; margin: 0;
  background: var(--c-white); border: 1px solid var(--c-mortar); border-radius: 14px;
  padding: 1.5rem; box-shadow: 0 12px 28px -18px rgba(30, 25, 23, 0.35);
  display: flex; flex-direction: column; min-height: 15rem;
}
.review-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.review-date { font-size: 0.8rem; color: var(--c-muted); }
.review blockquote { margin: 0.9rem 0 1rem; flex: 1; }
.review blockquote p { font-size: 1rem; line-height: 1.55; color: var(--c-ink); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.review figcaption { display: flex; align-items: center; gap: 0.75rem; }
.review figcaption strong { display: block; font-size: 0.95rem; color: var(--c-secondary); line-height: 1.2; }
.review figcaption small { display: block; font-size: 0.78rem; color: var(--c-muted); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-pale); color: var(--c-primary); font-family: var(--f-display); font-weight: 700; font-size: 0.9rem; border: 1px solid var(--c-mortar);
}
.carousel-foot { margin-top: 0.25rem; font-size: var(--fs-0); color: var(--c-muted); text-align: center; }

@media (min-width: 641px) { .review { flex-basis: calc((100% - var(--sp-2)) / 2); } }
@media (min-width: 901px) {
  .carousel { grid-template-columns: auto 1fr auto; }
  .carousel-track { grid-column: 2; grid-row: auto; }
  .carousel-btn[data-prev], .carousel-btn[data-next] { justify-self: center; }
  .reviews-head { grid-template-columns: auto 1fr; }
  .platforms { justify-self: end; }
  .review { flex-basis: calc((100% - 2 * var(--sp-2)) / 3); }
}

/* --------------------------------------------------------------------------
   Confiance
   -------------------------------------------------------------------------- */
.trust-layout { display: grid; gap: var(--sp-5); align-items: start; }
.trust-text h2 { color: var(--c-white); max-width: 18ch; }
.trust-lead { font-size: var(--fs-2); color: var(--c-accent); font-weight: 600; margin-bottom: var(--sp-3); }
.trust-points { list-style: none; padding: 0; margin: 0; max-width: 40rem; }
.trust-points li { position: relative; padding-left: 1.6rem; margin-bottom: 0.9rem; color: var(--c-pale); }
.trust-points li::before {
  content: ""; position: absolute; left: 0; top: 0.75em; width: 0.9rem; height: 3px;
  background: var(--c-accent);
}
.trust-side { display: grid; gap: var(--sp-3); }
.portrait { margin: 0; width: 100%; max-width: 340px; }
.portrait picture, .portrait img { width: 100%; border-radius: 14px; }
.portrait figcaption { margin-top: 0.6rem; font-size: 0.8rem; color: var(--c-mortar); }
.credentials {
  position: relative; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius);
  padding: 1.5rem; background: rgba(255, 255, 255, 0.03); max-width: 420px;
}
.cred-main { display: flex; flex-direction: column; margin-top: 1.25rem; margin-bottom: 1rem; }
.cred-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-mortar); }
.cred-code { font-family: var(--f-display); font-weight: 700; font-size: 1.75rem; color: var(--c-white); letter-spacing: 0.04em; line-height: 1.2; }
.cred-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.95rem; color: var(--c-pale); }
.cred-list li { margin: 0; position: relative; padding-left: 1.1rem; }
.cred-list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.55rem; height: 3px; background: var(--c-accent); }

/* Étiquette de placeholder : visible tant que Sébastien n'a pas confirmé. À retirer au go-live. */
.to-confirm {
  position: absolute; top: -0.7rem; left: 1rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--c-accent); color: var(--c-secondary-deep);
  padding: 0.2rem 0.5rem; border-radius: var(--radius); white-space: nowrap;
}

@media (min-width: 641px) {
  .trust-side { grid-template-columns: minmax(0, 260px) 1fr; align-items: start; }
  .credentials { margin-top: 0.75rem; }
}
@media (min-width: 901px) {
  .trust-layout { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-6); align-items: center; }
}

/* --------------------------------------------------------------------------
   Réalisations (grille de projets, chaque tuile peut défiler)
   -------------------------------------------------------------------------- */
.gallery { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); }
.tile { margin: 0; position: relative; aspect-ratio: 4 / 3; min-width: 0; border-radius: 10px; overflow: hidden; background: var(--c-mortar); }
.tile picture, .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.tile:hover img { transform: scale(1.04); }
.tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 0.9rem 0.75rem;
  font-size: 0.85rem; font-weight: 600; color: var(--c-white);
  background: linear-gradient(180deg, rgba(28, 23, 21, 0) 0%, rgba(28, 23, 21, 0.75) 100%);
}
/* Comparateur avant / après (curseur) */
.tile--compare { --pos: 50%; }
.compare { position: absolute; inset: 0; }
.compare picture, .compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none !important; }
.compare-after { clip-path: inset(0 0 0 var(--pos)); }
.compare-label {
  position: absolute; top: 0.75rem; z-index: 2; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-white); background: rgba(28, 23, 21, 0.65); padding: 0.25rem 0.55rem; border-radius: 999px; pointer-events: none;
}
.compare-label--before { left: 0.75rem; }
.compare-label--after { right: 0.75rem; }
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--c-white); z-index: 2; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.compare-handle svg {
  position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; padding: 8px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--c-white); color: var(--c-primary); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
}
.compare-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3;
  -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.compare-range:focus-visible + .compare-handle, .tile--compare:focus-within .compare-handle { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.tile--compare figcaption { z-index: 2; pointer-events: none; }
@media (max-width: 640px) {
  /* Mobile : la tuile de comparaison prend toute la largeur, la légende reste lisible. */
  .tile--compare { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .tile--compare figcaption, .tile--slides figcaption { padding-top: 2.5rem; }
  .tile--slides { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
}

.gallery-note { margin-top: var(--sp-3); font-size: var(--fs-0); color: var(--c-muted); }

/* Comparateur VERTICAL (avant en haut, après en bas).
   Utilisé quand les deux photos ne sont pas cadrées pareil à l'horizontale :
   ce sont les lignes horizontales du bâtiment (soffite, dalle de balcon) qui
   portent l'alignement, et elles se superposent bien. */
.tile--wide { aspect-ratio: 16 / 10; }

.compare--v { position: absolute; inset: 0; --pos: 50%; }
.compare--v picture, .compare--v img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: none !important;
}
.compare--v .compare-after { clip-path: inset(var(--pos) 0 0 0); }

.compare-label--top { top: 0.75rem; left: 0.75rem; }
.compare-label--bottom { top: auto; bottom: 2.6rem; left: 0.75rem; }

.compare-handle-v {
  position: absolute; left: 0; right: 0; top: var(--pos); z-index: 3;
  height: 2px; margin-top: -1px; background: var(--c-white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  cursor: ns-resize; touch-action: none;
}
/* Zone de préhension généreuse au doigt, invisible. */
.compare-handle-v::before {
  content: ''; position: absolute; left: 0; right: 0; top: -22px; height: 46px;
}
.compare-handle-v::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--c-white) center / 20px 20px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5326' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5-5 5 5M7 15l5 5 5-5'/%3E%3C/svg%3E");
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
}
.compare-range--v { pointer-events: none; }
.compare-range--v:focus-visible ~ .compare-handle-v {
  outline: 3px solid var(--c-accent); outline-offset: 4px;
}

/* Diaporama À L'INTÉRIEUR d'une tuile (projet à plusieurs photos).
   La photo finale est affichée en premier; on recule dans le chantier. */
.tile--slides .slides { position: absolute; inset: 0; }
.tile--slides .slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 450ms var(--ease), visibility 450ms;
}
.tile--slides .slide[data-active] { opacity: 1; visibility: visible; }
.tile--slides .slide img { width: 100%; height: 100%; object-fit: cover; }
.tile--slides:hover .slide[data-active] img { transform: scale(1.04); }

.slide-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: var(--c-secondary);
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6);
  opacity: 0; transition: opacity var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
.slide-nav svg { width: 19px; height: 19px; }
.slide-nav--prev { left: 8px; }
.slide-nav--next { right: 8px; }
.slide-nav:hover { background: var(--c-primary); color: var(--c-white); }
.tile--slides:hover .slide-nav,
.tile--slides:focus-within .slide-nav { opacity: 1; }
.slide-nav:focus-visible { opacity: 1; outline: 3px solid var(--c-accent); outline-offset: 2px; }
/* Sur écran tactile il n'y a pas de survol : les flèches restent visibles. */
@media (hover: none) { .slide-nav { opacity: 1; } }

/* En haut à droite : le coin gauche est pris par l'étiquette d'étape et
   le bas par la légende du projet. */
.slide-dots {
  position: absolute; top: 0.95rem; right: 0.75rem; z-index: 3;
  display: flex; gap: 0.35rem;
}
.slide-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: background var(--t-fast) ease, width var(--t-fast) ease;
}
.slide-dot[aria-selected="true"] { background: var(--c-white); width: 18px; border-radius: 999px; }
.slide-dot:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* Étiquette d'étape (Avant / Pendant / Après) dans le coin de la tuile. */
.slide-step {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 3;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-white); background: rgba(28, 23, 21, 0.65);
  padding: 0.25rem 0.55rem; border-radius: 999px; pointer-events: none;
}
.tile--slides figcaption { z-index: 2; pointer-events: none; }

@media (min-width: 641px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  /* Si la dernière tuile se retrouve SEULE sur sa rangée, elle prend toute la
     largeur plutôt que de laisser deux trous. Se déclenche tout seul selon le
     nombre de projets : ne rien faire de spécial en ajoutant une tuile. */
  .gallery > .tile:last-child:nth-child(3n + 1) { grid-column: 1 / -1; aspect-ratio: 21 / 8; }
}
@media (max-width: 640px) {
  .gallery > .tile:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Zone desservie (blocs cliquables)
   -------------------------------------------------------------------------- */
.zone-grid { display: grid; gap: var(--sp-2); }
.zone-card {
  position: relative; overflow: hidden; border-radius: 14px;
  background: linear-gradient(160deg, var(--c-white) 0%, var(--c-pale) 100%);
  border: 1px solid var(--c-mortar);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.zone-card::before {
  content: ""; position: absolute; top: -34px; right: -34px; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 83, 38, 0.16) 0%, rgba(143, 83, 38, 0) 70%);
  transition: transform var(--t-med) var(--ease);
}
.zone-card:hover { border-color: var(--c-primary); transform: translateY(-3px); box-shadow: var(--shadow); }
.zone-card:hover::before { transform: scale(1.6); }
.zone-card.is-open { border-color: var(--c-primary); box-shadow: var(--shadow); }
.zone-card--main { background: linear-gradient(160deg, #3A312D 0%, var(--c-secondary) 60%, #1F1A18 100%); border-color: var(--c-secondary); color: var(--c-pale); }
.zone-card--main::before { background: radial-gradient(circle, rgba(208, 139, 80, 0.35) 0%, rgba(208, 139, 80, 0) 70%); }
.zone-card--main:hover, .zone-card--main.is-open { border-color: var(--c-accent); }
.zone-toggle {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
  width: 100%; height: 100%; padding: 1.5rem; background: none; border: 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit; position: relative;
}
.zone-name { font-family: var(--f-display); font-weight: 700; font-size: 1.9rem; line-height: 1.05; color: var(--c-secondary); display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.zone-card--main .zone-name { color: var(--c-white); }
.zone-name .tag { font-family: var(--f-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); padding: 0.2rem 0.5rem; border: 1px solid rgba(208, 139, 80, 0.5); border-radius: 999px; }
.zone-sub { font-size: 0.95rem; color: var(--c-muted); }
.zone-card--main .zone-sub { color: var(--c-mortar); }
.zone-count { margin-top: auto; padding-top: 1.5rem; font-size: 0.8rem; color: var(--c-muted); }
.zone-card--main .zone-count { color: var(--c-mortar); }
.zone-more { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0.5rem; margin-top: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--c-primary); }
.zone-card--main .zone-more { color: var(--c-accent); }
.zone-chev {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid currentColor; transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.zone-chev svg { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease); }
.zone-card:hover .zone-chev, .zone-toggle[aria-expanded="true"] .zone-chev { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.zone-card--main:hover .zone-chev, .zone-card--main .zone-toggle[aria-expanded="true"] .zone-chev { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-secondary-deep); }
.zone-toggle[aria-expanded="true"] .zone-chev svg { transform: rotate(180deg); }
.zone-panel { padding: 1.5rem; background: var(--c-pale); border-radius: 14px; }
.zone-panel ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.zone-panel li {
  margin: 0; font-size: 0.95rem; font-weight: 500; padding: 0.5rem 1rem 0.5rem 0.85rem; border-radius: 999px;
  background: var(--c-white); border: 1px solid var(--c-mortar); color: var(--c-secondary);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.zone-panel li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); flex: none; }
.zone-panel--main { background: var(--c-secondary); }
.zone-panel--main li { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: var(--c-pale); }
.zone-panel--main li::before { background: var(--c-accent); }

/* Ordre : mobile = chaque panneau sous sa carte; dès 641px = les 4 cartes, puis le panneau ouvert pleine largeur. */
.zone-card:nth-child(1) { order: 1; } .zone-panel:nth-child(5) { order: 2; }
.zone-card:nth-child(2) { order: 3; } .zone-panel:nth-child(6) { order: 4; }
.zone-card:nth-child(3) { order: 5; } .zone-panel:nth-child(7) { order: 6; }
.zone-card:nth-child(4) { order: 7; } .zone-panel:nth-child(8) { order: 8; }

@media (min-width: 641px) {
  .zone-grid { grid-template-columns: repeat(3, 1fr); }
  .zone-grid > .zone-panel { grid-column: 1 / -1; }
  /* même spécificité que les règles nth-child ci-dessus, déclarées après : elles gagnent */
  .zone-grid > .zone-card { order: 1; }
  .zone-grid > .zone-panel { order: 2; }
}
@media (min-width: 1000px) {
  .zone-grid { grid-template-columns: repeat(3, 1fr); }
  .zone-toggle { min-height: 13rem; padding: 1.75rem; }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 52rem; }
.faq details { border-top: 1px solid var(--c-mortar); }
.faq details:last-child { border-bottom: 1px solid var(--c-mortar); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 1.15rem 0; font-family: var(--f-display); font-size: 1.2rem; font-weight: 600;
  color: var(--c-secondary);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; flex: none; color: var(--c-primary); transition: transform var(--t-med) var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .answer { padding: 0 0 1.25rem; color: var(--c-ink); }
.faq .answer p { max-width: 62ch; }

/* --------------------------------------------------------------------------
   Bande CTA (avant le formulaire)
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative; isolation: isolate; color: var(--c-white);
  padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--c-secondary);
}
.cta-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(28, 23, 21, 0.8); }
.cta-band h2 { color: var(--c-white); max-width: 20ch; }
.cta-band p { color: var(--c-pale); font-size: var(--fs-2); }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   Formulaire de soumission
   -------------------------------------------------------------------------- */
.quote-layout { display: grid; gap: var(--sp-5); }
.quote-layout > * { min-width: 0; }
.quote-aside h2 { margin-bottom: var(--sp-2); }
.quote-aside p { color: var(--c-muted); }
.quote-aside ul { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.quote-aside li { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.75rem; }
.quote-aside li svg { width: 20px; height: 20px; flex: none; color: var(--c-primary); margin-top: 0.15rem; }
.quote-aside .direct { margin-top: var(--sp-4); padding: var(--sp-3); background: var(--c-pale); border-radius: var(--radius); }
.quote-aside .direct-phone { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; text-decoration: none; display: inline-block; }
.quote-aside .direct-email { overflow-wrap: anywhere; }

@media (min-width: 901px) {
  .quote-layout { grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-7); align-items: start; }
  .quote-aside { position: sticky; top: 96px; }
}

.quote-form {
  background: var(--c-white); border: 1px solid var(--c-mortar); border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: var(--shadow);
}

/* Barre de progression : 4 briques qui se remplissent */
.progress { margin-bottom: var(--sp-4); }
.progress-bricks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; height: 10px; }
.progress-bricks span { background: var(--c-mortar); border-radius: 2px; transition: background-color var(--t-med) ease-out; }
.progress-bricks span.done { background: var(--c-primary); }
.progress-bricks span.current { background: var(--c-accent); }
.progress-label { display: flex; justify-content: space-between; font-size: var(--fs-0); color: var(--c-muted); margin-top: 0.6rem; }
.progress-label strong { color: var(--c-secondary); }

.form-step { display: none; }
.form-step.is-active { display: block; }
.form-step > h3 { margin-bottom: 0.35rem; }
.form-step > .step-help { color: var(--c-muted); margin-bottom: var(--sp-3); }

.field { margin-bottom: var(--sp-3); }
.field label, .field .legend {
  display: block; font-weight: 600; margin-bottom: 0.45rem; color: var(--c-secondary);
}
.field .hint { display: block; font-weight: 400; font-size: var(--fs-0); color: var(--c-muted); margin-top: 0.15rem; }
.field .hint--after { margin-top: 0.4rem; }
.req { color: var(--c-primary); }

.input, .field textarea, .field select {
  width: 100%; font: inherit; color: var(--c-ink);
  padding: 0.85rem 1rem; min-height: 3.25rem;
  border: 1px solid #B9B1A7; border-radius: var(--radius); background: var(--c-white);
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.field textarea { min-height: 8rem; resize: vertical; }
.input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(143, 83, 38, 0.2);
}
.field.has-error .input, .field.has-error textarea { border-color: var(--c-error); }
.error-msg { display: none; font-size: var(--fs-0); color: var(--c-error); margin-top: 0.4rem; }
.field.has-error .error-msg { display: block; }

.row { display: grid; gap: var(--sp-2); }
@media (min-width: 641px) { .row { grid-template-columns: 1fr 1fr; } .row .field { margin-bottom: var(--sp-3); } }

fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-3); min-width: 0; }
legend { padding: 0; }

/* Options radio en gros boutons tapables */
.choices { display: grid; gap: 0.6rem; }
.choices--2 { grid-template-columns: repeat(2, 1fr); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 3.5rem; padding: 0.85rem 1rem;
  border: 1px solid #B9B1A7; border-radius: var(--radius);
  background: var(--c-white); cursor: pointer; line-height: 1.3;
  transition: border-color var(--t-fast) ease-out, background-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.choice span::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid #B9B1A7; background: var(--c-white);
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.choice input[type="checkbox"] + span::before { border-radius: 3px; }
.choice input:checked + span { border-color: var(--c-primary); background: #FBF6F1; }
.choice input:checked + span::before { border-color: var(--c-primary); box-shadow: inset 0 0 0 4px var(--c-primary); }
.choice input:focus-visible + span { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.choice span { flex-wrap: wrap; }
.choice small { flex-basis: 100%; padding-left: calc(18px + 0.75rem); font-size: 0.8rem; color: var(--c-muted); margin-top: -0.35rem; }

@media (max-width: 480px) { .choices--2 { grid-template-columns: 1fr; } }
@media (min-width: 641px) { .choices--3 { grid-template-columns: repeat(3, 1fr); } }

/* Champ fichier */
.file-drop {
  border: 2px dashed #B9B1A7; border-radius: var(--radius); padding: var(--sp-3);
  text-align: center; background: var(--c-pale); position: relative;
  transition: border-color var(--t-fast) ease-out, background-color var(--t-fast) ease-out;
}
.file-drop:hover, .file-drop.is-over { border-color: var(--c-primary); background: #FBF6F1; }
.file-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-drop svg { width: 34px; height: 34px; color: var(--c-primary); margin: 0 auto 0.5rem; }
.file-drop strong { display: block; color: var(--c-secondary); }
.file-drop .hint { margin-top: 0.25rem; }
.file-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.file-list li { font-size: 0.85rem; background: var(--c-white); border: 1px solid var(--c-mortar); padding: 0.25rem 0.6rem; border-radius: var(--radius); }

.photo-nudge {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: #FBF6F1; border-left: 0; border: 1px solid #E8D5C3; border-radius: var(--radius);
  padding: 1rem; margin-bottom: var(--sp-3); font-size: 0.95rem;
}
.photo-nudge svg { width: 22px; height: 22px; flex: none; color: var(--c-primary); }
.photo-nudge p { margin: 0; }

.cond { display: none; }
.cond.is-visible { display: block; }

.form-nav { display: flex; gap: 0.75rem; justify-content: space-between; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-mortar); }
.form-nav .btn--ghost { flex: 0 0 auto; }
.form-nav .btn--primary { flex: 1 1 auto; }

.form-consent { font-size: var(--fs-0); color: var(--c-muted); margin-top: var(--sp-2); }

.form-status { display: none; margin-top: var(--sp-2); padding: 0.9rem 1rem; border-radius: var(--radius); font-size: 0.95rem; }
.form-status.is-error { display: block; background: #FBEDEA; color: var(--c-error); border: 1px solid #E9C1BA; }
.form-status.is-notice { display: block; background: #FBF3E8; color: var(--c-ink); border: 1px solid #E9D6BA; }

.turnstile-wrap { margin-top: var(--sp-2); }
.file-list-notice { color: var(--c-muted); font-size: var(--fs-0); list-style: none; margin-top: 0.35rem; }

.form-success { display: none; text-align: center; padding: var(--sp-4) var(--sp-2); }
.form-success.is-visible { display: block; }
.form-success svg { width: 56px; height: 56px; color: var(--c-primary); margin: 0 auto var(--sp-2); }
.form-success h3 { font-size: var(--fs-4); }
.form-success p { margin-inline: auto; color: var(--c-muted); }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-secondary-deep); color: var(--c-mortar);
  padding-block: var(--sp-6) var(--sp-4);
}
.footer-grid { display: grid; gap: var(--sp-4); }
.footer-brand { display: flex; align-items: center; gap: 0.85rem; color: var(--c-white); text-decoration: none; margin-bottom: var(--sp-2); }
.footer-brand img { width: 56px; height: 56px; }
.site-footer h4 { color: var(--c-white); font-family: var(--f-body); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 0.5rem; }
.site-footer a { color: var(--c-pale); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); text-decoration: underline; }
.site-footer .contact a { font-weight: 600; }
/* Le téléphone domine, le courriel suit d'un cran. */
.site-footer .contact-tel { font-size: var(--fs-3); line-height: 1.2; margin-bottom: 0.65rem; }
.site-footer .contact-mail { font-size: var(--fs-2); line-height: 1.3; margin-bottom: 0.7rem; overflow-wrap: break-word; }
.footer-bottom {
  margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem;
  font-size: var(--fs-0);
}
.footer-bottom a { color: var(--c-accent); }

@media (min-width: 641px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 901px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* --------------------------------------------------------------------------
   Bouton Appeler collant (mobile)
   -------------------------------------------------------------------------- */
.sticky-call {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--c-mortar);
  box-shadow: 0 -8px 24px -12px rgba(30, 25, 23, 0.35);
  /* minmax(0, 1fr) : deux moitiés strictement égales, sans débordement si un
     libellé est plus large que sa colonne. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem;
}
.sticky-call .btn { width: 100%; padding-inline: 0.75rem; }
body { padding-bottom: 5.25rem; }

@media (min-width: 901px) {
  .sticky-call { display: none; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Page secondaire (politique de confidentialité)
   -------------------------------------------------------------------------- */
.page-simple { padding-block: var(--sp-6); }
.page-simple .prose { max-width: 68ch; }
.page-simple h2 { font-size: var(--fs-3); margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   Motion (progressive : le contenu est visible par défaut)
   -------------------------------------------------------------------------- */
.reveal { opacity: 1; transform: none; }
html.js-motion .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 600ms var(--ease), transform 700ms var(--ease);
}
html.js-motion .reveal.is-in { opacity: 1; transform: 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;
  }
  html.js-motion .reveal { opacity: 1; transform: none; }
  .btn:hover, .service:hover { transform: none; }
}