/* Root styles for the Anneau Narratif V3 experience */

html, body {
    margin: 0;
    padding: 0;
    /* Allow the document to extend beyond the viewport height so that
       content can scroll vertically on mobile devices. Using
       min-height instead of a fixed height prevents the body from
       truncating when dynamic content (like rare cards or long text)
       overflows the viewport. */
    min-height: 100vh;
    width: 100%;
    background-color: #0e1e3a;
    color: #f5f5f5;
    font-family: 'Inter', sans-serif;
    /* Only hide horizontal overflow but allow vertical scrolling. This
       restores the ability to scroll on mobile while preserving the
       intent to prevent horizontal scrolling. */
    overflow-x: hidden;
    overflow-y: auto;
    /* The overscroll behaviour is deliberately left unset so that
       mobile browsers (notably Samsung Internet) can handle scroll
       bounce naturally.  Setting overscroll‑behavior‑y to `contain`
       previously caused intermittent scroll lock on some devices. */
    /* overscroll-behavior-y: contain; removed in V7.6B */
    /* Create a stacking context so that z-index on the background works
       as expected */
    position: relative;
}

/* Utility class to hide elements */
.hidden {
    display: none !important;
}

/* Full-screen immersive backdrop */
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use a richly illustrated artwork as a backdrop.  The path is resolved relative to this CSS file. */
    background-image: url('../assets/fond-v4.png');
    background-size: cover;
    /* Default centering.  Responsive overrides below adjust this depending on
       orientation to keep important elements visible. */
    background-position: center;
    /* Do not darken the image excessively – allow its warm hues to shine through. */
    filter: brightness(0.9) contrast(1);
    /* Position behind all content but not so far that browsers drop it entirely. */
    /* Place the background behind everything else but within the same stacking context */
    z-index: 0;
    animation: subtleMove 30s infinite alternate linear;
}

/* Subtle movement for the background to evoke life */
@keyframes subtleMove {
    from { transform: scale(1) translateY(0); }
    to { transform: scale(1.05) translateY(-1%); }
}

/* Welcome screen styles */
/* The welcome screen now uses a minimum height rather than a fixed height so
   that longer content can push the page and enable scrolling on mobile.
   We also drop the absolute positioning in favour of relative positioning,
   which allows the element to participate in the normal document flow and
   scroll naturally. */
.welcome-screen {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    /* Set a minimum height equal to the viewport height to preserve the
       vertical distribution of the top, mid and bottom sections without
       preventing the container from growing taller when needed. */
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    /* Place all sections at the top of the screen so that the button does not
       drift out of view on tall devices.  Use a gap between the sections
       rather than spreading them across the height. */
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    /* Provide consistent spacing between the top, mid and bottom groups */
    gap: 1rem;
    z-index: 10;
    backdrop-filter: blur(1px);

    /* Centrer le conteneur d’accueil dans la fenêtre.  Sur certains
       téléphones en mode portrait, l’ensemble (titre, question, saison,
       territoire, humeur, bouton) semblait légèrement décalé vers la
       droite.  Les marges automatiques assurent un alignement parfait
       sur l’axe central du paysage. */
    margin-left: auto;
    margin-right: auto;
}

.welcome-screen h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem;
    font-weight: 600;
    color: #D4AF37;
    margin: 0;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.welcome-screen .subtitle {
    margin: 1.2rem 0 2rem 0;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.4;
}

.open-button {
    padding: 0.8rem 1.6rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: #f5f5f5;
    background-color: transparent;
    border: 1px solid #D4AF37;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.open-button:hover {
    background-color: rgba(212, 175, 55, 0.2);
    transform: scale(1.05);
}

/* Constellation layout */
.constellation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vmin;
    height: 80vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
}

.constellation.visible {
    opacity: 1;
    pointer-events: auto;
}

.constellation .center-node {
    position: absolute;
    /* Slightly larger central node to anchor the star map */
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: #EFD8A4;
    /* Soften the glow and adjust colour to match the updated star palette */
    box-shadow: 0 0 12px rgba(239,216,164,0.8);
    z-index: 3;
}

.constellation .orbit {
    position: relative;
    width: 100%;
    height: 100%;
}

