/* Centre « Besoin d'aide ? » (aide.js) : recherche, rubriques, articles repliés, problèmes fréquents ; bouton « ? » des barres du haut */
.aide{display:flex;flex-direction:column;gap:var(--esp-3);max-width:1180px}

/* Grande barre de recherche */
.aide-cherche{position:relative;display:flex;align-items:center}
.aide-cherche>svg{position:absolute;left:14px;color:var(--muted);pointer-events:none}
.aide-cherche input{width:100%;height:46px;padding:0 14px 0 42px;border:1.5px solid var(--line);border-radius:var(--r-carte);background:var(--panel);color:var(--ink);font:inherit;font-size:1rem;box-shadow:var(--shadow)}
.aide-cherche input:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px color-mix(in srgb,var(--copper) 22%,transparent)}
.aide-cherche input::placeholder{color:var(--muted)}

/* Raccourcis vers les rubriques */
.aide-puces{display:flex;flex-wrap:wrap;gap:6px}
.aide-puce{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:inherit;font-size:var(--t-petit);font-weight:var(--g-fort);cursor:pointer}
.aide-puce svg{color:var(--copper)}
.aide-puce:hover{border-color:var(--copper);background:var(--copper-soft)}
.aide-puce.pb svg{color:var(--bad)}

/* Rubriques : deux colonnes sur grand écran */
.aide-rubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-3);align-items:start}
.aide .panel{padding:12px 14px;scroll-margin-top:calc(var(--haut-barre,56px) + 12px)}
.aide .panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.aide .panel-h h2{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--t-carte)}
.aide .panel-h h2 svg{color:var(--copper);flex:none}
.aide-autres{margin:4px 0 0;font-size:var(--t-carte)}
.aide-ici{border-left:3px solid var(--copper)}
.aide-flash{animation:aideFlash 1.2s ease}
@keyframes aideFlash{0%,40%{box-shadow:0 0 0 3px color-mix(in srgb,var(--copper) 45%,transparent)}100%{box-shadow:var(--shadow)}}

