/* Parking page — white and gold (SPEC 6).
   Read in ten seconds, on a phone, often one-handed. */

/* ── Oswald 300, hébergée localement, aucun CDN (SPEC 6) ──────────────────
   Une TROISIÈME police, en dérogation assumée à la règle « deux polices ».
   Elle ne sert qu'aux chiffres du décompte : ses capitales font 0,810 em
   contre 0,729 à une police système, pour une largeur de chiffre 19 % plus
   faible. C'est ce rapport qui permet des chiffres plus hauts sans élargir
   les cinq colonnes.
   Licence SIL Open Font — voir assets/fonts/oswald-LICENSE.txt */
@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/assets/fonts/oswald-300-latin.woff2") format("woff2");
    /* Latin de base : 12 552 octets, le reste ne sert à rien ici. */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --white: #FFFFFF;
    --gold:  #C69E4A;
    --ink:   #181614;
    --rest:  #8A8A8A;

    /* Vertical stretch of the countdown figures. 1 = no stretch.
       Beyond about 1.4 the strokes thicken visibly. */
    --stretch: 1;
}

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

/* A stylesheet's display beats the hidden attribute; this restores it. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100svh;
    /* Colonne : le contenu se centre, le pied tient le bas. */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem 1.75rem;
    background: var(--white);
    color: var(--ink);
    /* The readable face: everything that is not a name or a title (SPEC 6). */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-align: center;
}

main {
    width: 100%;
    max-width: 46rem;
    /* Prend toute la hauteur disponible et centre son contenu dedans,
       ce qui laisse le pied descendre au bas de l'écran. */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── L'annonce, au-dessus du logo ─────────────────────────────────────── */

.annonce {
    margin: 0 0 clamp(1.5rem, 5vh, 2.75rem);
    /* La police lisible, jamais la manuscrite : celle-ci ne sert qu'aux
       prénoms et aux titres (SPEC §6). Et Pristina n'existe ici qu'en
       tracés, pour trois textes déjà convertis — cette phrase n'en fait
       pas partie et ne pourrait pas y être ajoutée. */
    font-size: clamp(.85rem, 3.4vw, 1.05rem);
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* Le même traitement que les libellés du décompte, pour que la page
       n'ait que deux niveaux de voix : l'or qui annonce, le gris qui situe. */
    color: var(--rest);
    text-wrap: balance;
}

/* ── Logo ─────────────────────────────────────────────────────────────── */

.logo {
    display: block;
    width: 100%;
    max-width: 34rem;
    height: auto;
    margin: 0 auto;
    /* Reserved from the start so the page does not jump when it loads. */
    aspect-ratio: 872 / 501;
}

/* ── « Nous nous marions » — Pristina, converted to paths ─────────────── */

.marions {
    margin: 1.25rem auto 2rem;
    width: 100%;
    max-width: 22rem;
    /* The SVG inherits this through fill="currentColor", which is why it is
       written into the page rather than served through an <img>. */
    color: var(--ink);
}

.marions svg { display: block; width: 100%; height: auto; }

/* ── Countdown ────────────────────────────────────────────────────────── */

/* Five columns, always. A flex row with a minimum width wraps on a 360 px
   phone — measured, not guessed: five units of 3.9rem plus four gaps need
   334.4 px, and a 360 px screen only offers 328 px of usable width. A grid
   divides what there is instead of demanding what there isn't. */
.countdown {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* ⚠️ L'écart entre colonnes doit être NETTEMENT plus grand que celui
       entre deux chiffres d'un même nombre, sinon « 26 22 33 » se lit comme
       une seule suite et le groupement par unité disparaît. Il suit la
       largeur d'écran : une valeur fixe déborderait sur téléphone. */
    gap: clamp(.35rem, 2vw, 1.1rem);
    max-width: 38rem;
    margin: 0 auto;
}

.unit {
    min-width: 0;
    padding: .5rem .15rem;
}

.value {
    display: block;
    font-family: "Oswald", system-ui, sans-serif;
    /* Taille de repli, dimensionnée pour une police système, dont les
       chiffres font 0,636 em. La grande taille ci-dessous n'est appliquée
       qu'une fois Oswald réellement chargée : sinon les cinq colonnes
       déborderaient de 4 à 11 %. */
    font-size: clamp(1.6rem, 10vw, 3.6rem);
    font-weight: 300;
    line-height: 1;
    color: var(--gold);

    /* Étirement supplémentaire, si un jour vous en voulez plus. Oswald est
       déjà haute et étroite : 1 suffit. */
    transform: scaleY(var(--stretch));
    transform-origin: center bottom;
    padding-top: calc((var(--stretch) - 1) * 1em);
}

/* Oswald est arrivée : ses chiffres sont 19 % plus étroits pour des
   capitales plus hautes, donc on peut grossir. La classe est posée par
   site.js, à travers document.fonts. */
.fonte-ok .value { font-size: clamp(2.2rem, 13.5vw, 5.25rem); }

/* ⚠️ Oswald N'A PAS de chiffres à largeur fixe : le « 1 » mesure 0,348 em
   quand le « 0 » en fait 0,517. Sans cela, les chiffres se décaleraient
   horizontalement à chaque seconde. `font-variant-numeric: tabular-nums`
   ne peut rien ici, la police n'ayant pas la fonctionnalité `tnum` — d'où
   une boîte de largeur fixe par chiffre, posée par site.js. */
.value .d {
    display: inline-block;
    /* La largeur du chiffre le plus large d'Oswald — 0,517 em. Plus large,
       un blanc s'insère entre les chiffres d'un même nombre.
       ⚠️ min-width et non width : un chiffre de police système mesure
       0,636 em, et se chevaucherait dans une boîte de 0,52. Si Oswald
       n'arrive pas, la boîte s'élargit et la police système, elle, a bien
       des chiffres de largeur fixe. Stable dans les deux cas. */
    min-width: .52em;
    text-align: center;
}

.label {
    display: block;
    margin-top: .3rem;
    font-size: clamp(.5rem, 1.9vw, .68rem);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rest);
}

