/* ==========================================================================
   Compagnie Logos — accueil et archive des spectacles
   ========================================================================== */

/* --- Slider --------------------------------------------------------------
   7 s par slide, fondu 900 ms (valeurs du handoff), pastilles à gauche,
   pas de flèches. La boucle est le bon comportement ici, contrairement à la
   galerie de fiche : le slider tourne. */

.accueil-slider {
  position: relative;
  margin-top: 0;   /* le padding uniforme de .logos-page porte les 54 px */
  padding: 0;
  display: grid;   /* toutes les diapos occupent la même cellule : le fondu
                      se superpose au lieu d'empiler, plus aucun décalage */
}

.accueil-slide[hidden] { display: none; }

.accueil-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;   /* anneau à gauche, texte à droite */
  gap: 48px;
  align-items: center;
  opacity: 1;
  transition: opacity 900ms ease;
}

.accueil-slide__photo { order: -1; }
.accueil-slide.est-fondu { opacity: 0; }

/* Colonne texte : à droite de l'anneau. La barre repère de la charte est un
   court trait vertical accolé à l'extrait seulement — pas un filet qui court
   sur toute la hauteur du bloc. */
.accueil-slide__textes { text-align: left; }

.accueil-slide__surtitre {
  font-family: var(--font-sous-titre);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.accueil-slide__titre { margin: 0; }

.accueil-slide__titre a {
  display: inline-block;
  font-family: var(--font-special);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 40px);
  letter-spacing: 1px;
  line-height: 1.15;
  text-transform: uppercase;
  padding: 10px 24px 8px;
  text-decoration: none;
}

.accueil-slide__annee {
  font-family: var(--font-texte);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  margin: 14px 0 0;
}

/* Prochaine date à venir du spectacle affiché : remontée depuis l'agenda,
   cliquable vers celui-ci. */
.accueil-slide__prochaine {
  font-family: var(--font-texte);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  margin: 6px 0 0;
}
.accueil-slide__prochaine a { color: inherit; }

.accueil-slide__extrait {
  font-family: var(--font-texte);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.75;
  margin: 14px 0 0;
  padding-left: 16px;
  border-left: 6px solid var(--logos-noir);   /* barre repère, hauteur du texte */
  max-width: 52ch;
}

.accueil-slide__photo {
  display: block;
  aspect-ratio: 406.45 / 686.55;
  max-width: 340px;
  justify-self: center;
  width: 100%;
  background-position: center;
  background-size: cover;
}


/* Indicateurs : de petits traits, le courant en noir. */
.accueil-slider__traits {
  grid-area: 2 / 1;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 26px;
}
.accueil-slider__traits [role="tab"] {
  width: 30px;
  height: 9px;   /* plus hautes : cible de clic et visibilité */
  padding: 0;
  border: 0;
  background: #C9D0D3;
  cursor: pointer;
}
.accueil-slider__traits [aria-selected="true"] { background: var(--logos-noir); }

/* --- Entrées de rubrique -------------------------------------------------- */

.accueil-entrees {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.accueil-entree {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 24px;
  box-shadow: inset 0 0 0 2px var(--logos-noir);
  text-decoration: none;
}

.accueil-entree__titre {
  font-family: var(--font-sous-titre);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.accueil-entree__picto { width: 14px; height: 16px; flex: none; }

/* Survol : règle globale — aplat encre opaque, texte blanc, bascule nette. */
.accueil-entree:hover, .accueil-entree:focus-visible { background: var(--logos-encre); color: var(--logos-blanc); }

/* --- Archive des spectacles ------------------------------------------------ */

.archive-spectacles__titre { font-size: clamp(42px, 7vw, 72px); text-align: center; margin: 0 0 10px; }

.archive-spectacles__section {
  display: flex;
  align-items: center;
  gap: 14px;
  /* hors aplat : Oswald (la Logos Sans n'existe que sur aplat de couleur) */
  font-family: var(--font-sous-titre);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 48px 0 0;
}

.archive-spectacles__puce { width: 15px; height: 17px; }

.archive-spectacles__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 64px;
  margin-top: 30px;
}

.carte-spectacle__lien {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 24px;
  align-items: start;
  text-decoration: none;
  color: inherit;
}

.carte-spectacle__photo {
  aspect-ratio: 406.45 / 686.55;
  background-position: center;
  background-size: cover;
}

/* Cartes spectacles : bichromie complète visible en continu (règle globale,
   logos-amendements.css). L'aplat du titre reste la couleur claire du
   cycle, sans changement au survol (variante sombre annulée le 2026-08-20). */

.carte-spectacle__photo--vide {
  background: var(--logos-encre);
  -webkit-mask-image: url(../svg/anneau-masque.png);
          mask-image: url(../svg/anneau-masque.png);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.carte-spectacle__titre {
  display: inline-block;
  /* Logos Sans : autorisée ici, le titre est sur l'aplat du cycle. */
  font-family: var(--font-special);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.45;
  padding: 8px 16px 5px;
  margin: 0;
}

.carte-spectacle__annee {
  font-family: var(--font-texte);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  margin: 12px 0 0;
}

.carte-spectacle__resume {
  font-family: var(--font-texte);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.75;
  margin: 8px 0 0;
}

/* Spectacles passés : repliés par défaut, un clic pour ouvrir. */
.archive-spectacles__passes > summary {
  cursor: pointer;
  list-style: none;
  color: var(--logos-encre);
}
.archive-spectacles__passes > summary::-webkit-details-marker { display: none; }
/* Triangle : fermé = pointe à droite (►), ouvert = pointe en bas (▼). */
.archive-spectacles__passes[open] > summary .archive-spectacles__puce { transform: rotate(90deg); }
.archive-spectacles__passes .archive-spectacles__puce { transition: transform 200ms; }

/* --- Mobile ----------------------------------------------------------------- */

@media (max-width: 1000px) {
  .accueil-slide { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
  .accueil-slide__photo { max-width: 280px; }
  .accueil-slide__textes { text-align: left; }

  .accueil-entrees { grid-template-columns: 1fr; gap: 14px; margin-top: 44px; }

  .archive-spectacles__grille { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 780px) {
  .accueil-slide__photo { max-width: 220px; }
    .archive-spectacles__section { font-size: 26px; }
  .carte-spectacle__lien { grid-template-columns: 110px 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .accueil-slide { transition: none; }
}