/* =====================================================================
   DexMetrix — thème futuriste (néon / verre / grille holographique)
   ===================================================================== */
:root {
    --bg: #050816;
    --bg-2: #0a1028;
    --panel: rgba(13, 20, 46, .72);
    --panel-2: rgba(20, 30, 66, .7);
    --panel-solid: #0d1430;
    --border: rgba(120, 160, 255, .14);
    --border-strong: rgba(120, 160, 255, .3);
    --text: #e8edff;
    --muted: #8b97c3;
    --faint: #5b6690;
    --cyan: #22d3ee;
    --blue: #3b82f6;
    --violet: #a78bfa;
    --magenta: #f472b6;
    --excellent: #22e3a0;
    --good: #9be15d;
    --average: #fbbf24;
    --poor: #fb4f6e;
    --info: #60a5fa;
    --grad: linear-gradient(120deg, #22d3ee 0%, #6d7cff 50%, #c084fc 100%);
    --glow: 0 0 24px rgba(34, 211, 238, .35), 0 0 60px rgba(109, 124, 255, .18);
    --radius: 16px;
    --radius-sm: 10px;
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display: 'Orbitron', 'Inter', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    --shadow: 0 20px 60px -20px rgba(0, 0, 0, .7);
    --surface: rgba(8, 14, 40, .8);
    --surface-strong: rgba(5, 8, 22, .88);
    --text-soft: #c3cdf5;
    --chart-text: #8b97c3;
    --field: rgba(5, 10, 30, .7);
    --grade-fill: rgba(10, 16, 40, .85);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan); text-decoration: none; transition: color .2s; }
a:hover { color: #7ce8fb; }
img { max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; font-weight: 700; }
h1, h2 { font-family: var(--display); letter-spacing: .02em; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--mono); font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
::selection { background: rgba(34, 211, 238, .35); }

/* ---------- Bloc du haut : carte du monde en points animée ---------- */
.hero-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ---------- Layout ---------- */
.container { width: min(1500px, 100% - 32px); margin-inline: auto; }
.container-narrow { width: min(880px, 100% - 32px); margin-inline: auto; }
.section { padding: 72px 0; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.flex { display: flex; gap: 12px; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack > * + * { margin-top: 16px; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }
.mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: .85rem; }
.tiny { font-size: .75rem; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-100 { width: 100%; }
.hidden { display: none !important; }
.gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Bandeau & navigation ---------- */
.announcement { background: linear-gradient(90deg, rgba(34, 211, 238, .15), rgba(167, 139, 250, .15)); border-bottom: 1px solid var(--border); text-align: center; padding: 8px 16px; font-size: .88rem; }
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); background: var(--surface-strong); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--text); letter-spacing: .06em; }
.brand:hover { color: var(--text); }
.brand-logo { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(34, 211, 238, .6)); }
.brand span b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { display: flex; gap: 4px; margin-left: 12px; }
.nav-links a { color: var(--muted); padding: 8px 14px; border-radius: 999px; font-weight: 500; font-size: .92rem; }
.nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(120, 160, 255, .08); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--border); color: var(--text); border-radius: 10px; width: 42px; height: 42px; cursor: pointer; }
.dropdown { position: relative; }
.dropdown > button { background: rgba(120, 160, 255, .06); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 7px 14px; cursor: pointer; font: inherit; font-size: .88rem; display: flex; align-items: center; gap: 8px; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 14px; padding: 6px; box-shadow: var(--shadow); display: none; z-index: 60; }
.dropdown.open .dropdown-menu { display: block; animation: pop .15s ease-out; }
.dropdown-menu a, .dropdown-menu button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 12px; color: var(--text); border-radius: 9px; font-size: .9rem; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: rgba(120, 160, 255, .1); }
.dropdown-menu .sep { height: 1px; background: var(--border); margin: 6px 4px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--grad); display: inline-grid; place-items: center; font-weight: 700; font-size: .78rem; color: var(--bg-2); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* ---------- Boutons ---------- */
.btn { --c: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 12px; border: 1px solid var(--border-strong); background: rgba(120, 160, 255, .06); color: var(--c); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; text-decoration: none; }
.btn:hover { color: var(--c); background: rgba(120, 160, 255, .12); border-color: rgba(120, 160, 255, .5); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad); border: 0; color: var(--bg); box-shadow: var(--glow); }
.btn-primary:hover { color: var(--bg); filter: brightness(1.1); box-shadow: 0 0 30px rgba(34, 211, 238, .55), 0 0 80px rgba(167, 139, 250, .3); background: var(--grad); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); }
.btn-danger { --c: #ffd2da; border-color: rgba(251, 79, 110, .45); background: rgba(251, 79, 110, .1); }
.btn-danger:hover { background: rgba(251, 79, 110, .2); border-color: var(--poor); }
.btn-sm { padding: 6px 12px; font-size: .82rem; border-radius: 9px; }
.btn-lg { padding: 15px 28px; font-size: 1rem; border-radius: 14px; }
.btn-icon { padding: 7px; width: 34px; height: 34px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.inline { display: inline; }

/* ---------- Panneaux ---------- */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; backdrop-filter: blur(14px); position: relative; }
.card-glow { box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .04); }
.card-glow::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(34, 211, 238, .5), transparent 35%, transparent 65%, rgba(167, 139, 250, .5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.card-title { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.card-title .sub { margin-left: auto; font-weight: 500; font-size: .82rem; color: var(--muted); }
.card-sm { padding: 16px 18px; }
.card-flush { padding: 0; overflow: hidden; }
.card-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.card-body { padding: 22px; }

/* ---------- Badges & chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 12%, transparent); white-space: nowrap; }
.badge.excellent, .tone-excellent { color: var(--excellent); }
.badge.good, .tone-good { color: var(--good); }
.badge.average, .tone-average { color: var(--average); }
.badge.poor, .tone-poor { color: var(--poor); }
.badge.muted, .tone-muted { color: var(--muted); }
.badge.info, .tone-info { color: var(--info); }
.badge.violet { color: var(--violet); }
.badge.cyan { color: var(--cyan); }
.sev-critical { color: var(--poor); }
.sev-high { color: #ff8a5c; }
.sev-medium { color: var(--average); }
.sev-low { color: var(--info); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(120, 160, 255, .08); border: 1px solid var(--border); font-size: .82rem; color: var(--text); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; display: inline-block; }

/* ---------- Flash ---------- */
.flashes { position: fixed; top: 82px; right: 20px; z-index: 80; display: grid; gap: 10px; max-width: min(420px, calc(100vw - 40px)); }
.flash { padding: 14px 18px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow); display: flex; gap: 12px; align-items: flex-start; animation: slide-in .35s ease-out; }
.flash.success { border-color: rgba(34, 227, 160, .5); }
.flash.error { border-color: rgba(251, 79, 110, .55); }
.flash .x { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.1rem; }
@keyframes slide-in { from { opacity: 0; transform: translateX(30px); } }

/* ---------- Formulaires ---------- */
label, .label { display: block; font-weight: 600; font-size: .87rem; margin-bottom: 6px; color: var(--text-soft); }
.input, input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search], input[type=date], input[type=datetime-local], input[type=time], select, textarea {
    width: 100%; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--field); color: var(--text); font: inherit; font-size: .93rem; transition: border-color .2s, box-shadow .2s;
}
textarea { resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238b97c3' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
select option { background: var(--panel-solid); }
.form-row { margin-bottom: 18px; }
.form-help { color: var(--faint); font-size: .8rem; margin-top: 5px; }
.form-error { color: var(--poor); font-size: .82rem; margin-top: 5px; list-style: none; padding: 0; }
.form-error li { margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-weight: 500; }
.check input { margin-top: 3px; }
/* Interrupteur */
.switch { display: flex; align-items: center; gap: 14px; cursor: pointer; font-weight: 600; margin: 0; }
.switch input { appearance: none; width: 48px; height: 26px; border-radius: 999px; background: rgba(120, 160, 255, .15); border: 1px solid var(--border-strong); position: relative; cursor: pointer; transition: background .25s; flex-shrink: 0; margin: 0; }
.switch input::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); top: 2px; left: 2px; transition: transform .25s, background .25s; }
.switch input:checked { background: rgba(34, 211, 238, .35); border-color: var(--cyan); box-shadow: 0 0 14px rgba(34, 211, 238, .35); }
.switch input:checked::after { transform: translateX(22px); background: #fff; }
.toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.toggle-row:last-child { border-bottom: 0; }

/* ---------- Héros & champ d'analyse ---------- */
.hero { padding: 96px 0 84px; text-align: center; position: relative; overflow: hidden; background: radial-gradient(ellipse 90% 70% at 50% 110%, rgba(30, 64, 175, .35), transparent 70%), linear-gradient(180deg, var(--bg-2) 0%, var(--bg-2) 55%, var(--bg-2) 100%); border-bottom: 1px solid var(--border); }
.hero > .container { position: relative; z-index: 1; }
.hero-kicker { display: inline-flex; gap: 10px; align-items: center; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(34, 211, 238, .06); color: var(--cyan); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 26px; }
.hero h1 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); line-height: 1.08; margin-bottom: 20px; text-shadow: 0 0 40px rgba(34, 211, 238, .2); }
.hero p.lead { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--muted); max-width: 680px; margin: 0 auto 38px; }
.scan-form { max-width: 820px; margin: 0 auto; position: relative; }
.scan-box { display: flex; gap: 8px; padding: 8px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--glow), var(--shadow); position: relative; }
.scan-box::before { content: ''; position: absolute; inset: -2px; border-radius: 22px; background: var(--grad); z-index: -1; opacity: .55; filter: blur(10px); animation: pulse-glow 4s ease-in-out infinite; }
.scan-box .icon { display: grid; place-items: center; padding-left: 14px; color: var(--cyan); }
.scan-box input { flex: 1; border: 0; background: transparent; font-size: 1.1rem; padding: 14px 10px; box-shadow: none !important; min-width: 0; }
.scan-box .btn { padding: 0 30px; font-size: 1rem; border-radius: 14px; }
.scan-meta { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 18px; color: var(--muted); font-size: .85rem; }
.scan-meta span { display: inline-flex; gap: 6px; align-items: center; }
@keyframes pulse-glow { 50% { opacity: .9; } }

