/* v65 : ISOLATION - la totalite de css.css vit sous .contenu_site (classe posee sur le
   body du SITE et sur les seules zones de contenu de l'ADMIN : canvas am_page, apercus).
   Regles volontairement laissees GLOBALES : html, :root (variables), @import, @keyframes. */
@import url("../Font/polices_locales.css?v=260806"); /* v50 : polices auto-hebergees (media.datao.fr) */

html{
	color: #373737;
	--echelle-texte: 1;
	font-size: calc(15px * var(--echelle-texte));
	overflow-x: hidden !important;
	height: 100% !important;
	--police-site-datao: Verdana, 'DejaVu Sans', 'Bitstream Vera Sans', Geneva, sans-serif;
	font-family: var(--police-site-datao);
}

body.contenu_site{
	font-size: 1rem;
	color: #373737;
	top: 0 !important;
	font-family: var(--police-site-datao);
}

.contenu_site #back-top{
    -webkit-transform: translateZ(0);
    bottom: 80px;
    position: fixed;
    right: 15px;
    z-index : 500;
    display: none;
	opacity: 0.7;
	filter: alpha(opacity=70);
}

.contenu_site .btn{
	width: auto;
}

.contenu_site .btn a:hover{
	text-decoration: none;
}

.contenu_site .btn-info-supp{
    font-size: 16px !important;
    font-weight: 600 !important;
    width: 200px;
	height: 45px;
    border: 5px solid #FFFFFF !important;
}
.contenu_site .css-text-shadow-null{
	text-shadow: 1px 1px 1px #000000 !important;
}

.contenu_site .zone_prec_recouvrable{
	height: 425px;
}
.contenu_site .zone_recouvrable{
	position:fixed;
	top: 80px;
	left:0px;
	height: 300px;
}

.contenu_site .curseur_pointer{
	cursor:pointer;
}
.contenu_site a{
	-webkit-transition: all ease .2s;
	-moz-transition: all ease .2s;
	-o-transition: all ease .2s;
	transition: all ease .2s;
}
.contenu_site input,.contenu_site button{
	-webkit-transition: all ease .2s;
	-moz-transition: all ease .2s;
	-o-transition: all ease .2s;
	transition: all ease .2s;
}
.contenu_site a:hover{
	text-decoration: underline;
}
.contenu_site .separation{
    border: 5px solid #EEE !important;
}
.contenu_site hr{
	border-color: #e5e5e5;
	margin: 10px 0 10px 0;
}
.contenu_site p.big-paragraph,.contenu_site .navbar-default .navbar-brand,.contenu_site .orange{
	font-weight: bold;
}
.contenu_site h2 small{
	color: #c7c7c7;
	font-size: 0.75rem;
}
.contenu_site h2.page__title2{
	font-size: 3.75rem;
	font-weight: 500;
	padding: 20px 0 10px 0;
	background: url('../Img/heading_sep.png') repeat-x left center, url('../Img/heading_sep.png') repeat-x right center;
	color: #333;
}
.contenu_site h2.page__title2 span{
	padding: 0 30px;
}

.contenu_site .page__title_sep{
	background: url('../Img/heading_sep.png') repeat-x left center, url('../Img/heading_sep.png') repeat-x right center;
}
.contenu_site h2.page__title_3{
	font-size: 3.125rem;
	font-weight: 500;
	color: #333;
}

.contenu_site h2.page__title{
	font-size: 3.125rem;
	font-weight: 500;
	padding: 20px 0 10px 0;
	background: url('../Img/heading_sep.png') repeat-x left center, url('../Img/heading_sep.png') repeat-x right center;
	color: #FFFFFF;
}
.contenu_site h2.page__title span{
	background: #fff;
	padding: 0 30px;
}
.contenu_site h3 small{
	font-size: 0.875rem;
	font-weight: 500;
}
.contenu_site h3 a{
	color: #333;
	line-height: 110%;
}
.contenu_site h3 a:hover{
	text-decoration: none;
}
.contenu_site .typo{
	margin-top: 80px;
}
.contenu_site h4 a{
	color: #333;
}
.contenu_site h4 a:hover{
	text-decoration: none;
}
.contenu_site h5 u{
	font-size: 1.25rem;
}
.contenu_site h2.with__margin{
	margin-top: 70px;
	margin-bottom: 0px;
}
.contenu_site h2.with__margin2{
	margin: 50px 0;
}
.contenu_site p.small-paragraph{
	margin-top: 10px;
	margin-bottom: 50px;
	font-size: 14px;
	font-weight: normal;
}
.contenu_site p.smaller{
	font-size: 16px;
	text-transform: none;
}
.contenu_site .relative_btn{
	position: absolute;
	left: 50%;
	margin-left: -90px;
	bottom: -35px;
}
.contenu_site .headings{
	color: #eeeeee;
}
.contenu_site .headings h1{
	color: #fffefe;
}
.contenu_site .headings p.small-paragraph{
	margin: 15px 0 35px 0;
}
.contenu_site .headings p{
	font-size: 14px;
	margin: 35px 0;
}
.contenu_site .row.title__block{
	padding: 40px 0;
}
.contenu_site .form-control,.contenu_site .form-control:focus{
	-webkit-box-shadow: none;
	box-shadow: none;
}
.contenu_site .form-control:focus{
	border-color: #ffdd3c;
}
.contenu_site .absolute__img{
	position: absolute;
	bottom: -10px;
	left: 50%;
	margin-left: -49px;
	z-index: 99;
}
.contenu_site .row.nice__title{
	background: url('../Img/line_bg.jpg') no-repeat;
	background-origin: initial;
	background-clip: initial;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding: 60px 0 80px 0;
	font-size: 18px;
	color: #fff;
}
.contenu_site .nice__title h2{
	color: #fff;
	font-size: 3.75rem;
	line-height: 60px;
	font-weight: 500;
}
.contenu_site .row.nice__title img{
	margin: 35px auto;
}
.contenu_site .row.nice__title p{
	margin-top: 45px;
}
.contenu_site .main__middle__container .row ul,.contenu_site .main__middle__container .row ol{
	padding-left: 20px;
}
.contenu_site .main__middle__container{
	width: 100%;
}
.contenu_site .homepage{
	position: relative;
	z-index: 111;
	background: #fff;
	transition: z-index 0s .25s;
}
.contenu_site .page_de_base{
	position: relative;
	/*background: #fff;*/
}
.contenu_site .row.with__sep{
	background: url('../Img/lines.png') repeat-x left bottom;
}
.contenu_site p.big-paragraph{
	font-size: 14px;
	padding-top: 15px;
	color: #e8bd10;
}
.contenu_site .orange{
	font-size: 14px;
	text-transform: none;
	padding: 0 0 10px 0;
}
.contenu_site .black-text{
	color: #1e1e1e;
}
.contenu_site .to_top{
	margin-top: -80px !important;
}
.contenu_site .line__bg{
	width: 100%;
	margin: 0;
	padding: 75px 0;
	background: url('../Img/big_line_bg.jpg') no-repeat;
	background-origin: initial;
	background-clip: initial;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0 100%;
}
.contenu_site .line__bg h3{
	color: #fff;
}
.contenu_site .line__bg p{
	color: #fff;
}
.contenu_site img.full-width{
	width: 100%;
}
.contenu_site .grey-info-block{
	width: 100%;
	margin: 0;
	z-index: 9;
	padding: 45px 0 40px 0;
}
.contenu_site .grey-info-block h2{
	margin: 45px 0 0 0;
	padding: 0;
}
.contenu_site .grey-info-block>.container{
	position: relative;
}
.contenu_site .grey-info-block h3{
	padding-bottom: 10px;
}
.contenu_site .grey-info-block .col-md-6 img{
	width: 100%;
	margin: 0;
	height: auto;
}
.contenu_site .grey-info-block p.small-paragraph{
	padding: 20px 0 0px 0;
}
.contenu_site .grey-info-block img{
	margin-bottom: 20px;
}
.contenu_site .icon-item{
	border-bottom: 1px solid #e7e9ea;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.contenu_site .icon-item:last-child{
	border-bottom: none;
}
.contenu_site .socialicon{
	position: relative;
	display: inline-block;
	width: 40px;
	margin-right: 5px;
	height: 40px;
}
.contenu_site .socialicon-twitter{
	background: url('../Img/social/twitter.png') no-repeat;
}
.contenu_site .socialicon-twitter:hover{
	background: url('../Img/social/twitter_a.png') no-repeat;
}
.contenu_site .socialicon-facebook{
	background: url('../Img/social/facebook.png') no-repeat;
}
.contenu_site .socialicon-facebook:hover{
	background: url('../Img/social/facebook_a.png') no-repeat;
}
.contenu_site .socialicon-instagram{
	background: url('../Img/social/instagram.png') no-repeat;
}
.contenu_site .socialicon-instagram:hover{
	background: url('../Img/social/instagram_a.png') no-repeat;
}
.contenu_site .contact-form .col-md-6{
	padding: 0 20px 0 0;
}
.contenu_site .contact-form .col-md-6:nth-child(2){
	padding: 0 0px 0 0;
}
.contenu_site .main-content h2{
	line-height: 11px;
	margin-bottom: 40px;
}
.contenu_site .copyright{
	background-color: #333;
	color: #999999;
	padding: 35px 0;
	margin: 0;
	position: relative;
	z-index: 200;
}
.contenu_site .img-fluid{
	margin: 0 auto;
}
.contenu_site .no-margin{
	position: relative;
	margin: 0;
}
.contenu_site .no_padding{
	padding: 0px 0 80px 0;
}
.contenu_site .row.nothing{
	padding-left: 0px !important;
	padding-right: 0px !important;
}

/* responsive */

@media(max-width:440px){
	.contenu_site h1 span{
		font-size: 1.25rem;
	}
    .contenu_site h2.page__title{
        font-size: 1.875rem;
    }
	.contenu_site h2.page__title_3{
		font-size: 1.875rem;
	}
    .contenu_site .nice__title h2{
        font-size: 1.875rem;
    }
}

@media(max-width:600px) {
    .contenu_site h2.page__title{
        font-size: 1.875rem;
    }
	.contenu_site h2.page__title_3{
		font-size: 1.875rem;
	}
    .contenu_site .nice__title h2{
        font-size: 1.875rem;
    }
}

@media(max-width:767px) {
	.contenu_site .page__title_sep{
		display: none;
	}
	.contenu_site .page__title_3{
		text-align: center;
	}
    .contenu_site h1.page_title{
        padding: 20px 30px;
    }
    .contenu_site h2.page__title{
        font-size: 1.875rem;
    }
	.contenu_site h2.page__title_3{
		font-size: 1.875rem;
	}
}

@media(max-width:990px) {
	.contenu_site .main__middle__container .container{
		/*padding-top: 100px !important;*/
	}
    .contenu_site h2.page__title{
        font-size: 1.875rem;
    }
	.contenu_site h2.page__title_3{
		font-size: 1.875rem;
	}
    .contenu_site .main__middle__container h3.heading.white{
        background: none;
    }
    .contenu_site .carousel-caption{
        font-size: 14px;
    }
    .contenu_site .carousel-caption h1{
        font-size: 1.25rem;
    }
}

@media(max-width:1310px) {
    .contenu_site h2.page__title{
        font-size: 2.5rem;
    }
	.contenu_site h2.page__title_3{
		font-size: 2.5rem;
	}
    .contenu_site .carousel-caption{
        font-size: 14px;
    }
    .contenu_site .carousel-caption h1{
        font-size: 1.875rem;
    }
}

@media(max-width:1600px){
    .contenu_site .carousel-caption h1{
        font-size: 2.5rem;
    }
}

.contenu_site .active{
 opacity: 1;
}

.contenu_site .carousel-inner > .carousel-item > img,.contenu_site .carousel-inner > .carousel-item > a > img{
	min-width: 100%;
	height: auto;
}
.contenu_site .one_half_pad{
	width: 44%
}
.contenu_site .one_third_pad{
	width: 27%
}
.contenu_site .one_fourth_pad{
	width: 19%
}
.contenu_site .one_fifth_pad{
	width: 14%
}
.contenu_site .one_sixth_pad{
	width: 10.5%
}
.contenu_site .two_third_pad{
	width: 60%
}
.contenu_site .two_fourth_pad{
	width: 43%
}
.contenu_site .two_fifth_pad{
	width: 33%
}
.contenu_site .three_fifth_pad{
	width: 58.4%
}
.contenu_site .three_fourth_pad{
	width: 74%
}
.contenu_site .four_fifth_pad{
	width: 67.2%
}
.contenu_site .five_sixth_pad{
	width: 82.67%
}
.contenu_site .one_half_pad,.contenu_site .one_third_pad,.contenu_site .two_third_pad,.contenu_site .three_fourth_pad,.contenu_site .one_fourth_pad,.contenu_site .one_fifth_pad,.contenu_site .two_fifth_pad,.contenu_site .two_fourth_pad,.contenu_site .two_fifth_pad,.contenu_site .three_fifth_pad,.contenu_site .four_fifth_pad,.contenu_site .one_sixth_pad,.contenu_site .five_sixth_pad{
	float: left;
	margin-bottom: 20px;
	margin-left: 3%;
	margin-right: 3%;
	position: relative
}
.contenu_site .one_half{
	width: 48%
}
.contenu_site .one_third{
	width: 30.5%
}
.contenu_site .one_fourth{
	width: 22%
}
.contenu_site .one_fifth{
	width: 16.8%
}
.contenu_site .one_sixth{
	width: 13.33%
}
.contenu_site .two_fifth{
	width: 37.6%
}
.contenu_site .two_third{
	width: 65.33%
}
.contenu_site .two_fourth{
	width: 48%
}
.contenu_site .three_fifth{
	width: 58.4%
}
.contenu_site .three_fourth{
	width: 74%
}
.contenu_site .four_fifth{
	width: 67.2%
}
.contenu_site .five_sixth{
	width: 82.67%
}
.contenu_site .one_half,.contenu_site .one_third,.contenu_site .two_third,.contenu_site .two_fourth,.contenu_site .three_fourth,.contenu_site .one_fourth,.contenu_site .one_fifth,.contenu_site .two_fifth,.contenu_site .three_fifth,.contenu_site .four_fifth,.contenu_site .one_sixth,.contenu_site .five_sixth{
	float: left;
	margin-bottom: 10px;
	margin-right: 4%;
	position: relative
}
.contenu_site .column-last{
	clear: right;
	margin-right: 0!important
}
.contenu_site .dc_tabs_type_2 .one_third{
	width: 29%
}
.contenu_site .clr{
	clear: both;
	margin: 0;
	padding: 0;
	width: 100%
}
.contenu_site .dc_clear{
	clear: both;
	font-size: 0px;
	line-height: 0px;
	margin: 0;
	padding: 0;
	width: 100%
}

.contenu_site .lien_noir_gris{
	color: #000000;
}

.contenu_site .lien_noir_gris:hover{
	color: #8B8B8B;
	text-decoration: underline; 
	cursor: pointer;
}

.contenu_site .lien_gris_gris{
	color: #333333;
}

.contenu_site .lien_gris_gris:hover{
	color: #8B8B8B;
	text-decoration: underline; 
	cursor: pointer;
}

.contenu_site .lien_blanc_gris{
	color: #FFFFFF;
}

.contenu_site .lien_blanc_gris:hover{
	color: #EEEEEE;
	text-decoration: underline; 
	cursor: pointer;
}

.contenu_site .fade_img{
	box-shadow: 0 2px 10px #000;
}

.contenu_site .hr_5_border{
    border: 5px solid #CCCCCC;
}

/* The old, slow way. */
.contenu_site .slow-transition{
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transition: box-shadow 500ms;
}

.contenu_site .slow-transition:hover{
  box-shadow: 0 0px 10px 0 #FFFFFF;
}

.contenu_site .slow-transition_inverse{
  box-shadow: 0 0px 10px 0 #FFFFFF;
  transition: box-shadow 500ms;
}

.contenu_site .slow-transition_inverse:hover{
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.contenu_site .slow-transition_inverse_2{
  transition: box-shadow 500ms;
}

.contenu_site .slow-transition_inverse_2:hover{
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.contenu_site .grey-info-block_sans_image{
	width: 100%;
	margin: 0;
	z-index: 9;
	padding: 45px 0 0px 0;
}
.contenu_site .grey-info-block_sans_image h2{
	color: #fff;
	margin: 45px 0 0 0;
	padding: 0;
}
.contenu_site .grey-info-block_sans_image>.container{
	position: relative;
}
.contenu_site .grey-info-block_sans_image .col-md-6 img{
	width: 100%;
	margin: 0;
	height: auto;
}
.contenu_site .grey-info-block_sans_image p.small-paragraph{
	padding: 20px 0 0px 0;
}
.contenu_site .grey-info-block_sans_image img{
	margin-bottom: 0px;
}

.contenu_site .en_savoir_plus_lien{
	background-color: #000000;
	padding-top: 10px;
	padding-bottom: 5px;
}

.contenu_site .zindex-120{
	z-index: 125 !important;
}

.contenu_site .css-text-shadow-blanc{
	text-shadow: 1px 1px 1px #FFFFFF !important;
}

.contenu_site .flip-card{
	background-color: transparent;
	width: 100%;
	height: 100%;
	border: 1px solid #f1f1f1;
	perspective: 1000px;
	color: rgb(55, 55, 55);
}

.contenu_site .flip-card-inner{
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

.contenu_site .flip-card:hover .flip-card-inner{
	transform: rotateY(180deg);
}

.contenu_site .flip-card-front{
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
	background-color: #bbb;
	color: black;
}

.contenu_site .flip-card-back{
	position: absolute;
	padding:20px; 
	top: 0px;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
	background-color: dodgerblue;
	color: white;
	transform: rotateY(180deg);
}

.contenu_site p{
	margin: 0px;
}

.contenu_site span{word-break: break-word;}

/* entire container, keeps perspective */
.contenu_site .card-container{
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;
	margin-bottom: 30px;
}
/* flip the pane when hovered */
.contenu_site .card-container:not(.manual-flip):hover div#id_div_flip_card.card,.contenu_site .card-container.hover.manual-flip div#id_div_flip_card.card{
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-o-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}

.contenu_site .card-container.static:hover div#id_div_flip_card.card,.contenu_site .card-container.static.hover div#id_div_flip_card.card{
	-webkit-transform: none;
	-moz-transform: none;
	-o-transform: none;
	transform: none;
}
/* flip speed goes here */
.contenu_site div#id_div_flip_card.card{
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	-o-transition: -o-transform .5s;
	transition: transform .5s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.contenu_site .front,.contenu_site .back{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #FFF;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}

/* front pane, placed above back */
.contenu_site .front{
	z-index: 2;
}

/* back, initially hidden pane */
.contenu_site .back{
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-o-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
	z-index: 3;
	overflow-y: scroll;
}

.contenu_site div#id_div_flip_card.card{
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px;
    color: #444444;
}
.contenu_site .card-container,.contenu_site .front,.contenu_site .back{
	width: 22rem;
	height: 450px;
	border-radius: 4px;
}
.contenu_site .card .cover{
    height: 105px;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
}
.contenu_site .card .cover img{
    width: 100%;
}
.contenu_site .card .user{
    border-radius: 50%;
    display: block;
    height: 200px;
    margin: -55px auto 0;
    overflow: hidden;
    width: 200px;
}
.contenu_site .card .user img{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 4px solid #FFFFFF;
    width: 100%;
}

.contenu_site .card .content{
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    padding: 10px 20px 20px;
}
.contenu_site .card .content .main{
    min-height: 70px;
}
.contenu_site .card .back .content .main{
    height: 215px;
	text-align: left;
}
.contenu_site .card .name{
    font-size: 22px;
    line-height: 28px;
    margin: 10px 0 0;
    text-align: center;
    text-transform: capitalize;
	color: #444444;
}
.contenu_site .card .profession{
    color: #999999;
    text-align: center;
    margin-bottom: 20px;
}
.contenu_site .card .footer{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
    border-top: 1px solid #EEEEEE;
    color: #444444;
    margin: 0px 0 0;
    padding: 0px 0 0;
    text-align: center;
}
.contenu_site .card .social-links{
    font-size: 30px;
}
.contenu_site .card .social-links a{
    margin: 0 7px;
	filter: grayscale(100%);
}
.contenu_site .card .social-links a:hover{
	filter: grayscale(0%);
}
.contenu_site .card .header{
    padding: 15px 20px;
    max-height: 90px;
}

.contenu_site .btn_flip_card{
	border-radius: 0px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .contenu_site .front,.contenu_site .back{
        -ms-backface-visibility: visible;
        backface-visibility: visible;
    }

    .contenu_site .back{
        visibility: hidden;
        -ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);
    }
    .contenu_site .front{
        z-index: 4;
    }
    .contenu_site .card-container:not(.manual-flip):hover .back,.contenu_site .card-container.manual-flip.hover .back{
        z-index: 5;
        visibility: visible;
    }
}

.contenu_site .footer_publication{
	position: relative;
	bottom: 0px;
}

