/* ==========================================================================
   Styles spécifiques à la page d'accueil (home.css).
   N'utilise que les variables CSS du thème global — compatible clair/sombre.
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
    padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 8vw, 6rem);
    text-align: center;
}

.hero__logo {
    display: block;
    margin: 0 auto 2rem;
}

.hero__title {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    margin-bottom: .5rem;
    color: var(--text);
}

.hero__tagline {
    font-size: clamp(1.15rem, 2.5vw, 1.45rem);
    color: var(--text-muted);
    max-width: 52ch;
    margin: 0 auto 2.5rem;
    line-height: 1.5;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* ---------- Comment ça marche — étapes ---------- */
.steps {
    counter-reset: step;
}

.step {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    transition: box-shadow var(--transition);
}

.step:hover {
    box-shadow: var(--shadow);
}

.step__num {
    counter-increment: step;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--c-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .95rem;
}

/* Deux regles distinctes : un @media ne peut pas figurer dans une liste de
   selecteurs (CSS invalide, regle ignoree). Toggle explicite + preference systeme. */
[data-theme="dark"] .step__num {
    background: var(--c-navy-600);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .step__num {
        background: var(--c-navy-600);
    }
}

.step__title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .25rem;
    color: var(--text);
}

.step__desc {
    font-size: .92rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ---------- Fonctionnalités ---------- */
.feature-icon {
    font-size: 2rem;
    margin-bottom: .75rem;
    display: block;
}

/* ---------- Démo de paires ---------- */
.pairs-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.pair-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: var(--shadow);
}

.pair-card__label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: .5rem;
}

.pair-card__words {
    display: flex;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.pair-card__vs {
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* ---------- Section CTA final ---------- */
.cta-section {
    background: linear-gradient(135deg, var(--bg-elev) 0%, var(--surface) 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ---------- Séparateur section ---------- */
.section-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    display: block;
    margin-bottom: .75rem;
}

/* Empêche les longues URLs ou mots sans espaces de déborder horizontalement */
.step__desc,
.step__title,
.pair-card__words {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ---------- Responsive ---------- */
@media (max-width: 719px) {
    /* Boutons du hero en pleine largeur */
    .hero__actions .btn { width: 100%; }

    /* Grille d'étapes et de fonctionnalités : 1 colonne sur mobile.
       La grille a les classes "grid grid--3 steps" (même élément) —
       on cible donc .grid--3 seul (app.css ne l'active qu'à partir de 720px). */
    .grid--3 { grid-template-columns: 1fr; }

    /* Démo de paires : force une colonne par carte pour éviter
       que minmax(200px,1fr) ne génère 2 colonnes à 360-400px
       (2×200px + gap = débordement probable). */
    .pairs-grid { grid-template-columns: 1fr; }

    /* Page téléchargement : bouton APK pleine largeur */
    .download-btn-full { width: 100%; }
}