/* ============================================================
   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) ---- */
  --indygo-blue:       #2879B3;   /* bleu de marque (primaire)      */
  --indygo-blue-dark:  #2573AC;   /* variante foncée (hover/actif)  */
  --indygo-navy:       #051A26;   /* quasi-noir bleuté (texte)      */
  --indygo-hero-title: #001122;   /* titres hero très foncés        */
  --indygo-slate:      #46545C;   /* gris ardoise                   */
  --indygo-muted:      #6B7280;   /* gris texte secondaire          */
  --indygo-border:     #D9D9D9;   /* bordures / placeholders        */
  --indygo-blue-pale:  #E8F4FA;   /* fond bleu très clair (chips)   */
  --indygo-bg:         #F6F7F7;   /* fond général off-white         */
  --indygo-surface:    #FFFFFF;   /* surfaces (cartes, header)      */
  --indygo-red:        #E7333E;   /* accent rouge (alertes)         */

  /* ============================================================
     Couleur de marque globale (défaut MediaCMS = vert #009933).
     Remplacée par le bleu SOLEM.
     ============================================================ */
  --default-theme-color: var(--indygo-blue);
  --default-brand-color: var(--indygo-blue);
  --theme-color:         var(--indygo-blue);
  --brand-color:         var(--indygo-blue);
  --links-color:         var(--indygo-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(--indygo-bg);
  --body-text-color: var(--indygo-navy);
  --hr-color:        #ECEEF1;
  --dotted-outline-color: rgba(5, 26, 38, 0.4);

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

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

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

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

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

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

  --profile-page-bg-color:        var(--indygo-surface);
  --profile-page-nav-link-active-text-color: var(--indygo-navy);
  --profile-page-nav-link-hover-text-color:  var(--indygo-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(--indygo-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(.indygo-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(--indygo-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.indygo-nav-section-title[data-indygo-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 indygo-custom.js sur l'accueil.
   ============================================================ */
.indygo-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. */
.indygo-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;
}
.indygo-featured-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}
.indygo-featured-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  min-width: 0;
}
.indygo-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(--indygo-blue-pale);
  color: var(--indygo-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. */
.indygo-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;
}
.indygo-featured-title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: 1.2;
  color: var(--indygo-navy);
}
.indygo-featured-desc {
  margin: 0;
  color: var(--indygo-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é). */
.indygo-featured-author,
.indygo-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(--indygo-muted);
}
.indygo-featured-author + .indygo-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(.indygo-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(.indygo-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(.indygo-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(.indygo-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 indygo-custom.js. Les règles de grille ci-dessus sont en
   body:not(.indygo-home), il faut donc les répliquer ici.
   ------------------------------------------------------------------ */
body.indygo-home .indygo-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.indygo-home .indygo-featured + .indygo-cat-row {
  border-top: 1px solid var(--media-list-row-border-color);
}
body.indygo-home .indygo-cat-row .media-list-wrapper.items-list-ver .media-list-row {
  display: flex;
  flex-wrap: wrap;
  width: 100% !important;
  max-width: 100% !important;
}
body.indygo-home .indygo-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.indygo-home .indygo-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.indygo-home .indygo-cat-row .media-list-header {
  display: block !important;
  margin: 0 0 14px;
}
body.indygo-home .indygo-cat-row .indygo-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.indygo-home .indygo-cat-row .indygo-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 .indygo-cat-row .indygo-cat-desc {
  color: #a7b0b6;
}
body.indygo-home .indygo-cat-row .media-list-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--indygo-navy);
}
body.indygo-home .indygo-cat-row .media-list-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
}
body.indygo-home .indygo-cat-row .media-list-header h3 a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: -10px;
  color: var(--indygo-blue);
  text-decoration: none;
}
body.indygo-home .indygo-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.indygo-home .indygo-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.indygo-home .indygo-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.indygo-home .indygo-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.indygo-home .media-list-wrapper,
body.indygo-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(--indygo-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(--indygo-surface);
}
/* Le lien unique qui encapsule tout le contenu de la carte. */
#page-categories .item .indygo-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(--indygo-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(--indygo-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(--indygo-muted);
  font-size: 13px;
}

/* En-têtes de sections sur la page Catégories (Vidéos / Documentations),
   injectés par indygo-custom.js. Pleine largeur pour casser la grille. */
.indygo-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 indygo-custom.js) */
.nav-menu li.indygo-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(--indygo-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(--indygo-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(--indygo-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é .indygo-region via la config). */
.indygo-region .material-icons[data-icon]::after {
  content: "" !important;
}
.indygo-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(--indygo-navy) 0%, var(--indygo-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 .indygo-hero) + !important.
   - marges autour (comme la maquette, carte insérée)
   - vraies couleurs SOLEM Figma
   ============================================================ */
body .indygo-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;
  /* Illustration découpée dans la bannière Indygo (la partie téléphone,
     x >= 1300px), ancrée à droite sur le gris exact du visuel (#E9E9E9).
     Découper plutôt qu'utiliser la bannière entière évite de dupliquer les
     textes, qui y sont incrustés et que le hero réaffiche à gauche. */
  background: #e9e9e9 url("/static/images/hero-indygo.png") right center / auto 100% no-repeat !important;
}
body .indygo-hero .indygo-hero-content {
  position: relative;
  z-index: 2;
  max-width: 66%;
}
/* Masquer la déco SVG approximative bakée dans le bundle */
body .indygo-hero .indygo-hero-deco {
  display: none !important;
}
body .indygo-hero .indygo-hero-eyebrow {
  display: block;
  color: #3b649a !important;   /* bleu du dégradé du logo, sur fond clair */
  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 .indygo-hero .indygo-hero-title {
  display: block;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  font-weight: 500 !important;
  font-size: 28px !important;
  /* Bannière claire => titre dans le bleu marine exact du visuel. */
  background: none !important;
  -webkit-text-fill-color: #2b3553 !important;
  color: #2b3553 !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(--indygo-navy) !important;
  font-weight: 500;
}
.alert.success {
  background-color: var(--indygo-blue-pale) !important;
}
/* Disparition automatique (cf. autoDismissAlerts dans indygo-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(--indygo-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(--indygo-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(--indygo-border) !important;
  border-radius: 10px !important;
  background: var(--indygo-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(--indygo-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(--indygo-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(--indygo-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(--indygo-muted) !important;
  border: 1px solid var(--indygo-border) !important;
  border-radius: 10px !important;
  margin: 0.5em 0 0 !important;
}

/* ============================================================
   PAGE DE CONNEXION — maquette Attentive.
   Carte sombre centrée : logo, « Bienvenue », deux champs en pilule à
   étiquette flottante (technique fieldset/legend, qui interrompt la bordure
   au lieu de la masquer — indispensable sur un fond translucide), lien mot de
   passe oublié, bouton pleine largeur, sélecteur de langue.
   ============================================================ */
body.indygo-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%),
    #060c18;
  background-attachment: fixed;
  color: #fff;
}
body.indygo-auth-page .page-main-wrap {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh;
}
.indygo-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
  box-sizing: border-box;
}
/* --- la carte --- */
.indygo-auth-card {
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
  padding: 48px 56px 40px;
  background: rgba(9, 16, 30, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 32px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.indygo-auth-logo {
  display: block;
  width: 60%;
  max-width: 340px;
  height: auto;
  margin: 0 auto 52px;
}
.indygo-auth-title {
  margin: 0 0 30px;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}
.indygo-auth-errors {
  margin: 0 0 20px;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(220, 38, 38, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.5);
  color: #fecaca;
  font-size: 14px;
}
.indygo-auth-errors p { margin: 0; }
.indygo-auth-errors p + p { margin-top: 4px; }

/* --- champ en pilule à étiquette flottante --- */
.att-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 58px;
  padding: 0 22px;
  margin: 0 0 18px;
}
.att-field-icon {
  font-family: "Material Symbols Outlined";
  font-variation-settings: "wght" 300;
  font-size: 24px;
  line-height: 1;
  color: #e3ecf8;
  flex: 0 0 auto;
  z-index: 1;
}
.att-field input {
  flex: 1 1 auto;
  min-width: 0;
  /* Pas de height:100% : l'input couvrirait toute la hauteur du champ et son
     fond (notamment le remplissage automatique du navigateur) masquerait la
     bordure et l'étiquette. Il se dimensionne sur sa ligne de texte. */
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  outline: none;
  z-index: 1;
}
.att-field input::placeholder { color: transparent; }
.att-field input:-webkit-autofill,
.att-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #0b1220 inset;
  caret-color: #fff;
}
/* La bordure est un <fieldset> : sa <legend> « perce » le trait pour laisser
   passer l'étiquette, ce qu'un fond opaque ne pourrait pas faire ici. */
