/* 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;
}
* {
    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;
}
.logo-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-80px);
    animation: shimmer 2600ms cubic-bezier(0.16, 1, 0.3, 1) 900ms 1 forwards;
    pointer-events: none;
}
@keyframes shimmer {
    to {
        transform: translateX(200px);
    }
}

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

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

.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: 20px;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 300;
}
.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;
}

/* 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) {
    .logo-shimmer {
        animation: none;
        opacity: 0;
    }
    .waiting__submit {
        transition: none;
    }
    .waiting__submit:active {
        transform: none;
    }
}