/* ══════════════════════════════════════════════════════════════════════
   EIDION — Centre d'aide
   ----------------------------------------------------------------------
   Se charge APRÈS legal.css, dont il reprend tous les jetons et tous les
   gabarits (hero, cartes, doc-layout, sommaire, pied de navigation).

   Ce fichier ne fait que deux choses :

     1. la recherche du sommaire — champ, résultats, état vide ;
     2. le portage des classes « helpc-* ».

   Ce second point mérite un mot. Les 58 articles viennent du tableau de
   bord, où ils vivaient dans une fenêtre modale avec sa propre palette
   (l'écru, l'anthracite, l'or). Plutôt que de réécrire 72 Ko de HTML pour
   changer des noms de classe, on redéfinit les quinze classes en question
   dans le vocabulaire de la vitrine. Les articles restent copiables d'un
   monde à l'autre, et il n'y a qu'un seul endroit à relire.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Deux alias : les corps d'articles portent encore deux var() du
      tableau de bord. Les déclarer ici évite d'aller les traquer. ─────── */
.doc-content{ --acc: var(--jaune); --t3: var(--gris-2); }


/* ══ 1. LE SOMMAIRE ════════════════════════════════════════════════════ */

/* ── Le champ de recherche ────────────────────────────────────────────
   Posé dans le hero, sous le chapô. Il occupe la largeur d'une ligne de
   texte confortable — pas celle de la page : un champ de 1100 px suggère
   qu'on y écrit un paragraphe. */
.aide-recherche{
  position:relative;display:flex;align-items:center;
  max-width:520px;margin:34px 0 0;
  background:#fff;border:1px solid var(--trait);
  border-radius:100px;box-shadow:var(--om-1);
  transition:border-color var(--pas),box-shadow var(--pas);
}
.aide-recherche:focus-within{border-color:var(--gris-2);box-shadow:var(--om-2)}
.aide-recherche-ico{
  display:flex;align-items:center;justify-content:center;
  width:48px;flex:none;color:var(--gris-2);pointer-events:none;
}
.aide-recherche input{
  flex:1;min-width:0;height:52px;padding:0 8px 0 0;
  border:0;outline:0;background:transparent;
  font-family:inherit;font-size:15.5px;color:var(--encre);
}
.aide-recherche input::placeholder{color:var(--gris-2)}
/* Chrome ajoute sa propre croix : elle ferait doublon avec la nôtre. */
.aide-recherche input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
#aide-effacer{
  width:34px;height:34px;margin-right:9px;flex:none;
  border:0;border-radius:50%;background:transparent;cursor:pointer;
  font-size:20px;line-height:1;color:var(--gris-2);
  transition:background var(--pas),color var(--pas);
}
#aide-effacer:hover{background:var(--sol);color:var(--encre)}

/* ── Les résultats ────────────────────────────────────────────────────
   Ils remplacent la grille des rubriques plutôt que de s'ajouter en
   dessous : une page qui s'allonge pendant qu'on tape est désagréable. */
.aide-resultats{padding:38px 0 0}
.aide-compte{color:var(--gris-2);margin-bottom:16px}
.aide-hits{list-style:none;display:flex;flex-direction:column;gap:2px;max-width:760px}
.aide-hits a{
  display:block;padding:16px 18px;border-radius:var(--r-s);
  text-decoration:none;color:inherit;
  border:1px solid transparent;
  transition:background var(--pas),border-color var(--pas);
}
.aide-hits a:hover,.aide-hits a:focus-visible{
  background:#fff;border-color:var(--trait-2);outline:0;
}
.aide-hit-sec{display:block;color:var(--gris-2);margin-bottom:5px}
.aide-hit-t{display:block;font-size:16px;font-weight:700;letter-spacing:-.014em;line-height:1.3}
.aide-hit-x{display:block;margin-top:5px;font-size:14px;line-height:1.6;color:var(--gris)}
.aide-resultats mark{background:var(--jaune-pale);color:var(--encre);border-radius:2px;padding:0 1px}
.aide-vide{color:var(--gris);max-width:56ch}
.aide-vide a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--jaune);text-underline-offset:3px}

