/* Appli élèves et parents : styles des composants de suivi (collection des compétences, radar,
   liste à revoir). Cinquième piste, « l'affiche » (30/09/2026) : le jeu est dans la forme, la typo et
   les paliers, le texte reste du texte. Cadres pleins de 2 px et ombre décalée, coins arrondis, deux
   accents chauds (mandarine pour l'actif, framboise pour l'attention), l'or au palier le plus haut
   avant la braise (le prisme de l'arène, en dégradé chaud). Paliers de rareté sur les sujets : gris
   (Nouveau), bronze (En chantier, À consolider), argent (Ça avance), or (Je sais faire), prisme (Solide).
   Titres et chiffres Bricolage Grotesque, texte Figtree. Jetons --af-* d'app.css avec repli sombre et
   clair. Aucune ombre floue, 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, #E0D6C7);
  --afs-panneau: var(--af-panneau, #F0E8DC);
  --afs-carte: var(--af-carte, #FFFBF4);
  --afs-saillant: var(--af-saillant, #FFFBF4);
  --afs-creux: var(--af-creux, #DDD0BD);
  --afs-segment-vide: var(--af-segment-vide, #B9A48E);
  --afs-encre: var(--af-encre, #2A1B12);
  --afs-encre-2: var(--af-encre-2, #5A4636);
  --afs-encre-3: var(--af-encre-3, #614C3C);
  --afs-ligne: var(--af-ligne, #7A6452);
  --afs-ligne-2: var(--af-ligne-2, #7A6452);
  --afs-trait: var(--af-trait, #2A1B12);
  --afs-ombre-dure: var(--af-ombre-dure, rgba(42, 27, 18, .9));
  --afs-accent: var(--af-accent, #E8641B);
  --afs-accent-sur: var(--af-accent-sur, #1F120B);
  --afs-accent-texte: var(--af-accent-texte, #9A3808);
  --afs-accent-doux: var(--af-accent-doux, rgba(232, 100, 27, .22));
  --afs-alerte: var(--af-alerte, #C8285E);
  --afs-alerte-texte: var(--af-alerte-texte, #A8203F);
  --afs-alerte-doux: var(--af-alerte-doux, rgba(200, 40, 94, .18));
  --afs-teal: var(--af-teal, #5C7A1F);
  --afs-teal-texte: var(--af-teal-texte, #4E6A18);
  --afs-teal-doux: var(--af-teal-doux, rgba(92, 122, 31, .22));
  --afs-corail: var(--af-corail, #B5321F);
  --afs-corail-texte: var(--af-corail-texte, #9E2A1B);
  --afs-corail-doux: var(--af-corail-doux, rgba(181, 50, 31, .18));
  --afs-violet: var(--af-violet, #8A4EA8);
  --afs-violet-texte: var(--af-violet-texte, #6E3B8A);
  --afs-violet-doux: var(--af-violet-doux, rgba(138, 78, 168, .2));
  --afs-soleil: var(--af-soleil, #E0A61B);
  --afs-soleil-texte: var(--af-soleil-texte, #8B5A0B);
  --afs-soleil-doux: var(--af-soleil-doux, rgba(224, 166, 27, .25));
  --afs-or: var(--af-or, #E0A61B);
  --afs-or-texte: var(--af-or-texte, #8B5A0B);
  --afs-or-doux: var(--af-or-doux, rgba(224, 166, 27, .25));
  --afs-orange: var(--af-orange, #B5321F);
  --afs-gris-doux: var(--af-gris-doux, #E9E0D3);
  --afs-gris-texte: var(--af-gris-texte, #4A3A2C);
  /* 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, #9C8876);
  --afs-palier-gris-etiquette-fond: #5A4636;
  --afs-palier-gris-etiquette-texte: #FFF6E8;
  --afs-palier-bronze: var(--af-palier-bronze, #B5651D);
  --afs-palier-bronze-etiquette-fond: #8A4A12;
  --afs-palier-bronze-etiquette-texte: #FFF4E8;
  --afs-palier-argent: var(--af-palier-argent, #B9A48E);
  --afs-palier-argent-etiquette-fond: #D9C9B5;
  --afs-palier-argent-etiquette-texte: #2A1B12;
  --afs-palier-or: var(--af-palier-or, #E0A61B);
  --afs-palier-or-etiquette-fond: #F5C54A;
  --afs-palier-or-etiquette-texte: #2A1B12;
  --afs-palier-prisme-a: var(--af-palier-prisme-a, #E8641B);
  --afs-palier-prisme-b: var(--af-palier-prisme-b, #C8285E);
  --afs-palier-prisme-c: var(--af-palier-prisme-c, #E0A61B);
  --afs-palier-prisme-etiquette-fond: #7A1A3C;
  --afs-palier-prisme-etiquette-texte: #FFFFFF;
  --afs-titre: var(--af-police-titre, "Bricolage Grotesque", "Figtree", "Segoe UI", system-ui, sans-serif);
  --afs-texte: var(--af-police-texte, "Figtree", "Segoe UI", system-ui, sans-serif);
  --afs-chiffres: var(--af-police-chiffres, "Bricolage Grotesque", "Figtree", "Segoe UI", system-ui, sans-serif);
  --afs-duree: .2s;
  --afs-rayon: 16px;
  --afs-rayon-petit: 10px;
  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, #1A120D);
    --afs-panneau: var(--af-panneau, #3D2D24);
    --afs-carte: var(--af-carte, #2B1F18);
    --afs-saillant: var(--af-saillant, #3D2D24);
    --afs-creux: var(--af-creux, #4E3B30);
    --afs-segment-vide: var(--af-segment-vide, #7D6858);
    --afs-encre: var(--af-encre, #F7EEE3);
    --afs-encre-2: var(--af-encre-2, #D8C7B6);
    --afs-encre-3: var(--af-encre-3, #BFA995);
    --afs-ligne: var(--af-ligne, #9C8570);
    --afs-ligne-2: var(--af-ligne-2, #9C8570);
    --afs-trait: var(--af-trait, #6B5545);
    --afs-ombre-dure: var(--af-ombre-dure, #6A3F22);
    --afs-accent: var(--af-accent, #FF8A3D);
    --afs-accent-sur: var(--af-accent-sur, #1F120B);
    --afs-accent-texte: var(--af-accent-texte, #FFA061);
    --afs-accent-doux: var(--af-accent-doux, rgba(255, 138, 61, .2));
    --afs-alerte: var(--af-alerte, #FF6B93);
    --afs-alerte-texte: var(--af-alerte-texte, #FF9DB8);
    --afs-alerte-doux: var(--af-alerte-doux, rgba(255, 107, 147, .2));
    --afs-teal: var(--af-teal, #B6D66A);
    --afs-teal-texte: var(--af-teal-texte, #C9E387);
    --afs-teal-doux: var(--af-teal-doux, rgba(182, 214, 106, .18));
    --afs-corail: var(--af-corail, #F5877A);
    --afs-corail-texte: var(--af-corail-texte, #FFA398);
    --afs-corail-doux: var(--af-corail-doux, rgba(245, 135, 122, .18));
    --afs-violet: var(--af-violet, #D8B0F0);
    --afs-violet-texte: var(--af-violet-texte, #E2C4F5);
    --afs-violet-doux: var(--af-violet-doux, rgba(216, 176, 240, .18));
    --afs-soleil: var(--af-soleil, #F0C060);
    --afs-soleil-texte: var(--af-soleil-texte, #F0C060);
    --afs-soleil-doux: var(--af-soleil-doux, rgba(240, 192, 96, .18));
    --afs-or: var(--af-or, #F2B84B);
    --afs-or-texte: var(--af-or-texte, #F2B84B);
    --afs-or-doux: var(--af-or-doux, rgba(242, 184, 75, .18));
    --afs-orange: var(--af-orange, #F5877A);
    --afs-gris-doux: var(--af-gris-doux, #4A3A30);
    --afs-gris-texte: var(--af-gris-texte, #D8C7B6);
    --afs-palier-gris: var(--af-palier-gris, #9C8876);
    --afs-palier-gris-etiquette-fond: #5A4636;
    --afs-palier-gris-etiquette-texte: #FFF6E8;
    --afs-palier-bronze: var(--af-palier-bronze, #C9782E);
    --afs-palier-bronze-etiquette-fond: #8A4A12;
    --afs-palier-bronze-etiquette-texte: #FFF4E8;
    --afs-palier-argent: var(--af-palier-argent, #C9B8A6);
    --afs-palier-argent-etiquette-fond: #D9C9B5;
    --afs-palier-argent-etiquette-texte: #2A1B12;
    --afs-palier-or: var(--af-palier-or, #F2B84B);
    --afs-palier-or-etiquette-fond: #F5C54A;
    --afs-palier-or-etiquette-texte: #2A1B12;
    --afs-palier-prisme-a: var(--af-palier-prisme-a, #FF8A3D);
    --afs-palier-prisme-b: var(--af-palier-prisme-b, #FF6B93);
    --afs-palier-prisme-c: var(--af-palier-prisme-c, #F2B84B);
    --afs-palier-prisme-etiquette-fond: #7A1A3C;
    --afs-palier-prisme-etiquette-texte: #FFFFFF;
  }
}
:root[data-theme="dark"] .af-suivi {
  --afs-fond: var(--af-fond, #1A120D);
  --afs-panneau: var(--af-panneau, #3D2D24);
  --afs-carte: var(--af-carte, #2B1F18);
  --afs-saillant: var(--af-saillant, #3D2D24);
  --afs-creux: var(--af-creux, #4E3B30);
  --afs-segment-vide: var(--af-segment-vide, #7D6858);
  --afs-encre: var(--af-encre, #F7EEE3);
  --afs-encre-2: var(--af-encre-2, #D8C7B6);
  --afs-encre-3: var(--af-encre-3, #BFA995);
  --afs-ligne: var(--af-ligne, #9C8570);
  --afs-ligne-2: var(--af-ligne-2, #9C8570);
  --afs-trait: var(--af-trait, #6B5545);
  --afs-ombre-dure: var(--af-ombre-dure, #6A3F22);
  --afs-accent: var(--af-accent, #FF8A3D);
  --afs-accent-sur: var(--af-accent-sur, #1F120B);
  --afs-accent-texte: var(--af-accent-texte, #FFA061);
  --afs-accent-doux: var(--af-accent-doux, rgba(255, 138, 61, .2));
  --afs-alerte: var(--af-alerte, #FF6B93);
  --afs-alerte-texte: var(--af-alerte-texte, #FF9DB8);
  --afs-alerte-doux: var(--af-alerte-doux, rgba(255, 107, 147, .2));
  --afs-teal: var(--af-teal, #B6D66A);
  --afs-teal-texte: var(--af-teal-texte, #C9E387);
  --afs-teal-doux: var(--af-teal-doux, rgba(182, 214, 106, .18));
  --afs-corail: var(--af-corail, #F5877A);
  --afs-corail-texte: var(--af-corail-texte, #FFA398);
  --afs-corail-doux: var(--af-corail-doux, rgba(245, 135, 122, .18));
  --afs-violet: var(--af-violet, #D8B0F0);
  --afs-violet-texte: var(--af-violet-texte, #E2C4F5);
  --afs-violet-doux: var(--af-violet-doux, rgba(216, 176, 240, .18));
  --afs-soleil: var(--af-soleil, #F0C060);
  --afs-soleil-texte: var(--af-soleil-texte, #F0C060);
  --afs-soleil-doux: var(--af-soleil-doux, rgba(240, 192, 96, .18));
  --afs-or: var(--af-or, #F2B84B);
  --afs-or-texte: var(--af-or-texte, #F2B84B);
  --afs-or-doux: var(--af-or-doux, rgba(242, 184, 75, .18));
  --afs-orange: var(--af-orange, #F5877A);
  --afs-gris-doux: var(--af-gris-doux, #4A3A30);
  --afs-gris-texte: var(--af-gris-texte, #D8C7B6);
  --afs-palier-gris: var(--af-palier-gris, #9C8876);
  --afs-palier-gris-etiquette-fond: #5A4636;
  --afs-palier-gris-etiquette-texte: #FFF6E8;
  --afs-palier-bronze: var(--af-palier-bronze, #C9782E);
  --afs-palier-bronze-etiquette-fond: #8A4A12;
  --afs-palier-bronze-etiquette-texte: #FFF4E8;
  --afs-palier-argent: var(--af-palier-argent, #C9B8A6);
  --afs-palier-argent-etiquette-fond: #D9C9B5;
  --afs-palier-argent-etiquette-texte: #2A1B12;
  --afs-palier-or: var(--af-palier-or, #F2B84B);
  --afs-palier-or-etiquette-fond: #F5C54A;
  --afs-palier-or-etiquette-texte: #2A1B12;
  --afs-palier-prisme-a: var(--af-palier-prisme-a, #FF8A3D);
  --afs-palier-prisme-b: var(--af-palier-prisme-b, #FF6B93);
  --afs-palier-prisme-c: var(--af-palier-prisme-c, #F2B84B);
  --afs-palier-prisme-etiquette-fond: #7A1A3C;
  --afs-palier-prisme-etiquette-texte: #FFFFFF;
}

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

.af-suivi h3 { font-family: var(--afs-titre); font-weight: 800; margin: 0; line-height: 1.15; letter-spacing: -.02em; }
.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: 3px solid var(--afs-accent);
  outline-offset: 2px;
}
.af-suivi [hidden] { display: none !important; }

/* le cadre d'affiche : 2 px pleins, coins arrondis, ombre décalée sans flou */
.af-chanfrein, .af-zone, .af-sujet, .af-mission, .af-radar-cadre, .af-habitude-bouton {
  border-radius: var(--afs-rayon);
}

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

