/* ==========================================================================
   Connexion et activation de compte (login.html, activate.html)
   --------------------------------------------------------------------------
   Téléphone : une carte centrée, logo en tête. Grand écran : panneau de
   marque bleu Pollustock à gauche, formulaire à droite. Jetons de vision.css
   uniquement ; le logo (texte noir) est toujours posé sur fond blanc
   (.side-brand de vision.css).
   ========================================================================== */

body.auth { min-height: 100%; background: var(--bg); }

.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }

/* Panneau de marque (grand écran seulement) */
.auth-brand { display: none; }
@media (min-width: 901px) {
    .auth-page { grid-template-columns: minmax(380px, 5fr) minmax(0, 6fr); }
    .auth-brand {
        position: relative; overflow: hidden;
        display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
        padding: 44px 52px 36px;
        background: var(--side-bg); color: var(--side-text);
    }
    .auth-brand::before {
        content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
        background: var(--sky);
    }
}
.auth-brand .side-brand { align-self: flex-start; padding: 12px 18px; }
.auth-brand .side-brand img { height: 40px; }
.auth-brand-body { display: flex; flex-direction: column; gap: 16px; max-width: 460px; }
.auth-brand h2 { font-family: var(--head); font-size: 34px; line-height: 1.15; color: var(--side-active); }
.auth-brand-body > p { font-size: 16.5px; line-height: 1.55; color: var(--side-text); }
.auth-points { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-points li { display: flex; align-items: center; gap: 14px; font-size: 15.5px; color: var(--side-active); }
.auth-ico, .auth-num {
    width: 38px; height: 38px; border-radius: 12px; flex: none;
    display: grid; place-items: center;
    background: var(--side-hover); color: var(--side-active);
}
.auth-ico svg { width: 20px; height: 20px; }
.auth-num { font-family: var(--head); font-weight: 700; font-size: 17px; }
.auth-brand-foot { font-size: 13px; color: var(--side-head); }

/* Formulaire */
.auth-main {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 64px 16px 32px;
}
.auth-theme { position: absolute; top: 12px; right: 12px; }
.auth-card { width: 100%; max-width: 420px; padding: 28px 22px; gap: 20px; }
@media (min-width: 901px) {
    .auth-main { padding: 48px 32px; }
    .auth-card { padding: 36px; }
    .auth-card .auth-logo { display: none; }
}
.auth-logo { align-self: center; padding: 10px 16px; }
.auth-logo img { height: 40px; }
.auth-head { display: flex; flex-direction: column; gap: 6px; }
.auth-head h1 { font-size: 26px; }
.auth-mail { font-family: var(--mono); font-size: 14px; color: var(--accent); overflow-wrap: anywhere; }
.auth-card .input { height: 46px; font-size: 16px; }
.auth-submit { margin-top: 6px; }
.auth-foot { font-size: 12.5px; color: var(--muted); text-align: center; }

/* Préférence d'alerte (activation) */
.auth-alertes { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.auth-seuil { display: flex; flex-direction: column; gap: 8px; padding-left: 28px; }
.auth-seuil-valeur { color: var(--accent); font-weight: 700; font-size: 15px; }
.auth-range { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.auth-ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ==========================================================================
   Connexion « Vision » (login.html)
   --------------------------------------------------------------------------
   Grand écran, SANS défilement : à gauche la mer et l'œil fondus l'un dans
   l'autre (deux photos superposées), « Vision », et les deux offres posées
   en bas ; à droite la connexion seule.
   Téléphone : bandeau en tête, connexion, puis les offres.
   Photos (licence Unsplash, usage libre) : static/img/vision-mer.jpg « calm
   sea ocean » (unsplash.com/photos/GxymWkdnl4Y) ; static/img/vision-oeil.jpg
   « close-up of a person's eye » (images.unsplash.com/photo-1656484899207).
   ========================================================================== */
.auth-vision {
    --connect: #2c6fa0;     /* couleurs de la plaquette, identiques */
    --smartflow: #13917a;   /* dans les deux thèmes                 */
}
.auth-vision .auth-page { display: flex; flex-direction: column; position: relative; min-height: 100vh; }

/* --- Bandeau : mer + œil en double exposition ------------------------- */
.auth-hero {
    position: relative; overflow: hidden; isolation: isolate; order: 1;
    height: clamp(240px, 40vh, 360px);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: #3d7fb0;
}
.auth-hero-mer, .auth-hero-oeil { position: absolute; pointer-events: none; }
.auth-hero-mer { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; z-index: -2; }
.auth-hero-oeil {
    z-index: -1; left: 50%; top: 34%; transform: translate(-50%, -50%);
    width: min(120%, 1400px); max-width: none; aspect-ratio: 16 / 9; object-fit: cover;
    /* Œil passé en bleu, peau éclaircie jusqu'au blanc : en « produit », le
       blanc disparaît et seuls l'iris, la pupille et les cils marquent le ciel. */
    mix-blend-mode: multiply; opacity: .8;
    filter: grayscale(1) sepia(1) hue-rotate(170deg) saturate(1.6) brightness(1.32) contrast(1.55);
    -webkit-mask-image: radial-gradient(ellipse 42% 40% at 50% 50%, #000 35%, transparent 72%);
            mask-image: radial-gradient(ellipse 42% 40% at 50% 50%, #000 35%, transparent 72%);
}
/* Lueur de lever de soleil sur l'horizon. */
.auth-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen;
    background:
        radial-gradient(ellipse 38% 9% at 50% var(--horizon, 46%), rgba(255, 196, 128, .85), transparent 70%),
        radial-gradient(ellipse 70% 22% at 50% var(--horizon, 46%), rgba(255, 170, 110, .35), transparent 75%);
}
.auth-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 35, 60, .25) 0%, transparent 25%, transparent 55%, rgba(6, 28, 48, .55) 100%);
}
.auth-hero-logo {
    position: absolute; z-index: 1; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px;
    padding: 8px 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.auth-hero-logo img { height: 30px; }
.auth-hero-titre { position: relative; text-align: center; margin-top: 18%; text-shadow: 0 2px 18px rgba(4, 30, 55, .45); }
.auth-hero-titre h2, .auth-hero-titre p { color: #fff; }
.auth-hero-titre h2 {
    font-family: var(--font); font-weight: 400; text-transform: uppercase;
    font-size: clamp(44px, 9vw, 112px); letter-spacing: .22em; line-height: 1; margin-right: -.22em;
}
.auth-hero-titre p { font-size: clamp(16px, 2.2vw, 26px); letter-spacing: .04em; margin-top: 10px; }

/* --- Connexion ---------------------------------------------------------- */
.auth-vision .auth-main { order: 2; position: static; justify-content: flex-start; padding: 0 16px 24px; gap: 16px; }
.auth-vision .auth-theme {
    top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 3;
    background: color-mix(in srgb, var(--surface) 85%, transparent);
}
.auth-vision .auth-card { margin-top: -48px; position: relative; z-index: 2; box-shadow: 0 10px 30px rgba(10, 40, 70, .18); }
.auth-signature { max-width: 420px; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.45; }

/* --- Offres ---------------------------------------------------------------
   Présentation de plaquette, sans effets : pas de cartes, pas de verre
   dépoli, pas de pastilles. Un nom en petites capitales dans la couleur du
   pack, le prix, deux ou trois lignes ; un filet fin entre les offres. */
.auth-offres { order: 3; width: 100%; max-width: 640px; margin: 0 auto; padding: 4px 20px 36px; display: flex; flex-direction: column; gap: 14px; }
.auth-offres-tete h2 { font-family: var(--head); font-size: 20px; font-weight: 700; }
.auth-offres-tete p { color: var(--text-2); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }
.auth-packs { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line-strong); }
.auth-pack { --c: var(--connect); display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.auth-pack.is-smartflow { --c: var(--smartflow); }
.auth-pack header { display: flex; flex-direction: column; gap: 2px; }
.auth-pack header b { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.auth-pack header span { font-family: var(--head); font-style: italic; font-size: 15px; color: var(--text-2); }
.auth-prix { font-family: var(--head); font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.15; margin-top: 2px; }
.auth-prix small { font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--text-2); }
.auth-pack ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.auth-pack li { font-size: 14px; line-height: 1.4; color: var(--text-2); }
@media (min-width: 560px) {
    .auth-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
    .auth-pack { border-bottom: 0; padding: 18px 24px 18px 0; }
    .auth-pack + .auth-pack { padding: 18px 0 18px 24px; border-left: 1px solid var(--line); }
}

/* --- Grand écran : tout tient dans l'écran, sans défilement ------------- */
@media (min-width: 1000px) {
    .auth-vision .auth-page {
        display: grid; grid-template-columns: minmax(0, 7fr) minmax(420px, 5fr); grid-template-rows: 100vh;
        height: 100vh; min-height: 0; overflow: hidden;
    }
    .auth-hero { grid-column: 1; grid-row: 1; height: 100vh; justify-content: flex-start; }
    .auth-hero-oeil { top: 30%; width: 135%; }
    .auth-hero-logo { top: 28px; left: 32px; padding: 12px 18px; }
    .auth-hero-logo img { height: 40px; }
    .auth-hero-titre { margin-top: 44vh; }
    .auth-offres {
        grid-column: 1; grid-row: 1; align-self: end; z-index: 2;
        max-width: none; margin: 0; padding: 0 28px 28px;
    }
    /* Sur l'image : texte blanc, un dégradé sombre en bas suffit à le lire. */
    .auth-hero::after { background: linear-gradient(180deg, rgba(10, 35, 60, .25) 0%, transparent 25%, transparent 50%, rgba(5, 24, 42, .82) 100%); }
    .auth-offres { padding: 0 40px 34px; gap: 12px; text-shadow: 0 1px 6px rgba(3, 20, 36, .45); }
    .auth-offres-tete h2 { color: #fff; }
    .auth-offres-tete p { color: rgba(255, 255, 255, .78); }
    .auth-packs { border-color: rgba(255, 255, 255, .35); }
    .auth-pack, .auth-pack + .auth-pack { border-color: rgba(255, 255, 255, .22); }
    .auth-pack.is-connect { --c: #9fd0f2; }
    .auth-pack.is-smartflow { --c: #7fe3c9; }
    .auth-pack header span, .auth-prix small, .auth-pack li { color: rgba(255, 255, 255, .8); }
    .auth-prix { color: #fff; }

    .auth-vision .auth-main { grid-column: 2; grid-row: 1; position: relative; justify-content: center; padding: 40px 40px 28px; overflow-y: auto; }
    .auth-vision .auth-card { margin-top: 0; box-shadow: var(--shadow); }
}
/* Écran peu haut : les offres se resserrent pour ne pas mordre sur le titre. */
@media (min-width: 1000px) and (max-height: 780px) {
    .auth-hero-titre { margin-top: 30vh; }
    .auth-pack li:nth-child(n+3) { display: none; }
    .auth-vision .auth-main { padding: 20px 40px 14px; gap: 12px; }
    .auth-vision .auth-card { padding: 28px 32px; gap: 16px; }
}

/* Activation : les trois étapes, à la place des offres, même sobriété. */
.auth-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line-strong); }
.auth-etapes li {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline;
    padding: 14px 0; border-bottom: 1px solid var(--line);
}
.auth-etapes .auth-num {
    grid-row: 1 / 3; width: auto; height: auto; border-radius: 0; background: none;
    font-family: var(--head); font-size: 28px; font-weight: 700; line-height: 1; color: var(--connect);
}
.auth-etapes b { font-size: 15px; color: var(--text); }
.auth-etapes small { font-size: 13.5px; color: var(--text-2); }
@media (min-width: 560px) {
    .auth-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
    .auth-etapes li { border-bottom: 0; padding: 16px 18px 16px 0; }
    .auth-etapes li + li { padding-left: 18px; border-left: 1px solid var(--line); }
}
@media (min-width: 1000px) {
    .auth-etapes { border-color: rgba(255, 255, 255, .35); }
    .auth-etapes li, .auth-etapes li + li { border-color: rgba(255, 255, 255, .22); }
    .auth-etapes .auth-num { color: #9fd0f2; }
    .auth-etapes b { color: #fff; }
    .auth-etapes small { color: rgba(255, 255, 255, .8); }
}