/* ==========================================================================
   GMZ AQUA — Styles de la page (s'appuie sur tokens.css + components.css)
   ========================================================================== */

/* Accessibilité : lien d'évitement */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .75rem 1rem; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

img, svg { max-width: 100%; height: auto; }
.center, .devis-form, .center.center { }
.center { text-align: center; margin-top: var(--space-6); }
.sur-titre {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption);
  letter-spacing: .12em; text-transform: uppercase; color: var(--aqua-600);
  display: block; text-align: center; margin-bottom: var(--space-2);
}
.section-intro { max-width: 640px; margin: 0 auto var(--space-6); text-align: center; }
.section-alt { background: var(--cream-alt); }

/* En-têtes de section centrés (titre + sous-titre).
   Cible les titres en enfant direct du conteneur : les héros "texte à gauche"
   (h1 imbriqué dans .hero-split) ne sont donc pas affectés. */
.section > .container > h1,
.section > .container > h2 { text-align: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 246, 234, 0.86); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1.5px solid var(--color-border);
}
.header-inner { display: flex; align-items: center; gap: var(--space-5); min-height: 68px; }
.brand {
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--ink);
  text-decoration: none; display: inline-flex; line-height: 1;
  /* Même look "sticker" que les titres, contour proportionné à la taille du logo */
  -webkit-text-stroke: 4px var(--white);
  paint-order: stroke fill;
  filter:
    drop-shadow( 1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink))
    drop-shadow(0  1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink))
    drop-shadow(0 3px 0 rgba(21, 100, 227, 0.16));
}
.nav-bar { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; }
.nav-links { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.nav-link {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-small);
  color: #000; text-decoration: none; line-height: 1;
  paint-order: stroke fill;
  -webkit-text-stroke: 0 transparent;
  transition: color var(--dur-fast) var(--ease-soft);
}
.nav-link:hover, .nav-link:focus-visible {
  color: var(--white); outline: none;
  -webkit-text-stroke: 3px #000;
}
.header-cta { white-space: nowrap; }
@media (max-width: 760px) {
  .nav-links { display: none; }
}

/* ---------- Hero façon flowfest (bandes rétro + titre sticker) ---------- */
.hero-flow {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--cream);
  padding: clamp(1.25rem, 4vw, 2.75rem) 0;
  text-align: center;
  /* Hero ~plein écran mais réduit, pour laisser dépasser la section suivante */
  min-height: calc(100vh - 250px); min-height: calc(100svh - 250px);
  display: flex; align-items: center;
}
.stripes {
  position: absolute; z-index: 0;
  width: clamp(220px, 34vw, 440px); height: auto; pointer-events: none;
}
.stripes--bl { left: 0; bottom: 0; }
.stripes--tr { right: 0; top: 0; }

/* Tracé des bandes (effet "dessin") façon flowfest, en boucle décalée par bande */
.stripes .band {
  stroke-dasharray: 1;
  animation: drawBand 6.5s ease-in-out infinite;
}
@keyframes drawBand {
  0%   { stroke-dashoffset: 1; }   /* vide (canal noir visible) */
  18%  { stroke-dashoffset: 0; }   /* tracée à fond */
  82%  { stroke-dashoffset: 0; }   /* maintien */
  100% { stroke-dashoffset: -1; }  /* s'efface par l'autre bout */
}
@media (prefers-reduced-motion: reduce) {
  .stripes .band { stroke-dasharray: none; animation: none; }
}
.hero-flow-inner { position: relative; z-index: 1; max-width: 860px; }

/* Libellé de localisation discret (eyebrow), pas un bouton */
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0;
  color: var(--aqua-600);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-small);
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.hero-badge::before {
  content: "📍"; font-size: 1.05em; line-height: 1;
  -webkit-text-stroke: 0;   /* l'emoji ne doit pas hériter d'un contour */
}

/* Titre "sticker" : lettres foncées + contour blanc épais + ombre portée */
.sticker-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 5.6vw, 4rem); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--ink);
  -webkit-text-stroke: 8px var(--white);
  paint-order: stroke fill;
  /* Filet navy autour de la couche blanche (drop-shadow = forme peinte) + ombre portée verticale */
  filter:
    drop-shadow( 1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink))
    drop-shadow(0  1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink))
    drop-shadow(0 4px 0 rgba(21, 100, 227, 0.16));
  margin: 0 auto var(--space-5); max-width: 16ch;
}

/* Ligne surlignée, légèrement inclinée (sticker label) */
.sticker-tag {
  display: inline-block; background: var(--pop-400); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  padding: .35em .8em; border-radius: var(--radius-md);
  border: 3px solid var(--white);
  box-shadow: 3px 4px 0 rgba(21, 100, 227, 0.18);
  transform: rotate(-2deg); margin: 0 0 var(--space-5);
}
.hero-sub { max-width: 560px; margin: 0 auto var(--space-6); }
.hero-cta--center { justify-content: center; }
.hero-phone { text-align: center; margin: var(--space-3) 0 0; color: var(--color-muted, #667); }
.hero-phone a { font-weight: 700; color: inherit; }

/* ---------- Titres "sticker" (façon logo GMZ Services) ----------
   Lettres foncées, contour blanc épais derrière le remplissage, légère
   ombre portée. Appliqué aux H2 de section sur tout le site. */
.section h2,
.sticker-h2 {
  color: var(--ink);
  -webkit-text-stroke: 6px var(--white);
  paint-order: stroke fill;
  /* Filet navy autour de la couche blanche (drop-shadow = forme peinte) + ombre portée verticale */
  filter:
    drop-shadow( 1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink))
    drop-shadow(0  1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink))
    drop-shadow(0 4px 0 rgba(21, 100, 227, 0.16));
}
/* Sur fond foncé (garantie, bandeau devis, bandeau process), on garde un titre blanc net */
.guarantee h2,
.cta-band h2,
.process-band h2 {
  color: var(--white);
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter: none;
}

@media (max-width: 560px) {
  .stripes { width: 150px; }
  .sticker-title { -webkit-text-stroke-width: 5px; }
  .section h2, .sticker-h2 { -webkit-text-stroke-width: 4px; }
  /* Titres sur fond foncé : on garde un blanc net, sans contour épais illisible */
  .guarantee h2, .cta-band h2, .process-band h2 { -webkit-text-stroke-width: 0; }
}

/* ---------- Hero (ancien, conservé pour compat) ---------- */
.hero-section { padding: var(--space-8) 0; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-7); align-items: center; }
.hero-copy h1 { margin: var(--space-3) 0 var(--space-4); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0; }
.hero-points { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; padding: 0; margin: 0; }
.hero-points li { font-weight: var(--fw-semibold); color: var(--ink-soft); font-size: var(--fs-small); display: flex; align-items: center; gap: 6px; }
.hero-points li::before { content: "✓"; color: var(--aqua-500); font-weight: 800; }
.hero-visual { display: grid; place-items: center; }
.hero-visual svg { width: 100%; max-width: 320px; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 220px; margin: 0 auto; }
}

/* ---------- Services ---------- */
.services-grid { margin-top: var(--space-6); }

/* ---------- Tarifs ---------- */
.price-grid { margin-top: var(--space-5); }
.price-card h3 { margin-bottom: var(--space-4); }
.price-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.price-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  padding: .65rem 0; border-bottom: 1px dashed var(--color-border);
}
.price-list li:last-child { border-bottom: 0; }
.price-list em { color: var(--color-text-muted); font-style: normal; font-size: var(--fs-small); }
.price-list b { font-family: var(--font-display); white-space: nowrap; color: var(--aqua-600); }
.price-note { font-size: var(--fs-small); color: var(--color-text-muted); margin: 0; }
.legal-note { font-size: var(--fs-caption); color: var(--color-text-muted); max-width: 720px; margin: var(--space-5) 0 0; }

/* ---------- Garantie ---------- */
.guarantee {
  display: flex; align-items: center; gap: var(--space-5);
  background: var(--ink); color: #fff; border-radius: var(--radius-xl); padding: var(--space-6);
}
.guarantee h2 { color: #fff; margin-bottom: var(--space-2); }
.guarantee .muted { color: #bfe6f5; }
.guarantee-badge {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%;
  background: var(--pop-400); color: var(--ink); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.7rem;
}
@media (max-width: 560px) { .guarantee { flex-direction: column; text-align: center; } }

/* ---------- Zones ---------- */
.zones-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-5) 0 0; }

/* ---------- Avis placeholder ---------- */
.reviews-placeholder {
  margin-top: var(--space-5); padding: var(--space-7); text-align: center;
  border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg);
  background: var(--white);
}
.reviews-placeholder p { max-width: 540px; margin: 0 auto; }