.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 64px; }
.stat-strip .card { text-align: center; padding: 20px; }
.stat-strip .num { font-family: var(--display); font-size: 1.8rem; font-weight: 800; }
.feature { padding: 26px; }
.feature .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .3); color: var(--cyan); }
.feature h3 { font-size: 1.05rem; margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: .92rem; margin: 0; }
.section-head { text-align: center; max-width: 700px; margin: 0 auto 44px; }
.section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.section-head p { color: var(--muted); }
.steps { counter-reset: step; }
.step { position: relative; padding-left: 64px; }
.step::before { counter-increment: step; content: '0' counter(step); position: absolute; left: 0; top: 0; font-family: var(--display); font-size: 1.6rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.faq details { border-bottom: 1px solid var(--border); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::after { content: '+'; color: var(--cyan); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: var(--muted); margin: 12px 0 0; }

/* ---------- Tarifs ---------- */
.plan { display: flex; flex-direction: column; }
.plan.highlight { border-color: rgba(34, 211, 238, .5); box-shadow: var(--glow); transform: translateY(-8px); }
.plan .price { font-family: var(--display); font-size: 2.6rem; font-weight: 800; margin: 10px 0 4px; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 26px; flex: 1; }
.plan li { padding: 7px 0 7px 28px; position: relative; color: var(--text-soft); }
.plan li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 12px; height: 7px; border-left: 2px solid var(--excellent); border-bottom: 2px solid var(--excellent); transform: rotate(-45deg); }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; font-weight: 600; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid rgba(120, 160, 255, .07); vertical-align: middle; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: rgba(120, 160, 255, .05); }
.table .url-cell { max-width: 380px; }
.table .url-cell a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.table .actions { display: flex; gap: 6px; justify-content: flex-end; }
.table td.actions { display: table-cell; text-align: right; white-space: nowrap; }
.table td.actions > * { vertical-align: middle; }
.table td.actions > * + * { margin-left: 6px; }
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty .big { font-size: 2.6rem; margin-bottom: 8px; opacity: .6; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 7px 13px; border-radius: 9px; border: 1px solid var(--border); color: var(--muted); font-size: .88rem; }
.pagination a:hover { color: var(--text); border-color: var(--border-strong); }
.pagination .current { background: var(--grad); color: var(--bg); border: 0; font-weight: 700; }

/* ---------- Note (grade) & anneaux ---------- */
.grade { --c: var(--muted); position: relative; width: 132px; height: 148px; display: grid; place-items: center; flex-shrink: 0; }
.grade svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 16px var(--c)); }
.grade .letter { position: relative; font-family: var(--display); font-weight: 900; font-size: 4rem; color: var(--c); text-shadow: 0 0 24px var(--c); }
.grade.sm { width: 46px; height: 52px; }
.grade.sm .letter { font-size: 1.35rem; }
.grade.sm svg { filter: drop-shadow(0 0 6px var(--c)); }
.grade.md { width: 80px; height: 90px; }
.grade.md .letter { font-size: 2.4rem; }
.tone-c-excellent { --c: var(--excellent); } .tone-c-good { --c: var(--good); } .tone-c-average { --c: var(--average); } .tone-c-poor { --c: var(--poor); } .tone-c-muted { --c: var(--muted); }

.ring { --c: var(--cyan); --size: 110px; --val: 0; position: relative; width: var(--size); height: var(--size); }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { stroke: rgba(120, 160, 255, .12); }
.ring .bar { stroke: var(--c); stroke-linecap: round; filter: drop-shadow(0 0 6px var(--c)); transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1); }
.ring .val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: calc(var(--size) * .26); color: var(--c); }
.ring-label { text-align: center; margin-top: 10px; font-size: .85rem; font-weight: 600; color: var(--text-soft); }
.ring-wrap { display: flex; flex-direction: column; align-items: center; }
.score-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 3px 10px; border-radius: 8px; font-family: var(--mono); font-weight: 700; font-size: .85rem; color: var(--c, var(--text)); background: color-mix(in srgb, var(--c, var(--muted)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--muted)) 40%, transparent); }

/* ---------- Rapport ---------- */
.report-hero { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: stretch; }
.shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--border-strong); background: var(--bg-2); aspect-ratio: 16/11; position: relative; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.shot .bar { height: 24px; background: rgba(255, 255, 255, .05); display: flex; gap: 6px; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--border); }
.shot .bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.shot .scanline { position: absolute; inset: 24px 0 0; background: linear-gradient(transparent, rgba(34, 211, 238, .18), transparent); height: 40%; animation: scan 3.5s linear infinite; pointer-events: none; }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
.report-meta { display: grid; gap: 6px; font-size: .88rem; color: var(--muted); }
.report-meta b { color: var(--text); font-weight: 600; }
.report-url { font-family: var(--display); font-size: 1.3rem; word-break: break-all; margin-bottom: 6px; }
.report-scores { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.cat-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px 10px; flex: 1; min-width: 300px; }
.cat-rings .ring-label { font-size: .78rem; line-height: 1.25; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.kpi { padding: 16px 18px; }
.kpi .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.kpi .v { font-family: var(--display); font-size: 1.45rem; font-weight: 800; margin-top: 4px; }
.kpi .s { font-size: .78rem; color: var(--faint); }
.vitals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.vital { --c: var(--muted); border-top: 3px solid var(--c); }
.vital .v { color: var(--c); }
.filmstrip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.filmstrip figure { margin: 0; flex: 0 0 auto; text-align: center; }
.filmstrip img { height: 150px; border-radius: 8px; border: 1px solid var(--border); display: block; }
.filmstrip figcaption { font-family: var(--mono); font-size: .75rem; color: var(--muted); margin-top: 4px; }

.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 24px; scrollbar-width: none; position: sticky; top: 68px; z-index: 20; background: var(--surface-strong); backdrop-filter: blur(12px); }
.tabs::-webkit-scrollbar { display: none; }
.tab { background: none; border: 0; color: var(--muted); font: inherit; font-weight: 600; font-size: .92rem; padding: 14px 18px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-color: var(--cyan); text-shadow: 0 0 14px rgba(34, 211, 238, .6); }
.tab .count { font-size: .72rem; background: rgba(251, 79, 110, .18); color: var(--poor); padding: 1px 7px; border-radius: 999px; }
.tab-panel { display: none; animation: fade .3s ease-out; }
.tab-panel.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

.audit { border: 1px solid var(--border); border-radius: 13px; background: var(--surface); margin-bottom: 10px; overflow: hidden; transition: border-color .2s; }
.audit:hover { border-color: var(--border-strong); }
.audit[open] { border-color: rgba(34, 211, 238, .35); background: var(--surface); }
.audit > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 26px 1fr auto auto; gap: 14px; align-items: center; padding: 14px 18px; }
.audit > summary::-webkit-details-marker { display: none; }
.audit .st { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 900; }
.audit .st.pass { background: rgba(34, 227, 160, .15); color: var(--excellent); }
.audit .st.warn { background: rgba(251, 191, 36, .15); color: var(--average); }
.audit .st.fail { background: rgba(251, 79, 110, .16); color: var(--poor); }
.audit .st.info { background: rgba(96, 165, 250, .15); color: var(--info); }
.audit .t { font-weight: 600; }
.audit .d { color: var(--muted); font-size: .86rem; margin-top: 2px; }
.audit .sv { font-family: var(--mono); font-size: .8rem; color: var(--excellent); white-space: nowrap; }
.audit .chev { color: var(--faint); transition: transform .2s; }
.audit[open] .chev { transform: rotate(90deg); }
.audit-body { padding: 0 18px 18px 58px; }
.audit-help { color: var(--text-soft); font-size: .9rem; background: rgba(34, 211, 238, .05); border-left: 3px solid var(--cyan); padding: 12px 16px; border-radius: 0 10px 10px 0; margin-bottom: 14px; }
.audit-help p:last-child { margin-bottom: 0; }
.items { width: 100%; border-collapse: collapse; font-size: .82rem; }
.items td { padding: 7px 10px; border-top: 1px solid rgba(120, 160, 255, .07); font-family: var(--mono); }
.items td:first-child { word-break: break-all; color: var(--text-soft); }
.items td:last-child { text-align: right; white-space: nowrap; color: var(--muted); }
.cat-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.cat-head h2 { margin: 0; font-size: 1.4rem; }
.cat-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.group-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 26px 0 10px; font-weight: 700; }

/* Cascade (waterfall) */
.waterfall { font-family: var(--mono); font-size: .76rem; }
.wf-row { display: grid; grid-template-columns: minmax(180px, 34%) 64px 70px 1fr; gap: 10px; align-items: center; padding: 4px 8px; border-radius: 6px; }
.wf-row:hover { background: rgba(120, 160, 255, .07); }
.wf-row .u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); }
.wf-row .u .ty { display: inline-block; width: 38px; color: var(--faint); text-transform: uppercase; }
.wf-row .z, .wf-row .tm { text-align: right; color: var(--muted); }
.wf-track { position: relative; height: 14px; background: rgba(120, 160, 255, .05); border-radius: 4px; }
.wf-bar { position: absolute; top: 2px; height: 10px; border-radius: 3px; min-width: 2px; box-shadow: 0 0 8px currentColor; background: currentColor; }
.wf-bar .w { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .35); border-radius: 3px 0 0 3px; }
.wf-head { display: grid; grid-template-columns: minmax(180px, 34%) 64px 70px 1fr; gap: 10px; padding: 6px 8px; color: var(--faint); border-bottom: 1px solid var(--border); margin-bottom: 4px; font-size: .72rem; text-transform: uppercase; }
.wf-axis { display: flex; justify-content: space-between; }
.wf-err { color: var(--poor) !important; }
.t-document { color: #60a5fa; } .t-css { color: #a78bfa; } .t-js { color: #fbbf24; } .t-image { color: #22e3a0; } .t-font { color: #f472b6; } .t-iframe { color: #38bdf8; } .t-media { color: #fb923c; } .t-other { color: #94a3b8; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: currentColor; display: inline-block; }

.bar-list .row { display: grid; grid-template-columns: 110px 1fr 90px; gap: 12px; align-items: center; margin-bottom: 10px; font-size: .86rem; }
.bar-list .track { height: 9px; background: rgba(120, 160, 255, .08); border-radius: 999px; overflow: hidden; }
.bar-list .fill { height: 100%; border-radius: 999px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.kv { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 8px 16px; font-size: .86rem; }
.kv dt { color: var(--muted); font-family: var(--mono); word-break: break-all; }
.kv dd { margin: 0; font-family: var(--mono); word-break: break-all; color: var(--text-soft); }
.tech-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.tech { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(120, 160, 255, .05); min-width: 140px; }
.tech b { font-size: .92rem; }
.tech small { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.chart-box { position: relative; height: 260px; }
.chart-box.sm { height: 200px; }
.chart-box.lg { height: 320px; }

/* ---------- Chargement / scanner ---------- */
.scanner { min-height: calc(100vh - 160px); display: grid; place-items: center; text-align: center; padding: 40px 0; }
.radar { width: 260px; height: 260px; border-radius: 50%; position: relative; margin: 0 auto 36px; border: 1px solid rgba(34, 211, 238, .4); background: radial-gradient(circle, rgba(34, 211, 238, .08) 0%, transparent 70%), repeating-radial-gradient(circle, transparent 0 32px, rgba(34, 211, 238, .15) 33px 34px); box-shadow: 0 0 60px rgba(34, 211, 238, .2), inset 0 0 60px rgba(34, 211, 238, .15); }
.radar::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(34, 211, 238, .55) 50deg, transparent 60deg); animation: sweep 2.2s linear infinite; }
.radar::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid rgba(34, 211, 238, .2); }
.radar .h { position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid rgba(34, 211, 238, .2); }
.radar .blip { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: blip 2.2s ease-out infinite; }
.radar .core { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 2.2rem; text-shadow: 0 0 20px var(--cyan); }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blip { 0%, 100% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; transform: scale(1.2); } }
.scan-steps { max-width: 460px; margin: 26px auto 0; text-align: left; font-family: var(--mono); font-size: .86rem; }
.scan-steps li { list-style: none; padding: 6px 0; color: var(--faint); display: flex; gap: 12px; align-items: center; transition: color .3s; }
.scan-steps li::before { content: '○'; color: var(--faint); }
.scan-steps li.active { color: var(--text); }
.scan-steps li.active::before { content: '◉'; color: var(--cyan); animation: blink 1s infinite; }
.scan-steps li.done { color: var(--muted); }
.scan-steps li.done::before { content: '✓'; color: var(--excellent); }
.progress { height: 6px; border-radius: 999px; background: rgba(120, 160, 255, .1); overflow: hidden; max-width: 460px; margin: 20px auto 0; }
.progress > div { height: 100%; width: 0; background: var(--grad); box-shadow: var(--glow); transition: width .6s ease; }
@keyframes blink { 50% { opacity: .3; } }

