/* -----------------------------------------------------------
   CDF – Commando Divisionnaire Français
   Thème militaire + Overrides Syncfusion
   Polices: BlackOpsOne / armalite
------------------------------------------------------------*/
body {
    font-family: 'BlackOpsOne', system-ui, sans-serif;
    background: var(--cdf-bg);
    color: var(--cdf-text);
    min-height: 100vh;
    flex-direction: column;
    background-image: url("/css/background_img.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

/* ============ 0) FONTS ============ */
@font-face {
    font-family: 'armalite';
    src: url('open-iconic/font/fonts/armalite.ttf') format('truetype');
}

@font-face {
    font-family: 'BlackOpsOne';
    src: url('open-iconic/font/fonts/BlackOpsOne-Regular.ttf') format('truetype');
}

/* ============ 1) DESIGN TOKENS ============ */
:root {
    --cdf-bg: #152116;
    --cdf-surface: rgba(20,35,20,.88);
    --cdf-surface-2: rgba(50,70,45,.75);
    --cdf-text: #e6e6e6;
    --cdf-text-dim: #cfd6cf;
    --cdf-text-dark: #0e0e0e;
    --cdf-accent: #8fbf5a;
    --cdf-accent-2: #d4f995;
    --cdf-border: #31432a;
    --cdf-shadow: rgba(0,0,0,.6);
    --cdf-radius: 10px;
}


@media(max-width: 1200px) {
    .soldier-text-info,
    .soldier-main-info,
    .soldier-grid {
        text-align: center !important;
        justify-content: center !important;
    }
}


/* ============ 2) RESET MINIMAL ============ */
* {
    box-sizing: border-box;
}


html, body {
    height: 100%;
    margin: 0;
}



img {
    max-width: 100%;
    display: block;
}

/* ============ 3) TYPO / BODY ============ */


p {
    font-size: 14px;
    margin: 0 0 .75rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'BlackOpsOne';
    color: var(--cdf-text);
    margin: 0 0 .6rem;
}

h2, h3, h4, h5, h6 {
    color: #fff;
}

h2 {
    text-decoration: underline;
}

a {
    color: var(--cdf-accent);
    text-decoration: none;
}

    a:hover {
        filter: brightness(1.15);
    }

/* ============ 4) CARTES & SECTIONS ============ */
.section-surface {
    background: var(--cdf-surface);
    border-radius: var(--cdf-radius);
    box-shadow: 0 0 25px var(--cdf-shadow);
    padding: 20px;
}

/* ============ 6) CARTES ACCUEIL ============ */
.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
}

.card {
    background-image: url('camo.jpg');
    background-size: cover;
    border-radius: var(--cdf-radius);
    padding: .6rem;
    text-align: center;
    min-height: 220px;
    max-width: 230px;
    box-shadow: 0 4px 8px var(--cdf-shadow);
    transition: .25s;
    flex: 1 1 calc(33% - 40px);
}

    .card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 18px var(--cdf-shadow);
    }

    .card img {
        width: 50px;
        border-radius: 10px;
    }

    .card h3 {
        font-family: 'armalite';
        color: white;
        text-decoration: underline;
        margin: 12px 0 8px;
    }

    .card p {
        color: #cfcfcf;
    }

/* ============ 7) MISSION & VALEURS ============ */
.mission-valeurs-container {
    display: flex;
    gap: 20px;
    margin: 20px;
}

.mission, .valeurs {
    flex: 1;
    background: var(--cdf-surface-2);
    padding: 20px;
    border-radius: var(--cdf-radius);
    box-shadow: 0 4px 8px var(--cdf-shadow);
}

    .mission p, .valeurs p {
        font-size: .9rem;
    }

@media(max-width:768px) {
    .mission-valeurs-container {
        flex-direction: column;
    }
}

/* ============ 8) FOOTER ============ */
footer.site-footer {
    background: #000;
    color: white;
    text-align: center;
    padding: 16px;
    width: 100vw !important;
    margin: 0 auto;
    padding: 18px 0;
}
.site-footer {
    width: 100%;
    background: #000;
    color: #fff;
    text-align: center;
    padding: 16px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
}

.main-content {
    padding-bottom: 80px !important; /* éviter recouvrement */
}


/* ============================================================
   9) PAGE SOLDAT
============================================================ */
.soldier-info-page {
    width: min(1200px,95vw);

    background: var(--cdf-surface);
    border-radius: var(--cdf-radius);
    box-shadow: 0 0 25px var(--cdf-shadow);
    margin-left: auto !important;
    margin-right: auto !important;
}

    .soldier-info-page.animate-appear {
        animation: tacticalAppear .9s ease-out;
    }

