/* ============================================================
   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-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;

  /* ---- 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-blue-pale);
  --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(--solem-navy);
  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;
}

/* ============================================================
   Espace entre la sidebar (fixe) et le contenu, SYMÉTRIQUE à droite.
   Par défaut MediaCMS ne met que padding-left = --sidebar-width, ce qui
   colle le contenu à la navbar (gap gauche < gap droite). On ajoute un
   même espace des deux côtés (basé sur la variable => robuste).
   ============================================================ */
body.visible-sidebar .page-main-wrap {
  padding-left: calc(var(--sidebar-width) + 20px) !important;
  padding-right: 20px !important;
}

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

/* 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. */
.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-blue-pale);
  color: var(--solem-blue);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 16px;
}
/* É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(--solem-navy);
}
.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) : max 5 items par ligne, avec
   22px de marge à droite et 30px en bas. Largeur en % => vrai 5-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: calc((100% - 5 * 22px) / 5) !important;
  max-width: none !important;
  margin: 0 22px 30px 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 : 4 par ligne (au lieu de 5). */
#page-categories .media-list-wrapper.items-list-ver .media-list-row .item {
  width: calc((100% - 4 * 22px) / 4) !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: calc((100% - 5 * 22px) / 5) !important;
  max-width: none !important;
  margin: 0 22px 30px 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 + « Tous 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(--solem-navy);
}
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);
  margin: 0 22px 30px 0 !important;   /* espaces entre les cartes */
}
/* .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. */
#page-categories .item .item-header {
  display: flex;
  align-items: center;          /* titre centré verticalement */
  width: 100%;
  height: 100px;
  min-height: 100px;
  background: linear-gradient(120deg, #0A2A45 0%, #16507D 58%, #2E76B0 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;
}

/* Logo SOLEM STUDIO : adapté au mode sombre (passe en blanc). */
body.dark_theme .logo img {
  filter: brightness(0) invert(1);
}

/* 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 bleu pâle, bordure bleue, texte/icône bleus.
   padding-left 11px = 32 (non-actif) - 20 (margin) - 1 (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 1px transparent;
  padding-left: 11px;
  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);
}
.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%;
}

/* ============================================================
   CARTES CATÉGORIES — dégradé marine -> bleu (maquette)
   ============================================================ */
.categories-page .item .item-thumb,
.category-item .item-thumb {
  background-image: linear-gradient(160deg, var(--solem-navy) 0%, var(--solem-blue) 100%) !important;
}

/* 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;
  margin: 16px 0 28px !important;   /* pas de marge horizontale (gérée par .page-main-wrap) */
  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: #E8F4FA 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;
}

/* ============================================================
   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;
  margin: 16px 0 0 !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;
}
/* 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;
}

/* ============================================================
   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%;
  background: url("/static/favicons/android-chrome-192x192.png") center/cover no-repeat;
}
.user-action-form-inner h1 {
  text-align: center;
  font-weight: 700 !important;
  color: var(--solem-navy);
  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);
}
/* 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 = mot-symbole + label « STUDIO » aligné à droite, dessous.
   Géométrie de la maquette (node « Logo V2 ») : mot-symbole 332×59,
   label 86×22 rayon 30, bord droit aligné sur celui du mot-symbole. */
.solem-auth-logo {
  width: 332px;
  max-width: 100%;
  margin: 0 auto;
}
.solem-auth-wordmark {
  display: block;
  width: 100%;
  height: auto;
}
.solem-auth-studio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 22px;
  margin-left: auto;          /* aligné à droite, comme la maquette */
  border-radius: 30px;
  background: rgba(40, 121, 179, 0.12);
  color: var(--solem-blue);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-indent: 0.22em;        /* compense l'espacement ajouté après la dernière lettre */
  text-transform: uppercase;
  box-sizing: border-box;
}
.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);
}
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; }
}