/* ==========================================================================
   La Belle Viande — carte de fidélité
   Chargée sur /fidelite/ et, si la page existe, sur l'accueil qui l'annonce.
   Voir inc/lbv-fidelite.php.

   La page reprend les jetons du thème (fond sombre, encre claire, orange).
   Les couleurs de la carte imprimée ne servent QU'À la carte et aux pastilles
   de récompense : c'est l'objet qu'on reconnaît, pas la page.
   ========================================================================== */

.lbv {
  --fid-rouge:#99131D;
  --fid-rouge-fonce:#6E0810;
  --fid-dore:#D4A942;
  /* Le vert halal de la charte (#079447) tombe à 3,9:1 sous du texte blanc.
     On le garde pour les filets, et on fonce la version qui porte du texte. */
  --fid-vert:#079447;
  --fid-vert-fonce:#077A3C;
  --fid-creme:#FFF8EE;
  --fid-encre:#2D2926;
}

/* ---- bandeau de titre --------------------------------------------------- */
/* Le titre du thème monte à 78 px : dans une colonne de moitié de page, il
   tomberait sur cinq lignes. On le borne, ici seulement. */
.lbv-fidelite-tete .lbv-titre-1 { font-size: clamp(34px, 3.8vw, 54px); }
.lbv-fidelite-tete__contenu {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}
.lbv-fidelite-tete__texte > * { max-width: 560px; }
.lbv-fidelite-tete__phrase {
  color: rgba(243,238,233,.76);
  line-height: 1.75;
  margin-top: 18px;
}
.lbv-fidelite-tete__date {
  display: inline-block;
  margin: 6px 0 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(212,169,66,.14);
  border: 1px solid rgba(212,169,66,.45);
  color: var(--fid-dore);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ---- les deux faces ----------------------------------------------------- */
/* Prefixe `lbv-fid-` et non `lbv-carte` : `.lbv-carte` existe deja dans
   lbv.css, c'est la carte de rayon de la page d'accueil. Lui imposer notre
   format carte de credit ecrasait ses images. Une feuille qui se charge sur
   plusieurs pages ne prend jamais un nom de classe generique. */
.lbv-fid-cartes {
  display: grid;
  gap: 26px;
  margin: 0;
}
.lbv-fid-cartes__face { margin: 0; }
.lbv-fid-cartes__face figcaption {
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}
.lbv-fid-carte__photo {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

/* La carte dessinée. Les tailles sont en `cqw` : elles suivent la largeur de
   la carte, donc la maquette reste juste du téléphone à l'écran large sans
   une seule requête de média. */
.lbv-fid-carte {
  container-type: inline-size;
  aspect-ratio: 1012 / 638;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.lbv-fid-carte__recto,
.lbv-fid-carte__verso { width: 100%; height: 100%; }

/* Recto */
.lbv-fid-carte__recto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 0 5cqw;
  padding: 6cqw;
  background: linear-gradient(135deg, var(--fid-rouge) 0%, var(--fid-rouge-fonce) 100%);
  border: 0.5cqw solid var(--fid-dore);
  border-radius: 16px;
  color: #fff;
}
.lbv-fid-carte__logo {
  width: 19cqw;
  height: auto;
  border-radius: 50%;
  background: #fff;
  padding: 1cqw;
}
.lbv-fid-carte__titre {
  margin: 0;
  font-size: 9cqw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.lbv-fid-carte__accroche {
  margin: 1.6cqw 0 0;
  font-size: 3.4cqw;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fid-dore);
}
.lbv-fid-carte__resume {
  margin: 1.4cqw 0 0;
  font-size: 3.2cqw;
  color: rgba(255,255,255,.88);
}
.lbv-fid-carte__marque {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 2.4cqw;
  border-top: 0.2cqw solid rgba(212,169,66,.45);
  font-size: 2.7cqw;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fid-dore);
}

/* Verso */
.lbv-fid-carte__verso {
  display: grid;
  /* Trois bandes en pourcentage de la HAUTEUR de la carte, pas du contenu :
     c'est la seule façon d'avoir un format carte de crédit exact ET une
     mention légale qui ne se fait jamais rogner, à toutes les largeurs. */
  grid-template-rows: 29% 49% 22%;
  background: var(--fid-creme);
  border-radius: 16px;
  color: var(--fid-encre);
}
.lbv-fid-carte__bandeau {
  background: var(--fid-rouge);
  color: #fff;
  padding: 3cqw 5cqw;
}
.lbv-fid-carte__regle {
  margin: 0;
  font-size: 4.2cqw;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lbv-fid-carte__seuil { margin: .6cqw 0 0; font-size: 2.7cqw; color: rgba(255,255,255,.9); }

/* Serré volontairement : le bandeau, les deux rangées de pastilles et
   la mention légale du bas restent dans le format carte quelle que soit la
   largeur d'affichage. */
.lbv-fid-carte__cases {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 2.2cqw 2.6cqw;
  align-content: stretch;
  margin: 0;
  min-height: 0;
  padding: 3cqw 4.4cqw;
  list-style: none;
}
.lbv-fid-case {
  /* Les pastilles se mesurent sur la hauteur de leur rangée, jamais sur la
     largeur de colonne : la bande leur est allouée, elles la remplissent. */
  aspect-ratio: 1;
  height: 100%;
  width: auto;
  max-width: 100%;
  min-height: 0;
  margin: 0 auto;
  border-radius: 50%;
  border: 0.35cqw solid rgba(45,41,38,.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
}
.lbv-fid-case__numero { font-size: 4cqw; font-weight: 600; color: rgba(45,41,38,.6); }
.lbv-fid-case--gain { border: 0; color: #fff; }
.lbv-fid-case--rouge   { background: var(--fid-rouge); }
.lbv-fid-case--vert    { background: var(--fid-vert-fonce); }
.lbv-fid-case--vedette { background: var(--fid-rouge-fonce); box-shadow: 0 0 0 0.5cqw var(--fid-dore); }
/* Jamais sur deux lignes : « −10 % » coupé après « −10 » ne veut plus rien dire. */
.lbv-fid-case__rabais { font-size: 3.1cqw; font-weight: 800; white-space: nowrap; }
.lbv-fid-case__visite {
  font-size: 1.65cqw;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  text-transform: uppercase;
  margin-top: .3cqw;
}

.lbv-fid-carte__menu {
  align-self: center;
  margin: 0;
  padding: 0 4.4cqw 2cqw;
  font-size: 2.1cqw;
  line-height: 1.5;
  text-align: center;
  color: rgba(45,41,38,.72);
}

/* ---- comment ça fonctionne ---------------------------------------------- */
.lbv-fidelite-etapes { padding: 96px 0 0; }
.lbv-etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.lbv-etape {
  padding: 32px 30px 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ground2);
}
.lbv-etape__rang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(240,118,19,.14);
  border: 1px solid rgba(240,118,19,.45);
  color: var(--orange);
  font-size: 15px;
  font-weight: 700;
}
.lbv-etape p { margin: 12px 0 0; color: var(--muted); line-height: 1.7; }

.lbv-fidelite-rappel {
  margin: 30px 0 0;
  padding: 16px 22px;
  border-radius: 12px;
  border: 1px solid rgba(240,118,19,.32);
  background: rgba(240,118,19,.08);
  color: var(--ink);
  font-weight: 600;
}

/* ---- les récompenses ---------------------------------------------------- */
.lbv-fidelite-gains { padding: 96px 0 0; }
.lbv-gains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}
.lbv-gain {
  padding: 34px 30px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--ground2);
}
.lbv-gain--rouge { border-color: rgba(217,58,51,.45); }
.lbv-gain--vert  { border-color: rgba(111,203,149,.45); }
.lbv-gain--vedette {
  border: 2px solid var(--fid-dore);
  background: linear-gradient(160deg, rgba(212,169,66,.12) 0%, var(--ground2) 60%);
}
.lbv-gain__visite {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}
.lbv-gain__rabais {
  margin: 10px 0 0;
  font-size: clamp(42px, 5vw, 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}
.lbv-gain--rouge   .lbv-gain__rabais { color: var(--rouge-enseigne); }
.lbv-gain--vert    .lbv-gain__rabais { color: var(--vert); }
.lbv-gain--vedette .lbv-gain__rabais { color: var(--fid-dore); }
.lbv-gain__phrase { margin: 16px 0 0; color: var(--muted); line-height: 1.65; }
.lbv-gain__note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 600;
}