/* les libellés d'affichage : gras, sans capitales */
.af-condense {
  font-family: var(--afs-texte);
  font-weight: 700;
  letter-spacing: 0;
}

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

/* étiquettes de statut : pilule à fond teinté, texte coloré, vocabulaire élève */
.af-pastille {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  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: 10px; height: 10px;
  border-radius: 50%;
  flex: none;
  background: var(--afs-encre-3);
  border: 2px 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 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.af-badge-reverif { background: var(--afs-alerte-doux); color: var(--afs-alerte-texte); border: 2px solid var(--afs-alerte); transform: rotate(-2deg); }

/* l'étoile d'un sujet solide : 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 Bricolage 30 px, libellés gras */
.af-hud {
  display: flex;
  margin: 0 0 14px;
  padding: 10px 4px 10px;
  border: 2px solid var(--afs-trait);
  border-radius: var(--afs-rayon);
  background: var(--afs-panneau);
}
.af-compteur {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  border-left: 2px dashed var(--afs-ligne);
}
.af-compteur:first-child { border-left: 0; }
.af-compteur .af-chiffre { font-size: 30px; line-height: 1; color: var(--afs-encre); }
.af-compteur-lib {
  font-family: var(--afs-texte);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  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: 38px;
  padding: 4px 13px;
  border-radius: 999px;
  border: 2px solid var(--afs-trait);
  background: var(--afs-carte);
  color: var(--afs-encre-2);
  font-family: var(--afs-texte);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 2px 2px 0 var(--afs-ombre-dure);
  transition: border-color var(--afs-duree), color var(--afs-duree), background var(--afs-duree), transform .1s, box-shadow .1s;
}
.af-filtre:active { transform: translate(2px, 2px); box-shadow: none; }
.af-filtre[aria-pressed="true"] { color: var(--afs-accent-sur); background: var(--afs-accent); }
.af-filtre:disabled { opacity: .4; cursor: default; }

/* une collection par domaine : panneau à cadre plein */
.af-zone {
  position: relative;
  margin: 0 0 14px;
  padding: 12px 12px 12px;
  background: var(--afs-panneau);
  border: 2px solid var(--afs-trait);
  box-shadow: 4px 4px 0 var(--afs-ombre-dure);
}
.af-zone-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.af-domaine-titre {
  font-size: 18px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: var(--afs-encre);
}
.af-compte { font-size: 13px; font-weight: 700; color: var(--afs-encre-3); font-family: var(--afs-chiffres); letter-spacing: 0; }
.af-pourcent { flex: none; font-size: 12px; font-weight: 700; color: var(--afs-encre-2); }
.af-pourcent .af-chiffre { font-size: 26px; 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: 4px;
  height: 10px;
  margin: 8px 0 12px;
}
.af-segment {
  flex: 1 1 0;
  min-width: 4px;
  background: var(--afs-segment-vide);
  border-radius: 999px;
}
.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: 10px;
}
@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);
  border-radius: var(--afs-rayon-petit);
}
.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); box-shadow: 3px 3px 0 var(--afs-palier-or); }
/* prisme, la braise : 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;
  border-radius: var(--afs-rayon-petit);
  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é framboise 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: 6px;
  border-radius: 6px 0 0 6px;
  background: var(--afs-alerte);
  pointer-events: none;
}
.af-sujet[data-retester] { padding-left: 18px; }

/* l'étiquette de palier, en haut à droite : un sticker légèrement tourné ; texte à 4,5 à 1 sur son fond */
.af-palier {
  position: absolute;
  top: 6px; right: 8px;
  display: inline-block;
  padding: 2px 9px;
  font-family: var(--afs-titre);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.5;
  white-space: nowrap;
  border-radius: 999px;
  transform: rotate(3deg);
  box-shadow: 2px 2px 0 var(--afs-ombre-dure);
}
.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: 700; font-size: 14.5px; }
.af-sujet-meta { font-size: 12px; color: var(--afs-encre-2); margin-top: 4px; }

