/*
 * accueil.css : styles propres à la page d'accueil (index.html).
 *
 * ORGANISATION DU FICHIER
 *
 * La feuille est bâtie « du petit vers le grand ». La première partie décrit
 * la présentation simple, en une colonne encadrée d'un double filet or :
 * c'est celle que reçoivent les téléphones et les petites tablettes, et
 * c'est aussi le socle commun à tous les appareils. La seconde partie, sous
 * @media (min-width: 881px), ajoute le décor de table, la bougie et le livre
 * en relief pour les écrans larges.
 *
 * Cet ordre n'est pas indifférent. L'inverse, qui consisterait à décrire
 * d'abord le livre puis à le défaire pour les téléphones, oblige à annuler
 * une à une des dizaines de règles : il suffit qu'un seul navigateur en
 * ignore une pour que la page se disloque. Ici, un téléphone ne lit jamais
 * la moindre règle du livre, et n'a donc rien à défaire.
 *
 * LA SCÈNE
 *
 * Sur grand écran, le volume repose sur un plateau de noyer ancien qu'une
 * bougie éclaire. Sa couverture de cuir bleu marine, surpiquée et poussée à
 * l'or, pivote sur son dos et découvre une double page : à gauche le
 * frontispice, qui est en réalité le revers de la couverture ; à droite le
 * titre, le texte de présentation et le bouton d'entrée. Une volée de
 * poussière scintillante, dorée et argentée, accompagne le mouvement, puis
 * s'éteint.
 *
 * Tout repose sur les transformations tridimensionnelles natives du CSS
 * (module CSS Transforms Level 2 du W3C), calculées par le processeur
 * graphique : aucune bibliothèque externe, aucun script, aucune image
 * téléchargée pour le décor. Les seules images de la page demeurent le
 * phylactère et la planche du frontispice.
 *
 * Les variables de couleur et de police sont celles de style.css, afin de
 * rester cohérent avec le reste du parcours (semestre.php, login.php,
 * tuiler.php, dashboard.php).
 *
 * REMANIEMENT DE LA COLONNE, 4 AOÛT 2026. Quatre corrections, toutes portées
 * par la première partie, aucune ne touchant au livre :
 *   1. le fleuron du haut ne paraît plus en colonne ;
 *   2. la planche monte de 44 à 48 vh ;
 *   3. le corps de lecture passe à 1,14 rem et le titre de section à ,95 rem ;
 *   4. le texte de présentation se replie derrière un bouton « Lire la suite ».
 * La cause première du défaut n'était toutefois pas dans cette feuille : le
 * fichier assets/images/chemin_ecossais.webp avait été remplacé par une version
 * de 400 pixels de large, quand le code source de la page le déclarait à 1024.
 * Sur un écran à haute densité, le navigateur le croyait grand, le choisissait,
 * puis le réduisait à cent treize points. Le fichier a été régénéré.
 */


/* ══════════════════════════════════════════════════════════════════════════
   PREMIÈRE PARTIE : SOCLE COMMUN, PRÉSENTATION EN UNE COLONNE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FOND DE PAGE ──────────────────────────────────────────────────────── */

body.page-accueil {
    min-height     : 100vh;
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding        : 2rem 1.5rem;
    overflow-x     : hidden;

    /* Trois couches superposées, de la plus fine à la plus large :
     *   1. un grain de papier, minuscules points à très faible opacité,
     *      répétés à des échelles légèrement différentes pour éviter tout
     *      effet de mosaïque régulière et perceptible ;
     *   2. une vignette, assombrissement très léger vers les bords, qui
     *      évoque le vieillissement irrégulier d'une page ancienne ;
     *   3. la couleur de fond parchemin, en dernier recours.
     * Technique purement CSS, sans image à charger. */
    background-color: var(--couleur-fond, #f5f3ee);
    background-image:
        radial-gradient(circle at 15% 25%, rgba(44,62,107,.05)  0, transparent 1px),
        radial-gradient(circle at 65% 55%, rgba(44,62,107,.045) 0, transparent 1px),
        radial-gradient(circle at 35% 80%, rgba(125,100,40,.04) 0, transparent 1px),
        radial-gradient(ellipse at center, transparent 45%, rgba(44,62,107,.07) 100%);
    background-size:
        3px 3px,
        4px 4px,
        5px 5px,
        100% 100%;
}

.portail,
.scene {
    width          : 100%;
    display        : flex;
    justify-content: center;
}

/* Les deux décors du grand écran n'existent pas ici : la bougie et les
 * poussière scintillante n'ont de sens qu'auprès d'un livre qui s'ouvre. Sur
 * téléphone,
 * la page demeure ce qu'elle était, un parchemin encadré d'un double filet. */
.chandelle  { display: none; }
.paillettes { display: none; }

/* ── LE CADRE ──────────────────────────────────────────────────────────── */
/* Cadre à filet double : border-style: double est une valeur standard de la
 * spécification CSS 2.1 du W3C, qui trace automatiquement deux traits
 * parallèles séparés d'un espace. C'est la traduction directe, en CSS natif,
 * du double filet qui encadrait pages de titre et diplômes gravés des
 * XVIIIᵉ et XIXᵉ siècles. Les coins restent francs, à la différence des
 * coins arrondis employés pour les boutons et formulaires ailleurs sur le
 * site : une distinction volontaire entre les deux registres visuels. */

.livre {
    box-sizing    : border-box;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    text-align    : center;
    width         : 100%;
    max-width     : 540px;
    padding       : 2.6rem 2rem;
    border        : 5px double var(--couleur-or, #7d6428);
    border-radius : 0;

    opacity  : 0;
    animation: portail-apparition .7s ease-out .1s forwards;
}

@keyframes portail-apparition {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* La page de gauche n'a de raison d'être que dans le livre. */
.livre-page-gauche { display: none; }

/* ── FRONTISPICE ET PHYLACTÈRE ─────────────────────────────────────────── */
/* Dans le livre, ces deux images sont portées par le revers de la
 * couverture. En colonne unique, ce conteneur redevient un simple bloc
 * placé en tête, et le plat de reliure n'a plus lieu d'être. */

.couverture-plat { display: none; }

/* Ces deux conteneurs s'effacent au profit de leur contenu, de sorte que le
 * phylactère et la planche deviennent des voisins directs du titre et du
 * bouton. C'est ce qui permet de glisser le bouton « Entrer » entre les deux
 * images. Voir la note sur display: contents plus bas. */
.livre-couverture,
.couverture-frontispice,
.frontispice-contenu { display: contents; }

.phylactere {
    display  : block;
    width    : 78%;
    max-width: 320px;
    height   : auto;
    margin   : .8rem 0 0;

    /* Révélation du centre vers les bords : au départ, clip-path masque tout
     * sauf une bande verticale de largeur nulle au centre (inset gauche et
     * droite tous deux à 50 %) ; l'animation fait progressivement reculer ces
     * deux valeurs vers 0 %, dévoilant symétriquement l'image de part et
     * d'autre de son axe. inset() est une fonction de forme du module CSS
     * Shapes Level 1 du W3C ; le préfixe -webkit- reste ajouté par précaution
     * pour d'anciens appareils Apple, bien que le support natif soit acquis
     * depuis Safari 14 (2020). */
    -webkit-clip-path: inset(0 50% 0 50%);
    clip-path        : inset(0 50% 0 50%);
    animation        : phylactere-revelation 1.4s ease-out .5s forwards;
}

@keyframes phylactere-revelation {
    from {
        -webkit-clip-path: inset(0 50% 0 50%);
        clip-path        : inset(0 50% 0 50%);
    }
    to {
        -webkit-clip-path: inset(0 0% 0 0%);
        clip-path        : inset(0 0% 0 0%);
    }
}

/* La planche gravée, montée sur la page comme une estampe rapportée : un
 * filet or très fin l'encadre, une ombre légère la détache du papier.
 *
 * LE PLAFOND EST POSÉ EN HAUTEUR, JAMAIS EN LARGEUR, et c'est volontaire : la
 * planche est un portrait très étiré, deux de large pour trois de haut. Bridée
 * en largeur, elle deviendrait aussitôt trop haute et chasserait le texte hors
 * de l'écran ; bridée en hauteur, elle se range d'elle-même dans la colonne et
 * sa largeur suit. Le seuil est passé de 44 à 48 vh le 4 août 2026, le fleuron
 * du haut ayant libéré la place correspondante. */
.frontispice-image {
    display   : block;
    width     : auto;
    max-width : 100%;
    height    : auto;
    max-height: 48vh;
    margin    : 1.5rem 0 0;
    border    : 1px solid rgba(125,100,40,.55);
    box-shadow: 0 3px 12px rgba(26,39,69,.12);
}

/* ── COLONNE DE TEXTE ──────────────────────────────────────────────────── */

.livre-page-droite {
    box-sizing: border-box;
    width     : 100%;
}

.page-contenu {
    box-sizing    : border-box;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    width         : 100%;
}

/* ── ORDONNANCEMENT DE LA COLONNE ──────────────────────────────────────── */
/* display: contents efface la boîte de ces deux conteneurs sans effacer leur
 * contenu : leurs enfants deviennent alors des enfants directs du cadre.
 * C'est ce qui permet d'intercaler le frontispice entre le fleuron bas et le
 * bouton, alors qu'il appartient à une autre branche du document. Valeur
 * normalisée dans le module CSS Display Level 3 du W3C, reconnue par Safari
 * depuis 2018. Les deux règles ci-dessus restent écrites au cas où un
 * navigateur ancien l'ignorerait : la page demeurerait alors parfaitement
 * lisible, seul l'ordre des blocs différerait. */

.livre-page-droite,
.page-contenu { display: contents; }

/* L'ordre voulu : le fleuron, le titre, le sous-titre, le second fleuron, le
 * phylactère, la rangée des deux boutons (Entrer, puis Présentation), la
 * planche, enfin le texte de présentation. Les boutons sont ainsi atteints
 * sans le moindre défilement, y compris sur les petits écrans, tandis que la
 * planche et le texte récompensent celui qui poursuit sa lecture. */
.fleuron              { order: 1; }
.portail-titre        { order: 2; }
.portail-soustitre    { order: 3; }
.fleuron-bas          { order: 4; }
.phylactere           { order: 5; }
.actions-accueil      { order: 6; }
.frontispice-image    { order: 7; }
.portail-presentation { order: 8; }

/* ── FLEURON (ornement typographique en SVG) ───────────────────────────── */

.fleuron {
    display  : block;
    width    : 100%;
    max-width: 165px;
    height   : 20px;
    flex     : none;
    margin   : 0 0 1.1rem;
}

/* LE FLEURON DU HAUT NE PARAÎT PAS EN COLONNE, décidé le 4 août 2026. Dans le
 * livre, il coiffe la page de droite et l'ouvre comme une page de titre ; en
 * colonne, il vient buter contre le double filet du cadre, à moins de deux
 * centimètres de lui, et redit ce que le cadre dit déjà. Sa suppression rend
 * une cinquantaine de points de hauteur, qui profitent à la planche. Le
 * fleuron du bas demeure : lui sépare vraiment deux choses, le titre et ce qui
 * le suit. La règle est annulée dans la seconde partie, pour le livre. */
.fleuron:not(.fleuron-bas) { display: none; }

.fleuron-bas { margin: 1.4rem 0 1.5rem; }

.fleuron-trait   { stroke: var(--couleur-or, #7d6428); stroke-width: 1; }
.fleuron-losange { fill: none; stroke: var(--couleur-or, #7d6428); stroke-width: 1; }
.fleuron-point   { fill: var(--couleur-or, #7d6428); }

/* ── TITRE ─────────────────────────────────────────────────────────────── */

.portail-titre {
    margin        : 0;
    font-family   : var(--police-principale, Garamond, Georgia, serif);
    font-weight   : normal;
    font-size     : 2.4rem;
    line-height   : 1.2;
    letter-spacing: .01em;
    color         : var(--couleur-primaire, #2c3e6b);
}

/* Lettrine : la lettre initiale du titre, agrandie et distinguée par la
 * couleur or. Le pseudo-élément ::first-letter, normalisé dans le module CSS
 * Pseudo-Elements du W3C, cible automatiquement le tout premier caractère du
 * bloc, ici le L de « Le Thuileur », sans qu'il soit nécessaire de l'isoler
 * dans une balise séparée. Cette pratique remonte aux manuscrits enluminés
 * médiévaux, puis fut reprise par l'imprimerie de la Renaissance, l'époque
 * même de Claude Garamont dont les caractères inspirent la police EB
 * Garamond employée sur tout le site. */
.portail-titre::first-letter {
    font-size  : 1.45em;
    font-weight: normal;
    color      : var(--couleur-or, #7d6428);
}

.portail-titre-accent {
    /* Petites capitales : la hauteur des majuscules est conservée, celle des
     * lettres normalement minuscules est réduite. Procédé classique pour
     * donner du poids à un mot sans recourir au gras ni à un corps plus
     * grand, emprunté aux pages de titre imprimées. */
    font-variant  : small-caps;
    letter-spacing: .08em;
}

/* ── SOUS-TITRE ────────────────────────────────────────────────────────── */

.portail-soustitre {
    margin        : .8rem 0 0;
    font-family   : var(--police-interface, system-ui, sans-serif);
    font-size     : .92rem;
    line-height   : 1.7;
    letter-spacing: .06em;
    text-transform: uppercase;
    color         : var(--couleur-texte-doux, #5a5a5a);
}

/* ── TEXTE DE PRÉSENTATION ─────────────────────────────────────────────── */

.portail-presentation {
    box-sizing : border-box;
    width      : 100%;
    margin-top : 2.2rem;
    padding    : 1.6rem 0 0;
    border-top : 1px solid var(--couleur-or, #7d6428);
    text-align : justify;
    hyphens    : auto;
}

/* Le titre de section : porté de ,85 à ,95 rem le 4 août 2026, et sa couleur
 * assombrie. En petites capitales espacées, sur un téléphone tenu à bout de
 * bras, ,85 rem descendait à treize points et demi : au-dessous du seuil de
 * confort admis pour un texte tout en majuscules, qui se déchiffre plus
 * lentement qu'un texte ordinaire faute de la silhouette que lui donneraient
 * les hampes et les jambages. */
.portail-presentation h2 {
    margin        : 0 0 1.1rem;
    font-family   : var(--police-interface, system-ui, sans-serif);
    font-size     : 1.08rem;
    font-weight   : 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align    : center;
    color         : var(--couleur-primaire, #2c3e6b);
}

/* Corps de lecture porté de 1,08 à 1,14 rem, soit dix-huit points et demi.
 * C'est la valeur que la note de projet visait déjà pour le livre, et qui
 * manquait ici : le lectorat du site est d'un âge où la recommandation du
 * Nielsen Norman Group est de ne pas descendre au-dessous de dix-huit. */
.portail-presentation p {
    margin     : 0 0 .95rem;
    font-family: var(--police-principale, Garamond, Georgia, serif);
    font-size  : 1.14rem;
    line-height: 1.62;
    color      : var(--couleur-primaire, #2c3e6b);
}

.portail-presentation p:last-child { margin-bottom: 0; }

/* Titres d'ouvrages en italique, selon l'usage typographique. */
.portail-presentation cite { font-style: italic; }

/* ── LE REPLI DU TEXTE DE PRÉSENTATION ─────────────────────────────────────
 * Ajouté le 4 août 2026. Le texte de présentation compte près de deux mille
 * signes : nécessaires, et il n'est pas question de les couper, mais sur un
 * téléphone ils faisaient à eux seuls un mètre et demi de défilement au bas
 * d'une page qui paraissait dès lors sans fin.
 *
 * LE TEXTE RESTE ENTIER DANS LE CODE SOURCE. Il n'est pas chargé après coup :
 * il est là dès la première image de la page, simplement masqué par un plafond
 * de hauteur. Les moteurs de recherche le lisent donc en totalité, et le
 * référencement n'en souffre pas. Google énonce lui-même, dans ses règles
 * relatives aux contenus repliés, qu'un contenu présent dans le code source et
 * dépliable par l'utilisateur est indexé normalement.
 *
 * AUCUN SCRIPT. Le mécanisme repose sur une case à cocher masquée et sur le
 * combinateur de voisinage du CSS : cocher la case, ce que fait l'étiquette
 * « Lire la suite », lève le plafond. Si le CSS venait à ne pas s'appliquer,
 * le texte paraîtrait en entier, ce qui est le bon échec.
 *
 * La mention de mesure d'audience est délibérément posée HORS du repli : la
 * CNIL veut cette information donnée au point de collecte, non derrière un
 * geste du visiteur. */

/* La case elle-même n'est jamais vue. Elle n'est pas mise en display: none,
 * qui la retirerait du parcours au clavier : elle est réduite à un point et
 * rendue transparente, de sorte que la touche de tabulation l'atteigne encore
 * et que la barre d'espace la coche. */
.repli-case {
    position: absolute;
    width   : 1px;
    height  : 1px;
    opacity : 0;
    pointer-events: none;
}

.repli-corps {
    position  : relative;
    max-height: 12em;
    overflow  : hidden;
    transition: max-height .35s ease;
}

/* Le fondu du bas : il dit que le texte se poursuit, mieux que ne le ferait
 * une coupe nette, qui donnerait à croire que la phrase s'arrête là. */
.repli-corps::after {
    content : '';
    position: absolute;
    left    : 0;
    right   : 0;
    bottom  : 0;
    height  : 3.2em;
    background: linear-gradient(to bottom,
                    rgba(245,243,238,0) 0,
                    var(--couleur-fond, #f5f3ee) 88%);
    pointer-events: none;
}

/* Case cochée : le plafond se lève et le fondu s'efface. La valeur 400em est
 * un plafond arbitrairement haut plutôt que none, afin que la transition ait
 * une hauteur d'arrivée à interpoler : d'aucune hauteur vers « aucune limite »,
 * un navigateur ne sait pas animer. */
.repli-case:checked ~ .repli-corps        { max-height: 400em; }
.repli-case:checked ~ .repli-corps::after { opacity: 0; }

/* L'étiquette, qui est le bouton. Discrète, au filet doré, elle ne doit pas
 * rivaliser avec les deux boutons « Entrer » et « Présentation », qui
 * demeurent les actions véritables de la page. */
.repli-bouton {
    /* display: flex, et non inline-flex : une boîte de niveau bloc se centre
     * par ses marges automatiques, quel que soit l'alignement du texte qui
     * l'entoure. width: fit-content lui évite d'occuper toute la largeur. */
    display        : flex;
    width          : fit-content;
    align-items    : center;
    gap            : .5em;
    margin         : 1.1rem auto 0;
    padding        : .45rem 1.4rem;
    border         : 1px solid rgba(125,100,40,.55);
    border-radius  : var(--rayon, 6px);
    font-family    : var(--police-interface, system-ui, sans-serif);
    font-size      : .84rem;
    letter-spacing : .08em;
    text-transform : uppercase;
    color          : var(--couleur-texte-doux, #5a5a5a);
    background     : transparent;
    cursor         : pointer;
    transition     : color .25s, border-color .25s, background .25s;
}

.repli-bouton:hover {
    color       : var(--couleur-primaire, #2c3e6b);
    border-color: var(--couleur-or, #7d6428);
    background  : rgba(125,100,40,.06);
}

/* Le chevron, tracé en CSS : deux traits d'un carré tourné de quarante-cinq
 * degrés. Il pivote d'un demi-tour quand le texte se déplie. */
.repli-bouton::after {
    content      : '';
    width        : .42em;
    height       : .42em;
    border-right : 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform    : translateY(-.15em) rotate(45deg);
    transition   : transform .3s ease;
}

.repli-case:checked ~ .repli-bouton::after {
    transform: translateY(.1em) rotate(-135deg);
}

/* Les deux libellés, dont un seul paraît à la fois. */
.repli-moins { display: none; }
.repli-case:checked ~ .repli-bouton .repli-plus  { display: none; }
.repli-case:checked ~ .repli-bouton .repli-moins { display: inline; }

/* Anneau de mise au point au clavier : il ne peut pas être porté par la case,
 * qui est invisible, il est donc reporté sur l'étiquette. */
.repli-case:focus-visible ~ .repli-bouton {
    outline       : 2px solid var(--couleur-or, #7d6428);
    outline-offset: 3px;
}

/* ── BOUTON D'ENTRÉE ───────────────────────────────────────────────────── */

.btn-entrer {
    box-sizing     : border-box;
    flex           : none;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 15.5rem;
    max-width      : 100%;
    height         : 2.6rem;
    margin         : 1.8rem 0 0;
    padding        : 0 1.9rem;
    border         : 1px solid var(--couleur-primaire, #2c3e6b);
    border-radius  : var(--rayon, 6px);
    font-family    : var(--police-boutons, Arial, Helvetica, sans-serif);
    font-size      : .92rem;
    line-height    : 1;
    letter-spacing : .12em;
    text-transform : uppercase;
    text-decoration: none;
    color          : var(--couleur-primaire, #2c3e6b);
    background     : transparent;
    transition     : background .25s, color .25s;
}

.btn-entrer:hover {
    background: var(--couleur-primaire, #2c3e6b);
    color     : #fff;
}

/* Focus visible au clavier, indispensable pour la navigation sans souris.
 * :focus-visible n'applique cet anneau que lors d'une navigation au clavier
 * (touche de tabulation), pas lors d'un simple clic à la souris, ce qui
 * évite un halo superflu. */
.btn-entrer:focus-visible {
    outline       : 2px solid var(--couleur-or, #7d6428);
    outline-offset: 3px;
}

/* ── RANGÉE D'ACTIONS ET BOUTON DE PRÉSENTATION ────────────────────────── */
/* Ajoutée le 24 août 2026. Le bouton « Présentation » ouvre le PDF de
 * présentation du site (assets/Thuileur_Ecossais.pdf), fait pour une
 * diffusion ouverte à tous. Il vient se ranger à côté du bouton « Entrer »,
 * mais reste volontairement en second plan : Entrer garde le filet bleu,
 * Présentation prend le filet or, celui des ornements du site plutôt que
 * celui de sa porte d'entrée. Les deux boutons portent leur propre ordre à
 * l'intérieur de la rangée, pour ne pas dépendre de celui, plus large, de la
 * colonne qui les contient. */
.actions-accueil {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    justify-content: center;
    gap            : .9rem;
    margin         : 1.8rem 0 0;
}

.actions-accueil .btn-entrer,
.actions-accueil .btn-presentation { margin-top: 0; }
.actions-accueil .btn-entrer       { order: 1; }
.actions-accueil .btn-presentation { order: 2; }

.btn-presentation {
    box-sizing     : border-box;
    flex           : none;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 15.5rem;
    max-width      : 100%;
    height         : 2.6rem;
    padding        : 0 1.9rem;
    border         : 1px solid var(--couleur-or, #7d6428);
    border-radius  : var(--rayon, 6px);
    font-family    : var(--police-boutons, Arial, Helvetica, sans-serif);
    font-size      : .92rem;
    line-height    : 1;
    letter-spacing : .12em;
    text-transform : uppercase;
    text-decoration: none;
    color          : var(--couleur-or, #7d6428);
    background     : transparent;
    transition     : background .25s, color .25s;
}

.btn-presentation:hover {
    background: var(--couleur-or, #7d6428);
    color     : #fff;
}

.btn-presentation:focus-visible {
    outline       : 2px solid var(--couleur-primaire, #2c3e6b);
    outline-offset: 3px;
}

/* ── TRÈS PETITS ÉCRANS ────────────────────────────────────────────────── */
/* Sur les écrans les plus étroits, le texte justifié produit des lézardes :
 * on repasse au fer à gauche. */

@media (max-width: 480px) {

    /* Sur un téléphone, chaque point de largeur compte : les marges se
     * resserrent pour rendre à la ligne de texte la place que le corps de
     * 18 points lui réclame. Le texte passe au fer à gauche, car une ligne
     * courte et justifiée se creuse de lézardes blanches disgracieuses. */
    body.page-accueil       { padding: 1.5rem 1rem; }
    .livre                  { padding: 2rem 1.2rem; border-width: 4px; }
    .portail-titre          { font-size: 2.1rem; }
    .portail-presentation   { text-align: left; }

    /* Sur le plus étroit des écrans, les deux boutons ne tiennent plus côte
     * à côte : ils se replient sur deux lignes, resserrées d'un peu de
     * marge, plutôt que de forcer le cadre à s'élargir. */
    .actions-accueil        { gap: .7rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   SECONDE PARTIE : GRANDS ÉCRANS, LA TABLE, LA BOUGIE ET LE LIVRE
   ══════════════════════════════════════════════════════════════════════════ */

/* La condition porte sur la largeur ET sur la hauteur, mais le seuil de hauteur
 * reste bas (600 pixels), car il ne vise que les fenêtres réellement écrasées,
 * où la double page serait illisible. Attention : la hauteur mesurée ici est
 * celle de la zone d'affichage, une fois retranchés la barre de menus, les
 * barres d'outils du navigateur et le Dock. Sur un écran de 1440 sur 900, il ne
 * reste qu'environ 720 pixels. Un seuil fixé trop haut fait donc disparaître le
 * livre sur des machines qui pourraient parfaitement l'afficher. */

@media (min-width: 881px) and (min-height: 600px) {

    /* ── LA TABLE ──────────────────────────────────────────────────────── */
    /* Le fond parchemin cède la place au plateau d'une table ancienne, taillé
     * dans une planche unique dont le fil court dans la largeur de l'écran.
     * Point de joints ni de rainures : c'est leur répétition régulière qui
     * donnait au fond l'aspect d'un mur de lambris. Huit couches, de la plus
     * proche de l'œil à la plus lointaine :
     *
     *   1. la vignette, qui éteint les quatre coins et concentre le regard au
     *      centre, comme le ferait la seule lumière d'une bougie ;
     *   2. 3. et 4. trois nœuds, de tailles et d'inclinaisons différentes.
     *      Chacun est un petit dessin SVG écrit dans la feuille : une série
     *      d'ellipses concentriques dont l'épaisseur et la densité décroissent
     *      du cœur vers l'extérieur, exactement comme les cernes du bois
     *      contournent la naissance d'une branche. Un masque en dégradé les
     *      éteint sur leur pourtour, faute de quoi le dessin se couperait net
     *      sur un rectangle. Ils sont posés en mode multiply, qui ne fait
     *      qu'assombrir : le nœud se creuse dans le bois sans jamais le
     *      blanchir ;
     *   5. le fil du bois, une turbulence calculée par le navigateur puis
     *      désaturée. Sa fréquence est très basse en largeur et haute en
     *      hauteur : les taches produites s'étirent donc horizontalement et
     *      forment des fibres, non des points ronds. Elle est posée en mode
     *      overlay, qui creuse et éclaire sans déplacer la couleur moyenne ;
     *   6. les veines fines, hachures presque invisibles prises une à une,
     *      mais qui donnent au plateau son grain à distance de lecture ;
     *   7. les grandes ondes de teinte, qui font qu'aucune bande de la
     *      planche n'a tout à fait la couleur de sa voisine ;
     *   8. le fond de noyer lui-même, du plus clair au plus sombre.
     *
     * Aucune image n'est téléchargée : nœuds et turbulence sont des dessins
     * SVG écrits dans la feuille de styles, calculés une seule fois par le
     * navigateur. background-attachment: fixed cloue le plateau à la fenêtre :
     * la table ne défile pas, seul le contenu bouge. */

    body.page-accueil {
        padding         : 1.5rem;
        background-color: #2a1c0e;
        background-image:
            radial-gradient(ellipse 132% 100% at 50% 44%,
                rgba(0,0,0,0) 24%, rgba(0,0,0,.34) 60%, rgba(0,0,0,.72) 100%),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='155'%3E%3Cdefs%3E%3CradialGradient id='f'%3E%3Cstop offset='52%25' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Cellipse cx='150' cy='77' rx='150' ry='77' fill='url(%23f)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)' fill='none' stroke='%23000' transform='rotate(-6 150 77)'%3E%3Cellipse cx='150' cy='77' rx='13' ry='6' stroke-opacity='.50' stroke-width='8'/%3E%3Cellipse cx='150' cy='77' rx='25' ry='12' stroke-opacity='.38' stroke-width='4'/%3E%3Cellipse cx='150' cy='77' rx='39' ry='19' stroke-opacity='.30' stroke-width='3.4'/%3E%3Cellipse cx='150' cy='77' rx='55' ry='26' stroke-opacity='.24' stroke-width='3'/%3E%3Cellipse cx='150' cy='77' rx='73' ry='34' stroke-opacity='.18' stroke-width='2.6'/%3E%3Cellipse cx='150' cy='77' rx='93' ry='43' stroke-opacity='.13' stroke-width='2.2'/%3E%3Cellipse cx='150' cy='77' rx='115' ry='53' stroke-opacity='.09' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='128'%3E%3Cdefs%3E%3CradialGradient id='f2'%3E%3Cstop offset='50%25' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m2'%3E%3Cellipse cx='120' cy='64' rx='120' ry='64' fill='url(%23f2)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m2)' fill='none' stroke='%23000' transform='rotate(9 120 64)'%3E%3Cellipse cx='120' cy='64' rx='10' ry='5' stroke-opacity='.46' stroke-width='7'/%3E%3Cellipse cx='120' cy='64' rx='21' ry='10' stroke-opacity='.34' stroke-width='3.6'/%3E%3Cellipse cx='120' cy='64' rx='33' ry='16' stroke-opacity='.27' stroke-width='3'/%3E%3Cellipse cx='120' cy='64' rx='47' ry='22' stroke-opacity='.20' stroke-width='2.6'/%3E%3Cellipse cx='120' cy='64' rx='63' ry='29' stroke-opacity='.15' stroke-width='2.2'/%3E%3Cellipse cx='120' cy='64' rx='81' ry='37' stroke-opacity='.10' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='100'%3E%3Cdefs%3E%3CradialGradient id='f3'%3E%3Cstop offset='50%25' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m3'%3E%3Cellipse cx='95' cy='50' rx='95' ry='50' fill='url(%23f3)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m3)' fill='none' stroke='%23000' transform='rotate(-14 95 50)'%3E%3Cellipse cx='95' cy='50' rx='8' ry='4' stroke-opacity='.44' stroke-width='6'/%3E%3Cellipse cx='95' cy='50' rx='17' ry='8' stroke-opacity='.32' stroke-width='3.2'/%3E%3Cellipse cx='95' cy='50' rx='28' ry='13' stroke-opacity='.24' stroke-width='2.8'/%3E%3Cellipse cx='95' cy='50' rx='41' ry='19' stroke-opacity='.17' stroke-width='2.4'/%3E%3Cellipse cx='95' cy='50' rx='56' ry='26' stroke-opacity='.11' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cfilter id='bois' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.72' numOctaves='5' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='1600' height='1000' filter='url(%23bois)' opacity='0.68'/%3E%3C/svg%3E"),
            repeating-linear-gradient(179.6deg,
                rgba(255,236,205,.030) 0,   rgba(255,236,205,.030) 1px,
                rgba(0,0,0,.055)       1px, rgba(0,0,0,.055)       3px,
                rgba(0,0,0,0)          3px, rgba(0,0,0,0)          9px),
            linear-gradient(to bottom,
                rgba(0,0,0,.22)        0%,  rgba(255,232,196,.05) 7%,
                rgba(0,0,0,.09)        19%, rgba(255,232,196,.04) 31%,
                rgba(0,0,0,.07)        44%, rgba(255,232,196,.05) 56%,
                rgba(0,0,0,.09)        68%, rgba(255,232,196,.03) 80%,
                rgba(0,0,0,.13)        92%, rgba(0,0,0,.26)       100%),
            linear-gradient(to bottom,
                #4a341f 0%, #35240f 30%, #3f2b17 58%, #2b1d0e 82%, #1e1408 100%);
        background-size      : cover,
                               300px 155px, 240px 128px, 190px 100px,
                               cover, auto, cover, cover;
        background-position  : center,
                               6% 30%, 95% 68%, 47% 97%,
                               center, center, center, center;
        background-repeat    : no-repeat;
        background-blend-mode: normal,
                               multiply, multiply, multiply,
                               overlay, normal, normal, normal;
        background-attachment: fixed;
    }

    /* ── LA BOUGIE ─────────────────────────────────────────────────────── */
    /* Elle est posée à gauche du volume, en position fixe par rapport à la
     * fenêtre, et se tient derrière lui : si l'écran devient trop étroit, le
     * livre la recouvre au lieu de la bousculer, ce qui est l'ordre naturel
     * des choses sur une table. Aucune de ses parties n'intercepte le clic
     * (pointer-events: none), afin que le bouton « Entrer » demeure
     * atteignable en toute circonstance. */

    .chandelle {
        display       : flex;
        flex-direction: column;
        align-items   : center;
        position      : fixed;
        left          : 1.6vw;
        bottom        : 8vh;
        z-index       : 0;
        width         : clamp(20px, 4.2vh, 44px);
        pointer-events: none;
    }

    /* Le halo. C'est lui qui fait la lumière de la scène : un large disque de
     * clarté ambrée, centré sur la flamme, qui déborde sur le plateau et sur
     * la tranche du livre. Sa respiration est très lente et très faible ; une
     * pulsation marquée trahirait aussitôt l'artifice. */
    .chandelle-halo {
        position      : absolute;
        left          : 50%;
        top           : 0;
        width         : 82vh;
        height        : 82vh;
        transform     : translate(-50%, -46%);
        border-radius : 50%;
        background    : radial-gradient(circle,
                            rgba(255,198,114,.40) 0%,
                            rgba(255,174,78,.25)  18%,
                            rgba(255,152,52,.12)  38%,
                            rgba(255,140,42,.04)  58%,
                            rgba(255,130,30,0)    74%);
        animation     : chandelle-respiration 3.7s ease-in-out infinite alternate;
        pointer-events: none;
    }

    /* La flamme. Sa forme naît de border-radius exprimé en deux séries, la
     * première pour les rayons horizontaux, la seconde pour les verticaux :
     * c'est ce qui donne la goutte effilée du haut et l'assise arrondie du
     * bas. transform-origin la fixe par le pied, de sorte qu'elle se penche
     * sans jamais décoller de la mèche. */
    .chandelle-flamme {
        position        : relative;
        z-index         : 2;
        width           : 54%;
        height          : 4.4vh;
        border-radius   : 50% 50% 42% 42% / 66% 66% 34% 34%;
        background      : radial-gradient(ellipse at 50% 74%,
                              #fffdf0 0%, #ffe9a8 22%, #ffcf5e 38%, #ffbb45 52%,
                              rgba(255,124,20,.88) 78%, rgba(255,96,0,0) 100%);
        box-shadow      : 0 0 1.1vh rgba(255,176,70,.85),
                          0 0 3.4vh rgba(255,150,44,.55);
        filter          : blur(.12vh);
        transform-origin: 50% 100%;
        animation       : flamme-vacillement 2.6s ease-in-out infinite alternate;
    }

    /* Le cœur bleu, à la base de toute flamme de cire : c'est la zone où le
     * gaz brûle le plus complètement, faute de suie. Détail minuscule, mais
     * c'est lui qui empêche la flamme de se réduire à une tache jaune. */
    .chandelle-flamme::before {
        content      : "";
        position     : absolute;
        left         : 26%;
        bottom       : 0;
        width        : 48%;
        height       : 36%;
        border-radius: 50% 50% 40% 40%;
        background   : radial-gradient(ellipse at 50% 82%,
                           rgba(126,186,255,.85) 0%, rgba(126,186,255,0) 72%);
    }

    .chandelle-meche {
        position     : relative;
        z-index      : 1;
        width        : 2px;
        height       : .9vh;
        margin-top   : -.55vh;
        border-radius: 1px;
        background   : linear-gradient(to bottom, #6b4a2c, #2a1a10);
    }

    /* Le fût de cire. Le dégradé oblique porte toute l'illusion du cylindre :
     * bord gauche dans l'ombre, arête de lumière au tiers, retour à l'ombre
     * sur la droite. La lueur ambrée en ombre portée simule la cire qui
     * laisse passer la lumière, ce que les peintres nomment translucidité. */
    .chandelle-corps {
        position     : relative;
        width        : 100%;
        height       : 23vh;
        border-radius: 44% 44% 10% 10% / 5% 5% 3% 3%;
        background   : linear-gradient(100deg,
                           #7d6543 0%,  #c9ac7c 12%, #f7edd6 30%,
                           #fffdf6 42%, #f0e1c1 58%, #c8ad80 78%,
                           #8a6f4a 92%, #5d4830 100%);
        box-shadow   : inset 0 .9vh 1.4vh rgba(0,0,0,.20),
                       0 0 2.2vh rgba(255,172,72,.32);
    }

    /* Le bourrelet de cire fondue, au sommet du fût. */
    .chandelle-corps::before {
        content      : "";
        position     : absolute;
        top          : -.45vh;
        left         : -4%;
        right        : -4%;
        height       : 1.2vh;
        border-radius: 50%;
        background   : radial-gradient(ellipse at 50% 34%,
                           #fffdf4 0%, #ece0c0 58%, #c2a87c 100%);
        box-shadow   : 0 .25vh .5vh rgba(0,0,0,.22);
    }

    /* Une coulée de cire figée sur le flanc droit : elle part du bourrelet,
     * s'amincit et s'arrête. C'est l'irrégularité qui rend l'objet crédible,
     * mais elle doit rester discrète : trop marquée, elle se lit comme une
     * tache et non comme un relief. */
    .chandelle-corps::after {
        content      : "";
        position     : absolute;
        top          : .35vh;
        right        : 17%;
        width        : 13%;
        height       : 3.4vh;
        border-radius: 50% 50% 60% 60% / 18% 18% 46% 46%;
        background   : linear-gradient(100deg,
                           rgba(255,253,244,.42), rgba(206,183,144,.28));
        box-shadow   : 0 .1vh .3vh rgba(0,0,0,.10);
    }

    /* L'ombre portée de la bougie sur le plateau. Elle est fuselée vers la
     * droite, du côté opposé à la flamme vue du lecteur, et resserrée au
     * pied : c'est ce contact sombre, plus que l'ombre elle-même, qui pose
     * réellement l'objet sur le bois. */
    .chandelle::after {
        content      : "";
        position     : absolute;
        left         : 50%;
        bottom       : -1.3vh;
        width        : 420%;
        height       : 3vh;
        transform    : translateX(-46%);
        border-radius: 50%;
        background   : radial-gradient(ellipse at 42% 40%,
                           rgba(0,0,0,.68) 0%, rgba(0,0,0,.34) 38%,
                           rgba(0,0,0,.12) 60%, rgba(0,0,0,0) 78%);
    }

    @keyframes chandelle-respiration {
        0%   { opacity: .86; transform: translate(-50%, -46%) scale(1);     }
        45%  { opacity: 1;   transform: translate(-50%, -46%) scale(1.035); }
        100% { opacity: .92; transform: translate(-50%, -46%) scale(1.01);  }
    }

    @keyframes flamme-vacillement {
        0%   { transform: scale(1, 1)      skewX(0deg)    translateX(0);      }
        22%  { transform: scale(.97, 1.06) skewX(-2.2deg) translateX(-.12vh); }
        48%  { transform: scale(1.03, .95) skewX(1.6deg)  translateX(.10vh);  }
        71%  { transform: scale(.96, 1.08) skewX(2.4deg)  translateX(.07vh);  }
        100% { transform: scale(1, 1)      skewX(-1deg)   translateX(-.04vh); }
    }

    /* ── LA SCÈNE ──────────────────────────────────────────────────────── */

    /* perspective définit la distance de l'œil au plan de la page : plus la
     * valeur est grande, plus la fuite est douce. Une valeur élevée donne le
     * regard posé d'un lecteur assis devant l'ouvrage, sans déformation
     * exagérée. Le z-index place la scène au-dessus de la bougie. */
    .scene {
        display           : block;
        position          : relative;
        z-index           : 1;
        width             : auto;
        perspective       : 2600px;
        perspective-origin: 50% 42%;
    }

    /* Dimensions calculées d'un seul tenant : la largeur est le plus petit
     * des trois candidats (94 % de la largeur de fenêtre, la largeur
     * qu'autorise la hauteur disponible, ou 1240 pixels), et la hauteur en
     * découle par le rapport d'une double page ouverte. Le livre s'inscrit
     * ainsi toujours dans l'écran, quelle qu'en soit la forme. */
    .livre {
        position       : relative;
        flex-direction : row;
        align-items    : stretch;
        width          : min(94vw, calc(90vh * 1.42), 1240px);
        max-width      : none;
        aspect-ratio   : 142 / 100;
        padding        : 0;
        border         : 0;
        transform-style: preserve-3d;

        /* Taille de référence du texte des pages. Tout le contenu intérieur
         * est exprimé en em, c'est-à-dire en multiples de cette valeur : le
         * texte grandit et diminue exactement au même rythme que le livre. */
        font-size: clamp(12px, min(1.45vw, 2.05vh), 19.5px);

        /* Le livre fermé demeure une seconde et demie sous les yeux, le temps
         * que la reliure se laisse regarder ; puis il se déploie vers la
         * gauche et glisse doucement pour que la double page finisse
         * parfaitement centrée. */
        opacity  : 1;
        transform: translateX(-25%);
        animation: livre-recentrage 1.15s cubic-bezier(.42,.02,.24,1) 1.6s forwards;
    }

    /* Ombre de reliure : le creux sombre qui court le long du dos, au milieu
     * de la double page ouverte. Elle n'apparaît qu'une fois le livre ouvert. */
    .livre::after {
        content   : "";
        position  : absolute;
        top       : 0;
        bottom    : 0;
        left      : 50%;
        width     : 5.5%;
        transform : translateX(-50%) translateZ(4px);
        background: linear-gradient(to right,
                        rgba(26,39,69,0)   0%,
                        rgba(26,39,69,.13) 38%,
                        rgba(26,39,69,.22) 50%,
                        rgba(26,39,69,.13) 62%,
                        rgba(26,39,69,0)   100%);
        pointer-events: none;
        opacity   : 0;
        animation : reliure-apparition .5s ease-out 2.35s forwards;
    }

    /* ── LES PAGES ─────────────────────────────────────────────────────── */

    /* Les deux conteneurs retrouvent une boîte : la double page reprend ses
     * droits, et le frontispice repart sur le revers de la couverture. */
    .livre-page-gauche,
    .livre-page-droite {
        display : block;
        position: relative;
        width   : 50%;
        height  : 100%;
    }

    /* Page de gauche : elle ne sert que de support. Le frontispice, qui est le
     * revers de la couverture, vient se poser exactement dessus. Elle se
     * révèle pendant que la couverture balaie l'espace, ce qui donne
     * l'impression que la page se déplie. Le papier est très légèrement
     * réchauffé, comme il l'est réellement sous une flamme de cire, et son
     * ombre portée est devenue plus dense : le volume repose désormais sur
     * une table sombre, non sur un parchemin clair. */
    .livre-page-gauche {
        display      : block;
        border-radius: 3px 0 0 3px;
        background   : linear-gradient(to right, #f2eee1 0%, #fbf8f0 22%, #f5f1e6 100%);
        box-shadow   :
            inset -16px 0 24px -16px rgba(44,62,107,.22),
            -2px 0 0 #e8e2d1,
            -4px 0 0 #ded7c3,
            -6px 0 0 #d3cbb4,
            -14px 22px 48px rgba(0,0,0,.48);
        opacity  : 0;
        animation: page-apparition .75s ease-out 2.1s forwards;
    }

    /* Page de droite : le papier porte un très léger dégradé, plus sombre près
     * du dos, comme une page réelle que la reliure prive un peu de lumière.
     * Les traits empilés sur le bord extérieur figurent la tranche du volume. */
    .livre-page-droite {
        border-radius: 0 3px 3px 0;
        background   : linear-gradient(to left, #f1ecdd 0%, #faf7ef 22%, #f4f0e4 100%);
        box-shadow   :
            inset 16px 0 24px -16px rgba(44,62,107,.22),
            2px 0 0 #e8e2d1,
            4px 0 0 #ded7c3,
            6px 0 0 #d3cbb4,
            22px 22px 52px rgba(0,0,0,.52);
    }

    .page-contenu {
        display       : flex;
        flex-direction: column;
        align-items   : center;
        position  : absolute;
        top       : 0;
        right     : 0;
        bottom    : 0;
        left      : 0;
        width     : auto;
        padding   : 4.8% 7% 4.2%;
        text-align: center;

        /* Le contenu de la page de droite n'apparaît qu'au moment où la
         * couverture le découvre. */
        opacity  : 0;
        animation: contenu-apparition .7s ease-out 1.95s forwards;
    }

    /* Dans le livre, le bouton d'entrée passe en amont du texte de
     * présentation : il se lit avant lui, comme la porte se franchit avant
     * qu'on s'attarde au vestibule. Les ornements et le titre retrouvent
     * l'ordre naturel du document. */
    .fleuron,
    .portail-titre,
    .portail-soustitre,
    .fleuron-bas,
    .phylactere,
    .frontispice-image,
    .livre-couverture     { order: 0; }
    .actions-accueil      { order: 1; }
    .portail-presentation { order: 2; }

    /* ── LE BOUTON D'ENTRÉE, PLEIN ET APPUYÉ ───────────────────────────────
     * Sur grand écran, le bouton n'est plus un simple filet vide : il est
     * peint du bleu du site, cerné d'un filet d'or et posé sur une ombre
     * douce qui le détache de la page. Le contraste plein sur fond clair est
     * le moyen le plus sûr d'attirer l'œil sans recourir au clignotement,
     * conformément aux recommandations d'accessibilité du W3C (WCAG 2.2,
     * critère 1.4.3 sur le contraste, 2.3.1 sur l'absence de scintillement).
     * Un très léger soulèvement au survol confirme qu'il s'agit d'une
     * commande, et non d'un ornement. */
    .btn-entrer {
        box-sizing    : border-box;
        align-self    : center;
        display       : inline-flex;
        align-items   : center;
        justify-content: center;
        width         : 15.5rem;
        max-width     : 100%;
        height        : 2.75rem;
        margin        : .35em 0 1.25em;
        padding       : 0 1em;
        border        : 1px solid var(--couleur-or, #7d6428);
        border-radius : var(--rayon, 6px);
        font-size     : .84em;
        line-height   : 1;
        font-weight   : 600;
        letter-spacing: .18em;
        color         : #fff;
        background    : var(--couleur-primaire, #2c3e6b);
        box-shadow    : 0 2px 6px rgba(44,62,107,.28),
                        0 0 0 3px rgba(125,100,40,.14);
        transition    : background .25s, box-shadow .25s, transform .25s;
    }

    .btn-entrer:hover {
        color     : #fff;
        background: var(--couleur-or, #7d6428);
        box-shadow: 0 4px 12px rgba(44,62,107,.32),
                    0 0 0 4px rgba(125,100,40,.22);
        transform : translateY(-1px);
    }

    .btn-entrer:active { transform: translateY(0); }

    /* ── RANGÉE D'ACTIONS ET BOUTON DE PRÉSENTATION, DANS LE LIVRE ───────
     * Même principe que dans la colonne : Présentation reste en second plan
     * derrière Entrer, ici par l'absence de fond plein et de filet d'or
     * qu'affiche Entrer. Le survol le confirme, sans jamais l'égaler. */
    .actions-accueil {
        display        : flex;
        flex-wrap      : wrap;
        align-items    : center;
        justify-content: center;
        gap            : 1em;
        margin         : .35em 0 1.25em;
    }

    .actions-accueil .btn-entrer,
    .actions-accueil .btn-presentation { margin: 0; }
    .actions-accueil .btn-entrer       { order: 1; }
    .actions-accueil .btn-presentation { order: 2; }

    .btn-presentation {
        box-sizing    : border-box;
        align-self    : center;
        display       : inline-flex;
        align-items   : center;
        justify-content: center;
        width         : 15.5rem;
        max-width     : 100%;
        height        : 2.75rem;
        padding       : 0 1em;
        border        : 1px solid var(--couleur-or, #7d6428);
        border-radius : var(--rayon, 6px);
        font-size     : .84em;
        line-height   : 1;
        font-weight   : 600;
        letter-spacing: .18em;
        color         : var(--couleur-or, #7d6428);
        background    : transparent;
        transition    : background .25s, color .25s, transform .25s;
    }

    .btn-presentation:hover {
        color     : #fff;
        background: var(--couleur-or, #7d6428);
        transform : translateY(-1px);
    }

    .btn-presentation:active { transform: translateY(0); }

    /* ── ORNEMENTS ET TITRE, À L'ÉCHELLE DE LA PAGE ────────────────────── */

    /* Ornements et interlignes resserrés : chaque dixième d'em rendu à la
     * marge est un dixième d'em gagné pour la lecture. La page de droite
     * porte un texte long, et l'espace y est la ressource rare. */
    .fleuron {
        width    : 62%;
        max-width: 180px;
        height   : 1.05em;
        margin   : 0 0 .6em;
    }

    /* Le fleuron du haut reparaît : dans le livre, il coiffe la page de droite
     * et l'ouvre comme une page de titre. Il y est à sa place, et il y reste.
     *
     * LE SÉLECTEUR EST RÉPÉTÉ TEL QUEL, négation comprise, et ce n'est pas une
     * maladresse. Une règle écrite plus loin dans le fichier ne l'emporte que
     * si elle pèse autant que celle qu'elle veut défaire : un simple .fleuron,
     * plus léger, serait resté sans effet, et le fleuron serait demeuré
     * invisible sur grand écran sans qu'aucune erreur ne soit signalée nulle
     * part. Le défaut a d'ailleurs été commis, puis mesuré, le 4 août 2026. */
    .fleuron:not(.fleuron-bas) { display: block; }

    .fleuron-bas { margin: .7em 0 .9em; }

    /* ── LE REPLI N'A PAS COURS DANS LE LIVRE ──────────────────────────────
     * La page de droite a déjà son propre mécanisme : elle défile sur
     * elle-même, sous un masque qui estompe sa dernière ligne. Deux dispositifs
     * de repli superposés se contrarieraient. Le plafond est donc levé, le
     * fondu retiré, l'étiquette et sa case effacées. */
    .repli-corps {
        max-height: none;
        overflow  : visible;
    }

    .repli-corps::after { display: none; }
    .repli-bouton       { display: none; }
    .repli-case         { display: none; }

    .portail-titre     { font-size: 2.05em; line-height: 1.16; }
    .portail-soustitre { font-size: .78em; margin: .55em 0 0; }

    /* ── TEXTE DE PRÉSENTATION DANS LA PAGE ────────────────────────────── */
    /* Le texte est plus long que ne le permet une page de livre sur les
     * écrans modestes. La zone défile alors sur elle-même, discrètement : le
     * lecteur reste dans la page, qui ne se déforme jamais. */

    .portail-presentation {
        flex               : 1 1 auto;
        min-height         : 0;
        margin-top         : 0;
        padding            : 0 .5em 2em 0;
        border-top         : 0;
        overflow-y         : auto;
        overscroll-behavior: contain;

        /* Barre de défilement fine et sourde, accordée à la palette. */
        scrollbar-width: thin;
        scrollbar-color: rgba(125,100,40,.45) transparent;

        /* Le bas de la zone de lecture s'estompe doucement. Ce fondu, obtenu
         * par un masque de transparence (module CSS Masking du W3C), indique
         * que le texte se poursuit. Le rembourrage bas ci-dessus réserve la
         * hauteur nécessaire pour que la dernière ligne, une fois le texte
         * parcouru en entier, ne soit jamais atteinte par le fondu. */
        -webkit-mask-image: linear-gradient(to bottom, #000 0,
                                #000 calc(100% - 2.6em), transparent 100%);
        mask-image        : linear-gradient(to bottom, #000 0,
                                #000 calc(100% - 2.6em), transparent 100%);
    }

    .portail-presentation::-webkit-scrollbar       { width: 5px; }
    .portail-presentation::-webkit-scrollbar-track { background: transparent; }
    .portail-presentation::-webkit-scrollbar-thumb {
        background   : rgba(125,100,40,.45);
        border-radius: 3px;
    }

    /* Le titre de section retrouve ici une taille proportionnelle à la
     * colonne du livre, sur grand écran. Sa couleur bleue, alignée le
     * 24 août 2026 sur celle du titre principal, ne change plus d'un
     * gabarit à l'autre. */
    .portail-presentation h2 {
        font-size     : .74em;
        margin        : 0 0 .8em;
        letter-spacing: .12em;
        color         : var(--couleur-primaire, #2c3e6b);
    }

    /* Le texte de lecture suit l'échelle du livre, mais ne descend jamais
     * en dessous de 16 pixels. Sur une fenêtre écrasée, le livre rapetisse,
     * ses ornements et son titre avec lui, mais le corps de lecture tient
     * bon : il défile un peu plus, il ne devient jamais illisible. C'est le
     * seul élément de la page qui échappe volontairement à la proportion
     * générale, parce qu'il est le seul qu'on lise vraiment. */
    .portail-presentation p  { font-size: max(.93em, 16px); line-height: 1.52;
                               margin: 0 0 .75em; }

    /* ── LA COUVERTURE ─────────────────────────────────────────────────── */
    /* Elle occupe d'abord la moitié droite du livre, exactement au-dessus de
     * la page de texte. transform-origin la fait pivoter sur son bord gauche,
     * qui est le dos du volume, comme une porte sur ses gonds. Un demi-tour
     * complet (180 degrés) la couche sur la moitié gauche.
     *
     * Elle possède deux faces montées dos à dos : le plat de reliure, visible
     * livre fermé, et le frontispice, visible livre ouvert.
     * backface-visibility masque automatiquement celle des deux qui tourne le
     * dos au lecteur : le navigateur ne montre jamais l'envers d'une face. */

    .livre-couverture {
        display         : block;
        position        : absolute;
        top             : 0;
        right           : 0;
        order           : 0;
        width           : 50%;
        height          : 100%;
        margin          : 0;
        transform-origin: left center;
        transform-style : preserve-3d;
        transform       : translateZ(1px) rotateY(0deg);
        animation       : livre-ouverture 1.15s cubic-bezier(.42,.02,.24,1) 1.6s forwards;
    }

    .couverture-plat,
    .couverture-frontispice {
        display                    : block;
        position                   : absolute;
        top                        : 0;
        right                      : 0;
        bottom                     : 0;
        left                       : 0;
        -webkit-backface-visibility: hidden;
        backface-visibility        : hidden;
    }

    /* ── LE PLAT DE RELIURE : LE CUIR ──────────────────────────────────── */
    /* Cinq couches, de la plus proche de l'œil à la plus lointaine :
     *
     *   1. le grain de la peau, turbulence désaturée posée en mode overlay.
     *      Ce mode de fusion est ici essentiel : il assombrit ce qui était
     *      sombre et éclaircit ce qui était clair sans déplacer la couleur
     *      moyenne, si bien que le bleu demeure exactement le bleu et que
     *      seul le relief apparaît ;
     *   2. le lustre oblique, la lumière rasante que renvoie une peau cirée ;
     *   3. le halo du tiers supérieur, ambré, où la bougie frappe le plat ;
     *   4. l'assombrissement des quatre arêtes, car les bords d'un plat
     *      s'usent et prennent la poussière ;
     *   5. le fond bleu marine, monté en biais.
     *
     * Le même procédé de turbulence sert au plateau de la table : c'est la
     * seule manière d'obtenir une matière irrégulière sans télécharger la
     * moindre image. */

    /* Occultation du plat une fois la charnière franchie.
     *
     * backface-visibility masque bien l'envers du plat lui-même, mais pas
     * toujours celui de ce qu'il porte : le cartouche doré et la surpiqûre
     * créent chacun leur propre plan de composition, et certains navigateurs
     * les dessinent alors séparément, sans plus tenir compte de la consigne
     * donnée à leur parent. On voyait ainsi, le livre ouvert, le filet du
     * cartouche et le titre inversé transparaître sur la page de gauche.
     *
     * La parade est de retirer tout le plat de l'affichage, et non plus
     * seulement d'en cacher l'envers. visibility se transmet aux descendants
     * et ne s'interpole pas : elle bascule d'un coup, à mi-course de la
     * rotation, c'est-à-dire au moment précis où la couverture passe le quart
     * de tour et où le lecteur n'en voit plus que la tranche. */

    .couverture-plat {
        display      : block;
        border-radius: 2px 6px 6px 2px;
        animation    : plat-occultation 1.15s linear 1.6s forwards;
        background   :
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='cuir'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23cuir)' opacity='0.58'/%3E%3C/svg%3E"),
            linear-gradient(104deg,
                rgba(255,255,255,.11) 0%, rgba(255,255,255,.03) 26%,
                rgba(255,255,255,0)   44%),
            radial-gradient(ellipse 78% 52% at 50% 20%,
                rgba(255,214,150,.13) 0%, rgba(255,214,150,0) 72%),
            radial-gradient(ellipse 122% 104% at 50% 50%,
                rgba(0,0,0,0) 42%, rgba(0,0,0,.30) 78%, rgba(0,0,0,.52) 100%),
            linear-gradient(135deg, #14203a 0%, #27395f 46%, #131e36 100%);
        background-size      : 260px 260px, cover, cover, cover, cover;
        background-repeat    : repeat, no-repeat, no-repeat, no-repeat, no-repeat;
        background-blend-mode: overlay, normal, normal, normal, normal;
        box-shadow:
            inset 8px 0 18px -8px rgba(0,0,0,.60),
            inset 0 0 2px rgba(255,255,255,.06),
            26px 20px 46px rgba(0,0,0,.55);
    }

    /* Nervure du dos, le long de la charnière. */
    .couverture-plat::before {
        content   : "";
        position  : absolute;
        top       : 0;
        bottom    : 0;
        left      : 0;
        width     : 2.5%;
        z-index   : 2;
        background: linear-gradient(to right, rgba(255,255,255,.10), rgba(0,0,0,.35));
    }

    /* ── LA SURPIQÛRE ──────────────────────────────────────────────────── */
    /* Le fil court près du bord du plat, en retrait des filets dorés. Il
     * n'est pas dessiné par une bordure en tirets : le CSS ne laisse pas
     * régler la longueur des tirets d'une bordure, que chaque navigateur
     * calcule à sa façon. Quatre dégradés répétés, un par côté, donnent au
     * contraire le point et son intervalle au pixel près, ici un point de
     * sept pixels tous les treize.
     *
     * Le filtre drop-shadow s'applique après composition : il suit donc la
     * découpe de chaque point et enfonce le fil dans la peau, au lieu de
     * poser une ombre rectangulaire autour de la boîte. */

    .couverture-plat::after {
        content       : "";
        position      : absolute;
        top           : 3.4%;
        right         : 3.2%;
        bottom        : 3.4%;
        left          : 4.6%;
        z-index       : 1;
        pointer-events: none;
        background:
            repeating-linear-gradient(to right,
                rgba(232,212,158,.80) 0 7px, rgba(232,212,158,0) 7px 13px)
                left top / 100% 1.5px no-repeat,
            repeating-linear-gradient(to right,
                rgba(232,212,158,.80) 0 7px, rgba(232,212,158,0) 7px 13px)
                left bottom / 100% 1.5px no-repeat,
            repeating-linear-gradient(to bottom,
                rgba(232,212,158,.80) 0 7px, rgba(232,212,158,0) 7px 13px)
                left top / 1.5px 100% no-repeat,
            repeating-linear-gradient(to bottom,
                rgba(232,212,158,.80) 0 7px, rgba(232,212,158,0) 7px 13px)
                right top / 1.5px 100% no-repeat;
        filter: drop-shadow(0 1px 0 rgba(0,0,0,.65))
                drop-shadow(0 -1px 0 rgba(255,255,255,.05));
    }

    /* ── LE CARTOUCHE ET L'OR ──────────────────────────────────────────── */

    .plat-cadre {
        position       : absolute;
        top            : 9%;
        right          : 9.5%;
        bottom         : 9%;
        left           : 10.5%;
        z-index        : 3;
        border         : 1px solid rgba(206,175,110,.80);
        outline        : 1px solid rgba(206,175,110,.42);
        outline-offset : 5px;
        display        : flex;
        flex-direction : column;
        align-items    : center;
        justify-content: center;
        gap            : 1.6em;
        text-align     : center;
        color          : rgba(214,184,120,.92);
        box-shadow     : 0 1px 0 rgba(0,0,0,.45),
                         inset 0 1px 0 rgba(0,0,0,.35);
    }

    .plat-fleuron {
        font-size  : 1.3em;
        line-height: 1;
        color      : rgba(206,175,110,.85);
    }

    .plat-titre {
        font-family   : var(--police-principale, Garamond, Georgia, serif);
        font-size     : 2em;
        line-height   : 1.25;
        font-variant  : small-caps;
        letter-spacing: .07em;
        color         : #d6b878;
    }

    .plat-mention {
        font-family   : var(--police-interface, system-ui, sans-serif);
        font-size     : .72em;
        line-height   : 1.8;
        letter-spacing: .14em;
        text-transform: uppercase;
        color         : rgba(206,175,110,.72);
    }

    /* Le titre poussé à l'or.
     *
     * L'or à la feuille n'a jamais une teinte unique : c'est une pellicule de
     * métal battu qui renvoie la lumière différemment selon l'inclinaison de
     * chaque parcelle. On l'imite par un dégradé oblique qui passe du brun
     * profond des creux au blanc presque pur de l'arête la plus exposée, puis
     * retombe. background-clip: text découpe ce dégradé à la forme exacte des
     * caractères.
     *
     * Deux ombres portées achèvent l'effet : une ombre noire sous la lettre,
     * qui la creuse dans la peau comme le fer chaud du doreur, et un très
     * léger reflet clair au-dessus, qui en relève l'arête. On emploie
     * drop-shadow et non text-shadow, car l'ombre doit épouser la forme du
     * dégradé découpé, non celle d'un caractère plein.
     *
     * La règle est enfermée dans @supports : un navigateur qui ignorerait le
     * découpage conserve la couleur unie déclarée plus haut et affiche un or
     * mat, jamais un titre invisible. */

    @supports ((-webkit-background-clip: text) or (background-clip: text)) {

        .plat-titre {
            background-image: linear-gradient(102deg,
                #6d4f1c  0%, #b48a37 12%, #e7cb84 24%, #fbf3d8 33%,
                #ffffff 39%, #edd398 44%, #e2c176 49%, #a67c28 58%,
                #6f5320 68%, #b8903c 80%, #efdcab 92%, #cfae66 100%);
            -webkit-background-clip: text;
            background-clip        : text;
            color                  : transparent;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 1px 1px rgba(0,0,0,.70))
                    drop-shadow(0 -1px 0 rgba(255,246,214,.16));
        }

        .plat-mention,
        .plat-fleuron {
            background-image: linear-gradient(102deg,
                #8a6a28  0%, #d3b164 26%, #f4e6bd 44%, #c9a54e 56%,
                #b8913c 68%, #e0c483 88%, #9c7a2e 100%);
            -webkit-background-clip: text;
            background-clip        : text;
            color                  : transparent;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 1px 0 rgba(0,0,0,.62));
        }
    }

    /* Face intérieure : le frontispice. Elle est montée en demi-tour derrière
     * le plat. Une fois la couverture retournée, les deux rotations
     * s'annulent : l'image se présente donc bien à l'endroit, jamais en
     * miroir. */
    .couverture-frontispice {
        transform    : rotateY(180deg);
        border-radius: 3px 0 0 3px;
        background   : linear-gradient(to right, #f2eee1 0%, #fbf8f0 22%, #f5f1e6 100%);
        box-shadow   :
            inset -16px 0 24px -16px rgba(44,62,107,.22),
            -2px 0 0 #e8e2d1,
            -4px 0 0 #ded7c3,
            -6px 0 0 #d3cbb4,
            -14px 22px 48px rgba(0,0,0,.48);
    }

    .frontispice-contenu {
        display        : flex;
        flex-direction : column;
        align-items    : center;
        position       : absolute;
        top            : 0;
        right          : 0;
        bottom         : 0;
        left           : 0;
        padding        : 5.5% 6.5% 4.5%;
        justify-content: center;
        gap            : 3%;
    }

    .phylactere {
        width     : 62%;
        max-width : none;
        max-height: 16%;
        margin    : 0;
        object-fit: contain;
        animation : phylactere-revelation 1.1s ease-out 2.55s forwards;
    }

    .frontispice-image {
        flex      : 0 1 auto;
        min-height: 0;
        height    : 100%;
        width     : auto;
        max-width : 100%;
        max-height: none;
        margin    : 0;
        object-fit: contain;
        box-shadow: 0 5px 16px rgba(26,39,69,.16);
    }

    /* ── LA POUSSIÈRE MAGIQUE ──────────────────────────────────────────── */
    /* Cent vingt grains, dorés et argentés en alternance, s'échappent
     * du pourtour du volume au moment où la couverture s'ouvre, montent en
     * dérivant au-dessus de la table et s'y consument. Passé la cinquième
     * seconde, il n'en reste rien.
     *
     * Le parti pris n'est plus l'étoile mais le grain : de petits points ronds,
     * de trois à neuf pixels, dont le halo déborde largement le corps. C'est le
     * procédé de la poussière de fée du dessin animé, où l'effet ne tient pas
     * au dessin de chaque particule, jamais lisible à cette taille, mais à leur
     * nombre, à la diversité de leurs tailles et au battement désaccordé de
     * leur éclat.
     *
     * Chaque grain occupe deux boîtes imbriquées, et cette séparation est la
     * clé de l'effet. La balise mère porte la trajectoire ; son pseudo-élément
     * ::before porte le battement, sur un tempo bien plus rapide, propre à
     * chacun. Deux animations distinctes se superposent ainsi sans se gêner,
     * et les opacités se multiplient d'elles-mêmes.
     *
     * Chaque grain porte sa propre direction de fuite, inscrite dans deux
     * propriétés personnalisées, --dx et --dy, que l'animation reprend telles
     * quelles. Elles sont toujours dirigées vers l'extérieur, et toujours
     * assorties d'une portance vers le haut : la poussière magique monte, elle
     * ne tombe pas. Sans cela, la nuée se rabattrait sur le livre.
     *
     * Les retards vont en croissant de la droite vers la gauche, dans l'ordre
     * même où le plat découvre la page : la nuée suit le bord de la
     * couverture au lieu de scintiller au hasard.
     *
     * Le voile est posé dans .livre et non dans .scene, afin de suivre le
     * glissement du volume ; translateZ(40px) le porte au-dessus du plat, qui
     * se tient à un pixel de profondeur. */

    .paillettes {
        display       : block;
        position      : absolute;
        top           : 0;
        right         : 0;
        bottom        : 0;
        left          : 0;
        transform     : translateZ(40px);
        pointer-events: none;
    }

    .paillettes i {
        display       : block;
        position      : absolute;
        opacity       : 0;
        will-change   : transform, opacity;
        animation-name           : poussiere-derive;
        animation-timing-function: cubic-bezier(.12,.58,.28,1);
        animation-fill-mode      : forwards;
    }

    /* Le grain lui-même. Il est porté par la balise mère, qui se charge de la
     * dérive ; lui ne fait que battre. Deux animations indépendantes sur deux
     * boîtes imbriquées valent mieux qu'une seule qui tenterait les deux : les
     * opacités se multiplient naturellement, et le scintillement garde son
     * propre tempo, plus rapide que la course. */
    .paillettes i::before {
        content      : "";
        position     : absolute;
        inset        : 0;
        border-radius: 50%;
        background   : radial-gradient(circle,
                           #ffffff 0%, #fff3c4 30%, #f3c33f 62%,
                           rgba(214,150,32,0) 100%);
        filter       : drop-shadow(0 0 4px rgba(255,242,196,1))
                       drop-shadow(0 0 12px rgba(250,198,72,.9))
                       drop-shadow(0 0 22px rgba(233,168,40,.55));
        animation-name           : poussiere-scintillement;
        animation-iteration-count: infinite;
        animation-direction      : alternate;
        animation-timing-function: ease-in-out;
    }

    /* Un grain sur deux vire à l'argent : le mélange des deux métaux donne à
     * la nuée sa vibration, l'or seul paraîtrait plat. Le cœur reste blanc
     * dans les deux cas, c'est le halo qui porte la couleur. */
    .paillettes i:nth-child(even)::before {
        background: radial-gradient(circle,
                        #ffffff 0%, #f6fbff 30%, #cfe3f6 62%,
                        rgba(150,186,224,0) 100%);
        filter    : drop-shadow(0 0 4px rgba(248,252,255,1))
                    drop-shadow(0 0 12px rgba(186,216,244,.9))
                    drop-shadow(0 0 22px rgba(150,190,232,.55));
    }

    /* Bord droit du volume : la nuée part la première, avant même que le plat
     * n'ait commencé sa course. */
    .paillettes i:nth-child(1) { left:101.9%; top:0.0%; width:4.8px; height:4.8px; --dx:216px; --dy:-34px; animation-delay:1.76s; animation-duration:3.53s; }
    .paillettes i:nth-child(1)::before { animation-duration:0.47s; animation-delay:0.38s; }
    .paillettes i:nth-child(2) { left:102.4%; top:3.2%; width:12.1px; height:12.1px; --dx:306px; --dy:-106px; animation-delay:1.71s; animation-duration:3.85s; }
    .paillettes i:nth-child(2)::before { animation-duration:0.86s; animation-delay:0.58s; }
    .paillettes i:nth-child(3) { left:101.5%; top:6.5%; width:5.8px; height:5.8px; --dx:197px; --dy:-46px; animation-delay:1.56s; animation-duration:3.11s; }
    .paillettes i:nth-child(3)::before { animation-duration:0.76s; animation-delay:0.45s; }
    .paillettes i:nth-child(4) { left:100.9%; top:9.7%; width:8.5px; height:8.5px; --dx:210px; --dy:-37px; animation-delay:1.67s; animation-duration:2.96s; }
    .paillettes i:nth-child(4)::before { animation-duration:0.62s; animation-delay:0.22s; }
    .paillettes i:nth-child(5) { left:101.8%; top:12.9%; width:7.4px; height:7.4px; --dx:188px; --dy:11px; animation-delay:1.61s; animation-duration:3.87s; }
    .paillettes i:nth-child(5)::before { animation-duration:0.64s; animation-delay:0.51s; }
    .paillettes i:nth-child(6) { left:102.2%; top:16.1%; width:4.8px; height:4.8px; --dx:126px; --dy:-5px; animation-delay:1.58s; animation-duration:3.1s; }
    .paillettes i:nth-child(6)::before { animation-duration:0.51s; animation-delay:0.51s; }
    .paillettes i:nth-child(7) { left:101.6%; top:19.4%; width:6.3px; height:6.3px; --dx:212px; --dy:-120px; animation-delay:1.76s; animation-duration:3.34s; }
    .paillettes i:nth-child(7)::before { animation-duration:0.76s; animation-delay:0.15s; }
    .paillettes i:nth-child(8) { left:100.8%; top:22.6%; width:9.7px; height:9.7px; --dx:249px; --dy:-134px; animation-delay:1.74s; animation-duration:3.71s; }
    .paillettes i:nth-child(8)::before { animation-duration:0.82s; animation-delay:0.36s; }
    .paillettes i:nth-child(9) { left:102.0%; top:25.8%; width:11.3px; height:11.3px; --dx:206px; --dy:-28px; animation-delay:1.67s; animation-duration:2.7s; }
    .paillettes i:nth-child(9)::before { animation-duration:0.73s; animation-delay:0.49s; }
    .paillettes i:nth-child(10) { left:100.4%; top:29.0%; width:10.9px; height:10.9px; --dx:132px; --dy:-64px; animation-delay:1.66s; animation-duration:4.05s; }
    .paillettes i:nth-child(10)::before { animation-duration:0.85s; animation-delay:0.54s; }
    .paillettes i:nth-child(11) { left:101.0%; top:32.3%; width:7.2px; height:7.2px; --dx:243px; --dy:-8px; animation-delay:1.77s; animation-duration:3.7s; }
    .paillettes i:nth-child(11)::before { animation-duration:0.76s; animation-delay:0.03s; }
    .paillettes i:nth-child(12) { left:101.2%; top:35.5%; width:4.6px; height:4.6px; --dx:116px; --dy:-69px; animation-delay:1.69s; animation-duration:4.03s; }
    .paillettes i:nth-child(12)::before { animation-duration:0.66s; animation-delay:0.49s; }
    .paillettes i:nth-child(13) { left:100.5%; top:38.7%; width:10.7px; height:10.7px; --dx:297px; --dy:-104px; animation-delay:1.67s; animation-duration:2.66s; }
    .paillettes i:nth-child(13)::before { animation-duration:0.79s; animation-delay:0.4s; }
    .paillettes i:nth-child(14) { left:101.1%; top:41.9%; width:11.7px; height:11.7px; --dx:135px; --dy:-51px; animation-delay:1.78s; animation-duration:2.72s; }
    .paillettes i:nth-child(14)::before { animation-duration:0.62s; animation-delay:0.08s; }
    .paillettes i:nth-child(15) { left:100.9%; top:45.2%; width:4.6px; height:4.6px; --dx:150px; --dy:-10px; animation-delay:1.73s; animation-duration:3.1s; }
    .paillettes i:nth-child(15)::before { animation-duration:0.93s; animation-delay:0.52s; }
    .paillettes i:nth-child(16) { left:101.4%; top:48.4%; width:11.1px; height:11.1px; --dx:199px; --dy:-47px; animation-delay:1.75s; animation-duration:3.36s; }
    .paillettes i:nth-child(16)::before { animation-duration:0.57s; animation-delay:0.42s; }
    .paillettes i:nth-child(17) { left:101.1%; top:51.6%; width:7.1px; height:7.1px; --dx:177px; --dy:-95px; animation-delay:1.67s; animation-duration:3.48s; }
    .paillettes i:nth-child(17)::before { animation-duration:0.44s; animation-delay:0.59s; }
    .paillettes i:nth-child(18) { left:100.9%; top:54.8%; width:8.2px; height:8.2px; --dx:133px; --dy:2px; animation-delay:1.73s; animation-duration:4.14s; }
    .paillettes i:nth-child(18)::before { animation-duration:0.63s; animation-delay:0.5s; }
    .paillettes i:nth-child(19) { left:101.3%; top:58.1%; width:12.4px; height:12.4px; --dx:129px; --dy:-69px; animation-delay:1.67s; animation-duration:3.79s; }
    .paillettes i:nth-child(19)::before { animation-duration:0.59s; animation-delay:0.32s; }
    .paillettes i:nth-child(20) { left:101.6%; top:61.3%; width:10.7px; height:10.7px; --dx:119px; --dy:-71px; animation-delay:1.69s; animation-duration:3.03s; }
    .paillettes i:nth-child(20)::before { animation-duration:0.93s; animation-delay:0.08s; }
    .paillettes i:nth-child(21) { left:102.0%; top:64.5%; width:6.5px; height:6.5px; --dx:246px; --dy:3px; animation-delay:1.67s; animation-duration:3.15s; }
    .paillettes i:nth-child(21)::before { animation-duration:0.63s; animation-delay:0.2s; }
    .paillettes i:nth-child(22) { left:100.5%; top:67.7%; width:6.9px; height:6.9px; --dx:126px; --dy:-82px; animation-delay:1.68s; animation-duration:2.4s; }
    .paillettes i:nth-child(22)::before { animation-duration:0.76s; animation-delay:0.49s; }
    .paillettes i:nth-child(23) { left:102.0%; top:71.0%; width:4.8px; height:4.8px; --dx:172px; --dy:-80px; animation-delay:1.82s; animation-duration:3.95s; }
    .paillettes i:nth-child(23)::before { animation-duration:0.42s; animation-delay:0.48s; }
    .paillettes i:nth-child(24) { left:101.7%; top:74.2%; width:5.5px; height:5.5px; --dx:242px; --dy:-44px; animation-delay:1.7s; animation-duration:4.12s; }
    .paillettes i:nth-child(24)::before { animation-duration:0.43s; animation-delay:0.41s; }
    .paillettes i:nth-child(25) { left:101.5%; top:77.4%; width:8.5px; height:8.5px; --dx:124px; --dy:-99px; animation-delay:1.77s; animation-duration:2.96s; }
    .paillettes i:nth-child(25)::before { animation-duration:0.57s; animation-delay:0.1s; }
    .paillettes i:nth-child(26) { left:101.3%; top:80.6%; width:10.0px; height:10.0px; --dx:128px; --dy:4px; animation-delay:1.79s; animation-duration:2.62s; }
    .paillettes i:nth-child(26)::before { animation-duration:0.66s; animation-delay:0.5s; }
    .paillettes i:nth-child(27) { left:101.1%; top:83.9%; width:6.0px; height:6.0px; --dx:165px; --dy:-62px; animation-delay:1.73s; animation-duration:3.83s; }
    .paillettes i:nth-child(27)::before { animation-duration:0.66s; animation-delay:0.13s; }
    .paillettes i:nth-child(28) { left:101.2%; top:87.1%; width:6.5px; height:6.5px; --dx:127px; --dy:9px; animation-delay:1.76s; animation-duration:2.52s; }
    .paillettes i:nth-child(28)::before { animation-duration:0.5s; animation-delay:0.2s; }
    .paillettes i:nth-child(29) { left:101.6%; top:90.3%; width:11.9px; height:11.9px; --dx:220px; --dy:-134px; animation-delay:1.85s; animation-duration:3.67s; }
    .paillettes i:nth-child(29)::before { animation-duration:0.48s; animation-delay:0.17s; }
    .paillettes i:nth-child(30) { left:100.8%; top:93.5%; width:10.2px; height:10.2px; --dx:178px; --dy:-51px; animation-delay:1.7s; animation-duration:3.95s; }
    .paillettes i:nth-child(30)::before { animation-duration:0.43s; animation-delay:0.29s; }
    .paillettes i:nth-child(31) { left:101.5%; top:96.8%; width:8.9px; height:8.9px; --dx:105px; --dy:-85px; animation-delay:1.87s; animation-duration:2.67s; }
    .paillettes i:nth-child(31)::before { animation-duration:0.64s; animation-delay:0.55s; }
    .paillettes i:nth-child(32) { left:101.3%; top:100.0%; width:6.5px; height:6.5px; --dx:158px; --dy:-93px; animation-delay:1.75s; animation-duration:3.12s; }
    .paillettes i:nth-child(32)::before { animation-duration:0.66s; animation-delay:0.19s; }

    /* Bord supérieur, de la droite vers la gauche. */
    .paillettes i:nth-child(33) { left:100.0%; top:-1.4%; width:7.4px; height:7.4px; --dx:34px; --dy:-300px; animation-delay:1.74s; animation-duration:2.53s; }
    .paillettes i:nth-child(33)::before { animation-duration:0.64s; animation-delay:0.42s; }
    .paillettes i:nth-child(34) { left:96.8%; top:-2.2%; width:7.5px; height:7.5px; --dx:88px; --dy:-269px; animation-delay:1.68s; animation-duration:2.86s; }
    .paillettes i:nth-child(34)::before { animation-duration:0.58s; animation-delay:0.47s; }
    .paillettes i:nth-child(35) { left:93.5%; top:-1.5%; width:5.5px; height:5.5px; --dx:5px; --dy:-237px; animation-delay:1.79s; animation-duration:3.93s; }
    .paillettes i:nth-child(35)::before { animation-duration:0.75s; animation-delay:0.12s; }
    .paillettes i:nth-child(36) { left:90.3%; top:-1.3%; width:7.4px; height:7.4px; --dx:-49px; --dy:-249px; animation-delay:1.76s; animation-duration:2.41s; }
    .paillettes i:nth-child(36)::before { animation-duration:0.62s; animation-delay:0.19s; }
    .paillettes i:nth-child(37) { left:87.1%; top:-2.5%; width:7.9px; height:7.9px; --dx:-60px; --dy:-300px; animation-delay:1.92s; animation-duration:3.31s; }
    .paillettes i:nth-child(37)::before { animation-duration:0.93s; animation-delay:0.53s; }
    .paillettes i:nth-child(38) { left:83.9%; top:-2.2%; width:5.0px; height:5.0px; --dx:56px; --dy:-167px; animation-delay:1.77s; animation-duration:4.05s; }
    .paillettes i:nth-child(38)::before { animation-duration:0.89s; animation-delay:0.52s; }
    .paillettes i:nth-child(39) { left:80.6%; top:-2.8%; width:11.7px; height:11.7px; --dx:-27px; --dy:-179px; animation-delay:1.84s; animation-duration:4.11s; }
    .paillettes i:nth-child(39)::before { animation-duration:0.79s; animation-delay:0.37s; }
    .paillettes i:nth-child(40) { left:77.4%; top:-1.2%; width:7.8px; height:7.8px; --dx:79px; --dy:-276px; animation-delay:1.88s; animation-duration:3.22s; }
    .paillettes i:nth-child(40)::before { animation-duration:0.86s; animation-delay:0.53s; }
    .paillettes i:nth-child(41) { left:74.2%; top:-1.1%; width:7.2px; height:7.2px; --dx:-48px; --dy:-192px; animation-delay:1.99s; animation-duration:3.3s; }
    .paillettes i:nth-child(41)::before { animation-duration:0.52s; animation-delay:0.04s; }
    .paillettes i:nth-child(42) { left:71.0%; top:-1.9%; width:6.8px; height:6.8px; --dx:22px; --dy:-230px; animation-delay:2.07s; animation-duration:3.57s; }
    .paillettes i:nth-child(42)::before { animation-duration:0.52s; animation-delay:0.36s; }
    .paillettes i:nth-child(43) { left:67.7%; top:-1.5%; width:11.9px; height:11.9px; --dx:-41px; --dy:-291px; animation-delay:2.03s; animation-duration:3.93s; }
    .paillettes i:nth-child(43)::before { animation-duration:0.6s; animation-delay:0.5s; }
    .paillettes i:nth-child(44) { left:64.5%; top:-1.0%; width:10.9px; height:10.9px; --dx:-36px; --dy:-314px; animation-delay:2.14s; animation-duration:3.49s; }
    .paillettes i:nth-child(44)::before { animation-duration:0.49s; animation-delay:0.2s; }
    .paillettes i:nth-child(45) { left:61.3%; top:-1.5%; width:11.1px; height:11.1px; --dx:-11px; --dy:-188px; animation-delay:2.1s; animation-duration:2.86s; }
    .paillettes i:nth-child(45)::before { animation-duration:0.48s; animation-delay:0.24s; }
    .paillettes i:nth-child(46) { left:58.1%; top:-2.7%; width:6.7px; height:6.7px; --dx:-22px; --dy:-277px; animation-delay:2.15s; animation-duration:2.94s; }
    .paillettes i:nth-child(46)::before { animation-duration:0.65s; animation-delay:0.45s; }
    .paillettes i:nth-child(47) { left:54.8%; top:-2.3%; width:5.4px; height:5.4px; --dx:-110px; --dy:-292px; animation-delay:2.21s; animation-duration:2.99s; }
    .paillettes i:nth-child(47)::before { animation-duration:0.61s; animation-delay:0.16s; }
    .paillettes i:nth-child(48) { left:51.6%; top:-2.5%; width:8.9px; height:8.9px; --dx:-29px; --dy:-315px; animation-delay:2.3s; animation-duration:4.12s; }
    .paillettes i:nth-child(48)::before { animation-duration:0.86s; animation-delay:0.5s; }
    .paillettes i:nth-child(49) { left:48.4%; top:-2.8%; width:9.7px; height:9.7px; --dx:-1px; --dy:-316px; animation-delay:2.24s; animation-duration:3.25s; }
    .paillettes i:nth-child(49)::before { animation-duration:0.95s; animation-delay:0.21s; }
    .paillettes i:nth-child(50) { left:45.2%; top:-2.7%; width:6.2px; height:6.2px; --dx:-24px; --dy:-250px; animation-delay:2.24s; animation-duration:2.68s; }
    .paillettes i:nth-child(50)::before { animation-duration:0.86s; animation-delay:0.22s; }
    .paillettes i:nth-child(51) { left:41.9%; top:-1.9%; width:7.8px; height:7.8px; --dx:-40px; --dy:-308px; animation-delay:2.38s; animation-duration:2.62s; }
    .paillettes i:nth-child(51)::before { animation-duration:0.9s; animation-delay:0.53s; }
    .paillettes i:nth-child(52) { left:38.7%; top:-1.2%; width:4.7px; height:4.7px; --dx:-55px; --dy:-274px; animation-delay:2.31s; animation-duration:3.01s; }
    .paillettes i:nth-child(52)::before { animation-duration:0.77s; animation-delay:0.48s; }
    .paillettes i:nth-child(53) { left:35.5%; top:-1.6%; width:4.7px; height:4.7px; --dx:27px; --dy:-247px; animation-delay:2.54s; animation-duration:2.95s; }
    .paillettes i:nth-child(53)::before { animation-duration:0.59s; animation-delay:0.5s; }
    .paillettes i:nth-child(54) { left:32.3%; top:-3.0%; width:12.3px; height:12.3px; --dx:-66px; --dy:-237px; animation-delay:2.56s; animation-duration:2.93s; }
    .paillettes i:nth-child(54)::before { animation-duration:0.56s; animation-delay:0.29s; }
    .paillettes i:nth-child(55) { left:29.0%; top:-2.0%; width:7.9px; height:7.9px; --dx:-25px; --dy:-305px; animation-delay:2.41s; animation-duration:2.85s; }
    .paillettes i:nth-child(55)::before { animation-duration:0.52s; animation-delay:0.48s; }
    .paillettes i:nth-child(56) { left:25.8%; top:-0.7%; width:8.7px; height:8.7px; --dx:38px; --dy:-259px; animation-delay:2.64s; animation-duration:3.06s; }
    .paillettes i:nth-child(56)::before { animation-duration:0.75s; animation-delay:0.52s; }
    .paillettes i:nth-child(57) { left:22.6%; top:-0.8%; width:5.3px; height:5.3px; --dx:-61px; --dy:-220px; animation-delay:2.53s; animation-duration:4.14s; }
    .paillettes i:nth-child(57)::before { animation-duration:0.7s; animation-delay:0.5s; }
    .paillettes i:nth-child(58) { left:19.4%; top:-2.5%; width:5.9px; height:5.9px; --dx:-86px; --dy:-323px; animation-delay:2.74s; animation-duration:3.81s; }
    .paillettes i:nth-child(58)::before { animation-duration:0.76s; animation-delay:0.4s; }
    .paillettes i:nth-child(59) { left:16.1%; top:-0.9%; width:7.1px; height:7.1px; --dx:-59px; --dy:-223px; animation-delay:2.73s; animation-duration:2.56s; }
    .paillettes i:nth-child(59)::before { animation-duration:0.89s; animation-delay:0.07s; }
    .paillettes i:nth-child(60) { left:12.9%; top:-1.5%; width:11.9px; height:11.9px; --dx:42px; --dy:-173px; animation-delay:2.81s; animation-duration:2.72s; }
    .paillettes i:nth-child(60)::before { animation-duration:0.63s; animation-delay:0.15s; }
    .paillettes i:nth-child(61) { left:9.7%; top:-2.7%; width:11.0px; height:11.0px; --dx:0px; --dy:-259px; animation-delay:2.71s; animation-duration:3.41s; }
    .paillettes i:nth-child(61)::before { animation-duration:0.72s; animation-delay:0.47s; }
    .paillettes i:nth-child(62) { left:6.5%; top:-1.9%; width:10.4px; height:10.4px; --dx:-72px; --dy:-270px; animation-delay:2.75s; animation-duration:3.56s; }
    .paillettes i:nth-child(62)::before { animation-duration:0.81s; animation-delay:0.04s; }
    .paillettes i:nth-child(63) { left:3.2%; top:-1.5%; width:9.9px; height:9.9px; --dx:-14px; --dy:-323px; animation-delay:2.77s; animation-duration:3.34s; }
    .paillettes i:nth-child(63)::before { animation-duration:0.72s; animation-delay:0.45s; }
    .paillettes i:nth-child(64) { left:0.0%; top:-1.1%; width:8.6px; height:8.6px; --dx:-49px; --dy:-202px; animation-delay:2.85s; animation-duration:3.82s; }
    .paillettes i:nth-child(64)::before { animation-duration:0.82s; animation-delay:0.29s; }

    /* Bord inférieur, de la droite vers la gauche également. */
    .paillettes i:nth-child(65) { left:100.0%; top:102.5%; width:10.3px; height:10.3px; --dx:-17px; --dy:167px; animation-delay:1.67s; animation-duration:3.8s; }
    .paillettes i:nth-child(65)::before { animation-duration:0.77s; animation-delay:0.19s; }
    .paillettes i:nth-child(66) { left:96.8%; top:101.8%; width:7.6px; height:7.6px; --dx:21px; --dy:45px; animation-delay:1.78s; animation-duration:2.44s; }
    .paillettes i:nth-child(66)::before { animation-duration:0.7s; animation-delay:0.11s; }
    .paillettes i:nth-child(67) { left:93.5%; top:102.9%; width:11.5px; height:11.5px; --dx:-23px; --dy:200px; animation-delay:1.65s; animation-duration:3.34s; }
    .paillettes i:nth-child(67)::before { animation-duration:0.88s; animation-delay:0.52s; }
    .paillettes i:nth-child(68) { left:90.3%; top:102.0%; width:7.7px; height:7.7px; --dx:-20px; --dy:87px; animation-delay:1.69s; animation-duration:2.98s; }
    .paillettes i:nth-child(68)::before { animation-duration:0.75s; animation-delay:0.31s; }
    .paillettes i:nth-child(69) { left:87.1%; top:100.6%; width:8.4px; height:8.4px; --dx:-5px; --dy:123px; animation-delay:1.77s; animation-duration:3.38s; }
    .paillettes i:nth-child(69)::before { animation-duration:0.82s; animation-delay:0.55s; }
    .paillettes i:nth-child(70) { left:83.9%; top:102.1%; width:7.9px; height:7.9px; --dx:17px; --dy:160px; animation-delay:1.93s; animation-duration:3.77s; }
    .paillettes i:nth-child(70)::before { animation-duration:0.52s; animation-delay:0.22s; }
    .paillettes i:nth-child(71) { left:80.6%; top:100.6%; width:5.0px; height:5.0px; --dx:-29px; --dy:160px; animation-delay:1.98s; animation-duration:4.18s; }
    .paillettes i:nth-child(71)::before { animation-duration:0.94s; animation-delay:0.03s; }
    .paillettes i:nth-child(72) { left:77.4%; top:102.3%; width:6.1px; height:6.1px; --dx:3px; --dy:110px; animation-delay:1.92s; animation-duration:3.34s; }
    .paillettes i:nth-child(72)::before { animation-duration:0.84s; animation-delay:0.06s; }
    .paillettes i:nth-child(73) { left:74.2%; top:102.6%; width:6.6px; height:6.6px; --dx:-104px; --dy:154px; animation-delay:1.93s; animation-duration:3.03s; }
    .paillettes i:nth-child(73)::before { animation-duration:0.66s; animation-delay:0.11s; }
    .paillettes i:nth-child(74) { left:71.0%; top:101.1%; width:8.7px; height:8.7px; --dx:-17px; --dy:100px; animation-delay:1.9s; animation-duration:2.84s; }
    .paillettes i:nth-child(74)::before { animation-duration:0.9s; animation-delay:0.19s; }
    .paillettes i:nth-child(75) { left:67.7%; top:101.2%; width:11.3px; height:11.3px; --dx:98px; --dy:190px; animation-delay:1.97s; animation-duration:3.48s; }
    .paillettes i:nth-child(75)::before { animation-duration:0.88s; animation-delay:0.23s; }
    .paillettes i:nth-child(76) { left:64.5%; top:102.2%; width:6.3px; height:6.3px; --dx:-7px; --dy:75px; animation-delay:2.16s; animation-duration:4.06s; }
    .paillettes i:nth-child(76)::before { animation-duration:0.77s; animation-delay:0.49s; }
    .paillettes i:nth-child(77) { left:61.3%; top:101.2%; width:11.8px; height:11.8px; --dx:102px; --dy:150px; animation-delay:2.09s; animation-duration:2.53s; }
    .paillettes i:nth-child(77)::before { animation-duration:0.93s; animation-delay:0.6s; }
    .paillettes i:nth-child(78) { left:58.1%; top:102.7%; width:11.8px; height:11.8px; --dx:61px; --dy:202px; animation-delay:2.27s; animation-duration:3.7s; }
    .paillettes i:nth-child(78)::before { animation-duration:0.51s; animation-delay:0.52s; }
    .paillettes i:nth-child(79) { left:54.8%; top:102.6%; width:6.2px; height:6.2px; --dx:-13px; --dy:171px; animation-delay:2.24s; animation-duration:2.46s; }
    .paillettes i:nth-child(79)::before { animation-duration:0.48s; animation-delay:0.06s; }
    .paillettes i:nth-child(80) { left:51.6%; top:103.0%; width:6.3px; height:6.3px; --dx:4px; --dy:143px; animation-delay:2.34s; animation-duration:4.01s; }
    .paillettes i:nth-child(80)::before { animation-duration:0.55s; animation-delay:0.54s; }
    .paillettes i:nth-child(81) { left:48.4%; top:102.2%; width:10.0px; height:10.0px; --dx:5px; --dy:121px; animation-delay:2.38s; animation-duration:3.52s; }
    .paillettes i:nth-child(81)::before { animation-duration:0.72s; animation-delay:0.41s; }
    .paillettes i:nth-child(82) { left:45.2%; top:100.9%; width:12.5px; height:12.5px; --dx:-24px; --dy:54px; animation-delay:2.37s; animation-duration:3.86s; }
    .paillettes i:nth-child(82)::before { animation-duration:0.59s; animation-delay:0.09s; }
    .paillettes i:nth-child(83) { left:41.9%; top:101.9%; width:10.6px; height:10.6px; --dx:-76px; --dy:90px; animation-delay:2.33s; animation-duration:3.37s; }
    .paillettes i:nth-child(83)::before { animation-duration:0.45s; animation-delay:0.01s; }
    .paillettes i:nth-child(84) { left:38.7%; top:101.8%; width:10.2px; height:10.2px; --dx:24px; --dy:71px; animation-delay:2.47s; animation-duration:3.67s; }
    .paillettes i:nth-child(84)::before { animation-duration:0.74s; animation-delay:0.1s; }
    .paillettes i:nth-child(85) { left:35.5%; top:102.6%; width:9.1px; height:9.1px; --dx:-70px; --dy:63px; animation-delay:2.47s; animation-duration:2.51s; }
    .paillettes i:nth-child(85)::before { animation-duration:0.61s; animation-delay:0.56s; }
    .paillettes i:nth-child(86) { left:32.3%; top:100.9%; width:7.2px; height:7.2px; --dx:12px; --dy:117px; animation-delay:2.42s; animation-duration:3.17s; }
    .paillettes i:nth-child(86)::before { animation-duration:0.8s; animation-delay:0.2s; }
    .paillettes i:nth-child(87) { left:29.0%; top:101.5%; width:5.8px; height:5.8px; --dx:-1px; --dy:84px; animation-delay:2.49s; animation-duration:3.09s; }
    .paillettes i:nth-child(87)::before { animation-duration:0.65s; animation-delay:0.04s; }
    .paillettes i:nth-child(88) { left:25.8%; top:101.1%; width:10.9px; height:10.9px; --dx:-46px; --dy:214px; animation-delay:2.56s; animation-duration:2.74s; }
    .paillettes i:nth-child(88)::before { animation-duration:0.42s; animation-delay:0.42s; }
    .paillettes i:nth-child(89) { left:22.6%; top:101.9%; width:9.4px; height:9.4px; --dx:86px; --dy:215px; animation-delay:2.63s; animation-duration:3.76s; }
    .paillettes i:nth-child(89)::before { animation-duration:0.72s; animation-delay:0.21s; }
    .paillettes i:nth-child(90) { left:19.4%; top:101.5%; width:10.9px; height:10.9px; --dx:12px; --dy:56px; animation-delay:2.58s; animation-duration:3.12s; }
    .paillettes i:nth-child(90)::before { animation-duration:0.72s; animation-delay:0.19s; }
    .paillettes i:nth-child(91) { left:16.1%; top:101.9%; width:11.1px; height:11.1px; --dx:29px; --dy:170px; animation-delay:2.65s; animation-duration:4.17s; }
    .paillettes i:nth-child(91)::before { animation-duration:0.48s; animation-delay:0.22s; }
    .paillettes i:nth-child(92) { left:12.9%; top:101.1%; width:9.0px; height:9.0px; --dx:4px; --dy:15px; animation-delay:2.65s; animation-duration:3.07s; }
    .paillettes i:nth-child(92)::before { animation-duration:0.73s; animation-delay:0.1s; }
    .paillettes i:nth-child(93) { left:9.7%; top:102.7%; width:10.5px; height:10.5px; --dx:-8px; --dy:46px; animation-delay:2.66s; animation-duration:4.09s; }
    .paillettes i:nth-child(93)::before { animation-duration:0.51s; animation-delay:0.34s; }
    .paillettes i:nth-child(94) { left:6.5%; top:102.3%; width:5.9px; height:5.9px; --dx:67px; --dy:158px; animation-delay:2.86s; animation-duration:3.36s; }
    .paillettes i:nth-child(94)::before { animation-duration:0.44s; animation-delay:0.44s; }
    .paillettes i:nth-child(95) { left:3.2%; top:102.3%; width:10.7px; height:10.7px; --dx:-6px; --dy:204px; animation-delay:2.74s; animation-duration:4.12s; }
    .paillettes i:nth-child(95)::before { animation-duration:0.76s; animation-delay:0.47s; }
    .paillettes i:nth-child(96) { left:0.0%; top:100.8%; width:7.1px; height:7.1px; --dx:64px; --dy:64px; animation-delay:2.92s; animation-duration:2.7s; }
    .paillettes i:nth-child(96)::before { animation-duration:0.53s; animation-delay:0.19s; }

    /* Bord gauche : la dernière volée, quand le plat achève sa course. */
    .paillettes i:nth-child(97) { left:-1.0%; top:0.0%; width:10.9px; height:10.9px; --dx:-203px; --dy:-36px; animation-delay:2.82s; animation-duration:2.61s; }
    .paillettes i:nth-child(97)::before { animation-duration:0.51s; animation-delay:0.49s; }
    .paillettes i:nth-child(98) { left:-0.6%; top:4.3%; width:9.9px; height:9.9px; --dx:-253px; --dy:14px; animation-delay:2.83s; animation-duration:2.82s; }
    .paillettes i:nth-child(98)::before { animation-duration:0.7s; animation-delay:0.12s; }
    .paillettes i:nth-child(99) { left:-1.0%; top:8.7%; width:7.1px; height:7.1px; --dx:-165px; --dy:-58px; animation-delay:2.7s; animation-duration:3.36s; }
    .paillettes i:nth-child(99)::before { animation-duration:0.46s; animation-delay:0.59s; }
    .paillettes i:nth-child(100) { left:-1.7%; top:13.0%; width:12.2px; height:12.2px; --dx:-115px; --dy:-10px; animation-delay:2.8s; animation-duration:3.1s; }
    .paillettes i:nth-child(100)::before { animation-duration:0.51s; animation-delay:0.32s; }
    .paillettes i:nth-child(101) { left:-0.4%; top:17.4%; width:4.8px; height:4.8px; --dx:-168px; --dy:-68px; animation-delay:2.8s; animation-duration:2.5s; }
    .paillettes i:nth-child(101)::before { animation-duration:0.52s; animation-delay:0.17s; }
    .paillettes i:nth-child(102) { left:-0.8%; top:21.7%; width:10.0px; height:10.0px; --dx:-290px; --dy:-31px; animation-delay:2.75s; animation-duration:3.63s; }
    .paillettes i:nth-child(102)::before { animation-duration:0.57s; animation-delay:0.06s; }
    .paillettes i:nth-child(103) { left:-1.5%; top:26.1%; width:9.7px; height:9.7px; --dx:-138px; --dy:-5px; animation-delay:2.87s; animation-duration:3.42s; }
    .paillettes i:nth-child(103)::before { animation-duration:0.69s; animation-delay:0.23s; }
    .paillettes i:nth-child(104) { left:-1.2%; top:30.4%; width:8.4px; height:8.4px; --dx:-176px; --dy:-88px; animation-delay:2.89s; animation-duration:3.98s; }
    .paillettes i:nth-child(104)::before { animation-duration:0.58s; animation-delay:0.3s; }
    .paillettes i:nth-child(105) { left:-1.8%; top:34.8%; width:10.1px; height:10.1px; --dx:-180px; --dy:-101px; animation-delay:2.87s; animation-duration:2.69s; }
    .paillettes i:nth-child(105)::before { animation-duration:0.56s; animation-delay:0.15s; }
    .paillettes i:nth-child(106) { left:-2.0%; top:39.1%; width:12.1px; height:12.1px; --dx:-284px; --dy:-64px; animation-delay:2.81s; animation-duration:4.09s; }
    .paillettes i:nth-child(106)::before { animation-duration:0.78s; animation-delay:0.39s; }
    .paillettes i:nth-child(107) { left:-1.8%; top:43.5%; width:9.7px; height:9.7px; --dx:-180px; --dy:-28px; animation-delay:2.74s; animation-duration:2.43s; }
    .paillettes i:nth-child(107)::before { animation-duration:0.48s; animation-delay:0.22s; }
    .paillettes i:nth-child(108) { left:-1.5%; top:47.8%; width:6.8px; height:6.8px; --dx:-183px; --dy:-53px; animation-delay:2.72s; animation-duration:3.02s; }
    .paillettes i:nth-child(108)::before { animation-duration:0.5s; animation-delay:0.22s; }
    .paillettes i:nth-child(109) { left:-0.5%; top:52.2%; width:11.3px; height:11.3px; --dx:-107px; --dy:-110px; animation-delay:2.79s; animation-duration:3.2s; }
    .paillettes i:nth-child(109)::before { animation-duration:0.42s; animation-delay:0.3s; }
    .paillettes i:nth-child(110) { left:-1.0%; top:56.5%; width:10.3px; height:10.3px; --dx:-236px; --dy:-21px; animation-delay:2.77s; animation-duration:3.21s; }
    .paillettes i:nth-child(110)::before { animation-duration:0.73s; animation-delay:0.02s; }
    .paillettes i:nth-child(111) { left:-2.3%; top:60.9%; width:5.0px; height:5.0px; --dx:-175px; --dy:-25px; animation-delay:2.88s; animation-duration:2.52s; }
    .paillettes i:nth-child(111)::before { animation-duration:0.75s; animation-delay:0.34s; }
    .paillettes i:nth-child(112) { left:-2.1%; top:65.2%; width:4.9px; height:4.9px; --dx:-183px; --dy:-50px; animation-delay:2.94s; animation-duration:3.93s; }
    .paillettes i:nth-child(112)::before { animation-duration:0.93s; animation-delay:0.2s; }
    .paillettes i:nth-child(113) { left:-1.6%; top:69.6%; width:7.1px; height:7.1px; --dx:-171px; --dy:-62px; animation-delay:2.78s; animation-duration:3.71s; }
    .paillettes i:nth-child(113)::before { animation-duration:0.8s; animation-delay:0.51s; }
    .paillettes i:nth-child(114) { left:-1.7%; top:73.9%; width:5.0px; height:5.0px; --dx:-190px; --dy:6px; animation-delay:2.94s; animation-duration:2.83s; }
    .paillettes i:nth-child(114)::before { animation-duration:0.77s; animation-delay:0.5s; }
    .paillettes i:nth-child(115) { left:-1.2%; top:78.3%; width:8.4px; height:8.4px; --dx:-154px; --dy:23px; animation-delay:2.92s; animation-duration:3.63s; }
    .paillettes i:nth-child(115)::before { animation-duration:0.83s; animation-delay:0.1s; }
    .paillettes i:nth-child(116) { left:-2.0%; top:82.6%; width:4.8px; height:4.8px; --dx:-79px; --dy:-68px; animation-delay:2.93s; animation-duration:4.17s; }
    .paillettes i:nth-child(116)::before { animation-duration:0.77s; animation-delay:0.3s; }
    .paillettes i:nth-child(117) { left:-2.2%; top:87.0%; width:11.9px; height:11.9px; --dx:-230px; --dy:-22px; animation-delay:2.97s; animation-duration:3.69s; }
    .paillettes i:nth-child(117)::before { animation-duration:0.91s; animation-delay:0.18s; }
    .paillettes i:nth-child(118) { left:-1.2%; top:91.3%; width:5.9px; height:5.9px; --dx:-164px; --dy:-140px; animation-delay:2.85s; animation-duration:3.86s; }
    .paillettes i:nth-child(118)::before { animation-duration:0.55s; animation-delay:0.42s; }
    .paillettes i:nth-child(119) { left:-2.1%; top:95.7%; width:12.5px; height:12.5px; --dx:-172px; --dy:-58px; animation-delay:2.84s; animation-duration:2.81s; }
    .paillettes i:nth-child(119)::before { animation-duration:0.82s; animation-delay:0.3s; }
    .paillettes i:nth-child(120) { left:-1.2%; top:100.0%; width:12.4px; height:12.4px; --dx:-121px; --dy:-16px; animation-delay:2.87s; animation-duration:2.66s; }
    .paillettes i:nth-child(120)::before { animation-duration:0.92s; animation-delay:0.24s; }

    /* La course d'un grain : il naît au ras de la tranche, se gonfle aussitôt,
     * puis s'éloigne en montant, ralentit et s'éteint. La légère dérive
     * latérale du milieu de course évite les trajectoires rectilignes, qui
     * trahissent la machine. */
    @keyframes poussiere-derive {
        0% {
            opacity  : 0;
            transform: translate(0, 0) scale(.3);
        }
        10% {
            opacity  : 1;
            transform: translate(calc(var(--dx) * .10), calc(var(--dy) * .10))
                       scale(1.2);
        }
        45% {
            opacity  : .95;
            transform: translate(calc(var(--dx) * .46 + 7px),
                                 calc(var(--dy) * .46))
                       scale(1);
        }
        78% {
            opacity  : .5;
            transform: translate(calc(var(--dx) * .80 - 5px),
                                 calc(var(--dy) * .80))
                       scale(.8);
        }
        100% {
            opacity  : 0;
            transform: translate(var(--dx), var(--dy)) scale(.45);
        }
    }

    /* Le battement : le grain passe de son plein éclat à une braise presque
     * éteinte, et revient. Chaque grain bat à son propre rythme, entre quatre
     * et neuf dixièmes de seconde, ce qui interdit à l'œil de percevoir une
     * pulsation commune. */
    @keyframes poussiere-scintillement {
        0%   { opacity: 1;   transform: scale(1); }
        100% { opacity: .22; transform: scale(.5); }
    }

    /* ── LES ANIMATIONS DU LIVRE ───────────────────────────────────────── */

    /* Toute la mécanique est accordée sur une seule horloge. Y toucher
     * partiellement la désaccorde : la page de gauche apparaîtrait avant que
     * le plat ne l'ait découverte, par exemple.
     *
     *   1,60 s  ouverture du plat et recentrage du volume   (1,15 s)
     *   1,58 s  premiers grains de poussière, la nuée jusqu'à 2,80 s
     *   2,175 s occultation du plat, à mi-course de la rotation
     *   1,95 s  contenu de la page de droite                (0,70 s)
     *   2,10 s  page de gauche                              (0,75 s)
     *   2,35 s  ombre de reliure                            (0,50 s)
     *   2,55 s  révélation du phylactère                    (1,10 s) */

    @keyframes plat-occultation {
        0%,  49.9% { visibility: visible; }
        50%, 100%  { visibility: hidden;  }
    }

    @keyframes livre-recentrage    { to { transform: translateX(0); } }
    @keyframes reliure-apparition  { to { opacity: 1; } }
    @keyframes page-apparition     { to { opacity: 1; } }
    @keyframes contenu-apparition  { to { opacity: 1; } }

    @keyframes livre-ouverture {
        from { transform: translateZ(1px) rotateY(0deg);    }
        to   { transform: translateZ(1px) rotateY(-180deg); }
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ : PRÉFÉRENCE « RÉDUIRE LES ANIMATIONS »
   ══════════════════════════════════════════════════════════════════════════
   Norme d'accessibilité documentée par le W3C (Web Content Accessibility
   Guidelines) : certains visiteurs désactivent les animations pour des
   raisons de confort visuel ou de troubles vestibulaires. Le livre s'affiche
   alors directement ouvert, sans mouvement ni délai, les paillettes ne
   paraissent pas, et la flamme cesse de vaciller. La table et la bougie
   demeurent : ce sont des décors immobiles, non des animations. */

@media (prefers-reduced-motion: reduce) {

    .livre,
    .livre::after,
    .livre-page-gauche,
    .page-contenu {
        opacity  : 1;
        animation: none;
        transform: none;
    }

    .phylactere {
        animation        : none;
        -webkit-clip-path: inset(0 0% 0 0%);
        clip-path        : inset(0 0% 0 0%);
    }

    .paillettes { display: none; }

    .chandelle-flamme,
    .chandelle-halo { animation: none; }

    /* Le repli garde sa fonction, il perd son mouvement : le texte paraît
     * d'un coup, le chevron pivote sans transition. Le visiteur qui demande
     * une animation réduite demande à ne pas voir bouger la page, non à se
     * passer du bouton. */
    .repli-corps,
    .repli-bouton::after { transition: none; }
}

/* Même condition que le livre lui-même, afin que la couverture ne soit
 * retournée que dans les cas où le livre existe réellement. */
@media (min-width: 881px) and (min-height: 600px) and (prefers-reduced-motion: reduce) {
    .livre-couverture {
        transform: translateZ(1px) rotateY(-180deg);
        animation: none;
    }

    /* Le livre étant présenté d'emblée ouvert, le plat n'a jamais à paraître :
     * on le retire aussitôt, sans attendre l'animation qui, ici, n'existe pas. */
    .couverture-plat {
        visibility: hidden;
        animation : none;
    }

    /* Les deux boutons conservent leur changement de couleur au survol, mais
     * renoncent au léger soulèvement : tout déplacement est proscrit lorsque
     * le visiteur a demandé une animation réduite. */
    .btn-entrer,
    .btn-entrer:hover,
    .btn-presentation,
    .btn-presentation:hover { transform: none; }
}