/* public/css/style.css
   ===================================================================
   Feuille de style du site public — Plateforme des concours
   Ministère de la Défense de Côte d'Ivoire

   SOMMAIRE
     1.  Base et typographie
     2.  Notifications flottantes (toasts)
     3.  Bannière de page
     4.  Flash d'informations (bandeau défilant, dans le flux)
     5.  Navbar en onglets
     6.  Slideshow
     7.  Blocs latéraux (agenda, notes, communiqués)
     8.  Tableau des concours
     9.  Actualités
     10. Alignement des colonnes de l'accueil
     11. Pages d'authentification
     12. Page Documentation
     13. Page Assistance
     14. Formulaires et composants transverses
     15. Espace candidat
     16. Améliorations esthétiques
     17. Adaptations mobiles consolidées
   =================================================================== */


/* ===================================================================
   1. BASE ET TYPOGRAPHIE
   =================================================================== */
@font-face {
    font-family: "Montserrat";
    src: url("../plugins/fonts/Montserrat-VariableFont_wght.ttf");
    font-weight: 100 900;
}

body {
    font-family: "Montserrat";
    font-size: 0.8rem;
    font-weight: 500;
}

html {
    scroll-behavior: smooth;
}

main.main {
    min-height: calc(100vh - 20rem);
}

.fs-7 {
    font-size: 0.9rem;
}

.text-justify {
    text-align: justify !important;
}


/* ===================================================================
   2. NOTIFICATIONS FLOTTANTES (toasts)
   Messages de succès ou d'erreur affichés en surimpression.
   Distinct du bandeau de flash d'informations (section 4).
   =================================================================== */
.flash {
    position: fixed;
    top: 3.5rem;
    right: 1rem;
    z-index: 9999;
}

.flash .btn-close {
    font-size: 0.6rem;
}


/* ===================================================================
   3. BANNIÈRE DE PAGE
   =================================================================== */
.banner {
    height: 12rem;
    display: flex;
    align-items: center;
}

.banner .bg {
    height: 12rem;
    position: absolute;
    width: 100%;
    background-image: url("../images/banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    z-index: -99;
    filter: brightness(90%);
    -webkit-filter: brightness(90%);
}


/* ===================================================================
   4. FLASH D'INFORMATIONS (bandeau défilant)

   Le bandeau vit dans le flux de la page, au-dessus du slideshow.
   Il était auparavant en position fixe en haut du document, ce qui
   le faisait recouvrir la barre de navigation au défilement.
   =================================================================== */
.flash-inline {
    margin-bottom: 1.5rem;
}

.flash-info {
    position: relative;
    width: 100%;
    background-color: #222;
    color: #fff;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.flash-info-content {
    display: flex;
    align-items: center;
}

.flash-info-label {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    background: #d9534f;
    padding: 13px 15px;
    white-space: nowrap;
    font-weight: bold;
}

.flash-info-wrapper {
    overflow: hidden;
    width: 100%;
    padding: 10px 0;
}

.flash-info-text {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: defilement-flash 45s linear infinite;
}

/* Le défilement s'arrête au survol pour laisser le temps de lire */
.flash-info-text:hover {
    animation-play-state: paused;
}

.flash-info-title {
    font-weight: bold;
    margin-right: 5px;
    color: var(--bs-warning);
}

.flash-info-text-content {
    font-size: 1rem;
}

.flash-info-separator {
    margin: 0 25px;
    font-size: 0.6em;
    vertical-align: middle;
    color: #07ff4d;
}

@keyframes defilement-flash {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* Respect des préférences système : pas d'animation imposée */
@media (prefers-reduced-motion: reduce) {
    .flash-info-text {
        animation: none;
        padding-left: 1rem;
        white-space: normal;
    }
}


/* ===================================================================
   5. NAVBAR EN ONGLETS (effet classeur)
   Les onglets reposent au-dessus de la bande verte : leur bord
   inférieur épouse le bord supérieur de la bande.
   =================================================================== */
.site-tabs-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0;
    overflow: visible;
    background: transparent !important;
}

/* Bande verte : uniquement la partie basse de la barre */
.site-tabs-nav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.1rem;
    background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
    z-index: -1;
    transition: height 0.25s ease;
}

.site-tabs-nav .container,
.site-tabs-nav .navbar-collapse {
    overflow: visible;
}

.site-tabs-nav .navbar-collapse {
    align-items: flex-end;
}

.site-tabs-nav .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.4);
    margin: 0.5rem 0;
}

.navbar .nav-link {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.8rem;
}

/* Les onglets sont décalés vers le haut de la hauteur de la bande */
.site-tabs {
    align-items: flex-end;
    gap: 4px;
    margin-bottom: 3.1rem;
    transition: margin-bottom 0.25s ease;
}

