/* ═══════════════════════════════════════════════════════════════════════════
   P&D PAINTING PTY LTD — Feuille de style
   Palette dérivée du logo : script noir, coup de pinceau rouge, brosse bois.
   Mobile-first. Aucun défilement horizontal à aucune largeur.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Jetons de design ────────────────────────────────────────────────── */
:root {
  /* Couleurs (issues du logo) */
  --bg:        #FAFAF7;   /* blanc cassé chaleureux, jamais un blanc pur */
  --ink:       #151312;   /* noir quasi-charbon : titres, textes forts */
  --red:       #E63329;   /* coup de pinceau — UNIQUE accent, avec parcimonie */
  --red-deep:  #E0251A;   /* même teinte, 92 % de luminosité : seul rouge
                             admissible en aplat sous du texte clair
                             (4,51 contre 4,12 pour le rouge du logo) */
  --wood:      #C98A4B;   /* manche du pinceau — touche secondaire discrète */
  --silver:    #B8B8B4;   /* virole — séparateurs */
  --grey:      #6E6A66;   /* gris chaud — hiérarchie de texte */
  --tint:      #F2F1EC;   /* fond de section alterné */
  --line:      color-mix(in srgb, var(--silver) 55%, transparent);

  /* Typographie */
  --serif:  "Playfair Display", "Iowan Old Style", Georgia, serif;
  --script: "Pinyon Script", "Playfair Display", cursive;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Échelle fluide */
  --t-hero:    clamp(2.6rem, 1.15rem + 6.4vw, 6.4rem);
  --t-section: clamp(2rem, 1.1rem + 3.6vw, 4.1rem);
  --t-card:    clamp(1.3rem, 1.1rem + .7vw, 1.7rem);
  --t-body:    clamp(1rem, .96rem + .22vw, 1.12rem);
  --t-small:   clamp(.82rem, .79rem + .12vw, .9rem);

  /* Rythme */
  --shell:   1280px;
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4.5rem, 3rem + 9vw, 9.5rem);
  --header-h: 74px;

  /* Mouvement */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.65, .05, .36, 1);
}

@media (min-width: 1024px) { :root { --header-h: 92px; } }

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

html {
  overflow-x: clip;          /* garde-fou anti-débordement, cf. body */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--grey);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .003em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;          /* garde-fou anti-débordement horizontal */
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -.018em;
}

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

/* L'attribut hidden doit toujours l'emporter sur un display: de composant */
[hidden] { display: none !important; }

/* Grain de papier : casse l'aplat numérique et réchauffe les grandes surfaces
   claires. Une seule couche fixe, rasterisée une fois, sans coût au scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--red); color: var(--bg); }

/* Focus visible et lisible partout (accessibilité) */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: .7rem 1.2rem;
  font-size: var(--t-small);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ─── 3. Coup de pinceau animé (signature de la marque) ──────────────────── */
/* Technique : stroke-dasharray / stroke-dashoffset sur des tracés normalisés
   (pathLength="1"). Deux ou trois traits légèrement décalés en opacité et en
   épaisseur simulent la pression et la texture d'un vrai pinceau.           */
