/* ArtiBox Artist — ce qui est propre à l'espace des artistes. Le socle (jetons --ab-*, composants ab-*)
   vient de /commun/artibox.css. Téléphone de 360 px d'abord, puis 768 px et 1 080 px.
   Aucune règle ne dépend d'un attribut style : les largeurs des jauges passent par element.style. */

/* Couleurs des coauteurs (barre de répartition, pastilles) */
:root { --c0: var(--ab-accent); --c1: #c8336b; --c2: #e8a21f; --c3: #1e9e7a; --c4: #2f7bd6; --c5: #8a4fd1; }
[data-theme="sombre"] { --c1: #ff6fa5; --c2: #ffc35c; --c3: #44d6ad; --c4: #7cb4ff; --c5: #c4a0ff; }
.c0 { --c: var(--c0); } .c1 { --c: var(--c1); } .c2 { --c: var(--c2); } .c3 { --c: var(--c3); } .c4 { --c: var(--c4); } .c5 { --c: var(--c5); }

/* --- Cadre ------------------------------------------------------------------------------- */
body.ab { overflow-x: hidden; }
body.ab::before { /* halo d'accent discret en haut de page */
  content: ""; position: fixed; inset: 0 0 auto 0; height: 420px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 100% at 85% 0%, color-mix(in srgb, var(--ab-accent) 14%, transparent), transparent 70%),
    radial-gradient(50% 80% at 0% 0%, color-mix(in srgb, var(--ab-accent-2) 9%, transparent), transparent 70%);
}
#vue:focus { outline: none; }
.ab-marque small { margin-left: 2px; }
.entete-avatar { width: 40px; height: 40px; text-decoration: none; box-shadow: 0 0 0 2px var(--ab-fond), 0 0 0 4px color-mix(in srgb, var(--ab-accent) 35%, transparent); }
[data-theme="sombre"] .ab-avatar { color: #160f0a; }
.ab-entete .ab-theme { color: var(--ab-texte-2); }
@media (max-width: 767px) { .entete-avatar { display: none; } }
.ab-entete-nav a { min-height: 44px; }
.espace-haut { margin-top: var(--ab-e4); }
.bloc { display: block; margin-top: 4px; font-weight: 400; }
.ab-entete-page h1 { overflow-wrap: anywhere; }
.ab-carte-titre h2 { font-size: var(--ab-t-l); margin: 0; }
.ab-carte-titre { margin-bottom: var(--ab-e4); flex-wrap: wrap; }
.titre-ico { width: 22px; height: 22px; fill: var(--ab-accent); }
.encart-texte { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.encart-texte strong { font-weight: 700; }

/* Deux colonnes sur ordinateur : contenu principal + colonne latérale */
.deux-colonnes { display: grid; gap: var(--ab-e4); margin-top: var(--ab-e4); align-items: start; }
.deux-colonnes > * { min-width: 0; }
@media (min-width: 1080px) {
  .deux-colonnes { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--ab-e6); margin-top: var(--ab-e6); }
}

/* Squelettes de chargement */
.sq-titre { width: min(320px, 70%); height: 34px; }
.sq-grille { display: grid; gap: var(--ab-e3); }
.sq-heros { border-radius: var(--ab-r-xl); }
@media (min-width: 768px) { .sq-grille { grid-template-columns: 1.2fr 1fr; } }

/* --- Accueil (connexion, inscription) ---------------------------------------------------- */
#vue > .ab-accueil { padding-inline: 0; padding-top: var(--ab-e2); min-height: calc(100dvh - 140px); }
.deconnecte #vue { padding-bottom: var(--ab-e10); }
.accueil-surtitre { align-self: flex-start; padding: 6px 12px; }
.accueil-surtitre svg { width: 16px; height: 16px; fill: currentColor; }
.ab-accueil-marque h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem); line-height: 1.04; }
.texte-degrade { background: linear-gradient(100deg, var(--ab-accent), var(--ab-accent-2)); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.ab-points strong { color: var(--ab-texte); font-weight: 700; }
.ab-points svg { padding: 0; }
.accueil-vitrine { position: relative; height: 150px; margin-top: var(--ab-e4); }
.accueil-vitrine .ab-pochette { position: absolute; width: 118px; height: 118px; border-radius: var(--ab-r-m); box-shadow: var(--ab-ombre-3); }
.vitrine-0 { left: 0; top: 18px; transform: rotate(-7deg); }
.vitrine-1 { left: 86px; top: 0; z-index: 2; transform: rotate(2deg); }
.vitrine-2 { left: 172px; top: 22px; transform: rotate(8deg); }
.vitrine-puce { position: absolute; z-index: 3; left: 150px; bottom: -6px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--ab-r-rond); background: var(--ab-surface-haute); border: 1px solid var(--ab-bord);
  box-shadow: var(--ab-ombre-2); font-size: var(--ab-t-s); color: var(--ab-texte-2); white-space: nowrap; }
.vitrine-puce svg { width: 18px; height: 18px; fill: var(--ab-succes); }
.vitrine-puce strong { color: var(--ab-texte); }
@media (max-width: 899px) { .accueil-vitrine { display: none; } }
.accueil-carte { display: flex; flex-direction: column; gap: var(--ab-e5); padding: var(--ab-e5); border-radius: var(--ab-r-xl); }
@media (min-width: 768px) { .accueil-carte { padding: var(--ab-e8); } }
.accueil-intro { display: flex; flex-direction: column; gap: 4px; }
.accueil-intro h2 { font-size: var(--ab-t-xl); }
.ab-segments.ab-plein { width: 100%; }
.ab-segments button { min-height: 40px; }
.champ-libelle { display: flex; flex-wrap: wrap; gap: 0 4px; align-items: baseline; }
.ab-form legend { display: flex; align-items: center; gap: 10px; }
.etape-num { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--ab-accent-doux); color: var(--ab-accent); font: 800 var(--ab-t-s)/1 var(--ab-police); }
.ab-form fieldset + fieldset { padding-top: var(--ab-e4); border-top: 1px solid var(--ab-bord); }
.accueil-carte .ab-form legend { font-size: var(--ab-t-m); }

/* --- Tableau de bord --------------------------------------------------------------------- */
.tb-alertes { margin-bottom: var(--ab-e4); }
.tb-haut { display: grid; gap: var(--ab-e4); }
@media (min-width: 900px) { .tb-haut { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--ab-e6); } }
.heros-solde { display: flex; flex-direction: column; gap: var(--ab-e4); min-height: 220px; justify-content: space-between; }
.heros-solde::before { /* ondes sonores en filigrane */
  content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; z-index: -1; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / .16); box-shadow: 0 0 0 36px rgb(255 255 255 / .05), 0 0 0 72px rgb(255 255 255 / .035);
}
.heros-tete { display: flex; justify-content: space-between; align-items: center; }
.heros-solde .ab-surtitre { color: rgb(255 255 255 / .85); }
.heros-ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; fill: #fff; background: rgb(255 255 255 / .16); }
.heros-montant { font: 850 clamp(2.4rem, 1.7rem + 3vw, 3.4rem)/1 var(--ab-police-titre); letter-spacing: -.04em; color: #fff;
  overflow-wrap: anywhere; }
