@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
@import url('menu.css');
@import url('responsive.css');
@import url('burger.css');
@import url('up.css');
@import url('pagination_entrearticle.css');
@import url('tumeurs.css');
@import url('actualites.css');
@import url('page-actualite.css');
@import url('le-journal.css');
@import url('temoignage.css');
@import url('temoignage-article.css');
@import url('login.css');
@import url('account-recovery.css');
@import url('contact.css');
@import url('delegations.css');
@import url('equipes-soutenues.css');
@import url('publications.css');
@import url('publication-article.css');
@import url('projets-soutenus.css');
@import url('equipements-finances.css');
@import url('intranet.css');
@import url('module-pince-articles.css');
@import url('accueil.css');
@import url('module-temoignage.css');
@import url('page.css');
@import url('module-actions.css');
@import url('module_lien.css');
@import url('presentation-artcsud.css');
@import url('fonctionnement.css');
@import url('module-conseil-scientifique.css');
@import url('module-le-journal.css');
@import url('module-faire-un-don-intro.css');
@import url('faire-un-don.css');
@import url('objectifs.css');
@import url('associations-slider.css');

.moduletable.infoutile > h3 {
    margin: 0 0 1.5rem;
    color: #04377c;
    font-family: var(--secondary-font-family);
    font-size: clamp(1.55rem, 1.3rem + .8vw, 2.1rem);
    font-weight: 700;
}

.scroll-to-top {
    border: 0;
    cursor: pointer;
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
}


:root {
    --main-font-family: "Noto Serif", serif;
  --secondary-font-family: "Poppins", sans-serif;
  --site-container-max-width: 1450px;
}



  :root {
    --couleur-principale: #f06908; /*orange*/
    --couleur-vert-fonce: #003436 ; /*vert foncé*/
    --couleur-texte: #000000; /*noir*/
    --couleur-vert-clair: #006a73; /*vert clair*/
    --couleur-vert-medium: #02838d; /*vert medieum*/
    --couleur-vert_turquoise: #55c3cb; /*vert turquoise */
    --couleur-gris-fonce: #919191; /*gris fonce*/
    --couleur-gris-clair: #f5f4f4; /*gris clair*/
     --couleur-vert-tres-fonce: #062528; /*gris clair*/
    --couleur-bleu-fonce: #094045; /*bleu fonce*/
}

body {
font-family: var(--secondary-font-family)!important;
font-weight: 400;
  font-size:16px;
font-style: normal;  
overflow-x: hidden;
}

@media (min-width: 1400px) {
    .container {
        max-width: var(--site-container-max-width);
    }
}

.imgh {
    border-bottom: 1px dotted var(--couleur-vert-medium);
    padding-bottom: 25px;
    margin-bottom: 25px;
}

/* Bouton d'édition frontend Joomla - style amélioré */
.icons .float-end a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #2D364B;
  color: #fff !important;
  font-weight: 500;
  border-radius: 8px;
  padding: 6px 12px;
  text-decoration: none;
  font-size: 0.875rem;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.icons .float-end a:hover {
  background: #44506A;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.icons .float-end a .icon-edit::before {
  content: "\f044"; /* fa-pencil-alt */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.icons .float-end {
  position: relative;
  z-index: 10;
}

/* Tooltip custom Joomla */
.icons .float-end [role="tooltip"] {
  display: none; /* on masque le tooltip Joomla moche */
}

.cookie-manager-button {
  position: fixed;
  left: clamp(0.75rem, 1.6vw, 1.25rem);
  bottom: clamp(0.75rem, 1.6vw, 1.25rem);
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.625rem, 2.35rem + 0.7vw, 3rem);
  height: clamp(2.625rem, 2.35rem + 0.7vw, 3rem);
  padding: 0;
  border: 1px solid rgba(126, 68, 25, 0.16);
  border-radius: 50%;
  background: #fff3df;
  color: #c8752a;
  box-shadow: 0 0.35rem 1.1rem rgba(45, 45, 45, 0.14);
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.cookie-manager-button:hover,
.cookie-manager-button:focus-visible {
  color: #a95a1d;
  opacity: 1;
  transform: translateY(-0.1rem);
  box-shadow: 0 0.5rem 1.35rem rgba(45, 45, 45, 0.2);
}

.cookie-manager-button:focus-visible {
  outline: 3px solid rgba(11, 171, 212, 0.38);
  outline-offset: 3px;
}

.cookie-manager-button i {
  color: inherit;
  font-size: clamp(1.25rem, 1.08rem + 0.45vw, 1.5rem);
  line-height: 1;
}

.quote {
    font-size: 24px;
    text-align: center;
}

.niveau_gris {
    background-color:  var(--couleur-gris-clair);
}

.baseline {
	text-align: right;
      font-size: clamp(16px, 3vw, 24px);
	color: var(--couleur-principale);   
}

.reseauxfooter h3 {    text-align: center;font-size: 30px;    color: black;}

.site-footer {
    border-top: 1px solid #ffba00;
    padding: 50px 0;
}

.menufooter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menufooter .nav-item {
    width: 100%;
}

.menufooter a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0;
    color: #464646;
    font-size: clamp(0.875em, 0.84em + 0.12vw, 0.95em);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.18s ease, transform 0.18s ease;
}

