/**
 * Landing seeyoo.fr (#auth-container) : hero avec le formulaire de connexion, sections,
 * pied de page et fenêtre de lecture des textes légaux.
 * Maquette : artefact « Seeyoo — Redesign », planche « Landing — seeyoo.fr » (1440 px).
 * Tailwind est précompilé (client-vendor/tailwind-build.css) : aucune classe utilitaire
 * nouvelle dans le markup, toute la mise en page est ici.
 * Doc : Documentations/Landing/landing_page.md
 */

/* Fond clair = celui du pied de page (rebond iOS en bas). En haut, l'ombre pleine du hero
   (.landing-hero) prolonge son bleu au-dessus de lui : le rebond n'y révèle jamais de blanc.
   Pas de fond scindé sur le conteneur : il transparaissait en liseré entre deux sections. */
#auth-container {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--sy-neutral-50);
    color: var(--sy-text);
}

.landing-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

.landing-wrap--narrow {
    max-width: 1000px;
}

/* ---------- Typographie partagée ---------- */
.landing-eyebrow {
    font-family: 'Raleway', system-ui, sans-serif;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--sy-brand-700-ink-rgb));
}

.landing-h2 {
    margin: 0;
    font-family: 'Raleway', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 3.8vw, 48px);
    line-height: 1.05;
    color: var(--sy-text);
}

.landing-text {
    margin: 0;
    font-size: 18px;
    line-height: 28px;
    color: var(--sy-text-muted);
}

/* Boutons d'appel : sy-btn existants, au gabarit de la maquette (52 px, 17 px). */
.landing-cta {
    min-height: 52px;
    padding: 0 24px;
    font-size: 17px;
}

/* ---------- Hero ---------- */
/* Fond : .landing-aurora = dégradé animé + orbes de l'écran de chargement
   (modules/loadingScreenBackground.css), pour enchaîner sans changer de bleu.
   Le fond uni accent-600 (couleur du haut du dégradé) sert de repli et d'ombre de rebond. */
.landing-aurora {
    background: var(--sy-accent-600);
}

.landing-hero {
    position: relative;
    overflow: hidden;
    padding-top: env(safe-area-inset-top, 0px);
    /* Décalage -100vh + étalement 100vh : l'ombre couvre 100vh au-dessus du hero, s'arrête à son bas. */
    box-shadow: 0 -100vh 0 100vh var(--sy-accent-600);
    color: #fff;
}

/* Grille 1fr | logo | 1fr : le logo reste au centre exact, le menu se cale à droite. */
.landing-header {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding-top: 56px;
    padding-bottom: 40px;
}

.landing-header__logo {
    grid-column: 2;
    display: block;
    width: auto;
    height: 64px;
}

.landing-header__nav {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 15px;
    font-weight: 600;
}

.landing-header__nav a {
    color: rgb(255 255 255 / 0.88);
    text-decoration: none;
    white-space: nowrap;
}

.landing-header__nav a:hover {
    color: #fff;
}

.landing-hero__grid {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 64px;
    padding-top: 48px;
    padding-bottom: 96px;
}

.landing-hero__copy {
    flex: 999 1 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.landing-hero__title {
    margin: 0;
    font-family: 'Raleway', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 5.6vw, 72px);
    line-height: 1;
    letter-spacing: -0.01em;
}

.landing-hero__lead {
    margin: 0;
    max-width: 540px;
    font-size: clamp(18px, 1.5vw, 21.6px);
    line-height: 1.5;
    font-weight: 500;
    color: rgb(255 255 255 / 0.92);
}

/* Formulaire de connexion (vues #auth-*) à la place des deux boutons de la maquette,
   centré dans sa colonne. */
.landing-hero #auth-panel {
    align-self: center;
    max-width: 26rem;
    text-align: center;
}

.landing-pills {
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.landing-pill {
    padding: 6px 12px;
    border-radius: 9999px;
    background: rgb(var(--sy-white-rgb) / 0.2);
    font-size: 13px;
    font-weight: 600;
}

.landing-pill--gold {
    background: var(--sy-gold-500);
    color: rgb(var(--sy-neutral-900-ink-rgb));
    font-weight: 700;
}

.landing-hero__device {
    flex: 1 1 320px;
    display: flex;
    justify-content: center;
}

/* Capture absente ou illisible : la colonne disparaît (onerror de l'image). */
.landing-hero__device[hidden] {
    display: none;
}

.landing-phone {
    box-sizing: border-box;
    width: min(300px, 78vw);
    aspect-ratio: 300 / 626;
    padding: 10px;
    border-radius: 48px;
    background: var(--sy-brand-950);
    box-shadow: 0 25px 50px -12px rgb(var(--sy-shadow-rgb) / 0.45);
}

/* ---------- Aperçu animé de la page Scanner (modules/landing/landingPhone.php) ---------- */
.landing-phone__screen {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 39px;
    background: var(--sy-surface);
}

.landing-phone__map,
.landing-phone__ui {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Deux cartes pré-rendues en fondu enchaîné (la suivante n'apparaît qu'une fois chargée). */
.landing-phone__map {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.landing-phone__map.is-active {
    opacity: 1;
}

/* Écran virtuel aux dimensions de la capture (390 × 844) : les positions ci-dessous sont celles de
   l'app ; landing.js le met à l'échelle de l'écran du téléphone (--phone-scale). */
.landing-phone__app {
    position: absolute;
    left: 0;
    top: 0;
    width: 390px;
    height: 844px;
    transform: scale(var(--phone-scale, 0.718));
    transform-origin: 0 0;
}

/* « Bonjour <prénom> » : #scanner-greeting (x 32, y 96, 326 × 36, Raleway 700 30/36 px). Seul le
   prénom fait le fondu : chaque mot porte son propre .text-gradient-scan (style.css), dimensionné sur
   la ligne entière de l'app (200 % de 326 × 36) et décalé de la largeur de « Bonjour » (3,979 em)
   pour le prénom : la ligne garde un dégradé continu, comme dans l'app. */
.landing-phone__greeting {
    position: absolute;
    left: 32px;
    top: 96px;
    margin: 0;
    font-size: 30px;
    line-height: 36px;
    white-space: nowrap;
}

.landing-phone__greeting .text-gradient-scan {
    background-size: 652px 72px;
}

.landing-phone__name {
    background-position: -3.979em 0;
}

/* Lieu : #location-banner (x 32, y 287, 326 de large, centré). */
.landing-phone__place {
    position: absolute;
    left: 32px;
    top: 287px;
    width: 326px;
    text-align: center;
}

.landing-phone__place-name {
    margin: 0;
    font: 700 24px/30px 'Inter', sans-serif;
    color: rgb(var(--sy-neutral-800-ink-rgb));
}

.landing-phone__place-city {
    margin: 4px 0 0;
    font: 600 14px/20px 'Inter', sans-serif;
    color: rgb(var(--sy-neutral-500-ink-rgb));
}

.landing-phone__name,
.landing-phone__place {
    transition: opacity 0.25s ease;
}

.landing-phone__name.is-swapping,
.landing-phone__place.is-swapping {
    opacity: 0;
}

/* Bouton Scanner : géométrie de #scanner-container / #scanner-button (style.css) et MÊMES keyframes
   (scanner-idle-breathe, scanner-idle-ring, pulse-scan, scanner-final-spin) — les sélecteurs de
   l'app ciblent des id, qu'on ne peut pas dupliquer sur la page. */
.landing-phone__scanner {
    position: absolute;
    left: 105px;
    top: 353px;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-phone__scan-btn {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sy-brand-600) 45%, var(--sy-accent-500) 100%);
    box-shadow: var(--sy-shadow-lg), 0 0 0 8px rgb(var(--sy-surface-rgb) / 0.5);
}

/* Anneau de visibilité 2 h (#scanner-last-scan-visibility-ring), toujours plein (angle 360°). */
.landing-phone__scan-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #0284c7;
    -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 8px), #000 calc(100% - 8px));
    mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 8px), #000 calc(100% - 8px));
    transform: scale(1.12);
}

.landing-phone__scan-logo {
    width: 64px;
    height: 64px;
    filter: brightness(0) invert(1);
}

.landing-phone__scanner:not(.is-scanning):not(.is-resetting) .landing-phone__scan-btn {
    animation: scanner-idle-breathe 3s ease-in-out infinite;
}

.landing-phone__scanner:not(.is-scanning):not(.is-resetting)::before {
    content: '';
    position: absolute;
    z-index: 5;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 2px solid rgb(var(--sy-brand-600-rgb) / 0.3);
    animation: scanner-idle-ring 3s ease-in-out infinite;
}

.landing-phone__scanner.is-scanning .landing-phone__scan-btn {
    animation: pulse-scan 1s ease-in-out infinite;
}

.landing-phone__scanner.is-resetting {
    animation: scanner-final-spin 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .landing-phone__scanner,
    .landing-phone__scanner::before,
    .landing-phone__scan-btn {
        animation: none !important;
    }

    .landing-phone__map {
        transition: none;
    }
}

/* ---------- Sections ---------- */
.landing-section {
    padding: 104px 0;
    background: var(--sy-neutral-50);
}

.landing-section--flush {
    padding-top: 0;
}

.landing-section--tint {
    background: var(--sy-brand-50);
}

.landing-stack {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.landing-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 720px;
}

.landing-head--center {
    align-items: center;
    max-width: none;
    text-align: center;
}

.landing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--landing-col, 300px), 100%), 1fr));
    gap: 24px;
}

.landing-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px;
    border-radius: 16px;
    border: 1px solid var(--sy-border);
    background: var(--sy-surface);
}

.landing-card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--sy-text);
}

.landing-card p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sy-text-muted);
}

.landing-step__num {
    align-self: flex-start;
    font-family: 'Raleway', system-ui, sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 1;
    font-variant-numeric: lining-nums; /* Raleway : chiffres elzéviriens par défaut (« 0 » = « o ») */
    background: linear-gradient(135deg, var(--sy-brand-600) 45%, var(--sy-accent-500));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Signes distinctifs : texte + carte de pastilles. */
.landing-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 64px;
}

