/* L'annuaire des parrains, servi par api/annuaire.php.
 *
 * DESSINÉ LE 23 OCTOBRE 2026, sur la demande de Joris : « très fluide,
 * très ergonomique, très intuitif, facile d'utilisation, mais poussé
 * techniquement et visuellement », en se basant sur ce qui marche chez
 * les autres annuaires. Ce qui est repris d'eux : la carte d'un parrain
 * avec son visage, son pseudo, sa note et un gros bouton (1parrainage), le
 * niveau et la série de jours (Super Parrain). Ce qui n'est repris de
 * personne : le gain vérifié à la source en tête de page.
 *
 * LES GESTES DU SITE, PAS DE NOUVEAUX. L'ouverture sur l'encre, comme les
 * pages de marque ; le contenu posé sur le papier ; les angles courts de
 * --angle ; la sève sur DEUX choses seulement par page, le montant le plus
 * généreux et le bouton principal. Les boutons des parrains prennent le
 * vert sombre : vingt boutons en sève sur une page, c'est vingt boutons
 * qui crient et aucun qu'on voit.
 *
 * AUCUNE COULEUR N'EST ÉCRITE ICI, sauf sur l'encre de l'ouverture, qui ne
 * suit pas le thème et dont le texte ne doit donc pas le suivre non plus
 * (la leçon de l'avertissement des jeux, 20 septembre 2026).
 *
 * L'ORDRE DU DOCUMENT EST CELUI DU TÉLÉPHONE, et le grand écran déplace
 * la colonne de côté. Trois vues sur quatre se font sur téléphone.
 */

/* ==========================================================
   La coque et l'ouverture
   ========================================================== */

.an-coque { padding: 0; }