.menufooter a::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.55rem;
    background: #ffba00;
    transform: scale(0.72);
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.menufooter a:hover,
.menufooter a:focus-visible,
.menufooter .active > a,
.menufooter .current > a {
    color: #04377c;
    transform: translateX(0.18rem);
    outline: none;
}

.menufooter a:hover::before,
.menufooter a:focus-visible::before,
.menufooter .active > a::before,
.menufooter .current > a::before {
    background: #2babd4;
    transform: scale(1);
}

@media (max-width: 767.98px) {
    .menufooter {
        align-items: center;
        text-align: center;
    }

    .menufooter a {
        justify-content: center;
    }

    .menufooter a:hover,
    .menufooter a:focus-visible,
    .menufooter .active > a,
    .menufooter .current > a {
        transform: none;
    }
}



.com-content-article h1.titre_orange {color: var(--couleur-principale);
    text-align: left;
    font-size: 36px;
    font-weight: bold;
    margin: 0px 0px 10px 0px;}

/* Accompagnement des patients & familles : aérer légèrement l'introduction. */
body:has(.menu-principal .item-113.current) .page-article > .page-header h1 {
    margin-bottom: 1.25rem;
}

body:has(.menu-principal .item-113.current) .page-article .com-content-article__body > h2:first-child {
    margin-bottom: 1.5rem;
}

body:has(.menu-principal .item-113.current) .page-article .com-content-article__body > h3:first-of-type {
    margin-bottom: 0.75rem;
}

.lienjournal a {
    display: block;
    width: 100%;
    padding: 1.25rem 1.75rem;
    background-color: #2babd4;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.lienjournal a:hover,
.lienjournal a:focus-visible {
    background-color: #04377c;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(4, 55, 124, 0.2);
}

.lienjournal a:focus-visible {
    outline: 3px solid rgba(43, 171, 212, 0.38);
    outline-offset: 3px;
}

.equipes-soutenues-category .equipes-soutenues-item__download {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.55rem;
    margin-top: clamp(1rem, 2vw, 1.5rem);
    color: #04377c;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.35;
    text-decoration: none;
    text-transform: uppercase;
      font-family: var(--secondary-font-family);
}

.equipes-soutenues-category .equipes-soutenues-item__download img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 1.15rem;
    transition: transform 0.18s ease;
}

.equipes-soutenues-category .equipes-soutenues-item__download:hover,
.equipes-soutenues-category .equipes-soutenues-item__download:focus-visible {
    color: #2babd4;
    text-decoration: none;
    outline: none;
}

.equipes-soutenues-category .equipes-soutenues-item__download:hover img,
.equipes-soutenues-category .equipes-soutenues-item__download:focus-visible img {
    transform: translateX(0.2rem);
}

.equipes-soutenues-category .equipes-soutenues-item__download + .equipes-soutenues-item__link {
    margin-top: 0.75rem;
}

.footerlogo img {
    width: 80%;
    height: auto;
}

