/* =========================================
   TAKERU ONLINE
   STYLE COMMUN DES CATÉGORIES
   ========================================= */


/* =========================================
   BASE GÉNÉRALE
   ========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    min-height: 100vh;

    background-color: #10131b;
    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.45)
        ),
        url("../images/fond-cat.webp");

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: #ffffff;
    font-family: Arial, sans-serif;
}

main {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* =========================================
   TITRE GRAPHIQUE DU SITE
   ========================================= */

.titre-site {
    display: block;
    width: 50%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;

    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Limiter la zone cliquable aux dimensions du titre */
main > header > a:has(> .titre-site) {
    display: block;
    width: 50%;
    max-width: 400px;
    margin: 0 auto;
}

/* L'image occupe exactement la largeur de son lien */
main > header > a > .titre-site {
    width: 100%;
}

/* Effet de rapprochement du titre vers le visiteur */
@media (hover: hover) and (pointer: fine) {
    a:hover > .titre-site {
        transform: scale(1.035);
    }
}

/* =========================================
   EN-TÊTE DES CATÉGORIES
   ========================================= */

main > header {
    text-align: center;
    margin-bottom: 35px;
}

main > header h1 {
    margin: 25px 0 0;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #ffffff;
}

/* Ligne de séparation lumineuse */
main > header::after {
    content: "";
    display: block;
    width: 80%;
    max-width: 700px;
    height: 1px;
    margin: 30px auto 0;

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

    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.65),
        0 0 14px rgba(255, 255, 255, 0.25);
}

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

.navigation-categorie {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 0 0 40px;
}

.navigation-categorie button,
.navigation-categorie a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;

    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;

    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.navigation-categorie button:hover,
.navigation-categorie a:hover {
    background: rgba(255, 255, 255, 0.20);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.30);
}


/* =========================================
   PIED DE PAGE
   ========================================= */

.footer {
    width: 100%;
    padding: 25px 20px 20px;
    text-align: center;

    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.6;

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

.footer p {
    margin: 3px 0;
}

.footer a {
    color: white;
    text-decoration: none;
}

.footer a:hover {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}


/* =========================================
   SIGNATURE DU DÉVELOPPEUR
   ========================================= */

p.text-mini-blanc {
    color: #ffffff !important;
    font-size: 9px !important;
    text-align: center !important;
}

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

#retour-haut {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 100;

    width: 44px;
    height: 44px;

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

    padding: 0;

    color: white;
    font-size: 28px;
    line-height: 1;

    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;

    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.35),
        0 0 18px rgba(255, 255, 255, 0.12);

    text-shadow: 0 0 7px rgba(255, 255, 255, 0.5);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

#retour-haut.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#retour-haut:hover {
    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.55),
        0 0 24px rgba(255, 255, 255, 0.22);
}

/* Adaptation smartphone */

@media (max-width: 600px) {
    #retour-haut {
        right: 15px;
        bottom: 15px;
        width: 40px;
        height: 40px;
        font-size: 25px;
    }
}

/* =========================================
   COM ZONE - PRÉSENTATION DES ARTICLES
   ========================================= */

.blog-contenu {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

.blog-article {
    padding: 35px 40px;

    background: rgba(0, 0, 0, 0.45);

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

    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.18),
        0 0 25px rgba(255, 255, 255, 0.08);
}

