/* ============================================================
   SOLEM Studio — Thème global MediaCMS
   Surcharge les variables CSS + composants de MediaCMS.
   => Reskin COULEUR + TYPO + FORMES, SANS REBUILD du frontend.
   Chargé via templates/root.html (après le bundle => gagne).

   Palette = tokens EXACTS extraits de la maquette Figma
   (SOLEM Website, node 9064:5045).
   ============================================================ */

/* ============================================================
   POLICE — Inter AUTO-HÉBERGÉE (fiable même si Google Fonts
   est bloqué en prod). Fichiers : static/fonts/inter/.
   Police variable => couvre toutes les graisses 100–900.
   ============================================================ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   ICÔNES — Material Symbols Outlined AUTO-HÉBERGÉE (style outline
   comme la maquette). Fichier : static/fonts/material-symbols/.
   Fallback "Material Icons" (filled, local) => jamais de texte brut
   si un glyphe manque.
   ============================================================ */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;   /* police VARIABLE => axe wght réglable */
  font-display: block;
  src: url("/static/fonts/material-symbols/material-symbols-outlined-var.woff2") format("woff2");
}
.material-icons {
  font-family: "Material Symbols Outlined", "Material Icons" !important;
  font-weight: normal;
  /* icônes fil de fer plus fines (comme la maquette) : wght 250 */
  font-variation-settings: "FILL" 0, "wght" 250, "GRAD" 0, "opsz" 24;
  font-feature-settings: "liga";
}

body {
  /* ---- Palette SOLEM (valeurs exactes Figma) ---- */
  --solem-blue:       #2879B3;   /* bleu de marque (primaire)      */
  --solem-blue-dark:  #2573AC;   /* variante foncée (hover/actif)  */
  --solem-navy:       #051A26;   /* quasi-noir bleuté (texte)      */
  --solem-hero-title: #001122;   /* titres hero très foncés        */
  --solem-slate:      #46545C;   /* gris ardoise                   */
  --solem-muted:      #6B7280;   /* gris texte secondaire          */
  --solem-border:     #D9D9D9;   /* bordures / placeholders        */
  --solem-blue-pale:  #E8F4FA;   /* fond bleu très clair (chips)   */
  --solem-blue-soft:  #6EA5C7;   /* bleu adouci (bordure onglet actif) */
  --solem-tab-active: #EAF2F7;   /* fond de l'onglet actif (maquette)  */
  --solem-hero-bg:    #EAF0F2;   /* fond bannière + label « À la une » */
  /* Jumeau sombre de #EAF0F2 : même teinte (196°) et même saturation (21%),
     luminosité 93% -> 13%. Se détache du fond natif #121212. */
  --solem-hero-bg-dark:    #1A2428;
  --solem-hero-title-dark: #EAF2F7;
  /* Contrepartie claire de --solem-muted (même teinte 220°, L 46% -> 68%) :
     #6B7280 ne tient que 3.2:1 sur les cartes sombres, celle-ci monte à 6.7:1. */
  --solem-muted-dark:      #A6ABB5;
  --solem-bg:         #F6F7F7;   /* fond général off-white         */
  --solem-surface:    #FFFFFF;   /* surfaces (cartes, header)      */
  --solem-red:        #E7333E;   /* accent rouge (alertes)         */

  /* ============================================================
     Couleur de marque globale (défaut MediaCMS = vert #009933).
     Remplacée par le bleu SOLEM.
     ============================================================ */
  --default-theme-color: var(--solem-blue);
  --default-brand-color: var(--solem-blue);
  --theme-color:         var(--solem-blue);
  --brand-color:         var(--solem-blue);
  --links-color:         var(--solem-blue);
  --default-logo-height: 40px;

  /* Largeur de sidebar : une seule source de vérité (le bundle met 240px
     sur body mais custom.css met 250px sur .page-sidebar => le
     .page-main-wrap lisait 240 et le contenu passait 10px sous la sidebar).
     On aligne tout sur 250px ici (chargé après le bundle => gagne). */
  --sidebar-width: 250px;

  /* Gouttière horizontale de la page, portée par .page-main-wrap (voir la
     section « GOUTTIÈRE DE PAGE » plus bas). 20px = la valeur que le thème
     appliquait déjà à droite quand la sidebar était dépliée ; le rendu
     desktop dans cet état est donc inchangé. La section RESPONSIVE la
     redéfinit pour les petits écrans. */
  --solem-page-gutter: 20px;

  /* ---- Grilles de vignettes : une seule source de vérité ----
     Les règles de largeur, plus bas, ne font que lire ces variables ; la
     section RESPONSIVE en fin de fichier les redéfinit par palier. Un seul
     endroit à toucher pour changer une densité. Valeurs desktop = celles de
     la maquette, inchangées (5 médias par ligne, 4 cartes de catégorie).

     La largeur est portée par la formule ENTIÈRE et non par un nombre de
     colonnes : `calc(... / var(--n))` (division par une variable) n'est
     évalué que par les moteurs récents — sur un Safari ancien la déclaration
     serait invalide et l'item retomberait à sa largeur native. */
  --solem-item-width:     calc((100% - 5 * 22px) / 5);
  --solem-item-width-cat: calc((100% - 4 * 22px) / 4);
  --solem-gutter: 22px;   /* gouttière horizontale entre cartes   */
  --solem-gutter-y: 30px; /* gouttière verticale entre cartes     */

  /* ---- Fond général + texte + en-tête ---- */
  --body-bg-color:   var(--solem-bg);
  --body-text-color: var(--solem-navy);
  --hr-color:        #ECEEF1;
  --dotted-outline-color: rgba(5, 26, 38, 0.4);

  --header-bg-color: var(--solem-surface);
  --header-circle-button-color: var(--solem-muted);
  --header-popup-menu-color: var(--solem-navy);
  --header-popup-menu-icon-color: var(--solem-muted);

  /* ---- Barre latérale (blanche dans la maquette) ---- */
  --sidebar-bg-color:            var(--solem-surface);
  --sidebar-nav-border-color:    #ECEEF1;
  --sidebar-nav-item-text-color: var(--solem-navy);
  --sidebar-nav-item-icon-color: var(--solem-muted);
  --sidebar-bottom-link-color:   var(--solem-muted);

  --nav-menu-active-item-bg-color: var(--solem-tab-active);
  --nav-menu-item-hover-bg-color:  rgba(40, 121, 179, 0.06);
  --in-popup-nav-menu-item-hover-bg-color: var(--solem-blue-pale);

  /* ---- Champ de recherche ---- */
  --search-field-input-text-color:   var(--solem-navy);
  --search-field-input-bg-color:      var(--solem-surface);
  --search-field-input-border-color:  var(--solem-border);
  --search-field-submit-text-color:   var(--solem-slate);
  --search-field-submit-bg-color:     var(--solem-surface);
  --search-field-submit-border-color: var(--solem-border);
  --search-field-submit-hover-bg-color:      #EFF1F2;
  --search-field-submit-hover-border-color:  #C6CCD1;
  --search-results-item-content-link-title-text-color: var(--solem-navy);

  /* ---- Cartes média ---- */
  --item-bg-color:                var(--solem-surface);
  --item-title-text-color:        var(--solem-navy);
  --item-thumb-bg-color:          #ECEEF1;
  --item-meta-text-color:         var(--solem-muted);
  --item-meta-link-text-color:    var(--solem-muted);
  --item-meta-link-hover-text-color: var(--solem-navy);
  --media-list-row-border-color:  #ECEEF1;
  --media-list-header-title-link-text-color: var(--solem-muted);

  /* ---- Popups / menus ---- */
  --popup-bg-color:      var(--solem-surface);
  --popup-hr-bg-color:   #ECEEF1;
  --popup-top-text-color: var(--solem-navy);
  --popup-top-bg-color:  #EFF1F2;

  --profile-page-bg-color:        var(--solem-surface);
  --profile-page-nav-link-active-text-color: var(--solem-navy);
  --profile-page-nav-link-hover-text-color:  var(--solem-navy);

  --logged-in-user-thumb-bg-color: rgba(5, 26, 38, 0.07);
}

/* ============================================================
   TYPOGRAPHIE — Inter partout.
   Le bundle force "Roboto"/Arial sur certains éléments avec plus
   de spécificité : on réimpose Inter (jamais sur .material-icons).
   ============================================================ */
