/* ---------------------------------- */
/* RESET */
/* ---------------------------------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
}

/* ---------------------------------- */
/* PAGE */
/* ---------------------------------- */

body{

    min-height:100vh;

    font-family:Arial, Helvetica, sans-serif;

    background-image:url("assets/images/backgrounds/desktop.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    position:relative;

    overflow-x:hidden;
}


/* ---------------------------------- */
/* FILTRE BLEU */
/* ---------------------------------- */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:rgba(15,45,90,0.32);

    pointer-events:none;

    z-index:0;

}



/* ---------------------------------- */
/* TABLETTE */
/* ---------------------------------- */

@media (max-width:1024px){

    body{

        background-image:url("assets/images/backgrounds/tablet.webp");

    }

}


/* ---------------------------------- */
/* SMARTPHONE */
/* ---------------------------------- */

@media (max-width:768px){

    body{

        background-image:url("assets/images/backgrounds/mobile.webp");

    }

}

/* ===================================== */
/* HEADER */
/* ===================================== */

.site-header{

    display:flex;
    align-items:center;

    gap:22px;

    padding:30px 40px;

    position:relative;

    z-index:10;

}


.logo-link{

    display:block;

    flex-shrink:0;

}


.logo{

    width:130px;
    height:130px;

    object-fit:contain;

    border-radius:50%;

    display:block;

}


.site-title{

    color:white;

    text-shadow:
        2px 2px 8px rgba(0,0,0,.75);

}


.site-title h1{

    font-size:2.8rem;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:8px;

}


.site-title p{

    font-size:1rem;

    letter-spacing:6px;

    opacity:.95;

}



/* ============================ */
/* TABLETTE */
/* ============================ */

@media (max-width:1024px){

    .logo{

        width:110px;
        height:110px;

    }

    .site-title h1{

        font-size:2.2rem;

    }

}



/* ============================ */
/* SMARTPHONE */
/* ============================ */

@media (max-width:768px){

    .site-header{

        padding:20px;

        gap:16px;

    }

    .logo{

        width:80px;
        height:80px;

    }

    .site-title h1{

        font-size:1.5rem;

        letter-spacing:2px;

    }

    .site-title p{

        font-size:.85rem;

        letter-spacing:3px;

    }

}

/* ===================================== */
/* CONTENU PRINCIPAL */
/* ===================================== */

.home-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    padding: 20px 0 50px;
}


/* ===================================== */
/* ZONE DES CATÉGORIES */
/* ===================================== */

.categories-section {
    width: 100%;
    text-align: center;
    color: white;

    overflow: hidden;
}


/* ===================================== */
/* CARROUSEL */
/* ===================================== */

.categories-carousel {
    --category-size: 230px;

    display: flex;
    align-items: center;

    gap: 35px;

    width: 100%;

    padding-top: 35px;
    padding-bottom: 35px;

    padding-left: calc(50% - (var(--category-size) / 2));
    padding-right: calc(50% - (var(--category-size) / 2));

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    cursor: grab;

    scrollbar-width: none;

    touch-action: pan-y;
}

.categories-carousel::-webkit-scrollbar {
    display: none;
}

.categories-carousel.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

/* ===================================== */
/* BOUTONS DE NAVIGATION CATÉGORIES */
/* ===================================== */

.button-navigation {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;
}

/* ===================================== */
/* IMAGE DE CATÉGORIE */
/* ===================================== */

.category-card {
    width: var(--category-size);
    height: var(--category-size);

    flex: 0 0 var(--category-size);

    padding: 0;

    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 28px;

    background: rgba(10, 30, 65, 0.28);

    overflow: hidden;

    opacity: 0.55;

    transform: scale(0.82);

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

    scroll-snap-align: center;

    cursor: pointer;
}

.category-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 10px;

    user-select: none;
    pointer-events: none;
}

.category-card.active {
    opacity: 1;

    transform: scale(1);

    border-color: rgba(255, 255, 255, 0.98);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.45),
        0 0 10px rgba(255, 255, 255, 0.32),
        0 0 20px rgba(255, 255, 255, 0.16);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}


/* ===================================== */
/* TITRE CENTRAL */
/* ===================================== */

.category-title {
    min-height: 45px;

    margin-top: 5px;

    font-size: clamp(1.6rem, 4vw, 2.7rem);
    letter-spacing: 4px;

    text-shadow:
        2px 2px 8px rgba(0, 0, 0, 0.85);
}

