/* La config CSS du header */


        @font-face {
            font-family: 'Aptos';
            src: url('font/Aptos.ttf') format('truetype'),
                 url('font/Aptos.woff') format('woff'),
                 url('font/Aptos.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Aptos';
            src: url('font/Aptos-Bold.woff2') format('woff2'),
                 url('font/Aptos-Bold.woff') format('woff'),
                 url('font/Aptos-Bold.ttf') format('truetype');
            font-weight: bold;
            font-style: normal;
            font-display: swap;
        }
        strong {
            font-weight: bold;
        }
body {    font-family: 'Aptos', sans-serif;margin:0px; }
h1, h2, h3, h4, h5 {color:#212a87;}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #f8f8f8;
    position: fixed;
    top: 0;
    width: 100%;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateY(0);
    z-index: 1000;
    box-sizing: border-box;
    opacity: 1;
    min-height: 70px;
}

.header-container.hide {
    transform: translateY(-100%);
    opacity: 0;
}

.logo img {
    height: 100px;
}
        .menu {
            display: flex;
            align-items: center; /* Aligne les éléments verticalement au centre */
        }
        .menu ul {
            margin: 0; /* Enlever la marge par défaut */
            padding: 0; /* Enlever le padding par défaut */
            list-style: none; /* Enlever les puces par défaut */
            display: flex; /* Afficher les éléments de la liste horizontalement */
        }
        .menu li {
            margin-right: 50px;
font-size: 1.1em;
        }
        .toggle-button-cover {
            margin-left: auto; /* Pousse le bouton vers la droite */
             margin-top: 20px!important;
        }

.menu li a {
    text-decoration: none;
    color: red;
}

.menu-close {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    background: none;
    border: none;
}

.menu-toggle {
    display: none;
    cursor: pointer;
    font-size: 35px;
    background: none;
    border: none;
    padding: 10px;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 400;
}

/* Ajoutez l'espacement entre menu et app-cover */
.menu {
    margin-right: 20px; /* Espacement supplémentaire pour maintenir 10px entre menu et app-cover */
        margin-left: auto; /* Pour pousser le menu tout à droite */
margin-top: 44px;
}

#app-cover {
    /* margin-left: 10px; 
    display: table;
    width: 200px; 
    */
}

.row {
  /*    display: table-row;*/
}

.toggle-button-cover {
  /*    display: table-cell;
    position: relative;
    width: 200px;
    box-sizing: border-box;*/
     margin-top: 20px!important;
}


.sevvo:last-child {min-height: 100px;
    padding-top: 30px;
border-bottom: 1px solid #333;
}
/* La config Responsive CSS du container pour un max de 1500 */
@media (max-width: 1600px) {
    
    .content-idcluster {
max-width: 1300px;
margin: auto;
padding-top: 100px;
padding-left: 10px;
padding-right: 10px;
}
    
}
/* La config Responsive CSS du header */
@media (max-width: 768px) {
	.stk-2c26e64-column p {
font-size: 18px!important;
}
	.content-idcluster {
max-width: 1300px;
margin: auto;
padding-top: 40px;
padding-left:5px;
padding-right:5px;
}
	
	
     .language-toggle {
        position: absolute;
        top: 10px; /* Espacement depuis le haut de l'écran */
        left: 50%;
        transform: translateX(-50%);
        z-index: 10; /* S'assurer qu'il est au-dessus du menu */
    }

    

    .menu-toggle {
        display: block;
    }

    .menu {
        position: absolute ;
        margin-right: 0;
        margin-left: auto;
        margin-top: 0px;
        padding-top: 0px; /* Ajouter un peu d'espace au menu pour faire de la place pour le toggle */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: auto;
        align-items: center;
        z-index: 1001;
        opacity: 0;
        transition: opacity 0.9s ease;
        pointer-events: none;
    }
    .menu.active {
        opacity: 1;
        pointer-events: all;
    }
    .menu.active .menu-close {
        display: block;
    }
    .menu ul {
        flex-direction: column;
                margin-top: 60px; /* Décalage du menu pour éviter la superposition */

        align-items: center;
        width: 100%;
        text-align: center;
    }
        .menu li {
         margin-right: 0px;
font-size: 1.3em;
        }
    .menu li a {
        display: block;
        padding: 10px;
        
    }
}