/* ---------- Devis / CTA ---------- */
.cta-sub { color: #bfe6f5; max-width: 460px; margin: 0 auto var(--space-6); }
.devis-form {
  text-align: left; background: var(--white); padding: var(--space-6);
  border-radius: var(--radius-lg); max-width: 620px; margin: 0 auto;
}
/* Barre de progression des étapes */
.devis-progress {
  display: flex; align-items: center; gap: var(--space-3);
  list-style: none; margin: 0 0 var(--space-5); padding: 0;
}
.devis-progress li {
  display: flex; align-items: center; gap: 8px; flex: 1;
  font-weight: var(--fw-semibold); font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.devis-progress li + li::before {
  content: ""; flex: 1; height: 2px; background: var(--color-border); margin-right: 8px;
}
.devis-progress-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--color-border); color: var(--white); font-weight: var(--fw-bold);
  transition: background var(--dur-fast) var(--ease-soft);
}
.devis-progress li.is-active { color: var(--ink); }
.devis-progress li.is-active .devis-progress-dot,
.devis-progress li.is-done .devis-progress-dot { background: var(--aqua-500, var(--aqua-400)); }

/* Étapes */
.devis-step {
  border: 0; padding: 0; margin: 0; min-width: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
}
.devis-step[hidden] { display: none; }
.devis-step .field { margin-bottom: 0; min-width: 0; }
.devis-form input, .devis-form select, .devis-form textarea { width: 100%; min-width: 0; }
.devis-actions { display: flex; gap: var(--space-3); }
.devis-actions .btn { flex: 1; justify-content: center; }
.devis-step > button { width: 100%; }
.cta-or { margin: var(--space-5) 0 0; color: #bfe6f5; }
.cta-or a { color: #fff; text-decoration: underline; }
@media (max-width: 480px) {
  .devis-actions { flex-direction: column-reverse; }
  .devis-actions .btn { flex: none; width: 100%; }
}

/* ---------- Pages SEO : fil d'Ariane, angle local, listes, tableau ---------- */
.breadcrumb { padding: var(--space-4) 0 0; font-size: var(--fs-small); }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--aqua-600); }
.breadcrumb span { color: var(--color-text-muted); margin: 0 4px; }
/* Hero des pages internes : ~plein écran réduit, contenu centré verticalement */
.section-tight {
  padding: var(--space-6) 0 var(--space-7);
  min-height: calc(100vh - 250px); min-height: calc(100svh - 250px);
  display: flex; align-items: center;
}
.section-tight > .container { width: 100%; }

/* La section qui suit le hero remonte un peu : son titre dépasse en bas
   d'écran et invite au scroll */
.hero-flow + .section,
.section-tight + .section { padding-top: var(--space-5); }
.local-angle { font-size: 1.1rem; max-width: 760px; margin: var(--space-4) 0; }
.check-list { list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-2) var(--space-5); }
.check-list li { display: flex; align-items: flex-start; gap: 8px; font-weight: var(--fw-medium); }
.check-list li::before { content: "✓"; color: var(--aqua-500); font-weight: 800; flex: 0 0 auto; }
.zones-table { width: 100%; border-collapse: collapse; margin-top: var(--space-5); background: var(--white); border-radius: var(--radius-lg); overflow: hidden; }
.zones-table th[scope="col"] { text-align: left; background: var(--aqua-100); color: var(--aqua-700); font-family: var(--font-display); }
.zones-table th, .zones-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--color-border); }
.zones-table th[scope="row"] { text-align: left; font-weight: var(--fw-semibold); }
.zones-table td a { font-weight: var(--fw-semibold); }
.zones-table tr:last-child th, .zones-table tr:last-child td { border-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--white); border-top: 1.5px solid var(--color-border); padding: var(--space-7) 0 var(--space-5); margin-top: var(--space-8); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); }
.footer-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; margin: 0 0 var(--space-2); }
.footer-head { font-family: var(--font-display); font-weight: 700; margin: 0 0 var(--space-3); }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: var(--space-2); }
.footer-list a { color: var(--ink-soft); }
.footer-list a:hover { color: var(--aqua-600); }
.footer-legal { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   PAGES SERVICE — structure type "landing" (hero split + slider, formules,
   bandeau process). S'appuie sur les composants existants (.card, .faq-item…).
   ========================================================================== */

/* ---------- Hero 2 colonnes : texte à gauche + slider photo à droite ---------- */
.hero-split {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7);
  align-items: center;
}
.hero-split .hero-copy { text-align: left; }
.hero-split .hero-copy .sticker-title {
  margin: 0 0 var(--space-4); max-width: none; text-align: left;
}
.hero-split .hero-cta { justify-content: flex-start; margin-bottom: 0; }
@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-split .hero-slider { order: -1; }
}

