/* Définition des polices personnalisées ======================================================================== */
@font-face 
{
    font-family: 'ranchoregular';
    src: url('../require_include/Rancho-Regular-webfont.eot');
    src: url('../require_include/Rancho-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../require_include/Rancho-Regular-webfont.woff2') format('woff2'),
         url('../require_include/Rancho-Regular-webfont.woff') format('woff'),
         url('../require_include/Rancho-Regular-webfont.ttf') format('truetype'),
         url('../require_include/Rancho-Regular-webfont.svg#ranchoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1									/* balise h1  */
{
    font-family: Arial, sans-serif;		/* police */
    font-size: 1.5em;					/* taille police relative */
    font-weight: bold;					/* texte sera écrit normalement */
    font-style: italic;					/* texte italic */
    text-decoration: underline;			/* texte souligné */
    /* color: green;					/* couleur police */
}

h2									/* balise h2  */
{
    font-family: Arial, sans-serif;		/* police */
    font-size: 1.3em;					/* taille police relative */
    font-weight: bold;				/* texte sera écrit normalement */
    font-style: italic;					/* texte italic */
    padding-top: 8px;					/* marge intérieure en haut */
    /* color: green;					/* couleur police */
}

/* Eléments principaux de la page ================================================================================ */

body								/* balise corp de page */
{
    background: white;					/* arriere plan  #696969  */
    font-family: Comic Sans MS, Arial, Verdana, sans-serif;	/* police utilisée */
    font-size: 1.0em;					/* taille police relative */
    /* font-style: italic;					/* texte italic */
    font-weight: normal;				/* texte normal */   
    color: black ;						/* couleur police */
}

#bloc_page								/* balise spécifique (id) attribut : (#nom id) */
{
    width: 900px;						/* largeur page */
    margin: auto;						/* marge exterieure automatique */
    /* border: 1px solid #ff8833;			/* bordure du haut : largeur, type de bordure, couleur */
}

/* ------------------ media queries sont des règles que l'on peut appliquer dans certaines conditions  --------- */
/* ------------------ Pour tous les types d'écrans, si la largeur de la fenêtre ne dépasse pas 1024 px  -------- */

@media all and (max-width: 1024px)                              
{
    #bloc_page
    {
        width: auto;					/*  largeur automatique (il prend toute la place disponible) */
		padding-left:15px;				/*  Marge interieure gauche */
    }
}

/* Header =========================================================================================================== */
header									/* balise d'en tête*/
{
    display: flex;						/* Technique FLEXBOX : les éléments (les blocs) à l'intérieur sont agencés en mode Flexbox*/
    flex-direction: column;				/* Sens d'agencement des éléments : organisés sur une colonne */
    /* border-bottom: 4px solid #ff8833;	/* bordure du bas : largeur, type de bordure, couleur */
	/* border: 1px solid green;				/* bordure du haut : largeur, type de bordure, couleur */
}

/* Titre_principal  */
#bandeau_titre							/* balise spécifique (id) attribut : (#nom id) */
{
    display: flex;						/* FLEXBOX : les éléments (les blocs) à l'intérieur sont agencés en mode Flexbox*/
    flex-direction: row;				/* Sens d'agencement des éléments : organisés sur une ligne */
    height: 100px;						/* hauteur */
    /* border: 1px solid red;				/* bordure : largeur, couleur */
}

/* logo   */
#logo_nom									/* balise spécifique (id) attribut : (#nom id) */
{
    display: flex;						/* FLEXBOX : les éléments (les blocs) à l'intérieur sont agencés en mode Flexbox*/
    flex-direction: row;				/* sens d'agencement des éléments : organisés sur une ligne */
    align-items: center; 				/* Alignement Axe secondaire : centré */
}

#logo_nom img								/* balise spécifique (id) attribut : (#nom id) */
{
    width: 200px;						/* largeur */
    height: 100px;						/* hauteur */
}

header h1								/* balise h1 contenue dans balise header */
{
    font-family: Arial Narrow, sans-serif;		/* police */
    font-size: 2.2em;					/* taille police relative */
    font-weight: bold;					/* texte sera écrit normalement */
    text-decoration: none;				/* texte souligné */
    text-shadow: 4px 4px 6px #FFC300 ;	/* ombre du texte : décalage horizontal, décalage vertical, dégradé, couleur orange */
}

header h2								/* balise h1 contenue dans balise header */
{
    font-family: Arial Narrow, sans-serif;		/* police */
    font-size: 1.8em;					/* taille police relative */
    font-weight: normal;				/* texte sera écrit normalement */
    text-shadow: 4px 4px 6px gray ;		/* ombre du texte : décalage horizontal, décalage vertical, dégradé, couleur blue */
}

/* Navigation -------------------------------------------------------------------------------------------------- */
nav ul									/* balise ul contenue dans balise nav */
{
    display: flex;						/* FLEXBOX : les éléments (les blocs) à l'intérieur sont agencés en mode Flexbox (par defaut en ligne) */
    justify-content: center;			/* alignement au centre */
    list-style-type: none;				/* pas de puce */
    height: 30px;						/* hauteur bloc */
    border-top: 1px solid black;			/* bordure haute : largeur, couleur */
    border-bottom: 1px solid black;		/* bordure basse : largeur, couleur */
    margin-top: 0px;					/* marge extérieure en haut */
    padding-top: 8px;					/* marge intérieure en haut */
}

nav li									/* balise li contenue dans balise nav */
{
    margin-right: 25px;					/* Marge extérieure droite */
}

nav a									/* balise a (lien) contenue dans balise nav */
{
    font-size: 1.0em;					/* taille police relative */
    color: black;						/* couleur police */
    /* padding-bottom: 1px;				/* marge intérieure en bas */
    text-decoration: none;			/* sans decoration de texte : soulignement */
}

nav a:hover								/* balise a (lien survolé) contenue dans balise nav */
{
    /*color: green;						/* couleur police au survol */
    border-bottom: 1px solid #760001;	/* bordure du bas : largeur, type de bordure, couleur */
}


/* article =========================================================================================================== */

#visite
{
	display: flex;						/* FLEXBOX : les éléments (les blocs) à l'intérieur sont agencés en mode Flexbox (par defaut en ligne) */
	justify-content: center;			/* alignement : centré sur l'axe */
}

#visite video
{
	border: 1px solid black;			/* bordure du haut : largeur, type de bordure, couleur */
	margin-bottom: 25px;				/* marge extérieur en bas */
	width: 240px;						/* largeur */
    height: 420px;						/* hauteur */
}


/* footer =========================================================================================================== */
footer									/* balise d'en tête*/
{
    display: flex;						/* Technique FLEXBOX : les éléments (les blocs) à l'intérieur sont agencés en mode Flexbox*/
    justify-content: space-around;		/* alignement : étiré sur tout l'axe */
    border-top: 4px solid black;		/* bordure du bas : largeur, type de bordure, couleur */
	/* border: 1px solid green;				/* bordure du haut : largeur, type de bordure, couleur */
}


footer img								/* balise spécifique (id) attribut : (#nom id) */
{
    width: 200px;						/* largeur */
    height: 100px;						/* hauteur */
    padding-top: 20px;
}

@media all and (max-width: 1024px)                              
{
    footer
    {
        display: flex;				/* Technique FLEXBOX : les éléments (les blocs) à l'intérieur sont agencés en mode Flexbox*/
		flex-direction: column;		/* sens d'agencement des éléments : organisés en colonne */
    }
}