/* ============================================================
   LA BARRE D'OUTILS DE « PRÉPARER MON DOSSIER » — L'ACCORDÉON DU TÉLÉPHONE
   ------------------------------------------------------------
   Ordre d'Alex du 03/09/2026 (« construis la B ») : sur téléphone, les quatre
   familles d'outils se présentent FERMÉES, en rangées ; on ouvre celle qui
   parle, et une seule à la fois (accordéon strict, comme le menu de /gestion).
   Deux gestes pour entrer dans un outil, mais tout l'inventaire tient dans un
   écran : 797 px de liste avant, moins de 450 après.

   Sur ORDINATEUR rien ne change : les quatre colonnes restent dépliées et les
   titres restent des étiquettes. Icône, compte et chevron n'existent qu'au
   téléphone — c'est cette feuille qui décide où commence le téléphone (767 px,
   le même palier que le bouton de repli .fus-plier), et js/barre-outils.js la
   suit en lisant le style CALCULÉ, jamais la largeur de la fenêtre.

   Tout est rangé sous .fus-accordeon, une classe que le script pose à son
   démarrage : sans script, la liste reste entièrement visible, comme avant.

   Partagée par check-list.html ET en/check-list.html, chargée APRÈS le
   <style> de chaque page : à égalité de spécificité, c'est elle qui gagne.
   ============================================================ */

/* Ordinateur : les trois ornements n'existent pas. */
.fus-groupe-titre .fam-ico,
.fus-groupe-titre .fam-nb,
.fus-groupe-titre .fam-chevron { display: none; }

@media (max-width: 767px) {
  /* align-items: stretch — la règle de base de la page dit « start » (utile
     en colonnes sur ordinateur) et laissait chaque rangée à la largeur de son
     contenu : quatre boîtes de largeurs différentes. Ici, toutes pleine largeur. */
  .fus-accordeon.ouverte .fus-groupes { gap: 8px; align-items: stretch; }
  .fus-accordeon .fus-groupe { width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }

  /* La rangée d'une famille : icône, nom, nombre d'outils, chevron. */
  .fus-accordeon .fus-groupe-titre { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0;
    padding: 9px 14px 9px 9px; min-height: 52px; text-align: left; text-transform: none; letter-spacing: 0;
    font-size: 1rem; font-weight: 600; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .fus-accordeon .fus-groupe-titre:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; border-radius: 14px; }
  .fus-accordeon .fus-groupe-titre .fam-ico { display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 50%; background: var(--blush); color: var(--red-dark); }
  .fus-accordeon .fus-groupe-titre .fam-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .fus-accordeon .fus-groupe-titre .fam-nom { flex: 1 1 auto; min-width: 0; }
  .fus-accordeon .fus-groupe-titre .fam-nb { display: inline-block; min-width: 26px; padding: 2px 8px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--line); color: var(--muted);
    font-family: Inter, sans-serif; font-size: var(--fs-xs); font-weight: 600; text-align: center; }
  .fus-accordeon .fus-groupe-titre .fam-nb:empty { display: none; }
  .fus-accordeon .fus-groupe-titre .fam-chevron { display: block; width: 16px; height: 16px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    color: var(--muted); transition: transform .18s ease; }
  .fus-accordeon .fus-groupe.deplie .fus-groupe-titre { color: var(--red-dark); }
  .fus-accordeon .fus-groupe.deplie .fus-groupe-titre .fam-chevron { transform: rotate(180deg); color: var(--red-dark); }

  /* Les outils d'une famille fermée n'existent pas à l'écran ; ceux de la
     famille ouverte se rangent sous sa rangée, légèrement en retrait. */
  .fus-accordeon .fus-groupe-onglets { display: none; }
  .fus-accordeon .fus-groupe.deplie .fus-groupe-onglets { display: flex; padding: 0 10px 10px; }

  @media (prefers-reduced-motion: reduce) { .fus-accordeon .fus-groupe-titre .fam-chevron { transition: none; } }
}