.heros-montant small { font-size: .42em; font-weight: 700; letter-spacing: 0; margin-left: 6px; color: rgb(255 255 255 / .82); }
.heros-infos { display: flex; flex-wrap: wrap; gap: var(--ab-e3) var(--ab-e6); }
.heros-infos span { display: flex; flex-direction: column; gap: 2px; }
.heros-infos small { font-size: var(--ab-t-xs); color: rgb(255 255 255 / .8); }
.heros-infos strong { font-size: var(--ab-t-m); }
.ab-btn.sur-heros { --b-fond: #fff; --b-texte: #2a1d7a; box-shadow: 0 6px 20px -6px rgb(0 0 0 / .35); }
.ab-btn.sur-heros:hover { filter: none; --b-fond: #f3f0ff; }
.ab-heros :focus-visible { outline-color: #fff; }
.tb-stats { align-content: stretch; }
.tb-stats .ab-stat { position: relative; padding-top: var(--ab-e4); }
.stat-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; margin-bottom: 4px;
  background: var(--ab-accent-doux); color: var(--ab-accent); flex: none; }
.stat-ico svg { width: 18px; height: 18px; fill: currentColor; }
.ab-stat.ab-accent .stat-ico { background: var(--ab-surface); }
.tb-stats .ab-stat-valeur { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
@media (min-width: 900px) { .tb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Graphique */
.graphique-zone { margin-top: var(--ab-e2); }
.carte-graphique .ab-graphique .barre { fill: var(--ab-accent); }
.carte-graphique .ab-graphique .barre:hover { fill: var(--ab-accent-2); }
@media (max-width: 639px) {
  /* Le graphique est réduit de moitié environ sur téléphone : on grossit ses textes pour qu'ils restent lisibles. */
  .ab-graphique text { font-size: 19px; }
}

/* Classements (titres, lieux) */
.ab-liste > li.classement { align-items: center; }
.classement .ab-element-texte { gap: 3px; }
.classement .ab-jauge { height: 6px; margin-top: 4px; }
.classement .ab-element-fin { min-width: 52px; }
.ab-rang { font-size: var(--ab-t-s); }
li.classement:nth-child(1) .ab-rang { color: var(--ab-accent); }
.ab-pochette.petite { width: 44px; height: 44px; }
.lieu-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--ab-r-s);
  background: var(--ab-fond-2); color: var(--ab-texte-2); }
.lieu-ico svg { width: 20px; height: 20px; fill: currentColor; }

/* Carte de la RD Congo */
.carte-cadre { border-radius: var(--ab-r-m); background: radial-gradient(80% 80% at 30% 40%, var(--ab-accent-doux), transparent 75%);
  padding: var(--ab-e2); }
.carte-rdc { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; color: var(--ab-accent-2); }
.carte-rdc .pays { fill: color-mix(in srgb, var(--ab-accent) 12%, var(--ab-surface)); stroke: color-mix(in srgb, var(--ab-accent) 55%, transparent);
  stroke-width: 1.4; stroke-linejoin: round; }
.carte-rdc .point { fill: var(--ab-accent-2); stroke: var(--ab-surface); stroke-width: 2; }
.carte-rdc text { font: 700 13px var(--ab-police); fill: var(--ab-texte); paint-order: stroke; stroke: var(--ab-surface); stroke-width: 4px;
  stroke-linejoin: round; }
.villes { list-style: none; margin: var(--ab-e3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.villes li { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 36px; font-size: var(--ab-t-s); }
.villes li span { display: inline-flex; align-items: center; gap: 8px; color: var(--ab-texte-2); }
.villes svg { width: 16px; height: 16px; fill: var(--ab-accent); }

/* Invitation */
.carte-invitation { border: 1.5px solid color-mix(in srgb, var(--ab-accent) 40%, transparent); display: flex; flex-direction: column; gap: var(--ab-e4); }
.invitation-tete { display: flex; gap: var(--ab-e4); align-items: flex-start; }
.invitation-tete h2 { margin: 6px 0 4px; font-size: var(--ab-t-l); overflow-wrap: anywhere; }

/* --- Mes titres ---------------------------------------------------------------------------- */
.filtres { margin-bottom: var(--ab-e4); }
.ab-puce { min-height: 40px; }
.puce-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--ab-r-rond);
  background: var(--ab-fond-2); color: var(--ab-texte-2); font-size: var(--ab-t-xs); font-weight: 750; }
.ab-puce[aria-pressed="true"] .puce-n { background: color-mix(in srgb, var(--ab-fond) 22%, transparent); color: inherit; }
.liste-titres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ab-e3); }
.liste-vide { grid-column: 1 / -1; }
.titre-element { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "p t c" "p f f"; gap: 4px var(--ab-e3);
  align-items: center; padding: var(--ab-e3); border-radius: var(--ab-r-l); background: var(--ab-surface); border: 1px solid var(--ab-bord);
  box-shadow: var(--ab-ombre-1); color: inherit; text-decoration: none;
  transition: transform var(--ab-m-moyen) var(--ab-courbe), box-shadow var(--ab-m-moyen), border-color var(--ab-m-moyen); }
