/* =========================================================
   L'OUVREUSE — Portage Beez5 (J3) -> Cassiopeia (J4)
   Objectif : retrouver fond gris + cadre ivoire arrondi + bordeaux
   ========================================================= */

/* Fond général (Beez5 body background) */
body,
body.site {
  background: #BCB7B7;
  color: #333;
}

/* Le "cadre #all" de Beez5 => on l'applique au wrapper principal */
.site-grid {
  max-width: 1030px;                 /* proche de tes anciens max-width */
  margin: 10px auto;
  border: 1px solid #80112D;
  border-radius: 45px;
  background: #FFFEF1;
  overflow: hidden;                   /* pour respecter l'arrondi */
  text-align: justify;
  font-family: Arial, Verdana, sans-serif;
  font-size: 0.95rem;                 /* équivalent moderne de ton 76% */
}

/* Header ivoire + arrondi seulement en haut (Beez5 #header) */
.container-header {
  background: #FFFEF1;
  box-shadow: none;
  border-bottom: 0;
}

/* Le menu du haut (Beez5 #header ul.menu...) */
.container-header .navbar,
.container-header .navbar-expand-lg {
  background: transparent !important;
  box-shadow: none !important;
}

.container-header .navbar-nav .nav-link {
  color: #80112D;
  background: transparent;
  border: 0;
  padding: 15px 15px 10px 15px;
  font-size: 12px;
  text-transform: uppercase;
}

.container-header .navbar-nav .nav-link:hover,
.container-header .navbar-nav .nav-link:focus {
  color: #FFFEF1;
  background: #80112D;
  text-decoration: none;
}

/* Active item comme avant */
.container-header .navbar-nav .active > .nav-link,
.container-header .navbar-nav .nav-item.active > .nav-link {
  color: #FFFEF1 !important;
  background: #80112D !important;
}

/* Liens du site (Beez5 a:link / visited / hover) */
a:link,
a:visited {
  color: #80112D;
  text-decoration: none;
}
a:hover,
a:focus,
a:active {
  color: #80112D;
  text-decoration: underline;
}

/* Zone principale (Beez5 #contentarea / #main) */
.container-component,
.site-grid .container-component {
  background: #FFFEF1;
}

/* Titres d’articles (Beez5 #main h2 + hover inversé) */
.com-content-category-blog__item-title a,
.com-content-featured__item-title a,
.page-header h1,
h2 a {
  color: #80112D;
}

.com-content-category-blog__item-title a:hover,
.com-content-featured__item-title a:hover,
h2 a:hover {
  color: #FFFEF1 !important;
  background: #80112D;
  text-decoration: none !important;
}

/* Read more / boutons façon Beez5 */
.readmore a,
a.readmore,
.btn,
.btn-primary {
  border: 1px solid #DDDDDD;
  background: #FFFEF1;
  color: #444;
}

.readmore a:hover,
a.readmore:hover,
.btn:hover {
  background: #555;
  color: #FFFEF1;
}

