/* ------------- REGLAGES GENERAUX ------------------------------*/
/* Déclaration des variables */

	:root{--main-color: #ef2d2d;--second-color: #bfbf35;--third-color: #f5f5f7;--secondLight-color: #dddd27;--font-size: 1rem;--fontFamily: "Helvetica-Neue", sans-serif;--height-li-menu-hamburger: 2rem;--fond_menu_hamburger: 2.5rem;--width_icone_recherche:calc(var(--fond_menu_hamburger)*1.2);--top-position-icone-recherche:calc(var(--fond_menu_hamburger)*1.4);--boxShadow: 0.15rem 0.25rem rgba(220, 220, 220, 0.8);
        --decalageParagraphe: 7rem;--height-boxContentFooter: 6rem; --lateralWidth: 2rem; --grid-gap: 2px; --tdWidth: 30%;--logoWidth: 25%;--heightRow1: 3rem;
--heightTitre: 0;}	
    
   

/* FIN Déclaration des variables */


/* POLICES */

 @font-face {
	font-family: 'Folks-Normal';
	src: url('../folks_policeset/Folks-Normal.eot') format('eot'),
src: url('../folks_policeset/Folks-Normal.woff') format('woff'),
src: url('../folks_policeset/Folks-Normal.woff2') format('woff2'),
src: url('../folks_policeset/Folks-Normal.eot?#iefix') format('embedded-opentype'),
src: url('../folks_policeset/Folks-Normal.ttf') format('ttf'),
src: url('../folks_policeset/Folks-Normal.svg#Folks-Normal') format('svg');}
	
/* Fin déclaration police */
    
/******* Style des Liens ********/

*[href]:not(#mentions_legales)
{text-decoration: none;
cursor: crosshair;
font-family: var(--fontFamily);
color: white;
}

/******* Fin style des liens *****/	

    
/* Gestion viewport */ 

#main {
    max-height: 100%;
    font-family: var(--fontFamily);
    font-size: 14px;
    overflow-x: hidden;}


/* Fin Gestion viewport */

/********************************************* RESPONSIVE *******************************************/
/* rendre éléments responsive smartphone invisibles */
.Small {
display: none; 
}

/******************************* Fin Responsive ***********************************************/

/*******************************************************************************************************/
/*************************************  Visibilite des BLOCS MENU INDEX.PHP ****************************/
/*******************************************************************************************************/
    
*[data-visibility="noIndex"] {display: none; visibility: hidden;}



/* ------------- FIN REGLAGES GENERAUX ---------------------------*/


  /**************************************************************************************************/
 /************************************* INCLUDE PHP ************************************************/
/**************************************************************************************************/

/* ------------------------------------- 2 BARRES MENUS -------------------------------------------*/

/* #barresMenu {
grid-column: 1 / -1;
grid-row: 1 / 1;} */
    
.eltMenuBordures {
display: block;
border: var(--main-color) 0.1rem 50%;
padding: 0;
margin: 0;
}

/**** Div Bouton Affichage sommaire  ****/
    
.clicMenuText {
padding: O;
margin:0;
background: transparent;
position: inherit;
z-index: 10;
}



/*------------------------------liste titres Articles créées via JS -----*/
#listeMenuArticle {
    /* display: flex; */
    background: linear-gradient(to left, #BFBF35, #EF2D2D);
    color: white;
    border-radius: 0.5rem;
    max-height: 100%;
    position: absolute;
    top: 13%;
    right: 17%;
    border: solid 0.2rem var(--third-color);
    z-index: 40;
    border-width: 0.2rem;
    border-style: solid;
    border-color: rgb(239, 45, 45);
    list-style: none;
    font-style: oblique;
    font-stretch: semi-condensed;
    visibility: hidden;
}



.scale0{
transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-moz-transform: scale(0);
-webkit-transform: scale(0);
}


#listeMenuArticle > li {display: flex;flex-direction: column;font: var(--fontFamily) 3rem bold;overflow: hidden;align-items: center;}


#clicMenuText {
    pointer-events: all;
visibility: visible;}

#listeMenuArticle li a {
display: flex;
padding: 0;
margin: 0;
}





#croixFermeture {display: block;position: absolute;top: -0.75rem;right: -0.75rem;border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;border: var(--main-color) 0.2rem solid;min-width: 2rem;min-height: 2rem;background-color: var(--second-color);}





/* GEENERATION D'UNE CROIX DANS ROND A COCHER SOMMAIRE TITRES */

#barreCroixFermeture {display: block;width: 0.7rem;height: 0.2rem;background-color: var(--main-color);position: absolute;top: calc(50% - 0.10rem);left: calc(50% - 0.30em);z-index: 1;}

#barreCroixFermeture:before, #barreCroixFermeture:after {
position: absolute;
content: "";
display: block;
width: 0.6rem;
height: 0.15rem;
background-color: transparent;
z-index: -1;   
}

#barreCroixFermeture:before {top: -0.5rem;
left: calc(50% - 0.35rem);}
#barreCroixFermeture:after {top: 0.5rem;
left: calc(50% - 0.35rem);}


#croixFermeture:hover > #barreCroixFermeture:before {
transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
background-color: var(--main-color);
top: var(--grid-gap);
}

#croixFermeture:hover > #barreCroixFermeture:after {
transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
background-color:  var(--main-color);
top: var(--grid-gap);
}



#croixFermeture:hover > #barreCroixFermeture {
    background: transparent;}


.active {
  opacity:1;
  z-index:9997;
}

.active-listeMenuArticle {
  opacity:1;
transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
-moz-transform:scale(1);
-webkit-transform:scale(1);
}





/*------------------------------Fin liste titres Articles créées via JS -----*/ 

/********************************SVG icone menu texte  MENU HAUT***********************************/
/********************************************************************************************/

svg.clicMenuText.button.Icon-menu {
    fill: transparent;
    stroke: var(--main-color);
stroke-width: 0.05rem;
    display: block;
    position: relative;
}



li#menuArticle:hover svg.clicMenuText.button.Icon-menu {
    stroke: var(--third-color);
    }

    

rect.button {
  stroke:#fff;
  fill:#fff;
  fill-opacity:0;
  stroke-opacity:0;
}


/*-------------------------SVG Style ----------------------------------------*/
    


/*--------------styles toutes Icônes---------------*/    

.Icon {

/* permet de gérer les dimensions des SVG avec "font-size" */
width: 1em;
height: 1em;    
margin: auto;
}

/*------------------Icon liste menu SVG ---------------*/
.Icon-menu {
font-size: 2rem;
}


svg.clicMenutext:hover {
stroke: "white";
}
    

/*---------------------------------------------------------------------------------------*/
/*                                 barre MENU BUTTON CTA                                */
/*-------------------------------------------------------------------------------------*/

#barreCTA {
    
    grid-column: 2 / -1;
    grid-row: 1 / span 1;
    display: flex;
    padding-left: calc(var(--fond_menu_hamburger) + 0.3rem + 0.1rem);
    /* position: absolute; */
    overflow: visible;
    flex-flow: nowrap row;
    justify-content: space-between;
    background-color: rgb(87%, 87%, 15%, 40%);
    position: relative;
    height: var(--heightRow1);
    z-index: 12;               /* Z INDEX 12 */
    max-height: var(--heightRow1);
    border-bottom: 0.2rem solid white;
    }



#barreCTA > #divLabelMenuHB {
    display: flex;
    min-width: var(--fond_menu_hamburger);
    max-width: var(--fond_menu_hamburger);
    min-height: var(--heightRow1);
    max-height: var(--heightRow1);
    padding: 0.3rem;
}



#barreCTA > button#buttonBArreCTA {
    display: inline-flex;
    border: 0.2rem solid white;
    border-radius: 0.5rem;
    color: white;
    flex-wrap: nowrap;
    font-size: calc(var(--font-size)*1.2);
    font-family: var(--fontFamily);
    max-height: 3rem;
    box-sizing: border-box;
    background: var(--main-color);
    /* vertical-align: middle; */
    margin: 0.5rem auto;
    animation: mvtCTAButton alternate-reverse 2s backwards infinite ease-in-out;
    --webkit-appearence: none;
    /* flex: 0.4 1 0; */
    flex-flow: row nowrap;
    justify-self: end;
    align-self: end;
}
    
    /*display: inline-flex;
    border: 0.2rem solid white;
    border-radius: 0.5rem;
    color: white;
    flex-wrap: nowrap;
    font-size: calc(var(--font-size)*1.2);
    font-family: var(--fontFamily);
    max-height: 3rem;
    box-sizing: border-box;
    background: var(--main-color);
    vertical-align: middle;
    margin: 0.5rem auto;
    animation: mvtCTAButton alternate-reverse 2s backwards infinite ease-in-out;
    --webkit-appearence: none;
    flex: 0.25 1.2 0;
    flex-flow: row nowrap;*/


#barreCTA > button#buttonBArreCTA > span {
margin: auto;
    display: inline-flex;
    flex: 1 0.5 1rem;
    align-content: center;
    justify-content: center;
}

#barreCTA > button#buttonBArreCTA:hover {
color: var(--main-color);
background: var(--main-color);
animation-play-state: paused;
--webkit-appearence: none;
}


/* placement logo menu haut */

.flexIdeation {
display: flex;
    flex: 0.2 0.6 0;
    background: transparent;
    border: transparent;
    max-width: 100%;
}

button.logo {
display: flex;
    position: inherit;
    z-index: 9;
    margin: 0;
    padding: 0;
    overflow: visible;
    justify-content: flex-end;
    align-items: flex-end;
}

