/* ====================================================================== INDICATIF ET NUMERO, SUR UNE LIGNE ====================================================================== Un numero sans indicatif ne se compose pas depuis l'etranger, et la plateforme s'adresse a plusieurs pays. POURQUOI CE COMPOSANT A SA PROPRE FEUILLE. Il est rendu par un seul gabarit, `partials/champ-telephone.blade.php`, mais dans deux mondes qui ne chargent pas les memes feuilles : - l'application (`layouts/app`), qui charge `lk.css` ; - la vitrine (`landing.blade.php`), qui ne la charge PAS et vit sur `portal.css`. Chacune portait donc sa copie de la mecanique : la grille, la fleche dessinee a la main, le `font-size: 0` qui resiste au contraste eleve, le lisere du drapeau. Le correctif etait copie, pas partage : la prochaine correction aurait ete a faire deux fois, et oubliee une fois sur deux. CE QUI DIFFERE VRAIMENT reste en place, et seulement cela. L'apercu se pose PAR-DESSUS un champ, il doit donc s'aligner sur les champs de SON monde, qui n'ont ni le meme retrait ni la meme encre : application vitrine retrait gauche 14 px 12 px encre var(--ink-200) var(--white) taille 15 px (16 sous 640) 16 px partout Ces valeurs sont des variables, posees ici avec celles de l'application, et redefinies par `portal.css` pour la vitrine. Rien d'autre n'est duplique. ====================================================================== */ .champ-telephone { /* Les valeurs de l'application. `portal.css` les redefinit pour la vitrine, et gagne le departage en etant chargee apres. */ --champ-tel-retrait: 14px; --champ-tel-encre: var(--ink-200); --champ-tel-fleche: rgba(var(--ink-200-rgb), 0.65); --champ-tel-option-encre: var(--ink-200); --champ-tel-fleche-droite: 13px; /* L'apercu se pose PAR-DESSUS un champ : il doit avoir la taille de ce qu'on tape a cote, sinon l'indicatif et le numero ne sont pas ecrits de la meme facon sur une seule ligne. Dans l'application, les champs font 15 px, et 16 sous 640 (`lk.css`). */ --champ-tel-taille: 15px; display: grid; /* Le selecteur ferme ne montre que le drapeau et l'indicatif : mesure sur le plus large, « +213 », 106 px avec l'image, les marges et la fleche. Tout le reste va au NUMERO, qui est ce qu'on saisit. */ grid-template-columns: minmax(0, 112px) minmax(0, 1fr); gap: 8px; align-items: stretch; } .champ-telephone select, .champ-telephone input { width: 100%; box-sizing: border-box; min-height: 42px; margin-bottom: 0; } /* ===== L'apercu du pays retenu ===== Le selecteur garde les noms complets pour qu'on puisse choisir ; referme, il n'a la place que du pays et de l'indicatif. L'apercu se pose par-dessus son texte, rendu invisible. */ .champ-telephone__pays { position: relative; min-width: 0; } /* Deux classes, pas une : une classe seule se fait battre au departage par les regles de champ, dans les deux mondes (`input[type=...]` cote application, `.portal-access__form select` cote vitrine), et le texte du selecteur reapparait sous l'apercu. */ .champ-telephone .champ-telephone__pays select { /* La fleche du systeme se dessine avec la couleur du texte : la rendre transparente l'effacerait aussi. L'apercu porte donc la sienne. */ appearance: none; -webkit-appearance: none; color: transparent; padding-right: 30px; /* * ET LA TAILLE A ZERO, en plus de la couleur transparente. * * `color: transparent` suffit tant que le navigateur respecte la couleur * demandee. En contraste eleve (Windows, ou une extension de lisibilite) * il la REIMPOSE, et le nom complet du pays se redessine sous l'apercu : * on lit alors deux textes superposes, illisibles. * * Une taille nulle ne se reimpose pas. Le menu deroulant garde la sienne, * posee sur `option` juste en dessous, donc on choisit toujours sur les * noms complets. */ font-size: 0; } /* Le menu deroulant, lui, se lit : il garde sa couleur. */ .champ-telephone .champ-telephone__pays select option { font-size: 15px; color: var(--champ-tel-option-encre); background: var(--slate-mid); } .champ-telephone__apercu { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 30px 0 var(--champ-tel-retrait); color: var(--champ-tel-encre); font-size: var(--champ-tel-taille); white-space: nowrap; overflow: hidden; pointer-events: none; } /* Meme traitement que les drapeaux du selecteur de langue : sans le lisere, ceux a fond blanc se confondent avec le champ. Le rapport 4/3 est celui des fichiers, pour ne rien rogner. */ .champ-telephone__drapeau { flex: none; width: 20px; height: 15px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(var(--white-rgb), 0.28); } .champ-telephone__apercu::after { content: ''; position: absolute; right: var(--champ-tel-fleche-droite); width: 8px; height: 8px; border-right: 2px solid var(--champ-tel-fleche); border-bottom: 2px solid var(--champ-tel-fleche); transform: translateY(-2px) rotate(45deg); } /* Sous 640 px, `lk.css` passe les champs a 16 px pour que le clavier du telephone ne fasse pas zoomer la page. L'apercu suit ce qu'il recouvre. */ @media (max-width: 640px) { .champ-telephone { --champ-tel-taille: 16px; } } /* Sous cette largeur, l'indicatif et le numero ne tiennent plus cote a cote : le pays passe au-dessus plutot que d'ecraser le champ qu'on remplit. */ @media (max-width: 520px) { .champ-telephone { grid-template-columns: 1fr; } } /* ==== profil : ce que le produit n'avait pas ==== Ces regles n'ont pas d'equivalent plus haut : elles ne remplacent rien, elles ajoutent. Elles restent donc ou elles sont. ==== */ /* `:not(:where(.btn-danger, .btn-secondary))` : la famille du bouton second existe maintenant dans la couche commune, et cette regle-ci ne parle que des boutons de SOUMISSION. `:where()` ne pese rien, l'exclusion ne deplace donc pas ce que la regle gagnait deja. */ /* `btn-appel` EST EXCLU : un bouton d'appel reste un bouton d'appel meme quand il soumet un formulaire, et ce selecteur-ci est plus specifique que celui de l'aplat. Sans cette exclusion, « Commencer le test » tombait au niveau 2 alors que la page n'existe que pour lui. NIVEAU 2, DEPUIS LE 29/08. Cette regle posait l'ardoise `0,92`, ecrite par le jeton `--slate-mid-rgb`, ce qui la rendait invisible a une recherche sur la valeur : elle a survecu au retrait des autres ardoises. Elle peint des SOUMISSIONS DE FORMULAIRE, donc elle prend le deuxieme niveau de la hierarchie arretee la veille : le cyan voile a 16 %, filet a 38 %. L'appui manquait, il est pose sur la meme echelle que la famille ordinaire. */ .lk-content .card form .btn:not(:where(.btn-secondary, .btn-appel, .btn-danger)), .lk-content .profile-photo__actions .btn:not(:where(.btn-secondary, .btn-appel, .btn-danger)), .profil-notifs__valider { background: rgba(var(--portal-accent-rgb), 0.16); border: var(--filet-epaisseur) solid rgba(var(--portal-accent-rgb), 0.38); color: rgba(var(--white-rgb), 0.96); font-weight: var(--graisse-moyenne); } .lk-content .card form .btn:not(:where(.btn-secondary, .btn-appel, .btn-danger)):hover, .lk-content .profile-photo__actions .btn:not(:where(.btn-secondary, .btn-appel, .btn-danger)):hover, .profil-notifs__valider:hover { background: rgba(var(--portal-accent-rgb), 0.22); border-color: rgba(var(--portal-accent-rgb), 0.52); color: rgba(var(--white-rgb), 0.98); } .lk-content .card form .btn:not(:where(.btn-secondary, .btn-appel, .btn-danger)):active, .lk-content .profile-photo__actions .btn:not(:where(.btn-secondary, .btn-appel, .btn-danger)):active, .profil-notifs__valider:active { background: rgba(var(--portal-accent-rgb), 0.28); border-color: rgba(var(--portal-accent-rgb), 0.66); color: rgba(var(--white-rgb), 1); } /* LE SELECTEUR A ETE REPRIS APRES VERIFICATION : le formulaire n'est pas un enfant direct de `.lk-content`, il vit dans la grille a deux colonnes. La premiere version ne matchait rien, et le bouton rouge etait toujours la sur la capture. */ .lk-content .grid-2 > form.mt-20 { display: none; } /* --- 4. Les blocs prennent le traitement retenu --------------------------- ------------------------------------------------------------------------- Les cinq blocs de la page sont des `.card` : ardoise `rgba(30,41,59,0.7)`, `backdrop-filter: blur(14px)`, aucune ombre. C'est l'ANCIEN traitement, celui qu'on a remplace partout ailleurs. Le retenu au banc (B4) est pose sur `.dashboard-card`, que cette page n'emploie pas : elle est donc restee en arriere sans que rien ne le signale. POURQUOI PAS `.card` DANS LA COUCHE COMMUNE. Verification faite avant d'ecrire, comme pour les boutons : `.card` nu n'existe que sur cette page, mais sur le parcours client il accompagne quatre classes plus precises, et deux d'entre elles ne declarent pas leur ombre. Elles auraient donc herite de celle-ci. La regle reste locale jusqu'a ce que les pages restantes soient ouvertes. LE FLOU PART, pour la raison deja mesuree au banc : il rend la teinte du bloc dependante de l'orbe du fond qui passe derriere, donc deux blocs cote a cote n'ont pas la meme couleur, et le navigateur recompose la zone a chaque image. ------------------------------------------------------------------------- */ .lk-content .grid-2 > .card { background: linear-gradient(135deg, rgba(var(--portal-accent-rgb), 0.04), rgba(var(--portal-accent-rgb), 0) 60%), rgba(var(--white-rgb), 0.03); border: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); backdrop-filter: none; -webkit-backdrop-filter: none; } /* « Votre photo » est un bloc DANS un bloc. Il garde son espacement, il perd sa surface : c'est le meme geste que sur les cartes de progression de l'espace praticien et du parcours praticien. */ .lk-content .card .card.profile-photo { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-left: 0; padding-right: 0; } /* --- 5. La colonne de droite cesse de s'arreter en chemin ----------------- ------------------------------------------------------------------------- Mesure : la grille pose DEUX RANGEES, de 1037 et 398 px, et cale ses blocs en haut. La premiere rangee prend donc la hauteur de « Mon identite », et « Notifications », qui ne fait que 706 px, laisse 331 px de vide sous lui. Meme chose en dessous. Sur un ecran, un tiers de la colonne droite ne montre rien. La grille est le mauvais outil ici : elle aligne des rangees, or ces blocs n'ont aucune raison d'etre alignes deux par deux. Le flux en COLONNES les empile l'un sous l'autre et passe a la suivante quand la premiere est pleine, ce qui ne laisse aucun trou par construction. CE QUE CA CHANGE A LA LECTURE : on lit la colonne de gauche en entier, puis celle de droite, au lieu de zigzaguer. Pour une page de reglages ou aucun bloc ne depend du voisin, c'est le bon ordre. ------------------------------------------------------------------------- */ .lk-content .grid-2 { display: block; columns: 2; column-gap: 20px; } /* CETTE GARDE VISAIT `> .card`, ET C ETAIT TROP ETROIT. Sur « Mon compte » les enfants directs de la grille SONT des `.card`, donc la garde tenait et la page allait bien. Sur le profil vu depuis l'administration, les enfants sont deux `.profile-side-stack` : la garde ne les touchait pas, le second bloc se coupait au bas de la colonne de gauche et reprenait en HAUT de celle de droite, avec sa carte et sa section de facturation coupees avec lui. MESURE AVANT CORRECTION, sur la maquette `base/profil-client.html` : 18 blocs coupes en tout sur cinq largeurs (3 a 1440, 1200 et 1000, puis 5 a 700 et 4 a 400). L'oracle est `getClientRects().length` : un element rendu d'un seul tenant en renvoie UN, un element fragmente en renvoie un par morceau. C'est la seule mesure qui les distingue -- `offsetHeight` rend l'union des morceaux et ressemble a une hauteur ordinaire, ce qui avait fait chercher la cause ailleurs pendant une session entiere. DEUX FILETS PLUTOT QU UN. Le premier porte sur l'enfant direct, quel qu'il soit : c'est lui qui garde une colonne entiere d'un seul tenant. Le second porte sur les cartes A N IMPORTE QUELLE PROFONDEUR, et il sert au cas ou un bloc depasse la hauteur d'une colonne : `avoid` est un voeu, pas une promesse, et le navigateur coupe quand meme quand rien d'autre n'est possible. Dans ce cas la coupure tombe ENTRE deux cartes, jamais dedans. */ .lk-content .grid-2 > * { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 20px; } .lk-content .grid-2 .card { break-inside: avoid; -webkit-column-break-inside: avoid; } /* LE REPLI ETROIT ETAIT MORT SANS QUE RIEN NE LE DISE. `lk.css` (l. 2541) pose `.grid-2 { grid-template-columns: 1fr }` sous 900 px pour ramener la page a une colonne. Mais la regle ci-dessus a fait de `.grid-2` un bloc en COLONNES, plus une grille : `grid-template-columns` n'y a plus aucun effet, et la page restait a deux colonnes jusqu'a 400 px, ou chacune fait moins de 170 px. Aucune erreur nulle part, la declaration s'applique simplement a une propriete que l'element n'a plus. On repasse donc a une colonne avec la propriete qui commande vraiment, a la meme borne que l'originale pour ne pas inventer un second palier. */ @media (max-width: 900px) { .lk-content .grid-2 { columns: 1; } } .lk-content .card form .btn.btn-secondary:has(+ *), .champ-note--avertit + .btn, .champ-note--avertit ~ .btn.btn-secondary { width: 100%; box-sizing: border-box; } /* La zone de depot : le creux, et des tirets au lieu d'un trait plein. Le tiret est la convention du depot depuis toujours ; c'est le seul endroit du produit qui l'emploie, donc il ne se confond avec rien. */ .profile-photo__actions label.btn[for] { display: block; width: 100%; box-sizing: border-box; padding: 18px 16px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); border: var(--filet-epaisseur) dashed var(--filet-petit); color: rgba(var(--white-rgb), 0.92); font-weight: var(--graisse-moyenne); text-align: center; cursor: pointer; } .profile-photo__actions label.btn[for]:hover { border-color: var(--filet-action); background: rgba(0, 0, 0, 0.22); } /* PENDANT QU'UN FICHIER SURVOLE LA ZONE. Le pointille se remplit et la surface s'eclaire : sans retour, on ne sait pas si l'on peut lacher ici. La classe est posee par le script du depot, dans `profile/edit.blade.php`. */ .profile-photo__actions label.btn[for].is-survol-depot { border-style: solid; border-color: rgba(var(--portal-accent-rgb), 0.58); background: rgba(var(--portal-accent-rgb), 0.10); } /* LE SELECTEUR PORTE `.lk-content .card` EN TETE, et ce n'est pas decoratif : la regle 1 de cette meme feuille pose l'ardoise sur `.lk-content .card form .btn`, soit trois classes. Sans ces deux-la, elle gagnait, et le resultat etait un fond d'ardoise reduit a la taille exacte du texte par mon `padding: 0` : ni un bouton, ni un lien. */ .lk-content .card .profile-photo__actions button.btn { background: none; border: 0; padding: 0; border-radius: 0; font-size: 12.5px; font-weight: var(--graisse-moyenne); /* L ACCENT DE SURFACE N EST PAS UNE ENCRE. `--portal-accent-rgb` est fait pour REMPLIR : en clair il devient l'or 190/152/52, qui rend 2,20 pose comme texte de 12,5 px. `--accent-texte-rgb` est le meme accent calibre pour se lire (116/87/12, 4,71 sur la carte la plus sombre) ; le repli garde l'accent de surface pour les pages sans theme clair. */ color: rgb(var(--accent-texte-rgb, var(--portal-accent-rgb))); justify-self: start; } .lk-content .card .profile-photo__actions button.btn:hover:not([disabled]) { background: none; /* LE SURVOL VA VERS L OPPOSE DE LA PAGE, pas vers le blanc : `--white-rgb` se retourne avec le theme, donc l'accent s'eclaircit sur fond sombre et se fonce sur fond clair. Ecrit `#ffffff` en dur, il palissait l'or et le rendait moins lisible au moment ou l'on pointe dessus. */ color: color-mix(in srgb, rgb(var(--accent-texte-rgb, var(--portal-accent-rgb))) 68%, rgb(var(--white-rgb))); } /* ETEINT VEUT DIRE ETEINT. Sans cette regle le bouton restait peint comme un bouton vivant alors qu'il portait `disabled` : il invitait a un geste qui ne se passait pas. */ .lk-content .card .profile-photo__actions button.btn[disabled] { color: rgba(var(--white-rgb), 0.34); cursor: not-allowed; } /* Les deux lignes de la zone de depot. La seconde est la mention de format, remontee depuis la note qui vivait sous les actions. */ .profile-photo__depot-fort { display: block; font-size: 13.5px; font-weight: 600; color: rgba(var(--white-rgb), 0.92); } .profile-photo__depot-faible { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; /* 0,46 a ete choisi sur un sol sombre. En clair le voile se retourne et cette mention de 12 px tombe a 2,53 : le repli garde le cran d'origine, le jeton la remonte au cran des mentions. */ color: rgba(var(--white-rgb), var(--voile-mention, 0.46)); }