/* intégration de la police britannic_bold mettre els guillemets */
@font-face {
    font-family: "britannic_bold";
    src: url(../../ressources/tp_WalonDoow-main/britannic-bold/BRITANIC.TTF);
}


/* ensuite on met la font family avec le nom mit dans le @font-face */
html, body {
    font-family: "britannic_bold";
    color: #e82f4e;
    height: 100%;
    width: 100%;
    margin:0;
    padding: 0;
}

header {
    background-image: url(../../ressources/tp_WalonDoow-main/images//entete.jpg);
    background-color: darkgray;
    background-size: 100vw 100vh;
    /* no repeat donc l'image en une seule fois, pas de mozaïque */
    background-repeat: no-repeat;
    height: 100vh;
    /* flex car deux block l'un sous l'autre, donc en colonne et space between car espacé en haut et en bas */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.logo {
    /* pas de marge pour l'image class logo */
    width: 10rem;
    /* pas de marge car cela sera dans le block nav */
    margin: 0rem;
    }

nav {
    /* grid pour définir la position du logo et des 3 texte liens */
    display: grid;
    /* colonnes de différentes tailles car petit pb avec le "accueile qui avait trop d'espace avec "nos tops ventes" */
    grid-template-columns: 14% 10% 18% 15%;
    /* pas besoin d'espace en plus entre les grid */
    grid-gap: 0em;
    padding: 2em;
    width: 80rem;
}

.nav {
    /* les "p" class nav  */
    display: flex;
    width: 12rem;
    margin-top: 2.5rem;
    font-size: x-large;
}

#titre {
    /* la section id="titre" */
    font-size: 3rem;
    margin: 1rem;
    margin-left: 2rem;       
}

.titre {
    /* h1 class="titre" 
    flex car se sont des "span" 
    flex wrap car se met automatiquement à la ligne*/
    display: flex;
    flex-wrap: wrap;
    width: 80rem;
}

.carte-mini>p {
    /* slectionne tout les "p" de article class="carte-mini" */
    font-size: 1rem;
}

#mini {
    /* (i id="mini") les deux icones qui en fait se comporte comme une police de caractère
    donc pour la coloré on utilise color comme pour le texte
    et pour sa taille, on fait font-size comme pour un texte */
    color: black;
    font-size: 1.75rem;
}

#icone {
    /* div id="icone"
    grid deux colonnes de 20rem ajout de row (lignes de 3rem chacunes)
     */
    display: grid;
    grid-template: 3rem 3rem  /20rem 20rem;   
    grid-column-gap: 9rem;    
    justify-content: center;
    margin-top: 4rem;
    margin-bottom: 4rem;    
}

.carte-mini {
    /* article class="carte-mini" qui contient une icone et un texte
    grid pour centrer les éléments dans leur block et sur la meme ligne (en gros)
    et un gap entre les rows */
    display: grid;
    justify-content: center;
    justify-items: center;
    grid-row-gap: 1rem;
}

#double_lignes {
    /* uniquement parce que "livraison à domicile" est visualisé en deux lignes
    ce fait car le width est de 4.75em donc pas assez grand pour mettre plus que livraison en haut
    le reste va à la ligne car flex-wrap */
    display: flex;
    flex-wrap: wrap;
    width: 4.75em;
}

.redimensionner {
    /* redimensionne toutes les images class="redimensionner" */
    width: 15rem;
}

.GLigne1 {
    /* h2 class="GLigne1"
    grid de 3 colonnes de 25rem chacunes 
    ajout de space-around pour espacer équitablement les 3 éléments avec un espace autour d'eux */
    display: grid;
    grid-template-columns: repeat(3, 25rem);
    justify-content: space-around;                 
}

#ligne1 {
    /* section id="ligne1"
    comprend le titre h2 et article class="GLigne1"
     */
    display: grid;      
    margin-bottom: 10rem;
}

.ligne1 {
    /* div class="ligne1"
    flex car le texte doit être sous l'image, donc en colonne
    align-items pr centrer les éléments
    justify-content: flex-end pour que le texte soit aligné sur la base du block; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin-top: 2rem;
}

.GLigne2 {
    /* h2 class="GLigne2"
    grid de 3 colonnes de 25rem chacunes 
    ajout de space-around pour espacer équitablement les 3 éléments avec un espace autour d'eux */
    display: grid;
    grid-template-columns: repeat(3, 25rem);
    justify-content: space-around;
}

#ligne2 {
    /* section id="ligne2"
    comprend le titre h2 et article class="GLigne2"
     */
    display: grid;
    grid-row-gap: 2rem;
    margin-bottom: 8rem;
}

.ligne2 {
    /* div class="ligne2"
    flex car le texte doit être sous l'image, donc en colonne
    align-items pr centrer les éléments
    justify-content: flex-end pour que le texte soit aligné sur la base du block; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

h2[class*=GLign] {
    /* sélectionne tout les élément h2 avec l'attribut class="GLign"  */
    font-size: 3rem;
    margin-left: 3rem;
    margin-bottom: 2rem;  
}

p {
    /* tout les "p" */
    font-size: 1.5rem;
    margin-top: 1rem;
}

#carre {
    /* section id="carre"
    grid car carré de 4 cartes (image et texte), sur deux colonnes de 20rem
    avec un espacement égal en plus d'un espacement de contour */
    display: grid;
    grid-template-columns: 20rem 20rem;
    justify-content: space-around;
    margin-bottom: 14rem;
}

.carre1 {
    /* article class="carre1"
    flex et colonnes afin de mettre image et texte l'un sous l'autre
    puis centrer les éléments dans chaque block et enfin avec flex-end, aligner le tout sur la base du block */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 3rem;
}

footer {
    /* comme il n'y a que deux éléments, on fait juste un flex et space-between */
    display: flex;
    justify-content: space-between;
    padding: 0 2vw 5vh 2vw;
}


/* enlever la merge et le padding de toute la page html, sinon, on se retrouve avec une bordure blanche */
*{
    margin: 0;
    padding: 0;
    /* border: 1px solid black; */
}