/* =========================================================================
   PUNTO PIZZA — COMMUN  ·  le socle partagé par TOUS les écrans
   -------------------------------------------------------------------------
   Thème « Sombre & raffiné » : fond noir, accents dorés, lignes très fines,
   beaucoup d'air, photos rondes, typographie Inter.

   ⚠️ À LIRE AVANT DE MODIFIER
   Ce fichier porte les variables, le thème jour/nuit et TOUS les composants.
   Il s'applique du plus petit téléphone au plus grand écran : une couleur
   changée ici change le site PARTOUT.
   Il contient aussi les valeurs « grand écran » par défaut, parce que cette
   feuille est écrite en desktop-first : mobile.css et tablette.css viennent
   ensuite les réduire. C'est assumé — ne pas croire que « desktop.css »
   contient les marges de bureau, elles sont ICI.

   Ordre de chargement (déclaré dans index.html) :
       commun  →  desktop  →  tablette  →  mobile
   Le dernier chargé l'emporte à spécificité égale : mobile ferme la marche.

   Sommaire :
     1. Variables                5. Grille & cartes
     2. Corps de page            6. Médaillon
     3. Barre du haut            7. Fiche détaillée
     4. Filtres                  8. Animations & accessibilité
   ========================================================================= */

/* ---- 1. Variables ----------------------------------------------------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --bg:    #100c0a;   /* fond presque noir */
  --bg-top:#1a1411;   /* halo du haut */
  --bg-2:  #16110e;   /* panneaux (fiche) */
  --ink:   #ece3d5;   /* texte clair */
  --muted: #bdb1a4;   /* texte secondaire — eclairci le 27/07/2026 : #8a7d6e ne donnait
                         que 2,53:1 sur le fond sombre (adresse, compteur, filtres). 4,83:1 */
  --gold:  #d7b370;   /* doré raffiné (accent unique) */
  --line:  rgba(236,227,213,.10); /* filets très fins */
  --green: #076a3b;   /* vert Punto Pizza (navbar) */
  --green-deep: #05512c; /* bas du dégradé vert */
}

/* ===== Mode JOUR (clair) — activé par le bouton ☀️/🌙 ================== */
body.light {
  --bg:    #f4ede1;   /* fond crème clair */
  --bg-top:#fdfaf4;   /* halo du haut, clair */
  --bg-2:  #ffffff;   /* panneaux blancs */
  --ink:   #2a2017;   /* texte foncé */
  --muted: #635647;   /* texte secondaire — assombri le 27/07/2026 : #7c6f60 restait a
                         4,44:1, juste sous le seuil. 4,92:1 sur la carte Tomate. */
  --gold:  #775010;   /* doré foncé — assombri le 27/07/2026 : #a9772a ne donnait que
                         2,71:1 pour l'alias sur carte rose et 3,56:1 pour le sur-titre. */
  --line:  rgba(40,30,20,.12); /* filets fins foncés */
}
/* Pas de lueur de braises en mode jour : fond clair simple.
   ⚠️ POSÉ SUR LE CALQUE `body::before`, comme le fond de nuit — voir le pavé
   « LE CALQUE DE FOND » plus bas. Écrit sur `body` il recouvrirait les
   étincelles ; ici il n'y en a pas, mais laisser les deux thèmes au même
   endroit évite qu'on en oublie un le jour où ça rebouge. */
body.light::before {
  background: radial-gradient(130% 100% at 50% -20%, var(--bg-top) 0%, var(--bg) 55%);
}

/* ---- 2. Corps de page ------------------------------------------------- */
html, body { margin: 0; }

/* ⚠️ LA BANDE BLANCHE QUI APPARAISSAIT AU SCROLL SUR TÉLÉPHONE (04/08/2026).
   Signalée par l'utilisateur, capture à l'appui : en descendant dans la liste,
   une bande blanche surgissait en bas de l'écran — visible jusqu'ENTRE les deux
   colonnes de cartes.

   LA CAUSE, en trois pièces qui se cumulent :
     1. la barre d'outils du navigateur mobile SE RÉTRACTE au scroll : le
        viewport grandit alors de sa hauteur, d'un coup ;
     2. `body` porte `background-attachment: fixed` (plus bas) : son fond est
        donc peint par rapport au VIEWPORT, pas au document — et la bande qui
        vient d'être découverte n'est pas repeinte tout de suite. C'est un
        défaut de rendu connu de `fixed` sur mobile ;
     3. `html` n'avait AUCUNE couleur de fond. Le navigateur retombait donc sur
        son fond par défaut : le blanc.

   ✅ LE CORRECTIF EST UN FILET DE SÉCURITÉ, PAS UN CHANGEMENT DE RENDU. On pose
   sous le dégradé une couleur unie que rien ne recouvre jamais en temps normal :
   le navigateur n'a tout simplement plus de blanc à afficher, quelle que soit la
   raison pour laquelle il repeint mal. Le dégradé et la lueur de braises ne
   bougent pas d'un pixel.

   ⚠️ LES DEUX VALEURS DOIVENT SUIVRE `--bg` DES DEUX THÈMES (voir plus haut :
   #100c0a en nuit, #f4ede1 en jour). Elles sont écrites EN DUR et non en
   `var(--bg)`, et ce n'est pas un oubli : `--bg` est redéfini sur `body.light`,
   donc invisible depuis `html`. Si tu changes une de ces deux couleurs de
   thème, change-la ici aussi — sinon la bande réapparaîtra, dans la mauvaise
   couleur.
   ⚠️ ET LA CLASSE `light` DOIT ÊTRE POSÉE SUR `html` AUSSI : c'est fait dans
   `applyTheme()` (controller/filtres.js), qui ne la mettait que sur `body`. */