/* Smartphones (moins de 576px) */
@media (max-width: 575.98px) {
    .footerlogo img {
        width: 30%;
        margin-bottom: 15px;
    }
}

/* Petits écrans (≥576px et <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .footerlogo img {
        width: 50%;
    }
}

/* Moyens écrans (≥768px et <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .footerlogo img {
        width: 45%;
    }
}

/* Grands écrans (≥992px et <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .footerlogo img {
        width: 70%;
    }
}

/* Très grands écrans (≥1200px) */
@media (min-width: 1200px) {
    .footerlogo img {
        width: 80%;
    }
}





.reseauxfooter {
    padding-bottom: 35px;
}



@media (max-width: 575.98px) {
    .slidevide {
        min-height: 227px;
    }
    .slidevideintranet {
        min-height: 180px;
    }
}

/* ≥576px (sm) */
@media (min-width: 576px) {
    .slidevide {
        min-height: 229px;
    }
  .slidevideintranet {
        min-height: 180px;
    }
}

/* ≥768px (md) */
@media (min-width: 768px) {
    .slidevide {
        min-height: 251px;
    }
  .slidevideintranet {
        min-height: 200px;
    }
}

/* ≥992px (lg) */
@media (min-width: 992px) {
    .slidevide {
        min-height: 251px;
    }
   .slidevideintranet {
        min-height: 200px;
    }
}

/* ≥1200px (xl) */
@media (min-width: 1200px) {
    .slidevide {
        min-height: 251px;
    }
   .slidevideintranet {
        min-height: 200px;
    }
  
}




a.suiveznoussurinstagram  {    text-decoration: none!important;}


.footervisite {

    margin-top: -30px;
}


.logofooter img {
  width: 100%;
  height: auto;
  max-width: 358px;
}




.footervisite a {text-decoration: underline;}
.footervisite a:hover, .footervisite a:focus  {text-decoration: none;}




.suivez_nous_instagram_footer {
    padding-left: 0.7rem;
}

.uk-scope .uk-dotnav>.uk-active>* {
    background-color: var(--couleur-secondaire);
    border-color: transparent;
}

.uk-scope .uk-dotnav>*>* {
    display: block;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: 0 0;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid var(--couleur-secondaire);
    transition: .2s ease-in-out;
    transition-property: background-color, border-color;
}


.nrf-widget.map-widget .map-item { z-index: -6;}






/* Supprime les puces de la liste */

.fields-container {
    list-style: none; /* Supprime les puces */
    padding: 0; /* Supprime le padding par défaut */
    margin: 0; /* Supprime les marges par défaut */
}



/* Ajoute un contour à chaque figure */

.fields-container .field-entry .item {

    border: 2px solid var(--couleur-secondaire); /* Contour avec la couleur spécifiée */

    border-radius: 4px; /* Coins légèrement arrondis (optionnel) */

    padding: 5px; /* Espace intérieur pour une meilleure apparence */

    margin: 10px; /* Espacement entre les figures */

}



/* Ajoute un effet au survol (optionnel) */

.fields-container .field-entry .item:hover {

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Effet d'ombre au survol */

    transform: scale(1.05); /* Légère mise en avant */

    transition: all 0.3s ease; /* Animation fluide */

}





.visually-hidden {display:none;}





.sansmarge {

    padding-right: 0px;

    padding-left: 0px;

}




.footer a {

    color: var(--couleur-secondaire)!important;

    text-decoration: none;

}









.adressefooter{ 

   

    margin: 8px 0px;

}







.intro_titre {

    font-size: 1.7em;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 3px;

}






.grid-child {

    display: flex;

    width: 100%;

    max-width: var(--site-container-max-width);

    margin-right: auto;

    margin-left: auto;

}







.footer {

 background-color: var(--couleur-gris-clair);
    border-top: 1px solid  var(--couleur-vert-medium);
    padding-top: 50px;
    padding-bottom: 50px;
        color: var(--couleur-gris-fonce);
}



.nivmenu {

          height: 100px;
   

    width: 100%;

    position: absolute;

}




