/* Réserver un spectacle — grille par ville.
   Regle metier portee par le style : la VILLE est l'information la plus visible,
   la salle vient juste apres, la date n'est jamais une petite ligne grise. */
.clb-resa *,.clb-resa *::before,.clb-resa *::after{box-sizing:border-box}
.clb-resa{--r-accent:var(--ddr-accent,#e31f24);--r-encre:#1d1b19;--r-doux:#6b635b;
  --r-trait:rgba(29,27,25,.14);--r-trait-fin:rgba(29,27,25,.10);--r-fond:#fff;
  --r-rayon:12px;font-size:16px}

/* Sans le titre du gabarit, la recherche se retrouve collee au bandeau de navigation.
   La respiration lui est rendue ici, proportionnee a la largeur de l'ecran : une valeur
   fixe serait trop lache sur mobile et trop courte sur grand ecran. */
.clb-resa--sans-titre{padding-top:clamp(1.5rem,3.5vw,2.75rem)}

/* Titre reserve aux technologies d'assistance. La regle est celle de WordPress, recopiee
   ici pour ne pas dependre du theme : ni display:none ni visibility:hidden, qui le
   retireraient AUSSI des lecteurs d'ecran. Il sort du flux visuel, pas de l'accessibilite. */
.clb-resa .screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.clb-resa .screen-reader-text:focus{position:static;width:auto;height:auto;margin:0;
  overflow:visible;clip:auto;clip-path:none;white-space:normal}

/* ------------------------------------------------------------- FILTRES */
.clb-resa-filtres{margin:0 0 1.6rem}
.clb-resa-h2{font-size:clamp(1.1rem,1.8vw,1.35rem);margin:0 0 .7rem;color:var(--r-encre)}
.clb-resa-recherche input{width:100%;max-width:32rem;font-size:1.05rem;padding:.85rem 1rem;
  min-height:52px;border:1px solid var(--r-trait);border-radius:10px;background:var(--r-fond);
  color:var(--r-encre)}
.clb-resa-recherche input:focus{outline:2px solid var(--r-accent);outline-offset:2px;border-color:transparent}
.clb-resa-aide{font-size:.9rem;color:var(--r-doux);margin:.45rem 0 1rem}

.clb-resa-villes{display:flex;flex-wrap:wrap;gap:.5rem;position:relative}
.clb-resa-villes.est-repliee{max-height:var(--r-repli,8.4rem);overflow:hidden}
.clb-resa-ville{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  padding:.5rem 1rem;border-radius:999px;border:1px solid var(--r-trait);
  background:var(--r-fond);color:var(--r-encre);font-size:1rem;font-weight:600;cursor:pointer}
.clb-resa-ville:hover{border-color:var(--r-encre)}
.clb-resa-ville.is-on{background:var(--r-encre);border-color:var(--r-encre);color:#fff}
.clb-resa-ville:focus-visible{outline:2px solid var(--r-accent);outline-offset:2px}
.clb-resa-n{font-size:.82rem;font-weight:700;opacity:.72;font-variant-numeric:tabular-nums}
.clb-resa-villes-plus{margin:.6rem 0 0;padding:.45rem .95rem;min-height:44px;cursor:pointer;
  border:1px solid var(--r-trait);border-radius:999px;background:transparent;
  font-size:.92rem;font-weight:600;color:var(--r-encre)}
.clb-resa-villes-plus[hidden]{display:none}
.clb-resa-compte{margin:.9rem 0 0;font-size:.95rem;color:var(--r-doux);min-height:1.2em}

/* -------------------------------------------------------------- GRILLE */
.clb-resa-grille{display:grid;gap:1.4rem;grid-template-columns:repeat(4,1fr)}
/* La carte se dessine par son TRAIT, pas par une ombre : au repos, une bordure très fine
   suffit à la détacher du fond. Le survol ne fait que l'affirmer — on doit comprendre que
   c'est interactif sans voir un effet. */
.clb-resa-carte{display:flex;flex-direction:column;height:100%;background:var(--r-fond);
  border:1px solid var(--r-trait-fin);border-radius:var(--r-rayon);overflow:hidden;
  transition:box-shadow .15s ease,border-color .15s ease}
.clb-resa-carte:hover{border-color:rgba(29,27,25,.22);box-shadow:0 6px 18px -14px rgba(20,18,16,.35)}
/* Le clavier doit voir ce que la souris voit : la carte contient des liens. */
.clb-resa-carte:focus-within{border-color:rgba(29,27,25,.34);box-shadow:0 6px 18px -14px rgba(20,18,16,.35)}
.clb-resa-carte.est-cible{border-color:var(--r-accent);box-shadow:0 0 0 3px rgba(227,31,36,.16)}
@media (prefers-reduced-motion:reduce){ .clb-resa-carte,.clb-resa-btn{transition:none} }

/* 1. VILLE — l'information la plus visible, toujours a la meme place */
.clb-resa-ville-bandeau{margin:0;padding:.75rem 1rem .35rem;font-size:1.15rem;font-weight:800;
  letter-spacing:.03em;line-height:1.2;color:var(--r-encre)}
/* 2. salle — lisible, moins dominante que la ville */
.clb-resa-salle{margin:0;padding:0 1rem .7rem;font-size:1rem;color:var(--r-doux);line-height:1.35}
/* CARTOUCHE DE HAUTEUR IDENTIQUE sur les cartes : deux lignes réservées pour la ville,
   deux pour la salle — « SAINT-GERVAIS-LES-BAINS » ou « Salle de spectacle du collège
   Sainte-Marie » sur deux lignes ne décalent plus les affiches voisines.
   Borné à .clb-resa-carte : la vue « Où voir ce spectacle » de la fiche garde ses lignes. */
.clb-resa-carte .clb-resa-ville-bandeau{min-height:calc(2 * 1.2em + .75rem + .35rem)}
.clb-resa-carte .clb-resa-salle{min-height:calc(2 * 1.35em + .7rem)}
/* 3. affiche */
.clb-resa-affiche{display:block;position:relative;aspect-ratio:3/4;background:#efece6;overflow:hidden}
.clb-resa-affiche img{width:100%;height:100%;object-fit:cover;display:block}
.clb-resa-affiche-vide::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,#efece6 0 10px,#e7e3db 10px 20px)}
/* 4. titre */
.clb-resa-corps{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.clb-resa-cta{margin-top:auto;padding:0 1rem 1.05rem}
/* LE TITRE porte la carte : c'est le premier mot que l'œil lit après l'affiche. Plus
   compact et plus serré sur la date qu'il annonce — et AUCUNE hauteur réservée : sur un
   titre d'une ligne, les deux lignes réservées creusaient un trou sous le texte. Les
   cartes s'alignent par la grille et par le CTA ancré en bas, pas par des blocs vides. */
.clb-resa-titre{margin:0;padding:.75rem 1rem .1rem;font-size:1.05rem;font-weight:700;
  line-height:1.28;text-wrap:balance}
.clb-resa-titre a{color:var(--r-encre);text-decoration:none}
.clb-resa-titre a:hover{text-decoration:underline}
/* 5. dates + 6. boutons */
.clb-resa-dates{list-style:none;margin:0;padding:.6rem 0 0;display:flex;
  flex-direction:column;gap:.85rem}
.clb-resa-date{display:flex;flex-direction:column;gap:.45rem}
/* deux lignes DÉTERMINISTES : la date, puis l'horaire — la césure ne dépend plus de la
   largeur de la carte (« …2026 à 16 / h » mesuré sur une date longue) */
.clb-resa-quand{margin:0;padding:.15rem 1rem .85rem;font-size:1rem;font-weight:600;
  color:var(--r-encre);line-height:1.35}
.clb-resa-quand-jour,.clb-resa-quand-heure{display:block}
.clb-resa-quand-heure{white-space:nowrap}
/* hauteur de bouton identique a chaque palier : « Réserver à La Roche-sur-Foron »
   tient sur deux lignes sans decaler les CTA voisins */
/* LE BOUTON reste rouge, pleine largeur, immédiatement visible — mais il ne doit pas
   peser autant que l'affiche : hauteur et graisse ramenées d'un cran, la cible tactile
   restant confortable (≥ 48 px partout). */
.clb-resa-btn{display:flex;align-items:center;justify-content:center;width:100%;
  min-height:52px;padding:.55rem 1rem;border-radius:9px;background:var(--r-accent);color:#fff;
  text-decoration:none;font-weight:600;text-align:center;line-height:1.25;font-size:.98rem;
  letter-spacing:.004em;transition:filter .15s ease,box-shadow .15s ease}
.clb-resa-btn:hover{filter:brightness(.92);color:#fff;text-decoration:none;
  box-shadow:0 4px 12px -8px rgba(227,31,36,.55)}
.clb-resa-btn:focus-visible{outline:2px solid var(--r-encre);outline-offset:2px}
.clb-resa-btn-ville{font-size:1rem}
.clb-resa-btn-quand{font-size:.88rem;font-weight:600;opacity:.92}
/* Quand il n'y a VRAIMENT pas de lien : une mention discrète, pas un faux bouton — le
   cadre pointillé de la hauteur d'un CTA promettait un clic qui n'existait pas, et la
   césure y coupait « dispo / nible ». */
.clb-resa-bientot{margin:0;padding:.4rem 0 .1rem;color:var(--r-doux);
  font-size:.9rem;text-align:center;text-wrap:balance}

.clb-resa-vide,.clb-resa-vide-total{margin:2rem 0;font-size:1.05rem;color:var(--r-doux)}
/* L'adresse courte de la programmation affichée : une ligne de service, pas un appel à
   l'action — petite, grise, mais un vrai lien, sélectionnable et cliquable. */
.clb-resa-lien{margin:1.4rem 0 0;font-size:.86rem;color:var(--r-doux);line-height:1.5}
.clb-resa-lien[hidden]{display:none}
.clb-resa-lien a{color:var(--r-doux);text-decoration:underline;text-underline-offset:2px;
  word-break:break-all}
.clb-resa-lien a:hover{color:var(--r-encre)}
.clb-resa-lien a:focus-visible{outline:2px solid var(--r-accent);outline-offset:2px}
.clb-resa-reset{margin-left:.5rem;min-height:44px;padding:.45rem 1rem;border-radius:999px;
  border:1px solid var(--r-trait);background:transparent;font-weight:600;cursor:pointer;
  color:var(--r-encre)}

@media (max-width:1279px){ .clb-resa-grille{grid-template-columns:repeat(3,1fr)} }
@media (max-width:1023px){ .clb-resa-btn{min-height:54px} }
@media (max-width:899px){  .clb-resa-grille{grid-template-columns:repeat(2,1fr)} }
@media (max-width:599px){
  .clb-resa-grille{grid-template-columns:1fr;gap:1.1rem}
  .clb-resa-ville-bandeau{font-size:1.1rem}
  .clb-resa-affiche{aspect-ratio:4/3}
}

/* ------------------------------- LA MÊME CARTE, CONTEXTE DÉJÀ CONNU (page d'une salle)
   Sur la page d'une salle, la ville et le nom de la salle ne sont plus rendus : le titre
   de la page les porte déjà. Ce n'est pas une autre carte — c'est la même, sans le
   cartouche de contexte. La grille s'adapte à la largeur RÉELLE du panneau, plus étroit
   que la pleine page de la programmation : 4 colonnes y écrasaient les titres. */
.clb-resa-carte--salle .clb-resa-titre{padding-top:.7rem}
/* Le CTA d'une page salle est plus compact : la carte y est plus étroite et la page ne
   propose qu'une seule action. Le libellé reste centré et la cible tactile confortable. */
.clb-resa-carte--salle .clb-resa-cta{padding:0 .9rem .9rem}
.clb-resa-carte--salle .clb-resa-btn{min-height:46px;padding:.45rem .9rem;font-size:.95rem;line-height:1.2}
.clb-resa-carte--salle .clb-resa-btn br{display:none}   /* filet : wpautop reste imprévisible */
@media (max-width:599px){ .clb-resa-carte--salle .clb-resa-btn{min-height:50px} }
.clb-lieu-programme-grille{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
@media (max-width:599px){ .clb-lieu-programme-grille{grid-template-columns:1fr} }

/* --------------------------------------------- détail : la fiche CANONIQUE fait foi
   La vue « Où voir ce spectacle ? » a été retirée le 14/08 : la route détail redirige
   en 301 vers le permalien du spectacle. Ne restent ici que le retour programmation
   et le message des slugs sans date, plus la mise en évidence #rep-… de la grille. */
.clb-resa-retour{margin:0 0 1.2rem;font-size:1rem}
.clb-resa-retour a{color:var(--r-encre);font-weight:600}
.clb-resa-date.est-cible .clb-resa-quand{color:var(--r-accent)}
.clb-resa-date.est-cible{outline:2px solid var(--r-accent);outline-offset:6px;border-radius:8px}
.clb-resa-origine{margin:2rem 0 0;font-size:.85rem;color:var(--r-doux)}