/* ================================================================
   STYLES-GLOSSAIRE.CSS — Page glossaire uniquement.
   100 % tokens de styles-base.css → suit clair/sombre.
   Chargé APRÈS styles-base.css. Ne touche à aucun autre fichier.
================================================================ */

/* Conteneur (non défini dans styles-base) */
.container {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}
.subtitle { color: var(--text-secondary); margin-top: 4px; }

/* Encadré source (echo de warning-box, autonome) */
.source-note {
    background: var(--accent-soft);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-top: 18px;
    font-size: 0.92em;
}

/* --- Barre outils (NON sticky : règle iOS) --- */
.glossaire-toolbar { margin: 22px 0 8px; }
/* Index groupé par thème. Les cinq intitulés reprennent à l'identique les
   <h2> des sections (contrôle C12) : le groupe et la section vers laquelle il
   pointe se reconnaissent au premier coup d'oeil. Aucun groupe n'est repliable
   — Safari ignore le contenu d'un <details> fermé lors d'une recherche dans
   la page, ce qui supprimerait le dernier chemin de recherche du visiteur. */
.glossaire-index > h2 { margin:0 0 12px; font-size:0.8em; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-text); }
.index-group { margin-top:20px; }
.index-group:first-of-type { margin-top:0; }
.index-group[hidden] { display:none; }
.index-group > h3 { display:flex; align-items:baseline; gap:10px; margin:0 0 10px; font-size:1em; font-weight:700; color:var(--text-primary); }
.index-list { display:flex; flex-wrap:wrap; gap:8px; }
.term-link {
    font-family:inherit; font-size:0.94em; text-decoration:none; color:var(--text-primary);
    background:var(--bg-surface-subtle); border:1px solid var(--border-subtle);
    border-radius:var(--radius-pill); padding:9px 14px; min-height:40px;
    display:inline-flex; align-items:center;
}
/* Pastilles = boutons, pas des liens de texte : on neutralise le soulignement
   de a:hover (styles-base). Le survol reste signalé par fond + bordure. */
.term-link:hover { background:var(--accent-soft); border-color:var(--accent); text-decoration:none; }
.term-link:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.term-link[hidden] { display:none; }
.fiche:target { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }

.glossaire-filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; align-items:center; }
.glossaire-filters .flabel { font-size:0.85em; color:var(--text-primary); }
.chip {
    font-family:inherit; font-size:0.9em; color:var(--text-secondary);
    background:var(--bg-surface-subtle); border:1px solid var(--border-subtle);
    border-radius:var(--radius-pill); padding:8px 14px; min-height:40px; cursor:pointer;
}
.chip[aria-pressed="true"] { color:var(--text-on-accent); background:var(--accent); border-color:var(--accent); font-weight:700; }
.chip:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.glossaire-count { margin-top:12px; font-size:0.88em; color:var(--accent-text); }

/* --- Sections thème --- */
.theme-section { margin-top:40px; scroll-margin-top:16px; }

/* Cible d'ancre du sommaire (RGAA 13.10).
   focus-management.js pose tabindex="-1" + .focus() sur la cible : utile au
   clavier (l'anneau dit où l'on est), mais au tap iOS Safari applique quand
   même :focus-visible et encadre TOUTE la section. On neutralise l'anneau
   uniquement hors navigation clavier : la classe .using-keyboard est posée au
   Tab et retirée au touchstart/mousedown par focus-management.js.
   → l'indicateur de focus clavier reste intact. */
body:not(.using-keyboard) .theme-section:focus,
body:not(.using-keyboard) .fiche:focus { outline:none; }
.theme-section > h2 { color:var(--text-primary); font-size:1.3em; margin:0 0 4px; display:flex; align-items:baseline; gap:10px; }
.theme-num { font-size:0.72em; font-weight:700; letter-spacing:0.05em; color:var(--text-on-accent); background:var(--accent); border-radius:var(--radius-sm); padding:2px 8px; }
.theme-sub { margin:0 0 8px; font-size:0.92em; color:var(--text-secondary); }
.theme-todo { font-size:0.9em; color:var(--text-secondary); font-style:italic; }

/* --- Fiche (hérite de .glass-card) --- */
.fiche { padding:20px; margin:14px 0; scroll-margin-top:16px; }
.fiche-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.fiche-term { color:var(--text-primary); font-size:1.4em; font-weight:700; margin:0; }
.nature { font-size:0.82em; color:var(--accent-text); font-style:italic; }
.mention-note { width:100%; margin-top:2px; font-size:0.8em; color:var(--text-secondary); }
.definition { margin:12px 0 0; color:var(--text-secondary); }
.exemple {
    margin:12px 0 0; padding:10px 14px; border-left:3px solid var(--accent);
    background:var(--accent-soft); border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:0.96em;
}
.exemple .ex-label { display:block; font-size:0.72em; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-text); margin-bottom:2px; }

