/**
 * Custom CSS - Energy Consultant Application
 * Styles personnalisés pour l'application
 */

.m-0 {
    margin: 0px;
}

.kt-alert-success {
    border-left: 4px solid #10b981;
}

.w-128 {
    width: 128px;
}

/* 20% de 640px */
.h-57 {
    height: 57px;
}

.w-64 {
    width: 64px;
}

.h-28_5 {
    height: 32.5px;
}

/* ou

/* ============================================
   Hero Background Section
   ============================================ */
.hero-bg {
    background-image: url('/assets/media/images/2600x1200/bg-1.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.dark .hero-bg {
    background-image: url('/assets/media/images/2600x1200/bg-1-dark.png');
}

/* ============================================
   Alert Customization
   ============================================ */
.kt-alert-warning {
    border-left: 4px solid #ff9f1c;
}

.kt-alert-info {
    border-left: 4px solid #3b82f6;
}

.kt-alert-success {
    border-left: 4px solid #10b981;
}

.kt-alert-destructive {
    border-left: 4px solid #ef4444;
}

/* ============================================
   Table Enhancements
   ============================================ */
.kt-table thead th {
    font-weight: 600;
}

/* Spacing entre thead et tbody */
.kt-table tbody tr:first-child td {
    padding-top: 1rem;
}

/* ============================================
   Offer Card Styling
   ============================================ */
/* Étoiles de notation */
.offer-card__star {
    color: var(--color-yellow-400);
}

/* Nom du fournisseur */
.offer-card__rating-text,
.grid.place-items-center a {
    color: #e3e5e7;
}

/* Hero Price Section */
.offer-card__hero-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.offer-card__amount {
    font-size: 2.25rem;
    /* text-4xl */
    font-weight: 700;
    /* font-bold */
    line-height: 1;
    letter-spacing: -0.02em;
}

.offer-card__unit {
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 400;
    opacity: 0.7;
}

/* Icon Badge Orange */
.icon-badge-orange {
    color: #fff !important;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background-color: #ea580c !important;
}

/* ============================================
   Responsive Utilities
   ============================================ */
@media (width >=64rem) {
    .lg\:p-3\.5 {
        padding: calc(var(--spacing) * 3.5);
    }
}

.px-1 {
    padding-inline: calc(var(--spacing) * 1);
}

.p-1 {
    padding: calc(var(--spacing) * 1);
}

/* --- Base utilities manquantes --- */
.overflow-x-auto {
    overflow-x: auto;
}

.font-bold {
    font-weight: 700;
}

.h-\[360px\] {
    height: 360px;
}

.w-\[calc\(100\%-1rem\)\] {
    width: calc(100% - 1rem);
}

/* --- sm: breakpoint (640px) --- */
@media (width >= 40rem) {
    .sm\:inline {
        display: inline;
    }

    .sm\:flex {
        display: flex;
    }

    .sm\:block {
        display: block;
    }

    .sm\:justify-start {
        justify-content: flex-start;
    }

    .sm\:w-auto {
        width: auto;
    }

    .sm\:w-80 {
        width: calc(var(--spacing) * 80);
    }

    .sm\:w-4\/5 {
        width: 80%;
    }

    .sm\:w-\[220px\] {
        width: 220px;
    }

    .sm\:w-\[180px\] {
        width: 180px;
    }

    .sm\:w-\[120px\] {
        width: 120px;
    }

    .sm\:min-w-\[200px\] {
        min-width: 200px;
    }

    .sm\:min-w-\[240px\] {
        min-width: 240px;
    }

    .sm\:min-w-\[260px\] {
        min-width: 260px;
    }

    .sm\:min-w-\[280px\] {
        min-width: 280px;
    }

    .sm\:gap-1\.5 {
        gap: calc(var(--spacing) * 1.5);
    }

    .sm\:p-5 {
        padding: calc(var(--spacing) * 5);
    }

    .sm\:px-3 {
        padding-inline: calc(var(--spacing) * 3);
    }

    .sm\:px-10 {
        padding-inline: calc(var(--spacing) * 10);
    }

    .sm\:mt-0 {
        margin-top: 0;
    }

    .sm\:ms-auto {
        margin-inline-start: auto;
    }

    .sm\:mb-3 {
        margin-bottom: calc(var(--spacing) * 3);
    }

    .sm\:mb-4 {
        margin-bottom: calc(var(--spacing) * 4);
    }

    .sm\:px-4 {
        padding-inline: calc(var(--spacing) * 4);
    }

    .sm\:py-1 {
        padding-block: calc(var(--spacing) * 1);
    }

    .sm\:py-4 {
        padding-block: calc(var(--spacing) * 4);
    }

    .sm\:py-6 {
        padding-block: calc(var(--spacing) * 6);
    }

    .sm\:right-\[30px\] {
        right: 30px;
    }

    .sm\:size-\[100px\] {
        width: 100px;
        height: 100px;
    }

    .sm\:text-sm {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
    }

    .sm\:text-xs {
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
    }

    .sm\:text-base {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
    }

    .sm\:text-lg {
        font-size: var(--text-lg);
        line-height: var(--text-lg--line-height);
    }

    .sm\:text-2xl {
        font-size: var(--text-2xl);
        line-height: var(--text-2xl--line-height);
    }

    .sm\:h-\[360px\] {
        height: 360px;
    }

    .sm\:min-w-0 {
        min-width: 0;
    }

    .sm\:mx-0 {
        margin-inline: 0;
    }

    .sm\:px-0 {
        padding-inline: 0;
    }

    .sm\:h-12 {
        height: calc(var(--spacing) * 12);
    }
}

/* --- lg: breakpoint (1024px) — classes manquantes --- */
@media (width >= 64rem) {
    .lg\:w-auto {
        width: auto;
    }

    .lg\:min-w-\[200px\] {
        min-width: 200px;
    }

    .lg\:min-w-\[240px\] {
        min-width: 240px;
    }

    .lg\:min-w-\[260px\] {
        min-width: 260px;
    }
}

/* ============================================
   Comparaison Page Background
   ============================================ */
.bg-comparaison {
    background-color: #f3f3f34a;
}

.dark .bg-comparaison {
    background-color: oklch(14.1% 0.005 285.823);
}

/* ============================================
   shadow plus “élevée”
   ============================================ */

.shadow-elevated {
  --tw-shadow: 0px 10px 25px -10px rgba(45,72,126,0.20),
               0px 30px 60px -30px rgba(45,72,126,0.18);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

/* ============================================
   Prix Précédents — focus ring
   ============================================ */
#prix_hph_prev:focus,
#prix_hch_prev:focus,
#prix_hpe_prev:focus,
#prix_hce_prev:focus,
#prix_hp_prev:focus,
#prix_hc_prev:focus {
    outline: none !important;
    box-shadow: 0 0 0 1px #c1dbff !important;
}

.prev-filled-flash {
    outline: none !important;
    box-shadow: 0 0 0 1px #c1dbff !important;
}