/* web/assets/css/mobile-premium.css — HABILLAGE PREMIUM DES PAGES MOBILES * * Demande d'Arnaud du 08/10/2026, apres validation du rendu de l'agenda : * « replique le css aux autres pages du mobile ». * * CE FICHIER NE CONTIENT QUE LE COMMUN : le fond, les jetons de couleur, * l'en-tete (boutons ronds), la barre basse et le micro, le mode haute * visibilite. Tout ce qui depend du contenu d'une page — cartes, lignes, * colonnes, frises — reste dans la feuille de cette page. * * POURQUOI UN FICHIER A PART, ET PAS AGENDA-MOBILE.CSS CHARGE PARTOUT : * agenda-mobile.css porte 1453 lignes dont l'immense majorite vise * .agenda-*, .agm-*, .trow, .card — du balisage qui n'existe que sur * agenda.html. La charger ailleurs ne ferait rien de visible et * couterait 48 Ko par page. * * ORDRE DE CHARGEMENT, a respecter sur chaque page : * socle.css -> mobile.css -> mobile-premium.css [-> agenda-mobile.css] * agenda-mobile.css est charge APRES et garde donc le dernier mot sur * l'agenda : ce fichier ne peut pas casser une page deja validee. * * VALEURS : recopiees des couches gagnantes d'agenda-mobile.css, relevees * selecteur par selecteur (la derniere occurrence de chacun, celle que la * cascade applique reellement). Aucune valeur inventee ici. * * MEME PERIMETRE que l'agenda : telephone, et desktop a pointeur fin qui * utilise la vue mobile. Sur tablette (>=768px + pointeur grossier) le * produit sert une autre mise en page, jamais touchee ici. * * EXCEPTION AU SOCLE VISUEL declaree dans scripts/test-socle-visuel- * unique.js, meme arbitrage que pour agenda-mobile.css : le mockup est la * reference, ses valeurs sont recopiees et non retraduites. */ @media (max-width: 767px), (width >= 768px) and (pointer: fine) { /* ===== JETONS ========================================================== */ /* Repris du bloc 0 d'agenda-mobile.css : les memes noms, les memes valeurs. Une page qui veut la teinte doree du produit lit var(--agm-gold-light), jamais un litteral. */ #mainView { --agm-bg: #050c17; --agm-front: #0b1726; --agm-front-opaque: #0a1625; --agm-text: #f4f1ea; --agm-soft: #9ba8b8; --agm-muted: #748298; --agm-gold: #e4b85d; --agm-gold-light: #f1ce82; --agm-hair: rgba(255, 255, 255, .075); --agm-hair-soft: rgba(255, 255, 255, .045); } /* ===== FOND ============================================================ */ /* Image LOCALE (webp 860x1864, 2x le gabarit 430x932) : un ecran ambiant ne depend de personne, aucun CDN. background-size:cover et non 100% 100% : l'image garde ses proportions quelle que soit la hauteur reelle de l'ecran, barre d'adresse Safari comprise. */ #mainView { background-color: #040c17; background-image: url("../img/agenda-premium-bg.webp"); background-size: cover; background-position: center top; background-repeat: no-repeat; } /* Les trois etages laissent voir le fond ; ils le peignaient en opaque. */ #mainView .mheader, #mainView .mcontent, #mainView .mnav { background-color: transparent; } /* ===== EN-TETE ========================================================= */ /* .mheader-link N'EST PAS TOUJOURS UN BOUTON ROND : sur courses.html c'est le selecteur de liste, un bouton de 106px qui porte le titre de la page. Mesure a 430px : lui imposer 35px tronquait "Courses" hors cadre. Ce fichier ne touche donc QUE les deux emplacements dont le contenu est garanti iconique parce que mobile-nav.js les remplit lui-meme. La mise en page de l'en-tete (gap, retraits) reste celle de mobile.css, propre a chaque page. */ #mainView #kiosqueMount > button, #mainView #settingsMount > button, #mainView #highVisibilityMount > button { display: grid; place-items: center; /* 12/10/2026, correction mesuree (test-fusion-reglages-header, premiere execution des tests de rendu) : 35x35 mesures sur courses.html et activites.html, pour un seuil de 44x44 (Apple HIG). Les deux emplacements sont remplis par mobile-nav.js, leur contenu est donc garanti iconique : les agrandir ne tronque aucun libelle, ce qui est precisement la raison pour laquelle ce fichier ne touche que ces deux-la (voir ci-dessus). */ width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; flex: 0 0 44px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 50%; color: #e9eef5; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .016)); box-shadow: none; } #mainView #kiosqueMount, #mainView #settingsMount, #mainView #highVisibilityMount { display: inline-flex; width: 44px; min-width: 44px; flex: 0 0 44px; } #mainView #kiosqueMount svg, #mainView #settingsMount svg, #mainView #highVisibilityMount svg { /* 17px rendus donnaient un trait de 1,56px (viewBox 24 ramene a 17, echelle 0,71) pour un seuil de 1,75px, et une icone sous le plancher de 18px. A 20px : trait 1,83px, icone 20px. Mesure. */ width: 20px; height: 20px; } /* ===== BARRE BASSE ===================================================== */ /* La mecanique vient de mobile.css et n'est PAS retouchee ici : .mnav reste position:fixed, le micro reste place en GRILLE (jamais position:absolute — mobile.css:765 le dit en toutes lettres, un positionnement hors grille ignore la largeur reelle de ses voisins et recouvre le libelle "Activites"). Le degagement bas (--mnav-gap-bas / --mnav-gap-bas-dyn, arbitrage du 07/10) n'est pas touche non plus. Seul l'habillage change. */ #mainView .mnav { min-height: 58px; background: linear-gradient(180deg, rgba(6, 15, 26, .72), rgba(4, 10, 18, .93)); border-top: 1px solid rgba(255, 255, 255, .065); border-left: 0; border-right: 0; border-bottom: 0; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 -8px 26px rgba(0, 0, 0, .16); } #mainView .mnav-item { min-height: 48px; flex-direction: column; gap: 3px; color: #8e9bad; } #mainView .mnav-item.is-on { color: var(--agm-gold-light); } /* 12/10/2026, correction mesuree — 19px donnaient un trait de 1,583px (getScreenCTM reel) sur courses.html, activites.html et todo.html, pour un seuil de 1,75px. viewBox 24, stroke-width 2 : trait rendu = 2 x taille / 24, donc 21px au minimum. 2 x 21 / 24 = 1,75 exactement. Meme valeur que la barre de l'agenda, pour que la barre soit la MEME d'une page a l'autre — c'est deja le principe de ce fichier. */ #mainView .mnav-item svg { width: 21px; height: 21px; } #mainView .mnav-item-label { font-size: 9.5px; } #mainView .mnav-voice-btn { width: 68px; height: 68px; min-width: 68px; min-height: 68px; transform: translateY(-26px); border: 1px solid rgba(255, 238, 194, .88); background: radial-gradient(circle at 35% 27%, #fff1bd 0%, #e5b85d 54%, #936421 100%); color: #11151b; box-shadow: 0 0 0 7px rgba(228, 184, 93, .055), 0 0 34px rgba(228, 184, 93, .40), 0 10px 22px rgba(0, 0, 0, .42), inset 0 2px 2px rgba(255, 255, 255, .78), inset 0 -3px 8px rgba(106, 67, 15, .20); } #mainView .mnav-voice-btn svg { width: 27px; height: 27px; } /* ===== LIGNES-CARTES : PASTILLE ET FAMILLE ============================= */ /* « un agenda c'est visuel » — Arnaud, 08/10/2026. Les lignes de reglage reprennent le vocabulaire des cartes de l'agenda : une pastille ronde a gauche, cerclee et teintee de la famille, et un filet de couleur au bord gauche de la carte. La pastille est montee par mrow-icons.js SEULEMENT sur les lignes qui portent data-mrow-icone : une ligne sans l'attribut garde exactement son apparence d'avant. */ #mainView .mrow-card:has(> .mrow-card-icon) { position: relative; gap: 12px; overflow: hidden; } #mainView .mrow-card-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--mrow-icon, var(--agm-gold-light)); border: 1px solid color-mix(in srgb, var(--mrow-icon, var(--agm-gold-light)) 46%, transparent); background: color-mix(in srgb, var(--mrow-icon, var(--agm-gold-light)) 11%, transparent); box-shadow: inset 0 0 10px color-mix(in srgb, var(--mrow-icon, var(--agm-gold-light)) 8%, transparent); } #mainView .mrow-card-icon svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; } /* RETIRE le 08/10 (Arnaud, capture annotee) : un filet vertical au bord gauche de chaque ligne. La pastille porte deja la couleur de famille ; le filet la repetait et hachait la colonne de dix traits verticaux. */ /* Teinte de fond : tres faible, elle ne doit jamais rivaliser avec le titre de la ligne. La carte reste lisible sur le fond image. */ #mainView .mrow-card:has(> .mrow-card-icon) { border-color: color-mix(in srgb, var(--mrow-icon, var(--agm-gold-light)) 26%, var(--agm-hair)); background-image: linear-gradient( 100deg, color-mix(in srgb, var(--mrow-icon, var(--agm-gold-light)) 9%, transparent), transparent 62%); } /* Les six familles : memes teintes d'icone que les cartes de l'agenda, pour qu'une couleur veuille dire la meme chose d'une page a l'autre. */ #mainView .mrow-fam-or { --mrow-icon: #ffd982; } #mainView .mrow-fam-violet { --mrow-icon: #c790ff; } #mainView .mrow-fam-vert { --mrow-icon: #56efba; } #mainView .mrow-fam-bleu { --mrow-icon: #83c2ff; } #mainView .mrow-fam-rose { --mrow-icon: #ff86ba; } #mainView .mrow-fam-gris { --mrow-icon: #c5d0dc; } /* ===== HAUTE VISIBILITE ================================================ */ /* Le decor disparait entierement : un fond uni noir, des jetons portes au maximum de contraste. Jamais un fond image attenue — attenuer, c'est garder le probleme en plus petit. */ :root[data-contrast="haute-visibilite"] #mainView { background-image: none !important; background-color: #000 !important; --agm-bg: #000; --agm-front: #000; --agm-front-opaque: #000; --agm-text: #fff; --agm-soft: #fff; --agm-muted: #fff; --agm-gold: #ffd54f; --agm-gold-light: #ffd54f; } /* Les six familles s'eteignent : une seule teinte, portee au maximum. Teinter en haute visibilite, c'est garder le probleme en plus petit. */ :root[data-contrast="haute-visibilite"] #mainView .mrow-card { --mrow-icon: #ffd54f !important; } :root[data-contrast="haute-visibilite"] #mainView .mrow-card:has(> .mrow-card-icon) { background-image: none !important; border-color: #ffd54f !important; } :root[data-contrast="haute-visibilite"] #mainView .mrow-card-icon { background: transparent !important; box-shadow: none !important; } }