svg#logoTPEDigital {margin-right: 0;
    stroke-width: 0.2rem;
    stroke: #bfbf35;
    fill: #ef2d2d;
    display: flex;
    /* flex: 0.55 0.3 0; */
    /*stroke-width: 0.2rem;
    stroke: #bfbf35;
    fill: #ef2d2d;*/
    /* max-height: unset; */
    align-self: self-end;
    width: 9rem;
    filter: drop-shadow (var(--grid-gap) var(--grid-gap) white);
    /* position: relative; */
    /* z-index: 200; */
}

svg:hover#logoTPEDigital {
    stroke-width: 0.2rem;
    stroke: #ef2d2d;
    fill: #bfbf35;}


a[href*="index"] {
    justify-content: flex-end;
    /* align-content: start; */
    /* flex: 0.3 0.5 0; */
    flex-flow: row wrap;
    display: flex;
    position: relative;
    z-index: 5;
    /*display: flex;
    height: 100%;
    justify-content: flex-end;
    flex: 1 0.5 1rem;
    flex-flow: row wrap;
    max-width: 100%; */
    /* max-width: min-content; */
}

/* fin logo menu haut */

/* ------------------------ANimation BUTTON CTA -------------------------*/

@keyframes mvtCTAButton {
	0% {color: white;
background: var(--main-color);
}

20% {color: var(--main-color);
background: white;
transform: none;}

40% {color: white;
background: var(--main-color);
}


60% {color: var(--main-color);
background: white;
}

80% {color: white;
background: var(--main-color);
}
}


/*-------------------------------------------------------------------------------------------*/ 
/*                                      BARRE MENU BAS                                      */
/*-----------------------------------------------------------------------------------------*/ 


/*------------------ BARRE MENU BAS  -----------------------------------*/

/* TD BARRE MENU */

ul#trBarreMenuBas > li {
   display: flex;
   /* max-width: 100%; */
   /* min-width: fit-content; */
   /* background-color: transparent; */
   text-align: center;
   vertical-align: middle;
   /* max-height: calc(var(--fond_menu_hamburger)*1.2); */
   /* min-height: calc(var(--fond_menu_hamburger)*1.2); */
   /* white-space: nowrap; */
   /*overflow: hidden;*/
   /* padding: 0.3rem; */
   z-index: 3;
   /* border-right: 2px white solid; */
   /* border-left: 2px white solid; */
   /* background: linear-gradient(to left, #BFBF35, #EF2D2D); */
}

   
/*---------------------------BARRE MENU BAS  *-----------------------------------*/

ul#barreMenuBas {display: flex;
    min-width: 100%;max-width: 100%;
    background-color: var(--second-color); 
    position: inherit; 
    z-index: 110;
    /* box-shadow: 5px 5px  black; */}


#trBarreMenuBas {
    /* grid-area: 2 / 2 / 2 / 7; */
    display: flex;
    min-width: 100%;
    max-width: 100%;
    height: fit-content;
    margin: 0.1rem;
    padding: 0px;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    overflow-x: scroll;
    background-color: var(--second-color);
        position: relative;
    z-index: 2;   /* z index 2 */
   /* Hide scrollbar for IE and Edge */
  -ms-overflow-style: none;
    -moz-overflow-style: none;
}
    
    /* Hide scrollbar for Chrome, Safari and Opera */
#trBarreMenuBas::-webkit-scrollbar {
  display: none;
}



/*--------------------------------Hashtags Menu + RS-------------------------------*/

#trBarreMenuBas li#tagPage_RS {
display: flex;
    flex-direction: column;
background: linear-gradient(to left, #BFBF35, #EF2D2D);
    border-right: var(--grid-gap)  white solid;
    border-left: var(--grid-gap)  white solid;
}

#hashtag {
display: flex;
margin: auto;

}

#hashtag > p {display: flex;/* background: linear-gradient(to left, #BFBF35, #EF2D2D); *//* border: solid white 0.1rem; */justify-content: center;padding: 0.2rem 1rem;max-height: content;font: var(--fontFamily) 2rem bold;color: white;text-align: center;line-height: content;box-sizing: border-box;margin: 0;}

/***********************************DEBUG USER AGENT STYLESHEET**********************************/

ul#listeFilAriane {
margin-block-start: auto;
    margin-block-end: auto;
    margin-inline-start: 0px;
    margin-inline-end: auto;
    padding-inline-start: 0px;
}


/***********************************DEBUG **********************************/

/*







/*-------------------------------- Text Sous MenuBas --------------------------------*/




#textCommentSubMenu {
    display: inline-flex;
    min-width: 100%;
    max-width: 100%;
    color: black;
    font-family: var(--fontFamily);
    justify-content: space-between;
    border-bottom: solid black var(--grid-gap) ;
    list-style: none;
    padding-inline-start: 0px;
    flex-flow: row wrap;
    max-height: 100%;
    overflow: hidden;
}


#textCommentSubMenu li {
display: flex;
font-style: italic;
font-size: 0.7rem;
    padding-inline-start: 0px;
}



    
/********************************************************************************/
/*                                     MENU HB                                 */
/******************************************************************************/

#ul_menu {/* display: grid; */
grid-row: 1 / span 4;
grid-column: 2 / span 5;
    /* position: absolute; */
    /* top: 0; */
    margin: 0;
    /* margin-block-start: 0; */
    min-height: 100%;
    min-width: 100%;
    max-height: 100%;
    max-width: 100%;
    list-style: none;
    padding-inline-start: 0;
}


#menu_hamburger_container {
padding: 0;
margin: 0;
min-width: 100%;
max-width: 100%;
}

#menu_hamburger {
display: block;
margin: 0;
}

div#liens_navigation_menu_hamburger {
display: flex;
flex-direction: column;
position: absolute;
background: var(--second-color);
font-family: var(--fontFamily);
padding: 2em 1em;
box-sizing: border-box;
max-width: 100%;
min-width: 100%;
max-height: 100%;
min-height: 100%;
transform: translate(0, -100%);
-webkit-transform: translatetransform: translate(0, -100%);
-moz-transform: translatetransform: translate(0, -100%);
-ms-transform: translatetransform: translate(0, -100%);
-o-transform: transform: translate(0, -100%);	
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
visibility: hidden;
overflow: hidden;
text-decoration: none;

  
}

#menu_hamburger_container > input#checkbox_liens_menu:checked + label#checkbox_menuHb_label ~ #liens_navigation_menu_hamburger {
transform: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
visibility:visible;
overflow: hidden;
z-index: 11;                                                /*//////// Z-INDEX:11 ////////*/
}

/*-- HOVER liens menu hamburger */

/* Liens navigation Menus */

#liens_navigation_menu_hamburger > div {
display: flex;
margin: ;
padding: 0,5em;
margin-left: var(--height-li-menu-hamburger);	
line-height: var(--height-li-menu-hamburger);
max-width: 60%;
color: white;
text-decoration: none;
left: 0;
}


.bloc_menu_hb_souscategorie {
position: relative;
display: flex;
text-align: center;
}

/* -- background et bordures --*/
.menu_hb_categorie, .menu_hb_souscategorie {
background: rgba(239, 45, 45, 0.3);
text-align: center;
border-bottom: var(--grid-gap)  dashed var(--main-color);
border-top: var(--grid-gap)  dashed var(--main-color);
background-color:  rgba(239, 45, 45, 0.3);
color: white;
text-decoration: none;

}

/* -- Fin background et bordures --*/

/* -- menu HB CATEGORIE -- */

.menu_hb_categorie > a {font-size: 2em;
text-decoration: none;
color: white;}

.menu_hb_souscategorie ul li a {
font-size: 1em;
text-decoration: none;
color: white;
}

/* -- FIN menu HB CATEGORIE et SOUS CAT-- */


/*-- HOVER liens menu hamburger */

#liens_navigation_menu_hamburger > div > div.menu_hb_categorie ~ div.bloc_menu_hb_souscategorie >  div.menu_hb_souscategorie > ul {
display: none;
}

#liens_navigation_menu_hamburger > div:hover > div.menu_hb_categorie ~ div.bloc_menu_hb_souscategorie > div.menu_hb_souscategorie > ul {
display: flex;
flex-direction: column;
transition: background 1s ease-out 0,5s, font-style 1s ease-out 0,5s, text-align 1s ease-out 1s;
visibility: visible;
text-decoration: none;
--webkit-appearence: none;
list-style: none;
}

#liens_navigation_menu_hamburger > div:hover > div.menu_hb_categorie ~ div.bloc_menu_hb_souscategorie > div.menu_hb_souscategorie > ul > li:before {
content: '\02E5';

} 

/*-- FIN HOVER liens menu hamburger */

/* bloc video droite */

#liens_navigation_menu_hamburger > div#menu_hb_video {
display: block;
position: absolute;
left: 70%;
right: 0;
top: 0;
bottom: 0;
margin: 0;
padding: 0;
width: auto;
min-height: 100%;
box-sizing:content-box;
overflow: hidden;
}

#menu_hb_video > video {
display: flex;
position: absolute;
min-width: 100%;
min-height: 100%;
object-fit: cover;
object-position: center;
}

/* Fin bloc video droite */

/*-- FIN HOVER liens menu hamburger */
        


/* -----   BLOC MENU  ----- */



/*blocs contenu menu hamberger après clic*/

#liens_navigation_menu_hamburger{
display: flex;
flex-direction: column;
position: absolute;
top: 0;
z-index: 10;    /* >>>Z INDEX 10<<< */
background: var(--second-color);
background-clip:border-box;
-moz-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
visibility: hidden;
max-width: 100%;
min-width: 100%;
max-height: 100%;
min-height: 100%;
overflow: hidden;
}     
	

