/*
Theme Name: Moulin Richard de Bas
Author: Martine Boulenger
Description: Design artisanal sur mesure pour le Moulin
Version: 1.3
*/

/* 1. BASES & TYPOGRAPHIE */
body {
    background-image: url('images/fond3-moulin.png');
    background-size: cover;
    background-attachment: fixed;
    color: #4a3728;
    margin: 0;
    padding: 0;
    font-family: 'Times New Roman', serif;
}

#page-vintage {
    max-width: 1300px; /* C'est la largeur de ta navigation */
    margin: 0 auto;
    padding: 0 20px;
}
/* Style du bouton vintage */
.btn-vintage {
    background-color: #4a5d45; /* Ton vert sapin */
    color: #ffffff; /* Texte blanc */
    padding: 15px 30px; /* Espace intérieur (haut/bas, gauche/droite) */
    text-decoration: none; /* Enlève le soulignement bleu */
    font-family: 'Times New Roman', serif; /* Garde la typo vintage */
    font-weight: bold;
    font-size: 1.1em;
    display: inline-block; /* Permet d'appliquer les marges et paddings */
    margin-top: 30px; /* Espace avec le texte au-dessus */
    border-radius: 3px; /* Coins très légèrement arrondis */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Petite ombre portée pour le relief */
    transition: background-color 0.3s ease; /* Effet doux au survol */
}

/* Effet au survol de la souris */
.btn-vintage:hover {
    background-color: #5c7356; /* Un vert légèrement plus clair au survol */
    color: #ffffff; /* Garde le texte blanc */
}
/* --- VÉRITABLE PYROGRAVURE (BRÛLURE SANS FEU) --- */

.titre-introduction {
    text-align: center;
    font-family: 'Pinyon Script', cursive;
    font-size: 2.5em; /* Un titre imposant */
    color: transparent; /* CACHÉ TOTALEMENT AU DÉPART */
    margin: 80px auto 40px auto;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    display: block;
   
}
/* --- LE TITRE CALLIGRAPHIQUE ÉLÉGANT (GRAVURE NOIRE) --- */

.titre-introduction {
    text-align: center;
    font-family: 'Pinyon Script', cursive; /* LA police calligraphique de référence */

    color: transparent; /* Masqué au début */

    position: relative;
    display: block;
    max-width: 1000px;
    
    /* FORCE LE RESPECT DES MINUSCULES ET MAJUSCULES */
    text-transform: none !important; 
    font-variant: normal !important;
    font-weight: normal;
}

/* Le fer chaud qui trace les lettres en noir */
.titre-introduction::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* Avance petit à petit */
    height: 100%;
    
    /* COULEUR NOIRE UNIQUE (pas d'orange !) */
    color: #1a100a; 
    
    overflow: hidden;
    white-space: nowrap;
    
    /* La pointe très fine du graveur */
    border-right: 1px solid rgba(0,0,0,0.4); 
    
    /* AUCUNE LUEUR - Juste une ombre de relief fine */
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3); 
    
    /* Animation douce de 8 secondes */
    animation: trace-plume 8s linear forwards;
}

@keyframes trace-plume {
    0% { width: 0; }
    100% { width: 100%; }
}

/* Le "fer chaud" qui passe sur les lettres */
.titre-introduction::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* Avance au fur et à mesure */
    height: 100%;
    
    /* COULEUR CARBONISÉE : Un noir très profond, pas d'orange */
    color: #1a100a; 
    
    overflow: hidden;
    white-space: nowrap;
    
    /* La pointe du fer (la marque de brûlure) */
    border-right: 2px solid rgba(0, 0, 0, 0.5); 
    
    /* Un effet d'ombre carbonisée, sans aucune lueur */
    text-shadow: 
        1px 1px 1px #000000,
        2px 2px 5px rgba(0,0,0,0.3);
    
    /* Animation lente et saccadée (steps) */
    /* passos(45) pour 45 lettres environ, durée 10s pour plus de réalisme */
    animation: gravure-profonde 10s steps(45) forwards;
}

/* L'effet de la pointe qui s'avance et s'éteint */
@keyframes gravure-profonde {
    0% {
        width: 0;
    }
    5% {
        width: 0;
        border-right-color: rgba(0, 0, 0, 0.8); /* Pointe active */
    }
    90% {
        width: 100%; /* Le fer rouge a fini la ligne */
        border-right-color: rgba(0, 0, 0, 0.8);
    }
    100% {
        width: 100%;
        border-right-color: transparent; /* Le fer s'éteint */
    }
}

/* --- SÉPARATION ANCIENNE (ORNEUR) --- */

/* --- SÉPARATION AVEC TON IMAGE VOLUTE.PNG --- */

.separation-vintage {
    text-align: center;
    /* 20px sous le titre, 50px au dessus du texte */
    margin: 20px auto 50px auto; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Les lignes fines qui partent de chaque côté de la volute */
.separation-vintage::before,
.separation-vintage::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #1a100a, transparent);
    max-width: 300px; /* Longueur des traits de côté */
}

