/* ==========================================================================
   AU VENT DANS LES BRANCHES — Page Évènements
   --------------------------------------------------------------------------
   Ce fichier ne sert QUE sur evenements.html.
   Le bloc titre, la vague et les sous-titres à petite fleur viennent de
   page-generaliste.css, qui est chargé avant celui-ci.

   Tout ce qui suit décrit UNE carte d'évènement, sans jamais dépendre du
   contenu d'un évènement particulier : ajouter une carte dans le HTML suffit,
   il n'y a rien à toucher ici.
   ========================================================================== */


/* ==========================================================================
   ZONE DE CONTENU
   --------------------------------------------------------------------------
   Fond blanc, comme les autres pages généralistes : c'est ce contraste avec
   le crème du bloc titre qui détache le haut de la page, et c'est là-dessus
   que la vague vient se poser. C'est aussi ce qui fait ressortir l'en-tête
   crème des cartes fermées.
   ========================================================================== */

.evenements {
  background-color: var(--blanc);
  /* Le retrait du haut doit rester supérieur au plongeon de la vague (24 px)
     pour qu'elle ne morde pas sur la première carte. */
  padding-block: var(--espace-l) var(--espace-l);
}

.evenements__liste {
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
}


/* ==========================================================================
   CARTE D'ÉVÈNEMENT
   --------------------------------------------------------------------------
   Deux zones de couleurs différentes : l'en-tête sur le crème de la charte,
   le détail sur blanc. C'est ce changement de couleur qui marque l'ouverture
   de la carte, et c'est sur cette ligne que se pose la plantouille.
   ========================================================================== */

.evenement {
  background-color: var(--blanc);
  border: 1px solid var(--jaune-deco);
  /* Arrondi généreux, celui que la charte réserve aux grandes images : la
     carte est large, un rayon de 12 px s'y perdrait. */
  border-radius: var(--rayon-image);
  /* Empêche l'en-tête et la plantouille de dépasser des angles arrondis. */
  overflow: hidden;
}

/* Le titre ne sert qu'à porter le bouton et la plantouille : il ne doit
   apporter ni marge ni taille de police propre.
   « relative » sert de repère à la plantouille, posée en absolu. */
.evenement__entete {
  position: relative;
  margin: 0;
  background-color: var(--fond);
  font-size: inherit;
  font-weight: inherit;
}

/* --- La barre cliquable ---
   C'est un vrai <button> : il est atteignable au clavier et annoncé comme
   dépliable par les lecteurs d'écran (aria-expanded dans le HTML).
   On neutralise donc l'apparence par défaut d'un bouton. */
.evenement__bouton {
  display: flex;
  align-items: center;
  gap: var(--espace-m);
  width: 100%;
  padding: var(--espace-m);
  /* Passe devant la plantouille : si un évènement a un titre ou des
     informations plus longs que celui d'aujourd'hui, le texte reste lisible
     par-dessus le décor au lieu d'être mangé par lui. */
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.evenement__bouton:hover .evenement__titre,
.evenement__bouton:focus-visible .evenement__titre {
  text-decoration: underline;
}


/* --- Plantouille ---
   Posée sur la ligne où l'en-tête crème rencontre le blanc du détail : elle
   a l'air de pousser juste au-dessus de cette limite. Le léger décalage du
   bas la décolle du trait, sans quoi ses cailloux semblaient s'y écraser.
   Elle garde la même position dans les deux états, carte fermée comme
   ouverte.
   « pointer-events: none » la rend transparente au clic : sans cela, elle
   masquerait une partie du bouton.
   Elle est purement décorative, d'où le décalage à droite qui la tient à
   l'écart du texte. */
.evenement__plante {
  position: absolute;
  right: var(--espace-l);
  bottom: var(--espace-xs);
  width: 110px;
  /* 30 % de transparence : les cailloux gris étaient plus appuyés que tout
     le reste de la carte pour un élément purement décoratif. */
  opacity: 0.7;
  pointer-events: none;
}


/* --- Pastille de date ---
   Fond blanc sur l'en-tête crème et liseré jaune. La largeur est fixe pour
   que toutes les cartes soient alignées, quelle que soit la longueur du
   mois. */
.evenement__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 116px;
  padding: var(--espace-s) var(--espace-xs);
  background-color: var(--blanc);
  border: 1px solid var(--jaune-deco);
  border-radius: var(--rayon-image);
  font-family: var(--titres);
  line-height: 1.2;
  text-align: center;
}

