/* =========================================================
   Complètement Brunchée — feuille de style
   Carte plein écran, habillage rose posé par-dessus
   ========================================================= */

:root{
  /* --- rose --- */
  --ink:        #4A2036;   /* prune profond : textes et contours */
  --ink-soft:   #8A5A75;
  --ink-faint:  #B98FA6;
  --pink:       #E7568F;   /* rose principal */
  --pink-deep:  #C93A78;
  --pink-lt:    #FFB3D0;
  --pink-pale:  #FFE3EF;
  --paper:      #FFFBFD;
  --cream:      #FFF1F6;
  --gold:       #F0A93C;
  --mint:       #4E9E7C;
  --berry:      #C4456B;

  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 11px;
  --border: 2.5px solid var(--ink);
  --shadow-sm: 0 2px 0 rgba(74,32,54,.10);
  --shadow-md: 0 8px 22px -10px rgba(74,32,54,.38);
  --shadow-lg: 0 20px 46px -18px rgba(74,32,54,.45);

  /* Marges de l'habillage flottant. Sur iPhone, env(safe-area-inset-*) vaut la
     hauteur de l'encoche / de la barre d'accueil ; ailleurs il vaut 0. La carte
     occupe tout l'écran, seuls les boutons se décalent pour rester atteignables. */
  --top:    calc(14px + env(safe-area-inset-top, 0px));
  --gutter: calc(14px + env(safe-area-inset-left, 0px));
  --bas:    calc(12px + env(safe-area-inset-bottom, 0px));
}

*{ box-sizing: border-box; }

/* plusieurs blocs ci-dessous forcent un display ; sans ça, [hidden] ne cache plus rien */
[hidden]{ display: none !important; }

html, body{ height:100%; margin:0; overflow:hidden; }

body{
  font-family:'Nunito', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

h1,h2,h3,.brand-name,.seg-btn,b,.count-pill{
  font-family:'Baloo 2','Nunito',sans-serif;
}
button{ font-family:inherit; cursor:pointer; }
img{ display:block; }

/* =========================================================
   LA CARTE
   ========================================================= */
#map{
  position: fixed; inset: 0; z-index: 0;
  background: var(--cream);
}
/* Fond de carte laissé dans ses couleurs d'origine : la teinte rose passait
   trop sombre sur les écrans de téléphone. Le rose du site vient désormais
   uniquement de l'habillage et des pins, qui ressortent d'autant mieux. */
.leaflet-container{ font-family:'Nunito',sans-serif; background: var(--cream); }

/* Leaflet encadre les deux boutons dans une « barre » : on l'efface pour ne
   garder que les deux pastilles. */
.leaflet-control-zoom,
.leaflet-bar{
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; background: none !important;
  margin: 0 !important;
}
.leaflet-bottom.leaflet-right .leaflet-control-zoom{
  margin: 0 var(--gutter) calc(58px + env(safe-area-inset-bottom, 0px)) 0 !important;
}
.leaflet-control-zoom a{
  background: var(--paper) !important; color: var(--ink) !important;
  border: 2.5px solid var(--ink) !important; border-radius: 12px !important;
  font-weight:800; width:36px !important; height:36px !important; line-height:31px !important;
  margin-bottom:6px !important; box-shadow: var(--shadow-sm);
}
.leaflet-control-zoom a:hover{ background: var(--pink) !important; color:#fff !important; }
.leaflet-control-attribution{
  background: rgba(255,251,253,.86) !important;
  font-size:10px; border-radius:8px 0 0 0; color: var(--ink-soft);
}
.leaflet-control-attribution a{ color: var(--pink-deep); }

/* =========================================================
   HABILLAGE FLOTTANT
   ========================================================= */
/* Le titre reste au centre ; la bascule Carte/Liste part se caler tout à
   droite, bien détachée de lui. */
/* Par défaut la recherche prend sa propre ligne, sous le nom et les onglets.
   Tout est en grille : les onglets ont leur colonne au lieu d'être posés en
   absolu par-dessus, où ils venaient recouvrir la recherche dès que la place
   manquait. */
.topbar{
  position: fixed; z-index: 800;
  top: var(--top); left: var(--gutter); right: var(--gutter);
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:8px;
  pointer-events:none;
}
/* Chaque élément a sa case : la recherche s'étend sur les deux colonnes, et
   sans consigne explicite elle poussait les onglets sur une TROISIÈME ligne. */
.topbar .brand{ grid-row:1; grid-column:1; justify-self:center; min-width:0; }
.topbar-actions{ grid-row:1; grid-column:2; }
.topbar .search-pill{ grid-row:2; grid-column: 1 / -1; justify-self:center; }
.topbar > *{ pointer-events:auto; }

/* --- marque --- */
.brand{
  display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit;
  background: rgba(255,251,253,.92); backdrop-filter: blur(10px);
  border: var(--border); border-radius: 999px;
  padding: 5px 16px 5px 8px; box-shadow: var(--shadow-md);
}
.brand-troupe{ display:flex; align-items:flex-end; }
.brand-troupe img{
  height: 34px; width:auto;
  filter: drop-shadow(0 1px 0 rgba(74,32,54,.15));
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.troupe-gauche{ margin-right:-7px; transform: rotate(-8deg); }
.troupe-haute{ z-index:1; height:38px !important; }
.troupe-droite{ margin-left:-7px; transform: rotate(8deg); }
/* Luku et son chat : un dessin parmi les dessins, donc aucun cadre. C'est la
   plus large des quatre — une scène, pas un personnage — d'où le léger
   chevauchement de part et d'autre pour que le groupe reste serré. */
.troupe-luku{ z-index:2; height:40px !important; margin: 0 -4px; }
.brand:hover .troupe-gauche{ transform: rotate(-14deg) translateY(-4px); }
.brand:hover .troupe-haute{ transform: translateY(-6px); }
.brand:hover .troupe-luku{ transform: translateY(-5px); }
.brand:hover .troupe-droite{ transform: rotate(14deg) translateY(-4px); }
/* C'est le titre principal de la page (<h1>) : on annule la mise en forme
   par défaut du navigateur pour qu'il reste la marque, visuellement. */
.brand-name{
  margin:0; font-size: 1.06rem; font-weight:800; letter-spacing:.2px; line-height:1.1;
}

/* Lien d'évitement : invisible jusqu'à ce qu'on l'atteigne au clavier. Sans
   lui, la tabulation traverse d'abord tous les pins de la carte. */
.saut-contenu{
  position:fixed; top:-100px; left:50%; transform:translateX(-50%); z-index:3000;
  background: var(--ink); color:#fff; font-weight:800; font-size:.9rem;
  padding:12px 20px; border-radius:0 0 var(--r-md) var(--r-md);
  text-decoration:none; transition: top .18s;
}
.saut-contenu:focus{ top:0; }


/* --- segments (Carte / Liste) --- */
.seg{
  position:relative; display:flex; flex:none;
  background: rgba(255,251,253,.92); backdrop-filter: blur(10px);
  border: var(--border); border-radius:999px; padding:4px;
  box-shadow: var(--shadow-md);
}
.seg-pill{
  position:absolute; top:4px; left:4px;
  width: calc(50% - 4px); height: calc(100% - 8px);
  background: var(--pink); border-radius:999px;
  transition: transform .34s cubic-bezier(.34,1.4,.64,1);
}
.seg.list-on .seg-pill{ transform: translateX(100%); }
.seg-btn{
  position:relative; z-index:1; border:0; background:transparent;
  padding:6px 16px; border-radius:999px;
  font-size:.92rem; font-weight:700; color:var(--ink);
  transition: color .2s; white-space:nowrap;
}
.seg-btn.is-on{ color:#fff; }
.seg.small{ padding:3px; box-shadow: var(--shadow-sm); }
.seg.small .seg-btn{ padding:5px 12px; font-size:.84rem; }
.seg.small .seg-btn.is-on{ background: var(--ink); color:#fff; border-radius:999px; }

/* --- boutons ronds --- */
.icon-btn{
  flex:none; width:38px; height:38px; border-radius:50%;
  border: var(--border); background: rgba(255,251,253,.92); backdrop-filter: blur(10px);
  color: var(--ink); font-size:1rem; line-height:1;
  display:grid; place-items:center; box-shadow: var(--shadow-md);
  transition: transform .2s, background .2s;
}
/* Le penché n'est proposé qu'aux appareils qui savent vraiment survoler. Sur
   écran tactile, :hover reste collé après la frappe : le bouton restait
   penché même une fois désélectionné, comme s'il avait chaviré. */
@media (hover: hover) and (pointer: fine){

  .icon-btn:hover{ transform: scale(1.08) rotate(-6deg); background: var(--pink-pale); }
}

.icon-btn:focus-visible, .seg-btn:focus-visible, input:focus-visible, select:focus-visible{
  outline: 3px solid var(--pink); outline-offset: 2px;
}
/* Sélectionné, le cœur penche — et se redresse dès qu'on le désélectionne.
   C'est bien l'état qui l'incline : le survol, lui, restait collé après une
   frappe tactile et laissait le bouton de travers une fois éteint. */
.fav-toggle.is-on{
  background: var(--berry); border-color: var(--berry);
  transform: rotate(-8deg);
}
@media (hover: hover) and (pointer: fine){

  .fav-toggle.is-on:hover{ transform: scale(1.08) rotate(-8deg); }
}

.reset{ border-color: var(--berry); color: var(--berry); font-size:1.1rem; }
/* Il apparaissait en display:none → display:flex : la rangée, centrée, sautait
   de 25 px dès qu'on touchait un filtre. On lui garde sa place, il ne fait que
   s'effacer. (visibility:hidden le retire aussi de l'arbre d'accessibilité,
   comme le faisait l'attribut hidden.) */
.reset.en-retrait{ visibility:hidden; pointer-events:none; }

/* =========================================================
   BARRE DE FILTRES
   ========================================================= */
.filterbar{
  /* Au-dessus du tiroir des chroniques (850) : « z-index » sur ce conteneur
     ouvre un contexte d'empilement, et le 950 de la feuille de filtres ne
     valait qu'à l'intérieur — elle plafonnait donc à 790 et s'ouvrait DERRIÈRE
     le tiroir. Un enfant ne peut pas dépasser le plafond de son parent. */
  position: fixed; z-index: 880;
  top: calc(var(--top) + 56px); left: var(--gutter); right: var(--gutter);
  pointer-events:none;
}
.fb-inner{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:auto; max-width:100%;
}

.search-pill{
  display:flex; align-items:center; gap:6px; flex:none;
  background: rgba(255,251,253,.94); backdrop-filter: blur(10px);
  border: var(--border); border-radius:999px; padding:0 12px;
  box-shadow: var(--shadow-md);
}
.search-pill:focus-within{ box-shadow: 0 0 0 4px rgba(231,86,143,.3); }
/* Elle partage la ligne du nom du site : assez large pour que le libellé
   entier tienne — il arrivait tronqué dès le troisième mot du temps où elle
   était calée à 122 px — mais pas au point de pousser le nom hors du centre.
   Sous 781 px elle reprend sa propre ligne et peut s'étaler. */
.search-pill{ width: min(430px, 86vw); }
.filterbar{ top: calc(var(--top) + 110px); }

/* Assez large pour les trois de front : le nom, la recherche et les onglets.
   Une rangée de moins, c'est autant de carte visible sous le panneau. Le seuil
   est haut exprès — à 800 px les onglets recouvraient la recherche. */
@media (min-width: 1000px){
  .topbar{ grid-template-columns: 1fr auto auto 1fr; }
  .topbar .brand{ grid-row:1; grid-column:2; justify-self:end; }
  /* Même largeur pour les deux, c'est tout le propos : la paire était bien
     centrée, mais la couture entre marque et recherche tombait 17 px à gauche
     du milieu de l'écran — la moitié de leur différence de largeur.

     Et même hauteur pour les trois. Elles valaient 53, 45 et 49 px : deux
     alignées et la troisième non, la rangée aurait continué de boiter. On
     s'aligne sur la plus haute, celle de la marque — la rogner reviendrait à
     rapetisser les mascottes, qui en font tout le sel. */
  .topbar .brand,
  .topbar .search-pill{ width: min(360px, 32vw); }
  .topbar .brand,
  .topbar .search-pill,
  .topbar .view-toggle{ height: 53px; }
  .topbar .brand{ justify-content:center; }
  .topbar .brand .brand-name{ white-space:nowrap; }
  .topbar .search-pill{ grid-row:1; grid-column:3; justify-self:start; }
  .topbar-actions{ grid-row:1; grid-column:4; }
  .filterbar{ top: calc(var(--top) + 62px); }
}
#search{
  border:0; background:transparent; outline:none; flex:1; min-width:0;
  /* 16 px : voir la note sur l'éditeur — sous ce seuil, Safari iOS zoome. */
  padding: 9px 2px; font-size:16px; font-family:inherit; color:var(--ink);
}
#search::placeholder{ color: var(--ink-faint); }
#search::-webkit-search-cancel-button{ display:none; }
.search-clear{
  border:0; background: var(--pink-pale); color:var(--ink);
  width:20px; height:20px; border-radius:50%; font-size:.68rem; line-height:1; flex:none;
}
.search-clear:hover{ background: var(--pink); color:#fff; }
/* Même histoire que le bouton de remise à zéro : en apparaissant il élargissait
   la pastille et décalait la rangée centrée de 13 px. Il garde sa place. */
.search-clear.en-retrait{ visibility:hidden; pointer-events:none; }

/* --- curseur de note, dans le même esprit que la barre de recherche --- */
.slider-pill{
  display:flex; align-items:center; gap:9px; flex:none;
  background: rgba(255,251,253,.94); backdrop-filter: blur(10px);
  border: var(--border); border-radius:999px; padding: 0 14px;
  box-shadow: var(--shadow-md); height:38px;
}
.slider-pill:focus-within{ box-shadow: 0 0 0 4px rgba(231,86,143,.3); }
.slider-ico{ color: var(--gold); font-size:1rem; line-height:1; }
.slider-val{
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.82rem;
  /* Calé sur le libellé le plus long (« 4,5★ et + », mesuré à 56 px) : sinon
     la pastille grandissait en cours de route et décalait la rangée centrée. */
  color: var(--ink); min-width:62px; text-align:right; white-space:nowrap;
}
#rating{
  -webkit-appearance:none; appearance:none;
  width:104px; height:18px; background:transparent; cursor:pointer; margin:0;
}
#rating::-webkit-slider-runnable-track{
  height:7px; border-radius:99px;
  background: var(--pink-pale); border:1.5px solid rgba(74,32,54,.2);
}
#rating::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:17px; height:17px; margin-top:-6.5px; border-radius:50%;
  background: var(--pink); border:2.5px solid var(--ink);
  box-shadow: var(--shadow-sm);
}
#rating::-moz-range-track{
  height:7px; border-radius:99px;
  background: var(--pink-pale); border:1.5px solid rgba(74,32,54,.2);
}
#rating::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%;
  background: var(--pink); border:2.5px solid var(--ink);
}

.mini-select{
  flex:none; border: var(--border); border-radius:999px;
  background: rgba(255,251,253,.94); backdrop-filter: blur(10px);
  padding: 7px 12px; font-family:inherit; font-size:16px; font-weight:700;
  color: var(--ink); cursor:pointer; outline:none; box-shadow: var(--shadow-sm);
  max-width: 175px;
}
.mini-select:hover{ background: var(--pink-pale); }

/* quand le panneau est ouvert, les filtres s'arrêtent à son bord */
@media (min-width: 781px){

  body.liste .filterbar{ right: calc(var(--gutter) + 430px); }
}


.count-pill{
  position: fixed; z-index: 780; margin:0;
  top: calc(var(--top) + 118px); left:50%; transform: translateX(-50%);
  background: var(--ink); color: var(--pink-pale);
  font-size:.76rem; font-weight:700; padding: 4px 12px; border-radius:999px;
  box-shadow: var(--shadow-md); pointer-events:none;
}
.count-pill b{ color: var(--pink-lt); }

/* Panneau de filtres ouvert, le compteur reprend sa place dans l'en-tête, entre
   « Affiner » et la croix : c'est la réponse immédiate à chaque filtre qu'on
   touche. Ailleurs il passait sous la barre de recherche sur ordinateur, et sur
   téléphone la feuille monte si haut qu'il ne reste rien au-dessus d'elle.
   Il EST déjà dans cet en-tête ; il suffit de le rendre à la mise en page. */
body.filtres-ouverts #result-count{
  /* Toujours là pour les lecteurs d'écran, invisible pour les autres : le
     panneau affiche le même compte dans son en-tête, juste sous les yeux. */
  clip-path: inset(50%); pointer-events:none;
}
.fb-compte{ position:static; transform:none; margin: 0 12px 0 auto; }

/* =========================================================
   PINS
   ========================================================= */
.pin-wrap{ background:none !important; border:0 !important; }
.pin{
  position:relative; width:64px; height:64px;
  display:grid; place-items:center;
  transform-origin: 50% 100%;
  cursor:pointer;
  /* Plus d'animation d'entrée : elle ne jouait pas une fois mais à CHAQUE
     réapparition du pin dans le document — au moindre déplacement de la
     carte, les mascottes semblaient surgir et s'évanouir. L'échelle, qui
     vivait dans l'état final du keyframe, se pose donc ici. */
  transform: scale(var(--echelle, 1));
}

.pin-bubble{
  width:58px; height:58px; border-radius: 50% 50% 50% 6px;
  transform: rotate(-45deg);
  border: 2.5px solid var(--ink); background: var(--pink-lt);
  box-shadow: var(--shadow-md);
  display:grid; place-items:center;
  transition: transform .22s cubic-bezier(.34,1.6,.64,1), box-shadow .22s, background .2s;
}
/* Une adresse à venir se fait discrète : plus petite, en pointillés, en
   teintes douces, et sans pastille. Huit « bientôt » identiques noyaient
   auparavant la seule adresse réellement notée. */
.pin.upcoming{ --echelle: .82; }
.pin.upcoming .pin-bubble{
  background: var(--paper); border-style: dashed; border-color: var(--ink-faint);
  box-shadow: var(--shadow-sm);
}
.pin.upcoming .pin-bubble img{ filter: saturate(.68) contrast(.96); opacity:.92; }
/* au survol et une fois choisie, elle reprend ses couleurs : on la regarde */
.pin-wrap:hover .pin.upcoming .pin-bubble img,
.pin.upcoming.is-active .pin-bubble img{ filter:none; opacity:1; }
.pin.upcoming.is-active{ --echelle: .95; }
/* Leaflet impose `max-width:none` aux images de la carte : on fixe donc une
   boîte et on laisse object-fit gérer les proportions de chaque mascotte. */
.pin-bubble img{
  transform: rotate(45deg);
  width: 40px; height: 40px; object-fit: contain;
}
/* Les poses « plage » et « cuisine » sont des vignettes carrées, décor peint
   jusqu'au bord : posées telles quelles dans la goutte, elles y laissaient
   voir leurs coins.

   Première tentative : les faire couvrir toute la goutte, pointe comprise.
   Comme l'image est recontre-tournée de 45°, couvrir la pointe demandait un
   agrandissement de √2 — et à ce grossissement on ne reconnaissait plus le
   personnage.

   La pointe n'a pas besoin de l'image : elle reste dans la couleur du cadre.
   L'image se contente du rond, où elle tient à sa taille naturelle. Un carré
   contient toujours son cercle inscrit, quelle que soit sa rotation : aucun
   agrandissement n'est nécessaire. */
.pin-bubble.est-vignette{ background: var(--pink-pale); }
.pin-bubble.est-vignette img{
  width:100%; height:100%; object-fit:cover;
  border-radius:50%;
  transform: rotate(45deg);
}

.pin-wrap:hover .pin-bubble{ transform: rotate(-45deg) scale(1.12); background: var(--pink); }
.pin.is-active .pin-bubble{
  background: var(--pink); transform: rotate(-45deg) scale(1.14);
  box-shadow: 0 0 0 9px rgba(231,86,143,.24), var(--shadow-md);
}
.pin-badge{
  position:absolute; top:-6px; right:-6px;
  background: var(--ink); color:#fff;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.66rem;
  padding:1px 6px; border-radius:999px; border:2px solid var(--paper);
  white-space:nowrap; pointer-events:none;
}
.pin.upcoming .pin-badge{ background: var(--pink-deep); }

/* ---- le coup de cœur, visible sans ouvrir la fiche ----
   Le cœur se pose sur le flanc gauche, à mi-hauteur : la pastille de note
   occupe le coin haut-droit, et « bientôt » est assez large pour venir
   frôler le coin haut-gauche. À mi-hauteur, aucune rencontre possible.
   On ne touche pas à l'ombre de la bulle, réservée à l'état « sélectionné »
   — c'est le liseré framboise qui distingue le pin dans une carte chargée. */
.pin-coeur{
  position:absolute; top:11px; left:-8px; z-index:2;
  width:25px; height:25px; border-radius:50%;
  background: var(--paper); border:2.5px solid var(--berry);
  display:grid; place-items:center; font-size:.78rem; line-height:1;
  box-shadow: 0 2px 7px rgba(90,20,50,.3);
  pointer-events:none;
  animation: coeurQuiBat 2.6s ease-in-out infinite;
}
.pin.coup-de-coeur .pin-bubble{ border-color: var(--berry); }

/* Un battement rare et bref : ça attire l'œil sans faire clignoter la carte. */
@keyframes coeurQuiBat{
  0%, 86%, 100%{ transform: scale(1); }
  90%          { transform: scale(1.28); }
  94%          { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce){

  .pin-coeur{ animation: none; }
}


/* =========================================================
   POP-UP
   ========================================================= */
.leaflet-popup{ margin-bottom: 18px; }
.cb-popup .leaflet-popup-content-wrapper{
  background: var(--paper); border: var(--border); border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg); padding:0; overflow:hidden;
  animation: popIn .34s cubic-bezier(.34,1.5,.64,1) both;
}
@keyframes popIn{ from{ opacity:0; transform: translateY(12px) scale(.9) } to{ opacity:1; transform:none } }
.cb-popup .leaflet-popup-content{
  margin:0 !important; width: 308px !important;
  /* De quoi contenir tête + essentiel sans faire défiler : la note, le cœur,
     le partage, les étiquettes et les deux listes de points. Au-delà, on
     mangerait la carte sur laquelle la bulle est posée. */
  max-height: min(58vh, 430px); overflow-y:auto;
  /* « none » et pas « contain » : contain empêche seulement la page de défiler
     derrière, mais laisse le rebond élastique en butée — c'est lui qui donnait
     l'impression de pouvoir défiler alors qu'on est déjà tout en haut. */
  overscroll-behavior: none;
}
.cb-popup .leaflet-popup-content::-webkit-scrollbar{ width:7px; }
.cb-popup .leaflet-popup-content::-webkit-scrollbar-thumb{ background: var(--pink-lt); border-radius:8px; }
.cb-popup .leaflet-popup-tip{
  background: var(--paper); border-right:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink);
}
.cb-popup .leaflet-popup-close-button{
  width:26px !important; height:26px !important;
  background: var(--pink-pale); border-radius:50%;
  margin:10px 10px 0 0; color: var(--ink) !important;
  font-size:16px !important; line-height:23px !important; font-weight:800;
}
.cb-popup .leaflet-popup-close-button:hover{ background: var(--berry); color:#fff !important; }
.cb-popup .review-head{ padding-right: 46px; }

/* =========================================================
   BLOC AVIS (pop-up + cartes de liste)
   ========================================================= */
/* --- la tête : qui c'est --- */
.review-head{
  display:flex; gap:10px; align-items:flex-start;
  padding: 12px 14px 8px;
  background: linear-gradient(180deg, var(--pink-pale), rgba(255,227,239,0));
}
.review-portrait{ width:60px; height:66px; flex:none; }
.review-portrait img{
  width:60px; height:66px; object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 2px 3px rgba(74,32,54,.22));
}
.review-title{ flex:1; min-width:0; }
/* Le statut et la personnalité sur une seule ligne : empilés, ils coûtaient
   deux fois vingt pixels tout en haut, là où la place est la plus rare. */
.review-etat{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.review-name{ margin:3px 0 0; font-size:1.06rem; font-weight:800; line-height:1.2; }
/* Quartier, prix et date d'un seul tenant. La date n'a plus besoin de dire
   « Visité le » : le macaron juste au-dessus le dit déjà. */
.review-meta{ margin:2px 0 0; font-size:.76rem; color:var(--ink-soft); font-weight:600; }
.review-meta .dot{ opacity:.5; margin:0 4px; }

/* --- l'essentiel : ce qui doit tenir sans faire défiler --- */
.review-cle{
  padding: 0 14px 10px;
  display:grid; gap:8px;
  border-bottom: 2px dotted rgba(74,32,54,.16);
}
.review-note-ligne{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.review-actions{ display:flex; align-items:center; gap:6px; flex:none; }
.review-cle .tag-row{ margin-top:0; }

.badge{
  display:inline-block; font-size:.65rem; font-weight:800; letter-spacing:.3px;
  padding:2px 8px; border-radius:999px; border:2px solid var(--ink);
  text-transform:uppercase;
}
.badge.visited{ background: var(--mint); color:#fff; border-color: var(--mint); }
.badge.upcoming{ background: var(--pink-deep); color:#fff; border-color: var(--pink-deep); }

.stars{ display:inline-flex; align-items:center; gap:6px; }
.stars-track{ position:relative; display:inline-block; line-height:1; }
.stars-bg,.stars-fg{ font-size:.98rem; letter-spacing:2px; }
.stars-bg{ color: rgba(74,32,54,.18); }
.stars-fg{ position:absolute; inset:0; overflow:hidden; white-space:nowrap; color: var(--gold); }
.stars-num{ font-weight:800; font-size:.82rem; font-family:'Baloo 2',sans-serif; }
.stars-none{ font-size:.78rem; font-weight:700; color:var(--ink-soft); font-style:italic; }

.review-body{ padding: 12px 14px 14px; }
.signature{
  background: var(--cream); border:2px dashed rgba(231,86,143,.4);
  border-radius: var(--r-sm); padding:7px 10px; margin: 0 0 10px; font-size:.83rem;
}
.pc-line{ display:flex; gap:6px; align-items:flex-start; font-size:.82rem; }
.pc-ico{ flex:none; line-height:1.4; }
/* Les pop-ups en font des <span>, les pages de chronique une vraie liste :
   sur un article, « les points forts » mérite d'en être une pour qui écoute
   la page. Les deux formes portent le même habillage. */
.pc-items{ display:flex; flex-wrap:wrap; gap:4px; list-style:none; margin:0; padding:0; }
.pc-items span, .pc-items li{ border-radius:999px; padding:2px 9px; font-weight:600; border:1.5px solid transparent; }
.pc-line.pro .pc-items span, .pc-line.pro .pc-items li{ background: rgba(78,158,124,.14); border-color: rgba(78,158,124,.35); }
.pc-line.con .pc-items span, .pc-line.con .pc-items li{ background: rgba(196,69,107,.12); border-color: rgba(196,69,107,.3); }

/* « pre-line » : les retours à la ligne tapés dans l'éditeur se voient, les
   espaces multiples se resserrent. Sans lui, tout arrivait en un seul pavé —
   on écrit dans un <textarea>, on y sépare naturellement ses idées. */
.review-text{
  margin:0; font-size:.86rem; line-height:1.6; white-space: pre-line;
  border-left: 3px solid var(--pink-lt); padding-left:10px;
}

/* --- le détail, critère par critère --- */
/* Les quatre critères annoncés dans « Comment je note ». Chacun est
   facultatif : n'apparaissent que ceux que Luku a remplis. */
.criteres-avis{ display:grid; gap:9px; margin-top:11px; }
/* Le liseré délimite le bloc quel que soit le fond : dans la bulle il se
   détache du papier, dans la fiche en grand le fond est déjà crème et la
   couleur seule ne suffirait plus. */
.critere-avis{
  background: var(--cream); border: 1.5px solid rgba(74,32,54,.10);
  border-radius: var(--r-sm); padding: 8px 11px;
}
.critere-titre{
  margin:0 0 3px; display:flex; align-items:center; gap:6px;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.8rem;
  color: var(--pink-deep);
}
.critere-texte{
  margin:0; font-size:.83rem; line-height:1.55; white-space: pre-line;
}
.tag-row{ display:flex; flex-wrap:wrap; gap:4px; margin-top:10px; }
.tag{
  font-size:.68rem; font-weight:800; background: var(--paper);
  border:1.5px solid rgba(74,32,54,.22); color: var(--ink-soft);
  border-radius:999px; padding:2px 8px;
}
.review-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding-top:10px; margin-top:10px; border-top:2px dotted rgba(74,32,54,.16);
}
.address{ font-size:.74rem; color:var(--ink-soft); }

/* champ pas encore rempli : visible sans être criard */
.a-remplir{ color: var(--ink-faint); font-style: italic; }

/* bouton d'écriture, dans le pied de chaque fiche */
.ecrire-btn{
  border: var(--border); background: var(--pink); color:#fff;
  border-radius:999px; padding:5px 13px; font-size:.76rem; font-weight:800;
  white-space:nowrap; box-shadow: var(--shadow-sm); flex:none;
  transition: transform .18s, background .18s;
}
.ecrire-btn:hover{ transform: translateY(-1px); background: var(--pink-deep); }


.fav-btn{
  border: var(--border); background: var(--paper);
  width:31px; height:31px; border-radius:50%; flex:none;
  font-size:.9rem; line-height:1; display:grid; place-items:center;
  box-shadow: var(--shadow-sm); transition: transform .2s, background .2s;
}
.fav-btn:hover{ transform: scale(1.14) rotate(-8deg); }
.fav-btn.is-fav{ background: var(--berry); border-color: var(--berry); }

/* Le même cœur, mais côté visiteur : une mention, pas un bouton. Il ne se
   survole pas et ne se clique pas — c'est le choix de Luku, pas le sien. */
.fav-mention{
  border: var(--border); background: var(--berry);
  width:31px; height:31px; border-radius:50%; flex:none;
  font-size:.9rem; line-height:1; display:grid; place-items:center;
  box-shadow: var(--shadow-sm); cursor: default;
}

/* =========================================================
   PANNEAU LISTE
   ========================================================= */
/* Panneau flottant à droite : il commence sous la barre du haut pour que la
   bascule Carte/Liste reste accessible, et laisse voir la carte autour. */
.drawer{
  position: fixed; z-index: 850;
  top: calc(var(--top) + 56px); bottom: 12px; right: 0;
  width: min(430px, 100%);
  background: var(--cream);
  border: var(--border); border-right: 0;
  border-radius: 22px 0 0 22px;
  box-shadow: -22px 0 46px -24px rgba(74,32,54,.5);
  display:flex; flex-direction:column; overflow:hidden;
  transform: translateX(102%);
  transition: transform .42s cubic-bezier(.4,0,.2,1);
}
.drawer.is-open{ transform: none; }
.drawer-grip{ display:none; }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 14px 14px 6px; background: var(--paper);
}
.drawer-head h2{ margin:0; font-size:1.2rem; font-weight:800; }

/* Le chapeau du tiroir : sur ordinateur il ne fait rien de plus que porter
   ses enfants — le tiroir vient du côté droit, il n'y a rien à rabattre. */
.drawer-chapeau{ display:contents; }
.drawer-outils:empty{ display:none; }
/* Le tri, revenu en tête du tiroir : une ligne, libellé à gauche, menu qui
   prend le reste — la disposition qu'il avait avant de voyager. */
.drawer-outils{
  display:flex; align-items:center; gap:9px;
  padding: 10px 14px; background: var(--paper);
  border-bottom: 2.5px dashed rgba(231,86,143,.4);
}
.drawer-outils .fb-ligne{ display:flex; align-items:center; gap:9px; flex:1; }
.drawer-outils .fb-libelle{ flex:none; }

.cards{ flex:1; overflow-y:auto; padding: 14px; display:flex; flex-direction:column; gap:14px; }
.card{
  flex: none;                 /* sinon les cartes s'écrasent pour tenir dans le panneau */
  background: var(--paper); border: var(--border); border-radius: var(--r-lg);
  overflow:hidden; box-shadow: var(--shadow-md);
  animation: cardIn .38s cubic-bezier(.34,1.3,.64,1) both;
  transition: transform .2s, box-shadow .2s;
}
.card{ cursor:pointer; }
.card:hover{ transform: translateY(-3px) rotate(-.3deg); box-shadow: var(--shadow-lg); }
.card:focus-visible{ outline:3px solid var(--pink); outline-offset:3px; }
/* fiche mise en avant quand on clique son pin sur la carte */
.card.is-active{ box-shadow: 0 0 0 4px var(--pink), var(--shadow-lg); }
.card.upcoming{
  background: repeating-linear-gradient(45deg, var(--paper), var(--paper) 11px, #FFF3F8 11px, #FFF3F8 22px);
}
@keyframes cardIn{ from{ opacity:0; transform: translateY(14px) } to{ opacity:1; transform:none } }

.empty{
  text-align:center; font-weight:800; padding: 40px 20px; margin:0; color: var(--ink);
}
.empty img{ width:96px; margin:0 auto 12px; opacity:.9; }
.empty span{ display:block; font-weight:600; font-size:.88rem; color:var(--ink-soft); margin-top:6px; }

/* =========================================================
   CRÉDITS
   ========================================================= */
/* .credits est un <button> : on annule ce que le navigateur lui impose. */
.credits{
  font-family:inherit; text-align:left; cursor:pointer;
  position: fixed; z-index: 780; bottom: var(--bas);
  left:50%; transform: translateX(-50%);
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  background: rgba(255,251,253,.92); backdrop-filter: blur(10px);
  border: var(--border); border-radius:999px; padding: 4px 14px 4px 6px;
  box-shadow: var(--shadow-md);
  font-size:.76rem; font-weight:600; color: var(--ink-soft);
}
.credits-avatar img{
  height:30px; width:30px; border-radius:50%; object-fit:cover;
  border: 2.5px solid var(--ink); background: var(--pink-pale);
  transition: transform .3s cubic-bezier(.34,1.5,.64,1);
}
.credits:hover .credits-avatar img{ transform: scale(1.12) rotate(-5deg); }
.credits b{ color: var(--ink); font-weight:800; }

/* =========================================================
   GÉNÉRIQUE D'OUVERTURE
   Le logo apparaît, flotte un instant, puis s'efface sur la carte.
   ========================================================= */
.splash{
  position: fixed; inset:0; z-index: 950;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 4px; text-align:center; padding: 24px;
  background: #F8EBDD;
  cursor: pointer;
  transition: opacity .5s ease, transform .5s ease;
}
.splash.is-gone{ opacity:0; transform: scale(1.06); pointer-events:none; }

/* Le fond reprend exactement la teinte crème de l'illustration : l'image se
   fond dans l'écran, sans bord visible, quelle que soit la taille de l'écran. */
.splash-logo{ display:block; }
.splash-logo img{
  width: min(94vw, 640px);
  /* Le texte et la banderole occupent une hauteur fixe (~410 px) : l'illustration
     prend ce qui reste, sinon le bas du générique sortait de l'écran sur un
     portable court — et rien ne défile, le générique est en position fixed.
     Le plancher évite qu'elle devienne minuscule sur un écran très bas. */
  max-height: max(140px, min(46vh, 100vh - 415px));
  height: auto;
  object-fit: contain;
  opacity: 0;
  animation: entreeLogo .9s cubic-bezier(.24,1.25,.45,1) forwards .06s,
             flotteLogo 5s ease-in-out infinite 1.1s;
}
@keyframes entreeLogo{
  from{ opacity:0; transform: scale(.84) translateY(26px); }
  to  { opacity:1; transform: none; }
}
@keyframes flotteLogo{
  0%,100%{ transform: translateY(0) }
  50%    { transform: translateY(-10px) }
}

/* En portrait : l'illustration d'abord, le texte dessous, le tout centré.
   En paysage large : côte à côte, texte à gauche — la composition de la
   vignette de partage. */
.splash-carte{
  display:flex; flex-direction:column; align-items:center; gap: 6px;
}
.splash-texte{ display:flex; flex-direction:column; align-items:center; }

.splash-trait{
  display:block; width: 74px; height: 6px; border-radius:3px;
  background: var(--pink-deep); margin: 14px 0 12px;
  opacity:0; animation: entreeTexte .55s ease forwards .68s;
}

.splash-name{
  margin: 0; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size: clamp(1.75rem, 6.4vw, 3.1rem); line-height:1.04;
  display:flex; flex-direction:column;
  opacity:0; animation: entreeTexte .55s ease forwards .74s;
}
.splash-name span:first-child{ color: var(--ink); }
.splash-name span:last-child { color: var(--pink-deep); }

.splash-tag{
  margin: 14px 0 0; font-weight:700; color: var(--ink);
  font-size: clamp(.92rem, 2.8vw, 1.2rem); line-height:1.35;
  opacity:0; animation: entreeTexte .55s ease forwards .88s;
}
.splash-signature{
  margin: 12px 0 0; font-weight:700; color: var(--ink-faint);
  font-size: clamp(.8rem, 2.2vw, .95rem);
  opacity:0; animation: entreeTexte .55s ease forwards 1s;
}

/* Sur grand écran on ne passe pas côte à côte : l'illustration prend toute la
   place qu'elle peut et le texte reste dessous, centré. C'est la composition
   de la vignette, redressée à la verticale. */
@media (min-width: 900px){

  .splash-logo img{ width: min(66vw, 900px); max-height: max(170px, min(52vh, 100vh - 425px)); }

  .splash-trait{ width: 88px; margin: 20px 0 14px; }
}


/* --- la banderole d'inauguration --- */
.banderole{
  position: relative; margin-top: 22px;
  background: var(--pink); color:#fff;
  border: var(--border); border-radius: 6px;
  padding: 12px clamp(26px, 6vw, 52px);
  box-shadow: var(--shadow-md);
  display:flex; flex-direction:column; gap:2px;
  font-family:'Baloo 2', sans-serif; font-weight:800;
  font-size: clamp(1rem, 3.4vw, 1.5rem); line-height:1.25;
  /* Le ruban dépasse de 20 px de chaque côté par ses pointes : sa largeur
     utile s'arrête donc avant le bord de l'écran. Sans cette limite, une
     phrase un peu longue le poussait hors cadre sur un téléphone. */
  max-width: min(88vw, 780px); text-align:center; text-wrap: balance;
  opacity:0; animation: entreeBanderole .7s cubic-bezier(.3,1.5,.5,1) forwards 1.05s;
}
@media (max-width: 560px){
  .banderole{ padding: 10px clamp(18px, 5vw, 30px); font-size: .95rem; }
  .banderole::before{ left:-16px; width:18px; }
  .banderole::after { right:-16px; width:18px; }
}
/* les deux pointes du ruban, découpées de part et d'autre */
.banderole::before, .banderole::after{
  content:''; position:absolute; top:-2.5px; bottom:-2.5px; width: 22px;
  background: var(--pink); border: var(--border);
}
.banderole::before{
  left:-20px; border-right:0; border-radius: 6px 0 0 6px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 42% 50%);
}
.banderole::after{
  right:-20px; border-left:0; border-radius: 0 6px 6px 0;
  clip-path: polygon(0 0, 100% 0, 58% 50%, 100% 100%, 0 100%);
}
/* Le « nowrap » valait pour deux lignes courtes ; une phrase entière doit
   pouvoir se replier, sinon elle sort du ruban sur un téléphone. */
.banderole-ligne{ position:relative; z-index:1; }
@keyframes entreeBanderole{
  from{ opacity:0; transform: translateY(-16px) rotate(-2.5deg) scale(.9); }
  to  { opacity:1; transform: none; }
}

@keyframes entreeTexte{
  from{ opacity:0; transform: translateY(14px); }
  to  { opacity:1; transform: none; }
}

/* =========================================================
   LA TROUPE (overlay)
   ========================================================= */
.modal{
  position: fixed; inset:0; z-index: 900;
  background: rgba(74,32,54,.42); backdrop-filter: blur(4px);
  display:grid; place-items:center; padding: 20px;
  animation: fade .25s ease both;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.modal-card{
  position:relative; background: var(--cream);
  border: var(--border); border-radius: 28px;
  box-shadow: var(--shadow-lg);
  width: min(880px, 100%); max-height: 86dvh; overflow-y:auto;
  padding: 26px 26px 20px;
  animation: popIn .38s cubic-bezier(.34,1.4,.64,1) both;
}
.modal-close{ position:absolute; top:14px; right:14px; }
.modal-card h2{ margin:0 0 6px; font-size:1.5rem; font-weight:800; }

/* --- le bloc « l'autrice », en tête du panneau --- */
.autrice{
  display:flex; gap: 20px; align-items:center;
  padding: 0 0 20px; margin-bottom: 20px;
  border-bottom: 2px dotted rgba(74,32,54,.16);
}
.autrice-photo{ flex:none; }
.autrice-photo img{
  width: 148px; height: 178px; object-fit: cover; object-position: 50% 12%;
  border: var(--border); border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.autrice-mots{ min-width:0; }
.autrice-role{
  margin:0; font-size:.72rem; font-weight:800; letter-spacing:1.6px;
  text-transform:uppercase; color: var(--pink-deep);
}
.autrice-mots h2{ margin: 2px 0 8px; font-size: 1.9rem; }
.autrice-mots p{ margin: 0 0 8px; font-size:.92rem; line-height:1.55; color: var(--ink-soft); }
.autrice-mots p:last-child{ margin-bottom:0; }
.autrice-mascottes{ font-style: italic; }

@media (max-width: 620px){

  .autrice{ flex-direction:column; text-align:center; gap:14px; }

  .autrice-photo img{ width: 130px; height: 156px; }

  .autrice-mots h2{ font-size:1.6rem; }
}


.cast-group{ margin-bottom: 18px; }
.cast-group h3{
  margin:0 0 8px; font-size:.8rem; letter-spacing:1.4px; text-transform:uppercase;
  color: var(--pink-deep); font-weight:800;
}
.cast-row{
  display:flex; flex-wrap:wrap; gap:8px;
}
.cast-cell{
  width: 88px; height: 96px; flex:none;
  background: var(--paper); border:2.5px solid var(--ink); border-radius: var(--r-md);
  display:grid; place-items:center; padding:6px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.34,1.6,.64,1), background .2s;
}
/* La case est un vrai bouton depuis qu'on peut ouvrir le dessin en grand :
   on annule ce que le navigateur y ajoute, on garde l'apparence d'origine. */
.cast-cell{ cursor: zoom-in; font: inherit; color: inherit; }
.cast-cell:hover, .cast-cell:focus-visible{
  transform: translateY(-5px) rotate(-3deg); background: var(--pink-pale);
}
.cast-cell img{ width:100%; height:100%; object-fit: contain; }
.modal-credits{
  margin: 6px 0 0; text-align:center; font-size:.9rem; color: var(--ink-soft);
  border-top: 2px dotted rgba(74,32,54,.16); padding-top: 14px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 780px){

  /* on resserre sur mobile, mais sans jamais repasser sous l'encoche */
  :root{
    --top:    calc(10px + env(safe-area-inset-top, 0px));
    --gutter: calc(10px + env(safe-area-inset-left, 0px));
    --bas:    calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .brand-name{ font-size:.9rem; max-width: 116px; }

  .brand-troupe img{ height:28px; }

  .troupe-haute{ height:31px !important; }
  .troupe-luku{ height:33px !important; }

  .brand{ padding:4px 12px 4px 6px; gap:7px; }

  .seg-btn{ padding:5px 12px; font-size:.85rem; }

  .icon-btn{ width:34px; height:34px; font-size:.92rem; }

  /* La recherche a quitté le haut : la barre n'a plus qu'une rangée. */
  .filterbar{ top: calc(var(--top) + 56px); }

  /* Le compte ne flotte plus tout seul : il est dans la barre du bas, avec le
     bouton « Filtres » — voir « LE PANNEAU DE FILTRES SUR TÉLÉPHONE ». */


  #search{ width: 104px; }


  /* le panneau devient une feuille qui remonte du bas */
  .drawer{
    top:auto; bottom:0; left:0; right:0; width:100%;
    height: 84dvh; border-left:0; border-top: var(--border);
    border-radius: 26px 26px 0 0;
    transform: translateY(102%);
    box-shadow: 0 -20px 44px -22px rgba(74,32,54,.5);
  }

  /* Le chapeau reprend corps : c'est le bloc qu'on saisit, et il ne défile
     pas — seules les cartes défilent, sous lui. */
  .drawer-chapeau{ display:block; flex:none; background: var(--paper); }

  /* La prise. Une barrette de 5 px se saisit mal : le bouton fait toute la
     largeur et 24 px de haut, c'est lui qu'on attrape. « touch-action:none »
     est indispensable — sans lui le navigateur prend le geste pour un
     défilement et n'envoie jamais de pointermove. */
  .drawer-grip{
    display:block; width:100%; height:24px; padding:0;
    background: var(--paper); border:0; border-radius:0;
    touch-action: none; cursor: grab;
  }
  .drawer-grip:active{ cursor: grabbing; }
  .drawer-grip::before{
    content:''; display:block; width:44px; height:5px; border-radius:99px;
    background: var(--pink-lt); margin: 9px auto 0;
    transition: width .18s, background .18s;
  }
  .drawer-grip:active::before{ width:56px; background: var(--pink); }

  .drawer-head{ padding-top:2px; touch-action: none; }
  /* « Les chroniques » et « 9 adresses au menu » disaient deux fois la même
     chose : le compte reste, le titre passe aux lecteurs d'écran. */
  body.barre-dans-la-liste .drawer-head h2{
    position:absolute; width:1px; height:1px; overflow:hidden; clip-path: inset(50%);
  }
  body.barre-dans-la-liste .drawer-head .ancre-haut{ margin-right:auto; }

  .drawer-outils{
    padding: 0 14px 12px; background: var(--paper);
    border-bottom: 2.5px dashed rgba(231,86,143,.4);
  }
  .drawer-outils .envies-bouton{ display:block; width:100%; }
  .drawer-outils .porte-chercher{ touch-action: auto; }

  /* À mi-hauteur, la carte reprend la moitié de l'écran : l'ombre se renforce
     pour que le tiroir se détache de ce qu'il laisse voir. */
  body.liste-a-demi .drawer{
    box-shadow: 0 -24px 50px -20px rgba(74,32,54,.62);
  }

  /* Un seul bandeau à la fois. Le tiroir descend pendant que la feuille de
     filtres monte, et remonte quand elle repart : deux panneaux empilés, ce
     serait deux choses à refermer et une main qui ne sait plus laquelle elle
     touche. Les deux glissent à la même vitesse — on lit un échange, pas une
     disparition. */
  body.liste-en-retrait .drawer{ transform: translateY(102%); }

  .cards{ padding-bottom: calc(6px + var(--bas)); }

  .credits{ bottom: var(--bas); font-size:.7rem; padding:3px 11px 3px 5px; }

  .credits-avatar img{ height:24px; width:24px; }

  .leaflet-bottom.leaflet-right .leaflet-control-zoom{
    margin: 0 10px calc(96px + env(safe-area-inset-bottom, 0px)) 0 !important;
  }

  .cast-cell{ width: 74px; height: 82px; }

  .modal-card{ padding: 20px 16px 16px; }
}


/* Sous 420 px, la barre du haut n'a plus la place du nom entier. Plutôt que
   de le faire disparaître — un visiteur arrivant par un lien ne saurait plus
   où il est — on ne garde que « Brunchée », qui suffit à identifier le site. */
@media (max-width: 420px){

  .brand-long{ display:none; }

  .brand-name{ font-size:.95rem; max-width:none; }

  .brand{ padding:4px 10px 4px 6px; }

  /* Sous 420 px la place manque : on retire la mascotte de droite, comme
     avant l'arrivée du portrait. La troupe fait l'identité du site — on ne la
     rogne pas plus qu'il ne faut. */
  .troupe-droite{ display:none; }
}


@media (prefers-reduced-motion: reduce){

  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }

  .splash{ animation: none !important; }

  .splash-logo img, .splash-name, .splash-tag{ animation: none !important; opacity:1 !important; transform:none !important; }
}


/* =========================================================
   ÉDITEUR D'AVIS
   ========================================================= */
/* Le titre reste centré sur l'écran, les actions se calent à droite
   par-dessus. Ça ne tient que tant qu'il reste de la place de chaque côté :
   voir la reprise en grille sous 720 px, où les deux se chevauchaient. */
.topbar-actions{ display:flex; align-items:center; gap:8px; justify-self:end; }

/* Sous 720 px, la marque et les actions se disputent la même ligne. On passe
   en deux colonnes : les actions prennent ce qu'il leur faut, la marque se
   centre dans ce qui reste et se tronque plutôt que de passer dessous. */
@media (max-width: 720px){



  .brand-name{
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

.icon-btn.ajouter{
  background: var(--pink); border-color: var(--pink); color:#fff;
  font-size:1.4rem; font-weight:700; line-height:1;
}
.icon-btn.ajouter:hover{ background: var(--pink-deep); border-color: var(--pink-deep); }

/* mode « clic sur la carte pour poser le pin » */
body.pose-en-cours .leaflet-container{ cursor: crosshair; }


.icon-btn.exporter{ background: var(--gold); border-color: var(--ink); color: var(--ink); font-weight:800; }
.icon-btn.exporter:hover{ background: #E09526; }

/* =========================================================
   MODE AUTRICE
   ========================================================= */
.bandeau-autrice{
  position: fixed; z-index: 795; left:50%; transform: translateX(-50%);
  top: calc(var(--top) + 118px);
  display:flex; align-items:center; gap:10px;
  background: var(--ink); color: var(--pink-lt);
  border-radius:999px; padding: 4px 6px 4px 14px;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.78rem;
  box-shadow: var(--shadow-md);
}
.bandeau-autrice button{
  border:0; background: var(--pink); color:#fff;
  border-radius:999px; padding:3px 11px;
  font-family:inherit; font-weight:800; font-size:.74rem;
}
.bandeau-autrice button:hover{ background: var(--pink-deep); }

/* quand le bandeau est là, le compteur descend d'un cran */
body.mode-autrice .count-pill{ top: calc(var(--top) + 152px); }

/* le portrait de Luku est la porte d'entrée du mode autrice */
/* Curseur ordinaire en mode public : une main annoncerait qu'il y a quelque
   chose à cliquer. Il ne redevient une main qu'en mode autrice. */
.autrice-photo{ position:relative; display:block; }
body.mode-autrice .autrice-photo{ cursor: pointer; }
.autrice-photo img{ transition: transform .25s cubic-bezier(.34,1.4,.64,1); }
.autrice-photo:hover img{ transform: translateY(-3px) rotate(-1.5deg); }
.autrice-photo:focus-visible{ outline:3px solid var(--pink); outline-offset:4px; border-radius:22px; }
/* Aucune marque en mode public : le portrait est un portrait, rien de plus.
   Un cadenas annonçait qu'il y avait quelque chose derrière — c'était une
   invitation à essayer, pas une protection. Luku sait où cliquer.
   La plume ne revient qu'une fois la session ouverte, comme repère de sortie. */
body.mode-autrice .autrice-photo::after{
  content:'✍️'; position:absolute; right:-8px; bottom:-8px;
  width:30px; height:30px; border-radius:50%;
  background: var(--paper); border: var(--border);
  display:grid; place-items:center; font-size:.8rem;
  box-shadow: var(--shadow-sm); transition: transform .25s;
}
body.mode-autrice .autrice-photo:hover::after{ transform: scale(1.12); }

@media (max-width: 780px){

  .bandeau-autrice{ top:auto; bottom: calc(var(--bas) + 38px); }

  body.mode-autrice .count-pill{ top:auto; bottom: calc(var(--bas) + 76px); }
}


/* --- intertitres de thème, dans le sélecteur et la galerie --- */
.cast-theme{
  margin: 4px 0 6px; font-size:.7rem; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; color: var(--ink-faint);
}
.cast-theme:first-child{ margin-top:0; }

/* --- pastille d'état du carnet partagé, dans le bandeau autrice --- */
.etat-nuage{
  font-size:.72rem; font-weight:800; letter-spacing:.01em;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
  background: rgba(255,255,255,.16); color:#fff;
}
.etat-nuage.souci{ background: var(--berry); }

/* =========================================================
   FILTRES SUR TÉLÉPHONE
   ---------------------------------------------------------
   Sous 720 px, la rangée ne tenait pas : les deux tiers des commandes
   partaient hors écran dans une zone défilante que rien ne signalait.
   Les mêmes éléments passent donc dans un panneau, ouvert par un bouton
   qui compte les filtres posés. Aucun contrôle n'est dupliqué : c'est le
   même HTML, remis en forme.
   ========================================================= */
}


/* =========================================================
   GRAPPES — les pins trop serrés se regroupent
   ---------------------------------------------------------
   L'habillage d'origine de leaflet.markercluster (ronds bleus) n'est pas
   chargé : tout est repris ici, dans la palette du site. Une grappe qui
   contient au moins une adresse brunchée se signale en rose plein — c'est
   ce qu'on cherche sur la carte.
   ========================================================= */
.grappe-wrap{ background:none !important; border:0 !important; }
.grappe{
  width:52px; height:52px; border-radius:50%;
  border: var(--border); background: var(--paper);
  display:grid; place-items:center;
  box-shadow: var(--shadow-md);
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.02rem;
  color: var(--ink);
  transition: transform .2s cubic-bezier(.34,1.6,.64,1);
}
.grappe.a-des-testes{ background: var(--pink); border-color: var(--ink); color:#fff; }
.grappe-wrap:hover .grappe{ transform: scale(1.12); }

/* le trait qui relie les pins écartés d'une grappe ouverte */
.leaflet-cluster-spider-leg{ stroke: var(--ink) !important; stroke-opacity:.4 !important; }

/* --- la pancarte des adresses à venir ---
   Volontairement effacée : crème, texte doux, petit. Elle dit le statut sans
   crier, là où les anciennes pastilles roses écrasaient tout.
   Le contre-agrandissement annule le --echelle du pin : sans lui, le texte
   rétrécissait avec la bulle et devenait illisible. */
.pin-panneau{
  position:absolute; top:-5px; right:-12px;
  background: var(--paper); color: var(--ink-soft);
  border: 2px solid var(--ink-faint); border-radius:999px;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.62rem;
  letter-spacing:.01em; padding:1px 7px; white-space:nowrap;
  box-shadow: var(--shadow-sm); pointer-events:none;
  transform: scale(calc(1 / var(--echelle, 1)));
  transform-origin: 100% 0;
}
.pin-wrap:hover .pin-panneau,
.pin.is-active .pin-panneau{ border-color: var(--pink-deep); color: var(--pink-deep); }

/* =========================================================
   PHOTOS
   ========================================================= */
/* --- le bandeau sous l'avis --- */
/* Les photos se replient sur plusieurs rangs plutôt que de défiler
   horizontalement. Le bandeau qui glissait obligeait à découvrir qu'il
   glissait — une barre de défilement dans une bulle de 300 px, c'est une
   commande de plus pour trois photos. */
.galerie{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px; margin: 10px 0 2px;
}
.galerie-vue{ margin:0; min-width:0; }
.galerie-vue button{
  display:block; width:100%; padding:0; border: var(--border); border-radius: var(--r-sm);
  background: var(--paper); overflow:hidden; line-height:0;
  box-shadow: var(--shadow-sm); transition: transform .18s;
}
.galerie-vue button:hover{ transform: translateY(-2px); }
.galerie-vue img{ width:100%; height: 78px; object-fit: cover; }
.galerie-vue figcaption{
  margin-top:5px; font-size:.72rem; line-height:1.3; color: var(--ink-soft); font-weight:600;
}

/* --- la photo en grand --- */
.visionneuse{
  position: fixed; inset:0; z-index: 1200;
  display:grid; place-items:center; padding: 4vmin;
  background: rgba(40,14,26,.86); backdrop-filter: blur(4px);
}
.visionneuse figure{ margin:0; display:grid; gap:12px; justify-items:center; max-width:100%; }
/* Un dessin fait 256 px de côté : l'étirer plein écran ne montrerait que des
   pixels. On le double, pas plus — c'est déjà six fois la vignette de la
   galerie, et il reste net. */
.visionneuse.est-dessin img{
  max-width: min(88vw, 520px); max-height: min(72vh, 520px);
  background: var(--cream);
}
.visionneuse img{
  max-width: min(96vw, 1200px); max-height: 78vh;
  width:auto; height:auto; object-fit:contain;
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.visionneuse figcaption{
  color:#fff; font-weight:700; font-size:.95rem; text-align:center;
  max-width: 60ch; text-wrap: balance;
  display:grid; gap:4px; justify-items:center;
}
.visionneuse-rang{ font-size:.8rem; font-weight:800; color: var(--pink-lt); letter-spacing:.06em; }

/* Les flèches se posent sur les bords, à hauteur de main. Sur téléphone le
   glissement du doigt fait le même travail, mais on les garde : tout le
   monde ne devine pas qu'on peut glisser. */
.visionneuse-fleche{
  position:absolute; top:50%; transform: translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  border: 2.5px solid rgba(255,255,255,.5); background: rgba(74,32,54,.5);
  backdrop-filter: blur(6px);
  color:#fff; font-size:2rem; line-height:1; font-family:'Baloo 2',sans-serif;
  display:grid; place-items:center; padding-bottom:5px;
  transition: background .16s, transform .16s, border-color .16s;
}
.visionneuse-fleche:hover, .visionneuse-fleche:focus-visible{
  background: var(--pink); border-color:#fff; transform: translateY(-50%) scale(1.08);
}
.visionneuse-fleche.avant{ left: var(--gutter); }
.visionneuse-fleche.apres{ right: var(--gutter); }

@media (max-width: 620px){

  /* au pouce, les flèches descendent près du bas : le haut de l'écran est
     hors d'atteinte d'une main qui tient le téléphone */
  .visionneuse-fleche{ top:auto; bottom: calc(var(--bas) + 8px); transform:none; width:46px; height:46px; }

  .visionneuse-fleche:hover, .visionneuse-fleche:focus-visible{ transform: scale(1.08); }
}

.visionneuse .modal-close{ position:absolute; top: var(--top); right: var(--gutter); }

@media (max-width: 620px){

  .galerie-vue img{ height: 72px; }
}



/* Sur un écran étroit la couronne garde sa taille : 280 px tiennent sur un
   iPhone SE (320 px) avec ses marges, et rapetisser les cibles au doigt
   serait le pire des échanges. */
/* =========================================================
   FILTRES SUR TÉLÉPHONE
   ---------------------------------------------------------
   Sous 720 px, la rangée ne tenait pas : les deux tiers des commandes
   partaient hors écran dans une zone défilante que rien ne signalait.
   Les mêmes éléments passent donc dans un panneau, ouvert par un bouton
   qui compte les filtres posés. Aucun contrôle n'est dupliqué : c'est le
   même HTML, remis en forme.
   ========================================================= */
}



/* --- la pancarte des adresses à venir ---
   Volontairement effacée : crème, texte doux, petit. Elle dit le statut sans
   crier, là où les anciennes pastilles roses écrasaient tout.
   Le contre-agrandissement annule le --echelle du pin : sans lui, le texte
   rétrécissait avec la bulle et devenait illisible. */
.pin-panneau{
  position:absolute; top:-5px; right:-12px;
  background: var(--paper); color: var(--ink-soft);
  border: 2px solid var(--ink-faint); border-radius:999px;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.62rem;
  letter-spacing:.01em; padding:1px 7px; white-space:nowrap;
  box-shadow: var(--shadow-sm); pointer-events:none;
  transform: scale(calc(1 / var(--echelle, 1)));
  transform-origin: 100% 0;
}
.pin-wrap:hover .pin-panneau,
.pin.is-active .pin-panneau{ border-color: var(--pink-deep); color: var(--pink-deep); }

/* =========================================================
   LES PETITES BOÎTES DE DIALOGUE
   ---------------------------------------------------------
   Elles remplacent alert / confirm / prompt. Une mascotte, une phrase, deux
   boutons : le ton du site tient jusque dans ses questions.
   ========================================================= */


/* =========================================================
   VIGNETTES À FOND — elles remplissent leur case
   ---------------------------------------------------------
   Un dessin détouré se pose DANS sa case, avec du vide autour. Une vignette
   à fond peint la REMPLIT, comme une photo dans son cadre : la contenir
   laissait des bandes vides de part et d'autre, sans raison apparente.
   ========================================================= */
.cast-cell.est-vignette{ padding:0; overflow:hidden; }
.cast-cell.est-vignette img{ object-fit: cover; }

.review-portrait.est-vignette img{
  object-fit: cover; object-position: center;
  border-radius: 12px; border: 2px solid var(--ink);
}

/* =========================================================
   LA MÉTHODE DE NOTATION
   ---------------------------------------------------------
   Une note ne vaut que si l'on sait ce qu'elle mesure. Le bloc se veut
   lisible d'un coup d'œil : quatre critères, une échelle, des engagements.
   Rien de décoratif qui ferait écran au texte.
   ========================================================= */
.methode{ margin-top: -4px; }
.methode-titre{
  margin: 0 0 6px; font-size: 1.2rem; color: var(--ink);
  font-family:'Baloo 2',sans-serif; font-weight:800;
}
.methode-titre-petit{
  margin: 18px 0 8px; font-size: .78rem; letter-spacing:.09em;
  text-transform: uppercase; color: var(--pink-deep);
  font-family:'Baloo 2',sans-serif; font-weight:800;
}
.methode-intro, .methode-fin{
  margin: 0; font-size:.9rem; line-height:1.55; color: var(--ink-soft);
}
.methode-fin{
  margin-top: 16px; padding-top: 12px; font-style: italic;
  border-top: 2px dotted rgba(74,32,54,.12);
}

/* --- les quatre critères --- */
.criteres{
  list-style:none; margin: 14px 0 0; padding:0;
  display:grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.criteres li{
  display:grid; grid-template-columns: auto 1fr; gap: 2px 10px;
  align-items:start;
  background: var(--paper); border: var(--border); border-radius: var(--r-md);
  padding: 11px 13px;
}
.critere-ico{ grid-row: 1 / span 2; font-size:1.25rem; line-height:1.1; }
.criteres b{ font-size:.92rem; color: var(--ink); }
.criteres span:not(.critere-ico){
  font-size:.82rem; line-height:1.45; color: var(--ink-soft);
}

/* --- l'échelle des étoiles --- */
.echelle{ margin:0; display:grid; gap:5px; }
.echelle > div{ display:grid; grid-template-columns: 46px 1fr; gap:10px; align-items:baseline; }
.echelle dt{
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.88rem;
  color: var(--gold); text-align:right;
}
.echelle dd{ margin:0; font-size:.85rem; line-height:1.45; color: var(--ink-soft); }

/* --- les engagements --- */
.engagements{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.engagements li{
  position:relative; padding-left: 24px;
  font-size:.85rem; line-height:1.45; color: var(--ink-soft);
}
.engagements li::before{
  content:'✓'; position:absolute; left:0; top:-1px;
  font-weight:800; color: var(--mint);
}

@media (max-width: 620px){

  .criteres{ grid-template-columns: 1fr; }
}


/* =========================================================
   LA PERSONNALITÉ DES MASCOTTES
   ---------------------------------------------------------
   Choisir sa mascotte, c'est dire quel genre de brunch c'était. L'étiquette
   le rend lisible sans qu'on ait à connaître le code par cœur — la mascotte
   y figure en miniature, pour faire le lien avec le pin sur la carte.
   ========================================================= */
.personnalite{
  display:inline-flex; align-items:center;
  background: var(--pink-pale); border-radius:999px;
  padding: 2px 10px; margin-bottom: 3px;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.68rem;
  letter-spacing:.03em; color: var(--pink-deep);
}

.cast-personnalite{
  margin: -2px 0 10px; font-size:.82rem; line-height:1.45; color: var(--ink-soft);
}
.cast-personnalite b{ color: var(--pink-deep); }


/* =========================================================
   ENVOYER À TON +1
   ---------------------------------------------------------
   Le bouton vit au pied de chaque fiche, dans la bulle comme dans le
   panneau liste. Il n'ouvre pas une autre page : chaque adresse a bien son
   URL — /brunch/sixta-toulouse/ — mais cette URL ouvre LA CARTE avec la
   bulle déjà posée dessus.

   Le choix des trois voies se fait dans une boîte de dialogue plutôt que
   dans un menu déroulant : la bulle fait 300 px de large et rogne tout ce
   qui dépasse.
   ========================================================= */
/* Le partage est une icône, voisine du cœur : deux gestes du même ordre, et
   la ligne de la note avait la place. Un bouton pleine largeur repoussait les
   points forts hors de l'écran, c'est-à-dire hors de vue. */
.partage-ico-btn{
  border: var(--border); background: var(--pink); color:#fff;
  width:31px; height:31px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  box-shadow: var(--shadow-sm); transition: transform .2s, background .2s;
}
.partage-ico-btn:hover{ transform: scale(1.14) rotate(8deg); background: var(--pink-deep); }
.partage-ico-btn svg{ margin-top:-1px; }

/* --- la boîte --- */
.partage-carte{ max-width: 430px; text-align:center; }
.partage-titre{
  margin: 2px 0 6px; font-size: 1.3rem; line-height:1.2;
}
.partage-titre span{ color: var(--pink-deep); }
.partage-quoi{
  margin: 0 0 16px; font-size:.92rem; color: var(--ink-soft);
  display:grid; gap:3px;
}
.partage-quoi b{ font-size:1rem; color: var(--ink); }
.partage-etat{ font-family:'Baloo 2',sans-serif; font-weight:800; color: var(--ink); }
/* l'adresse exacte, pour qu'on sache ce qu'on envoie */
.partage-url{
  font-size:.72rem; font-weight:700; color: var(--ink-faint);
  overflow-wrap:anywhere;
}

.partage-choix{ display:grid; gap:9px; text-align:left; }
.partage-voie{
  display:grid; grid-template-columns: auto 1fr; gap: 1px 12px;
  align-items:center; width:100%; text-align:left; text-decoration:none;
  background: var(--paper); color: var(--ink);
  border: var(--border); border-radius: var(--r-md);
  padding: 10px 13px; box-shadow: var(--shadow-sm);
  transition: transform .16s, border-color .16s;
}
.partage-voie:hover{ transform: translateY(-2px); border-color: var(--pink-deep); }
.partage-ico{
  grid-row: 1 / span 2; display:grid; place-items:center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--pink-pale); color: var(--pink-deep);
}
.partage-nom{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.96rem; }
.partage-note{ font-size:.76rem; font-weight:600; color: var(--ink-soft); }
/* pendant que la carte 9:16 se prépare : quelques centaines de kilo-octets à
   aller chercher, il vaut mieux le dire que laisser croire à un raté */
.partage-voie.est-occupe{ opacity:.55; pointer-events:none; }

.partage-mot{
  margin: 14px 0 0; font-size:.84rem; font-weight:700; color: var(--pink-deep);
  min-height: 1.2em; opacity:0; transition: opacity .2s; text-wrap: balance;
}
.partage-mot.est-visible{ opacity:1; }


/* =========================================================
   LA FICHE EN GRAND
   ---------------------------------------------------------
   La bulle fait 308 px et n'affiche qu'une hauteur d'écran. Dès qu'un avis
   est un peu écrit, il faut y faire défiler — et sur un téléphone, défiler
   dans une bulle posée sur une carte qui défile aussi n'est jamais agréable.

   Le bouton d'agrandissement vit dans la tête de la fiche, à gauche de la
   croix de fermeture. Il n'a de sens que là : dans le panneau liste, la
   fiche est déjà entière.
   ========================================================= */
.review-agrandir{ display:none; }

.cb-popup .review-agrandir{
  display:grid; place-items:center;
  position:absolute; z-index:2; top:10px; right:44px;
  width:26px; height:26px; border-radius:50%;
  border:0; background: var(--pink-pale); color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: background .16s, transform .16s;
}
.cb-popup .review-agrandir:hover{
  background: var(--pink); color:#fff; transform: scale(1.1);
}
/* la tête réserve la place des deux boutons */
.cb-popup .review-head{ padding-right: 78px; }

/* `overflow: hidden` servait à faire respecter les coins arrondis par la tête
   rose. Mais il écrasait le `overflow-y: auto` de .modal-card : la fiche ne
   défilait plus, et tout ce qui dépassait de l'écran était inatteignable.
   Les coins sont obtenus autrement — par le rayon posé sur la tête elle-même. */
.fiche-carte{
  width: min(680px, 100%); padding: 0;
  overflow-y: auto; overscroll-behavior: contain;
}
.fiche-carte .review-head{ border-radius: 26px 26px 0 0; }
/* La fiche apporte son propre habillage : la carte ne fait que l'encadrer. */
.fiche-carte .review-head{ padding: 18px 54px 12px 18px; }
.fiche-carte .review-cle{ padding: 0 18px 12px; }
.fiche-carte .review-body{ padding: 14px 18px 20px; }
.fiche-carte .review-name{ font-size: 1.35rem; }
.fiche-carte .review-portrait,
.fiche-carte .review-portrait img{ width:78px; height:86px; }
.fiche-carte .review-text,
.fiche-carte .critere-texte{ font-size:.95rem; }
.fiche-carte .galerie{ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.fiche-carte .galerie-vue img{ height: 108px; }
.fiche-carte .modal-close{ z-index:3; }

/* Un titre pour qui écoute la page, invisible pour qui la regarde. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* =========================================================
   QUAND PEUT-ON Y ALLER
   ---------------------------------------------------------
   La pastille d'ouverture, en tête de « l'essentiel ». C'est une information
   de décision : elle doit se lire avant l'avis, et sans faire défiler.
   ========================================================= */
.ouverture{
  display:inline-flex; align-items:center; gap:7px; margin:0;
  /* « justify-self » et non « align-self » : la pastille est un élément de
     grille, et c'est l'axe horizontal qu'il faut brider — sinon elle s'étire
     sur toute la largeur de la fiche. */
  justify-self:start;
  background: var(--cream); border:1.5px solid rgba(74,32,54,.14);
  border-radius:999px; padding:3px 11px 3px 9px;
  font-size:.78rem; font-weight:700; color: var(--ink-soft);
}
.ouverture-pastille{
  width:8px; height:8px; border-radius:50%; flex:none;
  background: var(--ink-faint);
}
.ouverture.est-ouvert{
  background: rgba(78,158,124,.13); border-color: rgba(78,158,124,.4);
  color: #2F6E55;
}
.ouverture.est-ouvert .ouverture-pastille{ background: var(--mint); }


/* =========================================================
   LA RANGÉE D'ENVIES ET LE PANNEAU « FILTRES »
   ---------------------------------------------------------
   Une barre de recherche, cinq envies, un bouton. Le reste attend derrière
   « Filtres » : montrer douze critères en permanence, c'est demander à
   quelqu'un de choisir avant de savoir ce qu'il cherche.

   Une seule disposition pour tous les écrans. L'ancienne en avait deux — une
   rangée sur ordinateur, un panneau sur téléphone — et le même jeu de
   commandes devait tenir dans les deux, ce qui les rendait toutes deux
   moyennes.
   ========================================================= */
/* Deux zones côte à côte : les envies défilent, « + Filtres » reste. Sur un
   téléphone les cinq puces débordent largement — si le bouton défilait avec
   elles, les critères secondaires seraient invisibles à qui ne pense pas à
   pousser la rangée du doigt. */
.envies-rangee{
  display:flex; align-items:center; gap:6px;
  max-width:100%; min-width:0; justify-content:center;
}
.envies{
  display:flex; gap:6px; min-width:0;
  overflow-x:auto; scrollbar-width:none;
  padding: 2px 4px;
  /* Un fondu au bord droit dit qu'il y en a d'autres, sans barre de
     défilement à l'écran. */
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.envies::-webkit-scrollbar{ display:none; }
.envies-ancre{ flex:none; padding: 2px 4px 2px 0; }
/* Rien à masquer quand tout tient : le fondu ne doit pas manger la dernière
   puce sur un grand écran. */
@media (min-width: 900px){
  .envies-rangee{ flex-wrap:wrap; }
  .envies{ -webkit-mask-image:none; mask-image:none; flex-wrap:wrap; justify-content:center; }
}

.envie{
  display:inline-flex; align-items:center; gap:5px; flex:none;
  background: rgba(255,251,253,.94); backdrop-filter: blur(10px);
  border: 2px solid rgba(74,32,54,.16); border-radius:999px;
  padding: 5px 13px; white-space:nowrap;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.78rem;
  color: var(--ink-soft); box-shadow: var(--shadow-sm);
  transition: transform .16s, background .16s, border-color .16s, color .16s;
}
.envie:hover{ transform: translateY(-2px); border-color: var(--pink-lt); color: var(--ink); }
.envie.is-on{
  background: var(--pink); border-color: var(--pink); color:#fff;
  box-shadow: 0 3px 0 var(--pink-deep);
}
.envie-ico{ font-size:.9rem; line-height:1; }
/* L'emoji d'une puce allumée reste lisible sur le rose : on le pose sur un
   disque clair plutôt que de le laisser se battre avec le fond. */
.envie.is-on .envie-ico{
  background:#fff; border-radius:50%; width:17px; height:17px;
  display:grid; place-items:center; font-size:.72rem;
}
.envie-plus{ border-style:dashed; }
.envie-plus.a-des-filtres{
  background: var(--ink); border-color: var(--ink); border-style:solid; color:#fff;
}
.pastille-actifs{
  background: var(--pink); color:#fff; border-radius:999px;
  min-width:16px; padding:0 4px; font-size:.66rem; line-height:16px; text-align:center;
}
.envie-plus.a-des-filtres .pastille-actifs{ background:#fff; color: var(--ink); }

/* --- le panneau --- */
.fb-controles{
  margin: 8px auto 0; pointer-events:auto;
  width: min(520px, 100%);
  background: var(--paper); border: var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 14px 16px 16px;
  display:grid; gap:13px;
  /* Sans « both », pour la même raison que la feuille sur téléphone : ce mode
     garde l'image de départ — ici opacity:0 — tant que l'animation n'a pas
     démarré, et un panneau qui n'apparaît jamais vaut mieux ne pas risquer. */
  animation: panneauEclot .22s cubic-bezier(.34,1.4,.64,1);
}
/* Sur un écran d'ordinateur, le panneau s'étale plutôt que de descendre :
   cinq critères empilés mangeaient les deux tiers de la carte alors que la
   place manquait de haut, pas de large. Budget, quartier, statut et note se
   rangent sur deux colonnes ; l'en-tête, les envies — les plus nombreuses —
   et le pied gardent toute la largeur. */
@media (min-width: 781px){
  .fb-controles{
    width: min(860px, 100%);
    grid-template-columns: 1fr 1fr; column-gap: 22px;
    align-items: start;
  }
  .fb-tete, .fb-recherche, #fb-envies-ligne{ grid-column: 1 / -1; }
  /* Le bouton « remettre à zéro » garde sa place même invisible, pour que la
     rangée ne saute pas au premier filtre touché — mais en propre ligne cela
     faisait 65 px de panneau vide en permanence. Il remonte dans l'en-tête, à
     gauche, où sa largeur ne dépend de rien : le compteur, lui, change de
     texte, et l'accrocher à droite l'aurait fait valser. */
  .fb-controles{ position:relative; }
  .fb-pied{ position:absolute; top:14px; left:130px; }
  /* Les cinq envies rapides tiennent en entier dans la rangée juste au-dessus :
     les redire ici serait deux boutons pour la même chose, côte à côte. */
  #filtre-envies .puce[data-rapide]{ display:none; }
}
@keyframes panneauEclot{
  from{ opacity:0; transform: translateY(-8px) }
  to  { opacity:1; transform:none }
}
@media (prefers-reduced-motion: reduce){ .fb-controles{ animation:none; } }

.fb-grip{ display:none; }
/* Le chapeau s'efface sur ordinateur : ses enfants redeviennent des cases de
   la grille du panneau, exactement comme avant qu'il existe. */
.fb-chapeau{ display:contents; }
.fb-recherche:empty{ display:none; }
.fb-tete{ display:flex; align-items:center; justify-content:space-between; }

/* La porte n'est qu'un bouton sur grand écran : la recherche a sa place en
   haut, à côté du nom du site, et n'a pas à être annoncée deux fois. */
.porte{ display:contents; }
.porte-chercher{ display:none; }
/* Sur grand écran, le compte flotte seul au-dessus de la carte : sa rangée
   s'efface, et le jumeau du bouton de remise à zéro n'a pas lieu d'être — le
   vrai est dans le panneau, à un doigt. */
.ancre-haut{ display:contents; }
#reset-carte{ display:none; }
.fb-tete h2{ margin:0; font-size:1.1rem; }
.fb-ligne{ display:grid; gap:7px; }
.fb-libelle{
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.74rem;
  letter-spacing:.03em; text-transform:uppercase; color: var(--ink-faint);
}
.fb-ligne .seg{ width:100%; }
.fb-ligne .seg-btn{ flex:1; text-align:center; }
.fb-ligne .slider-pill{ width:100%; box-shadow:none; }
.fb-ligne .slider-pill input[type=range]{ flex:1; width:auto; }

.puces{ display:flex; flex-wrap:wrap; gap:6px; }
.puce{
  display:inline-flex; align-items:center; gap:5px;
  background: var(--cream); border:2px solid rgba(74,32,54,.14);
  border-radius:999px; padding: 4px 11px;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.76rem;
  color: var(--ink-soft); transition: background .15s, border-color .15s, color .15s;
}
.puce:hover{ border-color: var(--pink-lt); }
.puce.is-on{ background: var(--pink-pale); border-color: var(--pink-deep); color: var(--pink-deep); }

.champ-select{
  width:100%; border: 2px solid rgba(74,32,54,.16); border-radius: var(--r-sm);
  background: var(--cream); padding: 8px 11px;
  font-family:inherit; font-size:.88rem; color: var(--ink);
}

.fb-pied{ display:flex; justify-content:flex-end; }
/* Ici le bouton n'est plus une pastille ronde mais une pilule qui porte un
   texte : la grille carrée héritée de .icon-btn empilait l'icône et le libellé
   dans 34 px, et « Tout remettre à zéro » débordait par le bas. */
.fb-pied .reset{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:auto; gap:7px; padding: 6px 14px; border-radius:999px;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.78rem;
}
.fb-pied .btn-texte{ display:inline; }

/* =========================================================
   LE PANNEAU DE FILTRES SUR TÉLÉPHONE
   ---------------------------------------------------------
   Une feuille qui remonte du bas, comme le tiroir des chroniques : le pouce
   la rejoint sans traverser l'écran, et la carte reste vivante derrière —
   c'est elle qu'on regarde changer pendant qu'on filtre. Pas de voile, donc,
   volontairement : un simple appui sur la carte referme.
   ========================================================= */
@media (max-width: 780px){

  /* --- la rangée d'envies s'efface, « Filtres » rejoint le compte --- */
  /* Les cinq puces défilaient sous la recherche sans qu'on en voie deux et
     demie : elles vivent mieux dans la feuille, en entier. Reste le bouton —
     et lui laisser une ligne à lui seul, sous une barre de recherche pleine
     largeur, serait une ligne perdue pour un objet perdu au milieu.

     Il rejoint donc le compte d'adresses, en bas, et les deux font une barre.
     Posé seul dans un coin il flottait sans attache : les commandes de zoom
     ne tiennent debout que parce qu'elles sont deux. Ici la paire a un sens —
     le compte dit ce qu'on obtient, le bouton ouvre de quoi le changer — et
     la feuille monte juste dessous : on appuie où la réponse s'écrit. */
  #envies{ display:none; }

  .envies-ancre{
    position: fixed; z-index: 790; padding:0;
    /* 48 px : les crédits font 35 px de haut depuis le bas, il faut passer
       au-dessus et laisser respirer. À 38 px la porte les frôlait de trois
       pixels. */
    left:0; right:0; bottom: calc(var(--bas) + 48px);
    display:flex; flex-direction:column; align-items:center; gap:7px;
    pointer-events:none;
  }
  .envies-ancre > *{ pointer-events:auto; }
  .envies-bouton{ width: min(430px, calc(100% - 2 * var(--gutter))); }

  .ancre-haut{
    display:flex; align-items:center; justify-content:center; gap:7px;
    max-width: calc(100% - 2 * var(--gutter));
  }
  /* Ici il s'efface tout à fait plutôt que de garder sa place : la rangée est
     centrée, un vide réservé à droite décentrerait le compte en permanence. */
  #reset-carte{ display:inline-flex; }
  #reset-carte.en-retrait{ display:none; }
  #reset-carte{
    flex:none; width:auto; height:auto; gap:6px; padding: 6px 12px;
    border-radius:999px; background: rgba(255,251,253,.94);
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.75rem;
    white-space:nowrap;
  }

  /* Une seule pilule en deux parties. La couture au milieu dit qu'il y a deux
     cibles ; la forme entière dit « on cherche ici ». */
  .porte{
    display:flex; align-items:stretch; width:100%; overflow:hidden;
    background: rgba(255,251,253,.94); backdrop-filter: blur(10px);
    border: var(--border); border-radius:999px; box-shadow: var(--shadow-md);
  }
  .porte-chercher{
    display:flex; align-items:center; gap:8px; flex:1; min-width:0;
    background:none; border:0; padding: 10px 15px; text-align:left;
    font-family:inherit; font-size:.85rem; color: var(--ink-faint);
  }
  .porte-chercher:active{ background: rgba(231,86,143,.08); }
  .porte-texte{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Un mot cherché n'est pas une invite : il prend l'encre pleine et le gras,
     pour qu'on voie d'un coup d'œil pourquoi la carte est réduite. */
  .porte-texte.a-un-mot{
    color: var(--ink); font-family:'Baloo 2',sans-serif; font-weight:800;
  }

  /* Plus de second bouton : la barre entière est la porte. Ce qui reste de
     « + Filtres » ici, c'est sa pastille, recopiée dans la barre. */
  .porte .envie-plus{ display:none; }

  /* La pastille n'est pas une cible : pas de bordure, pas de séparation, elle
     se contente de dire combien de filtres travaillent. Elle ne paraît que
     lorsqu'il y en a — sinon la barre reste un champ de recherche, net. */
  .porte-chercher .pastille-actifs{
    flex:none; margin-left:auto; background: var(--ink); color:#fff;
    font-family:'Baloo 2',sans-serif; font-weight:800;
  }

  /* Le compte rentre dans le rang : il flottait pour son compte au-dessus de
     la carte, il est maintenant posé dans la barre. */
  #result-count{
    position: static; transform:none; top:auto; bottom:auto; left:auto;
  }

  .envies-ancre .count-pill{ font-size:.78rem; }
  .envies-ancre .envie{
    border-style: solid; border-color: var(--ink);
    box-shadow: var(--shadow-md);
  }

  .fb-controles{
    position: fixed; left:0; right:0; bottom:0; top:auto;
    width:100%; margin:0; z-index: 950;
    /* Quatorze envies ne tiennent pas sur un écran de téléphone : la feuille
       s'arrête aux trois quarts et le reste se déroule dedans. */
    max-height: 76dvh; overflow-y:auto; overscroll-behavior: contain;
    border-radius: 26px 26px 0 0; border-left:0; border-right:0; border-bottom:0;
    /* Aucun rembourrage en haut : les blocs collants s'arrêtent au bord de la
       boîte de rembourrage, et six pixels suffisaient à laisser les étiquettes
       défiler par-dessus la poignée. C'est la bande elle-même qui fait la
       marge. */
    padding: 0 15px calc(16px + var(--bas));
    box-shadow: 0 -20px 44px -22px rgba(74,32,54,.5);
    /* Sans « both » : ce mode garde l'image de départ tant que l'animation n'a
       pas démarré, et une animation qui ne démarre jamais — onglet en
       arrière-plan — laissait la feuille bloquée sous l'écran, invisible.
       Au repos elle est donc en place ; l'animation ne fait que l'y amener. */
    animation: feuilleMonte .26s cubic-bezier(.34,1.4,.64,1);
  }
  @keyframes feuilleMonte{
    from{ transform: translateY(100%) }
    to  { transform: none }
  }

  /* Poignée et tête restent en haut quand on déroule : la barrette dit qu'on
     est dans une feuille, et le compte d'adresses répond à chaque étiquette
     qu'on touche. La poignée est une bande pleine largeur — sinon les
     étiquettes défileraient dans le blanc à côté d'elle. */
  /* Le chapeau entier reste épinglé : poignée, titre et champ de recherche.
     Le champ y est haut dans l'écran — vers le quart supérieur — donc bien
     au-dessus du clavier, qui mange à peu près le tiers du bas. */
  .fb-chapeau{
    display:block; position:sticky; top:0; z-index:2;
    background: var(--paper); padding-bottom:9px;
  }
  .fb-recherche:empty{ display:none; }
  .fb-recherche .search-pill{ width:100%; }

  /* La prise. Une barrette de 5 px se saisit mal : le bouton fait toute la
     largeur et 24 px de haut, c'est lui qu'on attrape. « touch-action:none »
     est indispensable — sans lui le navigateur prend le geste pour un
     défilement de la feuille et n'envoie jamais de pointermove. */
  .fb-grip{
    display:block; width:100%; height:24px; padding:0;
    background: var(--paper); border:0; border-radius:0;
    touch-action: none; cursor: grab;
  }
  .fb-grip:active{ cursor: grabbing; }
  .fb-grip::before{
    content:''; display:block; width:44px; height:5px; border-radius:99px;
    background: var(--pink-lt); margin: 9px auto 0;
    transition: width .18s, background .18s;
  }
  .fb-grip:active::before{ width:56px; background: var(--pink); }

  /* À mi-hauteur, la carte reprend la moitié de l'écran : l'ombre portée se
     renforce pour que la feuille se détache de ce qu'elle laisse voir. */
  body.filtres-a-demi .fb-controles{
    box-shadow: 0 -24px 50px -20px rgba(74,32,54,.62);
  }

  /* Le titre se laisse tirer aussi — la zone de prise est plus généreuse que
     la seule barrette. La croix et le champ gardent leurs propres gestes. */
  .fb-tete{ touch-action: none; }
  .fb-recherche{ touch-action: auto; }
  .fb-tete{ padding: 6px 0 9px; gap:7px; }
  /* Quatre objets sur 375 px, c'est un de trop : « Affiner » s'efface pour
     les yeux et reste pour les lecteurs d'écran. La feuille dit assez ce
     qu'elle est — elle s'ouvre depuis la recherche et porte ses intertitres. */
  .fb-tete h2{
    position:absolute; width:1px; height:1px; overflow:hidden; clip-path: inset(50%);
  }
  /* Le pied redevient un élément ordinaire de la ligne, juste avant la croix. */
  .fb-pied{ position:static; margin-left:auto; }
  .fb-tete .count-pill{ margin: 0; }
  /* Même rose que partout ailleurs, simplement plus compact : il partage la
     ligne avec le compte et la croix. */
  .fb-pied .reset{ padding: 6px 12px; font-size:.75rem; white-space:nowrap; }
}

/* Sous 380 px, le compte, le bouton et la croix se disputent la ligne : à
   320 px le bouton mordait sur le compte de cinq pixels. On le resserre plutôt
   que de raccourcir son libellé — deux textes pour un même bouton selon la
   largeur, c'est une divergence qui finit toujours par se voir. */
@media (max-width: 380px){
  .fb-pied .reset{ padding: 5px 9px; font-size:.68rem; gap:5px; }

  /* --- les étiquettes --- */
  /* Deux colonnes plutôt qu'un pavé qui se replie n'importe où : les lignes
     s'alignent, chaque étiquette est assez grande pour le pouce, et l'emoji
     posé sur son disque donne à la rangée un rythme régulier. */
  #filtre-envies{
    display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px;
  }
  #filtre-envies .puce{
    justify-content:flex-start; gap:9px; text-align:left;
    padding: 8px 12px; border-radius: 15px; font-size:.8rem;
    background: var(--paper); border-color: rgba(74,32,54,.13);
    box-shadow: var(--shadow-sm);
  }
  .puce-ico{
    flex:none; width:27px; height:27px; border-radius:50%;
    background: var(--cream); display:grid; place-items:center;
    font-size:.95rem; line-height:1;
  }
  .puce-nom{ min-width:0; }
  /* Allumée, elle prend le rose plein de la rangée du haut : une étiquette
     cochée ici et la même cochée là-haut doivent se ressembler. */
  #filtre-envies .puce.is-on{
    background: var(--pink); border-color: var(--pink); color:#fff;
    box-shadow: 0 3px 0 var(--pink-deep);
  }
  #filtre-envies .puce.is-on .puce-ico{ background:#fff; }
  #filtre-envies .puce:active{ transform: scale(.97); }

  /* le budget garde sa rangée, mais assez gros pour le pouce */
  #filtre-prix .puce{ padding: 7px 16px; font-size:.85rem; }

  .fb-pied{ padding-top: 2px; }
}

@media (max-width: 620px){
  .envie{ font-size:.74rem; padding: 5px 11px; }
}