.an-ouverture {
  background:
    radial-gradient(90% 70% at 18% 0%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 38%, transparent 68%),
    linear-gradient(180deg, #0d1a15 0%, #08100e 62%),
    #08100e;
  color: #f5f7f6;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  padding: calc(74px + var(--pas-4)) max(16px, env(safe-area-inset-right, 0px)) var(--pas-4) max(16px, env(safe-area-inset-left, 0px));
}
.an-ouverture--courte { padding-bottom: var(--pas-3); }

.an-dedans { width: min(100%, 1180px); margin: 0 auto; }
.an-dedans--etroit { width: min(100%, 760px); }
/* Une page étroite garde le même bord à gauche dans l'ouverture et dans
   le contenu : un titre calé à 1180 px au dessus d'une liste de 820 px
   donnait deux alignements sur la même page. */
.an-etroit .an-dedans { width: min(100%, 820px); }

.an-fil { margin: 0 0 18px; color: #b6c1bc; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 4px 0; }
.an-fil a { color: #b6c1bc; text-decoration: none; }
/* QUARANTE QUATRE PIXELS À TOUCHER, la règle du site mesurée par
   ops/loupe.mjs : le rembourrage agrandit la zone, la marge négative
   rend la place, et la ligne ne bouge pas d'un pixel. */
.an-fil a, .an-pseudo, .an-qui-detail a, .an-podium a, .an-classement a { padding-block: 14px; margin-block: -14px; }
.an-fil a:hover { color: #f5f7f6; text-decoration: underline; }
.an-fil span[aria-hidden] { margin: 0 7px; color: #8b9793; }

.an-titre-ligne { display: flex; align-items: center; gap: 16px; }
.an-titre-ligne > div { min-width: 0; }
.an-logo {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 64px; height: 64px; padding: 8px; border-radius: var(--angle-objet);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(190, 211, 201, .22);
}
.an-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }

.an-ouverture h1 {
  margin: 0; color: #f5f7f6; text-wrap: balance;
  font: 800 clamp(1.7rem, 4vw, 2.6rem)/1.12 var(--ff-titre); letter-spacing: -.025em;
}
.an-chapo { margin: 12px 0 0; max-width: 60ch; color: #c6cfcb; font-size: 1.05rem; line-height: 1.6; }

/* ==========================================================
   La grille : la liste et sa colonne
   ========================================================== */

.an-page-corps {
  width: min(100%, 1180px); margin: 0 auto;
  padding: var(--pas-4) max(16px, env(safe-area-inset-right, 0px)) var(--pas-6) max(16px, env(safe-area-inset-left, 0px));
  display: grid; gap: var(--pas-4);
  grid-template-columns: minmax(0, 1fr);
  /* SUR TÉLÉPHONE : le gain, puis les parrains, puis l'invitation. La
     première version mettait l'invitation avant la liste, et le premier
     parrain n'arrivait qu'au troisième écran. La colonne se dissout pour
     que ses deux blocs prennent chacun leur place. */
  grid-template-areas: "gain" "liste" "invit";
}
.an-liste-zone { grid-area: liste; min-width: 0; display: grid; gap: 18px; align-content: start; }
/* La même pile, SANS placement de grille. Réutiliser .an-liste-zone dans
   l'espace du parrain posait « grid-area: liste » dans une grille qui n'a
   pas cette zone : le navigateur en a créé une, et la colonne centrale
   s'est coupée en deux sur ordinateur, vu à l'essai du 23 octobre 2026. */
.an-pile { min-width: 0; display: grid; gap: 14px; align-content: start; }
.an-cote { display: contents; }
.an-cote > .an-gain { grid-area: gain; }
.an-cote > .an-invitation { grid-area: invit; }

@media (min-width: 1000px) {
  .an-page-corps { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "liste cote"; column-gap: 40px; }
  .an-cote { grid-area: cote; min-width: 0; display: grid; gap: 18px; align-content: start; }
  .an-cote > .an-gain, .an-cote > .an-invitation { grid-area: auto; }
  /* La colonne suit le défilement : le gain et l'invitation restent sous
     les yeux pendant qu'on compare les parrains. align-self:start, sinon
     elle s'étire et n'a plus rien à coller. */
  .an-cote { position: sticky; top: 92px; align-self: start; }
}

/* AUCUNE COLONNE NE S'ÉLARGIT POUR UN MOT. Une grille sans colonnes
   déclarées prend la largeur de son plus long mot : un bonus de quatre
   vingts lettres collées poussait la carte à 884 px sur un téléphone de
   375, et la page la coupait net. Trouvé en jouant l'attaquant le
   23 octobre 2026, avec les textes les plus longs que le site accepte. */
.an-liste, .an-mes, .an-carte, .an-mienne, .an-pile, .an-liste-zone, .an-form,
.an-replie-dedans, .an-espace-cote, .an-espace-centre, .an-champ, .an-bloc {
  grid-template-columns: minmax(0, 1fr);
}
.an-bonus, .an-bonus span, .an-presentation, .an-qui-detail, .an-message span, .an-bloc-sous, .an-mienne-etat {
  overflow-wrap: anywhere; min-width: 0;
}

/* SUR LA PAGE D'UNE MARQUE, sa feuille borne chaque paragraphe et chaque
   élément de liste à 51 caractères, pour la lecture. Les cartes des
   parrains sont des éléments de liste : elles tombaient à la moitié de
   leur section, vu sur ordinateur le 23 octobre 2026. */
.pa-section.an li, .pa-section.an p { max-width: none; }

/* ==========================================================
   Les blocs posés sur le papier
   ========================================================== */

.an-bloc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--angle);
  padding: clamp(18px, 2.4vw, 26px); box-shadow: var(--shadow-sm); min-width: 0;
}
.an-bloc > :first-child { margin-top: 0; }
.an-bloc > :last-child { margin-bottom: 0; }
.an-bloc h2, .an-section-titre {
  margin: 0 0 6px; font: 800 1.2rem/1.25 var(--ff-titre); letter-spacing: -.01em; color: var(--text); text-wrap: balance;
}
.an-bloc-sous { margin: 0 0 16px; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.an-etiquette {
  margin: 0 0 10px; font: 800 14px/1.2 var(--ff-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}

/* ---------- Le gain, en tête de colonne ---------- */

.an-gain { position: relative; overflow: hidden; border-color: var(--accent-line); box-shadow: var(--shadow); }
.an-gain::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--marque, var(--accent)); }
.an-gain-montant { display: block; margin: 0; font: 800 clamp(2.2rem, 6vw, 3rem)/1.05 var(--ff-titre); letter-spacing: var(--ls-grand); overflow-wrap: anywhere; }
.an-gain-montant--long { font-size: clamp(1.4rem, 3.6vw, 1.75rem); line-height: 1.2; }
.an-gain-date { margin: 10px 0 0; color: var(--faint); font-size: 14px; }
.an-gain-bonus {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 12px;
  border-radius: var(--angle); background: var(--accent-wash); border: 1px solid var(--accent-line);
  color: var(--text); font-size: .95rem; line-height: 1.4;
}
.an-gain-bonus svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent-ink); }

/* ---------- L'invitation à devenir parrain ---------- */

.an-invitation { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; }
.an-invitation img { width: 88px; height: 88px; }
.an-invitation p { margin: 0 0 10px; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.an-invitation strong { color: var(--text); }

/* ==========================================================
   La barre au dessus de la liste
   ========================================================== */

.an-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.an-compte { margin: 0; font: 700 1.05rem/1.3 var(--ff-titre); color: var(--text); }
.an-compte span { color: var(--muted); font: 500 .95rem var(--ff-texte); }

/* ==========================================================
   Les boutons de l'annuaire
   ========================================================== */

.an-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 18px; border-radius: var(--angle);
  font: 700 .98rem/1.2 var(--ff-texte); text-align: center; text-decoration: none; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  transition: transform var(--mv-court) var(--mv-courbe), background-color var(--mv-court) var(--mv-courbe), border-color var(--mv-court) var(--mv-courbe);
  -webkit-tap-highlight-color: transparent;
}
.an-bouton:hover { border-color: var(--accent-line); background: var(--accent-wash); }
.an-bouton:active { transform: translateY(1px); }
.an-bouton:focus-visible { outline: 3px solid var(--accent-fonce); outline-offset: 2px; }
.an-bouton svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Le bouton d'un parrain : vert sombre, texte blanc. La règle du site : un
   vert vif porte de l'encre, un vert sombre porte du blanc. */
.an-bouton--plein { background: var(--accent-fonce); border-color: var(--accent-fonce); color: var(--on-accent-fonce); }
.an-bouton--plein:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); filter: brightness(1.08); }

