/* ==========================================================================
   sections.css — Header, hero, zones, footer, barre d'appel mobile
   Chargé en dernier. Porte la mise en page des zones du § 12.
   ========================================================================== */

/* ==========================================================================
   11.6 — HEADER
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--border-w) solid transparent;
  transition: box-shadow var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}
.header.is-stuck {
  border-bottom-color: var(--border-subtle);
  box-shadow: var(--shadow-header);
}

/* Grille à trois colonnes plutôt qu'un space-between : avec ce dernier, le
   menu se centrait entre le logo et les actions, dont les largeurs diffèrent
   (94 px contre 172 px) — il tombait 39 px trop à gauche. Les deux colonnes
   latérales en 1fr garantissent un menu centré sur le conteneur, quelles que
   soient leurs largeurs. Les colonnes sont assignées explicitement pour que
   masquer le menu sous 1024 px ne décale pas les actions. */
.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-6);
  height: var(--header-h);
}
.header__inner > .logo {
  grid-column: 1;
  justify-self: start;
}
.header__inner > .nav {
  grid-column: 2;
}
.header__inner > .header__actions {
  grid-column: 3;
  justify-self: end;
}
@media (max-width: 767px) {
  .header__inner {
    height: var(--header-h-sm);
  }
}

.logo {
  display: inline-flex;
  align-items: center;
}
/* Le logo est un bloc image : sa hauteur est pilotée, la largeur suit le
   rapport du fichier (400x272). */
.logo__img {
  width: auto;
  height: 64px;
}
@media (max-width: 767px) {
  .logo__img {
    height: 48px;
  }
}

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  padding-block: var(--sp-2);
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover {
  color: var(--text-strong);
}
.nav__link:hover::after,
.nav__link[aria-current='true']::after {
  transform: scaleX(1);
}
.nav__link[aria-current='true'] {
  color: var(--text-strong);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
/* 3 px de respiration au-dessus et au-dessous. .btn impose une hauteur fixe :
   un padding-block seul n'aurait aucun effet, les 6 px sont donc ajoutés à la
   hauteur de la variante --sm (40 px). */
.header__cta {
  height: calc(40px + 2 * 3px);
}

/* Bascule mobile (sous 1024px) */
.header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  color: var(--text-strong);
}
.header__toggle svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.header__toggle .icon-close {
  display: none;
}
.header__toggle[aria-expanded='true'] .icon-open {
  display: none;
}
.header__toggle[aria-expanded='true'] .icon-close {
  display: block;
}

@media (max-width: 1023px) {
  .nav,
  .header__cta {
    display: none;
  }
  .header__toggle {
    display: inline-flex;
  }
}

/* Tiroir mobile */
.drawer {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: var(--z-drawer);
  padding: var(--sp-6) var(--container-pad) var(--sp-8);
  background-color: var(--bg-canvas);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transform: translateY(-12px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
@media (max-width: 767px) {
  .drawer {
    top: var(--header-h-sm);
  }
}
.drawer.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}
.drawer__nav {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.drawer__link {
  padding: var(--sp-3) var(--sp-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  border-radius: var(--r-sm);
}
.drawer__link:hover {
  background-color: var(--bg-muted);
  color: var(--text-strong);
}
@media (min-width: 1024px) {
  .drawer {
    display: none;
  }
}

/* ==========================================================================
   HERO (§ 12, zone 2)
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: var(--hero-min-h);
  padding-block: var(--hero-py);
  background-color: var(--bg-dark);
}

/* Photo plein cadre : sort du flux et occupe toute la bannière.
   z-index négatif = passe sous le contenu mais reste au-dessus du fond de
   .hero (fond sombre visible tant que l'image n'est pas chargée). */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cadrage sur la droite : garde le peintre et le nuancier dans le champ,
     et dégage le mur bleu à gauche pour y poser le texte. */
  object-position: 74% center;
}
/* Voile de lisibilité posé par-dessus la photo */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim-hero);
}

