/* ============================================================================
   page-blocks.css — Blocs éditoriaux des pages villes et prestations
   ----------------------------------------------------------------------------
   Issu de service-page.css, dont il reprend les blocs qui n'existent pas dans
   le gabarit historique : fil d'Ariane, encadré « réponse rapide », carte de
   contact latérale, étapes numérotées, blocs détaillés, photos avant/après,
   pages liées, grille de chantiers.

   Les 4 règles en collision avec city-page.css (.hero, .hero-grid ×2,
   .faq-list) ont été retirées : sur ce gabarit, le hero est vidéo et la FAQ
   est l'accordéon de city-page.css. Les blocs .faq-list <details> et .final,
   devenus sans emploi, ont été retirés avec elles.

   S'y ajoutent les règles qui n'existaient que dans brand.css et seraient
   perdues sans cela : .skip (lien d'évitement), .btn-ghost, .cta-pair-center.

   city-page.css doit être chargé AVANT ce fichier :

     <link rel="stylesheet" href="/city-page.css">
     <link rel="stylesheet" href="/page-blocks.css">
   ========================================================================== */

/* ── Deux jetons que city-page.css ne déclare pas ────────────────────────────
   Les 15 pages historiques écrivent #F1EDE5 en style en ligne et n'utilisent
   pas de variable pour l'or des étoiles. Valeurs reprises de DESIGN.md, à
   l'identique de brand.css. Déclaration purement additive : aucune propriété
   de `:root` déjà posée par city-page.css n'est redéfinie ici. */
:root {
  --bg-alt: #F1EDE5;
  --gold: #F4B400;
}

/* ── Lien d'évitement (repris de brand.css) ──────────────────────────────── */
.skip { position: absolute; left: -9999px; }

.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 999;
  background: var(--surface);
  color: var(--slate);
  padding: 10px 14px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}

/* ── Bouton fantôme (repris de brand.css) ────────────────────────────────── */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--slate);
  text-decoration: none;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 15px;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.btn-ghost:hover { border-color: var(--terracotta); color: var(--terracotta-dk); }

/* Paire de contact centrée (repris de brand.css) */
.cta-pair.cta-pair-center { margin-left: auto; margin-right: auto; }

/* ── Pied de page à 5 colonnes ───────────────────────────────────────────────
   Le gabarit historique en compte 4 (marque, adresse, contact, zone). Ces
   pages ajoutent la colonne « Prestations », qui portait les liens vers les
   4 pages mot-clé et qui aurait disparu autrement. Sélecteur propre : `.foot`
   reste défini par city-page.css seul. */
@media (min-width: 1000px) {
  .foot-5 { grid-template-columns: 1.35fr 1fr 1fr 1fr 1.1fr; }
}

/* ── Carte de preuve — colonne éditoriale, plus le hero ──────────────────────
   Le hero de ce gabarit accueille l'assistant de devis. La carte de preuve
   remonte donc dans la colonne latérale de l'introduction, au-dessus de la
   carte de contact, sans rien perdre de son contenu. */
.proof {
  background: var(--surface);
  color: var(--slate);
  border-radius: var(--r-2xl);
  padding: 27px;
  box-shadow: var(--sh-lg);
}

.proof .stars {
  color: var(--gold);
  letter-spacing: 2px;
  font-size: 18px;
  margin-bottom: 2px;
}

