/* 1. IMPORTER LES POLICES */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Lato:wght@400;700&display=swap');

/* 2. IMPORTER BOOTSTRAP & ICONES */
@import "../css/bootstrap.min-iILk3sM.css";
@import "../font/bootstrap-icons-UNAnHWy.css";

/* 3. DÉFINIR NOS COULEURS */
:root {
    --couleur-fond: #ded0b6;
    --couleur-texte: #3a3a3a; 
    --couleur-accent: #2E4732;    
    --couleur-contenu: #ffffff; 
}

/* 4. STYLE GÉNÉRAL */
body {
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
    font-family: 'Lato', sans-serif; 
    font-size: 1.1rem;
    line-height: 1.6;
    
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Lora', serif; 
    font-weight: 700;
    color: #2c2c2c; 
}

/* 5. NAVBAR & LOGO */
.navbar {
    z-index: 1030; 
}

.navbar-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

/* 6. CONTENU PRINCIPAL (Carte Blanche) */

.main-content {
    background-color: var(--couleur-contenu);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    
    /* --- LA CORRECTION EST ICI --- */
    /* On force une marge énorme en haut pour compenser la navbar */
    margin-top: 100px; 
    /* ---------------------------- */
    
    margin-bottom: 2rem;
}

/* AJOUT SPÉCIAL MOBILE : Si l'écran est petit, on réduit un peu le padding interne mais on garde la marge du haut */
@media (max-width: 768px) {
    .main-content {
        padding: 1.5rem; /* Moins de blanc sur les côtés sur mobile */
        margin-top: 90px; /* Ajustement pour mobile */
    }
    
    /* On peut aussi descendre un peu le titre dans le hero si besoin */
    .hero-content {
        padding-top: 70px;
    }
}

/* 7. BOUTONS ET LIENS */
a {
    color: var(--couleur-accent);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

.btn-primary, .submit-btn {
    background-color: var(--couleur-accent);
    border-color: var(--couleur-accent);
    font-weight: 700;
    padding: 0.75rem 1.5rem;
}
.btn-primary:hover, .submit-btn:hover {
    background-color: #2E4732; 
    border-color: #659A6E;
}

/* 8. PIED DE PAGE (Réseaux Sociaux) */
.social-icons a {
    font-size: 1.8rem;
    color: var(--couleur-texte);
    margin: 0 10px;
    transition: color 0.3s;
}
.social-icons a:hover {
    color: var(--couleur-accent); 
}

/* 9. CARTES (Effet survol) */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}
.card-img-top { transition: transform 0.5s ease; }
.card:hover .card-img-top { transform: scale(1.05); }

/* 10. MISE EN PAGE ARTICLE */
.article-content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 1.1rem;
    color: #333;
}
.article-content h2, .article-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-family: 'Lora', serif;
    color: var(--couleur-accent);
}

/* 11. SIDEBAR FIGÉE (Le "Butoir") */
.sticky-sidebar {
    position: -webkit-sticky;
    position: sticky;
    /* On règle ici la distance sous le menu : 130px */
    top: 130px; 
    z-index: 900; 
}

/* 12. BARRE DE PARTAGE (Nouvelle Logique) */

/* === CONFIGURATION PAR DÉFAUT (Mobiles, Tablettes, Laptops standards) === */
/* On met la barre EN BAS pour tout le monde, c'est plus sûr */
.share-sidebar {
    position: fixed;
    z-index: 2000;
    
    left: 0;
    bottom: 0; /* Collé en bas */
    width: 100%;
    
    display: flex;
    flex-direction: row; /* Horizontal */
    justify-content: center; /* Centré */
    align-items: center;
    
    background-color: rgba(255, 255, 255, 0.95); /* Fond blanc propre */
    padding: 12px 0;
    backdrop-filter: blur(5px);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    border-top: 1px solid #ded0b6; /* Petit rappel de la couleur beige */
}

.share-text {
    display: none; /* On cache le texte "Partager" pour gagner de la place */
}

.share-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.3s, background 0.3s, color 0.3s;
    font-size: 1.2rem;
    color: var(--couleur-texte);
    border: 1px solid #eee;
    margin: 0 10px; /* Espace entre les boutons */
}

