/*=== DEBUT pagination
==================================*/
@charset "UTF-8";

/* === Root === */
:root {
    --ol-pagination-color: #333;
    --ol-pagination-bg-color: #f5f5f5;
    --ol-pagination-hover-color: #0056b3;
    --ol-pagination-disabled-color: #ccc;
    --ol-pagination-padding: 8px 12px;
    --ol-pagination-border-radius: 4px;
    --ol-pagination-font-size: 16px;
    --ol-pagination-bullet-size: 1.5em;
    /* Couleurs des flèches SVG */
    --ol-pagination-arrow-color: #333;
    --ol-pagination-arrow-hover-color: #0056b3;
}

/* === ============ === */
/* === Pagination === */
/* === ============ === */
.ol-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.ol-pagination ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 5px;
}

.ol-pagination ul li {
    color: var(--ol-pagination-color);
    background-color: var(--ol-pagination-bg-color);
    padding: var(--ol-pagination-padding);
    border-radius: var(--ol-pagination-border-radius);
    font-size: var(--ol-pagination-font-size);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s, background-color 0.3s;
}

.ol-pagination ul li:hover {
    color: var(--ol-pagination-hover-color);
}

.ol-pagination ul li.disabled {
    color: var(--ol-pagination-disabled-color);
    cursor: not-allowed;
}

