/*
 * NESS RADIO — CSS PERSONNALISÉ 2026
 *
 * SOMMAIRE
 * 01. RÉGLAGES COMMUNS — FONDS, SÉPARATEURS ET BOUTONS
 * 02. PAGES — CONTENU ET LARGEURS
 * 03. EN-TÊTE, LOGOS ET STRUCTURE RESPONSIVE
 * 04. SIDEBAR — MENUS, PRÉSENTATION ET LIENS D’ÉCOUTE
 * 05. LECTEUR AUDIO — DIMENSIONS ET COMMANDES
 * 06. ARTICLES — LISTE, EXTRAITS ET BLOCS ASSOCIÉS
 * 07. ARTICLE OUVERT — TITRE, DATE ET WIDGETS
 * 08. PAGINATION — ARTICLES PLUS ANCIENS ET PLUS RÉCENTS
 * 09. ARTISTES — GRILLE NESS CREW ET FICHES INDIVIDUELLES
 * 10. PAGE L’ÉQUIPE — NOMS ET FONCTIONS
 *
 * Chaque bloc est précédé d’un commentaire qui décrit son effet.
 * Les variantes ordinateur et mobile restent dans leur rubrique.
 * Les essais marqués INACTIF restent commentés et ne sont pas appliqués.
 * Dans chaque rubrique, conserver l’ordre des bases et de leurs variantes.
 */


/* ==================================================================
   01. RÉGLAGES COMMUNS — FONDS, SÉPARATEURS ET BOUTONS
   ================================================================== */

/* Taille de référence du texte et des unités rem. */
html {
  font-size:100%;
}

/* Fond général rose : retirer les anciennes images de fond. */
.content,
.loaded .masonry,
html {
  background-image: none !important;
  background-color: #f7dfde !important;
}

/* --- Séparateurs communs --- */

/* Toutes les pages : remplacer les séparateurs hachurés par un trait bleu de 1 px. */
#page hr.separator--striped {
  height: 1px;
  border: 0;
  background: #52a5eb;
}

/* Séparateurs pointillés du thème : utiliser une bordure bleue pleine de 1 px. */
.separator--dotted {
  border-bottom: 1px solid #52a5eb;
}

/* --- Style de base des boutons --- */

/* Boutons génériques : couleur du texte au repos, avant les variantes spécifiques. */
a.btn {
  color: #242423 !important;
}

/* Boutons génériques : couleur du texte au survol. */
a:hover.btn {
  color: #52a5eb !important;
}

/* Boutons et formulaires : taille et capitales de base, avant les variantes. */
.btn, .woocommerce #page .button, .wpcf7-submit, .form-submit #comment-submit {
  font-size: 0.6rem;
  line-height: 2;
  text-transform: uppercase;
}

/* INACTIF — Ancienne texture de fond — désactivée. */
/*.content {
	background: url("http://nessradio.com/wp-content/uploads/2015/01/geometry.png") repeat fixed;
}

.loaded .masonry {
	background: url("http://nessradio.com/wp-content/uploads/2015/01/geometry.png") repeat fixed;
}*/


/* ==================================================================
   02. PAGES — CONTENU ET LARGEURS
   ================================================================== */

/* Contenu des pages et articles : fond rose et marges intérieures. */
.entry__content {
  background: #f7dfde;
  padding: 10px 10px 20px 10px;
}

/* Informations des articles : fond rose et marges intérieures. */
.entry__meta {
  background: #f7dfde;
  padding: 10px 10px 10px 10px;
}

/* Listes des widgets : fond rose et espacement du contenu. */
.widget ul {
  background: #f7dfde;
  padding: 10px 10px 10px 10px;
}

/* --- Mise en page sur grands écrans --- */

@media only screen and (min-width: 1201px) {
  /* Grands écrans : largeur maximale du contenu principal. */
  .page-main {
    max-width: 890px;
    max-width: 69.44444rem;
  }

  /* Grands écrans avec sidebar : réserver 67 % au contenu principal. */
  .page-content--with-sidebar .page-main {
    width: 67%;
  }

}


/* ==================================================================
   03. EN-TÊTE, LOGOS ET STRUCTURE RESPONSIVE
   ================================================================== */

