:root{
--theme : #2a4795;
--theme_light :#D9E0F4;
--dark:#080E14;
--dark2:#1F2028;
--gold : #FFB347 /*#FFA019*/;
--grey:#f2f2f2;
--grey2:#D9D9D9;
--green : #39b54a;
--green_light : #D7F0DA;
--red:#be1d2c;
--red2:#f23041 ;
--font :#454550;
--rose : #f222a9;
--turquoise:#00fbfb
}

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
margin:0; padding:0; 
border:none ; outline:none; box-sizing:border-box;
-webkit-tap-highlight-color: transparent;
scrollbar-width: thin;
}
body{
 font-family:'Roboto', sans-serif;
 height: 100%;
  position: relative;
  display: block;
  color:var(--font);
  padding-top: 126px;
  /*padding-bottom: 195px;*/
  }
.overlay{
display:none;
background:black;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
opacity:.7;
z-index:12;
transition: all 0.2s ease;
cursor:pointer
}
 
table{ border-collapse:collapse; table-layout:fixed ;}

.mobile_menu{
  display: none;
  position: fixed;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  width: 300px;
  background: white;
  box-shadow: 6px 0 16px -8px rgba(0,0,0,.08),9px 0 28px 0 rgba(0,0,0,.05),12px 0 48px 16px rgba(0,0,0,.03);
  left: -350px;
  z-index: 15;
  transition: left 0.5s ease;
}
body.showMenu .mobile_menu{left: 0;}

.mobile_menu span{
cursor:pointer;
display:block;
position:relative; 
width:100%;
padding-left:18px;
white-space:nowrap }
.mobile_menu span i{width: 25px;font-size:18px;color:var(--green)}
.mobile_menu .top_label{
background:linear-gradient(90deg,var(--gold),var(--red)); 
margin-bottom: 8px;
color:white}
.mobile_menu .top_label i{font-size:28px;color:white;}

.mobile_menu span div{cursor:pointer;vertical-align: top;display:inline-block;}
.mobile_menu span div t{display: block;
  font-size: 14px;
  height: max-content;
  line-height: normal;
  font-weight:bold}
.mobile_menu span div o{display: block;
  font-size: 12px;
  height: max-content;
  line-height: normal;}
.mobile_menu .top_label .log_options{
position:absolute;
top:0;
left:60px;
bottom:0;
margin:auto	;
height: max-content;
}

.mobile_menu .top_label i,
.mobile_menu span,
.mobile_menu span div{line-height:55px;height:55px;}

.mobile_menu span div.close_mob i,.mobile_menu span div.close_mob {
height: max-content;
line-height: normal;	
}
.mobile_menu span div.close_mob{ 
display:block; 
position:absolute;
right:0;
top:0;bottom:0;
margin: auto;
padding: 12px 18px; }
.mobile_menu span:not(.top_label):not(:last-of-type)::after{
content: "";
  display: block;
  position: absolute;
  bottom: 0;
  border-top: 1px solid var(--grey2);
  opacity: .8;
  left: 50px;
  right: 36px;
  text-align: center;	
}
.mobile_menu span:hover:not(.top_label),
.mobile_menu span.active:not(.top_label){background : var(--grey)	}
.mobile_menu span:hover::after,
.mobile_menu span.active::after{ display: none;}
.mobile_menu span.active:not(.top_label){font-weight:bold}

.mobile_menu span.active:not(.top_label),
.mobile_menu span:hover:not(.top_label),
.mobile_menu span:hover:not(.top_label) i{color:var(--green)}

.mobile_menu span:active:not(.top_label),
.mobile_menu span:active:not(.top_label) i{	color:white}
.mobile_menu span:active:not(.top_label){background:var(--green)}

.top{ display:block;position:fixed;top:0; left:0; width:100%;
padding-bottom: 8px;
box-shadow: 0 8px 24px rgba(149,157,165,.2);
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg,var(--green) 20% ,var(--red) 40%,var(--gold) 70%);
border-image-slice: 1;
z-index: 10;background: white;}
.top .brand-search{position:relative;width:100%	}

.top .pre-top td{ font-size:14px;
height:30px; background:var(--dark2); 
color:white; text-align:center; 
font-weight:bold; text-transform:uppercase; 
cursor:pointer; white-space:nowrap}
.top .pre-top .log,
.top .pre-top .reg{width: 150px;  padding: 0 12px;}
.top .pre-top .shop{width: 60px;  padding: 0 16px 0 8px;}
.top .pre-top .log:hover,
.top .pre-top .reg:hover,
.top .pre-top .shop:hover{background : var(--theme)}
.top .pre-top .log:active,
.top .pre-top .reg:active,
.top .pre-top .shop:active{background : var(--gold)}
.top .pre-top td:nth-of-type(2) i{position: relative;top: -1px;}

body.croped .top .pre-top {display:none}
body.croped .top {box-shadow: none;}

.menu .logo{ padding: 6px 18px 0 18px; cursor:pointer; white-space:nowrap;position: relative;}
.menu .logo img, .menu .logo span{display:inline-block; vertical-align:top}
.menu .logo .credo{ 
position:relative; 
top:12px; 
color:var(--theme); 
font-weight:bold; 
border-left:2px solid var(--theme);
padding-left: 8px;
padding-bottom:10px;
font-size:14px
}
.menu .logo div{width: 280px; display:block; 
position:absolute; 
height:max-content; right:16px;  top:0; bottom:0; 
margin:auto}
.menu .logo input{ width:100% ; 
padding: 8px 36px 8px 16px; background:var(--grey); 
border-radius:4px;line-height:15px}
.menu .logo label{position:absolute;
right: 10px;top:0;bottom:0;margin:auto; 
height:max-content; color:var(--theme)}
.menu .logo .mob-menu{
	font-size:24px;
	display:none;
	position:absolute;
	top: 12px;
    right: 22px;
    padding: 12px 18px;
}
.menu .logo .mob-menu:active{background:var(--grey)}

menu{
  display: block;
  position: absolute;
  top: 0;
  bottom: -8px;
  left: 240px;
  right:310px;
  margin-left: 16px;	
}
menu table{height: 100%;width: 100%}
menu table td{text-align:center; font-weight:bold; white-space:nowrap;text-transform: uppercase;}
menu table td:hover{background:var(--grey);border-left:1px solid var(--grey2);color:var(--green)}
menu table td i{ transition:all .5s ease;}
menu table td:hover i{ transition:all .5s ease; transform:rotate(-180deg)}
menu table td:active{background:var(--green);color:white;border:none}
#searcher{
position:relative;
top:250px;
}

.intro::after{
content:"";
display:block;
position:absolute;
bottom:0;
left:0;
right:0;
height: 45%;
background: linear-gradient(to top,rgba(0,0,0,.05),transparent );
}
.intro{ display:block; padding: 0 15px 15px; width:100%; height:200px;position:relative;}
.intro .group{width:100%; height:100%; display:block;position:relative;max-width: 1080px;margin:auto}
.intro .description{position: relative;width: 44%;float:left;
overflow:hidden;
padding:15px;
display: flex; flex-direction: column; justify-content: center;height: 100%;}
.intro .description span{
display:block; 
font-size:24px; 
font-weight:bold;
text-align:left;
line-height: 1.5em;
padding-left:15px
}

[data-caption]{
  display: block;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;}
[data-caption] span {
    display: block;
    opacity: 0;
    transform: translateY(100%);
    animation-fill-mode: forwards;
	animation: slideIn 0.5s ease-in-out forwards;
}
[data-caption].masked span {
    display: none;
	opacity: 0;
    transform: translateY(100%);
    animation-fill-mode: forwards;
	animation: slideOut 0.6s ease-in-out forwards;
}

.intro .globe{
overflow:hidden;
position: relative;
width: 420px;
max-width:420px;
height:100%;
float:right;
background:url(../img/map.jpg);
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;}
.intro .globe i{
color:var(--gold);
/* color:var(--red2); */
text-shadow: 0 1px 2px rgba(0,0,0,0.47);
font-size:24px; 
display:block;
position:absolute;
top: -30px;
animation-duration: 1s;
animation-name: droplets; 
animation-timing-function: ease-out;
animation-fill-mode: forwards;}
.intro .globe i[data-map="usa"]{--final-top:37%; left:14%;animation-delay: 1s;}
.intro .globe i[data-map="canada"]{  --final-top:25%; left:20.5%;animation-delay: 1.5s;}
.intro .globe i[data-map="latin"]{ --final-top:55%; left:30%;animation-delay: 2s;}
.intro .globe i[data-map="europe"] {--final-top:8%; right:42%;animation-delay: 2.5s; }
.intro .globe i[data-map="africa"]{  --final-top:35%; right:39.4%;animation-delay: 3s; }
.intro .globe i[data-map="africa_south"]{  --final-top:54%; right:36.7%;animation-delay: 3.5s; }
.intro .globe i[data-map="russia"] {--final-top: 4.6%;  right: 31.3%;animation-delay: 4s; }
.intro .globe i[data-map="india"]{--final-top:32.3%; right:24.2%;animation-delay: 4.5s; }
.intro .globe i[data-map="australia"] {--final-top:64%; right:21.5%;animation-delay: 5s; }
.intro .globe i[data-map="japan"] {--final-top:55.5%; right:18%;animation-delay: 5.5s;}
.intro .globe i[data-map="china"] {--final-top:44%; right:17%;animation-delay: 6s; }

