/* Elevora CRM — Paramètres (28/09/2026, js/53-parametres.js).
   Retour de Célian : les intitulés de catégorie posés en petites capitales à côté des onglets se
   confondaient avec eux et donnaient envie de cliquer. L'accueil des Paramètres présente désormais
   les grandes catégories l'une sous l'autre, au milieu de l'écran ; une catégorie ouverte montre
   un « Retour aux Paramètres », le fil d'Ariane et, seulement si elle en a plusieurs, les onglets de
   SES sous-pages (.param-onglets, css/elevora.css).
   Une seule liste encadrée, des lignes séparées par un filet, comme les réglages d'un système :
   pas une carte par catégorie, pas d'ombre, pas de pastille. Couleurs en jetons, deux thèmes. */

/* ── L'accueil ── */
/* [V18] 05/10/2026 (§11) : l'accueil était une colonne centrée de 600 px ; les grandes catégories remplissent
   maintenant la largeur, en grille (autant de colonnes que la largeur en permet), en haut de la page. */
.param-accueil{display:flex;flex-direction:column;padding:0 0 2rem}
.param-entrees{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:var(--s3,12px)}
.param-entrees>li{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);overflow:hidden}
.param-entree{height:100%}
.param-entree{display:flex;align-items:center;gap:16px;min-height:80px;padding:16px 20px;color:var(--text);text-decoration:none}
.param-entree:hover{background:var(--bg3)}
.param-entree:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:var(--rl)}
.param-entree-ic{flex:0 0 auto;display:inline-flex;color:var(--accent)}
.param-entree-texte{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.param-entree-nom{font:600 16.5px/1.3 var(--font-display);color:var(--text)}
.param-entree-d{font-size:13px;line-height:1.45;color:var(--text2)}
.param-entree-fl{flex:0 0 auto;display:inline-flex;color:var(--text3)}
.param-entree:hover .param-entree-fl{color:var(--text)}

/* ── En tête d'une sous-page : retour, puis fil d'Ariane ── */
.param-tete{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:0 0 14px}
.param-retour{min-height:36px;font-size:13px}
.param-retour svg{flex-shrink:0}
.param-fil ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:13px;color:var(--text2)}
.param-fil li{display:inline-flex;align-items:center}
/* Le séparateur est décoratif : texte de remplacement vide pour la synthèse vocale. */
.param-fil li+li::before{content:"›";content:"›"/"";margin:0 8px;color:var(--text3)}
.param-fil a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;min-height:24px;display:inline-flex;align-items:center}
.param-fil a:hover{color:var(--text)}
.param-fil [aria-current="page"]{color:var(--text);font-weight:600}
.param-fil [aria-current="page"]:focus{outline:none}
.param-fil [aria-current="page"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

@media (max-width:768px){
  /* [V18] 05/10/2026 : l'accueil part du haut de la page, comme sur ordinateur (§11). */
  .param-accueil{padding:.25rem 0 1rem}
  .param-entree{gap:12px;min-height:72px;padding:14px 14px}
  .param-entree-nom{font-size:15.5px}
  .param-tete{gap:8px}
}