.brush {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.brush path {
  fill: none;
  stroke: var(--red);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.brush__a { stroke-width: 5;   opacity: .96; }
.brush__b { stroke-width: 2.4; opacity: .5;  }
.brush__c { stroke-width: 1.2; opacity: .34; }

/* Tracé : déclenché par la classe .is-drawn (chargement ou IntersectionObserver) */
.brush.is-drawn path {
  animation: brush-draw var(--draw, 1s) var(--ease-soft) forwards,
             brush-dry .9s ease-out var(--dry, 1.05s) forwards;
}
.brush.is-drawn .brush__b { animation-delay: .06s, calc(var(--dry, 1.05s) + .06s); }
.brush.is-drawn .brush__c { animation-delay: .12s, calc(var(--dry, 1.05s) + .12s); }

@keyframes brush-draw { to { stroke-dashoffset: 0; } }

/* Variante « le trait sèche » : la peinture perd un peu de brillance */
@keyframes brush-dry {
  from { opacity: var(--wet, 1);   filter: saturate(1.12); }
  to   { opacity: var(--dried, .8); filter: saturate(1); }
}
.brush.is-drawn .brush__b { --wet: .5;  --dried: .4; }
.brush.is-drawn .brush__c { --wet: .34; --dried: .26; }

/* Trait sous le titre du Hero */
.brush--hero {
  position: absolute;
  left: 0;
  bottom: clamp(-.5rem, -.2rem - .8vw, -.1rem);
  width: min(62%, 26rem);
  --draw: 1.1s;
  --dry: 1.2s;
}

/* Trait sous les titres de section (injecté par le JS sur [data-brush]) */
.brush--section {
  position: absolute;
  left: 0;
  bottom: -.45em;
  width: min(58%, 20rem);
  --draw: .85s;
  --dry: .95s;
}
.section__head--left .brush--section,
.contact__intro .brush--section { left: 0; }

/* ─── 4. Boutons ─────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 999px;      /* même langage que la pastille du téléphone */
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}

.btn--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--solid:hover { background: #000; transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--bg); border-color: rgba(250, 250, 247, .45); }
.btn--ghost:hover { border-color: var(--bg); background: rgba(250, 250, 247, .1); transform: translateY(-2px); }

.btn--lg { padding: 1.1rem 2.4rem; }
.btn--block { width: 100%; margin-top: .5rem; }

/* Trait rouge qui se dessine au survol (0.3 s) */
.btn__brush {
  position: absolute;
  left: 1.7rem;
  right: 1.7rem;
  bottom: .6rem;
  width: auto;
  height: 6px;
  overflow: visible;
  pointer-events: none;
}
.btn__brush path {
  fill: none;
  stroke: var(--red);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .3s var(--ease-soft);
}
.btn:hover .btn__brush path,
.btn:focus-visible .btn__brush path { stroke-dashoffset: 0; }

/* ─── 5. Header ──────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header::after {           /* filet de séparation, révélé au scroll */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity .4s var(--ease);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
  min-width: 0;              /* empêche le header d'élargir la page */
}
.nav, .nav__list { min-width: 0; }

/* État « scrollé » : fond blanc cassé */
.site-header.is-stuck {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.site-header.is-stuck::after { opacity: 1; }

/* Menu ouvert : le flou doit disparaître. Un backdrop-filter fait du header
   le bloc conteneur de ses descendants en position: fixed — le panneau,
   censé couvrir l'écran, se retrouvait borné à la hauteur de la barre.
   Le sélecteur est qualifié par html pour passer devant .is-stuck. */
html.nav-open .site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  box-shadow: none;
}
html.nav-open .site-header::after { opacity: 0; }

/* Logo */
.logo { display: block; flex: none; }
.logo img {
  height: clamp(44px, 3.4vw, 54px);
  width: auto;
  transition: opacity .3s var(--ease);
}
.logo:hover { opacity: .82; }

/* Permutation clair / encre selon le fond réellement sous le header */
.site-header .logo { position: relative; z-index: 2; }
.logo--swap .logo__ink { position: absolute; inset: 0; }
.logo--swap .logo__ink { opacity: 0; }
.site-header.is-stuck .logo__light,
.nav-open .logo__light { opacity: 0; }
.site-header.is-stuck .logo__ink,
.nav-open .logo__ink { opacity: 1; }

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.4vw, 2.6rem);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.2vw, 2.6rem);
}

.nav__link {
  position: relative;
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bg);
  padding-block: .4rem;
  transition: color .3s var(--ease);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.nav__link::after {              /* petit trait rouge au survol */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-soft);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after { transform: scaleX(1); }

.site-header.is-stuck .nav__link { color: var(--ink); text-shadow: none; }
.site-header.is-stuck .nav__link:hover { color: var(--ink); }

/* Téléphone + « Devis gratuit », côte à côte */
.nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.6vw, 1.5rem);
}

/* Pastille : sur le Hero, un simple texte clair se noyait dans l'image.
   Un fond assombri + un filet garantissent la lisibilité sur n'importe
   quelle photo, sans alourdir le header. */
.nav__phone {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex: none;
  padding: .62rem 1.05rem;
  border: 1px solid var(--red-deep);
  border-radius: 999px;
  background: var(--red-deep);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--bg);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.nav__phone svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Le rouge tient sur le Hero comme sur le header clair : aucun état à
   permuter, l'appel reste identifiable partout. */
.nav__phone:hover {
  transform: translateY(-2px);
  background: #C81F15;
}

/* Menu burger (mobile) */
/* Cible tactile généreuse, et toujours au-dessus du panneau : le burger doit
   rester atteignable où qu'on soit dans la page. */
.burger {
  display: none;
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  margin-right: -8px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  position: absolute;
  left: 12px;
  width: 24px;
  height: 1.5px;
  background: var(--bg);
  transition: transform .35s var(--ease), opacity .2s linear, background-color .3s var(--ease);
}
.burger span:nth-child(1) { top: 21px; }
.burger span:nth-child(2) { top: 28px; }
.site-header.is-stuck .burger span,
.nav-open .burger span { background: var(--ink); }
.nav-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-open .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 1023px) {
  .burger { display: block; z-index: 2; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    padding: var(--gutter);
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1.5rem);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .nav-open .nav { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .nav__link {
    color: var(--ink);
    text-shadow: none;
    font-family: var(--serif);
    font-size: clamp(2rem, 9vw, 3rem);
    letter-spacing: -.02em;
    text-transform: none;
    padding-block: .18em;
  }
  /* Dans le panneau plein écran, le duo s'empile : numéro puis devis */
  .nav__actions {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: .8rem;
    margin-top: 1.8rem;
    max-width: 22rem;
  }
  /* Le rouge est conservé : l'appel se traite pareil dans tout le site */
  .nav__phone {
    justify-content: center;
    padding: .95rem 1.4rem;
    font-size: .95rem;
  }
  /* Même gabarit que la pastille du téléphone, toujours sur fond noir */
  .nav__cta { padding: .95rem 1.4rem; }
  .nav__cta .btn__brush { left: 2rem; right: 2rem; }

  .nav-open { overflow: hidden; }
}

/* Palier étroit du desktop : on resserre pour garder le header sur une ligne */
@media (min-width: 1024px) and (max-width: 1179px) {
  .nav__list { gap: 1.25rem; }
  .nav__cta { padding-inline: 1.15rem; }
}

/* ─── 6. Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 3rem) clamp(4rem, 9vh, 7rem);
  overflow: hidden;              /* le mouvement de caméra ne déborde jamais */
  background: var(--ink);
}

