/* Mes fêtes (espace.html) : l'accueil de l'organisateur connecté.

   Sur le cadre bleu (body.page-bleue), comme toutes les pages hors
   accueil. Chaque fête est un .encart : il hérite donc des conventions
   des surfaces papier de style.css (texte bleu, bord jaune, boutons
   bleus). Les trois chiffres du haut n'ont pas de cadre : une bande,
   comme la ligne de chiffres de la page publique d'un organisateur.

   Contrastes mesurés (WCAG 2.1) :
   - texte papier sur le bleu : 10,60 (chiffres et libellés de la bande) ; titres en jaune : 7,08 ;
   - dans une fête et dans le rappel de dépôt (des .encart) : bleu sur
     papier 10,60, bleu doux sur papier 10,29 ;
   - pastilles « En cours » et « Ce soir » : bleu sur jaune 7,08 ;
     « En vente » : papier sur bleu 10,60 ; les autres, bleu sur papier
     à bord bleu, 10,60 ;
   - jauge : barre bleue sur fond bois (#F2DDB0), sans bord. Elle double
     le chiffre écrit au-dessus, elle ne porte rien seule ;
   - le rouge ne porte aucun texte. */

.es-haut{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px 24px; flex-wrap:wrap;
}

.es-bande{
  display:flex; flex-wrap:wrap; gap:14px 0; margin-top:clamp(22px,3vw,32px);
  color:var(--lb-papier);
}
/* Un chiffre, son libellé dessous ; un filet fin entre deux chiffres. */
.es-stat{
  margin:0; padding:0 clamp(18px,3vw,36px); display:flex; flex-direction:column; gap:4px;
  border-left:1px solid rgba(252,244,225,.35);
}
.es-stat:first-child{padding-left:0; border-left:0}
.es-stat b{font-family:var(--info); font-weight:700; font-size:clamp(20px,2.4vw,26px); line-height:1.1; letter-spacing:.04em}
.es-stat span{font-size:14.5px; line-height:1.3}
.es-bande[hidden], .es-vide[hidden], .es-etat-page[hidden], .es-haut .btn[hidden]{display:none}

.es-etat-page{margin-top:28px; color:var(--lb-papier)}
/* Le motif d'une redirection : une phrase sobre, encadrée de jaune. */
.es-avis{margin-top:18px; padding:12px 16px; max-width:52ch; border:2px solid var(--lb-jaune); border-radius:var(--lb-radius); color:var(--lb-papier)}
.es-avis[hidden]{display:none}

/* Le rappel de dépôt : une surface papier (.encart), une phrase et le
   bouton. Un seul, pour la fête passée la plus récente sans contenu. */
.es-rappel{
  margin-top:clamp(20px,3vw,28px); padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 24px;
}
.es-rappel[hidden]{display:none}
.es-rappel-texte{margin:0; font-size:17px; line-height:1.4; color:var(--ink); max-width:52ch}
.es-rappel-texte b{overflow-wrap:anywhere}
.es-rappel .btn{min-height:48px}
.es-rappel :focus-visible{outline:3px solid var(--accent); outline-offset:3px}

/* --- Les sections --- */
.es-section{padding-block:0; margin-top:clamp(34px,4.4vw,52px)}
.es-h2{font-size:clamp(20px,2.4vw,26px); color:var(--lb-jaune)}
.es-rien{margin-top:14px; color:var(--lb-papier)}

.es-liste{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:14px}

/* --- Une fête : visuel, titre et date, chiffres, puis les actions --- */
.es-fete{
  display:grid; align-items:center;
  grid-template-columns:64px minmax(0,1fr) minmax(200px,260px);
  grid-template-areas:"visuel tete chiffres" "visuel actions actions";
  gap:12px 22px; padding:18px 20px;
}
.es-visuel{
  grid-area:visuel; align-self:start;
  width:64px; aspect-ratio:4/5; border-radius:var(--lb-radius);
  border:2px solid var(--lb-bleu); overflow:hidden;
}
.es-visuel img{width:100%; height:100%; object-fit:cover}