.titre-element:hover { transform: translateY(-2px); box-shadow: var(--ab-ombre-2); border-color: color-mix(in srgb, var(--ab-accent) 35%, var(--ab-bord)); }
.titre-pochette { grid-area: p; width: 64px; height: 64px; align-self: start; }
.titre-texte { grid-area: t; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.titre-nom { font: 750 var(--ab-t-m)/1.25 var(--ab-police-titre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titre-texte small { color: var(--ab-texte-2); font-size: var(--ab-t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titre-texte .titre-meta { color: var(--ab-texte-3); font-size: var(--ab-t-xs); }
.titre-chevron { grid-area: c; display: grid; place-items: center; color: var(--ab-texte-3); }
.titre-chevron svg { width: 20px; height: 20px; fill: currentColor; }
.titre-fin { grid-area: f; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ab-e2) var(--ab-e3); margin-top: 6px; }
.titre-part { display: flex; flex-direction: column; gap: 4px; min-width: 120px; flex: 1; max-width: 200px; }
.titre-part > span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.titre-part small { font-size: var(--ab-t-xs); color: var(--ab-texte-3); }
.titre-part strong { font-variant-numeric: tabular-nums; }
.titre-part .ab-jauge { height: 6px; }
@media (min-width: 768px) {
  .liste-titres { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ab-e4); }
  .titre-element { grid-template-columns: minmax(0, 1fr); grid-template-areas: "p" "t" "f"; padding: var(--ab-e3) var(--ab-e3) var(--ab-e4); height: 100%;
    align-items: start; }
  .titre-pochette { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--ab-r-m); margin-bottom: 6px; }
  .titre-chevron { display: none; }
  .titre-fin { flex-direction: column; align-items: stretch; margin-top: 4px; }
  .titre-fin .ab-badge { align-self: flex-start; }
  .titre-part { max-width: none; }
}

/* --- Détail d'un titre ------------------------------------------------------------------- */
.titre-tete { display: grid; gap: var(--ab-e5); align-items: end; margin-bottom: var(--ab-e4); grid-template-columns: 112px minmax(0, 1fr); }
.titre-grande { width: 112px; }
.titre-tete-texte { display: flex; flex-direction: column; gap: var(--ab-e2); min-width: 0; }
.titre-tete-texte h1 { font-size: var(--ab-t-3xl); overflow-wrap: anywhere; }
.retour { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 44px; margin: -10px 0 -6px -6px; padding: 0 8px;
  border-radius: var(--ab-r-rond); font-weight: 650; font-size: var(--ab-t-s); text-decoration: none; }
.retour svg { width: 18px; height: 18px; fill: currentColor; }
.retour:hover { background: var(--ab-accent-doux); }
@media (max-width: 559px) {
  .titre-tete { grid-template-columns: 1fr; align-items: start; }
  .titre-tete .ab-pochette { order: 2; width: 168px; }
  .titre-tete-texte { order: 1; }
  .titre-tete .ab-actions { display: none; }
}
@media (min-width: 768px) { .titre-tete { grid-template-columns: 220px minmax(0, 1fr); gap: var(--ab-e8); } .titre-grande { width: 220px; } }
.fiche { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; margin: 0; }
.fiche dt, .fiche dd { padding: 10px 0; border-bottom: 1px solid var(--ab-bord); margin: 0; }
.fiche dt { color: var(--ab-texte-2); font-size: var(--ab-t-s); padding-right: var(--ab-e4); }
.fiche dd { text-align: right; font-weight: 650; overflow-wrap: anywhere; }
.fiche dt:nth-last-of-type(1), .fiche dd:last-child { border-bottom: 0; }
.code-libelle { margin-top: var(--ab-e3); font-size: var(--ab-t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ab-texte-3); }
.code { margin-top: 4px; padding: 10px 12px; border-radius: var(--ab-r-s); background: var(--ab-fond-2); font: 500 12px/1.5 var(--ab-police-mono);
  overflow-wrap: anywhere; color: var(--ab-texte-2); }

/* Répartition des parts */
.total-zone { display: flex; flex-direction: column; gap: var(--ab-e2); margin: var(--ab-e4) 0; }
.repartition { display: flex; height: 14px; gap: 3px; border-radius: var(--ab-r-rond); overflow: hidden; background: var(--ab-fond-2); }
.repartition span { display: block; height: 100%; background: var(--c); min-width: 4px; transition: width var(--ab-m-moyen) var(--ab-courbe); }
.total { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ab-succes); }
.total.faux { color: var(--ab-danger); }
.parts { display: flex; flex-direction: column; gap: var(--ab-e3); }
.part { display: flex; flex-direction: column; gap: var(--ab-e3); padding: var(--ab-e3) var(--ab-e4) var(--ab-e4); border: 1px solid var(--ab-bord);
  border-radius: var(--ab-r-m); background: var(--ab-surface-2); }
.part-rang { display: grid; grid-template-columns: 1fr 104px var(--ab-cible); grid-template-areas: "q q x" "r p p"; gap: var(--ab-e3); align-items: end; }
.part-pastille { display: none; }
.part-qui { grid-area: q; } .part-role { grid-area: r; } .part-pourcent { grid-area: p; }
.part-retirer { grid-area: x; color: var(--ab-texte-3); }
.part-retirer:hover { color: var(--ab-danger); background: var(--ab-danger-fond); }
.part .ab-champ { min-width: 0; }
.part::before { content: ""; display: block; height: 4px; width: 36px; margin-bottom: -4px; border-radius: 2px; background: var(--ab-bord-fort); }
.part:has(.c0)::before { background: var(--c0); } .part:has(.c1)::before { background: var(--c1); } .part:has(.c2)::before { background: var(--c2); }
.part:has(.c3)::before { background: var(--c3); } .part:has(.c4)::before { background: var(--c4); } .part:has(.c5)::before { background: var(--c5); }
@media (min-width: 640px) {
  .part-rang { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 104px var(--ab-cible); grid-template-areas: "q r p x"; }
}
.partage { gap: var(--ab-e2); }
.partage .ab-btn { min-height: 40px; }
.parts-actions { margin-top: var(--ab-e4); justify-content: space-between; }
@media (max-width: 479px) { .parts-actions > .ab-btn { flex: 1 1 100%; } }
.part-avatar { width: 40px; height: 40px; background: var(--c); color: #fff; }
[data-theme="sombre"] .part-avatar { color: #160f0a; }

/* --- Dépôt -------------------------------------------------------------------------------- */
.depot-form { gap: var(--ab-e4); }
.depot-form fieldset.etape { display: flex; flex-direction: column; gap: var(--ab-e4); padding: var(--ab-e5); border: 1px solid var(--ab-bord); }
@media (min-width: 768px) { .depot-form fieldset.etape { padding: var(--ab-e6); } }
.depot-form fieldset.etape legend { float: left; width: 100%; margin: 0; }   /* légende dans la carte */
.depot-form fieldset.etape legend + * { clear: both; }
.zone-fichier { position: relative; display: flex; align-items: center; gap: var(--ab-e4); min-height: 112px; padding: var(--ab-e5);
  border: 2px dashed var(--ab-bord-fort); border-radius: var(--ab-r-l); background: var(--ab-surface-2); cursor: pointer;
  transition: border-color var(--ab-m-rapide), background var(--ab-m-rapide); }
.zone-fichier:hover, .zone-fichier.survol { border-color: var(--ab-accent); background: var(--ab-accent-doux); }
.zone-fichier:focus-within { outline: 3px solid var(--ab-accent); outline-offset: 2px; }
.zone-fichier.choisi { border-style: solid; border-color: var(--ab-succes); background: var(--ab-succes-fond); }
.zone-fichier.choisi .zone-ico { background: var(--ab-succes); }
.zone-ico { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--ab-accent), var(--ab-accent-2)); box-shadow: var(--ab-ombre-2); }
.zone-ico svg { width: 26px; height: 26px; fill: #fff; }
[data-theme="sombre"] .zone-ico svg { fill: #160f0a; }
.zone-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zone-texte strong { font-size: var(--ab-t-l); color: var(--ab-texte); overflow-wrap: anywhere; }
.zone-texte small { color: var(--ab-texte-2); font-weight: 400; }
.sortie { border: 1px solid var(--ab-bord); border-radius: var(--ab-r-m); }
.sortie summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 var(--ab-e4); cursor: pointer; font-weight: 650; list-style: none; }
.sortie summary::-webkit-details-marker { display: none; }
.sortie summary svg { width: 20px; height: 20px; fill: var(--ab-accent); }
.sortie summary .chevron { margin-left: auto; fill: var(--ab-texte-3); transition: transform var(--ab-m-moyen) var(--ab-courbe); }
.sortie[open] summary .chevron { transform: rotate(180deg); }
.sortie-champs { padding: 0 var(--ab-e4) var(--ab-e4); }
.depot-envoi { display: flex; flex-direction: column; gap: var(--ab-e3); }
.envoi { display: flex; flex-direction: column; gap: 6px; }
.envoi-jauge { height: 10px; }
.envoi-jauge > span { animation: none; transition: width var(--ab-m-moyen) linear; }
.pas { list-style: none; margin: var(--ab-e4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--ab-e5); counter-reset: pas; }
.pas li { display: flex; gap: var(--ab-e3); align-items: flex-start; }
.pas strong { display: block; margin-bottom: 2px; }
.pas-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--ab-accent-doux); color: var(--ab-accent); }
.pas-ico svg { width: 20px; height: 20px; fill: currentColor; }
@media (min-width: 1080px) { .depot-aide { position: sticky; top: 84px; } }

