/*
 * Feuille commune des éléments du thème enfant (slider, horaires, archives, pages programme et
 * événement). Chargée une fois par page par \YOOtheme\Child\LcCommun::balises(), avec
 * lc-commun.js. Une retouche ici vaut pour toutes les applications.
 *
 * Tout est écrit dans  (spécificité nulle) : la feuille d'un élément peut toujours préciser
 * une règle sans se soucier de l'ordre de chargement.
 *
 * 1. L'écartement des cartes de films : celui du Slider Le Cratère (référence des cartes, tag git
 *    slider-seances-reference), le même pour toutes les grilles d'affiches ; les pastilles de la
 *    ligne du film.
 * 2. La fenêtre (lc-commun.js, LcCommun.fenetre) : feuille du bas sur téléphone, boîte centrée
 *    au-delà, affiche à gauche, bouton Fermer de 32 px, boutons vers la fiche d'à côté.
 *    Réglages par fenêtre (variables) : --lc-fen-accent (couleur), --lc-fen-largeur (760px),
 *    --lc-fen-colonne (largeur de l'affiche, 220px), --lc-fen-format (forme de l'affiche, 2/3).
 */

/* 1. Écartement des cartes de films. */
:root{--lc-carte-ecart:16px}
@media (min-width:640px){:root{--lc-carte-ecart:24px}}
@media (min-width:960px){:root{--lc-carte-ecart:32px}}

/* Pastilles de la ligne du film (« AD », « Jeune public, dès 3 ans » : LcFiche::ligneFilm). */
.lc-acc-marque{display:inline-block;margin:0 0 0 4px;padding:1px 9px;border-radius:10px;background:var(--lc-acc-accent,var(--lc-fen-accent,#d21e08));color:#fff;font-size:.75rem;font-weight:700;line-height:1.5;white-space:nowrap;vertical-align:1px}

/* 2. La fenêtre. */
.lc-fen{--lc-fen-trait:rgba(0,0,0,.12);--lc-fen-fond:rgba(0,0,0,.04);padding:0;border:0;border-radius:12px 12px 0 0;width:100%;max-width:100%;max-height:88vh;margin:auto 0 0;background:#fff;color:inherit;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.lc-fen::backdrop{background:rgba(0,0,0,.6)}
.lc-fen[open]{animation:lc-fen-entree .8s cubic-bezier(.2,.7,.2,1)}
.lc-fen[open]::backdrop{animation:lc-fen-fondu .8s ease}
@keyframes lc-fen-entree{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lc-fen-fondu{from{opacity:0}to{opacity:1}}
@media (min-width:640px){.lc-fen{margin:auto;width:min(var(--lc-fen-largeur,760px),calc(100% - 32px));border-radius:12px;max-height:86vh}}

.lc-fen-boite{position:relative;display:grid;grid-template-columns:1fr;gap:16px;padding:20px 16px 24px}
@media (min-width:640px){.lc-fen-boite{grid-template-columns:var(--lc-fen-colonne,220px) 1fr;gap:24px;padding:28px}}
@media (min-width:640px){.lc-fen-sans-affiche .lc-fen-boite{grid-template-columns:1fr;gap:16px}}

/* L'affiche : masquée sur téléphone (la place va au texte), à gauche au-delà, qui reste en vue. */
.lc-fen-affiche{display:none}
@media (min-width:640px){
    .lc-fen-affiche{display:block;align-self:start;position:sticky;top:0}
    .lc-fen-affiche img,.lc-fen-affiche picture{display:block;width:100%;height:auto;aspect-ratio:var(--lc-fen-format,2/3);object-fit:cover;border-radius:4px}
}
.lc-fen-corps{display:flex;flex-direction:column;gap:10px;min-width:0}
.lc-fen-titre{margin:2px 40px 0 0;font-size:1.75rem;font-weight:700;line-height:1.15;color:var(--lc-fen-accent,#d21e08)}
.lc-fen-titre a{color:inherit;text-decoration:none}
.lc-fen-titre a:hover{text-decoration:underline}

/* Fiches d'à côté. */
.lc-fen-nav{grid-column:1/-1;display:flex;justify-content:space-between;gap:8px;padding-top:14px;border-top:1px solid var(--lc-fen-trait)}
.lc-fen-autre{display:inline-flex;align-items:center;gap:6px;min-height:36px;max-width:48%;padding:0 14px;border:1px solid var(--lc-fen-trait);border-radius:4px;background:#fff;color:var(--lc-fen-accent,#d21e08);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:border-color .6s ease,background-color .6s ease}
.lc-fen-autre span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-fen-autre:hover{border-color:var(--lc-fen-accent,#d21e08);background:#fdf1ef}
.lc-fen-autre[hidden]{display:none}
.lc-fen-autre[data-cote="droite"]{margin-left:auto}

.lc-fen-fermer{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--lc-fen-fond);color:inherit;cursor:pointer}
.lc-fen-fermer svg{width:16px;height:16px}
.lc-fen-fermer:hover{background:var(--lc-fen-trait)}
.lc-fen :focus-visible{outline:3px solid var(--lc-fen-accent,#d21e08);outline-offset:2px}

/* Fenêtre ouverte : la page ne défile plus, la place de la barre de défilement reste réservée. */
html.lc-fen-fige{overflow:hidden;scrollbar-gutter:stable}

@media (prefers-reduced-motion:reduce){.lc-fen[open],.lc-fen[open]::backdrop{animation:none}}
@media print{.lc-fen-nav{display:none!important}}