/* Dimensions communes du lecteur, de la sidebar et du bandeau de logo. */
:root {
  --ness-player-width: 180px;
  --ness-sidebar-padding: 1.33333rem;
  --ness-sidebar-width: calc(var(--ness-player-width) + var(--ness-sidebar-padding) * 2 + 1px);
  --ness-branding-height: 220px;
}

/* En-tête et sidebar : fond rose et marges latérales de base. */
.header {
  padding-left: 1.33333rem;
  padding-right: 1.33333rem;
  background: #f7dfde !important;
}

/* Retirer les décors ajoutés avant et après l’en-tête. */
.header:before, .header:after {
  content: none !important;
}

/* Retirer les bordures de base de l’en-tête et des menus. */
.header, .navigation--mobile, .site-navigation--main {
  border: none;
}

@media only screen and (min-width: 901px) {
  /* À partir de 901 px : espacement vertical du bloc de marque. */
  .site-header__branding {
    padding: 24px 0;
    padding:  1.33335rem 0;
  }

}

/* Masquer par défaut le grand logo ; il est affiché sur ordinateur ci-dessous. */
.ness-content-branding {
  display: none;
}

/* --- Ordinateur : sidebar et grand logo --- */

@media only screen and (min-width: 900px) {
  /* Ordinateur : largeur de la sidebar et bordure droite bleue. */
  #page .header.ness-header {
    width: var(--ness-sidebar-width);
    padding-left: var(--ness-sidebar-padding);
    padding-right: var(--ness-sidebar-padding);
    border-right: 1px solid #52a5eb;
  }

  /* Ordinateur : masquer le logo prévu pour le bandeau mobile. */
  .ness-header .ness-mobile-branding {
    display: none;
  }

  /* Ordinateur : centrer le grand logo au-dessus du contenu. */
  .ness-content-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ness-branding-height);
    margin-left: var(--ness-sidebar-width);
    padding: 20px 32px;
    background: #f7dfde;
    border-bottom: 1px solid #52a5eb;
  }

  /* Grand logo : largeur, alignement et présentation du lien. */
  .ness-content-branding__link {
    display: block;
    width: 640px;
    max-width: 100%;
    color: #006220;
    text-align: center;
    text-decoration: none;
    font-size: clamp(32px, 5vw, 80px);
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  /* Image du grand logo : conserver les proportions dans une hauteur de 180 px. */
  .ness-content-branding__link img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: contain;
  }

  /* Ordinateur : décaler le contenu de la largeur de la sidebar. */
  .ness-header ~ .content {
    margin-left: var(--ness-sidebar-width);
  }

}

/* --- Exceptions pour les galeries --- */

@media only screen and (min-width: 900px) {
  /* Galeries plein écran ou pleine largeur : masquer le grand bandeau de logo. */
  .single-gallery-fullscreen .ness-content-branding,
  .single-gallery-fullwidth .ness-content-branding {
    display: none;
  }

  /* Galeries : réafficher le logo de la sidebar. */
  .single-gallery-fullscreen .ness-header .ness-mobile-branding,
  .single-gallery-fullwidth .ness-header .ness-mobile-branding {
    display: block;
  }

  /* Galeries plein écran : supprimer le décalage latéral du contenu. */
  .single-gallery-fullscreen .ness-header ~ .content {
    margin-left: 0;
  }

}

/* --- Petits écrans et impression : placement du contenu --- */

@media not screen and (min-width: 900px) {
  /* Petits écrans et impression : laisser la hauteur de l’en-tête suivre son contenu. */
  #page .header.ness-header {
    position: relative;
    height: auto;
  }

  /* Petits écrans et impression : masquer le bloc interne du menu ordinateur. */
  .ness-header .header__inner-wrap {
    display: none;
  }

  /* Petits écrans et impression : supprimer le décalage supérieur du contenu. */
  .ness-header ~ .content {
    top: 0;
    padding-bottom: 0;
  }

}

/* --- Mobile : logo et bouton du menu --- */

