/* =========================================================================
   Baromètre d'équipe Pyramide — charte v3 (mêmes jetons que le portail Outils
   et l'app d'onboarding : navy #1D246F, accent vert #14A98A, canvas #F7F5EE).
   ========================================================================= */
:root{
  --color-brand-50:#EEF1FF;  --color-brand-100:#DDE4FE; --color-brand-500:#3B53D4;
  --color-brand-600:#2A3DB0; --color-brand-700:#1D246F; --color-brand-800:#16194F; --color-brand-900:#0E1138;
  --color-accent-50:#E6FAF5; --color-accent-100:#C5F2E6; --color-accent-400:#2DC9A8;
  --color-accent-500:#14A98A; --color-accent-600:#0E8B71; --color-accent-700:#0A6E59;
  --color-steel-500:#23557A;

  --surface-canvas:#F7F5EE; --surface-canvas-warm:#EFEBDF; --surface-paper:#FFFFFF;
  --surface-sunken:#EEF0F4;

  --text-primary:#0F1023; --text-secondary:#44475C; --text-tertiary:#6B7484;
  --text-inverse:#F7F5EE;

  --border-subtle:rgba(29,36,111,.08); --border-default:rgba(29,36,111,.16);
  --border-strong:rgba(29,36,111,.28);

  --color-success-500:#16A36B; --color-warning-500:#E8B130; --color-neutral-400:#8E98A8;
  --color-danger-500:#CB3B3B; --color-danger-50:#FCEDED; --color-serious-500:#D4622A;
  --color-warning-50:#FDF4E0;

  --font-display:'DM Serif Display', Georgia, serif;
  --font-sans:'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:'DM Mono','JetBrains Mono', Menlo, monospace;

  --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-2xl:16px; --radius-full:9999px;

  --shadow-sm:0 1px 3px rgba(15,16,35,.06), 0 1px 2px rgba(15,16,35,.04);
  --shadow-md:0 4px 8px rgba(15,16,35,.06), 0 2px 4px rgba(15,16,35,.04);
  --shadow-lg:0 8px 16px rgba(15,16,35,.08), 0 4px 8px rgba(15,16,35,.04);
  --shadow-xl:0 16px 32px rgba(15,16,35,.10), 0 8px 16px rgba(15,16,35,.04);
  --tracking-widest:0.18em;

  /* --- Jetons de visualisation ------------------------------------------
     Échelle d'humeur : divergente bleu ↔ rouge, gris neutre au centre. Le
     vert/rouge « évident » a été écarté : mesuré ΔE 4,7 en vision protanope,
     soit deux couleurs identiques pour ~1 homme sur 12. Ce couple-ci passe
     tous les contrôles (ΔE 14,5 au pire). Emoji + libellé accompagnent
     toujours la couleur. --- */
  --h5:#3B53D4; --h4:#8AA1EC; --h3:#C3C8D2; --h2:#E8845C; --h1:#CB3B3B;
  --serie-humeur:#3B53D4;   /* validé : contraste 5,7:1 sur blanc */
  --serie-charge:#0E8B71;   /* validé : ΔE 21,5 vs humeur en vision deutane */
  --viz-grille:#E7E4DB; --viz-surface:#FFFFFF;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-sans); color:var(--text-primary); background:var(--surface-canvas);
  background-image:
    radial-gradient(1200px 520px at 88% -8%, rgba(20,169,138,.10), transparent 60%),
    radial-gradient(1100px 560px at 8% -12%, rgba(29,36,111,.12), transparent 62%);
  background-attachment:fixed;
  line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh;
}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none;}
input,select,textarea{font:inherit; color:inherit;}
a{color:var(--color-brand-600);}