.proof-score {
  font-family: 'Sora', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.proof p { color: var(--muted); font-size: 14px; margin: 8px 0 18px; }

.proof ul { list-style: none; padding: 0; margin: 0; }

.proof li {
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.proof li::before {
  content: "✓";
  color: var(--terracotta);
  font-weight: 800;
  flex-shrink: 0;
}

@media (max-width: 959px) {
  .proof { max-width: 480px; }
}

/* ── Fil d'Ariane ────────────────────────────────────────────────────────── */
/* Retiré le 17 août 2026, sur décision de Robin. Il était posé entre le hero
   et la bande de garanties, deux blocs ardoise : sur le fond de page il
   dessinait une bande crème de 54 px, et repeint en ardoise il restait une
   ligne de texte isolée en haut du foncé. Les 14 pages ville historiques
   n'en ont jamais eu et enchaînent hero → garanties directement ; les pages
   de la famille 3 font pareil maintenant.
   Le `BreadcrumbList` en JSON-LD reste dans le <head> de chaque page : c'est
   lui que Google utilise pour le fil d'Ariane affiché dans ses résultats,
   pas la version visible. Aucune règle CSS n'est nécessaire pour lui.
   `service-page.css` garde ses règles `.breadcrumb` : elles servent encore à
   `blog-nettoyage-toiture-alsace`, qui n'est pas concerné. */

/* ── Rythme des sections ─────────────────────────────────────────────────── */
main section { padding: clamp(58px, 8vw, 88px) 0; }
main section.tinted { background: var(--bg-alt); }

.intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

.intro-grid > *,
.cards > *,
.details-grid > *,
.related > * { min-width: 0; }

@media (min-width: 960px) {
  .intro-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 70px; }
}

.prose p { margin: 0 0 18px; color: #394958; max-width: 68ch; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--terracotta-ink); }

/* ── Encadré « réponse rapide » ──────────────────────────────────────────── */
.answer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 22px 25px;
  margin: 0 0 28px;
  box-shadow: var(--sh-sm);
}

/* Seul le premier <strong> est l'étiquette de l'encadré. Les suivants sont des
   mises en gras dans le corps du texte — un prix, une durée — et doivent le
   rester : sans `:first-child`, « 50 à 90 € du mètre posé en zinc » devenait
   une seconde étiquette mono en terracotta et coupait la phrase en deux. */
.answer > strong:first-child {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--terracotta-ink);
  margin-bottom: 8px;
}

/* ── Colonne latérale : preuve + contact ─────────────────────────────────── */
.intro-aside { display: grid; gap: 20px; align-content: start; }

@media (min-width: 960px) {
  .intro-aside { position: sticky; top: 92px; }
}

/* ── Carte latérale ──────────────────────────────────────────────────────── */
.side-card {
  background: var(--slate);
  color: #fff;
  border-radius: var(--r-2xl);
  padding: 29px;
}

.side-card h2 { color: #fff; font-size: 22px; line-height: 1.2; }
.side-card p { font-size: 14px; color: rgba(255, 255, 255, .7); margin: 12px 0 20px; }
.side-card .cta-pair { grid-template-columns: 1fr; max-width: none; margin-top: 0; }
.side-card .cta-row { margin-top: 12px; }

.side-card .btn-ghost {
  width: 100%;
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}

.side-card .btn-ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
}

/* ── Étapes numérotées ───────────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 36px;
}

@media (min-width: 760px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 28px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

.card-num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: rgba(232, 118, 26, .12);
  color: var(--terracotta);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  margin-bottom: 20px;
}

.card h3 { font-size: 19px; margin-bottom: 10px; }
.card p { font-size: 14px; color: var(--muted); margin: 0; }

/* ── Blocs détaillés ─────────────────────────────────────────────────────── */
.details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-top: 34px;
}

@media (min-width: 760px) {
  .details-grid { grid-template-columns: 1fr 1fr; }
}

.detail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 29px;
}

