/* ==========================================================================
   Portail captif — charte graphique Now Coworking
   Valeurs relevées sur le site de référence (now-coworking, page /reserver-visite) :
   jetons de couleur, échelle typographique, hauteurs et rayons des contrôles.
   Feuille autonome : le thème historique (Inwork) reste sur app.css.
   Aucune ressource externe — un portail captif n'a pas d'accès Internet avant
   authentification, tout est auto-hébergé.
   ========================================================================== */

@font-face {
    font-family: "Epilogue";
    src: url("/css/epilogue-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Marque */
    --now-gold: #c8a546;
    --now-ink: #1c1c1c;

    /* Surfaces */
    --now-bg: #1c1c1c;          /* grey-1000, section-dark */
    --now-surface: #262525;     /* grey-900, cartes d'information */
    --now-field: rgba(50, 48, 46, 0.08);        /* overlay-button */
    --now-field-border: rgba(244, 239, 230, 0.12);

    /* Texte */
    --now-text: #f4efe6;        /* grey-400, on-dark */
    --now-text-muted: #bbb8b2;  /* grey-500, on-dark-muted */
    --now-text-input: #ffffff;  /* grey-100, on-image */
    --now-danger: #e26b6b;      /* on-image-danger */

    /* Formes, typographie, mouvement */
    --now-radius-card: 1rem;
    --now-radius-control: 0.75rem;
    --now-tracking: -0.04em;
    --now-leading: 1.24;
    --now-ease: cubic-bezier(0, 0, 0.2, 1);

    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Valeur littérale d'abord : sur un navigateur sans clamp() ou sans
       variables CSS, la page reste lisible au lieu de perdre fond et marges. */
    padding: 2rem 1.25rem;
    padding: clamp(1.5rem, 4vw, 3rem) 1.25rem;

    background-color: #1c1c1c;
    background-color: var(--now-bg);
    color: #f4efe6;
    color: var(--now-text);

    font-family: "Epilogue", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: var(--now-leading);
    letter-spacing: var(--now-tracking);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

header,
main,
footer {
    width: 100%;
    /* --container-funnel de la charte */
    max-width: 28rem;
}

a {
    color: var(--now-gold);
    text-decoration: none;
}

section.success a:hover,
section.wifi a:hover {
    opacity: 0.9;
}

/* --------------------------------------------------------------------------
   En-tête : sélecteur de langue + logo
   -------------------------------------------------------------------------- */

header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

header > * + * {
    margin-top: 1.75rem;
}

header nav {
    display: flex;
    align-self: flex-end;
}

header nav .flag + .flag {
    margin-left: 0.25rem;
}

/* Le halo de la langue active est porté par le lien, pas par l'image : un
   box-shadow suit le rayon de l'élément, il aurait donc épousé le rectangle du
   drapeau au lieu de dessiner la pastille ronde attendue. */
header nav .flag {
    display: flex;
    align-items: center;
    justify-content: center;

    /* 48px : le drapeau occupe 2/3 du diamètre, comme sur la maquette de
       référence (0,65), et la pastille reste au-dessus de la taille tactile
       minimale — les drapeaux seuls seraient trop petits pour être visés au
       doigt. Le diamètre est pair et le drapeau de hauteur paire : les marges
       de centrage tombent sur des entiers (cf. la taille du drapeau). */
    width: 3rem;
    height: 3rem;
    border-radius: 50%;

    background-color: transparent;
    transition: background-color 0.18s var(--now-ease);
}

/* Les deux drapeaux sont dessinés dans une boîte 4:3 commune (cf. les fichiers
   SVG) : à largeur égale ils ont donc aussi la même hauteur, comme dans un jeu
   d'emoji.

   32px de large donnent exactement 24px de haut. Les deux dimensions sont
   paires, comme le diamètre de la pastille : les marges de centrage valent 8px
   et 12px pile. Avec 28px (21px de haut, impair), la marge verticale tombait à
   11,5px et le navigateur l'arrondissait à 11 en haut pour 12 en bas — le
   drapeau était visiblement décalé d'un pixel vers le haut. */
header nav .flag img {
    display: block;
    width: 32px;
    height: auto;

    /* Rayon et ombre courte : les drapeaux se lisent comme des vignettes posées
       sur le fond sombre. 5px sur 24px de haut, soit les 20% relevés sur la
       maquette de référence. */
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

header nav .flag:hover {
    background-color: rgba(244, 239, 230, 0.08);
}

header nav .flag:focus-visible {
    outline: 2px solid var(--now-gold);
    outline-offset: 2px;
}

/* Les deux drapeaux restent en pleine couleur : la pastille porte seule l'état
   actif. Un voile d'opacité sur le drapeau inactif grisait son blanc — 153/255
   à 0.55, encore 221 à 0.85 — ce qui se lit comme un drapeau délavé plutôt que
   comme une langue non sélectionnée. */
header nav .flag.selected {
    background-color: rgba(244, 239, 230, 0.16);
}

header > img {
    width: 180px;
    width: clamp(140px, 42vw, 180px);
    height: auto;
}

/* --------------------------------------------------------------------------
   Contenu
   -------------------------------------------------------------------------- */

main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 0;
}

main h2 {
    margin: 0 0 1.75rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.06em;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Formulaire — les champs reposent directement sur le fond, comme sur le site :
   seules les zones d'information sont traitées en carte.
   -------------------------------------------------------------------------- */

main form {
    width: 100%;
    margin: 0;
    padding: 0;
}

main form fieldset {
    margin: 0 0 1rem;
    padding: 0;
    border: none;
    min-width: 0;
}

/* Le premier fieldset ne porte que l'erreur globale : il ne doit rien occuper
   quand il n'y a pas d'erreur (la marge est portée par le <p> lui-même). */
main form > fieldset:first-of-type {
    margin-bottom: 0;
}

main form > fieldset:first-of-type > p.error {
    margin: 0 0 1.25rem;
}

/* Le libellé est repris en placeholder, comme sur le site, mais reste dans le
   DOM pour les lecteurs d'écran. */
main form fieldset label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

main form fieldset input {
    width: 100%;
    height: 3.5rem;
    padding: 0 1.5rem;

    background-color: var(--now-field);
    /* La charte pose un flou d'arrière-plan sur ces champs, parce qu'ils s'y
       superposent à des images. Sur notre fond uni il est mesurablement sans
       effet, tout en imposant une couche de composition par champ : on s'en
       passe. À rétablir si un visuel venait derrière le formulaire. */
    border: 1px solid var(--now-field-border);
    border-radius: var(--now-radius-control);
    color: var(--now-text-input);

    font-family: inherit;
    font-size: 1rem;
    line-height: var(--now-leading);
    letter-spacing: var(--now-tracking);

    transition: border-color 0.18s var(--now-ease);
}

/* Règles séparées : un sélecteur non reconnu invaliderait toute la liste. */
main form fieldset input::-webkit-input-placeholder {
    color: #bbb8b2;
    color: var(--now-text-muted);
}
main form fieldset input::-moz-placeholder {
    color: #bbb8b2;
    color: var(--now-text-muted);
    opacity: 1;
}
main form fieldset input:-ms-input-placeholder {
    color: #bbb8b2;
}
main form fieldset input::-ms-input-placeholder {
    color: #bbb8b2;
}
main form fieldset input::placeholder {
    color: var(--now-text-muted);
    opacity: 1;
}

main form fieldset input:focus {
    /* Contour transparent plutôt que 'none' : en mode contrastes forcés les
       bordures colorées sont ignorées, il resterait sinon zéro indicateur. */
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--now-gold);
}

main form fieldset input.error {
    border-color: var(--now-danger);
}

/* Le remplissage automatique force un fond clair : on le neutralise. */
main form fieldset input:-webkit-autofill,
main form fieldset input:-webkit-autofill:hover,
main form fieldset input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--now-text-input);
    -webkit-box-shadow: 0 0 0 1000px var(--now-bg) inset;
    box-shadow: 0 0 0 1000px var(--now-bg) inset;
    caret-color: var(--now-text-input);
}

