/* Page d'accueil diorama (/labo/accueil) — feuille autonome, sans Tailwind ni application.css.
   Mobile d'abord (cible : docs/maquettes/declic-maquette-mobile-b-v1.png), puis tablette
   (768–1023 px, le mobile élargi) et bureau (≥ 1024 px : panneau gauche de 380 px + carte). */

:root {
  --violet: #5b3df5;
  --violet-fonce: #4527d9;
  --violet-pale: #efebff;
  --encre: #1d1a2b;
  --gris: #6b6880;
  --gris-clair: #e8e6f0;
  --fond: #f7f6fb;
  --blanc: #ffffff;
  --rose: #e8409a;
  --ombre: 0 6px 24px rgba(29, 26, 43, 0.10);
  --ombre-legere: 0 2px 10px rgba(29, 26, 43, 0.08);
  --rayon: 18px;
  /* Hauteur réelle de la tab bar (safe area iPhone comprise) : utilisée par la barre, la carte plein écran et le corps de page. */
  --tabbar-h: calc(64px + env(safe-area-inset-bottom));
  --poignee-h: 56px; /* poignée de la bottom sheet repliée */
  --sheet-h: 55dvh; /* bottom sheet dépliée */
  --legende-h: 62px; /* légende des catégories, posée au-dessus de la poignée */
  --barre-h: 64px; /* barre collée en haut, sans marge */
  --gouttiere: 16px;
  /* La table sur laquelle la maquette est posée (diorama/contour.js), son socle et son ombre. */
  --table: #f1ebe1;
  --table-fond: radial-gradient(ellipse 120% 90% at 50% 45%, #f6f1e9 0%, var(--table) 55%, #e9e0d2 100%);
  --socle: #cdb899;
  --socle-h: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.acc-corps {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--encre);
  background: var(--fond);
  overflow-x: hidden;
  padding-bottom: var(--tabbar-h);
}

/* :where() : spécificité nulle, les classes de composants prennent le pas sur ces remises à zéro. */
.acc :where(a) { color: inherit; }
.acc :where(button, select, input) { font: inherit; color: inherit; }
.acc svg { flex: none; }
.acc img { max-width: 100%; }
.acc-violet { color: var(--violet); }
.acc-note { margin: 0; font-size: 13px; color: var(--gris); }

.acc :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--violet) 55%, transparent);
  outline-offset: 2px;
}

.acc-lien-violet {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--violet) !important; font-weight: 700; font-size: 14px;
  text-decoration: none; white-space: nowrap;
}
.acc-lien-violet:hover { color: var(--violet-fonce) !important; }

/* ─── Logo ─────────────────────────────────────────────────────────────────────── */
.acc-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 22px; text-decoration: none; letter-spacing: -0.01em;
}
.acc-logo-carre {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #7b5cff, var(--violet-fonce));
  color: var(--blanc); font-size: 17px; font-weight: 800;
  box-shadow: 0 4px 12px rgba(91, 61, 245, 0.35);
}

/* ─── Barre du haut (bureau seulement) ─────────────────────────────────────────── */
.acc-barre { display: none; }

/* ─── Écran principal : le diorama occupe tout l'espace entre le haut et la tab bar ── */
.acc-ecran {
  position: relative;
  display: grid;
  grid-template-areas: "carte";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: calc(100vh - var(--tabbar-h));
  height: calc(100dvh - var(--tabbar-h)); /* dvh : suit la barre d'URL mobile */
  overflow: clip; /* la sheet repliée dépasse sous l'écran : clip la coupe sans rendre l'élément défilable */
}

/* Les commandes flottent au-dessus de la carte : fond blanc translucide, flou, coins arrondis. */
.acc-tete {
  grid-area: carte;
  position: relative; z-index: 500;
  align-self: start;
  display: flex; flex-direction: column; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) var(--gouttiere) 0;
  pointer-events: none;
}
.acc-tete > * { pointer-events: auto; }

/* Header compact, sur la carte : aucun fond. Logo et baseline sont blancs avec une ombre douce, soutenus par
   un dégradé sombre en haut de la carte ; la pilule de recherche porte seule le contraste. Deux colonnes :
   marque (logo, baseline dessous) à gauche, recherche à droite. */
.acc-entete {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0;
  background: none; pointer-events: none; /* les gestes passent à la carte dans les zones vides */
}
.acc-entete .acc-logo, .acc-entete .acc-recherche { pointer-events: auto; }
.acc-marque { flex: none; display: flex; flex-direction: column; gap: 2px; width: 132px; }
.acc-entete .acc-logo { align-self: flex-start; font-size: 20px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.acc-entete .acc-logo-carre { width: 30px; height: 30px; font-size: 15px; }
.acc-baseline {
  margin: 0; font-size: 12px; line-height: 1.25; font-weight: 600; text-wrap: balance;
  color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
/* Recherche : pilule de verre, loupe à gauche, cible tactile de 44 px au moins. */
.acc-recherche {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; margin: 0;
  border-radius: 999px; background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(91, 61, 245, 0.18); color: var(--gris); cursor: text;
}
.acc-recherche:focus-within { background: var(--blanc); box-shadow: inset 0 0 0 2px var(--violet); }
.acc-recherche svg { color: var(--violet); }
.acc-recherche input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: 0;
  font-size: 16px; /* 16 px : iOS ne zoome pas la page au focus */ color: var(--encre); text-overflow: ellipsis;
}
.acc-recherche input:focus-visible { outline: 0; } /* l'anneau est sur la pilule (:focus-within) */
.acc-recherche input::placeholder { font-size: 13px; color: var(--gris); opacity: 1; }
.acc-recherche input::-webkit-search-cancel-button { cursor: pointer; }
/* Hors de la carte (« Pourquoi Déclic ? ») : le header reste dans le flux, aux gouttières de la page. */
.acc > .acc-entete { margin: calc(10px + env(safe-area-inset-top)) var(--gouttiere) 0; pointer-events: auto; }
/* Sur fond de page clair (hors carte), retour aux couleurs sombres. */
.acc > .acc-entete .acc-logo { color: var(--encre); text-shadow: none; }
.acc > .acc-entete .acc-baseline { color: var(--violet-fonce); text-shadow: none; }

/* Dégradé sombre en haut de la carte (mobile) : soutient le contraste du logo, sans bande visible. */
@media (max-width: 767.98px) {
  .acc-tete::before {
    content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 120px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)); pointer-events: none;
  }
}

/* Hors bureau, l'accroche ne prend pas de hauteur au-dessus du diorama : elle reste dans la page
   (titre h1, lu par les lecteurs d'écran) mais masquée. Elle s'affiche dans le panneau gauche du bureau. */