.detail h3 { font-size: 20px; margin-bottom: 12px; }
.detail p, .detail li { font-size: 15px; color: #465565; line-height: 1.7; }
.detail p { margin: 0 0 14px; }
.detail p:last-child { margin-bottom: 0; }
.detail ul { padding-left: 20px; margin: 0 0 14px; }
.detail ul:last-child { margin-bottom: 0; }
.detail li { margin-bottom: 6px; }
.detail a { color: var(--terracotta-ink); }

/* ── Liens de communes ───────────────────────────────────────────────────── */
.local-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

.local-links a {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  text-decoration: none;
  font-size: 13px;
  color: var(--slate);
  transition: border-color .15s ease, color .15s ease;
}

.local-links a:hover { border-color: var(--terracotta); color: var(--terracotta); }

/* La FAQ vient de city-page.css : accordéon `.faq-item` / `.faq-q`, piloté par
   city-page.js. Aucune règle `.faq-list` ici — c'était l'une des 4 collisions. */

/* ── Pages liées ─────────────────────────────────────────────────────────── */
.related {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 30px;
}

@media (min-width: 640px) { .related { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .related { grid-template-columns: repeat(3, 1fr); } }

.related a {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  text-decoration: none;
  color: var(--slate);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.related a:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: #D8D0C2;
}

.related strong { display: block; font-family: 'Sora', sans-serif; margin-bottom: 5px; }
.related span { font-size: 13px; color: var(--muted); }

/* ── Photos de chantier ──────────────────────────────────────────────────── */
figure { margin: 0; }

.media,
.ba figure {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.media img,
.ba img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4/3;
}

.media figcaption,
.ba figcaption {
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--muted);
}

.ba {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 34px;
}

@media (min-width: 640px) { .ba { grid-template-columns: 1fr 1fr; } }

.tag {
  display: inline-block;
  background: rgba(232, 118, 26, .13);
  color: var(--terracotta-ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: 1px;
}

.media-wide { margin-top: 34px; }
.media-wide img { aspect-ratio: 16/6; }

@media (max-width: 640px) { .media-wide img { aspect-ratio: 4/3; } }

/* Galerie d'étapes : plusieurs photos d'un même chantier, dans l'ordre. */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 34px;
}

@media (min-width: 620px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery > * { min-width: 0; }

.gallery figure {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* `height: auto` est indispensable : sans lui, l'attribut HTML height impose
   sa valeur en pixels et `aspect-ratio` est ignoré. */
.gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.gallery figcaption {
  padding: 13px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  flex-grow: 1;
}

.gallery-3 { grid-template-columns: 1fr; }

@media (min-width: 620px) { .gallery-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .gallery-3 { grid-template-columns: repeat(3, 1fr); } }

.media-note { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.media-note a, .media figcaption a, .ba figcaption a { color: var(--terracotta-ink); }

/* ── Rangée de CTA en fin de bloc ────────────────────────────────────────── */
.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 26px;
}

/* La section finale vient de city-page.css : `.final-cta` / `.final-cta-inner`,
   fond ardoise et halos radiaux. `.final` n'a plus d'emploi sur ce gabarit. */

/* ── En-tête de page d'index ──────────────────────────────────────────────
   Pour les pages qui listent (réalisations, plus tard le blog) : le gabarit
   de référence ouvre sur un hero vidéo plein écran avec assistant de devis,
   qui n'a pas de sens quand le visiteur vient parcourir. Bandeau ardoise
   compact, même trame diagonale que le hero de `blog.html`, dont la valeur
   est reprise à l'identique. La nav restant transparente et blanche en haut
   de page, ce fond sombre est ce qui la rend lisible. */
.page-hero {
  background: var(--slate);
  padding: clamp(110px, 16vw, 160px) 0 clamp(56px, 7vw, 88px);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(-45deg,
      transparent 0, transparent 20px,
      rgba(255, 255, 255, .018) 20px, rgba(255, 255, 255, .018) 21px);
}

.page-hero .wrap { position: relative; z-index: 1; }

/* Sur fond ardoise le terracotta plein passe à 4,4:1 : on garde --terracotta,
   pas --terracotta-ink qui, lui, est fait pour les fonds clairs. */
.page-hero-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--terracotta);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 16px;
}

.page-hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.page-hero h1 span { color: var(--terracotta); }

.page-hero p {
  color: rgba(255, 255, 255, .65);
  font-size: clamp(15px, 1.6vw, 17px);
  max-width: 52ch;
  margin-top: 14px;
  line-height: 1.65;
}

/* ── Chantiers réalisés ───────────────────────────────────────────────────
   Grille de preuve photo, sans JavaScript, contrairement au carrousel des
   pages villes historiques. Chaque carte mène à sa page de réalisation.
   Réutilise .tag pour l'étiquette et le cadrage 4/3 de .media. */
.works {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 34px;
}

@media (min-width: 700px)  { .works { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .works { grid-template-columns: repeat(3, 1fr); } }

.works > * { min-width: 0; }

.work {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}

.work:hover,
.work:focus-visible { transform: translateY(-2px); box-shadow: var(--sh-md); }

.work img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.work-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  flex: 1;
  padding: 18px 20px 20px;
}

.work-body h3 {
  font-size: 17px;
  line-height: 1.25;
  margin: 0;
}

.work-where {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
  flex: 1;
}

.work-go {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--terracotta-ink);
}