.trends{
display:block;
position:relative;
padding:25px;
width:100%;
overflow:hidden;
cursor:pointer;
background:var(--dark2)	;
}
.trends .card-container{
white-space: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.trends .card-container::-webkit-scrollbar {display:none}

/* 
scrollbar-width: none;
-ms-overflow-style: none; 
element::-webkit-scrollbar {display:none}
*/

.intitule{display:block;position:
relative;color:white;font-size:18px;width:100%; 
margin-bottom:12px;padding-left: 25px;}
.see-more{font-size:16px;display:block;position:absolute;color:white;right:27px;
  top: 20px;
  padding: 6px 14px;
  border-radius: 4px;
  background: black;}
.see-more:hover{background:var(--red2)}
.see-more i{margin-left:8px; color:var(--red2)}
.see-more:hover i{color:black}

.trends a{
  display: inline-block;
  height: 310px;
  width: 210px;
  position: relative;
  background: white;
  border-radius: 6px;
  background-size:cover;
  overflow:hidden
}
.trends a:not(:first-of-type){margin-left:4px}
.trends a .legend{
display:block;
position:absolute;	
bottom:0;
width:100%;
height:60px;
background:white;
padding:5px
}
.trends a .legend img{
display:block;
position:absolute;
left:5px;
top:0;
bottom:0;
margin:auto	
}
.trends a .legend p{ 
display: block;
  position: absolute;
  height: max-content;
  width: calc(100% - 60px);
  white-space: break-spaces;
  font-size: 12px;
  top: 0;
  bottom: 0;
  left: 50px;
  margin: auto;
}

.founders{
display:block;
position:relative;
padding:25px;
width:100%;
cursor:pointer;	
max-width: 1080px;
margin: auto;
}
.founders .doc_id{ font-size:14px}
.founders .doc_id strong{ 
display:block ;
font-size: 16px;;
white-space:nowrap;overflow:hidden; 
text-overflow:ellipsis }
.founders .doc_id span{font-size:15px;
display:block;white-space:nowrap;overflow:hidden; 
text-overflow:ellipsis  }
.founders .intitule{color:var(--font);font-weight:bold;margin-bottom:24px}
.founders .pin{top:1px}

.doctaList{
display:grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;}
.doc_id{cursor:pointer;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27);}
.doc_id table{ width:100%}
.doc_id table tr td:first-of-type{ width:80px;height:80px; background-size:cover}
.doc_id table tr td:last-of-type{ padding:0 12px;background:var(--grey)}
.doc_id img{width:100%;height:100%}
.doc_id:hover{
outline:2px solid var(--red)
}
.doc_id:active{
outline:2px solid var(--green)
}

.conferences{
white-space: nowrap;
background:var(--dark2);
display:block;width:100%;
position:relative;
padding:25px;
max-height: 410px;
overflow: hidden;
overflow-x: auto;
scrollbar-width: thin;
}
.conferences .intitule{font-weight:bold;margin-bottom:24px}
.conferences .vid-block{
  width: 100%;
  height: max-content;
  max-width: 550px;
  border-radius:6px;
  transition: all 1s ease-in-out;
  display: inline-block;
  background:black;
}
.conferences .vid-block.played{ background:transparent;}
.conferences video{
display:block;
width:100%;
opacity: 0;
transition: opacity 2s ease-in-out;
overflow:hidden;
object-fit: cover;
border-radius:6px}
.conferences .vid-block:not(:first-child){margin-left: 8px;opacity: 1!important}
.conferences .vid-block:not(:first-child) video{opacity: 1!important}
.conferences .video-fade-in {opacity: 1!important;}
.conferences .pin{top:1px}

.newsletter{display:block;padding:15px ;cursor:pointer;position:relative;width:100%}
.newsletter div{ 
display:block; 
position:relative;
width:100%;
height:125px;
border-radius:6px;
background:linear-gradient(-45deg, var(--gold), var(--rose), var(--theme), var(--turquoise)) 0% 0% / 200% 200%;
}
.newsletter div .avis{
  display: block;
  position: absolute;
  background-image: url('../img/newletter.png');
  height: 100%;
  left: 25px;
  width: 140px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.newsletter div .line{
display:block;
position:absolute;
left:200px;
font-size:18px;
font-weight:bold;
top:0;
bottom:0;
height:max-content;
margin:auto;
color:white	
}
.newsletter div .button_line{
display:block;
position:absolute;
width:max-content;
height:max-content;
padding:8px 18px;
color:white;
font-weight:bold;
top:0;
bottom:0;
margin:auto;
background:var(--dark2);
right:24px;
border-radius:6px	
}

.documentation{
display:block;
position :relative;
background:var(--grey);
padding:15px;
padding-bottom:25px	
}
.documentation[data-mod="history"]{
background:transparent;

}
.documentation[data-mod="history"]::before{
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url("../img/fiv/cch.png");
z-index: -2;
background-size: 150%;
  background-position: 10% 60%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: .05;
}
.documentation[data-mod="history"]::after{
content:"";
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to bottom right, #ffffff, transparent);
z-index: -1;


}

.documentation[data-mod="sponsors"]{margin-bottom: 32px}

.documentation .intitule{ font-weight:bold;color:var(--font); text-transform: uppercase}
.documentation .see-more{ top:10px;cursor:pointer}
.documentation .desc{display:block; width:80%;margin-left: 70px; padding-top:25px}
.documentation .desc l{
display:block;  
line-height: 20px;
margin-bottom: 8px
}
.documentation .desc l:before{
content:attr(data-n);
display: inline-block;
position: relative;
font-weight: bold;
}
.documentation .desc div{
display: block;
  padding: 25px;
  max-width: 1080px;
  margin: auto;
  text-align: justify;}
.documentation .desc div i{font-size: 22px;}
.documentation .desc div .fa-syringe{
 left: -16px;
  position: relative;
  bottom: 9px;
  font-size: 14px;
  color: red;
  }
.documentation .desc div .fa-syringe + o{ position: relative; left:-16px}
.documentation .desc div span{display:block; font-weight: bold;line-height: 40px;margin-top: 8px;color:var(--theme)}
.documentation .desc div span.title i:not(.fa-syringe){color:var(--theme)}
.documentation .desc p{text-align: justify;
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.3em;}
.documentation .desc div ul{margin-left:50px}
.documentation .desc div ul li{
text-align: left;
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;}
  
.cutter{
display: block;
  height: 300px;
  background: var(--dark2);
  background-image: url('../img/takes/group.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 20%;
  box-shadow: inset 0 0 9px rgba(0,0,0,0.5);
}
.courses{
display: block;
position: relative;
}
.courses .medias-group{
  display: block;
  width: 80%;
  max-width: 1280px;
  margin: 28px auto
}
.courses .medias-group span[data-c="patch-c"]{
display: inline-block;
 width: 48%;
  height: 320px;
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
 
}
.courses .medias-group span[data-c="text-c"]{
  display: inline-block;
  width: 48%;
  height: max-content;
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  vertical-align: top;
  text-align: justify;
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  padding: 20px 0 0 52px;
  font-size:17px; 

}
.courses .medias-group span[data-c="text-c"] strong{
display:block; 
font-weight: bolder;
text-align: center;
white-space: nowrap;
font-size:20px; 
margin-bottom: 16px;
text-transform: uppercase}

#game { float: right !important;}
#game-c { padding: 20px 52px 0 0;}

.courses .medias-group span button{
display: block;
padding: 15px 25px;
font-size: 20px;
font-weight: bold;
color: white;
cursor: pointer;
background: var(--theme);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.27);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
border-radius: 8px;
position: relative;
top:0;
margin-top: 18px;
transition: all .2s ease
}
.courses .medias-group span button:active{ top: 5px;}

.courses .c-item strong,.courses .c-top strong{font-size:30px;color:black}
.courses .c-top strong i{color:var(--gold)}
.courses .c-top{
display: block;
  width: 80%;
  max-width: 1280px;
  margin: 38px auto 26px;}
.courses .c-item{
display: block;
height: 64px;
width : 80%;
padding: 0 20px;
border-radius: 12px;
max-width: 1280px;
margin: 22px auto;
position: relative;
border: 2px solid var(--theme);
overflow: hidden;
cursor:pointer;
transition: all .4s ease
}
.courses .c-item.spread{
height:max-content; 
transition: all .4s ease}
.courses .c-item .header{
height: 60px; 
line-height: 60px;
color:var(--theme); 
font-weight: bold;
font-size:20px;
white-space: nowrap;
display: block;
position: relative;
margin-bottom: 12px

}
.courses .c-item .header::before{
content:"";
display: block;
position: absolute;
left: -20px;
right: -20px;
top: 0;
height: 60px;
z-index: -1;
opacity:.09;
}
.courses .c-item.spread .header::before,
.courses .c-item .header:hover::before{background:var(--theme);}
.courses .c-item .header i{
margin-right: 16px;
display: inline-block;
vertical-align: middle;
transition: all .2s ease
}
.courses .c-item .header i:last-child{position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: max-content;
  margin: auto;
  font-size: 24px}
.courses .c-item.spread .header i:last-child{ transition: all .2s ease; transform: rotate(90deg)}
.courses .c-item:not(.spread):hover .header i:last-child{ color:red}
.courses .c-item .header o{
display:inline-block;
white-space: break-spaces;
line-height: 1em;
vertical-align: middle;
width: 80%;
}
.courses .c-item ul{
font-size:18px; 
margin-left:30px;
margin-top: -4px;
margin-bottom: 12px;}
.courses .c-item ul li{line-height: 1.4em}
.courses .c-item ul li::marker {
  font-size: 1.5em; 
  color: var(--theme);
  
}

.bg-mov {animation: bg-mov 8s ease infinite;}

.pin{
  display: block;
  width: 20px;
  height: 20px;
  background: var(--theme);
  position: absolute;
  left: 0;
  border-radius: 50%;
  top: -1px;
}
.pin::before{content:'';
display:block;
position:absolute;
left:0;right:0;top:0;
bottom:0;margin:auto;
width:12px;height:12px;
border-radius:50%;
background:white}
.pin::after{content:'';
display:block;
position:absolute;
left:0;right:0;top:0;
bottom:0;margin:auto;
width:6px;height:6px;
border-radius:50%;
background:var(--gold)}

.footer{
display:block;
position:relative;
background:rgba(0,0,0,.9);
padding: 35px 25px 0;
color:white	
}
.footer table{width:100%; max-width:720px; margin:auto}
.footer table td{text-align:center}
.footer table td span:hover{
background:rgba(255,255,255,.07)	;
padding: 8px 18px;
cursor:pointer;
border-radius:20px
}
.footer .app{
	display:block;
	position:relative;
	padding: 25px 25px 20px;
	text-align:center;
	height: max-content;
	width:max-content;
	margin:auto;
	color: rgba(255,255,255,.4);
	font-size:14px;
	
	
}
.footer .app p{display:block;margin-bottom:8px}
.footer .app img{display:inline-block}
.footer .app img:last-of-type{margin-left:12px}
.footer .bouncer{
display:block;
position: absolute;
background: url("../img/bounce.webp");
width: 153px;
height: 172px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
right: 25px;
animation: bouncing .8s infinite alternate;
}

hr{display: block;
  position: absolute;
  border-top: 1px solid rgba(255,255,255,.4)  ;
  padding-top: 25px;
  left: 0;
  right: 0;}
.copyright{display:block;width:100%; padding: 25px 0;font-size:14px}
.copyright table{width:100%;max-width:100%;}
.copyright table td:first-of-type{text-align:left;padding-left:15px}
.copyright table td{text-align:left}

.bottom{
  display:none;
  position:fixed;
  bottom:0;
  width:100%;
  height:max-content;
  box-shadow: 0 0 30px 0 rgba(0,20,9,.1);
  background: white;
  z-index: 5;	
}
.bottom table{width:100%}
.bottom table td{text-align:center; 
padding:16px 0; font-size:14px; cursor:pointer;
	position: relative;}
.bottom table td:not(.ico-btn):hover{
	color:var(--red);
	background: var(--grey);
 }
.bottom table td:not(.ico-btn):hover::before{
content:'';
display:block;
position:absolute;
top:0;
width:100%;
border-top: 1px solid var(--grey2); 	
}
.bottom table td i{display:block;margin-bottom:8px; font-size:20px}

.ico-btn span{
  display:block;
  width:80px;
  height:80px;
  border-radius:50%;
  box-shadow: 0 -10px 20px -10px rgba(0, 20, 9, 0.27);
  outline: rgb(255, 255, 255) solid 6px;
  position: absolute;
  left:0;
  right:0;
  margin:auto;
  top: -15px;
  background: white;
  border: 2px solid var(--gold);
  z-index:3
}
.ico-btn span i{
display:block;
line-height:80px;
color:var(--font);
font-size:2em	!important
}
.ico-btn:active span{background:var(--gold);border-color: var(--red2);}
.ico-btn:active span i{ color:white;}
.disabled{display:none!important}


.app_ad{
display: block;
height: 150px;
width: calc(100% - 30px);
margin: 75px auto 35px;
border-radius:50px;
background: var(--green_light);
border: 2px solid var(--green);
box-shadow: 0 0 30px 0 rgba(0,20,9,.1);
position: relative;
}
.app_ad .downld{
display:block;
width:250px;
position: absolute;
height: max-content;
top:0;
bottom: 0;
left: 260px;
margin: auto
}
.app_ad table{
position: absolute;
right: 85px;
top: 0;
bottom: 0;
height: 60px;
margin: auto
}
.app_ad table input{
height: 50px;
padding: 0 16px 0 32px;
border-radius : 7px 0 0 7px;
font-size: 18px;
width:100%
}
.app_ad table button{
color:white;
background: var(--dark2);
height: 50px;
padding: 0 24px;
font-size: 18px;
border-radius: 0 7px 7px 0
}
.app_ad .downld strong{ font-size:18px }
.app_ad .downld p{ font-size:13px }

.phoneBox{
display:block;
position: absolute;
width:178px;
left: 55px;
bottom:-40px;
top:-50px;
}
.phoneBox phone{
display:block;
background: black;
position: absolute;
left: 0px;
right: 0;
bottom:0;
top:0;
overflow: hidden;
border-radius: 25px 25px 0 0;
outline:4px solid black
}
.phoneBox .left-1,.phoneBox .left-2{
display: block;
width:4px;
height: 35px;
position: absolute;
left: -8px;
background:black;
border-radius: 8px 0 0 8px;
}
.phoneBox .left-1{top:80px;}
.phoneBox .left-2{top:120px;}
.phoneBox .right-1{
display: block;
width:4px;
height: 55px;
position: absolute;
top:90px;
right: -8px;
background:black;
border-radius:  0 8px 8px 0;
}
.phoneBox .phone-content{ 
display: block;
height: 100%;
width:100%;
background:#F4F6FA url("../img/mock_espace.webp") center top / cover no-repeat; /* capture de l'espace inscrits (membre connecté) */
position: relative
}
.phoneBox::after{
content: "";
display: block;
position: absolute;
bottom: -4px;
left: -4px;
right: -4px;
height: 4px;
background: white;
}

#doctor_show{
  display: none;
  position: fixed;
  padding: 50px;
  background: white;
  z-index: 13;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 85%;
  width: 90%;
  max-width: 780px;
  max-height: 680px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  overflow: hidden;
  overflow-y: auto;
}
body.showDoc .overlay,
body.showDoc #doctor_show{display:block}

