/* ==========================================================================
   1. LARGEUR DES ZONES DES PAGES (SITE-GRID)
   ========================================================================== */
body.wrapper-fluid .site-grid {
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 15%) minmax(0, 35%) minmax(0, 35%) minmax(0, 15%) [main-end] minmax(0, 1fr) [full-end];
    grid-gap: 0 2em;
}

/* ==========================================================================
   2. ENCADRER LES ARTICLES DU MENU BLOG (ARSSI.EU)
   ========================================================================== */
.blog-items .blog-item {
    border: 1px solid #e0e0e0; 
    padding: 25px;             
    margin-bottom: 25px;       
    border-radius: 8px;        
    background-color: #ffffff; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); 
}

/* ==========================================================================
   3. ALIGNEMENT, TAILLE ET COULEUR LOGO & SLOGAN
   ========================================================================== */

/* --- Forcer l'agrandissement de l'image du Logo --- */
.navbar-brand img, 
.navbar-brand svg,
.brand-logo img,
.container-header .navbar-brand img {
    width: auto !important;
    height: auto !important;
    max-height: 150px !important;  /* Ajustez cette valeur (ex: 180px) si vous le voulez encore plus grand */
    min-height: 100px !important;  /* Force une taille minimale */
    display: inline-block !important;
}

/* --- Agrandir le slogan, le mettre en rouge et en italique --- */
.navbar-brand .site-description,
.container-header .site-description {
    font-size: 3rem !important;  /* Taille du texte du slogan */
    color: #dc3545 !important;     /* Rouge vif */
    font-weight: bold;             /* Slogan en gras */
    font-style: italic !important;  /* Slogan en italique */
}


/* --- Gestion de la mise en page (Ordinateur vs Mobile) --- */

@media (min-width: 768px) {
    /* Conteneur principal de la marque */
    .navbar-brand {
        display: flex !important;
        align-items: center;
        width: 100%;
        position: relative;
        min-height: 160px; /* Adapté à la nouvelle hauteur max du logo */
    }

    /* Force le logo à rester à gauche sans bloquer le centrage du slogan */
    .navbar-brand .brand-logo,
    .navbar-brand a:first-child {
        position: absolute;
        left: 0;
        z-index: 2;
    }

    /* Centre le slogan parfaitement au milieu de la ligne */
    .navbar-brand .site-description {
        width: 100%;
        text-align: center;
        margin: 0 !important;
        padding: 0 240px; /* Augmenté pour laisser la place au logo élargi */
        z-index: 1;
    }
}

/* Version Mobile : Empilement propre pour les smartphones */
@media (max-width: 767px) {
    .navbar-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    .navbar-brand .site-description {
        margin-top: 15px !important;
        font-size: 1.4rem !important; 
        padding: 0 !important;
    }
    .navbar-brand img, .navbar-brand svg {
        max-height: 90px !important; 
        min-height: auto !important;
    }
}

/* ==========================================================================
   4. POLICE VERDANA 18px
   ========================================================================== */
body {
    font-family: Verdana, sans-serif !important;
    font-size: 1.15rem !important; /* Augmente la taille du texte de 15% */
    background-color: #f8f9fa;
}
h1, h2, h3 {
    color: #1a5276;
    font-weight: bold;
}

/* ==========================================================================
   5. Couleur personnalisée pour le bouton ARSSI 
   ========================================================================== */
/* Couleur personnalisée pour le bouton ARSSI */
.btn-arssi {
    background-color: #E67E22 !important; /* Couleur du fond (Orange Action) */
    border-color: #E67E22 !important;     /* Couleur de la bordure */
    color: #FFFFFF !important;            /* Couleur du texte (Blanc) */
}

/* Effet visuel lorsque la souris passe sur le bouton */
.btn-arssi:hover {
    background-color: #1A5276 !important; /* Devient Bleu Confiance au survol */
    border-color: #1A5276 !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   6. Position 3 colonnes 
   ========================================================================== */
/* Aligne les 3 modules de l'ARSSI côte à côte sur ordinateur */
.position-top-a {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
}

/* Style élégant pour chaque colonne (effet de carte) */
.position-top-a .card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Repasse sur une seule colonne sur mobile pour la lisibilité */
@media (max-width: 992px) {
    .position-top-a {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   7. Encadrer un module 
   ========================================================================== */
/* Cibler la carte Cassiopeia à l'intérieur de notre classe personnalisée */
.mon-cadre-bottom.card {
    border: 3px solid #0056b3 !important; /* Couleur et épaisseur de votre choix */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Optionnel : ajoute une légère ombre moderne */
    transition: border-color 0.3s ease;
}

/* Optionnel : changer la couleur au survol de la souris */
.mon-cadre-bottom.card:hover {
    border-color: #003d82 !important;
}
/* Code corrigé pour encadrer le titre sur TOUTE la largeur */
.mon-cadre-bottom .card-title, 
.mon-cadre-bottom h3, 
.mon-cadre-bottom h2 {
    display: block !important;             /* Force l'affichage en bloc complet */
    border: 2px solid #0056b3 !important;   /* Couleur et épaisseur de la bordure */
    padding: 10px 15px !important;         /* Espace interne pour respirer */
    border-radius: 4px !important;          /* Coins arrondis */
    background-color: #f1f7fe !important;   /* Fond léger pour le faire ressortir */
    margin-top: 0 !important;              /* Aligne proprement en haut de la carte */
    margin-bottom: 15px !important;        /* Crée un espace sous le titre avant le contenu */
}