.uk-scope .uk-h1, .uk-scope .uk-h2, .uk-scope .uk-h3, .uk-scope .uk-h4, .uk-scope .uk-h5, .uk-scope .uk-h6, .uk-scope .uk-heading-2xlarge, .uk-scope .uk-heading-3xlarge, .uk-scope .uk-heading-large, .uk-scope .uk-heading-medium, .uk-scope .uk-heading-small, .uk-scope .uk-heading-xlarge, .uk-scope h1, .uk-scope h2, .uk-scope h3, .uk-scope h4, .uk-scope h5, .uk-scope h6 {

}



.swiper-button-next:after, .swiper-button-prev:after {

    font-family: swiper-icons;

    font-size: 1.5em;

    font-weight: 600;

    text-transform: none !important;

    letter-spacing: 0;

    font-variant: initial;

    line-height: 1;

    color: black;

}







ul.reseauxsociauxmenu > li > a.reseaux span.visually-hidden {

    display: none;

}



/* -------------------------------------------------------------
   Header / navigation ARTCSUD
   ------------------------------------------------------------- */
html {
    font-family: var(--main-font-family);
    overflow-x: hidden;
}

body {
    font-family: var(--main-font-family) !important;
    overflow-x: hidden;
}

button,
input,
select,
textarea,
.nav,
.mod-menu,
.header-site,
.menu-principal,
.header-top {
    font-family: var(--secondary-font-family);
}

.header-site {
    background: #fff;
    position: relative;
    z-index: 20;
}

.header-site .container {
    max-width: var(--site-container-max-width);
}

.header-top {
    border-bottom: 1px solid #dad9d9;
    background: #fff;
}

.header-top .container {
    min-height: 2.25rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header-top .mod-menu,
.header-top .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-top .mod-menu > li > a,
.header-top .nav > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.45rem 0.65rem;
    color: #525151;
    font-size: clamp(0.75em, 0.72em + 0.15vw, 0.8125em);
    line-height: 1.25;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.header-top .mod-menu > li > a:hover,
.header-top .mod-menu > li > a:focus-visible,
.header-top .nav > li > a:hover,
.header-top .nav > li > a:focus-visible {
    background-color: #eee;
    color: #525151;
    outline: none;
}

.header-top .mod-menu > li.current > a,
.header-top .mod-menu > li.active > a,
.header-top .nav > li.current > a,
.header-top .nav > li.active > a {
    background-color: #eee;
    color: #2babd4;
}

.header-top .mod-menu > li > a.deconnexion,
.header-top .nav > li > a.deconnexion {
    background-color: #f2725d;
    color: #fff;
    font-weight: 700;
}

.header-top .mod-menu > li > a.deconnexion:hover,
.header-top .mod-menu > li > a.deconnexion:focus-visible,
.header-top .nav > li > a.deconnexion:hover,
.header-top .nav > li > a.deconnexion:focus-visible {
    background-color: #04377c;
    color: #fff;
}

.header-top .facebb {
    min-width: 2.25rem;
    padding-top: 0;
    padding-bottom: 0;
}

.header-top .facebb .fa-brands {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1;
}

.header-top .facebb .fa-facebook {
    color: #1877f2;
}

.header-top .facebb .fa-youtube {
    color: #ff0000;
}

.header-separator {
    display: none;
}

.header-main {
    background: #fff;
}

.header-main > .container {
    min-height: 5.25rem;
    display: flex;
    align-items: center;
}

.header-main .row {
    width: 100%;
}

.logo-wrapper .custom,
.logo-wrapper p,
.offcanvas-title .custom,
.offcanvas-title p {
    margin: 0;
}

.logo-wrapper img {
    display: block;
    width: auto;
    max-width: min(237px, 52vw);
    height: auto;
}

.menu-principal .mod-menu,
.menu-principal .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-submenu {
    border-top: 1px solid #f0f0f0;
    background: #fff;
}

.header-submenu:empty,
.header-submenu .container:empty {
    display: none;
}

.header-submenu .moduletable,
.header-submenu .mod-menu {
    margin: 0;
}

.header-submenu .mod-menu {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: 0;
    list-style: none;
}

.header-submenu .mod-menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.7rem 0.85rem;
    color: #2d2d2d;
    font-family: var(--secondary-font-family);
    font-size: clamp(0.8125em, 0.78em + 0.16vw, 0.875em);
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.header-submenu .mod-menu > li > a:hover,
.header-submenu .mod-menu > li > a:focus-visible {
    background-color: #eee;
    color: #2d2d2d;
    outline: none;
}

.header-submenu .mod-menu > li.current > a,
.header-submenu .mod-menu > li.active > a {
    color: #04377c;
    border-bottom: 2px solid #3db6e2;
}

.menu-principal {
    margin-left: auto;
    justify-content: flex-end;
}

.menu-principal .mod-menu > li > a,
.menu-principal .nav > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.65rem 0.85rem;
    color: #2d2d2d;
    font-size: clamp(0.8125em, 0.78em + 0.16vw, 0.875em);
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.menu-principal .mod-menu > li > a:hover,
.menu-principal .mod-menu > li > a:focus-visible,
.menu-principal .nav > li > a:hover,
.menu-principal .nav > li > a:focus-visible,
.menu-principal .mod-menu > li.current > a,
.menu-principal .mod-menu > li.active > a,
.menu-principal .nav > li.current > a,
.menu-principal .nav > li.active > a {
    background-color: #eee;
    color: #2d2d2d;
    outline: none;
}

.menu-principal .mod-menu > li > a.faireundons,
.menu-principal .nav > li > a.faireundons {
    background-color: #ffba00;
    color: #04377c;
}

.menu-principal .mod-menu > li > a.faireundons:hover,
.menu-principal .mod-menu > li > a.faireundons:focus-visible,
.menu-principal .nav > li > a.faireundons:hover,
.menu-principal .nav > li > a.faireundons:focus-visible {
    background-color: #04377c;
    color: #fff;
}

.navbar-toggler {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.28rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid #dad9d9;
    border-radius: 0;
    background: #fff;
    color: #2d2d2d;
}

.navbar-toggler:hover,
.navbar-toggler:focus-visible {
    background-color: #eee;
    outline: 2px solid #2babd4;
    outline-offset: 2px;
    box-shadow: none;
}

.burger-line {
    display: block;
    width: 1.35rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.offcanvas.menusmartphone,
#offcanvasMenu {
    max-width: min(22rem, 86vw);
}

#offcanvasMenu .offcanvas-header {
    min-height: 4.5rem;
    border-bottom: 1px solid #dad9d9;
}