/*
 * Star wrappers and labels (V7.4)
 *
 * Each star and its label are contained within a .star-wrapper element.  This
 * structure allows the label to be positioned relative to the star and
 * ensures the touch area remains comfortable on mobile devices.  The stars
 * themselves use the .star-link class, while the labels live in
 * .star-label.  The labels fade in gently and remain visible, hinting at
 * the nature of each passage without converting the welcome screen into
 * a conventional navigation menu.
 */
.constellation .star-wrapper {
    position: absolute;
    /* Provide a minimum touch zone to aid mobile interaction */
    min-width: 48px;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* The wrapper will be centred via the breathing animation's transform. */
}

/* Position each wrapper around the orbit using the same percentages as the
   original stars.  These nth-child selectors correspond to the order of
   the wrappers within the .orbit container. */
.constellation .orbit > .star-wrapper:nth-child(1) { /* Continuer à marcher */
    top: 10%;
    left: 50%;
    /* Apply a gentle breathing animation with a unique path and duration */
    animation: breathe1 28s ease-in-out infinite alternate;
    animation-delay: 0s;
}
.constellation .orbit > .star-wrapper:nth-child(2) { /* Boussole intérieure */
    top: 50%;
    left: 90%;
    animation: breathe2 32s ease-in-out infinite alternate;
    animation-delay: -4s;
}
.constellation .orbit > .star-wrapper:nth-child(3) { /* Œuvre immersive */
    /* Remonter légèrement cette étoile pour qu’elle ne soit jamais masquée par la bande
       de citation en bas de l’écran, quelle que soit l’orientation ou la taille
       de l’appareil. */
    top: 85%;
    left: 50%;
    animation: breathe3 24s ease-in-out infinite alternate;
    animation-delay: -8s;
}
.constellation .orbit > .star-wrapper:nth-child(4) { /* Bibliothèque vivante */
    top: 50%;
    left: 10%;
    animation: breathe4 30s ease-in-out infinite alternate;
    animation-delay: -2s;
}
.constellation .orbit > .star-wrapper:nth-child(5) { /* Porte secrète */
    top: 30%;
    left: 80%;
    animation: breathe5 36s ease-in-out infinite alternate;
    animation-delay: -6s;
}
.constellation .orbit > .star-wrapper:nth-child(6) { /* Maison des Récits */
    top: 28%;
    left: 20%;
    animation: breathe4 34s ease-in-out infinite alternate;
    animation-delay: -10s;
}

/* Style for the clickable star symbol */
.constellation .star-wrapper .star-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    font-size: 1.8rem;
    color: rgba(239, 216, 164, 0.6);
    /* Add a subtle drop shadow to distinguish the star from the background */
    filter: drop-shadow(0 0 3px rgba(239, 216, 164, 0.5));
    cursor: pointer;
    transition: transform 0.4s ease, color 0.3s ease;
    /* Retain the gentle pulsation and floating to evoke life */
    animation: pulse 6s ease-in-out infinite alternate, float 12s ease-in-out infinite alternate;
}

.constellation .star-wrapper .star-link:hover {
    transform: scale(1.3);
    color: #ffffff;
}

/* Star label appears below the star, always visible but fading in for a
   delicate reveal.  The label uses two spans stacked vertically to
   separate the title and description. */
.constellation .star-wrapper .star-label {
    margin-top: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    background: rgba(14, 30, 58, 0.85);
    backdrop-filter: blur(3px);
    color: #EFD8A4;
    font-size: 0.65rem;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    animation: labelFadeIn 1.2s ease-out forwards;
}

/* Distinguish the title from the description with a slightly heavier weight */
.constellation .star-wrapper .star-title {
    font-weight: 600;
    display: block;
}

.constellation .star-wrapper .star-desc {
    font-weight: 400;
    display: block;
    opacity: 0.9;
}

