/* docs/legal/console/console.css * * Les jetons sont ceux de la page d'accueil (docs/legal/index.html) — mêmes valeurs, au chiffre * près, et repris tels quels plutôt que réinventés : la console est une page du site, pas un * satellite. Le site ne fait AUCUN appel réseau tiers (c'est un argument écrit noir sur blanc sur * l'accueil) : la police est servie depuis ../assets/, comme partout ailleurs. * * LE SOMBRE EST LE DÉFAUT, ET IL VIT ICI, DANS LE CSS. Aucune règle de média n'interroge le * système : la page s'ouvre sombre pour tout le monde, et seul un choix explicite du visiteur — * mémorisé dans localStorage['iptelvza-theme'] par la page d'accueil, reposé par le script du * — la fait passer en clair via :root[data-theme="light"]. Conséquence voulue : sans * JavaScript, la page reste sombre et entièrement lisible. */ /* ================================================================== */ /* Polices — fichiers locaux, aucun appel réseau tiers */ /* ================================================================== */ @font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400 800; font-display:swap; src:url('../assets/schibsted-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400 800; font-display:swap; src:url('../assets/schibsted-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ================================================================== */ /* Jetons */ /* ================================================================== */ :root{ /* color-scheme suit le thème, mais passe par une variable : ce bloc et son jumeau [data-theme="light"] ne contiennent ainsi QUE des redéfinitions de variables. */ --scheme:dark; color-scheme:var(--scheme); --bg:#0B1220; --bg-2:#0E1728; --card:#111B2E; --line:#1E2A40; --line-2:#2A3A56; --ink:#EEF3FC; --ink-2:#D2DCEE; --muted:#93A1BD; --accent:#1F6BFF; --accent-ink:#7FAAFF; --accent-wash:rgba(31,107,255,.15); --accent-line:rgba(127,170,255,.34); /* Les trois jetons d'état n'existent pas sur l'accueil (qui n'a rien à signaler) : ils sont posés ici, et REPEINTS dans le bloc clair — sur fond blanc, #FF6B6B ne tient que 2,8:1, très en dessous des 4,5:1 qu'un texte doit atteindre. */ --danger:#FF6B6B; --ok:#4CD07D; --warn:#FFC46B; --danger-wash:rgba(255,107,107,.10); --radius:18px; --pad:clamp(20px,5vw,40px); } :root[data-theme="light"]{ --scheme:light; --bg:#FFFFFF; --bg-2:#F3F6FC; --card:#FFFFFF; --line:#E6EBF3; --line-2:#D5DEEE; --ink:#0C1626; --ink-2:#1B2942; --muted:#465771; --accent-ink:#1857D6; --accent-wash:rgba(31,107,255,.07); --accent-line:rgba(31,107,255,.28); --danger:#C0392B; --ok:#1B7F4B; --warn:#8A5A00; --danger-wash:rgba(192,57,43,.08); } /* ================================================================== */ /* Base */ /* ================================================================== */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--bg)} body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* Aucune largeur fixe nulle part : une seule colonne qui se serre. Le remplissage latéral est le même jeton que l'accueil, et la marge basse laisse respirer le pied de page sur téléphone. */ .enveloppe{max-width:720px;margin:0 auto;padding:var(--pad) var(--pad) 96px} header.tete{display:flex;align-items:center;gap:12px;padding:16px 0 28px;flex-wrap:wrap} header.tete img{width:36px;height:36px;border-radius:9px} header.tete .langue{margin-left:auto;color:var(--muted);font-size:.92rem} header.tete .langue a{color:var(--accent-ink)} h1{font-size:clamp(1.5rem,4.5vw,2rem);line-height:1.2;margin:0 0 6px} .sous{color:var(--muted);margin:0 0 28px} section{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(16px,4vw,28px);margin:0 0 20px} section .sous{margin-bottom:0} /* ★ SAUF À LA CONFIRMATION, où jusqu'à quatre paragraphes s'empilent : l'empreinte, son aide, l'aperçu de ce que l'appareil affichera faute de mot libre (D6), puis l'échéance. Collés, ils se lisent comme un seul pavé — mesuré au navigateur, et c'est l'écran où l'on demande justement de VÉRIFIER. */ #etape-confirmation p{margin:0 0 14px} h2{font-size:1.15rem;margin:0 0 14px} /* ================================================================== */ /* Formulaires — 44px partout, c'est la cible tactile minimale */ /* ================================================================== */ label{display:block;font-size:.92rem;color:var(--ink-2);margin:14px 0 6px} input,select,textarea{ width:100%;min-height:44px;padding:11px 13px;border-radius:12px; border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink); font:inherit;font-size:16px; /* 16px : en dessous, iOS zoome le champ au focus */ } textarea{min-height:96px;resize:vertical} input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible{ outline:3px solid var(--accent-line);outline-offset:2px} button{ min-height:44px;padding:12px 20px;border-radius:12px;border:1px solid transparent; background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer} button.secondaire{background:transparent;border-color:var(--line-2);color:var(--ink)} button[disabled]{opacity:.45;cursor:not-allowed} .boutons{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px} .boutons button{flex:1 1 180px} /* ================================================================== */ /* Appareils, empreintes, états */ /* ================================================================== */ .appareil{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--line); border-radius:14px;margin:10px 0;background:var(--bg-2)} .appareil .corps{flex:1;min-width:0} .appareil .nom{font-weight:600;word-break:break-word} .appareil .etat{font-size:.88rem;color:var(--muted)} details.empreinte{margin-top:8px} /* ★ 44 px, pas 24. Mesuré au navigateur : la ligne de dépliage faisait 24 px de haut — sous la cible tactile minimale que le propriétaire impose partout ailleurs. Le remplissage vertical fait partie de la boîte du : il agrandit la CIBLE, pas seulement le vide autour. On évite `display:flex` ici, qui ferait disparaître le triangle de dépliage sous Chrome — et avec lui le seul signe que cette ligne s'ouvre. */ details.empreinte summary{cursor:pointer;color:var(--accent-ink);font-size:.9rem; min-height:44px;padding:12px 0} details.empreinte code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em} /* ★ Les trois gestes d'une carte tiennent sur une ligne tant que la place le permet. Mesuré au navigateur sans cette règle : le troisième — le RETRAIT, le seul irréversible — s'étalait seul sur toute la largeur et devenait le bouton le plus voyant de la carte. Sous 480 px, la règle générale reprend la main et les empile pleine largeur, ce qui est juste au doigt. */ .appareil .boutons{margin-top:14px} .appareil .boutons button{flex:0 1 auto} /* ================================================================== */ /* « Régler aussi l'application » (D16) */ /* ================================================================== */ /* ★ REPLIÉ PAR DÉFAUT, ET C'EST VOULU : c'est un complément, pas une étape. Déplié d'office, il doublerait la hauteur d'un formulaire déjà long et laisserait croire qu'il faut répondre à cinq questions de plus pour envoyer une source. ★ 44 px sur le , la même règle que l'empreinte, pour la même raison mesurée : sans le remplissage vertical, la ligne de dépliage fait 24 px — sous la cible tactile minimale. Pas de `display:flex` ici non plus : sous Chrome il escamote le triangle, seul signe que ça s'ouvre. */ #bloc-reglages{margin:18px 0 0;border:1px solid var(--line);border-radius:12px; padding:0 clamp(12px,3vw,16px);background:var(--bg-2)} #bloc-reglages summary{cursor:pointer;color:var(--accent-ink);font-size:.95rem; min-height:44px;padding:12px 0} /* La phrase d'aide dit que la source est facultative : elle ne doit pas coller au premier libellé. */ #bloc-reglages .sous{margin:0 0 4px;font-size:.88rem} #liste-reglages{padding-bottom:8px} /* ★ VINGT-HUIT RÉGLAGES : CE QUI REND LE BLOC LISIBLE, ET POURQUOI CHAQUE RÈGLE EXISTE. · le champ de recherche garde son ÉTIQUETTE VISIBLE (règle de la console : jamais un `placeholder` en guise d'étiquette — il s'efface à la première touche) ; · `position:sticky` sur le couple étiquette + champ : à vingt-huit réglages, on défile, et un champ de recherche qui sort de l'écran oblige à remonter pour affiner. Le fond est opaque, sinon les rangées défileraient VISIBLEMENT derrière lui ; · les sections reprennent les groupes de l'écran Réglages de l'app (Lecture, Sous-titres et audio, …) : c'est ce qui permet à l'aidant de dire « c'est dans Avancé » au téléphone et que la personne le retrouve. */ /* ★ LE COUPLE ÉTIQUETTE + CHAMP COLLE D'UN SEUL BLOC, ET LE BLOC EST OPAQUE. Deux `sticky` séparés (étiquette à `top:0`, champ à `top:2.1rem`) ont été essayés et REGARDÉS : entre les deux subsistait une bande transparente de quelques pixels où les rangées défilaient visiblement — et, sur les côtés, le rembourrage du `
` laissait passer la même chose. D'où le conteneur unique, et les marges négatives qui vont chercher les deux gouttières. */ /* ★ ET IL PORTE UN FILET. Sans lui, la première ligne de description passait SOUS le champ en étant coupée en deux dans la hauteur — regardé au navigateur : ça ne se lit pas comme « le contenu défile dessous », ça se lit comme un rendu cassé. Le filet dit où s'arrête l'en-tête. */ .recherche-reglages{position:sticky;top:0;z-index:2;background:var(--bg-2); padding:10px clamp(12px,3vw,16px) 10px; margin:0 calc(-1 * clamp(12px,3vw,16px)) 0; border-bottom:1px solid var(--line)} .recherche-reglages label{margin-bottom:2px} .recherche-reglages input{margin-bottom:0} /* La phrase du plafond tient sur quatre lignes au téléphone (mesuré, 390 px) : sans cette marge basse elle colle au premier titre de section. */ .compteur-reglages{margin:0 0 12px;font-variant-numeric:tabular-nums} /* Le titre de section : plus discret qu'un `h3` de la page, mais franchement détaché de la rangée qui le précède — c'est la séparation qui fait lire une liste comme un sommaire. */ .groupe-reglages h4{margin:18px 0 2px;font-size:.82rem;text-transform:uppercase; letter-spacing:.06em;color:var(--accent-ink);border-top:1px solid var(--line);padding-top:14px} .groupe-reglages:first-child h4{margin-top:4px;border-top:0;padding-top:0} /* La description vit ENTRE l'étiquette et le champ : c'est là qu'on la lit avant de choisir, et pas après. Collée à l'étiquette, détachée du `` éteint (plafond atteint) doit se VOIR éteint : sans ça, on clique et rien ne se passe, ce qui se lit comme une panne. */ .reglage select:disabled{opacity:.45;cursor:not-allowed} #aucun-reglage{margin:4px 0 16px} /* ================================================================== */ /* « Vos listes » */ /* ================================================================== */ /* Une carte de liste est une carte d'appareil : même boîte, même respiration. Ce qu'elle ajoute, c'est un interrupteur et un d'intervalle : la marge haute du `label` général suffit, la basse non — collé à son