.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

.hero__img,
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 58% 52%;
}
.hero__img { will-change: transform; }

/* Image d'attente : c'est la première image de la boucle, le raccord avec
   la vidéo est donc invisible. Elle reste seule si la lecture est refusée
   (économie d'énergie sur iOS), ce qui évite tout habillage de lecteur. */
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

/* La vidéo est déjà un travelling : aucun mouvement ajouté, et un léger
   agrandissement pour absorber les différences de format d'écran.
   Elle n'est JAMAIS masquée par opacité : Safari tient un élément
   transparent pour masqué et refuse alors la lecture automatique. Avant
   que la première image ne soit décodée, c'est le fond CSS — l'image
   d'attente — qui occupe la surface. */
.hero__video {
  position: absolute;
  inset: 0;
  transform: scale(1.02);
  pointer-events: none;      /* fond décoratif : rien à cliquer */
  background: var(--poster, none) center / cover no-repeat;
}

/* Repli : la lecture n'a pas démarré dans le délai imparti (économie
   d'énergie sur iOS, refus du navigateur). On efface la vidéo et l'image
   d'attente prend le relais, animée — jamais d'image figée ni de bouton. */
.hero.video-failed .hero__video { display: none; }
.hero.video-failed .hero__poster {
  animation: kenburns 22s var(--ease-soft) infinite alternate;
}

/* Safari sur iOS affiche son propre bouton de lecture dès qu'il refuse la
   lecture automatique — mode économie d'énergie, par exemple. Sur un fond
   décoratif, ce bouton n'a aucun sens : il ne reste alors que l'image
   d'attente, qui est la première image de la boucle. */
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-enclosure,
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
}

/* Option B — Ken Burns : zoom + panoramique lents, 20 s, en boucle */
.hero:not(.pano-on) .hero__img {
  animation: kenburns 20s var(--ease-soft) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.06) translate3d(-1.4%, .6%, 0); }
  to   { transform: scale(1.18) translate3d(1.8%, -1.6%, 0); }
}

/* Option A — conteneur du lecteur 360° */
.hero__pano { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.hero__pano canvas { outline: none; }
.hero.pano-on .hero__media { opacity: 0; }

/* Voile dégradé : garantit la lisibilité du texte (contraste AA) */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(21, 19, 18, .88) 0%, rgba(21, 19, 18, .55) 34%,
                    rgba(21, 19, 18, .12) 66%, rgba(21, 19, 18, .38) 100%),
    linear-gradient(to right, rgba(21, 19, 18, .5) 0%, rgba(21, 19, 18, 0) 62%);
  pointer-events: none;
}

/* Colonne explicite : la pastille et le titre sont tous deux des éléments
   de type inline — sans cela, ils se suivent sur la même ligne. */
.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: var(--shell);
}

/* Zone d'intervention : pastille, et non ligne de texte nue — sur une image
   en mouvement, du petit texte clair non cadré disparaît. */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: clamp(1.3rem, 2.6vw, 2rem);
  padding: .5rem 1.1rem .5rem .85rem;
  border: 1px solid rgba(250, 250, 247, .26);
  border-radius: 999px;
  background: rgba(21, 19, 18, .38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: clamp(.66rem, .6rem + .22vw, .78rem);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bg);
  max-width: 100%;
  flex-wrap: wrap;
  row-gap: .15rem;
}

/* Sur petit écran, l'interlettrage et les marges de séparateurs suffisaient
   à faire déborder la pastille de la marge. Elle se resserre, et peut
   passer sur deux lignes en dessous de 340 px. */
@media (max-width: 560px) {
  .hero__eyebrow {
    padding: .45rem .7rem .45rem .55rem;
    gap: .3rem;
    font-size: .68rem;
    letter-spacing: .02em;
    border-radius: 1.3rem;
  }
  .hero__eyebrow i { margin-inline: .3rem; height: 9px; }
  .hero__pin { width: 12px; height: 12px; }
}

