/* ============================================================
   kdp-aide.css — page d'aide « Comprendre mes recommandations » (AideRecommandations, AideCalculateur)
   Feuille GLOBALE (non isolée) : les composants l'utilisent depuis plusieurs fichiers .razor.
   Couleurs = jetons --sol-* du thème du module (solyvr-theme.css), avec repli.
   ============================================================ */

.aide-page { max-width: 980px; margin: 0 auto; color: var(--sol-text, #e6edf7); }
.aide-h1 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 700; margin: 0 0 4px; }
.aide-h2 { font-size: 1.05rem; font-weight: 700; margin: 22px 0 8px; }
.aide-muet { color: var(--sol-muted, #a7b6ca); font-size: .85rem; }
.aide-version { color: var(--sol-muted, #a7b6ca); font-size: .74rem; margin: 2px 0 8px; }
.aide-entete { border-bottom: 1px solid var(--sol-line, #22304a); padding-bottom: 12px; margin-bottom: 14px; }

.aide-alerte {
    background: rgba(224, 160, 64, .12); border: 1px solid #E0A040; color: #E0A040;
    border-radius: 6px; padding: 8px 12px; font-size: .82rem; margin-top: 6px;
}

.aide-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aide-recherche { margin: 12px 0; }
.aide-input {
    width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 8px;
    background: var(--sol-panel, #151516); color: var(--sol-text, #e6edf7);
    border: 1px solid var(--sol-line, #22304a); font-size: .95rem;
}
.aide-input:focus-visible, .aide-question-bouton:focus-visible, .aide-chip:focus-visible, .aide-lien:focus-visible,
.aide-bouton:focus-visible { outline: 2px solid var(--sol-accent, #FF9900); outline-offset: 2px; }

.aide-frequentes { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.aide-lien { background: none; border: 0; padding: 6px 0; color: var(--sol-accent, #FF9900); cursor: pointer; text-align: left; font-size: .88rem; }
.aide-lien:hover { text-decoration: underline; }

.aide-themes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.aide-chip {
    min-height: 36px; padding: 4px 12px; border-radius: 999px; cursor: pointer; font-size: .8rem;
    background: transparent; color: var(--sol-muted, #a7b6ca); border: 1px solid var(--sol-line, #22304a);
}
.aide-chip-actif { color: #111; background: var(--sol-accent, #FF9900); border-color: var(--sol-accent, #FF9900); font-weight: 600; }

/* Questions : un accordéon par bouton (clavier natif, aria-expanded) — jamais toutes ouvertes d'office */
.aide-question { border: 1px solid var(--sol-line, #22304a); border-radius: 8px; margin-bottom: 8px; background: var(--sol-panel, #151516); }
.aide-question-ouverte { border-color: var(--sol-accent, #FF9900); }
.aide-question-titre { margin: 0; font-size: .95rem; }
.aide-question-bouton {
    width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px;
    background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit;
}
.aide-id { color: var(--sol-muted, #a7b6ca); font-size: .72rem; min-width: 34px; }
.aide-question-texte { flex: 1; font-weight: 600; }
.aide-repere { font-size: .66rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--sol-line, #22304a); color: var(--sol-muted, #a7b6ca); white-space: nowrap; }
.aide-repere-essentiel { color: var(--sol-accent, #FF9900); border-color: var(--sol-accent, #FF9900); }

.aide-corps { padding: 4px 14px 12px; font-size: .9rem; line-height: 1.5; }
.aide-corps p { margin: 6px 0; }
.aide-corps ul, .aide-corps ol { padding-left: 1.2rem; }
.aide-corps pre { background: rgba(255,255,255,.04); border-radius: 6px; padding: 8px 10px; overflow-x: auto; font-size: .82rem; }
.aide-corps table { border-collapse: collapse; width: 100%; font-size: .82rem; display: block; overflow-x: auto; }
.aide-corps th, .aide-corps td { border: 1px solid var(--sol-line, #22304a); padding: 4px 8px; text-align: left; }
.aide-corps th { background: rgba(255,255,255,.04); }

/* Valeurs résolues depuis les paramètres / le registre « en dur » */
.faq-val { font-weight: 700; padding: 0 3px; border-radius: 3px; white-space: nowrap; }
.faq-val-param { color: var(--sol-accent, #FF9900); background: rgba(255, 153, 0, .12); }
.faq-val-fixe { color: var(--sol-muted, #a7b6ca); background: rgba(167, 182, 202, .14); }
.faq-val-ex { font-weight: 600; color: var(--sol-muted, #a7b6ca); border-bottom: 1px dotted var(--sol-muted, #a7b6ca); background: none; }
.faq-val-inconnu { color: #ef5a5a; background: rgba(224, 86, 106, .14); }

/* Encart « Valeurs utilisées » : le paramètre responsable, ou « en dur » */
.aide-valeurs { margin-top: 10px; border-top: 1px dashed var(--sol-line, #22304a); padding-top: 8px; font-size: .78rem; }
.aide-valeurs summary { cursor: pointer; color: var(--sol-muted, #a7b6ca); min-height: 32px; display: flex; align-items: center; }
.aide-valeurs ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.aide-badge { display: inline-block; font-size: .66rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; margin-right: 6px; white-space: nowrap; }
.aide-badge-param { color: var(--sol-accent, #FF9900); background: rgba(255, 153, 0, .14); }
.aide-badge-endur { color: #d6b56a; background: rgba(214, 181, 106, .14); }
.aide-badge-exemple { color: var(--sol-muted, #a7b6ca); background: rgba(167, 182, 202, .14); }
.aide-badge-autre { color: #6fb6e6; background: rgba(111, 182, 230, .14); }
.aide-code { font-family: ui-monospace, Consolas, monospace; font-size: .72rem; color: var(--sol-muted, #a7b6ca); margin: 0 6px; }
.aide-lien-param { font-size: .72rem; color: var(--sol-accent, #FF9900); }
.aide-detail { display: block; color: var(--sol-muted, #a7b6ca); font-size: .72rem; margin: 2px 0 0 4px; }

.aide-section { margin-top: 26px; }

/* Mini-calculateur */
.aide-calc { margin-top: 28px; border-top: 1px solid var(--sol-line, #22304a); padding-top: 8px; }
.aide-calc-grille { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 10px 0; }
.aide-calc-grille label { display: grid; gap: 4px; font-size: .78rem; color: var(--sol-muted, #a7b6ca); }
.aide-calc-grille input[type=number] {
    min-height: 40px; padding: 4px 8px; border-radius: 6px;
    background: var(--sol-panel, #151516); color: var(--sol-text, #e6edf7); border: 1px solid var(--sol-line, #22304a);
}
.aide-calc-case { display: flex !important; align-items: center; gap: 8px; }
.aide-bouton {
    min-height: 44px; padding: 8px 20px; border-radius: 8px; border: 0; cursor: pointer;
    background: var(--sol-accent, #FF9900); color: #111; font-weight: 700;
}
.aide-bouton:disabled { opacity: .6; cursor: default; }
.aide-calc-resultat { margin-top: 12px; }
.aide-calc-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.aide-calc-table th { text-align: left; color: var(--sol-muted, #a7b6ca); font-weight: 500; padding: 4px 8px; }
.aide-calc-table td { padding: 4px 8px; font-weight: 600; }
.aide-calc-reco { padding: 10px 12px; border-radius: 6px; border-left: 4px solid var(--sol-line, #22304a); background: var(--sol-panel, #151516); margin-top: 10px; }
.aide-niveau-rouge { border-left-color: #ef5a5a; }
.aide-niveau-amber { border-left-color: #E0A040; }
.aide-niveau-vert  { border-left-color: #2ec98a; }
.aide-niveau-gris  { border-left-color: #5a7a9a; }

/* Lien contextuel « Pourquoi ? » depuis une recommandation */
.diag-pourquoi { font-size: .62rem; margin-left: 2px; color: var(--sol-muted, #a7b6ca); text-decoration: underline dotted; white-space: nowrap; }
.diag-pourquoi:hover { color: var(--sol-accent, #FF9900); }

@media (max-width: 640px) {
    .aide-question-bouton { align-items: flex-start; }
    .aide-repere { display: none; }
}

/* Centre d’aide : présentation limitée à .aide-page. */
.aide-page *{box-sizing:border-box}
.aide-page{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 'Segoe UI',sans-serif}
.aide-page button,.aide-page input{font:inherit}
.aide-page button{cursor:pointer}
.aide-page button:focus-visible,.aide-page input:focus-visible,.aide-page summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.aide-page header{border-bottom:1px solid var(--line);padding:18px 4%;display:flex;justify-content:space-between;gap:20px}
.aide-page .brand{font-weight:700}
.aide-page .brand span{color:var(--accent)}
.aide-page .prototype{font-size:12px;color:var(--muted)}
.aide-page{max-width:1200px;margin:auto;padding:40px 32px}
.aide-page .eyebrow{font-size:11px;letter-spacing:1.8px;color:var(--accent);font-weight:700}
.aide-page h1{font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-1.2px;margin:12px 0}
.aide-page p{color:var(--muted)}
.aide-page .intro{margin:0 0 25px}
.aide-page .search{position:relative;max-width:760px}
.aide-page .search svg{position:absolute;top:19px;left:18px;color:var(--accent)}
.aide-page input{width:100%;background:var(--panel);border:1px solid #505054;border-radius:10px;padding:17px 18px 17px 50px;color:var(--text)}
.aide-page input::placeholder{color:var(--muted)}
.aide-page .hint{font-size:12px;margin:9px 0 30px}
.aide-page .section-head{display:flex;justify-content:space-between;gap:12px}
.aide-page h2{font-size:18px;letter-spacing:-.3px;margin:0 0 16px}
.aide-page .popular{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:35px}
.aide-page .popular button{color:var(--text);border:1px solid var(--line);border-radius:10px;background:var(--panel);text-align:left;padding:19px;display:flex;flex-direction:column;gap:10px;line-height:1.5}
.aide-page .popular button:hover{border-color:var(--accent);background:#1d1b17}
.aide-page .popular small{color:var(--accent);font-size:11px}
.aide-page .arrow{color:var(--accent);align-self:flex-end}
.aide-page .layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:32px}
.aide-page aside{align-self:start;position:sticky;top:20px}
.aide-page aside h2{font-size:11px;letter-spacing:1.4px;color:var(--muted)}
.aide-page nav{display:grid;gap:5px}
.aide-page nav button{display:flex;justify-content:space-between;gap:12px;text-align:left;background:transparent;color:var(--muted);border:1px solid transparent;border-radius:8px;padding:11px 12px;font-size:13px}
.aide-page nav button.active{background:#ff990015;border-color:#ff990044;color:var(--accent)}
.aide-page nav button:hover{background:#202022}
.aide-page nav span{font-size:11px;opacity:.8;padding-top:2px}
.aide-page .note{margin-top:24px;border-top:1px solid var(--line);padding-top:18px;font-size:12px;color:var(--muted)}
.aide-page .note strong{display:block;color:var(--text);margin-bottom:5px}
.aide-page .count{color:var(--muted);font-size:12px;white-space:nowrap}
.aide-page details{background:var(--panel);border:1px solid var(--line);border-radius:9px;margin-bottom:9px;scroll-margin-top:24px}
.aide-page details[open]{border-color:#ff990070}
.aide-page summary{list-style:none;display:flex;align-items:center;gap:14px;padding:19px 20px;cursor:pointer;font-size:14px;font-weight:600}
.aide-page summary::-webkit-details-marker{display:none}
.aide-page summary:after{content:'+';font-size:22px;font-weight:400;color:var(--muted);margin-left:auto}
.aide-page details[open] summary:after{content:'−';color:var(--accent)}
.aide-page .qid{font-size:11px;color:var(--muted);font-weight:400;min-width:26px}
.aide-page .answer{padding:0 22px 22px 60px;font-size:14px;max-width:760px}
.aide-page .answer p{color:#cdcdd2;white-space:pre-line;margin:12px 0 0}
.aide-page .badge{font-size:10px;border-radius:4px;padding:3px 7px;background:#ff990015;color:var(--accent)}
.aide-page footer{border-top:1px solid var(--line);margin-top:30px;padding-top:16px;font-size:11px;color:var(--muted)}
.aide-page .empty{padding:35px;border:1px dashed var(--line);border-radius:10px}
@media(max-width:760px){.aide-page{padding:28px 18px}
.aide-page .popular{grid-template-columns:1fr}
.aide-page .popular button{padding:15px}
.aide-page .arrow{display:none}
.aide-page .layout{grid-template-columns:1fr;gap:22px}
.aide-page aside{position:static}
.aide-page nav{display:flex;overflow-x:auto;padding-bottom:8px}
.aide-page nav button{min-width:170px}
.aide-page .note{display:none}
.aide-page .answer{padding-left:20px}
.aide-page .qid{display:none}
.aide-page summary{padding:16px}
.aide-page header{padding:15px 18px}
.aide-page .prototype{font-size:10px}
}.aide-page .view-nav{display:flex;gap:8px;border-bottom:1px solid var(--line);margin:28px 0;padding-bottom:12px;flex-wrap:wrap}
.aide-page .view-nav button,.aide-page .preset{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:7px;padding:10px 16px}
.aide-page .view-nav button[aria-pressed=true]{background:var(--accent);color:#111;border-color:var(--accent);font-weight:650}
.aide-page .visual-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.aide-page .visual-card,.aide-page .calc-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;min-width:0}
.aide-page .visual-card h3{font-size:18px;line-height:1.4;margin:10px 0}
.aide-page .visual-card p{font-size:13px}
.aide-page .wide{grid-column:1/-1}
.aide-page .kicker{font-size:10px;color:var(--accent);letter-spacing:1.5px}
.aide-page .scale{margin:30px 0 12px;height:12px;border-radius:8px;background:linear-gradient(to right,#737377 0 33.33%,#ff9900 33.33% 66.66%,#da7777 66.66%);position:relative}
.aide-page .marker{position:absolute;left:53%;top:-26px;font-size:12px;color:var(--text);transform:translateX(-50%);white-space:nowrap}
.aide-page .marker:after{content:'';display:block;height:18px;width:2px;background:white;margin:auto}
.aide-page .ticks{position:relative;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.aide-page .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.aide-page .mini{padding:18px;border:1px solid var(--line);border-radius:8px;background:#0b0b0c}
.aide-page .mini strong{display:block;font-size:25px;margin:6px 0}
.aide-page .mini small{color:var(--muted)}
.aide-page .decision{border-left:3px solid var(--accent);padding:10px 12px;background:#ff99000a;font-size:13px;margin-top:18px}
.aide-page .timeline{display:flex;justify-content:space-between;gap:6px;margin:25px 0;border-top:2px solid var(--line);padding-top:13px}
.aide-page .timeline b{font-size:13px}
.aide-page .timeline small{display:block;font-size:10px;color:var(--muted)}
.aide-page .timeline .mature{color:var(--accent)}
.aide-page .matrix{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.aide-page .matrix div{padding:12px;background:#202022;border-radius:6px;font-size:12px}
.aide-page .matrix b{display:block;margin-bottom:6px}
.aide-page .flow{display:flex;align-items:center;gap:15px;margin:20px 0}
.aide-page .flow .mini{flex:1;font-size:12px}
.aide-page .flow strong{font-size:16px}
.aide-page .calc-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}
.aide-page .fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aide-page fieldset{border:0;padding:0;margin:0 0 24px}
.aide-page legend{font-size:14px;font-weight:600;margin-bottom:14px}
.aide-page .fields label{font-size:12px;color:var(--muted)}
.aide-page .fields input{padding:10px 12px;margin-top:5px;border-color:var(--line)}
.aide-page .check{display:flex;gap:10px;font-size:13px;margin:12px 0;color:var(--muted)}
.aide-page .check input{width:17px;accent-color:var(--accent)}
.aide-page .calc-button{background:var(--accent);color:#111;border:0;border-radius:8px;padding:13px 18px;font-weight:700;width:100%}
.aide-page .metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aide-page .metric{padding:14px;background:#202022;border-radius:8px}
.aide-page .metric span{font-size:11px;color:var(--muted)}
.aide-page .metric strong{display:block;font-size:22px;margin-top:5px}
.aide-page .metric small{font-size:10px;color:var(--muted)}
.aide-page .calc-note{font-size:12px;color:var(--muted)}
.aide-page [hidden]{display:none!important}
@media(max-width:760px){.aide-page .visual-grid,.aide-page .calc-layout{grid-template-columns:1fr}
.aide-page .wide{grid-column:auto}
.aide-page .visual-card,.aide-page .calc-panel{padding:18px}
.aide-page .flow{flex-direction:column;align-items:stretch}
.aide-page .two{gap:8px}
.aide-page .mini{padding:12px}
.aide-page .view-nav button{flex:1;padding:10px;font-size:13px}
}.aide-page section,.aide-page aside,.aide-page .layout>*,.aide-page .calc-layout>*{min-width:0}
.aide-page .themes,.aide-page nav{max-width:100%}
.aide-page .story-hero{background:var(--panel);padding:30px;border:1px solid var(--line);border-radius:12px;margin-bottom:28px}
.aide-page .story-hero h2{font-size:28px;letter-spacing:-.7px;margin:12px 0}
.aide-page .story-hero p{max-width:780px}
.aide-page .story-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:32px}
.aide-page .story-index a{display:block;color:var(--muted);font-size:12px;text-decoration:none;padding:10px 0;border-bottom:1px solid #242426}
.aide-page .story-index a:hover,.aide-page .source-link{color:var(--accent)}
.aide-page .story-chapter{position:relative;padding:0 0 30px 48px;margin-bottom:26px;border-bottom:1px solid var(--line);scroll-margin-top:25px}
.aide-page .story-chapter h3{font-size:21px;letter-spacing:-.4px;margin:0 0 12px}
.aide-page .story-chapter p{line-height:1.85;margin:0 0 18px}
.aide-page .chapter-number{position:absolute;left:0;top:0;color:var(--accent);font-size:13px;padding-top:5px}
.aide-page .case-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.aide-page .case-links button{background:none;border:0;color:var(--muted);font-size:12px;text-decoration:underline;padding:5px 0;margin-right:10px}
.aide-page .case-library{margin-top:42px;padding-top:30px;border-top:1px solid var(--line)}
.aide-page .case-library h2{margin-top:10px;font-size:24px}
.aide-page .case-filters{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0 12px}
.aide-page .case-filters button{background:var(--panel);color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:7px 13px;font-size:12px}
.aide-page .case-filters button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
.aide-page .case-stats{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}
.aide-page .case-stats span{font-size:12px;padding:6px 9px;border-radius:6px;background:#242426;color:var(--text)}
.aide-page .source-case{margin:17px 0 0;background:transparent}
.aide-page .source-case summary{padding:12px;font-size:12px}
.aide-page .source-body{padding:0 14px 14px;font-size:12px;overflow-wrap:anywhere}
.aide-page .source-body pre{font:12px/1.7 'Segoe UI',sans-serif;white-space:pre-wrap;background:#0b0b0c;border-radius:6px;padding:12px}
.aide-page .source-body code{color:var(--accent);font-size:11px}
.aide-page .case-card:target{border-color:var(--accent)}
.aide-page .source-link{font-size:13px}
.aide-page .case-card{align-self:start}
@media(max-width:760px){.aide-page .story-layout{grid-template-columns:1fr}
.aide-page .story-index{position:static}
.aide-page .story-index a{font-size:13px}
.aide-page .story-hero{padding:20px}
.aide-page .story-chapter{padding-left:33px}
.aide-page .story-chapter h3{font-size:19px}
.aide-page .case-filters{gap:6px}
}
.aide-page{max-width:1200px;font-family:var(--sol-font);--bg:var(--sol-bg);--panel:var(--sol-panel);--line:var(--sol-line);--text:var(--sol-text);--muted:var(--sol-muted);--accent:var(--sol-accent)}
.aide-page .aide-entete{border:0;padding:0;margin-bottom:18px;display:block}.aide-page .aide-h1{font-size:clamp(26px,3vw,38px);margin:12px 0}.aide-page .aide-recherche{max-width:760px;margin:24px 0}.aide-page .aide-input{padding:17px 18px}.aide-page .aide-frequentes{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:32px}.aide-page .aide-frequentes li{display:flex}.aide-page .aide-lien{padding:18px;border:1px solid var(--sol-line);background:var(--sol-panel);border-radius:10px;color:var(--sol-text);width:100%}.aide-page .aide-faq-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:32px}.aide-page .aide-themes{display:flex;flex-direction:column;flex-wrap:nowrap}.aide-page .aide-chip{border-radius:8px;text-align:left;padding:12px;white-space:normal}.aide-page .aide-chip-actif{background:#ff990015;color:var(--sol-accent);border-color:#ff990055}.aide-page .aide-question-bouton{padding:19px 20px}.aide-page .aide-question-bouton:after{content:'+';font-size:22px;color:var(--sol-muted)}.aide-page .aide-question-ouverte .aide-question-bouton:after{content:'−';color:var(--sol-accent)}.aide-page .aide-corps{padding:0 22px 22px;line-height:1.75}.aide-page .aide-calc{border:0;margin:0}.aide-page .aide-calc-grille{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:24px}.aide-page .aide-calc-grille input{padding:10px 12px}.aide-page .aide-calc-grille input[type=checkbox]{width:18px;min-height:18px}.aide-page .calc-panel h4{font-size:14px;margin:18px 0 12px}.aide-page .aide-bouton{width:100%}.aide-page .aide-calc-case{grid-column:1/-1}.aide-page .metric strong{overflow-wrap:anywhere}.aide-page [hidden]{display:none!important}
@media(max-width:760px){.aide-page .aide-faq-layout{grid-template-columns:1fr}.aide-page .aide-faq-sidebar{position:static}.aide-page .aide-themes{flex-direction:row;overflow-x:auto}.aide-page .aide-chip{min-width:180px}.aide-page .aide-frequentes{grid-template-columns:1fr}.aide-page .aide-calc-grille{grid-template-columns:1fr 1fr}}