/* ArtiBox Partner — ce qui est propre à l'espace des bailleurs de fonds.
 * Le socle (jetons --ab-*, composants ab-*) vient de /commun/artibox.css ; l'accent « fleuve » est
 * posé par <html data-appli="partner">. Préfixe des classes de l'espace : pa-. */

/* --- Fond de page : une lueur d'accent très douce en haut ------------------------------- */
body.ab {
  background:
    radial-gradient(1200px 520px at 85% -10%, color-mix(in srgb, var(--ab-accent) 9%, transparent), transparent 70%),
    radial-gradient(900px 420px at -10% 0%, color-mix(in srgb, var(--ab-or) 7%, transparent), transparent 70%),
    var(--ab-fond);
  background-attachment: fixed;
}
main:focus { outline: none; }

/* Petites icônes posées par JavaScript (ArtiBox.icone) */
.pa-icone { display: inline-flex; flex: none; align-items: center; justify-content: center; }
.pa-icone svg { width: 20px; height: 20px; fill: currentColor; }

/* --- En-tête d'appli --------------------------------------------------------------------- */
.ab-entete-interieur { gap: var(--ab-e2); }
.pa-qui { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pa-qui-texte { display: none; flex-direction: column; min-width: 0; line-height: 1.2; }
.pa-qui-texte strong { font-size: var(--ab-t-s); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.pa-qui-texte small { font-size: var(--ab-t-xs); color: var(--ab-texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; }
.pa-deconnexion { min-height: var(--ab-cible); min-width: var(--ab-cible); padding: 0 12px; }
.pa-deconnexion svg { width: 18px; height: 18px; }
.pa-deconnexion-texte { display: none; }
@media (min-width: 720px) {
  .pa-qui-texte { display: flex; }
  .pa-deconnexion-texte { display: inline; }
  .pa-deconnexion { padding: 0 16px; }
}
@media (max-width: 380px) { .ab-marque small { display: none; } }

/* --- Connexion ------------------------------------------------------------------------- */
.pa-accueil { position: relative; }
.pa-accueil h1 { max-width: 16ch; }
.pa-accueil .ab-points svg { width: 22px; height: 22px; }
.pa-carte-connexion { width: 100%; max-width: 460px; justify-self: center; border-radius: var(--ab-r-xl); }
.pa-carte-connexion h2 { font-size: var(--ab-t-xl); margin-bottom: var(--ab-e1); }
.pa-intro-form { margin-bottom: var(--ab-e5); font-size: var(--ab-t-s); }
.pa-aide-connexion { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--ab-e5); padding-top: var(--ab-e4); border-top: 1px solid var(--ab-bord); }
.pa-aide-connexion svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: var(--ab-texte-3); }

/* Aperçu décoratif d'un rapport (aucun chiffre : simple illustration) */
.pa-apercu { position: relative; overflow: hidden; isolation: isolate; margin-top: var(--ab-e4); padding: var(--ab-e5);
  border-radius: var(--ab-r-xl); color: #fff; box-shadow: var(--ab-ombre-2);
  background: linear-gradient(135deg, var(--ab-accent) 0%, var(--ab-accent-2) 140%); }
[data-theme="sombre"] .pa-apercu { background: linear-gradient(135deg, color-mix(in srgb, var(--ab-accent) 45%, #000), color-mix(in srgb, var(--ab-accent-2) 40%, #000) 130%); }
.pa-apercu::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .14; background-image: var(--ab-motif-tissage); background-size: 44px 44px; }
.pa-apercu-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 750; font-size: var(--ab-t-s); }
.pa-apercu-pastille { padding: 3px 10px; border-radius: var(--ab-r-rond); background: rgb(255 255 255 / .18); font-size: var(--ab-t-xs); font-weight: 700; }
.pa-apercu-courbe { display: block; width: 100%; height: auto; margin: var(--ab-e4) 0 var(--ab-e3); }
.pa-apercu-courbe .reel { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pa-apercu-courbe .plan { fill: none; stroke: rgb(255 255 255 / .6); stroke-width: 2; stroke-dasharray: 5 6; }
.pa-apercu-courbe .aire { fill: rgb(255 255 255 / .14); }
.pa-apercu-pied { display: flex; justify-content: space-between; gap: 8px; font-size: var(--ab-t-xs); font-weight: 650; color: rgb(255 255 255 / .88); }
@media (max-width: 899px) { .pa-apercu { display: none; } }

/* --- En-tête du tableau de bord --------------------------------------------------------- */
.pa-entete { margin-bottom: var(--ab-e5); }
.pa-entete h1 { overflow-wrap: anywhere; }
.pa-entete .ab-surtitre { color: var(--ab-accent); margin-bottom: var(--ab-e2); }
.pa-entete-fin { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-entete-fin .ab-badge { padding: 5px 12px; }
.pa-entete-fin .pa-icone svg { width: 14px; height: 14px; }
.pa-bandeau { margin-bottom: var(--ab-e5); }
.pa-bandeau .pa-icone svg { width: 22px; height: 22px; fill: var(--ab-info); }

/* --- Statistiques clés --------------------------------------------------------------- */
.pa-stats { margin-bottom: var(--ab-e5); }
.pa-stat { position: relative; overflow: hidden; }
.pa-stat-tete { display: flex; align-items: center; gap: 8px; color: var(--ab-accent); }
.pa-stat-tete .pa-icone svg { width: 18px; height: 18px; }
.pa-stat .ab-stat-valeur small { white-space: nowrap; }
.pa-stat .ab-stat-detail { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pa-etincelle { margin-top: auto; padding-top: 4px; }
.pa-etincelle svg { height: 30px; }
.pa-etincelle .courbe { stroke-width: 2; }
@media (min-width: 768px) { .pa-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-tendance svg { width: 14px; height: 14px; fill: currentColor; }
.ab-tendance.baisse svg { transform: scaleY(-1); }

/* --- Grille des cartes ----------------------------------------------------------------- */
.pa-grille { display: grid; gap: var(--ab-e4); grid-template-columns: minmax(0, 1fr); }
.pa-grille > * { min-width: 0; }
@media (min-width: 1000px) {
  .pa-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ab-e5); }
  .pa-large { grid-column: 1 / -1; }
}
.pa-pile { display: grid; gap: var(--ab-e4); min-width: 0; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .pa-pile { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ab-e5); } }

.pa-carte { display: flex; flex-direction: column; gap: var(--ab-e4); border-radius: var(--ab-r-xl); }
.pa-carte-tete { display: flex; align-items: flex-start; gap: var(--ab-e3); }
.pa-carte-titres { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pa-carte-titres h2 { font-size: var(--ab-t-l); }
.pa-pastille { width: 40px; height: 40px; border-radius: 12px; background: var(--ab-accent-doux); color: var(--ab-accent); }
.pa-pastille svg { width: 22px; height: 22px; }
.pa-pastille.petite { width: 36px; height: 36px; border-radius: 10px; }
.pa-pastille.petite svg { width: 18px; height: 18px; }
.pa-note { margin-top: calc(-1 * var(--ab-e1)); }

/* Grands chiffres en tête de carte */
.pa-chiffres-ligne { display: flex; flex-wrap: wrap; gap: var(--ab-e3) var(--ab-e8); }
.pa-chiffres-ligne > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.pa-grand { font: 800 clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem)/1.05 var(--ab-police-titre); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ab-texte); }
.pa-moyen { font: 800 var(--ab-t-xl)/1.1 var(--ab-police-titre); letter-spacing: -.02em; font-variant-numeric: tabular-nums; padding-top: 6px; }
.pa-moyen small, .pa-grand small { font-size: .5em; font-weight: 700; color: var(--ab-texte-2); margin-left: 4px; letter-spacing: 0; }

/* Graphiques : textes lisibles quelle que soit la largeur (le SVG fait 640 unités de large) */
.pa-graphe { margin: 0 -4px; }
.pa-graphe .ab-graphique text { font-size: 17px; }
.pa-graphe .ab-graphique .courbe { stroke-width: 3; }
@media (max-width: 639px) {
  .pa-graphe .ab-graphique text { font-size: 26px; }
  .pa-graphe .ab-graphique .courbe { stroke-width: 5; }
  .pa-graphe .ab-graphique .courbe.c2 { stroke-width: 3.5; stroke-dasharray: 9 9; }
  .pa-graphe .ab-graphique .point { r: 7px; stroke-width: 4; }
  .pa-graphe .ab-graphique .grille { stroke-width: 2; }
}

/* Détail mensuel repliable */
.pa-details { border-top: 1px solid var(--ab-bord); padding-top: var(--ab-e2); }
.pa-details summary { display: flex; align-items: center; gap: 8px; min-height: var(--ab-cible); cursor: pointer; list-style: none;
  font-weight: 650; font-size: var(--ab-t-s); color: var(--ab-accent); border-radius: var(--ab-r-s); }
.pa-details summary::-webkit-details-marker { display: none; }
.pa-details summary .pa-icone svg { width: 20px; height: 20px; transition: transform var(--ab-m-moyen) var(--ab-courbe); }
.pa-details[open] summary .pa-icone svg { transform: rotate(180deg); }
.pa-details .ab-tableau-cadre { margin-top: var(--ab-e2); }

/* --- Impact ---------------------------------------------------------------------------- */
.pa-anneaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ab-e3); }
.pa-anneau { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--ab-e2); padding: var(--ab-e4) var(--ab-e2);
  border-radius: var(--ab-r-l); background: var(--ab-surface-2); border: 1px solid var(--ab-bord); text-align: center; }