.hero__pin {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero__eyebrow span { white-space: nowrap; }
.hero__eyebrow i {          /* séparateur : filet fin plutôt qu'un point */
  display: block;
  width: 1px;
  height: 11px;
  margin-inline: .7rem;
  background: rgba(250, 250, 247, .32);
}

.hero__title {
  position: relative;
  display: inline-block;
  max-width: 16ch;
  margin-bottom: clamp(1.9rem, 4vw, 2.8rem);
  font-size: var(--t-hero);
  color: var(--bg);
  letter-spacing: -.028em;
}
.hero__title em { font-style: italic; font-weight: 400; }

.hero__lede {
  max-width: 46ch;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
  font-size: clamp(1.02rem, .95rem + .5vw, 1.28rem);
  line-height: 1.68;
  color: color-mix(in srgb, var(--bg) 88%, transparent);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Indice « faire glisser pour explorer » (mode 360° uniquement) */
.hero__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 4vh, 2.6rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .5rem 1rem;
  border: 1px solid rgba(250, 250, 247, .25);
  border-radius: 999px;
  background: rgba(21, 19, 18, .3);
  backdrop-filter: blur(6px);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bg);
  animation: hint-pulse 3.2s ease-in-out infinite;
}
.hero__hint svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
@keyframes hint-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Flèche de défilement */
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.4rem, 4vh, 2.6rem);
  width: 30px;
  height: 52px;
  border: 1px solid rgba(250, 250, 247, .3);
  border-radius: 999px;
  display: none;
}
.hero__scroll span {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--red);
  animation: scroll-dot 2.1s var(--ease-soft) infinite;
}
@keyframes scroll-dot {
  0%   { transform: translateY(0);    opacity: 0; }
  25%  { opacity: 1; }
  75%  { transform: translateY(22px); opacity: 0; }
  100% { transform: translateY(22px); opacity: 0; }
}
@media (min-width: 1024px) { .hero__scroll { display: block; } }

/* ─── 7. Sections génériques ─────────────────────────────────────────────── */
/* Rythme des fonds : sombre (hero) → bandeau charbon → clair chaud → tuilé →
   clair → sombre (avis) → tuilé → sombre (footer). Aucune grande zone
   blanche laissée nue. */
.section { position: relative; padding-block: var(--section); }

/* Fond tuilé chaud, avec une lueur douce en haut à gauche */
.section--tint {
  background:
    radial-gradient(120% 90% at 10% 0%, #F8F6EF 0%, rgba(248, 246, 239, 0) 58%),
    var(--tint);
}

/* Fond clair mais réchauffé : dégradé de papier depuis le haut */
.section--paper {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wood) 7%, var(--bg)) 0%,
                    var(--bg) 42%);
}

/* Filigrane : le coup de pinceau du logo, très en retrait.
   Pas d'overflow: hidden ici — cela casserait le position: sticky du bloc
   de gauche ; le débordement est déjà géré par overflow-x: clip sur body. */
.section--mark::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  top: 14%;
  width: min(42%, 26rem);
  aspect-ratio: 5 / 2;
  background: url("../img/brush-mark.svg") no-repeat center / contain;
  opacity: .025;
  transform: rotate(-6deg);
  pointer-events: none;
}
/* Le contenu reste toujours au-dessus du filigrane */
.section > .shell { position: relative; z-index: 1; }
.section--dark { background: var(--ink); color: color-mix(in srgb, var(--bg) 72%, transparent); }
.section--dark .section__title { color: var(--bg); }
.section--dark .section__eyebrow { color: var(--silver); }

.section__head {
  max-width: 62ch;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.section__eyebrow {
  margin-bottom: 1.1rem;
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--grey);
}
.section__eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  margin-right: .8rem;
  vertical-align: middle;
  background: var(--red);
}

.section__title {
  position: relative;
  display: inline-block;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
  font-size: var(--t-section);
}

.section__lede {
  max-width: 52ch;
  font-size: clamp(1rem, .96rem + .35vw, 1.16rem);
  line-height: 1.8;
}

/* ─── 8. Bandeau de confiance ────────────────────────────────────────────── */
/* Bandeau charbon : prolonge le Hero et évite la rupture brutale vers le blanc */
.strip {
  padding-block: clamp(2.4rem, 4vw, 3.4rem);
  background: var(--ink);
  color: color-mix(in srgb, var(--bg) 62%, transparent);
}
.strip__grid {
  --gap: clamp(1.4rem, 3vw, 2.6rem);
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) { .strip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.strip__item { position: relative; display: flex; flex-direction: column; gap: .25rem; }
.strip__item strong {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
  font-weight: 400;
  color: var(--bg);
}
.strip__item span {
  font-size: var(--t-small);
  color: color-mix(in srgb, var(--bg) 55%, transparent);
}

/* Filets verticaux entre colonnes, uniquement en version 4 colonnes */
@media (min-width: 860px) {
  .strip__item + .strip__item::before {
    content: "";
    position: absolute;
    left: calc(var(--gap) / -2);
    top: .25em;
    bottom: .25em;
    width: 1px;
    background: rgba(250, 250, 247, .16);
  }
}

/* ─── 9. Services ────────────────────────────────────────────────────────── */
.cards {
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* Carte menée par l'image : le visuel occupe la moitié haute, le texte se
   limite à une ligne et trois mots-clés. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: transform .45s var(--ease), border-color .45s var(--ease),
              box-shadow .45s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--wood) 55%, transparent);
  box-shadow: 0 22px 46px -28px rgba(21, 19, 18, .3);
}

.card__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--tint);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-soft);
}
.card:hover .card__media img { transform: scale(1.06); }

