html {
    scroll-behavior: smooth !important; /* Le !important force le navigateur à obéir */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;

    /* --- LE CODE POUR LES POIS --- */
    background-color: #ffe6f0; /* 1. La couleur du fond (rose très clair) */
    background-image: radial-gradient(#ffb3d9 2px, transparent 2px); /* 2. La couleur des pois (rose plus foncé) et leur taille (2px) */
    background-size: 20px 20px; /* 3. L'espace entre les pois (20px de large et de haut) */
}

/* Style de l'en-tête (Header) */
header {
    background-color: rgb(239, 14, 160);
    color: white;
    text-align: center;
    padding: 40px 20px;
}

header h1 {
    margin: 0;
    font-size: 2.5rem;
}

/* Zone des articles */
.articles-container {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 20px;
}

/* Style d'une "carte" d'article */
.carte-article {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 15px;
    border: none;
    box-shadow:  8px 20px 0px rgba(239,14,160,0.15);
    transform: rotate(-1deg);
}
.carte-article:nth-of-type(2) {
      transform: rotate(1deg);
}
.carte-article h2 {
    color: rgb(239, 14, 160);
    margin-top: 0;
}

.date {
    color: #6b4f5b;
    font-size: 0.9rem;
}

/* Style du bouton "Lire la suite" */
.bouton {
    display: inline-block;
    background-color: #2af0ed;
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 0px;
    border: 2px solid black;
    box-shadow: 3px 3px 0px black;  
    font-weight: bold;
    text-transform: uppercase;
}

.bouton:hover {
    background-color: #7ff2db;
    color: black;
}

/* Pied de page */
footer {
    clear: both;
    display:block;
    width:100%;
    text-align: center;
    padding: 20px 0;
    color: #777;
    font-size: 0.9rem;
    margin-top: 40px;
}

/* On s'assure que le header accepte les éléments volants */
header {
    position: relative;
    overflow: visible; /* Permet aux paillettes de dépasser légèrement si besoin */
}

/* Les paillettes flottantes */
header::before, header::after {
    position: absolute;
    font-size: 2rem;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
}

header::before {
    content: '✨';
    top: 15px;
    left: 15%; /* Se place par rapport au texte */
}

header::after {
    content: '🌸';
    bottom: 15px;
    right: 15%;
}
    
/* Le container principal calé en bas à droite */
#platine-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
    z-index: 999;
    width: 150px;  /* Nouvelle taille agrandie */
    height: 150px;
}

/* Le Vinyle XXL avec reflets réalistes */
.vinyle {
    width: 100%;
    height: 100%;
    /* Les cercles concentriques du vinyle */
    background: radial-gradient(circle, #111 20%, #222 21%, #111 30%, #222 31%, #111 50%, #222 51%, #111 70%);
    border-radius: 50%;
    border: 3px solid #000;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: transform 0.5s ease;
}

/* L'effet brillant/reflet sur le plastique du vinyle */
.stries-vinyle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Deux cônes de lumière blancs transparents pour faire le reflet brillant */
    background: conic-gradient(from 0deg, transparent 30%, rgba(255,255,255,0.1) 45%, transparent 60%, transparent 210%, rgba(255,255,255,0.1) 225%, transparent 240%);
}

/* Le macaron de couleur au centre */
.centre-vinyle {
    width: 45px;
    height: 45px;
    background-color: #ef0ea0; /* Ton rose fuchsia */
    border-radius: 50%;
    border: 2px solid #000;
    z-index: 2;
    /* Le petit trou au milieu du disque */
    display: flex;
    justify-content: center;
    align-items: center;
}
.centre-vinyle::after {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #ffe6f0;
    border-radius: 50%;
}

/* LE DIAMANT (Le bras de lecture) */
.bras-lecture {
    position: absolute;
    top: -10px;
    right: 10px;
    width: 15px;
    height: 80px;
    background-color: #cccccc; /* Couleur métal argenté */
    border: 2px solid #333;
    border-radius: 4px;
    z-index: 10;
    /* On fixe le point d'ancrage en haut pour qu'il pivote comme un vrai bras */
    transform-origin: top center;
    transform: rotate(-25deg); /* Position de repos (en dehors du disque) */
    transition: transform 0.5s ease; /* Animation fluide quand il bouge */
}
/* La petite tête de lecture tout au bout du bras */
.bras-lecture::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -5px;
    width: 21px;
    height: 12px;
    background-color: #333;
    border-radius: 2px;
}


/* Quand la musique joue : le bras pivote sur le disque ! */
.bras-sur-le-disque {
    transform: rotate(15deg) !important;
}

/* L'animation qui fait tourner le vinyle */
@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Cette classe sera activée en JavaScript quand la musique joue */
.en-train-de-tourner {
    animation: rotation 3s linear infinite;
}

/* La boîte magique découpée en Étoile */
.badge-vision-board {
    position: absolute;       /* Permet de placer l'étoile précisément où on veut */
    top: 160px;               /* Ajuste pour la monter ou la descendre par rapport au header */
    right: 40px;              /* Calée à droite de l'écran, loin des articles */
    width: 190px;             /* Largeur de l'étoile */
    height: 190px;            /* Hauteur de l'étoile */
    z-index: 999;             /* Passe par-dessus TOUT pour qu'on puisse cliquer dessus sans bug */
    
    /* LA COMMANDE MAGIQUE : Découpe le carré en étoile à 8 branches style scrapbooking */
    clip-path: polygon(50% 0%, 65% 35%, 100% 35%, 75% 60%, 85% 100%, 50% 75%, 15% 100%, 25% 60%, 0% 35%, 35% 35%);
    
    background-color: #f7ea00; /* Une étoile jaune flashy très rétro, ou mets #ffb3d9 pour du rose ! */
    transition: transform 0.3s ease;
    transform: rotate(-5deg); /* Petit effet incliné scrapbooking */
}

/* Le lien invisible qui prend toute la surface de l'étoile */
.bouton-badge {
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Le texte au centre de l'étoile */
.texte-etoile {
    color: #ef0ea0;          /* Texte rose fuchsia écrit serré */
    font-family: 'Segoe UI', sans-serif;
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Effet au survol : l'étoile s'anime ! */
.badge-vision-board:hover {
    transform: scale(1.1) rotate(5deg); /* Elle grossit et tourne un peu */
    background-color: #ff477e;          /* Elle devient rose fuchsia au survol */
}
.badge-vision-board:hover .texte-etoile {
    color: white;                       /* Le texte devient blanc au survol */
}

/* Style pour ta photo de biographie */
.photo-biographie {
    float: left;            /* Fait flotter l'image à gauche du texte */
    width: 150px;           /* Largeur de ta photo (ajuste si tu la veux plus grande) */
    height: auto;           /* Garde les bonnes proportions de l'image */
    margin-right: 20px;     /* Crée un espace à droite pour que le texte ne colle pas à la photo */
    margin-bottom: 10px;    /* Espace en dessous si le texte passe en dessous */
    
    /* Touche scrapbooking : */
    transform: rotate(-3deg); /* Légèrement inclinée vers la gauche */
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.15)); /* Une ombre douce sous ta découpe */
}

/* Sécurité pour que le fond blanc de la bio englobe bien la photo */
#ma-bio::after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 768px) {
    
    /* 1. On réduit la taille des titres du haut pour que ça ne déborde pas */
    header h1 {
        font-size: 1.8rem !important;
        padding: 5px 15px !important;
    }

    /* 2. On réduit la zone des articles pour qu'elle prenne tout l'écran du téléphone */
    .articles-container {
        padding: 0 15px !important;
        margin: 15px auto !important;
    }

    /* 3. L'ÉTOILE : Sur téléphone, elle est trop grosse sur le côté. 
       On la remet au centre, au-dessus ou en dessous des articles ! */
    .badge-vision-board {
        position: relative !important; /* Elle ne flotte plus dans le vide */
        top: 0 !important;
        right: 0 !important;
        margin: 20px auto !important; /* Elle se centre automatiquement */
        width: 150px !important;     /* On la réduit un tout petit peu pour le téléphone */
        height: 150px !important;
    }

    #platine-container {
        width: 100px !important;
        height: 100px !important;
        bottom: 15px !important;
        right: 15px !important;
    }
    
    .bras-lecture {
        height: 55px !important;
    }

    .photo-biographie {
        float: none !important;
        display: block !important;
        margin: 0 auto 20px auto !important;
        width: 140px !important;
    }
}
.box-livre-aleatoire {
    background: #ffffff;
    border: 3px dashed #ef0ea0;
    padding: 25px;
    border-radius: 20px;
    text-align: center;
    max-width: 500px;
    margin: 40px auto;
    box-shadow: 0 8px 20px rgba(239, 14, 160, 0.1);
    transform: rotate(1deg);
}