.att-field fieldset {
  position: absolute;
  /* Décalage de -6px : le <legend> réserve 11px en haut du fieldset et le
     navigateur trace le trait supérieur au MILIEU de cette bande. Sans cette
     compensation, la bordure descend sous l'étiquette flottante au lieu de
     passer derrière elle. */
  inset: -6px 0 0 0;
  margin: 0;
  /* 26px et non 14 : avec un rayon de 29px, la bordure est encore dans l'arc
     du coin avant cette abscisse. Une encoche placée plus à gauche découpe la
     courbe, et le trait semble alors passer sur l'étiquette. */
  padding: 0 26px;
  pointer-events: none;
  border: 1px solid #5c86c4;
  border-radius: 29px;
  background: rgba(8, 13, 24, 0.55);
  transition: border-color 0.15s ease;
}
.att-field fieldset legend {
  /* `display:block`, `float:unset` et `overflow:hidden` sont indispensables :
     sans eux, le moteur ignore le max-width et l'encoche reste ouverte en
     permanence — la bordure paraît alors trouée en haut à gauche. */
  display: block;
  float: unset;
  overflow: hidden;
  width: auto;
  max-width: 0.01px;              /* replié tant que le champ est vide */
  padding: 0;
  height: 11px;
  line-height: 11px;
  font-size: 13px;
  visibility: hidden;
  white-space: nowrap;
  transition: max-width 0.12s ease;
}
.att-field fieldset legend span {
  display: inline-block;
  padding: 0 7px;
  opacity: 0;
  color: #cddcef;
  transition: opacity 0.12s ease;
}
/* L'étiquette flottante EST le texte du <legend>. C'est le navigateur qui le
   positionne et qui interrompt la bordure autour : alignement exact par
   construction, sans valeur magique à ajuster. L'élément <label> ne sert plus
   qu'à l'état « champ vide », où il joue le rôle de placeholder. */
