* {text-rendering:optimizelegibility;}
*, *:before, *:after {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

body, html {width:100%; font:var(--Default); color:black;}

:root {
    --Default: 100 1rem 'Open Sans', sans-serif;
    --BlueNavy: #0955a4;
    --GoldNavy:goldenrod;
    --ShipColor:#0c0c55;
    --BGColor: #d7ecfa;
    --ParisColor: #154b67;
    --BGBoxColor: #b7d8e99c;
    --TopMenuColor:#c4d7ff;
    --BGFooterColor:#819db2;
    --PresqueNoir: #323232;
    --PoppinsFont: 200 1.2rem "Poppins", sans-serif;
    --CardoFont: 400 1rem 'Cardo', serif;
    --OpenFont: 400 1rem 'Open Sans', sans-serif;
    --montserraCollo: 700 1rem "Montserrat", sans-serif
}

.left {float:inherit}

.text_shadow {text-shadow:1px 1px 2px rgb(80, 80, 80);}

h1, h2, h3, h4, h4, h6 {line-height:100%; letter-spacing:0rem;}
h1 {margin:0; font-family:'Stardos Stencil', cursive;}
h2 {margin:0; font-family: "Poppins", sans-serif;}
h3 {margin:0; font-family: "Poppins", sans-serif;}
h4 {margin:0; font-family: "Poppins", sans-serif;}
h5 {margin:0; font-family: "Poppins", sans-serif;}
h6 {margin:0; font-family: "Poppins", sans-serif;}

blockquote {margin:0; border:none; padding:0}


/* Modals */
.modal {background-color:white; max-height:50rem}
#modal1 {width:45vw;}
#modal2 {width:45vw}
#modal3, #modal4 {width:30vw}
#modal5 {width:900px}
#modal3, #modal4 h4 {font-size:4rem;}
.modalsv2 .modal-content {padding:0; margin-bottom:0rem;}
.modalsv2 h4 {text-align:center; font:var(--Default); padding:1.5rem 0; color:var(--PresqueNoir);}
.modalsv2 .modal-footer {display:flex; justify-content:center; margin-bottom:.5rem; align-items:center; background-color: #e5f0fb; border-top:1px solid grey}
.modalsv2 .modal-footer button {font-size:1.5rem; font-weight:400; line-height:.3rem; padding:1.5rem 2.5rem; background-color:var(--TopMenuColor); border:none; margin:0 .4rem}
.modalsv2 .modal-footer button:hover {box-shadow: inset 0px 0px 19px -3px rgba(178, 134, 206, 0.43);}
#modal2 cite {text-align:center; font-size:1.2rem; display:block;}
#modal6 {width:22rem}
#modal6 .modal-content {text-align:center;}
#modal6 h4 {padding:.6rem;}
#modal6 .modal-content p {font-size:.8rem; font-weight:400}
#modal6 .modal-footer {margin-bottom:0}
#modal6 .my_btn {display:block; font-size:.9rem; padding:.52rem 3rem; height:2.27rem; margin:0 auto 0 auto; color:white; background-color:var(--BlueNavy);}
#modal6 .my_btn:hover {background-color:var(--ShipColor); transition:.6s cubic-bezier(.14,.7,.93,.5);}

#modalplaquette, #modalplaquette img, #modalbooklogos, #modalbooklogos img {width:41vh}

.wrapper {position:relative; width:22.5rem; margin: 0 auto;}

header:not(.mod) {position:sticky; top:0; left:0; height:4.5rem; background-color:var(--ShipColor); z-index:500}
header:not(.mod).isSticky {opacity:1;}
div.top {display:flex; height:4.5rem; justify-content:space-evenly; align-items:center;}
div.dr_contener {cursor:pointer;}
div.dr_contener img {display:block; width:1.845rem; height:1.333rem; margin:0 auto; border:1px solid #ffffff8f}
div.dr_contener span {display:block; margin:.2rem auto 0 auto; font-size:.75rem; color:white}

div.togglemenu {display:flex; padding:.4rem 2.8rem .4rem 2rem; align-items:center; border:1px solid white; border-radius:3px; background-color:transparent;}
div.togglemenu:hover, div.espacemembres:hover {background-color:var(--BlueNavy); transition: background-color 1.2s;}
p#buttonmenu {color:white;}
p#buttonmenu .material-icons {line-height:inherit; font-size:2rem;}
header:not(.mod,) div.top p {font-family:var(--PoppinsFont); color:white; margin-left:.2rem; font-size:1.1rem; font-weight:400; align-self:center; cursor:pointer;}
div.medaillon_contener img:not(.bandeau_logo) {width:3rem;height:3rem}
div.medaillon_contener img.bandeau_logo {width:7rem;height:7rem}

main nav {position:absolute; display:none; width:100%; height:inherit; padding:.6rem .5rem 1rem .5rem; line-height:inherit; color:white; background-color:var(--BlueNavy); border-bottom-left-radius:6px; border-bottom-right-radius:6px; z-index:1000}
main nav .triggerclosecontener {display:flex; justify-content:flex-end;}
main nav span#triggerclose {height:auto; font-size:2rem; color:white; cursor:pointer}
main nav .menuc {display:flex; margin-top:-1.5rem; flex-direction:column;}
main nav .menuc .cols {display:flex; justify-content:flex-start; align-items:center; flex-direction: column; margin:0 0;}
main nav .menuc div:last-child {border:none}
main nav .menuc .cols a:link, main nav .menuc .cols a:visited {font-size:1.3rem; text-transform:capitalize; color:white; text-decoration:none; line-height:2.6rem; text-align:center; min-width:17rem; border-bottom:1px dotted #dfdfdf; border-radius: 2% / 58%;}
main nav .menuc .cols a:hover {background-color:var(--ShipColor); transition: background-color 1s;}
main nav .menuc .rs {display:flex; width:65%; justify-content:center; align-items:center; padding:.6rem 0; margin:5rem auto 0 auto; background-color:var(--ShipColor); border-radius:.5rem}
main nav .menuc .rs img {width:2.40rem; height:2.40rem; margin:0 .3rem; cursor:pointer;}

/* start home */
#home {position:relative; top:0; left:0;}
#home .btn_c {display:flex; flex-direction:column; margin:auto; justify-content: space-around;}
#home .btn_c .bf_btn {width:100%; margin-bottom:1rem}
/* end home */

/* start intro */
#intro {position:relative; top:0; left:0;}
#intro .text_contener {padding:2rem 1rem; text-align:justify; margin:0 auto; background-color:#f1f1f1; color:var(--ShipColor); border-bottom-left-radius:1rem; border-bottom-right-radius:1rem;}
#intro .text_contener p.big_titre {text-align:center;}
#intro .text_contener p {margin-bottom:.8rem}
/* end intro */

/* start Footer */
footer {margin-top:10rem; background-color:var(--ShipColor); min-height:30rem;}
footer .rs_barre {background-color:#154b67; height:7rem;}
footer .rs_barre .conteneur {display:flex; justify-content:center; align-items:center; width:70rem; height:100%; margin:0 auto;}
footer .rs_barre .conteneur .left, footer .rs_barre .conteneur .right {color:white; width:40%; padding:2rem 0; text-align:center; background-color: #375a6cfa;}
footer .rs_barre .conteneur .left:hover {background-color:var(--ShipColor)}
footer .rs_barre .conteneur .left {border-left: 1px solid white; border-right: 1px solid white; cursor:pointer;}
footer .rs_barre .conteneur .right {display:flex; justify-content:center; align-items:center; padding:1.5rem 0; border-right: 1px solid white}
footer .rs_barre .conteneur .right img {width:2.40rem; height:2.40rem; margin:0 .3rem; cursor:pointer;}
footer .flex_contener {display:flex; justify-content:flex-start; align-items:center; margin:2rem auto 0 auto;}
footer .flex_contener div.left, footer .flex_contener div.right {height:18.52rem; color:white; font-size:.85rem; line-height:1rem; background-color:#19195e;}
footer .flex_contener div.left {width:17.05rem; text-align:center;}
footer .flex_contener div.right {width:72rem; margin-left:2rem; padding:2.5rem 3rem}
footer .flex_contener div.left .medaillon_contener {position:relative; top:0px; left:0; width:7rem; margin:2rem auto 1.3rem auto}
footer .flex_contener div.left blockquote p {margin-bottom:.5rem;}
footer .flex_contener div.right .link_contener a:link, footer .flex_contener div.right .link_contener a:visited, footer .flex_contener div.right .link_contener a:active {font:var(--PoppinsFont); font-size:.85rem; color:white} 
footer .flex_contener div.right .link_contener a:hover {color:red}
footer .flex_contener div.right .link_contener span {margin:0 .2rem}
footer .flex_contener div.right .bottom_contener {position:absolute; right:3rem; bottom:2rem; height:2rem; text-align:right;}
footer .flex_contener div.right .bottom_contener {font-size:.70rem;}

.fade-in {opacity:1;}
.opa0{opacity:0;}
.opa5{opacity:0.5;}
.reveal-visible {opacity: 1; transition: .6s cubic-bezier(.14,.7,.93,.5);}
.top_pos {margin-top:-18rem; transition: 1s linear;}
.bottom_pos {margin-top:-6rem; transition: 1s linear;}

.tooltip {position:relative; display:inline-block;}
.tooltip .tooltiptext {position:absolute; visibility:hidden; width:90%; top:15rem; left:1rem; font-size:.7rem; background-color:var(--ShipColor); color:#fff; text-align:center; border-radius:6px; padding:5px 0; z-index:1;
}
.tooltip:hover .tooltiptext {visibility: visible;}

/* Start NewMenu */
header#newmenu:not(.mod) {position:sticky; top:0; left:0; align-items:center; border-bottom:1px solid var(--GoldNavy); background-color:var(--ShipColor); z-index:500}
header#newmenu:not(.mod).isSticky {opacity:1;}
header#newmenu:not(.mod) .wrapper {width:95%}

header#newmenu div.newmenutop {display:flex; width:100%; height:100%; justify-content:center; align-items:center;}
header#newmenu div.newmenutop div.left_contener {display:flex; width:fit-content; justify-content:flex-start; height:100%; align-items:center;}
header#newmenu div.newmenutop div.left_contener div.titre_contener h1 {font-size:1.3rem; color:white;}
header#newmenu div.newmenutop div.left_contener div.titre_contener h2 {font-size:1rem; color:white;}
header#newmenu div.newmenutop div.centerbloc {display:flex; height:100%;}
header#newmenu div.newmenutop div.centerbloc div.togglecontener {position:relative; display:flex; justify-content:center; align-items:center; height:100%; margin:0 auto;}
header#newmenu div.newmenutop div.centerbloc div.togglecontener a, header#newmenu div.newmenutop div.centerbloc div.togglecontener p, div.right_contener a:visited, header#newmenu .right_contener {color:white; font-size:.9rem; cursor:pointer;}
header#newmenu div.newmenutop div.centerbloc div.togglecontener a:hover, header#newmenu div.newmenutop .right_contener:hover {color:#ffe6a9;}
header#newmenu div.newmenutop div.centerbloc div.togglecontener span.dot, header#newmenu div.newmenutop div.centerbloc .button-collapse span.dot {margin:0 .5rem; font-size:.8rem; color:var(--GoldNavy)}
header#newmenu div.newmenutop div.right_contener {display:flex; height:100%;; justify-content: flex-end;}

header#newmenu .togglemenuc {width:100%; margin:0 auto;}
header#newmenu .button-collapse {display:flex; align-items:center; height:100%;}
header#newmenu .button-collapse a {color:white; font-size:.9rem; cursor:pointer;}

/*End NewMenu */



#inside_nav {position:relative; top:0; left:0;}
#inside_nav .inside_nav_contener {position:relative; top:0; left:0; display:flex; width:70rem; padding:1rem; justify-content:center; margin:1rem auto 0 auto; border-radius:1rem; background-color:#aabac3fa;}
#inside_nav .inside_nav_contener .left_btn, #inside_nav .inside_nav_contener .right_btn {display:flex;}
#inside_nav .inside_nav_contener .left_btn {margin-right: 0.4rem;}
#inside_nav .inside_nav_contener .right_btn {margin-left: 0.4rem;}
#inside_nav .inside_nav_contener .left_btn a, #inside_nav .inside_nav_contener .right_btn a {width:25rem; border-radius:.4rem;}

/* start main_accueil */
#main_accueil {position:relative; top:0; left:0;}
#main_accueil .flex_contener {display:flex; flex-direction:column; justify-content:flex-start; margin:2rem auto 0 auto; align-items:center; text-align:center}
#main_accueil .flex_contener blockquote {width:21rem;}
#main_accueil .flex_contener blockquote h1 {width:21rem; margin:auto; font-size:3rem; color:var(--ShipColor); line-height:2.6rem}
#main_accueil .flex_contener blockquote:nth-child(1) p {font:var(--PoppinsFont); font-size:1.7rem; color:red; font-weight:400}
#main_accueil .flex_contener img.blason {width:13rem; margin-top:1rem;}
#main_accueil .flex_contener blockquote:nth-child(3) p {font:var(--PoppinsFont); font-size:1.2rem; margin-top:3rem; color:var(--PresqueNoir); font-weight:400; line-height:1.2rem}
#main_accueil .top_slide {position:relative; height:15.5rem; overflow:hidden; margin:2rem auto 3rem auto}
/* end main_accueil */

/* start association */
#asso {position:relative; top:0; left:0; margin-bottom:3rem}
#asso .titre_box p:first-child {font-size:4rem; padding-right:2.1rem; text-transform:inherit;}
#asso div.full_line, #ancre div.full_line {display:flex; padding:6rem 0; justify-content:center; align-items:center; flex-wrap:wrap; background-color:var(--ShipColor);}
#asso div.full_line div.boxes, #asso div.full_line div.boxes2 {position:relative; top:0; left:0; width:32.7rem; height:23.653rem; margin:0 1rem; padding:2rem; background-color:white; color:var(--PresqueNoir);}
#asso div.full_line div.boxes .l1_contener {display:flex; justify-content:flex-start; align-items:center;}
#asso .l1_contener img {height:1.35rem; margin-right:.5rem;}
#asso .l1_contener p {font-weight:400; color:var(--BlueNavy)}
#asso div.full_line div.boxes blockquote {display:flex; flex-direction:column; justify-content:flex-start; margin-top:.9rem;}
#asso div.full_line div.boxes blockquote div.rows {display:flex; justify-content:flex-start; align-items:baseline; font-size:.8rem;}
#asso div.full_line div.boxes blockquote div.rows div.col:nth-child(1) {width:7.4rem; text-align:right; font-weight:500}
#asso div.full_line div.boxes blockquote div.rows div.col:nth-child(2) {width:21rem; line-height:.9rem; margin-left:.5rem;}
#asso div.full_line div.boxes blockquote div.rows:nth-child(3) {margin-top:.7rem; font-size:.85rem; font-weight:500}
#asso div.full_line div.boxes blockquote p {font-size:.8rem; font-weight:500; text-align:center; margin:1rem 0 .3rem 0}
#asso div.full_line div.box2 blockquote div.rows div.col:nth-child(1) {width:12rem;}
#asso div.full_line div.box1 blockquote p {margin-top:2.75rem}
#asso div.full_line div.boxes2_contener {display:flex; justify-content:space-evenly; width:69.7rem; height:inherit}
#asso div.boxes2_contener div.box3, #asso div.boxes2_contener div.box4, #asso div.boxes2_contener div.box5 {position:relative; top:0; left:0; width:30rem; height:inherit; margin:1.9rem 1rem; padding:1.2rem 2rem; background-color:white; color:var(--PresqueNoir)}
#asso div.full_line div.boxes2_contener .boxes2 p:nth-child(1) {margin-bottom:.2rem; font-size:.9rem; font-weight:400}
#asso div.full_line div.boxes2_contener .boxes2 p.text {margin-bottom:.2rem; font-size:.8rem; line-height:.9rem; text-align:justify;}
#asso div.full_line div.boxes2_contener .box4 p.text:nth-child(3) {color:red; font-weight:400}
#asso div.full_line div.boxes3_contener {position:relative; top:0; left:0; width:69.7rem; height:inherit; margin:0 auto}
#asso div.full_line div.boxes3_contener .box6 {position:relative; top:0; left:0; height:inherit; margin:1.9rem 1rem; padding:1.2rem 2rem; background-color:white; color:var(--PresqueNoir)}
#asso div.full_line div.boxes3_contener .box6 p:first-child {font-weight:600; text-align:center; margin-bottom:.5rem; color:var(--BlueNavy)}
#asso .media-box {cursor:pointer;}
#asso .media-box .media-box-content {min-height:5.4rem; background:#f6f6f6; border:1px solid #dfdfdf; padding:0 .35rem;}
#asso .media-box .media-box-text {font-size:.7rem; text-align:center; color:#000000; line-height:1rem}
#asso .media-box .thumbnail-overlay {color:white;}
#asso .media-box .thumbnail-overlay .material-symbols-outlined {font-size:2rem;}
#asso .honor_contener {position:relative; top:0; left:0; margin:1.9rem 1rem; padding:1.2rem 2rem; color:var(--PresqueNoir);}
#asso .honor_contener p {text-align:center;}
#asso .honor_img_center {position:relative; top:0; left:0; width:40rem; margin:0 auto;}
#asso .media-box-categories {text-align:center; margin-top:1rem; margin-bottom:.677rem;}
#asso .media-box-categories span{font-size:.46rem; text-transform:uppercase; letter-spacing:.104rem; border-bottom:1px solid; padding-bottom:.104rem; border-color:#e54e53; color:#e54e53;}

.overflow-ellipsis {text-overflow: ellipsis;}

#modal1 .flex_contener, #modal2 .flex_contener, #modal3 .flex_contener {display:flex; justify-content:space-evenly; align-items:flex-start; padding:2rem 0 1rem 2rem;}
#modal1 .flex_contener div.tg_lilly {width:8.41rem; height:16.72rem; background-image:url('../images/v2/bureau/06.jpg'); background-position:center center; background-repeat: no-repeat; background-size:cover;}
#modal1 .flex_contener .medaillon_contener, #modal2 .flex_contener .medaillon_contener, #modal3 .flex_contener .medaillon_contener {width:7rem; margin:2.4rem auto 2.3rem auto}
#modal1 .flex_contener div.text_contener, #modal2 .flex_contener div.text_contener, #modal3 .flex_contener div.text_contener {width:34rem; margin-left:1rem;}
#modal1 .flex_contener div.text_contener p.titre, #modal2 .flex_contener div.text_contener p.titre, #modal3 .flex_contener div.text_contener p.titre {font:var(--Default); font-size:1.3rem;}
#modal1 .flex_contener div.text_contener blockquote, #modal2 .flex_contener div.text_contener blockquote, #modal3 .flex_contener div.text_contener blockquote {width:30rem; font-size: 0.85rem;}
#modal1 .flex_contener div.text_contener blockquote p, #modal2 .flex_contener div.text_contener blockquote p, #modal3 .flex_contener div.text_contener blockquote p {margin-top:.5rem; text-align:justify;}
#modal1 .flex_contener div.text_contener blockquote iframe, #modal2 .flex_contener div.text_contener blockquote iframe, #modal3 .flex_contener div.text_contener blockquote iframe {width:31.25rem; height:18.75rem; padding-top:2rem;}
#modal1 .legende_contener, #modal2 .legende_contener, #modal3 .legende_contener {width:40rem; margin:0 auto; font-size:.7rem; font-style:italic; text-align:justify;}
#modal1 .legende_contener p:nth-child(2), #modal2 .legende_contener p:nth-child(2), #modal3 .legende_contener p:nth-child(2) {margin-top:.5rem}
#modal2 .flex_contener div.philip_a_dur {width:8.41rem; height:16.72rem; background-image:url('../images/v2/bureau/07.jpg'); background-position:center center; background-repeat: no-repeat; background-size:cover;}
#modal3 .flex_contener div.text_contener blockquote img {width:30rem; height:18rem; object-fit:cover; margin-top:2rem;}
/* end association */
/* end association */

    .toggle-box {
            margin-bottom: 20px;
        }

        .toggle-btn {
            padding: 8px 12px;
            background: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            font-size: 20px;
        }

        .toggle-btn:hover {
            background: #0056b3;
        }

        .toggle-content {
            display: none;
            padding: 10px;
            margin-top: 5px;
            background: #f0f0f0;
            border: 1px solid #ccc;
        }

        .toggle-icon {
            transition: transform 0.3s;
        }

        .expanded .toggle-icon {
            transform: rotate(180deg);
        }