/* ============================================================
   Triptik — Composants partagés
   ============================================================ */

/* ── En-tête ───────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--s-4) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.brand { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.brand__mark { display: block; width: 32px; height: 32px; object-fit: contain; }
.brand__word {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--tracking-logo);
  text-transform: uppercase;
}

/* Gouttière fluide, et pas 30px fixes. Mesuré : entre 1041px — la
   largeur juste avant que le burger prenne le relais — et le CTA,
   l'en-tête complet ne tient à 30px fixes qu'à 10px près, et il
   déborde. Elle vaut 30px dès qu'il y a de la place. */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.35vw, 30px);
  font-size: var(--step-0);
  color: var(--muted);
}
.nav a { transition: color var(--dur) var(--ease); }
.nav a:hover,
.nav a[aria-current="page"] { color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }

/* « Offre 990 € » vit dans la nav, pas dans les actions de droite.
   Posée entre les deux, elle n'appartenait ni aux rubriques ni au
   CTA — d'où l'impression qu'elle flottait. C'est une page du site
   au même titre que Services ou Contact : sa place est la nav.
   Le filet la sépare des rubriques : il dit « celle-ci est d'une
   autre nature » sans la sortir de la ligne, et il remplace le
   soulignement, qui pouvait se lire comme une page active.
   Le mobile ne bouge pas : toute la nav disparaît sous 1040px et
   l'entrée « Offre — 990 € » du panneau est déclarée séparément. */
.nav-offer {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 1.6vw, 20px);   /* de part et d'autre du filet */
  color: var(--accent);
  transition: color var(--dur) var(--ease);
}
.nav-offer::before {
  content: "";
  flex: none;
  width: 1px;
  height: 16px;
  background: var(--line-2);
}
.nav-offer:hover { color: var(--ink); }

/* ── Menu mobile ───────────────────────────────────────────
   Burger ≤1040px, panneau plein écran, entrées en cascade.
   Le panneau reste dans le flux tant que le CSS n'est pas
   chargé : `hidden` en attribut HTML garantit qu'il ne
   s'affiche jamais nu si la feuille manque. */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex: none;
  transition: background var(--dur-fast) var(--ease);
}
.nav-toggle:hover { background: var(--ghost-bg-hover); }

.nav-toggle__bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.nav-toggle__bars::before { top: 1px; }
.nav-toggle__bars::after  { top: 9px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 5px; transform: rotate(-45deg); }

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: var(--s-4) var(--gutter) var(--s-7);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s;
}
.nav-drawer[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition-duration: .3s;
}

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 46px;
  flex: none;
}

.nav-drawer__links {
  display: flex;
  flex-direction: column;
  margin-top: var(--s-6);
}

/* Une entrée : icône à gauche, libellé, chevron discret à droite. */
.nav-drawer__links a {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 56px;
  padding-block: var(--s-3);
  border-top: 1px solid var(--line-2);
  font-size: clamp(26px, 7.5vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  /* Cascade : chaque entrée entre décalée de 40 ms. */
  opacity: 0;
  transform: translateY(10px);
}
.nav-drawer__links a:last-child { border-bottom: 1px solid var(--line-2); }
/* Le rang se compte sur les ENFANTS du tiroir, pas sur les <a> :
   une entrée peut être enveloppée dans un conteneur `data-flag`
   (voir flags.css). `--i` est une propriété personnalisée, donc
   héritée — le lien à l'intérieur de l'enveloppe reçoit le bon
   rang sans que le sélecteur ait à le viser directement. */
.nav-drawer__links > *:nth-child(1) { --i: 0; }
.nav-drawer__links > *:nth-child(2) { --i: 1; }
.nav-drawer__links > *:nth-child(3) { --i: 2; }
.nav-drawer__links > *:nth-child(4) { --i: 3; }
.nav-drawer__links > *:nth-child(5) { --i: 4; }
.nav-drawer__links > *:nth-child(6) { --i: 5; }

.nav-drawer[data-open="true"] .nav-drawer__links a {
  opacity: 1;
  transform: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  transition-delay: calc(var(--i, 0) * 40ms + 60ms);
}

.nav-drawer__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--accent);
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.nav-drawer__label { flex: 1 1 auto; }
.nav-drawer__chevron {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--faint);
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.nav-drawer__foot {
  margin-top: auto;
  padding-top: var(--s-7);
  opacity: 0;
  transform: translateY(10px);
}
.nav-drawer[data-open="true"] .nav-drawer__foot {
  opacity: 1;
  transform: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  transition-delay: 300ms;
}

