/* ============================================================
   Iteractif Webmail — Thème « Relief 3D » v3.0.0
   Reproduction fidèle de www.iteractif.com (style « En travaux »).
   Fond violet radial, barres sombres, tranches grises 3D,
   carte grise incrustée, logo badge 3D, pied de page en plaque
   grise incrustée, sélecteur de couleur (engrenage + pop-over).
   ============================================================ */

/* ---------- Variables de base (surchargées par itx-colors.js) ---------- */
:root {
  --itx-theme: hsl(274, 25%, 46%);        /* fond clair : violet très clair */
  --itx-theme-dark: hsl(274, 50%, 16%);   /* fond sombre : violet foncé */
  --itx-barre: hsl(274, 57%, 13%);        /* barres header/footer */
  --itx-barre-2: hsl(274, 63%, 8%);       /* dégradé barres */
  --itx-accent: hsl(274, 42%, 28%);       /* titre de la carte */
  --itx-color: #613583;                   /* pastille engrenage */
  --itx-light-bg: hsl(274, 20%, 92%);
  --itx-light-bg-2: hsl(274, 25%, 88%);
  --itx-light-barre: hsl(274, 35%, 70%);
  --itx-light-barre-2: hsl(274, 45%, 58%);
  --itx-light-accent: hsl(274, 42%, 40%);
  --itx-tranche: 12px;
  --itx-header-h: 9.5em;
  --itx-footer-h: 5.4em;

  /* Tokens Bulwark pour mode CLAIR : fonds clairs, texte foncé */
  --color-primary: #613583;
  --color-primary-foreground: #ffffff;
  --color-background: #f5f0fa;
  --color-foreground: #1a1025;
  --color-card: #ffffff;
  --color-secondary: #ede5f5;
  --color-muted: #f0e8f8;
  --color-border: #d4c0e8;
  --color-muted-foreground: #4a3565;
}

/* ---------- Fond général : dégradé radial violet (comme entravaux) ---------- */
/* html { height:100% } BLOQUAIT le scroll : le document reste à 100vh même si
   la carte déborde → son bas (bouton « Se connecter ») passait SOUS le footer
   (fixed, opaque) sans possibilité de défiler. On laisse le doc grandir. */
html { min-height: 100%; }

body {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background: var(--itx-theme);
  background: radial-gradient(circle, var(--itx-theme) 20%, var(--itx-theme-dark) 100%);
  background-color: var(--itx-theme-dark);
  background-attachment: fixed;
  padding-top: calc(var(--itx-header-h) + var(--itx-tranche));
  padding-bottom: calc(var(--itx-footer-h) + var(--itx-tranche));
}

/* Page login : le conteneur Tailwind hérite du fond violet */
.min-h-screen {
  background: transparent !important;
}

/* Écrans très courts : le formulaire de connexion est plus haut que la
   zone visible → `justify-content: center` (défaut flex) COUPE le haut
   ET le bas de la carte (le bouton devient inaccessible). `safe center`
   bascule en scroll dès que le contenu dépasse, le bouton reste
   atteignable (html: min-height déjà en place pour autoriser le scroll). */
@media (max-height: 640px) {
  .min-h-screen.flex.flex-col.items-center.justify-center {
    justify-content: safe center;
  }
}

/* ---------- Barres header/footer : dégradé sombre teinté ---------- */
.itx-app-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  height: var(--itx-header-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: linear-gradient(180deg, var(--itx-barre) 0%, var(--itx-barre-2) 100%);
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ 0 2px 8px rgba(0,0,0,0.3);
}

.itx-app-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10000;
  height: var(--itx-footer-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  background: linear-gradient(180deg, var(--itx-barre) 0%, var(--itx-barre-2) 100%);
  text-align: center;
}