/* Le filet entre le quantième et le mois est la bordure basse du jour, et
   non un élément séparé : rien à ajouter dans le HTML en créant un
   évènement. */
.evenement__jour {
  width: 100%;
  padding-bottom: var(--espace-xs);
  margin-bottom: var(--espace-xs);
  border-bottom: 1px solid var(--jaune-deco);
  font-weight: var(--normal);
  font-size: 2.75rem;
}

/* Le mois est écrit abrégé dans le HTML et mis en majuscules ici : une chose
   de moins à penser en ajoutant un évènement. */
.evenement__mois {
  font-weight: var(--moyen);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.evenement__annee {
  font-size: 0.95rem;
}


/* --- Titre et informations courtes ---
   « auto » sur la marge droite pousse le + à l'extrémité de la carte. */
.evenement__identite {
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
  margin-right: auto;
}

.evenement__titre {
  font-family: var(--titres);
  font-weight: var(--semigras);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.25;
}

/* Les trois informations se mettent en ligne quand il y a la place, et
   passent à la ligne toutes seules sur un écran étroit. */
.evenement__metas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs) var(--espace-m);
  font-size: 1rem;
}

.evenement__meta {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
}

.evenement__icone {
  width: 28px;
  flex-shrink: 0;
}


/* --- Le + / − ---
   Dessiné en CSS avec deux barres : la barre verticale disparaît quand la
   carte est ouverte, il ne reste que le trait horizontal du −.
   Aucune image à charger, et le signe suit la couleur de la charte.
   « align-self » le cale en haut, comme sur la maquette. */
.evenement__signe {
  position: relative;
  align-self: flex-start;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.evenement__signe::before,
.evenement__signe::after {
  content: "";
  position: absolute;
  background-color: var(--cta);
}

.evenement__signe::before {
  top: 11px;
  left: 0;
  right: 0;
  height: 2px;
}

.evenement__signe::after {
  top: 0;
  bottom: 0;
  left: 11px;
  width: 2px;
  transition: transform 0.2s ease;
}

/* « scaleY(0) » écrase la barre verticale depuis son centre : le + devient
   un − sans que rien ne bouge autour. */
.evenement__bouton[aria-expanded="true"] .evenement__signe::after {
  transform: scaleY(0);
}


/* ==========================================================================
   PANNEAU DÉPLIÉ
   --------------------------------------------------------------------------
   Il est masqué par l'attribut « hidden » du HTML, que le JavaScript retire
   à l'ouverture. Avantage : sans JavaScript, le panneau reste simplement
   fermé, et rien n'est cassé.
   Son fond blanc tranche avec l'en-tête crème : c'est ce qui signale qu'on
   est passé de l'annonce au détail.
   ========================================================================== */

/* Fermé par défaut : c'est le CSS qui porte l'état, plus l'attribut « hidden ». */
.evenement__panneau {
  display: none;
  padding: var(--espace-m);
  background-color: var(--blanc);
}

.evenement__panneau.est-ouvert {
  display: block;
  animation: deplier 0.28s ease both;
}


/* --- Image et description ---
   Flexbox et non grille : quand la carte n'a pas d'image, la description
   occupe naturellement toute la largeur. Il n'y a donc rien à changer ici
   selon qu'un évènement a une illustration ou non. */
.evenement__presentation {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-m);
}

.evenement__image {
  flex: 0 0 320px;
  /* Hauteur imposée et « cover » : les photos d'évènements n'auront pas
     toutes le même format, la carte garde malgré tout la même allure. */
  height: 210px;
  object-fit: cover;
  border-radius: var(--rayon);
}

.evenement__description {
  flex: 1;
  margin: 0;
}


/* --- Informations pratiques et contact --- */
.evenement__infos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espace-l);
  margin-top: var(--espace-m);
  padding-top: var(--espace-m);
  border-top: 1px solid var(--jaune-deco);
}