/* Numérotation sérif posée sur l'image, comme une signature */
.card__num {
  position: absolute;
  left: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(.6rem, 1.4vw, 1rem);
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem);
  font-style: italic;
  line-height: 1;
  color: var(--bg);
  text-shadow: 0 2px 24px rgba(21, 19, 18, .55);
  transition: color .45s var(--ease);
}
.card:hover .card__num { color: var(--red); }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
}

.card__title { margin-bottom: .6rem; font-size: var(--t-card); }
.card__text {
  margin-bottom: 1.5rem;
  font-size: .98rem;
  line-height: 1.65;
}

/* Mots-clés : filets fins, jamais de puces */
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: auto;
}
.card__tags li {
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--grey);
  white-space: nowrap;
  transition: border-color .45s var(--ease), color .45s var(--ease);
}
.card:hover .card__tags li {
  border-color: color-mix(in srgb, var(--wood) 45%, transparent);
  color: var(--ink);
}

/* Souligné rouge au survol de la carte */
.card__rule {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-soft);
}
.card:hover .card__rule, .card:focus-within .card__rule { transform: scaleX(1); }

/* ─── 10. Réalisations ───────────────────────────────────────────────────── */

/* Comparateur avant / après */
.ba { margin: 0 0 clamp(2rem, 4vw, 3.2rem); }

.ba__frame {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ink);
  aspect-ratio: 14 / 10;
  touch-action: pan-y;           /* le glissement horizontal pilote le curseur */
  user-select: none;
}
@media (min-width: 720px) { .ba__frame { aspect-ratio: 16 / 9; } }

.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba__clip {
  position: absolute;
  inset: 0;
  width: var(--pos, 50%);
  overflow: hidden;
}
/* L'image « avant » garde la largeur du cadre pour ne pas se déformer */
.ba__clip .ba__img { width: var(--frame-w, 100vw); max-width: none; }

.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--bg);
  box-shadow: 0 0 22px rgba(21, 19, 18, .45);
  pointer-events: none;
}
.ba__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--bg);
  border-radius: 50%;
  background: rgba(21, 19, 18, .32);
  backdrop-filter: blur(4px);
}
.ba__handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-left: 1.5px solid var(--bg);
  border-bottom: 1.5px solid var(--bg);
  box-shadow: 9px -9px 0 -7.5px var(--bg), 13px -13px 0 -11.5px var(--bg);
}

/* Le champ range reste l'élément réellement focusable (clavier + lecteurs d'écran) */
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: none;
}
.ba__range:focus-visible { opacity: .001; outline-offset: -4px; }
.ba__srlabel {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ba__tag {
  position: absolute;
  top: 1rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: rgba(21, 19, 18, .55);
  backdrop-filter: blur(6px);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bg);
  pointer-events: none;
}
.ba__tag--l { left: 1rem; }
.ba__tag--r { right: 1rem; }

.ba__cap {
  margin-top: .9rem;
  font-size: var(--t-small);
  letter-spacing: .04em;
  color: var(--grey);
}

/* Grille portfolio — colonnes fluides, gère les formats mixtes sans trou */
.gallery { columns: 1; column-gap: clamp(.8rem, 1.6vw, 1.4rem); }
@media (min-width: 620px)  { .gallery { columns: 2; } }
@media (min-width: 1040px) { .gallery { columns: 3; } }

.tile {
  position: relative;
  margin: 0 0 clamp(.8rem, 1.6vw, 1.4rem);
  overflow: hidden;
  border-radius: 3px;
  break-inside: avoid;
  background: var(--tint);
}
.tile img {
  width: 100%;
  transition: transform .8s var(--ease-soft), filter .6s var(--ease);
}
.tile:hover img { transform: scale(1.045); }

.tile figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: 2.8rem 1.2rem 1.1rem;
  background: linear-gradient(to top, rgba(21, 19, 18, .8), rgba(21, 19, 18, 0));
  color: var(--bg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.tile:hover figcaption,
.tile:focus-within figcaption { opacity: 1; transform: none; }

.tile figcaption span {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.3;
}
.tile figcaption em {
  font-style: normal;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 65%, transparent);
}

/* Sur écran tactile, la légende reste visible (pas de survol possible) */
@media (hover: none) {
  .tile figcaption { opacity: 1; transform: none; }
}