#doctor_show img{
float: left;
width: 200px;
border-radius: 6px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
margin-right: 25px;

}
#doctor_show h1,
#doctor_show h3 { text-align: right}
#doctor_show p{text-align: justify;
text-indent: 2em;
hyphens: auto;
word-break: break-word;
overflow-wrap: break-word;
line-height: 1.3em;
margin-bottom: 18px
}
#doctor_show fieldset{display:block;position: relative;text-align: right;}
#doctor_show button{
padding: 15px 25px;
font-size: 20px;
font-weight: bold;
color: white;
cursor: pointer;
background: var(--theme);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.27);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
border-radius: 8px;
position: relative;
transition: all .2s ease
}
#doctor_show button:active{ bottom: 45px;}
#doctor_show h1{font-size:22px; white-space: nowrap}
#doctor_show h3{font-size:18px; margin-bottom: 8px; white-space: nowrap}
#doctor_show .close{
display: block;
position: absolute;
right: 0;
top: 0;
height: 50px;
width: 50px;
cursor:pointer
}
#doctor_show .close::before,
#doctor_show .close::after{
content: "";
position: absolute;
width: 26px;
height: 6px;
left: 0;
right: 0;
top:0;
bottom:0;
margin: auto;
display: block;
background: var(--red2);
border-radius: 2px;
}
#doctor_show .close::before{transform: rotate(45deg); }
#doctor_show .close::after{transform: rotate(-45deg);  }
#doctor_show .close:active{background:var(--red2)}
#doctor_show .close:active::before,
#doctor_show .close:active::after{background:white}

@media only screen and (max-width: 1080px){
.downld{display:none!important}
.courses .medias-group span[data-c="patch-c"] {
display: block;
    width: 100%;
    margin: auto;
    height: 300px;}
.courses .medias-group span[data-c="text-c"] {width:100%; margin-top: 18px; padding: 0}
.courses .medias-group span button {margin:auto;margin-top: 18px;width: 100%;}
#game-c{padding: 0;}

}
@media only screen and (max-width: 960px){
body{padding-top: 136px;padding-bottom: 120px;}
.menu .logo div{
	position: relative;
    width: 100%;
    margin-top: 8px;
    margin-left: 16px;}	
.top{box-shadow: 0 8px 24px rgba(149,157,165,.2);}
.top .pre-top,menu,.description,.pin,
.newsletter div .line,
.footer,
.nophone{display:none!important}	
.bottom,
.menu .logo .mob-menu,
.mobile_menu,
body.showMenu .overlay{display:block;}

.documentation .desc{display:block; width:100%;margin-left:0!important;
text-align: justify}

.intro{height:140px;padding: 0 15px;}
.globe{
	display: block;
    float: unset !important;
    width: 100% !important;
    margin: auto;}

.intitule{padding-left:0}
.trends,.conferences{padding:15px;min-height: 280px}
.conferences{overflow: hidden!important;}
.conferences .see-more{top:10px}
.conferences .vid-block:not(.played){display: none}
.conferences .vid-block{display: block;margin: auto;margin-left: 0}
.conferences .vid-block:not(:first-child) { margin-left: auto;}

.see-more{display:inline-block;position:absolute;color:white;right:17px;padding:6px 10px}
.trends .see-more{top:10px}
.trends a{height: 280px; width: 200px;}
.founders{padding:25px 15px}
.founders .doc_id strong{/*font-size:12px;*/white-space:normal;}
.newsletter div .avis{ left:5px; width:100px}
.newsletter div .button_line{right:30px}
.app_ad{margin: 75px auto -6px;border-radius: 7px}



}
@media only screen and (max-width: 780px){
.phoneBox{display:none}
.app_ad{height: 95px; margin: 15px auto;}
.app_ad table {right: 0;left:0}
.documentation .desc div ul{margin-left:30px}
.documentation .desc div {padding:25px 12px}

.documentation[data-mod="history"]::before{opacity:.07; background-size: 250%;}


}
@media only screen and (max-width: 670px){
.cutter{  height: 180px;}
.courses .c-item .header o {font-size: .8em;} 
#doctor_show {
  padding: 25px;
  margin: auto;
  height: unset;
  width: unset;
  max-width: unset;
  max-height: unset;
  border-radius: 0;
  }
