/* ============================================================
   LES FLEURS DE DEM — responsive.css
   Mobile-first responsive breakpoints
   ============================================================ */

/* =================== TABLET — ≤ 1024px =================== */
@media (max-width: 1024px) {

    :root {
        --sp-section: 80px;
    }

    /* Hero botanicals */
    .hero-botanical {
        width: 120px;
        opacity: 0.5;
    }

    /* Concept grid */
    .concept-grid {
        gap: 3rem;
    }

    /* Values */
    .values-grid {
        gap: 1.25rem;
    }

    /* Services */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* =================== MEDIUM — ≤ 860px =================== */
@media (max-width: 860px) {

    /* Nav */
    .nav-links  { display: none; }
    .burger     { display: flex; }

    /* Hero */
    .hero-botanical { display: none; }

    .hero-content {
        padding-top: calc(var(--nav-h) + 1.5rem);
        padding-bottom: 5rem;
    }

    /* Concept */
    .concept-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .concept-visual { order: -1; }

    /* Values */
    .values-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* À propos */
    .apropos-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Footer */
    .footer-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-brand { grid-column: auto; }
}

/* =================== MOBILE — ≤ 600px =================== */
@media (max-width: 600px) {

    :root {
        --sp-section: 56px;
        --sp-section-sm: 40px;
    }

    /* Container padding */
    .container { padding: 0 1.25rem; }

    /* Hero */
    .hero-content {
        gap: 1.25rem;
    }

    .scroll-indicator { display: none; }

    /* Section headers */
    .section-header { margin-bottom: 3rem; }

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Contact form */
    .contact-form-wrap {
        padding: 1.75rem 1.25rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .form-footer .btn--submit {
        width: 100%;
        justify-content: center;
    }

    .form-rgpd { max-width: none; }

    /* Services note */
    .services-note {
        flex-direction: column;
        text-align: center;
    }

    /* Pillar */
    .pillar { gap: 0.75rem; }

    /* Apropos quote */
    .apropos-quote { flex-direction: column; gap: 0.5rem; }

    /* Footer */
    .footer-container { padding-bottom: 2rem; }

    .footer-nav a,
    .footer-legal a {
        font-size: 0.85rem;
    }

    /* Buttons */
    .btn {
        padding: 0.85em 1.6em;
        font-size: 0.8rem;
    }
}

/* =================== PRINT =================== */
@media print {
    .site-header, .scroll-indicator,
    .petals-canvas, .hero-botanical,
    .burger, .mobile-menu { display: none !important; }

    .hero, .section {
        padding: 2rem 0;
        background: white !important;
    }

    .hero-content { padding: 1rem 0; }

    .concept-grid, .apropos-inner,
    .contact-grid, .footer-container {
        grid-template-columns: 1fr;
    }

    a { color: #333 !important; }
    img { break-inside: avoid; }
}

/* =================== ACCESSIBILITY =================== */
@media (prefers-reduced-motion: reduce) {

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal, .fade-up {
        opacity: 1;
        transform: none;
    }

    .petals-canvas { display: none; }
}

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* High contrast override */
@media (prefers-contrast: high) {
    :root {
        --text: #000;
        --text-muted: #333;
        --sage: #276b2c;
        --rose-dark: #8B0000;
    }
}