/* ═══════════════════════════════════════════════════════════════════════════
   TEMPLATE « VITRINE » — feuille de style unique et FIGÉE
   ═══════════════════════════════════════════════════════════════════════════

   Ce fichier n'est JAMAIS écrit par l'IA, ni réécrit à la génération. Il est
   copié tel quel dans chaque site livré. C'est ce qui garantit qu'aucun site
   client ne peut arriver avec une mise en page cassée : le seul contenu qui
   varie est le texte, les photos et les huit couleurs de `palette.css`.

   Toutes les couleurs viennent de variables définies dans `palette.css`, qui
   est chargé JUSTE AVANT celui-ci. Aucune valeur hexadécimale de marque ne
   doit apparaître ici — sinon le changement de palette ne repeindrait qu'une
   partie de la page, ce qui est pire que pas de changement du tout.

   Les rares couleurs en dur autorisées sont celles qui n'appartiennent pas au
   client : le bleu et le jaune de Google, l'ambre du focus clavier.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --white: #fffefa;
  /* Repli : `palette.css` les redéfinit toutes. Si ce fichier manquait, le
     site resterait lisible en gris plutôt que de s'afficher sans couleurs. */
  --ink: #23282e;
  --ink-deep: #14181d;
  --moss: #4a5560;
  --leaf: #7f8e9d;
  --sage: #e0e5ea;
  --cream: #f5f6f8;
  --sand: #e6e9ed;
  --glow: #cdd7e0;
  --line: rgba(35, 40, 46, 0.16);
  --monogramme: "";
}

/* Teintes dérivées : elles suivent la palette sans qu'on ait à les déclarer
   cinq fois. `color-mix` évite d'écrire un rgba() par palette. */
:root {
  --ink-90: color-mix(in srgb, var(--ink) 90%, transparent);
  --ink-76: color-mix(in srgb, var(--ink) 76%, transparent);
  --ink-64: color-mix(in srgb, var(--ink) 64%, transparent);
  --ink-30: color-mix(in srgb, var(--ink) 30%, transparent);
  --ink-14: color-mix(in srgb, var(--ink) 14%, transparent);
  --paper-92: color-mix(in srgb, var(--cream) 92%, transparent);
  --paper-78: color-mix(in srgb, var(--cream) 78%, transparent);
  --white-76: color-mix(in srgb, var(--white) 76%, transparent);
  --white-55: color-mix(in srgb, var(--white) 55%, transparent);
  --white-17: color-mix(in srgb, var(--white) 17%, transparent);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 118px; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button { cursor: pointer; }
img { max-width: 100%; }

h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.045em; }
h1 { max-width: 650px; font-size: clamp(3.1rem, 6vw, 5.6rem); line-height: 1.02; margin-bottom: 29px; }
h1 em, h2 em { color: var(--moss); font-style: italic; }

.page-noise {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .2; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}
.ambient { position: fixed; border-radius: 50%; pointer-events: none; z-index: -1; }
.ambient-one { width: 38vw; height: 38vw; top: 3vh; right: -18vw; background: color-mix(in srgb, var(--leaf) 22%, transparent); }
.ambient-two { width: 26vw; height: 26vw; left: -18vw; top: 64vh; background: color-mix(in srgb, var(--sage) 60%, transparent); }

.section-shell { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.eyebrow, .section-label { margin: 0; text-transform: uppercase; font-size: .75rem; letter-spacing: .18em; font-weight: 700; color: var(--ink-64); }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 25px; }
.eyebrow span { width: 24px; height: 1px; display: block; flex: none; background: var(--leaf); }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.site-header {
  width: min(1380px, calc(100% - 40px)); min-height: 120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 15; transition: min-height .25s ease;
  padding-top: env(safe-area-inset-top, 0px);
}
.site-header::before {
  content: ""; position: absolute; z-index: -1; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--paper-78); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease;
}
.site-header.scrolled { min-height: 92px; }
.site-header.scrolled::before { background: var(--paper-92); border-color: var(--ink-14); }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.brand img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.brand-copy { display: grid; gap: 1px; min-width: 0; }
.brand-copy strong, .brand-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy strong { font-size: 1rem; letter-spacing: -.02em; font-weight: 700; text-transform: uppercase; }
.brand-copy small { font-size: .75rem; color: var(--ink-64); letter-spacing: .11em; text-transform: uppercase; }
/* Le pied de page a toute la largeur : rien n'y justifie de couper un mot. */
.site-footer .brand-copy strong, .site-footer .brand-copy small { white-space: normal; }

