// CSS utilisés **************************************************

/* Bouton de menu-------------------------*/
.bouton_basic {
	color					: Black;
    width					: 30%;
    font-size				: 1rem;
    background				: ;
}

// Div ----------------------------------
	// Génériques

    
.page_details {
	display					: flex;
    //flex-direction			: row;
  	flex-wrap				: wrap;
  	padding					: 0 4px;  
}
.page_detail_colonne img {
  	margin-top				: 8px;
  	vertical-align			: middle;
}
.pied_de_page {
	position				: relative;
    display					: inline-block;
    //display					: flex;
    width					: 100%;
    margin					: none;
    padding					: none;
    //text-align				: center;
}


// Blocs
.block_hidden{
	visibility 				: hidden;
    opacity					: 0;  
}
.block_visible{
	visibility 				: visible;
    opacity					: 1;  
}    
/* Les div avec une photo en background et un texte */

div.img_back_txt {
	position 				: absolute;
    bottom					: 0;
    margin-bottom			: 50px;
}
.img_back_txt_layout {
	margin-left				: 20px;
    margin-right			: 20px;
    color					: ;
	background-color		: ;
    text-decoration			: none;
}

 
.img_espace {
	height				: 2px;
}
.img_logo_quart {
    background-size	: cover;
    width			: 160px;
    box-shadow			: 0 4px 8px 0 , 0 6px 20px 0 ;
}
.img_logo {
    background-size	: cover;
    width			: 160px;
    height			: 90px;
}
.img_puce {
	width			: 20px;
    height			: 20px;
    object-fit		: contain;
}
.img_logo_carre {
	width			: 40px;
    height			: 40px;
    object-fit		: contain;
}
.img_logo_rect {
	width			: 80px;
    height			: 40px;
    object-fit		: contain;
}
.img_logo_carre_grand {
	width			: 80px;
    height			: 80px;
    object-fit		: contain;
}

.img_centre_v {
	position		: absolute;
    left			: 50%;
    transform: translate3d(0%,-50%,0);
}

img.photo {
	background-color	: transparent;
  	box-shadow			: 0 4px 8px 0 , 0 6px 20px 0 ;
  	margin-top			: 1px;
    margin-bottom		: 1px;
    border-radius		: 8px; 
    object-fit			: cover; 
}
img.tampons {
	background-color	: transparent;
    width			: 150px;
    height			: 150px;
    object-fit		: contain;
}

/* Photo qui s'adaptent automatiquement */
img.photo_dyn {
	box-shadow			: 0 4px 8px 0 , 0 6px 20px 0 ;
  	margin-top			: 1px;
    margin-bottom		: 1px;
    border-radius		: 8px;  
    object-fit			: cover; 
    width				: 100%;
}

img.photo_dyn_60 {
  	margin				: 10px;
    padding				: 10px;
    object-fit			: cover; 
    width				: 60%;
}
img.photo_dyn_80 {
  	margin				: 10px;
    padding				: 10px;
    object-fit			: cover; 
    width				: 80%;
}
img.photo_demi {
	width				: 90%; 
    object-fit			: cover; 
    border-radius		: 8px;  
	box-shadow			: 0 4px 8px 0 , 0 6px 20px 0 ;
}
img.photo_quart {
	width				: 50%; 
    object-fit			: cover; 
    border-radius		: 8px;  
	box-shadow			: 0 4px 8px 0 , 0 6px 20px 0 ;
}
.ombre {
	text-shadow			: 5px 5px 10px ; 
}
.ombre_rouge {
	text-shadow			: 5px 5px 10px ; 
}

.b_variable {
	/* For WebKit */
     background: -webkit-gradient(linear, top, bottom, from(rgba(215,213,213,1)), to(rgba(255,255,255,0)));
    /* For Mozilla */
     background: -moz-linear-gradient(top, rgba(215,213,213,1), rgba(255,255,255,0));
    /* For lt IE8 */
     filter: progid:DXImageTransform.Microsoft.gradient(gradientype=0,
    startColorstr='#EBEAEA', endColorstr='#FFFFFF');
    /* For gt IE8 */
     -ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientype=0,
    startColorstr='#EBEAEA', endColorstr='#FFFFFF');


	background: rgb(191,191,190);
	background: linear-gradient(180deg, rgba(215,213,213,1) 100%, rgba(255,255,254, 0) 0%);
}


/* >>>>>>>>>>>>>>>>> Gestion des div génériques */
.cache {
	visibility				: hidden;
}

div.basic {
	width					: 100%;
	margin					: 0 auto;
    display					: inline-block;
    background-size			: cover;  
}

div.absolute {
	position				: absolute;
}
div.relative {
	position				: relative;
}

div.inline {
	display					: inline-block;
}

/*    en test ------*/
.wrapper {
    border					: 2px dotted rgb(96, 139, 168);
    width: 500px;
}
.box {
    display					: flex;
    flex-wrap				: wrap;
    margin					:-10px;
}
.box>* {
    flex					: 1 1 160px;
    margin					: 10px;
}
/*    Fin test ------*/

div.flex {
	display					: flex;
    align-item				: center;
  	justify-content			: center;
}
div.flex_inherit {
	position 				: inherit;
}

div.flex_column {
	display					: flex;
    flex-direction			: column;
}

div.flex_row {
    display					: flex;
    flex-direction			: row;
    //justify-content			: flex-start;
    //align-items				: stretch;
}

div.flex_row_center {
    display					: flex;
    flex-direction			: row;
    gap						: 3%;
    align-items				: center;
    justify-content			: space-between; // center;
}
div.flex_wrap {
	display					: flex;
    flex-direction			: row;
    flex-wrap				: wrap;
    align-items				: center;
}

