/*
 * Borderline Craft Beer — styles des pages dont le corps est rendu en bloc.
 *
 * Les pages juridiques (mentions légales, politique de confidentialité) sont
 * un texte continu, écrit d'un tenant dans Content/*.cs et injecté en HTML.
 * Leurs paragraphes et titres naissent donc à l'exécution : ils ne portent pas
 * la portée du style isolé de la page, et leurs règles doivent vivre ici.
 *
 * Chaque bloc est préfixé par une classe posée sur le container de la page
 * (`container-class` du tag helper `<bl-section>`), ce qui évite d'introduire
 * un élément supplémentaire dans le document et cantonne les règles à la page
 * concernée.
 */

/* === Mentions légales ============================================= */
.legal-prose h1 {
  margin-bottom: var(--bl-space-6);
}

.legal-prose h2 {
  margin-top: var(--bl-space-7);
  margin-bottom: var(--bl-space-3);
}

.legal-prose p {
  line-height: var(--bl-lh-body);
  margin-top: var(--bl-space-4);
}

.legal-prose p + p {
  margin-top: var(--bl-space-4);
}

.legal-prose p br {
  line-height: 2;
}

/* === Politique de confidentialité ================================= */
.privacy-prose .lead {
  font-size: var(--bl-fs-lead);
  color: var(--bl-text-muted);
  margin: var(--bl-space-3) 0 var(--bl-space-5);
}

.privacy-prose .muted {
  color: var(--bl-text-muted);
  font-size: var(--bl-fs-small);
}

.privacy-prose h2 {
  margin-top: var(--bl-space-6);
  margin-bottom: var(--bl-space-3);
}

.privacy-prose h3 {
  margin-top: var(--bl-space-4);
  margin-bottom: var(--bl-space-2);
}

.privacy-prose ul {
  list-style: disc;
  padding-left: var(--bl-space-4);
  margin-bottom: var(--bl-space-3);
}

.privacy-prose ul li {
  margin-bottom: var(--bl-space-1);
}

/* === Carte des points de vente ====================================
 * Tuiles, marqueurs et infobulles sont créés par Leaflet à l'exécution :
 * comme les `:global()` d'origine, ces règles ne peuvent pas être portées par
 * le style isolé de la page. Elles restent cantonnées au conteneur `.partners-map`.
 */
.partners-map {
  width: 100%;
  height: clamp(360px, 58vh, 560px);
  border: var(--bl-border-width-strong) solid var(--bl-border-strong);
  border-radius: var(--bl-radius);
  background: var(--bl-black-1);
  overflow: hidden;
  z-index: 0; /* garde la carte sous le header collant */
}

/* Carte en noir et blanc, cohérente avec celle de la page contact. */
.partners-map .leaflet-tile {
  filter: grayscale(1) contrast(1.05);
}

/* Marqueur maison : point vert bordé de blanc. */
.partners-map .bl-marker span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00ff33;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

/* Thème sombre pour les infobulles et l'attribution. */
.partners-map .leaflet-popup-content-wrapper,
.partners-map .leaflet-popup-tip {
  background: var(--bl-black-3);
  color: var(--bl-text);
  border: var(--bl-border-width) solid var(--bl-border-strong);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.partners-map .leaflet-popup-content {
  margin: 12px 14px;
}

.partners-map .bl-popup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.partners-map .bl-popup-logo {
  align-self: center;
  width: 120px;
  height: 80px;
  object-fit: contain;
  background: var(--bl-white);
  border-radius: var(--bl-radius);
  padding: 6px;
  margin-bottom: 4px;
}

.partners-map .bl-popup-logo.is-dark {
  background: var(--bl-black-1);
}

.partners-map .bl-popup strong {
  font-family: var(--bl-font-display);
  font-weight: 400;
  font-size: var(--bl-fs-h4);
  color: var(--bl-white);
  letter-spacing: 0.02em;
}

.partners-map .bl-popup span {
  font-size: var(--bl-fs-small);
  line-height: var(--bl-lh-small);
  color: var(--bl-text);
}

.partners-map .bl-popup a {
  color: #00ff33;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 4px;
}

.partners-map .leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.6);
  color: var(--bl-text-muted);
  font-size: 10px;
}

.partners-map .leaflet-control-attribution a {
  color: var(--bl-text);
}

/* === Panier : récapitulatif construit par le script ================
 * Les lignes du récapitulatif sont rendues en JavaScript à partir du panier
 * mémorisé dans le navigateur : elles n'existent pas dans le .cshtml et ne
 * peuvent donc pas porter la portée du style isolé. Ces règles étaient déjà
 * enveloppées dans `:global()` côté Astro, pour la même raison.
 */

