/* ArtiBox OGC — ce qui est propre à l'espace des sociétés de gestion collective, de l'État et des distributeurs.
 * Le socle (jetons --ab-*, composants ab-*) vient de /commun/artibox.css ; l'accent « bleu lac » est
 * posé par <html data-appli="ogc">. Préfixe des classes de l'espace : og-. */

/* --- 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) */
.og-icone { display: inline-flex; flex: none; align-items: center; justify-content: center; }
.og-icone svg { width: 20px; height: 20px; fill: currentColor; }

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

/* --- Connexion ------------------------------------------------------------------------- */
.og-accueil { position: relative; }
.og-accueil h1 { max-width: 16ch; }
.og-accueil .ab-points svg { width: 22px; height: 22px; }
.og-carte-connexion { width: 100%; max-width: 460px; justify-self: center; border-radius: var(--ab-r-xl); }
.og-carte-connexion h2 { font-size: var(--ab-t-xl); margin-bottom: var(--ab-e1); }
.og-intro-form { margin-bottom: var(--ab-e5); font-size: var(--ab-t-s); }
.og-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); }
.og-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) */
.og-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"] .og-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%); }
.og-apercu::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .14; background-image: var(--ab-motif-tissage); background-size: 44px 44px; }
.og-apercu-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 750; font-size: var(--ab-t-s); }
.og-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; }
.og-apercu-barres { display: block; width: 100%; height: auto; margin: var(--ab-e4) 0 var(--ab-e3); }
.og-apercu-barres rect { fill: rgb(255 255 255 / .82); }
.og-apercu-barres rect:nth-child(odd) { fill: rgb(255 255 255 / .45); }
.og-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) { .og-apercu { display: none; } }

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

/* --- Statistiques clés --------------------------------------------------------------- */
.og-stats { margin-bottom: var(--ab-e5); }
.og-stat { position: relative; overflow: hidden; }
.og-stat-tete { display: flex; align-items: center; gap: 8px; color: var(--ab-accent); }
.og-stat-tete .og-icone svg { width: 18px; height: 18px; }
.og-stat .ab-stat-valeur small { white-space: nowrap; }
.og-stat .ab-stat-detail { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.og-etincelle { margin-top: auto; padding-top: 4px; }
.og-etincelle svg { height: 30px; }
.og-etincelle .courbe { stroke-width: 2; }
@media (min-width: 768px) { .og-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 ----------------------------------------------------------------- */
.og-grille { display: grid; gap: var(--ab-e4); grid-template-columns: minmax(0, 1fr); }
.og-grille > * { min-width: 0; }
@media (min-width: 1000px) {
  .og-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ab-e5); }
  .og-large { grid-column: 1 / -1; }
}
.og-pile { display: grid; gap: var(--ab-e4); min-width: 0; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .og-pile { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ab-e5); } }

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

/* Grands chiffres en tête de carte */
.og-chiffres-ligne { display: flex; flex-wrap: wrap; gap: var(--ab-e3) var(--ab-e8); }
.og-chiffres-ligne > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.og-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); }
.og-moyen { font: 800 var(--ab-t-xl)/1.1 var(--ab-police-titre); letter-spacing: -.02em; font-variant-numeric: tabular-nums; padding-top: 6px; }
.og-moyen small, .og-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) */
.og-graphe { margin: 0 -4px; }
.og-graphe .ab-graphique text { font-size: 17px; }
.og-graphe .ab-graphique .courbe { stroke-width: 3; }
@media (max-width: 639px) {
  .og-graphe .ab-graphique text { font-size: 26px; }
  .og-graphe .ab-graphique .courbe { stroke-width: 5; }
  .og-graphe .ab-graphique .courbe.c2 { stroke-width: 3.5; stroke-dasharray: 9 9; }
  .og-graphe .ab-graphique .point { r: 7px; stroke-width: 4; }
  .og-graphe .ab-graphique .grille { stroke-width: 2; }
}

