/* ============================================================
   responsive.css — ajustements responsive transverses
   Chargé EN DERNIER sur chaque page : ne fait que compléter les
   styles existants pour les résolutions les moins couvertes
   (très petits téléphones, paysage mobile, très grands écrans).
   Aucune règle n'altère la plage déjà bien gérée (≈ 380–1536px).
   ============================================================ */

/* Sécurité globale : aucun élément ne doit provoquer de scroll horizontal */
html,
body {
    max-width: 100%;
}

/* Médias et iframes toujours fluides */
img,
video,
iframe,
canvas,
svg:not(#navbar svg) {
    max-width: 100%;
}

/* ============================================================
   TRÈS PETITS ÉCRANS  (≤ 380px : iPhone SE, Galaxy S, etc.)
   On évite les débordements et on garde la lisibilité des
   grilles de chiffres / compteurs serrées.
   ============================================================ */
@media (max-width: 380px) {
    /* Compteurs & statistiques (index, services, présentation) */
    .intro-stats,
    .hero-stats,
    .stats-row {
        gap: 0.4rem;
    }
    .intro-stat {
        padding: 0.6rem 0.3rem;
    }
    .intro-stat-value {
        font-size: 0.92rem;
    }
    .hero-stat-value,
    .stat-value {
        font-size: 1.2rem;
    }
    .hero-stat {
        min-width: 0;
    }

    /* Domaines (page administration) — 2 colonnes plus compactes */
    .domain-row {
        gap: 0.5rem;
    }
    .domain-box {
        padding: 0.85rem 0.5rem;
    }

    /* Panneaux « glass » : un peu moins de marge interne */
    .glass-panel {
        padding: 1.4rem 1.1rem;
    }

    /* Pastilles / étiquettes : autoriser le retour à la ligne propre */
    .badge,
    .tag,
    .skill-pill,
    .intro-service,
    .ws-role {
        white-space: normal;
    }
}

/* ============================================================
   ÉCRANS ULTRA-ÉTROITS  (≤ 360px)
   La barre « domaine » du hero d'accueil.
   ============================================================ */
@media (max-width: 360px) {
    .hero-domain-bar {
        gap: 0.45rem;
        padding: 0.4rem 0.7rem 0.4rem 0.5rem;
    }
    .hero-domain-link {
        font-size: 0.74rem;
    }
}

/* ============================================================
   ORIENTATION PAYSAGE SUR MOBILE  (hauteur réduite)
   On réduit l'espace sous la navbar fixe pour que le contenu
   ne soit pas repoussé hors de l'écran.
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    section.pt-20,
    .pt-nav,
    .hero-section,
    .hero,
    .hero-home {
        padding-top: calc(var(--nav-height) + 0.5rem) !important;
    }
}

/* ============================================================
   TRÈS GRANDS ÉCRANS  (≥ 1600px : QHD / 4K / ultrawide)
   Le contenu reste centré et plafonné (bonne longueur de lecture).
   On augmente très légèrement la base typographique pour mieux
   occuper l'espace sans déformer les mises en page (la navbar est
   en px, donc non affectée).
   ============================================================ */
@media (min-width: 1600px) {
    html {
        font-size: 17px;
    }
}

@media (min-width: 2200px) {
    html {
        font-size: 18px;
    }
}