@import 'tailwindcss';

/*
|--------------------------------------------------------------------------
| Espace apprenant — son propre sous-domaine (v2.0 §3)
|--------------------------------------------------------------------------
|
| Feuille SÉPARÉE de celle du back-office : ce ne sont ni le même public, ni
| le même appareil, ni la même densité. Ici, 95 % des visites viennent d'un
| téléphone tenu à une main, souvent en plein soleil, sur un réseau lent.
|
| Quatre partis pris, tenus par ces quelques règles :
|   - toute cible tactile fait au moins 48 px ;
|   - le contraste est élevé, dans les deux thèmes ;
|   - rien ne dépend d'un survol : il n'y a pas de souris ;
|   - la mise en page est logique (start/end), donc miroir en arabe sans une
|     seule règle dupliquée.
|
*/

@source '../views/layouts/formation.blade.php';
@source '../views/formation/**/*.blade.php';
@source '../views/livewire/formation/**/*.blade.php';
@source '../views/components/formation/**/*.blade.php';
@source '../../app/Livewire/Formation/**/*.php';

/* Mode sombre piloté par la classe posée sur <html> par le script du layout,
   lui-même initialisé depuis la préférence système. Un seul mécanisme, donc
   pas de désaccord possible entre le rendu initial et la bascule manuelle. */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

    /* Repli neutre (v3.0 §3). La charte de l'installation est injectée au rendu par le gabarit
       de l'espace apprenant, qui redéclare ces variables depuis les réglages : une feuille
       compilée une fois pour toutes ne peut pas porter les couleurs d'une société en particulier. */
    --color-primaire: #2563EB;
    --color-primaire-fonce: #1E40AF;
    --color-corail: #F59E0B;
    --color-navy: #0F172A;

    /* Natures d'heures — mêmes couleurs qu'en PDF et qu'en administration,
       pour que la jauge du bénéficiaire et celle du gérant se ressemblent. */
    --color-elearning: #2563EB;
    --color-atelier: #F59E0B;
    --color-coaching: #22C55E;
    --color-terrain: #F59E0B;
}

/* Jetons sémantiques : une seule déclaration par thème, et toutes les vues
   s'en servent. Changer le fond du mode sombre se fait ici, à un endroit. */
@theme {
    --color-fond: #FFFFFF;
    --color-surface: #F4F5FB;
    --color-surface-haute: #FFFFFF;
    --color-bordure: #E1E4F2;
    --color-encre: #0F172A;
    --color-encre-doux: #55607F;
}

:root.dark {
    --color-fond: #0A0F24;
    --color-surface: #141B36;
    --color-surface-haute: #1B2445;
    --color-bordure: #2A3560;
    --color-encre: #F2F4FF;
    --color-encre-doux: #A7B0D0;
    /* Le primaire du mode clair vire au sombre sur fond noir : on l'éclaircit. */
    --color-primaire: #8D95FF;
    --color-primaire-fonce: #6E77F2;
}

@layer components {
    /* La règle des 48 px, écrite une fois (§3). */
    .cible-tactile {
        min-height: 3rem;
        min-width: 3rem;
    }

    /* Le grand bouton unique du bas d'écran. */
    .bouton-principal {
        display: flex;
        min-height: 3.5rem;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: 1rem;
        background-color: var(--color-primaire);
        padding-inline: 1.25rem;
        font-size: 1.125rem;
        font-weight: 800;
        color: #FFFFFF;
        box-shadow: 0 8px 24px -12px rgba(92, 101, 245, 0.9);
    }

    :root.dark .bouton-principal {
        color: #0A0F24;
    }

    .bouton-principal:active {
        transform: scale(0.985);
    }

    .bouton-principal:disabled {
        opacity: 0.45;
    }

    .bouton-secondaire {
        display: flex;
        min-height: 3rem;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: 1rem;
        border: 2px solid var(--color-bordure);
        background-color: var(--color-surface-haute);
        padding-inline: 1rem;
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-encre);
    }

    .carte {
        border-radius: 1.25rem;
        border: 1px solid var(--color-bordure);
        background-color: var(--color-surface-haute);
        padding: 1rem;
    }

    /* Réponse de quiz : toute la carte est cliquable, pas une petite case. */
    .reponse {
        display: flex;
        min-height: 4rem;
        width: 100%;
        align-items: center;
        gap: 0.75rem;
        border-radius: 1.25rem;
        border: 2px solid var(--color-bordure);
        background-color: var(--color-surface-haute);
        padding: 0.75rem 1rem;
        text-align: start;
        font-size: 1.0625rem;
        font-weight: 600;
        color: var(--color-encre);
    }

    .reponse-choisie {
        border-color: var(--color-primaire);
        background-color: color-mix(in srgb, var(--color-primaire) 14%, transparent);
    }
}

/* Le lecteur vidéo garde son rapport 16/9 quelle que soit la largeur : sur un
   écran de 390 px, une iframe non contrainte déborde et casse la page. */
.cadre-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 1rem;
    background-color: #000;
}

.cadre-video iframe {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    border: 0;
}

/* Le texte arabe respire davantage : les diacritiques ont besoin de hauteur. */
[dir='rtl'] main {
    line-height: 1.9;
}

/* Personne ici n'a demandé d'animation ; qui la refuse ne l'a pas. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}