/* Sidebars : neutraliser les “cards” modernes */
.sidebar-left .card,
.sidebar-right .card,
.sidebar-left .moduletable,
.sidebar-right .moduletable,
.card {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Footer (Beez5 #footer / #footer-inner + bordeaux) */
.container-footer {
  background: transparent;
  border-top: 0;
}

.container-footer footer {
  background: #80112D;
  color: #FFFEF1;
  border-radius: 0 0 45px 45px;
  margin: 0 auto;
  padding: 14px 18px;
}

.container-footer a:link,
.container-footer a:visited {
  color: #FFFEF1;
}
.container-footer a:hover,
.container-footer a:focus {
  color: #FFFEF1;
  text-decoration: underline;
}

/* 2) Faire rentrer le contenu (site-grid) dans le même cadre */
.site-grid {
  max-width: 1100px;
  margin: 0 auto 10px;    /* collé sous le header */
  border: 1px solid #80112D;
  border-top: 0;          /* pour coller au header sans double bordure */
  border-radius: 0 0 45px 45px;
  background: #FFFEF1;
  overflow: hidden;
}

/* 1) Header = moitié haute du cadre */
header.container-header.full-width {
  max-width: 1100px;
  margin: 10px auto 0;
  background: #FFFEF1;
  border: 1px solid #80112D;
  border-bottom: 0;
  border-radius: 45px 45px 0 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* 2) Contenu = moitié basse du cadre */
.site-grid {
  max-width: 1100px;
  margin: 0 auto 10px;
  background: #FFFEF1;
  border: 1px solid #80112D;
  border-top: 0;
  border-radius: 0 0 45px 45px;
  overflow: hidden;
  box-sizing: border-box;

  /* le truc qui enlève la fente */
  position: relative;
  top: -1px; /* recouvre 1px du header */
}

/* 3) On supprime le padding interne qui peut créer une “marche” visuelle */
header.container-header.full-width .grid-child {
  padding: 0 !important;
  margin: 0 !important;
}
header.container-header.full-width .navbar-brand {
  margin: 0 !important;
  padding: 0 !important;
}
header.container-header.full-width img {
  display: block;
}

/* Menu horizontal fin, dans le cadre */
.container-header .navbar {
  justify-content: center;
  padding: 10px 0 0;
}

.container-header .navbar-nav .nav-link {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .6px;
  color: #80112D;
  padding: 12px 14px;
}

.container-header .navbar-nav .nav-link:hover {
  background: #80112D;
  color: #FFFEF1;
  text-decoration: none;
}

/* Métadonnées articles : plus propres */
.article-info {
  font-size: 12px;
  color: #6b6b6b;
  margin: 6px 0 10px;
}

.article-info dd {
  margin: 0 0 3px 0;
}

.article-info .icon-calendar,
.article-info .icon-user,
.article-info .icon-folder {
  opacity: .6;
  margin-right: 6px;
}

/* Si tu veux carrément virer les icônes (plus élégant) décommente :
.article-info .icon-calendar,
.article-info .icon-user,
.article-info .icon-folder { display:none; }
*/

/* === 2) Cadre unique : on l'applique au bloc principal === */
.site-grid {
  max-width: 1100px;
  margin: 10px auto;
  background: #FFFEF1;
  border: 1px solid #80112D;
  border-radius: 45px;
  overflow: hidden;
  box-sizing: border-box;
}

/* === 3) Le menu (top) dans le cadre === */
.position-topbar,
.position-menu {
  background: #FFFEF1;
  padding: 10px 18px 0;
}

.position-topbar .navbar,
.position-menu .navbar {
  justify-content: center;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.position-topbar .navbar-nav .nav-link,
.position-menu .navbar-nav .nav-link {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .6px;
  color: #80112D;
  padding: 12px 14px;
}

.position-topbar .navbar-nav .nav-link:hover,
.position-menu .navbar-nav .nav-link:hover {
  background: #80112D;
  color: #FFFEF1;
  text-decoration: none;
}

/* === 4) La bannière (juste sous le menu) dans le cadre === */
.position-banner,
.position-top-a {
  background: #FFFEF1;
  padding: 0 18px 10px;
}

.position-banner img,
.position-top-a img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px; /* léger arrondi interne comme l'ancien */
}

/* === 5) Contenu principal : aération === */
.container-component {
  padding: 18px 22px 28px;
}

header.container-header.full-width,
.container-header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-grid {
  max-width: 1100px;
  margin: 10px auto;
  background: #FFFEF1;
  border: 1px solid #80112D;
  border-radius: 45px;
  overflow: hidden;
  box-sizing: border-box;
}

.site-grid .position-topbar,
.site-grid .position-menu,
.site-grid .position-banner,
.site-grid .position-top-a {
  width: 100%;
  box-sizing: border-box;
}

.site-grid .position-topbar,
.site-grid .position-menu {
  background: #FFFEF1;
  padding: 10px 0 0;
}

.site-grid .position-topbar .navbar,
.site-grid .position-menu .navbar {
  justify-content: center;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.site-grid .position-topbar .navbar-nav .nav-link,
.site-grid .position-menu .navbar-nav .nav-link {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .6px;
  color: #80112D;
  padding: 12px 14px;
}

.site-grid .position-topbar .navbar-nav .nav-link:hover,
.site-grid .position-menu .navbar-nav .nav-link:hover {
  background: #80112D;
  color: #FFFEF1;
  text-decoration: none;
}

.site-grid .position-banner,
.site-grid .position-top-a {
  background: #FFFEF1;
  padding: 0;
}

.site-grid .position-banner img,
.site-grid .position-top-a img {
  display: block;
  width: 100%;
  height: auto;
}

.site-grid .container-component {
  padding: 18px 22px 28px;
}

/* Bannière: supprimer les paddings/marges du conteneur Cassiopeia */
.site-grid .container-banner.full-width {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Le module custom et son <p> ne doivent pas ajouter de marge */
#mod-custom163,
#mod-custom163 p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Image plein cadre */
#mod-custom163 img {
  display: block;
  width: 100%;
  height: auto;
}

/* === FORCER LE MENU HORIZONTAL === */

/* Le <ul> du menu doit être en ligne */
.site-grid .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
}

/* Les <li> ne doivent PAS être en bloc vertical */
.site-grid .navbar-nav > li {
  display: inline-flex !important;
  float: none !important;
}

/* Sécurité : liens bien alignés */
.site-grid .navbar-nav .nav-link {
  display: block;
  white-space: nowrap;
}

/* Cas où le menu n'est PAS une vraie navbar */
.site-grid ul.menu {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  padding-left: 0;
}

.site-grid ul.menu > li {
  list-style: none;
}

/* === MENU HORIZONTAL (Joomla/Cassiopeia - rendu classique) === */

/* 1) Cibles possibles du <ul> du menu */
.site-grid ul.menu,
.site-grid .mod-menu ul,
.site-grid .mod-menu__nav,
.site-grid nav ul,
.site-grid ul.nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px;                 /* espace entre items */
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* 2) Les <li> */
.site-grid ul.menu > li,
.site-grid .mod-menu ul > li,
.site-grid .mod-menu__nav > li,
.site-grid nav ul > li,
.site-grid ul.nav > li {
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Les liens */
.site-grid ul.menu > li > a,
.site-grid .mod-menu ul > li > a,
.site-grid .mod-menu__nav > li > a,
.site-grid nav ul > li > a,
.site-grid ul.nav > li > a {
  display: block !important;
  white-space: nowrap !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .6px;
  color: #80112D;
  padding: 12px 14px;
  text-decoration: none;
}

/* 4) Hover façon Beez5 */
.site-grid ul.menu > li > a:hover,
.site-grid .mod-menu ul > li > a:hover,
.site-grid .mod-menu__nav > li > a:hover,
.site-grid nav ul > li > a:hover,
.site-grid ul.nav > li > a:hover {
  background: #80112D;
  color: #FFFEF1;
  text-decoration: none;
}

/* 5) IMPORTANT : si Cassiopeia force un mode vertical via classes Bootstrap */
.site-grid .nav,
.site-grid .navbar-nav {
  flex-direction: row !important;
}

/* === FOOTER DANS LE CADRE (visuel) === */

/* 1) Le cadre principal ne doit plus avoir son bas arrondi ni sa bordure basse */
.site-grid {
  border-bottom: 0 !important;
  border-radius: 45px 45px 0 0 !important;
  margin-bottom: 0 !important;
}

/* 2) Le footer prend le relais: même largeur, même bordure, arrondi en bas */
.container-footer {
  max-width: 1100px !important;
  margin: 0 auto 10px !important;
  border: 1px solid #80112D !important;
  border-top: 0 !important;
  border-radius: 0 0 45px 45px !important;
  overflow: hidden !important;
  background: #FFFEF1 !important;
  box-sizing: border-box !important;
}

/* 3) Ton footer bordeaux reste dedans, plein large */
.container-footer footer {
  margin: 0 !important;
  border-radius: 0 !important; /* l'arrondi est porté par .container-footer */
}

/* === FOOTER (zone Cassiopeia) raccordé au cadre === */

/* Le cadre principal ne doit plus avoir de bas arrondi ni de bordure basse */
.site-grid {
  border-bottom: 0 !important;
  border-radius: 45px 45px 0 0 !important;
  margin-bottom: 0 !important;
}

/* La zone footer devient la "suite" du cadre */
.site-grid + .container-footer,
.container-footer {
  max-width: 1100px !important;            /* même largeur que ton cadre */
  margin: 0 auto 10px !important;
  border: 1px solid #80112D !important;
  border-top: 0 !important;                /* pas de double bordure */
  border-radius: 0 0 45px 45px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: #FFFEF1 !important;
}

/* Ton module personnalisé dans le footer : pas de marge parasite */
.container-footer .mod-custom,
.container-footer .custom,
.container-footer p {
  margin: 0 !important;
}

/* Si ton module contient une image ou un bloc, plein cadre */
.container-footer img {
  display: block;
  max-width: 100%;
  height: auto;
}

.container-footer .mod-custom.custom {
  background: #80112D;
  color: #FFFEF1;
  padding: 14px 18px;
}

.container-footer .mod-custom.custom a {
  color: #FFFEF1;
}

/* === FOOTER DANS LE CADRE (cible exacte) === */

/* Le cadre principal s'arrête sans bas arrondi */
.site-grid{
  border-bottom: 0 !important;
  border-radius: 45px 45px 0 0 !important;
  margin-bottom: 0 !important;
}

/* Le footer reprend le cadre : même largeur + bordure + arrondi bas */
footer.container-footer.footer.full-width{
  max-width: 1100px !important;
  margin: 0 auto 10px !important;
  border: 1px solid #80112D !important;
  border-top: 0 !important;
  border-radius: 0 0 45px 45px !important;
  overflow: hidden !important;
  background: #FFFEF1 !important;
  box-sizing: border-box !important;

  /* recouvre un éventuel 1px de "fente" */
  position: relative;
  top: -1px;
}

/* Nettoyage des marges parasites du module */
#mod-custom135,
#mod-custom135 p{
  margin: 0 !important;
  padding: 0 !important;
}

/* On remplace le <center> (moche) par un centrage propre */
#mod-custom135 center{
  display: block;
  text-align: center;
  padding: 14px 18px;
  background: #80112D;
  color: #FFFEF1;
}

