/*
 * Site de Michael Bialobroda — feuille propre au site, chargée par cassiopeia_socle après le socle et l'apparence
 * (media/templates/site/cassiopeia_socle/css/user.css, gardée aux mises à jour du paquet).
 *
 * 2.0.0 (07/11/2026) : le design de la production (http://michaelbialobroda.com, template indigo), MESURÉ sur le rendu
 *        (Chrome sans fenêtre, getComputedStyle) — Roland : « le local est très loin au niveau design de la prod » :
 *        photo sombre du violoncelle en fond de page, en-tête transparent dans une colonne de 1 140 px, nom blanc 24 px,
 *        menu en capitales blanches espacées, page active en gras, trois icônes de réseaux ; aucun pied de page ;
 *        accueil = photo à gauche, deux lignes blanches à droite ; Bio et Vidéos = bandeau de l'ouïe du violoncelle puis
 *        carte claire ; Contact = grande photo puis coordonnées en blanc. Remplace la 1.0.0 (fond blanc, pied bordeaux).
 */

/* ---- Raleway (Open Font License), latin, fichiers du site ------------------------------------------------------ */
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/raleway-300.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/raleway-400.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/raleway-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/raleway-500.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/raleway-600.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/raleway-700.woff2') format('woff2'); }

/* html:root et non :root : les polices de l'apparence du socle sont posées dans un bloc <style> en ligne, écrit APRÈS les
   feuilles ; à précision égale il l'emporterait sur cette feuille */
html:root {
  --socle-police: 'Raleway', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --socle-police-titres: 'Raleway', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --socle-poids-titres: 500;
  --cassiopeia-font-weight-headings: 500;
  --mb-colonne: 1140px;
  --mb-carte: #f8f7f2;
  --mb-texte: #222;
  --mb-bordeaux: #941b0c;
}

/* ---- Fond de page : la photo sombre du violoncelle de la production ---------------------------------------------- */
body.site {
  background: url('/images/michael/background.jpg') left top / cover no-repeat #0b0706;
  color: var(--mb-texte);
  font-size: 14px;
  line-height: 1.5;
}

/* La colonne de la production : 1 140 px centrés (la grille de Cassiopeia et ses marges remplacées ; « body.site » parce que
   Cassiopeia pose « body.wrapper-fluid .grid-child { max-width: none } », plus précis qu'une règle de deux classes) */
.site-grid { display: block; }
body.site .grid-child.container-component {
  display: block;
  max-width: var(--mb-colonne);
  margin: 0 auto;
  padding: 0 0 105px;
}
.container-component main { margin: 0; }
.container-component .com-content-article, .container-component .com-content-article__body { margin: 0; padding: 0; }

/* ---- En-tête transparent : nom, menu en capitales, icônes des réseaux --------------------------------------------- */
.container-header.socle-entete {
  background: transparent;
  box-shadow: none;
  color: #fff;
}
body.site .grid-child.socle-entete__ligne {
  max-width: var(--mb-colonne);
  min-height: 85px;
  margin: 0 auto;
  padding: 10px 20px;
}
/* Menu et icônes sur une seule ligne, centrés en hauteur */
.container-header .container-nav.socle-entete__nav { flex-wrap: nowrap; align-items: center; }
.socle-marque {
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1;
}
.socle-marque::after { content: none; }

