/* Portail WebGazelle — styles applicatifs. S'appuie sur les tokens de
   colors_and_type.css (charte Cognix). Aucune couleur en dur hors tokens de score. */

:root {
  /* Tokens de score (guide design) — alias des deep de la palette mate */
  --score-bon:      var(--color-success-deep);   --score-bon-bg:    var(--color-success-tint);
  --score-moyen:    var(--color-warning-deep);    --score-moyen-bg:  var(--color-warning-tint);
  --score-faible:   var(--color-danger-deep);     --score-faible-bg: var(--color-danger-tint);
  --score-na:       var(--color-ink-3);           --score-na-bg:     var(--color-snow-2);
  --sidebar-bg:      var(--color-accent-2);        /* deep teal — zone menu #357C8E */
  --sidebar-brand-bg: #2F6F80;                     /* bande marque, plus foncée */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--color-snow); }
a { color: var(--color-accent); text-decoration: none; }
/* Jamais de soulignage au survol (charte du DS) — la maquette signale le survol
   par la couleur/le fond, pas un souligné. On conserve le changement de couleur. */
a:hover { text-decoration: none; }
button { font-family: inherit; }

/* ─── Shell (structure CXAGENT / agents-web, adaptée deep teal) ──────────── */
.wg-shell { display: flex; height: 100vh; width: 100%; overflow: hidden; position: relative; }
.wg-aside { width: 240px; flex-shrink: 0; background: var(--sidebar-bg); color: #fff;
  display: flex; flex-direction: column; border-right: 1px solid var(--color-mist-2);
  transition: width 220ms var(--ease); }
/* Bande marque (haut) — fond plus foncé + hairline basse : sépare du menu. */
/* Bande marque (haut) — fond plus foncé + hairline basse : sépare du menu. */
.wg-brand { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 14px 14px;
  background: var(--sidebar-brand-bg); border-bottom: 1px solid rgba(255,255,255,.16); }
.wg-logo-full { height: 46px; width: auto; display: block; margin: 0; }
.wg-logo-full-dark { display: none; }   /* variante sombre : thème sidebar « clair » uniquement */
.wg-logo-mark { height: 42px; width: auto; display: none; margin: 0; }
.wg-brand .wg-rail-hide { font: 700 10.5px/1 var(--font-sans); letter-spacing: .14em;
  text-transform: uppercase; text-align: center; color: rgba(255,255,255,.72); }
.wg-navzone { flex: 1; overflow-y: auto; padding: 12px 10px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
/* Scrollbar du menu : fine et translucide, fondue dans le deep teal (WebKit). */
.wg-navzone::-webkit-scrollbar { width: 6px; }
.wg-navzone::-webkit-scrollbar-track { background: transparent; }
.wg-navzone::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 3px; }
.wg-navzone::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.45); }

/* Nav en groupes dépliables (CXAGENT) */
.wgn-list { display: flex; flex-direction: column; gap: 2px; }
.wgn-group { display: flex; flex-direction: column; gap: 2px; }
.wgn-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 6px;
  color: #fff; cursor: pointer; user-select: none; text-align: left; border: 0; background: transparent;
  font: 500 14px/1.2 var(--font-sans); transition: background-color .15s ease; }
.wgn-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.wgn-ico { width: 16px; height: 16px; flex: 0 0 16px; opacity: .9; display: inline-flex; align-items: center; justify-content: center; }
.wgn-label { flex: 1; }
.wgn-chev { width: 14px; height: 14px; opacity: .65; transition: transform .2s ease; flex: 0 0 14px; }
.wgn-group.is-open .wgn-chev { transform: rotate(90deg); }
.wgn-group:not(.is-open) .wgn-sub { display: none; }
.wgn-item.is-parent-active { font-weight: 700; }
.wgn-item.is-active { background: #fff; color: #2C6A7A; font-weight: 700; }
.wgn-sub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 6px; margin-left: 18px;
  border-left: 1px solid rgba(255,255,255,.14); }
.wgn-subitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 5px;
  color: #fff; cursor: pointer; text-align: left; border: 0; background: transparent; text-decoration: none;
  font: 500 13.5px/1.2 var(--font-sans); transition: background-color .14s ease, color .14s ease; }
.wgn-subitem:hover { background: rgba(255,255,255,.08); color: #fff; }
.wgn-subitem.active:hover { background: #fff; color: #2C6A7A; }
.wgn-subitem.active { background: #fff; color: #2C6A7A; font-weight: 700; }
.wgn-count { margin-left: auto; font: 600 11.5px/1 var(--font-sans); font-variant-numeric: tabular-nums; opacity: .8;
  background: rgba(255,255,255,.14); padding: 2px 7px; border-radius: 100px; }
.wgn-subitem.active .wgn-count { background: rgba(44,106,122,.14); color: #2C6A7A; opacity: 1; }
.wgn-subitem.is-disabled { opacity: .5; cursor: default; }
.wgn-subitem.is-disabled:hover { background: transparent; }
.wgn-soon { margin-left: auto; font: 700 9px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .05em;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.72); padding: 3px 7px; border-radius: 100px; }

/* Pied : utilisateur + kebab → menu déroulant */
.wg-footer { border-top: 1px solid rgba(255,255,255,.16); background: var(--sidebar-bg); padding: 12px; position: relative; }
.wgn-foot-user { display: flex; align-items: center; gap: 10px; padding: 12px 6px 4px; }
.wgn-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--font-sans); flex-shrink: 0; }
.wgn-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wgn-who .wgn-name { font: 600 13.5px/1 var(--font-sans); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgn-who .wgn-role { font: 500 11.5px/1 var(--font-sans-alt); color: rgba(255,255,255,.65); }
.wgn-kebab { width: 28px; height: 28px; background: transparent; border: 0; color: #fff; opacity: .65; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s ease, opacity .15s ease; }
.wgn-kebab:hover { background: rgba(255,255,255,.08); opacity: 1; }
@keyframes wg-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.wg-user-menu { position: absolute; bottom: calc(100% + 8px); left: 8px; right: 8px; background: #fff;
  border: 1px solid var(--color-mist-2); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 81;
  animation: wg-pop 170ms var(--ease); }
.wg-user-veil { position: fixed; inset: 0; z-index: 80; }
.wg-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer; text-align: left; font: 400 13.5px/1.2 var(--font-sans-alt); color: var(--color-ink-2); }
.wg-menu-item:hover { background: var(--color-snow-2); color: var(--color-ink); }
.wg-menu-item.is-danger { font-weight: 600; color: var(--color-danger-deep); }
.wg-menu-item.is-danger:hover { background: var(--color-danger-tint); }
.wg-menu-item .ic { display: inline-flex; width: 17px; height: 17px; color: var(--color-ink-3); }

.wg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 56px; flex-shrink: 0; border-bottom: 1px solid var(--color-mist-2); background: #fff;
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px; }
.breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.breadcrumb .sep { color: var(--color-mist); }
.breadcrumb .cur { font-weight: var(--fw-bold); color: var(--color-accent-2); }
.content-scroll { flex: 1; overflow-y: auto; }
.content { max-width: 1180px; margin: 0 auto; padding: 30px 40px 72px; }

.page-title { font: var(--fw-bold) 27px/1.15 var(--font-sans); color: var(--color-ink); letter-spacing: -.01em; margin: 0; }
.page-sub { margin: 7px 0 0; font: 14.5px/1.5 var(--font-sans); color: var(--color-ink-3); max-width: 640px; }
.section-head { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--color-mist-2); }
.section-head .h { font: var(--fw-bold) 13px/1 var(--font-sans); color: var(--color-ink);
  text-transform: uppercase; letter-spacing: .06em; }
.section-head .sub { font: 12px/1 var(--font-sans); color: var(--color-ink-soft); }

