@use '../base/colors' as *;
@use '../layout/media_queries';

/* thème clair */
.header_layout.header--light {
  --header-text-color: #{$noir};
}

/* thème sombre */
.header_layout.header--dark {
  --header-text-color: #{$blanc};
}

.header_layout {
    display: grid;
    
    grid-template-rows: 130px auto auto;

    @include media_queries.media_max(tablet_700) {
        grid-template-columns: 10px minmax(0, 1fr) 10px;
    }
    @include media_queries.media_min(tablet_700) {
        grid-template-columns: 10px minmax(0, 1fr) 10px;
    }
    @include media_queries.media_min(tablet_800) {
        grid-template-columns: 10px minmax(0, 1fr) 10px;
    }
    @include media_queries.media_min(tablet_900) {
        grid-template-columns: 15px minmax(0, 1fr) 15px;
    }
    @include media_queries.media_min(desktop_1000) {
        grid-template-columns: auto 980px auto;
    }
    @include media_queries.media_min(desktop_1100) {
        grid-template-columns: auto 1090px auto;
    }
    @include media_queries.media_min(desktop_1200) {
        grid-template-columns: auto 1160px auto;
    }
    @include media_queries.media_min(desktop_1300) {
        grid-template-columns: 1fr 1250px 1fr;
    }
    @include media_queries.media_min(desktop_1500) {
        grid-template-columns: 1fr 1420px 1fr;
    }
    @include media_queries.media_min(desktop_1800) {
        grid-template-columns: 1fr 1700px 1fr;
    }
    

    nav {
        color: var(--header-text-color);
        a {
            color: var(--header-text-color);
        }
    }

    .header_navigation {
        grid-column: 2;
        grid-row: 1;
        z-index: 10;
    }
    .obscur {
        grid-column: 1 / -1;
        grid-row: 1;
        z-index: 5;
        //background-color: #0000007a;
        background-color: rgba(0,0,0,.4);
    }
    .header-img_cont {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
    }
    .header-img_text {
        grid-column: 2;
        grid-row: 3;
        color: $blanc;

        

        margin-left: 80px;
        margin-bottom: 150px;

        @include media_queries.media_max(tablet_800) {
            width: 500px;
        }
        @include media_queries.media_min(tablet_800) {
            width: 650px;
        }

        .header-img_titre {
            margin-bottom: 10px;
            text-transform: uppercase;
            font-family: 'barlow_black';
            
            @include media_queries.media_max(tablet_800) {
                font-size: 40px;
            }
            @include media_queries.media_min(tablet_800) {
                font-size: 50px;
            }
        }
        .header-img_description {
            margin-bottom: 20px;
            font-family: 'barlow_regular';
            
            @include media_queries.media_max(tablet_800) {
                font-size: 18px;
            }
            @include media_queries.media_min(tablet_800) {
                font-size: 20px;
            }
        }

        .decouvrir {
            display: flex;
            .decouvrir_icone {
                margin-top: 2px;
                margin-right: 5px;
            }
            .decouvrir_texte {
                font-family: 'barlow_regular';
                font-size: 18px;
            }
        }
    }

}