/* Page /login — la galerie à gauche, le compte à droite (Supabase Auth, * assets/login.js). * * Intention : la même grammaire que le panneau d'achat des fiches (verre * arrondi, trait épais en tête, Archivo 900 à chasse 62 % pour le titre, * JetBrains Mono pour les repères, commandes en pastilles) et le moins * d'éléments possible : un titre, une ligne, trois champs au plus. * La section « Discover » est celle des fiches (product.css), mise à * l'échelle de sa moitié d'écran par les unités de conteneur. * * Chargée par toutes les pages (Barba ne recharge pas le ). */ .login { --ink: #0b0b0c; --ink-2: rgba(11, 11, 12, 0.56); --ink-3: rgba(11, 11, 12, 0.14); --paper: #f2f0ec; --mono: "JetBrains Mono Sillon", ui-monospace, "SF Mono", Menlo, monospace; --grot: "Archivo Sillon", "Helvetica Neue", Arial, sans-serif; --spring: cubic-bezier(0.34, 1.36, 0.5, 1); --warn: #b3412a; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; background-color: var(--_theme---background); } /* ---- Gauche : la galerie, fixe pendant que la droite défile ---- */ .login__gallery { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; container-type: inline-size; background: #f5f6ee; } /* Échelle de Palmer (16 px pour 1920) rapportée à la demi-largeur, avec un * plancher pour que l'accroche reste lisible. */ .login__gallery .dsc { width: 100%; font-size: clamp(8.5px, 100cqi / 88, 13px); padding: 3em 1.25em; background: transparent; } .login__gallery .dsc__title { max-width: calc(100cqi / 12 * 7); } .login__gallery .dsc__lede { max-width: calc(100cqi / 12 * 6); } .login__gallery .dsc__text { padding: 9em 0 4em; } /* ---- Droite : la carte ---- */ .login__side { display: flex; align-items: center; justify-content: center; padding: max(6.5rem, 12vh) clamp(1.25rem, 4vw, 4rem) 7rem; } .auth { box-sizing: border-box; width: min(100%, 30rem); padding: 1.25rem 1.75rem 1.5rem; border-radius: 1.75rem; color: var(--ink); container-type: inline-size; box-shadow: 0 1rem 2.5rem -1rem rgba(0, 0, 0, 0.28), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.07); } .auth .lg__border { background: radial-gradient(16rem 9rem at var(--mx, 30%) var(--my, -10%), rgba(255, 255, 255, 0.55), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.06)); } .auth__inner { position: relative; z-index: 3; } :where(.auth) :where(p, fieldset, ul) { margin: 0; } :where(.auth) fieldset { padding: 0; border: 0; min-width: 0; } :where(.auth) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .auth__inner::before { content: ""; display: block; height: 6px; border-radius: 999px; background: var(--ink); } .auth__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ink); font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } .auth__swatch { width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; background: rgb(var(--disc-accent, 11, 11, 12)); } .auth__step { margin-left: auto; color: var(--ink-2); } .auth__title { margin: 0; padding: 1rem 0 0; font-family: var(--grot); font-weight: 900; font-stretch: 62%; /* « Mot de passe oublié » doit tenir sur deux lignes au plus. */ font-size: min(4.5rem, 16.5cqi); line-height: 0.86; letter-spacing: -0.005em; text-transform: uppercase; } .auth__title span { display: inline-block; } .auth__lede { padding-top: 0.75rem; max-width: 24rem; font: 450 0.9375rem/1.45 var(--grot); font-stretch: 92%; color: var(--ink-2); text-wrap: pretty; } /* Changement de mode : les textes se redessinent par à-coups, de gauche à * droite — l'animation de la fiche de l'accueil (disc-card-wipe). */ .auth [data-swap] { animation: auth-wipe 0.32s steps(6, end); } @keyframes auth-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* ---- Blocs qui s'ouvrent et se ferment selon le mode ---- */ .auth__slot { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.45s var(--spring), opacity 0.3s; } .auth__slot > * { min-height: 0; overflow: hidden; } /* Pas de padding sur les blocs repliables : un bloc réduit à 0 garde son * padding (un vide restait en mode « oublié »). Les espacements passent en * marges sur le premier enfant, que le repli absorbe. */ .auth__slot[data-off] { grid-template-rows: 0fr; opacity: 0; } .auth__switch > .seg { margin-top: 1.5rem; } .auth__switch .seg__label { font-size: 1.25rem; } .auth__form { padding-top: 0.5rem; } /* ---- Champs : un filet, pas de boîte ---- */ .auth__field > .auth__label { margin-top: 1.125rem; } .auth__label { display: block; font: 500 0.625rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .auth__control { position: relative; display: flex; align-items: center; } .auth__input { box-sizing: border-box; width: 100%; margin: 0; padding: 0.5rem 0 0.5rem; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--ink-3); color: var(--ink); font: 500 1.0625rem/1.3 var(--grot); font-stretch: 92%; outline: none; transition: box-shadow 0.25s; } .auth__input:hover { box-shadow: inset 0 -1px 0 var(--ink-2); } .auth__input:focus { box-shadow: inset 0 -2px 0 var(--ink); } .auth__input[aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--warn); } .auth__input[type="password"], .auth__input[data-auth-password] { padding-right: 2.5rem; letter-spacing: 0.04em; } .auth__err { min-height: 0; padding-top: 0.375rem; font: 500 0.6875rem/1.35 var(--grot); color: var(--warn); } .auth__err:empty { display: none; } .auth__eye { position: absolute; right: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--ink-2); transition: color 0.2s, background-color 0.2s; } .auth__eye:hover { color: var(--ink); background: rgba(11, 11, 12, 0.05); } .auth__eye svg { width: 1.125rem; height: 1.125rem; } .auth__eye-slash { transition: stroke-dashoffset 0.35s var(--spring); stroke-dasharray: 23; stroke-dashoffset: 0; } .auth__eye[aria-pressed="true"] .auth__eye-slash { stroke-dashoffset: 23; } .auth__eye:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; } /* Majuscules verrouillées pendant la saisie d'un mot de passe. */ .auth[data-caps] .auth__field:has(input[type="password"]:focus) .auth__label::after { content: " · majuscules verrouillées"; color: var(--warn); } /* ---- Jauge du mot de passe : une barre qui se charge ---- */ .auth__meter > .auth__bar { margin-top: 0.875rem; } .auth__bar { height: 4px; border-radius: 999px; background: var(--ink-3); overflow: hidden; } .auth__bar i { display: block; height: 100%; width: calc(var(--level, 0) * 20%); border-radius: inherit; background: var(--meter, var(--ink)); transition: width 0.6s var(--spring), background-color 0.4s; } .auth__meter[data-level="1"] { --meter: #c8532b; } .auth__meter[data-level="2"] { --meter: #d8863a; } .auth__meter[data-level="3"] { --meter: #c2a23c; } .auth__meter[data-level="4"] { --meter: #6f9a4f; } .auth__meter[data-level="5"] { --meter: #2f9e5b; } .auth__level { display: flex; justify-content: space-between; padding-top: 0.5rem; font: 500 0.625rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .auth__level [data-auth-level] { color: var(--meter, var(--ink-2)); transition: color 0.4s; } .auth__criteria { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem 1rem; padding: 0.75rem 0 0; list-style: none; font: 500 0.625rem/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); transition: opacity 0.3s; } .auth__meter[data-empty] .auth__criteria { opacity: 0.55; } .auth__criteria li { display: flex; align-items: center; gap: 0.5rem; transition: color 0.25s; } /* Case → coche : le petit carré se remplit, la coche se trace. */ .auth__criteria li::before { content: ""; flex: none; width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; box-shadow: inset 0 0 0 1px currentColor; transition: background-color 0.25s, box-shadow 0.25s, transform 0.35s var(--spring); } .auth__criteria li[data-met] { color: var(--ink); } .auth__criteria li[data-met]::before { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); transform: scale(1.15); } /* ---- Liens discrets et bouton ---- */ .auth__aside { display: flex; justify-content: flex-end; } .auth__aside > .auth__link { margin-top: 0.75rem; } .auth__link { font: 500 0.8125rem/1 var(--grot); color: var(--ink-2); text-decoration: underline 1px transparent; text-underline-offset: 0.25em; transition: color 0.2s, text-decoration-color 0.2s; } .auth__link:hover { color: var(--ink); text-decoration-color: currentColor; } .auth__link:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; } [data-for="forgot"] .auth__aside { justify-content: flex-start; } .auth__submit { box-sizing: border-box; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding: 0.5rem 0.5rem 0.5rem 1.5rem; border-radius: 999px; background: var(--ink) !important; color: var(--paper) !important; font-family: var(--grot); font-weight: 900; font-stretch: 62%; font-size: 1.375rem; line-height: 1; /* En Archivo condensé (62 %), l'espace est étroite et l'interlettrage * négatif du site l'avalait : « SECONNECTER ». */ letter-spacing: 0; word-spacing: 0.14em; text-transform: uppercase; transition: transform 0.35s var(--spring); } .auth__submit:active { transform: scale(0.98); } .auth__submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* Même flèche que « Explore collections » : rond cerclé qui pivote de −45° * au survol (0,4 s outBack), revient en 0,3 s (inBack). */ .auth__arrow { display: flex; flex: none; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgba(242, 240, 236, 0.6); border-radius: 50%; transition: rotate 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045); } .auth__arrow svg { height: 0.625rem; } .auth__submit:hover .auth__arrow, .auth__submit:focus-visible .auth__arrow { rotate: -45deg; transition: rotate 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .auth__msg { padding-top: 0.875rem; font: 500 0.8125rem/1.4 var(--grot); color: var(--ink); } .auth__msg:empty { display: none; } .auth__msg[data-kind="warn"] { color: var(--warn); } .auth__msg[data-kind="ok"]::before { content: ""; display: inline-block; width: 0.4375rem; height: 0.4375rem; margin-right: 0.5rem; border-radius: 50%; background: #2f9e5b; vertical-align: 0.0625rem; } /* Envoi en cours : la flèche tourne sur elle-même, le bouton ne répond plus. */ .auth__submit[data-busy] { cursor: progress; } .auth__submit[data-busy] .auth__arrow { animation: auth-spin 0.9s linear infinite; } @keyframes auth-spin { to { rotate: 360deg; } } /* Code 2FA : six chiffres espacés, lisibles d'un coup d'œil. */ .auth__input[name="code"] { font: 500 1.75rem/1.2 var(--mono); letter-spacing: 0.4em; } /* Mention d'information sous l'inscription. */ .auth__legal { margin-top: 0.875rem !important; font: 450 0.75rem/1.45 var(--grot); font-stretch: 92%; color: var(--ink-2); text-wrap: pretty; } .auth__note { margin-top: 1.25rem !important; padding-top: 0.875rem; border-top: 1px solid var(--ink-3); font: 500 0.625rem/1.6 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); } .auth__dot { display: inline-block; width: 0.4375rem; height: 0.4375rem; margin-right: 0.4375rem; border-radius: 50%; background: #d8863a; vertical-align: 0.0625rem; } /* ---- Tablette et mobile : le compte d'abord, la galerie dessous ---- */ @media (max-width: 1024px) { .login { grid-template-columns: minmax(0, 1fr); } .login__side { order: -1; padding: 6rem 1rem 2.5rem; } .login__gallery { position: static; height: auto; display: block; overflow: hidden; } .login__gallery .dsc { font-size: calc(clamp(768px, 100vw, 991px) / (834 / 16)); padding: 6em 1em 8em; } .login__gallery .dsc__title, .login__gallery .dsc__lede { max-width: none; } } @media (max-width: 479px) { .login__gallery .dsc { font-size: calc(clamp(320px, 100vw, 479px) / (479 / 16)); padding: 3em 1em 8em; } .auth { padding: 1rem 1.125rem 1.25rem; border-radius: 1.5rem; } } @media (prefers-reduced-motion: reduce) { .auth [data-swap], .auth__submit[data-busy] .auth__arrow { animation: none; } .auth__slot, .auth__bar i, .auth__criteria li::before, .auth__arrow { transition: none; } }