@media screen and (max-width: 899.98px) {
  /* Mobile : supprimer les marges intérieures latérales de l’en-tête. */
  #page .header.ness-header {
    padding-left: 0;
    padding-right: 0;
  }

  /* Mobile : centrer le logo dans un bandeau de 64 px. */
  #page .ness-header .ness-mobile-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    padding: 0 60px;
  }

  /* Mobile : fixer la largeur maximale du bloc logo et retirer ses marges. */
  #page .ness-mobile-branding .site-logo {
    width: 200px;
    max-width: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0;
  }

  /* Mobile : conserver les proportions de l’image du logo. */
  #page .ness-mobile-branding .site-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
  }

  /* Mobile : positionner le bouton du menu à droite, sur une zone de 44 px. */
  #page .ness-header .site-navigation__trigger {
    position: absolute;
    top: 10px;
    right: 8px;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 0 6px;
    opacity: 1;
  }

  /* Mobile : couleur, épaisseur et angles droits des trois barres du menu. */
  #page .ness-header .nav-icon,
  #page .ness-header .nav-icon::before,
  #page .ness-header .nav-icon::after {
    height: 6px;
    border-radius: 0;
    background: #52a5eb;
  }

  /* Mobile : largeur et position de la barre centrale. */
  #page .ness-header .nav-icon {
    width: 32px;
    top: 19px;
  }

  /* Mobile : position de la barre inférieure. */
  #page .ness-header .nav-icon::before {
    top: 11px;
  }

  /* Mobile : position de la barre supérieure. */
  #page .ness-header .nav-icon::after {
    top: -11px;
  }

  /* Menu ouvert : masquer la barre centrale pour conserver la croix. */
  .navigation--is-visible.no-android-browser #page .ness-header .nav-icon {
    top: 19px !important;
    background: transparent;
  }

}


/* ==================================================================
   04. SIDEBAR — MENUS, PRÉSENTATION ET LIENS D’ÉCOUTE
   ================================================================== */

/* --- Menus : bases et états --- */

/* Couleurs communes du menu : bleu au repos, vert pour les états actifs. */
:root {
  --ness-menu-bleu: #52a5eb;
  --ness-menu-vert: #006220;
}

/* Liens du menu : marges intérieures de base. */
.site-navigation--main > .menu-item > a, .site-navigation--mobile .menu-item > a {
  padding:0.33333rem 1.33333rem 0.33333rem 0;
}

/* Base historique des pointillés ; leur suppression est définie plus bas. */
.site-navigation--main > .menu-item , .site-navigation--mobile .menu-item {
  border-bottom-color:#333638;
  border-bottom-style:dotted;
  border-bottom-width:1px;
}

/* Menus ordinateur et mobile : retrait à gauche. */
.site-navigation--main, .site-navigation--mobile {
  padding-left:1.33333rem;
}

/* Menus ordinateur et mobile : couleur bleue par défaut. */
:is(#wpgrade-main-nav-desktop, #wpgrade-main-nav-mobile) .menu-item {
  color: var(--ness-menu-bleu);
}

/* Liens des menus : taille, graisse, interligne et espacement de base. */
:is(#wpgrade-main-nav-desktop, #wpgrade-main-nav-mobile) .menu-item > a {
  color: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Menu : passer au vert au survol, au focus et sur la branche sélectionnée. */
:is(#wpgrade-main-nav-desktop, #wpgrade-main-nav-mobile) .menu-item:is(
  :hover,
  :focus-within,
  .current-menu-item,
  .current_page_item,
  .current-menu-parent,
  .current-menu-ancestor
) {
  color: var(--ness-menu-vert);
}

/* Menu : signaler en vert le lien de la page courante. */
:is(#wpgrade-main-nav-desktop, #wpgrade-main-nav-mobile) a[aria-current="page"] {
  color: var(--ness-menu-vert);
}

/* Sous-menus : accorder la flèche à la couleur du lien. */
:is(#wpgrade-main-nav-desktop, #wpgrade-main-nav-mobile) .menu-item::after {
  border-top-color: currentColor;
}

/* Menu : repère visible lors de la navigation au clavier. */
:is(#wpgrade-main-nav-desktop, #wpgrade-main-nav-mobile) a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Menus ordinateur et mobile : supprimer les pointillés sous les éléments. */
#wpgrade-main-nav-desktop .menu-item,
#wpgrade-main-nav-mobile .menu-item {
  border-bottom: none;
}

/* Menu principal : réduire l’espacement vertical des liens. */
body #wpgrade-main-nav-desktop .menu-item > a,
body #wpgrade-main-nav-mobile .menu-item > a {
  padding-top: 6px;
  padding-bottom: 4px;
}

