/* ==================================================================== */
/* Frise à trous                                                         */
/*                                                                       */
/* Une seule feuille pour l'exercice, toutes classes préfixées « fa- ».  */
/* Elle ne redéfinit rien de la frise : elle s'ajoute aux feuilles        */
/* frise-public*.css, et reprend leurs variables (--fp-*) pour suivre     */
/* l'échelle de la mise en page murale.                                   */
/*                                                                       */
/* Deux usages :                                                          */
/*  - la page élève, où un champ caché devient une ligne à compléter      */
/*    (.fa-trou) et où les volants se rangent dans une réserve ;          */
/*  - l'aperçu du chat, où rien n'est caché mais tout ce qui le sera est  */
/*    marqué (.fa-cache, .fa-volant).                                     */
/* ==================================================================== */

:root {
    --fa-encre: #3a3a3c;
    --fa-trait: #8e8e93;
    --fa-marque: #5856d6;
    --fa-marque-fond: rgba(88, 86, 214, 0.08);
}

/* ------------------------------------------------------------------ */
/* Lignes à compléter                                                   */
/* ------------------------------------------------------------------ */

.fa-trou {
    display: inline-block;
    min-width: 7em;
    height: 1.3em;
    border-bottom: 1.5px dashed var(--fa-trait);
    vertical-align: bottom;
}

.fa-trou--date {
    min-width: 6em;
    margin-bottom: 0.35em;
}

.fa-trou--titre,
.fa-trou--description {
    display: block;
    width: 100%;
}

.fa-trou--titre {
    height: 1.6em;
}

/* Trois lignes d'écriture, tracées par le fond plutôt que par trois éléments. */
.fa-trou--description {
    height: 3.9em;
    margin-top: 0.4em;
    border-bottom: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0 1.2em,
        var(--fa-trait) 1.2em calc(1.2em + 1px)
    );
}

.fa-trou--themes {
    min-width: 5em;
    margin-top: 0.4em;
}

.fa-trou--periode {
    min-width: 10em;
    border-bottom-color: currentColor;
}

/* La pastille de l'année, sur l'axe, quand la date est cachée : une case blanche
   où l'élève écrit l'année. Toujours visible, même si l'année voisine est la même :
   c'est une question, pas un doublon. */
.timeline-date.fa-trou-axe {
    background: #fff !important;
    border: 1.5px solid var(--fa-trait);
    box-shadow: none;
    color: transparent;
}

/* La place d'un volant : une case où l'élève écrit le numéro de la carte. */
.fa-trou--numero {
    display: block;
    /* Un cercle : la largeur minimale des autres trous l'étirerait en ellipse. */
    min-width: 0;
    width: 3.2em;
    height: 3.2em;
    margin: 0.5em auto;
    border: 2px dashed var(--fa-trait);
    border-radius: 50%;
}

.frise-paysage .fa-trou--numero {
    width: calc(12 * var(--fp-mm));
    height: calc(12 * var(--fp-mm));
}

/* ------------------------------------------------------------------ */
/* Aperçu de l'enseignant : ce qui sera caché, sans rien cacher          */
/* ------------------------------------------------------------------ */

.fa-cache {
    position: relative;
    border-radius: 4px;
    background-color: var(--fa-marque-fond);
    outline: 1.5px dashed var(--fa-marque);
    outline-offset: 1px;
}

.fa-cache::after {
    content: "\f023"; /* cadenas, Font Awesome */
    position: absolute;
    top: -0.55em;
    right: -0.45em;
    font: 900 0.6rem "Font Awesome 6 Free";
    color: var(--fa-marque);
}

/* Des images cachées ne se marquent que si la carte en a : sinon, un cadre vide. Les
   vignettes chargées en différé font apparaître le cadre à leur arrivée. */
.fa-cache--images:not(:has(img)) {
    outline: none;
    background: none;
}

.fa-cache--images:not(:has(img))::after {
    content: none;
}