.blog-date {
    margin: 0 0 15px;

    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.blog-titre {
    margin: 0 0 30px;

    color: #ffffff;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

.blog-texte {
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    line-height: 1.8;
    text-align: left;
}

.blog-texte p {
    margin: 0 0 18px;
}

/* Adaptation smartphone */

@media (max-width: 600px) {
    .blog-article {
        padding: 25px 20px;
    }

    .blog-titre {
        font-size: 23px;
    }

    .blog-texte {
        font-size: 15px;
    }
}

/* =========================================
   COM ZONE - IMAGE DES ARTICLES
   ========================================= */

.blog-image {
    width: 100%;
    margin: 0 auto 30px;
    text-align: center;
}

.blog-image img {
    display: block;

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

    margin: 0 auto;
    object-fit: contain;

    border-radius: 8px;
    cursor: zoom-in;
}

/* =========================================
   COM ZONE - VISIONNEUSE PLEIN ÉCRAN
   ========================================= */

.visionneuse {
    position: fixed;
    inset: 0;
    z-index: 10000;

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

    overflow: hidden;
    background: rgba(0, 0, 0, 0.96);

    cursor: zoom-out;
    touch-action: none;
}

/* Visionneuse ouverte */

.visionneuse.ouverte {
    display: flex;
}

/* Image agrandie */

.visionneuse img {
    display: block;

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

    width: auto;
    height: auto;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;

    touch-action: none;
    cursor: grab;

    transform-origin: center center;
}

/* Curseur pendant le déplacement */

.visionneuse img.en-deplacement {
    cursor: grabbing;
}

/* Bouton de recentrage de la visionneuse */

#visionneuse-recentrer {
    position: absolute;
    top: 20px;
    right: 68px;
    z-index: 2;

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

    width: 38px;
    height: 38px;

    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;

    font-size: 17px;
    cursor: pointer;

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

    transition: background 0.2s, box-shadow 0.2s;
}

#visionneuse-recentrer:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

#visionneuse-recentrer:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* =========================================
   COM ZONE - BOUTON DE FERMETURE
   ========================================= */

#visionneuse-fermer {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;

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

    width: 38px;
    height: 38px;

    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;

    font-size: 17px;
    cursor: pointer;

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

    transition: background 0.2s, box-shadow 0.2s;
}

#visionneuse-fermer:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

#visionneuse-fermer:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* =========================================
   COM ZONE - NAVIGATION DES ARTICLES
   ========================================= */

.blog-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    width: 100%;
    max-width: 850px;
    margin: 25px auto;
}

/* Flèches de navigation */

.blog-fleche {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;

    font-size: 15px;
    cursor: pointer;

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

    transition: background 0.2s, box-shadow 0.2s;
}

.blog-fleche:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

/* Flèche désactivée : aucun article disponible */

.blog-fleche:disabled {
    opacity: 0.25;
    cursor: default;
    box-shadow: none;
}

/* Aucun effet au survol d'une flèche désactivée */

.blog-fleche:disabled:hover {
    background: rgba(0, 0, 0, 0.55);
    box-shadow: none;
}

/* Compteur central */

.blog-compteur {
    min-width: 65px;

    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    text-align: center;

    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Adaptation mobile */

@media (max-width: 600px) {
    .blog-navigation {
        gap: 15px;
        margin: 20px auto;
    }

    .blog-fleche {
        width: 36px;
        height: 36px;
    }
}

/* COM ZONE - Apparence des liens dans les articles */
.blog-texte a,
.blog-texte a:visited {
    color: #c0c0c0;
    text-decoration: none;
}

/* COM ZONE - Bleu clair au survol des liens */
.blog-texte a:hover,
.blog-texte a:visited:hover {
    color: #87cefa;
}

/* =========================================
   OUTFIT DU JOUR — GALERIE
   ========================================= */

/* Conteneur principal de la galerie */
.outfit-galerie {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* Cadre de la photographie principale */
.outfit-photo-principale {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 450px;
    aspect-ratio: 9 / 16;
    background-color: #000;
    overflow: hidden;
    box-sizing: border-box;
}

/* Photographie affichée dans le cadre principal */
.outfit-photo-principale img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Date de publication sous la photographie principale */
.outfit-date-principale {
    margin: 15px 0 25px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}

/* OUTFIT DU JOUR — Espacement de la date au-dessus de la photographie */
.outfit-date-principale {
    margin: 0 0 15px;
}

/* Mini-carrousel des photographies */
.outfit-carrousel {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 900px;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    padding: 15px 0;
    scroll-behavior: smooth;
}

/* Miniatures du carrousel OUTFIT DU JOUR */
.outfit-miniature {
    flex: 0 0 auto;
    width: 90px;
    aspect-ratio: 9 / 16;
    background-color: #000;
    border: 1px solid #fff;
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
    transition: box-shadow 0.25s ease;
}

/* Renforcement du halo au survol */
.outfit-miniature:hover {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
}

/* Photographies à l'intérieur des miniatures */
.outfit-miniature img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Miniature actuellement sélectionnée */
.outfit-miniature.active {
    border-color: #fff;
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 18px rgba(255, 255, 255, 0.4);
}

/* Cadre lumineux de la photographie principale */
.outfit-photo-principale {
    border: 1px solid #fff;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    transition: box-shadow 0.25s ease;
}

/* Renforcement du halo au survol */
.outfit-photo-principale:hover {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.75);
}

/* Date de publication sous chaque miniature */
.outfit-date-miniature {
    margin-top: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
}

/* Ensemble miniature et date de publication */
.outfit-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 90px;
}