/* Monogramme : remplace le logo quand le client n'en a pas encore envoyé. */
.brand-mono {
  width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--cream); font-family: var(--display); font-size: 1.05rem; letter-spacing: .02em;
}

.desktop-nav { display: flex; align-items: center; gap: 34px; margin-left: auto; margin-right: 47px; }
.desktop-nav a { font-size: .875rem; color: var(--ink-76); position: relative; }
.desktop-nav a::after { position: absolute; content: ""; width: 0; height: 1px; bottom: -7px; left: 0; background: var(--ink); transition: width .25s ease; }
.desktop-nav a:hover::after { width: 100%; }
.header-cta {
  height: 46px; padding: 0 17px 0 18px; border: 1px solid var(--ink); border-radius: 999px;
  display: flex; align-items: center; gap: 11px; font-size: .875rem; font-weight: 700; flex: none; transition: .25s ease;
}
.header-cta svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.header-cta:hover { color: var(--white); background: var(--ink); transform: translateY(-2px); }
.menu-button, .mobile-nav { display: none; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { min-height: 620px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(400px, .85fr); gap: 5vw; align-items: center; padding: 59px 0 100px; }
.hero > * { min-width: 0; }
.hero-text { color: var(--ink-76); max-width: 460px; line-height: 1.65; font-size: 1rem; margin-bottom: 32px; }
.hero-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 24px; border-radius: 999px;
  min-height: 52px; padding: 0 22px 0 26px; font-size: .875rem; font-weight: 700;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
.button-primary { background: var(--ink); color: var(--white); }
.button-primary:hover { background: var(--moss); transform: translateY(-3px); }
.button-light { background: var(--white); color: var(--ink); }
.button-light:hover { background: var(--sage); transform: translateY(-3px); }
.text-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 0; font-size: .875rem; font-weight: 600; border-bottom: 1px solid var(--ink-30); transition: border-color .2s ease; }
.text-link:hover { border-color: var(--ink); }
.icon-arrow { width: 20px; height: 20px; display: block; flex: 0 0 auto; color: currentColor; }

.hero-proof { display: flex; align-items: center; gap: 13px; margin-top: 48px; flex-wrap: wrap; }
.rating-mark { min-width: 64px; padding-right: 13px; border-right: 1px solid var(--line); display: grid; line-height: 1; gap: 6px; }
.rating-mark strong { font-family: var(--display); font-weight: 400; font-size: 26px; }
.hero-proof p { margin: 0; color: var(--ink-64); font-size: .875rem; line-height: 1.55; }
.hero-proof p strong { color: var(--ink); }

.hero-visual { position: relative; height: 510px; max-width: 482px; justify-self: end; width: 100%; }
.hero-frame { position: absolute; z-index: 1; inset: 0 0 16px 34px; overflow: hidden; border-radius: 240px 240px 10px 10px; background: var(--sage); }
.hero-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--ink-deep) 26%, transparent)); }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.9) contrast(1.03); transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.hero-visual:hover .hero-frame img { transform: scale(1.04); }
.hero-outline { position: absolute; z-index: 0; inset: 26px 25px 0 0; border: 1px solid var(--ink-30); border-radius: 240px 240px 10px 10px; }
.hero-stamp {
  position: absolute; z-index: 2; bottom: 45px; left: 0; background: var(--white); padding: 13px 16px;
  display: flex; align-items: center; gap: 9px; font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; box-shadow: 0 11px 25px color-mix(in srgb, var(--ink) 14%, transparent);
}
.hero-stamp i { width: 12px; height: 1px; background: var(--leaf); flex: none; }
.hero-tag {
  position: absolute; z-index: 2; right: -26px; top: 78px; padding: 11px 14px; border-radius: 999px;
  background: var(--paper-92); backdrop-filter: blur(7px); display: flex; gap: 8px; align-items: center;
  font-size: .75rem; box-shadow: 0 9px 30px color-mix(in srgb, var(--ink) 14%, transparent);
}
.tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px color-mix(in srgb, var(--leaf) 22%, transparent); flex: none; }