/* Sous-menus : réduire davantage l’espacement vertical des liens. */
body #wpgrade-main-nav-desktop .site-navigation__sub-menu .menu-item > a,
body #wpgrade-main-nav-mobile .sub-menu .menu-item > a {
  padding-top: 2px;
  padding-bottom: 0px;
}

/* --- Séparateurs de la sidebar --- */

/* Base historique des séparateurs ; le trait bleu défini plus bas la remplace. */
.header .dividernav {
  border-top:1px dotted #777777;
  padding-bottom: 5px;
}

/* Séparateurs de la sidebar : trait bleu de 1 px et espace inférieur. */
.header .dividernav {
  border-top: 1px solid #52a5eb;
  padding-bottom: 10px;
}

@media (min-width: 900px) {
  /* Ordinateur : prolonger les séparateurs jusqu’aux bords de la sidebar. */
  #page .header.ness-header .dividernav {
    --debord: var(--ness-sidebar-padding, 1.33333rem);

    width: calc(100% + 2 * var(--debord));
    max-width: none;
    margin-left: calc(-1 * var(--debord));
    margin-right: calc(-1 * var(--debord));
  }

}

/* --- Pied de sidebar et présentation de la radio --- */

/* Informations de la sidebar : largeur de 180 px. */
.site-info {
  width:180px;
}

/* Liens de la sidebar : couleur de base, affinée pour les boutons et le copyright. */
.site-info a {
  color: #777777;
}

/* Pied de la sidebar : décalage horizontal. */
.site-footer {
  margin-left:1.33333rem;
}

/* Présentation de la radio : couleur et taille de base, affinées ci-dessous. */
.entry__no-ai {
  text-decoration: none;
  font-size: 9px;
  color: #515150;
  line-height: 1.8;
}

/* Présentation en français et anglais : police du body, taille et interligne. */
#page .entry__no-ai {
  font-family: "American Typewriter", Georgia, serif;
  font-size: 12px;
  line-height: 1.4;
  text-transform: none;
}

/* Présentation en arabe : police adaptée, taille et interligne spécifiques. */
#page .entry__no-ai[lang="ar"] {
  font-family: "Noto Naskh Arabic", Tahoma, serif;
  font-size: 16px;
  line-height: 1.2;
}

/* Pied de la sidebar : afficher le copyright et son lien en noir. */
#page #colophon .site-info,
#page #colophon .site-info > a[href*="nessradio.com" i] {
  color: #000000;
}

/* --- Boutons TuneIn et Radio Garden --- */

/* TuneIn et Radio Garden : boutons verts, texte rose et police du body. */
#page .site-info a.btn:is(
  [href^="https://tunein.com/"],
  [href^="https://radio.garden/"]
) {
  font-family: "American Typewriter", Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;

  background: #006220 !important;
  color: #f7dfde !important;
  border: 1px solid #f7dfde;
  padding: 4px 6px;

  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
}

/* TuneIn et Radio Garden : inverser les couleurs au survol et au focus. */
#page .site-info a.btn:is(
  [href^="https://tunein.com/"],
  [href^="https://radio.garden/"]
):is(:hover, :focus-visible) {
  background: #f7dfde !important;
  color: #006220 !important;
  border: 1px solid #006220;
}

/* TuneIn et Radio Garden : contour visible au clavier. */
#page .site-info a.btn:is(
  [href^="https://tunein.com/"],
  [href^="https://radio.garden/"]
):focus-visible {
  outline: 2px solid #006220;
  outline-offset: 3px;
}

/* --- Anciens essais conservés, sans effet --- */

/* INACTIF — Anciennes marges de la sidebar et du menu — désactivées. */
/*
 * .header { padding-left: 0; padding-right: 0;}
 * .site-navigation--main { padding-left: 2.66667rem; padding-right: 1.33333rem; margin-top: -5px; }
 * 
 */

