/**
 * ArgenTous — Main Stylesheet
 * Design tokens, base reset, typography, utilities.
 *
 * Mobile-first: desktop styles added via min-width breakpoints.
 * The desktop layout is the source of truth.
 *
 * ── Points de rupture (Chantier 4.10 / CSS-01) ─────────────────────────────
 *
 * Huit valeurs de rupture circulaient dans les cinq feuilles, dont deux
 * découpages contradictoires du même axe. L'échelle canonique est :
 *
 *     360   très petits téléphones (ajustements ponctuels)
 *     480   téléphone → grand téléphone
 *     768   grand téléphone → tablette / bureau
 *    1024   tablette → grand écran
 *
 * CONVENTION : une requête `min-width` porte la valeur du point ; une requête
 * `max-width` porte la valeur du point MOINS UN. Un point de rupture n'est
 * ainsi jamais revendiqué par deux règles à la fois, et jamais par aucune.
 *
 * Dette résiduelle assumée, non corrigée faute de pouvoir en vérifier le rendu
 * ici : 05-forms.css et 06-dashboard.css emploient la paire 480|481 au lieu de
 * 479|480, et 08-pwa-banner.css une rupture à 640 qui n'est pas dans l'échelle.
 * Ces trois cas sont internement cohérents — leurs bornes se complètent sans
 * trou ni recouvrement — et ne produisent donc aucune contradiction observable,
 * à la différence de la coupure 768 qui, elle, en produisait une.
 *
 * @package ArgenTous
 * @version 2.0.0
 */

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --Agtcla-primary:       #4F46E5;
  --Agtcla-primary-dark:  #4338CA;
  --Agtcla-primary-light: #EEF2FF;
  --Agtcla-secondary:     #10B981;
  --Agtcla-secondary-dark:#059669;

  /* Neutrals */
  --agt-white:    #FFFFFF;
  --agt-gray-50:  #F9FAFB;
  --agt-gray-100: #F3F4F6;
  --agt-gray-200: #E5E7EB;
  --agt-gray-300: #D1D5DB;
  --agt-gray-400: #9CA3AF;
  --agt-gray-500: #6B7280;
  --agt-gray-600: #4B5563;
  --agt-gray-700: #374151;
  --agt-gray-800: #1F2937;
  --agt-gray-900: #111827;

  /* Semantic */
  --agt-danger:        #DC2626;
  --agt-danger-light:  #FEF2F2;
  --agt-warning:       #F59E0B;
  --agt-warning-light: #FFFBEB;
  --agt-success:       #10B981;
  --agt-success-light: #F0FDF4;
  --agt-info:          #3B82F6;
  --agt-info-light:    #EFF6FF;

  /* Spacing */
  --agt-space-1:  4px;
  --agt-space-2:  8px;
  --agt-space-3:  12px;
  --agt-space-4:  16px;
  --agt-space-5:  20px;
  --agt-space-6:  24px;
  --agt-space-8:  32px;
  --agt-space-10: 40px;

  /* Radii */
  --agt-radius-sm:  6px;
  --agt-radius-md:  10px;
  --agt-radius-lg:  16px;
  --agt-radius-full: 9999px;

  /* Shadows */
  --agt-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --agt-shadow-md: 0 4px 12px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.07);
  --agt-shadow-lg: 0 10px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08);

  /* Typography */
  --agt-font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --agt-font-mono:  "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --agt-text-xs:   11px;
  --agt-text-sm:   13px;
  --agt-text-base: 15px;
  --agt-text-lg:   17px;
  --agt-text-xl:   20px;
  --agt-text-2xl:  24px;
  --agt-text-3xl:  30px;

  /* Transitions */
  --agt-transition: 150ms ease;

  /*
   * CORRECTIF (Chantier 2.6 / Issue UX-06) — jeton de couleur primaire absent.
   *
   * Cinq vues (`login/form`, `login/otp-verify`, `register/step-3-otp`,
   * `send/form`, `withdraw/form`) écrivaient
   * `style="color: var(--agt-color-primary, #0284c7)"`. Ce jeton n'a jamais
   * existé : la marque du plugin est `--Agtcla-primary` (#4F46E5, indigo).
   * Les cinq icônes d'en-tête retombaient donc silencieusement sur la valeur
   * de repli #0284c7 — un bleu ciel qui n'appartient à aucune palette du
   * produit. Le défaut est invisible en revue de code et flagrant à l'écran :
   * l'icône principale de cinq écrans sur sept n'était pas aux couleurs de
   * l'application.
   *
   * Le jeton est défini comme ALIAS de la marque réelle, plutôt que de
   * réécrire les cinq vues avec `--Agtcla-primary` : le nom `--agt-color-*`
   * suit la convention de tous les autres jetons de ce fichier (`--agt-danger`,
   * `--agt-success`…), c'est `--Agtcla-primary` qui est l'exception. L'alias
   * fait converger les deux sans casser ce qui référence déjà l'un ou l'autre.
   */
  --agt-color-primary:      var(--Agtcla-primary);
  --agt-color-primary-dark: var(--Agtcla-primary-dark);

  /*
   * CORRECTIF (Chantier 2.6 / Issue UX-07) — contraste AA non atteint.
   *
   * `--agt-success` (#10B981) et son voisin #16a34a servaient à écrire du
   * TEXTE : le nom du destinataire retourné par la recherche, et le « net à
   * recevoir » du simulateur comme de la modale. Sur les fonds clairs du
   * produit (#fff, #f8fafc), ils plafonnent autour de 3:1 — sous le seuil AA
   * de 4,5:1 pour du texte normal. Ce sont précisément les deux valeurs que
   * l'agent doit lire sans se tromper avant d'engager un débit.
   *
   * On ne touche PAS `--agt-success` : il reste juste pour ce à quoi il sert
   * réellement — fonds de badges, bordures, pastilles d'état, où le seuil ne
   * s'applique pas. On ajoute des variantes dédiées au texte. Séparer les deux
   * usages évite d'assombrir toute la signalétique pour un problème qui ne
   * concerne que les caractères.
   */
  --agt-success-text: #15803D;
  --agt-danger-text:  #BE123C;
  --agt-muted-text:   #475569;
}