#offcanvasMenu .offcanvas-title {
    color: #2d2d2d;
    font-family: var(--secondary-font-family);
    font-size: 1rem;
    font-weight: 700;
}

#offcanvasMenu .btn-close:focus-visible {
    outline: 2px solid #2babd4;
    outline-offset: 2px;
    box-shadow: none;
}

.menusmartphone .mod-menu,
.menusmartphone .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menusmartphone .mod-menu > li,
.menusmartphone .nav > li {
    width: 100%;
}

.menusmartphone .mod-menu > li > a,
.menusmartphone .nav > li > a {
    display: block;
    padding: 0.85rem 0.75rem;
    color: #2d2d2d;
    font-family: var(--secondary-font-family);
    font-size: clamp(1em, 0.95em + 0.25vw, 1.125em);
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}

.menusmartphone .mod-menu > li > a:hover,
.menusmartphone .mod-menu > li > a:focus-visible,
.menusmartphone .mod-menu > li.current > a,
.menusmartphone .mod-menu > li.active > a,
.menusmartphone .nav > li > a:hover,
.menusmartphone .nav > li > a:focus-visible,
.menusmartphone .nav > li.current > a,
.menusmartphone .nav > li.active > a {
    background-color: #eee;
    color: #2d2d2d;
    outline: none;
}

@media (max-width: 991.98px) {
    .header-top {
        display: none;
    }

    .header-top .container {
        justify-content: center;
    }

    .header-top .mod-menu,
    .header-top .nav {
        justify-content: center;
    }

    .header-main > .container {
        min-height: 4.5rem;
    }
}

@media (max-width: 575.98px) {
    .header-top .mod-menu > li > a,
    .header-top .nav > li > a {
        min-height: 2rem;
        padding: 0.4rem 0.5rem;
    }

    .logo-wrapper img {
        max-width: min(200px, 58vw);
    }
}

