/* =====================================================================
   Ulalu — essai de la page des invités (/essai-invites)
   ---------------------------------------------------------------------
   Chargée après guest.css et hall.css, dont l'essai reprend tout : le
   hall à tuiles, les écrans, le dépôt, la voix, le livre d'or et « Vos
   envois ». Ici, seulement ce que l'essai ajoute : la page publique
   autour, le cadre du téléphone, le QR code sur un ordinateur, et la
   phrase qui rappelle que rien n'est parti.

   Le cadre est un téléphone quelle que soit la largeur de l'écran : les
   règles de guest.css et de hall.css qui ne valent que pour un écran
   étroit (§ 11, une colonne de tuiles) y sont reprises sans condition,
   et celles d'un grand écran (deux colonnes de tuiles) y sont défaites.
   Sans cela, un ordinateur aurait dessiné dans un cadre de 25 rem la
   page d'un écran de 64 rem.

   Toutes les couleurs viennent des jetons, sauf le bord du téléphone :
   le mode sombre suit.

   Sommaire : 1 page · 2 téléphone · 3 ce que l'essai ajoute
   · 4 à côté du téléphone · 5 ordinateur
   ===================================================================== */

/* ---------- 1. Page ---------- */
.gt {
    display: grid;
    gap: clamp(1.1rem, .9rem + 1vw, 1.8rem);
    max-width: 64rem;
    margin-inline: auto;
}

.gt-head { max-width: 46rem; }
.gt-head .eyebrow { margin-bottom: .6rem; }
.gt-head h1 { margin: 0 0 .7rem; }
.gt-head .lead { margin: 0; }

/* La promesse : lisible d'un coup d'œil, au-dessus du téléphone (la même que sur /essai-appareil). */
.gt-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;
}

.gt-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;
}

/* Une colonne jusqu'à l'ordinateur ; sur une tablette, le téléphone garde une largeur de téléphone, centré. */
.gt-stage {
    display: grid;
    gap: 1.4rem;
    align-items: start;
    justify-items: center;
}

.gt-stage > * {
    width: 100%;
    max-width: 30rem;
}

/* ---------- 2. Le téléphone ---------- */
.gt-phone {
    position: relative;             /* les champs fichier masqués de guest.css s'y rangent */
    min-width: 0;
    padding: .75rem .75rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--paper);
    box-shadow: var(--shadow-2);
    /* Un écran qui s'ouvre ramène son haut sous l'en-tête collant du site, pas derrière. */
    scroll-margin-top: 5rem;
}

.gt-phone .gp { scroll-margin-top: 5rem; }

/* La barre du haut : ce qui dit, avant tout le reste, que la fête est inventée. */
.gt-phone__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .5rem;
    max-width: none;
    margin: 0 0 .9rem;
    color: var(--muted-ink);
    font-size: var(--t-xs);
    text-align: center;
}

.gt-phone__badge {
    display: inline-flex;
    padding: .15rem .65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--amber) 24%, var(--surface));
    color: var(--ink);
    font-weight: 650;
}

/* Les règles d'un téléphone (guest.css § 11), sans condition de largeur. */
.gt-phone .g-shell { gap: .8rem; }
.gt-phone .g-uploader { gap: .8rem; }
.gt-phone .g-hero .eyebrow { margin-bottom: .45rem; }
.gt-phone .g-hero .lead { font-size: var(--t-sm); line-height: 1.45; }

/* Le titre de la vraie page est un h1 ; ici un h2, à la taille qu'a le h1 sur un téléphone. */
.gt-hero__title {
    margin: 0 0 .4rem;
    font-size: var(--t-xl);
}

