/* ////////////////////////////////////////////////////////////////////////////////////////////////////////

		RESET

//////////////////////////////////////////////////////////////////////////////////////////////////////// */
html{font-size: 62.5%;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, 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; vertical-align: middle; font-family: "Open Sans", arial, Verdana, sans-serif; color: #000; font-weight: normal;}
body{
	display: flex;
    flex-direction: column;
	min-height: 100vh;
	line-height: 1;
	-webkit-text-size-adjust: none;
	width: 100%;
	overflow-x: hidden;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
h1, h2, h3, h4, h5, h6, p, strong, span, a, button, label, em{vertical-align: baseline;}
p, li{line-height: 150%;}
ol, ul {list-style: none;}
li{break-inside: avoid-column;}
table {border-collapse: collapse; border-spacing: 0;}
span, a{font-weight: inherit;font-family: inherit; font-size: inherit; color: inherit;}
tr{vertical-align: top;}
img{max-width: 100%; height: auto;}
sup{color: inherit !important;}
sub{color: inherit !important;}
a, input[type="submit"]{text-decoration: none; cursor: pointer; transition: all 250ms ease-in-out;}
a:hover{text-decoration: none; cursor: pointer;}
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
h1:focus, h2:focus, h3:focus, p:focus, div:focus{outline: none;}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////

		VARIABLES

//////////////////////////////////////////////////////////////////////////////////////////////////////// */
:root{
	
	/* Sizes */
	--dev-width 					: 1200px;
	--col-gap 						: 50px;
	--font-size						: 1.6rem;
	
	/* Responsive */
	--css-break-1 					: 1200px;
	--css-break-2 					: 1280px;
	--css-break-3 					: 1024px;
	--css-break-4 					: 960px;
	--css-break-5 					: 740px;
	--css-break-6 					: 580px;
	
	/* Couleur */
	--color-main 					: rgba(230, 21, 97, 1);
	--color-main-80pct 				: rgba(230, 21, 97, 0.8);
	--color-main-2					: rgba(40, 131, 209, 1);
	--color-main-2-sombre			: rgba(26, 85, 138, 1);
	--color-main-3					: #ffe04b;
	--color-secondary				: rgba(37, 135, 255, 1);
	--color-gris-clair				: #f5f5f5;
	--color-vert					: #39e70e;
	--color-error					: rgba(230, 21, 97, 1);
	--color-warning					: #e61561;
	--color-waiting					: #f8a506;
	--color-success					: #48de94;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////

		CLASSES

//////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* Divers */
.warning{color: var(--color-main);}
.discret{color: #909090; font-size: 1.3rem;}
img.blend_multiply{mix-blend-mode: multiply;}
.icon{
	position: relative;
	display: inline-block;
	aspect-ratio: 1 / 1;
	height: var(--font-size);
	margin-right: 1rem;
	vertical-align: bottom;
	transform: translateY(-0.4rem);
}
.icon.check,
.icon.published{
	background: var(--color-vert);
}
.icon.uncheck,
.icon.pending {
	background: var(--color-warning);
}
.icon.ready {
	background: var(--color-waiting);
}
.icon::after {
	position: absolute;
	left: 0;
	top: 0;
	height: var(--font-size);
	width: 100%;
	content: "\A";
	filter: grayscale(1) invert(1);
}
.icon.check::after,
.icon.published::after {
	background: url(../images/icons/check.svg);
}
.icon.uncheck::after {
	background: url(../images/icons/uncheck.svg);
}
.icon.ready::after {
	background: url(../images/icons/ready.svg);
}
.icon.pending::after {
	background: url(../images/icons/pending.svg);
}

/* Navigation ancre */
.anchor_nav{margin: 3rem 0; padding: 3rem 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.anchor_nav p{margin: 0;}
.anchor_nav .action{color: var(--color-main);}
.anchor_nav .action:hover{color: #000;}
.anchor_nav .action + .action:before{content: "\A"; margin-right: 15px; border-left: 1px solid #ddd;}

/* Checkbox cliquables */
.clickable-checkbox{
	display: none;
}
.clickable-checkbox-label{
	display: inline-block;
	margin: 0.3rem;
	padding: 1rem 3rem;
	border-radius: 6px;
	cursor: pointer;
	background: #f5f5f5;
	font-weight: 400;
	transition: all 0.2s ease;
	user-select: none;
}
.clickable-checkbox-label:hover{
	background: #bbb;
}
.clickable-checkbox:checked + .clickable-checkbox-label{
	background: var(--color-main-2); color: #fff;
}

/* Badge qualité */
.quality-badge{
	display: inline-block;
	margin: 0 0.5rem 0.5rem 0;
	padding: 0.5rem 1.5rem;
	color: #fff;
	background: var(--color-main-2);
	border-radius: 6px; 
}

/* Notation étoiles */
.star-rating{font-size: 2rem; color: #ccc; cursor: pointer; display: inline-block;}
.star-rating span {display: none; width: 4rem; color: #909090;}
.star-rating .filled{display: inline-block; color: gold;}
.fas.fa-star, .fa-star-half-alt, .far.fa-star{color: gold;}

/* Boutons */
.action::before{margin-right: 5px; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #303030;}
.action.edit::before{content: "\f044";}
.action.see::before{content: "\f06e";}
.action.delete::before{content: "\f1f8"; color: var(--color-main);}
.action.send::before{content: "\f1d8"; font-size: 1.1em;}
.action.validate::before{content: "\f14a"; font-size: 1.1em;}
.action + .action{margin-left: 2rem;}

/* FONT AWESOME */
i.fa-solid{position: relative; display: inline-block; width: 17px; margin-right: 15px; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; color: var(--color-main); transition: all 250ms ease-in-out;}
i.fa-clientsravis:before{position: absolute; left: 0; top: 2px; width: 17px; height: 17px; background: url(../images/clientsRavis.fr-Picto-couleur-1.svg) no-repeat; content: "\A";}

/* Boite déroulante

   <div class="dropdown">
		<a class="dropdown-toggle">Titre dropdown</a>
		<div class="dropdown-content">
			<p>Contenu dropdown</p>
		</div>
	</div>
*/
.dropdown {
    position: relative;
    margin: 0;
	padding: 0 5rem;
	background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.dropdown:last-of-type {
    border-bottom: 0;
}
.dropdown-toggle {
    display: block;
	position: relative;
	width: 100%;
	padding: 3.5rem 0;
	font-weight: 700;
	font-size: var(--font-size);
    color: #000;
	border: none;
	background: none;
    border-radius: 0;
}
.dropdown.open .dropdown-toggle {
    color: var(--color-main);
    background: none;
    border-radius: 0;
}
.dropdown-toggle::after{
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	text-align: right;
	content: "\f107";
}
.dropdown.open .dropdown-toggle::after{
	content: "\f106";
}
.dropdown-content {
    display: none;
	padding: 0 0 4rem 0;
    background: none;
    border-radius: 0;
}

/* Custom select, Structure html :

<div class="custom-select">
	<p><input type="text" class="custom-select-input-text" value="" placeholder="Rechercher..."></p>
	<input type="hidden" class="custom-select-input-value" value="">
		<ul class="custom-select-list" style="display: none;">
			<li data-value="">Tous les clients</li>
			<li data-value="N">Edelris</li>
		</ul>
</div>
*/
.custom-select {
	display: inline-block;
    position: relative;
    margin-right: 2rem;
}
.custom-select-input {
    width: 100%;
}
.custom-select-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ddd;
    max-height: 150px;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    background: #fff;
    display: none;
    z-index: 10;
}
.custom-select-list li {
	margin: 0;
    padding: 0.5rem 1rem;
    cursor: pointer;
    background: #303030;
    color: #fff;
}
.custom-select-list li::before{
	display: none;
}
.custom-select-list li:hover, .custom-select-list li.highlighted {
    background: #606060;
}



/* Bloc de code */
.code-block pre{margin-bottom: 2rem; padding: 2rem; background: var(--color-gris-clair); color: #000; border-radius: 8px; font-family: monospace; overflow-x: auto; font-size: var(--font-size); line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;}

/* Messages (affichés pas la fonction show_message) */
div.msg{position: relative; margin-bottom: 2rem; padding: 2rem 2rem 2rem 8rem; font-size: 17px; line-height: 150%; color: #fff; border-radius: 1rem;}
div.msg::before{position: absolute; left: 2rem; top: 50%; width: 5rem; height: auto; transform: translateY(-50%); content: "\f071"; font-weight: 900; font-size: 2.5rem; color: #fff; font-family: "Font Awesome 5 Free";}
div.msg.msg_warning::before{content: "\f071";}
div.msg.msg_success::before{content: "\A"; color: #000; width: 3rem; height: 3rem; background-image: url(../images/clientsRavis.fr-Picto-noir.svg); background-repeat: no-repeat;}
div.msg.msg_error{background: var(--color-error);}
div.msg.msg_warning{background: var(--color-warning);}
div.msg.msg_success{background: var(--color-success);}
div.msg *{margin-bottom: 0; color: #fff;}
div.msg.msg_error *{color: #fff;}
div.msg.msg_warning *{color: #fff;}
div.msg.msg_success, div.msg.msg_success *{color: #000;}
div.msg a{text-decoration: underline;}
div.msg a:hover{color: #000 !important;}
div.msg.msg_success a:hover{color: #fff !important;}
div.msg div.close_msg{position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); color: #fff; cursor: pointer; transition: all 250 ease-in-out;}
div.msg div.close_msg:hover{color: #000;}
div.msg div.close_msg:before{content: "\f00d"; font-weight: 900; font-size: 1.5rem; font-family: "Font Awesome 5 Free";}

.flex_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
    gap: 2rem; /* espace entre les éléments */
	grid-auto-rows: 1fr;
}

.list_elt {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
}

.list_elt .collaborateur_img {
    width: 120px;
    height: 100%;
}

.list_elt .collaborateur_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.list_elt .collaborateur_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 2rem;
}

.list_elt .collaborateur_text p {
    margin-bottom: 0;
}

/* Pour le bouton "Ajouter" */
.list_elt.collaborateur.add .collaborateur_text {
    margin: 0 auto;
}



/* Loading */
.loading {
  position: relative;
  width: 200px;
  height: 8px;
  background-color: #eee;
  border-radius: 4px;
  margin-bottom: 3rem;
  background-image: linear-gradient(90deg, #909090 0%, #909090 100%);
  background-repeat: no-repeat;
  background-size: 33% 100%;
  background-position: 33% 0;
  animation: loading_slide_bg 1s linear infinite;
}
.loading::after {
  content: "Traitement en cours";
  position: absolute;
  left: 0;
  top: 8px;
  font-size: 1.1rem;
  color: #909090;
  white-space: nowrap;
}
@keyframes loading_slide_bg {
  from { background-position: -60px 0; }
  to   { background-position: calc(100% + 60px) 0; }
}



/* ////////////////////////////////////////////////////////////////////////////////////////////////////////

		STRUCTURE

//////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* Menu */
nav li::before{
	display: none !important;
}

/*	==================================================
	PAGE HEADER
====================================================== */
#page_header{
	position: relative;
	z-index: 1;
	padding: 15rem 0 10rem 0;
	background: #f9f9f9;
}
.admin #page_header{
	background: none;
}
#page_header h1{
	font-weight: 100;
	font-family: 'Open Sans', sans-serif;
}
.h1_subtitle{
	font-weight: 100;
	color: #404040;
	font-size: 2.5rem;
}




.dark_bgrd h1, .dark_bgrd h2, .dark_bgrd h3, .dark_bgrd h3, .dark_bgrd p, .dark_bgrd li, .dark_bgrd a{color: #fff;} 


/* Header */
header{position: fixed; z-index: 10; left: 0; top: 0; width: 100%; padding: 2rem 0; background-color: #fff;}
header .col{padding-top: 0; padding-bottom: 0;}
#logo_site{font-size: 1.5rem; font-weight: bold; color: var(--color-main); text-decoration: none;}

/* Alert */
#alert_container{position: fixed; z-index: 10000; display: none; left: 0; top: 0; width: 0; height: 0; flex-direction: column; align-items: center; justify-content: center; padding: 50px; opacity: 0; background: rgba(0, 0, 0, 0.75); cursor: pointer; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);}
#alert_wrapper{position: relative; min-width: 500px; max-width: 100%; max-height: 100%; background: #fff; cursor: default; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);}
#alert_wrapper.large{width: 1280px;}
#alert_actions{position: absolute; z-index: 1000; left: 0; top: 0; height: 4rem; width: 4rem; transform: translate3D(-50%, -50%, 0); background: var(--color-main); border-radius: 5rem;}
#alert_close{display: block; width: 100%; height: 100%;}
#alert_close::before{position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-family: "Font Awesome 5 Free"; text-align: center; line-height: 4rem; font-size: 2rem; font-weight: 900; color: #fff; content: "\f00d";}
#alert_close:hover{transform: rotate(90deg);}
#alert_content{z-index: 10; max-height: 100%; overflow: auto; padding: 4rem; font-size: var(--font-size); border-bottom: 2rem solid #fff;}
#alert_content.error{margin-top: 150px; text-align: center;}
@media screen and (max-width: var(--css-break-3)) {
	#alert_container{padding: 0;}
	#alert_wrapper{min-height: 100%;}
}
@media screen and (max-width: var(--css-break-4)) {
	#alert_container{padding: 0;}
	#alert_content .container{padding-left: var(--col-gap); padding-right: var(--col-gap);}
}
/* Contenu des alert */
#post_header{
	padding-top: 0;
	padding-bottom: 0;
}
#post_header + .row{
	padding-top: 0;
}

/*	==================================================
	CONTENU
====================================================== */
main{
	flex: 1;
}

/*	==================================================
	FOOTER
====================================================== */
footer{
	padding: 1.2rem 0 !important;
	background-color: #000;
}
footer .col{
	padding-top: 0;
	padding-bottom: 0;
}
footer #footer_logo img{
	 height: 2rem;
	 opacity: 0.5;
	 transition: all 250ms ease-in-out;
}
footer #footer_logo a:hover img{
	 opacity: 1;
}
footer p, footer a{
	margin: 0;
	line-height: 20px;
	font-size: 1.3rem;
	color: #909090;
}
footer a + a{
	margin-left: 2rem;
}
footer a:hover{
	color: #fff;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////

		BALISES

//////////////////////////////////////////////////////////////////////////////////////////////////////// */

/*
<uniquifier> : Use a unique and descriptive class name
<weight> : De 400 à 800
*/
/*
.baloo-2-<uniquifier> { 
font-family: "Baloo 2", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}
*/

h1{margin-bottom: 2rem; font-weight: normal; font-family: "Open sans", sans-serif; font-weight: 100; font-size: 4rem; line-height: 130%; color: var(--color-main);}
h2{margin-bottom: 2rem; font-weight: normal; font-family: "Open sans", sans-serif; font-weight: 100; line-height: 130%; font-size: 3.8rem; color: #000;}
h3{margin-bottom: 2rem; font-weight: normal; font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: 3rem;}
h4{margin-bottom: 2rem; font-weight: normal; font-family: "Baloo 2", sans-serif; font-weight: 400; font-size: 2rem;}
p, li{font-size: var(--font-size); margin-bottom: 1rem;}
td, label{font-size: var(--font-size);}
strong{font-weight: bold; color: inherit; font-family: inherit; font-size: inherit;}
a{color: var(--color-main); transition: all 250ms ease-in-out;}
a:hover{color: #000;}
a.btn{margin-right: 1rem; padding: 1rem; color: #fff; background: var(--color-main); border: 1px solid var(--color-main); border-radius: 0.5rem; cursor: pointer;}
a.btn.small{ margin-right: 1rem;padding: 0 1rem;}
a.btn i.fa-solid{margin-right: 2.5rem; color: #fff;}
a.btn:hover i.fa-solid{color: var(--color-main-3);}
a.btn:hover{color: var(--color-main-3);}
.dark_bgrd a.btn{padding: 1rem; color: #fff; background: transparent; border: 1px solid #fff; text-decoration: none;}
.dark_bgrd a.btn:hover{color: var(--color-main); background: #fff; border: 1px solid #fff;}
a.btn.big{padding: 1.5rem 3rem; font-size: 2.5rem; font-weight: 100;}
a.btn.style2{background: var(--color-main-2); border: 1px solid var(--color-main-2); }
a.btn.style2:hover{color: #fff; background: var(--color-main-2-sombre);}
a.btn.style3{background: unset; color: #000; border: 1px solid #000;}
a.btn.style3:hover{color: #000; background: #ddd;}
.center{text-align: center;}

.dark_bgrd a{text-decoration: underline;}

.cr_picto::after {
    display: inline-block;
	transform: translate3D(0.5rem, 0.4rem, 0);
    content: "\A";
	height: 1.8rem;
	width: 2.4rem;
    background: url("../images/clientsRavis.fr-Picto-noir.svg") no-repeat left center;
	background-size: contain;
}
.cr_picto.color::after {
    background: url("../images/clientsRavis.fr-Picto-couleur-1.svg") no-repeat left center;
}
h1.cr_picto::after,
h1 span.cr_picto::after{
    transform: translate3D(1.5rem, 0.4rem, 0);
    height: 3.5rem;
    width: 3.5rem;
    background-image: url(../images/clientsRavis.fr-Picto-couleur-1.svg);
}
h2.cr_picto::after,
h2 span.cr_picto::after{
    transform: translate3D(1.5rem, 0.4rem, 0);
    height: 3.5rem;
    width: 3.5rem;
    background-image: url(../images/clientsRavis.fr-Picto-couleur-1.svg);
}
p.h1_subtitle.cr_picto::after,
p.h1_subtitle span.cr_picto::after{
    transform: translate3D(1.5rem, 0.4rem, 0);
    height: 3.5rem;
    width: 3.5rem;
    background-image: url(../images/clientsRavis.fr-Picto-couleur-1.svg);
}
.dark_bgrd .cr_picto::after{
	background-image: url("../images/clientsRavis.fr-Picto-blanc.svg");
}
.dark_bgrd .cr_picto.cr_picto_noir::after{
	background-image: url("../images/clientsRavis.fr-Picto-noir.svg");
}

/* Table */
table{border-collapse: collapse; width: 100%; margin-top: 15px;}
td{border: 0; padding: 1.2rem 0.8rem; text-align: left;}
tr.legende td{font-weight: 700; color: #fff !important; background: #000 !important;}
tr:nth-child(2n) td{background: #e0e0e0;}
tr:nth-child(2n + 1) td{background: #f5f5f5;}

/* Listes */
li{
	position: relative;
	padding-left: 2rem;
}
li::before{
	position: absolute;
	left: 0;
	margin-right: 8px;
	content: "\f105";
	font-family: "Font Awesome 5 Free";
	font-style: normal;
	font-weight: 700;
}
li.cr_picto{
	padding-left: 5rem;
	margin-bottom: 2rem;
}
li.cr_picto::before{
	display: inline-block;
	aspect-ratio: 1/1;
	height: 3rem;
	margin-right: 1.5rem;
	content: "\A";
	font-family: "Open sans";
	font-style: normal;
	font-weight: normal;
	background: url(../images/clientsRavis.fr-Picto-couleur-1.svg) no-repeat left 0;
	/* background-size: cover; */
}
li.cr_picto.gris::before{
	filter: grayscale(1);
	opacity: 0.3;
}
li.cr_picto::after{
	display: none;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////

		FORMULAIRE

//////////////////////////////////////////////////////////////////////////////////////////////////////// */
input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea, select{all: unset; box-sizing: border-box; font-family: inherit; font-size: inherit; color: inherit;}
button{/*vertical-align: unset;*/ box-sizing: border-box; font-family: inherit; font-size: inherit; color: inherit;}
input[type="text"], input[type="email"], input[type="number"], input[type="password"], select, textarea{width: 100%; padding: 1rem; background: #f5f5f5; border: 0; border-radius: 5px;}
input[type="checkbox"]{width: auto;}
label{font-weight: 700;}
button{padding: 1rem; color: #fff; background: var(--color-main); border: 1px solid var(--color-main); border-radius: 0.5rem; cursor: pointer; transition: all 250ms ease-in-out;}
button:hover{color: var(--color-main-3);}
button.style2{background: var(--color-main-2); border: 1px solid var(--color-main-2); }
button.style2:hover{color: #fff; background: var(--color-main-2-sombre);}
button:disabled{background: #eee; border-color: #eee; color: #909090;}
button:disabled:hover{background: #eee; border-color: #eee; color: #909090;}
button.toggle-password{
	width: 40px;
	height: 100%;
	background-image: url("../images/icons/eye.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
	background-color: #f5f5f5;
	border: 0;
}

a.btn.style3{background: unset; color: #000; border: 1px solid #000;}
a.btn.style3:hover{color: #000; background: #ddd;}

/* DARK BGRD */
input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea, select{color: #000;}
.dark_bgrd button{color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0);}
.dark_bgrd button:hover{color: var(--color-main); border-color: #fff; background: rgba(255, 255, 255, 1);}

/* RADIO SEXY */
.cr_radio{display: inline-block; margin: 0 10px 10px 0; cursor: pointer;}
.cr_radio input[type="radio"]{display: none;}
.cr_radio span{display: inline-block; padding: 3px 15px; background: #f0f0f0; border-radius: 6px; transition: all 250ms ease-in-out;}
.cr_radio span:hover{background: #ccc;}
.cr_radio span::before{display: inline-block; margin-right: 10px; content: "\f111"; font-family: "Font Awesome 5 Free"; font-size: 1.4rem;}
.cr_radio input[type="radio"]:checked + span{background: var(--color-main-2); color: #fff;}
.cr_radio input[type="radio"]:checked + span::before{content: "\f058"; font-weight: 900;}

/* Checkbox SEXY */
.cr_checkbox{display: inline-block; margin: 0 10px 10px 0; cursor: pointer;}
.cr_checkbox input[type="checkbox"]{display: none;}
.cr_checkbox span{display: inline-block; padding: 10px 15px; background: #f0f0f0; border-radius: 6px; transition: all 250ms ease-in-out;}
.cr_checkbox span:hover{background: #ccc;}
.cr_checkbox span::before{display: inline-block; margin-right: 10px; content: "\f111"; font-family: "Font Awesome 5 Free"; font-size: 1.4rem;}
.cr_checkbox input[type="checkbox"]:checked + span{background: var(--color-main-2); color: #fff;}
.cr_checkbox input[type="checkbox"]:checked + span::before{content: "\f058"; font-weight: 900;}

/* Fond picto clientRavis */
.bgrd_cr{position: relative; z-index: 1;}
.bgrd_cr::after{position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.4; content: "\A"; background: url(../images/clientsRavis.fr-Picto-blanc.svg) no-repeat center; background-size: auto 90%;}
.bgrd_cr.bgrd_cr_black::after{opacity: 0.2; background-image: url(../images/clientsRavis.fr-Picto-noir.svg);}

/* INFO = AIDE
<span id="id_explain" class="cr_info">Texte du lien</span>
<div class="cr_info_content" for="id_explain">
	<div class="cr_info_content_wrapper" for="id_explain">
		Blablabla
	</div>
</div>
*/
.cr_info{color: var(--color-main-2); cursor: pointer;}
.cr_info::before{display: inline-block; transform: translateY(1px); margin-left: 5px; content: "\f05a"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--color-main-2); transition: all 250ms ease-in-out;}
.cr_info:hover, .cr_info:hover::before{color: var(--color-main);}
.cr_info_content{display: none;}
.cr_info_content_wrapper h2{color: var(--color-main);}
.cr_info_content_wrapper h3{color: var(--color-main-2);}

/* Couleur */
.color_main{color: var(--color-main);}



/* ////////////////////////////////////////////////////////////////////////////////////////////////////////

		PAGES SPECIFIQUES > FRONT

//////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* Page entreprise */
#company-about-description{font-size: var(--font-size); line-height: 150%;}


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////

		PAGES SPECIFIQUES > ADMIN

//////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* Admin > Widget > Paramétrer */
#widget_parameter_wrapper input[type="text"],
#widget_parameter_wrapper input[type="number"],
#widget_parameter_wrapper select {
	width: auto; padding-right: 30px; background: #fff; appearance: auto; -webkit-appearance: auto; -moz-appearance: auto;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////

		LAYOUT > clients (/template/layout-clients.php)

//////////////////////////////////////////////////////////////////////////////////////////////////////// */

/*	==================================================
	MAIN HEADER
	- Logo
	- Menu
====================================================== */




/* COMMUN */
#h1_row{margin-top: 0;}
#h1-col{position:relative; margin-top: 5rem;}
#h1-col h1, #h1-col h1 span{margin-bottom: 0; font-size: 4rem; color: #000; font-weight: 200;}
#h1-col h1{width: 60%; margin-bottom: 2rem; color: var(--color-main); font-weight: 200;}
#h1-col h1 span{font-weight: 700; color: inherit;}
#h1-col h1 span.uppercase{text-transform: uppercase;}
#h1-note{position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 30px var(--col-h-padding); background: #000; border-radius: 10px;}
.client-all-testimonies #h1-note{right: var(--col-h-padding);}
#h1-note p{color: #fff; font-weight: 900; text-align: center; line-height: 1; margin-bottom: 1.5rem;}
#h1-note p:last-child{margin-bottom: 0;}
.col.with_logo{margin-top: 80px;}
.col.with_logo.col_blanche, .col.with_logo.col_grise{padding-top: var(--col-v-padding); padding-bottom: 3rem;}
.col.with_logo .img_wrapper{position: relative; padding-top: 60px;}
.bloc_title p{margin-bottom: 0;}
.infos-title{font-family: "Baloo 2", sans-serif; font-weight: bold; color: #000; font-size: 2.7rem;}
.widget_wrapper{margin-top: 4rem;}

/* Page Company (public/pages/rewrite-pages/company/show_company.php) */
#company-qualities-wrapper{margin-top: 7rem;}
#company-top-qualities-wrapper{display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; justify-content: start;}
#company-top-qualities-wrapper > div{position: relative; margin-bottom: 3rem; padding: 8rem 2rem; text-align: center; background-color: gold; border-radius: 8px;}
#company-top-qualities-wrapper > div::before{position: absolute; top: 0; left: 50%; transform: translate3D(-50%, -50%, 0); width: 60px; height: 60px; line-height: 50px; content: "\f164"; font-size: 2rem; font-family: "Font Awesome 5 Free"; font-weight: 900; color: gold; background: #000; border: 5px solid #fff; border-radius: 100%;}
#company-top-qualities-wrapper div .quality_name{position: relative; z-index: 1;  font-family: "Baloo 2", sans-serif; font-weight: bold; color: #000; font-size: 2.5rem;}
#company-top-qualities-wrapper div .quality_explain{position: relative; z-index: 1; color: #000; font-size: 1.3rem; font-weight: 200;}
#company-top-qualities-wrapper div .quality_explain span{font-weight: 600;}
#company-top-qualities-wrapper div div.bgrd{position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.5; background-image: url(../images/icon_qualite_blanc.png); background-repeat: no-repeat; background-size: auto 60%; background-position: center;}
#company-other-qualities-wrapper span{display: inline-block; margin: 0 10px 10px 0; padding: 8px 20px 8px 12px; color: #fff; background: #000; border-radius: 10px;}
#company-bandeau-promo-row{margin-top: 12rem;}
#company-other-qualities-wrapper span::before{width: 50px; margin-right: 15px; content: "\f164"; font-size: 2rem; font-family: "Font Awesome 5 Free"; font-weight: 900; color: gold;}
#company-bandeau-promo-wrapper{padding: 4rem 0;}
#company-bandeau-promo-wrapper h2{font-size: 4rem; font-weight: 100; line-height: 120%;}
#company-bandeau-promo-wrapper h2 span{font-weight: 900;}

/* Page Testimony (public/pages/rewrite-pages/testimony/show_testimony.php) */
#contact-wrapper{padding: 70px 0 20px 0; border-bottom: 1px solid #ddd;}
#contact-wrapper #contact-image{position: absolute; left: 0; top: 0; height: 120px; width: auto; transform: translateY(calc(-50% - var(--col-v-padding))); border: 1px solid #ddd; border-radius: 8px; overflow: hidden;}
#contact-wrapper #contact-image img{height: 120px; width: auto;}
#testimony-wrapper{padding: 20px 0;}
#testimony-wrapper > p{position: relative; padding-top: 40px; font-size: 2.5rem; line-height: 150%; font-weight: 200; font-style: italic;}
#testimony-wrapper > p:first-child::before{position: absolute; top: 0; left: 0; width: 100px; height: 100px; content: "\f10d"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--color-main);}
#contact-note{margin-top: 20px;}
#contact-note p, #contact-note span{line-height: 1; vertical-align: bottom; font-weight: 200; color: #909090;}

#qualities-wrapper{margin-top: 4rem; padding-top: 6rem; border-top: 1px solid #ddd;}
/*
#qualities-wrapper #qualities{margin-top: 20px;}
#qualities-wrapper #qualities span{display: inline-block; margin: 0 10px 10px 0; padding: 8px 20px 8px 12px; font-weight: bold; color: #fff; text-transform: uppercase; background: #000; border-radius: 5px;}
#qualities-wrapper #qualities span::before{width: 50px; margin-right: 15px; content: "\f164"; font-size: 2rem; font-family: "Font Awesome 5 Free"; font-weight: 900; color: gold;}
*/

#company-wrapper{position: relative; padding-top: 60px;}
#company-wrapper #company-image{position: absolute; left: 0; top: 0; display: flex; align-items: center; height: 100px; max-width: 300px; transform: translateX(-25px) translateY(calc(-50% - var(--col-v-padding))); padding: 20px 30px; border: 1px solid #ddd; background: #fff; border-radius: 8px; overflow: hidden;}
#company-wrapper #company-image p{margin-bottom: 0;}
#company-wrapper #company-image img{max-height: 60px; width: auto; mix-blend-mode: multiply;}
#company-about-wrapper{padding: 20px 0;}
#company-about-wrapper #company_keywords{margin-bottom: 20px;}
#company-about-wrapper #company_keywords span{display: inline-block; margin: 0 10px 10px 0; padding: 8px 20px; text-transform: uppercase; border: 1px solid #000; border-radius: 5px;}

#user-wrapper #user-image{position: absolute; left: 0; top: 0; display: flex; align-items: center; height: 100px; max-width: 300px; transform: translateX(-25px) translateY(calc(-50% - var(--col-v-padding))); padding: 20px 30px; border: 1px solid #ddd; background: #ffffff; border-radius: 8px; overflow: hidden;}
#user-wrapper #user-image p{margin-bottom: 0;}
#user-wrapper #user-image img{max-height: 60px; width: auto; mix-blend-mode: multiply;}
#user-about-wrapper{padding: 20px 0;}
#user-about-wrapper #user_keywords{margin-bottom: 20px;}
#user-about-wrapper #user_keywords span{display: inline-block; margin: 0 10px 10px 0; padding: 8px 20px; text-transform: uppercase; border: 1px solid #000; border-radius: 5px;}
#user-about-links{margin-top: 40px;}
#user-about-links a.btn{margin-right: 20px;}

#legal-col p, #legal-col li, #legal-col a{font-weight: 200; color: #909090; font-size: 1.3rem;}
#legal-col span{color: inherit;}
#legal-col strong{font-weight: 600;}
#legal-col a{text-decoration: underline;}
#legal-col a:hover{color: #000}

/* HEADER */

/* Header > Company */
p#slogan{margin-bottom: 2rem; font-family: "Baloo 2", sans-serif; font-weight: bold; color: #000; font-size: 2.2rem;}
#company-business-sectors span{display: inline-block; margin: 0 10px 10px 0; padding: 8px 20px; text-transform: uppercase; border: 1px solid #000; border-radius: 5px;}
#h1-note p#nb_testimonies{color: gold;}
#nb_testimonies span{font-size: 3rem; font-family: "Baloo 2", sans-serif; font-weight: bold;}

/* Divers */
.to_animate{transition: all 500ms ease-in-out;}
.layout-clients #certifie-authentifie{position: fixed; top: 120px; left: 20px; width: 200px; height: 200px; opacity: 0.5; transform: rotate(385deg); opacity: 0;}
.layout-clients #certifie-authentifie.animate{transform: rotate(0deg); opacity: 0.5;}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////

		AFFICHAGE GRILLE
		
		<div class="grid_wrapper">
			<div class="grid_list"> // classes = with_picto, ...
				<div class="grid_element">
					<div class="picto"></div>
					<div class="image"></div>
					<div class="content"></div> // Classes = center, discret...
				</div>
			</div>
		</div>

//////////////////////////////////////////////////////////////////////////////////////////////////////// */
.grid_wrapper {
	container-type: inline-size; /* nécessaire pour les media queries sur ce container */
}
.grid_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
    gap: 2rem; /* espace entre les éléments */
	grid-auto-rows: 1fr;
	--grid-elt-border : 1px;
	--grid-elt-border-radius : 1rem;
}
.grid_element {
	position: relative;
	background: #fff;
    border: var(--grid-elt-border) solid #ddd;
    border-radius: var(--grid-elt-border-radius);
	transition: all ease-in-out 250ms;
}
.grid_element.ombre {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.grid_element .picto{
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 0;
	width: 10rem;
	height: 10rem;
	transform: translate3D(-50%, -50%, 0);
    display: flex;
    justify-content: center;
    align-items: center;
	line-height: 10rem;
	background: #fbfbfb;
	border-radius: 100%;
	border: 1px solid #ddd;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 65%;
}
.grid_element .picto *{
	margin: 0;
	padding: 0;
	color: var(--color-main);
	font-size: 3.6rem;
	font-weight: 700;
	font-family: 'baloo2', sans-serif;
}

.grid_element .image{
	position: relative;
	transform: translateX(calc(-1 * var(--grid-elt-border)));
	width: calc(100% + 2 * var(--grid-elt-border));
	aspect-ratio: 16 / 9;
	border-top-left-radius: var(--grid-elt-border-radius);
	border-top-right-radius: var(--grid-elt-border-radius);
	overflow: hidden;
}
.grid_element .image img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
	transition: all ease-in-out 250ms;
}
.grid_element a:hover .image img{
	transform: translate(-50%, -50%) scale(1.05);
}
.grid_element .content {
    padding: 2rem;
	padding-bottom: 3rem;
	transition: all ease-in-out 250ms;
}

.grid_list.with_picto .grid_element .content{
	padding-top: 8rem;
}
.grid_element .content.center *{
	text-align: center;
}
.grid_element .content h2{font-size: 2.6rem;}
.grid_element .content h3{font-size: 2rem;}
.grid_element .content.discret p{
	font-size: 1.5rem;
	color: #909090;
	transition: all ease-in-out 250ms;
}
.grid_element a:hover .content p{
	color: #000;
}
.grid_element .read_more {
    position: absolute;
    bottom: 0;
    left: 2rem;
    transform: translate3d(0, 50%, 0);
	margin: 0;
    padding: 0.5rem 1rem;
	font-size: 1.1rem;
	color: #909090;
    background: #f5f5f5;
	border: 1px solid #ddd;
    border-radius: 6px;
	transition: all ease-in-out 250ms;
}
.grid_element a:hover .read_more{
	color: #fff;
    background: var(--color-main);
}
/* ======= Responsive ======= */
@container (max-width: 2100px) {
	.grid_list {grid-template-columns: repeat(5, 1fr);}
}
@container (max-width: 1600px) {
	.grid_list {grid-template-columns: repeat(4, 1fr);}
	.grid_list.x3 {grid-template-columns: repeat(3, 1fr);}
}
@container (max-width: 1280px) {
	.grid_list {grid-template-columns: repeat(3, 1fr);}
	.grid_list.x3 {grid-template-columns: repeat(2, 1fr);}
}
@container (max-width: 960px) {
	.grid_list {grid-template-columns: repeat(2, 1fr);}
}
@container (max-width: 680px) {
	.grid_list,
	.grid_list.x3{
		display: block;
		grid-template-columns: unset;
		gap: unset;
		grid-auto-rows: unset;
	}
	.grid_element{
		margin-bottom: 4rem;
	}
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////

		STRUCTURE DE BASE > Multi-colonnes

//////////////////////////////////////////////////////////////////////////////////////////////////////// */
:root{
	--dev-width							: 1200px;
	--row-h-padding						: 0;
	--row-v-padding						: 2rem;
	--col-h-padding						: 5rem;
	--col-v-padding						: 1rem;
	--col-h-padding-samll-gap			: 1rem;
}


.row {
	display: flex;
	flex-wrap: wrap;
	padding: var(--row-v-padding) var(--row-h-padding);
}
.wrapper_container{
	max-width: 100%;
}
.container {
width: var(--dev-width);
max-width: 100%;
margin: 0 auto;
}
.container.large {
width: 1600px;
}
.container.full_width {
	width: 100%;
}
.container.small_gap{
	padding: 0 calc(var(--col-h-padding) - var(--col-h-padding-samll-gap));
}
.container.small_gap .col{
	padding: var(--col-v-padding) var(--col-h-padding-samll-gap);
}
.fond_blanc_ombre{
	padding-top: 4rem;
	padding-bottom: 4rem;
	border: 1px solid #ddd;
	border-radius: 1rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.fond_color_main{
	padding-top: 4rem;
	padding-bottom: 4rem;
	border-radius: 1rem;
    background-color: var(--color-main);
}

/* Colonnes de base */
.col {
padding: var(--col-v-padding) var(--col-h-padding);
box-sizing: border-box;
}
.col.align_right{text-align: right;}
.col.align_center{text-align: center;}
.col.col_grise{padding-top: 4rem; padding-bottom: 4rem; background: #f5f5f5; border: 1px solid #ddd; border-radius: 10px;}
.col.col_blanche{padding-top: 4rem; padding-bottom: 4rem; background: #fff; border: 1px solid #ddd; border-radius: 10px;}
.col.col_color_main{padding-top: 4rem; padding-bottom: 4rem; background: var(--color-main); border-radius: 10px;}

/* 1 colonne */
.container.x1col .col {
flex: 0 0 100%;
max-width: 100%;
}

/* 2 colonnes */
.container.x2col .col {
flex: 0 0 50%;
max-width: 50%;
}

/* 3 colonnes */
.container.x3col .col {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}

/* 4 colonnes */
.container.x4col .col {
flex: 0 0 25%;
max-width: 25%;
}

/* 5 colonnes */
.container.x5col .col {
flex: 0 0 20%;
max-width: 20%;
}

/* ========= 2 colonnes asymétriques ========= */
.container.x2col.c_60_40 .col:first-child{flex: 0 0 60%; max-width: 60%;}
.container.x2col.c_60_40 .col:last-child{flex: 0 0 40%; max-width: 40%;}

.container.x2col.c_40_60 .col:first-child{flex: 0 0 40%; max-width: 40%;}
.container.x2col.c_40_60 .col:last-child{flex: 0 0 60%; max-width: 60%;}

.container.x2col.c_70_30 .col:first-child{flex: 0 0 70%; max-width: 70%;}
.container.x2col.c_70_30 .col:last-child{flex: 0 0 30%; max-width: 30%;}

.container.x2col.c_30_70 .col:first-child{flex: 0 0 30%; max-width: 30%;}
.container.x2col.c_30_70 .col:last-child{flex: 0 0 70%; max-width: 70%;}

.container.x2col.c_75_25 .col:first-child{flex: 0 0 75%; max-width: 75%;}
.container.x2col.c_75_25 .col:last-child{flex: 0 0 25%; max-width: 25%;}

.container.x2col.c_25_75 .col:first-child{flex: 0 0 25%; max-width: 25%;}
.container.x2col.c_25_75 .col:last-child{flex: 0 0 75%; max-width: 75%;}


/* ======= Alignement global ======= */
.row .container {
display: flex;
flex-wrap: wrap;
}

/* ======= Responsive ======= */
@media (max-width: 992px) {
	.container.x2col[class*="c_"] .col{flex: 0 0 50%; max-width: 50%;}
}
@media (max-width: 576px) {
	.row{padding: var(--row-v-padding) var(--row-h-padding) !important;}
	.container.x2col .col{flex: 0 0 100% !important; max-width: 100% !important;}
	:root{--col-h-padding : 2rem;}
}


/* ======= PAGE > Accueil ======= */
#home_321go .bloc_picto .picto{
	background-repeat: no-repeat;
	background-position: center;
	background-size: 65%;
}
#home_321go .bloc_picto.home_3 .picto{
	background-image: url(../images/site/home/trois-doigts.png);
}
#home_321go .bloc_picto.home_2 .picto{
	background-image: url(../images/site/home/deux-doigts.png);
}
#home_321go .bloc_picto.home_1 .picto{
	background-image: url(../images/site/home/un-doigt.png);
}
#home_321go .bloc_picto.home_go .picto{
	background-image: url(../images/site/home/top-doigts.png);
}