/*
 * Cassiopeia / Joomla 4 – première adaptation du thème Beez3 « personal »
 * pour le site de Didier Theilliol.
 * Sources : personal.css, position.css, index.php (Beez3 Joomla 3).
 * Ne remplace pas les CSS natifs de Cassiopeia.
 * À installer comme media/templates/site/cassiopeia/css/user.css
 * uniquement si ce dernier n'existe pas ; sinon y ajouter ces règles.
 */

:root {
  --cassiopeia-color-primary: #0c1a3e;
  --cassiopeia-color-link: #095197;
  --cassiopeia-color-hover: #095197;
}

/* Fond gris et bloc central blanc de 1050 px comme Beez3. */
body.site {
  background: #eeeeee;
  color: #444444;
}

body.site .site-grid {
  box-sizing: border-box;
  max-width: 1050px;
  margin-inline: auto;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0 18px 12px -12px #555555;
}

/* Grand bandeau bleu nuit Beez3 « personal ». */
.container-header {
  box-sizing: border-box;
  max-width: 1050px;
  min-height: 250px;
  margin-inline: auto;
  background-color: #0c1a3e;
  background-image: none;
  color: #ffffff;
}

/* Image historique Beez3, à copier sous
 * media/templates/site/cassiopeia/images/personal2.png.
 * Le chemin est relatif au fichier css/user.css. */
.container-header {
  background-image: url('../images/personal2.png');
  background-repeat: no-repeat;
  background-position: right bottom;
}

.container-header .navbar-brand {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.3;
}

/* Menu horizontal clair, lié à l'ancien thème Beez3. */
.container-header .container-nav {
  background: linear-gradient(#eeeeee, #dddddd);
  border: 1px solid #dddddd;
}

.container-header .container-nav .mod-menu a,
.container-header .container-nav .mod-menu a:visited {
  color: #333333;
  font-weight: 600;
  text-decoration: none;
}

.container-header .container-nav .mod-menu a:hover,
.container-header .container-nav .mod-menu a:focus {
  background: #095197;
  color: #ffffff;
}

/* Liens et séparateurs propres aux contenus, sans toucher au bandeau. */
body.site .site-grid a {
  color: #095197;
}

body.site .site-grid a:hover,
body.site .site-grid a:focus {
  color: #ffffff;
  background-color: #095197;
}

body.site .site-grid h2,
body.site .site-grid h3 {
  border-bottom: 1px solid #dddddd;
}

/* Pied de page historique gris foncé. */
.container-footer {
  box-sizing: border-box;
  max-width: 1050px;
  margin-inline: auto;
  background: #555555;
  color: #ffffff;
}

.container-footer a,
.container-footer a:visited {
  color: #ffffff;
}

/* Adaptation mobile : le fond reste sobre et sans débordement. */
@media (max-width: 767px) {
  body.site .site-grid {
    padding: 12px;
  }

  .container-header {
    min-height: 110px;
  }
}

/* -------------------------------------------------------------
 * Correction v2 : le bandeau etait reduit a la largeur du titre.
 * On lui donne une largeur explicite, alignee sur le contenu Beez3.
 * ------------------------------------------------------------- */
body.site .container-header {
  width: 100% !important;
  max-width: 1050px !important;
  min-width: 0;
  margin-left: auto !important;
  margin-right: auto !important;
  min-height: 250px;
  background-image: url('../images/personal2.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}

/* Les blocs internes ne doivent pas elargir le bandeau. */
body.site .container-header > .grid-child {
  box-sizing: border-box;
  max-width: 100%;
}

@media (max-width: 767px) {
  body.site .container-header {
    min-height: 110px;
    background-size: cover;
  }
}
/* Agrandir la photo/logo de Didier dans le bandeau */
.container-header .navbar-brand img,
.container-header .brand-logo img {
    max-height: none !important;
    height: 190px !important;   /* ajuste ici */
    width: auto !important;
    margin: 18px 0 0 18px !important;
    display: block;
}

/* Aligner le logo en haut à gauche */
.container-header .navbar-brand,
.container-header .brand-logo {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}