.ol-pagination ul .prev,
.ol-pagination ul .next {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ol-pagination ul .prev .arrow-icon,
.ol-pagination ul .next .arrow-icon {
    width: 1em;
    height: 1em;
    color: var(--ol-pagination-arrow-color);
    transition: color 0.3s;
}

.ol-pagination ul .prev .arrow-icon:hover,
.ol-pagination ul .next .arrow-icon:hover {
    color: var(--ol-pagination-arrow-hover-color);
}

.ol-pagination ul.-bullet-ol li {
    border-radius: 50%;
    width: var(--ol-pagination-bullet-size);
    height: var(--ol-pagination-bullet-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ol-pagination ul.-numbers-ol li.hidden {
    display: none;
}

.ol-pagination ul.-numbers-ol li.separator {
    cursor: default;
    color: var(--ol-pagination-disabled-color);
    background: none;
}

.ol-pagination ul.-arrows-ol li {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ol-pagination ul.-arrows-ol li .arrow-icon {
    width: 1em;
    height: 1em;
    color: var(--ol-pagination-arrow-color);
    transition: color 0.3s;
}

.ol-pagination ul.-arrows-ol li .arrow-icon:hover {
    color: var(--ol-pagination-arrow-hover-color);
}

.ol-pagination ul.-text-ol li {
    font-size: var(--ol-pagination-font-size);
    font-weight: 500;
}

.ol-pagination ul li.-pagination-active {
    color: var(--ol-pagination-hover-color);
    /* Couleur de texte de la page active */
    background-color: var(--ol-pagination-bg-color);
    /* Couleur de fond de la page active */
    font-weight: bold;
    /* Texte en gras pour le mettre en valeur */
    border: 1px solid var(--ol-pagination-hover-color);
    /* Bordure pour démarquer */
    border-radius: var(--ol-pagination-border-radius);
    /* Garde la cohérence avec les autres pages */
    padding: var(--ol-pagination-padding);
}
/*=== FIN Pagination
==================================*/


/*=== DEBUT Ironda (modal)
==================================*/
:root {
    --bar-w: 6px;
}

.irondal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.irondal.active {
    display: flex;
}

.irondal .irondal-content {
    position: relative;
    padding: var(--rh-btn-padding);
    font-size: var(--rh-btn-font-size);
    border-radius: var(--rh-btn-radius);
    border: 1px solid var(--rh-alerte-border);
    background-color: var(--rh-alerte-bg);
}

.irondal .irondal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.irondal .irondal-close .bar {
    position: absolute;
    width: 14px;
    height: 2px;
    background-color: var(--rh-color-primary);
    transition: transform 0.3s ease, width 0.3s ease, background-color 0.3s ease;
}

.irondal .irondal-close .bar.bar1 {
    transform: rotate(45deg);
    transform-origin: center;
}

.irondal .irondal-close .bar.bar2 {
    transform: rotate(-45deg);
    transform-origin: center;
}

.irondal .irondal-close .bar.bar3 {
    transform: rotate(135deg);
    transform-origin: center;
}

.irondal .irondal-close .bar.bar4 {
    transform: rotate(-135deg);
    transform-origin: center;
}

.irondal .irondal-close .center-point {
    width: 4px;
    height: 4px;
    background-color: var(--rh-color-primary);
    border-radius: 50%;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    opacity: 1;
}

.irondal .irondal-close:hover .bar1 {
    width: var(--bar-w);
    transform: translate(-5px, -5px) rotate(45deg);
}

.irondal .irondal-close:hover .bar2 {
    width: var(--bar-w);
    transform: translate(5px, -5px) rotate(-45deg);
}

.irondal .irondal-close:hover .bar3 {
    width: var(--bar-w);
    transform: translate(-5px, 5px) rotate(135deg);
}

.irondal .irondal-close:hover .bar4 {
    width: var(--bar-w);
    transform: translate(5px, 5px) rotate(-135deg);
}

.irondal .irondal-close:hover .center-point {
    transform: scale(0.9);
}

.irondal .irondal-content.--jaune {
    background-color: var(--rh-alerte-jaune-bg);
    border-color: var(--rh-alerte-jaune-border);
}

.irondal .irondal-content.--jaune h1,
.irondal .irondal-content.--jaune h2,
.irondal .irondal-content.--jaune h3,
.irondal .irondal-content.--jaune h4,
.irondal .irondal-content.--jaune h5,
.irondal .irondal-content.--jaune h6,
.irondal .irondal-content.--jaune p,
.irondal .irondal-content.--jaune .rh-h1,
.irondal .irondal-content.--jaune .rh-h2,
.irondal .irondal-content.--jaune .rh-h3,
.irondal .irondal-content.--jaune .rh-h4,
.irondal .irondal-content.--jaune .rh-h5,
.irondal .irondal-content.--jaune .rh-h6,
.irondal .irondal-content.--jaune .rh-p {
    color: var(--rh-alerte-jaune-border);
}

.irondal .irondal-content.--bleue {
    background-color: var(--rh-alerte-bleue-bg);
    border-color: var(--rh-alerte-bleue-border);
}

.irondal .irondal-content.--bleue h1,
.irondal .irondal-content.--bleue h2,
.irondal .irondal-content.--bleue h3,
.irondal .irondal-content.--bleue h4,
.irondal .irondal-content.--bleue h5,
.irondal .irondal-content.--bleue h6,
.irondal .irondal-content.--bleue p,
.irondal .irondal-content.--bleue .rh-h1,
.irondal .irondal-content.--bleue .rh-h2,
.irondal .irondal-content.--bleue .rh-h3,
.irondal .irondal-content.--bleue .rh-h4,
.irondal .irondal-content.--bleue .rh-h5,
.irondal .irondal-content.--bleue .rh-h6,
.irondal .irondal-content.--bleue .rh-p {
    color: var(--rh-alerte-bleue-border);
}

.irondal .irondal-content.--verte {
    background-color: var(--rh-alerte-verte-bg);
    border-color: var(--rh-alerte-verte-border);
}

.irondal .irondal-content.--verte h1,
.irondal .irondal-content.--verte h2,
.irondal .irondal-content.--verte h3,
.irondal .irondal-content.--verte h4,
.irondal .irondal-content.--verte h5,
.irondal .irondal-content.--verte h6,
.irondal .irondal-content.--verte p,
.irondal .irondal-content.--verte .rh-h1,
.irondal .irondal-content.--verte .rh-h2,
.irondal .irondal-content.--verte .rh-h3,
.irondal .irondal-content.--verte .rh-h4,
.irondal .irondal-content.--verte .rh-h5,
.irondal .irondal-content.--verte .rh-h6,
.irondal .irondal-content.--verte .rh-p {
    color: var(--rh-alerte-verte-border);
}

.irondal .irondal-content.--rouge {
    background-color: var(--rh-alerte-rouge-bg);
    border-color: var(--rh-alerte-rouge-border);
}

.irondal .irondal-content.--rouge h1,
.irondal .irondal-content.--rouge h2,
.irondal .irondal-content.--rouge h3,
.irondal .irondal-content.--rouge h4,
.irondal .irondal-content.--rouge h5,
.irondal .irondal-content.--rouge h6,
.irondal .irondal-content.--rouge p,
.irondal .irondal-content.--rouge .rh-h1,
.irondal .irondal-content.--rouge .rh-h2,
.irondal .irondal-content.--rouge .rh-h3,
.irondal .irondal-content.--rouge .rh-h4,
.irondal .irondal-content.--rouge .rh-h5,
.irondal .irondal-content.--rouge .rh-h6,
.irondal .irondal-content.--rouge .rh-p {
    color: var(--rh-alerte-rouge-border);
}

.irondal .irondal-content.--jaune .irondal-close .bar,
.irondal .irondal-content.--jaune .irondal-close .center-point {
    background-color: var(--rh-alerte-jaune-border);
}

.irondal .irondal-content.--bleue .irondal-close .bar,
.irondal .irondal-content.--bleue .irondal-close .center-point {
    background-color: var(--rh-alerte-bleue-border);
}

.irondal .irondal-content.--verte .irondal-close .bar,
.irondal .irondal-content.--verte .irondal-close .center-point {
    background-color: var(--rh-alerte-verte-border);
}

.irondal .irondal-content.--rouge .irondal-close .bar,
.irondal .irondal-content.--rouge .irondal-close .center-point {
    background-color: var(--rh-alerte-rouge-border);
}
/*=== FIN Irondal (modal)
==================================*/




/*=== DEBUT Rocket blast (animation)
==================================*/
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.fade-out {
    animation: fadeOut 0.5s ease forwards;
}

@keyframes slideUpIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

@keyframes slideUpOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.slide-up-in {
    animation: slideUpIn 0.5s ease forwards;
}

.slide-up-out {
    animation: slideUpOut 0.5s ease forwards;
}

@keyframes slideDownIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

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

@keyframes slideDownOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }

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

.slide-down-in {
    animation: slideDownIn 0.5s ease forwards;
}

.slide-down-out {
    animation: slideDownOut 0.5s ease forwards;
}

@keyframes slideLeftIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideLeftOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.slide-left-in {
    animation: slideLeftIn 0.5s ease forwards;
}

.slide-left-out {
    animation: slideLeftOut 0.5s ease forwards;
}

@keyframes slideRightIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideRightOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.slide-right-in {
    animation: slideRightIn 0.5s ease forwards;
}

.slide-right-out {
    animation: slideRightOut 0.5s ease forwards;
}

.slide-up-down-in {
    animation: slideUpIn 0.5s ease forwards;
}

.slide-up-down-out {
    animation: slideDownOut 0.5s ease forwards;
}

.slide-down-up-in {
    animation: slideDownIn 0.5s ease forwards;
}

.slide-down-up-out {
    animation: slideUpOut 0.5s ease forwards;
}

.slide-left-right-in {
    animation: slideLeftIn 0.5s ease forwards;
}

.slide-left-right-out {
    animation: slideRightOut 0.5s ease forwards;
}

.slide-right-left-in {
    animation: slideRightIn 0.5s ease forwards;
}

.slide-right-left-out {
    animation: slideLeftOut 0.5s ease forwards;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.8);
        opacity: 0;
    }
}

.zoom-in {
    animation: zoomIn 0.5s ease forwards;
}

.zoom-out {
    animation: zoomOut 0.5s ease forwards;
}

@keyframes rotateIn {
    from {
        transform: rotate(-180deg);
        opacity: 0;
    }

    to {
        transform: rotate(0);
        opacity: 1;
    }
}

.rotate-in {
    animation: rotateIn 0.6s ease forwards;
}

@keyframes bounceIn {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

@keyframes bounceOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.9);
        opacity: 0;
    }
}