.carousel-help {
    margin-top: 10px;

    font-size: 0.9rem;
    letter-spacing: 1px;

    opacity: 0.75;

    text-shadow:
        1px 1px 5px rgba(0, 0, 0, 0.9);
}


/* ===================================== */
/* TABLETTE */
/* ===================================== */

@media (max-width: 1024px) {

    .categories-carousel {
        --category-size: 190px;

        gap: 28px;

        padding-top: 25px;
        padding-bottom: 25px;
    }

}


/* ===================================== */
/* SMARTPHONE */
/* ===================================== */

@media (max-width: 768px) {

    .home-content {
        padding-top: 10px;
        padding-bottom: 30px;
    }

    .categories-carousel {
        --category-size: 145px;

        gap: 20px;

        padding-top: 20px;
        padding-bottom: 25px;
    }

    .category-card {
        border-radius: 20px;
    }

    .category-title {
        min-height: 36px;

        padding: 0 18px;

        letter-spacing: 2px;
    }

    .carousel-help {
        font-size: 0.8rem;
    }

}

/* ===================================== */
/* TRANSITION ENTRE ACCUEIL ET CONTENU */
/* ===================================== */

.categories-section {
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.categories-section.is-leaving {
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;
}


/* ===================================== */
/* ZONE DE CONTENU D'UNE CATÉGORIE */
/* ===================================== */

.category-content {
    width: min(1100px, calc(100% - 60px));

    margin: 10px auto 50px;
    padding: 28px;

    color: white;

    background: rgba(7, 29, 67, 0.72);

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 24px;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.35);

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

    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

.category-content[hidden] {
    display: none;
}

.category-content.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ===================================== */
/* BOUTON RETOUR */
/* ===================================== */

.back-button {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 24px;
    padding: 11px 17px;

    color: white;

    font: inherit;
    font-weight: 700;

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

    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.2);

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.back-button:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateX(-2px);
}

.back-button:focus-visible {
    outline: 3px solid rgba(190, 225, 255, 0.95);
    outline-offset: 4px;
}

/* ===================================== */
/* TABLETTE ET SMARTPHONE */
/* ===================================== */

@media (max-width: 1024px) {

    .category-content {
        width: min(900px, calc(100% - 40px));
    }

}

@media (max-width: 768px) {

    .category-content {
        width: calc(100% - 24px);

        margin-top: 5px;
        margin-bottom: 30px;

        padding: 20px;

        border-radius: 18px;
    }

    .back-button {
        margin-bottom: 20px;

        padding: 10px 15px;
    }

    .category-content-inner h2 {
        letter-spacing: 2px;
    }

}

/* ===================================== */
/* BANDEAU DE PRÉSENTATION DE CATÉGORIE */
/* ===================================== */

.category-content-inner {
    text-align: center;
    text-shadow:
        2px 2px 8px rgba(0, 0, 0, 0.8);
}

.category-content-inner > .content-placeholder,
.category-content-inner > .opened-category-logo,
.category-content-inner > #opened-category-title,
.category-content-inner > .opened-category-introduction {
    position: relative;
    z-index: 1;
}

.category-content-inner::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.04)
        );

    border: 1px solid rgba(255, 255, 255, 0.16);

    pointer-events: none;
}

.category-content-inner {
    position: relative;

    padding: 32px;

    border-radius: 20px;
}

.content-placeholder {
    margin-bottom: 18px;

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 4px;
    text-transform: uppercase;

    opacity: 0.78;
}

.opened-category-logo {
    display: block;

    width: 230px;
    height: 230px;

    margin: 0 auto 22px;

    object-fit: contain;

    padding: 10px;

    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 28px;

    background: rgba(10, 30, 65, 0.28);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.35),
        0 0 24px rgba(150, 210, 255, 0.2);
}

.category-content-inner > h2 {
    margin: 0;

    font-size: clamp(1.8rem, 4vw, 2.9rem);

    letter-spacing: 4px;
}

.opened-category-introduction {
    max-width: 760px;

    margin: 18px auto 0;

    font-size: 1.05rem;
    line-height: 1.7;

    opacity: 0.95;
}


/* ===================================== */
/* TITRE DES RESSOURCES */
/* ===================================== */

.category-entries::before {
    content: "Ressources disponibles";

    display: block;

    margin: 42px 0 24px;

    font-size: clamp(1.25rem, 3vw, 1.7rem);
    font-weight: 700;

    letter-spacing: 2px;

    text-align: center;

    text-shadow:
        2px 2px 8px rgba(0, 0, 0, 0.8);
}


