/* Site public — catalogue et fiche événement.
   Dépend de jetons.css et composants.css. Mêmes jetons que l'espace famille :
   le catalogue reste en « Registre » (il liste plusieurs événements), la fiche
   prend l'ambiance de son événement. Aucune couleur en dur. */

/* Une seule largeur pour tout le site, déclarée ici et nulle part ailleurs :
   trois valeurs voisines dans trois règles se décalent d'un pixel au premier
   ajustement, et la barre ne s'aligne plus sur le contenu. 72rem tient une
   grille de trois cartes sans étirer le texte au-delà de ce qui se lit. */
.site-public { background: var(--ef-fond); --sp-largeur: 72rem; }

/* --- Barre --------------------------------------------------------------- */
.sp-barre { background: var(--ef-surface); border-bottom: 1px solid var(--ef-bordure); }
.sp-barre .dedans, .sp-pied .dedans, .sp-rappel .dedans,
.sp-barre-filtres .dedans {
  max-width: var(--sp-largeur); margin: 0 auto; padding: 14px var(--e-5);
  display: flex; align-items: center; gap: var(--e-5); flex-wrap: wrap;
}
.sp-barre .marque { text-decoration: none; color: var(--ef-encre); }
.sp-barre nav { display: flex; gap: var(--e-4); }
.sp-barre nav a { font-size: var(--t-secondaire); text-decoration: none; }
.sp-barre nav a:hover { text-decoration: underline; }
.sp-acces { margin-left: auto; display: flex; align-items: center; gap: var(--e-3);
  font-size: var(--t-secondaire); }
.sp-btn { display: inline-block; padding: 8px 14px; border-radius: var(--r-m);
  background: var(--ef-accent); color: var(--ef-accent-texte);
  text-decoration: none; font-weight: 600; }
body.site-public a.sp-btn { color: var(--ef-accent-texte); }

/* --- Contenu ------------------------------------------------------------- */
.sp-contenu { max-width: var(--sp-largeur); margin: 0 auto;
  padding: var(--e-6) var(--e-5); }
.sp-entete-page h1 { font-size: 28px; margin: 0 0 var(--e-2); }
.sp-entete-page p { max-width: 42rem; color: var(--ef-encre-doux); margin: 0; }
.sp-section { font-size: var(--t-titre-m); margin: var(--e-6) 0 var(--e-3); }
.sp-section:first-child { margin-top: 0; }
.sp-section .chiffre { font-size: var(--t-libelle); color: var(--ef-encre-doux);
  font-weight: 400; }

/* --- Filtres ------------------------------------------------------------- */
.sp-filtres { display: flex; gap: var(--e-2); flex-wrap: wrap; margin: var(--e-5) 0; }
.sp-filtre { padding: 7px 13px; border-radius: var(--r-m); text-decoration: none;
  font-size: var(--t-secondaire); font-weight: 600;
  border: 1px solid var(--ef-bordure); color: var(--ef-encre); }
.sp-filtre.actif { background: var(--ef-encre); border-color: var(--ef-encre); color: #fff; }
body.site-public a.sp-filtre.actif { color: #fff; }

/* --- Catalogue ----------------------------------------------------------- */
.sp-grille { display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.sp-carte { display: flex; flex-direction: column; background: var(--ef-surface);
  border: 1px solid var(--ef-bordure); border-radius: var(--r-l); overflow: hidden; }
.sp-visuel { position: relative; display: block; aspect-ratio: 3 / 2;
  background: color-mix(in srgb, var(--ef-encre) 8%, transparent); }
.sp-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-visuel-vide { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; padding: var(--e-4); text-align: center;
  font-size: var(--t-secondaire); color: var(--ef-encre-doux); }
.sp-visuel .pastille { position: absolute; top: 10px; left: 10px;
  background: var(--ef-surface); }
.sp-corps { padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); }
.sp-surtitre { font-family: var(--chiffres); font-size: var(--t-meta);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ef-encre-doux); margin: 0; }
.sp-corps h2 { font-size: var(--t-titre-s); margin: 0; }
.sp-corps h2 a { text-decoration: none; color: var(--ef-encre); }
.sp-soustitre, .sp-extrait { font-size: var(--t-secondaire); color: var(--ef-encre-doux);
  margin: 0; }
.sp-extrait p { margin: 0; }
.sp-prix { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-2); margin: var(--e-2) 0 0; }
.sp-places { font-size: var(--t-libelle); color: var(--ef-encre-doux); }

/* --- Fiche : bandeau ----------------------------------------------------- */
.sp-hero { position: relative; background: var(--ef-encre); color: #fff;
  overflow: hidden; }