/* Filet vertical entre les deux colonnes. Il est porté par la seconde et
   non par la première : ainsi il n'apparaît pas si un évènement n'a qu'un
   seul bloc, et il disparaît tout seul quand les colonnes s'empilent. */
.evenement__bloc + .evenement__bloc {
  padding-left: var(--espace-l);
  border-left: 1px solid var(--jaune-deco);
}

.evenement__sous-titre {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  margin: 0 0 var(--espace-s);
  font-family: var(--corps);
  font-weight: var(--gras);
  font-size: 1.05rem;
}

/* Le texte est aligné sur le titre et non sur l'icône : le retrait reprend
   la largeur de l'icône plus l'écart qui la sépare du texte. */
.evenement__bloc p {
  margin: 0;
  padding-left: calc(28px + var(--espace-xs));
  /* Une adresse e-mail longue doit pouvoir se couper plutôt que d'élargir
     la colonne. */
  overflow-wrap: anywhere;
}

/* Les cartes d'atelier empilent plusieurs paragraphes dans le bloc pratique
   — adresse, tarif, réservation. Sans cet écart ils se lisent comme un seul
   pavé. Les blocs à un seul paragraphe ne sont pas concernés. */
.evenement__bloc p + p {
  margin-top: var(--espace-s);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Tablette --- */
@media (max-width: 900px) {

  /* La plantouille est purement décorative : sous cette largeur, elle
     empiéterait sur le titre. On la retire plutôt que de la rétrécir
     jusqu'à la rendre illisible. */
  .evenement__plante {
    display: none;
  }

  .evenement__bouton {
    padding: var(--espace-s);
  }

  /* L'image passe au-dessus de la description : à moins de 300 px de large,
     le texte devenait illisible à côté d'elle. */
  .evenement__presentation {
    flex-direction: column;
  }

  .evenement__image {
    flex: none;
    width: 100%;
    height: 240px;
  }

  .evenement__infos {
    grid-template-columns: 1fr;
    gap: var(--espace-m);
  }

  /* Empilés, les deux blocs sont séparés par un filet horizontal. */
  .evenement__bloc + .evenement__bloc {
    padding-left: 0;
    padding-top: var(--espace-m);
    border-left: 0;
    border-top: 1px solid var(--jaune-deco);
  }
}

/* --- Mobile --- */
@media (max-width: 600px) {

  /* Pastille plus petite et écart resserré : à 116 px, il ne restait plus
     assez de place au titre, qui se coupait en trop de lignes.
     « flex-start » cale la date en haut : le titre passant souvent sur deux
     lignes ici, centrée, elle flottait au milieu de la carte. */
  .evenement__bouton {
    align-items: flex-start;
    gap: var(--espace-s);
    padding: var(--espace-s) var(--espace-xs);
  }

  .evenement__date {
    width: 82px;
    padding-inline: 2px;
  }

  .evenement__jour {
    font-size: 1.9rem;
  }

  /* Assez petit pour que le plus long mois abrégé tienne dans la pastille
     sans la toucher. Le letter-spacing est retiré pour la même raison. */
  .evenement__mois {
    font-size: 0.8rem;
    letter-spacing: 0;
  }

  .evenement__annee {
    font-size: 0.8rem;
  }

  /* Les trois informations s'empilent : côte à côte, elles se coupaient au
     milieu des mots. */
  .evenement__metas {
    flex-direction: column;
    gap: var(--espace-xs);
    font-size: 0.95rem;
  }

  /* Icône calée sur la première ligne : quand le lieu passe sur deux lignes,
     centrée, elle se retrouvait à cheval entre les deux. */
  .evenement__meta {
    align-items: flex-start;
  }

  .evenement__icone {
    width: 24px;
  }

  .evenement__panneau {
    padding: var(--espace-s);
  }

  /* Informations pratiques et Contact sont centrés : empilés sur toute la
     largeur de l'écran, alignés à gauche, ils flottaient dans le vide.
     Le retrait qui alignait le texte sous le titre n'a plus lieu d'être. */
  .evenement__sous-titre {
    justify-content: center;
  }

  .evenement__bloc p {
    padding-left: 0;
    text-align: center;
  }

  .evenement__image {
    height: 180px;
  }
}