/* Onglets inactifs : vert clair */
.site-tabs > .nav-item > .nav-link {
    position: relative;
    display: block;
    padding: 0.8rem 1.6rem 0.75rem !important;
    color: #fff !important;
    background: linear-gradient(180deg, #66bb6a 0%, #43a047 100%);
    border-radius: 0.6rem 0.6rem 0 0;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.3px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
    transition: background 0.25s ease, padding 0.2s ease;
}

.site-tabs > .nav-item > .nav-link:hover {
    background: linear-gradient(180deg, #81c784 0%, #4caf50 100%);
    padding-top: 1.1rem !important;
}

/* Onglet actif : orange, plus haut que les autres */
.site-tabs > .nav-item > .nav-link.active {
    background: linear-gradient(180deg, #f7a83c 0%, #e8871e 100%);
    color: #fff !important;
    padding-top: 1.45rem !important;
    box-shadow: 0 -3px 12px rgba(232, 135, 30, 0.45);
    z-index: 3;
}

.site-tabs > .nav-item > .nav-link.active:hover {
    background: linear-gradient(180deg, #f9b654 0%, #ef8f24 100%);
    padding-top: 1.45rem !important;
}

/* Onglet clair (Assistance) : fond blanc, texte foncé */
.site-tabs > .nav-item > .nav-link-light {
    background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%);
    color: #333 !important;
}

.site-tabs > .nav-item > .nav-link-light:hover {
    background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 100%);
    color: #e8871e !important;
}

.site-tabs > .nav-item > .nav-link-light.active {
    background: linear-gradient(180deg, #f7a83c 0%, #e8871e 100%);
    color: #fff !important;
}

/* Zone de droite : horloge au-dessus de l'onglet utilisateur */
.site-user-zone {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 3.1rem;
    transition: margin-bottom 0.25s ease;
}

.site-clock {
    font-size: 0.72rem;
    font-weight: 600;
    color: #1b5e20;
    letter-spacing: 0.2px;
    margin-bottom: 0.3rem;
    white-space: nowrap;
}

.site-clock i {
    color: #e8871e;
    margin-right: 0.3rem;
}

.site-user-tab {
    align-items: flex-end;
    margin-bottom: 0;
}

.site-user-tab > .nav-item > .nav-link {
    padding: 0.8rem 1.6rem 0.75rem !important;
    color: #fff !important;
    background: linear-gradient(180deg, #66bb6a 0%, #43a047 100%);
    border-radius: 0.6rem 0.6rem 0 0;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.3px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
    transition: background 0.25s ease, padding 0.2s ease;
}

.site-user-tab > .nav-item > .nav-link:hover {
    background: linear-gradient(180deg, #81c784 0%, #4caf50 100%);
    padding-top: 1.1rem !important;
    color: #fff !important;
}

.site-user-tab .nav-link i {
    color: #fff;
    margin-right: 0.25rem;
}

/* --- Menu déroulant utilisateur ---
   Deux règles d'accessibilité :
     1. AUCUN margin entre le bouton et le panneau. Un margin crée
        une zone morte : la souris (ou un clic) qui tombe dedans est
        « hors menu » et le referme. Le panneau démarre exactement à
        top: 100% du déclencheur → collé au bouton.
     2. Le panneau est ancré sur le li déclencheur et adopte
        exactement sa largeur (left/right à 0, min-width neutralisé).
   Sous 576 px, Bootstrap repasse le menu en position static
   (empilé dans la navbar repliée) : les règles absolues ne
   s'appliquent donc qu'à partir de ce point de rupture. */
.site-user-tab .nav-item.dropdown {
    position: relative;
}

.site-user-tab .dropdown-menu {
    margin-top: 0;
    border: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

@media (min-width: 576px) {
    .site-user-tab .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        border-top: 3px solid #2e7d32;
        padding-top: 0.35rem;
        padding-bottom: 0.45rem;
    }

    /* Les libellés restent lisibles dans la largeur du bouton */
    .site-user-tab .dropdown-item {
        white-space: normal;
        line-height: 1.35;
    }
}

/* Au défilement : la bande occupe toute la hauteur, les onglets
   rentrent dedans pour ne pas être coupés hors de l'écran. */
.site-tabs-nav.sticky-top::before {
    height: 100%;
}

.site-tabs-nav.sticky-top .site-tabs,
.site-tabs-nav.sticky-top .site-user-zone {
    margin-bottom: 0;
}

.site-tabs-nav.sticky-top .site-user-zone {
    flex-direction: row;
    align-items: center;
    height: 3.1rem;
}

.site-tabs-nav.sticky-top .site-clock {
    display: none;
}

.site-tabs-nav.sticky-top .site-user-tab > .nav-item > .nav-link,
.site-tabs-nav.sticky-top .site-tabs > .nav-item > .nav-link,
.site-tabs-nav.sticky-top .site-tabs > .nav-item > .nav-link:hover,
.site-tabs-nav.sticky-top .site-tabs > .nav-item > .nav-link.active {
    padding-top: 0.8rem !important;
    padding-bottom: 0.75rem !important;
}


/* ===================================================================
   6. SLIDESHOW
   =================================================================== */
.slideshow {
    border: 2px solid #cfe3d2;
    border-top: 4px solid #2e7d32;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

.slideshow .slideshow-item {
    position: relative;
    height: 430px;
    overflow: hidden;
}

.slideshow .slideshow-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slideshow .slideshow-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 62%;
    padding: 2.5rem 5.5rem 1.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    text-align: left;
    overflow: hidden;
}

.slideshow .slideshow-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.45rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.slideshow .slideshow-text {
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 65ch;
    opacity: 0.92;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.slideshow .carousel-control-prev,
.slideshow .carousel-control-next {
    width: 46px;
    height: 46px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    opacity: 1;
    z-index: 5;
    transition: background-color 0.25s ease;
}

.slideshow .carousel-control-prev {
    left: 0.85rem;
}

.slideshow .carousel-control-next {
    right: 0.85rem;
}

.slideshow .carousel-control-prev:hover,
.slideshow .carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.85);
}

.slideshow .carousel-control-prev-icon,
.slideshow .carousel-control-next-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.slideshow .carousel-indicators {
    margin-bottom: 0.5rem;
    z-index: 6;
}

.slideshow .carousel-indicators [data-bs-target] {
    width: 26px;
    height: 4px;
    border-radius: 2px;
}


/* ===================================================================
   7. BLOCS LATÉRAUX (agenda, notes, communiqués)
   =================================================================== */
.side-block {
    border: 2px solid #f0d9b5;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.side-block-header {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #8a5a00;
    background: linear-gradient(135deg, #fff4e0 0%, #ffe9c7 100%);
    border-bottom: 2px solid #f5c877;
    padding: 0.8rem 1rem;
}

.side-block-header i {
    color: #e8871e !important;
}

.side-block:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* --- Agenda --- */
.agenda-item {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f1f1f1;
    transition: background-color 0.2s ease;
}

.agenda-item:last-child {
    border-bottom: 0;
}

.agenda-item:hover {
    background-color: #fffaf2;
}

.agenda-date {
    min-width: 64px;
    margin-right: 0.85rem;
    padding: 0.35rem 0.25rem;
    background: linear-gradient(135deg, #fff4e0 0%, #ffe4bd 100%);
    border: 1px solid #f5c877;
    border-radius: 0.4rem;
}

.agenda-day {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    color: #e8871e;
}

.agenda-month {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #8a5a00;
}

.agenda-title {
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
    color: #333;
}

/* --- Notes et communiqués (PDF) --- */
.pdf-item {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f1f1f1;
    transition: background-color 0.2s ease;
}

.pdf-item:last-child {
    border-bottom: 0;
}

.pdf-item:hover {
    background-color: #fffaf2;
}

.pdf-icon {
    min-width: 46px;
    margin-right: 0.6rem;
    color: #dc3545;
}

.pdf-title {
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
    color: #333;
}

.pdf-action {
    margin-top: 0.55rem;
    padding-left: 46px;
}


/* ===================================================================
   8. TABLEAU DES CONCOURS
   Utilisé à la fois sur l'accueil (colonne 8/12) et sur la page
   Concours (pleine largeur).
   =================================================================== */
.competitions-block {
    border: 2px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
}

.competitions-header {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #1b5e20;
    background: linear-gradient(135deg, #eaf6ec 0%, #d8eddc 100%);
    border-bottom: 2px solid #a5d6a7;
    padding: 0.9rem 1.15rem;
}

#competitionsTable td {
    padding: 1.25rem 0.85rem;
    vertical-align: top;
    border-bottom: 1px solid #eee;
}

.competition-logo-cell {
    width: 130px;
    text-align: center;
}

.competition-logo {
    max-width: 110px;
    width: 100%;
    height: auto;
}

.competition-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e8871e;
    margin-bottom: 0.2rem;
}

.competition-step {
    font-size: 0.95rem;
    font-weight: 600;
    color: #495057;
    padding-bottom: 0.5rem;
    margin-bottom: 0.65rem;
    border-bottom: 2px solid #f1f1f1;
}

.competition-meta {
    font-size: 0.875rem;
    margin-bottom: 0.65rem;
}

.competition-meta > div {
    margin-bottom: 0.2rem;
}

.meta-label {
    font-weight: 600;
    color: #6c757d;
    margin-right: 0.3rem;
}

.meta-value {
    color: #e8871e;
    font-weight: 600;
}

.competition-files {
    margin-bottom: 0.65rem;
}

.competition-description {
    font-size: 0.875rem;
    text-align: justify;
    color: #555;
    margin-bottom: 0.85rem;
}

.competition-actions .btn {
    margin-right: 0.35rem;
    margin-bottom: 0.35rem;
}

/* Recherche et pagination DataTables côté site */
#competitionsTable_filter input {
    border: 1px solid #ced4da;
    border-radius: 0.35rem;
    padding: 0.35rem 0.65rem;
    margin-left: 0.5rem;
}

#competitionsTable_info {
    font-size: 0.875rem;
    color: #6c757d;
}

.dataTables_paginate .paginate_button {
    padding: 0.3rem 0.7rem !important;
}

/* --- État vide --- */
.empty-competitions {
    max-width: 520px;
    margin: 0 auto;
}

.empty-icon i {
    font-size: 3.5rem;
    color: #cfd8dc;
}

.empty-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #495057;
}

.empty-text {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.6;
}


/* ===================================================================
   9. ACTUALITÉS
   =================================================================== */
.news-section {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
}

.news-section-title {
    margin-bottom: 2rem;
}

/* Intitulé encadré de deux barres horizontales.
   Réutilisé sur les pages Concours, Documentation et Assistance. */
.news-kicker {
    position: relative;
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e7d32;
    padding: 0 1.2rem;
}

.news-kicker::before,
.news-kicker::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 2px;
    background: #2e7d32;
}

.news-kicker::before {
    left: -40px;
}

.news-kicker::after {
    right: -40px;
}

.news-heading {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #333;
    margin-top: 0.5rem;
}

.news-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.4rem;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.news-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

.news-card-image {
    height: 170px;
    overflow: hidden;
    background: #f5f5f5;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-card:hover .news-card-image img {
    transform: scale(1.06);
}

.news-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #cfd8dc;
    font-size: 2.5rem;
}

