/**
 * Zaoui Dot Com — Media queries responsive
 *
 * Breakpoints :
 * - 992px : tablette paysage / petit desktop
 * - 768px : tablette portrait
 * - 480px : mobile
 *
 * @package ZaouiDotCom
 * @since   1.0.0
 */

/* =========================================================================
   TABLETTE PAYSAGE (< 992px)
   ========================================================================= */

@media (max-width: 992px) {

    .zdot-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .zdot-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .zdot-hero__inner {
        gap: var(--zdot-space-md);
    }

    .zdot-hero__photo {
        flex: 0 0 260px;
    }

    .zdot-hero__title {
        font-size: 2rem;
    }
}

/* =========================================================================
   TABLETTE PORTRAIT (< 768px)
   ========================================================================= */

@media (max-width: 768px) {

    /* Header : hamburger visible */
    .zdot-header__toggle {
        display: flex;
    }

    .zdot-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--zdot-color-bg);
        border-bottom: 1px solid var(--zdot-color-border);
        padding: var(--zdot-space-sm);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .zdot-header__nav.is-open {
        display: block;
    }

    .zdot-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .zdot-nav li {
        width: 100%;
    }

    .zdot-nav a {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--zdot-color-border);
    }

    .zdot-nav .sub-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: var(--zdot-space-sm);
        display: block;
    }

    /* Hero : empile photo / contenu */
    .zdot-hero__inner {
        flex-direction: column-reverse;
        text-align: center;
    }

    .zdot-hero__photo {
        flex: none;
        width: 220px;
        margin: 0 auto;
    }

    /* Grilles */
    .zdot-grid--4,
    .zdot-grid--3,
    .zdot-grid--2 {
        grid-template-columns: 1fr;
    }

    /* Section spacing */
    .zdot-section {
        padding-top: var(--zdot-space-lg);
        padding-bottom: var(--zdot-space-lg);
    }

    /* About : empile */
    .zdot-about__inner {
        flex-direction: column;
    }

    .zdot-about__photo {
        flex: none;
        width: 220px;
        margin: 0 auto;
    }

    /* Contact : empile */
    .zdot-contact__inner {
        flex-direction: column;
    }

    .zdot-contact__info {
        width: 100%;
    }

    /* Footer */
    .zdot-footer__contact {
        flex-direction: column;
        gap: var(--zdot-space-xs);
    }

    .zdot-footer__legal-list {
        flex-direction: column;
        gap: var(--zdot-space-xs);
    }

    /* Typographie */
    h1, .zdot-hero__title {
        font-size: 1.75rem;
    }

    h2, .zdot-section__title {
        font-size: 1.4rem;
    }
}

/* =========================================================================
   MOBILE (< 480px)
   ========================================================================= */

@media (max-width: 480px) {

    :root {
        --zdot-container-padding: 1rem;
    }

    h1, .zdot-hero__title {
        font-size: 1.5rem;
    }

    .zdot-hero__subtitle {
        font-size: 1rem;
    }

    .zdot-btn {
        width: 100%;
        text-align: center;
    }

    .zdot-cred__value {
        font-size: 1.5rem;
    }

    .zdot-header__logo-name {
        font-size: 1.25rem;
    }

    .zdot-exp-compact {
        padding: var(--zdot-space-sm);
    }
}