/* ==========================================================================
   auth-grand-calme.css — Refonte login « Grand calme » (D2, validée CEO 2026-06-26)
   feat/login-grand-calme. Remplace l'éphémère variante « L'Atelier » (split).

   Chargée UNIQUEMENT par auth/login.html (via head_extra), APRÈS tokens.css →
   gagne en cascade à spécificité égale. TOUT est scopé à `.aa-auth--calme`
   (posé sur le shell par la seule page login) : les autres pages auth
   (signup/activation/trial/abonnements/privacy/dpa/démo) sont INCHANGÉES.

   « Grand calme » = minimaliste CENTRÉ : lockup onde géant + halo cuivre discret,
   gros titre serif « Bon retour. », sous-titre, formulaire seul en champs/CTA
   « pills », beaucoup de blanc, AUCUN panneau latéral, AUCUNE carte (le form
   flotte sur le fond de page).

   Couleur = palette « Confiance profonde » en variables LOCALES : tokens.css
   global (Bleu de Prusse) jamais touché — le swap de palette globale reste une
   décision CEO séparée.

   Animation 100% CSS (keyframes + clip-path) — PAS de Motion One / CDN (CSP +
   RGPD + polices self-hosted). Joue une fois au chargement ; coupée en
   prefers-reduced-motion (logo + contenus affichés, sans mouvement).
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Palette locale + remap des tokens consommés par aa-input/aa-btn-primary/
      aa-label/aa-link-amber (le form garde ses classes ; il adopte la palette).
   ------------------------------------------------------------------------- */
.aa-auth-shell.aa-auth--calme {
  /* identité « Confiance profonde » (clair) */
  --aa-cta: #1B3A57;
  --aa-cta-hover: #142C44;
  --aa-on-cta: #FFFFFF;
  --aa-ink: #16314A;            /* onde + wordmark (encre marine) */
  --aa-copper: #C46A3F;         /* halo + barre-pic (signature) */
  --aa-page: #F4F5F7;
  --aa-text: #16314A;
  --aa-muted: #5E6E7D;
  --aa-field: #FFFFFF;
  --aa-field-border: #D2DAE1;

  /* remap LOCAL des tokens globaux (jamais tokens.css) */
  --accent: var(--aa-cta);
  --accent-hover: var(--aa-cta-hover);
  --accent-on-primary: var(--aa-on-cta);
  --bg-primary: var(--aa-page);
  --text-primary: var(--aa-text);
  --text-muted: var(--aa-muted);
  --text-secondary: var(--aa-muted);
  --border-strong: var(--aa-field-border);
  --encre: var(--aa-ink);

  /* composition : colonne centrée plein écran, le card gère le rythme */
  padding: 0;
}

[data-theme="dark"] .aa-auth-shell.aa-auth--calme {
  --aa-cta: #2F5A82;            /* marine lifté — blanc dessus AAA (~7:1) */
  --aa-cta-hover: #3A6B96;
  --aa-on-cta: #FFFFFF;
  --aa-ink: #8FCBE6;
  --aa-copper: #E08A4F;
  --aa-page: #0C1822;
  --aa-text: #E6F0F6;
  --aa-muted: #8FA6B4;
  --aa-field: #11212F;
  --aa-field-border: #2A4257;
}

/* le wordmark « au-dessus de la card » du layout n'a pas lieu d'être : le lockup
   géant vit dans la scène centrée. */
.aa-auth--calme > .aa-auth-wordmark { display: none; }

/* plus de CARTE : surface transparente, le form flotte sur le fond de page */
.aa-auth--calme > .aa-auth-card {
  max-width: none;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 48px 24px 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------------------
   2. Scène centrée (lockup + titre + sous-titre + form + liens)
   ------------------------------------------------------------------------- */
.aa-gc-stage {
  position: relative;
  width: 100%;
  max-width: 400px;
  text-align: center;
}
/* halo cuivre très discret derrière le logo (profondeur sans chrome) */
.aa-gc-stage::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--aa-copper) 16%, transparent), transparent 68%);
  filter: blur(8px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .aa-auth--calme .aa-gc-stage::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--aa-copper) 22%, transparent), transparent 66%);
}
.aa-gc-stage > * { position: relative; z-index: 1; }