#menu_hamburger_container input#checkbox_liens_menu:checked + label#checkbox_menuHb_label ~ #liens_navigation_menu_hamburger {
    transform: none;
    visibility: visible;
    position: absolute;
    top: calc(var(--heightRow1) + var(--grid-gap));
    left: calc(2em + var(--grid-gap));      
    margin: 0;
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    max-width: 100%;}

/*-- HOVER liens menu hamburger */

/* -- div ronde pour masquer l'icone recherche qunad clic menu HB -- 

input#checkbox_liens_menu + label#checkbox_menuHb_label ~ div#masque_fond_recherche_icone {
display: block;
position: absolute;
top: var(--top-position-icone-recherche);
left: -2em;
margin: 0 0 0 -1em;
border-radius: 50%;
width: calc(var(--fond_menu_hamburger)*1.4);
height: calc(var(--fond_menu_hamburger)*1.4);
max-width: calc(var(--fond_menu_hamburger)*1.4);
max-height:calc(var(--fond_menu_hamburger)*1.4);  
transform: translate(-1000%, 0%);
-moz-transform: translate(-1000%, 0%);
  -ms-transform: translate(-1000%, 0%);
  -webkit-transform: translate(-1000%, 0%);
-o-transform: translate(-1000%, 0%);
background: var(--second-color);
z-index: 16; 
}

input#checkbox_liens_menu:checked + label#checkbox_menuHb_label ~ div#masque_fond_recherche_icone {
transform: translate(-2%, -1%);
-o-transform: translate(-2%, -1%);
-ms-transform: translate(-2%, -1%);
-moz-transform: translate(-2%, -1%);
-webkit-transform: translate(-2%, -1%);
}

*/

.bloc_menu_hb_souscategorie {
position: relative;
display: flex;
text-align: center;
}


#liens_navigation_menu_hamburger > div:hover > div.menu_hb_categorie ~ div.bloc_menu_hb_souscategorie > div.menu_hb_souscategorie > ul {
display:flex;
flex-direction: column;
transition: background 1s ease-out 0,5s, font-style 1s ease-out 0,5s, text-align 1s ease-out 1s;
visibility: visible;
text-decoration: none;
}


#liens_navigation_menu_hamburger > div > div.bloc_menu_hb_souscategorie > div.menu_hb_souscategorie > ul  {
display: none;
} /*visibility: hidden;*/


/*-- FIN HOVER liens menu hamburger */

#liens_navigation_menu_hamburger {
padding: 2em 1em;
box-sizing: border-box;
}

#liens_navigation_menu_hamburger > div  {
display: flex;
margin: 0;
padding: 0,5em;
margin-left: var(--height-li-menu-hamburger);	
line-height: var(--height-li-menu-hamburger);
width:70%;
}

/*-- apparence liens menu hamburger */

/* -- background et bordures --*/
.menu_hb_categorie, .menu_hb_souscategorie {
background: rgba(239, 45, 45, 0.3);
text-align: center;
border-bottom: var(--grid-gap) dashed var(--main-color);
border-top: var(--grid-gap) dashed var(--main-color);
background-color:  rgba(239, 45, 45, 0.3);
}

/* -- Fin background et bordures --*/

/* -- menu HB CATEGORIE -- */

.menu_hb_categorie{font-size: 2em;}



/* -- FIN menu HB CATEGORIE -- */


.menu_hb_souscategorie ul li {list-style: none;
font-size: 1em;
}

.menu_hb_souscategorie ul li:hover {
font: italic bold var(--second-color);
background: var(--main-color);
}

.menu_hb_souscategorie ul li:hover::before {
content: '\02E5';
color: white;
font: bold 2em;
}

.menu_hb_souscategorie ul li:first-child {
background: rgba(239, 45, 45, 0.3);
font: 1.5em bold;
}

#liens_navigation_menu_hamburger > div > div.menu_hb_categorie ~ div.bloc_menu_hb_souscategorie  {
display:flex;
}

/*-- FIN apparence liens menu hamburger */



#menu_hb_video {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 60%;
	width: auto;
	min-height: 100%;
	box-sizing: border-box;
	z-index: 14;/* >>>Z INDEX 14<<< */
}


#menu_hb_video > video {
display: flex;
position: absolute;
min-width: 10%;
min-height: 100%;
object-fit: cover;
object-position: center;

}

/* responsive */

#menu_hb_blocdroit_smartphone {display: none;
}
#menu_hb_blocdroit_smartphone > #video_smartphone_typing {display: none;
}

/* Fin responsive */

/*#menu_hb_blocdroit img {	
object-fit: cover;
object-position: center;
box-sizing: border-box;
max-height: 100%;
max-width: 100%;
z-index: 14;}  */

/* >>>Z INDEX 14<<< */ 

/* FIN menu déroulant */


/* fin contenu menu hamberger après clic*/

/* -----FIN BLOC MENU----- */





    
/* --------------------------------------------------------*/
/* -------------------- BOUTONS  -------------------------*/
/* ------------------------------------------------------*/

/* Bouton Menu HB */

input#checkbox_liens_menu {
position: absolute;
left: -9999px;
}

label#checkbox_menuHb_label {   
    display: block;
    position: relative;
    /*left: 2rem;
     top: calc(var(--font-size)*1.2+0.2rem+0.2rem); */
    /* margin-left: 0.3rem; */
    background: rgba(255,255,255,0);
    /* border: none; */
    min-width: var(--fond_menu_hamburger);
    max-width: var(--fond_menu_hamburger);
    min-height: var(--heightRow1);
    max-height: var(--heightRow1);
    padding: 0.3rem;
    /* top: calc(var(--heightRow1) / 5); */
    z-index: 15;
    /* background: var(--secondLight-color);*/
    
}

    

#menu_hamburger_container > input#checkbox_liens_menu + label#checkbox_menuHb_label > .barre_menu_hamburger {
    position: relative;
    display: block;
    /* position: absolute; */
    background: var(--main-color);
    width: calc(var(--fond_menu_hamburger) * (2/3));
    height: calc(var(--fond_menu_hamburger)/9);
    top: calc(var(--fond_menu_hamburger) / 4.5);
    opacity: 1;
    

}

#menu_hamburger_container > input#checkbox_liens_menu + label#checkbox_menuHb_label > .barre_menu_hamburger:after, 
#menu_hamburger_container > input#checkbox_liens_menu + label#checkbox_menuHb_label > .barre_menu_hamburger:before {
content: " ";
display: block;
position: absolute;
background: var(--main-color);
height: calc(var(--fond_menu_hamburger)/9);
opacity: 1;
z-index: 5; /* >>>Z INDEX 5<<< */

}

input#checkbox_liens_menu + label#checkbox_menuHb_label > .barre_menu_hamburger:before
{
    top: -0.5em;
width: var(--fond_menu_hamburger);}

input#checkbox_liens_menu + label#checkbox_menuHb_label > .barre_menu_hamburger:after 
{	
   
top: 0.5em;
width: calc(var(--fond_menu_hamburger) * (1/3));
}

/* barres menu HB après clic */

#menu_hamburger_container > input#checkbox_liens_menu:checked + label#checkbox_menuHb_label ~ .barre_menu_hamburger {
display: block;
position: absolute;
background: var(--second-color);
width: var(--fond_menu_hamburger);
height: calc(var(--fond_menu_hamburger)/7);
z-index: 5; /* >>>Z INDEX 5<<< */
opacity: 1;
top: calc(var(--fond_menu_hamburger)*1.8);
left: calc(var(--fond_menu_hamburger)*0.1);
}

#menu_hamburger_container > input#checkbox_liens_menu:checked + label#checkbox_menuHb_label > .barre_menu_hamburger:after, 
#menu_hamburger_container > input#checkbox_liens_menu:checked  + label#checkbox_menuHb_label > .barre_menu_hamburger:before {
content: "";
display: block;
position: inherit;
background: var(--main-color);
width: calc(var(--fond_menu_hamburger) * (2/3));
height: calc(var(--fond_menu_hamburger)/7);
opacity: 1;
z-index: 5; /* >>>Z INDEX 5<<< */
}



/* ----- Bouton Menu (Hamburger---- */ 



input#checkbox_liens_menu:checked + label#checkbox_menuHb_label > .barre_menu_hamburger:before
{ position: absolute;
    transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
background: var(--main-color);
opacity: 1;
top: 0;
}

input#checkbox_liens_menu:checked + label#checkbox_menuHb_label > .barre_menu_hamburger:after 
{
     position: absolute;
    transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
background: var(--main-color);
opacity: 1;
top: calc(-1 * (var(--fond_menu_hamburger) / 9));}

#menu_hamburger_container > input#checkbox_liens_menu:checked + label#checkbox_menuHb_label > .barre_menu_hamburger {
background: rgba(0, 0, 0, 0);}

/* Fin barres menu HB après clic */

/*-- Span Menu au dessus Menu Hb --*/


input#checkbox_liens_menu + label#checkbox_menuHb_label > span {
       display: flex;
    flex-flow: nowrap column;
    /* width: var(--fond_menu_hamburger); */
    position: relative;
    /* left: calc(var(--fond_menu_hamburger) * 0.1); */
    font-family: var(--fontFamily);
    color: var(--main-color);
    font-size: calc(var(--fond_menu_hamburger)/4);
    font-weight: bold;
    /* z-index: 4; */
    /* text-align: left; */
    /* margin-bottom: 0.1rem; */
    padding: 0;
    border: 0.2rem;

} 

input#checkbox_liens_menu:checked + label#checkbox_menuHb_label > span {color: white;
}

/*-- Fin Span Menu sous Menu Hb --*/

/* Fin Bouton Menu HB */




/*-------------------------------------------------------------------------------------------------*/
/*                                               FIN BARRE MENU                                   */
/*-----------------------------------------------------------------------------------------------*/
    
    
    
/* -------BLOC RECHERCHE --------*/


#recherche_container 
{    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 100%;
    /* height: 100%; */
    /* min-height: 100%;*/

}




/* --------------------------------------------BLOC RECHERCHE ----------------------------------*/


    
/* rendre bloc_recherche laptop visible VIA fonction va_et_vient JS, position démarrage = invisible*/
.bloc_recherche {
display: none;}


.bloc_recherche {
    position: absolute;
    top: var(--heightRow1);
    left: var(--lateralWidth);
    margin: var(--grid-gap) 0 0 var(--grid-gap);
    z-index: 10; /* Z INDEX   10 */
    /* ETAT AVANT CLICK */
    /* grid-area: 2 / 2 / 2 / 5; 
    transform: translateX(-1000%);
    -o-transform: translateX(-1000%);
    -ms-transform: translateX(-1000%);
    -moz-transform: translateX(-1000%);
    -webkit-transform: translateX(-1000%);
    transform-origin: 0;
    max-width: 100%; */
    min-width: 100%;
    max-height: var(--heightRow1);
    min-height: var(--heightRow1);
    overflow: hidden;
    background-clip: border-box;
    flex-direction: row;
    background-color: rgba(239, 45, 45, 1);
    background-clip: border-box;
    font-size: 2em;
    
    align-items: center;
    justify-content: center;
}

.bloc_recherche > form {
display: flex;
}

.bloc_recherche > form > input#zone_recherche {
border: transparent transparent var(--second-color);
border-bottom: solid var(--grid-gap);
font-family: var(--fontFamily); 
font-size: 1em;
background-color: rgba(239, 45, 45, 0.3);
color: var(--second-color);
}

/* OBSOLETE SUITE SVG 
.recherche > input#checkbox_recherche_input:checked ~ .bloc_recherche {display: flex;
flex-direction: row;
position: absolute;
z-index: 10; 
top: 0;
left: 0;
background-color: rgba(239, 45, 45, 1);
background-clip: border-box;
font-size: 2em;
transform: none;
max-width: 100%;
min-width: 100%;
max-height: 100%;
height: 100%;
overflow: hidden;
align-items:flex-start;
justify-content: flex-start;
padding-left: calc(1em + var(--width_icone_recherche));	
}


.bloc_recherche > input#zone_recherche {
display: none;
border: transparent transparent var(--second-color);
border-bottom: solid 2px ;
font-family: var(--fontFamily); 
font-size: 1em;
background-color: rgba(239, 45, 45, 0.3);
color: var(--second-color);

}

*/

svg#iconeRechercheSvg {
        position: relative;
    z-index: 12;                                  /* Z INDEX 13*/
    stroke: var(--main-color);
    fill: none;
    /* display: block; */
    left: calc(0.3rem + var(--fond_menu_hamburger));
    margin-left: var(--fond_menu_hamburger);
    margin-top: calc(0.5* calc(var(--heightRow1) - 2rem));
    /* vertical-align: middle; */
    /* display: inline;*/ }

svg#iconeRechercheSvg:hover {
    stroke: var(--second-color);
}

.bloc_recherche > form > button#bouton_envoi_recherche {
background-color: var(--second-color);
font-family: var(--fontFamily); 
font-size: 1em;
color: white;
border: none;
top: 0;
margin-left: 1em;
z-index: 12; /* >>>Z INDEX 12<<< */
}

/* ------------------------------------------ BLOC RECHERCHE CHECKED (obsolète?)------------------------------- */

.recherche > input#checkbox_recherche_input:checked ~  .bloc_recherche > input#zone_recherche, 
.recherche > input#checkbox_recherche_input:checked ~  .bloc_recherche > button#bouton_envoi_recherche   {display: inline-flex;
direction: row;
margin-top: var(--top-position-icone-recherche);
}

/* video fond DIV recherche */
#videoDivSearch {
display: block;
min-width: 100%;
max-width: 100%;
height: 60%;
position: absolute;
bottom: 0;
left: 0;
}

#video_Search {
object-fit: fill;
object-position: left;
min-width: 100%;
max-width: 100%;
min-height: inherit;
max-height: inherit;

}

/* ------------------------------------------ FIN BLOC RECHERCHE CHECKED ------------------------ */


/*----- Clic bouton Recherche -----*/ 

/* input et label */

#checkbox_recherche_input {
position: absolute;
left: -9999px;

}

#checkbox_recherche_label {
        display: inline-block;
    position: absolute;
    /* top: var(--top-position-icone-recherche); */
    left: var(--fond_menu_hamburger);
    /* margin: 0 0 0 -1em; */
    /* border-radius: 50%; */
    border: 0.1em dashed var(--main-color);
    width: var(--width_icone_recherche) !important;
    height: var(--width_icone_recherche);
    min-width: var(--width_icone_recherche);
    /* min-height: var(--width_icone_recherche); */
    z-index: 13;
    background: url(/icones/sprite_index_tpedigital.png) no-repeat top 0 left 0, var(--secondLight-color);
    background-position: top -248px left 0px;
    object-fit: cover;
    object-position: center;
    object-fit: scale-down;
    user-select: none;
    margin-left: var(--lateralWidth: 2rem);
}

/* fin input et label */

/* Animation label */

div.recherche input#checkbox_recherche_input + label#checkbox_recherche_label:before, 
div.recherche input#checkbox_recherche_input + label#checkbox_recherche_label:after  {
content:'';
display: block;
position: absolute;
top: calc(var(--width_icone_recherche)/2.2);
left: calc(var(--width_icone_recherche)/8.5);
width: var(--fond_menu_hamburger);
height: calc(var(--fond_menu_hamburger)/7);
background: var(--main-color);
transform: translate(-1000%, 0);
-moz-transform: translate(-1000%, 0);
-ms-transform: translate(-1000%, 0);
-o-transform: translate(-1000%, 0);
-webkit-transform: translate(-1000%, 0);
}


.recherche > input#checkbox_recherche_input:checked + label#checkbox_recherche_label:before {
content:'';
-moz-transform: translate(0, 0) scaleX(1.1) rotate(45deg);
-ms-transform: translate(0, 0) scaleX(1.1) rotate(45deg);
-o-transform: translate(0, 0) scaleX(1.1) rotate(45deg);
-webkit-transform: translate(0, 0) scaleX(1.1) rotate(45deg);
transform: translate(0, 0) scaleX(1.1) rotate(45deg);
}

.recherche > input#checkbox_recherche_input:checked + label#checkbox_recherche_label:after {
content:'';
-moz-transform: translate(0, 0) scaleX(1.1) rotate(-45deg);
-ms-transform: translate(0, 0) scaleX(1.1) rotate(-45deg);
-o-transform: translate(0, 0) scaleX(1.1) rotate(-45deg);
-webkit-transform: translate(0, 0) scaleX(1.1) rotate(-45deg);
transform: translate(0, 0) scaleX(1.1) rotate(-45deg);
}


input#checkbox_recherche_input:checked + label#checkbox_recherche_label {background: white;}

/* FIN Animation label */ 

/* >>>>> --- masque icone hamburger --- */

.recherche input#checkbox_recherche_input + label#checkbox_recherche_label ~ #masque_fond_hamburger_icone
{
display: block;
position: absolute;
left: -2em;
top: calc(var(--fond_menu_hamburger)/9);
margin: 0 0 0 -1em;
width: calc(var(--fond_menu_hamburger)*1.35);
height: calc(var(--fond_menu_hamburger)*1.35);
max-width: calc(var(--fond_menu_hamburger)*1.35);
max-height:calc(var(--fond_menu_hamburger)*1.35);  
border-radius: 50%;
background: rgba(239, 45, 45, 1);
transform: translate(-1000%, 0%);
-o-transform: translate(-1000%, 0%);
-ms-transform: translate(-1000%, 0%);
-moz-transform: translate(-1000%, 0%);
-webkit-transform: translate(-1000%, 0%);
z-index: 16; /* >>>Z INDEX 16<<< */
}


.recherche input#checkbox_recherche_input:checked + label#checkbox_recherche_label ~ #masque_fond_hamburger_icone
{

transform: translate(-2%, -1%);
-o-transform: translate(-2%, -1%);
-ms-transform: translate(-2%, -1%);
-moz-transform: translate(-2%, -1%);
-webkit-transform: translate(-2%, -1%);

}


/*------------------------------------------------------------------------------------------------*/
/*                                            FIN BLOC RECHERCHE                                 */
/*----------------------------------------------------------------------------------------------*/


 /*--------------------------------------------------------------------------------------------*/
 /*                                                lateral RS                                 */
 /*------------------------------------------------------------------------------------------*/   

.bloc_RS { display: grid;
    grid-column: 1 / span 1;
    grid-row: 2 / span 4;
    overflow: visible;
}   

#RSMenu {
display: flex;
flex-direction: column;
position: sticky;
top: calc(4 * var(--height-li-menu-hamburger) + 44px); 
background: transparent;
list-style-type: none;
padding-left: var(--grid-gap);
z-index: 15;            /* >>>Z INDEX 15<<<*/
    
}