/* INACTIF — Ancienne palette blanche et bleue des boutons d’écoute — désactivée. */
/* TuneIn et Radio Garden : fond blanc, texte bleu 
#page a.btn:is(
  [href^="https://tunein.com/"],
  [href^="https://radio.garden/"]
) {
  background: #ffffff !important;
  color: #52a5eb !important;
}*/

/* INACTIF — Ancien survol des boutons d’écoute — désactivé. */
/* Survol et navigation au clavier : texte vert
#page a.btn:is(
  [href^="https://tunein.com/"],
  [href^="https://radio.garden/"]
):is(:hover, :focus-visible) {
  background: #ffffff !important;
  color: #006220 !important;
}*/


/* ==================================================================
   05. LECTEUR AUDIO — DIMENSIONS ET COMMANDES
   ================================================================== */

/* Lecteur intégré : dimensions de son conteneur. */
.playerness {
  height: 340px;
  width: 180px;
}

/* Lecteur intégré : retirer la bordure de l’iframe. */
.playeriframe {
  border:none;
}

/* Lecteur principal : largeur fixe, centrage et espacement vertical. */
.ness-header .ness-sidebar-player {
  box-sizing: border-box;
  width: var(--ness-player-width);
  min-width: var(--ness-player-width);
  padding: 20px 0;
  margin: 0 auto;
}

@media only screen and (min-width: 900px) {
  /* Ordinateur : hauteur minimale réservée au lecteur. */
  .ness-header .ness-sidebar-player {
    min-height: var(--ness-branding-height);
  }

}

/* --- Fond et bouton Play / Pause --- */

/* Lecteur principal : fond blanc. */
#page .audio9_html5 {
  background: #ffffff !important;
}

/* Bouton Play : fond blanc, contour bleu et forme circulaire. */
.audio9_html5 .AudioPlay {
  --ness-player-icon: url("/wp-content/plugins/lbg-audio9_html5_radio_zuper/audio9_html5_radio_zuper/controllers/blackControllers/play.png");
  background: #ffffff !important;
  border-radius: 50%;
  border: 1px solid #52a5eb;
  box-sizing: border-box;
}

/* Bouton Play : utiliser l’image du plugin comme masque pour le pictogramme bleu. */
.audio9_html5 .AudioPlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: #52a5eb;

  -webkit-mask: var(--ness-player-icon) center / contain no-repeat;
  mask: var(--ness-player-icon) center / contain no-repeat;
}

/* Lecture active : remplacer le pictogramme Play par Pause. */
.audio9_html5 .AudioPlay.AudioPause {
  --ness-player-icon: url("/wp-content/plugins/lbg-audio9_html5_radio_zuper/audio9_html5_radio_zuper/controllers/blackControllers/pause.png");
}

/* Pictogramme vert au survol du bouton Play et pendant la lecture. */
.audio9_html5 .AudioPlay:hover::before,
.audio9_html5 .AudioPlay.AudioPause::before {
  background-color: #006220;
}

/* --- Anciens essais conservés, sans effet --- */

/* INACTIF — Anciens styles du lecteur et décalage mobile du contenu — désactivés. */
/**
.audio9_html5.blackControllers .songTitleInside {
  font-size: 20px;
}

.audio9_html5.blackControllers .radioStation {
    color: #52a5eb !important;
	font-weight: bold;
}

@media not screen and (min-width: 900px)
.content {
    top: 18rem;
}**/

/* INACTIF — Suppression des ombres — désactivée ; les ombres du lecteur sont conservées. */
/* Retirer les ombres sur les textes
#page .audio9_html5 .songTitle,
#page .audio9_html5 .songTitleInside,
#page .audio9_html5 .songAuthor,
#page .audio9_html5 .radioStation {
  text-shadow: none;
} */


/* ==================================================================
   06. ARTICLES — LISTE, EXTRAITS ET BLOCS ASSOCIÉS
   ================================================================== */

/* --- Images, auteur et séparateurs --- */

/* Images des articles : occuper toute la largeur de leur bloc. */
.masonry__item .entry__featured-image img {
  width:100%;
}