/* Les entrées se touchent, 10 px de chaque côté du texte (mesuré : « BIO » = 61 px) ; Cassiopeia en ajoutait 17,6 */
.container-header .socle-nav .metismenu > li { padding: 0; }
.container-header .socle-nav .metismenu > li > a {
  padding: 0 10px;
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 4.2px;
  line-height: 50px;
  text-transform: uppercase;
  text-decoration: none;
}
.container-header .socle-nav .metismenu > li.active > a { font-weight: 700; color: #fff; }
.container-header .socle-nav .metismenu > li > a:hover,
.container-header .socle-nav .metismenu > li > a:focus-visible { color: #fff; opacity: .75; }
.container-header .socle-nav .metismenu > li > a::after,
.container-header .mod-menu > li.active::after,
.container-header .mod-menu > li:hover::after { display: none; }

/* Pas de compte visible (la production n'en montre pas) ; le panneau ☰ seulement sur téléphone et tablette */
.socle-compte { display: none; }
@media (min-width: 992px) {
  .socle .socle-nav__ligne { display: block; }
  .socle-entete__nav .socle-burger:not(.socle-burger--fermer) { display: none; }
}
.socle-entete__nav .socle-burger:not(.socle-burger--fermer) { background: transparent; color: #fff; }
.socle-entete__nav .socle-burger:not(.socle-burger--fermer) .socle-burger__barres span { width: 1.4rem; height: 3px; }

/* Icônes des réseaux, 16 px, après le menu (mesuré : 30 px de pas). Le module est rendu en « display: contents » par le
   socle : la liste est elle-même l'élément de la ligne, c'est elle qui porte la marge */
.mb-reseaux__liste { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; list-style: none; margin: 0 0 0 4px; padding: 0; }
.mb-reseaux__liste a { display: inline-flex; line-height: 0; }
.mb-reseaux__liste a:hover, .mb-reseaux__liste a:focus-visible { opacity: .75; }
.mb-reseaux__liste img { width: 16px; height: 16px; display: block; }

/* Sur la production, le menu et les icônes s'arrêtent à 98 px du bord droit de la colonne */
@media (min-width: 1200px) {
  .socle-entete__nav { margin-right: 98px; }
}

/* ---- Aucun pied de page (la production n'en a pas) ---------------------------------------------------------------- */
footer.socle-pied { display: none; }

/* ---- Accueil : la photo à gauche, les deux lignes blanches à droite ---------------------------------------------- */
/* (classe de la page sur le body : plus précis que la règle de la colonne) */
body.site.mb-page--accueil .grid-child.container-component { padding: 64px 24px 105px; }
.mb-accueil { display: grid; grid-template-columns: 529fr 533fr; gap: 32px; align-items: start; }
.mb-accueil__photo img { display: block; width: 100%; height: auto; border-radius: 3px; }
.mb-accueil__texte h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.2;
}
.mb-accueil__texte a { color: #fff; text-decoration: none; }
.mb-accueil__texte a:hover, .mb-accueil__texte a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

/* ---- Bio et Vidéos : bandeau de l'ouïe du violoncelle, puis carte claire ----------------------------------------- */
.mb-bandeau { display: block; width: 100%; height: auto; }
.mb-carte {
  margin-top: 25px;
  padding: 24px 24px 60px;
  border-radius: 4px;
  background: var(--mb-carte);
  color: var(--mb-texte);
  font-size: 14px;
  line-height: 21px;
}
.mb-carte h1 {
  margin: 0 0 50px;
  color: var(--mb-bordeaux);
  font-size: 26px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.2;
}
.mb-carte p { margin: 0 0 16px; }
.mb-carte a { color: var(--mb-bordeaux); text-decoration: none; }
.mb-carte a:hover, .mb-carte a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

/* Vidéos : deux colonnes, le titre au-dessus de chaque vidéo */
.mb-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.mb-videos__colonne { display: flex; flex-direction: column; gap: 30px; }
.mb-video__titre {
  margin: 0 0 8px;
  color: var(--mb-texte);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 20.4px;
}
.mb-video__cadre { aspect-ratio: 16 / 9; background: #000; }
.mb-video__cadre iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---- Contact : grande photo, puis les coordonnées en blanc -------------------------------------------------------- */
.mb-contact__photo { display: block; width: 100%; height: auto; }
.mb-contact { padding: 25px 25px 0; color: #fff; font-size: 14px; line-height: 21px; }
.mb-contact__titre {
  margin: 0 0 8px;
  padding-top: 30px;
  color: #fff;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 40px;
}
.mb-contact p { margin: 0 0 16px; }
.mb-contact a { color: #fff; text-decoration: none; }
.mb-contact a:hover, .mb-contact a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

/* ---- Téléphone et tablette ---------------------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  body.site .grid-child.socle-entete__ligne { min-height: 0; padding: 16px 20px; }
  .socle-marque { font-size: 17px; letter-spacing: 1px; }
  /* Comme sur la production : le nom, les icônes, puis le bouton ☰ (qui est dans la navigation) */
  .mb-reseaux__liste { order: 1; margin: 0 .25rem 0 0; }
  .container-header .container-nav .socle-nav { order: 2; }
}
@media (max-width: 767.98px) {
  body.site .grid-child.container-component { padding-bottom: 60px; }
  body.site.mb-page--accueil .grid-child.container-component { padding: 64px 32px 60px; }
  .mb-accueil { grid-template-columns: 1fr; gap: 12px; }
  .mb-accueil__texte h2 { font-size: 18px; }
  .mb-videos { grid-template-columns: 1fr; }
  /* La carte claire en retrait de 15 px sous le bandeau, texte en 13 px (mesuré sur la production à 390 px) */
  .mb-carte { margin: 25px 15px 0; padding: 20px 18px 40px; font-size: 13px; line-height: 19.5px; }
}