/* ============================================================
   ANW Solutions – Espace Outils (coque "application")
   public/assets/css/outils.css
   Feuille autonome : l'espace Outils ne charge pas style.css.
   ============================================================ */

:root {
    --app-bg:          #F3F5F8;
    --app-surface:     #FFFFFF;
    --app-surface-alt: #F8FAFC;
    --app-border:      #E2E7EE;
    --app-border-dk:   #CDD5DF;
    --app-text:        #131A26;
    --app-muted:       #5A6577;
    --app-faint:       #8A94A6;
    --app-accent:      #1A4E8C;
    --app-accent-dk:   #133A6A;
    --app-accent-soft: #EAF1FB;
    --app-help:        #0F766E;
    --app-help-soft:   #ECF8F6;

    --app-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --app-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

    --app-radius:    10px;
    --app-radius-sm: 6px;
    --app-sidebar-w: 264px;
    --app-topbar-h:  56px;
    --app-shadow:    0 1px 2px rgba(19, 26, 38, .05);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--app-topbar-h) + 1rem); }
body.app {
    font-family: var(--app-font);
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--app-text);
    background: var(--app-bg);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }

.app-skip {
    position: absolute; left: -9999px; top: .5rem; z-index: 100;
    padding: .5rem .875rem; background: var(--app-accent); color: #fff; border-radius: var(--app-radius-sm);
}
.app-skip:focus { left: .5rem; }

/* ---- Structure ---- */
.app-shell { display: flex; min-height: 100vh; }
.app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--app-sidebar-w); }
.app-main { flex: 1; width: 100%; max-width: 1180px; padding: 2rem 2rem 3rem; }

/* ---- Barre latérale ---- */
.app-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: var(--app-sidebar-w);
    display: flex; flex-direction: column;
    background: var(--app-surface);
    border-right: 1px solid var(--app-border);
    overflow-y: auto;
}
.app-brand {
    display: flex; align-items: center; gap: .625rem;
    height: var(--app-topbar-h); flex-shrink: 0;
    padding: 0 1.125rem;
    border-bottom: 1px solid var(--app-border);
}
.app-brand img { height: 30px; width: auto; }
.app-brand__tag {
    font-family: var(--app-mono);
    font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-radius: var(--app-radius-sm);
    padding: .15rem .45rem;
}

.app-nav { flex: 1; padding: .875rem .75rem; }
.app-nav__label {
    margin: 1.25rem .625rem .375rem;
    font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--app-faint);
}
.app-nav__link {
    display: flex; align-items: center; gap: .625rem;
    padding: .4375rem .625rem;
    border-radius: var(--app-radius-sm);
    font-size: .875rem; font-weight: 500; line-height: 1.35;
    color: var(--app-muted);
    transition: background .15s, color .15s;
}
.app-nav__link svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.app-nav__link span { flex: 1; min-width: 0; }
a.app-nav__link:hover { background: var(--app-surface-alt); color: var(--app-text); }
.app-nav__link.is-active { background: var(--app-accent-soft); color: var(--app-accent); font-weight: 600; }
.app-nav__link--soon { color: var(--app-faint); cursor: default; }
.app-nav__link--soon em {
    font-style: normal; font-family: var(--app-mono); font-size: .625rem;
    border: 1px solid var(--app-border); border-radius: 999px; padding: 0 .4rem;
}
.app-sidebar__foot { padding: .75rem; border-top: 1px solid var(--app-border); }

.app-overlay { display: none; }