body,
input, button, textarea, select,
.page-sidebar, .nav-menu a, .nav-menu button, .nav-menu span,
.item-meta, .item-title, .media-list-header,
[class*="profile-page"] h1, [class*="profile-info"] {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

.media-list-header .media-list-header-title,
.page-main h1, .page-main h2 {
  font-weight: 700;
  color: var(--body-text-color);
  letter-spacing: -0.01em;
}

/* Hors accueil, le titre de page est désormais dans le hero => on masque
   l'en-tête de liste redondant. (Sur l'accueil, .media-list-header sert de
   titres de rangées « Shorts », etc. => on le garde.) */
body:not(.solem-home) .media-list-header {
  display: none !important;
}

/* Bouton « Filtres » de la recherche et des pages de catégorie.
   Le bundle le pose en absolu (`.mi-filters-toggle { top: 12px; right: 0 }`)
   dans `.media-list-row`, en comptant sur la hauteur de `.media-list-header`
   pour lui ménager sa place. Cet en-tête étant masqué juste au-dessus, le
   bouton retombait sur la 1re carte de la liste : le lien de la carte
   (`.item-main`, positionné, donc peint par-dessus) captait le clic. Le
   libellé restait lisible en transparence, mais le bouton ne répondait plus.
   On le remet dans le flux, au-dessus de la rangée de filtres. */
body:not(.solem-home) .mi-filters-toggle {
  position: relative;
  top: auto;
  right: auto;
  z-index: 1;
  margin-bottom: 8px;
  text-align: right;
}

/* ============================================================
   GOUTTIÈRE DE PAGE — une seule, sur .page-main-wrap.

   `.page-main-wrap` est le seul conteneur commun à TOUT : les pages React
   (`> #page-<nom> > .page-main`), les pages rendues par Django
   (`> .page-main > .page-main-inner`, cf. templates/base.html) et les
   bandeaux de message, qui sont ses enfants directs. Poser la gouttière
   ailleurs en laisse forcément une partie dehors — `.page-main-inner`, par
   exemple, n'existe PAS sur les pages React : le bundle ne l'écrit jamais.

   Le thème ne posait cette gouttière que sous `body.visible-sidebar`. Résultat,
   sidebar repliée (et donc sur tout téléphone, où elle l'est toujours), le
   contenu touchait les deux bords de l'écran — hero compris. Elle s'applique
   désormais dans tous les états, et la sidebar dépliée ne fait qu'y ajouter
   sa largeur.

   ⚠️ Exception : la page média, qui ne suit pas les mêmes règles.
   `media.css` (chargé sur elle seule, après _commons.css) y impose
   `.visible-sidebar .page-main-wrap { padding-left: 0 }` : sur une page
   média, ouvrir la sidebar ne décale PAS le contenu, elle se superpose avec
   son voile noir, comme sur téléphone (cf. PageSidebarContentOverlay.scss,
   qui allume le voile sur #page-media à toute largeur). Le thème, lui,
   poussait quand même le contenu de 250 + 20px : le lecteur se retrouvait
   très en retrait des deux côtés alors que rien ne l'exigeait.
   Son `.viewer-section` porte par ailleurs déjà son propre retrait et se
   centre dans une largeur maximale de 1328px : il n'a besoin d'aucune
   gouttière de notre part. On lui rend donc entièrement la main.
   `:has()` est déjà employé plus bas dans ce fichier pour la colonne
   « À suivre ».

   ⚠️ Sous 768px, MediaCMS bascule la sidebar en tiroir superposé (voile noir
   .page-sidebar-content-overlay) et ne décale PLUS le contenu : le natif
   conditionne son `padding-left` à `@media (min-width: 768px)`. Sans la même
   condition, ouvrir le menu sur un téléphone poussait la page de 270px hors
   de l'écran (largeur de défilement mesurée : 730px pour 402px de viewport).
   ============================================================ */
.page-main-wrap:not(:has(> [id^="page-media"])) {
  padding-left: var(--solem-page-gutter) !important;
  padding-right: var(--solem-page-gutter) !important;
}

@media (min-width: 768px) {
  body.visible-sidebar .page-main-wrap:not(:has(> [id^="page-media"])) {
    padding-left: calc(var(--sidebar-width) + var(--solem-page-gutter)) !important;
  }

  /* Page média, sidebar dépliée : on garde le décalage de la largeur de la
     sidebar, mais SANS y ajouter la gouttière — le lecteur porte déjà son
     propre retrait de 24px, si bien qu'il démarrait à 294px du bord pour une
     sidebar large de 250.
     Pourquoi ne pas laisser simplement faire `media.css`, qui met 0 ici :
     parce qu'il compte sur la sidebar comme calque modal, et qu'elle
     recouvrirait alors le bord gauche du lecteur (vérifié). Le voile noir
     s'affiche de toute façon par-dessus, comme aujourd'hui. */
  body.visible-sidebar .page-main-wrap:has(> [id^="page-media"]) {
    padding-left: var(--sidebar-width) !important;
    padding-right: 0 !important;
  }
}

/* Les listes verticales portent un retrait natif (`.items-list-ver
   { padding: 0 16px }`, 24px au-delà de 1220px) qui s'ajoutait à la gouttière :
   sur la page Catégories, les cartes démarraient 24px plus à droite que le
   hero juste au-dessus. Le thème le neutralisait déjà sur l'accueil ; on
   généralise pour que tous les blocs partagent le même bord gauche. */
.media-list-wrapper.items-list-ver,
.search-results-wrap.media-list-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   FORMES — cartes 10px, recherche pilule.
   ============================================================ */
.item-thumb,
a.item-thumb,
.video-thumb,
.playlist-thumb {
  border-radius: 10px !important;
}

/* Lecteur vidéo : couper le contenu à la forme du conteneur.
   `.player-container` porte `border-radius: 10px` (media.css, à partir de
   480px) mais AUCUN `overflow: hidden`. Or le lecteur qu'il contient est
   rectangulaire et noir (`.video-js { background-color: #000 }`, CSS de
   video.js) : ses quatre coins carrés dépassaient de l'arrondi et se lisaient
   comme un liseré noir autour de l'image, surtout en haut où rien ne les
   recouvre — en bas, la barre de contrôle masquait en partie le défaut.
   Rien dans le lecteur ne sort volontairement de ce cadre (menus de réglages
   et infobulles s'ouvrent à l'intérieur), la coupe est donc sans effet de
   bord. Hors requête média : le défaut ne dépend pas de la largeur. */
.viewer-container .player-container {
  overflow: hidden;
}

/* Champ de recherche : pilule UNIQUE avec loupe intégrée (maquette).
   Structure : .search-field-wrap > form > .text-field-wrap > input
               + button[submit] en absolu à droite. */
/* Largeur fixe réservée au desktop : sous 1024px, MediaCMS masque ce champ et
   réutilise la MÊME classe pour la recherche plein écran déclenchée par la
   loupe (`.mobile-search-field .search-field-wrap`, positionnée en absolu
   entre le bouton retour et le bord droit). Le `width: 620px !important`
   l'emportait sur le `width: auto` natif et faisait déborder l'en-tête de
   ~60px. D'où la borne à 1024px, exactement celle du natif. */
@media (min-width: 1024px) {
  .search-field-wrap {
    width: 620px !important;
    max-width: 60% !important;
  }
}
.search-field-wrap .text-field-wrap {
  padding-right: 0 !important;   /* input pleine largeur, loupe par-dessus */
}
.search-field-wrap input[type="text"] {
  border-radius: 999px !important;
  border-width: 1px !important;
  height: 28px !important;
  font-size: 13px !important;
  padding: 0 16px 0 40px !important;   /* place la loupe à GAUCHE */
}
/* Loupe (bouton submit) déplacée à GAUCHE, avant le texte */
.search-field-wrap button[type="submit"],
.search-field-wrap button[type="submit"]:hover,
.search-field-wrap button[type="submit"]:focus {
  left: 0 !important;
  right: auto !important;
  border: 0 !important;
  background: transparent !important;
  width: 40px !important;
  color: var(--solem-muted) !important;
}
.search-field-wrap button[type="submit"] .material-icons {
  font-size: 16px !important;
}

/* Bouton de repli/dépli de la sidebar : réintroduit, en CHEVRON,
   placé à DROITE du logo (comme la maquette).
   Le header-left interne passe en flex pour réordonner logo -> toggle. */
.page-header-left > div {
  display: flex !important;
  align-items: center !important;
  height: var(--header-height, 56px) !important;
}
/* Logo + toggle : nativement display:table-cell + height:100% => en flex
   leur contenu reste collé en haut. On annule (height:auto) pour laisser
   align-items centrer. Ciblé sur logo+toggle uniquement : .close-search-field
   (bouton retour mobile) garde son display natif (masqué). */
.page-header-left > div > .logo,
.page-header-left > div > .toggle-sidebar {
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
}
.page-header-left > div > .logo {
  order: 1;
}
.page-header-left > div > .toggle-sidebar {
  order: 2;
  margin-left: 16px;
}
/* Icône native = ligature texte "menu" (hamburger) : on la masque
   et on affiche un chevron via ::before (police Material Symbols). */
.toggle-sidebar .material-icons {
  font-size: 0 !important;
}
.toggle-sidebar .material-icons::before {
  content: "chevron_left";   /* navbar dépliée : chevron vers la gauche */
  font-size: 22px;
}
/* Navbar repliée (body sans .visible-sidebar) : chevron inversé (droite) */
body:not(.visible-sidebar) .toggle-sidebar .material-icons::before {
  content: "chevron_right";
}

/* ============================================================
   NAVIGATION — item actif : chip bleu pâle + texte bleu.
   ============================================================ */
/* Petit espace vertical entre les items */
.nav-menu li.link-item {
  margin: 3px 0;
}
.nav-menu li.link-item a {
  border-radius: 10px;
  font-weight: 350;
  /* bordure transparente dès le repos => même hauteur qu'au :hover/.active
     (sinon +2px au survol => le menu "saute"). */
  border: solid 1px transparent;
  padding-left: 31px;   /* 32 - 1px de bordure => icône alignée à 32px */
  white-space: nowrap;  /* jamais de retour à la ligne (pastille plus étroite au survol) */
}
/* Écart icône <-> texte (natif 24px) */
.nav-menu .menu-item-icon {
  margin-right: 12px;
}

/* Items masqués (hors maquette) : À propos, Langue, et « En vedette »
   (doublon avec l'accueil). Masqué en CSS et non via le drapeau
   config-enabled.pages.featured.enabled, car ce dernier pilote aussi la
   section « En vedette » de l'accueil (cf. HomePage.tsx). */
.nav-item-about,
.nav-item-language,
.nav-item-featured {
  display: none !important;
}

/* Séparateur avant la section « Autres contenus » */
.nav-menu li.solem-nav-section-title[data-solem-title="autres"] {
  border-top: 1px solid var(--sidebar-nav-border-color, #eceef1);
  margin-top: 10px;
  padding-top: 24px !important;
}

/* ============================================================
   Bloc « À la une » (média featured en une ligne, façon maquette)
   injecté par solem-custom.js sur l'accueil.
   ============================================================ */
.solem-featured {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 0 0 28px;
  /* Pas de carte blanche : le bloc se fond dans la page (comme la maquette). */
  background: transparent;
  text-decoration: none;
  color: inherit;
}
/* Vignette : largeur fixe et ratio 16/9, seule la vignette est arrondie. */
.solem-featured-thumb {
  position: relative;   /* référentiel du badge de durée (.item-duration) */
  flex: 0 0 320px;
  max-width: 320px;
  border-radius: 12px;
  overflow: hidden;
}
.solem-featured-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}
.solem-featured-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  min-width: 0;
}
.solem-featured-badge {
  align-self: flex-start;
  /* inline-flex : l'étoile (::before) reste centrée verticalement sur le texte. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--solem-hero-bg);
  color: var(--solem-blue);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 16px;
}
/* Mode sombre : même bascule que la bannière (fond sombre + bleu adouci),
   pour que la pastille reste solidaire du hero juste au-dessus. */
body.dark_theme .solem-featured-badge {
  background: var(--solem-hero-bg-dark);
  color: var(--solem-blue-soft);
}
/* Étoile à 4 branches devant « À la une ». Rendue en masque SVG + currentColor :
   elle hérite donc du bleu du label et reste nette à toute taille / en mode sombre. */
.solem-featured-badge::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.6 5.5 4.5 9.4 10 10-5.5.6-9.4 4.5-10 10-.6-5.5-4.5-9.4-10-10 5.5-.6 9.4-4.5 10-10z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.6 5.5 4.5 9.4 10 10-5.5.6-9.4 4.5-10 10-.6-5.5-4.5-9.4-10-10 5.5-.6 9.4-4.5 10-10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.solem-featured-title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: 1.2;
  color: var(--body-text-color);
}
.solem-featured-desc {
  margin: 0;
  color: var(--solem-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Créateur + vues/date : exactement la même typographie (la seule
   différence visible auparavant était la couleur), et espacement resserré
   entre les deux lignes (le gap de 8px du body est neutralisé). */
.solem-featured-author,
.solem-featured-meta {
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  font-variation-settings: "wght" 400;
  line-height: 1.35;
  letter-spacing: normal;
  color: var(--solem-muted);
}
.solem-featured-author + .solem-featured-meta {
  margin-top: -6px;
}

/* ============================================================
   CARTES de catégories (page /categories, comme la maquette) :
   boîte arrondie, en-tête dégradé bleu + titre, pied blanc
   (description + nombre de médias).
   ============================================================ */
/* La liste prend tout l'espace dispo (comme le hero), au lieu d'être
   capée à 5×item-width et centrée. Item plus large => ~5 par ligne. */
#page-categories {
  --default-item-width: 300px;
  --default-max-item-width: 360px;
}
/* Toutes les listes verticales remplissent l'espace dispo (comme /categories) :
   on retire le plafond (item-width × max-row-items) et le centrage. Les sliders
   horizontaux de l'accueil (items-list-hor) ne sont pas touchés. */
/* Toutes les listes HORS ACCUEIL (ver ET hor : catégories, en vedette,
   recommandé, dernier, tags, membres, recherche/catégorie, historique,
   médias aimés…) remplissent l'espace dispo. L'accueil garde ses rangées. */
body:not(.solem-home) .media-list-wrapper {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Grille verticale : on force width:100% sur la rangée (sinon le bundle la
   fige à 5×item-width au-delà de 1170px et elle ne remplit pas). */
body:not(.solem-home) .media-list-wrapper.items-list-ver .media-list-row {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Grilles (items-list-ver, hors accueil) : --solem-cols items par ligne
   (5 sur desktop), avec la gouttière à droite et en bas. Largeur en % => vrai
   n-max responsive. (Les listes horizontales ne sont pas concernées.) */
body:not(.solem-home) .media-list-wrapper.items-list-ver .media-list-row .item {
  width: var(--solem-item-width) !important;
  max-width: none !important;
  margin: 0 var(--solem-gutter) var(--solem-gutter-y) 0 !important;
}
body:not(.solem-home) .media-list-wrapper.items-list-ver .media-list-row .item .item-content {
  margin-right: 0 !important;
}
/* Page Catégories : --solem-cols-cat par ligne (4 sur desktop, au lieu de 5). */
#page-categories .media-list-wrapper.items-list-ver .media-list-row .item {
  width: var(--solem-item-width-cat) !important;
}
/* Boîtes de hauteur égale : plutôt que de passer la rangée en flex (ce qui
   casse la mise en page native en inline-block), on rend le CONTENU de hauteur
   constante — l'en-tête est déjà fixe à 100px, il suffit de réserver un nombre
   de lignes fixe pour la description. `vertical-align: top` évite en plus
   l'alignement sur la ligne de base propre à inline-block. */
#page-categories .media-list-wrapper.items-list-ver .media-list-row .item {
  vertical-align: top;
}

/* ------------------------------------------------------------------
   Sections de catégories sur l'accueil (« Afficher sur l'accueil ») :
   injectées par solem-custom.js. Les règles de grille ci-dessus sont en
   body:not(.solem-home), il faut donc les répliquer ici.
   ------------------------------------------------------------------ */
body.solem-home .solem-cat-row {
  margin: 0 0 8px !important;
}
/* Séparateur entre « À la une » et la 1re section de catégorie. Le natif ne le
   pose qu'entre deux .media-list-row consécutives
   (`.media-list-row + .media-list-row`) : le bloc « À la une » étant un <a>,
   la règle ne s'appliquait pas. Même trait, même variable de couleur. */
body.solem-home .solem-featured + .solem-cat-row {
  border-top: 1px solid var(--media-list-row-border-color);
}
body.solem-home .solem-cat-row .media-list-wrapper.items-list-ver .media-list-row {
  display: flex;
  flex-wrap: wrap;
  width: 100% !important;
  max-width: 100% !important;
}
body.solem-home .solem-cat-row .media-list-wrapper.items-list-ver .media-list-row .item {
  width: var(--solem-item-width) !important;
  max-width: none !important;
  margin: 0 var(--solem-gutter) var(--solem-gutter-y) 0 !important;
}
body.solem-home .solem-cat-row .media-list-wrapper.items-list-ver .media-list-row .item .item-content {
  margin-right: 0 !important;
}
/* En-tête de section : titre + lien « VOIR TOUT » alignés. */
/* En-tête de section : titre + « Tout voir » sur une 1re ligne, description en
   dessous (comme la maquette). L'en-tête empile, la ligne reste horizontale. */
body.solem-home .solem-cat-row .media-list-header {
  display: block !important;
  margin: 0 0 14px;
}
body.solem-home .solem-cat-row .solem-cat-headline {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 14px;
}
/* Description de la catégorie : valeurs relevées dans la maquette. */
body.solem-home .solem-cat-row .solem-cat-desc {
  margin: -4px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  color: #46545c;
}
/* Le gris de la maquette est illisible sur fond sombre. */
body.dark_theme .solem-cat-row .solem-cat-desc {
  color: #a7b0b6;
}
body.solem-home .solem-cat-row .media-list-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--body-text-color);
}
body.solem-home .solem-cat-row .media-list-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
}
body.solem-home .solem-cat-row .media-list-header h3 a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: -10px;
  color: var(--solem-blue);
  text-decoration: none;
}
body.solem-home .solem-cat-row .media-list-header h3 a:hover {
  text-decoration: underline;
}
/* Flèche entourée d'un cercle, tracé exporté tel quel depuis la maquette
   (node « P_arrow circle 2 »). Rendue en masque pour hériter de currentColor. */
