/* ============================================================
   POUSS'MOUSSE — Finitions (passe design légère, 12/10/2026)
   ------------------------------------------------------------
   Charge APRÈS pm-2026.css. Ne touche à aucun module : sliders
   avant/après, questionnaire, calculateur, vidéo, avis, bandeau,
   barres sticky, FAQ et menus gardent leur CSS et leur JS.
   Uniquement des corrections ciblées, chacune commentée.
   ============================================================ */

/* ------------------------------------------------------------
   1. JETONS MANQUANTS + CONTRASTE DU TEXTE SECONDAIRE
   style.css et pm-2026.css utilisent --sp-5, --sp-10 et --sp-18,
   jamais déclarés : chaque déclaration qui s'en sert était ignorée
   (padding/marge à 0). Effets visibles : encadré « À lire aussi »
   des articles collé à son filet, comparateurs de l'accueil collés
   à la section suivante, texte de « Pourquoi Pouss'Mousse ? » posé
   sur la vague décorative, Mossy décentré dans « Nos valeurs »,
   bouton des cartes support collé au texte…
   On les définit dans l'échelle existante (pas de 0,25 rem).

   --ink-mute (#8294a0) ne donnait que 2,8 à 3,1:1 sur les fonds
   clairs du site, sous le seuil AA (4,5:1) pour les petits textes
   où il sert (méta, mentions, sous-titres de formulaire, prix
   unitaires). #5e707c passe 4,5:1 sur tous les fonds clairs
   (blanc, crème, vert pâle) en restant plus clair que --ink-soft.
   ------------------------------------------------------------ */
:root {
  --sp-5: 1.25rem;
  --sp-10: 2.5rem;
  --sp-18: 4.5rem;
  --ink-mute: #5e707c;
}

/* ------------------------------------------------------------
   2. HAUT DE PAGE SUR MOBILE (≤ 768 px)
   Le header (72 px) et le bandeau d'offre sont fixes. style.css
   impose aux hero un padding de 140 px en !important, sans tenir
   compte du bandeau (55 px sur téléphone) : le fil d'Ariane des
   pages zones et le badge des articles arrivaient à 15 px sous le
   header, celui du blog/solutions à ~20 px.
   Sur les mentions légales et la confidentialité (première section
   sans classe hero), une règle plus spécifique ramenait même le
   padding à 64 px : le titre passait SOUS le header.
   On cale tout sur header + bandeau + 40 px de respiration.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  body.has-solid-header :is(.page-hero, .blog-hero, .article-hero, .about-hero) {
    padding-top: calc(112px + var(--pm-offerbar-h, 0px)) !important;
  }
  /* Même spécificité que la règle de style.css qu'elle remplace
     (8 classes), et chargée après : elle l'emporte. */
  body.has-solid-header > section:first-of-type:not(.page-hero):not(.blog-hero):not(.article-hero):not(.about-hero):not(.service-hero):not(.cta-final) {
    padding-top: calc(112px + var(--pm-offerbar-h, 0px)) !important;
  }
}

/* ------------------------------------------------------------
   3. GRILLES : PLUS DE CARTE ORPHELINE
   ------------------------------------------------------------ */
/* Accueil : 5 comparateurs sur 2 colonnes, le dernier restait seul
   à gauche avec un vide à droite. On le centre sur sa ligne, à la
   largeur d'une colonne (hauteur du slider inchangée). */
@media (min-width: 769px) {
  .ba-gallery > div:last-child:nth-child(odd):not(:first-child) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--sp-6)) / 2);
  }
}

/* Pages façade et hydrofuge : 4 étapes de méthode sur 3 colonnes
   (3 + 1 orpheline). Pages zones (42) : 8 villes voisines sur
   3 colonnes (3 + 3 + 2). Sur grand écran, 4 colonnes alignent
   tout ; en dessous, la méthode passe en 2 × 2. */