body.is-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer,
  .nav-drawer[data-open="true"] { transition: opacity .15s linear, visibility .15s; transform: none; }
  .nav-drawer__links a,
  .nav-drawer__foot { opacity: 1; transform: none; }
  .nav-drawer[data-open="true"] .nav-drawer__links a,
  .nav-drawer[data-open="true"] .nav-drawer__foot { transition: none; transition-delay: 0s; }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after { transition: none; }
}

/* ── Héros de l'accueil ────────────────────────────────────
   Objectif : la bande d'images est visible dès l'arrivée, sans
   scroll. `svh` et non `vh` — sinon la barre d'URL mobile fait
   déborder la section. 104px ≈ hauteur de l'en-tête + marge. */

.hero {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(26px, 3.6vw, 58px) var(--gutter) clamp(32px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3vw, 42px);
  min-height: calc(100svh - 104px);
}
.hero .h1 { font-size: clamp(40px, 6.2vw, 98px); }

/* Bande d'images volontairement inégale : hauts décalés, bas alignés. */
.hero-media {
  display: grid;
  grid-template-columns: 1.25fr .8fr 1fr;
  gap: clamp(10px, 1.2vw, 18px);
  align-items: end;
}
.hero-media img { display: block; width: 100%; object-fit: cover; }
.hero-media img:nth-child(1) { height: clamp(130px, 22svh, 300px); }
.hero-media img:nth-child(2) { height: clamp(100px, 15svh, 210px); }
.hero-media img:nth-child(3) { height: clamp(150px, 27svh, 360px); }

/* Bloc « trois expertises » : plus de boîte, il volait l'attention au H1.
   C'est le prénom qui porte l'emphase, pas le métier. */
.expertise-list { display: flex; flex-direction: column; }
.expertise-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 13px 0;
  border-top: 1px solid var(--line-2);
}
.expertise-row:last-child { border-bottom: 1px solid var(--line-2); }
.expertise-name { font-size: 23px; }
.expertise-job  { font-size: 14px; color: var(--muted); }
.expertise-note { margin: var(--s-5) 0 0; font-size: 13.5px; color: var(--accent); }

/* Écrans courts : c'est cette règle qui tient la promesse « images
   comprises dès l'arrivée » sur un portable 13" ou une fenêtre réduite.
   Les tailles passent en vh, pas en vw. */
@media (max-height: 780px) and (min-width: 901px) {
  .hero { min-height: 0; padding-top: 14px; padding-bottom: 16px; gap: min(2vh, 18px); }
  .hero .h1 { font-size: clamp(28px, 6.2vh, 58px); }
  .hero .eyebrow { margin-bottom: min(1.8vh, 16px); font-size: 12px; }
  .hero__intro .lead { font-size: 15px; }
  .hero__intro .btn { min-height: 44px; }
  .expertise-row { padding: min(1vh, 9px) 0; }
  .expertise-name { font-size: 19px; }
  .hero-media img:nth-child(1) { height: 12vh; }
  .hero-media img:nth-child(2) { height: 9vh; }
  .hero-media img:nth-child(3) { height: 14.5vh; }
}

/* Mobile : les images remontent juste sous le titre. */
@media (max-width: 900px) {
  .hero { min-height: 0; }
  /* Le bloc expertises cassait la lecture une fois empilé. */
  .hero__expertise { display: none; }
  .hero__row { display: block; }
  .hero__title    { order: 1; }
  .hero-media     { order: 2; }
  .hero__row      { order: 3; }
}
@media (max-width: 620px) {
  .hero-media { grid-template-columns: 1fr 1fr; }
  .hero-media img:nth-child(1) { grid-column: 1 / -1; }
}

