/*
 * sgseasons — feuille de style utilisateur (enfant de Cassiopeia, Joomla 6)
 * Reprise du template SiteGround pour Joomla 1.5 : thèmes par saison,
 * mode nuit, bords arrondis/carrés, largeur et position réglables.
 *
 * Ce fichier est chargé automatiquement par Cassiopeia (user.css).
 * Les réglages se changent dans js/user.js (constante DEFAULTS).
 */

/* ======================================================================
   1. Réglages communs (pilotés par les attributs data-sg-* de <html>)
   ====================================================================== */
html {
  --sg-radius: 14px;
  --sg-radius-s: 6px;
  --sg-width: 1050px;
  --sg-margin: 0 auto;
  --sg-menu-title-size: .9rem;   /* titre des modules de menu */
  --sg-menu-item-size: .85rem;   /* texte des entrées de menu */
}
html[data-sg-edges="sharp"]  { --sg-radius: 0; --sg-radius-s: 0; }
html[data-sg-width="small"]  { --sg-width: 800px; }
html[data-sg-width="medium"] { --sg-width: 950px; }
html[data-sg-width="fluid"]  { --sg-width: 1050px; }
html[data-sg-pos="left"]     { --sg-margin: 0 auto 0 0; }
html[data-sg-pos="center"]   { --sg-margin: 0 auto; }
html[data-sg-pos="right"]    { --sg-margin: 0 0 0 auto; }

/* ======================================================================
   2. Palettes : une par saison + la nuit (sans JavaScript : été)
   ====================================================================== */
html[data-sg-theme="general"] {
  --sg-page: #f0f0f0;
  --sg-box: #ffffff;
  --sg-text: #444444;
  --sg-muted: #666666;
  --sg-heading: #727272;
  --sg-link: #727272;
  --sg-link-rgb: 114,114,114;
  --sg-hover: #b55f00;
  --sg-hover-rgb: 181,95,0;
  --sg-bar: rgba(255, 255, 255, .80);
  --sg-border: #dcdcdc;
  --sg-shadow: 0 1px 6px rgba(0, 0, 0, .13);
  --sg-on-accent: #ffffff;
  --sg-band: url("../images/general/general_background.jpg");
  --sg-band-pos: top right;
  --sg-ground: url("../images/general/bg.png");
  --sg-star: url("../images/general/star.gif");
  color-scheme: light;
}

html[data-sg-theme="springtime"] {
  --sg-page: #f0f0f0;
  --sg-box: #ffffff;
  --sg-text: #444444;
  --sg-muted: #666666;
  --sg-heading: #925da6;
  --sg-link: #925da6;
  --sg-link-rgb: 146,93,166;
  --sg-hover: #5a7c18;
  --sg-hover-rgb: 90,124,24;
  --sg-bar: rgba(255, 255, 255, .80);
  --sg-border: #dcdcdc;
  --sg-shadow: 0 1px 6px rgba(0, 0, 0, .13);
  --sg-on-accent: #ffffff;
  --sg-band: url("../images/springtime/springtime_background.jpg");
  --sg-band-pos: top right;
  --sg-ground: url("../images/springtime/bg.png");
  --sg-star: url("../images/springtime/star.gif");
  color-scheme: light;
}

html,
html[data-sg-theme="summer"] {
  --sg-page: #f0f8e4;
  --sg-box: #ffffff;
  --sg-text: #444444;
  --sg-muted: #666666;
  --sg-heading: #5c801b;
  --sg-link: #5c801b;
  --sg-link-rgb: 92,128,27;
  --sg-hover: #b55f00;
  --sg-hover-rgb: 181,95,0;
  --sg-bar: rgba(255, 255, 255, .80);
  --sg-border: #dcdcdc;
  --sg-shadow: 0 1px 6px rgba(0, 0, 0, .13);
  --sg-on-accent: #ffffff;
  --sg-band: url("../images/summer/summer_background.jpg");
  --sg-band-pos: top right;
  --sg-ground: url("../images/summer/bg.png");
  --sg-star: url("../images/summer/star.gif");
  color-scheme: light;
}

