/*
 * Academy v2 — design system et composants.
 * Chargé uniquement sur les pages en template v2 (voir inc/academy-v2-setup.php).
 */

:root {
  --ac-ink:          #16202F;
  --ac-ink-soft:     #33415A;
  --ac-ink-text:     #A9B6C7;
  --ac-ink-muted:    #7C8CA3;
  --ac-ink-label:    #5A6B82;
  --ac-bg:           #F4F6F1;
  --ac-surface:      #FFFFFF;
  --ac-soft:         #F2F5EE;
  --ac-soft-2:       #F7F9F4;
  --ac-border:       #E7EBE2;
  --ac-border-2:     #EDF1E7;
  --ac-green:        #85BD4A;
  --ac-green-dark:   #5E8F2E;
  --ac-green-light:  #B4DE7C;
  --ac-green-vivid:  #9BD457;
  --ac-green-pale:   #DCEBC6;
  --ac-text:         #1B2436;
  --ac-muted:        #6E7A69;
  --ac-grey:         #8A9585;
  --ac-grey-2:       #A2AC9E;
  --ac-amber:        #C98A2B;
  --ac-red:          #C7433F;
  --ac-radius:       19px;
  --ac-radius-lg:    22px;
  --ac-radius-md:    14px;
  --ac-radius-sm:    12px;
  --ac-sidebar-w:    264px;
  /* Étoile de notation, en masque : une seule forme, la couleur vient du
     background, donc états plein/vide sans second fichier ni second SVG. */
  --ac-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

.ac-body { margin: 0; background: var(--ac-bg); color: var(--ac-text);
  font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.ac-body * { box-sizing: border-box; }
/* Couleur par défaut des liens. Le sélecteur d'élément est neutralisé par
   :where(), qui ne compte pour rien : la règle vaut donc (0,1,0) — celle
   d'une classe simple — au lieu de (0,1,1). Sans cela, elle battrait par
   spécificité TOUS les composants rendus en <a> (.ac-btn, .ac-nav__link,
   .ac-pill, .ac-segment__btn, .ac-t-invert…), quel que soit l'ordre source,
   et les repeindrait en vert. Déclarée ici, tout en haut, elle reste la
   valeur par défaut : à spécificité égale, l'ordre source tranche, donc
   n'importe quel composant ou utilitaire déclaré plus bas la surcharge —
   c'est la convention de tout ce fichier.
   Ne pas la restreindre par :not([class*="ac-"]) : les liens de contenu
   portent des utilitaires (.ac-t-md .ac-t-700 sur « Voir le classement
   complet », « Précédent », « ← Retour »…) et retomberaient sur le bleu
   souligné du navigateur. */
.ac-body :where(a) { color: var(--ac-green-dark); text-decoration: none; }
.ac-body :where(a:hover) { color: var(--ac-green); }
.ac-body ::selection { background: #D5EDB4; }

@keyframes ac-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ac-rise { animation: ac-rise .5s ease both; }

@media (prefers-reduced-motion: reduce) {
  .ac-rise { animation: none; }
}

/* ---------- Ossature ---------- */

.ac-shell { display: grid; grid-template-columns: var(--ac-sidebar-w) minmax(0, 1fr);
  min-height: 100vh; align-items: start; }
.ac-main { padding: 26px 34px 56px; /* max-width: 1420px; */ min-width: 0; }

/* ---------- Sidebar ---------- */

.ac-sidebar { position: sticky; top: 0; height: 100vh; background: var(--ac-ink);
  padding: 26px 18px; display: flex; flex-direction: column; gap: 26px; }
.ac-sidebar__logo { /*background: #fff;*/ border-radius: var(--ac-radius-md); padding: 12px 14px; }
.ac-sidebar__logo img { display: block; width: 100%; height: auto; }
.ac-nav { display: flex; flex-direction: column; gap: 4px; }
.ac-nav__group { font-size: 10.5px; letter-spacing: .14em; font-weight: 700;
  color: var(--ac-ink-label); padding: 18px 12px 8px; }
.ac-nav__group:first-child { padding-top: 0; }
.ac-nav__link { display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border-radius: 11px; color: var(--ac-ink-text); font-weight: 600; font-size: 13.5px; }
.ac-nav__link:hover { background: rgba(255,255,255,.05); color: #fff; }
.ac-nav__link::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ac-ink-soft); flex: none; }
.ac-nav__link--active { background: linear-gradient(100deg, rgba(133,189,74,.22), rgba(133,189,74,.06));
  color: #fff; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(133,189,74,.35); }
.ac-nav__link--active::before { background: var(--ac-green-vivid);
  box-shadow: 0 0 0 4px rgba(155,212,87,.18); }

.ac-promo { margin-top: auto; border-radius: 16px; padding: 16px;
  background: linear-gradient(150deg, var(--ac-green), #4F7C28); color: #fff; }
.ac-promo__title { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 13px; line-height: 1.35; }
.ac-promo__text { font-size: 11.5px; opacity: .85; margin-top: 6px; line-height: 1.5; }

/* ---------- Topbar ---------- */

.ac-topbar { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.ac-topbar__lead { margin-right: auto; }
.ac-topbar h1 { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 24px;
  letter-spacing: -.6px; margin: 0; }
.ac-topbar__sub { margin: 5px 0 0; font-size: 13px; color: var(--ac-muted); }
.ac-chip-level { display: flex; align-items: center; gap: 9px; background: #fff;
  border: 1px solid #E3E8DD; border-radius: 99px; padding: 7px 15px 7px 9px; }
.ac-chip-level__badge { width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(140deg, #A8E05A, #6FA83A); display: grid; place-items: center;
  color: var(--ac-ink); font-weight: 800; font-size: 11px; font-family: Montserrat, sans-serif; }
.ac-user { display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.ac-user__name { font-size: 13px; font-weight: 700; }
.ac-user__meta { font-size: 11.5px; color: var(--ac-grey); }
.ac-avatar { width: 38px; height: 38px; border-radius: var(--ac-radius-sm); background: var(--ac-ink);
  color: #fff; display: grid; place-items: center; font-family: Montserrat, sans-serif;
  font-weight: 700; font-size: 13px; flex: none; }

/* ---------- Cartes ---------- */

.ac-card { background: var(--ac-surface); border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius); padding: 18px; }
.ac-card--dark { background: var(--ac-ink); border-color: transparent; color: #fff; }
.ac-card__title { margin: 0; font-family: Montserrat, sans-serif; font-weight: 800;
  font-size: 16px; letter-spacing: -.3px; }

/* Couleur de texte des listes et tableaux — 16 occurrences dans les maquettes. */
.ac-t-slate { color: #4A554A; }

/* Carte à en-tête et lignes : le corps colle aux bords, seuls l'en-tête,
   les lignes et le pied portent leur padding. Réutilisée par l'historique
   (Mes résultats), le tableau (Classement) et les listes (Mentoring). */
.ac-card--flush { padding: 0; overflow: hidden; }
.ac-card__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 17px 20px; border-bottom: 1px solid var(--ac-border-2); }
.ac-card__foot { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 15px 20px; }

/* Ligne de liste : séparateur bas et survol. */
.ac-row { display: flex; align-items: center; gap: 14px; padding: 15px 20px;
  border-bottom: 1px solid var(--ac-soft); }
.ac-row:hover { background: #FAFBF7; }

/* Ajoutée pour la tâche 10 (Mentoring) : ligne de liste sur fond sombre
 * (carte "Mes demandes"), teinte translucide plutôt que le fond clair de
 * .ac-row qui jurerait sur .ac-card--dark. */
.ac-row-dark { display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: 13px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08); }

/* Pastille d'état, 8 px. */
.ac-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.ac-dot--bad { background: var(--ac-red); }
.ac-dot--medium { background: var(--ac-amber); }
.ac-dot--good { background: var(--ac-green); }

.ac-t-17 { font-size: 17px; }

.ac-cat { background: var(--ac-surface); border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius); padding: 19px; display: flex; flex-direction: column; gap: 15px; }
.ac-cat:hover { border-color: #C3DFA0; box-shadow: 0 14px 34px -22px rgba(22,32,47,.34); }
.ac-cat__mono { width: 44px; height: 44px; flex: none; border-radius: 13px;
  background: linear-gradient(145deg, var(--ac-green-light), var(--ac-green-dark));
  color: var(--ac-ink); display: grid; place-items: center;
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: 15px; }

/* Ajoutée pour la tâche 10 (Mentoring) : même gabarit que .ac-cat__mono, pour
   une vraie photo (mentors.avatar) plutôt que des initiales — vit dans la
   même carte .ac-cat, à côté de .ac-cat__mono, d'où le nom de la famille.
   .ac-cat__mono ne convient pas telle quelle sur un <img> : sans object-fit,
   une photo qui n'est pas carrée serait étirée pour remplir le carré. */
.ac-cat__photo { width: 44px; height: 44px; flex: none; border-radius: 13px;
  object-fit: cover; display: block; }

.ac-level { display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: var(--ac-radius-sm); background: var(--ac-soft-2); border: 1px solid var(--ac-border-2); }
.ac-level:hover { background: #F1F6EA; }
.ac-level__short { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid;
  place-items: center; font-size: 10.5px; font-weight: 800; font-family: Montserrat, sans-serif; }
.ac-level__pill { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 99px;
  white-space: nowrap; }

/* États d'un niveau. Aucun verrouillage : on montre l'état réel.
 * Trois états seulement — done, weak, todo — déterminés par le score seul.
 * Le fait qu'un quiz soit rejouable est une information ORTHOGONALE, portée
 * par .ac-level__replay : un quiz validé le reste au-delà de 7 jours, sa
 * pastille de score ne change pas, on ajoute seulement l'action. Un état
 * "replay" exclusif ferait reculer la progression affichée sans raison.
 */
.ac-level--done   .ac-level__short { background: var(--ac-green-dark); color: #fff; }
.ac-level--done   .ac-level__pill  { background: var(--ac-green-pale); color: #3F6220; }
.ac-level--weak   .ac-level__short { background: var(--ac-amber); color: #fff; }
.ac-level--weak   .ac-level__pill  { background: #FBEEDA; color: #8A5A12; }
.ac-level--todo   .ac-level__short { background: #C9D3C2; color: #fff; }
.ac-level--todo   .ac-level__pill  { background: #FFF; color: var(--ac-muted); }

.ac-level__replay { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 99px;
  white-space: nowrap; background: var(--ac-ink); color: var(--ac-green-vivid); }

/* ---------- Barres de progression ---------- */

.ac-bar { flex: 1; height: 6px; border-radius: 99px; background: #EFF2EA; overflow: hidden; }
.ac-bar__fill { height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--ac-green-dark), #A8E05A); }
.ac-bar--light { background: rgba(255,255,255,.28); }
.ac-bar--light .ac-bar__fill { background: #fff; }

/* ---------- Statistiques ---------- */

.ac-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; margin-bottom: 16px; }
.ac-stat { border-radius: 20px; padding: 20px; background: var(--ac-surface);
  border: 1px solid var(--ac-border); }
.ac-stat--green { background: linear-gradient(120deg, var(--ac-green-dark), var(--ac-green) 62%,
  var(--ac-green-light)); color: #FFF; border-color: transparent; }
.ac-stat--dark { background: var(--ac-ink); color: #fff; border-color: transparent; }
.ac-stat__label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--ac-grey); }
.ac-stat--green .ac-stat__label { color: inherit; opacity: .75; }
.ac-stat--dark  .ac-stat__label { color: #7C8CA3; }
.ac-stat__value { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 38px;
  letter-spacing: -1px; margin-top: 8px; line-height: 1; }
.ac-stat__unit { font-size: 18px; color: #E1E1E1; }
.ac-stat__note { font-size: 12px; margin-top: 6px; color: var(--ac-muted); }
.ac-stat--dark .ac-stat__note { color: var(--ac-ink-text); }

/* ---------- Héros ---------- */

.ac-hero { position: relative; overflow: hidden; border-radius: var(--ac-radius-lg);
  background: linear-gradient(115deg, var(--ac-ink) 0%, #20406F00 40%),
              linear-gradient(112deg, var(--ac-green-dark), var(--ac-green) 46%, var(--ac-green-light));
  padding: 32px 34px; color: #fff; }
.ac-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 260px at 88% -30%, rgba(255,255,255,.32), transparent 70%); }
.ac-hero__inner { position: relative; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 34px; align-items: center; }
.ac-hero h2 { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 34px;
  line-height: 1.14; letter-spacing: -.9px; margin: 14px 0 10px; text-wrap: pretty; }
.ac-hero__tag { display: inline-flex; align-items: center; gap: 8px;
  background: rgba(22,32,47,.34); border: 1px solid rgba(255,255,255,.22);
  padding: 6px 12px; border-radius: 99px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.ac-hero__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ac-tile { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  border-radius: 15px; padding: 15px; }
.ac-tile--dark { background: var(--ac-ink); border-color: transparent; }
.ac-tile__value { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 26px;
  letter-spacing: -.5px; }
.ac-tile__label { font-size: 11.5px; margin-top: 3px; color: rgba(255,255,255,.85); }

/* ---------- Boutons ---------- */

.ac-btn { display: inline-block; padding: 13px 22px; border-radius: var(--ac-radius-sm);
  font-weight: 700; font-size: 13.5px; border: 0; cursor: pointer;
  font-family: Manrope, sans-serif; background: var(--ac-ink); color: #fff; }
.ac-btn:hover { background: #0E1724; color: #fff; }
/* Modificateur : doit rester après .ac-btn — spécificité égale, c'est
   l'ordre source qui tranche. */
/* Bouton compact des lignes de liste — maquettes Mes résultats et Mentoring. */
.ac-btn--sm { padding: 9px 14px; border-radius: 10px; font-size: 12px; }
.ac-btn--ghost { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; }
.ac-btn--ghost:hover { background: rgba(255,255,255,.26); color: #fff; }
.ac-btn--light { background: var(--ac-surface); border: 1px solid var(--ac-border); color: var(--ac-text); }
/* background rappelé : .ac-btn:hover (0,2,0) impose sinon son fond marine à
   .ac-btn--light (0,1,0), qui garde pourtant sa couleur de texte sombre —
   texte #1B2436 sur fond #0E1724, illisible. Même famille de défaut que
   .ac-pill--active:hover plus bas. */
.ac-btn--light:hover { background: var(--ac-surface); border-color: #C3DFA0; color: var(--ac-text); }

.ac-pill { font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 99px;
  background: var(--ac-surface); border: 1px solid #E3E8DD; color: #4A554A;
  cursor: pointer; font-family: Manrope, sans-serif; }
.ac-pill:hover { border-color: #C3DFA0; }
.ac-pill--active { background: var(--ac-ink); color: #fff; border-color: var(--ac-ink); font-weight: 700; }
/* .ac-pill:hover (0,2,0) bat .ac-pill--active (0,1,0) : sans cette règle, la
   pastille active prend une bordure verte sur son fond marine au survol.
   Même spécificité que .ac-pill:hover, déclarée après : l'ordre tranche. */
.ac-pill--active:hover { border-color: var(--ac-ink); }

.ac-segment { display: flex; gap: 4px; padding: 4px; background: var(--ac-soft);
  border-radius: 11px; }
.ac-segment__btn { flex: 1; border: 0; cursor: pointer; padding: 8px; border-radius: 8px;
  font-family: Manrope, sans-serif; font-size: 12.5px; font-weight: 700;
  background: transparent; color: var(--ac-muted); }
.ac-segment__btn--active { background: #fff; color: var(--ac-ink);
  box-shadow: 0 1px 2px rgba(22,32,47,.14); }

.ac-body :focus-visible { outline: 2px solid var(--ac-green-dark); outline-offset: 2px; }

/* ---------- Lignes de classement ---------- */

.ac-rank-row { display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: 11px; }
.ac-rank-row--me { background: #F1F6EA; box-shadow: inset 0 0 0 1px #C3DFA0; }
.ac-rank-row__pos { width: 22px; text-align: center; font-family: Montserrat, sans-serif;
  font-weight: 800; font-size: 12.5px; color: var(--ac-grey-2); }
.ac-rank-row--top .ac-rank-row__pos { color: var(--ac-green-dark); }
.ac-rank-row__avatar { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid;
  place-items: center; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 11px;
  color: var(--ac-ink); background: var(--ac-soft); }
.ac-rank-row--first .ac-rank-row__avatar {
  background: linear-gradient(140deg, var(--ac-green-light), var(--ac-green-dark)); }
.ac-rank-row__name { font-size: 12.5px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-rank-row__sub { font-size: 11px; color: var(--ac-grey); margin-top: 1px; }

/* ---------- Podium ---------- */
/* Podium : les trois premiers, rang en chiffre fantôme derrière.
   Trois habillages distincts. Les modificateurs suivent la base — même
   spécificité, c'est l'ordre source qui tranche. */
.ac-podium { position: relative; overflow: hidden; border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  border: 1px solid transparent; }
.ac-podium__ghost { position: absolute; top: -34px; right: -6px; z-index: 0;
  pointer-events: none; font-family: Montserrat, sans-serif; font-weight: 800;
  font-size: 96px; line-height: 1; }
.ac-podium__body { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.ac-podium__stats { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 18px; }
.ac-podium__avatar { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid;
  place-items: center; font-family: Montserrat, sans-serif; font-weight: 800; font-size: 15px; }
.ac-podium__name { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: -.2px; line-height: 1.25; }
.ac-podium__value { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 25px;
  letter-spacing: -.5px; }
.ac-podium__label { font-size: 11px; }

.ac-podium--1 { background: linear-gradient(140deg,#5E8F2E,#85BD4A 60%,#B4DE7C); color: #FFF;
  min-height: 200px; }
.ac-podium--1 .ac-podium__ghost { color: rgba(255,255,255,.28); }
.ac-podium--1 .ac-podium__label { color: #E1E1E1; }
.ac-podium--1 .ac-podium__avatar { background: var(--ac-ink); color: var(--ac-green-light); }

.ac-podium--2 { background: var(--ac-ink); color: #fff; min-height: 176px; }
.ac-podium--2 .ac-podium__ghost { color: rgba(255,255,255,.08); }
.ac-podium--2 .ac-podium__label { color: var(--ac-ink-text); }
.ac-podium--2 .ac-podium__avatar { background: linear-gradient(145deg,#B4DE7C,#5E8F2E); color: var(--ac-ink); }

.ac-podium--3 { background: var(--ac-surface); color: var(--ac-text); border-color: var(--ac-border);
  min-height: 162px; }
.ac-podium--3 .ac-podium__ghost { color: #EFF3E9; }
.ac-podium--3 .ac-podium__label { color: var(--ac-grey); }
.ac-podium--3 .ac-podium__avatar { background: var(--ac-green-pale); color: #3F6220; }

/* Encart « Ma position ». */
.ac-mypos { border-radius: 20px; padding: 19px;
  background: linear-gradient(140deg,#16202F,#22384B); color: #fff; }
.ac-mypos__label { font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--ac-ink-muted); }
.ac-mypos__grid { margin-top: 16px; padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.1); display: grid;
  grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Tableau de classement ---------- */

.ac-table-wrap { overflow-x: auto; }
.ac-table-row { display: grid; grid-template-columns: 52px minmax(180px,1fr) 92px 92px 78px 96px;
  gap: 12px; min-width: 620px; align-items: center; padding: 13px 20px;
  border-bottom: 1px solid var(--ac-soft); }
.ac-table-row:hover { background: #F8FAF5; }
.ac-table-row--head { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--ac-grey); background: var(--ac-soft-2); }
.ac-table-row--me { background: #F1F6EA; box-shadow: inset 0 0 0 1px #C3DFA0; }
/* Classement : pas de colonne tendance, la grille passe de six à cinq
   colonnes. Modificateur déclaré après .ac-table-row--me — même règle
   d'ordre source que les autres modificateurs de ce fichier. */
.ac-table-row--5col { grid-template-columns: 52px minmax(180px,1fr) 92px 92px 96px;
  min-width: 560px; }
.ac-note-pill { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; }
.ac-note-pill--good   { background: var(--ac-green-pale); color: #3F6220; }
.ac-note-pill--medium { background: #FBEEDA; color: #8A5A12; }
.ac-note-pill--bad    { background: #FBE3E2; color: #8F2F2C; }

/* ---------- Badges ---------- */

.ac-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.ac-badge { aspect-ratio: 1; border-radius: var(--ac-radius-sm); display: grid; place-items: center;
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: 12px;
  background: rgba(255,255,255,.04); color: #4A5B73; border: 1px solid rgba(255,255,255,.1); }
.ac-badge--on { background: linear-gradient(145deg, var(--ac-green-light), var(--ac-green-dark));
  color: var(--ac-ink); border-color: transparent; }

/* ---------- Typographie utilitaire ----------
 * Ces classes existent pour que les templates n'aient aucun style inline
 * statique. Les seuls attributs style admis dans un template portent une
 * valeur calculée : largeur de barre, couleur issue d'un score.
 */

.ac-t-xs   { font-size: 11px; }
.ac-t-sm   { font-size: 11.5px; }
.ac-t-md   { font-size: 12.5px; }
.ac-t-base { font-size: 13px; }
.ac-t-lg   { font-size: 13.5px; }
.ac-t-xl   { font-size: 14px; }
/* Ajoutées après la tâche 6, qui a révélé les valeurs de maquette sans classe. */
.ac-t-15   { font-size: 15px; }
.ac-t-600  { font-weight: 600; }
.ac-t-700  { font-weight: 700; }
.ac-t-800  { font-weight: 800; font-family: Montserrat, sans-serif; }
.ac-t-soft { opacity: .7; }
.ac-t-muted { color: var(--ac-muted); }
.ac-t-grey  { color: var(--ac-grey); }
/* Ajoutée pour la tâche 9 (Connexion) : var(--ac-grey-2) était déjà utilisée
   par .ac-rule span mais n'avait pas encore d'utilitaire de texte. */
.ac-t-grey-2 { color: var(--ac-grey-2); }
.ac-t-green { color: var(--ac-green-dark); }
.ac-t-vivid { color: var(--ac-green-vivid); }
.ac-t-invert { color: var(--ac-ink-text); }
.ac-t-ink-muted { color: var(--ac-ink-muted); }
.ac-t-on-dark { color: rgba(255,255,255,.9); }
.ac-t-right { text-align: right; }
.ac-t-center { text-align: center; }
.ac-t-lead  { line-height: 1.6; }
.ac-t-tight { line-height: 1.3; }
/* Pas de line-height relevés dans les maquettes. .ac-t-tight (1.3) et
   .ac-t-lead (1.6) restent les alias nommés des deux valeurs historiques. */
.ac-t-lh-125 { line-height: 1.25; }
.ac-t-lh-135 { line-height: 1.35; }
.ac-t-lh-15  { line-height: 1.5; }
.ac-t-lh-155 { line-height: 1.55; }
.ac-t-clip  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-t-nowrap { white-space: nowrap; }

.ac-h2 { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 21px;
  letter-spacing: -.5px; margin: 0; }
.ac-h3 { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 15.5px;
  letter-spacing: -.2px; line-height: 1.25; margin: 0; }

/* ---------- Utilitaires de disposition ---------- */

.ac-u-row     { display: flex; align-items: center; }
.ac-u-row-top { display: flex; align-items: flex-start; }
/* Ajoutées après la tâche 6, qui a révélé les valeurs de maquette sans classe. */
.ac-u-end     { align-items: flex-end; }
.ac-u-col     { display: flex; flex-direction: column; }
.ac-u-block   { display: block; }
.ac-u-between { justify-content: space-between; }
.ac-u-wrap    { flex-wrap: wrap; }
.ac-u-fill    { flex: 1; min-width: 0; }
.ac-u-gap-3   { gap: 3px; }
.ac-u-gap-7   { gap: 7px; }
.ac-u-gap-10  { gap: 10px; }
.ac-u-gap-13  { gap: 13px; }
.ac-u-gap-20  { gap: 20px; }
/* La remise à zéro vient avant les utilitaires directionnels ci-dessous : à
 * spécificité égale, l'ordre source tranche, donc .ac-u-m0 doit précéder tout
 * .ac-u-mt-N / .ac-u-mb-N pour qu'ils restent capables de la surcharger sur
 * un seul côté — ne jamais la redéplacer après ce point. */
.ac-u-m0      { margin: 0; }
.ac-u-mt-4    { margin-top: 4px; }
.ac-u-mt-5    { margin-top: 5px; }
.ac-u-mt-6    { margin-top: 6px; }
.ac-u-mt-12   { margin-top: 12px; }
.ac-u-mt-14   { margin-top: 14px; }
.ac-u-mt-22   { margin-top: 22px; }
.ac-u-mt-30   { margin-top: 30px; }
/* Ajoutée pour la tâche 9 (Connexion) : marge avant le pied de page du formulaire. */
.ac-u-mt-34   { margin-top: 34px; }
/* Ajoutée pour la tâche 10 (Mentoring) : pousse le formulaire de demande en
 * bas de .ac-cat (flex column), pour que les boutons d'une même rangée de
 * cartes de hauteurs inégales restent alignés sur la même ligne de base. */
.ac-u-mt-auto { margin-top: auto; }
.ac-u-mb-4    { margin-bottom: 4px; }
.ac-u-mb-13   { margin-bottom: 13px; }
.ac-u-mb-14   { margin-bottom: 14px; }
.ac-u-mb-16   { margin-bottom: 16px; }
.ac-u-mb-30   { margin-bottom: 30px; }
.ac-u-maxw-480 { max-width: 480px; }

/* ---------- Utilitaires ---------- */

.ac-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 16px; }
.ac-cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,348px);
  gap: 26px; align-items: start; }
.ac-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 26px; }
.ac-empty { padding: 38px 20px; text-align: center; font-size: 13px; color: var(--ac-grey); }
.ac-hidden { display: none !important; }
.ac-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Menu mobile ---------- */

.ac-burger { display: none; position: fixed; top: 14px; left: 14px; z-index: 40;
  width: 44px; height: 44px; border-radius: var(--ac-radius-sm); border: 0; cursor: pointer;
  background: var(--ac-ink); color: #fff; font-size: 20px; line-height: 1; }

@media (max-width: 900px) {
  .ac-shell { grid-template-columns: 1fr; }
  .ac-burger { display: block; }
  .ac-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--ac-sidebar-w); z-index: 50;
    transform: translateX(-100%); transition: transform .25s ease; }
  .ac-sidebar.is-open { transform: none; }
  .ac-main { padding: 72px 18px 48px; }
  .ac-cols { grid-template-columns: 1fr; }
  .ac-side { position: static; }
  .ac-hero { padding: 24px 20px; }
  .ac-hero h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-sidebar { transition: none; }
}

/* ---------- Connexion : écran scindé ---------- */

.ac-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.ac-split__form { display: flex; flex-direction: column; justify-content: center;
  padding: 48px min(6vw, 72px); }
.ac-split__inner { width: 100%; max-width: 420px; margin: 0 auto; }
.ac-split__brand { position: relative; overflow: hidden; display: flex;
  align-items: center; justify-content: center; padding: 48px;
  background: linear-gradient(150deg, #16202F 0%, #1E3A2A 42%, #4F7C28 78%, #85BD4A 100%); }
.ac-split__brand::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(720px 420px at 78% 8%, rgba(180,222,124,.34), transparent 68%),
              radial-gradient(520px 320px at 12% 92%, rgba(133,189,74,.28), transparent 70%); }
.ac-sso { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 15px 20px; border-radius: var(--ac-radius-md); border: 1px solid #DFE4D9;
  background: #fff; cursor: pointer; font-family: Manrope, sans-serif; font-size: 14.5px;
  font-weight: 700; color: var(--ac-text); }
.ac-sso:hover { border-color: #C3DFA0; box-shadow: 0 12px 30px -20px rgba(22,32,47,.5); }
.ac-rule { display: flex; align-items: center; gap: 12px; margin: 22px 0; }
.ac-rule::before, .ac-rule::after { content: ""; flex: 1; height: 1px; background: #E3E8DD; }
.ac-rule span { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--ac-grey-2); }

/* Éléments ci-dessous : hors bloc fourni par la tâche, ajoutés pour éliminer
   le style inline statique qui restait dans le gabarit du brief — même
   logique que les compléments CSS des tâches 6 et 7. */

/* mix-blend-mode: le PNG du logo est opaque, fond blanc pur (255,255,255) ;
   sur le fond --ac-bg (#F4F6F1, légèrement teinté), sans ce mode de fusion
   le carré blanc du logo resterait visible. Vérifié sur le fichier réel. */
.ac-split__logo { display: block; width: 196px; height: auto; margin-bottom: 44px;
  mix-blend-mode: multiply; }
.ac-split__form h1 { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 31px;
  line-height: 1.15; letter-spacing: -.8px; margin: 0 0 10px; text-wrap: pretty; }

/* Encart « accès réservé » : pastille + texte. */
.ac-split__note { display: flex; align-items: flex-start; gap: 11px; background: #fff;
  border: 1px solid var(--ac-border); border-radius: var(--ac-radius-md); padding: 14px 15px; }
.ac-split__note .ac-dot { margin-top: 5px; box-shadow: 0 0 0 4px rgba(133,189,74,.18); }
.ac-split__note strong { color: var(--ac-text); font-weight: 700; }

/* Repli identifiant/mot de passe, replié par défaut. */
.ac-split__details { margin-top: 18px; }
.ac-split__details summary { cursor: pointer; }

/* Panneau de marque : contenu et classement des agences. */
.ac-split__brand-inner { position: relative; max-width: 420px; color: #fff; }
.ac-split__brand-inner h2 { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 27px;
  line-height: 1.2; letter-spacing: -.6px; margin: 0 0 8px; text-wrap: pretty; }
/* Classe dédiée plutôt que ".ac-split__brand-inner p" : le panneau contient
   aussi le <p class="ac-empty"> de repli (classement vide), qui ne doit pas
   hériter de ces styles. */
.ac-split__lead { margin: 0 0 24px; font-size: 13.5px; line-height: 1.6;
  color: rgba(255,255,255,.85); }
/* Fond sombre : le gris de .ac-empty (var(--ac-grey)) n'est pas assez
   contrasté ici, d'où la surcharge de couleur ci-dessous. */
.ac-split__brand-inner .ac-empty { color: rgba(255,255,255,.7); }

.ac-split__teams { display: flex; flex-direction: column; gap: 8px; }
.ac-split__team { display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--ac-radius-md); padding: 12px 14px; }
.ac-split__team-rank { width: 20px; }

/* ---------- Connexion : repli identifiant/mot de passe (Theme My Login) ---------- */

/* La garde de academy_scripts() (functions.php) retire style.css des pages v2,
   à raison — sa règle d'élément « header » démolissait la topbar (voir le
   commentaire à cet endroit). Mais style.css était aussi la seule feuille du
   thème à habiller Theme My Login (règles .tml-*, lignes 855-942 du fichier
   v1) ; cette feuille v2 n'avait aucun équivalent. Le shortcode
   [theme-my-login] rendu dans le <details> de template-connexion.php (ligne
   74) est le repli d'accès si le SSO Google tombe — la seule porte d'entrée
   restante — et redirect_non_logged_users() (functions.php) y envoie tout
   visiteur déconnecté : c'est la page la plus vue des internautes non
   identifiés. Les règles ci-dessous ne sont donc pas du code mort : sans
   elles ce formulaire retombe aux styles par défaut du navigateur. Portées et
   réécrites dans le langage v2 (mêmes rayons, même bordure #DFE4D9, même
   Manrope que .ac-sso juste au-dessus) plutôt que copiées telles quelles
   depuis style.css — voir le rapport final de la refonte pour le détail des
   règles laissées de côté (sélecteur de rôle, indicateur de robustesse du mot
   de passe : absents du formulaire de connexion rendu ici). */

.tml .tml-label { display: block; margin: 0 0 8px; color: var(--ac-muted);
  text-transform: uppercase; font-weight: 700; letter-spacing: .04em;
  font-size: 12px; font-family: Manrope, sans-serif; }

.tml .tml-field { display: block; width: 100%; margin: 0 0 14px; padding: 14px 15px;
  border: 1px solid #DFE4D9; border-radius: var(--ac-radius-md); background: #fff;
  color: var(--ac-text); font-family: Manrope, sans-serif; font-size: 14.5px;
  box-sizing: border-box; }
/* outline non supprimé (contrairement à style.css) : .ac-body :focus-visible,
   plus haut dans ce fichier, fournit déjà un anneau de focus accessible au
   clavier pour tous les éléments, celui-ci compris. */
.tml .tml-field:focus { border-color: var(--ac-green-dark); }

.tml-button { width: 100%; border: 0; border-radius: var(--ac-radius-md);
  background: linear-gradient(135deg, var(--ac-green), var(--ac-green-dark));
  padding: 15px 20px; margin-top: 4px; font-family: Manrope, sans-serif;
  font-size: 14.5px; font-weight: 700; color: #fff; cursor: pointer; }
.tml-button:hover { box-shadow: 0 12px 30px -20px rgba(22,32,47,.5); }

.tml-links { list-style: none; margin: 14px 0 0; padding: 0; }
.tml-links a { display: inline-block; color: var(--ac-muted); line-height: 2;
  font-size: 13.5px; font-weight: 600; }
.tml-links a:hover { color: var(--ac-green-dark); }

/* Succès et confirmation : même traitement carte-à-accent-latérale que le
   reste du système v2, teinte verte. */
.tml-action-confirmaction .success, .tml-message, .tml-success { display: block;
  margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid var(--ac-green-dark);
  border-radius: 0 var(--ac-radius-sm) var(--ac-radius-sm) 0; background: var(--ac-green-pale);
  color: var(--ac-text); font-size: 13.5px; font-weight: 500; line-height: 1.5; }

/* Erreur : style.css employait la même bordure verte que le succès (aucune
   distinction visuelle) ; --ac-red existe déjà dans ce fichier pour ce cas,
   utilisé ici pour la première fois côté formulaire. */
.tml-error { display: block; margin: 0 0 14px; padding: 12px 14px;
  border-left: 3px solid var(--ac-red); border-radius: 0 var(--ac-radius-sm) var(--ac-radius-sm) 0;
  background: #fff; color: var(--ac-text); font-size: 13.5px; font-weight: 500; line-height: 1.5; }
.tml-error a { color: var(--ac-text); text-decoration: underline; }

@media (max-width: 900px) {
  .ac-split { grid-template-columns: 1fr; }
  .ac-split__brand { display: none; }
}

/* ---------- Quiz : parcours de jeu ----------
 * Utilisé par single-quizz-v2.php. Jeu de classes distinct de .ac-level,
 * qui porte une sémantique de progression (validé / faible / à faire) sans
 * rapport avec l'état d'une réponse pendant une question.
 *
 * Les modificateurs suivent leur base : spécificité égale, l'ordre source
 * tranche — règle appliquée dans tout ce fichier.
 */

.ac-choice { display: flex; align-items: flex-start; gap: 12px; width: 100%;
  text-align: left; padding: 14px 16px; border-radius: var(--ac-radius-sm);
  background: var(--ac-soft-2); border: 1px solid var(--ac-border-2);
  cursor: pointer; font-family: Manrope, sans-serif; font-size: 13.5px;
  color: var(--ac-text); line-height: 1.45; }
.ac-choice:hover { background: #F1F6EA; border-color: #C3DFA0; }
.ac-choice[disabled] { cursor: default; }
.ac-choice[disabled]:hover { background: var(--ac-soft-2); border-color: var(--ac-border-2); }
.ac-choice__key { width: 26px; height: 26px; flex: none; border-radius: 8px;
  display: grid; place-items: center; font-family: Montserrat, sans-serif;
  font-weight: 800; font-size: 11.5px; background: #C9D3C2; color: #fff; }
.ac-choice__text { flex: 1; min-width: 0; padding-top: 3px; }

/* États après réponse. --muted en premier : les deux autres doivent pouvoir
   le surcharger si jamais ils se cumulaient. */
.ac-choice--muted { opacity: .55; }
.ac-choice--right { background: var(--ac-green-pale); border-color: #C3DFA0; opacity: 1; }
.ac-choice--right .ac-choice__key { background: var(--ac-green-dark); }
.ac-choice--wrong { background: #FBE3E2; border-color: #F0C9C7; opacity: 1; }
.ac-choice--wrong .ac-choice__key { background: var(--ac-red); }

.ac-feedback { margin-top: 18px; padding: 16px 18px; border-radius: var(--ac-radius-sm);
  border-left: 3px solid var(--ac-grey-2); background: var(--ac-soft); }
.ac-feedback--right { border-left-color: var(--ac-green-dark); background: var(--ac-green-pale); }
.ac-feedback--wrong { border-left-color: var(--ac-red); background: #FBE3E2; }
.ac-feedback__title { font-family: Montserrat, sans-serif; font-weight: 800;
  font-size: 15px; letter-spacing: -.2px; margin: 0 0 8px; }

/* « Ajouter au compte rendu » : la case est masquée, le libellé porte l'état. */
.ac-keep { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px;
  padding: 8px 14px; border-radius: 99px; border: 1px solid var(--ac-border);
  background: var(--ac-surface); cursor: pointer; font-size: 12.5px;
  font-weight: 700; color: var(--ac-muted); }
.ac-keep:hover { border-color: #C3DFA0; }
.ac-keep input { position: absolute; opacity: 0; width: 0; height: 0; }
.ac-keep__mark { width: 16px; height: 16px; flex: none; border-radius: 5px;
  border: 2px solid var(--ac-grey-2); }
.ac-keep input:checked ~ .ac-keep__mark { background: var(--ac-green-dark);
  border-color: var(--ac-green-dark); }
.ac-keep input:focus-visible ~ .ac-keep__mark { outline: 2px solid var(--ac-green-dark);
  outline-offset: 2px; }

.ac-score { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 44px;
  letter-spacing: -1.2px; line-height: 1; }
.ac-score__unit { font-size: 20px; color: var(--ac-grey-2); }

/* Notation. L'ordre DOM des étoiles est décroissant (5 → 1) et la rangée est
   inversée à l'affichage : « input:checked ~ label » ne peut désigner que des
   frères suivants, donc cocher la 3e allume bien les trois premières à l'écran. */
.ac-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.ac-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.ac-stars label { width: 30px; height: 30px; cursor: pointer;
  background: var(--ac-grey-2); transition: background .12s ease;
  -webkit-mask: var(--ac-star) center / contain no-repeat;
  mask: var(--ac-star) center / contain no-repeat; }
.ac-stars label:hover, .ac-stars label:hover ~ label,
.ac-stars input:checked ~ label { background: var(--ac-green); }
.ac-stars input:focus-visible ~ label { outline: 2px solid var(--ac-green-dark);
  outline-offset: 2px; }

.ac-field { width: 100%; margin-top: 16px; padding: 13px 15px; border-radius: var(--ac-radius-sm);
  border: 1px solid var(--ac-border); background: var(--ac-surface);
  font-family: Manrope, sans-serif; font-size: 13.5px; color: var(--ac-text);
  line-height: 1.5; resize: vertical; min-height: 96px; }
.ac-field:focus { outline: none; border-color: var(--ac-green-dark); }

@media (prefers-reduced-motion: reduce) {
  .ac-stars label { transition: none; }
}

@media (max-width: 900px) {
  .ac-choice { font-size: 13px; padding: 12px 13px; }
  .ac-score { font-size: 36px; }
}