/* ── Boutons ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 56px;
  padding-inline: 30px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    transform  var(--dur) var(--ease),
    color      var(--dur) var(--ease);
}
.btn__arrow { font-size: 18px; }

.btn--solid {
  background: var(--cta-bg);
  color: var(--cta-fg);
}
/* Hover franc : le bouton se soulève et projette une ombre. */
.btn--solid:hover {
  background: var(--cta-bg-hover);
  color: var(--cta-fg);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px var(--cta-shadow);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover {
  background: var(--ghost-bg-hover);
  border-color: var(--ink);
  transform: translateY(-2px);
}

.btn--sm { min-height: 46px; padding-inline: 22px; font-size: var(--step-0); }
.btn--sm:hover { transform: translateY(-1px); }
.btn--sm .btn__arrow { font-size: 17px; }

.btn--block { width: 100%; }

/* Lien souligné avec flèche — zone de survol lisible, pas juste la couleur */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 12px;
  margin-inline: -12px;
  font-size: var(--step-1);
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.link-arrow:hover {
  color: var(--ink);
  background: var(--row-hover);
  border-bottom-color: var(--ink);
}
.link-arrow--ink { color: var(--ink); }
.link-arrow--ink:hover { color: var(--accent); }
.surface-2 .link-arrow:hover { background: color-mix(in srgb, var(--ink) 8%, var(--surface-2)); }

/* ── Ligne de service (les 4 chantiers) ────────────────────
   Survol franc : fond + glissement latéral. Le padding évite
   que le fond vienne coller au texte. */
.service-row {
  padding-inline: clamp(0px, 1.4vw, 20px);
  border-top: 1px solid var(--line-2);
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.service-row:last-of-type { border-bottom: 1px solid var(--line-2); }
.service-row:hover { background: var(--row-hover); }

/* ── Carte réalisation ─────────────────────────────────────── */
.case-card {
  display: block;
  color: inherit;
  transition: transform .4s var(--ease);
}
.case-card:hover { transform: translateY(-10px); }

/* Pastille d'ancre */
.chip {
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 14px;
  transition: background var(--dur-fast) var(--ease);
}
.chip:hover { background: var(--ghost-bg-hover); }

/* Rangée de pastilles (héros de /services). Le padding du bas n'est
   pas décoratif : la rangée est le second membre d'une grille
   `items-end` dans une section `--flush-bottom`, donc sa bordure
   arrivait exactement sur le filet de la section suivante — deux
   traits d'un pixel collés.

   Pourquoi ici, et à toutes les largeurs. Le correctif existait avant
   sur `.section--flush-bottom`, sous 900px : il touchait les six pages
   qui portent la classe pour n'en corriger qu'une, et ne couvrait pas
   le desktop, où les quatre pastilles tiennent sur une seule ligne et
   descendent donc encore plus bas.

   Les autres pages n'en avaient pas besoin : ce qui précède leur filet
   est du texte, dont les descendantes et l'interligne donnent déjà
   l'air — la preuve, elles sont à ras en desktop depuis toujours. Une
   pastille bordée, elle, n'a aucun blanc propre. C'est donc la rangée
   qui doit porter son écart, pas la section. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--s-5);
}

/* Étiquette non cliquable */
.tag {
  padding: 8px var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
}
.tags { display: flex; flex-wrap: wrap; gap: 10px; }

/* Une étiquette de cas client peut être un lien vers le service employé.
   `a` hérite déjà de la couleur et n'a pas de soulignement (base.css) :
   au repos, rien ne change. Seul le survol signale que c'est cliquable. */
a.tag {
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
a.tag:hover { border-color: var(--ink); color: var(--ink); }

/* Trio de chiffres sous un cas client */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-2);
}
.stat-row p:first-child {
  margin: 0;
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.stat-row p:last-child { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

/* En colonne étroite, trois chiffres côte à côte forcent des libellés
   sur cinq lignes. On repasse en lignes : nombre à gauche, libellé à droite. */
@media (max-width: 620px) {
  .stat-row { grid-template-columns: 1fr; gap: 0; }
  .stat-row > div {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-4); padding-block: var(--s-3);
  }
  .stat-row > div + div { border-top: 1px solid var(--line); }
  .stat-row p:first-child { font-size: 26px; }
  .stat-row p:last-child  { margin: 0; text-align: right; max-width: 60%; }
}

/* ── Listes réglées ────────────────────────────────────── */

.rule-list { display: flex; flex-direction: column; }
.rule-list > * {
  padding-block: var(--s-3);
  border-top: 1px solid var(--line-2);
  margin: 0;
}
.rule-list > *:last-child { border-bottom: 1px solid var(--line-2); }

.rule-list--split > * {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}

/* Étapes numérotées */
.steps { display: flex; flex-direction: column; }
.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line-2);
}
.step:last-child { border-bottom: 1px solid var(--line-2); }
.step__body p { margin: var(--s-2) 0 0; }