.news-card-body {
    flex: 1 1 auto;
    padding: 1rem 1.1rem 0.5rem;
}

.news-card-date {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.news-card-date i {
    color: #e8871e;
    margin-right: 0.25rem;
}

.news-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    color: #1b1b1b;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-excerpt {
    font-size: 0.82rem;
    line-height: 1.5;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem 1rem;
    border-top: 1px solid #f1f1f1;
    margin-top: 0.5rem;
}

.news-card-location {
    font-size: 0.75rem;
    font-weight: 700;
    color: #c62828;
    line-height: 1.3;
}

.news-card-link {
    font-size: 0.75rem;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.news-card-link:hover {
    color: #e8871e;
}

/* --- Page de détail d'une actualité --- */
.news-detail-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.news-detail-title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1b1b1b;
    margin-bottom: 0.75rem;
}

.news-detail-meta {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f1f1f1;
}

.news-detail-meta i {
    color: #e8871e;
    margin-right: 0.25rem;
}

.news-detail-content {
    font-size: 0.92rem;
    line-height: 1.75;
    color: #444;
    text-align: justify;
}


/* ===================================================================
   10. ALIGNEMENT DES COLONNES DE L'ACCUEIL
   La colonne la plus courte étire son dernier bloc pour que les
   deux se terminent à la même hauteur.
   =================================================================== */
@media (min-width: 992px) {
    .home-col {
        display: flex;
        flex-direction: column;
    }

    .home-col-main > .competitions-block {
        flex: 1 1 auto;
    }

    .home-col-main > .competitions-block > .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .home-col-side > .side-block:last-child {
        flex: 1 1 auto;
    }

    .home-col-side > .side-block:last-child > .card-body {
        display: flex;
        flex-direction: column;
    }
}


/* ===================================================================
   11. PAGES D'AUTHENTIFICATION
   =================================================================== */
.auth-section-title {
    margin-bottom: 2.5rem;
}

.auth-kicker {
    position: relative;
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e7d32;
    padding: 0 1.2rem;
}

.auth-kicker::before,
.auth-kicker::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 2px;
    background: #2e7d32;
}

.auth-kicker::before {
    left: -40px;
}

.auth-kicker::after {
    right: -40px;
}

.auth-heading {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #333;
    margin-top: 0.6rem;
}

.auth-subtitle {
    font-size: 0.9rem;
    color: #6c757d;
    max-width: 46ch;
    margin: 0.75rem auto 0;
    line-height: 1.6;
}

/* Carte du formulaire avec logo en filigrane */
.auth-card {
    position: relative;
    border: 2px solid #cfe3d2;
    border-top: 4px solid #2e7d32;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.09);
}

.auth-card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78%;
    height: 78%;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

.auth-card .card-body {
    position: relative;
    z-index: 1;
}

.auth-card .form-control {
    border: 1.5px solid #cfd8dc;
}

.auth-card .form-control:focus {
    border-color: #2e7d32;
    box-shadow: none;
}

.auth-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2e7d32;
    text-decoration: none;
    transition: color 0.25s ease;
}

.auth-link:hover {
    color: #e8871e;
    text-decoration: underline;
}

/* Le widget reCAPTCHA déborde des colonnes étroites : on le réduit */
.g-recaptcha {
    transform-origin: center;
}


/* ===================================================================
   12. PAGE DOCUMENTATION
   =================================================================== */
.doc-subtitle {
    font-size: 0.9rem;
    color: #6c757d;
    max-width: 62ch;
    margin: 0.9rem auto 0;
    line-height: 1.65;
}

.doc-group {
    margin-bottom: 2.25rem;
    border: 1px solid #dfe6e1;
    border-radius: 0.55rem;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.doc-group-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.doc-group-header i {
    color: #f7b23f;
}

.doc-count {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    padding: 0.1rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.doc-table thead th {
    background: #f4f7f5;
    color: #37474f;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid #dfe6e1;
    padding: 0.7rem 1rem;
    white-space: nowrap;
}

.doc-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #eef2ef;
    vertical-align: middle;
}

.doc-table tbody tr:last-child td {
    border-bottom: 0;
}

.doc-table tbody tr:hover {
    background: #fafcfa;
}

.doc-title {
    font-weight: 600;
    color: #263238;
    font-size: 0.9rem;
    line-height: 1.4;
}

.doc-title i {
    color: #c62828;
    margin-right: 0.4rem;
}

.doc-desc {
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.55;
}

.doc-size {
    font-size: 0.8rem;
    color: #90a4ae;
    white-space: nowrap;
}

.doc-btn {
    background: linear-gradient(180deg, #f7a83c 0%, #e8871e 100%);
    color: #fff;
    border: 0;
    font-weight: 600;
    font-size: 0.78rem;
    padding: 0.4rem 0.9rem;
    border-radius: 0.35rem;
    white-space: nowrap;
    transition: background 0.25s ease, transform 0.2s ease;
}

.doc-btn:hover {
    background: linear-gradient(180deg, #f9b654 0%, #ef8f24 100%);
    color: #fff;
    transform: translateY(-1px);
}

/* --- État vide (réutilisé par la page Concours) --- */
.doc-empty {
    max-width: 540px;
    margin: 0 auto;
}

.doc-empty-icon i {
    font-size: 3.5rem;
    color: #cfd8dc;
}

.doc-empty-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #495057;
}

.doc-empty-text {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.6;
}


/* ===================================================================
   13. PAGE ASSISTANCE
   Cartes de contact, questions fréquentes, formulaire.
   =================================================================== */
.help-subtitle {
    font-size: 0.95rem;
    color: #6c757d;
    max-width: 70ch;
    margin: 1rem auto 0;
    line-height: 1.7;
}

/* --- Panneau des contacts --- */
.help-contacts {
    background: #f6f7f8;
    border: 1px solid #e8eaec;
    border-radius: 1.25rem;
    padding: 3.5rem 3rem;
    margin: 3rem 0 4rem;
}

.help-contact {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.help-contact-icon {
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #e4e7e9;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease;
}

.help-contact-icon i {
    font-size: 2.3rem;
    color: #e8871e;
}

.help-contact:hover .help-contact-icon {
    background: #dde1e4;
    transform: scale(1.04);
}

.help-contact-text {
    min-width: 0;
}

.help-contact-label {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e8871e;
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.help-contact-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    word-break: break-word;
}

.help-contact-value a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.help-contact-value a:hover {
    color: #e8871e;
}

/* --- Rappel sous les contacts --- */
.help-callout {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-top: 2.5rem;
}

.help-callout a {
    color: #e8871e;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.help-callout a:hover {
    color: #c96f10;
}

/* --- Titres de section --- */
.help-block-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.5px;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 3px solid #e8871e;
    display: inline-block;
}

/* --- Questions fréquentes --- */
.help-faq .accordion-item {
    border: 1px solid #e8eaec;
    border-radius: 0.6rem !important;
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.help-faq .accordion-button {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    background: #fff;
    padding: 1.15rem 1.35rem;
    box-shadow: none;
    line-height: 1.45;
}

.help-faq .accordion-button:not(.collapsed) {
    background: #fdf4e9;
    color: #b25f0d;
}

.help-faq .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.help-faq .accordion-button::after {
    width: 1.1rem;
    height: 1.1rem;
    background-size: 1.1rem;
    flex-shrink: 0;
    margin-left: 1rem;
}

.help-faq .accordion-body {
    font-size: 0.94rem;
    color: #55636b;
    line-height: 1.8;
    padding: 1.15rem 1.35rem 1.4rem;
    border-top: 1px solid #f0f2f3;
}

/* --- Formulaire de contact --- */
.help-form-card {
    border: 1px solid #e8eaec;
    border-radius: 1rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
    background: #fff;
}

.help-form-card .form-control,
.help-form-card .form-select {
    border: 1.5px solid #e0e4e7;
    border-radius: 0.5rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
    background: #fbfcfc;
}

.help-form-card .form-control:focus,
.help-form-card .form-select:focus {
    border-color: #e8871e;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(232, 135, 30, 0.1);
}

.help-form-card .form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #37474f;
    margin-bottom: 0.4rem;
}

.help-submit {
    background: linear-gradient(180deg, #f7a83c 0%, #e8871e 100%);
    color: #fff;
    border: 0;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    padding: 0.8rem 1.5rem;
    border-radius: 0.5rem;
    transition: background 0.25s ease, transform 0.2s ease;
}

.help-submit:hover {
    background: linear-gradient(180deg, #f9b654 0%, #ef8f24 100%);
    color: #fff;
    transform: translateY(-1px);
}


/* ===================================================================
   14. FORMULAIRES ET COMPOSANTS TRANSVERSES
   =================================================================== */
.dropdown-item {
    font-size: 0.8rem;
}

.selectize-control .selectize-input {
    box-shadow: none !important;
    height: 2.4rem;
    border: 1.5px solid #8f99a5;
}

.selectize-control .selectize-input.focus {
    box-shadow: none !important;
    border-color: var(--primary);
}

.selectize-control.is-invalid {
    border: 1px solid lighten(var(--bs-danger), 10%);
    height: 2.14rem !important;
    border-radius: 5px;
}

/* Fil d'Ariane — une seule définition (deux se contredisaient) */
.breadcrumb-item {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
}

label.required::after {
    content: "*";
    padding-left: 5px;
    color: var(--bs-danger);
}

.footer-link {
    color: var(--bg-light);
    transition: padding-left 0.3s ease, color 0.3s ease;
}

.footer-link:hover {
    padding-left: 8px;
}

.newsletter-form .form-control {
    border: 0;
    font-size: 0.875rem;
}

.newsletter-form .form-control:focus {
    box-shadow: none;
}

.credit-link {
    color: #f0a500;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease;
}

.credit-link:hover {
    color: #ffc107;
    text-decoration: underline;
}


/* ===================================================================
   15. ESPACE CANDIDAT
   =================================================================== */
.space-menu {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.space-menu li {
    margin-bottom: 0.5rem;
}

.space-menu .nav-link {
    font-weight: 700;
    color: var(--bs-info);
}

.space-menu .nav-link .fa {
    color: var(--bs-warning);
}

.space-menu .nav-link:hover {
    color: var(--bs-primary);
}

.space-menu .nav-link.active {
    color: var(--bs-success);
}


/* ===================================================================
   16. AMÉLIORATIONS ESTHÉTIQUES
   =================================================================== */
.btn-lg-square {
    width: 48px;
    height: 48px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.card {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

/* Les éléments de la navbar ne se décalent pas au survol */
.navbar .btn:hover {
    transform: none;
}

/* Titre de section avec barre colorée */
.section-title {
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.section-title::before {
    position: absolute;
    content: "";
    width: 120px;
    height: 4px;
    left: 0;
    bottom: 0;
    background: var(--bs-success, #198754);
    border-radius: 2px;
}

.section-title.text-center::before {
    left: 50%;
    margin-left: -60px;
}

.main img {
    transition: transform 0.4s ease;
}


/* ===================================================================
   17. ADAPTATIONS MOBILES CONSOLIDÉES

   Points de rupture Bootstrap 5 :
     991.98px  → tablette et en dessous
     767.98px  → mobile paysage et en dessous
     575.98px  → mobile portrait
   =================================================================== */

/* --- Tablette (≤ 991px) --- */
@media (max-width: 991.98px) {
    .help-contacts {
        padding: 2.5rem 1.75rem;
        margin: 2rem 0 3rem;
    }

    .help-contact-label {
        font-size: 1.25rem;
    }

    .help-contact-value {
        font-size: 1.1rem;
    }

    .news-heading {
        font-size: 1.35rem;
    }

    .slideshow .slideshow-item {
        height: 340px;
    }
}

/* --- Mobile paysage (≤ 767px) --- */
@media (max-width: 767.98px) {

    /* Navbar : empilement simple, la bande verte occupe tout */
    .site-tabs-nav::before {
        height: 100%;
    }

    .site-tabs-nav .navbar-collapse {
        align-items: stretch;
    }

    .site-user-zone {
        align-items: stretch;
        margin-bottom: 0;
    }

    .site-clock {
        color: #fff;
        text-align: center;
        margin: 0.4rem 0;
        font-size: 0.68rem;
        white-space: normal;
    }

    .site-tabs,
    .site-user-tab {
        align-items: stretch;
        gap: 0;
        height: auto;
        margin-bottom: 0;
        padding-bottom: 0.5rem;
    }

    .site-tabs > .nav-item > .nav-link,
    .site-tabs > .nav-item > .nav-link.active,
    .site-tabs > .nav-item > .nav-link:hover,
    .site-user-tab > .nav-item > .nav-link {
        padding: 0.65rem 1rem !important;
        border-radius: 0.35rem;
        margin-bottom: 0.3rem;
        box-shadow: none;
    }

    /* Bannière moins haute pour libérer de la place */
    .banner,
    .banner .bg {
        height: 9rem;
    }

    .banner .display-4 {
        font-size: 2rem;
    }

    /* Slideshow */
    .slideshow .slideshow-item {
        height: 260px;
    }

    .slideshow .slideshow-caption {
        padding: 1.75rem 1.25rem 1.5rem;
        max-height: 70%;
    }

    .slideshow .slideshow-title {
        font-size: 1rem;
        -webkit-line-clamp: 3;
    }

    .slideshow .carousel-control-prev,
    .slideshow .carousel-control-next {
        width: 36px;
        height: 36px;
    }

    /* Flash info : le libellé prend trop de place, on le réduit */
    .flash-info-label {
        padding: 10px 10px;
        font-size: 0.75rem;
    }

    .flash-info-label span {
        display: none;
    }

    .flash-info-text-content {
        font-size: 0.85rem;
    }

    /* Assistance : formulaire moins large */
    .help-form-card .card-body {
        padding: 1.5rem !important;
    }

    .help-block-title {
        font-size: 1.15rem;
    }

    /* Documentation : le tableau défile horizontalement */
    .doc-table {
        min-width: 600px;
    }

    /* Bouton retour en haut plus discret */
    .back-to-top {
        right: 15px;
        bottom: 15px;
    }

    .btn-lg-square {
        width: 40px;
        height: 40px;
    }
}

/* --- Mobile portrait (≤ 575px) --- */
@media (max-width: 575.98px) {

    /* Tableau des concours */
    .competition-logo-cell {
        width: 80px;
    }

    .competition-logo {
        max-width: 70px;
    }

    #competitionsTable td {
        padding: 0.85rem 0.5rem;
    }

    .competition-name {
        font-size: 0.95rem;
    }

    .competition-step {
        font-size: 0.85rem;
    }

    .competition-actions .btn {
        width: 100%;
        margin-right: 0;
    }

    /* Documentation */
    .doc-table thead th,
    .doc-table tbody td {
        padding: 0.6rem 0.7rem;
    }

    .doc-title {
        font-size: 0.85rem;
    }

    .doc-group-header {
        font-size: 0.78rem;
        padding: 0.7rem 0.9rem;
    }

    /* Assistance */
    .help-contacts {
        padding: 2rem 1.25rem;
        border-radius: 0.85rem;
    }

    .help-contact {
        gap: 1rem;
    }

    .help-contact-icon {
        width: 64px;
        height: 64px;
    }

    .help-contact-icon i {
        font-size: 1.6rem;
    }

    .help-contact-label {
        font-size: 1.05rem;
    }

    .help-contact-value {
        font-size: 0.95rem;
    }

    .help-callout {
        font-size: 0.9rem;
    }

    /* Titres de section */
    .news-heading,
    .auth-heading {
        font-size: 1.2rem;
    }

    .news-kicker,
    .auth-kicker {
        font-size: 0.75rem;
    }

    .news-kicker::before,
    .news-kicker::after,
    .auth-kicker::before,
    .auth-kicker::after {
        width: 22px;
    }

    .news-kicker::before,
    .auth-kicker::before {
        left: -22px;
    }

    .news-kicker::after,
    .auth-kicker::after {
        right: -22px;
    }

    /* Le widget reCAPTCHA (302px) déborde des écrans étroits */
    .g-recaptcha {
        transform: scale(0.85);
    }

    /* Agenda : la pastille de date prend moins de place */
    .agenda-date {
        min-width: 54px;
        margin-right: 0.6rem;
    }

    .agenda-day {
        font-size: 1.4rem;
    }

    /* Actualités */
    .news-card-image {
        height: 150px;
    }

    /* Détail d'actualité */
    .news-detail-title {
        font-size: 1.2rem;
    }

    .news-detail-image {
        max-height: 220px;
    }
}

/* --- Très petits écrans (≤ 380px) --- */
@media (max-width: 380px) {
    .g-recaptcha {
        transform: scale(0.75);
    }

    .help-contact {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* ===================================================================
   RÉVISION — flash info, tableau des concours, actualités
   Remplace les sections 4, 8 et la partie « actualités » de la
   section 9 dans public/css/style.css.
   =================================================================== */


/* ===================================================================
   4bis. FLASH D'INFORMATIONS — espacement et vitesse
   =================================================================== */
.flash-inline {
    /* Le conteneur .container py-5 ajoute 3rem au-dessus : on remonte
       le bandeau pour le rapprocher de la bannière. */
    margin-top: -1.75rem;
    margin-bottom: 1.25rem;
}

.flash-info {
    position: relative;
    width: 100%;
    background-color: #222;
    color: #fff;
    overflow: hidden;
    border-radius: 0.4rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.flash-info-content {
    display: flex;
    align-items: stretch;
}

.flash-info-label {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    background: #d9534f;
    padding: 0 1rem;
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.4px;
}

.flash-info-wrapper {
    overflow: hidden;
    width: 100%;
    padding: 0.65rem 0;
}

/* Vitesse : 45s etait trop rapide pour lire un message complet.
   90s laisse le temps de lire sans donner une impression d'arret. */
.flash-info-text {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: defilement-flash 90s linear infinite;
}

.flash-info-text:hover {
    animation-play-state: paused;
}

.flash-info-title {
    font-weight: 700;
    margin-right: 0.4rem;
    color: var(--bs-warning);
}

.flash-info-text-content {
    font-size: 0.9rem;
}

.flash-info-separator {
    margin: 0 1.75rem;
    font-size: 0.6em;
    vertical-align: middle;
    color: #07ff4d;
}


/* ===================================================================
   8bis. TABLEAU DES CONCOURS — présentation revue
   =================================================================== */
.competitions-block {
    border: 1px solid #dde6e0;
    border-top: 3px solid #2e7d32;
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.competitions-header {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%);
    border-bottom: 0;
    padding: 0.9rem 1.15rem;
}

.competitions-header i {
    color: #f7b23f;
}

.competitions-count {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    padding: 0.1rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
}

#competitionsTable {
    margin-bottom: 0;
}

#competitionsTable td {
    padding: 1.4rem 1rem;
    vertical-align: top;
    border-bottom: 1px solid #eef2ef;
    background: transparent;
}

#competitionsTable tbody tr:last-child td {
    border-bottom: 0;
}

#competitionsTable tbody tr {
    transition: background-color 0.2s ease;
}

#competitionsTable tbody tr:hover {
    background-color: #fafcfa;
}

/* --- Logo dans un cadre --- */
.competition-logo-cell {
    width: 132px;
    text-align: center;
}

.competition-logo-frame {
    width: 108px;
    height: 108px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f9f7;
    border: 1px solid #e3ebe6;
    border-radius: 0.5rem;
    padding: 0.6rem;
}

.competition-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.competition-logo-frame i {
    font-size: 2.4rem;
    color: #c8d6cc;
}

/* --- En-tête : session et étape --- */
.competition-head {
    padding-bottom: 0.75rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid #eef2ef;
}

.competition-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1b5e20;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

.competition-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #b25f0d;
    background: #fdf4e9;
    border: 1px solid #f5d7ac;
    border-radius: 1rem;
    padding: 0.25rem 0.85rem;
}

.competition-step i {
    font-size: 0.5rem;
    color: #e8871e;
}

/* --- Informations clés en pastilles --- */
.competition-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.fact {
    flex: 0 1 auto;
    min-width: 140px;
    background: #f7f9f8;
    border: 1px solid #e8eceA;
    border-radius: 0.45rem;
    padding: 0.55rem 0.9rem;
}

.fact-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #90a4ae;
    margin-bottom: 0.15rem;
}

.fact-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: #263238;
    white-space: nowrap;
}

.fact-value-alert {
    color: #c62828;
}

.fact-value-cost {
    color: #1b5e20;
}

/* --- Documents joints --- */
.competition-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.competition-file {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #c62828;
    background: #fdf1f1;
    border: 1px solid #f5cfcf;
    border-radius: 0.35rem;
    padding: 0.35rem 0.75rem;
    text-decoration: none;
    transition: background 0.2s ease;
}

.competition-file:hover {
    background: #fbe4e4;
    color: #a01c1c;
}

/* --- Description --- */
.competition-description {
    font-size: 0.86rem;
    line-height: 1.7;
    text-align: justify;
    color: #55636b;
    margin-bottom: 1.1rem;
    padding-left: 0.85rem;
    border-left: 3px solid #eef2ef;
}

.competition-description p:last-child {
    margin-bottom: 0;
}

/* --- Actions --- */
.competition-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.comp-action {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 1.15rem;
    border-radius: 0.4rem;
    border: 0;
    white-space: nowrap;
    transition: background 0.25s ease, transform 0.2s ease;
}

.comp-action-main {
    background: linear-gradient(180deg, #43a047 0%, #2e7d32 100%);
    color: #fff;
}

.comp-action-main:hover {
    background: linear-gradient(180deg, #4caf50 0%, #388e3c 100%);
    color: #fff;
}

.comp-action-result {
    background: linear-gradient(180deg, #f7a83c 0%, #e8871e 100%);
    color: #fff;
}

.comp-action-result:hover {
    background: linear-gradient(180deg, #f9b654 0%, #ef8f24 100%);
    color: #fff;
}

.comp-action-ghost {
    background: transparent;
    color: #2e7d32;
    border: 1.5px solid #cfe3d2;
}

.comp-action-ghost:hover {
    background: #f1f8f2;
    border-color: #2e7d32;
    color: #1b5e20;
}

/* --- Recherche et pagination DataTables --- */
#competitionsTable_filter {
    font-size: 0.82rem;
    color: #6c757d;
}

#competitionsTable_filter input {
    border: 1.5px solid #dde6e0;
    border-radius: 0.4rem;
    padding: 0.4rem 0.7rem;
    margin-left: 0.5rem;
    font-size: 0.85rem;
}

#competitionsTable_filter input:focus {
    outline: 0;
    border-color: #2e7d32;
}

#competitionsTable_info {
    font-size: 0.8rem;
    color: #90a4ae;
}

.dataTables_paginate .paginate_button {
    padding: 0.3rem 0.7rem !important;
    font-size: 0.82rem;
}


/* ===================================================================
   9bis. ACTUALITÉS — image et titre cliquables
   =================================================================== */
.news-card-media-link,
.news-card-title-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.news-card-title-link:hover .news-card-title {
    color: #e8871e;
}

.news-card-title {
    transition: color 0.25s ease;
}

/* La vignette signale sa nature cliquable */
.news-card-media-link {
    position: relative;
    overflow: hidden;
}

.news-card-media-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(232, 135, 30, 0);
    transition: background 0.25s ease;
    pointer-events: none;
}

.news-card-media-link:hover::after {
    background: rgba(232, 135, 30, 0.12);
}


/* ===================================================================
   ADAPTATIONS MOBILES DES SECTIONS RÉVISÉES
   =================================================================== */
@media (max-width: 767.98px) {
    .flash-inline {
        margin-top: -1.25rem;
    }

    .flash-info-label {
        padding: 0 0.7rem;
        font-size: 0.72rem;
    }

    .flash-info-text-content {
        font-size: 0.82rem;
    }

    .competition-logo-cell {
        width: 88px;
    }

    .competition-logo-frame {
        width: 72px;
        height: 72px;
        padding: 0.4rem;
    }

    #competitionsTable td {
        padding: 1rem 0.6rem;
    }

    .competition-name {
        font-size: 1rem;
    }

    .fact {
        min-width: 120px;
        flex: 1 1 45%;
    }
}

@media (max-width: 575.98px) {
    .competition-facts {
        gap: 0.5rem;
    }

    .fact {
        flex: 1 1 100%;
        min-width: 0;
    }

    .comp-action {
        width: 100%;
        text-align: center;
    }

    .competition-description {
        text-align: left;
    }
}