.zone-resultat {
    background-color: #fff0f5;
    padding: 15px;
    border-radius: 12px;
    margin: 20px 0;
    border: 1px solid #ffb3d9;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#emoji-livre {
    font-size: 2rem;
    margin-bottom: 5px;
}

#titre-livre {
    margin: 0;
    color: #ef0ea0;
    font-size: 1.1rem;
}

.bouton-roue {
    background-color: #72e7ef;
    color: #ef0ea0;
    border: 2px solid #000;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 3px 3px 0px #000;
    transition: transform 0.1s;
}

.bouton-roue:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px #000;
}
/* Le container qui aligne les photos côte à côte */
.galerie-polaroids {
    display: flex;
    justify-content: center;
    gap: 30px; /* Espace entre les Polaroids */
    margin: 40px auto;
    flex-wrap: wrap; /* Permet de les empiler joliment sur téléphone */
}

/* Le design du Polaroid */
.polaroid {
    background-color: #ffffff;
    padding: 15px 15px 25px 15px; /* Plus d'espace en bas pour la légende */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Ombre réaliste */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    width: 200px; /* Taille d'un Polaroid */
}

/* La photo à l'intérieur du Polaroid */
.polaroid img {
    width: 100%;
    height: 180px;
    object-fit: cover; /* Recadre proprement la photo sans la déformer */
    border: 1px solid #f0f0f0; /* Un mini bord gris pour séparer la photo du cadre blanc */
}

/* Le texte style écriture manuscrite */
.legende-polaroid {
    font-family: 'Caveat', 'Comic Sans MS', cursive, sans-serif; /* Police style écriture à la main */
    font-size: 1.1rem;
    color: #4a2834;
    margin: 15px 0 0 0;
}

/* --- EFFET PÊLE-MÊLE (Inclinaisons différentes) --- */

/* On penche le premier Polaroid à gauche */
.polaroid:nth-child(1) {
    transform: rotate(-4deg);
}

/* On penche le deuxième Polaroid à droite */
.polaroid:nth-child(2) {
    transform: rotate(3deg);
}

/* Effet quand on passe la souris dessus : le Polaroid se remet droit et se soulève ! */
.polaroid:hover {
    transform: scale(1.05) rotate(0deg);
    box-shadow: 0 15px 35px rgba(239, 14, 160, 0.3); /* Ombre rose fuchsia au survol */
    z-index: 10;
}
/* On s'assure que la case de l'article accepte qu'on lui colle des scotchs par-dessus */
.carte-article {
    position: relative; /* Super important ! */

}

/* Le style de base du morceau de Washi Tape */
.washi-tape {
    position: absolute;
    width: 130px;
    height: 35px;
    background-color: rgba(255, 179, 217, 0.7); /* Un rose pastel doux transparent */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
    z-index: 10; /* Pour qu'il passe bien au-dessus du cadre */
    
    /* L'astuce magique pour faire les bords déchirés à gauche et à droite */
    background-image: 
        linear-gradient(45deg, transparent 50%, rgba(255, 179, 217, 0.7) 50%),
        linear-gradient(-45deg, transparent 50%, rgba(255, 179, 217, 0.7) 50%);
    background-position: left top, right top;
    background-repeat: repeat-y;
    background-size: 8px 100%;
}

/* Positionnement du scotch en haut à gauche */
.tape-haut-gauche {
    top: -15px;
    left: -25px;
    transform: rotate(-15deg); /* Incliné style "collé à la va-vite" */
    background-color: rgba(179, 255, 230, 0.7); /* Une couleur vert menthe pastel pour changer, ou remets du rose ! */
}
.tape-bas-droit {
    bottom: -15px;
    right: -25px;
    transform: rotate(-12deg);
}
/* Style de la box Mood */
.box-mood {
    background: #ffffff;
    border: 3px solid #4a2834; /* Bordure marron foncé comme tes cadres */
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    max-width: 380px;
    margin: 40px auto; /* Centré à l'écran */
    box-shadow: 5px 5px 0px #4a2834; /* Ombre nette style pop */
    transform: rotate(-1deg); /* Légèrement inclinée style scrap */
}