.pa-anneau > div { width: min(120px, 100%); }
.pa-anneau .ab-graphique text { font: 800 19px var(--ab-police-titre); fill: var(--ab-texte); letter-spacing: -.02em; }
.pa-anneau figcaption { display: flex; flex-direction: column; gap: 2px; font-size: var(--ab-t-s); line-height: 1.3; }
.pa-liste > li { min-height: 64px; }
.pa-liste .ab-element-texte :is(strong, small), .pa-doc .ab-element-texte :is(strong, small) { white-space: normal; }

/* --- Emploi des fonds ------------------------------------------------------------------ */
.pa-fonds-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ab-e3); }
@media (min-width: 640px) { .pa-fonds-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pa-fonds-chiffre strong { font-size: var(--ab-t-l); } }
.pa-fonds-chiffre { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; min-width: 0; padding: var(--ab-e3) var(--ab-e4);
  border-radius: var(--ab-r-m); background: var(--ab-surface-2); border: 1px solid var(--ab-bord); }
.pa-fonds-chiffre strong { grid-column: 1 / -1; font: 800 var(--ab-t-m)/1.2 var(--ab-police-titre); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pa-puce-couleur { width: 12px; height: 12px; border-radius: 4px; background: var(--ab-fond-2); border: 1px solid var(--ab-bord-fort); }
.pa-puce-couleur.verse, .pa-puce-couleur.reste, .pa-fonds .verse { border: 0;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ab-accent) 45%, transparent) 0 4px, color-mix(in srgb, var(--ab-accent) 22%, transparent) 4px 8px); }
.pa-puce-couleur.employe, .pa-fonds .employe { border: 0; background: linear-gradient(90deg, var(--ab-accent), color-mix(in srgb, var(--ab-accent) 70%, var(--ab-accent-2))); }
.pa-fonds { position: relative; height: 16px; border-radius: var(--ab-r-rond); background: var(--ab-fond-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--ab-bord); }
.pa-fonds span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; transform-origin: left; animation: ab-jauge var(--ab-m-lent) var(--ab-courbe) both; }
.pa-tranches { display: grid; gap: var(--ab-e3); }
@media (min-width: 768px) { .pa-tranches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ab-e4); } }
.pa-tranche { display: flex; flex-direction: column; gap: var(--ab-e3); min-width: 0; padding: var(--ab-e4); border-radius: var(--ab-r-l);
  background: var(--ab-surface-2); border: 1px solid var(--ab-bord); }