.af-histo-bouton {
  margin-top: 8px;
  min-height: 32px;
  padding: 2px 11px;
  border-radius: 999px;
  border: 2px solid var(--afs-ligne-2);
  background: transparent;
  color: var(--afs-encre-2);
  font-size: 12.5px;
  font-weight: 700;
  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: 8px;
  padding-left: 10px;
  border-left: 3px 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: 700; font-size: 13px; }

/* ---------- 2. le radar des habitudes (tracé inchangé, palette de l'affiche) ---------- */

.af-radar-cadre {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 6px;
  background: var(--afs-saillant);
  border: 2px solid var(--afs-trait);
  box-shadow: 4px 4px 0 var(--afs-ombre-dure);
}
.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: .3;
  stroke: var(--afs-accent);
  stroke-width: 2;
  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: "Figtree", var(--afs-texte);
  font-size: 11px;
  font-weight: 600;
  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: 2; }
.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: 700; }
.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 6px 0 0 var(--afs-accent), 3px 3px 0 var(--afs-ombre-dure); }

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

.af-habitudes { display: flex; flex-direction: column; gap: 8px; }
.af-habitude-bouton {
  width: 100%;
  min-height: 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  padding: 9px 13px;
  text-align: left;
  border: 2px solid var(--afs-trait);
  background: var(--afs-saillant);
  color: var(--afs-encre);
  box-shadow: 3px 3px 0 var(--afs-ombre-dure);
  transition: border-color var(--afs-duree), background var(--afs-duree);
}
.af-habitude-nom { flex: 1 1 auto; font-weight: 700; font-size: 14.5px; }
.af-habitude-niveau { font-family: var(--afs-texte); font-size: 12.5px; font-weight: 700; letter-spacing: 0; color: var(--afs-encre-2); background: var(--afs-panneau); border-radius: 999px; padding: 0 8px; }
.af-habitude-depuis { font-size: 12px; color: var(--afs-encre-3); }
.af-habitude-evol { font-size: 12px; font-weight: 700; }
.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 d'affiche posées sur la page : surface saillante) ---------- */

