/* TiKamp — refonte graphique 2026-10 : styles d'ORIGINE de la page « aide ».
   FICHIER PRODUIT par scripts/refonte-feuille-origine.js — NE PAS MODIFIER À LA MAIN.
   Il reprend, sous la garde html[data-refonte], les règles de la page d'origine et
   celles que ses scripts posent eux-mêmes. L'habillage refondu est écrit à la main
   dans tk-refonte-public.css (chargée après). */

/* ── aide.html — <style> n° 1 ── */
html[data-refonte] body.page-aide { --border-2:#C9D1C7 }
html[data-refonte] main.origine * { box-sizing:border-box; }
html[data-refonte] main.origine [hidden] { display:none !important; }
html[data-refonte] { scroll-behavior:smooth; }
html[data-refonte] body.page-aide { margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:16px; line-height:1.55; }
html[data-refonte] main.origine a { color:var(--primary); text-underline-offset:3px; }
html[data-refonte] main.origine a:hover { color:var(--primary-hover); }
html[data-refonte] main.origine :focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }
html[data-refonte] main.origine .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html[data-refonte] main.origine .skip { position:absolute; top:-56px; left:8px; background:var(--ink); color:#fff; padding:12px 16px; border-radius:8px; z-index:100; }
html[data-refonte] main.origine .skip:focus { top:8px; }
html[data-refonte] main.origine .o-entete.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--border); background:var(--surface); }
html[data-refonte] main.origine .back-link { display:inline-block; padding:8px 0; font-size:14px; font-weight:600; color:var(--ink-2); text-decoration:none; }
html[data-refonte] main.origine .back-link:hover { color:var(--primary); }
html[data-refonte] main.origine { max-width:760px; margin:0 auto; padding:32px 16px 48px; }
html[data-refonte] main.origine h1 { font-size:28px; line-height:1.2; margin:0 0 8px; letter-spacing:-.01em; }
html[data-refonte] main.origine .lead { color:var(--ink-2); margin:0 0 24px; max-width:60ch; }
html[data-refonte] main.origine .recherche { position:relative; margin:0 0 16px; }
html[data-refonte] main.origine .recherche + #q-etat:not(:empty) { margin-top:-8px; }
html[data-refonte] main.origine .recherche label { display:block; font-size:14px; font-weight:600; color:var(--ink-2); margin:0 0 8px; }
html[data-refonte] main.origine .recherche input { width:100%; min-height:48px; padding:12px 44px 12px 16px; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--border-2); border-radius:12px; transition:border-color .16s ease, box-shadow .16s ease; }
html[data-refonte] main.origine .recherche input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
html[data-refonte] main.origine .recherche input::-webkit-search-cancel-button { display:none; }
html[data-refonte] main.origine #q-vider { position:absolute; right:2px; bottom:2px; width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:var(--ink-2); font-size:22px; line-height:1; cursor:pointer; }
html[data-refonte] main.origine #q-vider:hover { background:var(--primary-soft); }
html[data-refonte] main.origine #q-etat { margin:0 0 16px; font-size:14px; color:var(--ink-2); }
html[data-refonte] main.origine #q-etat:empty { margin:0; }
html[data-refonte] main.origine .publics { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:0 0 24px; }
html[data-refonte] main.origine .publics button { min-height:48px; padding:8px 12px; font:inherit; font-size:15px; font-weight:600; line-height:1.25; text-align:center; color:var(--ink-2); background:var(--surface); border:1px solid var(--border-2); border-radius:12px; cursor:pointer; transition:background-color .16s ease, border-color .16s ease, color .16s ease; }
html[data-refonte] main.origine .publics button:hover { border-color:var(--primary); color:var(--primary); }
html[data-refonte] main.origine .publics button[aria-selected="true"] { background:var(--primary); border-color:var(--primary); color:#fff; }
html[data-refonte] main.origine .publics button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:520px) {
  html[data-refonte] main.origine .publics { grid-template-columns:1fr; }
}
html[data-refonte] main.origine section.public { margin:0 0 32px; }
html[data-refonte] main.origine h2.public-h { font-size:20px; line-height:1.3; margin:0 0 4px; }
html[data-refonte] main.origine .public-intro { margin:0 0 16px; color:var(--ink-2); max-width:62ch; }
html[data-refonte] main.origine h3.theme { font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:24px 0 8px; }
html[data-refonte] main.origine .liens-rapides { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px; }
html[data-refonte] main.origine .liens-rapides a,
html[data-refonte] main.origine .btn { display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border-radius:10px; font-size:14px; font-weight:600; text-decoration:none; border:1px solid var(--border-2); background:var(--surface); color:var(--ink); transition:background-color .16s ease, border-color .16s ease; }
html[data-refonte] main.origine .liens-rapides a:hover,
html[data-refonte] main.origine .btn:hover { border-color:var(--primary); color:var(--primary); }
html[data-refonte] main.origine .btn.plein { background:var(--primary); border-color:var(--primary); color:#fff; }
html[data-refonte] main.origine .btn.plein:hover { background:var(--primary-hover); border-color:var(--primary-hover); color:#fff; }
html[data-refonte] main.origine .acc-list { display:flex; flex-direction:column; gap:8px; }
html[data-refonte] main.origine details.q { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
html[data-refonte] main.origine details.q summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding:12px 16px; cursor:pointer; list-style:none; font-weight:600; font-size:15.5px; line-height:1.4; }
html[data-refonte] main.origine details.q summary::-webkit-details-marker { display:none; }
html[data-refonte] main.origine details.q summary:hover { color:var(--primary); }
html[data-refonte] main.origine details.q summary:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:14px; }
html[data-refonte] main.origine details.q summary .tgl { flex:none; width:24px; height:24px; border-radius:50%; border:1px solid var(--border-2); display:flex; align-items:center; justify-content:center; position:relative; color:var(--ink-2); }
html[data-refonte] main.origine details.q summary .tgl::before,
html[data-refonte] main.origine details.q summary .tgl::after { content:''; position:absolute; background:currentColor; }
html[data-refonte] main.origine details.q summary .tgl::before { width:10px; height:2px; }
html[data-refonte] main.origine details.q summary .tgl::after { width:2px; height:10px; transition:transform .2s ease; }
html[data-refonte] main.origine details.q[open] summary .tgl { background:var(--primary); border-color:var(--primary); color:#fff; }
html[data-refonte] main.origine details.q[open] summary .tgl::after { transform:scaleY(0); }
html[data-refonte] main.origine details.q .rep { padding:0 16px 16px; color:var(--ink-2); font-size:15px; line-height:1.65; max-width:68ch; }
html[data-refonte] main.origine details.q .rep p { margin:0 0 8px; white-space:pre-line; }
html[data-refonte] main.origine details.q .rep p:last-child { margin-bottom:0; }
html[data-refonte] main.origine details.q .rep a { font-weight:600; }
html[data-refonte] main.origine .rep-liens { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:4px; }
html[data-refonte] main.origine .rep-liens a { display:inline-block; padding:8px 0; }
html[data-refonte] main.origine .etat { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px; }
html[data-refonte] main.origine .etat h3 { margin:0 0 8px; font-size:17px; }
html[data-refonte] main.origine .etat p { margin:0 0 16px; color:var(--ink-2); max-width:56ch; }
html[data-refonte] main.origine .squelette { display:flex; flex-direction:column; gap:8px; }
html[data-refonte] main.origine .squelette span { display:block; height:48px; border-radius:14px; background:linear-gradient(90deg,#EEF1EC 25%,#F7F8F5 50%,#EEF1EC 75%); background-size:200% 100%; animation:brille 1.2s linear infinite; }
@keyframes brille { to { background-position:-200% 0; } }
html[data-refonte] main.origine .contact { margin-top:40px; padding:24px; border-radius:16px; background:var(--primary-soft); }
html[data-refonte] main.origine .contact h2 { margin:0 0 4px; font-size:17px; }
html[data-refonte] main.origine .contact p { margin:0 0 16px; color:var(--ink-2); }
@media (prefers-reduced-motion:reduce) {
  html[data-refonte] { scroll-behavior:auto; }
  html[data-refonte] main.origine .squelette span { animation:none; }
  html[data-refonte] main.origine details.q summary .tgl::after,
  html[data-refonte] main.origine .publics button,
  html[data-refonte] main.origine .recherche input { transition:none; }
}