/* dimbike.be — compléments aux gabarits, UNIQUEMENT à partir des tokens du Dimbike Design System.
   Chaque règle ici est une ÉVOLUTION à valider (issue « ÉVOLUTIONS du Dimbike Design System »).
   Les fichiers tokens.css, bundle.css et dimbike-site.css restent intacts. */

/* ÉVOLUTION utilitaires : masquage, lecteurs d'écran, lien d'évitement, pot de miel. */
.is-hidden, [hidden] { display: none !important; }
.s-skip { position: absolute; left: -9999px; top: 0; }
.s-skip:focus { left: var(--space-40); top: var(--space-40); z-index: 10; background: var(--surface-0); color: var(--ink); padding: var(--space-30) var(--space-40); outline: 2px solid var(--red-300); }
.s-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ÉVOLUTION SiteHeader : panneau du menu mobile (non dessiné dans les maquettes). */
.s-mobile-nav { display: flex; flex-direction: column; gap: 0; background: var(--surface-0); border-bottom: 1px solid var(--surface-200); padding: 0 24px var(--space-50); }
.s-mobile-nav a:not(.db-btn) { font-family: var(--font-body); font-size: 15px; line-height: 25.5px; font-weight: 600; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 10px 0; min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--surface-200); }
.s-mobile-nav a[aria-current="page"] { color: var(--red-300); }
.s-mobile-nav .db-btn { margin-top: var(--space-40); }
@media (min-width: 721px) { .s-mobile-nav { display: none !important; } }

/* ÉVOLUTION formulaires : message d'erreur et confirmation d'envoi. */
.s-form-error { margin: 0; color: var(--ink); font-size: 13px; line-height: 20px; }
.s-form-error::before { content: "⚠ "; color: var(--red-300); }
.s-form-ok { border: 1px solid var(--green-available); padding: var(--space-40); }
.s-form-ok .s-p { color: var(--ink); }

/* ÉVOLUTION ReviewSlot : ligne de consentement sous les emplacements d'avis. */
.s-avis-consent { margin-top: var(--space-40); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-30); }
.s-review { display: flex; flex-direction: column; gap: var(--space-30); }

/* ÉVOLUTION Pager : bouton de page en <button> (même rendu que les liens de la maquette). */
.s-pager button { min-width: 44px; }

/* Cibles tactiles ≥ 44 px (brief § 3.7) pour les puces de filtre et les cases. */
.db-chip { min-height: 44px; }
.s-check { min-height: 44px; }

/* ÉVOLUTION MapConsent : carte chargée après le clic (iframe pleine largeur, 16:9, sans bordure). */
.s-map.is-loaded { padding: 0; border-style: solid; border-color: var(--surface-200); }
.s-map-frame { display: block; width: 100%; height: 100%; border: 0; }

/* ÉVOLUTION ArticleCard / blog : catégories en liens (une page par catégorie, sans JavaScript) avec
   le rendu des puces de la maquette ; la page courante prend l'aspect « pressé ». */
a.db-chip { display: inline-flex; align-items: center; text-decoration: none; }
.db-chip[aria-current="page"] { background: var(--red-500); border-color: var(--red-500); color: var(--ink); }
.s-post:focus-visible { outline: 2px solid var(--red-300); outline-offset: 2px; }