/* Appli élèves et parents : styles des composants de suivi (collection des compétences, radar,
   liste à revoir). Quatrième piste, « l'arène » (conception.html §4) : le jeu est dans la forme,
   la typo et les paliers, le texte reste du texte. Panneaux à coins coupés (chanfrein 8 px sur
   deux angles opposés), bordure fine, deux accents (cyan pour l'actif, orange pour l'attention),
   l'or au palier le plus haut avant le prisme. Paliers de rareté sur les sujets : gris (Nouveau),
   bronze (En chantier, À consolider), argent (Ça avance), or (Je sais faire), prisme (Solide).
   Titres Barlow Condensed (repli Outfit), chiffres Rajdhani (repli JetBrains Mono), texte Inter.
   Jetons --af-* d'app.css avec repli sombre et clair (fond anthracite bleuté, jamais du noir pur
   ni du blanc pur). Aucune ombre, prefers-reduced-motion respecté, 390 px sans débordement. */

@property --af-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.af-suivi {
  --afs-fond: var(--af-fond, #DCE1E9);
  --afs-panneau: var(--af-panneau, #F8FAFC);
  --afs-carte: var(--af-carte, #FDFDFE);
  --afs-saillant: var(--af-saillant, #F9FAFC);
  --afs-creux: var(--af-creux, #E3E8EF);
  --afs-segment-vide: var(--af-segment-vide, #7E8A9C);
  --afs-encre: var(--af-encre, #161B26);
  --afs-encre-2: var(--af-encre-2, #3F4A5A);
  --afs-encre-3: var(--af-encre-3, #55617A);
  --afs-ligne: var(--af-ligne, #6F7A8B);
  --afs-ligne-2: var(--af-ligne-2, #7E8A9C);
  --afs-accent: var(--af-accent, #0E7C99);
  --afs-accent-texte: var(--af-accent-texte, #0A5F6E);
  --afs-accent-doux: var(--af-accent-doux, rgba(14, 124, 153, .25));
  --afs-alerte: var(--af-alerte, #C2410C);
  --afs-alerte-texte: var(--af-alerte-texte, #8A3404);
  --afs-alerte-doux: var(--af-alerte-doux, rgba(194, 65, 12, .25));
  --afs-teal: var(--af-teal, #0FA396);
  --afs-teal-texte: var(--af-teal-texte, #085E56);
  --afs-teal-doux: var(--af-teal-doux, rgba(15, 163, 150, .25));
  --afs-corail: var(--af-corail, #E2604F);
  --afs-corail-texte: var(--af-corail-texte, #8E2C21);
  --afs-corail-doux: var(--af-corail-doux, rgba(226, 96, 79, .25));
  --afs-violet: var(--af-violet, #6D5AE0);
  --afs-violet-texte: var(--af-violet-texte, #3F32A0);
  --afs-violet-doux: var(--af-violet-doux, rgba(109, 90, 224, .25));
  --afs-soleil: var(--af-soleil, #C9982A);
  --afs-soleil-texte: var(--af-soleil-texte, #6B4E06);
  --afs-soleil-doux: var(--af-soleil-doux, rgba(201, 152, 42, .25));
  --afs-or: var(--af-or, #D4A017);
  --afs-or-texte: var(--af-or-texte, #8F6B0A);
  --afs-or-doux: var(--af-or-doux, rgba(212, 160, 23, .25));
  --afs-orange: var(--af-orange, #C2410C);
  --afs-gris-doux: var(--af-gris-doux, rgba(107, 114, 128, .25));
  --afs-gris-texte: var(--af-gris-texte, #353E4B);
  /* paliers : la couleur du cadre (jeton d'app.css avec repli), puis le fond et le texte de
     l'étiquette, explicites et sans repli vers app.css : le couple est vérifié par le test */
  --afs-palier-gris: var(--af-palier-gris, #6B7484);
  --afs-palier-gris-etiquette-fond: #4B5361;
  --afs-palier-gris-etiquette-texte: #F1F3F7;
  --afs-palier-bronze: var(--af-palier-bronze, #B87333);
  --afs-palier-bronze-etiquette-fond: #7F4818;
  --afs-palier-bronze-etiquette-texte: #FFF4E8;
  --afs-palier-argent: var(--af-palier-argent, #6F7A8B);
  --afs-palier-argent-etiquette-fond: #C0C7D1;
  --afs-palier-argent-etiquette-texte: #1B2230;
  --afs-palier-or: var(--af-palier-or, #A07708);
  --afs-palier-or-etiquette-fond: #F2C14E;
  --afs-palier-or-etiquette-texte: #2A1F00;
  --afs-palier-prisme-a: var(--af-palier-prisme-a, #06B6D4);
  --afs-palier-prisme-b: var(--af-palier-prisme-b, #7C3AED);
  --afs-palier-prisme-c: var(--af-palier-prisme-c, #F2C14E);
  --afs-palier-prisme-etiquette-fond: #2E1065;
  --afs-palier-prisme-etiquette-texte: #FFFFFF;
  --afs-titre: var(--af-police-titre, "Barlow Condensed", "Outfit", "Inter", "Segoe UI", system-ui, sans-serif);
  --afs-texte: var(--af-police-texte, "Inter", "Nunito", "Segoe UI", system-ui, sans-serif);
  --afs-chiffres: var(--af-police-chiffres, "Rajdhani", "JetBrains Mono", "Cascadia Mono", Consolas, monospace);
  --afs-duree: .2s;
  --afs-chanfrein: 8px;
  color: var(--afs-encre);
  font-family: var(--afs-texte);
  font-size: 15px;
  line-height: 1.5;
  max-width: 100%;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
.af-suivi *, .af-suivi *::before, .af-suivi *::after { box-sizing: inherit; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .af-suivi {
    --afs-fond: var(--af-fond, #0F131B);
    --afs-panneau: var(--af-panneau, #2C3549);
    --afs-carte: var(--af-carte, #1F2637);
    --afs-saillant: var(--af-saillant, #2C3549);
    --afs-creux: var(--af-creux, #3A4459);
    --afs-segment-vide: var(--af-segment-vide, #7D8A9E);
    --afs-encre: var(--af-encre, #E6E9EF);
    --afs-encre-2: var(--af-encre-2, #B4BCC8);
    --afs-encre-3: var(--af-encre-3, #98A2B0);
    --afs-ligne: var(--af-ligne, #8593A7);
    --afs-ligne-2: var(--af-ligne-2, #8593A7);
    --afs-accent: var(--af-accent, #22D3EE);
    --afs-accent-texte: var(--af-accent-texte, #5CE1F5);
    --afs-accent-doux: var(--af-accent-doux, rgba(34, 211, 238, .18));
    --afs-alerte: var(--af-alerte, #F97316);
    --afs-alerte-texte: var(--af-alerte-texte, #FDA56B);
    --afs-alerte-doux: var(--af-alerte-doux, rgba(249, 115, 22, .18));
    --afs-teal: var(--af-teal, #19C2B0);
    --afs-teal-texte: var(--af-teal-texte, #3FDCCB);
    --afs-teal-doux: var(--af-teal-doux, rgba(25, 194, 176, .18));
    --afs-corail: var(--af-corail, #E8705F);
    --afs-corail-texte: var(--af-corail-texte, #F49A8D);
    --afs-corail-doux: var(--af-corail-doux, rgba(232, 112, 95, .18));
    --afs-violet: var(--af-violet, #8B7CF6);
    --afs-violet-texte: var(--af-violet-texte, #B5ACFA);
    --afs-violet-doux: var(--af-violet-doux, rgba(139, 124, 246, .18));
    --afs-soleil: var(--af-soleil, #D6AE4A);
    --afs-soleil-texte: var(--af-soleil-texte, #E6C778);
    --afs-soleil-doux: var(--af-soleil-doux, rgba(214, 174, 74, .18));
    --afs-or: var(--af-or, #F2C14E);
    --afs-or-texte: var(--af-or-texte, #F2C14E);
    --afs-or-doux: var(--af-or-doux, rgba(242, 193, 78, .18));
    --afs-orange: var(--af-orange, #F97316);
    --afs-gris-doux: var(--af-gris-doux, rgba(160, 167, 178, .18));
    --afs-gris-texte: var(--af-gris-texte, #B8C0CC);
    --afs-palier-gris: var(--af-palier-gris, #8A93A3);
    --afs-palier-gris-etiquette-fond: #4B5361;
    --afs-palier-gris-etiquette-texte: #F1F3F7;
    --afs-palier-bronze: var(--af-palier-bronze, #B87333);
    --afs-palier-bronze-etiquette-fond: #7F4818;
    --afs-palier-bronze-etiquette-texte: #FFF4E8;
    --afs-palier-argent: var(--af-palier-argent, #C0C7D1);
    --afs-palier-argent-etiquette-fond: #C0C7D1;
    --afs-palier-argent-etiquette-texte: #1B2230;
    --afs-palier-or: var(--af-palier-or, #F2C14E);
    --afs-palier-or-etiquette-fond: #F2C14E;
    --afs-palier-or-etiquette-texte: #2A1F00;
    --afs-palier-prisme-a: var(--af-palier-prisme-a, #22D3EE);
    --afs-palier-prisme-b: var(--af-palier-prisme-b, #A78BFA);
    --afs-palier-prisme-c: var(--af-palier-prisme-c, #F2C14E);
    --afs-palier-prisme-etiquette-fond: #2E1065;
    --afs-palier-prisme-etiquette-texte: #FFFFFF;
  }
}
:root[data-theme="dark"] .af-suivi {
  --afs-fond: var(--af-fond, #0F131B);
  --afs-panneau: var(--af-panneau, #2C3549);
  --afs-carte: var(--af-carte, #1F2637);
  --afs-saillant: var(--af-saillant, #2C3549);
  --afs-creux: var(--af-creux, #3A4459);
  --afs-segment-vide: var(--af-segment-vide, #7D8A9E);
  --afs-encre: var(--af-encre, #E6E9EF);
  --afs-encre-2: var(--af-encre-2, #B4BCC8);
  --afs-encre-3: var(--af-encre-3, #98A2B0);
  --afs-ligne: var(--af-ligne, #8593A7);
  --afs-ligne-2: var(--af-ligne-2, #8593A7);
  --afs-accent: var(--af-accent, #22D3EE);
  --afs-accent-texte: var(--af-accent-texte, #5CE1F5);
  --afs-accent-doux: var(--af-accent-doux, rgba(34, 211, 238, .18));
  --afs-alerte: var(--af-alerte, #F97316);
  --afs-alerte-texte: var(--af-alerte-texte, #FDA56B);
  --afs-alerte-doux: var(--af-alerte-doux, rgba(249, 115, 22, .18));
  --afs-teal: var(--af-teal, #19C2B0);
  --afs-teal-texte: var(--af-teal-texte, #3FDCCB);
  --afs-teal-doux: var(--af-teal-doux, rgba(25, 194, 176, .18));
  --afs-corail: var(--af-corail, #E8705F);
  --afs-corail-texte: var(--af-corail-texte, #F49A8D);
  --afs-corail-doux: var(--af-corail-doux, rgba(232, 112, 95, .18));
  --afs-violet: var(--af-violet, #8B7CF6);
  --afs-violet-texte: var(--af-violet-texte, #B5ACFA);
  --afs-violet-doux: var(--af-violet-doux, rgba(139, 124, 246, .18));
  --afs-soleil: var(--af-soleil, #D6AE4A);
  --afs-soleil-texte: var(--af-soleil-texte, #E6C778);
  --afs-soleil-doux: var(--af-soleil-doux, rgba(214, 174, 74, .18));
  --afs-or: var(--af-or, #F2C14E);
  --afs-or-texte: var(--af-or-texte, #F2C14E);
  --afs-or-doux: var(--af-or-doux, rgba(242, 193, 78, .18));
  --afs-orange: var(--af-orange, #F97316);
  --afs-gris-doux: var(--af-gris-doux, rgba(160, 167, 178, .18));
  --afs-gris-texte: var(--af-gris-texte, #B8C0CC);
  --afs-palier-gris: var(--af-palier-gris, #8A93A3);
  --afs-palier-gris-etiquette-fond: #4B5361;
  --afs-palier-gris-etiquette-texte: #F1F3F7;
  --afs-palier-bronze: var(--af-palier-bronze, #B87333);
  --afs-palier-bronze-etiquette-fond: #7F4818;
  --afs-palier-bronze-etiquette-texte: #FFF4E8;
  --afs-palier-argent: var(--af-palier-argent, #C0C7D1);
  --afs-palier-argent-etiquette-fond: #C0C7D1;
  --afs-palier-argent-etiquette-texte: #1B2230;
  --afs-palier-or: var(--af-palier-or, #F2C14E);
  --afs-palier-or-etiquette-fond: #F2C14E;
  --afs-palier-or-etiquette-texte: #2A1F00;
  --afs-palier-prisme-a: var(--af-palier-prisme-a, #22D3EE);
  --afs-palier-prisme-b: var(--af-palier-prisme-b, #A78BFA);
  --afs-palier-prisme-c: var(--af-palier-prisme-c, #F2C14E);
  --afs-palier-prisme-etiquette-fond: #2E1065;
  --afs-palier-prisme-etiquette-texte: #FFFFFF;
}

/* ---------- éléments communs ---------- */

.af-suivi h3 { font-family: var(--afs-titre); font-weight: 600; margin: 0; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; }
.af-suivi ul, .af-suivi ol { list-style: none; margin: 0; padding: 0; }
.af-suivi p { margin: 0; }
.af-suivi button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.af-suivi button:focus-visible, .af-suivi .af-cible:focus-visible, .af-suivi .af-refait-input:focus-visible + .af-coche {
  outline: 2px solid var(--afs-accent);
  outline-offset: 2px;
}
.af-suivi [hidden] { display: none !important; }

/* le chanfrein : deux angles opposés coupés à 8 px */
.af-chanfrein, .af-zone, .af-sujet, .af-mission, .af-radar-cadre, .af-habitude-bouton {
  clip-path: polygon(var(--afs-chanfrein) 0, 100% 0, 100% calc(100% - var(--afs-chanfrein)), calc(100% - var(--afs-chanfrein)) 100%, 0 100%, 0 var(--afs-chanfrein));
}

.af-chiffre {
  font-family: var(--afs-chiffres);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* capitales condensées des étiquettes d'affichage */
.af-condense {
  font-family: var(--afs-titre);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.af-vide, .af-note, .af-reste, .af-filtre-vide {
  color: var(--afs-encre-2);
  font-size: 14px;
  padding: 8px 0;
}

/* étiquettes de statut : fond teinté à 18 %, texte coloré, vocabulaire élève */
.af-pastille {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--afs-gris-doux);
  color: var(--afs-gris-texte);
}
.af-pastille.af-s-acquis  { background: var(--afs-teal-doux);   color: var(--afs-teal-texte); }
.af-pastille.af-s-progres { background: var(--afs-violet-doux); color: var(--afs-violet-texte); }
.af-pastille.af-s-cours   { background: var(--afs-soleil-doux); color: var(--afs-soleil-texte); }
.af-pastille.af-s-fragile { background: var(--afs-corail-doux); color: var(--afs-corail-texte); }
.af-pastille.af-s-autre   { background: var(--afs-gris-doux);   color: var(--afs-gris-texte); }

.af-s-acquis-texte  { color: var(--afs-teal-texte); }
.af-s-progres-texte { color: var(--afs-violet-texte); }
.af-s-cours-texte   { color: var(--afs-soleil-texte); }
.af-s-fragile-texte { color: var(--afs-corail-texte); }
.af-s-autre-texte   { color: var(--afs-gris-texte); }

/* un point de couleur (filtres, liste des habitudes) */
.af-point {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--afs-encre-3);
  border: 1.5px solid transparent;
}
.af-point.af-s-acquis,  .af-point.af-n4 { background: var(--afs-teal); }
.af-point.af-s-progres, .af-point.af-n3 { background: var(--afs-violet); }
.af-point.af-s-cours,   .af-point.af-n2 { background: var(--afs-soleil); }
.af-point.af-s-fragile, .af-point.af-n1 { background: var(--afs-corail); }
.af-point.af-s-autre,   .af-point.af-n0 { background: var(--afs-encre-3); }
.af-point.af-creux { background: var(--afs-panneau); border-color: var(--afs-alerte); }

.af-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.af-badge-reverif { background: var(--afs-alerte-doux); color: var(--afs-alerte-texte); border: 1px solid var(--afs-alerte); }

/* l'étoile d'un sujet solide : trait fin, remplie or */
.af-etoile { display: inline-flex; width: 16px; height: 16px; vertical-align: -3px; color: var(--afs-or); }
.af-etoile svg { width: 100%; height: 100%; }
.af-etoile-trace { fill: currentColor; stroke: currentColor; }

/* ---------- 1. la collection des compétences ---------- */

/* le HUD : chiffres Rajdhani 28 px, libellés en capitales condensées */
.af-hud {
  display: flex;
  margin: 0 0 12px;
  padding: 8px 0 10px;
  border-top: 1px solid var(--afs-ligne);
  border-bottom: 1px solid var(--afs-ligne);
}
.af-compteur {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  border-left: 1px solid var(--afs-ligne);
}
.af-compteur:first-child { border-left: 0; }
.af-compteur .af-chiffre { font-size: 28px; line-height: 1; color: var(--afs-encre); }
.af-compteur-lib {
  font-family: var(--afs-titre);
  font-size: 11px;
  font-weight: 600;
  font-stretch: condensed;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--afs-encre-3);
  line-height: 1.15;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
}
.af-c-acquis  .af-chiffre { color: var(--afs-or-texte); }
.af-c-fragile .af-chiffre { color: var(--afs-corail-texte); }

.af-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.af-filtre {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 4px 11px;
  border-radius: 3px;
  border: 1px solid var(--afs-ligne-2);
  background: transparent;
  color: var(--afs-encre-2);
  font-family: var(--afs-titre);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: border-color var(--afs-duree), color var(--afs-duree), background var(--afs-duree);
}
.af-filtre[aria-pressed="true"] { border-color: var(--afs-accent); color: var(--afs-accent-texte); background: var(--afs-accent-doux); box-shadow: inset 3px 0 0 var(--afs-accent); }
.af-filtre:disabled { opacity: .4; cursor: default; }

/* une collection par domaine : panneau chanfreiné */
.af-zone {
  position: relative;
  margin: 0 0 10px;
  padding: 12px 12px 10px;
  background: var(--afs-panneau);
  border: 1px solid var(--afs-ligne);
}
.af-zone-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.af-domaine-titre {
  font-size: 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: var(--afs-encre);
}
.af-compte { font-size: 13px; font-weight: 600; color: var(--afs-encre-3); font-family: var(--afs-chiffres); letter-spacing: 0; text-transform: none; }
.af-pourcent { flex: none; font-size: 12px; font-weight: 600; color: var(--afs-encre-2); }
.af-pourcent .af-chiffre { font-size: 24px; color: var(--afs-encre); }
.af-zone[data-part="100"] .af-pourcent .af-chiffre { color: var(--afs-or-texte); }
.af-zone[data-part="0"] .af-pourcent .af-chiffre { color: var(--afs-encre-3); }

/* la barre segmentée : un segment par sujet, rempli selon le palier */
.af-segments {
  display: flex;
  gap: 3px;
  height: 7px;
  margin: 8px 0 10px;
}
.af-segment {
  flex: 1 1 0;
  min-width: 4px;
  background: var(--afs-segment-vide);
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}
.af-segment.af-p-gris   { background: var(--afs-palier-gris); }
.af-segment.af-p-bronze { background: var(--afs-palier-bronze); }
.af-segment.af-p-argent { background: var(--afs-palier-argent); }
.af-segment.af-p-or     { background: var(--afs-palier-or); }
.af-segment.af-p-prisme { background: linear-gradient(90deg, var(--afs-palier-prisme-a), var(--afs-palier-prisme-b), var(--afs-palier-prisme-c)); }

/* les sujets : des cartes à cadre de palier, un niveau de surface au-dessus de leur zone (creux) */
.af-sujets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 560px) { .af-sujets { grid-template-columns: 1fr 1fr; } }
.af-sujet {
  position: relative;
  padding: 10px 12px 10px 12px;
  background: var(--afs-creux);
  border: 2px solid var(--afs-palier-gris);
}
.af-sujet[data-palier="gris"]   { border-color: var(--afs-palier-gris); }
.af-sujet[data-palier="bronze"] { border-color: var(--afs-palier-bronze); }
.af-sujet[data-palier="argent"] { border-color: var(--afs-palier-argent); }
.af-sujet[data-palier="or"]     { border-color: var(--afs-palier-or); }
/* prisme : le cadre est un dégradé conique tournant, dessiné par un pseudo-élément masqué au bord */
.af-sujet[data-palier="prisme"] { border-color: transparent; }
.af-sujet[data-palier="prisme"]::before {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;
  background: conic-gradient(from var(--af-angle), var(--afs-palier-prisme-a), var(--afs-palier-prisme-b), var(--afs-palier-prisme-c), var(--afs-palier-prisme-a));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: af-prisme 8s linear infinite;
}
@keyframes af-prisme { to { --af-angle: 360deg; } }
/* à revérifier : liseré orange sur le bord gauche, en plus du cadre de palier */
.af-sujet[data-retester]::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--afs-alerte);
  pointer-events: none;
}
.af-sujet[data-retester] { padding-left: 16px; }

/* l'étiquette de palier, en haut à droite, capitales condensées ; texte à 4,5 à 1 sur son fond */
.af-palier {
  position: absolute;
  top: 8px; right: 8px;
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--afs-titre), "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.af-palier.af-p-gris { background: var(--afs-palier-gris-etiquette-fond); color: var(--afs-palier-gris-etiquette-texte); }
.af-palier.af-p-bronze { background: var(--afs-palier-bronze-etiquette-fond); color: var(--afs-palier-bronze-etiquette-texte); }
.af-palier.af-p-argent { background: var(--afs-palier-argent-etiquette-fond); color: var(--afs-palier-argent-etiquette-texte); }
.af-palier.af-p-or { background: var(--afs-palier-or-etiquette-fond); color: var(--afs-palier-or-etiquette-texte); }
.af-palier.af-p-prisme { background: var(--afs-palier-prisme-etiquette-fond); color: var(--afs-palier-prisme-etiquette-texte); }

.af-sujet-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 7px;
  padding-right: 76px;
}
.af-sujet-nom { flex: 1 1 100%; font-weight: 600; font-size: 14px; }
.af-sujet-meta { font-size: 12px; color: var(--afs-encre-2); margin-top: 4px; }

.af-histo-bouton {
  margin-top: 6px;
  min-height: 30px;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--afs-ligne-2);
  background: transparent;
  color: var(--afs-encre-2);
  font-size: 12px;
  font-weight: 500;
  transition: border-color var(--afs-duree), color var(--afs-duree);
}
.af-histo-bouton:hover, .af-histo-bouton[aria-expanded="true"] { border-color: var(--afs-accent); color: var(--afs-accent-texte); }
.af-histo-bouton::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-right: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transform: rotate(-90deg);
  transition: transform var(--afs-duree);
}
.af-histo-bouton[aria-expanded="true"]::before { transform: rotate(0); }
.af-histo {
  margin-top: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--afs-ligne-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
}
.af-histo time { display: inline-block; min-width: 44px; color: var(--afs-encre-2); font-family: var(--afs-chiffres); font-weight: 600; font-size: 13px; }

/* ---------- 2. le radar des habitudes (tracé de la v2, palette de l'arène) ---------- */

.af-radar-cadre {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 6px 4px;
  background: var(--afs-saillant);
  border: 1px solid var(--afs-ligne);
}
.af-radar-svg { width: 100%; height: auto; display: block; }

.af-anneau { fill: none; stroke: var(--afs-ligne-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.af-anneau-ext { stroke: var(--afs-ligne-2); }
.af-axe { stroke: var(--afs-ligne); stroke-width: 1; vector-effect: non-scaling-stroke; }
.af-forme {
  fill: var(--afs-accent);
  fill-opacity: .25;
  stroke: var(--afs-accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.af-fantome { fill: none; stroke: var(--afs-encre-3); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.af-lib {
  font-family: "Inter", var(--afs-texte);
  font-size: 11px;
  font-weight: 500;
  fill: var(--afs-encre-2);
  pointer-events: none;
}
.af-pt { fill: var(--afs-accent); stroke: none; pointer-events: none; }
.af-pt.af-creux { fill: var(--afs-panneau); stroke: var(--afs-alerte); stroke-width: 1.5; }
.af-cible { fill: transparent; cursor: pointer; }
.af-cible:focus { outline: none; }
.af-cible:focus-visible { stroke: var(--afs-accent); stroke-width: 2; }

.af-lib.af-actif { fill: var(--afs-accent-texte); font-weight: 600; }
.af-pt.af-actif { r: 5.5; }
.af-cible.af-actif { stroke: var(--afs-accent); stroke-width: 1; stroke-dasharray: 3 3; }
.af-habitude.af-actif .af-habitude-bouton { border-color: var(--afs-accent); background: var(--afs-accent-doux); box-shadow: inset 3px 0 0 var(--afs-accent); }

.af-legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  font-size: 12px;
  color: var(--afs-encre-2);
  margin: 8px 0 10px;
}
.af-legende-item { display: inline-flex; align-items: center; gap: 7px; }
.af-trait { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--afs-accent); }
.af-trait-pointille { border-top: 1px dashed var(--afs-encre-3); }

.af-habitudes { display: flex; flex-direction: column; gap: 4px; }
.af-habitude-bouton {
  width: 100%;
  min-height: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  padding: 8px 12px;
  text-align: left;
  border: 1px solid var(--afs-ligne);
  background: var(--afs-saillant);
  color: var(--afs-encre);
  transition: border-color var(--afs-duree), background var(--afs-duree);
}
.af-habitude-nom { flex: 1 1 auto; font-weight: 600; font-size: 14px; }
.af-habitude-niveau { font-family: var(--afs-titre); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--afs-encre-2); }
.af-habitude-depuis { font-size: 12px; color: var(--afs-encre-3); }
.af-habitude-evol { font-size: 12px; font-weight: 600; }
.af-habitude-evol.af-hausse { color: var(--afs-teal-texte); }
.af-habitude-evol.af-baisse { color: var(--afs-corail-texte); }
.af-radar-liste .af-habitudes { margin-top: 4px; }

/* ---------- 3. la liste à revoir (cartes chanfreinées, posées sur la page : surface saillante) ---------- */

.af-items { display: flex; flex-direction: column; gap: 8px; }
.af-mission {
  position: relative;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px;
  align-items: start;
  background: var(--afs-saillant);
  border: 1px solid var(--afs-ligne);
  padding: 12px;
  transition: border-color var(--afs-duree);
}
/* le liseré de rang sur le bord gauche, de la couleur de l'étiquette : chaque carte se distingue de la
   suivante (25/09/2026, sur retour de Robin) ; P4 (à revérifier) garde l'orange de l'attention */
.af-mission::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--afs-encre-3);
  pointer-events: none;
}
.af-mission { padding-left: 16px; }
.af-mission[data-rang="P2"]::after { background: var(--afs-violet); }
.af-mission[data-rang="P3"]::after { background: var(--afs-corail); }
.af-mission[data-rang="P4"]::after { background: var(--afs-alerte); }
.af-mission[data-rang="P5"]::after { background: var(--afs-soleil); }
.af-mission.af-refait-fait { border-color: var(--afs-accent); box-shadow: inset 3px 0 0 var(--afs-accent); }
.af-mission.af-refait-fait .af-item-sujet { text-decoration: line-through; text-decoration-color: var(--afs-accent); text-decoration-thickness: 1.5px; color: var(--afs-encre-2); }
.af-mission-rang { padding-top: 2px; }
.af-mission-corps { min-width: 0; }

/* l'étiquette de rang : capitales condensées, fond teinté à 18 % */
.af-rang {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--afs-titre);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--afs-gris-doux);
  color: var(--afs-gris-texte);
}
.af-rang.af-r-p2 { background: var(--afs-violet-doux); color: var(--afs-violet-texte); }
.af-rang.af-r-p3 { background: var(--afs-corail-doux); color: var(--afs-corail-texte); }
.af-rang.af-r-p4 { background: var(--afs-alerte-doux); color: var(--afs-alerte-texte); }
.af-rang.af-r-p5 { background: var(--afs-soleil-doux); color: var(--afs-soleil-texte); }
.af-rang.af-r-p6 { background: var(--afs-gris-doux); color: var(--afs-gris-texte); }

.af-item-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.af-item-sujet { font-weight: 600; font-size: 15px; flex: 1 1 100%; }
.af-item-meta { font-size: 12px; color: var(--afs-encre-3); margin-top: 1px; }

.af-enonce, .af-demander, .af-reponse {
  margin-top: 8px;
  white-space: pre-line;
  font-size: 14px;
}
.af-demander { color: var(--afs-encre-2); }
.af-math {
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: .92em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--afs-creux);
  color: var(--afs-encre);
  white-space: nowrap;
}
.af-math sup { font-size: .72em; line-height: 0; vertical-align: .45em; }
.af-reponse {
  padding: 8px 10px;
  background: var(--afs-creux);
  color: var(--afs-encre);
  border-left: 2px solid var(--afs-accent);
}
.af-reponse-bouton {
  margin-top: 8px;
  min-height: 34px;
  padding: 4px 11px;
  border-radius: 3px;
  border: 1px solid var(--afs-ligne-2);
  background: transparent;
  color: var(--afs-encre-2);
  font-size: 13px;
  font-weight: 500;
  transition: border-color var(--afs-duree), color var(--afs-duree);
}
.af-reponse-bouton:hover, .af-reponse-bouton[aria-expanded="true"] { border-color: var(--afs-accent); color: var(--afs-accent-texte); }

/* la case « Je l'ai refait ce soir » : une coche cyan qui se trace en 200 ms */
.af-refait {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  min-height: 40px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}
.af-refait-input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.af-coche {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 3px;
  border: 1px solid var(--afs-ligne-2);
  background: var(--afs-carte);
  display: grid;
  place-items: center;
  transition: background var(--afs-duree), border-color var(--afs-duree);
}
.af-coche svg { width: 16px; height: 16px; display: block; }
.af-coche-trait {
  fill: none;
  stroke: #12161E;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.af-refait-input:checked + .af-coche { background: var(--afs-accent); border-color: var(--afs-accent); }
.af-refait-input:checked + .af-coche .af-coche-trait { stroke-dashoffset: 0; transition: stroke-dashoffset var(--afs-duree) ease; }

@media (prefers-reduced-motion: reduce) {
  .af-suivi *, .af-suivi *::before, .af-suivi *::after { transition: none !important; animation: none !important; }
}