html[data-sg-theme="autumn"] {
  --sg-page: #f0f0f0;
  --sg-box: #ffffff;
  --sg-text: #444444;
  --sg-muted: #666666;
  --sg-heading: #b9592a;
  --sg-link: #b9592a;
  --sg-link-rgb: 185,89,42;
  --sg-hover: #b55f00;
  --sg-hover-rgb: 181,95,0;
  --sg-bar: rgba(255, 255, 255, .80);
  --sg-border: #dcdcdc;
  --sg-shadow: 0 1px 6px rgba(0, 0, 0, .13);
  --sg-on-accent: #ffffff;
  --sg-band: url("../images/autumn/autumn_background.jpg");
  --sg-band-pos: top right;
  --sg-ground: url("../images/autumn/bg.png");
  --sg-star: url("../images/autumn/star.gif");
  color-scheme: light;
}

html[data-sg-theme="winter"] {
  --sg-page: #f0f0f0;
  --sg-box: #ffffff;
  --sg-text: #444444;
  --sg-muted: #666666;
  --sg-heading: #135cae;
  --sg-link: #135cae;
  --sg-link-rgb: 19,92,174;
  --sg-hover: #b55f00;
  --sg-hover-rgb: 181,95,0;
  --sg-bar: rgba(255, 255, 255, .80);
  --sg-border: #dcdcdc;
  --sg-shadow: 0 1px 6px rgba(0, 0, 0, .13);
  --sg-on-accent: #ffffff;
  --sg-band: url("../images/winter/winter_background.jpg");
  --sg-band-pos: top right;
  --sg-ground: url("../images/winter/bg.png");
  --sg-star: url("../images/winter/star.gif");
  color-scheme: light;
}

html[data-sg-theme="night"] {
  --sg-page: #000000;
  --sg-box: #0b0b0f;
  --sg-text: #c9cbd3;
  --sg-muted: #9a9ca6;
  --sg-heading: #7f8bb8;
  --sg-link: #7f8bb8;
  --sg-link-rgb: 127,139,184;
  --sg-hover: #c4c5c8;
  --sg-hover-rgb: 196,197,200;
  --sg-bar: rgba(255, 255, 255, .07);
  --sg-border: #2a2a31;
  --sg-shadow: 0 1px 6px rgba(0, 0, 0, .7);
  --sg-on-accent: #0b0b14;
  --sg-band: url("../images/night/night_background.jpg");
  --sg-band-pos: top center;
  --sg-ground: none;
  --sg-star: url("../images/night/star.gif");
  color-scheme: dark;
}


/* Variables propres à Cassiopeia et à Bootstrap, pour que les composants
   de Joomla suivent le thème sans règles supplémentaires. */
html {
  --body-bg: var(--sg-page);
  --body-color: var(--sg-text);
  --link-color: var(--sg-link);
  --link-hover-color: var(--sg-hover);
  --cassiopeia-color-primary: var(--sg-link);
  --cassiopeia-color-link: var(--sg-link);
  --cassiopeia-color-hover: var(--sg-hover);
  --template-link-color: var(--sg-link);
  --template-special-color: var(--sg-heading);
  --bs-link-color: var(--sg-link);
  --bs-link-color-rgb: var(--sg-link-rgb);
  --bs-link-hover-color: var(--sg-hover);
  --bs-link-hover-color-rgb: var(--sg-hover-rgb);
  --bs-border-radius: var(--sg-radius-s);
}
html[data-sg-theme="night"] {
  --bs-body-bg: var(--sg-box);
  --bs-body-color: var(--sg-text);
  --bs-border-color: var(--sg-border);
  --bs-secondary-color: var(--sg-muted);
  --bs-emphasis-color: #ffffff;
  --bs-card-bg: #111116;
  --bs-tertiary-bg: #111116;
}

/* ======================================================================
   3. Fond de page : bandeau saisonnier en haut, dégradé fixe en bas
   ====================================================================== */
html body.site {
  background-color: var(--sg-page);
  background-image: var(--sg-band), var(--sg-ground);
  background-position: var(--sg-band-pos), left bottom;
  background-repeat: repeat-x, repeat-x;
  background-attachment: scroll, fixed;
  color: var(--sg-text);
}

/* Largeur et position du site (petite / moyenne / fluide, gauche / centre / droite) */
html body.site .container-header,
html body.site .site-grid,
html body.site .container-footer {
  max-width: var(--sg-width);
  margin: var(--sg-margin);
}

/* ======================================================================
   4. En-tête : titre sur le bandeau, menu en barre arrondie
   ====================================================================== */
html body.site .container-header {
  background: transparent none;
  box-shadow: none;
  color: var(--sg-text);
  min-height: 9.5rem;
  margin-bottom: 1rem;
}
html body.site .container-header .navbar-brand a,
html body.site .container-header .brand-logo,
html body.site .container-header .site-title {
  display: none;
}
html body.site .container-header .site-description {
  color: var(--sg-muted);
}