.an-bouton--large { width: 100%; }
.an-bouton--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.an-bouton--danger:hover { background: var(--danger-wash); border-color: var(--danger); }
.an-bouton--discret { border-color: transparent; background: transparent; color: var(--muted); min-height: 44px; padding: 0 10px; }
.an-bouton--discret:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
.an-bouton[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* Le bouton principal de la page prend la sève par la classe du site. */
.an .resource-primary { min-height: 52px; }

/* Le bouton de l'ouverture, posé sur l'encre : clair, pour se voir. */
.an-ouverture .an-bouton { background: rgba(255, 255, 255, .06); border-color: rgba(190, 211, 201, .3); color: #f5f7f6; }
.an-ouverture .an-bouton:hover { background: rgba(255, 255, 255, .12); border-color: rgba(190, 211, 201, .5); }
.an-ouverture .an-bouton:focus-visible { outline-color: #8ff2bc; }

/* ==========================================================
   La carte d'un parrain
   ========================================================== */

.an-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.an-carte {
  position: relative; display: grid; gap: 14px; min-width: 0;
  padding: clamp(16px, 2.2vw, 22px); border-radius: var(--angle);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: border-color var(--mv-court) var(--mv-courbe), box-shadow var(--mv-court) var(--mv-courbe);
}
.an-carte:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
/* L'annonce en tête : un liseré et un fond très léger, pas un panneau qui
   crie. Le filleul doit la remarquer sans croire à une publicité. */
.an-carte--tete { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-wash), transparent 70%), var(--surface); }
.an-carte--ascendra { border-color: var(--accent-line); border-width: 1px; }

.an-carte-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
/* Sous 360 px, l'étiquette « En tête » passe sous le nom plutôt que de
   l'écraser sur trois lignes : la base de 150 px force le retour. */
.an-qui { min-width: 0; flex: 1 1 120px; }
.an-qui-detail a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.an-qui-detail a:hover { color: var(--text); }
.an-pseudo {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  font: 800 1.05rem/1.3 var(--ff-titre); color: var(--text); text-decoration: none;
}
a.an-pseudo:hover { text-decoration: underline; text-underline-offset: 3px; }
.an-qui-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; color: var(--muted); font-size: 14px; }
.an-qui-detail img { width: 20px; height: 20px; }
.an-point::before { content: "·"; margin-right: 8px; color: var(--faint); }