/* Date des articles de la liste : utiliser toute la largeur. */
.masonry__item .article-timestamp {
  width: 100%;
}

/* Auteur dans la liste : alignement et espace autour de la signature. */
.masonry__item .entry__author {
  clear: both;
  margin-top: 0px;
  margin-left: 0px;
  margin-bottom: 0px;
  margin-right: 1.33333rem;
  padding-top: 0.0rem;
  padding-right: 0px;
  padding-bottom: 0.6667rem;
  padding-left: 1.33333rem;
}

/* Séparateur de la liste : marges à droite et en dessous. */
.masonry__item .separatorup {
  margin-right: 1.33333rem;
  margin-bottom: 0.6667rem;
}

/* --- Titres, extraits et dates --- */

/* Dates : proportion de base du bloc mois et année. */
.article-timestamp__right-box {
  font-size: 0.39em;
}

/* Titres de la liste : taille, interligne et retours à la ligne. */
body.blog .masonry__item .entry__title {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

/* Extraits de la liste : taille du texte et interligne. */
body.blog .masonry__item .entry__content p {
  font-size: 16px;
  line-height: 1.4;
}

/* Accueil : taille et interligne du bloc date. */
.home.blog .masonry__item .article-timestamp {
  font-size: 24px;
  line-height: 1.4;
}

/* Accueil : taille et interligne du mois et de l’année. */
.home.blog .masonry__item .article-timestamp__right-box {
  font-size: 10px;
  line-height: 1.4;
}

@media (max-width: 600px) {
  /* Téléphone : réduire légèrement la taille des titres de l’accueil. */
  .home.blog .masonry__item .entry__title {
    font-size: 18px;
  }

}

/* --- Compteurs de vues et de likes --- */

/* Vues des articles et likes du site : police du body, graisse renforcée, sans capitales forcées. */
#page .image_item-categories:has(.icon-e-eye) .image_item-category,
#page .pixlikes-box .likes-text,
#page .pixlikes-box .likes-count {
  font-family: "American Typewriter", Georgia, serif;
  font-weight: bolder;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
}

/* --- Zone supérieure de widgets ou publicité --- */

/* Zone supérieure de widgets ou publicité : fond, bordures et espacement. */
.top-sidebar-wrapper {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 0px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #d8d8d8;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #f0f0f0;
}

/* Zone supérieure : retirer la bordure sous les éléments ins. */
.top-sidebar-wrapper ins {
  border-bottom-width: 0px;
}

/* --- Bloc d’articles mis en avant --- */

/* Bloc d’articles mis en avant : hauteur, fond, bordure et ombre. */
.featured-posts-slider-w {
  -webkit-box-shadow:rgba(0, 0, 0, 0.0980392) 0 0 12px 0;
  background-color:#FFFFFF;
  border-bottom-color:#BDBDBD;
  border-bottom-style:solid;
  border-bottom-width:1px;
  box-shadow:rgba(0, 0, 0, 0.0980392) 0 0 12px 0;
  height:116px;
  overflow:hidden;
  padding:0 20px;
  position:relative;
}

/* Étiquette des articles mis en avant : rotation, position et couleurs. */
.featured-posts-slider-w .featured-posts-label {
  -webkit-transform:rotate(90deg);
  background-color:#52a5eb;
  border-bottom-left-radius:2px;
  border-bottom-right-radius:2px;
  border-top-left-radius:2px;
  border-top-right-radius:2px;
  color:#222222;
  font-size:12px;
  left:-15px;
  padding:2px 4px;
  position:absolute;
  top:40%;
  transform:rotate(90deg);
}


/* ==================================================================
   07. ARTICLE OUVERT — TITRE, DATE ET WIDGETS
   ================================================================== */

/* Article ouvert : titre vert et interligne plus aéré. */
body.single-post #page .entry-header > .entry__title {
  color: #006220;
  line-height: 1.45;
}

/* Article ouvert : aligner la date et appliquer le gris foncé. */
body.single-post #page .article-timestamp--single {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #242423;
}

/* Article ouvert : aligner le jour et reprendre la couleur de la date. */
body.single-post #page .article-timestamp--single .article-timestamp__date {
  float: none;
  color: inherit;
}

