/**
 * styles.css — cinna.care
 *
 * Palette de marque :
 * - Vert Profond #1B4332
 * - Vert Principal #2D6A4F
 * - Vert Accent #52B788
 * - Vert Clair #B7E4C7
 * - Vert Pâle #D8F3DC
 * - Fond Crème #FAFAF5
 * - Texte #374151
 * - Gris Clair #9CA3AF
 *
 * Typographie : DM Serif Display (titres), Inter (corps)
 */

/* ==========================================
   BASE
   ========================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* ==========================================
   FOCUS STATES
   ========================================== */

#main-search-input:focus,
#header-search-input:focus {
    box-shadow: 0 0 0 4px rgba(82, 183, 136, 0.12);
}

/* ==========================================
   SUGGESTIONS DROPDOWN
   ========================================== */

#main-suggestions,
#header-suggestions {
    animation: suggestionsIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes suggestionsIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================
   SUGGESTION ITEMS
   ========================================== */

.suggestion-item {
    transition: background-color 0.15s ease;
}

.suggestion-item:hover {
    background-color: #D8F3DC; /* Vert Pâle */
}

.suggestion-item:first-child {
    border-top-left-radius: 0.875rem;
    border-top-right-radius: 0.875rem;
}

.suggestion-item:last-child {
    border-bottom-left-radius: 0.875rem;
    border-bottom-right-radius: 0.875rem;
}

/* ==========================================
   CARDS
   ========================================== */

.card-ingredient {
    background: white;
    border: 1px solid #e2e6ed;
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.card-ingredient:hover {
    border-color: #B7E4C7; /* Vert Clair */
    box-shadow: 0 8px 30px -10px rgba(27, 67, 50, 0.12);
    transform: translateY(-1px);
}

.card-product {
    background: white;
    border: 1px solid #e2e6ed;
    border-radius: 1rem;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.card-product:hover {
    border-color: #B7E4C7;
    box-shadow: 0 4px 20px -8px rgba(27, 67, 50, 0.12);
}

.card-comparator {
    background: white;
    border: 1px solid #e2e6ed;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.card-comparator:hover {
    box-shadow: 0 8px 30px -10px rgba(27, 67, 50, 0.12);
}

/* ==========================================
   BADGE — EVIDENCE LEVEL
   ========================================== */

.badge-evidence {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge-evidence-A {
    background-color: #D8F3DC; /* Vert Pâle */
    color: #1B4332; /* Vert Profond */
}

.badge-evidence-B {
    background-color: #fef3c7; /* amber-100 */
    color: #92400e; /* amber-800 */
}

.badge-evidence-C {
    background-color: #f3ede3;
    color: #7a6547;
}

/* ==========================================
   BADGE — PRIORITY
   ========================================== */

.badge-priority {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.badge-priority-1 {
    background-color: #D8F3DC;
    color: #1B4332;
}

.badge-priority-2 {
    background-color: #f1f3f6;
    color: #5d6879;
}

.badge-priority-3 {
    background-color: #f1f3f6;
    color: #9CA3AF;
}

/* ==========================================
   SCORE BAR
   ========================================== */

.score-bar {
    height: 6px;
    border-radius: 9999px;
    background-color: #e2e6ed;
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.score-excellent .score-bar-fill {
    background: linear-gradient(90deg, #52B788, #2D6A4F);
}

.score-good .score-bar-fill {
    background: linear-gradient(90deg, #B7E4C7, #52B788);
}

.score-average .score-bar-fill {
    background: linear-gradient(90deg, #d5c4a9, #c2a987);
}

/* ==========================================
   QUICK SUGGESTION PILLS
   ========================================== */

.pill-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #e2e6ed;
    border-radius: 9999px;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 450;
}

.pill-suggestion:hover {
    border-color: #B7E4C7;
    background-color: #D8F3DC;
    color: #1B4332;
    box-shadow: 0 2px 8px -2px rgba(27, 67, 50, 0.1);
}

/* ==========================================
   DETAIL SECTIONS
   ========================================== */

.detail-section {
    background: white;
    border: 1px solid #e2e6ed;
    border-radius: 1rem;
    padding: 1.5rem;
}

.detail-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f3f6;
}

.detail-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================
   PAGE TRANSITIONS
   ========================================== */

#page-home,
#page-results,
#page-detail,
#page-comparator {
    animation: pageIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 640px) {
    #main-search-input {
        font-size: 16px;
        padding-left: 3rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .card-ingredient {
        padding: 1.25rem;
    }

    #page-home h2 {
        font-size: 2rem;
    }
}

/* ==========================================
   PRINT
   ========================================== */

@media print {
    header, footer,
    #header-search, #btn-home,
    #btn-back-results, #btn-back-detail,
    button {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .card-ingredient,
    .card-product,
    .detail-section {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }
}