/* ==========================================
   NAVBAR
   ========================================== */
.navbar {
    background-color: var(--color-bg-pale) !important;
    transition: box-shadow 0.3s ease;
}

.navbar.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}/* ==========================================
   IMPORT FONTS
   ========================================== */
@font-face {
    font-family: 'Basic';
    src: url('assets/fonts/Basic-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   VARIABLES CSS
   ========================================== */
:root {
    /* Polices */
    --font-primary: 'Basic', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-secondary: 'Basic', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Tailles de police */
    --font-h1: 3rem;
    --font-h2: 2.1875rem;
    --font-h3: 1.9rem;
    
    /* Line heights */
    --lh-h1: 4rem;
    --lh-h2: auto;
    --lh-h3: auto;
    
    /* Couleurs */
    --color-accent: #f9af15;
    --color-mid: #0b3847;
    --color-bg-pale: #FFFEF6;
}

/* ==========================================
   RESPONSIVE TYPOGRAPHY
   ========================================== */
@media (max-width: 992px) {
    :root {
        --font-h1: 2.5rem;
        --font-h2: 1.875rem;
        --font-h3: 1.375rem;
        --lh-h1: 3rem;
    }
}

@media (max-width: 576px) {
    :root {
        --font-h1: 2rem;
        --font-h2: 1.5rem;
        --font-h3: 1.125rem;
        --lh-h1: 2.5rem;
    }
}

/* ==========================================
   STYLES DE BASE
   ========================================== */
body {
    font-family: var(--font-secondary);
    overflow-x: hidden;
    padding-top: 100px;
    margin: 0;
}

html {
    margin: 0;
    padding: 0;
}

/* ==========================================
   TYPOGRAPHIE
   ========================================== */
h1 { 
    font-family: var(--font-secondary);
    font-size: var(--font-h1);
    line-height: var(--lh-h1);
}

h2 { 
    font-family: var(--font-secondary);
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
}

h3 { 
    font-family: var(--font-primary);
    font-size: var(--font-h3);
    line-height: var(--lh-h3);
}

p {
    letter-spacing: 0.5px;
}

/* ==========================================
   CLASSES UTILITAIRES COULEURS
   ========================================== */
.bg-mid { background-color: var(--color-mid) !important; }
.bg-pale { background-color: var(--color-bg-pale) !important; }
.bg-accent { background-color: var(--color-accent) !important; }

.text-accent { color: var(--color-accent) !important; }
.text-mid { color: var(--color-mid) !important; }
.text-pale { color: var(--color-bg-pale) !important; }

/* ==========================================
   NAVBAR
   ========================================== */
.navbar {
    background-color: var(--color-bg-pale) !important;
    transition: box-shadow 0.3s ease;
    min-height: 70px;
    padding: 0;
    margin: 0;
}

.navbar.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-link {
    font-family: var(--font-primary);
    font-size: 1.3rem;
    letter-spacing: 1px;
    color: var(--color-accent) !important;
}

.btn-contact {
    background-color: var(--color-accent) !important;
    color: var(--color-bg-pale) !important;
    padding: 8px 25px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-family: var(--font-secondary);
    text-decoration: none;
    border: none;
}

/* ==========================================
   BURGER MENU ANIMÉ
   ========================================== */
#burgerCheckbox {
    display: none;
}

.toggle {
    position: relative;
    width: 30px;
    height: 20px;
    cursor: pointer;
    display: block;
}

.bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--color-accent);
    transition: all 0.35s cubic-bezier(.5, -0.35, .35, 1.5);
}

.bar--top {
    bottom: calc(50% + 7.5px);
    transition-property: bottom, transform;
}

.bar--middle {
    top: calc(50% - 1.5px);
    transition-property: opacity;
}

.bar--bottom {
    top: calc(50% + 7.5px);
    transition-property: top, transform;
}

#burgerCheckbox:checked + .toggle .bar--top {
    bottom: calc(50% - 1.5px);
    transform: rotate(135deg);
}

#burgerCheckbox:checked + .toggle .bar--middle {
    opacity: 0;
}

#burgerCheckbox:checked + .toggle .bar--bottom {
    top: calc(50% - 1.5px);
    transform: rotate(225deg);
}

/* ==========================================
   BOUTONS
   ========================================== */
.btn-accent {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff !important;
    font-family: var(--font-secondary);
    font-size: 0.95rem;
    letter-spacing: 1px;
    padding: 0.5rem 1.5rem;
    border-radius: 999px;
}

.btn-accent:hover {
    background-color: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent) !important;
    transform: translateY(-2px);
}

.btn-outline-accent {
    border: 2px solid var(--color-accent);
    color: var(--color-accent) !important;
    font-weight: 600;
}

.btn-outline-accent:hover {
    background-color: var(--color-accent);
    color: var(--color-bg-pale) !important;
}

/* ==========================================
   BARRE DÉFILANTE
   ========================================== */
.scrolling-banner {
    background-color: var(--color-accent);
    padding: 20px 0;
    overflow: visible;
    white-space: nowrap;
    position: relative;
}

.scrolling-content {
    overflow: hidden;
    display: inline-block;
    animation: scroll 20s linear infinite;
}

.scrolling-content span {
    font-family: var(--font-primary);
    font-size: var(--font-h2);
    color: var(--color-bg-pale);
    margin-right: 100px;
    display: inline-block;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.avatar-on-banner {
    position: absolute;
    left: 2%;
    bottom: 88px;
    width: 150px;
    height: auto;
    z-index: 1000;
}

@media (max-width: 1400px) {
    .avatar-on-banner {
        width: 100px;
        left: 4%;
    }
}

@media (max-width: 992px) {
    .avatar-on-banner {
        width: 90px;
        left: 3%;
        bottom: 80px;
    }
    
    .scrolling-content span {
        font-size: var(--font-h3);
        margin-right: 60px;
    }
}

@media (max-width: 768px) {
    .avatar-on-banner {
        display: none;
    }
}

/* ==========================================
   SECTIONS
   ========================================== */
section.py-5 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

@media (max-width: 992px) {
    section.py-5 {
        padding-top: 3.75rem !important;
        padding-bottom: 3.75rem !important;
    }
}

@media (max-width: 576px) {
    section.py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* ==========================================
   PHONE MOCKUP
   ========================================== */
.phone-link {
    display: inline-block;
    text-decoration: none;
}

.phone-mockup {
    transition: all 0.3s ease;
    cursor: pointer;
    max-width: 100%;
}

.phone-link:hover .phone-mockup {
    transform: scale(1.02) translateY(-1px);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.phone-link:active .phone-mockup {
    transform: scale(1.01);
}

@media (max-width: 991px) {
    .phone-mockup {
        max-width: 300px;
    }
}

@media (max-width: 576px) {
    .phone-mockup {
        max-width: 250px;
    }
}

/* ==========================================
   ÉTOILES D'AVIS
   ========================================== */
.star-icon {
    width: 17%;
    margin: 0 2px;
}

/* ==========================================
   CARTES OFFRES
   ========================================== */
.offre-card {
    border: 2px solid var(--color-accent) !important;
    background-color: var(--color-mid) !important;
}

.offre-title {
    color: var(--color-accent);
    font-weight: 700;
}

.offre-price {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 1.3rem;
    margin: 0 !important;
}

del {
    color: #f03e74;
}

.nouveau-prix {
    color: #58d68e;
    font-weight: bold;
    font-size: 1.2em;
}