/* Liens en blanc dans le footer */
#mod-custom135 center a{
  color: #FFFEF1;
  text-decoration: none;
}
#mod-custom135 center a:hover{
  text-decoration: underline;
}

/* ====== RACCORD CADRE (site-grid) -> FOOTER (Cassiopeia) ====== */

/* 1) La fin du contenu ne doit pas créer de marge */
.site-grid {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  border-radius: 45px 45px 0 0 !important;
}

/* 2) Pas d'espace gris entre le cadre et le footer */
footer.container-footer.footer.full-width {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3) Le "cadre bas" est porté par le footer (même largeur, même bordure) */
footer.container-footer.footer.full-width{
  max-width: 1100px !important;
  margin: 0 auto 10px !important;
  background: #FFFEF1 !important;
  border: 1px solid #80112D !important;
  border-top: 0 !important;
  border-radius: 0 0 45px 45px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  /* soudure 1px */
  position: relative;
  top: -1px;
}

/* 4) IMPORTANT : Cassiopeia met un wrapper interne qui "rétrécit" */
footer.container-footer.footer.full-width > .grid-child{
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 5) Ton module doit occuper toute la largeur du footer */
#mod-custom135{
  margin: 0 !important;
  padding: 0 !important;
}

/* 6) Ton bloc bordeaux plein cadre (pas au milieu) */
#mod-custom135 center{
  display: block;
  text-align: center;
  padding: 14px 18px;
  margin: 0 !important;
  background: #80112D;
  color: #FFFEF1;
  width: 100%;
  box-sizing: border-box;
}

