/**
 * OrIAntation - Mobile UX Improvements
 * Fichier nettoyé - base saine pour repartir
 */

/* ====================================
   FIX #1: Espacement footer en mobile
   ==================================== */

@media (max-width: 639px) {
    /* Réduire l'espace entre le contenu et le footer */
    #authContainer {
        min-height: auto !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* FIX #6: Onglets qui débordent - élargir pour occuper tout l'espace */
    nav[aria-label="Tabs"] {
        width: 100% !important;
        padding: 0.25rem !important; /* Padding réduit */
        margin: 0 !important;
    }

    /* Réduire padding des onglets pour qu'ils tiennent mieux */
    .tab-btn.step2-tab {
        padding: 0.5rem 0.25rem !important; /* 8px vertical, 4px horizontal */
        min-width: auto !important;
        flex: 1 1 0 !important; /* Égaliser la largeur des onglets */
        max-width: none !important; /* Pas de limite */
    }

    /* Emoji dans les onglets */
    .tab-btn.step2-tab span.text-lg {
        font-size: 1.25rem !important; /* 20px pour l'emoji */
        line-height: 1 !important;
        margin-bottom: 0.25rem !important;
    }

    /* Texte dans les onglets sur 2 lignes */
    .tab-btn.step2-tab span.text-xs {
        font-size: 0.625rem !important; /* 10px */
        line-height: 1.2 !important;
    }

    /* Réduire espacement entre onglets */
    nav[aria-label="Tabs"].space-x-1 {
        gap: 0.125rem !important; /* 2px */
    }

    /* Container des onglets - pleine largeur */
    .mb-6.flex.justify-center {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* FIX #7: Cacher sous-texte Journal et Rétroplanning en mobile */
    /* Cibler via onclick contenant les IDs */
    .step-card[onclick*="journal"] .text-slate-500,
    .step-card[onclick*="retroplanning"] .text-slate-500 {
        display: none !important;
    }

    /* FIX #9: Réduire taille textes Briefing de la Mission */
    /* Titre "Briefing de la Mission" */
    .bg-white .text-xl.font-bold.text-OrIAntation-darkblue.mb-4 {
        font-size: 1.125rem !important; /* 18px */
    }

    /* Description du briefing */
    .bg-white .text-slate-600.mb-4.space-y-2 {
        font-size: 0.9375rem !important; /* 15px */
    }

    /* Bloc "Ta mission" avec fond cyan */
    .bg-cyan-50.border-l-4.border-cyan-400 {
        padding: 0.5rem !important; /* 8px au lieu de 16px */
    }

    .bg-cyan-50 .font-semibold.text-cyan-900 {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.4 !important;
    }

    /* FIX #8: Centrer l'icône dans la carte "Mieux se connaître" */
    .step-card[onclick*="step0"] .prominent-card-inner .text-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .step-card[onclick*="step0"] .prominent-card-inner .text-cyan-700 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* FIX #2a: Modale de sélection de profil - harmonisée */
    #guideRoleModal .max-w-2xl {
        padding: 0.75rem !important; /* 12px - harmonisé */
    }

    #guideRoleModal h2 {
        font-size: 1.5rem !important; /* 24px */
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
    }

    #guideRoleModal > div > div > p {
        font-size: 1rem !important; /* 16px */
        line-height: 1.5 !important;
    }

    #guideRoleModal button {
        padding: 0.75rem !important; /* 12px - harmonisé */
    }

    #guideRoleModal button span.text-lg {
        font-size: 1rem !important; /* 16px */
    }

    #guideRoleModal button span.text-xs {
        font-size: 0.875rem !important; /* 14px */
    }

    /* Icônes SVG - taille harmonisée */
    #guideRoleModal button svg {
        width: 2rem !important; /* 32px - proportionnel */
        height: 2rem !important;
        margin-bottom: 0.375rem !important;
    }

    #guideRoleModal img {
        width: 3rem !important; /* 48px - logo réduit mais visible */
        height: 3rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Grille de boutons */
    #guideRoleModal .grid {
        gap: 0.75rem !important; /* 12px - harmonisé */
    }

    /* Marges harmonisées */
    #guideRoleModal .mb-6 {
        margin-bottom: 0.75rem !important;
    }

    #guideRoleModal .mt-8 {
        margin-top: 1rem !important;
    }

    /* FIX #2b: Modales de détail des étapes/fonctionnalités */

    /* Modale de détail - padding harmonisé avec le guide */
    #etapeDetailModal .max-w-3xl {
        padding: 0.75rem !important; /* 12px */
    }

    /* Titre de la modale - harmonisé avec h2 du guide */
    #etapeDetailModal h2 {
        font-size: 1.25rem !important; /* 20px */
        line-height: 1.3 !important;
    }

    /* Emoji dans le titre - proportionnel */
    #etapeDetailModal .text-3xl,
    #etapeDetailModal .text-5xl {
        font-size: 2.5rem !important; /* 40px */
    }

    /* Bouton fermer */
    #etapeDetailModal button svg {
        width: 1.5rem !important; /* 24px */
        height: 1.5rem !important;
    }

    /* Sections colorées (Objectif, Fonctionnement, Conseil) */
    #etapeDetailModal .p-3,
    #etapeDetailModal .p-5 {
        padding: 0.75rem !important; /* 12px - harmonisé */
    }

    /* Titres des sections - harmonisé avec textes guide */
    #etapeDetailModal .font-semibold {
        font-size: 1rem !important; /* 16px */
        margin-bottom: 0.375rem !important;
    }

    /* Textes des sections - harmonisé avec paragraphes guide */
    #etapeDetailModal .text-slate-700,
    #etapeDetailModal .text-blue-900,
    #etapeDetailModal .text-cyan-900,
    #etapeDetailModal .text-green-900 {
        font-size: 1rem !important; /* 16px */
        line-height: 1.5 !important;
    }

    /* Espacement entre sections */
    #etapeDetailModal .space-y-4,
    #etapeDetailModal .space-y-6 {
        gap: 0.75rem !important; /* 12px */
    }

    /* Bouton Fermer du bas */
    #etapeDetailModal .px-4,
    #etapeDetailModal .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #etapeDetailModal .py-2,
    #etapeDetailModal .py-3 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    #etapeDetailModal button {
        font-size: 1rem !important; /* 16px */
    }

    /* Marges */
    #etapeDetailModal .mb-4,
    #etapeDetailModal .mb-6 {
        margin-bottom: 0.75rem !important;
    }

    #etapeDetailModal .mt-6,
    #etapeDetailModal .mt-8 {
        margin-top: 1rem !important;
    }

    /* Gap dans le header */
    #etapeDetailModal .gap-2,
    #etapeDetailModal .gap-3 {
        gap: 0.5rem !important;
    }
}