.share-btn:hover { transform: scale(1.1); color: white; }
.share-btn.fb:hover { background-color: #1877F2; border-color: #1877F2; }
.share-btn.wa:hover { background-color: #25D366; border-color: #25D366; }
.share-btn.mail:hover { background-color: #2E4732; border-color: #2E4732; }


/* === CONFIGURATION ÉCRANS GÉANTS (Uniquement si > 1600px) === */
/* Là seulement, on a assez de place pour la mettre à gauche */
@media (min-width: 1600px) {
    .share-sidebar {
        left: 20px;
        top: 50%;
        bottom: auto; /* On annule le bas */
        width: auto;  /* On annule la largeur */
        transform: translateY(-50%);
        
        flex-direction: column; /* Vertical */
        
        background-color: transparent;
        padding: 0;
        backdrop-filter: none;
        box-shadow: none;
        border-top: none;
    }

    .share-text {
        display: block; /* On affiche le texte vertical */
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: rotate(180deg);
        font-family: 'Lora', serif;
        font-size: 0.8rem;
        letter-spacing: 2px;
        color: #aaa;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    .share-btn {
        margin: 0; /* On enlève les marges latérales */
    }
}

/* === HOMEPAGE : HERO HEADER === */
.hero-header {
    position: relative;
    background-image: url('https://www.guide-du-paysbasque.com/_bibli/articlesPage/131/images/adobestock-tamas-saint-jean-pied-de-port.jpg'); /* Photo exemple (Pays Basque / Nature) */
    background-size: cover;
    background-position: center;
    height: 500px; /* Hauteur imposante */
    border-radius: 12px; /* Coins arrondis pour rester dans la "carte" */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    color: white;
    margin-bottom: 3rem;
    overflow: hidden;
    padding-bottom: 60px; /* Espace pour le bouton */
}

/* Un filtre sombre par dessus l'image pour que le texte soit lisible */
.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.2); /* Noir à 40% */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Tout pousse vers le bas */
    align-items: center;
    padding-bottom: 40px; /* Marge du bas */
}

.hero-title {
    font-family: 'Lora', serif;
    font-size: 3.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 0.5rem;
}

.hero-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto 1.5rem auto;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* === HOMEPAGE : NAVIGATION CATÉGORIES === */
.cat-nav-item {
    text-align: center;
    transition: transform 0.3s;
    cursor: pointer;
}
.cat-nav-item:hover {
    transform: translateY(-5px);
}
.cat-icon-box {
    width: 80px;
    height: 80px;
    background-color: var(--couleur-fond); /* Le beige */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    font-size: 2rem;
    color: var(--couleur-accent);
    border: 2px solid transparent;
    transition: border-color 0.3s, background 0.3s;
}
.cat-nav-item:hover .cat-icon-box {
    border-color: var(--couleur-accent);
    background-color: white;
}
.cat-title {
    font-family: 'Lora', serif;
    font-weight: 700;
    color: var(--couleur-texte);
}
/* === PAGE HEADER (Pour les pages internes) === */
.page-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.page-title {
    font-family: 'Lora', serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--couleur-texte);
}
.page-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* === FILTRES DE RECHERCHE (Style "Tags") === */
.search-filters-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 2rem;
    margin-bottom: 3rem;
}

/* On cache la case à cocher moche */
.tag-checkbox {
    display: none; 
}

/* On stylise le label pour qu'il ressemble à un bouton */
.tag-label {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    margin: 0 5px 10px 0;
    border: 1px solid #ddd;
    border-radius: 50px; /* Forme pilule */
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
    color: #555;
    background: #fff;
}

.tag-label:hover {
    background-color: #f8f9fa;
    border-color: #ccc;
}

/* Quand la case est COCHÉE (via le sélecteur CSS :checked + label) */
.tag-checkbox:checked + .tag-label {
    background-color: var(--couleur-accent);
    color: white;
    border-color: var(--couleur-accent);
    box-shadow: 0 4px 10px rgba(204, 0, 0, 0.2);
}
/* === ANIMATION PERSONNALISÉE (Compatible Turbo) === */

/* 1. La définition du mouvement */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0); /* Part de 30px plus bas */
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0); /* Arrive à sa place */
    }
}

/* 2. La classe à ajouter aux éléments */
.animate-up {
    opacity: 0; /* Invisible au départ */
    animation: fadeInUp 0.6s ease-out forwards; /* Joue l'animation */
}

/* === BADGES SUR LES CARTES === */
.card-badges {
    position: absolute;
    top: 10px;
    left: 10px; /* En haut à gauche de l'image */
    z-index: 5;
    display: flex;
    flex-direction: column; /* Les uns sous les autres */
    gap: 5px;
}

.badge-custom {
    font-family: 'Lato', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    color: white;
    background-color: #333; /* Couleur par défaut (Noir) */
}

/* Couleurs spécifiques selon le texte */
/* Note : On utilisera une astuce Twig pour appliquer ces classes */
.badge-coup-de-cœur { background-color: #c00; } /* Rouge */
.badge-nouveau { background-color: #2980b9; } /* Bleu */
.badge-éco-responsable { background-color: #27ae60; } /* Vert */
.badge-fait-main { background-color: #e67e22; } /* Orange */

/* === FIL D'ARIANE DISCRET === */
.breadcrumb {
    background-color: transparent; /* Fond transparent */
    padding: 0;
    margin-bottom: 1rem;
    font-size: 0.50rem; /* Texte plus petit */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.breadcrumb-item a {
    color: #888; /* Gris plus clair */
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--couleur-accent); /* Le dernier élément en rouge */
    font-weight: bold;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #ccc; /* Séparateur discret */
    content: "›"; /* On remplace le slash par une flèche */
}

/* === BOUTON HAUT DE PAGE === */
#btn-back-to-top {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: none; /* Caché par défaut (géré par JS) */
    
    /* CENTRAGE PARFAIT */
    display: flex; /* Note: Le JS changera ça en 'flex' au lieu de 'block' */
    align-items: center;
    justify-content: center;
    padding: 0; /* Important ! */
    
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s, background 0.3s;
}

#btn-back-to-top:hover {
    transform: translateY(-3px);
}

#btn-back-to-top i {
    font-size: 1.5rem; /* Taille de la flèche */
    line-height: 1; /* Important pour le centrage vertical */
}

/* === OPTIMISATION CARTES (Mobile & Desktop) === */

/* 1. L'IMAGE : On force un ratio propre (4/3) au lieu d'une hauteur fixe */
.card-img-top {
    width: 100%;
    height: auto; /* Laisse la hauteur s'adapter */
    aspect-ratio: 4/3; /* Ratio standard photo (ou met 1/1 pour du carré) */
    object-fit: cover; /* Coupe ce qui dépasse sans déformer */
    transition: transform 0.5s ease;
}

/* 2. AJUSTEMENTS SPÉCIAUX MOBILE */
@media (max-width: 768px) {
    /* On réduit le blanc autour du texte dans la carte */
    .card-body {
        padding: 0.75rem !important; /* Plus compact */
    }

    /* Titre un peu plus petit pour ne pas prendre 3 lignes */
    .card-title {
        font-size: 1rem !important; 
        margin-bottom: 0.5rem !important;
    }

    /* Badge et adresse plus discrets */
    .badge {
        font-size: 0.65rem !important;
        padding: 0.35em 0.5em !important;
    }
    .card-text.small {
        font-size: 0.75rem !important;
    }
    
   /* 1. On réduit l'écartement et la marge */
    .card-badges {
        top: 5px;       /* Plus près du bord haut */
        left: 5px;      /* Plus près du bord gauche */
        gap: 2px;       /* Badges plus collés les uns aux autres */
        max-width: 70%; /* Empêche de dépasser sur toute la largeur */
    }

    /* 2. On réduit la taille du badge lui-même */
    .badge-custom {
        font-size: 0.55rem; /* Texte beaucoup plus petit (env. 9px) */
        padding: 2px 6px;   /* Badge plus fin */
        border-radius: 2px; /* Coins un peu moins ronds */
        line-height: 1.1;   /* Hauteur de ligne compacte */
        box-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Ombre plus discrète */
        
        /* Optionnel : Si tu veux qu'ils soient un peu transparents sur mobile */
         opacity: 0.9; 
    }
}