/* Brin de Stef, maquette Didone chorégraphiée, pages de compte.
   Feuille PARTAGÉE par compte.html, mot-de-passe-oublie.html et
   nouveau-mot-de-passe.html. Complément de index-didone-v1.css, qui doit
   être chargé avant.

   Registre : pages fonctionnelles privées (noindex). Aucune chorégraphie,
   aucune photo, aucun argument de vente. Une colonne étroite, centrée, le
   filet comme seul ornement. On enlève le décor, on garde le geste.

   RÈGLE DE SURVIE : ces pages sont pilotées par assets/js/compte.js,
   mot-de-passe-oublie.js et nouveau-mot-de-passe.js. Tous les identifiants,
   classes fonctionnelles et attributs data-* du HTML d'origine sont
   conservés à l'identique. Cette feuille ne fait que les habiller. Ne
   jamais renommer .auth-tab, .active, .show, .notif-icon,
   .order-history-item ni .badge : le JS écrit dessus. */

/* ------------------------------------------------ ALIAS DE COMPATIBILITÉ */
/* compte.js injecte l'historique des commandes avec des styles en ligne qui
   appellent var(--gray) et une couleur `red`, héritées de l'ancien thème.
   Sans cet alias, le texte injecté tomberait sur une variable inconnue.
   À supprimer le jour où dev-site nettoiera les styles en ligne du script. */
:root {
  --gray: var(--ink-muted);
  --gray-light: var(--hairline);
}

/* ------------------------------------------------------- LIEN D'ÉVITEMENT */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 18px; z-index: 20;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
}
.skip:focus { left: 0; }

/* ----------------------------------------------- EN-TÊTE RÉDUITE */
/* pas de navigation complète sur une page privée : la marque, deux sorties */
.nav-min { justify-content: center; text-align: center; flex-direction: column; gap: 12px; }
.nav-min ul { justify-content: center; }

/* ------------------------------------------------------- MISE EN PAGE */
.account-container {
  max-width: 1040px; margin-inline: auto;
  padding-inline: var(--gut);
  padding-block: clamp(32px, 6vw, 80px) clamp(56px, 9vw, 128px);
}
.account-title {
  font-size: clamp(2.1rem, 6.4vw, 4.2rem);
  line-height: .95; letter-spacing: -.05em; font-weight: 600;
  margin: 0; max-width: 13ch;
}
.account-script {
  font-family: var(--script); color: var(--accent);
  font-size: clamp(1.25rem, 2.8vw, 1.9rem);
  display: inline-block; transform: rotate(-1.5deg); margin: 0 0 .1em;
}
.account-lede {
  max-width: 46ch; color: var(--ink-muted); font-size: 1.02rem;
  margin: clamp(16px, 2.4vw, 26px) 0 0;
}

/* colonne étroite pour les pages à un seul formulaire */
.auth-col { max-width: 34rem; }

/* -------------------------------------------- BOÎTE D'AUTHENTIFICATION */
/* pas de carte : ni ombre, ni coin arrondi, ni bordure de boîte.
   Un filet en haut, un filet en bas, comme partout ailleurs sur le site. */
.auth-box {
  margin-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(20px, 3vw, 30px);
}

/* onglets connexion / inscription : deux mots filetés, pas deux boutons */
.auth-tabs {
  display: flex; gap: clamp(20px, 4vw, 40px);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(24px, 3.4vw, 38px);
}
.auth-tab {
  appearance: none; background: none; border: 0; border-radius: 0;
  font-family: var(--serif); color: var(--ink-faint);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  padding: 0 0 12px; margin-bottom: -1px; cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.auth-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* --------------------------------------------------------- CHAMPS */
/* même grammaire que le formulaire de contact : une ligne filetée */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 32px); }
.form-group { margin-bottom: clamp(18px, 2.6vw, 28px); }
.form-group label {
  display: block; margin-bottom: 6px;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-muted);
}
.form-group input {
  width: 100%; display: block;
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.6;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--hairline);
  border-radius: 0; padding: 8px 0 10px;
  transition: border-color .25s var(--ease);
}
.form-group input::placeholder { color: var(--ink-faint); font-style: italic; }
.form-group input:hover { border-bottom-color: var(--bark-500); }
.form-group input:focus {
  outline: none; border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}
.form-group input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* mot de passe : chiffres et points en chasse fixe, plus lisibles */
.form-group input[type="password"] { letter-spacing: .08em; }

/* ------------------------------------------------------------ BOUTONS */
/* .btn-black est le nom d'origine, conservé pour ne rien casser côté JS et
   côté feuilles existantes. Le noir devient la garance du système. */
.btn-black {
  appearance: none; border: 0; border-radius: 0; cursor: pointer;
  display: inline-block; width: 100%;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--serif);
  padding: 15px 28px; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 500;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.btn-black:hover { background: var(--accent-strong); transform: translateY(-2px); }