/* 7) Liens blancs */
#mod-custom135 center a{
  color: #FFFEF1;
  text-decoration: none;
}
#mod-custom135 center a:hover{
  text-decoration: underline;
}

/* 8) Supprime le <p> vide */
#mod-custom135 p{ display:none !important; }

/* On ne veut plus du footer natif Cassiopeia (hors cadre) */
footer.container-footer.footer.full-width {
  display: none !important;
}

/* === CADRE PRINCIPAL : arrondi BAS restauré === */
.site-grid {
  border-radius: 45px;
  overflow: hidden; /* IMPORTANT pour que le footer épouse l'arrondi */
}

/* === FOOTER BORDEAUX : arrondi bas interne === */
#mod-custom135 center {
  border-radius: 15px 15px 15px 15px;
}

/* ===== VERROUILLAGE FINAL CADRE PRINCIPAL + FOOTER (à garder en dernier) ===== */

/* Cadre principal : arrondi complet + bordure complète */
.site-grid{
  border: 1px solid #80112D !important;
  border-radius: 45px !important;
  overflow: hidden !important;
  margin: 10px auto !important;
  max-width: 1100px !important;
  background: #FFFEF1 !important;
}

/* IMPORTANT : on annule explicitement les anciens "border-bottom:0" */
.site-grid{
  border-bottom: 1px solid #80112D !important;
}

/* Footer bordeaux (module déplacé dans le bas du cadre) */
#mod-custom135 center{
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #80112D !important;
  color: #FFFEF1 !important;
  padding: 14px 18px !important;

  /* arrondi bas du cartouche bordeaux */
  border-radius: 35px 35px 35px 35px !important;
}

body {
    font-family: 'Source Sans 3', Arial, sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.7;
    color: #555; /* joli gris doux */
    background-color: #fdfdfd;
}
a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #000;
    text-decoration: underline;
}