/* ═══════════════════════════════════════════════════════════════════════
   codes-activation.css — Styles du module d'activation par code (Phase A)
   ─────────────────────────────────────────────────────
   Couvre :
     - Section sidebar "Code d'activation" (input + bouton + feedback)
     - État "actif" affiché à la place de la saisie quand un code est validé
     - Badge dans le header
     - Masquage des anciens sélecteurs free/premium (.mode-selector,
       .sidebar-mode-toggle) durant la Phase A

   Préfixe utilisé : .ca-* (Code Activation)
   Cohérence palette : utilise les variables CSS définies dans base.css
   (--astro-accent, --astro-accent-hover, etc.).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   1) MASQUAGE DES ANCIENS SÉLECTEURS DE MODE (Phase A)
   ─────────────────────────────────────────────────────
   Le passage en Premium est désormais piloté UNIQUEMENT par un code.
   On masque visuellement (display:none) :
     - le sélecteur header  : .mode-selector
     - la section sidebar   : la sidebar-section qui contient .sidebar-mode-toggle
   Le HTML reste en place pour faciliter un rollback éventuel.
═══════════════════════════════════════════════════════════════════════ */
.mode-selector {
  display: none !important;
}

/* On masque le bloc complet "Mode" dans la sidebar (titre + boutons). */
.sidebar-section:has(.sidebar-mode-toggle) {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2) SECTION SIDEBAR "CODE D'ACTIVATION"
   ─────────────────────────────────────────────────────
   Réutilise la structure .sidebar-section pour s'intégrer sans frottement.
═══════════════════════════════════════════════════════════════════════ */

/* Le wrapper principal : on hérite des paddings via .sidebar-section */
.ca-section {
  /* Aucun override : on profite de .sidebar-section parent */
}

/* ─── Bloc de saisie (input + bouton + feedback) ───
       B.5.1bis — empilement vertical : date de naissance + code + bouton */
.ca-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Label discret au-dessus du champ date */
.ca-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: -2px;
  font-weight: 600;
}

/* Le datepicker natif a une apparence un peu différente — on harmonise
   + on FORCE explicitement les couleurs pour éviter le bug texte blanc/fond blanc
   qui peut survenir sur Chrome quand color-scheme dark mal interprété */
.ca-input-date {
  color-scheme: dark;                      /* datepicker en thème sombre */
  font-family: inherit;
  text-transform: none !important;         /* annule uppercase hérité de .ca-input */
  color: #fff !important;                   /* force texte blanc */
  -webkit-text-fill-color: #fff !important; /* idem WebKit */
  background-color: rgba(255, 255, 255, 0.08) !important;
}
.ca-input-date::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
  opacity: 0.85;
}
.ca-input-date::-webkit-datetime-edit,
.ca-input-date::-webkit-datetime-edit-fields-wrapper,
.ca-input-date::-webkit-datetime-edit-day-field,
.ca-input-date::-webkit-datetime-edit-month-field,
.ca-input-date::-webkit-datetime-edit-year-field {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* Placeholder texte quand le champ date est vide (Chrome récent) */
.ca-input-date::-webkit-datetime-edit-text {
  color: rgba(255, 255, 255, 0.55) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
}

.ca-input {
  flex: 1;
  min-width: 0;            /* anti-overflow flex */
  padding: 0.4rem 0.55rem;

  /* ─── FOND : forçage TOTAL pour éviter le rendu blanc natif Chrome ───
     Le navigateur applique un fond clair par défaut sur les inputs
     vides (thème système). On annule via -webkit-appearance + multiple
     déclarations background avec !important. */
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-button);

  /* Forçage de la couleur du texte (sidebar = fond sombre) :
     - color           = standard
     - text-fill-color = WebKit (Safari/Chrome) qui peut surcharger via autofill
     - !important      = blindage contre toute règle CSS plus spécifique */
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;

  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ca-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5);
  text-transform: none;
  letter-spacing: 0;
  opacity: 1;              /* Firefox baisse l'opacité par défaut */
}
.ca-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--astro-accent);
}

