/* Recherche du hero avec suggestions */
.rq-recherche { position: relative; width: 100%; max-width: 666px; margin: 0 auto; font-family: var(--font-body); }
.rq-recherche__champ { width: 100%; height: 64px; box-sizing: border-box; padding: 0 160px 0 56px; border: 0; border-radius: var(--radius-recherche); background: var(--blanc) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232B2B2B' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") 18px 50% / 24px 24px no-repeat; box-shadow: var(--ombre-recherche); font: inherit; font-size: 16px; color: var(--encre); outline: 0; }
.rq-recherche__champ::placeholder { color: var(--encre); opacity: 1; }
.rq-recherche__champ[aria-expanded="true"] { border-radius: var(--radius-recherche) var(--radius-recherche) 0 0; }
.rq-recherche__bouton { position: absolute; right: 8px; top: 8px; height: 48px; border: 0; cursor: pointer; }
.rq-recherche__liste { position: absolute; left: 0; right: 0; top: 64px; z-index: 5; margin: 0; padding: 8px 0 10px; list-style: none; background: var(--blanc); border-top: 1px solid var(--bordure); border-radius: 0 0 16px 16px; box-shadow: var(--ombre-recherche); overflow: hidden; text-align: left; }
.rq-recherche__item a, .rq-recherche__lien { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px 12px 20px; border-left: 4px solid transparent; text-decoration: none; color: var(--encre); }
.rq-recherche__item.est-actif a, .rq-recherche__item a:hover { background: var(--brume); border-left-color: var(--rouge); }
/* Panneau des suggestions (04/10/2026) : il porte l’habillage du déroulant (.rq-recherche__liste) et contient la liste des
   options (role="listbox", .rq-recherche__options) puis le pied ou le message « aucune page » (assets/js/accueil.js). */
.rq-recherche__panneau[hidden] { display: none; }
.rq-recherche__options { list-style: none; margin: 0; padding: 0; }
.rq-recherche__options[hidden] { display: none; }
.rq-recherche__item.est-actif .rq-recherche__lien, .rq-recherche__item:hover .rq-recherche__lien { background: var(--brume); border-left-color: var(--rouge); }
.rq-recherche__titre { font-weight: 600; font-size: 15.5px; line-height: 20px; }
.rq-recherche__type { font-family: var(--font-alt); font-weight: 700; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--gris-texte); }
.rq-recherche__vide { padding: 14px 24px; font-size: 15px; color: var(--gris-texte); }
/* 16 px au minimum : en dessous, Safari sur iPhone zoome tout seul à la mise au point
   du champ et la page se décale. On ne corrige jamais cela par maximum-scale, qui
   empêcherait aussi le zoom volontaire. */
@media (max-width: 767px) { .rq-recherche__champ { height: 56px; padding-right: 56px; font-size: 16px; } .rq-recherche__bouton { right: 6px; top: 6px; height: 44px; font-size: 0; width: 44px; padding: 0; } .rq-recherche__bouton::after { content: "›"; font-size: 28px; line-height: 1; } }

/* Vidéo de fond */
/* Cadrage plein cadre (comme object-fit: cover) calculé sur le bandeau lui-même (unités de
   conteneur) et sur les proportions réelles de la vidéo (--rq-video-ratio, posé par le shortcode).
   La première largeur/hauteur est un repli pour les navigateurs sans unités de conteneur. */
.rq-video { position: absolute; inset: 0; overflow: hidden; z-index: 0; container-type: size; }
.rq-video__cadre { position: absolute; inset: 0; }
.rq-video__cadre iframe { position: absolute; left: 50%; top: 50%; width: max(100%, 177.8vh); height: max(100%, 56.25vw); width: max(100cqw, 100cqh * var(--rq-video-ratio, 1.7778)); height: max(100cqh, 100cqw / var(--rq-video-ratio, 1.7778)); transform: translate(-50%, -50%); border: 0; pointer-events: none; opacity: 0; transition: opacity 600ms ease; }
.rq-video.est-chargee .rq-video__cadre iframe { opacity: 1; }
/* Ancienne vidéo YouTube : image au format cinéma dans un cadre 16:9 (bandes noires) et habillage
   du lecteur sur les bords, d’où le zoom de 35 %. La vidéo Vimeo (27/09/2026) remplit son cadre : pas de zoom. */