.att-field input:focus ~ fieldset legend span,
.att-field input:not(:placeholder-shown) ~ fieldset legend span {
  visibility: visible;
  opacity: 1;
}
/* Placeholder dans le champ, qui s'efface dès que le legend prend le relais */
.att-field label {
  position: absolute;
  left: 58px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: #9fb3cd;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 1;
}
.att-field input:focus ~ label,
.att-field input:not(:placeholder-shown) ~ label {
  opacity: 0;
}
.att-field input:focus ~ fieldset legend,
.att-field input:not(:placeholder-shown) ~ fieldset legend {
  max-width: 100%;
}
.att-field input:focus ~ fieldset { border-color: #8fb6ea; }
/* bouton œil du mot de passe */
.att-eye {
  flex: 0 0 auto;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;   /* toute la hauteur du champ => centrage fiable */
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #cddcef;
  cursor: pointer;
  font-family: "Material Symbols Outlined";
  font-variation-settings: "wght" 300;
  font-size: 24px;
  line-height: 1;
}
.att-eye:hover { color: #fff; }

.att-forgot {
  display: inline-block;
  margin: 4px 0 30px;
  color: #7fb3f5;
  font-size: 15px;
  text-decoration: none;
}
.att-forgot:hover { text-decoration: underline; }

.indygo-auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 58px;
  box-sizing: border-box;
  border: 0;
  border-radius: 29px;
  background: #0f6fe5;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.indygo-auth-btn:hover { background: #1a7cf0; }
/* Bouton secondaire (Annuler) : même gabarit, en contour */
.indygo-auth-btn--ghost {
  margin-top: 14px;
  background: transparent;
  border: 1px solid #5c86c4;
  color: #cddcef;
  font-weight: 500;
  text-decoration: none;
}
.indygo-auth-btn--ghost:hover { background: rgba(92, 134, 196, 0.14); color: #fff; }
/* Paragraphe d'explication sous le titre */
.att-lead {
  margin: -14px 0 28px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: #9fb3cd;
}
.att-lead a { color: #7fb3f5; }
.att-lead--footer {
  margin: 26px 0 0;
  text-align: center;
}

/* --- sélecteur de langue --- */
.att-lang {
  display: flex;
  justify-content: center;
  margin: 40px 0 0;
}
.att-lang-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #5c86c4;
  border-radius: 22px;
}
.att-lang select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  padding-right: 18px;
  outline: none;
  cursor: pointer;
}
.att-lang select option { background: #0b1220; color: #fff; }
.att-lang-chevron {
  position: absolute;
  right: 14px;
  pointer-events: none;
  font-family: "Material Symbols Outlined";
  font-variation-settings: "wght" 300;
  font-size: 20px;
  color: #cddcef;
}

/* --- bulles de messages ---
   Elles sont injectées par root.html AVANT le bloc de contenu, donc dans le
   flux : elles décalaient la carte vers le bas. On les sort du flux
   (position: fixed) pour que la carte reste centrée quoi qu'il arrive.
   Les rares cas à plusieurs messages sont décalés à la main. */
body.indygo-auth-page .alert {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: calc(100% - 40px);
  max-width: 520px;
  margin: 0 !important;
  background: rgba(9, 16, 30, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.indygo-auth-page .alert + .alert { top: 88px; }
body.indygo-auth-page .alert + .alert + .alert { top: 160px; }
/* .hiding conserve son fondu : la marge négative du natif est neutralisée
   par le margin:0 ci-dessus, l'opacité suffit. */
body.indygo-auth-page .alert.hiding { transform: translateX(-50%); }

@media (max-width: 560px) {
  .indygo-auth-card { padding: 32px 24px 28px; border-radius: 24px; }
  .indygo-auth-title { font-size: 32px; }
  .indygo-auth-logo { margin-bottom: 36px; }
}