/* ---- conditions --------------------------------------------------------- */
.lbv-fidelite-conditions { padding: 96px 0 0; }
.lbv-fidelite-conditions__contenu {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: start;
}
.lbv-fidelite-conditions p { color: var(--muted); line-height: 1.75; margin-top: 20px; max-width: 460px; }
.lbv-conditions { margin: 0; padding: 0; list-style: none; }
.lbv-conditions li {
  position: relative;
  padding: 18px 0 18px 34px;
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
}
.lbv-conditions li:first-child { border-top: 1px solid var(--line); }
.lbv-conditions li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 27px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

/* ---- FAQ ---------------------------------------------------------------- */
.lbv-fidelite-faq { padding: 96px 0 0; }
.lbv-faq { margin-top: 38px; max-width: 840px; }
.lbv-faq__item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--ground2);
  margin-bottom: 12px;
}
.lbv-faq__question {
  position: relative;
  display: block;
  padding: 22px 60px 22px 26px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.lbv-faq__question::-webkit-details-marker { display: none; }
.lbv-faq__question:hover { color: var(--orange); }
.lbv-faq__question:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 14px; }
/* Le signe est décoratif : la vraie information d'état est portée par
   `<details>`, que les lecteurs d'écran annoncent déjà (« développé »). */
.lbv-faq__question::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  background:
    linear-gradient(var(--orange), var(--orange)) center/13px 2px no-repeat,
    linear-gradient(var(--orange), var(--orange)) center/2px 13px no-repeat;
  transition: transform .2s ease;
}
.lbv-faq__item[open] .lbv-faq__question::after {
  background: linear-gradient(var(--orange), var(--orange)) center/13px 2px no-repeat;
}
.lbv-faq__reponse { padding: 0 26px 24px; }
.lbv-faq__reponse p { margin: 0; color: var(--muted); line-height: 1.75; max-width: 66ch; }

