/* --- CONFIGURATION & COULEURS --- */
html {
    scroll-behavior: smooth; /* Rend la descente vers les blocs agréable à l'oeil */
}

/* Optionnel : Ajustement pour que le bandeau ne cache pas le haut du titre après le clic */
#univers, #appli, #propos {
    scroll-margin-top: 50px; 
}

/* --- ZONE HAMBURGER (SOUS LE BANDEAU) --- */
.hamburger-area {
    padding: 15px 5%;
    background: transparent;
    position: relative;
}

#menu-toggle { display: none; }

/* --- FERMETURE AU CLIC EXTÉRIEUR --- */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
}

#menu-toggle:checked ~ .menu-overlay {
    display: block; /* S'active seulement quand le menu est ouvert */
}

/* --- FIX DE L'ICÔNE TRIPLE --- */
.ham-line {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--noir);
    position: relative;
}

.ham-line::before, .ham-line::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    background: var(--noir);
    left: 0;
}
.ham-line::before { top: -6px; }
.ham-line::after { bottom: -6px; }

/* --- STYLE DU PANNEAU --- */
.menu-content {
    display: none;
    background: white;
    border: 3px solid var(--noir);
    box-shadow: 8px 8px 0px var(--noir);
    padding: 25px;
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 2000; /* Doit être au-dessus de l'overlay */
}

#menu-toggle:checked ~ .menu-content {
    display: block;
}

/* Le déclencheur (3 lignes + mot Menu) */
.hamburger-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    width: fit-content;
}

.ham-line {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--noir);
    position: relative;
}

.hamburger-trigger .ham-line::before,
.hamburger-trigger .ham-line::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    background: var(--noir);
}
.hamburger-trigger .ham-line::before { top: -6px; }
.hamburger-trigger .ham-line::after { bottom: -6px; }

.menu-label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* LE PANNEAU (Textuel uniquement) */
.menu-content {
    display: none; /* Caché par défaut */
    background: white;
    border: 3px solid var(--noir);
    box-shadow: 8px 8px 0px var(--noir);
    padding: 30px;
    position: absolute;
    top: 50px;
    left: 5%;
    z-index: 2000;
    min-width: 250px;
}

/* Affichage quand on clique */
#menu-toggle:checked ~ .menu-content {
    display: block;
}

/* Hiérarchie du texte */
.menu-group {
    margin-bottom: 20px;
}

.group-title {
    font-weight: 800;
    color: var(--terracotta);
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}

.menu-group a {
    display: block;
    text-decoration: none;
    color: var(--noir);
    font-size: 1rem;
    padding: 5px 0;
    font-weight: 400;
    background: none !important; /* On tue le style bouton */
    border: none !important;
    box-shadow: none !important;
}

.menu-group a:hover {
    color: var(--terracotta);
    text-decoration: underline;
}

:root {
    --beige-lin: #f5f0e8;
    --terracotta: #d46a4f;
    --vert-sauge: #8a9a5b;
    --ocre: #d4a373;
    --titre: #2d2d2d;
    --texte: #4a4a4a;
    --noir: #1a1a1a;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--beige-lin);
    color: var(--texte);
    margin: 0;
    line-height: 1.6;
}

h1, h2, h3 { font-family: 'Playfair Display', serif; color: var(--titre); }

.logo { font-weight: bold; font-size: 1.4rem; color: var(--terracotta); }
nav ul { display: flex; list-style: none; gap: 20px; }
nav a { text-decoration: none; color: var(--noir); font-weight: 600; font-size: 0.9rem; }

/* --- HERO SECTION : L'effet "Pop" --- */
.hero-fun { padding: 60px 5%; display: flex; justify-content: center; }

.hero-container {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1100px;
    background: white;
    padding: 50px;
    border: 3px solid var(--noir);
    border-radius: 20px;
    box-shadow: 12px 12px 0px var(--ocre); /* Ombre épaisse fun */
}

.img-hero {
    max-width: 320px;
    border: 3px solid var(--noir);
    border-radius: 15px;
    transform: rotate(-2deg);
}

.hero-text-box h1 { font-size: 3rem; line-height: 1.1; margin: 15px 0; }
.highlight { color: var(--terracotta); font-style: italic; }

.badge-fun {
    background: var(--vert-sauge);
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: bold;
}

.hero-buttons { display: flex; gap: 15px; margin-top: 30px; }