/* ─── Cartes, boutons, formulaires ──────────────────────────────────────── */
.card { background: #fff; border: 1px solid var(--color-mist-2); border-radius: 10px; overflow: hidden; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px; border-bottom: 1px solid var(--color-mist-2); }
.card__head h3 { font: var(--fw-bold) 15px/1.2 var(--font-sans); color: var(--color-ink); margin: 0; }
.card__body { padding: 22px; }
.mb-24 { margin-bottom: 24px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 20px;
  border: 0; border-radius: 6px; font: var(--fw-bold) 15px/1 var(--font-sans); cursor: pointer; }
.btn--primary { background: var(--color-accent); color: #fff; }
/* color répété au survol : sans lui, le a:hover global (colors_and_type.css)
   teinte le TEXTE en accent-hover = la couleur du fond → libellé invisible
   quand le bouton est un <a> (ex. « Nouveau skill »). */
.btn--primary:hover { background: var(--color-accent-hover); color: #fff; }
.btn--ghost { background: #fff; color: var(--color-ink-2); border: 1px solid var(--color-mist-2); }
.btn--ghost:hover { background: var(--color-accent-tint); border-color: var(--color-accent); color: var(--color-accent-2); }
.btn--sm { height: 38px; padding: 0 15px; font-size: 13.5px; }

label.lbl { display: block; font: var(--fw-bold) 14px/1.2 var(--font-sans); color: var(--color-ink); margin-bottom: 8px; }
.input { display: flex; align-items: center; height: 46px; background: #fff; border: 1px solid var(--color-mist);
  border-radius: 6px; }
.input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: 15px/1 var(--font-sans); color: var(--color-ink-2); padding: 0 14px; height: 100%; }
.input .ic { width: 44px; display: grid; place-items: center; color: var(--color-ink-soft); }
.hint { margin: 9px 0 0; font: 12.5px/1.5 var(--font-sans); color: var(--color-ink-soft); }

/* Segmented control & onglets */
.seg { display: inline-flex; background: var(--color-snow-2); border-radius: 8px; padding: 3px; }
.seg a, .seg button { border: 0; background: transparent; cursor: pointer; padding: 0 14px; height: 30px;
  border-radius: 6px; font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--color-ink-3);
  display: inline-flex; align-items: center; gap: 6px; }
.seg .is-active { background: #fff; color: var(--color-ink); font-weight: var(--fw-bold); box-shadow: var(--shadow-sm); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-mist-2); margin-bottom: 20px; }
.tab { border: 0; background: transparent; cursor: pointer; padding: 10px 16px; font: var(--fw-medium) 14px/1 var(--font-sans);
  color: var(--color-ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.is-active { color: var(--color-accent-2); font-weight: var(--fw-bold); border-bottom-color: var(--color-accent); }

/* Segmented à base de radios (rôle / statut) */
.seg-radio { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--color-snow-2); border-radius: 8px; padding: 3px; }
.seg-radio label { padding: 0 12px; height: 30px; display: inline-flex; align-items: center; border-radius: 6px;
  font: 600 13px/1 var(--font-sans); color: var(--color-ink-3); cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-radio label:has(input:checked) { background: #fff; color: var(--color-ink); box-shadow: var(--shadow-sm); }

/* Volet latéral (drawer) create/edit — parité CXAGENT.
   z-index 89/90 : le volet passe AU-DESSUS de la cloche notif du topbar (z-index 81). */
.wg-drawer-veil { position: fixed; inset: 0; background: rgba(28,34,46,.32); opacity: 0; pointer-events: none;
  transition: opacity 300ms var(--ease); z-index: 89; }
.wg-drawer-veil.open { opacity: 1; pointer-events: auto; }
.wg-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(92vw, 460px); background: var(--color-snow);
  border-left: 1px solid var(--color-mist-2); box-shadow: -16px 0 44px rgba(28,34,46,.16);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform 340ms var(--ease); z-index: 90; }
.wg-drawer.open { transform: translateX(0); }
.wg-drawer__card { background: #fff; border: 1px solid var(--color-mist-2); border-radius: 8px; padding: 18px 20px; margin-bottom: 16px; }

/* Pastilles de verdict */
.pill { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-bold) 11px/1 var(--font-sans);
  padding: 4px 9px; border-radius: 100px; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.is-bon { background: var(--score-bon-bg); color: var(--score-bon); }
.pill.is-moyen { background: var(--score-moyen-bg); color: var(--score-moyen); }
.pill.is-faible { background: var(--score-faible-bg); color: var(--score-faible); }
.pill.is-info { background: var(--tag-sky-bg); color: var(--tag-sky-deep); }
.pill.is-na { background: var(--score-na-bg); color: var(--score-na); }

/* Jauge de score (anneau conique) */
.seo-gauge { --score: 0; --gauge: var(--color-mist); position: relative; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: conic-gradient(var(--gauge) calc(var(--score) * 1%), var(--color-mist-2) 0); }
.seo-gauge::before { content: ""; position: absolute; inset: 12%; background: #fff; border-radius: 50%; }
.seo-gauge__score { position: relative; font: var(--fw-extrabold) 1em/1 var(--font-sans); color: var(--color-ink);
  font-variant-numeric: tabular-nums; }
.seo-gauge.is-bon { --gauge: var(--score-bon); }
.seo-gauge.is-moyen { --gauge: var(--score-moyen); }
.seo-gauge.is-faible { --gauge: var(--score-faible); }
.seo-gauge.is-na { --gauge: var(--color-mist); }

/* Core Web Vitals */
.grid-cwv { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; }
.cwv { background: #fff; border: 1px solid var(--color-mist-2); border-radius: 10px; padding: 16px 18px; }
.cwv__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
  font: var(--fw-extrabold) 13px/1 var(--font-sans); color: var(--color-ink-3); letter-spacing: .04em; }
.cwv__val { font: var(--fw-extrabold) 22px/1 var(--font-sans); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.cwv__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 13px;
  padding-top: 11px; border-top: 1px solid var(--color-mist-2); font: 12px/1 var(--font-sans); color: var(--color-ink-3); }

/* Lignes on-page / indexabilité */
.check { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--color-mist-2); }
.check:last-child { border-bottom: 0; }
.check__ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.check__ic.is-ok { background: var(--score-bon-bg); color: var(--score-bon); }
.check__ic.is-warn { background: var(--score-moyen-bg); color: var(--score-moyen); }
.check__ic.is-ko { background: var(--score-faible-bg); color: var(--score-faible); }
.check__ic.is-na { background: var(--score-na-bg); color: var(--score-na); }
.check__lbl { font: var(--fw-bold) 14px/1.3 var(--font-sans); color: var(--color-ink); }
.check__detail { margin: 4px 0 0; font: 13px/1.5 var(--font-sans-alt); color: var(--color-ink-3); }

/* Recommandations */
.reco { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--color-mist-2); }
.reco:last-child { border-bottom: 0; }
.reco__num { width: 26px; height: 26px; border-radius: 50%; background: var(--color-snow-2); color: var(--color-ink-2);
  display: grid; place-items: center; font: var(--fw-extrabold) 12px/1 var(--font-sans); flex-shrink: 0; }
.reco__tag { display: inline-block; font: var(--fw-bold) 10px/1 var(--font-sans); letter-spacing: .05em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 4px; }
.reco__tag.is-fort { background: var(--score-faible-bg); color: var(--score-faible); }
.reco__tag.is-moyen { background: var(--score-moyen-bg); color: var(--score-moyen); }
.reco__tag.is-faible { background: var(--score-na-bg); color: var(--score-na); }

/* Tableaux */
.table { width: 100%; }
.table__row { display: grid; align-items: center; gap: 16px; padding: 12px 22px; border-bottom: 1px solid var(--color-mist-2); }
.table__row.head { background: var(--color-snow); }
.table__row.head span { font: var(--fw-bold) 10.5px/1 var(--font-sans); color: var(--color-ink-3);
  text-transform: uppercase; letter-spacing: .06em; }
.table__row.link { cursor: pointer; }
.table__row.link:hover { background: var(--color-snow); }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* États vides / alertes */
.empty { padding: 30px 28px; text-align: center; border: 1px dashed var(--color-mist); border-radius: 8px; background: var(--color-snow); }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 8px; margin-bottom: 20px; }
.alert.is-warn { background: var(--score-moyen-bg); border: 1px solid rgba(201,145,75,.4); color: var(--score-moyen); }
.alert.is-error { background: var(--score-faible-bg); border: 1px solid rgba(201,124,126,.4); color: var(--score-faible); }
.alert.is-ok { background: var(--score-bon-bg); border: 1px solid rgba(127,166,143,.4); color: var(--score-bon); }

/* Barre de progression (audit en cours) */
.progress { height: 10px; background: var(--color-mist-2); border-radius: 100px; overflow: hidden; }
.progress__fill { height: 100%; background: var(--color-accent); border-radius: 100px; transition: width .4s var(--ease); }
@keyframes wg-pulse { 0% { box-shadow: 0 0 0 0 rgba(80,175,198,.55); } 70% { box-shadow: 0 0 0 8px rgba(80,175,198,0); } 100% { box-shadow: 0 0 0 0 rgba(80,175,198,0); } }
@keyframes wg-spin { to { transform: rotate(360deg); } }
.pulse-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; animation: wg-pulse 1.6s ease-out infinite; }
.spin { animation: wg-spin 1s linear infinite; display: inline-flex; }
@keyframes wg-indet { 0% { margin-left: -42%; } 100% { margin-left: 100%; } }
.progress.is-indet .progress__fill { width: 42%; animation: wg-indet 1.4s var(--ease) infinite; }
@keyframes wg-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton { height: 148px; border-radius: 10px; background: linear-gradient(90deg, #EEF1F3 25%, #F7F9FA 37%, #EEF1F3 63%); background-size: 200% 100%; animation: wg-shimmer 1.5s ease-in-out infinite; }

/* Interrupteur actif/inactif */
.switch { width: 40px; height: 22px; border-radius: 100px; background: var(--color-mist); position: relative; cursor: pointer; border: 0; display: inline-block; }
.switch.on { background: var(--color-success); }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s var(--ease); }
.switch.on .knob { left: 20px; }

/* Toggle (case à cocher stylée) — préférences (Paramètres). Teal à l'état actif. */
.toggle { display: inline-flex; align-items: center; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track { width: 42px; height: 24px; border-radius: 100px; background: var(--color-mist); position: relative;
  display: inline-block; transition: background-color .18s var(--ease); }
.toggle__knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .18s var(--ease); }
.toggle input:checked + .toggle__track { background: var(--color-accent); }
.toggle input:checked + .toggle__track .toggle__knob { left: 21px; }
.toggle input:focus-visible + .toggle__track { box-shadow: var(--focus-ring); }

/* Item du menu kebab correspondant à l'écran courant */
.wg-menu-item.is-current { background: var(--color-snow-2); color: var(--color-ink); font-weight: 600; }

/* ─── Préférences appliquées au <body> (écran Paramètres, F-20-14) ─────────── */

/* Densité compacte : tableaux plus serrés (Comptes, historique SEO). */
.wg-dense .table__row { padding-top: 8px; padding-bottom: 8px; }
.wg-dense .card__head { padding-top: 12px; padding-bottom: 12px; }

/* Mode daltonien : double le niveau de score d'un pictogramme sur les pastilles
   de verdict (la couleur ne porte plus seule l'information). */
.wg-daltonien .pill::after { font: 800 10px/1 var(--font-sans); margin-left: 1px; }
.wg-daltonien .pill.is-bon::after    { content: "✓"; }
.wg-daltonien .pill.is-moyen::after  { content: "△"; }
.wg-daltonien .pill.is-faible::after { content: "✕"; }

/* Thème « clair » de la sidebar (alternative au deep teal par défaut). */
.wg-theme-claire .wg-aside { background: #fff; color: var(--color-ink); }
.wg-theme-claire .wg-brand { background: var(--color-snow); border-bottom-color: var(--color-mist-2); }
.wg-theme-claire .wg-brand .wg-rail-hide { color: var(--color-ink-soft); }
.wg-theme-claire .wg-logo-full { display: none; }
.wg-theme-claire .wg-logo-full-dark { display: block; height: 46px; width: auto; margin: 0; }
.wg-theme-claire .wgn-item { color: var(--color-ink-2); }
.wg-theme-claire .wgn-item:hover { background: var(--color-snow-2); color: var(--color-ink); }
.wg-theme-claire .wgn-item.is-active { background: var(--color-accent-2); color: #fff; }
.wg-theme-claire .wgn-sub { border-left-color: var(--color-mist-2); }
.wg-theme-claire .wgn-subitem { color: var(--color-ink-2); }
.wg-theme-claire .wgn-subitem:hover { background: var(--color-snow-2); color: var(--color-ink); }
.wg-theme-claire .wgn-subitem.active,
.wg-theme-claire .wgn-subitem.active:hover { background: var(--color-accent-2); color: #fff; }
.wg-theme-claire .wgn-count { background: var(--color-snow-2); color: var(--color-ink-3); opacity: 1; }
.wg-theme-claire .wgn-subitem.active .wgn-count { background: rgba(255,255,255,.24); color: #fff; }
.wg-theme-claire .wgn-soon { background: var(--color-snow-2); color: var(--color-ink-soft); }
.wg-theme-claire .wg-footer { background: #fff; border-top-color: var(--color-mist-2); }
.wg-theme-claire .wgn-avatar { background: var(--color-accent-tint); color: var(--color-accent-2); }
.wg-theme-claire .wgn-who .wgn-name { color: var(--color-ink); }
.wg-theme-claire .wgn-who .wgn-role { color: var(--color-ink-3); }
.wg-theme-claire .wgn-kebab { color: var(--color-ink-3); }
.wg-theme-claire .wgn-kebab:hover { background: var(--color-snow-2); }
.wg-theme-claire .wg-navzone { scrollbar-color: var(--color-mist-2) transparent; }
.wg-theme-claire .wg-navzone::-webkit-scrollbar-thumb { background: var(--color-mist-2); }
.wg-theme-claire .wg-navzone::-webkit-scrollbar-thumb:hover { background: var(--color-ink-3); }

/* Thème « rail » : sidebar repliée en permanence (icônes), déployée au survol
   en overlay — même comportement que le repli responsive, à toute largeur. */
.wg-theme-rail .wg-logo-full-dark { display: none; }
.wg-theme-rail .wg-aside { position: absolute; top: 0; left: 0; bottom: 0; z-index: 40; width: 72px; overflow: hidden; }
.wg-theme-rail .wg-aside:hover { width: 240px; box-shadow: 4px 0 32px rgba(24,53,60,.24); }
.wg-theme-rail .wg-main { margin-left: 72px; }
.wg-theme-rail .wg-aside:not(:hover) .wg-rail-hide { display: none; }
.wg-theme-rail .wg-aside:not(:hover) .wg-brand { align-items: center; padding-left: 0; padding-right: 0; }
.wg-theme-rail .wg-aside:not(:hover) .wg-logo-full { display: none; }
.wg-theme-rail .wg-aside:not(:hover) .wg-logo-mark { display: block; margin: 0 auto; }
.wg-theme-rail .wg-aside:not(:hover) .wgn-label,
.wg-theme-rail .wg-aside:not(:hover) .wgn-chev,
.wg-theme-rail .wg-aside:not(:hover) .wgn-sub,
.wg-theme-rail .wg-aside:not(:hover) .wgn-who,
.wg-theme-rail .wg-aside:not(:hover) .wgn-kebab { display: none; }
.wg-theme-rail .wg-aside:not(:hover) .wgn-item { justify-content: center; padding-left: 0; padding-right: 0; }
.wg-theme-rail .wg-aside:not(:hover) .wgn-item.is-parent-active { background: rgba(255,255,255,.16); border-radius: 8px; }
.wg-theme-rail .wg-aside:not(:hover) .wg-footer { padding-left: 0; padding-right: 0; }
.wg-theme-rail .wg-aside:not(:hover) .wgn-foot-user { justify-content: center; padding-left: 0; padding-right: 0; }

/* ─── Page de connexion ─────────────────────────────────────────────────── */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px;
  background: radial-gradient(ellipse at 22% 26%, #F0EBE0 0%, transparent 55%),
              radial-gradient(ellipse at 84% 78%, #E7F0F2 0%, transparent 55%),
              linear-gradient(180deg, #F7F5EF 0%, #EEF1F0 100%); }
.auth-card { width: 452px; max-width: 100%; background: #fff; border-radius: 10px; padding: 38px 40px 30px;
  box-shadow: var(--shadow-lg); }
.auth-card .logo { display: flex; justify-content: center; padding-bottom: 20px; }
.auth-card .logo img { height: 34px; }
.auth-h { font: var(--fw-bold) 23px/1.2 var(--font-sans); color: var(--color-ink); margin: 0 0 6px; }
.otp-row { display: flex; gap: 9px; justify-content: center; margin: 4px 0 18px; }
.otp-cell { width: 48px; height: 56px; text-align: center; font: var(--fw-extrabold) 22px/1 var(--font-sans);
  color: var(--color-ink); background: #fff; border: 1px solid var(--color-mist); border-radius: 6px; outline: none; }
.otp-cell:focus { border-color: var(--color-accent); box-shadow: var(--focus-ring); }

/* Sidebar repliable en rail d'icônes < 1180px, déployée au survol (overlay),
   comme agents-web / CXAGENT. Marque gazelle blanche en rail, logo complet déployé. */
@media (max-width: 1180px) {
  .wg-aside { position: absolute; top: 0; left: 0; bottom: 0; z-index: 40; width: 72px; overflow: hidden; }
  .wg-aside:hover { width: 240px; box-shadow: 4px 0 32px rgba(24,53,60,.24); }
  .wg-main { margin-left: 72px; }

  /* Marque : gazelle centrée en rail, logo complet au survol */
  .wg-aside:not(:hover) .wg-rail-hide { display: none; }
  .wg-aside:not(:hover) .wg-brand { align-items: center; padding-left: 0; padding-right: 0; }
  .wg-aside:not(:hover) .wg-logo-full { display: none; }
  .wg-aside:not(:hover) .wg-logo-mark { display: block; margin: 0 auto; }

  /* Items & groupes : icône seule centrée en rail */
  .wg-aside:not(:hover) .wgn-label,
  .wg-aside:not(:hover) .wgn-chev,
  .wg-aside:not(:hover) .wgn-sub,
  .wg-aside:not(:hover) .wgn-who,
  .wg-aside:not(:hover) .wgn-kebab { display: none; }
  .wg-aside:not(:hover) .wgn-item { justify-content: center; padding-left: 0; padding-right: 0; }
  .wg-aside:not(:hover) .wgn-item.is-parent-active { background: rgba(255,255,255,.16); border-radius: 8px; }

  /* Pied : avatar centré en rail */
  .wg-aside:not(:hover) .wg-footer { padding-left: 0; padding-right: 0; }
  .wg-aside:not(:hover) .wgn-foot-user { justify-content: center; padding-left: 0; padding-right: 0; }

  .content { padding: 24px 24px 60px; }
}