html       { background: #100c0a; }   /* = --bg du mode nuit */
html.light { background: #f4ede1; }   /* = --bg du mode jour */

/* ═══ LE CALQUE DE FOND — ET POURQUOI IL N'EST PLUS SUR `body` ═════════════
   ⚠️ RÉGRESSION DU 04/08/2026, REPÉRÉE PAR L'UTILISATEUR : « pourquoi il n'y a
   plus les étincelles en mode nuit ? depuis la modif concernant la bande
   blanche ». Il avait raison, et la cause est une règle CSS peu connue.

   LA PROPAGATION DU FOND. Tant que `html` n'a AUCUN background, celui de `body`
   est **propagé au canvas** : il est alors peint tout au fond, avant tout le
   reste. Les étincelles (`.embers`, `z-index: -1`) passaient donc au-dessus.
   Dès qu'on donne un fond à `html` — ce qu'a fait le correctif de la bande
   blanche — cette propagation s'arrête : le fond de `body` redevient un fond de
   bloc ordinaire, peint à l'étape 3 de l'ordre d'empilement, donc **APRÈS**
   tous les descendants à z-index négatif. Il RECOUVRAIT les étincelles.

   ⚠️ BAISSER LE `z-index` DES ÉTINCELLES NE SERT À RIEN, et c'est
   contre-intuitif : dans le contexte racine, TOUS les z-index négatifs sont
   peints avant le fond des blocs en flux. À −2 ou à −99 elles resteraient
   dessous. Il faut que `body` cesse d'avoir un fond, pas que les étincelles
   descendent.

   ✅ D'OÙ CE CALQUE. Les deux dégradés passent sur un pseudo-élément `fixed` en
   `z-index: -2`, sous les étincelles (−1) et sous le contenu. Le rendu est
   identique au pixel près.
   ✅ BÉNÉFICE COLLATÉRAL : un élément `position: fixed` est redimensionné en
   continu par le navigateur quand la barre d'outils mobile se rétracte, là où
   `background-attachment: fixed` est justement mal repeint — c'était la cause
   n°2 de la bande blanche. Ce calque la combat donc mieux que l'ancien fond.
   ⚠️ NE PAS REMETTRE `background` SUR `body` : les étincelles disparaîtraient à
   nouveau, sans que rien ne le signale. */
/* ⚠️ `height: 100lvh` ET NON `inset: 0` — 2ᵉ passe du 04/08/2026, après un
   nouvel essai sur son téléphone : la bande était toujours là, simplement plus
   dans la bonne couleur.
   `inset: 0` cale le calque sur le viewport COURANT, celui qui a encore la
   barre d'outils. Quand elle se rétracte, le viewport grandit mais **pas le
   calque** : la zone découverte laisse voir le fond uni de `html`, et comme le
   vrai fond porte un dégradé ET la lueur de braises, la démarcation se voit.
   `lvh` = *large viewport height*, la hauteur BARRES RÉTRACTÉES, donc la plus
   grande possible. Le calque couvre alors toujours le pire cas ; quand la barre
   est visible il déborde par le bas, hors de l'écran, sans conséquence.
   ⚠️ Les deux lignes `height` sont voulues : la première est le repli pour un
   navigateur qui ignorerait `lvh`, la seconde l'écrase quand il le comprend.
   ⚠️ Effet de bord assumé : la lueur de braises est ancrée à `50% 106%` de la
   boîte ; le calque étant un peu plus haut, elle descend de la hauteur de la
   barre quand celle-ci est visible. Mesuré négligeable devant son rayon. */
body::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0;
  height: 100vh;                 /* repli */
  height: 100lvh;                /* la plus grande hauteur possible du viewport */
  z-index: -2; pointer-events: none;
  /* Fond noir + lueur de braises (feu de bois) qui monte du bas de l'écran */
  background:
    radial-gradient(70% 50% at 50% 106%, rgba(255,130,40,.22), rgba(214,67,46,.10) 42%, transparent 66%),
    radial-gradient(130% 100% at 50% -20%, var(--bg-top) 0%, var(--bg) 55%);
}

body {
  min-height: 100vh;
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  padding-bottom: 60px;
  -webkit-font-smoothing: antialiased;
}

/* ===== Ambiance feu de bois (mode nuit) =============================== */
/* Étincelles qui montent (générées par controller/filtres.js) */
.embers { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.ember { position: absolute; bottom: -12px; border-radius: 50%;
  background: radial-gradient(circle, #ffd98a, #ff7a18 55%, transparent 72%);
  box-shadow: 0 0 6px 1px rgba(255,120,30,.7);
  opacity: 0; animation: ember-rise var(--dur, 9s) linear infinite; }
@keyframes ember-rise {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  8%   { opacity: .9; }
  75%  { opacity: .6; }
  100% { transform: translate(var(--drift, 0), -102vh) scale(.6); opacity: 0; }
}
/* En mode jour : pas d'étincelles */
body.light .embers { display: none; }
@media (prefers-reduced-motion: reduce) { .ember { animation: none; opacity: 0; } }

/* ---- 3. Barre du haut (verte Punto Pizza, raffinée) ------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 18px 30px; padding-top: max(18px, env(safe-area-inset-top));
  background: linear-gradient(180deg, var(--green), var(--green-deep)); /* vert Punto Pizza */
  border-bottom: 1px solid #043b1f;
}
.brand { display: flex; align-items: center; gap: 14px; }
/* Pastille ovale à la forme du vrai logo (qui est plus large que haut).
   Un carré de 46x46 le réduisait à ~46x34 avec du vide au-dessus et en dessous. */
.brand-logo { width: 74px; height: 52px; border-radius: 26px / 20px; object-fit: contain; background: #ffffff14; padding: 4px 6px; }
.brand-mark { font-size: 26px; }                                       /* emoji de repli si le logo ne charge pas */
/* Sur-titre : doré CLAIR FIXE, surtout pas var(--gold). La barre du haut est verte
   dans les DEUX modes, alors que --gold s'assombrit en mode jour pour rester lisible
   sur fond clair : un doré foncé sur du vert foncé tombait à 2,03:1, le pire contraste
   de la page. Avec ce doré fixe : 5,16:1 dans les deux modes. Mesuré le 27/07/2026. */
.brand-eyebrow { display: block; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: #e8cd97; font-weight: 600; }
.brand-name { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 23px; line-height: 1; letter-spacing: -.02em; color: #fff; } /* "Punto Pizza" */
/* Téléphone sous le titre. Le padding vertical porte la ZONE TACTILE de 19 à 45px :
   c'était la plus petite cible de la page, pour l'action la plus importante d'une
   pizzeria. Le margin négatif compense exactement le padding — à l'œil, RIEN NE BOUGE,
   seule la surface qui répond au doigt grandit. (Cible recommandée : 44px.) */
/* ⚠️ `min-height: 44px` ET NON UN PADDING PLUS GRAND — 04/08/2026, et c'est la
   mesure qui l'a imposé. Le numéro tombait à **43 px** (un pixel sous le seuil
   du 27/07)… mais SEULEMENT au-dessus de 561 px : `mobile.css` le met en 14 px
   en dessous, où il fait déjà 45. Un padding plus épais l'aurait poussé à 47 px
   sur téléphone, pour rien. `min-height` ne se déclenche QUE là où il manque
   quelque chose. ⚠️ Le `margin-top: -9px` reste : c'est lui qui empêche le
   padding tactile de décaler le bloc de la marque (voir aussi mobile.css). */
.brand-tel { display: inline-block; min-height: 44px; padding: 13px 0; margin-top: -9px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.brand-tel:hover { color: var(--gold); }
/* L'ADRESSE, sous le téléphone (04/08/2026). Même famille que `.brand-tel` mais
   volontairement plus discrète : c'est une référence, pas un appel à l'action —
   le téléphone se clique, l'adresse se lit.
   ⚠️ `margin-top: -4px` : `.brand-tel` porte 13 px de padding tactile sous son
   texte (les 44 px de cible), qui creusaient un blanc trop grand entre les deux
   lignes. On en reprend une partie sans toucher à la zone cliquable.
   ⚠️ Elle peut se couper sur deux lignes sur un petit écran, et c'est voulu :
   la tronquer cacherait le code postal ou la ville. */
.brand-adr { margin: -4px 0 0; font-size: 12px; color: rgba(255,255,255,.82);
             line-height: 1.35; font-weight: 500; }

/* Recherche : champ fin translucide, lisible sur le vert */
/* ⚠️ `padding: 0 15px` ET NON `11px 15px` — corrigé le 04/08/2026 avec la règle
   ci-dessous, et les deux vont ENSEMBLE.
   Le relevé du responsive a montré que le champ de recherche ne faisait que
   **21 px de haut**, à toutes les largeurs, là où la règle du 27/07 fixe 44 px.
   Sa boîte, elle, faisait bien 45 px : à l'œil la cible paraît grande, mais un
   tap dans la marge de 11 px ne focalise PAS le champ.
   ⚠️ POSER `min-height: 44px` SANS RETIRER CE PADDING aurait porté la boîte à
   **67 px** et fait grossir toute la barre du haut. Mesuré en maquette
   (`maquettes/ux-cibles-tactiles.html`) : avec le padding retiré, la boîte passe
   de 45 à 46 px et la barre verte de 159 à 160 — 2 px, c'est le seul effet
   visible de la correction. */
/* ⚠️ MÊME RAYON QUE LES BOUTONS — 16px (05/08/2026, à sa demande : « et mets
   cette forme pour la barre de recherche aussi »). Elle était à 10px, ce qui
   la faisait paraître d'une autre famille que les boutons juste en dessous.
   ⚠️ Si le rayon des boutons rebouge, celui-ci doit suivre — et celui des
   suggestions avec, elles se collent sous ce champ. */
.search { position: relative; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); border-radius: 16px; padding: 0 15px; color: #eafff0; transition: border-color .2s, background .2s; }
.search:focus-within { border-color: #fff; background: rgba(255,255,255,.18); }
/* min-width: 0 est INDISPENSABLE. Sans lui, un élément flex garde `min-width: auto`,
   c'est-à-dire la largeur de son propre texte : le champ refusait de se réduire et le
   placeholder sortait du cadre arrondi pour passer sous le bouton ☀️ (constaté sur
   téléphone). text-overflow coupe proprement par « … » au lieu d'un arrêt net. */
/* ⚠️ `min-height: 44px` — la cible tactile (04/08/2026). Le champ remplit
   maintenant toute la hauteur de sa boîte au lieu d'y flotter au milieu.
   Ne pas remettre de padding vertical sur `.search` : voir la règle plus haut. */
.search input { flex: 1; min-width: 0; min-height: 44px; text-overflow: ellipsis; background: none; border: none; outline: none; color: #fff; font-size: 15px; font-family: inherit; }
.search input::placeholder { color: #d7ebda; }
/* ✕ effacer la recherche pizzas : rond ROUGE bien visible (sur la navbar verte) */
.search-clear { flex: none; width: 24px; height: 24px; display: grid; place-items: center; background: #d6432e; border: 1px solid #b5331f; color: #fff; cursor: pointer; font-size: 12px; line-height: 1; border-radius: 50%; padding: 0; }
.search-clear:hover { background: #e0563f; border-color: #e0563f; color: #fff; }

/* Bouton mode jour/nuit (dans la navbar verte) */
.theme-toggle { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.12); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; transition: .2s; }
.theme-toggle:hover { background: rgba(255,255,255,.22); transform: rotate(12deg); }

/* Bouton de langue FR | EN (dans la navbar verte).
   Interrupteur à 2 segments : les deux langues restent lisibles, l'ACTIVE est
   en doré sur fond sombre. Pas de drapeau : "EN" désigne une LANGUE, un drapeau
   désignerait un PAYS (or le menu anglais sert à tous les touristes anglophones,
   pas seulement aux Britanniques). */
.lang-toggle { flex: none; display: flex; align-items: center; gap: 2px; padding: 4px; min-height: 44px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.12); cursor: pointer;
  font-family: inherit; transition: .2s; }
.lang-toggle:hover { background: rgba(255,255,255,.22); }
.lang-seg { display: block; padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 800;
  letter-spacing: .06em; line-height: 1; color: #d7ebda; transition: .2s; }
/* Segment actif = la langue affichée en ce moment.
   Doré CLAIR FIXE, pas var(--gold) : ce bouton vit sur la barre VERTE, sombre dans
   les deux modes. En suivant --gold il recevait en mode jour un fond doré foncé sous
   un texte foncé — 2,23:1. Avec le doré clair fixe : 8,02:1, identique jour et nuit. */
.lang-seg-on { background: #d7b370; color: #2a2017; }

/* ---- Infos pizzeria : adresse + carte de la zone de livraison --------- */
/* Réorganisé le 22/07/2026. AVANT : un label « PIZZERIA » doré, l'adresse en
   19px gras sur 2 lignes, un gros bouton rond vert qui pulsait, et la pilule PDF
   sur une rangée à part — soit 3 formes différentes sur 3 niveaux, et l'adresse
   traitée comme l'information la plus importante de la page.
   Or le site est vu par des CLIENTS : ce qui compte, ce sont les pizzas. L'adresse
   redevient donc une ligne de référence, et les 2 raccourcis sont regroupés sur une
   seule rangée, dans la même pilule. */
.info { display: grid; gap: 10px; padding: 20px 30px 0; }

/* Adresse : une seule ligne, discrète. Coupée par « … » plutôt que repliée. */
.info-addr { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0;
  font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.info-pin { font-size: 15px; flex: none; }
.info-line { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Les 2 raccourcis, côte à côte et de forme identique. */
.info-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Pilule commune aux 2 raccourcis (zone de livraison + carte PDF). Texte DORÉ :
   ce sont des raccourcis utiles, qu'on doit repérer sans les chercher.
   Le libellé écrit remplace l'ancienne pulsation du bouton rond : un bouton qui
   dit ce qu'il fait n'a pas besoin d'attirer l'œil par une animation. */
/* white-space: nowrap — sans lui, le libellé se replie sur 2 lignes dès que la
   pilule est un peu juste (constaté en 320px et en français à 360px), et la
   pilule devient deux fois plus haute que sa voisine. */
/* ⚠️ LES BOUTONS ONT DU RELIEF DEPUIS LE 05/08/2026 — parti pris « E ».
   L'utilisateur : « je trouve qu'ils sont invisibles et on dirait qu'ils ne sont
   pas cliquables ». Mesuré, il avait raison sur le fond ET sur la cause : le
   TEXTE était très lisible (9,3 à 9,8 de contraste en nuit, 6,1 en jour, seuil
   4,5) mais le CONTOUR tombait à **1,23** là où WCAG 1.4.11 demande **3,0** pour
   la bordure d'un élément d'interface — et il n'y avait AUCUN fond. Rien ne
   disait « surface qu'on peut presser ».
   💡 Le seul bouton qui avait l'air d'un bouton était le filtre ACTIF, parce que
   c'était le seul à porter un fond.

   ⚠️ LES DOSAGES SONT CALCULÉS, PAS RÉGLÉS À L'ŒIL. Pour franchir 3,0 sur les
   DEUX thèmes il faut `--ink` à 50 % et `--gold` à 67 % : c'est le MODE JOUR qui
   commande (38 % / 48 % suffiraient au mode nuit). Ne pas baisser ces valeurs
   sans refaire le calcul — le fond crème est le cas difficile.
   Résultat mesuré : contour 4,43 en nuit, 3,06 en jour, contre 1,23 avant.

   ⚠️ LE RAYON PASSE DE 999px À 12px, et c'est voulu : une pilule très arrondie
   se lit comme une étiquette, un rectangle arrondi comme un bouton.
   Maquette des 5 partis pris : maquettes/boutons-lisibilite.html */
.pill { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--gold) 67%, transparent); border-radius: 16px; padding: 12px 22px;
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold) 38%, transparent), 0 1px 2px rgba(0,0,0,.35);
  font-family: inherit; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; cursor: pointer; transition: .2s; }
.pill:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 26%, transparent); }
/* Enfoncement au doigt : le liseré du haut disparaît, l'ombre portée aussi. */
.pill:active { box-shadow: inset 0 1px 3px rgba(0,0,0,.30); transform: translateY(1px); }
.pill .pill-ico { font-size: 16px; line-height: 1; }
.info-note { margin: 0; font-size: 11.5px; color: var(--muted); font-style: italic; line-height: 1.5; }

/* Fenêtre (pop-up) de la zone de livraison : grande carte */
.sheet-map { max-width: 680px; }
/* En-tête de la fenêtre carte : proportions + espacements */
.sheet-map .sheet-eyebrow { font-size: 10px; padding-right: 52px; }   /* padding = place pour le bouton fermer */
/* Adresse pizzeria = info secondaire ici : compacte et discrète */
.sheet-map .sheet-name { font-size: 13.5px; font-weight: 600; color: var(--muted); margin: 2px 0 0; line-height: 1.3; padding-right: 52px; }
.sheet-map .map-search { margin-top: 16px; gap: 10px; }   /* assez d'espace sous le bouton fermer, sans excès */
.sheet-map .map-search input { padding: 12px 38px 12px 14px; }
.sheet-map .map-search button[type="submit"] { padding: 0 18px; }
.sheet-map .map-result { margin-top: 6px; }   /* rapproché de la barre de recherche */
/* Bouton FERMER bien visible (rouge), éloigné du reste */
.sheet-map .sheet-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 15px; color: #fff; background: #d6432e; border-color: #b5331f; }
.sheet-map .sheet-close:hover { background: #e0563f; border-color: #e0563f; color: #fff; }
/* Carte = très grand rectangle (≈ 70% de la hauteur d'écran sur PC) */
.map-square { width: 100%; height: 70vh; max-height: 680px; margin: 10px 0 0; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; background: #1c1510; box-shadow: 0 8px 22px rgba(0,0,0,.30); }
.map-square .leaflet-container { font-family: inherit; }

/* Barre de recherche d'adresse dans la fenêtre carte */
.map-search { display: flex; gap: 8px; margin-top: 6px; }
.map-search-field { position: relative; flex: 1; min-width: 0; display: flex; }   /* champ + ✕ + suggestions */
.map-search input { flex: 1; min-width: 0; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 10px; padding: 11px 38px 11px 14px; color: var(--ink); font-family: inherit; font-size: 14px; outline: none; }
body.light .map-search input { background: rgba(0,0,0,.03); }
.map-search input:focus { border-color: var(--gold); }
.map-search button[type="submit"] { flex: none; background: linear-gradient(180deg, var(--green), var(--green-deep)); color: #fff; border: 1px solid #043b1f; border-radius: 10px; padding: 0 16px; font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: .2s; }
.map-search button[type="submit"]:hover { filter: brightness(1.1); }
/* Bouton effacer (✕) dans le champ adresse : rond ROUGE bien visible */
.field-clear { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #b5331f; background: #d6432e; color: #fff; font-size: 12px; line-height: 1; cursor: pointer; border-radius: 50%; }
.field-clear:hover { background: #e0563f; border-color: #e0563f; color: #fff; }
.field-clear[hidden] { display: none; }   /* caché tant que le champ est vide (corrige l'écrasement du display) */
/* Liste de suggestions d'adresses */
.suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1200; margin: 0; padding: 6px; list-style: none; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.5); max-height: 240px; overflow-y: auto; }
.suggestions li { padding: 9px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.3; cursor: pointer; color: var(--ink); }
.suggestions li:hover { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.suggestions li small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.suggestions li .sug-ings { font-size: 11px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* ingrédients sur une ligne, tronqués si trop longs */
.suggestions .sug-info { color: var(--muted); font-style: italic; cursor: default; }
.suggestions .sug-info:hover { background: none; }
/* Résultat : "dans la zone" (vert) / "hors zone" (rouge) / info (gris) */
/* Taille adaptative : assez grande mais qui tient sur UNE ligne (guillemets inclus) */
.map-result { margin: 10px 0 0; font-size: clamp(12px, 3.5vw, 14px); font-weight: 600; min-height: 1.2em; line-height: 1.4; }
.map-result.ok { color: #2bb463; }
.map-result.ko { color: #e0563f; }
.map-result.info { color: var(--muted); font-weight: 500; font-style: italic; }

/* Mode "Dessiner la zone" : barre de boutons + zone de coordonnées à copier */
.zone-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.zone-edit button { font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 999px; padding: 8px 13px; border: 1px solid var(--line); background: none; color: var(--ink); transition: .2s; }
.zone-edit button:hover { border-color: var(--gold); color: var(--gold); }
.zone-edit button.primary { background: linear-gradient(180deg, var(--green), var(--green-deep)); color: #fff; border-color: #043b1f; }
.zone-edit button.primary:hover { filter: brightness(1.1); color: #fff; }
.zone-edit-tools { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.zone-edit-tools[hidden] { display: none; }   /* idem : respecter l'attribut hidden */
.zone-coords { width: 100%; margin-top: 8px; min-height: 92px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.45; background: rgba(0,0,0,.28); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px; resize: vertical; }
body.light .zone-coords { background: rgba(0,0,0,.04); }


/* ---- 4. Filtres (pastilles arrondies, contour fin) -------------------- */
/* Sur-titre de la rangée de filtres. Volontairement le MÊME style que le label
   "PIZZERIA" au-dessus de l'adresse (doré, petit, capitales espacées) : l'œil
   reconnaît le motif et comprend que ça titre la rangée du dessous.
   Aligné sur les pilules (même marge gauche), puisque c'est elles qu'il annonce. */
.filters-label { margin: 0; padding: 26px 30px 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
/* Quand le sur-titre est là, les pilules se rapprochent de lui (sinon 28px les
   séparent et le titre semble flotter tout seul). Le sélecteur « + » fait que
   .filters retrouve sa marge d'origine si on retire un jour le sur-titre. */
.filters-label + .filters { padding-top: 10px; }
.filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 28px 30px 6px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 1px solid color-mix(in srgb, var(--ink) 50%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--ink) 10%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 26%, transparent), 0 1px 2px rgba(0,0,0,.35); padding: 8px 16px; font-family: inherit; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: .2s; } /* pilule au contour fin */
.chip:hover { color: var(--ink); border-color: var(--c, var(--gold)); }
.chip:active, .ing-btn:active { box-shadow: inset 0 1px 3px rgba(0,0,0,.30); transform: translateY(1px); }
.chip-on { color: var(--ink); border-color: var(--c, var(--gold)); background: color-mix(in srgb, var(--c, var(--gold)) 26%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c, var(--gold)) 45%, transparent), 0 1px 2px rgba(0,0,0,.35); }
/* ⚠️ Le filtre ACTIF doit rester plus marqué que les autres : depuis que tous
   les boutons ont un fond (05/08/2026), 18 % ne suffisait plus à le distinguer.
   Porte a 26 %, et son liseré prend SA couleur de base au lieu de --ink. */
.chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1px solid var(--line); } /* couleur de base du filtre (visible partout grâce au contour) */
.count { margin-left: auto; color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
/* Compteur de résultats, sur sa propre ligne sous les filtres */
.results-count { padding: 6px 30px 0; text-align: right; color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

/* Barre sous les filtres : bouton « Ingrédients » à gauche, compteur à droite */
.subfilters { display: flex; align-items: center; gap: 12px; padding: 8px 30px 0; }
.subfilters .results-count { padding: 0; margin-left: auto; }
/* Bouton qui ouvre le panneau de filtre par ingrédients */
.ing-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 1px solid color-mix(in srgb, var(--ink) 50%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--ink) 10%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 26%, transparent), 0 1px 2px rgba(0,0,0,.35); padding: 8px 16px; font-family: inherit; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: .2s; }
.ing-btn:hover { color: var(--ink); border-color: var(--gold); }
.ing-btn-on { color: #eafff0; border-color: var(--green); background: color-mix(in srgb, var(--green) 40%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--green) 55%, transparent), 0 1px 2px rgba(0,0,0,.35); } /* au moins un filtre actif */
.ing-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--green); color: #fff; font-size: 11px; letter-spacing: 0; }
.ing-badge[hidden] { display: none; }   /* sinon le display ci-dessus écrase l'attribut hidden */
/* Bouton « tout remettre à zéro » : rond, icône flèches inversées. Doré quand un filtre est actif. */
.reset-all { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1.5px solid var(--gold); background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); cursor: pointer; transition: .2s; }
.reset-all:hover { background: var(--gold); color: var(--bg-2); }
.reset-all:active svg { transform: rotate(-180deg); transition: transform .3s; }   /* petit tour au clic */

/* Panneau de filtre par ingrédients (dans une overlay) */
.ing-panel { position: relative; width: 100%; max-width: 560px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px 0; max-height: 88vh; overflow-y: auto; box-shadow: 0 40px 100px #000b; animation: rise .24s cubic-bezier(.2,.7,.3,1); }
.ing-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ing-head strong { font-size: 17px; }
.ing-head-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.ing-reset-top { width: 34px; height: 34px; } /* bouton Réinitialiser en haut, à côté du ✕ */
.ing-close { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid #b5331f; background: #d6432e; color: #fff; cursor: pointer; font-size: 13px; transition: .2s; }
.ing-close:hover { background: #e0563f; }
.ing-hint { margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.ing-hint .t-in { color: #34c270; font-style: normal; }
.ing-hint .t-ex { color: #e26b58; font-style: normal; }
.ing-group { margin-bottom: 16px; }
.ing-group h4 { margin: 0 0 9px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.ing-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Une case = un ingrédient. 3 états : neutre / avec (vert) / sans (rouge). */
.ing-chip { display: inline-flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--ink) 7%, transparent); border: 1.5px solid color-mix(in srgb, var(--muted) 60%, transparent); border-radius: 999px; padding: 6px 13px 6px 6px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; transition: .15s; }
.ing-chip:hover { border-color: var(--gold); background: color-mix(in srgb, var(--ink) 12%, transparent); }
/* Emoji dans un petit cercle coloré selon la famille (--ig) → repérage immédiat */
.ing-chip .ing-emo { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--ig, var(--muted)) 38%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ig, var(--muted)) 70%, transparent); font-size: 14px; }
/* Monogramme (fromages : Mz, Em…) : cercle plein dans la couleur de la famille, lettres blanches */
.ing-chip .ing-emo-mono { background: var(--ig, var(--gold)); box-shadow: none; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: -.3px; }
.ing-chip .ing-state { font-weight: 800; }
.ing-chip.ing-in { border-color: #2f9c5b; background: color-mix(in srgb, #34c270 22%, transparent); color: var(--ink); }
.ing-chip.ing-in .ing-state { color: #34c270; }
.ing-chip.ing-ex { border-color: #c4503e; background: color-mix(in srgb, #e26b58 20%, transparent); color: var(--ink); }
.ing-chip.ing-ex .ing-state { color: #e26b58; }
.ing-chip.ing-ex { text-decoration: line-through; text-decoration-color: #e26b58aa; } /* "sans" = barré */
/* Pied du panneau : Réinitialiser · compteur · Voir les pizzas */
/* ⚠️ LE PIED DOIT COUVRIR LE BAS DU PANNEAU, PADDING COMPRIS (05/08/2026).
   Signalé par l'utilisateur : « quand je clique sur le bouton ingrédient, la
   barre du bas a un décalage » — on voyait le contenu défiler SOUS le pied.
   LA CAUSE : un élément `sticky` ne peut pas sortir de son bloc conteneur, qui
   est la boîte de CONTENU du panneau. Le panneau portait `padding: 22px 24px`,
   donc le pied s'arrêtait 22 px au-dessus du bord visible, et le contenu passait
   dans cette bande. Mesuré : 23 px.
   ⚠️ LE `bottom: -22px` D'ORIGINE NE SERVAIT À RIEN — il visait ce décalage mais
   il est BRIDÉ par la même règle. Vérifié : `bottom: -22px` et `bottom: 0`
   donnaient exactement le même résultat. Ne pas le remettre.
   ✅ LA PARADE : le panneau ne porte plus de padding en bas, c'est le PIED qui le
   rend, et il déborde des côtés par marges négatives pour couvrir toute la
   largeur. Mesuré après : bande de 23 px → 1 px, et le pied couvre enfin toute
   la largeur du contenu (493 → 541 px).
   ⚠️ Si le padding du panneau change, ces marges négatives doivent suivre. */
.ing-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;
  margin: 6px -24px 0; padding: 14px 24px 22px; border-top: 1px solid var(--line); background: var(--bg-2); }
.ing-count { margin-left: auto; color: var(--muted); font-size: 12px; }
/* Bouton Réinitialiser du panneau : rond à icône ↻ (doré), cohérent avec le bouton de la page */
.ing-reset { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; background: color-mix(in srgb, var(--gold) 18%, transparent); border: 1.5px solid var(--gold); color: var(--gold); border-radius: 50%; padding: 0; cursor: pointer; transition: .2s; }
.ing-reset:hover { background: var(--gold); color: var(--bg-2); }
.ing-reset:active svg { transform: rotate(-180deg); transition: transform .3s; }   /* petit tour au clic */
.ing-apply { background: var(--green); border: 1px solid var(--green-deep); color: #fff; border-radius: 999px; padding: 9px 18px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: .2s; }
.ing-apply:hover { background: #0a8b4d; }

/* ---- 5. Grille & cartes (aérées, sans cadre) -------------------------- */
.grid { display: grid; gap: 20px; padding: 24px 30px 40px; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
/* Carte : fond légèrement teinté de la couleur de base (--c) */
/* Carte "flottante" : halo de couleur qui s'estompe, fond translucide, coins très arrondis */
.card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
        background:
          radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--c) 24%, transparent), transparent 72%),
          #1c1510;  /* fond bois sombre, mat et opaque (moins "virtuel") */
        border: 1px solid color-mix(in srgb, var(--c) 10%, rgba(255,255,255,.04)); border-radius: 22px;
        padding: 22px 16px 18px; cursor: pointer; color: var(--ink); font-family: inherit;
        box-shadow: 0 8px 22px rgba(0,0,0,.35);
        /* ⚠️ `position: relative` sert au badge « Végé » (06/08/2026) : sans lui,
           `.card-vege` se placerait par rapport à la PAGE et non à la carte. */
        position: relative;
        transition: transform .25s ease, box-shadow .25s ease, border-color .2s; }
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 42%, transparent);
              box-shadow: 0 18px 42px color-mix(in srgb, var(--c) 20%, rgba(0,0,0,.30)); }
/* Mode jour : teinte plus franche pour bien distinguer les bases, sauf Crème
   (qui reste blanche). Tomate = rosé/rouge clair net, Dessert = brun, Boisson = bleu. */
body.light .card:not(.card-cream) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 34%, var(--bg-2)), color-mix(in srgb, var(--c) 18%, var(--bg-2)));
  border-color: color-mix(in srgb, var(--c) 55%, var(--line));
}
.card:hover .card-name { color: var(--gold); }                          /* le nom s'illumine en doré */
.card:hover .medaillon-img,
.card:focus-visible .medaillon-img { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); } /* fin anneau doré */
.card:focus-visible { outline: none; }
.card-name { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 16.5px; line-height: 1.2; letter-spacing: -.01em; transition: color .2s; } /* nom lisible */
.card-alias { font-size: 11px; font-style: italic; color: var(--gold); margin-top: -4px; }   /* 2e nom (ex : "La Reine") */
.sug-alias { color: var(--gold); font-weight: 600; }                                           /* alias dans la liste de suggestions */
.sheet-alias { margin: 4px 0 10px; font-size: 13px; font-style: italic; color: var(--gold); } /* alias sous le titre de la fiche */
.sheet-note { margin: 2px 0 10px; font-size: 13px; font-style: italic; color: var(--muted); }  /* précision produit, ex. « chausson ou ouverte » */
/* Note du double-nom (ex. « La Mozzarella » = la Capri sans basilic) : ressort en pastille */
.alias-note { display: inline-block; font-style: normal; font-weight: 600; font-size: 12px; color: #e26b58; background: color-mix(in srgb, #e26b58 16%, transparent); border: 1px solid color-mix(in srgb, #e26b58 45%, transparent); border-radius: 999px; padding: 1px 9px; margin-left: 4px; }
.card-meta { font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); display: flex; align-items: center; gap: 7px; } /* base, en petites capitales */
.dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }   /* pastille de base */
/* Le PRIX est l'information que le client vient chercher : il doit se lire.
   Mesure du 27/07/2026 : 3,42 a 3,56:1 en mode jour sur les 49 cartes, 2,54:1 en
   mode nuit sur les cartes Creme. Le dore de --gold decore, il ne portait pas
   l'information. Correction CHIRURGICALE : on ne change QUE ce qui echouait —
   le dore de nuit sur carte Tomate passe deja a 9,08:1, on n'y touche pas. */
.card-price { font-size: 13px; letter-spacing: .03em; color: var(--gold); font-weight: 700; }
body.light .card-price { color: #7a5310; }                                     /* 6,21:1 */

/* BADGE « VÉGÉ » — les 9 pizzas sans viande ni poisson (06/08/2026).
   Posé au coin haut-droit de la carte, l'emplacement demandé par l'utilisateur.
   Parti pris « B » retenu sur maquette à 5 propositions
   (maquettes/badge-vege-site.html, les 2 thèmes, en 824 et en 360 px).

   ⚠️ IL VIENT DU PAPIER, ET IL DOIT RESTER DE LA MÊME FAMILLE : c'est le
   `.pizza-vege` de menu-papier/menu-print.css (31/07) — même vert de marque,
   même graisse 800, mêmes capitales. Seule la FORME change : arrondi complet
   ici, cartouche à angles là-bas, parce que la carte du site n'a pas de ligne
   de pointillés où s'insérer.
   ⚠️ La liste des 9 ne vit NI ici NI dans menu.js : c'est `vege: true` dans
   model/data.js, lu par les deux supports. Ne pas en refaire une copie.

   ⚠️ LE VERT NE SE CHANGE PAS SANS REMESURER. `--green` n'est PAS redéfini en
   mode jour : le badge est donc identique dans les deux thèmes, et le blanc
   dessus donne 6,70:1 (seuil AA : 4,5). Un vert plus clair le ferait tomber —
   c'est ce qui a écarté le parti pris « contour », mesuré à 4,35:1 en mode jour.

   ⚠️ Il ne prend PAS de `gap` : sorti du flux, il ne pousse rien. Et il se pose
   au-dessus du médaillon, dont le coin est vide (la photo est un DISQUE).

   ⚠️ L'APPARENCE EST PARTAGÉE avec la fiche détaillée (`.sheet-vege`), où le
   badge se pose sur la ligne de la base — les deux doivent rester le même
   objet. Ne dissocier leurs déclarations qu'en sachant pourquoi. */
.card-vege, .sheet-vege {
  background: var(--green); color: #fff;
  font-size: 9.5px; font-weight: 800; line-height: 1;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.card-vege { position: absolute; top: 8px; right: 8px; z-index: 2; }
/* Dans la fiche, le badge occupe SA PROPRE LIGNE, au-dessus de la base.
   ⚠️ La croix de fermeture est en absolu à `top: 18px; right: 18px` : tout ce
   qu'on pose sur la première ligne du bloc de droite finit par la toucher sur un
   écran étroit. Une ligne à soi est la seule place qui ne croise rien. */
.sheet-vege-ligne { margin-bottom: 6px; }
.sheet-vege { display: inline-block; }

/* Base Crème : carte CLAIRE (rappel de la crème), texte foncé.

   ⚠️ CE BLOC EST LE MODE JOUR — la nuit est surchargée juste en dessous.

   🔆 ADOUCI LE 06/08/2026, teinte « B — sable », choisie sur maquette
   (`maquettes/cartes-creme-mode-jour.html`, la grille filtrée « Crème » en
   entier). Motif, mot pour mot : *« en mode jour, quand je clique sur Crème,
   les cartes sont trop blanches, elles éclaircissent trop, même sur le
   téléphone ça fait mal aux yeux »*.

   ⚠️ CE N'EST PAS UNE CARTE QUI ÉBLOUISSAIT, C'EST LA MASSE. Le blanc du 20/06
   (`#fbf7ef`) était **plus clair que la page** (`--bg: #f4ede1`) de 8,0 points
   de luminance : une carte isolée passait inaperçue, mais le filtre « Crème »
   en aligne DIX et remplissait l'écran. Les cartes Tomate, elles, sont plus
   SOMBRES que la page — c'est pourquoi elles n'ont jamais fatigué.
   ➜ **Le chiffre qui commande est l'écart de luminance carte / page, et il doit
   rester NÉGATIF.** Ici : **−8,3 points**.

   ⚠️ Le beige de la NUIT (`#e4d9c1`) avait été essayé pour les deux thèmes
   (« un seul beige ») : écarté par la mesure, il fait tomber le libellé
   « BASE CRÈME » à **4,41:1**, sous le seuil de 4,5. La teinte retenue tient
   nom **12,45** · base **5,19** · prix **5,66**, sans toucher aux textes.
   ⚠️ Assombrir davantage OBLIGE à assombrir aussi `.card-cream .card-meta`.

   ✅ Elle reste la carte CLAIRE, donc distincte des Tomate : le rappel de la
   crème validé le 20/06 n'est pas remis en cause, seule son intensité l'est. */
.card-cream { background: linear-gradient(180deg, #eee2cd, #e3d5ba 90%); border-color: #d3c3a2; color: #2a2017; }
.card-cream:hover { border-color: #c0ac84; box-shadow: 0 14px 34px #e3d5ba4d; }
/* En MODE NUIT le blanc franc « claquait » sur le fond sombre et fatiguait les yeux
   (signalé le 24/07/2026). On l'adoucit — « beige clair », variante C validée en
   maquette — sans changer le mode jour. Le texte foncé reste lisible. */
body:not(.light) .card-cream { background: linear-gradient(180deg, #e4d9c1, #d4c5a4 90%); border-color: #c6b791; }
body:not(.light) .card-cream:hover { border-color: #b9a980; box-shadow: 0 14px 34px #d4c5a440; }
.card-cream .card-meta { color: #645230; }   /* etait #8a7350 (2,93:1) : 4,88:1 en nuit */
/* ⚠️ Ces deux regles sont PLUS SPECIFIQUES (0,2,0) que .card-price (0,1,0) :
   sans les viser explicitement, les 8 cartes Creme ne bougent pas d'un pouce. */
.card-cream .card-price { color: #6b4810; font-weight: 700; }   /* 5,32:1 nuit · 5,97:1 jour */
.card-cream:hover .card-name { color: #a9772a; }

/* ---- 6. Médaillon (photo ronde, fin anneau) --------------------------- */
.medaillon { flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #241d18, #15100d); } /* fond du repli emoji */
.medaillon-img { flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--c, var(--line)); transition: border-color .2s, box-shadow .2s; } /* anneau = couleur de base ; flex:none = reste rond (pas d'écrasement dans la fiche) */
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 70px 20px; font-size: 15px; font-style: italic; }

/* ---- 7. Fiche détaillée (overlay + panneau sobre) --------------------- */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(8,6,5,.78); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 18px; animation: fade .2s ease; }
.sheet { position: relative; width: 100%; max-width: 440px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 34px; max-height: 90vh; overflow-y: auto; box-shadow: 0 40px 100px #000b; animation: rise .24s cubic-bezier(.2,.7,.3,1); }
.sheet-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; font-size: 13px; transition: .2s; }
.sheet-close:hover { border-color: var(--gold); color: var(--gold); }
.sheet-head { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.sheet-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--muted); }
.sheet-name { margin: 6px 0 12px; font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 26px; line-height: 1.05; letter-spacing: -.02em; } /* grand nom lisible */
.prices { display: flex; gap: 10px; }
.price-pill { display: flex; flex-direction: column; gap: 3px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--line); } /* étiquette de prix, contour fin */
.price-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.price-val { font-weight: 600; font-size: 17px; color: var(--gold); }
.sheet-section { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.sheet-label { margin: 0 0 14px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 600; } /* "La recette" / "Allergènes" */
.recette { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.recette li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 400; }
.ing-ico { font-size: 18px; width: 24px; text-align: center; flex: none; line-height: 1; }
.ing-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex: none; margin: 0 10px; }
.allerg { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 12px; font-weight: 500; letter-spacing: .04em; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } /* allergène : pilule contour fin */
.note { font-size: 11.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.5; font-style: italic; }

/* ---- Bouton "retour en haut" ------------------------------------------ */
/* Rond doré en bas à droite, caché tant qu'on n'a pas scrollé. */
.to-top {
  position: fixed; right: 22px; bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 40; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  /* Vert Punto Pizza (même dégradé que la navbar), flèche blanche */
  background: linear-gradient(180deg, var(--green), var(--green-deep));
  color: #fff; border: 1px solid #043b1f;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  /* État caché : invisible, légèrement plus bas et non cliquable */
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }  /* visible une fois scrollé */
.to-top:hover { transform: translateY(-3px); }

/* ---- Photo en grand (clic sur le médaillon de la fiche) --------------- */
/* On garde le flou d'arrière-plan, mais SANS l'animation "fade" sur cette couche :
   animer l'opacité d'une couche floutée fait recalculer le flou à chaque image et
   provoque un flash (bug de rendu). Le flou s'applique donc d'un coup (net), et seule
   la PHOTO garde son animation douce (rise). */
.photo-overlay { z-index: 60; cursor: zoom-out; padding: 20px; animation: none; }
.photo-full { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 14px; box-shadow: 0 30px 90px rgba(0,0,0,.7); animation: rise .24s cubic-bezier(.2,.7,.3,1); }

/* ---- 8. Animations & accessibilité ------------------------------------ */
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .overlay, .sheet, .card { animation: none !important; transition: none !important; } }

/* ---- 9. Le distributeur de pizzas (04/08/2026) ------------------------- */
/* Demandé par la patronne : les clients doivent savoir qu'un distributeur
   existe, et avoir son adresse. Deux endroits — un raccourci qui ouvre une
   fiche, et un repère fixe sur la carte de la zone.

   ⚠️ RIEN DE NOUVEAU N'EST INVENTÉ ICI : la fiche reprend `.sheet` (celle des
   pizzas), le bouton reprend `.pill`, les couleurs sont `--gold` et `--muted`.
   Seules la photo et le repère de carte ont besoin de leurs propres règles. */

/* L'IMAGE DANS LA PILULE, à la place d'un emoji (demande du 04/08/2026 :
   « enlève l'icône de la pizza et mets l'image du distri à la place »).
   ⚠️ 19 px de haut, et `width: auto` : la photo est en portrait (314 × 364),
   lui imposer une largeur l'écraserait. Elle sort donc à ~16 px de large.
   ⚠️ C'est petit — à cette taille on reconnaît une silhouette de machine, pas
   un détail. C'est le prix d'une seule ligne : les trois pilules se partagent
   375 px. Si ce n'est pas lisible, c'est la hauteur qu'il faut monter, en
   sachant que ça élargira la pilule et pourra la faire déborder.
   ⚠️ `flex: none` : sans lui l'image se comprime quand la place manque, avant
   le texte — et on se retrouve avec une image d'un pixel de large. */
.pill .pill-img { height: 19px; width: auto; object-fit: contain; flex: none; display: block; }

/* La photo dans la fiche. `object-fit: contain` : l'image est détourée sur fond
   transparent (314 × 364), il ne faut surtout pas la recadrer. */
.sheet-distrib { text-align: center; }
.distrib-photo { width: 132px; height: 152px; object-fit: contain; margin: 4px auto 10px; display: block; }
.distrib-sous  { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.distrib-adr   { margin: 10px 0 16px; font-size: 14px; color: var(--ink); line-height: 1.4; }
.sheet-distrib .distrib-carte { margin: 0 auto; }

/* LE REPÈRE DE LA PIZZERIA — sa photo, à la place du marqueur bleu de Leaflet.
   ⚠️ MÊME FORME QUE `.dist-pin` (juste en dessous), seule la couleur du cadre
   change : VERT pour la pizzeria, DORÉ pour la machine. C'est ce qui fait lire
   les deux comme une paire, et non comme deux éléments sans rapport.
   ⚠️ La photo est détourée sur fond transparent : `object-fit: contain` est
   indispensable, un `cover` la recadrerait et couperait l'enseigne. */
/* ⚠️ LE CADRE SUIT LE FORMAT DE LA PHOTO — 60 × 54 et non un carré.
   Dans un carré, `object-fit: contain` réduisait l'image pour la faire tenir et
   laissait DEUX BANDES DE FOND NOIR au-dessus et en dessous : l'utilisateur a
   décrit « une lettre sur un fond noir », et c'était exactement ça.
   La photo fait 300 × 271 (ratio 1,11) : le cadre reprend ce ratio, il n'y a
   donc plus une seule bande. ⚠️ Si la photo est remplacée par une autre
   proportion, REPRENDRE CES DEUX NOMBRES — sinon les bandes reviennent. */
.pz-pin { width: 60px; text-align: center; }
.pz-pin img {
  width: 60px; height: 54px; object-fit: contain; pointer-events: none;
  background: rgba(16,12,10,.82); border: 2px solid var(--green);
  border-radius: 10px; padding: 2px; box-shadow: 0 3px 10px rgba(0,0,0,.5);
}

/* ⚠️ LA POINTE — c'est elle qui DÉSIGNE le lieu, pas la vignette.
   Demandée par l'utilisateur : « j'aurais aimé un point de repère juste en
   dessous du local pour que les clients voient mieux ». Une vignette carrée dit
   ce qu'on trouve, elle ne dit pas OÙ : un client ne pouvait pas savoir quel
   point de la rue elle marquait.
   Le triangle et le point sont donc calés sous l'image, et c'est leur extrémité
   basse que `iconAnchor` place sur les coordonnées exactes (voir carte.js).
   ⚠️ Les deux repères en ont un, à leur couleur : vert pour la pizzeria, doré
   pour la machine. */
.pz-pin::after, .dist-pin::after {
  content: ""; display: block; width: 0; height: 0; margin: -1px auto 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 9px solid var(--green);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55));
}
.dist-pin::after { border-top-color: var(--gold); }

/* LE REPÈRE SUR LA CARTE — fixe, jamais au survol (demande explicite du
   04/08 : « on ne fait pas de survol, un point fixe avec l'image »). Il n'y a
   de toute façon pas de survol sur un écran tactile, l'usage visé.
   ⚠️ 46 px de large, et c'est mesuré : la carte fait 375 px sur téléphone, une
   vignette plus grande masquerait la zone de livraison qu'elle accompagne.
   ⚠️ `pointer-events: none` sur la photo : sans ça, le clic tombe sur l'image
   et n'ouvre pas la bulle du marqueur. */
.dist-pin { width: 46px; text-align: center; pointer-events: auto; }
.dist-pin img {
  width: 46px; height: 46px; object-fit: contain; pointer-events: none;
  background: rgba(16,12,10,.82); border: 2px solid var(--gold);
  border-radius: 10px; padding: 2px; box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
.dist-pin span {
  display: block; margin-top: 2px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .04em; color: #1a1408; background: var(--gold);
  border-radius: 99px; padding: 1px 5px; pointer-events: none;
}