/* =========================================
   TAKERU ONLINE
   Administration - Style général
   ========================================= */

* {
    box-sizing: border-box;
}

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

    background: #000000;
    color: #ffffff;

    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Zone principale */

main {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 45px 20px;
}

/* Titres */

h1 {
    margin: 0 0 12px;
    font-size: 28px;
    text-align: center;
}

h2 {
    margin: 0 0 30px;
    font-size: 21px;
    font-weight: normal;
    text-align: center;
}

/* Champs de formulaire */

input {
    max-width: 100%;
    padding: 11px 12px;

    color: #ffffff;
    background: #151515;

    border: 1px solid #777777;
    border-radius: 7px;

    font: inherit;
}

input:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Boutons */

button {
    padding: 10px 18px;

    color: #ffffff;
    background: #191919;

    border: 1px solid #aaaaaa;
    border-radius: 8px;

    font: inherit;
    cursor: pointer;

    transition: background 0.2s ease;
}

button:hover {
    background: #303030;
}

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

/* Liens */

a {
    color: #ffffff;
}

/* Smartphones */

@media (max-width: 600px) {
    main {
        padding: 30px 16px;
    }

    h1 {
        font-size: 23px;
    }

    h2 {
        font-size: 19px;
    }
}


/* =========================================
   FORMULAIRE DE CONNEXION
   ========================================= */

/* Libellés au-dessus des champs */

form label {

    display: block;
    margin-bottom: 5px;
    text-align: left;
}

/* Espacement entre les blocs */

form p {
    margin: 0 0 18px;
}

/* Champs plus compacts */

form input {
    height: 34px;
    padding: 5px 10px;
    font-size: 14px;
    vertical-align: middle;
}

/* Bouton œil à la même hauteur */

#afficher-mot-de-passe {
    width: 34px;
    height: 34px;
    padding: 0;
    margin-left: 5px;

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

    font-size: 15px;
    vertical-align: middle;
}

/* Bouton Accueil de la page de connexion */

a.bouton-accueil,
a.bouton-accueil:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 10px;
    padding: 10px 18px;

    color: #ffffff;
    background: #191919;

    border: 1px solid #aaaaaa;
    border-radius: 8px;

    font: inherit;
    line-height: 1.6;
    text-decoration: none;
}

a.bouton-accueil:hover {
    background: #303030;
    text-decoration: none;
}

/* TABLEAU DE BORD - Tuiles de gestion */

.admin-rubriques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 20px;
    margin: 30px 0;
}

.admin-tuile {
    padding: 25px 20px;
    background: #101010;
    border: 1px solid #777777;
    border-radius: 12px;
    text-align: center;
}

.admin-tuile h2 {
    margin: 0 0 15px;
    font-size: 22px;
    font-weight: bold;
}

.admin-tuile p {
    margin: 0 0 25px;
    color: #cccccc;
}

.admin-tuile-bouton {
    display: inline-block;
    padding: 10px 18px;
    color: #ffffff;
    background: #252525;
    border: 1px solid #aaaaaa;
    border-radius: 8px;
    text-decoration: none;
}

.admin-tuile-bouton:hover {
    background: #383838;
    text-decoration: none;
}

.admin-tuile-bouton:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Icônes des tuiles du tableau de bord */

.admin-tuile-icone {
    display: block;
    margin-bottom: 15px;
    font-size: 32px;
    color: #ffffff;
}


/* GESTION DE L'ACCUEIL - Texte de présentation */

.gestion-presentation {
    margin: 30px 0;
    padding: 25px;
    background: #101010;
    border: 1px solid #777777;
    border-radius: 12px;
}

.gestion-presentation h2 {
    text-align: left;
    margin-bottom: 15px;
}

.gestion-presentation textarea {
    display: block;
    width: 100%;
    min-height: 160px;
    margin: 10px 0 20px;
    padding: 12px;
    color: #ffffff;
    background: #151515;
    border: 1px solid #777777;
    border-radius: 8px;
    font: inherit;
    line-height: 1.6;
    resize: vertical;
}

.gestion-presentation textarea:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Confirmation d'enregistrement */

.gestion-presentation p[role="status"] {
    color: #ff4545;
    font-weight: bold;
    text-align: center;
}

/* Gestion de l'accueil - Couleurs des messages */
.gestion-presentation p[role="status"].message-succes,
p[role="status"].message-succes {
    color: #32cd32;
}

.gestion-presentation p[role="status"].message-erreur,
p[role="status"].message-erreur {
    color: #ff4545;
}