/*
 * Contenu réservé aux lecteurs d'écran (Chantier 2.6 / Issue UX-11).
 * Porte la région `aria-live` partagée créée par form-guard.js, dans laquelle
 * le simulateur de frais, la recherche de destinataire et le champ de code de
 * retrait annoncent leurs résultats — aucun d'eux n'était annoncé jusqu'ici.
 */
.agt-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.agt-icon--brand { color: var(--agt-color-primary); }

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/*
 * CORRECTIF (Chantier 0.4 / Issues PWA-00, UX-13) — l'attribut `hidden` battu
 * par un `display:` d'auteur.
 *
 * La feuille de style utilisateur-agent pose `[hidden] { display: none }` avec
 * la spécificité d'un sélecteur d'attribut (0,1,0). N'IMPORTE quelle règle
 * d'auteur portant un `display:` sur le même élément — même une simple classe,
 * de spécificité identique mais déclarée plus tard — l'emporte. Trois éléments
 * du plugin étaient dans ce cas :
 *
 *   .Agtcla-pwa-banner      display:flex  (08-pwa-banner.css)  → bandeau PWA
 *   .Agtcla-pwa-modal       display:flex  (08-pwa-banner.css)  → modale PWA
 *   .agt-filters__row       display:flex  (06-dashboard.css)   → #custom-date-row
 *
 * Conséquence mesurée sous Chrome headless : la modale d'installation occupait
 * l'écran entier et interceptait elementFromPoint() au centre du viewport sur
 * toutes les pages applicatives ; hide() restait sans effet puisqu'il ne fait
 * que reposer l'attribut.
 *
 * Le `!important` est ici le correctif juste et non un contournement : une
 * déclaration importante d'auteur bat toute déclaration normale d'auteur quels
 * que soient l'ordre et la spécificité. Un élément portant `hidden` reste donc
 * masqué même si une règle future lui pose un `display:`. C'est aussi ce que
 * fait Normalize.css depuis 8.0. Pour révéler un élément, RETIRER l'attribut —
 * ne jamais tenter de le neutraliser en CSS.
 */
[hidden] { display: none !important; }

/* ── Base ───────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--agt-font-sans);
  color: var(--agt-gray-800);
  background-color: var(--agt-gray-50);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--Agtcla-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Auth Section Wrapper ───────────────────────────────────────────────────── */
.agt-auth-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--agt-space-4);
  background: linear-gradient(135deg, var(--agt-gray-50) 0%, #EEF2FF 100%);
}

.agt-auth-container {
  width: 100%;
  max-width: 480px;
}

.agt-auth-container--narrow {
  max-width: 420px;
}

/* ── Steps Indicator ────────────────────────────────────────────────────────── */
.agt-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--agt-space-6);
  counter-reset: step;
}

.agt-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--agt-space-1);
  position: relative;
  flex: 1;
}

.agt-step + .agt-step::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--agt-gray-200);
  z-index: 0;
}

.agt-step--done + .agt-step::before { background: var(--Agtcla-secondary); }