/* -------------------------------------------------------------
   Navigation mobile
   ------------------------------------------------------------- */
#offcanvasMenu.mobile-navigation {
    width: min(31rem, 92vw);
    max-width: none;
    border-left: 0;
    background: #fff;
    color: #2d2d2d;
    box-shadow: -1rem 0 3rem rgba(4, 55, 124, 0.16);
}

.mobile-navigation__header {
    min-height: 5.25rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #e5e8ea;
    background: #fff;
}

.mobile-navigation__brand {
    display: flex;
    align-items: center;
}

.mobile-navigation__brand .custom,
.mobile-navigation__brand p {
    margin: 0;
}

.mobile-navigation__brand img {
    display: block;
    width: auto;
    max-width: min(13rem, 58vw);
    max-height: 3.75rem;
}

.mobile-navigation__close {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid #dadfe2;
    border-radius: 50%;
    background: #fff;
    color: #04377c;
}

.mobile-navigation__close::before,
.mobile-navigation__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.15rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.mobile-navigation__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-navigation__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-navigation__close:hover,
.mobile-navigation__close:focus-visible {
    border-color: #2babd4;
    background: #edf8fb;
    outline: 3px solid rgba(43, 171, 212, 0.25);
    outline-offset: 2px;
}

.mobile-navigation__body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.25rem 1.25rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.mobile-navigation__label {
    margin: 0 0 0.65rem;
    color: #527083;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mobile-navigation__primary .mod-menu,
.mobile-navigation__secondary .mod-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-navigation__primary .mod-menu > li {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #e8ebed;
}

.mobile-navigation__primary .mod-menu > li > a,
.mobile-navigation__primary .mod-menu > li > .mod-menu__toggle-sub {
    min-height: 3.65rem;
    color: #2d2d2d;
    font-family: var(--secondary-font-family);
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
    font-weight: 700;
    line-height: 1.25;
}

.mobile-navigation__primary .mod-menu > li > a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.9rem 0.35rem;
    text-decoration: none;
}

.mobile-navigation__primary .mod-menu > li > .mod-menu__toggle-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.9rem 0.35rem;
    border: 0;
    background: transparent;
    text-align: left;
}

.mobile-navigation__primary .mod-menu__heading,
.mobile-navigation__primary .mod-menu__separator {
    color: inherit;
    font: inherit;
}

.mobile-navigation__primary .icon-chevron-down {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: 0.75rem;
    border-radius: 50%;
    background: #edf8fb;
    color: #2babd4;
    transition: color 0.22s ease, transform 0.22s ease;
}

.mobile-navigation__primary .icon-chevron-down::before {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-size: 0.82rem;
    font-weight: 900;
}

.mobile-navigation__primary li.is-open > .mod-menu__toggle-sub .icon-chevron-down {
    color: #04377c;
    transform: rotate(180deg);
}

.mobile-navigation__primary .mod-menu > li > a:hover,
.mobile-navigation__primary .mod-menu > li > a:focus-visible,
.mobile-navigation__primary .mod-menu > li > .mod-menu__toggle-sub:hover,
.mobile-navigation__primary .mod-menu > li > .mod-menu__toggle-sub:focus-visible {
    color: #04377c;
    outline: none;
}

.mobile-navigation__primary .mod-menu > li.current > a,
.mobile-navigation__primary .mod-menu > li.active > a,
.mobile-navigation__primary .mod-menu > li.active > .mod-menu__toggle-sub {
    color: #04377c;
}

.mobile-navigation__primary .mod-menu > li.current > a::before {
    content: "";
    width: 0.35rem;
    height: 0.35rem;
    margin-right: 0.6rem;
    border-radius: 50%;
    background: #2babd4;
}

.mobile-navigation__primary .mod-menu__sub {
    display: block;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #f5f8f9;
    list-style: none;
    transition: max-height 0.32s ease;
}

.mobile-navigation__primary li.is-open > .mod-menu__sub {
    display: block;
    max-height: 30rem !important;
}

.mobile-navigation__primary.menusmartphone ul.mod-menu__sub > li {
    border-top: 1px solid rgba(82, 112, 131, 0.12);
    opacity: 1 !important;
    transform: none !important;
}

