/* ========================================
   RESPONSIVE DESIGN - BREAKPOINTS
   ======================================== */

/* ========================================
   TABLET (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    body {
        font-size: 14px;
    }
    
    .pagewrap {
        width: 95%;
        margin: 0 auto;
    }
    
    .content {
        margin: 0 15px;
    }
    
    .half-box,
    .full-box {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }
    
    .header-title {
        text-align: center;
    }
}

/* ========================================
   SMARTPHONE (max-width: 767px)
   ======================================== */
@media (max-width: 767px) {
    body {
        font-size: 13px;
    }
    
    .navigation {
        height: auto;
        min-height: 60px;
    }
    
    .pagewrap {
        width: 100%;
        margin: 0;
        padding: 0 10px;
    }
    
    /* Menu burger - CACHÉ par défaut sur desktop */
    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        padding: 10px;
        color: #333;
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1001;
    }
    
    /* Menu principal - CACHÉ par défaut sur mobile */
    #css3menu1 {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #ddd;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        z-index: 1000;
    }
    
    /* Menu ouvert */
    #css3menu1.mobile-open {
        display: block;
    }
    
    /* Style des éléments du menu mobile */
    #css3menu1 ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    #css3menu1 li {
        display: block;
        border-bottom: 1px solid #eee;
    }
    
    #css3menu1 a {
        display: block;
        padding: 15px 20px;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid #f0f0f0;
    }
    
    #css3menu1 a:hover {
        background: #f8f9fa;
        color: #186c95;
    }
    
    /* Sous-menus */
    #css3menu1 ul ul {
        background: #f8f9fa;
        margin-left: 20px;
    }
    
    #css3menu1 ul ul a {
        padding: 12px 20px;
        font-size: 0.9em;
    }
    
    /* Ajustements du contenu */
    .content {
        margin: 0;
        padding: 15px 10px;
    }
    
    .half-box,
    .full-box {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }
    
    .header-title {
        text-align: center;
        font-size: 1.5em;
        margin: 20px 0;
    }
    
    /* Images responsives */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Formulaires */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Boutons */
    .btn {
        display: block;
        width: 100%;
        margin: 10px 0;
        text-align: center;
    }
}

/* ========================================
   TRÈS PETITS ÉCRANS (max-width: 320px)
   ======================================== */
@media (max-width: 320px) {
    body {
        font-size: 12px;
    }
    
    .pagewrap {
        padding: 0 5px;
    }
    
    .content {
        padding: 10px 5px;
    }
    
    .mobile-menu-toggle {
        top: 10px;
        right: 10px;
        font-size: 20px;
    }
    
    #css3menu1 a {
        padding: 12px 15px;
    }
}

/* ========================================
   DESKTOP (min-width: 1024px)
   ======================================== */
@media (min-width: 1024px) {
    /* Menu burger - TOUJOURS CACHÉ sur desktop */
    .mobile-menu-toggle {
        display: none !important;
    }
    
    /* Menu principal - TOUJOURS VISIBLE sur desktop */
    #css3menu1 {
        display: block !important;
    }
}