.landing-split > * {
    flex: 1 1 420px;
    min-width: 0;
}

.landing-split__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.landing-chips {
    gap: 20px;
}

.landing-chips__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
}

.landing-chips__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Mêmes couleurs que les pastilles du tiroir (DS_CHIP_IDLE / DS_CHIP_ACTIVE, appMain.js). */
.landing-chip {
    padding: 10px 16px;
    border-radius: 9999px;
    border: 1px solid var(--sy-border);
    background: var(--sy-neutral-100);
    color: rgb(var(--sy-neutral-800-ink-rgb));
    font-size: 15px;
    font-weight: 500;
}

.landing-chip--on {
    border-color: transparent;
    background: linear-gradient(90deg, var(--sy-accent-500), var(--sy-brand-600));
    color: #fff;
    box-shadow: 0 1px 2px rgb(var(--sy-shadow-rgb) / 0.05);
}

/* Confidentialité */
.landing-card--privacy {
    gap: 10px;
    padding: 24px;
    border-color: var(--sy-brand-200);
}

.landing-card--privacy h3 {
    font-size: 18px;
}

.landing-rings circle:first-child {
    stroke: var(--sy-brand-600);
}

.landing-rings circle:last-child {
    stroke: var(--sy-accent-500);
}

/* Tarifs */
.landing-plan {
    gap: 20px;
}

.landing-plan--premium {
    border: 2px solid var(--sy-gold-700);
    box-shadow: 0 25px 50px -12px rgb(var(--sy-gold-700-rgb) / 0.3);
}

.landing-plan__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.landing-plan__top div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.landing-plan--premium h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 22px;
}

.landing-plan--premium h3 svg {
    fill: var(--sy-gold-500);
}

.landing-plan__badge {
    padding: 4px 12px;
    border-radius: 9999px;
    background: var(--sy-gold-500);
    color: rgb(var(--sy-neutral-900-ink-rgb));
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.landing-plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    color: var(--sy-text-muted);
    font-size: 16px;
}

.landing-plan__price strong {
    font-family: 'Raleway', system-ui, sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 1.1;
    font-variant-numeric: lining-nums;
    color: var(--sy-text);
}

.landing-plan ul {
    margin: 0;
    padding: 0 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: disc;
    font-size: 16px;
    line-height: 24px;
    color: var(--sy-text);
}

.landing-plan .sy-btn {
    margin-top: auto;
}

/* Appel final */
.landing-final {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 64px 48px;
    border-radius: 16px;
}

.landing-final h2 {
    position: relative;
    flex: 1 1 440px;
    margin: 0;
    font-family: 'Raleway', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.05;
    color: #fff;
}

.landing-final .sy-btn {
    position: relative;
}

/* ---------- Pied de page ---------- */
.landing-footer {
    padding: 32px 0 max(32px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--sy-border);
    background: var(--sy-neutral-50);
}

.landing-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-size: 14px;
    color: var(--sy-text-muted);
}

.landing-footer__logo {
    display: block;
    width: auto;
    height: 20px;
}

.landing-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

/* Crédit ODbL exigé par les cartes réelles de l'aperçu Scanner (images/landing/map-*.webp). */
.landing-footer__credit {
    flex-basis: 100%;
    margin: 0;
    font-size: 12px;
}

.landing-footer__credit a {
    color: inherit;
}

.landing-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* ---------- Fenêtre de lecture des textes légaux ---------- */
.landing-legal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
    background: rgb(var(--sy-neutral-900-rgb) / 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.landing-legal[hidden] {
    display: none;
}

.landing-legal__sheet {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: 100%;
    overflow: hidden;
    border-radius: 24px;
    background: var(--sy-surface);
    box-shadow: 0 25px 50px -12px rgb(var(--sy-shadow-rgb) / 0.35);
}

.landing-legal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--sy-border);
}

.landing-legal__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ---------- Mobile ---------- */
/* Sous 1200 px, le menu (~380 px) ne tient plus à droite du logo centré (259 px). */
@media (max-width: 1199px) {
    .landing-header__nav {
        display: none;
    }
}

@media (max-width: 640px) {
    /* Côtés seulement : un raccourci `padding` écraserait le padding vertical de .landing-header. */
    .landing-wrap {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Un peu moins d'air autour du logo : le formulaire reste dans le premier écran. */
    .landing-header {
        padding-top: 48px;
        padding-bottom: 32px;
    }

    .landing-hero__grid {
        gap: 48px;
        padding-top: 16px;
        padding-bottom: 64px;
    }

    .landing-section {
        padding: 72px 0;
    }

    .landing-section--flush {
        padding-top: 0;
    }

    .landing-card {
        padding: 24px;
    }

    .landing-final {
        padding: 40px 24px;
    }

    .landing-legal__head,
    .landing-legal__body {
        padding-left: 20px;
        padding-right: 20px;
    }
}