/* OUTFIT DU JOUR — Masquer le mini-carrousel sur mobile */
@media (max-width: 767px) {
    .outfit-carrousel {
        display: none;
    }
}

/* OUTFIT DU JOUR — Curseur de la photographie principale */
.outfit-photo-principale img {
    cursor: zoom-in;
}

/* OUTFIT DU JOUR — Fond de la visionneuse plein écran */
.outfit-visionneuse {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.95);
}

/* Conserver la visionneuse masquée lorsqu'elle est fermée */
.outfit-visionneuse[hidden] {
    display: none;
}

/* OUTFIT DU JOUR — Photographie dans la visionneuse plein écran */
.outfit-visionneuse-image {
    display: block;
    max-width: 95vw;
    max-height: 95vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* OUTFIT DU JOUR — Curseur de fermeture de la visionneuse */
.outfit-visionneuse {
    cursor: zoom-out;
}

/* OUTFIT DU JOUR — Apparence des flèches de navigation */
.outfit-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    cursor: pointer;
}

/* Respecter le masquage des flèches */
.outfit-fleche[hidden] {
    display: none;
}

/* OUTFIT DU JOUR — Position des flèches de navigation */
.outfit-fleche-gauche {
    left: 10px;
}

.outfit-fleche-droite {
    right: 10px;
}

/* OUTFIT DU JOUR — Flèches réservées aux écrans mobiles */
@media (min-width: 768px) {
    .outfit-fleche {
        display: none;
    }
}

/* OUTFIT DU JOUR — Navigation tactile sur la photographie */
@media (max-width: 767px) {
    .outfit-photo-principale {
        touch-action: pan-y;
    }
}

/* OUTFIT DU JOUR — Défilement tactile du mini-carrousel */
.outfit-carrousel {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* OUTFIT DU JOUR — Centrage des miniatures dans le carrousel */
.outfit-carrousel {
    scroll-padding-inline: 50%;
}

.outfit-element {
    scroll-snap-align: center;
}

/* OUTFIT DU JOUR — Alignement du défilement sur les miniatures */
.outfit-carrousel {
    scroll-snap-type: x proximity;
}

/* OUTFIT DU JOUR — Espacement aux extrémités du carrousel */
.outfit-carrousel {
    padding-left: max(0px, calc(50% - 45px));
    padding-right: max(0px, calc(50% - 45px));
}

/* OUTFIT DU JOUR — Masquer la barre de défilement du carrousel */
.outfit-carrousel {
    scrollbar-width: none;
}

.outfit-carrousel::-webkit-scrollbar {
    display: none;
}

/* OUTFIT DU JOUR — Curseur du carrousel */
.outfit-carrousel {
    cursor: grab;
}

/* Curseur pendant le glissement à la souris */
.outfit-carrousel.outfit-glissement {
    cursor: grabbing;
}

/* OUTFIT DU JOUR — Empêcher la sélection pendant le glissement */
.outfit-carrousel {
    user-select: none;
    -webkit-user-select: none;
}

/* OUTFIT DU JOUR — Empêcher le déplacement natif des miniatures */
.outfit-miniature img {
    -webkit-user-drag: none;
}

/* OUTFIT DU JOUR — Ajustement des dates des miniatures */
.outfit-date-miniature {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* OUTFIT DU JOUR — Masquer réellement l'image sans photographie */
.outfit-image-principale[hidden] {
    display: none;
}

/* OUTFIT DU JOUR — Centrer le message lorsque la galerie est vide */
.outfit-message-vide {
    margin: 0;
    padding: 15px;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
}

/* OUTFIT DU JOUR — Masquer le message lorsqu'une photographie existe */
.outfit-message-vide[hidden] {
    display: none;
}

/* OUTFIT DU JOUR — Séparation entre la photographie et le carrousel */
@media (min-width: 768px) {
    .outfit-carrousel {
        border-top: 1px solid rgba(255, 255, 255, 0.7);
        margin-top: 25px;
        padding-top: 20px;
    }
}

/* OUTFIT DU JOUR — Limiter la séparation à la largeur de la photo */
@media (min-width: 768px) {
    .outfit-carrousel {
        border-top: none;
        position: relative;
    }

    .outfit-carrousel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: min(100%, 450px);
        border-top: 1px solid rgba(255, 255, 255, 0.7);
    }
}

/* OUTFIT DU JOUR — Séparateur fixe sous la photographie principale */
@media (min-width: 768px) {

    /* Masquer l'ancien séparateur mobile */
    .outfit-carrousel::before {
        display: none;
    }

    /* Nouveau séparateur indépendant du défilement */
    .outfit-separateur {
        width: 100%;
        max-width: 450px;
        height: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.7);
        margin-top: 25px;
    }

    /* Éviter un espacement supplémentaire au-dessus du carrousel */
    .outfit-carrousel {
        margin-top: 0;
    }
}

