/* ==================================================================== */
/* La frise murale : le temps de gauche à droite                         */
/*                                                                       */
/* La vue publique en paysage (« ?orientation=paysage ») et le chat       */
/* constructeur la montrent, à partir du même gabarit                     */
/* (frise/_frise_murale.html.twig). La règle @page qui couche la feuille  */
/* à l'impression est à part, dans frise-public-paysage-page.css : elle   */
/* porte sur le document entier, et seule la vue publique la charge.      */
/*                                                                       */
/* Toutes les règles sont préfixées par « .frise-paysage ». Ce préfixe    */
/* leur donne une classe de plus qu'aux règles verticales qu'elles        */
/* recouvrent : l'ordre de chargement n'a donc aucune importance, et      */
/* seuls les !important déjà posés ailleurs demandent un traitement.      */
/* Il se pose sur le corps de la page publique, ou sur le seul bloc qui   */
/* contient la frise.                                                     */
/* ==================================================================== */

.frise-paysage {
    /* Combien de périodes se recouvrent au plus, sur cette frise : le
       gabarit le pose sur la frise, plafonné à six. Sans lui — frise sans
       période — une seule épaisseur suffit. */
    --fp-nb-rubans: 1;

    /* L'échelle de toute la frise : ses millimètres et ses points passent
       par ces deux unités. À 1, la frise est au format de la feuille ; le
       chat constructeur l’ajuste (.frise-paysage--integree) sans
       qu'aucune règle ne soit réécrite pour lui. */
    --fp-echelle: 1;
    --fp-mm: calc(1mm * var(--fp-echelle));
    --fp-pt: calc(1pt * var(--fp-echelle));

    /* L'écart entre l'axe et les cartes, de part et d'autre : la tige de
       liaison le franchit, et les rubans de période s'y logent en
       dessous. Il se mesure donc au nombre de rubans à loger, plutôt que
       de réserver à toutes les frises le creux de la plus imbriquée. Les
       deux côtés le partagent, pour que les cartes du bas rejoignent le
       trait comme celles du haut. */
    --fp-bande-periodes: calc(5 * var(--fp-mm) + var(--fp-nb-rubans) * 2 * var(--fp-mm));

    /* Zone utile d'une A4 couchée, marges déduites : 281 × 192 mm.
       Cinq colonnes par rangée, deux rangées par page, soit dix
       événements par feuille. Passer à une frise dense ne demande que
       de descendre --fp-h-rangee à 62mm et --fp-h-images à 8mm. */
    --fp-largeur-col: calc(55.4 * var(--fp-mm));  /* 5 colonnes dans les 281 mm utiles d'une A4 couchée */

    /* La carte se mesure à ce qu'elle porte, et la bande s'en déduit.
       Décocher un réglage remet la part correspondante à zéro : les
       cartes raccourcissent, les bandes aussi, et il tient davantage de
       frise sur une feuille. C'est le même calcul à l'écran et au
       papier, donc l'aperçu ne ment pas. */
    --fp-h-badge: calc(3.8 * var(--fp-mm));       /* la date précise */
    --fp-h-titre: calc(7 * var(--fp-mm));         /* deux lignes */
    --fp-h-desc: calc(40 * var(--fp-mm));         /* douze lignes : la plus longue description y tient */
    --fp-h-themes: calc(4 * var(--fp-mm));        /* les étiquettes */
    --fp-h-images: calc(16 * var(--fp-mm));       /* les vignettes méritent d'être vues de loin */

    --fp-h-carte: calc(2.5 * var(--fp-mm) + var(--fp-h-badge) + var(--fp-h-titre)
                       + var(--fp-h-desc) + var(--fp-h-themes)
                       + var(--fp-h-images) + 1 * var(--fp-mm));

    /* La place réservée de part et d'autre du trait. Ces deux valeurs
       sont un plafond, calculé pour la plus longue description
       imaginable ; une fois la page affichée, un script les ramène à ce
       que la frise demande vraiment, séparément pour le dessus et le
       dessous. Sans script — ou s'il échoue — le plafond tient, et la
       frise s'imprime correctement, seulement plus aérée. */
    --fp-h-haut: var(--fp-h-carte);
    --fp-h-bas: var(--fp-h-carte);

    --fp-h-rangee: calc(var(--fp-h-haut) + var(--fp-h-bas) + 2 * var(--fp-bande-periodes));
    --fp-axe: calc(var(--fp-h-haut) + var(--fp-bande-periodes));
    /* L'air entre deux bandes. Deux bandes et leurs deux respirations
       tiennent dans les 192 mm utiles d'une A4 couchée. */
    --fp-espace-bande: calc(6 * var(--fp-mm));
    /* L'ombre d'un bord de défilement, accrochée au bord : partagée par la frise
       horizontale et la réserve des volants d'une frise à trous. */
    --fp-ombre-bord: rgba(15, 23, 42, 0.18) 0%, rgba(15, 23, 42, 0.07) 42%, rgba(15, 23, 42, 0) 72%;
    --fp-bleu: #0271E8;
    --fp-bleu-fonce: #0056b3;
}