/* ====================================
   FIX #3: Contraste Guide en Dark Mode
   ==================================== */

/* Guide - Amélioration contraste en dark mode */
.dark #mainApp .text-slate-600,
.dark #mainApp .text-slate-700,
.dark #mainApp .text-slate-800 {
    color: #e2e8f0 !important; /* slate-200 - beaucoup plus lisible */
}

.dark #mainApp .text-slate-500 {
    color: #cbd5e1 !important; /* slate-300 */
}

/* Textes spécifiques dans les sections colorées */
.dark #mainApp .text-cyan-800,
.dark #mainApp .text-cyan-900 {
    color: #a5f3fc !important; /* cyan-200 */
}

.dark #mainApp .text-cyan-800,
.dark #mainApp .text-cyan-900 {
    color: #e9d5ff !important; /* cyan-200 */
}

.dark #mainApp .text-orange-800,
.dark #mainApp .text-orange-900 {
    color: #fed7aa !important; /* orange-200 */
}

.dark #mainApp .text-green-800,
.dark #mainApp .text-green-900 {
    color: #bbf7d0 !important; /* green-200 */
}

.dark #mainApp .text-blue-800,
.dark #mainApp .text-blue-900 {
    color: #bfdbfe !important; /* blue-200 */
}

/* Backgrounds des sections en dark mode */
.dark #mainApp .bg-white {
    background-color: rgba(30, 41, 59, 0.8) !important; /* slate-800 avec transparence */
}

.dark #mainApp .bg-cyan-50 {
    background-color: rgba(6, 182, 212, 0.15) !important;
}

.dark #mainApp .bg-cyan-50,
.dark #mainApp [style*="rgba(250,245,255"] {
    background-color: rgba(168, 85, 247, 0.15) !important;
}

.dark #mainApp .bg-orange-50,
.dark #mainApp [style*="rgba(255,247,237"] {
    background-color: rgba(249, 115, 22, 0.15) !important;
}

.dark #mainApp .bg-green-50,
.dark #mainApp [style*="rgba(240,253,244"] {
    background-color: rgba(34, 197, 94, 0.15) !important;
}

/* Bordures en dark mode */
.dark #mainApp .border-slate-200 {
    border-color: rgba(71, 85, 105, 0.6) !important;
}

