/* Police auto-hébergée : servie depuis fonts.googleapis.com, elle transmettrait
   l'adresse IP de chaque visiteur à Google avant tout consentement. Un seul fichier
   variable couvre les graisses 300 à 700. */
@font-face {
    font-family: 'Inter';
    src: url('font/inter-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font-sans: 'Inter', sans-serif;
    --color-dark: #1a1a1a;
    --color-swatch-pink: #fcebee;
    --color-hot-text: #333bab;
    --color-off-white: #fff7f7;
    --color-muted: rgba(255, 247, 247, 0.78);
    --color-legal-text: #55556a;
    --color-error: #a01b2e;
    --color-bar: #ffffff;
    --color-success: #c6f583;
    --color-success-text: #1f3d05;
}
* {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
body {
    background-color: var(--color-dark);
    font-family: var(--font-sans);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.waiting {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
/* La photo et le voile restent au fond, le contenu au-dessus.
   Sans ces z-index, tout contenu repassé en flux normal serait peint SOUS la photo :
   le navigateur peint les éléments en flux avant les éléments positionnés. */
.waiting__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

/* Voile dégradé : le titre et les mentions sont posés en clair sur une photo dont
   le ciel est lumineux. Sans ce fond, le contraste tombe sous le seuil lisible. */
.waiting__scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        to top,
        rgba(26, 26, 26, 0.68) 0%,
        rgba(26, 26, 26, 0.42) 22%,
        rgba(26, 26, 26, 0.16) 36%,
        rgba(26, 26, 26, 0) 48%
    );
    pointer-events: none;
}

.waiting__logo-wrap {
    position: absolute;
    top: 9.375%;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    line-height: 0;
    filter: invert(1) brightness(2);
    overflow: hidden;
}
.waiting__panel {
    position: absolute;
    top: 52.34%;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    width: 747px;
    max-width: calc(100% - 32px);
}
.waiting__form {
    margin: 0;
}
.waiting__bar {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--color-bar);
    padding: 6px 6px 6px 31px;
}
.waiting__bar:focus-within {
    outline: 2px solid var(--color-off-white);
    outline-offset: 3px;
}
.waiting__email-input {
    flex: 1;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    color: var(--color-dark);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 8.75px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.waiting__email-input::placeholder {
    color: var(--color-dark);
    opacity: 1;
}
.waiting__email-input:focus {
    outline: none;
}
.waiting__email-input:-webkit-autofill,
.waiting__email-input:-webkit-autofill:hover,
.waiting__email-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-dark);
    -webkit-box-shadow: 0 0 0 1000px var(--color-bar) inset;
    box-shadow: 0 0 0 1000px var(--color-bar) inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* Le bouton reprend le noir de marque plutôt que le rose du compteur : sur fond
   blanc, #fcebee donne un contraste de 1,1:1 et se lit comme un champ désactivé. */
.waiting__submit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 196px;
    height: 72px;
    margin-left: 24px;
    border: none;
    background-color: var(--color-dark);
    color: var(--color-off-white);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 8.75px;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
                color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.waiting__submit:hover {
    background-color: var(--color-swatch-pink);
    color: var(--color-hot-text);
}
.waiting__submit:focus-visible {
    outline: 2px solid var(--color-hot-text);
    outline-offset: -6px;
}
.waiting__submit:active {
    transform: translateY(1px);
}
.waiting__submit[disabled] {
    cursor: default;
    opacity: 0.55;
}
.waiting__submit[disabled]:hover {
    background-color: var(--color-dark);
    color: var(--color-off-white);
}

/* Turnstile injecte toujours un conteneur, même sans défi à afficher : aucun
   sélecteur CSS ne peut distinguer « widget présent » de « widget visible ».
   On ne réserve donc aucune marge — le widget se place sous la carte le jour où
   Cloudflare décide de le montrer. */
.cf-turnstile {
    display: flex;
    justify-content: center;
}

/* Bande d'information sous la barre. Elle porte son propre fond parce qu'aucune
   couleur de texte ne peut atteindre 4,5:1 sur cette zone de la photo : le fond y
   plafonne à une luminance de 0,42, où même du blanc pur ne donne que 2,2:1.
   Le rose de marque y retrouve son rôle d'origine, celui du bloc compteur. */
.waiting__info {
    background-color: var(--color-swatch-pink);
    padding: 14px 20px 15px;
    text-align: center;
    transition: background-color 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* État atteint après le clic sur le lien de confirmation reçu par e-mail.
   Seule la bande change : la barre du dessus reste intacte. */
.waiting__info--confirme {
    background-color: var(--color-success);
    padding: 22px 20px 24px;
}
.waiting__info--confirme .waiting__status {
    color: var(--color-success-text);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.waiting__status {
    margin: 0;
    color: var(--color-hot-text);
    font-weight: 600;
    font-size: 11px;
    line-height: 18px;
    letter-spacing: 0.3px;
}
.waiting__status:not(:empty) {
    margin-bottom: 10px;
}
.waiting__status--erreur {
    color: var(--color-error);
}

.waiting__counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.waiting__counter[hidden] {
    display: none;
}
.waiting__counter-icon {
    display: block;
    width: 45px;
    height: 11px;
}
.waiting__counter-text {
    margin: 0;
    color: var(--color-hot-text);
    font-weight: 600;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Mise en page en flux, activée par waiting.js quand le bloc de parrainage
   apparaît.
   La maquette place la carte et le titre à des pourcentages fixes de la hauteur
   de fenêtre : à 1440x900, il reste 209 px entre les deux, et le parrainage en
   ajoute 163 à une carte qui en fait déjà 166. Aucun réglage de marges ne fait
   rentrer ça. Plutôt que de retirer « Bientôt disponible » de la maquette, on
   empile les mêmes éléments et la page défile — c'est exactement la mise en
   page déjà utilisée sur mobile et sur écran court. Rien ne disparaît. */
.flux,
.flux body {
    overflow: auto;
}
.flux .waiting {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    padding: 56px 16px 64px;
}
/* `relative` et non `static` : sans z-index actif, le contenu repasserait sous
   la photo, qui est positionnée en absolu. */
.flux .waiting__logo-wrap,
.flux .waiting__panel,
.flux .waiting__footer,
.flux .waiting__legal-links {
    position: relative;
    transform: none;
    left: auto;
    top: auto;
    bottom: auto;
}
.flux .waiting__panel {
    margin: 40px 0;
}
.flux .waiting__footer {
    padding: 0;
}
.flux .waiting__legal-links {
    margin-top: 28px;
}

/* Bloc de parrainage, révélé dans la bande verte après confirmation. */
.parrain {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(31, 61, 5, 0.22);
    text-align: center;
}
.parrain[hidden] {
    display: none;
}
.parrain__titre {
    margin: 0;
    color: var(--color-success-text);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.parrain__texte {
    margin: 8px 0 0;
    color: var(--color-success-text);
    font-weight: 400;
    font-size: 11px;
    line-height: 17px;
}
.parrain__lien {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-top: 14px;
}
.parrain__url {
    flex: 1;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid rgba(31, 61, 5, 0.28);
    background-color: rgba(255, 255, 255, 0.55);
    padding: 10px 12px;
    color: var(--color-success-text);
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.2px;
}
.parrain__url:focus {
    outline: 2px solid var(--color-success-text);
    outline-offset: -1px;
}
.parrain__copier {
    flex-shrink: 0;
    border: none;
    background-color: var(--color-success-text);
    color: var(--color-success);
    padding: 0 18px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.parrain__copier:hover,
.parrain__copier:focus-visible {
    opacity: 0.82;
}
.parrain__compteur {
    margin: 10px 0 0;
    color: var(--color-success-text);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.parrain__reglement {
    margin: 8px 0 0;
    font-size: 10px;
}
.parrain__reglement a {
    color: var(--color-success-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: 0.75;
}

.waiting__legal {
    margin: 8px 0 0;
    color: var(--color-legal-text);
    font-weight: 400;
    font-size: 10px;
    line-height: 16px;
}
.waiting__legal a {
    color: var(--color-hot-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.waiting__legal a:hover,
.waiting__legal a:focus-visible {
    color: var(--color-dark);
}

.waiting__footer {
    position: absolute;
    top: 80.28%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 16px;
    text-align: center;
}
.waiting__title {
    margin: 0;
    color: var(--color-off-white);
    font-weight: 600;
    font-size: 54.937px;
    text-transform: uppercase;
    white-space: nowrap;
}
.waiting__text {
    margin: 8px 0 0;
    color: var(--color-off-white);
    font-weight: 300;
    font-size: 12px;
}

.waiting__legal-links {
    position: absolute;
    bottom: 18px;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 16px;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 300;
    text-align: center;
}
.waiting__legal-links-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.waiting__legal-links a {
    color: var(--color-muted);
    text-decoration: none;
}
.waiting__legal-links a:hover,
.waiting__legal-links a:focus-visible {
    color: var(--color-off-white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Sélecteur de langue : de simples liens, sans menu déroulant ni JavaScript.
   Six entrées tiennent sur une ligne et restent atteignables au clavier comme
   par les robots d'indexation, ce qu'un <select> piloté en JS ne permet pas. */
/* Drapeaux plutôt que noms de langues. Les emojis sont rendus par la police
   système du visiteur, jamais par Inter : ils gardent donc leurs couleurs. */
.lang-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    font-size: 21px;
    line-height: 1;
}
.lang-switch a,
.lang-switch__current {
    display: block;
    padding: 4px 2px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
/* Distinction par l'opacité seule, jamais par la désaturation : un drapeau gris
   n'est plus identifiable, ce qui annule l'intérêt même du drapeau. */
.lang-switch a {
    opacity: 0.45;
    transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lang-switch a:hover,
.lang-switch a:focus-visible {
    opacity: 1;
}
.lang-switch__current {
    border-bottom-color: var(--color-off-white);
}

/* Seuils calculés, pas devinés. En largeur : la barre mesure 747 px, elle a besoin
   de 780 px pour respirer. En hauteur : le panneau se termine vers 52,34 % + 167 px
   et le titre commence vers 80,28 % - 40 px ; ces deux zones entrent en collision
   sous 620 px de fenêtre. Le seuil est posé à 720 px pour garder une marge.
   Attention à ne pas remonter ce seuil : un portable 1440x900 n'offre que ~800 px
   de fenêtre utile, et basculerait à tort en mise en page mobile. */
@media (max-width: 780px), (max-height: 720px) {
    html, body {
        overflow: auto;
    }
    .waiting {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;
        padding: 56px 16px 64px;
    }
    /* `relative` et non `static` : le z-index doit rester actif, sans quoi le contenu
       repasse sous la photo absolue. */
    .waiting__logo-wrap,
    .waiting__panel,
    .waiting__footer,
    .waiting__legal-links {
        position: relative;
        transform: none;
        left: auto;
        top: auto;
        bottom: auto;
    }
    .waiting__panel {
        width: 100%;
        margin: 40px 0;
    }
    .waiting__footer {
        padding: 0;
    }
    .waiting__legal-links {
        margin-top: 28px;
    }
    .waiting__title {
        font-size: 34px;
        white-space: normal;
    }
    .waiting__bar {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px;
    }
    .waiting__email-input {
        flex: 1 0 100%;
        padding: 12px 4px;
        font-size: 12px;
    }
    .waiting__submit {
        width: 100%;
        margin-left: 0;
        height: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .waiting__submit {
        transition: none;
    }
    .waiting__submit:active {
        transform: none;
    }
}