/* L'avatar : les initiales sur un disque. Aucune photo à téléverser,
   donc rien à modérer, et un visage qui se reconnaît d'une page à l'autre
   par sa teinte, calculée sur le pseudo côté serveur. */
.an-avatar {
  flex: 0 0 auto; position: relative; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  font: 800 1.05rem/1 var(--ff-titre); letter-spacing: .02em; color: var(--text);
  background: color-mix(in srgb, var(--teinte, var(--accent)) 22%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--teinte, var(--accent)) 45%, transparent);
}
.an-avatar img { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.an-avatar--grand { width: 88px; height: 88px; font-size: 1.9rem; }
.an-avatar--grand img { width: 44px; height: 44px; right: -10px; bottom: -10px; }
.an-avatar--logo { background: #08100e; border-color: var(--accent-line); }
.an-avatar--logo > img:only-child { position: static; width: 30px; height: 30px; filter: none; }
a.an-point { color: var(--muted); }
a.an-point:hover { color: var(--text); }
.an-avatar--marque { border-radius: var(--angle-objet); background: var(--surface-2); border-color: var(--line); padding: 7px; }
.an-avatar--marque > img:only-child { position: static; width: 100%; height: 100%; object-fit: contain; filter: none; border-radius: 6px; }

.an-pastille {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--angle-pilule);
  font: 800 14px/1.2 var(--ff-texte); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--accent-ink); background: var(--accent-wash); border: 1px solid var(--accent-line);
}
.an-pastille svg { width: 14px; height: 14px; }
.an-pastille--neutre { color: var(--muted); background: var(--surface-2); border-color: var(--line); }
.an-pastille--attente { color: var(--warn); background: var(--warn-wash); border-color: color-mix(in srgb, var(--warn) 34%, transparent); }

.an-bonus {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border-radius: var(--angle);
  background: var(--accent-wash); border: 1px dashed var(--accent-line); color: var(--text); font-size: .95rem; line-height: 1.45;
}
.an-bonus svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--accent-ink); }
.an-bonus strong { color: var(--accent-ink); }
.an-bonus small { display: block; margin-top: 2px; color: var(--faint); font-size: 14px; }

.an-texte { margin: 0; color: var(--text); font-size: .98rem; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-line; }