.hero__inner {
  position: relative;
}
.hero__content {
  max-width: var(--hero-content-max);
}

.hero__title {
  margin-bottom: var(--sp-5);
  color: var(--white);
  text-wrap: balance;
}
.hero__title .text-accent {
  color: var(--warm-300);
}
.hero__lead {
  max-width: 46ch;
  margin-bottom: var(--sp-8);
  color: var(--text-on-dark);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
}
.hero__trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-on-dark);
}
.hero__trust-item svg {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--warm-300);
  flex-shrink: 0;
}

/* Preuve chiffrée, en pied de colonne, séparée par un filet discret */
.hero__stat {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--border-w) solid var(--border-on-dark);
}
.hero__stat-num {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: 1.1;
}
.hero__stat-label {
  font-size: var(--fs-2xs);
  color: var(--text-on-dark);
}

/* --- Laptop : le texte occupe une part plus large de la bannière, on
       décale le cadrage vers le mur et on renforce le voile ---------------- */
@media (max-width: 1200px) {
  .hero__media img {
    object-position: 62% center;
  }
  .hero__media::after {
    background: var(--scrim-hero-md);
  }
}

/* --- Tablette : le texte couvre l'essentiel de la largeur → le dégradé
       horizontal ne protège plus le bord droit, voile uniforme ------------- */
@media (max-width: 900px) {
  .hero__media::after {
    background: var(--scrim-hero-sm);
  }
}

/* --- Mobile : recadrage serré sur le mur, actions pleine largeur --------- */
@media (max-width: 640px) {
  .hero {
    min-height: auto;
  }
  .hero__media img {
    object-position: 58% center;
  }
  .hero__actions .btn {
    width: 100%;
  }
  .hero__trust {
    flex-direction: column;
    gap: var(--sp-3);
  }
}

/* ==========================================================================
   EXPLORATEUR DE SERVICES (§ 12, zone 2 bis)

   Deux états, dans cet ordre :
   1. état brut (HTML seul, sans JS)  — les 4 fiches sont empilées et visibles.
      C'est ce que voit un crawler qui n'exécute pas le script, et c'est aussi
      le rendu de secours si le JS casse.
   2. état enrichi (.is-enhanced, posé par main.js) — deux colonnes, une seule
      fiche affichée à la fois.
   ========================================================================== */

/* --- 1. État brut --------------------------------------------------------- */
.services__list {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
  list-style: none;
}
.services__tab {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--r-xl);
  background-color: var(--bg-subtle);
  color: var(--text-strong);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
}
.services__tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  background-color: var(--accent-50);
  color: var(--accent-600);
  transition: background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.services__tab-icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}
.services__tab-label {
  flex: 1;
}
.services__tab-chevron {
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
  color: var(--text-faint);
  transition: transform var(--dur-base) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.services__tab:hover {
  border-color: var(--accent-200);
  background-color: var(--accent-50);
}
.services__tab:hover .services__tab-chevron {
  transform: translateX(3px);
  color: var(--accent-600);
}

.services__panel {
  padding: var(--sp-10);
  margin-bottom: var(--sp-6);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-2xl);
  background-color: var(--bg-canvas);
}
.services__panel-head {
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: var(--border-w) solid var(--border-subtle);
}
.services__panel-title {
  margin-bottom: var(--sp-4);
}
.services__panel-text {
  max-width: 62ch;
  color: var(--text-body);
}
/* Visuel à gauche, détails à droite (l'accroche court sur toute la largeur).
   Permutation faite dans le HTML et non par un `order` CSS : l'ordre de
   lecture au clavier et aux lecteurs d'écran suit ainsi l'ordre visuel. */
.services__panel-grid {
  display: grid;
  gap: var(--gutter);
  align-items: start;
  grid-template-columns: 0.75fr 1fr;
}
/* Une seule colonne : à côté du visuel, la place restante ne permet pas deux
   colonnes sans casser chaque intitulé sur trois lignes. */
.services__features {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  list-style: none;
}
.services__features li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-body);
}
/* Puce dessinée en CSS : pas de <svg> répété 24 fois dans la source */
.services__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: var(--sp-2);
  height: var(--sp-2);
  border-radius: var(--r-circle);
  background-color: var(--accent-300);
}
/* Un cran au-dessus du lien fléché courant (13 → 15 px) : c'est l'action
   principale de la fiche, elle ne doit pas passer pour une note de bas de bloc. */
.services__panel-cta {
  font-size: var(--fs-sm);
}
.services__panel-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-xl);
  background-color: var(--bg-muted);
}

/* --- 2. État enrichi (JS actif) ------------------------------------------ */
.services.is-enhanced {
  display: grid;
  /* Colonnes nettement plus écartées que la gouttière courante : la liste et
     le panneau sont deux blocs distincts, pas deux colonnes d'un même tableau.
     La gouttière ne sert plus qu'à l'empilement sous 1000 px. */
  row-gap: var(--gutter);
  column-gap: var(--sp-12);
  align-items: start;
  grid-template-columns: 0.8fr 1.2fr;
}
.services.is-enhanced .services__list {
  margin-bottom: 0;
}
.services.is-enhanced .services__tab {
  color: var(--text-body);
  cursor: pointer;
}
.services.is-enhanced .services__tab-icon {
  background-color: var(--bg-muted);
  color: var(--text-muted);
}
.services.is-enhanced .services__tab:hover {
  background-color: var(--accent-50);
  border-color: var(--accent-100);
  color: var(--text-strong);
}
/* Onglet sélectionné : c'est [aria-selected] qui pilote le style, pas une
   classe — l'état visuel ne peut donc pas diverger de l'état annoncé aux
   technologies d'assistance. La ligne se détache en carte blanche surélevée
   et glisse vers le panneau qu'elle commande. */
.services.is-enhanced .services__tab[aria-selected='true'] {
  background-color: var(--bg-canvas);
  border-color: var(--accent-200);
  color: var(--text-strong);
  box-shadow: var(--shadow-md);
  transform: translateX(var(--sp-2));
}
.services.is-enhanced .services__tab[aria-selected='true'] .services__tab-icon {
  background-color: var(--accent-500);
  color: var(--white);
}
.services.is-enhanced
  .services__tab[aria-selected='true']
  .services__tab-chevron {
  color: var(--accent-500);
  transform: translateX(3px);
}

.services.is-enhanced .services__panels {
  position: relative;
}
.services.is-enhanced .services__panel {
  margin-bottom: 0;
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
/* Le panneau est en display:grid ; sans cette règle explicite l'attribut
   [hidden] serait écrasé par la cascade et le contenu resterait affiché. */
.services.is-enhanced .services__panel[hidden] {
  display: none;
}
.services.is-enhanced .services__panel:focus-visible {
  outline: var(--border-w-accent) solid var(--accent-500);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .services.is-enhanced .services__panel:not([hidden]) {
    animation: services-panel-in var(--dur-slow) var(--ease-out) both;
  }
}
@keyframes services-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Responsive ----------------------------------------------------------- */
/* Sous 900 px, main.js n'active plus les onglets : les quatre fiches sont
   déployées, chacune sous son propre titre. La liste d'ancres ferait alors
   doublon avec ces titres, on la retire. */
@media (max-width: 900px) {
  .services__list {
    display: none;
  }
}
@media (max-width: 820px) {
  .services__panel {
    padding: var(--sp-8);
  }
  .services__panel-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .services__tab {
    gap: var(--sp-3);
    padding: var(--sp-4);
    font-size: var(--fs-sm);
  }
}

/* ==========================================================================
   ZONE DEVIS (§ 12, zone 3)
   ========================================================================== */
/* La carte formulaire déborde sur le pied de page. Le débord se joue en trois
   points solidaires : la section perd sa marge basse, la colonne du formulaire
   prend une marge négative de la même valeur, et le pied de page se décale
   d'autant pour que son contenu ne passe pas dessous. */
.quote {
  padding-bottom: 0;
}
.quote__grid {
  display: grid;
  gap: var(--gutter);
  align-items: start;
  grid-template-columns: 1fr 1fr;
}
.quote__form-col {
  /* position: relative suffit à passer au-dessus du pied de page : un élément
     positionné est peint après les blocs qui ne le sont pas, même situés plus
     loin dans le document. */
  position: relative;
  margin-bottom: calc(var(--quote-overlap) * -1);
}
.quote__args-col {
  padding-bottom: var(--section-py);
}

.quote__intro {
  margin-bottom: var(--sp-8);
}

/* Coordonnées : pastille d'icône arrondie, comme partout ailleurs sur le site */
.quote__contacts {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
  list-style: none;
}
.quote__contact {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.quote__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  background-color: var(--warm-50);
  color: var(--warm-700);
}
.quote__contact-icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}
.quote__contact-body {
  display: grid;
  gap: var(--sp-1);
}
.quote__contact-label {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.quote__contact a,
.quote__contact-value {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.quote__contact a:hover {
  color: var(--accent-600);
}

/* Note affichée sous les coordonnées, alignée sur le fer des libellés plutôt
   que sur la pastille : elle se lit comme un prolongement du bloc contact. */
.quote__rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: var(--border-w) solid var(--border-default);
}
.quote__rating-num {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: 1;
}
.quote__rating-label {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.quote__intro .eyebrow {
  margin-bottom: var(--sp-3);
}
.quote__intro .lead {
  margin-top: var(--sp-4);
}
.quote__features {
  display: grid;
  gap: var(--sp-4);
}
/* Empilé, le débord n'a plus de sens : la carte ne chevauche plus une
   frontière, elle se contenterait de mordre sur le pied de page. */
@media (max-width: 900px) {
  .quote {
    padding-bottom: var(--section-py);
  }
  .quote__grid {
    grid-template-columns: 1fr;
  }
  .quote__form-col {
    order: -1;
    margin-bottom: 0;
  }
  .quote__args-col {
    padding-bottom: 0;
  }
  /* Le débord de la carte étant neutralisé, le pied de page n'a plus rien à
     dégager en haut : sa marge se règle sur le seul confort de lecture. */
  .footer {
    padding-top: var(--sp-12);
  }
}

.quote__form-head {
  margin-bottom: var(--sp-6);
}
.quote__form-head .card__title {
  margin-bottom: var(--sp-2);
}
.quote__form-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ==========================================================================
   À PROPOS (§ 12) — zone dédiée sur ce site
   ========================================================================== */

/* Filet d'accent au-dessus du sur-titre, centré sur le chapô */
.section-head--marked .eyebrow::before {
  content: '';
  display: block;
  width: var(--sp-8);
  height: var(--border-w-accent);
  margin: 0 auto var(--sp-3);
  border-radius: var(--r-pill);
  /* Même valeur que le sur-titre qu'il surmonte : le filet et le texte se
     lisent comme un seul bloc, pas comme deux tons d'ambre. */
  background-color: var(--warm-300);
}

.about__grid {
  display: grid;
  gap: var(--gutter);
  align-items: center;
  grid-template-columns: 1fr 1fr;
}

/* --- Colonne gauche : l'orbite ------------------------------------------- */
.about__orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--orbit-size);
  height: var(--orbit-size);
  margin-inline: auto;
}
/* Anneaux pointillés. Purement décoratifs : ils sortent du flux et ne sont
   pas exposés aux lecteurs d'écran. */
