/*
 * L'appel : un panneau « console » posé dans la page claire. Le panneau
 * redéfinit les jetons sémantiques en blanc, donc le surtitre, le chapô et le
 * circuit s'y adaptent sans variante.
 */

.appel {
    position: relative;
}

/* Fond, jetons, faisceau et coins de visée viennent de hitech.css. */
.appel__panneau {
    display: grid;
    align-content: center;
    /* Plus d'écran entier : le panneau s'ajuste à son contenu (retour de la rédaction, 13/10). */
    min-block-size: 0;
    padding: clamp(2rem, 4.5vw, 3.75rem);
    border-radius: clamp(1.25rem, 3vw, 2.5rem);
    overflow: clip;
    box-shadow: 0 50px 120px -50px rgb(7 3 32 / 0.85);
}

/* Les halos du circuit sont faits pour un fond clair : ici, ils salissent. */
.appel__panneau .circuit::after {
    display: none;
}

.appel__contenu {
    position: relative;
    z-index: var(--z-contenu);
    display: grid;
    gap: 1.25rem;
    justify-items: start;
    text-align: start;
}

.appel__titre {
    max-inline-size: 22ch;
    background: linear-gradient(100deg, #fff 45%, #9fdcff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.appel__chapo {
    max-inline-size: 52ch;
}

.appel__actions {
    margin-block-start: 0.5rem;
}

.appel__rassurances {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin-block-start: 1.5rem;
    list-style: none;
    padding: 0;
    color: var(--texte-tres-doux);
}

.appel__rassurances li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.appel__rassurances li::before {
    content: "";
    inline-size: 0.35em;
    block-size: 0.35em;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
}

/* — Version compacte, en fin de page intérieure — */
.appel--compact .appel__panneau {
    min-block-size: 0;
    padding: clamp(2rem, 5vw, 4rem);
}

.appel--compact .appel__titre {
    max-inline-size: 22ch;
}