.rq-video--youtube .rq-video__cadre iframe { transform: translate(-50%, -50%) scale(1.35); }
/* Bouton pause (rétabli le 04/10/2026, RGAA 13.8) : frère du bloc vidéo, positionné dans le bandeau (.cb-hero), au-dessus
   du voile, du titre géant (2) et de la recherche (5). En haut à droite, sous l’en-tête qui flotte sur le bandeau :
   en bas, il serait tombé sur le mot « Roquemaure » et sur les accès rapides qui chevauchent le bas du bandeau. */
.rq-video__pause { position: absolute; right: calc((100% - min(1440px, 100% - 242px)) / 2); top: calc(134px + var(--rq-alerte-h, 0px)); z-index: 6; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 12px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .92); color: var(--encre); font-family: var(--font-alt); font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: var(--ombre-carte); }
.rq-video__pause[hidden] { display: none; }
.rq-video__pause:hover { background: var(--blanc); }
.rq-video__pause:focus-visible { outline: 3px solid var(--blanc); outline-offset: 3px; box-shadow: 0 0 0 6px var(--encre); }
.rq-video__pause-icone { flex-shrink: 0; width: 12px; height: 12px; border-left: 4px solid var(--encre); border-right: 4px solid var(--encre); box-sizing: border-box; }
.rq-video__pause.est-en-pause .rq-video__pause-icone { border: 0; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--encre); }
@media (max-width: 1455px) { .rq-video__pause { right: 48px; top: calc(124px + var(--rq-alerte-h, 0px)); } } /* aligné sur le bord droit de l’en-tête */
@media (max-width: 767px) { .rq-video__pause-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rq-video__pause { right: 20px; top: calc(92px + var(--rq-alerte-h, 0px)); width: 40px; padding: 0; justify-content: center; } }

/* Catégories de lieux (accueil) */
.rq-cats-lieux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rq-cats-lieux__item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-left: 4px solid var(--rq-cat, var(--rouge)); background: var(--brume); font-family: var(--font-alt); font-weight: 700; font-size: 16px; line-height: 20px; color: var(--encre); text-decoration: none; white-space: nowrap; }
.rq-cats-lieux__item:hover { background: var(--bordure); }
.rq-cats-lieux__item img { width: 24px; height: 24px; flex-shrink: 0; }
.rq-cats-lieux__item span { flex: 1; min-width: 0; font-size: 13px; line-height: 16px; white-space: normal; overflow-wrap: break-word; hyphens: auto; }
.rq-cats-lieux__item em { flex-shrink: 0; margin-left: auto; padding-left: 4px; font-family: var(--font-body); font-style: normal; font-weight: 600; color: var(--gris-texte); }
/* La maquette mobile est cadrée à 480 px : ses deux colonnes de catégories y tiennent.
   Sous 480 px il ne reste qu’une centaine de pixels par libellé et « Hébergement »,
   « Associations » ou « Randonnées » partent sur trois lignes — on repasse donc à une
   colonne, comme après la mise au point mobile du 22/09. */
@media (min-width: 480px) and (max-width: 767px) { .rq-cats-lieux__item { padding: 8px; gap: 6px; } }
@media (max-width: 479px) { .rq-cats-lieux { grid-template-columns: 1fr; } }

/* Météo dans l'en-tête */
.rq-meteo { display: inline-flex; align-items: center; gap: 6px; }
.rq-meteo__temp { font-weight: 700; }

/* ---------------------------------------------------------------------------
   Animations de la page d'accueil (reprises de la maquette Claude Design)
   --------------------------------------------------------------------------- */
