@charset "UTF-8";
/* CSS Document */
/* overflow :
visible(par défaut) : si le texte dépasse les limites de taille, il reste visible et sort volontairement du bloc.
hidden: si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le texte.
scroll: là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de défilement pour qu'on puisse lire l'ensemble du texte. C'est un peu comme un cadre à l'intérieur de la page.
auto: c'est le mode « pilote automatique ». En gros, c'est le navigateur qui décide de mettre ou non des barres de défilement.
*/

/* définition de variables en CSS */ 

/*******************************************************************/
/*      STRUCTURE  FLEX SUR TOUT LE DOCUMENT                       */
/*******************************************************************/
body {
    margin:auto; /* pour centrer le body au milieu de la fenêtre du navigateur */
    padding-left:1em ;
    padding-right:1em;
	display: flex;
	flex-direction: column;
	align-items: stretch;
    background-color : LightGrey ;
    max-width: 1240px;
}

header {
	order:1;
}

nav {
	order:2;
}

section.titre {
	order:3;
}

section.structure {
	order: 4;
}

footer {
	order: 5;
}
 

footer p {
    box-sizing: border-box;  /* padding and border are included in the width and height */
	margin:2em 0 0 0;
	border-bottom: solid;
	border-top: solid;
	border-width:thin;
	border-color:dimgray;
	font-size: small;
}

/*******************************************************************/
/*      LES MENUS POUR LA NAVIGATION                               */
/*******************************************************************/
/* L'élément HTML <nav> représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page. Autrement dit, c'est une section destinée à la navigation dans un document. */

    /********************************************/
    /* par défaut, dans ce cas, les smartphones */
    /********************************************/
    nav ul {
        list-style: none; /* pas de puces pour les éléments de la liste */
        display: flex;
        flex-direction: column;
    }

    nav ul li ul {
        list-style: none; /* pas de puces pour les éléments de la liste */
    }

    nav ul li a
    {
        text-decoration: none;
        padding-left: 0.5em;
    }

    nav ul li ul li a {
        
    }

@media (hover : hover) and (pointer : fine) {
    /*************************************************/
    /*  pour les ordinateurs avec souris ou trackpad */
    /*************************************************/

        nav ul {
            padding: 0;
            list-style: none; /* pas de puces pour les éléments de la liste */
            display: flex; /* à l'intérieur du bloc, les autres blocs vont se positionner de façon flexible */
            flex-direction: row; /* à l'intérieur du bloc, les autres blocs vont se ranger à l'HORIZONTALE tant qu'il y a de la place */
        }
        
        nav ul li { /* par défaut, les LI sont les descendants direct du UL, donc ils se répartissent en FLEX */
            margin-right: 3px;
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0; /* régler flex-basis sur la valeur 0 pour indiquer à flexbox qu’il doit ignorer la taille par défaut du container. */
            /* Flexbox fait la somme des valeurs données à chaque item, puis divise chaque valeur par cette somme. Chaque colonne occupe donc 1 ÷ (1 + 1 + 1) soit 1/3 de l’espace total*/
            border-style: solid;
            border-width: thin;
            width: 100%;
            max-height: 1.3em;
        }
        
        nav ul li a { /* vaut pour les ul li imbriqués*/
            font-size: larger;
            text-decoration: none;  /* les liens ne sont pas soulignés */
            color:var(--couleur--menu--1);
            padding-left: 0.5em;
        }
        
        nav ul li ul {
            flex-direction: column; /* à l'intérieur du bloc, les autres blocs vont se ranger à la VERTICALE tant qu'il y a de la place */
            display: none; /* par défaut, les sous-menus ne sont pas affichés */
            width: 100%;
            /* background-color : white ; */
        }
        
        nav ul li:hover ul {
            display:flex; /* quand le curseur est sur le menu, les sous-menus apparaissent */
            position:relative;
            z-index:1;
            background-color:LightGrey;
        }
        
        nav ul li ul li a {
            color:var(--couleur--menu--2);
        }
        
        nav ul li ul li a:hover {
            color: black;
        }
}


/*******************************************************************/
/*      LES SECTIONS                                               */
/*******************************************************************/

section.titre {
	/* margin-top: 4em; */
}

section.structure {      /* classe structure - structure la page entière, sauf en-tête, menus et pied-de-page */
	/*
	L'élément HTML section représente une section générique d'un document, par exemple un groupe de contenu thématique. Une section commence généralement avec un titre.
	*/
	display: flex; /* à l'intérieur du bloc, les autres blocs vont se positionner de façon flexible -  Cela crée un contexte flex pour tous les descendants directs.*/
	flex-direction: row; /* à l'intérieur de bloc, les autres blocs vont se ranger à l'horizontale tant qu'il y a de la place */
			/*
			row : organisés sur une ligne (par défaut)
			column : organisés sur une colonne
			row-reverse : organisés sur une ligne, mais en ordre inversé
			column-reverse : organisés sur une colonne, mais en ordre inversé
			*/
	flex-wrap: nowrap; /* si un bloc n'a pas de place, alors... */
			/*
			nowrap : pas de retour à la ligne (par défaut)
			wrap : les éléments vont à la ligne lorsqu'il n'y a plus la place
			wrap-reverse : les éléments vont à la ligne lorsqu'il n'y a plus la place en sens inverse
			*/
	justify-content:space-between; /* alignement des items enfants sur l'axe principal : horizontal ou vertical, selon flex-direction : row ou column */
			/*
			flex-start : alignés au début (par défaut)
			flex-end : alignés à la fin
			center : alignés au centre
			space-between : les éléments sont étirés sur tout l'axe (il y a de l'espace entre eux)
			space-around : idem, les éléments sont étirés sur tout l'axe, mais ils laissent aussi de l'espace sur les extrémités
			*/
	align-items:stretch; /* alignement sur l'axe secondaire : si l'axe principal est horizontal, l'axe secondaire est vertical. Et inversement, si l'axe principal est vertical, l'axe secondaire est horizontal.*/
			/*
			stretch : les éléments sont étirés sur tout l'axe (valeur par défaut)
			flex-start : alignés au début
			flex-end : alignés à la fin
			center : alignés au centre
			baseline : alignés sur la ligne de base (semblable à flex-start)
			*/
	align-content: stretch; /* lorsque la répartition des blocs crée plusieurs lignes, on peut les répartir les unes par rapport aux autres */
			/*
			flex-start : les éléments sont placés au début
			flex-end : les éléments sont placés à la fin
			center : les éléments sont placés au centre
			space-between : les éléments sont séparés avec de l'espace entre eux
			space-around : idem, mais il y a aussi de l'espace au début et à la fin
			stretch (par défaut) : les éléments s'étirent pour occuper tout l'espace
			*/
	
	word-wrap: break-word; /* si un mot est trop long et risque de déborder du bloc, le mot est coupé */
	border-style:hidden;
}