/* ---- Barre supérieure ---- */
.app-topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 1rem;
    height: var(--app-topbar-h);
    padding: 0 2rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--app-border);
}
.app-topbar__menu { display: none; padding: .375rem; border-radius: var(--app-radius-sm); color: var(--app-muted); }
.app-topbar__menu svg { width: 1.375rem; height: 1.375rem; }
.app-crumbs {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: .5rem;
    font-size: .875rem; color: var(--app-faint);
    white-space: nowrap; overflow: hidden;
}
.app-crumbs a:hover { color: var(--app-accent); }
.app-crumbs [aria-current] { color: var(--app-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.app-crumbs__sep { color: var(--app-border-dk); }
.app-topbar__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* ---- Boutons ---- */
.app-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
    padding: .4375rem .875rem;
    font-size: .875rem; font-weight: 600; line-height: 1.4;
    border: 1px solid transparent; border-radius: var(--app-radius-sm);
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.app-btn--primary { background: var(--app-accent); color: #fff; }
.app-btn--primary:hover { background: var(--app-accent-dk); }
.app-btn--secondary { background: var(--app-surface); border-color: var(--app-border-dk); color: var(--app-text); }
.app-btn--secondary:hover { border-color: var(--app-accent); color: var(--app-accent); }
.app-btn--ghost { color: var(--app-muted); }
.app-btn--ghost:hover { background: var(--app-surface-alt); color: var(--app-text); }
.app-btn--block { display: flex; width: 100%; }

/* ---- En-tête de page ---- */
.page-head { margin-bottom: 1.75rem; max-width: 760px; }
.page-head__eyebrow {
    font-family: var(--app-mono);
    font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--app-accent);
    margin-bottom: .375rem;
}
.page-head__title { font-size: 1.625rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.page-head__sub { margin-top: .5rem; color: var(--app-muted); font-size: 1rem; }

/* ---- Grille principale ---- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
.layout__main, .layout__side { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.layout__side--sticky { position: sticky; top: calc(var(--app-topbar-h) + 1.5rem); }

/* ---- Panneaux ---- */
.panel {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    overflow: hidden;
}
.panel__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--app-border);
}
.panel__title { font-size: .9375rem; font-weight: 600; }
.panel__meta { font-family: var(--app-mono); font-size: .75rem; color: var(--app-faint); white-space: nowrap; }
.panel__body { padding: 1.125rem 1.25rem 1.25rem; }
.panel__text { color: var(--app-muted); font-size: .875rem; }
.panel__text + .panel__text { margin-top: .625rem; }
.panel__text a { color: var(--app-accent); text-decoration: underline; text-underline-offset: 3px; }
.panel__intro { padding: 1rem 1.25rem; color: var(--app-muted); border-bottom: 1px solid var(--app-border); }
.panel__empty { padding: 1.5rem 1.25rem; color: var(--app-muted); font-size: .875rem; }
.panel__foot {
    display: flex; flex-wrap: wrap; gap: .5rem;
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--app-border);
    background: var(--app-surface-alt);
}
.panel__foot .app-btn { flex: 1; }
.panel__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin-top: 1.5rem; }
.panel--accent { border-top: 3px solid var(--app-accent); }
.panel--center { max-width: 560px; margin: 3rem auto; text-align: center; }
.panel--center .panel__body { padding: 2.25rem 2rem; }
.panel--center .panel__text { margin-top: .75rem; font-size: .9375rem; }

/* ---- Lignes (listes de digests, métiers, outils) ---- */
.rows > li + li { border-top: 1px solid var(--app-border); }
.row {
    display: flex; align-items: center; gap: .875rem;
    padding: .875rem 1.25rem;
    transition: background .15s;
}
a.row:hover { background: var(--app-surface-alt); }
a.row:hover .row__title { color: var(--app-accent); }
a.row:hover .row__chevron { color: var(--app-accent); transform: translateX(2px); }
.row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.row__title { font-weight: 600; transition: color .15s; }
.row__desc { font-size: .8125rem; color: var(--app-muted); }
.row__meta { font-family: var(--app-mono); font-size: .75rem; color: var(--app-faint); white-space: nowrap; }
.row__chevron { color: var(--app-border-dk); transition: color .15s, transform .15s; }
.row--muted .row__title { color: var(--app-muted); }

.tag {
    flex-shrink: 0;
    font-family: var(--app-mono);
    font-size: .6875rem; font-weight: 600; letter-spacing: .02em;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-radius: var(--app-radius-sm);
    padding: .15rem .5rem;
    white-space: nowrap;
}
.tag--muted { color: var(--app-faint); background: var(--app-surface-alt); border: 1px solid var(--app-border); }

