/**
  * Espace Numérique - compléments au thème
  * Styles propres à la plateforme CodeIgniter (menus imbriqués, galeries,
  * cartes d'espaces, témoignages, etc.)
*/

/* Menu : sous-menus imbriqués
--------------------------------------------------------------*/
#main-nav .sub-menu .menu-item-has-children > a::after {
    content    : "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    float      : right;
    font-size  : 13px;
}

#main-nav li:hover .sub-menu .sub-menu {
    opacity   : 0;
    visibility: hidden;
}

#main-nav .sub-menu .sub-menu {
    top : 0;
    left: 100%;
}

#main-nav .sub-menu li:hover > .sub-menu {
    opacity   : 1;
    visibility: visible;
    transform : translateY(0);
}

#main-nav-mobi .sub-menu .sub-menu .menu-item a {
    margin-left: 30px;
}

#main-nav-mobi .sub-menu .sub-menu .sub-menu .menu-item a {
    margin-left: 45px;
}

/* Bandeau de titre des pages internes
--------------------------------------------------------------*/
.page-titre {
    position        : relative;
    overflow        : hidden;
    padding         : 48px 0 44px;
    background-color: var(--primary-color5);
    border-bottom   : 1px solid rgba(0, 0, 0, 0.06);
}

/* Formes décoratives discrètes aux couleurs UVCI */
.page-titre::before,
.page-titre::after {
    content      : "";
    position     : absolute;
    border-radius: 50%;
    pointer-events: none;
}

.page-titre::before {
    width     : 320px;
    height    : 320px;
    top       : -180px;
    right     : -80px;
    background: radial-gradient(circle, rgba(149, 27, 129, 0.12) 0%, rgba(149, 27, 129, 0) 70%);
}

.page-titre::after {
    width     : 220px;
    height    : 220px;
    bottom    : -140px;
    right     : 18%;
    background: radial-gradient(circle, rgba(14, 134, 64, 0.12) 0%, rgba(14, 134, 64, 0) 70%);
}

.page-titre .container {
    position: relative;
    z-index : 1;
}

.page-titre h1 {
    max-width     : 900px;
    margin        : 0;
    font-size     : 40px;
    line-height   : 1.2;
    font-weight   : 600;
    letter-spacing: -0.5px;
    color         : var(--primary-color2);
}

.page-titre-trait {
    display      : block;
    width        : 64px;
    height       : 4px;
    margin-top   : 18px;
    border-radius: 2px;
    background   : var(--primary-vert-uvci);
}

.page-titre-fil ol {
    display    : flex;
    flex-wrap  : wrap;
    align-items: center;
    gap        : 6px;
    margin     : 0 0 14px;
    padding    : 0;
    list-style : none;
    font-size  : 14px;
}

.page-titre-fil li {
    display    : inline-flex;
    align-items: center;
    color      : var(--primary-violet-uvci);
    font-weight: 500;
}

.page-titre-fil li + li::before {
    content     : "\f105";
    font-family : "Font Awesome 6 Free";
    font-weight : 900;
    font-size   : 11px;
    margin-right: 6px;
    color       : var(--primary-color8);
}

.page-titre-fil a {
    color     : var(--primary-color4);
    transition: color 0.3s ease;
}

.page-titre-fil a:hover {
    color: var(--primary-violet-uvci);
}

.page-titre-fil a i {
    margin-right: 4px;
    font-size   : 12px;
}

/* Le dernier élément (page courante) est tronqué s'il est trop long */
.page-titre-fil li[aria-current] {
    display      : inline-block;
    max-width    : 420px;
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 991px) {
    .page-titre {
        padding: 36px 0 32px;
    }

    .page-titre h1 {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .page-titre h1 {
        font-size: 26px;
    }

    .page-titre-fil li[aria-current] {
        max-width: 220px;
    }
}

/* Footer mobile : marge réduite (le thème la portait à 80px sous 768px) */
@media (max-width: 767px) {
    #footer {
        padding: 5px 0;
    }
}

/* Footer : email dans le bloc adresse, même rendu que le texte (le thème met ces liens en majuscules) */
#footer .widget-list-contact li a.footer-email {
    font-size     : inherit;
    line-height   : inherit;
    text-transform: none;
    color         : inherit;
}

#footer .widget-list-contact li a.footer-email:hover {
    color: var(--primary-color);
}

/* Slider d'accueil
--------------------------------------------------------------*/
/* Hauteur fixe du bandeau */
.slider.home2 .flat-slider .sld-img img {
    height: 360px;
}

/* Texte des slides aligné sur le bord gauche du contenu de la page (container de 1140px) */
@media (min-width: 992px) {
    .slider.home2 .content {
        left: max(15px, calc((100% - 1140px) / 2 + 15px));
    }
}

/* Bannière à fond clair : titre foncé, pas de voile sombre */
.slider .banniere-claire .content h1 {
    color: var(--primary-color2);
}

.slider .banniere-claire .content h1 span {
    color: var(--primary-violet-uvci);
}

.slider .banniere-claire .sld-img img {
    object-position: right center;
}

@media (max-width: 767px) {
    /* Sur mobile la photo passe sous le texte : léger voile blanc pour la lisibilité */
    .slider .banniere-claire {
        position: relative;
    }

    .slider .banniere-claire::before {
        content   : "";
        position  : absolute;
        inset     : 0;
        z-index   : 3;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.6) 100%);
    }
}

/* Liens-cartes : pas de soulignement ni de couleur de lien */
a.news-item-link,
a.news-item-link:hover,
a.work-post,
a.work-post:hover,
a.materiel,
a.materiel:hover {
    color          : inherit;
    text-decoration: none;
}

/* Titre des cartes-liens : même rendu que .link-style-2 a (blanc, violet au survol) */
a.work-post .link-style-2 {
    color     : var(--primary-color);
    transition: all 0.3s ease-in-out;
}

a.work-post:hover .link-style-2,
a.work-post:focus .link-style-2 {
    color: var(--primary-violet-uvci);
}

/* Visuels de cartes à hauteur homogène */
.flat-work .work-post .media img {
    width     : 100%;
    height    : 260px;
    object-fit: cover;
}

.flat-blog-details .post .media img {
    width     : 100%;
    max-height: 480px;
    object-fit: cover;
}

.recent-news .thumb img {
    width     : 100px;
    height    : 80px;
    object-fit: cover;
}

.flat-skill .media img {
    width     : 100%;
    object-fit: cover;
}

/* Boutons côte à côte */
.espace-actions {
    display  : flex;
    flex-wrap: wrap;
    gap      : 15px;
    margin-top: 30px;
}

.espace-horaires {
    font-weight: 600;
    color      : var(--primary-vert-uvci);
}

.espace-horaires i {
    margin-right: 6px;
}

.intro-page {
    margin-bottom: 40px;
}

