/* « Ou trouver nos bieres » — interface client.
   Concue pour le telephone d'abord : une colonne, gros boutons, texte lisible ;
   les deux colonnes n'apparaissent qu'a partir de 900 px. */

:root {
  --ambre:        #b8791f;   /* couleur biere, chaleureuse — accents et boutons */
  --ambre-fonce:  #905d13;
  --ambre-clair:  #fdf6ea;
  --nuit:         #23180c;   /* banniere */

  --fond:         #faf8f5;
  --carte-bg:     #ffffff;
  --texte:        #241c12;
  --texte-2:      #6b6053;
  --bordure:      #e6ded2;

  --dispo:        #1f7a4d;   /* disponible */
  --epuise:       #c2761b;   /* momentanement epuise */
  --parfois:      #7a7185;   /* parfois disponible */
  --probable:     #4a7a99;   /* referencee par l'enseigne, non confirmee en rayon */

  --rayon-bord:   14px;
  --ombre:        0 1px 3px rgba(35, 24, 12, .08), 0 6px 18px rgba(35, 24, 12, .06);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font: 16px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--texte);
  background: var(--fond);
}

h1, h2 { margin: 0; }

/* --- Banniere -------------------------------------------------------------- */
.banniere {
  background: linear-gradient(160deg, var(--nuit), #3d2a15);
  color: #fff;
  padding: 34px 20px 30px;
  text-align: center;
}
.banniere-in { max-width: 760px; margin: 0 auto; }
.maison {
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase; color: #e0bd82;
}
.banniere h1 { font-size: clamp(26px, 5vw, 38px); font-weight: 700; letter-spacing: -.4px; }
.accroche { margin: 10px 0 0; font-size: 15.5px; color: rgba(255, 255, 255, .8); }

main { max-width: 1240px; margin: 0 auto; padding: 26px 16px 40px; }

/* --- Etapes ---------------------------------------------------------------- */
.etape { margin-bottom: 26px; }
.etape > h2 {
  display: flex; align-items: center; gap: 11px;
  font-size: 19px; font-weight: 650; margin-bottom: 14px;
}
.num {
  flex: none; width: 29px; height: 29px; border-radius: 50%;
  background: var(--ambre); color: #fff;
  font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --- Cartes produit -------------------------------------------------------- */
/* Defilement horizontal sur mobile — plus naturel au pouce qu'une grille qui
   pousse le reste de la page vers le bas. */
.cartes {
  display: grid; grid-auto-flow: column; grid-auto-columns: 178px;
  gap: 11px; overflow-x: auto; padding: 3px 3px 12px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.carte-produit {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px; cursor: pointer; text-align: left;
  background: var(--carte-bg); border: 2px solid var(--bordure);
  border-radius: var(--rayon-bord); box-shadow: var(--ombre);
  font: inherit; color: inherit;
  transition: border-color .12s, transform .12s;
}
.carte-produit:hover { border-color: var(--ambre); transform: translateY(-2px); }
.carte-produit[aria-checked="true"] { border-color: var(--ambre); background: var(--ambre-clair); }
.carte-produit .marque {
  font-size: 11px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--ambre-fonce);
}
.carte-produit .nom { font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.carte-produit .infos { font-size: 12.5px; color: var(--texte-2); }
.carte-produit .dispo-n { margin-top: auto; padding-top: 7px; font-size: 12.5px; font-weight: 650; color: var(--dispo); }
.carte-produit .dispo-n.zero { color: var(--texte-2); font-weight: 400; }

/* Le choix de la biere est facultatif et vient APRES le lieu : avec 47
   references, demander le produit en premier bloquait l'utilisateur avant meme
   qu'il ait pu dire ou il se trouve. */
.facultatif {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px;
  color: var(--texte-2); background: var(--bordure);
  padding: 2px 9px; border-radius: 999px;
}
.aide-etape { margin: -6px 0 12px; font-size: 14px; color: var(--texte-2); }
.champ-mince { max-width: 340px; margin-bottom: 12px; padding: 10px 14px; font-size: 15px; }
.carte-produit[disabled] { opacity: .5; cursor: default; }
.carte-produit[disabled]:hover { border-color: var(--bordure); transform: none; }

/* Toutes nos marques ne sont pas des bieres : P'tit Quinquin est une limonade.
   L'etiquette le dit la ou la marque apparait, pour qu'un client ne reparte pas
   avec une boisson sans alcool en croyant acheter une biere — ou l'inverse. */
.etiquette-nature {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: #fff; background: var(--probable); border-radius: 999px; vertical-align: 1px;
}

/* --- Verrouillage tant qu'aucune localisation n'est saisie ----------------- */
/* Le choix de la biere et les resultats n'ont aucun sens sans point de depart :
   plutot que de les laisser cliquables pour rien, on les grise. `pointer-events`
   suffit a la souris, mais les controles sont AUSSI passes en `disabled` cote
   JS — sinon on y accede encore au clavier. */
.verrouille {
  opacity: .45;
  pointer-events: none;
  user-select: none;
}
.verrouille #carte { filter: grayscale(1); }

/* --- Recherche de lieu ----------------------------------------------------- */
.recherche { display: flex; flex-wrap: wrap; gap: 10px; }
.champ-lieu { position: relative; flex: 1 1 260px; }
.champ {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 16px;
  color: var(--texte); background: var(--carte-bg);
  border: 2px solid var(--bordure); border-radius: var(--rayon-bord);
}
.champ:focus { outline: none; border-color: var(--ambre); }
.btn-geo {
  flex: 0 0 auto; padding: 13px 19px; font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; color: #fff; background: var(--ambre);
  border: 2px solid var(--ambre); border-radius: var(--rayon-bord);
}
.btn-geo:hover { background: var(--ambre-fonce); border-color: var(--ambre-fonce); }
.btn-geo[disabled] { opacity: .55; cursor: default; }

.suggestions {
  position: absolute; z-index: 900; left: 0; right: 0; top: calc(100% + 5px);
  background: var(--carte-bg); border: 1px solid var(--bordure);
  border-radius: var(--rayon-bord); box-shadow: var(--ombre); overflow: hidden;
}
.suggestions[hidden] { display: none; }
.suggestion {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 11px 15px; cursor: pointer; border-bottom: 1px solid var(--bordure);
}
.suggestion:last-child { border-bottom: none; }
.suggestion:hover, .suggestion.actif { background: var(--ambre-clair); }
.suggestion .cp { font-size: 13px; color: var(--texte-2); }

.rayon { margin-top: 14px; font-size: 14.5px; color: var(--texte-2); }
.rayon[hidden] { display: none; }
.rayon b { color: var(--texte); }
.rayon input[type=range] { display: block; width: 100%; max-width: 420px; margin-top: 7px; accent-color: var(--ambre); }

/* --- Resultats ------------------------------------------------------------- */
.resume { margin-bottom: 14px; }
.resume p { margin: 0; font-size: 17.5px; font-weight: 600; }
.resume .compte { color: var(--ambre-fonce); }
.elargir {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 9px; font-size: 14px; color: var(--texte-2); cursor: pointer;
}
.elargir[hidden] { display: none; }
.elargir input { accent-color: var(--ambre); width: 17px; height: 17px; }

.deux-colonnes { display: grid; gap: 16px; }

/* --- Liste des magasins ---------------------------------------------------- */
.magasin {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  padding: 15px 16px; margin-bottom: 10px; cursor: pointer;
  background: var(--carte-bg); border: 1px solid var(--bordure);
  border-radius: var(--rayon-bord); box-shadow: var(--ombre);
}
.magasin:hover { border-color: var(--ambre); }
.magasin .haut { display: flex; align-items: baseline; gap: 10px; }
.magasin .nom { flex: 1; font-size: 16px; font-weight: 650; }
.magasin .distance { font-size: 14px; font-weight: 650; color: var(--ambre-fonce); white-space: nowrap; }
.magasin .adresse { margin-top: 3px; font-size: 14px; color: var(--texte-2); }
.magasin .bas { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

.pastille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; color: #fff;
}
.pastille.disponible { background: var(--dispo); }
.pastille.epuise     { background: var(--epuise); }
.pastille.parfois    { background: var(--parfois); }
.pastille.probable   { background: var(--probable); }
.autres { font-size: 13px; color: var(--texte-2); }

.vide {
  padding: 30px 20px; text-align: center; color: var(--texte-2);
  background: var(--carte-bg); border: 1px dashed var(--bordure); border-radius: var(--rayon-bord);
}
.vide b { display: block; color: var(--texte); font-size: 16px; margin-bottom: 5px; }

/* --- Carte ----------------------------------------------------------------- */
.colonne-carte { position: relative; }
#carte {
  height: 340px; border-radius: var(--rayon-bord);
  border: 1px solid var(--bordure); box-shadow: var(--ombre);
}
.legende {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 10px; font-size: 13px; color: var(--texte-2);
}
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 11px; height: 11px; border-radius: 50%; }

.leaflet-popup-content { margin: 12px 14px; font: inherit; }
.leaflet-popup-content h3 { margin: 0 0 3px; font-size: 15px; }
.leaflet-popup-content p { margin: 0; font-size: 13.5px; color: var(--texte-2); }
.leaflet-popup-content button {
  margin-top: 9px; padding: 6px 13px; cursor: pointer; font: inherit; font-size: 13.5px;
  color: #fff; background: var(--ambre); border: none; border-radius: 8px;
}

/* --- Fiche magasin --------------------------------------------------------- */
.voile { position: fixed; inset: 0; background: rgba(35, 24, 12, .45); z-index: 1100; }
.voile[hidden] { display: none; }
.fiche {
  position: fixed; z-index: 1200; background: var(--carte-bg);
  display: flex; flex-direction: column;
  left: 0; right: 0; bottom: 0; max-height: 86vh;
  border-radius: 22px 22px 0 0;
}
.fiche[hidden] { display: none; }
.fiche-entete {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 20px 20px 14px; border-bottom: 1px solid var(--bordure);
}
.fiche-entete h2 { font-size: 19px; }
.fiche-entete p { margin: 4px 0 0; font-size: 14.5px; color: var(--texte-2); }
.fermer {
  flex: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--texte-2);
  background: var(--fond); border: 1px solid var(--bordure);
}
.fiche-corps { overflow-y: auto; padding: 18px 20px 26px; }
.fiche-corps h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--texte-2);
}
.ligne-produit {
  display: flex; align-items: center; gap: 11px; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--bordure);
}
.ligne-produit:last-of-type { border-bottom: none; }
.ligne-produit .lp-nom { font-size: 14.5px; font-weight: 600; }
.ligne-produit .lp-fmt { font-size: 13px; color: var(--texte-2); }
.itineraire {
  display: block; margin-top: 18px; padding: 14px; text-align: center;
  font-size: 15.5px; font-weight: 650; text-decoration: none;
  color: #fff; background: var(--ambre); border-radius: var(--rayon-bord);
}
.itineraire:hover { background: var(--ambre-fonce); }
.note-fiche { margin: 14px 0 0; font-size: 13px; color: var(--texte-2); }

/* --- Pied de page ---------------------------------------------------------- */
.pied {
  max-width: 1240px; margin: 0 auto; padding: 22px 16px 40px;
  font-size: 13px; color: var(--texte-2); border-top: 1px solid var(--bordure);
}
.pied p { margin: 0 0 6px; }
.maj { font-size: 12px; opacity: .8; }

/* --- Chargement ------------------------------------------------------------ */
.chargement { padding: 26px; text-align: center; color: var(--texte-2); font-size: 14.5px; }

/* --- Desktop --------------------------------------------------------------- */
@media (min-width: 900px) {
  .cartes { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); overflow: visible; }
  .deux-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  /* Le DOM place la carte en premier pour le mobile ; sur grand écran on rend
     la liste à la colonne de gauche, où l'oeil la cherche. */
  .colonne-liste { order: 1; max-height: 640px; overflow-y: auto; padding-right: 4px; }
  .colonne-carte { order: 2; position: sticky; top: 16px; }
  #carte { height: 590px; }
  /* En grand ecran, la fiche devient un panneau lateral plutot qu'un tiroir bas. */
  .fiche {
    left: auto; top: 0; bottom: 0; width: 440px; max-height: none;
    border-radius: 0;
  }
}