.gt-phone .g-drop { padding: .9rem .85rem 1rem; border-radius: var(--r-lg); }
.gt-phone .g-drop h2 { font-size: var(--t-lg); }
.gt-phone .g-drop__hint { font-size: var(--t-sm); }
.gt-phone .g-drop__art { width: 2.6rem; height: 2.6rem; margin-bottom: .1rem; }
.gt-phone .g-drop__art svg { width: 1.35rem; height: 1.35rem; }
.gt-phone .g-drop__actions { margin-top: .65rem; gap: .45rem; }
.gt-phone .g-limits { margin-top: .55rem; font-size: var(--t-xs); line-height: 1.35; }
.gt-phone .g-send { padding: .6rem 0; margin-top: 0; }

/* Une colonne de tuiles, comme sur un téléphone (hall.css § 6 défait). */
.gt-phone .hall__grid { grid-template-columns: minmax(0, 1fr); }
.gt-phone .hall__item--quiet { grid-column: auto; }
.gt-phone .g-item__row { grid-template-columns: 3.4rem minmax(0, 1fr) 2.75rem; }
.gt-phone .g-item__thumb { width: 3.4rem; height: 3.4rem; }

/* La tuile de l'appareil est un lien vers son propre essai : même allure qu'un bouton du hall. */
a.hall__tile,
a.hall__tile:hover { color: inherit; text-decoration: none; }

/* ---------- 3. Ce que l'essai ajoute ---------- */
/* Une vidéo choisie a sa vignette, prise dans la mémoire du téléphone comme les photos. */
.g-item__thumb video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mine__cell video {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-sm);
    opacity: .72;
}

/* Une case de « Vos envois » dont le fichier ne se dessine pas ici : vide, à sa place, avec son « Retirer ». */
.gt-blank {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--muted-ink);
}

.gt-blank::after { content: "\25A6"; font-size: 1.1rem; }
.gt-blank.is-video::after { content: "\25B6"; }

/* L'emplacement d'un aperçu : le script y pose l'image, la page n'en porte aucune. */
.gt-thumb { display: contents; }

/* Après chaque « envoi » : la phrase qui rappelle qu'il n'a pas eu lieu. */
.gt-note {
    max-width: none;
    margin: .7rem 0 0;
    padding: .45rem .7rem;
    border-left: 3px solid var(--jade);
    border-radius: 4px;
    background: color-mix(in srgb, var(--jade) 8%, var(--surface));
    color: var(--ink);
    font-size: var(--t-xs);
    font-weight: 550;
    line-height: 1.45;
}

.g-report .gt-note { margin-bottom: .9rem; }

/* ---------- 4. À côté du téléphone ---------- */
.gt-side {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.gt-side .card { margin: 0; }

.gt-next h2 { margin: 0 0 .5rem; }
.gt-next .button { white-space: normal; }
.gt-next__more { margin-top: .8rem; text-align: center; font-size: var(--t-sm); }

/* Le QR code ne sert qu'à qui n'est pas déjà sur son téléphone. */
.gt-desk { display: none; }
.gt-desk__title { margin: 0; font-size: var(--t-lg); }

.gt-qr {
    justify-self: center;
    width: 100%;
    max-width: 11rem;
    height: auto;
    aspect-ratio: 1;
}

.gt-desk__url { word-break: break-all; }

/* ---------- 5. Ordinateur ---------- */
/* Le téléphone à gauche, à la largeur d'un téléphone, dans son bord ; le QR code et l'achat restent à côté. */
@media (min-width: 62rem) {
    .gt-stage {
        grid-template-columns: minmax(0, 25rem) minmax(16rem, 22rem);
        justify-content: center;
        justify-items: stretch;
        gap: 2.5rem;
    }

    .gt-stage > * { max-width: none; }

    .gt-side { position: sticky; top: 5.5rem; }

    .gt-phone {
        padding: 1rem 1rem 1.25rem;
        border: .55rem solid #1b1620;
        border-radius: 2.6rem;
        box-shadow: 0 0 0 1px var(--line), var(--shadow-3);
    }
}

@media (pointer: fine) and (min-width: 62rem) {
    .gt-desk { display: grid; gap: .8rem; }
}