.acc-accroche {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.acc-accroche em { font-style: normal; color: var(--violet); }

/* La légende : six catégories sur une ligne (375 px sans défilement), cellules égales, texte à la
   ligne si besoin. Posée au-dessus de la poignée du volet, dans le volet : elle monte avec lui. */
.acc-categories {
  position: absolute; left: var(--gouttiere); right: var(--gouttiere); bottom: calc(100% + 8px);
  height: var(--legende-h); align-items: center;
  display: flex; gap: 0; padding: 4px 2px;
  border-radius: 20px; background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--ombre-legere);
}
.acc-cat {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 3px 0 4px; border: 0; border-radius: 12px; background: transparent;
  cursor: pointer; font-size: 9px; line-height: 1.1; font-weight: 700; text-align: center; letter-spacing: -0.02em;
}
.acc-cat img { width: 34px; height: 34px; filter: drop-shadow(0 3px 4px rgba(29, 26, 43, 0.18)); transition: transform 0.15s; }
.acc-cat span { max-width: 100%; }
.acc-cat small {
  position: absolute; top: -1px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--c, var(--violet)); color: var(--blanc);
  font-size: 10px; line-height: 16px; text-shadow: none;
}
.acc-cat small:empty { display: none; }
.acc-cat-icone { display: contents; } /* bureau et tablette : le badge se repère sur la cellule */
.acc-cat:hover img { transform: translateY(-2px); }
.acc-cat[aria-pressed="true"] { background: color-mix(in srgb, var(--c, var(--violet)) 20%, var(--blanc)); box-shadow: inset 0 0 0 2px var(--c, var(--violet)); }
.acc-cat--vide { opacity: 0.55; }

/* Mobile et tablette : la légende flotte sur la carte en verre dépoli clair (le diorama reste deviné).
   Sans `backdrop-filter`, un fond plus opaque garde les libellés lisibles. Les gestes passent à la carte
   entre les catégories. Le bureau range la légende dans son panneau blanc : rien ne change là-bas. */
@media (max-width: 1023.98px) {
  .acc-categories {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    pointer-events: none;
  }
  .acc-cat { pointer-events: auto; min-height: 44px; color: var(--encre); font-size: 11px; font-weight: 600; }
  .acc-cat img { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25)); }
  /* Active ou filtrée : pastille blanche plus opaque, libellé plus gras. */
  .acc-cat[aria-pressed="true"] { background: rgba(255, 255, 255, 0.85); box-shadow: none; font-weight: 800; }
}
/* Téléphones étroits : à 11 px, « Entreprendre » (≈ 68 px) déborde de sa cellule de 52 px et touche ses voisines.
   Barre élargie à 8 px du bord et libellés à 10 px, resserrés. */
/* Téléphone : six cellules de même hauteur, alignées sur le haut. Le libellé réserve deux lignes (Belles Histoires
   passe sur deux lignes, les autres sur une, centrée dans la zone) : toutes les icônes partagent la même ligne,
   et le badge se repère sur l'enveloppe de l'icône, donc au même endroit pour les six. Avant, les cellules étaient
   centrées verticalement dans la barre : la plus haute (deux lignes) remontait et son badge avec elle. */
@media (max-width: 767.98px) {
  :root { --legende-h: 76px; }
  .acc-categories { align-items: stretch; }
  .acc-cat { align-self: stretch; justify-content: flex-start; padding: 4px 0 2px; gap: 2px; }
  .acc-cat-icone { display: block; position: relative; flex: none; width: 34px; height: 34px; }
  .acc-cat-icone img { display: block; }
  .acc-cat small { top: -4px; right: -8px; }
  .acc-cat-libelle { display: flex; align-items: center; justify-content: center; min-height: 24px; line-height: 12px; text-wrap: balance; }
}
@media (max-width: 419.98px) {
  .acc-categories { left: 8px; right: 8px; }
  .acc-cat { font-size: 10px; letter-spacing: -0.04em; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 1023.98px) { .acc-categories { background: rgba(255, 255, 255, 0.8); } }
}

/* ─── La carte ─────────────────────────────────────────────────────────────────── */
.acc-carte {
  grid-area: carte;
  position: relative;
  background: var(--table-fond);
  overflow: hidden;
  /* Pins et bouquets (diorama/reglages.js#PINS) : injectées une fois par le contrôleur
     (appliquerReglagesPins), pour n'écrire ces valeurs qu'à un seul endroit. */
  --taille-icone: var(--taille-icone-bureau, 52px);
  --pin-pied: calc(var(--taille-icone) + var(--tige-longueur, 44px) - var(--pin-recouvrement, 4px));
}
@media (max-width: 699.98px) {
  .acc-carte { --taille-icone: var(--taille-icone-mobile, 44px); }
}
/* z-index : Leaflet numérote ses volets jusqu'à 1000, ils restent enfermés ici, sous la sheet. */
.acc-carte-fond { position: absolute; inset: 0; z-index: 0; background: var(--table-fond); }
.acc-carte-fond.leaflet-container { font: inherit; background: var(--table-fond); }
/* Jointure entre deux dalles : sur un écran à échelle fractionnaire (mobile, dpr 2-3), Chrome laisse parfois un
   filet de fond clair entre deux rangées de dalles (défaut connu de Leaflet). Le contour transparent fait
   recouvrir les dalles d'un sous-pixel. */