/* --- Argent ------------------------------------------------------------------------------- */
.argent-haut { display: grid; gap: var(--ab-e4); margin-bottom: var(--ab-e4); }
@media (min-width: 900px) { .argent-haut { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--ab-e6); } }
.carte-retrait { display: flex; flex-direction: column; }
.retrait-zone { display: flex; flex-direction: column; gap: var(--ab-e4); }
.retrait-compte { display: flex; align-items: center; gap: var(--ab-e3); padding: var(--ab-e3) var(--ab-e4); border-radius: var(--ab-r-m); background: var(--ab-surface-2);
  border: 1px solid var(--ab-bord); }
.retrait-compte strong { display: block; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.retrait-compte .stat-ico { margin: 0; }
.recap { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; padding: var(--ab-e2) var(--ab-e4); border-radius: var(--ab-r-m);
  background: var(--ab-accent-doux); }
.recap dt, .recap dd { margin: 0; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--ab-accent) 18%, transparent); }
.recap dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; overflow-wrap: anywhere; }
.recap dt:nth-last-of-type(1), .recap dd:last-child { border-bottom: 0; }
.recap .recap-net { font-size: var(--ab-t-l); font-weight: 800; color: var(--ab-accent); }
.retrait-actions > .ab-btn { flex: 1 1 140px; }
details.mois { padding: 0; overflow: hidden; }
details.mois summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ab-e3); min-height: 60px; padding: var(--ab-e3) var(--ab-e5);
  cursor: pointer; list-style: none; font-weight: 700; }
