/* ==========================================================================
   PAGES ANNEXES — 404, mentions légales, politique de confidentialité
   Ces pages réutilisent variables.css et style.css ; ce fichier n'ajoute
   que la mise en page qui leur est propre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page centrée (404)
   -------------------------------------------------------------------------- */

.page-centered {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.page-centered__main {
  display: flex;
  flex: 1;
  align-items: center;
}

.page-centered__logo {
  height: 140px;
  width: auto;
  margin: 0 auto var(--space-xl);
}

.page-centered__actions {
  justify-content: center;
  margin-top: var(--space-xl);
}

/* --------------------------------------------------------------------------
   Pages de texte (mentions légales, confidentialité)
   -------------------------------------------------------------------------- */

.legal-header {
  padding-block: var(--space-lg);
  background-color: var(--color-dark);
}

.legal-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.legal-header img {
  width: auto;
  height: 44px;
}

.legal-header a.btn {
  min-height: 40px;
  padding-block: var(--space-xs);
}

.legal h2 {
  margin-top: var(--space-2xl);
}

.legal h2:first-of-type {
  margin-top: var(--space-xl);
}

.legal h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.legal ul:not([class]) {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

.legal ul:not([class]) li {
  margin-bottom: var(--space-2xs);
}

.legal__updated {
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

/* Encadré signalant une information à compléter par l'exploitant */
.legal__todo {
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: var(--fs-sm);
  background-color: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   ESPACE CLIENT
   Habillé comme le site, pas comme le dashboard : l'adhérent qui arrive
   depuis la page d'accueil reste dans le même univers visuel.
   ========================================================================== */

.espace {
  padding-bottom: var(--space-2xl);
}

.espace h1 {
  margin-bottom: var(--space-sm);
}

.espace h2 {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-lg);
}

.espace-header__right {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.espace-header__user {
  font-size: var(--fs-sm);
  color: var(--color-muted-on-dark);
}

.espace-form {
  max-width: 520px;
  margin-top: var(--space-lg);
}

.espace-block {
  padding-top: var(--space-2xl);
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.espace-hint {
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.espace-alt {
  margin-top: var(--space-xl);
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.espace-alt a,
.espace-hint a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.espace-actions {
  margin-top: var(--space-lg);
}

.espace-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-lg);
  letter-spacing: 0.14em;
  text-align: center;
}

/* Messages */
.espace-flash {
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: var(--fs-sm);
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-alt);
}

.espace-flash--error {
  color: var(--color-on-primary);
  background-color: var(--color-primary);
  border-left-color: var(--color-dark);
}

/* Encart Peppy */
.espace-callout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  margin-top: var(--space-xl);
  background-color: var(--color-bg-beige);
  border-radius: var(--radius);
}

.espace-callout p {
  margin: 0;
  font-size: var(--fs-sm);
}

/* Demandes du client */
.espace-card {
  padding: var(--space-lg);
  margin-top: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius);
}

.espace-card--nouveau  { border-left-color: var(--color-primary); }
.espace-card--en_cours { border-left-color: var(--color-secondary); }
.espace-card--fait     { border-left-color: var(--color-bg-beige); opacity: 0.8; }
.espace-card--refuse   { opacity: 0.7; }

.espace-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: baseline;
  justify-content: space-between;
}

.espace-card__head h3 {
  font-size: var(--fs-base);
}

.espace-card__meta {
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

.espace-card__body {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
}

.espace-card__reply {
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  background-color: var(--color-bg-beige);
  border-radius: var(--radius-sm);
}

.espace-card__actions {
  margin-top: var(--space-md);
}

.espace-status {
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-wide);
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius-full);
  color: var(--color-text);
  background-color: var(--color-bg-alt);
}

.espace-status--nouveau  { color: var(--color-on-primary); background-color: var(--color-primary); }
.espace-status--en_cours { color: var(--color-on-primary); background-color: var(--color-secondary); }
.espace-status--fait     { background-color: var(--color-bg-beige); }

/* --------------------------------------------------------------------------
   Page de maintenance (503)
   Réutilise la mise en page centrée du 404 ; n'ajoute que le bloc de contact.
   -------------------------------------------------------------------------- */

.maintenance__note {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--color-muted-on-dark);
}

/* Encart centré, mais contenu aligné à gauche : les icônes forment ainsi une
   seule colonne, au lieu d'être décalées ligne par ligne comme le ferait un
   text-align: center. Largeur bornée pour ne pas étirer les lignes courtes.
   (Pas de width: fit-content ici — avec box-sizing: border-box, la largeur
   calculée exclut le padding, qui se retrouve alors écrasé.) */
.maintenance__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
  max-width: 30rem;
  padding: var(--space-lg);
  margin-top: var(--space-xl);
  margin-inline: auto;
  font-size: var(--fs-sm);
  text-align: left;
  background-color: var(--color-surface-dark);
  border-radius: var(--radius);
}

.maintenance__contact li {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.maintenance__contact a {
  color: var(--color-text-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.maintenance__contact a:hover {
  color: var(--color-light);
}