/* ─── 11. Pourquoi nous choisir ──────────────────────────────────────────── */
.why { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 980px) {
  .why { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .section__head--left { position: sticky; top: calc(var(--header-h) + 3rem); margin-bottom: 0; }
}

.why__cta { margin-top: 2rem; }

.reasons { display: grid; gap: clamp(1.8rem, 3vw, 2.6rem); }

.reason {
  position: relative;
  padding-left: clamp(3.4rem, 6vw, 4.6rem);
  padding-bottom: clamp(1.8rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--line);
}
.reason:last-child { border-bottom: 0; padding-bottom: 0; }

.reason__num {
  position: absolute;
  left: 0;
  top: -.12em;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-style: italic;
  color: var(--silver);
  transition: color .4s var(--ease);
}
.reason:hover .reason__num { color: var(--red); }

.reason__title {
  margin-bottom: .6rem;
  font-size: var(--t-card);
}
.reason p { font-size: .98rem; line-height: 1.75; }

/* ─── 12. Avis clients ───────────────────────────────────────────────────── */
.quotes {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.quote {
  position: relative;
  margin: 0;
  padding: clamp(1.8rem, 3vw, 2.4rem) 0 0;
  border-top: 1px solid rgba(250, 250, 247, .16);
}

.quote__mark {
  display: block;
  margin-bottom: -.35em;
  font-family: var(--script);
  font-size: 4.2rem;
  line-height: 1;
  color: var(--red);
}

.quote blockquote { margin: 0 0 1.6rem; }
.quote blockquote p {
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--bg);
}

.quote figcaption { display: flex; flex-direction: column; gap: .15rem; }
.quote figcaption strong {
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--bg);
}
.quote figcaption span {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--silver);
}

/* ─── 13. Contact ────────────────────────────────────────────────────────── */
.contact { display: grid; gap: clamp(3rem, 6vw, 5rem); }
@media (min-width: 980px) {
  .contact { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
}

.contact__details {
  display: grid;
  gap: 1.4rem;
  margin-top: clamp(2.2rem, 4vw, 3rem);
  padding-top: clamp(2.2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

.contact__label {
  display: block;
  margin-bottom: .25rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grey);
}

.contact__value {
  position: relative;
  display: inline-block;
  padding-block: .5rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.85rem);
  color: var(--ink);
  transition: color .3s var(--ease);
}
a.contact__value::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.12em;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-soft);
}
a.contact__value:hover::after, a.contact__value:focus-visible::after { transform: scaleX(1); }
.contact__value--plain { font-size: clamp(1rem, .96rem + .3vw, 1.12rem); font-family: var(--sans); color: var(--grey); }

.areas {
  margin-top: 2.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.areas__list {
  margin-top: .5rem;
  font-size: .95rem;
  line-height: 1.9;
  color: var(--grey);
}

/* Formulaire — champs soulignés, aucune bordure lourde */
.form {
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  background: var(--bg);          /* contraste avec la section tuilée */
  box-shadow: 0 24px 60px -40px rgba(21, 19, 18, .35);
  border-radius: 3px;
  border-top: 2px solid var(--ink);
}

.form__title {
  margin-bottom: 2rem;
  font-family: var(--serif);
  font-size: var(--t-card);
  color: var(--ink);
}

.field { position: relative; margin-bottom: 1.9rem; }

.field__input {
  width: 100%;
  padding: .95rem 0 .8rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--silver);
  border-radius: 0;
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  transition: border-color .3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field__input:focus { outline: none; border-bottom-color: var(--ink); }
.field__input--area { resize: vertical; min-height: 3.4rem; line-height: 1.65; }
.field__input--select {
  cursor: pointer;
  padding-right: 1.6rem;
  /* Chevron : sans lui, le champ ne se distingue pas d'un champ texte vide */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236E6A66' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .15rem center;
}

/* Trait rouge qui se dessine au focus */
.field::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-soft);
}
.field:focus-within::after { transform: scaleX(1); }

.field__label {
  position: absolute;
  left: 0;
  top: .7rem;
  font-size: 1rem;
  font-weight: 300;
  color: var(--grey);
  pointer-events: none;
  transform-origin: left;
  transition: transform .28s var(--ease), color .28s var(--ease);
}
/* Étiquette flottante : monte dès que le champ est rempli ou actif */
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label,
.field__label--static {
  transform: translateY(-1.65rem) scale(.72);
  color: var(--grey);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.field__input--select:not([value=""]) + .field__label { color: var(--grey); }
.field__opt { text-transform: none; letter-spacing: 0; }

.field__error {
  display: block;
  margin-top: .45rem;
  font-size: .78rem;
  color: var(--red);
  min-height: 0;
}
.field.has-error .field__input { border-bottom-color: var(--red); }

/* Piège à robots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status {
  margin-top: 1rem;
  font-size: .9rem;
  color: var(--grey);
  min-height: 1.4em;
}
.form__status.is-ok { color: var(--ink); }
.form__status.is-error { color: var(--red); }

.form__note {
  margin-top: 1.2rem;
  font-size: var(--t-small);
  color: var(--grey);
}
.form__note a { color: var(--ink); border-bottom: 1px solid var(--red); }

/* État « envoi en cours » du bouton */
.btn.is-sending { pointer-events: none; opacity: .7; }
.btn__spin {
  width: 15px;
  height: 15px;
  border: 1.5px solid color-mix(in srgb, var(--bg) 35%, transparent);
  border-top-color: var(--bg);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Confirmation : le formulaire cède la place au message de succès */
.form.is-sent > *:not(.form__success) { display: none; }

.form__success { text-align: left; }

.form__success .tick {
  width: 54px;
  height: 54px;
  margin-bottom: 1.4rem;
  overflow: visible;
}
.form__success .tick circle {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
}
.form__success .tick path {
  fill: none;
  stroke: var(--red);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: brush-draw .55s var(--ease-soft) .12s forwards;
}

.form__success h3 {
  margin-bottom: .8rem;
  font-size: var(--t-card);
}
.form__success p { font-size: .98rem; line-height: 1.75; }
.form__success a { color: var(--ink); border-bottom: 1px solid var(--red); }

.form__again {
  margin-top: 1.6rem;
  padding: 0 0 .35rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--silver);
  font-size: var(--t-small);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .3s var(--ease);
}
.form__again:hover { border-color: var(--red); }

/* ─── 14. Footer ─────────────────────────────────────────────────────────── */
.footer {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  background: var(--ink);
  color: color-mix(in srgb, var(--bg) 62%, transparent);
}

/* Rangée principale : marque + trois colonnes de liens.
   En mobile, deux colonnes plutôt qu'un empilement — quatre blocs à la suite
   donnaient un long ruban sans relief. */
.footer__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem 1.5rem;
  padding-bottom: clamp(2.6rem, 5vw, 4rem);
}
.footer__brand,
.footer__col--wide { grid-column: 1 / -1; }