details.mois summary::-webkit-details-marker { display: none; }
.mois-nom { display: inline-flex; align-items: center; gap: 10px; text-transform: capitalize; }
.mois-nom svg { width: 20px; height: 20px; fill: var(--ab-accent); }
.mois-fin { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ab-t-l); }
.mois-fin .chevron { width: 20px; height: 20px; fill: var(--ab-texte-3); transition: transform var(--ab-m-moyen) var(--ab-courbe); }
details.mois[open] .chevron { transform: rotate(180deg); }
details.mois[open] summary { border-bottom: 1px solid var(--ab-bord); }
details.mois .ab-tableau-cadre { padding: 0 var(--ab-e3) var(--ab-e2); }
@media (min-width: 640px) { details.mois .ab-tableau-cadre { padding: 0 var(--ab-e2) var(--ab-e2); } }
.ab-section > .ab-section-titre + details, .ab-section details + details { margin-top: 0; }

/* --- Profil ------------------------------------------------------------------------------- */
@media (min-width: 1080px) { .deux-colonnes.profil { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } .profil-cote { position: sticky; top: 84px; } }
.profil-carte { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ab-e2); overflow: hidden; padding-top: 0; }
.profil-fond { align-self: stretch; height: 84px; margin: 0 calc(-1 * var(--ab-e5)) -42px; position: relative; isolation: isolate;
  background: linear-gradient(120deg, var(--ab-accent), var(--ab-accent-2)); }