.brandbar{height:5px; width:100%; background:linear-gradient(90deg,var(--color-brand-700) 0%,var(--color-brand-500) 45%,var(--color-accent-500) 100%); position:sticky; top:0; z-index:40;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ------------------------------------------------------------------ header */
header.site{padding:22px 0 10px;}
.site-top{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.logo{display:flex; align-items:center; gap:14px;}
.logo-img{height:42px; width:auto; display:block;}
.logo-sep{width:1px; height:28px; background:var(--border-default); flex:none;}
.logo-tag{font-family:var(--font-mono); font-size:.66rem; letter-spacing:var(--tracking-widest); text-transform:uppercase; color:var(--text-tertiary);}
.user-chip{display:flex; align-items:center; gap:10px;}
.pastille{width:34px; height:34px; border-radius:var(--radius-full); background:var(--color-brand-50); color:var(--color-brand-700); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.8rem; flex:none; letter-spacing:.02em;}
.pastille.lg{width:52px; height:52px; font-size:1.05rem;}
.user-nom{font-weight:600; font-size:.9rem; line-height:1.15;}
.user-role{font-family:var(--font-mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-tertiary);}

/* ------------------------------------------------------------------ onglets */
nav.onglets{display:flex; gap:4px; margin:18px 0 26px; border-bottom:1px solid var(--border-subtle); flex-wrap:wrap;}
nav.onglets button{padding:10px 16px; font-size:.9rem; font-weight:500; color:var(--text-tertiary); border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:var(--radius-md) var(--radius-md) 0 0;}
nav.onglets button:hover{color:var(--text-primary); background:rgba(255,255,255,.55);}
nav.onglets button[aria-current="page"]{color:var(--color-brand-700); border-bottom-color:var(--color-accent-500); font-weight:600;}

/* ------------------------------------------------------------------ blocs */
.carte{background:var(--surface-paper); border:1px solid var(--border-subtle); border-radius:var(--radius-2xl); box-shadow:var(--shadow-sm); padding:24px;}
.carte + .carte{margin-top:20px;}
.carte-titre{font-family:var(--font-display); font-weight:400; font-size:1.35rem; color:var(--color-brand-800); letter-spacing:-.01em;}
.carte-sous{color:var(--text-secondary); font-size:.92rem; margin-top:4px;}
.eyebrow{font-family:var(--font-mono); font-size:.7rem; letter-spacing:var(--tracking-widest); text-transform:uppercase; color:var(--color-accent-600); display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--color-accent-500); border-radius:2px; flex:none;}
.grille{display:grid; gap:20px;}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.entre{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.muet{color:var(--text-tertiary); font-size:.88rem;}
.mono{font-family:var(--font-mono);}

/* ------------------------------------------------------------------ boutons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:var(--radius-full); font-weight:600; font-size:.9rem; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; border:1px solid transparent; white-space:nowrap;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn-principal{background:var(--color-brand-700); color:#fff; box-shadow:var(--shadow-sm);}
.btn-principal:not(:disabled):hover{background:var(--color-brand-600); box-shadow:var(--shadow-md); transform:translateY(-1px);}
.btn-accent{background:var(--color-accent-600); color:#fff;}
.btn-accent:not(:disabled):hover{background:var(--color-accent-700);}
.btn-doux{background:var(--surface-paper); border-color:var(--border-default); color:var(--color-brand-700);}
.btn-doux:hover{border-color:var(--border-strong); background:var(--color-brand-50);}
.btn-fantome{color:var(--text-tertiary); padding:8px 12px;}
.btn-fantome:hover{color:var(--text-primary); background:var(--surface-sunken);}
.btn-petit{padding:7px 14px; font-size:.82rem;}

/* ------------------------------------------------------------------ champs */
label.champ{display:block; margin-bottom:14px;}
label.champ > span{display:block; font-size:.82rem; font-weight:600; color:var(--text-secondary); margin-bottom:6px;}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%; padding:11px 14px; border:1px solid var(--border-default); border-radius:var(--radius-lg);
  background:var(--surface-paper); transition:border-color .15s ease, box-shadow .15s ease;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--color-brand-500); box-shadow:0 0 0 3px rgba(59,83,212,.14);}
textarea{resize:vertical; min-height:96px; line-height:1.55;}
.aide{font-size:.8rem; color:var(--text-tertiary); margin-top:6px;}