.acc-carte .leaflet-tile { outline: 1px solid transparent; }
/* Sous le bord bas du plateau : une tranche de terre, et l'ombre portée sur la table. */
.leaflet-container .diorama-socle { fill: var(--socle); transform: translateY(var(--socle-h)); }
.leaflet-container .diorama-ombre { fill: rgba(92, 70, 40, 0.28); transform: translateY(calc(var(--socle-h) + 6px)); filter: url(#diorama-flou-ombre); }

.acc-commandes {
  --commandes-bas: calc(var(--poignee-h) + var(--legende-h) + 20px);
  position: absolute; right: var(--gouttiere); bottom: var(--commandes-bas); z-index: 600;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  transition: opacity 250ms ease-out, visibility 250ms;
}
.acc-rond-calques {
  display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: var(--blanc); box-shadow: var(--ombre); cursor: pointer;
}
.acc-rond-calques:hover, .acc-rond-calques[aria-expanded="true"] { background: var(--violet-pale); color: var(--violet); }
/* « Me localiser » : pastille en bas à gauche de la carte, à droite de l'attribution « ⓘ ». */
.acc-localiser {
  position: absolute; left: calc(var(--gouttiere) + 36px); bottom: calc(var(--poignee-h) + var(--legende-h) + 12px); z-index: 600;
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 999px;
  background: var(--blanc); box-shadow: var(--ombre); font-size: 14px; font-weight: 800; cursor: pointer;
  transition: opacity 250ms ease-out, visibility 250ms;
}
.acc-localiser svg { color: var(--violet); }
.acc-localiser:hover { background: var(--violet-pale); color: var(--violet); }
.acc-ecran:has(.acc-volet--ouvert) .acc-localiser { opacity: 0; visibility: hidden; }
/* Mobile et tablette : icône seule, rond de 44 px comme les boutons calques et zoom (le libellé reste
   lisible par les lecteurs d'écran via aria-label). */
@media (max-width: 1023.98px) {
  .acc-localiser { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; }
  .acc-localiser svg { width: 20px; height: 20px; }
  .acc-localiser-libelle { display: none; }
}

/* ─── Le panneau « Calques » : verre dépoli, à gauche du bouton (feuille basse sur mobile) ── */
.acc-calques-voile { position: absolute; inset: 0; z-index: 590; }
.acc-calques {
  position: absolute; z-index: 700;
  right: calc(var(--gouttiere) + 46px + 12px);
  bottom: calc(var(--poignee-h) + var(--legende-h) + 20px + 92px + 10px); /* bas du bouton Calques */
  width: 256px; max-height: calc(100% - 120px); overflow: auto;
  padding: 12px 14px 14px; border-radius: var(--rayon);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--ombre), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.acc-calques[hidden], .acc-calques-voile[hidden], .acc-calques-rubrique[hidden] { display: none; }
.acc-calques-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.acc-calques-tete h2 { margin: 0; font-size: 15px; font-weight: 800; }
.acc-calques-fermer {
  display: grid; place-items: center; width: 32px; height: 32px; margin-right: -6px;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--gris);
}
.acc-calques-fermer:hover { background: rgba(29, 26, 43, 0.06); color: var(--encre); }
.acc-calques-rubrique { margin: 8px 0 0; padding: 0; border: 0; min-width: 0; }
.acc-calques-rubrique legend {
  padding: 0; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gris);
}
/* Fond : deux choix côte à côte, en segment. */
.acc-calques-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(29, 26, 43, 0.06); }
.acc-calques-option { position: relative; }
.acc-calques-option input, .acc-calques-ligne input { position: absolute; opacity: 0; pointer-events: none; }
.acc-calques-option span {
  display: block; padding: 8px 6px; border-radius: 9px; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--gris); cursor: pointer;
}
.acc-calques-option input:checked + span { background: var(--blanc); color: var(--violet); box-shadow: var(--ombre-legere); }
.acc-calques-option input:disabled + span { opacity: 0.45; cursor: not-allowed; }
.acc-calques-option input:focus-visible + span,
.acc-calques-ligne input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--violet) 55%, transparent); outline-offset: 1px; }
/* Ambiance : une liste, le choix coché en violet ; « Automatique » dit ce qu'il a retenu. */
.acc-calques-liste { display: flex; flex-direction: column; gap: 2px; }
.acc-calques-ligne { position: relative; }
.acc-calques-ligne span {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.acc-calques-ligne span:hover { background: rgba(29, 26, 43, 0.05); }
.acc-calques-ligne input:checked + span { background: var(--violet-pale); color: var(--violet); font-weight: 700; }
/* Sous « Automatique » : l'ambiance qu'il retient maintenant (« Automatique : heure bleue »). */
.acc-calques-ligne:has(small) span { justify-content: flex-start; gap: 0; }
.acc-calques-ligne small { font-size: inherit; font-weight: 500; color: var(--gris); white-space: pre; }
.acc-calques-ligne small:empty { display: none; }
.acc-calques-interrupteur {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding: 7px 10px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.acc-calques-interrupteur input {
  appearance: none; position: relative; flex: none; width: 38px; height: 22px; margin: 0;
  border-radius: 11px; background: #cfccda; cursor: pointer; transition: background 150ms;
}
.acc-calques-interrupteur input::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--blanc); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 150ms;
}
.acc-calques-interrupteur input:checked { background: var(--violet); }
.acc-calques-interrupteur input:checked::after { transform: translateX(16px); }
/* Ambiance : « Automatique » en tête (il dit ce qu'il retient), puis moment, saison et météo en puces. */
.acc-calques-auto { margin-top: 0; padding-inline: 2px; }
.acc-calques-auto span { display: flex; flex-wrap: wrap; align-items: baseline; }
.acc-calques-auto small { font-size: 12.5px; font-weight: 500; color: var(--gris); white-space: pre-wrap; }
.acc-calques-auto small:empty { display: none; }
.acc-calques-reglage { margin-top: 6px; }
.acc-calques-sous-titre { display: block; margin: 0 0 4px 2px; font-size: 12px; font-weight: 700; color: var(--gris); }
.acc-calques-puces { display: flex; flex-wrap: wrap; gap: 4px; }
.acc-calques-puce { position: relative; }
.acc-calques-puce input { position: absolute; opacity: 0; pointer-events: none; }
.acc-calques-puce span {
  display: block; padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(29, 26, 43, 0.06); color: var(--encre); cursor: pointer; transition: background 120ms, color 120ms;
}
.acc-calques-puce span:hover { background: rgba(29, 26, 43, 0.1); }
.acc-calques-puce input:checked + span { background: var(--violet); color: var(--blanc); font-weight: 700; }
.acc-calques-puce input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--violet) 55%, transparent); outline-offset: 1px; }
/* En automatique, les puces montrent ce qui est retenu, en plus discret : un choix à la main en sort. */
.acc-calques-rubrique:has(.acc-calques-auto input:checked) .acc-calques-puce input:checked + span {
  background: color-mix(in srgb, var(--violet) 22%, var(--blanc)); color: var(--violet);
}

/* Pluie et neige (diorama/precipitations) : au-dessus des dalles, sous les pins, jamais cliquables. */
.acc-precipitations { position: absolute; left: 0; top: 0; pointer-events: none; }
/* La nuit, les pins gardent un halo clair : ils restent pleinement lisibles sur la ville sombre. */
[data-moment="nuit"] .pin-picto {
  filter: drop-shadow(0 0 1.5px var(--blanc)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 12px rgba(255, 244, 220, 0.75));
}
[data-moment="nuit"] .pin-tige { background: rgba(255, 255, 255, 0.98); box-shadow: 0 0 4px rgba(255, 255, 255, 0.8); }
[data-moment="nuit"] .pin-socle { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent), 0 0 10px rgba(255, 255, 255, 0.85); }
[data-moment="nuit"] .acc-bouquet { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)); }