/* Détail mensuel repliable */
.og-details { border-top: 1px solid var(--ab-bord); padding-top: var(--ab-e2); }
.og-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); }
.og-details summary::-webkit-details-marker { display: none; }
.og-details summary .og-icone svg { width: 20px; height: 20px; transition: transform var(--ab-m-moyen) var(--ab-courbe); }
.og-details[open] summary .og-icone svg { transform: rotate(180deg); }
.og-details .ab-tableau-cadre { margin-top: var(--ab-e2); }

/* --- Période ------------------------------------------------------------------------- */
.og-entete-fin .ab-actions { gap: var(--ab-e2); }
@media (max-width: 479px) { .og-entete-fin, .og-entete-fin .ab-actions { width: 100%; } .og-entete-fin .ab-btn { flex: 1 1 0; padding: 0 12px; } }
.og-periode { display: flex; flex-direction: column; gap: var(--ab-e2); margin-bottom: var(--ab-e5); min-width: 0; }
.og-puces .ab-puce, .og-filtres .ab-puce { min-height: var(--ab-cible); padding: 0 16px; }
.og-puces .ab-puce { text-transform: none; }

/* --- Parts reversées ----------------------------------------------------------------- */
.og-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ab-e4); }
.og-parts li { display: flex; flex-direction: column; gap: 6px; }
.og-part-ligne { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ab-e3); font-size: var(--ab-t-s); font-weight: 600; }
.og-part-ligne strong { white-space: nowrap; font-weight: 750; }
.og-part-tva .ab-jauge > span { background: var(--ab-info); }
.og-part-frais .ab-jauge > span { background: var(--ab-texte-3); }
.og-part-reserve .ab-jauge > span { background: var(--ab-alerte); }
.og-verse { align-items: center; }
.og-verse .og-icone svg { fill: var(--ab-succes); }

/* --- Non réclamées, lieux -------------------------------------------------------------- */
.og-total { display: flex; align-items: baseline; gap: var(--ab-e2); flex-wrap: wrap; }
.og-liste > li { min-height: 64px; }
.og-liste .ab-element-texte :is(strong, small) { white-space: normal; }
.og-mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab-e3); }
.og-mini-stats > div { display: flex; flex-direction: column; gap: 4px; padding: var(--ab-e3); border-radius: var(--ab-r-m); background: var(--ab-surface-2); border: 1px solid var(--ab-bord); min-width: 0; }
.og-mini-stats .ab-jauge { height: 5px; margin-top: 4px; }
.og-limitee { display: flex; flex-direction: column; gap: var(--ab-e3); align-items: stretch; }
.og-voir-plus { align-self: center; white-space: normal; text-align: center; line-height: 1.2; }
.og-voir-plus svg { width: 18px; height: 18px; }

/* --- Diffusions par titre ---------------------------------------------------------------- */
.og-filtres { display: flex; flex-wrap: wrap; gap: var(--ab-e3); align-items: center; }
.og-recherche { position: relative; flex: 1 1 260px; min-width: 0; }
.og-recherche .og-icone { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ab-texte-3); pointer-events: none; }
.og-recherche .ab-entree { padding-left: 44px; }
.og-recherche .ab-entree:focus { outline: none; border-color: var(--ab-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ab-accent) 22%, transparent); }
.og-filtres .ab-puces { flex: 0 1 auto; max-width: 100%; }
.og-compte { margin: 0; }
.og-titre { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
@media (max-width: 639px) { .og-titre { justify-content: flex-start; } }

/* --- Journal ------------------------------------------------------------------------- */
.og-journal { list-style: none; margin: 0; padding: 0; position: relative; }
.og-journal li { position: relative; display: flex; gap: var(--ab-e3); padding: 0 0 var(--ab-e4) 0; }
.og-journal li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--ab-bord); }
.og-journal li:last-child::before { display: none; }
.og-journal-point { flex: none; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: var(--ab-surface); border: 3px solid var(--ab-texte-3); position: relative; z-index: 1; }
.og-journal-point.valide { border-color: var(--ab-accent); background: var(--ab-accent-doux); }
.og-journal-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.og-journal-texte strong { font-size: var(--ab-t-s); }
@media (min-width: 1000px) { .og-journal { columns: 2; column-gap: var(--ab-e8); } .og-journal li { break-inside: avoid; } }

/* --- Distributeurs : dépôt et historique -------------------------------------------------- */
.og-message { margin-bottom: var(--ab-e5); align-items: center; }
.og-message .og-icone svg { fill: var(--ab-succes); }
.og-grille-releves { margin-top: var(--ab-e5); }
@media (min-width: 1000px) { .og-grille-releves { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.og-depot { display: flex; flex-direction: column; gap: var(--ab-e4); }
.og-depot-zone { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ab-e2);
  padding: var(--ab-e8) 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); }
.og-depot-zone:hover, .og-depot-zone.choisi { border-color: var(--ab-accent); background: var(--ab-accent-doux); }
.og-depot-zone:focus-within { outline: 3px solid var(--ab-accent); outline-offset: 2px; }
.og-depot-icone { width: 56px; height: 56px; border-radius: 18px; background: var(--ab-accent-doux); color: var(--ab-accent); }
.og-depot-zone.choisi .og-depot-icone { background: var(--ab-accent); color: var(--ab-sur-accent); }
.og-depot-icone svg { width: 28px; height: 28px; }
.og-depot-texte { display: flex; flex-direction: column; gap: 2px; }
.og-depot-texte small { color: var(--ab-texte-3); font-size: var(--ab-t-xs); }
.og-depot-nom { font-size: var(--ab-t-s); font-weight: 650; color: var(--ab-texte-2); overflow-wrap: anywhere; }
.og-fichier { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.og-depot .ab-btn { width: 100%; }
.og-releves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ab-e3); }
.og-releve { display: flex; flex-direction: column; gap: var(--ab-e3); padding: var(--ab-e4); border-radius: var(--ab-r-l); background: var(--ab-surface-2); border: 1px solid var(--ab-bord); }
.og-releve-tete { display: flex; gap: var(--ab-e3); align-items: flex-start; flex-wrap: wrap; }
.og-releve-titres { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.og-releve-titres strong { overflow-wrap: anywhere; }
.og-releve-tete .ab-badge { white-space: normal; }
.og-releve-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--ab-e3); margin: 0; }
.og-releve-chiffres div { min-width: 0; }
.og-releve-chiffres dt { font-size: var(--ab-t-xs); color: var(--ab-texte-3); font-weight: 600; }
.og-releve-chiffres dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.og-releve-taux { display: flex; flex-direction: column; gap: 6px; font-size: var(--ab-t-s); }
.og-motifs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--ab-t-s); }
.og-motifs .ab-badge { white-space: normal; }
.og-note { margin-top: calc(-1 * var(--ab-e1)); }
.og-stats.ab-stats { margin-bottom: var(--ab-e5); }

@media print {
  body.ab { background: #fff; }
  .og-periode, .og-filtres, .og-voir-plus { display: none; }
}
@media (min-width: 768px) { .og-stats.og-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.og-cote { display: flex; flex-direction: column; gap: var(--ab-e4); min-width: 0; }
.og-cote-graphe { display: flex; flex-direction: column; gap: var(--ab-e3); min-width: 0; }
@media (min-width: 1000px) { .og-cote { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--ab-e6); align-items: start; } }
.og-repartitions .ab-element-texte { gap: 4px; }
.og-repartitions .ab-element-fin { max-width: 45%; }
.og-repartitions .ab-element-fin small { white-space: normal; }

/* 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"] .og-graphe .ab-graphique .barre.b2, [data-theme="sombre"] .ab-legende i.b2 { opacity: .9; }
[data-theme="sombre"] .ab-jauge { background: var(--ab-surface-haute); }