/*!

 * fichier de style du projet CS

 * Copyright 2023 Steve NOUYEP

 * Copyright 2023 SEED, Inc.

 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

 */


 .ndfHFb-c4YZDc-i5oIFb.ndfHFb-c4YZDc-e1YmVc .ndfHFb-c4YZDc-Wrql6b, [data-tooltip="Fenêtre externe"] {
    display:none!important;
}
iframe + div button, .ndfHFb-c4YZDc-to915-LgbsSe.ndfHFb-c4YZDc-LgbsSe {
    display:none !important;
}

/* Curseur pointeur sur tous les liens et boutons du site */
a,
button,
.btn,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
label[for],
select,
summary {
    cursor: pointer;
}

button:disabled,
.btn:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled {
    cursor: not-allowed;
}

/****************** SECTION MENU PRINCIPAL *****************/

.btn_menu

{

    color: white;

}



.navbar-custom {

    background-color: transparent;

    padding-bottom: 12px;

    padding-top: 12px;

    padding-left: 48px !important;

    padding-right: 48px !important;

    /* Landing : transition navbar ralentie pour un fondu doux haut ↔ scroll. */
    transition:
        background-color 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
        padding 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
        backdrop-filter 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
        -webkit-backdrop-filter 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
        color 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);

}



/* Force le padding horizontal face à Bootstrap .navbar { padding: 0.5rem 1rem }. */
.menu_principal nav.navbar.navbar-custom {

    padding-left: 48px !important;

    padding-right: 48px !important;

}



.menu_principal nav.navbar.fixed-top {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100%;

    z-index: 1030;

    transform: translateZ(0);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}



/* suzy tache mobapp 45 — Navbar fixe : fond blanc en haut, foncé au scroll. */

.navbar-custom.ulif-navbar-at-top,

.navbar-custom.ulif-navbar-scrolled {

    transform: translateZ(0);

}



.navbar-custom.ulif-navbar-at-top {

    background-color: #FFFFFF;

    box-shadow: none;

    border: none;

    border-bottom: none;

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

}



body.ulif-page-home .navbar-custom.ulif-navbar-at-top {

    background-color: transparent;

    box-shadow: none;

    border: none;

    border-bottom: none;

}



.navbar-custom.ulif-navbar-scrolled {

    background-color: rgba(0, 0, 0, 0.70);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.70);

    padding-bottom: 10px;

    padding-top: 10px;

    padding-left: 48px !important;

    padding-right: 48px !important;

}



body:not(.ulif-page-home) .navbar-custom.ulif-navbar-at-top .nav-link {

    color: rgba(0, 0, 0, 0.70);

}



body:not(.ulif-page-home) .navbar-custom.ulif-navbar-at-top .nav-link:hover,

body:not(.ulif-page-home) .navbar-custom.ulif-navbar-at-top .nav-link:focus {

    color: black;

    background-color: rgba(0, 0, 0, 0.70);

}

.menu_principal {

    min-height: 0; /* Supprime la hauteur minimale historique qui créait une bande vide sous le header. */

}

/* Espaceur de flux : compense le header fixed (mobile + desktop). */
.ulif_header_flow_spacer {

    display: block;

    width: 100%;

    height: 0;

}




.logo_menu

{

    width: 56px;

    height: auto;

    display: block;

    position: static;

    top: auto;

    left: auto;

    /* Landing : logo suit le même rythme doux que le fond navbar. */
    transition: width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);

}



.navbar-custom.ulif-navbar-scrolled .logo_menu

{

    width: 48px;

}



/* Modify brand and text color */



.navbar-custom .navbar-brand,

.navbar-custom .navbar-text {

    color: white;

}



.navbar-custom .nav-link

{

    color: white;

    font-size: small;

    text-transform: uppercase;

    border-bottom: 3px solid transparent;

    border-radius: 8px;

    cursor: pointer;

    /* Landing : couleur des liens navbar en fondu lent (aligné fond navbar). */
    transition: color 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);

}



.navbar-custom .nav-link:hover

{

    border-bottom-color: transparent;

    background-color: rgba(255, 255, 255, 0.1);

}



.navbar-custom.ulif-navbar-scrolled .nav-link:hover

{

    background-color: rgba(255, 255, 255, 0.12);

    color: #FFFFFF;

}



/* Accueil en haut de page : liens sombres sur hero clair, comme Meriaz sur fond clair. */

body.ulif-page-home .navbar-custom.ulif-navbar-at-top .nav-link

{

    color: rgba(51, 51, 51, 0.88);

}



body.ulif-page-home .navbar-custom.ulif-navbar-at-top .nav-link:hover

{

    color: #333333;

    background-color: rgba(51, 51, 51, 0.08);

}



body.ulif-page-home .navbar-custom.ulif-navbar-at-top .navbar-nav > .active > a

{

    color: #E09620;

}



body.ulif-page-home .navbar-custom.ulif-navbar-at-top .navbar-nav > .active

{

    border-bottom: none;

}



.navbar-nav > .active > a

{

    color: #E09620;

    font-weight: bold;

    border-bottom: none;

}



.navbar-nav > .active

{

    border-bottom: none;

}



@media only screen and (max-width: 991.98px) {

    body.ulif-page-home .navbar-custom.ulif-navbar-at-top {

        background-color: transparent;

    }

    body.ulif-page-home .navbar-custom.ulif-navbar-at-top .nav-link {

        background-color: rgba(51, 51, 51, 0.08);

        color: rgba(51, 51, 51, 0.92);

    }

    body.ulif-page-home .navbar-custom.ulif-navbar-at-top .nav-link:hover,

    body.ulif-page-home .navbar-custom.ulif-navbar-at-top .nav-link:focus {

        background-color: rgba(51, 51, 51, 0.14);

        color: #333333;

    }

    body.ulif-page-home .navbar-custom.ulif-navbar-at-top .navbar-nav > .active > a {

        background-color: #E09620;

        color: #FFFFFF;

    }

    .navbar-custom.ulif-navbar-scrolled {

        padding-top: 10px;

    }

}

.mobile_header_actions

{

    display: none;

}

.mobile_header_icon_link

{

    align-items: center;

    display: inline-flex;

    justify-content: center;

}

.desktop_header_actions
{
    display: none;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.desktop_only_nav_item
{
    display: list-item;
}

.mobile_only_nav_item

{

    display: none;

}

/* ========== DRAWER NAVIGATION MOBILE ========== */
.ulif_mobile_menu_btn {
    border: none;
    background: transparent;
    color: #E09620;
    cursor: pointer;
    font-size: 1.125rem;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 6px;
    padding: 0;
    box-shadow: none;
}

.ulif_mobile_menu_btn .fa {
    color: #E09620;
}

.ulif_mobile_menu_btn:hover,
.ulif_mobile_menu_btn:focus,
.ulif_mobile_menu_btn:focus-visible,
.ulif_mobile_menu_btn:active,
.ulif_mobile_menu_btn:hover .fa,
.ulif_mobile_menu_btn:focus .fa,
.ulif_mobile_menu_btn:focus-visible .fa,
.ulif_mobile_menu_btn:active .fa {
    background: transparent;
    color: #E09620;
    outline: none;
    box-shadow: none;
}

.ulif_mobile_drawer {
    position: fixed;
    inset: 0;
    z-index: 1060;
    pointer-events: none;
    visibility: hidden;
}

.ulif_mobile_drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.ulif_mobile_drawer__backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(8, 8, 12, 0.38);
    opacity: 0;
    transition: opacity 0.5s ease;
    cursor: pointer;
}

.ulif_mobile_drawer.is-open .ulif_mobile_drawer__backdrop {
    opacity: 1;
}

.ulif_mobile_drawer__panel {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: min(74vw, 268px);
    display: flex;
    flex-direction: column;
    padding: 14px 12px 12px;
    border-radius: 8px;
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(255, 250, 245, 0.84) 55%,
        rgba(255, 244, 232, 0.8) 100%
    );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.45);
    opacity: 0;
    transform: translateX(calc(-100% - 20px)) scale(0.97);
    transition:
        transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.48s ease;
    overflow: hidden;
}

.ulif_mobile_drawer.is-open .ulif_mobile_drawer__panel {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.ulif_mobile_drawer__glow {
    position: absolute;
    top: -30px;
    right: -24px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 150, 32, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.ulif_mobile_drawer__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.ulif_mobile_drawer__profile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.ulif_mobile_drawer__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #E09620 0%, #ffd9a0 100%);
    color: #ffffff;
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(224, 150, 32, 0.24);
}

.ulif_mobile_drawer__avatar--colorful {
    background: linear-gradient(135deg, #C8841A 0%, #E09620 42%, #F5C067 100%);
    box-shadow:
        0 6px 18px rgba(224, 150, 32, 0.32),
        0 0 0 2px rgba(255, 255, 255, 0.55);
    font-size: 1.1rem;
}

.ulif_mobile_drawer__profile_text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ulif_mobile_drawer__name {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    background: linear-gradient(100deg, #1a1a1a 0%, #E09620 40%, #F5C067 70%, #1a1a1a 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: ulif_drawer_name_shimmer 5s linear infinite;
}

.ulif_mobile_drawer__email {
    margin-top: 3px;
    font-size: 0.7rem;
    color: #888888;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

.ulif_mobile_drawer__close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(51, 51, 51, 0.08);
    color: #555555;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ulif_mobile_drawer__close:hover,
.ulif_mobile_drawer__close:focus {
    background: rgba(224, 150, 32, 0.14);
    color: #E09620;
    outline: none;
}

.ulif_mobile_drawer__nav {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow-y: auto;
    padding-right: 2px;
}

.ulif_mobile_drawer__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: #333333;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ulif_mobile_drawer__link:hover,
.ulif_mobile_drawer__link:focus {
    background: rgba(51, 51, 51, 0.06);
    color: #1a1a1a;
    text-decoration: none;
}

.ulif_mobile_drawer__link.is-active {
    background: rgba(224, 150, 32, 0.12);
    color: #1a1a1a;
}

.ulif_mobile_drawer__link_icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(224, 150, 32, 0.1);
    color: #E09620;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.ulif_mobile_drawer__link_label {
    flex: 1;
    min-width: 0;
}

.ulif_mobile_drawer__link_hint {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7c5cff;
    background: rgba(124, 92, 255, 0.1);
    padding: 3px 7px;
    border-radius: 999px;
}

.ulif_mobile_drawer__link--ai {
    margin-top: 6px;
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.08) 0%, rgba(224, 150, 32, 0.1) 100%);
    border: 1px solid rgba(124, 92, 255, 0.14);
}

.ulif_mobile_drawer__link_icon--ai {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.18) 0%, rgba(79, 172, 254, 0.2) 100%);
    color: #7c5cff;
}

.ulif_mobile_drawer__link_badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E09620;
    box-shadow: 0 0 10px rgba(224, 150, 32, 0.65);
    animation: ulif_drawer_badge_pulse 2s ease-in-out infinite;
}

.ulif_mobile_drawer__utilities {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(51, 51, 51, 0.08);
}

.ulif_mobile_drawer__utility_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 2px;
}

.ulif_mobile_drawer__utility_label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #555555;
}

.ulif_mobile_drawer__utility_label .fa {
    color: #E09620;
}

.ulif_mobile_drawer__lang_toggle .ulif_lang_toggle_track {
    height: 28px;
    min-width: 78px;
}

.ulif_mobile_drawer__utility_link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: #333333;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.ulif_mobile_drawer__utility_link:hover,
.ulif_mobile_drawer__utility_link:focus {
    background: rgba(51, 51, 51, 0.06);
    color: #1a1a1a;
    text-decoration: none;
}

.ulif_mobile_drawer__utility_link--logout .ulif_mobile_drawer__link_icon {
    background: rgba(220, 53, 69, 0.1);
    color: #c82333;
}

.ulif_mobile_drawer__footer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(51, 51, 51, 0.08);
}

.ulif_mobile_drawer__footer--single {
    grid-template-columns: 1fr;
}

.ulif_mobile_drawer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 9px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ulif_mobile_drawer__btn .fa {
    flex-shrink: 0;
    font-size: 0.85rem;
}

.ulif_mobile_drawer__btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ulif_mobile_drawer__btn--primary {
    background: #E09620;
    border-color: #E09620;
    color: #ffffff;
}

.ulif_mobile_drawer__btn--primary:hover,
.ulif_mobile_drawer__btn--primary:focus {
    background: #C8841A;
    border-color: #C8841A;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(224, 150, 32, 0.28);
}

.ulif_mobile_drawer__btn--secondary {
    background: #FFFFFF;
    border-color: rgba(224, 150, 32, 0.35);
    color: #E09620;
}

.ulif_mobile_drawer__btn--secondary:hover,
.ulif_mobile_drawer__btn--secondary:focus {
    color: #C8841A;
    background: #FFFFFF;
    border-color: #E09620;
    box-shadow: 0 6px 16px rgba(224, 150, 32, 0.16);
}

body.ulif-mobile-drawer-open {
    overflow: hidden;
}

@keyframes ulif_drawer_name_shimmer {
    0% { background-position: 0% center; }
    100% { background-position: -220% center; }
}

@keyframes ulif_drawer_badge_pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ulif_mobile_drawer__panel,
    .ulif_mobile_drawer__backdrop {
        transition: none;
    }

    .ulif_mobile_drawer__name,
    .ulif_mobile_drawer__link_badge {
        animation: none;
    }

    .ulif_mobile_drawer__name {
        -webkit-text-fill-color: #1a1a1a;
        color: #1a1a1a;
        background: none;
    }
}

@media only screen and (min-width: 992px) {
    .ulif_mobile_drawer,
    .ulif_mobile_menu_btn {
        display: none !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .navbar-custom {
        flex-wrap: nowrap !important;
        padding-bottom: 10px !important;
        padding-top: 10px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .menu_principal nav.navbar.navbar-custom {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .navbar-custom.ulif-navbar-scrolled {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .navbar-custom .navbar-collapse {
        display: none !important;
    }

    .desktop_header_actions {
        display: none !important;
    }

    .ulif_header_flow_spacer {
        height: 52px !important;
    }

    .ulif_mobile_menu_btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        min-width: 34px;
        padding: 0;
        border-radius: 6px;
    }

    .mobile_lang_action,
    .mobile_login_link {
        display: none !important;
    }

    .mobile_header_actions {
        gap: 0;
    }

    .logo_menu {
        width: 44px;
    }
}

/* Interrupteur pill FR/EN partagé entre header mobile et desktop. */
.ulif_lang_toggle {

    display: inline-flex; /* Centre le switch pill dans son emplacement du header. */

    padding: 0; /* Retire le padding des liens classiques pour le switch personnalisé. */

    text-decoration: none; /* Supprime le soulignement par défaut du lien. */

}

.ulif_lang_toggle:hover,

.ulif_lang_toggle:focus {

    border-bottom: none; /* Empêche le soulignement standard du menu sur le switch langue. */

    opacity: 0.96; /* Donne un retour visuel léger au survol sans décaler le composant. */

    outline: none; /* Retire le contour navigateur tout en gardant le lien cliquable. */

    text-decoration: none; /* Conserve l'absence de soulignement au survol. */

}

.ulif_lang_toggle_track {

    align-items: center; /* Centre verticalement les libellés FR et EN dans le pill. */

    background-color: #FFFFFF; /* Reprend le fond blanc du switch de référence. */

    border-radius: 8px; /* Aligne le radius avec les boutons du site. */

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); /* Ajoute une légère profondeur comme sur la maquette. */

    display: grid; /* Place FR et EN côte à côte de façon symétrique. */

    grid-template-columns: 1fr 1fr; /* Répartit équitablement l'espace entre FR et EN. */

    height: 34px; /* Fixe une hauteur compacte adaptée au header. */

    min-width: 92px; /* Garantit une largeur confortable pour les deux libellés. */

    padding: 3px; /* Laisse une marge interne autour du curseur orange. */

    position: relative; /* Permet de positionner le curseur orange en absolu. */

}

.ulif_lang_toggle_thumb {

    background-color: #E09620; /* Utilise l'orange de la charte ULiF pour la langue active. */

    border-radius: 6px; /* Radius cohérent avec le conteneur du switch langue. */

    box-shadow: 0 1px 4px rgba(224, 150, 32, 0.35); /* Accentue légèrement le curseur actif. */

    height: calc(100% - 6px); /* Aligne la hauteur du curseur avec la piste interne. */

    left: 3px; /* Positionne le curseur sur le côté gauche par défaut (FR actif). */

    position: absolute; /* Permet le glissement du curseur entre FR et EN. */

    top: 3px; /* Centre le curseur verticalement dans la piste. */

    transition: transform 0.25s ease; /* Anime le glissement du curseur sans modifier les marges. */

    width: calc(50% - 3px); /* Occupe exactement la moitié gauche ou droite du switch. */

    z-index: 1; /* Place le curseur orange sous les libellés mais au-dessus du fond blanc. */

}

.ulif_lang_toggle.is-en .ulif_lang_toggle_thumb {

    transform: translateX(100%); /* Déplace le curseur vers EN quand l'anglais est actif. */

}

.ulif_lang_toggle_label {

    color: #333333; /* Utilise le gris foncé ULiF pour la langue inactive. */

    font-family: Candara, sans-serif; /* Aligne la typo du switch avec le menu principal. */

    font-size: 12px; /* Garde un libellé compact dans le header. */

    font-weight: bold; /* Reproduit le texte gras de la maquette. */

    letter-spacing: 0.05em; /* Améliore la lisibilité des codes FR et EN. */

    line-height: 1; /* Évite tout décalage vertical des libellés dans le pill. */

    position: relative; /* Place les libellés au-dessus du curseur orange. */

    text-align: center; /* Centre chaque code langue dans sa moitié du switch. */

    transition: color 0.25s ease; /* Anime la couleur du libellé actif sans décaler la mise en page. */

    z-index: 2; /* Garde les libellés visibles au-dessus du curseur orange. */

}

.ulif_lang_toggle.is-fr .ulif_lang_toggle_label-fr,

.ulif_lang_toggle.is-en .ulif_lang_toggle_label-en {

    color: #FFFFFF; /* Affiche en blanc la langue actuellement sélectionnée sur le curseur orange. */

}



.nav-item

{

    /*border-bottom: 3px solid #53893d;*/

    font-family: Candara;

    font-size: medium;

}







.app_d_menu

{

    width: 140px;

}



.lg_menu

{

    width: 36px;

}

.button_menu

{

    background-color: #fff;

    color:  #53893d;

    border-radius: 40px;

    font-size: small;

}



.mobile_cs

{

    width: 453px;

    height: 479px;

    margin-top: 40px;

}



.mobile_cs_xs

{

    width: 300px;

    height: 300px;

    margin-top: -10px;

    margin-bottom: 100px;

}



.image_accueil

{

    width: 100%;

    height: 479px;

    margin-top: 40px;

    margin-left: -30px;

}



.cadre_video

{

    border-radius: 10px;

    border: 5px solid #E09620;

}



/* suzy et ivan tache mobapp 45 — Animation intro : panneau blanc monte ; menu descend du haut ; hero monte du bas (douceur). */

/* suzy tache mobapp 45 — Intro accueil : panneau blanc monte doucement, recouvre navbar + hero, puis éléments réapparaissent dessus. */

.ulif_home_intro_overlay

{

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 0;

    z-index: 1040;

    pointer-events: none;

    background: #FFFFFF;

    opacity: 1;

    transform: scaleY(0);

    transform-origin: bottom center;

    will-change: transform;

    transition: transform 2.8s cubic-bezier(0.12, 1, 0.24, 1);

    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.06);

}



body.ulif-home-intro.ulif-home-intro-gradient-in .ulif_home_intro_overlay

{

    transform: scaleY(1);

}



body.ulif-home-intro.ulif-home-intro-gradient-out .ulif_home_intro_overlay

{

    opacity: 0;

    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);

}



body.ulif-home-intro.ulif-home-intro-blocks-dropping .menu_principal,

body.ulif-home-intro.ulif-home-intro-blocks-dropping .section_accueil_hero_v2

{

    z-index: 1050;

}

body.ulif-home-intro.ulif-home-intro-blocks-dropping .menu_principal
{
    z-index: 1060;
}



body.ulif-home-intro.ulif-home-intro-blocks-dropping .menu_principal .navbar.fixed-top

{

    z-index: 1050;

}



body.ulif-home-intro-blocks-dropping .ulif_home_intro_block

{

    transform: translateY(calc(-1 * var(--ulif-intro-drop-offset, 100vh)));

    transition: transform 2.8s cubic-bezier(0.12, 1, 0.24, 1);

    will-change: transform;

}



body.ulif-home-intro-blocks-dropping .ulif_home_intro_block--settled

{

    transform: translateY(0);

}



body.ulif-home-intro .menu_principal,

body.ulif-home-intro .section_accueil_hero_v2

{

    position: relative;

    z-index: 1030;

}

/* Le menu doit rester au-dessus du hero : le drawer mobile est dans .menu_principal. */
body.ulif-home-intro .menu_principal
{
    z-index: 1060;
}

body.ulif-home-intro.ulif-home-intro-staggering .menu_principal,

body.ulif-home-intro.ulif-home-intro-staggering .section_accueil_hero_v2

{

    z-index: 1050;

}

body.ulif-home-intro.ulif-home-intro-staggering .menu_principal
{
    z-index: 1060;
}

/* Après l'intro, ne plus créer de contexte d'empilement qui masque le drawer. */
body.ulif-home-intro-done .menu_principal,
body.ulif-home-intro-done .section_accueil_hero_v2
{
    z-index: auto;
}

/* Filet de sécurité : drawer ouvert toujours au-dessus du contenu de page. */
body.ulif-mobile-drawer-open .menu_principal
{
    position: relative;
    z-index: 1100;
}



/* États de départ sans transition (évite le drop puis correction). */
body.ulif-home-intro.ulif-home-intro-staggering .ulif_home_intro_item

{

    /* Ne jamais forcer position: relative ici : ça casse le fixed de la navbar
       et décale tout le hero jusqu'à la fin de l'intro. */
    z-index: 1055;

    opacity: 0;

    transition: none;

}



/* La navbar reste fixed pendant toute l'intro (pas de push du hero). */
body.ulif-home-intro.ulif-home-intro-staggering .menu_principal nav.navbar.ulif_home_intro_item

{

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100%;

}



body.ulif-home-intro.ulif-home-intro-staggering .ulif_home_intro_item--from-top

{

    transform: translate3d(0, -20px, 0);

}



/* Spécificité > .navbar-custom.ulif-navbar-at-top { transform: translateZ(0) }. */
body.ulif-home-intro.ulif-home-intro-staggering .menu_principal nav.navbar.ulif_home_intro_item--from-top:not(.ulif_home_intro_item--visible)

{

    transform: translate3d(0, -24px, 0);

}



body.ulif-home-intro.ulif-home-intro-staggering .ulif_home_intro_item--from-bottom

{

    transform: translate3d(0, 16px, 0);

}



/* Transitions activées seulement après armement JS (reflow). */
body.ulif-home-intro.ulif-home-intro-staggering.ulif-home-intro-armed .ulif_home_intro_item

{

    transition: opacity 1.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.55s cubic-bezier(0.22, 0.61, 0.36, 1);

    will-change: opacity, transform;

}



body.ulif-home-intro.ulif-home-intro-staggering.ulif-home-intro-armed .ulif_home_intro_item--nav

{

    /* Remplace le transition du .navbar-custom (fond/padding) pour autoriser opacity+transform. */
    transition: opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) !important;

}



body.ulif-home-intro.ulif-home-intro-staggering.ulif-home-intro-armed .ulif_home_intro_item--hero

{

    transition: opacity 1.5s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);

}



body.ulif-home-intro.ulif-home-intro-staggering.ulif-home-intro-armed .ulif_home_intro_item--hero-video,
body.ulif-home-intro.ulif-home-intro-staggering.ulif-home-intro-armed .hero_enlango_subtitle.ulif_home_intro_item,
body.ulif-home-intro.ulif-home-intro-staggering.ulif-home-intro-armed .hero_cta_wrap.ulif_home_intro_item,
body.ulif-home-intro.ulif-home-intro-staggering.ulif-home-intro-armed .hero_stats_row.ulif_home_intro_item

{

    transition: opacity 1.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.7s cubic-bezier(0.22, 0.61, 0.36, 1);

}



.hero_enlango_title .ulif_home_intro_word

{

    display: inline-block;

    margin-right: 0.26em;

}



.hero_enlango_title .hero_title_accent_word

{

    /* Landing mobile + web : mots d’accent (« la », « liberté », typewriter) en orange ULiF. */
    color: #E09620;

    font-family: Georgia, 'Times New Roman', Times, serif;

    font-style: italic;

    font-weight: 700;

}



.hero_typewriter_slot
{
    display: inline-block;
    vertical-align: baseline;
    position: relative;
}