body.solem-home .solem-cat-row .media-list-header h3 a::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M10.875 6C10.875 7.29293 10.3614 8.53291 9.44715 9.44715C8.53291 10.3614 7.29293 10.875 6 10.875C4.70707 10.875 3.46709 10.3614 2.55285 9.44715C1.63861 8.53291 1.125 7.29293 1.125 6C1.125 4.70707 1.63861 3.46709 2.55285 2.55285C3.46709 1.63861 4.70707 1.125 6 1.125C7.29293 1.125 8.53291 1.63861 9.44715 2.55285C10.3614 3.46709 10.875 4.70707 10.875 6ZM0 6C0 7.5913 0.632141 9.11742 1.75736 10.2426C2.88258 11.3679 4.4087 12 6 12C7.5913 12 9.11742 11.3679 10.2426 10.2426C11.3679 9.11742 12 7.5913 12 6C12 4.4087 11.3679 2.88258 10.2426 1.75736C9.11742 0.632141 7.5913 0 6 0C4.4087 0 2.88258 0.632141 1.75736 1.75736C0.632141 2.88258 0 4.4087 0 6ZM6.90469 3.54375C6.80625 3.43594 6.66797 3.375 6.52031 3.375C6.23438 3.375 6 3.60938 6 3.89766V4.875H3.75C3.33516 4.875 3 5.21016 3 5.625V6.375C3 6.78984 3.33516 7.125 3.75 7.125H6V8.10234C6 8.39062 6.23437 8.625 6.52266 8.625C6.66797 8.625 6.80625 8.56406 6.90703 8.45625L8.87578 6.32344C8.95781 6.23437 9.00234 6.11953 9.00234 5.99766C9.00234 5.87578 8.95781 5.76094 8.87578 5.67188L6.90703 3.53906L6.90469 3.54375Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M10.875 6C10.875 7.29293 10.3614 8.53291 9.44715 9.44715C8.53291 10.3614 7.29293 10.875 6 10.875C4.70707 10.875 3.46709 10.3614 2.55285 9.44715C1.63861 8.53291 1.125 7.29293 1.125 6C1.125 4.70707 1.63861 3.46709 2.55285 2.55285C3.46709 1.63861 4.70707 1.125 6 1.125C7.29293 1.125 8.53291 1.63861 9.44715 2.55285C10.3614 3.46709 10.875 4.70707 10.875 6ZM0 6C0 7.5913 0.632141 9.11742 1.75736 10.2426C2.88258 11.3679 4.4087 12 6 12C7.5913 12 9.11742 11.3679 10.2426 10.2426C11.3679 9.11742 12 7.5913 12 6C12 4.4087 11.3679 2.88258 10.2426 1.75736C9.11742 0.632141 7.5913 0 6 0C4.4087 0 2.88258 0.632141 1.75736 1.75736C0.632141 2.88258 0 4.4087 0 6ZM6.90469 3.54375C6.80625 3.43594 6.66797 3.375 6.52031 3.375C6.23438 3.375 6 3.60938 6 3.89766V4.875H3.75C3.33516 4.875 3 5.21016 3 5.625V6.375C3 6.78984 3.33516 7.125 3.75 7.125H6V8.10234C6 8.39062 6.23437 8.625 6.52266 8.625C6.66797 8.625 6.80625 8.56406 6.90703 8.45625L8.87578 6.32344C8.95781 6.23437 9.00234 6.11953 9.00234 5.99766C9.00234 5.87578 8.95781 5.76094 8.87578 5.67188L6.90703 3.53906L6.90469 3.54375Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Titre de carte resserré sur sa ligne de méta. Deux règles natives sont en
   jeu : `.item-main h3 {margin-top:12px;margin-bottom:8px}` et surtout
   `.items-list-ver.media-list-wrapper .media-list-row .item-main h3
   {margin:.5714285em 0}` (4 classes) qui l'emporte. D'où ce sélecteur long,
   et le margin-top conservé à la valeur native pour ne changer que le bas. */
body.solem-home .solem-cat-row .media-list-wrapper.items-list-ver .media-list-row .item-main h3 {
  margin-top: 0.5714285em;
  margin-bottom: 2px;
}
/* La vignette d'un média injecté a besoin de son ratio (image en background).
   `position: relative` : référentiel du badge de durée (.item-duration, en
   absolu). Le natif le fournit déjà, on le rend explicite car ces cartes sont
   construites à la main. */
body.solem-home .solem-cat-row .item-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  overflow: hidden;
}

/* Pas de fond blanc derrière le titre des items */
.item-content h3 span {
  background: transparent !important;
}

/* Méta des items (vues, date, nb médias…) un peu plus petites */
.item-meta,
.item-meta * {
  font-size: 12px;
}

/* Recherche / consultation catégorie : pas de padding sur le wrapper. */
.search-results-wrap.items-list-hor.media-list-wrapper {
  padding: 0 !important;
}
/* Accueil : les rangées prennent toute la largeur, sans marge ni padding L/R. */
body.solem-home .media-list-wrapper,
body.solem-home .media-list-row {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#page-categories .item {
  border-radius: 14px !important;
  overflow: hidden;
  background: var(--solem-surface) !important;
  box-shadow: 0 4px 16px rgba(5, 26, 38, 0.08);
  /* Gouttières entre les cartes. Mêmes variables que la largeur juste
     au-dessus : une marge en dur (22px) contredisait la largeur calculée dès
     que la gouttière changeait de palier, et il ne tenait plus qu'une carte
     par ligne. Valeurs desktop identiques (22px / 30px). */
  margin: 0 var(--solem-gutter) var(--solem-gutter-y) 0 !important;
}
/* .item-content = conteneur global : sans padding, plein largeur. */
#page-categories .item .item-content {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--solem-surface);
}
/* Le lien unique qui encapsule tout le contenu de la carte. */
#page-categories .item .solem-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* En-tête dégradé : titre blanc, plein largeur, jusqu'aux bords.
   Dégradé = la rampe de marque de la maquette (#2573AC -> #00365C -> #051A26,
   cf. le titre du hero) posée sur la DIAGONALE : bleu au coin HAUT-DROIT,
   quasi-noir au coin BAS-GAUCHE. `to top right` (et non un angle fixe) pour
   que l'axe suive le coin quelle que soit la largeur de la carte.
   Les positions sont celles de la rampe, miroitées (p -> 100-p) puisque la
   lecture part ici du noir : 90/40/0 -> 10/60/100. */
#page-categories .item .item-header {
  display: flex;
  align-items: center;          /* titre centré verticalement */
  width: 100%;
  height: 100px;
  min-height: 100px;
  background: linear-gradient(to top right, #051A26 10%, #00365C 60%, #2573AC 100%);
}
#page-categories .item .item-header h3 {
  margin: 0;
  padding: 0 20px;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* Corps blanc : description puis nombre de médias. */
#page-categories .item .item-body {
  padding: 14px 18px 16px;
  background: var(--solem-surface);
}
/* Deux lignes réservées pour la description : sans cela, une description sur
   1 ligne et une sur 2 donneraient des hauteurs différentes d'une LIGNE de
   cartes à l'autre (l'étirement flex n'égalise qu'au sein d'une même ligne).
   Au-delà de 2 lignes, on tronque avec des points de suspension. */
#page-categories .item .item-body .item-description {
  margin: 0 0 6px;
  color: var(--solem-navy);
  font-weight: 500;
  line-height: 1.35;
  min-height: calc(2 * 1.35em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#page-categories .item .item-body .item-media-count {
  color: var(--solem-muted);
  font-size: 13px;
}

/* En-têtes de sections sur la page Catégories (Vidéos / Documentations),
   injectés par solem-custom.js. Pleine largeur pour casser la grille. */
.solem-cat-head {
  flex-basis: 100% !important;
  width: 100% !important;
  grid-column: 1 / -1 !important;
  font-size: 20px;
  font-weight: 700;
  color: var(--body-text-color);
  margin: 18px 0 14px;
  padding: 0 2px;
}

/* Titres de sections (injectés par solem-custom.js) */
.nav-menu li.solem-nav-section-title {
  list-style: none;
  padding: 18px 20px 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  /* couleur adaptative (clair = navy, sombre = clair) */
  color: var(--sidebar-nav-item-text-color);
  pointer-events: none;
  cursor: default;
  background: none;
}

/* Popup du menu utilisateur (haut-droite) : uniformisé avec les
   boîtes login/logout (coins arrondis + ombre douce). */