/* ---- appel final -------------------------------------------------------- */
.lbv-fidelite-appel { margin-top: 100px; }
.lbv-fidelite-appel .lbv-mesure__options li span { color: var(--fid-dore); }

/* ---- annonce sur l'accueil ---------------------------------------------- */
.lbv-fidelite-annonce { padding: 96px 0 0; }
.lbv-fidelite-annonce__contenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 48px;
  border-radius: 20px;
  border: 1px solid rgba(212,169,66,.35);
  background: linear-gradient(140deg, rgba(212,169,66,.10) 0%, var(--ground2) 55%);
}
.lbv-fidelite-annonce p { color: var(--muted); line-height: 1.7; margin: 18px 0 0; }
.lbv-fidelite-annonce__date { color: var(--fid-dore); }
.lbv-fidelite-annonce__paliers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lbv-palier {
  padding: 26px 16px;
  text-align: center;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--ground);
}
.lbv-palier--vedette { border-color: var(--fid-dore); }
.lbv-palier__rabais {
  display: block;
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.lbv-palier--rouge   .lbv-palier__rabais { color: var(--rouge-enseigne); }
.lbv-palier--vert    .lbv-palier__rabais { color: var(--vert); }
.lbv-palier--vedette .lbv-palier__rabais { color: var(--fid-dore); }
.lbv-palier__visite {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- adaptations -------------------------------------------------------- */
@media (max-width: 1040px) {
  .lbv-fidelite-tete__contenu,
  .lbv-fidelite-conditions__contenu,
  .lbv-fidelite-annonce__contenu { grid-template-columns: 1fr; gap: 44px; }
  .lbv-fidelite-etapes,
  .lbv-fidelite-gains,
  .lbv-fidelite-conditions,
  .lbv-fidelite-faq,
  .lbv-fidelite-annonce { padding-top: 76px; }
  /* Deux faces côte à côte seulement si chacune reste lisible : sous 300 px
     de large, le recto ne tient plus son format et se ferait rogner. */
  .lbv-fid-cartes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .lbv-etapes { grid-template-columns: 1fr; gap: 18px; }
  .lbv-gains { grid-template-columns: 1fr; }
  .lbv-fidelite-appel { margin-top: 80px; }
}

@media (max-width: 640px) {
  .lbv-fidelite-etapes,
  .lbv-fidelite-gains,
  .lbv-fidelite-conditions,
  .lbv-fidelite-faq,
  .lbv-fidelite-annonce { padding-top: 60px; }
  .lbv-fid-cartes { grid-template-columns: 1fr; gap: 22px; }
  .lbv-fidelite-annonce__contenu { padding: 30px 22px; }
  .lbv-fidelite-annonce__paliers { gap: 10px; }
  .lbv-palier { padding: 20px 8px; }
  .lbv-gain { padding: 28px 22px; }
  .lbv-faq__question { padding: 18px 52px 18px 20px; font-size: 16px; }
  .lbv-faq__reponse { padding: 0 20px 20px; }
}

/* Repli pour les navigateurs sans requêtes de conteneur : les `cqw` y valent 0,
   la carte deviendrait illisible. On repasse en tailles relatives simples. */
@supports not (container-type: inline-size) {
  .lbv-fid-carte { aspect-ratio: auto; }
  .lbv-fid-carte__recto, .lbv-fid-carte__verso { padding: 26px; }
  .lbv-fid-carte__logo { width: 72px; padding: 4px; }
  .lbv-fid-carte__titre { font-size: 30px; }
  .lbv-fid-carte__accroche { font-size: 12px; margin-top: 6px; }
  .lbv-fid-carte__resume { font-size: 13px; margin-top: 6px; }
  .lbv-fid-carte__marque { font-size: 10px; padding-top: 14px; border-top-width: 1px; }
  .lbv-fid-carte__bandeau { padding: 16px 22px; }
  .lbv-fid-carte__regle { font-size: 17px; }
  .lbv-fid-carte__seuil { font-size: 12px; }
  .lbv-fid-carte__cases { gap: 10px; padding: 18px 22px; }
  .lbv-fid-case { border-width: 1px; }
  .lbv-fid-case__numero { font-size: 15px; }
  .lbv-fid-case__rabais { font-size: 13px; }
  .lbv-fid-case__visite { font-size: 8px; }
  .lbv-fid-case--vedette { box-shadow: 0 0 0 2px var(--fid-dore); }
  .lbv-fid-carte__menu { font-size: 10px; padding: 0 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .lbv-faq__question::after { transition: none; }
}