@media (min-width: 768px) { .profil-fond { margin-inline: calc(-1 * var(--ab-e6)); } }
.profil-fond::after { content: ""; position: absolute; inset: 0; opacity: .18; background-image: var(--ab-motif-tissage); background-size: 44px 44px; }
.profil-carte .ab-avatar.grand { width: 84px; height: 84px; font-size: 1.75rem; position: relative; box-shadow: 0 0 0 5px var(--ab-surface), var(--ab-ombre-2); }
.profil-carte h2 { margin-top: var(--ab-e2); }
.profil-carte .fiche { align-self: stretch; margin-top: var(--ab-e3); text-align: left; }
.profil fieldset.ab-carte { padding: var(--ab-e5); border: 1px solid var(--ab-bord); }
@media (min-width: 768px) { .profil fieldset.ab-carte { padding: var(--ab-e6); } }
.profil fieldset.ab-carte legend { float: left; width: 100%; margin: 0; }
.profil fieldset.ab-carte legend + * { clear: both; }
@media (max-width: 479px) { .profil-enregistrer { width: 100%; } }

/* --- Retouches --------------------------------------------------------------------------- */
#vue > .ab-carte, #vue > .ab-section + .ab-carte { margin-top: var(--ab-e4); }
#vue > .ab-section { margin-top: var(--ab-e6); }
@media (max-width: 639px) {
  .ab-tableau.ab-cartes tbody tr:last-child { border-bottom: 0; }
  .ab-graphique text { font-size: 26px; }
  .classement .ab-element-texte strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
.graphique-note { display: none; margin-top: var(--ab-e2); }
.graphique-zone.etroit + .graphique-note { display: block; }
@media (max-width: 559px) { .ab-accueil-marque .ab-points { display: none; } }
@media (max-width: 1079px) {
  .depot .depot-aide { order: 0; }
  .profil-cote { display: contents; }
  .profil-form { order: 2; }
  .profil-deconnexion { order: 3; }
}
.sortie summary > span { display: inline; }
.profil-carte h2 { margin-top: var(--ab-e2); margin-bottom: 0; }
.profil-carte > p { margin: 0; }
@media (max-width: 479px) {
  .classement .ab-pochette, .classement .lieu-ico { width: 44px; height: 44px; }
  .classement .ab-element-fin { min-width: 40px; }
  .ab-liste > li.classement { gap: 10px; }
  .classement .ab-rang { width: 16px; }
}