#doctor_show img {
  float: unset;
  display: block;
  margin: auto;
}
#doctor_show h1,#doctor_show h3 { text-align: center;}
#doctor_show h1{padding-top: 12px}
#doctor_show h3{padding-bottom: 8px}
#doctor_show button{
  display: block;
  position: relative;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: unset;
  width: 100%;
}
#doctor_show button:active{bottom:unset;top : 5px;}
#doctor_show .close{    position: fixed;}

}
@media only screen and (max-width: 580px){
.doc_id table tr td:first-of-type {  width: 60px;  height: 60px;}
.courses .c-item { width: 90%;margin: 12px auto;}
.courses .c-top{width: 90%;text-align: center;}


}
@media only screen and (max-width: 480px){

.courses .medias-group span[data-c="patch-c"] {background-position: center;height: 180px;}
.app_ad{height: 70px;}
.app_ad table input{padding: 0 8px 0 16px;max-width: 200px;height: 40px;font-size: 16px}
.app_ad table button {height: 40px;  padding: 0 12px;  font-size: 16px}
  .lang-btn o{display:none}
  .lang-btn .flag-ico {margin-right: 0!important;}

}
@media only screen and (max-width: 380px){
	.newsletter div .avis{ display:none}
	.newsletter div .button_line{ left:0;right:0}
    .courses .c-item .header i {  margin-right: 6px;}
    .courses .c-item .header o {font-size: .78em;}
    .courses .c-item strong,.courses .c-top strong{font-size:26px;}
	
}
@media only screen and (max-width: 310px){
body{display:none}	
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
@keyframes droplets {
    from {
        top: -15px;
    }
    to {
        /* La position top finale est celle définie dans les styles individuels */
        top: var(--final-top);
    }
}
@keyframes bg-mov{
0% {background-position: 0 50%;}
50% {  background-position: 100% 50%;}
100% {  background-position: 0 50%;}
}
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slideOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-100%);
    }
}
@keyframes bouncing {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
  }
}

/* =====================================================================
   ============================  V2 ADDITIONS  =========================
   Bouton langue, chargement différé, fondateurs, bandeau infini,
   chiffres clés, atouts, bannière CHRACERH, partenaires, barre du bas.
   ===================================================================== */

/* ---------- Bouton langue (drapeau) ---------- */
.lang-btn{
cursor:pointer;
white-space:nowrap;
user-select:none;
}
.top .pre-top td.lang-btn{width:90px;padding:0 10px;}
/* drapeau + texte centrés verticalement (flex), drapeau bien visible */
.lang-btn .flag-ico{
display:inline-flex;
align-items:center;
vertical-align:middle;
margin-right:7px;
font-size:0;
line-height:0;
}
.lang-btn .flag-ico .flag-svg{display:block;width:22px!important}
.lang-btn o{font-weight:bold;vertical-align:middle;line-height:1}

/* Drapeaux SVG (js/flags.js) */
.flag-svg{
display:inline-block;
height:auto;
border-radius:2px;
vertical-align:middle;
box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.18);
}
.flag-globe{color:var(--theme);vertical-align:middle}
.member-card .mc-flag .flag-svg{width:24px!important}
.member-card .mc-flag{font-size:0;line-height:0}
.menu .logo span.lang-mob{
display:none;
align-items:center;
position:absolute;
top: 20px;
right: 92px; /* 12px d'air avec le burger (qui va jusqu'à ~80px du bord) */
padding: 6px 9px;
font-size:15px;
line-height:1;
border-radius:8px;
background:var(--grey);
color:var(--font);
z-index:2;
}
.menu .logo span.lang-mob .flag-svg{width:32px!important}
.lang-mob:active{background:var(--theme);color:white}
@media only screen and (max-width: 960px){
.menu .logo span.lang-mob{display:inline-flex}
}

/* ---------- Chargement différé : animation d'attente ---------- */
.media-wait{
background: linear-gradient(110deg, var(--grey) 30%, #ffffff 46%, var(--grey) 60%), linear-gradient(45deg, var(--theme_light), var(--grey));
background-size: 220% 100%, 100% 100%;
animation: shimmer 1.4s linear infinite;
}
.media-in{animation: fadeMedia .6s ease}
@keyframes shimmer{
0%{background-position: 130% 0, 0 0;}
100%{background-position: -90% 0, 0 0;}
}
@keyframes fadeMedia{from{opacity:0}to{opacity:1}}

/* ---------- Vidéos : fondu noir réglable ---------- */
.conferences video{transition: opacity var(--video-fade,700ms) ease-in-out;}
.conferences .vid-block{position:relative;cursor:pointer;}
/* loader : anneau doré sur le fond noir tant que la vidéo charge / met en mémoire */
.vid-block::after,
.vp-stage::after{
content:"";
position:absolute;
left:50%;top:50%;
width:42px;height:42px;
margin:-21px 0 0 -21px;
border-radius:50%;
border:3px solid rgba(255,255,255,.18);
border-top-color:var(--gold);
z-index:2;
opacity:0;
pointer-events:none;
transition:opacity .25s ease;
animation:afsgeSpin .9s linear infinite;
}
.vid-block.loading::after,
.vp-stage.loading::after{opacity:1}
@keyframes afsgeSpin{to{transform:rotate(360deg)}}
/* lecture automatique refusée par le navigateur : affiche + bouton lecture */
.vid-block.blocked::before{
content:"\f04b";
font-family:"Font Awesome 6 Free";
font-weight:900;
position:absolute;
left:50%;top:50%;
width:64px;height:64px;
margin:-32px 0 0 -32px;
line-height:64px;
padding-left:4px;
text-align:center;
border-radius:50%;
background:rgba(255,255,255,.9);
color:var(--theme);
font-size:22px;
z-index:3;
box-shadow:0 6px 20px rgba(0,0,0,.3);
}
/* Rail des vidéos : seul lui défile, le titre et « Voir tout » restent en place */
.conferences{overflow:hidden}
.conferences .vid-rail{
position:relative;
white-space:nowrap;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
/* le rail est une zone qui défile : sans cela le navigateur garde le geste
   horizontal (pointercancel) et le swipe tactile ne change plus de vidéo */
touch-action:pan-y;
}
.conferences .vid-rail::-webkit-scrollbar{display:none}
.conferences .vid-rail-head{display:none}
@media only screen and (min-width: 961px){
/* marges latérales d'une demi-largeur : n'importe quelle vidéo,
   y compris la première et la dernière, peut se placer au centre */
.conferences .vid-rail{padding:0 max(0px, calc(50% - 279px))}
}
/* PC : la vidéo en lecture ressort, les autres s'assombrissent (focus) */
@media only screen and (min-width: 961px){
.conferences .vid-block{transition:filter .6s ease}
.conferences .vid-block:not(.played){filter:brightness(.4) saturate(.7)}
.conferences .vid-block:not(.played):hover{filter:brightness(.75) saturate(.9)}
}
/* swipe : le geste horizontal est pour le lecteur, le vertical reste au défilement de la page */
.conferences{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.conferences video{-webkit-user-drag:none}
@media only screen and (min-width: 961px){
/* PC : les encarts sont cliquables -> liseré au survol (sauf celui en lecture) */
.conferences .vid-block:not(.played):hover{outline:2px solid var(--red2);outline-offset:-2px;border-radius:6px}
}

/* ---------- Bouton son (discret, sur la vidéo en cours) ---------- */
.vid-block .vid-sound{
display:none;
position:absolute;
right:14px;
bottom:14px;
width:42px;
height:42px;
line-height:42px;
text-align:center;
border-radius:50%;
background:rgba(8,14,20,.55);
color:white;
font-size:16px;
cursor:pointer;
z-index:3;
backdrop-filter:blur(2px);
transition:background .2s ease, transform .15s ease, opacity .4s ease;
opacity:.85;
}
.vid-block.played .vid-sound{display:block}
.vid-block .vid-sound:hover{background:rgba(8,14,20,.85);opacity:1}
.vid-block .vid-sound:active{transform:scale(.88)}
@media only screen and (max-width: 960px){
/* mobile : chaque vidéo part du noir et y retourne (fondu fluide) */
.conferences .vid-block:not(:first-child) video{opacity:0!important;transition: opacity var(--video-fade,700ms) ease-in-out!important}
.conferences .vid-block:not(:first-child) video.video-fade-in{opacity:1!important}
}

/* ---------- Fondateurs : nouvelles cartes ---------- */
.founders-scroll{
display:grid;
grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
gap:14px;
}
.member-card{
position:relative;
height:270px;
border-radius:10px;
overflow:hidden;
cursor:pointer;
background:var(--dark2);
box-shadow: 0 2px 6px rgba(0,0,0,.18);
transition: transform .25s ease, box-shadow .25s ease;
}
.member-card:hover{transform: translateY(-5px); box-shadow: 0 10px 22px rgba(0,0,0,.25);}
.member-card:active{outline:2px solid var(--green)}
.member-card .mc-photo{
display:block;
position:absolute;
inset:0;
background-size:cover;
background-position:center 20%;
transition: transform .4s ease;
}
.member-card:hover .mc-photo{transform: scale(1.05);}
.member-card .mc-veil{
display:block;
position:absolute;
inset:0;
background: linear-gradient(to top, rgba(8,14,20,.92) 0%, rgba(8,14,20,.45) 34%, transparent 60%);
}
.member-card .mc-flag{
position:absolute;
top:10px;
left:10px;
font-size:20px;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.member-card .mc-badge{
position:absolute;
top:8px;
right:8px;
width:32px;height:32px;
line-height:32px;
text-align:center;
border-radius:50%;
background:linear-gradient(135deg,var(--gold),var(--red));
color:white;
font-size:14px;
box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.member-card .mc-info{
position:absolute;
left:0;right:0;bottom:0;
padding:12px 14px;
color:white;
}
.member-card .mc-info strong{
display:block;
font-size:15px;
line-height:1.25em;
margin-bottom:2px;
}
.member-card .mc-info em{
display:block;
font-style:normal;
font-size:12.5px;
opacity:.85;
}
.member-card .mc-info o{
display:inline-block;
margin-top:6px;
font-size:11px;
padding:2px 9px;
border-radius:10px;
background:rgba(255,255,255,.14);
backdrop-filter: blur(2px);
}
.founders .hint{
display:block;
text-align:center;
font-size:13px;
color:var(--font);
opacity:.55;
padding-top:14px;
}

/* ---------- Fiche membre (popup) ----------
   Bandeau + croix toujours visibles : seul le contenu (.mm-scroll)
   défile. Dès qu'on défile, la photo se réduit et se range dans le
   bandeau avec le nom (.mm-card.compact). Une flèche flottante fait
   défiler d'un cran et disparaît une fois en bas. */
#member_modal{
display:none;
position:fixed;
inset:0;
z-index:14;
background:rgba(8,14,20,.72);
padding:20px;
align-items:center;
justify-content:center;
}
body.showMember #member_modal{display:flex}
body.showMember{overflow:hidden}
#member_modal .mm-card{
position:relative;
display:flex;
flex-direction:column;
width:100%;
max-width:680px;
max-height:calc(100vh - 40px);
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 12px 40px rgba(0,0,0,.35);
animation: mmPop .3s ease;
}
@keyframes mmPop{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
#member_modal .mm-band{
position:relative;
flex:none;
height:110px;
/* même ambiance que les en-têtes de pages : bleu -> bleu nuit, halo doré discret */
background:
  radial-gradient(circle at 88% 0%, rgba(255,179,71,.22), transparent 45%),
  linear-gradient(120deg, var(--theme) 0%, #1c3374 60%, var(--dark2) 100%);
}
#member_modal .mm-band::after{ /* liseré tricolore, signature du header */
content:"";
position:absolute;
left:0;right:0;bottom:0;
height:3px;
background:linear-gradient(90deg,var(--green) 20%,var(--red) 40%,var(--gold) 70%);
}
/* nom + spécialité affichés dans le bandeau en mode compact */
#member_modal .mm-mini{
position:absolute;
left:110px;
right:70px;
top:0;bottom:0;
display:flex;
flex-direction:column;
justify-content:center;
color:white;
text-shadow:0 1px 3px rgba(0,0,0,.35);
opacity:0;
transform:translateY(8px);
transition:opacity .3s ease, transform .3s ease;
pointer-events:none;
}
#member_modal .mm-mini strong{font-size:18px;line-height:1.25em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#member_modal .mm-mini em{font-style:normal;font-size:13px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#member_modal .mm-card.compact .mm-mini{opacity:1;transform:none}
#member_modal .mm-photo{
position:absolute;
top:38px;
left:28px;
width:140px;
height:140px;
object-fit:cover;
object-position:center 20%;
border-radius:14px;
border:4px solid white;
box-shadow:0 4px 14px rgba(0,0,0,.25);
z-index:3;
transition:top .35s ease, left .35s ease, width .35s ease, height .35s ease, border-width .35s ease, border-radius .35s ease, transform .35s ease;
}
#member_modal .mm-card.compact .mm-photo{
top:22px;
left:24px;
width:66px;
height:66px;
border-width:3px;
border-radius:12px;
}
#member_modal .mm-scroll{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
}
#member_modal .mm-head{
padding: 14px 24px 0 190px;
min-height:86px;
}
#member_modal .mm-head h1{font-size:21px;color:var(--dark2)}
#member_modal .mm-head h3{font-size:15px;font-weight:normal;color:var(--font);margin:2px 0 8px}
#member_modal .mm-chips .mm-chip{
display:inline-block;
font-size:12px;
padding:4px 12px;
margin-right:6px;
border-radius:12px;
background:var(--theme_light);
color:var(--theme);
font-weight:bold;
}
#member_modal .mm-chips .mm-chip.gold{background:#FFF0DA;color:#B87514}
#member_modal .mm-bio{
padding: 18px 28px 6px;
text-align:justify;
hyphens:auto;
line-height:1.45em;
color:var(--font);
}
#member_modal .mm-actions{
display:block;
border:none;
text-align:right;
padding: 14px 28px 22px;
}
#member_modal .mm-actions button{
padding:13px 22px;
font-size:16px;
font-weight:bold;
color:white;
cursor:pointer;
background:var(--theme);
border-radius:8px;
box-shadow:0 2px 4px rgba(0,0,0,.27);
transition: all .2s ease;
}
#member_modal .mm-actions button:active{transform:translateY(3px)}
#member_modal .mm-close{
position:absolute;
top:12px;
right:12px;
width:40px;height:40px;
line-height:40px;
text-align:center;
border-radius:50%;
background:rgba(255,255,255,.9);
color:var(--red2);
font-size:18px;
cursor:pointer;
z-index:4;
}
#member_modal .mm-close:active{background:var(--red2);color:white}
/* flèche flottante « lire la suite » : un cran de défilement par clic
   (partagée avec l'aperçu des ouvrages, #book_preview) */
