/* ═══════════════════════════════════════════════════════════════════════
   LUXING — FIXES PRE-PROD (J-2 bascule prod 15/05/2026)
   ═══════════════════════════════════════════════════════════════════════
   Fichier additif (load AFTER components.css + landing.css) pour patches
   correctifs UI/UX/WCAG sans toucher aux fichiers core. Peut être
   supprimé sans casser le rendu (perte des correctifs uniquement).

   Sections :
     1. Défensives titres sur fond foncé (bug "navy sur navy")
     2. WCAG — contraste liens, focus visible auth
     3. Utilitaires (icône gold, etc.)
     4. Responsive guards (homepage + contact + tarifs)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. DÉFENSIVES TITRES SUR FOND FONCÉ ─────────────────────────────────
   La règle globale `body.luxing-app h1..h6 { color: var(--lx-text-primary) }`
   force du navy foncé sur tous les titres, ce qui casse les sections
   à fond navy (titre invisible navy-sur-navy). On force #fff sur tous
   les conteneurs navy connus de la codebase.
*/
body.luxing-app .lxl-section--navy h1,
body.luxing-app .lxl-section--navy h2,
body.luxing-app .lxl-section--navy h3,
body.luxing-app .lxl-section--navy h4,
body.luxing-app .lxl-section--navy h5,
body.luxing-app .lxl-section--navy h6,
body.luxing-app .lxl-cta--navy h1,
body.luxing-app .lxl-cta--navy h2,
body.luxing-app .lxl-cta--navy h3,
body.luxing-app .lxl-cta--navy h4,
body.luxing-app .lxl-cta--navy h5,
body.luxing-app .lxl-final-cta h1,
body.luxing-app .lxl-final-cta h2,
body.luxing-app .lxl-final-cta h3,
body.luxing-app .lxl-final-cta h4,
body.luxing-app .lxl-final-cta h5,
body.luxing-app .lx-hero-card h1,
body.luxing-app .lx-hero-card h2,
body.luxing-app .lx-hero-card h3,
body.luxing-app .lx-hero-card h4,
body.luxing-app .lx-hero-card h5,
body.luxing-app .lx-bg-navy h1,
body.luxing-app .lx-bg-navy h2,
body.luxing-app .lx-bg-navy h3,
body.luxing-app .lx-bg-navy h4,
body.luxing-app .lx-bg-navy h5,
body.luxing-app [data-theme="dark"] h1,
body.luxing-app [data-theme="dark"] h2,
body.luxing-app [data-theme="dark"] h3,
body.luxing-app [data-theme="dark"] h4,
body.luxing-app [data-theme="dark"] h5 {
    color: #fff;
}

/* Idem pour la pricing card "featured" navy (landing) — h3 du plan central */
body.luxing-app .lxl-price-card--featured h2,
body.luxing-app .lxl-price-card--featured h3,
body.luxing-app .lxl-price-card--featured h4 {
    color: #fff;
}

/* ── 2. WCAG — focus auth + lien souligné ───────────────────────────────
   Audit Sorank : focus-visible explicite obligatoire sur inputs auth
   pour les utilisateurs clavier. Auth.css gère via :focus, mais sans
   :focus-visible le ring s'affiche aussi au click (gênant).
*/
body.lx-auth-page .lx-input:focus-visible,
body.lx-auth-page input:focus-visible,
body.lx-auth-page button:focus-visible,
body.lx-auth-page a:focus-visible {
    outline: 2px solid #0A1F44;
    outline-offset: 2px;
}

/* Placeholder auth — alignement WCAG (parité avec tokens.css:50) */
body.lx-auth-page .lx-input::placeholder,
body.lx-auth-page input::placeholder {
    color: #6b7280;
}

/* Liens texte courant : sur fond clair, garantir un underline visuel
   minimal pour les liens dans paragraphes legal/contact (sinon ils ne
   se distinguent que par la couleur — fail WCAG 1.4.1).
*/
.lx-legal a,
.lx-text-accent {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── 3. UTILITAIRES réutilisables ────────────────────────────────────────
   Mutualise les patterns inline répétés (contact icônes gold, etc.).
*/
.lx-icon-gold {
    color: var(--lx-gold, #C9A961);
    flex-shrink: 0;
}
.lx-icon-gold-sm { width: 20px; height: 20px; }
.lx-icon-gold-md { width: 24px; height: 24px; }

/* Détail card uniformisé (utilisé sur tarifs FAQ + contact) */
.lx-details-card {
    padding: var(--lx-space-4) var(--lx-space-5);
}
.lx-details-card > summary {
    cursor: pointer;
    font-weight: var(--lx-weight-semibold);
    color: var(--lx-text-primary);
}
.lx-details-card > summary::-webkit-details-marker { color: var(--lx-gold, #C9A961); }
.lx-details-card > p {
    margin-top: var(--lx-space-3);
    font-size: var(--lx-text-sm);
    line-height: 1.6;
    color: var(--lx-text-muted);
}

/* ── 4. RESPONSIVE GUARDS ────────────────────────────────────────────────
   Sécurités responsive pour pages frontend public + auth. Garantit
   pas de scroll horizontal en dessous de 375px et touch targets >= 44px.
*/

/* Pas de scroll horizontal sur les pages publiques (sécurité globale) */
body.luxing-app:not(.has-auth-layout) { overflow-x: hidden; }
body.lx-auth-page { overflow-x: hidden; }

/* Touch target minimum sur tous les boutons lx-btn / lx-auth-submit */
@media (max-width: 768px) {
    body.luxing-app .lx-btn,
    body.lx-auth-page .lx-auth-submit,
    body.lx-auth-page .lx-auth-toggle-pwd {
        min-height: 44px;
    }
    body.luxing-app .lx-btn-sm {
        min-height: 38px; /* sm reste compact mais accessible */
    }
}

/* Tarifs — paywall banner responsive (évite débordement viewport <420px) */
@media (max-width: 640px) {
    .lx-card[role="alert"] {
        padding: var(--lx-space-4) !important;
    }
}

/* Contact — la grille 2 colonnes passe en 1 colonne via @push styles
   in contact.blade.php. Le footer mention/CGUV link s'enroule sur mobile. */
@media (max-width: 480px) {
    .lx-page-title {
        font-size: clamp(1.5rem, 6vw, 1.875rem) !important;
    }
}

/* Cookie banner — sur très petits écrans, force action stacking */
@media (max-width: 380px) {
    .lx-cookie-banner-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .lx-cookie-banner-actions .lx-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── 5. HIÉRARCHIE CTA — partials front (cta.blade.php, hero.blade.php) ──
   Sur les partials encore en Bootstrap `btn btn-primary`, on neutralise
   visuellement pour qu'ils ressemblent au lx-btn-primary. Stratégie
   défensive (sans renommer les classes) pour éviter régression onClick.
*/
body.luxing-app .lx-partial-cta .btn.btn-primary,
body.luxing-app .lx-partial-cta .btn-primary {
    background-color: var(--lx-navy, #0A1F44);
    border-color: var(--lx-navy, #0A1F44);
    color: #fff;
    border-radius: var(--lx-radius-md, 8px);
    font-weight: var(--lx-weight-semibold, 600);
    padding: 0.625rem 1.25rem;
    transition: background-color 150ms ease;
}
body.luxing-app .lx-partial-cta .btn.btn-primary:hover {
    background-color: var(--lx-navy-hover, #08193a);
    border-color: var(--lx-navy-hover, #08193a);
    color: #fff;
}