/* Mobile : feuille basse compacte, par-dessus la tab bar, sur un voile qui assombrit la carte. */
@media (max-width: 699.98px) {
  .acc-calques-voile { position: fixed; z-index: 1140; background: rgba(29, 26, 43, 0.28); }
  .acc-calques {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1150; width: auto; max-height: 70dvh;
    padding: 10px var(--gouttiere) calc(18px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0; background: rgba(255, 255, 255, 0.92);
  }
  .acc-calques::before {
    content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: #cfccda;
  }
}

.acc-zoom { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.acc-zoom-pile button {
  display: grid; place-items: center; width: 46px; height: 46px; border: 0; background: var(--blanc); cursor: pointer;
}
.acc-zoom-pile { display: flex; flex-direction: column; border-radius: 23px; overflow: hidden; box-shadow: var(--ombre); }
.acc-zoom-pile button + button { border-top: 1px solid var(--gris-clair); }
.acc-zoom-pile button:hover { background: var(--violet-pale); }

.acc-alerte {
  position: absolute; left: var(--gouttiere); right: var(--gouttiere); top: 50%; z-index: 800;
  margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--encre); color: var(--blanc);
  font-size: 14px; box-shadow: var(--ombre);
}
.acc-alerte[hidden] { display: none; }

/* Attribution obligatoire, repliée en « ⓘ ». */
.leaflet-control-attribution.acc-attribution {
  margin: 0 0 10px var(--gouttiere) !important; max-width: min(92vw, 520px);
  border-radius: 999px; background: rgba(255, 255, 255, 0.9); cursor: pointer;
  font-size: 11px; line-height: 1.4; color: var(--gris); padding: 3px 9px;
}
.acc-attribution:not(.acc-attribution--ouverte) { font-size: 0; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; }
.acc-attribution:not(.acc-attribution--ouverte)::before { content: "ⓘ"; font-size: 15px; color: var(--encre); }
.acc-attribution--ouverte { border-radius: 12px; }
.acc-carte .leaflet-bottom.leaflet-left { bottom: calc(var(--poignee-h) + var(--legende-h) + 8px); transition: transform 250ms ease-out; }
/* Sheet dépliée : l'attribution (obligatoire) monte avec elle ; zoom et recentrage s'effacent, le
   temps de l'ouverture, plutôt que de recouvrir les commandes du haut (le pincement zoome toujours). */
.acc-ecran:has(.acc-volet--ouvert) .acc-carte .leaflet-bottom.leaflet-left {
  transform: translateY(calc(var(--poignee-h) - var(--sheet-h)));
}
.acc-ecran:has(.acc-volet--ouvert) .acc-commandes { opacity: 0; visibility: hidden; }

/* Mobile et tablette, accueil seulement (.acc-ecran) : les contrôles forment une colonne à droite, sur un même axe,
   de haut en bas calques · zoom · localisation · information (ⓘ), 8 px entre les blocs, au-dessus de la légende.
   Les boutons sont petits et discrets, mais gardent une zone tactile de 44 px (pseudo-élément transparent).
   --b0 : haut de la légende, à partir du bas de l'écran. Le bureau garde ses règles plus bas. */
@media (max-width: 1023.98px) {
  .acc-ecran {
    --b0: calc(var(--poignee-h) + var(--legende-h) + 8px);
    --anneau: 0 0 0 2px var(--violet);
  }
  /* Colonne : calques (36) + 8 + zoom (72) au-dessus de la localisation (32) + 8 et de l'info (28) + 8. */
  .acc-ecran .acc-commandes { --commandes-bas: calc(var(--b0) + 84px); width: 36px; align-items: center; gap: 8px; }
  .acc-ecran .acc-rond-calques { position: relative; width: 36px; height: 36px; }
  .acc-ecran .acc-rond-calques svg { width: 18px; height: 18px; }
  .acc-ecran .acc-zoom-pile { border-radius: 18px; overflow: visible; }
  .acc-ecran .acc-zoom-pile button { position: relative; width: 36px; height: 36px; }
  .acc-ecran .acc-zoom-pile button:first-child { border-radius: 18px 18px 0 0; }
  .acc-ecran .acc-zoom-pile button:last-child { border-radius: 0 0 18px 18px; }
  .acc-ecran .acc-zoom-pile svg { width: 16px; height: 16px; }
  .acc-ecran .acc-rond-calques::after, .acc-ecran .acc-zoom-pile button::after,
  .acc-ecran .acc-localiser::after, .acc-ecran .acc-attribution:not(.acc-attribution--ouverte)::after {
    content: ""; position: absolute; inset: var(--zone, -4px); /* zone tactile de 44 px autour du bouton visible */
  }
  .acc-ecran .acc-localiser {
    left: auto; right: calc(var(--gouttiere) + 2px); bottom: calc(var(--b0) + 44px);
    width: 32px; height: 32px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); --zone: -6px;
  }
  .acc-ecran .acc-localiser svg { width: 16px; height: 16px; }
  /* Attribution (obligatoire) : le « ⓘ » clôt la colonne ; dépliée, le texte s'étend vers la gauche. */
  .acc-ecran .acc-carte .leaflet-bottom.leaflet-left { left: auto; right: calc(var(--gouttiere) + 4px); bottom: calc(var(--b0) + 8px); }
  .acc-ecran .leaflet-control-attribution.acc-attribution { margin: 0 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); --zone: -8px; }
  .acc-ecran .acc-attribution:not(.acc-attribution--ouverte) {
    position: relative; width: 28px; height: 28px; background: rgba(255, 255, 255, 0.7);
  }
  .acc-ecran .acc-attribution:not(.acc-attribution--ouverte)::before { font-size: 14px; }
  /* Focus et état actif : anneau violet fin. */
  .acc-ecran .acc-commandes button:focus-visible, .acc-ecran .acc-localiser:focus-visible,
  .acc-ecran .acc-attribution:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
  .acc-ecran .acc-rond-calques[aria-expanded="true"], .acc-ecran .acc-rond-calques:active, .acc-ecran .acc-localiser:active {
    box-shadow: var(--anneau), var(--ombre);
  }
}

/* Les marqueurs : pictogramme sur une tige fine, petit socle coloré au pied. Toutes les tailles et
   tous les temps viennent de diorama/reglages.js#PINS (injectés en variables par le contrôleur,
   appliquerReglagesPins) ; seuls les effets restent ici, en transformations CSS pures.
   Calques, du pied vers l'icône : chaque pin/fleur porte --icone-echelle (compensation de catégorie,
   diorama/bouquets.js#echelleIcone) sur son <img> ; l'enveloppe -vol (respiration + lueur du jour) est
   un élément séparé pour que l'animation continue ne touche jamais le transform de l'icône (échelle,
   rebond, survol) — les deux se composent par imbrication plutôt que de se remplacer. */
@keyframes pin-respire {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(-1 * var(--pin-respire-amplitude, 3px))); }
}
@keyframes pin-apparait {
  0% { transform: scale(0); opacity: 0; }
  65% { transform: scale(calc(var(--icone-echelle, 1) * 1.1)); opacity: 1; }
  100% { transform: scale(var(--icone-echelle, 1)); opacity: 1; }
}
@keyframes pin-rebond {
  0%, 100% { transform: scale(var(--icone-echelle, 1)); }
  35% { transform: scale(calc(var(--icone-echelle, 1) * var(--pin-selection-echelle, 1.22))); }
  65% { transform: scale(calc(var(--icone-echelle, 1) * 0.95)); }
}
@keyframes pin-onde {
  0% { transform: scale(0.4); opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes pin-rdv-lueur {
  0%, 100% { opacity: 0; transform: scale(0.85); }
  50% { opacity: 0.85; transform: scale(1.15); }
}

.leaflet-marker-icon.acc-pin, .leaflet-marker-icon.acc-bouquet { background: none; border: 0; }
.pin {
  position: relative; width: var(--taille-icone); height: calc(var(--pin-pied) + 8px);
  transform-origin: calc(var(--taille-icone) / 2) var(--pin-pied); transition: transform 0.15s ease-out;
}
.pin-vol, .bouquet-fleur-vol {
  position: absolute; left: 0; top: 0; width: var(--taille-icone); height: var(--taille-icone);
  animation: pin-respire var(--pin-respire-periode, 3.2s) ease-in-out infinite;
}
.pin-vol::before, .bouquet-fleur-vol::before {
  content: ""; position: absolute; inset: -14%; z-index: 0; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--c, gold) 70%, transparent) 0%, transparent 72%);
}
.pin.acc-aujourdhui .pin-vol::before, .bouquet-fleur-vol.acc-aujourdhui::before {
  animation: pin-rdv-lueur var(--pin-rdv-periode, 2.4s) ease-in-out infinite;
}
.pin-picto, .bouquet-fleur {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; cursor: pointer;
  transform: scale(var(--icone-echelle, 1)); transform-origin: 50% 100%;
  filter: drop-shadow(0 0 1.5px var(--blanc)) drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.92)) drop-shadow(0 3px 4px rgba(29, 26, 43, 0.3));
}
/* L'apparition (rebond au chargement, décalé pin par pin) : seuls les pins isolés, jamais recréés
   tant que le point existe (iconePin, mis en cache par p.marqueur ||=) ; un bouquet est redessiné à
   chaque zoom/filtre, la rejouer à chaque fois serait un défaut, pas un effet. */
.pin-picto {
  animation: pin-apparait var(--pin-apparition-duree, 420ms) ease-out both;
  animation-delay: var(--pin-retard-apparition, 0ms);
}
.pin-tige {
  position: absolute; left: calc(var(--taille-icone) / 2 - 1px); top: calc(var(--taille-icone) - var(--pin-recouvrement, 4px));
  width: 2px; height: var(--tige-longueur, 44px); z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--c) 45%, var(--blanc)));
  box-shadow: 0 0 0 0.5px rgba(29, 26, 43, 0.22);
}
.pin-socle {
  position: absolute; left: calc(var(--taille-icone) / 2 - 9.5px); top: calc(var(--pin-pied) - 6.1px);
  width: 19px; height: 12.2px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent), 0 1px 2px rgba(29, 26, 43, 0.35);
}
.pin.acc-survole .pin-picto, .acc-pin:hover .pin-picto {
  transform: scale(calc(var(--icone-echelle, 1) * var(--pin-survol-echelle, 1.15)));
  filter: drop-shadow(0 0 1.5px var(--blanc)) drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.92)) drop-shadow(0 3px 4px rgba(29, 26, 43, 0.3)) drop-shadow(0 0 8px var(--c));
}
.pin.acc-survole, .acc-pin:hover .pin { transform: translateY(calc(-1 * var(--pin-survol-elevation, 4px))); }
.leaflet-marker-icon.acc-survole { z-index: 1000 !important; }
/* Sélection (ouverture de la popup) : rebond bref sur l'icône, onde circulaire au pied. */
.pin.acc-rebond .pin-picto { animation: pin-rebond var(--pin-selection-duree, 380ms) ease-out 1; }
.pin.acc-rebond .pin-socle::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c);
  animation: pin-onde var(--pin-onde-duree, 550ms) ease-out 1;
}

/* Les bouquets : un pied commun, une tige par fleur en éventail (diorama/bouquets.js). L'icône Leaflet
   fait 0 × 0 px au pied ; tiges et fleurs se placent autour et restent cliquables. */
.bouquet { position: relative; width: 0; height: 0; }
.bouquet-tige {
  position: absolute; left: -1px; bottom: 0; width: 2px; z-index: 1; transform-origin: 50% 100%;
  background: linear-gradient(to top, color-mix(in srgb, var(--c) 45%, var(--blanc)), rgba(255, 255, 255, 0.98));
  box-shadow: 0 0 0 0.5px rgba(29, 26, 43, 0.22);
}
.bouquet-fleur-vol { z-index: 2; }
.bouquet-fleur { transform-origin: 50% 100%; transition: transform 0.15s ease-out; }
.bouquet-fleur:hover, .bouquet-fleur.acc-survole {
  transform: scale(calc(var(--icone-echelle, 1) * var(--pin-survol-echelle, 1.15))) translateY(calc(-1 * var(--pin-survol-elevation, 4px)));
  filter: drop-shadow(0 0 1.5px var(--blanc)) drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.92)) drop-shadow(0 3px 4px rgba(29, 26, 43, 0.3)) drop-shadow(0 0 8px var(--c));
  z-index: 3;
}
.bouquet-fleur.acc-rebond { animation: pin-rebond var(--pin-selection-duree, 380ms) ease-out 1; }
.bouquet-fleur.acc-rebond::after {
  content: ""; position: absolute; left: 50%; bottom: 8%; width: 34%; height: 22%; margin-left: -17%;
  border-radius: 50%; background: var(--c); z-index: 0;
  animation: pin-onde var(--pin-onde-duree, 550ms) ease-out 1;
}
.bouquet-pied {
  position: absolute; left: -9px; top: -6px; width: 18px; height: 12px; z-index: 1; border-radius: 50%;
  background: var(--blanc); border: 2.5px solid var(--violet); box-shadow: 0 1px 3px rgba(29, 26, 43, 0.35);
}
.bouquet-plus {
  position: absolute; left: 11px; top: -2px; z-index: 3; min-width: 26px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--violet); color: var(--blanc); box-shadow: 0 0 0 2px var(--blanc);
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; cursor: pointer; white-space: nowrap;
}
.bouquet-plus::before { content: ""; position: absolute; inset: -10px -8px; } /* zone de toucher élargie */

/* Déplacement/zoom : les animations continues et pulsées se figent (elles reprendraient de toute façon
   au repos, mais éviter le calcul pendant que la carte bouge). prefers-reduced-motion : tout est coupé. */
[data-mouvement] .pin-vol, [data-mouvement] .bouquet-fleur-vol,
[data-mouvement] .pin-vol::before, [data-mouvement] .bouquet-fleur-vol::before,
[data-mouvement] .pin-picto, [data-mouvement] .bouquet-fleur {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .pin-vol, .bouquet-fleur-vol, .pin-vol::before, .bouquet-fleur-vol::before,
  .pin-picto, .bouquet-fleur, .pin.acc-rebond .pin-socle::after, .bouquet-fleur.acc-rebond::after {
    animation: none !important;
  }
  .pin-picto, .bouquet-fleur { transform: scale(var(--icone-echelle, 1)) !important; }
}