.about__orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--orbit-ring);
  height: var(--orbit-ring);
  transform: translate(-50%, -50%);
  border: var(--border-w) dashed var(--border-strong);
  border-radius: var(--r-circle);
}
.about__orbit-ring--outer {
  width: var(--orbit-size);
  height: var(--orbit-size);
  border-color: var(--border-default);
}
.about__orbit-photo {
  position: relative;
  width: var(--orbit-photo);
  height: var(--orbit-photo);
}
.about__orbit-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Recentre le cadrage sur l'artisan : la photo est en paysage, un recadrage
     circulaire au centre le couperait. */
  object-position: 58% center;
  border-radius: var(--r-circle);
  box-shadow: var(--shadow-lg);
  background-color: var(--bg-muted);
}

/* Hors flux, sinon la liste occupe une seconde rangée de la grille et pousse
   la photo vers le haut : les pastilles ne tournent alors plus autour d'elle. */
.about__orbit-icons {
  position: absolute;
  inset: 0;
  list-style: none;
}
/* Chaque pastille est posée au centre puis poussée sur l'anneau : on tourne
   du bon angle, on translate d'un rayon, on annule la rotation pour que
   l'icône reste droite. L'angle est porté par les règles :nth-child
   ci-dessous — aucune valeur en dur dans le HTML. */
.about__orbit-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--orbit-icon);
  height: var(--orbit-icon);
  margin: calc(var(--orbit-icon) / -2);
  border-radius: var(--r-circle);
  background-color: var(--accent-50);
  border: var(--border-w) solid var(--accent-100);
  box-shadow: var(--shadow-md);
  color: var(--accent-600);
  transform: rotate(var(--a))
    translateY(calc(var(--orbit-ring) / -2))
    rotate(calc(var(--a) * -1));
  transition: background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    transform var(--dur-slow) var(--ease-bounce);
}
/* Le saut est un translateY ajouté EN FIN de chaîne. Les deux rotations de la
   chaîne de positionnement s'annulent, sa partie linéaire vaut donc l'identité :
   ce dernier déplacement se lit tel quel dans le repère de la page, soit un
   saut vertical franc — et non un décalage le long du rayon. */
.about__orbit-icon:hover {
  background-color: var(--accent-500);
  border-color: var(--accent-500);
  color: var(--white);
  box-shadow: var(--shadow-accent-lg);
  transform: rotate(var(--a))
    translateY(calc(var(--orbit-ring) / -2))
    rotate(calc(var(--a) * -1))
    translateY(var(--lift-icon));
}
.about__orbit-icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
/* Cinq pastilles régulièrement réparties (360° / 5 = 72°), la première au
   sommet de l'anneau. */
.about__orbit-icon:nth-child(1) {
  --a: 0deg;
}
.about__orbit-icon:nth-child(2) {
  --a: 72deg;
}
.about__orbit-icon:nth-child(3) {
  --a: 144deg;
}
.about__orbit-icon:nth-child(4) {
  --a: 216deg;
}
.about__orbit-icon:nth-child(5) {
  --a: 288deg;
}

/* --- Colonne droite ------------------------------------------------------ */
.about__subtitle {
  position: relative;
  margin-bottom: var(--sp-4);
  padding-top: var(--sp-4);
  font-size: var(--fs-h2);
}
.about__subtitle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--sp-8);
  height: var(--border-w-accent);
  border-radius: var(--r-pill);
  background-color: var(--warm-300);
}
.about__text {
  color: var(--text-body);
  margin-bottom: var(--sp-5);
}
/* Chiffres clés : mesure à gauche, ce qu'elle recouvre à droite, séparés par
   un filet — la lecture se fait ligne par ligne, pas en damier. */