/* ==================================================================== */
/* La mise en page elle-même                                             */
/*                                                                       */
/* À l'écran comme au papier, et au même format : les hauteurs étant en   */
/* millimètres, l'aperçu est au 1:1 avec la feuille. Ce que l'on voit     */
/* avant d'imprimer est ce qui sortira.                                   */
/*                                                                       */
/* Sous 1100 px — téléphones, tablettes en portrait — rien de tout ceci   */
/* ne s'applique et la frise verticale reprend la main, avec ses propres  */
/* points de rupture. Une carte de 52 mm n'a rien à faire sur un          */
/* téléphone.                                                             */
/* ==================================================================== */

@media screen, print {

    /* ---------------------------------------------------------------- */
    /* Le conteneur                                                      */
    /* ---------------------------------------------------------------- */

    /* Le corps de page est une boîte flexible pour tout le site. Un
       enfant d'une telle boîte se réduit à son contenu, et ce contenu
       est ici fait de colonnes dont la largeur s'exprime en pourcentage
       de leur conteneur : chacun attend la mesure de l'autre, et la
       frise se retrouve écrasée sur un cinquième de la page. Le bloc
       ordinaire lève l'ambiguïté, et il rend au passage la pagination
       plus sûre — fragmenter une boîte flexible entre deux feuilles est
       le genre de chose que les moteurs font mal. */
    body.frise-paysage {
        display: block;
        min-height: 0;
    }

    .frise-paysage .timeline-wrapper {
        max-width: calc(281 * var(--fp-mm));
        padding: 0;
    }

    /* Les cartes et les étiquettes reprennent le repli du texte, que la
       ligne unique de l'écran leur retire par héritage. */
    .frise-paysage .timeline-content,
    .frise-paysage .timeline-period,
    .frise-paysage .timeline-date {
        white-space: normal;
    }

    /* font-size: 0 supprime les espaces que le HTML laisse entre deux
       blocs en ligne, et qui se transformeraient en gouttières. Toute
       taille exprimée en « em » sous ce nœud tomberait donc à zéro : les
       descendants se règlent en pt ou en rem. */
    .frise-paysage .timeline {
        /* Le gabarit pose le nombre de rubans (--fp-nb-rubans) sur la frise
           elle-même, et le script y pose la place mesurée (--fp-h-haut,
           --fp-h-bas). Les hauteurs qui en dérivent doivent donc se calculer
           ici : déclarées seulement sur l'ancêtre, elles y seraient résolues
           avec les valeurs par défaut, et ni le nombre de rubans ni la
           mesure n'auraient d'effet. */
        --fp-bande-periodes: calc(5 * var(--fp-mm) + var(--fp-nb-rubans) * 2 * var(--fp-mm));
        --fp-h-rangee: calc(var(--fp-h-haut) + var(--fp-h-bas) + 2 * var(--fp-bande-periodes));
        --fp-axe: calc(var(--fp-h-haut) + var(--fp-bande-periodes));
        display: block;
        font-size: 0;
        padding: 0;
        margin: 0;
        max-width: none;
        /* Une bande est une ligne de texte : c'est sa hauteur de ligne
           qui les espace, et non une marge — les marges verticales d'un
           bloc en ligne ne comptent pas dans la hauteur de la ligne. */
        line-height: calc(var(--fp-h-rangee) + var(--fp-espace-bande));
    }

    /* L'axe vertical de la frise en colonne n'a plus d'objet : chaque
       événement porte désormais son propre segment d'axe horizontal. */
    .frise-paysage .timeline::before {
        display: none;
    }

    /* ---------------------------------------------------------------- */
    /* Les événements                                                    */
    /*                                                                   */
    /* En blocs en ligne, et non en boîtes flexibles : une rangée est     */
    /* alors une ligne de texte ordinaire, et une ligne n'est jamais      */
    /* coupée par un saut de page. C'est le mécanisme par lequel les      */
    /* navigateurs paginent depuis toujours, donc le mieux éprouvé. Une   */
    /* rangée flexible, elle, n'existe pas dans le document : on ne peut  */
    /* ni la désigner, ni lui interdire d'être coupée.                    */
    /* ---------------------------------------------------------------- */

    .frise-paysage .timeline-item {
        display: inline-block;
        vertical-align: top;
        width: var(--fp-largeur-col);
        height: var(--fp-h-rangee);
        position: relative;
        margin: 0;
        padding: 0;
        text-align: left;
        font-size: calc(9 * var(--fp-pt));
        /* La hauteur de ligne du conteneur espace les bandes ; héritée
           telle quelle, elle chasserait le texte hors des cartes. Elle
           s'arrête donc au seuil de l'événement. */
        line-height: normal;
        z-index: 1;
        /* Les cartes paraissent en fondu à l'écran ; à l'impression, le
           moteur peut figer l'état initial et sortir une page blanche. */
        opacity: 1 !important;
        animation: none !important;
        /* Les rubans de période, courant sous l'axe. Chaque événement en
           porte son tronçon ; comme ses voisins d'une même période
           portent la même teinte au même niveau, le ruban paraît
           continu. Il y en a trois parce que des périodes se recouvrent
           — une grande et celles qu'elle contient —, et qu'une frise
           doit pouvoir le montrer plutôt que d'en choisir une. Les
           variables absentes ne dessinent rien. */
        background-image:
            linear-gradient(var(--periode-couleur-1, transparent), var(--periode-couleur-1, transparent)),
            linear-gradient(var(--periode-couleur-2, transparent), var(--periode-couleur-2, transparent)),
            linear-gradient(var(--periode-couleur-3, transparent), var(--periode-couleur-3, transparent)),
            linear-gradient(var(--periode-couleur-4, transparent), var(--periode-couleur-4, transparent)),
            linear-gradient(var(--periode-couleur-5, transparent), var(--periode-couleur-5, transparent)),
            linear-gradient(var(--periode-couleur-6, transparent), var(--periode-couleur-6, transparent));
        background-size:
            100% calc(1.7 * var(--fp-mm)), 100% calc(1.7 * var(--fp-mm)), 100% calc(1.7 * var(--fp-mm)),
            100% calc(1.7 * var(--fp-mm)), 100% calc(1.7 * var(--fp-mm)), 100% calc(1.7 * var(--fp-mm));
        background-position:
            0 calc(var(--fp-axe) + 0.6 * var(--fp-mm)),
            0 calc(var(--fp-axe) + 2.6 * var(--fp-mm)),
            0 calc(var(--fp-axe) + 4.6 * var(--fp-mm)),
            0 calc(var(--fp-axe) + 6.6 * var(--fp-mm)),
            0 calc(var(--fp-axe) + 8.6 * var(--fp-mm)),
            0 calc(var(--fp-axe) + 10.6 * var(--fp-mm));
        background-repeat: no-repeat;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Les deux variantes verticales posent chacune un retrait de la
       moitié de la page : à reprendre l'une et l'autre. */
    .frise-paysage .timeline-item.timeline-left,
    .frise-paysage .timeline-item.timeline-right {
        padding-left: 0;
        padding-right: 0;
        text-align: left;
    }

    /* Le segment d'axe. Il déborde d'un pixel de chaque côté pour
       qu'aucune couture ne paraisse entre deux colonnes voisines, et il
       s'interrompt de lui-même en fin de rangée. */
    .frise-paysage .timeline-item::before {
        content: '';
        position: absolute;
        left: -1px;
        right: -1px;
        top: calc(var(--fp-axe) - 0.4 * var(--fp-mm));
        height: calc(0.8 * var(--fp-mm));
        background: linear-gradient(90deg, var(--fp-bleu) 0%, var(--fp-bleu-fonce) 100%);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        z-index: 0;
    }

    /* Une graduation par événement : l'axe reste jalonné même là où le
       gabarit efface la pastille d'année, quand elle répète la
       précédente. */
    .frise-paysage .timeline-item::after {
        content: '';
        position: absolute;
        left: 50%;
        margin-left: -1mm;
        top: calc(var(--fp-axe) - 1 * var(--fp-mm));
        width: calc(2 * var(--fp-mm));
        height: calc(2 * var(--fp-mm));
        border-radius: 50%;
        background: var(--fp-bleu-fonce);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        z-index: 1;
    }

    /* ---------------------------------------------------------------- */
    /* La carte                                                          */
    /* ---------------------------------------------------------------- */

    /* Chaque carte s'accroche au trait et pousse vers l'extérieur, de la
       hauteur que son texte demande. Ce qui est commun à une bande, c'est
       la place qu'elle réserve — pas la taille des cartes : une phrase
       courte ne traîne plus un cadre à moitié vide derrière elle. */
    .frise-paysage .timeline-content {
        position: absolute;
        left: calc(1.5 * var(--fp-mm));
        right: calc(1.5 * var(--fp-mm));
        height: auto;
        /* Le retrait par période active, en pixels, n'a pas de sens dans
           une colonne de 52 mm. */
        margin: 0 !important;
        /* Le millimètre en plus sépare les étiquettes de thème de la
           bande d'images, qui est posée au ras du bord bas. */
        padding: calc(2.5 * var(--fp-mm)) calc(2.5 * var(--fp-mm)) calc(var(--fp-h-images) + 1 * var(--fp-mm));
        border-radius: calc(2 * var(--fp-mm));
        border: none;
        background: #fff;
        box-shadow: 0 0 0 calc(0.3 * var(--fp-mm)) rgba(0, 0, 0, 0.10);
        /* Coûteux, et rendu en gris uni par certains moteurs d'impression. */
        backdrop-filter: none;
        transition: none;
        overflow: hidden;
        z-index: 2;
    }

    /* Au-dessus du trait : la carte est calée par son bas et grandit vers
       le haut. */
    .frise-paysage .timeline-item.timeline-left .timeline-content {
        top: auto;
        bottom: calc(var(--fp-h-rangee) - var(--fp-axe) + var(--fp-bande-periodes));
        max-height: calc(var(--fp-axe) - var(--fp-bande-periodes));
    }

    /* En dessous : calée par son haut, elle grandit vers le bas. */
    .frise-paysage .timeline-item.timeline-right .timeline-content {
        top: calc(var(--fp-axe) + var(--fp-bande-periodes));
        bottom: auto;
        max-height: calc(var(--fp-h-rangee) - var(--fp-axe) - var(--fp-bande-periodes));
    }

    .frise-paysage .timeline-content.main {
        padding-top: calc(2.5 * var(--fp-mm));
    }

    /* ---------------------------------------------------------------- */
    /* La pastille d'année                                               */
    /*                                                                   */
    /* Une pilule de largeur libre, et non le cercle de 80 px : « 3000    */
    /* av. J.-C. » s'y écrit sur deux lignes. Les deux variantes          */
    /* verticales calent chacune un côté différent, il faut donc remettre */
    /* les deux à zéro, sans quoi la pastille se colle à un bord.         */
    /* ---------------------------------------------------------------- */

    .frise-paysage .timeline-item.timeline-left .timeline-date,
    .frise-paysage .timeline-item.timeline-right .timeline-date {
        position: absolute;
        left: 50%;
        right: auto;
        /* Centrée sur le trait par sa propre moitié : sa hauteur suit son
           texte, et « 60 av. J.-C. » tient sur deux lignes sans être à
           l'étroit. */
        top: var(--fp-axe);
        transform: translate(-50%, -50%);
        width: auto;
        min-width: calc(16 * var(--fp-mm));
        height: auto;
        min-height: calc(6.5 * var(--fp-mm));
        padding: calc(1.1 * var(--fp-mm)) calc(3 * var(--fp-mm));
        border-radius: calc(4 * var(--fp-mm));
        border-width: calc(0.4 * var(--fp-mm));
        font-size: calc(7 * var(--fp-pt));
        line-height: 1.25;
        box-shadow: none;
        backdrop-filter: none;
        transition: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        z-index: 10;
    }

    /* Le gabarit y écrit l'année puis « av. J.-C. » sur une seconde ligne. */
    .frise-paysage .timeline-item.bc-event .timeline-date {
        font-size: calc(5.5 * var(--fp-pt));
    }

    /* La tige qui relie la pastille à sa carte. */
    .frise-paysage .timeline-date::after {
        content: '';
        position: absolute;
        left: 50%;
        margin-left: -0.3mm;
        width: calc(0.6 * var(--fp-mm));
        background: var(--fp-bleu-fonce);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .frise-paysage .timeline-left .timeline-date::after {
        top: auto;
        bottom: 100%;
        height: calc(3 * var(--fp-mm));
    }

    .frise-paysage .timeline-right .timeline-date::after {
        top: 100%;
        height: calc(var(--fp-bande-periodes) - 3.5 * var(--fp-mm));
    }

    /* ---------------------------------------------------------------- */
    /* Le texte de la carte                                              */
    /*                                                                   */
    /* Budget vertical des 36 mm : 2,5 de marge, 7 de titre, 9,8 de       */
    /* description, 4 d'étiquettes, 11 d'images. Chaque troncature est    */
    /* doublée d'une hauteur maximale : si le navigateur ignore le        */
    /* nombre de lignes, le débordement reste caché.                      */
    /* ---------------------------------------------------------------- */

    .frise-paysage .timeline-content h3.timeline-event-title {
        font-size: calc(8.5 * var(--fp-pt));
        line-height: 1.15;
        margin: 0 0 calc(0.6 * var(--fp-mm));
        max-height: var(--fp-h-titre);
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .frise-paysage .event-description-container {
        max-height: var(--fp-h-desc);
        overflow: hidden;
    }

    .frise-paysage .timeline-content p.event-description {
        font-size: calc(7 * var(--fp-pt));
        line-height: 1.3;
        margin: 0;
        color: #3F3F3F;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 12;
    }

    /* La date précise reprend sa place dans le flux, au-dessus du titre.
       Posée en coin comme sur la frise en colonne, elle recouvrait la
       première ligne du titre, et une carte de 52 mm n'a pas la largeur
       pour loger les deux côte à côte. */
    .frise-paysage .timeline-date-badge,
    .frise-paysage .timeline-item.timeline-left .timeline-date-badge,
    .frise-paysage .timeline-item.timeline-right .timeline-date-badge {
        position: static;
        display: inline-block;
        top: auto;
        right: auto;
        left: auto;
        margin: 0 0 calc(0.8 * var(--fp-mm));
        font-size: calc(6 * var(--fp-pt));
        padding: calc(0.3 * var(--fp-mm)) calc(1 * var(--fp-mm));
        border-radius: calc(1 * var(--fp-mm));
        box-shadow: none;
        backdrop-filter: none;
    }

    /* Une date sans jour ni mois ne dit que l'année — celle-là même que
       porte la pastille sur l'axe, juste au-dessus. Ici seulement, où
       chaque millimètre de carte est compté, le badge s'efface quand il
       n'ajoute rien. La frise en colonne, elle, a la place de le garder. */
    .frise-paysage .timeline-item .timeline-date-badge.date-annee-seule,
    .frise-paysage .timeline-item.timeline-left .timeline-date-badge.date-annee-seule,
    .frise-paysage .timeline-item.timeline-right .timeline-date-badge.date-annee-seule {
        display: none;
    }

    .frise-paysage .timeline-content .badge {
        font-size: calc(5.5 * var(--fp-pt));
        padding: calc(0.3 * var(--fp-mm)) calc(1 * var(--fp-mm));
        border-radius: calc(1 * var(--fp-mm));
        margin: 0 calc(0.8 * var(--fp-mm)) 0 0;
    }

    .frise-paysage .timeline-content .mt-2 {
        margin-top: calc(0.8 * var(--fp-mm)) !important;
    }

    /* ---------------------------------------------------------------- */
    /* Les images                                                        */
    /*                                                                   */
    /* On les garde : c'est ce qui fait la valeur d'une frise affichée au */
    /* mur, et le serveur les pose déjà dans la page pour cette vue, donc */
    /* elles ne dépendent d'aucun script pour s'imprimer. Deux fois plus  */
    /* hautes qu'un bandeau : à trois mètres d'un mur, une vignette de    */
    /* huit millimètres ne montre rien.                                   */
    /*                                                                   */
    /* Leur nombre ne se règle pas ici : « frise-public-print.css » les   */
    /* impose toutes en « display: block !important », et une règle de    */
    /* plus ne ferait que s'y casser les dents. À cette hauteur, trois    */
    /* vignettes carrées se lisent de toute façon mieux que deux longues. */
    /* ---------------------------------------------------------------- */

    .frise-paysage .event-images,
    .frise-paysage .event-images .flex-container {
        height: var(--fp-h-images);
    }

    /* Un événement sans vignette ne garde pas la bande vide qui leur est
       réservée. Le gabarit pose le conteneur dans tous les cas — c'est la
       vignette elle-même qu'il faut chercher —, et « :has » suit le DOM :
       si le chargement différé en ramène une plus tard, la place revient
       d'elle-même. */
    .frise-paysage .timeline-content:not(:has(.event-image)) {
        padding-bottom: calc(2.5 * var(--fp-mm));
    }

    /* Réduite à un pixel invisible, et non retirée : le chargement différé attend
       que ce bloc arrive à l'écran pour aller chercher les vignettes. Masqué en
       « display: none », il n'y arrivait jamais, et une carte sans vignette en cache
       restait sans vignette. */
    .frise-paysage .timeline-content:not(:has(.event-image)) .event-images,
    .frise-paysage .timeline-content:not(:has(.event-image)) .event-images .flex-container {
        height: 1px;
        min-height: 0;
        overflow: hidden;
        visibility: hidden;
    }

    .frise-paysage .event-images .flex-container {
        border-radius: 0 0 calc(2 * var(--fp-mm)) calc(2 * var(--fp-mm));
    }

    .frise-paysage .event-images .event-image {
        height: var(--fp-h-images);
    }

    /* ---------------------------------------------------------------- */
    /* Les périodes                                                      */
    /*                                                                   */
    /* Un bandeau qui ouvre une rangée. Rien à forcer : c'est un bloc au  */
    /* milieu d'un flux en ligne, il ferme donc la rangée en cours et en  */
    /* ouvre une nouvelle. Le lecteur voit « Antiquité », puis les        */
    /* événements de l'Antiquité en ligne.                                */
    /* ---------------------------------------------------------------- */

    /* Le nom de la période, posé sous son ruban à l'endroit où elle
       commence. L'étiquette n'a plus ni fond ni cadre — le ruban porte
       la couleur — mais elle garde une largeur, sans quoi son texte
       déborderait hors de la feuille chaque fois qu'une période
       s'ouvre en fin de bande. */
    .frise-paysage .timeline-period {
        display: inline-block;
        vertical-align: top;
        position: relative;
        line-height: normal;
        width: calc(28 * var(--fp-mm));
        height: var(--fp-h-rangee);
        margin: 0 !important;
        padding: 0;
        border: none !important;
        border-radius: 0;
        background: none !important;
        overflow: hidden;
        z-index: 3;
    }

    .frise-paysage .timeline-period .periode-content {
        /* Le cartouche se pose sur le ruban qui lui revient : un cran
           plus bas par niveau d'imbrication, comme les rubans eux-mêmes.
           Le décalage négatif centre la pastille sur le trait plutôt que
           de l'y accrocher par le haut. */
        /* Le cartouche suit le ruban de son niveau, et s'arrête au dernier
           que l'on sait dessiner : sans ce plafond, une septième période
           imbriquée irait poser son nom au travers des cartes du bas. */
        padding: calc(var(--fp-axe) - 0.6 * var(--fp-mm) + min(var(--periode-niveau, 0), 5) * 2.0 * var(--fp-mm)) calc(2 * var(--fp-mm)) 0 calc(1 * var(--fp-mm));
    }

    /* Le cartouche du nom, repris de la frise en colonne : fond pâle de
       la couleur de la période, filet plein à gauche, texte dans cette
       même couleur. Le gabarit pose « color » sur le titre — currentColor
       en tire les deux autres teintes, sans rien demander de plus au
       gabarit. */
    .frise-paysage .periode-content h2.periode-title,
    .frise-paysage .periode-content p.periode-title {
        display: inline-block;
        font-size: calc(7 * var(--fp-pt));
        font-weight: 600;
        line-height: 1.15;
        margin: 0;
        padding: calc(0.8 * var(--fp-mm)) calc(1.5 * var(--fp-mm));
        background: color-mix(in srgb, currentColor 15%, #fff);
        border-left: calc(1.2 * var(--fp-mm)) solid currentColor;
        border-radius: calc(1 * var(--fp-mm));
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Le ruban dit déjà où la période commence et où elle finit : ses
       dates et sa description n'ont plus à le répéter. */
    .frise-paysage .periode-dates,
    .frise-paysage .periode-description,
    .frise-paysage .timeline-period .periode-overlay {
        display: none;
    }

    /* Les barres verticales qui signalent les périodes actives tiennent
       toute leur lisibilité du sens de lecture de haut en bas. Couchées,
       elles tomberaient en travers des cartes. */
    .frise-paysage .periode-line,
    .frise-paysage .periode-line-in-event,
    .frise-paysage .periode-line-in-period,
    .frise-paysage .periode-tooltip-content {
        display: none !important;
    }

    /* ---------------------------------------------------------------- */
    /* La frise sans événement                                           */
    /*                                                                   */
    /* La frise est écrite en corps nul (voir plus haut) : sans taille    */
    /* propre, le message d'une frise vide ne se lirait pas.              */
    /* ---------------------------------------------------------------- */

    .frise-paysage .timeline .empty-state {
        font-size: calc(9 * var(--fp-pt));
        line-height: 1.4;
        white-space: normal;
        padding: calc(8 * var(--fp-mm)) calc(4 * var(--fp-mm));
        border: 0;
        box-shadow: none;
        background: none;
    }

    .frise-paysage .timeline .empty-state i {
        font-size: calc(18 * var(--fp-pt));
        margin-bottom: calc(2 * var(--fp-mm));
    }

    .frise-paysage .timeline .empty-state h3 {
        font-size: calc(11 * var(--fp-pt));
        margin-bottom: calc(1 * var(--fp-mm));
    }

    /* Le paragraphe garde la largeur bornée de layout.css : sans marges latérales
       automatiques, il se calerait à gauche sous un titre centré. */
    .frise-paysage .timeline .empty-state p {
        margin: 0 auto;
    }

    /* ---------------------------------------------------------------- */
    /* Ce qui n'a pas sa place sur une frise murale                       */
    /* ---------------------------------------------------------------- */

    .frise-paysage .wikipedia-section,
    .frise-paysage .wiki-button-container,
    .frise-paysage .wiki-shimmer,
    .frise-paysage .shimmer-wiki-button,
    .frise-paysage .images-shimmer,
    .frise-paysage .add-event-button {
        display: none !important;
    }
}

/* ==================================================================== */
/* L'impression                                                          */
/* ==================================================================== */

@media print {

    /* Le titre porte en style propre le dégradé de ses thèmes, découpé sur
       le texte, avec une couleur de remplissage transparente — le même qu'à
       l'écran sur /frise (event_title_gradient_style). Les fonds n'étant pas
       imprimés par défaut, le dégradé disparaîtrait et le titre sortirait
       blanc sur blanc. À l'impression seulement, on annule donc le
       découpage — il faut !important pour reprendre la main sur un style
       posé sur l'élément —, et la couleur du premier thème, déclarée juste
       après dans le même style, reprend sa place. À l'écran, le dégradé
       reste : un événement à plusieurs thèmes les montre tous. */
    .frise-paysage .timeline-event-title span,
    .fa-carte-titre span {
        background: none !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        -webkit-text-fill-color: currentColor !important;
    }

    body.frise-paysage {
        background: #fff;
    }

    /* Deux étiquettes de thème au plus sur le papier : la troisième déborderait
       de la place comptée au millimètre. À l'écran, toutes s'affichent, et la
       carte prend la hauteur qu'il lui faut. */
    .frise-paysage .timeline-content .mt-2 .badge:nth-child(n+3) {
        display: none;
    }

    /* Sans cela, le moteur repousse une rangée entière pour en garder
       deux ensemble et laisse un tiers de feuille blanc. */
    .frise-paysage .timeline {
        orphans: 1;
        widows: 1;
    }

    /* La rangée est déjà protégée par sa nature de ligne ; ces règles ne
       coûtent rien et couvrent le cas où un moteur en déciderait
       autrement. */
    .frise-paysage .timeline-item,
    .frise-paysage .timeline-content {
        break-inside: avoid;
    }

    /* L'étiquette de période voyage avec sa rangée : elle n'a plus rien
       à commander sur les sauts de page depuis qu'elle est dans le fil. */
    .frise-paysage .timeline-period {
        break-inside: avoid;
    }

    /* Un en-tête de la hauteur d'un titre : à 30 mm, il coûtait la
       seconde bande de la première feuille. Le titre suffit, les
       compteurs sont une information d'écran. */
    .frise-paysage .public-header {
        padding: 0 0 calc(2 * var(--fp-mm)) !important;
        margin-bottom: calc(3 * var(--fp-mm)) !important;
        break-inside: avoid;
        break-after: avoid-page;
    }

    .frise-paysage .public-header h1 {
        font-size: calc(12 * var(--fp-pt)) !important;
        margin: 0;
    }

    .frise-paysage .public-header p,
    .frise-paysage .public-header .stats-info {
        display: none;
    }

    .frise-paysage .footer,
    .frise-paysage .modal,
    .frise-paysage [data-controller="modal"] {
        display: none !important;
    }
}

/* ==================================================================== */
/* Ce que l'on choisit de montrer                                        */
/*                                                                       */
/* Chaque réglage retire à la fois l'élément et la place qu'il occupait   */
/* dans le calcul de la carte : une frise sans images n'a pas de bande    */
/* vide en bas de ses cartes, elle a des cartes plus courtes et des       */
/* bandes plus denses.                                                   */
/* ==================================================================== */

/* Ce que chaque réglage retire de la hauteur des cartes. Le masquage lui-même
   vaut pour les deux mises en page : il est posé dans la feuille commune. */
.frise-paysage.fp-sans-dates { --fp-h-badge: 0mm; }
.frise-paysage.fp-sans-descriptions { --fp-h-desc: 0mm; }
.frise-paysage.fp-sans-themes { --fp-h-themes: 0mm; }
.frise-paysage.fp-sans-images { --fp-h-images: 0mm; }

/* ==================================================================== */
/* L'écran : la frise d'un seul tenant                                   */
/*                                                                       */
/* Le temps ne s'y interrompt jamais : une seule ligne, que l'on fait     */
/* défiler du doigt ou à la molette, comme on longerait une frise         */
/* affichée dans un couloir. C'est le papier, et lui seul, qui impose de  */
/* la couper — une feuille a une largeur finie, et aucun navigateur ne    */
/* sait paginer vers la droite.                                          */
/* ==================================================================== */

@media screen {
    /* La frise court jusqu'aux deux bords : une ligne qui s'arrête avant
       la marge a l'air finie, alors qu'elle continue. */
    .frise-paysage .timeline-wrapper {
        position: relative;
        max-width: none;
        padding: 0;
    }

    /* Chaque bord porte son ombre sur la frise : de quoi dire, sans
       l'écrire, qu'il en reste au-delà. Les voiles sont posés sur le
       cadre fixe, et non sur ce qui défile, pour ne pas partir avec lui.
       Une ellipse accrochée au bord, et non un bandeau : un dégradé droit
       se coupe net en haut et en bas, et cette arête se voit plus que
       l'ombre qu'elle porte. */
    .frise-paysage .timeline-wrapper::before,
    .frise-paysage .timeline-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 3.5rem;
        pointer-events: none;
        z-index: 5;
        transition: opacity 0.25s ease;
    }

    .frise-paysage .timeline-wrapper::before {
        left: 0;
        background: radial-gradient(ellipse 100% 62% at 0 50%, var(--fp-ombre-bord));
    }

    .frise-paysage .timeline-wrapper::after {
        right: 0;
        background: radial-gradient(ellipse 100% 62% at 100% 50%, var(--fp-ombre-bord));
    }

    /* Au bout de la frise, l'ombre de ce côté-là s'efface : plus rien ne
       se cache derrière, et le vide laissé par le retrait de la ligne
       suffit à dire qu'on est arrivé. */
    .frise-paysage .timeline-wrapper.fp-au-debut::before,
    .frise-paysage .timeline-wrapper.fp-a-la-fin::after {
        opacity: 0;
    }

    .frise-paysage .timeline {
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        /* Un retrait de chaque côté : arrivé au bout, la ligne s'arrête
           avant le bord, et ce vide dit qu'il n'y a plus rien après. */
        padding: 0 2.5rem 1rem;
    }

    /* La frise ne touche pas le pied de page. */
    .frise-paysage .timeline-wrapper {
        margin-bottom: 3rem;
    }
}

/* ==================================================================== */
/* Le papier : la même frise, repliée en bandes                          */
/*                                                                       */
/* Les bandes se lisent de gauche à droite, puis on descend. Découpées    */
/* et mises bout à bout, elles reforment la frise continue de l'écran.    */
/* ==================================================================== */

@media print {
    .frise-paysage .timeline {
        white-space: normal;
        overflow: visible;
    }
}

/* ==================================================================== */
/* Les petits écrans                                                     */
/*                                                                       */
/* La frise en colonne a ses propres règles sous 768 et 480 px : elle y   */
/* passe en boîte flexible, remet la pastille dans le flux, redimensionne */
/* les vignettes. Elles visent les mêmes éléments que celles d'ici et     */
/* sont chargées après, si bien qu'à spécificité égale elles l'emportent. */
/* Ce bloc leur reprend la main, et rien de plus : partout ailleurs, il   */
/* redit ce qui est déjà vrai.                                            */
/* ==================================================================== */

@media screen and (max-width: 1099px) {
    .frise-paysage .timeline-item,
    .frise-paysage .timeline-item.timeline-left,
    .frise-paysage .timeline-item.timeline-right {
        display: inline-block !important;
        align-items: initial !important;
        gap: 0 !important;
        width: var(--fp-largeur-col) !important;
        height: var(--fp-h-rangee) !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .frise-paysage .timeline-item .timeline-date,
    .frise-paysage .timeline-item.timeline-left .timeline-date,
    .frise-paysage .timeline-item.timeline-right .timeline-date {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: var(--fp-axe) !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        min-width: calc(16 * var(--fp-mm)) !important;
        height: auto !important;
        min-height: calc(6.5 * var(--fp-mm)) !important;
        padding: calc(1.1 * var(--fp-mm)) calc(3 * var(--fp-mm)) !important;
        margin: 0 !important;
        font-size: calc(7 * var(--fp-pt)) !important;
    }

    .frise-paysage .timeline-content,
    .frise-paysage .timeline-item.timeline-left .timeline-content,
    .frise-paysage .timeline-item.timeline-right .timeline-content {
        flex: none !important;
        padding: calc(2.5 * var(--fp-mm)) calc(2.5 * var(--fp-mm)) calc(var(--fp-h-images) + 1 * var(--fp-mm)) !important;
        z-index: auto !important;
    }

    .frise-paysage .timeline-item.timeline-left .timeline-content {
        margin: 0 calc(1.5 * var(--fp-mm)) !important;
    }

    .frise-paysage .timeline-item.timeline-right .timeline-content {
        margin: 0 calc(1.5 * var(--fp-mm)) !important;
    }

    .frise-paysage .timeline-item .timeline-date-badge,
    .frise-paysage .timeline-item.timeline-left .timeline-date-badge {
        right: auto !important;
        left: auto !important;
        margin: 0 0 calc(0.8 * var(--fp-mm)) !important;
    }

    .frise-paysage .timeline-period,
    .frise-paysage .timeline-period-base {
        margin: 0 !important;
    }

    .frise-paysage .event-images,
    .frise-paysage .event-images .event-image {
        width: auto !important;
        height: var(--fp-h-images) !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .frise-paysage .timeline-content.main {
        padding-top: calc(2.5 * var(--fp-mm)) !important;
    }
}

/* ==================================================================== */
/* La frise intégrée à un outil                                          */
/*                                                                       */
/* Dans le chat constructeur, la frise partage l'écran : sous la          */
/* conversation (téléphone, tablette), ou à sa droite (écran large), où  */
/* elle a toute la hauteur et s'agrandit. Dans les deux cas, des colonnes */
/* plus larges que sur la feuille : aucune page à remplir, l'écran défile.*/
/*                                                                       */
/* Sa taille ne dépend pas de la place qu'on lui donne : sous la          */
/* conversation, elle passe de 20 à 80 % de la hauteur en ne changeant    */
/* que le contenu de ses cartes. Des colonnes qui s'élargiraient avec     */
/* elle déplaceraient la bande, et l'on perdrait l'endroit où l'on était. */
/* ==================================================================== */

.frise-paysage--integree {
    --fp-echelle: 1.05;
    --fp-largeur-col: calc(55.4 * 1.2 * var(--fp-mm));
    /* Une seule bande à l'écran : l'air réservé entre deux bandes n'y serait qu'un
       vide sous les cartes. */
    --fp-espace-bande: 0mm;
}

@media screen and (min-width: 992px) {
    .frise-paysage--integree {
        --fp-echelle: 1.3;
        --fp-largeur-col: calc(55.4 * 1.15 * var(--fp-mm));
    }
}

@media screen {
    /* La bande se centre dans la hauteur qu'on lui donne : aucun retrait à
       réserver dessous. */
    .frise-paysage--integree .timeline {
        padding-bottom: 0;
    }
}

/* ==================================================================== */
/* La frise qui se construit sous les yeux                               */
/*                                                                       */
/* Classes posées par le contrôleur frise-murale quand la frise change    */
/* sans que la page se recharge. Rien que de l'opacité et des             */
/* transformations : le navigateur les anime sans recalculer la mise en   */
/* page, et rien ne clignote. Les !important reprennent la main sur       */
/* l'opacité figée plus haut pour l'impression.                           */
/* ==================================================================== */

@media screen {
    .frise-paysage .timeline-item,
    .frise-paysage .timeline-period {
        transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* La place réservée de part et d'autre du trait grandit en douceur
       quand une carte plus haute arrive, au lieu de sauter. */
    .frise-paysage.fm-vivante .timeline-item,
    .frise-paysage.fm-vivante .timeline-period {
        transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), height 0.25s ease;
    }

    .frise-paysage.fm-vivante .timeline-content {
        transition: top 0.25s ease, bottom 0.25s ease, box-shadow 0.6s ease;
    }

    .frise-paysage .timeline-item.fm-entrant,
    .frise-paysage .timeline-period.fm-entrant {
        opacity: 0 !important;
        transform: translateY(calc(2 * var(--fp-mm))) scale(0.97);
    }

    .frise-paysage .timeline-item.fm-sortant,
    .frise-paysage .timeline-period.fm-sortant {
        opacity: 0 !important;
        transform: scale(0.95);
    }

    /* Le temps d'un glissement : aucune transition ne doit rattraper la
       position de départ que le contrôleur vient de poser. */
    .frise-paysage .fm-sans-transition {
        transition: none !important;
    }

    .frise-paysage .timeline-item.fm-surligne .timeline-content {
        box-shadow: 0 0 0 calc(0.6 * var(--fp-mm)) var(--fp-bleu), 0 0 calc(4 * var(--fp-mm)) rgba(2, 113, 232, 0.35);
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    .frise-paysage .timeline-item,
    .frise-paysage .timeline-period,
    .frise-paysage .timeline-content {
        transition: none !important;
    }
}