/* ── La grille des rubriques ──────────────────────────────────────────
   Chaque carte liste ses articles en guise de description : c'est plus
   informatif qu'une phrase de présentation, et ça se maintient tout seul. */
#aide-grille{padding:76px 0 0}
#aide-grille .legal-carte p{
  font-size:13.4px;line-height:1.6;color:var(--gris-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.aide-carte-juridique{background:var(--papier-2)}
.aide-carte-juridique p{-webkit-line-clamp:none!important;color:var(--gris)!important}

/* ── Les plus consultés ───────────────────────────────────────────────── */
#aide-populaires{padding:72px 0 0}
.aide-liste{list-style:none;max-width:620px;border-top:1px solid var(--trait-2)}
.aide-liste li{border-bottom:1px solid var(--trait-2)}
.aide-liste a{
  display:flex;align-items:center;gap:12px;padding:15px 4px;
  text-decoration:none;color:var(--encre);
  font-size:15.4px;font-weight:600;letter-spacing:-.01em;
  transition:padding-left var(--pas),color var(--pas);
}
.aide-liste a:hover{padding-left:10px}
.aide-liste-ico{color:var(--gris-2);font-size:13px;transition:color var(--pas)}
.aide-liste a:hover .aide-liste-ico{color:var(--jaune)}

#aide-suite{padding:76px 0 104px}


/* ══ 2. LA PAGE D'ARTICLE ══════════════════════════════════════════════ */

/* Le sommaire latéral liste les articles voisins et non les titres de la
   page : dans une aide, on saute d'un article à l'autre bien plus souvent
   qu'on ne navigue à l'intérieur d'un seul. */
.aide-toc-suite{margin-top:30px}

/* legal.css s'arrête à h3 — les articles d'aide vont jusqu'à h4. */
.doc-content h4{
  font-family:Inter,sans-serif;font-size:15.2px;font-weight:700;
  letter-spacing:-.012em;line-height:1.35;
  margin:34px 0 12px;color:var(--encre);
}
.doc-content h4:first-child{margin-top:0}
.doc-content code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.875em;padding:.14em .42em;border-radius:4px;
  background:var(--sol);color:var(--film-2);
}
.doc-content ol{margin:0 0 20px;padding-left:22px;color:var(--film-2)}
.doc-content ol li{margin-bottom:9px;line-height:1.62;padding-left:2px}
.doc-content ol li::marker{color:var(--gris-2);font-weight:600}


/* ══ 3. PORTAGE DES CLASSES « helpc-* » ════════════════════════════════ */

/* ── Le chapô de l'article ────────────────────────────────────────────── */
.helpc-lead{
  font-size:1.14rem!important;line-height:1.68!important;
  color:var(--gris)!important;max-width:60ch;margin:0 0 26px!important;
}
.helpc-lead b,.helpc-lead strong{color:var(--encre)}

/* ── Les trois encarts ────────────────────────────────────────────────
   Astuce, avertissement, remarque. Ils se distinguent par la couleur du
   filet de gauche et celle du titre, rien de plus : un aplat de couleur
   sur toute la surface attirerait plus l'œil que le texte de l'article. */