/* --------------------------------------------------------------------------
   Erreurs
   -------------------------------------------------------------------------- */

p.error {
    display: flex;
    align-items: flex-start;
    margin: 0.5rem 0 0;
    padding: 0.625rem 0.75rem;

    background-color: rgba(226, 107, 107, 0.1);
    border: 1px solid rgba(226, 107, 107, 0.4);
    border-radius: 0.5rem;

    color: var(--now-danger);
    fill: var(--now-danger);
    font-size: 0.875rem;
}

p.error svg {
    flex: 0 0 auto;
    /* L'icône fait 16 px pour une ligne de 1.24em (17,4 px) : alignée en haut
       elle tombe plus bas que le centre optique du texte, dont l'espace des
       jambages abaisse le milieu de ligne. Décalage mesuré puis compensé —
       l'écart résiduel est de 0,1 px. */
    margin-top: -1px;
    margin-right: 0.5rem;
}

/* --------------------------------------------------------------------------
   Actions : bouton principal pleine largeur, liens secondaires en dessous
   -------------------------------------------------------------------------- */

main form .controls {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    /* mt-4 sur le bouton de la référence */
    margin-top: 1rem;
}

main form .controls button {
    width: 100%;
    min-height: 3rem;
    padding: 0.5rem 1.125rem;
    cursor: pointer;

    background-color: var(--now-gold);
    border: none;
    border-radius: var(--now-radius-control);
    color: var(--now-ink);

    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: var(--now-leading);
    letter-spacing: var(--now-tracking);
    text-transform: uppercase;

    transition: opacity 0.18s var(--now-ease);
}