/* ── Visuel de remplacement ──────────────────────────────────────────────────
   Aucune photo de banque d'images : un client ne doit jamais voir le chantier
   de quelqu'un d'autre présenté comme le sien. À la place, une composition
   géométrique aux couleurs de sa palette, signée « vos photos ». Elle est
   belle, elle ne ment pas, et elle donne envie d'envoyer de vraies photos. */
.visual-placeholder {
  position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, color-mix(in srgb, var(--leaf) 30%, transparent), transparent 62%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 2px, transparent 2px 13px),
    var(--sage);
}
.visual-placeholder svg { width: 38%; max-width: 130px; height: auto; fill: none; stroke: var(--ink-30); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.visual-placeholder span {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; background: var(--white); color: var(--ink-64);
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
/* En fond de carte ou de panneau, la composition s'efface derrière le texte :
   sa mention « vos photos » se retrouverait sous un aplat sombre, à moitié
   lisible, et le motif ne doit pas concurrencer le titre posé dessus. */
.service-photo .visual-placeholder span, .contact-photo .visual-placeholder span { display: none; }
/* Dans le hero, le bas est déjà occupé par le cartouche du métier. */
.hero-frame .visual-placeholder span { bottom: auto; top: 24px; }
.service-photo .visual-placeholder svg, .contact-photo .visual-placeholder svg { width: 26%; opacity: .5; }

/* ── Bandeau défilant ────────────────────────────────────────────────────── */
.service-ticker { padding: 18px 0; overflow: hidden; contain: paint; background: var(--ink); color: var(--cream); white-space: nowrap; }
.ticker-track { display: inline-flex; gap: 29px; align-items: center; min-width: max-content; animation: ticker 34s linear infinite; }
.ticker-track span { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.ticker-spark { width: 11px; height: 11px; display: block; flex: 0 0 auto; background: var(--leaf); clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%); }

.section-bridge { width: min(700px, calc(100% - 64px)); min-height: 95px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 17px; color: var(--ink-64); text-align: center; }
.section-bridge span { display: block; width: 32px; height: 1px; flex: 0 0 auto; background: var(--leaf); }
.section-bridge p { margin: 0; max-width: 455px; font-size: 1rem; line-height: 1.5; letter-spacing: .02em; }

/* ── Services ────────────────────────────────────────────────────────────── */
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 52px; }
.section-heading h2 { font-size: clamp(2.4rem, 4.2vw, 4.2rem); line-height: 1.05; margin: 17px 0 0; }
.section-heading > p { max-width: 300px; margin: 0 8px 2px 0; color: var(--ink-76); line-height: 1.6; font-size: 1rem; }

.services { padding-bottom: 130px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.service-grid > * { min-width: 0; }
.service-card { position: relative; min-height: 430px; padding: 28px; border: 1px solid var(--line); background: color-mix(in srgb, var(--white) 45%, transparent); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s ease, box-shadow .35s ease; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 18px 36px color-mix(in srgb, var(--ink) 12%, transparent); }
.service-number { font-size: .75rem; letter-spacing: .15em; color: var(--ink-64); }
.service-icon { width: 56px; height: 56px; margin: auto 0 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sage); }
.service-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.service-card h3 { font-family: var(--display); letter-spacing: -.035em; font-size: clamp(1.8rem, 2.4vw, 2.2rem); line-height: 1.08; font-weight: 400; margin: 0 0 16px; }
.service-card p { color: var(--ink-76); font-size: 1rem; line-height: 1.55; margin-bottom: 26px; }
.service-card a { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: .875rem; font-weight: 700; padding-top: 13px; border-top: 1px solid var(--line); margin-top: auto; }
.service-card a .icon-arrow { transition: transform .25s ease; }
.service-card a:hover .icon-arrow { transform: translate(2px, -2px); }
.service-card-featured { color: var(--white); border: 0; background: var(--ink); padding: 0; min-height: 500px; }
.service-photo { position: absolute; inset: 0; }
.service-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.78) brightness(.7); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.service-card-featured:hover .service-photo img { transform: scale(1.06); }
.service-card-overlay { position: relative; z-index: 1; min-height: 100%; flex: 1; display: flex; flex-direction: column; padding: 28px; background: linear-gradient(180deg, color-mix(in srgb, var(--ink-deep) 12%, transparent), color-mix(in srgb, var(--ink-deep) 86%, transparent)); }
.service-card-featured .service-icon { background: var(--white-17); border: 1px solid var(--white-17); }
.service-card-featured .service-number, .service-card-featured p { color: var(--white-76); }
.service-card-featured a { border-color: var(--white-17); }