/* ─── Fix anti-autofill (Chrome/Edge/Safari) ─────────────────────────
   Quand le navigateur autofill un champ, il force un fond jaune et
   surcharge la couleur du texte via -webkit-text-fill-color. On annule
   ET on bloque l'apparition de la suggestion d'autofill via une
   transition très longue qui retarde l'application du style autofill. */
.ca-input:-webkit-autofill,
.ca-input:-webkit-autofill:hover,
.ca-input:-webkit-autofill:focus,
.ca-input:-webkit-autofill:active,
.ca-input:autofill {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset !important;
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  caret-color: #fff;
  transition: background-color 99999s ease-in-out 0s, color 99999s ease-in-out 0s;
}

.ca-btn-valider {
  flex-shrink: 0;
  background: var(--astro-accent);
  border: 0;
  color: #fff;
  padding: 0.4rem 0.7rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background 0.15s ease;
}
.ca-btn-valider:hover {
  background: var(--astro-accent-hover);
}
.ca-btn-valider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Zone de feedback (succès / erreur / info) ─── */
.ca-feedback {
  margin-top: 0.45rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-button);
  font-size: 0.74rem;
  line-height: 1.35;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.25s ease, padding 0.2s ease;
}
.ca-feedback.ca-feedback-visible {
  opacity: 1;
  max-height: 80px;
}
.ca-feedback-succes {
  background: rgba(109, 141, 163, 0.20);
  color: #B8E2FF;
  border: 1px solid rgba(109, 141, 163, 0.4);
}
.ca-feedback-erreur {
  background: rgba(139, 58, 58, 0.20);
  color: #FFB8B8;
  border: 1px solid rgba(139, 58, 58, 0.4);
}
.ca-feedback-info {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════
   3) ÉTAT "ACTIVÉ" — affiché quand un code est validé
   ─────────────────────────────────────────────────────
   Visuellement proche de .sidebar-status-card : carte dark légèrement
   surlignée par une bordure cyan.
═══════════════════════════════════════════════════════════════════════ */
.ca-actif {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  background: rgba(83, 158, 218, 0.08);
  border: 1px solid rgba(83, 158, 218, 0.30);
  border-radius: var(--radius-button);
}
.ca-actif-titre {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
}
.ca-actif-titre::before {
  content: '✓';
  color: var(--astro-accent);
  font-weight: 700;
}
.ca-actif-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.76rem;
  line-height: 1.3;
}
.ca-actif-expire {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
  font-style: italic;
}
.ca-btn-desactiver {
  align-self: flex-start;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.7);
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
  font-family: var(--sans);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ca-btn-desactiver:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════
   4) BADGE DANS LE HEADER
   ─────────────────────────────────────────────────────
   Affiché à côté du sous-titre du header quand un accès Premium est actif.
═══════════════════════════════════════════════════════════════════════ */
.header-badge-activation {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  background: linear-gradient(135deg, var(--astro-accent) 0%, var(--astro-accent-hover) 100%);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(83, 158, 218, 0.25);
  vertical-align: middle;
  margin-left: 0.5rem;
}
.header-badge-activation::before {
  content: '✦';
  font-size: 0.85em;
}