.af-items { display: flex; flex-direction: column; gap: 12px; }
.af-mission {
  position: relative;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px;
  align-items: start;
  background: var(--afs-saillant);
  border: 2px solid var(--afs-trait);
  box-shadow: 4px 4px 0 var(--afs-ombre-dure);
  padding: 12px;
  transition: border-color var(--afs-duree);
  overflow: hidden;
}
/* le liseré de rang sur le bord gauche, de la couleur de l'étiquette : chaque carte se distingue de la
   suivante ; P4 (à revérifier) garde la framboise de l'attention */
.af-mission::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--afs-encre-3);
  pointer-events: none;
}
.af-mission { padding-left: 18px; }
.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: 4px 4px 0 var(--afs-accent); }
.af-mission.af-refait-fait::after { background: var(--afs-accent); }
.af-mission.af-refait-fait .af-item-sujet { text-decoration: line-through; text-decoration-color: var(--afs-accent); text-decoration-thickness: 2px; color: var(--afs-encre-2); }
.af-mission-rang { padding-top: 2px; }
.af-mission-corps { min-width: 0; }

/* l'étiquette de rang : un sticker de rang, fond teinté */
.af-rang {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--afs-titre);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  background: var(--afs-gris-doux);
  color: var(--afs-gris-texte);
  transform: rotate(-3deg);
}
.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: 700; font-size: 15.5px; 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: "Space Mono", "Cascadia Mono", Consolas, monospace;
  font-size: .9em;
  padding: 1px 6px;
  border-radius: 6px;
  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: 6px solid var(--afs-accent);
  border-radius: 0 var(--afs-rayon-petit) var(--afs-rayon-petit) 0;
}
.af-reponse-bouton {
  margin-top: 8px;
  min-height: 36px;
  padding: 4px 13px;
  border-radius: 999px;
  border: 2px solid var(--afs-ligne-2);
  background: transparent;
  color: var(--afs-encre-2);
  font-size: 13px;
  font-weight: 700;
  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 mandarine qui se trace en 200 ms */
.af-refait {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  min-height: 40px;
  font-weight: 600;
  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: 24px; height: 24px;
  border-radius: 7px;
  border: 2px solid var(--afs-trait);
  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: #1F120B;
  stroke-width: 3;
  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-trait); }
.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; }
}