/* Limiter la largeur du header à 1600px sur les écrans de bureau */
@media (min-width: 1024px) {
    
    .content-idcluster{
        
max-width: 1300px;
margin: auto;
padding-left:0;
padding-right:0;
}
        
    }
    .header-container {
        margin: auto; /* Centrer le contenu horizontalement */
        padding: 0 20px; /* Espacement interne pour éviter que le contenu touche les bords */
    }
    .header-vvo {
        max-width:1300px;
        padding:10px 0px 10px 0px;
        width:100%;
        margin:auto;
        display: flex;
        justify-content: space-between; /* Pour espacer les éléments */
        align-items: center; /* Pour aligner verticalement au centre */}
}


/* switch lang */
* {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
*:focus {
  outline: none;
}

.button-cover {

  margin: 20px;
  background-color: #fff;
  border-radius: 4px;
}
.button-cover:before {
  counter-increment: button-counter;
  content: counter(button-counter);
  position: absolute;
  right: 0;
  bottom: 0;
  color: #d7e3e3;
  font-size: 12px;
  line-height: 1;
  padding: 0px;
}
.button-cover,
.knobs,
.layer {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.button {
  position: relative;
  top: 50%;
  width: 78px;
  height: 36px;
  margin: -20px auto 0 auto;
  overflow: hidden;
}
.button.r,
.button.r .layer {
  border-radius: 100px;
}
.button.b2 {
  border-radius: 20px!important;
  background-color: #bc9edb!important;
}
.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}
.knobs {
  z-index: 2;
}
.layer {
  width: 100%;
  background-color: #ebf7fc;
  transition: 0.3s ease all;
  z-index: 1;
}

#button-10 .knobs:before,
#button-10 .knobs:after,
#button-10 .knobs span {
  position: absolute;
  top: 0px;
  width: 20px;
  height: 10px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 13px 8px;
  border-radius: 2px;
  transition: 0.3s ease all;
}
#button-10 .knobs:before {
  content: "";
  left: 0px;
  background-color: #4f009f;
    border-radius:20px;
}
#button-10 .knobs:after {
  content: "EN";
  right: 4px;
  color: #4e4e4e;
}
#button-10 .knobs span {
  display: inline-block;
  left: 0px;
  color: #fff;
  z-index: 1;
}
#button-10 .checkbox:checked + .knobs span {
  color: #4e4e4e;
}
#button-10 .checkbox:checked + .knobs:before {
  left: 42px;
  background-color: #4f009f;
}
#button-10 .checkbox:checked + .knobs:after {
  color: #fff;
}
#button-10 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}

/* homepage */
/* Rendre la section responsive */
main {margin-top:60px;}
/* Section responsive */
.responsive-section {
    width: 100%;
    max-width:1600px;
    margin:auto;
    box-sizing: border-box;
}

/* Div intérieure centrée */
/* Section principale avec Flexbox pour gérer la disposition */
.inner-div {
    display: flex;
    width: 100%;
    min-height: 30vh;  /* hauteur de la fenêtre pour caroussel */
    margin: 0 auto;
    background: linear-gradient(120deg, rgba(79, 0, 159, 1), rgba(231, 36, 94, 1) 99%) fixed;
    background-repeat: no-repeat;
    font-family: 'Aptos', sans-serif;
    color: white;
    text-align: center;
    box-sizing: border-box;
    flex-wrap: wrap;  /* Permet aux éléments de passer à la ligne si nécessaire */
    border-radius:15px;
}


