/*
 * PAGE D'ACCUEIL « LE PARCOURS D'UN COLIS » — styles propres à la page.
 *
 * Chargée après partials.animations (la charte des pages publiques), dont
 * elle réutilise les variables (--lf-marine, --lf-azur…) et quelques classes
 * (lf-bouton, lf-carte, lf-apparition). Aucune règle ici ne dépend de
 * Tailwind : si sa feuille manquait, le parcours et la section Expéditeurs
 * resteraient mis en page. Tailwind ne sert qu'aux sections reprises de
 * l'ancienne page, à l'en-tête et au pied.
 *
 * COULEURS : les variables de la charte, le blanc, et le marine foncé en
 * transparence (rgba(12, 27, 79, …)) pour les textes secondaires, les filets
 * et les ombres. Aucune couleur nouvelle. Les textes secondaires restent au
 * moins à 0,62 d'opacité : 4,6:1 sur blanc, le seuil des petits textes.
 *
 * DEUX MISES EN PAGE, UN SEUL HTML :
 *   · par défaut (sans JavaScript, ou écran de moins de 520 px de haut) :
 *     les panneaux du parcours s'empilent comme une page ordinaire ;
 *   · « html.lf-js » sur un écran assez haut : le cadre du parcours reste
 *     collé sous l'en-tête et les panneaux s'y succèdent au défilement.
 * L'état par défaut est l'état LISIBLE : rien n'est masqué avant que le
 * script ait pris la main. Sous 520 px de haut (téléphone à l'horizontale),
 * un panneau et son illustration ne tiennent pas dans l'écran : la page en
 * colonne y est plus lisible que n'importe quelle scène tronquée.
 *
 * MOUVEMENT : seules l'opacité et la transformation sont animées, jamais une
 * dimension ou une position — le navigateur n'a aucune mise en page à
 * refaire pendant le défilement.
 */

/* ══ 1. GÉNÉRAL ═════════════════════════════════════════════════════════ */

/* La police de titres (Manrope) n'existe que si ses fichiers ont été
   déposés : sinon la variable est absente et la pile système prend le
   relais (voir partials.polices-public). */
.lf-accueil h1,
.lf-accueil h2,
.lf-accueil h3 {
    font-family: var(--lf-police-titres, var(--lf-police));
}

/* Les ancres ne doivent pas atterrir sous l'en-tête collant (4rem). */
.lf-accueil main section[id],
.lf-accueil footer[id],
.lf-recit {
    scroll-margin-top: 4rem;
}

/* Lien d'évitement : hors de l'écran jusqu'à ce que le clavier l'atteigne. */
.lf-evitement {
    position: absolute;
    left: 1rem;
    top: -5rem;
    z-index: 100;
    padding: .75rem 1.25rem;
    border-radius: 12px;
    background-color: var(--lf-marine);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 24px -12px rgba(12, 27, 79, .7);
}

.lf-evitement:focus {
    top: .75rem;
}

/* Cibles de focus posé par le script (titres, contenu principal) : le focus
   y est un repère pour les lecteurs d'écran, pas une commande à montrer. */
#contenu:focus,
.lf-accroche-titre:focus,
.lf-panneau-titre:focus {
    outline: none;
}