/* Mot invisible qui fixe largeur + hauteur/baseline ; le texte animé est superposé. */
.hero_typewriter_sizer
{
    display: inline-block;
    visibility: hidden;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.hero_typewriter_word
{
    white-space: nowrap;
}

/* Landing mobile + web : cycle typewriter orange — l’effacement / réécriture reste géré en JS. */
.hero_typewriter_cycle
{
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    line-height: inherit;
    white-space: nowrap;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #E09620;
    color: #E09620;
}

.hero_typewriter_word.hero_typewriter_active::after
{
    content: '|';
    display: inline;
    margin-left: 2px;
    color: #E09620;
    -webkit-text-fill-color: #E09620;
    animation: hero_typewriter_cursor 0.85s step-end infinite;
}



@keyframes hero_typewriter_cursor

{

    0%, 100% { opacity: 1; }

    50% { opacity: 0; }

}



body.ulif-home-intro.ulif-home-intro-staggering .ulif_home_intro_item.ulif_home_intro_item--visible

{

    opacity: 1;

    transform: translate3d(0, 0, 0);

}



body.ulif-home-intro.ulif-home-intro-staggering .menu_principal .navbar.fixed-top

{

    z-index: 1050;

}



body.ulif-home-intro.ulif-home-intro-staggering .menu_principal nav.navbar.ulif_home_intro_item.ulif_home_intro_item--visible

{

    opacity: 1;

    transform: translate3d(0, 0, 0);

}



body.ulif-home-intro:not(.ulif-home-intro-done)

{

    overflow-x: hidden;

}



body.ulif-home-intro-done .ulif_home_intro_overlay

{

    display: none;

}



body.ulif-home-intro-done .ulif_home_intro_item

{

    opacity: 1;

    transform: none;

    transition: none;

    will-change: auto;

}



@media (prefers-reduced-motion: reduce)

{

    .ulif_home_intro_overlay

    {

        display: none !important;

    }

    body.ulif-home-intro .ulif_home_intro_item

    {

        opacity: 1 !important;

        transform: none !important;

    }



    body.ulif-home-intro .ulif_home_intro_block

    {

        transform: none !important;

        transition: none !important;

    }

    body.ulif-home-intro .hero_enlango_zone,
    body.ulif-home-intro .hero_enlango_visual,
    body.ulif-home-intro .menu_principal nav.navbar,
    body.ulif-home-intro .hero_enlango_title .ulif_home_intro_word,
    body.ulif-home-intro .ulif_home_intro_avatars,
    body.ulif-home-intro .hero_enlango_subtitle,
    body.ulif-home-intro .hero_cta_wrap,
    body.ulif-home-intro .hero_stats_row
    {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

}



/* Empêche le flash de contenu avant le démarrage de la séquence intro.
   Navbar : une fois --visible, cette règle ne doit plus gagner (sinon snap en fin d'intro). */
body.ulif-home-intro:not(.ulif-home-intro-done) .menu_principal nav.navbar:not(.ulif_home_intro_item--visible),
body.ulif-home-intro:not(.ulif-home-intro-done) .hero_enlango_title .ulif_home_intro_word:not(.ulif_home_intro_item--visible),
body.ulif-home-intro:not(.ulif-home-intro-done) .ulif_home_intro_avatars:not(.ulif_home_intro_item--visible),
body.ulif-home-intro:not(.ulif-home-intro-done) .hero_enlango_subtitle:not(.ulif_home_intro_item--visible),
body.ulif-home-intro:not(.ulif-home-intro-done) .hero_enlango_visual:not(.ulif_home_intro_item--visible),
body.ulif-home-intro:not(.ulif-home-intro-done) .hero_cta_wrap:not(.ulif_home_intro_item--visible),
body.ulif-home-intro:not(.ulif-home-intro-done) .hero_stats_row:not(.ulif_home_intro_item--visible)
{
    opacity: 0;
}

body.ulif-home-intro.ulif-home-intro-staggering .menu_principal nav.navbar.ulif_home_intro_item.ulif_home_intro_item--visible,
body.ulif-home-intro.ulif-home-intro-staggering .ulif_home_intro_item.ulif_home_intro_item--visible,
body.ulif-home-intro-done .menu_principal nav.navbar,
body.ulif-home-intro-done .hero_enlango_title .ulif_home_intro_word,
body.ulif-home-intro-done .ulif_home_intro_avatars,
body.ulif-home-intro-done .hero_enlango_subtitle,
body.ulif-home-intro-done .hero_enlango_visual,
body.ulif-home-intro-done .hero_cta_wrap,
body.ulif-home-intro-done .hero_stats_row
{
    opacity: 1;
}

/* Intro accueil : animations granulaires gérées via .ulif_home_intro_item. */
.hero_avatar_stack.ulif_home_intro_avatars
{
    display: inline-flex;
    vertical-align: middle;
}



/* suzy et ivan tache mobapp 45 — Styles hero accueil v2 : layout deux colonnes, badge confiance, titre serif accent, stats, cartes flottantes, vidéo réduite (design inspiré enlango, couleurs ULiF). */

.section_accueil_hero_v2.bg_principal

{
    background-image: none;
    background-color: #FFFFFF;
    padding-top: 48px;
    padding-bottom: 72px;
}

.bg_principal.pay-page

{
    background-color: rgba(224, 150, 32, 0.14) !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    background-position: center center !important;
    padding-bottom: 40px;
}

.bg_principal.pay-page.affiliation-page

{
    background-image: none !important;
    background-color: #E09620 !important;
    color: #ffffff;
}

/* make checkbox accent orange instead of default blue */
input[type="checkbox"].form-check-input,
input[type="checkbox"] {
    accent-color: #E09620;
}



.hero_enlango_row

{

    min-height: 520px;

    align-items: flex-start !important;

}



.hero_enlango_content

{

    padding-right: 24px;

}



.hero_enlango_title
{
    margin-top: 0;
    margin-bottom: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(1.75rem, 3.2vw, 2.65rem);
    font-weight: 800;
    line-height: 1.2;
    text-transform: none;
    color: #1A1A1A;
    letter-spacing: -0.02em;
}



.hero_title_accent

{

    color: #E09620;

    font-family: Georgia, 'Times New Roman', Times, serif;

    font-style: italic;

    font-weight: 700;

}



.hero_avatar_stack

{

    display: inline-flex;

    align-items: center;

    vertical-align: middle;

    margin: 0 6px;

}



.hero_avatar_item

{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    margin-left: -10px;

    border: 2px solid #FFFFFF;

    border-radius: 50%;

    background: linear-gradient(135deg, #F5C067 0%, #E09620 100%);

    color: #FFFFFF;

    font-size: 0.75rem;

    box-shadow: 0 2px 8px rgba(224, 150, 32, 0.35);

}



.hero_avatar_item:first-child

{

    margin-left: 0;

}



.hero_enlango_subtitle

{

    max-width: 480px;

    margin-bottom: 28px;

    font-size: 1.05rem;

    line-height: 1.65;

    color: #666666;

}



.hero_cta_wrap

{

    margin-bottom: 36px;

}



/* CTA en bas du hero — à gauche sur PC, centré sur mobile. */
.hero_cta_wrap--under-video,

.hero_cta_wrap--hero-bottom

{

    position: relative;

    z-index: 5;

    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    justify-content: center;

    align-items: center;

    width: 100%;

    flex: 0 0 100%;

    max-width: 100%;

    margin-top: 28px;

    margin-bottom: 0;

    padding-left: 15px;

    padding-right: 15px;

    text-align: center;

}



@media (min-width: 992px)

{

    .hero_cta_wrap--under-video,

    .hero_cta_wrap--hero-bottom

    {

        justify-content: flex-start;

        text-align: left;

        margin-top: 36px;

        margin-bottom: 8px;

        padding-left: 15px;

        padding-right: 15px;

    }

}



.section_accueil_hero_v2 .hero_cta_wrap--under-video .hero_btn_cta,

.section_accueil_hero_v2 a.btn.hero_btn_cta

{

    display: inline-flex !important;

    visibility: visible !important;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 240px;

    padding: 14px 32px;

    background: #E09620 !important;

    background-color: #E09620 !important;

    background-image: none !important;

    border: 2px solid #E09620 !important;

    border-radius: 8px !important;

    color: #FFFFFF !important;

    font-size: 1rem;

    font-weight: 700;

    text-decoration: none !important;

    text-shadow: none !important;

    opacity: 1 !important;

    box-shadow: 0 10px 28px rgba(224, 150, 32, 0.4);

}



.section_accueil_hero_v2 .hero_cta_wrap--under-video .hero_btn_cta:hover,

.section_accueil_hero_v2 .hero_cta_wrap--under-video .hero_btn_cta:focus,

.section_accueil_hero_v2 a.btn.hero_btn_cta:hover,

.section_accueil_hero_v2 a.btn.hero_btn_cta:focus

{

    background: #C8841A !important;

    background-color: #C8841A !important;

    border-color: #C8841A !important;

    color: #FFFFFF !important;

    text-decoration: none !important;

    animation: hero_cta_zoom_glow 1.6s ease-in-out infinite;

}



.section_accueil_hero_v2 .hero_btn_cta::before,

.section_accueil_hero_v2 a.btn.hero_btn_cta::before

{

    content: none !important;

    display: none !important;

    border: 0 !important;

    animation: none !important;

}



.section_accueil_hero_v2 .hero_cta_wrap--under-video .hero_btn_cta_arrow,

.section_accueil_hero_v2 .hero_cta_wrap--under-video .hero_btn_cta_arrow .fa

{

    color: #FFFFFF !important;

}



.hero_btn_cta

{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 240px;

    padding: 14px 32px;

    background-color: #E09620;

    border: 2px solid #E09620;

    border-radius: 8px;

    color: #FFFFFF;

    font-size: 1rem;

    font-weight: 600;

    text-transform: none;

    letter-spacing: 0;

    position: relative;

    z-index: 0;

    overflow: visible;

    /* Pas de cadre extérieur : lumière uniquement au survol. */
    animation: none;

    transform: scale(1);

    transform-origin: center center;

    box-shadow: 0 8px 22px rgba(224, 150, 32, 0.28);

    transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.25s ease, border-color 0.25s ease;

}



/* Ancienne bordure carrée externe désactivée. */
.hero_btn_cta::before

{

    content: none !important;

    display: none !important;

    animation: none !important;

    border: 0 !important;

    box-shadow: none !important;

}



.hero_btn_cta_arrow

{

    display: inline-flex;

    align-items: center;

    font-size: 0.95rem;

    transition: transform 0.25s ease;

    animation: none;

    transform: none;

}



@keyframes hero_cta_arrow_nudge

{

    0%, 100% { transform: translateX(0); }

    50% { transform: translateX(5px); }

}



@keyframes hero_cta_zoom_glow

{

    0%, 100% {

        transform: scale(1);

        box-shadow: 0 8px 24px rgba(224, 150, 32, 0.35), 0 0 14px rgba(255, 200, 100, 0.25);

    }

    50% {

        transform: scale(1.06);

        box-shadow: 0 14px 34px rgba(224, 150, 32, 0.52), 0 0 28px rgba(255, 215, 120, 0.55), 0 0 44px rgba(224, 150, 32, 0.22);

    }

}



@keyframes hero_cta_border_glow

{

    0%, 100% {

        opacity: 0.35;

        transform: scale(1);

    }

    50% {

        opacity: 0.95;

        transform: scale(1.08);

    }

}



/* Hover CTA : effet lumière / zoom uniquement sur le bouton (pas de cadre). */
.hero_btn_cta:hover,

.hero_btn_cta:focus

{

    background-color: #C8841A;

    color: #FFFFFF;

    animation: hero_cta_zoom_glow 1.6s ease-in-out infinite;

    border-color: #C8841A;

}



.hero_btn_cta:hover::before,

.hero_btn_cta:focus::before

{

    content: none !important;

    display: none !important;

    animation: none !important;

}



.hero_btn_cta:hover .hero_btn_cta_arrow,

.hero_btn_cta:focus .hero_btn_cta_arrow

{

    animation: hero_cta_arrow_nudge 1s ease-in-out infinite;

}



.hero_stats_row

{

    display: flex;

    flex-wrap: nowrap;

    align-items: flex-start;

    gap: 16px 24px;

    width: 100%;

}



.hero_stat_item

{

    display: flex;

    flex: 1 1 0;

    flex-direction: column;

    align-items: center;

    text-align: center;

    min-width: 0;

}



.hero_stat_value

{

    display: block;

    width: 100%;

    font-size: 1.75rem;

    font-weight: 800;

    line-height: 1.1;

    color: #1A1A1A;

    text-align: center;

}



.hero_stat_label

{

    margin-top: 4px;

    font-size: 0.85rem;

    color: #888888;

    line-height: 1.3;

    white-space: nowrap;

    text-align: center;

}



.hero_enlango_visual

{

    position: relative;

    padding-left: 12px;

    overflow: visible;

}



.hero_visual_wrapper

{

    position: relative;

    max-width: 92%;

    margin: 0 auto;

    padding: 0 0 40px;

    overflow: visible;

}



.hero_video_frame.image_accueil

{

    position: relative;

    z-index: 1;

    width: 100%;

    height: auto;

    margin-top: 0;

    margin-left: 0;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);

}



.hero_cadre_video.cadre_video

{

    border: none;

    border-radius: 24px;

}



.hero_float_badges_top

{

    position: absolute;

    top: 12px;

    right: 12px;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 8px;

}



.hero_float_pill

{

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 14px;

    background: #FFFFFF;

    border-radius: 999px;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    font-size: 0.78rem;

    font-weight: 600;

    color: #333333;

    white-space: nowrap;

    /* Flottement continu au-dessus de la vidéo. */
    animation: hero_float_continuous 3.2s ease-in-out infinite;

    will-change: transform;

}



.hero_float_badges_top .hero_float_pill:nth-child(1)

{

    animation-delay: 0s;

}



.hero_float_badges_top .hero_float_pill:nth-child(2)

{

    animation-delay: 0.55s;

}



.hero_float_pill .fa-check-circle

{

    color: #E09620;

}



.hero_float_card

{

    position: absolute;

    z-index: 3;

    border-radius: 12px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

}



.hero_float_card_accent

{

    padding: 12px 16px;

    background: #E09620;

    color: #FFFFFF;

    font-size: 0.8rem;

    font-weight: 600;

    line-height: 1.35;

    max-width: 180px;

}



.hero_float_card_bottom

{

    bottom: 12px;

    right: -12px;

    max-width: 200px;

    /* Flottement décalé pour le 3e élément arrondi. */
    animation: hero_float_continuous 3.6s ease-in-out infinite;

    animation-delay: 1.1s;

    will-change: transform;

}



@keyframes hero_float_continuous

{

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-12px); }

}



@media (prefers-reduced-motion: reduce)

{

    .hero_float_pill,

    .hero_float_card_bottom,

    .hero_typewriter_word.hero_typewriter_active::after,

    .hero_btn_cta,

    .hero_btn_cta::before,

    .hero_btn_cta_arrow

    {

        animation: none;

    }

}



.section_accueil_hero_v2 .titre_section_principal

{

    margin-top: 0;

}



#mobile_app_bg > svg {

    display: block;

}



.navbar-toggler

{

    color: red !important;

}





.bg_principal

{

    background-color: #F9F9F9;

    padding-bottom: 60px;

    background-image: url("../assets/img/bg_principal.png");

    background-size: cover;

}



.titre_section_principal

{

    margin-top: 120px;

    font-family: Candara;

    font-weight: bold;

    text-transform: uppercase;

    font-size: x-large;

}



.texte_middle_p1

{

    color: #47890E;

}



.texte_middle_p2

{

    color: #E09620;

}



.img_fleche

{

    width: 21px;

    height: 219px;

    margin-left: 10px;

}



.img_join_us

{

    width: 220px;

    height: 50px;

}



.btn_join_us

{

    margin-top: 20px;

    background-color: #333333;

    font-size: medium;

    border-radius: 8px;

    color: white;

    font-weight: 500;

    width: 220px;

    /*box-shadow: -1px 5px 6px 0px rgba(0,0,0,0.75);*/

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

    text-transform: none; /* Garde « ulif.app » en minuscules dans le CTA */

}



.btn_join_us:hover

{

    color: #fff;

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);



}



.btn_connexion

{

    background-color: #FFFFFF;

    border-radius: 8px;

    color: #E09620;

    font-weight: 500;

    width: 150px;

    text-transform: uppercase;

    font-size: small;

    white-space: nowrap;

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

}



.btn_connexion:hover

{

    color: #333333;

    transform: scale(1.02);

    -moz-transform: scale(1.02);

    -webkit-transform: scale(1.02);

    -ms-transform: scale(1.02);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}







/* CSS SECTION CATEGORIES POPULAIRES */



.titre_section

{

    font-family: Candara;

    font-weight: bold;

    text-transform: uppercase;

    margin-top: 30px;

    font-size: x-large;

}



.sous_titre

{

    font-size: small;

    color: #53893d;

    font-family: Candara;

}



.trait

{

    border-bottom: 5px solid #dc8d00;

    width: 8%;

    border-radius: 10px;

}



.trait_long

{

    border-bottom: 4px solid #dc8d00;

    width: 10%;

}



.box_cat

{

    padding: 10px;

}



.icone_cat_pop

{

    width: 80%;

    height: 150px;

    border-radius: 20px;

    margin-top: 50px;

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

}



.icone_cat_pop:hover

{

    /*border: 3px solid #E09620;*/

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}



.description_cat_pop

{

    text-transform: uppercase;

    color: #E09620;

    font-weight: 600;

    /*text-align: center;*/

    margin-top: 15px;

    font-size: large;

}



.lien_categorie

{

    color: #333333;

}



.lien_categorie:hover

{

    text-decoration: none;

    color: #333333;

}



.ombre

{

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23);



    -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16);

    -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16);

}



/********************** CSS DE LA SECTION DES COURS POPULAIRES ****************/

/* Ticket: MOBAPP-45 | Responsables: Ivan Asegning et Suzy Noumbissi — ajustements section cours / CTA home */


.section_cours

{

    background-color: #F9F9F9; /* Fond section cours conserve */

    padding-bottom: 60px; /* Padding bas conserve pour autres pages */

    background-image: url("../assets/img/bg_cours.png"); /* Background existant conserve */

    background-size: cover; /* Couverture fond conservee */

background-color: #F9F9F9; /* suzy tache mobapp 45 — Fond section cours conserve */

    padding-bottom: 60px; /* suzy tache mobapp 45 — Padding bas conserve pour autres pages */

    background-image: url("../assets/img/bg_cours.png"); /* suzy tache mobapp 45 — Background existant conserve */

    background-size: cover; /* suzy tache mobapp 45 — Couverture fond conservee */

}



.section_cours.ulif-section-fit

{

    padding-bottom: 0; /* Padding bas home gere par ulif-section-fit uniquement */

}



.img_cours

{

    height: 300px;

    border-bottom: 1px solid #707070;

}



.titre_cours

{

    text-transform: uppercase;

    font-weight: 650;

    text-align: left;

    font-size: medium;

}



.auteur

{

    text-transform: uppercase;

    font-weight: 650;

    text-align: left;

    font-size: small;

}



.cours_description

{

    font-size: small;

}



.btn_cours

{

    text-transform: uppercase;

    font-size: x-small;

    font-weight: bold;

    color: #333333;

}



.prix_cours

{

    text-transform: uppercase;

    color: #E09620;

    font-weight: bold;

    font-size: large;

    text-align: left;

}



.etiquette_cours

{

    background-color: #E09620;

    padding: 5px;

    text-transform: uppercase;

    position: absolute;

    border-radius: 5px;

    color: white;

    font-weight: bold;

    font-size: small;

    left: 10px;

    top: 20px;

}



.carte_cours

{

    margin-top: 50px;

    margin-left: 10%;

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

}



.carte_cours:hover

{

    /*border: 3px solid #E09620;*/

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}





.carte_cours:nth-child(1)

{

    margin-left: 0%;

}



.btn_consult_courses

{

    background-color: #E09620; /* Orange charte CTA */

    border-radius: 8px; /* Leger radius conserve */

    color: white; /* Texte blanc CTA */

    display: inline-block; /* Meme comportement que le hero */

    min-width: 240px; /* Base CTA hero */

    font-weight: 600; /* Poids CTA hero */

    width: auto; /* Largeur auto */

    margin-top: clamp(0.35rem, 0.8vh, 0.7rem); /* Redonne de la respiration sous les livres */

    text-transform: none; /* Meme style texte que le hero */

    letter-spacing: 0; /* Hero CTA */

    font-size: 1rem; /* Meme taille que le hero */

    box-shadow: 0 8px 24px rgba(224, 150, 32, 0.35); /* Ombre hero */

    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; /* Transition hero */

    padding: 0.8rem 1.6rem; /* Padding hero adapte */

background-color: #E09620; /* suzy tache mobapp 45 — Orange charte CTA */

    border-radius: 50px; /* suzy tache mobapp 45 — Forme pilule */

    color: white; /* suzy tache mobapp 45 — Texte blanc CTA */

    font-weight: 500; /* suzy tache mobapp 45 — Poids CTA */

    width: auto; /* suzy tache mobapp 45 — Largeur auto */

    margin-top: clamp(0.5rem, 1.5vh, 1.25rem); /* suzy tache mobapp 45 — Marge haute adaptee viewport */

    text-transform: none; /* Garde « ulif.app » en minuscules dans le CTA */

    font-size: clamp(0.75rem, 2vw, 1rem); /* suzy tache mobapp 45 — Taille CTA fluide */

    transition: transform 500ms ease-in-out, box-shadow 500ms linear; /* suzy tache mobapp 45 — Transition CTA */

    padding: 0.55rem 1.25rem; /* suzy tache mobapp 45 — Padding CTA compact viewport */

}



.btn_consult_courses:hover

{

    background-color: #C8841A; /* Hover hero */

    color: white;

    transform: translateY(-2px);

    -moz-transform: translateY(-2px);

    -webkit-transform: translateY(-2px);

    -ms-transform: translateY(-2px);

    box-shadow: 0 12px 28px rgba(224, 150, 32, 0.42);

}



/******** SECTION TEMOIGNAGES*******/



.section_temoignages

{

    position: relative;

    padding: 64px 0 16px;

    overflow: hidden;

    background: linear-gradient(165deg, rgba(224, 150, 32, 0.04) 0%, #FFFFFF 30%, #FAFAFA 60%, rgba(26, 26, 26, 0.03) 100%);

}



.section_temoignages__inner

{

    position: relative;

    z-index: 2;

}



.temoignages

{

    padding-bottom: 10px;

}



.titre_section_colore

{

    font-size: x-large;

    font-family: Candara;

    font-weight: bold;

    text-transform: uppercase;

    margin-top: 30px;

    color: #E09620;

}



/* suzy tache mobapp 45 — Témoignages accueil : titre centré, fond blanc, cartes et couleurs harmonisées charte ULiF. */

.section_temoignages .ulif_testi_header_row

{

    margin-bottom: 12px;

}



.section_temoignages .titre_section_colore

{

    text-align: center;

    color: #E09620;

}



.section_temoignages .trait_long

{

    width: 72px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 12px;

    border-bottom: 4px solid #E09620;

    background-color: transparent;

}



.section_temoignages .slick-dots li button:before

{

    color: #CCCCCC;

}



.section_temoignages .slick-dots li.slick-active button:before

{

    color: #E09620;

}



.section_temoignages .carte_temoignage

{

    border-radius: 14px;

    background-color: #FAFAFA;

    border: 2px solid rgba(224, 150, 32, 0.55);

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);

    padding: 22px 20px 18px;

    margin-top: 32px;

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

}



.section_temoignages .carte_temoignage:hover

{

    transform: translateY(-4px);

    border-color: rgba(224, 150, 32, 0.35);

    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);

}



.section_temoignages .titre_temoignage

{

    color: #1A1A1A;

    font-weight: 600;

    font-size: 1.05rem;

    margin-bottom: 12px;

}



.section_temoignages .carte_temoignage .card-text

{

    color: #555555;

    font-size: 0.92rem;

    line-height: 1.7;

}



.section_temoignages .modal-trigger

{

    color: #E09620;

    background: rgba(224, 150, 32, 0.12);

    border-radius: 50%;

    width: 30px;

    height: 30px;

    padding: 0;

    line-height: 30px;

    text-align: center;

    vertical-align: middle;

    transition: background-color 0.25s ease, transform 0.25s ease;

}



.section_temoignages .modal-trigger:hover

{

    background: rgba(224, 150, 32, 0.22);

    transform: translateY(2px);

    color: #C88400;

}



.section_temoignages .img_temoignage

{

    border: 2px solid rgba(224, 150, 32, 0.45);

}



.section_temoignages .auteur_t

{

    color: #E09620;

}



.section_temoignages .profession

{

    color: #777777;

}



/* suzy tache mobapp 45 — Témoignages : fils orange/noir doublés (haut gauche + bas droite), visibilité renforcée. */

.section_temoignages .ulif_testi_threads

{

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 1;

    overflow: hidden;

}



.section_temoignages .ulif_testi_thread

{

    position: absolute;

    border-radius: 50%;

    opacity: 0.18;

}



/* Haut gauche — fils orange */

.section_temoignages .ulif_testi_thread--1

{

    width: 420px;

    height: 420px;

    top: -140px;

    left: -110px;

    border: 2px solid rgba(224, 150, 32, 0.22);

    border-top-color: transparent;

    border-right-color: transparent;

    transform: rotate(-14deg);

    box-shadow: 0 0 24px rgba(224, 150, 32, 0.2);

    animation: ulif_testi_thread_drift 15s ease-in-out infinite;

}



.section_temoignages .ulif_testi_thread--2

{

    width: 280px;

    height: 280px;

    top: 20px;

    left: -60px;

    border: 4px solid rgba(224, 150, 32, 0.72);

    border-bottom-color: transparent;

    border-left-color: transparent;

    animation: ulif_testi_thread_drift 12s ease-in-out infinite reverse;

}



.section_temoignages .ulif_testi_thread--3

{

    width: 170px;

    height: 170px;

    top: 8%;

    left: 6%;

    border: 2px dashed rgba(224, 150, 32, 0.18);

    animation: ulif_testi_thread_drift 10s ease-in-out infinite;

}



/* Haut gauche — fils noirs doublés */

.section_temoignages .ulif_testi_thread--6

{

    width: 380px;

    height: 380px;

    top: -115px;

    left: -80px;

    border: 2px solid rgba(26, 26, 26, 0.14);

    border-top-color: transparent;

    border-right-color: transparent;

    transform: rotate(-8deg);

    animation: ulif_testi_thread_drift 17s ease-in-out infinite reverse;

}



.section_temoignages .ulif_testi_thread--7

{

    width: 240px;

    height: 240px;

    top: 48px;

    left: -35px;

    border: 2px solid rgba(26, 26, 26, 0.12);

    border-bottom-color: transparent;

    border-left-color: transparent;

    animation: ulif_testi_thread_drift 13s ease-in-out infinite;

}



.section_temoignages .ulif_testi_thread--8

{

    width: 130px;

    height: 130px;

    top: 13%;

    left: 11%;

    border: 2px dashed rgba(26, 26, 26, 0.11);

    animation: ulif_testi_thread_drift 11s ease-in-out infinite reverse;

}



/* Bas droite — fils orange */

.section_temoignages .ulif_testi_thread--4

{

    width: 460px;

    height: 460px;

    bottom: -180px;

    right: -120px;

    border: 2px solid rgba(224, 150, 32, 0.2);

    border-bottom-color: transparent;

    border-left-color: transparent;

    transform: rotate(18deg);

    box-shadow: 0 0 28px rgba(224, 150, 32, 0.18);

    animation: ulif_testi_thread_drift 17s ease-in-out infinite reverse;

}



.section_temoignages .ulif_testi_thread--5

{

    width: 230px;

    height: 230px;

    bottom: 12%;

    right: 3%;

    border: 2px dashed rgba(224, 150, 32, 0.16);

    animation: ulif_testi_thread_drift 13s ease-in-out infinite;

}



/* Bas droite — fils noirs doublés */

.section_temoignages .ulif_testi_thread--9

{

    width: 420px;

    height: 420px;

    bottom: -155px;

    right: -90px;

    border: 2px solid rgba(26, 26, 26, 0.13);

    border-bottom-color: transparent;

    border-left-color: transparent;

    transform: rotate(24deg);

    animation: ulif_testi_thread_drift 19s ease-in-out infinite;

}



.section_temoignages .ulif_testi_thread--10

{

    width: 190px;

    height: 190px;

    bottom: 16%;

    right: 7%;

    border: 2px dashed rgba(26, 26, 26, 0.1);

    animation: ulif_testi_thread_drift 14s ease-in-out infinite reverse;

}



.section_temoignages .ulif_testi_orb

{

    position: absolute;

    border-radius: 50%;

    filter: blur(2px);

    animation: ulif_testi_orb_float 8s ease-in-out infinite;

}



.section_temoignages .ulif_testi_orb--1

{

    width: 180px;

    height: 180px;

    top: 4%;

    left: 3%;

    background: radial-gradient(circle, rgba(224, 150, 32, 0.28) 0%, rgba(26, 26, 26, 0.08) 45%, transparent 72%);

}



.section_temoignages .ulif_testi_orb--2

{

    width: 220px;

    height: 220px;

    bottom: 4%;

    right: 2%;

    background: radial-gradient(circle, rgba(224, 150, 32, 0.24) 0%, rgba(26, 26, 26, 0.1) 50%, transparent 74%);

    animation-delay: 1.5s;

}



@keyframes ulif_testi_thread_drift

{

    0%, 100% { transform: translate(0, 0) rotate(var(--ulif-testi-rotate, 0deg)); }

    50% { transform: translate(8px, -6px) rotate(calc(var(--ulif-testi-rotate, 0deg) + 4deg)); }

}



@keyframes ulif_testi_orb_float

{

    0%, 100% { transform: translateY(0); opacity: 0.85; }

    50% { transform: translateY(-10px); opacity: 1; }

}



@media (prefers-reduced-motion: reduce)

{

    .section_temoignages .ulif_testi_thread,

    .section_temoignages .ulif_testi_orb

    {

        animation: none !important;

    }

}



/* suzy tache mobapp 45 — FAQ accueil : titre centré, accordéon 5 questions, lien vers la page FAQs complète. */

.section_faq_home

{

    padding: 24px 0 72px;

    background-color: #FFFFFF;

}



.section_faq_home__inner

{

    position: relative;

    z-index: 2;

}



.section_faq_home .ulif_faq_header_row

{

    margin-bottom: 36px;

}



.section_faq_home .ulif_faq_badge

{

    margin: 0 0 10px;

    color: #E09620;

    font-size: 0.9rem;

    font-weight: 600;

    text-transform: none !important; /* Garde « ulif.app » en minuscules */

    letter-spacing: 0.06em;

}



.section_faq_home .ulif_faq_title

{

    margin: 0 0 14px;

    color: #333333;

    font-size: clamp(1.35rem, 2.2vw, 1.75rem);

    font-weight: 600;

    text-transform: none;

}



.section_faq_home .trait_long

{

    width: 72px;

    margin-left: auto;

    margin-right: auto;

    border-bottom: 4px solid #E09620;

    background-color: transparent;

}



.section_faq_home .ulif_faq_accordion

{

    margin-top: 8px;

}



.section_faq_home .ulif_faq_item

{

    margin-bottom: 14px;

    border: 1px solid #E8E8E8;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);

}



.section_faq_home .ulif_faq_item_header

{

    padding: 0;

    background: #FAFAFA;

    border-bottom: none;

}



.section_faq_home .ulif_faq_toggle

{

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding: 18px 22px;

    text-align: left;

    text-decoration: none;

    color: #1A1A1A;

    font-weight: 600;

    font-size: 1rem;

    white-space: normal;

}



.section_faq_home .ulif_faq_toggle:hover,

.section_faq_home .ulif_faq_toggle:focus

{

    color: #E09620;

    text-decoration: none;

}



.section_faq_home .ulif_faq_chevron

{

    flex-shrink: 0;

    color: #E09620;

    transition: transform 0.25s ease;

}



.section_faq_home .ulif_faq_toggle:not(.collapsed) .ulif_faq_chevron

{

    transform: rotate(180deg);

}



.section_faq_home .ulif_faq_answer

{

    padding: 18px 22px 22px;

    color: #555555;

    font-size: 0.95rem;

    line-height: 1.75;

    background: #FFFFFF;

}



.section_faq_home .ulif_faq_more_wrap

{

    margin-top: 28px;

}



.section_faq_home .ulif_faq_more_btn

{

    border-radius: 999px;

    padding: 10px 26px;

    border: 1px solid rgba(224, 150, 32, 0.55);

    background: rgba(224, 150, 32, 0.12);

    color: #333333;

    font-weight: 600;

    text-transform: uppercase;

    font-size: 0.82rem;

    letter-spacing: 0.04em;

    transition: background-color 0.25s ease, transform 0.25s ease;

}



.section_faq_home .ulif_faq_more_btn:hover