.fa-volant .timeline-content {
    opacity: 0.55;
    outline: 1.5px dashed var(--fa-marque);
    outline-offset: 2px;
}

.fa-volant-etiquette {
    display: inline-block;
    margin-bottom: 0.3em;
    padding: 0 0.45em;
    border-radius: 4px;
    background: var(--fa-marque);
    color: #fff;
    font-size: 0.75em;
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Page élève : consigne, réserve des volants                            */
/* ------------------------------------------------------------------ */

/* Dans l'aperçu du chat, les rubriques de l'élève paraissent au-dessus de la frise,
   à titre indicatif : de simples cartouches, sans la ligne à remplir. */
.frise-paysage--integree .fa-entete {
    margin: 0.75rem 0 0.5rem 1rem;
    font-size: 0.75rem;
}

.frise-paysage--integree .fa-entete p {
    margin: 0;
}

.frise-paysage--integree .fa-entete .fa-nom-eleve {
    justify-content: flex-start;
    gap: 0.35rem;
}

.frise-paysage--integree .fa-rubrique {
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    background: var(--pub-bleu, #0271E8);
    color: #fff;
    font-weight: 600;
}

.frise-paysage--integree .fa-rubrique-ligne {
    display: none;
}

/* La consigne est pour l'élève : l'aperçu ne montre que les rubriques. */
.frise-paysage--integree .fa-entete .fa-consigne {
    display: none;
}

.fa-consigne {
    margin: 0.5rem 0 0;
    font-weight: 600;
}

.fa-nom-eleve {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.5rem;
    margin: 0.35rem 0 0;
    color: var(--fa-encre);
}

.fa-exercice {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.fa-exercice > .timeline-wrapper {
    flex: 1;
    min-width: 0;
}

/* En paysage, la réserve de gauche flotte au lieu de former une colonne : les bandes
   de la frise, faites de cartes en ligne, contournent un flottant. À côté de la
   réserve, elles perdent une colonne ; dès qu'elle s'arrête, elles reprennent toute
   la largeur de la feuille. Une colonne flexible les aurait rétrécies jusqu'au bout. */
.frise-paysage .fa-exercice {
    display: block;
}

.frise-paysage .fa-exercice > .fa-reserve {
    float: left;
    width: calc(var(--fp-largeur-col) - 4 * var(--fp-mm));
    margin: 0 calc(4 * var(--fp-mm)) calc(4 * var(--fp-mm)) 0;
    padding: calc(2.5 * var(--fp-mm));
    font-size: calc(8 * var(--fp-pt));
}

.frise-paysage .fa-exercice > .timeline-wrapper {
    display: block;
}

/* À l'écran, en frise horizontale, la page de l'élève remplit la fenêtre :
   l'en-tête, puis la zone de l'exercice qui prend toute la hauteur restante, puis
   le pied de page, collé en bas. Dans la zone, la réserve de gauche défile
   verticalement, et la frise s'étend sur toute la hauteur : sa bande y est centrée,
   sa barre de défilement tout en bas. Le flottant ne sert qu'au papier. */
@media screen and (min-width: 1100px) {
    body.frise-paysage.fa-page {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .frise-paysage.fa-page .fa-exercice {
        flex: 1 1 0;
        /* Jamais moins qu'une bande et sa barre de défilement. */
        min-height: 26rem;
        position: relative;
        display: flex;
        align-items: stretch;
        padding-left: var(--fp-largeur-col);
    }

    /* Posée en absolu, la réserve prend la hauteur de la zone sans la dicter, jusqu'en
       bas. */
    .frise-paysage.fa-page .fa-exercice > .fa-reserve {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 1rem;
        width: calc(var(--fp-largeur-col) - 2rem);
        float: none;
        margin: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        /* Posée sur le pied de page : ni marge dessous, ni coins arrondis en bas. */
        padding-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Le titre reste en place : seule la liste défile, dans un cadre fixe qui porte
       les ombres. */
    .frise-paysage.fa-page .fa-exercice .fa-reserve-defilement {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .frise-paysage.fa-page .fa-exercice .fa-reserve-liste {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 2px 2px 0;
    }

    /* En haut et en bas, l'ombre des bords de la frise horizontale, tournée d'un
       quart : il reste des événements de ce côté-là. Elle s'efface au bout. */
    .frise-paysage.fa-page .fa-reserve-defilement::before,
    .frise-paysage.fa-page .fa-reserve-defilement::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 2.5rem;
        pointer-events: none;
        z-index: 2;
        transition: opacity 0.25s ease;
    }

    .frise-paysage.fa-page .fa-reserve-defilement::before {
        top: 0;
        background: radial-gradient(ellipse 62% 100% at 50% 0, var(--fp-ombre-bord));
    }

    .frise-paysage.fa-page .fa-reserve-defilement::after {
        bottom: 0;
        background: radial-gradient(ellipse 62% 100% at 50% 100%, var(--fp-ombre-bord));
    }

    .frise-paysage.fa-page .fa-reserve-defilement.fa-au-debut::before,
    .frise-paysage.fa-page .fa-reserve-defilement.fa-a-la-fin::after {
        opacity: 0;
    }

    .frise-paysage.fa-page .fa-exercice > .timeline-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }

    /* La frise occupe toute la hauteur : une rangée de colonnes centrée, la barre de
       défilement au bas. Les colonnes gardent leur largeur. */
    .frise-paysage.fa-page .fa-exercice .timeline {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
    }

    .frise-paysage.fa-page .fa-exercice .timeline > * {
        flex: none;
    }

    /* Le pied de page du site, collé en bas de la fenêtre. */
    .frise-paysage.fa-page .footer-fixed {
        margin-top: auto;
    }
}

.fa-reserve {
    flex: 0 0 16rem;
    padding: 0.75rem;
    border-radius: 16px;
    background: #f5f7fb;
}

.fa-reserve-titre {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--pub-gris, #6b7280);
}

.fa-reserve-liste {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Les cartes de la réserve ressemblent à celles de la frise : fond blanc, coins
   arrondis, filet léger. */
.fa-carte {
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    break-inside: avoid;
    /* La bande de vignettes est en position absolue (images.css) : la carte la
       contient, sans quoi elle s'étale sur toute la zone de l'exercice. Même
       variable que les cartes de la frise, que les règles d'impression imposent. */
    position: relative;
    overflow: hidden;
    /* Avec « overflow: hidden », une carte rétrécirait dans la liste défilante et
       couperait sa description. */
    flex-shrink: 0;
    --fp-h-images: 4rem;
}

/* Comme sur la frise, la bande se pose au bas de la carte, qui lui laisse la place. */
.fa-carte:has(.event-image) {
    padding-bottom: calc(0.6rem + var(--fp-h-images));
}

.fa-carte .event-images,
.fa-carte .event-images .flex-container,
.fa-carte .images-shimmer {
    height: var(--fp-h-images);
}

/* Sans vignette, la bande se réduit à un pixel invisible, pour que le chargement
   différé la voie encore arriver à l'écran (voir frise-public-paysage.css). */
.fa-carte:not(:has(.event-image)) .event-images,
.fa-carte:not(:has(.event-image)) .event-images .flex-container {
    height: 1px;
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
}

/* La pastille du numéro reprend celle des années sur l'axe. */
.fa-carte-numero {
    flex: 0 0 auto;
    min-width: 1.8em;
    height: 1.8em;
    padding: 0 0.4em;
    border-radius: 999px;
    background: var(--pub-degrade, linear-gradient(135deg, #0271E8 0%, #5856d6 100%));
    color: #fff;
    font-weight: 700;
    line-height: 1.8em;
    text-align: center;
}

.fa-carte-corps {
    min-width: 0;
}

.fa-carte-titre {
    margin: 0;
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1.2;
}

.fa-carte-description {
    margin: 0.25rem 0 0;
    font-size: 0.8em;
    line-height: 1.35;
    color: #3F3F3F;
}

.fa-carte-themes {
    margin: 0.35rem 0 0;
}

/* Une étiquette longue passe à la ligne plutôt que de sortir de la carte. */
.fa-carte-themes .badge {
    max-width: 100%;
    white-space: normal;
    text-align: left;
}

/* ------------------------------------------------------------------ */
/* La feuille de l'élève, en paysage : deux bandes par page              */
/*                                                                       */
/* Mesuré le 25/09/2026 sur des descriptions de 350 caractères, la       */
/* longueur que l'assistant écrit : à cinq colonnes, une carte fait      */
/* 52 mm et une bande 119 mm, une seule tient sur les 192 mm utiles.     */
/* Quatre colonnes plus larges, des étiquettes sur une ligne, des marges */
/* et un creux sous l'axe resserrés ramènent la bande sous la moitié de  */
/* la feuille, sans couper un mot. La frise publique garde sa mise en    */
/* page : seule la page de l'exercice porte « fa-page ».                 */
/* ------------------------------------------------------------------ */

.frise-paysage.fa-page {
    --fp-largeur-col: calc(70.2 * var(--fp-mm)); /* 4 colonnes dans les 281 mm utiles */
    --fp-espace-bande: calc(2 * var(--fp-mm));
}

.frise-paysage.fa-page .timeline {
    --fp-bande-periodes: calc(3.5 * var(--fp-mm) + var(--fp-nb-rubans) * 2 * var(--fp-mm));
}

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

.frise-paysage.fa-page .timeline-content .mt-2 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.frise-paysage.fa-page .timeline-content .mt-2 .badge {
    font-size: calc(5 * var(--fp-pt));
}

/* La place d'un volant ne porte qu'une case à numéro : une colonne étroite suffit,
   et la bande loge davantage d'événements. */
.frise-paysage.fa-page .timeline-item.fa-emplacement {
    width: calc(24 * var(--fp-mm));
}

/* ------------------------------------------------------------------ */
/* Aperçu privé (frise non publiée, vue par son propriétaire)            */
/* ------------------------------------------------------------------ */

.frise-apercu-prive {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    background: var(--fa-marque-fond);
    color: var(--fa-marque);
}

/* ------------------------------------------------------------------ */
/* Impression                                                            */
/* ------------------------------------------------------------------ */

@media print {
    /* La frise en paysage masque à l'impression les paragraphes de l'en-tête
       (frise-public-paysage.css) ; la consigne et la ligne du nom, elles, doivent
       figurer sur la feuille de l'élève. */
    .frise-paysage .public-header .fa-consigne,
    .frise-paysage .public-header .fa-nom-eleve {
        display: flex;
        font-size: calc(9 * var(--fp-pt));
        margin: calc(1 * var(--fp-mm)) 0 0;
    }

    /* Le fond du panneau ne s'imprime pas : un filet le délimite sur le papier. */
    .fa-reserve {
        box-shadow: 0 0 0 0.3mm rgba(0, 0, 0, 0.15);
    }

    /* Les fonds ne s'impriment pas : le numéro, blanc sur sa pastille à l'écran,
       sortirait invisible. Sur le papier, il est bleu dans un contour bleu. */
    .fa-carte-numero {
        background: none;
        border: 1.5px solid var(--pub-bleu, #0271E8);
        color: var(--pub-bleu, #0271E8);
    }

    .fa-trou,
    .fa-trou--numero,
    .timeline-date.fa-trou-axe {
        border-color: #000;
    }

    .fa-trou--description {
        background: repeating-linear-gradient(
            to bottom,
            transparent 0 1.2em,
            #000 1.2em calc(1.2em + 1px)
        );
    }

    /* La réserve passe sous la frise dès qu'elle ne tient plus à côté. */
    .fa-carte {
        page-break-inside: avoid;
    }
}