.box-mood h3 {
    margin-top: 0;
    color: #ef0ea0; /* Ton rose fuchsia */
    font-size: 1.3rem;
}

.texte-mood {
    font-family: 'Caveat', 'Comic Sans MS', cursive; /* Écriture manuscrite */
    font-size: 1.2rem;
    color: #4a2834;
    margin-bottom: 20px;
}

/* Zone du bouton */
.zone-coeur {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.btn-coeur {
    background-color: #ffb3d9; /* Rose pastel */
    color: #4a2834;
    border: 2px solid #4a2834;
    padding: 8px 18px;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 3px 3px 0px #4a2834;
    transition: transform 0.1s, box-shadow 0.1s;
}

/* Effet quand on clique sur le bouton */
.btn-coeur:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px #4a2834;
}

.score-coeur {
    margin: 0;
    font-size: 0.9rem;
    font-weight: bold;
    color: #ef0ea0;
}
/* On s'assure que la box mood retient les cœurs qui s'envolent */
.box-mood {
    position: relative; /* Indispensable pour caler les cœurs volants */
}

/* Le style du petit cœur qui va naître au clic */
.coeur-volant {
    position: absolute;
    font-size: 1.5rem;
    pointer-events: none;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%); /* Centre le cœur pile au milieu du bouton au départ */
    /* On utilise UNIQUEMENT le mot 'envol' ici : */
    animation: envol 0.8s ease-out forwards;
    z-index: 100;
}

/* L'animation magique de l'envol (le nom doit être EXACTEMENT 'envol') */
@keyframes envol {
    0% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        /* Le cœur monte de 100px et se décale un peu sur les côtés */
        transform: translateX(calc(-50% + var(--deviation-x))) translateY(-100px) scale(1.4);
        opacity: 0; /* Il s'efface */
    }
}

/*style page article seul*/