.mobile-navigation__primary .mod-menu__sub > li > a {
    display: flex;
    align-items: center;
    min-height: 3.1rem;
    padding: 0.75rem 1rem 0.75rem 1.35rem;
    color: #464646;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.mobile-navigation__primary .mod-menu__sub > li > a::before {
    content: "";
    flex: 0 0 auto;
    width: 0.32rem;
    height: 0.32rem;
    margin-right: 0.65rem;
    border-radius: 50%;
    background: #b8c7ce;
}

.mobile-navigation__primary .mod-menu__sub > li > a:hover,
.mobile-navigation__primary .mod-menu__sub > li > a:focus-visible,
.mobile-navigation__primary .mod-menu__sub > li.current > a {
    background: #e8f5f8;
    color: #04377c;
    outline: none;
}

.mobile-navigation__primary .mod-menu__sub > li.current > a::before {
    background: #2babd4;
}

.mobile-navigation__primary .item-114 > a {
    justify-content: center;
    min-height: 3.25rem;
    margin: 0.85rem 0;
    padding: 0.75rem 1rem;
    background: #ffba00;
    color: #04377c;
}

.mobile-navigation__primary .item-114 > a:hover,
.mobile-navigation__primary .item-114 > a:focus-visible {
    background: #04377c;
    color: #fff;
}

.mobile-navigation__secondary {
    padding-top: 1.2rem;
    border-top: 1px solid #dfe5e8;
}

.mobile-navigation__secondary .mod-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.mobile-navigation__secondary .mod-menu > li {
    min-width: 0;
}

.mobile-navigation__secondary .mod-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 0.75rem;
    background: #f3f5f6;
    color: #464646;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    text-align: center;
}

.mobile-navigation__secondary .mod-menu > li > a:hover,
.mobile-navigation__secondary .mod-menu > li > a:focus-visible,
.mobile-navigation__secondary .mod-menu > li.current > a {
    background: #edf8fb;
    color: #04377c;
    outline: none;
}

.mobile-navigation__secondary .facebb {
    justify-content: center;
    font-size: 1.15rem;
}

.mobile-navigation__secondary a.facebb {
    color: #fff;
}

.mobile-navigation__secondary a.facebb:has(.fa-facebook) {
    background: #1877f2;
}

.mobile-navigation__secondary a.facebb:has(.fa-youtube) {
    background: #ff0000;
}

.mobile-navigation__secondary a.facebb:has(.fa-facebook):hover,
.mobile-navigation__secondary a.facebb:has(.fa-facebook):focus-visible {
    background: #0d65d9;
    color: #fff;
}

.mobile-navigation__secondary a.facebb:has(.fa-youtube):hover,
.mobile-navigation__secondary a.facebb:has(.fa-youtube):focus-visible {
    background: #d90000;
    color: #fff;
}

.mobile-navigation__secondary a.facebb .fa-brands {
    color: #fff;
}

.navbar-toggler.is-open .burger-line:first-child {
    transform: translateY(0.39rem) rotate(45deg);
}

.navbar-toggler.is-open .burger-line:nth-child(2) {
    opacity: 0;
}

.navbar-toggler.is-open .burger-line:last-child {
    transform: translateY(-0.39rem) rotate(-45deg);
}