div.flex_stop {
	flex					: unset;
}
div.flex_test {
	flex					: 2 2;
}

div.flex_col_center {
    veretical-align			: middle;
}

.zone_link {
    width					: 100%;
    //border-top					: 1px solid #2d2d2d;
    display					: flex;
    justify-content			: center;
    align-items				: center;
}

.opt_vert {
	border-radius		: 15px;
	color				: ; 
    background-color	: ; 
}
.opt_bleu {
	border-radius		: 15px;
	color	: ; 
    background-color	: ; 
}

div.tranparent {
	background-color	: transparent;
}

div.bloc_img_tiers {
	width					: 33.333%;  
    margin					: 0 auto; 
    background-image		: url("../_images/ss_menu/photo_menu_0.jpg");
}

/* Largeurs ----------------------------------*/
div.large_utile {
	margin					: auto;	
	left					: 10%;
    right					: 10%;
    width					: px;
    max-width				: px;
    min-width				: px;
}
div.large_form {
	margin					: auto;	
	left					: 10%;
    right					: 10%;
    //width					: px;
    max-width				: 800px;
    min-width				: px;
}

div.trois_quart {
	width					: 75%;  
    margin					: 0 auto;
}
div.deux_tiers {
	width					: 66.666%;
    margin					: 0 auto;
}
div.demi {
	width					: 45%;   
    margin					: 0 auto;
    display					: inline-block;
    background-size			: cover; 
}
div.tiers {
	width					: 33.333%;  
    margin					: 0 auto; 
}
div.quart {
	width					: 25%;  
    margin					: 0 auto;
}
div.cinquieme {
	width					: 20%;  
    margin					: 0 auto;
}
div.large_100 {
	width			: 95%;
    padding			: 0;
    margin			: 0 auto;
}
div.large_80 {
	width			: 80%;
    padding			: 0;
    margin			: 0 auto;
}
div.large_60 {
	width			: 66%;
    padding			: 0;
    margin			: 0 auto;
} 
div.large_30 {
	width			: 30%;
    padding			: 0;
    margin			: 0 auto;
}
div.large_20 {
	width			: 20%;
    padding			: 0;
    margin			: 0 auto;
}

div.large_10 {
	width			: 10%;
    padding			: 0;
    margin			: 0 auto;
}

video.video_smart {
	max-width				: 100%;
  	height					: 400px;
}

/* Hauteur des lignes -----------------------------------------------*/
div.h10 {
	line-height				: 10px;
    height					: 10px;
}

div.h30, input.h30 {
	height					: 30px;
}

div.h40 {
	height					: 60px;
}
div.h50 {
	height					: 40px;
}
div.h100 {
	height					: 85px;
}
div.h125 {
	height					: 125px; 
}

div.h150 {
	height					: 160px;
}
div.h300 {
	height					: 280px;
   
}
div.h400 {
	height					: 400px;
}
div.h500 {
	height					: 500px;
}

div.bordures_rouge {
	border 					: 1px solid ;  
}
div.bordure_droite_blanc {
	border-right			: 2px solid ;  
    //border-radius			: 10px;  
}
div.bordure_droite_noir {
	border-right			: 1px solid ;  
}
div.bordure_top_rouge {
	border-top				: 1px solid ;  
}
div.bordure_bottom_blanc {
	border-bottom			: 2px solid ;  
    //border-radius			: 10px;  
}

div.titre {
	height					: 40px;
    width					: 100%;
    margin					: 0 auto;
}

div.centre, form.centre, td.centre, p.centre {
	margin					: 0 auto;
    text-align				: center; 
}
div.middle {
	display					: flex;
    align-items				: center;
    margin					: 0 auto;
    text-align				: center; 
}
div.haut {
	vertical-align			: top;
}
div.bottom {
    vertical-align			: bottom;
}
div.droite, p.droite {
    align					: right;
    text-align				: right;
}
div.gauche, p.gauche {
    align					: left;
    text-align				: left;
}
div.sans_marges {
	margin					: 0px;
    padding					: 0px;
}
div.marge {
	margin					: 10px;
    padding					: 10px;
}
div.marge_2 {
	margin					: 10px 0 10px 0;
    padding					: 10px;
}
div.margin_top {
	margin-top				: 20px;
}
div.margin_bottom {
	margin-bottom			: 20px;
}
div.margin_left, p.margin_left {
	margin-left				: 20px;
}

.pad_20 {
	padding					: 10px;
}
.pad_top {
	padding-top				: 20px;
}

.pad_left_right {
	padding-left			: 10px;
    padding-right			: 10px;
}
div.pad_gauche {
	padding-left			: 20px;
}
div.pad_droite {
	padding-left			: 20px;
}
div.pad_top_100  {
	padding-top				: 20px;
}
.pad_left  {
	padding-left			: 10px;
}
.pad_left_20 {
	padding-left			: 20px;
}
div.pad_left_40 {
	padding-left			: 40px;
}

div.bottom {
	bottom					: 20px;
}
div.bottom_40 {
	bottom					: 40px;
}

.tabulation { 
	display		: inline-block; 
	margin-left	: 40px; 
} 

li [
	text-align	: left;
}
/*  Les traits ---------*/
hr.trait_1 {
  border-top: 1px solid black;
}

/* Dashed red border */
hr.trait_2 {
  border-top: 1px dashed black;
}

hr.trait_3 {
  border-top: 1px dotted black;
}

/* Thick red border */
hr.trait_1 {
  border: 1px solid black;
}

hr.trait_5 {
  border: 10px solid green;
  border-radius: 5px;
}

li {
    list-style-image: url('../_images/puces/puce8.png');
    //align			: left;
}