.helpc-tip,.helpc-warn,.helpc-note{
  display:flex;gap:13px;align-items:flex-start;
  margin:24px 0;padding:16px 18px;
  border-radius:var(--r-s);border-left:2px solid var(--trait);
  background:var(--papier-2);
}
.helpc-tip{border-left-color:#0E7A55;background:rgba(14,122,85,.045)}
.helpc-warn{border-left-color:var(--jaune);background:rgba(242,178,0,.075)}
.helpc-note{border-left-color:var(--gris-2)}
.helpc-tip-ico{flex:none;font-size:15px;line-height:1.5;opacity:.85}
.helpc-tip>div,.helpc-warn>div,.helpc-note>div{min-width:0}
.helpc-tip>div>b,.helpc-warn>div>b,.helpc-note>div>b{
  display:block;font-size:13.6px;font-weight:700;
  letter-spacing:-.006em;margin-bottom:3px;
}
.helpc-tip>div>b{color:#0A5C41}
.helpc-warn>div>b{color:#8A6600}
.helpc-note>div>b{color:var(--encre)}
.helpc-tip>div>div,.helpc-warn>div>div,.helpc-note>div>div{
  font-size:14.2px;line-height:1.66;color:var(--film-2);
}
.helpc-tip p:last-child,.helpc-warn p:last-child,.helpc-note p:last-child{margin-bottom:0}

/* ── Les listes numérotées de procédure ───────────────────────────────
   Le numéro est un jeton posé dans la marge, pas une puce : on doit
   pouvoir dire « à l'étape 3 » et la trouver du regard. */
.helpc-steps{list-style:none!important;margin:24px 0 28px!important;padding:0!important;counter-reset:e}
.helpc-steps li{
  position:relative;counter-increment:e;
  padding:0 0 20px 44px!important;margin:0!important;
  font-size:15.2px;line-height:1.7;color:var(--film-2);
}
.helpc-steps li:last-child{padding-bottom:0!important}
.helpc-steps li::marker{content:none}
.helpc-steps li::before{
  content:counter(e);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--encre);color:#fff;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
}
.helpc-steps b{color:var(--encre)}

/* ── Les lignes « fonctionnalité » ────────────────────────────────────── */
.helpc-feat{display:flex;gap:14px;align-items:flex-start;margin:0 0 18px}
.helpc-feat-ico{
  width:34px;height:34px;flex:none;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--sol);color:var(--film-2);font-size:15px;
}
.helpc-feat-b{min-width:0}
.helpc-feat-t{font-size:14.6px;font-weight:700;letter-spacing:-.01em;color:var(--encre);margin-bottom:2px}
.helpc-feat-d{font-size:14.2px;line-height:1.62;color:var(--gris)}

/* ── Les pastilles d'état ─────────────────────────────────────────────── */
.helpc-pill{
  display:inline-block;vertical-align:1px;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:100px;
  border:1px solid var(--trait);color:var(--gris);background:transparent;
}
.helpc-pill.g{color:#1E7A3C;border-color:rgba(30,122,60,.42)}
.helpc-pill.o{color:#9C5200;border-color:rgba(156,82,0,.4)}
.helpc-pill.r{color:#B22119;border-color:rgba(178,33,25,.38)}
.helpc-pill.b{color:#15589E;border-color:rgba(21,88,158,.36)}

/* ── Les touches du clavier ───────────────────────────────────────────── */
.helpc-kbd{
  display:inline-block;font-family:inherit;
  font-size:11.6px;font-weight:600;line-height:1.5;
  padding:1px 6px;border-radius:5px;
  background:#fff;border:1px solid var(--trait);
  box-shadow:0 1px 0 var(--trait);color:var(--film-2);
}

/* ── Le bouton d'appel ────────────────────────────────────────────────── */
.helpc-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:100px;
  background:var(--encre);color:#fff!important;
  font-size:14px;font-weight:600;text-decoration:none!important;
  transition:transform var(--pas),box-shadow var(--pas);
}
.helpc-cta:hover{transform:translateY(-1px);box-shadow:var(--om-2)}


/* ══ 4. PETITS ÉCRANS ══════════════════════════════════════════════════ */
@media(max-width:760px){
  .aide-recherche{max-width:100%;margin-top:26px}
  .aide-recherche input{height:48px;font-size:16px}   /* 16px : pas de zoom iOS */
  #aide-grille{padding-top:56px}
  #aide-populaires{padding-top:52px}
  #aide-suite{padding:56px 0 76px}
  .helpc-steps li{padding-left:38px!important;font-size:14.6px}
  .helpc-steps li::before{width:24px;height:24px;font-size:11.5px}
  .aide-hits a{padding:14px 12px}
}

@media(prefers-reduced-motion:reduce){
  .aide-liste a,.helpc-cta,.aide-recherche{transition:none}
  .aide-liste a:hover{padding-left:4px}
  .helpc-cta:hover{transform:none}
}