/* ==========================
   GOOD TIMING FONT
========================== */

@font-face {
    font-family: 'GoodTiming';
    src: url('/assets/fonts/good-timing.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'GoodTiming', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-nav a,
.logo span {
    font-family: 'GoodTiming', sans-serif;
    letter-spacing: 1px;
}

body {
    font-family: 'Segoe UI', sans-serif;
}


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

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #000;
    color: #fff;
}

/* ================================
   🌌 BLACK SHEEP – MOTHERSHIP HEADER
================================ */
.site-header {
    position: relative;
    top: 0;
    z-index: 1000;

    background: linear-gradient(
        180deg,
        rgba(25,18,45,0.95) 0%,
        rgba(15,10,25,0.95) 100%
    );

    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(122,0,255,0.3);

    box-shadow:
        0 0 40px rgba(122,0,255,0.15);
}

/* Ligne d’énergie animée */
.site-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -50%;
    width: 50%;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(0,200,255,0.8),
        transparent
    );

    animation: energyFlow 6s linear infinite;
}

@keyframes energyFlow {
    0% { left: -50%; }
    100% { left: 120%; }
}

.header-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px 40px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ================================
   🐑 LOGO – Halo énergétique
================================ */

.logo a {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.logo img {
    width: 44px;
    transition: 0.5s ease;
}

.logo span {
    font-weight: 600;
    letter-spacing: 5px;
    font-size: 0.85rem;
    color: #ffffff;

    text-shadow:
        0 0 8px rgba(0,200,255,0.3);

    transition: 0.4s ease;
}

/* Halo cosmique au hover */
.logo:hover img {
    transform: rotate(12deg) scale(1.15);
    filter: drop-shadow(0 0 12px rgba(0,200,255,0.7));
}

.logo:hover span {
    text-shadow:
        0 0 15px rgba(0,200,255,0.8),
        0 0 30px rgba(0,150,255,0.5);
}

/* ================================
   🌌 NAV – ENERGY TEXT FLOW
================================ */

.site-nav {
    display: flex;
    align-items: center;
    gap: 45px;
}

.site-nav a {
    position: relative;
    text-decoration: none;

    font-size: 0.8rem;
    letter-spacing: 4px;
    font-weight: 500;

    color: rgba(255,255,255,0.6);
    transition: 0.4s ease;
}

/* Hover → texte devient énergétique */
/* ENERGY TEXT – YELLOW / PURPLE */

.site-nav a:hover {
    background: linear-gradient(
        90deg,
        #ffd000,
        #ff9a00,
        #7a00ff,
        #ffd000
    );
    background-size: 200% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: energyText 2s linear infinite;
}

@keyframes energyText {
    from { background-position: 0% center; }
    to { background-position: 200% center; }
}

/* Lien actif */
.site-nav a.active {
    color: #ffffff;
}

/* ================================
   🌌 Couleur dynamique subtile
================================ */

/* Armée = vert léger */
body.armee .site-header {
    box-shadow:
        0 0 40px rgba(0,0,0,0.8),
        inset 0 0 40px rgba(0,255,100,0.05);
}

/* Logistique = orange discret */
body.logistique .site-header {
    box-shadow:
        0 0 40px rgba(0,0,0,0.8),
        inset 0 0 40px rgba(255,156,0,0.05);
}

/* Exploration = bleu cosmique */
body.exploration .site-header {
    box-shadow:
        0 0 40px rgba(0,0,0,0.8),
        inset 0 0 40px rgba(0,200,255,0.08);
}

/* HERO / BANNIÈRE */
.hero {
    position: relative;
    height: 80vh;
    min-height: 500px;

    background-image: url("/public/assets/images/hero.jpg");
    background-size: cover;
    background-position: center;
}

/* voile sombre */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

/* contenu */
.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 80px;
}

/* rectangle sombre */
.hero-box {
    background: rgba(0,0,0,0.65);
    padding: 40px 50px;
}

/* texte jaune */
.hero-box h1 {
    color: #f5c542;
    font-size: 42px;
    margin-bottom: 10px;
}

.hero-box p {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ddd;
}

/* CONTENU */
.page-content {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 40px;
}

/* ================================
   🌌 BLACK SHEEP – MOTHERSHIP FOOTER
================================ */

.site-footer {
    position: relative;
    padding: 60px 40px;

    background: linear-gradient(
        180deg,
        rgba(15,10,25,0.95) 0%,
        rgba(25,18,45,0.95) 100%
    );

    border-top: 1px solid rgba(122,0,255,0.3);

    box-shadow:
        0 0 40px rgba(122,0,255,0.15);
}

/* Ligne énergétique animée (haut du footer) */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #ffd000,
        #7a00ff,
        transparent
    );

    animation: footerEnergy 6s linear infinite;
}

@keyframes footerEnergy {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Texte principal */
.site-footer p {
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.6);
}

/* Liens footer (connexion etc) */
.footer-auth {
    margin-top: 25px;
    text-align: center;
}

.footer-auth a {
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.6);
    transition: 0.4s ease;
}

/* Hover énergétique */
.footer-auth a:hover {
    background: linear-gradient(
        90deg,
        #ffd000,
        #7a00ff,
        #ffd000
    );
    background-size: 200% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: energyText 2s linear infinite;
}

/* Séparateurs */
.footer-links-inline .separator {
    margin: 0 12px;
    opacity: 0.3;
}

body {
    overflow-x: hidden;
}


/* ===============================
   CYCLONE TROPHY – CHAMPIONSHIP
================================ */
.championship-title,
.championship-subtitle,
.section-title,
.race-name {
    text-align: center;
}

.championship-title {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #ff2a2a, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 40px;
}

.championship-subtitle,
.section-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffd700;
    margin: 50px 0 20px 0;
    position: relative;
}

.championship-subtitle::after,
.section-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #ff2a2a, #ffd700);
    margin: 12px auto 0 auto;
    border-radius: 5px;
}

.race-name {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #ff2a2a;
    margin-bottom: 20px;
}

/* Halo animé uniquement sur Cyclone */

.cyclone-hero {
    max-width: 1200px;
    margin: 60px auto;
    padding: 80px 40px;
    border-radius: 12px;
    position: relative;

    background: 
        linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
        url('/assets/img/cyclone-bg.jpg') center center / cover no-repeat;

    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

/* Lignes broadcast uniquement sur Cyclone */
body.cyclone::after {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        120deg,
        rgba(255,255,255,0.02),
        rgba(255,255,255,0.02) 2px,
        transparent 2px,
        transparent 80px
    );
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
}

@keyframes f1Glow {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    100% {
        transform: translate(-40px, -20px) scale(1.05);
    }
}

.race-slider {
    display: flex;
}