/* ------------------------------------------------------------------ connexion */
.ecran-centre{min-height:calc(100vh - 5px); display:flex; align-items:center; justify-content:center; padding:32px 20px;}
.boite{width:100%; max-width:430px; background:var(--surface-paper); border:1px solid var(--border-subtle); border-radius:var(--radius-2xl); box-shadow:var(--shadow-xl); padding:36px 34px; }
.boite h1{font-family:var(--font-display); font-weight:400; font-size:1.9rem; color:var(--color-brand-800); line-height:1.1;}
.boite h1 em{font-style:italic; color:var(--color-accent-600);}
.alerte-champ{background:var(--color-danger-50); border:1px solid rgba(203,59,59,.25); color:#8E2323; padding:11px 14px; border-radius:var(--radius-lg); font-size:.87rem; margin-bottom:16px;}
.ok-champ{background:var(--color-accent-50); border:1px solid var(--color-accent-100); color:var(--color-accent-700); padding:11px 14px; border-radius:var(--radius-lg); font-size:.87rem; margin-bottom:16px;}

/* ------------------------------------------------------------------ humeurs */
.humeurs{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
.humeur{display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 6px 13px; border:1.5px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface-paper); transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;}
.humeur .em{font-size:2rem; line-height:1; filter:grayscale(.35); transition:filter .15s ease, transform .15s ease;}
.humeur .lb{font-size:.76rem; font-weight:600; color:var(--text-tertiary); text-align:center; line-height:1.2;}
.humeur:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.humeur:hover .em{filter:grayscale(0);}
.humeur[aria-pressed="true"]{border-color:var(--pastel,var(--color-brand-500)); box-shadow:0 0 0 3px color-mix(in srgb, var(--pastel,var(--color-brand-500)) 18%, transparent); background:color-mix(in srgb, var(--pastel,var(--color-brand-500)) 7%, #fff);}
.humeur[aria-pressed="true"] .em{filter:grayscale(0); transform:scale(1.12);}
.humeur[aria-pressed="true"] .lb{color:var(--text-primary);}

/* échelle de charge */
.charges{display:grid; grid-template-columns:repeat(5,1fr); gap:8px;}
.charge{padding:12px 6px; border:1.5px solid var(--border-subtle); border-radius:var(--radius-lg); text-align:center; transition:all .15s ease;}
/* display:block sur les deux : ce sont des <span>, et sans cela le chiffre et le libellé
   se retrouvent sur la même ligne — « 1Sous-chargé·e ». */
.charge .n{display:block; font-family:var(--font-mono); font-size:1.05rem; font-weight:500; color:var(--text-tertiary);}
.charge .lb{display:block; font-size:.72rem; color:var(--text-tertiary); margin-top:3px; line-height:1.2;}
.charge:hover{border-color:var(--border-default); background:var(--surface-sunken);}
.charge[aria-pressed="true"]{border-color:var(--color-accent-500); background:var(--color-accent-50);}
.charge[aria-pressed="true"] .n,.charge[aria-pressed="true"] .lb{color:var(--color-accent-700); font-weight:600;}

/* étiquettes de contexte */
.tags{display:flex; flex-wrap:wrap; gap:8px;}
.tag{padding:7px 14px; border-radius:var(--radius-full); border:1px solid var(--border-default); font-size:.84rem; color:var(--text-secondary); transition:all .15s ease;}
.tag:hover{border-color:var(--border-strong); background:var(--surface-sunken);}
.tag[aria-pressed="true"]{background:var(--color-brand-700); border-color:var(--color-brand-700); color:#fff;}
.tag-lecture{padding:4px 11px; border-radius:var(--radius-full); background:var(--color-brand-50); color:var(--color-brand-700); font-size:.76rem; border:1px solid var(--color-brand-100);}

/* ------------------------------------------------------------------ tuiles */
.tuile{background:var(--surface-paper); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); padding:18px 20px;}
.tuile .lb{font-size:.8rem; color:var(--text-tertiary); font-weight:500;}
.tuile .val{font-size:2rem; font-weight:600; letter-spacing:-.02em; margin-top:4px; line-height:1.05;}
.tuile .val .u{font-size:.95rem; font-weight:500; color:var(--text-tertiary); letter-spacing:0;}
.tuile .sub{font-size:.8rem; color:var(--text-tertiary); margin-top:5px;}
.hero-num{font-size:clamp(2.6rem,6vw,3.6rem); font-weight:600; letter-spacing:-.03em; line-height:1;}

/* ------------------------------------------------------------------ grille équipe */
.personnes{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px;}
.personne{text-align:left; width:100%; background:var(--surface-paper); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); padding:18px; display:flex; flex-direction:column; gap:12px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; position:relative; overflow:hidden;}
.personne::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--liseré,var(--border-default));}
.personne:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--border-default);}
.personne .tete{display:flex; align-items:center; gap:11px;}
.personne .nom{font-weight:600; font-size:.95rem; line-height:1.2;}
.personne .etat{display:flex; align-items:center; gap:10px;}
.personne .etat .em{font-size:1.8rem; line-height:1;}
.personne .etat .txt{font-size:.85rem; color:var(--text-secondary);}
.personne .mot{font-size:.87rem; color:var(--text-secondary); background:var(--surface-canvas); border-radius:var(--radius-lg); padding:10px 12px; line-height:1.45; border-left:2px solid var(--border-default);}
.vide{color:var(--text-tertiary); font-size:.86rem; font-style:italic;}
.mot-lecture{display:block; font-size:.92rem; color:var(--text-secondary); background:var(--surface-canvas); border-left:2px solid var(--border-default); border-radius:var(--radius-lg); padding:13px 16px; line-height:1.5; white-space:pre-wrap;}

