/* En-tête de l'organisateur connecté, et cibles du pied de page.

   « Mon espace » remplace le bouton « Créer une fête » quand DK.session()
   rend un compte. enTete() (data.js) pose le bloc ; ce fichier le met en
   forme. Il se lit sur les deux cadres du site : le jaune de l'accueil et
   body.page-bleue. Le bouton reprend .btn--ghost et suit donc déjà le
   cadre (papier sur le jaune, jaune sur le bleu).

   Contrastes mesurés (WCAG 2.1) :
   - la liste ouverte est une surface papier, texte bleu : 10,60 ;
   - « Awa · Teranga Live », bleu doux sur papier : 10,29 ;
   - survol et focus, fond jaune, texte bleu : 7,08 ;
   - bord de la liste : bleu sur jaune 7,08 (accueil), jaune sur bleu
     7,08 (pages bleues) ;
   - cadre de focus dans la liste : bleu sur papier 10,60, bleu sur
     jaune 7,08 ;
   - sous 900 px, la liste passe à plat dans le menu ouvert : texte de la
     page (bleu sur jaune 7,08, papier sur bleu 10,60), comme les liens
     de .nav ;
   - pied de page : liens papier à 78 % sur bleu, 7,01 ; cadre de focus
     jaune sur bleu, 7,08 (l'accent de l'accueil est bleu, invisible sur
     le pied de page bleu). */

.compte-menu{position:relative}
.compte-menu__bouton{gap:10px}
/* Un chevron en bordures, sans image : il se retourne à l'ouverture. */
.compte-menu__fleche{
  width:8px; height:8px; flex:none; margin-top:-4px;
  border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor;
  transform:rotate(45deg); transition:transform .14s ease, margin .14s ease;
}
.compte-menu__bouton[aria-expanded="true"] .compte-menu__fleche{transform:rotate(225deg); margin-top:4px}

.compte-menu__panneau{
  display:none; position:absolute; right:0; top:calc(100% + 12px); z-index:70;
  min-width:250px; padding:6px;
  background:var(--lb-papier); color:var(--lb-bleu);
  border:3px solid var(--lb-bleu); border-radius:var(--lb-radius);
  box-shadow:5px 5px 0 var(--lb-rouge);
}
.page-bleue .compte-menu__panneau{border-color:var(--lb-jaune); box-shadow:5px 5px 0 var(--lb-jaune)}
.compte-menu.ouvert .compte-menu__panneau{display:block}

.compte-menu__qui{
  margin:0; padding:8px 12px 10px;
  font-family:var(--lb-font-info); font-size:12px; font-weight:700; letter-spacing:.06em;
  color:var(--lb-bleu-doux); overflow-wrap:anywhere;
}
.compte-menu__liste{list-style:none; margin:0; padding:0}
.compte-menu__lien{
  display:flex; align-items:center; width:100%; min-height:44px; padding:0 12px;
  font:600 15.5px/1.2 var(--lb-font-texte); color:var(--lb-bleu); text-align:left;
  text-decoration:none; background:none; border:0; border-radius:var(--lb-radius);
  cursor:pointer; white-space:nowrap;
}
.compte-menu__lien:hover, .compte-menu__lien:focus-visible{background:var(--lb-jaune); color:var(--lb-bleu)}
.compte-menu__lien:focus-visible{outline:3px solid var(--lb-bleu); outline-offset:-3px}
.compte-menu__lien[aria-current="page"]{box-shadow:inset 4px 0 0 var(--lb-bleu); font-weight:800}
.compte-menu__sep{margin-top:6px; padding-top:6px; border-top:2px solid var(--lb-bleu)}

/* Sous 900 px, l'en-tête replie tout dans le menu (style.css). « Mon
   espace » n'y ouvre pas un second menu : son bouton s'efface et ses liens
   s'alignent sous « Aide », à la manière de ceux de .nav. */
@media (max-width:900px){
  header.avec-menu .compte-menu{
    border-top:2px solid var(--line); margin-top:6px; padding-top:6px;
  }
  header.avec-menu .compte-menu__bouton{display:none}
  header.avec-menu .compte-menu__panneau{
    display:block; position:static; min-width:0; padding:0;
    background:none; color:var(--ink); border:0; box-shadow:none;
  }
  header.avec-menu .compte-menu__qui{color:var(--ink); padding:8px 14px}
  header.avec-menu .compte-menu__lien{padding:11px 14px; color:var(--ink)}
  header.avec-menu .compte-menu__lien:hover{background:var(--lb-papier); color:var(--lb-bleu)}
  header.avec-menu .compte-menu__lien:focus-visible{
    background:none; color:var(--ink); outline:3px solid var(--ink); outline-offset:0;
  }
  header.avec-menu .compte-menu__lien[aria-current="page"]{
    background:var(--lb-papier); color:var(--lb-bleu); box-shadow:none;
  }
  .page-bleue header.avec-menu .compte-menu__lien[aria-current="page"]{background:var(--lb-jaune)}
  header.avec-menu .compte-menu__sep{border-top-color:var(--line)}
}

/* Pied de page : des cibles d'au moins 40 px (elles en faisaient 16). */
.pied h4{margin-bottom:2px}
.pied ul{gap:0}
.pied ul a{display:inline-flex; align-items:center; min-height:40px}
footer a:focus-visible{outline-color:var(--lb-jaune)}