/* ===================================== */
/* LISTE DES RESSOURCES */
/* ===================================== */

.category-entries {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    gap: 38px;
}


/* ===================================== */
/* CARTE DE RESSOURCE */
/* ===================================== */

.category-entry:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -19px;

    width: 38%;
    height: 1px;

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

    transform: translateX(-50%);
}

/* ===================================== */
/* MISE EN PAGE DES CARTES */
/* ===================================== */

.category-entry {
    position: relative;

    display: flex;
    align-items: center;

    gap: 24px;

    width: 100%;

    padding: 22px;

    text-align: left;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.11),
            rgba(255, 255, 255, 0.05)
        );

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.category-entry:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.07)
        );

    border-color: rgba(255, 255, 255, 0.35);
}


/* ===================================== */
/* IMAGE DE RESSOURCE */
/* ===================================== */

.category-entry-image {
    width: 120px;
    height: 120px;

    flex: 0 0 120px;

    object-fit: cover;

    border-radius: 16px;

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

    border: 1px solid rgba(255, 255, 255, 0.28);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.25);
}


/* ===================================== */
/* TEXTE DE RESSOURCE */
/* ===================================== */

.category-entry-content {
    flex: 1;
    min-width: 0;
}

.category-entry-content h3 {
    margin-bottom: 9px;

    font-size: 1.35rem;
    letter-spacing: 1px;

    color: white;
}

.category-entry-content p {
    max-width: 760px;

    margin-bottom: 16px;

    font-size: 0.98rem;
    line-height: 1.6;

    color: rgba(255, 255, 255, 0.9);
}


/* ===================================== */
/* ZONE DES LIENS */
/* ===================================== */

.category-entry-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}


/* ===================================== */
/* LIENS AFFICHÉS COMME DES BOUTONS */
/* ===================================== */

.category-entry-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 10px 16px;

    color: white;

    font-size: 0.9rem;
    font-weight: 700;

    text-decoration: none;

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

    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 999px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.18);

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease;
}

.category-entry-button:hover {
    background: rgba(255, 255, 255, 0.24);

    border-color: rgba(255, 255, 255, 0.78);

    transform: translateY(-1px);
}

.category-entry-button:focus-visible {
    outline: 3px solid rgba(190, 225, 255, 0.95);
    outline-offset: 4px;
}


/* ===================================== */
/* ADAPTATION TABLETTE */
/* ===================================== */

@media (max-width: 1024px) {

    .opened-category-logo {
        width: 190px;
        height: 190px;
    }

    .category-content-inner {
        padding: 28px;
    }

}


/* ===================================== */
/* ADAPTATION SMARTPHONE */
/* ===================================== */

@media (max-width: 768px) {

    .category-content-inner {
        padding: 22px 16px;
    }

    .opened-category-logo {
        width: 145px;
        height: 145px;

        border-radius: 20px;
    }

    .category-content-inner > h2 {
        letter-spacing: 2px;
    }

    .opened-category-introduction {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .category-entries::before {
        margin-top: 34px;
        text-align: center;
    }

    .category-entry {
        flex-direction: column;
        align-items: center;

        gap: 16px;

        padding: 18px;

        text-align: center;
    }

    .category-entry-image {
        width: 120px;
        height: 120px;

        flex-basis: 120px;
    }

    .category-entry-content h3 {
        font-size: 1.2rem;
    }

    .category-entry-content p {
        font-size: 0.93rem;
    }

    .category-entry-actions {
        justify-content: center;
    }

    .category-entry-button {
        width: 100%;
    }

}


/* ===================================== */
/* PAGE CITATIONS BIBLIQUES */
/* ===================================== */


.citations-content {

    position: relative;

    width: 100%;

    padding: 40px 20px 70px;

    box-sizing: border-box;

    z-index: 2;

}

.citations-section {

    width: min(100%, 1000px);

    margin: 0 auto;

}

.citations-navigation {

    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;

}

.home-button {

    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-height: 44px;

    padding: 0 20px;

    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 10px;

    background: rgba(15, 45, 90, 0.72);

    color: white;

    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);

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

}

.home-button:hover {

    background: rgba(20, 65, 115, 0.9);

    transform: translateY(-1px);

    box-shadow: 0 7px 17px rgba(0, 0, 0, 0.26);

}

.citations-content-inner {

    width: 100%;

    padding: 34px;

    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 24px;

    background: rgba(7, 29, 67, 0.72);

    color: white;

    text-align: center;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.35);

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

}