/* ------------------------------------------------------------------ alertes */
.alerte{display:flex; gap:13px; padding:15px 17px; border-radius:var(--radius-xl); border:1px solid var(--border-subtle); background:var(--surface-paper); align-items:flex-start;}
.alerte + .alerte{margin-top:10px;}
.alerte .ic{width:30px; height:30px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; flex:none; font-size:.95rem;}
.alerte .tt{font-weight:600; font-size:.92rem;}
.alerte .dd{font-size:.86rem; color:var(--text-secondary); margin-top:3px;}
.alerte .qui{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary); margin-top:6px;}
.n-critique{border-left:4px solid var(--color-danger-500);} .n-critique .ic{background:var(--color-danger-50); color:var(--color-danger-500);}
.n-serieux{border-left:4px solid var(--color-serious-500);} .n-serieux .ic{background:#FBEDE5; color:var(--color-serious-500);}
.n-attention{border-left:4px solid var(--color-warning-500);} .n-attention .ic{background:var(--color-warning-50); color:#96700F;}
.n-info{border-left:4px solid var(--color-neutral-400);} .n-info .ic{background:var(--surface-sunken); color:var(--text-tertiary);}

/* ------------------------------------------------------------------ tableaux */
table.tbl{width:100%; border-collapse:collapse; font-size:.88rem;}
table.tbl th{text-align:left; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-tertiary); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border-default);}
table.tbl td{padding:12px; border-bottom:1px solid var(--border-subtle); vertical-align:top;}
table.tbl tr:last-child td{border-bottom:none;}
table.tbl tbody tr:hover{background:var(--surface-canvas);}
.zone-table{overflow-x:auto;}

/* ------------------------------------------------------------------ graphiques */
.viz{background:var(--viz-surface); border-radius:var(--radius-xl); position:relative;}
.viz svg{display:block; width:100%; height:auto; overflow:visible;}
.viz-legende{display:flex; gap:18px; flex-wrap:wrap; font-size:.82rem; color:var(--text-secondary); margin-bottom:12px;}
.viz-legende .cle{display:inline-flex; align-items:center; gap:7px;}
.viz-legende .trait{width:16px; height:2px; border-radius:2px; flex:none;}
.viz-axe{font-family:var(--font-sans); font-size:10px; fill:var(--text-tertiary);}
.infobulle{position:absolute; pointer-events:none; opacity:0; transform:translateX(-50%); background:var(--color-brand-900); color:#fff; padding:9px 12px; border-radius:var(--radius-lg); font-size:.78rem; line-height:1.45; white-space:nowrap; box-shadow:var(--shadow-lg); transition:opacity .12s ease; z-index:20;}
.infobulle b{font-weight:600;}
.barre-piste{height:10px; background:var(--surface-sunken); border-radius:var(--radius-full); overflow:hidden;}
.barre-piste{display:block;}
/* display:block indispensable : c'est un <span>, et un span inline ignore width/height —
   les barres s'affichaient entièrement vides (constaté à la première capture). */
.barre-part{display:block; height:100%; border-radius:var(--radius-full);}

/* ------------------------------------------------------------------ divers */
.modale-fond{position:fixed; inset:0; background:rgba(14,17,56,.42); display:flex; align-items:center; justify-content:center; padding:24px; z-index:60; backdrop-filter:blur(2px);}
.modale{background:var(--surface-paper); border-radius:var(--radius-2xl); box-shadow:var(--shadow-xl); width:100%; max-width:560px; max-height:88vh; overflow:auto; padding:28px;}
.secret{font-family:var(--font-mono); font-size:1.15rem; letter-spacing:.06em; background:var(--surface-sunken); border:1px dashed var(--border-strong); border-radius:var(--radius-lg); padding:14px 16px; text-align:center; user-select:all;}
.etiquette{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:var(--radius-full); border:1px solid var(--border-subtle); color:var(--text-tertiary); background:var(--surface-sunken);}
.etiquette.admin{background:var(--color-brand-50); color:var(--color-brand-700); border-color:var(--color-brand-100);}
.etiquette.ok{background:var(--color-accent-50); color:var(--color-accent-700); border-color:var(--color-accent-100);}
.etiquette.non{background:var(--color-warning-50); color:#96700F; border-color:rgba(232,177,48,.35);}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
footer.site{padding:36px 0 44px; color:var(--text-tertiary); font-size:.8rem; text-align:center;}

@media (max-width:640px){
  .wrap{padding:0 16px;}
  /* Cinq onglets sur trois lignes mangeaient le haut de l'écran : on fait défiler. */
  nav.onglets{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
  nav.onglets::-webkit-scrollbar{display:none;}
  nav.onglets button{white-space:nowrap; padding:10px 12px; font-size:.85rem;}
  .carte{padding:18px;}
  .humeurs{gap:6px;} .humeur{padding:12px 3px 10px;} .humeur .em{font-size:1.55rem;} .humeur .lb{font-size:.66rem;}
  .charges{gap:5px;} .charge .lb{display:none;}
  .boite{padding:26px 20px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important;}}