@charset "utf-8";
/* ====================
	RESET	http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126 - License: none (public domain) 
 ====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
/*	RAJOUTS PERSOS AU RESET MEYER CI-DESSUS */
*{box-sizing: inherit;outline: none;/*empeche l'encadrement bleu des liens ou images*/}
*, *::before, *::after{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}/*empeche le redimensionnement des éléments avec padding et margin*/

img,table,td,blockquote,code,pre,textarea,video,svg {max-width: 100%;}
img {border: 0;height: auto;box-sizing:border-box;width: auto\9; /* ie8 */}
a a:hover,a:focus,a:active {color: #000;}
a {background-color: transparent;} /* Supprime la couleur d'arrière-plan grise des liens actifs dans IE 10. */
svg:not(:root) { overflow: hidden;}
html{font-family: system-ui, sans-serif;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;scroll-behavior: smooth;}
body{line-height: 1.5;-webkit-font-smoothing: antialiased;}
p{-webkit-hyphens: none;  -moz-hyphens: none;-ms-hyphens: none;-o-hyphens: none;hyphens: none;}/*empeche la césure des mots en fin de ligne*/
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
input, button, textarea, select {font: inherit;}
ol, ul{list-style-type:none}
b,strong{font-weight:bolder;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
#root, #__next {isolation: isolate;}

/* ====================
	STYLES
 ====================*/
a a:hover,a:focus,a:active {color: #000;}
a {background-color: transparent;} /* Supprime la couleur d'arrière-plan grise des liens actifs dans IE 10. */
svg:not(:root) { overflow: hidden;}

html{ font-size: 62.5%; font-size: calc(1em * .625); -webkit-tap-highlight-color: transparent; overflow-wrap: break-word;scroll-behavior: smooth;}

body {scroll-behavior: smooth;  min-height: 100vh; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	line-height:0;-webkit-font-smoothing: antialiased;font-weight: 400;margin-bottom:150px;}

p{-webkit-hyphens: none;  -moz-hyphens: none;-ms-hyphens: none;-o-hyphens: none;hyphens: none;}/*empeche la césure des mots en fin de ligne*/
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}

input, button, textarea, select {font: inherit;}
input, textarea { -webkit-user-select: auto;}
textarea { white-space: revert;}

ol, ul, menu, summary {list-style-type:none}
b, strong, .strong{font-weight:bolder;}

blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}

#root, #__next {isolation: isolate;}

::placeholder { color: unset;}
:where([hidden]) { display: none;}

/**************************
	CLASSES appel : background-color: var(--couleur-fond);
**************************/
:root{
  --couleur-fond:#F4F4F4;
  --couleur-texte:#555555;
  --couleur-favorite:#232323;
  --main-font-size:1.000em;
 }
:root{
  --shadow-color: 0deg 0% 5%;
  --shadow-elevation-low:
	0 1px 1px hsl(var(--shadow-color) / 0.075),
	0 2px 2px hsl(var(--shadow-color) / 0.075),
	0 4px 4px hsl(var(--shadow-color) / 0.075),
	0 8px 8px hsl(var(--shadow-color) / 0.075),
	0 16px 16px hsl(var(--shadow-color) / 0.075);
  --shadow-elevation-medium:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
  --shadow-elevation-high:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
}

/* ====================
	STYLES
	h2 ~ * { padding-top:1.5em; }	tous les éléments après le H2 aurons un padding-top:
	#containers * {border: 1px solid black;}	cible tous les éléments enfants de la div #containers
 ====================*/
.clear,.ligne,.row {clear: both;}
.clearfix::after,.line::after {content: "";display: table;clear: both;border-collapse: collapse;}

/* differents centrages  Voir : https://www.joshwcomeau.com/css/center-a-div/ */
.center{margin-left: auto;margin-right: auto;}
.center_02{max-width: fit-content;margin-inline: auto;} /*Bien pour balises h1,h2 ...*/
.center_flex{display: flex; justify-content: center; align-items: center;}/*conteneur fluide 1 bloc */
.center_text {display: flex;justify-content: center; align-items: center;text-align: center;}

/* textes */
.text-bold, strong{font-weight: bold;}
.text-italic{font-style: italic;}
.text-majuscule{text-transform: uppercase;}
.text-minuscule{text-transform: lowercase;}
.text-smaller{font-size: smaller;}
.text-bigger{font-size: bigger;}
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-justify{text-align: justify;}
.text-wrap {overflow-wrap: break-word;}/*empêche le texte de déborder de sa boite et ne casse pas le mot*/
.big, .big>p{font-size:2.0rem;}
.bigger{font-size:2.2rem;}
.biggest{font-size:2.4rem;}
i, em, .italic{font-style: italic;}
.underline{text-decoration:underline;}

/* displays */
.block{display: block;}
.inline{display: inline;}
.inbl{display: inline-block;}
.hidden{display: none;}
.flex{display: flex;}
.sticky {position: fixed;top: 0; }

/* elements flottants */
.fl {float: left;margin-right: auto;}
img.fl {margin-right: 1rem;}
.fr {float: right;margin-left: auto;}
img.fr {margin-left: 1rem;}
img.fl,img.fr {margin-bottom: 0.5rem;}

.portfolio {padding: 0px;margin-left: 1rem; width: 100%;}
.portfolio p {padding-top: 2px;}
.portfolio img{float:left;margin:0 20px 2px 0;width: auto;}
.portfolio_inverse p{text-align:left;}
.portfolio_inverse img{float:right;padding:2px;margin-left:20px;width:200px;height:auto;}

/* décos */
.contour{border:1px solid #5D9FFF;-moz-border-radius:10px 0 10px 0;-webkit-border-radius:10px 0 10px 0;border-radius:10px 0 10px 0}
.no-border{border: 0px;}
.bordure{border:1px solid #868695;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;}
.bordure_left{border-left:1px solid #868695;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;}
.radius{border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;}
.ombrage_1{box-shadow:var(--shadow-elevation-low);}
.ombrage_2{box-shadow:var(--shadow-elevation-medium);}
.ombrage_3{box-shadow:var(--shadow-elevation-high);}
.glass{color: #ecf0f1;border-radius: 8px;padding: 20px;background: rgba( 255, 255, 255, 0.2 );border: solid 1px rgba(255,255,255,.3);backgroud-clip: padding-box;backdrop-filter: blur(10px );}
hr {background-color: #fff;border-top: 2px dotted #8c8b8b;}
hr.style20-bis {width:90%;padding: 0;border: none;border-top: medium double #EBEEF2;border-top: medium double #EBEEF2;color: #EBEEF2;text-align: center;overflow: visible; /* For IE */margin:auto ;}
hr.style20-bis:after {content:"❧";display: inline-block;position: relative;top:-0.8em;font-size: 3.2rem;padding: 0 0.25em;background: #13120E}

a[href$=".pdf"]:before{content:url(../elements/Gnome-mime-application-pdf.svg.png);padding-right: 4px;}
a[target="_blank"]:after { content: url(../elements/Icon_External_Link.svg);padding-left: 4px;}	
/*accessibilité	*/
a:focus-visible, .access:focus-visible, input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="checkbox"]:focus-visible, input[type="submit"]:focus-visible, button:focus-visible {
	outline: 2px dashed darkorange;}

.link {color: #orange;transition: border 0.2s ease-in-out;border-bottom: 1px solid #fff;/*transparent*/text-decoration:none;}
.link:hover,.link:focus {border-bottom: 2px solid orange;}

/*conteneur fluide plusieurs blocs images	*/
.flex_contain{display: -webkit-flex;display: flex;-webkit-flex-direction: row;flex-direction: row;justify-content: flex-start ;flex-wrap: wrap;align-items: flex-start}/*wrap = passage à la ligne*/
.flex_contain> *{ }
.flex_item{-webkit-flex: 1 auto;flex: 1 auto;}/*flex 1 : tous les éléments se répartissent l'espace */
/* 	-	.flex-item:nth-of-type(2) {font-weight: bold;} permet de cibler un élément
	-	align-items: center;   Ajoutr  cette ligne dans .flex_contain pour l'alignement vertical 
	-	text-align: center;  Ajouter cette ligne dans .flex_contain_item pour l'alignement horizontal 
*/

.footer_flex_contain{display:flex; align-items:center; justify-content:center;margin-bottom:1rem;}
.footer_flex_item{flex:1;text-align:center;margin:0 0.5rem 0 0.5rem;}
/* .flex-item:nth-of-type(2) {font-weight: bold;} permet de cibler un élément*/

/* colonnes
.colonne_1{display: inline-block; width:68%;padding-right:20px;}
.colonne_2{display: inline-block; width:28%;vertical-align:top;padding-top:50px;} */
.colonne_1{display: inline-block; width:66.33333%;padding:20px;}
.colonne_2{display: inline-block; width:33%;vertical-align:top;padding:100px 10px 0 0;}

/* vidéos */
.video{width:70%;margin:20px auto;}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*Marges*/
.man,.ma0 {margin: 0;} .mas{margin: 1rem;} .mam{margin: 2rem;} .mal{margin: 4rem;} .maxl{margin: 6rem;} .maxxl{margin: 8rem;}
.mtn,.mt0 {margin-top: 0} .mts{margin-top: 1rem} .mtm{margin-top: 2rem} .mtl{margin-top: 4rem} .mtxl{margin-top: 6rem} .mtxxl{margin: 8rem;}
.mrn,.mr0 {margin-right: 0} .mrs{margin-right: 1rem} .mrm{margin-right: 2rem} .mrl{margin-right: 4rem} .mrxl{margin-right: 6rem} .mrxxl{margin-right: 8rem;}
.mbn,.mb0 {margin-bottom: 0} .mbs{margin-bottom: 1rem} .mbm{margin-bottom: 2rem} .mbl{margin-bottom: 4rem} .mbxl{margin-bottom: 6rem} .mbxxl{margin-bottom: 8rem;}
.mln.ml0 {margin-right: 0} .mls{margin-right: 1rem} .mlm{margin-right: 2rem} .mll{margin-right: 4rem} .mlxl{margin-right: 6rem} .mlxxl{margin-right: 8rem;}

.mauto {margin: auto;} .mtauto {margin-top: auto;}.mrauto {margin-right: auto;}.mbauto {margin-bottom: auto;}.mlauto {margin-left: auto;}

.pan,.pa0 {padding: 0;} .pas{padding: 1rem;} .pam{padding: 2rem;} .pal{padding: 4rem;} .paxl{padding: 6rem;} .paxxl{padding: 8rem;}
.ptn,.pt0 {padding-top: 0} .pts{padding-top: 1rem} .ptm{padding-top: 2rem} .ptl{padding-top: 4rem} .ptxl{padding-top: 6rem} .ptxxl{padding: 8rem;}
.prn,.pr0 {padding-right: 0} .prs{padding-right: 1rem} .prm{padding-right: 2rem} .prl{padding-right: 4rem} .prxl{padding-right: 6rem} .prxxl{padding-right: 8rem;}
.pbn,.pb0 {padding-bottom: 0} .pbs{padding-bottom: 1rem} .pbm{padding-bottom: 2rem} .pbl{padding-bottom: 4rem} .pbxl{padding-bottom: 6rem} .pbxxl{padding-bottom: 8rem;}
.pln,.pl0 {padding-left: 0} .pls{padding-left: 1rem} .plm{padding-left: 2rem} .pll{padding-left: 4rem} .plxl{padding-left: 6rem} .plxxl{padding-left: 8rem;}

/*================================
	PAGE CONTACT
=================================*/
fieldset{width:95%;min-height:120px;border:0px solid #E3E3E3;margin:5px ;padding:5px 0 20px 0;
	-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}	
legend{font-size:1.4em;margin-left:10%;text-align:center;padding:0 5px;color:#9d9886;}	
label{display:block;width:75%;margin-left:10px;cursor:default;}
::placeholder{color:#999999;}
::placeholder:focus{color:#fff;}
input,textarea{margin-bottom:10px;text-decoration: none;border:0px;background-color:#f4f4f4;outline:none;padding:4px 10px;
	border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}
input[type="text"],input[type="email"],.erreur{width:60%;}
textarea{width:90%;}

input[type="text"], input[type="email"], textarea, textarea, input[type="text"], input[type="email"]{
	border: 1px solid #f4f4f4;border-left:4px solid #f4f4f4;}
input[type="text"]:hover, input[type="email"]:hover, textarea:hover, textarea:focus, input[type="text"]:focus, input[type="email"]:focus{
	background-color:#;border: 1px solid #6699ff;border-left:4px solid #6699ff;outline:none;}

input[type=submit]{display:block;outline: none;cursor: pointer;text-align: center;margin:10px;padding: .4em 1.8em;width:180px;transition: width 1s;
	border-radius: 5px;box-shadow: 0 1px 2px rgba(0,0,0,.2);font-size: 1.2em;margin-top: 5px;color: #fef4e9;border: solid 1px #242415;			
	background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; 
	background-blend-mode: multiply,multiply;}
input[type=submit]:hover{width:220px;color:#b8dcff;}

.captcha{font-weight:bold;cursor:text;}
.remarque{display: none}/*classe du champ caché anti-spam*/

.erreur{color:#FF0000;font-size:18px;font-weight:400;padding:2px 5px;/*background-color: #FAB9AD;*/}
.erreur-bordure{caret-color: #FF0000;border: 1px solid red !important;border-left:5px solid red !important;}

.alert {padding:15px;margin:10px auto;width: 90%;border: 1px solid transparent;border-radius: 4px;text-align:center;font-size:22px;}
.alert_info {color: #1a3b9d;background-color: #d9edf7;border: 1px solid #6b87d9;}
.alert_warning {color: #9f0606;background-color: #fcf8e3;border: 1px solid #8a6d3b;}

/*=====================
	MEDIA QUERIES
=====================*/
@media only screen and (max-width: 960px){	
	/* colonnes */
	.colonne_1, .colonne_2{display:block; width:100%;padding:20px 10px;}
	.colonne_2{}
	
	.flex_item{width:100%;margin-bottom:20px;}

	
}