/**
 * Coquille d'application partagée : en-tête, barre d'onglets, états connecté/anonyme.
 *
 * Toutes les règles sont préfixées `.as-shell` (posé sur <html> par app-shell.js)
 * ET nommées `as-*` : une page qui charge ce fichier sans activer le shell garde
 * exactement son rendu actuel, et aucune de ces règles ne peut entrer en collision
 * avec les styles inline des pages existantes (body, .container, .btn…).
 *
 * À charger APRÈS /css/tokens.css et AVANT le <style> de la page.
 */

/* Décors animés (flocons, étoiles) et badge reCAPTCHA débordent volontiers à droite ;
   sans cela, la page se laisse faire glisser latéralement sur téléphone. `clip` plutôt
   que `hidden` : `hidden` créerait un conteneur de défilement et casserait le
   position: sticky de l'en-tête. */
html.as-shell { overflow-x: clip; }
html.as-shell body { overflow-x: clip; max-width: 100%; }

/* ---- Écran de chargement ----
   Affiché pendant la vérification de session sur une page réservée. `visibility: visible`
   est indispensable : le document entier est masqué pendant ce temps, et seule cette
   surcharge locale permet au voile de rester affiché. */
.as-chargement {
  position: fixed;
  inset: 0;
  z-index: var(--as-z-overlay);
  visibility: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--as-bg-gradient);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.as-chargement.as-efface { opacity: 0; pointer-events: none; }

.as-chargement p { margin: 0; }

.as-chargement-roue {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--as-primary);
  animation: as-rotation 0.8s linear infinite;
}

@keyframes as-rotation {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .as-chargement-roue { animation-duration: 2.4s; }
  .as-chargement { transition: none; }
}

/* ---- En-tête ---- */
.as-shell .as-header {
  position: sticky;
  top: 0;
  z-index: var(--as-z-header);
  display: flex;
  align-items: center;
  gap: var(--as-gap-sm);
  padding: calc(7px + var(--as-safe-top)) 12px 7px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: var(--as-shadow);
  border-bottom-left-radius: var(--as-radius);
  border-bottom-right-radius: var(--as-radius);
  margin-bottom: 10px;
}

.as-shell .as-header-title {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--as-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.as-shell .as-header-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--as-surface-muted);
  color: var(--as-text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.as-shell .as-header-btn:active { transform: scale(0.94); }
.as-shell .as-header-btn.as-invisible { visibility: hidden; }

/* ---- Barre d'onglets ---- */
.as-shell .as-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--as-z-tabbar);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding-bottom: var(--as-safe-bottom);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.as-shell .as-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--as-tabbar-height);
  padding: 6px 4px;
  color: var(--as-text-muted);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
}

.as-shell .as-tab-icon { font-size: 1.35rem; line-height: 1; }
.as-shell .as-tab.as-active { color: var(--as-primary-dark); }
.as-shell .as-tab:active { background: var(--as-surface-muted); }

/* ---- Pied de page (version) ---- */
.as-shell .as-footer {
  margin-top: 4px;
  padding: 2px 0 4px;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
}

.as-shell .as-footer a { color: inherit; }

/* ---- Affichage conditionnel selon la session ----
   Formulées en « masquer seulement », avec !important : les pages définissent leur
   propre display sur ces blocs (.buttons est en flex dans index.html) dans un <style>
   chargé après celui-ci. On ne force jamais une valeur d'affichage — quand le bloc
   doit être visible, aucune règle ne s'applique et le style de la page reprend. */
html:not(.as-authed) .as-only-auth { display: none !important; }
html.as-authed .as-only-anon { display: none !important; }

/* ---- Éléments remplacés par le shell ---- */
.as-shell .as-legacy-back { display: none !important; }
/* Titre de page redondant avec celui de l'en-tête */
.as-shell .as-legacy-title { display: none !important; }
/* Pied de page d'origine, remplacé par celui de la coquille */
.as-shell .as-legacy-footer { display: none !important; }

/* Sur grand écran, la barre d'onglets n'apporte rien : l'en-tête suffit. */
@media (min-width: 900px) {
  .as-shell .as-tabbar { position: static; box-shadow: none; border-radius: var(--as-radius); margin-top: var(--as-gap-lg); }
}