#RSMenu li {
	display: flex;
	position: relative;
	top: 0;
	margin: 0;
	width: 24px;
	height: 24px;
	z-index: 15;  /* >>>Z INDEX 15<<<*/
    margin: 0.1rem 0;
    padding: 0.2rem 0;
    /* border-top: 1px solid white; */
    border-bottom: var(--grid-gap) solid white;
}

/******************************* Animation hover des SVG Icones RS ***************************/

li[class^="RS_"] .Icon {
fill: transparent;
font-size: 25px;
stroke: var(--second-color);
}

li[class^="RS_"]:hover .Icon
{
fill: var(--second-color);
}


/*FB
.RS_facebook .Icon-facebook {
fill: transparent;
font-size: 25px;
stroke: var(--second-color);
}

.RS_facebook:hover .Icon-facebook {
fill: var(--second-color);
}

IN
.RS_linkedin .Icon-linkedin {
fill: transparent;
font-size: 25px;
stroke: var(--main-color);
}

.RS_linkedin:hover .Icon-linkedin {
fill: var(--main-color);
}

TW
.RS_twitter .Icon-twitter {
stroke: var(--main-color);
font-size: 25px;
fill: transparent;
}

.RS_twitter:hover  .Icon-twitter{
    fill: var(--main-color);}
*/


/****************************** Animation hover des SVG Icones RS **********************

 /*------------------------------------------------------------------------------------------------*/
 /*                                                Fin lateral RS                                 */
 /*----------------------------------------------------------------------------------------------*/ 



  /*****************************************************************************************************/
 /************************************* FIN INCLUDE PHP ***********************************************/
/*****************************************************************************************************/




/* ------------- DEFINITION GRID ---------------------------------*/


.container {display: grid;
grid-template-columns: 2em repeat(5, 20%); 
grid-template-rows: var(--heightRow1) repeat(3, 1.2fr) repeat(4, 1fr) minmax(min-content, max-content);
grid-gap: var(--grid-gap);    
    /* épaisseur entre le slignes et colonnes (raccourci de grid-row-gap et column)*/
grid-template-areas: 
"lateral header header header header header"
"lateral content content content content content"
"lateral content content content content content"
"lateral content content content content content"
"lateral pleinepage pleinepage pleinepage pleinepage plus"   
"lateral extracontent extracontent extracontent extracontent plus"
"lateral extracontent extracontent extracontent extracontent rsCard"
"lateral footer footer footer footer footer "
"lateral mentionsL mentionsL mentionsL mentionsL mentionsL";
position: relative;
    top: 0;
    margin: 0 auto;
    width: 80%;

}

/****************************** définiton area et cellules ********************************/


.background {    display: block;
    grid-area: 1 / 1 / 5 / -1;
    position: relative;
    max-width: 100%;
    height: 100%;
    margin: 0px 0px var(--grid-gap) 0px;
    top: 0px;
    left: 0px;
    z-index: 1;
    color: transparent;
    overflow: hidden;}

/*
.lateral {grid-area: lateral;
background-color: var(--second-color);
z-index: 1;            

} */

#lateral {
    background: var(--main-color);
    grid-row: 1 / -1;
    grid-column: 1 / span 1;
    position: relative;
    z-index: 3;
    }

.content {grid-area: content;
display: flex;
width: auto;
height: fill-available;
}

.footer {
    grid-area: footer;
    }

.sectionbas {grid-area: extracontent;
background: white;
display: table;
position: absolute;
}

.plus {grid-area: plus;
display: block;
position: absolute;
} 

.plus2 {display: none;}

.pleinepage {grid-area: pleinepage;
background-color: var(--main-color);
max-height: 100%;
padding: 2rem;
    position: inherit;
    z-index: 1;}



.fb-customerchat {
grid-column: -1 / span 1;
grid-row: 6 / span 1;
}

/* Fin définiton area et cellules */

/* ------------- FIN DEFINITION GRID ---------------------------------*/



/* ------------- DESIGN PAGE (Animations, boutons, ...)-----------*/


/* --------positionnemen Boutons section haute ; attention dans l'index certaines classes ci dessous sont remplacées par "x" ---------*/

.bouton1 {grid-column: 2 / span 1;
grid-row: 2 / span 1 ;}
.bouton2 {grid-column: 3 / span 1;
grid-row: 2 / span 1;}
.bouton3 {grid-column: 4 / span 1;
grid-row: 2 / span 1;}
.bouton4 {grid-column: 5 / span 1;
grid-row: 2 / span 1;}
.bouton5 {grid-column: 2 / span 1;
grid-row: 3 / span 1;}
.bouton6 {grid-column: 3 / span 1;
grid-row: 3 / span 1;}
.bouton7 {grid-column: 4 / span 1;
grid-row: 3 / span 1;}
.bouton8 {grid-column: 5 / span 1;
grid-row: 3 / span 1;
}
.bouton9 {grid-column: 2 / span 1;
grid-row: 4 / span 1;}
.bouton10 {grid-column: 3 / span 1;
grid-row: 4 / span 1;}
.bouton11 {grid-column: 4 / span 1;
grid-row: 4 / span 1;}
.bouton12 {grid-column: 5 / span 1;
grid-row: 4 / span 1;}


section > div[class^="x"]{visibility: hidden;}

/* -------- FIN positionnement Boutons section haute ; attention dans l'index certaines classes ci dessous sont remplacées par "x" ---------*/


/* design des composantes des boutons rouges (div englobante / div / ul / li) */

div[class^="bouton"] {
display: table;
border-collapse: collapse;
box-sizing: border-box;
overflow:visible;
}

.div_ronds_rouges {display: table-cell;
position: relative;
z-index: 7;    /*<<<<Z INDEX 7<<<<<<*/
width: 100%;
height: 100%;
}

.ronds_fond_bouton_slider ul {
width:100%;
height:100%;
list-style: none;}


.ronds_fond_bouton_slider li {
display:flex;
position: absolute;
top: 0px;
right: 0px;
min-height: 52px;
min-width: 53px;
max-height: 52px;
max-width: 53px;}

/* design des composantes des boutons rouges (div englobante / div / ul / li) */

/* Animations ronds rouges : 3 états = 3 span (1er enfant : gradient, 2e enfant : intermédiare, 3e enfant : rond plein) */

.ronds_fond_bouton_slider li span {
 color: transparent;
animation: div_rond_bouton_rouge_Slider_Animation ease-out infinite alternate-reverse;
-webkit-animation: div_rond_bouton_rouge_Slider_Animation ease-out infinite alternate-reverse;
-moz-animation: div_rond_bouton_rouge_Slider_Animation ease-out infinite alternate-reverse;
-o-animation: div_rond_bouton_rouge_Slider_Animation ease-out infinite alternate-reverse;
-ms-animation: div_rond_bouton_rouge_Slider_Animation ease-out infinite alternate-reverse;}

.ronds_fond_bouton_slider li:nth-child(1) span {
background : url("/icones/sprite_index_tpedigital.png") no-repeat top -48px left 0;
background-position: top -48px left -2px;
object-fit: contain;
object-position: center;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-o-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
}

.ronds_fond_bouton_slider li:nth-child(2) span {
background : url("/icones/sprite_index_tpedigital.png") no-repeat top -153px left 0;
background-position: top -150px left -2px;
object-fit: contain;
object-position: center;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-o-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
}

.ronds_fond_bouton_slider li:nth-child(3) span {
background : url("/icones/sprite_index_tpedigital.png") no-repeat top -101px left 0;
background-position: top -98px left -2px;
object-fit: contain;
object-position: center;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-duration: 2s;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-o-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
}

/* FIN Animations ronds rouges : 3 états = 3 span (1er enfant : gradient, 2e enfant : intermédiare, 3e enfant : rond plein) */


/*  Texte à côté ronds rouges slider */

/* design du texte à côté des boutons rouges (div en dessous de ul comprenant les boutons rouges ) */


div[class^="bouton"] div:nth-child(2) {
width:fill-available;
margin: 7% auto auto auto;
padding-left: 5%;
}

div[class^="bouton"] div:nth-child(2) a h3 {
display: table-cell;
position: relative;
z-index: 7;  /*  >>>>>> Z index 7 <<<<  */
font-size: 2rem;
}

/* design du texte à côté des boutons rouges (div en dessous de ul comprenant les boutons rouges ) */


/* Animation texte à côté ronds rouges */

@keyframes div_rond_bouton_rouge_Slider_Animation {
0% {opacity: 0; animation-timing-function: ease-out;}
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1;}
    34% { opacity: 0;}
    100% { opacity: 0;}
}
	
@-webkit-keyframes div_rond_bouton_rouge_Slider_Animation {	
	0% {opacity: 0; animation-timing-function: ease-out;}
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1;}
    34% { opacity: 0;}
    100% { opacity: 0;}
}
	
@-moz-keyframes div_rond_bouton_rouge_Slider_Animation {	
	0% {opacity: 0; animation-timing-function: ease-out;}
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1;}
    34% { opacity: 0;}
    100% { opacity: 0;}
}
	
@-o-keyframes div_rond_bouton_rouge_Slider_Animation {	
	0% {opacity: 0; animation-timing-function: ease-out;}
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1;}
    34% { opacity: 0;}
    100% { opacity: 0;}
}

@-ms-keyframes div_rond_bouton_rouge_Slider_Animation {	
	0% {opacity: 0; animation-timing-function: ease-out;}
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1;}
    34% { opacity: 0;}
    100% { opacity: 0;}
}	
	
/* Animation texte à côté ronds rouges */
	
/* ----- FIN Boutons slider ronds rouges ----- */



/* ------Animation slider index section haute ----*/

/* Images et animations background */

.background li { list-style:none;
box-sizing: border-box;}




.background li picture { 
display:  flex;
    max-width: 100%;
    min-width: 100%;
    overflow:  hidden;
box-sizing: border-box;
    top: 0px;
    left: 0px;
    opacity: 0;
    z-index: 1;            /* >>>Z INDEX 1<<<*/
-webkit-animation: changeBackground 18s linear infinite 0s;
animation: changeBackground 18s linear infinite 0s;
position: absolute;
  max-height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: left;

}

.background li:nth-child(2) picture {
 -webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
	-o-animation-delay: 6s;
	-ms-animation-delay: 6s;
animation-delay: 6s;
}

.background li:nth-child(3) picture {

 -webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
 }

@keyframes changeBackground {
0% { opacity: 0; animation-timing-function: ease-out;}
    8% { opacity: 1; animation-timing-function: ease-out; 
    z-index: 1;  /* z-index 1 */;}
    17% { opacity: 1;}
    34% { opacity: 0;}
    100% { opacity: 0;}
}

@-webkit-keyframes changeBackground {
0% { opacity: 0; animation-timing-function: ease-out; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1; }
    34% { opacity: 0;}
    100% { opacity: 0;}
}

@-moz-keyframes changeBackground {
0% { opacity: 0; animation-timing-function: ease-out; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1; }
    34% { opacity: 0;}
    100% { opacity: 0;}
}

@-o-keyframes changeBackground {
0% { opacity: 0; animation-timing-function: ease-out; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1; }
    34% { opacity: 0;}
    100% { opacity: 0;}
}

@-ms-keyframes changeBackground {
0% { opacity: 0; animation-timing-function: ease-out; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1; }
    34% { opacity: 0;}
    100% { opacity: 0;}
}

/* FIN Images et animations background */


/* animation Texte background */

.background li div { 
    z-index: 2;   /* <<<< Z INDEX 2>>>>*/
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-animation: titleAnimation 18s linear infinite 0s;
-moz-animation: titleAnimation 18s linear infinite 0s;
-o-animation: titleAnimation 18s linear infinite 0s;
-ms-animation: titleAnimation 18s linear infinite 0s;
	animation: titleAnimation 18s linear infinite 0s;
	color: var(--second-color);
}

.background li:nth-child(1) div {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}

.background li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}

.background li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}


@keyframes titleAnimation {
0% { opacity: 0; animation-timing-function: step-end; }
    8% { opacity: 1; animation-timing-function: ease-in; }
    17% { opacity: 1; }
    34% { opacity: 0;}
    100% { opacity: 0;}
}

@-webkit-keyframes titleAnimation {
0% { opacity: 0; animation-timing-function: step-end; }
    8% { opacity: 1; animation-timing-function: ease-in; }
    17% { opacity: 1;}
    34% { opacity: 0;}
    100% { opacity: 0;}
}

@-moz-keyframes titleAnimation {
0% { opacity: 0; animation-timing-function: step-end; }
    8% { opacity: 1; animation-timing-function: ease-in; }
    17% { opacity: 1;}
    34% { opacity: 0;}
    100% { opacity: 0;}
}

@-o-keyframes titleAnimation {
0% { opacity: 0; animation-timing-function: step-end; }
    8% { opacity: 1; animation-timing-function: ease-in; }
    17% { opacity: 1;}
    34% { opacity: 0;}
    100% { opacity: 0;}
}

@-ms-keyframes titleAnimation {
0% { opacity: 0; animation-timing-function: step-end; }
    8% { opacity: 1; animation-timing-function: ease-in; }
    17% { opacity: 1;}
    34% { opacity: 0;}
    100% { opacity: 0;}
}

.background li div h3 {
      font-family: var(--fontFamily);
    font-size: 8rem;
    padding: 0;
    line-height: 8rem;
    /* overflow: hidden; */
    white-space: pre-wrap;
    /* display: inline; */
    max-width: 100%;
    /* margin: auto;*/
}

/* FIN animation Texte background */




	/* --- Fin Animation slider index section haute --- */	
	




/* -------- lateral RS /


.bloc_RS {display: grid;
grid-column: 1 / span 1;
grid-row: 2 / span 1;}

#RSMenu {
display: flex;
flex-direction: column;
position: sticky;
top: calc(4*var(--height-li-menu-hamburger) + 44px); 
background: transparent;
list-style-type: none;
padding-left: 2px;
z-index: 15;            
}

#RSMenu li {
	display: flex;
	position: relative;
	top: 0;
	margin: 0;
	width: 24px;
	height: 24px;
	z-index: 15;
	
    margin: 0.1rem 0;
    padding: 0.2rem 0;
    
    border-bottom: 2px solid white;
}

/* -------- FIN lateral RS */


/* --- Texte pleine page ----*/
.pleinepage > p{
overflow: hidden;
color: white;
text-align: justify;
vertical-align: middle;

}

.pleinepage > p:before {
content: "\00AC \00AC";
}

.pleinepage > p:after {
content: "\00AC";
}

.pleinepage > p > span {
font-weight: bold;
}


/* --- Fin Texte pleine page ----*/




/* background radient menu bas */

#background_linear_gradient {display: grid;
grid-area: -4 / 1 / -2 / -1;
background: linear-gradient(to right top, var(--second-color), var(--main-color));
}

/* FIN background radient menu bas */

/* ----- Fil tweeter ---- */

#etiquetteTimelineTwitter {
/*position: relative; */
    /* top: 0; */
    /* right: 0; */
    border: solid white var(--grid-gap);
    margin: 0 0 auto auto;
    z-index: 2;
}

#spanEtiquetteTimelineTwitter {
    
}


.twitter-timeline {grid-column: 6 / span 1;
grid-row: 5 / span 2;
object-fit: contain;
object-position: top;
overflow: hidden;}

/* ------ Fin Fil Twitter ---*/

/* -- CARD ---- */

.card_container {
grid-column: 6 / span 1;
grid-row: 7 / span 1;	
display: block;
position: absolute;
z-index: 3;
text-align: center;
max-height: 100%;
min-height: 100%;
max-width: 100%;
min-width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
font: 1em var(--fontFamily);
color: white;

}

#identite {
padding: 0px;
display: flex;
list-style: none;
flex-flow: column nowrap;
}

#photo img {
position: relative;
z-index: 4; /* >>>Z INDEX 2<<<*/	
border-radius: 50%;
width: 7em;
height: 7em;
align-items: center;
object-fit: contain;
object-position: top;
background: #24503b;}
	 
#photo {
min-width: content;
   margin: -1em auto auto;

}

#texte{
   display: block;
    background-color: var(--second-color);
    position: absolute;
    top: calc(3.5em + 0.3rem);
    /* left: -4px; */
    margin: 0 var(--grid-gap) var(--grid-gap);
    max-height: 100%;
    min-height: fit-content;
    max-width: calc(100% - 6px);
    /* min-width: 100%; */
    border-radius: 0.5em;
    padding: 3.5em var(--grid-gap) var(--grid-gap);
    white-space: pre-line;
    box-sizing: border-box;
}

#texte > p {
margin: calc(3.5em + 5px) var(--grid-gap) 5px;/* rayon de la #photo + margin #photo + margin #texte */
/* attention ici pb de spécificité avec #texte -> necessité ajout ">"*/
}

#nom {
display: block;
min-width: 100%;
position: absolute;
bottom: 1px;
margin: 50%;
font-size: 1.25rem;
font-style: oblique;
color: var(--second-color);
padding: var(--grid-gap) var(--grid-gap);
margin: auto;
}

#nom > span {
display: inline-flex;
background-color: white;
border-radius: 2em/5em 5em/2em;
width: inherit;	
margin: auto;
flex-wrap: nowrap;
padding: 0 0.2rem;}


#etiquetteCardContainer {
 /* position: inherit; */
    z-index: 5;  /* >>>Z INDEX 5<<<*/
    margin: -0.2rem 0 auto auto;
    display: block;
}


#spanEtiquetteCardContainer {
z-index: 5; /* >>>Z INDEX 5<<<*/
}



/* icones RS */

.rs_container {
	display: inline-flex;
	grid-column: 6 / span 1;
grid-row: 7 / span 1;
	z-index: 5; /* >>>Z INDEX 5<<<*/
    overflow: hidden;
	/*position: absolute;
	background: transparent;
	margin: 0px;
	padding: 0px;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
	font-family: var(--fontFamily);*/
}


/* container global click + liste RS */
.rs_container #cardContainerRS {
   display: table;
    /* background-color: var(--main-color); */
    /* max-width: 100%; */
    max-height: 4rem;
    /* overflow: hidden; */
    /* right: 0; */
    /*position: relative;*/
    top: 1.2rem;
    right: -85%;
    /* padding-left: 0px; */
    color: right;
    z-index: 10;
    background: transparent;}


/* bouton rouge "social" et logo svg RS*/

.rs_container > #cardContainerRS > #CTAclickListRS  {
   display: flex;
    flex-direction: column;
    max-width: 2rem;
    max-height: 5.5rem;
    /* max-width: 100%; */
    /* max-height: fit-content; */
    /* position: relative; */
    /* left: 0; */
    background-color: var(--main-color);
    /* color: white; */
    /* z-index: 1000; */
    border-radius: 5%;
  align-items: center;
}

/*SVG  Card container*/