.about__stats {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-8);
  list-style: none;
  border-top: var(--border-w) solid var(--border-default);
}
.about__stat {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  grid-template-columns: minmax(0, var(--about-stat-col)) 1fr;
  padding-block: var(--sp-5);
  border-bottom: var(--border-w) solid var(--border-default);
}
.about__stat-figure {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  /* Le nombre et son unité tiennent sur une ligne : sans ça « / chantiers »
     passe sous le chiffre dès que la colonne se resserre. */
  white-space: nowrap;
}
.about__stat-num {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: 1.1;
  white-space: nowrap;
}
.about__stat-unit {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.about__stat-text {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }
  .about__orbit {
    order: -1;
  }
}
@media (max-width: 600px) {
  /* L'orbite est à son plancher (320 px) : on rétrécit les pastilles pour
     qu'elles ne viennent pas mordre sur la photo. */
  .about__orbit {
    --orbit-icon: 42px;
  }
  .about__orbit-icon svg {
    width: var(--icon-md);
    height: var(--icon-md);
  }
}
@media (max-width: 479px) {
  /* Sous 480 px même réduites, les pastilles se chevauchent : on garde la
     photo seule, sans les anneaux. */
  .about__orbit-ring,
  .about__orbit-icons {
    display: none;
  }
  .about__orbit {
    width: auto;
    height: auto;
  }
  .about__orbit-photo {
    /* Anneaux et pastilles masqués : plus rien ne borne la photo, elle peut
       occuper toute la largeur de la colonne. */
    width: 100%;
    max-width: 380px;
    height: auto;
    aspect-ratio: 1;
  }
  /* Le cercle n'a plus d'anneaux à épouser : un carré arrondi cadre mieux le
     sujet et s'aligne sur le rayon des autres visuels de la page. */
  .about__orbit-photo img {
    border-radius: var(--r-2xl);
  }
  .about__stat {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }
}

/* ==========================================================================
   FAQ — deux colonnes

   Deux conteneurs indépendants plutôt qu'une grille à deux colonnes : dans une
   grille, l'ouverture d'une réponse étire la rangée et creuse un vide en face.
   Ici chaque colonne se réagence seule.
   Les six questions restent dans #accordion, le script continue donc de n'en
   garder qu'une ouverte à la fois, colonnes confondues.
   ========================================================================== */
.faq {
  display: grid;
  gap: var(--sp-4) var(--gutter);
  align-items: start;
  grid-template-columns: 1fr 1fr;
}
.faq__col {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}
@media (max-width: 860px) {
  .faq {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   NOS PEINTURES
   ========================================================================== */
.paints__note {
  max-width: 78ch;
  margin-inline: auto;
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: var(--border-w) solid var(--border-default);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-body);
  text-align: center;
}
.paints__note strong {
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   AVIS CLIENTS

   Une seule liste dans le HTML, deux mises en scène construites par main.js :
   .is-cols  — deux pistes verticales à sens inverse, au-dessus de 900 px ;
   .is-rail  — une piste horizontale, en dessous.
   Sans script, aucune des deux classes n'est posée : la liste reste empilée.
   ========================================================================== */
.reviews__grid {
  display: grid;
  gap: var(--sp-12) var(--gutter);
  align-items: center;
  grid-template-columns: 0.85fr 1.15fr;
}
.reviews__text {
  margin-top: var(--sp-5);
  color: var(--text-body);
}
.reviews__score {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: var(--border-w) solid var(--border-default);
}
.reviews__score-num {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: 1;
}
.reviews__score-label {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.reviews__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

/* Le passage de deux colonnes verticales à une ligne horizontale se fait au
   même seuil que l'empilement de la section — au-delà, les deux colonnes
   deviendraient des bandes trop étroites pour une citation. */
@media (max-width: 900px) {
  .reviews__grid {
    grid-template-columns: 1fr;
  }
}

/* --- Repli sans script ---------------------------------------------------- */
.reviews__body {
  min-width: 0;
}
.reviews__group,
.reviews__item {
  list-style: none;
}
.reviews__group {
  display: grid;
  gap: var(--gutter);
}

/* Le fondu d'entrée et de sortie des cartes, commun aux deux dispositions ;
   seul l'axe change. */
.reviews__marquee {
  overflow: hidden;
}
.reviews__marquee:hover .reviews__track,
.reviews__marquee:focus-within .reviews__track {
  animation-play-state: paused;
}

/* --- Deux pistes verticales (≥ 900 px) ------------------------------------ */
.reviews__body.is-cols {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr 1fr;
}
.is-cols .reviews__marquee {
  height: var(--reviews-h);
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}
.is-cols .reviews__track {
  display: grid;
  gap: var(--gutter);
  animation: reviews-scroll-y var(--dur-marquee) linear infinite;
}
.is-cols .reviews__marquee:nth-child(2) .reviews__track {
  animation-duration: var(--dur-marquee-alt);
  animation-direction: reverse;
}
/* La piste porte deux exemplaires du groupe : la translater de la moitié de sa
   hauteur, plus la moitié de la gouttière, la ramène exactement sur le double. */
@keyframes reviews-scroll-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-50% - var(--gutter) / 2));
  }
}

