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

		RESET

//////////////////////////////////////////////////////////////////////////////////////////////////////// */
html{font-size: 62.5%;}
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, 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; /*font: inherit;*/vertical-align: top; font-family: "Open Sans", arial, Verdana, sans-serif; color: #000; font-weight: normal;}
body{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{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{font-family: inherit; vertical-align: unset; font-size: 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 					: 120rem;
	--col-gap 						: 50px;
	
	/* 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					: #f7aa05;
	--color-success					: #48de94;
}

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

		CLASSES

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

/* Divers */
.warning{color: var(--color-main);}
.discret{color: #909090; font-size: 1.3rem;}

/* 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: 5rem; 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;}

/* 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{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: 700; color: var(--color-main);}
i.fa-clientsravis:before{position: absolute; left: 0; top: 2px; width: 17px; height: 17px; background: url(../images/CliensRavis.fr-Picto-couleur-1.svg) no-repeat; content: "\A";}

/* Boite déroulante */
.dropdown{position: relative; margin: 1rem 0;}
.dropdown-toggle{display: block; position: relative; width: 100%; padding: 1.5rem; background: var(--color-gris-clair); font-weight: 700; font-size: 1.7rem; color: #000; border: none; border-radius: 8px; cursor: pointer; transition: all 250ms ease-in-out;}
.dropdown-toggle:hover{color: var(--color-main);}
.dropdown-toggle::after{position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; font-family: "Font Awesome 5 Free"; content: "\f107";}
.dropdown.open .dropdown-toggle::after{content: "\f106";}
.dropdown.open .dropdown-toggle{color: #fff; background: var(--color-main); border-radius: 0; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.dropdown-content{display: none; padding: 1.5rem; background: var(--color-gris-clair); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
.dropdown.open i.fa-solid{color: #fff;}
.dropdown.open i.fa-clientsravis::before{background-image: url(../images/CliensRavis.fr-Picto-couleur-3.svg);}

/* 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: 1.7rem; 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/CliensRavis.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 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";}

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

		STRUCTURE

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

/* Général */
body{padding-top: 15rem; padding-bottom: 12rem;}
.wrapper{max-width: var(--dev-width); margin: 0 auto; padding: 0 2rem;}

/* Système de colonnes */
.colwrapper{display: flex; gap: 10rem;}
.colwrapper > div {display: flex; flex-direction: column;}
.colwrapper.colx2 > div, .colwrapper.colx3 > div, .colwrapper.colx4 > div{flex: 1 1 0;}
/* Largeur des colonnes colx2*/
.colwrapper.colx2.col_60_40 > div:first-child {flex: 0 0 60%;}
.colwrapper.colx2.col_60_40 > div:last-child  {flex: 0 0 40%;}

/* Autres */
.wrapper_main_color{padding: 3rem; background: var(--color-main); border-radius: 1rem;}
	.wrapper_main_color h1, .wrapper_main_color h2, .wrapper_main_color h3, .wrapper_main_color h4, .wrapper_main_color p, .wrapper_main_color li, .wrapper_main_color td{color: #fff;}
	.wrapper_main_color a.btn{padding: 1rem; color: var(--color-main); background: #fff; border-radius: 0.5rem; cursor: pointer;}
	.wrapper_main_color a.btn:hover{color: #000;}
.wrapper_gris{padding: 3rem; background: var(--color-gris-clair); border-radius: 1rem;}
.wrapper_ombre{padding: 3rem; border-radius: 1rem; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);}
.wrapper_warning{padding: 15px; background: #dedede; border-left: 12px solid var(--color-main); border-radius: 8px;}


/* Header */
header{position: fixed; z-index: 10; left: 0; top: 0; width: 100%; padding: 2rem 0; background-color: #f5f5f5;}
header .wrapper{display: flex; align-items: center; justify-content: space-between;}
#logo_site{font-size: 1.5rem; font-weight: bold; color: var(--color-main); text-decoration: none;}

/* Menu */
/* Reset Menu */
nav li::before{display: none !important;}
/* ul */
nav > ul{margin: 0; padding: 0; list-style-type: none; text-align: center;}
nav > ul > li > ul {display: none; position: absolute; width: 25rem; left: 50%; margin-left: -12.5rem; padding-top: 4.5rem; text-align: center;}
nav > ul > li > ul:before{position: absolute; left: 50%; top: 3rem; transform: translateX(-50%); width: 0; height: 0; border-left: 1rem solid transparent; border-right: 1rem solid transparent; border-bottom: 1.5rem solid var(--color-main); content: "\A";}
nav > ul > li:hover > ul {display: block;}
/* li */
nav > ul li{margin-top: 0; margin-bottom: 0; transition: all 250ms ease-in-out;}
nav > ul > li{position: relative; display: inline-block; margin: auto; min-height: 0; line-height: 100%; padding: 0; background: none;}
nav > ul > li > ul > li {position: relative; overflow: hidden;}
nav > ul > li > ul > li:first-of-type{border-top-left-radius: 1rem; border-top-right-radius: 1rem;}
nav > ul > li > ul > li:last-of-type{border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem;}
nav > ul > li > ul > li.current-menu-ancestor a, nav > ul > li > ul > li.current-menu-item a{cursor: default;}
/* a */
nav a, nav span{color: #000; transition: all 250ms ease-in-out;}
nav a:hover, nav span:hover, nav li.current-menu-parent span{color: var(--color-main);}
nav span:hover{cursor: default;}
nav > ul > li:hover > a, nav > ul > li:hover > span{color: var(--color-main);}
nav > ul > li a, nav > ul > li span{display: block; padding: 0.5rem 1rem;}
nav > ul > li > ul > li a, nav > ul > li > ul > li span{display: block; width: 100%; padding: 1rem; color: rgba(255, 255, 255, 1); background: var(--color-main);}
nav > ul > li > ul > li:first-of-type > *{padding-top: 2rem;}
nav > ul > li > ul > li:last-of-type > *{padding-bottom: 2rem;}
nav > ul > li > ul > li a:hover, nav > ul > li > ul > li.current-menu-item span{color: var(--color-main-3);}
/* Footer */
footer{position: fixed; left: 0; bottom: 0; width: 100%; padding: 1.2rem 0; background-color: #303030;}
footer .wrapper{display: flex; align-items: center; justify-content: space-between;}
footer p, footer a{margin: 0; line-height: 1; font-size: 1.5rem; color: #909090;}
footer a + a{margin-left: 2rem;}
footer a:hover{color: #fff;}

/* 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: var(--color-main-80pct); cursor: pointer;}
#alert_wrapper{position: relative; min-width: 500px;  max-width: 500px; max-height: 100%; background: #fff; cursor: default;}
#alert_wrapper.large{max-width: var(--dev-width);}
#alert_actions{position: absolute; z-index: 1000; left: 0; top: 0; height: 4rem; width: 4rem; transform: translate3D(-50%, -50%, 0); background: #000; 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; 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);}
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////

		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: "Baloo 2", sans-serif; font-weight: 600; font-size: 5rem; color: var(--color-main);}
h2{margin-bottom: 2rem; font-weight: normal; font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: 3.5rem; color: var(--color-secondary);}
h3{margin-bottom: 2rem; font-weight: normal; font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: 2.5rem;}
h4{margin-bottom: 2rem; font-weight: normal; font-family: "Baloo 2", sans-serif; font-weight: 400; font-size: 2.2rem;}
p, li{font-size: 1.7rem; margin-bottom: 1rem;}
td, label{font-size: 1.7rem;}
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{padding: 1rem; color: #fff; background: var(--color-main); border-radius: 0.5rem; cursor: pointer;}
a.btn:hover{color: var(--color-main-3);}

/* 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: #f5f5f5;}

/* Listes */
li::before{display: inline-block; margin-right: 8px; content: "\f105"; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 700;}


.status-draft {color: gray;}
.status-pending {color: orange;}
.status-ready {color: blue;}
.status-published {color: green;}


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

		FORMULAIRE

//////////////////////////////////////////////////////////////////////////////////////////////////////// */
input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea, select, button{all: 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-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);}
button.style2:hover{color: #fff; background: var(--color-main-2-sombre);}

/* RADIO SEXY */
.cr_radio{display: inline-block; cursor: pointer;}
.cr_radio + .cr_radio{margin-left: 10px;}
.cr_radio input[type="radio"]{display: none;}
.cr_radio span{display: inline-block; padding: 3px 15px; background: #f0f0f0; border-radius: 20px; 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;}

/* 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);}




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

		PAGES SPECIFIQUES

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

/* 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;
}