/* ========================================================================== LES POLICES SONT SERVIES D'ICI, PAS DEPUIS GOOGLE. Avant, la premiere ligne etait un @import de fonts.googleapis.com : le navigateur devait recevoir ce fichier, puis la feuille de Google, puis les deux fichiers de fonts.gstatic.com — trois allers-retours vers deux domaines tiers, EN SERIE, avant le premier texte (mesure : 1 000 a 1 200 ms en 4G lente, alors que le HTML etait la a 180 ms). Les quatre fichiers vivent maintenant dans /_app/polices/, leur nom porte leur empreinte (cache d'un an, immutable), et chaque page les precharge depuis son . Ce sont des polices VARIABLES restreintes aux graisses reellement utilisees (Archivo 500-700, Manrope 400-700) : un seul fichier par famille, 31 + 23 ko, et les variantes latin-ext ne sont telechargees que si un texte en a besoin (unicode-range). font-display: swap : le texte s'affiche tout de suite dans la police de secours, jamais de texte invisible. Pour regenerer : scripts/polices.mjs. ========================================================================== */ @font-face{font-family:"Archivo";font-style:normal;font-weight:500 700;font-display:swap; src:url(/_app/polices/archivo-latin.ff1d9c76.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Archivo";font-style:normal;font-weight:500 700;font-display:swap; src:url(/_app/polices/archivo-latin-ext.366ccbbb.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap; src:url(/_app/polices/manrope-latin.e782cba4.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap; src:url(/_app/polices/manrope-latin-ext.7439ce6c.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ========================================================================== COACHIAMO · systeme d'application · public/_app/athlon.css Le seul fichier de style des deux applications (client et coach). Aucun ecran ne redefinit une valeur d'ici, aucun ecran n'ecrit une couleur. -------------------------------------------------------------------------- LES HUIT REGLES 1. Marine pour la structure et le texte. VERT PROFOND #1F6633 pour l'action, et rien d'autre : un seul aplat d'action par ecran, texte blanc dessus (charte « Court et Tilleul », docs/31, 21/09/2026 ; l'azur #1E9FE6 est sorti). 2. Tilleul, ambre, corail sont des ETATS : ils portent un point, un trait ou un bord. Jamais du texte (le tilleul ne tient ni sous du blanc ni sur du blanc). 3. Archivo pour les titres et TOUS les chiffres (tabular-nums). Manrope pour le texte courant, 14 px sur 18. 4. Un seul trait (--filet), une seule epaisseur. Aucune ombre de carte. 5. Rayon 0 partout, sauf .face .pastille .volant .pastilleN .inter et les points d'etat. 6. La photographie posee sur du blanc EST la carte. 7. Le prix en gras et souligne EST le bouton. 8. Aucun emoji, aucune couleur or, aucune serif, aucun tiret cadratin. ========================================================================== */ /* ═══════════════ 1 · JETONS ═══════════════ */ :root{ --papier:#FFFFFF; /* le fond */ --papier2:#F4F5F6; /* section posee, champ, encart */ --papier3:#EDEFF1; /* reserve d'image */ --encre:#16263F; /* Marine : texte et structure */ --ardoise:#4A5A6E; /* texte secondaire */ --brume:#5E6D80; /* capitales, libelles, tertiaire. 5,3 contre 1 sur blanc, 4,8 sur papier2 : l'ancien #8493A4 tombait a 3,1 (retour C31, verif du 12/09), et #637285 frolait 4,5 sur papier2 (4,504 : rien ne doit tenir a un cheveu) */ --brume2:#B4BEC9; /* le POINT d'un jour ou d'un creneau indisponible. Jamais du texte : 1,9 contre 1 sur blanc (le chiffre d'un jour ferme est en brume depuis le 14/09) */ --filet:rgba(22,38,63,.14); /* LE trait */ --filet2:rgba(22,38,63,.07); /* le meme trait a l'interieur d'un bloc */ /* LA COULEUR D'ACTION (palette A de la charte docs/31, posee le 21/09/2026) : le vert profond du logotype, texte BLANC dessus (6,98 contre 1), appui #1C5C2E (8,02). Elle ne change pas la nuit : un bouton vert profond + blanc tient sur toute encre. --azur et --azur-fg RESTENT COMME ALIAS (des dizaines de regles et de vues les nomment) et valent l'action : on ne les ecrit plus dans une regle neuve, on ecrit --action / --action-fg. */ --action:#1F6633; --action-fg:#FFFFFF; --action-appui:#1C5C2E; --azur:var(--action); --azur-fg:var(--action-fg); /* LE TILLEUL : l'accent doux du logo. Pastille d'etat positif, filet gauche, jauge, trait sous l'onglet actif, fond a 12 % (--tilleul-12 = #F2F7EA sur blanc) et bordure douce a 24 % (--tilleul-24 = #E5EED4). JAMAIS un bouton, jamais sous du texte blanc (2,27), jamais en texte sur blanc (2,27) : seul le marine tient dessus (6,69). */ --tilleul:#91B94C; --tilleul-12:rgba(145,185,76,.14); --tilleul-24:rgba(145,185,76,.32); /* LE VERT « EN TEXTE » : liens, onglet actif, petites capitales de section du site. Vert profond le jour (6,41 sur papier), tilleul clair #9EC350 la nuit (9,07 sur #0C1520) : c'est le SEUL endroit ou la nuit change le vert. */ --lien:#1F6633; /* L'etat positif EST le tilleul (plus de vert menthe #1F9E6B : aucune troisieme famille de vert). */ --vert:var(--tilleul); --ambre:#E8A33D; --corail:#E5544E; /* LE CORAIL QUI PORTE UN CHIFFRE (19/09, pastilles de compte « a traiter »). --corail lisait 3,6 contre 1 sous du blanc : trop peu pour un nombre de 12 px. Celui-ci tient 4,8 contre 1 sous #FFFFFF, le jour comme la nuit (il ne s'eclaircit pas la nuit : c'est un fond, pas un texte). Il ne sert QU'AUX pastilles de compte (.pastilleN.du, .item .n.du) : rien d'autre. */ --corail-plein:#CF3F39; --voile:rgba(8,16,26,.72); /* voile photographique et fond de feuille */ --sur-photo:#FFFFFF; --contre:#16263F; /* grande surface a contre-jour : bloc de chiffres, toast */ --contre-txt:#FFFFFF; --bureau:#E3E6E9; /* la planche autour de la colonne, en large */ --bureau-filet:rgba(22,38,63,.16); --titre:"Archivo","Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif; --texte:"Manrope","Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif; --marge:20px; --colonne:430px; /* largeur maximale de la coque */ --h-action:48px; --h-second:40px; --h-champ:56px; --h-onglets:60px; --h-tete:52px; --rayon-doigt:999px; --bas:env(safe-area-inset-bottom,0px); /* Le decalage du tiroir de gestion : 0 partout, sauf sur un grand ecran de l'espace du coach, ou le tiroir reste ouvert en colonne fixe (voir 3.4). Tout ce qui est `position:fixed` s'en sert pour rester aligne. */ --decalage:0px; /* Reserve basse pour la bande « Coachiamo sur votre ecran d'accueil » (6.29 / 7.5). Elle vaut 0 px et elle y reste : depuis le 10/09 la bande est DANS LE FLUX du corps, elle ne flotte plus au-dessus de rien (7.5). La variable survit pour les regles de .corps et pour une feuille de page qui voudrait s'en servir. */ --h-pose:0px; /* LES JETONS DE MOUVEMENT (12/09). Une animation d'application native dure entre 180 et 260 ms et ralentit en arrivant : --courbe. Ce qui revient a sa place (une ligne relachee avant le seuil, une feuille qui monte) depasse un peu et revient : --ressort. On n'ecrit JAMAIS une duree ni une courbe en dur dans une regle de transition : on nomme ces quatre jetons. Sous prefers-reduced-motion, les durees tombent a 0 (voir 7.2) : tout devient instantane, rien ne casse. */ --duree-courte:180ms; --duree:240ms; --courbe:cubic-bezier(.2,.8,.2,1); --ressort:cubic-bezier(.34,1.56,.64,1); /* Le ressort des GRANDES surfaces (feuille, tiroir du bas, boite de dialogue) : il depasse de 3 % et se pose. Le --ressort de 10 % va aux petites choses (une ligne qui revient, un bouton, un interrupteur) ; sur une feuille de 700 px il ferait sauter le contenu de 70 px. */ --ressort-doux:cubic-bezier(.3,1.2,.5,1); /* L'a-coup du retour haptique (Athlon.haptique) : 80 ms, l'instant du seuil. */ --duree-acoup:80ms; /* Le chiffre qui compte (Athlon.compter, 7.12) : 300 ms, le PLAFOND de tout ce qui bouge hors la courbe des statistiques. Le chiffre qui CHANGE apres un geste suit --duree. */ --duree-compte:300ms; /* LES DEUX MOUVEMENTS D'ECRAN (19/09, Athlon.transition, LISEZ-MOI § 17). « Pousser » : un sous-ecran entre de la droite pendant que l'ancien recule de 30 % en s'assombrissant, 280 ms ; le retour fait l'inverse. « Fondu » : un changement d'onglet racine, fondu croise de 160 ms, rien ne se deplace, comme iOS. Le recul de l'ecran derriere une feuille (--recul-feuille) tient de la meme famille. 0 ms sous mouvement reduit. */ --duree-pousser:280ms; --duree-fondu:160ms; /* [W1 22/09] LE SITE QUI BOUGE (docs/42 § 2.3, § 2.4). Le volet de menu et le tiroir du coach glissent en 320 ms (240 a la fermeture) sous un voile marine a 40 % qui laisse voir la page (un menu laisse voir, une feuille masque : --voile reste a 72 %). L'apparition au defilement (Athlon.apparaitre) : 480 ms, fondu + 24 px, une seule fois. 0 ms sous mouvement reduit. Un menu laisse lire la page derriere lui (le tiroir du coach comme le volet du site) ; seule la feuille masque, elle garde --voile a 72 %. */ --duree-volet:320ms; --duree-parait:480ms; --voile-menu:rgba(22,38,63,.40); --recul-ecran:30%; --recul-feuille:.96; --ombre-recul:.28; /* LES APLATS DOUX D'ETAT (les « washes »). La couleur d'etat prend plus de place qu'un point : elle teinte le FOND d'une ligne, d'une carte, d'un bandeau, a 10 a 14 % sur le papier. Le texte pose dessus reste marine ou ardoise, MESURE : marine 13,3 contre 1, ardoise 6,2 contre 1 sur chacun des quatre. La brume (2,7) n'y a pas sa place : dans un aplat d'etat, le tertiaire devient ardoise. */ --vert-doux:var(--tilleul-12); /* #F2F7EA sur blanc : le fond tilleul a 12 % de la charte */ --ambre-doux:rgba(232,163,61,.14); /* #FCF2E4 */ --corail-doux:rgba(229,84,78,.11); /* #FCECEC */ --azur-doux:var(--tilleul-12); /* l'aplat « information » prend le tilleul a 12 % (charte docs/31) */ --action-doux:rgba(31,102,51,.08); /* #EDF3EF : vert profond a 8 %, la teinte des cartes 1 et 6 */ /* Les six teintes des cartes de raccourci (6.20) : chaque carte a la sienne. */ --teinte-1:var(--action-doux); --teinte-2:var(--tilleul-12); --teinte-3:rgba(232,163,61,.12); --teinte-4:rgba(229,84,78,.08); --teinte-5:rgba(22,38,63,.06); --teinte-6:rgba(31,102,51,.16); color-scheme:light; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --papier:#0C1520; --papier2:#141F2C; --papier3:#1B2836; --encre:#EEF3F7; --ardoise:#A2B3C4; --brume:#7D91A4; --brume2:#4A5B6C; --filet:rgba(190,215,235,.18); --filet2:rgba(190,215,235,.09); /* La nuit : le bouton d'action NE CHANGE PAS (vert profond + blanc) ; le vert en texte et le tilleul passent au tilleul clair #9EC350 (9,07 contre 1 sur #0C1520). */ --tilleul:#9EC350; --tilleul-12:rgba(158,195,80,.14); --tilleul-24:rgba(158,195,80,.34); --lien:#9EC350; --ambre:#F0B454; --corail:#F0746E; --voile:rgba(4,9,15,.76); /* LA SURFACE A CONTRE-JOUR DE NUIT (14/09). #1B2836 n'etait qu'a 1,23 contre 1 du fond et 1,11 de --papier2 : les blocs marine (« Ce que disent les chiffres », « Ton mois ») se confondaient avec les sections posees et la regle 9 s'eteignait la nuit. #2E4359 : 1,80 contre 1 sur --papier, 1,63 sur --papier2 ; le blanc voile a 62 % y reste a 5,07, a 72 % a 6,16, le texte plein a 9,1. Les points d'etat y tiennent (vert 4,4, ambre 5,5, vert profond via le tilleul clair). */ --contre:#2E4359; --contre-txt:#EEF3F7; --bureau:#060D15; --bureau-filet:rgba(190,215,235,.18); --ambre-doux:rgba(240,180,84,.16); --corail-doux:rgba(240,116,110,.14); --action-doux:rgba(158,195,80,.10); --teinte-3:rgba(240,180,84,.12); --teinte-4:rgba(240,116,110,.10); --teinte-5:rgba(190,215,235,.07); --teinte-6:rgba(158,195,80,.22); color-scheme:dark; } } :root[data-theme="dark"]{ --papier:#0C1520; --papier2:#141F2C; --papier3:#1B2836; --encre:#EEF3F7; --ardoise:#A2B3C4; --brume:#7D91A4; --brume2:#4A5B6C; --filet:rgba(190,215,235,.18); --filet2:rgba(190,215,235,.09); /* La nuit : le bouton d'action NE CHANGE PAS (vert profond + blanc) ; le vert en texte et le tilleul passent au tilleul clair #9EC350 (9,07 contre 1 sur #0C1520). */ --tilleul:#9EC350; --tilleul-12:rgba(158,195,80,.14); --tilleul-24:rgba(158,195,80,.34); --lien:#9EC350; --ambre:#F0B454; --corail:#F0746E; --voile:rgba(4,9,15,.76); /* LA SURFACE A CONTRE-JOUR DE NUIT (14/09). #1B2836 n'etait qu'a 1,23 contre 1 du fond et 1,11 de --papier2 : les blocs marine (« Ce que disent les chiffres », « Ton mois ») se confondaient avec les sections posees et la regle 9 s'eteignait la nuit. #2E4359 : 1,80 contre 1 sur --papier, 1,63 sur --papier2 ; le blanc voile a 62 % y reste a 5,07, a 72 % a 6,16, le texte plein a 9,1. Les points d'etat y tiennent (vert 4,4, ambre 5,5, vert profond via le tilleul clair). */ --contre:#2E4359; --contre-txt:#EEF3F7; --bureau:#060D15; --bureau-filet:rgba(190,215,235,.18); --ambre-doux:rgba(240,180,84,.16); --corail-doux:rgba(240,116,110,.14); --action-doux:rgba(158,195,80,.10); --teinte-3:rgba(240,180,84,.12); --teinte-4:rgba(240,116,110,.10); --teinte-5:rgba(190,215,235,.07); --teinte-6:rgba(158,195,80,.22); color-scheme:dark; } /* ═══════════════ 2 · REMISE A ZERO ═══════════════ */ *{margin:0;padding:0;box-sizing:border-box} /* LE FOND DE LA PAGE EST LE PAPIER, pas le bureau : quand iOS tire l'ecran au-dela de ses bords (l'elastique du haut et du bas), c'est le fond de qu'on voit. Il etait gris : une application qui montre son bureau a chaque tirage n'est pas une application. Le bureau reste celui de , il n'apparait qu'autour de la colonne sur un ordinateur. -webkit-tap-highlight-color : Safari peignait un voile gris sur tout ce qu'on touchait (0 occurrence dans le depot avant le 14/09) ; l'etat presse est le notre, il s'enfonce (4.5). */ html{-webkit-text-size-adjust:100%;background:var(--papier);-webkit-tap-highlight-color:transparent} body{background:var(--bureau);color:var(--encre);font-family:var(--texte); font-size:14px;line-height:18px;-webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;overflow-x:hidden} img{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left; -webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* Un appui long sur une photographie ou sur une carte ouvrait le menu du systeme (« Ouvrir dans un nouvel onglet », « Enregistrer l'image ») : sur un bouton, un lien de carte, un visage, une photographie, l'appui long n'est pas un geste de l'application. Le texte courant, lui, reste selectionnable : on copie une adresse, un prix, un nom. */ a.coach,a.dest,a.racc,a.cren,a.client-l,a.bande,a.carre,.rapide,.face,.ph img,.bande img, .onglets a,.tiroir a,.item,.decider .dessus,.tirer .dessus,.inter,.case,.pastille,.action,.second,.carre{ -webkit-touch-callout:none;-webkit-user-select:none;user-select:none} input,textarea,select{font:inherit;color:inherit;background:none;border:none;border-radius:0} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--lien);outline-offset:2px} ::selection{background:var(--action);color:var(--action-fg)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ═══════════════ 3 · LA COQUE D'APPLICATION ═══════════════

Telephone : la coque occupe l'ecran. Large : une colonne de 430 posee sur le bureau, cernee d'un filet. Rien d'autre ne change. */ .app{background:var(--papier);color:var(--encre);min-height:100dvh; max-width:var(--colonne);margin:0 auto;position:relative; display:flex;flex-direction:column;overflow-x:clip} @media(min-width:520px){ .app{box-shadow:0 0 0 1px var(--bureau-filet);min-height:100dvh} } /* le corps qui defile ; les classes disent ce qui est fixe par dessus. --h-pose s'ajoute PARTOUT, et vaut 0 px : la bande d'invitation n'est plus du mobilier fixe, elle vit dans le flux du corps (7.5). */ .corps{flex:1;min-width:0;padding-bottom:var(--h-pose)} .corps.sous-onglets{padding-bottom:calc(var(--h-onglets) + var(--bas) + 8px + var(--h-pose))} /* 120 px, et non 104 : une barre d'action qui porte une ligne .rassure mesure 112 px. A 104, la derniere ligne de l'ecran passait dessous. */ .corps.sous-barre{padding-bottom:calc(120px + var(--bas) + var(--h-pose))} .corps.sous-volant{padding-bottom:calc(84px + var(--bas) + var(--h-pose))} .corps.sous-onglets.sous-volant{padding-bottom:calc(var(--h-onglets) + var(--bas) + 76px + var(--h-pose))} /* le corps d'un ecran de gestion : plus de barre d'onglets sous lui, seulement le degagement d'une barre d'action eventuelle */ .corps.sous-rien{padding-bottom:calc(var(--bas) + 18px + var(--h-pose))} /* --- 3.4 · LA COQUE DE GESTION (body.gestion) -------------------------- L'espace du coach a un TIROIR (6.17) et, depuis le 19/09, une barre du bas a cinq entrees (.onglets.pro, 3.2 bis) qui n'existe que sur un telephone. Sur un telephone, le tiroir glisse par-dessus. Au-dela de 1000 px il ne glisse plus : il reste ouvert en colonne fixe a gauche, le bouton qui l'ouvre disparait, le fond sombre n'a plus lieu d'etre, et toute la coque se decale de sa largeur. La colonne s'elargit un peu : un outil professionnel se travaille sur un ecran d'ordinateur. */ @media(min-width:1000px){ body.gestion{--decalage:288px;--colonne:520px;padding-left:var(--decalage)} /* LE TIROIR ET LA COLONNE FONT UNE SEULE PLANCHE, POSEE AU MILIEU DU BUREAU. Colle a gauche, le tiroir laissait un couloir gris entre lui et le contenu : deux objets qui flottent, au lieu d'un outil. La colonne est centree dans l'espace qui reste (le remplissage de body), le tiroir se pose donc juste a sa gauche : left = 50% - (tiroir + colonne)/2. */ body.gestion .tiroir{width:var(--decalage);transform:none;transition:none; left:calc(50% - (var(--decalage) + var(--colonne))/2); box-shadow:0 0 0 1px var(--bureau-filet)} body.gestion .tiroir-fond{display:none} body.gestion .ouvre-tiroir{display:none} /* Plus de bouton de menu a gauche : sans lui, un titre centre tombe de travers. */ body.gestion .tete.pro .titre{text-align:left} } /* --- 3.5 · LE BUREAU, VRAIMENT (>= 1100 px) --------------------------- A 1440, l'outil restait une bande de 520 px : tiroir 288 + contenu 520 = 808 px employes, environ 630 px de gris a droite, et rien de centre. Un tableau de bord de professionnel doit tenir en DEUX COLONNES a cette largeur, pas en maquette de telephone posee dans un coin. · la colonne de contenu s'elargit ; · les pages riches passent en deux colonnes avec `.deux-colonnes`, qui ne fait rien du tout en dessous de 1100 px — le telephone ne change pas. */ @media(min-width:1100px){ body.gestion{--colonne:min(1040px, calc(100vw - var(--decalage) - 48px))} body.gestion .app{padding-bottom:24px} } /* Deux colonnes de meme largeur, separees par LE trait : l'important a gauche, le deroulement a droite. Chaque colonne defile avec la page, aucune ne se fige : deux barres de defilement independantes sur un tableau de bord font perdre le fil. */ .deux-colonnes{display:block} @media(min-width:1100px){ /* Le trait qui separe les deux colonnes est une BORDURE, pas un fond que les enfants recouvrent : avec un fond, la colonne la plus courte laissait voir une grande dalle grise sous elle. */ .deux-colonnes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start;background:var(--papier)} .deux-colonnes>*+*{border-left:1px solid var(--filet)} .deux-colonnes>*{min-width:0} /* Un separateur horizontal n'a plus de sens en tete d'une colonne. */ .deux-colonnes>*>hr.filet:first-child{display:none} } /* --- 3.6 · LA PLACE DE MARCHE SUR UN ORDINATEUR (body.marche) ---------- L'espace du coach se deploie sur 1040 px avec son menu en colonne et deux colonnes de contenu ; la place de marche, elle, restait une bande de 430 px posee sur du gris, puis une bande de 1040 px ou tout s'empilait encore en une seule file. Sur un ordinateur, le cote client faisait maquette de telephone pendant que le cote coach faisait outil. Voici l'autre moitie du bureau. LE SEUIL EST 1000 px, et non 1100 : c'est celui de l'espace du coach (3.4). Les deux moities du produit basculent desormais a la meme largeur. Ce qui change au-dela de 1000 px, et rien d'autre : · la coque s'elargit a 1040 px, comme celle du coach ; · la barre d'onglets QUITTE LE BAS et devient la navigation du haut : sur un ordinateur, la navigation d'un site se lit en haut, elle ne se colle pas au ras du bureau. Les cinq entrees, leur icone et leur libelle, ne changent pas ; · les rangees qui glissent se DEPLIENT en grille (.ordi-grille) : sur un telephone le bord coupe appelle le geste, sur un ordinateur il ne fait que cacher la moitie de l'offre derriere une barre de defilement invisible ; · les listes de coachs passent en deux ou trois cartes par rangee (.grille-cartes, .grille-cartes.trois) ; · la fiche du coach met la photographie a gauche et le PANNEAU DE RESERVATION colle a droite (.ordi-fiche) ; · le tunnel garde le calendrier a gauche et le recapitulatif a droite (.deux-colonnes, 3.5) ; · un espace a onglets pose son menu en colonne a gauche (.ordi-cote). Rien de tout cela n'existe en dessous de 1000 px : le telephone, valide, ne bouge pas d'un pixel. LA NAVIGATION DU HAUT NE SE COLLE PAS. Elle defile avec la page, et ce n'est pas un oubli : la barre du haut (.tete) et la recherche de l'accueil, elles, se collent deja a zero. Deux barres collantes a la meme hauteur se recouvrent, et sur les ecrans ou la barre d'onglets est cachee, une navigation collante laisserait un trou de 59 px sous rien du tout. */ @media(min-width:1000px){ body.marche{--colonne:min(1040px, calc(100vw - 48px))} body.marche .app{padding-bottom:24px} body.marche .onglets{position:static;transform:none;order:-1; width:100%;max-width:none;height:auto;min-height:59px;padding:0 6px; border-top:0;border-bottom:1px solid var(--filet)} body.marche .onglets a{flex:0 0 auto;flex-direction:row;gap:9px;padding:0 15px;min-height:58px} body.marche .onglets a.on::before{top:auto;bottom:0;left:15px;right:15px} body.marche .onglets .lab{font-size:11px;letter-spacing:.04em} /* plus rien de fixe au ras du bas : le corps n'a plus a s'en degager */ body.marche .corps.sous-onglets{padding-bottom:calc(var(--bas) + 28px + var(--h-pose))} /* Les deux colonnes de 3.5 servent aussi la place de marche, et des 1000 px : le tunnel de reservation en vit (calendrier a gauche, recapitulatif a droite). */ body.marche .deux-colonnes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start;background:var(--papier)} body.marche .deux-colonnes>*+*{border-left:1px solid var(--filet)} body.marche .deux-colonnes>*{min-width:0} body.marche .deux-colonnes>*>hr.filet:first-child{display:none} } /* Un ecran qui n'est qu'un formulaire ou un texte suivi garde sa LARGEUR DE LECTURE quand la coque s'elargit : un champ de saisie de mille pixels ne se lit pas, il s'endure. Sans effet en dessous de 1000 px. */ .mesure{width:100%} @media(min-width:1000px){ body.marche .mesure{max-width:520px;margin-left:auto;margin-right:auto} } /* .lisible — LA LIGNE NE DEPASSE PAS SOIXANTE-DIX SIGNES. Un paragraphe de texte suivi pose en travers de 1000 px fait 160 signes par ligne : l'oeil perd le debut de la ligne suivante. Sur un telephone la question ne se pose pas (390 px = 55 signes), la regle ne vit donc qu'au-dela de 1000 px. A poser sur le PARAGRAPHE, jamais sur son conteneur : le conteneur porte souvent un fond ou un filet qui, lui, va d'un bord a l'autre. 50ch, et non 64 : le « ch » est la chasse du zero, plus large que la lettre moyenne de Manrope. A 64ch la ligne portait 82 signes, mesures ; a 50ch elle en porte 62 a 70 selon le texte (une phrase de r, de t et de i est plus serree qu'une phrase de m et de o). */ .lisible{max-width:100%} @media(min-width:1000px){ body.marche .lisible{max-width:50ch} /* Dans une COLONNE d'ordinateur (la fiche, le tunnel, une bande photographique), tout paragraphe est lisible d'office : un avis de 86 signes sur une ligne, une aide de champ de 76, une mention de 108 ne se nomment pas un par un. La regle ne touche que la largeur maximale : un texte court ne bouge pas, un texte centre ou aligne a droite n'existe pas dans ces colonnes. */ body.marche .ordi-fiche>.pcpal :is(p,.note,.c14):not(.cap), body.marche .deux-colonnes :is(p,.aide), body.marche .bande .mot p{max-width:50ch} /* le petit texte (12 et 13 px) a des lettres plus etroites : 54 ch y font encore 66 signes, et une mention de 60 signes ne rejette plus son dernier mot. */ body.marche .ordi-fiche>.pcpal :is(.c12,.c13):not(.cap){max-width:54ch} /* l'aide d'un champ est un span en ligne : une largeur maximale ne le plie pas tant qu'il n'est pas un bloc. Il le devient ici, et seulement ici. */ body.marche .deux-colonnes .champ-l .aide{display:block} } /* Une liste de cartes qui passe a DEUX PAR RANGEE sur un ordinateur — TROIS avec .trois — et qui ne fait rien du tout en dessous de 1000 px. Ce qui n'est pas une carte — une bande photographique, une rangee de chiffres, un separateur — tient toute la largeur. .paquet est le regroupement de trois cartes qui donne son rythme au telephone : sur un ordinateur il s'efface (display:contents) pour que ses cartes deviennent les cases de la grille. */ .grille-cartes{display:block} @media(min-width:1000px){ body.marche .grille-cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start;column-gap:0;row-gap:0} body.marche .grille-cartes.trois{grid-template-columns:repeat(3,minmax(0,1fr))} body.marche .grille-cartes>*{min-width:0} body.marche .grille-cartes>.paquet{display:contents} body.marche .grille-cartes>:not(.coach):not(.paquet):not(.bande){grid-column:1/-1} /* LA BANDE PHOTOGRAPHIQUE EST UNE CASE, PAS UNE BARRE. Posee apres trois cartes, en pleine largeur, elle laissait la troisieme carte seule sur sa rangee avec une case blanche a cote : un trou au milieu de la liste. Elle prend donc une case, sur toute la hauteur de la rangee, et la liste coule sans trou : deux cartes, une carte et la bande, deux cartes. Le sommaire des chiffres, lui, garde les deux colonnes : c'est une conclusion, pas une case. */ body.marche .grille-cartes>.bande{grid-column:auto;align-self:stretch;height:auto;min-height:280px} body.marche .grille-cartes>.bande .mot{bottom:20px} body.marche .grille-cartes .coach{padding-bottom:22px} body.marche .grille-cartes .coach .ph{height:220px} body.marche .grille-cartes.trois .coach .ph{height:196px} } /* --- 3.7 · LA RANGEE QUI GLISSE SE DEPLIE (.ordi-grille, .ordi-deplie) - Sur un telephone, le quatrieme element coupe au bord droit EST ce qui appelle le geste (6.26). Sur un ordinateur il n'appelle rien : il cache la moitie des destinations derriere une barre de defilement qu'on ne voit pas. Deux depliages, tous deux inertes en dessous de 1000 px : .ordi-grille pour des CARTES : la rangee passe a la ligne et les cartes se partagent la largeur. Elles GRANDISSENT pour la remplir (flex-grow 1) : la derniere rangee ne laisse jamais une case vide, quel que soit le nombre de coachs inscrits ce jour-la. --ordi-base est la largeur minimale d'une carte (190 px), et c'est elle qui decide du nombre par rangee ; .large la porte a 300 px pour une carte qui raconte. .ordi-deplie pour des PASTILLES : elles gardent leur largeur, la rangee passe simplement a la ligne. C'est la forme des rails de filtres, ou rien ne doit rester cache derriere le bord. Les reperes de la rangee (6.26) n'ont plus rien a reperer : ils disparaissent. */ @media(min-width:1000px){ /* cursor:auto : glisse() pose la main qui saisit (.saisissable) sur toute rangee ; une grille depliee ne se tire pas, la main mentirait. */ body.marche .glisse.ordi-grille,body.marche .glisse.ordi-deplie{ flex-wrap:wrap;row-gap:var(--ecart);overflow:visible;scroll-snap-type:none;cursor:auto} body.marche .glisse.ordi-grille>*{flex:1 1 var(--ordi-base,190px);min-width:0; scroll-snap-align:none} body.marche .glisse.ordi-grille.large{--ordi-base:300px} /* les bandeaux (6.24) : trois par rangee dans 828 px, deux dans 1040 avec .large ; 240 px, c'est le minimum pour que « 3,9 sur 5 » et sa legende tiennent. */ body.marche .glisse.bandeaux.ordi-grille{--ordi-base:240px;padding-bottom:2px} /* .dest a une largeur fixe de 160 px pour la rangee du telephone : dans la grille, la case decide, pas la carte. */ body.marche .glisse.ordi-grille>.dest{width:auto} body.marche .glisse.ordi-grille>.dest .ph{height:196px} body.marche .glisse.ordi-grille>.sportv .ph{height:146px} body.marche .glisse.ordi-grille~.reperes, body.marche .glisse.ordi-deplie~.reperes{display:none} /* Les deux rangees de pastilles du systeme — les gestes rapides (6.25) et le rail d'onglets ou de filtres (4.5) — se deplient d'office : elles n'ont pas besoin d'etre nommees une par une, et une pastille cachee derriere le bord droit d'un ecran de bureau est une pastille perdue. */ body.marche .rapides,body.marche .rail{flex-wrap:wrap;row-gap:8px;overflow:visible} } /* --- 3.8 · LE MENU D'UN ESPACE PASSE EN COLONNE (.ordi-cote) ---------- L'espace du client a cinq onglets dans un rail qui glisse (4.5). Au-dela de 1000 px, ce rail devient un MENU EN COLONNE a gauche, comme le tiroir du coach (3.4) : c'est la meme famille d'ecrans, elle se tient de la meme maniere. A poser sur le conteneur dont le PREMIER enfant est le .rail ; le second enfant est la vue. En dessous de 1000 px, rien ne change. */ @media(min-width:1000px){ body.marche .ordi-cote{display:grid;grid-template-columns:212px minmax(0,1fr); align-items:start;background:var(--papier)} body.marche .ordi-cote>.rail{display:block;overflow:visible;padding:16px 16px 24px var(--marge); border-right:1px solid var(--filet);position:sticky;top:calc(var(--h-tete) + 10px)} body.marche .ordi-cote>.rail>.pastille{display:flex;width:100%;justify-content:flex-start; white-space:normal;border-radius:0;border:0;border-left:2px solid transparent; background:none;height:auto;min-height:36px;padding:8px 10px;color:var(--ardoise)} body.marche .ordi-cote>.rail>.pastille+.pastille{margin-top:2px} body.marche .ordi-cote>.rail>.pastille.on{background:var(--papier2);border-left-color:var(--encre); color:var(--encre)} /* Les colonnes sont NOMMEES, elles ne dependent pas de l'ordre : le rail est cache (display:none) tant que la session n'a pas repondu, et la vue seule serait alors tombee dans la colonne etroite de gauche. */ body.marche .ordi-cote>.rail{grid-column:1} body.marche .ordi-cote>*:not(.rail){grid-column:2;min-width:0} } /* --- 3.9 · LA FICHE DU COACH, A LA MANIERE D'AIRBNB (.ordi-fiche) ------ Au-dela de 1000 px, la photographie et le recit tiennent la colonne large, et LE PANNEAU DE RESERVATION — les formules, le prix, le bouton — se colle a droite et suit le defilement. C'est le geste d'Airbnb, et c'est le seul qui repond a la question du client : « combien, et quand ». La page se decoupe en trois blocs, et l'ORDRE DU DOCUMENT EST CELUI DU TELEPHONE :

photographie, cartouche, chiffres, presentation