/* --- Une piste horizontale (< 900 px) ------------------------------------- */
.is-rail .reviews__marquee {
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}
.is-rail .reviews__track,
.is-rail .reviews__group {
  display: flex;
  gap: var(--gutter);
  width: max-content;
}
.is-rail .reviews__track {
  animation: reviews-scroll-x var(--dur-marquee) linear infinite;
}
.is-rail .reviews__item {
  width: var(--review-w);
  display: flex;
}
.is-rail .reviews__item .card {
  width: 100%;
}
@keyframes reviews-scroll-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - var(--gutter) / 2));
  }
}

/* Mouvement réduit : plus de défilement du tout. La découpe saute, le double
   est masqué, et les avis restent tous lisibles d'un coup. */
@media (prefers-reduced-motion: reduce) {
  .reviews__marquee {
    height: auto;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .reviews__track {
    animation-name: none;
  }
  .reviews__group[aria-hidden='true'] {
    display: none;
  }
  .is-rail .reviews__marquee {
    overflow-x: auto;
  }
}

/* ==========================================================================
   BANDEAU DE RAPPEL SOMBRE (§ 12, zone 5)
   ========================================================================== */
/* La section colle à la précédente : la carte photo fait déjà rupture, une
   marge haute en plus creusait un vide inutile. */
.callout {
  padding-top: 0;
}

/* Carte photo à grand rayon, posée dans la section : la photo est enfermée
   dans la carte, pas dans la section — c'est ce qui donne le bloc flottant. */
.callout__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: var(--callout-min-h);
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--r-2xl);
  background-color: var(--bg-dark);
  box-shadow: var(--shadow-xl);
}
.callout__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.callout__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Photo panoramique (2,42:1) recadrée dans un bandeau plus large encore :
     c'est la hauteur qui est rognée, le centrage vertical garde le rouleau
     et la limite entre mur brut et mur peint dans le champ. */
  object-position: center;
}
.callout__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim-callout);
}

.callout__body {
  display: grid;
  gap: var(--gutter);
  align-items: center;
  /* Colonne d'actions resserrée : ce sont les boutons qui s'en trouvent
     réduits, sans avoir à leur poser une largeur individuelle — ils restent
     ainsi de même longueur l'un que l'autre. */
  grid-template-columns: 1fr 0.6fr;
  width: 100%;
}
.callout__title {
  color: var(--white);
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}
.callout__text {
  color: var(--text-on-dark);
  max-width: 42ch;
}

/* Panneau translucide : la photo reste lisible derrière, le champ blanc pose
   le contraste nécessaire à la saisie. */
/* Panneau translucide : il ne porte plus que les deux actions, aucune saisie.
   La photo reste lisible derrière, les boutons posent le contraste. */
