@font-face { font-family: 'Geist'; src:url('/Geist.ttf') format('truetype-variations'),url('/Geist.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; } * { margin:0; padding:0; box-sizing:border-box; } /* ══ Jetons ═══════════════════════════════════════════════════════════════ Toujours des bleus sombres, mais en surfaces empilees plutot qu en boites cernees : iOS ne dessine presque jamais de bordure, il eclaircit la surface. Les anciennes bordures bleutees a 1 px sur chaque champ et chaque carte etaient ce qui datait le plus l interface. */ :root { --bg:#080d18; --text:#f5f7fa; --accent: var(--wc-accent); /* Trois niveaux de surface : la page, la carte, le controle posé dessus. */ --s1:rgba(255,255,255,0.045); --s2:rgba(255,255,255,0.075); --s3:rgba(255,255,255,0.11); --card-bg:var(--s1); --card-border: var(--wc-card-border); --sep:rgba(255,255,255,0.07); --text-secondary:rgba(245,247,250,0.62); --text-tertiary:rgba(245,247,250,0.40); --input-bg:var(--s2); --input-border:transparent; --danger:var(--wc-red); --r:16px; /* rayon des cartes */ --r2:12px; /* rayon des controles */ } html,body { background:var(--bg); color:var(--text); font-family:var(--wc-police); min-height:100vh; -webkit-font-smoothing:antialiased; letter-spacing:-0.012em; } .bg-glow { position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 70% 42% at 50% -8%,rgba(var(--wc-accent-rgb),0.13) 0%,transparent 62%); } /* Grand titre facon iOS : le retour discret au-dessus, le titre en gros et aligne a gauche en dessous. Un titre de 15 px centre entre deux elements ne hierarchisait rien — la page n avait pas de point d entree pour l oeil. */ header { position:relative; z-index:2; max-width:820px; margin:0 auto; padding:16px 22px 22px; } header .haut { display:flex; align-items:center; gap:16px; margin-bottom:16px; } header .haut .lien-retour { flex:1; } header img { height:21px; opacity:.9; } header .titre { font-size:32px; font-weight:700; letter-spacing:-.025em; line-height:1.08; } header .sous { margin-top:5px; font-size:14px; color:var(--text-secondary); } .lien-retour { display:inline-flex; align-items:center; gap:3px; color:var(--accent); text-decoration:none; font-size:13px; white-space:nowrap; } .lien-retour:hover { opacity:.75; } /* 820 px : la largeur d une colonne de contenu dans une app Apple. A 1000 px, une ligne de liste haute de 56 px flottait au milieu d un couloir vide. */ main { position:relative; z-index:1; max-width:820px; margin:0 auto; padding:4px 22px 72px; } /* ══ Liste groupee encastree ══════════════════════════════════════════════ La forme de Reglages, Musique, Raccourcis : un intitule discret au-dessus d une seule surface arrondie, des filets entre les rangees qui demarrent apres l icone, et surtout du souffle ENTRE les groupes et non a l interieur. Les trois cartes cernees d un filet, toutes espacees de 14 px, ne hierarchisaient rien. */ .grp { margin-bottom:30px; } .grp-h { font-size:12.5px; font-weight:600; color:var(--text-secondary); margin:0 0 9px 4px; display:flex; align-items:center; gap:8px; } .grp-h .compte { margin-left:auto; font-weight:500; color:var(--text-tertiary); font-variant-numeric:tabular-nums; } .grp-b { background:var(--s1); border-radius:var(--r); overflow:hidden; } .grp-b > * { position:relative; } /* Filet encastre : il part apres la marge gauche, comme dans une table iOS. */ .grp-b > * + *::before { content:''; position:absolute; left:14px; right:0; top:0; height:1px; background:var(--sep); } .grp-p { padding:14px; } /* Les listes vides : un message centré dans la surface du groupe plutôt qu'une ligne de texte gris collée en haut à gauche. */ .vide { padding:30px 18px; text-align:center; font-size:13.5px; color:var(--text-tertiary); line-height:1.6; } /* Rangee de reglage : l intitule a gauche, la valeur et son chevron a droite. */ .lgn { display:flex; align-items:center; gap:12px; min-height:50px; padding:0 14px; margin:0; text-transform:none; letter-spacing:normal; cursor:pointer; } .lgn > .rl { flex:0 0 auto; font-size:14px; font-weight:500; color:var(--text); } .lgn > .rv { flex:1; min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:4px; } .lgn select { background:none; border:none; width:auto; max-width:100%; padding:6px 20px 6px 0; text-align:right; text-align-last:right; font-size:14px; color:var(--text-secondary); background-position:right 0 center; } .lgn select:focus { background-color:transparent; box-shadow:none; color:var(--text); } .carte { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--r); padding:16px; margin-bottom:14px; } h2 { font-size:13px; letter-spacing:normal; text-transform:none; color:var(--text-secondary); font-weight:600; margin-bottom:12px; } /* Les petites capitales grises sur chaque champ etaient un tic de tableau de bord des annees 2010. En bas de casse, l intitule se lit au lieu de crier. */ label { display:block; font-size:12px; letter-spacing:normal; text-transform:none; color:var(--text-secondary); font-weight:500; margin-bottom:6px; } input[type=text], input[type=url], input[type=number], input[type=date], input[type=datetime-local], input[type=password], select, textarea { width:100%; background:var(--input-bg); border:1px solid var(--input-border); border-radius:var(--r2); padding:9px 12px; color:var(--text); font-family:inherit; font-size:13.5px; transition:background .15s, box-shadow .15s; } textarea { resize:vertical; min-height:56px; } /* Un anneau plutot qu un changement de bordure : la cible ne bouge pas d un pixel quand on clique dedans. */ input:focus, select:focus, textarea:focus { outline:none; background:var(--s3); box-shadow:0 0 0 3px rgba(var(--wc-accent-rgb),.30); } ::placeholder { color:var(--text-tertiary); } /* Les menus deroulants natifs, avec leur fleche systeme, etaient le detail le plus vieillot de la page. On dessine la notre. */ select { -webkit-appearance:none; appearance:none; padding-right:32px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f7fa' stroke-opacity='.5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:15px; } select option { background:#111a2e; color:var(--text); } .btn { background:var(--accent); color:#fff; border:none; border-radius:var(--r2); padding:10px 16px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:filter .14s, transform .1s; } .btn:active { transform:scale(.97); } .btn:hover { filter:brightness(1.1); } .btn:disabled { opacity:.5; cursor:default; } .btn-sec { background:var(--s2); color:var(--text); border:1px solid transparent; } .btn-sec:hover { background:var(--s3); filter:none; } .btn-dgr { background:rgba(255,69,58,0.16); color:var(--wc-rouge-corail); border:1px solid transparent; } .btn-sm { padding:7px 12px; font-size:12px; border-radius:var(--wc-r-m); } .barre { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .aide { font-size:11.5px; color:var(--text-tertiary); line-height:1.55; } .note { font-size:11.5px; color:var(--text-tertiary); line-height:1.6; padding:0 4px; margin:-4px 0 18px; } .note b { color:var(--text-secondary); font-weight:600; } .grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; } .coche { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-secondary); } .coche input { width:15px; height:15px; accent-color:var(--accent); cursor:pointer; } /* ══ Icônes ═══════════════════════════════════════════════════════════════ Elles prennent la couleur du texte courant, donc un bouton désactivé ou survolé emmène son icône avec lui sans règle supplémentaire. */ .i { width:19px; height:19px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .i-sm { width:16px; height:16px; } /* text-decoration:none : PNG, JPG et SVG sont des , ils héritaient donc du soulignement des liens et ressemblaient à du texte cliquable, pas à des boutons. */ .btn, .btn-sm { display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; } a.btn, a.btn-sm, a.bic { text-decoration:none; } /* ══ Bouton d'action en icône seule ═══════════════════════════════════════ Le libellé passe en title/aria-label : sur une ligne d'actions, six mots empilés deviennent six carrés alignés, et la rangée tient sur un écran de téléphone sans se replier. */ .bic { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 auto; border-radius:var(--wc-r-m); cursor:pointer; background:var(--s2); border:1px solid transparent; color:var(--text-secondary); transition:background .15s, color .15s; } .bic:hover { background:var(--s3); color:var(--text); } .bic:active { transform:scale(.94); } .bic.pri { background:rgba(var(--wc-accent-rgb),.16); border-color:rgba(var(--wc-accent-rgb),.4); color:var(--wc-bleu-ciel); } .bic.pri:hover { background:rgba(var(--wc-accent-rgb),.26); color:#bcdfff; } .bic.dgr { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3); color:var(--wc-rouge-corail); } .bic.dgr:hover { background:rgba(239,68,68,.22); color:#ffb4ad; } .bic.fait { background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.4); color:var(--wc-vert-clair); } /* ══ Sélecteur segmenté ═══════════════════════════════════════════════════ La forme iOS : un seul creux, la pastille sélectionnée posée dessus. On lit d'un coup combien il y a de choix et lequel est actif — ce que des boutons séparés ne montrent pas. */ .seg { display:flex; gap:3px; padding:3px; border-radius:var(--wc-r-m); background:rgba(0,0,0,.28); border:1px solid var(--sep); } /* min-width:0 est indispensable : sans lui, un élément flex refuse de passer sous la largeur de son contenu, donc « flex:1 1 0 » ne produisait PAS des colonnes égales — le plus long libellé poussait les autres et débordait. */ .seg > button { flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:6px; background:none; border:none; border-radius:var(--wc-r-s); padding:7px 10px; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; color:var(--text-tertiary); transition:background .15s, color .15s; white-space:nowrap; } .seg > button:hover { color:var(--text-secondary); } .seg > button.on { background:var(--s3); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.35); } .seg > button.on .i { color:var(--accent); } .onglets { margin-bottom:14px; } /* Une ligne par lien : l'essentiel lisible sans ouvrir. */ /* Les lignes ne sont plus des cartes flottantes : elles composent une seule surface, separees par un filet, et ne se detachent qu'une fois ouvertes. */ #liste-liens, #liste-bios { background:var(--s1); border-radius:var(--r); overflow:hidden; } .item { background:transparent; border:none; overflow:hidden; transition:background .15s; } .item + .item { box-shadow:inset 0 1px 0 var(--sep); } .item:hover { background:var(--s2); } .item.sel { background:var(--s2); } .item.sel + .item, .item.sel { box-shadow:none; } .tete { display:flex; align-items:center; gap:11px; padding:11px 13px; cursor:pointer; } /* Vignette d'en-tête : elle dit d'un coup d'œil si le lien s'ouvre dans une app, s'il est protégé, ou s'il pointe simplement sur le web. Trois états que trois pastilles de texte disaient en beaucoup plus de place. */ .av { width:36px; height:36px; flex:0 0 auto; border-radius:var(--wc-r-m); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); background:rgba(255,255,255,.06); border:1px solid var(--card-border); } .av.app { background:rgba(var(--wc-accent-rgb),.15); border-color:rgba(var(--wc-accent-rgb),.35); color:var(--wc-bleu-ciel); } .av.off { background:rgba(239,68,68,.11); border-color:rgba(239,68,68,.28); color:var(--wc-rouge-corail); } .av.page { background:rgba(168,85,247,.15); border-color:rgba(168,85,247,.35); color:#c9a0ff; } .tete:hover { background:transparent; } .tete-nom { flex:1; min-width:0; } .tete-nom b { display:block; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tete-nom span { display:block; font-size:11.5px; color:var(--text-tertiary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chevron { color:var(--text-tertiary); width:17px; height:17px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; } .item.sel .chevron { transform:rotate(90deg); } .corps { display:none; padding:2px 13px 13px; } .item.sel .corps { display:block; } .puce { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; padding:2px 7px; border-radius:var(--wc-r-pilule); white-space:nowrap; border:1px solid var(--card-border); color:var(--text-tertiary); } /* Un point coloré suffit à dire « actif » ou « expiré » : le mot n'apporte rien que la couleur ne dise déjà, et il coûte quarante pixels par ligne. Le texte reste dans le title pour le survol et les lecteurs d'écran. */ .pt { width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:currentColor; } /* Voyant d'état : un point nu, sans gélule autour. Entouré d'une bordure et d'un fond, un point de 7 px ressemblait à une pastille vide dont on cherche le texte manquant. */ .puce.on, .puce.off { padding:0; border:none; background:none; } .puce.on { color:var(--wc-vert-clair); } .puce.off { color:var(--wc-rouge-corail); } /* Même logique pour le cadenas : l'icône se suffit, la gélule ne dit rien. */ .drap { display:inline-flex; color:var(--text-tertiary); flex:0 0 auto; } .puce.app { background:rgba(var(--wc-accent-rgb),.14); border-color:rgba(var(--wc-accent-rgb),.35); color:var(--wc-bleu-pale); } /* Création sur une ligne, options repliées : l'essentiel tient en un geste. */ /* Création : une rangée de la liste, pas une boîte à part. Le champ perd son cadre — il EST la rangée — et l'action prend la forme d'un bouton rond bleu, celle qu'a « ajouter » dans les apps d'Apple. */ .creer { display:flex; gap:10px; align-items:center; padding:9px 10px 9px 14px; } .creer input { flex:1; min-width:0; font-size:15px; padding:8px 0; background:none; border:none; border-radius:0; } .creer input:focus { background:none; box-shadow:none; } .rond { flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:none; background:var(--accent); color:#fff; display:grid; place-items:center; cursor:pointer; transition:filter .14s, transform .1s; } .rond:hover { filter:brightness(1.1); } .rond:active { transform:scale(.92); } .rond:disabled { opacity:.45; cursor:default; } .rond .i { width:21px; height:21px; } /* Champ de recherche : arrondi franc et fond plein, comme la barre de recherche d'une app iOS, posé au-dessus du groupe et non dedans. */ .champ-rech input { border-radius:var(--wc-r-m); padding:11px 12px 11px 38px; font-size:14.5px; } .champ-rech > .i { left:12px; } /* ══ Champ à icône ════════════════════════════════════════════════════════ Le glyphe est posé DANS le champ et le texte démarre après lui. Un libellé au-dessus aurait mangé une ligne par contrôle, soit trois lignes rien que pour cette barre. */ .champ-ico { position:relative; display:flex; align-items:center; min-width:0; } .champ-ico > .i { position:absolute; left:11px; color:var(--text-tertiary); pointer-events:none; transition:color .15s; } .champ-ico:focus-within > .i { color:var(--accent); } .champ-ico input, .champ-ico select { padding-left:36px; } /* La flèche native du menu déroulant reste, mais on lui laisse sa place. */ .champ-ico select { padding-right:28px; } /* ══ Dossiers ═════════════════════════════════════════════════════════════ Une rangée qui défile horizontalement, à la façon des filtres en tête d'une app iOS : on voit tout le rangement d'un coup d'œil, et le défilement reste contenu dans la rangée — c'est la seule zone de la page autorisée à déborder latéralement. */ .dossiers { display:flex; align-items:center; gap:7px; margin:0 0 26px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .dossiers::-webkit-scrollbar { display:none; } .dos { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; cursor:pointer; background:rgba(255,255,255,.05); border:1px solid var(--card-border); color:var(--text-secondary); border-radius:var(--wc-r-pilule); padding:6px 12px; font:inherit; font-size:12.5px; font-weight:600; white-space:nowrap; transition:background .15s, border-color .15s, color .15s; } .dos:hover { background:rgba(255,255,255,.1); color:var(--text); } /* La teinte du dossier ne colore que l'état sélectionné : si chaque pastille portait sa couleur en fond, la rangée deviendrait un arc-en-ciel où le dossier courant ne ressortirait plus. */ .dos.on { background:color-mix(in srgb, var(--teinte) 18%, transparent); border-color:var(--teinte); color:var(--text); } .dos .nb { font-variant-numeric:tabular-nums; font-size:11px; font-weight:600; color:var(--text-tertiary); background:rgba(0,0,0,.28); border-radius:var(--wc-r-pilule); padding:1px 6px; min-width:20px; text-align:center; } .dos.on .nb { color:var(--text-secondary); } .dos-sep { flex:0 0 auto; width:1px; height:22px; background:var(--sep); margin:0 2px; } .dossiers .bic { width:32px; height:32px; } /* Étiquette de dossier sur une ligne de liste : elle n'apparaît qu'en vue « Tous », où l'appartenance n'est pas déjà donnée par le filtre actif. */ .dos-tag { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--text-tertiary); border:1px solid var(--card-border); border-radius:var(--wc-r-pilule); padding:2px 8px; } .dos-tag .pt { background:var(--teinte); } html.etroit .dos-tag { display:none; } /* Barre d'outils : sans elle la page devient inutilisable passé vingt liens. */ header .sous b { color:var(--text); font-weight:600; } /* Compteur de clics : lisible en balayant la liste du regard. */ .clics { font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:600; color:var(--text-secondary); background:rgba(255,255,255,.05); border:1px solid var(--card-border); border-radius:var(--wc-r-s); padding:2px 8px; min-width:34px; text-align:center; } .tete-nom code { font-family:var(--wc-police-mono); font-size:11.5px; color:var(--accent); } /* Aperçu du QR : le cadre prend la couleur du mode pour qu'on voie le rendu réel. aspect-ratio plutôt qu'une hauteur fixe — le code est carré par nature, et sa largeur est désormais celle de sa colonne. */ .qr-vue { width:100%; aspect-ratio:1; border-radius:var(--wc-r-l); background:#fff; padding:9px; display:flex; align-items:center; justify-content:center; } .qr-vue.sombre { background:var(--wc-bg); border:1px solid var(--card-border); } .qr-vue.damier { background: linear-gradient(45deg,rgba(255,255,255,.10) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.10) 75%), linear-gradient(45deg,rgba(255,255,255,.10) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.10) 75%); background-size:14px 14px; background-position:0 0,7px 7px; background-color:#4a5570; } .qr-vue img { width:100%; height:100%; display:block; } /* ── Panneau d'un lien ────────────────────────────────────────────────── Bandeau d'action, onglets, puis un seul panneau à la fois. */ .corps { display:none; padding:0; } .item.sel .corps { display:block; } .bandeau { display:flex; gap:8px; align-items:center; padding:12px 14px; background:rgba(var(--wc-accent-rgb),.09); border-bottom:1px solid var(--sep); } .bandeau-url { flex:1; min-width:0; overflow:hidden; } .bandeau-url code { font-family:var(--wc-police-mono); font-size:13px; color:var(--text); white-space:nowrap; } .sous-onglets { margin:12px 14px 0; } /* Icône au-dessus du mot, comme une barre d'onglets iOS : la colonne reste étroite, donc les quatre rubriques tiennent sur une ligne même sur un téléphone — avant, « Statistiques » passait hors écran. */ .so { flex-direction:column; gap:3px !important; padding:7px 4px !important; font-size:11px !important; } .so .i { width:20px; height:20px; } /* Le libellé se coupe proprement plutôt que de sortir de sa colonne. */ .so span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .so .ct { display:none; } html.etroit .so .lg { display:none; } html.etroit .so .ct { display:inline; } /* ══ Hauteur commune aux quatre panneaux ══════════════════════════════════ Les quatre occupent la MÊME cellule de grille : la hauteur du conteneur est donc celle du plus grand, et passer d'un onglet à l'autre ne fait plus sauter le bouton « Enregistrer » ni la ligne suivante de la liste. On masque avec visibility plutôt que display:none — display retirerait le panneau de la grille, et la hauteur se remettrait à varier. visibility conserve la place, retire l'élément de l'ordre de tabulation et empêche les clics, ce qui est exactement ce qu'on veut d'un onglet inactif. */ .pans { display:grid; } /* Colonne flexible : le contenu principal de chaque panneau porte .etire et absorbe la hauteur commune, au lieu de laisser un vide sous lui. Réglé panneau par panneau plus bas — étirer n'a de sens que si quelque chose gagne à être plus grand. */ /* min-width:0 : un élément de grille refuse par défaut de passer sous la largeur minimale de son contenu, donc le panneau débordait de 21 px de sa propre colonne dès qu'il contenait un champ de date ou une rangée double. */ .pan { grid-area:1 / 1; min-width:0; padding:13px 14px; visibility:hidden; display:flex; flex-direction:column; } .pan.on { visibility:visible; } /* La hauteur commune vaut aussi sur téléphone depuis que « Réglages » est passé en liste de rangées : il n'impose plus une hauteur que les autres panneaux ne peuvent pas remplir. */ .pied { display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--sep); background:transparent; } /* Champs : deux ou trois par ligne, une seule colonne sur mobile. */ .ch { min-width:0; } .ch label { margin-bottom:6px; } .ch.plein input { background:var(--s2); } .duo { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:11px; } .trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:11px; } .plein { margin-bottom:11px; } html.etroit .duo, html.etroit .trio { grid-template-columns:1fr; } .sep { height:1px; background:var(--sep); margin:11px 0; } .prefixe { display:flex; align-items:stretch; } .prefixe span { display:flex; align-items:center; padding:0 9px; font-size:12.5px; color:var(--text-tertiary); background:rgba(255,255,255,.04); border:1px solid var(--input-border); border-right:none; border-radius:var(--wc-r-s) 0 0 var(--wc-r-s); font-family:var(--wc-police-mono); } .prefixe input { border-radius:0 var(--wc-r-s) var(--wc-r-s) 0; } /* ══ Liste de rangées ═════════════════════════════════════════════════════ La forme d'une liste de réglages iOS : un intitulé à gauche, la valeur alignée à droite, un filet entre deux rangées. Les champs perdent leur cadre — c'est ce qui fait tenir un réglage sur une seule ligne — et retrouvent un fond au moment de la mise au point, pour qu'on voie immédiatement où l'on écrit. */ .liste { display:flex; flex-direction:column; border:1px solid transparent; border-radius:var(--r2); background:var(--s1); overflow:hidden; } /* La liste absorbe la hauteur libre du panneau et ses rangées la partagent : sur grand écran, « Réglages » est devenu le plus court des quatre, et laissait à son tour un vide en bas. flex:1 ne fait rien quand il n'y a pas de place en trop, donc la règle est sans effet sur téléphone. */ .pan > .liste { flex:1; } .liste > .rang { flex:1 1 auto; } .rang { display:flex; align-items:center; gap:12px; min-height:46px; padding:0 12px; margin:0; text-transform:none; letter-spacing:normal; border-bottom:1px solid var(--sep); cursor:text; } .rang:last-child { border-bottom:none; } .rl { flex:0 0 auto; font-size:12.5px; font-weight:500; color:var(--text-secondary); white-space:nowrap; } /* Rangée partagée : deux demi-rangées séparées par un filet vertical, pour qu'on voie que ce sont bien deux réglages et non un seul à deux champs. */ .rang2 { gap:0; padding:0; cursor:default; } .rang2 .mi { flex:1 1 0; min-width:0; display:flex; align-items:center; gap:8px; min-height:46px; padding:0 12px; margin:0; cursor:text; text-transform:none; letter-spacing:normal; } .rang2 .mi + .mi { border-left:1px solid var(--sep); } /* Un champ de date porte son gabarit jj/mm/aaaa plus l'icône du calendrier : il lui faut plus de place qu'à un nombre, sinon il s'affiche tronqué en « mm/ ». La demi-rangée de gauche est donc plus large. */ .rang2 .mi:first-child { flex:1.55 1 0; } .rv input[type=date] { font-size:12px; padding-right:2px; } .rv { flex:1; min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:4px; } /* flex + min-width:0 + width:100% : sans les trois, le champ refuse de descendre sous sa largeur intrinsèque (un vaut ~20 caractères par défaut, un impose son gabarit de calendrier) et la rangée déborde de la carte, qui la rogne. Le cadre étant invisible, un champ pleine largeur au texte aligné à droite ne se voit pas. */ .rv input, .rv select { flex:1 1 auto; min-width:0; width:100%; background:none; border:none; border-radius:var(--wc-r-s); padding:5px 8px; text-align:right; font-size:13.5px; transition:background .15s; } .rv select { text-align:left; text-align-last:right; padding-right:20px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f7fa' stroke-opacity='.45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0 center; background-size:14px; } .rv input:focus, .rv select:focus { background:var(--input-bg); outline:none; } .rv input::placeholder { color:var(--text-tertiary); } /* Mots de l'ouverture : un par ligne, la zone prend la largeur de la rangée. */ /* Aide du style éditorial : un texte, pas un champ. */ .rv .a-aide { display:block; font-style:normal; font-size:12px; line-height:1.5; color:var(--text-tertiary); text-align:left; margin:4px 0; } .rv .a-aide i { font-weight:300; } .rv .a-ouv-mots { flex:1 1 auto; width:100%; min-height:84px; margin:6px 0; font-size:13px; line-height:1.45; } /* Le préfixe du raccourci reste en gris devant la partie modifiable, et les deux se lisent comme une seule adresse. */ .pfx { font-family:var(--wc-police-mono); font-size:12px; color:var(--text-tertiary); white-space:nowrap; } .rv .f-slug { font-family:var(--wc-police-mono); font-size:12.5px; min-width:60px; } /* Sur grand écran la liste se met sur deux colonnes : la fenêtre est large, une colonne unique y laisserait les valeurs à un mètre de leur intitulé. */ @media (min-width:820px) { .pan[data-pan="reglages"] .liste { display:grid; grid-template-columns:1fr 1fr; } .pan[data-pan="reglages"] .liste > .rang:nth-last-child(2):nth-child(odd) { border-bottom:none; } .pan[data-pan="reglages"] .liste > .rang:nth-child(odd) { border-right:1px solid var(--sep); } /* Les réglages du QR se centrent en face du code au lieu de se tasser en haut d'une colonne deux fois plus haute qu'eux. */ .qr-col { justify-content:center; } } /* .bsc est un