: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:url("../img/mock1.png");
background-size: cover;
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;}
.lang-btn .flag-ico{font-size:16px;margin-right:6px;vertical-align:middle}
.lang-btn o{font-weight:bold;vertical-align:middle}

/* 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;
position:absolute;
top: 18px;
right: 78px;
padding: 8px 12px;
font-size:14px;
border-radius:6px;
background:var(--grey);
color:var(--font);
z-index:2;
}
.lang-mob:active{background:var(--theme);color:white}
@media only screen and (max-width: 960px){
.menu .logo span.lang-mob{display:block}
}

/* ---------- 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;}
@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) ---------- */
#member_modal{
display:none;
position:fixed;
inset:0;
z-index:14;
background:rgba(8,14,20,.72);
padding:20px;
overflow-y:auto;
}
body.showMember #member_modal{display:block}
body.showMember{overflow:hidden}
#member_modal .mm-card{
position:relative;
background:white;
max-width:680px;
margin: 40px auto;
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{
height:110px;
background: linear-gradient(90deg, var(--theme), var(--green) 55%, var(--gold));
}
#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);
}
#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);
max-height: 320px;
overflow-y:auto;
}
#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:2;
}
#member_modal .mm-close:active{background:var(--red2);color:white}
@media only screen and (max-width: 670px){
#member_modal{padding:0}
#member_modal .mm-card{margin:0;min-height:100%;border-radius:0}
#member_modal .mm-photo{width:110px;height:110px;top:52px;left:50%;transform:translateX(-50%)}
#member_modal .mm-band{height:112px}
#member_modal .mm-head{padding:64px 20px 0;text-align:center}
#member_modal .mm-bio{max-height:unset;padding:16px 20px 6px}
#member_modal .mm-actions button{width:100%}
}

/* ---------- 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}
@keyframes floatBubble{
0%,100%{margin-top:0}
50%{margin-top:-7px}
}
@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}
}

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