@media (min-width: 700px) {
  .footer__top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2.4rem, 5vw, 3.5rem);
  }
  .footer__col--wide { grid-column: auto; }
}
@media (min-width: 1020px) {
  .footer__top {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 4.5rem);
  }
  .footer__brand { grid-column: auto; }
}

/* Colonne de marque */
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; }
.footer .logo img { height: clamp(52px, 5.4vw, 68px); }

.footer__pitch {
  max-width: 34ch;
  margin: 1.6rem 0 1.8rem;
  font-size: .95rem;
  line-height: 1.8;
}

.footer__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding-bottom: .5rem;
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bg);
  border-bottom: 1px solid rgba(250, 250, 247, .28);
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.footer__cta svg {
  width: 16px; height: 16px;
  fill: none; stroke: var(--red);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.footer__cta:hover { gap: 1.1rem; border-color: var(--red); }

/* Colonnes de liens */
.footer__col { display: flex; flex-direction: column; align-items: flex-start; }

.footer__heading {
  margin-bottom: 1.4rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--silver);
}

.footer__links { display: grid; gap: .15rem; }
.footer__links a,
.footer__links span {
  position: relative;
  display: inline-block;
  padding-block: .62rem;   /* cible tactile : 25 px de texte, 45 px au doigt */
  font-size: .95rem;
  transition: color .3s var(--ease);
}
.footer__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .35rem;
  width: 100%;
  height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-soft);
}
.footer__links a:hover { color: var(--bg); }
.footer__links a:hover::after,
.footer__links a:focus-visible::after { transform: scaleX(1); }

.footer__strong {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  color: var(--bg);
}

.footer__social {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.6rem;
  padding: .55rem .95rem;
  border: 1px solid rgba(250, 250, 247, .22);
  border-radius: 999px;
  font-size: var(--t-small);
  letter-spacing: .1em;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.footer__social svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.3;
  transition: stroke .3s var(--ease);
}
.footer__social:hover { color: var(--bg); border-color: var(--red); }
.footer__social:hover svg { stroke: var(--red); }

/* Bande « zone couverte » */
.footer__areas {
  display: grid;
  gap: .4rem 2.5rem;
  padding-block: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid rgba(250, 250, 247, .14);
}
@media (min-width: 820px) {
  .footer__areas { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
}
.footer__areas .contact__label { color: var(--silver); margin: 0; }
.footer__areas p { font-size: .9rem; line-height: 1.8; }

/* Pied de page */
.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.8rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.5rem 1.8rem;
  border-top: 1px solid rgba(250, 250, 247, .14);
  font-size: .78rem;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--bg) 42%, transparent);
}
.footer__base p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }

/* ─── Footer en format mobile ────────────────────────────────────────────── */
@media (max-width: 699px) {
  .footer { padding-top: clamp(3rem, 9vw, 4rem); }

  /* Filet rouge : une signature au lieu d'un bloc gris qui commence sec */
  .footer__brand::before {
    content: "";
    display: block;
    width: 46px;
    height: 2px;
    margin-bottom: 1.8rem;
    background: var(--red);
  }

  .footer__pitch {
    max-width: 40ch;
    margin: 1.4rem 0 1.6rem;
    font-size: .92rem;
    line-height: 1.75;
  }

  /* L'appel à l'action devient un vrai bouton, pleine largeur */
  .footer__cta {
    justify-content: center;
    width: 100%;
    padding: .95rem 1.4rem;
    border: 1px solid rgba(250, 250, 247, .28);
    border-radius: 999px;
  }
  .footer__cta:hover { gap: .7rem; }

  .footer__heading { margin-bottom: 1rem; }
  .footer__links { gap: .1rem; }
  .footer__links a,
  .footer__links span { font-size: .9rem; }

  /* Le téléphone est l'élément le plus important du footer : il doit peser */
  .footer__col--wide {
    padding-top: 1.8rem;
    border-top: 1px solid rgba(250, 250, 247, .14);
  }
  .footer__strong { font-size: 1.5rem; }
  .footer__social { margin-top: 1.3rem; }

  /* Zone couverte : resserrée, elle n'a pas à occuper dix lignes */
  .footer__areas { padding-block: 1.5rem; }
  .footer__areas p { font-size: .82rem; line-height: 1.7; }

  /* Mentions : centrées et empilées, plutôt qu'écartelées */
  .footer__base {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding-block: 1.4rem 1.6rem;
  }
  .footer__legal { justify-content: center; gap: .3rem 1rem; }
}