/* Shared styles */
.contenu_site .drop-shadow{
	position:relative;
	float:left;
	width:40%;
	padding:1em;
	margin:2em 10px 4em;
	background:#fff;
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.contenu_site .drop-shadow:before,.contenu_site .drop-shadow:after{
	content:"";
	position:absolute;
	z-index:-2;
}

.contenu_site .drop-shadow p{
	font-size:16px;
	font-weight:bold;
}

/* Lifted corners */

.contenu_site .lifted{
	-moz-border-radius:4px;
	border-radius:4px;
}

.contenu_site .lifted:before,.contenu_site .lifted:after{
	bottom:15px;
	left:10px;
	width:50%;
	height:20%;
	max-width:300px;
	max-height:100px;
	-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
	transform:rotate(-3deg);
}

.contenu_site .lifted:after{
	right:10px;
	left:auto;
	-webkit-transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	-ms-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	transform:rotate(3deg);
}

/* Curled corners */

.contenu_site .curled{
	border:1px solid #efefef;
	-moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
	border-radius:0 0 120px 120px / 0 0 6px 6px;
}

.contenu_site .curled:before,.contenu_site .curled:after{
	bottom:12px;
	left:10px;
	width:50%;
	height:55%;
	max-width:200px;
	max-height:100px;
	-webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
	box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
	-webkit-transform:skew(-8deg) rotate(-3deg);
	-moz-transform:skew(-8deg) rotate(-3deg);
	-ms-transform:skew(-8deg) rotate(-3deg);
	-o-transform:skew(-8deg) rotate(-3deg);
	transform:skew(-8deg) rotate(-3deg);
}

.contenu_site .curled:after{
	right:10px;
	left:auto;
	-webkit-transform:skew(8deg) rotate(3deg);
	-moz-transform:skew(8deg) rotate(3deg);
	-ms-transform:skew(8deg) rotate(3deg);
	-o-transform:skew(8deg) rotate(3deg);
	transform:skew(8deg) rotate(3deg);
}

/* Perspective */

.contenu_site .perspective:before{
	left:80px;
	bottom:5px;
	width:50%;
	height:35%;
	max-width:200px;
	max-height:50px;
	-webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
	-moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
	box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
	-webkit-transform:skew(50deg);
	-moz-transform:skew(50deg);
	-ms-transform:skew(50deg);
	-o-transform:skew(50deg);
	transform:skew(50deg);
	-webkit-transform-origin:0 100%;
	-moz-transform-origin:0 100%;
	-ms-transform-origin:0 100%;
	-o-transform-origin:0 100%;
	transform-origin:0 100%;
}

.contenu_site .perspective:after{
	display:none;
}

/* Raised shadow - no pseudo-elements needed */

.contenu_site .raised{
	-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

/* Curved shadows */

.contenu_site .curved:before{
	top:10px;
	bottom:10px;
	left:0;
	right:50%;
	-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
	-moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
	box-shadow:0 0 15px rgba(0,0,0,0.6);
	-moz-border-radius:10px / 100px;
	border-radius:10px / 100px;
}

.contenu_site .curved-vt-2:before{
	right:0;
}

.contenu_site .curved-hz-1:before{
	top:50%;
	bottom:0;
	left:10px;
	right:10px;
	-moz-border-radius:100px / 10px;
	border-radius:100px / 10px;
}

.contenu_site .curved-hz-2:before{
	top:0;
	bottom:0;
	left:10px;
	right:10px;
	-moz-border-radius:100px / 10px;
	border-radius:100px / 10px;
}

/* Rotated box */

.contenu_site .rotated{
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	-webkit-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
	transform:rotate(-3deg);
}

.contenu_site .rotated > :first-child:before{
	content:"";
	position:absolute;
	z-index:-1;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:#fff;
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.contenu_site .rotated_null{
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	-webkit-transform:rotate(-0deg);
	-moz-transform:rotate(-0deg);
	-ms-transform:rotate(-0deg);
	-o-transform:rotate(-0deg);
	transform:rotate(-0deg);
}

.contenu_site .rotated_null > :first-child:before{
	content:"";
	position:absolute;
	z-index:-1;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:#fff;
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.contenu_site .effect4{
	position: relative;
}
.contenu_site .effect4:after{
	z-index: 10;
	position: absolute;
	content: "";
	bottom: 30px;
	right: 5px;
	left: auto;
	width: 50%;
	top: 80%;
	max-width:300px;
	background: #777;
	opacity: 0;
	-webkit-box-shadow: 0 15px 10px #777;
	-moz-box-shadow: 0 15px 10px #777;
	box-shadow: 0 15px 10px #777;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	-webkit-transition: all ease .5s;
	-moz-transition: all ease .5s;
	-o-transition: all ease .5s;
	transition: all ease .5s;
}
.contenu_site .effect4:hover:after{
	opacity: 1;
}

.contenu_site .grecaptcha-badge{
	z-index: 99999;
}

.contenu_site .ico-label{
    position: absolute;
    top: 33px;
    left: 25px;
    color: #bebebe;
}

.contenu_site .ico-label-password{
    position: absolute;
    top: 33px;
    left: 25px;
    color: #bebebe;
}

.contenu_site .ico-label-eye{
    position: absolute;
    top: 33px;
    right: 25px;
    color: #bebebe;
}

.contenu_site .ico-label-eye:hover{
    position: absolute;
    top: 33px;
    right: 25px;
    color: #000000;
	cursor: pointer;
}

/* Bootstrap Toggle v2.2.2 corrections for Bootsrtap 4*/
.contenu_site .toggle-off{
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.contenu_site .toggle.off{
    border-color: rgba(0, 0, 0, .25);
}

.contenu_site .toggle-handle{
    background-color: white;
    border: thin rgba(0, 0, 0, .25) solid;
}

.contenu_site .ui-autocomplete{
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
	max-width: 600px;
}
html .ui-autocomplete{
	height: 300px;
}

.contenu_site .fs-250{
	font-size: 250px;
}

.contenu_site .post-grid.post-grid-2{
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}
.contenu_site .post-grid.post-grid-3{
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
}
.contenu_site .post-grid.post-grid-4{
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
}
.contenu_site .post-list{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.contenu_site .post-grid{
	orphans: 1;
	widows: 1;
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	-webkit-column-gap: 1.25rem;
	-moz-column-gap: 1.25rem;
	column-gap: 1.25rem;
}
.contenu_site .post-grid .post-li{
	display: inline-block;
	margin-bottom: 1.25rem;
}

@media screen and (min-width: 200px) and (max-width: 640px){
	.contenu_site .post-grid.post-grid-2{
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
	.contenu_site .post-grid.post-grid-3{
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
	.contenu_site .post-grid.post-grid-4{
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
	.contenu_site .post-grid{
		orphans: 1;
		widows: 1;
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
		-webkit-column-gap: 1.25rem;
		-moz-column-gap: 1.25rem;
		column-gap: 1.25rem;
	}
}

@media screen and (min-width: 641px) and (max-width: 1024px){
	.contenu_site .post-grid.post-grid-2{
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
	.contenu_site .post-grid.post-grid-3{
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
	.contenu_site .post-grid.post-grid-4{
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
	.contenu_site .post-grid{
		orphans: 1;
		widows: 1;
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
		-webkit-column-gap: 1.25rem;
		-moz-column-gap: 1.25rem;
		column-gap: 1.25rem;
	}
}

.contenu_site .section-title{
    font-size: .875rem;
    line-height: 1.5;
    text-align: center;
    margin: 0 0 .9375rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .5px;
    color: #2d353c;
    position: relative;
}

.contenu_site .section-title span{
    padding: 0 .625rem;
    background: #EFEFEF;
    position: relative;
}
.contenu_site .section-title span ::after,.contenu_site ::before{
    box-sizing: border-box;
}
.contenu_site .section-title:before{
	content:'';
	position:absolute;
	top:50%;
	left:0;
	right:0;
	height:2px;
	background:#2d353c;
	margin-top:-1px;
}
.contenu_site .sidebar-recent-post{
	list-style-type:none;
	margin:0;
	padding:0
}
.contenu_site .sidebar-recent-post>li{padding:.625rem 0;border-bottom:1px solid #dee2e6}.contenu_site .sidebar-recent-post>li:after,.contenu_site .sidebar-recent-post>li:before{content:'';display:table;clear:both}.contenu_site .sidebar-recent-post>li .title{margin:0;font-size:.99rem;line-height:1.5}
.contenu_site .sidebar-recent-post>li .title a{
	color:#2d353c;
}
.contenu_site .sidebar-recent-post>li .title a:hover{
	text-decoration: underline;
}
.contenu_site .sidebar-recent-post>li .date{font-size:.8125rem;line-height:1.5;color:#6c757d}

.contenu_site .grey-info-block_2{
	width: 100%;
	color: #373737;
    background-color: #EFEFEF;
}

.contenu_site .grey-info-block_3{
	width: 100%;
	color: #373737;
    background-color: #ffc107;
}

.contenu_site .class_valider{
	background-color:#28a745;
	color:#FFFFFF;
}

.contenu_site .lien_bleu{
	color: #1E8AFF;
}

.contenu_site .lien_bleu:hover{
	color: #276FBE;
	text-decoration: underline; 
	cursor: pointer;
}

.contenu_site .lien_bleu_normal{
	color: #1E8AFF;
}

.contenu_site .lien_bleu_normal:hover{
	color: #276FBE;
	cursor: pointer;
}

.contenu_site .galerie,.contenu_site .galerie div{position:relative;}.contenu_site .galerie div.item{position:relative;overflow:hidden}.contenu_site .galerie div.item div{position:relative;overflow:hidden;}.contenu_site .galerie div.item .template{outline:none;border:none;width:100%;max-width:100%}.contenu_site .galerie div.item div div{outline:none;border:none;width:100%;max-width:100%;}.contenu_site .galerie div.item p.nom{float:left;margin:0}.contenu_site .galerie div.item{float:right;margin-top:0.35em}.contenu_site .galerie div.item i{margin-right:0.3em}.contenu_site .galerie div.item div,.contenu_site .galerie div.item .card{-webkit-transition:-webkit-transform 0.4s;-moz-transition:-moz-transform 0.4s;transition:transform 0.4s}.contenu_site .galerie div.item:hover div.template,.contenu_site .galerie div.item.cs-hover div.template{-webkit-transform:translateY(-50px);-moz-transform:translateY(-50px);-ms-transform:translateY(-50px);transform:translateY(-50px)}.contenu_site .galerie div.item figcaption{position:absolute;top:0;left:0;padding:20px;background:#F3F3F3;height:75px;width:100%;top:auto;bottom:0;box-sizing:border-box;-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform 0.4s, opacity 0.1s 0.3s;-moz-transition:-moz-transform 0.4s, opacity 0.1s 0.3s;transition:transform 0.4s, opacity 0.1s 0.3s}.contenu_site .galerie div.item:hover figcaption,.contenu_site .galerie div.item.cs-hover figcaption{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);transform:translateY(0px);-webkit-transition:-webkit-transform 0.4s, opacity 0.1s;-moz-transition:-moz-transform 0.4s, opacity 0.1s;transition:transform 0.4s, opacity 0.1s}

.contenu_site .circle{
	border-radius: 50%;
	background-color: #FFFFFF;
	min-width:50px;
	width:100px;
	height:100px;
	z-index: 2;
	overflow: hidden;
}

.contenu_site .how-it-works.row .col-2{
	align-self: stretch;
}
.contenu_site .how-it-works.row .col-2::after{
	content: "";
	position: absolute;
	border-left: 3px solid #ED8D8D;
	z-index: 1;
}
.contenu_site .how-it-works.row .col-2.bottom::after{
	height: 100%;
	left: 50%;
	top: 0%;
}
.contenu_site .how-it-works.row .col-2.full::after{
	height: 100%;
	left: calc(50% - 3px);
}
.contenu_site .how-it-works.row .col-2.top::after{
	height: 50%;
	left: 50%;
	top: 0;
}

.contenu_site .timeline div{
	padding: 0;
	height: 40px;
}
.contenu_site .timeline hr{
	border-top: 3px solid #ED8D8D;
	margin: 0;
	top: 17px;
	position: relative;
}
.contenu_site .timeline .col-2{
	display: flex;
	overflow: hidden;
}
.contenu_site .timeline .corner{
	border: 3px solid #ED8D8D;
	width: 100%;
	position: relative;
	border-radius: 15px;
}
.contenu_site .timeline .top-right{
	left: 50%;
	top: -50%;
}
.contenu_site .timeline .left-bottom{
	left: -50%;
	top: calc(50% - 3px);
}
.contenu_site .timeline .top-left{
	left: -50%;
	top: -50%;
}
.contenu_site .timeline .right-bottom{
	left: 50%;
	top: calc(50% - 3px);
}

.contenu_site .eventTime{
	display: flex;
}

.contenu_site .DayDigit{
	font-size: 27px;
	font-family: "Arial Black", Gadget, sans-serif;
	color: #4C4A4A;
}

.contenu_site .Day{
	font-size: 11px;
	margin-left: 5px;
	font-weight: bold;
	margin-top: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #4C4A4A;
}

.contenu_site .MonthYear{
	font-weight: 600;
	line-height: 10px;
	color: #9E9E9E;
	font-size: 9px;
}

/*  bhoechie tab */
.contenu_site div.bhoechie-tab-container{
  z-index: 0;
}
.contenu_site div.bhoechie-tab-menu div.list-group>a{
	text-decoration: none;
	color: #555555;
	padding:10px;
	margin:0px !important;
}
.contenu_site div.bhoechie-tab-menu div.list-group>a:first-child{
	border-top-right-radius: 0;
	-moz-border-top-right-radius: 0;
	border-top: 1px solid #DFDFDF;
}
.contenu_site div.bhoechie-tab-menu div.list-group>a:last-child{
  border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
}
.contenu_site div.bhoechie-tab-menu div.list-group>a.active{
	background-color: #D9EEF4;
	color: #0297C8;
	margin:0px !important;
	border: 1px solid transparent;
	border-top: 0px solid transparent;
}
.contenu_site div.bhoechie-tab-menu div.list-group>a.active:first-child{
	border-top: 1px solid #DFDFDF;
}
.contenu_site div.bhoechie-tab-menu div.list-group>a.active:after{
	content: '';
	position: absolute;
	left: 90%;
	top: 50%;
	margin-top: -13px;
	border-bottom: 13px solid transparent;
	border-top: 13px solid transparent;
	border-left: 10px solid #0297C8;
}

.contenu_site div.bhoechie-tab-content{
	background-color: #D9EEF4;
}

.contenu_site div.bhoechie-tab div.bhoechie-tab-content:not(.active){
  display: none;
}

.contenu_site .container_mega_menu{
	columns: 3;
	column-rule: 2px solid #FFFFFF;
	column-gap : 3rem;
}

@media screen and (max-width: 500px){
	.contenu_site .container_mega_menu{
		columns: 1;
	}
}

@media screen and (min-width: 641px) and (max-width: 1024px){
	.contenu_site .container_mega_menu{
		columns: 2;
	}
}

.contenu_site .container_mega_menu > *{
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid-column;
}

.contenu_site .container_mega_menu div.seconde_categorie>a{
	display: block;
	font-size: 13px;
	color: #555555;
	margin-top:5px;
	margin-bottom:5px;
}

.contenu_site .container_mega_menu div.seconde_categorie>a:first-child{
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: #001e69;
	margin-top:0px;
	margin-bottom:5px;
}

.contenu_site .container_mega_menu div.seconde_categorie>a:last-child{
	padding-bottom:20px;
}

.contenu_site .toggle.ios,.contenu_site .toggle-on.ios,.contenu_site .toggle-off.ios{ border-radius: 20px; }
.contenu_site .toggle.ios .toggle-handle{ border-radius: 20px; }

.contenu_site .loader-wrapper{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgb(36, 47, 63,0.7);
	display:none;
	justify-content: center;
	align-items: center;
	z-index: 15000;
}
.contenu_site .loader{
	display: inline-block;
	width: 30px;
	height: 30px;
	position: relative;
	border: 4px solid #Fff;
	animation: loader 2s infinite ease;
}
.contenu_site .loader-inner{
	vertical-align: top;
	display: inline-block;
	width: 100%;
	background-color: #fff;
	animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
	0% { transform: rotate(0deg);}
	25% { transform: rotate(180deg);}
	50% { transform: rotate(180deg);}
	75% { transform: rotate(360deg);}
	100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
	0% { height: 0%;}
	25% { height: 0%;}
	50% { height: 100%;}
	75% { height: 100%;}
	100% { height: 0%;}
}

.contenu_site .ahg_1{
	border-top-left-radius: 10px;
}
.contenu_site .ahg_2{
	border-top-left-radius: 20px;
}
.contenu_site .ahg_3{
	border-top-left-radius: 30px;
}
.contenu_site .ahg_4{
	border-top-left-radius: 40px;
}
.contenu_site .ahg_5{
	border-top-left-radius: 50px;
}
.contenu_site .ahg_6{
	border-top-left-radius: 60px;
}
.contenu_site .ahd_1{
	border-top-right-radius: 10px;
}
.contenu_site .ahd_2{
	border-top-right-radius: 20px;
}
.contenu_site .ahd_3{
	border-top-right-radius: 30px;
}
.contenu_site .ahd_4{
	border-top-right-radius: 40px;
}
.contenu_site .ahd_5{
	border-top-right-radius: 50px;
}
.contenu_site .ahd_6{
	border-top-right-radius: 60px;
}
.contenu_site .abg_1{
	border-bottom-left-radius: 10px;
}
.contenu_site .abg_2{
	border-bottom-left-radius: 20px;
}
.contenu_site .abg_3{
	border-bottom-left-radius: 30px;
}
.contenu_site .abg_4{
	border-bottom-left-radius: 40px;
}
.contenu_site .abg_5{
	border-bottom-left-radius: 50px;
}
.contenu_site .abg_6{
	border-bottom-left-radius: 60px;
}
.contenu_site .abd_1{
	border-bottom-right-radius: 10px;
}
.contenu_site .abd_2{
	border-bottom-right-radius: 20px;
}
.contenu_site .abd_3{
	border-bottom-right-radius: 30px;
}
.contenu_site .abd_4{
	border-bottom-right-radius: 40px;
}
.contenu_site .abd_5{
	border-bottom-right-radius: 50px;
}
.contenu_site .abd_6{
	border-bottom-right-radius: 60px;
}

@media screen and (max-width: 767px){
	.contenu_site .ahg_1{
		border-top-left-radius: 0px;
	}
	.contenu_site .ahg_2{
		border-top-left-radius: 0px;
	}
	.contenu_site .ahg_3{
		border-top-left-radius: 0px;
	}
	.contenu_site .ahg_4{
		border-top-left-radius: 0px;
	}
	.contenu_site .ahg_5{
		border-top-left-radius: 0px;
	}
	.contenu_site .ahg_6{
		border-top-left-radius: 0px;
	}
	.contenu_site .ahd_1{
		border-top-right-radius: 0px;
	}
	.contenu_site .ahd_2{
		border-top-right-radius: 0px;
	}
	.contenu_site .ahd_3{
		border-top-right-radius: 0px;
	}
	.contenu_site .ahd_4{
		border-top-right-radius: 0px;
	}
	.contenu_site .ahd_5{
		border-top-right-radius: 0px;
	}
	.contenu_site .ahd_6{
		border-top-right-radius: 0px;
	}
	.contenu_site .abg_1{
		border-bottom-left-radius: 0px;
	}
	.contenu_site .abg_2{
		border-bottom-left-radius: 0px;
	}
	.contenu_site .abg_3{
		border-bottom-left-radius: 0px;
	}
	.contenu_site .abg_4{
		border-bottom-left-radius: 0px;
	}
	.contenu_site .abg_5{
		border-bottom-left-radius: 0px;
	}
	.contenu_site .abg_6{
		border-bottom-left-radius: 0px;
	}
	.contenu_site .abd_1{
		border-bottom-right-radius: 0px;
	}
	.contenu_site .abd_2{
		border-bottom-right-radius: 0px;
	}
	.contenu_site .abd_3{
		border-bottom-right-radius: 0px;
	}
	.contenu_site .abd_4{
		border-bottom-right-radius: 0px;
	}
	.contenu_site .abd_5{
		border-bottom-right-radius: 0px;
	}
	.contenu_site .abd_6{
		border-bottom-right-radius: 0px;
	}
	
	.contenu_site .card{
		width: 100%!important;
	}
}

.contenu_site .div_bouton_partage_facebook_like{
	transition: all 0.5s ease-out;
    bottom: 165px;
    position: fixed;
    right: -96px;
    z-index : 500;
	opacity: 0.7;
	filter: alpha(opacity=70);
}

.contenu_site .div_bouton_partage_facebook_like:hover{
	transition: all 0.5s ease-out;
	right: -51px;
	opacity: 1;
	filter: alpha(opacity=1);
}

.contenu_site .div_bouton_partage_facebook_partage{
 	transition: all 0.5s ease-out;
	bottom: 130px;
    position: fixed;
    right: -76px;
    z-index : 500;
	opacity: 0.7;
	filter: alpha(opacity=70);
}

.contenu_site .div_bouton_partage_facebook_partage:hover{
	transition: all 0.5s ease-out;
	right: -20px;
	opacity: 1;
	filter: alpha(opacity=1);
}

.contenu_site .text_souligner:hover{
	text-decoration: underline; 
}

.contenu_site .btn-file{
  position: relative;
  overflow: hidden;
}
.contenu_site .btn-file input[type=file]{
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}
.contenu_site input[readonly]{
  background-color: white !important;
  cursor: text !important;
}

.contenu_site .carte_affichage_4{
	position: relative;
	transition:0.5s;
}

.contenu_site .carte_affichage_4 .carte_affichage_4_titre{
	position: absolute;
	bottom:25px;
	right: 25px;
	left: 0px;
	padding:14px 29px;
	background:#fff;
	font-size: 13px;
	color:#930C15;
	text-transform: uppercase;
	z-index: 9;
	transition:0.5s;
}

.contenu_site .carte_affichage_4 .carte_affichage_4_decouvre{
	position: absolute;
	bottom:25px;
	left: 0px;
	padding:14px 29px;
	background:#141414;
	font-size: 13px;
	color:#fff;
	text-transform: uppercase;
	opacity: 0;
	z-index: 9;
	transition:0.5s;
}

.contenu_site .carte_affichage_4:hover .carte_affichage_4_decouvre{
	opacity: 1;
}

.contenu_site .carte_affichage_4:hover .carte_affichage_4_titre{
	opacity: 0;
}

.contenu_site .carte_affichage_4:hover{
	transform:translateY(-10px);
}

.contenu_site .carte_affichage_4 a{
	position: absolute;
	width:100%;
	height: 100%;
	top:0;
	left:0;
	right:0;
	z-index: 99;
}

.contenu_site .carte_affichage_4:after{
	position: absolute;
	content:' ';
	width:100%;
	height: 100%;
	left:0;
	top:0;
	display: block;
	background-image:linear-gradient(to top right, rgba(255,255,255,0),rgba(147, 12, 21, 0.7));
	background-size: cover;
	background-position: center;
	z-index: 0;
	opacity: 0;
}

.contenu_site .carte_affichage_4:hover:after{
	opacity: 1;
	transition:0.5s;
}

.contenu_site .carte_affichage_5{
	position: relative;
	transition:0.5s;
}

.contenu_site .carte_affichage_5 .carte_affichage_5_titre{
	position: absolute;
	bottom:25px;
	right: 25px;
	left: 0px;
	padding:14px 29px;
	background:#fff;
	font-size: 13px;
	color:#930C15;
	text-transform: uppercase;
	z-index: 9;
	transition:0.5s;
}

.contenu_site .carte_affichage_5 .carte_affichage_5_decouvre{
	position: absolute;
	bottom:25px;
	left: 0px;
	padding:14px 29px;
	background:#141414;
	font-size: 13px;
	color:#fff;
	text-transform: uppercase;
	opacity: 0;
	z-index: 9;
	transition:0.5s;
}

.contenu_site .carte_affichage_5:hover .carte_affichage_5_decouvre{
	opacity: 1;
}

.contenu_site .carte_affichage_5:hover .carte_affichage_5_titre{
	opacity: 0;
}

.contenu_site .carte_affichage_5:hover{
	transform:translateY(-10px);
}

.contenu_site .carte_affichage_5:after{
	position: absolute;
	content:' ';
	width:100%;
	height: 100%;
	left:0;
	top:0;
	display: block;
	/*background-image:linear-gradient(to top right, rgba(255,255,255,0),rgba(147, 12, 21, 0.7));*/
	background-size: cover;
	background-position: center;
	z-index: 0;
	opacity: 0;
}

.contenu_site .carte_affichage_5:hover:after{
	opacity: 1;
	transition:0.5s;
}

.contenu_site .carte_affichage_6{
	position: relative;
	transition:0.5s;
}

.contenu_site .carte_affichage_6:hover{
	transform:translateY(-10px);
}

.contenu_site #slider-no-overlap .noUi-handle-lower{
    right: 0;
}
.contenu_site #slider-no-overlap .noUi-handle-upper{
    right: -34px;
}

.contenu_site .opacity1{
	background-color: #000;
}
.contenu_site .opacity1 img{
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.contenu_site .opacity1:hover img{
	opacity: .5;
}

/* CONTENEUR 16:9 */

.contenu_site .youtube-cookies-consent{
    position:relative;
    overflow:hidden;
    background:#e9ecef;
}

/* FOND FLOU */

.contenu_site .youtube-cookies-bg{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;

    background:
        url('https://media.datao.fr/Img/Fond_bloquage_youtube_1.jpg')
        center center / cover no-repeat;

    filter:blur(12px);
    transform:scale(1.08);
}

.contenu_site .youtube-cookies-overlay{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;

    background:rgba(255,255,255,.15);
}

/* CARTE */

.contenu_site .youtube-cookies-card{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:85%;
    max-width:950px;

    padding:20px;

    border-radius:40px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.78),
            rgba(255,255,255,.50)
        );

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.65);

    box-shadow:
        0 25px 60px rgba(0,0,0,.12),
        0 5px 15px rgba(0,0,0,.05);

    z-index:10;
}

/* ICONE */

.contenu_site .youtube-cookies-icon{
    text-align:center;
    margin-bottom:20px;
}

.contenu_site .youtube-cookies-icon svg{
    width:120px;
    height:auto;
}

/* TITRE */

.contenu_site .youtube-cookies-title{
    margin:0;

    text-align:center;

    color:#11294b;

    font-size:3rem;
    font-weight:800;
    line-height:1.1;
}

/* TRAIT */

.contenu_site .youtube-cookies-separator{
    width:120px;
    height:5px;

    margin:25px auto;

    background:#ff4d4d;
    border-radius:50px;
}

/* TEXTE */

.contenu_site .youtube-cookies-description{
    margin-bottom:30px;

    text-align:center;

    color:#223654;

    font-size:1.4rem;
    line-height:1.5;
}

/* INFO */

.contenu_site .youtube-cookies-info-box{
    display:flex;
    align-items:center;

    padding:20px;

    border-radius:20px;

    background:rgba(255,255,255,.85);

    box-shadow:0 5px 15px rgba(0,0,0,.05);
}

.contenu_site .youtube-cookies-info-icon{
    width:55px;
    height:55px;

    min-width:55px;

    margin-right:20px;

    border-radius:50%;

    background:#2f80ff;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:26px;
    font-weight:700;
}

.contenu_site .youtube-cookies-info-content{
    color:#223654;
    font-size:1.1rem;
    line-height:1.6;
}

/* TABLETTE */

@media (max-width:991.98px){

    .contenu_site .youtube-cookies-card{
        width:92%;
        padding: 10px;
    }

    .contenu_site .youtube-cookies-title{
        font-size:2rem;
    }

    .contenu_site .youtube-cookies-description{
        font-size:1.1rem;
    }

    .contenu_site .youtube-cookies-info-content{
        font-size:.95rem;
    }
	.contenu_site .youtube-cookies-separator{
    margin: 10px auto;
	}
	.contenu_site .youtube-cookies-info-box{
		padding: 10px;
	}
	.contenu_site .youtube-cookies-icon{
    margin-bottom: 10px;
}	
}

/* MOBILE */

@media (max-width:767.98px){

    .contenu_site .youtube-cookies-card{
        width:95%;
        padding:1.25rem;
        border-radius:20px;
		padding: 10px;
    }

    .contenu_site .youtube-cookies-icon svg{
        width:70px;
    }

    .contenu_site .youtube-cookies-title{
        font-size:1.3rem;
    }

    .contenu_site .youtube-cookies-separator{
        width:80px;
        margin:10px auto;
    }

    .contenu_site .youtube-cookies-description{
        font-size:.85rem;
        margin-bottom:15px;
    }

    .contenu_site .youtube-cookies-info-box{
        flex-direction:column;
        text-align:center;
		padding: 5px;
    }

    .contenu_site .youtube-cookies-info-icon{
        margin-right:0;
        margin-bottom:10px;
        width:45px;
        height:45px;
        min-width:45px;
        font-size:20px;
		display: none;
    }

    .contenu_site .youtube-cookies-info-content{
        font-size:.8rem;
    }
}
/* =========================
   Coloris : le selecteur (#clr-picker) est ajoute a <body> avec z-index 1000,
   donc il passait SOUS le panneau d'options (.panel-left_option_panel, z-index 1060).
   On le remonte au-dessus des overlays/panneaux de l'admin.
   (Selecteur double pour battre coloris.css quel que soit l'ordre de chargement.)
========================= */
.contenu_site .clr-picker.clr-picker{ z-index:10000; }

/* =========================
   Champs couleur Coloris : afficher uniquement une pastille cliquable, comme dans le
   generateur de carte. Coloris enveloppe chaque input dans un .clr-field dont le bouton
   affiche la couleur courante (background:currentColor). On fait de ce wrapper une tuile,
   le bouton la remplit, et l'input texte la recouvre en opacity:0 : il reste l'element
   clique (delegation Coloris) et focusable, mais n'est plus visible.
   (Selecteurs doubles .clr-field.clr-field pour battre coloris.css, charge apres ce fichier.)
========================= */
.contenu_site .clr-field.clr-field{
	display:inline-block;
	position:relative;
	width:46px;
	height:33px;
	border:0px;
	border-radius:0px;
	overflow:hidden;
	cursor:pointer;
	vertical-align:middle;
}
.contenu_site .clr-field.clr-field button{
	position:absolute;
	left:0;
	top:0;
	right:auto;
	width:100%;
	height:100%;
	margin:0;
	border:0;
	padding:0;
	transform:none;
	border-radius:0;
}
.contenu_site .clr-field.clr-field input{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	min-width:0;
	border:0;
	padding:0;
	margin:0;
	background:none;
	cursor:pointer;
	opacity:0;
}

/* Dans un input-group (normal ou -sm), la tuile Coloris s'etire a la hauteur du groupe
   (align-self:stretch = meme hauteur que les selects/boutons voisins) au lieu de sa
   hauteur fixe ; min-height en secours quand elle est seule dans le groupe. */
.contenu_site .input-group .clr-field.clr-field{
	height:auto;
	min-height:33px;
	align-self:stretch;
}

/* =========================
   Carrousel d'articles sans jQuery (remplace Owl Carousel).
   Le conteneur defile horizontalement (scroll-snap) ; chaque enfant direct est un item
   dont la largeur est posee par la variable --largeur_item_carrousel (calculee en JS
   selon les paliers responsive : <600px:1, <1000px:3, <1200px:5, sinon N configurable).
   gap:30px = l'ancien margin:30 d'Owl. La barre de defilement est masquee.
========================= */
.contenu_site .carrousel_article_vanilla{
	display:flex;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	gap:30px;
	scrollbar-width:none;
}
.contenu_site .carrousel_article_vanilla::-webkit-scrollbar{
	display:none;
}
.contenu_site .carrousel_article_vanilla > *{
	flex:0 0 var(--largeur_item_carrousel);
	max-width:var(--largeur_item_carrousel);
	scroll-snap-align:start;
}

/* =========================
   Comparateur d'images avant/apres sans jQuery (remplace TwentyTwenty).
   L'image "apres" recouvre l'image "avant" et est rognee par clip-path selon la variable
   --pos_comparateur (posee a l'init, mise a jour au glisser de la poignee). Le glisser ne se
   fait QUE par la poignee (equivalent move_with_handle_only:true) ; les labels apparaissent
   au survol (equivalent no_overlay:false). Variante verticale : classe comparateur_vertical.
========================= */
.contenu_site .comparateur_avant_apres{
	position:relative;
	overflow:hidden;
}
.contenu_site .comparateur_avant_apres img{
	display:block;
	width:100%;
	-webkit-user-select:none;
	user-select:none;
	pointer-events:none;
}
.contenu_site .comparateur_avant_apres .comparateur_image_apres{
	position:absolute;
	top:0;
	left:0;
	clip-path:inset(0 0 0 var(--pos_comparateur));
}
.contenu_site .comparateur_avant_apres.comparateur_vertical .comparateur_image_apres{
	clip-path:inset(var(--pos_comparateur) 0 0 0);
}
.contenu_site .comparateur_poignee{
	position:absolute;
	top:0;
	bottom:0;
	left:var(--pos_comparateur);
	width:4px;
	margin-left:-2px;
	background:#ffffff;
	box-shadow:0 0 5px rgba(0,0,0,.5);
	cursor:ew-resize;
	touch-action:none;
}
.contenu_site .comparateur_avant_apres.comparateur_vertical .comparateur_poignee{
	top:var(--pos_comparateur);
	left:0;
	right:0;
	bottom:auto;
	width:auto;
	height:4px;
	margin-left:0;
	margin-top:-2px;
	cursor:ns-resize;
}
.contenu_site .comparateur_poignee:after{
	content:"\2194";
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:38px;
	height:38px;
	line-height:38px;
	text-align:center;
	border-radius:50%;
	background:#ffffff;
	color:#555555;
	font-size:17px;
	box-shadow:0 0 5px rgba(0,0,0,.4);
}
.contenu_site .comparateur_avant_apres.comparateur_vertical .comparateur_poignee:after{
	content:"\2195";
}
.contenu_site .comparateur_label{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	padding:4px 10px;
	background:rgba(0,0,0,.55);
	color:#ffffff;
	border-radius:3px;
	font-size:13px;
	opacity:0;
	transition:opacity .3s;
	pointer-events:none;
}
.contenu_site .comparateur_label_avant{ left:10px; }
.contenu_site .comparateur_label_apres{ right:10px; }
.contenu_site .comparateur_avant_apres:hover .comparateur_label{ opacity:1; }
.contenu_site .comparateur_avant_apres.comparateur_vertical .comparateur_label{
	left:50%;
	right:auto;
	transform:translateX(-50%);
	top:auto;
}
.contenu_site .comparateur_avant_apres.comparateur_vertical .comparateur_label_avant{ top:10px; }
.contenu_site .comparateur_avant_apres.comparateur_vertical .comparateur_label_apres{ bottom:10px; }

/* =========================
   Page de connexion de l'administration (index.php) : ecran scinde.
   Panneau de marque a gauche (degrade de la charte), formulaire a droite.
   Prefixe connexion_ ; aucun impact hors de la page d'identification.
========================= */
.contenu_site .connexion_scinde{
	display:flex;
	width:100%;
	height:100vh;
	min-height:560px;
	text-align:left;
}
.contenu_site .connexion_panneau{
	flex:1.15;
	position:relative;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:0 6%;
	color:#FFFFFF;
	background:linear-gradient(140deg,#02243f 0%,#0a4d6e 55%,#0f5e6b 100%);
}
.contenu_site .connexion_panneau:before{
	content:'';
	position:absolute;
	width:420px;
	height:420px;
	border-radius:50%;
	background:rgba(255,255,255,.07);
	top:-140px;
	right:-120px;
}
.contenu_site .connexion_panneau:after{
	content:'';
	position:absolute;
	width:300px;
	height:300px;
	border-radius:50%;
	background:rgba(255,255,255,.06);
	bottom:-100px;
	left:-80px;
}
.contenu_site .connexion_lien_site{
	position:absolute;
	top:18px;
	left:6%;
	color:#FFFFFF;
	font-size:14px;
	z-index:2;
}
.contenu_site .connexion_lien_site:hover{
	color:#FFFFFF;
	text-decoration:underline;
}
.contenu_site .connexion_panneau_contenu{
	position:relative;
	z-index:2;
}
.contenu_site .connexion_logo{
	width:58px;
	height:58px;
	border-radius:16px;
	background:rgba(255,255,255,.15);
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:800;
	font-size:26px;
	margin-bottom:22px;
}
.contenu_site .connexion_panneau_contenu h1{
	font-size: 1.75rem;
	line-height:1.25;
	margin-bottom:12px;
	font-weight:800;
	color:#FFFFFF;
}
.contenu_site .connexion_panneau_contenu p{
	font-size:14px;
	opacity:.85;
	max-width:380px;
	line-height:1.55;
}
.contenu_site .connexion_copyright{
	position:absolute;
	bottom:16px;
	left:6%;
	font-size:12px;
	color:rgba(255,255,255,.65);
	z-index:2;
}
.contenu_site .connexion_formulaire{
	flex:1;
	background:#FFFFFF;
	display:flex;
	align-items:center;
	justify-content:center;
}
.contenu_site .connexion_boite{
	width:78%;
	max-width:380px;
}
.contenu_site .connexion_boite h2{
	font-size: 1.375rem;
	margin-bottom:4px;
}
.contenu_site .connexion_sous_titre{
	color:#8a92a3;
	font-size:14px;
	margin-bottom:24px;
}
.contenu_site .connexion_champ{
	position:relative;
	margin-bottom:14px;
}
.contenu_site .connexion_icone{
	position:absolute;
	left:14px;
	top:20px; /* v186 : ancre FIXE au centre du CHAMP (portage de la correction v129 de l administration) - le 50% du conteneur descendait des que invalid-feedback l agrandissait */
	transform:translateY(-50%);
	color:#9aa2b1;
	font-size:14px;
}
.contenu_site .connexion_champ input.form-control{
	height:auto;
	padding:11px 42px 11px 40px;
	border:1.5px solid #e3e7ee;
	border-radius:10px;
	background-color:#fafbfd;
}
/* v186 : le rond d erreur de Bootstrap chevauchait l oeil du mot de passe (constat DATAO) -
   portage de la correction v129 de l administration : lisere rouge + message sous le champ
   suffisent, l icone integree est retiree. */
.contenu_site .connexion_champ input.form-control.is-invalid{
	background-image: none;
}
/* v186 : le select (civilite) partage le gabarit des champs de connexion - pas d icone a
   gauche, donc padding normal de ce cote ; la fleche du select reste geree par Bootstrap. */
.contenu_site .connexion_champ select.form-select{
	height: auto;
	padding: 11px 40px 11px 14px;
	border: 1.5px solid #e3e7ee;
	border-radius: 10px;
	background-color: #fafbfd;
}
.contenu_site .connexion_champ select.form-select:focus{
	border-color: #0077b6;
	box-shadow: 0 0 0 3px rgba(0,119,182,.12);
	background-color: #FFFFFF;
}
/* v186 : champ groupe (civilite + nom) - l input n a pas d icone a sa gauche, le retrait
   prevu pour l icone est donc annule ; le rond d erreur de Bootstrap est aussi retire du
   select (meme raison que pour les champs : lisere rouge + message suffisent). */
.contenu_site .connexion_champ .input-group input.form-control{
	padding-left: 14px;
}
.contenu_site .connexion_champ select.form-select.is-invalid{
	background-image: none;
}
.contenu_site .connexion_champ input.form-control:focus{
	border-color:#0077b6;
	box-shadow:0 0 0 3px rgba(0,119,182,.12);
	background-color:#FFFFFF;
}
.contenu_site .connexion_oeil{
	position:absolute;
	right:14px;
	top:20px; /* v186 : ancre FIXE au centre du CHAMP (portage de la correction v129 de l administration) - le 50% du conteneur descendait des que invalid-feedback l agrandissait */
	transform:translateY(-50%);
	color:#9aa2b1;
	cursor:pointer;
	font-size:14px;
}
.contenu_site .connexion_souvenir{
	margin:4px 0 18px;
	font-size:13.5px;
}
.contenu_site .connexion_bouton{
	padding:12px;
	border:none;
	border-radius:10px;
	background:linear-gradient(120deg,#0a4d6e,#0f5e6b);
	color:#FFFFFF;
	font-weight:700;
	box-shadow:0 6px 18px rgba(0,119,182,.35);
}
.contenu_site .connexion_bouton:hover,.contenu_site .connexion_bouton:focus{
	background:linear-gradient(120deg,#02243f,#0a4d6e);
	color:#FFFFFF;
}
.contenu_site .connexion_liens{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:6px;
	margin-top:16px;
	font-size:13px;
}
.contenu_site .connexion_liens a{
	color:#0077b6;
	cursor:pointer;
}
.contenu_site .connexion_resultat{
	min-height:67px;
	margin-top:12px;
}
@media (max-width: 850px){
	.contenu_site .connexion_scinde{
		flex-direction:column;
		height:auto;
		min-height:100vh;
	}
	.contenu_site .connexion_panneau{
		flex:none;
		padding:70px 8% 60px;
	}
	.contenu_site .connexion_formulaire{
		flex:none;
		padding:34px 0 60px;
	}
}
/* div_principale porte un padding-top:80px pour degager la navbar fixe APRES connexion ;
   l'ecran de connexion (plein ecran) le neutralise pour rester colle en haut. */
.contenu_site .connexion_scinde{
	margin-top:-80px;
}

/* Effet du panneau de connexion : le degrade "respire" lentement (deplacement du fond
   agrandi) et les deux halos flottent en douceur, a des rythmes legerement differents
   pour eviter tout effet mecanique. Purement decoratif, 100% CSS. Desactive pour les
   utilisateurs qui preferent reduire les animations (prefers-reduced-motion). */
.contenu_site .connexion_panneau{
	background-size:160% 160%;
	animation:connexion_degrade_respiration 16s ease-in-out infinite alternate;
}
.contenu_site .connexion_panneau:before{
	animation:connexion_halo_flottant 11s ease-in-out infinite alternate;
}
.contenu_site .connexion_panneau:after{
	animation:connexion_halo_flottant 14s ease-in-out infinite alternate-reverse;
}
@keyframes connexion_degrade_respiration{
	0%{background-position:0% 0%;}
	100%{background-position:100% 100%;}
}
@keyframes connexion_halo_flottant{
	0%{transform:translate(0,0) scale(1);}
	100%{transform:translate(26px,18px) scale(1.12);}
}
@media (prefers-reduced-motion: reduce){
	.contenu_site .connexion_panneau,.contenu_site .connexion_panneau:before,.contenu_site .connexion_panneau:after{
		animation:none;
	}
}

/* =========================
   Listes triables (SortableJS) : indication visuelle du glisser-deposer.
   La classe liste_triable (ou liste_triable_avec_poignee quand seule une poignee
   permet le glisser) est posee par le script d initialisation de chaque ecran.
   Curseur grab sur les elements deplacables, grabbing pendant le deplacement,
   element fantome attenue a l emplacement de depot.
========================= */
.contenu_site .liste_triable > *{
	cursor:grab;
}
.contenu_site .liste_triable_avec_poignee .header-liste-visuel{
	cursor:grab;
}
.contenu_site .sortable-chosen,.contenu_site .sortable-fallback,body.contenu_site.dragging_en_cours{
	cursor:grabbing !important;
}
.contenu_site .sortable-ghost{
	opacity:.45;
	background-color:#e8f4fb;
}
/* Equivalent du disableSelection() de jQuery UI : en mode forceFallback (evenements souris),
   le navigateur selectionnerait le texte pendant le glisser. On neutralise la selection sur
   les listes triables (comportement identique a l ancien systeme). */
.contenu_site .liste_triable,.contenu_site .liste_triable_avec_poignee{
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

/* Generateur de page : pendant un glisser SortableJS (classe posee sur body par
   initialiser_tri_generateur_page, retiree a la fin), la selection de texte est
   neutralisee partout — en mode forceFallback le navigateur etendrait sinon la
   selection sous le curseur. Hors glisser, la selection reste possible. */
body.contenu_site.tri_en_cours,body.contenu_site.tri_en_cours *{
	-webkit-user-select:none !important;
	-moz-user-select:none !important;
	-ms-user-select:none !important;
	user-select:none !important;
}

/* =========================
   Tableaux vanilla (remplace DataTables) : barre haute (taille + recherche),
   indicateurs de tri sur les en-tetes, barre basse (info + pagination),
   variante calendrier a corps defilant et en-tete colle.
========================= */
.contenu_site .tableau_vanilla_haut{
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:8px;
}
.contenu_site .tableau_vanilla_haut label{
	margin-bottom:0;
	font-weight:normal;
}
.contenu_site .tableau_vanilla_bas{
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	margin-top:8px;
}
.contenu_site .tableau_vanilla_info{
	color:#6c757d;
	font-size:13px;
}
.contenu_site .tableau_vanilla_page{
	border:1px solid #dee2e6;
	background:#FFFFFF;
	color:#373737;
	padding:4px 10px;
	margin-left:-1px;
	cursor:pointer;
	font-size:13px;
}
.contenu_site .tableau_vanilla_page:hover:not(:disabled){
	background:#e9ecef;
}
.contenu_site .tableau_vanilla_page.actif{
	background:#0077b6;
	border-color:#0077b6;
	color:#FFFFFF;
	font-weight:600;
}
.contenu_site .tableau_vanilla_page:disabled{
	color:#adb5bd;
	cursor:default;
}
.contenu_site th.tri_possible{
	cursor:pointer;
	position:relative;
	padding-right:20px !important;
	-webkit-user-select:none;
	user-select:none;
}
.contenu_site th.tri_possible:after{
	content:"\21C5";
	position:absolute;
	right:6px;
	opacity:.35;
}
.contenu_site th.tri_actif_asc:after{
	content:"\25B2";
	opacity:.9;
}
.contenu_site th.tri_actif_desc:after{
	content:"\25BC";
	opacity:.9;
}
.contenu_site .tableau_vanilla_defilant{
	max-height:65vh;
	overflow:auto;
}
.contenu_site .tableau_vanilla_defilant thead th{
	position:sticky;
	top:0;
	background:#FFFFFF;
	z-index:2;
	box-shadow:0 1px 0 #dee2e6;
}

/* =========================
   Selecteur multiple a cases a cocher (remplace bootstrap-multiselect).
   Le bouton reflete la selection ; le menu deroulant liste les options avec
   cases a cocher (+ lignes optionnelles tout selectionner / tout deselectionner).
========================= */
.contenu_site .ms_vanilla{
	position:relative;
	display:inline-block;
	text-align:left;
}
.contenu_site .ms_vanilla_bouton{
	color:#212529;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:8px;
	width:100%;
	border:1px solid #ced4da;
	background-color:#FFFFFF;
	text-align:left;
}
.contenu_site .ms_vanilla_libelle{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.contenu_site .ms_vanilla_bouton:hover,
.contenu_site .ms_vanilla_bouton:focus,
.contenu_site .ms_vanilla_bouton:active{
	background-color:#FFFFFF;
	color:#212529;
}
.contenu_site .ms_vanilla_caret{
	flex:none;
	opacity:.6;
}
.contenu_site .ms_vanilla_menu{
	color:#212529;
	position:absolute;
	top:100%;
	left:0;
	min-width:100%;
	z-index:1050;
	background:#FFFFFF;
	border:1px solid rgba(0,0,0,.15);
	border-radius:4px;
	box-shadow:0 6px 12px rgba(0,0,0,.175);
	overflow-y:auto;
	padding:4px 0;
	margin-top:2px;
}
.contenu_site .ms_vanilla_ligne{
	display:flex;
	align-items:center;
	gap:8px;
	padding:4px 12px;
	margin:0;
	cursor:pointer;
	font-weight:normal;
	white-space:nowrap;
}
.contenu_site .ms_vanilla_ligne:hover{
	background:#f0f4f8;
}
.contenu_site .ms_vanilla_ligne.active{
	background:#e8f4fb;
}
.contenu_site .ms_vanilla_ligne input{
	flex:none;
	margin:0;
}
.contenu_site .ms_vanilla_tout{
	font-weight:600;
}
.contenu_site .ms_vanilla_reinit{
	display:block;
	width:100%;
	border:0;
	background:none;
	text-align:left;
	padding:4px 12px;
	cursor:pointer;
	color:#0077b6;
}
.contenu_site .ms_vanilla_reinit:hover{
	background:#f0f4f8;
}
.contenu_site .ms_vanilla_separateur{
	border-top:1px solid #e9ecef;
	margin:4px 0;
}

/* =========================
   Interactions vanilla (remplace jQuery UI) : menu d autocompletion, poignee de
   redimensionnement a grille (planning), redimensionnement natif des modales,
   curseur de deplacement des modales.
========================= */
.contenu_site .autocompletion_menu{
	position:absolute;
	z-index:11000;
	background:#FFFFFF;
	border:1px solid rgba(0,0,0,.15);
	border-radius:4px;
	box-shadow:0 6px 12px rgba(0,0,0,.175);
	max-height:280px;
	overflow-y:auto;
	padding:4px 0;
}
.contenu_site .autocompletion_element{
	padding:5px 12px;
	cursor:pointer;
	white-space:nowrap;
}
.contenu_site .autocompletion_element:hover,.contenu_site .autocompletion_element.actif{
	background:#e8f4fb;
}
.contenu_site .redimensionnable_natif{
	resize:both;
	overflow:auto;
}
.contenu_site .redimensionnable_poignee{
	position:absolute;
	right:0;
	bottom:0;
	width:14px;
	height:14px;
	cursor:nwse-resize;
	background:linear-gradient(135deg, transparent 50%, rgba(0,0,0,.35) 50%);
	border-bottom-right-radius:3px;
	touch-action:none;
	z-index:5;
}
.contenu_site .deplacable_poignee{
	cursor:move;
	touch-action:none;
}

/* =========================
   Selecteur d indicatifs telephoniques a drapeaux (remplace ms-Dropdown).
========================= */
.contenu_site .indicatif_vanilla{
	position:relative;
	display:inline-block;
	vertical-align:middle;
}
.contenu_site .indicatif_vanilla_bouton{
	display:flex;
	align-items:center;
	gap:6px;
	border:1px solid #ced4da;
	border-radius:4px;
	background:#FFFFFF;
	padding:5px 8px;
	cursor:pointer;
	min-width:64px;
}
.contenu_site .indicatif_vanilla_bouton img{
	width:22px;
	height:auto;
	display:block;
}
.contenu_site .indicatif_vanilla_caret{
	opacity:.6;
	margin-left:auto;
}
.contenu_site .indicatif_vanilla_menu{
	position:absolute;
	top:100%;
	left:0;
	z-index:1050;
	background:#FFFFFF;
	border:1px solid rgba(0,0,0,.15);
	border-radius:4px;
	box-shadow:0 6px 12px rgba(0,0,0,.175);
	max-height:260px;
	overflow-y:auto;
	min-width:100%;
	padding:4px 0;
	margin-top:2px;
}
.contenu_site .indicatif_vanilla_ligne{
	display:flex;
	align-items:center;
	gap:8px;
	padding:4px 10px;
	cursor:pointer;
	white-space:nowrap;
}
.contenu_site .indicatif_vanilla_ligne:hover{
	background:#e8f4fb;
}
.contenu_site .indicatif_vanilla_ligne img{
	width:22px;
	height:auto;
}

/* ============================================================================
   v19 - Interrupteurs Oui/Non vanilla (remplace bootstrap-toggle v2.2.0).
   CSS porte du plugin (classes conservees : .toggle, .toggle-group, .toggle-on,
   .toggle-off, .toggle-handle) — les styles custom .toggle.ios / .content_overlaid
   existants continuent de s'appliquer.
   ============================================================================ */
.contenu_site .checkbox label .toggle,.contenu_site .checkbox-inline .toggle{
	margin-left:-20px;
	margin-right:5px;
}
.contenu_site .toggle{
	position:relative;
	overflow:hidden;
}
.contenu_site .toggle input[type="checkbox"]{
	display:none;
}
.contenu_site .toggle-group{
	position:absolute;
	width:200%;
	top:0;
	bottom:0;
	left:0;
	transition:left 0.35s;
	-webkit-transition:left 0.35s;
	-moz-user-select:none;
	-webkit-user-select:none;
}
.contenu_site .toggle.off .toggle-group{
	left:-100%;
}
.contenu_site .toggle-on{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:50%;
	margin:0;
	border:0;
	border-radius:0;
}
.contenu_site .toggle-off{
	position:absolute;
	top:0;
	bottom:0;
	left:50%;
	right:0;
	margin:0;
	border:0;
	border-radius:0;
}
.contenu_site .toggle-handle{
	position:relative;
	margin:0 auto;
	padding-top:0px;
	padding-bottom:0px;
	height:100%;
	width:0px;
	border-width:0 1px;
}
.contenu_site .toggle.btn{ min-width:59px; min-height:36px; }
.contenu_site .toggle-on.btn{ padding-right:24px; }
.contenu_site .toggle-off.btn{ padding-left:24px; }
.contenu_site .toggle.btn-lg{ min-width:79px; min-height:45px; }
.contenu_site .toggle-on.btn-lg{ padding-right:31px; }
.contenu_site .toggle-off.btn-lg{ padding-left:31px; }
.contenu_site .toggle-handle.btn-lg{ width:40px; }
.contenu_site .toggle.btn-sm{ min-width:50px; min-height:30px; }
.contenu_site .toggle-on.btn-sm{ padding-right:20px; }
.contenu_site .toggle-off.btn-sm{ padding-left:20px; }
.contenu_site .toggle.btn-xs{ min-width:35px; min-height:22px; }
.contenu_site .toggle-on.btn-xs{ padding-right:12px; }
.contenu_site .toggle-off.btn-xs{ padding-left:12px; }

/* ============================================================================
   v22 - Compatibilite Bootstrap 4 -> 5 : regles portees telles quelles depuis
   bootstrap.css 4.6.0 pour les composants RETIRES de BS5 que le CMS continue
   d'utiliser sans changement de markup : input-group-prepend/append,
   form-group / form-row / form-inline, bouton .close des modales.
   (embed-responsive RETIRE en v153 : contenu BDD, generateurs et markup
   convertis en .ratio natif BS5.) Extraction mecanique (media queries comprises).
   ============================================================================ */
/* BS4 donnait position:relative aux colonnes ; BS5 l'a retire. Les elements
   positionnes en absolu dans les colonnes (barres d'outils du generateur de
   page id_div_outils_insertion_*, ancres...) en dependent. Parite restauree. */
.contenu_site .col, .contenu_site [class*="col-"]{
	position: relative;
}
.contenu_site .form-group{
  margin-bottom: 1rem;
}
.contenu_site .form-inline{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-align: center;
  align-items: center;
}
.contenu_site .form-inline .form-check{
  width: 100%;
}
@media (min-width: 576px) {
.contenu_site .form-inline label{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
  }
.contenu_site .form-inline .form-group{
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
  }
.contenu_site .form-inline .form-control{
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
.contenu_site .form-inline .form-control-plaintext{
    display: inline-block;
  }
.contenu_site .form-inline .input-group{
    width: auto;
  }
.contenu_site .form-inline .form-check{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }
.contenu_site .form-inline .form-check-input{
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
  }
}
.contenu_site .input-group-lg > .form-control{
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}
.contenu_site .input-group-sm > .form-control{
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}
.contenu_site .alert-dismissible .close{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.75rem 1.25rem;
  color: inherit;
}
.contenu_site .close{
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}
.contenu_site .close:hover{
  color: #000;
  text-decoration: none;
}
.contenu_site .close:not(:disabled):not(.disabled):hover,.contenu_site .close:not(:disabled):not(.disabled):focus{
  opacity: .75;
}
.contenu_site button.close{
  padding: 0;
  background-color: transparent;
  border: 0;
}
.contenu_site a.close.disabled{
  pointer-events: none;
}

/* v22 - Ajustement : le selecteur de largeur de colonne du generateur de page
   (select[id^=id_select_], ~240 exemplaires aussi dans le contenu stocke) etait
   en custom-select (BS4, padding-right 1.75rem) ; le .form-select de BS5 passe a
   2.25rem pour sa fleche, ce qui masquait le chiffre sous max-width:60px. */
.contenu_site select[id^="id_select_"].form-select{
	padding-right: 1.5rem;
	padding-left: 0.5rem;
	background-position: right 0.25rem center;
}

/* v22 - Empilements sous Bootstrap 5 (correctifs apres tests am_page/calendrier) :
   1) Les modales passent AU-DESSUS des panneaux d'options de l'admin
      (.panel-left_option_panel est a 1060 ; BS5 : modale 1055, fond 1050).
   2) Quand un menu deroulant d'une barre d'outils du generateur est ouvert, la
      ligne/colonne hote est remontee au-dessus des lignes suivantes (l'editeur
      pose des z-index inline 100-120 sur id_row_sN et id_col_N, d'ou !important). */
.contenu_site .modal{ --bs-modal-zindex: 1070; z-index: 1070 !important; }
.contenu_site .modal-backdrop{ --bs-backdrop-zindex: 1065; z-index: 1065 !important; }
.contenu_site [id^="id_row_s"]:has(.dropdown-menu.show),.contenu_site [id^="id_div_col_"]:has(.dropdown-menu.show){
	z-index: 125 !important;
}

/* v22 - Parite BS4 du reboot BS5 (correctifs cote site) :
   1) BS5 souligne les liens par defaut ; BS4 ne le faisait qu'au survol.
   2) BS5 impose scroll-behavior:smooth au :root -> les defilements animes en jQuery
      (back-top, ancres du mini menu) devenaient poussifs ; retour a l'instantane. */
.contenu_site a{ text-decoration: none; }
.contenu_site a:hover{ text-decoration: underline; }
/* ... mais BS4 exemptait les liens SANS href (navigation onclick, menus de l admin) :
   jamais soulignes, meme au survol. Parite restauree. */
.contenu_site a:not([href]):not([tabindex]),.contenu_site a:not([href]):not([tabindex]):hover{ text-decoration: none; }
:root{ scroll-behavior: auto; }

/* v22 puis v159 - Hauteur des champs de saisie : le gabarit impose de 47px (restaure a
   l epoque de la bascule BS4 -> BS5) est RETIRE sur demande DATAO. Les champs reprennent
   la hauteur naturelle de Bootstrap 5. La regle couvrait aussi .form-select, qui suit. */
/* ... sauf les variantes compactes (-sm : moteur de tableaux, barres d'outils) et le
   selecteur de largeur du generateur, qui gardent leur hauteur Bootstrap. */
.contenu_site .form-control-sm,.contenu_site .form-select-sm,.contenu_site select[id^="id_select_"].form-select{
	min-height: calc(1.5em + 0.5rem + 2px);
}

/* v24 - Logo Datao (medaillon rond) sur la page de connexion de l'administration :
   remplace la tuile lettre "D" (maquette A validee). L'ancienne classe
   .connexion_logo est conservee (aucune regle supprimee). */
.contenu_site .connexion_logo_image{
	width: 132px;
	height: 132px;
	border-radius: 50%;
	margin-bottom: 22px;
	box-shadow: 0 0 0 8px rgba(255,255,255,.14), 0 18px 40px rgba(2,30,60,.45);
}

/* v27 - Fleche des <select class="form-control"> : BS5 pose appearance:none sur
   .form-control (BS4 ne le faisait pas) et reserve sa fleche SVG a .form-select ;
   les ~640 selects historiques en form-control perdaient donc leur fleche native.
   Parite BS4 restauree : apparence native pour les select en form-control. */
.contenu_site select.form-control{
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
}

/* v28 - Graisse des <small> : BS4 posait font-weight:400 sur small/.small, BS5 ne
   definit plus que la taille -> dans un contexte gras (th, h6>b...), le small
   heritait du gras. Parite BS4 sur la GRAISSE uniquement (la taille garde le
   comportement BS5, decision utilisateur). */
.contenu_site small,.contenu_site .small{
	font-weight: 400;
}

/* v31 - Selects de civilite (id commencant par "civilite", 17 ids / 36 selects) :
   largeur FIXE de 100px. Depuis le de-wrapping v30 ils sont enfants directs de
   .input-group, ou la regle BS5 .input-group>.form-control{flex:1 1 auto} les
   faisait grandir — le flex-grow prime sur les width inline, d'ou l'echec des
   tentatives manuelles. flex:0 0 100px (plus specifique) reprend la main. */
.contenu_site select[id^="civilite"]{
	width: 100px;
}
.contenu_site .input-group > select[id^="civilite"]{
	flex: 0 0 100px;
	max-width: 100px;
}

/* v31 (suite) - Meme traitement pour les selects de forme juridique (2 ids / 6
   selects), et hauteur alignee sur le standard 47px pour le bouton du selecteur
   d'indicatifs a drapeaux (v13). */
.contenu_site select[id^="forme_juridique"]{
	width: 100px;
}
.contenu_site .input-group > select[id^="forme_juridique"]{
	flex: 0 0 100px;
	max-width: 100px;
}
/* v197 : hauteur RETIREE. Le 47px datait des ecrans dont les champs faisaient 47px
   (form-control p-4). Sur le formulaire d inscription les champs font 35,75px et le
   bouton depassait de 11,2px - mesure du 06/08/2026. Dans un input-group les enfants
   s etirent d eux-memes : height auto suit la hauteur du champ, quelle qu elle soit. */
.contenu_site .indicatif_vanilla_bouton{
	height: auto;
}

/* ============================================================================
   v32 - Styles d'impression : BS5 a SUPPRIME le bloc @media print que BS4
   embarquait (mise en page bureau forcee via @page a3 + min-width 992px,
   navbar masquee, bordures de tableaux, sauts de page...). Bloc BS4 4.6.0
   restaure tel quel — le rendu papier redevient celui d'avant migration.
   ============================================================================ */
@media print {
  .contenu_site *,.contenu_site *::before,.contenu_site *::after{
    text-shadow: none !important;
    box-shadow: none !important;
  }
  .contenu_site a:not(.btn){
    text-decoration: underline;
  }
  .contenu_site abbr[title]::after{
    content: " (" attr(title) ")";
  }
  .contenu_site pre{
    white-space: pre-wrap !important;
  }
  .contenu_site pre,.contenu_site blockquote{
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }
  .contenu_site thead{
    display: table-header-group;
  }
  .contenu_site tr,.contenu_site img{
    page-break-inside: avoid;
  }
  .contenu_site p,.contenu_site h2,.contenu_site h3{
    orphans: 3;
    widows: 3;
  }
  .contenu_site h2,.contenu_site h3{
    page-break-after: avoid;
  }
  @page {
    size: a3;
  }
  body.contenu_site{
    min-width: 992px !important;
  }
  .contenu_site .container{
    min-width: 992px !important;
  }
  .contenu_site .navbar{
    display: none;
  }
  .contenu_site .badge{
    border: 1px solid #000;
  }
  .contenu_site .table{
    border-collapse: collapse !important;
  }
  .contenu_site .table td,.contenu_site .table th{
    background-color: #fff !important;
  }
  .contenu_site .table-bordered th,.contenu_site .table-bordered td{
    border: 1px solid #dee2e6 !important;
  }
  .contenu_site .table-dark{
    color: inherit;
  }
  .contenu_site .table-dark th,.contenu_site .table-dark td,.contenu_site .table-dark thead th,.contenu_site .table-dark tbody + tbody{
    border-color: #dee2e6;
  }
  .contenu_site .table .thead-dark th{
    color: inherit;
    border-color: #dee2e6;
  }
}

/* v54 - Diaporamas (moteur bootstrap) : BS4 posait list-style:none sur
   .carousel-indicators, BS5 l'a retire (ses indicateurs sont des <button>
   dans un <div>). Nos indicateurs <ol>/<li> (apercu admin, generateur du
   site, HTML stocke en BDD) affichaient donc leurs numeros de liste. */
.contenu_site .carousel-indicators{
	list-style: none;
}

/* v54 - Back-top du SITE aligne sur celui de l'administration (anneau v35 de
   css_admin, valeurs identiques) : bloc scope sur la classe back_top_anneau
   portee par le markup de header.php (site). INERTE cote admin : son markup
   (index.php) n'a pas la classe et reste style par css_admin. Les pages a
   l'ancien markup (inscription*) ne sont pas touchees non plus. */
.contenu_site #back-top.back_top_anneau{
	bottom: 24px;
	right: 20px;
	display: block;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
	visibility: hidden;
	pointer-events: none;
}
.contenu_site #back-top.back_top_anneau.visible{
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
	pointer-events: auto;
}
.contenu_site #back-top.back_top_anneau a{
	position: relative;
	width: 52px;
	height: 52px;
	background: linear-gradient(140deg,#023e8a 0%,#0077b6 55%,#00b4d8 100%);
	color: #FFFFFF;
	font-size: 16px;
	box-shadow: 0 6px 18px rgba(0,119,182,.45);
	transition: transform .15s ease, box-shadow .15s ease;
}
.contenu_site #back-top.back_top_anneau a:hover{
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0,119,182,.55);
	color: #FFFFFF;
}
.contenu_site #back-top.back_top_anneau a:focus-visible{
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #023e8a;
}
.contenu_site #back-top.back_top_anneau svg{
	position: absolute;
	top: -4px;
	left: -4px;
	width: 60px;
	height: 60px;
	transform: rotate(-90deg);
	pointer-events: none;
}
.contenu_site #back-top.back_top_anneau circle{
	fill: none;
	stroke: #FFCC33;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 163.4;
	stroke-dashoffset: 163.4;
}

/* v56 - RANGEE ENCADREE (maquette validee 14/07) : dans une section PLEINE
   LARGEUR, une rangee portant cette classe reste a la largeur d'un .container
   (memes breakpoints Bootstrap), centree - effet bandeau plein ecran / contenu
   boxe. Sans effet dans une section normale (largeurs identiques au conteneur).
   Classe STOCKEE avec la rangee ; bascule par le bouton Largeur de l'editeur.
   MIROIR : bloc identique cote site SANS ces commentaires. */
.contenu_site .row.ap_rangee_encadree{ margin-left:auto !important; margin-right:auto !important; width:100% !important; justify-content:center; } /* v56 (14/07) : !important - une couche encore inconnue ecrasait les marges auto chez David (2e constat) ; classe opt-in, verrou assume */
@media (min-width:576px){ .contenu_site .ap_rangee_encadree{ max-width:540px; } }
@media (min-width:768px){ .contenu_site .ap_rangee_encadree{ max-width:720px; } }
@media (min-width:992px){ .contenu_site .ap_rangee_encadree{ max-width:960px; } }
@media (min-width:1200px){ .contenu_site .ap_rangee_encadree{ max-width:1140px; } }
@media (min-width:1400px){ .contenu_site .ap_rangee_encadree{ max-width:1320px; } }

.contenu_site .ap_ho_statut{ display:inline-flex; align-items:center; gap:.4rem; line-height:1.2; }
.contenu_site .ap_ho_point{ width:.55rem; height:.55rem; border-radius:50%; display:inline-block; flex:0 0 auto; }
.contenu_site .ap_ho_point_ok{ background:#1a9e57; box-shadow:0 0 0 3px rgba(26,158,87,.18); }
.contenu_site .ap_ho_point_ko{ background:#d64550; box-shadow:0 0 0 3px rgba(214,69,80,.18); }
.contenu_site .ap_ho_v1{ padding:.35rem .8rem; border-radius:999px; font-size:.85rem; }
.contenu_site .ap_ho_v1.ap_ho_ouvert{ background:#e5f5ec; color:#0f6d3d; }
.contenu_site .ap_ho_v1.ap_ho_ferme{ background:#fdeaec; color:#a11722; }
.contenu_site .ap_ho_v2{ font-size:.72rem; padding:.15rem .55rem; border-radius:999px; font-weight:700; vertical-align:middle; }
.contenu_site .ap_ho_v2.ap_ho_ouvert{ background:#1a9e57; color:#fff; }
.contenu_site .ap_ho_v2.ap_ho_ferme{ background:#d64550; color:#fff; }
.contenu_site .ap_ho_v3{ font-size:.9rem; }
.contenu_site .ap_ho_v3.ap_ho_ouvert{ color:#0f6d3d; }
.contenu_site .ap_ho_v3.ap_ho_ferme{ color:#a11722; }
.contenu_site .ap_ho_v4{ display:flex; width:100%; justify-content:center; padding:.5rem; border-radius:10px; color:#fff; margin-bottom:.5rem; }
.contenu_site .ap_ho_v4.ap_ho_ouvert{ background:#1a9e57; }
.contenu_site .ap_ho_v4.ap_ho_ferme{ background:#d64550; }
.contenu_site .ap_ho_v5{ padding:.3rem .7rem; border-radius:8px; font-size:.82rem; background:#fff; }
.contenu_site .ap_ho_v5.ap_ho_ouvert{ border:1.5px solid #1a9e57; color:#0f6d3d; }
.contenu_site .ap_ho_v5.ap_ho_ferme{ border:1.5px solid #d64550; color:#a11722; }
.contenu_site .ap_ho_v6{ padding:.35rem .8rem; border-radius:999px; font-size:.85rem; }
.contenu_site .ap_ho_v6.ap_ho_ouvert{ background:#e5f5ec; color:#0f6d3d; }
.contenu_site .ap_ho_v6.ap_ho_ferme{ background:#fdeaec; color:#a11722; }
.contenu_site .ap_ho_v2 .ap_ho_point,.contenu_site .ap_ho_v4 .ap_ho_point,.contenu_site .ap_ho_v5 .ap_ho_point{ background:currentColor; box-shadow:none; }
.contenu_site .ap_ho_icone{ font-size:.9rem; line-height:1; flex:0 0 auto; }
.contenu_site .ap_ho_jour{ display:inline-block; min-width:7.5em; font-weight:600; }
.contenu_site .ap_ho_jour_courant{ background:#fff7d6; border-radius:4px; padding:0 4px; }
.contenu_site .ap_ho_survol{ position:relative; cursor:help; display:inline-block; }
.contenu_site .ap_ho_bulle{ position:absolute; top:calc(100% + 10px); left:0; z-index:1080; width:max-content; min-width:300px; max-width:min(460px, 82vw); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .25s ease .25s, transform .25s ease .25s, visibility 0s linear .5s; text-align:left; font-weight:400; }
.contenu_site .ap_ho_bulle::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.contenu_site .ap_ho_survol:hover .ap_ho_bulle{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .25s ease, transform .25s ease, visibility 0s; }
.contenu_site .ap_ho_bulle_sombre{ background:#22313f; color:#eaf1f7; border-radius:10px; padding:12px 14px; font-size:.8rem; box-shadow:0 8px 24px rgba(2,20,45,.28); display:block; }
.contenu_site .ap_ho_bulle_sombre strong{ color:#fff; }
.contenu_site .ap_ho_bulle_claire{ background:#fff; color:#2c3e50; border:1px solid #dfe6ee; border-radius:12px; padding:14px 16px; font-size:.82rem; box-shadow:0 10px 30px rgba(2,20,45,.18); display:block; }
.contenu_site .ap_ho_bulle_titre{ display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#54687b; border-bottom:2px solid #e3ebf3; padding-bottom:5px; margin-bottom:8px; }
.contenu_site .ap_ho_depli{ display:inline-block; cursor:help; }
.contenu_site .ap_ho_depli .ap_ho_contenu_depli{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s ease; }
.contenu_site .ap_ho_depli:hover .ap_ho_contenu_depli{ grid-template-rows:1fr; }
.contenu_site .ap_ho_contenu_depli > div{ overflow:hidden; }
.contenu_site .homepage:has(.ap_ho_survol:hover),
.contenu_site .homepage:has(.ap_ho_survol:focus),
.contenu_site .homepage:has(.ap_ho_depli:hover),
.contenu_site .homepage:has(.ap_ho_depli:focus){ z-index:1080;  transition: z-index 0s 0s;}
.contenu_site .ap_ho_indice,
.contenu_site .ap_ho_chevron{ font-size:.9rem; line-height:1; flex:0 0 auto; opacity:.75; transition:opacity .18s ease, transform .18s ease; }
.contenu_site .ap_ho_chevron{ margin-left:-.15rem; }
.contenu_site .ap_ho_survol:hover .ap_ho_indice,
.contenu_site .ap_ho_survol:focus .ap_ho_indice,
.contenu_site .ap_ho_depli:hover .ap_ho_indice,
.contenu_site .ap_ho_depli:focus .ap_ho_indice{ opacity:1; }
.contenu_site .ap_ho_survol:hover .ap_ho_chevron,
.contenu_site .ap_ho_survol:focus .ap_ho_chevron,
.contenu_site .ap_ho_depli:hover .ap_ho_chevron,
.contenu_site .ap_ho_depli:focus .ap_ho_chevron{ opacity:1; transform:rotate(180deg); }
.contenu_site .ap_ho_survol:focus,
.contenu_site .ap_ho_depli:focus{ outline:none; }
.contenu_site .ap_ho_survol:focus .ap_ho_bulle{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .25s ease, transform .25s ease, visibility 0s; }
.contenu_site .ap_ho_depli:focus .ap_ho_contenu_depli{ grid-template-rows:1fr; }
.contenu_site .ap_ho_survol:focus-visible .ap_ho_statut,
.contenu_site .ap_ho_depli:focus-visible .ap_ho_statut{ outline:2px solid currentColor; outline-offset:3px; border-radius:4px; }

.contenu_site .lr_groupe{ display:flex; flex-wrap:wrap; gap:10px; }
.contenu_site .lr_bouton{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; padding:.55rem 1.1rem; border-radius:8px; font-weight:600; }
.contenu_site .lr_bouton:hover{ filter:brightness(1.12); }
.contenu_site .lr_pilule{ display:inline-flex; align-items:center; gap:.5rem; border:1.5px solid; text-decoration:none; padding:.35rem .9rem; border-radius:999px; font-weight:600; }
.contenu_site .lr_pilule:hover{ filter:brightness(1.12); }
.contenu_site .lr_grille{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.contenu_site .lr_card{ display:flex; flex-direction:column; align-items:center; gap:8px; border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:16px 10px; text-decoration:none; font-weight:600; text-align:center; transition:all .15s ease; box-shadow:0 2px 6px rgba(2,20,45,.05); }
.contenu_site .lr_card:hover{ box-shadow:0 6px 16px rgba(2,20,45,.12); transform:translateY(-2px); }
.contenu_site .lr_card .lr_icone{ font-size:1.5rem; }
.contenu_site .lr_fleche{ display:flex; align-items:center; gap:.5rem; text-decoration:none; padding:.5rem .2rem; border-bottom:1px solid rgba(0,0,0,.08); }
.contenu_site .lr_fleche .lr_icone_chevron{ font-size:.75rem; transition:transform .15s ease; }
.contenu_site .lr_fleche:hover .lr_icone_chevron{ transform:translateX(4px); }
.contenu_site .lr_icone{ flex:0 0 auto; }
/* v164 : l espacement entre l icone et le libelle etait de 0 a 10px selon le composant. Il est
   harmonise a .5rem. Le titre des vignettes n est pas un conteneur flex (le libelle doit pouvoir
   revenir a la ligne) : l ecart y passe par une marge, et non par un gap. */
.contenu_site .acces_rapide_titre .lr_icone{ margin-right:.5rem; }

.contenu_site .lr_ligne{ display:flex; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; align-items:center; }
.contenu_site .lr_ligne a{ display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .2rem; text-decoration:none; }
/* v62 : alignement de l'objet liens rapides du menu (option [15]) */
.contenu_site .lr_align_centre{ justify-content:center; text-align:center; }
.contenu_site .lr_align_droite{ justify-content:flex-end; text-align:right; }
.contenu_site .lr_separateur{ margin:0 .65rem; opacity:.45; font-weight:400; }
.contenu_site .acces_rapide_grille{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:20px; max-width:1200px; margin:auto; justify-items:center; }
.contenu_site .acces_rapide_grille.acces_rapide_petite{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
.contenu_site .acces_rapide_grille.acces_rapide_grande{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.contenu_site .acces_rapide_item{ display:block; width:100%; text-decoration:none; text-align:center; color:inherit; }
.contenu_site .acces_rapide_item:hover{ text-decoration:none; color:inherit; }
.contenu_site .acces_rapide_contenu{ transition:transform .3s ease; }
.contenu_site .acces_rapide_vignette{ width:150px; height:150px; margin:0 auto 15px; border-radius:50%; overflow:hidden; border:4px solid #fff; box-shadow:0 10px 30px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.05); transition:transform .3s ease,box-shadow .3s ease; display:flex; align-items:center; justify-content:center; }
.contenu_site .acces_rapide_petite .acces_rapide_vignette{ width:110px; height:110px; }
.contenu_site .acces_rapide_grande .acces_rapide_vignette{ width:190px; height:190px; }
.contenu_site .acces_rapide_vignette img{ width:100%; height:100%; object-fit:cover; display:block; }
.contenu_site .acces_rapide_initiales{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:2.2rem; }
.contenu_site .acces_rapide_petite .acces_rapide_initiales{ font-size:1.7rem; }
.contenu_site .acces_rapide_grande .acces_rapide_initiales{ font-size:2.8rem; }
.contenu_site .acces_rapide_titre{ font-size:15px; font-weight:600; line-height:1.4; max-width:170px; margin:auto; transition:color .3s ease; }
.contenu_site .acces_rapide_item:hover .acces_rapide_titre{ color:var(--acces_rapide_accent); }
.contenu_site .acces_rapide_souleve:hover .acces_rapide_contenu{ transform:translateY(-6px); }
.contenu_site .acces_rapide_zoom:hover .acces_rapide_vignette{ transform:scale(1.05); }
.contenu_site .acces_rapide_souleve_zoom_ombre:hover .acces_rapide_contenu{ transform:translateY(-6px); }
.contenu_site .acces_rapide_souleve_zoom_ombre:hover .acces_rapide_vignette{ transform:scale(1.05); box-shadow:0 15px 35px rgba(15,76,129,.25),0 5px 15px rgba(15,76,129,.15); }
.contenu_site .acces_rapide_ombre:hover .acces_rapide_vignette{ box-shadow:0 15px 35px rgba(15,76,129,.25),0 5px 15px rgba(15,76,129,.15); }
.contenu_site .acces_rapide_bascule:hover .acces_rapide_vignette{ transform:rotate(-3deg); }

.toggle > input.interrupteur_datao[type="checkbox"]{ display: block !important; position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.toggle:has(> input.interrupteur_datao:focus-visible){ outline: 2px solid #0a4d6e; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(10,77,110,.12) !important; }
.toggle[disabled]:has(> input.interrupteur_datao){ opacity: .45; }
.toggle[disabled] > input.interrupteur_datao{ cursor: default; }
.toggle:has(> input.interrupteur_datao[data-on]){ position: relative; height: 28px !important; min-height: 0 !important; min-width: 100px !important; width: auto !important; display: inline-grid !important; align-items: center; border: 0 !important; border-radius: 50rem !important; padding: 0 !important; box-shadow: none !important; background: #922b21; transition: background .22s; }
.toggle:has(> input.interrupteur_datao[data-on]):not(.off){ background: #14532d; }
.toggle:has(> input.interrupteur_datao[data-on]) .toggle-group{ position: static !important; width: auto !important; left: auto !important; top: auto !important; display: inline-grid !important; }
.toggle:has(> input.interrupteur_datao[data-on]) :is(.toggle-on, .toggle-off){ grid-area: 1 / 1; position: static !important; width: auto !important; height: 28px !important; background: transparent !important; color: #fff !important; font-size: 0.75rem !important; font-weight: 700 !important; line-height: 28px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.toggle:has(> input.interrupteur_datao[data-on]) .toggle-on{ text-align: left; padding: 0 30px 0 14px !important; }
.toggle:has(> input.interrupteur_datao[data-on]) .toggle-off{ text-align: right; padding: 0 14px 0 30px !important; }
.toggle:has(> input.interrupteur_datao[data-on]) .toggle-handle{ display: none !important; }
.toggle:has(> input.interrupteur_datao[data-on]).off .toggle-on{ visibility: hidden; }
.toggle:has(> input.interrupteur_datao[data-on]):not(.off) .toggle-off{ visibility: hidden; }
.toggle:has(> input.interrupteur_datao[data-on])::after{ content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .22s cubic-bezier(.4,.1,.3,1.25); z-index: 1; }
.toggle:has(> input.interrupteur_datao[data-on]):not(.off)::after{ left: calc(100% - 24px); }

/* v159 : compatibilite input-group-prepend / input-group-append (Bootstrap 4).
   Ces conteneurs ne sont plus produits par le CODE, mais ils figurent 947 fois dans le
   CONTENU STOCKE en base (saisi par les clients au fil des annees).
   `display: contents` fait disparaitre leur BOITE : leurs enfants deviennent enfants directs
   de .input-group — exactement la structure attendue par Bootstrap 5, qui applique alors ses
   propres marges et arrondis. Une seule declaration remplace ainsi dix regles de rattrapage.
   Mesure : arrondis et addons identiques au BS5 natif ; champ a 1 px pres.
   A retirer le jour ou le contenu sera converti (voir Bascule production/). */
.contenu_site .input-group-prepend,
.contenu_site .input-group-append{
	display: contents;
}


.rr_panneau{
	--rr-bouton:#922b21; --rr-fond:#02243f; --rr-texte:#ffffff; --rr-bouton-txt:#ffffff;
	--rr-case:36px; --rr-icone:14px;
	position:fixed; z-index:1020; display:flex; flex-direction:column;
	font-family:inherit; font-size:13px; line-height:1.2;
}
:root{ --largeur_item_carrousel:100%; --rr-marge:0px; --rr-ecart-bord:0px; --rr-ecart-vertical:0px; --rr-rang:1; } .rr_gauche{ left:calc(var(--rr-marge) + var(--rr-ecart-bord)); }
.rr_droite{ right:calc(var(--rr-marge) + var(--rr-ecart-bord)); }
.rr_haut{ top:calc(12px + var(--rr-ecart-vertical)); }
.rr_bas{ bottom:calc(12px + var(--rr-ecart-vertical)); }
.rr_milieu{ top:50%; transform:translateY(calc(-50% + var(--rr-ecart-vertical))); }

.rr_poignee{
	display:flex; align-items:center; justify-content:flex-start; gap:0;
	background:var(--rr-bouton); color:var(--rr-bouton-txt); border:0; cursor:pointer;
	min-width:var(--rr-case); min-height:var(--rr-case); padding:0;
	font-size:13px; font-weight:600; transition:filter .15s ease;
}

.rr_poignee > i{ width:var(--rr-case); min-height:var(--rr-case); display:inline-flex;
	align-items:center; justify-content:center; font-size:var(--rr-icone); flex-shrink:0; }

.rr_taille_petite{ --rr-case:28px; --rr-icone:12px; }
.rr_taille_normale{ --rr-case:36px; --rr-icone:14px; }
.rr_taille_grande{ --rr-case:44px; --rr-icone:18px; }
.rr_taille_tres_grande{ --rr-case:54px; --rr-icone:23px; }
.rr_poignee:hover{ filter:brightness(1.15); }
/* v160 : inline-block et non none - max-width n agit pas sur un inline, et un
   element en display:none ne peut pas etre revele par une animation de largeur. */
.rr_poignee_txt{ display:inline-block; }
.rr_liens{ display:flex; flex-direction:column; background:var(--rr-fond); overflow:hidden; }
.rr_liens a{
	display:flex; align-items:center; justify-content:flex-start; gap:0;
	min-width:var(--rr-case); min-height:var(--rr-case); padding:0;
	color:var(--rr-texte); text-decoration:none; white-space:nowrap;
	transition:background .15s ease, transform .15s ease, color .15s ease;
}
.rr_liens a i{ width:var(--rr-case); min-height:var(--rr-case); display:inline-flex;
	align-items:center; justify-content:center; font-size:var(--rr-icone); flex-shrink:0; }

.rr_liens a span{
	max-width:0; opacity:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; /* v169 : libelle long coupe en pleine lettre -> points de suspension */
	transition:max-width .3s cubic-bezier(.22,.9,.3,1), opacity .18s ease;
	transition-delay:calc((9 - var(--rr-rang)) * 22ms);
}
.rr_poignee_txt{ max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
	transition:max-width .3s ease, opacity .18s ease; }
.rr_deplie .rr_liens a span{
	max-width:190px; opacity:1; padding-right:12px;
	transition-delay:calc(var(--rr-rang) * 38ms);
}
.rr_deplie .rr_poignee_txt{ max-width:190px; opacity:1; padding-right:12px; }

.rr_liens{ transition:background .2s ease; }
.rr_liens a{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
	.rr_liens a span, .rr_poignee_txt, .rr_liens a, .rr_poignee{ transition:none !important; }
}

.rr_liens a:hover{ background:rgba(255,255,255,.16); }
.rr_gauche .rr_liens a:hover{ transform:translateX(2px); }
.rr_liens a:nth-child(1){ --rr-rang:1; } .rr_liens a:nth-child(2){ --rr-rang:2; }
.rr_liens a:nth-child(3){ --rr-rang:3; } .rr_liens a:nth-child(4){ --rr-rang:4; }
.rr_liens a:nth-child(5){ --rr-rang:5; } .rr_liens a:nth-child(6){ --rr-rang:6; }
.rr_liens a:nth-child(7){ --rr-rang:7; } .rr_liens a:nth-child(8){ --rr-rang:8; }
.rr_droite .rr_liens a:hover{ transform:translateX(-2px); }

.rr_poignee:focus-visible, .rr_liens a:focus-visible{ outline:2px solid #fff; outline-offset:-3px; }

.rr_style_barre .rr_poignee{ border-radius:0 8px 0 0; }
.rr_style_barre .rr_liens{ border-radius:0 0 8px 0; }

.rr_style_onglet{ flex-direction:row; align-items:stretch; }
.rr_style_onglet .rr_poignee{ writing-mode:vertical-rl; padding:14px 8px; border-radius:0 10px 10px 0; order:2; }
.rr_style_onglet .rr_liens{ border-radius:0 0 0 0; }

.rr_style_pilule:hover{ box-shadow:0 9px 24px rgba(2,36,63,.36); }
.rr_style_pilule{ --rr-marge:14px; border-radius:26px; overflow:hidden; box-shadow:0 6px 18px rgba(2,36,63,.28); }
.rr_style_pilule .rr_poignee{ border-radius:26px 26px 0 0; }
.rr_style_pilule .rr_liens{ border-radius:0 0 26px 26px; padding:4px 0; }

.rr_style_chapelet{ --rr-marge:12px; gap:7px; background:none; }
.rr_style_chapelet .rr_poignee{ border-radius:50%; padding:0; align-self:flex-start; }
.rr_style_chapelet .rr_liens{ background:none; gap:7px; overflow:visible; }
.rr_style_chapelet .rr_liens a{ background:var(--rr-fond); border-radius:50px; align-self:flex-start; }
.rr_style_chapelet .rr_liens a:hover{ background:var(--rr-bouton); }

.rr_style_cartes{ --rr-marge:12px; gap:6px; }
.rr_style_cartes .rr_poignee{ border-radius:8px; box-shadow:0 2px 6px rgba(2,36,63,.25); }
.rr_style_cartes .rr_liens{ background:none; gap:6px; overflow:visible; }
.rr_style_cartes .rr_liens a{ background:var(--rr-fond); border-radius:8px; align-self:flex-start;
	box-shadow:0 2px 6px rgba(2,36,63,.22); }
.rr_style_cartes .rr_liens a:hover{ box-shadow:0 4px 11px rgba(2,36,63,.34); }

.rr_style_rail{ top:0; bottom:0; transform:none; justify-content:center; background:var(--rr-fond); }
.rr_style_rail .rr_poignee{ position:absolute; top:0; left:0; right:0; }
.rr_style_rail .rr_liens{ background:none; }

.rr_style_lisere .rr_poignee{ border-radius:0 8px 0 0; }
.rr_style_lisere .rr_liens{ border-radius:0 0 8px 0; }
.rr_style_lisere .rr_liens a{ border-left:3px solid var(--rr-bouton); }
.rr_style_lisere .rr_liens a + a{ border-top:1px solid rgba(255,255,255,.12); }

.rr_style_biseau{ clip-path:polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.rr_style_biseau .rr_liens a{ padding-right:18px; }

.rr_style_ruban{ --rr-marge:10px; filter:drop-shadow(0 7px 12px rgba(2,36,63,.35)); transition:filter .2s ease; }
.rr_style_ruban:hover{ filter:drop-shadow(0 10px 18px rgba(2,36,63,.45)); }
.rr_style_ruban .rr_poignee{ border-radius:6px 6px 0 0; }
.rr_style_ruban .rr_liens{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px)); padding-bottom:12px; }

.rr_style_contour{ --rr-marge:10px; border:2px solid var(--rr-bouton); border-radius:10px; overflow:hidden; background:#fff; }
.rr_style_contour .rr_liens{ background:#fff; }
.rr_style_contour .rr_liens a{ color:var(--rr-fond); }
.rr_style_contour .rr_liens a + a{ border-top:1px solid #e3eaf1; }
.rr_style_contour .rr_liens a:hover{ background:rgba(2,36,63,.08); color:var(--rr-bouton); }

.rr_style_creux{ border-radius:0 12px 12px 0; overflow:hidden; }
.rr_style_creux .rr_liens a{ box-shadow:inset 0 1px 3px rgba(0,0,0,.45); margin:3px 5px; border-radius:6px; }

.rr_style_compact{ font-size:11px; }
.rr_style_compact .rr_poignee{ font-size:11px; }
.rr_style_compact .rr_deplie .rr_liens a span{ padding-right:8px; }
.rr_style_compact .rr_liens a i{ font-size:calc(var(--rr-icone) - 2px); width:var(--rr-case); }

.rr_style_etiquettes .rr_poignee{ border-radius:0 8px 0 0; }
.rr_style_etiquettes .rr_liens{ border-radius:0 0 8px 0; overflow:visible; }
.rr_style_etiquettes .rr_liens a{ position:relative; }
.rr_style_etiquettes .rr_liens a span{ max-width:190px !important; position:absolute; left:100%;
	background:var(--rr-bouton); color:#fff; padding:6px 10px; border-radius:0 6px 6px 0;
	transform:translateX(-8px); opacity:0; pointer-events:none; transition:all .2s ease; }
.rr_style_etiquettes .rr_liens a:hover span{ transform:translateX(0); opacity:1; }

.rr_droite.rr_style_barre .rr_poignee{ border-radius:8px 0 0 0; }
.rr_droite.rr_style_barre .rr_liens{ border-radius:0 0 0 8px; }

.rr_droite.rr_style_onglet .rr_poignee{ border-radius:10px 0 0 10px; order:0; }

.rr_droite.rr_style_lisere .rr_poignee{ border-radius:8px 0 0 0; }
.rr_droite.rr_style_lisere .rr_liens{ border-radius:0 0 0 8px; }
.rr_droite.rr_style_lisere .rr_liens a{ border-left:0; border-right:3px solid var(--rr-bouton); }

.rr_droite.rr_style_biseau{ clip-path:polygon(0 0, 100% 0, 100% 100%, 12px 100%); }
.rr_droite.rr_style_biseau .rr_liens a{ padding-right:0; padding-left:14px; }

.rr_droite.rr_style_creux{ border-radius:12px 0 0 12px; }

.rr_droite.rr_style_etiquettes .rr_poignee{ border-radius:8px 0 0 0; }
.rr_droite.rr_style_etiquettes .rr_liens{ border-radius:0 0 0 8px; }
.rr_droite.rr_style_etiquettes .rr_liens a span{ left:auto; right:100%;
	border-radius:6px 0 0 6px; transform:translateX(8px); }
.rr_droite.rr_style_etiquettes .rr_liens a:hover span{ transform:translateX(0); }

.rr_panneau{ max-height:calc(100vh - 24px); }
.rr_liens{ overflow-y:auto; }

@media (max-width: 767.98px){ .rr_panneau.rr_sans_telephone{ display: none; } }
@media (min-width: 768px) and (max-width: 991.98px){ .rr_panneau.rr_sans_tablette{ display: none; } }
@media (min-width: 992px){ .rr_panneau.rr_sans_ordinateur{ display: none; } }

.rr_liens a, .rr_liens a:hover, .rr_liens a:focus, .rr_poignee:hover{ text-decoration: none; }

/* ---- v160 : deux classes etroites, une seule propriete chacune ----
   list-style et overflow ont des effets de bord : elles ne sont jamais melangees a du
   cosmetique, pour ne pas detourner une regle existante. ---- */
.sans_puce_datao{ list-style: none; }
.defilement_bloque_datao{ overflow: hidden; }

/* v163 - L'alignement suit jusqu'au CONTENU des liens.
   .lr_fleche et .lr_card sont en display:flex : le text-align du conteneur n'y agit plus, et
   les classes lr_align_* ne portaient que sur la grille. Mesure : conteneur centre, lien en
   justify-content:normal - icone et libelle restaient a gauche.
   Le defaut (gauche) n'est pas touche : seules centre et droite sont declarees. */
.contenu_site .lr_align_centre .lr_fleche{ justify-content: center; }
.contenu_site .lr_align_droite .lr_fleche{ justify-content: flex-end; }
/* En « cards », la grille auto-fill cree plus de colonnes que de cartes et occupe toute
   la largeur : justify-content n'y decale rien de visible. On la passe en flex quand un
   alignement est demande - elle se limite alors aux cartes reelles. Sans alignement, elle
   reste en grid : les rendus existants ne bougent pas. */
.contenu_site .lr_grille.lr_align_centre,
.contenu_site .lr_grille.lr_align_droite{ display: flex; flex-wrap: wrap; }
/* v164 : le style « acces rapide » a son propre conteneur - meme traitement, sinon sa grille
   auto-fill occupe toute la largeur et l alignement ne se voit pas. */
.contenu_site .acces_rapide_grille.lr_align_centre,
.contenu_site .acces_rapide_grille.lr_align_droite{ display: flex; flex-wrap: wrap; }
.contenu_site .acces_rapide_grille.lr_align_centre{ justify-content: center; }
.contenu_site .acces_rapide_grille.lr_align_droite{ justify-content: flex-end; }
/* Les 3 tailles etaient portees par grid-template-columns (110/150/190 px) - le passage en
   flex les annule. On les reproduit en flex-basis, sinon l alignement ecrase le reglage. */
.contenu_site .acces_rapide_grille.lr_align_centre > *,
.contenu_site .acces_rapide_grille.lr_align_droite > *{ flex: 0 0 150px; }
.contenu_site .acces_rapide_grille.acces_rapide_petite.lr_align_centre > *,
.contenu_site .acces_rapide_grille.acces_rapide_petite.lr_align_droite > *{ flex: 0 0 110px; }
.contenu_site .acces_rapide_grille.acces_rapide_grande.lr_align_centre > *,
.contenu_site .acces_rapide_grille.acces_rapide_grande.lr_align_droite > *{ flex: 0 0 190px; }
.contenu_site .lr_grille.lr_align_centre{ justify-content: center; }
.contenu_site .lr_grille.lr_align_droite{ justify-content: flex-end; }
/* En flex, chaque carte prendrait sa largeur naturelle (mesure : 109 a 185 px) alors que la
   grille les egalisait via minmax(150px, 1fr). On reprend cette base de 150 px pour que
   l alignement ne change QUE la position des cartes, jamais leur taille. */
.contenu_site .lr_grille.lr_align_centre > *,
.contenu_site .lr_grille.lr_align_droite > *{ flex: 0 0 150px; }

/* v170 : composant gf_info porte au site - les erreurs emanant d'un script PHP s'affichent dans
   l'encart de la charte (decision DATAO 30/07/2026). Valeurs resolues depuis css_admin (le site
   n'a pas les variables du theme admin) ; contrastes AAA calcules (texte #243044 sur #fbeceb
   12,5:1 ; gras/icone #922b21 7,6:1). Classes dormantes tant qu'aucun script ne les emet. */
.gf_info_datao{ text-align:left; background:#f6f9fc; border-left:4px solid #0a4d6e; border-radius:10px; padding:11px 14px; font-size:0.8125rem; color:#243044; margin-bottom:16px; position:relative; }
.gf_info_datao > i{ color:#0a4d6e; margin-right:7px; font-size:1.25rem; }
.gf_info_datao b{ color:#02243f; }
.gf_info_datao p{ display:inline; margin:0; }
/* v204 : liste de messages dans un bandeau (retrait aligne sous le debut du titre) */
.gf_info_liste_datao{ margin:6px 0 0 0; padding-left:2rem; }
.gf_info_liste_datao li{ margin:0; }
.gf_info_grave_datao{ border-left-color:#922b21; background:#fbeceb; }
.gf_info_grave_datao > i{ color:#922b21; }
.gf_info_grave_datao b{ color:#922b21; }
.gf_info_attention_datao{ border-left-color:#f5b400; background:#fff6e0; }
/* v219 p12 : #d4a017 donnait 2,21:1 sur le fond #fff6e0 - sous le seuil de 3:1 exige
   pour un element non textuel. #6b4f00 donne 7,11:1 et est DEJA en service dans le CMS
   (.pr_mention_attente). Defaut anterieur, commun a tous les messages d attention.
   Mesure et decision DATAO du 13/08/2026. */
.gf_info_attention_datao > i{ color:#6b4f00; }
.gf_info_attention_datao b{ color:#02243f; }
.gf_info_succes_datao{ border-left-color:#14532d; background:#e7f2ec; }
.gf_info_succes_datao > i{ color:#14532d; }
.gf_info_succes_datao b{ color:#14532d; }

/* v174 : etat des manifestations (Annulee / Passee) - palette NEUTRE multi-clients (aucune
   couleur de charte client imposee) ; remplace l'incrustation img_annuler.png. Contrastes
   AAA calcules : blanc/#9c231b = 7,3:1 ; blanc/#454d57 = 7,9:1 ; #4a525c/#f4f5f7 = 7,2:1. */
.calque_etat_manifestation_datao{ position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; z-index:5; }
.ruban_etat_manifestation_datao{ position:absolute; top:22px; right:-44px; transform:rotate(35deg); width:190px; text-align:center; padding:6px 0; font-weight:700; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.25); }
.vignette_manifestation_datao{ border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0; overflow:hidden; }
.vignette_manifestation_datao > img{ border-radius:0; }
.ruban_etat_manifestation_annulee_datao{ background:#9c231b; }
.ruban_etat_manifestation_passee_datao{ background:#454d57; }
.conteneur_etat_manifestation_datao{ position:relative; display:block; }
.pastille_etat_manifestation_datao{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-12deg); padding:4px 10px; border-radius:999px; font-weight:700; font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.3); white-space:nowrap; z-index:5; }
.pastille_etat_manifestation_annulee_datao{ background:#9c231b; }
.pastille_etat_manifestation_passee_datao{ background:#454d57; }
.fond_date_manifestation_datao{ background:linear-gradient(135deg,#f4f5f7,#e3e6ea); border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.fond_date_manifestation_datao .fdm_contenu_datao{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#4a525c; }
.fdm_jour_datao{ font-size:2.6rem; font-weight:700; line-height:1; }
.fdm_mois_datao{ font-size:0.95rem; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; }

/* v186 : interrupteur « Se souvenir de moi » au gabarit de la page de connexion de
   l administration (index.php), mesure faite sur l ecran reel : libelle a GAUCHE,
   interrupteur a DROITE (order), 42x20px, piste #4d5761 au repos et #14532d une fois
   activee, pastille BLANCHE dans les deux etats (Bootstrap la met noire semi-transparente
   au repos : invisible sur une piste foncee - c est le « toggle bizarre » constate).
   Couleurs ecrites en dur : le site internet ne connait pas les tokens Vision. */
.contenu_site .connexion_souvenir{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-left: 0;
}
.contenu_site .connexion_souvenir .form-check-label{
	order: 1;
}
.contenu_site .connexion_souvenir .form-switch .form-check-input.interrupteur_datao,
.contenu_site .connexion_souvenir .form-check-input.interrupteur_datao{
	order: 2;
	width: 42px;
	height: 20px;
	margin: 0;
	float: none;
	flex: 0 0 auto;
	background-color: #4d5761;
	border: 0;
	box-shadow: none;
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
	transition: background-color .2s;
}
.contenu_site .connexion_souvenir .form-check-input.interrupteur_datao:checked{
	background-color: #14532d;
	border: 0;
}
.contenu_site .connexion_souvenir .form-check-input.interrupteur_datao:focus{
	border: 0;
	box-shadow: 0 0 0 3px rgba(10,77,110,.12);
	outline: 2px solid #0a4d6e;
	outline-offset: 2px;
}

/* ============================ v195 - paiement en plusieurs fois ============================
   Le choix du nombre d echeances et l echeancier du formulaire d inscription.
   Le site est HORS Vision : aucune variable, aucun token, valeurs litterales.
   Contrastes MESURES dans le navigateur le 05/08/2026 : les 8 paires sont a 8,00:1 ou plus,
   cible AAA 7:1 atteinte partout (3:1 pour le non-texte).
   Prefixe pf_ = paiement fractionne.
   ========================================================================================= */

/* le choix : des cartes cliquables, pas une liste deroulante - le montant par echeance doit
   se LIRE avant de choisir. */
.pf_choix{display:flex;flex-wrap:wrap;gap:.75rem;}
.pf_option{flex:1 1 8rem;min-width:8rem;}
.pf_option input{position:absolute;opacity:0;width:0;height:0;}
.pf_carte{display:block;width:100%;cursor:pointer;text-align:center;padding:.75rem .5rem;border:2px solid #b9c2cc;border-radius:.375rem;background:#ffffff;transition:border-color .12s,background-color .12s;}
.pf_carte:hover{border-color:#5a6a7a;background:#f4f7fa;}
/* etat choisi : la bordure ET le fond changent - jamais la couleur seule (daltonisme) */
.pf_option input:checked + .pf_carte{border-color:#0f5132;background:#e7f3ec;}
/* focus clavier visible : l input reel est masque, l anneau doit porter sur la carte */
.pf_option input:focus-visible + .pf_carte{outline:3px solid #0a58ca;outline-offset:2px;}
.pf_rythme{display:block;font-weight:600;font-size:1rem;color:#1f2933;}
.pf_par_echeance{display:block;font-size:.875rem;margin-top:.15rem;color:#3d4852;}
.pf_option input:checked + .pf_carte .pf_rythme{color:#0f5132;}
.pf_option input:checked + .pf_carte .pf_par_echeance{color:#14532d;}

/* l echeancier : ce qui sera reellement preleve, et quand */
.pf_echeancier{border:1px solid #b9c2cc;border-radius:.375rem;padding:.75rem 1rem;background:#f8fafc;}
.pf_ligne{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.35rem 0;}
.pf_ligne + .pf_ligne{border-top:1px dashed #ccd3da;}
.pf_quand{color:#3d4852;font-size:.9375rem;}
.pf_combien{font-weight:600;color:#1f2933;white-space:nowrap;}
.pf_maintenant .pf_quand,
.pf_maintenant .pf_combien{color:#0f5132;font-weight:600;}
.pf_etiquette_maintenant{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;border:1px solid #0f5132;border-radius:1rem;padding:.05rem .5rem;margin-left:.5rem;color:#0f5132;}
.pf_total{display:flex;justify-content:space-between;margin-top:.5rem;padding-top:.5rem;border-top:2px solid #b9c2cc;font-weight:700;color:#1f2933;}

/* l apercu en administration passe par .contenu_site : sa specificite l emporterait sinon */
.contenu_site .pf_carte{background:#ffffff;}
.contenu_site .pf_option input:checked + .pf_carte{border-color:#0f5132;background:#e7f3ec;}
/* ========================== fin v195 - paiement en plusieurs fois ========================= */

/* v197 : titre de section du formulaire d'inscription (Votre identite / Vos coordonnees /
   Votre acces). currentColor et opacity plutot qu'une couleur fixe : la couleur du texte du
   formulaire est parametrable par l'association, le titre doit la SUIVRE et non l'imposer.
   Contraste calcule dans les deux sens : blanc a 72% sur noir = 10,7:1, noir a 72% sur blanc
   = 8,9:1 - AAA tenu quelle que soit la couleur retenue. */
.titre_section_formulaire_inscription{
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.72;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.35rem;
	margin-bottom: 1rem;
}

/* ============================================================================
   v198 - Centrage des icones de champ.
   Positionnement SEUL, aucune decoration : l apparence des champs ne change pas.
   La cosmetique reste dans connexion_champ (v186), qui n est pas touchee.
   Remplace .ico-label / -password / -eye, dont le "top" en dur devait compenser
   a la main la hauteur du libelle - d ou 4 valeurs pilotees par JS (0/33/55/75px)
   et un decalage de 5,1px mesure le 06/08/2026.
   ============================================================================ */
.champ_a_icone{
	position: relative;
}
.champ_a_icone .icone_champ{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0.875rem;
	color: #bebebe;
	pointer-events: none;
	z-index: 3;
}
.champ_a_icone .icone_champ_droite{
	left: auto;
	right: 0.875rem;
	pointer-events: auto;
}
.champ_a_icone .icone_champ_droite:hover{
	color: #000000;
}

/* ============================================================================
   v201 - Objet « planning des cours d'une saison ».
   Prefixe pc_ (planning cours). Filtrage LOCAL : le JS masque via .pc_masque,
   aucune requete. Le filtre JOUR fait disparaitre la colonne entiere.
   Sous 992px la grille garde ses 6 colonnes et DEFILE horizontalement -
   seule la grille defile, la page ne deborde pas (verifie a 375px).
   ============================================================================ */
.pc_barre{
	background: #FFFFFF;
	border-radius: 0.5rem;
	padding: 0.85rem 1.1rem;
}
.pc_onglet{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid #d7dbe0;
	background: #FFFFFF;
	color: #1b1f24;
	border-radius: 2rem;
	padding: 0.55rem 1.15rem;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	white-space: nowrap;
}
.pc_onglet:hover{
	border-color: #9aa2ab;
	color: #000000;
}
.pc_onglet.pc_actif{
	background: #f26522;
	border-color: #f26522;
	color: #FFFFFF;
}
.pc_panier{
	position: relative;
	color: #1b1f24;
	font-size: 1.6rem;
	line-height: 1;
}
.pc_pastille{
	position: absolute;
	top: -0.35rem;
	right: -0.75rem;
	background: #f26522;
	color: #FFFFFF;
	border-radius: 50%;
	width: 1.7rem;
	height: 1.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8125rem;
	font-weight: 700;
}
.pc_filtre{
	border: 1px solid #4b2a7b;
	background: #1a0f2e;
	color: #FFFFFF;
	border-radius: 2rem;
	padding: 0.5rem 1.1rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
select.pc_filtre{
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 1.1rem center;
	background-size: 0.7rem;
}

.pc_filtre.pc_actif{
	background: #f26522;
	border-color: #f26522;
}
.pc_recherche{
	border: 1px solid #FFFFFF;
	background: transparent;
	color: #FFFFFF;
	border-radius: 2rem;
	padding: 0.5rem 1.1rem;
}
.pc_recherche::placeholder{
	color: rgba(255,255,255,0.55);
}
/* v225 : le nombre de colonnes vient du PHP (--pc-colonnes) et suit les filtres.
   minmax(0, 19rem) : souple quand les jours sont nombreux, PLAFONNE quand il n en reste qu un -
   sans ce plafond une seule colonne prenait 1177 px, toute la largeur de la page (14/08/2026).
   justify-content:start cale les colonnes a gauche au lieu de les etirer. */
.pc_entetes,
.pc_grille{
	display: grid;
	grid-template-columns: repeat(var(--pc-colonnes), minmax(0, 19rem));
	justify-content: start;
	gap: 0.75rem;
}
.pc_jour{
	background: linear-gradient(180deg, #3b1f6e, #2a1550);
	color: #FFFFFF;
	border-radius: 0.4rem;
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.7rem 0.3rem;
	margin-bottom: 0.75rem;
}
/* v201 : la carte est une CELLULE de la grille 2D - elle porte sa colonne (le jour)
   et sa ligne (son rang dans le jour). Les hauteurs de rangee s egalisent alors
   nativement, sans JavaScript : le bouton se retrouve au meme niveau d une carte
   a l autre. display:flex + margin-top:auto pousse l etat en bas de carte. */
.pc_carte{
	background: #FFFFFF;
	color: #1b1f24;
	border-radius: 0.35rem;
	padding: 0.9rem 0.95rem;
	display: flex;
	flex-direction: column;
}
/* v205 : carte du planning cliquable en entier quand Reservez est visible - effet retenu
   par DATAO le 08/08/2026 (maquette survol, variante E « voile ») : le fond se teinte. */
.pc_carte_cliquable{ transition: background-color 250ms ease, box-shadow 250ms ease; }
.pc_carte_cliquable:hover{ background-color:#eef4f9; box-shadow:0 2px 8px rgba(0,0,0,.12); }
/* v205 : etat VISITEUR de la modale de reservation - design retenu par DATAO le 08/08/2026
   (maquette 5 propositions : B + badge « 1 minute » de A). Palette des maquettes du panier. */
.pr_visiteur_minute{ position:absolute; top:-1.05rem; left:50%; transform:translateX(-50%); background:#0d5c26; color:#fff; font-size:0.72rem; font-weight:700; border-radius:2rem; padding:0.35rem 0.9rem; white-space:nowrap; box-shadow:0 3px 8px rgba(0,0,0,.25); display:inline-flex; align-items:center; gap:0.45rem; }
.pr_visiteur_illu{ margin:1.6rem auto 1rem auto; width:130px; height:130px; position:relative; }
.pr_visiteur_cercle{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 30% 25%,#ffe3d4,#ffd0b8); }
.pr_visiteur_ico{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:3rem; color:#f26522; }
.pr_visiteur_mini{ position:absolute; width:42px; height:42px; border-radius:50%; background:#0a4d6e; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.05rem; right:-6px; bottom:2px; border:3px solid #fff; }
.pr_visiteur_titre{ font-weight:800; font-size:1.3rem; color:#1b1f24; text-align:center; }
.pr_visiteur_texte{ color:#5a6672; font-size:0.9rem; line-height:1.55; text-align:center; }
/* v223 : LA MODALE DE VERIFICATION DU PANIER. Une ligne fautive porte sa raison, marquee par le
   meme cercle que pr_visiteur_illu, reduit - le vocabulaire ne change pas, seule la taille. */
.pr_raison_ico{ width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 30% 25%,#ffe3d4,#ffd0b8); color:#f26522; display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex:0 0 auto; }
.pr_raison_titre{ font-weight:800; color:#1b1f24; font-size:0.98rem; }
.pr_btn_connexion{ background:#f26522; color:#fff; border:0; border-radius:2rem; padding:0.65rem 1.5rem; font-weight:700; }
.pr_btn_connexion:hover{ background:#d9551a; color:#fff; }
.pr_btn_creer{ background:#fff; color:#0a4d6e; border:2px solid #dbe4ea; border-radius:2rem; padding:0.6rem 1.5rem; font-weight:700; text-decoration:none; display:inline-block; }
.pr_btn_creer:hover{ border-color:#0a4d6e; color:#0a4d6e; }
/* v205 : encart de la date d ouverture des inscriptions pour tous - etat refus de la
   modale de reservation (maquette validee par DATAO le 08/08/2026). */
.pr_refus_encart{ margin:1.3rem 1.5rem 0 1.5rem; background:#fff7f2; border:2px solid #f26522; border-radius:0.8rem; padding:0.9rem 1rem; text-align:center; }
.pr_refus_titre{ font-size:0.78rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:#8c3308; display:flex; align-items:center; justify-content:center; gap:0.45rem; }

/* v207 : la fenetre de REINSCRIPTION, reservee aux adherents - modificateur de couleur pose sur
   pr_refus_encart, jamais une seconde version de l encart (motif gf_info_attention_datao).
   Le vert distingue une fenetre reservee d une fenetre ouverte a tous : il informe, il ne decore pas. */
.pr_refus_vert{ background:#f4f8f5; border-color:#0d5c26; }
.pr_refus_vert .pr_refus_titre{ color:#0d5c26; }
.pr_refus_valeur{ font-size:1.35rem; font-weight:800; color:#1b1f24; margin-top:0.25rem; }
.pr_refus_fin{ font-size:0.8rem; color:#3d4c60; margin-top:0.15rem; }
/* v205 : etat « reservation ouverte » de la modale (maquette validee par DATAO le
   08/08/2026, sans affichage des places). Types en pilule, etiquettes a icone. */
.pr_choix_type{ background:#fff; color:#0a4d6e; border:2px solid #dbe4ea; border-radius:1rem; padding:0.55rem 1.2rem; font-weight:700; font-size:0.88rem; text-align:center; line-height:1.3; }
.pr_choix_type:hover{ border-color:#0a4d6e; color:#0a4d6e; }
.pr_choix_type.active{ background:#f26522; color:#fff; border-color:#f26522; }
/* v205 : maquette P2 validee 08/08/2026 - tarif a la ligne dans les boutons de type
   + liste a coche « Pour qui ? » (rond radio, avatar initiales, ineligible grise). */
.pr_choix_tarif{ display:block; font-size:0.78rem; font-weight:800; color:#0d5c26; margin-top:0.15rem; }
.pr_choix_type.active .pr_choix_tarif{ color:#ffe3d2; }
/* v205 : « un seul cours a l annee par compte » - type grise, gris valide de pr_btn_connexion:disabled */
.pr_choix_type:disabled{ background:#dbe4ea; color:#8a97a3; border-color:#dbe4ea; cursor:not-allowed; }
.pr_choix_type:disabled .pr_choix_tarif{ color:#8a97a3; }
.pr_pq_liste{ border:1px solid #e3eaf1; border-radius:1rem; overflow:hidden; }
.pr_pq_ligne{ display:flex; align-items:center; gap:0.7rem; width:100%; padding:0.65rem 1rem; background:#fff; border:0; border-bottom:1px solid #eef2f5; cursor:pointer; font-family:inherit; text-align:left; }
.pr_pq_ligne:last-child{ border-bottom:0; }
.pr_pq_ligne:hover{ background:#f6f9fc; }
.pr_pq_ligne.active{ background:#fff4ee; }
.pr_pq_ligne.active .pr_pq_rond{ border-color:#f26522; }
.pr_pq_ligne.active .pr_pq_rond::after{ content:''; display:block; width:10px; height:10px; border-radius:50%; background:#f26522; margin:2px; }
.pr_pq_rond{ width:18px; height:18px; border-radius:50%; border:2px solid #b9c4cd; flex:0 0 18px; }
.pr_pq_avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#f26522,#f8935f); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:0.8rem; flex:0 0 34px; }
.pr_pq_marine{ background:linear-gradient(135deg,#0a4d6e,#116591); }
.pr_pq_nom{ font-weight:800; font-size:0.85rem; color:#1b1f24; line-height:1.2; }
.pr_pq_sous{ font-size:0.72rem; color:#8a97a3; }
.pr_pq_inel{ opacity:0.55; cursor:not-allowed; }
.pr_pq_inel .pr_pq_sous{ color:#b02a37; }
.pr_etiquette{ font-size:0.8rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:#0a4d6e; margin-bottom:0.45rem; display:flex; align-items:center; gap:0.45rem; }
.pr_etiquette i{ color:#f26522; }
.pr_btn_connexion:disabled{ background:#dbe4ea; color:#8a97a3; cursor:not-allowed; }
/* v205 : sur-modale du choix de seance (maquette validee par DATAO le 08/08/2026).
   Conteneur DEDIE hors #id_modal, voile au-dessus du 1070 du site - motif des conteneurs
   etages de l admin. */
#pr_ss_voile{ position:fixed; inset:0; background:rgba(27,31,36,.45); z-index:1085; display:none; align-items:center; justify-content:center; padding:1rem; }
#pr_ss_voile.pr_ouvert{ display:flex; }
.pr_ss_boite{ max-width:440px; width:100%; background:#fff; border-radius:1rem; overflow:hidden; box-shadow:0 16px 50px rgba(0,0,0,.55); }
.pr_ss_tete{ padding:1.3rem 1.5rem 0.9rem 1.5rem; }
.pr_ss_titre{ font-weight:800; font-size:1.15rem; color:#1b1f24; line-height:1.3; }
.pr_ss_sous{ color:#5a6672; font-size:0.88rem; margin-top:0.2rem; }
.pr_ss_sous .pr_ss_type{ color:#f26522; font-weight:700; }
.pr_ss_corps{ max-height:360px; overflow-y:auto; padding:0.4rem 1.5rem; background:#fbfcfd; border-top:1px solid #eef2f5; border-bottom:1px solid #eef2f5; }
.pr_ss_ligne{ display:flex; align-items:center; justify-content:space-between; gap:0.8rem; background:#fff; border:1px solid #dbe4ea; border-radius:0.8rem; padding:0.75rem 1rem; margin:0.55rem 0; }
.pr_ss_ligne:hover{ border-color:#0a4d6e; }
.pr_ss_date{ font-weight:800; color:#0a4d6e; font-size:0.95rem; }
.pr_ss_heure{ color:#5a6672; font-size:0.8rem; margin-top:0.1rem; }
.pr_ss_choisir{ background:#f26522; color:#fff; border:0; border-radius:2rem; padding:0.45rem 1.1rem; font-weight:700; font-size:0.85rem; white-space:nowrap; }
.pr_ss_choisir:hover{ background:#d9551a; }
.pr_ss_pied{ padding:0.9rem 1.5rem; display:flex; justify-content:flex-end; }
/* v223 : LA MODALE DE VERIFICATION DU PANIER - sa coquille. Maquette
   site_modale_verification_panier_v223_v1, validee le 13/08/2026. Elle se pose au-dessus de la
   surmodale de seances (1085), qui peut rester ouverte derriere elle. */
#pr_vp_voile{ position:fixed; inset:0; background:rgba(27,31,36,.45); z-index:1090; display:none; align-items:center; justify-content:center; padding:1rem; }
#pr_vp_voile.pr_ouvert{ display:flex; }
.pr_vp_boite{ max-width:640px; width:100%; background:#fff; border-radius:0.9rem; overflow:hidden; box-shadow:0 1rem 3rem rgba(0,0,0,.18); }
.pr_vp_tete{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.3rem; border-bottom:1px solid #eef2f5; }
.pr_vp_titre{ font-weight:800; color:#1b1f24; }
.pr_vp_corps{ padding:0 1.4rem 1.4rem 1.4rem; max-height:70vh; overflow-y:auto; }
.pr_vp_pied{ padding:1rem 1.3rem; border-top:1px solid #eef2f5; background:#fbfcfd; }
.pr_vp_dates{ border-top:1px dashed #e3eaf1; padding-top:0.8rem; }
/* v205 : option de saison « creation de proche pendant la pre-inscription » (decision DATAO
   08/08/2026) - la ligne « Ajouter un proche » en queue de la liste Pour qui (le rond est
   remplace par un avatar neutre a icone plus) + le voile de la sur-modale de creation :
   motif pr_ss_* reutilise, seule l identite du conteneur change. */
.pr_pq_ajouter .pr_pq_nom{ color:#0a4d6e; }
.pr_pq_neutre{ background:linear-gradient(135deg,#5a6672,#8a97a3); }
#pr_pa_voile{ position:fixed; inset:0; background:rgba(27,31,36,.45); z-index:1085; display:none; align-items:center; justify-content:center; padding:1rem; }
#pr_pa_voile.pr_ouvert{ display:flex; }
#pr_pa_voile .pr_ss_boite{ max-width:520px; }
#pr_pa_voile .pr_ss_corps{ padding:1rem 1.5rem; }
#pr_pa_voile .pr_ss_pied{ gap:0.6rem; }
.pr_seance_recap{ margin-top:0.6rem; font-size:0.85rem; color:#0d5c26; font-weight:700; display:none; align-items:center; gap:0.4rem; }
.pr_seance_recap.pr_visible{ display:flex; }
/* v205 : badge du panier - variante C validee par DATAO le 08/08/2026 (mini rond 16px
   colle au coin de l icone). Les couleurs viennent du reglage du menu (style inline)
   ou du repli bg-warning. */
.pr_badge_menu{ position:absolute; top:-5px; right:-7px; font-size:0.6rem; font-weight:800; border-radius:8px; min-width:16px; height:16px; line-height:16px; text-align:center; padding:0 3px; }
.pr_badge_regime{ font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; border-radius:8px; padding:0.1rem 0.5rem; white-space:nowrap; }
.pr_badge_reinscrit{ background-color:#d8f0e0; color:#0c5132; }
.pr_badge_nouveau{ background-color:#e2ecf5; color:#0a4d6e; }
/* v205 : indicateur de progression du parcours de reservation en 4 etapes (maquette
   validee par DATAO le 08/08/2026 - motif de la proposition E etendu). Etats : fait
   (vert, coche, cliquable - le retour est libre), en cours (orange grossi), a venir. */
.pr_etapes{ display:grid; grid-template-columns:repeat(4,1fr); position:relative; gap:0.4rem; }
.pr_etapes::before{ content:''; position:absolute; top:24px; left:12.5%; right:12.5%; height:3px; background:#dbe4ea; border-radius:2px; }
.pr_etape{ text-align:center; position:relative; }
.pr_etape_rond{ width:48px; height:48px; border-radius:50%; margin:0 auto 0.5rem auto; display:flex; align-items:center; justify-content:center; font-size:1.05rem; font-weight:800; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.15); background:#dbe4ea; color:#5a6672; }
.pr_etape_nom{ font-size:0.76rem; font-weight:700; color:#8a97a3; line-height:1.25; }
.pr_etape_fait .pr_etape_rond{ background:#0d5c26; color:#fff; cursor:pointer; }
.pr_etape_fait .pr_etape_nom{ color:#0d5c26; }
.pr_etape_active .pr_etape_rond{ background:#f26522; color:#fff; transform:scale(1.12); }
.pr_etape_active .pr_etape_nom{ color:#f26522; }
.pr_etapes_avancee_2::before{ background:linear-gradient(90deg,#0d5c26 0%,#0d5c26 33%,#f26522 45%,#dbe4ea 55%); }
.pr_etapes_avancee_3::before{ background:linear-gradient(90deg,#0d5c26 0%,#0d5c26 60%,#f26522 72%,#dbe4ea 82%); }
.pr_etapes_avancee_4::before{ background:linear-gradient(90deg,#0d5c26 0%,#0d5c26 82%,#f26522 95%); }
.pr_etape_courante_libelle{ text-align:center; font-weight:800; color:#f26522; font-size:0.9rem; margin-top:0.6rem; display:none; }
/* v205 : tarifs du tiroir - disposition A validee par DATAO le 08/08/2026 (tarif a
   droite de chaque ligne, pied Sous-total / Remise multi-cours / Total). */
.pr_tarif_ligne{ font-weight:800; color:#0a4d6e; font-size:0.85rem; white-space:nowrap; align-self:center; }
.pr_tarif_gratuit{ color:#0d5c26; font-weight:700; font-size:0.78rem; }
.pr_recap_pied{ font-size:0.85rem; color:#3c4650; }
.pr_recap_ligne{ display:flex; justify-content:space-between; padding:0.15rem 0; }
.pr_recap_remise{ color:#0d5c26; }
.pr_recap_total{ font-weight:800; font-size:1rem; color:#1b1f24; border-top:2px solid #e6e6e6; margin-top:0.35rem; padding-top:0.45rem; }
/* v205 : étape 3 - lignes de montants du récapitulatif (maquette validée) */
.pr_ligne_montant{ display:flex; justify-content:space-between; align-items:center; padding:0.55rem 0; border-bottom:1px dashed #e3eaf1; font-size:0.86rem; }
.pr_ligne_montant:last-of-type{ border-bottom:0; }
.pr_ligne_montant .qui{ color:#8a97a3; font-size:0.78rem; }
/* v205 : étape 4 - moyens de paiement (maquette validée site_paiement_etape4_v205_v4) */
.pm_icone{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#0a4d6e,#116591); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 34px; }
.pm_icone.cb{ background:linear-gradient(135deg,#f26522,#f8935f); }
.pm_badge_valide{ font-size:0.68rem; font-weight:800; color:#0d5c26; background:#f2f9f4; border:1px solid #cde8d5; border-radius:2rem; padding:0.2rem 0.6rem; margin-left:auto; white-space:nowrap; }
.pm_badge_attente{ font-size:0.68rem; font-weight:800; color:#7a5a00; background:#fdf6e3; border:1px solid #efe0b0; border-radius:2rem; padding:0.2rem 0.6rem; margin-left:auto; white-space:nowrap; }
.pm_detail{ background:#f6f9fc; border-top:1px solid #eef2f5; padding:0.8rem 1rem 0.8rem 3.4rem; font-size:0.8rem; color:#3c4650; }
/* v205 : étape 4 v5 - total groupé PAR PRATIQUANT + accordéon de saisie des modes hors
   ligne (maquette validée site_paiement_etape4_v205_v5) */
.pm_pratiquant{ padding:0.55rem 0 0.15rem 0; border-bottom:1px dashed #e3eaf1; }
.pm_pratiquant:last-of-type{ border-bottom:0; }
.pm_pratiquant_nom{ font-weight:800; font-size:0.9rem; display:flex; align-items:center; gap:0.45rem; flex-wrap:wrap; }
.pm_cours_ligne{ display:flex; justify-content:space-between; align-items:center; gap:0.8rem; padding:0.25rem 0 0.25rem 1.1rem; font-size:0.84rem; }
.pm_cours_ligne .qui{ color:#8a97a3; font-size:0.78rem; }
.pm_accordeon{ max-height:0; overflow:hidden; transition:max-height 0.25s ease; background:#fbfcfd; border-bottom:1px solid #eef2f5; }
.pm_accordeon.ouvert{ max-height:130px; border-bottom:1px solid #eef2f5; }
.pm_accordeon_corps{ display:flex; align-items:center; gap:0.7rem; padding:0.8rem 1rem 0.9rem 3.4rem; flex-wrap:wrap; }
.pm_accordeon_libelle{ font-size:0.8rem; color:#3c4650; font-weight:700; }
.pm_montant_boite{ display:flex; align-items:center; border:1px solid #cfd8df; border-radius:0.5rem; background:#fff; overflow:hidden; }
.pm_montant_boite input{ border:0; outline:0; padding:0.5rem 0.6rem; width:110px; font-family:inherit; font-size:0.9rem; font-weight:700; text-align:right; color:#1b1f24; }
.pm_montant_boite span{ padding:0.5rem 0.6rem; background:#f4f5f7; color:#5a6672; font-weight:800; font-size:0.85rem; border-left:1px solid #e6e6e6; }
.pm_reste{ font-size:0.76rem; color:#8a97a3; }
.pm_reste b{ color:#0a4d6e; }
/* hors maquette (écart annoncé) : la validation BS5 pose son message invalid-feedback dans
   la boîte montant - il passe sous le champ sur sa propre ligne, et l'accordéon ouvert se
   libère du plafond de 130px quand un message s'affiche, pour ne jamais le masquer */
.pm_montant_boite{ flex-wrap:wrap; }
.pm_montant_boite .invalid-feedback{ flex-basis:100%; padding:0 0.6rem 0.35rem 0.6rem; }
.pm_accordeon.ouvert:has(.invalid-feedback){ max-height:none; }
/* v224 : l accordeon porte desormais le texte de son moyen (.pm_detail) et, pour le cheque en
   plusieurs fois, le choix du nombre. Mesure du 13/08/2026 : 463 px de contenu pour un plafond
   de 130 px - 334 px etaient coupes. Meme motif que la regle ci-dessus : le plafond ne saute que
   pour un accordeon qui a quelque chose a dire ; un accordeon vide garde son cadre serre. */
.pm_accordeon.ouvert:has(.pm_detail){ max-height:none; }
/* v205 : étape 2 du formulaire de réservation, cartes bénéficiaire (maquette validée) */
.pr_benef{ border:1px solid #e3eaf1; border-radius:1rem; margin-bottom:1.6rem; overflow:hidden; }
.pr_benef_tete{ display:flex; align-items:center; gap:0.8rem; padding:1rem 1.3rem; background:#fbfcfd; border-bottom:1px solid #eef2f5; }
.pr_avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#f26522,#f8935f); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.pr_avatar_marine{ background:linear-gradient(135deg,#0a4d6e,#116591); }
.pr_benef_nom{ font-weight:800; color:#1b1f24; }
.pr_benef_sous{ font-size:0.75rem; color:#8a97a3; }
.pr_benef_badge{ font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:#fff; background:#0a4d6e; border-radius:2rem; padding:0.25rem 0.7rem; margin-left:auto; }
.pr_benef_badge.pr_simplifie{ background:#0d5c26; }
.pr_chips{ display:flex; flex-wrap:wrap; gap:0.4rem; padding:0.8rem 1.3rem 0 1.3rem; }
.pr_chip{ font-size:0.75rem; font-weight:700; color:#0a4d6e; background:#eef4f9; border-radius:2rem; padding:0.3rem 0.8rem; }
.pr_chip i{ color:#f26522; margin-right:0.3rem; }
.pr_benef_corps{ padding:1rem 1.3rem 1.3rem 1.3rem; }
.pr_resume{ display:flex; align-items:flex-start; gap:0.7rem; background:#f2f9f4; border:1px solid #cde8d5; border-radius:0.8rem; padding:0.8rem 1rem; margin-bottom:1rem; }
.pr_resume i{ color:#0d5c26; margin-top:0.15rem; }
.pr_resume_texte{ font-size:0.86rem; color:#2c3a2f; line-height:1.5; }
.pr_resume_texte b{ color:#1b1f24; }
.pr_champ, .pr_select{ border:2px solid #dbe4ea; border-radius:0.7rem; padding:0.6rem 0.9rem; font-size:0.9rem; width:100%; background:#fff; }
.pr_champ:focus, .pr_select:focus{ outline:none; border-color:#f26522; box-shadow:0 0 0 3px rgba(242,101,34,0.15); }
.pr_rang{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:0.7rem; }
/* v205 : l indicatif (composant vanilla mutualise, calibre pour les champs de
   inscription.php - 35px, bordure 1px #ced4da, rayon 4px) prend DANS la carte
   pr_benef la geometrie des pr_champ voisins - mesure CIC du 08/08/2026. */
.pr_benef .indicatif_vanilla{ width:100%; }
.pr_benef .indicatif_vanilla_bouton{ width:100%; border:2px solid #dbe4ea; border-radius:0.7rem; padding:0.6rem 0.9rem; font-size:0.9rem; background:#fff; }
.pr_benef .indicatif_vanilla_bouton img{ width:20px; }
@media (max-width:575.98px){
.pr_benef .indicatif_vanilla_bouton{ flex-wrap:nowrap; gap:4px; padding:0.6rem 0.5rem; }
.pr_benef .indicatif_vanilla_caret{ display:none; }
}
/* v205 : la regle v31 select[id^="civilite"]{width:100px} gagne sur .pr_select -
   dans la carte pr_benef tous les selects prennent la largeur de leur cellule. */
.pr_benef select.pr_select{ width:100%; }
@media (max-width:767.98px){
.pr_etape_nom{ display:none; }
.pr_etape_rond{ width:38px; height:38px; font-size:0.9rem; }
.pr_etapes::before{ top:19px; }
.pr_etape_courante_libelle{ display:block; }
}
/* v205 : tiroir du panier de réservation (étape 2, maquette validée) */
#pr_voile{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:900; opacity:0; visibility:hidden; transition:opacity .25s ease; }
#pr_voile.pr_ouvert{ opacity:1; visibility:visible; }
#pr_tiroir{ position:fixed; top:0; right:0; bottom:0; width:24rem; max-width:92vw; background:#fff; box-shadow:-8px 0 30px rgba(0,0,0,.3); z-index:901; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .25s ease; }
#pr_tiroir.pr_ouvert{ transform:translateX(0); }
#pr_tiroir .pr_tete{ padding:1.1rem 1rem; background:#f26522; color:#fff; font-weight:700; display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
#pr_tiroir .pr_tete .pr_compte{ font-weight:400; color:rgba(255,255,255,.85); }
#pr_tiroir .pr_fermer{ margin-left:auto; border:0; background:transparent; color:#fff; font-size:1.1rem; cursor:pointer; padding:.1rem .35rem; }
#pr_tiroir .pr_corps{ overflow:auto; flex:1 1 auto; }
.pr_groupe_tete{ display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; background:#f4f5f7; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; font-weight:700; color:#1b1f24; font-size:.88rem; position:sticky; top:0; }
.pr_groupe_tete .pr_nombre{ margin-left:auto; font-weight:400; color:#5a6672; font-size:.8rem; }
.pr_ligne{ padding:.7rem 1rem .7rem 2.1rem; border-bottom:1px solid #f0f0f0; display:flex; gap:.65rem; align-items:flex-start; transition: background-color 250ms ease; }
.pr_ligne_erreur{ background-color:#fdecea; box-shadow:inset 3px 0 0 #b02a37; }
.pr_ligne:hover{ background-color:#eef4f9; }
.pr_ligne_corps{ flex:1; min-width:0; }
.pr_nom{ font-weight:700; color:#1b1f24; font-size:.88rem; }
.pr_detail{ color:#5a6672; font-size:.77rem; margin-top:.15rem; }
/* v206 : mention de liste d attente. Elle vit dans le DETAIL de la ligne, jamais dans
   .pr_tarif_ligne (nowrap) qui ecraserait le nom du cours. #6b4f00 sur blanc = 7,65:1 (AAA). */
.pr_mention_attente{ color:#6b4f00; font-weight:700; }
.pr_supp{ border:0; background:transparent; color:#a3242f; font-size:.95rem; cursor:pointer; padding:.15rem .3rem; }
#pr_tiroir .pr_pied{ flex:0 0 auto; border-top:1px solid #e6e6e6; background:#fafafa; padding:.85rem 1rem; }
#pr_tiroir .pr_vide{ padding:2.5rem 1rem; text-align:center; color:#5a6672; font-size:.85rem; }
@media (max-width:767.98px){
	#pr_tiroir{ width:100%; max-width:none; }
}
.pc_grille{
	align-items: stretch;
}
.pc_nom{
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.25;
}
.pc_description{
	font-size: 0.8125rem;
	color: #41474e;
	margin-bottom: 0.5rem;
}
.pc_ligne{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: #1b1f24;
	margin-bottom: 0.25rem;
}
.pc_ligne i{
	width: 1rem;
	text-align: center;
	color: #6b7280;
}
.pc_places{
	font-size: 0.6875rem;
	color: #41474e;
	margin-bottom: 0.25rem;
}

.pc_types{
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem;
	margin-bottom: 0.4rem;
}

.pc_type{
	display: inline-block;
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.35;
	border-radius: 2rem;
	padding: 0.05rem 0.4rem;
	white-space: nowrap;
}

.pc_type_annee{
	background: #f3eefa;
	color: #4b2a7b;
}

.pc_type_carte{
	background: #eef2f7;
	color: #2c3e50;
}

.pc_type_essai{
	background: #fdf6e3;
	color: #6b4d06;
}

.pc_pastille_etat{
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 600;
	border-radius: 2rem;
	padding: 0.15rem 0.6rem;
	margin-bottom: 0.4rem;
}

.pc_pastille_attente{
	background: #fdf1e3;
	color: #7a4106;
}

.pc_pastille_complet{
	background: #fdecec;
	color: #9c1717;
}
/* v219 : LA CARD D UN COURS COMPLET - voile et ruban d angle (maquette
   maquette_card_complet_v1.html, validee DATAO le 13/08/2026). Le voile est a 10 % : c est
   le MAXIMUM mesure qui garde le texte de la card au-dessus de 7:1 - nom de cours 12,31:1,
   texte doux 7,06:1. A 50 % ils tombaient a 3,24:1 et 2,53:1, sous le minimum AA.
   Classes opt-in : .pc_carte n est pas touchee, seules les cards completes les portent.
   Aucune couleur nouvelle - #9c1717 est deja celui de .pc_pastille_complet. */
.pc_carte_complet{
	position: relative;
	overflow: hidden;
}
.pc_voile_complet{
	position: absolute;
	inset: 0;
	border-radius: 0.35rem;
	pointer-events: none;
	background: rgba(255,255,255,0.10);
}
.pc_ruban_complet{
	position: absolute;
	top: 1.35rem;
	right: -3.1rem;
	width: 11rem;
	transform: rotate(38deg);
	background: #9c1717;
	color: #FFFFFF;
	text-align: center;
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.22rem 0;
	box-shadow: 0 1px 4px rgba(0,0,0,0.28);
}

.pc_cadre{
	border: 1px solid var(--pc_couleur_cadre);
}

.pc_etat{
	margin-top: auto;
	padding-top: 0.6rem;
	text-align: center;
}
.pc_bouton{
	border: 0;
	border-radius: 2rem;
	padding: 0.4rem 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
}
.pc_reserver{
	background: #e8f3ec;
	color: #0d5c26;
}
.pc_attente{
	background: #fdf1e3;
	color: #7a4106;
}
/* COMPLET : une INFORMATION, pas une action - decision DATAO, pas de bouton */
/* COMPLET reste une INFORMATION, pas un bouton (decision DATAO). Mais il prend le
   meme padding vertical, sinon il s affiche 7px plus haut que les boutons voisins
   de la meme rangee - ecart mesure le 07/08/2026. */
/* masquage par le filtrage local */
.pc_masque{
	display: none;
}
@media(max-width: 991.98px){
	.pc_defilement{
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.75rem;
	}
	/* v225 : en petit ecran la largeur redevient FIXE et le defilement prend le relais -
	   comportement d avant v225, mais sur le nombre reel de colonnes. */
	.pc_entetes,
	.pc_grille{
		grid-template-columns: repeat(var(--pc-colonnes), 16rem);
	}
}

/* v201 : les regles de la carte virtuelle, reprises telles quelles de css_admin.css.
   L affichage « Carte prepayee » les emploie AUSSI cote site. */
.carte_virtuelle_datao{ position: relative; overflow: hidden; max-width: 420px; margin-left: auto; margin-right: auto; aspect-ratio: 1.586; border-radius: 14px; background: linear-gradient(135deg, var(--marine-fonce), var(--marine)); color: #FFFFFF; padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 24px rgba(2,36,63,.25); }

.carte_virtuelle_entete_datao{ display: flex; justify-content: space-between; align-items: flex-start; }

.carte_virtuelle_entete_datao .fa-credit-card{ font-size: 1.4rem; }

.carte_virtuelle_asso_datao{ font-size: 0.78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }

.carte_virtuelle_nom_datao{ font-weight: 600; font-size: 1.05rem; }

.carte_virtuelle_badge_datao{ display: inline-block; background: #FFCC33; color: #02243F; border-radius: 10px; padding: 4px 16px; font-size: 1.45rem; font-weight: 700; }

.carte_virtuelle_pied_datao{ display: flex; justify-content: space-between; font-size: 0.78rem; opacity: .92; }

.carte_virtuelle_numero_datao{ font-size: 1.02rem; letter-spacing: .18em; font-weight: 600; opacity: .85; }

.carte_virtuelle_titulaire_datao{ text-transform: uppercase; letter-spacing: .06em; opacity: .85; }

.carte_virtuelle_filigrane_datao{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 78%; max-width: 70%; opacity: .14; pointer-events: none; }

.carte_virtuelle_datao > div{ position: relative; }

/* v201 - affichage « Carte prepayee » d une categorie d article.
   Contrastes calcules : prix 8,16:1 · bouton 7,17:1 · mentions 9,2:1 sur fond blanc. */
.cp_bloc_datao{
	background: #FFFFFF;
	color: #1b1f24;
	border-radius: 0.5rem;
	padding: 1rem;
	/* v201 : PAS de height:100% ici. La colonne est etiree par sa rangee flex a la
	   hauteur de la plus grande ; le bloc en prendrait 100%, carte comprise, alors
	   qu il n occupe que la moitie basse - 588 px mesures pour 301 px de contenu. */
}

.cp_nom_datao{
	font-weight: 600;
	font-size: 0.9375rem;
	margin-top: 0.5rem;
}

.cp_infos_datao{
	margin-top: 0.75rem;
}

.cp_prix_datao{
	font-size: 1.5rem;
	font-weight: 700;
	color: #0d5c26;
}

.cp_credit_datao{
	font-size: 0.8125rem;
	color: #41474e;
}

.cp_cours_datao{
	font-size: 0.8125rem;
	color: #41474e;
	margin-top: 0.5rem;
}

.cp_cours_datao i{
	margin-right: 0.35rem;
}

.cp_description_datao{
	font-size: 0.8125rem;
	color: #41474e;
	margin-top: 0.5rem;
}

.cp_action_datao{
	text-align: center;
	margin-top: 1rem;
}

.cp_bouton_datao{
	display: inline-block;
	border: 0;
	border-radius: 2rem;
	padding: 0.45rem 1.4rem;
	font-size: 0.875rem;
	font-weight: 600;
	background: #e8f3ec;
	color: #0d5c26;
	text-decoration: none;
}

/* v201 : en colonne, la carte prepayee ne peut pas garder le ratio bancaire - 143 px de
   large donnaient 90 px de haut pour 381 px de contenu, dont 291 coupes. Ici le contenu
   dicte la hauteur. Classe dediee : la carte de la fiche article garde son format. */
/* v201 : la carte garde son format CARTE BANCAIRE (ratio 1,586, herite de la classe de
   base). Cette variante ne fait qu une chose : l empecher de deborder d une colonne plus
   etroite que ses 420 px. Le contenu, lui, est en tailles fixes et demande 217 px : sous
   ~340 px de large la hauteur du ratio passe dessous et le texte serait tronque - c est
   pourquoi le nombre de colonnes est borne a 2 ou 3 (decision DATAO).
   Les DEUX classes : .carte_virtuelle_datao est aussi declaree dans css_admin.css, charge
   apres celui-ci ; a specificite egale la derniere gagnerait. */
.carte_virtuelle_datao.carte_virtuelle_fluide_datao{
	max-width: 100%;
}

/* v201 : les cours a la carte, en pastilles sous le decompte de la carte prepayee.
   Contraste mesure #2c3e50 sur #eef2f7 = 9,43:1 - AAA (7:1 exige). */
.cp_liste_cours_datao{
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: 0.4rem;
}

.cp_liste_cours_datao span{
	font-size: 0.6875rem;
	font-weight: 600;
	background: #eef2f7;
	color: #2c3e50;
	border-radius: 2rem;
	padding: 0.15rem 0.6rem;
}

/* v201 : les blocs des cartes prepayees s alignent en bas, quels que soient leurs contenus
   (decision DATAO). La colonne devient une pile, le bloc occupe ce qui reste - c est la
   STRUCTURE qui aligne, pas une hauteur forcee : height:100% prenait la colonne entiere,
   carte comprise, et laissait 287 px de vide (mesure). */
.cp_colonne_datao{
	display: flex;
	flex-direction: column;
}

.cp_colonne_datao .carte_virtuelle_datao{
	/* v203 : la colonne est une pile flex (pour aligner les boutons) ; sans largeur imposee,
	   aspect-ratio fait calculer la LARGEUR depuis la hauteur et la carte reste etroite -
	   289 px mesures pour 504 utiles. Ici c est la hauteur qui suit le ratio. */
	width: 100%;
}

.cp_colonne_datao .cp_bloc_datao{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.cp_colonne_datao .cp_action_datao{
	margin-top: 10px;
}

/* v203 : le texte explicatif d un onglet, sous la barre (proposition B validee). Reprend
   le motif de gf_info_datao - bordure gauche, fond clair - et herite de la couleur de
   bordure choisie dans la modale, pour que l objet reste d une seule piece.
   Contraste mesure #41474e sur #f6f9fc = 7,42:1 - AAA (7:1 exige). */
.pc_intro_datao{
	background: #f6f9fc;
	border-left: 4px solid var(--pc_couleur_cadre);
	border-radius: 10px;
	padding: 0.875rem 1.125rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #41474e;
	margin-bottom: 1.5rem;
}

.pc_intro_datao > *:last-child{
	margin-bottom: 0;
}

/* v205 : l option « Afficher le tarif par type » du planning des cours. La variante
   pc_types_tarifs empile les lignes du bloc des types ; chaque ligne pose le libelle
   a gauche et son tarif a droite. Graisse et couleur reprises des voisins mesures
   .pc_ligne et .pc_places ; sans l option, .pc_types garde son rendu en pastilles. */
.pc_types_tarifs{
	flex-direction: column;
	align-items: stretch;
	gap: 0.25rem;
}

.pc_type_ligne{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}

.pc_type_tarif{
	font-size: 0.75rem;
	font-weight: 700;
	color: #1b1f24;
	white-space: nowrap;
}
/* v205 : page de retour de paiement de la réservation (maquette validée
   site_retour_paiement_v205_v1). Héros par famille d'état + bandeau « Payé par carte
   bancaire » + pas de la carte « Et maintenant ? ». */
.rp_heros{ text-align:center; padding:1.2rem 0 1.6rem 0; }
.rp_rond{ width:84px; height:84px; border-radius:50%; margin:0 auto 1rem auto; display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.14); }
.rp_ok{ background:linear-gradient(135deg,#0d5c26,#1d8a41); }
.rp_att{ background:linear-gradient(135deg,#b8860b,#d4a017); }
.rp_ko{ background:linear-gradient(135deg,#b02a37,#d24450); }
.rp_info{ background:linear-gradient(135deg,#0a4d6e,#116591); }
.rp_titre{ font-size:1.45rem; font-weight:800; margin:0 0 0.35rem 0; }
.rp_sous{ color:#5a6672; font-size:0.9rem; max-width:560px; margin:0 auto; }
.rp_pas{ display:flex; gap:0.9rem; align-items:flex-start; padding:0.45rem 0; font-size:0.86rem; }
.rp_pas i{ color:#0d5c26; margin-top:0.15rem; }
.rp_recap_paiement{ display:flex; justify-content:space-between; align-items:center; background:#f2f9f4; border:1px solid #cde8d5; border-radius:0.7rem; padding:0.8rem 1.1rem; font-size:0.9rem; margin-bottom:1.4rem; }
.rp_recap_paiement b{ font-size:1.05rem; }
/* v206 : le bandeau des sommes DUES (reglement hors ligne) - decline du bandeau vert */
.rp_recap_du{ background:#fff8e8; border:1px solid #f0dca8; border-radius:0.7rem; padding:0.8rem 1.1rem; font-size:0.9rem; margin-bottom:1.4rem; }
.rp_recap_du_tete{ display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.rp_recap_du_tete b{ font-size:1.05rem; }
.rp_recap_du_detail{ display:flex; justify-content:space-between; align-items:center; font-size:0.84rem; color:#6a5a33; padding-top:0.45rem; margin-top:0.45rem; border-top:1px dashed #f0dca8; }
.rp_recap_du_detail + .rp_recap_du_detail{ border-top:0; padding-top:0.2rem; margin-top:0.2rem; }
/* v206 : le cadre de la signature du parcours - la marque d erreur porte sur le CADRE,
   jamais sur le champ cache qui la transporte (un element invisible ne se voit pas). */
/* v206 : le bloc est CENTRE (retour DATAO) - le cadre etant en inline-block, il suffit
   de centrer son conteneur ; le bouton Effacer suit dessous, degage par sa classe BS. */
.pr_signature_zone{ margin-top:1.2rem; text-align:center; }
.pr_signature_aide{ font-size:0.8rem; color:#6b7783; margin-bottom:0.5rem; }
.pr_signature{ display:inline-block; border:1px solid #cfd8df; border-radius:0.5rem; background:#fff; line-height:0; max-width:100%; overflow:hidden; }
.pr_signature canvas{ touch-action:none; max-width:100%; }
.pr_signature.is-invalid{ border-color:#b02a37; border-width:2px; }
.pr_signature_actions{ margin-top:0.9rem; }
.pr_signature.is-invalid + .invalid-feedback, .pr_signature.is-invalid ~ .invalid-feedback{ display:block; }
/* hors maquette (écart annoncé) : le bandeau d'étapes du parcours TOUT au vert - la ligne
   passe au vert et les ronds faits redeviennent inertes (le parcours est terminé, aucun
   retour possible depuis la page de retour de paiement) */
.rp_etapes_complet::before{ background:#0d5c26; }
.rp_etapes_complet .pr_etape_rond{ cursor:default; }

/* v207 : parcours boutique - acheter une carte prepayee (maquette validee par DATAO le
   09/08/2026). Douze classes seulement : tout le reste du parcours est repris tel quel de
   la reservation, pour que l achat ne donne pas l impression de changer de site. */
/* le bandeau d etapes de la boutique n en compte que DEUX, la ou .pr_etapes en grille
   quatre colonnes sert au parcours de reservation - ecart annonce par rapport a la
   maquette, qui reutilisait .pr_etapes telle quelle et tassait les deux etapes a gauche */
.bq_etapes{ grid-template-columns:repeat(2,1fr); }
.bq_etapes::before{ left:25%; right:25%; }
/* une ligne d article du panier d achat */
.bq_ligne{ display:flex; align-items:center; gap:1rem; padding:0.9rem 0; border-bottom:1px solid #eef2f5; flex-wrap:wrap; }
.bq_visuel{ width:54px; height:54px; flex:0 0 54px; border-radius:0.7rem; background:linear-gradient(135deg,#4c3a91,#7659c9); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.bq_texte{ flex:1 1 220px; }
.bq_nom{ font-weight:800; font-size:0.95rem; }
.bq_sous{ font-size:0.8rem; color:#6b7783; }
.bq_qte{ width:110px; }
.bq_prix{ font-weight:800; font-size:1rem; min-width:90px; text-align:right; }
.bq_supp{ background:none; border:0; color:#b02a37; font-size:0.95rem; cursor:pointer; }
/* les codes de carte, a la confirmation : une quantite de deux donne deux codes distincts */
.bq_codes{ background:#f3f0fb; border:1px solid #ddd5f2; border-radius:0.8rem; padding:1.1rem; text-align:center; margin-bottom:1.4rem; }
.bq_code_titre{ font-size:0.74rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:#6a6191; margin-bottom:0.6rem; }
.bq_code{ font-family:ui-monospace, Menlo, Consolas, monospace; font-size:1.35rem; font-weight:700; letter-spacing:0.12em; color:#2f2557; }
.bq_code + .bq_code{ margin-top:0.3rem; }
.bq_code_aide{ font-size:0.8rem; color:#6a6191; margin-top:0.7rem; }

/* v206 : le garde-fou de preinscription - le message qui explique pourquoi le bouton
   « Finaliser ma reservation » est inerte. Il vit dans le pied du tiroir, juste au-dessus. */
.pr_garde_preinscription{ background:#fff6e0; border-left:4px solid #f5b400; border-radius:10px; padding:10px 12px; font-size:0.8125rem; color:#243044; margin-bottom:0.6rem; }
.pr_garde_preinscription i{ margin-right:0.4rem; color:#8a6d00; }


/* v206 : « Mes cours a la carte » - une ligne de seance cote adherent.
   Maquette site_mes_cours_carte_v206_v1 validee le 09/08/2026. */
.mc_seance{ display:flex; align-items:center; gap:0.9rem; padding:0.85rem 0; border-bottom:1px solid #eef2f5; }
.mc_seance:last-child{ border-bottom:0; }
.mc_quand{ flex:0 0 150px; }
.mc_jour{ font-weight:700; font-size:0.92rem; }
.mc_heure{ font-size:0.8rem; color:#8a97a3; }
.mc_cours{ flex:1 1 auto; min-width:0; }
.mc_nom{ font-weight:700; font-size:0.95rem; }
.mc_desc{ font-size:0.8rem; color:#8a97a3; }
.mc_cout{ flex:0 0 auto; font-weight:700; color:#0a4d6e; white-space:nowrap; }
.mc_action{ flex:0 0 auto; }
.mc_passee{ opacity:0.62; }
/* sous 576 px la ligne se replie : l horaire et le cout passent sous le nom du cours */
@media (max-width: 575.98px){
.mc_seance{ flex-wrap:wrap; gap:0.35rem 0.7rem; }
.mc_quand{ flex:0 0 100%; order:1; }
.mc_cours{ flex:1 1 100%; order:2; }
.mc_cout{ order:3; }
.mc_action{ order:4; margin-left:auto; }
}

/* v208 : la meme illustration, en VERT, quand le message annonce une ouverture plutot qu une
   attente (maquette site_modale_double_affichage_v208_v2, version B validee DATAO 10/08/2026).
   Ce sont des MODIFICATEURS poses a cote de pr_visiteur_cercle / pr_visiteur_ico - jamais une
   seconde version de ces classes, qui divergerait des la premiere retouche.
   Le vert porte ici une information : ce qui est ouvert, par opposition a ce qui attend. */
.pr_visiteur_cercle_vert{ background:#dcefe3; }
.pr_visiteur_ico_vert{ color:#0d5c26; }
/* v208 : apparition en cascade des cartes de categorie de cours.
   L opacite nulle ne vit QUE dans l animation. Si celle-ci est annulee - mouvement reduit,
   feuille non chargee - les cartes sont simplement la : un effet decoratif ne doit jamais
   pouvoir masquer du contenu. Le decalage vient de --lccs-rang, pose en ligne par le rendu. */
.lccs_apparition{ animation: lccs_apparition_fondu 0.5s ease-out both; animation-delay: calc(var(--lccs-rang) * 0.08s); }
.lccs_apparition_monte{ animation-name: lccs_apparition_monte; }
@keyframes lccs_apparition_fondu{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes lccs_apparition_monte{ from{ opacity: 0; transform: translateY(1rem); } to{ opacity: 1; transform: none; } }

/* v208 : annulation OPT-IN du soulevement. carte_affichage_6 est partagee par trois objets et sa
   regle globale n est pas touchee : (0,4,0) contre (0,3,0), donc sans !important. */
.contenu_site .carte_affichage_6.lccs_sans_soulevement:hover{ transform: none; }

@media (prefers-reduced-motion: reduce){
	.lccs_apparition{ animation: none; }
}

/* ------------------------------------------------------------------ */
/* v211 : PLANNING MULTI COURS - la grille « jours en lignes, lieux en colonnes ».
   L objet planning existant met les jours EN COLONNES : ce n est pas un reglage d affichage,
   c est une autre structure, et elle a ses propres classes.
   AUCUNE COULEUR ICI. Les trois couleurs reglables (carte, bandeau, nom des lieux) descendent en
   style inline depuis le rendu, comme le planning existant le fait pour sa couleur de cadre.
   Le nombre de colonnes vient aussi du rendu : il vaut le nombre de lieux de la saison. */
.pl_bloc_jour{margin-bottom:0;}
.pl_jour{text-align:center; font-weight:700; letter-spacing:0.04em; padding:0.75rem 1rem; border-radius:0.25rem; margin-bottom:0.75rem;}
.pl_lieux{display:grid; gap:0.75rem; margin-bottom:0.5rem;}
.pl_lieu{text-align:center; font-size:0.9375rem; letter-spacing:0.03em; padding:0.25rem 0;}
.pl_colonnes{display:grid; gap:0.75rem; margin-bottom:2.5rem;}
.pl_colonne{display:flex; flex-direction:column; gap:0.5rem;}
.pl_carte{text-align:center; padding:0.85rem 0.95rem; border-radius:0.25rem;}
.pl_heure{font-size:0.9375rem; margin-bottom:0.15rem;}
/* v211 : pc_description et pc_places portent une couleur EN DUR (#41474e) heritee du planning
   existant, ou la carte est blanche. Mesure du 11/08/2026 : 4,49:1 sur l orange de la maquette,
   1,69:1 sur une carte sombre - illisible. Dans CETTE carte elles heritent, et suivent donc le
   texte que le calcul de contraste a choisi.
   La description passe a 0.9375rem : la maquette validee la met a la taille de l horaire. Ecart
   assume avec le planning existant, qui la garde a 0.8125rem. */
.pl_carte .pc_description{color:inherit; font-size:0.9375rem; text-align:center; margin-bottom:0.5rem;}
.pl_carte .pc_ligne{color:inherit; justify-content:center;}
.pl_carte .pc_places{color:inherit; text-align:center;}
/* sous 768px les colonnes s empilent : un planning a plusieurs lieux est illisible en grille sur
   un telephone. Chaque bloc reprend alors le nom de son lieu, que l en-tete ne porte plus. */
@media (max-width:767.98px){
	.pl_lieux{display:none;}
	.pl_colonnes{grid-template-columns:1fr !important;}
	.pl_colonne:empty{display:none;}
	.pl_colonne::before{content:attr(data-lieu); text-align:center; font-size:0.9375rem; padding:0.25rem 0; color:inherit;}
}
/* v211 fin */