/*
    1.TABLETTES (768px - 1024px)
    2.TABLETTES PORTRAIT (768px et moins)
    3.GRANDS SMARTPHONES (481px - 767px)
    4.SMARTPHONES MOYENS (481px et moins)
    5.PETITS SMARTPHONES (375px et moins)
    6.TRÈS PETITS SMARTPHONES (320px et moins)
    7.ORIENTATION PAYSAGE
    8.ANIMATIONS RESPONSIVES         
*/

/* 1 */
@media (max-width: 1024px) {
    .container {
        padding: 20px;
        height: auto;
        min-height: 100vh;
       
    }
    
    .logo {

        margin-top: 150px;
    }
    
    .logo img {
        max-width: 250px;
    }
    
    form {
        max-width: 500px; ;
    }
    
    .search-bar {
        padding: 8px 20px; /* Garde le padding original */
    }
    
    .search-bar input {
        font-size: 1em;
        padding: 10px;
    }
    
    footer {
        position: relative;
        margin-top: 40px;
    }
    #advancedDropdown1{
          display: none;
    position: absolute;
    left: 500px;
    right: -500px;
    top: -15px;
    background: white;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    border-radius: 20px;
    padding: 20px;
    z-index: 1000;
    border: 1px solid var(--primary-light);
    
    }
    #advancedDropdown {
        top: 70px;
    }
}

/* 2 */
@media (max-width: 768px) {
    .container {
        padding: 15px;
        justify-content: flex-start;
        padding-top: 60px;
    }
    
    .logo {
        margin-bottom: 30px;
    }
    
    .logo img {
        max-width: 200px;
    }
    
    form {
        max-width: 500px; /* Garde une largeur généreuse */
    }
    
    .search-bar {
        /* CONSERVE LE STYLE ORIGINAL - pas de flex-wrap */
        padding: 8px 20px; /* Garde le padding original */
    }
    
    .search-bar input {
        font-size: 1em; /* Taille normale */
        text-align: left; /* Texte aligné à gauche comme Google */
    }
    
    #advancedDropdown {
        top: 70px;
        padding: 20px;
    }
    
    .btns {
        margin-top: 25px;
    }
    
    #btn-primary {
        padding: 12px 30px;
        font-size: 1em;
    }
    
    footer {
        font-size: 0.9em;
        padding: 15px 0;
    }
}

/* 3 */
@media (max-width: 640px) {
    .container {
        padding: 10px;
        padding-top: 40px;
    }
    
    .logo {
        margin-bottom: 25px;
    }
    
    .logo img {
        max-width: 180px;
    }
    
    form {
        max-width: 450px;
    }
    
    .search-bar {
        padding: 8px 15px; /* Légère réduction du padding */
    }
    
    .search-bar input {
        font-size: 0.95em; /* Légère réduction */
        padding: 10px;
    }
    
    .dropdown .btn-secondary {
        padding: 6px 12px;
        font-size: 0.9em;
    }
    
    #btn-primary {
        padding: 10px 25px;
        font-size: 0.95em;
    }
    
    .btns {
        gap: 10px;
    }
}

/* 3 */
@media (max-width: 480px) {
    .container {
        padding: 8px;
        padding-top: 30px;
    }
    
    .logo {
        margin-bottom: 50px;
    }
    
  
    
    form {
        max-width: 400px;
    }
    
    .search-bar {
        /* CONSERVE LE STYLE HORIZONTAL - pas de colonne */
        padding: 6px 15px; /* Padding réduit mais horizontal */

        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    .search-bar input {
        font-size: 0.9em;
        padding: 8px;

        text-align: left;
    }
    
    .dropdown .btn-secondary {
        padding: 5px 10px;
        font-size: 0.85em;
    }
    
    #dropdownToggle {
        padding: 6px;
    }
    
    #dropdownToggle i {
        font-size: 1.1em;
    }
    
    #advancedDropdown {
        top: 65px;
        padding: 15px;
        border-radius: 15px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    #input, #search-type {
        padding: 8px 12px;
        font-size: 0.9em;
    }
    
    .btns {
        flex-direction: row; /* Garde les boutons en ligne */
        justify-content: center;
        gap: 10px;

    }
    
    #btn-primary {
        padding: 10px 20px;
        font-size: 0.9em;
        width: auto; /* Pas de pleine largeur */
    }
    
    footer {
        font-size: 0.85em;
        padding: 10px 0;
    }
}

/* 4 */
@media (max-width: 375px) {
    .container {
        padding: 5px;
        padding-top: 20px;
    }
  
    form {
        max-width: 350px;
    }
    
    .search-bar {
        padding: 5px 12px; /* Padding réduit mais horizontal */
    }
    
    .search-bar input {
        font-size: 0.85em;
        padding: 6px;
    }
    
    .dropdown .btn-secondary {
        padding: 4px 8px;
        font-size: 0.8em;
    }
    
    #dropdownToggle {
        padding: 4px;
    }
    
    #advancedDropdown {
        padding: 12px;
    }
    
    .form-group {
        margin-bottom: 12px;
    }
    
    #label {
        font-size: 0.9em;
    }
    
    #btn-primary {
        padding: 8px 16px;
        font-size: 0.85em;
    }
    
    footer {
        font-size: 0.8em;
    }
}

/* 5 */
@media (max-width: 320px) {
    .logo img {
        max-width: 120px;
    }
    
    form {
        max-width: 320px;
    }
    
    .search-bar {
        padding: 4px 10px; /* Padding minimal mais horizontal */
    }
    
    .search-bar input {
        font-size: 0.8em;
        padding: 5px;
    }
    
    .dropdown .btn-secondary {
        padding: 3px 6px;
        font-size: 0.75em;
    }
    
    #btn-primary {
        padding: 6px 12px;
        font-size: 0.8em;
    }
    
    footer {
        font-size: 0.75em;
    }
}

/* 6 */
@media (max-height: 600px) and (orientation: landscape) {
    .container {
        padding-top: 20px;
        justify-content: flex-start;
        height: auto;
        min-height: 100vh;
    }
    
    .logo {
        margin-bottom: 20px;
    }
    
    .logo img {
        max-width: 120px;
    }
    
    form {
        margin-bottom: 20px;
    }
    
    footer {
        position: relative;
        margin-top: 20px;
    }
}

/* 7 */
@media (max-width: 768px) {
    .curve {
        stroke-width: 3;
    }
    
    .graph {
        opacity: 0.7;
    }
}
@media (max-width: 480px) {
    .curve {
        stroke-width: 2;
    }
    
    .graph {
        opacity: 0.5;
    }
}