/* La photo reste un fond : le texte doit rester lisible quelle que soit
   l'image chargée, sans quoi le contraste dépend de la photo (ENF-7.8). */
.sp-hero-fond { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .28; }
.sp-hero-dedans { position: relative; max-width: var(--sp-largeur); margin: 0 auto;
  padding: var(--e-6) var(--e-5); display: grid; gap: var(--e-5);
  grid-template-columns: 1.6fr 1fr; align-items: start; }
.sp-hero h1 { font-size: 34px; margin: var(--e-2) 0; line-height: 1.1; }
.sp-hero-meta { display: flex; align-items: center; gap: var(--e-3); margin: 0;
  font-size: var(--t-libelle); }
.sp-hero-soustitre { font-size: var(--t-titre-s); margin: 0 0 var(--e-3); opacity: .9; }
.sp-hero-chapeau { max-width: 34rem; opacity: .92; }
.sp-hero-chapeau p { margin: 0 0 var(--e-2); }

.sp-faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--e-4); margin: var(--e-5) 0 0; }
.sp-faits dt { font-family: var(--chiffres); font-size: var(--t-meta);
  letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.sp-faits dd { margin: 3px 0 0; font-weight: 600; }

.sp-inscription { background: var(--ef-surface); color: var(--ef-encre);
  border-radius: var(--r-l); padding: var(--e-5); display: flex;
  flex-direction: column; gap: var(--e-3); }
.sp-tarif { display: flex; align-items: baseline; gap: var(--e-2); margin: 0; }
.sp-tarif strong { font-size: 26px; }
.sp-tarif span { font-size: var(--t-secondaire); color: var(--ef-encre-doux); }
.sp-note { font-size: var(--t-libelle); color: var(--ef-encre-doux); margin: 0; }

/* --- Fiche : corps ------------------------------------------------------- */
.sp-colonnes { display: grid; gap: var(--e-6); grid-template-columns: 1.4fr 1fr;
  align-items: start; }
.sp-texte { max-width: 40rem; }
.sp-texte h2 { font-size: var(--t-titre-m); margin: var(--e-5) 0 var(--e-2); }
.sp-texte h3 { font-size: var(--t-titre-s); margin: var(--e-4) 0 var(--e-2); }
.sp-texte p, .sp-texte ul, .sp-texte ol { margin: 0 0 var(--e-3); }
.sp-inclus { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.sp-inclus li { border: 1px solid var(--ef-bordure); border-radius: var(--r-m);
  padding: 10px 13px; font-size: var(--t-secondaire); background: var(--ef-surface); }

.sp-galerie { display: grid; gap: var(--e-2);
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.sp-galerie figure { margin: 0; }
.sp-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-m); display: block; }
.sp-galerie figcaption { font-size: var(--t-meta); color: var(--ef-encre-doux);
  margin-top: 4px; }

/* --- Rappel et pied ------------------------------------------------------ */
.sp-rappel { background: var(--ef-encre); color: #fff; margin-top: var(--e-6); }
.sp-rappel .dedans { justify-content: space-between; }
.sp-rappel p { margin: 0; font-weight: 600; }
.sp-rappel .ef-btn { width: auto; padding: 12px var(--e-5); }

.sp-pied { border-top: 1px solid var(--ef-bordure); margin-top: var(--e-6); }
.sp-pied .dedans { align-items: flex-start; gap: var(--e-6); padding-bottom: var(--e-6); }
.sp-pied p { font-size: var(--t-libelle); color: var(--ef-encre-doux); margin: 4px 0 0;
  max-width: 32rem; }

@media (max-width: 720px) {
  .sp-hero-dedans, .sp-colonnes { grid-template-columns: 1fr; }
  .sp-hero h1 { font-size: 26px; }
  .sp-acces { margin-left: 0; width: 100%; }
}

/* --- Barre : l'entrée courante, et les deux boutons ----------------------- */
.sp-barre nav a.actif {
  color: var(--ef-encre); font-weight: 600;
  border-bottom: 2px solid var(--ef-accent); padding-bottom: 2px;
}
/* « Se connecter » est un chemin, « Créer un compte » une décision : le
   premier se lit en creux, le second en plein. */
.sp-btn.creux {
  background: transparent; color: var(--ef-encre);
  border: 1px solid var(--ef-bordure);
}
body.site-public a.sp-btn.creux { color: var(--ef-encre); }
.sp-fil {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-secondaire); color: var(--ef-encre-doux);
}
.sp-fil [aria-current] { color: var(--ef-encre); font-weight: 600; }

/* --- Rangée de filtres et de tri ----------------------------------------- */
.sp-barre-filtres {
  border-top: 1px solid var(--ef-bordure);
  border-bottom: 1px solid var(--ef-bordure);
  background: var(--ef-surface);
}
.sp-barre-filtres .dedans { gap: var(--e-3); }
.sp-barre-filtres .sp-filtres { margin: 0; }
.sp-tri {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  font-family: var(--chiffres); font-size: var(--t-libelle);
  color: var(--ef-encre-doux);
}
.sp-tri select {
  font: inherit; padding: 5px 8px; border-radius: 4px;
  border: 1px solid var(--ef-bordure); background: var(--ef-surface);
  color: var(--ef-encre);
}

/* --- Cartes du catalogue -------------------------------------------------- */
.sp-carte .sp-prix, .sp-carte .sp-appel {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e-2); margin: var(--e-3) 0;
  padding-top: var(--e-3); border-top: 1px solid var(--ef-bordure);
}
.sp-appel a { font-weight: 600; font-size: var(--t-secondaire); }
.sp-places { font-size: var(--t-libelle); color: var(--ef-encre-doux); }
.sp-places.attention { color: var(--statut-attention); }