/* Étape détaillée : repère / titre / contenu */
.method-step {
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  padding-block: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line-2);
  align-items: start;
}
.method-step:last-child { border-bottom: 1px solid var(--line-2); }

/* Question / réponse */
.qa {
  padding-block: var(--s-5);
  border-top: 1px solid var(--line-2);
}
.qa:last-child { border-bottom: 1px solid var(--line-2); }
/* Empilées, la dernière Q/R d'une colonne et la première de la suivante
   cumulaient un border-bottom et un border-top. */
@media (max-width: 900px) {
  .stack + .stack .qa:first-child { border-top: none; }
  .stack:not(:last-child) .qa:last-child { border-bottom: none; }
}
.qa h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; line-height: var(--lh-snug); }
.qa p  { margin: 10px 0 0; }
.qa--lg h3 { font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; }

/* Accordéon de FAQ — <details> natif, aucun JS. */
.faq-item { padding-block: var(--s-4); border-top: 1px solid var(--line-2); }
.faq-item:last-child { border-bottom: 1px solid var(--line-2); }
.faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-height: 44px; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 500; letter-spacing: -0.01em; line-height: var(--lh-snug);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item__sign {
  flex: none; font-size: 22px; line-height: 1; color: var(--accent);
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] .faq-item__sign { transform: rotate(45deg); }
.faq-item > p { margin: var(--s-3) 0 0; max-width: 66ch; }
@media (prefers-reduced-motion: reduce) { .faq-item__sign { transition: none; } }

/* ── Cartes ────────────────────────────────────────────── */

.card {
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  padding: var(--pad-card);
}
.card--invert {
  background: var(--tk-black);
  border-color: var(--tk-black);
  color: var(--tk-cream);
}

/* Une carte sombre isolée dans une page claire doit basculer ses
   propres tokens, sinon son texte secondaire reste illisible. */
.card--invert {
  --ink: var(--tk-cream);
  --muted: var(--tk-on-dark-2);
  --faint: var(--tk-on-dark-3);
  --accent: var(--tk-brand-dim);
  --line-2: rgba(244, 242, 238, .20);
  --line-strong: rgba(244, 242, 238, .32);
  --cta-bg: var(--tk-cream);
  --cta-fg: var(--tk-black);
  --cta-bg-hover: var(--tk-cream-3);
}

.pricing-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  padding: var(--pad-card);
}
.pricing-card__price {
  margin: var(--s-5) 0 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.pricing-card__note { margin: var(--s-2) 0 0; font-size: var(--step--1); color: var(--faint); }
.pricing-card .btn,
.pricing-card .btn--ghost { margin-top: auto; }
.pricing-card__cta { margin-top: var(--s-5); min-height: 52px; }

/* ── Bandeau défilant ──────────────────────────────────── */

@keyframes tk-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: tk-marquee 34s linear infinite;
  padding-block: 6px var(--s-5);
}
.marquee__group {
  display: flex;
  gap: 60px;
  padding-right: 60px;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ── Média ─────────────────────────────────────────────── */

.media { display: block; width: 100%; object-fit: cover; }
.media--tile   { height: clamp(190px, 20vw, 260px); filter: saturate(0.9); }
.media--case   { height: clamp(220px, 24vw, 330px); }
.media--person { height: clamp(240px, 26vw, 340px); filter: grayscale(1) contrast(1.05); }


/* ── Pied de page ──────────────────────────────────────── */

.site-footer { background: var(--tk-black); color: var(--tk-cream); }

.site-footer__top {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: var(--gap-col);
  align-items: start;
}

.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); font-size: var(--step-0); }
.footer-nav__col { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-nav__title {
  margin: 0 0 var(--s-2);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.footer-nav a {
  color: var(--link-muted);
  transition: color var(--dur-fast) var(--ease);
}
.footer-nav a:hover { color: var(--ink); }

.site-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-5);
  align-items: center;
  margin-top: clamp(44px, 6vw, 80px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--faint);
}
.site-footer__sig { letter-spacing: 0.2em; text-transform: uppercase; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* Instagram — seul réseau de la marque à ce jour. `currentColor` fait
   suivre à l'icône la couleur des liens voisins, donc l'inversion des
   tokens sous `data-surface="dark"` : rien à redéclarer pour le footer. */
.social-link {
  display: inline-flex;
  align-items: center;
  color: var(--link-muted);
  transition: color var(--dur-fast) var(--ease);
}
.social-link:hover { color: var(--ink); }

/* Variante en colonne de navigation : l'icône reprend la taille et la
   ligne de base des liens voisins, et gagne un libellé — dans une liste
   de liens nommés, un pictogramme seul ne se lit pas. */
.social-link--nav {
  gap: 10px;
  color: var(--link-muted);
  font-size: var(--step-0);
}
.social-link--nav svg { width: 16px; height: 16px; }

.social-link svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Page contact ──────────────────────────────────────────
   L'image comble la hauteur restante sous le tableau d'infos
   sans jamais allonger la ligne : c'est le formulaire qui
   dicte la hauteur. D'où `min-height:0` + image en absolu. */

.contact-row { align-items: stretch; }
.contact-col { display: flex; flex-direction: column; }

.contact-fill {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  margin-top: clamp(24px, 3vw, 36px);
}
.contact-fill img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

@media (max-width: 900px) {
  .contact-fill { flex: 0 0 auto; height: 230px; }
}

/* ── Formulaires ───────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > span { font-size: 14px; color: var(--muted); }
.field input,
.field textarea,
.field select {
  font-family: inherit;
  font-size: var(--step-1);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 0;
}
.field input,
.field select { min-height: 50px; padding-inline: 14px; }
.field textarea { padding: 14px; resize: vertical; line-height: 1.5; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-color: var(--ink); }
::placeholder { color: var(--placeholder); }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

.checkgroup { display: flex; flex-wrap: wrap; gap: 10px; }
.checkgroup label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px var(--s-4);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  font-size: 14px;
  cursor: pointer;
}
.checkgroup input { accent-color: var(--ink); }

.form-error {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--danger-soft);
  border-left: 2px solid var(--danger);
  color: var(--danger);
  font-size: var(--step-0);
  line-height: 1.5;
}

/* ── Blocs de service ──────────────────────────────────── */

/* Mosaïque d'illustrations d'un bloc service */
.mosaic { display: grid; gap: 2px; align-content: start; }
.mosaic__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mosaic__lead { height: clamp(220px, 26vw, 360px); }
.mosaic__sub  { height: clamp(150px, 16vw, 220px); }
.mosaic__tall { height: clamp(240px, 30vw, 420px); }

.aside-note {
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  padding: var(--s-5);
  margin-top: var(--s-5);
}
[data-surface="dark"] .aside-note { background: transparent; border-color: var(--line-2); }

.price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.price-line__amount { font-weight: 700; font-size: 22px; }

/* ── Pages légales ─────────────────────────────────────── */

.prose { max-width: 68ch; }
.prose h2 {
  margin-top: var(--s-8);
  font-size: var(--step-4);
  line-height: 1.15;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin-top: var(--s-6);
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.prose p,
.prose ul { margin: var(--s-4) 0 0; color: var(--muted); line-height: var(--lh-body); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-top: var(--s-2); }
.prose a { border-bottom: 1px solid var(--line-strong); }
.prose a:hover { color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 500; }
.prose dl { margin: var(--s-4) 0 0; }
.prose dt {
  margin-top: var(--s-4);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--faint);
}
.prose dd { margin: var(--s-2) 0 0; }

/* ── Équipe ────────────────────────────────────────────────
   Desktop : 3 fiches photo. Mobile : un seul bloc trio, pour
   ne pas dérouler 200vh sur une section de teasing alors que
   la page Agence existe juste à côté. */

.team-compact { display: none; }

@media (max-width: 860px) {
  .team-grid    { display: none; }
  .team-compact { display: block; }
}

.team-compact__photo {
  display: block;
  width: 100%;
  height: min(58vw, 320px);
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.team-compact__names {
  margin: var(--s-5) 0 0;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Chiffres clés ─────────────────────────────────────── */

.kpi p:first-child {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.kpi p:last-child { margin: var(--s-2) 0 0; font-size: 14px; color: var(--muted); }

/* ── Responsive ────────────────────────────────────────────
   Rupture unique à 900px pour les grilles, 1040px pour la nav
   (comportement conservé — le menu mobile arrive au lot 2). */

@media (max-width: 1040px) {
  .nav, .nav-offer { display: none; }
  .js .nav-toggle  { display: inline-flex; }
}

@media (max-width: 420px) {
  /* Sur les très petits écrans, le CTA de l'en-tête cède la place
     au menu : le même bouton est en tête du panneau. */
  .site-header .header-actions > .btn { display: none; }
}

@media (max-width: 980px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .grid-2,
  .grid-2--wide-start,
  .grid-2--wide-end,
  .grid-2--narrow-end,
  .grid-2--aside,
  .grid-2--intro,
  .site-footer__top,
  .site-footer__bottom,
  .fields { grid-template-columns: 1fr; }
  .swap { order: -1; }
  .site-footer__bottom { justify-items: start; }

  /* L'alternance image/texte n'a plus de sens une fois empilé :
     l'image passe systématiquement en premier sur les 4 chantiers. */
  .service-row .media { order: -1; }
}

@media (max-width: 900px) {
  .method-step { grid-template-columns: 1fr; gap: var(--s-4); }
}

@media (max-width: 620px) {
  .grid-4 { grid-template-columns: 1fr; }

  /* Exception : les chiffres clés restent en 2 × 2. Empilés, quatre
     nombres occupent un écran entier et perdent l'effet de tableau —
     c'est justement leur seul intérêt. */
  .grid-4.kpi { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); row-gap: var(--s-6); }

  .step { grid-template-columns: 40px 1fr; gap: var(--s-4); }
  .mosaic__pair { grid-template-columns: 1fr; }
}

/* ── Section « Avis Google » ────────────────────────────────
   Reprend le gabarit de l'ancienne section témoignages : surface
   sombre, sur-titre, titre en vis-à-vis d'un résumé, puis des
   cartes séparées par des filets de 1px. Les couleurs viennent
   toutes de l'inversion de tokens de `[data-surface="dark"]` :
   aucune valeur littérale, le bloc fonctionne aussi sur fond clair.
   Contenu injecté par assets/js/reviews.js. */

.gr-head {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--gap-col);
  align-items: end;
  margin-top: clamp(20px, 3vw, 32px);
}
.gr-body { margin-top: clamp(40px, 5vw, 72px); }

.gr-lede { margin: 0; font-size: var(--step-2); line-height: var(--lh-body); color: var(--link-muted); }

.gr-score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-4) 0 0;
  font-size: var(--step-0);
  color: var(--muted);
}
.gr-avg   { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.gr-count { color: var(--faint); }
.gr-link {
  display: inline-block;
  margin-top: var(--s-3);
  font-size: var(--step-0);
  color: var(--link-muted);
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur-fast) var(--ease);
}
.gr-link:hover { color: var(--ink); }

/* Étoiles décoratives : la note est portée par l'aria-label du
   conteneur (voir reviews.js), pas par les glyphes. */
.gr-stars {
  display: inline-flex;
  gap: 3px;
  font-size: var(--step-0);
  line-height: 1;
  color: var(--accent);
}
.gr-stars .is-off { color: var(--line-strong); }

.gr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.gr-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin: 0;
  padding: var(--pad-card);
  background: var(--bg);
}
/* Même échelle que les citations de témoignage de l'accueil.
   Le plafond de lignes est un garde-fou pour un avis très long :
   il ne se déclenche sur aucun des avis actuels. */
.gr-quote {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
}
.gr-who {
  margin: auto 0 0;
  font-size: 14px;
  color: var(--muted);
}
.gr-name { color: var(--ink); }
.gr-who a { border-bottom: 1px solid var(--line-2); }
.gr-when { color: var(--faint); }

@media (max-width: 860px) {
  .gr-head { grid-template-columns: 1fr; align-items: start; gap: var(--s-5); }
}