/* ════════════════════════════════════════════════════════════
   Aide — /aide/, rendue par le backend (App\Services\Aide\AideSiteRenderer)
   depuis docs/aide/. Même direction que le journal des nouveautés : sommaire
   fin à gauche, une colonne de lecture, filets de 1 px, pas de cartes.
   Ici on lit longtemps : texte courant plus grand, interligne large, largeur
   de ligne bornée à ~68 caractères.
   ════════════════════════════════════════════════════════════ */

/* ── Recherche ───────────────────────────────────────────── */
/* Un creux, comme les champs de l'application ; la liste des pages trouvées
   flotte dessous (aide.js). Sans JavaScript, le formulaire mène à ?q=. */
.aide-cherche{position:relative}
.aide-cherche__champ{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;
  border-radius:11px;background:var(--da-slot);box-shadow:var(--da-hollow);cursor:text;
  transition:box-shadow .2s var(--da-ease)}
.aide-cherche__champ:focus-within{box-shadow:var(--da-hollow),0 0 0 2px rgba(var(--da-violet-pale-rgb),.4)}
.aide-cherche__loupe{flex:none;width:17px;height:17px;color:var(--da-ink-faint)}
.aide-cherche input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;
  font:inherit;font-size:.88rem;color:var(--da-ink-strong);-webkit-appearance:none;appearance:none}
.aide-cherche input::placeholder{color:var(--da-ink-faint)}
.aide-cherche input::-webkit-search-cancel-button{display:none}
.aide-cherche__touche{flex:none;font-size:.7rem}
.aide-cherche__champ:focus-within .aide-cherche__touche{visibility:hidden}
@media (pointer:coarse){.aide-cherche__touche{display:none}}
.aide-cherche--grande{max-width:640px;margin-top:30px}
.aide-cherche--grande .aide-cherche__champ{height:58px;padding:0 18px;gap:14px;border-radius:15px}
.aide-cherche--grande .aide-cherche__loupe{width:21px;height:21px}
.aide-cherche--grande input{font-size:1.05rem}

.aide-cherche__res{position:absolute;z-index:40;top:calc(100% + 8px);left:0;right:0;
  max-height:min(62vh,460px);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:6px;
  list-style:none;border-radius:14px;background:var(--da-panel);
  box-shadow:var(--da-lift),0 0 0 1px var(--da-rule)}
.aide-cherche__res[hidden]{display:none}
.aide-res{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;padding:10px 12px;
  border-radius:10px;text-decoration:none;color:inherit}
.aide-res .aide-ico{grid-row:span 3;width:18px;height:18px;margin-top:2px;color:var(--da-ink-faint)}
.aide-res__t{font-size:.92rem;font-weight:600;color:var(--da-ink-strong)}
.aide-res__o{font-size:.75rem;color:var(--da-ink-faint)}
.aide-res__r{font-size:.82rem;line-height:1.45;color:var(--da-ink-muted);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.aide-res mark{background:none;color:var(--da-violet-pale)}
.aide-res[aria-selected="true"],.aide-res:hover{background:rgba(var(--da-violet-pale-rgb),.1)}
.aide-res[aria-selected="true"] .aide-ico,.aide-res:hover .aide-ico{color:var(--da-violet-pale)}
.aide-res--vide{padding:14px 12px;font-size:.88rem;color:var(--da-ink-muted)}

/* ── Accueil de l'aide ─────────────────────────────────────── */
.aide-head .lede{max-width:46ch}
.aide-raccourcis{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0}
/* Téléphone : une ligne qui défile plutôt que cinq lignes empilées. */
@media (max-width:640px){
  .aide-raccourcis{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .aide-raccourcis::-webkit-scrollbar{display:none}
  .aide-raccourci,.aide-raccourcis__h{flex:none;white-space:nowrap}
}
.aide-raccourcis__h{margin-right:6px;font-family:var(--mono);font-size:.63rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--da-ink-faint)}
.aide-raccourci{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;
  background:rgba(var(--da-slot-rgb),.75);font-size:.84rem;color:var(--da-ink-muted);text-decoration:none;
  transition:color .2s var(--da-ease),background .2s var(--da-ease)}
.aide-raccourci .aide-ico{width:15px;height:15px}
.aide-raccourci:hover{color:var(--da-violet-pale);background:rgba(var(--da-violet-pale-rgb),.1)}

.aide-hub{padding-bottom:clamp(56px,8vw,110px)}
.aide-tuiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.aide-tuile{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto;
  column-gap:16px;row-gap:4px;padding:20px 20px 18px;border-radius:16px;
  background:rgba(var(--da-card-rgb),.5);text-decoration:none;
  transition:background .25s var(--da-ease),transform .25s var(--da-ease)}
.aide-tuile .aide__tuile{grid-row:1/4;--size:46px;--rive:5px}
.aide-tuile__t{font-family:var(--display);font-size:1.12rem;font-weight:600;line-height:1.25;
  color:var(--da-ink-strong)}
.aide-tuile__r{font-size:.86rem;line-height:1.5;color:var(--da-ink-muted)}
.aide-tuile__n{margin-top:8px;font-family:var(--mono);font-size:.63rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--da-ink-faint)}
.aide-tuile:hover{background:rgba(var(--da-card-rgb),.9);transform:translateY(-2px)}
.aide-tuile:hover .aide-tuile__t{color:var(--da-violet-pale)}
@media (prefers-reduced-motion:reduce){.aide-tuile:hover{transform:none}}
.aide-hub__essai{margin-top:32px;color:var(--da-ink-muted);font-size:.95rem}
.aide-hub__essai a{color:var(--da-violet-pale)}

/* Liste de pages d'une rubrique : icône, titre, puis résumé, filet entre deux. */
.aide-liste{list-style:none;margin:18px 0 0;padding:0}
.aide-liste li{border-top:1px solid var(--da-rule)}
.aide-liste li:first-child{border-top:0}
.aide-liste a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;
  padding:12px 0;text-decoration:none}
.aide-liste__i{grid-row:span 2;width:18px;height:18px;margin-top:3px;color:var(--da-ink-faint);
  transition:color .2s var(--da-ease)}
.aide-liste__t,.aide-liste__r{grid-column:2}
.aide-liste__t{display:block;font-weight:600;color:var(--da-ink-strong)}
.aide-liste__r{display:block;margin-top:2px;font-size:.88rem;line-height:1.5;color:var(--da-ink-faint)}
.aide-liste a:hover .aide-liste__i,.aide-liste a:hover .aide-liste__t{color:var(--da-violet-pale)}
.aide-liste a:hover .aide-liste__r{color:var(--da-ink-muted)}
.aide-rub{margin-top:clamp(28px,4vw,44px)}

/* Icônes : celles du registre de l'application (src/utils/icones.ts, figé
   par `icones:figer`), pour qu'une fonction se reconnaisse d'un coup d'œil
   sur le site comme dans l'app. */
.aide-ico{width:1em;height:1em;flex:none}

/* Le « noyau » des modales de l'application (.da-core de da-components.css),
   en violet : des rives de verre teinté, un logement sombre qui traverse, une
   règle graduée au plancher, un glyphe qui luit. */
.aide__titre{display:flex;align-items:center;gap:clamp(14px,2vw,22px)}
.aide__titre h1{margin:0}
.aide__tuile{--size:clamp(48px,5.4vw,62px);--rive:7px;position:relative;flex:none;display:grid;
  place-items:center;width:var(--size);height:var(--size);border-radius:.85rem;overflow:hidden;
  background:rgba(var(--da-violet-pale-rgb),.11);color:var(--da-violet-pale);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.04)}
.aide__tuile::before{content:"";position:absolute;inset:var(--rive) 0;z-index:1;
  background:rgba(8,10,22,.42);box-shadow:inset 0 1px 3px rgba(0,0,0,.72),0 1px 0 rgba(255,255,255,.055)}
.aide__tuile::after{content:"";position:absolute;left:0;right:0;bottom:var(--rive);height:4px;z-index:2;
  background:repeating-linear-gradient(90deg,rgba(var(--da-violet-pale-rgb),.42) 0 1px,transparent 1px 5px)}
.aide__tuile .aide-ico{position:relative;z-index:3;width:40%;height:40%;
  filter:drop-shadow(0 0 2px rgba(var(--da-violet-pale-rgb),.8)) drop-shadow(0 0 7px rgba(var(--da-violet-pale-rgb),.45))}
.aide__tuile .aide-ico *{stroke-width:1.8}
:root[data-theme="light"] .aide__tuile::before{background:rgba(15,23,42,.07)}
:root[data-theme="light"] .aide__tuile .aide-ico{filter:drop-shadow(0 0 2px rgba(var(--da-violet-pale-rgb),.3))}
@media (prefers-contrast:more){.aide__tuile::after{display:none}.aide__tuile .aide-ico{filter:none}}