.cta-fun {
    background: var(--terracotta);
    color: white;
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    border: 3px solid var(--noir);
    box-shadow: 4px 4px 0px var(--noir);
    transition: 0.2s;
}

.cta-fun:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0px var(--noir); }

.cta-outline {
    padding: 15px 30px;
    border: 3px solid var(--noir);
    border-radius: 12px;
    text-decoration: none;
    color: var(--noir);
    font-weight: bold;
}

/* --- GRILLE DES PRODUITS --- */
.container { max-width: 1100px; margin: 0 auto; padding: 80px 20px; }
.grid-univers { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.card-story {
    background: white;
    border: 3px solid var(--noir);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 8px 8px 0px var(--beige-lin);
}

.card-visual {
    height: 200px;
    background: var(--beige-lin);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    border-bottom: 3px solid var(--noir);
}

.card-content { padding: 30px; }

.tag-sauge { color: var(--vert-sauge); font-weight: bold; text-transform: uppercase; font-size: 0.7rem; }
.tag-ocre { color: var(--ocre); font-weight: bold; text-transform: uppercase; font-size: 0.7rem; }

.link-fun {
    display: inline-block;
    margin-top: 15px;
    color: var(--terracotta);
    font-weight: bold;
    text-decoration: none;
    border-bottom: 2px solid var(--terracotta);
}

/* --- MANIFESTE --- */
.section-manifeste-fun { background: white; padding: 100px 20px; text-align: center; border-top: 3px solid var(--noir); }
.big-number { font-size: 3rem; font-family: 'Playfair Display'; color: var(--ocre); opacity: 0.5; }
.manifeste-intro { font-family: 'Playfair Display'; font-style: italic; font-size: 1.4rem; color: var(--terracotta); }
.signature { font-family: 'Playfair Display'; font-style: italic; font-size: 1.3rem; }

footer { text-align: center; padding: 40px; font-size: 0.8rem; border-top: 3px solid var(--noir); }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .hero-container, .grid-univers { flex-direction: column; }
    .hero-text-box h1 { font-size: 2.2rem; }
    .grid-univers { grid-template-columns: 1fr; }
}
/* --- AJUSTEMENT DES IMAGES DE L'APPLI --- */

/* La bannière (le café) ne doit pas manger tout l'écran */
.banner-img {
    width: 100%;
    max-width: 500px; /* On limite la largeur maximale */
    height: auto;
    max-height: 180px; /* On limite la hauteur */
    object-fit: cover;
    border-radius: 15px;
    border: 3px solid var(--noir);
    margin: 0 auto 20px auto;
    display: block;
}

/* L'image du milieu (Si je gagnais 1€...) */
.promo-img {
    width: 100%;
    max-width: 400px; /* Taille idéale pour être lisible sans être géante */
    height: auto;
    border-radius: 20px;
    border: 3px solid var(--noir);
    box-shadow: 8px 8px 0px var(--ocre);
    display: block;
    margin: 0 auto;
}

/* L'image du bas (Prépare-toi à compter) */
.footer-promo-img {
    width: 100%;
    max-width: 300px; /* Plus petite pour rester un clin d'œil en bas de page */
    height: auto;
    border-radius: 15px;
    border: 3px solid var(--noir);
    margin: 40px auto;
    display: block;
}

/* On centre bien le contenu texte sur mobile et desktop */
.app-presentation {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
}
/* --- HARMONISATION PAGE APPLICATION --- */

.container-app {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Le style des "Cartes" */
.app-card {
    background: white;
    border: 3px solid #1a1a1a;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 10px 10px 0px var(--ocre);
    text-align: center;
}

/* Gestion des images pour qu'elles ne débordent plus */
.banner-img-fix {
    width: 100%;
    border-radius: 12px;
    border: 2px solid #1a1a1a;
    margin-bottom: 20px;
}

.side-img, .footer-img-fix {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    border: 2px solid #1a1a1a;
}

/* L'encadré Vidéo */
.video-container {
    max-width: 220px !important; /* Taille smartphone réaliste */
    margin: 0 auto;
}


video {
    display: block;
    width: 100%;
    border-radius: 12px;
}

.video-placeholder {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--terracotta);
    font-weight: bold;
}

/* Mise en page Flex pour le texte et l'image côte à côte */
.content-flex {
    display: flex;
    align-items: center;
    gap: 30px;
    text-align: left;
}

.text-side { flex: 1; }
.image-side { flex: 1; text-align: center; }

.cta-fun-app {
    display: inline-block;
    background: var(--terracotta);
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    border: 3px solid #1a1a1a;
    box-shadow: 4px 4px 0px #1a1a1a;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .content-flex { flex-direction: column; text-align: center; }
}

/* --- AJOUTS SPECIFIQUES POUR LA PAGE APPLICATION --- */

.container-app {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}



/* ON BRIDE L'IMAGE DE BAS (Celle qui était immense) */
.footer-img-fix {
    width: 100%;
    max-width: 350px; /* Elle ne dépassera plus cette taille */
    height: auto;
    border: 3px solid #1a1a1a;
    border-radius: 15px;
    display: block;
    margin: 20px auto 0 auto;
}

/* ON BRIDE L'IMAGE DU MILIEU (maman01.jpeg) */
.side-img {
    width: 100%;
    max-width: 280px; /* Taille harmonieuse pour le bloc */
    height: auto;
    border: 3px solid #1a1a1a;
    border-radius: 15px;
    transform: rotate(2deg); /* Petit effet fun */
}

/* Alignement du bloc "Pourquoi cette appli" */
.content-flex {
    display: flex;
    align-items: center;
    gap: 30px;
    text-align: left;
}

.text-side { flex: 1.2; }
.image-side { flex: 0.8; display: flex; justify-content: center; }

@media (max-width: 768px) {
    .content-flex { flex-direction: column; text-align: center; }
}



.video-card {
    flex: 0.8 !important; /* Moins large que le texte */
}

.content-card {
    flex: 1.2 !important; 
    text-align: left !important;
    padding: 40px !important;
}



.app-main-layout .app-card {
    flex: 1; /* Partage l'espace 50/50 */
    margin-bottom: 0; /* Enlève la marge du bas pour l'alignement */
}

/* Adaptation pour les téléphones (les blocs se remettent l'un sur l'autre) */
@media (max-width: 768px) {
    .app-main-layout {
        flex-direction: column;
    }
}
/* --- STRUCTURE DE LA PAGE HISTOIRE --- */
.story-page {
    max-width: 800px; /* On réduit la largeur pour une lecture confortable */
    margin: 60px auto;
    padding: 0 40px; /* Sécurité pour ne jamais toucher les bords */
}
nav {
    /* CORRECTION : On utilise le nom exact de ton fichier image */
    background-image: url('bandeau site.jpg') !important; 
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    
    /* On garde une hauteur suffisante pour voir ton logo et tes persos */
    height: 180px; 
    
    display: flex;
    justify-content: flex-end; /* Pousse tes boutons à droite */
    align-items: center;
    padding: 0 5%;
    border-bottom: 5px solid var(--noir);
}

/* ============================================================
   MISE EN PAGE ÉPURÉE : VIDÉO & TEXTE (Ligne 518+)
   ============================================================ */

.app-main-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* Aligne les deux blocs pile en haut */
    max-width: 1000px;
    margin: 0 auto 50px auto; /* Centre la page et laisse de l'espace en bas */
}

/* Le bloc de gauche : On enlève tout le fond blanc ici */
.video-card-clean {
    flex: 0.8; 
    text-align: center;
    padding-top: 10px; /* Petit ajustement pour l'alignement visuel */
}

.video-card-clean h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    margin-bottom: 25px;
    color: var(--titre);
}

/* Le Smartphone : On garde l'ombre seulement sur le tel */
.video-container {
    max-width: 220px !important; /* Taille smartphone réaliste */
    margin: 0 auto;
    background: white;
    border: 4px solid var(--noir);
    box-shadow: 10px 10px 0px var(--noir); /* Ombre franche Néo-Brutaliste */
    border-radius: 25px;
    padding: 5px;
    overflow: hidden;
    line-height: 0; 
}

.video-container video {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
}

/* Le bloc de droite : On conserve le cadre blanc et l'ombre ocre */
.content-card {
    flex: 1.2;
    background: white;
    border: 3px solid var(--noir);
    padding: 40px;
    box-shadow: 10px 10px 0px var(--ocre);
    text-align: left;
    border-radius: 20px;
}

/* Illustrations centrées avec ombre ocre */
.story-illustration {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 40px auto;
    border: 3px solid var(--noir);
    border-radius: 20px;
    box-shadow: 10px 10px 0px var(--ocre);
}

/* La bannière longue pour couper le texte */
.story-banner {
    width: 100%;
    border: 3px solid var(--noir);
    border-radius: 15px;
    margin: 40px 0;
}

/* La boîte de citation mise en valeur */
.quote-box {
    background: white;
    padding: 30px;
    border: 3px solid var(--noir);
    box-shadow: 8px 8px 0px var(--terracotta);
    margin: 40px 0;
    text-align: center;
}

.quote-box p {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.3rem;
    color: var(--terracotta);
    margin: 0;
}

/* --- DESIGN NÉO-BRUTALISTE (PAGE HISTOIRE) --- */
.story-container {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
}

.story-header-box {
    text-align: left;
    margin-bottom: 50px;
}

.story-block {
    background: white;
    border: 3px solid var(--noir);
    padding: 40px;
    margin-bottom: 60px;
    box-shadow: 10px 10px 0px var(--noir); /* Ombre noire franche comme le modèle */
}

.story-row {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}

.story-quote-card {
    flex: 1;
    background: white;
    border: 3px solid var(--noir);
    padding: 40px 30px;
    position: relative;
    box-shadow: 8px 8px 0px var(--terracotta);
}

.quote-icon {
    font-size: 4rem;
    font-family: serif;
    position: absolute;
    top: -10px;
    left: 10px;
    color: var(--noir);
}

.story-image-card {
    flex: 1;
    border: 3px solid var(--noir);
    border-radius: 0; /* On reste sur des angles vifs pour ce style */
    overflow: hidden;
    box-shadow: 8px 8px 0px var(--ocre);
}

.story-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-illustration-card {
    background: white;
    border: 4px solid var(--noir);
    padding: 50px;
    text-align: center;
    box-shadow: 12px 12px 0px var(--noir);
    margin-top: 50px;
}

.story-illustration-card h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .story-row { flex-direction: column; }
}

/* --- CORRECTIFS PAGE HISTOIRE --- */

.story-header-box.centered { text-align: center; margin-bottom: 60px; }

/* 4. Inversion : Citation à gauche, photos à droite */
.story-row.inverse {
    display: flex;
    flex-direction: row; /* Citation à gauche par défaut dans le HTML */
    gap: 40px;
    align-items: center;
    margin-bottom: 80px;
}

/* Style de la citation (Style démo Capture 125017) */
.neo-quote-card {
    flex: 1.2;
    background: white;
    border: 3px solid var(--noir);
    padding: 60px 40px;
    position: relative;
    box-shadow: 10px 10px 0px var(--noir);
}

.quote-mark {
    font-size: 5rem;
    font-family: 'Playfair Display', serif;
    position: absolute;
    color: var(--noir);
}

.quote-mark.start { top: -15px; left: 10px; }
.quote-mark.end { bottom: -40px; right: 10px; }

/* 2. Photos superposées (format horizontal) */
.photo-stack {
    flex: 0.8;
    position: relative;
    height: 450px; /* Augmenté pour laisser de la place au décalage vers le bas */
    min-width: 300px;
}

.stack-img {
    width: 100%;
    max-width: 320px; /* On bride un peu la largeur pour l'effet pêle-mêle */
    border: 3px solid var(--noir);
    position: absolute;
    background: white;
    padding: 5px; /* Petit bord blanc style photo */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
}

/* Photo du dessus (centrale) */
.img-1 { 
    transform: rotate(-10deg); 
    z-index: 3; 
    top: -50px; 
    left: 0; 
}

/* Photo du milieu (décalée à droite et en bas) */
.img-2 { 
    transform: rotate(5deg); 
    z-index: 2; 
    top: 70px; /* Plus de décalage vertical */
    left: 40px; /* Plus de décalage horizontal */
}

/* Photo du fond (décalée à gauche et encore plus bas) */
.img-3 { 
    transform: rotate(-6deg); 
    z-index: 1; 
    top: 130px; /* On la descend vraiment pour la voir */
    left: -40px; 
}

/* 3. Bloc style manifeste (comme sur l'index) */
.manifeste-style-block {
    text-align: center;
    padding: 60px 0;
    max-width: 800px;
    margin: 0 auto;
}

.manifeste-highlight {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.6rem;
    color: var(--terracotta);
    margin: 25px 0;
}

/* Mise en valeur générale */
.story-block strong, .neo-quote-card strong { color: var(--terracotta); }
.story-block em, .neo-quote-card em { color: var(--vert-sauge); font-style: italic; }

@media (max-width: 768px) {
    .story-row.inverse { flex-direction: column; }
    .photo-stack { height: 250px; width: 100%; }
}

/* --- CONCLUSION FINALE --- */
.story-final-conclusion {
    text-align: center;
    max-width: 800px;
    margin: 80px auto;
    padding: 0 20px;
}

.story-final-conclusion p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

/* Pour que les blocs citation/photos soient bien isolés */
.story-row {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
    align-items: flex-start; /* Aligne en haut pour éviter les étirements */
}

/* On s'assure que les sections suivantes reprennent toute la largeur */
.manifeste-style-block, .story-final-conclusion {
    width: 100%;
    clear: both; /* Sécurité pour casser tout flux flottant */
    text-align: center;
    margin-top: 60px;
}

/* Signature Manuscrite */
.complicite {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--terracotta);
    margin-top: 40px;
}

.prenom {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 600;
    margin-top: 5px;
}

    /* --- PAGE BUNNYMODLIFE : GRILLE & BIENFAITS --- */

/* On force la grille sur une ligne pour les 4 livres */
.grid-univers-mini {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes égales */
    gap: 15px;
    margin-top: 40px;
    margin-bottom: 80px
}

/* Version réduite des cartes de livres */
.card-story.mini {
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.card-story.mini:hover {
    transform: translateY(-5px);
}

.card-story.mini .card-visual-img {
    height: 180px; /* Plus petit pour la ligne unique */
}

.card-story.mini .card-content {
    padding: 15px;
    text-align: center;
}

.card-story.mini h3 {
    font-size: 1.1rem;
    margin: 10px 0;
}

/* Cartes des bienfaits (Les 3 colonnes) */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 40px 0;
}

.benefit-card {
    background: white;
    padding: 30px;
    border: 3px solid var(--noir);
    box-shadow: 6px 6px 0px var(--vert-sauge); /* Ombre sauge pour le bien-être */
    text-align: center;
}

.benefit-card h3 {
    color: var(--vert-sauge);
    margin-bottom: 10px;
}

/* Adaptation Mobile */
@media (max-width: 900px) {
    .grid-univers-mini, .benefit-grid {
        grid-template-columns: 1fr 1fr; /* 2 par ligne sur tablette */
    }
}

@media (max-width: 600px) {
    .grid-univers-mini, .benefit-grid {
        grid-template-columns: 1fr; /* 1 par ligne sur mobile */
    }
}
/* Règle universelle pour les images dans les cartes */
.card-visual-img, .story-image-card, .photo-stack {
    width: 100%;
    overflow: hidden; /* Coupe ce qui dépasse */
    border: 3px solid var(--noir);
}

.card-visual-img img, .stack-img, .side-img {
    width: 100%;
    height: 100%; /* Oblige l'image à prendre toute la place du bloc */
    object-fit: cover; /* Recadre intelligemment sans déformer */
    display: block;
}
/* Harmonisation des images sur la page Index */
.card-visual {
    height: 250px; /* On fixe une hauteur commune pour l'alignement */
    overflow: hidden;
    border-bottom: 3px solid var(--noir);
}

.card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recadre sans déformer */
    display: block;
}
/* --- AMÉLIORATION DU BANDEAU (NAV) --- */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background: white;
    border-bottom: 4px solid var(--noir); /* Bordure plus épaisse style Brutaliste */
    top: 0;
    z-index: 1000;
}

.logo {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--terracotta);
    text-transform: lowercase; /* Style moderne comme sur ton image */
}

nav ul {
    display: flex;
    align-items: center;
    gap: 15px;
    list-style: none;
    margin: 0;
}

nav a {
    text-decoration: none;
    color: var(--noir);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 16px;
    border-radius: 50px; /* Effet pilule */
    transition: 0.3s;
}

/* Effet au survol : on reprend ton ocre ou ton terracotta */
nav a:hover {
    background: var(--beige-lin);
    color: var(--terracotta);
}

/* Le lien "Accueil" ou le bouton principal mis en avant */
.nav-cta {
    background: var(--terracotta);
    color: white !important;
    border: 2px solid var(--noir);
    box-shadow: 3px 3px 0px var(--noir);
}
nav {
    /* On force l'image Canva */
    background-image: url('bandeau site.jpg') !important;
    background-size: cover;
    background-position: left center;
    height: 180px;
    
    display: flex;
    justify-content: flex-end; /* Pousse les boutons à droite */
    align-items: center;
    padding: 0 5%;
    border-bottom: 5px solid var(--noir);
}

/* On cache le titre SEO pour l'oeil humain */
.seo-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 15px;
    margin: 0;
    padding: 0;
}

/* Style des boutons sur le bandeau */
nav a {
    text-decoration: none;
    color: var(--noir);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    background: white;
    padding: 10px 20px;
    border: 3px solid var(--noir);
    border-radius: 50px;
    box-shadow: 4px 4px 0px var(--noir);
    transition: 0.2s;
}

nav a:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--terracotta);
}
/* --- BOUTON RETOUR EN HAUT --- */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: white;
    border: 3px solid var(--noir);
    box-shadow: 4px 4px 0px var(--noir);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 1000;
    transition: 0.3s ease;
}

.back-to-top:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--terracotta);
}

.arrow-up {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--noir);
}

/* On cache le bouton sur les très petits écrans si besoin */
@media (max-width: 480px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

/* --- STYLE DU GÉNÉRATEUR DE JEUX --- */

.adventure-form-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Stylisation des champs de saisie et menus déroulants */
.adventure-form-container input[type="text"], 
.adventure-form-container select {
    width: 100%;
    padding: 15px;
    border: 3px solid var(--noir);
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    background: white;
    box-shadow: 4px 4px 0px var(--noir);
    margin-top: 8px;
    outline: none;
}

.adventure-form-container label {
    font-weight: 600;
    color: var(--titre);
    display: block;
    margin-top: 15px;
}

/* Le curseur (Slider) pour le temps */
.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: var(--beige-lin);
    border: 2px solid var(--noir);
    outline: none;
    margin: 20px 0;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--terracotta);
    border: 2px solid var(--noir);
    cursor: pointer;
    box-shadow: 2px 2px 0px var(--noir);
}

/* Bouton spécifique pour la génération */
.btn-generate {
    background: var(--vert-sauge); /* Couleur différente pour l'action magique */
    color: white;
    padding: 20px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    border: 3px solid var(--noir);
    box-shadow: 6px 6px 0px var(--noir);
    cursor: pointer;
    transition: 0.2s;
    margin-top: 30px;
}

.btn-generate:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px var(--terracotta);
}

/* Responsive pour le formulaire */
@media (max-width: 768px) {
    .story-row {
        flex-direction: column;
        gap: 0;
    }
}
/* --- AMÉLIORATIONS DU FORMULAIRE --- */

.form-section {
    background: var(--beige-lin);
    border: 3px solid var(--noir);
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 6px 6px 0px var(--noir);
}

.section-title {
    font-family: 'Playfair Display', serif;
    color: var(--terracotta);
    font-size: 1.6rem;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--noir);
    padding-bottom: 10px;
}

/* Groupes de boutons radio (Genre et Temps) */
.radio-group {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.radio-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

.radio-group label, .radio-group-vertical label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 0;
}

/* Grille pour les cases à cocher du matériel */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    cursor: pointer;
    background: white;
    padding: 15px;
    border: 3px solid var(--noir);
    border-radius: 10px;
    transition: 0.2s;
    margin-top: 0;
}

.checkbox-grid label:hover {
    background: var(--beige-lin);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px var(--terracotta);
}

/* Stylisation des puces rondes et carrées */
input[type="radio"], input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--terracotta);
    cursor: pointer;
    border: 2px solid var(--noir);
}

/* Ajustement pour les petits champs (âge) */
input[type="number"] {
    width: 100%;
    padding: 15px;
    border: 3px solid var(--noir);
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    box-shadow: 4px 4px 0px var(--noir);
    outline: none;
}
/* --- DESIGN EN PILULES POUR LE MATÉRIEL --- */

.pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

/* Je cache la vraie case à cocher carrée */
.pill-item input[type="checkbox"] {
    display: none; 
}

/* Je dessine la fausse étiquette */
.pill-label {
    display: inline-block;
    background: white;
    border: 2px solid var(--noir);
    border-radius: 50px;
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 3px 3px 0px var(--noir);
    user-select: none; /* Empêche de surligner le texte en cliquant vite */
}

/* Effet au survol */
.pill-label:hover {
    background: var(--beige-lin);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px var(--terracotta);
}

/* L'effet magique quand la case est sélectionnée ! */
.pill-item input[type="checkbox"]:checked + .pill-label {
    background: var(--vert-sauge);
    color: white;
    transform: translate(3px, 3px);
    box-shadow: 0px 0px 0px var(--noir); /* L'ombre disparaît pour simuler l'enfoncement */
    border-color: var(--noir);
}
/* ============================================================
   OPTIMISATION ACCUEIL SEO 2026 (N'affecte que .home-page)
   ============================================================ */

/* Réduction globale des marges pour limiter le scroll */
.home-page .container { padding: 20px; }
.home-page .hero-intro { padding: 10px 0; margin-bottom: 20px; }
.home-page .main-slogan { font-size: 2.5rem; margin-top: 10px; text-align: center; }

/* Structure des 3 blocs équilibrés (Type #test) */
.home-page .universe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

/* Style des boîtes bénéfices sans casser .card-story des autres pages */
.home-page .benefit-box {
    background: white;
    border: 3px solid var(--noir);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 8px 8px 0px var(--noir);
    min-height: 450px; /* Réduit par rapport à 520px pour limiter le scroll */
}

/* Optimisation SEO 2026 : Section Expertise (E-E-A-T) */
.home-page .section-expertise {
    background: rgba(255, 255, 255, 0.5);
    border: 2px dashed var(--ocre);
    border-radius: 15px;
    padding: 20px;
    margin: 20px auto;
    max-width: 900px;
}

.home-page .section-expertise h2 { font-size: 1.5rem; text-align: center; margin-bottom: 15px; }

/* Positionnement Navigation & Hamburger */
.home-page nav {
    background-image: url('bandeau site.jpg') !important;
    background-size: cover;
    height: 160px; /* Hauteur réduite pour le scroll */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 5%;
    border-bottom: 4px solid var(--noir);
}

.home-page .hamburger-area {
    margin-top: 10px;
    margin-left: 5%; /* Aligné à gauche sous la bannière */
    position: relative;
    z-index: 1001;
}

/* Footer compact */
.home-page .main-footer {
    margin-top: 40px;
    padding: 30px;
    border-top: 3px solid var(--noir);
    font-size: 0.9rem;
}

/* Responsive : passage en colonne sur mobile */
@media (max-width: 950px) {
    .home-page .universe-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   MODIFICATIONS STRICTES POUR L'ACCUEIL (page #index UNIQUEMENT)
   ============================================================ */

/* Le hamburger sous la bannière à gauche */
.home-page .hamburger-container-under-banner {
    padding: 10px 5%;
    display: flex;
    justify-content: flex-start;
    background: transparent;
}

/* Grille et blocs de test.html avec marges réduites */
.home-page .universe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 10px;
}

.home-page .benefit-box {
    background: white;
    border: 3px solid var(--noir);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px; /* Marges réduites = moins de scroll */
}

/* Listes et boutons dans les blocs (Réduits pour gain de place) */
.home-page .feature-list { list-style: none; padding: 0; margin-bottom: 15px; font-size: 0.85rem; }
.home-page .feature-list li { margin-bottom: 5px; padding-left: 20px; position: relative; }
.home-page .feature-list li::before { content: "✨"; position: absolute; left: 0; }

.home-page .btn-group { display: flex; flex-direction: column; gap: 8px; }
.home-page .btn-main {
    display: block; text-align: center; padding: 10px; font-weight: bold;
    text-decoration: none; border: 3px solid var(--noir); border-radius: 10px;
    box-shadow: 4px 4px 0px var(--noir); transition: 0.2s; color: var(--noir);
}
.home-page .btn-main:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0px var(--noir); }

/* Section SEO 2026 compacte */
.home-page .section-expertise {
    background: rgba(255, 255, 255, 0.6);
    border: 2px dashed var(--ocre);
    border-radius: 15px;
    padding: 15px 20px;
    margin: 10px auto;
    max-width: 800px;
    text-align: center;
}

/* Responsive pour l'accueil */
@media (max-width: 950px) {
    .home-page .universe-grid { grid-template-columns: 1fr; }
}