/* ---------- Slider photo (placeholders stylés aux couleurs du site) ---------- */
.hero-slider {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-xl); border: 3px solid var(--ink); background: var(--ink);
  box-shadow: 0 4px 0 rgba(21, 100, 227, 0.16);
}
.hero-slider .slides { position: absolute; inset: 0; }
.hero-slider .slide {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-content: center; gap: var(--space-3); text-align: center;
  color: var(--white);
  background: linear-gradient(135deg, var(--g1, var(--aqua-300)), var(--g2, var(--aqua-600)));
  opacity: 0; transition: opacity 600ms var(--ease-soft);
}
.hero-slider .slide.is-active { opacity: 1; }
.hero-slider .slide-ic { font-size: clamp(3rem, 9vw, 5rem); line-height: 1; }
.hero-slider .slide figcaption {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  text-shadow: 0 2px 6px rgba(21, 100, 227, 0.35);
}
.hero-slider .slide.has-photo { background: var(--ink); padding: 0; }
.hero-slider .slide.has-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hero-slider .slide.has-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: var(--space-6) var(--space-4) var(--space-4);
  background: linear-gradient(to top, rgba(9, 20, 45, 0.82), rgba(9, 20, 45, 0));
}
.hero-slider .ph-tag {
  position: absolute; left: var(--space-4); top: var(--space-4);
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption);
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: var(--radius-pill);
}
.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--white); color: var(--ink);
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft);
}
.slider-btn.prev { left: var(--space-3); }
.slider-btn.next { right: var(--space-3); }
.slider-btn:hover, .slider-btn:focus-visible { background: var(--pop-400); outline: none; }
.slider-dots {
  position: absolute; left: 0; right: 0; bottom: var(--space-4);
  display: flex; gap: var(--space-2); justify-content: center;
}
.slider-dots button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.55); cursor: pointer;
  transition: width var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.slider-dots button[aria-selected="true"] { width: 26px; background: var(--white); }

/* ---------- Formules d'entretien (3 cartes) ---------- */
.subs-grid { margin-top: var(--space-6); }
.sub-card { position: relative; display: flex; flex-direction: column; text-align: center; }
/* Label "le plus choisi" : en absolu, à cheval sur la bordure haute de la carte */
.sub-card .sub-badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--pop-400); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: .3rem .9rem; border-radius: var(--radius-pill);
  box-shadow: 0 3px 0 rgba(21, 100, 227, 0.16);
}
.sub-card .sub-rate {
  font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1;
  color: var(--aqua-600); margin: var(--space-2) 0;
}
.sub-card .sub-period { color: var(--color-text-muted); font-size: var(--fs-small); }
.sub-card ul {
  list-style: none; padding: 0; margin: var(--space-5) 0; text-align: left;
  display: grid; gap: var(--space-2);
}
.sub-card ul li { display: flex; align-items: flex-start; gap: 8px; font-weight: var(--fw-medium); }
.sub-card ul li::before { content: "✓"; color: var(--aqua-500); font-weight: 800; flex: 0 0 auto; }
.sub-card .btn { margin-top: auto; justify-content: center; }
.sub-card.is-popular { border: 2px solid var(--ink); }

/* ---------- Bandeau process (4 étapes, fond foncé) ---------- */
.process-band {
  background: var(--ink); color: var(--white);
  border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); text-align: center;
}
.process-band .sur-titre { color: var(--aqua-300); }
.process-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6); margin: var(--space-6) auto;
}
.process-steps .ps .n {
  width: 56px; height: 56px; margin: 0 auto var(--space-3); border-radius: 50%;
  background: var(--pop-400); color: var(--ink); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
}
.process-steps .ps h3 { color: var(--white); margin-bottom: var(--space-1); }
.process-steps .ps p { color: #bfe6f5; font-size: var(--fs-small); margin: 0; }

/* ---------- Process en cartes (façon "How it works"), reveal décalé au scroll ---------- */
.process-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
  margin-top: var(--space-6);
}
.pcard {
  position: relative; background: var(--white);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4);
  box-shadow: 0 4px 0 rgba(21, 100, 227, 0.16);
}
/* Connecteur flèche entre les cartes (desktop) */
.pcard:not(:last-child)::after {
  content: "→"; position: absolute; right: -25px; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 26px; height: 26px; border-radius: 50%;
  background: var(--cream); border: 1.5px solid var(--color-border);
  color: var(--ink-soft); font-family: var(--font-display); font-size: 14px;
  display: grid; place-items: center;
}
.pcard-num {
  width: 48px; height: 48px; border-radius: 50%; background: var(--pop-400); color: var(--ink);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
}
.pcard h3 { margin: 0; }
.pcard-visual {
  flex: 1; min-height: 150px; background: var(--cream-alt);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4); display: flex; flex-direction: column; gap: 10px; justify-content: center;
}
.pcard-ic { font-size: 2.4rem; line-height: 1; margin-bottom: var(--space-2); }
.pcard-visual .bar { height: 12px; border-radius: var(--radius-pill); background: rgba(21, 100, 227, 0.12); }
.pcard-visual .bar.w-100 { width: 100%; }
.pcard-visual .bar.w-80 { width: 80%; }
.pcard-visual .bar.w-60 { width: 60%; }
.pcard-visual .bar.w-40 { width: 40%; }
.pcard-tag {
  align-self: flex-start; background: var(--white); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill); padding: .35rem .85rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); color: var(--ink);
  box-shadow: 0 3px 0 rgba(21, 100, 227, 0.12);
}
/* Reveal décalé : activé en JS via .reveal-ready (cartes visibles par défaut si JS off) */
.process-cards.reveal-ready .pcard {
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease-bounce);
}
.process-cards.reveal-ready.is-in .pcard { opacity: 1; transform: none; }
.process-cards.reveal-ready.is-in .pcard:nth-child(2) { transition-delay: .12s; }
.process-cards.reveal-ready.is-in .pcard:nth-child(3) { transition-delay: .24s; }
.process-cards.reveal-ready.is-in .pcard:nth-child(4) { transition-delay: .36s; }

@media (max-width: 900px) {
  .process-cards { grid-template-columns: repeat(2, 1fr); }
  .pcard:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) {
  .process-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .process-cards.reveal-ready .pcard { opacity: 1; transform: none; transition: none; }
}

/* ---------- Rangée "autres prestations" ---------- */
.services-row { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-4) 0 0; }

/* ---------- Carte des zones d'intervention (SVG, points cliquables) ---------- */
.zones-map-wrap {
  margin: var(--space-6) auto 0; max-width: 820px;
  border-radius: var(--radius-xl); border: 3px solid var(--ink); overflow: hidden;
  box-shadow: 0 4px 0 rgba(21, 100, 227, 0.16); background: var(--aqua-50);
}
.zones-map { display: block; width: 100%; height: auto; }
.zones-map .sea  { fill: var(--aqua-100); }
.zones-map .land { fill: var(--cream-alt); }
.zones-map .coast { fill: none; stroke: var(--aqua-300); stroke-width: 4; stroke-linejoin: round; }
.zones-map .rance { fill: none; stroke: var(--aqua-200); stroke-width: 16; stroke-linecap: round; }
.zones-map .sea-label {
  fill: var(--aqua-500); font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: .14em; text-transform: uppercase; opacity: .7;
}
.zones-map .town .dot {
  fill: var(--aqua-400); stroke: var(--ink); stroke-width: 3;
  transform-box: fill-box; transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-bounce), fill var(--dur-fast) var(--ease-soft);
}
.zones-map .town .lbl {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  fill: var(--ink); paint-order: stroke; stroke: var(--white); stroke-width: 4px; stroke-linejoin: round;
}
.zones-map .town.is-hub .dot { fill: var(--pop-400); stroke-width: 3.5; }
.zones-map .town:hover .dot,
.zones-map .town:focus-visible .dot { fill: var(--pop-400); transform: scale(1.5); }
.zones-map .town:focus-visible { outline: none; }
.zones-map .town:hover .lbl { fill: var(--aqua-700); }
.zones-map-note { text-align: center; font-size: var(--fs-small); color: var(--color-text-muted); margin: var(--space-3) 0 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-slider .slide { transition: none; }
  .zones-map .town .dot { transition: fill var(--dur-fast) var(--ease-soft); }
}

/* Cartes de prestations rendues cliquables (maillage interne SEO) —
   conservent l'apparence d'une carte, avec un effet de survol pour l'affordance. */
a.card-service { display: block; color: inherit; text-decoration: none; }
a.card-service h3 { color: inherit; }
a.card-service:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }