/**
 * Animated Counter natif Divi 5 — frontend styles.
 *
 * Architecture : CSS custom properties sur .mds-d5-counter (root),
 * rendu visuel délégué à .mds-d5-counter__card.
 * Les layouts (card, minimal, inline, split) s'appliquent via classe.
 */

/* ─── Valeurs par défaut (preset hero-premium) ─────────────────────── */

.mds-d5-counter {
	/* couleurs */
	--mds-ac-number:    #0b1220;
	--mds-ac-label:     #1e3a5f;
	--mds-ac-desc:      #475569;
	--mds-ac-card-bg:   linear-gradient(145deg, #f8fafc 0%, #eef2ff 100%);
	--mds-ac-icon-c:    #3b82f6;

	/* carte */
	--mds-ac-radius:    22px;
	--mds-ac-shadow:    0 8px 32px rgba(15, 23, 42, 0.08), 0 1px 4px rgba(15, 23, 42, 0.04);
	--mds-ac-border-w:  1px;
	--mds-ac-border-c:  rgba(15, 23, 42, 0.08);
	--mds-ac-pad-v:     1.75rem;
	--mds-ac-pad-h:     2rem;

	/* Le wrapper root est toujours neutre — les styles visuels vont sur __card */
	display:       block;
	box-sizing:    border-box;
	max-width:     100%;
	background:    transparent;
	box-shadow:    none;
	border:        none;
}

/* ─── Card ─────────────────────────────────────────────────────────── */

.mds-d5-counter__card {
	box-sizing: border-box;
	width: 100%;
}

/* Layout : card ─ fond + ombre + bordure + padding sur la carte */
.mds-d5-counter--layout-card .mds-d5-counter__card {
	background:    var(--mds-ac-card-bg);
	border-radius: var(--mds-ac-radius);
	box-shadow:    var(--mds-ac-shadow);
	border:        var(--mds-ac-border-w) solid var(--mds-ac-border-c);
	padding:       var(--mds-ac-pad-v) var(--mds-ac-pad-h);
	transition:    box-shadow 0.25s ease, transform 0.25s ease;
}

/* Layout : minimal ─ pas de boîte */
.mds-d5-counter--layout-minimal .mds-d5-counter__card {
	background: none;
	border:     none;
	box-shadow: none;
	padding:    0;
}

/* Layout : inline ─ valeur + label côte à côte sur une ligne */
.mds-d5-counter--layout-inline .mds-d5-counter__card {
	display:     flex;
	align-items: center;
	gap:         0.6rem 1rem;
	flex-wrap:   wrap;
	background:  none;
	border:      none;
	box-shadow:  none;
	padding:     0;
}
.mds-d5-counter--layout-inline .mds-d5-counter__value {
	flex-shrink: 0;
	margin:      0;
}
.mds-d5-counter--layout-inline .mds-d5-counter__meta {
	flex:        1;
	min-width:   0;
}
.mds-d5-counter--layout-inline .mds-d5-counter__label {
	margin-top: 0;
	font-size:  1.05em;
}
.mds-d5-counter--layout-inline .mds-d5-counter__description {
	margin-top: 0.1rem;
}

/* Layout : split ─ valeur à gauche, texte à droite */
.mds-d5-counter--layout-split .mds-d5-counter__card {
	display:       flex;
	align-items:   center;
	gap:           1.5rem;
	flex-wrap:     nowrap;
	background:    var(--mds-ac-card-bg);
	border-radius: var(--mds-ac-radius);
	box-shadow:    var(--mds-ac-shadow);
	border:        var(--mds-ac-border-w) solid var(--mds-ac-border-c);
	padding:       var(--mds-ac-pad-v) var(--mds-ac-pad-h);
}
.mds-d5-counter--layout-split .mds-d5-counter__value {
	flex-shrink: 0;
	margin:      0;
}
.mds-d5-counter--layout-split .mds-d5-counter__meta {
	flex:     1;
	min-width: 0;
}
.mds-d5-counter--layout-split .mds-d5-counter__label {
	margin-top: 0;
}
.mds-d5-counter--layout-split .mds-d5-counter__description {
	margin-top: 0.2rem;
}
.mds-d5-counter--layout-split .mds-d5-counter__icon {
	flex-shrink: 0;
	margin-bottom: 0;
	margin-right: 0;
}

/* ─── Valeur (nombre) ───────────────────────────────────────────────── */

.mds-d5-counter__value {
	display:             flex;
	flex-wrap:           wrap;
	align-items:         baseline;
	gap:                 0.1em;
	font-weight:         800;
	line-height:         1.05;
	letter-spacing:      -0.03em;
	font-variant-numeric: tabular-nums;
	color:               var(--mds-ac-number);
}

.mds-d5-counter__prefix,
.mds-d5-counter__suffix {
	font-weight: 700;
	opacity:     0.9;
}

.mds-d5-counter__number {
	font-variant-numeric: tabular-nums;
}

/* ─── Meta ──────────────────────────────────────────────────────────── */

.mds-d5-counter__meta {
	margin-top: 0.45rem;
}

.mds-d5-counter__label {
	font-weight:    700;
	letter-spacing: -0.01em;
	color:          var(--mds-ac-label);
	margin-top:     0.5rem;
}

.mds-d5-counter__description {
	margin-top:  0.2rem;
	font-size:   0.88em;
	font-weight: 500;
	color:       var(--mds-ac-desc);
	line-height: 1.45;
}

/* ─── Icône ─────────────────────────────────────────────────────────── */

.mds-d5-counter__icon {
	display:         flex;
	align-items:     center;
	justify-content: flex-start;
	margin-bottom:   0.85rem;
	color:           var(--mds-ac-icon-c, var(--mds-ac-number));
}

.mds-d5-counter__icon svg {
	width:  2rem;
	height: 2rem;
	display: block;
}

/* Alignement centré : icône centrée */
.mds-d5-counter--align-center .mds-d5-counter__icon {
	justify-content: center;
}
.mds-d5-counter--align-right .mds-d5-counter__icon {
	justify-content: flex-end;
}

/* ─── Tailles ───────────────────────────────────────────────────────── */

.mds-d5-counter--size-small  .mds-d5-counter__value { font-size: clamp(1.5rem,  4vw, 2rem); }
.mds-d5-counter--size-medium .mds-d5-counter__value { font-size: clamp(2rem,    5vw, 2.75rem); }
.mds-d5-counter--size-large  .mds-d5-counter__value { font-size: clamp(2.5rem,  6vw, 3.5rem); }
.mds-d5-counter--size-xlarge .mds-d5-counter__value,
.mds-d5-counter--size-xl     .mds-d5-counter__value { font-size: clamp(3rem,    8vw, 4.5rem); }

.mds-d5-counter--size-small  .mds-d5-counter__label { font-size: 0.82rem; }
.mds-d5-counter--size-large  .mds-d5-counter__label,
.mds-d5-counter--size-xlarge .mds-d5-counter__label,
.mds-d5-counter--size-xl     .mds-d5-counter__label { font-size: 1.05rem; }

/* ─── Alignement ────────────────────────────────────────────────────── */

.mds-d5-counter--align-left   { text-align: left; }
.mds-d5-counter--align-center { text-align: center; }
.mds-d5-counter--align-right  { text-align: right; }

.mds-d5-counter--align-center .mds-d5-counter__value { justify-content: center; }
.mds-d5-counter--align-right  .mds-d5-counter__value { justify-content: flex-end; }

/* ─── Radius ─────────────────────────────────────────────────────────── */

.mds-d5-counter--radius-none { --mds-ac-radius: 0; }
.mds-d5-counter--radius-sm   { --mds-ac-radius: 8px; }
.mds-d5-counter--radius-md   { --mds-ac-radius: 14px; }
.mds-d5-counter--radius-lg   { --mds-ac-radius: 22px; }
.mds-d5-counter--radius-full { --mds-ac-radius: 999px; }

/* ─── Ombre ──────────────────────────────────────────────────────────── */

.mds-d5-counter--shadow-none { --mds-ac-shadow: none; }
.mds-d5-counter--shadow-soft { --mds-ac-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 1px 4px rgba(15, 23, 42, 0.04); }
.mds-d5-counter--shadow-lift { --mds-ac-shadow: 0 16px 48px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06); }
.mds-d5-counter--shadow-glow { --mds-ac-shadow: 0 0 0 1px rgba(249, 115, 22, 0.25), 0 20px 60px rgba(249, 115, 22, 0.2); }

/* ─── Bordure ────────────────────────────────────────────────────────── */

.mds-d5-counter--border-none     { --mds-ac-border-w: 0; }
.mds-d5-counter--border-hairline { --mds-ac-border-w: 1px; }
.mds-d5-counter--border-strong   { --mds-ac-border-w: 2px; }

/* ─── Padding ────────────────────────────────────────────────────────── */

.mds-d5-counter--pad-tight    { --mds-ac-pad-v: 1rem;   --mds-ac-pad-h: 1.25rem; }
.mds-d5-counter--pad-normal   { --mds-ac-pad-v: 1.35rem; --mds-ac-pad-h: 1.6rem; }
.mds-d5-counter--pad-spacious { --mds-ac-pad-v: 1.75rem; --mds-ac-pad-h: 2rem; }

/* ─────────────────────────────────────────────────────────────────────
   PRESETS VISUELS
   Chaque preset définit ses variables CSS pour s'imposer sur les défauts.
   Les couleurs custom (via style attr) viennent après, donc elles écrasent.
   ───────────────────────────────────────────────────────────────────── */

/* ── 1. Macteck Clean ─ blanc pur, bleu marine, élégant ─────────────── */
.mds-d5-counter--preset-macteck-clean {
	--mds-ac-number:   #0f172a;
	--mds-ac-label:    #1e293b;
	--mds-ac-desc:     #64748b;
	--mds-ac-card-bg:  #ffffff;
	--mds-ac-icon-c:   #0f172a;
	--mds-ac-border-c: rgba(15, 23, 42, 0.08);
	--mds-ac-shadow:   0 4px 24px rgba(15, 23, 42, 0.07);
}

/* ── 2. Hero Premium ─ dégradé bleu nuit indigo, signature Macteck ──── */
.mds-d5-counter--preset-hero-premium {
	--mds-ac-number:   #0b1220;
	--mds-ac-label:    #1e3a5f;
	--mds-ac-desc:     #475569;
	--mds-ac-card-bg:  linear-gradient(145deg, #f8fafc 0%, #eef2ff 100%);
	--mds-ac-icon-c:   #3b82f6;
	--mds-ac-border-c: rgba(59, 130, 246, 0.15);
	--mds-ac-shadow:   0 8px 32px rgba(15, 23, 42, 0.08), 0 1px 4px rgba(15, 23, 42, 0.04);
}
.mds-d5-counter--preset-hero-premium .mds-d5-counter__label {
	text-transform: uppercase;
	font-size:      0.72em;
	letter-spacing: 0.12em;
	font-weight:    800;
}

/* ── 3. Orange Impact ─ chaleur, action, conversion ─────────────────── */
.mds-d5-counter--preset-orange-impact {
	--mds-ac-number:   #c2410c;
	--mds-ac-label:    #7c2d12;
	--mds-ac-desc:     #92400e;
	--mds-ac-card-bg:  linear-gradient(135deg, #fff7ed 0%, #ffedd5 60%, #fed7aa 100%);
	--mds-ac-icon-c:   #ea580c;
	--mds-ac-border-c: rgba(234, 88, 12, 0.22);
	--mds-ac-shadow:   0 8px 32px rgba(194, 65, 12, 0.12);
}
.mds-d5-counter--preset-orange-impact .mds-d5-counter__label {
	font-weight: 800;
	color:       var(--mds-ac-label);
}
.mds-d5-counter--preset-orange-impact.mds-d5-counter--shadow-glow {
	--mds-ac-shadow: 0 0 0 1px rgba(249, 115, 22, 0.3), 0 20px 60px rgba(234, 88, 12, 0.22);
}

/* ── 4. Glass Card ─ glassmorphism lisible sur fond clair ───────────── */
.mds-d5-counter--preset-glass-card {
	--mds-ac-number:   #0f172a;
	--mds-ac-label:    #1e293b;
	--mds-ac-desc:     #475569;
	--mds-ac-card-bg:  rgba(255, 255, 255, 0.55);
	--mds-ac-icon-c:   #6366f1;
	--mds-ac-border-c: rgba(255, 255, 255, 0.7);
	--mds-ac-shadow:   0 12px 40px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.mds-d5-counter--preset-glass-card .mds-d5-counter__card {
	backdrop-filter:         blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
}

/* ── 5. Dark Metric ─ fond sombre, contrasté, dashboard ─────────────── */
.mds-d5-counter--preset-dark-metric {
	--mds-ac-number:   #f1f5f9;
	--mds-ac-label:    #94a3b8;
	--mds-ac-desc:     #64748b;
	--mds-ac-card-bg:  linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
	--mds-ac-icon-c:   #38bdf8;
	--mds-ac-border-c: rgba(148, 163, 184, 0.15);
	--mds-ac-shadow:   0 8px 40px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(148, 163, 184, 0.1) inset;
}
.mds-d5-counter--preset-dark-metric .mds-d5-counter__label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight:    600;
	font-size:      0.72em;
}

/* ── 6. Minimal Stat ─ épuré, typographie seule, sans carte ─────────── */
.mds-d5-counter--preset-minimal-stat {
	--mds-ac-number:   #111827;
	--mds-ac-label:    #6b7280;
	--mds-ac-desc:     #9ca3af;
	--mds-ac-card-bg:  transparent;
	--mds-ac-icon-c:   #374151;
	--mds-ac-border-c: transparent;
	--mds-ac-shadow:   none;
}
.mds-d5-counter--preset-minimal-stat .mds-d5-counter__label {
	font-weight: 400;
	font-size:   0.95em;
}

/* ─────────────────────────────────────────────────────────────────────
   CIBLE DES STYLES (styleTarget)
   Contrôle où s'appliquent fond/rayon/ombre/bordure/padding Macteck.
   Les contrôles natifs Divi agissent toujours sur le wrapper global.
   ───────────────────────────────────────────────────────────────────── */

/*
 * Cible = Élément KPI (default, et classe explicite) :
 *   → __card reçoit le visuel — déjà géré par les règles layout-card / layout-split.
 *   Aucune règle supplémentaire nécessaire.
 */

/*
 * Cible = Conteneur du module :
 *   → wrapper .mds-d5-counter reçoit le visuel.
 *   → __card devient transparent/plat.
 */
.mds-d5-counter--style-target-container {
	background:    var(--mds-ac-card-bg);
	border-radius: var(--mds-ac-radius);
	box-shadow:    var(--mds-ac-shadow);
	border:        var(--mds-ac-border-w) solid var(--mds-ac-border-c);
	padding:       var(--mds-ac-pad-v) var(--mds-ac-pad-h);
	transition:    box-shadow 0.25s ease;
}

/* Neutralise __card quand le conteneur prend le visuel */
.mds-d5-counter--style-target-container.mds-d5-counter--layout-card .mds-d5-counter__card,
.mds-d5-counter--style-target-container.mds-d5-counter--layout-split .mds-d5-counter__card {
	background:    none;
	border:        none;
	box-shadow:    none;
	padding:       0;
	border-radius: 0;
}
/* Glassmorphism : le blur doit rester sur __card uniquement si layout-card/split actif */
.mds-d5-counter--style-target-container .mds-d5-counter__card {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/*
 * Cible = Les deux :
 *   → wrapper reçoit radius + ombre légère.
 *   → __card reçoit fond + padding (sans double padding excessif).
 */
.mds-d5-counter--style-target-both {
	border-radius: var(--mds-ac-radius);
	box-shadow:    0 2px 8px rgba(15, 23, 42, 0.05);
	border:        var(--mds-ac-border-w) solid var(--mds-ac-border-c);
}

/* __card garde son fond/padding mais pas de double ombre */
.mds-d5-counter--style-target-both.mds-d5-counter--layout-card .mds-d5-counter__card,
.mds-d5-counter--style-target-both.mds-d5-counter--layout-split .mds-d5-counter__card {
	box-shadow: none;
}

/* ─── Reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.mds-d5-counter__card {
		transition: none;
	}
}