/* .left-half - Occupe 70% de la largeur, s'adapte à la taille de l'écran */
.left-half {
    background-image: url('/wp-content/uploads/2025/07/sla.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 70%;  /* 70% de la largeur */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 1; border-radius:15px;
}

/* .right-half - Occupe 30% de la largeur, s'adapte également */
.right-half {
    width: 30%;  /* 30% de la largeur */
    margin-left:-25%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: left;
    position: relative;
    z-index: 2;
}

/* Media queries pour rendre la mise en page réactive */
@media (max-width: 768px) {
.homepart img {
border: solid 1px grey;
width: 100%;
height: auto;
}
.section-home {
max-width: 1600px;
width: 100%;
margin: auto;
color: #fff;
font-size: 1.8em;
padding: 15px;
}
    .home-slide-a {
       background: linear-gradient(120deg, rgba(79, 0, 159, 1), rgba(231, 36, 94, 1) 99%) fixed!important;}

    .inner-div {
        flex-direction: column;  /* Stack les divs l'une sous l'autre sur les petits écrans */
    }
    .left-half, .right-half {
        width: 100%;  /* Chaque div occupe 100% de la largeur de l'écran */
    }
img.wp-image-85, img.wp-image-86, img.wp-image-87 {height:60px!important;}
        .connecter, .accelerer, .concretiser {padding:25px!important;}
    .sec-chc {
margin-top: 50px;
border-radius: 20px;
background-image: url('/wp-content/uploads/2025/07/sec-ch3-scaled.webp');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
min-height: 400px;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 35px;
}

}

/* Style des titres et des paragraphes */
.left-half h1, .right-half h1 {
    font-size: 1.8rem;
    margin-bottom: 10px;
     text-align: left;
}

.left-half p, .right-half p {
    font-size: 2rem;
    text-align: left;
}

.bout-sec-a {
margin-top: 20px;
display: inline-block;
padding: 2px 13px;
color: white;
background: transparent;
border: 1px solid white;
border-radius: 5px;
text-decoration: none;
font-size: 14px;
text-align: center;
transition: all 0.3s ease;
}

.bout-sec-a:hover {
    background-color: rgba(255, 255, 255, 0.1);  /* Optionnel : effet de survol */
}


@media (min-width: 768px) {

.wp-block-columns {
        display: flex;
        justify-content: space-between;
        gap: 15px; 
    }

	.wp-block-columns .homepart {
display: flex;
justify-content: space-between;
gap:30px;
margin-bottom: 30px;
}
    .wp-block-column {
        flex: 1; /* Cela permet de répartir l'espace entre les colonnes de manière égale */
        margin-right: 20px; /* Ajoute un espace entre les colonnes, vous pouvez ajuster cette valeur */
    }
    .wp-block-column:last-child {
        margin-right: 0; /* Pour supprimer l'espace à droite de la dernière colonne */
    }

    img.wp-image-85, img.wp-image-86, img.wp-image-87 {height:60px;}
    .wp-block-columns .countvvo {width:800px!important; margin:auto;}
    
    
    
    
}


.countvvo {
  position: relative;
  /* 1er calque = votre PNG, 2e calque = le dégradé */
  background-image: 
    url('/wp-content/uploads/2025/07/sigleb.png'),
    linear-gradient(120deg, rgba(79, 0, 159, 1), rgba(231, 36, 94, 1) 99%);
  /* on aligne le PNG en haut à droite, et le dégradé centré */
  background-position: 
    right top,    /* pour siglea.png */
    center center;/* pour le gradient */
  background-repeat: no-repeat, no-repeat;
  border-radius: 100px;
  color: #fff;
  padding: 30px 30px 10px 30px;
  max-width: 1250px !important;
  margin: auto;
  overflow: hidden;
}
    
    
   
    .countvvo h2 {color:#fff; font-size:5em; margin:0px;text-align: right;}
    .countvvob {padding-right:160px;padding-bottom:15px;}
    .countvvob p {
font-size: 1.2em;
text-align:right;
    display: block;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

.vvocountd h2 {color:#fff;}
.connecter {
    background: linear-gradient(120deg, rgba(79, 0, 159, 1), rgba(231, 36, 94, 1) 99%) fixed;
    border-radius: 15px;
    color:#fff;
    padding:25px;
}
.connecter h3, .accelerer h3 , .concretiser h3{ color:#fff; font-size:1.5em; margin-bottom:15px;}
.connecter p, .accelerer p , .concretiser p{ color:#fff; margin:0px;line-height:1.5em;}
.connecter a, .accelerer a, .concretiser a{ color:#fff; }
.accelerer {
    background: linear-gradient(120deg, rgba(79, 0, 159, 1), rgba(231, 36, 94, 1) 99%) fixed;
    border-radius: 15px;
    color:#fff;
    padding:25px;
    
}

.cles {
    background: linear-gradient(120deg, rgba(79, 0, 159, 1), rgba(231, 36, 94, 1) 99%) fixed;
    border-radius:50px;
    min-height: 180px;
    color:#FFF;
    margin-top:30px;

}

h2.wp-block-heading.has-text-align-center.clesa {
    margin-top:80px;
    margin-bottom:30px;
    font-size: 2.2em!important;
    font-weight: 600;
    margin-bottom: 0px;
    text-align: center!important;
}
.concretiser {
    background: linear-gradient(120deg, rgba(79, 0, 159, 1), rgba(231, 36, 94, 1) 99%) fixed;
    border-radius: 15px;
    color:#fff;
    padding:25px;
    
}

.pils img{max-width: 90px;}
figure.pils {margin:0px!important;}

img.wp-image-85, img.wp-image-86, img.wp-image-87 {height:115px;}


figure {
display: block;
margin-block-start: 0em!important;
margin-block-end: 0em!important;
margin-inline-start: 0px!important;
margin-inline-end: 0px!important;
}

h2.titrehome {font-size:1.8em!important;font-weight: 600;margin-bottom: 0px;}
h2.titrechiffre {font-size:1.8em!important;font-weight: 600;margin-bottom: 0px;text-align: center;padding-bottom:35px;}
h3.titrehome {font-size:1.5em!important; font-weight: 100;margin-top: 0px;}


.sec-chc {
  position: relative; /* Nécessaire pour le positionnement du pseudo-élément */
  margin-top: 0px;
  border-radius: 20px;
  background-image: url('/wp-content/uploads/2025/07/sec-ch3-scaled.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 30px;
  overflow: hidden; /* Optionnel : masque le débordement */
}

.sec-chc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px; /* Même border-radius que le parent */
  background-color: rgba(255, 255, 255, 0.6); /* Noir avec 50% d'opacité (modifiable) */
  z-index: 1; /* Place le calque au-dessus du contenu */
}

.sec-chc > * {
  position: relative; /* Place le contenu AU-DESSUS du calque */
  z-index: 2;
}

.sec-chca h2{ color:#fff; font-size:1.8em; }
.sec-chca {
    background-color: rgba(228, 36, 96, 0.8);
    border-radius:10px;
    color:#fff;
    padding:30px;
}


.actu-home .wp-block-button__link {
    background-color: white;
    color: #e42460; /* Texte en couleur #e42460 */
    border: none; /* Pas de bordure */
    border-radius: 8px;
    padding: 10px 20px; /* Espacement à l'intérieur du bouton */
    font-size: 16px; /* Taille de la police */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s; /* Effet de transition */
    display: inline-block; /* Le bouton s'ajuste à la taille de son contenu */
}

.actu-home .wp-block-button__link:hover {
    background-color: #f0f0f0; /* Couleur de fond au survol (modifiable) */
    transform: scale(1.05); /* Légère augmentation de taille au survol */
}



/* Footer Styling */
footer {
    background: linear-gradient(120deg, rgba(79, 0, 159, 1), rgba(231, 36, 94, 1) 99%);
    padding: 20px 0;
    color: white;
    width: 100%;
    margin-top:130px;
}
footer h3 {color:#fff;font-size:1.1em;}

/* Container settings */
.footer-container {
    max-width: 1265px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, auto); /* ← Colonnes = largeur du contenu */
    gap: 5px;
    padding: 0 10px;
}

/* Column Styling */
.footer-column {
    padding: 10px;
}

.footer-column h3 {
    margin-bottom: 10px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column li {
    margin-bottom: 8px;
}
/* conteneur centré sous .footer-container */
.footer-legal {
  width: 100%;
  background-color: inherit; /* hérite de votre fond de footer */
}
.footer-legal__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px 15px; /* ajustez selon vos besoins */
}

/* la fine ligne blanche pleine largeur */
.footer-legal__separator {
  width: 100%;
  height: 1px;
  background-color: #fff;
}

/* bloc contenant texte à gauche et liens à droite */
.footer-legal__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px; /* ou la valeur qui vous convient */
}

/* texte blanc à gauche */
.footer-legal__text {
  color: #fff;
  font-size: 14px;
}

/* styling des liens blancs à droite */
.footer-legal__links a {
  color: #fff;
  text-decoration: none;
  margin-left: 30px; /* espacement entre les liens */
  font-size: 14px;
}

/* petit effet au survol (optionnel) */
.footer-legal__links a:hover {
  text-decoration: underline;
}


/* Responsive settings */
@media (max-width: 768px) {
	.uagb-block-80aa495c:not(.is-grid).uagb-post__items article {
padding-right: 0px;
padding-left: 0px;
margin-bottom: 0px;
}
	
    .header-container, .header-vvo {padding:0px!important;min-height:50px;}
    main {
margin-left: 5px;
margin-right: 5px;
}
    .countvvob {
padding-right: 0px;
padding-bottom: 15px;
}
    .countvvo {
position: relative;
border-radius: 15px;
padding: 30px;
}
    .sec-chc {
margin-top: 20px;
border-radius: 15px;
background-image: url('/wp-content/uploads/2025/07/sec-ch3-scaled.webp');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
min-height: 400px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
        .logo img {
    height: 68px;
        margin-top:5px;
         margin-left:13px;
}
    .right-half p {
font-size: 1.5rem;
text-align: left;
}
    .footer-container {
        grid-template-columns: 1fr;
    }
      /* 1) Une seule colonne pour tout le footer */
  .footer-container {
    display: block;
    padding: 0 15px;
  }

  /* 2) Centrage du titre et de la liste dans chaque colonne */
  .footer-column {
    text-align: center;
    margin-bottom: 20px;
  }
    .footer-column.spacebase {
padding-top: 0px!important;
}
  .footer-column ul {
    /* pour que la liste n’occupe pas tout la largeur */
    display: inline-block;
    padding: 0;
  }

  /* 3) Passage en colonne et centrage pour la zone légale */
  .footer-legal__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 12px;
  }

  /* 4) Centrage des liens légaux */
  .footer-legal__links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .footer-legal__links a {
    margin: 0 10px;
  }
    .connecter, .accelerer, concretiser {margin-bottom:30px; }
    .right-half {
width: 100%;
margin-left: 0%;
padding: 20px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
position: relative;
z-index: 2;
}
    .left-half { display:none;}
    .responsive-section {margin-bottom: 30px;}
}


.homepart img {
margin-bottom: -6px;
max-width: 190px;
height: auto;
border: 0px solid grey;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition: filter 0.5s ease-in-out;
-webkit-transition: -webkit-filter 0.5s ease-in-out;
will-change: filter;
-webkit-transform: translateZ(0);
}

.homepart img:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}

.francebase img{max-width:150px;}
.spacebase {padding-top:19px;}

#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
}
#back-to-top.show {
  opacity: 0.8;
  visibility: visible;
}
#back-to-top:hover {
  opacity: 1;
}
.homepart div.wp-block-image  {
margin: 0 0 0em;


}
@media only screen and (max-width: 976px) {
.uagb-block-80aa495c:not(.is-grid).uagb-post__items {
margin-right: 0px;
margin-left: 0px;
}
	.sec-chc .uagb-block-80aa495c .uagb-post__inner-wrap {
background-color: rgba(228, 36, 96, 0.8);
border-radius: 5px;
color: #fff;
padding: 5px;
text-align: left;
}
	.pils.fondate{text-align:center;}
	.countvvo .wp-block-uagb-counter {
text-align: center!important;
}
.page-id-43 .fullvvo.qui {
min-height: 380px;
margin-top: 10px;

}
	.page-id-43 .fullvvo.qui {
    position: relative; /* Nécessaire pour positionner l'overlay */
    overflow: hidden; /* Optionnel : masque le débordement */
}

/* Overlay semi-transparent */
.page-id-43 .fullvvo.qui::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Noir avec 50% d'opacité (ajustable) */
    border-radius: 20px; /* Même border-radius que l'élément parent */
    z-index: 1; /* Place l'overlay au-dessus du background mais sous le contenu */
}

/* Contenu (texte, boutons, etc.) doit être AU-DESSUS de l'overlay */
.page-id-43 .fullvvo.qui > * {
    position: relative;
    z-index: 2; /* Place le contenu au-dessus de l'overlay */
}
.fullvvo.qui {
min-height: 400px;
margin-top: 10px;
}
.fullvvo.rd {
min-height: 400px;
margin-top: 10px;

}
	
.fullvvo.rd .ddr {
padding: 0px;
}
	
	/* Overlay éclaircissant */
.fullvvo.rd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3); /* Blanc avec 30% d'opacité (ajuste le 0.3) */
  border-radius: 20px; /* Même border-radius que le parent */
  z-index: 1; /* Place l'overlay au-dessus du background mais sous le contenu */
}

/* Assure que le contenu (texte, etc.) reste au-dessus de l'overlay */
.fullvvo.rd > * {
  position: relative;
  z-index: 2;
}
	.yobs {display:none;}
	
	
	
	
}


