/* --- Variables & Reset --- */
:root {
    --gold: #d4af37;
    --gold-bright: #ffdf00;
    --dark-bg: #0d0d0d;
    --text-color: #e0e0e0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: url('images/texture_bois.webp');
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--text-color);
    font-family: 'Raleway', sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
}

.important-notice {
    text-align: center;
    font-size: 1.2em;
    padding: 20px;
    background-color: #ffeb3b;
    color: #000;
    margin-bottom: 20px;
    border-radius: 10px;
}

/* --- L'EFFET D'ÉTINCELLES (FORGE) --- */
.forge-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Derrière le texte */
    pointer-events: none;
    /* On crée deux couches d'étincelles avec des tailles différentes pour la profondeur */
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Ccircle cx='50' cy='350' r='1.2' fill='%23d4af37' fill-opacity='0.5'/%3E%3Ccircle cx='320' cy='120' r='1' fill='%23ff4500' fill-opacity='0.4'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Ccircle cx='100' cy='50' r='0.8' fill='%23ffffff' fill-opacity='0.3'/%3E%3Ccircle cx='180' cy='210' r='1.5' fill='%23ffa500' fill-opacity='0.5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='550' height='550'%3E%3Ccircle cx='400' cy='450' r='2' fill='%23ffdf00' fill-opacity='0.2'/%3E%3Ccircle cx='50' cy='100' r='1' fill='%23d4af37' fill-opacity='0.4'/%3E%3C/svg%3E");

    /* Chaque calque a une taille de répétition différente pour casser la grille */
    background-size: 400px 500px, 250px 250px, 550px 550px;
    
    /* On lance 3 animations avec des vitesses différentes (nombres premiers pour éviter la synchro) */
    animation: 
        rise1 17s linear infinite,
        rise2 23s linear infinite,
        rise3 31s linear infinite;
    
    /* Mélange subtil avec le fond bois */
    background-blend-mode: screen;
}

/* --- Les 3 trajectoires différentes --- */

@keyframes rise1 {
    from { background-position: 0 0; }
    to { background-position: 40px -400px; } /* Monte + léger décalage droite */
}

@keyframes rise2 {
    from { background-position: 0 0; }
    to { background-position: -60px -500px; } /* Monte + décalage gauche */
}

@keyframes rise3 {
    from { background-position: 0 0; }
    to { background-position: 20px -1100px; } /* Monte très vite */
}

body::before {
    content: "";
    position: fixed; /* Reste fixe pendant le scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dégradé radial : centre transparent, bords noirs */
    background: radial-gradient(
        circle at center, 
        rgba(0, 0, 0, 0) 10%,    /* Centre totalement clair */
        rgba(0, 0, 0, 0.4) 40%,  /* Commence à s'assombrir */
        rgba(0, 0, 0, 0.9) 100%
    );
}

/* --- Navigation --- */
header {
    position: relative;
    z-index: 10;
    padding: 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: 0.3s ease;
}

.nav-links a:hover {
    color: white;
    text-shadow: 0 0 8px var(--gold);
}

.placeholder-logo {
    text-align: center;
    font-family: 'Cinzel', serif;
    color: var(--gold);

    font-weight: bold;
}

/* --- Hero Section --- */
.hero {
    position: relative;
    z-index: 5;

    
    text-align: center;
    padding: 60px 20px;
}

h1 {
    font-family: 'Cinzel', serif;
    font-size: 2.8rem;
    letter-spacing: 4px;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8)
}

.gold-text {
    position: relative;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    z-index: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.4);
}

.hero-title {
    position: relative; /* CRUCIAL : Définit la référence pour le positionnement de ::after */
    display: inline-block; /* Pour que le pseudo-élément se base sur la largeur du texte */
    z-index: 1; /* Place le texte au-dessus de tout */
}
.hero-title::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrage parfait */
    
    /* Dimensions : un peu plus grand que le texte */
    width: 50vh;
    height: 50vh;
    background-image: url('images/image_principale.webp'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 30px rgba(0,0,0,0.5));
    border-radius: 8px;
    z-index: -1; /* Place cette couche DERRIÈRE le texte */
    pointer-events: none;
}