/* ---------- Espaces client / admin ---------- */
.app-shell { display: grid; grid-template-columns: 250px 1fr; gap: 28px; padding: 32px 0 60px; align-items: start; }
.sidebar { position: sticky; top: 92px; padding: 14px; max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.sidebar .who { display: flex; gap: 12px; align-items: center; padding: 8px 10px 16px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.sidebar .who .avatar { width: 40px; height: 40px; font-size: .95rem; }
.sidebar nav a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; color: var(--muted); font-weight: 500; font-size: .92rem; }
.sidebar nav a:hover { color: var(--text); background: rgba(120, 160, 255, .07); }
.sidebar nav a.active { color: var(--text); background: linear-gradient(90deg, rgba(34, 211, 238, .16), transparent); box-shadow: inset 2px 0 0 var(--cyan); }
.sidebar nav .sec { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); padding: 14px 12px 6px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { font-size: 1.6rem; margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.stat { padding: 20px; }
.stat .k { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; }
.stat .v { font-family: var(--display); font-size: 1.9rem; font-weight: 800; margin-top: 6px; }
.stat .s { font-size: .8rem; color: var(--faint); }
.meter { height: 8px; border-radius: 999px; background: rgba(120, 160, 255, .1); overflow: hidden; margin-top: 10px; }
.meter > div { height: 100%; background: var(--grad); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters > * { flex: 1 1 150px; }
.filters .btn { flex: 0 0 auto; }
.flag { display: inline-block; width: 20px; height: 15px; border-radius: 3px; object-fit: cover; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); flex-shrink: 0; }
.flag-emoji { width: auto; height: auto; box-shadow: none; border-radius: 0; font-size: 1.05rem; line-height: 1; }
.lang-flag { width: 26px; height: 19px; vertical-align: -3px; }
.lang-flag.flag-emoji { width: auto; height: auto; font-size: 1.3rem; }
.progress-inline { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.progress-inline .meter { flex: 1; margin: 0; }
.trans-row td { vertical-align: top; }
.trans-row textarea { min-height: 42px; font-size: .86rem; padding: 8px 10px; }
.trans-key { font-family: var(--mono); font-size: .75rem; color: var(--violet); word-break: break-all; }
.trans-ref { font-size: .85rem; color: var(--text-soft); }
.sparkline { display: block; }

/* ---------- Auth ---------- */
.auth { min-height: calc(100vh - 160px); display: grid; place-items: center; padding: 50px 0; }
.auth .card { width: min(460px, 100%); padding: 34px; }
.auth h1 { font-size: 1.5rem; text-align: center; }
.auth .sub { text-align: center; color: var(--muted); margin-bottom: 26px; }
.alert { padding: 12px 16px; border-radius: 11px; border: 1px solid rgba(251, 79, 110, .5); background: rgba(251, 79, 110, .1); margin-bottom: 18px; font-size: .9rem; }
.alert.info { border-color: rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .08); }

/* ---------- Comparaison ---------- */
.compare-grid { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 14px; align-items: center; }
.compare-grid .mid { text-align: center; color: var(--muted); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.compare-grid .text-center > .grade { margin: 0 auto; }
.delta-up { color: var(--excellent); } .delta-down { color: var(--poor); }

/* ---------- Pied de page ---------- */
.footer { border-top: 1px solid var(--border); padding: 48px 0 28px; margin-top: 60px; background: var(--surface-strong); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.footer h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.footer a { display: block; color: var(--text-soft); padding: 4px 0; font-size: .9rem; }
.footer a:hover { color: var(--cyan); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 32px; padding-top: 20px; color: var(--muted); font-size: .84rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .kpis, .vitals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .report-hero { grid-template-columns: 1fr; }
    .shot { max-width: 520px; }
    .grid-5, .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; background: var(--panel-solid); border-bottom: 1px solid var(--border); padding: 12px 16px; margin: 0; }
    .nav.open .nav-links { display: flex; }
    .nav-toggle { display: grid; place-items: center; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; max-height: none; overflow: visible; }
    .sidebar nav:not(.side-nav) { display: flex; flex-wrap: wrap; gap: 4px; }
    .sidebar nav .sec { width: 100%; padding-top: 6px; }
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .cat-rings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .plan.highlight { transform: none; }
}
@media (max-width: 640px) {
    body { font-size: 14px; }
    .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .form-grid { grid-template-columns: 1fr; }
    .kpis, .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .scan-box { flex-direction: column; }
    .scan-box .icon { display: none; }
    .scan-box .btn { padding: 14px; }
    .hero { padding-top: 56px; }
    .audit > summary { grid-template-columns: 26px 1fr auto; }
    .audit .sv { display: none; }
    .audit-body { padding-left: 18px; }
    .wf-row, .wf-head { grid-template-columns: 1fr 70px; }
    .wf-row .z, .wf-head .z, .wf-row .tm, .wf-head .tm { display: none; }
    .wf-row .wf-track { grid-column: 1 / -1; }
    .compare-grid { grid-template-columns: 1fr 1fr; }
    .compare-grid .mid { grid-column: 1 / -1; order: -1; }
    .nav-right .btn-ghost { display: none; }
    .kv { grid-template-columns: 1fr; }
}

/* ---------- Impression / PDF ---------- */
@media print {
    body { background: #fff; color: #111; }
    .nav, .footer, .tabs, .no-print, .flashes, .announcement { display: none !important; }
    .card { background: #fff; border-color: #ddd; backdrop-filter: none; box-shadow: none; }
    .card-glow::before { display: none; }
    .tab-panel { display: block !important; }
    .audit { break-inside: avoid; border-color: #ddd; background: #fff; }
    .audit-body { display: block; }
    details.audit > :not(summary) { display: block; }
    .muted, .audit .d, .kpi .k { color: #555; }
    .ring .val, .kpi .v, .grade .letter { text-shadow: none; }
    a { color: #111; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Correctifs de débordement mobile ---------- */
.grid > *, .report-hero > *, .app-shell > *, .stack > * { min-width: 0; }
.mobile-only { display: none !important; }
@media (max-width: 900px) {
    .nav.open .nav-links .mobile-only { display: block !important; }
}
@media (max-width: 640px) {
    .nav-right > .btn { display: none; }
    .nav-inner { gap: 12px; }
    .cat-rings { min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .report-scores { gap: 18px; }
    .card { padding: 18px; }
    .grade { width: 104px; height: 116px; }
    .grade .letter { font-size: 3rem; }
    .tabs { top: 0; }
}
.form-row input[type=radio] { margin: 0 8px 0 0; accent-color: var(--cyan); }
.form-row input[type=radio] + label { display: inline; font-weight: 500; margin-right: 18px; }
.lh-desc { color: var(--muted); font-size: .86rem; margin: 0 0 10px; }
.lh-desc code { background: rgba(120,160,255,.1); padding: 1px 5px; border-radius: 4px; }
.source-chip { font-size: .72rem; }

/* ---------- Simulation d'appareils ---------- */
.scan-options { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.opt-select { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.opt-select .opt-icon { position: absolute; left: 13px; display: grid; place-items: center; color: var(--cyan); pointer-events: none; }
.opt-select select { padding: 9px 36px 9px 38px; border-radius: 999px; font-size: .86rem; background-color: var(--surface); max-width: 300px; text-overflow: ellipsis; }
.opt-select.is-locked { opacity: .55; }
.opt-check { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-size: .86rem; cursor: pointer; user-select: none; }
.opt-check span { display: inline-flex; align-items: center; gap: 6px; }
.opt-check input { accent-color: var(--cyan); width: 15px; height: 15px; margin: 0; }
.opt-check:has(input:checked) { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .14); }
.scan-upsell { margin: 10px 0 0; text-align: center; font-size: .8rem; color: var(--faint); }
.scan-upsell svg { vertical-align: -2px; }

.device-frame { position: relative; margin: 0 auto; background: linear-gradient(160deg, #1a2244, #070b1c); border: 1px solid var(--border-strong); box-shadow: var(--shadow), inset 0 0 0 2px rgba(0, 0, 0, .5); }
.device-frame.phone { width: min(230px, 72%); padding: 9px; border-radius: 36px; }
.device-frame.tablet { width: min(320px, 92%); padding: 14px; border-radius: 26px; }
.device-frame .screen { position: relative; aspect-ratio: var(--ratio); overflow: hidden; background: var(--bg-2); border-radius: 28px; }
.device-frame.tablet .screen { border-radius: 12px; }
.device-frame .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.device-frame .scanline { position: absolute; inset: 0; height: 40%; background: linear-gradient(transparent, rgba(34, 211, 238, .18), transparent); animation: scan 3.5s linear infinite; pointer-events: none; }
.device-frame.phone::before { content: ''; position: absolute; top: 17px; left: 50%; transform: translateX(-50%); width: 30%; height: 17px; border-radius: 12px; background: #04060f; z-index: 2; }
.device-frame.phone::after { content: ''; position: absolute; right: -3px; top: 22%; width: 3px; height: 54px; border-radius: 0 3px 3px 0; background: #26305a; }
.device-line { color: var(--text); }
.device-line svg { vertical-align: -2px; color: var(--cyan); }

.retest-form { display: inline-flex; gap: 6px; align-items: center; }
.retest-form select { padding: 6px 30px 6px 12px; font-size: .82rem; border-radius: 10px; max-width: 190px; background-position: right 10px center; }

.compare-jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 640px; margin: 22px auto 0; text-align: left; }
.compare-job { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; }
.compare-job .ico { color: var(--cyan); }
.compare-job .progress { grid-column: 1 / -1; margin: 10px 0 0; max-width: none; }
.compare-job .job-state > span { display: none; font-size: .8rem; }
.compare-job[data-state=waiting] .st-wait, .compare-job[data-state=running] .st-run, .compare-job[data-state=done] .st-done { display: inline; }
.compare-job[data-state=waiting] { opacity: .6; }
.compare-job[data-state=running] .st-run { color: var(--cyan); }
.compare-job[data-state=running] .progress > div { width: 70%; transition: width 30s cubic-bezier(.1, .7, .3, 1); }
.compare-job[data-state=done] .st-done { color: var(--excellent); font-weight: 700; }
.compare-job[data-state=done] .progress > div { width: 100%; }

.monitor-form { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 0 14px; }

@media (max-width: 1100px) {
    .monitor-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .monitor-form > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .scan-options { flex-direction: column; align-items: stretch; }
    .opt-select select { max-width: none; width: 100%; }
    .opt-check { justify-content: center; }
    .compare-jobs { grid-template-columns: 1fr; }
    .retest-form { width: 100%; }
    .retest-form select { flex: 1; max-width: none; }
    .monitor-form { grid-template-columns: 1fr; }
}
@media print { .retest-form { display: none; } }

/* ---------- Barre d'onglets avec flèches ---------- */
.tabs-bar { position: sticky; top: 68px; z-index: 20; display: flex; align-items: stretch; margin-bottom: 24px; background: var(--surface-strong); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.tabs-bar .tabs { position: static; flex: 1; min-width: 0; margin: 0; border-bottom: 0; background: none; backdrop-filter: none; scroll-behavior: smooth; }
.tabs-bar.fade-start .tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px); mask-image: linear-gradient(90deg, transparent 0, #000 48px); }
.tabs-bar.fade-end .tabs { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 48px); mask-image: linear-gradient(270deg, transparent 0, #000 48px); }
.tabs-bar.fade-start.fade-end .tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); }
.tabs-arrow { flex-shrink: 0; width: 38px; display: grid; place-items: center; border: 0; background: rgba(120, 160, 255, .08); color: var(--text); cursor: pointer; transition: background .15s, color .15s; }
.tabs-arrow:hover { background: rgba(34, 211, 238, .18); color: var(--cyan); }
.tabs-arrow[hidden] { display: none; }
.tabs-arrow.prev { border-radius: 10px 0 0 10px; margin-right: 4px; }
.tabs-arrow.prev svg { transform: rotate(180deg); }
.tabs-arrow.next { border-radius: 0 10px 10px 0; margin-left: 4px; }
.tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

/* ---------- Structure ---------- */
.structure-filters .chip { cursor: pointer; font: inherit; font-size: .84rem; }
.structure-filters .chip b { color: var(--muted); font-weight: 600; }
.structure-filters .chip.active { border-color: var(--cyan); color: var(--cyan); background: rgba(34, 211, 238, .1); }
.structure-filters .chip:disabled { opacity: .4; cursor: default; }
.impact { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.impact-high { background: rgba(251, 79, 110, .16); color: #ff9db0; }
.impact-medium { background: rgba(251, 191, 36, .14); color: #fcd34d; }
.impact-low { background: rgba(120, 160, 255, .12); color: var(--muted); }
.metric-chip { font-family: var(--mono); font-size: .68rem; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border-strong); color: var(--muted); }
.structure-item[hidden] { display: none; }

/* ---------- CrUX ---------- */
.crux-assessment { display: flex; align-items: center; gap: 16px; color: var(--text); }
.crux-assessment .big-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, currentColor 16%, transparent); }
.crux-assessment.tone-excellent .big-icon { color: var(--excellent); }
.crux-assessment.tone-poor .big-icon { color: var(--poor); }
.crux-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.crux-metric { border-top: 3px solid var(--c); }
.crux-metric .k { font-family: var(--mono); font-weight: 700; letter-spacing: .06em; }
.crux-metric .v { font-family: var(--display); font-size: 1.9rem; font-weight: 800; color: var(--c); margin: 6px 0 2px; }
.crux-metric .s { color: var(--muted); font-size: .8rem; }
.crux-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: 12px 0 6px; background: rgba(120, 160, 255, .1); }
.crux-bar .good { background: var(--excellent); } .crux-bar .average { background: var(--average); } .crux-bar .poor { background: var(--poor); }
.crux-legend { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .76rem; margin-bottom: 6px; }
[data-crux-switch] .chip { cursor: pointer; font: inherit; font-size: .84rem; }
[data-crux-switch] .chip.active { border-color: var(--cyan); color: var(--cyan); background: rgba(34, 211, 238, .1); }

/* ---------- Vidéo ---------- */

/* ---------- Alertes ---------- */
.alert-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.alert-rules li { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(120, 160, 255, .04); }
.alert-form .check { margin: 4px 0 8px; }

@media (max-width: 640px) {
    .tabs-arrow { width: 32px; }
}

/* ---------- Langues du pied de page (liste déroulante) ---------- */
.lang-select { position: relative; max-width: 240px; }
.lang-select summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); cursor: pointer; font-size: .9rem; color: var(--text); user-select: none; }
.lang-select summary::-webkit-details-marker { display: none; }
.lang-select summary .chev { margin-left: auto; color: var(--muted); transform: rotate(-90deg); transition: transform .2s; display: grid; }
.lang-select[open] summary .chev { transform: rotate(90deg); }
.lang-select summary:hover, .lang-select[open] summary { border-color: var(--cyan); }
.lang-select-menu { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 40; max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--panel-solid); box-shadow: var(--shadow); }
.footer .lang-select-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; }
.footer .lang-select-menu a:hover, .footer .lang-select-menu a.current { background: rgba(120, 160, 255, .1); color: var(--text); }
/* Les images Lighthouse font 200 px de large : affichage limité pour rester net */

/* ---------- Accueil : aperçu d'un rapport (comme GTmetrix) ---------- */
.preview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.preview-grid h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.2; margin-bottom: 14px; }
.preview-highlight { color: var(--cyan); font-weight: 600; font-size: 1.05rem; }
.preview-list { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
.preview-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-soft); }
.preview-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--excellent); }
.preview-list b { color: var(--text); }
.preview { position: relative; padding: 0 0 70px 0; }
.pv-window { border-radius: 16px; border: 1px solid var(--border-strong); background: var(--panel-solid); box-shadow: var(--shadow), var(--glow); overflow: hidden; transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transform-origin: left center; }
.pv-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid var(--border); }
.pv-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.pv-bar i:nth-child(1) { background: #fb4f6e; } .pv-bar i:nth-child(2) { background: #fbbf24; } .pv-bar i:nth-child(3) { background: #22e3a0; }
.pv-url { margin-left: 10px; flex: 1; display: flex; gap: 6px; align-items: center; font-family: var(--mono); font-size: .7rem; color: var(--muted); background: var(--surface-strong); border-radius: 6px; padding: 4px 10px; }
.pv-body { padding: 16px; display: grid; gap: 14px; }
.pv-head { display: flex; gap: 14px; align-items: center; }
.pv-shot { flex-shrink: 0; width: 120px; height: 78px; border-radius: 8px; background: #f1f4ff; padding: 8px; display: grid; gap: 4px; align-content: start; overflow: hidden; }
.pv-shot span { display: block; height: 6px; border-radius: 3px; background: #c8d1f0; }
.pv-shot .l1 { width: 45%; background: #6d7cff; } .pv-shot .l2 { width: 80%; } .pv-shot .img { height: 26px; background: linear-gradient(120deg, #22d3ee, #a78bfa); border-radius: 4px; } .pv-shot .l3 { width: 90%; } .pv-shot .l4 { width: 60%; }
.pv-kicker { font-size: .72rem; color: var(--cyan); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.pv-site { display: block; font-size: .95rem; margin: 2px 0; }
.pv-meta { font-size: .72rem; color: var(--muted); display: flex; gap: 5px; align-items: center; }
.pv-scores { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(120, 160, 255, .04); }
.pv-grade { display: flex; gap: 10px; align-items: center; }
.pv-grade small { display: block; font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pv-grade b { font-family: var(--display); font-size: 1.6rem; }
.pv-rings { display: flex; gap: 6px; justify-content: center; }
.pv-rings .ring-wrap { font-size: .6rem; }
.pv-rings .ring-label, .pv-rings .label { font-size: .6rem; }
.pv-vitals { display: grid; gap: 4px; }
.pv-vitals div { display: flex; justify-content: space-between; gap: 10px; font-size: .7rem; padding: 2px 8px; border-left: 2px solid var(--c); }
.pv-vitals small { color: var(--muted); font-family: var(--mono); }
.pv-vitals b { color: var(--c); font-family: var(--mono); }
.pv-tabs { display: flex; gap: 4px; overflow: hidden; border-bottom: 1px solid var(--border); }
.pv-tabs span { font-size: .7rem; padding: 6px 9px; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; }
.pv-tabs span.on { color: var(--text); border-color: var(--cyan); }
.pv-waterfall { display: grid; gap: 6px; }
.pv-row { display: grid; grid-template-columns: 30% 1fr; gap: 10px; align-items: center; }
.pv-name { height: 6px; border-radius: 3px; background: rgba(120, 160, 255, .18); }
.pv-row:nth-child(odd) .pv-name { width: 80%; }
.pv-track { position: relative; height: 8px; border-radius: 4px; background: rgba(120, 160, 255, .06); }
.pv-track i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: currentColor; box-shadow: 0 0 8px currentColor; transform-origin: left; animation: pv-grow .8s ease-out both; }
@keyframes pv-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.pv-float { position: absolute; right: -10px; bottom: 0; width: 62%; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--panel-solid); box-shadow: var(--shadow); padding: 12px 14px; backdrop-filter: blur(10px); }
.pv-float-title { display: flex; gap: 6px; align-items: center; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.pv-devices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pv-device { display: grid; justify-items: center; gap: 5px; text-align: center; }
.pv-device b { font-size: .68rem; display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.pv-dev-screen { width: 34px; height: 60px; border-radius: 7px; border: 2px solid #26305a; background: #f1f4ff; padding: 5px 4px; display: grid; gap: 3px; align-content: start; }
.pv-dev-screen.wide { width: 74px; height: 48px; border-radius: 5px; }
.pv-dev-screen span { height: 4px; border-radius: 2px; background: #c8d1f0; }
.pv-dev-screen span:first-child { background: #6d7cff; width: 60%; }
.pv-dev-screen span:nth-child(2) { height: 12px; background: linear-gradient(120deg, #22d3ee, #a78bfa); }
.pv-dev-score { font-family: var(--mono); font-size: .72rem; font-weight: 700; }
.how-steps { gap: 32px; }
@media (max-width: 1000px) {
    .preview-grid { grid-template-columns: 1fr; gap: 36px; }
    .pv-window { transform: none; }
}
@media (max-width: 640px) {
    .pv-scores { grid-template-columns: 1fr; justify-items: start; }
    .pv-rings { justify-content: flex-start; }
    .pv-vitals { width: 100%; }
    .pv-shot { width: 84px; height: 60px; }
    .pv-float { position: relative; right: auto; width: 100%; margin-top: 12px; }
    .preview { padding-bottom: 0; }
    .how-steps { grid-template-columns: 1fr; }
}
.pv-rings .ring .val { font-size: .82rem; }
.pv-rings .ring-label { font-size: .6rem; margin-top: 2px; }

/* ---------- Nom de domaine (onglet Technologies) ---------- */
.domain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.domain-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(120, 160, 255, .04); min-width: 0; }
.domain-grid small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.domain-grid b { overflow-wrap: anywhere; }
@media (max-width: 640px) { .domain-grid { grid-template-columns: 1fr; } }

/* ---------- Export PDF (mode utilisé par lighthouse/report-pdf.mjs) ---------- */
html.pdf-export, html.pdf-export body { background: var(--bg) !important; }
html.pdf-export .nav, html.pdf-export .header, html.pdf-export header, html.pdf-export .footer, html.pdf-export .no-print,
html.pdf-export .flashes, html.pdf-export .announcement, html.pdf-export .tabs-bar, html.pdf-export .retest-form,
html.pdf-export .scanline, html.pdf-export .structure-filters, html.pdf-export [data-crux-switch] button:not(.active), html.pdf-export .sf-toolbar { display: none !important; }
html.pdf-export .container { padding-top: 24px !important; }
html.pdf-export .tab-panel { display: block !important; animation: none; margin-top: 28px; }
html.pdf-export .pdf-section-title { font-size: 1.5rem; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--cyan); break-after: avoid; }
html.pdf-export .card, html.pdf-export .audit, html.pdf-export .kpi, html.pdf-export .crux-metric, html.pdf-export .wf-row, html.pdf-export tr { break-inside: avoid; }
html.pdf-export .card-glow::before, html.pdf-export .scan-box::before { display: none; }
html.pdf-export * { animation-duration: 0s !important; transition: none !important; }
@page { margin: 0; }

/* Bouton Télécharger le rapport */
.btn-download { border-color: rgba(34, 211, 238, .45); color: var(--cyan); }
.btn-download:hover { background: rgba(34, 211, 238, .12); }
.btn-download.is-loading { pointer-events: none; opacity: .75; }
.btn-download.is-loading svg { animation: dl-pulse 1s ease-in-out infinite; }
@keyframes dl-pulse { 50% { transform: translateY(2px); opacity: .5; } }

.pdf-only { display: none; }
html.pdf-export .pdf-only { display: flex; }
.pdf-brand { align-items: center; justify-content: space-between; gap: 16px; padding: 4px 4px 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border-strong); font-size: .95rem; }
.pdf-brand img { height: 30px; width: auto; }

/* ---------- Rapport réservé aux membres (flouté) ---------- */
.report-gate { position: relative; min-height: 560px; border-radius: var(--radius); overflow: hidden; }
.gate-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; filter: blur(7px); opacity: .55; pointer-events: none; user-select: none; }
.gate-col { display: grid; gap: 16px; }
.gate-card { border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel); padding: 20px; display: grid; gap: 12px; }
.gate-card .gl { display: block; height: 10px; border-radius: 5px; background: rgba(120, 160, 255, .22); }
.gate-card .w30 { width: 30%; height: 14px; } .gate-card .w40 { width: 40%; height: 14px; } .gate-card .w50 { width: 50%; height: 14px; }
.gate-card .w60 { width: 60%; } .gate-card .w70 { width: 70%; } .gate-card .w80 { width: 80%; } .gate-card .w90 { width: 90%; }
.gate-bar { position: relative; height: 12px; border-radius: 6px; background: rgba(120, 160, 255, .08); }
.gate-bar i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--grad); }
.gate-rings { display: flex; justify-content: space-around; }
.gate-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 32px)); text-align: center; padding: 32px 28px; background: var(--panel-solid); box-shadow: var(--shadow), var(--glow); }
.gate-box h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 10px 0 8px; }
.gate-lock { width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: var(--cyan); background: rgba(34, 211, 238, .12); box-shadow: 0 0 0 6px rgba(34, 211, 238, .06); }
.gate-list { list-style: none; padding: 0; margin: 14px auto 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; text-align: left; max-width: 440px; font-size: .9rem; }
.gate-list li { display: flex; gap: 8px; align-items: center; }
.gate-list svg { color: var(--excellent); flex-shrink: 0; }
@media (max-width: 640px) {
    .report-gate { min-height: 640px; }
    .gate-preview { grid-template-columns: 1fr; }
    .gate-list { grid-template-columns: 1fr; }
}

/* ---------- Thème clair (bouton jour / nuit) ---------- */
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f3f6fc;
    --bg-2: #e8eef9;
    --panel: rgba(255, 255, 255, .86);
    --panel-2: rgba(244, 247, 255, .92);
    --panel-solid: #ffffff;
    --border: rgba(30, 50, 110, .12);
    --border-strong: rgba(30, 50, 110, .22);
    --text: #121a33;
    --muted: #55607f;
    --faint: #8790ab;
    --text-soft: #2b3554;
    --chart-text: #55607f;
    --field: #ffffff;
    --grade-fill: #ffffff;
    --surface: rgba(255, 255, 255, .92);
    --surface-strong: rgba(255, 255, 255, .94);
    --cyan: #0891b2;
    --blue: #2563eb;
    --violet: #7c3aed;
    --excellent: #0e9f6e;
    --good: #5b9a12;
    --average: #c27c00;
    --poor: #dc2645;
    --info: #2563eb;
    --glow: 0 0 22px rgba(8, 145, 178, .16), 0 0 50px rgba(109, 124, 255, .08);
    --shadow: 0 18px 48px -24px rgba(20, 30, 70, .28);
}
:root[data-theme="light"] .card, :root[data-theme="light"] .scan-box { box-shadow: var(--shadow); }
:root[data-theme="light"] .scan-box::before { opacity: .25; }
:root[data-theme="light"] .ring .val, :root[data-theme="light"] .kpi .v, :root[data-theme="light"] .grade .letter, :root[data-theme="light"] .tab.active { text-shadow: none; }
:root[data-theme="light"] .hero { background: linear-gradient(180deg, #e9f0ff 0%, var(--bg) 100%); }
:root[data-theme="light"] .pv-shot, :root[data-theme="light"] .pv-dev-screen { box-shadow: 0 0 0 1px var(--border); }

/* Bouton jour / nuit */
.theme-toggle { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, color .15s, transform .2s; }
.theme-toggle:hover { border-color: var(--cyan); color: var(--cyan); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }

/* Logo adapté au thème */
.logo-for-light { display: none; }
:root[data-theme="light"] .logo-for-dark { display: none; }
:root[data-theme="light"] .logo-for-light { display: inline-block; }

/* ---------- Trafic & Analytics ---------- */
.traffic-head { align-items: flex-end; }
.online-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(34, 227, 160, .35); background: rgba(34, 227, 160, .08); color: var(--excellent); font-weight: 700; font-size: .85rem; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--excellent); box-shadow: 0 0 0 0 rgba(34, 227, 160, .6); animation: live 2s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(34, 227, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 227, 160, 0); } }
.segmented { display: inline-flex; padding: 4px; gap: 2px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); }
.segmented a { padding: 6px 12px; border-radius: 9px; color: var(--muted); font-size: .84rem; font-weight: 600; white-space: nowrap; }
.segmented a:hover { color: var(--text); }
.segmented a.on { background: var(--grad); color: #fff; }
.traffic-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.traffic-kpi { padding: 18px; }
.tk-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--cyan); background: rgba(34, 211, 238, .12); }
.tk-change { font-family: var(--mono); font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; color: var(--muted); background: rgba(120, 160, 255, .1); white-space: nowrap; }
.tk-change.up { color: var(--excellent); background: rgba(34, 227, 160, .12); }
.tk-change.down { color: var(--poor); background: rgba(251, 79, 110, .12); }
.tk-value { font-family: var(--display); font-size: 1.75rem; font-weight: 800; margin-top: 14px; line-height: 1.1; }
.tk-label { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.traffic-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.traffic-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.top-pages td:first-child { position: relative; width: 100%; }
.table th.text-right, .table td.text-right { text-align: right; }
.tp-bar { position: absolute; left: 0; top: 4px; bottom: 4px; border-radius: 8px; background: rgba(214, 167, 86, .14); z-index: 0; }
.top-pages td:first-child > :not(.tp-bar) { position: relative; z-index: 1; }
.tp-rank { display: inline-block; width: 22px; color: var(--faint); font-family: var(--mono); font-size: .75rem; }
.donut-wrap { position: relative; max-width: 260px; margin: 0 auto; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut-center b { font-family: var(--display); font-size: 1.6rem; }
.donut-center small { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.device-legend { display: grid; gap: 10px; margin-top: 18px; }
.device-legend > div { display: flex; align-items: center; gap: 8px; }
.country-list { max-height: 360px; overflow-y: auto; padding-right: 6px; display: grid; gap: 12px; }
.country-track { height: 5px; border-radius: 3px; background: rgba(120, 160, 255, .1); margin-top: 6px; overflow: hidden; }
.country-track i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #d6a756, #f0c879); }
.peak-badge { background: rgba(214, 167, 86, .15); color: #d6a756; border: 1px solid rgba(214, 167, 86, .35); font-family: var(--mono); }
.source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 24px; }
.source-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
@media (max-width: 1200px) { .traffic-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .traffic-grid, .traffic-grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .traffic-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .segmented { overflow-x: auto; max-width: 100%; } }

/* ---------- Menu latéral en catégories déroulantes (admin et espace client) ---------- */
.side-nav { display: grid; gap: 6px; }
.nav-group { border-radius: 12px; min-width: 0; }
.nav-group > summary { list-style: none; display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 10px; cursor: pointer; user-select: none; color: var(--text); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { background: rgba(120, 160, 255, .07); }
.nav-group[data-active] > summary .ng-icon { color: var(--cyan); }
.ng-icon { display: grid; flex-shrink: 0; color: var(--muted); }
.ng-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ng-chev { display: grid; flex-shrink: 0; margin-left: auto; color: var(--faint); transition: transform .2s; }
.nav-group[open] > summary .ng-chev { transform: rotate(90deg); }
.ng-items { display: grid; gap: 2px; padding: 2px 0 6px 14px; margin-left: 12px; border-left: 1px solid var(--border); }
.side-nav .ng-items a { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; color: var(--muted); font-weight: 500; font-size: .9rem; }
.side-nav .ng-items a:hover { color: var(--text); background: rgba(120, 160, 255, .07); }
.side-nav .ng-items a.active { color: var(--text); background: linear-gradient(90deg, rgba(34, 211, 238, .16), transparent); box-shadow: inset 2px 0 0 var(--cyan); }
@media (max-width: 900px) {
    .side-nav { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ---- Maintenance ---- */
.mt-banner { background: rgba(251, 191, 36, .14); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mt-banner a { font-weight: 600; }
.page-head .mt-actions { margin-top: 4px; }
.mt-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600; border: 1px solid var(--border); }
.mt-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mt-status.on { color: #fbbf24; background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .35); }
.mt-status.on i { animation: mt-pulse 1.6s infinite; }
.mt-status.off { color: #22e3a0; background: rgba(34, 227, 160, .08); border-color: rgba(34, 227, 160, .3); }
.mt-myip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 16px; border-radius: 12px; border: 1px dashed var(--border-strong); }
.mt-myip > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
@keyframes mt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.mt-body { min-height: 100vh; display: flex; flex-direction: column; }
.mt-page { flex: 1; display: grid; place-items: center; padding: 40px 16px; }
.mt-card { width: min(560px, 100%); text-align: center; padding: 40px 32px 28px; }
.mt-logo { height: 34px; width: auto; margin: 0 auto 28px; }
.mt-visual { position: relative; width: 120px; height: 100px; margin: 0 auto 22px; }
.mt-gear { position: absolute; color: var(--cyan); filter: drop-shadow(0 0 14px rgba(34, 211, 238, .45)); }
.mt-gear-a { width: 76px; height: 76px; left: 4px; top: 4px; animation: mt-spin 9s linear infinite; }
.mt-gear-b { width: 46px; height: 46px; right: 4px; bottom: 0; color: #a78bfa; filter: drop-shadow(0 0 12px rgba(167, 139, 250, .45)); animation: mt-spin 6s linear infinite reverse; }
@keyframes mt-spin { to { transform: rotate(360deg); } }
.mt-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fbbf24; background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .3); }
.mt-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: mt-pulse 1.6s infinite; }
.mt-card h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 16px 0 10px; }
.mt-text { color: var(--muted); line-height: 1.6; margin: 0 auto 22px; max-width: 440px; white-space: pre-line; }
.mt-eta { display: grid; gap: 4px; padding: 16px; margin-bottom: 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.mt-countdown { font-size: 1.5rem; font-weight: 600; color: var(--cyan); margin-top: 4px; }
.mt-admin { display: inline-block; margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .mt-gear, .mt-status.on i, .mt-badge i { animation: none; } }

/* ---- Restriction IP ---- */
.btn-xs { padding: 5px 10px; font-size: .76rem; border-radius: 8px; gap: 5px; }
.ipr-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.traffic-kpi.warn .tk-icon { color: #fbbf24; background: rgba(251, 191, 36, .12); }
.traffic-kpi.danger .tk-icon { color: var(--poor); background: rgba(251, 79, 110, .12); }
.ipr-auto { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-color: rgba(214, 167, 86, .35); background: linear-gradient(120deg, rgba(214, 167, 86, .08), transparent 60%), var(--panel); }
.ipr-auto-text { flex: 1 1 380px; }
.ipr-auto-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ipr-field { display: grid; gap: 6px; margin: 0; }
.ipr-field span { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ipr-field input { width: 130px; }
.ipr-field select, .ipr-select { width: auto; min-width: 150px; }
.ipr-check { display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--field); font-weight: 600; font-size: .9rem; cursor: pointer; margin: 0; }
.ipr-check input { accent-color: var(--cyan); width: 16px; height: 16px; }
.ipr-badge { font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.ipr-badge.on { color: #22e3a0; background: rgba(34, 227, 160, .12); }
.ipr-badge.off { color: var(--muted); background: rgba(120, 160, 255, .1); }
.ipr-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.ipr-ban-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.ipr-ban-form .ipr-select { min-width: 170px; }
.ipr-protect { border-color: rgba(34, 227, 160, .3); background: linear-gradient(140deg, rgba(34, 227, 160, .07), transparent 70%), var(--panel); }
.ipr-protect .card-title { color: #22e3a0; }
.ipr-protect-ip { font-size: 1.5rem; font-weight: 600; margin: 6px 0 8px; }
.ipr-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ipr-table td { vertical-align: middle; }
.ipr-ip { min-width: 0; }
.ipr-ua { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.ipr-noflag { font-size: .9rem; width: 20px; text-align: center; }
.ipr-you { font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; color: #22e3a0; background: rgba(34, 227, 160, .14); }
.ipr-share { height: 3px; border-radius: 3px; background: rgba(120, 160, 255, .12); margin: 6px 0 3px auto; width: 90px; overflow: hidden; }
.ipr-share span { display: block; height: 100%; background: #d6a756; border-radius: 3px; }
.ipr-last { max-width: 200px; }
.ipr-last > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ipr-rate { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 7px; white-space: nowrap; border: 1px solid transparent; }
.ipr-rate.normal { color: var(--muted); border-color: var(--border); }
.ipr-rate.normal::before { content: '✓'; }
.ipr-rate.bot { color: #d6a756; background: rgba(214, 167, 86, .12); }
.ipr-rate.suspect { color: #fbbf24; background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .3); }
.ipr-rate.suspect::before { content: '⚠'; }
.ipr-rate.critical { color: var(--poor); background: rgba(251, 79, 110, .12); border-color: rgba(251, 79, 110, .3); }
.ipr-rate.verified { color: #22e3a0; background: rgba(34, 227, 160, .1); }
.ipr-row-form { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ipr-row-form .ipr-select { min-width: 0; padding: 5px 30px 5px 10px; font-size: .78rem; border-radius: 8px; background-position: right 10px center; }
.ipr-host { font-size: .74rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.is-banned td { opacity: .7; }
.ng-pill { font-family: var(--mono); font-size: .7rem; color: var(--faint); background: rgba(120, 160, 255, .1); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
@media (max-width: 1100px) { .ipr-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ipr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ipr-ban-form { grid-template-columns: 1fr; } .ipr-auto-form > * { flex: 1 1 140px; } .ipr-field input, .ipr-field select { width: 100%; } }
.ipr-table th, .ipr-table td { padding-left: 10px; padding-right: 10px; }
.ipr-table th:first-child, .ipr-table td:first-child { padding-left: 16px; }
.ipr-table th:last-child, .ipr-table td:last-child { padding-right: 16px; }
.ipr-row-form .ipr-select { max-width: 112px; }
.ipr-rate.manual { color: var(--text-soft); background: rgba(120, 160, 255, .1); }

/* ---- Menu latéral : recherche ---- */
.nav-search { position: relative; display: flex; align-items: center; margin: 0 0 10px; color: var(--faint); }
.nav-search > svg { position: absolute; left: 12px; pointer-events: none; }
.nav-search input[type=search] { padding: 9px 34px 9px 36px; font-size: .86rem; border-radius: 10px; }
.nav-search input::-webkit-search-cancel-button { display: none; }
.nav-search kbd { position: absolute; right: 9px; font-family: var(--mono); font-size: .68rem; line-height: 1; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--border-strong); color: var(--faint); background: var(--surface); }
.nav-search input:focus + kbd, .nav-search input:not(:placeholder-shown) + kbd { display: none; }
.nav-search input:focus ~ svg, .nav-search:focus-within > svg { color: var(--cyan); }
.side-nav .ng-items a.nav-hit:not(.active) { color: var(--text); }
.nav-empty { padding: 6px 12px; margin: 0; }
.nav-group[hidden], .side-nav .ng-items a[hidden] { display: none; }

/* ---- Bannière cookies ---- */
.cookie-banner { position: fixed; z-index: 90; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(980px, calc(100% - 32px)); display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--border-strong); background: var(--panel-solid); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); animation: cookie-in .35s ease-out; }
.cookie-banner[hidden] { display: none; }
.cookie-banner.is-preview { position: static; transform: none; width: 100%; flex-wrap: wrap; box-shadow: none; animation: none; }
.cookie-icon { font-size: 1.9rem; line-height: 1; flex-shrink: 0; }
.cookie-text { flex: 1; min-width: 0; }
.cookie-text b { display: block; margin-bottom: 3px; }
.cookie-text p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.cookie-text a { white-space: nowrap; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-actions .btn { min-width: 120px; justify-content: center; }
.cookie-actions .btn-ghost { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.cookie-actions .btn-ghost:hover { border-color: var(--text-soft); }
.is-preview .cookie-actions { width: 100%; }
.is-preview .cookie-actions .btn { flex: 1; }
body.has-consent-banner .footer { padding-bottom: 130px; }
@keyframes cookie-in { from { opacity: 0; transform: translate(-50%, 20px); } }
@media (max-width: 720px) {
    .cookie-banner { flex-wrap: wrap; bottom: 10px; padding: 16px; gap: 12px; }
    .cookie-icon { display: none; }
    .cookie-actions { width: 100%; }
    .cookie-actions .btn { flex: 1; min-width: 0; }
    body.has-consent-banner .footer { padding-bottom: 220px; }
}
@media (prefers-reduced-motion: reduce) { .cookie-banner { animation: none; } }
.cookie-gated { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.cookie-gated li { display: flex; align-items: center; gap: 8px; color: var(--excellent); font-weight: 600; font-size: .9rem; }

/* ---- Pied de page : pages légales ---- */
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.footer .footer-legal a, .footer-legal button { display: inline; padding: 0; margin: 0; color: var(--muted); font: inherit; background: none; border: 0; cursor: pointer; }
.footer .footer-legal a:hover, .footer-legal button:hover { color: var(--text); }

/* ---- Pages légales ---- */
.legal-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; padding-top: 32px; padding-bottom: 48px; }
.legal-nav { position: sticky; top: 92px; display: grid; gap: 4px; }
.legal-nav a, .legal-consent { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; color: var(--muted); font-weight: 500; font-size: .92rem; background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left; }
.legal-nav a:hover, .legal-consent:hover { color: var(--text); background: rgba(120, 160, 255, .07); }
.legal-nav a.active { color: var(--text); background: linear-gradient(90deg, rgba(34, 211, 238, .16), transparent); box-shadow: inset 2px 0 0 var(--cyan); }
.legal-consent { margin-top: 8px; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; padding-top: 14px; }
.legal-doc { padding: 36px 40px; }
.legal-doc h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 6px; }
.legal-updated { margin: 0 0 22px; }
.legal-admin { margin: -10px 0 20px; }
.legal-body { color: var(--text-soft); line-height: 1.75; max-width: 820px; }
.legal-body h2 { font-size: 1.15rem; color: var(--text); margin: 30px 0 10px; }
.legal-body p, .legal-body ul { margin: 0 0 14px; }
.legal-body ul { padding-left: 20px; }
.legal-body li { margin-bottom: 6px; }
.legal-body table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: .88rem; line-height: 1.5; display: block; overflow-x: auto; }
.legal-body th, .legal-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-body th { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.legal-body code { font-family: var(--mono); font-size: .84em; padding: 1px 6px; border-radius: 5px; background: rgba(120, 160, 255, .1); color: var(--text); }
.legal-todo { background: rgba(251, 191, 36, .14); color: #fbbf24; padding: 1px 6px; border-radius: 5px; font-size: .9em; }
.legal-pick { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.legal-pick select { width: auto; min-width: 150px; }
.legal-editor { font-size: .8rem; line-height: 1.55; }
@media (max-width: 900px) {
    .legal-shell { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
    .legal-nav { position: static; display: flex; flex-wrap: wrap; }
    .legal-consent { margin-top: 0; border-top: 0; padding-top: 10px; }
    .legal-doc { padding: 24px 20px; }
}
.legal-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 6px; }
.legal-tokens code { font-family: var(--mono); font-size: .74rem; padding: 2px 7px; border-radius: 6px; background: rgba(34, 211, 238, .1); color: var(--cyan); cursor: help; }
.legal-pick .segmented { flex-wrap: wrap; max-width: 100%; }

/* ---- Bulle « Une idée ou un bug ? » ---- */
.fb { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.fb-bubble { width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: #1f6bff; box-shadow: 0 10px 28px rgba(31, 107, 255, .45), 0 2px 6px rgba(0, 0, 0, .25); transition: transform .2s, box-shadow .2s, background .2s; }
.fb-bubble:hover { transform: translateY(-2px) scale(1.04); background: #3b7dff; box-shadow: 0 14px 34px rgba(31, 107, 255, .55), 0 2px 6px rgba(0, 0, 0, .25); }
.fb-bubble:focus-visible { outline: 3px solid rgba(31, 107, 255, .5); outline-offset: 3px; }
.fb-ico-close, .fb.is-open .fb-ico-chat { display: none; }
.fb.is-open .fb-ico-close { display: block; }
.fb-panel { width: min(370px, calc(100vw - 32px)); border-radius: 18px; border: 1px solid var(--border-strong); background: var(--panel-solid); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); overflow: hidden; animation: fb-in .22s ease-out; transform-origin: bottom right; }
.fb-panel[hidden] { display: none; }
@keyframes fb-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.fb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 14px; background: linear-gradient(135deg, #1f6bff, #6d5dfc); color: #fff; }
.fb-head b { font-size: 1.02rem; }
.fb-head p { margin: 4px 0 0; font-size: .84rem; opacity: .9; line-height: 1.45; }
.fb-close { background: rgba(255, 255, 255, .16); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.fb-close:hover { background: rgba(255, 255, 255, .28); }
.fb-form, .fb-done { padding: 16px 18px 18px; }
.fb-form[hidden], .fb-done[hidden] { display: none; }
.fb-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.fb-type { margin: 0; cursor: pointer; }
.fb-type input { position: absolute; opacity: 0; pointer-events: none; }
.fb-type span { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border-radius: 11px; border: 1px solid var(--border-strong); font-size: .76rem; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.2; transition: border-color .15s, color .15s, background .15s; }
.fb-type input:checked + span { border-color: #1f6bff; color: var(--text); background: rgba(31, 107, 255, .14); }
.fb-type input:focus-visible + span { outline: 2px solid rgba(31, 107, 255, .6); outline-offset: 2px; }
.fb-label { display: block; font-size: .8rem; font-weight: 600; margin: 0 0 6px; }
.fb-form textarea { min-height: 110px; margin-bottom: 12px; font-size: .9rem; }
.fb-form input[type=email] { margin-bottom: 12px; font-size: .9rem; }
.fb-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.fb-error { color: var(--poor); font-size: .84rem; margin: -2px 0 10px; }
.fb-done { text-align: center; padding-top: 26px; padding-bottom: 24px; }
.fb-done-icon { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; color: #22e3a0; background: rgba(34, 227, 160, .12); }
.fb-done p { color: var(--muted); font-size: .88rem; margin: 6px 0 16px; }
body.has-consent-banner .fb { bottom: 150px; }
@media (max-width: 720px) { .fb { right: 16px; bottom: 16px; } body.has-consent-banner .fb { display: none; } }
@media (prefers-reduced-motion: reduce) { .fb-panel { animation: none; } .fb-bubble { transition: none; } }

/* ---- Admin › Requêtes ---- */
.ng-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: 0; color: #fff; background: #1f6bff; }
.nav-group > summary .ng-badge + .ng-chev { margin-left: 0; }
.rq-toggle { margin: 0; }
.rq-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.rq-n { font-family: var(--mono); font-size: .72rem; opacity: .75; margin-left: 4px; }
.rq-list { display: grid; gap: 12px; }
.rq-item { padding: 16px 18px; scroll-margin-top: 100px; }
.rq-item.is-new { border-color: rgba(31, 107, 255, .45); box-shadow: inset 3px 0 0 #1f6bff; }
.rq-item:target { border-color: var(--cyan); }
.rq-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.rq-meta .mono { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-type { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.rq-type.bug { color: var(--poor); background: rgba(251, 79, 110, .12); }
.rq-type.feature { color: #a78bfa; background: rgba(167, 139, 250, .14); }
.rq-type.other { color: var(--muted); background: rgba(120, 160, 255, .1); }
.rq-new { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #1f6bff; padding: 2px 7px; border-radius: 5px; }
.rq-message { margin: 0 0 12px; white-space: pre-line; line-height: 1.6; color: var(--text-soft); overflow-wrap: anywhere; }
.rq-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); }
.rq-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rq-actions form { margin: 0; }
.rq-empty { text-align: center; padding: 40px 20px; }
.rq-empty-icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: rgba(120, 160, 255, .1); }
.rq-dash.has-new { border-color: rgba(31, 107, 255, .45); }
.rq-dash-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rq-dash-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--border); color: var(--text); }
.rq-dash-row:hover { background: rgba(120, 160, 255, .05); }
.rq-dash-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); font-size: .9rem; }
.rq-dash-empty { padding: 14px 18px; margin: 0; }

/* ---- Bloc crypto (rapport) ---- */
.crypto-card { position: relative; overflow: hidden; border-color: rgba(240, 185, 11, .35); background: radial-gradient(120% 120% at 100% 0%, rgba(240, 185, 11, .09), transparent 55%), var(--panel); }
.crypto-card.crypto-danger, .crypto-card.crypto-low { border-color: rgba(251, 79, 110, .4); background: radial-gradient(120% 120% at 100% 0%, rgba(251, 79, 110, .09), transparent 55%), var(--panel); }
.crypto-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.crypto-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.crypto-title img, .crypto-coin { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.crypto-coin { display: grid; place-items: center; color: #F0B90B; background: rgba(240, 185, 11, .14); }
.crypto-kicker { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #F0B90B; }
.crypto-title h3 { margin: 2px 0 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.crypto-symbol { font-family: var(--mono); font-size: .9rem; color: var(--muted); font-weight: 600; }
.crypto-chains-top { display: flex; gap: 6px; flex-wrap: wrap; }
.chain-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .03em; color: var(--text); background: color-mix(in srgb, var(--chain) 16%, transparent); border: 1px solid color-mix(in srgb, var(--chain) 45%, transparent); white-space: nowrap; }
.chain-badge i, .chain-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--chain); box-shadow: 0 0 8px var(--chain); flex-shrink: 0; }
.crypto-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; }
.crypto-trust { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 6px 0; }
.crypto-level { font-weight: 800; font-size: .95rem; }
.crypto-level.tone-excellent { color: var(--excellent); } .crypto-level.tone-average { color: var(--average); } .crypto-level.tone-poor { color: var(--poor); }
.crypto-trust p { margin: 0; line-height: 1.45; }
.crypto-label { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.crypto-contract { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--field); }
.crypto-contract code { flex: 1; min-width: 0; font-family: var(--mono); font-size: .84rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crypto-links { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 2px 14px; font-size: .84rem; }
.crypto-links a { display: inline-flex; align-items: center; gap: 5px; }
.crypto-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.crypto-stat { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.crypto-stat span { display: block; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.crypto-stat b { display: block; margin-top: 3px; font-family: var(--mono); font-size: .95rem; overflow-wrap: anywhere; }
.crypto-stat em { font-style: normal; font-size: .76rem; }
.crypto-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chain-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 10px; font-size: .84rem; font-weight: 600; border: 1px dashed var(--border-strong); color: var(--text-soft); cursor: help; }
.chain-chip.is-confirmed { border-style: solid; border-color: color-mix(in srgb, var(--chain) 50%, transparent); background: color-mix(in srgb, var(--chain) 10%, transparent); color: var(--text); }
.chain-chip small { font-size: .68rem; color: var(--muted); font-weight: 600; }
.social-chip { padding: 6px 12px; border-radius: 10px; font-size: .84rem; font-weight: 600; border: 1px solid var(--border-strong); color: var(--text); }
.social-chip:hover { border-color: var(--cyan); }
.crypto-checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.crypto-checks li { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; line-height: 1.45; padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--text-soft); }
.crypto-checks .st { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; margin-top: -1px; }
.crypto-checks .is-good .st { color: var(--excellent); background: rgba(34, 227, 160, .12); }
.crypto-checks .is-bad .st { color: var(--poor); background: rgba(251, 79, 110, .12); }
.crypto-checks .is-warn .st { color: var(--average); background: rgba(251, 191, 36, .12); }
.crypto-checks .is-info .st { color: var(--muted); background: rgba(120, 160, 255, .1); }
.crypto-others { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.crypto-others li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .86rem; }
.crypto-others code { font-family: var(--mono); font-size: .8rem; overflow-wrap: anywhere; }
.tab-crypto .count { background: rgba(240, 185, 11, .2); color: #F0B90B; }
.tab-crypto .crypto-count-low, .tab-crypto .crypto-count-danger { background: rgba(251, 79, 110, .18); color: var(--poor); }
.tab-crypto .crypto-count-high { background: rgba(34, 227, 160, .16); color: var(--excellent); }
@media (max-width: 860px) { .crypto-grid { grid-template-columns: minmax(0, 1fr); } .crypto-checks { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .crypto-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Accueil : section crypto + « tout en un » ---- */
.crypto-section { background: radial-gradient(60% 80% at 15% 50%, rgba(240, 185, 11, .07), transparent 70%); }
.crypto-preview-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.crypto-mock { position: relative; padding-bottom: 30px; }
.crypto-mock .pv-body { padding: 18px; }
.cm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cm-coin { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 900; color: #1a1300; background: linear-gradient(135deg, #F0B90B, #ffdf6b); box-shadow: 0 0 18px rgba(240, 185, 11, .45); flex-shrink: 0; }
.cm-name { display: block; font-size: 1.05rem; }
.cm-chains { margin-left: auto; display: flex; gap: 5px; }
.cm-grid { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; }
.cm-trust { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 700; font-size: .72rem; }
.cm-contract { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--field); margin-bottom: 8px; }
.cm-contract code { font-family: var(--mono); font-size: .74rem; }
.cm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cm-stats div { padding: 6px 8px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); }
.cm-stats span { display: block; font-size: .58rem; color: var(--muted); text-transform: uppercase; font-weight: 700; letter-spacing: .05em; }
.cm-stats b { font-family: var(--mono); font-size: .8rem; }
.cm-checks { list-style: none; padding: 0; margin: 14px 0 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: .72rem; color: var(--text-soft); }
.cm-checks li { display: flex; gap: 6px; align-items: flex-start; line-height: 1.35; }
.cm-checks .is-good svg { color: var(--excellent); flex-shrink: 0; margin-top: 1px; }
.cm-checks .is-warn svg { color: var(--average); flex-shrink: 0; margin-top: 1px; }
.cm-nets { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-nets .chain-chip { font-size: .72rem; padding: 4px 8px; }
.cm-float { position: absolute; right: -6px; bottom: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; font-size: .78rem; font-weight: 700; background: var(--panel-solid); border: 1px solid rgba(240, 185, 11, .4); box-shadow: var(--shadow); color: #F0B90B; }

.unique-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); gap: 22px; align-items: center; }
.unique-label { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; width: 100%; }
.unique-tools { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px; border-radius: 18px; border: 1px dashed var(--border-strong); }
.unique-tool { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 11px; font-size: .88rem; font-weight: 600; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); text-decoration: line-through; text-decoration-color: rgba(251, 79, 110, .55); text-decoration-thickness: 1.5px; }
.unique-tool svg { color: var(--muted); }
.unique-arrow { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 0 24px rgba(34, 211, 238, .35); }
.unique-one { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px; }
.unique-one img { height: 34px; width: auto; }
.unique-one b { font-size: 1.15rem; }
.unique-reason { display: flex; gap: 14px; align-items: flex-start; }
.unique-reason .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: var(--cyan); background: rgba(34, 211, 238, .12); }
.unique-reason h3 { margin: 0 0 4px; font-size: 1rem; }
.unique-reason p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
@media (max-width: 960px) {
    .crypto-preview-grid { grid-template-columns: minmax(0, 1fr); }
    .crypto-preview-grid > :first-child { order: 2; }
    .unique-wrap { grid-template-columns: minmax(0, 1fr); }
    .unique-arrow { transform: rotate(90deg); margin: 0 auto; }
}
@media (max-width: 520px) { .cm-grid { grid-template-columns: minmax(0, 1fr); } .cm-checks { grid-template-columns: 1fr; } .cm-float { right: 8px; } }
.preview-section, .crypto-section { overflow-x: clip; }

/* ---- Admin › Sitemap ---- */
.sm-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.sm-page.is-off { opacity: .55; cursor: not-allowed; }
.sm-reports { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.sm-engine { padding: 12px 0; border-bottom: 1px solid var(--border); display: grid; gap: 8px; }
.sm-engine:first-of-type { padding-top: 0; }
.sm-engine p { margin: 0; }
.sm-engine form { margin: 0; }
.sm-robots { margin-top: 12px; }
.sm-robots summary { cursor: pointer; font-weight: 600; font-size: .88rem; display: flex; align-items: center; gap: 6px; }
.sm-robots pre { margin: 10px 0 0; padding: 12px; border-radius: 10px; background: var(--field); border: 1px solid var(--border); font-family: var(--mono); font-size: .76rem; max-height: 260px; overflow: auto; white-space: pre-wrap; }
.sm-check-summary { display: flex; align-items: center; gap: 8px; padding: 12px 18px; font-weight: 600; font-size: .9rem; border-bottom: 1px solid var(--border); }
.sm-check-summary.all-good { color: var(--excellent); background: rgba(34, 227, 160, .07); }
.sm-check-summary.has-bad { color: var(--poor); background: rgba(251, 79, 110, .07); }
.sm-title { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-langs a { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 7px; border: 1px solid var(--border); font-size: .74rem; font-family: var(--mono); color: var(--text-soft); }
.sm-langs a:hover { border-color: var(--cyan); color: var(--text); }
.sm-langs .flag { width: 16px; height: 12px; }
@media (max-width: 640px) { .sm-pages { grid-template-columns: 1fr; } }

/* ---- Admin › Nettoyage ---- */
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cl-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.cl-card.is-off { opacity: .6; }
.cl-card p { margin: 0; flex: 1; line-height: 1.5; }
.cl-card form { margin: 0; }
.cl-head { display: flex; align-items: center; gap: 12px; }
.cl-head > div { flex: 1; min-width: 0; display: grid; }
.cl-size { font-size: 1.05rem; font-weight: 700; color: var(--cyan); white-space: nowrap; }
.cl-cli .crypto-contract { max-width: 460px; }
/* Fenêtre de progression du nettoyage */
.cl-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(3, 6, 18, .72); backdrop-filter: blur(4px); }
.cl-modal[hidden] { display: none; }
.cl-dialog { width: min(480px, 100%); padding: 24px; animation: fb-in .2s ease-out; }
.cl-dialog-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 1.05rem; }
.cl-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(34, 211, 238, .2); border-top-color: var(--cyan); animation: cl-rot .8s linear infinite; flex-shrink: 0; }
.cl-modal.is-done .cl-spin { animation: none; border-color: var(--excellent); background: var(--excellent); box-shadow: 0 0 14px rgba(34, 227, 160, .5); }
@keyframes cl-rot { to { transform: rotate(360deg); } }
.cl-progress { height: 10px; border-radius: 999px; background: rgba(120, 160, 255, .12); overflow: hidden; }
.cl-progress > div { height: 100%; width: 0; border-radius: 999px; background: var(--grad); box-shadow: 0 0 12px rgba(34, 211, 238, .5); transition: width .35s ease; }
.cl-progress-meta { display: flex; justify-content: space-between; margin: 8px 0 14px; font-size: .82rem; color: var(--muted); }
.cl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 300px; overflow-y: auto; }
.cl-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: .9rem; color: var(--muted); }
.cl-steps li[hidden] { display: none; }
.cl-step-name { display: flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-step-size { font-size: .78rem; color: var(--faint); }
.cl-st { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; font-size: .7rem; font-weight: 800; }
.cl-steps li[data-state="run"] { color: var(--text); background: rgba(34, 211, 238, .08); }
.cl-steps li[data-state="run"] .cl-st { border-color: rgba(34, 211, 238, .25); border-top-color: var(--cyan); animation: cl-rot .7s linear infinite; }
.cl-steps li[data-state="ok"] { color: var(--text); }
.cl-steps li[data-state="ok"] .cl-st { border-color: var(--excellent); background: var(--excellent); color: #04120c; }
.cl-steps li[data-state="ok"] .cl-st::before { content: '✓'; }
.cl-steps li[data-state="ok"] .cl-step-size { color: var(--excellent); }
.cl-steps li[data-state="error"] .cl-st { border-color: var(--poor); color: var(--poor); }
.cl-steps li[data-state="error"] .cl-st::before { content: '!'; }
.cl-steps li[data-state="error"] .cl-step-size { color: var(--poor); }
.cl-foot { margin: 14px 0 0; text-align: center; }
@media (prefers-reduced-motion: reduce) { .cl-spin, .cl-steps li[data-state="run"] .cl-st { animation: none; } }

/* ---- Admin › Tâches planifiées ---- */
.sc-task { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.sc-task > div { display: grid; gap: 2px; }
.sc-table td { vertical-align: middle; }
.sc-table .switch { margin: 0; }
.sc-out summary { cursor: pointer; margin-top: 4px; }
.sc-out pre { margin: 6px 0 0; padding: 8px; max-width: 320px; max-height: 160px; overflow: auto; white-space: pre-wrap; font-family: var(--mono); font-size: .7rem; border-radius: 8px; background: var(--field); border: 1px solid var(--border); }
.sc-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--border); }
.sc-setup { border-color: rgba(251, 191, 36, .45); }
.sc-setup .card-title { color: #fbbf24; }
.sc-setup .crypto-contract, .sc-cron .crypto-contract { margin-bottom: 8px; }
.sc-setup .crypto-contract code, .sc-cron .crypto-contract code { white-space: normal; overflow-wrap: anywhere; }
.sc-cron summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* ---- Restriction IP : IP ignorées ---- */
.ipr-ignored { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.ipr-ignored-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.ipr-ignored-list li { display: flex; gap: 8px; align-items: flex-start; }
.ipr-ignored-list svg { color: var(--excellent); flex-shrink: 0; margin-top: 2px; }
.ipr-ignored-form textarea { min-height: 120px; font-size: .86rem; }
.ipr-ignored-form .mt-myip { margin-bottom: 10px; }
@media (max-width: 900px) { .ipr-ignored { grid-template-columns: minmax(0, 1fr); } }

/* ---- Admin › Langues › Toutes les langues ---- */
.ta-back { display: inline-block; margin-bottom: 10px; }
.ta-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px; margin-bottom: 16px; }
.ta-q { flex: 1 1 280px; position: relative; display: flex; align-items: center; margin: 0; color: var(--faint); }
.ta-q svg { position: absolute; left: 13px; pointer-events: none; }
.ta-q input { padding-left: 40px; }
.ta-search select { width: auto; min-width: 150px; }
.ta-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ta-toolbar > span { margin-right: auto; }
.ta-replace { padding: 8px 12px; font-size: .84rem; }
.ta-card { padding: 0; margin-bottom: 14px; overflow: hidden; transition: border-color .2s; }
.ta-card.is-new { border-color: rgba(34, 227, 160, .45); }
.ta-card.is-busy { border-color: rgba(34, 211, 238, .5); }
.ta-card.has-error { border-color: rgba(251, 79, 110, .5); }
.ta-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ta-key { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ta-key code { font-family: var(--mono); font-weight: 700; font-size: .9rem; overflow-wrap: anywhere; }
.ta-plus { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #04120c; background: var(--excellent); flex-shrink: 0; }
.ta-actions { display: flex; align-items: center; gap: 8px; }
.ta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; padding: 14px 16px 16px; }
.ta-field { margin: 0; display: grid; gap: 6px; }
.ta-lang { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--text-soft); }
.ta-lang small { color: var(--faint); font-weight: 600; }
.ta-lang em { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; }
.ta-lang .ta-ref { color: var(--cyan); background: rgba(34, 211, 238, .12); }
.ta-lang .ta-miss { margin-left: auto; color: #fbbf24; background: rgba(251, 191, 36, .12); }
.ta-field:not(.is-missing) .ta-miss { display: none; }
.ta-field textarea { min-height: 0; resize: vertical; font-size: .88rem; line-height: 1.45; padding: 9px 12px; }
.ta-field.is-missing textarea { border-color: rgba(251, 191, 36, .35); }
.ta-field textarea.is-changed { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .12); }
.ta-savebar { position: sticky; bottom: 14px; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--panel-solid); box-shadow: var(--shadow); font-size: .9rem; color: var(--muted); }
.ta-savebar.is-dirty { border-color: var(--cyan); color: var(--text); }
.ta-intro { text-align: center; }
@media (max-width: 1100px) { .ta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ta-grid { grid-template-columns: minmax(0, 1fr); } }
.ta-field textarea { overflow: hidden; }