/* Un article : titre cliquable, puis étapes numérotées */
.aide-liste{display:flex;flex-direction:column}
.aide-liste.deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--esp-4);align-items:start}
.aide-art{border-top:1px solid var(--line)}
.aide-liste>.aide-art:first-child,.aide-liste.deux>.aide-art:nth-child(2){border-top:0}
.aide-art>summary{display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 2px;cursor:pointer;list-style:none;font-size:var(--t-texte);font-weight:500;color:var(--ink)}
.aide-art>summary::-webkit-details-marker{display:none}
.aide-art>summary:hover .aide-t{color:var(--copper)}
.aide-art>summary:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:6px}
.aide-fl{display:inline-flex;flex:none;color:var(--muted);transform:rotate(-90deg);transition:transform .15s ease}
.aide-art[open]>summary .aide-fl{transform:none;color:var(--copper)}
.aide-art[open]>summary{font-weight:var(--g-fort)}
.aide-t{flex:1;min-width:0}
.aide-tag{flex:none;padding:1px 8px;border-radius:999px;background:var(--panel2);color:var(--muted);font-size:var(--t-etiq);font-weight:var(--g-fort);white-space:nowrap}
.aide-art.pb>summary .aide-fl{color:var(--bad)}
.aide-corps{padding:2px 0 12px 24px}
.aide-etiq{margin:2px 0 6px;color:var(--muted);font-size:var(--t-etiq);font-weight:var(--g-fort);letter-spacing:.06em;text-transform:uppercase}
.aide-etapes{list-style:none;counter-reset:etape;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.aide-etapes li{counter-increment:etape;position:relative;padding-left:32px;line-height:1.5;font-size:var(--t-texte)}
.aide-etapes li::before{content:counter(etape);position:absolute;left:0;top:0;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--copper);color:var(--copper-ink);font-size:.75rem;font-weight:700;line-height:1}
.aide-art.pb .aide-etapes li::before{background:var(--ink);color:var(--panel)}
.aide-astuces{margin-top:10px;padding:8px 12px;border-radius:var(--r-btn);background:var(--copper-soft)}
.aide-astuces ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.aide-astuces li{line-height:1.45;font-size:var(--t-petit)}
.aide-corps b{font-weight:var(--g-fort)}
.aide mark{background:color-mix(in srgb,var(--copper) 30%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.aide-aller{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:0;border:0;background:none;color:var(--copper);font:inherit;font-size:var(--t-petit);font-weight:var(--g-fort);cursor:pointer}
.aide-aller:hover{text-decoration:underline}

/* Résultats de recherche */
.aide-nb{padding:0 2px}
.aide-rien b{display:block;margin-bottom:4px}
.aide-rien p{margin:0 0 10px}

/* Contact en bas */
.aide-contact{display:flex;align-items:center;gap:12px}
.aide-contact>svg{flex:none;color:var(--copper)}
.aide-contact div{display:flex;flex-direction:column;gap:2px;font-size:var(--t-texte)}
.aide-contact a{color:var(--copper);font-weight:var(--g-fort);word-break:break-all}

/* Petite fenêtre d'aide de la caisse */
.aide-fen{max-height:min(62vh,560px);overflow:auto;gap:10px}
.aide-fen .aide-corps{padding-left:22px}

/* Bouton « ? » de la barre du haut et de la caisse */
.topbar .btn-aide{gap:6px}
.pos .pos-top .pos-aide{flex:none}

@media (max-width:1023px){
  .aide-rubs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .aide-liste.deux{grid-template-columns:minmax(0,1fr)}
  .aide-liste.deux>.aide-art:nth-child(2){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .aide{gap:10px}
  .aide-cherche input{height:48px;font-size:16px} /* 16 px : l'iPhone ne zoome pas en touchant la case */
  .aide-puces{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:0 2px 2px}
  .aide-puces::-webkit-scrollbar{display:none}
  .aide-puce{flex:none;height:36px}
  .aide .panel{padding:10px 12px}
  .aide-art>summary{min-height:44px}
  .aide-corps{padding-left:4px}
  .aide-etapes li{font-size:.92rem}
  .aide-contact{align-items:flex-start}
  .aide-tag{display:none}
}
/* Z Fold fermé, petits téléphones : la barre du haut garde sa place ; « ? » de la caisse un peu plus étroit */
@media (max-width:400px){
  .topbar .btn-aide{min-width:36px!important;padding:0 6px!important}
  .pos .pos-top .tb.pos-aide{width:34px}
}
/* Z Fold fermé : pas de place dans la barre de la caisse (le nom du client passe avant) ; l'aide reste dans la barre du haut des pages */
@media (max-width:360px){
  .pos .pos-top .tb.pos-aide{display:none}
}
/* Espacement entre les blocs sous la recherche (puces, « Sur cette page », rubriques, problèmes, contact) */
#aideResultats{display:flex;flex-direction:column;gap:var(--esp-4)}
.aide{gap:var(--esp-4)}
.aide .panel{padding:14px 16px}
.aide .panel-h{margin-bottom:8px}
.aide-art>summary{min-height:40px;padding:8px 2px}
/* Rubriques en lignes dépliantes (une ligne par rubrique, puis ses explications) */
.aide-rubls{padding:0!important;overflow:hidden}
.aide-rubl+.aide-rubl{border-top:1px solid var(--line)}
.aide-rubl>summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;cursor:pointer;list-style:none}
.aide-rubl>summary::-webkit-details-marker{display:none}
.aide-rubl>summary:hover{background:var(--panel2)}
.aide-rubl>summary:focus-visible{outline:2px solid var(--copper);outline-offset:-2px}
.aide-rubl-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--copper-soft);color:var(--copper);flex:none}
.aide-rubl.pb .aide-rubl-ic{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
.aide-rubl-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.aide-rubl-t b{font-size:var(--t-carte)}
.aide-rubl-t .xs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aide-rubl-n{font-size:var(--t-petit);color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:1px 9px;flex:none}
.aide-rubl[open]>summary{background:var(--panel2)}
.aide-rubl[open]>summary .aide-fl{transform:none;color:var(--copper)}
.aide-rubl-corps{padding:4px 16px 12px 62px}
@media (max-width:640px){.aide-rubl>summary{padding:10px 12px;gap:10px}.aide-rubl-corps{padding:4px 12px 12px}}