/* ============================================================================ LA PORTE D'ENTRÉE — d'après mew_dash/v2/connexion.html Les valeurs viennent de la maquette SANS CONVERSION : 66 px de hauteur de champ, 17 px de texte, graisse 900 sur les titres, #FF6363 en accent, #F5F2EF en fond de champ. Rien n'a été arrondi ni réinterprété. POURQUOI TOUT EST SOUS `.lrn-gate`. La maquette nomme ses classes `.field`, `.primary`, `.role`, `.step`, `.back`, `.center`, `.or` — des mots si courants que, posés à la racine, ils frapperaient les autres pages du site. `.lrn-gate` est la classe du de CE gabarit uniquement : le cloisonnement est total, et la spécificité qui en résulte fait gagner ces règles sur `lernen/css/style.css` sans un seul `!important`. Les NOMS DE CLASSES EXISTANTS sont conservés — `.pane`, `.code-input`, `.gate-box`… — parce que `lernen/js/main.js` s'en sert pour enchaîner les écrans et piloter la saisie du code. Seule leur apparence change. ========================================================================= */ .lrn-gate { margin: 0; background: #fff; font-family: Nunito, system-ui, sans-serif; color: #1C1C1E; } /* Le thème impose Capriola aux titres de tout le site ; cette page suit sa maquette. La règle vise large exprès : tout ce qui porte du texte ici hérite de Nunito, y compris ce que le thème styla nommément. */ .lrn-gate .gate, .lrn-gate .gate h1, .lrn-gate .gate h2, .lrn-gate .gate p, .lrn-gate .gate span, .lrn-gate .gate small, .lrn-gate .gate a, .lrn-gate .gate b, .lrn-gate .gate button, .lrn-gate .gate input { font-family: Nunito, system-ui, sans-serif; } /* DEUX EXCEPTIONS, et elles comptent. Les icônes sont une police à part entière : leur imposer Nunito afficherait le nom du glyphe en toutes lettres, « chevron_right » au lieu du chevron. Le logo est un WORDMARK dessiné en Baloo 2. La règle ci-dessus, qui vise tous les `span`, le rhabillait en Nunito — le logo de la marque changeait donc de dessin sur cette seule page. Les lettres animées sont elles aussi des `span` : il faut les deux sélecteurs. */ .lrn-gate .gate .ico { font-family: 'Material Symbols Rounded'; } .lrn-gate .gate .mn-logo, .lrn-gate .gate .mn-logo__l { font-family: var(--logo-font); } .lrn-gate .gate { min-height: 100vh; display: flex; flex-direction: column; } /* ---- la croix de sortie, en haut à droite ---------------------------- */ .lrn-gate .gate-top { display: flex; justify-content: flex-end; padding: 18px 20px 0; } /* Dans le cadre de la fenêtre de connexion, c'est elle qui porte la croix (voir `layouts/lernen-gate`). Deux croix au même endroit ne ferment pas deux fois : elles se recouvrent mal. */ html.dans-un-cadre .gate-top { display: none; } /* La sortie porte le dégradé de la marque, et passe au noir au survol. LA CROIX EST BLANCHE, AVEC UNE OMBRE. Sur le seul aplat de #FF6363, du blanc donne 2,9:1 — juste sous les 3:1 que réclame une icône ; et le dégradé monte jusqu'à #FFBCBC, où le même blanc tombe à 1,6:1. L'ombre portée est la réponse déjà retenue pour le bouton principal, qui a le même fond et le même problème : elle pose un liseré sombre sous chaque trait, et c'est lui qui porte le contraste là où le fond s'éclaircit. `translateZ(0)` : sans lui, Safari re-rastérise le dégradé à chaque image de la rotation, et le cercle papillote pendant le survol. */ .lrn-gate .gate-x { width: 52px; height: 52px; border: 0; border-radius: 50%; /* RACCOURCI `background`, et non la paire color/image. Le raccourci réinitialise TOUTES les sous-propriétés d'un coup : aucune règle antérieure ne peut en laisser survivre une moitié, et une extension de navigateur qui neutralise `background-color` ne peut plus faire disparaître le dégradé en laissant l'ombre. La couleur placée après le dégradé sert de repli là où les dégradés ne sont pas rendus. */ /* `!important` ASSUMÉ, et il est le seul du fichier. Le fond de ce bouton restait visuellement à sa valeur d'avant-hier (#FFF1F1) sur le poste de Waleed — en local COMME en ligne, donc ni cache serveur ni CDN. Mon navigateur affiche le bon rendu, la feuille est chargée en dernier, aucune autre ne déclare `.gate-x` : la surcharge vient de son environnement (extension, préférence système de contraste), que je ne peux pas inspecter d'ici. Plutôt que de lui faire désactiver ses outils un par un, on rend la règle non négociable. C'est le cas où `!important` est légitime : une valeur qu'aucune feuille du projet ne conteste, et qu'on protège d'une réécriture extérieure. */ background: linear-gradient(-38deg,#FFBCBC 0%,#FF6363 54%) #FF6363 !important; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; box-shadow: 0 10px 22px -12px rgba(255,99,99,.9); transition: background-image .18s, background-color .18s, box-shadow .18s, transform .2s cubic-bezier(.22,.9,.24,1); } .lrn-gate .gate-x .ico { font-size: 26px; color: #fff !important; text-shadow: 0 1px 2px rgba(150,30,30,.55); } /* Au survol : le noir de la marque. Le dégradé doit être RETIRÉ, pas seulement recouvert — une `background-image` posée reste au-dessus de toute `background-color` qu'on lui donnerait ensuite, et le cercle serait resté rouge. */ .lrn-gate .gate-x:hover, .lrn-gate .gate-x:focus-visible { background: #1C1C1E !important; box-shadow: 0 10px 22px -12px rgba(28,28,30,.8); transform: rotate(-90deg); } .lrn-gate .gate-x:hover .ico, .lrn-gate .gate-x:focus-visible .ico { text-shadow: none; } /* Sur téléphone, le cercle est la seule sortie de l'écran : on le garde à 52 px, au-dessus des 44 px que réclame une cible tactile, et on lui laisse sa marge de bord. */ @media (max-width: 640px) { .lrn-gate .gate-top { padding: 14px 16px 0; } } /* ---- la colonne ------------------------------------------------------ */ .lrn-gate .gate-stage { flex: 1; display: flex; justify-content: center; padding: 8px 20px 40px; } /* BLOC, et non flex. La feuille du thème met `.gate-box` en `display:flex; flex-direction:column; gap:12px` — et ce `gap` S'AJOUTE à chacune des marges de la maquette : 14 px sous le champ en devenaient 26, 26 px autour du séparateur en devenaient 38. Tous les espacements de la page étaient donc faux, d'un écart régulier qu'on ne voit pas à l'œil sans comparer. En repassant au flux normal, les marges de la maquette redeviennent la seule source de vérité — et le `gap` hérité, inopérant. */ .lrn-gate .gate-box { width: 100%; max-width: 396px; display: block; } /* Le rail d'écrans : un seul visible à la fois. `main.js` déplace `.is-current`, l'animation d'entrée rejoue à chaque passage. */ .lrn-gate .pane { display: none; } .lrn-gate .pane.is-current { display: block; animation: gate-in .34s cubic-bezier(.22,.9,.24,1) both; } @keyframes gate-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .lrn-gate .gate-head { display: block; text-align: center; } /* LE LOGO, À LA TAILLE DE LA MAQUETTE. `.mark` y pèse 30 px, interlettrage −1,3 px, encre #FF6363 : la taille et la couleur sont reprises telles quelles, et l'interlettrage converti en em (−1,3 px sur 30 px ≈ −0,043 em) pour qu'il suive si la taille change. LA GRAISSE, ELLE, RESTE À 800. La maquette écrit 900, mais son `.mark` est du texte en Nunito ; ici c'est le wordmark, dessiné en Baloo 2 — et Baloo 2 s'arrête à 800 (Google refuse la requête `wght@900`, vérifié). Demander 900 n'aurait donc pas épaissi le logo : le navigateur aurait synthétisé un faux gras, déformant un dessin de marque. 800 est sa graisse la plus lourde, et c'est déjà celle qu'il porte partout ailleurs sur le site — le logo doit rester identique d'une page à l'autre. */ .lrn-gate .gate-brand { display: inline-block; text-decoration: none; } .lrn-gate .gate-brand .mn-logo { letter-spacing: -0.043em; } /* NUNITO, ET NON CAPRIOLA — la maquette le demande, et deux raisons techniques le confirment. Capriola ne possède QU'UNE SEULE graisse : le `font-weight: 900` y produit un faux gras synthétique, épaissi par le navigateur, jamais dessiné par le fondeur. Et ses lettres réclament 1,25 em de hauteur de ligne ; sous cette valeur elles débordent de leur boîte. Le `line-height: 1.12` de la maquette les aurait rognées. Nunito, elle, porte une vraie graisse 900 et tient dans 1,12. */ .lrn-gate .gate-head h1 { margin: 16px 0 0; text-align: center; font-family: Nunito, system-ui, sans-serif; font-size: 34px; font-weight: 900; letter-spacing: -1.4px; line-height: 1.12; color: #1C1C1E; } /* ---- les champs ------------------------------------------------------ */ .lrn-gate .g-field { width: 100%; height: 66px; padding: 0 22px; border: 2px solid transparent; border-radius: 999px; background: #F5F2EF; font-family: inherit; font-size: 17px; font-weight: 700; color: #1C1C1E; outline: none; transition: border-color .18s, background .18s; } .lrn-gate .g-field::placeholder { color: #6E6D72; font-weight: 600; } .lrn-gate .g-field:hover { border-color: #E4DFDB; } .lrn-gate .g-field:focus { border-color: #FF6363; background: #fff; } .lrn-gate .g-field.bad { border-color: #C0392B; } .lrn-gate .g-field + .g-field { margin-top: 12px; } /* ---- le bouton principal --------------------------------------------- */ .lrn-gate .g-btn--primary { width: 100%; height: 66px; margin-top: 14px; border: 0; border-radius: 999px; background: linear-gradient(-38deg,#FFBCBC 0%,#FF6363 54%); color: #fff; font-family: inherit; font-size: 18px; font-weight: 900; letter-spacing: -.3px; text-shadow: 0 1px 2px rgba(150,30,30,.5); cursor: pointer; box-shadow: 0 16px 30px -16px rgba(255,99,99,.85); transition: transform .18s cubic-bezier(.22,.9,.24,1); display: flex; align-items: center; justify-content: center; } .lrn-gate .g-btn--primary:hover { transform: translateY(-2px); } .lrn-gate .g-btn--primary[disabled] { opacity: .72; transform: none; cursor: default; } /* L'explication justifie le bouton : elle le SUIT, et précède le repli. */ .lrn-gate .gate-why { display: block; margin: 14px 0 0; text-align: center; font-size: 14.5px; font-weight: 700; line-height: 1.5; color: #6E6D72; text-wrap: pretty; } .lrn-gate .gate-why a { color: #C0392B; font-weight: 900; } /* Le repli est un lien discret, jamais un bouton : deux boutons pleins se disputeraient le regard, et celui du bas gagnerait à tort. */ .lrn-gate .gate-alt { display: block; margin: 12px auto 0; padding: 8px 4px; border: 0; background: none; font-family: inherit; font-size: 16.5px; font-weight: 800; color: #4A4950; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; transition: color .16s; } .lrn-gate .gate-alt:hover { color: #C0392B; } /* ---- le séparateur --------------------------------------------------- */ .lrn-gate .gate-or { display: flex; align-items: center; gap: 14px; margin: 26px 0; } .lrn-gate .gate-or::before, .lrn-gate .gate-or::after { content: ""; flex: 1; height: 1.5px; background: #F0EBE7; } .lrn-gate .gate-or span { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: #4A4950; } /* ---- les fournisseurs ------------------------------------------------ */ .lrn-gate .gate-socials { display: flex; flex-wrap: wrap; gap: 10px; } .lrn-gate .g-btn--soft { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; height: 66px; padding: 0 14px; border: 1.5px solid #EDE7E3; border-radius: 999px; background: #F9F7F5; color: #1C1C1E; font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; cursor: pointer; transition: border-color .18s, background .18s, transform .18s cubic-bezier(.22,.9,.24,1); } .lrn-gate .g-btn--soft:hover { border-color: #DDD5CF; background: #fff; transform: translateY(-2px); } .lrn-gate .g-mark { font-size: 19px; font-weight: 900; color: #EA4335; } .lrn-gate .g-mark--in { color: #0A66C2; } /* ---- la bascule connexion / inscription ------------------------------ */ .lrn-gate .gate-switch { display: block; margin-top: 26px; text-align: center; font-size: 17px; font-weight: 700; color: #3F3E44; } .lrn-gate .gate-switch button, .lrn-gate .gate-switch a { display: inline-block; padding: 6px 2px; border: 0; background: none; font-family: inherit; font-size: 17px; color: #1C1C1E; font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; } .lrn-gate .gate-switch button:hover, .lrn-gate .gate-switch a:hover { color: #C0392B; } /* ---- les mentions ---------------------------------------------------- */ .lrn-gate .gate-legal { display: block; margin-top: 14px; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.5; color: #6E6D72; text-wrap: pretty; } .lrn-gate .gate-legal a { color: #4A4950; text-decoration: underline; text-underline-offset: 3px; } .lrn-gate .gate-legal a:hover { color: #C0392B; } /* ---- le choix du rôle ------------------------------------------------ */ .lrn-gate .picks { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; } .lrn-gate .pick { display: flex; align-items: center; gap: 15px; min-height: 0; width: 100%; padding: 20px 18px; border: 1.5px solid #EDE7E3; border-radius: 26px; background: #F9F7F5; color: #1C1C1E; font-family: inherit; text-align: right; cursor: pointer; transition: border-color .18s, background .18s, transform .18s cubic-bezier(.22,.9,.24,1), box-shadow .22s ease; } .lrn-gate .pick:hover { border-color: #FFD3D3; background: #fff; transform: translateY(-3px); box-shadow: 0 20px 36px -24px rgba(255,99,99,.55); } .lrn-gate .pico { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 18px; background: #fff; color: #C0392B; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px -14px rgba(60,30,25,.6); transition: background .22s, color .22s; } .lrn-gate .pick:hover .pico { background: linear-gradient(-38deg,#FFBCBC 0%,#FF6363 54%); color: #fff; } /* L'icône de la pastille suit la couleur de la pastille — au repos comme au survol. Sans ces deux lignes elle reste grise dans les deux cas : `.pick .ico { color: var(--muted-4) }` (feuille du thème) et `.pico .ico { color: inherit }` ont la MÊME spécificité, et c'est la dernière écrite qui l'emporte. C'est celle qui grise. Elle écrasait donc l'héritage : la pastille virait bien au rouge dégradé au survol, l'icône dedans restait grise. */ .lrn-gate .pick .pico .ico { font-size: 27px; color: inherit; } .lrn-gate .pick:hover .pico .ico { color: #fff; } .lrn-gate .pick .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 19px; font-weight: 900; letter-spacing: -.5px; } .lrn-gate .pick .grow small { font-size: 15px; font-weight: 700; line-height: 1.45; color: #6E6D72; text-wrap: pretty; letter-spacing: 0; } .lrn-gate .pick .ico-22 { flex: 0 0 auto; font-size: 24px; color: #6E6D72; transition: transform .2s cubic-bezier(.22,.9,.24,1), color .18s; } .lrn-gate .pick:hover .ico-22 { transform: translateX(-4px); color: #C0392B; } /* ---- le rôle retenu -------------------------------------------------- */ /* Le choix ne se perd pas d'un écran à l'autre : qui a dit « J'enseigne » le voit écrit jusqu'à la confirmation, et peut en changer d'un clic. */ .lrn-gate .chosen { display: inline-flex; align-items: center; gap: 9px; margin: 16px auto 0; padding: 8px 11px 8px 15px; border-radius: 999px; background: #FFF1F1; color: #C0392B; font-size: 14.5px; font-weight: 900; } .lrn-gate .chosen .ico { font-size: 18px; } .lrn-gate .chosen .swap { margin-right: 3px; padding: 0 2px; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 800; color: #C0392B; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .lrn-gate .row-center { display: flex; justify-content: center; } /* ---- le destinataire du code ----------------------------------------- */ /* `height: auto` est ici la déclaration qui COMPTE : le thème fixe ce bandeau à 60 px de haut. La phrase de la maquette tient sur trois lignes dès que l'adresse est longue — et les lignes en trop sortaient du fond rose, sous le cadre, au lieu de le faire grandir. */ .lrn-gate .gate-sent { display: flex; align-items: flex-start; gap: 12px; height: auto; min-height: 0; margin-top: 22px; padding: 16px 18px; border-radius: 22px; background: #FFF6F2; } .lrn-gate .gate-sent .ico { flex: 0 0 auto; font-size: 22px; color: #C0392B; } .lrn-gate .gate-sent .grow { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.5; color: #3F3E44; text-wrap: pretty; } .lrn-gate .gate-sent .grow b { font-weight: 900; color: #1C1C1E; word-break: break-word; } .lrn-gate .gate-sent button { flex: 0 0 auto; padding: 0 2px; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 800; color: #C0392B; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* ---- les six cases --------------------------------------------------- */ .lrn-gate .code-fields { display: flex; justify-content: center; gap: clamp(5px,1.6vw,8px); margin-top: 22px; } .lrn-gate .code-input { flex: 0 1 52px; width: 52px; min-width: 0; height: 66px; border: 2px solid #EDE7E3; border-radius: 18px; background: #F5F2EF; font-family: inherit; font-size: 26px; font-weight: 900; text-align: center; color: #1C1C1E; outline: none; font-variant-numeric: tabular-nums; transition: border-color .16s, background .16s, transform .16s cubic-bezier(.22,.9,.24,1); } .lrn-gate .code-input:focus { border-color: #FF6363; background: #fff; transform: translateY(-2px); } .lrn-gate .code-fields.bad .code-input { border-color: #C0392B; } @media (max-width: 400px) { .lrn-gate .code-input { height: 58px; font-size: 22px; } } /* ---- messages -------------------------------------------------------- */ .lrn-gate .g-error { display: block; margin-top: 12px; text-align: center; font-size: 14.5px; font-weight: 800; color: #C0392B; } .lrn-gate .g-note { display: block; margin-top: 12px; text-align: center; font-size: 14.5px; font-weight: 800; color: #1C1C1E; } /* ---- renvoi et retour ------------------------------------------------ */ .lrn-gate .gate-resend { display: block; margin: 16px auto 0; padding: 6px 4px; border: 0; background: none; font-family: inherit; font-size: 15px; font-weight: 800; color: #6E6D72; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; } .lrn-gate .gate-resend:hover { color: #C0392B; } .lrn-gate .gate-resend[disabled] { color: #A9A5A0; text-decoration: none; cursor: default; } .lrn-gate .gate-prev { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 4px; border: 0; background: none; font-family: inherit; font-size: 15px; font-weight: 800; color: #6E6D72; cursor: pointer; } .lrn-gate .gate-prev:hover { color: #C0392B; } .lrn-gate .gate-prev .ico { font-size: 19px; } .lrn-gate .gate-center { text-align: center; } /* ---- le pied --------------------------------------------------------- */ /* Bloc ici aussi : le thème met le pied en flex avec `gap: 20px`, qui s'ajoutait au `margin-left: 16px` des liens — 36 px entre chaque au lieu de 16. */ .lrn-gate .gate-foot { position: static; display: block; padding: 0 20px 26px; text-align: center; font-size: 13.5px; font-weight: 700; color: #6E6D72; } .lrn-gate .gate-foot a { margin-right: 16px; color: #6E6D72; text-decoration: none; } .lrn-gate .gate-foot a:hover { color: #C0392B; text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .lrn-gate *, .lrn-gate *::before, .lrn-gate *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }