/* =========================================================
   LOGMIS — Accordéon Ohio : système composable (4 axes orthogonaux)
   À combiner dans le champ « CSS Classes » (Avancé) :
     1. acc-round              → +/- dans un rond              (sur le WIDGET)
     2. acc-bg-<couleur>       → fond de l'item (fermé / défaut)
     3. acc-open-<couleur>     → fond de l'item OUVERT (bicolore ; OPTIONNEL)
     4. acc-ico-<couleur>      → couleur du rond +/- (fermé/défaut)
        acc-ico-open-<couleur> → couleur du rond +/- OUVERT (bicolore ; OPTIONNEL)
   Ex. POS Épicerie : acc-round acc-bg-blanc acc-open-magenta-clair acc-ico-gris

   Moteur = 4 variables, les modificateurs ne font que les SET :
     --acc-bg            fond fermé/défaut
     --acc-bg-open       fond ouvert (fallback → --acc-bg, donc fond constant si absent)
     --acc-icon-bg       fond du rond +/- fermé/défaut
     --acc-icon-open-bg  fond du rond +/- ouvert (fallback → --acc-icon-bg)
   Limite Elementor : pas de variable --e-global-color-* pour une couleur AVEC
   transparence (rgba/hex8) → teintes 10% en dur (cf. STATE §9).

   Couleurs dispo : indigo · magenta · vert · fonce · blanc · gris · transparent
   + teintes 10% (axes 2/3 seulement) : indigo-clair · magenta-clair · vert-clair.

   ⚠️ Les anciennes classes (acc-vert, acc-magenta-clair, acc-bicolor, acc-blanc,
   acc-bicolor-magenta…) sont conservées en bas comme PRÉRÉGLAGES (compat des
   pages déjà en ligne — ne rien retoucher en UI).
   ========================================================= */

/* --- Axe 1 : forme du rond +/- (sur le WIDGET) ------------------------- */
/* OPT-IN par classe "acc-round". Couleur du rond = variable --acc-icon-bg
   (défaut blanc) → la poser via une classe acc-ico-* (Axe 4), ou en CSS perso
   pour une couleur libre : selector { --acc-icon-bg: #e10078; }.
   La couleur du glyphe +/- reste gérée par l'option du widget. */
.acc-round .icon-button {
	background: var(--acc-icon-bg, #fff) !important;
	border-radius: 50% !important;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Rond en état OUVERT : Ohio pose `.active` sur l'item ouvert (ancêtre du
   bouton) → fond du rond piloté par --acc-icon-open-bg (fallback → --acc-icon-bg,
   donc rond constant si non posé). Spécificité 0,3,0 > 0,2,0 de la règle de base. */
.acc-round .active .icon-button {
	background: var(--acc-icon-open-bg, var(--acc-icon-bg, #fff)) !important;
}

/* --- Cœur : forme + bascule de fond pilotée par les variables ---------- */
[class*="acc-bg-"],
.acc-vert, .acc-indigo, .acc-magenta, .acc-fonce,
.acc-indigo-clair, .acc-vert-clair, .acc-magenta-clair,
.acc-blanc, .acc-bicolor, .acc-bicolor-magenta {
	border-radius: 20px;
	overflow: hidden;
	background-color: var(--acc-bg, transparent);
	transition: background-color 0.25s ease;
}
/* État ouvert (Ohio pose `.active` sur l'item) → bascule sans JS.
   Sans --acc-bg-open on retombe sur --acc-bg (= fond constant). */
[class*="acc-bg-"].active,
.acc-vert.active, .acc-indigo.active, .acc-magenta.active, .acc-fonce.active,
.acc-indigo-clair.active, .acc-vert-clair.active, .acc-magenta-clair.active,
.acc-blanc.active, .acc-bicolor.active, .acc-bicolor-magenta.active {
	background-color: var(--acc-bg-open, var(--acc-bg, transparent));
}
/* L'entête (.accordion-button) peut recevoir un fond propre via le réglage Ohio
   « fond des onglets » (sélecteur 0,6,0 qui bat l'item 0,1,0) → on la rend
   transparente pour montrer TOUJOURS la couleur de l'item (entête comprise). */
[class*="acc-bg-"] .accordion-button,
.acc-vert .accordion-button, .acc-indigo .accordion-button,
.acc-magenta .accordion-button, .acc-fonce .accordion-button,
.acc-indigo-clair .accordion-button, .acc-vert-clair .accordion-button,
.acc-magenta-clair .accordion-button, .acc-blanc .accordion-button,
.acc-bicolor .accordion-button, .acc-bicolor-magenta .accordion-button {
	background-color: transparent !important;
}

/* --- Axe 2 : fond fermé / défaut (acc-bg-*) ---------------------------- */
.acc-bg-indigo  { --acc-bg: var(--e-global-color-primary, #4646ff); }
.acc-bg-magenta { --acc-bg: var(--e-global-color-secondary, #e10078); }
.acc-bg-vert    { --acc-bg: var(--e-global-color-accent, #00c86e); }
.acc-bg-fonce   { --acc-bg: #283742; }
.acc-bg-blanc   { --acc-bg: #ffffff; }
.acc-bg-gris    { --acc-bg: var(--e-global-color-clair01, #F5F5F5); }
.acc-bg-indigo-clair  { --acc-bg: #4747FF1A; }
.acc-bg-magenta-clair { --acc-bg: #E100781A; }
.acc-bg-vert-clair    { --acc-bg: #00C86E1A; }
.acc-bg-transparent   { --acc-bg: transparent; }

/* --- Axe 3 : fond OUVERT / bicolore (acc-open-*) ----------------------- */
.acc-open-indigo  { --acc-bg-open: var(--e-global-color-primary, #4646ff); }
.acc-open-magenta { --acc-bg-open: var(--e-global-color-secondary, #e10078); }
.acc-open-vert    { --acc-bg-open: var(--e-global-color-accent, #00c86e); }
.acc-open-fonce   { --acc-bg-open: #283742; }
.acc-open-blanc   { --acc-bg-open: #ffffff; }
.acc-open-gris    { --acc-bg-open: var(--e-global-color-clair01, #F5F5F5); }
.acc-open-indigo-clair  { --acc-bg-open: #4747FF1A; }
.acc-open-magenta-clair { --acc-bg-open: #E100781A; }
.acc-open-vert-clair    { --acc-bg-open: #00C86E1A; }
.acc-open-transparent   { --acc-bg-open: transparent; }

/* --- Axe 4 : couleur du rond +/- --------------------------------------- */
/* fermé / défaut (acc-ico-*) */
.acc-ico-gris    { --acc-icon-bg: var(--e-global-color-clair01, #F5F5F5); }
.acc-ico-indigo  { --acc-icon-bg: var(--e-global-color-primary, #4646ff); }
.acc-ico-magenta { --acc-icon-bg: var(--e-global-color-secondary, #e10078); }
.acc-ico-vert    { --acc-icon-bg: var(--e-global-color-accent, #00c86e); }
.acc-ico-blanc   { --acc-icon-bg: #ffffff; }
.acc-ico-transparent { --acc-icon-bg: transparent; }
/* ouvert / bicolore (acc-ico-open-*) ; fallback → acc-ico-* si absent */
.acc-ico-open-gris    { --acc-icon-open-bg: var(--e-global-color-clair01, #F5F5F5); }
.acc-ico-open-indigo  { --acc-icon-open-bg: var(--e-global-color-primary, #4646ff); }
.acc-ico-open-magenta { --acc-icon-open-bg: var(--e-global-color-secondary, #e10078); }
.acc-ico-open-vert    { --acc-icon-open-bg: var(--e-global-color-accent, #00c86e); }
.acc-ico-open-blanc   { --acc-icon-open-bg: #ffffff; }
.acc-ico-open-transparent { --acc-icon-open-bg: transparent; }

/* --- Préréglages LEGACY (compat pages en ligne) = combos figées -------- */
.acc-indigo  { --acc-bg: var(--e-global-color-primary, #4646ff); }
.acc-magenta { --acc-bg: var(--e-global-color-secondary, #e10078); }
.acc-vert    { --acc-bg: var(--e-global-color-accent, #00c86e); }
.acc-fonce   { --acc-bg: #283742; }
.acc-indigo-clair  { --acc-bg: #4747FF1A; }
.acc-magenta-clair { --acc-bg: #E100781A; }
.acc-vert-clair    { --acc-bg: #00C86E1A; }
.acc-blanc   { --acc-bg: #ffffff; --acc-icon-bg: var(--e-global-color-clair01, #F5F5F5); }
.acc-bicolor { --acc-bg: var(--e-global-color-clair01, #F5F5F5); --acc-bg-open: #4747FF1A; }
.acc-bicolor-magenta { --acc-bg: #ffffff; --acc-bg-open: #E100781A; --acc-icon-bg: var(--e-global-color-clair01, #F5F5F5); }