.page-header-right .popup {
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(5, 26, 38, 0.12) !important;
  overflow: hidden;
}
/* Item actif : pastille bleu pâle INSET (marges 20px), portée par le <a>
   + bordure fine bleue (box-shadow => pas de décalage) + texte bleu.
   Le fond est retiré du <li> pour ne pas doubler la pastille. */
/* Fond retiré du <li> (actif ET survol) pour ne pas doubler la pastille. */
.nav-menu li.link-item.active,
.nav-menu li.link-item:hover {
  background-color: transparent !important;
}
/* Pastille INSET identique pour :hover ET .active (uniformisés) :
   marges 20px, fond #EAF2F7, bordure 0.80px #6EA5C7 (maquette), texte/icône bleus.
   padding-left 11.2px = 32 (non-actif) - 20 (margin) - 0.8 (border) => icône alignée. */
.nav-menu li.link-item a:hover,
.nav-menu li.link-item.active > a,
.nav-menu li.link-item a.active {
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-right: 20px;
  background-color: var(--nav-menu-active-item-bg-color);
  color: var(--solem-blue);
  font-weight: 350;
  box-shadow: none;
  /* bordure transparente partagée => même géométrie (pas de saut d'icône) ;
     seule la version .active la colore. */
  border: solid 0.8px transparent;
  padding-left: 11.2px;
  padding-right: 12px;   /* un peu plus de place pour les libellés longs */
}
.nav-menu li.link-item.active > a,
.nav-menu li.link-item a.active {
  border-color: var(--solem-blue-soft);
}
.nav-menu li.link-item a:hover .material-icons,
.nav-menu li.link-item.active > a .material-icons,
.nav-menu li.link-item a.active .material-icons {
  color: var(--solem-blue);
}

/* ---- Icônes de menu : remap pour coller à la maquette ----
   Les icônes sont rendues via ::after { content: attr(data-icon) }
   avec la police "Material Icons" (auto-hébergée). On remappe le
   glyphe en surchargeant le content (React ne touche pas au ::after). */
.nav-item-categories .material-icons[data-icon]::after {
  content: "layers";   /* calques empilés, comme la maquette */
}

/* Liens d'admin « Gérer les… » : icônes spécifiques (au lieu du même
   miscellaneous_services partout). */
.nav-item-manage-media .material-icons[data-icon]::after {
  content: "video_settings";
}
.nav-item-manage-users .material-icons[data-icon]::after {
  content: "manage_accounts";
}
/* Gérer les commentaires : SVG vectorisé fidèle au PNG fourni (bulle
   outline + engrenage plein à dents pointues avec trou), en mask =>
   suit la couleur courante (grise / bleue à l'actif-survol). */
.nav-item-manage-comments .material-icons[data-icon]::after {
  content: "" !important;
}
.nav-item-manage-comments .material-icons {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='256.000000pt' height='256.000000pt' viewBox='0 0 256.000000 256.000000' preserveAspectRatio='xMidYMid meet'%3E %3Cg transform='translate(0.000000,256.000000) scale(0.100000,-0.100000)' fill='%23000000' stroke='none'%3E %3Cpath d='M226 2415 c-49 -17 -103 -68 -127 -120 -18 -38 -19 -82 -19 -830 l0 -790 223 222 222 223 631 2 631 3 42 30 c24 16 47 39 52 52 5 13 13 23 18 23 28 0 32 85 29 565 l-3 490 -34 49 c-24 34 -48 55 -85 72 l-51 24 -745 -1 c-608 0 -752 -2 -784 -14z m1522 -161 l22 -15 0 -461 c0 -415 -2 -463 -17 -480 -15 -17 -49 -18 -657 -18 l-641 0 -100 -100 c-55 -55 -103 -100 -107 -100 -5 0 -8 259 -8 575 0 562 0 575 20 595 20 20 33 20 743 20 638 0 725 -2 745 -16z'/%3E %3Cpath d='M1895 1178 c-3 -18 -9 -55 -13 -82 -7 -49 -8 -50 -59 -70 -28 -12 -71 -35 -95 -53 l-43 -31 -58 23 c-98 40 -91 42 -128 -22 -19 -32 -34 -61 -34 -64 0 -4 26 -28 58 -53 l57 -47 -6 -77 c-4 -44 -2 -93 4 -114 11 -40 12 -39 -111 -139 -6 -4 59 -129 67 -129 1 0 31 11 66 25 35 14 70 25 77 25 7 0 38 -16 67 -36 30 -20 72 -42 93 -49 35 -12 38 -17 45 -62 4 -26 10 -63 13 -80 l6 -33 74 0 73 0 7 74 c4 40 10 77 14 82 3 5 24 15 46 23 22 7 61 29 88 47 26 19 54 34 62 34 9 0 43 -11 77 -25 34 -14 63 -25 64 -25 1 0 19 28 40 61 32 53 35 64 23 73 -9 6 -35 27 -60 48 l-44 36 1 120 0 121 57 47 c31 25 57 48 57 50 0 6 -73 124 -77 124 -2 0 -36 -14 -75 -30 l-70 -30 -47 34 c-25 18 -67 41 -93 51 -53 19 -54 22 -64 118 l-6 67 -74 0 -73 0 -6 -32z m190 -296 c108 -55 159 -181 124 -306 -14 -52 -103 -141 -155 -155 -103 -29 -188 -8 -260 63 -165 166 -42 437 191 423 34 -3 78 -13 100 -25z'/%3E %3C/g%3E %3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='256.000000pt' height='256.000000pt' viewBox='0 0 256.000000 256.000000' preserveAspectRatio='xMidYMid meet'%3E %3Cg transform='translate(0.000000,256.000000) scale(0.100000,-0.100000)' fill='%23000000' stroke='none'%3E %3Cpath d='M226 2415 c-49 -17 -103 -68 -127 -120 -18 -38 -19 -82 -19 -830 l0 -790 223 222 222 223 631 2 631 3 42 30 c24 16 47 39 52 52 5 13 13 23 18 23 28 0 32 85 29 565 l-3 490 -34 49 c-24 34 -48 55 -85 72 l-51 24 -745 -1 c-608 0 -752 -2 -784 -14z m1522 -161 l22 -15 0 -461 c0 -415 -2 -463 -17 -480 -15 -17 -49 -18 -657 -18 l-641 0 -100 -100 c-55 -55 -103 -100 -107 -100 -5 0 -8 259 -8 575 0 562 0 575 20 595 20 20 33 20 743 20 638 0 725 -2 745 -16z'/%3E %3Cpath d='M1895 1178 c-3 -18 -9 -55 -13 -82 -7 -49 -8 -50 -59 -70 -28 -12 -71 -35 -95 -53 l-43 -31 -58 23 c-98 40 -91 42 -128 -22 -19 -32 -34 -61 -34 -64 0 -4 26 -28 58 -53 l57 -47 -6 -77 c-4 -44 -2 -93 4 -114 11 -40 12 -39 -111 -139 -6 -4 59 -129 67 -129 1 0 31 11 66 25 35 14 70 25 77 25 7 0 38 -16 67 -36 30 -20 72 -42 93 -49 35 -12 38 -17 45 -62 4 -26 10 -63 13 -80 l6 -33 74 0 73 0 7 74 c4 40 10 77 14 82 3 5 24 15 46 23 22 7 61 29 88 47 26 19 54 34 62 34 9 0 43 -11 77 -25 34 -14 63 -25 64 -25 1 0 19 28 40 61 32 53 35 64 23 73 -9 6 -35 27 -60 48 l-44 36 1 120 0 121 57 47 c31 25 57 48 57 50 0 6 -73 124 -77 124 -2 0 -36 -14 -75 -30 l-70 -30 -47 34 c-25 18 -67 41 -93 51 -53 19 -54 22 -64 118 l-6 67 -74 0 -73 0 -6 -32z m190 -296 c108 -55 159 -181 124 -306 -14 -52 -103 -141 -155 -155 -103 -29 -188 -8 -260 63 -165 166 -42 437 191 423 34 -3 78 -13 100 -25z'/%3E %3C/g%3E %3C/svg%3E") center / contain no-repeat;
}

/* Icônes fidèles à la maquette */
.nav-item-my-playlists .material-icons[data-icon]::after {
  content: "account_circle";   /* personne dans un cercle (maquette) */
}
.nav-item-contact .material-icons[data-icon]::after {
  content: "help";             /* ? dans un cercle (maquette) */
}

/* Liens régionaux (Europe/USA/MEA) : picto SOLEM rond à la place
   de l'icône Material (item marqué .solem-region via la config). */
.solem-region .material-icons[data-icon]::after {
  content: "" !important;
}
.solem-region .material-icons {
  width: 24px;
  height: 24px;
  background: url("/static/favicons/android-chrome-192x192.png") center/cover no-repeat;
  border-radius: 50%;
}

/* Logo SOLEM Studio (haut à gauche) : décalage vers la droite.
   .logo a margin:0 (bundle) et le layout du header neutralise le margin
   => on décale via le PADDING du wrapper interne du header-left. */
.page-header-left > div {
  padding-left: 20px !important;
}

/* ============================================================
   LOGO ROND SOLEM en haut à droite (favicon auto-hébergé).
   Ajouté en pseudo-élément à la fin de la zone header-right.
   ============================================================ */
/* L'avatar du header EST le logo rond SOLEM (remplace le silhouette
   par défaut ; pas de logo séparé en doublon).
   Ciblé sur le header uniquement (.user-thumb) => l'avatar du menu
   déroulant reste inchangé. */
.page-header-right .user-thumb .thumbnail.small-thumb {
  background: #FFFFFF url("/static/favicons/android-chrome-192x192.png") center / cover no-repeat !important;
}
.page-header-right .user-thumb .thumbnail.small-thumb img,
.page-header-right .user-thumb .thumbnail.small-thumb .material-icons {
  display: none !important;
}

/* ============================================================
   HERO d'accueil « Toute la puissance de nos solutions »
   Le hero est injecté par le bundle avec son propre <style>
   (chargé APRÈS ce fichier) => on surcharge avec plus de
   spécificité (body .solem-hero) + !important.
   - marges autour (comme la maquette, carte insérée)
   - vraies couleurs SOLEM Figma
   ============================================================ */
body .solem-hero {
  /* Mise en page autonome (le <style> baké n'existe QUE sur l'accueil ;
     ici on couvre toutes les pages). */
  position: relative;
  display: flex !important;
  align-items: center;
  min-height: 132px;
  padding: 30px 36px;
  /* Marge haute = gouttière de page : l'écart sous l'en-tête doit valoir
     celui des côtés, sinon le hero paraît collé à la barre. Pas de marge
     horizontale, elle est gérée par .page-main-wrap. */
  margin: var(--solem-page-gutter) 0 28px !important;
  border-radius: 16px !important;
  overflow: hidden;
  /* Fond + illustration RÉELLE de la maquette (raster Figma).
     L'image EST le fond complet du hero => cover pour couvrir toute
     la largeur (plus aucune zone de repli / pas de raccord de teinte),
     ancrée à droite pour garder l'illustration visible. */
  background: var(--solem-hero-bg) url("/static/images/solem-hero-bg.png") right center / cover no-repeat !important;
}
body .solem-hero .solem-hero-content {
  position: relative;
  z-index: 2;
  max-width: 66%;
}
/* Masquer la déco SVG approximative bakée dans le bundle */
body .solem-hero .solem-hero-deco {
  display: none !important;
}
body .solem-hero .solem-hero-eyebrow {
  display: block;
  color: var(--solem-blue) !important;
  font-weight: 500 !important;
  font-size: 15px;
  line-height: 1.2;
  margin: 0 0 6px;
}
/* Titre en dégradé bleu -> marine (valeurs exactes Figma).
   Le texte reste réel (traduisible / accessible). */