/* Texte réservé aux lecteurs d'écran. */
.lf-invisible {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ══ 2. BOUTONS DE LA PAGE ══════════════════════════════════════════════
   Les couleurs viennent de la charte (lf-bouton-primaire, dans
   partials.animations) ; ici, seulement la taille et la variante « contour »
   pour un fond clair. Hauteur minimale de 3rem : une cible confortable au
   pouce. */
.lf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3rem;
    padding: .75rem 1.5rem;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

a.lf-bouton-contour {
    background-color: #fff;
    border: 1.5px solid rgba(12, 27, 79, .18);
    color: var(--lf-marine);
}

@media (hover: hover) and (pointer: fine) {
    a.lf-bouton-contour:hover {
        border-color: var(--lf-azur);
        color: var(--lf-marine-fonce);
    }
}

/* ══ 3. LE PARCOURS — MISE EN PAGE PAR DÉFAUT (EN COLONNE) ════════════════ */
.lf-parcours {
    position: relative;
    background-image: linear-gradient(180deg, #fff 0%, var(--lf-azur-clair) 100%);
}

.lf-parcours-cadre {
    position: relative;
}

/* Sans la scène collante, ces éléments n'ont pas de sens : les affiches et
   la scène 3D n'accompagnent rien, l'indicateur doublerait la lecture, et
   l'invitation finale précéderait de trois lignes la section qu'elle
   annonce. */
.lf-affiches,
.lf-scene-3d,
.lf-progression,
.lf-indicateur {
    display: none;
}

.lf-parcours-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1rem 1rem 0;
}

.lf-passer,
.lf-voir-3d {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: .375rem .875rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 6px 16px -10px rgba(12, 27, 79, .45);
}

.lf-passer {
    background-color: rgba(255, 255, 255, .94);
    border: 1px solid rgba(12, 27, 79, .12);
    color: var(--lf-marine);
}

.lf-voir-3d {
    border: 0;
    background-color: var(--lf-marine);
    color: #fff;
    cursor: pointer;
}

/* L'attribut « hidden » doit l'emporter sur l'affichage ci-dessus. */
.lf-voir-3d[hidden] {
    display: none !important;
}

.lf-voir-3d:disabled {
    opacity: .65;
    cursor: progress;
}

.lf-panneaux {
    display: grid;
    gap: 2.5rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

/* Les articles du récit portent « lf-recit », JAMAIS « lf-panneau » : c'est
   la classe du grand panneau de la charte (partials.animations), que cette
   même page donne au formulaire de suivi et au panneau de la couverture.
   Sous un nom commun, chaque règle ci-dessous les touchait aussi (formulaire
   invisible dès que le script tourne), et les articles recevaient le fond
   blanc opaque de la charte, étiré sur toute la scène par-dessus les
   affiches et la 3D. Les modificateurs lf-panneau--… et les éléments
   lf-panneau-… n'existent que sur le récit : ils gardent leur nom. */
.lf-recit {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

/* L'épilogue (dernier panneau du relais) ne sert qu'avec la scène
   collante : en colonne, la section Suivi, qui pose la même question, le
   suit immédiatement. */
.lf-recit.lf-panneau--epilogue {
    display: none;
}

.lf-epilogue-boutons {
    margin-top: 1.25rem;
}

.lf-panneau-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

@media (min-width: 1024px) {
    .lf-panneaux {
        gap: 3.5rem;
        padding-top: 2.5rem;
        padding-bottom: 5rem;
    }

    .lf-recit {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 3rem;
    }

    /* Chapitres sans illustration (1, 3, 4) : une carte de largeur de
       lecture, plutôt qu'une demi-page vide à côté. */
    .lf-panneau--sans-illustration {
        grid-template-columns: minmax(0, 36rem);
    }
}

/* ══ 4. LES PANNEAUX : CARTE ET TYPOGRAPHIE ═════════════════════════════
   Le fond est porté par la carte de texte SEULE : l'article, étiré sur
   toute la scène quand elle est collante, n'en a aucun, pour que l'affiche
   ou la 3D reste visible autour du texte. Blanc à 0,86 et non opaque : la
   scène transparaît à peine derrière le texte. Sur le marine le plus foncé
   de la charte, les plus petits textes de la carte (le surtitre azur,
   « Faites défiler ») restent juste au-dessus de 4,5:1 ; une affiche photo
   presque noire derrière la carte les ferait passer juste en dessous — à
   vérifier quand les vraies affiches arriveront. */
.lf-panneau-carte {
    position: relative;
    background-color: rgba(255, 255, 255, .86);
    border-radius: 24px;
    padding: 1.5rem;
    color: rgba(12, 27, 79, .78);
    box-shadow:
        0 1px 2px rgba(12, 27, 79, .06),
        0 22px 44px -24px rgba(12, 27, 79, .45);
}

@media (min-width: 640px) {
    .lf-panneau-carte {
        padding: 2rem;
    }
}

.lf-panneau-surtitre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .625rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--lf-azur-sombre);
}

.lf-panneau-compteur {
    display: inline-flex;
    align-items: center;
    padding: .125rem .5rem;
    border-radius: 999px;
    background-color: var(--lf-azur-clair);
    color: var(--lf-marine);
    letter-spacing: .02em;
}

.lf-panneau-titre {
    margin: 0 0 .75rem;
    font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--lf-marine-fonce);
}

.lf-panneau-texte {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
}

/* L'accroche : le seul h1 de la page. */
.lf-accroche-titre {
    margin: 0 0 1rem;
    font-size: clamp(1.875rem, 1.25rem + 2.4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--lf-marine-fonce);
}

.lf-accroche-texte {
    margin: 0 0 1.5rem;
    font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
    line-height: 1.6;
}

.lf-accroche-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.lf-defiler {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1.25rem 0 0;
    font-size: .875rem;
    font-weight: 600;
    color: rgba(12, 27, 79, .64);
}

.lf-defiler svg {
    flex: none;
    color: var(--lf-azur);
}

/* `lf-anim` n'est posée par partials.animations que si le mouvement est
   autorisé : sans elle, la flèche reste immobile. */
html.lf-anim .lf-defiler svg {
    animation: lf-invite 1.8s ease-in-out infinite;
}

@keyframes lf-invite {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, 4px, 0); }
}

/* ══ 5. LES ILLUSTRATIONS ════════════════════════════════════════════════ */

/* ── Prologue : le téléphone et sa légende ── */
.lf-prologue {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 100%;
}

.lf-prologue-legende {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 12.5rem;
    padding: .875rem 1rem;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 28px -18px rgba(12, 27, 79, .45);
}

.lf-prologue-legende .lf-panneau-surtitre {
    margin-bottom: .375rem;
    font-size: .75rem;
}

.lf-prologue-titre {
    margin: 0;
    font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--lf-marine-fonce);
}

/* Le téléphone : un cadre marine, un écran blanc. La largeur suit la
   hauteur (proportions d'un téléphone récent), ce qui permet de le réduire
   par sa seule hauteur quand la place manque. */
.lf-telephone {
    position: relative;
    flex: none;
    width: 12.3rem;
    height: 26rem;
    padding: .55rem;
    border-radius: 2.4rem;
    background-image: linear-gradient(160deg, var(--lf-marine) 0%, var(--lf-marine-fonce) 100%);
    box-shadow:
        0 34px 60px -26px rgba(12, 27, 79, .6),
        0 0 0 1px rgba(12, 27, 79, .2);
}

@supports (aspect-ratio: 1) {
    .lf-telephone {
        width: auto;
        aspect-ratio: 9 / 19;
    }
}

/* L'encoche de l'écran. */
.lf-telephone::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 50%;
    z-index: 2;
    width: 32%;
    height: .85rem;
    border-radius: 999px;
    background-color: var(--lf-marine-fonce);
    transform: translateX(-50%);
}

.lf-telephone-ecran {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    height: 100%;
    padding: 2.4rem .9rem .9rem;
    border-radius: 1.9rem;
    background-image: linear-gradient(180deg, #fff 0%, var(--lf-azur-clair) 100%);
    overflow: hidden;
}

.lf-telephone-titre {
    margin: 0;
    font-family: var(--lf-police-titres, var(--lf-police));
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--lf-marine);
}

.lf-telephone-champ {
    margin: 0;
    padding: .45rem .5rem;
    border: 1.5px solid var(--lf-azur);
    border-radius: 10px;
    background-color: #fff;
    color: var(--lf-marine-fonce);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .7rem;
    letter-spacing: .03em;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

/* Base nulle (et non « auto ») : la hauteur de la zone devient alors
   définie, et la silhouette peut s'y régler en pourcentage. */
.lf-telephone-carte {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.lf-tunisie-svg {
    display: block;
    width: auto;
    height: 100%;
    max-height: 14rem;
    overflow: visible;
}

.lf-tunisie {
    fill: var(--lf-azur);
    stroke: var(--lf-azur);
    stroke-width: 1.2;
    stroke-linejoin: round;
}

/* « La Tunisie qui s'éclaire en azur » : une fois, à l'arrivée du panneau. */
/* Déclenchée quand le panneau entre en jeu (relais de panneaux.js). */
html.lf-anim .lf-recit.est-visible .lf-tunisie {
    animation: lf-eclairage 1.4s ease-out .2s both;
}

@keyframes lf-eclairage {
    from {
        fill-opacity: .15;
        stroke-opacity: .35;
    }
}

/* ── Chapitre 2 : l'étiquette et son code-barres ── */
.lf-etiquette-colis {
    width: min(100%, 22rem);
    padding: 1.25rem 1.5rem 1rem;
    border-radius: 18px;
    background-color: #fff;
    box-shadow:
        0 1px 2px rgba(12, 27, 79, .06),
        0 24px 48px -26px rgba(12, 27, 79, .5);
    /* Posée de biais, comme sur un carton : ce n'est pas une carte de plus. */
    transform: rotate(-2deg);
}

.lf-etiquette-entete {
    padding-bottom: .75rem;
    margin-bottom: .75rem;
    border-bottom: 1.5px dashed rgba(12, 27, 79, .18);
}

.lf-etiquette-logo {
    display: block;
    width: auto;
    height: 1.75rem;
}

.lf-etiquette-libelle {
    margin: 0 0 .5rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(12, 27, 79, .64);
}

/* Les barres sont des blocs dont la largeur est une part de la ligne
   (flex-grow) : le code-barres garde ses proportions à toutes les tailles.
   Étroit : 1 part ; large : 2,5 parts (l'ITF admet de 2 à 3). */
.lf-code-barres-barres {
    display: flex;
    height: 5rem;
    padding: 0 4%;
}

.lf-code-barres-barres > div {
    flex: 1 1 0;
    min-width: 0;
}

.lf-code-barres-barres > .lf-cb-bl,
.lf-code-barres-barres > .lf-cb-el {
    flex-grow: 2.5;
}

.lf-code-barres-barres > .lf-cb-bn,
.lf-code-barres-barres > .lf-cb-bl {
    background-color: var(--lf-marine-fonce);
}

.lf-code-barres-chiffres {
    margin: .5rem 0 0;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .9rem;
    letter-spacing: .16em;
    text-align: center;
    color: var(--lf-marine-fonce);
}

/* ── Chapitre 5 : la preuve de livraison ── */
.lf-preuve,
.lf-mail,
.lf-bon {
    width: min(100%, 21rem);
    border-radius: 20px;
    background-color: #fff;
    box-shadow:
        0 1px 2px rgba(12, 27, 79, .06),
        0 24px 48px -26px rgba(12, 27, 79, .5);
}

.lf-preuve {
    padding: 1.25rem;
}

.lf-preuve-titre {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    font-family: var(--lf-police-titres, var(--lf-police));
    font-weight: 800;
    color: var(--lf-marine);
}

.lf-preuve-titre svg {
    flex: none;
    color: var(--lf-azur);
}

.lf-preuve-bloc {
    padding: .75rem;
    border-radius: 14px;
    background-color: var(--lf-azur-clair);
}

.lf-preuve-bloc + .lf-preuve-bloc {
    margin-top: .625rem;
}

.lf-preuve-libelle {
    margin: 0 0 .25rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(12, 27, 79, .72);
}

.lf-signature {
    display: block;
    width: 100%;
    height: 3.5rem;
}

.lf-signature path {
    fill: none;
    stroke: var(--lf-marine);
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* La signature se trace à l'arrivée du panneau. Le pointillé n'existe que
   PENDANT l'animation (« backwards » et non « both ») : au repos, le trait
   est plein, et un navigateur qui calculerait mal la longueur du tracé ne
   laisserait aucune trace de l'effet. */
html.lf-anim .lf-recit.est-visible .lf-signature path {
    animation: lf-trace 1.6s ease-out .35s backwards;
}

@keyframes lf-trace {
    from {
        stroke-dasharray: 600;
        stroke-dashoffset: 600;
    }
    to {
        stroke-dasharray: 600;
        stroke-dashoffset: 0;
    }
}

.lf-preuve-bloc--photo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.lf-preuve-bloc--photo .lf-preuve-libelle {
    margin: 0;
}

.lf-preuve-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 1.5px dashed rgba(12, 27, 79, .22);
    border-radius: 12px;
    background-color: #fff;
    color: var(--lf-azur-sombre);
}

/* ── Chapitre 6 : l'e-mail de rappel ── */
.lf-mail {
    padding: 1.25rem;
    /* Le bandeau marine du gabarit des e-mails de la société. */
    border-top: 4px solid var(--lf-marine);
}

.lf-mail-recu {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin: 0 0 .875rem;
    padding: .25rem .625rem;
    border-radius: 999px;
    background-color: var(--lf-azur-clair);
    color: var(--lf-marine);
    font-size: .75rem;
    font-weight: 700;
}

.lf-mail-de {
    margin: 0 0 .25rem;
    font-size: .8125rem;
    color: rgba(12, 27, 79, .72);
}

.lf-mail-de span {
    font-weight: 700;
}

.lf-mail-objet {
    margin: 0 0 1.125rem;
    font-family: var(--lf-police-titres, var(--lf-police));
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--lf-marine-fonce);
}

/* Le bouton de l'e-mail, en image : il n'est ni cliquable ni atteignable au
   clavier (aucun tabindex), et annoncé « indisponible » (aria-disabled). */
.lf-mail-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: .5rem 1rem;
    border-radius: 10px;
    background-image: linear-gradient(135deg, var(--lf-marine) 0%, var(--lf-azur-sombre) 100%);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Chapitre 7 : le bon de versement, sans aucun montant ── */
.lf-bon {
    padding: 1.25rem 1.5rem 1.5rem;
}

.lf-bon-entete {
    padding-bottom: .875rem;
    margin-bottom: .875rem;
    border-bottom: 1px solid rgba(12, 27, 79, .1);
}

.lf-bon-logo {
    display: block;
    width: auto;
    height: 2rem;
}

.lf-bon-titre {
    margin: 0 0 1rem;
    font-family: var(--lf-police-titres, var(--lf-police));
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--lf-marine-fonce);
}

