/* Page de redirection vers les boutiques d'applications.
 *
 * Une page courte, vue presque toujours depuis un ordinateur : pas de
 * sections, pas de défilement, tout tient dans un écran. Les couleurs suivent
 * le réglage du système, comme le reste des landings.
 */

:root {
    color-scheme: light dark;

    --fond: #ffffff;
    --fond: light-dark(#ffffff, #14121a);

    --fond-doux: #f6f4f9;
    --fond-doux: light-dark(#f6f4f9, #1c1926);

    --texte: #1c1a22;
    --texte: light-dark(#1c1a22, #e9e7ef);

    --discret: #635e70;
    --discret: light-dark(#635e70, #a29dae);

    --trait: #e4e1ea;
    --trait: light-dark(#e4e1ea, #2c2836);

    --titre: #6b2fa0;
    --titre: light-dark(#6b2fa0, #c9a4ec);

    --marque: #6b2fa0;
    --marque-fonce: #55257f;
    --sur-marque: #ffffff;

    --rayon: .75rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 2.5rem 1.5rem;
    background: var(--fond);
    color: var(--texte);
    font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-align: center;
}

/* Sans pied de page, le contenu se centre verticalement plutôt que de rester
   collé en haut d'un écran large. */
main {
    margin: auto;
    width: 100%;
    max-width: 30rem;
}

img { max-width: 100%; height: auto; }

.logo {
    display: block;
    width: auto;
    height: 2.5rem;
    margin: 0 auto 2.5rem;
}

h1 {
    margin: 0 0 .75rem;
    color: var(--titre);
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    line-height: 1.2;
    letter-spacing: -.01em;
}

.accroche {
    margin: 0 0 2.5rem;
    color: var(--discret);
}

/* --- le QR code ------------------------------------------------------- */

.qr {
    padding: 1.75rem;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    background: var(--fond-doux);
}

/* Le motif est dessiné en noir sur fond transparent. En thème sombre il
   deviendrait illisible : on lui garde un fond blanc et une marge, ce qui est
   de toute façon ce qu'un lecteur de QR attend — le contraste et la zone
   calme autour du motif font partie de ce qui le rend lisible. */
.qr img {
    display: block;
    width: 13.75rem;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1.25rem;
    padding: .5rem;
    border-radius: .5rem;
    background: #ffffff;
}

.qr p { margin: 0; color: var(--discret); font-size: .9375rem; }

.qr strong { color: var(--texte); }

/* --- les boutiques ---------------------------------------------------- */

.ou {
    margin: 1.75rem 0 1rem;
    color: var(--discret);
    font-size: .875rem;
}

.boutiques {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

.bouton {
    flex: 1 1 10rem;
    padding: .85rem 1.5rem;
    border-radius: 999px;
    background: var(--marque);
    color: var(--sur-marque);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}

.bouton:hover { background: var(--marque-fonce); }

.bouton:active { transform: translateY(1px); }

a:focus-visible {
    outline: 2px solid var(--titre);
    outline-offset: 3px;
}