body .solem-hero .solem-hero-title {
  display: block;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  font-weight: 500 !important;
  font-size: 28px !important;
  background: linear-gradient(90deg, #2573AC 0%, #00365C 40%, #051A26 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* Heros injectés hors accueil (Catégorie, sous-catégorie, sections) :
   pas de dégradé sur le titre — aplat #051A26 (retour maquette). Il faut
   annuler aussi `-webkit-text-fill-color`, sinon le texte reste transparent. */
body .solem-hero--page .solem-hero-title {
  background: none !important;
  -webkit-text-fill-color: var(--solem-navy) !important;
  color: var(--solem-navy) !important;
}

/* ---- Bannière en MODE SOMBRE ------------------------------------
   L'illustration est un tracé 100% #2879B3 en alpha variable (aucun
   aplat clair baké dans le PNG) : elle se pose telle quelle sur un
   fond sombre, on ne change donc QUE les couleurs, pas l'image.
   `body.dark_theme .solem-hero` (0,3,1) l'emporte sur le
   `background: … !important` de `body .solem-hero` (0,2,1) ; on ne
   surcharge que `background-color`, la couche image est conservée. */
body.dark_theme .solem-hero {
  background-color: var(--solem-hero-bg-dark) !important;
}
body.dark_theme .solem-hero .solem-hero-eyebrow {
  /* #2879B3 tombe à 3.2:1 sur ce fond : on passe au bleu adouci (5.9:1). */
  color: var(--solem-blue-soft) !important;
}
/* Titre : le dégradé (et l'aplat #051A26 des heros de page) sont illisibles
   sur fond sombre => aplat clair. Annuler `-webkit-text-fill-color`, sinon
   le texte reste transparent. */
body.dark_theme .solem-hero .solem-hero-title,
body.dark_theme .solem-hero--page .solem-hero-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--solem-hero-title-dark) !important;
  color: var(--solem-hero-title-dark) !important;
}

/* ============================================================
   MESSAGES (.alert) — uniformisés avec le hero :
   arrondis + marges horizontales alignées, style SOLEM.
   ("Connexion avec X réussie", etc.)
   ============================================================ */
.alert {
  display: flex !important;
  align-items: center !important;        /* texte centré verticalement */
  min-height: 56px !important;
  width: auto !important;
  /* Marges verticales alignées sur la gouttière de page : la bulle se
     détache de l'en-tête comme du bloc qui la suit, de la même distance que
     les bords latéraux. Pas de marge horizontale, .page-main-wrap s'en
     charge. */
  margin: var(--solem-page-gutter) 0 var(--solem-page-gutter) !important;
  border-radius: 12px !important;
  padding: 12px 56px 12px 24px !important;
  color: var(--solem-navy) !important;
  font-weight: 500;
}
.alert.success {
  background-color: var(--solem-blue-pale) !important;
}
/* Enveloppe des messages qui contiennent du HTML, émise par
   solem_sso/adapter.py. Elle est l'unique item flex de la bulle : sans elle,
   un message portant un <a> serait éclaté en deux items (le texte, puis le
   lien), et le lien se retrouverait collé à droite de la bulle au lieu d'être
   inséré dans la phrase.
   `min-width: 0` autorise le retour à la ligne : un item flex refuse par
   défaut de descendre sous la largeur de son plus long mot. */
.solem-alert-text {
  flex: 1 1 auto;
  min-width: 0;
}
/* Disparition automatique (cf. autoDismissAlerts dans solem-custom.js).
   Le natif anime `.alert.hiding` par un `margin-top: -4rem`, mais notre marge
   est en !important ci-dessus : elle neutraliserait ce glissement. On ajoute
   donc un fondu, qui fonctionne quelles que soient les marges. */
.alert {
  transition: margin-top 0.3s ease, opacity 0.3s ease !important;
}
.alert.hiding {
  opacity: 0;
}
.alert .close {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  margin: 0;
}

/* ---- Notifications en MODE SOMBRE -------------------------------
   Le bundle ne prévoit AUCUNE variante sombre pour `.alert` : les cinq
   types restent des pastels clairs avec un texte quasi noir (`.alert`
   #e6e6e6, `.info` #e6e6fa, `.error` #fae6e6, `.warning` #fafae6,
   `.success` #e6f0e6). On rejoue les mêmes teintes en version sombre.
   `body.dark_theme .alert.success` (0,3,1) l'emporte sur le
   `background-color: … !important` de `.alert.success` (0,2,0). */
body.dark_theme .alert {
  color: var(--body-text-color) !important;
  background-color: #202A2E !important;
}
body.dark_theme .alert.success { background-color: #102A38 !important; }  /* teinte SOLEM */
body.dark_theme .alert.info    { background-color: #1B2440 !important; }
body.dark_theme .alert.error   { background-color: #351A1D !important; }
body.dark_theme .alert.warning { background-color: #332B14 !important; }
body.dark_theme .alert .close {
  color: var(--body-text-color);
}
body.dark_theme .alert .close:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   BOÎTES SIGN IN / SIGN OUT (templates account/login.html &
   account/logout.html — même structure .user-action-form-inner,
   donc stylées et uniformisées ensemble).
   ============================================================ */
.user-action-form-wrap {
  padding-right: 0 !important;         /* recentrer la carte */
  margin: 3.5em 1em 2em !important;
}
.user-action-form-inner {
  max-width: 460px !important;
  padding: 2.5em 2.5em 2em !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(5, 26, 38, 0.10) !important;
}
/* Picto SOLEM rond en haut de la carte */
.user-action-form-inner::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 1.2em;
  border-radius: 50%;
  /* Le favicon est un disque bleu opaque avec le « S » ÉVIDÉ (alpha 0) :
     sans aplat dessous, le S laisse voir la carte — blanche en clair, mais
     #242424 en sombre (S bleu foncé sur disque bleu). On pose donc le même
     fond blanc que l'avatar du header, le S reste blanc dans les 2 thèmes.
     104% (et non `cover`) : le PNG a 3px de marge transparente sur 192, qui
     laisserait un liseré blanc d'~1px autour du disque sur la carte sombre. */
  background: var(--solem-surface) url("/static/favicons/android-chrome-192x192.png") center / 104% no-repeat;
}
.user-action-form-inner h1 {
  text-align: center;
  font-weight: 700 !important;
  color: var(--body-text-color);
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0.25em !important;
}
.user-action-form-inner h1 + p,
.user-action-form-inner > p {
  text-align: center;
  color: var(--solem-muted);
}
body.dark_theme .user-action-form-inner h1 + p,
body.dark_theme .user-action-form-inner > p {
  color: var(--solem-muted-dark);
}
/* Champs de saisie arrondis */
.user-action-form-inner input[type="text"],
.user-action-form-inner input[type="email"],
.user-action-form-inner input[type="password"] {
  height: 44px;
  padding: 0 16px !important;
  border: 1px solid var(--solem-border) !important;
  border-radius: 10px !important;
  background: var(--solem-surface) !important;
}
.user-action-form-inner input[type="text"]:focus,
.user-action-form-inner input[type="email"]:focus,
.user-action-form-inner input[type="password"]:focus {
  border-color: var(--solem-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(40, 121, 179, 0.15) !important;
}
/* Bouton principal : bleu SOLEM plein, arrondi, pleine largeur */
.user-action-form-inner form *[type="submit"],
.user-action-form-inner form .primaryAction {
  width: 100%;
  background-color: var(--solem-blue) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 600;
  padding: 0.9em 2em !important;
}
.user-action-form-inner form *[type="submit"]:hover,
.user-action-form-inner form .primaryAction:hover {
  background-color: var(--solem-blue-dark) !important;
}
/* Bouton secondaire (Cancel) : fantôme, pour uniformiser Sign Out */
.user-action-form-inner form .secondaryAction {
  display: block;
  float: none !important;   /* natif = float:right => sortait de la carte */
  width: 100%;
  text-align: center;
  background: transparent !important;
  color: var(--solem-muted) !important;
  border: 1px solid var(--solem-border) !important;
  border-radius: 10px !important;
  margin: 0.5em 0 0 !important;
}

/* ============================================================
   PAGE DE CONNEXION dédiée (templates/account/login.html).
   Toutes les valeurs viennent du node Figma
   « studio.solem-irrigation.com/login » (8978:2440) :
   carte 460×562 r24 rgba(5,26,38,.35) bordure rgba(241,242,243,.13),
   groupe champs r15 rgba(12,32,45,.6) bordure rgba(54,71,82,.4),
   CTA primaire #2879B3 r50, CTA secondaire bordure #2879B3 r30,
   textes secondaires #9CA3AF.
   La page étend root.html : ni header, ni sidebar, ni footer.
   ============================================================ */
/* Fond : un seul dégradé CSS, plus aucune image raster.
   Paramètres obtenus en ajustant un dégradé radial sur les pixels du rendu
   Figma (grille de 684 points de fond, carte et textes exclus) : centre à 90%
   de la largeur sur le bord bas, rayons 90% × 75%. Écart résiduel moyen
   3,9/255, 99% des points sous 10/255.
   Gains : net à toute résolution, ~1 Ko au lieu de 850 Ko, et le halo suit le
   format de la fenêtre au lieu d'être déformé par un `cover`. */
body.solem-auth-page {
  min-height: 100vh;
  background:
    radial-gradient(90% 75% at 90% 100%,
      #1c6ca4 0%,
      #18649a 10%,
      #0f5383 20%,
      #064069 30%,
      #013254 40%,
      #002844 50%,
      #002137 60%,
      #021d2e 70%,
      rgba(5, 26, 38, 0) 88%),
    #051a26;
  background-attachment: fixed;
  color: #fff;
}
/* root.html enveloppe le contenu dans .page-main-wrap : on neutralise les
   marges/paddings prévus pour la sidebar (absente ici). */
body.solem-auth-page .page-main-wrap {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh;
}
.solem-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-height: 100vh;
  padding: 40px 20px;
  box-sizing: border-box;
}
.solem-auth-brand {
  text-align: center;
}
/* Logo = lockup blanc (mot-symbole + label « STUDIO » sous son bord droit),
   le MÊME fichier que la sidebar en mode sombre. La géométrie de la maquette
   (node « Logo V2 ») est portée par le raster : mot-symbole 332×59 puis label
   86×22 — d'où la largeur 332px imposée ici, la hauteur suivant le ratio. */
.solem-auth-logo {
  width: 332px;
  max-width: 100%;
  margin: 0 auto;
}
.solem-auth-lockup {
  display: block;
  width: 100%;
  height: auto;
}
.solem-auth-tagline {
  margin: 24px 0 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 22px;
  color: #fff;
}
.solem-auth-tagline strong {
  font-weight: 500;
}
/* --- la carte --- */
.solem-auth-card {
  width: 460px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 32px 48px 28px;
  background: rgba(5, 26, 38, 0.35);
  border: 1px solid rgba(241, 242, 243, 0.13);
  border-radius: 24px;
  /* lisibilité du texte par-dessus l'illustration de fond */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.solem-auth-title {
  margin: 0 0 24px;
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  color: #fff;
  text-align: center;
}
.solem-auth-errors {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.5);
  color: #fecaca;
  font-size: 13px;
}
.solem-auth-errors p { margin: 0; }
.solem-auth-errors p + p { margin-top: 4px; }
.solem-auth-label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 300;
  line-height: 18px;
  color: #9ca3af;
}
/* --- icônes (police Material Symbols déjà auto-hébergée) --- */
.solem-auth-icon,
.solem-auth-chevron {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "wght" 250;
  font-size: 20px;
  line-height: 1;
  color: #2879b3;
  flex: 0 0 auto;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
.solem-auth-chevron {
  color: #9ca3af;
  pointer-events: none;
}
/* --- sélecteur de région --- */
.solem-auth-region { margin: 0 0 20px; }
.solem-auth-select-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  background: rgba(12, 32, 45, 0.6);
  border: 1px solid rgba(54, 71, 82, 0.4);
  border-radius: 12px;
}
.solem-auth-select {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 300;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
/* la liste déroulante native est rendue par l'OS : fond sombre lisible */
.solem-auth-select option {
  background: #0c202d;
  color: #fff;
}
/* --- champs email / mot de passe : un seul bloc avec séparateur --- */
.solem-auth-fields {
  background: rgba(12, 32, 45, 0.6);
  border: 1px solid rgba(54, 71, 82, 0.4);
  border-radius: 15px;
  overflow: hidden;
}
.solem-auth-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 14px;
}
.solem-auth-field + .solem-auth-field {
  border-top: 1px solid rgba(54, 71, 82, 0.4);
}
.solem-auth-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 300;
  outline: none;
}
.solem-auth-field input::placeholder {
  color: #fff;
  opacity: 1;
}
/* l'autofill Chrome repeint le fond en jaune : on le neutralise */
.solem-auth-field input:-webkit-autofill,
.solem-auth-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #0c202d inset;
  caret-color: #fff;
}
/* --- ligne « Rester connecté » / « Mot de passe oublié ? » --- */
.solem-auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 22px;
  font-size: 14px;
  font-weight: 300;
  line-height: 18px;
  color: #9ca3af;
}
.solem-auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
/* Case à cocher entièrement redessinée : `accent-color` laissait le système
   peindre un fond blanc à l'état décoché, incompatible avec le fond sombre.
   Décochée = carré transparent bordé de gris ; cochée = aplat bleu dans lequel
   la coche est DÉCOUPÉE (vraie transparence : on voit la carte au travers).
   Technique : deux couches de masque, « carré plein » MOINS « coche », via
   mask-composite. Aucune couleur en dur à maintenir si le fond change. */
