/*
 * Le paiement echelonne des tables (inc/echeancier.php, GOAL 10).
 * Feuille a part : le module ne touche pas a site.css.
 */

/* ── Sur la carte d'une table, a l'accueil ──
   Un bouton plein au-dessus de « Reserver une table » : le comptant garde son
   bouton au trait, les versements prennent le rouge. Le bouton de la carte
   reste en bas : les cartes voisines gardent leurs boutons alignes. */
.pass-echelonne {
  margin: 0 0 12px;
}
/* `.pass .btn` (site.css) met l'encre et un fond clair au survol a tous les
   boutons des cartes : sans ces lignes, le texte sortait noir sur le rouge, et
   le survol effacait le degrade. */
.pass .pass-echelonne-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  white-space: normal;
  color: var(--color-bg);
  border-color: transparent;
}
.pass .pass-echelonne-btn:hover,
.pass .pass-echelonne-btn:focus-visible {
  background: var(--canada-grad);
  color: var(--color-bg);
  filter: brightness(1.08) saturate(1.03);
}
.pass-echelonne-note {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-60, rgba(32, 30, 29, 0.7));
}
.pass-echelonne-note a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pass-echelonne-note a:hover,
.pass-echelonne-note a:focus-visible {
  color: var(--color-accent, #ec3013);
}

/* Les deux boutons sur une ligne quand la carte est assez large (demande de
   Regis, 16 oct. 2026), l'un sous l'autre sinon. La carte, une colonne flex
   (site.css), passe en grille : tete, prix, resume, puis la liste, qui prend
   la hauteur restante et pousse les boutons en bas, alignes sur ceux de la
   carte voisine ; la phrase vient au-dessus des boutons. `display: contents`
   fait du bouton et de la phrase des enfants de la grille ; ils reprennent
   donc eux-memes le `z-index` de `.pass > *`, sans quoi le motif de fond
   passerait dessus. Sans `:has()`, la carte reste une colonne, dans le meme
   ordre. La carte seule (`.passes--solo`) a sa propre grille : on n'y touche
   pas. */
.passes:not(.passes--solo) .pass-echelonne {
  display: contents;
}
.passes:not(.passes--solo) .pass-echelonne-btn,
.passes:not(.passes--solo) .pass-echelonne-note {
  position: relative;
  z-index: 1;
}
.passes:not(.passes--solo) .pass-echelonne-note {
  order: 1;
  margin: 0;
}
.passes:not(.passes--solo) .pass-echelonne-btn,
.passes:not(.passes--solo) .pass:has(> .pass-echelonne) > .btn {
  order: 2;
}
.passes:not(.passes--solo) .pass:has(> .pass-echelonne) {
  display: grid;
  /* 244 px : « Reserver en 6 versements → » tient sur une ligne a 13 px ; en
     dessous, les boutons s'empilent au lieu de couper leur texte. */
  grid-template-columns: repeat(auto-fit, minmax(min(244px, 100%), 1fr));
  grid-template-rows: auto auto auto 1fr;
  column-gap: 12px;
}
.passes:not(.passes--solo) .pass:has(> .pass-echelonne) > *,
.passes:not(.passes--solo) .pass:has(> .pass-echelonne) .pass-echelonne-note {
  grid-column: 1 / -1;
}
.passes:not(.passes--solo) .pass:has(> .pass-echelonne) > .btn,
.passes:not(.passes--solo) .pass:has(> .pass-echelonne) .pass-echelonne-btn {
  grid-column: auto;
  height: auto;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 13px;
  justify-content: center;
  text-align: center;
}

/* ── L'avis du panier en blocs ── */
.abc-ech-avis {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-left: 4px solid var(--color-accent, #ec3013);
  background: #fff;
  font-size: 0.9375rem;
}

/* ── La case de la caisse classique ── */
.abc-ech-accord label {
  display: block;
  line-height: 1.5;
}
.abc-ech-accord a {
  margin-left: 4px;
  white-space: nowrap;
}

/* ── La page privee ── */
.ech-page {
  max-width: 760px;
}
.ech-progression {
  height: 10px;
  border-radius: 999px;
  background: var(--color-surface, #eae9e9);
  overflow: hidden;
}
.ech-progression-barre {
  display: block;
  height: 100%;
  background: var(--color-accent, #ec3013);
}
.ech-progression-texte {
  margin: 10px 0 28px;
  font-size: 0.9375rem;
}
.ech-calendrier {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.ech-calendrier th,
.ech-calendrier td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--color-divider, rgba(32, 30, 29, 0.25));
  text-align: left;
  vertical-align: middle;
}
.ech-calendrier th {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ech-calendrier .ech-montant {
  text-align: right;
  white-space: nowrap;
}
.ech-ligne--prochaine td {
  font-weight: 600;
}
.ech-etat {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.ech-etat--paye {
  background: #e3f1e4;
  color: #1e5c22;
}
.ech-etat--avenir {
  background: var(--color-surface, #eae9e9);
}
.ech-etat--retard {
  background: #fbe3df;
  color: #9c1d0b;
}
.ech-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}
.ech-actions .btn {
  white-space: normal;
  text-align: center;
}
.ech-actions .btn:not(.btn-primary) {
  border: 1px solid currentColor;
}

/* ── La page de remerciement ── */
.ech-merci {
  margin: 0 0 32px;
  padding: 24px 28px;
  border-left: 4px solid var(--color-accent, #ec3013);
  background: #fff;
}
.ech-merci h2 {
  margin: 0 0 10px;
  font-size: 1.375rem;
}
.ech-merci p {
  margin: 0 0 14px;
  line-height: 1.6;
}
.ech-merci p:last-child {
  margin-bottom: 0;
}
.ech-note {
  margin-top: 28px;
  font-size: 0.8125rem;
  opacity: 0.8;
}

@media (max-width: 560px) {
  .ech-calendrier thead th:first-child,
  .ech-calendrier td:first-child {
    display: none;
  }
  .ech-actions .btn {
    width: 100%;
  }
}

/* ── La page du programme (/paiement-echelonne/) ── */
.ech-programme-ferme {
  margin: 0;
  padding: 12px 16px;
  border-left: 4px solid var(--color-accent, #ec3013);
  background: #fff;
  font-size: 0.9375rem;
}
.ech-programme-ferme--sombre {
  background: rgba(243, 242, 242, 0.08);
  color: inherit;
}
.ech-programme-ferme a {
  color: inherit;
  font-weight: 600;
}

/* ── La fiche d'une table : l'offre sous le prix ──
   Dans le panneau d'achat, sur l'encre (shop.css). Un « ou » la separe du
   bouton d'ajout au panier : deux facons de payer la meme table. Le bouton
   des versements reste au trait, l'ajout au panier garde le rouge. */
.ech-fiche { margin-top: 24px; }
.ech-fiche-ou {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ground-55);
}
.ech-fiche-ou::before,
.ech-fiche-ou::after { content: ""; flex: 1; border-top: var(--rule-inverse); }
.ech-fiche-kicker {
  margin: 0 0 8px; font-size: 11px; letter-spacing: .16em; font-weight: 600;
  color: var(--color-accent-400);
}
.ech-fiche-titre { margin: 0; font-size: 17px; line-height: 1.35; color: var(--color-bg); }
.ech-fiche-titre strong {
  display: block; margin-bottom: 2px;
  font-size: clamp(26px, 2.6vw, 32px); line-height: 1.05;
  font-weight: var(--font-heading-weight); letter-spacing: -.02em;
}
/* Le calendrier en un trait : une case par versement, la premiere payee. */
.ech-fiche-frise {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  margin: 16px 0 6px; padding: 0; list-style: none;
}
.ech-fiche-frise li { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.ech-fiche-frise li.is-aujourdhui { background: var(--color-accent-400); }
.ech-fiche-frise-bornes {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 0 0 14px; font-size: 11px; color: var(--ground-55);
}
.ech-fiche-suite { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--ground-70); }
.ech-fiche-suite strong { color: var(--color-bg); }
.pass-buy .ech-fiche-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; padding: 12px 18px;
  border: 1px solid var(--color-bg); background: transparent; color: var(--color-bg);
  text-align: center;
}
.pass-buy .ech-fiche-btn:hover,
.pass-buy .ech-fiche-btn:focus-visible { background: var(--color-bg); color: var(--color-text); }
.ech-fiche-prix,
.ech-fiche-limite { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ground-55); }
.ech-fiche-prix a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ech-fiche-prix a:hover { color: var(--color-bg); }
/* La date apres laquelle le calendrier raccourcit : le meme carre que le
   stock restant (shop.css), pas une alarme. */
.ech-fiche-limite { display: flex; align-items: baseline; gap: 8px; color: var(--ground-70); }
.ech-fiche-limite::before {
  content: ""; flex: none; width: 8px; height: 8px;
  background: var(--color-accent-400); transform: translateY(-1px);
}

/* ── La fiche d'un billet a l'unite : la table, pour un groupe ──
   Sous les garanties, plus discret : l'achat du billet reste le geste de la
   page ; un lien vers le programme, pas de bouton. */
.ech-fiche--groupe { margin-top: 22px; padding-top: 18px; border-top: var(--rule-inverse); }
.ech-fiche--groupe .ech-fiche-suite { margin-bottom: 10px; }
.ech-fiche-lien {
  font-size: 14px; font-weight: 600; color: var(--color-bg);
  text-decoration: underline; text-underline-offset: 3px;
}
.ech-fiche-lien:hover,
.ech-fiche-lien:focus-visible { color: var(--color-accent-400); }