/* =========================================================
   Charte graphique — Boutique
   Style : Moderne & minimaliste
   Couleur principale : Corail (#FF6B4A)
   ========================================================= */

:root {
    /* Couleurs */
    --color-primary: #1983e0;
    --color-primary-dark: #d17330;
    --color-primary-light: #FFE8E1;
    --color-ink: #1C1C1E;
    --color-body: #4A4A4F;
    --color-muted: #8A8A93;
    --color-border: #ECECEE;
    --color-surface: #FFFFFF;
    --color-bg: #FAFAF9;
    --color-success: #2FAE60;
    --color-danger: #E5484D;

    /* Typographie */
    --font-heading: 'Sora', 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Rayons / ombres — esprit minimaliste : coins doux, ombres légères */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-soft: 0 2px 12px rgba(28, 28, 30, 0.06);
    --shadow-hover: 0 8px 24px rgba(28, 28, 30, 0.10);
}

/* ---------- Base ---------- */
body {
    font-family: var(--font-body);
    color: var(--color-body);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover { color: var(--color-primary-dark); }

/* ---------- Boutons ---------- */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-weight: 500;
    padding: 0.55rem 1.3rem;
    transition: background-color .15s ease, transform .1s ease;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}
.btn-primary:active { transform: scale(0.98); }

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: var(--radius-sm);
}
.btn-outline-primary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-danger { border-radius: var(--radius-sm); }

/* ---------- Navbar ---------- */
.navbar {
    border-bottom: 1px solid var(--color-border);
    padding-top: .9rem;
    padding-bottom: .9rem;
}
.navbar-brand {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--color-ink) !important;
    letter-spacing: -0.02em;
}
.navbar .nav-link {
    color: var(--color-body);
    font-weight: 500;
    font-size: 0.94rem;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--color-primary); }

/* ---------- Cartes produit ---------- */
.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: box-shadow .2s ease, transform .2s ease;
    overflow: hidden;
}
.card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}
.card-img-top {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: var(--color-primary-light);
}
.card-title a { color: var(--color-ink); font-weight: 500; }
.card-title a:hover { color: var(--color-primary); }

/* Badge promo / prix barré */
.text-danger.fw-bold { color: var(--color-primary) !important; }

/* ---------- Bannières / Hero ---------- */
.carousel-item img {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ---------- Catégories accueil ---------- */
.card.text-center img {
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* ---------- Footer ---------- */
/* footer.bg-dark {
    background-color: var(--color-ink) !important;
}
footer h5 { color: #fff; font-family: var(--font-heading); font-size: 1rem; }
footer a.text-muted:hover { color: var(--color-primary) !important; } */

/* ---------- Footer ---------- */
footer.bg-dark {
    background-color: var(--color-ink) !important;
    color: rgba(255, 255, 255, 0.75); /* couleur de texte par défaut du footer */
}

footer h5 { 
    color: #fff; 
    font-family: var(--font-heading); 
    font-size: 1rem; 
}

/* Redéfinir text-muted qui a color: #6c757d !important par défaut */
footer .text-muted {
    color: rgba(255, 255, 255, 0.897) !important;
}

footer a.text-muted:hover { 
    color: var(--color-primary) !important; 
}

/* Au cas où tu as des liens sans classe text-muted */
footer a {
    color: rgba(255, 255, 255, 0.85);
}
footer a:hover {
    color: var(--color-primary);
}
/* ---------- Formulaires ---------- */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--color-border);
    padding: 0.55rem 0.8rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ---------- Alertes ---------- */
.alert-success { background-color: #EAF7EF; color: #1E7A43; border: none; border-radius: var(--radius-sm); }
.alert-danger  { background-color: #FDECEC; color: #B3261E; border: none; border-radius: var(--radius-sm); }

/* ---------- Badges ---------- */
.badge.bg-primary { background-color: var(--color-primary) !important; }
.badge.bg-info { background-color: #E1F0FF !important; color: #1C6EBF !important; }

/* ---------- Prix ---------- */
.fs-3.fw-bold, .fw-bold.fs-4 { color: var(--color-primary); }

/* ---------- Pagination ---------- */
.page-link { color: var(--color-body); border-color: var(--color-border); }
.page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ---------- Utilitaires d'espacement (esprit minimaliste : plus de respiration) ---------- */
main > .container, main > div > .container { padding-top: 3rem; padding-bottom: 3rem; }



.carousel-caption {
    right: auto;
    bottom: auto;
    left: auto;
    width: 45%;
}

.caption-pos-top-left     { top: 10%; left: 5%;  text-align: left; }
.caption-pos-top-center   { top: 10%; left: 50%; transform: translateX(-50%); text-align: center; }
.caption-pos-top-right    { top: 10%; right: 5%; text-align: right; }
.caption-pos-center-left  { top: 50%; left: 5%;  transform: translateY(-50%); text-align: left; }
.caption-pos-center       { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.caption-pos-center-right { top: 50%; right: 5%; transform: translateY(-50%); text-align: right; }
.caption-pos-bottom-left    { bottom: 10%; left: 5%;  text-align: left; }
.caption-pos-bottom-center  { bottom: 10%; left: 50%; transform: translateX(-50%); text-align: center; }
.caption-pos-bottom-right   { bottom: 10%; right: 5%; text-align: right; }