/* RESPONSIVE DESIGN — Fruits Congel du Nord v3 */

/* ─── TABLET (≤ 1024px) ──────────────────────────── */
@media screen and (max-width: 1024px) {
    .nav-desktop { display: none; }
    .hamburger   { display: flex; }

    /* Logo: leave as inline, keep small pill */
    .logo-container {
        position: relative;
        left: 0;
        transform: none;
        padding: 4px 14px 10px;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.07);
        background: var(--c-white);
    }
    .logo { height: 38px; max-width: 100px; }

    .header-inner { justify-content: space-between; }

    /* Hero: stack image above text */
    .hero-container {
        flex-direction: column-reverse;
        align-items: center;
        gap: 0;
    }
    .hero-img-box {
        flex: 0 0 auto;
        width: 100%;
        justify-content: center;
        align-items: flex-end;
        min-height: auto;
    }
    .hero-img {
        width: auto;
        max-width: 360px;
        height: 260px;
        min-height: unset;
        max-height: unset;
    }
    .hero-text-box {
        flex: 0 0 auto;
        width: 100%;
        text-align: center;
        padding: 36px 24px 24px;
    }
    .hero-actions { justify-content: center; }

    .vision-grid { gap: 12px; }
    .vision-card { height: 200px; }
    .chiffres-grid { gap: 0; }
    .agenda-grid { flex-wrap: wrap; }
    .demain-content { flex-direction: column; gap: 36px; text-align: center; }
    .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
}

/* ─── MOBILE (≤ 768px) ───────────────────────────── */
@media screen and (max-width: 768px) {
    section { padding: 60px 0; }
    .full-center-section { min-height: 320px; padding: 60px 0; }

    /* Header */
    .header-inner   { height: 62px; }
    .logo           { height: 32px; max-width: 86px; }
    .logo-container { padding: 3px 10px 8px; }

    /* Hero */
    .hero-section      { min-height: auto; }
    .hero-title        { font-size: 2.2rem; }
    .hero-footer-text  { font-size: 1.1rem; }
    .hero-img {
        max-width: 260px;
        height: 210px;
    }
    .hero-text-box { padding: 24px 20px 20px; }

    /* Vision */
    .vision-grid { flex-direction: column; }
    .vision-card { height: 190px; }

    /* Chiffres — 2-column grid */
    .chiffres-grid { flex-wrap: wrap; gap: 0; }
    .chiffre-card {
        flex: none;
        width: 50%;
        border-right: 1px solid #dde5ee;
        border-bottom: 1px solid #dde5ee;
    }
    .chiffre-card:nth-child(2n)  { border-right: none; }
    .chiffre-card:nth-child(n+3) { border-bottom: none; }

    /* Agenda */
    .agenda-card { width: 100%; max-width: 380px; margin: 0 auto; }

    /* Demain badges */
    .demain-badges { grid-template-columns: 1fr; }

    /* Footer */
    .footer-logo      { height: 36px; max-width: 100px; }
    .footer-grid      { grid-template-columns: 1fr 1fr; }
    .footer-top       { gap: 12px; }
    .footer-cta-group { flex-direction: column; align-items: center; }
    .footer-bottom    { flex-direction: column; gap: 18px; text-align: center; }
    .legal-links      { flex-wrap: wrap; justify-content: center; gap: 14px; }

    /* Modal */
    .form-row { grid-template-columns: 1fr; }
    .modal    { padding: 36px 22px 28px; }
}

/* ─── SMALL MOBILE (≤ 480px) ─────────────────────── */
@media screen and (max-width: 480px) {
    .hero-title    { font-size: 1.9rem; }
    .section-title { font-size: 1.65rem; }
    .footer-grid   { grid-template-columns: 1fr; }
    .chiffre-card  { width: 50%; }
    .hero-img      { max-width: 200px; height: 170px; }
    .logo          { height: 28px; max-width: 76px; }
    .logo-container{ padding: 2px 8px 7px; }
}