.footer__powered a {
  position: relative;
  color: color-mix(in srgb, var(--bg) 72%, transparent);
  transition: color .3s var(--ease);
}
.footer__powered a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-soft);
}
.footer__powered a:hover { color: var(--bg); }
.footer__powered a:hover::after,
.footer__powered a:focus-visible::after { transform: scaleX(1); }

/* ─── 15. Micro-animations au scroll ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Si le JS ne s'exécute pas, le contenu reste visible */
.no-js .reveal { opacity: 1; transform: none; }

/* ─── 16. Préférence « mouvement réduit » ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  /* Les coups de pinceau s'affichent d'emblée, sans tracé progressif */
  .brush path,
  .btn__brush path { stroke-dashoffset: 0 !important; }

  .hero__img { animation: none !important; transform: scale(1.04) !important; }
  .hero__hint { animation: none !important; opacity: .9; }
  .hero__scroll span { animation: none !important; opacity: 1; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ─── 17. Relances (call to action) ──────────────────────────────────────── */
/* Réparties dans la page : une fois les services lus, une fois les
   réalisations vues, et en permanence sur mobile via la barre d'action. */

/* Bouton d'appel : rouge plein, identique partout dans le site */
.btn--call {
  background: var(--red-deep);
  color: var(--bg);
  border-color: var(--red-deep);
}
.btn--call svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn--call:hover { background: #C81F15; border-color: #C81F15; transform: translateY(-2px); }

/* ── Relance discrète : un filet, une phrase, un lien ────────────────────── */
.cta--quiet { background: var(--tint); }
.cta__quiet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.cta__quiet p {
  max-width: 46ch;
  margin: 0;
  font-size: .98rem;
}

.cta__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex: none;
  padding: .65rem 0 .6rem;
  border-bottom: 1px solid var(--silver);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  transition: gap .3s var(--ease), border-color .3s var(--ease);
}
.cta__link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cta__link:hover { gap: 1.1rem; border-color: var(--red); }

/* ── Relance pleine largeur ──────────────────────────────────────────────── */
.cta--loud {
  background:
    radial-gradient(90% 120% at 85% 10%, color-mix(in srgb, var(--wood) 12%, transparent) 0%,
                    rgba(0, 0, 0, 0) 60%),
    var(--bg);
  border-block: 1px solid var(--line);
}
.cta__loud {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 860px) {
  .cta__loud {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
  }
}

.cta__title {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
  font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.1rem);
}
.cta__lede { max-width: 46ch; font-size: 1rem; line-height: 1.75; }

.cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ── Barre d'action mobile ───────────────────────────────────────────────── */
.actionbar {
  position: fixed;
  z-index: 90;
  inset: auto 0 0;
  display: none;
  gap: .6rem;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -22px rgba(21, 19, 18, .5);
  /* Apparition en fondu avec une montée : masquée et inerte par défaut,
     donc jamais focalisable au clavier tant qu'elle est hors champ. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(115%);
  transition: transform .45s var(--ease), opacity .35s var(--ease),
              visibility .45s;
}
.actionbar.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

@media (max-width: 1023px) {
  .actionbar { display: flex; }
  /* De quoi ne jamais masquer la fin du footer */
  body { padding-bottom: 5.4rem; }
}

.actionbar__call,
.actionbar__quote {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

.actionbar__call {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .95rem 1rem;
  border: 1px solid var(--red-deep);
  border-radius: 999px;
  background: var(--red-deep);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bg);
}
.actionbar__call svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Masquée quand le menu plein écran est ouvert */
.nav-open .actionbar { transform: translateY(110%); }

/* ─── 18. Prestations complètes & méthode (contenu de la plaquette) ──────── */

/* Les huit prestations, sous les trois cartes photo */
.services__all {
  margin-top: clamp(2.4rem, 4vw, 3.5rem);
  padding-top: clamp(2rem, 3.5vw, 2.8rem);
  border-top: 1px solid var(--line);
}

.services__all-label {
  margin-bottom: 1.6rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grey);
}

.services__all ul {
  display: grid;
  gap: .9rem 1.2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px)  { .services__all ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px)  { .services__all ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.services__all li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .93rem;
  color: var(--ink);
}
.services__all svg {
  width: 26px;
  height: 26px;
  flex: none;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Les six étapes de la méthode */
.steps {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.step {
  position: relative;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.step__num {
  display: block;
  margin-bottom: .7rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-style: italic;
  line-height: 1;
  color: var(--silver);
  transition: color .4s var(--ease);
}
.step:hover .step__num { color: var(--red); }

.step__title {
  margin-bottom: .45rem;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
}
.step p { font-size: .93rem; line-height: 1.7; }