/* ==========================================================================
   1. IMPORT POLICE
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Beva&family=Poppins&family=Inter:wght@300;400;500;600;700&display=swap');


/* ==========================================================================
   2. VARIABLES (THEME)
   ========================================================================== */
:root {
    /* Couleurs Cassiopeia */
    --cassiopeia-color-primary: #00ff00;
    --cassiopeia-color-link: #847821;
    --cassiopeia-color-hover: #0000ff;

    /* Typographie Cassiopeia */
    --cassiopeia-font-family-body: "Inter", sans-serif;
    --cassiopeia-font-family-headings: "Inter", sans-serif;
    --cassiopeia-font-weight-headings: 300;
    --cassiopeia-font-weight-normal: 300;

    /* Palette Bootstrap */
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --primary-rgb: 13, 110, 253;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 25, 135, 84;
    --info-rgb: 13, 202, 240;
    --warning-rgb: 255, 193, 7;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 248, 249, 250;
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 33, 37, 41;
    --body-bg-rgb: 255, 255, 255;

    /* Polices système / fallback */
    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

    /* Corps du site (mode sombre) */
    --body-font-family: var(--cassiopeia-font-family-body);
    --body-font-size: rem;
    --body-font-weight: 300;
    --body-line-height: 1.3;
    --body-color: #ffffff;
    --body-bg: #100a00;
}


/* ==========================================================================
   3. TYPOGRAPHIE GÉNÉRALE
   ========================================================================== */
body {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 14px;
}

h1 {
    color: #aea17f;
    text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
}

a {
    color: #fbf82f !important;
}

a:hover {
    color: #ffffff !important;
}


/* ==========================================================================
   4. HEADER & FOOTER
   ========================================================================== */
.header {
    background: #1a1101;
    background: linear-gradient(90deg, rgba(26, 17, 1, 1) 1%, rgba(125, 86, 37, 1) 91%, rgba(133, 123, 33, 1) 100%);
}

.footer {
    background: rgb(2, 0, 36);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

/* Bannière réduite (mode non-fluide) */
.container-banner .banner-overlay {
    height: 10vh;
}


/* ==========================================================================
   5. MENU PRINCIPAL & SOUS-MENUS
   ========================================================================== */

/* Affiche le sous-menu au survol / focus */
.mod-menu .nav-item.parent:hover > .mod-menu__sub[aria-hidden="true"],
.mod-menu .nav-item.parent:focus-within > .mod-menu__sub[aria-hidden="true"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Cadre + fond du sous-menu (dropdown mod_menu classique) */
.mod-menu__sub {
    border: 1px solid #333333 !important;
    background-color: #312109 !important;
    border-radius: 6px;
}

.mod-menu__sub a {
    color: #ebe8e2 !important;
}

.mod-menu__sub a:hover {
    color: #ffffff !important;
    background-color: #403678 !important;
}

.mod-menu a:hover {
    color: #ffffff !important;
    background-color: #100a00;
}

/* Fond du dropdown MetisMenu (si utilisé en plus/à la place de mod_menu) */
.metismenu.mod-menu .mm-collapse {
    background: #362c06;
}

.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #3a3105;
}

/* Icône chevron */
.icon-chevron-down {
    color: #847821 !important;
}

.mod-menu__toggle-sub .icon-chevron-down {
    font-size: 1.2em; /* agrandir si besoin */
}


/* ==========================================================================
   6. ICÔNES
   ========================================================================== */
.icon-user {
    color: #403678;
}

.fa, .fas, [class*=" icon-"], [class^="icon-"] {
    color: #403678;
}


/* ==========================================================================
   7. BOUTONS
   ========================================================================== */
.btn-primary {
    background: rgba(119, 9, 121, 1);
}

.btn-primary:hover {
    background: rgba(0, 212, 255, 1);
}


/* ==========================================================================
   8. ARTICLES / BLOG (mode sombre - ombre claire)
   ========================================================================== */
.item-content {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.08);
}

/* Cartes de blog uniformes : nécessite la classe "boxed" en Article Class
   + arrangement "Across" (génère columns-X en CSS Grid) dans le menu item Joomla */
.boxed {
    padding: 10px !important;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Image uniforme en hauteur dans les cartes */
.boxed .item-image {
    height: 200px;
    overflow: hidden;
    flex: 0 0 auto;
}

.boxed .item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Le bloc de contenu (titre + texte) prend tout l'espace restant */
.boxed .item-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
}

/* Texte d'intro tronqué à 4 lignes : évite qu'un texte long agrandisse la carte */
.boxed .item-content > p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1 1 auto;
}

/* Bouton "audiofly" toujours centré */
.moduletable {
  with: 400px ! important;
  max-with: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 400px; /* ajuste selon la largeur du lecteur audio */
}

/* Bouton "Lire la suite" toujours collé en bas de la carte */
.boxed .item-content .readmore {
    margin-top: auto;
}

.item-page {
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #221D1F;
}

/* Article individuel */
.com-content-article__body,
article.com-content-article {
    border: 2px solid transparent !important;
}

/* Cadre de la catégorie/blog */
.com-content-category-blog__item {
    border: 2px solid transparent !important;
}

/* Image d'article : centrée, responsive, sans bordure */
.item-image {
    display: table !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100%;
    border: 2px solid transparent;
}

.item-image img {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   9. MODULES (cards Cassiopeia)
   ========================================================================== */
.card {
    border-color: transparent !important;
    box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
}

.moduletable {
    border: 2px solid transparent !important;
}

/* Modules en position main-top */
.main-top.card {
    background: #e1e9f5;
}

/* ==========================================================================
   10. LECTEUR AUDIO (module audiofly / .songplay)
   ========================================================================== */
.songplay {
    width: 400px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 12px !important;
}