.btn-black:active { transform: translateY(0); }
.btn-black:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* état pendant l'envoi : le script pose disabled et réécrit le libellé */
.btn-black[disabled] {
  background: var(--sand-300); color: var(--bark-700);
  cursor: progress; transform: none;
}
.btn-auto { width: auto; }

.btn-logout {
  appearance: none; background: none; border: 0; border-radius: 0; cursor: pointer;
  margin-top: clamp(22px, 3vw, 32px); padding: 0 0 3px;
  font-family: var(--serif);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-muted); border-bottom: 1px solid var(--hairline);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.btn-logout:hover { color: var(--accent-strong); border-bottom-color: var(--accent); }
.btn-logout:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* -------------------------------------------------- NOTES SOUS FORMULAIRE */
.form-note {
  margin: clamp(14px, 2vw, 18px) 0 0; font-size: .9rem; line-height: 1.6;
  color: var(--ink-faint);
}
.form-note a { border-bottom: 1px solid var(--hairline); padding-bottom: 1px; }
.form-note a:hover { border-bottom-color: var(--accent); color: var(--ink); }
.form-link {
  display: inline-block; margin-top: clamp(14px, 2vw, 18px);
  font-size: .95rem; color: var(--ink-muted);
  border-bottom: 1px solid var(--hairline); padding-bottom: 2px;
}
.form-link:hover { border-bottom-color: var(--accent); color: var(--ink); }

/* ------------------------------------------------- ÉTATS DE FORMULAIRE */
/* Deux états montrés en clair plutôt qu'en toast fugace. Le JS les affiche
   en écrivant style.display, d'où le display:none EN LIGNE dans le HTML :
   ne pas le déplacer dans cette feuille, le script le remettrait à block
   sans que la règle CSS ne cède. */
.state {
  border-left: 2px solid var(--accent);
  background: var(--surface-shell);
  padding: clamp(16px, 2.4vw, 22px);
  margin-bottom: clamp(20px, 3vw, 28px);
}
.state p { margin: 0 0 .4em; font-size: .95rem; line-height: 1.6; color: var(--ink); }
.state p:last-child { margin-bottom: 0; }
.state .furniture { color: var(--accent-strong); margin-bottom: 6px; }
.state a { border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.state a:hover { color: var(--accent-strong); }
/* variante calme, pour une confirmation plutôt qu'un avertissement */
.state-ok { background: var(--surface-raised); border-left-color: var(--olive-600); }
.state-ok .furniture { color: var(--olive-600); }

/* --------------------------------------------------- ESPACE CONNECTÉ */
.account-who {
  margin: clamp(14px, 2vw, 20px) 0 0; color: var(--ink-muted); font-size: 1rem;
}
.account-who strong { font-weight: 600; color: var(--ink); font-style: italic; }

.account-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 6vw, 88px);
  margin-top: clamp(30px, 5vw, 56px);
  align-items: start;
}
.account-card { border-top: 1px solid var(--hairline); padding-top: clamp(18px, 2.6vw, 26px); }
.account-card h2,
.account-card h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.1; letter-spacing: -.025em;
  font-weight: 600; margin: 0 0 clamp(18px, 2.6vw, 26px);
}

/* historique des commandes : lignes filetées, injectées par compte.js.
   .order-history-item et .badge sont écrits par le script, pas par le HTML :
   ces deux sélecteurs doivent survivre à toute refonte. */
.order-history-list { border-top: 1px solid var(--hairline); }
.order-history-item {
  border-bottom: 1px solid var(--hairline);
  padding: clamp(13px, 2vh, 18px) 0;
}
.order-history-item strong { font-weight: 600; letter-spacing: -.01em; }
.order-history-item p { color: var(--ink-muted); }
.badge {
  display: inline-block; padding: 5px 10px;
  background: var(--surface-shell); color: var(--accent-strong);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
}

/* ------------------------------------------------------ TOAST GLOBAL */
/* window.showNotification (assets/js/main.js) écrit dans #notifText, met
   ✓ ou ✕ dans .notif-icon et bascule la classe .show. Les trois sont
   obligatoires. */
.notification {
  position: fixed; z-index: 40; left: var(--gut); bottom: clamp(18px, 4vh, 34px);
  max-width: calc(100vw - var(--gut) * 2);
  display: flex; align-items: baseline; gap: 12px;
  background: var(--surface-deep); color: var(--ink-on-deep);
  padding: 15px 22px; font-size: .95rem; line-height: 1.5;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.notification.show { opacity: 1; transform: none; }
.notification .notif-icon { color: var(--clay-100); font-size: 1rem; }

/* ---------------------------------------------------------- RESPONSIF */
@media (max-width: 900px) {
  .account-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .auth-tabs { gap: 22px; }
  .notification { left: 12px; right: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-black:hover { transform: none; }
  .notification { transition: none; }
  .form-group input { transition: none; }
}