{

    background: rgba(224, 150, 32, 0.24);

    color: #1A1A1A;

    transform: translateY(-1px);

}



.section_faq_home .ulif_faq_empty

{

    color: #777777;

    margin: 0;

}



.sous_titre_colore

{

    font-size: small;

    color: #53893d;

    font-family: Candara;

}



.carte_temoignage

{

    border-radius: 10px;

    background-color: #F8F8F8;

    padding: 15px;

    margin-top: 50px;

}







.zone_auteur

{

    position: relative;

}



.img_temoignage

{

    height: 50px;

    width: 50px;

    border-radius: 50%;

    float: left;

}



.auteur_t

{

    color: #E09620;

    font-weight: bold;

    margin-left: 60px;

}



.profession

{

    margin-left: 60px;

    font-size: small;

    margin-top: -15px;

}



.titre_temoignage

{

    font-size: large;

}



/********** SECTION WORKS *************************/



/* suzy tache mobapp 45 — Section « Comment fonctionne » v2 : fils décoratifs, orbes flottants, cartes étapes modernes, CTA inscription + FAQs. */

.section_works_v2

{

    position: relative;

    padding: 72px 0 80px;

    overflow: hidden;

    background: linear-gradient(165deg, #F7F7F7 0%, #FFFFFF 42%, #FAFAFA 100%);

}



.section_works_v2__inner

{

    position: relative;

    z-index: 2;

}



.section_works_v2 .ulif_works_threads

{

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 1;

    overflow: hidden;

}



.section_works_v2 .ulif_works_thread

{

    position: absolute;

    border: 2px solid transparent;

    border-radius: 50%;

    opacity: 0.35;

}



.section_works_v2 .ulif_works_thread--1

{

    width: 420px;

    height: 420px;

    top: -120px;

    left: -80px;

    border-color: rgba(224, 150, 32, 0.25);

    border-top-color: transparent;

    border-right-color: transparent;

    transform: rotate(-18deg);

    animation: ulif_works_thread_drift 14s ease-in-out infinite;

}



.section_works_v2 .ulif_works_thread--2

{

    width: 280px;

    height: 280px;

    top: 18%;

    right: -60px;

    border-color: rgba(51, 51, 51, 0.12);

    border-bottom-color: transparent;

    border-left-color: transparent;

    animation: ulif_works_thread_drift 18s ease-in-out infinite reverse;

}



.section_works_v2 .ulif_works_thread--3

{

    width: 520px;

    height: 520px;

    bottom: -200px;

    left: 12%;

    border-color: rgba(224, 150, 32, 0.18);

    border-left-color: transparent;

    animation: ulif_works_thread_drift 20s ease-in-out infinite;

}



.section_works_v2 .ulif_works_thread--4

{

    width: 180px;

    height: 180px;

    bottom: 22%;

    right: 8%;

    border: 2px dashed rgba(83, 137, 61, 0.2);

    border-radius: 50%;

    animation: ulif_works_thread_drift 12s ease-in-out infinite reverse;

}



.section_works_v2 .ulif_works_orb

{

    position: absolute;

    border-radius: 50%;

    filter: blur(1px);

    animation: ulif_works_orb_float 8s ease-in-out infinite;

}



.section_works_v2 .ulif_works_orb--1

{

    width: 120px;

    height: 120px;

    top: 12%;

    left: 8%;

    background: radial-gradient(circle, rgba(224, 150, 32, 0.14) 0%, transparent 70%);

}



.section_works_v2 .ulif_works_orb--2

{

    width: 160px;

    height: 160px;

    bottom: 10%;

    right: 6%;

    background: radial-gradient(circle, rgba(51, 51, 51, 0.08) 0%, transparent 70%);

    animation-delay: 2s;

}



.section_works_v2 .ulif_works_header_row

{

    margin-bottom: 20px;

}



.section_works_v2 .ulif_works_title

{

    text-align: center;

    margin-top: 0;

    color: #E09620;

    font-size: clamp(1.4rem, 2.4vw, 1.85rem);

    font-weight: 600;

}



.section_works_v2 .trait_long

{

    width: 72px;

    margin-left: auto;

    margin-right: auto;

    border-bottom: 4px solid #E09620;

    background-color: transparent;

}



.section_works_v2 .ulif_works_intro

{

    color: #555555;

    font-size: 1rem;

    line-height: 1.75;

    margin-bottom: 40px;

}



.section_works_v2 .ulif_works_content_row

{

    row-gap: 32px;

}



.section_works_v2 .ulif_works_video_frame

{

    border-radius: 18px;

    overflow: hidden;

    border: 4px solid rgba(224, 150, 32, 0.72);

    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);

    background: #1A1A1A;

}



.section_works_v2 .ulif_works_video

{

    display: block;

    width: 100%;

    height: 380px;

    border: none;

}



.section_works_v2 .ulif_works_steps

{

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.section_works_v2 .ulif_works_step_card

{

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 20px 22px;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.88);

    border: 2px solid rgba(224, 150, 32, 0.55);

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;

}



.section_works_v2 .ulif_works_step_card:hover

{

    transform: translateY(-4px);

    border-color: rgba(224, 150, 32, 0.45);

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);

}



.section_works_v2 .ulif_works_step_num

{

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: #1A1A1A;

    color: #FFFFFF;

    font-weight: 700;

    font-size: 1.2rem;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);

}



.section_works_v2 .ulif_works_step_text

{

    margin: 0;

    padding-top: 10px;

    color: #333333;

    font-size: 1rem;

    line-height: 1.65;

    font-weight: 500;

}



.section_works_v2 .ulif_works_float

{

    animation: ulif_works_card_float 5.5s ease-in-out infinite;

    animation-delay: var(--float-delay, 0s);

}



.section_works_v2 .ulif_works_cta_row

{

    margin-top: 44px;

}



.section_works_v2 .ulif_works_cta_row .col-12

{

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 14px;

}



.section_works_v2 .ulif_works_btn_register

{

    margin: 0;

    margin-top: 0;

}



.section_works_v2 .ulif_works_btn_more

{

    margin: 0;

    border-radius: 8px;

    padding: 12px 28px;

    background-color: #E09620;

    border: none;

    color: #FFFFFF;

    font-weight: 600;

    text-transform: uppercase;

    font-size: 0.9rem;

    letter-spacing: 0.03em;

    box-shadow: 0 8px 24px rgba(224, 150, 32, 0.35);

    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;

}



.section_works_v2 .ulif_works_btn_more:hover

{

    background-color: #C88400;

    color: #FFFFFF;

    transform: translateY(-2px);

    box-shadow: 0 12px 28px rgba(224, 150, 32, 0.45);

}



@keyframes ulif_works_thread_drift

{

    0%, 100% { transform: translateY(0) rotate(-18deg); }

    50% { transform: translateY(-14px) rotate(-12deg); }

}



@keyframes ulif_works_orb_float

{

    0%, 100% { transform: translateY(0) scale(1); }

    50% { transform: translateY(-18px) scale(1.05); }

}



@keyframes ulif_works_card_float

{

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-8px); }

}



@media (prefers-reduced-motion: reduce)

{

    .section_works_v2 .ulif_works_float,

    .section_works_v2 .ulif_works_thread,

    .section_works_v2 .ulif_works_orb

    {

        animation: none !important;

    }

}



@media only screen and (max-width: 991.98px)

{

    .section_works_v2 .ulif_works_video

    {

        height: 280px;

    }

}



.carte_works

{

    border-radius: 10px;

    background-color: #FFF;

    padding: 15px;

    margin-top: 50px;

}



.number_works

{

    border-radius: 50%;

    width: 50px;

    height: 50px;

    color: #fff;

    font-size: 1.7em;

    text-align: center;

    font-weight: bold;

    float: left;

    background-color: #E09620;

}



.texte_number

{

    padding: 10px;

    font-weight: 500;

    margin-left: 50px;

    font-size: 1.3rem;

}





/************ SECTION CITATION ***************/

/* Auth premium */

.ulif-auth-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(420px, 2fr);
    min-height: 100vh;
    padding-top: 112px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(224, 150, 32, 0.16), transparent 28%),
        radial-gradient(circle at 52% 70%, rgba(79, 123, 255, 0.12), transparent 30%),
        #f5f3ee;
    color: #151922;
}

.ulif-auth-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(20, 24, 33, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 24, 33, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.95), transparent 68%);
}

.ulif-auth-brand,
.ulif-auth-panel {
    position: relative;
    z-index: 1;
}

.ulif-auth-brand {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 112px);
    padding: 56px 6vw 72px;
}

.ulif-auth-brand-inner {
    width: min(760px, 100%);
}

.ulif-auth-logo-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 42px;
}

.ulif-auth-logo {
    width: 74px;
    height: 74px;
    object-fit: contain;
    padding: 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 50px rgba(18, 22, 31, 0.12);
}

.ulif-auth-badge {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.76);
    color: rgba(21, 25, 34, 0.72);
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 14px 40px rgba(18, 22, 31, 0.08);
}

.ulif-auth-copy h1 {
    max-width: 680px;
    margin: 0;
    color: #151922;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    font-size: clamp(2.35rem, 4.8vw, 5.6rem);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: 0;
}

.ulif-auth-copy p {
    max-width: 600px;
    margin: 24px 0 0;
    color: rgba(21, 25, 34, 0.68);
    font-size: 1.05rem;
    line-height: 1.7;
}

.ulif-auth-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 620px;
    margin: 36px 0 18px;
}

.ulif-auth-stat {
    padding: 16px 18px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.74);
    box-shadow: 0 18px 48px rgba(18, 22, 31, 0.08);
    transform: translateY(10px);
    opacity: 0;
    animation: ulifAuthRise 0.72s ease forwards;
}

.ulif-auth-stat:nth-child(2) {
    animation-delay: 0.08s;
}

.ulif-auth-stat:nth-child(3) {
    animation-delay: 0.16s;
}

.ulif-auth-stat strong {
    display: block;
    color: #151922;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
}

.ulif-auth-stat span {
    display: block;
    margin-top: 6px;
    color: rgba(21, 25, 34, 0.58);
    font-size: 0.82rem;
    font-weight: 700;
}

.ulif-auth-visual {
    position: relative;
    width: min(540px, 92%);
    min-height: 280px;
    margin-top: 28px;
    perspective: 1000px;
}

.ulif-auth-orbit {
    position: absolute;
    inset: 26px 12% 8px;
    border-radius: 50%;
    border: 1px solid rgba(224, 150, 32, 0.3);
    transform: rotateX(64deg) rotateZ(-8deg);
    box-shadow: 0 0 80px rgba(224, 150, 32, 0.16);
    animation: ulifAuthGlow 5.5s ease-in-out infinite;
}

.ulif-auth-device {
    position: relative;
    width: min(390px, 78%);
    margin-left: 7%;
    border-radius: 6px;
    overflow: hidden;
    transform: rotateY(-12deg) rotateX(7deg);
    box-shadow: 0 34px 90px rgba(18, 22, 31, 0.24);
    animation: ulifAuthFloat 5.8s ease-in-out infinite;
}

.ulif-auth-device::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 44%, rgba(21, 25, 34, 0.38));
}

.ulif-auth-device img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: saturate(0.95) contrast(1.05);
}

.ulif-auth-device-panel {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 1;
    min-width: 142px;
    padding: 12px 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #151922;
}

.ulif-auth-device-panel span,
.ulif-auth-device-panel strong {
    display: block;
}

.ulif-auth-device-panel span {
    color: rgba(21, 25, 34, 0.58);
    font-size: 0.76rem;
    font-weight: 700;
}

.ulif-auth-device-panel strong {
    margin-top: 4px;
    font-size: 1.4rem;
    line-height: 1;
}

.ulif-auth-mini-card {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 52px rgba(18, 22, 31, 0.12);
    color: #151922;
    font-size: 0.82rem;
    font-weight: 800;
    animation: ulifAuthFloatFlat 6.2s ease-in-out infinite;
}

.ulif-auth-mini-card i {
    color: #c57f1c;
}

.ulif-auth-mini-card-a {
    top: 34px;
    right: 8%;
}

.ulif-auth-mini-card-b {
    left: 0;
    bottom: 44px;
    animation-delay: 0.6s;
}

.ulif-auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 112px);
    padding: 44px 4.4vw 64px 0;
}

.ulif-auth-card {
    width: min(500px, 100%);
    padding: 30px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 30px 90px rgba(18, 22, 31, 0.16);
}

.ulif-auth-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 6px;
    background: rgba(185, 55, 55, 0.08);
    border: 1px solid rgba(185, 55, 55, 0.16);
    color: #8e2626;
    font-size: 0.9rem;
    font-weight: 700;
}

.ulif-auth-alert a {
    display: inline-block;
    margin-left: 8px;
    color: #151922;
    text-decoration: underline;
}

.ulif-auth-card-head {
    margin-bottom: 24px;
}

.ulif-auth-card-head span {
    color: #b87917;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ulif-auth-card-head h2 {
    margin: 8px 0 10px;
    color: #151922;
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0;
}

.ulif-auth-card-head p {
    margin: 0;
    color: rgba(21, 25, 34, 0.58);
    font-size: 0.94rem;
    line-height: 1.55;
}

.ulif-auth-form {
    display: grid;
    gap: 14px;
}

.ulif-auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ulif-field {
    position: relative;
}

.ulif-field > i {
    position: absolute;
    left: 14px;
    top: 20px;
    z-index: 2;
    color: rgba(21, 25, 34, 0.36);
    transition: color 0.2s ease, transform 0.2s ease;
}

.ulif-field input {
    width: 100%;
    height: 58px;
    padding: 21px 44px 8px 42px;
    border-radius: 6px;
    border: 1px solid rgba(21, 25, 34, 0.13);
    background: rgba(255, 255, 255, 0.72);
    color: #151922;
    font-size: 0.96rem;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.ulif-field label {
    position: absolute;
    left: 42px;
    top: 18px;
    z-index: 2;
    margin: 0;
    color: rgba(21, 25, 34, 0.52);
    font-size: 0.94rem;
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.2s ease, color 0.2s ease;
}

.ulif-field input:focus,
.ulif-field input:not(:placeholder-shown) {
    background: rgba(255, 255, 255, 0.92);
}

.ulif-field input:focus {
    border-color: rgba(224, 150, 32, 0.82);
    box-shadow: 0 0 0 4px rgba(224, 150, 32, 0.12), 0 16px 34px rgba(18, 22, 31, 0.08);
}

.ulif-field input:focus + label,
.ulif-field input:not(:placeholder-shown) + label {
    color: rgba(21, 25, 34, 0.48);
    transform: translateY(-11px) scale(0.78);
}

.ulif-field:focus-within > i {
    color: #c57f1c;
    transform: translateY(-1px);
}

.ulif-field-error {
    display: block;
    min-height: 15px;
    padding: 4px 4px 0 42px;
    color: #a33131;
    font-size: 0.72rem;
    font-weight: 700;
}

.ulif-field.is-invalid input {
    border-color: rgba(185, 55, 55, 0.65);
    box-shadow: 0 0 0 4px rgba(185, 55, 55, 0.08);
}

.ulif-password-toggle {
    position: absolute;
    right: 12px;
    top: 17px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: rgba(21, 25, 34, 0.46);
}

.ulif-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(21, 25, 34, 0.62);
    font-size: 0.86rem;
}

.ulif-auth-options a,
.ulif-auth-switch a,
.ulif-terms a {
    color: #151922;
    font-weight: 800;
}

.ulif-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: rgba(21, 25, 34, 0.64);
    font-size: 0.88rem;
    cursor: pointer;
}

.ulif-check input {
    width: 16px;
    height: 16px;
    accent-color: #c57f1c;
}

.ulif-terms {
    align-items: flex-start;
}

.ulif-captcha {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 6px;
    background: rgba(21, 25, 34, 0.035);
    border: 1px solid rgba(21, 25, 34, 0.08);
}

.ulif-captcha label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: rgba(21, 25, 34, 0.7);
    font-size: 0.84rem;
    font-weight: 800;
}

.ulif-captcha label i {
    color: #c57f1c;
}

.ulif-captcha > div {
    display: grid;
    grid-template-columns: auto minmax(110px, 1fr);
    align-items: center;
    gap: 10px;
}

.ulif-captcha span {
    color: #151922;
    font-weight: 800;
}

.ulif-captcha input {
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid rgba(21, 25, 34, 0.12);
    background: rgba(255, 255, 255, 0.82);
    outline: none;
}

.ulif-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.ulif-auth-submit {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 6px;
    background: #151922;
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 18px 40px rgba(21, 25, 34, 0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ulif-auth-submit:hover {
    background: #222836;
    transform: translateY(-1px);
    box-shadow: 0 22px 50px rgba(21, 25, 34, 0.28);
}

.ulif-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(21, 25, 34, 0.42);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ulif-auth-divider::before,
.ulif-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(21, 25, 34, 0.1);
}

.ulif-social-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ulif-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(21, 25, 34, 0.12);
    background: rgba(255, 255, 255, 0.72);
    color: #151922;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.ulif-social-btn:hover {
    transform: translateY(-1px);
    background: #ffffff;
    border-color: rgba(21, 25, 34, 0.22);
}

.ulif-auth-switch {
    margin: 2px 0 0;
    color: rgba(21, 25, 34, 0.58);
    font-size: 0.9rem;
    text-align: center;
}

/* Modale reset : carte arrondie, contenu centré. */
.ulif-auth-modal .modal-dialog {
    width: calc(100% - 28px);
    max-width: 420px;
    margin: 1.25rem auto;
}

.ulif-auth-modal .modal-content,
.ulif-auth-modal-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e2e8ef;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px rgba(16, 28, 44, 0.14);
}

.ulif-auth-modal-card {
    padding: 36px 28px 30px;
    text-align: center;
}

.ulif-auth-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #667489;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.ulif-auth-modal-close:hover,
.ulif-auth-modal-close:focus {
    color: #151515;
    background: rgba(16, 28, 44, 0.05);
    border-color: #dfe6ee;
    outline: none;
}

.ulif-auth-modal .ulif-auth-card-head {
    margin-bottom: 22px;
    padding-right: 0;
    text-align: center;
}

.ulif-auth-modal .ulif-auth-card-head .ulif-coverflow-header__badge {
    display: inline-block;
}

.ulif-auth-modal .ulif-auth-card-head h2 {
    margin: 10px 0 8px;
    font-size: clamp(1.45rem, 4vw, 1.85rem);
    text-align: center;
}

.ulif-auth-modal .ulif-auth-card-head p {
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.ulif-auth-modal .ulif-auth-form {
    gap: 16px;
    text-align: center;
}

.ulif-auth-modal .ulif-field {
    text-align: left;
}

.ulif-auth-modal .ulif-field input {
    border-radius: 16px;
}

.ulif-auth-modal .ulif-auth-submit {
    width: 100%;
    margin-top: 4px;
    border-radius: 16px;
}

.ulif-auth-modal .ulif-auth-switch {
    margin: 2px 0 0;
    text-align: center;
}

.ulif-auth-modal-link {
    padding: 0;
    border: 0;
    background: none;
    color: #E09620;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.ulif-auth-modal-link:hover,
.ulif-auth-modal-link:focus {
    color: #C88400;
    outline: none;
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .ulif-auth-modal .modal-dialog {
        width: calc(100% - 24px);
        max-width: none;
        margin: 12px auto;
    }

    .ulif-auth-modal-card {
        padding: 30px 18px 24px;
        border-radius: 20px;
    }

    .ulif-auth-modal .ulif-auth-card-head {
        margin-bottom: 18px;
    }

    .ulif-auth-modal .ulif-auth-card-head h2 {
        font-size: 1.4rem;
    }

    .ulif-auth-modal .ulif-field input,
    .ulif-auth-modal .ulif-auth-submit {
        border-radius: 14px;
    }
}

@keyframes ulifAuthRise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ulifAuthFloat {
    0%, 100% {
        transform: translateY(0) rotateY(-12deg) rotateX(7deg);
    }
    50% {
        transform: translateY(-12px) rotateY(-9deg) rotateX(6deg);
    }
}

@keyframes ulifAuthGlow {
    0%, 100% {
        opacity: 0.55;
        transform: rotateX(64deg) rotateZ(-8deg) scale(1);
    }
    50% {
        opacity: 0.85;
        transform: rotateX(64deg) rotateZ(-2deg) scale(1.04);
    }
}

@keyframes ulifAuthFloatFlat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@media (max-width: 1199.98px) {
    .ulif-auth-shell {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 96px;
    }

    .ulif-auth-brand,
    .ulif-auth-panel {
        min-height: auto;
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .ulif-auth-brand {
        padding-bottom: 18px;
    }

    .ulif-auth-panel {
        padding-top: 18px;
    }

    .ulif-auth-card {
        width: min(620px, 100%);
    }
}

@media (max-width: 767.98px) {
    .ulif-auth-shell {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 76px;
    }

    /* Let members reach the form immediately; brand proof follows the action. */
    .ulif-auth-panel {
        order: 1;
        align-items: flex-start;
        padding: 16px 16px 24px;
    }

    .ulif-auth-brand {
        order: 2;
        min-height: 0;
        padding: 8px 22px 34px;
    }

    .ulif-auth-logo-row {
        align-items: center;
        flex-direction: row;
        gap: 10px;
        margin-bottom: 18px;
    }

    .ulif-auth-logo {
        width: 46px;
        height: 46px;
        padding: 6px;
        box-shadow: 0 12px 30px rgba(18, 22, 31, 0.1);
    }

    .ulif-auth-badge {
        min-height: 30px;
        padding: 0 10px;
        font-size: 0.72rem;
    }

    .ulif-auth-copy h1 {
        font-size: 1.55rem;
        line-height: 1.18;
    }

    .ulif-auth-copy p {
        margin-top: 10px;
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .ulif-auth-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 20px 0 0;
    }

    .ulif-auth-stat {
        padding: 10px 8px;
        box-shadow: 0 10px 26px rgba(18, 22, 31, 0.06);
    }

    .ulif-auth-stat strong {
        font-size: 1rem;
    }

    .ulif-auth-stat span {
        margin-top: 3px;
        font-size: 0.66rem;
    }

    .ulif-auth-visual {
        display: none;
    }

    .ulif-auth-card {
        padding: 22px 18px;
        box-shadow: 0 20px 52px rgba(18, 22, 31, 0.13);
    }

    .ulif-auth-card-head {
        margin-bottom: 20px;
    }

    .ulif-auth-card-head h2 {
        font-size: 1.7rem;
    }

    .ulif-auth-grid,
    .ulif-social-row {
        grid-template-columns: 1fr;
    }

    .ulif-auth-options {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ulif-auth-stat,
    .ulif-auth-device,
    .ulif-auth-mini-card,
    .ulif-auth-orbit {
        animation: none;
    }
}

/* Auth entry pages: an app-like layout, intentionally independent from the global navigation. */
.ulif-auth-shell {
    --ulif-ink: #101c2c;
    --ulif-muted: #667489;
    --ulif-line: #dfe6ee;
    --ulif-gold: #E09620;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    min-height: 100vh;
    padding: 18px;
    overflow: hidden;
    background: #eef2f6;
    color: var(--ulif-ink);
}

/* Empêche le contenu du formulaire d'élargir sa colonne sur desktop et mobile. */
.ulif-auth-panel,
.ulif-auth-brand,
.ulif-auth-panel-inner,
.ulif-auth-card,
.ulif-auth-form,
.ulif-auth-grid,
.ulif-auth-grid > *,
.ulif-auth-form > *,
.ulif-field,
.ulif-captcha,
.ulif-social-row {
    min-width: 0;
    max-width: 100%;
}

.ulif-auth-panel-inner,
.ulif-auth-card,
.ulif-auth-form {
    width: 100%;
}

.ulif-field input,
.ulif-captcha input,
.ulif-auth-submit,
.ulif-social-btn {
    box-sizing: border-box;
    max-width: 100%;
}

.ulif-auth-shell::before {
    inset: auto 44% -240px -140px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: rgba(223, 154, 50, .11);
    filter: blur(12px);
    mask-image: none;
}

.ulif-auth-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100dvh - 36px);
    padding: 0;
}

.ulif-auth-panel-inner {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    animation: ulifAuthEnter .62s cubic-bezier(.2, .8, .2, 1) both;
}

.ulif-auth-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-height: 52px;
    position: absolute;
    z-index: 5;
    top: 22px;
    left: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #E09620;
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(224, 150, 32, .26);
    transition: color .2s ease, border-color .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.ulif-auth-back i {
    color: #fff;
    font-size: 1.55rem;
    line-height: 1;
}

.ulif-auth-back:hover,
.ulif-auth-back:focus {
    background: #C88400;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 16px 30px rgba(200, 132, 0, .35);
    transform: translateX(-2px) translateY(-2px);
}

.ulif-auth-card {
    width: 100%;
    min-height: 100%;
    flex: 1;
    padding: clamp(84px, 10vh, 122px) clamp(36px, 5vw, 84px) clamp(36px, 5vw, 70px);
    border: 1px solid #e2e8ef;
    border-radius: 6px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 70px rgba(16, 28, 44, .08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.ulif-auth-logo-row {
    gap: 11px;
    margin-bottom: 32px;
}

.ulif-auth-logo {
    width: 48px;
    height: 48px;
    padding: 5px;
    border: 1px solid rgba(224, 150, 32, .35);
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
}

.ulif-auth-badge {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #4e5b6d;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.ulif-auth-card-head {
    margin-bottom: 25px;
}

.ulif-auth-card-head .ulif-coverflow-header__badge {
    display: inline-block;
    margin-bottom: .24rem;
    padding: .35rem 1rem;
    border: 1px solid rgba(224, 150, 32, .12);
    border-radius: 30px;
    background: rgba(224, 150, 32, .12);
    color: #E09620;
    font-size: clamp(.65rem, 1.6vw, .8rem);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: none; /* Garde « ulif.app » en minuscules si présent dans le badge auth */
}

.ulif-auth-card-head h2 {
    margin: 8px 0 9px;
    color: #151515;
    background: none;
    -webkit-text-fill-color: currentColor;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    font-size: clamp(1.85rem, 3vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.03;
}

.ulif-auth-card-head p {
    color: var(--ulif-muted);
    font-size: .91rem;
    line-height: 1.58;
}

.ulif-auth-form {
    gap: 13px;
}

.ulif-auth-grid {
    gap: 11px;
}

.ulif-field > i {
    top: 19px;
    color: #9aa6b6;
}

.ulif-field input {
    height: 56px;
    padding: 20px 44px 7px 42px;
    border: 1px solid #dce3eb;
    border-radius: 6px;
    background: #fbfcfd;
    box-shadow: none;
    color: var(--ulif-ink);
    font-size: .94rem;
}

.ulif-field label {
    top: 17px;
    color: #7b8798;
    font-size: .91rem;
}

.ulif-field input:focus,
.ulif-field input:not(:placeholder-shown) {
    background: #fff;
}

.ulif-field input:focus {
    border-color: var(--ulif-gold);
    box-shadow: 0 0 0 3px rgba(223, 154, 50, .13);
}

.ulif-field input:focus + label,
.ulif-field input:not(:placeholder-shown) + label {
    color: #69768a;
}

.ulif-field:focus-within > i {
    color: var(--ulif-gold);
}

.ulif-field-error {
    min-height: 13px;
    padding-top: 3px;
    color: #b43a3a;
}

.ulif-password-toggle {
    top: 16px;
    color: #8895a5;
}

.ulif-auth-options {
    color: #667489;
    font-size: .82rem;
}

.ulif-auth-options a,
.ulif-auth-switch a,
.ulif-terms a {
    color: var(--ulif-ink);
}

.ulif-check {
    color: #667489;
    font-size: .83rem;
}

.ulif-check input {
    accent-color: var(--ulif-gold);
}

.ulif-captcha {
    gap: 8px;
    padding: 12px;
    border: 1px solid #e2e8ef;
    border-radius: 6px;
    background: #f8fafc;
}

.ulif-captcha label {
    color: #445268;
    font-size: .8rem;
}

.ulif-captcha label i {
    color: var(--ulif-gold);
}

.ulif-captcha input {
    border: 1px solid #dce3eb;
    border-radius: 6px;
    background: #fff;
}

.ulif-auth-submit {
    min-height: 52px;
    border: 0;
    border-radius: 6px;
    background: #E09620;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    box-shadow: 0 14px 28px rgba(204, 100, 20, .28);
}

.ulif-auth-submit:hover,
.ulif-auth-submit:focus {
    background: #C88400;
    box-shadow: 0 18px 34px rgba(204, 100, 20, .34);
}

.ulif-auth-divider {
    gap: 10px;
    color: #98a3b2;
    font-size: .7rem;
}

.ulif-auth-divider::before,
.ulif-auth-divider::after {
    background: #e3e8ee;
}

.ulif-social-row {
    gap: 9px;
}

.ulif-social-btn {
    min-height: 42px;
    border: 1px solid #dce3eb;
    border-radius: 6px;
    background: #fff;
    color: #37455a;
    font-size: .79rem;
    box-shadow: none;
}

.ulif-social-btn:hover,
.ulif-social-btn:focus {
    border-color: #b7c1ce;
    background: #f8fafc;
}

.ulif-social-btn i {
    color: var(--ulif-gold);
}

.ulif-auth-switch {
    color: #728095;
    font-size: .84rem;
}

.ulif-auth-alert {
    padding: 11px 12px;
    border-radius: 6px;
    font-size: .84rem;
}

/* Icônes SVG et navigation moderne de l'espace utilisateur. */
.ulif-icon {
    display: inline-block;
    height: 1.25em;
    width: 1.25em;
    vertical-align: middle;
}

.menu_droite {
    background: #161813 !important;
    border-right: 1px solid rgba(255, 255, 255, .06);
    padding: 20px 14px !important;
}

.menu_droite::-webkit-scrollbar { width: 0; }
.logo_user_space {
    height: auto !important;
    margin: 0 0 22px 10px;
    max-height: 58px;
    object-fit: contain;
    width: 76px !important;
}

#menu_user { display: flex; flex-direction: column; gap: 5px; }
#menu_user > li { border-radius: 13px !important; border-right: 0 !important; overflow: hidden; }
#menu_user a {
    align-items: center;
    border-radius: 13px !important;
    color: #bdbfb8 !important;
    display: flex;
    font-family: "Montserrat", "Segoe UI", sans-serif !important;
    font-size: 11px;
    font-weight: 600;
    gap: 12px;
    padding: 12px 14px !important;
}
#menu_user a .ulif-icon { flex: 0 0 auto; font-size: 18px; }
#menu_user a:hover { background: rgba(255, 255, 255, .07) !important; color: #fff !important; text-decoration: none; }
#menu_user > .active { background: transparent !important; }
#menu_user > .active > a { background: #e59618 !important; box-shadow: 0 8px 20px rgba(229, 150, 24, .24); color: #fff !important; }

@media only screen and (max-width: 767.98px) {
    .ulif_mobile_header_icon_link .ulif-icon,
    .ulif_bottom_nav_icon_wrap .ulif-icon { height: 19px; width: 19px; }

    .ulif_bottom_nav_track {
        border: 1px solid #eee9df;
        border-radius: 22px;
        box-shadow: 0 12px 35px rgba(34, 28, 17, .16);
    }

    .ulif_bottom_nav_item { border-radius: 16px; color: #86837b; }
    .ulif_bottom_nav_item.is-active { background: #fff0d5; color: #b8650a; }
    .ulif_bottom_nav_icon_wrap { align-items: center; display: flex; height: 22px; justify-content: center; }
}

/* Toasts des pages d'authentification : glassmorphisme, types et swipe horizontal. */
.ulif-auth-toast-region {
    position: fixed;
    z-index: 11000;
    top: 22px;
    right: 22px;
    width: min(430px, calc(100vw - 44px));
    pointer-events: none;
}

.ulif-auth-toast {
    --ulif-toast-accent: #3478f6;
    --ulif-toast-accent-rgb: 52, 120, 246;
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
    min-height: 84px;
    padding: 16px 14px 16px 16px;
    overflow: hidden;
    color: #172033;
    background: linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .66));
    border: 1px solid rgba(255, 255, 255, .8);
    border-left: 4px solid var(--ulif-toast-accent);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(16, 28, 44, .18), inset 0 1px 0 rgba(255, 255, 255, .72);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    opacity: 0;
    transform: translateX(calc(100% + 32px)) scale(.96);
    transition: opacity .42s ease, transform .48s cubic-bezier(.2, .85, .25, 1);
    pointer-events: auto;
}

.ulif-auth-toast.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.ulif-auth-toast.is-leaving {
    opacity: 0;
    transform: translateX(calc(100% + 32px)) scale(.97);
}

.ulif-auth-toast--success {
    --ulif-toast-accent: #1f9d68;
    --ulif-toast-accent-rgb: 31, 157, 104;
}

.ulif-auth-toast--info {
    --ulif-toast-accent: #3478f6;
    --ulif-toast-accent-rgb: 52, 120, 246;
}

.ulif-auth-toast--warning {
    --ulif-toast-accent: #d78a12;
    --ulif-toast-accent-rgb: 215, 138, 18;
}

.ulif-auth-toast--error {
    --ulif-toast-accent: #d94a5a;
    --ulif-toast-accent-rgb: 217, 74, 90;
}

.ulif-auth-toast__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--ulif-toast-accent);
    font-size: 1.15rem;
    background: rgba(var(--ulif-toast-accent-rgb), .12);
    border: 1px solid rgba(var(--ulif-toast-accent-rgb), .2);
    border-radius: 13px;
}

.ulif-auth-toast__content {
    min-width: 0;
}

.ulif-auth-toast__content p {
    margin: 0;
    color: #263247;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.5;
}

.ulif-auth-toast__content a {
    display: inline-block;
    margin-top: 5px;
    color: var(--ulif-toast-accent);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.ulif-auth-toast__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: #6e7889;
    background: rgba(255, 255, 255, .45);
    border: 1px solid rgba(112, 126, 147, .14);
    border-radius: 50%;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.ulif-auth-toast__close:hover,
.ulif-auth-toast__close:focus {
    color: #ffffff;
    background: var(--ulif-toast-accent);
    outline: none;
    transform: rotate(90deg);
}

.ulif-auth-toast__progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(var(--ulif-toast-accent-rgb), .35), var(--ulif-toast-accent));
    transform: scaleX(1);
    transform-origin: left center;
}

.ulif-auth-toast.is-visible .ulif-auth-toast__progress {
    animation: ulifAuthToastProgress var(--ulif-auth-toast-duration, 7s) linear forwards;
}

@keyframes ulifAuthToastProgress {
    to { transform: scaleX(0); }
}

@media (max-width: 575px) {
    .ulif-auth-toast-region {
        top: 12px;
        right: 12px;
        width: calc(100vw - 24px);
    }

    .ulif-auth-toast {
        grid-template-columns: 38px minmax(0, 1fr) 32px;
        gap: 10px;
        min-height: 76px;
        padding: 13px 11px 13px 13px;
        border-radius: 15px;
    }

    .ulif-auth-toast__icon {
        width: 38px;
        height: 38px;
    }

    .ulif-auth-toast__content p {
        font-size: .84rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ulif-auth-toast,
    .ulif-auth-toast__close {
        transition-duration: .01ms;
    }

    .ulif-auth-toast.is-visible .ulif-auth-toast__progress {
        animation: none;
    }
}

.ulif-auth-brand {
    display: flex;
    align-self: stretch;
    min-height: 0;
    padding: 0;
}

.ulif-auth-visual {
    isolation: isolate;
    width: 100%;
    min-height: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #0c1c33;
    box-shadow: 0 28px 76px rgba(16, 28, 44, .16);
    perspective: none;
}

.ulif-auth-visual::before,
.ulif-auth-visual::after {
    position: absolute;
    z-index: 1;
    content: "";
    pointer-events: none;
}

.ulif-auth-visual::before {
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 17, 30, .05) 12%, rgba(7, 17, 30, .13) 35%, rgba(7, 17, 30, .92) 100%);
}

