/* ==============================================
   assets/css/style.css
   Version 1.23
   22/08/2026
   Cuisine pas à pas
   ==============================================
   But principal : CSS de l'accueil, reconstruit sur le modèle test.html (référence fournie,
                   non modifiée) — recopié tel quel puis ajusté ponctuellement (ex: police
                   des liens de nav) suite aux retours après test réel.
   ============================================== */

        :root {
            --bg-main: #F2DCB9;
            --text-dark: #3b180d; 
            --accent-orange: #C9722A;
            --dark-brown: #3b180d;
            --sidebar-bg: #EED4B1;
            --card-bg: #FFFDF8;
        }

        body {
            background-color: var(--bg-main) !important;
            font-family: 'Nunito', sans-serif;
            color: var(--text-dark);
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* Pousse le footer en bas de page même quand le contenu est court
           (dashboard admin avec peu de recettes, par exemple). */
        .page-wrapper {
            flex: 1 0 auto;
        }

        h1, h2, h3, h4, h5, .brand-text {
            font-family: 'Fredoka', sans-serif;
            color: var(--text-dark);
        }

        .blend-darken {
            mix-blend-mode: darken;
        }

        /* Header & Nav */
        .header-container {
            padding-top: 0.5rem; 
            position: relative;
            z-index: 1000; 
        }
        
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* GROUPE LOGO + MASCOTTE */
        .brand-group {
            display: flex;
            align-items: center;
        }

        .logo-img {
            height: 140px;
            object-fit: contain;
        }

        .mascot-wrapper {
            margin-left: -20px; 
            z-index: 100;
        }
        .mascot-img {
            height: 190px; 
        }
        
        .navbar-nav {
            margin-left: auto;
        }

        .nav-link {
            font-family: 'Nunito', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .02em;
            font-size: 0.95rem;
            padding: 10px 20px !important;
            margin: 0 2px;
            color: var(--text-dark) !important;
            transition: all 0.3s ease;
        }
        .nav-link:hover {
            color: var(--accent-orange) !important;
        }
        
        /* Onglet Actif (Recettes) */
        .nav-item.active-menu .nav-link {
            background-color: #b56526; 
            color: white !important; 
            border-radius: 8px 8px 0 0;
            padding: 12px 25px !important;
        }

        .dropdown-toggle::after {
            display: none; 
        }

        /* BOUTON BURGER MOBILE CORRIGÉ (Bien visible) */
        .navbar-toggler {
            border: none !important;
            background-color: var(--dark-brown) !important;
            padding: 10px 14px;
            border-radius: 10px;
        }
        /* Icône burger blanche nette */
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23F2DCB9' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        }

        /* Boîte du sous-menu (Desktop) */
        .dropdown-menu {
            background-color: var(--dark-brown);
            border: none;
            border-radius: 0 8px 8px 8px; 
            margin-top: 0;
            padding: 15px 0;
            box-shadow: none;
        }
        
        .dropdown-item {
            color: var(--bg-main); 
            font-family: 'Nunito', sans-serif;
            font-weight: 600;
            padding: 10px 30px; 
            font-size: 1.05rem;
            transition: all 0.2s ease;
        }
        
        .dropdown-item:hover {
            background-color: rgba(255, 255, 255, 0.05); 
            color: white;
            padding-left: 35px; 
        }

        /* --- Section Héro --- */
        .hero-section {
            margin-top: 1rem; 
            margin-bottom: 4rem;
        }

        /* Texte d'intro de l'accueil, juste sous le menu (index.php) — aligné à gauche comme le
           reste de la page (logo, titre héro...), pas centré : un bloc centré isolé au milieu
           d'une mise en page tout en alignement gauche flottait sans se raccrocher à rien.
           Encadré repris de .sidebar-block (fond tan, coins arrondis) — plus utilisée depuis le
           retrait de la barre latérale « L'Univers de la Cocotte ». */
        .intro-accueil {
            font-size: 1.15rem;
            background-color: var(--sidebar-bg);
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 2rem;
            color: var(--text-dark);
        }

        .hero-title {
            font-size: 4.5rem;
            font-weight: 700;
            color: var(--dark-brown);
            margin-bottom: 1.5rem;
            line-height: 1.05;
            letter-spacing: -1px;
            text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.15);
        }

        .hero-layout {
            position: relative;
            min-height: 380px; 
            display: flex;
            align-items: center;
        }

        .hero-bg-wrapper {
            position: absolute;
            top: 0;
            right: 0;
            width: 75%;
            height: 100%;
            border-radius: 40px; 
            overflow: hidden;
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
            mask-image: linear-gradient(to right, transparent 0%, black 30%);
        }

        .hero-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero-content-left {
            position: relative;
            z-index: 2;
            width: 45%; 
            padding-left: 1rem;
        }

        .hero-subtitle {
            font-size: 1.3rem;
            color: var(--dark-brown);
            font-weight: 700;
            margin-bottom: 2.5rem;
        }

        .btn-orange {
            background-color: var(--accent-orange);
            color: white;
            font-weight: 800;
            padding: 14px 40px;
            border-radius: 30px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: none;
            transition: transform 0.2s;
        }
        .btn-orange:hover {
            background-color: #a85d20;
            color: white;
            transform: scale(1.05);
        }

        /* Boutons du back-office (admin) : sobres, sans mascotte, couleurs de la charte. */
        .btn-brun {
            background-color: var(--dark-brown);
            border-color: var(--dark-brown);
            color: #fff;
        }
        .btn-brun:hover {
            background-color: #000;
            border-color: #000;
            color: #fff;
        }

        .btn-annuler {
            background-color: transparent;
            border: 1px solid var(--dark-brown);
            color: var(--dark-brown);
        }
        .btn-annuler:hover {
            background-color: var(--dark-brown);
            color: #fff;
        }

        /* Lien vers une recette dans une liste texte (ex: admin/recettes-vues.php) — enlève le
           bleu/souligné par défaut du navigateur, garde le brun de la charte, souligné seulement
           au survol pour rester repérable comme lien. */
        .lien-recette {
            color: var(--dark-brown);
            text-decoration: none;
            font-weight: 600;
        }
        .lien-recette:hover {
            text-decoration: underline;
        }

        /* Classe à combiner avec un bouton existant (ex: class="btn btn-orange btn-mascotte")
           pour faire apparaître la mascotte qui pointe le nez au-dessus du bouton. */
        .btn-mascotte {
            position: relative;
            margin-top: 22px;
        }

        .btn-mascotte::before {
            content: "";
            position: absolute;
            top: -34px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 43px;
            background: url('/assets/img/hbt.png') no-repeat center / contain;
        }

        /* Sidebar */
        .sidebar-title {
            font-size: 1.6rem;
            font-weight: 700;
            border-left: 4px solid var(--dark-brown);
            padding-left: 15px;
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }
        .sidebar-block {
            background-color: var(--sidebar-bg);
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 1.5rem;
        }
        .sidebar-block.transparent {
            background-color: transparent;
            padding-top: 0;
            padding-left: 0;
        }
        .sidebar-block h5 {
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--dark-brown);
        }
        .sidebar-block p {
            font-size: 0.95rem;
            margin-bottom: 0;
            line-height: 1.6;
        }

        /* Cards */
        .recipe-card {
            background-color: var(--card-bg);
            border: none;
            border-radius: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
            transition: transform 0.3s;
            height: 100%;
        }
        .recipe-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 25px rgba(0,0,0,0.08);
        }
        .card-img-top {
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            height: 240px;
            width: 100%;
            object-fit: cover;
            background-color: var(--sidebar-bg);
        }
        .card-body {
            padding: 1.8rem;
        }
        /* Bouton (ou son conteneur) toujours collé en bas de la carte, quelle que soit la longueur
           de la description au-dessus — la carte remplit déjà toute la hauteur de sa colonne
           (.recipe-card { height: 100% }), il suffit de pousser le dernier élément vers le bas. */
        .recipe-card .card-body {
            display: flex;
            flex-direction: column;
        }
        .recipe-card .card-body > :last-child {
            margin-top: auto;
        }
        /* Cartes de contenu de la fiche recette (classique/voir_recette.php : Ingrédients/Étapes) —
           pas des cartes-grille avec un bouton à coller en bas comme sur liste_recette.php/categorie.php.
           Annule le height:100%/flex/push du dernier enfant hérités de .recipe-card ci-dessus, qui
           étiraient la carte à la hauteur de sa voisine dans la même .row puis poussaient son contenu
           vers le bas — laissant un vide entre le titre (ex: « Étapes ») et le contenu. */
        .recipe-card--fiche {
            height: auto;
        }
        .recipe-card--fiche .card-body {
            display: block;
        }
        /* Photo de la fiche recette (classique/voir_recette.php) — même principe de fondu que .hero-bg-wrapper
           de l'accueil (dégradé en masque), mais sur le bord droit puisque l'image est à gauche ici */
        .hero-photo {
            border-radius: 20px;
            width: 100%;
            object-fit: cover;
            -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
            mask-image: linear-gradient(to right, black 70%, transparent 100%);
        }
        /* Miniatures des images d'étape/sous-étape sur la fiche recette (classique/voir_recette.php),
           affichées à côté du texte quand une image existe pour l'étape. */
        .etape-photo {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 12px;
        }
        .sous-etape-photo {
            width: 90px;
            height: 90px;
            object-fit: cover;
            border-radius: 12px;
        }
        .card-title {
            font-weight: 700;
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }
        .card-text {
            font-size: 0.95rem;
            color: #555;
            margin-bottom: 1.2rem;
        }
        /* Badge "Conseil du Chef" overlay */
        .card-img-wrapper {
            position: relative;
        }
        .badge-chef {
            position: absolute;
            bottom: -15px;
            right: 20px;
            background-color: var(--accent-orange);
            color: white;
            padding: 6px 14px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 5px 10px rgba(201, 114, 42, 0.3);
        }
        .badge-chef img {
            height: 22px;
            width: auto;
        }

        /* Bandeau Difficulté / Durée, juste sous l'image des cartes recette (pas par-dessus) */
        .card-info-bandeau {
            display: flex;
            background-color: var(--accent-orange);
            overflow: hidden;
        }
        .card-info-segment {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 8px;
            color: white;
            font-weight: 700;
            font-size: 0.85rem;
        }
        .card-info-segment:first-child {
            border-right: 1px solid rgba(255, 255, 255, 0.35);
        }
        .card-info-icon {
            height: 24px;
            width: auto;
        }
        /* .card-info-icon sur une icône de police (ex: <i class="bi bi-clock">) plutôt qu'une image :
           height/width n'ont pas d'effet sur un élément inline, la taille passe par font-size */
        i.card-info-icon {
            font-size: 1.4rem;
        }

        /* Ligne de cartouches (difficulté/durée) sur la fiche recette (classique/voir_recette.php) */
        .info-recette {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px;
        }

        /* Cartouche orange réutilisable : difficulté/durée, minuteurs des étapes, mots-clés
           (classique/voir_recette.php) — fond plein, texte blanc, coins arrondis en pilule.
           Utilisée aussi sur des <a> (mots-clés) : le bleu/souligné par défaut du navigateur
           gagne face à une simple classe (même souci déjà rencontré sur .recipe-card-link),
           d'où la règle a.cartouche-orange:link/... ci-dessous pour forcer le blanc. */
        .cartouche-orange {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background-color: var(--accent-orange);
            color: white;
            font-weight: 700;
            padding: 8px 16px;
            border-radius: 30px;
            text-decoration: none;
        }
        a.cartouche-orange:link,
        a.cartouche-orange:visited,
        a.cartouche-orange:hover,
        a.cartouche-orange:active {
            color: white;
            text-decoration: none;
        }
        .cartouche-orange img {
            height: 22px;
            width: auto;
        }

        /* Footer */
        footer {
            background-color: var(--dark-brown);
            color: white;
            padding: 2rem 0;
            margin-top: 6rem;
            flex-shrink: 0;
        }
        .footer-links a {
            color: white;
            text-decoration: none;
            margin-right: 20px;
            font-size: 1.4rem;
            transition: color 0.2s;
        }
        .footer-links a:hover {
            color: var(--accent-orange);
        }
        .footer-text {
            font-size: 0.95rem;
            opacity: 0.8;
            margin: 0;
        }
        
        /* Adaptation mobile : menu contrasté et rollover parfaitement lisible */
        @media (max-width: 991px) {
            .hero-title { font-size: 2.8rem; white-space: normal; } 
            .logo-img { height: 85px; }
            .mascot-img { height: 115px; }
            .hero-layout { display: block; min-height: auto; }
            .hero-bg-wrapper { position: relative; width: 100%; height: 220px; border-radius: 20px; -webkit-mask-image: none; mask-image: none; margin-bottom: 2rem; display: block !important; }
            .hero-content-left { width: 100%; padding-left: 0; }
            .hero-photo { -webkit-mask-image: none; mask-image: none; }

            /* Panneau du menu mobile bien contrasté et compact */
            .navbar-collapse {
                background-color: var(--dark-brown);
                padding: 10px; /* Padding réduit */
                border-radius: 12px;
                margin: 1px; /* Marge drastiquement réduite à 1px */
                box-shadow: 0 10px 25px rgba(0,0,0,0.3);
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                z-index: 2000;
            }
            .navbar-nav .nav-link {
                color: var(--bg-main) !important;
                padding: 12px 15px !important;
                border-radius: 8px;
                transition: background-color 0.2s, color 0.2s;
            }
            /* ROLLOVER MOBILE CORRIGÉ : Fond clair au survol/clic et texte orange bien visible */
            .navbar-nav .nav-link:hover, 
            .navbar-nav .nav-link:focus {
                background-color: rgba(255, 255, 255, 0.1) !important;
                color: var(--accent-orange) !important;
                padding-left: 20px !important;
            }
            .nav-item.active-menu .nav-link {
                background-color: #b56526 !important;
                color: white !important;
                border-radius: 8px;
            }
        }

