/* =====================================================
   TALACOTE MOBILE — Responsive fixes (320px → 480px)
   Mobile-first. Ne casse pas le desktop.
   Chargé en DERNIER pour overrider les autres fichiers.
===================================================== */

/* =====================================================
   1. VARIABLES MOBILES
===================================================== */

@media (max-width: 479px) {
    :root {
        /* Réduire le padding container sur très petits écrans */
        --tc-container-padding: 16px;
        /* Espacements réduits */
        --tc-space-lg: 20px;
        --tc-space-xl: 24px;
        --tc-space-2xl: 36px;
        --tc-space-3xl: 48px;
    }
}

/* =====================================================
   2. TYPOGRAPHIE — Réduire les tailles excessives
===================================================== */

@media (max-width: 479px) {
    /* Titres : plancher plus bas */
    h1 { font-size: clamp(22px, 6vw, 32px); }
    h2 { font-size: clamp(18px, 5vw, 26px); }
    h3 { font-size: clamp(16px, 4.5vw, 22px); }
    h4 { font-size: clamp(15px, 4vw, 19px); }

    /* Paragraphes : léger reduction */
    p { font-size: 14px; }
}

/* =====================================================
   3. LAYOUT — Container et sections
===================================================== */

@media (max-width: 479px) {
    /* Réduire padding section sur mobile */
    .tc-section {
        padding: var(--tc-space-xl) 0;
    }
    .tc-section--hero {
        padding: var(--tc-space-2xl) 0;
    }

    /* Titre de page centré sur mobile */
    .tc-text-center h1,
    .tc-mb-xl h1 {
        font-size: clamp(22px, 6vw, 32px);
    }
}

/* =====================================================
   4. GRILLES — Force 1 colonne sur 320px–479px
===================================================== */

@media (max-width: 479px) {
    /* Force toutes les grilles en 1 col sur très petits écrans */
    .tc-grid--2,
    .tc-grid--3 {
        grid-template-columns: 1fr;
    }

    /* Réduire le gap des grilles */
    .tc-grid {
        gap: var(--tc-space-md);
    }
}

