/* ============================================================================
   ESDI Manager - Centre d'aide : styles partages par les DEUX surfaces
     - le panneau lateral droit (partials/help-drawer.ejs, present sur toute page client)
     - la page pleine /aide (views/aide.ejs), accessible sans compte
   Fichier externe et non <style> inline : le partial de la topbar est inclus sur CHAQUE
   page, un bloc inline y serait retelecharge a chaque navigation.
   Cree hors Wappler IDE -> verifier GET /css/esdi-aide.css = 200 apres un publish.
   ============================================================================ */
/* Le panneau passe au-dessus des toasts (1080/1090) sans aller chercher les couches extrêmes. */
.esdi-aide-voile {
  position: fixed; inset: 0; background: rgba(15, 18, 30, .38);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease;
  z-index: 1200;
}
.esdi-aide-voile.est-ouvert { opacity: 1; visibility: visible; }

.esdi-aide-panneau {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 440px; max-width: 94vw;
  background: var(--bg-card, #fff);
  border-left: 1px solid var(--line, #EAE4DA);
  box-shadow: -16px 0 40px rgba(15, 18, 30, .16);
  transform: translateX(102%);
  transition: transform .22s cubic-bezier(.32, .72, 0, 1);
  z-index: 1201;
  display: flex; flex-direction: column;
  color: var(--ink, #1F2133);
}
.esdi-aide-panneau.est-ouvert { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .esdi-aide-panneau, .esdi-aide-voile { transition: none; }
}

.esdi-aide-entete {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1rem .75rem; border-bottom: 1px solid var(--line, #EAE4DA);
}
.esdi-aide-entete__titre { font-size: 1rem; font-weight: 700; margin: 0; flex: 1 1 auto; }
.esdi-aide-entete__sous { font-size: .74rem; color: var(--ink-faded, #8F92A6); margin: 0; }
.esdi-aide-fermer {
  background: none; border: 0; color: var(--ink-faded, #8F92A6);
  padding: .3rem; border-radius: 8px; line-height: 0; cursor: pointer;
}
.esdi-aide-fermer:hover { color: var(--ink, #1F2133); background: var(--bg-subtle, #F3F0EA); }
.esdi-aide-fermer svg { width: 18px; height: 18px; }

.esdi-aide-recherche-wrap { padding: .7rem 1rem; border-bottom: 1px solid var(--line, #EAE4DA); }
.esdi-aide-recherche {
  width: 100%; font-size: .86rem; padding: .48rem .7rem;
  border: 1px solid var(--line, #EAE4DA); border-radius: 9px;
  background: var(--bg, #FBF8F3); color: inherit;
}
.esdi-aide-recherche:focus { outline: 2px solid var(--primary, #1b5aa8); outline-offset: -1px; }

.esdi-aide-corps { flex: 1 1 auto; overflow-y: auto; padding: 1rem; }

/* ── Checklist de mise en route ── */
.esdi-aide-checklist {
  background: var(--bg-subtle, #F3F0EA); border: 1px solid var(--line, #EAE4DA);
  border-radius: var(--radius-md, 12px); padding: .85rem .9rem; margin-bottom: 1.1rem;
}
.esdi-aide-checklist__titre { font-size: .82rem; font-weight: 700; margin: 0 0 .5rem; }
.esdi-aide-jauge { height: 5px; border-radius: 99px; background: var(--line, #EAE4DA); overflow: hidden; margin-bottom: .7rem; }
.esdi-aide-jauge > span { display: block; height: 100%; background: var(--primary, #1b5aa8); transition: width .3s ease; }
.esdi-aide-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.esdi-aide-etape { display: flex; align-items: flex-start; gap: .55rem; }
.esdi-aide-etape__puce {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; margin-top: .1rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700;
  background: var(--bg-card, #fff); border: 1px solid var(--line, #EAE4DA); color: var(--ink-faded, #8F92A6);
}
.esdi-aide-etape.est-faite .esdi-aide-etape__puce {
  background: var(--success, #2e9e6b); border-color: var(--success, #2e9e6b); color: #fff;
}
.esdi-aide-etape__puce svg { width: 12px; height: 12px; }
.esdi-aide-etape__corps { flex: 1 1 auto; min-width: 0; }
.esdi-aide-etape__titre { display: block; font-size: .8rem; font-weight: 600; }
.esdi-aide-etape.est-faite .esdi-aide-etape__titre { color: var(--ink-faded, #8F92A6); font-weight: 500; }
.esdi-aide-etape__detail { display: block; font-size: .72rem; color: var(--ink-soft, #555870); line-height: 1.35; }
.esdi-aide-etape__actions { flex: 0 0 auto; display: flex; align-items: center; gap: .3rem; }
.esdi-aide-btn {
  font-size: .7rem; padding: .2rem .45rem; border-radius: 7px;
  border: 1px solid transparent; background: none; cursor: pointer; white-space: nowrap;
  text-decoration: none; line-height: 1.4;
}
.esdi-aide-btn--go { background: var(--primary, #1b5aa8); color: #fff; font-weight: 600; }
.esdi-aide-btn--go:hover { filter: brightness(1.08); color: #fff; }
.esdi-aide-btn--lien { color: var(--ink-faded, #8F92A6); text-decoration: underline; }
.esdi-aide-btn--lien:hover { color: var(--primary, #1b5aa8); }

/* ── Listes de guides ── */
.esdi-aide-bloc { margin-bottom: 1.05rem; }
.esdi-aide-bloc__titre {
  font-family: var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .1em;
  font-size: .65rem; font-weight: 700; color: var(--ink-faded, #8F92A6); margin: 0 0 .45rem;
}
.esdi-aide-carte {
  display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left;
  padding: .6rem .7rem; margin-bottom: .35rem; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 10px; color: inherit;
}
.esdi-aide-carte:hover { background: var(--bg-subtle, #F3F0EA); border-color: var(--line, #EAE4DA); }
.esdi-aide-carte__ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-subtle, #F3F0EA); color: var(--primary, #1b5aa8);
}
.esdi-aide-carte:hover .esdi-aide-carte__ic { background: var(--bg-card, #fff); }
.esdi-aide-carte__ic svg { width: 16px; height: 16px; }
.esdi-aide-carte__txt { flex: 1 1 auto; min-width: 0; }
.esdi-aide-carte__titre { display: block; font-size: .83rem; font-weight: 600; }
.esdi-aide-carte__resume { display: block; font-size: .72rem; color: var(--ink-soft, #555870); line-height: 1.35; }
.esdi-aide-carte__groupe {
  display: inline-block; margin-top: .2rem; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-faded, #8F92A6);
}
.esdi-aide-carte__fleche { flex: 0 0 auto; width: 15px; height: 15px; color: var(--ink-faded, #8F92A6); }

.esdi-aide-compte { font-size: .72rem; color: var(--ink-faded, #8F92A6); margin: 0 0 .5rem; }
.esdi-aide-vide { font-size: .82rem; color: var(--ink-soft, #555870); text-align: center; padding: 1.6rem .5rem; }
.esdi-aide-pied {
  font-size: .74rem; color: var(--ink-faded, #8F92A6);
  border-top: 1px solid var(--line, #EAE4DA); padding-top: .8rem; margin-top: .4rem;
}

/* ── Article ── */
.esdi-aide-retour {
  display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0;
  color: var(--ink-faded, #8F92A6); font-size: .74rem; padding: 0 0 .7rem; cursor: pointer;
}
.esdi-aide-retour:hover { color: var(--primary, #1b5aa8); }
.esdi-aide-retour svg { width: 14px; height: 14px; }
.esdi-aide-article__titre { font-size: 1.05rem; font-weight: 700; margin: 0 0 .7rem; }
.esdi-aide-article p, .esdi-aide-article li { font-size: .83rem; line-height: 1.62; color: var(--ink-soft, #555870); }
.esdi-aide-article h4 {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink, #1F2133); margin: 1.15rem 0 .4rem;
}
.esdi-aide-article ol, .esdi-aide-article ul { padding-left: 1.15rem; margin-bottom: .7rem; }
.esdi-aide-article li { margin-bottom: .3rem; }
.esdi-aide-article a { color: var(--primary, #1b5aa8); }
.esdi-aide-article code {
  font-family: var(--font-mono, monospace); font-size: .78em;
  background: var(--bg-subtle, #F3F0EA); padding: .08em .34em; border-radius: 5px;
  color: var(--ink, #1F2133);
}
.esdi-aide-callout {
  background: var(--bg-subtle, #F3F0EA); border-left: 3px solid var(--primary, #1b5aa8);
  border-radius: 0 8px 8px 0; padding: .6rem .75rem; margin: .8rem 0; font-size: .79rem;
}
.esdi-aide-callout--warn { border-left-color: var(--warning, #d98218); }
.esdi-aide-table { width: 100%; border-collapse: collapse; margin: .5rem 0 .9rem; }
.esdi-aide-table td {
  font-size: .78rem; padding: .38rem .5rem; border-bottom: 1px solid var(--line, #EAE4DA);
  color: var(--ink-soft, #555870); vertical-align: top;
}
.esdi-aide-table td:first-child { white-space: nowrap; width: 1%; }

/* Le bouton d'ouverture, dans la topbar. */
.esdi-aide-declencheur {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 1px solid var(--line, #EAE4DA); color: var(--ink-soft, #555870);
  font-size: .78rem; padding: .28rem .6rem; border-radius: var(--radius-pill, 99px); cursor: pointer;
}
.esdi-aide-declencheur:hover { color: var(--primary, #1b5aa8); border-color: var(--primary, #1b5aa8); }
.esdi-aide-declencheur svg { width: 15px; height: 15px; }

/* Le fond ne défile plus quand le panneau est ouvert. */
body.esdi-aide-ouvert { overflow: hidden; }

/* ── Page pleine /aide ──────────────────────────────────────────────────────────────────────
   Reprend la mise en page des pages legales (meme largeur, meme barre du haut) pour qu'un
   visiteur non connecte reste dans un decor qu'il reconnait. Le CORPS est rendu par le meme
   moteur que le panneau : seules les marges changent, jamais le contenu. */
.esdi-aide-pp { color: var(--ink, #1F2133); background: var(--bg, #FBF8F3); min-height: 100vh; }
.esdi-aide-pp__nav {
  border-bottom: 1px solid var(--line, #EAE4DA);
  background: var(--bg-topbar, rgba(251, 248, 243, .9));
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10;
}
.esdi-aide-pp__wrap { max-width: 860px; margin: 0 auto; padding: 0 1.2rem; }
.esdi-aide-pp__retour {
  color: var(--ink-soft, #555870); text-decoration: none; font-size: .9rem;
  display: inline-flex; align-items: center; gap: .4rem;
}
.esdi-aide-pp__retour:hover { color: var(--primary, #1b5aa8); }
.esdi-aide-pp__entete { padding: 2.4rem 0 1.2rem; }
.esdi-aide-pp__eyebrow {
  font-family: var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem; font-weight: 600; color: var(--accent-700, #26737c);
}
.esdi-aide-pp__h1 {
  font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: .4rem 0 .5rem;
}
.esdi-aide-pp__chapo { color: var(--ink-soft, #555870); line-height: 1.7; max-width: 62ch; margin: 0; }
.esdi-aide-pp__chapo a { color: var(--primary, #1b5aa8); }
.esdi-aide-pp__recherche { margin-bottom: 1.6rem; }
.esdi-aide-pp__recherche .esdi-aide-recherche { font-size: .95rem; padding: .65rem .9rem; }
.esdi-aide-pp__corps { padding-bottom: 4rem; }

/* En pleine page, les cartes et les articles respirent davantage que dans le panneau. */
.esdi-aide-pp__corps .esdi-aide-carte { padding: .8rem .9rem; }
.esdi-aide-pp__corps .esdi-aide-carte__titre { font-size: .92rem; }
.esdi-aide-pp__corps .esdi-aide-carte__resume { font-size: .8rem; }
.esdi-aide-pp__corps .esdi-aide-bloc__titre { font-size: .7rem; margin-bottom: .6rem; }
.esdi-aide-pp__corps .esdi-aide-checklist { padding: 1.1rem 1.2rem; margin-bottom: 1.8rem; }
.esdi-aide-pp__corps .esdi-aide-checklist__titre { font-size: .95rem; }
.esdi-aide-pp__corps .esdi-aide-etape__titre { font-size: .88rem; }
.esdi-aide-pp__corps .esdi-aide-etape__detail { font-size: .78rem; }
.esdi-aide-pp__corps .esdi-aide-article__titre { font-size: 1.5rem; }
.esdi-aide-pp__corps .esdi-aide-article p,
.esdi-aide-pp__corps .esdi-aide-article li { font-size: .93rem; }
.esdi-aide-pp__corps .esdi-aide-article h4 { font-size: .82rem; }
.esdi-aide-pp__corps .esdi-aide-callout { font-size: .88rem; padding: .8rem 1rem; }
.esdi-aide-pp__corps .esdi-aide-table td { font-size: .87rem; padding: .5rem .6rem; }

/* Un intertitre qui porte une regle de fonctionnement du produit (« cree par ESDI, sur demande »)
   et non une simple etape : il doit se distinguer des autres a la lecture rapide. */
.esdi-aide-article h4.esdi-aide-h4--fort {
  color: var(--primary, #1b5aa8);
  text-transform: none;
  letter-spacing: 0;
  font-size: .92rem;
  border-top: 1px solid var(--line, #EAE4DA);
  padding-top: .9rem;
}
.esdi-aide-pp__corps .esdi-aide-article h4.esdi-aide-h4--fort { font-size: 1.02rem; }