.pa-tranche h3 { font-size: var(--ab-t-m); min-width: 0; }
.pa-tranche-montant { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pa-tranche-montant strong { font: 800 var(--ab-t-xl)/1.1 var(--ab-police-titre); font-variant-numeric: tabular-nums; }
.pa-postes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ab-e3); font-size: var(--ab-t-s); }
.pa-postes li { display: flex; flex-direction: column; gap: 6px; }
.pa-postes .ab-ligne-entre { flex-wrap: nowrap; align-items: flex-start; }
.pa-postes .ab-chiffres { white-space: nowrap; font-weight: 650; }
.pa-postes .ab-jauge { height: 5px; }

/* --- Relevés et salle de données --------------------------------------------------------- */
.pa-releves { display: flex; flex-direction: column; gap: var(--ab-e4); align-items: flex-start; }
.pa-releves .ab-segments button { min-height: var(--ab-cible); padding: 0 20px; }
.pa-releves .ab-actions { width: 100%; }
@media (max-width: 479px) { .pa-releves .ab-actions > .ab-btn { flex: 1 1 100%; } }
.pa-documents { display: flex; flex-direction: column; gap: 4px; }
.pa-documents + .pa-documents { margin-top: var(--ab-e2); }
.ab .pa-documents h3 { font: 700 var(--ab-t-xs)/1.3 var(--ab-police); letter-spacing: .08em; }
.pa-documents .ab-liste > li { padding: 0; min-height: 0; }
.pa-doc { display: flex; align-items: center; gap: var(--ab-e3); width: 100%; min-height: 64px; padding: 10px 8px; margin: 0 -8px; box-sizing: content-box;
  border-radius: var(--ab-r-m); color: inherit; text-decoration: none; transition: background var(--ab-m-rapide); }
.pa-doc:hover { background: var(--ab-surface-2); }
.pa-doc-icone { width: 44px; height: 44px; border-radius: 12px; background: var(--ab-fond-2); color: var(--ab-texte-2); }
.pa-doc:hover .pa-doc-icone { background: var(--ab-accent-doux); color: var(--ab-accent); }
.pa-doc-fin { width: 40px; height: 40px; border-radius: 50%; color: var(--ab-accent); }
.pa-doc:hover .pa-doc-fin { background: var(--ab-accent-doux); }

@media print {
  body.ab { background: #fff; }
  .pa-details { display: none; }
}

/* Tableaux en cartes : intitulé et valeur sur la même ligne de base */
@media (max-width: 639px) { .ab-tableau.ab-cartes td { align-items: baseline; } .ab-tableau.ab-cartes tr { padding: 12px 4px; } }

/* Thème sombre : la seconde série des barres (accent-2 à 55 %) se perd sur le fond encre */
[data-theme="sombre"] .pa-graphe .ab-graphique .barre.b2, [data-theme="sombre"] .ab-legende i.b2 { opacity: .9; }
[data-theme="sombre"] .ab-jauge { background: var(--ab-surface-haute); }