.recap-empty {
  color: var(--bl-text-muted);
  padding: var(--bl-space-5);
  text-align: center;
}

.recap-empty-cta {
  display: inline-block;
  margin-top: var(--bl-space-2);
  color: var(--bl-white);
  font-weight: 700;
  text-decoration: underline;
}

.recap-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recap-item {
  display: flex;
  align-items: center;
  gap: var(--bl-space-3);
  padding: var(--bl-space-3) 0;
  border-bottom: var(--bl-border-width) solid var(--bl-border);
}

.recap-item:last-child {
  border-bottom: none;
}

.recap-item-image {
  width: 56px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--bl-radius);
  background: var(--bl-black-1);
  flex-shrink: 0;
}

.recap-item-body {
  flex: 1;
  min-width: 0;
}

.recap-item-name {
  font-family: var(--bl-font-display);
  color: var(--bl-white);
  margin: 0;
  letter-spacing: 0.02em;
}

.recap-item-meta {
  font-size: var(--bl-fs-small);
  color: var(--bl-text-muted);
  margin: 0;
}

.recap-item-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bl-space-2);
  margin-top: var(--bl-space-1);
  max-width: none;
}

.recap-item-qty {
  font-family: var(--bl-font-body);
  font-weight: 700;
  color: var(--bl-white);
}

.recap-item-line {
  font-family: var(--bl-font-display);
  font-weight: 400;
  color: var(--bl-white);
  font-size: var(--bl-fs-body);
  letter-spacing: 0.02em;
}

.recap-item-remove {
  width: 32px;
  height: 32px;
  border-radius: var(--bl-radius);
  color: var(--bl-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--bl-transition-fast), background-color var(--bl-transition-fast);
}

.recap-item-remove:hover {
  color: var(--bl-white);
  background: var(--bl-black-2);
}

.recap-item-remove svg {
  width: 18px;
  height: 18px;
  fill: none;
}

/* === Images responsives : règles hors portée ======================
 * Ces règles visent des <img> produites par le tag helper `asset`. La
 * réécriture du style isolé n'attache sa portée qu'aux balises littérales du
 * .cshtml, et une balise portant un tag helper n'en fait pas partie : gardées
 * dans le fichier du composant, ces règles ne s'appliqueraient jamais.
 *
 * Astro faisait déjà ce choix pour la plupart d'entre elles, avec
 * `:global(img)`, pour la même raison — l'image venait d'un composant enfant.
 * Les classes conteneurs sont propres à chaque composant : aucune fuite.
 */

.beer-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-cover img {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: 4px;
}

.team-photo img {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: 4px;
}

.hop-photo img {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    border-radius: 4px;
    filter: url(#selective-green);
}

/* === Corps rendus depuis le Markdown ==============================
 *
 * Fiches bière et articles : leur corps est du HTML produit à l'exécution par
 * Markdig. Ces règles ne peuvent pas vivre dans la feuille isolée de la page —
 * l'isolation CSS pose son attribut de portée sur le DERNIER élément du
 * sélecteur, or ce <p> ou ce <h2> naît après le rendu et n'a aucun attribut.
 * `.beer-prose p` deviendrait `.beer-prose p[b-xxx]`, qui ne matche rien : les
 * titres se retrouvent collés au paragraphe précédent.
 */
.beer-prose p {
  margin-bottom: var(--bl-space-3);
  max-width: none;
}

.beer-prose h2 {
  margin-top: var(--bl-space-6);
  margin-bottom: var(--bl-space-3);
}

.beer-prose h2:first-child {
  margin-top: 0;
}

.beer-prose ul {
  list-style: disc;
  padding-left: var(--bl-space-4);
  margin: var(--bl-space-3) 0;
}

.beer-prose ul li {
  margin-bottom: var(--bl-space-2);
  line-height: var(--bl-lh-body);
}

.news-prose h2 {
  font-family: var(--bl-font-body);
  font-weight: 700;
  font-size: var(--bl-fs-h3);
  letter-spacing: 0;
  margin: var(--bl-space-5) 0 var(--bl-space-3);
  clear: right;
}

.news-prose p {
  margin-bottom: var(--bl-space-3);
}

.news-prose ul,
.news-prose ol {
  list-style: disc;
  padding-left: var(--bl-space-4);
  margin-bottom: var(--bl-space-3);
}

.news-prose li {
  margin-bottom: var(--bl-space-2);
}