:root {
    /* Feuille de style */
    --beige: #F4E1C7;
    --green: #A1BF9A;
    --green-dk: #5BAB4C;
    --orange: #DC9952;
    --orange-dk: #F7781E;
    --dark: #0C2529;

    --black: #010010;
    --grey-700: #737373;
    --grey-200: #D9D9D9;
    --white: #FFFFFF;

    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-pill: 999px;

    --shadow-soft: 0 10px 30px rgba(1, 0, 16, .08);
    --shadow-hover: 0 14px 34px rgba(1, 0, 16, .10);
    --border-soft: 1px solid rgba(1, 0, 16, .10);

    --surface-65: rgba(255, 255, 255, .65);
    --surface-70: rgba(255, 255, 255, .70);
    --surface-75: rgba(255, 255, 255, .75);

    --ink-06: rgba(12, 37, 41, .06);
    --green-25: rgba(161, 191, 154, .25);
    --green-28: rgba(161, 191, 154, .28);
    --green-22: rgba(161, 191, 154, .22);
    --orange-20: rgba(220, 153, 82, .20);
    --orange-25: rgba(220, 153, 82, .25);

    --transition-fast: .15s ease;
}

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

html, body {
    height: 100%;
}

body {
    font-family: "Poppins", sans-serif;
    background: var(--beige);
    color: var(--black);
    background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, h6, .title {
    font-family: "Londrina Solid", system-ui, sans-serif;
    letter-spacing: .3px;
}





/* ================= NAVBAR ================= */

.nav-pill {
    background: #0C2529;
    border-radius: 0 0 50px 50px;
    box-shadow: var(--shadow-soft);
    border: var(--border-soft);
}

.navbar .nav-link {
    color: white;
    font-weight: 500;
    border-radius: var(--radius-pill);
    padding: .5rem .9rem;
}

.navbar .nav-link:hover {
    color: #DC9952;
}

.navbar .nav-link:active {
    color: #F7781E;
}

.search-pill {
    background: #FFFFFF;
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    min-width: 220px;
    border: var(--border-soft);
}

.search-pill input:focus {
    box-shadow: none;
}

.btn-icon {
    background: #FFFFFF;
    border: var(--border-soft);
    width: 42px;
    height: 42px;
}

.btn-icon:hover{
    background: #D9D9D9;
}

.btn-icon:active{
    background: #737373;
}

.btn-icon.show{
    background-color: #b5b5b5;
}

.btn:first-child:active{
    background-color: #838383;
}



/* ================= CARROUSSEL ================= */

#avis-splide .splide__slide{
    padding: .5rem; /* comme un g-3 light */
}



/* style commun */
.avis-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* gauche */
.avis-prev{
    left: -20px;
}

/* droite */
.avis-next{
    right: -20px;
}


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

.hero-home{
    margin-top: -3vh;
    margin-bottom: -7vh;
}

.section-card {
    background: var(--surface-70);
    border-radius: var(--radius-xl);
    padding: 26px;
    box-shadow: var(--shadow-soft);
    border: var(--border-soft);
}

.avis-card {
    background: var(--surface-70);
    border-radius: var(--radius-xl);
    padding: 26px;
    border: var(--border-soft);
}

.hero-title {
    font-size: clamp(44px, 5vw, 76px);
    line-height: .95;
}

.rounded-xl {
    border-radius: var(--radius-xl) !important;
}

.img-illu {
    width: 100%;
    height: auto;
}

.logo{
    max-width: 4vw;
}

@media (max-width: 768px) {
    .logo {
        max-width: 14vw; /* ou une taille plus adaptée pour mobile */
    }
}


.banner-recettes{
    height:260px;
    background-image: url("/ecomiam/public/assets/images/banniereRecettes.jpeg");
    background-size: cover;
    background-position: center;
    position: relative;
}


.banner-articles{
    height:260px;
    background-image: url("/ecomiam/public/assets/images/banniereArticles.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
}



/* ================= PILLS ================= */

.pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    border: var(--border-soft);
    background: var(--surface-65);
}

.pill-green {
    background: var(--green-28);
}

.pill-orange {
    background: var(--orange-25);
}

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

.recipe-card, .article-card {
    background: var(--surface-75);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: var(--border-soft);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.recipe-card:hover, .article-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.recipe-card .thumb {
    height: 180px;
    background: var(--ink-06);
    background-size: cover;
    background-position: center;
}

.article-card .thumb {
    height: 200px;
    background: var(--ink-06);
    background-size: cover;
    background-position: center;
}

.recipe-card .body,
.article-card .body {
    padding: 16px;
}

.recipe-card .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--grey-700);
    font-size: 14px;
}

/* ================= BOUTONS ================= */
/* état normal */
.btn.btn-soft {
    background: var(--dark);
    border: var(--border-soft);
    border-radius: var(--radius-pill);
    padding: 10px 16px;
    color: var(--white);
}

/* hover voulu */
.btn.btn-soft:hover,
.btn.btn-soft:focus {
    color: var(--orange);
    background: var(--dark);
    box-shadow: none;
}

/* active voulu */
.btn.btn-soft:active {
    color: var(--orange-dk);
}



.btn-green {
    background: var(--green-dk);
    color: var(--white);
    border: 0;
    border-radius: var(--radius-pill);
    padding: 10px 16px;
}

.btn-green:hover {
    filter: brightness(.95);
    color: var(--white);
}

.btn-orange {
    background: var(--orange-dk);
    color: var(--white);
    border: 0;
    border-radius: var(--radius-pill);
    padding: 10px 16px;
}

.btn-orange:hover {
    filter: brightness(.95);
    color: var(--white);
}

/* ================= FILTRES ================= */

.filters {
    background: var(--surface-70);
    border-radius: var(--radius-xl);
    padding: 22px;
    position: sticky;
    top: 18px;
    box-shadow: var(--shadow-soft);
    border: var(--border-soft);
}

.filters .form-check-input:checked {
    background-color: var(--green-dk);
    border-color: var(--green-dk);
}

/* ================= INGREDIENTS ================= */

.ingredients{

        position: sticky;
        top: 18px;               /* même valeur que tes filtres */
        align-self: flex-start;  /* important dans un flex/grid */
        max-height: calc(100vh - 36px);
        overflow: auto;          /* si la liste est longue, ça scroll dans la card */

}

/* ================= STEPS ================= */

.step-card {
    background: var(--surface-70);
    border-radius: var(--radius-xl);
    padding: 20px;
    border: var(--border-soft);
    box-shadow: var(--shadow-soft);
}

.step-card.eco {
    background: var(--green-22);
}

.step-card.alt {
    background: var(--orange-20);
}

/* ================= ADMIN ================= */

.admin-block {
    background: var(--surface-70);
    border-radius: var(--radius-xl);
    padding: 24px;
    border: var(--border-soft);
    box-shadow: var(--shadow-soft);
}

/* ================= FOOTER ================= */

.footer-card {
    background: var(--dark);
    border-radius: 50px 50px 0 0;
    box-shadow: var(--shadow-soft);
    border: var(--border-soft);
    color: var(--white)
}

.footer-title {
    font-family: "Poppins", sans-serif;
    letter-spacing: .08em;
    font-size: 12px;
    font-weight: 700;
    opacity: .7;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

footer .logo{
    max-width: 10vw;
}

.breadcrumb-lite {
    font-size: 12px;
    background: #0C2529;
    color: white;
    padding: 5px 15px;
    border-radius: var(--radius-pill);
    margin: 10px;
    display: inline-block;
}

.breadcrumb-lite a {
    color: white;
    text-decoration: none;
}

.breadcrumb-lite a:hover {
    text-decoration: underline;
}

.breadcrumb-lite span{
    color: var(--orange-dk);
}

/* Conteneur de recherche */
.search-pill {
    position: relative; /* nécessaire pour que le dropdown se place par rapport à l'input */
    width: 250px;       /* largeur fixe ou adaptée à ton design */
}

/* Dropdown sous l'input */
#searchSuggestions {
    display: none;          /* caché par défaut */
    position: absolute;     /* positionné par rapport au parent */
    top: 100%;              /* juste sous l'input */
    left: 0;                /* aligné à gauche de l'input */
    margin-top: 5px;        /* petit écart */
    width: 100%;            /* même largeur que l'input */
    z-index: 1000;          /* au-dessus des autres éléments */
    max-height: 300px;      /* scroll si trop long */
    overflow-y: auto;       /* scroll vertical si nécessaire */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background: #fff;       /* fond blanc */
    border-radius: 5px;
}