.agt-step__number {
  width: 28px;
  height: 28px;
  border-radius: var(--agt-radius-full);
  background: var(--agt-gray-200);
  color: var(--agt-gray-500);
  font-size: var(--agt-text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: background var(--agt-transition), color var(--agt-transition);
}

.agt-step--active .agt-step__number  { background: var(--Agtcla-primary); color: #fff; }
.agt-step--done   .agt-step__number  { background: var(--Agtcla-secondary); color: #fff; }

.agt-step__label {
  font-size: var(--agt-text-xs);
  color: var(--agt-gray-500);
  font-weight: 500;
  white-space: nowrap;
}

.agt-step--active .agt-step__label { color: var(--Agtcla-primary); font-weight: 700; }
.agt-step--done   .agt-step__label { color: var(--Agtcla-secondary); }

/* ── Card ───────────────────────────────────────────────────────────────────── */
.agt-card {
  background: var(--agt-white);
  border-radius: var(--agt-radius-lg);
  box-shadow: var(--agt-shadow-md);
  padding: var(--agt-space-8);
}

.agt-card__header {
  text-align: center;
  margin-bottom: var(--agt-space-6);
}

.agt-card__title {
  font-size: var(--agt-text-2xl);
  font-weight: 800;
  color: var(--agt-gray-900);
  margin: 0 0 var(--agt-space-2);
  letter-spacing: -0.03em;
}

.agt-card__subtitle {
  font-size: var(--agt-text-base);
  color: var(--agt-gray-500);
  margin: 0;
  line-height: 1.5;
}

.agt-card__footer-link {
  text-align: center;
  margin-top: var(--agt-space-5);
  font-size: var(--agt-text-sm);
  color: var(--agt-gray-500);
}

/* ── Alerts ─────────────────────────────────────────────────────────────────── */
.agt-alert {
  padding: var(--agt-space-3) var(--agt-space-4);
  border-radius: var(--agt-radius-sm);
  font-size: var(--agt-text-sm);
  line-height: 1.5;
  margin-bottom: var(--agt-space-5);
  border-left: 4px solid transparent;
}

.agt-alert--error   { background: var(--agt-danger-light);  border-color: var(--agt-danger);  color: #991B1B; }
.agt-alert--warning { background: var(--agt-warning-light); border-color: var(--agt-warning); color: #92400E; }
.agt-alert--success { background: var(--agt-success-light); border-color: var(--agt-success); color: #065F46; }
.agt-alert--info    { background: var(--agt-info-light);    border-color: var(--agt-info);    color: #1E40AF; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.agt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--agt-space-2);
  padding: 12px var(--agt-space-5);
  border-radius: var(--agt-radius-sm);
  font-size: var(--agt-text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--agt-transition), box-shadow var(--agt-transition), opacity var(--agt-transition);
  border: 2px solid transparent;
  text-decoration: none;
  line-height: 1.25;
  white-space: nowrap;
  min-height: 48px;
}

.agt-btn--primary {
  background: var(--Agtcla-primary);
  color: #fff;
  border-color: var(--Agtcla-primary);
}
.agt-btn--primary:hover:not(:disabled) {
  background: var(--Agtcla-primary-dark);
  box-shadow: var(--agt-shadow-sm);
  text-decoration: none;
  color: #fff;
}

.agt-btn--secondary {
  background: var(--Agtcla-secondary);
  color: #fff;
  border-color: var(--Agtcla-secondary);
}
.agt-btn--secondary:hover:not(:disabled) { background: var(--Agtcla-secondary-dark); color: #fff; }

.agt-btn--ghost {
  background: transparent;
  color: var(--Agtcla-primary);
  border-color: var(--agt-gray-200);
}
.agt-btn--ghost:hover:not(:disabled) { background: var(--Agtcla-primary-light); text-decoration: none; }

.agt-btn--full  { width: 100%; }
.agt-btn--sm    { padding: 8px 16px; font-size: var(--agt-text-sm); }

.agt-btn:disabled { opacity: .55; cursor: not-allowed; }
.agt-btn__icon { flex-shrink: 0; }

/* Spinner */
.agt-btn__spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: agt-spin 0.6s linear infinite;
}
@keyframes agt-spin { to { transform: rotate(360deg); } }

/* ── Security badge ──────────────────────────────────────────────────────────── */
.agt-security-badge {
  display: flex;
  align-items: center;
  gap: var(--agt-space-2);
  background: var(--agt-success-light);
  border: 1px solid #BBF7D0;
  border-radius: var(--agt-radius-sm);
  padding: var(--agt-space-3) var(--agt-space-4);
  margin-bottom: var(--agt-space-5);
  font-size: var(--agt-text-sm);
  color: #065F46;
}

/* ── OTP icon ────────────────────────────────────────────────────────────────── */
.agt-otp-icon {
  font-size: 40px;
  margin-bottom: var(--agt-space-2);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .agt-card { padding: var(--agt-space-5); }
  .agt-card__title { font-size: var(--agt-text-xl); }
  .agt-step__label { display: none; }
}

/* ── Lazy image loading (PROMPT 05) ─────────────────────────────────────────── */

/**
 * .Agtcla-lazy — placeholder state for images that haven't loaded yet.
 * Applied to all <img data-src="…"> elements by the plugin's templates.
 * lazy-loader.js removes this class when the image enters the viewport.
 */
.Agtcla-lazy {
  /* Shimmer placeholder identical to .Agtcla-skeleton but for img elements */
  background: linear-gradient(
    90deg,
    var(--agt-gray-100, #f3f4f6) 25%,
    var(--agt-gray-200, #e5e7eb) 50%,
    var(--agt-gray-100, #f3f4f6) 75%
  );
  background-size: 400px 100%;
  animation: Agtcla-lazy-shimmer 1.4s ease infinite;
  /* Prevent layout shift: force the placeholder to take the image's space */
  display: inline-block;
  min-width:  24px;
  min-height: 24px;
}

@keyframes Agtcla-lazy-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/**
 * .Agtcla-lazy--loaded — applied by lazy-loader.js after src is set and
 * the image's load event fires. Triggers the fade-in transition.
 */
.Agtcla-lazy--loaded {
  animation: none;
  background: none;
  /* Fade-in when the real image appears */
  animation: Agtcla-img-fade-in 300ms ease both;
}

@keyframes Agtcla-img-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Respect prefers-reduced-motion for lazy shimmer */
@media (prefers-reduced-motion: reduce) {
  .Agtcla-lazy,
  .Agtcla-lazy--loaded { animation: none; }
}

/* ── Security shield scope ────────────────────────────────────────────────── */

/**
 * .Agtcla-container — outer wrapper added by DashboardController.
 * Used by security-shield.js to scope right-click and F12 protection.
 * Provides no visual styling — purely a JS hook.
 */
.Agtcla-container {
  /* No visual style — this class exists only as a JS boundary marker */
}

/* ── Persistent Bottom Navigation (Mobile-First) ─────────────────────────── */
.agt-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 64px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.agt-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  text-decoration: none;
  color: var(--agt-gray-500);
  transition: color var(--agt-transition), transform 0.1s ease;
  min-height: 48px; /* Hit target minimum */
}

.agt-bottom-nav__item:active {
  transform: scale(0.96);
}

.agt-bottom-nav__icon {
  margin-bottom: 4px;
  transition: transform var(--agt-transition);
}

.agt-bottom-nav__item:hover .agt-bottom-nav__icon,
.agt-bottom-nav__item--active .agt-bottom-nav__icon {
  stroke: var(--Agtcla-primary);
}

.agt-bottom-nav__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.agt-bottom-nav__item--active {
  color: var(--Agtcla-primary);
}

/*
 * CHANTIER 4.10 (CSS-01) — coupure alignée de 769/768 sur 768/767.
 *
 * Ces deux requêtes découpaient l'axe à 768|769 pendant que 06-dashboard.css
 * le découpait à 767|768. À 768 pixels EXACTEMENT, les deux feuilles se
 * contredisaient sur la même page : la grille du tableau de bord basculait en
 * disposition bureau (min-width: 768px) tandis que la barre de navigation du
 * bas restait affichée et que le corps conservait la réserve de 64 px prévue
 * pour elle. 768 px est la largeur d'un iPad en portrait — le cas n'avait rien
 * de théorique.
 *
 * C'est 06-dashboard.css qui tenait la bonne convention (max = point − 1,
 * min = point) ; ces deux blocs s'y alignent.
 */

/* Hide on desktop screens */
@media (min-width: 768px) {
  .agt-bottom-nav {
    display: none;
  }
}

/* Mobile hit targets and layout adjustments */
@media (max-width: 767px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0) + 16px) !important;
  }
  
  .agt-btn,
  .Agtcla-pwa-banner__btn,
  .Agtcla-pwa-modal__close {
    min-height: 48px !important;
  }
}

/* ── Generic Modal component ────────────────────────────────────────────── */
.agt-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.agt-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: agt-fade-in 200ms ease-out both;
}

.agt-modal__box {
  position: relative;
  background: #ffffff;
  border-radius: var(--agt-radius-lg, 16px);
  width: 100%;
  max-width: 440px;
  padding: 24px;
  box-shadow: var(--agt-shadow-lg);
  z-index: 10001;
  animation: agt-slide-up 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes agt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes agt-slide-up {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}