/* La popup d'un pin. */
.acc-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--ombre); }
.acc-popup .leaflet-popup-content { margin: 0; font: inherit; color: var(--encre); }
.acc-popup .leaflet-popup-content p { margin: 0; }
.acc-popup a.leaflet-popup-close-button {
  top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; z-index: 1;
  background: rgba(255, 255, 255, 0.92); color: var(--encre); font: 700 20px/28px system-ui, sans-serif;
}
.bulle-bandeau {
  position: relative; display: grid; place-items: center; height: 108px;
  background: color-mix(in srgb, var(--c) 22%, var(--blanc));
}
.bulle-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bulle-photo[hidden], .bulle-picto[hidden] { display: none; }
.bulle-corps { display: grid; gap: 4px; padding: 10px 14px 12px; }
.bulle-cat {
  justify-self: start; padding: 2px 9px; border-radius: 999px; background: var(--c);
  font-size: 11px; font-weight: 800; line-height: 1.5;
}
.bulle-titre { margin: 2px 0; font-size: 15px; line-height: 1.25; font-weight: 800; }
.bulle-date, .bulle-commune { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gris); }
.acc-popup .bulle-lien {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; justify-self: start;
  color: var(--violet); font-size: 13.5px; font-weight: 800; text-decoration: none;
}
.acc-popup .bulle-lien:hover { color: var(--violet-fonce); }

/* ─── Le volet : bottom sheet repliée sur sa poignée (mobile et tablette) ────────────── */
/* Ancrée au bas de l'écran, donc au-dessus de la tab bar, qu'elle ne masque jamais. Elle bouge par
   transform seulement (jamais height) : --glisse suit le doigt pendant un glissement. */
.acc-volet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 650;
  display: flex; flex-direction: column;
  height: var(--sheet-h);
  border-radius: 26px 26px 0 0; background: var(--blanc);
  box-shadow: 0 -6px 24px rgba(29, 26, 43, 0.10);
  transform: translateY(calc(100% - var(--poignee-h) + var(--glisse, 0px)));
  transition: transform 250ms ease-out;
}
.acc-volet--ouvert { transform: translateY(var(--glisse, 0px)); }
.acc-volet--glisse, .acc-volet--glisse ~ * { transition: none; }

.acc-poignee {
  position: relative; flex: none; display: flex; align-items: flex-start; gap: 8px;
  width: 100%; height: var(--poignee-h); padding: 20px var(--gouttiere) 0;
  border: 0; border-radius: 26px 26px 0 0; background: transparent; text-align: left; cursor: pointer;
  touch-action: none; /* le glissement vertical est géré par le contrôleur */
}
.acc-poignee::before { /* le trait de poignée : 36 × 4 px */
  content: ""; position: absolute; left: 50%; top: 8px; width: 36px; height: 4px; margin-left: -18px;
  border-radius: 2px; background: #c9c6d6;
}
.acc-poignee-titre { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; line-height: 20px; }
.acc-poignee-compte { font-size: 13px; font-weight: 700; color: var(--gris); line-height: 20px; }
.acc-poignee-chevron { margin-left: auto; margin-top: -1px; transition: transform 250ms ease-out; }
.acc-poignee[aria-expanded="true"] .acc-poignee-chevron { transform: rotate(180deg); }

.acc-volet-panneau { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 10px; }
.acc-volet-tete {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; padding: 0 var(--gouttiere) 10px;
}
.acc-volet-tete h2 { display: none; margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }

.acc-fiches {
  display: flex; gap: 12px; padding: 4px var(--gouttiere) 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gouttiere); scrollbar-width: none;
}
.acc-fiches::-webkit-scrollbar { display: none; }
.acc-volet-vide { margin: 0; padding: 8px var(--gouttiere) 12px; color: var(--gris); font-size: 14px; }
.acc-volet-vide[hidden] { display: none; }
.acc-stats { margin: 0; padding: 4px var(--gouttiere) 0; color: #9a97aa; font-size: 11px; line-height: 1.45; }
.acc-stats b { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .acc-volet, .acc-commandes, .acc-poignee-chevron, .acc-carte .leaflet-bottom.leaflet-left { transition: none; }
}

/* Une fiche. Photo ou pictogramme sur la teinte de catégorie : la même boîte dans les deux cas. */
.fiche {
  position: relative; flex: none; width: 172px; scroll-snap-align: start;
  border-radius: 16px; background: var(--blanc); box-shadow: var(--ombre-legere); border: 1px solid var(--gris-clair);
  overflow: hidden; cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s;
}
.fiche:hover, .fiche:focus-within { box-shadow: var(--ombre); border-color: color-mix(in srgb, var(--c) 50%, var(--gris-clair)); }
.fiche--active { border-color: var(--c); box-shadow: 0 0 0 2px var(--c), var(--ombre); }

.fiche-bandeau {
  position: relative; height: 96px; background: color-mix(in srgb, var(--c) 18%, var(--blanc));
}
.fiche-photo[hidden], .fiche-picto-seul[hidden] { display: none; }
.fiche-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.fiche-picto-seul {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 5px rgba(29, 26, 43, 0.18));
}
.fiche-date {
  position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px;
  background: var(--c); font-size: 10px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
}
.fiche-cat {
  position: absolute; left: 8px; bottom: -14px; width: 34px; height: 34px;
  filter: drop-shadow(0 0 1.5px var(--blanc)) drop-shadow(0 0 2.5px var(--blanc)) drop-shadow(0 2px 3px rgba(29, 26, 43, 0.25));
}
.fiche-corps { position: relative; padding: 18px 12px 12px; }
.fiche h3 { margin: 0 0 6px; padding-right: 26px; font-size: 14px; line-height: 1.3; font-weight: 800; }
.fiche-lien { text-decoration: none; }
.fiche-lien:hover { color: var(--violet); }
.fiche p {
  display: flex; align-items: center; gap: 6px; margin: 3px 0 0; font-size: 12px; color: var(--gris);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fiche p span { overflow: hidden; text-overflow: ellipsis; }
.fiche-signet {
  position: absolute; right: 6px; top: 12px; z-index: 2;
  display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--gris); cursor: pointer;
}
.fiche-signet:hover { background: var(--violet-pale); color: var(--violet); }
.fiche-signet[aria-pressed="true"] { color: var(--violet); }
.fiche-signet[aria-pressed="true"] svg { fill: currentColor; }

/* ─── Sections sous la carte : accueil_blocs.css (chargée par le seul layout « accueil ») ── */