/* Fade-in animation for labels */
@keyframes labelFadeIn {
    from {
        opacity: 0;
        transform: translateY(-0.2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hide the old pseudo-element tooltip for stars.  We leave the selector in
   place for backwards compatibility but make it do nothing. */
.constellation .star::after {
    content: '';
    display: none;
}

/* Citation container at bottom */
.citation-container {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    text-align: center;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.6;
    color: #f5f5f5;
    opacity: 0;
    transition: opacity 1s ease;
}

.citation-container.visible {
    opacity: 1;
}

/* Generic page content styling */
.page-content {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 6rem 1rem 3rem;
    text-align: left;
    z-index: 5;
    color: #f5f5f5;
    font-family: 'Inter', sans-serif;
}

.page-content h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    color: #D4AF37;
    margin-bottom: 1rem;
}

.page-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    margin: 0.6rem 0;
    color: #D4AF37;
}

.page-content p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.back-link {
    display: inline-block;
    margin-top: 2rem;
    color: #D4AF37;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

/* Espacement supplémentaire pour la page de la Porte secrète */
#newDoor {
    margin-top: 2rem !important;
}
#doorOutput + #newDoor {
    margin-top: 2rem !important;
}
.page-content nav {
    margin-top: 2rem;
}

.back-link:hover {
    border-color: #D4AF37;
}

