/* ============================================================== HOLANGCOURS : pages de compte (connexion, inscription). Le fond était un aplat bleu opaque : un formulaire posé sur rien. On reprend le principe du hero, une photo sous le voile en dégradé du site. Le voile n'est pas un effet, il est OBLIGATOIRE : sans lui, le texte blanc ne passe pas le contraste sur une photo claire. Aucune couleur écrite ici : tout vient de holangcours-tokens.css. ============================================================== */ .auth { position: relative; min-height: 100vh; min-height: 100dvh; /* barres d'adresse mobiles : la vraie hauteur */ display: flex; align-items: stretch; /* le fil doit toucher le haut, pas flotter */ justify-content: center; overflow-x: clip; /* « hidden » casserait le fil collant */ background: var(--hol-hero-navy); /* tenu tant que la photo n'est pas là */ } /* La photo reste NETTE et lisible. C'est le dégradé bleu par-dessus qui la pose en fond, pas un flou : flouter revenait à s'en passer. */ .auth-fond { position: fixed; /* la photo reste, le contenu défile dessus */ inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; /* le visage reste dans le cadre en portrait */ z-index: 0; } /* Le dégradé tient la couleur du site sans effacer la photo. Dense en haut et en bas, là où le fil d'Ariane et le lien de retour sont en blanc sur l'image ; intermédiaire au centre, où la carte blanche se suffit et où la photo doit rester lisible. */ .auth-voile { position: fixed; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--hol-hero-scrim-a) 0%, var(--hol-hero-scrim-d) 26%, var(--hol-hero-scrim-d) 74%, var(--hol-hero-scrim-a) 100%); } /* LE GRAIN DE LA MAISON, par-dessus la photo et son voile, sous la carte. Fixe comme eux : il appartient au fond, et un fond ne défile pas. Le dessin vient de « .hol-grain » dans les tokens, il n'est pas redessiné ici ; seule sa place dans la page est décidée à cet endroit. */ /* LE SÉLECTEUR PORTE « .hol-scope » À DESSEIN. La règle commune du grain pose « position: relative » avec deux classes ; écrite avec une seule, celle-ci perdait, la couche restait en flux dans la colonne et tombait à ZÉRO pixel de large : le motif était là, calculé, invisible. */ .hol-scope .auth-grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; } /* La largeur ne se pose plus sur le conteneur mais sur ce qui doit être étroit. Bridé à 480 px, le fil d'Ariane se coupait en deux lignes alors qu'il a toute la page pour tenir. */ .auth-dedans { position: relative; z-index: 2; width: 100%; min-height: 100vh; min-height: 100dvh; padding: 0 var(--hol-gutter); display: flex; flex-direction: column; } /* Ce qui se centre, c'est le contenu, jamais le fil d'Ariane. Sur une page courte, qui ne défile pas, centrer le bloc entier descendait le fil au milieu de l'écran : il paraissait figé là, sans raison. */ .auth-centre { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding-block: 28px 36px; } /* LA SIGNATURE DE DROITS FERME LA COLONNE. Elle n'est pas dans la carte : la carte est le formulaire, et rien d'autre n'a à s'y glisser. Posée en dernière ligne du cadre, elle se lit après le geste, pas pendant. */ .auth-dedans > .hol-droits { flex: none; padding-bottom: 22px; text-align: center; } /* LES QUATRE PASTILLES RESTENT ENSEMBLE (Jimmy, iPad, 25 octobre 2026 : « Gérer les cookies » tombait seul à la ligne). Sur un grand écran, la mention et les pastilles tiennent sur une ligne, un peu resserrées ; s'il n'y a vraiment pas la place, les quatre passent dessous ensemble, jamais une seule. Sous 1000 px, la règle des jetons les range déjà sous la mention. */ @media (min-width: 1001px) { .auth-dedans > .hol-droits .hol-droits__actions { display: inline-flex; flex-wrap: nowrap; gap: 5px; white-space: nowrap; vertical-align: middle; } .auth-dedans > .hol-droits .hol-droits__bouton { margin: 0; padding: 4px 10px; letter-spacing: .02em; } } .auth-logo, /* UNE SEULE LARGEUR POUR LA CARTE ET POUR LE RETOUR, afin qu'ils restent alignés : le bouton de retour se cale sur le bord gauche de la carte, et deux valeurs tenues séparément auraient fini par se décaler. La création de compte demande plus de place : huit champs, dont deux paires côte à côte, et un prénom long se lisait à l'étroit. Elle prend donc la largeur élargie. */ .auth { --auth-largeur: 480px; } .auth--large { --auth-largeur: 600px; } .auth-carte { width: 100%; max-width: var(--auth-largeur); margin-inline: auto; } /* ---------------------------------------------------------- fil d'Ariane */ /* Centré, comme le logo et la carte : aligné à gauche sous un logo centré, il donnait l'impression d'un élément oublié là. Chaque étape porte sa pastille, parce que sur une photo le texte seul flotte sans se rattacher à rien. */ .auth-fil { --hol-lien: var(--hol-text-inverse-2); --hol-lien-survol: var(--hol-text-inverse); } /* UNE SEULE LIGNE. Un fil d'Ariane coupé en deux ne se lit plus comme un chemin. S'il ne tient pas, c'est la bande qui défile, jamais la page : le brief interdit le défilement horizontal du document. */ /* LA BANDE PORTE LE FOND, LE FIL PORTE LE DÉFILEMENT. Les deux étaient un seul élément, et le sélecteur de langue n'avait nulle part où se poser : glissé dedans, il partait avec le fil dès que celui-ci défilait. La bande tient toute la largeur, le fil prend la place qui reste, la langue garde la sienne. */ .auth-bande { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; /* La bande tient toute la largeur et porte son fond : sous elle passe tantôt la photo, tantôt la carte blanche, et les pastilles claires seraient illisibles sur du blanc. */ margin-inline: calc(-1 * var(--hol-gutter)); padding: 12px var(--hol-gutter); background: var(--hol-hero-scrim-a); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--hol-border-on-dark); } .auth-fil { flex: 1 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; /* la barre gâcherait la bande */ -webkit-overflow-scrolling: touch; } .auth-fil::-webkit-scrollbar { display: none; } /* ------------------------------------------------------------ les langues */ /* Même dessin que les pastilles du fil, à droite de la bande : c'est le même genre d'objet, un repère qui se clique, et deux dessins voisins pour deux objets voisins donneraient une bande bricolée. */ .auth-langues { flex: none; display: flex; gap: 4px; padding: 3px; border-radius: var(--hol-r-pill); border: 1px solid var(--hol-bordure-sur-sombre); background: var(--hol-surface-sur-sombre); backdrop-filter: blur(8px) saturate(140%); } .auth-langue { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em; border-radius: var(--hol-r-pill); text-decoration: none; --hol-lien: var(--hol-text-inverse-2); --hol-lien-survol: var(--hol-text-inverse); } .auth-langue:hover { background: var(--hol-surface-sur-sombre-fort); } /* La langue en cours porte l'encre de marque sur blanc, comme l'étape courante du fil juste à côté. */ .auth-langue[aria-current] { --hol-lien: var(--hol-brand); --hol-lien-survol: var(--hol-brand); font-weight: 600; background: var(--hol-surface-1); } .auth-langue:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--hol-focus-inverse); } .auth-fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; /* « safe center » centre tant que le fil tient, et repart du début dès qu'il déborde. Un centrage simple couperait les DEUX bouts, donc le chemin de retour, qui est précisément ce qu'on vient y chercher. */ justify-content: safe center; gap: 6px; min-width: min-content; } .auth-fil li { display: flex; align-items: center; gap: 6px; } .auth-fil li + li::before { content: '›'; color: var(--hol-text-inverse-muted); font-size: 14px; line-height: 1; } .auth-fil a, .auth-fil [aria-current] { display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--hol-r-pill); border: 1px solid var(--hol-bordure-sur-sombre); background: var(--hol-surface-sur-sombre); backdrop-filter: blur(8px) saturate(140%); white-space: nowrap; } .auth-fil a { color: var(--hol-text-inverse-2); text-decoration: none; } .auth-fil a:hover { color: var(--hol-text-inverse); border-color: var(--hol-text-inverse-muted); background: var(--hol-surface-sur-sombre-fort); } /* L'ÉTAPE COURANTE EST BLANCHE, encre de marque dessus. Sur un fond déjà bleu, l'aplat de marque ne se détachait qu'à 1,6:1, et un bleu clair avec de l'encre foncée restait terne. Le blanc est ce qui se voit le mieux sur du sombre, et l'encre de marque y est la couleur d'action du site. */ .auth-fil [aria-current] { color: var(--hol-brand); font-weight: 600; background: var(--hol-surface-1); border-color: var(--hol-surface-1); } .auth-logo { display: block; text-align: center; } .auth-logo img { height: 30px; width: auto; display: inline-block; } /* LE LOGO D'UN LOCATAIRE N'A PAS LA FORME DU NOTRE. Le nôtre est un lettrage très large, trente pixels de haut suffisent. Celui d'un organisme est souvent une marque carrée ou ronde, et trente pixels la rendent minuscule à côté de la carte de connexion. On lui en donne quarante, et on borne la largeur pour qu'un lettrage très long ne déborde pas la carte sur un téléphone. */ .auth-logo--locataire img { height: 40px; max-width: 220px; object-fit: contain; } /* ------------------------------------------------------------- la carte */ /* UNE VITRE DÉPOLIE, PAS UNE PLAQUE. La carte blanche opaque était posée SUR la photo comme une feuille sur une table ; dépolie, elle en fait partie : on devine la lumière de l'image derrière, et la page tient ensemble. DEUX DÉTAILS FONT TOUT LE RESTE, et ce sont ceux qu'on ne remarque pas : un filet de lumière sur l'arête haute, comme sur une vitre vue de face, et un reflet en diagonale qui s'éteint au tiers. Sans eux, c'est du blanc translucide ; avec eux, c'est du verre. */ .auth-carte { position: relative; background: var(--hol-surface-1); /* repli : voir le @supports */ border-radius: var(--hol-r-lg); padding: clamp(24px, 5vw, 38px); box-shadow: var(--hol-shadow-3); } /* LE VERRE N'EXISTE QUE SI LE NAVIGATEUR SAIT FLOUTER CE QU'IL Y A DERRIÈRE. Sans « backdrop-filter », une carte translucide laisse passer la photo nette : le formulaire devient illisible. Les vieux Android gardent donc la carte blanche pleine, qui a toujours marché. */ @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .auth-carte { background: var(--hol-verre); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--hol-verre-bord); box-shadow: var(--hol-shadow-3), inset 0 1px 0 var(--hol-verre-lueur); } /* Le reflet. Il est sous le texte : l'ordre de peinture place un « ::before » avant les enfants, donc rien n'est voilé par lui. */ .auth-carte::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(148deg, var(--hol-verre-reflet) 0%, transparent 34%); } } /* Un seul bouton : il se centre sur toute la largeur, pas dans une colonne de 480 px. En flex plutôt qu'en text-align, pour que la cible garde sa hauteur et son alignement vertical. */ /* Même raison pour le fil d'Ariane : il s'appuie sur le haut du voile, mais une photo très claire le rendrait illisible. */ /* ------------------------------------------------------------- formulaire */ /* LE CHAMP PORTE LA COULEUR DE LA MAISON, ET IL NE LA PORTAIT PAS. CE QU'ON VOYAIT. Une carte blanche, des cases blanches bordées d'un gris presque absent, et une seule tache bleue : le bouton. Sur la vitre dépolie, le blanc du champ et le blanc de la carte se confondent ; on cherchait où écrire. Un formulaire d'entrée est le premier geste du site, et il n'avait l'air de rien. TROIS CHOSES SEULEMENT, ET AUCUNE N'EST UN ORNEMENT : LE FOND, teinté du bleu le plus clair de la palette. Le champ se détache de la carte sans l'ombre ni le trait épais qui en feraient une boîte. C'est le creux où l'on écrit, et il se voit. LA BORDURE, bleue à vingt-six pour cent plutôt que grise. Elle dessine le champ au lieu de le suggérer. AU FOCUS, LE CHAMP DEVIENT BLANC. C'est l'inverse de ce qu'on fait d'habitude, et c'est pour cela que ça marche : la case où l'on écrit à l'instant est la seule éclairée, les autres restent en retrait. Le trait passe à deux pixels, en bleu plein, et le halo reste. LA MÊME CHOSE VAUT PARTOUT. Les champs de l'administration et de l'espace suivent la même règle, écrite dans les tokens : un formulaire du site ne doit pas dépendre de la page où il se trouve. */ .auth-champ { display: block; width: 100%; min-height: 52px; padding: 14px 16px; font: inherit; font-size: 16px; /* sous 16px, iOS zoome à la saisie */ color: var(--hol-text-primary); background: var(--hol-champ-fond); border: 1px solid var(--hol-champ-bord); border-radius: var(--hol-r-sm); } .auth-champ::placeholder { color: var(--hol-text-secondary); } .auth-champ:hover { border-color: var(--hol-brand-doux); } .auth-champ:focus-visible { outline: none; background: var(--hol-surface-1); border-color: var(--hol-brand); border-width: 2px; /* Deux pixels de trait au lieu d'un : sans compensation, le texte sauterait d'un pixel au moment où l'on pose le curseur. */ padding: 13px 15px; box-shadow: 0 0 0 3px var(--hol-brand-wash); } /* L'ÉTIQUETTE AUSSI PORTE LE BLEU, dans la nuance faite pour cela : « doux » tient 7,1:1 sur fond clair, donc elle se lit aussi bien qu'un texte noir tout en rattachant le champ à la maison. */ .auth-etiq { display: block; font-size: 14px; font-weight: 600; margin: 0 0 8px; color: var(--hol-brand-doux); } .auth-aide { font-size: 13px; line-height: 1.5; color: var(--hol-text-muted); margin: 7px 0 0; } .auth-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 460px) { .auth-duo { grid-template-columns: 1fr; } } /* Un engagement se coche sur toute la ligne, pas sur la case de 20 pixels. */ /* MÊME RAISON QUE POUR LE CADRAN DE FORCE : une case à cocher posée sur le fond de page, dans une carte, disparaît chez un locataire dont les deux crèmes sont identiques. Elle prend la famille du champ, dont elle fait partie : c'est une réponse qu'on donne, pas une note qu'on lit. */ .auth-engage { display: flex; gap: 13px; align-items: flex-start; padding: 14px 16px; cursor: pointer; background: var(--hol-champ-fond); border: 1px solid var(--hol-champ-bord); border-radius: var(--hol-r-sm); } .auth-engage:hover { border-color: var(--hol-brand); } /* Cochée, elle se referme sur la marque : le geste se voit sans qu'on relise. */ .auth-engage:focus-within { border-color: var(--hol-brand); } .auth-engage input { accent-color: var(--hol-brand); } .auth-engage input { margin-top: 2px; width: 20px; height: 20px; flex: none; } .auth-engage span { font-size: 14.5px; line-height: 1.55; } .auth-cta { min-height: 52px; width: 100%; border: 0; cursor: pointer; background: var(--hol-bouton-fond); color: var(--hol-bouton-encre); font: inherit; font-weight: 600; font-size: 16px; border-radius: var(--hol-r-sm); } /* TANT QUE LE COMPTE N'EST PAS PRÊT, LE BOUTON LE DIT. Il garde sa forme et sa place : ce n'est pas un bouton différent, c'est le même, pas encore à l'heure. La ligne en dessous explique ce qui manque. */ .auth-cta:disabled { /* Le gris du fond de page, et un trait pour garder une forme : « surface-2 » vaut du blanc dans la charte, et le bouton disparaissait dans la carte blanche au lieu d'avoir l'air éteint. Le trait est une ombre intérieure, donc le bouton ne change pas d'un pixel en s'allumant. */ background: var(--hol-surface-0); color: var(--hol-text-muted); box-shadow: inset 0 0 0 1px var(--hol-border-strong); cursor: not-allowed; } .auth-garde-note { margin: 9px 0 0; text-align: center; } /* Ce qui concerne les mots de passe (astérisque, jauge, repères, verdict) a déménagé dans holangcours-tokens.css : ces écrans ne sont plus les seuls à s'en servir, « Mon compte » les emploie aussi. */ .auth-bascule { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--hol-border-subtle); text-align: center; font-size: 14.5px; color: var(--hol-text-secondary); } .auth-bascule a { color: var(--hol-brand); font-weight: 600; } /* Avant de faire défiler la bande, on la resserre : la plupart des téléphones la font alors tenir entière. */ /* ═══ SUR TÉLÉPHONE : ON PRÉFÈRE QUE LE FIL DÉFILE PLUTÔT QU'IL RÉTRÉCISSE ══ CE QUI ÉTAIT ÉCRIT ICI, ET POURQUOI C'ÉTAIT UN MAUVAIS MARCHÉ. Pour que le fil d'Ariane tienne entier sans défiler sous 400 px, il descendait à NEUF pixels, en capitales espacées, dans des pastilles de vingt-deux de haut. Le raisonnement se tenait : on ne veut pas chercher le chemin de retour du doigt. Mais un chemin qu'on ne peut pas LIRE ne se cherche pas non plus, et une cible de vingt-deux pixels se rate une fois sur trois. ON INVERSE L'ARBITRAGE : le texte reste à onze pixels, les pastilles à trente-quatre, et si le fil ne tient pas, il défile — ce que la bande sait déjà faire, « overflow-x:auto » est trois règles plus haut. Le document, lui, ne défile toujours pas de côté : c'est ce que le brief interdit, et c'est respecté. */ @media (max-width: 520px) { .auth-fil a, .auth-fil [aria-current] { padding: 0 10px; min-height: 34px; font-size: 11px; letter-spacing: .03em; } .auth-fil ol { gap: 3px; } .auth-fil li { gap: 3px; } .auth-fil li + li::before { font-size: 12px; } .auth-langue { padding: 0 11px; min-height: 32px; font-size: 11px; letter-spacing: .03em; } .auth-bande { gap: 8px; } } @media (max-width: 400px) { .auth-fil a, .auth-fil [aria-current] { padding: 0 9px; min-height: 34px; font-size: 11px; letter-spacing: 0; } .auth-fil ol, .auth-fil li { gap: 3px; } .auth-fil li + li::before { font-size: 11px; } .auth-langue { padding: 0 10px; min-height: 32px; font-size: 11px; letter-spacing: 0; } .auth-langues { gap: 3px; padding: 3px; } .auth-bande { gap: 6px; } } /* Un écran court ne doit pas centrer une carte plus haute que lui : elle déborderait par le haut, hors d'atteinte du défilement. */ @media (max-height: 760px) { .auth-centre { justify-content: flex-start; } } /* LE FIL CENTRÉ SUR LA PAGE, PAS SUR LA PLACE QUI RESTE. Jimmy : « ce n'est pas centré par rapport au logo ». En ligne, le fil se centrait dans la largeur laissée par le sélecteur de langue, donc décalé vers la gauche de la moitié de ce sélecteur. Sur un écran assez large, la bande devient une grille à trois colonnes symétriques : le fil au milieu, exactement à l'aplomb du logo, la langue à droite. Sur téléphone, rien ne change : le fil prend toute la place et défile. */ @media (min-width: 700px) { .auth-bande { display: grid; grid-template-columns: 1fr auto 1fr; } .auth-bande > .auth-fil { grid-column: 2; } .auth-bande > .auth-langues { grid-column: 3; justify-self: end; } }