@keyframes rq-depose { from { transform: translate(-50%, -140px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes rq-voile { from { opacity: 0; } to { opacity: 1; } }
@keyframes rq-deroule { from { opacity: 0; transform: scaleY(0.85) translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes rq-apparait { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* Titre géant : dépose à l'arrivée, puis remonte au défilement (--rq-lift piloté en JS, 0 → 1) */
.rq-js .cb-hero_titre { animation: rq-depose 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; translate: 0 calc(var(--rq-lift, 0) * -108px); will-change: transform, translate; }
/* Surtitre « BIENVENUE À » au-dessus du mot géant (le mobile garde « VILLE DE », plus bas). Le titre est
   ancré par le bas : le surtitre l’agrandit vers le haut sans déplacer le mot, et suit sa
   dépose et sa remontée puisqu’il en fait partie. text-indent compense l’espacement final
   pour que le mot reste centré. */
/* Centrage optique du mot géant (28/09/2026) : l’approche du « R » est plus large que celle du « e » final, si bien
   que l’encre du mot était décalée vers la droite de 0,02 em (19 px de marge à gauche, 9 px à droite à 1600 px).
   Le mot recule de ce demi-écart ; le surtitre, qui est dans le même bloc, est remis au centre (le mot mesure
   16,6 % de la largeur utile, donc 0,02 em = 0,325 % de cette largeur).
   Taille calculée sur la largeur utile (fenêtre moins la barre de défilement, --rq-barre posé par accueil.js) et
   non sur 100vw : avec une barre visible (souris sur Mac, Windows), le mot débordait de 11 px sous la barre et le « e »
   touchait le bord droit (0 à 2 px, contre 11 px à gauche du « R »). */
@media (min-width: 768px) {
  body.home .cb-hero_titre { font-size: calc((100vw - var(--rq-barre, 0px)) * 0.166); margin-left: -0.0196em; }
  body.home .cb-hero_titre::before { position: relative; left: calc((100vw - var(--rq-barre, 0px)) * 0.00325); }
}
@media (min-width: 768px) {
  body.home .cb-hero_titre::before { content: "Bienvenue à"; display: block; margin-bottom: clamp(6px, 0.9vw, 16px); font-family: var(--font-alt); font-weight: 700; font-size: clamp(15px, 1.45vw, 26px); line-height: 1; letter-spacing: 0.32em; text-indent: 0.32em; text-transform: uppercase; text-align: center; color: var(--blanc); text-shadow: 0 2px 14px rgba(13, 26, 51, 0.45); }
}

/* Recherche : voile flouté derrière la liste, liste déroulée, items en cascade */
.rq-recherche-voile { position: fixed; inset: 0; z-index: 4; background: rgba(13, 26, 51, 0.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: rq-voile 260ms ease both; }
.rq-recherche { z-index: 5; }
.rq-recherche__liste { animation: rq-deroule 220ms cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: top; max-height: calc(50vh - 130px); overflow-y: auto; }
.rq-recherche__item { animation: rq-apparait 260ms ease both; }
.rq-recherche__item:nth-child(2) { animation-delay: 30ms; } .rq-recherche__item:nth-child(3) { animation-delay: 60ms; } .rq-recherche__item:nth-child(4) { animation-delay: 90ms; } .rq-recherche__item:nth-child(5) { animation-delay: 120ms; } .rq-recherche__item:nth-child(6) { animation-delay: 150ms; }
.rq-recherche__item a, .rq-recherche__lien { transition: background-color 120ms ease, border-color 120ms ease; }
.rq-recherche__pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 8px 0; padding: 12px 18px; background: var(--brume); border-radius: 12px; font-size: 13px; color: var(--gris-texte); }
.rq-recherche__pied kbd { font: inherit; font-weight: 700; padding: 1px 6px; border: 1px solid var(--bordure); border-radius: 3px; background: var(--blanc); margin: 0 4px 0 0; }
.rq-recherche__tout { border: 0; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--rouge); }
.rq-recherche__tout:hover { color: var(--rouge-fonce); }

/* Cartes « En 1 clic » : soulèvement au survol */
.cb-ar_lien { transition: transform 180ms ease, box-shadow 180ms ease; }
.cb-ar_lien:hover, .cb-ar_lien:focus-visible { transform: translateY(-6px); box-shadow: 0 16px 28px rgba(13, 26, 51, 0.22); }
.cb-ar_lien:hover .cb-ar_label, .cb-ar_lien:focus-visible .cb-ar_label { color: var(--rouge); }

/* Cartes agenda / actualités / services : léger soulèvement et zoom de l'image */
/* Les deux cartes d’agenda n’avaient pas de fond : seul leur panneau de texte était blanc,
   et la bande sous la vignette laissait voir le filigrane de la section. Au repos sur fond
   blanc cela ne se remarque qu’au passage du motif ; au survol, la carte se soulève, l’ombre
   la détache du fond et la zone transparente saute aux yeux. Les cartes d’actualité, elles,
   étaient déjà opaques. */
.cb-ag_v_lien, .cb-ag_l_lien { background: var(--blanc, #fff); }
.cb-ag_v_lien, .cb-ag_l_lien, .cb-ac_carte, .cb-sv_kiosque2, .cb-sv_signal2, .cb-sv_clic2 { transition: transform 200ms ease, box-shadow 200ms ease; }
.cb-ag_v_lien:hover, .cb-ag_l_lien:hover, .cb-ac_carte:hover, .cb-sv_kiosque2:hover, .cb-sv_signal2:hover, .cb-sv_clic2:hover { transform: translateY(-4px); box-shadow: 0 18px 32px rgba(13, 26, 51, 0.18); }
.cb-ag_v_media, .cb-ag_l_media, .cb-ac_carte { overflow: hidden; }
.cb-ag_v_img, .cb-ag_l_img, .cb-ac_img { transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
.cb-ag_v_lien:hover .cb-ag_v_img, .cb-ag_l_lien:hover .cb-ag_l_img, .cb-ac_carte:hover .cb-ac_img { transform: scale(1.04); }

/* Bloc agenda « vedette + liste » (accueil, et page Actualités sous le préfixe p154_s5) :
   l’image occupe toute la hauteur de la carte, le panneau blanc se pose dessus en bas
   (demande du 25/09/2026). Le média sort du flux et couvre la carte ; une réserve en haut,
   égale à la hauteur d’image du document CrocoBuilder, garde le panneau à sa place d’origine
   (son débord négatif s’applique toujours). Ces réserves recopient les hauteurs d’image du
   document (vedette 480 / 360 / 220, liste mobile 150, 180 sur Actualités) : à changer ensemble. */
body :is(.cb-ag_v_lien, .cb-p154_s5_ag_v_lien) { --rq-ag-image: 480px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--rq-ag-image); }
body :is(.cb-ag_v_media, .cb-p154_s5_ag_v_media) { position: absolute; inset: 0; }
body :is(.cb-ag_v_img, .cb-p154_s5_ag_v_img) { height: 100%; }
body :is(.cb-ag_v_panneau, .cb-p154_s5_ag_v_panneau) { min-height: 0; }
/* Deux colonnes : la vedette s’étire à la hauteur de la liste, les deux blocs finissent alignés… */
@media (min-width: 1456px) {
  body :is(.cb-ag_grid, .cb-p154_s5_ag_grid) { align-items: stretch; }
  body :is(.cb-ag_vedette, .cb-p154_s5_ag_vedette) > .cb-collection__items { height: 100%; }
  /* …et inversement : quand la vedette est la plus haute, les cartes de liste se partagent
     le surplus ; leur panneau reste collé en bas, l’excédent passe au-dessus, dans l’image. */
  body :is(.cb-ag_liste, .cb-p154_s5_ag_liste) > .cb-collection__items { height: 100%; grid-auto-rows: 1fr; }
}
@media (max-width: 1455px) { body :is(.cb-ag_v_lien, .cb-p154_s5_ag_v_lien) { --rq-ag-image: 360px; } }
/* Liste en lignes : c’est le texte qui donne la hauteur de la carte. Le panneau n’a plus de
   hauteur minimale (186 px laissaient 70 à 110 px de blanc sous la description) ; le média
   s’étire sur la carte et l’image, sortie du flux, le remplit sans rien imposer, pas même une
   affiche en portrait. Plancher de 150 px pour qu’une carte sans description garde une image. */
@media (min-width: 768px) {
  body :is(.cb-ag_l_lien, .cb-p154_s5_ag_l_lien) { align-items: stretch; }
  body :is(.cb-ag_l_panneau, .cb-p154_s5_ag_l_panneau) { min-height: 0; align-self: flex-end; }
  body :is(.cb-ag_l_media, .cb-p154_s5_ag_l_media) { min-height: 150px; }
  body :is(.cb-ag_l_img, .cb-p154_s5_ag_l_img) { position: absolute; inset: 0; height: 100%; }
}
@media (max-width: 767px) {
  body :is(.cb-ag_v_lien, .cb-p154_s5_ag_v_lien) { --rq-ag-image: 220px; }
  body :is(.cb-ag_l_lien, .cb-p154_s5_ag_l_lien) { --rq-ag-image: 150px; position: relative; justify-content: flex-end; padding-top: var(--rq-ag-image); }
  body .cb-p154_s5_ag_l_lien { --rq-ag-image: 180px; }
  body :is(.cb-ag_l_media, .cb-p154_s5_ag_l_media) { position: absolute; inset: 0; }
  body :is(.cb-ag_l_img, .cb-p154_s5_ag_l_img) { height: 100%; }
}

/* Liens fléchés : la flèche glisse au survol */
.rq-lien-fleche .rq-carre-fleche-noir, .rq-lien-fleche .rq-carre-fleche-blanc, .rq-bouton .rq-carre-fleche, .rq-bouton .rq-carre-fleche-noir { transition: transform 180ms ease; }
.rq-lien-fleche:hover .rq-carre-fleche-noir, .rq-lien-fleche:hover .rq-carre-fleche-blanc, .rq-bouton:hover .rq-carre-fleche, .rq-bouton:hover .rq-carre-fleche-noir { transform: translateX(4px); }

/* Apparition des sections au défilement (classe posée par accueil.js) */
.rq-js .rq-reveal { opacity: 0; transform: translateY(26px); transition: opacity 650ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--rq-delai, 0ms); }
.rq-js .rq-reveal.rq-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rq-js .cb-hero_titre { animation: none; translate: none; }
  .rq-recherche-voile, .rq-recherche__liste, .rq-recherche__item { animation: none; }
  .rq-js .rq-reveal { opacity: 1; transform: none; transition: none; }
  .cb-ar_lien, .cb-ag_v_lien, .cb-ag_l_lien, .cb-ac_carte, .cb-ag_v_img, .cb-ag_l_img, .cb-ac_img { transition: none; }
}

/* ================= Accueil sur téléphone — maquette « accueil/mobile.html » =================
   La maquette mobile ne se contente pas de rétrécir le desktop : elle réordonne, resserre et
   met de côté les textes d’accompagnement. Tout ce bloc ne vaut que sous 768 px. */
@media (max-width: 767px) {
  /* --- Haut de page : la vidéo touche le bord supérieur, l’en-tête flotte par-dessus.
     La cale ne sert qu’à réserver la place de l’en-tête fixe ; sur l’accueil on veut
     justement que le hero passe dessous, alerte comprise. --- */
  body.home .cb-hdr_spacer { display: none; }
  /* z-index : la section des accès rapides remonte sur le hero (z-index 3) et coupait
     la recherche qui dépasse sous le bandeau. */
  body.home .cb-hero { margin-top: 0 !important; display: flex; flex-direction: column; justify-content: flex-end; z-index: 4; overflow: visible !important; }
  /* Le hero était en overflow:hidden pour découper la vidéo, ce qui tranchait net la
     recherche qui doit dépasser dessous. Le découpage passe au conteneur de la vidéo. */
  body.home .cb-hero .rq-video { overflow: hidden; }

  /* Titre puis recherche, en bas du hero, comme la maquette. */
  /* Le titre était posé en absolu et centré par translation : repassé dans le flux,
     il faut lever le décalage, sinon il sort de l’écran par la gauche. */
  body.home .cb-hero_titre { position: static !important; order: 2; text-align: center; align-self: stretch; margin: 0 !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; }
  /* Surtitre « VILLE DE » : la maquette le pose au-dessus du mot, en lettres espacées. */
  body.home .cb-hero_titre::before { content: "Ville de"; display: block; margin-bottom: 10px; font-family: var(--font-alt); font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: 4px; text-transform: uppercase; color: var(--blanc); text-shadow: 0 2px 10px rgba(13, 26, 51, 0.35); }
  /* Le style d’origine décale la recherche avec un « top » : on le neutralise, elle suit
     maintenant le titre dans le flux et dépasse de 28 px sous le hero, comme la maquette. */
  body.home .cb-hero_recherche { order: 3; position: relative; top: auto !important; z-index: 5; margin: 18px 0 -28px; padding: 0 20px; box-sizing: border-box; width: 100%; }
  body.home .cb-hero_signature { order: 4; }

  /* Ordre de la maquette : les actualités passent devant l’agenda. */
  body.home .crocoblocks-document { display: flex; flex-direction: column; }
  body.home .cb-hero { order: 1; }
  body.home .cb-ar_section { order: 2; }
  body.home .cb-ac_section { order: 3; }
  body.home .cb-ag_section { order: 4; }
  body.home .cb-vc_section { order: 5; }
  body.home .cb-ex_section { order: 6; }
  /* sv_bande est le filet rouge qui coiffe « Services » : sans ordre explicite il vaut 0
     et remontait tout en haut de la page, d’où un bandeau rouge sous l’en-tête. */
  body.home .cb-sv_bande { order: 7; }
  body.home .cb-sv_section { order: 8; }

  /* Accès rapides : la maquette abandonne la piste au profit d’une grille de trois colonnes. */
  /* La recherche déborde de 28 px sous le hero : la grille doit commencer plus bas,
     sinon les tuiles viennent la toucher. La maquette prévoit 64 px de dégagement. */
  body.home .cb-ar_section { padding-top: 64px !important; }
  body.home .cb-ar_loop .cb-collection__items { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible !important; padding: 0; }
  body.home .cb-ar_item { flex: none !important; min-height: 104px; }
  body.home .cb-ar_prev, body.home .cb-ar_next { display: none; }
  /* En trois colonnes la tuile fait 107 px : les marges d’origine ne laissaient que 71 px
     au libellé et « périscolaire » se coupait en plein mot. Marges et corps de la maquette. */
  body.home .cb-ar_lien { padding: 14px 8px 12px !important; }

  /* --- Ombres : une seule pour tous les blocs de contenu ---
     Sur téléphone se croisaient trois ombres : --ombre-carte-lien (très diffuse, 20 px sans
     décalage — ses halos se rejoignaient entre des tuiles espacées de 10 px), --ombre-fil et
     --ombre-carte. On garde partout --ombre-carte, portée vers le bas donc lisible même sur
     de petits blocs, et les tuiles respirent un peu plus. */
  body.home .cb-ar_loop .cb-collection__items { gap: 14px; }
  body.home .cb-ar_lien,
  body.home .cb-ac_carte, body.home .cb-ag_l_lien, body.home .cb-ag_v_lien,
  body.home .cb-vc_fb, body.home .rq-fil-fb__carte, body.home .cb-vc_contact,
  body.home .cb-sv_kiosque2, body.home .cb-sv_numeros2,
  body.home .cb-sv_signal2, body.home .cb-sv_clic2,
  body.home .rq-carte__fond, body.home .cb-ex_side,
  body.home .rq-recherche__champ { box-shadow: var(--ombre-carte) !important; }
  body.home .cb-ar_label { font-size: 12.5px !important; line-height: 15px !important; hyphens: none; }
  /* Sous 375 px (iPhone SE, 320 px), une tuile sur trois colonnes ne fait plus que 84 px et « périscolaire », « Occupation »
     ou « associations » se coupaient en plein mot (audit du 02/10/2026) : deux colonnes. */
  @media (max-width: 374px) { body.home .cb-ar_loop .cb-collection__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  body.home .cb-ar_icone { width: 44px !important; height: 36px !important; object-fit: contain; }

  /* --- Agenda : la grille débordait de l’écran ---
     Le document déclare bien une seule colonne en `1fr`, mais `1fr` vaut `minmax(auto, 1fr)` :
     la colonne ne descend jamais sous la largeur min-content de son contenu. La liste est une
     piste flex `nowrap` dont le min-content est la somme des cartes (804 px), et la vedette
     partage la même colonne — les deux prenaient donc 804 px sur un écran de 375. La section
     étant en `overflow: hidden`, rien ne dépassait visiblement : les cartes étaient simplement
     coupées à droite, marge gauche à 20 px et rien à droite. `minmax(0, 1fr)` rend la colonne
     compressible ; la piste retrouve son défilement horizontal et la vedette ses deux marges. */
  body.home .cb-ag_grid { grid-template-columns: minmax(0, 1fr) !important; }
  body.home .cb-ag_vedette, body.home .cb-ag_liste { min-width: 0; }
  /* Même défaut dans « Services » : les deux colonnes valaient 204 et 181 px au lieu de
     161,5 chacune, et la colonne de droite sortait de 43 px. */
  body.home .cb-sv_cartes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  body.home .cb-sv_cartes > * { min-width: 0; }

  /* Toute la page tient une gouttière de 20 px ; seuls les accès rapides étaient à 24,
     ce qui décalait leur bloc de 4 px par rapport au titre des actualités juste en dessous. */
  body.home .cb-ar_wrap { padding-left: 20px !important; padding-right: 20px !important; }

  /* Explorer : vignette de carte courte, pas de texte d’introduction, catégories sur deux colonnes. */
  /* La vignette était bridée à 220 px alors que la carte compacte en mesure 460 (réglage
     téléphone de carte.css) : elle débordait et recouvrait la liste des catégories.
     Le conteneur suit maintenant la carte, ramenée à 300 px. */
  body.home .cb-ex_carte { height: auto !important; min-height: 0 !important; }
  body.home .cb-ex_carte .rq-carte__fond { height: 300px; min-height: 0; }
  body.home .cb-ex_carte .rq-carte__lien { display: none; }
  body.home .cb-ex_side_titre, body.home .cb-ex_side_texte, body.home .cb-ex_side_sep { display: none; }
  body.home .rq-cats-lieux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.home .rq-cats-lieux__item { padding: 6px 8px; gap: 6px; }
  body.home .rq-cats-lieux__item img { width: 20px; height: 20px; }
  /* Sans césure : « associations » (12 caractères) tient dans la colonne, la couper
     donnerait quatre lignes pour trois mots. */
  body.home .rq-cats-lieux__item span { font-size: 12px; line-height: 15px; hyphens: none; }
  body.home .rq-cats-lieux__item em { font-size: 12px; }
  /* Sous 375 px, deux colonnes ne laissent que 70 px au libellé : « Associa-tions », « Comme-rces » (audit du 02/10/2026). */
  @media (max-width: 374px) { body.home .rq-cats-lieux { grid-template-columns: minmax(0, 1fr); } }

  /* Services : quatre numéros d’urgence de front, lignes utiles à hauteur de doigt,
     et les deux tuiles côte à côte comme dans la maquette. */
  body.home .cb-sv_cartes { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
  body.home .cb-sv_kiosque2, body.home .cb-sv_numeros2 { grid-column: 1 / -1; }
  body.home .cb-sv_n2_urgences { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px; }
  body.home .cb-sv_n2_u1, body.home .cb-sv_n2_u2, body.home .cb-sv_n2_u3, body.home .cb-sv_n2_u4 { height: 68px !important; min-height: 0 !important; }
  /* « GENDARMERIE » ne tient pas en 14 px dans un pavé de 84 px : la maquette descendait à 9,5 px.
     12 px au moins depuis le 04/10/2026 (audit d’affichage : plus aucun texte sous 12 px ; à 375 px, en 9,5 px,
     « GENDARMERIE » et « URGENCES UE » étaient plus larges que leur pavé et perdaient leur première et leur
     dernière lettre). En 12 px, le libellé le plus long fait environ 90 px : quatre pavés de front ne le
     tiennent qu’à partir de 500 px, en dessous ils passent à deux par ligne. */
  body.home .cb-sv_n2_u1_n, body.home .cb-sv_n2_u2_n, body.home .cb-sv_n2_u3_n, body.home .cb-sv_n2_u4_n { font-size: 26px !important; line-height: 26px !important; }
  body.home .cb-sv_n2_u1_l, body.home .cb-sv_n2_u2_l, body.home .cb-sv_n2_u3_l, body.home .cb-sv_n2_u4_l { font-size: 12px !important; letter-spacing: 0.4px !important; white-space: nowrap; }
  body.home .cb-sv_n2_utiles { gap: 8px; }
  @media (max-width: 499px) { body.home .cb-sv_n2_urgences { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
  /* Les lignes passaient en colonne dans une hauteur fixe de 44 px : le numéro sortait du
     cadre. Libellé à gauche, numéro à droite, et la ligne grandit si le libellé passe à la ligne. */
  body.home .cb-sv_n2_x1, body.home .cb-sv_n2_x2, body.home .cb-sv_n2_x3 { min-height: 48px !important; height: auto !important; padding: 8px 12px !important; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: space-between !important; column-gap: 12px; text-align: left; }
  body.home .cb-sv_n2_x1_l, body.home .cb-sv_n2_x2_l, body.home .cb-sv_n2_x3_l { font-size: 15px !important; line-height: 20px !important; }
  body.home .cb-sv_n2_x1_v, body.home .cb-sv_n2_x2_v, body.home .cb-sv_n2_x3_v { font-size: 15px !important; line-height: 20px !important; white-space: nowrap; }
  body.home .cb-sv_n2_note, body.home .cb-sv_k2_texte { display: none; }
  /* Côte à côte, chaque tuile ne laissait que 109 px au titre de 28 px : « problè-me ».
     Empilées, elles gardent leur titre sur une ligne et leur texte d’accompagnement. */
  body.home .cb-sv_signal2, body.home .cb-sv_clic2 { grid-column: 1 / -1; min-height: 0; }
}

/* Accès rapides : les six tuiles côte à côte sur ordinateur, sans carrousel ; les flèches ne s'affichent que si la piste
   déborde (acces-rapides.js). Audit du 24/09/2026, fiche 195. */
@media (min-width: 1456px) {
  body.home .cb-ar_item { flex-basis: calc((100% - 175px) / 6) !important; }
}

/* Suggestions du bandeau (moteur maison, 1.49.1) : section visée et extrait sous le titre. */
.rq-recherche__titre { display: block; min-width: 0; }
.rq-recherche__section { font-weight: 500; color: var(--bleu-nuit); }
.rq-recherche__extrait { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-weight: 400; font-size: 13.5px; line-height: 18px; color: var(--gris-texte); }
.rq-recherche__type { flex: 0 0 auto; }

/* Recherche du bandeau d'accueil en verre dépoli, « liquid glass » (01/10/2026, demandes successives de Dorian) :
   ordinateur seulement (au-delà du palier tablette de 1455 px) ; tablette et téléphone gardent la barre blanche d'origine.
   - fond blanc à 15 %, flou 8 px et saturation de la vidéo derrière, sans liseré, ombre portée ;
   - texte et loupe en blanc, ombre sombre pour les passages clairs de la vidéo ;
   - en saisie (focus, liste ouverte), fond presque opaque et texte foncé (blanc sur blanc sinon) ;
   - sans backdrop-filter : fond à 85 % et texte foncé. */
@media (min-width: 1456px) {
  body.home .cb-hero .rq-recherche__champ {
    background-color: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    backdrop-filter: blur(8px) saturate(160%);
    color: var(--blanc);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.4);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
    border: 0;
    box-shadow: 0 10px 30px rgba(13, 26, 51, 0.22) !important;
    transition: background-color 180ms ease;
  }
  body.home .cb-hero .rq-recherche__champ::placeholder { color: var(--blanc); opacity: 1; }
  body.home .cb-hero .rq-recherche__champ:focus,
  body.home .cb-hero .rq-recherche__champ[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.92); color: var(--encre); text-shadow: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232B2B2B' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
  }
  body.home .cb-hero .rq-recherche__champ:focus::placeholder,
  body.home .cb-hero .rq-recherche__champ[aria-expanded="true"]::placeholder { color: var(--gris-texte); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 1456px) {
    body.home .cb-hero .rq-recherche__champ { background-color: rgba(255, 255, 255, 0.85); color: var(--encre); text-shadow: none; }
    body.home .cb-hero .rq-recherche__champ::placeholder { color: var(--encre); }
  }
}