/* Article ouvert : accorder la barre oblique à la couleur du jour. */
body.single-post #page .article-timestamp--single .article-timestamp__date::after {
  color: inherit;
}

/* Article ouvert : aligner le mois et l’année, avec leur gris et leur interligne. */
body.single-post #page .article-timestamp--single .article-timestamp__right-box {
  float: none;
  position: static;
  line-height: 1.4;
  color: #515150;
}

/* Article ouvert : conserver des séparateurs bleus de 1 px. */
body.single-post #page hr.separator--striped {
  height: 1px;
  border: 0;
  background: #52a5eb;
}

/* --- Sidebar de droite et colonnes --- */

/* Widgets de droite : occuper toute la largeur de la sidebar. */
body.single-post #page .sidebar--right > .widget {
  width: 100%;
  float: none;
  clear: both;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  /* Ordinateur : étirer le contenu et la sidebar sur une même hauteur. */
  body.single-post #page .page-content--with-sidebar {
    display: flex;
    align-items: stretch;
  }

  /* Ordinateur : adapter les deux colonnes à la mise en page flexible. */
  body.single-post #page .page-content--with-sidebar > .page-main,
  body.single-post #page .page-content--with-sidebar > .page-side {
    float: none;
    flex-shrink: 0;
    min-width: 0;
  }

}


/* ==================================================================
   08. PAGINATION — ARTICLES PLUS ANCIENS ET PLUS RÉCENTS
   ================================================================== */

/* Fond de la zone de pagination une fois la liste chargée. */
.loaded .blog .masonry__pagination {
  background: none;
}

/* Pagination : fond bleu de base, remplacé par le vert plus bas. */
.masonry__pagination .prev, .masonry__pagination .next {
  background-color: #52a5eb;
}

/* Placer le lien vers les articles plus anciens à droite. */
.masonry__pagination .next {
  float: right;
}

/* Survol de base de la pagination, remplacé par le rose plus bas. */
.masonry__pagination a:hover {
  background-color: #fcfcfc;
}

/* Pagination : police du body et casse normale pour les libellés. */
#page .wpgrade_pagination a.page-numbers {
  font-family: "American Typewriter", Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

/* Liens de pagination disponibles : fond vert, texte rose et bordure verte. */
#page .wpgrade_pagination a.page-numbers:not(.disabled) {
  background: #006220;
  color: #f7dfde;
  border: 1px solid #006220;
}

/* Liens de pagination disponibles : inverser les couleurs au survol et au focus. */
#page .wpgrade_pagination a.page-numbers:not(.disabled):hover,
#page .wpgrade_pagination a.page-numbers:not(.disabled):focus-visible {
  background: #f7dfde;
  color: #006220;
}

/* Pagination : repère visible lors de la navigation au clavier. */
#page .wpgrade_pagination a.page-numbers:not(.disabled):focus-visible {
  outline: 2px solid #006220;
  outline-offset: 3px;
}


/* ==================================================================
   09. ARTISTES — GRILLE NESS CREW ET FICHES INDIVIDUELLES
   ================================================================== */

/* --- Ness Crew : cartes au survol et au clavier --- */

@media (hover: hover) {
  /* Ness Crew : fond rose pâle des cartes au survol. */
  body.page-id-14 #page .image_item-meta--portfolio {
    background: #f7dfde;
  }

  /* Ness Crew : organiser le titre, le résumé et les compteurs en colonne. */
  body.page-id-14 #page .image_item-meta--portfolio .image_item-table {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 16px;
    gap: 12px;
  }

  /* Ness Crew : réserver au texte l’espace disponible dans la carte. */
  body.page-id-14 #page .image_item-meta--portfolio .image_item-cell--top {
    position: static;
    flex: 1 1 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  /* Ness Crew : garder la place nécessaire aux catégories et au cœur. */
  body.page-id-14 #page .image_item-meta--portfolio .image_item-cell--bottom {
    position: static;
    flex: 0 0 auto;
    padding: 0;
  }

  /* Ness Crew : titre vert, interligne et espace avant le résumé. */
  body.page-id-14 #page .image_item-meta--portfolio .image_item-title {
    margin: 0 0 16px;
    line-height: 1.35;
    color: #006220;
  }

  /* Ness Crew : résumé en police du body, sans italique, limité à trois lignes. */
  body.page-id-14 #page .image_item-meta--portfolio .image_item-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-family: "American Typewriter", Georgia, serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    color: #515150;
  }

  /* Ness Crew : afficher également la carte lors de la navigation au clavier. */
  body.page-id-14 #page .image__item-link:focus-visible .image__item-meta {
    opacity: 1;
  }

}

/* --- Ness Crew : adaptation des cartes plus étroites --- */

@media (hover: hover) and (max-width: 1280px) {
  /* Cartes plus étroites : réduire les marges intérieures et les espacements. */
  body.page-id-14 #page .image_item-meta--portfolio .image_item-table {
    padding: 12px;
    gap: 8px;
  }

  /* Cartes plus étroites : limiter le résumé à deux lignes. */
  body.page-id-14 #page .image_item-meta--portfolio .image_item-description {
    -webkit-line-clamp: 2;
  }

}

/* --- Fiche artiste : image, texte et titre --- */

@media (min-width: 900px) {
  /* Fiche artiste sur ordinateur : répartir image et texte à 50 / 50. */
  body.single-lens_portfolio #page .project--sidebar__images,
  body.single-lens_portfolio #page .project--sidebar__content {
    box-sizing: border-box;
    width: 50%;
    max-width: none;
  }

  /* Fiche artiste sur ordinateur : aligner le titre avec le haut de l’image. */
  body.single-lens_portfolio #page .project--sidebar__content .entry__title {
    padding-top: 0;
  }

}

/* Fiche artiste : aérer les titres qui occupent plusieurs lignes. */
body.single-lens_portfolio #page .project--sidebar__content .entry__title,
body.single-lens_portfolio #page .project--sidebar__images > .entry__title {
  line-height: 1.4;
}

/* Fiche artiste : remplacer les hachures au-dessus du cœur par un trait bleu. */
body.single-lens_portfolio #page .project--sidebar__content > hr.separator--striped {
  height: 1px;
  border: 0;
  background: #52a5eb;
}

/* --- Fiche artiste : navigation entre les projets --- */

/* Fiche artiste : étendre la navigation sous les deux colonnes. */
body.single-lens_portfolio #page .project--sidebar__related {
  clear: both;
  width: 100%;
  max-width: none;
}

/* Fiche artiste : tracer une bordure bleue au-dessus de la navigation. */
body.single-lens_portfolio #page .project--sidebar__related .related-projects_container {
  border-top: 1px solid #52a5eb;
}

/* Fiche artiste : donner toute la largeur disponible à la navigation. */
body.single-lens_portfolio #page .project--sidebar__related .projects_nav {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  margin: 0;
}

/* Fiche artiste : répartir les trois liens sur une seule ligne. */
body.single-lens_portfolio #page .project--sidebar__related .projects_nav-list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* Navigation artiste : retirer le pseudo-élément qui gênerait la répartition. */
body.single-lens_portfolio #page .project--sidebar__related .projects_nav-list::after {
  content: none;
}

/* Navigation artiste : adapter chaque élément à la largeur de son texte. */
body.single-lens_portfolio #page .project--sidebar__related .projects_nav-item {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
}

/* Navigation artiste : espacer les liens et empêcher leur retour à la ligne. */
body.single-lens_portfolio #page .project--sidebar__related .projects_nav-item a {
  display: inline-flex;
  align-items: center;
  padding: 12px 0;
  white-space: nowrap;
}


/* ==================================================================
   10. PAGE L’ÉQUIPE — NOMS ET FONCTIONS
   ================================================================== */

/* Équipe : respecter la casse du texte et retirer l’espacement forcé des lettres. */
#page .team-member__name,
#page .team-member__position {
  text-transform: none;
  letter-spacing: normal;
}

/* Équipe : espace entre le nom et la fonction. */
#page .team-member__name {
  margin-bottom: 10px;
}

/* Équipe : rapprocher la fonction du nom et aérer ses retours à la ligne. */
#page .team-member__position {
  margin-top: 0;
  line-height: 1.6;
}