@keyframes tacticalAppear {
    0% {
        opacity: 0;
        transform: scale(.97) translateY(18px)
    }

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

.soldier-info-page > header h1 {
    font-size: 46px;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 8px #000;
    margin: 0 0 22px;
}

/* Bandeau déco */
/*.soldier-info-page > header::after {
    content: "";
    display: block;
    height: 18px;
    width: 320px;
    margin: 10px auto;
    background: url('camo.jpg') center/cover no-repeat;
    border-radius: 8px;
    box-shadow: 0 2px 6px var(--cdf-shadow) inset;
}*/

/* Infos soldat */
.soldier-main-info {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 10px auto 40px;
    justify-content: center;
}

.soldier-rank-insignia {
    width: 100px;
    height: 100px;
    filter: drop-shadow(0 0 6px #000);
    transition: .25s;
}

    .soldier-rank-insignia:hover {
        transform: scale(1.12) rotate(2deg);
        filter: drop-shadow(0 0 10px #b9ff7f)
    }

.soldier-avatar {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    border: 2px solid #333;
    object-fit: cover;
}

.soldier-text-info {
    text-align: left;
}

.soldier-name, .soldier-rank {
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.soldier-date {
    color: #000;
    font-size: 14px;
}

/* Grille sections */
.soldier-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 35px;
}

/* ===== Grille 2 colonnes pour les blocs bas ===== */
.soldier-grid-duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
    margin-top: 40px; /* remplace le style inline */
    align-items: start;
}

/* Responsive : 1 colonne sous 992px */
@media (max-width: 992px) {
    .soldier-grid-duo {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}


.soldier-section {
    text-align: center;
    padding: 14px 10px;
    border-radius: 8px;
    transition: .25s;
}

    .soldier-section.hover-tactical:hover {
        background: rgba(100,150,70,.15);
        box-shadow: 0 0 12px #8fff60a8;
    }

    /* Titres sections */
    .soldier-section h3 {
        font-size: 24px;
        text-transform: uppercase;
        font-family: 'BlackOpsOne';
        color: var(--cdf-accent-2);
        letter-spacing: 1px;
        text-shadow: 0 0 6px #000;
        margin-bottom: 12px;
        position: relative;
    }

        .soldier-section h3::after {
            content: "";
            display: block;
            width: 60%;
            height: 3px;
            margin: 6px auto 0;
            background: linear-gradient(to right, transparent, var(--cdf-accent), transparent);
        }

    /* Listes */
    .soldier-section ul {
        list-style: none;
        margin: 0;
        padding: 0;
        font-family: 'BlackOpsOne';
    }

    .soldier-section li {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 8px 0;
        color: var(--cdf-text-dim);
    }
/* Icônes */
.medal-icon, .role-image {
    width: 30px;
    height: 30px;
    transition: .25s;
}

    .medal-icon:hover, .role-image:hover {
        transform: scale(1.2) rotate(3deg);
        filter: drop-shadow(0 0 8px #b9ff7f);
    }

/* PDF */
.btn-pdf {
    font-family: 'BlackOpsOne';
    background: #7fa64b;
    border: 2px solid #394622;
    color: #000;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 8px var(--cdf-shadow);
}

    .btn-pdf:hover {
        background: #c7ff7c;
    }

/* Responsive */
@media(max-width:992px) {
    .soldier-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:700px) {
    .soldier-grid {
        grid-template-columns: 1fr;
    }

    .soldier-main-info {
        flex-direction: column;
    }

    .soldier-text-info {
        text-align: center;
    }
}
/* ✅ Bandeau style Patch militaire */
.soldier-header {
    width: 100%;
    height: 95px;
    background: url('/css/camo.jpg') center/cover no-repeat;
    margin: 0 auto 30px;
    position: relative;
    /* Effet relief métal + textile */
    border-radius: 12px;
    border: 3px solid #2e2e2e;
    box-shadow: inset 0 0 18px rgba(0,0,0,.65), /* ombre interne textile */
    0 6px 15px rgba(0,0,0,.6); /* patch en relief */

    display: flex;
    justify-content: center;
    align-items: center;
    /* Légère texture textile */
    background-blend-mode: overlay;
    background-color: rgba(0,0,0,.2);
}

/* ✅ Titre en relief au centre */
.soldier-title {
    font-family: 'BlackOpsOne';
    font-size: 42px;
    color: #fff;
    text-shadow: 4px 4px 8px #000, -2px -2px 6px rgba(255,255,255,.12); /* léger emboss */
    letter-spacing: 1px;
}

/* ✅ Rivets en métal */
.soldier-header::before,
.soldier-header::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: linear-gradient(145deg,#292929,#656565);
    border-radius: 50%;
    border: 2px solid #000;
    box-shadow: inset 1px 1px 4px rgba(0,0,0,.7), 0 0 4px rgba(255,255,255,.3);
    transform: translateY(-50%);
}

.soldier-header::before {
    left: 10px;
}

.soldier-header::after {
    right: 10px;
}

/* ✅ Couture autour du patch */
.soldier-header::after,
.soldier-header::before {
}

.soldier-header::before,
.soldier-header::after {
}

.soldier-header {
    /* On ajoute une couture sous forme de contour ponctué */
    outline: 3px dashed rgba(255,255,255,.08);
    outline-offset: -10px;
}
    .soldier-header:hover {
        transform: translateY(-2px);
        box-shadow: inset 0 0 25px rgba(0,0,0,.6), 0 10px 18px rgba(0,0,0,.65);
        transition: .25s ease-out;
    }


.military-banner {
    width: 100%;
    max-width: 400px;
    height: 30px;
    margin: 8px auto 25px; /* espace avec h1 et contenu */
    background: url('/css/camo.jpg') center/cover no-repeat;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.45);
    border-top: 2px solid #141414;
    border-bottom: 2px solid #000;
}
.military-banner {
    position: relative;
}

    .military-banner::before,
    .military-banner::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 8px;
        height: 8px;
        background: #372e22;
        border-radius: 50%;
        box-shadow: inset 1px 1px 2px #000;
    }

    .military-banner::before {
        left: -16px;
    }

    .military-banner::after {
        right: -16px;
    }


/* ============================================================
   10) SYNCFUSION OVERRIDES
============================================================ */
.e-control, .e-control .e-btn, .e-input, .e-input-group {
    font-family: 'BlackOpsOne',sans-serif;
}

.e-grid {
    background: var(--cdf-surface);
    border: 1px solid var(--cdf-border);
    color: var(--cdf-text);
    box-shadow: 0 2px 8px var(--cdf-shadow);
}

    .e-grid .e-headercell {
        background: rgba(0,0,0,.25);
        border-color: var(--cdf-border);
    }

    .e-grid .e-headertext {
        color: var(--cdf-accent-2);
    }

    .e-grid .e-rowcell {
        border-color: var(--cdf-border);
    }

    .e-grid .e-selectionbackground {
        background: rgba(143,191,90,.25);
    }

/* Boutons Syncfusion */
.e-btn, .e-control .e-btn {
    background: #304226;
    border: 1px solid var(--cdf-border);
    color: white;
}

    .e-btn:hover {
        filter: brightness(1.15);
    }

/* Dropdowns & menus SF */
.e-dropdown-menu, .e-contextmenu {
    background: #0e140f;
    border: 1px solid var(--cdf-border);
}

.e-menu-item .e-anchor {
    color: #fff;
}

.e-menu-item.e-focused > .e-anchor, .e-menu-item:hover > .e-anchor {
    color: var(--cdf-accent-2);
}

/* ============================================================
   11) DIVERS
============================================================ */
/* ✅ Clean + Responsive + Stable */
.main-container {
    flex: 1;
    width: 100%;
    max-width: 1400px; /* > tu peux ajuster ici ! */
    margin: 0 auto;
    padding: calc(var(--cdf-navbar-height) + 20px) min(4vw, 40px) 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
}


/* === Fix Main Container – Full Responsive & Centered === */


/* Prevent scroll horizontal globally */
html, body {
    overflow-x: hidden !important;
}

/* Ajustement responsive */
@media (max-width: 992px) {
    .main-container {
        max-width: 100vw;
        padding-inline: 12px;
    }
}

@media (max-width: 600px) {
    .main-container {
        padding-inline: 8px;
        /*padding-top: var(--cdf-navbar-height);*/
    }
}



@media(max-width: 768px) {
    .main-container {
        padding: 70px 0 30px; /* bloque le contenu sous la navbar mobile */
    }
}

.cta-button {
    background: #4b5320;
    color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    font-family: 'BlackOpsOne';
}

    .cta-button:hover {
        background: #d32f2f;
        color: #000;
    }

.two-columns {
    column-count: 2;
    column-gap: 20px;
}

.small-image {
    height: 50px;
}


/* ====== CDF Server Badge (header) ====== */
.server-badge {
    --bg: rgba(20,35,20,.92);
    --ok: #8fbf5a;
    --ko: #e05252;
    --ring: #9fdc6a;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    margin: 0 12px;
    background: var(--bg);
    border: 1px solid var(--cdf-border);
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--cdf-shadow);
}

    .server-badge .badge-inner {
        display: flex;
        align-items: center;
        gap: 12px
    }

    .server-badge .patch-wrap {
        position: relative;
        width: 46px;
        height: 46px
    }

    .server-badge .patch {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        box-shadow: 0 0 8px #000
    }

    .server-badge .radar-pulse {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid transparent;
        animation: none;
    }

    .server-badge.online .radar-pulse {
        animation: radarPulse 2.5s ease-out infinite;
        border-color: var(--ring);
    }

@keyframes radarPulse {
    0% {
        transform: scale(.9);
        opacity: .7
    }

    70% {
        transform: scale(1.35);
        opacity: .15
    }

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

.server-badge .siren-dot {
    position: absolute;
    right: -4px;
    top: -4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ko);
    box-shadow: 0 0 8px #f33;
    animation: sirenBlink 1s infinite;
}

@keyframes sirenBlink {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .3;
        transform: scale(1.25)
    }
}

.server-badge .stats {
    display: flex;
    flex-direction: column;
    line-height: 1.05
}

.server-badge .line {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap
}

    .server-badge .line.small {
        font-size: 12px;
        opacity: .95
    }

    .server-badge .line .sep {
        opacity: .5;
        padding: 0 4px
    }

.server-badge .name {
    font-weight: 800
}

.server-badge.online .state {
    color: var(--ok)
}

.server-badge.offline .state {
    color: var(--ko)
}

.server-badge .btn-join {
    margin-left: 10px;
    font-family: 'BlackOpsOne';
    padding: 6px 10px;
    border-radius: 8px;
    background: #7fa64b;
    border: 1px solid #394622;
    color: #000;
}

    .server-badge .btn-join:hover {
        background: #c7ff7c
    }

    .server-badge .btn-join.disabled {
        background: #555;
        color: #ddd;
        border-color: #444;
        cursor: not-allowed
    }