/* FIN RESPONSIVE */

.animated-link {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    text-decoration: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(231, 36, 94, 0.8));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition:background-size .3s
}

.animated-link:focus, .animated-link:hover {
    background-size:100% 1px
}

.animated-link--huge {
    background-size:0 1px
}

.animated-link--huge:focus, .animated-link--huge:hover {
    background-size:100% 1px
}

/* PAGE SINGLE POUR LES ARTICLES */

    /* Conteneur principal flex */
    .post-header-flex {
        display: flex;
        align-items: flex-start;
        gap: 35px;
        margin-bottom: 30px;
    }
    /* Colonne de l'image */
    .post-thumbnail-column {
        flex: 0 0 auto;
        max-width: 35%;
    }
    /* Colonne du contenu */
    .post-content-column {
        flex: 1;
    }
    /* Style de l'image */
    .post-thumbnail img {
        width: 100%;
        height: auto;
        border-radius: 4px;
    }
    /* Titre de l'article */
    .entry-title {
        font-size: 1.6em!important;
        font-weight: 600;
        margin-top: 0px!important;
        line-height: 1.2;
    }
    /* Date sous le titre */
    .post-title-meta {
        color: #666;
        font-size: 0.9em;
        margin-bottom: 20px;
        display: block;
    }
    /* Contenu de l'article */
    .entry-content {
        margin-bottom: 25px;
    }
    /* Navigation simplifiée */
    .post-navigation-simple {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid #eee;
    }
    /* Style des liens de navigation - VERSION CORRIGÉE */
    .nav-link-simple {
        color: #333;
        text-decoration: none;
        font-weight: 500;
        position: relative;
        display: inline-block;
        padding-bottom: 2px;
    }
    /* Soulignement animé - VERSION CORRIGÉE */
    .nav-link-simple::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #000;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease-in-out;
    }
    .nav-link-simple:hover::after {
        transform: scaleX(1);
    }
    /* Conteneur de partage */
    .share-container {
        margin: 20px 0;
        text-align: right;
    }
    /* Bouton LinkedIn */
    .linkedin-share {
        display: inline-block;
        background: #0077b5;
        color: white !important;
        padding: 8px 15px;
        border-radius: 4px;
        text-decoration: none;
        font-weight: 500;
    }
    .linkedin-share:hover {
        background: #005582;
    }
    /* Responsive */
    @media (max-width: 768px) {
        .post-header-flex {
            flex-direction: column;
        }
        .post-thumbnail-column {
            max-width: 100%;
            margin-bottom: 15px;
        }
        /* MODIFICATIONS POUR LA NAVIGATION */
        .post-navigation-simple {
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            flex-wrap: nowrap;
        }
        .nav-link-simple {
            font-size: 0.85em;
            white-space: nowrap;
            flex: 0 0 auto;
            max-width: 48%;
            text-overflow: ellipsis;
            overflow: hidden;
            padding-bottom: 3px; /* Ajouté pour mobile */
        }
        /* FIN MODIFICATIONS */
        .share-container {
            text-align: left;
        }
    }