.lf-bon-lignes {
    display: grid;
    gap: .625rem;
    margin: 0;
}

.lf-bon-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .625rem .75rem;
    border-radius: 12px;
    background-color: var(--lf-azur-clair);
}

.lf-bon-ligne dt {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--lf-marine);
}

.lf-bon-ligne dd {
    margin: 0;
}

/* Un trait gris à la place de chaque valeur : on montre la pièce, jamais un
   chiffre — même inventé, un montant affiché serait lu comme une promesse. */
.lf-trait {
    display: block;
    width: 6.5rem;
    height: .625rem;
    border-radius: 999px;
    background-color: rgba(12, 27, 79, .16);
}

.lf-trait--court {
    width: 4.5rem;
}

/* ══ 6. LES AFFICHES ═════════════════════════════════════════════════════
   Une image par chapitre si Mondher l'a produite ; sinon un dégradé de la
   charte, teinté selon l'heure du récit (matin, soir, nuit, aube, jour),
   avec le logo en filigrane. Les lueurs sont des dégradés radiaux qui
   s'éteignent sur le bord, et non des flous : même rendu, peint une fois. */
.lf-affiche {
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
}

.lf-affiche picture,
.lf-affiche img {
    display: block;
    width: 100%;
    height: 100%;
}

.lf-affiche img {
    object-fit: cover;
}

.lf-affiche-degrade {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image: var(--lf-fond);
}

.lf-affiche-degrade::before,
.lf-affiche-degrade::after {
    content: "";
    position: absolute;
    width: 80vmax;
    height: 80vmax;
    border-radius: 50%;
    pointer-events: none;
}

.lf-affiche-degrade::before {
    top: -42vmax;
    right: -28vmax;
    background-image: radial-gradient(closest-side, var(--lf-lueur-1), transparent);
    opacity: var(--lf-lueur-1-opacite);
}

.lf-affiche-degrade::after {
    bottom: -46vmax;
    left: -30vmax;
    background-image: radial-gradient(closest-side, var(--lf-lueur-2), transparent);
    opacity: var(--lf-lueur-2-opacite);
}

.lf-affiche--matin {
    --lf-fond: linear-gradient(180deg, var(--lf-azur-clair) 0%, #fff 78%);
    --lf-lueur-1: var(--lf-azur);
    --lf-lueur-1-opacite: .16;
    --lf-lueur-2: #fff;
    --lf-lueur-2-opacite: .9;
}

.lf-affiche--jour {
    --lf-fond: linear-gradient(160deg, #fff 0%, var(--lf-azur-clair) 100%);
    --lf-lueur-1: var(--lf-azur);
    --lf-lueur-1-opacite: .2;
    --lf-lueur-2: var(--lf-azur-clair);
    --lf-lueur-2-opacite: .9;
}

/* Fin de journée et soir : le marine, et le sable du couchant (autorisé par
   la direction artistique pour cette lumière-là). */
.lf-affiche--soir {
    --lf-fond: linear-gradient(165deg, var(--lf-marine-fonce) 0%, var(--lf-marine) 45%, var(--lf-azur-sombre) 100%);
    --lf-lueur-1: var(--lf-azur);
    --lf-lueur-1-opacite: .35;
    --lf-lueur-2: var(--lf-sable);
    --lf-lueur-2-opacite: .3;
}

.lf-affiche--nuit {
    --lf-fond: linear-gradient(180deg, var(--lf-marine-fonce) 0%, var(--lf-marine) 100%);
    --lf-lueur-1: var(--lf-azur);
    --lf-lueur-1-opacite: .3;
    --lf-lueur-2: var(--lf-azur);
    --lf-lueur-2-opacite: .14;
}

.lf-affiche--aube {
    --lf-fond: linear-gradient(180deg, var(--lf-marine) 0%, var(--lf-azur-sombre) 55%, var(--lf-azur-clair) 100%);
    --lf-lueur-1: #fff;
    --lf-lueur-1-opacite: .22;
    --lf-lueur-2: var(--lf-sable);
    --lf-lueur-2-opacite: .42;
}

.lf-filigrane {
    position: relative;
    z-index: 1;
    display: block;
    width: min(56%, 40rem);
    opacity: .07;
}

.lf-filigrane-logo {
    display: block;
    width: 100%;
    height: auto;
}

/* Sur fond foncé, le logo (marine) disparaîtrait : il passe en blanc. Un
   filtre sur une image fixe ne coûte rien pendant le défilement. */
.lf-affiche--soir .lf-filigrane-logo,
.lf-affiche--nuit .lf-filigrane-logo,
.lf-affiche--aube .lf-filigrane-logo {
    filter: brightness(0) invert(1);
}

.lf-affiche--soir .lf-filigrane,
.lf-affiche--nuit .lf-filigrane,
.lf-affiche--aube .lf-filigrane {
    opacity: .09;
}

/* ══ 7. LA SCÈNE COLLANTE (JavaScript actif, écran assez haut) ════════════
   Le cadre reste collé sous l'en-tête (4rem, la hauteur de
   partials.entete-public) pendant que la section, beaucoup plus haute,
   défile derrière : c'est cette distance que le script convertit en
   progression. La hauteur de la section vient de config/site.php, par les
   variables posées sur la balise. */
@media (min-height: 520px) {
    html.lf-js .lf-parcours {
        height: calc(var(--parcours-vh, 900) * 1vh);
    }

    html.lf-js .lf-parcours-cadre {
        --lf-entete: 4rem;
        position: -webkit-sticky;
        position: sticky;
        top: var(--lf-entete);
        overflow: hidden;
        height: calc(100vh - var(--lf-entete));
        /* Hauteur « petite fenêtre » quand le navigateur la connaît : sur
           téléphone, 100vh passe sous la barre d'outils du navigateur et le
           bas du panneau serait caché. La ligne est ignorée ailleurs. */
        height: calc(100svh - var(--lf-entete));
    }

    html.lf-js .lf-affiches,
    html.lf-js .lf-scene-3d {
        display: block;
        position: absolute;
        inset: 0;
    }

    html.lf-js .lf-affiches {
        z-index: 0;
    }

    html.lf-js .lf-scene-3d {
        z-index: 1;
        pointer-events: none;
    }

    /* Seules l'affiche courante et la suivante sont affichées : les autres
       ne sont pas peintes, et leur image (loading="lazy") n'est demandée
       qu'au moment où elle devient la suivante — le préchargement se fait
       donc tout seul, une affiche à l'avance. Avant que le script ait pris
       la main, la première est montrée d'office. */
    html.lf-js .lf-affiche[data-etat],
    html.lf-js:not(.lf-pret) .lf-affiche[data-chapitre="0"] {
        display: block;
    }

    html.lf-js .lf-progression {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 4;
        height: 3px;
        background-color: rgba(12, 27, 79, .1);
    }

    html.lf-js .lf-progression-barre {
        height: 100%;
        background-image: linear-gradient(90deg, var(--lf-azur-sombre) 0%, var(--lf-azur) 100%);
        transform: scaleX(0);
        transform-origin: 0 50%;
    }

    html.lf-js .lf-parcours-actions {
        position: absolute;
        top: .875rem;
        right: 1rem;
        z-index: 4;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    html.lf-js .lf-panneaux {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block;
        max-width: none;
        margin: 0;
        padding: 0;
        pointer-events: none;
    }

    /* LE RELAIS DES PANNEAUX (27/09/2026). Rien n'est animé « au temps »
       ici : panneaux.js écrit, à chaque image, l'opacité et la position de
       la carte, de son contenu et de l'illustration des panneaux en jeu (le
       courant, et son voisin pendant un relais), d'après la progression.
       Un panneau hors jeu est invisible ET hors d'atteinte (visibility) :
       ni le clavier ni un lecteur d'écran n'y tombent par surprise. Avant
       que le script ait pris la main, le prologue est montré d'office. */
    html.lf-js .lf-recit {
        position: absolute;
        inset: 0;
        visibility: hidden;
        pointer-events: none;
    }

    html.lf-js .lf-recit.est-visible,
    html.lf-js:not(.lf-pret) .lf-recit[data-chapitre="0"] {
        visibility: visible;
    }

    /* Seul le panneau courant reçoit les clics : pendant un relais,
       l'entrant, posé par-dessus mais encore transparent, ne doit pas
       intercepter le clic destiné au sortant. */
    html.lf-js .lf-recit.est-actif .lf-panneau-carte,
    html.lf-js .lf-recit.est-actif .lf-panneau-illustration,
    html.lf-js:not(.lf-pret) .lf-recit[data-chapitre="0"] .lf-panneau-carte {
        pointer-events: auto;
    }

    /* Le texte roule DANS la carte : il sort par le haut, le suivant entre
       par le bas, coupés au bord de la carte. */
    html.lf-js .lf-panneau-carte {
        overflow: hidden;
    }

    /* Calques préparés pour les seuls panneaux en jeu (deux au plus) : le
       relais ne fait travailler que la composition, jamais la mise en
       page. */
    html.lf-js .lf-recit.est-visible .lf-panneau-carte,
    html.lf-js .lf-recit.est-visible .lf-panneau-contenu,
    html.lf-js .lf-recit.est-visible .lf-panneau-illustration {
        will-change: transform, opacity;
    }

    /* L'indicateur : des points sur une pastille blanche, lisibles sur
       n'importe quelle affiche. */
    html.lf-js .lf-indicateur {
        display: block;
        position: absolute;
        z-index: 3;
    }

    html.lf-js .lf-indicateur ol {
        margin: 0;
        padding: 0;
        list-style: none;
        border-radius: 999px;
        background-color: rgba(255, 255, 255, .94);
        box-shadow: 0 8px 20px -12px rgba(12, 27, 79, .5);
    }

    html.lf-js .lf-indicateur a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 999px;
        text-decoration: none;
    }

    html.lf-js .lf-indicateur-point {
        display: block;
        width: .625rem;
        height: .625rem;
        border: 2px solid var(--lf-azur-sombre);
        border-radius: 999px;
        background-color: #fff;
        transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
    }

    html.lf-js .lf-indicateur a.est-franchi .lf-indicateur-point {
        border-color: var(--lf-azur);
        background-color: var(--lf-azur);
    }

    html.lf-js .lf-indicateur a[aria-current] .lf-indicateur-point {
        border-color: var(--lf-marine);
        background-color: var(--lf-marine);
        transform: scale(1.35);
    }

    /* Quand la 3D a démarré (lot B) ET a rendu sa première image, elle
       remplace les affiches. Les deux conditions : « lf-mode-3d » sur <html>
       (posée par accueil.js quand le moteur a résolu) et « est-pret » sur le
       CADRE (posée par moteur.js après un premier rendu réussi, retirée si
       le contexte WebGL est perdu ou le moteur libéré — les affiches
       reviennent alors d'elles-mêmes, jamais d'écran vide). La classe est
       sur le cadre et non sur #lf-scene : les affiches PRÉCÈDENT la scène
       dans le HTML, un sélecteur de frère ne peut pas les atteindre. */
    html.lf-mode-3d .lf-parcours-cadre.est-pret .lf-affiches {
        opacity: 0;
        transition: opacity .6s ease;
    }

    /* Le canvas n'apparaît qu'avec les affiches qui s'effacent : avant sa
       première image (construction, mesure de l'appareil), un canvas WebGL
       opaque serait NOIR par-dessus elles. Il disparaît d'un coup si la 3D
       s'arrête (contexte perdu, appareil trop lent) : les affiches sont
       déjà dessous. */
    html.lf-js .lf-scene-3d canvas {
        visibility: hidden;
        opacity: 0;
    }

    html.lf-mode-3d .lf-parcours-cadre.est-pret .lf-scene-3d canvas {
        visibility: visible;
        opacity: 1;
        transition: opacity .6s ease;
    }

    /* Vignettage léger sur la 3D (lot C) : un dégradé CSS au-dessus du
       canvas — rien à calculer pour la carte graphique. */
    html.lf-mode-3d .lf-parcours-cadre.est-pret .lf-scene-3d::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(ellipse at 50% 45%, rgba(12, 27, 79, 0) 58%, rgba(12, 27, 79, .16) 100%);
    }
}

/* ── Téléphone : une section un peu moins haute (780 vh au lieu de 900,
      config/site.php) — au pouce, chaque geste fait défiler plus loin qu'un
      cran de molette. ── */
@media (min-height: 520px) and (max-width: 767px) {
    html.lf-js .lf-parcours {
        height: calc(var(--parcours-vh-mobile, 780) * 1vh);
    }
}

/* ── Ordinateur : indicateur dans la marge gauche, jamais sur le sujet ;
      carte à gauche, illustration à droite. ── */
@media (min-height: 520px) and (min-width: 1024px) {
    html.lf-js .lf-indicateur {
        top: 50%;
        left: 1.5rem;
        transform: translateY(-50%);
    }

    html.lf-js .lf-indicateur ol {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        padding: .5rem .25rem;
    }

    /* Le titre du chapitre apparaît au survol et au clavier. Il reste dans
       la page pour les lecteurs d'écran (l'opacité ne le leur cache pas) :
       c'est le nom du lien. */
    html.lf-js .lf-indicateur-libelle {
        position: absolute;
        top: 50%;
        left: calc(100% + .75rem);
        padding: .375rem .75rem;
        border-radius: 10px;
        background-color: var(--lf-marine);
        color: #fff;
        font-size: .8125rem;
        font-weight: 700;
        white-space: nowrap;
        opacity: 0;
        transform: translate3d(-.25rem, -50%, 0);
        transition: opacity .18s ease, transform .18s ease;
        pointer-events: none;
    }

    html.lf-js .lf-indicateur a:hover .lf-indicateur-libelle,
    html.lf-js .lf-indicateur a:focus-visible .lf-indicateur-libelle {
        opacity: 1;
        transform: translate3d(0, -50%, 0);
    }

    html.lf-js .lf-recit {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 30rem) minmax(2rem, 1fr) minmax(0, 28rem) minmax(1.5rem, 5vw);
        grid-template-areas: ". carte . illustration .";
        align-items: center;
        gap: 0;
        padding: 3.5rem 0 2rem;
    }

    html.lf-js .lf-panneau--prologue {
        grid-template-columns: 6.5rem minmax(0, 32rem) minmax(1.5rem, 1fr) minmax(0, 30rem) minmax(1.5rem, 4vw);
    }

    html.lf-js .lf-panneau-carte {
        grid-area: carte;
    }

    html.lf-js .lf-panneau-illustration {
        grid-area: illustration;
    }

    html.lf-js .lf-telephone {
        height: min(30rem, calc(100vh - 13rem));
    }
}

/* ── Tablette et téléphone : l'illustration en haut, la carte en bas, la
      rangée de points sous la carte. ── */
@media (min-height: 520px) and (max-width: 1023px) {
    html.lf-js .lf-indicateur {
        right: 0;
        bottom: .75rem;
        left: 0;
        display: flex;
        justify-content: center;
    }

    html.lf-js .lf-indicateur ol {
        display: flex;
        gap: .125rem;
        padding: .25rem .5rem;
    }

    html.lf-js .lf-indicateur-libelle {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    html.lf-js .lf-recit {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: .875rem;
        padding: 3.25rem 1rem 3.5rem;
    }

    /* L'illustration passe AVANT la carte (elle la suit dans le HTML) : toutes
       les cartes sont ainsi posées en bas du cadre, au même endroit d'un
       chapitre à l'autre — condition du relais (panneaux.js), où la carte
       sortante et l'entrante se fondent l'une dans l'autre. */
    html.lf-js .lf-panneau-illustration {
        flex: 1 1 0;
        min-height: 0;
        order: -1;
    }

    html.lf-js .lf-panneau-carte {
        flex: none;
        align-self: center;
        width: 100%;
        max-width: 36rem;
        padding: 1.125rem 1.25rem;
        border-radius: 20px;
    }

    html.lf-js .lf-panneau-surtitre {
        margin-bottom: .375rem;
        font-size: .75rem;
    }

    html.lf-js .lf-panneau-titre {
        margin-bottom: .5rem;
        font-size: clamp(1.25rem, 1rem + 1.6vw, 1.75rem);
    }

    html.lf-js .lf-panneau-texte {
        font-size: .9375rem;
        line-height: 1.55;
    }

    html.lf-js .lf-accroche-titre {
        margin-bottom: .625rem;
        font-size: clamp(1.5rem, 1.1rem + 2.6vw, 2.25rem);
    }

    html.lf-js .lf-accroche-texte {
        margin-bottom: 1rem;
        font-size: .9375rem;
    }

    html.lf-js .lf-accroche-boutons {
        gap: .5rem;
    }

    html.lf-js .lf-accroche-boutons .lf-btn {
        flex: 1 1 auto;
        min-height: 2.75rem;
        padding: .625rem 1rem;
        font-size: .9375rem;
    }

    html.lf-js .lf-defiler {
        margin-top: .75rem;
    }

    /* Le téléphone se règle par sa hauteur : il prend la place laissée par
       la carte, sans jamais la pousser hors de l'écran. */
    html.lf-js .lf-prologue {
        height: 100%;
        max-height: 19rem;
    }

    html.lf-js .lf-telephone {
        height: 100%;
    }

    html.lf-js .lf-prologue-legende {
        max-width: 11rem;
        padding: .625rem .75rem;
    }

    html.lf-js .lf-etiquette-colis,
    html.lf-js .lf-preuve,
    html.lf-js .lf-mail,
    html.lf-js .lf-bon {
        max-height: 100%;
        overflow: hidden;
    }
}

/* Téléphone de petite hauteur : la carte seule. Une illustration réduite à
   quelques pixels n'apporterait rien et prendrait la place du texte. */
@media (min-height: 520px) and (max-height: 639px) and (max-width: 1023px) {
    html.lf-js .lf-panneau-illustration {
        display: none;
    }
}

/* ── Le parcours illustré (voyage.js, 27/09/2026) ──
      Un canvas 2D posé dans le calque des affiches, par-dessus leurs
      dégradés d'attente : il apparaît en fondu à sa première image, puis
      les dégradés ne sont plus peints (« lf-avec-voyage »). Quand la 3D a
      rendu, tout le calque s'efface avec elle (règle « est-pret » plus
      haut) ; si elle s'arrête, le dessin est déjà là, à la bonne
      progression. Les noms des dépôts de la carte de nuit sont du HTML,
      avec le style de ceux de la 3D. Décoratif : aria-hidden. */
.lf-voyage {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity .5s ease;
}

.lf-voyage.est-pret {
    opacity: 1;
}

.lf-voyage-toile {
    display: block;
    width: 100%;
    height: 100%;
}

/* Vignettage léger, comme sur la 3D : un dégradé CSS, peint une fois. */
.lf-voyage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%, rgba(12, 27, 79, 0) 58%, rgba(12, 27, 79, .16) 100%);
}

.lf-voyage-noms {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.lf-voyage-noms[hidden] {
    display: none !important;
}

.lf-voyage-noms .lf-nom-depot {
    margin-top: 0;
}

html.lf-js .lf-affiches.lf-avec-voyage .lf-affiche {
    display: none;
}

/* ── Noms des dépôts — carte de nuit (chapitre 3, moteur 3D) ──
      Créés par public/js/accueil/etiquettes.js : un conteneur aria-hidden
      inséré juste après #lf-scene, un nom par dépôt, déplacé à chaque image
      au-dessus de sa balise (le script écrit la transformation qui pose le
      bas-centre du nom sur le point visé ; ici, l'écart qui le décolle de la
      balise). Même z-index que la scène mais plus loin dans le DOM : au-dessus
      du canvas, sous les panneaux, l'indicateur et la barre. Rien ne s'y
      clique. Masqués sans JavaScript (le conteneur n'existe pas), en mode
      affiches, tant que la 3D n'a pas rendu (« est-pret » sur le cadre), hors
      du chapitre 3 (attribut hidden posé par le script) et à l'impression. */
.lf-noms-depots {
    display: none;
}

@media (min-height: 520px) {
    html.lf-mode-3d .lf-parcours-cadre.est-pret .lf-noms-depots {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        overflow: hidden;
        pointer-events: none;
    }
}

/* L'attribut « hidden » doit l'emporter sur l'affichage ci-dessus. */
.lf-noms-depots[hidden] {
    display: none !important;
}

.lf-nom-depot {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    margin-top: -.625rem;
    padding: .3125rem .625rem;
    border: 1px solid var(--lf-azur);
    border-radius: 999px;
    color: var(--lf-azur-clair);
    font-family: var(--lf-police-titres, var(--lf-police));
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.1;
    white-space: nowrap;
    pointer-events: none;
    will-change: transform;
}

/* La pastille : le marine foncé de la charte rendu translucide par
   l'opacité d'un calque placé derrière le texte, plutôt que par une couleur
   rgba de plus. */
.lf-nom-depot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--lf-marine-fonce);
    opacity: .8;
}

@media (max-width: 767px) {
    .lf-nom-depot {
        margin-top: -.5rem;
        padding: .25rem .5rem;
        font-size: .75rem;
    }
}

/* ══ 8. SECTION SUIVI ════════════════════════════════════════════════════
   Le reste de la section utilise la charte et Tailwind, comme l'ancien
   bandeau d'accueil. Seul le pictogramme du paiement à la livraison, qui
   remplace l'ancien sigle anglais écrit en grand, est réglé ici. */
.lf-chiffre-picto {
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
    vertical-align: middle;
}

/* ══ 9. SECTION EXPÉDITEURS ══════════════════════════════════════════════ */
.lf-expediteurs {
    padding: 4rem 0;
    background-image: linear-gradient(180deg, #fff 0%, var(--lf-azur-clair) 100%);
}

.lf-expediteurs-conteneur {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.lf-expediteurs-entete {
    max-width: 44rem;
    margin: 0 auto 3rem;
    text-align: center;
}

.lf-expediteurs-titre {
    margin: 0 0 .75rem;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--lf-marine-fonce);
}

.lf-expediteurs-texte {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(12, 27, 79, .72);
}

.lf-atouts {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lf-atout {
    padding: 1.5rem;
    border-radius: 20px;
}

.lf-atout-picto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    background-color: var(--lf-azur-clair);
    color: var(--lf-azur);
}

.lf-atout-picto svg {
    display: block;
    width: 1.625rem;
    height: 1.625rem;
}

.lf-atout-titre {
    margin: 0 0 .5rem;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--lf-marine-fonce);
}

.lf-atout-texte {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(12, 27, 79, .72);
}

.lf-expediteurs-boutons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 2.5rem;
}

@media (min-width: 640px) {
    .lf-atouts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .lf-expediteurs {
        padding: 5rem 0;
    }
}

@media (min-width: 1024px) {
    .lf-atouts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

/* Petits écrans (sous 640 px), page en colonne : le téléphone raccourcit. */
@media (max-width: 639px) {
    .lf-telephone {
        height: 21rem;
    }

    .lf-prologue-legende {
        max-width: 11rem;
    }
}

/* ══ 10. MOUVEMENT RÉDUIT ════════════════════════════════════════════════
   partials.animations ramène déjà toutes les durées à presque rien. On
   coupe en plus, franchement, ce qui est propre à cette page : les panneaux
   changent d'un coup, sans glisser ; rien ne se trace ni ne s'éclaire. */
@media (prefers-reduced-motion: reduce) {
    /* Les panneaux, eux, sont réglés par panneaux.js : en mouvement réduit,
       ni glissement ni roulement, une bascule presque franche. */
    html.lf-js .lf-indicateur-point,
    html.lf-js .lf-indicateur-libelle,
    html.lf-mode-3d .lf-parcours-cadre.est-pret .lf-affiches,
    html.lf-mode-3d .lf-parcours-cadre.est-pret .lf-scene-3d canvas,
    html.lf-js .lf-voyage {
        transition: none !important;
    }

    .lf-defiler svg,
    .lf-tunisie,
    .lf-signature path {
        animation: none !important;
    }
}

/* ══ 11. IMPRESSION ══════════════════════════════════════════════════════
   Le récit s'imprime comme un texte : les panneaux les uns sous les autres,
   sans affiches, sans illustrations ni commandes de navigation. */
@media print {
    .lf-evitement,
    .lf-affiches,
    .lf-scene-3d,
    .lf-noms-depots,
    .lf-progression,
    .lf-indicateur,
    .lf-parcours-actions,
    .lf-panneau-illustration {
        display: none !important;
    }

    .lf-parcours,
    html.lf-js .lf-parcours {
        height: auto !important;
        background: none !important;
    }

    .lf-parcours-cadre,
    html.lf-js .lf-parcours-cadre {
        position: static !important;
        height: auto !important;
        overflow: visible !important;
    }

    .lf-panneaux,
    html.lf-js .lf-panneaux {
        position: static !important;
        display: block !important;
        padding: 0 !important;
    }

    .lf-recit,
    html.lf-js .lf-recit {
        position: static !important;
        display: block !important;
        margin: 0 0 1.25rem !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* L'épilogue est une invitation, pas du récit. */
    .lf-accueil .lf-recit.lf-panneau--epilogue {
        display: none !important;
    }

    .lf-panneau-carte,
    .lf-panneau-contenu {
        opacity: 1 !important;
        transform: none !important;
    }

    .lf-panneau-carte,
    .lf-atout {
        box-shadow: none !important;
        border: 1px solid rgba(12, 27, 79, .2);
    }
}