/* livreor/style.css */
:root {
    --bg-color: #F8F5F2;
    --deep-color: #1A2E39;
    --warm-color: #D98C5F;
    --accent-color: #B99767;
    --text-color: #3D3D3D;
    --font-title: 'Dancing Script', cursive;
    --font-subtitle: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text-color); overflow-x: hidden; background-image: url('../images/fond.png'); background-size: cover; background-attachment: fixed; background-position: center; }
.container { max-width: 900px; margin: 0 auto; padding: 0 20px; }
main { padding-top: 85px; } /* Hauteur du header */
section { padding: 80px 0; }
#livre-dor-display { background-color: transparent; }
#livre-dor-form { background-color: var(--bg-color); }
h2 { font-family: var(--font-title); color: var(--deep-color); font-weight: 700; font-size: 3.5rem; text-align: center; margin-bottom: 60px; position: relative; }
h2::after { content: ''; display: block; width: 80px; height: 2px; background-color: var(--accent-color); margin: 15px auto 0; }
p { line-height: 1.8; font-weight: 300; }

/* Header (copié de l'original avec chemins relatifs) */
.header { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 5%; background: rgba(248, 245, 242, 0.8); backdrop-filter: blur(10px); display: flex; justify-content: space-between; align-items: center; z-index: 1000; }
.logo { display: flex; align-items: center; gap: 15px; text-decoration: none; }
.logo img { height: 45px; width: auto; }
.logo span { font-family: var(--font-title); font-size: 2.2rem; color: var(--deep-color); font-weight: 700; }
.navbar a { font-size: 1.1rem; color: var(--deep-color); text-decoration: none; font-weight: 400; margin-left: 35px; transition: color 0.3s; position: relative; }
.navbar a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px; background: var(--accent-color); transform: scaleX(0); transform-origin: right; transition: transform 0.4s; }
.navbar a:hover, .navbar a:focus { color: var(--accent-color); }
.navbar a:hover::after, .navbar a:focus::after { transform: scaleX(1); transform-origin: left; }
.navbar a[href="#"] { color: var(--accent-color); font-weight: 600; } /* Style pour le lien actif */

/* Slider */
.slider-container { position: relative; max-width: 700px; margin: 0 auto; overflow: hidden; border-radius: 8px; }
.slider-track { display: flex; transition: transform 0.5s ease-in-out; }
.slide { flex: 0 0 100%; padding: 5px; }
.temoignage-card { background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); display: flex; flex-direction: column; align-items: center; text-align: center; border-top: 4px solid var(--accent-color); min-height: 300px; justify-content: center; }
.temoignage-card i { font-size: 2.5rem; color: var(--accent-color); opacity: 0.5; margin-bottom: 15px; }
.temoignage-texte { font-style: italic; color: var(--text-color); margin-bottom: 20px; flex-grow: 1; font-size: 1.1rem; }
.temoignage-auteur { font-weight: 600; color: var(--deep-color); font-family: var(--font-subtitle); font-size: 1.2rem; }
.temoignage-auteur span { font-size: 0.9rem; color: var(--text-color); font-weight: 400; font-family: var(--font-body); }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.7); border: none; border-radius: 50%; width: 45px; height: 45px; font-size: 2rem; cursor: pointer; transition: all 0.3s; z-index: 10; color: var(--deep-color); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.slider-btn:hover { background: var(--accent-color); color: white; }
.slider-btn.prev { left: 15px; }
.slider-btn.next { right: 15px; }
.no-testimonials { text-align: center; font-size: 1.2rem; padding: 40px; background: rgba(255,255,255,0.7); border-radius: 8px; }

/* Formulaire */
.form-container { max-width: 700px; margin: 0 auto; background: white; padding: 50px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.form-container p { text-align: center; margin-bottom: 30px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; }
.form-group input, .form-group textarea { width: 100%; padding: 12px; border-radius: 5px; border: 1px solid #ddd; background-color: var(--bg-color); font-family: var(--font-body); font-size: 1rem; }
.form-group textarea { resize: vertical; height: 150px; }
.btn { display: inline-block; padding: 12px 28px; background: var(--accent-color); border-radius: 5px; color: white; text-decoration: none; font-weight: 600; transition: background 0.3s; }
.btn:hover { background: var(--warm-color); }
.btn-submit { width: 100%; border: none; cursor: pointer; font-size: 1.1rem; }
.honeypot-field { position: absolute; left: -9999px; opacity: 0; }
#form-message { margin-top: 20px; font-weight: 600; text-align: center; }

/* Footer */
.footer { background: var(--deep-color); color: var(--bg-color); text-align: center; padding: 40px 20px; }

/* --- STYLES POUR LA RESPONSIVITÉ --- */

/* Icône du menu burger (cachée par défaut sur grand écran) */
#menu-icon {
    font-size: 2.5rem;
    color: var(--deep-color);
    cursor: pointer;
    display: none; /* Cachée sur desktop */
}

/* On utilise une media query pour appliquer des styles uniquement en dessous d'une certaine largeur d'écran */
@media (max-width: 992px) {
    .header {
        padding: 20px 5%;
    }

    #menu-icon {
        display: block; /* On affiche l'icône burger */
    }

    .navbar {
        position: absolute;
        top: 100%; /* Juste en dessous du header */
        left: -100%; /* Cachée sur la gauche */
        width: 100%;
        padding: 1rem 5%;
        background: var(--bg-color);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,0.1);
        transition: left 0.4s ease;
    }

    .navbar.active {
        left: 0; /* On fait apparaître le menu quand il a la classe 'active' */
    }

    .navbar a {
        display: block; /* Les liens s'affichent les uns sous les autres */
        font-size: 1.2rem;
        margin: 1.5rem 0;
    }
}

@media (max-width: 768px) {
    h2 { font-size: 2.8rem; }
    .temoignage-card { padding: 30px; min-height: unset; }
    .form-container { padding: 30px; }
}

@media (max-width: 480px) {
    .logo span { font-size: 1.8rem; }
    .logo img { height: 40px; }
    h2 { font-size: 2.4rem; }
    section { padding: 60px 0; }
}