.dark #mainApp .border-cyan-200,
.dark #mainApp .border-cyan-300 {
    border-color: rgba(6, 182, 212, 0.5) !important;
}

.dark #mainApp .border-cyan-200 {
    border-color: rgba(168, 85, 247, 0.5) !important;
}

.dark #mainApp .border-orange-200 {
    border-color: rgba(249, 115, 22, 0.5) !important;
}

.dark #mainApp .border-green-200 {
    border-color: rgba(34, 197, 94, 0.5) !important;
}

/* Navigation sticky en dark mode */
.dark #mainApp nav[class*="sticky"] {
    background: rgba(30, 41, 59, 0.8) !important;
    border-bottom-color: rgba(71, 85, 105, 0.6) !important;
}

/* Titre principal OrIAntation-darkblue en dark mode */
.dark #mainApp .text-OrIAntation-darkblue {
    color: #22d3ee !important; /* cyan-400 - très visible */
}

/* ====================================
   FIX #4: Élargir les cartes en mobile
   ==================================== */

@media (max-width: 639px) {
    /* Conteneur principal - utiliser toute la largeur */
    #mainApp .max-w-4xl,
    #mainApp .max-w-3xl,
    #mainApp .max-w-2xl,
    #mainApp .max-w-xl,
    #mainApp .max-w-lg,
    #mainApp .max-w-md {
        max-width: 100% !important;
        padding-left: 0.5rem !important; /* 8px - encore plus réduit */
        padding-right: 0.5rem !important;
    }

    /* Cartes - réduire les paddings internes pour gagner en largeur */
    #mainApp .fade-in.bg-white.p-6,
    #mainApp .fade-in.bg-white.p-8 {
        padding: 0.5rem !important; /* 8px au lieu de 24-32px */
    }

    /* Cartes internes - réduire padding */
    #mainApp .bg-background-light.p-4 {
        padding: 0.5rem !important; /* 8px au lieu de 16px */
    }

    /* Sections avec bordure - réduire padding */
    #mainApp .rounded-2xl.p-6,
    #mainApp .rounded-2xl.p-8,
    #mainApp .rounded-3xl.p-8,
    #mainApp .p-4,
    #mainApp .p-6,
    #mainApp .p-8 {
        padding: 0.5rem !important; /* 8px partout */
    }

    /* Headers de cartes */
    #mainApp .bg-gradient-to-r.p-4 {
        padding: 0.5rem !important;
    }

    /* Réduire les marges latérales des conteneurs */
    #mainApp > div {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* TOUS les divs avec marges horizontales */
    #mainApp .mx-auto {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Divs avec padding horizontal - réduire */
    #mainApp .px-4,
    #mainApp .px-6,
    #mainApp .px-8 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Sections internes */
    #mainApp section,
    #mainApp .space-y-4,
    #mainApp .space-y-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* FIX #5: Réduire taille des textes dans TOUTE l'app SAUF menu, login, signup, guide */

    /* Exclusions : ne PAS appliquer à ces éléments */
    /* - #authContainer (login/signup) */
    /* - [data-view="menu"] (menu principal) */
    /* - .fade-in.min-h-screen (guide) */
    /* - #guideRoleModal, #etapeDetailModal (modales guide) */

    /* Appliquer À : toutes les pages d'étapes (step0-step13, journal, retroplanning, etc.) */

    /* Titres principaux dans les étapes */
    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) h1:not(#authContainer h1) {
        font-size: 1.5rem !important; /* 24px */
    }

    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) h2:not(#authContainer h2) {
        font-size: 1.25rem !important; /* 20px */
    }

    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) h3:not(#authContainer h3) {
        font-size: 1.125rem !important; /* 18px */
    }

    /* Classes de taille Tailwind dans les étapes */
    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) .text-3xl {
        font-size: 2rem !important; /* 32px */
    }

    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) .text-2xl {
        font-size: 1.5rem !important; /* 24px */
    }

    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) .text-xl {
        font-size: 1.25rem !important; /* 20px */
    }

    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) .text-lg {
        font-size: 1.125rem !important; /* 18px */
    }

    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) .text-base {
        font-size: 1rem !important; /* 16px */
    }

    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) .text-sm {
        font-size: 0.875rem !important; /* 14px */
    }

    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) .text-xs {
        font-size: 0.8125rem !important; /* 13px */
    }

    /* Paragraphes et listes dans les étapes */
    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) p:not(#authContainer p) {
        font-size: 1rem !important; /* 16px */
        line-height: 1.5 !important;
    }

    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) li:not(#authContainer li) {
        font-size: 1rem !important; /* 16px */
    }

    /* Boutons dans les étapes */
    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) button:not(#authContainer button):not(.text-xs):not(.text-sm) {
        font-size: 1rem !important; /* 16px */
    }

    /* Labels dans les étapes */
    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) label:not(#authContainer label) {
        font-size: 1rem !important; /* 16px */
    }

    /* Inputs et selects dans les étapes */
    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) input:not(#authContainer input),
    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) select:not(#authContainer select),
    #mainApp .fade-in:not(.min-h-screen):not([data-view="menu"]) textarea:not(#authContainer textarea) {
        font-size: 1rem !important; /* 16px */
    }

    /* FIX #5b: Guide et Mon Profil - tailles augmentées */

    /* Guide - Titres principaux */
    #mainApp .fade-in.min-h-screen .text-3xl,
    #mainApp .fade-in.bg-white .text-3xl {
        font-size: 1.875rem !important; /* 30px */
    }

    #mainApp .fade-in.min-h-screen .text-4xl,
    #mainApp .fade-in.bg-white .text-4xl {
        font-size: 2.25rem !important; /* 36px */
    }

    #mainApp .fade-in.min-h-screen .text-5xl,
    #mainApp .fade-in.bg-white .text-5xl {
        font-size: 3rem !important; /* 48px */
    }

    /* Guide - Titres secondaires */
    #mainApp .fade-in.min-h-screen .text-2xl,
    #mainApp .fade-in.bg-white .text-2xl {
        font-size: 1.5rem !important; /* 24px */
    }

    #mainApp .fade-in.min-h-screen .text-xl,
    #mainApp .fade-in.bg-white .text-xl {
        font-size: 1.25rem !important; /* 20px */
    }

    /* Mon Profil / Guide - H1, H2, H3 */
    #mainApp .fade-in.min-h-screen h1,
    #mainApp .fade-in.bg-white h1 {
        font-size: 1.5rem !important; /* 24px */
    }

    #mainApp .fade-in.min-h-screen h2,
    #mainApp .fade-in.bg-white h2 {
        font-size: 1.25rem !important; /* 20px */
    }

    #mainApp .fade-in.min-h-screen h3,
    #mainApp .fade-in.bg-white h3 {
        font-size: 1.125rem !important; /* 18px */
    }

    /* Guide - Textes de base */
    #mainApp .fade-in.min-h-screen .text-base,
    #mainApp .fade-in.bg-white .text-base {
        font-size: 1rem !important; /* 16px */
    }

    #mainApp .fade-in.min-h-screen .text-lg,
    #mainApp .fade-in.bg-white .text-lg {
        font-size: 1.125rem !important; /* 18px */
    }

    #mainApp .fade-in.min-h-screen .text-sm,
    #mainApp .fade-in.bg-white .text-sm {
        font-size: 0.875rem !important; /* 14px */
    }

    #mainApp .fade-in.min-h-screen .text-xs,
    #mainApp .fade-in.bg-white .text-xs {
        font-size: 0.8125rem !important; /* 13px */
    }

    /* Guide / Profil - Paragraphes */
    #mainApp .fade-in.min-h-screen p,
    #mainApp .fade-in.bg-white p {
        font-size: 1rem !important; /* 16px */
        line-height: 1.5 !important;
    }

    /* Guide / Profil - Listes */
    #mainApp .fade-in.min-h-screen ul li,
    #mainApp .fade-in.min-h-screen ol li,
    #mainApp .fade-in.bg-white ul li,
    #mainApp .fade-in.bg-white ol li {
        font-size: 1rem !important; /* 16px */
    }

    /* Guide / Profil - Textes normaux */
    #mainApp .fade-in.min-h-screen .text-slate-700,
    #mainApp .fade-in.min-h-screen .text-slate-600,
    #mainApp .fade-in.bg-white .text-slate-700,
    #mainApp .fade-in.bg-white .text-slate-600 {
        font-size: 0.8125rem !important; /* 13px */
    }

    /* Guide / Profil - Boutons */
    #mainApp .fade-in.min-h-screen button:not(.text-xs):not(.text-sm),
    #mainApp .fade-in.bg-white button:not(.text-xs):not(.text-sm) {
        font-size: 0.8125rem !important; /* 13px */
    }
}

/* ====================================
   OrIA Analysis - Collapsible Chevron
   ==================================== */

/* Rotation du chevron quand le details est ouvert */
details[open] .oria-chevron {
    transform: rotate(180deg);
}