#member_modal .mm-more, #book_preview .mm-more{
position:absolute;
right:18px;
bottom:18px;
width:46px;height:46px;
line-height:46px;
text-align:center;
border-radius:50%;
background:rgba(31,32,40,.45);
color:white;
font-size:19px;
cursor:pointer;
z-index:4;
backdrop-filter:blur(2px);
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s, background .2s ease;
}
#member_modal .mm-more.on, #book_preview .mm-more.on{
opacity:1;
visibility:visible;
transform:none;
transition:opacity .3s ease, transform .3s ease, background .2s ease;
animation:mmNudge 2.4s ease-in-out infinite;
}
#member_modal .mm-more:hover, #book_preview .mm-more:hover{background:rgba(31,32,40,.72)}
#member_modal .mm-more:active, #book_preview .mm-more:active{background:var(--theme)}
@keyframes mmNudge{0%,100%{margin-bottom:0}50%{margin-bottom:-5px}}
@media only screen and (max-width: 670px){
#member_modal{padding:0}
#member_modal .mm-card{max-width:none;height:100%;max-height:none;border-radius:0}
#member_modal .mm-band{height:112px}
#member_modal .mm-photo{width:110px;height:110px;top:52px;left:50%;transform:translateX(-50%)}
#member_modal .mm-card.compact .mm-photo{top:26px;left:20px;width:60px;height:60px;transform:none}
#member_modal .mm-mini{left:96px;right:62px}
#member_modal .mm-mini strong{font-size:16px}
#member_modal .mm-head{padding:64px 20px 0;text-align:center}
#member_modal .mm-bio{padding:16px 20px 6px}
#member_modal .mm-actions{padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px))}
#member_modal .mm-actions button{width:100%}
#member_modal .mm-more, #book_preview .mm-more{bottom:calc(18px + env(safe-area-inset-bottom, 0px))}
}

/* ---------- Bandeau Trending Events : boucle infinie ---------- */
.trends .card-container{overflow:hidden;cursor:default}
.trends .marquee-track{
display:inline-flex;
white-space:nowrap;
will-change: transform;
}
.trends .marquee-track a{margin-left:0;margin-right:6px;flex:none}
.trends a .card-bg{
display:block;
position:absolute;
inset:0;
background-size:cover;
background-position:center;
}
.trends a .legend{z-index:1}