/* Card layout for the Boussole page */
.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.card {
    background: rgba(14, 30, 58, 0.8);
    padding: 1.2rem;
    border-radius: 6px;
    backdrop-filter: blur(2px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.card h3 {
    margin-top: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    color: #D4AF37;
}

.card p {
    margin-bottom: 0;
}

/* Appliquer un halo léger aux paragraphes des pages pour améliorer la lisibilité */
.page-content p {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

@media (min-width: 600px) {
    .cards {
        grid-template-columns: 1fr 1fr;
    }
}

/* Fade animation for citation text */
.fade-out {
    opacity: 0;
    transition: opacity 1s ease;
}

.fade-in {
    opacity: 1;
    transition: opacity 1s ease;
}

/*
 * --------------------------------------------------------------------------
 * V6.7 — Présence et lisibilité
 *
 * Pour renforcer le confort contemplatif, nous ajoutons des halos typographiques
 * aux textes importants, des cartouches semi‑transparents autour des blocs
 * d’informations, une hiérarchie visuelle plus claire et des boutons
 * mieux intégrés. La constellation est légèrement atténuée afin de ne pas
 * concurrencer les mots, et des ajustements réactifs améliorent la
 * lisibilité sur mobile et tablette.
 *
 * Ces styles n’introduisent aucune mécanique ludique ni structure
 * supplémentaire : ils se contentent d’améliorer la présence des mots dans
 * le paysage.
 */

/* Halo typographique sur les titres, boutons et blocs de texte clés */
.welcome-screen h1,
.page-content h1,
.page-content h2,
.card h3,
.citation-container,
.passage-message,
.open-button,
.close-button,
.back-link,
#doorOutput h2,
#doorOutput p,
.rare-card-content h2,
.rare-card-content p {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* Cartouches invisibles : fond sombre très léger et flou pour les
   informations de l’écran d’accueil, les citations et les souvenirs */
.welcome-screen p,
.citation-container,
.passage-message,
#doorOutput p {
    /* Cartouches contemplatives : fond légèrement plus dense et bordure douce */
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(212, 175, 55, 0.40);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    margin-bottom: 0.8rem;
}

/*
 * V7.6E — Centrage de l’accueil en mode portrait
 *
 * Sur certains téléphones, le bloc d’accueil (titre, question, saison,
 * territoire, humeur) semblait légèrement décalé vers la droite.  Les
 * marges automatiques ci‑dessous recentrent horizontalement tous les
 * paragraphes placés dans l’écran d’accueil.  Le `text-align: center`
 * garantit une présentation harmonieuse, sans modifier les autres
 * espaces ni la hiérarchie visuelle.
 */
.welcome-screen p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Limiter la largeur des conteneurs textuels pour éviter les chevauchements */
.citation-container {
    max-width: 90%;
}

.passage-message {
    max-width: 90%;
    font-size: 1rem;
    line-height: 1.6;
    /* Centrer complètement la question d'accueil dans sa colonne.  Sans
       marges automatiques, le texte pouvait sembler légèrement décalé
       vers la droite sur certains smartphones. */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Ajustements pour le contenu de la porte secrète */
#doorOutput h2 {
    margin-top: 0;
    margin-bottom: 0.6rem;
    font-size: 1.6rem;
    font-weight: 600;
}
#doorOutput p {
    font-size: 1rem;
    line-height: 1.6;
}

/* Boutons : halo, contraste et états de survol doux */
.open-button,
.close-button,
button#newDoor,
a.immersive-button {
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.open-button:hover,
.close-button:hover,
button#newDoor:hover,
a.immersive-button:hover {
    background-color: rgba(212, 175, 55, 0.15);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
    transform: scale(1.05);
}

/* Back link amélioré : contour léger et fond translucide */
.back-link {
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

/* Réduction de la luminosité des étoiles pour diminuer la concurrence visuelle */
/* Apply the dimming effect to the new star-link elements rather than the old
   .star class.  The wrapper structure ensures that only the symbol is
   affected while the label remains untouched. */
.constellation .star-wrapper .star-link {
    color: rgba(239, 216, 164, 0.6);
    filter: drop-shadow(0 0 3px rgba(239, 216, 164, 0.5));
}

.constellation .center-node {
    background-color: rgba(239, 216, 164, 0.6);
    box-shadow: 0 0 10px rgba(239, 216, 164, 0.6);
}

/* Style pour le bouton « Entrer dans l’œuvre » présent sur la page Œuvre immersive */
a.immersive-button {
    display: inline-block;
    color: #f5f5f5;
    background-color: transparent;
    border: 1px solid #D4AF37;
    border-radius: 4px;
    padding: 0.8rem 1.6rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    text-decoration: none;
    margin-top: 1.5rem;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Responsive : réduire les tailles et les marges pour les petits écrans */
@media (max-width: 600px) {
    .welcome-screen h1 {
        font-size: 1.8rem;
    }
    .welcome-screen p {
        font-size: 0.9rem;
        max-width: 90%;
    }
    .open-button {
        font-size: 1rem;
    }

    /* On narrow screens, reduce the font size and padding of star labels so they
       remain legible without consuming excessive space.  The labels still
       preserve their stacked structure but occupy less vertical height. */
    .constellation .star-wrapper .star-label {
        font-size: 0.55rem;
        padding: 0.25rem 0.5rem;
    }
    .constellation .star-wrapper {
        min-width: 44px;
        min-height: 44px;
    }
    .citation-container,
    .passage-message {
        font-size: 0.9rem;
        padding: 0.5rem 0.8rem;
    }
    #doorOutput h2 {
        font-size: 1.4rem;
    }
    #doorOutput p {
        font-size: 0.9rem;
    }
}

/*
 * --------------------------------------------------------------------------
 * V6.8 — Composition visuelle de l’accueil
 *
 * Le titre, la question du jour, le territoire et l’humeur sont désormais
 * distribués en trois zones (haut, milieu, bas) pour éviter que les mots
 * ne se superposent au disque solaire. Ces classes définissent la mise en
 * page des conteneurs créés dans index.html.
 */

.welcome-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0;
    /* Ensure the top section is centered relative to the viewport.  The
       auto margins and max-width prevent subtle horizontal offsets that
       occurred on some devices. */
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.welcome-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin: 1.5rem 0;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.welcome-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Remonter légèrement le bouton au-dessus du bord inférieur pour éviter
       qu’il ne soit noyé dans la lumière centrale du paysage */
    margin-bottom: 3rem;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Ajustement pour les écrans étroits : réduire les espacements verticaux */
@media (max-width: 600px) {
    /* Laisser moins d'espace autour des blocs centrales pour éviter que
       l'écran ne se remplisse de marges sur de petits appareils. */
    .welcome-mid {
        margin: 0.8rem 0;
        gap: 0.4rem;
    }
    .welcome-top {
        gap: 0.6rem;
    }
    .welcome-bottom {
        margin-bottom: 1.5rem;
    }
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .constellation {
        width: 90vmin;
        height: 90vmin;
    }
    /* Reduce the size of star symbols on narrow screens */
    .constellation .star-wrapper .star-link {
        font-size: 1rem;
    }
    .welcome-screen h1 {
        font-size: 2rem;
    }
    .open-button {
        font-size: 1rem;
    }
}

/* -------------------------------------------------------------------------
 * V7.6 — Paysage d'accueil adaptatif
 *
 * Ajuste le cadrage de l'image de fond et la hauteur du conteneur d'accueil
 * en fonction de l'orientation de l'appareil.  L'objectif est de conserver
 * visibles les éléments symboliques (chemin, soleil, silhouette, pierre) tout
 * en réduisant l'effet d'étirement ou de découpe selon que l'écran est en
 * mode portrait ou paysage.  Ces règles n'affectent pas les pages
 * internes ni les systèmes narratifs.
 */
@media (orientation: portrait) {
    /* Dans les écrans étroits et hauts, recentrer le paysage un peu plus
       vers le haut pour que le chemin et le soleil soient visibles.  La
       pierre n'est pas prioritaire mais reste partiellement apparente. */
    .background {
        background-position: center 30%;
    }
    /* Laisser la hauteur minimale à 100vh pour conserver l'espace vertical
       sur les appareils en portrait. */
    .welcome-screen {
        min-height: 100vh;
    }

    /*
     * V7.7 — respiration verticale et ajustements portrait
     *
     * Augmente légèrement les espacements verticaux entre les blocs de
     * l'écran d'accueil (question, saison, description, territoire, humeur,
     * bouton) afin d'évoquer un chemin initiatique.  Ces valeurs
     * n'interviennent qu'en mode portrait et sur des écrans de faible
     * largeur (smartphones).  Le paysage reste visible et les panneaux
     * ne s'empilent plus.
     */
    .welcome-top {
        gap: 1rem;
    }
    .welcome-mid {
        margin-top: 2rem;
        margin-bottom: 2rem;
        gap: 0.8rem;
    }
    .welcome-bottom {
        margin-top: 2rem;
        margin-bottom: 4rem;
    }
    /* Limiter la largeur des messages de passage pour encourager un
       retour à la ligne naturel et créer des formulations sur deux
       lignes lorsque l'espace le permet. */
    .passage-message {
        max-width: 80%;
    }
    /* Bouton d'ouverture du seuil : lui donner un peu plus de présence et
       d'espace autour. */
    .open-button {
        padding: 1rem 2rem;
        font-size: 1.3rem;
    }

    /* Déplacer l'étoile « Bibliothèque vivante » légèrement vers la droite
       afin que son étiquette reste entièrement visible en mode portrait.
       Cela ne modifie pas la position des autres étoiles. */
    .constellation .orbit > .star-wrapper:nth-child(4) {
        left: 25%;
    }
}

@media (orientation: landscape) {
    /* En mode paysage (tablettes et smartphones horizontaux), déplacer le
       cadrage vers la gauche pour inclure la pierre et le chemin, tout en
       montrant le soleil et la constellation. */
    .background {
        background-position: 20% 50%;
    }
    /* Réduire légèrement la hauteur minimale du bloc d'accueil pour éviter
       un scroll vertical excessif.  Cette valeur reste supérieure à 75vh
       pour garder l'effet immersif.  In V7.6B we decrease the value again
       to compact the layout further on wide screens. */
    .welcome-screen {
        min-height: 85vh;
    }

    /* Compacter la bande de citation en paysage pour laisser plus d'espace
       aux éléments visuels.  On réduit le padding et la taille de police
       afin que la bande n'empiète pas sur la pierre et le chemin. */
    .citation-container {
        /* V7.6C : compresser davantage le bandeau de citation en paysage.
           On réduit le padding vertical et la taille de police de ~5 %,
           ce qui diminue sa hauteur d'environ 10 à 15 % tout en
           conservant l'opacité et le flou. */
        padding: 0.3rem 0.8rem;
        font-size: 0.85rem;
        line-height: 1.3;
    }

    /* Remonter davantage la troisième étoile (œuvre immersive) en paysage
       afin qu'elle reste visible au-dessus du bandeau de citation. */
    .constellation .orbit > .star-wrapper:nth-child(3) {
        /* V7.6E : remonter encore l'étoile Œuvre immersive afin de
           dégager totalement son halo et son étiquette du bandeau de
           citation en mode paysage.  Le top passe à 68 %, ce qui
           correspond à une élévation d'environ 4 points par rapport à
           V7.6D.  Les autres étoiles restent inchangées. */
        top: 68%;
    }
}

/* New animations and styles for V4 */

/* Pulsing effect: stars gently vary in brightness */
@keyframes pulse {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

/* Floating effect: stars drift slightly up and down */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-3%); }
    100% { transform: translateY(0); }
}

/*
 * Breathing animations for the constellation (V7.5)
 *
 * Each star wrapper follows a unique path that moves it only a few pixels
 * around its original position.  The base translation (-50%, -50%)
 * recentres the element, while the second translate applies the offset.
 * Durations and delays are set per-wrapper in the selectors above.
 */
@keyframes breathe1 {
    0%, 100% { transform: translate(-50%, -50%) translate(0px, 0px); }
    50% { transform: translate(-50%, -50%) translate(4px, -3px); }
}

@keyframes breathe2 {
    0%, 100% { transform: translate(-50%, -50%) translate(0px, 0px); }
    50% { transform: translate(-50%, -50%) translate(-5px, 2px); }
}

@keyframes breathe3 {
    0%, 100% { transform: translate(-50%, -50%) translate(0px, 0px); }
    50% { transform: translate(-50%, -50%) translate(3px, 5px); }
}

@keyframes breathe4 {
    0%, 100% { transform: translate(-50%, -50%) translate(0px, 0px); }
    50% { transform: translate(-50%, -50%) translate(-4px, -6px); }
}

@keyframes breathe5 {
    0%, 100% { transform: translate(-50%, -50%) translate(0px, 0px); }
    50% { transform: translate(-50%, -50%) translate(6px, 3px); }
}

/* Particles drifting across the screen */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    animation: drift 25s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes drift {
    from { transform: translateY(0) translateX(0); opacity: 0.8; }
    to { transform: translateY(-100vh) translateX(30vw); opacity: 0; }
}

/* Passage message styling */
.passage-message {
    margin: 1rem 0 2rem 0;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.6;
    color: #f5f5f5;
    max-width: 80%;
}

/* Rare card overlay */
.rare-card-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 30, 58, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
    /* Allow the overlay itself to scroll if its contents extend beyond
       the viewport on mobile devices. */
    overflow-y: auto;
}