/* Variantes par type — couleur de fond contextualisée */
.header-badge-admin {
  background: linear-gradient(135deg, #324875 0%, #192E5D 100%);
}
.header-badge-promo {
  background: linear-gradient(135deg, #539EDA 0%, #3D93D4 100%);
}
.header-badge-cadeau {
  background: linear-gradient(135deg, #6D8DA3 0%, #5E7190 100%);
}
.header-badge-formation {
  background: linear-gradient(135deg, #8B7355 0%, #6B5535 100%);
}

/* ═══════════════════════════════════════════════════════════════════════
   5) RESPONSIVE / SIDEBAR REPLIÉE
   ─────────────────────────────────────────────────────
   Quand la sidebar est repliée (.sidebar-collapsed), on cache la section
   "Code d'activation" comme les autres sections labellisées.
═══════════════════════════════════════════════════════════════════════ */
.app-shell.sidebar-collapsed .ca-section {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   6) ADAPTATION DES TEASERS SELON LE MODE (V3.9.1 — S1 #3.A)
   ─────────────────────────────────────────────────────
   Deux comportements selon le mode actif :

   ─── Mode FREE ───
   Le teaser .ha-premium-section reste tel quel : cards floutées + lock
   overlay + CTA "Débloquer 14,90 €" → push commercial classique.

   ─── Mode PREMIUM ───
   On garde la section visible mais on la transforme en "Vos avantages
   Premium — bientôt disponibles" :
     - bascule du titre/sub vers la version Premium (déjà ajoutée en HTML)
     - retrait du flou et de l'opacité réduite sur le contenu des cards
     - lock overlay "🔒 Premium" remplacé par badge "À venir" cyan
     - CTA d'achat masqué (l'utilisateur a déjà l'accès)

   Le bandeau .hd-premium-banner (Horoscope perso) reste masqué en
   Premium pour le moment — pas de placeholder à proposer là-bas, les
   prévisions hebdo/mensuelles/annuelles ne sont pas encore définies.
═══════════════════════════════════════════════════════════════════════ */

/* ─── Bascule des titres Free ↔ Premium ──────────────────────────── */
.ha-title-premium,
.ha-sub-premium { display: none; }

body.mode-premium .ha-title-free,
body.mode-premium .ha-sub-free   { display: none; }
body.mode-premium .ha-title-premium { display: block; }
body.mode-premium .ha-sub-premium   { display: block; }

/* ─── Premium : déverrouillage visuel des cards "à venir" ────────── */
body.mode-premium .ha-locked-card .ha-locked-header,
body.mode-premium .ha-locked-card .ha-locked-text {
  /* On annule le flou et l'opacité pour que le contenu soit lisible */
  filter: none;
  opacity: 1;
  user-select: text;
}

/* L'overlay "🔒 Premium" est masqué : remplacé par un badge "À venir"
   en pseudo-élément ::before sur la card. */
body.mode-premium .ha-locked-overlay {
  display: none;
}

body.mode-premium .ha-locked-card {
  /* Légère bordure cyan pour signaler que la card est "active" */
  border-color: rgba(83, 158, 218, 0.4);
  box-shadow: 0 1px 3px rgba(83, 158, 218, 0.08);
}

body.mode-premium .ha-locked-card::before {
  content: 'À venir';
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  padding: 0.28rem 0.65rem;
  background: linear-gradient(135deg, var(--astro-accent), var(--astro-accent-hover));
  color: #fff;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(83, 158, 218, 0.25);
  z-index: 2;     /* au-dessus du contenu défloutté */
}

/* ─── Premium : on masque le CTA d'achat (déjà payé/débloqué) ───── */
body.mode-premium .ha-cta-block {
  display: none;
}

/* ─── Bandeau Premium horoscope du jour (masqué en Premium) ────── */
body.mode-premium .hd-premium-banner {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   7) BLOC SIDEBAR "VOTRE ACCÈS" — bascule Free / Premium (V3.9.1)
   ─────────────────────────────────────────────────────
   Mode FREE par défaut : on affiche la carte Free + le CTA d'upsell.
   Mode PREMIUM : on affiche la carte Premium et on masque le CTA
   (l'utilisateur a déjà l'accès, pas besoin de pousser à l'achat).
═══════════════════════════════════════════════════════════════════════ */
.status-card-premium {
  display: none;     /* caché par défaut, visible uniquement en Premium */
}

body.mode-premium .status-card-free       { display: none; }
body.mode-premium .status-card-premium    { display: flex; }
body.mode-premium .sidebar-cta-free-only  { display: none; }

/* Pastille de la carte Premium : couleur "or-mat" pour signaler un état
   premium plus prestigieux que la pastille cyan du Free. */
.status-dot-premium {
  background: var(--or-mat) !important;
  box-shadow: 0 0 0 3px rgba(50, 72, 117, 0.35) !important;
}