.solem-auth-remember input {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid #8c99a4;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.solem-auth-remember input:hover { border-color: #b6c0c8; }
.solem-auth-remember input:checked {
  background: #2879b3;
  border-color: #2879b3;
  -webkit-mask:
    linear-gradient(#000 0 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.6 4 12.05l1.4-1.4 4.15 4.15 9.05-9.05 1.4 1.4z'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.6 4 12.05l1.4-1.4 4.15 4.15 9.05-9.05 1.4 1.4z'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
  mask-composite: exclude;
}
.solem-auth-remember input:focus-visible {
  outline: 2px solid rgba(40, 121, 179, 0.6);
  outline-offset: 2px;
}
.solem-auth-forgot,
.solem-auth-policy {
  color: #9ca3af;
  text-decoration: underline;
}
.solem-auth-forgot:hover,
.solem-auth-policy:hover { color: #fff; }
/* --- boutons --- */
.solem-auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}
.solem-auth-btn--primary {
  background: #2879b3;
  border: 1px solid #2879b3;
  border-radius: 50px;
  color: #fff;
}
.solem-auth-btn--primary:hover { background: #2f8ac9; border-color: #2f8ac9; }
.solem-auth-btn--ghost {
  margin-top: 16px;
  background: transparent;
  border: 1px solid #2879b3;
  border-radius: 30px;
  color: #2879b3;
}
.solem-auth-btn--ghost:hover { background: rgba(40, 121, 179, 0.12); color: #fff; }

/* --- SSO MySOLEM --- */
.solem-auth-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  font-size: 13px;
  font-weight: 300;
  color: #9ca3af;
}
.solem-auth-sep::before,
.solem-auth-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(241, 242, 243, 0.16);
}
.solem-auth-btn--sso {
  gap: 8px;
  background: rgba(241, 242, 243, 0.08);
  border: 1px solid rgba(241, 242, 243, 0.28);
  border-radius: 50px;
  color: #fff;
}
.solem-auth-btn--sso:hover {
  background: rgba(241, 242, 243, 0.16);
  border-color: rgba(241, 242, 243, 0.45);
}
.solem-auth-policy {
  display: block;
  margin: 20px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  text-align: center;
}
/* --- bulles de messages (root.html les injecte hors de notre bloc) --- */
body.solem-auth-page .alert {
  max-width: 460px;
  margin: 16px auto 0 !important;
  background: rgba(5, 26, 38, 0.6);
  border: 1px solid rgba(241, 242, 243, 0.13);
  color: #fff;
}
/* `!important` est indispensable ici : le bloc MESSAGES plus haut impose
   `color: var(--solem-navy) !important` pour uniformiser les bulles sur les
   pages de l'application. Sans `!important`, ce navy l'emporterait malgré la
   spécificité plus forte de ce sélecteur, et le texte resterait sombre sur le
   fond foncé de la page d'authentification.
   Le sélecteur `*` couvre en plus la croix de fermeture, à laquelle
   `_commons.css` fixe sa propre couleur sombre. */
body.solem-auth-page .alert,
body.solem-auth-page .alert * {
  color: #fff !important;
}
body.solem-auth-page .alert {
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
}
/* Les variantes de bulles sont pensées pour les pages de l'application, sur
   fond clair : `.alert.success` y reçoit `var(--solem-blue-pale) !important`,
   un bleu très pâle qui devient illisible sous le texte blanc de cette page.
   On redonne à chacune un fond sombre, uniforme avec la bulle d'erreur, le
   liseré portant seul la distinction sémantique.
   `!important` est nécessaire : la règle globale de `.success` en porte un. */
body.solem-auth-page .alert.error {
  background: rgba(120, 30, 40, 0.55) !important;
  border-color: rgba(255, 140, 150, 0.4);
}
body.solem-auth-page .alert.success {
  background: rgba(25, 90, 70, 0.55) !important;
  border-color: rgba(120, 220, 175, 0.4);
}
body.solem-auth-page .alert.info,
body.solem-auth-page .alert.debug {
  background: rgba(25, 75, 115, 0.55) !important;
  border-color: rgba(140, 200, 245, 0.4);
}
body.solem-auth-page .alert.warning,
body.solem-auth-page .alert.warn {
  background: rgba(115, 85, 20, 0.55) !important;
  border-color: rgba(245, 210, 120, 0.4);
}
/* Lien du message « accès refusé » (demande d'accès professionnel) : la règle
   `* { color: #fff !important }` ci-dessus l'aplatit sur le texte voisin, le
   soulignement est donc le seul indice qu'il s'agit d'un lien. */
body.solem-auth-page .alert a {
  font-weight: 500;
  text-decoration: underline;
}
body.solem-auth-page .alert a:hover {
  text-decoration: none;
}
body.solem-auth-page .alert .close {
  opacity: 0.6;
}
body.solem-auth-page .alert .close:hover {
  opacity: 1;
}
/* root.html injecte les bulles dans .page-main-wrap, donc AVANT .solem-auth :
   dans le flux normal, elles poussaient toute la maquette vers le bas et
   faisaient déborder son `min-height: 100vh`. On les sort du flux pour qu'elles
   se superposent sans rien déplacer.
   `margin` et `position` doivent être en !important : le bloc MESSAGES plus
   haut impose `margin: 16px 0 0 !important`. */
body.solem-auth-page .alert {
  position: fixed !important;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(460px, calc(100% - 32px));
  margin: 0 !important;
  z-index: 1000;
}
/* Plusieurs messages simultanés se superposeraient au même endroit : on les
   décale. Le sélecteur d'adjacence fonctionne car messages.html les émet en
   frères consécutifs. */
body.solem-auth-page .alert + .alert {
  top: 88px;
}
body.solem-auth-page .alert + .alert + .alert {
  top: 160px;
}

/* --- page intermédiaire « Connexion via MySOLEM » --- */
.solem-auth-lead {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 300;
  line-height: 22px;
  color: #c9d3da;
}
.solem-auth-note {
  margin: 0 0 24px;
  padding: 16px 18px;
  background: rgba(40, 121, 179, 0.12);
  border: 1px solid rgba(40, 121, 179, 0.3);
  border-radius: 16px;
}
.solem-auth-note-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.solem-auth-note ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: #c9d3da;
}
.solem-auth-note-foot {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  color: #9ca3af;
}
/* --- petits écrans --- */
@media (max-width: 520px) {
  .solem-auth-card { padding: 26px 22px 22px; }
  .solem-auth-logo { width: 240px; }
  .solem-auth { gap: 28px; }
}

/* « À suivre » : retirer la colonne quand elle n'a rien à montrer
   ---------------------------------------------------------------
   Un média en mode « À suivre » désactivé, ou en sélection manuelle vide,
   renvoie `related_media: []`. Les composants AutoPlay et RelatedMedia ne
   rendent alors rien, mais leur conteneur `.viewer-sidebar` reste en place et
   garde son tiers de largeur : le média se retrouve collé à une colonne vide.

   Fait ici en CSS, et non dans le bundle React : ce dépôt ne versionne pas le
   bundle (cf. la fin de .gitignore), donc une modification de `frontend/src`
   n'atteindrait jamais la production. `:empty` ne vise que le cas voulu — avec
   une playlist en cours, la sidebar contient PlaylistView. */
.viewer-sidebar:empty {
  display: none;
}

.viewer-section:has(.viewer-sidebar:empty) .viewer-container,
.viewer-section:has(.viewer-sidebar:empty) .viewer-info {
  width: 100%;
}

/* Sans colonne, on revient à la largeur « normale » : le mode large (1754px)
   étirerait le lecteur sur toute la page. Le mode cinéma garde la sienne. */
.viewer-section:has(.viewer-sidebar:empty):not(.theater-mode) {
  max-width: 1328px;
}

/* Retraits d'interface faits en CSS, faute de bundle versionné
   -----------------------------------------------------------
   Les deux blocs ci-dessous sont codés en dur dans le bundle React : aucun
   drapeau de `templates/config/installation/` ne les pilote. Ce dépôt ne
   versionne pas `static/js/_commons.js` (cf. la fin de .gitignore), donc une
   modification de `frontend/src` n'atteindrait jamais la production — même
   raisonnement que pour la colonne « À suivre » plus haut. */

/* 1. Page média : retirer les commentaires.
   CommentsList est monté sans condition par ViewerInfoContent, et le
   formulaire ne dépend que de `media.enable_comments`, drapeau posé média par
   média — rien ne le coupe globalement. `.comments-list` est le conteneur
   unique du bloc (en-tête, formulaire et fil) et n'est employé nulle part
   ailleurs. Le POST, lui, est refusé côté serveur par CAN_COMMENT
   (deploy/docker/local_settings.py) : ce masquage n'est que la moitié
   visible. */
.comments-list {
  display: none;
}

/* 2. Page de profil : retirer l'en-tête quand le hero dit déjà la même chose.
   `.profile-page-header` (bannière, avatar, nom, barre d'onglets) est monté
   sans condition par ProfilePagesHeader, alors que solem-custom.js pose
   juste au-dessus un hero annonçant « Vos contenus / Mes playlists ». Le bloc
   ne fait plus que répéter, pour ~400px de hauteur sur desktop et ~190px sur
   téléphone.

   Le `:has()` borne le masquage : le hero n'est injecté que si un item de la
   sidebar est actif, c'est-à-dire sur SES propres pages. Sur le profil d'un
   autre membre (/user/<nom>/playlists, atteignable par le lien d'auteur d'une
   carte), il n'y en a pas — l'en-tête reste, avec l'avatar et le nom, seule
   indication de qui on regarde. Le hero est bien enfant direct de .page-main :
   `.page-main-inner` n'existe pas sur les pages React (templates/base.html ne
   le pose que sur les pages rendues par Django) et injectHero() retombe donc
   sur .page-main.

   ⚠️ Différence assumée avec Attentive, où la barre d'onglets était déjà
   réduite à « Playlists ». Ici elle est complète, et le masquage l'emporte
   avec le reste : « Médias », « Médias aimés » et « Playlists » restent
   accessibles par la sidebar, mais « À propos », « Partagé par moi » et
   « Partagé avec moi » ne le sont plus que par leur URL. Le crayon d'édition
   de la bannière disparaît aussi, et le menu utilisateur ne le remplace pas
   (il ne propose que « My media », le thème et la déconnexion).
   Choix fait en connaissance de cause, le 18 septembre 2026. */
.page-main:has(> .solem-hero) .profile-page-header {
  display: none;
}

/* 3. Pages de profil : rendre le fond de contenu au reste de la page.
   MediaCMS peint `.page-main` en blanc sur ces pages (_commons.css, via
   `--profile-page-bg-color`, que ce thème fixe plus haut à la couleur de
   surface) parce qu'elles y posaient la bannière, l'avatar et les onglets.
   Le bloc 2 ci-dessus les ayant retirés, il ne reste qu'un grand aplat blanc
   sur lequel le hero flotte — et ses coins arrondis laissent voir ce blanc au
   lieu du fond de page, ce qui les fait lire comme des coins carrés.
   On reprend ici le choix que MediaCMS fait déjà lui-même en mode sombre, où
   la variable retombe sur `var(--body-bg-color)`.

   C'est bien la VARIABLE qu'on redéfinit, et non la seule `background-color` :
   `--profile-page-bg-color` sert aussi à `.profile-page-content` (le
   conteneur interne), à son `:before` — qui prolonge l'aplat vers la gauche
   pendant l'animation de la sidebar — et au fond des titres de cartes. Une
   surcharge de `background-color` sur le seul `.page-main` laissait donc un
   rectangle blanc au milieu. Posée sur `.page-main`, la variable est héritée
   par tous ces descendants.

   Même condition que le bloc 2 : uniquement là où le hero a remplacé
   l'en-tête. Sur le profil d'un autre membre, l'en-tête reste affiché et
   l'aplat blanc garde son rôle. Un ID + deux classes l'emportent sur la règle
   native (un ID, une classe), sans !important. */
#page-profile-about .page-main:has(> .solem-hero),
#page-profile-media .page-main:has(> .solem-hero),
#page-profile-playlists .page-main:has(> .solem-hero),
#page-profile-shared-by-me .page-main:has(> .solem-hero),
#page-profile-shared-with-me .page-main:has(> .solem-hero),
#page-liked.profile-page-liked .page-main:has(> .solem-hero),
#page-history.profile-page-history .page-main:has(> .solem-hero) {
  --profile-page-bg-color: var(--body-bg-color);
}