/* Chiffres clés (accueil)
--------------------------------------------------------------*/
.chiffres-cles {
    position  : relative;
    overflow  : hidden;
    padding   : 45px 0 25px;
    background: linear-gradient(135deg, #6d1260 0%, var(--primary-violet-uvci) 55%, #b02a99 100%);
    color     : var(--primary-color);
}

/* Formes décoratives */
.chiffres-cles::before,
.chiffres-cles::after {
    content       : "";
    position      : absolute;
    border-radius : 50%;
    pointer-events: none;
}

.chiffres-cles::before {
    width : 420px;
    height: 420px;
    top   : -220px;
    left  : -120px;
    border: 60px solid rgba(255, 255, 255, 0.05);
}

.chiffres-cles::after {
    width     : 300px;
    height    : 300px;
    bottom    : -170px;
    right     : -60px;
    background: radial-gradient(circle, rgba(14, 134, 64, 0.45) 0%, rgba(14, 134, 64, 0) 70%);
}

.chiffres-cles .container {
    position: relative;
    z-index : 1;
}

.chiffres-entete {
    max-width    : 740px;
    margin       : 0 auto 30px;
    text-align   : center;
}

.chiffres-surtitre {
    display       : inline-block;
    margin-bottom : 12px;
    padding       : 5px 16px;
    border-radius : 30px;
    font-size     : 13px;
    font-weight   : 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    background    : rgba(255, 255, 255, 0.14);
}

.chiffres-entete h2 {
    margin     : 0;
    font-size  : 34px;
    line-height: 1.25;
    color      : var(--primary-color);
}

.chiffre {
    height          : calc(100% - 30px);
    margin-bottom   : 30px;
    padding         : 20px;
    text-align      : center;
    border-radius   : 16px;
    border          : 1px solid rgba(255, 255, 255, 0.16);
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter : blur(4px);
    transition      : transform 0.35s ease, background-color 0.35s ease;
}

.chiffre:hover {
    transform       : translateY(-6px);
    background-color: rgba(255, 255, 255, 0.14);
}

.chiffre-icone {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 58px;
    height          : 58px;
    margin-bottom   : 18px;
    border-radius   : 14px;
    font-size       : 22px;
    color           : var(--primary-color);
    background-color: var(--primary-vert-uvci);
    box-shadow      : 0 8px 20px rgba(0, 0, 0, 0.18);
}

.chiffre-valeur {
    font-size  : 48px;
    font-weight: 700;
    line-height: 1;
    color      : var(--primary-color);
}

.chiffre-libelle {
    margin     : 12px 0 0;
    font-size  : 15px;
    color      : rgba(255, 255, 255, 0.82);
}

@media (max-width: 991px) {
    .chiffres-cles {
        padding      : 40px 0 20px;
    }

    .chiffres-entete h2 {
        font-size: 28px;
    }

    .chiffre-valeur {
        font-size: 40px;
    }
}

@media (max-width: 575px) {
    .chiffre {
        padding: 24px 12px 20px;
    }

    .chiffre-icone {
        width        : 48px;
        height       : 48px;
        font-size    : 18px;
        margin-bottom: 14px;
    }

    .chiffre-valeur {
        font-size: 32px;
    }

    .chiffre-libelle {
        font-size: 13px;
    }
}

/* Dernières actualités (accueil)
--------------------------------------------------------------*/
.actus-entete {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : flex-end;
    justify-content: space-between;
    gap            : 20px;
    margin-bottom  : 40px;
}

.actus-entete .tf-title {
    margin: 0;
}

.actus-surtitre {
    display       : inline-block;
    margin-bottom : 12px;
    padding       : 5px 16px;
    border-radius : 30px;
    font-size     : 13px;
    font-weight   : 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color         : var(--primary-vert-uvci);
    background    : rgba(14, 134, 64, 0.08);
}

.actus-tout {
    display      : inline-flex;
    align-items  : center;
    gap          : 8px;
    padding      : 11px 22px;
    border-radius: 30px;
    border       : 2px solid var(--primary-violet-uvci);
    font-weight  : 600;
    color        : var(--primary-violet-uvci);
    transition   : all 0.3s ease;
}

.actus-tout:hover {
    color           : var(--primary-color);
    background-color: var(--primary-violet-uvci);
}

.actu {
    display         : flex;
    flex-direction  : column;
    height          : calc(100% - 30px);
    margin-bottom   : 30px;
    overflow        : hidden;
    /*border-radius   : 18px;*/
    background-color: var(--primary-color);
    box-shadow      : 0 10px 30px rgba(0, 0, 0, 0.06);
    color           : inherit;
    transition      : transform 0.35s ease, box-shadow 0.35s ease;
}

.actu:hover {
    color     : inherit;
    transform : translateY(-6px);
    box-shadow: 0 18px 40px rgba(149, 27, 129, 0.12);
}

.actu-media {
    position: relative;
    overflow: hidden;
}

.actu-media img {
    width     : 100%;
    height    : 230px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.actu:hover .actu-media img {
    transform: scale(1.07);
}

.actu-corps {
    display       : flex;
    flex-direction: column;
    flex          : 1;
    padding       : 24px 26px 26px;
}

.actu-meta {
    display      : flex;
    flex-wrap    : wrap;
    gap          : 6px 18px;
    margin-bottom: 12px;
    font-size    : 13px;
    color        : var(--primary-color4);
}

.actu-meta i {
    margin-right: 5px;
    color       : var(--primary-vert-uvci);
}

.actu-corps h3 {
    display           : -webkit-box;
    margin-bottom     : 12px;
    overflow          : hidden;
    font-size         : 16px;
    line-height       : 1.35;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    transition        : color 0.3s ease;
}

.actu:hover .actu-corps h3 {
    color: var(--primary-violet-uvci);
}

.actu-lien {
    display    : inline-flex;
    align-items: center;
    gap        : 8px;
    font-weight: 600;
    color      : var(--primary-vert-uvci);
}

.actu-lien i {
    transition: transform 0.3s ease;
}

.actu:hover .actu-lien i {
    transform: translateX(5px);
}

@media (max-width: 767px) {
    .actus-entete {
        align-items: flex-start;
    }

    .actu-media img {
        height: 200px;
    }
}

/* Témoignages
--------------------------------------------------------------*/
.temoignages {
    background-color: var(--primary-color5);
}

.temoignages-entete {
    max-width    : 620px;
    margin       : 0 auto 55px;
    text-align   : center;
}

.temoignages-surtitre {
    display       : inline-block;
    margin-bottom : 12px;
    padding       : 5px 16px;
    border-radius : 30px;
    font-size     : 13px;
    font-weight   : 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color         : var(--primary-violet-uvci);
    background    : rgba(149, 27, 129, 0.08);
}

.temoignages-entete .tf-title {
    margin-bottom: 10px;
}

.temoignages-entete p {
    margin: 0;
    color : var(--primary-color4);
}

.temoignage {
    position        : relative;
    display         : flex;
    flex-direction  : column;
    height          : calc(100% - 30px);
    margin          : 0 0 30px;
    padding         : 30px 32px 20px;
    /*border-radius   : 18px;*/
    background-color: var(--primary-color);
    box-shadow      : 0 10px 30px rgba(0, 0, 0, 0.06);
    transition      : transform 0.35s ease, box-shadow 0.35s ease;
}

.temoignage:hover {
    transform : translateY(-6px);
    box-shadow: 0 18px 40px rgba(149, 27, 129, 0.12);
}

.temoignage-guillemet {
    position        : absolute;
    top             : -22px;
    left            : 32px;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 46px;
    height          : 46px;
    border-radius   : 12px;
    font-size       : 18px;
    color           : var(--primary-color);
    background-color: var(--primary-violet-uvci);
    /*box-shadow      : 0 8px 18px rgba(149, 27, 129, 0.3);*/
}

.temoignage blockquote {
    flex       : 1;
    margin     : 0 0 18px;
    padding    : 0;
    border     : 0;
    font-size  : 14px;
    line-height: 1.5;
    font-style : italic;
    color      : #444;
}

.temoignage-auteur {
    display    : flex;
    align-items: center;
    gap        : 14px;
    padding-top: 10px;
    border-top : 1px solid rgba(0, 0, 0, 0.07);
}

.temoignage-avatar {
    display         : inline-flex;
    flex-shrink     : 0;
    align-items     : center;
    justify-content : center;
    width           : 50px;
    height          : 50px;
    border-radius   : 50%;
    font-weight     : 700;
    font-size       : 16px;
    color           : var(--primary-color);
    background      : linear-gradient(135deg, var(--primary-vert-uvci) 0%, #12a650 100%);
}

.temoignage-auteur strong {
    display    : block;
    font-size  : 16px;
    line-height: 1.3;
    color      : var(--primary-color2);
}

.temoignage-auteur small {
    font-size: 14px;
    color    : var(--primary-color4);
}

/* Carte centrale mise en avant */
.temoignage-accent {
    background: linear-gradient(135deg, #6d1260 0%, var(--primary-violet-uvci) 100%);
}

.temoignage-accent .temoignage-guillemet {
    background-color: var(--primary-vert-uvci);
    /*box-shadow      : 0 8px 18px rgba(14, 134, 64, 0.35);*/
}

.temoignage-accent blockquote,
.temoignage-accent .temoignage-auteur strong {
    color: var(--primary-color);
}

.temoignage-accent .temoignage-auteur small {
    color: rgba(255, 255, 255, 0.75);
}

.temoignage-accent .temoignage-auteur {
    border-top-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 991px) {
    .temoignage {
        height       : auto;
        margin-bottom: 50px;
    }
}

/* Blocs de présentation
--------------------------------------------------------------*/
.bloc-espace {
    height          : calc(100% - 30px);
    margin-bottom   : 30px;
    padding         : 35px 30px;
    background-color: var(--primary-color);
    box-shadow      : 0 3px 20px rgba(0, 0, 0, 0.07);
    border-top      : 3px solid var(--primary-vert-uvci);
    text-align      : justify;
    display         : flex;
    flex-direction  : column;
    align-items     : flex-start;
}

.bloc-espace-icone {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 60px;
    height          : 60px;
    margin-bottom   : 20px;
    border-radius   : 50%;
    font-size       : 24px;
    color           : var(--primary-color);
    background-color: var(--primary-violet-uvci);
}

/* Icône et titre sur une même ligne */
.bloc-espace-entete {
    display      : flex;
    align-items  : center;
    gap          : 16px;
    margin-bottom: 18px;
}

.bloc-espace .bloc-espace-entete .bloc-espace-icone {
    flex-shrink  : 0;
    margin-bottom: 0;
}

.bloc-espace .bloc-espace-entete h3 {
    margin-bottom: 0;
}

/* Espace entre le texte et le lien « Découvrir » */
.bloc-espace .lien-bloc {
    padding-top: 20px;
}

.bloc-espace h3 {
    font-size    : 22px;
    margin-bottom: 15px;
    text-align   : left;
}

.bloc-espace ul,
.article-contenu ul,
.article-contenu ol {
    padding-left : 20px;
    margin-bottom: 20px;
}

.bloc-espace ul li {
    list-style: disc;
}

.article-contenu ul li {
    list-style: disc;
}

.article-contenu ol li {
    list-style: decimal;
}

.article-contenu p {
    margin-bottom: -5px;
}

.lien-bloc {
    margin-top : auto;
    font-weight: 600;
    color      : var(--primary-violet-uvci);
}

.lien-bloc i {
    margin-left: 5px;
    transition : margin 0.3s ease;
}

.lien-bloc:hover i {
    margin-left: 10px;
}

/* Bandeau de réservation
--------------------------------------------------------------*/
.bandeau-reservation {
    padding         : 30px 0;
    background-color: #12a650;
    color           : var(--primary-color);
}

.bandeau-reservation-inner {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    justify-content: space-between;
    gap            : 25px;
}

.bandeau-reservation-texte {
    display    : flex;
    align-items: center;
    gap        : 20px;
}

.bandeau-reservation-icone {
    display         : inline-flex;
    flex-shrink     : 0;
    align-items     : center;
    justify-content : center;
    width           : 64px;
    height          : 64px;
    border-radius   : 50%;
    font-size       : 26px;
    color           : var(--primary-color);
    background-color: rgba(255, 255, 255, 0.18);
    border          : 2px solid rgba(255, 255, 255, 0.35);
}

@media (max-width: 575px) {
    .bandeau-reservation-icone {
        width    : 50px;
        height   : 50px;
        font-size: 20px;
    }
}

.bandeau-reservation h3 {
    color        : var(--primary-color);
    margin-bottom: 8px;
}

.bandeau-reservation p {
    margin: 0;
    color : var(--primary-color);
}

/* Galerie photos
--------------------------------------------------------------*/
.galerie-filtres {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: center;
    gap            : 10px;
    margin-bottom  : 35px;
    padding        : 0;
}

.galerie-filtres a {
    display   : inline-block;
    padding   : 8px 22px;
    border    : 1px solid #ddd;
    background: var(--primary-color3);
    color     : var(--primary-color2);
    font-weight: 500;
    transition: all 0.3s ease;
}

.galerie-filtres a.active,
.galerie-filtres a:hover {
    background  : var(--primary-vert-uvci);
    border-color: var(--primary-vert-uvci);
    color       : var(--primary-color);
}

.galerie-item {
    margin-bottom: 30px;
}

.galerie-item.masque {
    display: none;
}

.galerie-lien {
    position: relative;
    display : block;
    overflow: hidden;
}

.galerie-lien img {
    width     : 100%;
    height    : 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.galerie-zoom {
    position        : absolute;
    inset           : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 26px;
    color           : var(--primary-color);
    background-color: rgba(149, 27, 129, 0.6);
    opacity         : 0;
    transition      : opacity 0.3s ease;
}

.galerie-lien:hover img {
    transform: scale(1.08);
}

.galerie-lien:hover .galerie-zoom {
    opacity: 1;
}

.article-galerie {
    margin-top: 40px;
}

.article-galerie h4 {
    margin-bottom: 25px;
}

.article-galerie .galerie-lien img {
    height: 160px;
}

/* Carte de localisation */
.carte-espace {
    height  : 400px;
    width   : 100%;
    z-index : 1;
}

/* Matériels du FabLab
--------------------------------------------------------------*/
.materiel {
    display      : block;
    margin-bottom: 30px;
    text-align   : center;
}

.materiel-media {
    overflow: hidden;
    background-color: var(--primary-color5);
}

.materiel-media img {
    width     : 100%;
    height    : 200px;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.materiel:hover .materiel-media img {
    transform: scale(1.06);
}

.materiel h5 {
    margin-top: 15px;
    font-size : 17px;
}

.materiel:hover h5 {
    color: var(--primary-violet-uvci);
}

/* Actualités
--------------------------------------------------------------*/
.resultat-recherche {
    margin-top: 20px;
}


/* Vue timeline
--------------------------------------------------------------*/
.vue-chrono {
    display: none;
}

.chrono {
    position : relative;
    max-width: 1100px;
    margin   : 0 auto;
}

/* Ligne centrale */
.chrono::before {
    content      : "";
    position     : absolute;
    top          : 0;
    bottom       : 0;
    left         : 50%;
    width        : 3px;
    border-radius: 3px;
    transform    : translateX(-50%);
    background   : linear-gradient(180deg, var(--primary-violet-uvci) 0%, var(--primary-vert-uvci) 100%);
}

/* Repère d'année */
.chrono-annee {
    position     : relative;
    z-index      : 1;
    margin       : 0 0 35px;
    text-align   : center;
}

.chrono-annee span {
    display         : inline-block;
    padding         : 8px 26px;
    border-radius   : 30px;
    font-size       : 18px;
    font-weight     : 700;
    color           : var(--primary-color);
    background-color: var(--primary-violet-uvci);
    box-shadow      : 0 8px 20px rgba(149, 27, 129, 0.3);
}

.chrono-item {
    position     : relative;
    width        : 50%;
    padding-right: 45px;
    margin-bottom: 40px;
}

.chrono-item.chrono-droite {
    margin-left  : 50%;
    padding-right: 0;
    padding-left : 45px;
}

/* Point sur la ligne */
.chrono-point {
    position        : absolute;
    top             : 38px;
    right           : -10px;
    z-index         : 1;
    width           : 20px;
    height          : 20px;
    border-radius   : 50%;
    border          : 4px solid var(--primary-violet-uvci);
    background-color: var(--primary-color);
    box-shadow      : 0 0 0 5px rgba(149, 27, 129, 0.12);
    transition      : background-color 0.3s ease;
}

.chrono-droite .chrono-point {
    right: auto;
    left : -10px;
}

.chrono-item:hover .chrono-point {
    background-color: var(--primary-vert-uvci);
}

/* Carte */
.chrono-carte {
    display         : flex;
    overflow        : hidden;
    border-radius   : 18px;
    background-color: var(--primary-color);
    box-shadow      : 0 10px 30px rgba(0, 0, 0, 0.06);
    color           : inherit;
    transition      : transform 0.35s ease, box-shadow 0.35s ease;
}

.chrono-carte:hover {
    color     : inherit;
    transform : translateY(-4px);
    box-shadow: 0 18px 40px rgba(149, 27, 129, 0.12);
}

.chrono-media {
    flex      : 0 0 42%;
    align-self: center;
    padding   : 14px 0 14px 14px;
}

/* Vignette au format fixe 4:3 : l'image n'est plus étirée sur toute la hauteur de la carte */
.chrono-media-cadre {
    overflow     : hidden;
    border-radius: 12px;
    aspect-ratio : 4 / 3;
}

.chrono-media img {
    display   : block;
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.chrono-carte:hover .chrono-media img {
    transform: scale(1.07);
}

.chrono-corps {
    display       : flex;
    flex-direction: column;
    flex          : 1;
    padding       : 22px 24px;
}

.chrono-corps h3 {
    display           : -webkit-box;
    margin-bottom     : 10px;
    overflow          : hidden;
    font-size         : 18px;
    line-height       : 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition        : color 0.3s ease;
}

.chrono-carte:hover h3 {
    color: var(--primary-violet-uvci);
}

.chrono-corps p {
    display           : -webkit-box;
    margin-bottom     : 14px;
    overflow          : hidden;
    font-size         : 14px;
    line-height       : 1.6;
    color             : var(--primary-color4);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.chrono-corps .actu-lien {
    margin-top: auto;
}

.chrono-carte:hover .actu-lien i {
    transform: translateX(5px);
}

/* Tablette et mobile : ligne à gauche, une seule colonne */
@media (max-width: 991px) {
    .chrono::before {
        left: 10px;
    }

    .chrono-annee {
        text-align: left;
    }

    .chrono-item,
    .chrono-item.chrono-droite {
        width        : 100%;
        margin-left  : 0;
        padding-left : 45px;
        padding-right: 0;
    }

    .chrono-point,
    .chrono-droite .chrono-point {
        right: auto;
        left : 0;
    }
}

@media (max-width: 575px) {
    .chrono-carte {
        flex-direction: column;
    }

    .chrono-media {
        padding: 14px 14px 0;
    }

    .chrono-media-cadre {
        aspect-ratio: 16 / 9;
    }
}

/* Présentation d'un espace numérique
--------------------------------------------------------------*/
.espace-description p {
    margin-bottom: 16px;
}

.espace-description ul {
    padding-left : 20px;
    margin-bottom: 16px;
}

.espace-description ul li {
    list-style: disc;
}

.espace-infos {
    padding         : 26px;
    list-style      : none;
    background-color: var(--primary-color5);
    border-top      : 3px solid var(--primary-vert-uvci);
}

.espace-infos li {
    display    : flex;
    align-items: flex-start;
    gap        : 15px;
    padding    : 14px 0;
    border-top : 1px solid rgba(0, 0, 0, 0.07);
}

.espace-infos li:first-child {
    padding-top: 0;
    border-top : 0;
}

.espace-infos li:last-child {
    padding-bottom: 0;
}

.espace-infos i {
    flex            : 0 0 44px;
    height          : 44px;
    line-height     : 44px;
    text-align      : center;
    font-size       : 18px;
    color           : var(--primary-color);
    background-color: var(--primary-violet-uvci);
}

.espace-infos span {
    display       : block;
    font-size     : 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color         : var(--primary-color4);
}

.espace-infos strong,
.espace-infos a {
    font-weight: 600;
    color      : var(--primary-color2);
}

.espace-infos a:hover {
    color: var(--primary-violet-uvci);
}

@media (max-width: 991px) {
    .espace-infos {
        margin-top: 30px;
    }
}

/* Cartes à légende sur la photo (espaces, studios, fablabs) : légende ancrée en bas de la photo,
   quelle que soit sa hauteur (le thème la remontait d'une marge fixe de 94px, et une légende
   sur plusieurs lignes débordait sous l'image, texte blanc sur fond blanc) */
.flat-work.home3 .work-post {
    position: relative;
}

.flat-work.home3 .work-post .content {
    position: absolute;
    right   : 12px;
    bottom  : 0;
    left    : 12px;
    z-index : 2;
    margin  : 0;
}

/* Dégradé sombre en bas de la photo : légende lisible quelle que soit l'image */
.flat-work.home3 .work-post .media {
    position: relative;
}

.flat-work.home3 .work-post .media::after {
    content       : '';
    position      : absolute;
    inset         : 40% 0 0;
    z-index       : 1;
    background    : linear-gradient(180deg, rgba(20, 8, 20, 0) 0%, rgba(20, 8, 20, 0.75) 100%);
    pointer-events: none;
}

.flat-work.home3 .work-post .carte-universite {
    color: rgba(255, 255, 255, 0.9);
}

.flat-work.home3 .work-post .carte-universite i {
    color: #7ddc9e;
}

/* Université de rattachement sous le titre des cartes d'espaces */
.carte-universite {
    margin    : 6px 0 0;
    font-size : 14px;
    color     : var(--primary-color4);
}

.carte-universite i {
    margin-right: 5px;
    color       : var(--primary-vert-uvci);
}

/* Carte interactive des espaces numériques
--------------------------------------------------------------*/
.carte-intro {
    /*max-width    : 860px;*/
    margin-bottom: 22px;
}

.carte-outils {
    display      : flex;
    flex-wrap    : wrap;
    align-items  : center;
    gap          : 12px 24px;
    margin-bottom: 16px;
    padding      : 14px 18px;
    background   : var(--primary-color5);
}

.carte-filtre {
    display    : inline-flex;
    align-items: center;
    gap        : 8px;
    margin     : 0;
    font-weight: 500;
    cursor     : pointer;
}

.legende-pastille {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 24px;
    height         : 24px;
    border-radius  : 50%;
    font-size      : 11px;
    color          : #fff;
    background     : var(--primary-color4);
}

.legende-studio {
    border-radius: 4px;
}

.legende-zone {
    display      : inline-block;
    width        : 24px;
    height       : 16px;
    border       : 2px dashed var(--primary-violet-uvci);
    border-radius: 50%;
    background   : rgba(149, 27, 129, 0.12);
}

.carte-recentrer {
    margin-left: auto;
    padding    : 7px 14px;
    border     : 1px solid var(--primary-violet-uvci);
    background : #fff;
    color      : var(--primary-violet-uvci);
    font-weight: 500;
    cursor     : pointer;
}

.carte-recentrer:hover {
    color     : #fff;
    background: var(--primary-violet-uvci);
}

.carte-disposition {
    display              : grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap                  : 20px;
}

.carte-ci {
    height : 620px;
    z-index: 1;
    border : 1px solid #ddd;
}

.carte-liste {
    max-height: 620px;
    overflow-y: auto;
    padding   : 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.carte-liste h3 {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    margin-bottom: 14px;
    font-size    : 20px;
}

.carte-liste h3 span {
    padding    : 1px 9px;
    font-size  : 13px;
    color      : #fff;
    background : var(--primary-vert-uvci);
}

#carte-liste {
    padding   : 0;
    list-style: none;
}

#carte-liste > li {
    border-top: 1px solid #eee;
}

.liste-universite {
    display    : flex;
    align-items: center;
    gap        : 12px;
    width      : 100%;
    padding    : 12px 4px;
    border     : 0;
    background : none;
    text-align : left;
    cursor     : pointer;
}

.liste-couleur {
    flex         : 0 0 14px;
    height       : 14px;
    border-radius: 50%;
}

.liste-texte {
    flex: 1;
}

.liste-texte strong,
.liste-texte small {
    display    : block;
    line-height: 1.35;
}

.liste-texte small {
    color: var(--primary-color4);
}

.liste-universite > i {
    font-size : 12px;
    color     : var(--primary-color4);
    transition: transform 0.3s ease;
}

#carte-liste > li.ouvert .liste-universite > i {
    transform: rotate(180deg);
}

.liste-espaces {
    display    : none;
    padding    : 0 0 12px 26px;
    list-style : none;
}

#carte-liste > li.ouvert .liste-espaces {
    display: block;
}

.liste-espaces button,
.liste-espaces a {
    display    : block;
    width      : 100%;
    padding    : 5px 0;
    border     : 0;
    background : none;
    text-align : left;
    font-size  : 14px;
    color      : var(--primary-color2);
    cursor     : pointer;
}

.liste-espaces button i {
    width: 18px;
    color: var(--primary-vert-uvci);
}

.liste-espaces button:hover,
.liste-espaces a {
    color: var(--primary-violet-uvci);
}

.liste-espaces a {
    font-weight: 600;
}

/* Repères et étiquettes sur la carte */
.repere-espace,
.etiquette-universite {
    background: none;
    border    : 0;
}

.repere {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 30px;
    height         : 30px;
    border         : 3px solid #fff;
    border-radius  : 50%;
    font-size      : 12px;
    color          : #fff;
    box-shadow     : 0 3px 8px rgba(0, 0, 0, 0.35);
    transition     : transform 0.2s ease;
}

.repere-studio {
    border-radius: 6px;
}

.repere:hover {
    transform: scale(1.2);
}

/* Étiquette posée au-dessus de la zone (ancrée par sa pointe basse) */
.etiquette-universite span {
    position     : relative;
    display      : inline-flex;
    align-items  : center;
    gap          : 6px;
    padding      : 5px 10px;
    font-size    : 13px;
    font-weight  : 700;
    white-space  : nowrap;
    color        : #fff;
    border       : 2px solid #fff;
    box-shadow   : 0 3px 10px rgba(0, 0, 0, 0.35);
    /* --decalage : remonte l'étiquette quand elle chevaucherait une étiquette voisine */
    transform    : translate(-50%, calc(-100% - 8px - var(--decalage, 0px)));
    cursor       : pointer;
}

.etiquette-universite span:hover {
    z-index: 2;
}

/* Trait reliant une étiquette remontée à sa zone */
.etiquette-universite span::before {
    content         : "";
    position        : absolute;
    top             : 100%;
    left            : 50%;
    width           : 2px;
    height          : var(--decalage, 0px);
    margin-left     : -1px;
    background-color: #fff;
    box-shadow      : 0 0 3px rgba(0, 0, 0, 0.45);
}

/* Pointe vers la zone */
.etiquette-universite span::after {
    content     : "";
    position    : absolute;
    left        : 50%;
    bottom      : calc(-8px - var(--decalage, 0px));
    border-left : 7px solid transparent;
    border-right: 7px solid transparent;
    border-top  : 7px solid #fff;
    transform   : translateX(-50%);
}

/* Nombre d'espaces de l'université */
.etiquette-universite b {
    min-width       : 20px;
    padding         : 0 5px;
    font-size       : 11px;
    line-height     : 18px;
    text-align      : center;
    color           : #333;
    background-color: #fff;
    border-radius   : 9px;
}

.carte-aide {
    padding         : 7px 12px;
    font-size       : 13px;
    color           : #333;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow      : 0 2px 8px rgba(0, 0, 0, 0.2);
}

.carte-aide i {
    margin-right: 5px;
    color       : var(--primary-vert-uvci);
}

.popup-espace img {
    display      : block;
    width        : 100%;
    height       : 110px;
    margin-bottom: 8px;
    object-fit   : cover;
}

.popup-espace strong {
    display      : block;
    margin       : 4px 0;
    font-size    : 15px;
}

.popup-espace small {
    display: block;
    color  : #666;
}

.popup-espace small i {
    width: 16px;
    color: var(--primary-vert-uvci);
}

.popup-espace a {
    display    : inline-block;
    margin-top : 8px;
    font-weight: 600;
    color      : var(--primary-violet-uvci);
}

.popup-type {
    display       : inline-block;
    padding       : 1px 8px;
    font-size     : 11px;
    font-weight   : 600;
    text-transform: uppercase;
    color         : #fff;
    background    : var(--primary-vert-uvci);
}

.popup-type.popup-studio {
    background: var(--primary-violet-uvci);
}

@media (max-width: 991px) {
    .carte-disposition {
        grid-template-columns: minmax(0, 1fr);
    }

    .carte-ci {
        height: 460px;
    }

    .carte-liste {
        max-height: none;
    }

    .carte-recentrer {
        margin-left: 0;
    }
}

/* Bandeau d'aperçu d'une actualité (back-office)
--------------------------------------------------------------*/
.bandeau-apercu {
    position        : sticky;
    top             : 0;
    z-index         : 50;
    padding         : 12px 0;
    color           : #7a5300;
    background-color: #fff3cd;
    border-bottom   : 2px solid #ffc107;
}

.bandeau-apercu .container {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    justify-content: space-between;
    gap            : 10px;
}

.bandeau-apercu a {
    font-weight: 600;
    color      : var(--primary-violet-uvci);
}

/* Contact
--------------------------------------------------------------*/
/* Mêmes styles que #contactform du thème (id différent pour éviter son envoi AJAX) */
.flat-blog-details #form-contact fieldset {
    position     : relative;
    margin-bottom: 9px;
}

.flat-blog-details #form-contact input {
    padding: 13px 19px;
}

.flat-blog-details #form-contact input::placeholder,
.flat-blog-details #form-contact textarea::placeholder {
    color: rgba(119, 119, 119, 0.7);
}

.flat-blog-details #form-contact .style-text {
    width: 50%;
    float: left;
}

.flat-blog-details #form-contact .phone-wrap,
.flat-blog-details #form-contact .name-wrap {
    padding-right: 15px;
}

.flat-blog-details #form-contact .email-wrap,
.flat-blog-details #form-contact .site-wrap {
    padding-left: 15px;
}

.flat-blog-details #form-contact textarea {
    padding: 7px 19px 0px;
}

.flat-blog-details #form-contact .btn-submit-comment {
    margin-top: 50px;
}

.flat-blog-details #form-contact button#comment-reply {
    text-transform: uppercase;
    padding       : 10px 20px;
}

@media (min-width: 768px) and (max-width: 991px) {
    .flat-blog-details #form-contact .name-wrap,
    .flat-blog-details #form-contact .phone-wrap {
        padding-right : 5px;
        padding-bottom: 5px;
    }

    .flat-blog-details #form-contact .email-wrap,
    .flat-blog-details #form-contact .site-wrap {
        padding-left  : 5px;
        padding-bottom: 5px;
    }
}

@media only screen and (max-width: 767px) {
    .flat-blog-details #form-contact .style-text {
        width  : 100%;
        display: contents;
    }

    .flat-blog-details #form-contact input {
        margin-bottom: 10px;
    }
}

.alerte-contact {
    padding      : 15px 20px;
    margin-bottom: 25px;
    border-left  : 4px solid;
}

.alerte-contact.succes {
    color           : #0e6b34;
    background-color: #e7f5ec;
    border-color    : var(--primary-vert-uvci);
}