/* ---- Actu d'un digest ---- */
.entry__head { display: flex; align-items: baseline; gap: .875rem; padding: 1.25rem 1.5rem 0; }
.entry__num { font-family: var(--app-mono); font-size: .8125rem; font-weight: 600; color: var(--app-faint); }
.entry__title { font-size: 1.1875rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.entry__body { padding: .75rem 1.5rem 1.375rem; display: flex; flex-direction: column; gap: .875rem; }
.entry__body > p { color: var(--app-muted); }
.entry__source { font-size: .8125rem; color: var(--app-faint) !important; }
.entry__source a { color: var(--app-accent); overflow-wrap: anywhere; }
.entry__source a:hover { text-decoration: underline; text-underline-offset: 3px; }

.callout {
    padding: .875rem 1rem;
    background: var(--app-accent-soft);
    border-left: 3px solid var(--app-accent);
    border-radius: 0 var(--app-radius-sm) var(--app-radius-sm) 0;
}
.callout__label {
    font-family: var(--app-mono);
    font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--app-accent);
    margin-bottom: .25rem;
}
.callout--help { background: var(--app-help-soft); border-left-color: var(--app-help); }
.callout--help .callout__label { color: var(--app-help); }

/* ---- Sommaire ---- */
.toc { padding: .5rem 0; }
.toc a {
    display: flex; gap: .625rem;
    padding: .4375rem 1.25rem;
    font-size: .8125rem; line-height: 1.45; color: var(--app-muted);
}
.toc a:hover { color: var(--app-accent); background: var(--app-surface-alt); }
.toc a span { font-family: var(--app-mono); color: var(--app-faint); flex-shrink: 0; }

/* ---- Liste à puces "accompagnement" ---- */
.checklist { display: flex; flex-direction: column; gap: .5rem; margin: .875rem 0 1.125rem; }
.checklist li { position: relative; padding-left: 1.375rem; font-size: .875rem; }
.checklist li::before {
    content: ""; position: absolute; left: 0; top: .45em;
    width: .5rem; height: .5rem; border-radius: 2px; background: var(--app-accent);
}
.panel__text + .app-btn { margin-top: 1rem; }

/* ---- Formulaires ---- */
.app-form { display: flex; flex-direction: column; gap: .375rem; margin-top: .875rem; }
.app-label { font-size: .8125rem; font-weight: 600; margin-top: .375rem; }
.app-input {
    width: 100%;
    padding: .5rem .75rem;
    font-size: .875rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border-dk);
    border-radius: var(--app-radius-sm);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.app-input:focus { border-color: var(--app-accent); box-shadow: 0 0 0 3px rgba(26, 78, 140, .14); }
.app-form .app-btn { margin-top: .625rem; }

/* ---- Pied ---- */
.app-footer {
    display: flex; flex-wrap: wrap; gap: .375rem 1.25rem;
    padding: 1rem 2rem;
    border-top: 1px solid var(--app-border);
    font-size: .8125rem; color: var(--app-faint);
}
.app-footer a:hover { color: var(--app-accent); }

/* ---- Adaptation ---- */
@media (max-width: 1100px) {
    .layout { grid-template-columns: minmax(0, 1fr); }
    .layout__side--sticky { position: static; }
}
@media (max-width: 900px) {
    .app-body { margin-left: 0; }
    .app-sidebar { transform: translateX(-100%); transition: transform .25s ease; }
    .app-sidebar.is-open { transform: none; box-shadow: 0 0 40px rgba(19, 26, 38, .18); }
    .app-overlay.is-visible { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(19, 26, 38, .4); }
    .app-topbar { padding: 0 1rem; }
    .app-topbar__menu { display: inline-flex; }
    .app-main { padding: 1.5rem 1rem 2.5rem; }
    .app-footer { padding: 1rem; }
}
@media (max-width: 560px) {
    .app-btn--ghost { display: none; }
    .page-head__title { font-size: 1.375rem; }
    .row { flex-wrap: wrap; row-gap: .375rem; }
    .row__main { flex-basis: 100%; order: 2; }
    .row__chevron { display: none; }
    .entry__head { padding: 1rem 1.125rem 0; }
    .entry__body { padding: .625rem 1.125rem 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}