/* ============================================================
   ============================================================
   RESPONSIVE — tablette et téléphone
   ============================================================

   Tout ce bloc est en `max-width` : à 1024px et au-delà, rien n'y déclenche.
   Le rendu desktop validé avec la maquette est donc inchangé, y compris sur
   les petits portables (1280px garde ses 5 vignettes par ligne). Vérifié par
   comparaison des rendus, identiques au pixel près à 1024, 1280, 1440 et
   1920px — accueil, catégories, et sidebar ouverte.

   Points de rupture — ceux de MediaCMS, pas des nouveaux, pour que le thème
   bascule en même temps que le bundle :
     1023px  le natif masque la recherche du header (loupe + champ plein
             écran) et cesse d'ouvrir la sidebar automatiquement ;
      767px  le natif passe la sidebar en tiroir superposé et supprime le
             décalage du contenu.
   Deux paliers propres au thème complètent la série :
      559px  une seule carte de catégorie par ligne (voir § 1) ;
      400px  très petits écrans — logo et titre du hero encore réduits.

   Le thème desktop était écrit sans aucune requête média : toutes ses
   largeurs fixes (5 colonnes, vignette « À la une » de 320px, hero à 66%,
   recherche à 620px) s'appliquaient telles quelles à un écran de 402px.
   ============================================================ */

/* ------------------------------------------------------------
   1. GRILLES — densité par palier.
   Les règles de largeur (haut du fichier) ne font que lire ces variables :
   il n'y a qu'ici à toucher pour changer un nombre de colonnes.
   5 → 3 → 2 pour les médias ; 4 → 3 → 2 → 1 pour les cartes de catégorie.
   La gouttière se resserre en même temps, sinon elle mangerait la moitié
   de la largeur utile sur un téléphone.
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  body {
    --solem-item-width:     calc((100% - 3 * 16px) / 3);
    --solem-item-width-cat: calc((100% - 3 * 16px) / 3);
    --solem-gutter: 16px;
    --solem-gutter-y: 22px;
  }
}
@media (max-width: 767px) {
  body {
    --solem-item-width:     calc((100% - 2 * 12px) / 2);
    --solem-item-width-cat: calc((100% - 2 * 12px) / 2);
    --solem-gutter: 12px;
    --solem-gutter-y: 18px;
  }
}
/* Sous 560px, les cartes de catégorie (en-tête dégradé de 100px + titre 18px
   + deux lignes de description) deviennent illisibles à deux par ligne : on
   repasse à une carte pleine largeur. Les vignettes de médias, elles, restent
   à deux — un 16/9 de ~170px reste confortable et évite une page à rallonge. */
@media (max-width: 559px) {
  body { --solem-item-width-cat: 100%; }
  /* Une seule colonne : la gouttière de droite n'a plus rien à séparer et
     décalait la carte de 12px vers la gauche. (`#page-categories .item`
     redéclare la marge en dur, d'où le sélecteur avec l'ID.) */
  #page-categories .media-list-wrapper.items-list-ver .media-list-row .item,
  #page-categories .item {
    margin-right: 0 !important;
  }
  /* Sans gouttière de fin à rattraper, la rangée reprend sa largeur exacte —
     sinon la compensation d'une gouttière (voir plus bas) élargirait la carte
     unique d'autant. L'ID l'emporte sur la règle générale, quel que soit
     l'ordre des deux blocs. */
  #page-categories .media-list-wrapper.items-list-ver .media-list-row {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Gouttières de grille symétriques.
   Chaque carte porte sa marge à droite, y compris la dernière de la ligne :
   la grille se retrouve décalée vers la gauche d'une gouttière entière
   (mesuré : 16px à gauche, 28px à droite). Sur desktop l'écart de 22px fait
   partie du rendu validé et n'est pas touché ; sur téléphone, où la gouttière
   utile est déjà réduite à 12px, on rattrape le débord en élargissant la
   rangée d'une gouttière : elle mord sur la gouttière de page, jamais au-delà
   (20px de gouttière pour 12px de débord ; 16px pour 12px sous 400px).
   Une marge négative ne suffirait pas : ces rangées ont `width: 100%` ET
   `max-width: 100%` en !important plus haut — il faut relever les deux.
   Les sélecteurs reprennent ceux de ces règles, sans quoi elles l'emporteraient. */
@media (max-width: 767px) {
  /* MediaCMS ne rend les items `inline-block` qu'à partir de 600px
     (`@media(min-width: 600px)` dans _commons.css) : en dessous ils sont
     `display: block` et occupent une ligne entière, quelle que soit la
     largeur qu'on leur calcule. Entre 560 et 599px, les cartes de catégorie
     se retrouvaient donc seules sur leur ligne ET à demi-largeur ; les
     grilles de médias hors accueil avaient le même sort en dessous de 600px.
     On passe la rangée en flex — ce que le thème fait déjà pour les rangées
     de l'accueil — et le display des enfants cesse de compter.
     `align-items: flex-start` conserve la hauteur naturelle des cartes :
     l'égalisation, quand elle est utile, vient du `min-height` réservé sous
     la description. */
  body:not(.solem-home) .media-list-wrapper.items-list-ver .media-list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  body:not(.solem-home) .media-list-wrapper.items-list-ver .media-list-row,
  body.solem-home .solem-cat-row .media-list-wrapper.items-list-ver .media-list-row {
    width: calc(100% + var(--solem-gutter)) !important;
    max-width: calc(100% + var(--solem-gutter)) !important;
  }
}

/* ------------------------------------------------------------
   2. EN-TÊTE — logo, menu, recherche.
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  /* Le natif réserve 104px à droite du bloc de gauche ; le thème ajoutait
     20px à gauche, ce qui suffisait à faire chevaucher le lockup
     « SOLEM studio » et le bouton de menu.
     Sous 768px, le § 3 reprend ce retrait pour l'aligner sur la gouttière
     de page — ne pas régler la valeur ici sans y regarder. */
  .page-header-left > div {
    padding-left: 8px !important;
    min-width: 0;
  }
  .logo,
  .logo a,
  .logo a span {
    min-width: 0;
  }
  .logo img {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  /* Logo plus compact : les 40px du desktop (déclarés plus haut dans ce
     fichier — ils l'emportent sur les 36px de custom.css, chargé avant)
     débordaient de la barre une fois le bouton de menu à gauche et les deux
     boutons de droite en place. */
  body { --default-logo-height: 30px; }

  /* Le bouton devient le SEUL moyen d'ouvrir le menu (plus de sidebar
     permanente) : on lui rend le hamburger, affordance attendue sur
     téléphone, et on le place AVANT le logo comme partout ailleurs.
     Le chevron du desktop (replier/déplier) n'a plus de sens ici : le
     tiroir se ferme en touchant le voile noir. */
  .page-header-left > div > .toggle-sidebar {
    order: 0;
    margin-left: 0;
    margin-right: 2px;
  }
  .page-header-left > div > .logo {
    order: 1;
  }
  .toggle-sidebar .material-icons::before,
  body:not(.visible-sidebar) .toggle-sidebar .material-icons::before {
    content: "menu";
  }
}

@media (max-width: 400px) {
  /* iPhone SE / petits Android : le lockup complet ne tient plus à côté des
     trois boutons. On réduit encore plutôt que de tronquer. */
  body { --default-logo-height: 26px; }
}

/* ------------------------------------------------------------
   3. GOUTTIÈRE DE PAGE sur petits écrans.
   La gouttière elle-même est posée bien plus haut, sur .page-main-wrap :
   ici on ne fait que redéfinir sa valeur, et aligner l'en-tête dessus.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  body { --solem-page-gutter: 20px; }

  /* Écart sous l'en-tête égal à la gouttière des côtés. Posé sur
     .page-main-wrap et non sur le hero : les pages sans hero (page média,
     recherche générale) démarraient sinon collées à la barre. Le
     `padding-top: var(--header-height)` natif est ce qui pousse le contenu
     sous l'en-tête fixe : on lui ajoute la gouttière, sans le remplacer. */
  .page-main-wrap {
    padding-top: calc(var(--header-height) + var(--solem-page-gutter)) !important;
  }
  /* La marge haute du hero ferait doublon. Idem pour les bandeaux de
     message, premiers enfants de .page-main-wrap. */
  body .solem-hero {
    margin-top: 0 !important;
  }
  /* Seule la marge HAUTE part : elle ferait doublon avec le padding ci-dessus.
     La marge basse, posée avec la règle générale, reste indispensable — le
     hero qui suit a vu la sienne annulée juste en dessous, la bulle se
     retrouverait sinon collée à lui. */
  .alert {
    margin-top: 0 !important;
  }

  /* En-tête aligné sur la même gouttière. Les pastilles rondes portent leur
     propre retrait optique (glyphe de 22px centré dans un bouton de 40px,
     vignette de 32px pour l'avatar) : on vise l'alignement du DESSIN, pas
     celui de la boîte, d'où des valeurs plus faibles que la gouttière. */
  .page-header-left > div {
    padding-left: 11px !important;
  }
  .page-header-right {
    padding-right: 16px !important;
  }
}
@media (max-width: 400px) {
  body { --solem-page-gutter: 16px; }

  .page-header-left > div {
    padding-left: 7px !important;
  }
  .page-header-right {
    padding-right: 12px !important;
  }
}

/* ------------------------------------------------------------
   4. HERO.
   Le bandeau porte son propre `@media (max-width: 700px)` (injecté par
   solem-hero.js), mais le thème le neutralisait : `body .solem-hero
   .solem-hero-content` (0,2,1) l'emporte sur `.solem-hero
   .solem-hero-content` (0,2,0), et le titre est en !important. Le texte
   restait donc bridé à 66 % et se superposait à l'illustration.
   On reprend la main ici, avec la même spécificité que le reste du thème.
   (Le fond — propre à la marque — est traité dans custom.css.)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  body .solem-hero {
    /* Même hauteur minimale que sur desktop : réduite à 0, la bande se
       refermait sur son texte et faisait maigre en tête de page. */
    min-height: 132px;
    padding: 26px 22px;
    margin-bottom: 20px !important;
    border-radius: 14px !important;
  }
  body .solem-hero .solem-hero-content {
    max-width: 100%;
  }
  body .solem-hero .solem-hero-eyebrow {
    font-size: 14px;
    margin-bottom: 5px;
  }
  body .solem-hero .solem-hero-title {
    font-size: 24px !important;
  }
}
@media (max-width: 400px) {
  body .solem-hero {
    min-height: 118px;
    padding: 22px 18px;
  }
  body .solem-hero .solem-hero-title {
    font-size: 21px !important;
  }
}

/* ------------------------------------------------------------
   5. BLOC « À LA UNE ».
   En ligne, sa vignette fixe de 320px ne laissait que ~50px au texte : le
   titre tombait à un mot par ligne. On empile vignette puis texte.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .solem-featured {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
  }
  .solem-featured-thumb {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }
  .solem-featured-title {
    font-size: 19px;
  }
  .solem-featured-desc {
    font-size: 14px;
    -webkit-line-clamp: 2;
  }
}

/* ------------------------------------------------------------
   6. EN-TÊTES DE SECTION (accueil).
   « Tout voir » passait à la ligne mot par mot faute d'espace : on le sort
   du flux du titre (poussé à droite, jamais coupé) et le titre garde le
   reste. Le `min-width: 0` autorise le titre à se couper lui-même plutôt
   qu'à imposer sa largeur minimale au conteneur flex.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  body.solem-home .solem-cat-row .media-list-header {
    margin-bottom: 10px;
  }
  body.solem-home .solem-cat-row .solem-cat-headline {
    gap: 10px;
  }
  body.solem-home .solem-cat-row .media-list-header h2 {
    font-size: 17px;
    line-height: 1.25;
    min-width: 0;
  }
  body.solem-home .solem-cat-row .media-list-header h3 {
    flex: 0 0 auto;
    margin-left: auto;
  }
  body.solem-home .solem-cat-row .media-list-header h3 a {
    margin-left: 0;
    white-space: nowrap;
  }
  body.solem-home .solem-cat-row .solem-cat-desc {
    margin-top: 2px;
    line-height: 1.4;
  }
  /* En-têtes de la page Catégories (Vidéos / Documentations). */
  .solem-cat-head {
    font-size: 17px;
    margin: 10px 0 12px;
  }
}

/* ------------------------------------------------------------
   7. MÉTA DES CARTES DE MÉDIA.
   Le titre n'a rien à corriger : le natif le rend déjà en 14px/18px borné à
   deux lignes (--item-title-font-size / --item-title-line-height /
   --item-title-max-lines), ce qui reste juste à deux colonnes.
   Seule la ligne de méta demande un réglage : à 12px (valeur du thème), un
   « 63 vues • il y a 3 mois » ne tenait plus dans ~170px.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .item-meta,
  .item-meta * {
    font-size: 11px;
    line-height: 1.35;
  }
  /* Sur l'accueil, le créateur est le même pour toutes les vidéos du
     portail : il prenait une ligne entière pour une information nulle.
     Retiré des seules rangées de l'accueil — ailleurs (recherche, profil
     d'un membre) il peut distinguer deux comptes. */
  body.solem-home .solem-cat-row .item-meta .item-author {
    display: none;
  }
}

/* ------------------------------------------------------------
   8. PAGE CATÉGORIES — cartes plus basses sur téléphone.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  #page-categories .item .item-header {
    height: 76px;
    min-height: 76px;
  }
  #page-categories .item .item-header h3 {
    font-size: 16px;
    padding: 0 16px;
  }
  #page-categories .item .item-body {
    padding: 12px 16px 14px;
  }
  #page-categories .item .item-body .item-description {
    font-size: 14px;
  }
}
/* En colonne unique, la réserve de deux lignes sous la description n'a plus
   d'objet : elle sert à égaliser la hauteur des cartes d'une MÊME ligne. Une
   catégorie sans description gardait sinon un grand blanc. */
@media (max-width: 559px) {
  #page-categories .item .item-body .item-description {
    min-height: 0;
  }
  #page-categories .item .item-body .item-description:empty {
    margin-bottom: 0;
  }
}

/* ------------------------------------------------------------
   9. SIDEBAR EN TIROIR.
   Sous 768px elle se superpose au contenu : elle a besoin d'une largeur
   qui laisse voir le voile derrière (repère « je peux fermer en touchant
   à côté »), et de cibles tactiles d'au moins 44px.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .page-sidebar {
    --sidebar-width: min(280px, 82vw);
    width: var(--sidebar-width);
  }
  /* 46px de haut : au-dessus des 44px recommandés pour une cible tactile, et
     assez proche des 42px natifs pour que la liste complète (13 entrées)
     tienne encore sans défilement sur un écran de 874pt. Le `min-height`
     natif n'est pas contraignant — la hauteur vient de la `line-height` —
     d'où le passage en flex, qui recentre le libellé et l'icône. */
  .nav-menu li.link-item a {
    display: flex;
    align-items: center;
    min-height: 46px;
    line-height: 1.2;
  }
  .nav-menu li.solem-nav-section-title {
    padding: 14px 20px 6px;
  }
}

/* ------------------------------------------------------------
   10. GARDE-FOU — pas de débordement horizontal.
   Un seul élément trop large rend TOUTE la page décalable latéralement, et
   l'en-tête, lui, est fixe : on obtient le contenu coupé à gauche des
   captures d'origine. Les deux causes ici étaient des largeurs fixes (§ 1,
   § 2, § 5) ; ce qui suit ne traite que le reste, les textes sans espace
   (titres de médias, noms de fichiers) et les boîtes flex qui refusent de
   passer sous leur largeur minimale de contenu.

   Volontairement PAS d'`overflow-x: hidden` sur html/body : il masquerait un
   futur débordement au lieu de le corriger, et surtout il rendrait
   inatteignables les tableaux larges des pages d'administration, qui ont
   besoin, eux, de défiler horizontalement.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .page-main,
  .page-main-inner,
  .solem-featured-body {
    min-width: 0;
    max-width: 100%;
  }
  .media-list-wrapper,
  .media-list-row {
    min-width: 0;
  }
  .solem-featured-title,
  .item-main h3,
  .media-list-header h2 {
    overflow-wrap: anywhere;
  }
}

/* ------------------------------------------------------------
   11. PAGE MÉDIA sur téléphone.
   Sur desktop la page média est exclue de la gouttière : son
   `.viewer-section` se centre dans 1328px et porte ses propres retraits
   (cf. « GOUTTIÈRE DE PAGE »). Sur téléphone il n'y a ni centrage ni
   largeur maximale : le lecteur touchait les deux bords alors que tout le
   reste du site est à --solem-page-gutter, et le titre juste en dessous
   s'alignait sur 16px. On lui applique donc la même gouttière qu'ailleurs.
   Le lecteur y gagne ses coins arrondis (border-radius: 10px natif), qui ne
   se voyaient pas bord à bord.

   ⚠️ C'est un choix : un lecteur pleine largeur est la convention sur
   téléphone (il gagne ici ~22px de hauteur d'image). Pour y revenir, retirer
   le seul bloc `.page-main-wrap:has(...)` ci-dessous — le reste des règles
   ne fait que neutraliser des retraits natifs qui doubleraient la gouttière.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .page-main-wrap:has(> [id^="page-media"]) {
    padding-left: var(--solem-page-gutter) !important;
    padding-right: var(--solem-page-gutter) !important;
  }

  /* MediaCMS ne pose l'arrondi du lecteur qu'à partir de 480px
     (`@media screen and (min-width: 480px)` dans media.css) : en dessous, il
     restait à angles vifs au milieu d'une page où tout le reste est arrondi.
     Le `overflow` qui le rend effectif est posé plus haut, hors requête. */
  .viewer-container .player-container {
    border-radius: 10px;
  }

  /* Retraits natifs qui s'ajouteraient à la gouttière :
     .media-title-banner = 20px 12px 0 16px, .viewer-sidebar = 12px 16px 24px. */
  .media-title-banner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .viewer-sidebar {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================================
   LANGUE DES MÉDIAS
   - Sélecteur à drapeaux de l'en-tête (templates/solem/language_switcher.html),
     rendu par React dans .on-header-right, dernière cellule du header.
   - Drapeau sur les vignettes, posé par solem-custom.js en mode
     « Multilingue » (éditeurs) et sur « Mes médias ».
   ============================================================ */
.solem-flag {
  display: block;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(5, 26, 38, 0.12);
}
/* Langue sans drapeau (cf. solem_sso/languages.py) : son code. */
.solem-flag--code {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ECEEF1;
  color: var(--solem-navy);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

/* Mode « Multilingue » des éditeurs : globe à la place d'un drapeau. */
.solem-flag--multi {
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  color: var(--solem-blue);
  font-size: 20px;
  line-height: 1;
}

.solem-lang-switcher {
  position: relative;
  margin-left: 4px;
}
.solem-lang-switcher > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  list-style: none;
}
.solem-lang-switcher > summary::-webkit-details-marker {
  display: none;
}
.solem-lang-switcher > summary:hover,
.solem-lang-switcher[open] > summary {
  background-color: var(--nav-menu-active-item-bg-color);
}
.solem-lang-switcher > summary:focus-visible {
  outline: 2px solid var(--solem-blue);
  outline-offset: 2px;
}
/* Même habillage que le popup du menu utilisateur (.page-header-right .popup). */
.solem-lang-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 8px;
  background: var(--popup-bg-color);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(5, 26, 38, 0.12);
}
.solem-lang-menu hr {
  width: 100%;
  margin: 6px 0;
  border: 0;
  border-top: 1px solid var(--popup-hr-bg-color);
}
.solem-lang-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--header-popup-menu-color);
  font: inherit;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.solem-lang-menu button:hover,
.solem-lang-menu button:focus-visible {
  background-color: var(--nav-menu-active-item-bg-color);
  outline: none;
}
.solem-lang-menu button[aria-current="true"] {
  color: var(--solem-blue);
  font-weight: 600;
}

/* Vignettes : en bas à gauche, en miroir de la durée (bas à droite). Même
   retrait que la pastille de durée (.item-duration > *, 4px) et centré
   sur sa hauteur (17,5px) : 4 + (17,5 - 12) / 2 ≈ 7px du bas — puis
   décalé d'1px vers la droite et vers le bas, ajustement fait à l'œil.
   pointer-events: none => le clic traverse jusqu'au lien de la vignette. */
.solem-lang-badge {
  position: absolute;
  bottom: 6px;
  left: 5px;
  z-index: 2;
  pointer-events: none;
}
.solem-lang-badge .solem-flag {
  width: 16px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(5, 26, 38, 0.35);
}
.solem-lang-badge .solem-flag--code {
  width: auto;
  padding: 0 3px;
  font-size: 8px;
}