.an-carte-bas { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.an-carte-bas > * { flex: 1 1 200px; }

/* Le code, copiable d'un geste. Sans script, il reste sélectionnable. */
.an-code {
  display: flex; align-items: stretch; min-height: 48px; min-width: 0;
  border: 1px dashed var(--line-strong); border-radius: var(--angle); background: var(--surface-2); overflow: hidden;
}
.an-code code {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding: 0 12px;
  font: 700 1rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .08em; color: var(--text);
  overflow-x: auto; white-space: nowrap; user-select: all; -webkit-user-select: all;
}
.an-copier {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; min-width: 96px; justify-content: center;
  border: 0; border-left: 1px dashed var(--line-strong); background: transparent; color: var(--accent-ink);
  font: 700 .92rem var(--ff-texte); cursor: pointer;
}
.an-copier:hover { background: var(--accent-wash); }
.an-copier:focus-visible { outline: 3px solid var(--accent-fonce); outline-offset: -3px; }
.an-copier svg { width: 16px; height: 16px; }
.an-copier[data-etat="copie"] { color: var(--on-accent-fonce); background: var(--accent-fonce); }

/* ==========================================================
   Les états vides et les messages
   ========================================================== */

.an-vide { display: grid; justify-items: center; gap: 10px; padding: var(--pas-4) var(--pas-3); text-align: center; }
.an-vide img { width: min(220px, 60%); height: auto; }
.an-vide h2 { margin: 0; font: 800 1.25rem/1.3 var(--ff-titre); color: var(--text); text-wrap: balance; }
.an-vide p { margin: 0; max-width: 46ch; color: var(--muted); line-height: 1.55; }

.an-message {
  display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: var(--angle);
  font-size: .98rem; line-height: 1.5; color: var(--text);
  background: var(--accent-wash); border: 1px solid var(--accent-line);
}
.an-message svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--accent-ink); }
.an-message--erreur { background: var(--danger-wash); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.an-message--erreur svg { color: var(--danger); }
.an-message--attention { background: var(--warn-wash); border-color: color-mix(in srgb, var(--warn) 36%, transparent); }
.an-message--attention svg { color: var(--warn); }

/* ==========================================================
   Les formulaires
   ========================================================== */

.an-form { display: grid; gap: 16px; }
.an-champ { display: grid; gap: 6px; min-width: 0; }
/* La règle de base des étiquettes est une grille : elle mettait la
   mention « facultatif » sur sa propre ligne. Ici l'étiquette redevient
   du texte qui coule. */
.an-champ > label, .an-champ > .an-champ-nom { display: block; font: 700 .95rem/1.3 var(--ff-texte); color: var(--text); }
.an-champ-aide { margin: 0; color: var(--faint); font-size: 14px; line-height: 1.45; }
.an-champ-facultatif { display: inline; margin-left: 4px; font-weight: 500; color: var(--faint); }

.an input:not([type="radio"]):not([type="checkbox"]),
.an textarea,
.an select {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--angle);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: 400 1rem/1.4 var(--ff-texte);
  transition: border-color var(--mv-court) var(--mv-courbe), box-shadow var(--mv-court) var(--mv-courbe);
}
/* SEIZE PIXELS AU MOINS dans un champ : en dessous, Safari sur iPhone
   zoome sur le champ quand on le touche, et la page reste agrandie. */
.an input, .an textarea, .an select { font-size: max(16px, 1rem); }
.an textarea { min-height: 120px; resize: vertical; }
.an select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.an input:focus, .an textarea:focus, .an select:focus {
  outline: none; border-color: var(--accent-fonce); box-shadow: 0 0 0 3px var(--accent-wash);
}
.an input::placeholder, .an textarea::placeholder { color: var(--faint); opacity: 1; }

.an-mdp { position: relative; }
.an-mdp input { padding-right: 96px !important; }
.an-mdp button {
  position: absolute; right: 1px; top: 1px; bottom: 1px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 4px;
  background: transparent; color: var(--accent-ink); font: 700 .9rem var(--ff-texte); cursor: pointer;
}
.an-mdp button:hover { background: var(--accent-wash); }
.an-mdp button:focus-visible { outline: 2px solid var(--accent-fonce); }