.block { margin-top:18px; }
.block > h4 { font-size:0.76em; letter-spacing:0.07em; text-transform:uppercase; color:var(--accent-text); margin:0 0 8px; font-weight:700; }

/* Relations : texte + schéma */
.rel-text { margin:0; padding:0; list-style:none; }
.rel-text li { margin:4px 0; padding-left:1.3em; position:relative; }
.rel-text li::before { content:"→"; position:absolute; left:0; color:var(--accent); }
.rel-text li.distinct::before { content:"≠"; }
.rel-text li.neq::before { content:"≠"; }
.rel-svg { width:100%; height:auto; margin-top:10px; display:block; max-width:420px; }
.rel-svg .node { fill:var(--bg-surface-subtle); stroke:var(--glass-border-side); stroke-width:1.5; }
.rel-svg .node-hero { fill:var(--accent-soft); stroke:var(--accent); stroke-width:2; }
.rel-svg text { fill:var(--text-primary); font-family:inherit; font-size:13px; }
.rel-svg .edge { stroke:var(--accent); stroke-width:1.6; fill:none; }
.rel-svg .edge-label { fill:var(--accent-text); font-size:11px; font-style:italic; }
.rel-svg .rel-arrow { fill:var(--accent); }

/* Bloc règle */
.rule-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rule-cell { padding:12px; border-radius:var(--radius-md); border:1px solid var(--border-subtle); background:var(--bg-surface-subtle); font-size:0.92em; }
.rule-cell b { display:block; color:var(--text-primary); margin-bottom:3px; }
.rule-cell.nat { border-left:3px solid var(--accent); }
.rule-cell.eu  { border-left:3px solid var(--state-success); }
.rule-commun { margin-top:8px; }
@media (max-width:520px){ .rule-grid{ grid-template-columns:1fr; } }

/* Collocations */
.colloc { display:flex; flex-wrap:wrap; gap:8px; }
.colloc-btn {
    font-family:inherit; font-size:0.9em; color:var(--text-primary);
    background:var(--bg-surface-subtle); border:1px solid var(--border-subtle);
    border-radius:var(--radius-md); padding:8px 12px; min-height:40px; cursor:pointer;
    display:inline-flex; align-items:center; gap:8px;
}
.colloc-btn[aria-expanded="true"] { border-color:var(--accent); background:var(--accent-soft); }
.colloc-btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.colloc-panel { margin-top:8px; padding:10px 14px; border-radius:var(--radius-md); background:var(--bg-surface-subtle); border:1px solid var(--border-subtle); font-size:0.94em; }
.colloc-panel[hidden] { display:none; }
.colloc-panel .verb { color:var(--accent-text); }

/* Bon à savoir + parcours (phase 2) */
.phase2 { border:1px dashed var(--border-default); border-radius:var(--radius-md); padding:14px 16px; background:var(--bg-surface-subtle); }
.p2-badge { display:inline-block; font-size:0.72em; font-weight:700; letter-spacing:0.05em; color:var(--accent-text); border:1px solid var(--border-default); border-radius:var(--radius-pill); padding:2px 10px; margin-bottom:8px; }
.parcours-steps { margin:0; padding:0; list-style:none; counter-reset:step; }
.parcours-steps li { position:relative; padding:6px 0 6px 34px; }
.parcours-steps li::before {
    counter-increment:step; content:counter(step);
    position:absolute; left:0; top:6px; width:24px; height:24px;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent); color:var(--text-on-accent); font-weight:700; font-size:0.8em; border-radius:50%;
}
.parcours-steps .voc { color:var(--accent-text); font-size:0.9em; }

.voir-aussi { margin-top:16px; font-size:0.9em; }
.voir-aussi a { color:var(--accent-text); }

/* Retour à l'index. Empilé 54 px au-dessus du bouton de thème
   (.theme-toggle, styles-base.css) : même colonne, même gabarit de 44 px.
   La classe .top-btn n'apporte ici aucun style — elle n'est présente que
   comme marqueur reconnu par focus-management.js (isTopButton), qui gère
   déjà le retour du focus. Tout le visuel vient de .nav-index. */
.nav-index {
    position:fixed;
    bottom:calc(max(20px, 16px + env(safe-area-inset-bottom)) + 54px);
    right:16px;
    z-index:999;
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0;
    border-radius:var(--radius-pill);
    border:1px solid var(--border-default);
    background:var(--bg-bar);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:var(--text-primary);
    text-decoration:none;
    transition:background 0.2s, border-color 0.2s, transform 0.15s;
}
.nav-index:hover { background:var(--bg-surface-strong); border-color:var(--accent); text-decoration:none; transform:scale(1.08); }
.nav-index:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.glossaire-empty { padding:24px; text-align:center; color:var(--text-secondary); background:var(--bg-surface-subtle); border:1px dashed var(--border-subtle); border-radius:var(--radius-lg); }
.glossaire-empty[hidden] { display:none; }

@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }