/* --- POLICES ET BASES --- */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:wght@300;400;600&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Poppins', sans-serif; 
    background-color: #fff; 
    line-height: 1.4; 
    color: #333; 
    overflow-x: hidden; /* BLOQUE LE SCROLL HORIZONTAL SUR MOBILE */
}
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }

/* --- HEADER ET BANDEAU --- */
.header-banner {
    width: 100%;
    aspect-ratio: 16 / 6; /* Maintient la proportion exacte de votre image (1600x600) */
    background-image: url('../img/entete-et-logo-unegrainedevie-livres-jeunesse.webp');
    background-size: cover; /* L'image s'ajuste désormais parfaitement au cadre proportionnel */
    background-position: center;
    background-repeat: no-repeat;
}

.slogan-bar {
    background-color: #d4af37; /* OR */
    color: #fff;
    text-align: center;
    padding: 8px;
    font-family: 'Pacifico', cursive;
    font-size: 1.4rem;
}

/* Cette classe rend le texte invisible tout en le gardant lisible pour Google */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- MENU (Optimisé 100% Mobile et PC) --- */
.main-nav { background: #fff; padding: 15px 0; border-bottom: 2px solid #d4af37; }

/* Par défaut (Mobile) : on empile tout proprement */
.nav-content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; }
.nav-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; color: #333; font-weight: 600; transition: color 0.3s; text-align: center; }
.nav-links a:hover { color: #eb7057; }

/* Sur écran d'ordinateur (à partir de 900px) : on remet sur une seule ligne */
@media (min-width: 900px) {
    .nav-content { flex-direction: row; justify-content: space-between; gap: 40px; }
    .nav-links { gap: 25px; }
}

/* --- BOUTONS (Centrés au millimètre) --- */
.btn-cta {
    background-color: #eb7057;
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    border: none !important; 
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    
    /* Le mécanisme de centrage parfait : */
    display: block; 
    width: fit-content; /* Le bouton s'adapte à la taille du texte */
    margin: 20px auto; /* Centre le bouton horizontalement, avec un espace de 20px au-dessus */
    text-align: center;
}
.btn-cta:hover { background-color: #7d0d19; color: #fff; }
.btn-menu { margin: 0; } /* Empêche le bouton du menu d'être centré indépendamment */

/* --- CARTES ET DISPOSITION --- */
.card-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 colonne sur mobile */
    gap: 30px;
    margin-bottom: 30px;
    width: 100%;
}

@media (min-width: 900px) {
    .card-grid { grid-template-columns: 1fr 1fr; } /* 2 colonnes sur PC */
    .card-full-width { grid-column: span 2; }
}

.info-card {
    border: 2px solid #d4af37; /* BORDURE OR */
    border-radius: 15px;
    padding: 30px;
    background-color: #fff;
    width: 100%;
    overflow: hidden; /* Empêche le contenu de la carte de casser la mise en page */
}

h2 { font-family: 'Pacifico', cursive; color: #eb7057; font-weight: 400; margin-bottom: 20px; font-size: 1.8rem; }
p { margin-bottom: 15px; }

h3 { 
    font-family: 'Poppins', sans-serif; 
    color: #d4af37; /* Ton Or signature */
    font-weight: 600; 
    font-size: 1.2rem; 
    margin-top: 30px; /* L'espace crucial pour aérer AVANT le titre */
    margin-bottom: 15px; /* L'espace léger APRÈS le titre */
    line-height: 1.3;
}

/* Petite subtilité pour parfaire l'UX : 
   Si le H3 est le tout premier élément d'une carte, on annule sa marge haute 
   pour qu'il ne s'éloigne pas trop de l'image ou du bord de la carte */
.info-card h3:first-of-type {
    margin-top: 10px;
}

.info-card img {
    display: block;
    margin: 0 auto 20px auto; /* Centre horizontalement */
    max-width: 100%;
    height: auto;
}

/* Container parent pour le bandeau */
.bandeau-livres-container {
    text-align: center;
    margin: 30px 0;
}

/* Flexbox pour aligner les 4 images en ligne */
.bandeau-images-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espace entre les images */
    flex-wrap: wrap; /* Gère le passage à la ligne sur téléphone */
}

/* Taille adaptative des images */
.bandeau-images-container a {
    width: 20%; /* Chaque image prend 20% de la largeur du parent */
    min-width: 100px; /* Empêche les images d'être trop petites sur mobile */
}

.bandeau-images-container img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Un peu d'arrondi c'est plus moderne */
    transition: transform 0.3s ease;
}

.bandeau-images-container img:hover {
    transform: scale(1.05); /* Petit effet au survol */
}

/* --- LIENS TEXTUELS DANS LES CARTES --- */
.info-card p a {
    color: #eb7057; /* Ton Corail signature */
    text-decoration: none; /* Supprime le surlignage bleu par défaut */
    font-weight: 500; /* Donne une assise légèrement plus forte au lien */
}

.info-card p a:hover {
    text-decoration: underline; /* Le surlignage apparaît uniquement au survol */
}

/* --- FOOTER --- */
.main-footer {
    background: #f9f9f9;
    border-top: 2px solid #d4af37;
    padding: 40px 20px;
    text-align: center;
    margin-top: 40px;
}
.main-footer h2 { color: #d4af37; font-size: 1.8rem; text-align: center; margin-bottom: 20px; }
.footer-links {
    list-style-type: none; 
    padding: 0;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}
.footer-links li { display: inline; }
.footer-links a { color: #eb7057; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-credits { font-size: 0.9rem; color: #666; margin-top: 20px; }