html body.site .container-nav {
  background: var(--sg-bar);
  border-radius: var(--sg-radius);
  margin-top: auto;
  padding: .2rem .6rem;
}
html body.site .container-nav a,
html body.site .container-nav .mod-menu__heading,
html body.site .container-header .navbar-toggler {
  color: var(--sg-link);
  font-weight: 700;
  text-decoration: none;
}
html body.site .container-nav a:hover,
html body.site .container-nav a:focus-visible,
html body.site .container-nav li.active > a,
html body.site .container-nav li.current > a {
  color: var(--sg-hover);
}
html body.site .container-nav ul ul {
  background: var(--sg-box);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-s);
  box-shadow: var(--sg-shadow);
}
html body.site .container-header .container-search,
html body.site .container-header .header-item {
  color: var(--sg-text);
}

/* ======================================================================
   5. Contenu : cartes blanches (ou noires la nuit) sur le fond de saison
   ====================================================================== */
html body.site .container-banner,
html body.site .container-top-a,
html body.site .container-top-b,
html body.site .container-component,
html body.site .container-sidebar-left,
html body.site .container-sidebar-right,
html body.site .container-bottom-a,
html body.site .container-bottom-b {
  background: var(--sg-box);
  color: var(--sg-text);
  border-radius: var(--sg-radius);
  box-shadow: var(--sg-shadow);
  padding: 1rem 1.25rem;
}
html body.site .container-component main {
  background: transparent;
}
html body.site h1,
html body.site h2,
html body.site h3,
html body.site .page-header h1,
html body.site .page-header h2 {
  color: var(--sg-heading);
}
html body.site .container-component a:not(.btn):not(.page-link):not(.nav-link):not(.dropdown-item):not(.list-group-item),
html body.site .container-sidebar-left a:not(.btn),
html body.site .container-sidebar-right a:not(.btn) {
  color: var(--sg-link);
}
html body.site .container-component a:not(.btn):hover,
html body.site .container-sidebar-left a:not(.btn):hover,
html body.site .container-sidebar-right a:not(.btn):hover {
  color: var(--sg-hover);
}
html body.site .breadcrumb,
html body.site .mod-breadcrumbs {
  color: var(--sg-muted);
}
html body.site hr,
html body.site .page-header {
  border-color: var(--sg-border);
}

/* Boutons, champs, cartes et messages */
html body.site .btn-primary {
  --bs-btn-bg: var(--sg-link);
  --bs-btn-border-color: var(--sg-link);
  --bs-btn-color: var(--sg-on-accent);
  --bs-btn-hover-bg: var(--sg-hover);
  --bs-btn-hover-border-color: var(--sg-hover);
  --bs-btn-hover-color: var(--sg-on-accent);
  --bs-btn-active-bg: var(--sg-hover);
  --bs-btn-active-border-color: var(--sg-hover);
  --bs-btn-active-color: var(--sg-on-accent);
}
html body.site .btn,
html body.site .form-control,
html body.site .form-select,
html body.site .card,
html body.site .alert,
html body.site .pagination .page-link {
  border-radius: var(--sg-radius-s);
}
html[data-sg-theme="night"] body.site .form-control,
html[data-sg-theme="night"] body.site .form-select,
html[data-sg-theme="night"] body.site .card,
html[data-sg-theme="night"] body.site .list-group-item,
html[data-sg-theme="night"] body.site .table {
  background-color: #111116;
  color: var(--sg-text);
  border-color: var(--sg-border);
}
html[data-sg-theme="night"] body.site .table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--sg-text);
  border-color: var(--sg-border);
}

/* ======================================================================
   5b. Menus latéraux et titres de modules (comme l'ancien template :
       petit titre en gras, entrées avec une étoile, jamais à la ligne)
   ====================================================================== */
html body.site .container-sidebar-left,
html body.site .container-sidebar-right {
  padding: .75rem .7rem;
  min-width: 0;
}
html body.site .container-sidebar-left .card,
html body.site .container-sidebar-right .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
}
html body.site .container-sidebar-left .card + .card,
html body.site .container-sidebar-right .card + .card {
  margin-top: .9rem;
}
html body.site .container-sidebar-left .card-body,
html body.site .container-sidebar-right .card-body {
  padding: 0;
}
html body.site .container-sidebar-left .card-header,
html body.site .container-sidebar-right .card-header,
html body.site .container-sidebar-left h3,
html body.site .container-sidebar-right h3 {
  margin: 0 0 .35rem;
  padding: 0 0 .15rem;
  background: transparent;
  border: 0;
  color: var(--sg-heading);
  font-family: Tahoma, Helvetica, Arial, sans-serif;
  font-size: var(--sg-menu-title-size);
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}
html body.site .container-sidebar-left .mod-menu,
html body.site .container-sidebar-right .mod-menu {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
html body.site .container-sidebar-left .mod-menu li,
html body.site .container-sidebar-right .mod-menu li {
  display: block;
  margin: .3rem 0;
  padding: 0 0 0 20px;
  background: var(--sg-star) no-repeat 0 .3em;
  font-size: var(--sg-menu-item-size);
  line-height: 1.4;
}
html body.site .container-sidebar-left .mod-menu a,
html body.site .container-sidebar-right .mod-menu a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  padding: 0;
  font-size: inherit;
  font-weight: 400;
  text-decoration: none;
}
html body.site .container-sidebar-left .mod-menu a:hover,
html body.site .container-sidebar-right .mod-menu a:hover {
  text-decoration: underline;
}
html body.site .container-sidebar-left .mod-menu li.active > a,
html body.site .container-sidebar-left .mod-menu li.current > a,
html body.site .container-sidebar-right .mod-menu li.active > a,
html body.site .container-sidebar-right .mod-menu li.current > a {
  color: var(--sg-hover);
  font-weight: 700;
}

/* Aucun texte de menu ne passe à la ligne (barre du haut comprise) */
html body.site .mod-menu a,
html body.site .mod-menu .mod-menu__heading,
html body.site .container-nav a {
  white-space: nowrap;
}
html body.site .container-nav a,
html body.site .container-nav .mod-menu__heading {
  font-size: .9rem;
}

/* ======================================================================
   6. Pied de page
   ====================================================================== */
html body.site .container-footer {
  background: var(--sg-bar);
  color: var(--sg-muted);
  border-radius: var(--sg-radius);
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}
html body.site .container-footer a {
  color: var(--sg-link);
}

/* ======================================================================
   7. Panneau « Apparence » (ajouté par user.js)
   ====================================================================== */
.sg-cp {
  position: fixed;
  top: 0;
  right: 12px;
  z-index: 1050;
  font: 13px/1.4 Tahoma, Helvetica, Arial, sans-serif;
}
.sg-cp-toggle {
  display: block;
  margin-left: auto;
  padding: .35rem .9rem;
  border: 1px solid var(--sg-border);
  border-top: 0;
  border-radius: 0 0 var(--sg-radius-s) var(--sg-radius-s);
  background: var(--sg-box);
  color: var(--sg-link);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sg-cp-panel {
  margin-top: 2px;
  padding: .75rem .9rem .6rem;
  min-width: 15rem;
  background: var(--sg-box);
  color: var(--sg-text);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-s);
  box-shadow: var(--sg-shadow);
}
.sg-cp-panel[hidden] { display: none; }
.sg-cp-group { margin: 0 0 .6rem; padding: 0; border: 0; }
.sg-cp-group legend {
  float: none;
  width: auto;
  margin: 0 0 .2rem;
  padding: 0;
  font-size: 1em;
  font-weight: 700;
  color: var(--sg-heading);
}
.sg-cp-btn {
  margin: 0 .25rem .25rem 0;
  padding: .15rem .55rem;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-s);
  background: transparent;
  color: var(--sg-text);
  font: inherit;
  cursor: pointer;
}
.sg-cp-btn:hover { border-color: var(--sg-hover); color: var(--sg-hover); }
.sg-cp-btn[aria-pressed="true"] {
  background: var(--sg-link);
  border-color: var(--sg-link);
  color: var(--sg-on-accent);
}
.sg-cp-reset {
  margin: .1rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sg-link);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.sg-cp-toggle:focus-visible,
.sg-cp-btn:focus-visible,
.sg-cp-reset:focus-visible {
  outline: 2px solid var(--sg-hover);
  outline-offset: 2px;
}

/* ======================================================================
   8. Petits écrans
   ====================================================================== */
@media (max-width: 767.98px) {
  html body.site .container-header { min-height: 7rem; }
  html body.site .container-banner,
  html body.site .container-top-a,
  html body.site .container-top-b,
  html body.site .container-component,
  html body.site .container-sidebar-left,
  html body.site .container-sidebar-right,
  html body.site .container-bottom-a,
  html body.site .container-bottom-b { padding: .75rem .9rem; }
  .sg-cp { right: 4px; }
}