/* SVG logo RS global */
.rs_container #cardContainerRS #CTAclickListRS svg
{    display: flex;
    width: 50%;
    height: 50%;
    stroke: white;
    fill: white;
    margin: 0 0.2rem;
    /* padding: 0; */
    position: inherit;
    /* z-index: 100; */
    /* flex-direction: column; */
    /* x: 5; */
    /* left: -5px; */
    align-self: flex-start;
}

/* SVGs des logos RS UL resaux sociaux */
.rs_container #cardContainerRS #reseauxsociaux svg
{display: flex;
    width: 50%;
    height: 50%;
    stroke: white;
    fill: white;
    /* margin: 0; */
    /* padding: 0; */
    position: inherit;
    /* z-index: 100; */
    /* flex-direction: column; */
    /* x: 5; */
    /* left: -5px; */
    align-self: center;
    /* justify-content: center;*/
}


.rs_container #cardContainerRS:hover #reseauxsociaux svg
{display: flex;
    width: 50%;
    height: 50%;
    stroke: var(--second-color);
    fill: var(--second-color);
    /* margin: 0; */
    /* padding: 0; */
    position: inherit;
    /* z-index: 100; */
    /* flex-direction: column; */
    /* x: 5; */
    /* left: -5px; */
    align-self: center;
    /* justify-content: center;*/
}



/* RS */
#cardContainerRS > #reseauxsociaux {
   display: table-cell;
    left: 500%;
    background: var(--main-color);
    vertical-align: middle;
    /* max-height: 2rem; */
    position: relative;
    border-radius: 0.25rem;
    /* align-items: center; */
    /* justify-content: flex-end; */
    list-style-type: none;
    padding-left: 0px;
}


#cardContainerRS > #reseauxsociaux > li {
display: block;
    padding: 0;
    margin: 0;
    right: -0.25rem;
    top: 0.1rem;
    position: relative;
    height: 2rem;
    width: 2rem;
}


.rs_container > #cardContainerRS:hover > #reseauxsociaux {
left: -50%;
 transition: ease-in;
    z-index: 5;
} 

.rs_container > #cardContainerRS:hover > #reseauxsociaux > li {
display: block;
    padding: 0;
    margin: 0.2rem;
} 

.rs_container > #cardContainerRS:hover > #CTAclickListRS {
z-index: -1;
 transition: ease-in;
} 

/*bouton clic "social" */

#CTAclickListRS > H4 {
    display: flex;
    transform: rotate(-90deg);
    color: white;
    font-family: var(--fontFamily);
    align-self: flex-end;
    /* position: inherit; */
    /* z-index: 100; */
    /*padding: 0.3rem 0 0;*/
    /* max-width: fit-content; */
    /* max-height: 100%;*/
}




/* Fin icones RS */








/* --------------------------sprite sectionbas -----------------------*/

#etiquetteSectionbas {
    display: inline-block;
    line-height: -moz-block-height;
    max-width: 100%;
    position: relative;
    top: -2.5rem;
    margin: auto auto 1px;
    z-index: 9; /* Z INDEX 9 */
}

#spanEtiquetteSectionBas {
position: absolute;
    
}

/*-- classes photos sectionbas---*/

.background_photos_sectionbas {
/*display: table-cell;*/
display: flex;
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
bottom: 0;
top: 0;
left: 0;
right: 0;
position: absolute;
z-index: 2;
background: rgba(239,45,45,0);
overflow: hidden;
}

.background_photos_sectionbas:hover {
/*display: table-cell;*/
width: 100%;
height: 100%;
bottom: 0;
top: 0;
left: 0;
right: 0;
position: absolute;
z-index: 13;
background: rgba(239,45,45,0.7);
}

/*-------------------croix photos grille section bas -----------------*/
.barre_milieu_croix {
/*display: block;*/
display: flex;
width: 5rem;
height: 0.5rem;
background: transparent;
position: relative;
z-index: 13;
margin: 50% auto;
min-width: 5rem;
min-height: 0.5rem;
align-self: center;
}


.barre_milieu_croix:before, .barre_milieu_croix:after {
content:'';
/*display: block;*/
display: flex;
min-width: 5rem;
min-height: 0.5rem;
margin: 0;
background: transparent;

z-index: 13;

}

.imageGrilleIndex:hover .background_photos_sectionbas .barre_milieu_croix:before {
background: white;
display: flex;
min-width: 5rem;
min-height: 0.5rem;
margin: 0;
}

.imageGrilleIndex:hover .background_photos_sectionbas .barre_milieu_croix:after {
background: white;
display: flex;
min-width: 5rem;
min-height: 0.5rem;
margin: 0;
transform: translate(-100%) rotate(90deg);
-o-transform: translate(-100%) rotate(90deg);
-ms-transform: translate(-100%) rotate(90deg); 
-moz-transform: translate(-100%) rotate(90deg); 
-webkit-transform: translate(-100%) rotate(90deg);

}

/*----------------- Fin croix photos grille section bas ----------------*/

	/*-- Fin classes photos sectionbas---*/


.H1GrilleSectionBas {
position:absolute;
}




.spanH1GrilleSectionBas {
background: rgba(236,255,83,70%);
    color: darkolivegreen;
    /* font-stretch: expanded; */
    flex-wrap: wrap;
    text-align: center;
    font-style: oblique;
    font-weight: bolder;
    /* font-stretch: semi-expanded; */
    /* text-decoration: underline; */
}

/*-- -------------- colonne 2 / ligne 6 ---------- --*/

#chillman {grid-column: 2 / span 1;
grid-row: 6 / span 1;
position: absolute;
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
min-width: 100%;
min-height: 100%;
max-width: 100%;
max-height: 100%;
}
	
#background_chillman_img {
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;}

#background_chillman_img > * {
object-fit: cover;
object-position: center;
max-width: 100%;
min-width: 100%;
max-height: 100%;
min-height: 100%;
overflow: hidden;}
	
/*-- -------------- colonne 3 / ligne 6 ---------- --*/
#mcbook {grid-column: 3 / span 1;
grid-row: 6 / span 1;
position: absolute;
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
min-width: 100%;
min-height: 100%;
}
	
#background_mcbook_img {
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;}

#background_mcbook_img > * {
object-fit: cover;
object-position: center;
max-width: 100%;
min-width: 100%;
max-height: 100%;
min-height: 100%;
overflow: hidden;}
	
/*#mcbook:hover .background_photos_sectionbas .barre_milieu_croix:before {
background: white;

}

#mcbook:hover .background_photos_sectionbas .barre_milieu_croix:after {
background: white;

}*/

/* -------------- colonne 4 / ligne 6 ---------- */

#immeuble {grid-column: 4 / span 1;
grid-row: 6 / span 1;
position: absolute;
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
min-width: 100%;
min-height: 100%;
}

#background_immeuble_img {
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

#background_immeuble_img > * {
object-fit: cover;
object-position: center;
min-height: 100%;
max-height: 100%;
min-width: 100%;
max-width: 100%;
overflow: hidden;
}


/*#immeuble:hover .background_photos_sectionbas .barre_milieu_croix:before {
background: white;
transform: translate(0%) rotate(90deg);
-o-transform: translate(0%) rotate(90deg);
-ms-transform: translate(0%) rotate(90deg); 
-moz-transform: translate(0%) rotate(90deg); 
-webkit-transform: translate(0%) rotate(90deg);
}

#immeuble:hover .background_photos_sectionbas .barre_milieu_croix:after {
background: white;
transform: none;
-o-transform: none;
-ms-transform: none; 
-moz-transform: none; 
-webkit-transform: none;
}*/


/* -------------- colonne 5 / ligne 6 ---------- */
#light {grid-column: 5 / span 1;
grid-row: 6 / span 1;
position: absolute;
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
min-width: 100%;
min-height: 100%;
}
	
#background_light_img {
/*display: block;*/
bottom: 0;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;}

#background_light_img > * {
object-fit: cover;
object-position: center;
max-width: 100%;
min-width: 100%;
max-height: 100%;
min-height: 100%;
overflow: hidden;}
	


/*#light:hover .background_photos_sectionbas .barre_milieu_croix:before {
background: white;
transform: translate(0%) rotate(90deg);
-o-transform: translate(0%) rotate(90deg);
-ms-transform: translate(0%) rotate(90deg); 
-moz-transform: translate(0%) rotate(90deg); 
-webkit-transform: translate(0%) rotate(90deg);
}

#light:hover .background_photos_sectionbas .barre_milieu_croix:after {
background: white;
transform: none;
-o-transform: none;
-ms-transform: none; 
-moz-transform: none; 
-webkit-transform: none;
}*/


/*------------------ colonne 2 / ligne 7 -------*/
#man {grid-column: 2 / span 1;
grid-row: 7 / span 1;
position: absolute;
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
min-width: 100%;
min-height: 100%;
}
	
#background_man_img {
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;}

#background_man_img > img {
object-fit: cover;
object-position: center;
max-width: 100%;
min-width: 100%;
max-height: 100%;
min-height: 100%;
overflow: hidden;}
	


/*#man:hover .background_photos_sectionbas .barre_milieu_croix:before {
background: white;
transform: translate(0%) rotate(90deg);
-o-transform: translate(0%) rotate(90deg);
-ms-transform: translate(0%) rotate(90deg); 
-moz-transform: translate(0%) rotate(90deg); 
-webkit-transform: translate(0%) rotate(90deg);
}

#man:hover .background_photos_sectionbas .barre_milieu_croix:after {
background: white;
transform: none;
-o-transform: none;
-ms-transform: none; 
-moz-transform: none; 
-webkit-transform: none;
}*/