.contenu-article-seul {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

.carte-article-entiere {
    background: white;
    border: 3px solid #000000;
    padding: 30px;
    max-width: 700px; /* Plus large pour une lecture confortable */
    width: 100%;
    box-shadow: 6px 6px 0px #000000; /* Super effet Y2K */
}


/* ========================================= */
/* 🌊 THÈME SPÉCIAL MER (Pour l'article 2) 🌊 */
/* ========================================= */

/* 1. Le fond de la page (Un beau dégradé de bleus avec des pois d'eau) */
body.theme-mer {
    background-color: #89f7fe; /* Bleu clair eau cristalline */
    background-image: radial-gradient(#005bea 3px, transparent 3px); /* Pois bleu foncé */
    background-size: 30px 30px;
}

/* 2. L'en-tête (Header) version Océan */
body.theme-mer .mon-header {
    background-color: #005bea; /* Bleu très foncé */
    color: #ffffff; /* Texte en blanc pour bien ressortir */
    border-bottom: 4px solid #000000;
}

/* 3. La carte de l'article avec des ombres marines */
body.theme-mer .carte-article-entiere {
    background-color: #f0f8ff; /* Un blanc légèrement bleuté (AliceBlue) */
    border: 3px solid #000000;
    box-shadow: 6px 6px 0px #005bea; /* L'ombre devient bleu foncé ! */
}

/* 4. Le bouton "Retour" version Bulle d'eau / Surf */
body.theme-mer .bouton {
    background: linear-gradient(45deg, #00f2fe, #4facfe); /* Joli dégradé d'eau claire */
    color: #ffffff; /* Texte en blanc */
    font-weight: bold;
    border: 3px solid #005bea; /* Bordure bleu foncé */
    
    /* C'est ça qui arrondit les bords à fond ! */
    border-radius: 40px; 
    
    padding: 12px 25px;
    box-shadow: 4px 4px 0px #005bea;
    display: inline-block;
    text-decoration: none;
    
    /* Prépare l'animation fluide */
    transition: all 0.3s ease-in-out; 
}

/* Effet quand on passe la souris : Il flotte sur une vague ! */
body.theme-mer .bouton:hover {
    background: linear-gradient(45deg, #4facfe, #00f2fe); /* Inverse les couleurs d'eau */
    box-shadow: 0px 8px 15px rgba(0, 91, 234, 0.4); /* L'ombre s'étale comme dans l'eau */
    transform: translateY(-5px); /* Le bouton monte légèrement comme s'il flottait */
}


/* Le style de l'image du requin (taille corrigée !) */
.image-requin {
    width: 100%;             /* Elle s'adapte aux petits écrans... */
    max-width: 200px;        /* ...mais elle s'arrête de grandir à 400 pixels ! */
    height: auto;            /* Garde les bonnes proportions */
    
    border: 3px solid #000000;
    box-shadow: 6px 6px 0px #005bea;
    border-radius: 8px;
    
    /* Pour être sûre qu'elle reste bien au milieu : */
    display: block;
    margin: 0 auto; 
}

/* --- LE BOUTON --- */
#bouton-nuit {
    position: fixed; /* Il reste à l'écran même quand on descend */
    top: 20px;
    right: 20px;
    padding: 10px 15px;
    background-color: #222;
    color: #fff;
    border: 2px solid #ff00ff; /* Bordure rose néon */
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Courier New', monospace; /* Police un peu rétro */
    font-weight: bold;
    z-index: 1000; /* Pour qu'il passe au-dessus du reste */
}

/* --- LE MODE NUIT --- */
/* Cette classe sera ajoutée par le JavaScript */
body.dark-mode {
    background-color: #111111; /* Fond presque noir */
    color:black;
}

/* --- BOUTON REMONTER EN HAUT --- */
#bouton-remonter {
    background-color: #0077b6; /* Un beau bleu océan profond */
    color: white;
    padding: 10px 20px;
    border: 2px solid #00b4d8; /* Bordure bleu clair */
    border-radius: 15px; /* Bords bien ronds */
    cursor: pointer;
    font-family: 'Courier New', monospace; /* Police rétro */
    font-weight: bold;
    display: block; /* Permet de le centrer */
    margin: 40px auto; /* Le centre avec un peu d'espace autour */
}

/* Effet quand on passe la souris dessus */
#bouton-remonter:hover {
    background-color: #00b4d8; 
    transform: scale(1.05); /* Grossit un tout petit peu, effet bulle ! */
}
/* --- LE BASSIN À BULLES --- */
#ocean-bulles {
    position: fixed; /* Reste fixe à l'écran même quand on défile */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Magique : pousse les bulles DERRIÈRE le texte ! */
    pointer-events: none; /* Empêche les bulles de bloquer tes clics sur les boutons */
    overflow: hidden;
}

/* --- LE LOOK DES BULLES (Version plus visible !) --- */
.bulle {
    position: absolute;
    bottom: -50px;
    /* On passe de 0.3 à 0.7 pour qu'elles soient bien plus blanches */
    background-color: rgba(255, 255, 255, 0.7); 
    /* On épaissit le bord (2px) et on le met à 1 (100% visible) */
    border: 2px solid rgba(255, 255, 255, 1); 
    /* L'effet magique : une petite lumière bleue autour de la bulle */
    box-shadow: 0 0 10px rgba(0, 180, 216, 0.8);
    border-radius: 50%;
    animation: remonter linear infinite;
}

/* --- L'ANIMATION (La remontée vers la surface) --- */
@keyframes remonter {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-110vh) scale(1.5); /* Monte plus haut que l'écran et grossit */
        opacity: 0; /* Disparaît en arrivant en haut */
    }
}



/* --- LES PAILLETTES DE LA SOURIS --- */
.paillette {
    position: absolute;
    pointer-events: none; /* Très important pour ne pas bloquer les clics ! */
    background-color: #00ffff; /* Bleu/Cyan fluo rétro */
    width: 6px;
    height: 6px;
    border-radius: 50%; /* Pour faire des petits ronds */
    box-shadow: 0 0 8px #00ffff; /* Effet lumineux (Glow) */
    animation: tomber 1s linear forwards; /* Dure 1 seconde */
    z-index: 9999; /* Toujours au-dessus du reste */
}

/* L'animation : les paillettes tombent et disparaissent */
@keyframes tomber {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(40px) scale(0); opacity: 0; }
}