.navbar-toggler .burger-line {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (max-width: 575.98px) {
    #offcanvasMenu.mobile-navigation {
        width: 100vw;
    }

    .mobile-navigation__secondary .mod-menu {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-navigation__primary .mod-menu__sub,
    .mobile-navigation__primary .icon-chevron-down,
    .navbar-toggler .burger-line {
        transition: none;
    }
}

/* -------------------------------------------------------------
   Menu principal : sous-menus desktop
   ------------------------------------------------------------- */
@media (min-width: 992px) {
    .menu-principal .mod-menu > li,
    .menu-principal .nav > li {
        position: relative;
    }

    .menu-principal .mod-menu > li > a,
    .menu-principal .nav > li > a,
    .menu-principal .mod-menu > li > button.mod-menu__toggle-sub,
    .menu-principal .nav > li > button.mod-menu__toggle-sub {
        border-radius: 0.25rem;
    }

    .menu-principal .mod-menu > li > button.mod-menu__toggle-sub,
    .menu-principal .nav > li > button.mod-menu__toggle-sub {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        min-height: 2.75rem;
        padding: 0.65rem 0.85rem;
        border: 0;
        background: transparent;
        color: #2d2d2d;
        font: inherit;
        font-size: clamp(0.8125em, 0.78em + 0.16vw, 0.875em);
        font-weight: 700;
        line-height: 1.25;
        text-align: left;
        cursor: pointer;
        transition: background-color 0.18s ease, color 0.18s ease;
    }

    .menu-principal .mod-menu > li > button.mod-menu__toggle-sub:hover,
    .menu-principal .mod-menu > li > button.mod-menu__toggle-sub:focus-visible,
    .menu-principal .mod-menu > li:hover > button.mod-menu__toggle-sub,
    .menu-principal .mod-menu > li:focus-within > button.mod-menu__toggle-sub,
    .menu-principal .mod-menu > li.is-open > button.mod-menu__toggle-sub {
        background-color: #eee;
        color: #2d2d2d;
        outline: none;
    }

    .menu-principal .mod-menu__heading {
        color: inherit;
        font: inherit;
    }

    .menu-principal .icon-chevron-down {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 0.85rem;
        height: 0.85rem;
        color: #2babd4;
        transform-origin: center;
        transition: transform 0.18s ease;
    }

    .menu-principal .icon-chevron-down::before {
        content: "\f107";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 0.78rem;
        line-height: 1;
    }

    .menu-principal li:hover > button .icon-chevron-down,
    .menu-principal li:focus-within > button .icon-chevron-down,
    .menu-principal li.is-open > button .icon-chevron-down {
        transform: rotate(180deg);
    }

    .menu-principal .mod-menu__sub {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: block;
        min-width: 17rem;
        margin: 0;
        padding: 0.45rem;
        list-style: none;
        background: #fff;
        border: 1px solid #dad9d9;
        border-top: 3px solid #2babd4;
        border-radius: 0 0 0.35rem 0.35rem;
        box-shadow: 0 1rem 2rem rgba(45, 45, 45, 0.14);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(0.35rem);
        transform-origin: top left;
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
    }

    .menu-principal .mod-menu__sub::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: 0.4rem;
    }

    .menu-principal li:hover > .mod-menu__sub,
    .menu-principal li:focus-within > .mod-menu__sub,
    .menu-principal li.is-open > .mod-menu__sub {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition-delay: 0s;
    }

    .menu-principal .mod-menu__sub > li + li {
        border-top: 1px solid #f0f0f0;
    }

    .menu-principal .mod-menu__sub > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0.72rem 0.85rem;
        border-radius: 0.22rem;
        color: #2d2d2d;
        font-size: clamp(0.8125em, 0.78em + 0.16vw, 0.875em);
        font-weight: 500;
        line-height: 1.25;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color 0.16s ease, color 0.16s ease, padding-left 0.16s ease;
    }

    .menu-principal .mod-menu__sub > li > a::after {
        content: "\f105";
        margin-left: 1rem;
        color: #2babd4;
        font-family: "Font Awesome 6 Free";
        font-size: 0.72rem;
        font-weight: 900;
        opacity: 0;
        transform: translateX(-0.25rem);
        transition: opacity 0.16s ease, transform 0.16s ease;
    }

    .menu-principal .mod-menu__sub > li > a:hover,
    .menu-principal .mod-menu__sub > li > a:focus-visible,
    .menu-principal .mod-menu__sub > li.current > a,
    .menu-principal .mod-menu__sub > li.active > a {
        background-color: #eee;
        color: #2d2d2d;
        padding-left: 1rem;
        outline: none;
    }

    .menu-principal .mod-menu__sub > li > a:hover::after,
    .menu-principal .mod-menu__sub > li > a:focus-visible::after,
    .menu-principal .mod-menu__sub > li.current > a::after,
    .menu-principal .mod-menu__sub > li.active > a::after {
        opacity: 1;
        transform: translateX(0);
    }
}