.es-tete{grid-area:tete; min-width:0}
.es-titre{font-size:clamp(18px,2vw,22px); line-height:1.05; overflow-wrap:anywhere}
.es-meta{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:8px}
.es-quand{font-family:var(--info); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--lb-bleu-doux)}

.es-etat{
  display:inline-block; padding:3px 9px; border:2px solid var(--lb-bleu);
  border-radius:var(--lb-radius); background:var(--lb-papier); color:var(--lb-bleu);
  font-family:var(--info); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; line-height:1.4;
}
.es-etat--en_cours, .es-etat--soir{background:var(--lb-jaune)}
.es-etat--a_venir{background:var(--lb-bleu); color:var(--lb-papier)}
.es-etat--annulee{border-style:dashed}

.es-chiffres{grid-area:chiffres}
.es-jauge-texte{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px}
.es-jauge-texte b, .es-recette b{font-family:var(--info); font-weight:700; letter-spacing:.04em}
.es-jauge-texte b{font-size:17px}
.es-jauge-lib{font-size:13.5px; color:var(--lb-bleu-doux)}
.es-jauge{
  height:6px; margin-top:8px; border-radius:3px; background:var(--lb-bois); overflow:hidden;
}
.es-jauge span{display:block; height:100%; background:var(--lb-bleu)}
.es-recette{margin-top:8px; font-size:13.5px; color:var(--lb-bleu-doux)}
.es-recette b{font-size:14.5px; color:var(--lb-bleu)}
/* Un dépôt commencé : « 2 vidéos sur 4 · photo 0 sur 1 ». */
.es-depot{margin-top:8px; font-size:13.5px; font-weight:700; color:var(--ink)}

/* Les actions : une seule pleine (le contrôle le jour J, le dépôt d'une
   fête passée, sinon Voir les ventes), les autres en liens.
   Cibles de 44 px de haut. */
.es-actions{
  grid-area:actions; list-style:none; margin:4px 0 0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 4px;
}
.es-actions .btn{min-height:44px; margin-right:10px}
.es-action{
  display:inline-flex; align-items:center; min-height:44px; padding:0 10px;
  color:var(--lb-bleu); font-weight:700; font-size:15px;
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px;
  border-radius:var(--lb-radius);
}
.es-action:hover{background:var(--lb-jaune)}
.es-fete :focus-visible{outline:3px solid var(--lb-bleu); outline-offset:2px}

/* --- Les annulées, repliées --- */
.es-replie{margin-top:12px}
.es-replie summary{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  padding:0 4px; cursor:pointer; color:var(--lb-papier); font-weight:700;
  text-decoration:underline; text-underline-offset:4px;
  border-radius:var(--lb-radius); list-style:none;
}
.es-replie summary::-webkit-details-marker{display:none}
/* Un chevron en bordures, comme celui de Mon espace ; il se retourne. */
.es-replie summary::before{
  content:''; width:8px; height:8px; flex:none; margin-top:-4px;
  border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor;
  transform:rotate(45deg);
}
.es-replie[open] summary::before{transform:rotate(-135deg); margin-top:4px}
.es-replie summary:focus-visible{outline:3px solid var(--lb-jaune); outline-offset:3px}

/* --- Aucune fête --- */
.es-vide{
  margin-top:clamp(28px,4vw,44px); text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.es-mascotte{width:clamp(110px,14vw,150px); margin-bottom:18px}
.es-vide-titre{font-size:clamp(22px,2.6vw,30px); color:var(--lb-jaune)}
.es-vide-texte{margin:12px 0 22px; color:var(--lb-papier); max-width:44ch}

@media (max-width:760px){
  .es-fete{
    grid-template-columns:56px minmax(0,1fr);
    grid-template-areas:"visuel tete" "chiffres chiffres" "actions actions";
    padding:16px;
  }
  .es-visuel{width:56px}
}
@media (max-width:640px){
  .es-bande{flex-direction:column; gap:16px}
  .es-stat{padding:0; border-left:0; gap:2px}
  .es-stat b{white-space:nowrap; font-size:22px}
  .es-haut .btn, .es-rappel .btn{width:100%}
  .es-actions li:first-child{flex:1 1 100%}
  .es-actions .btn{width:100%; margin-right:0}
}