/* ==============================================
   Historique des modifications :
   - Version 1.0 - 03/08/2026 10:32 : recopié tel quel depuis le <style> de test.html (référence non modifiée)
   - Version 1.1 - 03/08/2026 11:30 : .nav-link sorti du group Fredoka -> police Nunito (Fredoka en gras+majuscules était peu lisible dans le menu, ex: "RECETTES" serré dans le badge actif) ; ajout d'un léger letter-spacing pour compenser
   - Version 1.2 - 03/08/2026 15:30 : pied de page collé en bas de page même sur un contenu court (body en flex column min-height:100vh, .page-wrapper en flex:1 0 auto, footer en flex-shrink:0)
   - Version 1.3 - 03/08/2026 15:45 : ajout de .btn-brun (action principale admin, brun de la charte) et .btn-annuler (action secondaire, contour brun) — remplace btn-primary (bleu Bootstrap par défaut, hors charte) sur les boutons du back-office
   - Version 1.4 - 03/08/2026 17:15 : ajout de .recipe-card-link (enlève le style de lien par défaut sur les cartes recettes cliquables, classique/liste_recette.php)
   - Version 1.5 - 03/08/2026 17:40 : correction .recipe-card-link — le texte du titre/description apparaissait bleu et souligné (le lien par défaut du navigateur gagnait la guerre de spécificité face aux règles h5/p ; text-decoration se transmettait aux enfants faute de reset) ; ajout de text-decoration:none et de color:inherit sur .recipe-card-link et tous ses descendants
   - Version 1.6 - 03/08/2026 18:05 : suppression de .recipe-card-link (devenue inutile, la carte n'est plus enveloppée dans un lien — classique/liste_recette.php v1.2) ; ajout de .card-info-bandeau/.card-info-segment/.card-info-icon (bandeau Difficulté/Durée superposé en haut de l'image des cartes recette, icônes assets/img/toque.png et montre.png)
   - Version 1.7 - 03/08/2026 18:15 : .card-info-bandeau n'est plus superposé par-dessus l'image (position absolute retirée) — il s'affiche désormais juste en dessous, en flux normal
   - Version 1.8 - 03/08/2026 18:30 : ajout de .hero-photo (photo de classique/voir_recette.php) — cette classe était utilisée dans le HTML depuis sa création mais n'avait jamais été définie ici, d'où l'image non responsive sur petit écran
   - Version 1.9 - 03/08/2026 18:40 : .hero-photo reçoit un dégradé en masque sur le bord droit (même principe que .hero-bg-wrapper de l'accueil, mais inversé — l'image est à gauche sur la fiche recette)
   - Version 1.10 - 03/08/2026 19:30 : ajout de .info-recette/.info-recette-item/.info-recette-valeur — difficulté/durée sur classique/voir_recette.php reprennent les icônes (toque.png/montre.png) et la couleur orange déjà utilisées sur le bandeau des cartes recette, au lieu du badge gris Bootstrap générique
   - Version 1.11 - 03/08/2026 19:45 : .info-recette-item/.info-recette-valeur remplacés par .cartouche-orange (fond orange plein, texte blanc, coins en pilule) — appliqué à la difficulté/durée, aux ingrédients et aux minuteurs des étapes/sous-étapes de classique/voir_recette.php
   - Version 1.12 - 03/08/2026 20:00 : ingrédients revenus à leur affichage précédent (liste simple, sans cartouche — malentendu sur ce qui devait être en cartouche) ; cartouche appliqué aux mots-clés à la place ; règle a.cartouche-orange:link/... ajoutée pour éviter le texte bleu/souligné par défaut du navigateur sur les mots-clés (qui sont des <a>)
   - Version 1.13 - 03/08/2026 21:20 : ajout de i.card-info-icon (taille via font-size) — montre.png remplacée par l'icône bi-clock (Bootstrap Icons) sur classique/liste_recette.php et classique/voir_recette.php
   - Version 1.14 - 03/08/2026 22:20 : hbt.png déplacée de personnage/officiel/ vers assets/img/ — .btn-mascotte::before mis à jour
   - Version 1.15 - 04/08/2026 : .hero-subtitle passe de var(--accent-orange) à var(--dark-brown) — contraste insuffisant sur le fond beige (ratio ~2.6:1, sous le seuil d'accessibilité de 3:1 pour du texte gras de cette taille), texte difficile à lire
   - Version 1.16 - 04/08/2026 : ajout de .recipe-card .card-body (flex colonne) et .recipe-card .card-body > :last-child (margin-top: auto) — le bouton « Voir la recette » (ou son conteneur .text-center sur classique/liste_recette.php) suivait directement le texte de description, sa position variait selon la longueur du texte ; il est désormais toujours collé en bas de carte
   - Version 1.17 - 04/08/2026 : ajout de .intro-accueil (texte d'intro sous le menu de index.php) — police agrandie, centré, largeur limitée à 700px pour rester lisible sur une ligne confortable
   - Version 1.18 - 04/08/2026 : .intro-accueil repassé aligné à gauche (retrait de text-align:center et margin:auto) — centré au milieu d'une page tout en alignement gauche, il flottait sans lien visuel avec le reste ; taille réduite à 1.15rem
   - Version 1.19 - 04/08/2026 : .intro-accueil reprend l'habillage encadré de .sidebar-block (fond tan, coins arrondis, padding) — classe inutilisée depuis le retrait de la barre latérale ; ajout d'une ombre légère (text-shadow) sur .hero-title
   - Version 1.20 - 04/08/2026 : retrait de max-width:640px sur .intro-accueil — le cadre ne prenait que la moitié de la largeur, il occupe désormais toute la largeur du conteneur comme le reste de la page
   - Version 1.21 - 13/08/2026 : ajout de .recipe-card--fiche (classique/voir_recette.php, cartes Ingrédients/Étapes) — annule le height:100%/flex/push du dernier enfant de .recipe-card, qui étirait la carte à la hauteur de sa voisine dans la même .row puis poussait son contenu vers le bas, laissant un vide entre le titre et le contenu (visible quand la carte Ingrédients est plus haute que la carte Étapes, ou inversement) ; règle inchangée pour liste_recette.php/categorie.php (grilles de cartes avec bouton à coller en bas, comportement voulu là)
   - Version 1.22 - 20/08/2026 : ajout de .lien-recette (admin/recettes-vues.php) — les liens vers les fiches recette dans le relevé s'affichaient en bleu souligné par défaut du navigateur, hors charte
   - Version 1.23 - 22/08/2026 : ajout de .etape-photo/.sous-etape-photo (classique/voir_recette.php) —
     miniatures des images d'étape/sous-étape, affichées à côté du texte quand une image existe
   ============================================== */