.acc-ville + .acc-pied { border-top: 0; background: #f1eefc; } /* lavande : prolonge la ligne de sol de la silhouette, qui fait office de limite */
.acc-pied {
  padding: 18px var(--gouttiere) 24px; border-top: 1px solid var(--gris-clair); font-size: 12px; color: var(--gris);
}
.acc-pied nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
.acc-pied a { text-decoration: none; font-weight: 700; color: var(--encre); }
.acc-pied a:hover { color: var(--violet); }
.acc-pied p { margin: 0; line-height: 1.5; }

/* ─── Barre d'onglets (mobile et tablette) ─────────────────────────────────────────── */
/* Pas d'overflow hidden : le « + » dépasse de 16 px au-dessus de la barre, ombre comprise. */
.acc-onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  /* Colonnes inégales : celle du « + » ne porte que « Proposer », « Belles Histoires » a la plus large. */
  display: grid; grid-template-columns: 1.1fr 1.15fr 0.85fr 1.3fr 0.9fr;
  height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom);
  border-radius: 22px 22px 0 0; background: var(--blanc);
  box-shadow: 0 -6px 24px rgba(29, 26, 43, 0.10);
}
.acc-onglets > * {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--encre);
  text-decoration: none; font-size: 11px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; text-align: center; cursor: pointer;
}
.acc-onglets > * span { max-width: 100%; white-space: nowrap; }
.acc-onglets [aria-current="page"] { color: var(--violet); font-weight: 800; }
.acc-onglets [aria-current="page"] svg { fill: color-mix(in srgb, var(--violet) 25%, transparent); }

/* Le « + » central : rond de 56 px, surélevé, couleur d'accent, lien « Proposer ». */
.acc-onglet-plus { position: relative; justify-content: flex-end; padding-bottom: 6px; color: var(--violet) !important; font-weight: 700 !important; }
.acc-plus-bouton {
  position: absolute; top: -16px; left: 50%; width: 56px; height: 56px; margin-left: -28px;
  display: grid; place-items: center; border-radius: 50%; background: var(--violet); color: var(--blanc);
  box-shadow: 0 8px 20px rgba(91, 61, 245, 0.45), 0 2px 6px rgba(29, 26, 43, 0.18);
  transition: transform 0.15s, background 0.15s;
}
.acc-onglet-plus:hover .acc-plus-bouton { background: var(--violet-fonce); }
.acc-onglet-plus:active .acc-plus-bouton { transform: scale(0.94); }

/* ─── Tablette : le mobile, élargi ─────────────────────────────────────────────── */
@media (min-width: 768px) {
  :root { --gouttiere: 28px; --legende-h: 84px; }
  .acc-categories { justify-content: center; gap: 4px; }
  .acc-cat { flex: none; width: 96px; font-size: 13px; }
  .acc-cat img { width: 52px; height: 52px; }
  .fiche { width: 210px; }
  .fiche-bandeau { height: 118px; }
}

/* ─── Tablette et bureau (≥ 768 px) : barre de navigation flottante ─────────────────── */
/* Elle remplace le header et la barre d'onglets mobiles. La mise en page de la carte reste celle du mobile
   (volet en bas) jusqu'à 1023 px ; le volet bascule en panneau gauche à partir de 1024 px. */
@media (min-width: 768px) {
  :root { --tabbar-h: 0px; }
  body.acc-corps { padding-bottom: 0; }
  .acc-onglets, .acc-entete { display: none; }

  /* Indice de défilement : la carte s'arrête 72 px avant le bas de l'écran, le début des blocs dépasse.
     La barre flotte par-dessus la carte (elle ne retire aucune hauteur) : seuls les 72 px sont retranchés. */
  .acc-ecran { --indice-h: 72px; height: calc(100svh - var(--indice-h)); }

  .acc-barre {
    position: sticky; top: 0; z-index: 1200;
    display: flex; align-items: center; gap: 4px; height: 64px; margin: 0; padding: 0 16px;
    border-radius: 0 0 20px 20px; background: var(--blanc); box-shadow: 0 10px 30px rgba(76, 29, 149, 0.10);
  }
  /* Accueil : par-dessus la carte, qui occupe toute la hauteur derrière. */
  .acc-barre--flottante { position: absolute; top: 0; left: 0; right: 0; }

  .acc-barre .acc-logo { gap: 6px; margin-right: 2px; font-size: 19px; color: var(--encre); }
  .acc-barre .acc-logo-carre {
    width: 34px; height: 34px; border-radius: 10px; font-size: 17px;
    box-shadow: 0 4px 14px rgba(91, 61, 245, 0.45);
  }
  .acc-barre-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
  .acc-barre-nav a {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 7px; border-radius: 999px;
    text-decoration: none; white-space: nowrap; font-weight: 600; font-size: 13.5px; color: #6b6f85;
    transition: background-color 150ms, color 150ms;
  }
  .acc-barre-nav a svg { display: none; } /* libellés seuls sur les largeurs étroites */
  .acc-barre-nav a:hover { background: rgba(238, 234, 254, 0.55); color: var(--encre); }
  .acc-barre-nav a[aria-current="page"] { background: #eeeafe; color: var(--violet); }
  .acc-barre-nav a[aria-current="page"] svg { fill: color-mix(in srgb, var(--violet) 22%, transparent); }
  .acc-barre-sep { flex: none; width: 1px; height: 32px; margin: 0 2px; background: #ecebf3; }
  .acc-barre a:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

  .acc-bouton-proposer {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; height: 44px; padding: 0 14px;
    border-radius: 999px; background: var(--violet); color: var(--blanc) !important; white-space: nowrap;
    font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: 0 6px 16px rgba(91, 61, 245, 0.3);
    transition: background-color 150ms;
  }
  .acc-bouton-proposer:hover { background: var(--violet-fonce); }
  .acc-bouton-suite { display: none; }
  .acc-bouton-temoignage {
    background: var(--blanc); color: var(--rose) !important; box-shadow: inset 0 0 0 1.5px var(--rose);
    width: 44px; padding: 0; /* cœur seul sur les largeurs étroites */
  }
  .acc-bouton-temoignage svg { color: var(--rose); }
  .acc-bouton-temoignage:hover { background: color-mix(in srgb, var(--rose) 8%, var(--blanc)); }
  .acc-bouton-libelle { display: none; }
  .acc-barre-sep + .acc-bouton-temoignage { margin-right: 4px; }

  /* Les libellés ne tiennent pas tous sur une ligne en dessous de 1400 px : on gagne de la place par paliers.
     768-999 px : libellés seuls, cœur seul, « Proposer ». */
  @media (min-width: 1000px) { /* + icônes des entrées */
    .acc-barre-nav a { font-size: 14px; padding: 0 10px; }
    .acc-barre-nav a svg { display: block; width: 20px; height: 20px; }
  }
  @media (min-width: 1180px) { /* + « Proposer une opportunité » en toutes lettres */
    .acc-bouton-suite { display: inline; }
  }
  @media (min-width: 1280px) { /* + libellé « Partager un témoignage » */
    .acc-barre { padding: 0 14px; }
    .acc-barre .acc-logo { font-size: 24px; }
    .acc-barre .acc-logo-carre { width: 36px; height: 36px; font-size: 18px; }
    .acc-barre-nav a { font-size: 15px; padding: 0 12px; }
    .acc-bouton-proposer { font-size: 14px; }
    .acc-bouton-temoignage { width: auto; padding: 0 16px; }
    .acc-bouton-libelle { display: inline; }
  }
  @media (min-width: 1400px) { /* tailles de la maquette : 16 px, icônes de 22 px, logo de 28 px */
    .acc-barre { gap: 8px; padding: 0 16px; }
    .acc-barre .acc-logo { font-size: 28px; margin-right: 16px; gap: 8px; }
    .acc-barre .acc-logo-carre { width: 40px; height: 40px; font-size: 20px; }
    .acc-barre-nav, .acc-barre-nav a { gap: 8px; }
    .acc-barre-nav a { font-size: 16px; padding: 0 14px; }
    .acc-barre-nav a svg { width: 22px; height: 22px; }
    .acc-bouton-proposer { font-size: 15px; padding: 0 20px; }
    .acc-bouton-temoignage { padding: 0 18px; }
  }
}

/* ─── Bureau : barre du haut, panneau gauche de 380 px, carte à droite ─────────── */
@media (min-width: 1024px) {
  :root { --gouttiere: 24px; }
  body.acc-corps { padding-bottom: 0; }
  .acc-poignee { display: none; }

  .acc-ecran {
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "tete carte" "volet carte";
    height: calc(100svh - var(--indice-h)); /* la barre flotte par-dessus la carte : elle ne retire aucune hauteur */
  }
  /* Panneau gauche : fond plein, accroche visible. */
  .acc-tete {
    grid-area: tete; position: static; z-index: auto; display: block;
    background: var(--blanc); padding: calc(var(--barre-h) + 10px) var(--gouttiere) 8px; /* sous la barre flottante */
  }
  .acc-accroche {
    position: static; width: auto; height: auto; margin: 0 0 12px; overflow: visible;
    clip-path: none; white-space: normal; font-size: 24px; line-height: 1.28; font-weight: 800;
    letter-spacing: -0.015em; max-width: 30ch;
  }
  .acc-categories {
    position: static; height: auto;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 var(--gouttiere) 12px; padding: 0; overflow: visible;
    border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .acc-cat { flex: none; width: auto; padding: 8px 4px; }
  .acc-cat:hover { background: var(--fond); }
  .acc-carte { grid-area: carte; height: auto; border-left: 1px solid var(--gris-clair); }
  .acc-commandes { bottom: 28px; right: 24px; }
  .acc-localiser { bottom: 22px; height: 44px; }
  .acc-calques { right: calc(24px + 46px + 12px); bottom: calc(28px + 92px + 10px); }
  .acc-carte .leaflet-bottom.leaflet-left { bottom: 16px; }

  /* Le volet est un panneau fixe : plus de sheet ni de glissement. */
  .acc-volet {
    grid-area: volet; position: static; z-index: auto; height: auto; transform: none; transition: none;
    margin: 0; padding: 12px 0 0; border-radius: 0; box-shadow: none;
    min-height: 0; border-top: 1px solid var(--gris-clair);
  }
  .acc-volet-panneau { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; overscroll-behavior: auto; }
  .acc-volet-tete { justify-content: space-between; }
  .acc-volet-tete h2 { display: block; font-size: 17px; }
  .acc-fiches {
    flex: 1; min-height: 0; flex-direction: column; overflow-x: hidden; overflow-y: auto;
    scroll-snap-type: none; padding-bottom: 16px; scrollbar-width: thin;
    overscroll-behavior: auto; /* en bout de liste, la page prend le relais */
  }
  .fiche { width: auto; display: grid; grid-template-columns: 112px 1fr; }
  .fiche-bandeau { height: 100%; min-height: 108px; }
  .fiche-cat { bottom: 8px; }
  .fiche-corps { padding: 12px; }
  .acc-stats { padding-bottom: 10px; }

  .acc-pied { padding-inline: max(var(--gouttiere), calc((100% - 1240px) / 2)); } /* contenu centré, fond pleine largeur */
}

/* ─── Indice de défilement et message « Ctrl + molette » (≥ 768 px) ───────────────── */
.acc-invite { display: none; }
@media (min-width: 768px) {
  /* Sur la carte, au-dessus du volet (650) et des commandes (600), centré sur la colonne de la carte. */
  .acc-invite {
    grid-area: carte; align-self: end; justify-self: center; z-index: 700;
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 10px 18px;
    border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.85); color: var(--encre);
    box-shadow: 0 6px 20px rgba(29, 26, 43, 0.18); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: opacity 250ms ease-out, visibility 250ms, background-color 150ms;
  }
  .acc-invite:hover { background: var(--blanc); }
  .acc-invite:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
  .acc-invite svg { flex: none; color: var(--violet); animation: acc-invite-rebond 1.6s ease-in-out infinite; }
  .acc-invite--masque { opacity: 0; visibility: hidden; pointer-events: none; }
  /* Tablette (< 1024 px) : le volet est une feuille repliée en bas ; l'invite se pose au-dessus de la légende. */
  .acc-invite { margin-bottom: calc(var(--poignee-h) + var(--legende-h) + 14px); }
  /* Léger dégradé blanc → transparent tout en bas de la carte, sous les commandes, sans interaction. */
  .acc-carte::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; z-index: 550; pointer-events: none;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  }
  .acc-ecran:has(.acc-volet--ouvert) .acc-invite { opacity: 0; visibility: hidden; }
}
@media (min-width: 1024px) {
  .acc-invite { margin-bottom: 20px; }
}
@keyframes acc-invite-rebond { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .acc-invite svg { animation: none; }
  .acc-invite { transition: none; }
}

/* Aide au zoom : bulle centrée sur la carte (diorama#aideMolette), 1,5 s puis fondu. */
.acc-aide-zoom {
  position: absolute; left: 50%; top: 50%; z-index: 820; translate: -50% -50%; max-width: 80%;
  padding: 10px 18px; border-radius: 12px; background: rgba(29, 26, 43, 0.82); color: #fff;
  font-size: 15px; font-weight: 700; text-align: center; pointer-events: none;
  opacity: 0; transition: opacity 300ms ease-out;
}
.acc-aide-zoom--visible { opacity: 1; transition-duration: 120ms; }
@media (prefers-reduced-motion: reduce) { .acc-aide-zoom { transition: none; } }

/* Réglage de la vue initiale (?debug_vue=1) : centre et zoom courants. */
.acc-debug-vue {
  position: absolute; left: 8px; top: 50%; z-index: 900; padding: 4px 8px; border-radius: 6px;
  background: rgba(29, 26, 43, 0.85); color: #fff; font: 12px/1.3 ui-monospace, monospace; pointer-events: none;
}

/* Volet : « Plus proches » / « À proximité », visibles quand la position est connue. */
.acc-pilles-position { display: flex; gap: 6px; flex-wrap: wrap; }
.acc-pilles-position[hidden] { display: none; }
.acc-pilles-position button {
  border: 1px solid var(--violet-pale); border-radius: 999px; padding: 4px 10px; cursor: pointer;
  background: #fff; color: var(--violet); font: inherit; font-size: 13px; font-weight: 700;
}
.acc-pilles-position button[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: #fff; }