/* GESTION DE L'ACCUEIL - Formulaire photo de profil */

/* Champs de sélection des images */
.formulaire-photo input[type="file"],
.formulaire-categorie input[type="file"] {
    height: auto;
    display: block;
    width: 100%;
    max-width: none;
    padding: 10px;
    margin-top: 10px;

    color: #ffffff;
    background: #151515;
    border: 1px solid #777777;
    border-radius: 8px;

    font: inherit;
    font-size: 14px;
}

/* Boutons internes de sélection des fichiers */
.formulaire-photo input[type="file"]::file-selector-button,
.formulaire-categorie input[type="file"]::file-selector-button {
    color: #ffffff;
    background: #151515;
    border: 1px solid #777777;
    border-radius: 6px;
    padding: 8px 12px;
    margin-right: 10px;
    font: inherit;
    cursor: pointer;
}

.formulaire-photo input[type="file"]::file-selector-button {
    padding: 8px 14px;
    margin-right: 12px;

    color: #ffffff;
    background: #252525;
    border: 1px solid #aaaaaa;
    border-radius: 6px;

    font: inherit;
    cursor: pointer;
}

.formulaire-photo input[type="file"]::file-selector-button:hover {
    background: #383838;
}

.formulaire-photo p {
    margin: 20px 0 0;
}

.formulaire-photo button[type="submit"] {
    padding: 10px 18px;
}

/* Ajustements du formulaire photo */

.formulaire-photo input[type="file"] {
    height: auto;
    min-height: 56px;
}

.formulaire-photo button[type="submit"] {
    height: 42px;
    padding: 5px 18px;
}

/* Aperçu de la photo de profil */
.apercu-photo {
    text-align: center;
    margin: 20px 0;
}

.apercu-photo img {
    display: block;
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid white;
    margin: 0 auto 12px;
}

.apercu-photo p {
    margin: 0;
    font-size: 14px;
}

/* Bouton de suppression de la photo */
.formulaire-suppression-photo {
    margin-top: 15px;
}

.formulaire-suppression-photo button {
    min-height: 42px;
    padding: 8px 18px;
    background: #651b1b;
    color: white;
    border: 1px solid #a83b3b;
    border-radius: 6px;
}

.formulaire-suppression-photo button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Aperçu de l'image de fond */
.apercu-fond {
    text-align: center;
    margin: 20px 0;
}

.apercu-fond img {
    display: block;
    width: 100%;
    max-width: 450px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid white;
    margin: 0 auto 12px;
}

.apercu-fond p {
    margin: 0;
    font-size: 14px;
}

/* GESTION DES RÉSEAUX SOCIAUX */

.formulaire-reseaux {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.formulaire-reseaux label {
    display: block;
    margin-top: 8px;
}

.formulaire-reseaux input[type="url"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.formulaire-reseaux button {
    align-self: flex-start;
    margin-top: 15px;
}


/* BOUTON RETOUR EN HAUT */

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

    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;
    }
}

/* TAKERU ONLINE - Aperçu des catégories du carrousel */

.apercu-categorie {
    margin-top: 25px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
}

.apercu-categorie h3 {
    margin-top: 0;
    margin-bottom: 15px;
}


/* Image des catégories : mêmes dimensions que sur l'accueil */

.apercu-categorie img {
    display: block;
    width: 185px;
    height: 185px;
    max-width: 100%;

    object-fit: cover;

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

    margin-top: 15px;

    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);
}

/* Tablette */

@media (max-width: 1024px) {
    .apercu-categorie img {
        width: 155px;
        height: 155px;
    }
}

/* Smartphone */

@media (max-width: 600px) {
    .apercu-categorie img {
        width: 120px;
        height: 120px;
        border-radius: 20px;
    }
}

/* Espacement horizontal entre le champ et le bouton */
.formulaire-categorie .bouton-enregistrer {
    margin-top: 0;
    margin-left: 15px;
}

/* Espacement du bouton des catégories sur mobile */
@media (max-width: 600px) {
    .formulaire-categorie .bouton-enregistrer {
        margin-top: 12px;
        margin-left: 0;
    }
}

/* Espacement du bouton d'enregistrement des images du carrousel */
.formulaire-categorie button[value="enregistrer_image"] {
    margin-top: 15px;
}

/* Bouton de navigation vers le tableau de bord */
.navigation-categorie {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 40px;
}

.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 a:hover {
    background: rgba(255, 255, 255, 0.20);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.30);
}

/* COM ZONE - Liste des articles */
.comzone-consigne {
    text-align: center;
    margin-bottom: 25px;
}

.comzone-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 25px 0 40px;
}

.comzone-article {
    display: block;
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.comzone-article:hover,
.comzone-article:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
}

.comzone-article h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.comzone-article p {
    margin: 0;
    font-size: 14px;
}

/* COM ZONE - Formulaire de modification */
.comzone-formulaire {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 25px auto 40px;
    max-width: 800px;
    text-align: left;
}

.comzone-formulaire label {
    margin-top: 12px;
    font-weight: bold;
}

.comzone-formulaire input,
.comzone-formulaire textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font: inherit;
}

.comzone-formulaire textarea {
    resize: vertical;
    line-height: 1.6;
}

.comzone-formulaire input:focus,
.comzone-formulaire textarea:focus {
    outline: none;
    border-color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* COM ZONE - Bouton d'enregistrement */
.comzone-enregistrer {
    align-self: center;
    margin-top: 20px;
    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: inherit;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.comzone-enregistrer:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.20);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.30);
}

.comzone-enregistrer:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Navigation administration - Bouton RETOUR */
.navigation-categorie {
    gap: 12px;
}

.navigation-categorie .bouton-retour {
    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;
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

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

/* COM ZONE - Confirmation d'enregistrement */
.comzone-confirmation {
    text-align: center;
    margin: 25px auto;
    font-weight: bold;
    color: #32cd32;
}

/* COM ZONE - Harmonisation du bouton RETOUR */
.navigation-categorie a.bouton-retour {
    text-decoration: none;
}

/* COM ZONE - Bouton de suppression */
.comzone-supprimer {
    align-self: center;
    margin-top: 18px;
    padding: 12px 24px;
    border: 1px solid #a83b3b;
    border-radius: 8px;
    background: #651b1b;
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* COM ZONE - Conserver la teinte rouge au survol */
.comzone-supprimer:hover {
    background: #651b1b;
    box-shadow: none;
}

.comzone-supprimer:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* COM ZONE - Centrage du formulaire de suppression */
.comzone-formulaire-suppression {
    display: flex;
    justify-content: center;
    margin: -20px 0 40px;
}

/* PHOTO DE PROFIL - Zone de glisser-déposer */

#zone-depot-photo {
    padding: 15px;
    border: 2px dashed transparent;
    border-radius: 10px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Réaction lorsqu'une image survole la zone */

#zone-depot-photo.survol-depot {
    border-color: #888888;
    background-color: rgba(255, 255, 255, 0.06);
}

/* IMAGE DE FOND - Zone de glisser-déposer */

#zone-depot-fond {
    padding: 15px;
    border: 2px dashed transparent;
    border-radius: 10px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Réaction lorsqu'une image survole la zone */

#zone-depot-fond.survol-depot {
    border-color: #888888;
    background-color: rgba(255, 255, 255, 0.06);
}

/* TABLEAU DE BORD - Tuile de sécurité du compte */

.admin-securite {
    margin: 30px 0 40px;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.035);
    border: 1px solid #555555;
    border-radius: 12px;
}

/* Titre de la tuile */

.admin-securite h2 {
    margin-top: 0;
    text-align: center;
}

/* Présentation du formulaire */

.admin-securite > p {
    text-align: center;
}

.formulaire-mot-de-passe {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Espacement des champs */

.formulaire-mot-de-passe label {
    margin-top: 8px;
}

/* Boutons du formulaire */

.formulaire-mot-de-passe button {
    align-self: center;
}

/* SÉCURITÉ DU COMPTE - Présentation du tiroir */

/* Masquer le triangle natif du navigateur */
.admin-securite-entete {
    list-style: none;
    cursor: pointer;
    text-align: center;
}

.admin-securite-entete::-webkit-details-marker {
    display: none;
}

/* Centrer la flèche d'ouverture */
.admin-securite-fleche {
    display: block;
    margin: 12px auto 0;
    text-align: center;
    font-size: 16px;
}

/* Masquer la flèche d'ouverture lorsque le tiroir est ouvert */
.admin-securite[open] .admin-securite-fleche {
    display: none;
}

/* Bouton de fermeture en bas du tiroir */
.admin-securite-fermer {
    display: block;
    margin: 20px auto 0;
    padding: 8px 18px;
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
    font-size: 16px;
}

.admin-securite-fermer:hover {
    background: transparent;
    box-shadow: none;
}

/* SÉCURITÉ DU COMPTE - Messages de résultat */
.message-securite {
    text-align: center;
    font-weight: 600;
}

/* Message de réussite */
.message-securite-succes {
    color: #32cd32;
}

/* Message d'erreur */
.message-securite-erreur {
    color: #ff4545;
}

/* =========================================
   COM ZONE - Grande tuile de gestion des articles
   ========================================= */

.comzone-zone-articles {
    margin: 35px 0 45px;
    padding: 30px 25px;

    background: #101010;
    border: 1px solid #777777;
    border-radius: 12px;
}

/* Bouton de création d'un article */

.comzone-creation {
    display: flex;
    justify-content: center;
    margin-bottom: 35px;
}

.comzone-creation a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 24px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px;

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

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

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

/* Adaptation smartphone */

@media (max-width: 600px) {
    .comzone-zone-articles {
        padding: 25px 15px;
    }
}
/* =========================================
   COM ZONE - Barre d'outils de rédaction
   ========================================= */

.comzone-editeur-outils {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    padding: 12px;
    margin-top: 8px;
    margin-bottom: 0;

    background: #171717;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px 8px 0 0;
}

.comzone-editeur-outils button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 36px;
    padding: 0 10px;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 5px;

    color: #ffffff;
    font-family: inherit;
    font-size: 15px;

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

.comzone-editeur-outils button:hover,
.comzone-editeur-outils button:focus-visible {
    background: rgba(255, 255, 255, 0.20);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.20);
}

/* Bouton d'accès au code HTML */

.comzone-editeur-outils .comzone-mode-html {
    margin-left: auto;
    font-size: 12px;
    letter-spacing: 0.3px;
}

/* COM ZONE - Zone de rédaction visuelle */

.comzone-editeur-visuel {
    min-height: 280px;
    padding: 18px;

    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-top: none;
    border-radius: 0 0 8px 8px;

    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.7;

    text-align: left;
    overflow-wrap: anywhere;
}

.comzone-editeur-visuel:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.70);
}

/* COM ZONE - Apparence des liens dans l'éditeur */

.comzone-editeur-visuel a {
    color: #aaaaaa;
    text-decoration: none;
    border-bottom: none;
    cursor: default;
    transition: color 0.2s ease;
}

.comzone-editeur-visuel a:hover {
    color: #dddddd;
    text-decoration: none;
}

/* COM ZONE - Positionnement du bouton de déconnexion */

.comzone-deconnexion {
    display: flex;
    justify-content: center;
    margin: 20px 0 40px;
}

/* ==================================================
   COM ZONE - Confirmation de sortie (Chrome sombre)
   ================================================== */

#comzone-confirmation-sortie {
    width: min(450px, calc(100% - 32px));
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #444950;
    border-radius: 12px;
    background: #1b1c1e;
    color: #ffffff;
    font-family: Arial, sans-serif;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
}

#comzone-confirmation-sortie::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

#comzone-confirmation-sortie h2 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
}

#comzone-confirmation-sortie p {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

#comzone-confirmation-sortie .comzone-sortie-boutons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

#comzone-confirmation-sortie .comzone-sortie-boutons button {
    min-width: 80px;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 24px;
    background: #28518c;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

#comzone-confirmation-sortie #comzone-sortie-quitter {
    background: #b3ccfa;
    color: #092c57;
}

#comzone-confirmation-sortie #comzone-sortie-annuler {
    background: #28518c;
    color: #ffffff;
}

#comzone-confirmation-sortie .comzone-sortie-boutons button:hover {
    filter: brightness(1.1);
}

#comzone-confirmation-sortie .comzone-sortie-boutons button:focus-visible {
    outline: 2px solid #b3ccfa;
    outline-offset: 3px;
}

/* =========================================
   OUTFIT DU JOUR - Aperçu avant publication
   ========================================= */

#outfit-apercu-conteneur {
    text-align: center;
    margin-top: 15px;
}

#outfit-apercu-conteneur[hidden],
#outfit-erreur-apercu[hidden] {
    display: none;
}

#outfit-apercu-image {
    display: block;
    max-width: 100%;
    max-height: 350px;
    width: auto;
    height: auto;
    margin: 15px auto;
    object-fit: contain;
    border: 2px solid #ffffff;
    border-radius: 8px;
}

#outfit-erreur-apercu {
    color: #ff4545;
    text-align: center;
    font-weight: bold;
}

/* =========================================
   OUTFIT DU JOUR - Liste des photographies
   ========================================= */

.outfit-liste-photos {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
}

.outfit-photo-admin {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}