/* ---------- Chiffres clés ---------- */
.stats-band{
display:block;
position:relative;
padding: 42px 25px;
background: linear-gradient(120deg, var(--theme) 0%, #1c3374 60%, var(--dark2) 100%);
overflow:hidden;
}
.stats-band::before{
content:"";
position:absolute;
inset:0;
background: radial-gradient(circle at 82% 20%, rgba(255,179,71,.18), transparent 42%),
            radial-gradient(circle at 12% 85%, rgba(57,181,74,.16), transparent 40%);
}
.stats-grid{
position:relative;
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
max-width:1080px;
margin:auto;
}
.stat-item{text-align:center;color:white}
.stat-item i{font-size:26px;color:var(--gold);margin-bottom:10px;display:block}
.stat-item strong{display:block;font-size:34px;line-height:1.1em}
.stat-item span{display:block;font-size:13px;opacity:.8;margin-top:4px}
@media only screen and (max-width: 780px){
.stats-grid{grid-template-columns: repeat(2, 1fr);gap:26px 12px}
.stat-item strong{font-size:28px}
}

/* ---------- Atouts (pourquoi l'endoscopie) ---------- */
.why{
display:block;
padding: 40px 25px 30px;
max-width:1080px;
margin:auto;
position:relative;
}
.why .intitule{color:var(--font);font-weight:bold;margin-bottom:26px}
.why-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}
.why-card{
background:white;
border:1px solid var(--grey2);
border-top:4px solid var(--theme);
border-radius:10px;
padding:24px 20px;
text-align:center;
box-shadow:0 2px 8px rgba(0,0,0,.06);
transition: transform .25s ease, box-shadow .25s ease;
}
.why-card:nth-child(2){border-top-color:var(--green)}
.why-card:nth-child(3){border-top-color:var(--gold)}
.why-card:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,.1)}
.why-ico{
display:block;
width:58px;height:58px;
line-height:58px;
margin:0 auto 14px;
border-radius:50%;
background:var(--theme_light);
color:var(--theme);
font-size:22px;
}
.why-card:nth-child(2) .why-ico{background:var(--green_light);color:var(--green)}
.why-card:nth-child(3) .why-ico{background:#FFF0DA;color:#B87514}
.why-card strong{display:block;font-size:17px;margin-bottom:8px;color:var(--dark2)}
.why-card p{font-size:14px;line-height:1.45em;color:var(--font)}
@media only screen and (max-width: 780px){
.why-grid{grid-template-columns:1fr}
}

/* ---------- Bannière CHRACERH ---------- */
.chracerh-banner{
display:block;
position:relative;
min-height:260px;
margin: 10px 0 0;
background:var(--dark2);
overflow:hidden;
}
.chracerh-banner .cb-bg{
position:absolute;
inset:0;
background-size:cover;
background-position:center 30%;
opacity:.35;
}
.chracerh-banner .cb-content{
position:relative;
max-width:1080px;
margin:auto;
padding: 48px 25px;
color:white;
}
.chracerh-banner .cb-content strong{
display:block;
font-size:26px;
margin-bottom:10px;
max-width:640px;
line-height:1.25em;
}
.chracerh-banner .cb-content p{
font-size:15px;
opacity:.85;
max-width:560px;
line-height:1.5em;
margin-bottom:20px;
}
.chracerh-banner button{
padding:13px 26px;
font-size:16px;
font-weight:bold;
color:var(--dark2);
background:var(--gold);
border-radius:8px;
cursor:pointer;
box-shadow:0 2px 6px rgba(0,0,0,.35);
transition:all .2s ease;
}
.chracerh-banner button:active{transform:translateY(3px)}

/* ---------- Partenaires : anneaux ---------- */
.partners-ring{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
padding: 34px 10px 20px;
max-width:1080px;
margin:auto;
}
.partner-bubble{
position:relative;
display:block;
width:112px;
height:112px;
margin: 0 -8px;
border-radius:50%;
border:3px solid var(--theme);
background:white;
box-shadow:0 4px 12px rgba(0,0,0,.12);
text-align:center;
cursor:pointer;
animation: floatBubble 4s ease-in-out infinite;
transition: transform .25s ease, z-index 0s;
z-index:1;
}
.partner-bubble.pb-high{transform:translateY(-14px)}
.partner-bubble.pb-low{transform:translateY(14px)}
.partner-bubble:hover{z-index:3;transform:translateY(0) scale(1.12)}
.partner-bubble img{
position:absolute;
inset:14px;
width:calc(100% - 28px);
height:calc(100% - 28px);
object-fit:contain;
border-radius:50%;
background:white;
z-index:2;
opacity:0; /* invisible tant que le logo n'est pas chargé : les initiales restent lisibles */
}
.partner-bubble img.media-in{opacity:1}
.partner-bubble .pb-initials{
position:absolute;
inset:0;
line-height:106px;
font-size:26px;
font-weight:900;
letter-spacing:1px;
}
.partner-bubble em{
display:block;
position:absolute;
left:50%;
bottom:-26px;
transform:translateX(-50%);
white-space:nowrap;
font-style:normal;
font-size:11px;
font-weight:bold;
color:var(--font);
background:white;
padding:2px 10px;
border-radius:10px;
box-shadow:0 1px 4px rgba(0,0,0,.15);
opacity:0;
transition:opacity .25s ease;
pointer-events:none;
z-index:4;
}
.partner-bubble:hover em{opacity:1}
/* flottement par « translate » (purement visuel) : animer margin-top
   changeait la hauteur de la rangée et faisait flotter tout le bas de page */
@keyframes floatBubble{
0%,100%{translate:0 0}
50%{translate:0 -7px}
}
/* anciens navigateurs sans la propriété translate : décalage relatif (top) */
@supports not (translate: 0){
@keyframes floatBubbleTop{
0%,100%{top:0}
50%{top:-7px}
}
.partner-bubble{animation-name:floatBubbleTop}
}
@media only screen and (max-width: 780px){
.partner-bubble{width:86px;height:86px;margin:6px -6px}
.partner-bubble .pb-initials{line-height:80px;font-size:20px}
}

/* ---------- Barre du bas : zones système Android/Samsung ---------- */
.bottom{
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom table td{padding:14px 0 12px;}
.ico-btn span{
width:66px;
height:66px;
top:-10px;
}
.ico-btn span i{line-height:62px;font-size:1.7em!important}

/* ---------- Menu desktop serré (960-1150px) : 5 entrées ---------- */
@media only screen and (min-width: 961px) and (max-width: 1150px){
.menu .logo .credo{display:none}
menu{left:118px;right:300px;margin-left:8px}
menu table td{font-size:13px;letter-spacing:0;padding:0 4px}
}
@media only screen and (min-width: 1151px) and (max-width: 1280px){
menu table td{font-size:14px;padding:0 4px}
}

/* ---------- Démarcation bandeau CHRACERH / photo de groupe ---------- */
.chracerh-banner::after{
content:"";
display:block;
position:absolute;
left:0;right:0;bottom:0;
height:5px;
background:linear-gradient(90deg,var(--green) 20%,var(--red) 40%,var(--gold) 70%);
z-index:2;
}

/* ---------- PRESENTATION : cartes thématiques ----------
   (le fond parallaxe de la section est conservé) */
.pres-wrap{
display:block;
max-width:1080px;
margin:auto;
padding:14px 10px 12px;
}
.pres-intro{
display:block;
position:relative;
font-size:16px;
line-height:1.65em;
text-align:justify;
hyphens:auto;
color:var(--font);
background:rgba(255,255,255,.78);
backdrop-filter:blur(3px);
border-left:5px solid var(--theme);
border-radius:0 14px 14px 0;
padding:22px 28px;
margin-bottom:20px;
box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.pres-intro::after{
content:"\f7f2"; /* seringue : clin d'oeil au logo */
font-family:"Font Awesome 6 Free";
font-weight:900;
position:absolute;
right:18px;
top:12px;
font-size:38px;
opacity:.06;
color:var(--theme);
}
.pres-intro::first-letter{ /* lettrine : ton "récit historique" */
font-size:46px;
font-weight:900;
color:var(--theme);
float:left;
line-height:.85;
padding:5px 10px 0 0;
}

/* ---- Frise narrative : l'histoire de l'AFSGE en chapitres ---- */
.pres-story{
position:relative;
max-width:980px;
margin:26px auto 0;
padding:8px 0 4px;
}
.pres-story::before{ /* la ligne du temps */
content:"";
position:absolute;
left:50%;
top:8px;
bottom:26px;
width:3px;
transform:translateX(-50%);
border-radius:2px;
background:linear-gradient(to bottom,var(--theme),var(--green) 40%,#B87514 70%,var(--red2));
opacity:.5;
}
.story-item{
position:relative;
width:50%;
padding:2px 52px 40px 4px;
}
.story-item:nth-child(even){
margin-left:50%;
padding:2px 4px 40px 52px;
}
.story-item .st-dot{ /* médaillon sur la ligne */
position:absolute;
top:0;
right:-28px;
width:56px;height:56px;
border-radius:50%;
background:white;
border:3px solid var(--st-color,var(--theme));
color:var(--st-color,var(--theme));
line-height:50px;
text-align:center;
font-size:21px;
box-shadow:0 5px 16px rgba(0,0,0,.14);
z-index:2;
}
.story-item:nth-child(even) .st-dot{right:auto;left:-28px;}
.story-item .st-num{
display:block;
font-size:11.5px;
font-weight:900;
letter-spacing:3px;
text-transform:uppercase;
color:var(--st-color,var(--theme));
margin-bottom:6px;
}
.story-item h3{
font-size:21px;
font-weight:900;
color:var(--dark2);
line-height:1.2em;
margin-bottom:12px;
}
.story-item p{
font-size:14.5px;
line-height:1.65em;
color:var(--font);
text-align:justify;
hyphens:auto;
margin-bottom:8px;
}
.story-item ul{margin:4px 0 2px 18px}
.story-item ul li{
font-size:14px;
line-height:1.65em;
color:var(--font);
margin-bottom:5px;
}
.story-item ul li::marker{color:var(--st-color,var(--theme));font-size:1.1em}
.story-item strong{color:var(--dark2)}
/* cycle de couleurs du thème le long de la frise */
.story-item:nth-child(6n+1){--st-color:var(--theme)}
.story-item:nth-child(6n+2){--st-color:var(--green)}
.story-item:nth-child(6n+3){--st-color:#B87514}
.story-item:nth-child(6n+4){--st-color:var(--red2)}
.story-item:nth-child(6n+5){--st-color:var(--rose)}
.story-item:nth-child(6n+6){--st-color:var(--dark2)}

/* ---- Citation-manifeste de clôture ---- */
.pres-quote{
position:relative;
max-width:820px;
margin:12px auto 4px;
padding:34px 26px 6px;
text-align:center;
}
.pres-quote::before{
content:"\201C";
position:absolute;
top:-14px;
left:0;right:0;
font-size:120px;
font-weight:900;
line-height:1;
color:var(--theme);
opacity:.12;
font-family:Georgia, serif;
}
.pres-quote p{
font-size:18.5px;
line-height:1.7em;
font-style:italic;
font-weight:500;
color:var(--dark2);
}
.pres-quote cite{
display:block;
margin-top:14px;
font-style:normal;
font-size:12.5px;
font-weight:900;
letter-spacing:2.5px;
text-transform:uppercase;
color:var(--theme);
}
.pres-quote cite::before{
content:"";
display:block;
width:56px;
height:3px;
margin:0 auto 12px;
border-radius:2px;
background:linear-gradient(90deg,var(--green),var(--red),var(--gold));
}

/* ---- Frise en mobile : ligne à gauche ---- */
@media only screen and (max-width: 860px){
.pres-intro{padding:18px 20px}
.pres-story::before{left:27px;transform:none}
.story-item,
.story-item:nth-child(even){
width:100%;
margin-left:0;
padding:2px 4px 34px 74px;
}
.story-item .st-dot,
.story-item:nth-child(even) .st-dot{
right:auto;
left:0;
width:50px;height:50px;
line-height:44px;
font-size:18px;
}
.story-item h3{font-size:18px}
.pres-quote p{font-size:16.5px}
}

/* =====================================================================
   PANIER DES OUVRAGES (js/cart.js)
   ===================================================================== */
/* ---- Icône du header : livre doré (vide) / chariot + compteur ---- */
.top .pre-top .shop{white-space:nowrap}
.top .pre-top .shop .fa-book{color:var(--gold);font-size:15px}
.cart-badge{
display:inline-block;
min-width:17px;
height:17px;
line-height:17px;
padding:0 4px;
margin-left:3px;
border-radius:9px;
background:var(--gold);
color:var(--dark2);
font-size:10.5px;
font-weight:900;
text-align:center;
vertical-align:top;
transform:translateY(-5px);
}

/* ---- Bouton flottant : mobile (et PC quand le header est réduit) ---- */
.cart-fab{
display:none;
position:fixed;
right:16px;
bottom:calc(96px + env(safe-area-inset-bottom, 0px));
width:56px;
height:56px;
line-height:56px;
text-align:center;
border-radius:50%;
background:var(--dark2);
color:white;
font-size:20px;
cursor:pointer;
z-index:9;
box-shadow:0 6px 18px rgba(0,0,0,.28);
border:2px solid var(--gold);
transition:transform .15s ease;
}
.cart-fab:active{transform:scale(.9)}
.cart-fab .cart-badge{
position:absolute;
top:-4px;
right:-4px;
margin:0;
transform:none;
border:2px solid white;
min-width:21px;
height:21px;
line-height:17px;
}
@media only screen and (max-width: 960px){
.cart-fab.has-items{display:block}
}
@media only screen and (min-width: 961px){
.cart-fab{bottom:24px;right:24px}
body.croped .cart-fab.has-items{display:block}
}
body.app-mode .cart-fab{display:none!important}

/* ---- Tiroir ---- */
#cart_drawer{
position:fixed;
inset:0;
z-index:30;
visibility:hidden;
background:rgba(8,14,20,0);
transition:background .3s ease, visibility 0s linear .3s;
}
body.showCart #cart_drawer{
visibility:visible;
background:rgba(8,14,20,.6);
transition:background .3s ease;
}
body.showCart{overflow:hidden}
#cart_drawer .cd-panel{
position:absolute;
top:0;right:0;bottom:0;
width:400px;
max-width:100%;
background:white;
display:flex;
flex-direction:column;
transform:translateX(100%);
transition:transform .3s ease;
box-shadow:-10px 0 34px rgba(0,0,0,.22);
}
body.showCart #cart_drawer .cd-panel{transform:translateX(0)}
#cart_drawer .cd-head{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 20px;
border-bottom:3px solid transparent;
border-image:linear-gradient(90deg,var(--green) 20%,var(--red) 40%,var(--gold) 70%);
border-image-slice:1;
}
#cart_drawer .cd-head strong{font-size:18px;color:var(--dark2)}
#cart_drawer .cd-head strong i{color:var(--theme);margin-right:6px}
#cart_drawer .cd-close{
width:38px;height:38px;
line-height:38px;
text-align:center;
border-radius:50%;
background:var(--grey);
color:var(--red2);
font-size:17px;
cursor:pointer;
}
#cart_drawer .cd-close:active{background:var(--red2);color:white}
#cart_drawer .cd-body{flex:1;overflow-y:auto;padding:6px 20px}
#cart_drawer .cd-line{
display:flex;
gap:14px;
align-items:center;
padding:14px 0;
border-bottom:1px solid var(--grey);
}
#cart_drawer .cd-line.off{opacity:.55}
#cart_drawer .cd-thumb{
position:relative;
flex:none;
width:46px;
height:66px;
border-radius:2px 6px 6px 2px;
overflow:hidden;
box-shadow:3px 4px 10px rgba(0,0,0,.22);
}
#cart_drawer .cd-photo{
position:absolute;
left:0;right:0;top:0;
height:62%;
background-size:cover;
background-position:center 18%;
}
#cart_drawer .cd-info{flex:1;min-width:0}
#cart_drawer .cd-info strong{
display:block;
font-size:14px;
line-height:1.25em;
color:var(--dark2);
margin-bottom:3px;
}
#cart_drawer .cd-info em{display:block;font-style:normal;font-size:12px;color:var(--font);opacity:.75}
#cart_drawer .cd-info em.cd-off{color:var(--red);opacity:1;font-weight:bold;margin-top:4px}
#cart_drawer .cd-qty{
display:inline-flex;
align-items:center;
gap:4px;
margin-top:7px;
background:var(--grey);
border-radius:8px;
padding:2px;
}
#cart_drawer .cd-qty span{
width:28px;height:28px;
line-height:28px;
text-align:center;
border-radius:6px;
cursor:pointer;
font-size:12px;
color:var(--theme);
background:white;
}
#cart_drawer .cd-qty span:active{background:var(--theme);color:white}
#cart_drawer .cd-qty b{min-width:24px;text-align:center;font-size:14px;color:var(--dark2)}
#cart_drawer .cd-right{text-align:right;flex:none}
#cart_drawer .cd-right b{display:block;font-size:15px;color:var(--theme);margin-bottom:8px;white-space:nowrap}
#cart_drawer .cd-remove{color:var(--red2);cursor:pointer;padding:4px;font-size:15px;opacity:.8}
#cart_drawer .cd-remove:hover{opacity:1}
#cart_drawer .cd-foot{
padding:16px 20px calc(18px + env(safe-area-inset-bottom, 0px));
border-top:1px solid var(--grey2);
background:#fafbfd;
}
#cart_drawer .cd-total{
display:flex;
justify-content:space-between;
align-items:baseline;
margin-bottom:14px;
}
#cart_drawer .cd-total > span:first-child{font-size:14px;color:var(--font)}
#cart_drawer .cd-total strong{font-size:24px;color:var(--dark2)}
#cart_drawer .cd-total o{display:block;text-align:right;font-size:11px;opacity:.6}
.cd-btn{
display:block;
width:100%;
padding:14px 20px;
font-size:16px;
font-weight:bold;
color:white;
cursor:pointer;
background:var(--theme);
border-radius:8px;
box-shadow:0 2px 4px rgba(0,0,0,.25);
font-family:inherit;
transition:transform .15s ease;
}
.cd-btn:active{transform:translateY(3px)}
.cd-btn.gold{background:var(--gold);color:var(--dark2)}
.cd-btn.gold i{margin-right:6px}
.cd-btn[disabled]{background:var(--grey2);color:var(--font);cursor:not-allowed;box-shadow:none}
#cart_drawer .cd-continue{
display:block;
text-align:center;
margin-top:12px;
font-size:13.5px;
font-weight:bold;
color:var(--theme);
cursor:pointer;
}
#cart_drawer .cd-empty{text-align:center;padding:60px 10px 20px}
#cart_drawer .cd-empty > i{font-size:52px;color:var(--gold);margin-bottom:18px;display:block}
#cart_drawer .cd-empty strong{display:block;font-size:18px;color:var(--dark2);margin-bottom:8px}
#cart_drawer .cd-empty p{font-size:14px;color:var(--font);opacity:.75;line-height:1.5em;margin-bottom:22px}

