/* ═══════════════════════════════════════════════════════════════════════════
   ev-auth-column-v303.css  —  2026-05-25
   ───────────────────────────────────────────────────────────────────────────
   Demande Directeur : la page d'authentification (#p-auth) doit s'afficher
   en COLONNE UNIQUE CENTRÉE — identique mobile & desktop. Le split-screen
   v300 (hero à gauche, formulaire sticky à droite) éparpille les éléments
   sur grand écran. On simplifie pour revenir à la lecture verticale stricte.

   ORDRE FINAL ATTENDU (de haut en bas, dans le bloc central) :
     1. Hero        — 🎮 icône + "EspaceVirtuel PRO" + sous-titre
     2. Encadré SOMBRE  — "Programme de Fidélité EspaceVirtuel" (legacy)
     3. Encadré CLAIR   — "Programme de Parrainage !" (legacy)
     4. Tabs        — [Se connecter] [S'inscrire]
     5. Formulaire  — Identifiant / Mot de passe / bouton Se connecter

   On NEUTRALISE :
     • la grille @media (min-width:1024px) du v300
     • le sticky top:88px du formulaire
     • les sections v300 injectées en JS qui surchargent la page
       (.ev-features, .ev-trio, .ev-reassur, .ev-howitworks,
        .ev-testimonials, .ev-partners)

   On RESTAURE :
     • le contenu legacy de #ev-promo-card (caché par v300)
     • le bloc #ev-parrainage-card

   On RECOLORE :
     • #ev-promo-card → fond sombre + texte clair (was: #FFFFFF/#0F172A)
     • #ev-parrainage-card → conserve fond clair, force texte slate-900 pour
       contraste demandé
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── 1. CONTENEUR PARENT — page entière, fond sombre, contenu centré ─── */
body:has(#p-auth.on) #p-auth {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 88px 16px 64px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ─── 2. BLOC CENTRAL UNIQUE — colonne avec max-width strict ─────────── */
/* On bat la règle .aw { max-width:1280px } du v300 + on supprime la grille. */
body:has(#p-auth.on) #p-auth .aw {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 448px !important;   /* ≈ Tailwind max-w-md */
  margin: 0 auto !important;
  grid-template-columns: none !important; /* casse la grille v300 */
  align-items: stretch !important;
}
@media (min-width: 768px) {
  body:has(#p-auth.on) #p-auth .aw {
    max-width: 512px !important;  /* ≈ Tailwind max-w-lg sur desktop */
  }
}

/* ─── 3. KILL SPLIT-SCREEN DESKTOP v300 ─────────────────────────────────
   Le v300 plaçait `.atabs`, `#form-login`, `#form-signup` en grid-column:2
   avec position:sticky. On force tout en colonne 1, statique. */
@media (min-width: 1024px) {
  body:has(#p-auth.on) #p-auth .aw {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 24px !important;
  }
  body:has(#p-auth.on) #p-auth .ahero,
  body:has(#p-auth.on) #p-auth #ev-promo-card,
  body:has(#p-auth.on) #p-auth .atabs,
  body:has(#p-auth.on) #p-auth #form-login,
  body:has(#p-auth.on) #p-auth #form-signup,
  body:has(#p-auth.on) #p-auth > .aw > div:last-child {
    grid-column: auto !important;
    position: static !important;
    top: auto !important;
  }
}

/* ─── 4. HIDE — sections v300 NON demandées par le Directeur ────────── */
body:has(#p-auth.on) .ev-features,
body:has(#p-auth.on) .ev-trio,
body:has(#p-auth.on) .ev-reassur,
body:has(#p-auth.on) .ev-howitworks,
body:has(#p-auth.on) .ev-testimonials,
body:has(#p-auth.on) .ev-partners,
body:has(#p-auth.on) #p-auth .ev-features,
body:has(#p-auth.on) #p-auth .ev-trio,
body:has(#p-auth.on) #p-auth .ev-reassur,
body:has(#p-auth.on) #p-auth .ev-howitworks,
body:has(#p-auth.on) #p-auth .ev-testimonials,
body:has(#p-auth.on) #p-auth .ev-partners {
  display: none !important;
}

/* ─── 5. RESHOW — contenu legacy de #ev-promo-card et #ev-parrainage-card
   v300 §5 avait caché ces blocs (`display:none !important`) pour les
   remplacer par le trio. On annule ici.
   ⚠️ v300 JS renomme l'ID de #ev-promo-card → #programme après boot
   (ev-homepage-v300.js l.180). On dual-cible les deux IDs partout. */
body:has(#p-auth.on) #p-auth #ev-promo-card > div.tw-flex,
body:has(#p-auth.on) #p-auth #ev-promo-card > div.tw-flex + div,
body:has(#p-auth.on) #p-auth #ev-promo-card > #ev-parrainage-card,
body:has(#p-auth.on) #p-auth #programme > div.tw-flex,
body:has(#p-auth.on) #p-auth #programme > div.tw-flex + div,
body:has(#p-auth.on) #p-auth #programme > #ev-parrainage-card {
  display: flex !important;
}
body:has(#p-auth.on) #p-auth #ev-promo-card > hr,
body:has(#p-auth.on) #p-auth #programme > hr {
  display: block !important;
}

/* ─── 6. ENCADRÉ SOMBRE — #ev-promo-card / #programme (Programme de Fidélité)
   v300 le neutralisait en background:transparent. Inline = bg blanc.
   Le Directeur veut un fond SOMBRE avec texte clair. */
body:has(#p-auth.on) #p-auth #ev-promo-card,
body:has(#p-auth.on) #p-auth #programme {
  background: #131C2E !important;
  border: 1px solid rgba(34,211,238,.18) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  color: #F1F5F9 !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: left !important;
}
/* Titre "🎮 Programme de Fidélité EspaceVirtuel" — était teal foncé sur blanc */
body:has(#p-auth.on) #p-auth #ev-promo-card > div[style*="font-weight:800"],
body:has(#p-auth.on) #p-auth #programme > div[style*="font-weight:800"] {
  color: #5EEAD4 !important;          /* teal clair sur fond sombre */
  background: transparent !important;
  text-align: center !important;
  font-size: 16px !important;
  margin-bottom: 14px !important;
}
/* Boîte interne (coffre + offre) — était fond gris pâle slate-50 */
body:has(#p-auth.on) #p-auth #ev-promo-card .tw-bg-slate-50,
body:has(#p-auth.on) #p-auth #programme .tw-bg-slate-50 {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}
/* Tous les textes inline qui étaient slate-* foncés sur blanc → clair sur sombre */
body:has(#p-auth.on) #p-auth #ev-promo-card [style*="color:#475569"],
body:has(#p-auth.on) #p-auth #ev-promo-card [style*="color:#334155"],
body:has(#p-auth.on) #p-auth #programme [style*="color:#475569"],
body:has(#p-auth.on) #p-auth #programme [style*="color:#334155"] {
  color: #CBD5E1 !important;
}
body:has(#p-auth.on) #p-auth #ev-promo-card [style*="color:#0F172A"],
body:has(#p-auth.on) #p-auth #programme [style*="color:#0F172A"] {
  color: #F8FAFC !important;
}
/* "+2 DH" et "10 DH" en vert — on garde le vert mais on l'éclaircit */
body:has(#p-auth.on) #p-auth #ev-promo-card [style*="color:#047857"],
body:has(#p-auth.on) #p-auth #programme [style*="color:#047857"] {
  color: #34D399 !important;
}
/* Ligne hr de séparation interne — était slate-200 */
body:has(#p-auth.on) #p-auth #ev-promo-card > hr,
body:has(#p-auth.on) #p-auth #programme > hr {
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* ─── 7. ENCADRÉ CLAIR — #ev-parrainage-card (Programme de Parrainage) ─
   Reste sur fond lavande clair (#FAF5FF) ; texte forcé slate-900 pour
   contraste demandé. */
body:has(#p-auth.on) #p-auth #ev-parrainage-card {
  background: #FAF5FF !important;
  border: 1px solid #A855F7 !important;
  border-radius: 12px !important;
  padding: 14px !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-top: 16px !important;
}
body:has(#p-auth.on) #p-auth #ev-parrainage-card h4 {
  color: #6D28D9 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}
body:has(#p-auth.on) #p-auth #ev-parrainage-card p {
  color: #0F172A !important;        /* ≈ text-slate-900 demandé */
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 4px 0 0 !important;
  line-height: 1.55 !important;
}
body:has(#p-auth.on) #p-auth #ev-parrainage-card p span[style*="color:#0F766E"] {
  color: #0F766E !important;        /* "4 DH" reste teal */
  font-weight: 800 !important;
}

/* ─── 8. HERO — centré (v300 le mettait text-align:left pour le split) ─ */
body:has(#p-auth.on) #p-auth .ahero {
  text-align: center !important;
  margin-bottom: 8px !important;
}
body:has(#p-auth.on) #p-auth .ahero .hi {
  display: inline-flex !important;
  margin: 0 auto 16px !important;
}
body:has(#p-auth.on) #p-auth .ahero h1 {
  text-align: center !important;
  margin: 0 0 10px !important;
}
body:has(#p-auth.on) #p-auth .ahero p {
  text-align: center !important;
  margin: 0 auto !important;
  max-width: 100% !important;
}

/* ─── 9. TABS — pleine largeur du bloc, alignés en ligne ────────────── */
body:has(#p-auth.on) #p-auth .atabs {
  width: 100% !important;
  display: flex !important;
  margin: 0 !important;
}

/* ─── 10. FORMS — pleine largeur du bloc ────────────────────────────── */
body:has(#p-auth.on) #p-auth #form-login,
body:has(#p-auth.on) #p-auth #form-signup {
  width: 100% !important;
  margin: 0 !important;
}

/* Fin du fichier — ev-auth-column-v303.css */