.an-compteur { justify-self: end; color: var(--faint); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ==========================================================
   L'espace du parrain
   ========================================================== */

.an-bonjour { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.an-bonjour > div { min-width: 0; flex: 1 1 260px; }
.an-niveau-ligne { margin: 8px 0 0; color: #c6cfcb; font-size: .98rem; }
.an-progression { margin: 10px 0 0; max-width: 420px; }
.an-jauge { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.an-jauge span { display: block; height: 100%; border-radius: inherit; background-color: #55e695; background-image: var(--matiere-fond); }
.an-progression p { margin: 6px 0 0; color: #b6c1bc; font-size: 14px; }

.an-espace {
  width: min(100%, 1180px); margin: 0 auto;
  padding: var(--pas-4) max(16px, env(safe-area-inset-right, 0px)) var(--pas-6) max(16px, env(safe-area-inset-left, 0px));
  display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr);
}
.an-espace-cote, .an-espace-centre { display: grid; gap: 18px; align-content: start; min-width: 0; }
@media (min-width: 1000px) {
  .an-espace { grid-template-columns: 380px minmax(0, 1fr); column-gap: 28px; align-items: start; }
}

/* ---------- Le passage du jour ---------- */

.an-jour { border-color: var(--accent-line); box-shadow: var(--shadow); }
.an-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 14px 0 16px; padding: 0; list-style: none; }
.an-semaine li { display: grid; justify-items: center; gap: 5px; font-size: 14px; color: var(--faint); }
.an-semaine i {
  display: grid; place-items: center; width: 100%; max-width: 38px; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px dashed var(--line-strong); background: transparent; font-style: normal;
}
.an-semaine li.fait i { border: 0; background-color: var(--accent); background-image: var(--matiere-fond); color: var(--on-accent); }
.an-semaine li.fait i svg { width: 55%; height: 55%; }
.an-semaine li.aujourdhui span { color: var(--text); font-weight: 800; }
.an-semaine li.prime i { border-color: var(--etoile); }
.an-jour-fait { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text); font-weight: 600; }
.an-jour-fait svg { width: 22px; height: 22px; color: var(--accent-ink); flex: 0 0 auto; }

/* ---------- Les chiffres ---------- */

.an-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.an-chiffres > div { padding: 12px; border-radius: var(--angle); background: var(--surface-2); min-width: 0; }
.an-chiffres dt { color: var(--muted); font-size: 14px; line-height: 1.3; }
.an-chiffres dd { margin: 4px 0 0; font: 800 1.35rem/1.1 var(--ff-titre); color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---------- Les crédits ---------- */

.an-solde { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.an-solde strong { font: 800 2.4rem/1 var(--ff-titre); letter-spacing: var(--ls-grand); color: var(--text); font-variant-numeric: tabular-nums; }
.an-solde span { color: var(--muted); font-weight: 600; }

.an-promo {
  display: grid; gap: 4px; margin: 14px 0; padding: 14px; border-radius: var(--angle);
  background: linear-gradient(135deg, var(--accent-wash), transparent), var(--surface-2); border: 1px solid var(--accent-line);
}
.an-promo strong { font: 800 1.02rem/1.3 var(--ff-titre); color: var(--text); }
.an-promo p { margin: 0; color: var(--muted); font-size: 14px; }
.an-rebours { font: 800 1.15rem/1.2 var(--ff-titre); color: var(--accent-ink); font-variant-numeric: tabular-nums; }

.an-paquets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.an-paquet {
  display: grid; gap: 2px; justify-items: start; padding: 14px; min-height: 92px; text-align: left; cursor: pointer;
  border-radius: var(--angle); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  transition: border-color var(--mv-court) var(--mv-courbe), transform var(--mv-court) var(--mv-courbe), box-shadow var(--mv-court) var(--mv-courbe);
}
.an-paquet:hover { border-color: var(--accent-fonce); box-shadow: var(--shadow); transform: translateY(-2px); }
.an-paquet:focus-visible { outline: 3px solid var(--accent-fonce); outline-offset: 2px; }
.an-paquet b { font: 800 1.35rem/1.1 var(--ff-titre); font-variant-numeric: tabular-nums; }
.an-paquet span { color: var(--muted); font-size: 14px; }
.an-paquet s { color: var(--faint); font-size: 14px; }
.an-paquet em { font-style: normal; font-weight: 800; color: var(--accent-ink); }

/* ---------- Les annonces du parrain ---------- */

.an-mes { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.an-mienne { display: grid; gap: 14px; padding: clamp(16px, 2.2vw, 22px); border-radius: var(--angle); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); min-width: 0; }
.an-mienne-haut { display: flex; align-items: center; gap: 12px; min-width: 0; }
.an-mienne-haut h3 { margin: 0; font: 800 1.08rem/1.25 var(--ff-titre); color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.an-mienne-haut .an-pastille { margin-left: auto; }
.an-mienne-etat { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

.an-duree { border: 0; margin: 0; padding: 0; min-width: 0; }
.an-duree legend { padding: 0; margin: 0 0 8px; font: 700 .95rem var(--ff-texte); color: var(--text); }
.an-durees { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.an-durees label { position: relative; display: block; cursor: pointer; }
.an-durees input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.an-durees span {
  display: grid; justify-items: center; gap: 2px; padding: 9px 4px; border-radius: var(--angle);
  border: 1px solid var(--line-strong); background: var(--surface); text-align: center;
  transition: border-color var(--mv-court) var(--mv-courbe), background-color var(--mv-court) var(--mv-courbe);
}
.an-durees b { font: 800 1.05rem/1.1 var(--ff-titre); color: var(--text); }
.an-durees small { font-size: 14px; color: var(--muted); line-height: 1.2; }
.an-durees input:checked + span { border-color: var(--accent-fonce); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-fonce); }
.an-durees input:focus-visible + span { outline: 3px solid var(--accent-fonce); outline-offset: 2px; }
.an-duree-total { margin: 10px 0 0; color: var(--muted); font-size: 14px; }

.an-replie { border-top: 1px solid var(--line); padding-top: 4px; }
.an-replie > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; cursor: pointer;
  list-style: none; font-weight: 700; color: var(--text);
}
.an-replie > summary::-webkit-details-marker { display: none; }
.an-replie > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform var(--mv-court) var(--mv-courbe); margin-right: 4px; }
.an-replie[open] > summary::after { transform: rotate(-135deg); }
.an-replie > summary:focus-visible { outline: 3px solid var(--accent-fonce); outline-offset: 2px; border-radius: 4px; }
.an-replie-dedans { display: grid; gap: 14px; padding: 6px 0 10px; }

/* ---------- Les quêtes ---------- */

.an-quetes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.an-quetes li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: .96rem; color: var(--text); }
.an-quetes li i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed var(--line-strong); font-style: normal; }
.an-quetes li.faite i { border: 0; background: var(--accent-fonce); color: var(--on-accent-fonce); }
.an-quetes li.faite i svg { width: 14px; height: 14px; }
.an-quetes li.faite span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.an-quetes li b { font-size: 14px; color: var(--accent-ink); white-space: nowrap; }

/* ==========================================================
   Les pages de compte : inscription, connexion, secours
   ========================================================== */

.an-acces {
  width: min(100%, 1180px); margin: 0 auto;
  padding: var(--pas-4) max(16px, env(safe-area-inset-right, 0px)) var(--pas-6) max(16px, env(safe-area-inset-left, 0px));
  display: grid; gap: var(--pas-4); grid-template-columns: minmax(0, 1fr); align-items: start;
}
.an-acces > * { min-width: 0; }
.an-acces-carte { width: min(100%, 480px); justify-self: center; }
.an-acces-carte h2 { margin-bottom: 14px; }
.an-acces-carte > .an-message { margin-bottom: 16px; }
/* SUR TÉLÉPHONE, LE FORMULAIRE D'ABORD. Venu pour se connecter, on ne
   fait pas défiler une illustration et trois avantages : la première
   version mettait le champ du pseudo au troisième écran. */
.an-acces-carte { order: -1; }
.an-acces-illu img { width: min(150px, 40%); }
.an-atouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.an-atouts li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--text); line-height: 1.5; }
.an-atouts li i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); font-style: normal; }
.an-atouts li i svg { width: 18px; height: 18px; }
.an-atouts li span { color: var(--muted); }
.an-atouts li strong { display: block; color: var(--text); }
.an-acces-illu { display: grid; justify-items: center; gap: 16px; }
.an-acces-illu img { width: min(240px, 60%); height: auto; }
@media (min-width: 900px) {
  .an-acces-carte { order: 0; }
  .an-acces { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); column-gap: 72px; align-items: center; }
  .an-acces-carte { justify-self: end; }
  .an-acces-illu { justify-items: start; }
  .an-acces-illu img { width: 260px; }
}