/* ---------- Version du site (discrète) ---------- */
.copyright td.site-version{
text-align:right;
padding-right:15px;
font-size:11.5px;
opacity:.4;
white-space:nowrap;
}
.mobile_menu .menu-version{
padding:12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
font-size:11px;
color:var(--font);
opacity:.45;
}
.app-version{
margin-top:16px;
font-size:11px;
text-align:center;
opacity:.45;
}

/* ---------- Divers ---------- */
.see-more{cursor:pointer}
html{scroll-behavior:smooth}

/* ---------- Bannière « Install AFSGE as an App » ----------
   Le formulaire e-mail occupe toute la place libre à droite du
   téléphone, que le texte soit affiché (> 1080px) ou non. */
.app_ad{
display:flex;
align-items:center;
gap:36px;
padding:0 60px 0 262px; /* 262px = place du téléphone (.phoneBox) */
}
.app_ad .downld{
position:static;
flex:1 1 440px;
min-width:240px;
max-width:520px;
width:auto;
height:auto;
margin:0;
}
.app_ad table, .app_ad table tbody{display:block}
.app_ad table{
position:static;
flex:1 0 380px; /* jamais plus étroit : c'est le texte qui cède */
min-width:0;
height:auto;
margin:0;
}
.app_ad table tr{display:flex}
.app_ad table td{display:block}
.app_ad table td:first-child{flex:1 1 auto;min-width:0}
.app_ad table input{width:100%;max-width:none}
.app_ad table button{white-space:nowrap}
@media only screen and (max-width: 1080px){
/* texte masqué : le formulaire peut se rétrécir (sinon il déborde sur mobile) */
.app_ad table{flex:1 1 auto}
}
@media only screen and (max-width: 960px){
.app_ad{padding-right:30px}
}
@media only screen and (max-width: 780px){
.app_ad{padding:0 20px}
}
@media only screen and (max-width: 480px){
.app_ad{padding:0 12px}
.app_ad table input{max-width:none}
}