/* ── Signature ───────────────────────────────────────────────────────────── */
.signature { min-height: 276px; background: var(--sage); display: grid; grid-template-columns: 150px minmax(0,1.2fr) minmax(260px,.8fr); align-items: center; padding: 50px 70px; gap: 45px; position: relative; overflow: hidden; }
.signature::after { content: var(--monogramme); position: absolute; font-family: var(--display); font-size: 290px; font-style: italic; right: 30px; bottom: -105px; color: color-mix(in srgb, var(--white) 55%, transparent); pointer-events: none; line-height: 1; }
.signature-logo { width: 116px; height: 116px; display: grid; place-items: center; border-radius: 50%; background: var(--white-55); }
.signature-logo img { width: 86px; height: 86px; object-fit: contain; }
.signature-logo span { font-family: var(--display); font-size: 2.4rem; color: var(--ink); }
.signature-copy, .signature-points { position: relative; z-index: 1; }
.signature-copy .section-label { margin-bottom: 13px; }
.signature-quote { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.15; letter-spacing: -.03em; margin: 0; max-width: 515px; }
.signature-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-30); }
.signature-points li { border-bottom: 1px solid var(--ink-30); padding: 12px 0; font-size: .875rem; font-weight: 600; }
.signature-points span { color: var(--ink-64); font-size: .75rem; margin-right: 13px; }

/* ── Réalisations ────────────────────────────────────────────────────────── */
.projects { padding: 130px 0; }
.round-link { width: 106px; height: 106px; flex: none; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 8px; justify-items: center; transition: background .3s ease, color .3s ease; }
.round-link span { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.round-link:hover { background: var(--ink); color: var(--white); }
.project-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 25px; align-items: end; }
.project-grid > * { min-width: 0; }
.project-main, .project-secondary { margin: 0; }
.project-image { position: relative; overflow: hidden; border: 0; padding: 0; background: var(--sage); width: 100%; display: block; }
.project-main .project-image { height: 530px; }
.project-secondary .project-image { height: 368px; }
.project-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .75s cubic-bezier(.2,.8,.2,1); }
.project-image:hover img { transform: scale(1.055); }
.zoom-symbol { width: 43px; height: 43px; position: absolute; right: 16px; top: 16px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--white); transform: translateY(-10px); opacity: 0; transition: .3s ease; }
.zoom-symbol .icon-arrow { width: 22px; height: 22px; }
.project-image:hover .zoom-symbol, .project-image:focus-visible .zoom-symbol { opacity: 1; transform: translateY(0); }
figcaption { display: grid; gap: 5px; padding: 17px 0 0; }
figcaption strong { font-family: var(--display); letter-spacing: -.025em; font-weight: 400; font-size: 1.5rem; }
figcaption span { font-size: .875rem; color: var(--ink-64); }

