/* ================================================================
   05-responsive.css — Media queries
   ----------------------------------------------------------------
   Breakpoints :
      ≤ 1180px  → tarifs passent à 2×2 (4 plans ne tiennent plus)
      ≤ 1024px  → hero et KB passent en colonne unique
      ≤  900px  → grilles multi-colonnes s'empilent + nav mobile
      ≤  600px  → tout en colonne unique, optimisations mobile
   ================================================================ */


/* ─── ≤ 1180px : 4 plans trop serrés → 2×2 ─── */
@media (max-width: 1180px) {
    .prg {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ─── ≤ 1024px : hero et KB empilés ─── */
@media (max-width: 1024px) {
    .hi,
    .kbi {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .ht {
        max-width: 100%;
        margin: 0 auto;
    }
    .hs {
        margin-left: auto;
        margin-right: auto;
    }
    .hc,
    .hp { justify-content: center; }

    .hv {
        max-width: 540px;
        margin: 40px auto 0;
    }

    .kbt { text-align: left; }
    .kbt > p,
    .kbl {
        margin-left: 0;
        margin-right: 0;
    }
    .kbv {
        max-width: 540px;
        margin: 40px auto 0;
    }
}


/* ─── ≤ 900px : grilles s'empilent + nav mobile ─── */
@media (max-width: 900px) {
    /* Étapes "comment ça marche" : 4 → 2 colonnes */
    .sr {
        grid-template-columns: repeat(2, 1fr);
    }
    .sc:first-child  { border-radius: var(--R) 0 0 0; }
    .sc:nth-child(2) { border-radius: 0 var(--R) 0 0; }
    .sc:nth-child(3) { border-radius: 0 0 0 var(--R); }
    .sc:last-child   { border-radius: 0 0 var(--R) 0; }

    /* Toutes les grilles principales → colonne unique */
    .fg,
    .pg,
    .psg,
    .tg,
    .prg,
    .mg,
    .cc {
        grid-template-columns: 1fr;
    }

    /* Carte hero-feature (2×2) → taille normale */
    .fc2.hf {
        grid-column: span 1;
        grid-row: span 1;
    }

    /* Stats : 4 → 2 colonnes */
    .str {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Nav : on masque les liens desktop */
    .nl { display: none; }
}


/* ─── ≤ 600px : mobile strict ─── */
@media (max-width: 600px) {
    .sr { grid-template-columns: 1fr; }
    .sc { border-radius: var(--R) !important; }

    .str { grid-template-columns: 1fr; }
    .mcs { grid-template-columns: 1fr; }

    /* Logos CMS : un peu plus petits */
    .cms-logo { height: 24px; }
    .lr { gap: 24px; }

    /* Modales : un peu moins de padding */
    .mdl { padding: 32px 24px; }
}


/* ═══════════════════════════════════════════════════════════════════
   Page Contact — Responsive
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .contact-form-card {
        padding: 32px 24px;
    }
    .contact-hero {
        padding: 60px 0 40px;
    }
}

@media (max-width: 600px) {
    .cinfo-card {
        padding: 18px 18px;
        gap: 14px;
    }
    .cinfo-icon {
        width: 40px; height: 40px;
    }
    .contact-form-card {
        padding: 28px 20px;
    }
    .contact-form-head h2 {
        font-size: 1.35rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   Modules — Responsive
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    /* Grille 3-col → 2-col ; la carte wide reste sur 2 cols */
    .mod-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .mod-grid-3 .mod-card-wide { grid-column: span 2; }
}

@media (max-width: 760px) {
    .mod-grid,
    .mod-grid-2,
    .mod-grid-3 {
        grid-template-columns: 1fr;
    }
    .mod-grid-3 .mod-card-wide { grid-column: span 1; }

    .mod-cluster-head {
        flex-direction: column;
        gap: 14px;
    }
    .mod-cluster-num {
        width: 44px; height: 44px;
        font-size: 1.2rem;
    }
    .mod-cluster-featured {
        padding: 24px 20px;
    }
    .mod-card {
        padding: 24px 22px;
    }
}