/* --- Fiche : bandeau ------------------------------------------------------ */
.sp-hero-type {
  font-family: var(--chiffres); font-size: var(--t-meta);
  letter-spacing: .1em; text-transform: uppercase; opacity: .8;
}
/* Le sous-titre porte la police de titre de l'ambiance : c'est la seule
   phrase de la page écrite pour être entendue, pas lue. */
.sp-hero-soustitre { font-family: var(--ef-titre), "IBM Plex Sans", sans-serif;
  font-style: italic; }
.sp-hero-faits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--e-4); margin: var(--e-5) 0 0;
}
.sp-hero-faits dt {
  font-family: var(--chiffres); font-size: var(--t-meta);
  letter-spacing: .08em; text-transform: uppercase; opacity: .7;
}
.sp-hero-faits dd { margin: 3px 0 0; font-weight: 600; }

.sp-conditions {
  margin: 0; padding-top: var(--e-3);
  border-top: 1px solid var(--ef-bordure);
}
.sp-conditions > div {
  display: flex; justify-content: space-between; gap: var(--e-2);
  padding: 4px 0; font-size: var(--t-secondaire);
}
.sp-conditions dt { color: var(--ef-encre-doux); }
.sp-conditions dd { margin: 0; font-weight: 600; }

/* --- Fiche : corps -------------------------------------------------------- */
.sp-section-note {
  font-family: var(--chiffres); font-size: var(--t-libelle);
  font-weight: 400; color: var(--ef-encre-doux);
}
/* Une question avant de s'inscrire n'est pas une note de bas de page : c'est
   souvent le dernier obstacle avant la décision. */
.sp-question {
  margin-top: var(--e-5); padding: var(--e-4);
  border-left: 3px solid var(--ef-accent);
  background: var(--ef-surface); border-radius: var(--r-m);
}
.sp-question .titre { margin: 0 0 6px; font-weight: 700; }
.sp-question p { margin: 0; font-size: var(--t-secondaire); }

.sp-galerie { position: relative; }
.sp-galerie figure.vedette { grid-column: 1 / -1; }
.sp-galerie figure.vedette img { aspect-ratio: 3 / 2; }
.sp-galerie-reste {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; border-radius: var(--r-m);
  background: var(--ef-encre); color: var(--ef-fond);
  font-family: var(--chiffres); font-weight: 700;
}

/* --- Rappel du bas -------------------------------------------------------- */
.sp-rappel .titre {
  font-family: var(--ef-titre), "IBM Plex Sans", sans-serif;
  font-size: var(--t-titre-m); text-transform: uppercase; margin: 0;
}
.sp-rappel .detail {
  font-weight: 400; font-size: var(--t-secondaire); opacity: .8; margin: 4px 0 0;
}

/* --- Pied ----------------------------------------------------------------- */
.sp-pied .dedans { gap: var(--e-6); }
.sp-pied nav { display: flex; flex-direction: column; gap: 6px; }
.sp-pied nav a { font-size: var(--t-libelle); }

/* SP4 — « Lire la suite » : le résumé seul au téléphone. */
.sp-suite > summary {
  cursor: pointer; font-weight: 600; margin: var(--e-2) 0;
  min-height: var(--touche-min); display: flex; align-items: center;
}
@media (min-width: 52rem) {
  .sp-suite > summary { display: none; }
}