.ulif-auth-visual::after {
    top: -13%;
    right: -8%;
    width: 58%;
    aspect-ratio: 1;
    border: 1px solid rgba(244, 192, 99, .56);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(244, 192, 99, .08), 0 0 80px rgba(244, 192, 99, .26);
    animation: ulifAuthPulse 5.2s ease-in-out infinite;
}

.ulif-auth-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 51% center;
    filter: saturate(.72) contrast(1.06);
    transform: scale(1.04);
    animation: ulifAuthImageBreathe 13s ease-in-out infinite;
}

.ulif-auth-visual-grid {
    position: absolute;
    z-index: 2;
    inset: 0;
    opacity: .34;
    background-image: linear-gradient(rgba(221, 166, 65, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(221, 166, 65, .28) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(150deg, #000 0, transparent 58%);
}

.ulif-auth-visual-copy {
    position: absolute;
    z-index: 3;
    right: clamp(24px, 4.2vw, 58px);
    bottom: clamp(26px, 5.3vw, 66px);
    left: clamp(24px, 4.2vw, 58px);
    color: #fff;
    animation: ulifAuthEnter .78s .12s cubic-bezier(.2, .8, .2, 1) both;
}

.ulif-auth-visual-copy > span {
    display: block;
    margin-bottom: 14px;
    color: #f4c26c;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: none; /* Garde « ulif.app » en minuscules dans le tagline auth */
}

.ulif-auth-visual-copy h1 {
    max-width: 620px;
    margin: 0;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    font-size: clamp(2rem, 3.65vw, 4.35rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .99;
}

.ulif-auth-visual-copy p {
    max-width: 520px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: .96rem;
    line-height: 1.62;
}

.ulif-auth-mini-card {
    z-index: 4;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 6px;
    background: rgba(14, 31, 52, .55);
    box-shadow: none;
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ulif-auth-mini-card i {
    color: #f4bd5d;
}

.ulif-auth-mini-card-a {
    top: 30px;
    right: 30px;
    animation: ulifAuthFloatFlat 6.2s ease-in-out infinite;
}

.ulif-auth-mini-card-b {
    right: 30px;
    bottom: 42%;
    left: auto;
    animation: ulifAuthFloatFlat 6.2s .7s ease-in-out infinite;
}

@keyframes ulifAuthEnter {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ulifAuthPulse {
    0%, 100% { opacity: .7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}

@keyframes ulifAuthImageBreathe {
    0%, 100% { transform: scale(1.04); }
    50% { transform: scale(1.09); }
}

@media (max-width: 1060px) {
    .ulif-auth-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px; }
    .ulif-auth-panel { min-height: calc(100dvh - 28px); padding: 0; }
    .ulif-auth-card { padding-right: clamp(28px, 4vw, 46px); padding-left: clamp(28px, 4vw, 46px); }
    .ulif-auth-visual-copy h1 { font-size: clamp(1.8rem, 3.8vw, 3.1rem); }
    .ulif-auth-mini-card-b { bottom: 45%; }
}

@media (max-width: 840px) {
    .ulif-auth-shell { display: block; min-height: 100dvh; padding: 0; background: radial-gradient(circle at 100% 0, rgba(223, 154, 50, .16), transparent 31%), #f4f7fa; }
    .ulif-auth-shell::before { display: block; inset: -190px -175px auto auto; width: 390px; height: 390px; opacity: .9; }
    .ulif-auth-brand { display: none; }
    .ulif-auth-panel { position: relative; display: block; min-height: 100dvh; padding: 0 20px 34px; }
    .ulif-auth-panel-inner { width: min(560px, 100%); min-height: 0; margin: 0 auto; padding-top: 68px; }
    .ulif-auth-back { position: absolute; z-index: 8; top: 14px; left: 20px; width: 46px; min-height: 46px; margin: 0; padding: 0; border: 1px solid rgba(224, 150, 32, .24); background: rgba(255, 255, 255, .92); box-shadow: 0 8px 18px rgba(16, 28, 44, .08); }
    .ulif-auth-back span { display: none; }
    .ulif-auth-back i { color: #E09620; font-size: 1.3rem; }
    .ulif-auth-back:hover, .ulif-auth-back:focus { border-color: #E09620; background: #E09620; color: #fff; transform: translateX(-2px) translateY(-1px); }
    .ulif-auth-back:hover i, .ulif-auth-back:focus i { color: #fff; }
    .ulif-auth-card { min-height: 0; flex: initial; margin: 0; padding: 30px; border: 1px solid rgba(222, 229, 237, .92); border-top: 4px solid var(--ulif-gold); box-shadow: 0 18px 42px rgba(16, 28, 44, .1); }
    .ulif-auth-logo-row { margin-bottom: 28px; }
    .ulif-auth-card-head h2 { font-size: clamp(2rem, 7vw, 2.5rem); }
    .ulif-field input { min-height: 58px; }
    .ulif-auth-submit { min-height: 56px; }
}

@media (max-width: 560px) {
    .ulif-auth-panel { padding: 0 14px 24px; }
    .ulif-auth-panel-inner { padding-top: 64px; }
    .ulif-auth-back { top: 12px; left: 14px; }
    .ulif-auth-card { padding: 26px 19px 24px; }
    .ulif-auth-logo-row { margin-bottom: 24px; }
    .ulif-auth-logo { width: 43px; height: 43px; }
    .ulif-auth-badge { font-size: .67rem; }
    .ulif-auth-card-head { margin-bottom: 21px; }
    .ulif-auth-card-head h2 { font-size: 1.78rem; }
    .ulif-auth-grid { grid-template-columns: 1fr; gap: 0; }
    .ulif-auth-options { align-items: flex-start; flex-direction: column; gap: 8px; }
    .ulif-social-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ulif-social-btn { gap: 0; min-height: 40px; padding: 0; }
    .ulif-social-btn span { display: none; }
    .ulif-social-btn i { font-size: 1rem; }
    .ulif-captcha > div { grid-template-columns: auto minmax(88px, 1fr); }
    .ulif-auth-visual-copy h1 { max-width: 310px; font-size: 1.36rem; }
    .ulif-auth-mini-card-a { max-width: 156px; }
}

@media (prefers-reduced-motion: reduce) {
    .ulif-auth-panel-inner,
    .ulif-auth-visual-copy,
    .ulif-auth-visual::after,
    .ulif-auth-hero-image,
    .ulif-auth-mini-card { animation: none; }
}



.img_carousel

{

    width: 700px;

    height: 400px;

}



#citation

{

    margin-top: 50px;

}



.zone_citation

{

    margin-top: 50px;

}



.titre_citation

{

    font-weight: bold;

    color: #E09620;

    text-transform: uppercase;

    font-size: large;

}



.description_citation

{

    font-size: large;

    font-weight: 500;

    text-align: justify;

}



/* suzy tache mobapp 45 — Citation quotidienne v3 : carrousel animé, effet papier froissé, thèmes dynamiques. */

.section_citation_v2
{
    --ulif-cit-accent: #E09620;
    --ulif-cit-accent-soft: rgba(224, 150, 32, 0.18);
    --ulif-cit-accent-glow: rgba(224, 150, 32, 0.35);
    --ulif-cit-bg: #FAFAFA;
    --ulif-cit-bg-alt: #FFFFFF;
    --ulif-cit-text: #1E1E1E;
    --ulif-cit-muted: #555555;
    --ulif-cit-overlay: rgba(15, 18, 28, 0.42);
    --ulif-cit-wave-a: rgba(224, 150, 32, 0.28);
    --ulif-cit-wave-b: rgba(255, 255, 255, 0.92);

    position: relative;
    padding: 72px 0 88px;
    overflow: hidden;
    background: linear-gradient(155deg, var(--ulif-cit-bg-alt) 0%, var(--ulif-cit-bg) 55%, #F3F3F3 100%);
    transition: background 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.section_citation_v2[data-theme="gold"]
{
    --ulif-cit-accent: #E09620;
    --ulif-cit-accent-soft: rgba(224, 150, 32, 0.18);
    --ulif-cit-accent-glow: rgba(224, 150, 32, 0.35);
    --ulif-cit-bg: #FAFAFA;
    --ulif-cit-bg-alt: #FFFFFF;
    --ulif-cit-text: #1E1E1E;
    --ulif-cit-muted: #555555;
    --ulif-cit-overlay: rgba(18, 14, 8, 0.38);
    --ulif-cit-wave-a: rgba(224, 150, 32, 0.32);
    --ulif-cit-wave-b: rgba(255, 248, 235, 0.95);
}

.section_citation_v2[data-theme="emerald"]
{
    --ulif-cit-accent: #53893D;
    --ulif-cit-accent-soft: rgba(83, 137, 61, 0.2);
    --ulif-cit-accent-glow: rgba(83, 137, 61, 0.38);
    --ulif-cit-bg: #F4F8F2;
    --ulif-cit-bg-alt: #FAFDF9;
    --ulif-cit-text: #1A2E16;
    --ulif-cit-muted: #4A5F44;
    --ulif-cit-overlay: rgba(10, 24, 8, 0.4);
    --ulif-cit-wave-a: rgba(83, 137, 61, 0.28);
    --ulif-cit-wave-b: rgba(240, 250, 236, 0.95);
}

.section_citation_v2[data-theme="navy"]
{
    --ulif-cit-accent: #C9A227;
    --ulif-cit-accent-soft: rgba(201, 162, 39, 0.22);
    --ulif-cit-accent-glow: rgba(201, 162, 39, 0.42);
    --ulif-cit-bg: #EEF1F6;
    --ulif-cit-bg-alt: #F7F9FC;
    --ulif-cit-text: #0F1B33;
    --ulif-cit-muted: #3D4F6B;
    --ulif-cit-overlay: rgba(8, 14, 28, 0.48);
    --ulif-cit-wave-a: rgba(26, 42, 74, 0.22);
    --ulif-cit-wave-b: rgba(230, 236, 248, 0.96);
}

.section_citation_v2__inner
{
    position: relative;
    z-index: 2;
}

.section_citation_v2 .ulif_citation_ambient
{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.section_citation_v2 .ulif_citation_wave
{
    position: absolute;
    width: clamp(220px, 38vw, 420px);
    height: clamp(220px, 38vw, 420px);
    border-radius: 42% 58% 65% 35% / 38% 42% 58% 62%;
    filter: blur(0.5px);
    opacity: 0.85;
    transition: background 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s ease;
    animation: ulif_citation_wave_morph 14s ease-in-out infinite;
}

.section_citation_v2 .ulif_citation_wave--tr
{
    top: -8%;
    right: -6%;
    background: radial-gradient(circle at 30% 30%, var(--ulif-cit-wave-b) 0%, var(--ulif-cit-wave-a) 55%, transparent 78%);
}

.section_citation_v2 .ulif_citation_wave--bl
{
    bottom: -12%;
    left: -8%;
    background: radial-gradient(circle at 70% 70%, var(--ulif-cit-accent-soft) 0%, var(--ulif-cit-wave-a) 48%, transparent 76%);
    animation-delay: -4s;
    animation-direction: reverse;
}

.section_citation_v2 .ulif_citation_thread
{
    position: absolute;
    border-radius: 50%;
    border: 2px solid var(--ulif-cit-accent-soft);
    opacity: 0.45;
    transition: border-color 0.9s ease;
}

.section_citation_v2 .ulif_citation_thread--1
{
    width: 320px;
    height: 320px;
    top: 12%;
    left: -80px;
    border-bottom-color: transparent;
    border-right-color: transparent;
    animation: ulif_citation_thread_drift 16s ease-in-out infinite;
}

.section_citation_v2 .ulif_citation_thread--2
{
    width: 200px;
    height: 200px;
    bottom: 10%;
    right: 8%;
    border-style: dashed;
    animation: ulif_citation_thread_drift 13s ease-in-out infinite reverse;
}

.section_citation_v2 .ulif_citation_orb
{
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ulif-cit-accent-soft) 0%, transparent 72%);
    animation: ulif_citation_orb_float 7s ease-in-out infinite;
    transition: background 0.9s ease;
}

.section_citation_v2 .ulif_citation_orb--1
{
    width: 160px;
    height: 160px;
    top: 18%;
    right: 18%;
}

.section_citation_v2 .ulif_citation_header_row
{
    margin-bottom: 40px;
}

.section_citation_v2 .ulif_citation_main_title
{
    text-align: center;
    margin-top: 0;
    color: var(--ulif-cit-accent);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: color 0.9s ease;
}

.section_citation_v2 .trait_long
{
    width: 72px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 4px solid var(--ulif-cit-accent);
    background-color: transparent;
    transition: border-color 0.9s ease;
}

.section_citation_v2 .ulif_citation_stage
{
    position: relative;
    min-height: 420px;
}

.section_citation_v2 .ulif_citation_slides
{
    position: relative;
    min-height: inherit;
}

.section_citation_v2 .ulif_citation_slide
{
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease, visibility 0.55s;
}

.section_citation_v2 .ulif_citation_slide.is-active
{
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.section_citation_v2 .ulif_citation_slide.is-leaving
{
    opacity: 0;
    transform: translateY(-18px);
}

.section_citation_v2 .ulif_citation_slide__content
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.section_citation_v2 .ulif_citation_text_col
{
    position: relative;
    padding: clamp(20px, 3vw, 36px);
}

.section_citation_v2 .ulif_citation_index
{
    display: block;
    margin-bottom: 14px;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    color: var(--ulif-cit-accent-soft);
    letter-spacing: -0.04em;
    transition: color 0.9s ease;
}

.section_citation_v2 .ulif_citation_blockquote
{
    margin: 0;
    padding: 0;
    border: none;
}

.section_citation_v2 .ulif_citation_subtitle
{
    margin: 0 0 18px;
    color: var(--ulif-cit-text);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    transition: color 0.9s ease;
}

.section_citation_v2 .ulif_citation_description
{
    margin: 0;
    color: var(--ulif-cit-muted);
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.8;
    transition: color 0.9s ease;
}

.section_citation_v2 .ulif_citation_word
{
    display: inline-block;
    opacity: 0;
    transform: translateY(110%);
    filter: blur(6px);
}

.section_citation_v2 .ulif_citation_word.is-visible
{
    animation: ulif_citation_word_reveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.section_citation_v2 .ulif_citation_media_col
{
    margin: 0;
    display: flex;
    justify-content: center;
}

.section_citation_v2 .ulif_citation_figure
{
    position: relative;
    width: min(100%, 380px);
    aspect-ratio: 1;
}

.section_citation_v2 .ulif_citation_ring
{
    position: absolute;
    border-radius: 50%;
    border:  2px solid var(--ulif-cit-accent);
    opacity: 0.55;
    transition: border-color 0.9s ease;
}

.section_citation_v2 .ulif_citation_ring--1
{
    inset: -14px -10px auto auto;
    width: calc(100% + 28px);
    height: calc(100% + 28px);
    border-bottom-color: transparent;
    border-left-color: transparent;
    animation: ulif_citation_ring_spin 18s linear infinite;
}

.section_citation_v2 .ulif_citation_ring--2
{
    inset: auto auto -18px -14px;
    width: calc(100% + 18px);
    height: calc(100% + 18px);
    border-top-color: transparent;
    border-right-color: transparent;
    opacity: 0.35;
    animation: ulif_citation_ring_spin 22s linear infinite reverse;
}

.section_citation_v2 .ulif_citation_figure__mask
{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--ulif-cit-accent);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.16),
        0 0 0 12px rgba(255, 255, 255, 0.65),
        0 0 48px var(--ulif-cit-accent-glow);
    transform-origin: center center;
    transition: border-color 0.9s ease, box-shadow 0.9s ease;
    will-change: transform, filter, opacity;
}

.section_citation_v2 .ulif_citation_image
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
}

.section_citation_v2 .ulif_citation_overlay
{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        165deg,
        var(--ulif-cit-overlay) 0%,
        rgba(0, 0, 0, 0.12) 45%,
        transparent 72%
    );
    opacity: 0.72;
    transition: background 0.9s ease, opacity 0.6s ease;
    pointer-events: none;
}

.section_citation_v2 .ulif_citation_figure__mask.is-crumpling
{
    animation: ulif_citation_crumple 0.72s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

.section_citation_v2 .ulif_citation_figure__mask.is-exploding
{
    animation: ulif_citation_explode 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.section_citation_v2 .ulif_citation_figure__mask.is-exploding .ulif_citation_overlay
{
    animation: ulif_citation_overlay_fade 0.95s ease forwards;
}

.section_citation_v2 .ulif_citation_controls
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 36px;
}

.section_citation_v2 .ulif_citation_nav_btn
{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--ulif-cit-accent-soft);
    background: rgba(255, 255, 255, 0.85);
    color: var(--ulif-cit-accent);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.section_citation_v2 .ulif_citation_nav_btn:hover
{
    transform: translateY(-2px);
    background: var(--ulif-cit-accent);
    border-color: var(--ulif-cit-accent);
    color: #FFFFFF;
}

.section_citation_v2 .ulif_citation_dots
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.section_citation_v2 .ulif_citation_dot
{
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--ulif-cit-accent-soft);
    cursor: pointer;
    transition: transform 0.25s ease, background-color 0.25s ease, width 0.25s ease;
}

.section_citation_v2 .ulif_citation_dot.is-active
{
    width: 28px;
    border-radius: 999px;
    background: var(--ulif-cit-accent);
}

.section_citation_v2 .ulif_citation_footer
{
    margin-top: 28px;
}

.section_citation_v2 .ulif_citation_btn
{
    border-radius: 8px;
    padding: 12px 28px;
    background-color: var(--ulif-cit-accent);
    border: none;
    color: #FFFFFF;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    box-shadow: 0 10px 28px var(--ulif-cit-accent-glow);
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.section_citation_v2 .ulif_citation_btn:hover
{
    color: #FFFFFF;
    transform: translateY(-2px);
    filter: brightness(0.94);
    box-shadow: 0 14px 32px var(--ulif-cit-accent-glow);
}

.section_citation_v2.is-entrance-pending .ulif_citation_figure__mask
{
    opacity: 0;
    transform: perspective(900px) rotateX(38deg) rotateY(-22deg) scale(0.55);
    filter: blur(14px);
}

.section_citation_v2.is-entrance-ready .ulif_citation_figure__mask.is-active-mask
{
    animation: ulif_citation_explode 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ulif_citation_wave_morph
{
    0%, 100% { border-radius: 42% 58% 65% 35% / 38% 42% 58% 62%; transform: rotate(0deg) scale(1); }
    50% { border-radius: 58% 42% 35% 65% / 52% 38% 62% 48%; transform: rotate(8deg) scale(1.04); }
}

@keyframes ulif_citation_thread_drift
{
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(6deg); }
}

@keyframes ulif_citation_orb_float
{
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-14px) scale(1.04); }
}

@keyframes ulif_citation_ring_spin
{
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ulif_citation_word_reveal
{
    from
    {
        opacity: 0;
        transform: translateY(110%);
        filter: blur(6px);
    }
    to
    {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes ulif_citation_crumple
{
    0%
    {
        transform: perspective(900px) rotateX(0deg) rotateY(0deg) scale(1);
        filter: blur(0);
        opacity: 1;
    }
    45%
    {
        transform: perspective(900px) rotateX(28deg) rotateY(-18deg) scale(0.88) skew(2deg, 1deg);
        filter: blur(5px);
        opacity: 0.85;
    }
    100%
    {
        transform: perspective(900px) rotateX(52deg) rotateY(-34deg) scale(0.42);
        filter: blur(16px);
        opacity: 0;
    }
}

@keyframes ulif_citation_explode
{
    0%
    {
        transform: perspective(900px) rotateX(48deg) rotateY(24deg) scale(0.35);
        filter: blur(18px);
        opacity: 0;
    }
    55%
    {
        transform: perspective(900px) rotateX(-6deg) rotateY(-4deg) scale(1.06);
        filter: blur(3px);
        opacity: 0.92;
    }
    100%
    {
        transform: perspective(900px) rotateX(0deg) rotateY(0deg) scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes ulif_citation_overlay_fade
{
    0% { opacity: 0.95; }
    100% { opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce)
{
    .section_citation_v2 .ulif_citation_wave,
    .section_citation_v2 .ulif_citation_thread,
    .section_citation_v2 .ulif_citation_orb,
    .section_citation_v2 .ulif_citation_ring
    {
        animation: none !important;
    }

    .section_citation_v2 .ulif_citation_figure__mask.is-crumpling,
    .section_citation_v2 .ulif_citation_figure__mask.is-exploding,
    .section_citation_v2.is-entrance-ready .ulif_citation_figure__mask.is-active-mask
    {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .section_citation_v2 .ulif_citation_word
    {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
}

@media only screen and (max-width: 991.98px)
{
    .section_citation_v2
    {
        padding: 56px 0 72px;
    }

    .section_citation_v2 .ulif_citation_stage
    {
        min-height: 520px;
    }

    .section_citation_v2 .ulif_citation_slide__content
    {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .section_citation_v2 .ulif_citation_text_col
    {
        order: 2;
        padding: 0 4px;
    }

    .section_citation_v2 .ulif_citation_media_col
    {
        order: 1;
    }

    .section_citation_v2 .ulif_citation_figure
    {
        width: min(100%, 280px);
        margin: 0 auto;
    }
}

/************* SECTION PARTNERS ***********/

.partner

{

    padding-bottom: 50px;

    overflow: hidden;

}



/* suzy tache mobapp 45 — Partenaires v2 : titre centré, deux bandes défilantes opposées, logos agrandis. */

.partner_v2

{

    padding: 56px 0 64px;

    background-color: #FAFAFA;

}



.partner_v2 .ulif_partner_header_row

{

    margin-bottom: 36px;

}



.partner_v2 .titre_section

{

    text-align: center;

    margin-top: 0;

    color: #E09620;

    font-size: clamp(1.35rem, 2.2vw, 1.75rem);

}



.partner_v2 .trait_long

{

    width: 72px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 0;

    border-bottom: 4px solid #E09620;

    background-color: transparent;

}



.ulif_partner_marquee

{

    display: flex;

    flex-direction: column;

    gap: 28px;

    width: 100%;

    overflow: hidden;

}



.ulif_partner_track

{

    display: flex;

    align-items: center;

    gap: 48px;

    width: max-content;

    will-change: transform;

}



.ulif_partner_track--rtl

{

    animation: ulif_partner_marquee_rtl 38s linear infinite;

}



.ulif_partner_track--ltr

{

    animation: ulif_partner_marquee_ltr 42s linear infinite;

}



.ulif_partner_item

{

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 220px;

    height: 130px;

    padding: 16px 24px;

    border-radius: 14px;

    background: #FFFFFF;

    border: 1px solid #E8E8E8;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

}



.ulif_partner_item:hover

{

    transform: translateY(-4px) scale(1.02);

    border-color: rgba(224, 150, 32, 0.4);

    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);

}



.ulif_partner_logo

{

    max-width: 180px;

    max-height: 96px;

    width: auto;

    height: auto;

    object-fit: contain;

}



@keyframes ulif_partner_marquee_rtl

{

    0% { transform: translateX(0); }

    100% { transform: translateX(-50%); }

}



@keyframes ulif_partner_marquee_ltr

{

    0% { transform: translateX(-50%); }

    100% { transform: translateX(0); }

}



@media (prefers-reduced-motion: reduce)

{

    .ulif_partner_track--rtl,

    .ulif_partner_track--ltr

    {

        animation: none;

        flex-wrap: wrap;

        width: 100%;

        justify-content: center;

    }

}



@media only screen and (max-width: 767.98px)

{

    .ulif_partner_item

    {

        width: 180px;

        height: 110px;

        padding: 12px 18px;

    }

    .ulif_partner_logo

    {

        max-width: 150px;

        max-height: 78px;

    }

    .ulif_partner_track

    {

        gap: 24px;

    }

}



.partners

{

    margin-top: 50px;

}



.img_partners

{

    max-height: 200px;

    /*height: 80px;*/

    max-width: 150px;

}



.box_partner

{

    height: 200px;

    width: 150px;

    align-items: center;

    align-content: center;

}



/************** SECTION FOOTER ****************/

html

{

    background-color: #111111;

}

/* Conteneur footer — noir uni (plus de dégradés / glass). */
.ulif_site_footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #000000;
}

.ulif_site_footer::before {
    content: none;
    display: none;
}

.app_footer

{

    position: relative;
    z-index: 1;
    /* Landing : fond footer noir uni, sans dégradé ni blur. */
    background: #000000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
    margin-bottom: 0;

    padding-bottom: 0;

}



.titre_footer

{

    color: #E09620; /* Orange ULiF pour distinguer les titres des liens blancs du footer. */

    font-family: Candara, sans-serif; /* Aligne la typo des titres footer avec le reste du site. */

    font-size: medium;

    font-weight: bold; /* Renforce légèrement la hiérarchie sans alourdir le bloc. */

    letter-spacing: 0.05em; /* Améliore la lisibilité des titres en capitales. */

    margin-bottom: 22px; /* Laisse la place au filet décoratif sous le titre. */

    margin-top: 50px;

    padding-bottom: 0;

    position: relative;

    text-transform: uppercase;

}

/* Filet discret sous chaque titre de colonne du footer. */
.titre_footer::after {

    background-color: #E09620; /* Reprend l'accent orange de la charte ULiF. */

    border-radius: 1px; /* Adoucit légèrement les extrémités du filet. */

    content: '';

    display: block;

    height: 2px;

    margin-top: 8px;

    opacity: 0.85; /* Atténue le contraste pour un rendu moins agressif. */

    width: 32px;

}



.lien_footer

{

    color: white;

}



.lien_footer:hover

{

    color: white;

}



.suivez_nous

{

    margin-top: 30px;

    color: #E09620;

}



.img_rs

{

    /*width: 20px;*/

    height: 35px;

    padding: 5px;

    margin-bottom: 50px;

}

/* Icône WhatsApp footer : orange charte ULiF, alignée sur les autres réseaux sociaux. */
.ulif_rs_icon_whatsapp

{

    color: #E09620;

    display: inline-block;

    font-size: 30px;

    height: 35px;

    line-height: 35px;

    margin-bottom: 50px;

    padding: 5px;

    vertical-align: middle;

    width: 35px;

}



.lien_rs

{

    text-decoration: none;

}



.lien_rs:hover

{

    text-decoration: none;

}



.footer

{

    position: relative;
    z-index: 1;
    /* Landing : barre copyright noir uni (alignée au footer). */
    background: #000000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: rgba(255, 255, 255, 0.88);

    padding: 14px 20px;

    padding-bottom: max(14px, env(safe-area-inset-bottom));

    height: auto;

    min-height: 0;

    margin-bottom: 0;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;

    text-align: center;

}



.equipe

{

    font-weight: bold;

}



.copyright

{

    margin: 0;

    text-align: center;

}



.end_zone_description

{

    margin: 0;

    padding: 0;

    font-family: "Open Sans", sans-serif;

    font-weight: 300;

}



.footer .container,

.footer .row,

.footer .col-sm-12

{

    margin-bottom: 0;

}



.designed

{

    text-align: right;

    margin-top: -40px;



}



/**************   DESKTOP : restaure le menu d'origine au-dessus de 992px    ********************/

@media only screen and (min-width: 992px) {

    .menu_principal {

        min-height: 0; /* Évite toute réserve de hauteur inutile sous le header desktop. */

        margin-bottom: 0; /* Supprime l'espace blanc entre le header et la première section. */

        padding-top: 0; /* Retire la compensation mobile du header fixe sur desktop. */

    }

    .menu_principal .navbar.fixed-top {

        position: fixed; /* Header fixe avec effet scroll Meriaz sur desktop. */

        top: 0;

        left: 0;

        right: 0;

        z-index: 1030;

    }

    .navbar-custom {

        display: grid;

        grid-template-columns: 1fr auto 1fr;

        align-items: center;

        align-content: normal;

        flex-wrap: nowrap;

        justify-content: unset;

        padding-bottom: 10px;

        padding-top: 10px;

        padding-left: 48px !important;

        padding-right: 48px !important;

        column-gap: 20px;

    }

    .navbar-custom.ulif-navbar-scrolled {

        padding-bottom: 8px;

        padding-top: 8px;

        padding-left: 48px !important;

        padding-right: 48px !important;

    }

    .navbar-custom .navbar-brand {

        grid-column: 1;

        justify-self: start;

        flex: 0 0 auto;

        margin-right: 0;

        margin-left: 0;

        order: unset;

        width: auto !important;

        padding-left: 0;

    }

    .menu_principal .navbar > .w-100:last-child {

        display: none;

    }

    .navbar-custom .navbar-collapse {

        grid-column: 2;

        justify-self: center;

        background-color: transparent;

        display: flex !important;

        flex-basis: auto;

        flex-grow: 0;

        justify-content: center;

        margin-top: 0;

        margin-left: 0;

        margin-right: 0;

        order: unset;

        overflow: visible;

        padding: 0;

        position: static;

        width: auto !important;

    }

    @media only screen and (min-width: 1200px) {

        .navbar-custom .navbar-collapse {

            padding-right: 0;

        }

    }

    .navbar-custom .navbar-nav {

        align-items: center !important;

        display: flex !important;

        flex-direction: row;

        flex-wrap: nowrap;

        gap: 0;

        justify-content: center;

        margin-left: 0 !important;

        margin-right: 0 !important;

        min-width: auto;

        overflow-x: visible;

        padding: 0;

        white-space: normal;

    }

    /* Espacement desktop entre chaque lien — marge explicite (plus fiable que gap). */
    .navbar-custom.navbar-expand-lg .navbar-nav > .nav-item + .nav-item {

        margin-left: 15px;

    }

    .desktop_header_actions {

        grid-column: 3;

        justify-self: end;

        display: inline-flex !important;

        align-items: center;

        gap: 12px;

    }

    .mobile_header_actions {

        display: none !important; /* Garde les actions icônes strictement hors du desktop. */

    }

    .desktop_only_nav_item {

        display: list-item !important; /* Réaffiche connexion, langue et plus desktop. */

    }

    .mobile_only_nav_item {

        display: none !important; /* Cache les tags mobiles supplémentaires sur desktop. */

    }

    .desktop_lang_item {

        display: list-item !important; /* Garde l'interrupteur langue aligné avec le menu desktop. */

        margin-left: 6px; /* Sépare légèrement le switch langue des autres liens du header. */

    }

    .navbar-custom.navbar-expand-lg .navbar-nav .nav-link {

        background-color: transparent;

        border-bottom: none;

        border-radius: 8px;

        font-size: 14px;

        margin: 0;

        padding: 8px 4px;

        text-transform: none;

        transition: color 0.3s ease, background-color 0.3s ease;

    }

    .navbar-custom .nav-link:hover,

    .navbar-custom .nav-link:focus,

    .navbar-custom .nav-link:active {

        border-bottom: none;

        outline: none;

        transform: none;

    }

    .navbar-nav > .active {

        border-bottom: none;

    }

    .navbar-nav > .active > a {

        background-color: rgba(224, 150, 32, 0.18);

        border-bottom: none;

        border-radius: 8px;

        color: #E09620;

        font-weight: bold;

    }

    body.ulif-page-home .navbar-custom.ulif-navbar-at-top .navbar-nav > .active > a {

        background-color: rgba(224, 150, 32, 0.14);

    }

    .logo_menu {

        left: auto;

        position: static;

        top: auto;

        width: 56px;

    }

    .navbar-custom.ulif-navbar-scrolled .logo_menu {

        width: 48px;

    }

    /* Bandeau copyright desktop : texte centré dans le footer orange. */
    .footer {

        height: auto; /* Laisse le bandeau s'adapter au texte centré sur desktop. */

        text-align: center;

    }

    .footer .copyright {

        margin-bottom: 0; /* Supprime la marge basse par défaut du paragraphe. */

        margin-left: 0; /* Annule le décalage gauche historique sur desktop. */

        text-align: center;

    }

    /* Garde le filet d'accent aligné à gauche sous les titres footer en colonnes desktop. */
    .app_footer .titre_footer::after {

        margin-left: 0;

        margin-right: auto;

    }

    /* WhatsApp flottant masqué : le contact est désormais dans les icônes sociales du footer. */
    .ulif_whatsapp_float {

        display: none !important;

    }

}

/**************   MEDIAS QUERIES MOBILES    ********************/

@media only screen and (max-width: 991.98px) {

    .menu_principal {

        margin-bottom: 0; /* Supprime la bande blanche vide entre le header et le contenu mobile. */

        min-height: 0;

        padding-top: 0; /* Le header fixed n'occupe plus d'espace dans ce wrapper. */

    }

    .ulif_header_flow_spacer {

        display: block; /* Occupe la hauteur du header fixe dans le flux de la page. */

        height: 58px; /* Hauteur header mobile : logo + icône menu uniquement. */

        margin: 0;

        padding: 0;

        pointer-events: none; /* N'intercepte pas les clics destinés au contenu. */

    }

    /* Page d'accueil : dégage le titre masqué sous le header fixe mobile. */
    .section_accueil_hero {

        padding-top: 50px; /* Marge interne légère pour afficher le début du texte d'accueil. */

    }

    /* suzy tache mobapp 45 — Hero v2 tablette/mobile : cartes flottantes repositionnées, vidéo pleine largeur. */
    .section_accueil_hero_v2.bg_principal {

        padding-top: 32px;

        padding-bottom: 48px;

    }

    .hero_enlango_content {

        padding-right: 15px;

        margin-bottom: 0;

    }

    /* Mobile : titre → sous-titre → vidéo → bouton → stats. */
    .section_accueil_hero_v2 .hero_enlango_row {

        display: flex;

        flex-direction: column;

        align-items: stretch !important;

        margin-left: 0;

        margin-right: 0;

    }

    .section_accueil_hero_v2 .hero_enlango_content,
    .section_accueil_hero_v2 .hero_enlango_zone {

        display: contents;

    }

    .section_accueil_hero_v2 .hero_enlango_title {

        order: 1;

        width: 100%;

        text-align: center;

        font-size: clamp(1.95rem, 7vw, 2.35rem);

        line-height: 1.18;

    }

    .section_accueil_hero_v2 .hero_enlango_subtitle {

        /* Landing mobile : description sous le titre hero masquée. */
        display: none !important;

    }

    .section_accueil_hero_v2 .hero_enlango_visual {

        order: 3;

        width: 100%;

        max-width: 100%;

        flex: 0 0 auto;

        margin-top: 8px;

        margin-bottom: 12px;

        padding-left: 0;

        padding-right: 0;

    }

    .section_accueil_hero_v2 .hero_visual_wrapper {

        max-width: 100%;

        margin-left: auto;

        margin-right: auto;

    }

    .section_accueil_hero_v2 .hero_stats_row {

        order: 4;

        width: 100%;

        justify-content: space-between;

        gap: 10px 12px;

        margin-top: 8px;

        margin-bottom: 8px;

    }

    .section_accueil_hero_v2 .hero_cta_wrap,

    .section_accueil_hero_v2 .hero_cta_wrap--under-video,

    .section_accueil_hero_v2 .hero_cta_wrap--hero-bottom {

        order: 10;

        width: 100%;

        flex: 0 0 100%;

        display: flex !important;

        justify-content: center;

        align-items: center;

        text-align: center;

        margin-top: 28px;

        margin-bottom: 8px;

        padding-left: 0;

        padding-right: 0;

        opacity: 1 !important;

    }

    .section_accueil_hero_v2 .hero_cta_wrap--under-video .hero_btn_cta,

    .section_accueil_hero_v2 .hero_cta_wrap--hero-bottom .hero_btn_cta {

        min-width: 220px;

        max-width: 300px;

        width: auto;

        padding: 12px 24px;

        font-size: 0.92rem;

        background: #E09620 !important;

        color: #FFFFFF !important;

        margin-left: auto;

        margin-right: auto;

    }

    .section_accueil_hero_v2 .hero_btn_cta {

        min-width: 200px;

        max-width: 280px;

        padding: 11px 24px;

        font-size: 0.9rem;

        gap: 8px;

    }

    .hero_enlango_title {

        text-align: center;

    }

    .hero_enlango_subtitle {

        max-width: 100%;

        text-align: center;

        margin-left: auto;

        margin-right: auto;

    }

    .hero_cta_wrap {

        text-align: center;

    }

    .hero_stats_row {

        justify-content: space-between;

        gap: 10px 12px;

    }

    .hero_stat_value {

        font-size: 1.35rem;

    }

    .hero_stat_label {

        font-size: 0.72rem;

    }

    .hero_visual_wrapper {

        max-width: 100%;

        padding-top: 0;

    }

    /* Badges flottants visibles aussi sur tablette/mobile, en version compacte. */
    .hero_float_badges_top {

        display: flex !important;

        position: relative;

        top: auto;

        right: auto;

        left: auto;

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: center;

        align-items: center;

        gap: 8px;

        margin: 0 0 10px;

        width: 100%;

    }

    .hero_float_card_bottom,
    .hero_float_pill {

        display: inline-flex !important;

        position: relative;

        bottom: auto;

        right: auto;

        left: auto;

        max-width: none;

    }

    .hero_float_pill {

        font-size: 0.7rem;

        padding: 6px 10px;

        white-space: normal;

        animation: hero_float_continuous 3.2s ease-in-out infinite;

    }

    .hero_float_card_bottom {

        display: inline-flex !important;

        margin-top: 10px;

        justify-content: center;

        width: auto;

        max-width: 90%;

        font-size: 0.72rem;

        padding: 8px 12px;

        animation: hero_float_continuous 3.6s ease-in-out infinite;

        animation-delay: 1.1s;

    }

    .hero_visual_wrapper {

        display: flex;

        flex-direction: column;

        align-items: center;

    }

    .section_accueil_hero .titre_section_principal {

        margin-top: 12px; /* Réduit la marge haute du titre sur mobile pour un cadrage plus naturel. */

    }

    /* Mobile : le contact WhatsApp flottant est déplacé dans le footer. */
    .ulif_whatsapp_float {

        display: none !important;

    }

    .menu_principal .navbar.fixed-top {

        position: fixed; /* Garde le header et ses tags fixés en haut sur mobile. */

        top: 0;

        left: 0;

        right: 0;

        z-index: 1030; /* Maintient le header mobile au-dessus du contenu de la page. */

        overflow: visible; /* Laisse la rangée de tags visible sous la première ligne du header. */

    }

    .navbar-custom {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding-bottom: 14px;
        padding-top: 14px;
        border: none;
        box-shadow: none;
    }

    .navbar-custom .navbar-brand {

        margin-right: 0; /* Supprime l'auto-marge qui recentrait le bloc du logo. */

        flex: 0 1 auto; /* Empêche le bloc du logo d'occuper toute la largeur en mobile. */

        order: 1; /* Garde le logo en première position à gauche. */

        width: auto !important; /* Laisse la largeur du bloc suivre uniquement celle du logo. */

    }

    .menu_principal .navbar > .w-100:last-child {

        display: none; /* Masque l'espaceur mobile qui poussait le logo vers le centre. */

    }

    .navbar-custom .navbar-collapse {
        display: none !important; /* Navigation mobile via drawer latéral gauche. */
    }

    .navbar-custom .navbar-nav {

        align-items: center !important; /* Aligne verticalement les tags pour une rangée plus propre. */

        flex-direction: row; /* Garde les tags sur une lecture horizontale naturelle. */

        flex-wrap: nowrap; /* Empêche les tags de passer en vertical sur les petits écrans. */

        gap: 8px; /* Crée l'espacement visuel entre les tags mobiles. */

        justify-content: center; /* Centre les tags lorsqu'ils tiennent sur la largeur disponible. */

        margin-left: 0 !important; /* Annule les marges auto Bootstrap sur le groupe de tags. */

        margin-right: 0 !important; /* Annule les marges auto Bootstrap sur le groupe de tags. */

        min-width: max-content; /* Garde tous les tags sur une seule ligne quand le scroll horizontal devient nécessaire. */

        padding: 6px 0 12px 0; /* Donne un espacement doux au groupe de tags dans le header. */

        white-space: nowrap; /* Empêche le texte et les tags de se casser sur plusieurs lignes. */

        width: 100%;

    }

    .logo_menu {

        left: auto;

        position: static;

        top: auto;

        width: 44px;

    }

    .mobile_header_actions {

        align-items: center; /* Aligne proprement les actions mobiles sur la droite. */

        display: flex; /* Affiche les actions mobiles dans le header. */

        flex: 0 0 auto; /* Empêche le bloc d'actions de passer sur la ligne des tags. */

        gap: 10px; /* Sépare légèrement le bouton langue et le bouton connexion. */

        order: 2; /* Place les actions mobiles à droite du logo. */

    }

    .mobile_header_action {

        margin-bottom: 0; /* Évite un décalage vertical parasite sur l'icône langue. */

    }

    .mobile_lang_action {

        align-items: center; /* Aligne le switch langue avec le bouton connexion mobile. */

        display: flex; /* Centre le switch pill dans la zone d'actions mobiles. */

    }

    .mobile_header_actions .ulif_lang_toggle_track {

        height: 32px; /* Adapte légèrement la hauteur du switch au header mobile. */

        min-width: 86px; /* Réduit un peu la largeur du switch sur petit écran. */

    }

    .mobile_header_icon_link {

        border-radius: 50%; /* Donne un rendu bouton arrondi aux actions mobiles. */

        height: 38px; /* Fixe une hauteur tactile confortable pour les icônes mobiles. */

        padding: 0 12px; /* Garde une zone cliquable suffisante autour des icônes. */

    }

    .ulif_mobile_menu_btn.mobile_header_icon_link {
        width: 34px;
        height: 34px;
        min-width: 34px;
        padding: 0;
        border-radius: 6px;
        color: #E09620;
        background: transparent;
    }

    .ulif_mobile_menu_btn.mobile_header_icon_link .fa {
        color: #E09620;
    }

    .mobile_login_link {

        width: 38px; /* Réduit le bouton connexion à une simple pastille d'icône sur mobile. */

    }

    .desktop_only_nav_item {

        display: none; /* Masque sur mobile les anciens boutons desktop du header. */

    }

    .mobile_only_nav_item {

        display: none; /* Masqué : liens accessibles via le drawer mobile. */

    }

    .navbar-custom .nav-link {

        background-color: rgba(255, 255, 255, 0.12); /* Donne aux liens mobiles un rendu de tag intégré au header. */

        border-bottom: none; /* Retire l'ancien style d'onglet souligné sur mobile. */

        border-radius: 999px; /* Transforme chaque lien mobile en pastille arrondie. */

        box-shadow: none; /* Évite toute ombre qui pourrait décaler visuellement les tags au repos. */

        font-size: 12px; /* Conserve une taille compacte adaptée aux tags mobiles. */

        margin: 0; /* Retire tout décalage parasite visible au clic sur les tags mobiles. */

        padding: 7px 12px; /* Ajuste le rembourrage pour un rendu de tag plus compact. */

        transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease; /* Anime uniquement des propriétés sans impact sur les marges. */

    }

    .navbar-custom .nav-link:hover,

    .navbar-custom .nav-link:focus {

        background-color: rgba(255, 255, 255, 0.2); /* Éclaircit légèrement le tag au survol sans changer sa taille. */

        border-bottom: none; /* Empêche le soulignement Bootstrap d'apparaître au survol mobile. */

        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); /* Ajoute un léger relief interne sans modifier les marges. */

        margin: 0; /* Conserve les marges stables pendant l'animation de survol. */

        outline: none; /* Nettoie le contour visuel parasite sur l'interaction tactile. */

        transform: none; /* Empêche tout effet de mouvement au survol des tags mobiles. */

    }

    .navbar-custom .nav-link:active {

        background-color: rgba(255, 255, 255, 0.16); /* Adoucit légèrement le tag au clic sans décaler la rangée. */

        border-bottom: none; /* Empêche le soulignement Bootstrap d'apparaître au clic sur mobile. */

        margin: 0; /* Conserve les marges stables pendant l'animation de clic. */

        opacity: 0.9; /* Donne un retour visuel léger au toucher sans changer la mise en page. */

        outline: none; /* Nettoie le contour visuel parasite sur l'interaction tactile. */

        transform: none; /* Empêche tout effet de mouvement au clic sur les tags mobiles. */

    }

    .navbar-nav > .active {

        border-bottom: none; /* Supprime l'ancienne bordure portée par le conteneur en mobile. */

    }

    .navbar-nav > .active > a {

        background-color: #E09620; /* Met en avant le tag actif avec la couleur d'accent du header. */

        border-bottom: none; /* Supprime tout soulignement pour garder un vrai rendu de tag. */

        box-shadow: 0 2px 8px rgba(224, 150, 32, 0.28); /* Ajoute une légère profondeur au tag actif sans décaler la rangée. */

        color: #FFFFFF; /* Assure un bon contraste du libellé actif sur le tag accentué. */

        font-weight: bold; /* Renforce visuellement le tag actif mobile. */

    }

    /* Footer mobile : réduit légèrement les espacements entre les textes pour compacter le bloc. */
    .app_footer .titre_footer {

        margin-bottom: 12px; /* Ajusté au filet d'accent pour garder un espacement compact. */

        margin-top: 24px; /* Réduit l'espace au-dessus des titres de colonnes sur mobile. */

    }

    /* Centre le filet d'accent sous les titres footer lorsque le texte est centré sur mobile. */
    .app_footer .titre_footer::after {

        margin-left: auto;

        margin-right: auto;

    }

    .app_footer .row > .col-sm-12:first-child .titre_footer {

        margin-top: 18px; /* Moins d'espace avant la première colonne du footer mobile. */

    }

    .app_footer .box_lien_footer {

        margin-bottom: 6px; /* Resserre l'espace vertical entre les liens du footer mobile. */

        margin-top: 0; /* Supprime toute marge haute parasite entre les lignes de liens. */

    }

    .app_footer .suivez_nous {

        margin-bottom: 8px; /* Réduit l'espace sous le libellé « Suivez-nous » sur mobile. */

        margin-top: 18px; /* Resserre l'espace avant la zone réseaux sociaux sur mobile. */

    }

    .app_footer .img_rs {

        margin-bottom: 24px; /* Réduit l'espace sous les icônes sociales sur mobile. */

        padding: 3px; /* Compacte légèrement l'espacement interne des icônes sans les rétrécir. */

    }

    .app_footer .ulif_rs_icon_whatsapp {

        margin-bottom: 24px; /* Aligne l'espacement de l'icône WhatsApp sur les autres réseaux mobile. */

        padding: 3px;

    }

    .footer {

        background: rgba(255, 255, 255, 0.03);

        height: auto; /* Laisse le bandeau copyright s'adapter au texte sur mobile. */

        min-height: 0; /* Retire la hauteur minimale qui créait un vide sous le texte. */

        padding-bottom: max(10px, env(safe-area-inset-bottom));

        padding-top: 12px;

    }

    .footer .copyright {

        margin-bottom: 0; /* Supprime la grande marge basse par défaut du paragraphe mobile. */

        margin-top: 0;

        text-align: center;

    }

    

}

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {

    .menu_principal {

        margin-bottom: 0; /* Supprime la bande blanche vide entre le header et le contenu mobile. */

        min-height: 0;

        padding-top: 0; /* Le header fixed n'occupe plus d'espace dans ce wrapper. */

    }

    .ulif_header_flow_spacer {

        display: block; /* Occupe la hauteur du header fixe dans le flux de la page. */

        height: 58px; /* Hauteur header mobile : logo + icône menu uniquement. */

        margin: 0;

        padding: 0;

        pointer-events: none; /* N'intercepte pas les clics destinés au contenu. */

    }

    .menu_principal .navbar.fixed-top {

        position: fixed; /* Garde le header et ses tags fixés en haut sur mobile. */

        top: 0;

        left: 0;

        right: 0;

        z-index: 1030; /* Maintient le header mobile au-dessus du contenu de la page. */

        overflow: visible; /* Laisse la rangée de tags visible sous la première ligne du header. */

    }

    .navbar-custom {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding-bottom: 14px;
        padding-top: 14px;
        border: none;
        box-shadow: none;
    }

    .navbar-custom .navbar-brand {

        margin-right: 0; /* Supprime l'auto-marge qui recentrait le bloc du logo. */

        flex: 0 1 auto; /* Empêche le bloc du logo d'occuper toute la largeur en mobile. */

        order: 1; /* Garde le logo en première position à gauche. */

        width: auto !important; /* Laisse la largeur du bloc suivre uniquement celle du logo. */

    }

    .menu_principal .navbar > .w-100:last-child {

        display: none; /* Masque l'espaceur mobile qui poussait le logo vers le centre. */

    }

    .navbar-custom .navbar-collapse {
        display: none !important; /* Navigation mobile via drawer latéral gauche. */
    }

    .navbar-custom .navbar-nav {

        align-items: center !important; /* Aligne verticalement les tags pour une rangée plus propre. */

        flex-direction: row; /* Garde les tags sur une lecture horizontale naturelle. */

        flex-wrap: nowrap; /* Empêche les tags de passer en vertical sur les petits écrans. */

        gap: 8px; /* Crée l'espacement visuel entre les tags mobiles. */

        justify-content: center; /* Centre les tags lorsqu'ils tiennent sur la largeur disponible. */

        margin-left: 0 !important; /* Annule les marges auto Bootstrap sur le groupe de tags. */

        margin-right: 0 !important; /* Annule les marges auto Bootstrap sur le groupe de tags. */

        min-width: max-content; /* Garde tous les tags sur une seule ligne quand le scroll horizontal devient nécessaire. */

        padding: 6px 0 12px 0; /* Donne un espacement doux au groupe de tags dans le header. */

        white-space: nowrap; /* Empêche le texte et les tags de se casser sur plusieurs lignes. */

        width: 100%;

    }

    .logo_menu

    {

        width: 44px;

        position: static;

        top: auto;

        left: auto;

    }

    .mobile_header_actions {

        align-items: center; /* Aligne proprement les actions mobiles sur la droite. */

        display: flex; /* Affiche les actions mobiles dans le header. */

        flex: 0 0 auto; /* Empêche le bloc d'actions de passer sur la ligne des tags. */

        gap: 10px; /* Sépare légèrement le bouton langue et le bouton connexion. */

        order: 2; /* Place les actions mobiles à droite du logo. */

    }

    .mobile_header_action {

        margin-bottom: 0; /* Évite un décalage vertical parasite sur l'icône langue. */

    }

    .mobile_lang_action {

        align-items: center; /* Aligne le switch langue avec le bouton connexion mobile. */

        display: flex; /* Centre le switch pill dans la zone d'actions mobiles. */

    }

    .mobile_header_actions .ulif_lang_toggle_track {

        height: 32px; /* Adapte légèrement la hauteur du switch au header mobile. */

        min-width: 86px; /* Réduit un peu la largeur du switch sur petit écran. */

    }

    .mobile_header_icon_link {

        border-radius: 50%; /* Donne un rendu bouton arrondi aux actions mobiles. */

        height: 38px; /* Fixe une hauteur tactile confortable pour les icônes mobiles. */

        padding: 0 12px; /* Garde une zone cliquable suffisante autour des icônes. */

    }

    .ulif_mobile_menu_btn.mobile_header_icon_link {
        width: 34px;
        height: 34px;
        min-width: 34px;
        padding: 0;
        border-radius: 6px;
        color: #E09620;
        background: transparent;
    }

    .ulif_mobile_menu_btn.mobile_header_icon_link .fa {
        color: #E09620;
    }

    .mobile_login_link {

        width: 38px; /* Réduit le bouton connexion à une simple pastille d'icône sur mobile. */

    }

    .desktop_only_nav_item {

        display: none; /* Masque sur mobile les anciens boutons desktop du header. */

    }

    .mobile_only_nav_item {

        display: none; /* Masqué : liens accessibles via le drawer mobile. */

    }

    .navbar-custom .nav-link {

        background-color: rgba(255, 255, 255, 0.12); /* Donne aux liens mobiles un rendu de tag intégré au header. */

        border-bottom: none; /* Retire l'ancien style d'onglet souligné sur mobile. */

        border-radius: 999px; /* Transforme chaque lien mobile en pastille arrondie. */

        box-shadow: none; /* Évite toute ombre qui pourrait décaler visuellement les tags au repos. */

        font-size: 12px; /* Conserve une taille compacte adaptée aux tags mobiles. */

        margin: 0; /* Retire tout décalage parasite visible au clic sur les tags mobiles. */

        padding: 7px 12px; /* Ajuste le rembourrage pour un rendu de tag plus compact. */

        transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease; /* Anime uniquement des propriétés sans impact sur les marges. */

    }

    .navbar-custom .nav-link:hover,

    .navbar-custom .nav-link:focus {

        background-color: rgba(255, 255, 255, 0.2); /* Éclaircit légèrement le tag au survol sans changer sa taille. */

        border-bottom: none; /* Empêche le soulignement Bootstrap d'apparaître au survol mobile. */

        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); /* Ajoute un léger relief interne sans modifier les marges. */

        margin: 0; /* Conserve les marges stables pendant l'animation de survol. */

        outline: none; /* Nettoie le contour visuel parasite sur l'interaction tactile. */

        transform: none; /* Empêche tout effet de mouvement au survol des tags mobiles. */

    }

    .navbar-custom .nav-link:active {

        background-color: rgba(255, 255, 255, 0.16); /* Adoucit légèrement le tag au clic sans décaler la rangée. */

        border-bottom: none; /* Empêche le soulignement Bootstrap d'apparaître au clic sur mobile. */

        margin: 0; /* Conserve les marges stables pendant l'animation de clic. */

        opacity: 0.9; /* Donne un retour visuel léger au toucher sans changer la mise en page. */

        outline: none; /* Nettoie le contour visuel parasite sur l'interaction tactile. */

        transform: none; /* Empêche tout effet de mouvement au clic sur les tags mobiles. */

    }

    .navbar-nav > .active {

        border-bottom: none; /* Supprime l'ancienne bordure portée par le conteneur en mobile. */

    }

    .navbar-nav > .active > a {

        background-color: #E09620; /* Met en avant le tag actif avec la couleur d'accent du header. */

        border-bottom: none; /* Supprime tout soulignement pour garder un vrai rendu de tag. */

        box-shadow: 0 2px 8px rgba(224, 150, 32, 0.28); /* Ajoute une légère profondeur au tag actif sans décaler la rangée. */

        color: #FFFFFF; /* Assure un bon contraste du libellé actif sur le tag accentué. */

        font-weight: bold; /* Renforce visuellement le tag actif mobile. */

    }

    



    .titre_section_principal

    {

        text-align: center;

        margin-top: 20px;

    }

    /* suzy tache mobapp 45 — Hero v2 petit écran : stats empilées, cartes flottantes masquées pour lisibilité. */
    .hero_enlango_title {

        font-size: clamp(1.85rem, 7.5vw, 2.15rem);

    }

    .hero_stats_row {

        gap: 8px 10px;

    }

    .hero_stat_value {

        font-size: 1.25rem;

    }

    .hero_stat_label {

        font-size: 0.68rem;

    }

    .hero_float_card_bottom,
    .hero_float_pill {

        /* Conservés visibles en compact (voir règles 991). */
        max-width: 100%;

    }

    .hero_btn_cta {

        min-width: 180px;

        max-width: 260px;

        width: auto;

        padding: 10px 22px;

        font-size: 0.875rem;

    }



    .logo_rs_bg_principal

    {

        /*margin-left: 30%;*/

        width: 100%;

    }



    .image_accueil

    {

        width: 100%;

        height: 279px;

        margin-top: 10px;

        margin-left: 0px;

    }



    .titre_section, .titre_section_colore

    {

        font-family: Candara;

        font-weight: bold;

        font-size: x-large;

        text-align: center;

    }



    .trait_long

    {

        border-bottom: 3px solid #dc8d00;

        width: 100px;

        border-radius: 10px;

        margin-left: 30%;

    }



    .icone_cat_pop

    {

        width: 80%;

        height: 200px;

        border-radius: 20px;

        margin-top: 50px;

        transition: transform 500ms ease-in-out, box-shadow 500ms linear;

    }





    .titre_citation

    {

        font-weight: bold;

        color: #E09620;

        text-transform: uppercase;

        font-size: large;

        text-align: center;

    }



    .description_citation

    {

        font-size: large;

        font-weight: 500;

        text-align: center;

    }



    .titre_footer

    {

        margin-bottom: 12px; /* Ajusté au filet d'accent sur petit écran. */

        margin-top: 24px; /* Aligné avec le resserrement des espacements footer mobile. */

        text-align: center;

    }

    .app_footer .titre_footer::after {

        margin-left: auto; /* Centre le filet d'accent sous le titre sur petit écran. */

        margin-right: auto;

    }



    .box_lien_footer

    {

        margin-bottom: 6px; /* Resserre l'espace vertical entre les liens du footer sur petit écran. */

        margin-top: 0;

        text-align: center;

    }



    .copyright

    {

        font-size: small;

        margin-bottom: 0; /* Supprime l'espace vide sous le texte copyright sur petit écran. */

        margin-left: 0px;

        margin-top: 0;

        text-align: center;

    }



    .designed

    {

        text-align: center;

        margin-top: -10px;

    }





    .footer

    {

        background: rgba(255, 255, 255, 0.03);

        float: none;

        height: auto; /* Remplace l'ancienne hauteur fixe trop grande sur petit écran. */

        min-height: 0; /* Retire la réserve de hauteur inutile sous le copyright mobile. */

        padding-bottom: max(10px, env(safe-area-inset-bottom));

        padding-top: 12px;

        text-align: center;

    }



    .titre_read_course

    {

        font-size: medium;

    }



}



/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {





}



/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {



}



/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {



}



/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {



}



/************* CSS FORMULAIRES CONNEXION *****************/



.form_connexion

{

    padding: 50px;

}



.arriere_form

{

    margin-top: 50px;

    background-color: #fff;

    border-radius: 10px;

    margin-bottom: 50px;

}



.titre_form

{

    font-family: Candara;

    font-weight: bold;

    text-transform: uppercase;

    color: #E09620;

    font-size: medium;
}


.bg_form


{

    background-color: #F9F9F9;

    padding-bottom: 60px;

    background-image: url("../assets/img/epargne.jpg");

    background-size: cover;

    border-radius: 10px 0 0 10px;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: 25% center; 

}



.btn_form

{

    background-color: #111111;

    border-radius: 50px;

    color: white;

    font-weight: 600;

    margin-top: 20px;

    text-transform: uppercase;

    font-size: medium;

    transition: background-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;

    width: 100%;

    border: 1px solid #E09620;

}



.btn_form:hover

{

    background-color: #E09620;

    color: white;

    transform: scale(1.02);

    -moz-transform: scale(1.02);

    -webkit-transform: scale(1.02);

    -ms-transform: scale(1.02);

    box-shadow: 0 10px 20px rgba(224, 150, 32, 0.25);

}



.btn_form:active,

.btn_form:focus

{

    background-color: #000000;

    color: #ffffff;

    outline: none;

    box-shadow: 0 0 0 0.2rem rgba(224, 150, 32, 0.25);

}



.pay-card

{
    background-color: #ffffff;
    border: 2px solid rgba(224, 150, 32, 0.15);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
    padding: 35px 30px;
    margin-bottom: 40px;
}



.pay-card .form_connexion

{
    padding: 0 !important;
}



.pay-card-header

{
    margin-bottom: 28px;
}



.pay-card-title

{
    font-size: 1.25rem;
    font-weight: 700;
    color: #E09620;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}



.pay-card-title i

{
    color: #E09620;
    font-size: 1.2rem;
}



.pay-card-subtitle

{
    color: #4b4b4b;
    margin: 0;
    font-size: 0.95rem;
}



.input-icon-group label,

.operator-option-group label,

.form-check label

{
    color: #111111;
    font-weight: 600;
}



.input-icon-wrapper

{
    position: relative;
}



.input-icon-wrapper .input-icon

{
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #E09620;
    font-size: 0.95rem;
    pointer-events: none;
}



 .pay-input

{
    padding-left: 45px;
    border-radius: 16px;
    border: 1px solid rgba(224, 150, 32, 0.35);
    background-color: rgba(224, 150, 32, 0.10);
    color: #111111;
}



.pay-input:focus

{
    border-color: #E09620;
    box-shadow: 0 0 0 0.15rem rgba(224, 150, 32, 0.22);
    background-color: rgba(255, 255, 255, 1);
}

.pay-price

{
    background-color: rgba(224, 150, 32, 0.12) !important;
    border: 1px solid rgba(224,150,32,0.28) !important;
    color: #111111;
}

.affiliation-group

{
    border-radius: 12px;
    padding: 12px;
    transition: background-color 200ms ease, border-color 200ms ease;
}

.affiliation-group.active

{
    background-color: rgba(224,150,32,0.10);
    border: 1px solid rgba(224,150,32,0.18);
}

.pay-affiliation-input

{
    background-color: #ffffff !important;
    border: 1px solid #E09620 !important;
    border-radius: 10px;
    padding: 10px 12px;
}

 .pay-title

 {
    color: #E09620;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}


 .pay-title strong

 {
    color: #E09620;
}


 .pay-toast

 {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1080;
    max-width: min(460px, calc(100% - 40px));
    background: linear-gradient(135deg, #E09620 0%, #ffb260 100%);
    color: #ffffff;
    border-radius: 18px;
    padding: 16px 20px 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateX(110%);
    transition: transform 0.45s ease, opacity 0.45s ease;
    overflow: hidden;
}


 .pay-toast.slide-in

 {
    opacity: 1;
    transform: translateX(0);
}


 .pay-toast.fade-out

 {
    opacity: 0;
    transform: translateX(110%);
    transition: transform 0.35s ease, opacity 0.35s ease;
}


 .pay-toast::before

 {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.25), rgba(255,255,255,0.9));
    animation: toast-border 2.2s linear infinite;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}


 @keyframes toast-border

 {
    0%, 100% { background-position: 0 0; }
    50% { background-position: 0 100%; }
}


 @media only screen and (max-width: 767px) {
    .pay-card {
        padding: 24px 20px;
        border-radius: 18px;
    }
    .operator-option-group {
        gap: 10px;
        justify-content: space-between;
    }
    .pay-toast {
        right: 12px;
        left: 12px;
    }
}



.operator-option-group

{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}



.operator-option

{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 10px 16px;
    min-width: 140px;
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
    color: #111111;
    background-color: #ffffff;
    font-weight: 500;
}



.operator-option input

{
    display: none;
}



.operator-option .operator-icon

{
    color: #E09620;
    font-size: 1rem;
}



.operator-option:hover

{
    border-color: #E09620;
    background-color: rgba(224, 150, 32, 0.07);
}



.operator-option input:checked + .operator-icon + span,

.operator-option input:checked + span

{
    color: #111111;
}



.operator-option input:checked + .operator-icon,

.operator-option input:checked + span

{
    font-weight: 700;
}



.operator-option input:checked ~ .operator-icon,

.operator-option input:checked ~ span

{
    color: #111111;
}



.operator-option input:checked ~ .operator-icon

{
    color: #E09620;
}



.operator-option input:checked ~ span

{
    text-transform: uppercase;
}



.form-text.text-muted

{
    color: #6c6c6c !important;
    font-size: 0.9rem;
}



@media only screen and (max-width: 767px) {
    .pay-card {
        padding: 24px 20px;
        border-radius: 18px;
    }
    .operator-option-group {
        gap: 10px;
        justify-content: space-between;
    }
}



.lien_form

{

    text-transform: uppercase;

    font-size: small;

    font-weight: bold;

    color: #333333;

}





/************* CSS DE LA PAGE ABOUT *****************/



.sous_titre_about

{

    margin-top: 20px;

    font-size: medium;

    color: #53893d;

    font-family: Candara;

    text-transform: none; /* Garde « ulif.app » en minuscules */

}



.img_about

{

    margin-top: 7em;

    width: 100%;

}



.img_about_3

{

    margin-top: 3em;

    width: 100%;

}



.img_about_3s

{

    margin-top: 3em;

    width: 100%;

    height: 350px;

    margin-bottom: 50px;

}



.section_about_2

{

    background-color: #f8f8f8;

}



/******* CSS DE LA PAGE CONTACT *******/



.arriere_contact

{

    margin-top: 50px;

    margin-bottom: 50px;

}



.arriere_form_contact

{

    margin-top: 30px;

    background-color: #fff;

    border-radius: 10px;

    margin-bottom: 50px;

}



.icon_contact

{

    height: 50px;

    width: 50px;

    background-color: #E09620;

    color: #fff;

    font-size: x-large;

    padding: 10px;

    border-radius: 5px;

    float: left;

}



.text_contact_icone

{

    padding: 10px;

    font-weight: bold;

}



.description_contact_icone

{

    padding: 10px;

    margin-left: 50px;

    margin-top: -10px;

}



.i_ulif

{

    text-transform: none

}





/*********** CSS DETAILLE DE LA PAGE PRODUIT COURS **********/



.titre_complete_course

{

    margin-top: 50px;

    font-size: large;

    text-transform: uppercase;

    font-family: Candara;

    font-weight: bold;

}



.zone_enrol

{

    margin-top: 50px;

}



.btn_enrol

{

    margin-top: 20px;

    background-color: #E09620;

    border-radius: 50px;

    color: white;

    font-weight: 500;

    width: 100%;

    /*box-shadow: -1px 5px 6px 0px rgba(0,0,0,0.75);*/

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

    font-size: medium;

    text-transform: uppercase;

}



.btn_enrol:hover

{

    color: #fff;

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);



}



.zone_about_course

{

    background-color: #fff;

    border-radius: 5px;

    padding: 20px;

    margin-bottom: 30px;



}



.product

{

    background-color: #f2f3f5;

    padding: 10px;

}



.titre_resume

{

    margin-top: 10px;

    margin-bottom: 15px;

    font-size: large;

    text-transform: uppercase;

    font-family: Candara;

    font-weight: bold;

}



.icon_stats

{

    height: 20px;

    width: 20px;

    background-color: #E09620;

    color: #fff;

    font-size: x-large;

    padding: 10px;

    border-radius: 5px;

    float: left;

}



.zone_formats

{

    margin-top: 20px;

    background-color: #fff;

    border-radius: 5px;

    padding: 20px;

    margin-bottom: 20px;

}



.btn_achat

{

    margin-top: -50px;

    background-color: #333333;

    border-radius: 50px;

    color: white;

    font-weight: 500;

    /*box-shadow: -1px 5px 6px 0px rgba(0,0,0,0.75);*/

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

    padding-top: 10px;

    padding-bottom: 10px;

    padding-left: 30px;

    padding-right: 30px;

    z-index: 5000;

    text-transform: uppercase;

    font-size: medium;

}



.btn_achat:hover

{

    color: #fff;

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}



.section_banner

{

    margin-bottom: 20px;

}





/*********** CSS DETAILLE DE LA PAGE SHOP **********/



.shop

{

    background-color: #f5f7fa;

}



.titre_section_shop

{

    margin-top: 80px;

    font-family: Candara;

    font-weight: bold;

    text-transform: uppercase;

    font-size: x-large;



}



.trait_center

{

    height: 3px;

    background-color: #E09620;

    width: 300px;

    margin-top: -5px;

}







/********** CSS PAGE CATEGORIES ***********/

.section_formations

{

    background-color: #fdc686;

}





/******     CSS PAGE ESPACE UTILISATEUR ************/



.user_space

{

    background-color: #f0f0f0;

    min-height: 100vh;

}



.menu_droite

{

    background-color: #333333;

    /*min-height: 100vh;*/

    /*position: fixed;*/

    z-index: 5000

}



.logo_user_space

{

    /*background-color: red;*/

    width: 110px;

    height: 100px;

}



#menu_user a

{

    color: #f5f7fa;

    padding: 15px;

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

    font-family: Candara;

}



#menu_user a:hover

{

    background-color: #E09620;

    border-radius: 3px;

    font-family: Candara;



}



#menu_user > .active > a

{

    color: #fff;

    font-weight: bold;

    font-family: Candara;



}



#menu_user > .active

{

    background-color: #E09620;

    border-right: 10px solid #E09620;

    border-radius: 3px;

    font-family: Candara;

}



#menu_user > li

{

    list-style: none;

}

/* Menu bottom mobile modulaire (espace user, réutilisable admin). */
@media only screen and (max-width: 767.98px) {

    .user_space {

        padding-top: 80px; /* Réserve la place pour le header mobile fixe (hauteur réduite). */

        padding-bottom: 92px; /* Réserve la place pour le bottom menu fixe sur mobile. */

    }

    /* Header mobile espace utilisateur (arc + logo + titre + actions). */
    .ulif_mobile_header {

        background-color: #FFFFFF; /* Fond blanc sur la partie droite du header. */

        height: 80px; /* Hauteur réduite pour un header plus compact. */

        left: 0;

        overflow: hidden; /* Masque le débordement de l'arc décoratif. */

        position: fixed;

        right: 0;

        top: 0;

        z-index: 5002; /* Au-dessus de la sidebar (5000) et du bottom menu (5001). */

    }

    /* Arc demi-cercle orange clair (dérivé de la charte #E09620). */
    .ulif_mobile_header_arc {

        background-color: #F4C97A; /* Orange clair ULiF pour la forme courbe gauche. */

        border-bottom-right-radius: 80% 100%; /* Arc légèrement plus compact. */

        height: 100%;

        left: 0;

        position: absolute;

        top: 0;

        width: 60%; /* Arc réduit pour laisser plus de place aux icônes. */

        z-index: 0;

    }

    /* Barre interne : logo/titre à gauche, actions à droite. */
    .ulif_mobile_header_bar {

        align-items: flex-start;

        display: flex;

        height: 100%;

        justify-content: space-between;

        padding: 5px 10px 4px 10px; /* Padding réduit pour header compact. */

        position: relative;

        z-index: 1;

    }

    /* Bloc logo + titre de page. */
    .ulif_mobile_header_brand {

        display: flex;

        flex: 1 1 auto;

        flex-direction: column;

        justify-content: flex-start;

        min-width: 0;

        padding-right: 6px;

        position: relative; /* Assure que le titre reste au-dessus de l'arc. */

        z-index: 2;

    }

    .ulif_mobile_header_logo_link {

        display: inline-block;

        flex-shrink: 0; /* Empêche le logo d'écraser le titre en dessous. */

        line-height: 0;

        text-decoration: none;

    }

    .ulif_mobile_header_logo {

        display: block; /* Évite le débordement vertical de l'image sur le titre. */

        height: auto;

        max-height: 38px; /* Limite la hauteur du logo pour libérer le sous-titre. */

        max-width: 58px; /* Logo plus petit, adapté au header compact. */

        object-fit: contain; /* Conserve les proportions sans déborder. */

        width: auto;

    }

    /* Titre sous le logo : 1er mot blanc, suite noire, trait blanc sur toute la phrase. */
    .ulif_mobile_header_title {

        flex-shrink: 0; /* Garantit l'affichage du sous-titre sous le logo. */

        line-height: 1;

        margin: 3px 0 0 1px; /* Petit espace sous le logo réduit. */

        padding: 0;

        position: relative;

        z-index: 2;

    }

    .ulif_mobile_header_title_line {

        border-bottom: 1px solid #FFFFFF; /* Trait blanc fin sous toute la phrase. */

        display: inline-block;

        font-family: Candara, sans-serif;

        font-size: 14px; /* Sous-titre plus petit, lisible sous le logo. */

        font-weight: bold;

        line-height: 1.15;

        padding-bottom: 1px;

    }

    .ulif_mobile_header_title_part1 {

        color: #FFFFFF; /* Premier mot en blanc sur l'arc jaune. */

    }

    .ulif_mobile_header_title_part2 {

        color: #000000; /* Seconde partie en noir comme sur la maquette. */

    }

    /* Actions droite : cloche notifications + profil (icônes seules). */
    .ulif_mobile_header_actions {

        align-items: center;

        display: flex;

        flex: 0 0 auto;

        flex-shrink: 0;

        gap: 4px; /* Espacement entre la cloche et le bouton profil. */

        padding-top: 4px;

    }

    .ulif_mobile_header_action {

        align-items: center;

        display: inline-flex;

        justify-content: center;

    }

    .ulif_mobile_header_icon_link {

        border-radius: 50%;

        color: #333333;

        height: 34px;

        padding: 0 6px;

        position: relative;

        text-decoration: none;

        transition: color 0.2s ease;

        width: 34px;

    }

    .ulif_mobile_header_icon_link:hover,

    .ulif_mobile_header_icon_link:focus {

        color: #E09620; /* Accent orange ULiF au survol. */

        outline: none;

        text-decoration: none;

    }

    /* Icône active (page courante, ex. profil sur u/settings). */
    .ulif_mobile_header_icon_link.is-active {

        color: #E09620; /* Accent orange ULiF comme le bottom menu actif. */

    }

    .ulif_mobile_header_icon_link .fa {

        font-size: 18px;

        line-height: 34px;

    }

    .ulif_mobile_header_icon_wrap {

        display: inline-block;

        line-height: 1;

        position: relative;

    }

    /* Badge rouge sur la cloche (messages non lus). */
    .ulif_mobile_header_badge {

        background-color: #E74C3C; /* Rouge notification comme sur la maquette. */

        border-radius: 999px;

        color: #FFFFFF;

        font-family: Candara, sans-serif;

        font-size: 9px;

        font-weight: bold;

        line-height: 1;

        min-width: 14px;

        padding: 2px 4px;

        position: absolute;

        right: -6px;

        text-align: center;

        top: -4px;

    }

    /* Variante header admin mobile : compact, sans logo ni arc orange. */
    .ulif_mobile_header--admin {

        height: 64px; /* Hauteur réduite pour le header admin. */

        overflow: visible; /* Pas d'arc à masquer : débordement inutile. */

    }

    /* Réserve l'espace sous le header admin compact (uniquement espace admin). */
    .user_space:has(.ulif_mobile_header--admin) {

        padding-top: 64px; /* Aligné sur la hauteur du header admin. */

    }

    /* Barre interne admin : padding vertical réduit. */
    .ulif_mobile_header--admin .ulif_mobile_header_bar {

        align-items: center; /* Centre verticalement titre et actions sans logo. */

        padding: 6px 10px 6px 12px; /* Padding compact pour header admin. */

    }

    /* Bloc titre seul (sans logo) : occupe la zone gauche. */
    .ulif_mobile_header--admin .ulif_mobile_header_brand {

        justify-content: center; /* Centre le titre verticalement dans la barre. */

        padding-right: 8px; /* Espace avant les icônes à droite. */

    }

    /* Titre admin sans arc : pas de marge liée au logo. */
    .ulif_mobile_header--admin .ulif_mobile_header_title {

        margin: 0; /* Supprime l'espace réservé sous le logo. */

    }

    /* Soulignement admin : accent orange ULiF au lieu du trait blanc sur l'arc. */
    .ulif_mobile_header--admin .ulif_mobile_header_title_line {

        border-bottom-color: #E09620; /* Trait orange charte ULiF. */

        font-size: 15px; /* Titre légèrement plus grand sans logo. */

    }

    /* Premier mot du titre admin : orange charte (remplace le blanc sur arc). */
    .ulif_mobile_header--admin .ulif_mobile_header_title_part1 {

        color: #E09620; /* Accent orange ULiF. */

    }

    /* Actions header admin : alignement centré verticalement. */
    .ulif_mobile_header--admin .ulif_mobile_header_actions {

        padding-top: 0; /* Pas de décalage lié au logo. */

    }

    /* Bouton déconnexion sur la page Profil / Paramètres (mobile). */
    .ulif_settings_logout_btn {

        background-color: #FFFFFF;

        border: 1px solid #333333;

        border-radius: 999px;

        color: #333333;

        font-family: Candara, sans-serif;

        font-weight: bold;

        padding: 10px 16px;

        transition: background-color 0.2s ease, color 0.2s ease;

    }

    .ulif_settings_logout_btn:hover,

    .ulif_settings_logout_btn:focus {

        background-color: #E09620; /* Accent orange ULiF au survol. */

        border-color: #E09620;

        color: #FFFFFF;

        outline: none;

        text-decoration: none;

    }

    .ulif_bottom_nav {

        bottom: 10px;

        left: 8px;

        /* Safe-area hors de la pilule → les icônes restent centrées dans le track. */
        padding-bottom: env(safe-area-inset-bottom);

        position: fixed;

        right: 8px;

        z-index: 5001;

    }

    .ulif_bottom_nav_track {

        align-items: center;

        background-color: #FFFFFF;

        border-radius: 999px;

        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);

        display: flex;

        justify-content: space-between;

        /* Padding vertical équilibré (plus de gros bas qui poussait le contenu vers le haut). */
        padding: 10px 6px;

    }

    .ulif_bottom_nav_item {

        align-items: center;

        color: #282821;

        display: flex;

        flex: 1 1 0;

        flex-direction: column;

        font-family: Candara, sans-serif;

        justify-content: center;

        min-width: 0;

        padding: 6px 2px;

        text-align: center;

        text-decoration: none;

        transition: color 0.2s ease;

    }

    .ulif_bottom_nav_item:hover,

    .ulif_bottom_nav_item:focus {

        color: #282821;

        outline: none;

        text-decoration: none;

    }

    .ulif_bottom_nav_item.is-active {

        color: #282821;

        font-weight: bold;

    }

    .ulif_bottom_nav_icon_wrap {

        display: block;

        font-size: 17px;

        line-height: 1.1;

        position: relative;

    }

    .ulif_bottom_nav_label {

        display: block;

        font-size: 9px;

        letter-spacing: 0.02em;

        line-height: 1.15;

        margin-top: 3px;

        max-width: 100%;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }

    .ulif_bottom_nav_badge {

        background-color: #E09620;

        border-radius: 999px;

        color: #FFFFFF;

        font-size: 9px;

        font-weight: bold;

        line-height: 1;

        min-width: 14px;

        padding: 2px 4px;

        position: absolute;

        right: -8px;

        top: -6px;

    }

    /* Bouton central « + » du bottom nav admin (type hub). */
    .ulif_bottom_nav_item--hub {

        flex: 0 0 auto; /* Largeur fixe pour le bouton surélevé. */

        margin-top: -12px; /* Légèrement au-dessus, sans déséquilibrer le track. */

        padding: 0 4px; /* Espacement latéral minimal. */

    }

    .ulif_bottom_nav_hub_btn {

        align-items: center; /* Centre l'icône verticalement. */

        background-color: #E09620; /* Orange accent ULiF. */

        border-radius: 50%; /* Forme circulaire. */

        box-shadow: 0 4px 12px rgba(224, 150, 32, 0.45); /* Ombre portée orange. */

        color: #FFFFFF; /* Icône blanche. */

        display: flex; /* Flexbox pour centrer l'icône. */

        height: 44px; /* Diamètre du bouton. */

        justify-content: center; /* Centre l'icône horizontalement. */

        width: 44px; /* Diamètre du bouton. */

    }

    .ulif_bottom_nav_item--hub.is-active .ulif_bottom_nav_hub_btn {

        background-color: #C8841A; /* Orange plus foncé quand actif. */

    }

    .ulif_bottom_nav_item--hub .fa {

        font-size: 18px; /* Taille de l'icône « + ». */

        line-height: 1; /* Pas d'espace vertical superflu. */

    }

    /* Bouton hub = <button> : reset styles navigateur. */
    button.ulif_bottom_nav_item--hub {
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        border: none;
        cursor: pointer;
        font: inherit;
        color: inherit;
    }

    button.ulif_bottom_nav_item--hub.is-open .ulif_bottom_nav_hub_btn {
        background-color: #111111;
        transform: rotate(45deg);
        transition: transform 0.25s ease, background-color 0.2s ease;
    }

    .ulif_bottom_nav_hub_btn {
        transition: transform 0.25s ease, background-color 0.2s ease;
    }

    /* ========== Panneau hub « + » : slide bas → haut, couvre la bottom nav ========== */
    .ulif_admin_hub_sheet {
        --ulif-hub-duration: 5.5s;
        --ulif-hub-accent: #E09620;
        --ulif-hub-accent-rgb: 224, 150, 32;
        /* Aligné sur .ulif_bottom_nav (left/right/bottom) pour recouvrir le track. */
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: 10px;
        z-index: 12050; /* Au-dessus de .ulif_bottom_nav (5001). */
        max-height: min(72vh, 520px);
        border-radius: 28px;
        opacity: 1;
        /* Part entièrement sous l’écran, remonte pour couvrir le menu. */
        transform: translateY(calc(100% + 32px));
        transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.28, 1);
        pointer-events: none;
        visibility: hidden;
    }

    .ulif_admin_hub_sheet.is-open {
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
    }

    .ulif_admin_hub_sheet.is-leaving {
        transform: translateY(calc(100% + 32px));
        pointer-events: none;
        visibility: visible;
    }

    /* Ancien contour rotatif désactivé. */
    .ulif_admin_hub_sheet__border {
        display: none !important;
    }

    .ulif_admin_hub_sheet__inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        max-height: inherit;
        margin: 0;
        /* Padding bas pour recouvrir confortablement la barre de nav. */
        padding: 16px 14px calc(22px + env(safe-area-inset-bottom));
        border-radius: 28px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94));
        border: 1px solid rgba(224, 150, 32, 0.28);
        border-left: 4px solid var(--ulif-hub-accent);
        box-shadow: 0 18px 50px rgba(16, 28, 44, 0.22), 0 4px 18px rgba(224, 150, 32, 0.2);
        overflow: hidden;
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        min-height: calc(78px + env(safe-area-inset-bottom));
    }

    /*
     * Bordure orange du formulaire : se consomme autour
     * (même logique timer que .ulif-app-toast__progress).
     */
    .ulif_admin_hub_sheet__trace {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 5;
        overflow: visible;
        border-radius: inherit;
    }

    .ulif_admin_hub_sheet__trace rect {
        fill: none;
        /* Orange discret — moins visible que le plein #E09620. */
        stroke: rgba(var(--ulif-hub-accent-rgb), 0.38);
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 100;
        stroke-dashoffset: 0;
        opacity: 1;
    }

    .ulif_admin_hub_sheet.is-open .ulif_admin_hub_sheet__trace rect {
        animation: ulif_admin_hub_border_progress var(--ulif-hub-duration) linear forwards;
    }

    @keyframes ulif_admin_hub_border_progress {
        from { stroke-dashoffset: 0; }
        to { stroke-dashoffset: 100; }
    }

    .ulif_admin_hub_sheet__head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .ulif_admin_hub_sheet__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(224, 150, 32, 0.14);
        border: 1px solid rgba(224, 150, 32, 0.35);
        color: #E09620;
        font-size: 1.05rem;
        flex-shrink: 0;
    }

    .ulif_admin_hub_sheet__titles {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ulif_admin_hub_sheet__titles strong {
        color: #111111;
        font-size: 0.92rem;
        font-weight: 800;
        line-height: 1.2;
    }

    .ulif_admin_hub_sheet__titles span {
        color: #111111;
        opacity: 0.65;
        font-size: 0.72rem;
        font-weight: 600;
    }

    .ulif_admin_hub_sheet__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        overflow-y: auto;
        max-height: min(42vh, 280px);
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .ulif_admin_hub_sheet__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 72px;
        padding: 10px 6px;
        border-radius: 12px;
        background: #ffffff;
        border: 1px solid rgba(17, 17, 17, 0.1);
        color: #111111;
        text-decoration: none;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    }

    .ulif_admin_hub_sheet__link .fa {
        color: #E09620;
        font-size: 1.1rem;
    }

    .ulif_admin_hub_sheet__link span {
        font-size: 0.62rem;
        font-weight: 700;
        line-height: 1.2;
        color: #111111;
    }

    .ulif_admin_hub_sheet__link:hover,
    .ulif_admin_hub_sheet__link:focus {
        text-decoration: none;
        border-color: #E09620;
        background: rgba(224, 150, 32, 0.1);
        transform: translateY(-2px);
        color: #111111;
    }

    .ulif_admin_hub_sheet__link--logout {
        border-color: rgba(17, 17, 17, 0.35);
    }

    .ulif_admin_hub_sheet__link--logout .fa {
        color: #111111;
    }

    /* Barre de progression bas — orange doux (même logique toast, moins saturé). */
    .ulif_admin_hub_sheet__progress {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: rgba(var(--ulif-hub-accent-rgb), 0.1);
        overflow: hidden;
        z-index: 3;
    }

    .ulif_admin_hub_sheet__progress::after {
        content: "";
        display: block;
        height: 100%;
        width: 100%;
        background: linear-gradient(
            90deg,
            rgba(var(--ulif-hub-accent-rgb), 0.15),
            rgba(var(--ulif-hub-accent-rgb), 0.42)
        );
        transform-origin: left center;
        transform: scaleX(1);
    }

    .ulif_admin_hub_sheet.is-open .ulif_admin_hub_sheet__progress::after {
        animation: ulif_admin_hub_progress var(--ulif-hub-duration) linear forwards;
    }

    @keyframes ulif_admin_hub_progress {
        from { transform: scaleX(1); }
        to { transform: scaleX(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        .ulif_admin_hub_sheet,
        .ulif_admin_hub_sheet__trace rect,
        .ulif_admin_hub_sheet__progress::after,
        .ulif_bottom_nav_hub_btn {
            animation: none !important;
            transition: none !important;
        }
    }

    /* Grille du menu hub « + » admin (page amore — fallback desktop). */
    .ulif_admin_more_grid {

        display: grid; /* Grille responsive. */

        gap: 12px; /* Espacement entre les tuiles. */

        grid-template-columns: repeat(3, 1fr); /* 3 colonnes sur mobile. */

        padding: 8px 4px 16px; /* Marges intérieures. */

    }

    .ulif_admin_more_item {

        align-items: center; /* Centre le contenu verticalement. */

        background-color: #FFFFFF; /* Fond blanc comme les cartes existantes. */

        border-radius: 12px; /* Coins arrondis cohérents avec le projet. */

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Ombre légère. */

        color: #333333; /* Texte sombre. */

        display: flex; /* Flexbox colonne. */

        flex-direction: column; /* Icône au-dessus du libellé. */

        font-family: Candara, sans-serif; /* Police du projet. */

        justify-content: center; /* Centre le contenu. */

        min-height: 88px; /* Hauteur minimale des tuiles. */

        padding: 12px 8px; /* Espacement intérieur. */

        text-align: center; /* Texte centré. */

        text-decoration: none; /* Pas de soulignement. */

        transition: color 0.2s ease, box-shadow 0.2s ease; /* Transition douce. */

    }

    .ulif_admin_more_item:hover,
    .ulif_admin_more_item:focus {

        box-shadow: 0 4px 14px rgba(224, 150, 32, 0.2); /* Survol : ombre orange. */

        color: #E09620; /* Survol : accent orange ULiF. */

        outline: none; /* Pas de contour navigateur. */

        text-decoration: none; /* Pas de soulignement au survol. */

    }

    .ulif_admin_more_icon_wrap {

        color: #E09620; /* Icônes en orange ULiF. */

        display: block; /* Bloc pour l'icône. */

        font-size: 22px; /* Taille des icônes. */

        line-height: 1; /* Pas d'espace vertical superflu. */

        margin-bottom: 8px; /* Espace sous l'icône. */

    }

    .ulif_admin_more_label {

        display: block; /* Bloc pour le libellé. */

        font-size: 11px; /* Taille du texte. */

        line-height: 1.2; /* Interligne compact. */

        word-break: break-word; /* Coupe les mots longs si besoin. */

    }

    .ulif_admin_more_item--logout .ulif_admin_more_icon_wrap {

        color: #E74C3C; /* Rouge pour la déconnexion. */

    }

    .ulif_admin_more_item--logout:hover,
    .ulif_admin_more_item--logout:focus {

        color: #E74C3C; /* Rouge conservé au survol déconnexion. */

    }

}



.content_userspace

{

    background-color: #f0f0f0;

    padding: 10px;

}



.stats_box

{

    background-color: #E09620;

}



.stats_box_no_color

{

    border-radius: 5px;

    /*width: 100px;*/

    height: 100px;

    padding: 10px;

    text-align: center;

    margin-top: 10px;

    margin-left: 50px;

}



.titre_stats

{

    margin-top: 50px;

    margin-left: 50px;

    padding: 10px;

    font-family: Candara;

    font-weight: bold;

}



.titre_user

{

    margin-top: 20px;

    margin-left: 50px;

    padding: 10px;

    font-family: Candara;

    font-weight: bold;

    font-size: medium;

    text-transform: uppercase;

    /*text-transform: uppercase;*/

}



.titre_user_space

{

    font-family: Candara;

    font-weight: bold;

    text-transform: uppercase;

    margin-top: 50px;

    font-size: medium;

}



.titre_read_course

{

    font-family: Candara;

    font-weight: bold;

    text-transform: uppercase;

    margin-top: 10px;

}



.description_user

{

    margin-left: 50px;

    padding-left: 10px;

}



/************** CSS PAGE CATEGORIE ************/



.btn_add

{

    background-color: #E09620;

    border-radius: 50px;

    color: white;

    font-weight: 500;

    width: auto;

    text-transform: uppercase;

    font-size: medium;

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

}



.btn_add:hover

{

    color: white;

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}



.btn_add_dark

{

    background-color: #333333;

    border-radius: 50px;

    color: white;

    font-weight: 500;

    width: auto;

    text-transform: uppercase;

    font-size: medium;

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

}



.btn_add_dark:hover

{

    color: white;

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}



.ico_edit

{

    text-decoration: none;

    color: #333333;

}

.ended_button{
    color: white;
    background-color:#e09620 ; 
    border: 1px solid #e09620;
}

/* suzy tache mobapp 45 — Footer public modulaire : alignement bloc marque, colonnes et réseaux. */

.ulif_whatsapp_float { display: none !important; } /* suzy tache mobapp 45 — Masque le bouton WhatsApp flottant (déjà dans le footer). */

.app_footer .container { /* suzy tache mobapp 45 — Respiration interne du footer public. */
    padding-top: 28px; /* suzy tache mobapp 45 — Espace haut cohérent avec la grille. */
    padding-bottom: 16px; /* suzy tache mobapp 45 — Espace bas avant la bande copyright. */
}

.ulif_footer_main_row { /* suzy tache mobapp 45 — Ligne principale logo + colonnes de liens. */
    align-items: flex-start; /* suzy tache mobapp 45 — Aligne le haut des colonnes sur desktop. */
}

.ulif_footer_brand_col { /* suzy tache mobapp 45 — Colonne marque ULiF. */
    margin-bottom: 8px; /* suzy tache mobapp 45 — Espace sous la marque sur mobile. */
    margin-top: -6px; /* suzy tache mobapp 45 — Remonte légèrement le bloc marque. */
}

.ulif_footer_brand { /* suzy tache mobapp 45 — Bloc logo + résumé. */
    display: flex; /* suzy tache mobapp 45 — Empile logo et texte. */
    flex-direction: column; /* suzy tache mobapp 45 — Disposition verticale. */
    align-items: flex-start; /* suzy tache mobapp 45 — Alignement à gauche desktop. */
}

.ulif_footer_brand_logo_link { /* suzy tache mobapp 45 — Lien autour du logo footer. */
    display: inline-block; /* suzy tache mobapp 45 — Évite l'espace inline sous l'image. */
    margin-bottom: 10px; /* suzy tache mobapp 45 — Espace avant le résumé. */
}

.ulif_footer_brand_logo { /* suzy tache mobapp 45 — Taille du logo footer. */
    width: 96px; /* suzy tache mobapp 45 — Largeur adaptée à la colonne marque. */
    height: auto; /* suzy tache mobapp 45 — Conserve les proportions. */
}

.ulif_footer_brand_summary { /* suzy tache mobapp 45 — Texte descriptif sous le logo. */
    color: #FFFFFF; /* suzy tache mobapp 45 — Texte blanc sur fond #333. */
    font-size: 0.9rem; /* suzy tache mobapp 45 — Taille lisible. */
    line-height: 1.6; /* suzy tache mobapp 45 — Interligne confortable. */
    margin: 0; /* suzy tache mobapp 45 — Retire la marge Bootstrap par défaut. */
    max-width: 300px; /* suzy tache mobapp 45 — Largeur de lecture optimale. */
}

.ulif_footer_links_row { /* suzy tache mobapp 45 — Grille des 4 colonnes de liens. */
    width: 100%; /* suzy tache mobapp 45 — Occupe toute la colonne droite. */
}

.app_footer .ulif_footer_links_row .titre_footer { /* suzy tache mobapp 45 — Corrige le décalage vertical des titres de colonnes. */
    margin-top: 0; /* suzy tache mobapp 45 — Annule le margin-top: 50px global qui cassait l'alignement. */
    margin-bottom: 14px; /* suzy tache mobapp 45 — Espace réduit sous le titre. */
}

.app_footer .ulif_footer_links_row .box_lien_footer { /* suzy tache mobapp 45 — Resserre les liens dans la nouvelle grille. */
    margin-bottom: 6px; /* suzy tache mobapp 45 — Espacement vertical compact. */
    margin-top: 0; /* suzy tache mobapp 45 — Supprime les marges hautes parasites. */
}

.ulif_footer_social_row { /* suzy tache mobapp 45 — Ligne réseaux sociaux sous les colonnes. */
    margin-top: 12px; /* suzy tache mobapp 45 — Sépare la zone sociale du bloc principal. */
    padding-top: 12px; /* suzy tache mobapp 45 — Respiration au-dessus de la barre sociale. */
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(224, 150, 32, 0.08);
    justify-content: center; /* suzy tache mobapp 45 — Centre la ligne sur toutes largeurs. */
    text-align: center;
}

.ulif_footer_social_bar { /* suzy tache mobapp 45 — Barre horizontale label + icônes. */
    display: flex; /* suzy tache mobapp 45 — Aligne label et boutons sur une ligne. */
    flex-wrap: wrap; /* suzy tache mobapp 45 — Retour à la ligne si besoin. */
    align-items: center; /* suzy tache mobapp 45 — Centrage vertical des éléments. */
    justify-content: center; /* suzy tache mobapp 45 — Centré sur toutes largeurs. */
    gap: 14px; /* suzy tache mobapp 45 — Espace entre label et icônes. */
    width: 100%;
}

.app_footer .ulif_footer_social_label.suivez_nous { /* suzy tache mobapp 45 — Libellé « Suivez-nous » dans la barre sociale. */
    margin-top: 0; /* suzy tache mobapp 45 — Annule le margin-top: 30px global. */
    margin-bottom: 0; /* suzy tache mobapp 45 — Aligne proprement avec les icônes. */
    display: inline-block; /* suzy tache mobapp 45 — Comportement inline dans le flex. */
}

.ulif_social_links { /* suzy tache mobapp 45 — Groupe des boutons réseaux sociaux. */
    display: flex; /* suzy tache mobapp 45 — Icônes alignées horizontalement. */
    flex-wrap: wrap; /* suzy tache mobapp 45 — Autorise le retour à la ligne mobile. */
    align-items: center; /* suzy tache mobapp 45 — Centrage vertical des icônes. */
    gap: 12px; /* suzy tache mobapp 45 — Espace entre chaque bouton social. */
}

/* Animation rebond en chaîne des icônes sociales footer. */
@keyframes ulif_social_chain_bounce {

    0%, 70%, 100% {
        transform: translateY(0) scale(1);
    }

    35% {
        transform: translateY(-9px) scale(1.08);
    }

    50% {
        transform: translateY(-3px) scale(1.03);
    }

}

.ulif_social_btn { /* suzy tache mobapp 45 — Bouton icône réseau social rond. */
    display: inline-flex; /* suzy tache mobapp 45 — Centre l'icône Font Awesome. */
    align-items: center; /* suzy tache mobapp 45 — Centrage vertical. */
    justify-content: center; /* suzy tache mobapp 45 — Centrage horizontal. */
    flex-shrink: 0; /* suzy tache mobapp 45 — Conserve le cercle parfait en flex. */
    width: 40px; /* suzy tache mobapp 45 — Cercle de diamètre fixe. */
    height: 40px; /* suzy tache mobapp 45 — Cercle de diamètre fixe. */
    border-radius: 50%; /* suzy tache mobapp 45 — Icônes entièrement rondes. */
    overflow: hidden; /* suzy tache mobapp 45 — Force le rendu circulaire. */
    color: #FFFFFF; /* suzy tache mobapp 45 — Icône blanche. */
    font-size: 18px; /* suzy tache mobapp 45 — Taille d'icône lisible. */
    line-height: 1; /* suzy tache mobapp 45 — Évite toute déformation verticale. */
    text-decoration: none; /* suzy tache mobapp 45 — Pas de soulignement lien. */
    animation: ulif_social_chain_bounce 2.8s ease-in-out infinite;
    transform-origin: center bottom;
    will-change: transform;
    transition: box-shadow 0.25s ease, opacity 0.2s ease, filter 0.25s ease;
}

/* Décalage progressif : une icône après l'autre. */
.ulif_social_btn:nth-child(1) { animation-delay: 0s; }
.ulif_social_btn:nth-child(2) { animation-delay: 0.35s; }
.ulif_social_btn:nth-child(3) { animation-delay: 0.7s; }
.ulif_social_btn:nth-child(4) { animation-delay: 1.05s; }
.ulif_social_btn:nth-child(5) { animation-delay: 1.4s; }

.ulif_social_btn:hover { /* Hover : accentue le rebond courant. */
    color: #FFFFFF;
    text-decoration: none;
    animation-duration: 1.6s;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
    opacity: 1;
    filter: brightness(1.08);
}

.ulif_social_btn--facebook { background-color: #1877F2; } /* suzy tache mobapp 45 — Couleur officielle Facebook. */
.ulif_social_btn--instagram { background-color: #E4405F; } /* suzy tache mobapp 45 — Couleur officielle Instagram. */
.ulif_social_btn--youtube { background-color: #FF0000; } /* suzy tache mobapp 45 — Couleur officielle YouTube. */
.ulif_social_btn--twitter { background-color: #1DA1F2; } /* suzy tache mobapp 45 — Couleur officielle Twitter/X. */
.ulif_social_btn--whatsapp { background-color: #25D366; } /* suzy tache mobapp 45 — Couleur officielle WhatsApp. */

@media only screen and (min-width: 992px) {
    .ulif_footer_brand_col { margin-bottom: 0; padding-right: 20px; } /* suzy tache mobapp 45 — Colonne marque desktop sans marge basse. */
    .ulif_footer_links_row > [class*="col-"]:nth-child(-n+2) .titre_footer { margin-top: 0; } /* suzy tache mobapp 45 — Première rangée de titres alignée en haut. */
}

@media only screen and (max-width: 991.98px) {
    .ulif_footer_brand { align-items: center; text-align: center; } /* suzy tache mobapp 45 — Marque centrée sur mobile. */
    .ulif_footer_brand_summary { max-width: 100%; } /* suzy tache mobapp 45 — Résumé pleine largeur mobile. */
    .app_footer .ulif_footer_links_row .titre_footer { margin-top: 22px; text-align: center; } /* suzy tache mobapp 45 — Titres colonnes centrés mobile. */
    .app_footer .ulif_footer_links_row .titre_footer::after { margin-left: auto; margin-right: auto; } /* suzy tache mobapp 45 — Filet centré sous les titres mobile. */
    .app_footer .ulif_footer_links_row .box_lien_footer { text-align: center; } /* suzy tache mobapp 45 — Liens centrés mobile. */
    .ulif_footer_social_bar { justify-content: center; } /* suzy tache mobapp 45 — Barre sociale centrée mobile. */
    .ulif_social_links { justify-content: center; } /* suzy tache mobapp 45 — Icônes sociales centrées mobile. */
}

/* Footer — séparateurs verticaux fixes en blanc. */
.app_footer .ulif_footer_links_row > [class*="col-"] {
    position: relative;
}

.app_footer .ulif_footer_links_row > [class*="col-"]::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 1px;
    pointer-events: none;
    /* Landing : traits verticaux blancs, fixes. */
    background: #ffffff;
    opacity: 0.35;
    animation: none;
    box-shadow: none;
    filter: none;
}

.app_footer .ulif_footer_links_row > [class*="col-"]:first-child::before {
    display: none;
}

.app_footer .ulif_footer_links_row > [class*="col-"]:nth-child(2)::before,
.app_footer .ulif_footer_links_row > [class*="col-"]:nth-child(3)::before,
.app_footer .ulif_footer_links_row > [class*="col-"]:nth-child(4)::before {
    animation: none;
    animation-delay: 0s;
}

/* Landing : titres colonnes footer en blanc uni. */
.app_footer .ulif_footer_links_row > [class*="col-"]:nth-child(odd) .titre_footer,
.app_footer .ulif_footer_links_row > [class*="col-"]:nth-child(even) .titre_footer {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
    animation: none;
}

.app_footer .ulif_footer_links_row .titre_footer::after {
    /* Landing : filet sous titre blanc, fixe. */
    background: #ffffff;
    background-size: auto;
    animation: none;
    opacity: 0.55;
    width: 40px;
}

@keyframes ulif_footer_divider_pulse {
    0%, 100% {
        opacity: 0.28;
        box-shadow: 0 0 0 rgba(224, 150, 32, 0);
        filter: brightness(0.85);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 14px rgba(224, 150, 32, 0.55);
        filter: brightness(1.15);
    }
}

@keyframes ulif_footer_title_shimmer {
    0% { background-position: 0% center; }
    100% { background-position: -220% center; }
}

@keyframes ulif_footer_title_underline {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media only screen and (max-width: 991.98px) {
    /* En grille 2 colonnes : conserve le trait entre les colonnes (masqué seulement sur la 1re). */
    .app_footer .ulif_footer_links_row > [class*="col-"]:first-child::before {
        display: none;
    }
    .app_footer .ulif_footer_links_row > [class*="col-"]:nth-child(2)::before {
        display: block;
        content: "";
        width: 1px;
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app_footer .ulif_footer_links_row > [class*="col-"]::before,
    .app_footer .ulif_footer_links_row .titre_footer,
    .app_footer .ulif_footer_links_row .titre_footer::after {
        animation: none;
    }

    .app_footer .ulif_footer_links_row > [class*="col-"]:nth-child(odd) .titre_footer {
        -webkit-text-fill-color: #E09620;
        color: #E09620;
        background: none;
    }

    .app_footer .ulif_footer_links_row > [class*="col-"]:nth-child(even) .titre_footer {
        -webkit-text-fill-color: #ffffff;
        color: #ffffff;
        background: none;
    }
}

/* suzy tache mobapp 45 — Fin styles footer public modulaire. */

html,
body
{
    margin-bottom: 0;
}

/* Ticket: MOBAPP-45 | Responsables: Ivan Asegning et Suzy Noumbissi
 * Styles coverflow 3D catégories + cours (viewport-fit, mobile-first)
 */
.ulif-section-fit
{
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    padding-top: 1.4rem;
    padding-bottom: 0.6rem;
    position: relative;
}

.section_categories.ulif-section-fit
{
    background-color: #fffaf3;
    background-image:
        radial-gradient(ellipse 70% 55% at 12% 18%, rgba(224, 150, 32, 0.22) 0%, rgba(224, 150, 32, 0) 62%),
        radial-gradient(ellipse 55% 45% at 88% 78%, rgba(83, 137, 61, 0.14) 0%, rgba(83, 137, 61, 0) 65%),
        radial-gradient(ellipse 50% 40% at 70% 12%, rgba(220, 141, 0, 0.12) 0%, rgba(220, 141, 0, 0) 60%),
        linear-gradient(165deg, #ffffff 0%, #fff8ee 48%, #fff3e3 100%);
    /* Contenu contenu dans la section — tailles fixes uniquement */
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
    padding-top: 40px;
    padding-bottom: 40px;
}

.section_categories.ulif-section-fit .ulif-section-fit__inner
{
    height: auto;
    justify-content: flex-start;
    gap: 0;
    overflow: visible;
}

.section_categories.ulif-section-fit .ulif-section-fit__body
{
    flex: 0 0 auto;
    overflow: visible;
    min-height: 0;
}

.section_categories.ulif-section-fit .ulif-coverflow-header
{
    padding: 8px 12px 0;
}

.section_categories.ulif-section-fit .ulif-coverflow-header__badge
{
    font-size: 12px;
    margin-bottom: 12px;
    padding: 6px 16px;
}

.section_categories.ulif-section-fit .ulif-coverflow-header__title
{
    font-size: 26px;
    margin: 0 0 12px;
}

.section_categories.ulif-section-fit .ulif-coverflow-header__text
{
    font-size: 15px;
    margin: 0 auto 16px;
}

.section_categories.ulif-section-fit .ulif-coverflow-header__separator
{
    margin-bottom: 8px;
}

.section_categories.ulif-section-fit .ulif-coverflow-header__separator span
{
    width: 40px;
}

/*
 * Conteneur un peu plus haut que le slide (ombre) ;
 * slides centrés à 50% — restent dans la boîte, ne fuient pas la section.
 */
.section_categories.ulif-section-fit .ulif-coverflow
{
    height: 300px;
    min-height: 300px;
    max-height: 300px;
    margin-top: 28px;
    margin-bottom: 16px;
    overflow: hidden;
}

.section_categories.ulif-section-fit .ulif-coverflow__stage
{
    height: 300px;
    min-height: 300px;
    overflow: hidden;
}

.section_categories.ulif-section-fit .ulif-coverflow__track
{
    overflow: visible;
}

.section_categories.ulif-section-fit .ulif-coverflow--categories .ulif-coverflow__slide
{
    top: 50%;
    width: 240px;
    height: 240px;
}

.section_categories.ulif-section-fit .ulif-coverflow__overlay-title
{
    padding: 16px 18px;
    font-size: 15px;
}

.section_cours.ulif-section-fit
{
    background-color: #f7faf4;
    background-image:
        radial-gradient(ellipse 65% 50% at 85% 20%, rgba(224, 150, 32, 0.2) 0%, rgba(224, 150, 32, 0) 60%),
        radial-gradient(ellipse 55% 45% at 10% 85%, rgba(83, 137, 61, 0.16) 0%, rgba(83, 137, 61, 0) 65%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(249, 249, 249, 0.55) 100%),
        url("../assets/img/bg_cours.png");
    background-size: auto, auto, auto, cover;
    background-position: center;
    padding-bottom: 0.6rem;
}

.ulif-section-fit__inner
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
}

.ulif-section-fit__body
{
    margin: 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    width: 100%;
}

.ulif-section-fit__footer
{
    margin: 0;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.3rem 0.75rem 0.35rem;
}

.ulif-coverflow-header
{
    flex: 0 0 auto;
    text-align: center;
    max-width: 46rem;
    margin: 0 auto;
    padding: 0.9rem 0.75rem 0;
}

.ulif-coverflow-header__badge
{
    display: inline-block;
    background: rgba(224, 150, 32, 0.12);
    color: #E09620;
    font-size: clamp(0.65rem, 1.6vw, 0.8rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: none !important; /* Impératif : ulif.app ne doit jamais passer en majuscules */
    padding: 0.35rem 1rem;
    border-radius: 30px;
    margin-bottom: 0.24rem;
    border: 1px solid rgba(224, 150, 32, 0.12);
}

.ulif-coverflow-header__title
{
    font-family: Candara, sans-serif;
    font-size: clamp(1.15rem, 2.8vw + 0.3rem, 2rem);
    font-weight: 800;
    color: #333333;
    line-height: 1.15;
    margin: 0 0 0.24rem;
}

.ulif-coverflow-header__text
{
    font-size: clamp(0.78rem, 1.5vw, 0.98rem);
    color: #666666;
    max-width: 38rem;
    margin: 0 auto 0.24rem;
    line-height: 1.45;
}

.ulif-coverflow-header__separator
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}

.ulif-coverflow-header__separator span
{
    width: clamp(2rem, 6vw, 3.5rem);
    height: 2px;
    background: #E09620;
    opacity: 0.35;
}

.ulif-coverflow-header__separator i
{
    color: #E09620;
    font-size: 0.7rem;
    animation: ulif_home_separator_spin 6s linear infinite;
}

@keyframes ulif_home_separator_spin
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ulif-coverflow
{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: clamp(14rem, 56vh, 32rem);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.ulif-coverflow__stage
{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    perspective: 1400px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
}

.ulif-coverflow__track
{
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

/* Lueur qui balaye les images du coverflow cours. */
.ulif-coverflow--courses .ulif-coverflow__card
{
    isolation: isolate;
}

.ulif-coverflow--courses .ulif-coverflow__card::after
{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, 0.08) 44%,
        rgba(255, 248, 230, 0.55) 50%,
        rgba(255, 255, 255, 0.1) 56%,
        transparent 62%,
        transparent 100%
    );
    transform: translateX(-130%) skewX(-12deg);
    animation: ulif_coverflow_gleam 4.2s ease-in-out infinite;
    mix-blend-mode: soft-light;
}

.ulif-coverflow--courses .ulif-coverflow__slide:nth-child(2) .ulif-coverflow__card::after { animation-delay: 0.35s; }
.ulif-coverflow--courses .ulif-coverflow__slide:nth-child(3) .ulif-coverflow__card::after { animation-delay: 0.7s; }
.ulif-coverflow--courses .ulif-coverflow__slide:nth-child(4) .ulif-coverflow__card::after { animation-delay: 1.05s; }
.ulif-coverflow--courses .ulif-coverflow__slide:nth-child(5) .ulif-coverflow__card::after { animation-delay: 1.4s; }
.ulif-coverflow--courses .ulif-coverflow__slide:nth-child(6) .ulif-coverflow__card::after { animation-delay: 1.75s; }
.ulif-coverflow--courses .ulif-coverflow__slide.is-active .ulif-coverflow__card::after
{
    animation-duration: 3.2s;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 36%,
        rgba(255, 255, 255, 0.12) 44%,
        rgba(255, 236, 190, 0.72) 50%,
        rgba(255, 255, 255, 0.14) 56%,
        transparent 64%,
        transparent 100%
    );
}

@keyframes ulif_coverflow_gleam
{
    0%, 18% { transform: translateX(-130%) skewX(-12deg); opacity: 0; }
    28% { opacity: 1; }
    55% { transform: translateX(130%) skewX(-12deg); opacity: 1; }
    70%, 100% { transform: translateX(130%) skewX(-12deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce)
{
    .ulif-coverflow--courses .ulif-coverflow__card::after,
    .ulif_social_btn
    {
        animation: none !important;
    }
}

.ulif-coverflow__slide
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(68vw, 20rem);
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
    transition: transform 780ms cubic-bezier(0.22, 1, 0.36, 1), opacity 780ms ease, filter 780ms ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.ulif-coverflow--courses .ulif-coverflow__slide
{
    width: min(46vw, 15.5rem);
    height: min(69vw, 23.25rem);
    aspect-ratio: unset;
}

.ulif-coverflow__card
{
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.2));
    transition: filter 450ms ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.ulif-coverflow--categories .ulif-coverflow__slide
{
    width: min(68vw, 20rem);
    height: min(68vw, 20rem);
    aspect-ratio: unset;
}

.ulif-coverflow--categories .ulif-coverflow__card,
.ulif-coverflow--courses .ulif-coverflow__card
{
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.ulif-coverflow__tap-hint
{
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 6px 0 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    color: #E09620;
    pointer-events: none;
    opacity: 0;
    transform: none;
}

.ulif-coverflow--categories .ulif-coverflow__slide.is-active .ulif-coverflow__tap-hint,
.ulif-coverflow--courses .ulif-coverflow__slide.is-active .ulif-coverflow__tap-hint
{
    display: inline-flex;
    opacity: 1;
    animation: ulif_tap_hint_hover 1.4s ease-in-out infinite;
}

.ulif-coverflow.is-hint-dismissed .ulif-coverflow__tap-hint,
.ulif-coverflow--categories .ulif-coverflow__slide:not(.is-active) .ulif-coverflow__tap-hint,
.ulif-coverflow--courses .ulif-coverflow__slide:not(.is-active) .ulif-coverflow__tap-hint
{
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
}

.ulif-coverflow__tap-hand
{
    display: block;
    width: 24px;
    height: 26px;
    object-fit: contain;
    overflow: visible;
    /* Incline le curseur vers le texte à droite */
    transform: rotate(68deg);
    transform-origin: 45% 55%;
    /* Ombre légère pour contraster sur les visuels clairs */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.ulif-coverflow__tap-hand-rays
{
    display: none;
}

@keyframes ulif_tap_hint_hover
{
    0%, 100%
    {
        transform: translate(0, 0);
    }
    50%
    {
        /* Petit mouvement vers le texte (droite) */
        transform: translate(3px, -1px);
    }
}

@keyframes ulif_tap_hint_rays
{
    0%, 100%
    {
        opacity: 0.35;
        transform: scale(0.92);
    }
    45%
    {
        opacity: 1;
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce)
{
    .ulif-coverflow--categories .ulif-coverflow__slide.is-active .ulif-coverflow__tap-hint,
    .ulif-coverflow--courses .ulif-coverflow__slide.is-active .ulif-coverflow__tap-hint,
    .ulif-coverflow__tap-hand-rays
    {
        animation: none;
    }

    .ulif-coverflow--courses .ulif-coverflow__slide.is-active .ulif-coverflow__tap-hint--solo
    {
        animation: none;
        transform: translate(-50%, -50%);
    }
}

.ulif-coverflow__slide.is-active .ulif-coverflow__card
{
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.26));
}

.ulif-coverflow__slide.is-side .ulif-coverflow__card
{
    filter: brightness(0.92) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.14));
}

.ulif-coverflow__slide.is-active .ulif-coverflow__card:hover
{
    filter: drop-shadow(0 18px 42px rgba(224, 150, 32, 0.34));
}

.ulif-coverflow__img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
}

.ulif-coverflow__overlay-title
{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: clamp(0.85rem, 2.2vh, 1.25rem) clamp(0.9rem, 2.4vw, 1.35rem);
    margin: 0;
    color: #ffffff;
    text-transform: uppercase;
    font-family: Candara, sans-serif;
    font-weight: 800;
    font-size: clamp(0.95rem, 2.5vw, 1.3rem);
    letter-spacing: 0.05em;
    line-height: 1.25;
    background: rgba(0, 0, 0, 0.52);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    box-sizing: border-box;
    z-index: 4;
}

/* Catégories : overlay plus léger pour laisser voir l’image */
.ulif-coverflow--categories .ulif-coverflow__overlay-title
{
    background: rgba(0, 0, 0, 0.22);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.7);
}

.ulif-coverflow__overlay-title-text
{
    display: inline-block;
    max-width: min(100%, 14ch);
}

.ulif-coverflow--courses .ulif-coverflow__overlay-title
{
    padding: clamp(0.7rem, 1.8vh, 1rem) clamp(0.65rem, 1.8vw, 1rem);
    font-size: clamp(0.78rem, 2vw, 1.05rem);
    gap: 8px;
}

.ulif-coverflow--courses .ulif-coverflow__overlay-title-text
{
    max-width: min(100%, 12ch);
}

.ulif-coverflow--courses .ulif-coverflow__tap-hint--solo
{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    margin: 0;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
}

.ulif-coverflow--courses .ulif-coverflow__tap-hint--solo .ulif-coverflow__tap-hand
{
    /* Doigt vers le centre de la couverture (sans titre à côté) */
    transform: rotate(0deg);
    transform-origin: center center;
}

.ulif-coverflow--courses .ulif-coverflow__slide.is-active .ulif-coverflow__tap-hint--solo
{
    animation: ulif_tap_hint_hover_solo 1.4s ease-in-out infinite;
}

@keyframes ulif_tap_hint_hover_solo
{
    0%, 100%
    {
        transform: translate(-50%, -50%);
    }
    50%
    {
        transform: translate(-50%, calc(-50% - 5px));
    }
}

.ulif-coverflow__card--book
{
    background: transparent;
    border-radius: 10px;
    width: 100%;
    height: 100%;
}

.ulif-coverflow__img--book
{
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    aspect-ratio: unset;
    object-fit: cover;
    border-radius: inherit;
}

.ulif-coverflow__arrow
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid rgba(224, 150, 32, 0.35);
    border-radius: 10px;
    background: rgba(224, 150, 32, 0.22);
    color: #E09620;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 14px rgba(224, 150, 32, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    padding: 0;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease, background 280ms ease, border-color 280ms ease, color 280ms ease;
}

.ulif-coverflow__arrow .fa
{
    font-size: 0.72rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.ulif-coverflow__arrow-dot
{
    position: absolute;
    width: 0.22rem;
    height: 0.22rem;
    border-radius: 50%;
    background: rgba(224, 150, 32, 0.55);
    opacity: 0.45;
    pointer-events: none;
}

.ulif-coverflow__arrow:hover,
.ulif-coverflow__arrow:focus
{
    background: rgba(224, 150, 32, 0.42);
    border-color: rgba(220, 141, 0, 0.55);
    color: #dc8d00;
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 6px 18px rgba(224, 150, 32, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ulif-coverflow__arrow:active
{
    transform: translateY(-50%) scale(0.94);
}

.ulif-coverflow__arrow--prev
{
    left: 0.35rem;
}

.ulif-coverflow__arrow--next
{
    right: 0.35rem;
}

.ulif-section-fit .btn_consult_courses
{
    margin-top: 0.3rem;
    border-radius: 8px;
}

.section_cours.ulif-section-fit .ulif-coverflow
{
    margin-top: 1.6rem;
    margin-bottom: 1.4rem;
}

.section_cours.ulif-section-fit .ulif-coverflow--courses .ulif-coverflow__slide
{
    top: 59%;
}

@media (min-width: 576px)
{
    .ulif-coverflow__slide
    {
        width: min(58vw, 24rem);
    }

    .ulif-coverflow--courses .ulif-coverflow__slide
    {
        width: min(40vw, 16.5rem);
        height: min(60vw, 24.75rem);
    }

    /* Catégories : tailles fixes (pas de vw/min) */
    .section_categories.ulif-section-fit .ulif-coverflow
    {
        height: 360px;
        min-height: 360px;
        max-height: 360px;
        margin-top: 32px;
        margin-bottom: 20px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow__stage
    {
        height: 360px;
        min-height: 360px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow--categories .ulif-coverflow__slide
    {
        top: 50%;
        width: 300px;
        height: 300px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow-header__title
    {
        font-size: 28px;
    }
}

@media (min-width: 768px)
{
    .section_categories.ulif-section-fit,
    .section_cours.ulif-section-fit
    {
        height: auto;
        max-height: none;
        padding-bottom: 2rem;
    }

    .section_cours.ulif-section-fit
    {
        overflow: visible;
    }

    .section_categories.ulif-section-fit
    {
        padding-top: 48px;
        padding-bottom: 48px;
        overflow: hidden;
    }

    .section_categories.ulif-section-fit .ulif-coverflow
    {
        height: 420px;
        min-height: 420px;
        max-height: 420px;
        margin-top: 36px;
        margin-bottom: 24px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow__stage
    {
        height: 420px;
        min-height: 420px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow-header__badge
    {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow-header__title
    {
        font-size: 32px;
        margin: 0 0 14px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow-header__text
    {
        font-size: 16px;
        margin: 0 auto 20px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow--categories .ulif-coverflow__slide
    {
        top: 50%;
        width: 340px;
        height: 340px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow__overlay-title
    {
        padding: 18px 20px;
        font-size: 17px;
    }

    .section_cours.ulif-section-fit .ulif-coverflow
    {
        min-height: clamp(18rem, 64vh, 36rem);
        margin-top: 1.55rem;
        margin-bottom: 1.5rem;
    }

    .section_cours.ulif-section-fit .ulif-coverflow--courses .ulif-coverflow__slide
    {
        top: 59%;
    }

    .section_cours.ulif-section-fit .ulif-section-fit__footer
    {
        position: static;
        margin-top: 2rem;
        padding-top: 0;
        padding-bottom: 1.25rem;
    }

    .ulif-coverflow__arrow
    {
        width: 2.15rem;
        height: 2.15rem;
        border-radius: 10px;
    }

    .ulif-coverflow__arrow .fa
    {
        font-size: 0.78rem;
    }

    .ulif-coverflow__slide
    {
        width: min(58vw, 35rem);
    }

    .ulif-coverflow--courses .ulif-coverflow__slide
    {
        width: min(35vw, 21rem);
        height: min(52.5vw, 31.5rem);
    }

    .ulif-coverflow__card
    {
        border-radius: 14px;
    }
}

@media (min-width: 1200px)
{
    .ulif-coverflow__slide
    {
        width: min(50vw, 40rem);
    }

    .ulif-coverflow--courses .ulif-coverflow__slide
    {
        width: min(28vw, 23rem);
        height: min(42vw, 34.5rem);
    }

    .section_categories.ulif-section-fit
    {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow
    {
        height: 460px;
        min-height: 460px;
        max-height: 460px;
        margin-top: 40px;
        margin-bottom: 28px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow__stage
    {
        height: 460px;
        min-height: 460px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow--categories .ulif-coverflow__slide
    {
        top: 50%;
        width: 380px;
        height: 380px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow-header__title
    {
        font-size: 34px;
    }
}

@media (max-width: 575.98px)
{
    .ulif-coverflow
    {
        min-height: 16.75rem;
    }

    .section_categories.ulif-section-fit
    {
        padding-top: 32px;
        padding-bottom: 36px;
        overflow: hidden;
    }

    .section_categories.ulif-section-fit .ulif-coverflow
    {
        height: 300px;
        min-height: 300px;
        max-height: 300px;
        margin-top: 24px;
        margin-bottom: 12px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow__stage
    {
        height: 300px;
        min-height: 300px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow--categories .ulif-coverflow__slide
    {
        top: 50%;
        width: 240px;
        height: 240px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow-header__title
    {
        font-size: 22px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow-header__text
    {
        font-size: 14px;
    }

    .section_cours.ulif-section-fit .ulif-coverflow
    {
        margin-top: 1.45rem;
        margin-bottom: 1.35rem;
    }

    .section_cours.ulif-section-fit .ulif-coverflow--courses .ulif-coverflow__slide
    {
        top: 58.5%;
    }

    .ulif-section-fit
    {
        min-height: auto;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .ulif-section-fit__inner
    {
        height: auto;
        justify-content: flex-start;
    }

    .ulif-section-fit__body
    {
        flex: 0 0 auto;
    }

    .ulif-coverflow-header__text
    {
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ulif-coverflow--courses .ulif-coverflow__slide
    {
        width: min(44vw, 13.75rem);
        height: min(66vw, 20.625rem);
    }

    .ulif-section-fit .btn_consult_courses
    {
        min-width: 210px;
        padding: 0.72rem 1.2rem;
        font-size: 0.9rem;
    }
}

@media (min-width: 576px) and (max-width: 767.98px)
{
    .ulif-coverflow
    {
        min-height: 17.5rem;
    }

    .section_cours.ulif-section-fit .ulif-coverflow
    {
        margin-top: 1.5rem;
        margin-bottom: 1.4rem;
    }

    .section_cours.ulif-section-fit .ulif-coverflow--courses .ulif-coverflow__slide
    {
        top: 58.75%;
    }
}

@media (max-height: 700px) and (orientation: landscape),
       (max-height: 640px)
{
    .ulif-coverflow-header__badge
    {
        margin-bottom: 0.25rem;
        padding: 0.25rem 0.75rem;
    }

    .ulif-coverflow-header__title
    {
        font-size: clamp(0.95rem, 2vw, 1.35rem);
    }

    .ulif-coverflow-header__text
    {
        display: none;
    }

    .ulif-coverflow--categories .ulif-coverflow__slide
    {
        width: min(42vw, 16rem);
        height: min(42vw, 16rem);
    }

    /* Garde les tailles fixes catégories même en fenêtre basse */
    .section_categories.ulif-section-fit .ulif-coverflow
    {
        height: 300px;
        min-height: 300px;
        max-height: 300px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow__stage
    {
        height: 300px;
        min-height: 300px;
    }

    .section_categories.ulif-section-fit .ulif-coverflow--categories .ulif-coverflow__slide
    {
        top: 50%;
        width: 240px;
        height: 240px;
    }

    .ulif-coverflow--courses .ulif-coverflow__slide
    {
        width: min(30vw, 12rem);
        height: min(45vw, 18rem);
    }

    .ulif-coverflow
    {
        min-height: clamp(9rem, 42vh, 16rem);
    }
}

@media (min-width: 768px)
{
    .ulif-coverflow__arrow--prev
    {
        left: 0.6rem;
    }

    .ulif-coverflow__arrow--next
    {
        right: 0.6rem;
    }
}

/* Fin styles coverflow 3D */

/* Ticket: MOBAPP-45 | Responsables: Ivan Asegning et Suzy Noumbissi
 * Animations d'apparition rejouees a chaque entree dans le viewport
 */
[data-ulif-section-reveal] .ulif-coverflow-header, /* Header cache hors viewport */
[data-ulif-section-reveal] .ulif-section-fit__body, /* Carousel cache hors viewport */
[data-ulif-section-reveal] .ulif-section-fit__footer /* CTA cache hors viewport */
{
    opacity: 0; /* Invisible avant reveal */
    transform: translateY(1.75rem); /* Decale vers le bas */
    transition:
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1); /* Entree fluide */
    will-change: opacity, transform; /* Prep GPU */
}

[data-ulif-section-reveal] .ulif-section-fit__body /* Pop leger du carrousel */
{
    transform: translateY(2.25rem) scale(0.94); /* Remonte + scale */
}

[data-ulif-section-reveal].is-revealed .ulif-coverflow-header /* Header visible */
{
    opacity: 1; /* Apparait */
    transform: translateY(0); /* Position finale */
    transition-delay: 40ms; /* Delai court */
}

[data-ulif-section-reveal].is-revealed .ulif-section-fit__body /* Carousel visible */
{
    opacity: 1; /* Apparait */
    transform: translateY(0) scale(1); /* Position + echelle finales */
    transition-delay: 180ms; /* Apres le header */
}

[data-ulif-section-reveal].is-revealed .ulif-section-fit__footer /* CTA visible */
{
    opacity: 1; /* Apparait */
    transform: translateY(0); /* Position finale */
    transition-delay: 320ms; /* Apres le carousel */
}

[data-ulif-section-reveal] .ulif-coverflow__arrow /* Fleches masquees hors reveal */
{
    opacity: 0; /* Invisible */
    transition: opacity 500ms ease, transform 450ms ease, background 300ms ease, border-color 300ms ease, box-shadow 300ms ease, color 300ms ease; /* Conserve hover */
}

[data-ulif-section-reveal].is-revealed .ulif-coverflow__arrow /* Fleches apres reveal */
{
    opacity: 1; /* Visibles */
    transition-delay: 360ms; /* Apres le body */
}

[data-ulif-section-reveal].is-reveal-reset .ulif-coverflow-header,
[data-ulif-section-reveal].is-reveal-reset .ulif-section-fit__body,
[data-ulif-section-reveal].is-reveal-reset .ulif-section-fit__footer,
[data-ulif-section-reveal].is-reveal-reset .ulif-coverflow__arrow /* Coupe transitions pendant reset */
{
    transition: none !important; /* Remise etat cache sans anim inverse */
}

@media (prefers-reduced-motion: reduce) /* Accessibilite motion */
{
    [data-ulif-section-reveal] .ulif-coverflow-header,
    [data-ulif-section-reveal] .ulif-section-fit__body,
    [data-ulif-section-reveal] .ulif-section-fit__footer,
    [data-ulif-section-reveal] .ulif-coverflow__arrow
    {
        opacity: 1; /* Toujours visible */
        transform: none; /* Sans translation */
        transition: none; /* Sans animation */
    }

    [data-ulif-section-reveal] .ulif-coverflow__arrow /* Garde le centrage fleche */
    {
        transform: translateY(-50%); /* Centre vertical conserve */
    }
}

/* Accueil : masque le debordement horizontal des slides coverflow */
body.ulif-page-home
{
    overflow-x: hidden;
}

body.ulif-page-home .section_cours.ulif-section-fit
{
    overflow: hidden;
}

body.ulif-page-home .section_categories.ulif-section-fit
{
    overflow: hidden;
}

/* Bottom navigation user : forme pilule continue sur tous les états. */
@media only screen and (max-width: 767.98px)
{
    .ulif_bottom_nav--user
    {
        bottom: 0;
        left: 0;
        right: 0;
    }

    .ulif_bottom_nav--user .ulif_bottom_nav_track
    {
        -webkit-backdrop-filter: blur(18px) saturate(125%);
        backdrop-filter: blur(18px) saturate(125%);
        background-color: rgba(255, 255, 255, 0.64);
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-bottom: 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 28px rgba(34, 28, 17, 0.12);
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .ulif_bottom_nav_item,
    .ulif_bottom_nav_item:hover,
    .ulif_bottom_nav_item:focus,
    .ulif_bottom_nav_item.is-active
    {
        border-radius: 50px;
    }

    .ulif_bottom_nav_item:hover,
    .ulif_bottom_nav_item:focus
    {
        background-color: #FAF1DF;
    }

    .ulif_bottom_nav_item.is-active
    {
        background-color: #E097242E;
        color: #E59618 !important;
    }
}

/* Menus déroulants des actions du header utilisateur mobile. */
@media only screen and (max-width: 767.98px)
{
    .ulif_mobile_header
    {
        overflow: visible;
    }

    .ulif_mobile_header_dropdown
    {
        position: relative;
    }

    button.ulif_mobile_header_icon_link
    {
        background: #F8F5EF;
        border: 1px solid #EEE9DF;
        cursor: pointer;
        font-family: inherit;
    }

    .ulif_mobile_header_dropdown_menu
    {
        background: #FFFFFF;
        border: 1px solid #EEE9DF;
        border-radius: 14px;
        box-shadow: 0 18px 45px rgba(39, 30, 14, .20);
        color: #25241F;
        min-width: 215px;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        z-index: 5100;
    }

    .ulif_mobile_header_dropdown_menu[hidden]
    {
        display: none !important;
    }

    .ulif_mobile_profile_menu
    {
        padding: 7px;
    }

    .ulif_mobile_profile_menu > a
    {
        align-items: center;
        border-radius: 8px;
        color: #34332D;
        display: flex;
        font-family: "Montserrat", "Segoe UI", sans-serif;
        font-size: 10px;
        font-weight: 650;
        gap: 10px;
        padding: 11px;
        text-decoration: none;
    }

    .ulif_mobile_profile_menu > a:hover,
    .ulif_mobile_profile_menu > a:focus
    {
        background: #FFF1DB;
        color: #E09724;
        outline: none;
    }

    .ulif_mobile_profile_menu > a .ulif-icon
    {
        height: 17px;
        width: 17px;
    }

    .ulif_mobile_profile_menu > a.is-danger
    {
        border-top: 1px solid #EEE9DF;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        color: #C5443D;
        margin-top: 4px;
    }

    .ulif_mobile_notifications_menu
    {
        min-width: min(320px, calc(100vw - 24px));
        right: -48px;
    }

    .ulif_mobile_dropdown_title
    {
        align-items: center;
        border-bottom: 1px solid #EEE9DF;
        display: flex;
        justify-content: space-between;
        padding: 14px;
    }

    .ulif_mobile_dropdown_title > div
    {
        display: flex;
        flex-direction: column;
    }

    .ulif_mobile_dropdown_title small
    {
        color: #77756E;
        font-size: 8px;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .ulif_mobile_dropdown_title strong
    {
        font-size: 13px;
        margin-top: 2px;
    }

    .ulif_mobile_dropdown_title > span
    {
        background: #FFF1DB;
        border-radius: 50px;
        color: #B8650A;
        font-size: 7px;
        font-weight: 800;
        padding: 5px 7px;
    }

    .ulif_mobile_notification_list
    {
        padding: 5px 7px;
    }

    .ulif_mobile_notification_item
    {
        align-items: center;
        border-radius: 9px;
        color: #34332D;
        display: flex;
        gap: 10px;
        padding: 9px;
        text-decoration: none;
    }

    .ulif_mobile_notification_item:hover,
    .ulif_mobile_notification_item:focus
    {
        background: #FFF8ED;
        color: #34332D;
        outline: none;
        text-decoration: none;
    }

    .ulif_mobile_notification_item > span
    {
        align-items: center;
        background: #FFF1DB;
        border-radius: 8px;
        color: #E09724;
        display: flex;
        flex: 0 0 auto;
        height: 32px;
        justify-content: center;
        width: 32px;
    }

    .ulif_mobile_notification_item > span .ulif-icon
    {
        height: 15px;
        width: 15px;
    }

    .ulif_mobile_notification_item > div
    {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .ulif_mobile_notification_item strong
    {
        font-size: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ulif_mobile_notification_item small
    {
        color: #77756E;
        font-size: 7px;
        margin-top: 3px;
    }

    .ulif_mobile_notification_empty
    {
        color: #77756E;
        font-size: 9px;
        margin: 0;
        padding: 20px 10px;
        text-align: center;
    }

    .ulif_mobile_dropdown_all
    {
        align-items: center;
        background: #FFF8ED;
        color: #E09724;
        display: flex;
        font-size: 9px;
        font-weight: 800;
        gap: 7px;
        justify-content: center;
        padding: 11px;
        text-decoration: none;
    }

    .ulif_mobile_dropdown_all:hover,
    .ulif_mobile_dropdown_all:focus
    {
        background: #FFF1DB;
        color: #B8650A;
        outline: none;
        text-decoration: none;
    }
}

/* Toast global : sous le header, depuis la droite. */
.ulif-app-toast-region
{
    pointer-events: none;
    position: fixed;
    right: 22px;
    top: 102px;
    width: min(430px, calc(100vw - 44px));
    z-index: 12000;
}

.ulif-app-toast
{
    --ulif-app-toast-accent: #3478F6;
    --ulif-app-toast-accent-rgb: 52, 120, 246;
    align-items: center;
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
    border: 1px solid rgba(255,255,255,.88);
    border-left: 4px solid var(--ulif-app-toast-accent);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(16,28,44,.20), inset 0 1px 0 rgba(255,255,255,.72);
    color: #172033;
    display: grid;
    gap: 12px;
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    min-height: 84px;
    opacity: 0;
    overflow: hidden;
    padding: 16px 14px 16px 16px;
    pointer-events: auto;
    position: relative;
    transform: translateX(calc(100% + 32px)) scale(.96);
    transition: opacity .42s ease, transform .48s cubic-bezier(.2,.85,.25,1);
}

.ulif-app-toast.is-visible
{
    opacity: 1;
    transform: translateX(0) scale(1);
}

.ulif-app-toast.is-leaving
{
    opacity: 0;
    transform: translateX(calc(100% + 32px)) scale(.97);
}

.ulif-app-toast--success { --ulif-app-toast-accent: #1F9D68; --ulif-app-toast-accent-rgb: 31,157,104; }
.ulif-app-toast--warning { --ulif-app-toast-accent: #E09724; --ulif-app-toast-accent-rgb: 224,151,36; }
.ulif-app-toast--error { --ulif-app-toast-accent: #D94A5A; --ulif-app-toast-accent-rgb: 217,74,90; }

.ulif-app-toast__icon
{
    align-items: center;
    background: rgba(var(--ulif-app-toast-accent-rgb),.12);
    border: 1px solid rgba(var(--ulif-app-toast-accent-rgb),.2);
    border-radius: 10px;
    color: var(--ulif-app-toast-accent);
    display: inline-flex;
    font-size: 1.15rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.ulif-app-toast__content { min-width: 0; }
.ulif-app-toast__content p
{
    color: #263247;
    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: .86rem;
    font-weight: 650;
    line-height: 1.45;
    margin: 0;
}

.ulif-app-toast__close
{
    align-items: center;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(112,126,147,.14);
    border-radius: 50%;
    color: #6E7889;
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 0;
    transition: color .2s ease, background .2s ease, transform .2s ease;
    width: 32px;
}

.ulif-app-toast__close:hover,
.ulif-app-toast__close:focus
{
    background: var(--ulif-app-toast-accent);
    color: #FFFFFF;
    outline: none;
    transform: rotate(90deg);
}

.ulif-app-toast__progress
{
    background: linear-gradient(90deg, rgba(var(--ulif-app-toast-accent-rgb),.35), var(--ulif-app-toast-accent));
    bottom: 0;
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    transform: scaleX(1);
    transform-origin: left center;
}

.ulif-app-toast.is-visible .ulif-app-toast__progress
{
    animation: ulifAppToastProgress var(--ulif-app-toast-duration, 6s) linear forwards;
}

@keyframes ulifAppToastProgress
{
    to { transform: scaleX(0); }
}

@media (max-width: 767.98px)
{
    .ulif-app-toast-region
    {
        right: 12px;
        top: 110px;
        width: calc(100vw - 24px);
    }

    .ulif-app-toast
    {
        border-radius: 12px;
        gap: 10px;
        grid-template-columns: 38px minmax(0,1fr) 32px;
        min-height: 76px;
        padding: 13px 11px 13px 13px;
    }

    .ulif-app-toast__icon
    {
        height: 38px;
        width: 38px;
    }

    .ulif-app-toast__content p { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce)
{
    .ulif-app-toast,
    .ulif-app-toast__close { transition-duration: .01ms; }
    .ulif-app-toast.is-visible .ulif-app-toast__progress { animation: none; }
}