@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');/*font-family: 'Open Sans', sans-serif;*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');/*font-family: 'Open Sans Condensed', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');/*font-family: 'Poppins', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');/*font-family: 'Yeseva One', cursive;*/


@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');/* font-family: "Reddit Sans", sans-serif;*/

/* HEADER */
/*#header { background:#fff; width: 100%; height: 200px; background-size:100%;}*/


/*HEADER VIDEO*/

header {
  position: relative;
  background-color: black;
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 992px) {
header {
  position: relative;
  background-color: black;
  height:100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}
}

header h3 { font-size:38px;  font-family: "Reddit Sans", sans-serif; color:#fff; line-height:1.1em; letter-spacing:0.2em}
header h3 small { font-size:28px;  font-family: "Reddit Sans", sans-serif;color:#fff; line-height:1.1em; letter-spacing:0.1em}

.bloc h4 { font-size:28px;  font-family: "Reddit Sans", sans-serif; color:#fff; line-height:1.1em; letter-spacing:0.2em}
.bloc h4 small { font-size:18px;  font-family: "Reddit Sans", sans-serif;color:#fff; line-height:1.1em; letter-spacing:0.1em}

@media (max-width: 992px) {
.bloc h4 { font-size:16px;  font-family: "Reddit Sans", sans-serif; color:#fff; line-height:1.1em; letter-spacing:0.2em}
.bloc h4 small { font-size:14px;  font-family: "Reddit Sans", sans-serif;color:#fff; line-height:1.1em; letter-spacing:0.1em}
}




.bloc {
    border: 1px solid rgb(255, 255, 255, 0.3);
    padding: 20px;
    transition: border 0.3s ease, border-radius 0.3s ease;
    opacity: 0.6;
}

.bloc:hover {
    border: 1px solid rgb(255, 255, 255, 1);
    padding: 20px;
    border-radius: 20px;
    opacity: 1;
}

/* Positionner le bouton en haut à droite */
.text-end {
    position: absolute;
    top: 20px;
    right: 90px;
    z-index: 999999;
}

/* Style du bouton Contactez-nous */
.text-end .btn {
    padding: 10px 20px;
    background-color: rgb(255,255,255,0.8);
    color: #000;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.text-end .btn:hover {
    background-color: #fff;
}

/* Pour s'assurer que l'overlay fonctionne comme un fond si nécessaire */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Si tu veux un fond sombre derrière */
    z-index: -1; /* L'overlay doit être derrière le contenu */
}


/* Pour les blocs de contenu */
.bloc {
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 20px;
    transition: border 0.3s ease, border-radius 0.3s ease;
}

.bloc:hover {
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 20px;
}


@media (max-width: 992px) {
header h3 { font-size:18px;  font-family: "Reddit Sans", sans-serif;}
}

header a { color:#fff}
header a:hover { color:#fff}
header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}


header #carouselExampleControls  {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}


header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}





@media (max-width: 1400px) {
header #carouselExampleControls  {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 200%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 200%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

}



header .container {
  position: relative;
  z-index: 2;
}


/*HEADER VIDEO*/


#header.base {background:#fff; background-size: 100%; height: auto; color:#fff}
#header.base a {color:#fff}
#header p { font-size:28px; font-family: 'Yeseva One', cursive; color:#fff; line-height:1.2em}
@media (max-width:1024px) {
#header.base {background:#fff; background-size: 100%; height: auto; color:#fff}
#header p { font-size:18px; font-family: 'Yeseva One', cursive; color:#fff; line-height:1.2em}
}





#sub-header.base {background:url("../charte/back-header-1920.webp") no-repeat; background-size: 100%; height: auto; color:#fff}
#sub-header.base a {color:#fff}
#sub-header p { font-size:28px; font-family: 'Yeseva One', cursive; color:#fff; line-height:1.2em}
#sub-header.base img { width:20% }


/*#sub-header.base {background:url("../charte/back-header-1920-2.webp") no-repeat; background-size: 100%; height: auto; color:#fff}
#sub-header.base a {color:#fff}
#sub-header p { font-size:28px; font-family: 'Yeseva One', cursive; color:#fff; line-height:1.2em}
#sub-header.base img { width:20% }*/


@media (max-width:1024px) {
    #sub-header.base img { width:40% }
    #sub-header p { font-size:18px; font-family: 'Yeseva One', cursive; color:#fff; line-height:1.2em}
    #sub-header.base img { width:60% }
}

@media (max-width:920px) {
    #sub-header.base {background:url("../charte/back-header-1024.jpg") no-repeat; background-size: 100%; height: auto; color:#fff}
    #sub-header p { font-size:18px; font-family: 'Yeseva One', cursive; color:#fff; line-height:1.2em}
    #sub-header.base img { width:60% }
}



























/*MENU*/
.bg-light {
background-color: #333333 !important;
}

.bg-dark {
  background-color: #fff!important;
}

.navbar-brand {
display: none!important
}
.navbar-brand.scrolled{
display: block!important
}


.navbar-nav { margin: 0 auto}

@media (max-width: 992px) {
.navbar-nav {margin: 20px 0px;}
.bg-light {background-color: #333333 !important;}
}

.navbar-nav.active { display: block}
.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
color: #333;
background-color:  #fff;
}


.navbar-light .navbar-nav .nav-link {
    color: #fff;
    font-family: "Reddit Sans", sans-serif;
	font-weight: bold; font-size:20px
}


.navbar-light .navbar-nav .nav-link:hover {
color: #333;
background-color:  #fff;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
}


.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/*Custom ouverture menu mobile*/
@media (max-width: 992px) {
.navbar-collapse {
        position: absolute;
        top: 54px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
    }
.navbar-collapse.collapsing {
        height: auto;
        -webkit-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        transition: left 0.3s ease;
        left: -100%;
    }
.navbar-collapse.show {
        left: 0;
        -webkit-transition: left 0.3s ease-in;
        -o-transition: left 0.3s ease-in;
        -moz-transition: left 0.3s ease-in;
        transition: left 0.3s ease-in;
		background-color:#333333;height: 900px;
		text-align: center;
    }
 }


/*MENU*/


a, a:hover {color:#000; text-decoration: none}


#section1 {background: none}
#section1 h1 {color:#333333; line-height: 1em; font-family: "Reddit Sans", sans-serif; font-size:66px; letter-spacing:0.1em}
#section1 h1 small {color:#333333; line-height: 0.8em; font-family: "Reddit Sans", sans-serif; font-size:26px; letter-spacing:0em}
#section1 h2 {color:#1f6296; line-height: 1em; font-family: "Reddit Sans", sans-serif; font-size:56px; letter-spacing:0.2em}
#section1 h2 small {color:#333333; line-height: 1em; font-family: "Reddit Sans", sans-serif; font-size:26px; letter-spacing:0em}
#section1 h3 {color:#1f6296; line-height: 1em; font-family: "Reddit Sans", sans-serif; font-size:36px; letter-spacing:0.2em}
#section1 h3 small {color:#333333; line-height: 1em; font-family: "Reddit Sans", sans-serif; font-size:26px; letter-spacing:0em}
#section1 p {color:#000;}

#section2 {background: #195571}
#section2 h1 {color:#fff; line-height: 0.7em; font-family: "Reddit Sans", sans-serif; font-size:56px; letter-spacing:0.2em}
#section2 h1 small {color:#fff; line-height: 1em; font-family: "Reddit Sans", sans-serif; font-size:26px; letter-spacing:0em}
#section2 h2 {color:#fff; line-height: 1em; font-family: "Reddit Sans", sans-serif; font-size:56px; letter-spacing:0.2em}
#section2 h2 small {color:#fff; line-height: 1em; font-family: "Reddit Sans", sans-serif; font-size:26px; letter-spacing:0em}
#section2 p {color:#fff;}
#section2 h3 {color:#fff; line-height: 1.3em; font-size:26px; letter-spacing:0.2em}

#section3 {background: none}
#section3 h1 {color:#333333; line-height: 1.4em}
#section3 h2, h3, h4 {color:#333333; line-height: 1.4em}
#section3 h5 {color:#333333 !important; line-height: 1.4em}
#section3 p {color:#000;}

#section4 {background: none}
#section4 h1 {color:#333333; line-height: 1.4em}
#section4 h2, h3, h4, h5 {color:#333333; line-height: 1.4em}
#section4 p {color:#000;}

#section5 {background: #0A0A0A}
#section5 h1 {color:#fff; line-height: 1.4em}
#section5 h2 {color:#fff; line-height: 1.4em}
#section5 h3, h4 {color:#0A0A0A !important; line-height: 1.4em}
#section5 h5 {color:#333333 !important; line-height: 1.4em}
#section5 p {color:#fff;}

/*#section1 {background: none; font-family: "Reddit Sans", sans-serif;}
#section1 h1 small {color:#333; font-size:28px; text-transform: uppercase; line-height: 1em}
#section1 h1 {color:#0096b9; line-height: 1em; font-size:45px; text-transform: uppercase}
#section1 h2{color:#0096b9; line-height: 1.4em; font-size : 30px}
#section1 p {color:#000;}

#section2 {background: none}
#section2 h1 {color:#333333; line-height: 1.4em}
#section2 h2, h3, h4, h5 {color:#333333; line-height: 1.4em}
#section2 p {color:#000;}

#section3 {background: none}
#section3 h1 {color:#333333; line-height: 1.4em}
#section3 h2, h3, h4 {color:#333333; line-height: 1.4em}
#section3 h5 {color:#333333 !important; line-height: 1.4em}
#section3 p {color:#000;}

#section4 {background: none}
#section4 h1 {color:#333333; line-height: 1.4em}
#section4 h2, h3, h4, h5 {color:#333333; line-height: 1.4em}
#section4 p {color:#000;}

#section5 {background: #0A0A0A}
#section5 h1 {color:#fff; line-height: 1.4em}
#section5 h2 {color:#fff; line-height: 1.4em}
#section5 h3, h4 {color:#0A0A0A !important; line-height: 1.4em}
#section5 h5 {color:#333333 !important; line-height: 1.4em}
#section5 p {color:#fff;}*/


#section-parallax img {padding-top:200px;}
#section-parallax h2 { color:#000; text-align: center }

@media (max-width: 992px) {
    #section-parallax h2 {padding-top:50px}
    #section-parallax img {padding-top:70px;}
}

.parallax {
    /* The image used */
    background-image: url("../../../assets/theme3/charte/img-parallax.jpg");
    /* Set a specific height */
    height:600px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media only screen and (max-device-width: 1366px) {
    .parallax {
        background-attachment: scroll;
        height:300px;
    }
}
/*boutons custom bootstrap*/
.btn-custom {
	color: #fff;
    background-color: #333;
    border-color: #333;
}
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom {
    color: #fff;
    background-color: #333;
    border-color: #333; /*set the color you want here*/
}
/*fin boutons custom bootstrap*/


/*boutons custom bootstrap*/
.button {
  flex: 1 1 auto;
  margin: 0px;
  padding: 20px;
  border: 2px solid #000;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: 0.3s; color:#000
}
.button:after {
  position: absolute;
  transition: 0.3s;
  content: "";
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #000;
}
.button:hover:nth-of-type(1) {
  border-radius: 30px;
}
.button:hover:nth-of-type(1):after {
  width: 0%;
}
.button:hover {
  cursor: pointer;
}
.button:hover:after {
  width: 100%;
  left: 0;
}

/*Fin Boutons*/



/*boutons custom bootstrap*/
.button2 {
    flex: 1 1 auto;
    margin: 0px;
    padding: 20px;
    border: 0px solid #000;
    text-align: left;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: 0.3s; color:#fff; background:#0096b9; width:70%
}
.button2:after {
    position: absolute;
    transition: 0.3s;
    content: "";
    width: 0;
    left: 50%;
    bottom: 0;
    height: 3px;
    background: #000;
}
.button2:hover:nth-of-type(1) {
    border-radius: 30px;
}
.button2:hover:nth-of-type(1):after {
    width: 0%;
}
.button2:hover {
    cursor: pointer;
}
.button2:hover:after {
    width: 100%;
    left: 0;
}



/*boutons custom bootstrap*/
.button3 {
    flex: 1 1 auto;
    margin: 0px;
    padding: 20px;
    border: 0px solid #000;
    text-align: left;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: 0.3s; color:#fff; background:#0096b9; width:60%
}
.button3:after {
    position: absolute;
    transition: 0.3s;
    content: "";
    width: 0;
    left: 50%;
    bottom: 0;
    height: 3px;
    background: #000;
}
.button3:hover:nth-of-type(1) {
    border-radius: 30px;
}
.button3:hover:nth-of-type(1):after {
    width: 0%;
}
.button3:hover {
    cursor: pointer;
}
.button3:hover:after {
    width: 100%;
    left: 0;
}



/*FOOTER*/


footer {
background: #195571;
padding: 20px;
min-height: 100px;
}
footer h2 {color: #fff; font-size:18px}
footer p {color: #fff; font-size:14px}
footer p a {color: #fff; }
footer p a:hover {color:#fff; text-decoration: none}
footer p a:visited {color:#fff; text-decoration: none}
footer hr {border-color:#fff; margin: 0rem 0 !important;}
footer ul.list-unstyled li a {color: #fff}
footer .rubrique { color: #fff}
footer .fab {color:#fff}
/*FOOTER*/


.encart { border: 1px solid #eee; padding:20px 10px 10px}
.encart:hover { border: 1px solid #eee; padding:20px 10px 10px; background: #fff}

/*FIN INTEGRATION*/


/*MENU*/
/* --- MENU BURGER LATÉRAL --- */

/* Bouton Burger */
.burger-btn {
    position: fixed;
    top: 30px;
    right: 20px;
    z-index: 2001;
    cursor: pointer;
    width: 30px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.burger-btn span {
    display: block;
    height: 3px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    transition: 0.3s;
}

.burger-btn2 {
    position: fixed;
    top: 30px;
    right: 20px;
    z-index: 2001;
    cursor: pointer;
    width: 50px;
    height: 42px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:#fff; padding:10px; border-radius:5px
}

.burger-btn2 span {
    display: block;
    height: 3px;
    width: 100%;
    background: #004565;
    border-radius: 2px;
    transition: 0.3s;
}



/* Menu latéral */
.side-menu {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.4s;
    padding-top: 0px;
    z-index: 2002;
}
.side-menu ul {
    list-style: none;
    padding: 0;
    text-align: start;
    padding-left:20px
}
.side-menu ul li {
    margin: 5px 0;
}
.side-menu ul li a {
    color: #0095b6;
    font-size: 22px;
    font-family: "Reddit Sans", sans-serif;
    text-decoration: none;
    transition: color 0.3s, background 0.3s, padding 0.3s;
}
.side-menu ul li a:hover {
    color: #000;
    background: #fff;
    padding: 5px 15px;
    border-radius: 8px;
}

/* Bouton fermer */
.side-menu .close-btn {
    position: absolute;
    top: 30px;
    right: 25px;
    font-size: 40px;
    color: #004565;
    text-decoration: none;
}

/* Overlay derrière le menu */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    display: none;
}
/*.circle-item {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 10px 15px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s; font-family: "Reddit Sans", sans-serif; font-weight: bold; font-size:30px; color:#0096b9; line-height: 1.2em;
}
.circle-item:hover {
    background: #0096b9;
    color: #fff;
}*/


.circle-item {
    background: #fff;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
    padding: 20px 10px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease; /* <-- effet doux sur tout changement */;
    font-size :24px;
}

.circle-item:hover {
    background: #0096b9;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    margin-left: 10px;
}

.circle-item .icon {
    width: 40px;
    height: 40px;
    transition: filter 0.3s ease;
    filter: invert(0%); /* Couleur par défaut */
}

.circle-item:hover .icon {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(180deg); /* Change la couleur */
}


#description p a {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    transition: all 0.3s ease; /* effet doux */
    text-decoration: none;
    color: inherit; font-size :30px; line-height: 1.4em;
}

#description p a::before {
    content: "›"; /* chevron simple */
    position: absolute;
    left: 0;
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.3s ease;
    color: #0096b9;
    font-weight: bold;
}

#description p a:hover {
    padding-left: 30px; /* décale un peu plus au survol */
    color: #0096b9;
}

#description p a:hover::before {
    opacity: 1;
    transform: translateX(0); /* petit effet de glissement */
}




.about-title {
    font-size: 7.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
    background: linear-gradient(
            to bottom,
            rgb(8 42 123 / 35%) 30%,
            rgb(255 255 255 / 0%) 76%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.carousel-container {
    width: 100%;
    max-width: auto;
    height: 450px;
    position: relative;
    perspective: 1000px;
    margin-top: 80px;
}

.carousel-track {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card {
    position: absolute;
    width: 280px;
    height: 380px;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card.center {
    z-index: 10;
    transform: scale(1.1) translateZ(0);
}

.card.center img {
    filter: none;
}

.card.left-2 {
    z-index: 1;
    transform: translateX(-400px) scale(0.8) translateZ(-300px);
    opacity: 0.7;
}

.card.left-2 img {
    filter: grayscale(100%);
}

.card.left-1 {
    z-index: 5;
    transform: translateX(-200px) scale(0.9) translateZ(-100px);
    opacity: 0.9;
}

.card.left-1 img {
    filter: grayscale(100%);
}

.card.right-1 {
    z-index: 5;
    transform: translateX(200px) scale(0.9) translateZ(-100px);
    opacity: 0.9;
}

.card.right-1 img {
    filter: grayscale(100%);
}

.card.right-2 {
    z-index: 1;
    transform: translateX(400px) scale(0.8) translateZ(-300px);
    opacity: 0.7;
}

.card.right-2 img {
    filter: grayscale(100%);
}

.card.hidden {
    opacity: 0;
    pointer-events: none;
}

.member-info {
    text-align: center;
    margin-top: 40px;
    transition: all 0.5s ease-out;
}

.member-name {
    color: rgb(8, 42, 123);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

.member-name::before,
.member-name::after {
    content: "";
    position: absolute;
    top: 100%;
    width: 100px;
    height: 2px;
    background: rgb(8, 42, 123);
}

.member-name::before {
    left: -120px;
}

.member-name::after {
    right: -120px;
}

.member-role {
    color: #848696;
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 10px 0;
    margin-top: -15px;
    position: relative;
}
.dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 60px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(8, 42, 123, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: rgb(8, 42, 123);
    transform: scale(1.2);
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(8, 42, 123, 0.6);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
    font-size: 1.5rem;
    border: none;
    outline: none;
    padding-bottom: 4px;
}

.nav-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.nav-arrow.left {
    left: 20px;
    padding-right: 3px;
}

.nav-arrow.right {
    right: 20px;
    padding-left: 3px;
}

@media (max-width: 768px) {
    .about-title {
        font-size: 4.5rem;
    }

    .card {
        width: 200px;
        height: 280px;
    }

    .card.left-2 {
        transform: translateX(-250px) scale(0.8) translateZ(-300px);
    }

    .card.left-1 {
        transform: translateX(-120px) scale(0.9) translateZ(-100px);
    }

    .card.right-1 {
        transform: translateX(120px) scale(0.9) translateZ(-100px);
    }

    .card.right-2 {
        transform: translateX(250px) scale(0.8) translateZ(-300px);
    }

    .member-name {
        font-size: 2rem;
    }

    .member-role {
        font-size: 1.2rem;
    }

    .member-name::before,
    .member-name::after {
        width: 50px;
    }

    .member-name::before {
        left: -70px;
    }

    .member-name::after {
        right: -70px;
    }
}


.bloc1 {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    box-shadow: 0 0 0 rgba(0,0,0,0); /* ombre neutre au repos */
}

.bloc1:hover {
    transform: translateX(5px); /* décale légèrement vers la droite */
    box-shadow: 4px 4px 12px rgba(0,0,0,0.2); /* ombre douce */
}

h3 svg {
    display: inline-block;        /* nécessaire pour que la rotation marche */
    transition: transform 0.2s ease; /* fluide */
}

h3 svg:hover {
    transform: rotate(47deg);
}

.bloc2 {
    background: #f7f7f7;
    border-radius: 10px;
    padding: 20px;
    min-height: 270px;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    box-shadow: 0 0 0 rgba(0,0,0,0); /* ombre neutre au repos */
}

.bloc3:hover {
    transform: translateX(5px); /* décale légèrement vers la droite */
    box-shadow: 4px 4px 12px rgba(0,0,0,0.2); /* ombre douce */
}


.bloc3 {
    background: #f7f7f7;
    border-radius: 10px;
    padding: 20px;
    min-height:auto;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    box-shadow: 0 0 0 rgba(0,0,0,0); /* ombre neutre au repos */
}

.bloc2:hover {
    transform: translateX(5px); /* décale légèrement vers la droite */
    box-shadow: 4px 4px 12px rgba(0,0,0,0.2); /* ombre douce */
}


/* Fix de base pour Bootstrap .row (flex) + support webkit */
.chirurgien {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;                 /* distance depuis le haut */
    align-self: flex-start;    /* important dans une .row (flex container) */
    z-index: 20;               /* au-dessus si besoin */
}

/* Désactiver le sticky sur petits écrans (optionnel) */
@media (max-width: 767.98px) {
    .chirurgien { position: static; top: auto; }
}

@media (min-width:1200px){
    #full .modal-xl {
        max-width: 1400px!important;
    }
}

#full .modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background-color: #fff!important;
}
#full h1  {color:#333333; line-height: 0.7em; font-family: "Reddit Sans", sans-serif; font-size:56px!important; letter-spacing:0.2em}
#full h2 {color:#1f6296; line-height: 1em; font-family: "Reddit Sans", sans-serif; font-size:46px; letter-spacing:0.1em}
#full h3 {color:#333333; line-height: 1em; font-family: "Reddit Sans", sans-serif; font-size:26px; letter-spacing:0.1em}


.img-ronde {
    width: 50px;
    height: 50px;
    border-radius: 50%;  /* rend l'image circulaire */
    object-fit: cover;   /* garde le ratio et recadre si nécessaire */
}



.container .card {
    position: relative;
    width: 300px;
    height: 350px;
    margin: 20px;
    overflow: hidden;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .card img {
    object-fit: contain;
    width: 100%;
}
.container .card .content {
    position: absolute;
    bottom: -160px;
    width: 100%;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    flex-direction: column;
    backdrop-filter: blur(15px);
    box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    transition: bottom 0.5s;
    transition-delay: 0.65s;
    background: rgb(0, 0, 0, 0.4);
}
.container .card:hover .content {
    bottom: 0;
    transition-delay: 0s;
}
.container .card .content .contentBx h3 {
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0em!important;
    font-weight: 500;
    font-size: 16px!important;
    text-align: center;
    margin: 20px 0 15px;
    line-height: 1.1em;
    transition: 0.5s;
    transition-delay: 0.6s;
    opacity: 0;
    transform: translateY(-20px);
}
.container .card:hover .content .contentBx h3 {
    opacity: 1;
    transform: translateY(0);
}
.container .card .content .contentBx h3 span {
    font-size: 12px;
    font-weight: 300;
    text-transform: initial;

}
.container .card .content .sci {
    position: relative;
    bottom: 10px;
    display: flex;
}
.container .card .content .sci li {
    list-style: none;
    margin: 0 10px;
    transform: translateY(40px);
    transition: 0.5s;
    opacity: 0;
    transition-delay: calc(0.2s * var(--i));
}

.container .card:hover .content .sci li {
    transform: translateY(0);
    opacity: 1;
}
.container .card .content .sci li a {
    color: white;
    font-size: 24px;
}





/* Container qui contient le texte défilant */
.background-text {
    position: fixed;
    top: 50px;
    left: 0;
    width: 200%;
    height: 100%;
    white-space: nowrap;
    font-size: 10rem;
    font-weight: bold;
    color: rgba(88,155,186,0.08); /* Texte très léger pour l’effet fond */
    animation: scrollText 60s linear infinite;
    pointer-events: none; /* pour que le texte n’interfère pas avec les clics */
}

.background-text2 {
    position: fixed;
    top: 50px;
    left: 0;
    width: 200%;
    height: 100%;
    white-space: nowrap;
    font-size: 10rem;
    font-weight: bold;
    color: rgba(88,155,186,0.08); /* Texte très léger pour l’effet fond */
    animation: scrollText 60s linear infinite;
    pointer-events: none; /* pour que le texte n’interfère pas avec les clics */
}

@keyframes scrollText {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
    }
}

/* Contenu principal par-dessus */
.content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.bubble {
    background: #f2f0ed;
    padding: 30px;
    border-radius: 30px;
    position: relative; /* nécessaire pour placer le triangle */
    display: inline-block;
}

/* Petit triangle en haut à droite */
.bubble::after {
    content: "";
    position: absolute;
    top: -20px;       /* position au-dessus du bloc */
    right: 60px;      /* décale depuis la droite */
    width: 0;
    height: 0;
    border-width: 0 15px 20px 15px; /* largeur & hauteur du triangle */
    border-style: solid;
    border-color: transparent transparent #f2f0ed transparent;
}

.effect {
    position: relative;
    display: inline-block;
}

.effect::before {
    content: "";
    position: absolute;
    top: -30px;
    left: -30px;
    width: 120%;
    height: 120%;
    background: conic-gradient(from 180deg, #fff, #c0d9e5, #fff);
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
}


.btn-scroll {
    display: inline-block;
    padding: 12px 25px;
    background: #1d5975;         /* couleur de fond */
    color: #fff;              /* texte en blanc */
    border-radius: 30px;      /* arrondi */
    text-decoration: none;    /* enlève le souligné */
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-scroll:hover {
    background: #444;         /* couleur au survol */
    transform: translateY(-3px); /* petit effet flottant */
    color: #fff;
}

.big-quote {
    position: absolute;
    top:250px;       /* ajuste la hauteur */
    right: 120px;      /* espace depuis le bord droit */
    font-size:400px;
    color: #c6d6dd;
    font-family: "Reddit Sans", sans-serif;
    line-height: 1;
    pointer-events: none; /* évite qu’il gêne les clics */
}

/* Cacher la checkbox */
.toggle {
    display: none;
}

/* TITRE DU MENU AVEC FLÈCHE */
.submenu-title {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 5px 0;
}

/* Flèche */
.submenu-title .arrow {
    width: 13px;
    height: 13px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
    transition: 0.3s;
    margin-left: 0px;
    margin-right: 15px;
}

/* Sous-menu fermé */
.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-in-out;
    padding-left: 15px;
}

/* Sous-menu ouvert */
.toggle:checked ~ .submenu {
    max-height: 500px; /* assez large pour tout contenir */
}

/* Rotation de la flèche à l’ouverture */
.toggle:checked + .submenu-title .arrow {
    transform: rotate(-135deg);
}




.has-submenu label {
    color: #0095b6;
    font-size: 22px;
    font-family: "Reddit Sans", sans-serif;
    text-decoration: none;
    transition: color 0.3s, background 0.3s, padding 0.3s;
}