/* ============================================================
   Les deux offres de la page evenements
   09/11/2026
   ------------------------------------------------------------
   Chargee apres copy-evenement.css, avant mobile.css.

   Demande de Thomas, appel du 09/11 : « il faudrait qu'il y ait deux
   sections, une diner prive et l'autre collaboration et experience
   exclusive. On clique dessus pour voir le detail. » Et, explicitement,
   PAS de redirection vers d'autres pages : le detail se deplie sur place.

   <details> NATIF plutot qu'un accordeon en JavaScript. C'est accessible
   par defaut, ca s'ouvre au clavier, le contenu reste indexable meme
   replie, et ca survit a un script casse. Un accordeon maison aurait
   demande du code pour faire moins bien.

   L'attribut name="offre" sur les deux rend l'ouverture exclusive :
   ouvrir l'une referme l'autre, sans une ligne de JavaScript.

   Pour tout annuler : retirer le <link> d'evenement.html et supprimer ce
   fichier. Les deux blocs redeviennent des <details> bruts, deplies au
   clic, moches mais fonctionnels.
   ============================================================ */

.offres{
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  border-block-start: 1px solid var(--line-dark, rgba(240, 234, 223, 0.14));
}

.offre{
  border-block-end: 1px solid var(--line-dark, rgba(240, 234, 223, 0.14));
}

/* --- La ligne cliquable ------------------------------------------------
   list-style: none et ::-webkit-details-marker retirent le triangle par
   defaut, qui n'existe pas dans le dessin du site. Le signe est redessine
   plus bas. */
.offre > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
  cursor: pointer;
  list-style: none;
  transition: color 0.35s var(--ease, ease);
}

.offre > summary::-webkit-details-marker{ display: none; }

.offre > summary:focus-visible{
  outline: 2px solid var(--brass-400);
  outline-offset: 4px;
}

@media (hover: hover){
  .offre > summary:hover{ color: var(--brass-400); }
}

.offre-nom{
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* --- Le signe plus, qui devient moins a l'ouverture --------------------
   Deux traits croises : le vertical disparait quand le bloc s'ouvre. Plus
   lisible qu'un chevron a cette taille, et ca dit « deplier » plutot que
   « aller ailleurs », ce qui est exactement la difference que Thomas a
   demandee. */
.offre-signe{
  position: relative;
  flex: 0 0 auto;
  inline-size: 1.1rem;
  block-size: 1.1rem;
}

.offre-signe::before,
.offre-signe::after{
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: var(--brass-400);
  transition: transform 0.35s var(--ease, ease), opacity 0.35s var(--ease, ease);
}

.offre-signe::after{ transform: rotate(90deg); }

.offre[open] .offre-signe::after{
  transform: rotate(0deg);
  opacity: 0;
}

/* --- Le corps ----------------------------------------------------------
   Pas d'animation de hauteur : <details> ne l'anime pas nativement et la
   simuler demanderait du JavaScript, pour un gain nul ici. Un fondu du
   contenu suffit a dire que quelque chose s'est ouvert. */
.offre-corps{
  padding-block-end: clamp(1.5rem, 3vw, 2.4rem);
  max-inline-size: 62ch;
}

.offre[open] .offre-corps{
  animation: offreOuvre 0.45s both var(--ease, ease);
}

@keyframes offreOuvre{
  from{ opacity: 0; transform: translateY(-0.4rem); }
  to{ opacity: 1; transform: none; }
}

/* La mention tarifaire est un fait, pas un argument : elle se lit en
   retrait. Thomas : « je n'ai pas envie d'afficher des prix sur mon site. » */
.offre-tarif{
  margin-block-start: clamp(0.9rem, 2vw, 1.3rem);
  color: var(--brass-400);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce){
  .offre-signe::before,
  .offre-signe::after{ transition: none; }
  .offre[open] .offre-corps{ animation: none; }
}