/* ── Avant / après ───────────────────────────────────────────────────────────
   Curseur tiré à la souris, au doigt ou au clavier. Les deux images sont
   superposées ; seule la largeur du calque « après » change. */
.ba-wrap { margin: 0; }
.ba {
  position: relative; width: 100%; height: 520px; overflow: hidden; background: var(--sand);
  touch-action: pan-y; user-select: none; cursor: ew-resize;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-after { clip-path: inset(0 0 0 var(--ba-pos, 50%)); }
.ba-label {
  position: absolute; top: 16px; z-index: 3; padding: 7px 13px; border-radius: 999px; pointer-events: none;
  background: var(--paper-92); color: var(--ink); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ba-label-before { left: 16px; }
.ba-label-after { right: 16px; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%); width: 2px; z-index: 4;
  background: var(--white); transform: translateX(-1px); box-shadow: 0 0 18px color-mix(in srgb, var(--ink-deep) 45%, transparent);
}
.ba-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--white); box-shadow: 0 6px 20px color-mix(in srgb, var(--ink-deep) 35%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 4 12l5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");
  background-size: 22px; background-repeat: no-repeat; background-position: center;
}
.ba-range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; }
.ba-range:focus-visible + .ba-handle { outline: 3px solid #c38418; outline-offset: 3px; }

/* ── Avis ────────────────────────────────────────────────────────────────── */
.review-section { background: var(--ink-deep); color: var(--white); padding: 120px 0; position: relative; overflow: hidden; }
.review-section::before { content: ""; position: absolute; width: 700px; height: 700px; left: -270px; top: -380px; border: 1px solid var(--white-17); border-radius: 50%; box-shadow: 0 0 0 82px color-mix(in srgb, var(--white) 4%, transparent); }
.review-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; position: relative; }
.review-inner > * { min-width: 0; }
.review-heading h2 { font-size: clamp(2.6rem, 4.4vw, 4.3rem); line-height: 1.05; margin: 19px 0 40px; }
.review-heading .section-label { color: var(--white-55); }
.review-heading h2 em { color: var(--glow); }
.google-rating { display: flex; gap: 10px; align-items: center; }
.google-g { font-family: Arial, sans-serif; font-weight: 700; font-size: 30px; color: #fff; position: relative; flex: none; }
.google-g::after { content: ""; width: 9px; height: 9px; border-top: 3px solid #4285f4; border-right: 3px solid #4285f4; position: absolute; right: -1px; top: 12px; }
.google-rating div { display: grid; gap: 3px; }
.google-rating strong { font-size: .875rem; letter-spacing: .02em; }
.google-rating small { color: var(--white-55); font-size: .75rem; }
.google-rating a { text-decoration: underline; text-underline-offset: 4px; }
.review-list { display: grid; gap: 14px; padding-top: 9px; }
.review-card { min-height: 140px; border: 1px solid var(--white-17); padding: 26px 29px; display: grid; gap: 18px; align-content: center; transition: background .3s ease, transform .3s ease; }
.review-card:hover { background: color-mix(in srgb, var(--white) 6%, transparent); transform: translateX(6px); }
.review-card blockquote { margin: 0; font-family: var(--display); font-size: 1.3rem; line-height: 1.4; letter-spacing: -.02em; }
.review-card footer { display: grid; gap: 4px; }
.review-card footer strong { font-size: .875rem; }
.review-card footer span { font-size: .75rem; line-height: 1.3; color: var(--white-55); }
.stars { display: inline-flex; gap: 3px; color: #efc45d; }
.stars i { width: 11px; height: 11px; display: block; background: currentColor; clip-path: polygon(50% 0, 61% 34%, 98% 38%, 69% 60%, 79% 96%, 50% 76%, 21% 96%, 31% 60%, 2% 38%, 39% 34%); }
/* Carte d'attente : le site est neuf, il n'a pas encore d'avis. On le dit. */
.review-card-vide { border-style: dashed; }
.review-card-vide blockquote { color: var(--white-55); font-style: italic; }

/* ── Zones d'intervention ────────────────────────────────────────────────── */
.zones { padding-top: 95px; }
.zone-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.zone-card { padding: 28px; border-top: 2px solid var(--moss); background: color-mix(in srgb, var(--white) 60%, transparent); }
.zone-card h3 { font: 400 1.6rem/1.15 var(--display); margin-bottom: 10px; }
.zone-card p, .zone-note { font-size: 1rem; line-height: 1.7; color: var(--ink-76); }
.zone-note { margin: 26px 0 0; }
.zone-note a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* ── Horaires ────────────────────────────────────────────────────────────── */
.hours { padding: 110px 0 0; }
.hours-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.hours-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hours-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 15px 2px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.hours-list li.is-today { font-weight: 700; background: color-mix(in srgb, var(--sage) 55%, transparent); margin-inline: -12px; padding-inline: 12px; }
.hours-day { color: var(--ink-90); }
.hours-time { color: var(--ink-64); font-variant-numeric: tabular-nums; }
.hours-list li.is-closed .hours-time { color: var(--ink-64); font-style: italic; }
.hours-state { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 10px 16px; border-radius: 999px; background: var(--sage); font-size: .875rem; font-weight: 700; }
.hours-state .tag-dot { background: var(--moss); box-shadow: 0 0 0 4px color-mix(in srgb, var(--moss) 20%, transparent); }
.hours-note { font-size: 1rem; line-height: 1.7; color: var(--ink-76); }

/* ── Contact & carte ─────────────────────────────────────────────────────── */
.contact { padding: 130px 0; }
.contact-panel { min-height: 460px; position: relative; overflow: hidden; background: var(--moss); color: var(--white); display: grid; grid-template-columns: .8fr 1.2fr; }
.contact-panel > * { min-width: 0; }
.contact-photo { overflow: hidden; }
.contact-photo img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.6) brightness(.75); }
.contact-content { position: relative; z-index: 2; padding: 70px 6vw 40px 70px; }
.contact .section-label { color: var(--white-55); margin-bottom: 20px; }
.contact h2 { color: var(--white); font-size: clamp(2.3rem, 4vw, 4rem); line-height: 1.05; margin-bottom: 19px; }
.contact h2 em { color: var(--glow); }
.contact-content > p:not(.section-label) { max-width: 420px; color: var(--white-76); font-size: 1rem; line-height: 1.6; margin-bottom: 27px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.contact-number { position: absolute; z-index: 2; right: 36px; bottom: 23px; display: flex; gap: 7px; color: var(--white-55); font-size: .75rem; letter-spacing: .13em; }
.map-frame { margin-top: 25px; border: 1px solid var(--line); background: var(--sand); height: 380px; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.85); }

/* ── Pied de page ────────────────────────────────────────────────────────── */
.site-footer { min-height: 120px; padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 22px; margin-top: 90px; }
.site-footer p, .site-footer > a:not(.brand) { margin: 0; font-size: .875rem; color: var(--ink-64); }
.site-footer > a:not(.brand) { font-weight: 700; color: var(--ink); }

/* ── Bouton d'appel flottant (mobile) ────────────────────────────────────── */
.call-fab { display: none; }

/* ── Agrandissement d'image ──────────────────────────────────────────────── */
.lightbox { position: fixed; z-index: 30; inset: 0; border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; padding: 40px; background: transparent; color: var(--white); place-items: center; }
.lightbox::backdrop { background: color-mix(in srgb, var(--ink-deep) 92%, transparent); }
.lightbox:not([open]) { display: none; }
.lightbox[open] { display: grid; }
.lightbox img { display: block; width: auto; height: auto; max-width: min(100%, 900px); max-height: 85vh; object-fit: contain; }
.lightbox-close { position: absolute; top: 23px; right: 27px; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--white); font-size: 36px; line-height: 1; }
.lightbox-active { overflow: hidden; }

