/*
 * Centre d'aide ScanRéduc — feuille de style du mini-site public (lot L2).
 *
 * Reprise de la maquette fournie par Florent le 2026-09-15, versionnée dans
 * docs/reference/scanreduc/maquette-aide/help.css. Le nommage `hc-*` (help center) vient
 * d'elle : le conserver permet de rejouer la maquette d'origine dans un navigateur pour
 * comparer, sans traduire les sélecteurs.
 *
 * La couleur d'un thème pilote toute la page par deux variables CSS posées sur l'article
 * (--theme, --theme-soft), alimentées depuis `support_categories.color` / `color_soft`.
 *
 * Précompilé automatiquement : app/assets/config/manifest.js porte
 * `link_directory ../stylesheets .css`.
 */
/* ============================================================
   ScanRéduc — Centre d'aide · feuille de style unique
   Mobile first · aucune dépendance · tokens = charte ScanRéduc
   La couleur du thème arrive du back-office : elle est posée en
   style="--theme:#xxxxxx;--theme-soft:#xxxxxx" sur <article class="hc-theme">
   ============================================================ */
:root{
  --sr-ink:#1D1C3C; --sr-body:#35334F; --sr-muted:#68647E; --sr-muted-soft:#9A93B5;
  --sr-bg:#FAF9FC; --sr-surface:#fff; --sr-surface-alt:#F1EFF7; --sr-border:#E4E1EE;
  --sr-orange:#EB7134; --sr-violet:#7A4FC7;
  --sr-gradient:linear-gradient(90deg,#EE7A38 0%,#C34F87 38%,#8A57C4 68%,#2B2560 100%);
  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,sans-serif;
  --r-card:14px; --r-lg:24px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(29,28,60,.06),0 1px 3px rgba(29,28,60,.05);
  --sh-md:0 6px 20px rgba(29,28,60,.08);
  --wrap:1120px;
  --theme:var(--sr-orange); --theme-soft:#FCEBE0;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--sr-bg); color:var(--sr-body);
  font-family:var(--font-body); font-size:16px; line-height:1.6; text-wrap:pretty;
  -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; }
a{ color:var(--sr-violet); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:#5F35A8; }
h1,h2,h3{ font-family:var(--font-display); color:var(--sr-ink); margin:0; line-height:1.22; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.hc-wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }
.hc-skip{ position:absolute; left:-9999px; }
.hc-skip:focus{ left:12px; top:12px; z-index:20; background:#fff; padding:10px 14px; border-radius:var(--r-pill); box-shadow:var(--sh-md); }
:focus-visible{ outline:2px solid var(--theme); outline-offset:2px; border-radius:6px; }

/* ---- Barre de marque ---- */
.hc-topbar{ background:var(--sr-gradient); }
.hc-topbar-in{ display:flex; align-items:center; gap:14px; min-height:60px; }
.hc-brand{ display:flex; align-items:center; flex:none; }
.hc-brand img{ display:block; height:26px; width:auto; }
.hc-topbar-tag{ font-family:var(--font-display); font-weight:700; font-size:13px; color:#fff;
  padding:5px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.18); }
.hc-topbar-cta{ margin-left:auto; font-weight:700; font-size:14px; color:var(--sr-ink);
  background:#fff; padding:9px 16px; border-radius:var(--r-pill); text-decoration:none;
  box-shadow:var(--sh-sm); transition:transform .12s ease, box-shadow .12s ease; }
.hc-topbar-cta:hover{ color:var(--sr-ink); transform:translateY(-1px); box-shadow:var(--sh-md); }

/* ---- Fil d'ariane ---- */
.hc-breadcrumb{ padding-top:14px; }
.hc-breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:13px; color:var(--sr-muted-soft); }
.hc-breadcrumb li+li::before{ content:"›"; margin-right:6px; color:var(--sr-muted-soft); }
.hc-breadcrumb a{ color:var(--sr-muted); text-decoration:none; }
.hc-breadcrumb a:hover{ text-decoration:underline; }
.hc-breadcrumb [aria-current]{ color:var(--sr-ink); font-weight:700; }

/* ---- Gabarit ---- */
.hc-layout{ display:grid; grid-template-columns:1fr; gap:28px; padding-block:20px 56px; }
.hc-aside{ display:none; }
.hc-content{ min-width:0; }

/* ---- En-tête de thème ---- */
.hc-head{ background:var(--sr-surface); border:1px solid var(--sr-border); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); padding:26px 22px 22px; position:relative; overflow:hidden; }
.hc-head::before{ content:""; position:absolute; inset:0 0 auto; height:5px; background:var(--theme); }
.hc-eyebrow{ font-family:var(--font-body); font-weight:800; font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--theme); margin-bottom:10px; }
.hc-h1{ font-weight:800; font-size:clamp(25px,5.2vw,38px); letter-spacing:-.01em; }
.hc-sub{ margin-top:12px; font-size:clamp(16px,2.2vw,18px); color:var(--sr-body); max-width:62ch; }
.hc-updated{ margin-top:16px; font-size:13px; color:var(--sr-muted-soft); }