/* ── Rubrique et page : sommaire + lecture ─────────────────── */
.aide{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,5vw,64px);
  padding-top:clamp(32px,6vw,80px);padding-bottom:clamp(56px,8vw,110px)}
@media (min-width:960px){.aide{grid-template-columns:270px minmax(0,1fr)}}

.aide__nav{display:none}
.aide__mtete{display:grid;gap:12px}
@media (min-width:960px){
  .aide__nav{display:block;position:sticky;top:96px;align-self:start;
    max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-gutter:stable;padding:2px 10px 24px 2px}
  .aide__mtete{display:none}
}
.aide__nav-h{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 12px}
.aide__nav-h a{color:var(--da-ink-faint);text-decoration:none}
.aide__nav-h a:hover{color:var(--da-violet-pale)}
.aide__nav .aide-cherche{margin-bottom:18px}

/* Deux niveaux qui ne se confondent pas : la rubrique en tête de groupe
   (pastille, nom, nombre de pages), ses pages en retrait le long d'un filet. */
.aide-som{list-style:none;margin:0;padding:0}
.aide-som__rub+.aide-som__rub{margin-top:2px}
.aide-som summary{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;
  cursor:pointer;list-style:none;font-size:.86rem;font-weight:600;line-height:1.3;color:var(--da-ink);
  transition:background .2s var(--da-ease),color .2s var(--da-ease)}
.aide-som summary::-webkit-details-marker{display:none}
.aide-som summary:hover{background:rgba(var(--da-slot-rgb),.6);color:var(--da-ink-strong)}
.aide-som summary::after{content:"";flex:none;width:.36rem;height:.36rem;margin:0 2px 0 4px;
  border-right:1.5px solid var(--da-ink-faint);border-bottom:1.5px solid var(--da-ink-faint);
  transform:rotate(-45deg);transition:transform .2s var(--da-ease)}
.aide-som details[open]>summary{color:var(--da-ink-strong)}
.aide-som details[open]>summary::after{transform:rotate(45deg)}
.aide-som__ico{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;
  background:var(--da-slot);box-shadow:var(--da-hollow);color:var(--da-ink-muted)}
.aide-som__ico .aide-ico{width:15px;height:15px}
.aide-som details[open] .aide-som__ico{color:var(--da-violet-pale)}
.aide-som__t{flex:1;min-width:0}
.aide-som__n{font-family:var(--mono);font-size:.66rem;font-weight:500;color:var(--da-ink-faint)}
.aide-som__pages{list-style:none;margin:4px 0 12px 20px;padding:0;border-left:1px solid var(--da-rule)}
.aide-som__pages a{display:block;margin-left:-1px;padding:6px 10px 6px 15px;border-left:2px solid transparent;
  border-radius:0 8px 8px 0;font-size:.83rem;line-height:1.4;color:var(--da-ink-faint);text-decoration:none;
  transition:color .2s var(--da-ease),background .2s var(--da-ease)}
.aide-som__pages a:hover{color:var(--da-ink)}
.aide-som__pages a[aria-current]{border-left-color:var(--da-violet);color:var(--da-violet-pale);
  font-weight:600;background:rgba(var(--da-violet-pale-rgb),.08)}
.aide-som__vue{font-style:italic}

/* Téléphone : la recherche, puis le sommaire replié, au-dessus de l'article. */
.aide__mnav{border-top:1px solid var(--da-rule);border-bottom:1px solid var(--da-rule)}
.aide__mnav>summary{cursor:pointer;padding:14px 0;font-family:var(--mono);font-size:.68rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--da-ink-muted);list-style:none}
.aide__mnav>summary::-webkit-details-marker{display:none}
.aide__mnav>nav{padding-bottom:14px}

/* ── La page ──────────────────────────────────────────────── */
.aide__page{min-width:0;max-width:72ch}
.aide__page .kicker a{text-decoration:none}
.aide__page .kicker a:hover{text-decoration:underline}
.aide__page h1{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.05;letter-spacing:-.03em}
.aide__page .lede{margin-top:16px;max-width:52ch;font-size:clamp(1.02rem,1.5vw,1.15rem)}

.aide__mention{display:inline-block;margin:18px 0 0;padding:.35rem .7rem;border-radius:.4rem;
  background:rgba(var(--da-violet-pale-rgb),.1);color:var(--da-violet-pale);font-size:.8rem}

.aide__ancres{margin-top:28px;padding:16px 0;border-top:1px solid var(--da-rule);
  border-bottom:1px solid var(--da-rule)}