.alerte-contact.erreur {
    color           : #8a1c1c;
    background-color: #fbeaea;
    border-color    : #c0392b;
}

/* Espaces de fabrique numérique sur la carte : repère en losange */
.legende-fablab {
    border-radius: 0;
    transform    : rotate(45deg);
}

.legende-fablab i {
    transform: rotate(-45deg);
}

.repere-fablab {
    border-radius: 4px;
    transform    : rotate(45deg);
}

.repere-fablab i {
    transform: rotate(-45deg);
}

.repere-fablab:hover {
    transform: rotate(45deg) scale(1.2);
}

.popup-type.popup-fablab {
    background: #e67e22;
}

/* En-tête du site (refonte) : barre supérieure, logo, menu sur une ligne, en-tête collant
--------------------------------------------------------------*/
/* Le thème met « overflow-x: hidden; overflow-y: auto » sur body : body devient alors un conteneur
   de défilement qui ne défile jamais, et l'en-tête « sticky » ne restait pas en haut.
   « clip » masque toujours les débordements horizontaux sans créer de conteneur de défilement. */
html body {
    overflow-x: clip;
    overflow-y: visible;
}

/* Ancres (#section) : ne pas arriver cachées sous l'en-tête collant */
html {
    scroll-padding-top: 90px;
}