/* Aucun séparateur sur téléphone */
@media (max-width: 767px) {
    .outfit-separateur {
        display: none;
    }
}

/* OUTFIT DU JOUR — Déplacement immédiat pendant le glissement */
.outfit-carrousel.outfit-glissement {
    scroll-behavior: auto;
    scroll-snap-type: none;
}

/* Curseur main fermée sur toute la zone pendant le glissement */
.outfit-carrousel.outfit-glissement,
.outfit-carrousel.outfit-glissement .outfit-miniature {
    cursor: grabbing;
}

/* OUTFIT DU JOUR — Gestion tactile de la visionneuse */
.outfit-visionneuse {
    touch-action: none;
}

/* =========================================
   OUTFIT DU JOUR — BOUTON DE RECENTRAGE
   ========================================= */

.outfit-bouton-recentrer {
    position: absolute;
    top: 20px;
    right: 70px;
    z-index: 3;

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

    width: 40px;
    height: 40px;
    padding: 0;

    color: #fff;
    background: rgba(0, 0, 0, 0.65);

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px;

    font-size: 18px;
    cursor: pointer;

    box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
    transition: box-shadow 0.2s ease;
}

.outfit-bouton-recentrer:hover {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

/* =========================================
   OUTFIT DU JOUR — BOUTON DE FERMETURE
   ========================================= */

.outfit-bouton-fermer {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;

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

    width: 40px;
    height: 40px;
    padding: 0;

    color: #fff;
    background: rgba(0, 0, 0, 0.65);

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px;

    font-size: 18px;
    cursor: pointer;

    box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
    transition: box-shadow 0.2s ease;
}

.outfit-bouton-fermer:hover {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

/* =========================================
   OUTFIT DU JOUR — BOUTON DE TÉLÉCHARGEMENT
   ========================================= */

.outfit-bouton-telecharger {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 3;

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

    width: 40px;
    height: 40px;
    padding: 0;

    color: #fff;
    background: rgba(0, 0, 0, 0.65);

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px;

    font-size: 18px;
    text-decoration: none;
    cursor: pointer;

    box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
    transition: box-shadow 0.2s ease;
}

.outfit-bouton-telecharger:hover {
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}


/* =========================================
   TRANSFERT — FORMULAIRE DE CONNEXION
   ========================================= */

.transfer-connexion {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    padding: 35px 30px;

    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 12px;

    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.18),
        0 0 25px rgba(255, 255, 255, 0.08);

    text-align: center;
}

.transfer-connexion h2 {
    margin: 0 0 25px;
    color: #ffffff;
    font-size: 22px;
    letter-spacing: 2px;
}

.transfer-connexion p {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.6;
}

.transfer-connexion form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.transfer-connexion label {
    color: #ffffff;
    font-size: 14px;
    text-align: left;
}

.transfer-connexion input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 10px;

    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px;

    font-family: inherit;
    font-size: 15px;
}