.race-table-slide {
    min-width: 100%;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.race-table-slide h3 {
    animation: titleReveal 0.6s ease;
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bloc tableau */
.championship-table {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    padding: 25px;
    border-radius: 6px;
}

/* Tableau */
.championship-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.championship-table thead {
    background: rgba(255, 255, 255, 0.05);
}

.championship-table th {
    text-align: left;
    padding: 12px 10px;
    font-weight: 600;
    color: #f5c542;
}

.championship-table td {
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.championship-table tr:hover {
    background: rgba(255,255,255,0.05);
}

/* Colonne position */
.championship-table td:first-child {
    font-weight: bold;
    color: #f5c542;
}

.cyclone-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.cyclone-left {
    flex: 2;
}

.cyclone-right {
    flex: 1;
    position: relative;
    padding: 20px;
    background: linear-gradient(180deg, #0f0f0f, #000);
    border-left: 1px solid rgba(255,255,255,0.05);
}

.race-title {
    margin-bottom: 25px;
    font-size: 22px;
}

.race-slider-wrapper {
    position: relative;
    overflow: hidden;
    margin-top: 30px;
}

.race-slider {
    display: flex;
    transition: transform 0.5s ease;
}

.race-table-slide {
    min-width: 100%;
}

.race-name {
    margin-bottom: 15px;
}

.slider-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.slider-controls button {
    background: #ff2a2a;
    border: none;
    color: white;
    font-size: 20px;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 6px;
}

.slider-controls button:hover {
    background: #ff5555;
}

/* Responsive */
@media (max-width: 1000px) {
    .cyclone-layout {
        flex-direction: column;
    }
}

/* =====================================
   SLIDER PILOTE
===================================== */

.pilot-slider-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.pilot-slider {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    transition: transform 0.6s cubic-bezier(.77,0,.18,1);
}

.pilot-table-slide {
    flex: 0 0 100%;
    width: 100%;
}

/* FIX TABLE DANS SLIDER */

.pilot-table-slide {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
}

.pilot-table-slide .championship-table {
    width: 100%;
    overflow-x: auto; /* très important */
}

.pilot-table-slide table {
    width: 100%;
    table-layout: fixed;
}

/* ===========================
   🏁 BLOC RÈGLEMENT CHAMPIONNAT
=========================== */

.race-rules-box {
    background: linear-gradient(90deg, rgba(241,196,15,0.08), rgba(241,196,15,0.04));
    border: 1px solid rgba(241,196,15,0.4);
    border-radius: 12px;
    padding: 18px 25px;
    margin: 25px auto 50px auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    max-width: 1100px;
}

.race-rules-content {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
}

.rules-icon {
    font-size: 22px;
}

.race-rules-content strong {
    color: #f1c40f;
    display: block;
    margin-bottom: 4px;
}

.race-rules-content p {
    font-size: 13px;
    color: #ccc;
    margin: 0;
}

.rules-btn {
    background: #f1c40f;
    color: #000;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.rules-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(241,196,15,0.6);
}

/* =========================
   VIDEO CYCLONE
========================= */

.cyclone-video {
    margin: 80px auto;
    max-width: 1000px;   /* largeur max */
    padding: 0 20px;
}

.cyclone-video iframe {
    aspect-ratio: 16 / 9;
    height: auto;
}

.cyclone-video h2 {
    margin-bottom: 30px;
    font-size: 28px;
    color: #ffc542;
}

.cyclone-video-banner {
    max-width: 900px;
    margin: 60px auto 30px auto;
    padding: 20px 30px;
    background: linear-gradient(90deg, #111, #1a1a1a);
    border-left: 5px solid #f5c542;
    text-align: center;
    border-radius: 6px;
}

.cyclone-video-banner h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    color: #f5c542;
    letter-spacing: 1px;
}

.cyclone-video {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    border-radius: 6px;
    padding: 25px;
}

/* ===========================
   🎬 TITRE PAGE CINÉMA UNIQUEMENT
=========================== */

.cinema-title {
    text-align: center;
    font-size: 56px;
    font-weight: 900;
    margin-top: 40px;
    margin-bottom: 10px;
    letter-spacing: -1px;

    background: linear-gradient(90deg, #ffffff, #d1a94f, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cinema-subtitle {
    text-align: center;
    color: #aaa;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 50px;
}

/* Ligne élégante dessous */
.cinema-title::after {
    content: "";
    display: block;
    width: 140px;
    height: 4px;
    margin: 20px auto 0 auto;
    border-radius: 3px;
    background: linear-gradient(90deg, #d1a94f, #f1c40f);
    box-shadow: 0 0 12px rgba(241,196,15,0.5);
}

.cinema-page {
    min-height: 100vh;
    padding: 60px 20px 80px;

    background-image: url('/assets/img/cinema-bg.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    position: relative;
}

/* Overlay sombre */
.cinema-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 0;
}

/* Tout le contenu passe au-dessus */
.cinema-page > * {
    position: relative;
    z-index: 1;
}

.main-video-container {
    max-width: 1100px;
    margin: 40px auto 60px;
}

.main-video-container iframe {
    width: 100%;
    height: 600px;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

.video-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}

.video-card {
    cursor: pointer;
    transition: 0.3s ease;
}

.video-card img {
    width: 100%;
    border-radius: 8px;
}

.video-card h3 {
    margin-top: 10px;
    font-size: 16px;
}

.video-card:hover {
    transform: scale(1.05);
}

.actions a {
    display: inline-block;
    padding: 6px 10px;
    margin: 0 4px;
    font-size: 14px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: 0.2s;
}

/* Monter / Descendre */
.btn-move {
    background: #222;
    color: #ffc542;
}

.btn-move:hover {
    background: #ffc542;
    color: #000;
}

/* Modifier */
.btn-edit {
    background: #2e7d32;
    color: #fff;
}

.btn-edit:hover {
    background: #1b5e20;
}

/* Supprimer */
.btn-delete {
    background: #c62828;
    color: #fff;
}

.btn-delete:hover {
    background: #8e0000;
}


/* ===============================
   LOGO
================================ */

.logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo img {
    height: 36px; /* taille du logo */
    width: auto;
}

.logo span {
    font-weight: 700;
    letter-spacing: 4px;
    color: #f5c542;
    font-size: 14px;
}

.logo img {
    height: 40px;
    transition: transform 0.3s ease;
}

.logo img:hover {
    transform: scale(1.08);
}

.team-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.team-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* =========================
   ACTUALITES
========================= */

/* PAGE ACTUALITES */

.news-page {
    padding: 60px 5%;
}

.news-page-title {
    font-size: 42px;
    margin-bottom: 40px;
    font-weight: 800;
}

/* GRILLE */

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

/* CARTE */

.news-card {
    background: #111;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    transition: 0.4s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

/* IMAGE */

.news-card-image {
    height: 220px;
    overflow: hidden;
}

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

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

/* CONTENU */

.news-card-content {
    padding: 20px;
}

.news-card-content h2 {
    font-size: 22px;
    margin-bottom: 10px;
}

.news-card-content p {
    font-size: 14px;
    color: #bbb;
}


.news-thumbnail {
    width: 100%;
    max-width: 400px;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.article-banner img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 30px;
}

.news-back-top,
.news-back-bottom {
    margin: 30px 0;
}

.btn-news-back {
    display: inline-block;
    padding: 10px 20px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    transition: 0.3s;
}

.btn-news-back:hover {
    background: #c40000;
}

/* ===============================
   PAGE ARTICLE
=================================*/

.article-container {
    max-width: 1000px;
    margin: 80px auto;
    padding: 0 30px;
}

.article-banner {
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 40px;
}

.article-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.article-title {
    font-size: 38px;
    margin-bottom: 30px;
}

.article-content {
    font-size: 17px;
    line-height: 1.8;
    color: #ddd;
}

/* ARTICLE CONTAINER */
.news-article {
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

/* HERO IMAGE */
.article-hero {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 40px;
}

.article-hero img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* pas coupée */
    background: #000;
}

/* OVERLAY */
.article-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2));
}

/* TITLE */
.article-title {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3.2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-align: center;

    color: #f5c518;
    text-shadow:
        0 2px 5px rgba(0,0,0,0.8),
        0 8px 25px rgba(0,0,0,0.9);
}



.article-title.centered {
    position: relative;
    transform: none;
    left: auto;
    bottom: auto;
    margin: 40px 0;
}

/* CONTENT */
.news-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #ddd;
    margin-bottom: 60px;
}

/* BUTTONS */
.btn-news-back {
    display: inline-block;
    padding: 10px 20px;
    background: #f5c518;
    color: #000;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn-news-back:hover {
    background: #ff8c00;
    color: #000;
}

/* SPACING */
.news-back-top,
.news-back-bottom {
    margin: 20px 0;
}

.btn-create-article,
.btn-login {
    display: inline-block;
    background: #f5c518;
    color: black;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 30px;
    transition: 0.3s;
}

.btn-create-article:hover,
.btn-login:hover {
    background: #ff8c00;
}

.login-page {
    max-width: 400px;
    margin: 80px auto;
    text-align: center;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.login-form input {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #444;
    background: #111;
    color: white;
}

.btn-login {
    background: #f1c40f;
    color: black;
    padding: 10px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

.login-error {
    background: #aa0000;
    color: white;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 6px;
}

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

.archives-back {
    text-align: center;
    margin-bottom: 40px;
}

.btn-back-news {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 8px;
    background: #f1c40f;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn-back-news:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(241,196,15,0.6);
}

/* ===========================
   🔎 SEARCH BAR DARK + GLOW
=========================== */

.news-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #111;
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid #222;
    max-width: 800px;
    margin: 20px 0 30px 0;
    position: relative;
    transition: 0.3s ease;
}

/* Glow violet subtil autour */
.news-search-bar::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 12px;
    background: linear-gradient(90deg, #7b2ff7, #9f44ff, #7b2ff7);
    z-index: -1;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.3s ease;
}

.news-search-bar:hover::after {
    opacity: 0.4;
}

/* Input */
.search-left {
    position: relative;
    flex: 1;
}

.search-left input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    outline: none;
}

.search-left input::placeholder {
    color: #777;
}

/* Glow focus input */
.search-left input:focus {
    box-shadow: 0 0 8px rgba(159, 68, 255, 0.6);
    border-radius: 6px;
}

.search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    opacity: 0.6;
}

/* Select */
.search-category {
    background: #1a1a1a;
    border: 1px solid #222;
    color: #fff;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    transition: 0.3s ease;
}

.search-category:focus {
    box-shadow: 0 0 8px rgba(159, 68, 255, 0.6);
}

/* Bouton */
.search-btn {
    background: linear-gradient(90deg, #7b2ff7, #9f44ff);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
}

.search-btn:hover {
    box-shadow: 0 0 12px rgba(159, 68, 255, 0.7);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
    .news-search-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-btn {
        width: 100%;
    }
}

.archives-link {
    text-align: center;
    margin-top: 40px;
}

.archives-link a {
    color: #f1c40f;
    text-decoration: none;
    font-weight: 600;
}

.archives-link a:hover {
    text-decoration: underline;
}
/* ===========================
   TITRE PAGE ACTUALITÉS
=========================== */

.actualites-title {
    text-align: center;
    font-size: 52px;
    font-weight: 900;
    color: #f1c40f; /* même jaune que ton bouton */
    margin-bottom: 60px;
    position: relative;
}

/* Ligne sous le titre */
.actualites-title::after {
    content: "";
    display: block;
    width: 120px;
    height: 4px;
    margin: 18px auto 0 auto;
    border-radius: 3px;
    background: linear-gradient(90deg, #f1c40f, #ffdd57);
    box-shadow: 0 0 12px rgba(241,196,15,0.7);
}

/* ===========================
   ✍️ BOUTON CREATE DÉTACHÉ
=========================== */

.news-create-wrapper {
    margin-top: 50px;   /* espace au-dessus */
    padding-top: 30px;
    border-top: 1px solid #1f1f1f; /* séparation subtile */
    display: flex;
}

.btn-create-article {
    background: #f1c40f;
    color: #000;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn-create-article:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(241,196,15,0.6);
}

/* ===============================
   PAGE CREATION ARTICLE
================================ */

.news-create-page {
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
}

.news-create-card {
    background: #111;
    padding: 40px;
    width: 100%;
    max-width: 700px;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

.news-create-card h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    color: #f1c40f;
}

.news-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.news-form input[type="text"],
.news-form textarea,
.news-form input[type="file"] {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #333;
    background: #1a1a1a;
    color: white;
}

.news-form textarea {
    resize: vertical;
}

.btn-news-submit {
    background: #f1c40f;
    color: black;
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.btn-news-submit:hover {
    background: #ffd84d;
}

.news-create-back {
    text-align: center;
    margin-top: 20px;
}

.news-create-back a {
    color: #aaa;
    text-decoration: none;
}

.news-create-back a:hover {
    color: #f1c40f;
}

.article-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 25px 0 40px 0;
    font-size: 15px;
    color: #bbb;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e10600;
}

/* ===============================
   CONNEXION
=================================*/

.auth-box {
    max-width: 400px;
    margin: 80px auto;
    padding: 40px;
    background: #111;
    border-radius: 10px;
    text-align: center;
    color: white;
}

.auth-box input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: none;
    border-radius: 6px;
}

.auth-box button {
    width: 100%;
    padding: 12px;
    background: #d00000;
    border: none;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}

.auth-box button:hover {
    background: #a00000;
}

.auth-error {
    color: #ff4d4d;
}

.auth-success {
    color: #4CAF50;
}

.auth-link {
    margin-top: 15px;
    font-size: 14px;
}

.footer-login {
    text-align: center;
    font-size: 12px;
    opacity: 0.5;
    margin-top: 20px;
}

.footer-login a {
    color: #ccc;
    text-decoration: none;
}

.footer-login a:hover {
    opacity: 1;
}

/* ===============================
   ACCOUNT
=================================*/
.account-box {
    max-width: 500px;
    margin: 80px auto;
    padding: 40px;
    background: #111;
    border-radius: 10px;
    color: white;
}

.account-box h1 {
    text-align: center;
    margin-bottom: 30px;
}

.account-box input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 6px;
    border: none;
}

.account-box button {
    width: 100%;
    padding: 12px;
    background: #d00000;
    border: none;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}

.account-box button:hover {
    background: #a00000;
}

.account-avatar {
    text-align: center;
    margin-bottom: 20px;
}

.account-avatar-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

.account-avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.account-success {
    color: #4CAF50;
    text-align: center;
    margin-bottom: 20px;
}

.footer-auth {
    text-align: center;
    margin-top: 10px;
}

.footer-user-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.footer-connected {
    font-size: 14px;
    color: #888;
}

.footer-connected strong {
    color: #ffffff;
}

.footer-links-inline {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
}

.footer-links-inline a {
    color: #aaa;
    text-decoration: none;
    transition: 0.3s;
}

.footer-links-inline a:hover {
    color: #d00000;
}

.separator {
    color: #555;
}

/* =============================== 
      MARKDOWN 
=================================*/ 
.news-content { 
  max-width: 900px; 
  margin: 40px auto; 
  line-height: 1.8; 
  font-size: 17px; 
} 

.news-content h1, 
.news-content h2, 
.news-content h3 { 
  margin-top: 40px; 
  color: #f5c518; 
} 

.news-content p { 
  margin-bottom: 20px; 
} 

.news-content ul {
  margin-left: 20px; 
} 

.news-content code {
  background: #111; 
  padding: 4px 8px; 
  border-radius: 6px; 
} 

.news-content pre {
  background: #111; 
  padding: 15px; 
  border-radius: 8px; 
  overflow-x: auto; 
} 

.article-category { 
  display:inline-block; 
  background:#f1c40f; 
  color:#000; 
  padding:6px 12px; 
  font-size:13px; 
  font-weight:600; 
  border-radius:20px;
  margin-bottom:15px; 
}

/* SECTION */
.activities {
    text-align: center;
    padding: 80px 10%;
    background: #1c1c1c;
    color: white;
}

/* TITRE */
.activities h2 {
    font-size: 42px;
    font-weight: 300;
    margin-bottom: 15px;
}

/* PETITE LIGNE DÉCO */
.divider {
    width: 120px;
    height: 2px;
    background: #b89c5c;
    margin: 20px auto;
}

/* TEXTE */
.subtitle {
    max-width: 700px;
    margin: 20px auto 60px auto;
    font-size: 18px;
    color: #ddd;
}

/* GRID 3 IMAGES */
.activities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* CARD */
.activity-card {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    text-decoration: none;
}

/* IMAGE */
.activity-card img {
    width: 100%;
    height: 340px; /* un peu plus grand */
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

/* OVERLAY SOMBRE */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

/* TEXTE CENTRÉ */
.overlay span {
    color: white;
    font-size: 26px;
    font-weight: 300;
}

/* HOVER EFFECT */
.activity-card:hover img {
    transform: scale(1.08);
}

.activity-card:hover .overlay {
    background: rgba(0, 0, 0, 0.35);
}

/* ===== INTRO IMMERSION ARMEE===== */

#introScreen {
    position: fixed;
    inset: 0;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeOut 4s ease forwards;
    animation-delay: 3s;
}

.intro-content {
    text-align: center;
    color: white;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

.intro-content h1 {
    font-size: 3rem;
    letter-spacing: 4px;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; visibility: hidden; }
}


/* ==========================
   🪖 ARMEE FUTURISTE
========================== */

.army-container {
    background: linear-gradient(to bottom, #0a0a0a, #111);
    min-height: 100vh;
    padding: 100px 20px;
    color: #cfcfcf;
    font-family: 'Orbitron', sans-serif;
}

/* Hero */
.army-hero {
    text-align: center;
    margin-bottom: 80px;
}

.army-hero h1 {
    font-size: 3rem;
    letter-spacing: 6px;
    color: #00ff88;
    text-shadow: 0 0 10px #00ff88;
}

.army-hero p {
    opacity: 0.6;
    letter-spacing: 3px;
}

/* Cards style terminal */
.army-card {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
    border: 1px solid rgba(0,255,136,0.3);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    position: relative;
    transition: 0.3s;
}

.army-card:hover {
    border-color: #00ff88;
    box-shadow: 0 0 20px rgba(0,255,136,0.3);
}

.army-card h2 {
    color: #00ff88;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.army-card p {
    line-height: 1.6;
    opacity: 0.8;
}

/* Effet ligne HUD */
.army-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #00ff88;
    animation: scanLine 4s linear infinite;
}

@keyframes scanLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.quote {
    opacity: 0.6;
    font-style: italic;
}

.highlight {
    margin-top: 20px;
    font-weight: bold;
}

.big-x {
    font-size: 2rem;
    color: #00ff88;
    text-shadow: 0 0 10px #00ff88;
}

/* Liste style militaire */
.army-card ul {
    list-style: none;
    padding: 0;
}

.army-card ul li {
    padding: 8px 0;
    border-left: 2px solid #00ff88;
    padding-left: 15px;
    margin-bottom: 8px;
}

/* Escadrons */
.squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    gap: 20px;
    margin-top: 20px;
}

.squad {
    padding: 20px;
    border: 1px solid rgba(0,255,136,0.3);
    text-align: center;
    transition: 0.3s;
}

.squad:hover {
    box-shadow: 0 0 20px rgba(0,255,136,0.4);
    transform: translateY(-5px);
}

.squad h3 {
    color: #00ff88;
}

/* CTA */
.army-cta {
    text-align: center;
    margin-top: 80px;
}

.join-btn {
    display: inline-block;
    margin: 30px 0;
    font-size: 3rem;
    padding: 20px 40px;
    border: 2px solid #00ff88;
    color: #00ff88;
    text-decoration: none;
    transition: 0.3s;
}

.join-btn:hover {
    background: #00ff88;
    color: black;
    box-shadow: 0 0 30px #00ff88;
}

.welcome {
    opacity: 0.6;
}

/* ===========================
   🪖 ARMY CARDS FINAL FIX
=========================== */

.army-card {
    position: relative;
    height: 260px;
    border-radius: 16px;
    overflow: hidden;

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

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

    transition: 0.4s ease;
}

/* Overlay sombre */
.army-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    transition: 0.4s ease;
}

/* Texte */
.army-card .content {
    position: relative;
    z-index: 2;
    padding: 15px 20px;
    border-radius: 10px;
}

.army-card h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}

.army-card p {
    color: #ddd;
    font-size: 14px;
}

/* Hover */
.army-card:hover {
    transform: translateY(-6px);
}

.army-card:hover::before {
    background: rgba(0,0,0,0.45);
}

/* Images */
.phoenix {
    background-image: url('/assets/img/army/phoenix.jpg');
}

.ghost {
    background-image: url('/assets/img/army/ghost.jpg');
}

.immortal {
    background-image: url('/assets/img/army/immortal.jpg');
}
/* ==============================
   🪖 FOND MÉTALLIQUE FUTURISTE
============================== */

.army-container {
    min-height: 100vh;
    padding: 100px 20px;
    color: #e0e0e0;
    position: relative;

    background:
        linear-gradient(180deg, #0c0f12 0%, #11161c 100%),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.02) 0px,
            rgba(255,255,255,0.02) 1px,
            transparent 1px,
            transparent 3px
        );

    background-blend-mode: overlay;
}

/* Effet vignette sombre */
.army-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,
        transparent 40%,
        rgba(0,0,0,0.8) 100%);
    pointer-events: none;
}

/* ==========================
   🔩 RIVETS MÉTALLIQUES
========================== */

.army-container {
    position: relative;
    border: 2px solid rgba(255,255,255,0.05);
}

/* Rivets */
.army-container::before,
.army-container::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 30% 30%,
        #bbbbbb 0%,
        #888 40%,
        #444 70%,
        #111 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.4),
        inset 0 -3px 5px rgba(0,0,0,0.8),
        0 2px 5px rgba(0,0,0,0.6);
}

/* Coin haut gauche */
.army-container::before {
    top: 15px;
    left: 15px;
}

/* Coin bas droit */
.army-container::after {
    bottom: 15px;
    right: 15px;
}

.rivets-extra::before,
.rivets-extra::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 30% 30%,
        #bbbbbb 0%,
        #888 40%,
        #444 70%,
        #111 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.4),
        inset 0 -3px 5px rgba(0,0,0,0.8),
        0 2px 5px rgba(0,0,0,0.6);
}

.rivets-extra::before {
    top: 15px;
    right: 15px;
}

.rivets-extra::after {
    bottom: 15px;
    left: 15px;
}

/* ======================================
   🪖 PANNEAU BLINDÉ ULTRA IMMERSIF
====================================== */

.army-panel {
    min-height: 100vh;
    background: radial-gradient(circle at center, #1a1f25 0%, #0b0f14 100%);
    padding: 120px 20px;
    display: flex;
    justify-content: center;
}

/* Cadre extérieur */
.panel-frame {
    width: 100%;
    max-width: 1100px;
    padding: 15px;
    background: #111;
    border: 3px solid #222;
    box-shadow:
        0 0 40px rgba(0,0,0,0.8),
        inset 0 0 30px rgba(0,0,0,0.9);
}

/* Plaque principale */
.panel-plate {
    position: relative;
    padding: 60px;
    background:
        linear-gradient(145deg, #2a2f35, #1a1f24);
    border: 2px solid #333;
    box-shadow:
        inset 0 0 40px rgba(0,0,0,0.9),
        inset 0 0 10px rgba(255,255,255,0.05);
}

/* Effet acier brossé */
.panel-plate::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.02) 0px,
            rgba(255,255,255,0.02) 1px,
            transparent 1px,
            transparent 4px
        );
    pointer-events: none;
}

/* ======================
   RIVETS VERSION PROPRE
====================== */

.panel-frame {
    position: relative;
}

/* 4 rivets */
.panel-frame::before,
.panel-frame::after,
.panel-frame span::before,
.panel-frame span::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #d0d0d0 0%,
        #888 40%,
        #444 70%,
        #111 100%);
    box-shadow:
        inset 0 3px 6px rgba(255,255,255,0.4),
        inset 0 -4px 6px rgba(0,0,0,0.8),
        0 3px 6px rgba(0,0,0,0.6);
}

/* coin haut gauche */
.panel-frame::before {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

/* coin haut droit */
.panel-frame::after {
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
}

/* coin bas gauche */
.panel-frame span::before {
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
}

/* coin bas droit */
.panel-frame span::after {
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
}

/* Header */
.panel-header h1 {
    color: #00ff88;
    letter-spacing: 6px;
    text-shadow:
        0 0 6px #00ff88,
        0 0 20px rgba(0,255,136,0.4);
 
}

.quote {
    opacity: 0.6;
    margin-top: 15px;
    font-style: italic;
}

/* Plaque signalétique */
.panel-tag {
    margin-top: 60px;
    padding: 10px 20px;
    display: inline-block;
    border: 1px solid #00ff88;
    color: #00ff88;
    font-size: 0.8rem;
    letter-spacing: 2px;
    box-shadow: 0 0 15px rgba(0,255,136,0.3);
}

/* Animation subtle breathing glow */
@keyframes panelGlow {
    0%,100% { box-shadow: 0 0 20px rgba(0,255,136,0.2); }
    50% { box-shadow: 0 0 40px rgba(0,255,136,0.4); }
}

.panel-tag {
    animation: panelGlow 4s ease-in-out infinite;
}

/* ======================================
   ⚙️ LOGISTIQUE – DOCK INDUSTRIEL SPATIAL
====================================== */

/* ===== FOND GLOBAL ===== */
.logi-panel {
    min-height: 100vh;
    padding: 120px 20px;
    display: flex;
    justify-content: center;
    position: relative;
    background: #0f0e0b;
    overflow: hidden;
}

/* Grille industrielle */
.logi-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,156,0,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,156,0,0.06) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

/* Vignette */
.logi-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,
        transparent 40%,
        rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}

/* ===== CADRE ===== */
.logi-frame {
    width: 100%;
    max-width: 1100px;
    padding: 20px;
    background: #14110d;
    border: 3px solid #2a241c;
    box-shadow: 0 0 60px rgba(0,0,0,0.7);
    position: relative;
}

/* ===== PLAQUE PRINCIPALE ===== */
.logi-plate {
    padding: 70px;
    background: #1a1611;
    border: 3px solid #ff9c00;
    box-shadow:
        0 0 40px rgba(255,156,0,0.25),
        inset 0 0 60px rgba(0,0,0,0.9);
    position: relative;
}

/* Effet métal brossé */
.logi-plate::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.02) 0px,
            rgba(255,255,255,0.02) 1px,
            transparent 1px,
            transparent 4px
        );
    pointer-events: none;
}

/* ===== TITRES ===== */
.logi-header h1 {
    color: #ff9c00;
    font-size: 2.8rem;
    letter-spacing: 6px;
    text-shadow: 0 0 15px rgba(255,156,0,0.7);
}

.logi-content h2 {
    margin-top: 50px;
    color: #ff9c00;
}

/* ===== TEXTE ===== */
.logi-content p {
    opacity: 0.85;
    margin-bottom: 20px;
}

/* ===== MODULES ===== */
.logi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 25px;
    margin-top: 40px;
}

.logi-module {
    padding: 25px;
    background: #12100c;
    border: 2px solid rgba(255,156,0,0.4);
    transition: all 0.3s ease;
    position: relative;
}

.logi-module::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #ff9c00;
}

.logi-module:hover {
    background: #1e1a14;
    box-shadow: 0 0 25px rgba(255,156,0,0.6);
    transform: translateY(-6px);
}

.logi-module h3 {
    color: #ff9c00;
}

/* ===== NOTE & CREDO ===== */
.vice-note {
    margin-top: 50px;
    font-style: italic;
    opacity: 0.7;
}

.credo {
    margin-top: 50px;
    font-size: 1.4rem;
    letter-spacing: 4px;
}

.credo span {
    color: #ff9c00;
    text-shadow: 0 0 15px rgba(255,156,0,0.7);
}

/* ===== TAG INDUSTRIEL ===== */
.logi-tag {
    margin-top: 70px;
    padding: 12px 25px;
    border: 2px solid #ff9c00;
    display: inline-block;
    color: #ff9c00;
    letter-spacing: 2px;
    box-shadow: 0 0 20px rgba(255,156,0,0.3);
}

/* ======================================
   🟠 LUMIÈRE INDUSTRIELLE PULSANTE
====================================== */

@keyframes industrialPulse {
    0% {
        box-shadow:
            0 0 20px rgba(255,156,0,0.2),
            inset 0 0 60px rgba(0,0,0,0.9);
    }
    50% {
        box-shadow:
            0 0 60px rgba(255,156,0,0.5),
            inset 0 0 60px rgba(0,0,0,0.9);
    }
    100% {
        box-shadow:
            0 0 20px rgba(255,156,0,0.2),
            inset 0 0 60px rgba(0,0,0,0.9);
    }
}

.logi-plate {
    animation: industrialPulse 4s ease-in-out infinite;
}

/* ======================================
   ⚡ BALAYAGE LUMINEUX INDUSTRIEL
====================================== */

.logi-plate::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,156,0,0.15),
        transparent
    );
    animation: lightSweep 6s linear infinite;
}

@keyframes lightSweep {
    0% { left: -100%; }
    100% { left: 120%; }
}

.section-card {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* IMAGE LAYER */
.section-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s ease;
    z-index: 0;
}

/* ZOOM PROPRE */
.section-card:hover::before {
    transform: scale(1.08);
}

/* OVERLAY */
.section-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.2),
        rgba(0,0,0,0.75)
    );
    z-index: 1;
}

/* TEXTE */
.section-card h3,
.section-card p {
    position: relative;
    z-index: 2;
}

/* ======================================
   🌌 EXPLORATION – COSMIQUE FUTURISTE
====================================== */

.explore-panel {
    min-height: 100vh;
    padding: 120px 20px;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #050810; /* fond sombre neutre */
}

/* Effet étoiles */
.explore-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 70% 60%, white, transparent),
        radial-gradient(1px 1px at 40% 80%, white, transparent),
        radial-gradient(1px 1px at 80% 20%, white, transparent);
    opacity: 0.3;
    pointer-events: none;
}

/* Cadre */
.explore-frame {
    width: 100%;
    max-width: 1100px;
    padding: 20px;
    background: rgba(10,15,30,0.7);
    border: 2px solid rgba(0,200,255,0.2);
}

/* Plaque */
.explore-plate {
    padding: 70px;
    background: rgba(20,30,60,0.6);
    border: 2px solid #00c8ff;
    box-shadow:
        0 0 40px rgba(0,200,255,0.3),
        inset 0 0 60px rgba(0,0,0,0.8);
}

/* Titres */
.explore-header h1 {
    color: #00c8ff;
    letter-spacing: 5px;
    text-shadow: 0 0 15px rgba(0,200,255,0.7);
}

.explore-content h2 {
    margin-top: 50px;
    color: #00c8ff;
}

/* Modules */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 25px;
    margin-top: 40px;
}

.explore-module {
    padding: 25px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(0,200,255,0.4);
    transition: 0.3s;
}

.explore-module:hover {
    box-shadow: 0 0 25px rgba(0,200,255,0.6);
    transform: translateY(-5px);
}

.explore-module h3 {
    color: #00c8ff;
}

/* CTA */
.explore-cta {
    margin-top: 60px;
    text-align: center;
}

.welcome {
    display: block;
    margin-top: 20px;
    font-size: 1.5rem;
    color: #00c8ff;
    text-shadow: 0 0 20px rgba(0,200,255,0.7);
}

/* Tag */
.explore-tag {
    margin-top: 60px;
    padding: 12px 25px;
    border: 2px solid #00c8ff;
    display: inline-block;
    color: #00c8ff;
}

.explore-frame {
    position: relative;
    z-index: 3;
}

.section-card {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* IMAGE LAYER */
.section-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s ease;
    z-index: 0;
}

/* ZOOM PROPRE */
.section-card:hover::before {
    transform: scale(1.08);
}

/* OVERLAY */
.section-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.2),
        rgba(0,0,0,0.75)
    );
    z-index: 1;
}

/* TEXTE */
.section-card h3,
.section-card p {
    position: relative;
    z-index: 2;
}

.medical::before {
    background-image: url('/assets/img/sections/medical.jpg');
}

.mining::before {
    background-image: url('/assets/img/sections/mining.jpg');
}

.transport::before {
    background-image: url('/assets/img/sections/transport.jpg');
}

.recycle::before {
    background-image: url('/assets/img/sections/recycle.jpg');
}

.agriculture::before {
    background-image: url('/assets/img/sections/agriculture.jpg');
}

.supply::before {
    background-image: url('/assets/img/sections/supply.jpg');
}

.mechanic::before {
    background-image: url('/assets/img/sections/mechanic.jpg');
}

.section-card {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.section-card:hover {
    background-size: 120%;
}

/* ==============================
   🌠 ÉTOILES ANIMÉES
============================== */

.nebula-layer {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(0,255,255,0.6), transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(120,0,255,0.5), transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(0,150,255,0.4), transparent 70%);
    filter: blur(120px);
    animation: nebulaMove 30s ease-in-out infinite alternate;
    z-index: 1;
}

@keyframes nebulaMove {
    0% { transform: scale(1) translateX(-80px); }
    100% { transform: scale(1.2) translateX(120px); }
}

/* ==============================
   🌌 NÉBULEUSE VISIBLE
============================== */

.nebula-layer {
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    background:
        radial-gradient(circle at 30% 40%, rgba(0,255,255,0.6), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(120,0,255,0.5), transparent 60%),
        radial-gradient(circle at 50% 80%, rgba(0,150,255,0.4), transparent 70%);
    filter: blur(180px);
    animation: nebulaMove 40s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

@keyframes nebulaMove {
    0% { transform: translateX(-100px) translateY(0); }
    100% { transform: translateX(150px) translateY(-80px); }
}

/* ==============================
   🛰️ RADAR SPATIAL
============================== */

.radar {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 120px;
    height: 120px;
    border: 2px solid rgba(0,200,255,0.5);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0,200,255,0.5);
}

.radar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        rgba(0,200,255,0.5),
        transparent 60%
    );
    animation: radarSpin 4s linear infinite;
}

@keyframes radarSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==============================
   🚀 COMÈTES
============================== */

.comet {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    box-shadow: 0 0 10px white;
    border-radius: 50%;
    animation: cometMove linear forwards;
}

@keyframes cometMove {
    to {
        transform: translate(-800px, 800px);
        opacity: 0;
    }
}

/* ===============================
   🌌 PARTICLE LOGO INTRO
================================ */

#particleIntro {
    position: fixed;
    inset: 0;
    background: black;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

#particleCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* ======================================
   🎬 COULEURS INTRO PAR PAGE
====================================== */

/* ARMÉE */
.intro-armee .cinema-text h1 {
    position: relative;
    color: #00ff66;
    text-shadow: 0 0 40px rgba(0,255,100,0.8);
}

.intro-armee .cinema-text h1::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0,255,100,0.8),
        transparent
    );
    animation: armySweep 2.5s linear infinite;
}

@keyframes armySweep {
    0% { left: -100%; }
    100% { left: 120%; }
}
.intro-armee .cinema-text h2 {
    color: #00ff66;
    letter-spacing: 4px;
    font-size: 1rem;
    opacity: 0.7;
}

/* LOGISTIQUE */
.intro-logi .cinema-text h1 {
    color: #ff9c00;
}
.intro-logi .cinema-text h2 {
    color: #ff9c00;
    letter-spacing: 4px;
    font-size: 1rem;
    opacity: 0.7;
}

/* EXPLORATION */
.intro-explo .cinema-text h1 {
    color: #00eaff;
}
.intro-explo .cinema-text h2 {
    color: #66f2ff;
    letter-spacing: 4px;
    font-size: 1rem;
    opacity: 0.7;
}

/* ===========================
   🎬 HOLLYWOOD INTRO ARMEE
=========================== */

#cinemaIntro {
    position: fixed;
    inset: 0;
    background: black;
    overflow: hidden;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: cinemaFadeOut 5s ease forwards;
    animation-delay: 2s;
}

/* Animations */

@keyframes flashEffect {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes smokeDrift {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-80px) scale(1.3); }
    100% { transform: translateY(-160px) scale(1.6); }
}

@keyframes textReveal {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes cinemaFadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* ================================
   🌌 HOLOGRAPHIC NETWORK HUB
================================ */

.bs-holo-network {
    padding: 160px 20px;
    text-align: center;
    position: relative;
}

/* ===== CORE CENTRAL ===== */

.holo-core {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto 100px auto;
}

.core-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0.85rem;
    letter-spacing: 4px;
    color: #fff;

    text-shadow:
        0 0 15px #ffd000,
        0 0 25px #7a00ff;
}

/* Anneaux */
.core-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,208,0,0.6);
    animation: rotateRing 20s linear infinite;
}

.core-ring.ring-2 {
    inset: 20px;
    border-color: rgba(122,0,255,0.6);
    animation-direction: reverse;
    animation-duration: 30s;
}

@keyframes rotateRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ======================================
   🌌 HOLOGRAPHIC NETWORK – ORBITAL HUB
====================================== */

.bs-holo-network {
    padding: 260px 20px 120px 20px;
    text-align: center;
    position: relative;
}

/* ================= CORE ================= */

.holo-core {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto;
}

/* Halo diffus géant */
.holo-core::before {
    content: "";
    position: absolute;
    inset: -120px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255,208,0,0.08),
        rgba(122,0,255,0.06),
        transparent 70%
    );
    animation: corePulse 6s ease-in-out infinite;
}

@keyframes corePulse {
    0%,100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}

.core-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0.85rem;
    letter-spacing: 4px;
    color: #fff;

    text-shadow:
        0 0 15px #ffd000,
        0 0 25px #7a00ff;
}

/* Anneaux */
.core-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,208,0,0.6);
    animation: rotateRing 20s linear infinite;
}

.core-ring.ring-2 {
    inset: 20px;
    border-color: rgba(122,0,255,0.6);
    animation-direction: reverse;
    animation-duration: 30s;
}

@keyframes rotateRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ================= ORBITAL LINKS ================= */

.holo-links {
    position: relative;
    width: 500px;
    height: 500px;
    margin: -380px auto 0 auto;
}

/* Orbital ring */
.holo-links::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(255,208,0,0.25);
    animation: rotateRing 40s linear infinite;
}

/* MODULES */
.holo-link {
    position: absolute;

    width: 130px;
    height: 130px;

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

    border-radius: 50%;
    text-decoration: none;

    font-size: 0.75rem;
    letter-spacing: 3px;
    color: #fff;

    background: radial-gradient(
        circle at center,
        rgba(122,0,255,0.25),
        rgba(255,208,0,0.1)
    );

    border: 1px solid rgba(255,208,0,0.4);

    backdrop-filter: blur(6px);

    transition: 0.4s ease;

    box-shadow:
        0 0 20px rgba(122,0,255,0.3);
}

/* Orbital positions */
.holo-link:nth-child(1) { top: -65px; left: 50%; transform: translateX(-50%); }
.holo-link:nth-child(2) { right: -65px; top: 50%; transform: translateY(-50%); }
.holo-link:nth-child(3) { bottom: -65px; left: 50%; transform: translateX(-50%); }
.holo-link:nth-child(4) { left: -65px; top: 50%; transform: translateY(-50%); }

/* Hover effect */
.holo-link:hover {
    transform: scale(1.15);

    box-shadow:
        0 0 30px #ffd000,
        0 0 60px #7a00ff;

    border-color: #ffd000;

    text-shadow:
        0 0 10px #ffd000,
        0 0 20px #7a00ff;
}

/* Background particles */
.bs-holo-network::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 50% 80%, rgba(255,255,255,0.3), transparent);
    opacity: 0.4;
    pointer-events: none;
}


/* ================================
   🌌 SCENE SPATIALE
================================ */

.bs-epic-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 10%;
    overflow: hidden;
    background: #000;
}

/* ================================
   ✨ TEXTE CINÉMATIQUE PREMIUM
================================ */

.epic-content h2 {
    font-size: 4.5rem;
    font-weight: 300;
    letter-spacing: 8px;
    color: #ffffff;

    text-shadow:
        0 0 20px rgba(255,255,255,0.3),
        0 0 40px rgba(122,0,255,0.3);

    margin-bottom: 40px;
}

.epic-content p {
    font-size: 1.2rem;
    letter-spacing: 1.5px;
    line-height: 1.8;
    opacity: 0.85;
    max-width: 500px;
    margin-bottom: 50px;
}

/* Ligne élégante */
.epic-divider {
    width: 180px;
    height: 2px;
    margin: 30px 0;

    background: linear-gradient(
        90deg,
        #ffd000,
        #7a00ff
    );
}

/* ================================
   🚀 EPIC DISCORD BUTTON – PREMIUM
================================ */

.epic-btn {
    position: relative;
    display: inline-block;
    padding: 18px 70px;

    font-size: 0.85rem;
    letter-spacing: 4px;
    font-weight: 600;
    text-decoration: none;

    color: #fff;
    background: #111;

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

    overflow: hidden;
    cursor: pointer;

    transition: all 0.3s ease;
}

/* ÉNERGIE ANIMÉE */
.epic-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,208,0,0.6),
        rgba(122,0,255,0.6),
        transparent
    );

    animation: energySlide 4s linear infinite;
}

/* Glow subtil */
.epic-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;

    box-shadow:
        0 0 20px rgba(122,0,255,0.4),
        0 0 40px rgba(255,208,0,0.3);

    opacity: 0;
    transition: 0.3s ease;
}

/* Hover */
.epic-btn:hover {
    transform: translateY(-4px);
    border-color: #ffd000;
}

.epic-btn:hover::after {
    opacity: 1;
}

@keyframes energySlide {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ===========================
   🧪 BRANCH CARDS AVEC IMAGES
=========================== */

.branch-card {
    position: relative;
    padding: 40px;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    transition: 0.4s ease;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0, 200, 255, 0.3);
}

/* Overlay sombre */
.branch-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    transition: 0.4s ease;
}

/* Contenu au-dessus */
.branch-card h3,
.branch-card p {
    position: relative;
    z-index: 2;
}

/* Images spécifiques */
.science {
    background-image: url('/assets/img/explo/science.jpg');
}

.navigation {
    background-image: url('/assets/img/explo/navigation.jpg');
}

/* Hover effet */
.branch-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 200, 255, 0.4);
}

.branch-card:hover::before {
    background: rgba(0, 0, 0, 0.45);
}

/* ================================
   ✨ ÉTOILES PLUS VISIBLES
================================ */

.epic-stars {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(2px 2px at 20% 30%, #fff, transparent),
        radial-gradient(2px 2px at 80% 60%, #ffd000, transparent),
        radial-gradient(2px 2px at 50% 80%, #7a00ff, transparent),
        radial-gradient(3px 3px at 40% 20%, #fff, transparent),
        radial-gradient(2px 2px at 70% 10%, #fff, transparent),
        radial-gradient(2px 2px at 15% 75%, #fff, transparent),
        radial-gradient(3px 3px at 90% 40%, #ffd000, transparent);

    animation: starDrift 200s linear infinite;
}

@keyframes starDrift {
    from { transform: translateY(0); }
    to { transform: translateY(-300px); }
}

/* ================================
   🌍 PLANÈTE
================================ */

.epic-planet {
    position: absolute;
    right: -300px;
    bottom: -200px;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    z-index: 2;

    background:
        radial-gradient(circle at 40% 40%,
            rgba(122,0,255,0.8),
            rgba(40,0,80,0.9),
            #000 70%
        );

    box-shadow:
        0 0 120px rgba(122,0,255,0.5);

    opacity: 0.5;
}

/* ================================
   🛰 VAISSEAU
================================ */

.epic-ship {
    position: absolute;
    right: 5%;
    top: 50%;
    width: 600px;
    height: 400px;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;

    background: url('/assets/img/mothership.png') center/contain no-repeat;
    opacity: 0.25;

    animation: shipFloat 8s ease-in-out infinite alternate;
}

@keyframes shipFloat {
    from { transform: translateY(-48%); }
    to { transform: translateY(-52%); }
}

/* ================================
   FIX CLIC BOUTON
================================ */

.epic-stars,
.epic-planet,
.epic-ship {
    pointer-events: none;
}

.epic-content {
    position: relative;
    z-index: 5;
}

/* ===========================
   📜 PAGE RÈGLEMENT
=========================== */

.reglement-page {
    max-width: 1000px;
    margin: 80px auto;
    padding: 0 20px;
    color: #fff;
}

.reglement-title {
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 50px;
    color: #f1c40f;
}

.reglement-section {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(241,196,15,0.2);
    padding: 25px 30px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.reglement-section h2 {
    color: #f1c40f;
    margin-bottom: 15px;
    font-size: 20px;
}

.reglement-section ul {
    padding-left: 20px;
    line-height: 1.7;
}

.reglement-section li {
    margin-bottom: 8px;
}

.reglement-back {
    text-align: center;
    margin-top: 50px;
}

.rules-back-btn {
    background: #f1c40f;
    color: #000;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.rules-back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(241,196,15,0.6);
}

/* ===========================
   🐑 PAGE QUI SOMMES-NOUS
=========================== */

.about-page {
    max-width: 1100px;
    margin: 80px auto;
    padding: 0 20px;
    color: #fff;
}

.about-hero {
    text-align: center;
    margin-bottom: 60px;
}

.about-title {
    font-size: 48px;
    font-weight: 800;
    color: #f1c40f;
    margin-bottom: 15px;
}

.about-subtitle {
    color: #aaa;
    font-size: 16px;
}

.about-block {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(241,196,15,0.2);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
}

.about-block h2 {
    color: #f1c40f;
    margin-bottom: 15px;
}

/* ==============================
   ORGANIGRAMME FINAL PROPRE
============================== */

/* =========================
   SECTION
========================= */

.org-section {
    padding: 100px 20px;
    text-align: center;
    background: radial-gradient(circle at top, #111 0%, #000 70%);
}

.org-title {
    font-size: 32px;
    margin-bottom: 60px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* =========================
   STRUCTURE
========================= */

.org-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.org-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.org-grid {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.org-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* =========================
   BOITES FUTURISTES
========================= */

.org-box {
    padding: 14px 22px;
    min-width: 180px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    transition: 0.3s ease;
}

.org-box:hover {
    transform: translateY(-4px);
}

/* =========================
   COULEURS
========================= */

.red {
    border-color: #ff3b3b;
    box-shadow: 0 0 12px rgba(255,59,59,0.6);
}

.grey {
    border-color: #888;
}

.blue {
    border-color: #00b7ff;
}

.green {
    border-color: #00ff99;
}

.yellow {
    border-color: #ffd500;
}

.glow-grey { box-shadow: 0 0 12px rgba(150,150,150,0.5); }
.glow-blue { box-shadow: 0 0 15px rgba(0,183,255,0.7); }
.glow-green { box-shadow: 0 0 15px rgba(0,255,153,0.7); }
.glow-yellow { box-shadow: 0 0 15px rgba(255,213,0,0.7); }

.members {
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
    font-size: 18px;
}

/* =========================
   LIGNES LUMINEUSES
========================= */

.org-line {
    width: 2px;
    height: 30px;
    background: linear-gradient(to bottom, transparent, #666, transparent);
    position: relative;
}

.org-line.large {
    height: 50px;
}

.org-line::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: -4px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #666;
}

/* =====================================
   BASE SECTION
===================================== */

.about-section {
    max-width: 1100px;
    margin: auto;
    padding: 100px 20px;
    color: #e6e6e6;
    font-family: 'Segoe UI', sans-serif;
}

/* =====================================
   TITRES
===================================== */

.about-section h1 {
    font-size: 42px;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.about-section h2 {
    margin-top: 80px;
    margin-bottom: 30px;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
}

.about-section h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin-top: 10px;
    background: linear-gradient(90deg, #00b7ff, transparent);
}

/* =====================================
   PARAGRAPHES
===================================== */

.about-section p {
    line-height: 1.9;
    margin-bottom: 20px;
    font-size: 16px;
    color: #cfcfcf;
}

/* =====================================
   INTRO
===================================== */

.about-intro {
    text-align: center;
    margin-bottom: 60px;
}

.sheep-cry {
    font-size: 20px;
    color: #00b7ff;
    margin-bottom: 30px;
    letter-spacing: 3px;
}

.motto {
    font-size: 20px;
    font-weight: 600;
    color: #00b7ff;
    letter-spacing: 2px;
}

.accent {
    color: #00b7ff;
}

/* =====================================
   DIVISIONS
===================================== */

.about-divisions {
    margin-top: 40px;
}

.division-block {
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.1);
    transition: 0.3s ease;
}

.division-block:hover {
    transform: translateY(-6px);
}

/* Couleurs par division */

.division-block.armee {
    border-left: 4px solid #888;
}

.division-block.exploration {
    border-left: 4px solid #00b7ff;
}

.division-block.logistique {
    border-left: 4px solid #00ff99;
}

.division-block.relations {
    border-left: 4px solid #ffd500;
}

/* Glow subtil au hover */

.division-block.armee:hover {
    box-shadow: 0 0 20px rgba(180,180,180,0.3);
}

.division-block.exploration:hover {
    box-shadow: 0 0 20px rgba(0,183,255,0.4);
}

.division-block.logistique:hover {
    box-shadow: 0 0 20px rgba(0,255,153,0.4);
}

.division-block.relations:hover {
    box-shadow: 0 0 20px rgba(255,213,0,0.4);
}

/* =====================================
   STRUCTURE / ESPRIT
===================================== */

.about-structure,
.about-spirit,
.division-block {
    padding: 30px;
    margin-bottom: 30px;
}

/* Supprime l’espace inutile au-dessus des titres internes */
.about-structure h2,
.about-spirit h2,
.about-divisions h2 {
    margin-top: 0;
}

/* =====================================
   CALL TO ACTION
===================================== */

.about-cta {
    text-align: center;
    margin-top: 80px;
    padding: 60px 30px;
    background: radial-gradient(circle at center, rgba(0,183,255,0.08), transparent 70%);
    border-radius: 12px;
}

.join-button {
    display: inline-block;
    margin-top: 25px;
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    border: 2px solid #00b7ff;
    transition: 0.3s ease;
    letter-spacing: 1px;
}

.join-button:hover {
    background: #00b7ff;
    color: #000;
    box-shadow: 0 0 20px rgba(0,183,255,0.6);
}

/* =====================================
   IMAGE HERO QUI SOMMES NOUS
===================================== */

.about-hero-image {
    margin: 40px 0 60px 0;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.about-hero-image img {
    width: 100%;
    display: block;
    border-radius: 12px;
    transition: transform 0.6s ease;
}

/* Effet léger zoom au hover */
.about-hero-image:hover img {
    transform: scale(1.03);
}

/* Overlay sombre pour immersion */
.about-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.3),
        rgba(0,0,0,0.6)
    );
    border-radius: 12px;
}

/* Glow subtil */
.about-hero-image {
    box-shadow: 0 0 40px rgba(0,183,255,0.2);
}

.about-section {
    padding: 40px 20px 100px 20px;
}

.about-section h1 {
    margin-top: 0;
    margin-bottom: 30px;
}

/* Titre uniquement page Qui sommes nous */
body.qui-sommes-nous .about-section h1 {
    color: #ffd500;
    text-shadow: 0 0 15px rgba(255, 213, 0, 0.4);
}


/* Conteneur principal du hero */
.hero-title-box {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  
  display: inline-block;
  padding: 30px 45px;

  background: rgba(0, 0, 0, 0.35); /* plus visible */
  backdrop-filter: blur(6px);

  border: 1px solid rgba(255, 200, 0, 0.5);
  border-radius: 10px;

  box-shadow:
    0 0 25px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 200, 0, 0.15);
}

/* BLACK SHEEP */
.hero-title-box h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: 5px;
  font-weight: 800;
  color: #ffd000; /* plus lumineux */

  text-shadow: 
    0 0 8px rgba(255, 208, 0, 0.8),
    0 0 18px rgba(255, 208, 0, 0.4);
}

/* Sous-titre */
.hero-title-box p {
  margin-top: 10px;
  font-size: 0.9rem;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.9); /* plus clair */
}

/* ================================
   INTRO PARTICULES
================================ */

#intro-animation {
    position: fixed;
    inset: 0;
    background: black;
    z-index: 9999;
    overflow: hidden;
}

#introCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.intro-logo {
    position: absolute;
    width: 220px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    transition: all 1s ease;
    pointer-events: none;
}

.neon-title span{

color:#ffd000;

text-shadow:
0 0 5px #ffd000,
0 0 10px #ffd000,
0 0 20px rgba(255,208,0,0.7),
0 0 40px rgba(255,208,0,0.4);

display:inline-block;
transition:opacity 0.1s;

}