/* Outils faciles — charte « violet → orange » propre au site (voir ../../CHARTE-OUTILS-FACILES.md).
   Toutes les couleurs passent par les variables de :root ; aucune autre couleur dans ce fichier. */
:root {
  --violet: #7a2fd0; --violet-fonce: #3d1a78; --orange: #e8590c; --orange-clair: #ff9b45;
  --degrade: linear-gradient(135deg, var(--violet), var(--orange));
  --degrade-ligne: linear-gradient(90deg, var(--violet), var(--orange));
  --bg: #f8f6fb; --card: #ffffff; --lavande: #f2ecfb;
  --text: #251a3a; --muted: rgba(37, 26, 58, .64); --border: rgba(37, 26, 58, .13);
  --bad: #c2253c; --bad-bg: rgba(194, 37, 60, .09);
  --shadow: 0 0 0 1px rgba(37, 26, 58, .02), 0 3px 8px -3px rgba(37, 26, 58, .16);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100dvh; font: 400 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); }
h1, h2 { margin: 0; font-weight: 700; }
.muted { color: var(--muted); }

/* En-tête : une seule ligne ; Déconnexion devient un ✕ rond quand la place manque (§10.2) */
.head { container-type: inline-size; display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; margin: 16px auto 0; padding: 10px 18px; max-width: 1200px; width: calc(100% - 32px); background: var(--card); border-radius: 16px; box-shadow: var(--shadow); }
.head .logo { width: 40px; height: 40px; flex: none; }
.titles { flex: 1; min-width: 0; }
.titles h1 { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role { margin: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-form { margin: 0; flex: none; }
.label-short { display: none; }
@media (max-width: 560px) {
  .btn-logout { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; }
  .btn-logout .label-full { display: none; }
  .btn-logout .label-short { display: inline; }
  .titles h1 { font-size: 17px; }
}

/* Boutons : une action vedette en dégradé ; reflet seulement sur l'action attendue (envoi du formulaire rempli) */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border: 0; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 600; color: #ffffff; text-decoration: none; background: var(--degrade); cursor: pointer; box-shadow: var(--shadow); width: auto; }
.btn:hover { filter: brightness(1.06); }
.btn:focus-visible, .field input:focus-visible, .eye:focus-visible { outline: 3px solid rgba(122, 47, 208, .40); outline-offset: 2px; }
.btn-soft { height: 34px; padding: 0 16px; color: var(--violet-fonce); background: linear-gradient(135deg, rgba(122, 47, 208, .10), rgba(232, 89, 12, .12)); box-shadow: inset 0 0 0 1px rgba(122, 47, 208, .30); }
.btn.btn-action-pending::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-100%); animation: shine 2.4s ease-in-out infinite; }
@keyframes shine { 60%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .btn.btn-action-pending::after { animation: none; display: none; } }

main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px; }
.card { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 18px 20px 20px; }

/* Connexion */
.login { display: grid; place-items: start center; padding-top: 7vh; }
.login-card { width: min(380px, 100%); display: flex; flex-direction: column; gap: 16px; }
.login-card h2 { font-size: 17px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span, .field > label { font-size: 12px; font-weight: 600; color: var(--muted); }
.field input { -webkit-appearance: none; appearance: none; width: 100%; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(37, 26, 58, .25); background: #ffffff; color: var(--text); font-family: inherit; font-size: 15px; }
.field input:focus { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet); outline: none; }
/* Œil du mot de passe : bouton rond dans le champ, à droite */
.pw { position: relative; }
.pw input { padding-right: 48px; }
.eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; }
.eye:hover { background: var(--lavande); color: var(--violet); }
.eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eye .eye-shut, .eye[aria-pressed="true"] .eye-open { display: none; }
.eye[aria-pressed="true"] .eye-shut { display: block; }
.login-card .btn { align-self: flex-start; }
.alert { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--bad-bg); color: var(--bad); font-weight: 600; box-shadow: inset 4px 0 0 var(--bad); }

/* Outils : grille à colonnes fixes */
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 360px)); gap: 20px; justify-content: start; }
.tool { display: flex; flex-direction: column; gap: 12px; }
.tool-head { display: flex; align-items: center; gap: 12px; }
.tool-head h2 { font-size: 16px; }
.tool-head p { margin: 0; font-size: 12px; }
.tool-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #ffffff; font-weight: 700; font-size: 20px; background: var(--degrade); }
.desc { margin: 0; color: var(--text); }
.facts { margin: 0; display: grid; gap: 4px; }
.facts div { display: flex; gap: 8px; min-width: 0; white-space: nowrap; }
.facts dt { width: 84px; flex: none; color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tool .btn { align-self: flex-start; }
.empty { margin: 0; }
@media (max-width: 780px) {
  .tools { grid-template-columns: 1fr; }
}

/* Onglets façon Chrome posés sur le fond, l'onglet actif a la couleur de la carte du dessous (§10.4–10.5).
   Premier onglet à 28 px du bord : son arrondi concave (12 px) tombe sur le haut droit de la carte, après son coin (16 px). */
.app { display: block; }
.tabs { display: flex; gap: 2px; padding: 0 28px; }
.tab { position: relative; padding: 9px 22px 10px; border-radius: 12px 12px 0 0; color: var(--muted); font-weight: 600; text-decoration: none; }
.tab:hover { color: var(--violet); background: rgba(122, 47, 208, .07); }
.tab.active { z-index: 1; margin-bottom: -1px; padding-bottom: 11px; color: var(--violet); background: var(--card); }
.tab.active::before, .tab.active::after { content: ""; position: absolute; bottom: 0; width: 12px; height: 12px; background: radial-gradient(circle at var(--cx) 0, transparent 11.5px, var(--card) 12px); }
.tab.active::before { left: -12px; --cx: 0; }
.tab.active::after { right: -12px; --cx: 12px; }
.tab-card { min-height: 200px; }
@media (max-width: 780px) {
  .tabs { padding: 0 10px 8px; gap: 6px; }
  .tab, .tab.active { margin: 0; padding: 7px 16px; border-radius: 999px; }
  .tab.active { color: #ffffff; background: var(--degrade); }
  .tab.active::before, .tab.active::after { display: none; }
}

.tab-card .tools { padding: 0; }
.tab-card .tool { padding: 16px 18px 18px; border: 1px solid var(--border); border-radius: 14px; }

/* Statistiques : tableaux arrondis, une ligne par enregistrement, en-tête en un seul dégradé */
.sec { font-size: 15px; margin: 4px 0 12px; display: flex; align-items: center; gap: 10px; }
.sec ~ .sec { margin-top: 26px; }
.count { font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 999px; background: var(--lavande); color: var(--violet); }
.table-wrap { width: max-content; max-width: 100%; border-radius: 12px; overflow: hidden; overflow-x: auto; border: 1px solid var(--border); }
table { border-collapse: collapse; font-size: 13px; }
thead tr { background: var(--degrade-ligne); color: #ffffff; }
th { background: transparent; text-align: left; font-weight: 600; padding: 9px 14px; white-space: nowrap; }
td { padding: 8px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--lavande); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.ok { color: var(--violet); background: var(--lavande); }
.badge.warn { color: var(--orange); background: rgba(232, 89, 12, .12); }
.ev-login_fail td:nth-child(2) { color: var(--bad); font-weight: 600; }
.empty { margin: 0 0 8px; }