/* Le contenu pousse le footer */
.bodyfeatures {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: min(4vw, 40px) 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* Footer en bas */
.site-footer {

    margin-top: auto;
    align-self: stretch;
}



:root {
    --cdf-navbar-height: 72px;
}



/* ============================================
   ✅ CDF GRID — Syncfusion Military Theme
============================================ */

/* Contenant principal */
.e-grid {
    background: rgba(20, 35, 20, .92) !important;
    border: 2px solid var(--cdf-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.7) !important;
    color: var(--cdf-text) !important;
    overflow: hidden !important;
}

    /* En-têtes */
    .e-grid .e-headercell {
        background: rgba(0,0,0,.35) !important;
        color: var(--cdf-accent-2) !important;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 15px;
        border-bottom: 2px solid var(--cdf-border) !important;
        border-right: 1px solid var(--cdf-border) !important;
        text-shadow: 0 0 4px #000;
    }

    /* Style lignes */
    .e-grid .e-rowcell {
        border-color: rgba(255,255,255,.1) !important;
        font-size: 15px;
        padding: 10px 12px !important;
    }

    /* Survol de ligne */
    .e-grid .e-row:hover .e-rowcell {
        background: rgba(100,150,70,.15) !important;
        box-shadow: inset 0 0 10px rgba(0,0,0,.7) !important;
        transition: .2s;
    }

/* Sélection */
.e-selectionbackground {
    background: rgba(143,191,90,.32) !important;
    box-shadow: inset 0 0 12px rgba(0,0,0,.75);
}

/* Zone édition / cellule active */
.e-editcell {
    background: rgba(60,85,45,.95) !important;
    border: 1px solid var(--cdf-accent) !important;
}

/* ToolBar / Header */
.e-toolbar {
    background: rgba(0,0,0,.45) !important;
    border: none !important;
    padding: 10px !important;
    backdrop-filter: blur(2px);
}

/* Icônes actions */
.e-tbar-btn .e-icons {
    color: var(--cdf-accent-2) !important;
    font-size: 16px;
}

.e-tbar-btn:hover {
    background: rgba(143,191,90,.22) !important;
    border-radius: 6px;
}

/* Pagination */
.e-gridpager {
    background: rgba(0, 0, 0, .38) !important;
    border-top: 2px solid var(--cdf-border) !important;
    color: var(--cdf-text) !important;
}

    /* Boutons pagination */
    .e-gridpager .e-numericitem,
    .e-gridpager .e-icons {
        color: var(--cdf-accent-2) !important;
        border-radius: 6px !important;
        padding: 6px 10px !important;
    }

    .e-gridpager .e-currentitem {
        background: var(--cdf-accent) !important;
        color: #000 !important;
        font-weight: bold;
    }

/* Bullets list dans une cellule */
.e-grid .e-rowcell ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .e-grid .e-rowcell ul li {
        display: flex;
        gap: 6px;
    }

/* ==== HEADER CAMO MILITAIRE ==== */
.e-grid .e-headercontent {
    background: url('/css/camo.jpg') center/cover no-repeat !important;
    border-bottom: 3px solid #0e0e0e !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.45);
}

.e-grid .e-headercell {
    background: transparent !important;
    color: var(--cdf-accent-2) !important;
    text-shadow: 0 0 6px #000, 1px 1px 4px #000;
    border-right: 1px solid rgba(255,255,255,.15) !important;
}

/* ==== HEADER CAMO MILITAIRE ==== */
.e-grid .e-headercontent {
    background: url('/css/camo.jpg') center/cover no-repeat !important;
    border-bottom: 3px solid #0e0e0e !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.45);
}

.e-grid .e-headercell {
    background: transparent !important;
    color: var(--cdf-accent-2) !important;
    text-shadow: 0 0 6px #000, 1px 1px 4px #000;
    border-right: 1px solid rgba(255,255,255,.15) !important;
}
/* ==== HEADER CAMO MILITAIRE ==== */
.e-grid .e-headercontent {
    background: url('/css/camo.jpg') center/cover no-repeat !important;
    border-bottom: 3px solid #0e0e0e !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.45);
}

.e-grid .e-headercell {
    background: transparent !important;
    color: var(--cdf-accent-2) !important;
    text-shadow: 0 0 6px #000, 1px 1px 4px #000;
    border-right: 1px solid rgba(255,255,255,.15) !important;
}


/* ========== LISTE SOLDATS ========== */
.cdf-soldier-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .cdf-soldier-list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
    }

/* ========== BADGES VALIDATION ========== */
.badge-cdf {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
}

.badge-ok {
    background: #7fa64b;
    color: #000;
    border: 1px solid #394622;
}

.badge-ko {
    background: #b52f2f;
    color: #fff;
    border: 1px solid #4a0a0a;
}

/* Soldat nom → un peu plus lisible */
.cdf-soldier-name {
    margin-right: 6px;
}

/* ========== TOOLBAR MILITAIRE ========== */
.e-toolbar .e-tbar-btn .e-icons {
    font-size: 18px;
    color: var(--cdf-accent-2) !important;
    filter: drop-shadow(0 0 3px #000);
}

/* Remplacement natif des icônes */
.e-add::before {
    content: "➕" !important;
}

.e-edit::before {
    content: "✏️" !important;
}

.e-delete::before {
    content: "🗑️" !important;
}

.e-update::before {
    content: "✅" !important;
}

.e-cancel::before {
    content: "❌" !important;
}

.e-toolbar .e-tbar-btn:hover {
    background: rgba(255,255,255,.15) !important;
    border-radius: 6px;
}

/* ===== BADGES MILITAIRES ANIMÉS ===== */
.badge-cdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    position: relative;
}

/* Validée = Radar pulse */
.badge-ok {
    background: #7fa64b;
    color: #000;
    border: 1px solid #394622;
    overflow: visible;
}

    .badge-ok::after {
        content: "";
        position: absolute;
        left: -8px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #9fff77;
        box-shadow: 0 0 10px #a1ff7b;
        animation: radarBlink 1.2s infinite ease-in-out;
    }

@keyframes radarBlink {
    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .25;
        transform: scale(1.6);
    }
}

/* Non validée = Pastille rouge fixe */
.badge-ko {
    background: #b52f2f;
    color: #fff;
    border: 1px solid #4a0a0a;
}

    .badge-ko::after {
        content: "⚠";
        margin-left: 4px;
        font-size: 10px;
        opacity: .9;
    }

/* Lignes zébrées militaires */
.e-row:not(.e-altrow) .e-rowcell {
    background: rgba(255,255,255,.03) !important;
}

.e-altrow .e-rowcell {
    background: rgba(0,0,0,.18) !important;
}

/* Séparateurs camo */
.e-grid .e-row:not(:last-child) .e-rowcell {
    border-bottom: 2px dashed rgba(143,191,90,.18) !important;
}

/* Focus */
.e-row:hover .e-rowcell {
    background: rgba(110,160,60,.15) !important;
    transition: .2s;
}

/* Supprime toutes les zones blanches résiduelles dans les grids */
.e-grid,
.e-grid .e-content,
.e-grid .e-table,
.e-grid .e-rowcell,
.e-grid .e-emptyrow,
.e-grid .e-frozencontent,
.e-grid .e-movablecontent,
.e-grid .e-gridheader {
    background-color: rgba(20,35,20,.92) !important;
}

    /* Filtre / zone d’édition grisée → remplacée */
    .e-grid .e-filterbarcell,
    .e-grid .e-filtertext,
    .e-grid .e-input,
    .e-grid .e-control {
        background-color: rgba(40,55,40,.88) !important;
        color: var(--cdf-text) !important;
    }

/* Bandeau pagination fond militaire */
.e-gridpager {
    background: rgba(20,35,20,.92) !important;
    border-top: 2px solid var(--cdf-border) !important;
}

/* Quand moins de lignes : fond identique */
.e-content .e-emptyrow td {
    background: rgba(20,35,20,.92) !important;
}

/* Force la grille à occuper une hauteur minimale */
.e-grid .e-content {
    min-height: 220px !important;
}

/* ✅ Force couleur texte visible partout */
.e-grid,
.e-grid * {
    color: var(--cdf-text) !important;
}

    /* ✅ Supprime **toutes** les zones héritant du blanc */
    .e-grid,
    .e-grid .e-content,
    .e-grid .e-table,
    .e-grid .e-rowcell,
    .e-grid .e-emptyrow,
    .e-grid .e-frozencontent,
    .e-grid .e-movablecontent,
    .e-grid .e-gridheader,
    .e-grid .e-groupdroparea,
    .e-grid .e-groupcaption,
    .e-grid .e-indentcell,
    .e-grid .e-detailrowcollapse {
        background-color: rgba(20,35,20,.92) !important;
    }

/* ✅ Barre de filtre lisible */
.e-filterbarcell,
.e-filtertext,
.e-input,
.e-input-group,
input.e-input,
input.e-control {
    background-color: rgba(40,55,40,.95) !important;
    color: #dfe8d8 !important;
    border: 1px solid var(--cdf-border) !important;
}

    /* 🟢 Placeholder lisible */
    .e-input::placeholder,
    .e-filtertext::placeholder {
        color: #a5b79a !important;
    }

/* ✅ Header texte fort contraste */
.e-grid .e-headercell {
    color: var(--cdf-accent-2) !important;
    font-weight: bold;
    text-shadow: 0 0 6px #000;
}

/* Icône recherche & nettoyage */
.e-filterbarcell .e-filtertext {
    padding-left: 24px !important;
}

.e-filterbarcell::before {
    content: "🔍";
    position: absolute;
    margin-left: 6px;
    margin-top: 6px;
    pointer-events: none;
    font-size: 14px;
}

.e-filterbarclear {
    display: inline-block;
    margin-left: 6px;
    cursor: pointer;
}

    .e-filterbarclear::after {
        content: "🧹";
        color: var(--cdf-accent-2);
    }

/* ✅ Plaque métal quinze/armée */
.e-toolbar {
    background: rgba(15,25,15,.95) !important;
    border-bottom: 3px solid #050505 !important;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,.6);
}

    /* ✅ Rivets aux extrémités */
    .e-toolbar::before,
    .e-toolbar::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 14px;
        height: 14px;
        background: linear-gradient(145deg, #222, #555);
        border-radius: 50%;
        border: 2px solid #0d0d0d;
        box-shadow: inset 1px 1px 3px #000;
        transform: translateY(-50%);
    }

    .e-toolbar::before {
        left: 10px;
    }

    .e-toolbar::after {
        right: 10px;
    }
/* ✅ Toolbar totalement camouflage sans blanc */
.e-toolbar {
    background: rgba(20,35,20,.95) !important;
    border: none !important;
    padding: 4px 12px !important;
}

.e-toolbar-items,
.e-toolbar-item,
.e-toolbar-left,
.e-toolbar-center,
.e-toolbar-right {
    background: transparent !important;
}

/* ✅ Boutons toolbar camo */
.e-toolbar .e-btn {
    background: rgba(30,45,30,.9) !important;
    border: 2px solid var(--cdf-border) !important;
    color: #e7f7c8 !important;
    border-radius: 8px !important;
    box-shadow: 0 0 8px rgba(0,0,0,.6);
}

    .e-toolbar .e-btn:hover {
        background: rgba(70,95,70,.9) !important;
        transform: translateY(-2px);
        transition: .2s;
    }

/* ✅ Pagination camo */
.e-pager {
    background: rgba(20,35,20,.95) !important;
    border-top: 2px solid var(--cdf-border);
    padding: 6px 12px !important;
}

    /* ✅ Retirer les blocs blancs autour des chiffres */
    .e-pager .e-numericitem,
    .e-pager .e-pagercontainer,
    .e-pager .e-nextprev,
    .e-pager .e-last,
    .e-pager .e-first {
        background: rgba(30,45,30,.95) !important;
        border: 1px solid var(--cdf-border);
        color: var(--cdf-accent-2) !important;
        box-shadow: none !important;
    }

        .e-pager .e-numericitem.e-active {
            background: var(--cdf-accent) !important;
            color: #000 !important;
            border-color: #000 !important;
            font-weight: bold !important;
        }

        /* ✅ Hover pagination */
        .e-pager .e-numericitem:hover,
        .e-pager .e-nextprev:hover,
        .e-pager .e-first:hover,
        .e-pager .e-last:hover {
            background: rgba(140,190,90,.4) !important;
            color: #fff !important;
        }
    /* ✅ Retire les blocs blancs sous les chevrons pagination */
    .e-pager .e-np,
    .e-pager .e-np .e-link,
    .e-pager .e-nextprev,
    .e-pager .e-prev,
    .e-pager .e-next {
        background: rgba(20,35,20,.95) !important;
        color: var(--cdf-accent-2) !important;
        border: 1px solid var(--cdf-border) !important;
        box-shadow: none !important;
    }

        /* ✅ Hover camouflage vert laser */
        .e-pager .e-nextprev:hover,
        .e-pager .e-np:hover {
            background: rgba(130,180,70,.35) !important;
            color: #fff !important;
        }

/* === POPUP ÉDITION STYLE BUNKER === */
.e-dialog {
    background: url('/css/camo.jpg') center/cover no-repeat !important;
    background-blend-mode: multiply;
    background-color: rgba(10,15,10,.95) !important;
    border-radius: 12px !important;
    border: 3px solid #262926 !important;
    box-shadow: 0 0 40px rgba(0,0,0,.8) !important;
    animation: bunkerDrop .35s ease-out;
}

    /* Contour métal + rivets */
    .e-dialog::before,
    .e-dialog::after {
        content: "";
        position: absolute;
        top: 12px;
        width: 18px;
        height: 18px;
        background: linear-gradient(145deg,#2e2e2e,#666);
        border-radius: 50%;
        border: 2px solid #000;
        box-shadow: inset 1px 1px 4px rgba(0,0,0,.8);
    }

    .e-dialog::before {
        left: 12px;
    }

    .e-dialog::after {
        right: 12px;
    }

/* Header façon bunker */
.e-dlg-header-content {
    font-family: 'BlackOpsOne';
    background: rgba(20,35,20,.95);
    padding: 10px 20px !important;
    border-bottom: 2px solid #000;
    color: var(--cdf-accent-2) !important;
    text-shadow: 0 0 6px #000;
}

/* Texte clair dans le bunker */
.e-dlg-content, .e-dlg-content * {
    color: var(--cdf-text) !important;
}

/* Animation d’apparition bunker */
@keyframes bunkerDrop {
    0% {
        transform: translateY(-20px) scale(.96);
        opacity: .2
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1
    }
}
/* === Barre progression militaire === */
.capacity-bar {
    position: relative;
    width: 100%;
    height: 14px;
    background: rgba(0,0,0,.4);
    border: 1px solid var(--cdf-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 6px rgba(0,0,0,.6);
}

.capacity-fill {
    height: 100%;
    background: linear-gradient(90deg,#6fbf3f,#c7ff7c);
    transition: width .4s;
}

.capacity-bar span {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 10px;
    top: -18px;
    color: var(--cdf-accent-2);
}
/* Bouton Add → Vert Opération 💥 */
.e-toolbar .e-add .e-btn {
    background: #7fa64b !important;
    border: 2px solid #28361d !important;
    color: #000 !important;
}

    .e-toolbar .e-add .e-btn:hover {
        background: #b7f779 !important;
    }

/* Bouton Edit → Jaune Alerte */
.e-toolbar .e-edit .e-btn {
    background: #b9bf5a !important;
    border: 2px solid #383a10 !important;
    color: #000 !important;
}

/* Bouton Delete → Rouge Danger */
.e-toolbar .e-delete .e-btn {
    background: #e05252 !important;
    border: 2px solid #3c0d0d !important;
    color: #000 !important;
}

    .e-toolbar .e-delete .e-btn:hover {
        background: #ff6868 !important;
    }

/* ✅ BUNKER DIALOG STYLE - FULL MILITARY */
.e-dialog {
    background: url('/css/camo.jpg') center/cover no-repeat !important;
    background-color: rgba(15,20,15, .96) !important;
    border-radius: 14px !important;
    border: 3px solid #1b1b1b !important;
    box-shadow: 0 0 32px rgba(0,0,0,.85) !important;
    overflow: hidden !important;
}

    /* ✅ Rivets métalliques */
    .e-dialog::before,
    .e-dialog::after {
        content: "";
        position: absolute;
        top: 10px;
        width: 18px;
        height: 18px;
        background: linear-gradient(145deg,#242424,#6f6f6f);
        border: 2px solid #050505;
        border-radius: 50%;
        box-shadow: inset 1px 1px 4px rgba(0,0,0,.8);
    }

    .e-dialog::before {
        left: 12px;
    }

    .e-dialog::after {
        right: 12px;
    }

/* ✅ En-tête militaire */
.e-dlg-header-content {
    background: rgba(20,35,20,.95) !important;
    padding: 12px 20px !important;
    font-size: 22px !important;
    font-family: 'BlackOpsOne';
    color: #e4f6bf !important;
    text-shadow: 0 0 6px #000;
    border-bottom: 2px solid #000;
}

/* ✅ Texte lisible */
.e-dlg-content,
.e-dlg-content * {
    color: var(--cdf-text) !important;
    font-size: 15px !important;
}

/* ✅ Labels visibles */
.e-float-text {
    color: #c9d9b8 !important;
}

/* ✅ Inputs militaires */
.e-input-group input,
.e-control input,
.e-control,
.e-input-group {
    background: rgba(30,45,30,.95) !important;
    border: 1px solid #2b3e25 !important;
    color: #e8f7da !important;
}

/* ✅ CheckBox militaire */
.e-checkbox-wrapper .e-frame {
    background: #1c2c18 !important;
    border: 1px solid var(--cdf-border) !important;
}

/* ✅ Boutons “Save/Cancel” militaires */
.e-dialog .e-btn.e-primary {
    background: #7fa64b !important;
    color: #000 !important;
    border: 2px solid #354723 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.7);
}

    .e-dialog .e-btn.e-primary:hover {
        background: #b7ff79 !important;
    }

.e-dialog .e-btn:not(.e-primary) {
    background: #e05252 !important;
    border: 2px solid #3c0d0d !important;
    color: #fff !important;
    border-radius: 8px !important;
}

    .e-dialog .e-btn:not(.e-primary):hover {
        background: #ff6565 !important;
    }

/* ✅ Effet apparition bunker */
@keyframes bunkerDrop {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(.96);
    }

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

.e-dialog {
    animation: bunkerDrop .35s ease-out;
}

    /* ✅ Neutralisation des derniers containers blancs dans le Dialog Syncfusion */
    .e-dlg-content,
    .e-edit-dialog,
    .e-edit-dialog .e-gridform,
    .e-dialog .e-dlg-content div,
    .e-dialog .e-content,
    .e-dialog .e-edit-dialog .e-dlg-content {
        background: rgba(20,35,20,.96) !important;
        border: none !important;
    }

/* ✅ Supprime les padding blancs internes */
.e-gridform,
.e-edit-dialog {
    padding: 0 !important;
}

/* ✅ Bordure autour du formulaire pour l'intégration bunker */
.e-gridform {
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
}

/* ✅ Labels & texts toujours lisibles */
.e-dlg-content label,
.e-dlg-content span {
    color: white !important;
    font-weight: 600;
}

/* ===== Formation Page Style ===== */
.formation-container {
    width: min(1400px, 98vw); /* ← au lieu de min(1100px,95vw) */
    margin: 60px auto;
    padding: 35px;
    background: rgba(10,15,10,.85);
    backdrop-filter: blur(4px);
    border-radius: 14px;
    box-shadow: 0 0 25px rgba(0,0,0,.65);
    color: #e6e6e6;
}

/*********** Header ***********/
.formation-header h1 {
    font-family: 'BlackOpsOne';
    font-size: 46px;
    text-align: center;
    color: #fff;
    text-shadow: 3px 3px 8px #000;
}

.formation-header .military-banner {
    width: 320px;
    height: 22px;
    margin: 12px auto 28px;
    background: url('/css/camo.jpg') center/cover no-repeat;
    border-radius: 8px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 4px 10px rgba(0,0,0,.6);
}

/*********** Sections ***********/
.formation-section {
    margin: 35px 0;
    padding: 18px 20px;
    background: rgba(35,45,30,.82);
    border-radius: 10px;
    border: 1px solid var(--cdf-border);
}

    .formation-section h3 {
        font-family: 'BlackOpsOne';
        color: var(--cdf-accent-2);
        font-size: 26px;
        margin-bottom: 12px;
    }

    .formation-section ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .formation-section ul li {
            font-size: 16px;
            margin: 6px 0;
            padding-left: 24px;
            position: relative;
        }

            .formation-section ul li::before {
                content: "•";
                position: absolute;
                left: 0;
                color: var(--cdf-accent);
                font-size: 20px;
            }


/* ===== PATCH MILITARY BANNER - FORMATION ===== */
.formation-container .soldier-header {
    width: 100%;
    max-width: 900px;
    height: 95px;
    margin: 0 auto 40px;
    position: relative;
    /* Fond camo */
    background: url('/css/camo.jpg') center/cover no-repeat;
    background-blend-mode: overlay;
    background-color: rgba(0,0,0,.25);
    /* Bordure steel */
    border-radius: 14px;
    border: 3px solid #262926;
    box-shadow: inset 0 0 18px rgba(0,0,0,.65), 0 6px 15px rgba(0,0,0,.6);
}

    /* Couture / surpiqûre */
    .formation-container .soldier-header::before {
        content: '';
        position: absolute;
        inset: 3px;
        border: 2px dashed rgba(255,255,255,.15);
        border-radius: 10px;
    }

    /* Rivets */
    .formation-container .soldier-header .soldier-title {
        position: relative;
        z-index: 5;
    }

    .formation-container .soldier-header::after,
    .formation-container .soldier-header h1::after,
    .formation-container .soldier-header h1::before {
        position: absolute;
        content: '';
        width: 18px;
        height: 18px;
        background: linear-gradient(145deg,#2e2e2e,#666);
        border-radius: 50%;
        border: 2px solid #000;
        box-shadow: inset 1px 1px 4px rgba(0,0,0,.75);
        top: 50%;
        transform: translateY(-50%);
    }

    .formation-container .soldier-header::after {
        right: 10px;
    }

    .formation-container .soldier-header::before {
        left: 10px;
    }

/* Titre */
.formation-container .soldier-title {
    font-family: 'BlackOpsOne';
    font-size: 48px;
    text-align: center;
    color: #fff;
    text-shadow: 4px 4px 8px #000, -2px -2px 6px rgba(255,255,255,.12);
    line-height: 95px;
}
/* ============================================================
   ✅ RESPONSIVE FULL – UX Tactique Mobile/Portrait
============================================================ */

/* Limite les débordements horizontaux */
html, body {
    overflow-x: hidden;
}



/* Patch militaire header soldat — adaptation mobile */
@media(max-width: 992px) {
    .soldier-header {
        height: 70px;
    }

    .soldier-title {
        font-size: 30px !important;
        line-height: 70px !important;
    }
}

/* Alignement de TOUT le contenu en portrait */
@media(max-width: 992px), (orientation: portrait) {
    .soldier-info-page {
        width: 95vw !important;
        padding: 20px 16px !important;
    }

    /* Images responsives */
    .soldier-avatar,
    .soldier-rank-insignia {
        width: 85px !important;
        height: 85px !important;
    }

    /* Sections verticales */
    .soldier-main-info {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    .soldier-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        width: 100% !important;
    }

    .soldier-section {
        padding: 12px 10px !important;
        font-size: 14px;
    }

        .soldier-section h3 {
            font-size: 20px !important;
        }
}

/* Tablet portrait – Titre formation réajusté */
@media(max-width: 700px) {

    .formation-container {
        width: 95vw !important;
        padding: 20px !important;
    }

    .formation-header h1 {
        font-size: 32px !important;
    }

    .formation-section {
        padding: 14px !important;
    }
}

/* Ultra Mobile */
@media(max-width: 450px) {

    .soldier-title,
    .formation-header h1 {
        font-size: 26px !important;
    }

    .soldier-avatar,
    .soldier-rank-insignia {
        width: 70px !important;
        height: 70px !important;
    }

    p, li {
        font-size: 12px !important;
    }

    .capacity-bar span {
        font-size: 9px !important;
    }
}



/* ✅ Fix background sur mobiles et écrans étroits */
@media (max-width: 1600px) {
    body {
        background-attachment: scroll !important;
        background-size: cover !important;
    }
}

/* ✅ Force aucune dérive horizontale */
html, body {
    overflow-x: hidden !important;
}

/* ===== Mise en page Event Carrière ===== */
.event-wrapper {
    width: min(1200px,95vw);
    margin: 0 auto;
}

.event-form-grid {
    display: grid;
    grid-template-columns: 360px 1fr; /* colonne gauche infos / droite rédaction */
    gap: 24px;
}

.event-card {
    background: var(--cdf-surface-2);
    border-radius: var(--cdf-radius);
    box-shadow: 0 2px 10px var(--cdf-shadow);
    padding: 16px;
}

    .event-card h4 {
        font-family: 'BlackOpsOne';
        color: var(--cdf-accent-2);
        margin-bottom: 12px;
        text-transform: uppercase;
    }

/* Espaces réguliers sur inputs */
.event-fields .form-group {
    margin-bottom: 12px;
}

    .event-fields .form-group label {
        margin-bottom: 6px;
        display: block;
    }

/* Responsive */
@media (max-width: 992px) {
    .event-form-grid {
        grid-template-columns: 1fr;
    }
}
/* ==== Page "Créer une session d'entraînement" ==== */

/* Grille 2 colonnes (réutilise l’esthétique Event Carrière) */
.event-form-grid {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 24px;
}

@media (max-width: 992px) {
    .event-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Groupes/formulaires */
.event-card .form-group {
    margin-bottom: 14px;
}

.event-card .form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
}

/* Deux colonnes internes pour Date/Durée */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 700px) {
    .form-row-2 {
        grid-template-columns: 1fr;
    }
}

/* Forcer la pleine largeur des composants SF dans ce contexte */
.event-card .wide,
.event-card .e-control,
.event-card .e-input,
.event-card .e-input-group,
.event-card .e-multiselect,
.event-card .e-dropdownlist,
.event-card .e-datetime-wrapper,
.event-card .e-numeric {
    width: 100% !important;
}

/* Zone d’actions */
.training-actions {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

/* Grille 2 colonnes de largeur égale */
.session-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 50/50 */
    gap: 24px;
    align-items: stretch; /* étire en hauteur si tu veux */
}

/* Cartes à hauteur égale si le contenu le permet */
.session-card {
    height: 100%;
}

    /* Les contrôles Syncfusion occupent toute la largeur du bloc */
    .session-card .e-control,
    .session-card .e-input,
    .session-card input,
    .session-card .e-multiselect,
    .session-card .e-numeric,
    .session-card .e-datetime-wrapper,
    .session-card .e-dropdownlist {
        width: 100%;
    }

@media (max-width: 992px) {
    .session-grid {
        grid-template-columns: 1fr;
    }
    /* empile en mobile */
}
/* ====== Dialog suivi formation : UX liste soldats ====== */
.cdf-soldier-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cdf-bulk {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cdf-count {
    opacity: .85;
    font-size: .9rem;
}

.cdf-soldier-scroll {
    max-height: 260px;
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--cdf-border);
    border-radius: 8px;
    background: rgba(0,0,0,.20);
}

.cdf-soldier-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

@media (max-width: 600px) {
    .cdf-soldier-grid {
        grid-template-columns: 1fr;
    }
}

.cdf-soldier-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,.04);
}

    .cdf-soldier-item:hover {
        background: rgba(143,191,90,.15);
    }

/* ===== CDF TIPEEE PAGE ===== */

.cdf-hero {
    height: 15vh;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    box-shadow: 0 0 25px rgba(0,0,0,.7);
    margin-bottom: 40px;
    position: relative;
}

.cdf-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.cdf-hero h1 {
    font-size: 46px;
    text-shadow: 3px 3px 8px #000;
}

.motto {
    font-size: 18px;
    margin-top: 10px;
}

/* Galerie */
.cdf-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 14px;
    margin-bottom: 40px;
}

    .cdf-gallery img {
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,.6);
    }

/* Sections */
.cdf-section {
    margin-bottom: 30px;
}

    .cdf-section ul {
        list-style: none;
        padding: 0;
    }

    .cdf-section li::before {
        content: "•";
        color: var(--cdf-accent);
        margin-right: 8px;
    }

/* CTA final */
.cdf-final {
    text-align: center;
    padding: 40px 20px;
}

.btn-support {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 28px;
    font-family: 'BlackOpsOne';
    background: #7fa64b;
    color: #000;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.6);
}

    .btn-support:hover {
        background: #c7ff7c;
    }

/* ===== SPLIT IMAGE / TEXTE ===== */
.cdf-split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 30px;
    align-items: center;
    margin: 40px 0;
}

    .cdf-split.reverse {
        grid-template-columns: .9fr 1.1fr;
    }

        .cdf-split.reverse .cdf-text {
            order: 2;
        }

        .cdf-split.reverse .cdf-image {
            order: 1;
        }

/* Texte */
.cdf-text {
    text-align: left;
}

/* Image */
.cdf-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 18px rgba(0,0,0,.7);
    border: 2px solid var(--cdf-border);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .cdf-split,
    .cdf-split.reverse {
        grid-template-columns: 1fr;
    }

    .cdf-text,
    .cdf-image {
        order: unset !important;
        text-align: center;
    }

        .cdf-image img {
            height: 220px;
        }
}

/* ===== CINEMATIC MODE ===== */
.cinematic {
    animation: filmGrain 6s infinite;
}

@keyframes filmGrain {
    0% {
        filter: contrast(1) brightness(1);
    }

    50% {
        filter: contrast(1.05) brightness(.98);
    }

    100% {
        filter: contrast(1) brightness(1);
    }
}

/* ===== HERO ===== */
.briefing-hero {
    height: 85vh;
    background: url('/images/cdf/hero.jpg') center/cover no-repeat;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
}

.briefing-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(0,0,0,.6), rgba(0,0,0,.95));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.briefing-tag {
    margin-top: 20px;
    font-family: monospace;
    opacity: .8;
}

/* ===== SPLIT ===== */
.split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center;
    margin: 80px 0;
}

    .split.reverse {
        grid-template-columns: .9fr 1.1fr;
    }

        .split.reverse .text {
            order: 2;
        }


/* ===== PATCH IMAGE ===== */
.patch img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
    border: 3px dashed rgba(255,255,255,.4);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.6), 0 0 25px rgba(0,0,0,.8);
}

/* ===== CTA ===== */
.final-cta {
    text-align: center;
    padding: 80px 20px;
}

.btn-engage {
    display: inline-block;
    margin-top: 25px;
    padding: 16px 36px;
    font-family: 'BlackOpsOne';
    background: #7fa64b;
    color: #000;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,.7);
}

/* ===== TACTICAL REVEAL ===== */
.reveal,
.reveal-block {
    opacity: 0;
    transform: translateY(30px);
    transition: all .9s ease;
}

    .reveal.visible,
    .reveal-block.visible {
        opacity: 1;
        transform: translateY(0);
    }

.delay-1 {
    transition-delay: .2s;
}

.delay-2 {
    transition-delay: .4s;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .split {
        grid-template-columns: 1fr;
    }

    .patch img {
        height: 220px;
    }
}
/* ===============================
   CDF – Apparition tactique scroll
================================= */
.reveal {
    opacity: 0;
    transform: translateY(24px) scale(.96);
    filter: blur(2px);
    transition: opacity .7s ease-out, transform .7s cubic-bezier(.22,1,.36,1), filter .6s ease-out;
}

    .reveal.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

/* Variante lourde briefing */
.reveal-heavy {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s ease-out, transform .9s ease-out;
}

    .reveal-heavy.visible {
        opacity: 1;
        transform: translateY(0);
    }
/* ===============================
   CDF – Image patch cousue
================================= */
.patch-image {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,.7);
}

    .patch-image img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Couture */
    .patch-image::before {
        content: "";
        position: absolute;
        inset: 6px;
        border: 2px dashed rgba(255,255,255,.18);
        border-radius: 10px;
        pointer-events: none;
    }

    /* Rivets */
    .patch-image::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 14px;
        box-shadow: inset 0 0 18px rgba(0,0,0,.65), 0 0 0 3px #1b1b1b;
    }

/* ===============================
   CDF – Hero Cinématique
================================= */
.cdf-hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, rgba(0,0,0,.65), rgba(0,0,0,.85) );
}

.hero-content {
    position: relative;
    text-align: center;
    max-width: 800px;
    padding: 20px;
}

    .hero-content h1 {
        font-size: 52px;
        text-shadow: 4px 4px 12px #000;
    }

.hero-sub {
    margin: 18px 0 28px;
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--cdf-text-dim);
}

.cta-engage {
    display: inline-block;
    padding: 14px 36px;
    font-family: 'BlackOpsOne';
    font-size: 18px;
    background: #7fa64b;
    color: #000;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.6);
}

    .cta-engage:hover {
        background: #c7ff7c;
        transform: translateY(-3px);
    }

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: rgba(255,255,255,.6);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

    .scroll-indicator .mouse {
        width: 20px;
        height: 34px;
        border: 1px solid rgba(255,255,255,.6);
        border-radius: 12px;
        margin: 6px auto 0;
        position: relative;
    }

        .scroll-indicator .mouse::before {
            content: "";
            width: 3px;
            height: 6px;
            background: rgba(255,255,255,.8);
            position: absolute;
            top: 6px;
            left: 50%;
            transform: translateX(-50%);
            animation: scrollDown 1.8s infinite;
        }

@keyframes scrollDown {
    0% {
        opacity: 0;
        top: 6px;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        top: 16px;
    }
}
.briefing {
    margin-top: -40px;
    padding-top: 80px;
}
.cdf-hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient( to bottom, rgba(0,0,0,0), rgba(0,0,0,.9) );
}

/* ===============================
   HOME (Non connecté) — clean
================================= */
.home {
    width: 100%;
}

/* HERO */
.home-hero {
    position: relative;
    height: calc(90vh - var(--cdf-navbar-height));
    min-height: 640px;
    width: min(1300px, 96vw);
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(0,0,0,.7);
}

/* BG image */
.home-hero-bg {
    position: absolute;
    inset: 0;
    background: url('/images/cdf/hero.jpg') center/cover no-repeat;
    transform: scale(1.03);
}

/* vignette */
.home-hero-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.35), rgba(0,0,0,.92)), linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.85));
}

/* content */
.home-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px;
}

.home-kicker {
    font-family: monospace;
    letter-spacing: 2px;
    opacity: .75;
    font-size: 12px;
    margin-bottom: 16px;
}

.home-title {
    font-size: clamp(34px, 4vw, 58px);
    text-shadow: 4px 4px 12px #000;
    margin-bottom: 10px;
}

.home-subtitle {
    max-width: 760px;
    margin: 0 auto 22px;
    color: var(--cdf-text-dim);
    letter-spacing: .6px;
    font-size: 15px;
}

/* CTA */
.home-cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.home-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 12px;
    font-family: 'BlackOpsOne';
    background: #7fa64b;
    color: #000;
    box-shadow: 0 8px 25px rgba(0,0,0,.55);
    border: 1px solid #394622;
    transition: transform .2s ease, filter .2s ease, background .2s ease;
}

    .home-cta:hover {
        transform: translateY(-3px);
        background: #c7ff7c;
    }

    .home-cta.ghost {
        background: rgba(20,35,20,.65);
        color: #e9f2e7;
        border: 1px solid rgba(255,255,255,.14);
    }

        .home-cta.ghost:hover {
            filter: brightness(1.1);
            transform: translateY(-3px);
        }

/* scroll indicator */
.home-scroll {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 3;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 10px 12px;
    color: rgba(255,255,255,.72);
}

.home-scroll-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: monospace;
}

.home-scroll-mouse {
    width: 22px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 14px;
    position: relative;
}

    .home-scroll-mouse::before {
        content: "";
        width: 3px;
        height: 6px;
        background: rgba(255,255,255,.85);
        position: absolute;
    }


/* ============================================================
   HOME – CINEMATIC PACK (à coller en fin de fichier)
============================================================ */

.home {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding-bottom: 30px;
}

/* HERO : glow + grain + scanline + kenburns */
.home-hero {
    position: relative;
    height: calc(90vh - var(--cdf-navbar-height));
    min-height: 640px;
    width: min(1300px, 96vw);
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(0,0,0,.7);
    border: 1px solid rgba(255,255,255,.08);
}

.home-hero-bg {
    position: absolute;
    inset: 0;
    background: url('/images/cdf/hero.jpg') center/cover no-repeat;
    transform: scale(1.05);
    animation: homeKenBurns 18s ease-in-out infinite alternate;
}

@keyframes homeKenBurns {
    from {
        transform: scale(1.05) translateY(0px);
    }

    to {
        transform: scale(1.12) translateY(-10px);
    }
}

.home-hero-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.35), rgba(0,0,0,.92)), linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.90));
}

/* grain/noise */
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient( 0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 7px );
    opacity: .10;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* glow bottom */
.home-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.92));
    pointer-events: none;
}

/* content */
.home-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 26px;
}

.home-kicker {
    font-family: monospace;
    letter-spacing: 2px;
    opacity: .8;
    font-size: 12px;
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.home-kicker-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cdf-accent-2);
    box-shadow: 0 0 12px rgba(212,249,149,.55);
    animation: homeDotBlink 1.2s infinite ease-in-out;
}

@keyframes homeDotBlink {
    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .35;
        transform: scale(1.6);
    }
}

.home-title {
    font-size: clamp(34px, 4vw, 58px);
    text-shadow: 4px 4px 12px #000;
    margin-bottom: 8px;
}

.home-title-accent {
    width: min(520px, 80%);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, var(--cdf-accent), transparent);
    opacity: .9;
    margin: 6px 0 14px;
    filter: drop-shadow(0 0 8px rgba(143,191,90,.25));
}

.home-subtitle {
    max-width: 820px;
    margin: 0 auto 18px;
    color: var(--cdf-text-dim);
    letter-spacing: .6px;
    font-size: 15px;
}

/* pills / stats */
.home-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 18px;
}

.home-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(20,35,20,.62);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 22px rgba(0,0,0,.35);
    backdrop-filter: blur(4px);
}

    .home-pill .k {
        font-family: monospace;
        letter-spacing: 1.5px;
        font-size: 11px;
        opacity: .75;
    }

    .home-pill .v {
        font-family: 'BlackOpsOne';
        font-size: 14px;
        color: var(--cdf-accent-2);
        text-shadow: 0 0 8px rgba(0,0,0,.6);
    }

.home-hint {
    margin-top: 14px;
    font-size: 12px;
    opacity: .75;
    letter-spacing: 1px;
}

/* CTA variants */
.home-cta.big {
    padding: 16px 34px;
    font-size: 18px;
}

/* scroll button */
.home-scroll {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 3;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 10px 12px;
    color: rgba(255,255,255,.78);
}

.home-scroll-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: monospace;
}

.home-scroll-mouse {
    width: 22px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 14px;
    position: relative;
    box-shadow: inset 0 0 12px rgba(0,0,0,.45);
}

    .home-scroll-mouse::before {
        content: "";
        width: 3px;
        height: 7px;
        background: rgba(255,255,255,.85);
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 999px;
        animation: homeWheel 1.6s infinite;
    }

@keyframes homeWheel {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0px);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
}

.home-scroll-arrow {
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255,255,255,.65);
    border-bottom: 2px solid rgba(255,255,255,.65);
    transform: rotate(45deg);
    animation: homeArrow 1.6s infinite;
    margin-top: -2px;
}

@keyframes homeArrow {
    0%,100% {
        opacity: .35;
        transform: rotate(45deg) translateY(0);
    }

    50% {
        opacity: 1;
        transform: rotate(45deg) translateY(3px);
    }
}

/* Briefing / sections widths */
.home-briefing,
.home-split,
.home-final {
    width: min(1300px, 96vw);
    margin: 0 auto;
}

/* Split layout */
.home-split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 26px;
    align-items: center;
}

    .home-split.reverse {
        grid-template-columns: .95fr 1.05fr;
    }

        .home-split.reverse .home-split-text {
            order: 2;
        }

        .home-split.reverse . {
            order: 1;
        }

.home-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .home-list li {
        position: relative;
        padding-left: 18px;
        margin: 8px 0;
        color: var(--cdf-text-dim);
    }

        .home-list li::before {
            content: "▸";
            position: absolute;
            left: 0;
            color: var(--cdf-accent);
            text-shadow: 0 0 10px rgba(143,191,90,.25);
        }

/* Grid images */
.home-grid {
    width: min(1300px, 96vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}

/* Responsive */
@media (max-width: 992px) {
    .home-hero {
        min-height: 560px;
    }

    .home-split,
    .home-split.reverse {
        grid-template-columns: 1fr;
    }

    .home-grid {
        grid-template-columns: 1fr;
    }

    .home-pill {
        width: 100%;
        justify-content: center;
    }
}
/* ============================================================
   HERO SCROLL SPLIT (AJOUT)
============================================================ */

/* Donne de la "distance de scroll" au hero */
.home-hero.scroll-stage {
    height: calc(140vh - var(--cdf-navbar-height));
}

/* Zone sticky qui reste visible pendant qu'on scroll DANS le hero */
.home-hero-stage {
    position: sticky;
    top: var(--cdf-navbar-height);
    height: calc(90vh - var(--cdf-navbar-height));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 24px;
}

/* Grille split pilotée par variables */
.home-hero-grid {
    width: min(1150px, 100%);
    display: grid;
    grid-template-columns: var(--textW, 100%) var(--mediaW, 0%);
    gap: var(--gap, 0px);
    align-items: center;
}

/* TEXTE : on le décale vers la gauche au fur et à mesure */
.home-hero-text {
    transform: translateX(var(--textShift, 0px));
    transition: none;
}

/* quand on est en split -> texte à gauche */
.home-hero[data-split="1"] .home-hero-text {
    text-align: left;
}

/* sinon -> centré */
.home-hero:not([data-split="1"]) .home-hero-text {
    text-align: center;
}

/* MEDIA : apparaît progressivement */
.home-hero-media {
    opacity: var(--mediaOpacity, 0);
    transform: translateX(var(--mediaShift, 40px)) scale(var(--mediaScale, .96));
    pointer-events: none;
    will-change: transform, opacity;
}

/* Cadre image (patch) */
.hero-media-frame {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0,0,0,.65);
}

.hero-media-frame img {
    width: 100%;
    height: min(360px, 40vh);
    object-fit: cover;
    display: block;
}

/* CTA fade léger pendant la transition */
.home-cta-row {
    opacity: var(--ctaOpacity, 1);
    transform: translateY(var(--ctaShiftY, 0px));
    will-change: transform, opacity;
}

/* Responsive */
@media (max-width: 992px) {
    .home-hero.scroll-stage {
        height: calc(125vh - var(--cdf-navbar-height));
    }

    .home-hero-grid {
        grid-template-columns: 1fr; /* en mobile : on empile */
        gap: 14px;
    }

    .home-hero-media {
        opacity: 1;              /* en mobile : visible direct */
        transform: none;
    }

    .home-hero-text {
        transform: none;
        text-align: center !important;
    }
}



    

.skeleton {
    min-height: 260px;
    background: rgba(255,255,255,.06);
    border: 2px dashed rgba(255,255,255,.12);
    animation: pulse 1.2s infinite ease-in-out;
}

@keyframes pulse {
    0%,100% {
        opacity: .55
    }

    50% {
        opacity: .85
    }
}
/* =========================================================
   HOME GALLERY – DiscordCarousel (Syncfusion)
   3 images par slide + skin militaire (SANS doublons)
    ========================================================= */

.cdf-home-carousel,
.cdf-carousel-frame {
    position: relative;
    width: 100%;
    border-radius: 16px;
    padding: 16px 18px 12px;
    background: radial-gradient(circle at 30% 20%, rgba(143,191,90,.10), transparent 45%), linear-gradient(180deg, rgba(15,25,15,.92), rgba(10,15,10,.92));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 45px rgba(0,0,0,.65), inset 0 0 0 2px rgba(0,0,0,.35);
    overflow: hidden;
}

    /* Surpiqûre du cadre */
    .cdf-home-carousel::before,
    .cdf-carousel-frame::before {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 12px;
        border: 2px dashed rgba(255,255,255,.10);
        pointer-events: none;
    }

    /* Rivets coins */
    .cdf-home-carousel::after,
    .cdf-carousel-frame::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 18px 18px, rgba(200,200,200,.35) 0 6px, rgba(0,0,0,0) 7px), radial-gradient(circle at calc(100% - 18px) 18px, rgba(200,200,200,.35) 0 6px, rgba(0,0,0,0) 7px), radial-gradient(circle at 18px calc(100% - 18px), rgba(200,200,200,.35) 0 6px, rgba(0,0,0,0) 7px), radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), rgba(200,200,200,.35) 0 6px, rgba(0,0,0,0) 7px);
        opacity: .85;
    }

/* Grid 3 images */
.cdf-grid-3 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* Patch card */
.cdf-shot,
.home-patch.patch-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 14px 28px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.45);
    transform: translateY(0);
    transition: transform .18s ease, filter .18s ease;
}

    /* Surpiqûre patch */
    .cdf-shot::before,
    .home-patch.patch-image::before {
        content: "";
        position: absolute;
        inset: 8px;
        border-radius: 10px;
        border: 2px dashed rgba(255,255,255,.14);
        pointer-events: none;
    }

    /* Vignette / mood */
    .cdf-shot::after,
    .home-patch.patch-image::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.10), rgba(0,0,0,.55)), linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
        mix-blend-mode: multiply;
        opacity: .95;
    }

    /* Image cover */
    .cdf-shot img,
    .home-patch.patch-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
        filter: contrast(1.05) saturate(1.02);
        transform: scale(1.01);
    }

    /* Hover */
    .cdf-shot:hover,
    .home-patch.patch-image:hover {
        transform: translateY(-4px);
        filter: drop-shadow(0 0 12px rgba(143,191,90,.22));
    }

/* Tag militaire */
.cdf-tag {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(10,15,10,.70);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 10px 22px rgba(0,0,0,.35);
    color: rgba(212,249,149,.95);
}

/* Placeholder si slide incomplet */
.patch-empty {
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.05);
    border: 1px dashed rgba(255,255,255,.15);
}

    .patch-empty span {
        font-family: monospace;
        letter-spacing: 2px;
        opacity: .7;
    }

/* Skeleton */
.skeleton {
    background: rgba(255,255,255,.06);
    border: 2px dashed rgba(255,255,255,.12);
    animation: pulse 1.2s infinite ease-in-out;
}

/* Syncfusion: slide + piste (ne pas forcer width de la piste) */
.cdf-home-carousel .e-carousel-items {
    padding: 0 !important;
}

.cdf-home-carousel .e-carousel-item {
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 10px 0 6px !important;
    box-sizing: border-box;
}

/* Nav buttons */
.cdf-home-carousel .e-carousel-navigators .e-previous,
.cdf-home-carousel .e-carousel-navigators .e-next {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: rgba(15,25,15,.70) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.45) !important;
    backdrop-filter: blur(2px);
    transition: transform .15s ease, filter .15s ease;
}

    .cdf-home-carousel .e-carousel-navigators .e-previous:hover,
    .cdf-home-carousel .e-carousel-navigators .e-next:hover {
        transform: translateY(-2px);
        filter: brightness(1.15);
    }

.cdf-home-carousel .e-carousel-navigators .e-btn-icon {
    color: rgba(212,249,149,.95) !important;
    filter: drop-shadow(0 0 6px rgba(0,0,0,.65));
}

/* Responsive */
@media (max-width: 992px) {
    .cdf-grid-3 {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 600px) {
    .cdf-grid-3 {
        grid-template-columns: 1fr;
    }
}
.cdf-home-carousel,
.cdf-carousel-frame {
    background: linear-gradient(180deg, rgba(10,15,10,.78), rgba(10,15,10,.92)), url('/css/camo.jpg') center/cover no-repeat;
    background-blend-mode: overlay;
}
/* ===== SITREP overlay ===== */
.cdf-shot {
    position: relative;
}

.cdf-overlay {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(10,15,10,.55), rgba(10,15,10,.82));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 10px 22px rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
}

.cdf-overlay-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cdf-sitrep {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(143,191,90,.16);
    border: 1px solid rgba(212,249,149,.28);
    color: rgba(212,249,149,.95);
    box-shadow: 0 0 14px rgba(143,191,90,.18);
}

.cdf-case, .cdf-date {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 1px;
    opacity: .9;
    white-space: nowrap;
}

.cdf-shot:hover .cdf-overlay {
    border-color: rgba(212,249,149,.22);
    box-shadow: 0 16px 28px rgba(0,0,0,.55), 0 0 18px rgba(143,191,90,.15);
}
/* clic visuel */
.cdf-clickable {
    cursor: pointer;
}

/* ===== Lightbox (Syncfusion Dialog) ===== */
.cdf-lightbox .e-dlg-content {
    padding: 0 !important;
}

.cdf-lightbox-body {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.72);
}

.cdf-lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 55px rgba(0,0,0,.8), inset 0 0 0 2px rgba(0,0,0,.35);
}