/*
Theme Name: Roquemaure
Theme URI: https://github.com/dorian-lalucarne/roquemaure
Description: Thème sur mesure de la Ville de Roquemaure. Coquille classique volontairement nue, conçue pour CrocoBuilder (en-tête, pied de page et gabarits sont des documents du constructeur) ; le thème porte les polices, les réglages de base, l'accessibilité et le code métier (agenda, nettoyage), sans aucun habillage propre.
Version: 1.78.1
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
Author: La Lucarne
Author URI: https://agence-lalucarne.com
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: roquemaure
*/

/* ---------------------------------------------------------------------------
   Remise à zéro minimale (reprise du thème CrocoBuilder Blank) — aucune règle
   d'habillage ici : tout le visuel vit dans le design system CrocoBuilder.
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(132px + var(--rq-alerte-h, 0px)); } /* ancres : défilement fluide, cible dégagée du header fixe (114 px) */
@media (max-width: 1455px) { html { scroll-padding-top: calc(122px + var(--rq-alerte-h, 0px)); } }
@media (max-width: 767px) { html { scroll-padding-top: calc(96px + var(--rq-alerte-h, 0px)); } }
body { margin: 0; overflow-x: clip; } /* les bandes pleine largeur (100vw) ne doivent pas créer de défilement horizontal */
main { display: block; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre, code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
abbr[title] { text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
button, input, optgroup, select, textarea { margin: 0; font: inherit; line-height: 1.15; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
legend { box-sizing: border-box; display: table; max-width: 100%; padding: 0; white-space: normal; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
details { display: block; }
summary { display: list-item; }

/* ---------------------------------------------------------------------------
   Base typographique — s'appuie sur les variables du design system CrocoBuilder
   (--font-body, --bleu-nuit…), émises sur :root par la feuille globale du
   constructeur. Les replis restent lisibles si cette feuille manque.
--------------------------------------------------------------------------- */
body {
  font-family: var(--font-body, 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: var(--text-body-lg, 16px);
  line-height: 1.6;
  color: var(--bleu-nuit, #14203E);
  background: var(--blanc, #fff);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ---------------------------------------------------------------------------
   Accessibilité (RGAA 10.7 : prise de focus visible) — repli global. Les
   classes rq-* peuvent affiner, mais aucun élément ne doit perdre son focus.
--------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--rouge, #C42543);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.screen-reader-text,
.rq-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Lien d'évitement : visible uniquement au focus clavier */
.rq-evitement:focus {
  position: fixed; top: 12px; left: 12px; z-index: 100000;
  width: auto; height: auto; padding: 12px 18px; margin: 0;
  overflow: visible; clip-path: none; white-space: normal;
  background: var(--blanc, #fff); color: var(--rouge, #C42543);
  font-family: var(--font-display, sans-serif); font-weight: 700;
  box-shadow: var(--ombre-panneau, 0 10px 18px rgba(0,0,0,.18));
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Corps natif (pages sans gabarit CrocoBuilder : archives, recherche, 404).
   Habillage sobre à partir des classes et variables du design system.
--------------------------------------------------------------------------- */
.rq-natif { padding-top: 64px; padding-bottom: 96px; }
.rq-natif__titre {
  font-family: var(--font-display, sans-serif); font-weight: 700;
  font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: .2px;
  color: var(--encre, #2B2B2B); margin: 0 0 32px;
}
.rq-natif__desc { max-width: 720px; color: var(--gris-texte, #526070); margin: -16px 0 32px; }
.rq-natif__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; list-style: none; margin: 0; padding: 0; }
.rq-natif__carte { background: var(--blanc, #fff); box-shadow: var(--ombre-carte, 0 8px 18px rgba(13,26,51,.16)); display: flex; flex-direction: column; }
.rq-natif__carte img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rq-natif__carte-corps { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.rq-natif__meta { font-size: var(--text-body-xs, 12px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-texte, #526070); }
.rq-natif__carte-titre { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--encre, #2B2B2B); margin: 0; }
.rq-natif__carte-titre a { text-decoration: none; }
.rq-natif__carte-titre a:hover { color: var(--rouge, #C42543); }
.rq-natif__extrait { font-size: var(--text-body-md, 14px); line-height: 1.55; color: var(--gris-texte, #526070); margin: 0; }
.rq-natif__contenu { max-width: 820px; }
.rq-natif__contenu img { margin: 18px 0; }
.rq-natif .nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.rq-natif .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px;
  font-family: var(--font-display, sans-serif); font-weight: 700; text-decoration: none;
  border: 1px solid var(--bordure, #DCE3EE); color: var(--encre, #2B2B2B);
}
.rq-natif .page-numbers.current, .rq-natif .page-numbers:hover { background: var(--rouge, #C42543); border-color: var(--rouge, #C42543); color: var(--blanc, #fff); }
.rq-natif__sous-titre { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--encre, #2B2B2B); margin: 48px 0 16px; }
.rq-natif__raccourcis { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; margin: 0; padding: 0; }
.rq-natif__raccourcis a { font-weight: 700; color: var(--encre, #2B2B2B); text-decoration: underline; text-underline-offset: 3px; }
.rq-natif__raccourcis a:hover { color: var(--rouge, #C42543); }
/* Avis sur une actualité dont la date « Valable jusqu’au » est passée (05/10/2026) : inc/actualites.php */
.rq-avis-termine { margin: 0 0 28px; padding: 16px 20px; background: var(--brume, #EFF3F8); border-left: 4px solid var(--rouge, #C42543); font-weight: 700; color: var(--encre, #2B2B2B); }
.rq-natif__recherche { display: flex; gap: 12px; max-width: 560px; margin-top: 24px; }
/* min-width: 0 : un champ de recherche garde sinon sa largeur naturelle (~20 caractères) et poussait
   le bouton hors de l’écran à 320 px (page de résultats, relevé le 27/09/2026, RGAA 10.11). */
.rq-natif__recherche input[type="search"] { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid var(--bordure-champ, #78869E); border-radius: var(--radius-btn, 3px); }
.rq-natif__recherche button { flex: 0 0 auto; padding: 12px 20px; border: 0; border-radius: var(--radius-btn, 3px); background: var(--rouge, #C42543); color: var(--blanc, #fff); font-family: var(--font-display, sans-serif); font-weight: 700; cursor: pointer; }

/* ---------------------------------------------------------------------------
   Barre « Mise à jour le · Service référent » (shortcode [roq_service_referent])
--------------------------------------------------------------------------- */
.rq-referent { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 40px; font-size: 16px; line-height: 24px; color: var(--bleu-nuit, #14203E); }
.rq-referent__gauche, .rq-referent__droite { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.rq-referent strong { color: var(--encre, #2B2B2B); }
.rq-referent a { color: var(--encre, #2B2B2B); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.rq-referent__valider { color: var(--gris-texte, #526070); }

/* ---------------------------------------------------------------------------
   Contenu Gutenberg dans le gabarit « Page intérieure » : uniquement les
   enfants directs du bloc post-content (les documents CrocoBuilder sont
   enveloppés dans .crocoblocks-document et ne sont donc jamais touchés).
--------------------------------------------------------------------------- */
.cb-pg_contenu > :where(p, ul, ol, table, blockquote, figure, h2, h3, h4, .wp-block-group, .wp-block-columns) { max-width: 820px; margin-left: auto; margin-right: auto; }
.cb-pg_contenu > :where(p, ul, ol) { font-family: var(--font-body); font-size: 16px; line-height: 27px; color: var(--bleu-nuit); margin-bottom: 18px; }
.cb-pg_contenu > :where(ul, ol) { padding-left: 22px; }
.cb-pg_contenu > :where(h2) { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 38px; color: var(--encre); margin: 40px auto 14px; }
.cb-pg_contenu > :where(h3) { font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 29px; color: var(--encre); margin: 28px auto 10px; }
.cb-pg_contenu > :where(p, ul, ol) a { color: var(--rouge); text-decoration: underline; text-underline-offset: 3px; }
.cb-pg_contenu > :where(figure) img { max-width: 100%; height: auto; display: block; }
.cb-pg_contenu > :where(table) { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--bleu-nuit); margin-bottom: 24px; }
.cb-pg_contenu > :where(table) :where(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--bordure); text-align: left; vertical-align: top; }
.cb-pg_contenu > :where(table) th { font-family: var(--font-alt); font-weight: 700; color: var(--encre); background: var(--brume); }
/* Liste « pièces à fournir » (fiche démarche) : cases à cocher visuelles */
ul.rq-cocher { list-style: none; padding-left: 0; }
ul.rq-cocher li { position: relative; padding-left: 40px; margin-bottom: 10px; }
ul.rq-cocher li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border: 2px solid var(--encre); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--encre); }
@media (max-width: 767px) { .cb-pg_contenu > :where(h2) { font-size: 26px; line-height: 30px; } }

/* Plan du site ([roq_plan_du_site]) */
/* Crédit d’une photo sous licence libre (30/09/2026) : pastille « i » en bas à droite de la photo (bandeau des fiches,
   panneau de la carte) ; la bulle (auteur, licence, lien vers la source) s’ouvre au survol, au clic ou à la touche Entrée,
   se ferme par Échap (assets/js/credit-photo.js). La marge invisible sous la bulle garde le survol entre pastille et bulle. */
.rq-credit { position: absolute; right: 12px; bottom: 12px; z-index: 3; }
.rq-carte__detail-media .rq-credit { right: 8px; bottom: 8px; }
.rq-credit--carte { right: 8px; bottom: 8px; } /* photo d’une carte de page, [roq_credit] (30/09/2026) */
.rq-credit__bouton { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 50%; background: rgba(13, 26, 51, 0.72); color: var(--blanc); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 16px; line-height: 1; cursor: pointer; }
.rq-credit__bouton:hover, .rq-credit.est-ouvert .rq-credit__bouton { background: var(--encre); }
.rq-credit__bouton:focus-visible { outline: 3px solid var(--blanc); outline-offset: 2px; }
.rq-credit__bulle { display: none; position: absolute; right: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(320px, calc(100vw - 40px)); padding: 10px 12px; background: var(--blanc); color: var(--encre); box-shadow: var(--ombre-carte); font-family: var(--font-body); font-size: 13px; line-height: 18px; text-align: left; text-shadow: none; }
.rq-credit__bulle::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.rq-credit:hover .rq-credit__bulle, .rq-credit.est-ouvert .rq-credit__bulle { display: flex; flex-direction: column; gap: 2px; }
.rq-credit.est-ferme .rq-credit__bulle { display: none; }
.rq-credit__auteur { font-weight: 700; }
.rq-credit__licence { color: var(--gris-texte); }
.rq-credit__lien { margin-top: 4px; color: var(--rouge); font-weight: 700; }
/* Boutons de téléchargement de l’application IntraMuros, [roq_stores] (inc/intramuros-application.php, 30/09/2026) :
   badges officiels non modifiés, même hauteur visible (46 px) ; la marge transparente de l’image Google est recadrée. */
.rq-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 8px 0 28px; }
.rq-stores__lien { display: inline-block; line-height: 0; border-radius: 9px; }
.rq-stores__lien:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }
.rq-stores img { display: block; height: 46px; }
.rq-stores__lien--apple img { width: auto; }
.rq-stores__lien--google img { width: 155px; object-fit: cover; object-position: center; }
.rq-plan-site { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
.rq-plan-site__rubrique h2 { font-family: var(--font-display); font-size: 22px; line-height: 26px; margin: 0 0 10px; }
.rq-plan-site__rubrique h2 a { color: var(--encre); text-decoration: none; }
.rq-plan-site__rubrique h2 a:hover { color: var(--rouge); }
.rq-plan-site__rubrique ul { list-style: none; margin: 0; padding: 0; }
.rq-plan-site__rubrique li { padding: 4px 0; font-size: 16px; line-height: 24px; }
.rq-plan-site__rubrique li a { color: var(--bleu-nuit); text-decoration: none; }
.rq-plan-site__rubrique li a:hover { color: var(--rouge); text-decoration: underline; }
.rq-plan-site__rubrique li ul { margin: 4px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--bordure); }
.rq-plan-site__rubrique li li { padding: 2px 0; font-size: 15px; }
@media (max-width: 1455px) { .rq-plan-site { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .rq-plan-site { grid-template-columns: minmax(0, 1fr); } }

/* Lecteur vidéo à la demande ([roq_video]) */
.rq-lecteur { position: relative; aspect-ratio: 16 / 9; background: var(--bleu-nuit); box-shadow: var(--ombre-carte); overflow: hidden; }
.rq-lecteur__vignette { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.rq-lecteur__lire { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 14px; padding: 14px 26px 14px 18px; border: 0; border-radius: var(--radius-btn, 3px); background: var(--blanc); color: var(--encre); font-family: var(--font-display); font-weight: 700; font-size: 18px; cursor: pointer; box-shadow: var(--ombre-carte); }
.rq-lecteur__lire:hover { color: var(--rouge); }
.rq-lecteur__lire:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }
.rq-lecteur__icone { width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--rouge); }
.rq-lecteur__note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 16px; font-size: 14px; color: var(--blanc); background: rgba(20, 32, 62, 0.75); }
.rq-lecteur__note a { color: var(--blanc); }
.rq-lecteur iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Téléphone (04/10/2026, audit d’affichage) : sur une vignette de 160 à 200 px de haut, la note posée en bas
   de l’image recouvrait la moitié du bouton « Lire la vidéo » (188 × 53 px à 320 px). La note passe sous
   l’image : une grille de deux rangées, la vignette et le bouton dans la première (16:9, réservée par
   ::before même sans vignette), la note dans la seconde. Après le clic, l’iframe remplit la rangée 16:9. */
@media (max-width: 767px) {
  .rq-lecteur { display: grid; grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; }
  .rq-lecteur::before { content: ""; grid-area: 1 / 1; aspect-ratio: 16 / 9; }
  .rq-lecteur__vignette { position: relative; inset: auto; grid-area: 1 / 1; height: auto; aspect-ratio: 16 / 9; }
  .rq-lecteur__lire { position: relative; left: auto; top: auto; transform: none; grid-area: 1 / 1; place-self: center; max-width: calc(100% - 24px); }
  .rq-lecteur__note { position: static; grid-area: 2 / 1; }
}

/* Chevrons et séparateurs des pseudo-éléments : CrocoBuilder supprime les caractères
   non ASCII (et les antislashs) dans `content`, le thème les fournit donc ici. */
.rq-fil__item + .rq-fil__item::before { content: "\203A"; }
/* Le séparateur suit l’élément au lieu de précéder le suivant : quand le fil passe à la ligne
   (téléphone), un « › » ne commence plus jamais une ligne. Mêmes marge et opacité que le
   séparateur d’origine, que les pages règlent sur ::before. */
.rq-fil .rq-fil__item + .rq-fil__item::before { content: none; }
.rq-fil .rq-fil__item:not(:last-child)::after { content: "\203A"; margin: 0 12px 0 2px; opacity: 0.85; }
/* Fil d’Ariane hors du bandeau (fiches lieu, gabarits sans hero) : en ligne, sans numéros. Le bandeau des pages garde ses propres styles CrocoBuilder, plus spécifiques. */
.rq-fil__liste { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.rq-fil__item { display: inline-flex; align-items: center; gap: 10px; }
.rq-fil__item a { color: inherit; text-decoration: none; }
.rq-fil__item a:hover, .rq-fil__item a:focus-visible { text-decoration: underline; }
.rq-fil__item [aria-current] { font-weight: 700; }
/* Téléphone (01/10/2026, demande de Dorian, d’abord sur les fiches puis sur tout le site) : le fil d’Ariane se réduit à un
   lien retour vers la page parente, « ‹ La Mairie ». La page courante est déjà le titre juste dessous, et le fil
   complet prenait jusqu’à trois lignes dans le bandeau. Le lien garde 24 px de haut (cible tactile). */
@media (max-width: 767px) {
  body .rq-fil .rq-fil__item:not(:nth-last-child(2)) { display: none; }
  body .rq-fil .rq-fil__item:nth-last-child(2)::after { content: none; }
  body .rq-fil .rq-fil__item:nth-last-child(2)::before { content: "\2039"; margin: 0 2px 0 0; font-size: 18px; line-height: 1; opacity: 1; }
  body .rq-fil .rq-fil__item:nth-last-child(2) a { display: inline-flex; align-items: center; min-height: 24px; text-decoration: underline; text-underline-offset: 3px; }
  body .rq-fil:not(:has(.rq-fil__item:nth-last-child(2))) { display: none; }
}
.rq-sommaire a::before, .rq-liste-chevrons li::before { content: "\203A"; }
/* Pied de page, rangée des mentions (01/10/2026, « bug dans le footer ») :
   - entre deux liens, un simple espace (comme avant), porté par le lien qui précède : une ligne coupée ne commence plus
     par un décalage (même principe que le fil d’Ariane) ;
   - tablette : les deux traits rouges sont en position absolue, et le texte, centré dans la rangée, remontait dessus dès
     que les liens passaient sur deux lignes (ajout de « Gestion des cookies ») ; le texte passe sous les traits, les liens
     s’alignent à droite sans recouvrir le « © » ; sous 1024 px, les deux s’empilent à gauche. Grand écran inchangé.
   Préfixe body : la feuille du gabarit de pied de page se charge après le thème et l’emporterait à force égale. */
body .cb-ftr_legal_liens a + a::before { content: none; margin: 0; }
body .cb-ftr_legal_liens a:not(:last-child) { margin-right: 16px; }
@media (max-width: 1455px) {
  body .cb-ftr_legal { align-items: flex-start; gap: 6px 32px; padding-top: 16px; }
  body .cb-ftr_legal_rule_l, body .cb-ftr_legal_rule_r { top: 0; }
  body .cb-ftr_legal_left { flex: 0 0 auto; }
  body .cb-ftr_legal_liens { flex: 1 1 0; min-width: 0; justify-content: flex-end; }
}
@media (max-width: 1023px) {
  body .cb-ftr_legal { flex-direction: column; align-items: flex-start; }
  body .cb-ftr_legal_left { text-align: left; }
  body .cb-ftr_legal_liens { flex: 0 0 auto; justify-content: flex-start; }
}
/* Sous le pied de page (page courte sur un grand écran) : la couleur du pied de page plutôt qu’une bande blanche. */
html { background-color: #F5F8FB; }

/* Recherche simple des hubs ([roq_recherche]) */
.rq-recherche-simple { display: flex; width: 100%; max-width: 520px; }
.rq-recherche-simple__champ { flex: 1; min-width: 0; height: 56px; padding: 0 18px; border: 2px solid var(--encre); border-right: 0; border-radius: 3px 0 0 3px; font-family: var(--font-body); font-size: 17px; color: var(--bleu-nuit); background: var(--blanc); }
.rq-recherche-simple__champ:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }
.rq-recherche-simple__bouton { height: 56px; padding: 0 22px; border: 0; border-radius: 0 3px 3px 0; background: var(--degrade-rouge); font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--blanc); cursor: pointer; }
@media (max-width: 767px) { .rq-recherche-simple__champ { font-size: 16px; padding: 0 12px; } .rq-recherche-simple__bouton { padding: 0 14px; } }

/* Onglets « simples » (soulignés) des hubs */
.rq-onglets--simple .rq-onglets__liste { display: flex; gap: 0; border-bottom: 2px solid var(--bordure); }
.rq-onglets--simple .rq-onglet { height: 56px; padding: 0 28px; border-bottom: 4px solid transparent; margin-bottom: -2px; background: transparent; box-shadow: none; opacity: 1; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--gris-texte); flex-direction: row; align-items: center; }
.rq-onglets--simple .rq-onglet h3 { font-size: 22px; margin: 0; color: inherit; }
.rq-onglets--simple .rq-onglet:hover { transform: none; color: var(--encre); }
.rq-onglets--actif.rq-onglets--simple .rq-onglet[aria-selected="true"] { background: transparent; color: var(--encre); border-bottom-color: var(--rouge); }
.rq-onglets--actif.rq-onglets--simple .rq-onglet[aria-selected="true"]::after { display: none; }
.rq-onglets--simple .rq-onglet-panneau { border: 0; box-shadow: none; padding: 28px 0 0; margin-top: 0; }

/* ---- Page Météo (maquette meteo.dc.html) ---- */
.rq-meteo-lien { color: inherit; text-decoration: none; display: inline-flex; }
.rq-meteo-lien:hover .rq-meteo__temp, .rq-meteo-lien:focus-visible .rq-meteo__temp { text-decoration: underline; text-underline-offset: 3px; }
.rq-meteo-page { display: flex; flex-direction: column; gap: 64px; margin: 0 0 8px; }
.rq-meteo-page__auj { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 48px; align-items: stretch; }
.rq-meteo-page__now { display: flex; flex-direction: column; gap: 8px; padding: 36px 40px; background: var(--degrade-rouge-vertical, var(--degrade-rouge)); color: var(--blanc); }
.rq-meteo-page__surtitre { font-family: var(--font-alt); font-weight: 700; font-size: 16px; letter-spacing: 1px; }
.rq-meteo-page__temp { font-family: var(--font-display); font-weight: 700; font-size: 120px; line-height: 110px; }
.rq-meteo-page__libelle { display: flex; align-items: center; gap: 12px; font-family: var(--font-alt); font-weight: 700; font-size: 28px; line-height: 34px; }
.rq-meteo-page__libelle .rq-meteo__icone { width: 32px; height: 32px; }
.rq-meteo-page__details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 18px 0 0; font-size: 17px; line-height: 24px; }
.rq-meteo-page__details div { display: flex; gap: 6px; }
.rq-meteo-page__details dt { margin: 0; min-width: 78px; }
.rq-meteo-page__details dd { margin: 0; font-weight: 700; }
/* Heure par heure (30/09) : le bloc se cale en bas de l’encart « Actuellement », les cases gardent la hauteur de leur
   contenu et l’espace libre passe au-dessus du titre (avant, la grille s’étirait : 160 px de vide sous chaque heure). */
.rq-meteo-page__heures { display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; min-width: 0; }
.rq-meteo-page__heures-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.rq-meteo-page__heures-tete h2, .rq-meteo-page__jours h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 40px; color: var(--encre); }
.rq-meteo-page__jours h2 { font-size: 50px; line-height: 54px; color: var(--rouge); }
.rq-meteo-page__heures-tete span { font-size: 16px; color: var(--gris-texte); }
.rq-meteo-page__grille { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rq-meteo-page__grille li { display: grid; grid-template-rows: 20px 34px 34px 40px 20px; align-items: center; justify-items: center; row-gap: 6px; padding: 16px 6px; border: 1px solid var(--bordure); text-align: center; }
.rq-meteo-page__i { display: inline-flex; color: var(--rouge); }
.rq-meteo-page__i .rq-meteo__icone { width: 30px; height: 30px; }
.rq-meteo-page__h { font-size: 16px; font-weight: 700; color: var(--encre); }
.rq-meteo-page__t { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--encre); }
.rq-meteo-page__l { font-size: 14px; line-height: 18px; color: var(--gris-texte); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Le pourcentage seul ne disait pas de quoi il parlait : la goutte le qualifie. */
.rq-meteo-page__p { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; color: var(--bleu-nuit); }
.rq-meteo__goutte { flex-shrink: 0; color: var(--rouge); }
.rq-meteo-page__jours table { width: 100%; margin-top: 28px; border-collapse: collapse; font-size: 17px; line-height: 26px; color: var(--bleu-nuit); }
.rq-meteo-page__jours thead tr { border-bottom: 2px solid var(--encre); }
.rq-meteo-page__jours th[scope="col"] { padding: 10px 16px; text-align: left; font-family: var(--font-alt); font-weight: 700; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--encre); }
.rq-meteo-page__jours th[scope="col"]:first-child { padding-left: 0; }
.rq-meteo-page__jours th[scope="col"]:last-child { padding-right: 0; }
.rq-meteo-page__jours tbody tr { border-bottom: 1px solid var(--bordure); }
.rq-meteo-page__jours th[scope="row"] { padding: 14px 16px 14px 0; text-align: left; font-weight: 700; color: var(--encre); text-transform: capitalize; }
.rq-meteo-page__jours td { padding: 14px 16px; }
.rq-meteo-page__ciel { display: inline-flex; align-items: center; gap: 10px; }
.rq-meteo-page__ciel .rq-meteo__icone { width: 26px; height: 26px; flex-shrink: 0; color: var(--rouge); }
.rq-meteo-page__jours td:last-child { padding-right: 0; }
.rq-meteo-page__jours .rq-num { text-align: right; }
/* `th[scope="col"]` l’emportait sur `.rq-num` : les titres MIN / MAX / PLUIE / VENT
   restaient calés à gauche pendant que leurs valeurs s’alignaient à droite. */
.rq-meteo-page__jours th[scope="col"].rq-num { text-align: right; }
.rq-meteo-page__max { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--encre); }
.rq-meteo-page__etat { font-size: 17px; line-height: 26px; color: var(--bleu-nuit); }
@media (max-width: 1455px) {
  .rq-meteo-page__auj { grid-template-columns: 1fr; gap: 32px; }
  .rq-meteo-page__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rq-meteo-page__jours h2 { font-size: 40px; line-height: 44px; }
}
@media (max-width: 767px) {
  .rq-meteo-page { gap: 40px; }
  .rq-meteo-page__now { padding: 28px 24px; }
  .rq-meteo-page__temp { font-size: 88px; line-height: 84px; }
  .rq-meteo-page__libelle { font-size: 22px; line-height: 28px; }
  .rq-meteo-page__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rq-meteo-page__heures-tete { flex-direction: column; gap: 6px; }
  .rq-meteo-page__jours table { font-size: 15px; }
  .rq-meteo-page__jours h2 { font-size: 32px; line-height: 36px; }
}

/* ---- Kiosque : grille d'attente avant dépôt des PDF (maquette Bulletins municipaux) ---- */
.rq-kiosque-attente { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0 0 28px; }
.rq-kiosque-attente__couv { position: relative; height: 330px; background: var(--degrade-rouge-vertical, var(--degrade-rouge)); overflow: hidden; box-shadow: var(--ombre-carte); }
.rq-kiosque-attente__mag { position: absolute; left: 24px; top: 26px; font-family: var(--font-alt); font-weight: 700; font-size: 15px; letter-spacing: 1px; color: rgba(255, 255, 255, 0.85); }
.rq-kiosque-attente__num { position: absolute; left: 24px; bottom: 58px; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 44px; color: var(--blanc); }
.rq-kiosque-attente__saison { position: absolute; left: 24px; bottom: 26px; font-family: var(--font-body); font-size: 16px; color: rgba(255, 255, 255, 0.9); }
.rq-kiosque-attente__lien { display: inline-block; margin-top: 14px; font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--gris-texte); }
@media (max-width: 1455px) { .rq-kiosque-attente { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .rq-kiosque-attente { grid-template-columns: minmax(0, 1fr); } .rq-kiosque-attente__couv { height: 260px; } }

/* ---- Méga-menu : verrou anti-réouverture après navigation (voir assets/js/megamenu.js) ---- */
body.rq-mm-verrou .rq-mm-panneau { display: none !important; }
/* Ouverture au clavier : doit l'emporter sur le verrou, qui ne concerne que le pointeur. */
html body .rq-mm-panneau.rq-mm-ouvert { display: block !important; }
/* Fermeture demandée par Échap : doit l'emporter sur les règles :hover / :focus-within du menu. */
html body .rq-mm-panneau.rq-mm-ferme { display: none !important; }

/* ---- Fil Facebook (shortcode [roq_fil_facebook]) : cartes média (visuel + pavé date + texte) ---- */
.rq-fil-fb { display: grid; gap: 24px; }
.rq-fil-fb--accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; flex: 1; min-width: 0; }
.rq-fil-fb--page { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0 0 8px; }
.rq-fil-fb__carte { position: relative; display: flex; flex-direction: column; background: var(--blanc); box-shadow: var(--ombre-fil); text-decoration: none; color: var(--encre); transition: transform 150ms ease, box-shadow 150ms ease; }
.rq-fil-fb__carte:hover, .rq-fil-fb__carte:focus-visible { transform: translateY(-2px); box-shadow: var(--ombre-carte); }
.rq-fil-fb__visuel { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--brume); }
.rq-fil-fb__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rq-fil-fb__visuel--texte { display: flex; align-items: flex-end; padding: 22px 20px 20px; background: linear-gradient(-48.409deg, var(--rouge-fonce) -20.27%, var(--rouge-clair) 86.56%); }
.rq-fil-fb__citation { font-family: var(--font-alt); font-weight: 700; font-size: 17px; line-height: 24px; color: var(--blanc); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.rq-fil-fb__date { position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 64px; height: 64px; background: linear-gradient(-48.409deg, var(--rouge-fonce) -20.27%, var(--rouge-clair) 86.56%); color: var(--blanc); font-family: var(--font-body); font-weight: 700; }
.rq-fil-fb__visuel--texte .rq-fil-fb__date { position: absolute; left: 0; top: 0; bottom: auto; background: rgba(255, 255, 255, 0.18); }
.rq-fil-fb__jour { font-size: 22px; line-height: 24px; }
.rq-fil-fb__mois { font-size: 12px; line-height: 14px; letter-spacing: 0.6px; }
.rq-fil-fb__lecture { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(13, 26, 51, 0.72); color: var(--blanc); border-radius: 50%; padding-left: 4px; }
.rq-fil-fb__nb { position: absolute; right: 12px; top: 12px; padding: 4px 10px; background: rgba(13, 26, 51, 0.72); color: var(--blanc); font-family: var(--font-alt); font-weight: 700; font-size: 13px; line-height: 16px; border-radius: 2px; }
.rq-fil-fb__corps { position: relative; flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 56px 16px 18px; }
.rq-fil-fb__titre { font-family: var(--font-alt); font-weight: 700; font-size: 16px; line-height: 22px; color: var(--encre); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rq-fil-fb__texte { font-family: var(--font-body); font-size: 15px; line-height: 21px; color: var(--gris-texte); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rq-fil-fb__fleche { position: absolute; right: 14px; bottom: 14px; }
.rq-fil-fb--vide { display: block; }
.rq-fil-fb--vide p { margin: 0; padding: 14px 0; font-size: 16px; line-height: 23px; color: var(--gris-texte); }
/* En-tête « page Facebook » (variante page) et logo */
.rq-fil-fb__entete { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 22px; font-family: var(--font-body); font-size: 16px; line-height: 23px; color: var(--gris-texte); }
.rq-fil-fb__entete strong { color: var(--encre); }
.rq-fil-fb__logo { flex-shrink: 0; color: #1877F2; }
.rq-fil-fb__suivre { margin-left: auto; font-weight: 700; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
/* Slider (accueil) : piste à défilement horizontal + flèches rouges comme les accès rapides */
.rq-fil-fb--slider { display: flex; flex-direction: column; gap: 18px; }
.rq-fil-fb__piste { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px; margin: -4px; }
.rq-fil-fb__piste::-webkit-scrollbar { display: none; }
.rq-fil-fb__piste:focus-visible { outline: 3px solid var(--rouge); outline-offset: 4px; }
.rq-fil-fb--slider .rq-fil-fb__carte { flex: 0 0 calc((100% - 18px) / 2); scroll-snap-align: start; }
.rq-fil-fb__nav { display: flex; align-items: center; justify-content: center; gap: 22px; }
.rq-fil-fb__prev, .rq-fil-fb__next { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 36px; border: 0; background: transparent; color: var(--rouge); cursor: pointer; border-radius: 4px; }
.rq-fil-fb__prev svg { transform: scaleX(-1); }
.rq-fil-fb__prev:disabled, .rq-fil-fb__next:disabled { color: var(--bordure); cursor: default; }
.rq-fil-fb__prev:focus-visible, .rq-fil-fb__next:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }
.rq-fil-fb__compteur { min-width: 64px; text-align: center; font-family: var(--font-alt); font-weight: 700; font-size: 14px; letter-spacing: 0.5px; color: var(--gris-texte); }
.rq-fil-fb--fixe .rq-fil-fb__nav { display: none; }
@media (max-width: 1455px) {
  .rq-fil-fb--page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 767px) {
  .rq-fil-fb--accueil, .rq-fil-fb--page { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rq-fil-fb__corps { padding: 14px 52px 14px 16px; }
  .rq-fil-fb--slider .rq-fil-fb__carte { flex-basis: 100%; }
  .rq-fil-fb__suivre { margin-left: 0; }
}

/* ---- Méga-menu : le titre du panneau est un lien vers la page hub ---- */
.rq-mm-titre-row { text-decoration: none; color: inherit; width: fit-content; }
.rq-mm-titre-row:hover .rq-mm-titre, .rq-mm-titre-row:focus-visible .rq-mm-titre { color: var(--rouge); }
.rq-mm-titre-row:hover .rq-mm-titre-fleche { transform: translateX(4px); }
.rq-mm-titre-row:focus-visible { outline: 3px solid var(--rouge); outline-offset: 4px; }

/* Le panneau du méga-menu tenait en 13 px (libellé) et 11 px (précision), trop petits à lire
   sur un écran d’ordinateur. On ne touche qu’au palier ≥ 1456 px : en dessous, le panneau
   laisse la place au menu mobile, et les mêmes classes rq-mm-* servent au sommaire des hubs. */
@media (min-width: 1456px) {
  .rq-mm-panneau .rq-mm-rubrique { font-size: 12px; line-height: 16px; }
  .rq-mm-panneau .rq-mm-entree-titre { font-size: 15px; line-height: 20px; }
  .rq-mm-panneau .rq-mm-entree-precision { font-size: 12.5px; line-height: 17px; }
  .rq-mm-panneau .rq-mm-fleche { font-size: 15px; line-height: 20px; }
  /* Filet : le panneau grandit de quelques dizaines de pixels avec ces tailles ; sur un portable
     peu haut il serait coupé sans recours, faute de pouvoir défiler. */
  .rq-mm-panneau { max-height: calc(100vh - 190px); overflow-y: auto; overscroll-behavior: contain; }
}

/* Horaires d'ouverture (fiche lieu) : badge d'état rafraîchi en direct + liste des horaires */
.rq-etat-ouverture { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; font-family: var(--font-alt); font-weight: 700; font-size: 14px; line-height: 20px; color: var(--blanc); background: var(--gris-neutre); }
.rq-etat-ouverture.est-ouvert { background: #3F7D3A; }
.rq-etat-ouverture.est-inconnu { background: var(--bleu-nuit); }
.rq-horaires { margin: 0; padding: 0; list-style: none; }
.rq-horaires li { margin: 0 0 2px; }
.rq-horaires--fermetures { color: var(--rouge); }
.rq-horaires__saison { margin: 8px 0 2px; font-weight: 700; color: var(--encre); }
.rq-horaires__note { margin: 4px 0 0; color: var(--gris-texte); }

/* Sommaire des pages hub : reprise des colonnes du méga-menu (rubriques, entrées titre + précision + flèche) */
.rq-sommaire-menu .rq-mm-rubrique { font-size: 13px; letter-spacing: .06em; margin-bottom: 18px; }
.rq-sommaire-menu .rq-mm-entree { margin-bottom: 20px; align-items: center; }
.rq-sommaire-menu .rq-mm-entree-titre { font-size: 17px; line-height: 22px; }
.rq-sommaire-menu .rq-mm-entree-precision { font-size: 14px; line-height: 19px; margin-top: 2px; }
.rq-sommaire-menu .rq-mm-fleche { font-size: 18px; line-height: 22px; transition: transform 150ms ease; }
.rq-mm-entree:hover .rq-mm-entree-titre, .rq-mm-entree:focus-visible .rq-mm-entree-titre { color: var(--rouge); }
.rq-mm-entree:hover .rq-mm-fleche { transform: translateX(4px); }
.rq-mm-entree:focus-visible { outline: 3px solid var(--rouge); outline-offset: 4px; }

/* ---- Formulaires JetFormBuilder (élément CrocoBuilder à classe rq-formulaire, type « formulaire » du générateur) ----
   JetFormBuilder n'apporte que la mise en page (layout-column) : l'habillage — libellés Montserrat, champs à bordure,
   bouton rouge, messages — vient d'ici pour rester identique d'un formulaire à l'autre (contact, subvention…). */
.rq-formulaire .jet-form-builder { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; align-items: start; }
.rq-formulaire .jet-form-builder-row { grid-column: 1 / -1; flex-wrap: nowrap; padding: 0; gap: 8px; } /* nowrap : en colonne, le wrap de JetFormBuilder rejette le champ dans une seconde colonne */
.rq-formulaire .jet-form-builder-row:has(> .jet-form-builder__field-wrap > .rq-champ-demi) { grid-column: auto; } /* e-mail et téléphone côte à côte */
.rq-formulaire .jet-form-builder .jet-form-builder__label, .rq-formulaire .jet-form-builder .jet-form-builder__desc { flex: 0 0 auto; max-width: none; margin: 0; } /* JetFormBuilder pose flex-basis 100 % : en colonne, le libellé s'étirerait */
.rq-formulaire .jet-form-builder__label-text { font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 20px; color: var(--encre); }
.rq-formulaire .jet-form-builder__required { color: var(--rouge); }
.rq-formulaire .jet-form-builder__desc small { font-family: var(--font-body); font-size: 13px; line-height: 18px; color: var(--gris-texte); }
.rq-formulaire .jet-form-builder__field:not(.checkradio-field) { min-height: 48px; padding: 11px 14px; border: 1px solid var(--bordure-champ, #78869E); border-radius: var(--radius-btn); background: var(--blanc); font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--encre); transition: border-color 150ms ease, box-shadow 150ms ease; -webkit-appearance: none; appearance: none; }
.rq-formulaire .jet-form-builder__field::placeholder { color: var(--gris-neutre); opacity: 1; }
.rq-formulaire .jet-form-builder__field:not(.checkradio-field):focus { outline: none; border-color: var(--rouge); box-shadow: 0 0 0 3px rgba(196, 37, 67, .18); }
.rq-formulaire .jet-form-builder__field:not(.checkradio-field):focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; box-shadow: none; }
.rq-formulaire .jet-form-builder select.jet-form-builder__field { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232B2B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; }
.rq-formulaire .jet-form-builder select.jet-form-builder__field:invalid, .rq-formulaire .jet-form-builder select.jet-form-builder__field option[value=""] { color: var(--gris-neutre); }
.rq-formulaire .jet-form-builder select.jet-form-builder__field option { color: var(--encre); }
.rq-formulaire .jet-form-builder textarea.jet-form-builder__field { min-height: 170px; resize: vertical; }
/* Case de consentement : case rouge sur mesure, libellé sur plusieurs lignes */
.rq-formulaire .jet-form-builder__field-label.for-checkbox { align-items: flex-start; gap: 12px; cursor: pointer; }
.rq-formulaire .jet-form-builder__field-label.for-checkbox > span { display: inline; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--gris-texte); }
.rq-formulaire .jet-form-builder__field-label.for-checkbox a { color: var(--encre); text-decoration: underline; }
.rq-formulaire .jet-form-builder__field-label.for-checkbox a:hover { color: var(--rouge); }
.rq-formulaire .jet-form-builder .jet-form-builder__field.checkradio-field { /* spécificité > .layout-column … ; JetFormBuilder 3.6.5.4 (checkbox.css) cache la vraie case (absolue, opacité 0) et en dessine une autre en span::before, collée au texte : on garde la nôtre */ position: relative; z-index: auto; opacity: 1; flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; border: 2px solid var(--gris-neutre); border-radius: 3px; background: var(--blanc); -webkit-appearance: none; appearance: none; cursor: pointer; display: grid; place-content: center; transition: border-color 150ms ease, background-color 150ms ease; }
.rq-formulaire .field-type-checkbox-field .jet-form-builder__field-label.for-checkbox > span::before { content: none; display: none; }
.rq-formulaire .jet-form-builder__field.checkradio-field::before { content: ""; width: 10px; height: 10px; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background: var(--blanc); transform: scale(0); transition: transform 120ms ease; }
.rq-formulaire .jet-form-builder__field.checkradio-field:checked { border-color: var(--rouge); background: var(--rouge); }
.rq-formulaire .jet-form-builder__field.checkradio-field:checked::before { transform: scale(1); }
.rq-formulaire .jet-form-builder__field.checkradio-field:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }
/* Bouton d'envoi : même dessin que les boutons rq-bouton, en plein rouge */
.rq-formulaire .field-type-submit-field { margin-top: 6px; }
/* reCAPTCHA v3 (29/09/2026) : badge flottant de Google masqué (il chevauchait le formulaire sur mobile), comme Google l’autorise
   à condition d’afficher sa mention dans le parcours : paragraphe rq-mention-recaptcha sous le bouton d’envoi. visibility, pas display:none. */
.grecaptcha-badge { visibility: hidden; }
.rq-formulaire .rq-mention-recaptcha { grid-column: 1 / -1; margin: 0; font-family: var(--font-body); font-size: 13px; line-height: 18px; color: var(--gris-texte); }
.rq-formulaire .rq-mention-recaptcha a { color: var(--encre); text-decoration: underline; }
.rq-formulaire .rq-mention-recaptcha a:hover { color: var(--rouge); }
.rq-formulaire .jet-form-builder__submit { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border: none; border-radius: var(--radius-btn); background: var(--rouge); font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 20px; color: var(--blanc); cursor: pointer; transition: background-color 150ms ease, transform 150ms ease; }
.rq-formulaire .jet-form-builder__submit:hover { background: var(--rouge-fonce); }
.rq-formulaire .jet-form-builder__submit:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
.rq-formulaire .jet-form-builder__submit:disabled, .rq-formulaire .jet-form-builder.is-loading .jet-form-builder__submit { opacity: .6; cursor: progress; }
/* Erreurs de champ et messages globaux */
.rq-formulaire .jet-form-builder-row.field-has-error .jet-form-builder__field:not(.checkradio-field), .rq-formulaire .jet-form-builder__field.field-has-error { border-color: var(--rouge); }
.rq-formulaire .jet-form-builder-row.field-has-error .error-message, .rq-formulaire .jet-form-builder__field.field-has-error + .error-message { font-family: var(--font-body); font-size: 13px; line-height: 18px; color: var(--rouge); }
.rq-formulaire .jet-form-builder-messages-wrap { grid-column: 1 / -1; }
.rq-formulaire .jet-form-builder-messages-wrap:empty { display: none; }
.rq-formulaire .jet-form-builder-message { margin: 0; padding: 16px 20px; border-radius: var(--radius-btn); text-align: left; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 22px; }
.rq-formulaire .jet-form-builder-message--success { border: 1px solid #2E7D4F; background: #EAF6EE; color: #1F5A38; }
.rq-formulaire .jet-form-builder-message--error { border: 1px solid var(--rouge); background: #FBEBEE; color: var(--rouge-fonce); }
@media (max-width: 767px) {
  .rq-formulaire .jet-form-builder { grid-template-columns: 1fr; gap: 16px; }
  .rq-formulaire .jet-form-builder-row:has(> .jet-form-builder__field-wrap > .rq-champ-demi) { grid-column: 1 / -1; }
  .rq-formulaire .jet-form-builder__submit { width: 100%; }
}

/* ---- Grille hebdomadaire des horaires ([roq_horaires_grille id=""], type « horaires-lieu » du générateur) ---- */
.rq-grille-horaires__etat { margin: 0 0 14px; }
.rq-grille-horaires__table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 15px; line-height: 20px; color: var(--encre); }
.rq-grille-horaires__table thead th, .rq-grille-horaires__table thead td { padding: 0 10px 8px; font-family: var(--font-alt); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--gris-texte); text-align: left; border-bottom: 1px solid var(--bordure); }
.rq-grille-horaires__table tbody th { padding: 8px 10px 8px 0; font-weight: 700; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--bordure); }
.rq-grille-horaires__table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--bordure); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rq-grille-horaires__table tbody tr:last-child th, .rq-grille-horaires__table tbody tr:last-child td { border-bottom: none; }
.rq-grille-horaires__table td.rq-grille-horaires__ferme { color: var(--gris-neutre); }
.rq-grille-horaires__table tr.est-aujourdhui th, .rq-grille-horaires__table tr.est-aujourdhui td { background: var(--brume); color: var(--encre); }
.rq-grille-horaires__table tr.est-aujourdhui th { padding-left: 10px; box-shadow: inset 3px 0 0 var(--rouge); }
.rq-grille-horaires__table tr.est-aujourdhui td.rq-grille-horaires__ferme { color: var(--gris-texte); }
.rq-grille-horaires__auj { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-chip); background: var(--rouge); font-family: var(--font-alt); font-weight: 700; font-size: 11px; line-height: 16px; letter-spacing: .5px; text-transform: uppercase; color: var(--blanc); vertical-align: 1px; }
.rq-grille-horaires .rq-horaires__note { margin: 12px 0 0; font-size: 14px; line-height: 20px; }
.rq-grille-horaires .rq-horaires--fermetures { margin-top: 10px; font-size: 14px; line-height: 20px; font-weight: 600; }
@media (max-width: 479px) {
  .rq-grille-horaires__table { font-size: 14px; }
  .rq-grille-horaires__table tbody th, .rq-grille-horaires__table tbody td { padding-left: 6px; padding-right: 6px; }
  .rq-grille-horaires__auj { display: none; }
}

/* ===========================================================================
   Mise au point mobile (audit du 22/09/2026, iframe 375 px sur les 69 pages)
   Trois familles de défauts : mots insécables qui élargissent la page,
   tableaux plus larges que l'écran (masqués par overflow-x: clip du body),
   cibles tactiles et textes trop petits.
   =========================================================================== */

/* 1. Adresses e-mail, URL et noms de domaine : ils ne doivent jamais pousser la page
      au-delà de l'écran (constaté sur Urbanisme, Seniors, Installations sportives,
      Annuaire des associations). break-word ne coupe que si le mot seul déborde. */
.cb-el-text, .cb-el-text *, .rq-texte, p, li, dd, dt, td, th, figcaption, blockquote { overflow-wrap: break-word; }
.cb-el-link, .cb-el-text a, .rq-texte a { overflow-wrap: break-word; }

/* 1 bis. « break-word » casse un mot trop long mais ne réduit pas la largeur minimale du bloc :
      dans une liste ou une grille, l'élément reste large comme son plus long mot. On lève donc le
      min-width: auto des éléments qui portent du texte — le mot se coupe alors au lieu d'élargir la page.
      Surtout PAS « overflow-wrap: anywhere » en général : la largeur minimale tomberait à une lettre et
      les libellés courts se disloqueraient (« Vent » sur quatre lignes sur la page Météo). */
@media (max-width: 767px) {
  .rq-liste-chevrons li > span, .cb-el-text li, .cb-el-text li > span, .rq-tableau td, .rq-tableau th { min-width: 0; }
}
/* Les adresses e-mail sont le seul cas où couper n'importe où est attendu. */
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* 2. Tableaux du générateur (type « tableau ») : en dessous de 640 px, chaque ligne
      devient une fiche « intitulé → valeur » (le libellé vient de data-label posé par
      le générateur). Sans cela le tableau est coupé, pas défilable : le body est en
      overflow-x: clip pour les bandes pleine largeur. */
.rq-tableau { width: 100%; border-collapse: collapse; }
/* Ligne d’en-tête « nom + précision » (annuaire des commerces) : la précision en texte courant, sous le nom. */
.rq-tableau th .rq-tableau__detail { display: block; font-family: var(--font-body); font-weight: 400; }
@media (max-width: 639px) {
  .rq-tableau, .rq-tableau tbody, .rq-tableau tr, .rq-tableau td, .rq-tableau th { display: block; width: auto; }
  .rq-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rq-tableau tr { margin: 0 0 14px; border: 1px solid var(--bordure); background: var(--blanc); }
  .rq-tableau tbody th[scope="row"] { background: var(--brume); font-family: var(--font-alt); font-weight: 700; font-size: 15px; line-height: 21px; color: var(--encre); padding: 10px 14px; border-bottom: 1px solid var(--bordure); }
  .rq-tableau td { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 9px 14px; border-bottom: 1px solid var(--bordure); font-size: 15px; line-height: 21px; }
  .rq-tableau td:last-child { border-bottom: none; }
  /* Cellule vide (« — » ou rien, classe posée par le générateur) : pas de ligne « Adresse » sans valeur dans la fiche empilée. */
  .rq-tableau td.rq-vide { display: none; }
  .rq-tableau td[data-label]::before { content: attr(data-label); flex: 1 1 55%; font-family: var(--font-alt); font-weight: 700; font-size: 13px; line-height: 21px; color: var(--gris-texte); }
  .rq-tableau td[data-label=""]::before { content: none; }
}

/* 3. Grille hebdomadaire des horaires : elle doit tenir dans une carte de ~297 px
      (page Contact & accès, colonne unique sous 767 px). */
@media (max-width: 479px) {
  .rq-grille-horaires__table { font-size: 13px; line-height: 18px; }
  .rq-grille-horaires__table thead th, .rq-grille-horaires__table thead td { padding: 0 4px 6px; font-size: 12px; letter-spacing: .5px; }
  /* « Samedi, dimanche » en nowrap imposait une colonne de 133 px : on laisse le jour passer à la ligne */
  .rq-grille-horaires__table tbody th { padding: 7px 8px 7px 0; white-space: normal; }
  .rq-grille-horaires__table tbody td { padding: 7px 4px; }
  .rq-grille-horaires__table tr.est-aujourdhui th { padding-left: 6px; }
  .rq-grille-horaires__auj { display: none; }
}
@media (max-width: 359px) {
  .rq-grille-horaires__table { font-size: 12px; }
  .rq-grille-horaires__table tbody th { padding-right: 6px; }
  .rq-grille-horaires__table tbody td { padding-left: 2px; padding-right: 2px; }
}

/* 4. Cibles tactiles : au moins 24 px de haut (WCAG 2.5.8) pour les liens de listes,
      les entrées du sommaire des hubs et le fil d'Ariane. */
@media (max-width: 767px) {
  .rq-lien-simple { display: inline-flex; align-items: center; min-height: 24px; }
  .rq-sommaire-menu .rq-mm-entree { min-height: 32px; padding: 5px 0; margin-bottom: 12px; }
  .cb-pg_fil a, .rq-fil a, .rq-fil__item a { display: inline-block; padding: 3px 0; }
  .rq-chip { min-height: 32px; }
}

/* 5. Pied de page : la barre légale passait à 11 px avec des liens de 15 px de haut. */
@media (max-width: 767px) {
  .cb-ftr_legal_left, .cb-ftr_social_note { font-size: 13px !important; line-height: 19px !important; }
  .cb-ftr_legal_liens a { font-size: 13px !important; line-height: 19px !important; display: inline-flex; align-items: center; min-height: 26px; }
  .cb-ftr_nav a, .cb-ftr_col a { min-height: 26px; display: inline-flex; align-items: center; }
}

/* 6. Prévisions 7 jours : plutôt qu'un tableau de 560 px à faire défiler, une ligne par jour
      (jour et ciel en haut, min/max/pluie/vent en pastilles) sous 640 px. */
@media (max-width: 639px) {
  .rq-meteo-page__jours table, .rq-meteo-page__jours tbody, .rq-meteo-page__jours tr, .rq-meteo-page__jours td, .rq-meteo-page__jours th { display: block; width: auto; }
  .rq-meteo-page__jours thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rq-meteo-page__jours tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid var(--bordure); }
  .rq-meteo-page__jours th[scope="row"] { grid-column: 1 / -1; padding: 0 0 4px; font-family: var(--font-alt); font-size: 17px; }
  .rq-meteo-page__jours td { padding: 2px 0; font-size: 15px; }
  .rq-meteo-page__jours td[data-label="Ciel"] { grid-column: 1 / -1; padding-bottom: 6px; }
  .rq-meteo-page__jours td.rq-num { display: flex; justify-content: space-between; gap: 10px; text-align: left; }
  .rq-meteo-page__jours td.rq-num::before { content: attr(data-label); font-family: var(--font-alt); font-weight: 700; font-size: 13px; color: var(--gris-texte); }
}

/* 7. Pagination (listes d'actualités) et petits liens de service : cibles tactiles.
      Les numéros de page faisaient 9 x 19 px sur mobile. */
@media (max-width: 767px) {
  .cb-el-pagination__items, .cb-el-pagination { flex-wrap: wrap; gap: 6px; }
  .cb-el-pagination__item { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0 10px; border: 1px solid var(--bordure); border-radius: var(--radius-btn); }
  .cb-el-pagination__item--current { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
  .rq-fil-fb__suivre { display: inline-flex; align-items: center; min-height: 26px; }
  .cb-sv_ch_label { font-size: 12px !important; line-height: 17px !important; }
  .cb-sv_ch_bloc { padding-right: 8px !important; }
}

/* 8. Repli : une URL ou un domaine écrit en toutes lettres dans un titre ou un paragraphe peut
      rester plus large que l'écran ; on l'autorise à se couper, sans toucher aux libellés courts. */
@media (max-width: 767px) {
  .cb-el-text a[href^="http"], .cb-el-text strong, .cb-el-text code { overflow-wrap: anywhere; }
}

/* 9. Très petits écrans (≤ 400 px, iPhone SE et Android d'entrée de gamme) : à cette largeur,
      les pictogrammes, flèches et marges mangent la place du texte, qui se coupe en plein mot.
      On resserre les ornements plutôt que le texte. */
@media (max-width: 400px) {
  .rq-carre-fleche, .rq-carre-fleche-noir, .rq-carre-fleche-blanc, .rq-carre-fleche-carte { width: 28px; height: 28px; background-size: 12px 9px; }
  .rq-carte__vues button { white-space: nowrap; font-size: 13px; padding: 0 10px; }
  /* Accès rapides de l'accueil : une tuile et demie visible plutôt que deux illisibles */
  .cb-ar_item { flex-basis: calc(70% - 6px) !important; }
  /* Chiffres clés : « Intercommunalité » doit tenir sur une ligne */
  .cb-sv_ch_bloc { padding-right: 0 !important; }
  /* Équipe municipale : l'étiquette de fonction posée sur le portrait (132 px en deux colonnes) */
  .cb-eq3_c_role { font-size: 12px !important; line-height: 16px !important; padding: 4px 6px !important; }
  /* Numéros utiles de l'accueil : libellé et numéro sur la même ligne laissaient 74 px au libellé */
  [class*="cb-sv_n2_x"], [class*="cb-sv_n1_x"] { flex-direction: column; align-items: flex-start; gap: 2px; }
  /* Météo, détails du jour : deux colonnes de 59 px hachaient les valeurs */
  .rq-meteo-page__details, .rq-meteo__details { grid-template-columns: minmax(0, 1fr) !important; }
  .rq-meteo-page__jours tbody tr { grid-template-columns: minmax(0, 1fr); }
}

/* 10. Kiosque, bloc « dernier bulletin » de l'accueil : couverture et texte côte à côte
       laissaient 64 px au titre sous 480 px. Empilés. */
@media (max-width: 479px) {
  .rq-kiosque--dernier .rq-kiosque__item--grand { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rq-kiosque--dernier .rq-kiosque__item--grand > a, .rq-kiosque--dernier .rq-kiosque__couverture { max-width: 150px; }
}

/* 11. Écrans les plus étroits (≤ 360 px) : dernier cran sur les libellés les plus longs. */
@media (max-width: 360px) {
  .cb-sv_ch_label { font-size: 11px !important; }
}

/* 12. Détails météo sur petit écran : libellés un peu plus étroits, mais toujours alignés. */
@media (max-width: 400px) {
  .rq-meteo-page__details dt { min-width: 70px; }
}

/* ---- Icônes de contact (masques CSS) : téléphone, e-mail, site, Facebook, flèche.
   Trait 2 sur une grille 24, extrémités arrondies — lisibles à 16 px, là où la charte des
   pictogrammes d'interface (trait 0,5) disparaîtrait. La couleur vient du texte. ---- */
:root {
  --rq-ico-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --rq-ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
  --rq-ico-site: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z'/%3E%3C/svg%3E");
  --rq-ico-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
/* ---- Gabarit « Article » : barre d’outils, affiche et visionneuse ----
   Les trois boutons de la maquette (partager, imprimer, agrandir) n’ont de sens qu’avec
   JavaScript : ils arrivent masqués et le script les révèle. ---- */
:root {
  --rq-ico-partage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E");
  --rq-ico-imprimer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E");
  --rq-ico-agrandir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
}

.rq-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rq-outils[hidden], .rq-visuel__zoom[hidden] { display: none; }
.cb-art_outils:has(.rq-outils[hidden]) { display: none; }
.rq-outils__bouton { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border: 1.5px solid var(--encre); border-radius: var(--radius-btn); background: var(--blanc); font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--encre); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.rq-outils__bouton::before, .rq-visuel__zoom::after { content: ""; flex-shrink: 0; width: 18px; height: 18px; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.rq-outils__bouton--partage::before { -webkit-mask-image: var(--rq-ico-partage); mask-image: var(--rq-ico-partage); }
.rq-outils__bouton--imprimer::before { -webkit-mask-image: var(--rq-ico-imprimer); mask-image: var(--rq-ico-imprimer); }
.rq-outils__bouton--agrandir::before { -webkit-mask-image: var(--rq-ico-agrandir); mask-image: var(--rq-ico-agrandir); }
.rq-outils__bouton:hover { background: var(--encre); color: var(--blanc); }
.rq-outils__bouton:focus-visible, .rq-visuel__zoom:focus-visible, .rq-zoom__fermer:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
.rq-outils__bouton.est-fait { border-color: #2E7D4F; color: #2E7D4F; }

.rq-art-dates__maj { display: inline-flex; align-items: center; gap: 20px; }
.rq-art-dates__sep { width: 1px; height: 16px; background: currentColor; opacity: 0.7; }

.rq-visuel { position: relative; background: var(--brume); box-shadow: 0 18px 40px rgba(13, 26, 51, 0.22); }
/* Les actualités arrivent aussi bien en affiche A4 qu’en plan ou en photo paysage :
   on garde les proportions du fichier plutôt qu’un cadre fixe qui laisserait de grandes bandes vides. */
.rq-visuel__image { display: block; width: 100%; height: auto; }
.rq-visuel__zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; background: var(--blanc); box-shadow: var(--ombre-carte); font-family: var(--font-alt); font-weight: 700; font-size: 15px; color: var(--encre); cursor: pointer; }
.rq-visuel__zoom::after { width: 14px; height: 14px; -webkit-mask-image: var(--rq-ico-agrandir); mask-image: var(--rq-ico-agrandir); }
.rq-visuel__zoom:hover { background: var(--encre); color: var(--blanc); }

.rq-zoom { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(13, 26, 51, 0.85); cursor: zoom-out; animation: rq-voile 200ms ease both; }
.rq-zoom__image { max-width: 100%; max-height: 100%; object-fit: contain; background: var(--blanc); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); cursor: default; }
.rq-zoom__fermer { position: absolute; right: 28px; top: 24px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--blanc); font-size: 28px; line-height: 1; color: var(--encre); cursor: pointer; }
@keyframes rq-voile { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rq-zoom { animation: none; } }

/* Sans image à la une, la colonne de l’affiche disparaît et le texte prend toute la largeur. */
.rq-art-sans-visuel .cb-art_visuel { display: none; }
.rq-art-sans-visuel .cb-art_grid { grid-template-columns: minmax(0, 1fr); }
/* Le palier « tablette » de CrocoBuilder commence à 1456 px : sous 1024 px l’affiche et le
   texte ne tiennent plus côte à côte, on les empile. */
@media (max-width: 1023px) {
  body .cb-art_grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body .cb-art_visuel { position: static; width: 100%; max-width: 420px; }
}

/* ---- Impression d’un article ----
   Objectif : une seule feuille A4. La hauteur est la ressource rare, donc l’affiche et le
   texte passent côte à côte et tout le tour du site disparaît. Un article très long finira
   toujours sur une deuxième page : on ne tronque pas le texte pour tenir. */
@page { size: A4 portrait; margin: 12mm; }

@media print {
  .crocoblocks-theme-builder-location--header-location,
  .crocoblocks-theme-builder-location--footer-location,
  .cb-alerte_barre, .rq-sr-only,
  .cb-art_hero_motif, .cb-art_fil, .cb-art_outils, .cb-art_retour,
  .cb-art_derniers, .cb-art_liens, .rq-visuel__zoom { display: none !important; }

  html, body { background: #fff !important; }
  .rq-conteneur { max-width: none !important; padding: 0 !important; }

  .cb-art_hero { min-height: 0 !important; margin: 0 !important; background: none !important; }
  .cb-art_hero_inner { padding: 0 0 5pt !important; gap: 3pt !important; }
  .cb-art_titre { color: var(--encre) !important; font-size: 21pt !important; line-height: 1.12 !important; max-width: none !important; }
  .cb-art_dates { color: #555 !important; font-size: 8.5pt !important; }

  .cb-art_section { padding: 0 !important; }
  .cb-art_grid { display: grid !important; grid-template-columns: 74mm minmax(0, 1fr) !important; gap: 8mm !important; align-items: start !important; }
  .cb-art_visuel { position: static !important; max-width: none !important; }
  .cb-art_col { gap: 5pt !important; max-width: none !important; }

  .rq-visuel { box-shadow: none !important; border: 0.3pt solid #bbb !important; }
  .rq-visuel__image { max-height: 130mm !important; object-fit: contain !important; }

  .cb-art_corps { font-size: 10pt !important; line-height: 1.45 !important; color: #000 !important; }
  .cb-art_corps p { margin: 0 0 4.5pt !important; }
  .cb-art_corps h2 { font-size: 13pt !important; line-height: 1.15 !important; margin: 7pt 0 3pt !important; }
  .cb-art_corps h3 { font-size: 11pt !important; margin: 6pt 0 2pt !important; }
  .cb-art_corps ul { margin: 0 0 4.5pt !important; }
  .cb-art_corps li { margin: 0 0 2pt !important; }
  .cb-art_corps img { max-height: 55mm !important; width: auto !important; margin: 3pt 0 !important; }
  .cb-art_corps a { color: #000 !important; }
  /* Sur le papier, un lien perd sa cible : on l’écrit, en petit. */
  .cb-art_corps a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 7pt; color: #555; word-break: break-all; }

  p, li, h2, h3, figure, .rq-visuel { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}

/* ---- Listings : toutes les cartes d’une grille à la même hauteur ----
   Dans une grille CSS, chaque rangée se cale sur son élément le plus haut : deux titres
   d’actualité de longueurs différentes donnaient des rangées de 394, 396 puis 419 px.
   `grid-auto-rows: 1fr` aligne toutes les rangées, et la carte remplit la case qu’elle
   occupe, faute de quoi le fond blanc s’arrêterait avant le bas. Sans effet sur les pistes
   à défilement horizontal, qui sont en flex. */
.cb-collection__items--columns { grid-auto-rows: 1fr; }
.cb-collection__items--columns > .cb-collection-item { display: flex; }
.cb-collection__items--columns > .cb-collection-item > .cb-collection-item__content { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.cb-collection__items--columns > .cb-collection-item > .cb-collection-item__content > * { flex: 1 1 auto; }
.rq-natif__liste, .rq-fil-fb--page, .rq-annuaire__liste { grid-auto-rows: 1fr; }
.rq-natif__liste > *, .rq-fil-fb--page > *, .rq-annuaire__liste > * { height: 100%; }

/* ---- Verrou tactile des cartes (téléphone) ----
   Transverse : la carte interactive, l’annuaire et la carte d’un événement le partagent,
   donc la règle vit ici et non dans carte.css, qui n’est pas chargé partout.
   Une carte pleine largeur capture le geste de défilement : elle arrive figée, et ce bouton
   rend la main. Au-dessus de 768 px il est masqué, la souris ne pose pas ce problème. */
/* En bas au centre, il tombait sur l’attribution OpenStreetMap et sur les épingles ;
   le coin haut droit est le seul libre (zoom à gauche, légende en bas à gauche). */
.rq-carte-verrou { position: absolute; right: 12px; top: 12px; z-index: 6; height: 40px; padding: 0 16px; border: 1.5px solid var(--encre); border-radius: var(--radius-btn); background: var(--blanc); font-family: var(--font-alt); font-weight: 700; font-size: 14px; color: var(--encre); cursor: pointer; box-shadow: var(--ombre-carte); }
.rq-carte-verrou[hidden] { display: none; }
.rq-carte-verrou:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
/* Selon les cartes, la classe est posée sur un cadre parent (carte interactive, annuaire)
   ou sur le conteneur Leaflet lui-même (carte d’un événement) : les deux cas comptent. */
.est-verrouillee .leaflet-container, .leaflet-container.est-verrouillee { touch-action: pan-y; }

/* ---- Leaflet : attribution (RGAA 10.6) ----
   Les liens « Leaflet » et « OpenStreetMap » sortent en #0078a8 sur un texte #333, soit 2,55:1 —
   sous les 3:1 qui permettraient de les distinguer par la seule couleur. On les souligne.
   Le !important est nécessaire : leaflet.min.css est mis en file selon la page (inc/lieux.php ou
   inc/evenement.php) et passe donc tantôt avant, tantôt après cette feuille, à spécificité égale. */
.leaflet-control-attribution a { text-decoration: underline !important; }

/* Pagination des boucles CrocoBuilder (Toutes les actualités) : en français, numéros, cibles de 44 px ; les bornes inactives (page 1, dernière page) restent masquées. Audit du 24/09/2026. */
.cb-el-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.cb-el-pagination__items { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-el-pagination__item { box-sizing: border-box; min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bordure); background: var(--blanc); font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--encre); text-decoration: none; }
a.cb-el-pagination__item:hover, a.cb-el-pagination__item:focus-visible { border-color: var(--rouge); color: var(--rouge); }
.cb-el-pagination__item--active { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.cb-el-pagination__item--delimiter { border: 0; background: none; min-width: 0; padding: 0 4px; }
.cb-el-pagination__item[aria-disabled="true"] { visibility: hidden; }
/* Toutes les actualités (hub 154) : en page 1, les 4 premières cartes sont déjà « À la une » juste au-dessus. CrocoBuilder
   retire la pagination d’une requête décalée : la boucle garde donc la liste complète et on masque ces 4 cartes en page 1
   (numéro actif 1, ou pas de pagination du tout). Phase 3 de l’audit du 24/09/2026. */
.rq-actus-suite:has(+ .cb-el-pagination .cb-el-pagination__item--active[data-page="1"]) .cb-collection__items > :nth-child(-n+4),
.rq-actus-suite:not(:has(+ .cb-el-pagination)) .cb-collection__items > :nth-child(-n+4) { display: none; }

/* ---- Fin de page : un seul blanc avant le pied ----
   Le conteneur des pages est en flow-root : la marge basse du dernier bloc (souvent 48 px) ne se
   confond pas avec les 100 px de fond de section et s’y ajoutait, soit près de 150 px de blanc
   (jusqu’à 256 px sur Contact & accès) avant le pied de page, lui-même sur fond brume.
   L’accueil a sa propre composition et reste hors de la règle. */
/* Un niveau plus bas aussi : la marge du dernier paragraphe (18 px) ou de la dernière liste de
   documents (32 px) traverse un bloc sans marge intérieure et ressortait sous lui. */
body:not(.home) main > .crocoblocks-document > section:last-child > .rq-conteneur > :last-child,
body:not(.home) main > .crocoblocks-document > section:last-child > .rq-conteneur > :last-child > :last-child { margin-bottom: 0 !important; }


/* Chapô d’événement vide (extrait absent ou simple reprise du texte) : pas de paragraphe fantôme. */
.cb-evt_chapo:empty { display: none; }

/* Pictogramme de catégorie (cartes du hub Vie associative) : le SVG de la catégorie sert de masque, la couleur est celle
   de la catégorie (.rq-cat--<slug>, écrite par roq_lieux_categories_css() comme sur la carte et l’annuaire). Décoratif. */
.rq-picto { display: block; width: 48px; height: 48px; flex-shrink: 0; background-color: var(--rq-cat, var(--rouge)); -webkit-mask: var(--rq-cat-icone) center / contain no-repeat; mask: var(--rq-cat-icone) center / contain no-repeat; }

/* Téléphone : un libellé de bouton trop long pour 320 px (« Feuilleter le Mag n° 11 · spécial budget 2026 ») passe
   à la ligne au lieu de pousser le carré fléché hors de l'écran. Une seule ligne : rien ne change (min-height 42 px). */
@media (max-width: 767px) {
  a.rq-bouton { max-width: 100%; white-space: normal; padding-top: 6px; padding-bottom: 6px; }
  a.rq-bouton > .cb-el-text { min-width: 0; white-space: normal; }
}

/* Liens téléphone : une cible d’au moins 24 px de haut (WCAG 2.2, 2.5.8), relevée par l’audit mobile du 30/09/2026 sur le
   numéro de la mairie en pied de page. :where() garde une spécificité nulle : tout lien téléphone déjà habillé par une classe
   (boutons, pastilles de contact) garde son propre affichage. */
:where(a[href^="tel:"]) { display: inline-block; min-height: 24px; line-height: 24px; }
/* Pied de page : liens du menu (22 px de haut, serrés) et courriel de la mairie portés à 24 px au moins (même audit). */
[data-id^="ftr_"] .pb-nav__link { padding-block: 2px; }
.cb-ftr_ident_addr a { display: inline-block; min-height: 24px; line-height: 24px; }

/* Poids des pages (audit de performance du 01/10/2026). Règles !important : elles remplacent des fonds écrits dans les
   styles des documents CrocoBuilder, sans régénérer les pages.
   - Page avec image à la une : la photo couvre le bandeau, la photo de vignes par défaut dessous n’est plus téléchargée. */
.cb-pg_hero:has(.cb-pg_hero_img) { background-image: none !important; }
/* - Texture « clocher » des sections de services : WebP de 112 Ko (43 Ko sur téléphone) au lieu du PNG de 2,8 Mo. */
[data-id$="_tx"], [data-id="sv_texture"] { background-image: url("assets/img/texture-services.webp") !important; }
@media (max-width: 767px) {
  [data-id$="_tx"], [data-id="sv_texture"] { background-image: url("assets/img/texture-services-1280.webp") !important; }
  /* - Photo de vignes par défaut du bandeau : taille adaptée à la densité de l’écran (80 à 290 Ko au lieu de 433 Ko). */
  .cb-pg_hero {
    background-image: -webkit-image-set(url("/wp-content/uploads/2026/08/hero-vignes-1024x429.jpg") 1x, url("/wp-content/uploads/2026/08/hero-vignes-1536x644.jpg") 2x, url("/wp-content/uploads/2026/08/hero-vignes-2048x858.jpg") 3x) !important;
    background-image: image-set(url("/wp-content/uploads/2026/08/hero-vignes-1024x429.jpg") 1x, url("/wp-content/uploads/2026/08/hero-vignes-1536x644.jpg") 2x, url("/wp-content/uploads/2026/08/hero-vignes-2048x858.jpg") 3x) !important;
  }
}

/* Bandeau d’alerte municipale (gabarit d’en-tête, query-loop « Alerte en cours », assets/js/alerte.js) : styles du gabarit
   recopiés ici le 01/10/2026. CrocoBuilder n’écrit pas dans sa feuille générée les styles d’une boucle de requête vide :
   générée un jour sans alerte, elle laissait le bandeau sans mise en forme quand l’alerte météo IntraMuros est arrivée.
   Mêmes valeurs que le gabarit, sauf « En savoir plus », gardé sur téléphone (seul accès à l’article depuis le bandeau). */
.cb-alerte_barre { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 101; background-color: var(--noir); min-height: 54px; }
.cb-alerte_rangee { display: flex; align-items: center; gap: 12px; min-height: 54px; }
.cb-alerte_pastille { gap: 9px; flex-shrink: 0; }
.cb-alerte_icone { display: inline-flex; flex-shrink: 0; color: var(--encre); }
.cb-alerte_message { flex: 1; min-width: 0; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 18px; color: var(--blanc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-alerte_savoir { flex-shrink: 0; font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.3px; color: var(--jaune-alerte); text-decoration: none; white-space: nowrap; transition: opacity 150ms ease; }
.cb-alerte_savoir:hover { opacity: 0.75; }
.cb-alerte_fermer { flex-shrink: 0; display: inline-flex; align-items: center; font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.3px; color: var(--blanc); white-space: nowrap; cursor: pointer; border: none; background: none; padding: 4px; transition: opacity 150ms ease; }
.cb-alerte_fermer:hover { opacity: 0.7; }
.cb-alerte_donnees { display: none; }
@media (max-width: 767px) {
  .cb-alerte_rangee { gap: 8px; min-height: 48px; }
  .cb-alerte_pastille { font-size: 10px; padding: 6px 8px; gap: 0; }
  .cb-alerte_message { font-size: 12px; line-height: 16px; }
  /* le gabarit masque ce lien sur téléphone : sélecteur plus précis pour passer devant sa feuille générée */
  .cb-alerte_barre .cb-alerte_savoir { display: inline-block; font-size: 11px; line-height: 14px; letter-spacing: 0.2px; }
  .cb-alerte_fermer, .cb-alerte_fermer_txt { font-size: 11px; line-height: 14px; letter-spacing: 0.2px; }
  .cb-alerte_fermer { padding: 4px 0 4px 4px; }
  .cb-alerte_label { display: none; }
}
/* Niveau de priorité de l’alerte (posé par alerte.js en data-niveau) : couleur de la pastille seulement, le bandeau reste
   noir. Information : pastille blanche ; important : jaune (classe rq-pastille-alerte, par défaut) ; urgent : rouge. */
.cb-alerte_barre[data-niveau="information"] .rq-pastille-alerte { background-color: var(--blanc); color: var(--bleu-nuit); }
.cb-alerte_barre[data-niveau="information"] .cb-alerte_icone { color: var(--bleu-nuit); }
.cb-alerte_barre[data-niveau="urgent"] .rq-pastille-alerte { background-color: var(--rouge); color: var(--blanc); }
.cb-alerte_barre[data-niveau="urgent"] .cb-alerte_icone { color: var(--blanc); }

/* Séances du conseil municipal (inc/seances.php, 01/10/2026) : [roq_seance_bandeau] reprend le dessin des bandeaux rouges
   du générateur de pages, [roq_seances] celui des listes datées. Le bouton porte les classes rq-bouton et rq-carre-fleche
   du système de design. */
.rq-seance-bandeau { display: flex; justify-content: space-between; align-items: center; gap: 32px; background: var(--degrade-rouge); padding: 22px 32px; margin-bottom: 40px; }
.rq-seance-bandeau__g { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rq-seance-bandeau__l { font-family: var(--font-alt); font-weight: 700; font-size: 16px; letter-spacing: 1px; color: var(--blanc); }
.rq-seance-bandeau__v { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--blanc); }
.rq-seance-bandeau__n { font-size: 16px; color: var(--blanc); } /* blanc plein (04/10/2026) : à 85 %, le texte passait sous 4,5:1 sur le clair du dégradé rouge */
.rq-seance-bandeau__b { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 767px) {
  .rq-seance-bandeau { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rq-seance-bandeau__b { white-space: normal; }
  .rq-seance-bandeau__btxt { min-width: 0; }
}
.rq-seances__titre { font-family: var(--font-alt); font-weight: 700; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--encre); margin: 0 0 14px; }
.rq-seances { background-color: var(--blanc); box-shadow: var(--ombre-fil); padding: 6px 24px; list-style: none; margin: 0 0 28px; }
.rq-seances__item { display: flex; align-items: center; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--bordure); flex-wrap: wrap; }
.rq-seances__item:last-child { border-bottom: none; }
.rq-seances__date { flex-shrink: 0; width: 64px; height: 64px; background-color: var(--gris-neutre); display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--blanc); font-family: var(--font-body); font-weight: 700; }
.rq-seances__item--avenir .rq-seances__date { background: var(--degrade-rouge); }
.rq-seances__j { font-size: 22px; line-height: 24px; }
.rq-seances__m { font-size: 11px; line-height: 13px; letter-spacing: 0.5px; text-align: center; padding: 0 4px; }
.rq-seances__corps { flex: 1; min-width: 220px; }
.rq-seances__nom { font-family: var(--font-alt); font-weight: 700; font-size: 16px; line-height: 23px; color: var(--encre); margin: 0; }
.rq-seances__avenir { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 3px; background-color: var(--rouge); color: var(--blanc); font-size: 12px; line-height: 20px; letter-spacing: 0.5px; text-transform: uppercase; vertical-align: 1px; }
.rq-seances__texte { font-size: 16px; line-height: 23px; color: var(--gris-texte); margin: 2px 0 0; }
.rq-seances__liens { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.rq-seances__lien { display: inline-block; min-height: 24px; font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 24px; color: var(--encre); text-decoration: none; white-space: nowrap; }
.rq-seances__lien:hover { color: var(--rouge); text-decoration: underline; }
@media (max-width: 767px) {
  .rq-seances__date { width: auto; height: auto; min-width: 64px; min-height: 64px; padding: 6px 10px; }
  .rq-seances__m { font-size: 12px; line-height: 14px; }
}

/* Menus de la cantine (inc/menus-cantine.php, 02/10/2026) : [roq_menus_cantine]. Le menu en cours reprend le dessin des images
   du générateur (ombre fine, légende grise), avec la pastille « Agrandir » des affiches ; les menus précédents sont des
   vignettes dans un accordéon replié. Préfixe body : les règles du document CrocoBuilder arrivent après style.css. */
body .rq-menu { margin: 0 0 28px; }
body .rq-menu__lien { position: relative; display: block; cursor: zoom-in; }
body .rq-menu__image { display: block; width: 100%; height: auto; box-shadow: var(--ombre-fil); }
body .rq-menu__agrandir { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: var(--blanc); box-shadow: var(--ombre-carte); font-family: var(--font-alt); font-weight: 700; font-size: 15px; color: var(--encre); }
body .rq-menu__agrandir::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--rq-ico-agrandir) center / contain no-repeat; mask: var(--rq-ico-agrandir) center / contain no-repeat; }
body .rq-menu__lien:hover .rq-menu__agrandir { background: var(--encre); color: var(--blanc); }
body .rq-menu__lien:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
body .rq-menu__legende { font-size: 14px; line-height: 20px; color: var(--gris-texte); margin: 8px 0 0; }
body .rq-menu__suivant { margin: -12px 0 28px; font-size: 16px; line-height: 24px; color: var(--encre); }
body .rq-menu__suivant-l { font-family: var(--font-alt); font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--rouge); margin-right: 4px; }
body .rq-menu__suivant a { font-weight: 700; color: var(--encre); }
body .rq-menu__suivant a:hover { color: var(--rouge); }
body .rq-menu__vide { font-size: 18px; line-height: 28px; color: var(--encre); margin: 0 0 28px; }
body .rq-menu:last-child, body .rq-menu__suivant:last-child, body .rq-menus-archives:last-child, body .rq-menu__vide:last-child { margin-bottom: 0; }
body .rq-menus-archives { margin: 0 0 28px; }
body .rq-menus-archives__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; list-style: none; margin: 4px 0 0; padding: 0; }
body .rq-menus-archives__lien { display: flex; flex-direction: column; gap: 8px; color: var(--encre); text-decoration: none; cursor: zoom-in; }
body .rq-menus-archives__image { display: block; width: 100%; height: auto; aspect-ratio: 7 / 5; object-fit: cover; object-position: top; background: var(--brume); box-shadow: var(--ombre-fil); }
body .rq-menus-archives__periode { font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 21px; }
body .rq-menus-archives__lien:hover .rq-menus-archives__periode { color: var(--rouge); text-decoration: underline; }
body .rq-menus-archives__lien:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
@media (max-width: 767px) {
  body .rq-menu__agrandir { height: 34px; padding: 0 10px; font-size: 14px; right: 8px; bottom: 8px; }
  body .rq-menus-archives__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* Éditeur CrocoBuilder (canevas : body.crocoblocks-preview), 01/10/2026 : dans le bandeau de l'accueil, le voile sombre couvre
   toute la photo et prenait chaque clic, et le titre « Roquemaure » ignore les clics (voulu sur le site, il chevauche les
   tuiles) : rien n'y était sélectionnable. Dans l'éditeur seulement, le clic traverse le voile (il sélectionne alors le
   bandeau, sa photo de fond) et le titre redevient sélectionnable. Le voile reste accessible par l'arbre des éléments. */
body.crocoblocks-preview .cb-hero_voile { pointer-events: none; }
body.crocoblocks-preview .cb-hero_titre { pointer-events: auto; }

/* Cartes Leaflet (02/10/2026) : leurs calques internes (tuiles 200 à 400, marqueurs 600, boutons 800 à 1000) restaient au niveau
   de la page et passaient devant la fenêtre de recherche (.rq-popup, 200) sur les fiches et les événements. Chaque carte forme
   désormais son propre empilement ; la carte interactive l’était déjà (.rq-carte__leaflet, z-index 1). Même chose pour le
   cadre de la carte d’une fiche, dont le lien « Voir sur la carte » est à 500. */
body .leaflet-container, body .rq-lieu-cote__carte { isolation: isolate; }

/* Listes de documents du générateur de pages (02/10/2026) : sur téléphone, le bouton « Feuilleter » restait à droite du titre et
   ne lui laissait qu'une colonne étroite (mots coupés en 320 px : « d'occupati-on »). Il passe sous le titre, comme dans
   [roq_documents] (inc/documents.php). */
@media (max-width: 767px) {
  body li:has(> a + a.rq-feuilleter) { flex-wrap: wrap; gap: 0 16px; }
  body li:has(> a + a.rq-feuilleter) > a:first-child { flex: 1 1 100%; padding-bottom: 8px; }
  body li:has(> a + a.rq-feuilleter) > a.rq-feuilleter { margin: 0 0 14px 56px; }
}

/* Équipe municipale (page 320), sous 375 px : deux cartes de 134 px laissaient 102 px au texte et « Environnement » se coupait
   en plein mot (audit du 02/10/2026). Marges et corps réduits sur ces seuls écrans. */
@media (max-width: 374px) {
  body [class*="cb-eq"][class*="_c_corps"] { padding-left: 10px !important; padding-right: 10px !important; }
  body [class*="cb-eq"][class*="_c_deleg"] { font-size: 14px !important; }
}

/* Maillage interne (inc/maillage.php, 04/10/2026) : liens posés automatiquement sur la première mention d'un lieu ou d'un
   service. Couleur du texte qui l'entoure (lisible sur les fonds rouges comme sur le blanc), soulignement pour le signaler. */
a.rq-lien-auto { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a.rq-lien-auto:hover, a.rq-lien-auto:focus-visible { text-decoration-thickness: 2px; }

/* ===========================================================================
   Corrections de l’audit du 04/10/2026 (accessibilité et affichage), veille de la mise en ligne
   =========================================================================== */

/* Fil d’Ariane des bandeaux photo (RGAA 3.2) : blanc en 14-16 px, il passait sous 4,5:1 là où la photo est claire
   (ciel, façades : 2,4:1 au pire, médiane sous 4,5:1 sur 4 pages, une partie des lettres sur 16 autres). Il est à mi-hauteur
   du bandeau (42 à 74 % de sa hauteur), là où le voile du gabarit est le plus léger : renforcer tout le voile aurait
   assombri chaque photo. Un voile bleu nuit à 42 %, aux bords fondus, passe donc derrière le seul fil d’Ariane.
   Mesuré sur les 20 pages en cause, à 1 600 et 390 px : plus aucun pixel sous 4,5:1 (minimum 5,3:1). */
.cb-pg_hero .rq-fil { position: relative; isolation: isolate; width: fit-content; max-width: 100%; }
.cb-pg_hero .rq-fil::before {
  content: ""; position: absolute; z-index: -1; inset: -10px -40px; pointer-events: none;
  background: rgba(20, 32, 62, 0.42);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent), linear-gradient(180deg, transparent, #000 10px, #000 calc(100% - 10px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent), linear-gradient(180deg, transparent, #000 10px, #000 calc(100% - 10px), transparent);
  mask-composite: intersect;
}

/* Surtitres et étiquettes sur le dégradé rouge (RGAA 3.2) : le générateur de pages les écrit en blanc à 85 %, qui descend
   à 3,97:1 sur le clair du dégradé (33 pages). Blanc plein ici, en attendant la correction du générateur
   (scripts/v2-pages/types-extra.js et types-hub.js). Les sélecteurs suivent la structure propre à chaque type de section,
   et non le seul suffixe de l’identifiant, que d’autres types emploient sur fond blanc :
   - panneau : <aside> dont le premier enfant est le surtitre (…_s), suivi du titre (…_t) ;
   - chiffres (et chiffres en colonne, chiffres des hubs) : valeur (…_v) puis étiquette (…_l), deux <div> seules ;
   - bandeau : groupe libellé + valeur (…_g), puis la note (…_n).
   Plus spécifiques que les classes de CrocoBuilder (.cb-p…), ils l’emportent sans !important. */
aside > span[data-id$="_s"]:first-child:has(+ [data-id$="_t"]),
div[data-id] > div[data-id$="_v"]:first-child + div[data-id$="_l"]:last-child,
div[data-id$="_g"]:has(> span[data-id$="_l"] + span[data-id$="_v"]) + span[data-id$="_n"] { color: var(--blanc); }

/* Pavés des listes datées (jours de collecte de Démarches…) : le pavé fait 64 px de large sur ordinateur et l’étiquette
   11 px ; « PAVILLONS » ne tenait pas et, avec l’overflow-wrap: break-word des textes (plus haut), se coupait en
   « PAVILLO / NS ». Le pavé s’élargit au besoin (comme sur téléphone, où il est déjà en largeur libre), l’étiquette passe
   à 12 px et ne se coupe plus qu’aux espaces (« CENTRE / ANCIEN »). Pavés à jour et zone (« LUN. / PAVILLONS ») : une seule
   largeur, 112 px, pour que les textes de la liste restent alignés. */
@media (min-width: 768px) {
  li > [data-id$="_d"]:first-child:has(> [data-id$="_j"] + [data-id$="_m"]) { width: auto; min-width: 64px; max-width: 112px; padding: 0 4px; }
  li > [data-id$="_d"]:first-child:has(> [data-id$="_j"]:not(:empty) + [data-id$="_m"]:not(:empty)) { width: 112px; }
  li > [data-id$="_d"]:first-child > [data-id$="_j"] + [data-id$="_m"] { font-size: 12px; line-height: 14px; overflow-wrap: normal; }
}

/* Photos agrandissables de CrocoBuilder, atteignables au clavier depuis le 04/10/2026 (assets/js/agrandissement.js) :
   curseur de loupe, et contour de focus posé à l’intérieur de la photo, que le cadre de la galerie ne rogne pas. */
img[data-wpb-lightbox="1"] { cursor: zoom-in; }
img[data-wpb-lightbox="1"]:focus-visible { outline: 3px solid var(--rouge); outline-offset: -3px; }
.cb-lightbox__close:focus-visible { outline: 3px solid var(--blanc); outline-offset: 2px; box-shadow: 0 0 0 5px var(--encre); }