/* =====================================================================
   Ulalu — essai de l'appareil photo jetable (/essai-appareil)
   ---------------------------------------------------------------------
   Chargée après camera.css, dont l'essai reprend la carte de l'appareil
   (.cam-card), le viseur (.cam) et la pellicule révélée (.roll,
   .roll-view). Ici, seulement ce que l'essai ajoute : la mise en page
   de la page publique, le QR code sur un ordinateur, la chambre noire
   du développement et le choix du rendu.

   Pensé pour 375 px de large d'abord : une colonne, cibles de 44 px au
   moins, déclencheur et « Développer » sous le pouce. Sur un ordinateur
   (pointeur fin, grand écran), le QR code passe devant.

   Sommaire : 1 page · 2 ordinateur · 3 viseur · 4 développement
   · 5 pellicule révélée · 6 mouvement
   ===================================================================== */

/* ---------- 1. Page ---------- */
.trial [hidden] { display: none !important; }

.trial {
    display: grid;
    gap: clamp(1.1rem, .9rem + 1vw, 1.8rem);
    max-width: 64rem;
    margin-inline: auto;
    /* Le développement et la pellicule ramènent la page en haut de l'essai : sous l'en-tête collant, pas derrière. */
    scroll-margin-top: 6rem;
}

.trial-head { max-width: 46rem; }
.trial-head .eyebrow { margin-bottom: .6rem; }
.trial-head h1 { margin: 0 0 .7rem; }
.trial-head .lead { margin: 0; }
/* Une fois la pellicule en développement, le titre suffit : la pellicule remonte sous le pouce. */
.trial.is-developing .trial-head .lead,
.trial.is-roll .trial-head .lead { display: none; }

.trial-start { display: grid; gap: 1.2rem; align-items: start; }
.trial-start__main { display: grid; gap: 1rem; min-width: 0; max-width: 34rem; }