.work:hover .work-go { color: var(--terracotta); }

/* ----------------------------------------------------------------------------
   Bento blog asymétrique — pages prestations (ajouté le 17 août 2026)
   Une vedette photo à gauche, deux brèves compactes + la tuile « voir tout »
   à droite. Le bloc reste court : la colonne de droite fixe la hauteur, la
   vedette s'y aligne. Les visuels des cartes viennent de city-page.css
   (.blog-card-feat, .blog-card-sm, .blog-card-cta) ; ici, la mise en grille.
   Noms distincts de .blog-bento / .blog-feat / .blog-cta-t pour garder
   0 collision avec city-page.css.
   -------------------------------------------------------------------------- */

.blog-bento-asym {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.blog-bento-asym > .blog-lead {
  grid-column: 1;
  grid-row: 1 / span 3;
}

/* --- Vedette : photo de fond + dégradé ardoise, texte lisible par-dessus. --- */

.blog-bento-asym .blog-lead {
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.blog-bento-asym .blog-lead-img { position: absolute; inset: 0; z-index: 0; }

.blog-bento-asym .blog-lead-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.blog-bento-asym .blog-lead:hover .blog-lead-img img { transform: scale(1.04); }

.blog-bento-asym .blog-lead::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(28, 43, 58, .80) 0%,
      rgba(28, 43, 58, .60) 45%,
      rgba(28, 43, 58, .92) 100%);
}

.blog-bento-asym .blog-lead .blog-body { position: relative; z-index: 3; }

/* --- Brèves : vignette à gauche, texte à droite. Format court. --- */

.blog-bento-asym .blog-card-sm {
  padding: 0;
  display: grid;
  grid-template-columns: 116px 1fr;
  align-items: stretch;
}

.blog-bento-asym .blog-thumb { overflow: hidden; background: var(--slate); }

.blog-bento-asym .blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

.blog-bento-asym .blog-card:hover .blog-thumb img { transform: scale(1.05); }

.blog-bento-asym .blog-card-inner {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.blog-bento-asym .blog-card-sm .blog-ttl {
  font-size: 15.5px;
  line-height: 1.3;
  margin: 0;
}

.blog-bento-asym .blog-card-sm .blog-cat-tag { align-self: flex-start; }

.blog-bento-asym .blog-card-sm .blog-meta-row {
  font-size: 11.5px;
  white-space: nowrap;
  gap: 6px;
}

/* --- Tuile « voir tout » : compacte elle aussi. --- */

.blog-bento-asym .blog-card-cta { padding: 22px 24px; gap: 14px; }

@media (max-width: 860px) {
  .blog-bento-asym { grid-template-columns: 1fr; }
  .blog-bento-asym > .blog-lead { grid-column: auto; grid-row: auto; }
  .blog-bento-asym .blog-lead { min-height: 300px; }
}

@media (max-width: 420px) {
  .blog-bento-asym .blog-card-sm { grid-template-columns: 96px 1fr; }
}

/* Carte d'ancrage : sur une page prestation, la carte de la prestation
   courante porte aria-current="page". Marquage discret — pas un état de
   survol, pas un bouton : juste le repère « vous êtes ici ». */

.service[aria-current="page"] {
  border-color: var(--terracotta);
  box-shadow: inset 3px 0 0 0 var(--terracotta), var(--sh-sm);
}

/* Mention sous les boutons du hero (« Réponse sous 24 h ouvrées · garantie
   décennale »). Reprise de brand.css, que ces pages ne chargent plus.
   Absente de city-page.css : aucune collision. */

.hero-note {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
}