.rare-card-content {
    background: rgba(14, 30, 58, 0.95);
    padding: 2rem 2.5rem;
    border-radius: 6px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    text-align: center;
    color: #f5f5f5;
    max-width: 80%;
    /* Limit the maximum height of the rare card content so that
       very long texts do not exceed the viewport on mobile. When
       the content is taller than 85% of the viewport height, enable
       vertical scrolling within the modal. */
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    animation: fadeInOverlay 1s ease;
}

/* Rare card name styling */
.rare-card-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    color: #D4AF37;
    margin-top: 0;
}

.rare-card-content p {
    font-size: 1.2rem;
    margin: 1rem 0;
    line-height: 1.5;
}

.close-button {
    padding: 0.6rem 1.2rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: #f5f5f5;
    background-color: transparent;
    border: 1px solid #D4AF37;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.close-button:hover {
    background-color: rgba(212, 175, 55, 0.2);
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}

/*
 * --------------------------------------------------------------------------
 * V7.1 — Correction smartphone Samsung
 *
 * Sur les appareils mobiles (largeur < 768px), certains éléments de la page
 * d’accueil débordent ou occupent trop d’espace vertical.  Ce bloc ajuste
 * la taille du titre, compresse les marges et ajoute un remplissage au bas
 * de l’écran pour que le bouton reste toujours visible.  La propriété
 * `clamp` permet au titre de s’adapter à la largeur de l’écran tout en
 * restant dans des limites raisonnables.  Ces règles n’ajoutent aucune
 * nouvelle mécanique ni ne modifient la structure narrative.
 */
@media (max-width: 768px) {
    .welcome-screen h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }
    .welcome-mid {
        margin: 0.8rem 0;
    }
    .welcome-bottom {
        margin-bottom: 2rem;
    }
    .welcome-screen {
        padding-bottom: 80px;
    }
}