main form .controls button:hover {
    opacity: 0.9;
}

main form .controls button:focus-visible {
    outline: 2px solid var(--now-gold);
    outline-offset: 3px;
}

/* Le conteneur des liens porte un style inline display:inline-block, neutralisé
   par la « blockification » des enfants d'un conteneur flex. */
main form .controls > div {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.9;
}

main form .controls a {
    color: var(--now-text-muted);
    border-bottom: 1px solid transparent;
}

main form .controls a:hover {
    color: var(--now-gold);
    border-bottom-color: currentColor;
}

/* --------------------------------------------------------------------------
   Écrans d'information (succès, 802.1x) — traités en carte, comme le panneau
   récapitulatif du site.
   -------------------------------------------------------------------------- */

section.success,
section.wifi {
    padding: 1.5rem;
    background-color: var(--now-surface);
    border-radius: var(--now-radius-card);
    font-size: 1rem;
}

section.success p {
    margin: 0;
}

section.success p:not(:last-child) {
    margin-bottom: 1rem;
}

section.wifi p {
    margin: 0 0 1.5rem;
    font-weight: 500;
}

section.wifi dl {
    margin: 0;
}

section.wifi dt {
    margin-bottom: 0.25rem;
    color: var(--now-text-muted);
    font-size: 0.875rem;
}

section.wifi dd {
    margin: 0 0 1.25rem;
    color: var(--now-text);
    font-weight: 500;
}

section.wifi dd:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

footer {
    margin-top: 3rem;
    text-align: center;
}

footer h3 {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--now-text-muted);
}

footer h3 a {
    color: var(--now-text-muted);
}

footer h3 a:hover {
    color: var(--now-gold);
}

/* --------------------------------------------------------------------------
   Apparition
   -------------------------------------------------------------------------- */

@keyframes now-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

header {
    animation: now-rise 0.45s var(--now-ease) both;
}

main {
    animation: now-rise 0.5s var(--now-ease) 0.06s both;
}

footer {
    animation: now-rise 0.5s var(--now-ease) 0.12s both;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001s !important;
        animation-delay: 0s !important;
        transition-duration: 0.001s !important;
    }
}