/* lockup géant centré — recolore le composant inclus : onde + wordmark en encre,
   barre-pic cuivre. La font-size pilote la taille de l'onde + du wordmark. */
.aa-gc-lockup {
  display: inline-flex;
  align-items: center;
  font-size: 44px;
  line-height: 1;
  margin-bottom: 30px;
  --wordmark-accent: var(--aa-ink);
}
.aa-gc-lockup .wm-bar-accent { fill: var(--aa-copper); }

.aa-gc-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--aa-text);
}
.aa-gc-sub {
  margin: 0 auto 36px;
  max-width: 30ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--aa-muted);
}

/* -------------------------------------------------------------------------
   3. Formulaire — champs + CTA en « pills » (le form garde aa-input/aa-btn-primary)
   ------------------------------------------------------------------------- */
.aa-gc-stage form { text-align: left; }

.aa-gc-stage .aa-label {
  margin: 0 0 7px 18px;        /* aligné au padding interne de la pill */
  font-size: 13px;
  font-weight: 600;
}
.aa-gc-stage .aa-input {
  background: var(--aa-field);
  border: 1px solid var(--aa-field-border);
  border-radius: 999px;        /* pill */
  padding: 16px 22px;
  font-size: 16px;
}
.aa-gc-stage .aa-btn-primary {
  width: 100%;
  border-radius: 999px;        /* pill */
  padding: 17px 24px;
  margin-top: 6px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.aa-gc-links { margin-top: 24px; }
.aa-gc-links p { margin: 0; }

/* -------------------------------------------------------------------------
   4. Animation d'entrée — CSS pur, une fois au chargement
   ------------------------------------------------------------------------- */
.aa-gc-lockup .wm-icon rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: aaOndeRise 0.55s cubic-bezier(0.2, 0.8, 0.25, 1) backwards;
}
.aa-gc-lockup .wm-icon rect:nth-child(1) { animation-delay: 0.06s; }
.aa-gc-lockup .wm-icon rect:nth-child(2) { animation-delay: 0.13s; }
.aa-gc-lockup .wm-icon rect:nth-child(3) {
  animation: aaOndePic 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
}
.aa-gc-lockup .wm-icon rect:nth-child(4) { animation-delay: 0.13s; }
.aa-gc-lockup .wm-icon rect:nth-child(5) { animation-delay: 0.06s; }
.aa-gc-lockup .wm-wrapper {
  animation: aaWordTrace 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.34s backwards;
}

@keyframes aaOndeRise {
  0%   { transform: scaleY(0);    opacity: 0; }
  70%  { transform: scaleY(1.12); opacity: 1; }
  100% { transform: scaleY(1);    opacity: 1; }
}
@keyframes aaOndePic {
  0%   { transform: scaleY(0);    opacity: 0; }
  55%  { transform: scaleY(1.16); opacity: 1; }
  72%  { transform: scaleY(0.92); opacity: 0.6; }
  100% { transform: scaleY(1);    opacity: 1; }
}
@keyframes aaWordTrace {
  from { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(-8px); }
  60%  { opacity: 1; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; transform: translateX(0); }
}

/* titre / sous-titre / form / liens : cascade « rise » */
.aa-gc-title,
.aa-gc-sub,
.aa-gc-stage > form,
.aa-gc-links {
  animation: aaRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes aaRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aa-gc-title { animation-delay: 0.18s; }
.aa-gc-sub { animation-delay: 0.24s; }
.aa-gc-stage > form { animation-delay: 0.30s; }
.aa-gc-links { animation-delay: 0.38s; }

@media (prefers-reduced-motion: reduce) {
  .aa-auth--calme * { animation: none !important; }
}

/* -------------------------------------------------------------------------
   5. Mobile : la colonne centrée est nativement responsive (max-width 400)
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .aa-auth--calme > .aa-auth-card { padding: 36px 20px 80px; }
  .aa-gc-title { font-size: 32px; }
  .aa-gc-lockup { font-size: 40px; }
}