/* Grille 2 col : attendre 520px au lieu de 480px pour éviter le serrage */
@media (min-width: 480px) and (max-width: 519px) {
    .tc-grid--2 {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   5. BOUTONS — Touch targets ≥ 44px, wrapping
===================================================== */

/* #12: white-space fix for all mobile, not just < 479px */
@media (max-width: 767px) {
    .tc-btn {
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 479px) {
    /* Hauteur minimale 44px pour l'accessibilité tactile */
    .tc-btn {
        min-height: 44px;
        padding: 12px 20px;
        font-size: 13px;
    }

    .tc-btn--lg {
        padding: 14px 24px;
        font-size: 14px;
    }

    .tc-btn--sm {
        padding: 10px 16px;
        font-size: 12px;
        min-height: 36px;
    }

    /* Boutons en pleine largeur dans les sections CTA */
    .tc-premium-cta .tc-btn,
    .tc-text-center .tc-btn {
        width: 100%;
        max-width: 360px;
    }
}

/* Groupes de boutons : stack vertical sur mobile */
@media (max-width: 479px) {
    /* Paires de boutons côte à côte → empilés */
    .tc-flex.tc-gap-md > .tc-btn,
    .tc-flex.tc-gap-lg > .tc-btn {
        flex: 1 1 100%;
    }
}

/* =====================================================
   6. CARTES — Réduire le padding
===================================================== */

@media (max-width: 479px) {
    .tc-card {
        padding: var(--tc-space-md);
        border-radius: 14px;
    }

    .tc-tool-card {
        padding: var(--tc-space-md);
    }

    .tc-tool-card__icon {
        font-size: 28px;
        margin-bottom: 8px;
    }

    .tc-tool-card__title {
        font-size: 14px;
    }
}

/* =====================================================
   7. TABLES — Scroll horizontal, pas d'overflow
===================================================== */

/* Wrapper auto-scrollable pour toutes les tables */
.tc-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--tc-radius);
}

@media (max-width: 767px) {
    /* tc-quick-calc : scroll horizontal */
    .tc-quick-calc {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Forcer une largeur minimale pour que le scroll soit utile */
    .tc-quick-calc table,
    .tc-quick-calc thead,
    .tc-quick-calc tbody {
        min-width: 320px;
    }

    /* Réduire padding cellules */
    .tc-quick-calc th,
    .tc-quick-calc td {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* tc-result-table : déjà display:block, s'assurer de l'overflow */
    .tc-result-table {
        overflow-x: auto;
    }

    /* Tables articles (dans le contenu éditorial) */
    .tc-article table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* =====================================================
   8. OUTILS (tools.css) — Corrections mobiles
===================================================== */

@media (max-width: 479px) {
    /* Réduire padding du panneau outil */
    .tc-tool {
        padding: var(--tc-space-md);
    }

    .tc-tool__panel {
        padding: var(--tc-space-md);
    }

    /* 3 colonnes → 1 col sur mobile (reste 2 à 480px) */
    .tc-tool__row--3 {
        grid-template-columns: 1fr;
    }

    /* Résultat cards : 3 cols → 1 col */
    .tc-result-cards {
        grid-template-columns: 1fr;
    }

    /* Valeurs de résultat trop grandes */
    .tc-result-card__value {
        font-size: 24px;
    }

    /* Score chips : 2 par ligne sur mobile */
    .tc-score-chips {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
   9. DASHBOARD — Sections spécifiques
===================================================== */

@media (max-width: 479px) {
    /* Stat grid dashboard → plus petit */
    .tc-grid--3 .tc-text-center div[style*="font-size:24px"],
    .tc-dash-remaining,
    .tc-dash-total-uses {
        font-size: 18px !important;
    }

    /* Row "Mon profil" flex-between → colonne */
    .tc-card .tc-flex.tc-flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Remonter le badge et niveau à droite → passer en ligne */
    .tc-card .tc-flex.tc-flex-between > div:last-child {
        align-self: flex-start;
        text-align: left;
    }

    /* Boutons share : wrap sur 2 lignes */
    .tc-share-btns {
        gap: 6px;
    }

    .tc-share-btn {
        font-size: 11px;
        padding: 8px 10px;
        min-height: 40px;
    }

    .tc-dash-referral-url {
        font-size: 11px;
    }
}

/* =====================================================
   10. (removed: Gagner Premium — countdown — May 2026)
===================================================== */

@media (max-width: 479px) {
    /* Grille steps */
    .tc-grid--3.tc-mt-xl {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   12. TOAST — Repositionner sur mobile
===================================================== */

@media (max-width: 479px) {
    .tc-toast-container {
        top: auto;
        bottom: 70px; /* au-dessus du sticky CTA */
        right: 12px;
        left: 12px;
        align-items: stretch;
    }

    .tc-toast {
        max-width: 100%;
        text-align: center;
    }
}

/* =====================================================
   13. USAGE BADGE — Taille réduite sur mobile
===================================================== */

@media (max-width: 767px) {
    /* Hide top banner on mobile — logo already in header */
    .tc-top-banner {
        display: none;
    }

    /* Hide CSS pseudo-element, use real <img> instead */
    body::before {
        display: none !important;
    }

    .tc-mobile-bg {
        display: block !important;
    }

    /* #9: Sections transparent by default, alt sections keep subtle overlay */
    section {
        background: transparent !important;
        background-image: none !important;
    }
    section.tc-section--alt {
        background: rgba(6, 12, 24, 0.4) !important;
    }
    .tc-mid-cta {
        background: rgba(245, 196, 81, 0.06) !important;
    }

    /* Footer: keep dark */
    .tc-footer {
        background: rgba(6, 12, 24, 0.9) !important;
    }

}

/* =====================================================
   14. HEADER / NAV — Améliorer l'espace sur 320px
===================================================== */

@media (max-width: 360px) {
    .tc-header__inner {
        gap: 8px;
    }

    .tc-header__logo-img {
        height: 32px;
    }

    .tc-lang-switcher__trigger {
        padding: 5px 8px;
        font-size: 11px;
    }
}

/* =====================================================
   15. FOOTER — Grille 1 col sur 320px–479px
===================================================== */

@media (max-width: 479px) {
    .tc-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--tc-space-lg);
    }

    .tc-footer {
        padding: var(--tc-space-xl) 0 var(--tc-space-lg);
    }
}

/* =====================================================
   16. FORM — Inputs touch-friendly
===================================================== */

@media (max-width: 479px) {
    .tc-input {
        padding: 12px 14px;
        font-size: 16px; /* évite le zoom iOS sur focus */
        border-radius: 14px;
        min-height: 44px;
    }

    .tc-form-group {
        margin-bottom: var(--tc-space-md);
    }

    /* Bouton submit pleine largeur */
    .tc-tool__submit {
        min-height: 48px;
        font-size: 14px;
    }
}

/* =====================================================
   17. SEO COMPONENTS — Corrections mobiles
===================================================== */

@media (max-width: 479px) {
    .tc-snippet-block,
    .tc-instant-answer {
        padding: 12px 14px;
        font-size: 14px;
        border-left-width: 3px;
    }

    /* Related tools : 1 col sur 320px */
    .tc-related-tools {
        grid-template-columns: 1fr;
    }

    .tc-seo-content h2 {
        font-size: 17px;
        margin-top: 28px;
    }

    .tc-seo-content h3 {
        font-size: 15px;
    }

    .tc-seo-content p,
    .tc-seo-content li {
        font-size: 14px;
    }

    /* HowTo steps */
    .tc-howto-steps {
        padding-left: 16px;
    }

    .tc-howto-steps li {
        font-size: 14px;
        padding: 6px 0;
    }
}

/* =====================================================
   18. STICKY CTA — Safe area sur iPhone
===================================================== */

@media (max-width: 479px) {
    .tc-sticky-cta {
        padding: 10px var(--tc-container-padding);
        /* Support notch iPhone */
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

/* =====================================================
   19. OVERFLOW PREVENTION — Anti-débordement global
===================================================== */

@media (max-width: 479px) {
    /* #3: Only leaf containers — not .tc-container/.tc-section (kills table scroll) */
    .tc-card,
    .tc-tool,
    .tc-tool__panel {
        overflow-x: hidden;
    }
    .tc-table-scroll,
    .tc-quick-calc {
        overflow-x: auto !important;
    }

    /* Wrapping des badges/pills qui dépassent */
    .tc-share-btns,
    .tc-header__actions {
        flex-wrap: wrap;
    }

    /* Textes longs : permettre le passage à la ligne */
    .tc-btn,
    .tc-share-btn {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* =====================================================
   20. PREMIUM PAGE — Prix et tableaux
===================================================== */

@media (max-width: 479px) {
    /* Prix 56px → 36px */
    .tc-price-current {
        font-size: 36px !important;
    }

    /* Bouton CTA premium oversized (padding:20px 48px) → réduit */
    #tc-premium-btn,
    #tc-premium-btn-2 {
        font-size: 15px !important;
        padding: 14px 24px !important;
        width: 100%;
    }

    /* Tableau premium : scroll horizontal */
    .tc-premium-compare-table,
    .tc-compare-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Pricing cards empilées */
    .tc-pricing-grid,
    .tc-pricing-cards {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   21. CORRECTIONS SPÉCIFIQUES 360px–479px
===================================================== */

@media (min-width: 360px) and (max-width: 479px) {
    /* Grilles 2 cols : activer plus tôt */
    .tc-grid--2 {
        grid-template-columns: 1fr 1fr;
    }

    /* Grille 3 cols stats dans une carte (ex : dashboard) :
       garder 3 colonnes car chaque cellule est petite (nombre + label)
       ~109px par col à 360px = suffisant */
    .tc-card > .tc-grid.tc-grid--3,
    .tc-card .tc-grid.tc-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Hero actions : garder côte à côte si boutons courts */
    .tc-hero__actions {
        gap: 8px;
    }
}

/* =====================================================
   22. CORRECTIONS 320px UNIQUEMENT
===================================================== */

@media (max-width: 359px) {
    :root {
        --tc-container-padding: 12px;
    }

    /* Tout en 1 col */
    .tc-grid--2,
    .tc-grid--3 {
        grid-template-columns: 1fr;
    }

    /* Tailles minimalistes */
    h1 { font-size: 20px; }
    h2 { font-size: 17px; }
    h3 { font-size: 15px; }

    .tc-btn {
        font-size: 12px;
        padding: 10px 14px;
    }

    /* Lang switcher mobile — May 2026 rework: was hiding the flag and
       showing only the FR/EN code, which inverted on the desktop pattern
       (flag + code). New design (see components.css @media 767px) shows
       FLAG ONLY for a compact, recognisable, no-ambiguity trigger. This
       rule is intentionally left empty (was the previous flag-hiding
       directive) so the new behaviour in components.css wins. */
}

/* =====================================================
   23. ACCESSIBILITÉ TACTILE — Touch targets
===================================================== */

@media (hover: none) and (pointer: coarse) {
    /* Tous les éléments cliquables : min 44px */
    .tc-btn,
    .tc-tool__submit,
    .tc-nav__link,
    .tc-footer__links a,
    .tc-share-btn,
    .tc-related-tool {
        min-height: 44px;
    }

    /* Désactiver les hover transforms sur tactile */
    .tc-btn:hover,
    .tc-tool-card:hover,
    .tc-card--interactive:hover {
        transform: none;
    }

    /* Focus visible renforcé */
    .tc-btn:focus-visible,
    .tc-input:focus-visible {
        outline: 3px solid var(--tc-green);
        outline-offset: 3px;
    }
}