.container-header {
  background: rgb(255,255,255); 
}

/* espace entre header et site*/
.container-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}




.site-grid {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#phocagallery .pg-item-box-title.category a {
    color: #ffffff !important; /* Remplacez #ff0000 par votre couleur */
}

#phocagallery .pg-item-box-title.category a:hover {
    color: #ff0000 !important; /* Couleur lors du survol de la souris */
}

/* Masquer l'icône de dossier jaune de Phoca Gallery */
#phocagallery .ph-si-category {
    display: none !important;
}


/* --- MENU PRINCIPAL (1er niveau horizontal) --- */

/* ==========================================================================
   MODIFICATION DES LIENS DE TOUT LE SITE (VARIABLES CASSIOPEIA)
   ========================================================================== */
:root {
  --link-color: #000000 !important;
  --link-color-hover: #ff0000 !important;
}

/* Application globale brute en secours */
a {
  color: #000000 !important;
}
a:hover {
  color: #ff0000 !important;
}

@media (width>=1200px) {
  h2,
  .h2 {
    font-size:2rem;
   
    color:red;
  }
  .site-grid {
  padding-left: 10%;
  padding-right: 10%;
  box-sizing: border-box;
}

.site-grid > .container-banner.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
  }
/* ==========================================================================
   CIBLAGE DU MODULE DERNIERS ARTICLES (SIDEBAR RIGHT)
   ========================================================================== */
/* Force la couleur du lien ET du span interne visible sur votre capture */
.sidebar-right .mod-articleslatest a,
.sidebar-right .mod-articleslatest a span {
  color: #000000 !important;
}

/* Version au survol */
.sidebar-right .mod-articleslatest a:hover,
.sidebar-right .mod-articleslatest a:hover span {
  color: #ff0000 !important;
}

/* ==========================================================================
   TEST TECHNIQUE : FOND ROUGE DU MODULE D'ARTICLES
   ========================================================================== */
.sidebar-right .card-header,
div.sidebar-right.card h3.card-header,
.sidebar-right .card {
  --cassiopeia-card-header-bg: #ff0000 !important; /* Variable native Cassiopeia */
  background-color: #ff0000 !important;
  
}


/* Unifie la taille de la police, force le TEXTE EN NOIR par défaut */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu > li .nav-item-content,
.container-header .mod-menu > li button {
    font-size: 1rem !important;
    color: #000000 !important; /* Force le noir au repos */
}

/* Prépare l'effet de transition fluide sur le texte */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu > li .nav-item-content,
.container-header .mod-menu > li button {
    transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
    border-bottom: 1px solid transparent !important; /* Ligne invisible par défaut */
}

/* Effet au passage de la souris (TEXTE EN ROUGE au Survol) */
.container-header .mod-menu > li:hover > a,
.container-header .mod-menu > li:hover > span,
.container-header .mod-menu > li:hover .nav-item-content,
.container-header .mod-menu > li:hover button {
    transform: scale(1.05) !important; /* Grossit l'élément de 5% */
    color: #ff0000 !important; /* Force le ROUGE au survol */
    border-bottom-color: #ff0000 !important; /* Devient un surlignage ROUGE (ajusté pour aller avec le texte) */
}



/* --- SOUS-MENUS (Éléments déroulants niveaux 2, 3 et +) --- */

/* Force TOUS les liens de sous-menus EN NOIR au repos */
.container-header .mod-menu li ul a,
.container-header .mod-menu .dropdown-menu a,
.container-header .mod-menu .dropdown-menu .dropdown-item {
    color: #000000 !important;
    background-color: transparent !important;
}

/* Force TOUS les liens de sous-menus EN ROUGE au survol */
.container-header .mod-menu li ul a:hover,
.container-header .mod-menu li ul li:hover > a,
.container-header .mod-menu .dropdown-menu a:hover,
.container-header .mod-menu .dropdown-menu .dropdown-item:hover,
.container-header .mod-menu .dropdown-menu li:hover > a {
    color: #ff0000 !important;
    background-color: transparent !important; /* Évite le fond gris Bootstrap au survol */
}



/* --- Double ligne collée au menu avec espace de 4px en dessous --- */
.container-header {
  border-bottom: 10px solid #ff0000 !important; 
  box-shadow: 0 10px 0 0 #000000 !important; 
  margin-bottom: 20px !important; 
}

/* Le hamburger (mobile)*/
.container-header .navbar-toggler {
  color: #ff0000 !important;
  border-color: #ff0000 !important;
}

.container-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://w3.org' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}


/* Ajoute une bordure et un espacement interne à chaque article du blog */
.blog-featured .blog-item, 
.blog-items .blog-item,
.com-content-featured .blog-item,
.com-content-article,

article.item {
  border: 2px solid #ff0000 !important;
  padding: 15px !important;
  margin-bottom: 20px !important;
  border-radius: 5px !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
  background-color: #f7f5f5 !important;
}

/* taille colonne*/
@media (min-width: 992px) {
  /* On cible spécifiquement la grille interne du mode fluide */
  body.wrapper-fluid .site-grid {
    grid-template-columns: 
      [full-start] minmax(0, 1fr) 
      [main-start] 10%      /* Largeur Sidebar Left (Par défaut 25%) */
      45%                   /* Moitié gauche du Contenu central */
      30%                   /* Moitié droite du Contenu central */
      15%                   /* Largeur Sidebar Right (Par défaut 25%) */
      [main-end]  [full-end] !important;
  } /* <-- PREMIÈRE ACCOLADE : ferme la grille */
} /* <-- DEUXIÈME ACCOLADE CORRIGÉE : ferme proprement le @media */


/* Écrase la couleur de texte par défaut imposée par Bootstrap */
.footer a:not([class]), 
.footer a.nav-link,
.footer .mod-menu a,
footer a {
    color: #fff !important;
}
footer {
  background-image: none !important;
}

/* ==========================================================================
   4. GESTION DU DOUBLE LOGO (CORRIGÉE ET SÉCURISÉE)
   ========================================================================== */

/* --- SUR ORDINATEUR (Écrans de 992px et plus) --- */
@media (min-width: 992px) {
    /* Cache le logo mobile et son lien de manière brute */
    .logo-mobile, 
    img.logo-mobile,
    a:has(.logo-mobile),
    .container-header p a:nth-of-type(2) { 
        display: none !important; 
    }
    
    /* Affiche le logo de bureau */
    .logo-desktop, 
    img.logo-desktop,
    a:has(.logo-desktop),
    .container-header p a:nth-of-type(1) { 
        display: inline-block !important; 
    }
}

/* --- SUR MOBILE ET TABLETTE (Écrans de 991px et moins) --- */
@media (max-width: 991px) {

    /* Cache le logo de bureau et son lien */
    .logo-desktop, 
    img.logo-desktop,
    a:has(.logo-desktop),
    .container-header p a:nth-of-type(1) { 
        display: none !important; 
    }

  @media (max-width: 991.98px) {
    /* 1. Conteneur principal de l'en-tête (Prend toute la largeur) */
    .container-header .container-nav,
    .grid-child.container-nav,
    header .container-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* On garde le burger et logo bloqués sur une ligne */
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        gap: 20px !important;
        position: relative !important; /* Sert de repère pour la largeur du menu ouvert */
    }

    /* 2. LE MENU (Contient le bouton burger) -> À GAUCHE */
    .grid-child.container-nav nav.navbar {
        order: 1 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        position: static !important; /* CRUCIAL : Permet au menu déroulant de s'étendre au-delà de la navbar */
    }

    /* 3. LE LOGO MOBILE (Votre module 111) -> À DROITE */
    .grid-child.container-nav #mod-custom111 {
        order: 2 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. Gestion interne du paragraphe du logo */
    .container-nav p {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 5. Le logo mobile lui-même */
    .logo-mobile,
    img.logo-mobile,
    a:has(.logo-mobile),
    .container-header p a:nth-of-type(2) {
        display: block !important;
        max-width: 200px !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* 6. Le bouton burger à l'intérieur du menu */
    .container-nav .navbar-toggler {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        display: block !important;
    }

    .container-nav .navbar-toggler .icon-menu,
    .container-nav .navbar-toggler-icon {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 24px !important;
        height: 24px !important;
    }

    /* 7. LE MENU DÉROULANT (S'ouvre sur TOUTE la largeur de l'écran) */
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        display: block !important;
        position: absolute !important;
        top: 100% !important; /* Se colle pile sous le bandeau */
        left: 0 !important;
        right: 0 !important; /* Force l'étirement de gauche à droite */
        width: 100% !important; /* Prend 100% de .container-nav */
        z-index: 1050 !important;
        background: #ffffff !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        padding: 10px 15px !important; /* Donne de l'espace pour respirer à l'intérieur */
    }

    /* Force le contenu du menu ouvert à s'adapter à la largeur */
    .navbar-collapse.show .mod-menu,
    .navbar-collapse.show ul,
    .navbar-collapse.show li {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Neutralise le positionnement absolu des sous-menus */
    .navbar-collapse.show .dropdown-menu,
    .navbar-collapse.show .mm-collapse,
    .navbar-collapse.show ul ul {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        transform: none !important;
        margin: 0 !important;
        padding-left: 15px !important;
    } 

    .navbar-collapse.show a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }
}