/* ── Apparition au défilement ────────────────────────────────────────────────
   Le contenu est visible PAR DÉFAUT. Seuls les blocs encore hors écran au
   chargement reçoivent `reveal-pending` par le script. Sans cette précaution,
   une erreur JavaScript laissait une page entièrement blanche — c'est
   exactement l'accident qui a motivé cette règle. */
.reveal { opacity: 1; transform: none; transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.25,1); }
.reveal.reveal-pending:not(.is-visible) { opacity: 0; transform: translateY(22px); }
.reveal-delay { transition-delay: .11s; }
.reveal-delay-2 { transition-delay: .2s; }

@keyframes ticker { to { transform: translateX(-50%); } }

/* ── Accessibilité ───────────────────────────────────────────────────────── */
:focus-visible { outline: 3px solid #c38418; outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 14px 20px; background: var(--white); color: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

/* ── Pages annexes ───────────────────────────────────────────────────────── */
.error-page, .legal-page { max-width: 880px; padding-block: 70px 90px; }
.error-page .brand, .legal-page .brand { margin-bottom: 55px; }
.legal-page h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); }
.legal-page section { margin-top: 38px; }
.legal-page h2 { font-size: 1.9rem; line-height: 1.15; }
.legal-page p, .error-page p { font-size: 1rem; line-height: 1.75; color: var(--ink-76); }
.legal-page a:not(.brand) { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — le mobile d'abord, parce que c'est là que tout se joue
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1050px) { .desktop-nav { gap: 18px; margin-right: 24px; } }