/* La promesse de confidentialité : lisible d'un coup d'œil, au-dessus de l'appareil. */
.trial-promise {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    max-width: none;
    margin: 0;
    padding: .8rem 1rem;
    border: 1px solid color-mix(in srgb, var(--jade) 32%, var(--line));
    border-radius: var(--r);
    background: color-mix(in srgb, var(--jade) 8%, var(--surface));
    color: var(--ink);
    font-size: var(--t-sm);
    font-weight: 550;
    line-height: 1.45;
}
.trial-promise svg {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .05rem;
    fill: none;
    stroke: var(--jade);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trial-card { margin: 0; }
.trial-card .trial-develop { min-height: 52px; }
.trial-more { margin: 0; }

/* ---------- 2. Ordinateur : le QR code d'abord ---------- */
.trial-desk { display: none; }
.trial-desk__title { font-size: var(--t-lg); margin: 0; }
.trial-qr {
    width: 100%;
    max-width: 11rem;
    height: auto;
    aspect-ratio: 1;
    justify-self: center;
}
.trial-desk__url { word-break: break-all; }

@media (pointer: fine) and (min-width: 62rem) {
    .trial-start { grid-template-columns: minmax(18rem, 22rem) minmax(0, 34rem); justify-content: start; }
    .trial-desk { display: grid; gap: .8rem; order: -1; margin: 0; }
    /* Sur un ordinateur, l'appareil s'ouvre depuis « Essayer ici avec la webcam » ; la carte reprend ensuite la main. */
    .trial:not(.is-here) .trial-open { display: none; }
}

/* ---------- 3. Viseur ---------- */
.trial-slot { width: 48px; height: 48px; }

.trial-viewer__foot {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: none;
    min-height: 48px;
    margin: 0;
}

.trial-viewer__develop {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: .6rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #f4efe8;
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .12s;
}
.trial-viewer__develop:hover { background: rgba(255, 255, 255, .18); }
.trial-viewer__develop:active { transform: scale(.97); }
.trial-viewer__develop:focus-visible { outline: 2px solid #ffb347; outline-offset: 3px; }
/* Sa place reste réservée avant la première pose : le déclencheur ne bouge pas sous le pouce. */
.cam .trial-viewer__develop[hidden] { display: inline-flex !important; visibility: hidden; }
/* Pellicule terminée : c'est la seule action qui reste. */
.trial-viewer__develop.is-ready { border-color: #e8502f; background: #e8502f; color: #fff; }

@media (orientation: landscape) and (max-height: 32rem) {
    .trial-viewer__foot { grid-column: 2; grid-row: 3; }
    .trial-slot { display: none; }
}

/* ---------- 4. Développement : une chambre noire ---------- */
.trial-dev {
    display: grid;
    justify-items: center;
    gap: .9rem;
    padding: clamp(1.8rem, 1.2rem + 3vw, 3.2rem) var(--pad);
    border-radius: var(--r-xl);
    background: radial-gradient(90% 70% at 50% 18%, #3b1915 0%, #1b1115 55%, #0d090c 100%);
    box-shadow: var(--shadow-2);
    color: #f4efe8;
    color-scheme: dark;
    text-align: center;
}
.trial-dev h2 { margin: 0; color: #f4efe8; font-size: var(--t-xl); }
.trial-dev h2:focus { outline: none; }
.trial-dev p { max-width: 40ch; margin: 0; color: rgba(244, 239, 232, .76); font-size: var(--t-sm); }

.trial-dev__room { display: grid; justify-items: center; gap: 1rem; }

/* La lampe inactinique : la même que « en développement » dans la carte de l'invité, en plus grand. */
.trial-dev__lamp {
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background: #d9412b;
    box-shadow: 0 0 18px 6px rgba(217, 65, 43, .5);
    animation: cam-glow 2.4s ease-in-out infinite;
}

/* Une bande de film : une case par pose, qui s'éclaire à son tour. Aucune image des photos. */
.trial-dev__strip {
    display: flex;
    gap: .45rem;
    margin: 0;
    padding: .75rem .7rem;
    list-style: none;
    border-radius: 6px;
    background:
        radial-gradient(circle, #3a3136 45%, transparent 50%) left 6px top 3px / 14px 7px repeat-x,
        radial-gradient(circle, #3a3136 45%, transparent 50%) left 6px bottom 3px / 14px 7px repeat-x,
        #09070a;
}
.trial-dev__frame {
    position: relative;
    width: 2.5rem;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 3px;
    background: #1f1824;
}
.trial-dev__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, #ffdda6 0%, #f5a623 52%, #8d2f18 100%);
    opacity: 0;
    animation: trial-develop 1.6s ease-in forwards;
    animation-delay: calc(var(--i, 0) * 220ms);
}

/* ---------- 5. Pellicule révélée ---------- */
.trial-roll { display: grid; gap: 1rem; }
.trial-roll .card { margin: 0; }
.trial-roll h2 { margin-top: 0; }
.trial-roll h2:focus { outline: none; }
.trial-roll__card .roll__count { margin-bottom: .6rem; }
/* Cinq photos au plus : trois par rang sur un téléphone, toute la pellicule d'un coup d'œil. */
.trial-roll .roll__grid { grid-template-columns: repeat(auto-fill, minmax(min(5.4rem, 30%), 1fr)); }
@media (min-width: 40rem) {
    .trial-roll .roll__grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
}
.trial-keep { margin-top: .9rem; }


.trial-next { display: grid; gap: .2rem; }
.trial-next .eyebrow { margin-bottom: .3rem; }
.trial-next .cluster { margin-top: .4rem; }

/* La vue agrandie : le lien de téléchargement attend la photo rendue. */
.roll-view__download[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---------- 6. Mouvement ---------- */
@keyframes trial-develop {
    0% { opacity: 0; }
    100% { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
    .trial-dev__lamp { animation: none; }
    .trial-dev__frame::after { animation: none; opacity: .9; }
    .trial-viewer__develop { transition: none; }
}