.volute-img {
    width: 180px; /* Ajuste la taille selon tes goûts */
    height: auto;
    margin: 0 20px; /* Espace entre l'image et les traits */
    display: inline-block;
    vertical-align: middle;
}
}
/* 2. HEADER GLOBAL */
.header-global {
    position: relative;
    padding: 30px 0;
    min-height: 200px;
}


.navigation-centrale {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.illustration-moulin img {
    max-width: 150px; /* MOULIN PLUS GROS */
    height: auto;
    margin-bottom: 30px;
}

/* 3. NAVIGATION (TEXTE PLUS GROS ET LISIBLE) */
.menu-principal {
    margin-top: 30px;
    position: relative;
    z-index: 1000;
    max-width: 1100px; /* On ré-élargit un peu pour que le gros texte tienne */
    margin-left: auto;
    margin-right: auto;
}

.menu-principal ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 15px 0;
    margin: 0;
    border-top: 2px solid #4a3728; /* Bordure un peu plus épaisse */
    border-bottom: 2px solid #4a3728;
    gap: 25px; 
}

.menu-principal > ul > li {
    position: relative;
    padding: 5px 5px;
}

.menu-principal a, 
.menu-principal span {
    text-decoration: none;
    color: #4a3728;
    font-weight: 800; /* Plus gras */
    font-size: 1.05em; /* TAILLE AUGMENTÉE */
    letter-spacing: 1.5px; /* Plus d'espace entre les lettres */
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

/* SOUS-MENUS : Ajustement de la taille aussi */
.sous-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fdfaf5;
    min-width: 260px; /* Plus large pour les titres longs */
    padding: 12px 0 !important;
    border: 1px solid #4a3728;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
    z-index: 9999;
    flex-direction: column;
}

.menu-principal li:hover > .sous-menu {
    display: flex !important;
}

.sous-menu a {
    padding: 12px 25px !important;
    text-align: left;
    text-transform: none;
    font-weight: 600; /* Sous-menu un peu plus gras aussi */
    font-size: 1em; /* TAILLE AUGMENTÉE */
    border-bottom: 1px dotted rgba(74, 55, 40, 0.2);
}

.sous-menu a:hover {
    background-color: #4a5d45 !important;
    color: #ffffff !important;
}

/* Style spécifique du bouton Boutique */
.bouton-boutique a {
    background-color: #4a5d45; /* Ton vert sapin */
    color: #ffffff !important;
    padding: 8px 18px !important;
    text-decoration: none;
    font-weight: bold;
    border-radius: 2px;
    font-size: 0.85em !important;
    letter-spacing: 1px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    transition: background 0.3s;
}

/* On s'assure que le menu parent est la référence */
.menu-principal {
    position: relative;
    padding-bottom: 50px; /* On crée de l'espace pour le bouton en dessous */
}

/* Le conteneur du bouton pour le centrage horizontal */
.conteneur-boutique-bas {
    position: absolute;
    left: 0;
    right: 0;

    margin-top: 20px;
    text-align: center;
}

.btn-boutique-ligne {
    display: inline-block;
    background-color: #4a5d45; /* Ton vert sapin */
    color: #ffffff !important;
    padding: 10px 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    letter-spacing: 1px;
    border-radius: 2px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.15);
    /* On le remonte légèrement pour qu'il soit juste sous le trait */
    transform: translateY(-10px); 
    transition: all 0.3s ease;
}

.btn-boutique-ligne:hover {
    background-color: #384734;
    transform: translateY(-12px); /* Petit effet de levier au survol */
}

/* On enlève l'ancien bouton s'il était encore dans la liste */
.menu-principal ul li.bouton-boutique {
    display: none;
}

/* 6. SECTION HERO & PRÉSENTATION */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.hero-text {
    flex: 1.2;
    padding-right: 50px;
    text-align: justify;
    line-height: 1.9;
    margin-left: -60px;
}

.hero-image {
    flex: 0.7;
    text-align: right;
}

.hero-image img {
    max-width: 150%;
    height: auto;
    filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.15));
    padding-bottom: 100px;
}

.lettrine {
    float: left;
    font-size: 4.5em;
    line-height: 0.8;
    padding-right: 12px;
    color: #4a5d45;
    font-weight: bold;
}

.introduction {
    font-size: 1.3em;
    font-style: italic;
    margin-bottom: 35px;
    color: #5d4632;
}

.corps-texte {
    font-size: 1.15em;
    margin-bottom: 25px;
}

/* --- SECTION PRODUITS --- */

.produits-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px 0; /* Bel espace pour respirer */

}

.produit-image {
    flex: 0 0 45%; /* L'image prend 45% */
}

.produit-image img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.1));
}

.produit-text {
    flex: 0 0 50%; /* Le texte prend 50% */
}

.titre-produit {
    font-family: 'Pinyon Script', cursive; /* On reprend ta belle écriture */
    font-size: 3.5em;
    color: #4a3728;
    margin-bottom: 20px;
}

.action-boutique {
    margin-top: 40px;
}

/* On réutilise tes styles de boutons déjà créés */