.callout__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  background-color: var(--surface-on-dark);
  border: var(--border-w) solid var(--border-on-dark);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 900px) {
  .callout__card {
    padding: var(--sp-8);
  }
  .callout__body {
    grid-template-columns: 1fr;
  }
  .callout__media img {
    object-position: 40% center;
  }
}
/* Sous 560 px, le libellé « Demander un devis gratuit » ne tenait plus : le
   bouton est en white-space: nowrap et sa largeur minimale forçait la colonne
   à 346 px dans un espace de 286. Le contenu débordait alors de la carte, qui
   le rognait à droite — d'où une marge apparente plus large à gauche.
   On resserre les paddings et on autorise le libellé à passer à la ligne : la
   largeur minimale retombe à celle du mot le plus long. */
@media (max-width: 560px) {
  .callout__card {
    padding: var(--sp-6);
  }
  .callout__panel {
    padding: var(--sp-3);
  }
  .callout__panel .btn {
    white-space: normal;
    height: auto;
    min-height: 56px;
    padding: var(--sp-3) var(--sp-5);
    text-align: center;
  }
}


/* ==========================================================================
   11.8 — FOOTER
   ========================================================================== */
.footer {
  background-color: var(--bg-dark);
  color: var(--text-on-dark-muted);
  /* Dégage en haut la hauteur dont la carte formulaire déborde ; en bas, la
     mention légale n'appelle pas la même respiration qu'une section. */
  padding-top: calc(var(--section-py) + var(--quote-overlap));
  padding-bottom: var(--sp-6);
}

/* Strate 1 — colonnes */
.footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--gutter);
  padding-bottom: var(--sp-10);
}
@media (max-width: 900px) {
  .footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-8);
  }
}
@media (max-width: 479px) {
  .footer__cols {
    grid-template-columns: 1fr;
  }
}
/* Le fichier logo porte un texte bleu nuit, invisible sur ce fond sombre. Le
   filtre le ramène en blanc plein : brightness(0) écrase tout en noir, invert
   retourne le tout en blanc, la transparence étant préservée. Rendu
   monochrome — une version inversée du fichier restituerait le bleu. */
.footer__brand-img {
  width: auto;
  height: 64px;
  margin-bottom: var(--sp-5);
  filter: brightness(0) invert(1);
}
.footer__brand-text {
  max-width: 34ch;
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-on-dark-muted);
  margin-bottom: var(--sp-5);
}
.footer__social {
  display: flex;
  gap: var(--sp-3);
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-circle);
  border: var(--border-w) solid var(--border-on-dark);
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}
.footer__social a:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.32);
}
.footer__social svg {
  width: var(--icon-md);
  height: var(--icon-md);
}
.footer__col-title {
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-5);
}
.footer__list {
  display: grid;
  gap: var(--sp-3);
}
.footer__list a,
.footer__list span {
  font-size: var(--fs-xs);
  color: var(--text-on-dark-muted);
  transition: color var(--dur-fast) var(--ease-standard);
}
.footer__list a:hover {
  color: var(--white);
}
.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.footer__contact-item svg {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--warm-300);
  flex-shrink: 0;
  margin-top: 2px;
}
.footer__phone {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--warm-300);
}

/* Strate 2 — barre de bas de page */
.footer__bottom {
  padding-top: var(--sp-6);
  border-top: var(--border-w) solid var(--border-on-dark);
  text-align: center;
  font-size: var(--fs-2xs);
  color: var(--text-on-dark-muted);
}
@media (max-width: 767px) {
  .footer {
    padding-bottom: calc(var(--section-py) + 76px);
  }
}

/* ==========================================================================
   11.7 — BARRE D'APPEL MOBILE (< 768px)
   ========================================================================== */
.callbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  gap: var(--sp-3);
  padding: var(--sp-3) var(--container-pad);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: var(--border-w) solid var(--border-subtle);
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.callbar.is-visible {
  transform: translateY(0);
}
.callbar .btn {
  flex: 1;
}
@media (max-width: 767px) {
  .callbar {
    display: flex;
  }
}