@media (max-width: 900px) {
  html { scroll-padding-top: 110px; }
  .section-shell { width: min(100% - 40px, 640px); }
  .site-header { width: 100%; min-height: 102px; padding: env(safe-area-inset-top, 0px) 20px 0; }
  .site-header.scrolled { min-height: 88px; }
  .desktop-nav { display: none; }
  .brand img, .brand-mono { width: 50px; height: 50px; }
  .header-cta { width: 46px; height: 46px; padding: 0; justify-content: center; margin-left: auto; margin-right: 10px; background: var(--ink); color: var(--white); }
  .header-cta span { display: none; }
  .header-cta svg { width: 16px; }
  .menu-button { width: 46px; height: 46px; display: grid; place-content: center; gap: 5px; border: 1px solid var(--ink-30); border-radius: 50%; padding: 0; background: color-mix(in srgb, var(--white) 72%, transparent); flex: none; }
  .menu-button span { display: block; width: 24px; height: 1px; background: var(--ink); transition: transform .25s ease; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .mobile-nav {
    display: block; position: absolute; top: calc(100% - 4px); right: 16px; width: min(320px, calc(100vw - 32px));
    padding: 14px; background: var(--white); box-shadow: 0 15px 35px color-mix(in srgb, var(--ink) 18%, transparent);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: .25s ease;
    border: 1px solid var(--ink-14); border-radius: 0 0 16px 16px;
  }
  .mobile-nav.open { visibility: visible; opacity: 1; transform: translateY(0); }
  .mobile-nav a { display: block; padding: 14px; font-size: .95rem; border-bottom: 1px solid var(--line); }
  .mobile-nav a:last-child { border-bottom: 0; background: var(--ink); color: var(--white); margin-top: 8px; text-align: center; border-radius: 8px; }
  .hero { padding: 41px 0 68px; min-height: auto; grid-template-columns: 1fr; gap: 42px; }
  .hero-visual { height: 400px; width: min(100%, 450px); justify-self: start; }
  .hero-frame { left: 24px; }
  .hero-outline { right: 15px; }
  .hero-tag { right: -3px; }
  .section-heading { align-items: start; flex-direction: column; gap: 23px; margin-bottom: 37px; }
  .section-heading > p { margin: 0; max-width: none; }
  .services { padding-top: 70px; padding-bottom: 88px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card, .service-card-featured { min-height: 360px; }
  .signature { width: 100%; grid-template-columns: 95px 1fr; padding: 48px 36px; gap: 27px; }
  .signature-logo { width: 90px; height: 90px; }
  .signature-logo img { width: 64px; height: 64px; }
  .signature-points { grid-column: 1 / -1; }
  .projects { padding: 88px 0; }
  .project-grid { grid-template-columns: 1fr; gap: 40px; }
  .project-main .project-image { height: 420px; }
  .project-secondary .project-image { height: 380px; }
  .ba { height: 400px; }
  .review-section { padding: 88px 0; }
  .review-inner { grid-template-columns: 1fr; gap: 44px; }
  .review-heading h2 { margin-bottom: 28px; }
  .zone-grid { grid-template-columns: 1fr; }
  .zones { padding-top: 70px; }
  .hours { padding-top: 80px; }
  .hours-panel { grid-template-columns: 1fr; gap: 28px; }
  .contact { padding: 88px 0; }
  .contact-panel { grid-template-columns: 1fr; }
  .contact-photo { height: 200px; }
  .contact-content { padding: 50px 30px 70px; }
  .contact-number { left: 30px; right: auto; }
  .map-frame { height: 300px; }
  .site-footer { margin-top: 60px; }

  /* Appel en un clic : la barre la plus utile du site sur mobile. Elle laisse
     la place au bandeau MonSiteGratuit, qui se pose au-dessus d'elle. */
  .call-fab {
    position: fixed; z-index: 14; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; border-radius: 999px;
    background: var(--ink); color: var(--white); font-size: 1rem; font-weight: 700;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--ink) 40%, transparent);
    transform: translateY(140%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .call-fab.is-shown { transform: translateY(0); }
  .call-fab svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  body.a-fab .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 500px) {
  .section-shell { width: calc(100% - 32px); }
  .site-header { padding-inline: 16px; }
  .brand img, .brand-mono { width: 46px; height: 46px; }
  .brand-copy strong { font-size: .95rem; }
  .brand-copy small { max-width: 150px; letter-spacing: .06em; }
  h1 { font-size: clamp(2.6rem, 12vw, 3.9rem); line-height: 1.04; }
  .hero { padding-top: 30px; gap: 38px; }
  .hero-visual { height: 340px; }
  .hero-frame { left: 15px; bottom: 8px; }
  .hero-outline { right: 8px; top: 20px; }
  .hero-stamp { bottom: 26px; padding: 10px 12px; }
  .hero-tag { top: 52px; }
  .hero-proof { margin-top: 34px; }
  .button { width: 100%; justify-content: space-between; }
  .hero-actions .text-link { margin: 0 auto; }
  .section-bridge { width: calc(100% - 32px); padding-block: 24px; }
  .section-bridge span { display: none; }
  .section-bridge p { max-width: 100%; line-height: 1.6; }
  .service-card { padding: 24px; }
  .service-card-overlay { padding: 24px; }
  .signature { grid-template-columns: 1fr; padding: 40px 28px; }
  .signature::after { font-size: 200px; bottom: -70px; right: 10px; }
  .signature-logo { width: 80px; height: 80px; }
  .signature-points { grid-column: auto; }
  .round-link { width: 84px; height: 84px; }
  .project-main .project-image { height: 340px; }
  .project-secondary .project-image { height: 300px; }
  .ba { height: 330px; }
  .review-card { padding: 22px; }
  .contact-content { padding: 44px 24px 66px; }
  .site-footer { padding: 28px 0; align-items: start; flex-direction: column; }
  .lightbox { padding: 22px; }
  .section-heading h2, .zones h2, .review-heading h2 { overflow-wrap: anywhere; }
}

@media (max-width: 380px) {
  .site-header .brand { gap: 8px; }
  .site-header .brand img, .site-header .brand-mono { width: 40px; height: 40px; }
  .site-header .brand-copy small { max-width: 108px; }
  .header-cta, .menu-button { flex-shrink: 0; }
}

@media (hover: none) { .zoom-symbol { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal, .reveal.reveal-pending:not(.is-visible) { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}

@media print {
  .site-header, .call-fab, .lightbox, .page-noise, .ambient, .service-ticker { display: none !important; }
  body { background: #fff; }
}