/*-------------  colonne 4 / ligne 7 --------------*/

#officepc {grid-column: 4 / span 1;
grid-row: 7 / span 1;
position: absolute;
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
min-width: 100%;
min-height: 100%;
}
	
#background_officepc_img {
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;}

#background_officepc_img > * {
object-fit: cover;
object-position: center;
max-width: 100%;
min-width: 100%;
max-height: 100%;
min-height: 100%;
overflow: hidden;}
	
/*#officepc:hover .background_photos_sectionbas .barre_milieu_croix:before {
background: white;
transform: translate(0%) rotate(90deg);
-o-transform: translate(0%) rotate(90deg);
-ms-transform: translate(0%) rotate(90deg); 
-moz-transform: translate(0%) rotate(90deg); 
-webkit-transform: translate(0%) rotate(90deg);
}

#officepc:hover .background_photos_sectionbas .barre_milieu_croix:after {
background: white;
transform: none;
-o-transform: none;
-ms-transform: none; 
-moz-transform: none; 
-webkit-transform: none;
}*/



/*-------------  colonne 3 / ligne 7 --------------*/

#coachingMkg {
grid-column: 3 / span 1;
grid-row: 7 / span 1;
display: block;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
min-width: 100%;
min-height: 100%;
}


#background_coachingMkg {
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

#background_coachingMkg > * {
object-fit: cover;
object-position: center;
max-width: 100%;
min-width: 100%;
max-height: 100%;
min-height: 100%;
overflow: hidden;}



/*-------------  colonne 5 / ligne 7 --------------*/


#mkgRdv {grid-column: 5 / span 1;
grid-row: 7 / span 1;
position: absolute;
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
min-width: 100%;
min-height: 100%;
}
	
#background_mkgRdv {
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;}

#background_mkgRdv > * {
object-fit: cover;
object-position: center;
max-width: 100%;
min-width: 100%;
max-height: 100%;
min-height: 100%;
overflow: hidden;}
	
/* ----- Position Photos sectionbas -------*/

/*-- menu bas --*/

.ul_tableaubas {display: inline-block;
    /* vertical-align: top; */
    /* position: relative; */
    /* max-width: 100%; */
    margin: 1em auto;
    /* z-index: 20; */ 
    /*////z-index: 20*/}


.ul_tableaubas li:first-child {
color: var(--main-color);
font-style: italic;
font-weight: bolder;
font-size: 1,5em;
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--main-color);
}

.ul_tableaubas li:first-child:hover {
font-style: normal;
font-weight: normal;
}

.ul_tableaubas li {display: flex;
flex-direction: column;
color: white;
}

.ul_tableaubas li:hover {display: flex;
flex-direction: column;
color: var(--main-color);
font-style: italic;
font-weight: normal;
}

/*-- fin menu bas --*/

/* FOOTER */
/*----placement des listes footer -----*/
#creer {grid-area: 8 / 2 / 8 / 2;}
#vendre {grid-area: 8 / 3 / 8 / 3;}
#developper {grid-area: 8 / 5 / 8 / 5;}
#digitaliser {grid-area: 8 / 6 / 8 / 6;}

/*--- case newsletter ----*/
.infolettre {grid-area: 8 / 4 / 8 / 4;}

.formBig {
display: block;
box-sizing: content-box;
margin: 0;
padding: 1em 1em;
background-color: var(--second-color);
font-family: var(--fontFamily);
overflow: hidden;}



.formBig > p:first-of-type {
font-size: 16px;
top: 0;
position: relative;
z-index: 9; ///*Z INDEX 9 //*/
margin: - 2rem auto 0;
padding: 0;
background: rgba(0,0,0,0);
	font-weight: bolder;}

.formBig  > *:not(inputFormNL) {display: block;
direction: column;
margin: auto;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}

p#inputFormNL {
    display: inline-block;
    /* white-space: pre-line; */
    /* line-height: 1; */
    /* padding: 0; */
    margin-block-start: 0;
    margin-block-end: 0;
}
	
.formBig  > input[type="email"] {
min-width: 10O%;
}

input#email {
width: -webkit-fill-available;
}

#fond_icone_newsletter {
display: flex;
flex-grow: 1.3;	
background: url("/icones/sprite_index_tpedigital.png") no-repeat top -208px left 0;
object-fit: none;
width: 48px;
height: 30px;
}


#commentairesemail {
vertical-align: top;
text-align: right;
margin: 0 auto 5px;
font-size: 10px;
font-style: italic;}

/*--- équivalent à #submitnewsletter */
.submitform {
margin-top: 5px;
background-clip: border-box;
border-bottom-right-radius: 10px / 30px;	
font-family: var(--fontFamily);
font-size: 1rem;
background-color: var(--second-color-);}


/* recaptcha v2 */
#reCaptchaV2_iframe {
object-position: center;
object-fit: contain;
}


/*--- fin case newsletter ----*/

/*Fin FOOTER */

	/*-----section mentions légales ------*/

/* Titre */

#MLtitle {
grid-column: 6;
grid-row: 9;
display: block;
max-height: 100%;
min-height: 100%;
position: relative;
top: -2.5rem;;
right: 0;
}


.etiquettesNoires {
display: flex;
max-width: fit-content;
max-height: fit-content;
background: black;
color: white;
white-space: nowrap;
overflow:hidden;
padding: 0 0.2rem;
border: solid white var(--grid-gap);
}

#spanEtiquetteML {
position: absolute;
    margin: 0;
    right: 0;
    }

/* Fin titre */


#mentions_legales {
    grid-area: mentionsL;
    display: inline-flex;
    flex-direction: row;
    background: grey;
    border: 0.25rem 0 0 0 white;
    font-size: 0.7rem;
    min-width: 100%;
    max-height: 100%;
}

#mentions_legales > * {
display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 1px auto;
    max-height: 100%;
    }

#mentions_legales > dl > dt {
font-style: oblique underline;
border-bottom: white 1px solid;
    display: inline-block;
min-width: 100%;}
	
/* bouton form ML */
input#formulaireMentionsLegales {
position: absolute;
left: -9999px;
}


dd#divClicFormRGPD > label#labelFormulaireMentionsLegales {
display: block;
margin: var(--grid-gap) white;
width: content;
height: content;
background: var(--main-color);
font-size: 1rem;
text-align: center;
}


/*
animation: apparitionFormRGPD 3s steps(5, end);
-o-animation: apparitionFormRGPD 3s steps(5, end);
-ms-animation: apparitionFormRGPD 3s steps(5, end);
-moz-animation: apparitionFormRGPD 3s steps(5, end);
-webkit-animation: apparitionFormRGPD 3s steps(5, end);
*/

/* STAND BYE suite JS*/

dd#divClicFormRGPD > input#formulaireMentionsLegales:checked + label#labelFormulaireMentionsLegales ~ div#divMentionsLegales {
transform: none;
-o-transform: none;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
}



/* Fin bouton form ML */



	/*----- Fin section mentions légales ------*/



/* ------------- FIN DESIGN PAGE (Animations, boutons, ...)-----------*/




/*------------------------ BLOCS EXTERNES INDEX (menu, recherche, newsletter, Rgdp....-----------------*/

/*------- Form Infos -----*/


#divInfos {
display: block;
position: fixed;
left:-5%;
top: 0;
z-index: 30; /* z-index 30 */
min-width: 110%;
min-height: 100%;
background: var(--main-color);
transform: translateX(-1000%);
-o-transform: translateX(-1000%);
-ms-transform: translateX(-1000%);
-moz-transform: translateX(-1000%);
-webkit-transform: translateX(-1000%);
transform-origin: 0;
}


	/*------- Form ML -----*/

#divMentionsLegales {
display: block;
position: fixed;
left:-5%;
top: 0;
z-index: 30; /* z-index 30 */
min-width: 110%;
min-height: 100%;
background: var(--main-color);
transform: translateX(-1000%);
-o-transform: translateX(-1000%);
-ms-transform: translateX(-1000%);
-moz-transform: translateX(-1000%);
-webkit-transform: translateX(-1000%);
transform-origin: 0;
}

/******* Form *******/

.formIndex {
position: relative;
top: 0;
padding: 0 auto auto;
font-size: 1.5rem;
}


.formIndex > form {
display: block;
margin: 1rem auto auto;
padding: 0.5rem;
width: fit-content;
height: fit-content;
background: var(--second-color);


}

.formIndex > form > p {
display: block;
margin: 0;
padding: 0.35rem;
direction: column;
}

/* alignement boutons radio */
.formIndex > form > p:nth-of-type(2) {margin-top: O;
align-content: flex-end;
padding-top: 0;
line-height: 100%;}

/* titre formulaire ML*/
.formIndex > H1 {
    display: block;
    max-width: fit-content;
    min-height: content;
    text-align: center;
    position: relative;
    background: var(--secondLight-color);
    text-align: center;
    margin: 1em auto;
}

#divInfos > H1 > span {
background: var(--second-color);
}


/* alignement label zone saisie libre */
label[for="demande"] {
vertical-align: top;
line-height: 100%;
}


/* div comprenant les 3 boutons bas du formulaire */
.formIndex > form > span.boutonsForm {
display: flex;
width: 100%;
}

/* style 3 boutons bas */ 
.submitform {
display: inline-block;
margin: auto;
color: white;
background: darkgrey;
font-size: 1.5rem;
border: 0;
}


/* recaptcha */



	/*------- Fin Form ML -----*/


/*------------------------ FIN BLOCS EXTERNES INDEX (menu, recherche, newsletter, Rgdp....-----------------*/