.citations-content-inner h1 {

    margin: 8px 0 14px;

    font-size: clamp(1.7rem, 4vw, 2.4rem);

    line-height: 1.2;

}

.citations-introduction {

    max-width: 720px;

    margin: 0 auto 30px;

    font-size: 1rem;
    line-height: 1.7;

    color: rgba(255, 255, 255, 0.95);

}

.citations-list {

    display: flex;
    flex-direction: column;
    gap: 0;

    width: 100%;

}

@media (max-width: 700px) {

    .citations-content {

        padding: 25px 12px 50px;

    }

    .citations-navigation {

        gap: 8px;

    }

    .home-button {

        min-height: 42px;

        padding: 0 16px;

        font-size: 0.95rem;

    }

    .citations-content-inner {

        padding: 24px 14px;

        border-radius: 14px;

    }

    .citations-introduction {

        font-size: 0.95rem;

        line-height: 1.6;

    }

}

/* TUILES DES CITATIONS *******************************************************/

.citation-card {

    position: relative;

    width: 100%;

    padding: 24px;

    box-sizing: border-box;

    overflow: visible;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.11),
            rgba(255, 255, 255, 0.05)
        );

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;

}

.citation-card:hover {

    transform: translateY(-2px);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.07)
        );

    border-color: rgba(255, 255, 255, 0.35);

}

.citation-card:not(:last-child) {
    margin-bottom: 38px;
}

.citation-card:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -20px;

    width: 38%;
    height: 1px;

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

    transform: translateX(-50%);
}

.citation-reference {

    margin: 0 0 18px;

    color: white;

    font-size: clamp(1.2rem, 3vw, 1.55rem);
    line-height: 1.3;

    text-align: center;

}

.citation-image {

    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0 auto 20px;

    border-radius: 10px;

}

@media (max-width: 700px) {

    .citation-card {

        padding: 14px;

    }

    .citation-reference {

        margin-bottom: 14px;

    }

    .citation-image {

        margin-bottom: 16px;

        border-radius: 8px;

    }

}

/* ===================================== */
/* FOOTER */
/* ===================================== */

.site-footer {

    position: relative;
    z-index: 2;

    margin-top: 70px;
    padding: 40px 20px;

    border-top: 1px solid rgba(255,255,255,.18);

    text-align: center;

    color: rgba(255,255,255,.92);
}

.site-footer-content {

    max-width: 900px;

    margin: auto;
}

.footer-copyright {

    font-size: .95rem;
    font-weight: 700;

    margin-bottom: 18px;

    text-shadow:
        1px 1px 6px rgba(0,0,0,.75);
}

.footer-cameo {

    margin-bottom: 18px;

    font-size: 0.68rem;

    font-style: italic;

    letter-spacing: 0.8px;

    color: rgba(255,255,255,.42);

    user-select: none;
}

.footer-contact {

    font-size: .95rem;

    line-height: 1.7;

    opacity: .88;

    margin-bottom: 12px;
}

.footer-email a {

    color: white;

    font-weight: 700;

    text-decoration: none;

    transition:
        opacity .2s ease,
        text-decoration-color .2s ease;
}

.footer-email a:hover {

    text-decoration: underline;

    opacity: .9;
}


/* ===================================== */
/* SMARTPHONE */
/* ===================================== */

@media (max-width:768px){

    .site-footer{

        margin-top:50px;

        padding:30px 18px;
    }

    .footer-contact{

        font-size:.9rem;
    }

}

/* BOUTON RETOUR EN HAUT **************************************************************/

#backToTop{

    position: fixed;

    right: 20px;
    bottom: 20px;

    width: 52px;
    height: 52px;

    border: none;
    border-radius: 50%;

    background: rgba(16, 86, 145, .92);

    color: white;

    font-size: 1.4rem;
    font-weight: bold;

    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;

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

    opacity: 0;
    visibility: hidden;

    transform: translateY(12px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s;

    z-index: 1000;

}

#backToTop:hover{

    background: rgba(20, 105, 176, 1);

    transform: translateY(0) scale(1.05);

}

#backToTop.show{

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

/* ===================================== */
/* ANIMATIONS RÉDUITES */
/* ===================================== */

@media (prefers-reduced-motion: reduce) {

    .categories-section,
    .category-content,
    .back-button {
        transition: none;
    }

}

/* ===================================== */
/* PRELOADER */
/* ===================================== */


#preloader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.4s ease;
}

#preloader img {
    width: 40px;
    height: auto;
}