/* Interface du tableau de bord (alertes flottantes, vignettes de la bibliothèque d'images, menu de navigation).
 * Chargé par le thème du dashboard (layouts/_dash_theme.php), pas par main.css (réservé au site public).
 * Les variables --danger, --ok, --card, --brand, --line viennent du thème du dashboard.
 *
 * 1. Alerte flottante : formulaires (js/app/form-alert.js, partials/_form_alert.php), pages serveur
 * (partials/_flash_alert.php) et bibliothèques d'images (partials/_library_alert.php, photo de profil).
 */
/* Alerte flottante (js/app/form-alert.js + partials/_form_alert.php, partials/_flash_alert.php, partials/_library_alert.php).
 * Fixée en haut de l'écran, au-dessus de la barre de navigation ; fermable. */
.fe-alert {
  position: fixed;
  inset-block-start: calc(env(safe-area-inset-top, 0px) + .5rem);
  inset-inline: .75rem;
  z-index: 80;
  display: flex;
  justify-content: center;
  pointer-events: none; /* seule la boîte reçoit les clics : le reste de la page reste utilisable */
}
.fe-alert-box {
  pointer-events: auto;
  width: 100%;
  max-width: 36rem;
  max-height: 35vh;
  overflow-y: auto;
  padding: .75rem .875rem;
  font-size: .875rem;
  color: var(--danger);
  background-color: var(--card, #fff);
  background-image: linear-gradient(var(--danger-soft), var(--danger-soft)); /* teinte rouge opaque, lisible sur tout fond */
  border: 1px solid var(--danger);
  border-inline-start-width: 4px;
  border-radius: .75rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / .18);
}
.fe-alert-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.fe-alert-title { margin: 0; font-weight: 600; }
.fe-alert-close {
  flex: none;
  width: 2.75rem;      /* zone de toucher confortable au pouce */
  height: 2.75rem;
  margin: -.5rem -.5rem -.5rem 0;
  font-size: 1.5rem;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: .5rem;
  cursor: pointer;
}
.fe-alert-close:focus-visible, .fe-alert-link:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.fe-alert-list { margin: .25rem 0 0; padding: 0; list-style: none; }
.fe-alert-list li { margin-top: .25rem; }
.fe-alert-link {
  display: block;
  width: 100%;
  min-height: 2.25rem;
  padding: .25rem 0;
  color: inherit;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.fe-alert-extra { display: inline-block; margin-top: .5rem; font-weight: 600; text-decoration: underline; }

/* Champ à corriger : contour rouge jusqu'à ce que le membre le modifie. */
.fe-invalid { border-color: var(--danger) !important; outline: 2px solid var(--danger); outline-offset: 2px; }

/* Variante « réussite » (message d'une action réussie : verte, se ferme seule après quelques secondes). */
.fe-alert--ok .fe-alert-box {
  color: var(--ok);
  border-color: var(--ok);
  background-image: linear-gradient(color-mix(in srgb, var(--ok) 12%, transparent), color-mix(in srgb, var(--ok) 12%, transparent));
}
.fe-alert--ok .fe-alert-close:focus-visible { outline-color: var(--ok); }

/* ---------- Vignettes des fenêtres « choisir une image » (js/app/library-picker.js) ----------
   touch-action : pas de zoom au double-tap sur mobile, donc le double-tap valide comme le double-clic.
   user-select : le double-clic ne surligne pas le nom du fichier. */
.lp-tile {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.lp-tile:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- 3. Navigation du tableau de bord (layouts/_dash_navbar.php) ----------
   Mobile d'abord : marque, rond à initiales et bouton menu de même hauteur (44 px, taille minimale d'une cible tactile),
   espaces réguliers entre eux, menu déplié aux lignes de 48 px. Les liens s'affichent en ligne dès 64rem (1024 px) :
   avant, 7 liens ne tiennent pas à côté de la marque et du rond. Valeurs en rem et propriétés logiques (arabe, de droite à gauche). */
.dn-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  max-width: 64rem;
  min-height: 3.75rem;
  margin-inline: auto;
  padding: .5rem 1rem;
}
.dn-brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--brand);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}
.dn-actions { display: flex; align-items: center; gap: .5rem; }
.dn-links { display: none; align-items: center; gap: 1.25rem; margin-inline-end: .5rem; font-size: .875rem; color: var(--muted); }
.dn-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; text-decoration: none; }
.dn-links a:hover { text-decoration: underline; }
.dn-links a[aria-current="page"], .dn-panel a[aria-current="page"] { color: var(--text); font-weight: 600; }

.dn-avatar, .dn-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  cursor: pointer;
}
.dn-avatar { border: 0; background: var(--brand-soft); color: var(--brand); font-size: .875rem; font-weight: 700; letter-spacing: .02em; }
.dn-avatar--on { box-shadow: 0 0 0 2px var(--brand); }
.dn-burger { border: 1px solid var(--line); border-radius: .75rem; background: transparent; color: var(--text); }
.dn-burger:hover { background: var(--brand-soft); }

/* Menu du compte (rond à initiales) : lignes de 48 px, déconnexion à part sous un trait (pas de clic par erreur). */
.dn-account { position: relative; }
.dn-menu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + .5rem);
  z-index: 40;
  width: 15rem;
  max-width: calc(100vw - 1.5rem);
  padding: .375rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: .875rem;
  box-shadow: 0 .75rem 2rem rgb(0 0 0 / .16);
}
.dn-menu-id { margin-block-end: .375rem; padding: .625rem .75rem .75rem; border-block-end: 1px solid var(--line); }
.dn-menu-name { margin: 0; overflow: hidden; font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dn-menu-email { margin: .125rem 0 0; overflow: hidden; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.dn-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3rem;
  padding: 0 .75rem;
  border: 0;
  border-radius: .625rem;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .875rem;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.dn-menu-item:hover, .dn-menu-item:focus-visible { background: var(--brand-soft); outline: none; }
.dn-menu-item[aria-current="page"] { color: var(--text); font-weight: 600; }
.dn-menu-logout { margin: .75rem 0 0; padding-block-start: .5rem; border-block-start: 1px solid var(--line); }
.dn-menu-item--danger { color: var(--danger); font-weight: 600; }
.dn-menu-item--danger:hover, .dn-menu-item--danger:focus-visible { background: var(--danger-soft); }

/* Menu déplié (téléphone et tablette) : lignes de 48 px, page active repérée par un fond et un filet. */
.dn-panel {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--line);
  font-size: .9375rem;
  color: var(--muted);
}
.dn-panel a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 .875rem;
  border-inline-start: 3px solid transparent;
  border-radius: .625rem;
  color: inherit;
  text-decoration: none;
}
.dn-panel a:hover { background: var(--brand-soft); }
.dn-panel a[aria-current="page"] { background: var(--brand-soft); border-inline-start-color: var(--brand); }

@media (min-width: 64rem) {
  .dn-links { display: flex; }
  .dn-burger, .dn-panel { display: none !important; }
}

/* ---------- Bannière du brouillon local (partials/_draft_banner.php) : vitrine, CV, Personnaliser ---------- */
.fd-draft {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  margin-bottom: 1.25rem; padding: .75rem 1rem;
  border: 1px solid var(--ok); border-radius: .65rem;
  color: var(--ok); font-size: .875rem;
}
.fd-draft p { margin: 0; }
.fd-draft-link {
  border: 0; background: none; padding: 0;
  color: inherit; font-size: .8125rem; font-weight: 600; text-decoration: underline; cursor: pointer;
}
.fd-draft-error { margin: 0 0 1rem; color: var(--danger); font-size: .8125rem; }