/* ---------- Titre des encarts formation (accueil) ----------
   Le style historique l'impose sur une ligne (nowrap, 20px) :
   « L'outil de formation ultime ! » dépassait de l'écran sous
   ~400px (défilement horizontal parasite). Retour à la ligne permis. */
.courses .medias-group span[data-c="text-c"] strong{
white-space:normal;
line-height:1.25em;
text-wrap:balance;
}

/* ---------- Avis « façon Google » (popup, js/review.js) ----------
   Codes couleur de Google (étoiles #FBBC04, bleu #1A73E8) pour que
   la rédaction ressemble à un vrai avis Google. */
.newsletter div .button_line{cursor:pointer}
#review_modal{
display:none;
position:fixed;
inset:0;
z-index:32;
background:rgba(8,14,20,.72);
padding:20px;
align-items:center;
justify-content:center;
}
body.showReview #review_modal{display:flex}
body.showReview{overflow:hidden}
#review_modal .rv-card{
position:relative;
display:flex;
flex-direction:column;
width:100%;
max-width:560px;
max-height:100%;
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 12px 40px rgba(0,0,0,.35);
animation:mmPop .3s ease;
}
#review_modal .rv-scroll{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
padding:22px 24px 20px;
}
#review_modal .rv-close{
position:absolute;
top:12px;right:12px;
width:40px;height:40px;
line-height:40px;
text-align:center;
border-radius:50%;
background:white;
color:#5F6368;
font-size:18px;
cursor:pointer;
z-index:2;
}
#review_modal .rv-close:hover{background:#F1F3F4}
#review_modal .rv-head{
display:flex;
align-items:center;
gap:12px;
padding:0 44px 16px 0;
margin-bottom:18px;
border-bottom:1px solid #E8EAED;
}
#review_modal .rv-head img{width:44px;height:44px;object-fit:contain;flex:none}
#review_modal .rv-head strong{display:block;font-size:16px;font-weight:500;color:#202124;line-height:1.3em}
#review_modal .rv-head em{font-style:normal;font-size:12.5px;color:#5F6368}
#review_modal .rv-head em i{color:#4285F4;margin-right:2px}
#review_modal .rv-step{display:none}
#review_modal[data-step="write"] .rv-step[data-step="write"],
#review_modal[data-step="sorry"] .rv-step[data-step="sorry"],
#review_modal[data-step="thanks"] .rv-step[data-step="thanks"]{display:block}
#review_modal .rv-user{display:flex;align-items:center;gap:12px;margin-bottom:12px}
#review_modal .rv-avatar{
display:flex;
align-items:center;
justify-content:center;
flex:none;
width:40px;height:40px;
border-radius:50%;
background:var(--theme);
color:white;
font-size:15px;
font-weight:500;
}
#review_modal .rv-user strong{display:block;font-size:15px;font-weight:500;color:#202124}
#review_modal .rv-user em{display:block;font-style:normal;font-size:12px;color:#5F6368}
#review_modal .rv-stars{display:flex;justify-content:center;gap:4px}
#review_modal .rv-stars button{
padding:4px 5px;
background:none;
font-size:34px;
line-height:1;
color:#DADCE0;
cursor:pointer;
transition:color .12s ease, transform .12s ease;
}
#review_modal .rv-stars button.on{color:#FBBC04}
@media (hover: hover){
#review_modal .rv-stars:hover button{color:#FBBC04}
#review_modal .rv-stars button:hover ~ button{color:#DADCE0}
#review_modal .rv-stars button:hover{transform:scale(1.12)}
}
#review_modal .rv-stars button:focus-visible{outline:2px solid #1A73E8;border-radius:6px}
#review_modal .rv-star-label{display:block;min-height:20px;margin:4px 0 12px;text-align:center;font-size:13px;color:#5F6368}
#review_modal textarea{
display:block;
width:100%;
min-height:120px;
resize:vertical;
padding:12px 14px;
border:1px solid #DADCE0;
border-radius:8px;
font:inherit;
font-size:14.5px;
line-height:1.5em;
color:#202124;
}
#review_modal textarea:focus{border-color:#1A73E8;box-shadow:0 0 0 1px #1A73E8}
#review_modal .rv-saved{display:block;margin-top:6px;font-size:11.5px;color:#188038;opacity:0;transition:opacity .3s ease}
#review_modal .rv-saved.on{opacity:1}
#review_modal .rv-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:16px}
#review_modal .rv-actions.center{justify-content:center}
#review_modal .rv-flat,
#review_modal .rv-main{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
height:38px;
padding:0 20px;
border-radius:19px;
font-size:14px;
font-weight:500;
white-space:nowrap;
text-decoration:none;
cursor:pointer;
transition:background .15s ease, box-shadow .15s ease;
}
#review_modal .rv-flat{background:none;color:#1A73E8}
#review_modal .rv-flat:hover{background:#E8F0FE}
#review_modal .rv-flat.done{color:#188038}
#review_modal .rv-main{background:#1A73E8;color:white}
#review_modal .rv-main:hover{background:#1765CC;box-shadow:0 1px 3px rgba(60,64,67,.3)}
#review_modal .rv-main[disabled]{background:#E8EAED;color:#9AA0A6;cursor:not-allowed;box-shadow:none}
#review_modal .rv-done{padding:4px 4px 2px;text-align:center}
#review_modal .rv-big{
display:flex;
align-items:center;
justify-content:center;
width:64px;height:64px;
margin:0 auto 14px;
border-radius:50%;
font-size:30px;
}
#review_modal .rv-big.sorry{background:#FCE8E6;color:#D93025}
#review_modal .rv-big.thanks{background:#FEF7E0;color:#F29900}
#review_modal .rv-done > strong{display:block;margin-bottom:8px;font-size:19px;font-weight:500;color:#202124}
#review_modal .rv-done p{max-width:420px;margin:0 auto;font-size:14px;line-height:1.55em;color:#5F6368}
#review_modal .rv-quote{
max-height:180px;
overflow-y:auto;
margin-top:16px;
padding:12px 14px;
border-radius:8px;
background:#F8F9FA;
text-align:left;
font-size:14px;
line-height:1.5em;
color:#3C4043;
}
#review_modal .rv-quote-stars{display:block;margin-bottom:4px;font-size:14px;letter-spacing:2px;color:#FBBC04}
#review_modal .rv-quote-stars .off{color:#DADCE0}
#review_modal .rv-quote.nomsg .rv-quote-stars{margin:0;text-align:center;font-size:20px}
#review_modal #rvQuoteText{white-space:pre-wrap;overflow-wrap:break-word}
#review_modal .rv-anyway{display:inline-block;margin-top:16px;font-size:12px;color:#5F6368;text-decoration:underline;cursor:pointer}
@media only screen and (max-width: 670px){
#review_modal{padding:0}
#review_modal .rv-card{max-width:none;height:100%;border-radius:0}
#review_modal .rv-scroll{padding:18px 18px calc(24px + env(safe-area-inset-bottom, 0px))}
#review_modal .rv-stars button{font-size:38px;padding:4px 3px}
#review_modal .rv-actions > *{flex:1 1 auto}
}

/* ---------- Recherche du header : même style que les champs du site
   (fond gris, coins 8px, contour bleu + fond blanc à la saisie) ---------- */
.menu .logo div input{
padding:9px 40px 9px 16px;
background:var(--grey);
border:2px solid transparent;
border-radius:8px;
font-size:14px;
line-height:18px;
transition:border-color .2s ease, background .2s ease;
}
.menu .logo div input:focus{border-color:var(--theme);background:white}
.menu .logo div label{right:14px;cursor:pointer}

/* ---------- Menu mobile : bandeau du haut fixe quand la liste défile ----------
   (Login/Sign Up + croix toujours visibles ; hauteur réelle de l'écran
   mobile et défilement qui ne se propage pas à la page derrière) */
.mobile_menu{height:100vh;height:100dvh;overscroll-behavior:contain}
.mobile_menu .top_label{
position:sticky;
top:0;
z-index:3;
margin-bottom:0; /* plus d'écart blanc sous le bandeau (il faisait défiler le menu) */
box-shadow:0 4px 12px rgba(0,0,0,.12);
}

/* ---------- Menu mobile : rubrique active = fond gris + trait séparateur vert
   (même spécificité que la règle historique du trait, placée après) ---------- */
.mobile_menu span.active:not(.top_label)::after{
content:"";
display:block;
position:absolute;
bottom:0;
left:50px;
right:36px;
border-top:none;
height:2px;
border-radius:2px;
background:var(--green);
opacity:1;
}

/* ---------- Header mobile étroit : texte du logo, langue et burger
   sans chevauchement (hauteur du header inchangée) ---------- */
@media only screen and (max-width: 420px){
.menu .logo .credo{font-size:12.5px}
.menu .logo .mob-menu{padding:12px 10px}
.menu .logo span.lang-mob{right:73px}
}
@media only screen and (max-width: 350px){
.menu .logo .credo{font-size:11px}
.menu .logo .mob-menu{padding:12px 8px}
.menu .logo span.lang-mob{right:65px;padding:5px 6px}
.menu .logo span.lang-mob .flag-svg{width:26px!important}
}

/* ---------- Burger du header : barres dessinées en SVG (bords nets,
   plus de flou de police), légèrement resserrées. Même boîte que
   l'ancienne icône : 22 x 15 + marges = 28px de haut, position
   sur pixel entier. ---------- */
.menu .logo .mob-menu .burger-ico{
display:block;
width:22px;
height:15px;
margin:7px 0 6px;
fill:currentColor;
}