.transfer-connexion input:focus {
    outline: none;
    border-color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

.transfer-connexion button[type="submit"] {
    margin-top: 10px;
    padding: 12px 24px;

    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px;

    font-family: inherit;
    font-size: 15px;
    font-weight: bold;

    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.transfer-connexion button[type="submit"]:hover {
    background: rgba(255, 255, 255, 0.20);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.30);
}

.transfer-erreur {
    margin-bottom: 20px;
    color: #ff4545 !important;
    font-size: 14px;
}

/* Adaptation smartphone */

@media (max-width: 600px) {
    .transfer-connexion {
        padding: 25px 20px;
    }

    .transfer-connexion h2 {
        font-size: 20px;
    }
}

/* =========================================
   TRANSFERT — BOUTON DÉCONNEXION
   ========================================= */

.transfer-deconnexion {
    display: flex;
    justify-content: center;
    margin: 25px auto 10px;
}

.transfer-deconnexion button {
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.transfer-deconnexion button:hover {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

/* =========================================
   TRANSFERT — SÉLECTEUR DE FICHIERS
   ========================================= */

.transfer-selecteur {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

/* Champ natif invisible, mais accessible */
.transfer-selecteur input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
}

/* Bouton personnalisé */
.transfer-selecteur .transfer-bouton-fichier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 10px 15px;
    margin: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.transfer-selecteur .transfer-bouton-fichier:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

/* Repère visuel pour la navigation au clavier */
.transfer-selecteur input[type="file"]:focus-visible
+ .transfer-bouton-fichier {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Nom du fichier sélectionné */
.transfer-selecteur .transfer-nom-fichier {
    color: #fff;
    font-size: 14px;
    overflow-wrap: anywhere;
    min-width: 0;
    text-align: center;
}


/* =========================================
   TRANSFERT — SOUS-TUILE DE DÉPÔT
   ========================================= */

/* Cadre principal de la zone */
.transfer-selecteur {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 15px;
    border: 2px dashed rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.2s ease,
                background 0.2s ease,
                box-shadow 0.2s ease;
}

/* Organisation intérieure */
.transfer-selecteur-contenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 18px;
}

/* Bouton et nom du fichier */
.transfer-selecteur-ligne {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

/* Grand symbole + */
.transfer-symbole-depot {
    font-size: 52px;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    user-select: none;
    pointer-events: none;
}

/* Halo au survol */
.transfer-selecteur:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.25);
}

/* =========================================
   TRANSFERT — EFFET GLISSER-DÉPOSER
   ========================================= */

.transfer-selecteur.transfer-drag-active {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 15px rgba(255, 255, 255, 0.55),
        0 0 30px rgba(255, 255, 255, 0.25),
        inset 0 0 15px rgba(255, 255, 255, 0.08);
}

.transfer-selecteur.transfer-drag-active .transfer-symbole-depot {
    color: #fff;
    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.9),
        0 0 25px rgba(255, 255, 255, 0.5);
}

/* =========================================
   TRANSFERT — MESSAGES DE CONFIRMATION
   ========================================= */

/* Transfert réussi */
.transfer-message.transfer-succes {
    color: #63e69a;
    text-shadow: 0 0 8px rgba(99, 230, 154, 0.35);
}

/* Erreur de transfert */
.transfer-message.transfer-erreur {
    color: #ff6666;
    text-shadow: 0 0 8px rgba(255, 102, 102, 0.25);
}

/* =========================================
   TRANSFERT — ESPACEMENT DES TUILES
   ========================================= */

.transfer-liste-fichiers {
    margin-top: 25px;
}

/* =========================================
   TRANSFERT — PRÉSENTATION DES FICHIERS
   ========================================= */

/* Une ligne par fichier */
.transfer-fichier {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
}

/* Carré réservé à l'icône ou à la miniature */
.transfer-fichier-icone {
    width: 60px;
    height: 60px;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #ffffff;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
}

/* Symbole du type de fichier */
.transfer-fichier-icone i {
    font-size: 28px;
    color: #ffffff;
}

/* Nom original du fichier */
.transfer-fichier-nom {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
}

/* =========================================
   TRANSFERT — MINIATURES DES IMAGES
   ========================================= */

.transfer-fichier-icone img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================================
   TRANSFERT — VISIONNEUSE PLEIN ÉCRAN
   ========================================= */

/* Miniatures cliquables */
.transfer-image-cliquable {
    cursor: pointer;
}

/* Fond noir de la visionneuse */
.transfer-visionneuse:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.96);
    box-sizing: border-box;
    cursor: pointer;
}

/* Visionneuse masquée */
.transfer-visionneuse[hidden] {
    display: none !important;
}

/* Image agrandie */
.transfer-visionneuse-image,
#transfer-visionneuse-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: pointer;
}

/* Empêcher le défilement de la page derrière */
body.transfer-visionneuse-ouverte {
    overflow: hidden;
}

/* =========================================
   TRANSFERT — PAGE PUBLIQUE DE TÉLÉCHARGEMENT
   ========================================= */

/* Cadre principal */
.transfer-public {
    max-width: 500px;
    margin: 35px auto 50px;
    padding: 35px 25px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.18),
        0 0 25px rgba(255, 255, 255, 0.08);
    text-align: center;
}

/* Titre du cadre */
.transfer-public h2 {
    margin: 0 0 30px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

/* Carré de prévisualisation */
.transfer-public-icone {
    width: 60px;
    height: 60px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #fff;
    border-radius: 8px;
}

/* Icône du fichier */
.transfer-public-icone i {
    color: #fff;
    font-size: 28px;
}

/* Miniature des images */
.transfer-public-icone img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Nom original du fichier */
.transfer-public-nom {
    margin: 0 0 30px;
    color: #fff;
    font-size: 16px;
    overflow-wrap: anywhere;
}

/* Bouton de téléchargement */
.transfer-public-telecharger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 25px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #fff;
    border-radius: 10px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.2s ease,
        box-shadow 0.2s ease;
}

/* Survol du bouton */
.transfer-public-telecharger:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.55),
        0 0 22px rgba(255, 255, 255, 0.25);
}

/* Adaptation aux petits écrans */
@media (max-width: 600px) {
    .transfer-public {
        margin: 25px 10px 40px;
        padding: 30px 15px;
    }

    .transfer-public h2 {
        font-size: 18px;
    }

    .transfer-public-nom {
        font-size: 14px;
    }
}

/* =========================================
   TRANSFERT — CONFIRMATION DU TÉLÉCHARGEMENT
   ========================================= */

#transfer-message-telechargement {
    margin: 20px 0 0;
    color: #4ade80;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

/* Masquer le message tant que le téléchargement
   n'a pas été demandé */
#transfer-message-telechargement[hidden] {
    display: none;
}

/* =========================================
   TRANSFERT — BOUTON COPIER LE LIEN
   ========================================= */

.transfer-copier-lien {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid #fff;
    border-radius: 8px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        box-shadow 0.2s ease;
}

/* Taille du symbole */
.transfer-copier-lien i {
    font-size: 16px;
}

/* Halo blanc au survol */
.transfer-copier-lien:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.55),
        0 0 20px rgba(255, 255, 255, 0.25);
}

/* Confirmation visuelle après copie */
.transfer-copier-lien .fa-check {
    color: #4ade80;
}

/* =========================================
   TRANSFERT — BOUTON SUPPRIMER LE FICHIER
   ========================================= */

/* Formulaire de suppression */
.transfer-formulaire-suppression {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Bouton rouge */
.transfer-supprimer-fichier {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    background: rgba(120, 0, 0, 0.55);
    border: 1px solid #e05252;
    border-radius: 8px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        box-shadow 0.2s ease;
}

/* Taille du symbole */
.transfer-supprimer-fichier i {
    font-size: 16px;
}

/* Halo rouge au survol */
.transfer-supprimer-fichier:hover {
    color: #fff;
    background: rgba(180, 0, 0, 0.75);
    box-shadow:
        0 0 10px rgba(255, 60, 60, 0.55),
        0 0 20px rgba(255, 40, 40, 0.25);
}

/* =========================================
   OUTFIT DU JOUR — ANIMATION PHOTO PRINCIPALE
   ========================================= */

@keyframes outfitApparitionPhoto {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

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

.outfit-image-principale.outfit-animation-apparition {
    animation: outfitApparitionPhoto 300ms ease-out both;
}