.aide__ancres p{margin:0 0 8px;font-family:var(--mono);font-size:.63rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--da-ink-faint)}
.aide__ancres ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.aide__ancres a{font-size:.88rem;color:var(--da-ink-muted);text-decoration:none}
.aide__ancres a:hover{color:var(--da-violet-pale)}

/* Le corps de la page, écrit en Markdown. */
.aide__corps{margin-top:clamp(24px,3vw,36px);color:var(--da-ink-muted);font-size:1.02rem;line-height:1.75}
.aide__corps>*:first-child{margin-top:0}
.aide__corps h2{margin:2.4em 0 .5em;font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.2;
  letter-spacing:-.02em;scroll-margin-top:96px}
.aide__corps h3{margin:1.8em 0 .4em;font-family:var(--sans);font-size:1.05rem;
  color:var(--da-ink-strong);scroll-margin-top:96px}
.aide__corps p,.aide__corps ul,.aide__corps ol,.aide__corps table,.aide__corps blockquote{margin:0 0 1em}
.aide__corps ul,.aide__corps ol{padding-left:1.3em}
.aide__corps li{margin:.3em 0}
.aide__corps li::marker{color:var(--da-ardoise)}
.aide__corps b,.aide__corps strong{color:var(--da-ink-strong);font-weight:600}
.aide__corps a{color:var(--da-violet-pale);text-underline-offset:.18em}
.aide__corps code{font-family:var(--mono);font-size:.86em;color:var(--da-ink)}

/* Captures d'écran : prises en 2×, affichées à leur demi-taille au plus. */
.aide__corps img{display:block;max-width:100%;height:auto;margin:1.4em 0;border-radius:.6rem;
  box-shadow:var(--da-lift)}

/* Touche de clavier : petite pastille en creux, comme dans l'application. */
.aide-kbd{display:inline-block;min-width:1.6em;padding:.05em .45em;border-radius:.32rem;
  background:var(--da-slot);box-shadow:var(--da-hollow);font-family:var(--mono);font-size:.8em;
  line-height:1.6;text-align:center;color:var(--da-ink-strong);white-space:nowrap}

/* Tableaux (raccourcis, formats) : filets seuls. */
.aide__corps table{width:100%;border-collapse:collapse;font-size:.94rem}
.aide__corps th{text-align:left;font-family:var(--mono);font-size:.63rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--da-ink-faint);padding:0 12px 10px 0}
.aide__corps td{padding:9px 12px 9px 0;border-top:1px solid var(--da-rule);vertical-align:top}
.aide__corps td:first-child{white-space:nowrap}

/* Encadrés : un trait de couleur à gauche, le libellé en tête. */
.aide__corps blockquote{padding:14px 18px;border-left:2px solid var(--da-ardoise);
  background:rgba(var(--da-slot-rgb),.55);border-radius:0 .5rem .5rem 0}
.aide__corps blockquote>*:last-child{margin-bottom:0}
.aide-note::before{display:block;margin-bottom:4px;font-family:var(--mono);font-size:.63rem;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.aide__corps .aide-note--astuce{border-left-color:var(--da-violet)}
.aide-note--astuce::before{content:"Astuce";color:var(--da-violet-pale)}
.aide__corps .aide-note--attention{border-left-color:var(--v-ko)}
.aide-note--attention::before{content:"Attention";color:var(--v-ko)}

/* Passage réservé : sur le site rien n'est retiré, on dit pour qui il vaut. */
.aide-si{padding-left:16px;border-left:1px dashed rgba(var(--da-violet-pale-rgb),.4)}
.aide-si[data-mention]::before{content:attr(data-mention);display:block;margin-bottom:4px;
  font-size:.75rem;color:var(--da-violet-pale)}

.aide__maj{margin-top:clamp(40px,5vw,56px);padding-top:20px;border-top:1px solid var(--da-rule);
  color:var(--da-ink-faint);font-size:.85rem}
.aide__maj a{color:var(--da-ink-muted)}

/* Précédent / suivant. */
.aide__voisines{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.aide__voisine{display:block;padding:14px 0;text-decoration:none}
.aide__voisine--suiv{text-align:right}
.aide__voisine-s{display:block;font-family:var(--mono);font-size:.63rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--da-ink-faint)}
.aide__voisine-t{display:block;margin-top:4px;font-weight:600;color:var(--da-ink)}
.aide__voisine:hover .aide__voisine-t{color:var(--da-violet-pale)}