.an-cle {
  display: flex; align-items: stretch; margin: 16px 0; border-radius: var(--angle); overflow: hidden;
  border: 2px dashed var(--accent-fonce); background: var(--accent-wash);
}
.an-cle code { flex: 1 1 auto; min-width: 0; padding: 16px; font: 800 clamp(1.05rem, 4vw, 1.4rem)/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; color: var(--text); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.an-cle .an-copier { border-left: 2px dashed var(--accent-fonce); }

/* ==========================================================
   Le profil public
   ========================================================== */

.an-profil-tete { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.an-profil-tete > div { min-width: 0; flex: 1 1 240px; }
.an-profil-tete .an-avatar { color: #f5f7f6; background: rgba(255, 255, 255, .08); border-color: rgba(190, 211, 201, .35); }
.an-profil-niveau { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 5px 12px 5px 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(190, 211, 201, .25); color: #e2e8e5; font-weight: 700; font-size: .95rem; }
.an-profil-niveau img { width: 26px; height: 26px; }
.an-presentation { margin: 0; color: var(--text); font-size: 1.02rem; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; max-width: 68ch; }

/* ==========================================================
   Le classement
   ========================================================== */

.an-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; margin: 0 0 18px; padding: 0; list-style: none; }
.an-podium li { display: grid; justify-items: center; gap: 6px; padding: 16px 8px; border-radius: var(--angle); background: var(--surface); border: 1px solid var(--line); text-align: center; min-width: 0; }
.an-podium li:nth-child(1) { order: 2; padding-top: 26px; border-color: var(--accent-line); box-shadow: var(--shadow); }
.an-podium li:nth-child(2) { order: 1; }
.an-podium li:nth-child(3) { order: 3; }
.an-podium img { width: 56px; height: 56px; }
.an-podium li:nth-child(1) img { width: 72px; height: 72px; }
.an-podium a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1rem var(--ff-titre); color: var(--text); text-decoration: none; }
.an-podium a:hover { text-decoration: underline; }
.an-podium span { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.an-rang { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 800 .9rem var(--ff-titre); font-variant-numeric: tabular-nums; }
.an-classement { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.an-classement li { display: grid; grid-template-columns: auto 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--angle); background: var(--surface); border: 1px solid var(--line); }
.an-classement img { width: 32px; height: 32px; }
.an-classement a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text); text-decoration: none; }
.an-classement a:hover { text-decoration: underline; }
.an-classement b { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; font-size: 14px; white-space: nowrap; }

/* ==========================================================
   Le mouvement, avec retenue
   ========================================================== */

@media (prefers-reduced-motion: no-preference) {
  .an-liste > li, .an-mes > li { animation: an-entree var(--mv-long) var(--mv-courbe) both; }
  .an-liste > li:nth-child(2) { animation-delay: 40ms; }
  .an-liste > li:nth-child(3) { animation-delay: 80ms; }
  .an-liste > li:nth-child(n+4) { animation-delay: 120ms; }
  @keyframes an-entree { from { transform: translateY(8px); } to { transform: none; } }
  /* Le geste du jour a fait gagner des points : la série s'allume. */
  .an-semaine li.aujourdhui.fait i { animation: an-allume .6s var(--mv-courbe) both; }
  @keyframes an-allume { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
}

/* ==========================================================
   Le téléphone
   ========================================================== */

/* L'ouverture suit le reste du site sur téléphone : centrée. Le logo
   passe alors au dessus du titre, sinon il se cale à côté du chapo et
   le titre centré flotte au dessus de rien. */
@media (max-width: 920px) {
  .an-titre-ligne { flex-direction: column; align-items: center; gap: 14px; }
  .an-fil { justify-content: center; }
  .an-bonjour, .an-profil-tete { justify-content: center; }
  .an-progression { margin-inline: auto; }
}

@media (max-width: 560px) {
  .an-logo { width: 52px; height: 52px; padding: 6px; }
  .an-carte-bas > * { flex-basis: 100%; }
  .an-durees { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-chiffres dd { font-size: 1.15rem; }
  .an-podium img { width: 44px; height: 44px; }
  .an-podium li:nth-child(1) img { width: 56px; height: 56px; }
  .an-classement li { grid-template-columns: auto 28px minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; }
  .an-invitation { grid-template-columns: 64px minmax(0, 1fr); }
  .an-invitation img { width: 64px; height: 64px; }
}

@media (forced-colors: active) {
  .an-semaine li.fait i, .an-jauge span { background: Highlight; }
}