/* ---------- Pied de page : coordonnées dans un cadre teinté moderne ---------- */
.itx-app-footer .coord {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  padding: 0.55em 1.6em;
  font-size: 0.88em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */
    0 2px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  max-width: calc(100vw - 2em);
}
.itx-app-footer .coord strong {
  color: #fff;
  font-weight: 700;
}
.itx-app-footer .coord a {
  color: var(--itx-light-bg, #ddd6f0);
  text-decoration: none;
  padding: 0.1em 0.4em;
  border-radius: 0.35em;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.itx-app-footer .coord a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  text-decoration: none;
}
.itx-app-footer .coord .sep {
  padding: 0 .4em;
  opacity: .35;
  color: #fff;
}
/* Mode clair webmail */
html[data-itx-light] .itx-app-footer .coord {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.16);
  color: rgba(0, 0, 0, 0.85);
}
html[data-itx-light] .itx-app-footer .coord strong { color: #000; }
html[data-itx-light] .itx-app-footer .coord a { color: #4a2a6a; }
html[data-itx-light] .itx-app-footer .coord a:hover { background: rgba(0,0,0,.1); color:#000; }
html[data-itx-light] .itx-app-footer .coord .sep { color: #000; }

/* Masque la popup PWA « Installer Webmail » de Bulwark : elle flotte en
   bas à droite (bottom-4) et chevauche notre pied de page + tranche. */
.fixed.bottom-4.right-4.z-50:not([data-no-hide]) {
  display: none !important;
}

/* ---------- Tranches de séparation (effet 3D) : grises, jamais teintées ---------- */
.itx-app-tranche-bas {
  position: fixed;
  bottom: var(--itx-footer-h);
  left: 0; right: 0;
  z-index: 9999;
  height: var(--itx-tranche);
  background: linear-gradient(180deg, #6a6a72 0%, #3a3a40 30%, #16161a 100%);
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */
    inset 0 2px 3px rgba(0,0,0,0.6),
    0 -10px 18px rgba(0,0,0,0.5);
}

/* Tranche haute (sous la topbar) */
.itx-app-topbar::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: var(--itx-tranche);
  background: linear-gradient(180deg, #6a6a72 0%, #3a3a40 30%, #16161a 100%);
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */
    inset 0 -2px 3px rgba(0,0,0,0.6),
    0 10px 18px rgba(0,0,0,0.5);
}

/* ---------- Logo : badge gris 3D (comme entravaux) ---------- */
.itx-app-logo {
  height: 3.6em;
  width: auto;
  box-sizing: border-box;
  display: inline-block;
  padding: 0.45em 1.2em;
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--itx-color, #613583) 14%, #808080) 0%, color-mix(in srgb, var(--itx-color, #613583) 10%, #d6d6d6) 100%);
  border-radius: 0.9em;
  border-top: 2px solid color-mix(in srgb, var(--itx-color, #613583) 18%, #404040);
  border-bottom: 2px solid color-mix(in srgb, var(--itx-color, #613583) 6%, #fafafa);
  border-left: 1px solid color-mix(in srgb, var(--itx-color, #613583) 16%, #666);
  border-right: 1px solid color-mix(in srgb, var(--itx-color, #613583) 16%, #666);
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6);
}

/* ---------- Logo clair mode : version légèrement teintée ---------- */
html[data-itx-light] .itx-app-logo {
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, var(--itx-light-bg, hsl(274, 20%, 92%)));
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--itx-color, #613583) 14%, var(--itx-light-bg-2, hsl(274, 25%, 88%))) 0%, color-mix(in srgb, var(--itx-color, #613583) 10%, #f8f8f8) 100%);
  border-top: 2px solid color-mix(in srgb, var(--itx-color, #613583) 18%, #e0e0e0);
  border-bottom: 2px solid color-mix(in srgb, var(--itx-color, #613583) 6%, #fafafa);
  border-left: 1px solid color-mix(in srgb, var(--itx-color, #613583) 16%, #d0d0d0);
  border-right: 1px solid color-mix(in srgb, var(--itx-color, #613583) 16%, #d0d0d0);
  box-shadow: inset 0 8px 16px rgba(0,0,0,.3), inset 0 -4px 8px rgba(255,255,255,.7);
}

/* ---------- Champ de recherche : dans la topbar, à gauche du logo ---------- */
/* Le SearchBox React est rendu dans ce slot via un portail (mail-app.tsx). */
.itx-app-search {
  position: absolute;
  left: 0.8em;
  top: 50%;
  transform: translateY(-50%);
  width: 16em;
  max-width: 30vw;
  z-index: 10001;
}
.itx-app-search > div {
  width: 100%;
}
/* Le champ de recherche (Input Bulwark) : teinté --itx-light-bg comme SPIP */
.itx-app-search input[data-search-input] {
  height: 2.4em;
  box-sizing: border-box;
  padding: 0 0.7em 0 2.2em;
  font-size: .92em;
  color: #1a0a2e;
  background-color: var(--itx-light-bg, #e6ddf0);
  background-image: linear-gradient(180deg, var(--itx-light-bg-2, #d8cce8) 0%, var(--itx-light-bg, #e6ddf0) 100%);
  border-radius: 0.6em;
  border-top: 2px solid rgba(0,0,0,0.2);
  border-bottom: 2px solid rgba(255,255,255,0.5);
  border-left: 1px solid rgba(0,0,0,0.14);
  border-right: 1px solid rgba(0,0,0,0.14);
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6);
}.itx-app-search input[data-search-input]::placeholder {
  color: var(--itx-accent, #4a2a6a);
  opacity: 0.7;
}
.itx-app-search input[data-search-input]:focus {
  outline: none;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6), 0 0 0 2px color-mix(in srgb, var(--itx-color, #613583) 35%, transparent);
}
/* Icône loupe du SearchBox : accord avec la teinte */
.itx-app-search svg.lucide-search {
  color: var(--itx-accent, #4a2a6a);
  opacity: 0.7;
}

/* Logo de la page login : badge carré 3D PORTÉ (le logo Bulwark est carré
   1000×1000 — PAS une pilule). Relief bombé comme le badge de la topbar :
   lumière d'en haut (bord haut clair, inset haut sombre, ombre interne
   basse claire), ombre externe portée vers le bas. Légèrement teinté. */
.inline-flex.items-center.justify-center.mb-5.w-16.h-16 {
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8) !important;
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--itx-color, #613583) 14%, #808080) 0%,
    color-mix(in srgb, var(--itx-color, #613583) 10%, #c8c8c8) 55%,
    color-mix(in srgb, var(--itx-color, #613583) 8%, #d6d6d6) 100%) !important;
  border-radius: 1em !important;
  border-top: 2px solid color-mix(in srgb, var(--itx-color, #613583) 18%, #404040) !important;
  border-bottom: 2px solid color-mix(in srgb, var(--itx-color, #613583) 6%, #fafafa) !important;
  border-left: 1px solid color-mix(in srgb, var(--itx-color, #613583) 16%, #666666) !important;
  border-right: 1px solid color-mix(in srgb, var(--itx-color, #613583) 16%, #666666) !important;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */
    inset 0 8px 16px rgba(0, 0, 0, 0.5),
    inset 0 -4px 8px rgba(255, 255, 255, 0.6),
    0 6px 16px rgba(0, 0, 0, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.3) !important;
  padding: 0.5em !important;
  width: 4.2em !important;
  height: 4.2em !important;
}
.inline-flex.items-center.justify-center.mb-5.w-16.h-16 img {
  display: block !important;
  /* Supprime le bug d'affichage : certains navigateurs laissent l'image
     invisible si les dimensions héritées (SVG 1000×1000) passent par
     max-w/max-h en cascade avec l'aspect-ratio du badge. On force des
     dimensions explicites sans déformer (contain). */
  width: auto !important;
  height: 3em !important;
  max-width: 14em !important;
  max-height: 3em !important;
  object-fit: contain !important;
}

/* ================================================================
   CARTE LOGIN — toujours dans le style "relief clair teinté",
   identique à .entravaux-bloc sur SPIP, QUEL QUE SOIT le mode
   dark/light de la page (cohérence visuelle dev ↔ webmail).
   ================================================================ */
.rounded-2xl.border.border-border\/60 {
  background-color: var(--itx-light-bg, #e6ddf0) !important;
  background-image: linear-gradient(180deg, var(--itx-light-bg-2, #d8cce8) 0%, var(--itx-light-bg, #e6ddf0) 100%) !important;
  border-radius: 0.9em !important;
  border-top: 2px solid rgba(0,0,0,0.22) !important;
  border-bottom: 2px solid rgba(255,255,255,0.5) !important;
  border-left: 1px solid rgba(0,0,0,0.14) !important;
  border-right: 1px solid rgba(0,0,0,0.14) !important;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6);
}

/* Titre de la carte : violet foncé, identique à .entravaux-bloc h1 */
.rounded-2xl h1,
.rounded-2xl .text-2xl {
  color: var(--itx-accent, #4a2763) !important;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: #666666;
  text-decoration-thickness: 2px;
}

/* Sous-titre et textes de la carte */
.rounded-2xl .text-sm.text-muted-foreground {
  color: #3d2a55 !important;
}
.rounded-2xl label {
  color: #232323 !important;
  font-weight: 500;
}
.rounded-2xl {
  color: #232323 !important;
}

/* Champs de saisie : BLANCS/neutres, pas teintés (demande explicite 07/09) */
.rounded-2xl input {
  background-color: #ffffff !important;
  background-image: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%) !important;
  color: #1c1c1c !important;
  border-top: 2px solid rgba(0,0,0,0.15) !important;
  border-bottom: 2px solid rgba(255,255,255,0.6) !important;
  border-left: 1px solid rgba(0,0,0,0.1) !important;
  border-right: 1px solid rgba(0,0,0,0.1) !important;
  border-radius: 0.4em !important;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.08), inset 0 -2px 4px rgba(255,255,255,0.8);
}
.rounded-2xl input::placeholder {
  color: rgba(0, 0, 0, 0.45) !important;
  opacity: 1;
}
.rounded-2xl input:focus {
  background-color: #ffffff !important;
  border-color: var(--itx-color, #613583) !important;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.08), inset 0 -2px 4px rgba(255,255,255,0.8), 0 0 0 2px color-mix(in srgb, var(--itx-color, #613583) 35%, transparent) !important;
}

/* ---------- Boutons : relief 3D sur la couleur primaire ---------- */
button.bg-primary,
button.bg-blue-500,
button.bg-blue-600,
button.bg-blue-700,
button.bg-blue-900,
button.bg-blue-950 {
  background-color: var(--color-primary, #613583) !important;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-primary, #613583) 75%, #fff) 0%, var(--color-primary, #613583) 100%) !important;
  color: #fff !important;
  border-top: 2px solid color-mix(in srgb, var(--color-primary) 60%, #fff) !important;
  border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 60%, #000) !important;
  border-left: 1px solid color-mix(in srgb, var(--color-primary) 80%, #000) !important;
  border-right: 1px solid color-mix(in srgb, var(--color-primary) 80%, #000) !important;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */
    inset 0 2px 4px rgba(255, 255, 255, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.35) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
button.bg-primary:hover,
button.bg-blue-500:hover,
button.bg-blue-600:hover,
button.bg-blue-700:hover,
button.bg-blue-900:hover,
button.bg-blue-950:hover {
  background-color: color-mix(in srgb, var(--color-primary, #613583) 82%, #000) !important;
  background-image: linear-gradient(180deg, var(--color-primary, #613583) 0%, color-mix(in srgb, var(--color-primary, #613583) 82%, #000) 100%) !important;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.45) !important;
}

/* ---------- Liens et textes bleus natifs → couleur primaire ---------- */
.text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900 {
  color: var(--color-unread, #613583) !important;
}
.border-blue-500, .border-blue-600, .border-blue-700 {
  border-color: var(--color-ring, #987cae) !important;
}

/* ---------- Liens dans le contenu : couleur adaptative (≥ 4.5) ---------- */
/* --itx-link est calculé par itx-colors.js selon la couleur choisie.
   Restreint au contenu — PAS les barres (topbar/footer gardent leurs liens) */
main a,
[class*="flex-1"] a,
[class*="overflow-y-auto"] a {
  color: var(--itx-link, var(--color-unread, #613583)) !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
main a:hover,
[class*="flex-1"] a:hover,
[class*="overflow-y-auto"] a:hover {
  color: color-mix(in srgb, var(--itx-link, var(--color-unread, #613583)) 80%, #000) !important;
}

/* ---------- Sidebar : violet foncé 3D ---------- */
[data-sidebar] {
  background-color: var(--itx-theme-dark, hsl(274, 50%, 16%)) !important;
  background-image: linear-gradient(180deg, var(--itx-barre-2, hsl(274, 63%, 8%)) 0%, var(--itx-theme-dark, hsl(274, 50%, 16%)) 100%) !important;
  border-right: 1px solid rgba(97, 53, 131, 0.3) !important;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */
}
[data-sidebar] a:hover {
  background-color: rgba(97, 53, 131, 0.15) !important;
}

/* ---------- Contenu principal : l'app est une grande carte violet incrustée ---------- */
.flex.flex-col.bg-background.overflow-hidden {
  background-color: var(--itx-theme-dark, hsl(274, 50%, 16%)) !important;
  background-image: linear-gradient(180deg, var(--itx-barre-2, hsl(274, 63%, 8%)) 0%, var(--itx-theme-dark, hsl(274, 50%, 16%)) 100%) !important;
  border-top: 2px solid #4d4d4d !important;
  border-bottom: 2px solid #f5f5f5 !important;
  border-left: 1px solid #737373 !important;
  border-right: 1px solid #737373 !important;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */
    inset 0 8px 16px rgba(0, 0, 0, 0.4),
    inset 0 -4px 8px rgba(97, 53, 131, 0.06) !important;
}

/* Sidebar icônes (w-14) et sidebar dossiers (bg-secondary) : violet moyen incrusté */
.w-14.bg-secondary,
.bg-secondary.border-e {
  background-color: var(--itx-barre, hsl(274, 57%, 13%)) !important;
  background-image: linear-gradient(180deg, var(--itx-barre-2, hsl(274, 63%, 8%)) 0%, var(--itx-barre, hsl(274, 57%, 13%)) 100%) !important;
  border-right: 1px solid rgba(97, 53, 131, 0.3) !important;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */
}

/* Zones de liste/lecture : violet très sombre pour la cohérence */
.bg-background {
  background-color: var(--itx-theme-dark, hsl(274, 50%, 16%)) !important;
}

/* ---------- Modals / toasts : violet foncé (pas de gris) ---------- */
.bg-white {
  background-color: var(--itx-theme-dark, hsl(274, 50%, 16%)) !important;
}
.bg-white\/80, .bg-white\/90 {
  background-color: rgba(26, 16, 37, 0.9) !important;
}

/* ---------- Bouton paramètres (engrenage) : conservé entravaux ---------- */
.itx-settings-btn {
  position: fixed;
  top: calc((var(--itx-header-h) - 2.6em) / 2);
  right: 1.2em;
  z-index: 10001;
  width: 2.6em;
  height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55em;
  font-size: 1em;
  font-family: inherit;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.8em;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.itx-settings-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.05);
}
.itx-settings-btn svg { width: 1.5em; height: 1.5em; }
.itx-settings-btn .itx-swatch {
  position: absolute;
  bottom: 0.25em;
  right: 0.25em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--itx-color, #613583);
  border: 2px solid rgba(0, 0, 0, 0.6);
}

/* ---------- Panneau de couleurs (pop-over) : conservé entravaux ---------- */
.itx-panel {
  position: fixed;
  top: calc(var(--itx-header-h) + var(--itx-tranche) + 0.6em);
  right: 1.2em;
  z-index: 10002;
  width: 19em;
  padding: 0.95em;
  color: #eee;
  background: rgba(26, 26, 32, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.1em;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.4);
  font-size: 0.95em;
  animation: itx-pop 0.18s ease;
  transform-origin: top right;
}
@keyframes itx-pop {
  from { opacity: 0; transform: scale(0.92) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.itx-panel[hidden] { display: none; }
.itx-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75em;
}
.itx-panel-titre {
  font-size: 0.95em;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
}
.itx-panel-close {
  width: 1.7em;
  height: 1.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-radius: 50%;
  font-size: 1em;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.itx-panel-close:hover { color: #fff; background: rgba(255, 255, 255, 0.18); }
.itx-panel-close svg { width: 1em; height: 1em; }
.itx-palette-label {
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.5em;
}
.itx-palette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5em;
  margin-bottom: 0.9em;
}
.itx-couleur {
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.itx-couleur:hover { transform: scale(1.12); }
.itx-couleur.itx-active {
  border-color: #fff;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ 0 0 0 2px rgba(0, 0, 0, 0.55);
}
.itx-panel-custom {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.75em;
}
.itx-custom {
  position: relative;
  width: 2.2em;
  height: 2.2em;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease;
}
.itx-custom:hover { transform: scale(1.08); }
.itx-custom input {
  position: absolute;
  inset: -0.4em;
  width: 2.6em;
  height: 2.6em;
  opacity: 0;
  cursor: pointer;
}
.itx-custom-label { color: rgba(255, 255, 255, 0.85); font-size: 0.92em; }
.itx-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  padding-top: 0.7em;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.itx-hex-field {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  flex: 1;
  min-width: 0;
}
.itx-hex-label {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}
.itx-hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.5em;
  padding: 0.4em 0.55em;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.itx-hex:focus {
  outline: none;
  border-color: var(--itx-color, #613583);
  background: rgba(255, 255, 255, 0.14);
}
.itx-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 0.85em;
  font-size: 0.88em;
  font-family: inherit;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.6em;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: background 0.15s ease, transform 0.12s ease;
  white-space: nowrap;
}
.itx-reset svg { width: 1em; height: 1em; }
.itx-reset:hover { background: rgba(255, 255, 255, 0.22); transform: scale(1.04); }

/* ---------- Sélecteur de thème (Clair / Sombre / Système) ---------- */
.itx-theme-label {
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.5em;
}
.itx-theme-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
  margin-bottom: 0.9em;
  padding-bottom: 0.8em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.itx-theme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  padding: 0.55em 0.3em;
  font-size: 0.8em;
  font-family: inherit;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.7em;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.itx-theme-btn svg { width: 1.2em; height: 1.2em; }
.itx-theme-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.itx-theme-btn.itx-active {
  background: var(--itx-color, #613583);
  border-color: var(--itx-color, #613583);
  color: #fff;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Bouton couleur aléatoire */
.itx-random {
  margin-left: auto;
  width: 2.2em;
  height: 2.2em;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.6em;
  transition: background 0.15s ease, transform 0.12s ease;
}
.itx-random svg { width: 1.1em; height: 1.1em; }
.itx-random:hover { background: rgba(255, 255, 255, 0.18); transform: rotate(20deg); }

/* Bouton « Enregistrer la couleur » */
/* ---------- Barre de validation (aperçu couleur) ---------- */
.itx-validation {
  display: flex;
  gap: 0.5em;
  margin-top: 0.7em;
}
.itx-valider,
.itx-annuler {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  flex: 1 1 50%;
  padding: 0.6em 0.85em;
  font-size: 0.9em;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0.6em;
  transition: filter 0.15s ease, transform 0.12s ease, background 0.15s ease;
}
.itx-valider {
  color: #fff;
  background: var(--itx-color, #613583);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ 0 2px 8px rgba(0, 0, 0, 0.3);
}
.itx-valider:hover { filter: brightness(1.12); transform: translateY(-1px); }
.itx-annuler {
  color: #eee;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.itx-annuler:hover { background: rgba(255, 255, 255, 0.22); }
.itx-valider svg,
.itx-annuler svg { width: 1em; height: 1em; }

/* ---------- Toggle colorisation des icônes ---------- */
.itx-icon-color {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 0.8em;
  font-size: 0.85em;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0.5em;
  background: rgba(255, 255, 255, 0.08);
  color: #ccc;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.itx-icon-color:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.itx-icon-color.itx-active {
  background: var(--itx-color, #613583);
  color: #fff;
  border-color: var(--itx-color, #613583);
}
.itx-icon-color svg { width: 1em; height: 1em; }

.itx-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  width: 100%;
  margin-top: 0.7em;
  padding: 0.6em 0.85em;
  font-size: 0.9em;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  color: #fff;
  background: var(--itx-color, #613583);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.6em;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.itx-save svg { width: 1em; height: 1em; }
.itx-save:hover { filter: brightness(1.12); transform: translateY(-1px); }
.itx-save.itx-saved { background: #2e7d32; }

/* ---------- Couleurs enregistrées ---------- */
.itx-saved-block {
  margin-top: 0.7em;
  padding-top: 0.7em;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.itx-saved-label {
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.5em;
}
.itx-saved-list {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  max-height: 9em;
  overflow-y: auto;
}
.itx-saved-vide {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
}
.itx-saved-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.45em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5em;
}
.itx-saved-swatch {
  width: 1.6em;
  height: 1.6em;
  flex: none;
  border-radius: 0.4em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease;
}
.itx-saved-swatch:hover { transform: scale(1.12); }
.itx-saved-hex {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
  color: rgba(255, 255, 255, 0.85);
}
.itx-saved-del {
  width: 1.6em;
  height: 1.6em;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: 0;
  border-radius: 0.4em;
  transition: background 0.15s ease, color 0.15s ease;
}
.itx-saved-del svg { width: 0.9em; height: 0.9em; }
.itx-saved-del:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }

/* ---------- Changement automatique de couleur ---------- */
.itx-auto-block {
  margin-top: 0.7em;
  padding-top: 0.7em;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.itx-auto-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
}
.itx-auto-label {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.85);
}
.itx-auto-toggle {
  position: relative;
  width: 2.6em;
  height: 1.5em;
  flex: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1em;
  transition: background 0.2s ease;
}
.itx-auto-knob {
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: left 0.2s ease;
}
.itx-auto-toggle.itx-on {
  background: var(--itx-color, #613583);
  border-color: var(--itx-color, #613583);
}
.itx-auto-toggle.itx-on .itx-auto-knob { left: 1.25em; }
.itx-auto-options {
  margin-top: 0.6em;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.itx-auto-options[hidden] { display: none; }
.itx-auto-interval-label {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}
.itx-auto-intervals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4em;
}
.itx-interval-btn {
  padding: 0.4em 0.2em;
  font-size: 0.8em;
  font-family: inherit;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.5em;
  transition: background 0.15s ease, color 0.15s ease;
}
.itx-interval-btn:hover { background: rgba(255, 255, 255, 0.12); }
.itx-interval-btn.itx-active {
  background: var(--itx-color, #613583);
  border-color: var(--itx-color, #613583);
  color: #fff;
}

/* ---------- MODE CLAIR (pastille ☀) : fonds clairs, écriture sombre ---------- */
/* Activé par <html data-itx-light> (posé par itx-colors.js) */
html[data-itx-light] body {
  background: radial-gradient(circle, #f4f4f4 20%, #dedede 100%);
  background-color: #e2e2e2;
}
/* Carte login et champs : la règle unifiée .rounded-2xl (non scopée
   dark/light, plus haut dans ce fichier) couvre déjà tous les modes,
   identique à .entravaux-bloc SPIP. Pas de redéfinition ici. */
/* App connectée : grande carte claire */
html[data-itx-light] .flex.flex-col.bg-background.overflow-hidden {
  background-color: #f4f4f4 !important;
  background-image: linear-gradient(180deg, #ececec 0%, #fafafa 100%) !important;
  border-top: 2px solid #9a9a9a !important;
  border-bottom: 2px solid #ffffff !important;
  border-left: 1px solid #b9b9b9 !important;
  border-right: 1px solid #b9b9b9 !important;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */
    0 8px 24px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.12) !important;
}
/* Sidebars : violet très clair */
html[data-itx-light] [data-sidebar] {
  background-color: var(--itx-light-bg-2, hsl(274, 25%, 88%)) !important;
  background-image: linear-gradient(180deg, var(--itx-light-bg, hsl(274, 20%, 92%)) 0%, var(--itx-light-bg-2, hsl(274, 25%, 88%)) 100%) !important;
  border-right: 1px solid var(--color-border, #d4c0e8) !important;
}
html[data-itx-light] .w-14.bg-secondary,
html[data-itx-light] .bg-secondary.border-e {
  background-color: var(--itx-light-bg, hsl(274, 20%, 92%)) !important;
  background-image: linear-gradient(180deg, var(--itx-light-bg-2, hsl(274, 25%, 88%)) 0%, var(--itx-light-bg, hsl(274, 20%, 92%)) 100%) !important;
  border-right: 1px solid var(--color-border, #d4c0e8) !important;
}
/* Listes / lecture : violet très pâle */
html[data-itx-light] .bg-background {
  background-color: var(--itx-light-bg, hsl(274, 20%, 92%)) !important;
}
/* Modals / toasts */
html[data-itx-light] .bg-white {
  background-color: #ffffff !important;
}
html[data-itx-light] .bg-white\/80, html[data-itx-light] .bg-white\/90 {
  background-color: rgba(245, 240, 250, 0.92) !important;
}
/* Texte général : sombre sur fonds clairs */
html[data-itx-light] :is(body, main, p, span, div, td, li) {
  --color-foreground: #1c1c1c;
}
html[data-itx-light] body { color: #1c1c1c; }
/* Logo login : relief conservé (ressort sur fond clair grâce à la tranche foncée) */
html[data-itx-light] .inline-flex.items-center.justify-center.mb-5.w-16.h-16 {
  background-image: linear-gradient(180deg, #6e6e76 0%, #b0b0b0 55%, #e0e0e0 100%) !important;
}

/* ---------- Responsive ---------- */
/* Écrans ≤ 720px de haut : barres compactes pour que le formulaire de
   connexion tienne sans être recouvert par le footer fixe. */
@media (max-height: 720px) {
  :root {
    --itx-header-h: 3.8em;
    --itx-footer-h: 3.2em;
    --itx-tranche: 10px;
  }
  /* Compacte l'en-tête de la carte (logo+titre) et le formulaire.
     Classes RÉELLES (vérifiées DOM : pt-10 pb-6 / pb-8 — pas les noms supposés) */
  .rounded-2xl .px-8.pt-10.pb-6.text-center {
    padding-top: 0.3rem !important;
    padding-bottom: 0.2rem !important;
  }
  .rounded-2xl .px-8.pb-8 {
    padding-bottom: 0.6rem !important;
  }
  /* Badge logo + titre + sous-titre : marges réduites.
     Spécificité renforcée (.rounded-2xl ×) : la règle principale
     4.2em !important est déclarée PLUS BAS dans le fichier → sans ça,
     l'ordre de cascade la fait gagner malgré le !important de la media. */
  .rounded-2xl .inline-flex.items-center.justify-center.mb-5.w-16.h-16 {
    margin-bottom: 0.3rem !important;
    width: 3.3em !important;
    height: 3.3em !important;
    padding: 0.35em !important;
  }
  .rounded-2xl .inline-flex.items-center.justify-center.mb-5.w-16.h-16 img {
    height: 2.4em !important;
    max-height: 2.4em !important;
  }
  .rounded-2xl h1, .rounded-2xl .text-2xl {
    font-size: 1.5rem !important;
    margin: 0.1rem 0 !important;
  }
  .rounded-2xl .text-base, .rounded-2xl .mt-2 {
    margin-top: 0.15rem !important;
  }
}

@media (max-width: 768px) {
  :root {
    --itx-header-h: 3.5em;
    --itx-footer-h: 3em;
    --itx-tranche: 6px;
  }
  .itx-app-logo { display: none; }
  .itx-burger { display: none; }
  .itx-app-search { max-width: none; width: auto; right: 3.2em; }
  .itx-settings-btn { width: 2.2em; height: 2.2em; }

  /* Le chrome Iteractif (topbar sombre + logo, footer SIRET, tranches) est
     CONSERVÉ sur mobile, en version compacte, pour rester fidèle au thème
     « en travaux » (www.iteractif.com). Le responsive natif Bulwark
     (MobileHeader hamburger+titre+avatar, barre de navigation basse, bouton
     « Rédiger » flottant) reste actif À L'INTÉRIEUR, entre les deux barres :
     c'est lui qui donne accès à toutes les fonctionnalités. */
  body {
    padding-top: calc(var(--itx-header-h) + var(--itx-tranche));
    padding-bottom: calc(var(--itx-footer-h) + var(--itx-tranche));
  }
  /* Le shell (grande carte grise) fait 100dvh par défaut ; avec le padding
     du body il déborde sous le footer et pousse la barre de navigation
     native hors écran. On le réduit à la hauteur exacte entre les deux
     barres pour que header + liste + nav native tiennent dans le viewport. */
  .flex.flex-col.bg-background.overflow-hidden {
    height: calc(100dvh - var(--itx-header-h) - var(--itx-tranche) - var(--itx-footer-h) - var(--itx-tranche)) !important;
  }
  /* L'engrenage (sélecteur de couleur) revient en haut à droite, dans la
     topbar sombre. L'avatar du sélecteur de compte est dans le MobileHeader
     natif, juste en dessous : plus de chevauchement. */
  .itx-settings-btn {
    top: calc((var(--itx-header-h) - 2.2em) / 2);
    right: 0.6em;
    bottom: auto;
    left: auto;
  }
}

/* ---------- Toggle Light/Dark/System natif : RESTAURÉ ----------
   Le toggle natif de Bulwark (Light/Dark/System) est de nouveau visible et
   fonctionnel. Le thème n'est plus forcé : l'utilisateur choisit librement,
   et le look Iteractif (violet « en travaux » / clair) suit ce choix via
   la synchro data-itx-light dans itx-colors.js. */

/* ---------- Colorisation des icônes (toggle utilisateur) ---------- */
.itx-icons-colored .itx-settings-btn svg,
.itx-icons-colored .itx-theme-btn svg,
.itx-icons-colored .itx-random svg,
.itx-icons-colored .itx-valider svg,
.itx-icons-colored .itx-annuler svg,
.itx-icons-colored .itx-reset svg,
.itx-icons-colored .itx-save svg,
.itx-icons-colored .itx-interval-btn svg,
.itx-icons-colored .itx-theme-item svg {
  color: var(--itx-color, #613583);
  fill: var(--itx-color, #613583);
}
/* Logo de la carte de connexion : colorisé */
.itx-icons-colored .itx-app-logo {
  filter: none;
}

/* ---------- Bouton natif Bulwark "Theme: Light/Dark/System" ----------
   Doublonne fonctionnellement l'engrenage iteractif (menu > Thème) : les deux
   pilotent le même mode clair/sombre/système. Décision (11/09) : les DEUX
   restent visibles, mais distingués visuellement — discret, petit, sobre,
   pour ne pas rivaliser avec l'engrenage violet qui reste l'action principale. */
button[aria-label^="Theme:"] {
  padding: 0.3em 0.6em !important;
  font-size: 0.78em !important;
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  transition: opacity 0.15s ease;
}
button[aria-label^="Theme:"]:hover {
  opacity: 1;
}
button[aria-label^="Theme:"] svg {
  width: 0.9em !important;
  height: 0.9em !important;
}
html[data-itx-light] button[aria-label^="Theme:"] {
  background: rgba(97, 53, 131, 0.06) !important;
  border-color: rgba(97, 53, 131, 0.15) !important;
}
/* Zone tactile minimale (44x44 CSS px, recommandation Apple/Google) :
   sur mobile le libellé texte est masqué par Bulwark (hidden sm:inline),
   il ne reste que l'icône → sans ce correctif le bouton retombait à 28x21px,
   trop petit pour un doigt. Rester discret visuellement (opacité, fond)
   tout en garantissant une cible cliquable correcte. */
@media (max-width: 640px) {
  button[aria-label^="Theme:"] {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    font-size: 1em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  button[aria-label^="Theme:"] svg {
    width: 18px !important;
    height: 18px !important;
  }
  /* Contraste desktop (opacity 0.55) insuffisant sur petit écran tactile */
  button[aria-label^="Theme:"] {
    opacity: 0.75 !important;
  }
}

/* ---------- Menu compte (rouage → menu complet) ----------
   Teinté avec la couleur du thème + look moderne (cohérent avec SPIP) */
.itx-account-menu {
  position: fixed;
  top: var(--itx-header-h, 3.4em);
  right: 0.9em;
  z-index: 10002;
  width: 17em;
  padding: 0.4em;
  color: #eee;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--itx-color, #613583) 32%, #16121e) 0%,
    color-mix(in srgb, var(--itx-color, #613583) 14%, #0e0b13) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--itx-color, #613583) 45%, rgba(255,255,255,0.12));
  border-radius: 1.2em;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 6px 20px color-mix(in srgb, var(--itx-color, #613583) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.itx-account-menu[hidden] { display: none; }
.itx-account-head {
  padding: 0.55em 0.7em 0.5em;
  border-bottom: 1px solid color-mix(in srgb, var(--itx-color, #613583) 35%, rgba(255,255,255,0.1));
  margin-bottom: 0.35em;
}
.itx-account-name {
  font-weight: 600;
  font-size: 0.95em;
  color: #fff;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.itx-account-item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  padding: 0.6em 0.7em 0.6em 0.6em;
  margin: 0.1em 0;
  font-size: 0.92em;
  font-family: inherit;
  font-weight: 500;
  text-align: left;
  color: #f0eaf7;
  background: color-mix(in srgb, var(--itx-color, #613583) 16%, transparent);
  border: none;
  border-left: 3px solid color-mix(in srgb, var(--itx-color, #613583) 70%, #fff);
  border-radius: 0.5em 0.6em 0.6em 0.5em;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
.itx-account-item:hover,
.itx-account-item:focus {
  background: color-mix(in srgb, var(--itx-color, #613583) 40%, transparent);
  color: #fff;
}
.itx-account-item svg { width: 1.2em; height: 1.2em; flex: 0 0 auto; color: #c084fc; opacity: 0.95; }
#itx-account-logout { color: #ffcdd2; background: rgba(255, 82, 82, 0.10); border-left-color: #ff8a80; }
#itx-account-logout:hover { background: rgba(255, 82, 82, 0.22); color: #ffb3ab; }

/* ===== Badge topbar Marché de Foix (webmail) ===== */
.itx-marche-topbar-indicator {
  position: fixed;
  top: var(--itx-badge-top, 7.45rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2002;
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.75em 0.2em 0.55em;
  font-size: 0.78em;
  font-weight: 600;
  color: #fff;
  background: #2e7d32;
  border-radius: 2em;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ 0 2px 8px rgba(0,0,0,0.4), 0 0 0 2px rgba(46,125,50,0.4);
  animation: itx-marche-pulse 2.4s ease infinite;
  pointer-events: none;
}
.itx-marche-topbar-indicator[hidden] { display: none; }
.itx-marche-topbar-indicator.itx-marche-off {
  background: rgba(80, 80, 90, 0.6);
  color: rgba(220, 220, 225, 0.7);
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ none;
  animation: none;
  font-style: italic;
  pointer-events: none;
}
.itx-marche-topbar-indicator.itx-marche-off svg { opacity: 0.5; }
.itx-marche-topbar-indicator.itx-marche-clickable {
  pointer-events: auto;
  cursor: pointer;
}
.itx-marche-topbar-indicator.itx-marche-clickable:hover {
  filter: brightness(1.15);
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ 0 2px 8px rgba(0,0,0,0.4), 0 0 0 3px rgba(255,255,255,0.2);
}
.itx-marche-topbar-indicator.itx-marche-off.itx-marche-clickable {
  pointer-events: auto;
  cursor: pointer;
  font-style: normal;
}
.itx-marche-topbar-indicator.itx-marche-off.itx-marche-clickable:hover {
  background: rgba(100, 100, 115, 0.75);
  color: rgba(240, 240, 245, 0.9);
}
.itx-marche-topbar-indicator.itx-marche-off.itx-marche-clickable svg { opacity: 0.7; }
@keyframes itx-marche-pulse {
  0%, 100% { box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ 0 2px 8px rgba(0,0,0,0.4), 0 0 0 2px rgba(46,125,50,0.4); }
  50%       { box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ 0 2px 12px rgba(0,0,0,0.5), 0 0 0 5px rgba(46,125,50,0.2); }
}

/* ============================================================
   SYNC CONTRASTES : Mode sombre — Bulwark → Thème Iteractif
   Le .dark de globals.css (Tailwind) utilise des valeurs 
   génériques (noir/gris). Ici on les écrase avec les 
   valeurs itx pour un rendu violet cohérent.
   ============================================================ */
.dark {
  --color-background: var(--itx-theme-dark, hsl(274, 50%, 16%));
  --color-foreground: rgba(255, 255, 255, 0.92);
  --color-card: #221e32;
  --color-card-foreground: rgba(255, 255, 255, 0.92);
  --color-border: rgba(97, 53, 131, 0.3);
  --color-input: rgba(97, 53, 131, 0.15);
  --color-ring: var(--itx-color, #613583);
  --color-muted: rgba(97, 53, 131, 0.1);
  --color-muted-foreground: rgba(200, 180, 230, 0.8);
  --color-secondary: rgba(97, 53, 131, 0.2);
  --color-secondary-foreground: rgba(255, 255, 255, 0.9);
  --color-accent: var(--itx-accent, hsl(274, 42%, 28%));
  --color-accent-foreground: #ffffff;
  --color-popover: #1c1c24;
  --color-popover-foreground: rgba(255, 255, 255, 0.92);
  --color-primary: var(--itx-color, #613583);
  --color-primary-foreground: #ffffff;
  --color-sidebar: var(--itx-theme-dark, hsl(274, 50%, 16%));
  --color-sidebar-foreground: rgba(255, 255, 255, 0.92);
  --color-sidebar-border: rgba(255, 255, 255, 0.08);
  --color-sidebar-accent: rgba(255, 255, 255, 0.06);
  --color-sidebar-accent-foreground: rgba(255, 255, 255, 0.9);
}

/* Contraste : .text-primary (liens/texte, ex. filtres, contacts, "Avancé :
   modifier les niveaux de tri") utilise --color-primary = violet marque
   #613583. Sur bg-primary PLEIN c'est correct (texte blanc dessus), mais
   utilisé comme COULEUR DE TEXTE directement sur le fond de page sombre,
   le ratio tombe à ~1.8:1 (illisible). On garde --color-primary intact
   (boutons, bordures, ring restent violet marque) et on éclaircit
   uniquement le texte, même teinte que --color-muted-foreground sans
   alpha : ratio ≥8.5:1 mesuré sur background/card/popover réels. Aucun
   composant du repo ne combine bg-primary plein + text-primary (vérifié),
   donc pas de risque de texte clair sur fond clair. */
.dark .text-primary {
  color: rgba(200, 180, 230, 1);
}

/* Mode clair — Bulwark → Thème Iteractif */
:root:not(.dark) {
  --color-background: var(--itx-theme, hsl(274, 25%, 46%));
  --color-foreground: #1a1025;
  --color-card: rgba(255, 255, 255, 0.92);
  --color-card-foreground: #1a1025;
  --color-border: rgba(97, 53, 131, 0.2);
  --color-input: rgba(97, 53, 131, 0.08);
  --color-ring: var(--itx-color, #613583);
  --color-muted: rgba(97, 53, 131, 0.06);
  --color-muted-foreground: rgba(50, 30, 70, 0.8);
  --color-secondary: rgba(97, 53, 131, 0.12);
  --color-secondary-foreground: #1a1025;
  --color-accent: var(--itx-color, #613583);
  --color-accent-foreground: #ffffff;
  --color-popover: rgba(255, 255, 255, 0.95);
  --color-popover-foreground: #1a1025;
  --color-primary: var(--itx-color, #613583);
  --color-primary-foreground: #ffffff;
  --color-sidebar: rgba(255, 255, 255, 0.95);
  --color-sidebar-foreground: #1a1025;
  --color-sidebar-border: rgba(97, 53, 131, 0.15);
  --color-sidebar-accent: rgba(97, 53, 131, 0.08);
  --color-sidebar-accent-foreground: #1a1025;
}

/* ============================================================
   TEINTES UNIVERSELLES : Tous les éléments interactifs
   prennent la couleur thème pour les bordures/focus
   ============================================================ */
/* Inputs, selects, textareas — bordures et focus violet */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea,
button,
.btn,
.form-control,
.itx-app-search input[data-search-input] {
  border-color: rgba(97, 53, 131, 0.25);
}
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="search"],
.dark select,
.dark textarea,
.dark button {
  border-color: rgba(255, 255, 255, 0.12);
}
input:focus, select:focus, textarea:focus, button:focus {
  border-color: var(--itx-color, #613583);
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ 0 0 0 3px color-mix(in srgb, var(--itx-color, #613583) 25%, transparent);
}
.dark input:focus, .dark select:focus, .dark textarea:focus {
  border-color: var(--itx-color, #613583);
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ 0 0 0 3px color-mix(in srgb, var(--itx-color, #613583) 40%, transparent);
}

/* Tous les liens prennent la couleur thème en hover */
a:hover {
  color: var(--itx-color, #613583);
}
.dark a:hover {
  color: #b388ff;
}

/* ============================================================
   MODE CLAIR : Contrastes optimisés — texte foncé sur fond clair
   ============================================================ */
:root:not(.dark) {
  --color-background: #f5f0fa;
  --color-foreground: #1a1025;
  --color-card: #ffffff;
  --color-card-foreground: #1a1025;
  --color-border: #d4c0e8;
  --color-input: #ede5f5;
  --color-ring: #613583;
  --color-muted: #f0e8f8;
  --color-muted-foreground: #4a3565;
  --color-secondary: #ede5f5;
  --color-secondary-foreground: #1a1025;
  --color-accent: #613583;
  --color-accent-foreground: #ffffff;
  --color-popover: #ffffff;
  --color-popover-foreground: #1a1025;
  --color-primary: #613583;
  --color-primary-foreground: #ffffff;
  --color-sidebar: #ffffff;
  --color-sidebar-foreground: #1a1025;
  --color-sidebar-border: #d4c0e8;
  --color-sidebar-accent: #f0e8f8;
  --color-sidebar-accent-foreground: #1a1025;
}

/* Améliorations de lisibilité mode clair */
:root:not(.dark) body {
  color: #1a1025;
  background-color: #f5f0fa;
}
:root:not(.dark) .itx-app-topbar {
  background: linear-gradient(180deg, var(--itx-barre) 0%, var(--itx-barre-2) 100%);
}
:root:not(.dark) .itx-app-footer {
  background: linear-gradient(180deg, var(--itx-barre) 0%, var(--itx-barre-2) 100%);
}
:root:not(.dark) .itx-app-footer .itx-coord {
  background: rgba(97, 53, 131, 0.08);
  border-color: rgba(97, 53, 131, 0.2);
  color: #2a1a3a;
}
:root:not(.dark) .itx-app-footer .itx-coord strong {
  color: #4a2a6a;
}
:root:not(.dark) .itx-app-footer .itx-coord a {
  color: #613583;
}
:root:not(.dark) .itx-app-footer .itx-coord a:hover {
  background: rgba(97, 53, 131, 0.15);
  color: #4a2a6a;
}
:root:not(.dark) .itx-marche-badge {
  background: rgba(46, 125, 50, 0.15);
  color: #2e7d32;
  border-color: rgba(46, 125, 50, 0.25);
  font-weight: 600;
}

/* ============================================================
   FOND CLAIR : Override du radial-gradient violet en mode light
   ============================================================ */
:root:not(.dark) body,
html.light body {
  background: var(--color-background, #f5f0fa) !important;
  background-color: var(--color-background, #f5f0fa) !important;
  color: var(--color-foreground, #1a1025) !important;
}

/* Carte login en mode clair : fond blanc propre, ombres légères */
html.light .rounded-2xl,
html.light .rounded-xl,
:root:not(.dark) .rounded-2xl,
:root:not(.dark) .rounded-xl {
  background-color: #ffffff;
  color: #1a1025;
  border: 1px solid #d4c0e8;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(255,255,255,.6); /* enfoncé violet */
  background-color: color-mix(in srgb, var(--itx-color, #613583) 12%, #b8b8b8); /* REMPLACE GRIS */ 0 4px 24px rgba(97,53,131,0.12);
}

/* Sidebar en mode clair */
html.light [class*="sidebar"],
:root:not(.dark) [class*="sidebar"] {
  background-color: #f8f3fd;
  color: #1a1025;
  border-color: #d4c0e8;
}

/* Textes en mode clair */
html.light,
:root:not(.dark) {
  color: #1a1025;
}

html.light p, html.light span, html.light div, html.light h1, html.light h2, html.light h3, html.light a,
:root:not(.dark) p, :root:not(.dark) span, :root:not(.dark) h1, :root:not(.dark) h2, :root:not(.dark) h3 {
  color: inherit;
}