/* Before the script runs, the figures are dashes rather than zeros: a zero
   would read as "it is over". */
.countdown[data-waiting] .value { color: var(--rest); }

.done-message {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
    color: var(--gold);
}

.countdown.is-done + .done-message { display: block; }
.done-message { display: none; }

/* Not shown, but read aloud: the visible figures tick too fast for that. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.no-js { color: var(--rest); font-size: .9rem; }

/* ── Animation ────────────────────────────────────────────────────────── */

/* ⚠️ Les deux animations reconduisent scaleY. Une règle @keyframes remplace
   la propriété transform entière : sans ce rappel, chaque chiffre perdrait
   son étirement le temps de l'animation, puis le retrouverait d'un coup. */

@keyframes roll {
    from { transform: translateY(-42%) scaleY(var(--stretch)); opacity: 0; }
    to   { transform: translateY(0)    scaleY(var(--stretch)); opacity: 1; }
}

@keyframes flip {
    0%   { transform: scaleY(var(--stretch)) rotateX(0deg); }
    45%  { transform: scaleY(var(--stretch)) rotateX(-88deg); opacity: .35; }
    55%  { transform: scaleY(var(--stretch)) rotateX(88deg);  opacity: .35; }
    100% { transform: scaleY(var(--stretch)) rotateX(0deg);   opacity: 1; }
}

.value.roll { animation: roll .34s cubic-bezier(.2, .7, .3, 1); }
.value.flip { animation: flip .55s ease-in-out; transform-origin: center center; }

/* Everything above is decoration. Someone who asked for less movement gets
   the figures and nothing else. */
@media (prefers-reduced-motion: reduce) {
    .value.roll, .value.flip { animation: none; }
}


/* ── Pied de page ─────────────────────────────────────────────────────── */

.pied {
    width: 100%;
    max-width: 46rem;
    padding-top: 2rem;
    /* Explicite : ne pas dépendre de l'héritage du body. */
    text-align: center;
    font-size: .85rem;
}

.pied a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(198, 158, 74, .4);
    padding-bottom: 1px;
}

.pied a:hover,
.pied a:focus-visible { border-bottom-color: var(--gold); }