#site-header-wrap.entete-en-wrap {
    position: sticky;
    top     : -40px; /* la barre supérieure (40px) défile, l'en-tête reste visible */
    z-index : 1000;
}

#top-bar.barre-haut {
    padding   : 0;
    background: #520c50;
}

.barre-haut-inner {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 20px;
    height         : 40px;
    font-size      : 13px;
    color          : rgba(255, 255, 255, 0.9);
}

.barre-haut-devise {
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
}

.barre-haut-devise i {
    margin-right: 6px;
    color       : #7ddc9e;
}

.barre-haut-liens {
    display    : flex;
    flex-shrink: 0;
    gap        : 22px;
}

.barre-haut-liens a {
    display    : inline-flex;
    align-items: center;
    gap        : 7px;
    color      : rgba(255, 255, 255, 0.9);
    transition : color 0.2s ease;
}

.barre-haut-liens a:hover {
    color: #fff;
}

#site-header.entete-en {
    position        : relative;
    display         : block;
    height          : auto;
    padding         : 0;
    background-color: #fff;
    border-bottom   : 1px solid rgba(0, 0, 0, 0.06);
    box-shadow      : 0 6px 24px rgba(30, 20, 40, 0.06);
}

.entete-conteneur {
    display    : flex;
    align-items: center;
    gap        : 24px;
    height     : 78px;
}

.entete-logo {
    display    : flex;
    flex-shrink: 0;
    align-items: center;
    gap        : 12px;
}

.entete-logo img {
    width : auto;
    height: 44px;
}

.entete-logo-texte {
    display       : flex;
    flex-direction: column;
    padding-left  : 12px;
    font-size     : 12px;
    font-weight   : 500;
    line-height   : 1.25;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color         : #6b6b6b;
    border-left   : 2px solid #eee;
}

.entete-logo-texte strong {
    font-size     : 15px;
    font-weight   : 700;
    letter-spacing: 0.5px;
    color         : var(--primary-violet-uvci);
}

.entete-en #site-header-inner {
    position   : static;
    left       : auto;
    flex       : 1;
    margin-left: 0;
}

.entete-en .wrap-inner {
    display        : flex;
    justify-content: flex-end;
}

/* Rubriques du menu */
.entete-en #main-nav > ul {
    display    : flex;
    align-items: center;
    gap        : 2px;
}

.entete-en #main-nav > ul > li {
    float : none;
    margin: 0;
}

.entete-en #main-nav > ul > li > a {
    display    : flex;
    align-items: center;
    gap        : 6px;
    padding    : 0 13px;
    font-size  : 15.5px;
    font-weight: 500;
    line-height: 78px;
    white-space: nowrap;
    color      : #1d1d1f !important;
    transition : color 0.2s ease;
}

.entete-en #main-nav > ul > li > a:hover,
.entete-en #main-nav > ul > li:hover > a,
.entete-en #main-nav > ul > li.current-menu-item > a {
    color: var(--primary-violet-uvci) !important;
}

/* Indicateur de la rubrique active (et au survol) */
.entete-en #main-nav > ul > li > a::before {
    left            : 13px;
    right           : 13px;
    bottom          : 0;
    width           : auto;
    height          : 3px;
    background-color: var(--primary-violet-uvci);
}

.entete-en #main-nav > ul > li.current-menu-item > a {
    font-weight: 600;
}

/* Chevron des rubriques à sous-menu */
.entete-en #main-nav > .menu > li.menu-item-has-children > a::after {
    content    : "\f107";
    margin-left: 0;
    font-family: "Font Awesome 6 Free";
    font-size  : 12px;
    font-weight: 900;
    color      : inherit !important;
    transition : transform 0.25s ease;
}

.entete-en #main-nav > .menu > li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* Bouton « Accès direct » */
.entete-en #main-nav > ul > li.menu-cta {
    margin-left: 12px;
}

.entete-en #main-nav > ul > li.menu-cta > a {
    padding         : 0 18px;
    line-height     : 42px;
    font-size       : 14.5px;
    font-weight     : 600;
    color           : #fff !important;
    background-color: var(--primary-vert-uvci);
    border-radius   : 4px;
    transition      : background-color 0.2s ease;
}

.entete-en #main-nav > ul > li.menu-cta > a::before {
    display: none;
}

.entete-en #main-nav > ul > li.menu-cta:hover > a {
    color           : #fff !important;
    background-color: #0b6d34;
}

/* Sous-menus */
.entete-en #main-nav .sub-menu {
    top          : 100%;
    min-width    : 250px;
    width        : max-content;
    max-width    : 330px;
    padding      : 8px 0;
    border-top   : 3px solid var(--primary-violet-uvci);
    border-radius: 0 0 6px 6px;
    box-shadow   : 0 14px 36px rgba(30, 20, 40, 0.14);
    transform    : translateY(10px);
}

.entete-en #main-nav .sub-menu::before {
    display: none;
}

.entete-en #main-nav .sub-menu .sub-menu {
    top          : -11px;
    border-radius: 6px;
}

/* Le bouton « Accès direct » est moins haut que les autres rubriques : zone tampon pour garder le sous-menu ouvert */
.entete-en #main-nav li.menu-cta > .sub-menu {
    top: calc(100% + 18px);
}

.entete-en #main-nav li.menu-cta > .sub-menu::after {
    content : "";
    position: absolute;
    top     : -21px;
    left    : 0;
    right   : 0;
    height  : 18px;
}

.entete-en #main-nav .sub-menu li::after {
    display: none;
}

.entete-en #main-nav .sub-menu li a {
    padding    : 9px 20px;
    font-size  : 14.5px;
    font-weight: 500;
    line-height: 1.45;
    color      : #2b2b2b;
    transition : background-color 0.2s ease, color 0.2s ease, padding 0.2s ease;
}

.entete-en #main-nav .sub-menu li:hover > a {
    padding-left    : 24px;
    color           : var(--primary-violet-uvci);
    background-color: #faf3f9;
}

.entete-en #main-nav .sub-menu .menu-item-has-children > a {
    padding-right: 36px;
}

.entete-en #main-nav .sub-menu .menu-item-has-children > a::after {
    position : absolute;
    right    : 16px;
    float    : none;
    font-size: 12px;
    color    : #999;
}

/* Bouton du menu mobile */
.entete-en .mobile-button {
    position : relative;
    top      : auto;
    right    : auto;
    margin   : 0 0 0 auto;
    transform: none;
}

.entete-en .mobile-button:before,
.entete-en .mobile-button:after,
.entete-en .mobile-button span {
    background-color: var(--primary-violet-uvci);
}

@media (max-width: 1399px) {
    .entete-logo-texte {
        display: none;
    }

    .entete-en #main-nav > ul > li > a {
        padding  : 0 10px;
        font-size: 15px;
    }

    .entete-en #main-nav > ul > li > a::before {
        left : 10px;
        right: 10px;
    }
}

/* Menu mobile (le thème déplace le menu dans l'en-tête sous 1200px) */
@media (max-width: 1200px) {
    .entete-conteneur {
        height: 70px;
    }

    .entete-logo img {
        height: 40px;
    }

    .entete-en .mobile-button {
        display: block;
    }

    .entete-en #site-header-inner {
        display: none;
    }

    #site-header.entete-en #main-nav-mobi {
        max-height      : calc(100vh - 70px);
        overflow-y      : auto;
        background-color: #fff;
        border-top      : 3px solid var(--primary-violet-uvci);
        box-shadow      : 0 14px 30px rgba(30, 20, 40, 0.15);
    }

    #site-header.entete-en #main-nav-mobi ul > li > a {
        display    : block;
        padding    : 0 64px 0 20px;
        line-height: 50px;
        color      : #1d1d1f;
    }

    #site-header.entete-en #main-nav-mobi ul > li.current-menu-item > a {
        color: var(--primary-violet-uvci);
    }

    #site-header.entete-en #main-nav-mobi .sub-menu {
        background-color: #faf8fa;
    }

    #site-header.entete-en #main-nav-mobi .menu-item-has-children .arrow:before {
        content    : "\f107";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size  : 15px;
    }

    #site-header.entete-en #main-nav-mobi .menu-item-has-children .arrow.active:before {
        content: "\f106";
    }

    #site-header.entete-en #main-nav-mobi li.menu-cta > a {
        font-weight: 600;
        color      : var(--primary-vert-uvci);
    }
}

@media (max-width: 767px) {
    .barre-haut-liens span {
        display: none;
    }

    /* Mobile : seul l'email reste, pour afficher la devise en entier */
    .barre-haut-inner {
        gap: 12px;
    }

    .barre-haut-liens a[href^="http"] {
        display: none;
    }
}

@media (max-width: 400px) {
    .barre-haut-inner {
        font-size: 12px;
    }
}

/* FAQ : flèche d'ouverture (le thème utilise « Font Awesome 5 Pro », non chargé) */
.flat-and .flat-accordion .btn-toggle::after {
    content    : "\f107";
    display    : inline-block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size  : 14px;
    transition : transform 0.25s ease;
}

.flat-and .flat-accordion .toggle-title.active .btn-toggle::after {
    transform: rotate(180deg);
}

/* Menu principal : pas de trait sous la rubrique survolée ou active (la couleur violette suffit) */
.entete-en #main-nav > ul > li > a::before {
    display: none;
}

/* Agenda des événements et formations
--------------------------------------------------------------*/
.agenda-intro p {
    max-width    : 820px;
    margin-bottom: 26px;
    font-size    : 16px;
}

.agenda-filtres {
    display      : flex;
    flex-wrap    : wrap;
    align-items  : center;
    gap          : 12px;
    margin-bottom: 30px;
}