/* --- Grille --- */
.categories-grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.card {
    border: 1px solid #333;
    background: rgba(20, 20, 20, 0.8);
    transition: 0.4s ease;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-10px);
    border-color: var(--gold);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.card-img-wrapper img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    filter: grayscale(30%);
    transition: 0.4s;
}

.card:hover img {
    filter: grayscale(0%);
}

.card-footer {
    padding: 20px;
    text-align: center;
    font-family: 'Cinzel', serif;
    color: var(--gold);
    background: #111;
    border-top: 1px solid #222;
}

/* --- Footer --- */
footer {
    position: relative;
    z-index: 5;
    margin-top: 100px;
    padding: 60px 20px;
    /* Texture parchemin ou métal sombre */
    background: #0a0a0a; 
    border-top: 3px solid var(--gold);
    text-align: center;
}

.footer-title {
    font-family: 'Cinzel', serif;
    color: var(--gold);
    letter-spacing: 3px;
    margin-bottom: 30px;
    font-weight: bold;
}

.socials {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 50px;
}

.social-link img {
    height: 45px; /* Taille plus standard que vh */
    width: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: grayscale(100%) brightness(0.8); /* Look plus sobre de base */
}

.social-link:hover img {
    transform: scale(1.2) rotate(5deg);
    filter: grayscale(0%) drop-shadow(0 0 8px var(--gold));
}

.footer-logo img {
    height: 180px; /* Ajusté pour ne pas être trop massif */
    width: auto;
    opacity: 0.8;
    transition: opacity 0.5s;
}

.footer-logo:hover img {
    opacity: 1;
}

.copyright {
    margin-top: 40px;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: #555;
    letter-spacing: 2px;
}

.tagline {
    font-family: var(--font-header);
    font-weight: bold;
    font-size: 0.8rem;
}

/*PAGE CGV*/
.cgv {
    background-color: #414040;
    border-radius: 20px;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
    width: 50%;
    height: auto;
    padding: 20px;
}

.flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*PAGE TARIFS*/
.tarifs-section {
    padding: 60px 20px;
    text-align: center;
    position: relative;
    z-index: 5;
}

.section-title {
    font-family: 'Cinzel', serif;
    color: var(--gold);
    font-size: 2.5rem;
    margin-bottom: 40px;
    text-shadow: -1px -1px 0 #000, 1px 1px 0 #000; /* Ton contour texte */
}

.tarifs-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* LA CARTE TARIF - Style "Métal / Forge" */
.tarif-card {
    background: rgba(20, 20, 20, 0.9); /* Fond sombre semi-opaque */
    border: 2px solid #333;
    border-image: linear-gradient(to bottom, var(--gold), #333) 1; /* Bordure dégradée or */
    padding: 0;
    transition: transform 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.tarif-card:hover {
    transform: translateY(-5px);
    border-image: linear-gradient(to top, var(--gold), #555) 1;
}

/* En-tête de la carte */
.card-header {
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold);
    font-family: 'Cinzel', serif;
    padding: 15px;
    border-bottom: 1px solid #333;
    letter-spacing: 2px;
}

/* Liste des prix */
.tarif-list {
    list-style: none;
    padding: 20px;
    text-align: left;
}

.tarif-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px dotted #444;
    font-size: 0.95rem;
    color: #ccc;
}

.tarif-list li:last-child {
    border-bottom: none;
}

.price {
    font-weight: bold;
    color: var(--gold);
    font-family: 'Cinzel', serif;
}

/* Footer de section */
.tarif-footer {
    margin-top: 30px;
    font-style: italic;
    font-size: 0.8rem;
    color: #777;
}

/* Effet spécial pour la récupération de données */
.special-card {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.about-section {
    padding: 80px 20px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.about-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}

/* Alterne l'ordre pour les lignes paires */
.about-row.reverse {
    flex-direction: row-reverse;
}

.about-image {
    flex: 1;
}

.about-image img {
    width: 100%;
    border: 3px solid var(--gold);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.2);
    /* Effet de découpe "vieux cadre" */
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}

.about-text {
    flex: 1.2;
}

.about-text h2 {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    margin-bottom: 20px;
}

.about-text p {
    line-height: 1.8;
    color: #ccc;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.skills-list {
    list-style: none;
    margin-top: 25px;
}

.skills-list li {
    padding: 10px 0;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-weight: bold;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .about-row, .about-row.reverse {
        flex-direction: column;
        text-align: center;
    }
}