.bounce-in {
    animation: bounceIn 0.5s ease forwards;
}

.bounce-out {
    animation: bounceOut 0.5s ease forwards;
}

@keyframes rotateZoomIn {
    from {
        transform: scale(0.5) rotate(-45deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

@keyframes rotateZoomOut {
    from {
        transform: scale(1) rotate(0);
        opacity: 1;
    }

    to {
        transform: scale(0.5) rotate(45deg);
        opacity: 0;
    }
}

.rotate-zoom-in {
    animation: rotateZoomIn 0.6s ease forwards;
}

.rotate-zoom-out {
    animation: rotateZoomOut 0.6s ease forwards;
}

@keyframes flipIn {
    from {
        transform: rotateY(-90deg);
        opacity: 0;
    }

    to {
        transform: rotateY(0);
        opacity: 1;
    }
}

@keyframes flipOut {
    from {
        transform: rotateY(0);
        opacity: 1;
    }

    to {
        transform: rotateY(90deg);
        opacity: 0;
    }
}

.flip-in {
    animation: flipIn 0.5s ease forwards;
}

.flip-out {
    animation: flipOut 0.5s ease forwards;
}

@keyframes pulseIn {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes pulseOut {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

.pulse-in {
    animation: pulseIn 0.6s ease forwards;
}

.pulse-out {
    animation: pulseOut 0.6s ease forwards;
}

@keyframes fadeSlideIn {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(20px);
        opacity: 0;
    }
}

.fade-slide-in {
    animation: fadeSlideIn 0.5s ease forwards;
}

.fade-slide-out {
    animation: fadeSlideOut 0.5s ease forwards;
}

@keyframes spinIn {
    from {
        transform: rotateX(-180deg);
        opacity: 0;
    }

    to {
        transform: rotateX(0);
        opacity: 1;
    }
}

@keyframes spinOut {
    from {
        transform: rotateX(0);
        opacity: 1;
    }

    to {
        transform: rotateX(180deg);
        opacity: 0;
    }
}

.spin-in {
    animation: spinIn 0.6s ease forwards;
}

.spin-out {
    animation: spinOut 0.6s ease forwards;
}

/*=== FIN Rocket blast (animation)
==================================*/