@media (min-width: 1200px) {
  .method-steps:has(> :nth-child(4):last-child),
  .supports-grid:has(> :nth-child(8):last-child) {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 981px) and (max-width: 1199px) {
  .method-steps:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Pied de page à 3 blocs (page Zones) : la grille de 4 colonnes
   laissait une colonne vide à droite. */
@media (min-width: 981px) {
  .footer-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

/* ------------------------------------------------------------
   4. CARTES & MÉDIAS
   ------------------------------------------------------------ */
/* « Trois principes » : le grand numéro (01/02/03) est en position
   absolue ; le titre ne lui réservait que 48 px et « Engagement
   écologique » venait le toucher, surtout sur mobile. */
.value-card h3 { padding-right: 4.5rem; }

/* Page démoussage : la photo « Le produit en action » et sa légende
   étaient calées à gauche (img en display:block, légende limitée à
   65ch) sous une galerie centrée. */
div[style*="text-align:center"] > :is(img, p) {
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------
   5. LISTES DE CONTENU
   Le reset (ul { list-style: none }) effaçait les puces des listes
   éditoriales — style.css colorait pourtant déjà leur ::marker en
   vert. Articles, mentions légales, confidentialité et pages
   « Nos solutions » : les listes n'étaient plus que du texte décalé.
   ------------------------------------------------------------ */
.article-content ul,
.solution-grid ul[style*="padding-left"] {
  list-style: disc;
}
.solution-grid ul[style*="padding-left"] li::marker {
  color: var(--green-bright);
}

/* ------------------------------------------------------------
   6. PIED DE PAGE
   Les lignes sans lien (horaires, adresse, « Week-end sans
   surcoût ») héritaient de la taille du corps (16 px) et d'un blanc
   plus franc que les liens voisins (≈ 14,5 px, blanc 70 %) : la
   colonne Contact paraissait désalignée.
   ------------------------------------------------------------ */
.footer-col li {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

/* ------------------------------------------------------------
   7. FOCUS CLAVIER
   Anneau de focus homogène aux couleurs de la marque (au lieu de
   l'anneau par défaut du navigateur, variable d'un site à l'autre).
   :where() garde une spécificité minimale : les styles de focus
   propres aux modules (questionnaire, champs) restent prioritaires.
   ------------------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--green-deep);
  outline-offset: 3px;
}
/* Sur fonds sombres ou colorés, l'anneau vert ne se verrait pas. */
:where(.site-footer, .cta-final, .stats, .drone-section, .prestige, .pricing-info,
       .quote-result, .service-sticky-cta, .pm-video-section, .pm-stickybar,
       section[style*="slate-900"]) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: #fff;
}
:where(.pm-offerbar) :where(a, button):focus-visible {
  outline-color: var(--slate-900);
}

/* ============================================================
   Prix TTC pour les particuliers (arrêté du 3 décembre 1987)
   Les prix restent annoncés HT ; l'équivalent TTC est donné à côté.
   ============================================================ */
.service-price { flex-wrap: wrap; row-gap: 2px; }
.service-price-ttc { flex-basis: 100%; font-size: var(--fs-xs, 0.8rem); font-weight: 600; color: var(--ink-mute); }
.price-ttc { width: 100%; font-size: var(--fs-sm, 0.9rem); font-weight: 600; color: var(--ink-mute); margin-top: 6px; }
.pm-prix-note { font-size: var(--fs-xs, 0.8rem); line-height: 1.5; color: var(--ink-mute); max-width: 72ch; margin: var(--sp-4, 16px) auto 0; text-align: center; }
.services-grid + .pm-prix-note { margin-top: var(--sp-6, 24px); }
.quote-result .pm-ttc { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-mute); margin-top: 2px; }
.quote-result .pm-prix-note { text-align: left; margin: 8px 0 0; }
.prose .pm-prix-note, article .pm-prix-note { text-align: left; margin-left: 0; }

/* ------------------------------------------------------------
   Lien « Espace client » dans le menu principal
   Pastille discrète à droite du menu, resserrée sous 1300 px ;
   icône seule entre 981 et 1099 px (l'en-tête y est déjà au plus
   juste) ; ligne pleine largeur dans le menu mobile.
   ------------------------------------------------------------ */
.nav-main a.nav-espace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.4rem 0.8rem;
  border: 1.5px solid rgba(15, 26, 31, 0.16);
  border-radius: 999px;
  color: var(--ink);
}
.nav-main a.nav-espace::after { display: none; }
.nav-main a.nav-espace:hover,
.nav-main a.nav-espace:focus-visible {
  border-color: var(--green-bright);
  color: var(--green-deep);
  background: rgba(132, 196, 65, 0.1);
}
.nav-main a.nav-espace svg { flex: none; }
@media (min-width: 981px) and (max-width: 1300px) {
  .nav-main a.nav-espace { padding: 0.36rem 0.65rem; gap: 5px; }
}
@media (min-width: 981px) and (max-width: 1099px) {
  .nav-main a.nav-espace { padding: 0.42rem; }
  .nav-main a.nav-espace span {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (max-width: 980px) {
  /* Le menu ouvert démarre sous le bandeau d'offre : sa hauteur maximale doit en
     tenir compte, sinon le bas du menu (dont « Espace client ») sort de l'écran
     sans pouvoir défiler sur les petits téléphones. */
  .nav-main.is-open {
    max-height: calc(100vh - 80px - var(--pm-offerbar-h, 0px));
    max-height: calc(100dvh - 80px - var(--pm-offerbar-h, 0px));
    overscroll-behavior: contain;
  }
  .nav-main.is-open a.nav-espace {
    gap: 10px;
    border-radius: 8px;
    border-color: rgba(132, 196, 65, 0.6);
    color: var(--green-deep);
  }
}