/* === RÉDUCTION À ~850px === */
@supports (display: grid) {
    .site-grid {
        grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 13.3125rem)) [main-end] minmax(0, 1fr) [full-end] !important;
    }
}

.grid-child {
    max-width: 850px !important;
}

/* Personnalisation du bandeau */
.container-header {
background: #ff4400;
background: linear-gradient(90deg, rgba(223, 66, 32, 1) 0%, rgba(252, 165, 25, 1) 50%, rgba(237, 157, 83, 1) 100%);
/* code généré par https://cssgradient.io    rgba(255, 68, 0, 1)    */
}

/* TITRE : rendu plus stylé et harmonieux */
.container-header .brand-logo span {
  display: inline-block;
  font-weight: 900;
  font-size: 2rem; /* Ajustable selon ton gabarit Joomla */
  letter-spacing: 2px;
   /* font-size: clamp(1.1rem, 5vw, 2rem); fluide : 1.1rem sur mobile → 2rem sur desktop */
  letter-spacing: clamp(0px, 0.3vw, 2px); /* letter-spacing réduit sur mobile */
  text-transform: uppercase;
  white-space: normal;    /* autorise le retour à la ligne */
  word-break: break-word; /* coupe si un mot seul dépasse la largeur */  
  /*color: #fff; */
  color: #3D0A00;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 0 12px rgba(255, 255, 255, 0.4),
    0 0 24px rgba(244, 98, 108, 0.7);
  position: relative;
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.container-header .site-description {
  font-weight: 900;
  font-size: 2rem; /* Ajustable selon ton gabarit Joomla */
  letter-spacing: 2px;
   /* font-size: clamp(1.1rem, 5vw, 2rem); fluide : 1.1rem sur mobile → 2rem sur desktop */
  letter-spacing: clamp(0px, 0.3vw, 2px); /* letter-spacing réduit sur mobile */
  text-transform: uppercase;
  white-space: normal;    /* autorise le retour à la ligne */
  word-break: break-word; /* coupe si un mot seul dépasse la largeur */  
  /*color: #fff; */
  color: #3D0A00;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 0 12px rgba(255, 255, 255, 0.4),
    0 0 24px rgba(244, 98, 108, 0.7);
  position: relative;
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

/* Permettre au lien parent de rétrécir et laisser le texte se wrapper */
.container-header .navbar-brand {
  flex-shrink: 1;
  min-width: 0;
}

/* Effet subtil au survol : léger zoom et halo rosé */
.container-header .brand-logo span:hover {
  transform: scale(1.05);
  text-shadow:
    0 3px 6px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(255, 255, 255, 0.4),
    0 0 20px rgba(251, 200, 203, 0.8);
}

/* Sous-titre du site 
.container-header .site-description {
  color: #3D0A00;
  font-weight: bolder;
} */

/* Liens du menu principal dans le bandeau */
.container-header .mod-menu a,
.container-header .navbar-nav .nav-link {
  color: #3D0A00 !important;
  font-weight: bolder !important;
}

/* Aligne le premier item de menu sur le titre et le contenu de page
   en supprimant le padding-left interne de chaque item niveau 1 */
.container-header .mod-menu .metismenu-item.level-1 {
  padding-left: 0;
}

/* Fond de page en dégradé de gris */
body.site {
    background: url("/images/degrade.jpg") repeat fixed center top rgba(0, 0, 0, 0);
}

:root {
    --bs-gutter-x: 1.5rem;
}

/* Personnalisation footer */
.container-footer {
background: #ff4400;
background: linear-gradient(90deg, rgba(223, 66, 32, 1) 0%, rgba(252, 165, 25, 1) 50%, rgba(237, 157, 83, 1) 100%);
/* code généré par https://cssgradient.io    rgba(255, 68, 0, 1)    */
}