/* ---- Sélecteur de thème (une seule occurrence, sous le sous-titre) ---- */
.hc-chips{ margin:18px 0 8px; }
.hc-chips ul{ display:flex; flex-wrap:wrap; gap:8px; }
.hc-navlink{ display:inline-block; text-decoration:none; font-weight:700; font-size:14px;
  color:var(--sr-body); background:var(--sr-surface); border:1px solid var(--sr-border);
  padding:9px 15px; border-radius:var(--r-pill);
  transition:background .18s ease, color .18s ease, border-color .18s ease; }
.hc-navlink:hover{ color:var(--theme); border-color:var(--theme); background:var(--theme-soft); }
.hc-navlink.is-active{ background:var(--theme); border-color:var(--theme); color:#fff; }
.hc-navlink.is-active:hover{ color:#fff; }

/* ---- Sections ---- */
.hc-section{ margin-top:34px; }
.hc-h2{ font-weight:800; font-size:clamp(20px,3vw,26px); }
.hc-lead{ margin-top:10px; color:var(--sr-muted); max-width:64ch; }

/* Étapes */
.hc-steps{ display:grid; gap:12px; margin-top:20px; counter-reset:step; }
.hc-step{ display:flex; gap:14px; align-items:flex-start; background:var(--sr-surface);
  border:1px solid var(--sr-border); border-radius:var(--r-card); box-shadow:var(--sh-sm); padding:16px 18px; }
.hc-step-n{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--theme); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  display:grid; place-items:center; margin-top:1px; }
.hc-step-body{ min-width:0; }
.hc-step-t{ font-weight:700; font-size:17px; }
.hc-step-d{ margin-top:5px; font-size:15px; color:var(--sr-muted); }
.hc-step-d strong{ color:var(--sr-ink); font-weight:700; }

/* Questions / réponses */
.hc-faq{ margin-top:16px; background:var(--sr-surface); border:1px solid var(--sr-border);
  border-radius:var(--r-card); box-shadow:var(--sh-sm); overflow:hidden; }
.hc-q+.hc-q{ border-top:1px solid var(--sr-border); }
.hc-q summary{ display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none;
  padding:16px 18px; font-weight:700; font-size:16px; color:var(--sr-ink); }
.hc-q summary::-webkit-details-marker{ display:none; }
.hc-q summary:hover{ background:var(--theme-soft); }
.hc-q summary span{ flex:1; min-width:0; }
.hc-chev{ flex:none; width:20px; height:20px; fill:none; stroke:var(--theme); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.hc-q[open] .hc-chev{ transform:rotate(180deg); }
.hc-a{ padding:0 18px 18px; }
.hc-a p{ font-size:15.5px; color:var(--sr-muted); max-width:66ch; }

/* Encart contact */
.hc-cta{ margin-top:34px; border-radius:var(--r-lg); padding:24px 22px; color:#fff;
  background:var(--sr-gradient); box-shadow:0 10px 30px rgba(138,87,196,.22); }
.hc-cta-t{ font-weight:800; font-size:20px; color:#fff; }
.hc-cta p{ margin-top:8px; font-size:15px; color:rgba(255,255,255,.9); max-width:52ch; }
.hc-cta em{ font-style:normal; font-weight:700; color:#fff; }
.hc-btn{ display:inline-block; margin-top:16px; background:#fff; color:var(--sr-ink);
  font-weight:700; font-size:15px; text-decoration:none; padding:12px 22px; border-radius:var(--r-pill);
  transition:transform .12s ease, box-shadow .12s ease; }
.hc-btn:hover{ color:var(--sr-ink); transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.18); }

/* ---- Pied de page ---- */
.hc-footer{ background:var(--sr-ink); color:rgba(255,255,255,.72); padding-block:36px 42px; }
.hc-footer-in{ display:grid; gap:28px; grid-template-columns:1fr; }
.hc-footer-brand{ font-family:var(--font-display); font-weight:800; font-size:18px; color:#fff; }
.hc-footer-brand span{ font-weight:600; font-size:13px; color:rgba(255,255,255,.6); }
.hc-footer-note{ margin-top:6px; font-size:14px; }
.hc-footer-h{ font-family:var(--font-body); font-weight:800; font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:12px; }
.hc-footer nav ul{ display:grid; gap:9px; }
.hc-footer a{ color:rgba(255,255,255,.82); font-size:14.5px; text-decoration:none; }
.hc-footer a:hover{ color:#fff; text-decoration:underline; }

/* ---- ≥ 720px ---- */
@media (min-width:720px){
  .hc-head{ padding:34px 30px 28px; }
  .hc-step{ padding:18px 22px; }
  .hc-cta{ padding:30px 32px; }
  .hc-footer-in{ grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
}
/* ---- ≥ 1000px : sommaire latéral collant ---- */
@media (min-width:1000px){
  .hc-layout{ grid-template-columns:250px minmax(0,1fr); gap:40px; padding-block:24px 72px; }
  .hc-aside{ display:block; position:sticky; top:24px; align-self:start; }
  .hc-aside-t{ font-family:var(--font-body); font-weight:800; font-size:12px; letter-spacing:.09em;
    text-transform:uppercase; color:var(--sr-muted-soft); margin-bottom:12px; }
  .hc-aside-list{ display:grid; gap:2px; }
  .hc-aside-list a{ display:block; text-decoration:none; font-weight:600; font-size:15px;
    color:var(--sr-body); padding:10px 12px; border-radius:10px; transition:background .16s ease, color .16s ease; }
  .hc-aside-list a:hover{ background:var(--theme-soft); color:var(--theme); }
  .hc-aside-list a[aria-current]{ background:var(--theme-soft); color:var(--theme); font-weight:700; }
  /* les puces restent visibles sur desktop : elles sont le sélecteur canonique de la page */
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================================
   Sommaire du centre d'aide (page d'index).

   Repris du bloc « Besoin d'un coup de main ? » de la maquette du 2026-09-15 (`ln-help-*`),
   transposé dans la grammaire `hc-*` du centre d'aide : même carte blanche, même bordure,
   même ombre et mêmes rayons que les pages de thème, pour que le sommaire ne détonne pas.

   La couleur du thème (--theme) ne sert qu'à l'ACCENT — la flèche et le liseré au survol.
   Un fond coloré ferait concurrence aux cartes de contenu, qui sont blanches.
   ========================================================================================== */
.hc-index{ padding-block:28px 56px; }
.hc-index-head{ margin-bottom:26px; }

.hc-index-grid{ display:grid; gap:10px; list-style:none; margin:0; padding:0; }
.hc-index-grid a{ display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--sr-surface); border:1px solid var(--sr-border);
  border-left:3px solid var(--theme);
  border-radius:var(--r-card); box-shadow:var(--sh-sm); padding:15px 17px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.hc-index-grid a:hover{ transform:translateY(-1px); box-shadow:var(--sh-md); }

.hc-index-tx{ flex:1; min-width:0; }
.hc-index-grid b{ display:block; font-family:var(--font-display); font-weight:700;
  font-size:16px; color:var(--sr-ink); }
.hc-index-grid i{ display:block; margin-top:3px; font-style:normal; font-size:13px;
  color:var(--sr-muted-soft); }
.hc-index-ar{ flex:none; color:var(--theme); font-size:19px; font-weight:700;
  transition:transform .12s ease; }
.hc-index-grid a:hover .hc-index-ar{ transform:translateX(3px); }

@media (min-width:720px){
  .hc-index-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1000px){
  .hc-index-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* Respecte le réglage système : pas d'animation si l'utilisateur l'a désactivée. */
@media (prefers-reduced-motion:reduce){
  .hc-index-grid a, .hc-index-ar{ transition:none; }
  .hc-index-grid a:hover{ transform:none; }
  .hc-index-grid a:hover .hc-index-ar{ transform:none; }
}

/* Le corps d'une étape est rendu dans un `div` et non un `p` (un `<p>` saisi au back-office
   produirait sinon un `<p>` imbriqué, invalide) : on style les deux à l'identique pour que le
   rendu reste celui de la maquette. */
.hc-step-d p{ font-size:15px; color:var(--sr-muted); margin:0; }
.hc-step-d p+p{ margin-top:8px; }