/* Filtres sur une même ligne (le thème donne 100 % de largeur aux listes) */
.agenda-filtres select {
    flex         : 0 1 300px;
    width        : auto;
    min-width    : 200px;
    height       : 46px;
    margin       : 0;
    padding      : 0 14px;
    border       : 1px solid #e3e3e3;
    border-radius: 10px;
    background   : #fff;
}

.agenda-espace {
    margin-left: auto;
    font-weight: 600;
    color      : #951b81;
}

.agenda-liste {
    display       : flex;
    flex-direction: column;
    gap           : 16px;
}

.agenda-item {
    display      : flex;
    align-items  : center;
    gap          : 22px;
    padding      : 18px 22px;
    border-radius: 16px;
    color        : inherit;
    background   : #fff;
    box-shadow   : 0 6px 24px rgba(0, 0, 0, 0.06);
    transition   : transform 0.2s ease, box-shadow 0.2s ease;
}

.agenda-item:hover {
    color     : inherit;
    transform : translateY(-2px);
    box-shadow: 0 14px 34px rgba(149, 27, 129, 0.14);
}

.agenda-date {
    display        : flex;
    flex           : 0 0 78px;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    height         : 86px;
    border-radius  : 14px;
    color          : #fff;
    background     : linear-gradient(150deg, #6d1260, #951b81);
}

.agenda-date strong {
    font-size  : 30px;
    line-height: 1;
    color      : #fff;
}

.agenda-date span {
    font-size     : 13px;
    font-weight   : 600;
    text-transform: uppercase;
}

.agenda-date small {
    font-size: 12px;
    opacity  : 0.85;
}

.agenda-corps {
    display       : flex;
    flex          : 1;
    flex-direction: column;
    gap           : 6px;
    min-width     : 0;
}

.agenda-corps > strong {
    font-size  : 19px;
    line-height: 1.3;
    color      : #1c1c1c;
}

.agenda-etiquettes {
    display: flex;
    gap    : 8px;
}

.agenda-type,
.agenda-public {
    display      : inline-block;
    padding      : 3px 10px;
    border-radius: 999px;
    font-size    : 12px;
    font-weight  : 600;
}

.agenda-type {
    color     : #fff;
    background: #951b81;
}

.agenda-type.type-formation   { background: #12a650; }
.agenda-type.type-competition { background: #e67e22; }
.agenda-type.type-conference  { background: #2980b9; }
.agenda-type.type-autre       { background: #7f8c8d; }

.agenda-public {
    color     : #6d1260;
    background: #f8eef6;
}

.agenda-lieu {
    font-size: 14px;
    color    : #777;
}

.agenda-lieu i {
    color: #951b81;
}

.agenda-places {
    flex       : 0 0 auto;
    font-weight: 600;
    color      : #12a650;
}

.agenda-places.complet {
    color: #c0392b;
}

.agenda-places i {
    margin-left: 8px;
    color      : #951b81;
}

.agenda-vide {
    padding   : 60px 20px;
    text-align: center;
    color     : #888;
}

.agenda-vide i {
    font-size    : 42px;
    margin-bottom: 14px;
    color        : #d7c3d3;
}

/* Page d'un événement */
.evenement-grille {
    display              : grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap                  : 40px;
    align-items          : start;
}

.evenement-affiche {
    display      : block;
    width        : 100%;
    margin-bottom: 22px;
    border-radius: 16px;
}

.evenement-description {
    margin-top : 18px;
    font-size  : 16px;
    line-height: 1.8;
}

.evenement-annule {
    margin       : 16px 0 0;
    padding      : 12px 16px;
    border-radius: 10px;
    font-weight  : 600;
    color        : #c0392b;
    background   : #fbe3e1;
}

.evenement-encart {
    position     : sticky;
    top          : 110px;
    padding      : 26px;
    border-radius: 18px;
    background   : #fff;
    box-shadow   : 0 10px 34px rgba(0, 0, 0, 0.08);
}

.evenement-encart ul {
    margin    : 0 0 22px;
    padding   : 0;
    list-style: none;
}

.evenement-encart li {
    display      : flex;
    gap          : 14px;
    margin-bottom: 16px;
}

.evenement-encart li > i {
    flex      : 0 0 20px;
    margin-top: 4px;
    font-size : 17px;
    color     : #951b81;
}

.evenement-encart small {
    display       : block;
    font-size     : 12px;
    font-weight   : 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color         : #999;
}

.evenement-bouton {
    display      : block;
    padding      : 14px;
    border-radius: 999px;
    font-weight  : 700;
    text-align   : center;
    color        : #fff;
    background   : #12a650;
}

.evenement-bouton:hover {
    color     : #fff;
    background: #0e8640;
}

.evenement-bouton.desactive {
    color     : #777;
    background: #eee;
}

.evenement-encart p {
    margin    : 12px 0 0;
    font-size : 13px;
    text-align: center;
    color     : #777;
}

@media (max-width: 991px) {
    .evenement-grille {
        grid-template-columns: minmax(0, 1fr);
    }

    .evenement-encart {
        position: static;
    }
}

/* Agenda, tablette : les deux filtres se partagent la ligne, « Mes inscriptions » reste à droite */
@media (max-width: 991px) {
    .agenda-filtres select {
        flex     : 1 1 0;
        min-width: 0;
    }

    .agenda-espace {
        flex       : 0 0 auto;
        white-space: nowrap;
    }
}

/* Agenda, mobile : filtres empilés, carte compacte (date | texte), places en pied de carte */
@media (max-width: 767px) {
    .agenda-intro p {
        margin-bottom: 20px;
        font-size    : 15px;
    }

    .agenda-filtres {
        gap          : 10px;
        margin-bottom: 22px;
    }

    .agenda-filtres select {
        flex  : 1 1 100%;
        height: 44px;
    }

    .agenda-espace {
        margin-left: 0;
    }

    .agenda-liste {
        gap: 12px;
    }

    .agenda-item {
        flex-wrap  : wrap;
        align-items: flex-start;
        gap        : 12px 14px;
        padding    : 14px;
    }

    .agenda-date {
        flex         : 0 0 58px;
        height       : 66px;
        border-radius: 12px;
    }

    .agenda-date strong {
        font-size: 24px;
    }

    .agenda-date span {
        font-size: 11px;
    }

    .agenda-date small {
        font-size: 11px;
    }

    .agenda-corps {
        flex: 1 1 0;
        gap : 5px;
    }

    .agenda-etiquettes {
        flex-wrap: wrap;
        gap      : 6px;
    }

    .agenda-type,
    .agenda-public {
        padding  : 2px 9px;
        font-size: 11px;
    }

    .agenda-corps > strong {
        font-size: 16px;
    }

    .agenda-lieu {
        font-size: 13px;
    }

    .agenda-places {
        display        : flex;
        flex           : 1 1 100%;
        align-items    : center;
        justify-content: space-between;
        padding-top    : 10px;
        font-size      : 14px;
        border-top     : 1px solid #f1ecf0;
    }
}

/* Bouton du compte connecté (remplace « Accès direct ») */
.entete-en #main-nav > ul > li.menu-compte > a {
    display    : inline-flex;
    align-items: center;
    gap        : 8px;
    padding    : 0 16px 0 6px;
}

.menu-compte-photo,
.menu-compte-initiale {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 30px;
    height         : 30px;
    border-radius  : 50%;
    border         : 2px solid rgba(255, 255, 255, 0.85);
    object-fit     : cover;
}

.menu-compte-initiale {
    font-size  : 13px;
    font-weight: 700;
    line-height: 1;
    background : rgba(255, 255, 255, 0.2);
}

.entete-en #main-nav .sub-menu li a i,
.menu-deconnexion button i {
    width       : 18px;
    margin-right: 6px;
    color       : var(--primary-violet-uvci);
}

.menu-deconnexion button {
    display    : block;
    width      : 100%;
    padding    : 9px 22px;
    border     : 0;
    border-top : 1px solid #eee;
    font-family: inherit;
    font-size  : 15px;
    text-align : left;
    color      : #c0392b;
    background : none;
    cursor     : pointer;
}

.menu-deconnexion button:hover {
    background: #fbf5fa;
}

/* Pied de page : liens utiles plus resserrés */
#footer .menu-1 h3 {
    margin-bottom: 16px;
}

#footer .link-wrap li {
    margin-bottom: 0;
}

#footer .link-wrap li a {
    line-height: 27px;
}

/* Fenêtre de confirmation de la déconnexion (site public) */
.modal-site {
    width        : min(420px, calc(100vw - 32px));
    margin       : auto;
    padding      : 28px 26px 24px;
    border       : 0;
    border-radius: 16px;
    text-align   : center;
    box-shadow   : 0 25px 60px rgba(0, 0, 0, 0.25);
}

.modal-site::backdrop {
    background: rgba(29, 11, 26, 0.55);
}

.modal-site-icone {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 56px;
    height         : 56px;
    margin-bottom  : 12px;
    border-radius  : 50%;
    font-size      : 22px;
    color          : #c0392b;
    background     : #fbe3e1;
}

.modal-site h2 {
    margin   : 0 0 8px;
    font-size: 22px;
}

.modal-site p {
    margin   : 0 0 20px;
    font-size: 14px;
    color    : #777;
}

.modal-site form {
    margin: 0;
}

.modal-site-boutons {
    display: flex;
    gap    : 10px;
}

.modal-site-boutons button {
    flex         : 1;
    height       : 44px;
    border       : 1px solid #e3e3e3;
    border-radius: 999px;
    font-family  : inherit;
    font-size    : 15px;
    font-weight  : 600;
    color        : #333;
    background   : #fff;
    cursor       : pointer;
}

.modal-site-boutons .modal-site-confirmer {
    border-color: #c0392b;
    color       : #fff;
    background  : #c0392b;
}

.modal-site-boutons .modal-site-confirmer:hover {
    background: #a5301f;
}

/* Page Contact
--------------------------------------------------------------*/
.contact-carte {
    display              : grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    overflow             : hidden;
    border-radius        : 22px;
    background           : #fff;
    box-shadow           : 0 16px 46px rgba(30, 20, 40, 0.1);
}

.contact-infos {
    position  : relative;
    padding   : 46px 40px;
    overflow  : hidden;
    color     : #fff;
    background: linear-gradient(150deg, #4a0c42 0%, #6d1260 40%, #951b81 100%);
}

/* Motif décoratif */
.contact-infos::after {
    content      : "";
    position     : absolute;
    right        : -90px;
    bottom       : -90px;
    width        : 260px;
    height       : 260px;
    border-radius: 50%;
    border       : 40px solid rgba(18, 166, 80, 0.25);
}

.contact-surtitre {
    font-size     : 13px;
    font-weight   : 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color         : #a7f3c6;
}

.contact-infos h2 {
    margin   : 6px 0 12px;
    font-size: 36px;
    color    : #fff;
}

.contact-infos > p {
    margin   : 0 0 30px;
    font-size: 15px;
    color    : rgba(255, 255, 255, 0.88);
}

.contact-infos ul {
    position  : relative;
    z-index   : 1;
    margin    : 0;
    padding   : 0;
    list-style: none;
}

.contact-infos li {
    display      : flex;
    gap          : 16px;
    margin-bottom: 22px;
    font-size    : 15px;
    line-height  : 1.5;
}

.contact-icone {
    display        : flex;
    flex           : 0 0 44px;
    align-items    : center;
    justify-content: center;
    height         : 44px;
    border-radius  : 12px;
    font-size      : 17px;
    background     : rgba(255, 255, 255, 0.14);
}

.contact-infos li small {
    display       : block;
    font-size     : 12px;
    font-weight   : 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity       : 0.7;
}

.contact-infos a {
    color: #fff;
}

.contact-infos a:hover {
    color          : #a7f3c6;
    text-decoration: underline;
}

.contact-formulaire {
    padding: 46px 44px;
}

.contact-formulaire h2 {
    margin   : 0 0 6px;
    font-size: 26px;
}

.contact-intro {
    margin   : 0 0 24px;
    font-size: 14px;
    color    : #888;
}

.contact-requis {
    color: #c0392b;
}

.contact-ligne {
    display              : grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap                  : 0 18px;
}

.contact-champ {
    margin-bottom: 18px;
}

.contact-champ label {
    display      : block;
    margin-bottom: 6px;
    font-size    : 14px;
    font-weight  : 600;
    color        : #333;
}

.contact-champ label small {
    font-weight: 400;
    color      : #999;
}

.contact-champ input,
.contact-champ textarea {
    width        : 100%;
    height       : 46px;
    margin       : 0;
    padding      : 0 14px;
    border       : 1px solid #e1e1e1;
    border-radius: 10px;
    font-size    : 15px;
    background   : #fafafa;
    transition   : border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.contact-champ textarea {
    height     : auto;
    padding    : 12px 14px;
    line-height: 1.6;
    resize     : vertical;
}

.contact-champ input:focus,
.contact-champ textarea:focus {
    outline     : none;
    border-color: #951b81;
    background  : #fff;
    box-shadow  : 0 0 0 3px rgba(149, 27, 129, 0.12);
}

.contact-compteur {
    display   : block;
    margin-top: 4px;
    font-size : 12px;
    text-align: right;
    color     : #999;
}

.contact-bouton {
    display      : inline-flex;
    align-items  : center;
    gap          : 8px;
    height       : 48px;
    padding      : 0 30px;
    border       : 0;
    border-radius: 999px;
    font-size    : 15px;
    font-weight  : 700;
    color        : #fff;
    background   : #12a650;
    cursor       : pointer;
    transition   : background-color 0.2s ease;
}

.contact-bouton:hover {
    color     : #fff;
    background: #0e8640;
}

.contact-bouton-clair {
    color     : #951b81;
    background: #f8eef6;
}

.contact-bouton-clair:hover {
    color     : #fff;
    background: #951b81;
}

.contact-alerte {
    display      : flex;
    gap          : 10px;
    margin-bottom: 20px;
    padding      : 12px 16px;
    border-radius: 10px;
    font-size    : 14px;
    color        : #a5301f;
    background   : #fbe3e1;
}

.contact-envoye {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    height         : 100%;
    min-height     : 360px;
    text-align     : center;
}

.contact-envoye-icone {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 72px;
    height         : 72px;
    margin-bottom  : 18px;
    border-radius  : 50%;
    font-size      : 30px;
    color          : #fff;
    background     : #12a650;
    box-shadow     : 0 10px 24px rgba(18, 166, 80, 0.35);
}

.contact-envoye p {
    max-width: 380px;
    margin   : 0 0 24px;
    color    : #777;
}

/* Champ piège anti-robot : hors de l'écran (pas display:none, que certains robots savent ignorer) */
.contact-piege {
    position: absolute;
    left    : -10000px;
    width   : 1px;
    height  : 1px;
    overflow: hidden;
}

.contact-raccourcis {
    display              : grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap                  : 20px;
    margin               : 30px 0;
}

.contact-raccourcis a {
    display      : flex;
    align-items  : center;
    gap          : 16px;
    padding      : 20px 22px;
    border-radius: 16px;
    color        : #555;
    background   : #fff;
    box-shadow   : 0 6px 22px rgba(0, 0, 0, 0.06);
    transition   : transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-raccourcis a:hover {
    color     : #555;
    transform : translateY(-3px);
    box-shadow: 0 14px 30px rgba(149, 27, 129, 0.14);
}

.contact-raccourcis i {
    flex     : 0 0 auto;
    font-size: 26px;
    color    : #951b81;
}

.contact-raccourcis span {
    font-size  : 14px;
    line-height: 1.5;
}

.contact-raccourcis strong {
    display    : block;
    font-size  : 16px;
    color      : #1c1c1c;
}

.contact-plan {
    position     : relative;
    z-index      : 1;
    height       : 340px;
    border-radius: 22px;
    overflow     : hidden;
    box-shadow   : 0 10px 30px rgba(0, 0, 0, 0.08);
}

@media (max-width: 991px) {
    .contact-carte {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-raccourcis {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .contact-carte {
        border-radius: 16px;
    }

    .contact-infos,
    .contact-formulaire {
        padding: 24px 18px;
    }

    .contact-infos h2 {
        margin   : 4px 0 8px;
        font-size: 26px;
    }

    .contact-infos > p {
        margin-bottom: 20px;
        font-size    : 14px;
    }

    .contact-infos li {
        gap          : 12px;
        margin-bottom: 14px;
        font-size    : 14px;
    }

    .contact-icone {
        flex-basis   : 38px;
        height       : 38px;
        border-radius: 10px;
        font-size    : 15px;
    }

    .contact-infos::after {
        width       : 180px;
        height      : 180px;
        border-width: 28px;
    }

    .contact-raccourcis {
        gap: 12px;
    }

    .contact-raccourcis a {
        padding: 14px 16px;
    }

    .contact-plan {
        height       : 260px;
        border-radius: 16px;
    }

    .contact-ligne {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-bouton {
        width          : 100%;
        justify-content: center;
    }
}

/* Foire aux questions : fond dégradé aux couleurs du site (remplace l'image bg-and.jpg du thème) */
.flat-and {
    background-color: #fff;

}

.flat-and .flat-accordion .flat-toggle {
    background   : #fff;
    border-radius: 10px;
    box-shadow   : 0 4px 16px rgba(109, 18, 96, 0.06);
}

/* Témoignages : cartes plus compactes */
.temoignages-entete {
    margin-bottom: 40px;
}

.temoignage {
    padding: 26px 26px 14px;
}

.temoignage blockquote {
    margin     : 0 0 12px;
    line-height: 1.45;
}

.temoignage-auteur {
    gap        : 12px;
    padding-top: 10px;
}

.temoignage-avatar {
    width    : 40px;
    height   : 40px;
    font-size: 14px;
}

.temoignage-auteur strong {
    font-size: 15px;
}

.temoignage-auteur small {
    font-size: 13px;
}

/* Boutons de partage (actualités)
--------------------------------------------------------------*/
.partage {
    display      : flex;
    flex-wrap    : wrap;
    align-items  : center;
    gap          : 12px 16px;
    margin       : 30px 0 10px;
    padding      : 18px 0;
    border-top   : 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.partage-titre {
    font-weight: 700;
    color      : #1c1c1c;
}

.partage-titre i {
    margin-right: 6px;
    color       : var(--primary-violet-uvci);
}

.partage-boutons {
    display  : flex;
    flex-wrap: wrap;
    gap      : 8px;
}

.partage-boutons a,
.partage-boutons button {
    display      : inline-flex;
    align-items  : center;
    gap          : 8px;
    height       : 38px;
    padding      : 0 14px;
    border       : 0;
    border-radius: 999px;
    font-family  : inherit;
    font-size    : 14px;
    font-weight  : 600;
    color        : #fff;
    cursor       : pointer;
    transition   : transform 0.2s ease, filter 0.2s ease;
}

.partage-boutons a:hover,
.partage-boutons button:hover {
    color    : #fff;
    filter   : brightness(1.1);
    transform: translateY(-2px);
}

.partage-facebook { background: #1877f2; }
.partage-x        { background: #000; }
.partage-linkedin { background: #0a66c2; }
.partage-whatsapp { background: #25d366; }
.partage-email    { background: #6d1260; }
.partage-copier   { background: #7f8c8d; }
.partage-copier.copie { background: #12a650; }

.partage-note {
    flex      : 1 1 100%;
    font-size : 13px;
    color     : #b9650b;
}

.partage-desactive .partage-boutons {
    opacity       : 0.45;
    pointer-events: none;
}

@media (max-width: 600px) {
    .partage-boutons span {
        display: none;
    }

    .partage-boutons a,
    .partage-boutons button {
        justify-content: center;
        width          : 42px;
        height         : 42px;
        padding        : 0;
        font-size      : 17px;
    }
}

/* Accueil : « Prochains événements » (angles droits)
--------------------------------------------------------------*/
.evt-accueil {
    padding   : 40px 0;
    background: #f8f5f8;
}

.evt-entete {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : flex-end;
    justify-content: space-between;
    gap            : 20px;
    margin-bottom  : 26px;
}

.evt-entete .tf-title {
    margin     : 0;
    line-height: 1.2;
}

@media (max-width: 575px) {
    .evt-entete .tf-title {
        font-size: 26px;
    }
}

.evt-surtitre {
    display       : flex;
    align-items   : center;
    gap           : 8px;
    margin-bottom : 10px;
    font-size     : 13px;
    font-weight   : 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color         : #12a650;
}

.evt-pulse {
    width     : 8px;
    height    : 8px;
    background: #12a650;
    animation : evt-pulse 1.8s ease-out infinite;
}

@keyframes evt-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(18, 166, 80, 0.55); }
    100% { box-shadow: 0 0 0 9px rgba(18, 166, 80, 0); }
}

.evt-tout {
    display    : inline-flex;
    align-items: center;
    gap        : 10px;
    padding    : 12px 22px;
    border     : 2px solid var(--primary-violet-uvci);
    font-weight: 600;
    color      : var(--primary-violet-uvci);
    transition : background 0.2s ease, color 0.2s ease;
}

.evt-tout:hover {
    color     : #fff;
    background: var(--primary-violet-uvci);
}

.evt-liste {
    display              : grid;
    grid-template-columns: repeat(var(--colonnes, 3), minmax(0, 1fr));
    gap                  : 24px;
}

/* Carte : liseré supérieur à la couleur du type */
.evt-carte {
    --evt-couleur : #951b81;
    display       : flex;
    flex-direction: column;
    min-width     : 0;
    background    : #fff;
    border        : 1px solid #ece6eb;
    border-top    : 4px solid var(--evt-couleur);
    transition    : transform 0.25s ease, box-shadow 0.25s ease;
}

.evt-carte.type-formation   { --evt-couleur: #12a650; }
.evt-carte.type-competition { --evt-couleur: #e67e22; }
.evt-carte.type-conference  { --evt-couleur: #2980b9; }
.evt-carte.type-autre       { --evt-couleur: #7f8c8d; }

.evt-carte:hover {
    transform : translateY(-4px);
    box-shadow: 0 16px 34px rgba(60, 20, 60, 0.1);
}

.evt-date {
    display      : flex;
    align-items  : center;
    gap          : 14px;
    padding      : 22px 24px 18px;
    border-bottom: 1px solid #f1ecf0;
}

.evt-date > strong {
    font-size  : 46px;
    font-weight: 700;
    line-height: 1;
    color      : var(--evt-couleur);
}

.evt-date > span {
    display       : flex;
    flex-direction: column;
    padding-left  : 14px;
    border-left   : 1px solid #e6dee4;
    line-height   : 1.35;
}

.evt-mois {
    font-size     : 14px;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color         : #1c1c1c;
}

.evt-jour {
    font-size: 14px;
    color    : #777;
}

.evt-corps {
    display       : flex;
    flex          : 1;
    flex-direction: column;
    gap           : 10px;
    min-width     : 0;
    padding       : 20px 24px;
}

.evt-type {
    display       : inline-flex;
    align-items   : center;
    gap           : 8px;
    font-size     : 12px;
    font-weight   : 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color         : var(--evt-couleur);
}

.evt-type::before {
    content   : '';
    width     : 8px;
    height    : 8px;
    background: var(--evt-couleur);
}

.evt-titre {
    display           : -webkit-box;
    overflow          : hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size         : 18px;
    line-height       : 1.4;
    color             : #1c1c1c;
}

.evt-pied {
    display    : flex;
    flex-wrap  : wrap;
    align-items: center;
    gap        : 6px 16px;
    padding    : 14px 24px;
    font-size  : 14px;
    color      : #6b6b6b;
    background : #fbf9fb;
    border-top : 1px solid #f1ecf0;
}

.evt-pied i {
    margin-right: 4px;
    color       : var(--primary-violet-uvci);
}

.evt-places  { font-weight: 600; color: #e67e22; }
.evt-complet { font-weight: 600; color: #c0392b; }

.evt-fleche {
    margin-left: auto;
}

.evt-fleche i {
    margin    : 0;
    color     : var(--evt-couleur);
    transition: transform 0.2s ease;
}

.evt-carte:hover .evt-fleche i {
    transform: translateX(5px);
}

/* Un seul événement : carte horizontale (date | titre | lieu) */
@media (min-width: 768px) {
    .evt-liste-seul .evt-carte {
        flex-direction: row;
        align-items   : stretch;
    }

    .evt-liste-seul .evt-date {
        flex         : 0 0 auto;
        padding      : 26px 30px;
        border-bottom: 0;
        border-right : 1px solid #f1ecf0;
    }

    .evt-liste-seul .evt-corps {
        justify-content: center;
        padding        : 26px 30px;
    }

    .evt-liste-seul .evt-pied {
        flex           : 0 0 240px;
        flex-direction : column;
        align-items    : flex-start;
        justify-content: center;
        padding        : 26px 20px;
        border-top     : 0;
        border-left    : 1px solid #f1ecf0;
    }

    .evt-liste-seul .evt-fleche {
        margin-left: 0;
    }
}

/* Tablette : trois cartes trop étroites, deux par ligne */
@media (max-width: 991px) {
    .evt-liste {
        grid-template-columns: repeat(min(var(--colonnes, 3), 2), minmax(0, 1fr));
    }
}

/* Tablette : carte horizontale d'un événement seul, colonne de droite plus étroite
   (pas en dessous de 768px : la carte y est verticale et flex-basis fixerait la hauteur) */
@media (min-width: 768px) and (max-width: 991px) {
    .evt-liste-seul .evt-pied {
        flex-basis: 190px;
    }
}

@media (max-width: 767px) {
    .evt-accueil {
        padding: 56px 0;
    }

    .evt-liste {
        grid-template-columns: 1fr;
        gap                  : 16px;
    }

    .evt-date > strong {
        font-size: 38px;
    }

    .evt-titre {
        font-size: 17px;
    }
}

/* Accueil : « Nos principales composantes » (sans image, angles droits)
--------------------------------------------------------------*/
.composantes-accueil {
    padding: 0 0 30px;
}

.composantes-surtitre {
    color: var(--primary-violet-uvci);
}

.composantes-surtitre::before {
    content   : '';
    width     : 8px;
    height    : 8px;
    background: currentColor;
}

.composantes-liste {
    display              : grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap                  : 24px;
}

.composante-carte {
    --composante-couleur: #951b81;
    --composante-fond   : #f6ecf4;
    display             : flex;
    align-items         : center;
    gap                 : 18px;
    min-width           : 0;
    padding             : 12px;
    background          : #fff;
    border              : 1px solid #ece6eb;
    border-left         : 4px solid var(--composante-couleur);
    transition          : transform 0.25s ease, box-shadow 0.25s ease;
}

.composante-vert   { --composante-couleur: #12a650; --composante-fond: #e8f6ee; }
.composante-orange { --composante-couleur: #e67e22; --composante-fond: #fdf1e6; }

.composante-carte:hover {
    transform : translateY(-4px);
    box-shadow: 0 16px 34px rgba(60, 20, 60, 0.1);
}

.composante-icone {
    display        : flex;
    flex           : 0 0 54px;
    align-items    : center;
    justify-content: center;
    height         : 54px;
    font-size      : 22px;
    color          : var(--composante-couleur);
    background     : var(--composante-fond);
    transition     : background 0.25s ease, color 0.25s ease;
}

.composante-carte:hover .composante-icone {
    color     : #fff;
    background: var(--composante-couleur);
}

.composante-texte {
    display       : flex;
    flex          : 1;
    flex-direction: column;
    gap           : 3px;
    min-width     : 0;
}

.composante-etiquette {
    font-size     : 12px;
    font-weight   : 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color         : var(--composante-couleur);
}

.composante-texte strong {
    font-size  : 16px;
    line-height: 1.3;
    color      : #1c1c1c;
}

.composante-accroche {
    font-size  : 14px;
    line-height: 1.45;
    color      : #6b6b6b;
}

.composante-fleche i {
    color     : var(--composante-couleur);
    transition: transform 0.2s ease;
}

.composante-carte:hover .composante-fleche i {
    transform: translateX(5px);
}

@media (max-width: 1199px) {
    .composantes-liste {
        grid-template-columns: 1fr;
        gap                  : 14px;
    }
}

@media (max-width: 767px) {
    .composantes-accueil {
        padding: 56px 0 50px;
    }

    .composante-carte {
        gap    : 14px;
        padding: 16px;
    }

    .composante-icone {
        flex-basis: 46px;
        height    : 46px;
        font-size : 19px;
    }

    .composante-texte strong {
        font-size: 16px;
    }
}

/* Carte interactive : choix du fond (plan / satellite) */
.carte-fonds {
    display      : flex;
    overflow     : hidden;
    border-radius: 8px;
    background   : #fff;
    box-shadow   : 0 2px 10px rgba(0, 0, 0, 0.25);
}

.carte-fonds button {
    display    : inline-flex;
    align-items: center;
    gap        : 6px;
    padding    : 7px 12px;
    border     : 0;
    font-family: inherit;
    font-size  : 13px;
    font-weight: 600;
    color      : #444;
    background : #fff;
    cursor     : pointer;
}

.carte-fonds button + button {
    border-left: 1px solid #eee;
}

.carte-fonds button:hover {
    color: var(--primary-violet-uvci);
}

.carte-fonds button.actif {
    color     : #fff;
    background: var(--primary-violet-uvci);
}

@media (max-width: 575px) {
    .carte-fonds button {
        padding: 6px 10px;
    }
}