/* ══════════════════════════════════════════════════════════════════════ AGENDA ══════════════════════════════════════════════════════════════════════ */ .fof-ag-head{display:flex;flex-direction:column;gap:calc(12 * var(--fof-px));margin-bottom:calc(16 * var(--fof-px));} /* Les trois titres de l'Agenda passent à --police-titre (maquette « Menu AGENDA » du 2026-08-26). Trois choses vont ensemble à chaque fois : • `font-weight:400` — Bebas Neue n'a QU'ELLE ; le 600 d'avant ne donnait rien de plus, ou un faux gras selon le navigateur ; • `letter-spacing:normal` — le resserrement négatif était réglé pour Instrument Sans ; sur une condensée il colle les lettres ; • la taille, elle, ne bouge pas encore : l'échelle de titres se règle en une fois quand les autres écrans seront arrivés. */ .fof-ag-h1{margin:0;font-family:var(--police-titre);font-size:var(--fof-t-titre-ecran); font-weight:400;letter-spacing:normal;color:var(--fof-ink);} .fof-ag-head-actions{display:flex;gap:calc(8 * var(--fof-px));} .fof-ag-head-actions > *{flex:1 1 0;} /* ── En-tête d'écran, TÉLÉPHONE (maquette 1a) ───────────────────────────── Le titre SEUL à gauche, les boutons CARRÉS à droite, sur la même ligne dès le téléphone : ajouter, rechercher, compte. Plus de sous-titre depuis le 2026-08-21 (demande d'Etienne, tous modules) : il redisait ce que la liste montre juste dessous. La rangée ne fait donc plus qu'UNE ligne de texte — les deux valeurs qui en dépendaient suivent : les titres se centrent sur les boutons (`center` et non `flex-start`, qui n'avait de sens que pour aligner le haut de deux blocs inégaux), et les carrés passent de 52 à 44 px. 44 px n'est pas un nombre choisi ici : c'est déjà celui des carrés de la barre du haut (`.fof-hd-new`, `.fof-hd-ghost`, `.fof-hd-me`) et le plancher de la cible tactile. Les mêmes boutons font donc la même taille aux deux largeurs. */ .fof-ag-top{display:flex;align-items:center;justify-content:space-between; gap:calc(12 * var(--fof-px));margin-bottom:calc(14 * var(--fof-px));} .fof-ag-titles{min-width:0;} .fof-ag-acts{display:flex;align-items:center;gap:calc(8 * var(--fof-px));flex-shrink:0;} .fof-ag-sq{width:calc(44 * var(--fof-px));height:calc(44 * var(--fof-px));flex:0 0 calc(44 * var(--fof-px));padding:0; border-radius:var(--fof-r-md);display:inline-flex;align-items:center; justify-content:center;cursor:pointer;font-family:inherit; transition:background .12s,border-color .12s,color .12s;} .fof-ag-sq-primary{background:var(--fof-primary-degrade);color:var(--fof-on-primary);border:none;} .fof-ag-sq-primary:hover{background:var(--fof-primary-hover);} /* Le même carré, en BLEU : la fiche d'une répétition, où rien n'est bordeaux. Un seul modificateur, le même mot que partout ailleurs — `.fof-btn-primary` (feuille 3) et `.fof-rf-icon` le portent déjà. Le survol prend --fof-info à plat : il n'existe pas de --fof-info-hover, et c'est justement le bas du dégradé — le carré s'assombrit d'un bloc, comme le bordeaux le fait avec --fof-primary-hover. */ .fof-ag-sq-primary.is-info{background:var(--fof-info-degrade);color:var(--fof-on-primary);} .fof-ag-sq-primary.is-info:hover{background:var(--fof-info);} /* Action secondaire de l'en-tête d'écran : même carré, mais discret — une seule action dominante par écran. Elle reprend l'habillage de `.fof-btn-secondary`, pas une couleur inventée pour l'occasion. */ .fof-ag-sq-ghost{background:var(--fof-surface);color:var(--fof-ink); border:1px solid var(--fof-border);} .fof-ag-sq-ghost:hover{background:var(--fof-surface-2);} .fof-ag-sq-avatar{background:var(--fof-surface-2);color:var(--fof-ink); border:1px solid var(--fof-border);overflow:hidden; font-size:var(--fof-t-libelle);font-weight:700;letter-spacing:calc(.2 * var(--fof-px));} .fof-ag-sq-avatar:hover{background:var(--fof-bg);} .fof-ag-sq-avatar img{width:100%;height:100%;object-fit:cover;display:block;} /* Petit menu du bouton « + » : deux créations possibles, une seule icône. `top` = hauteur du bouton (44) + 8 : le menu se pose juste dessous. Cette valeur vaut aussi pour le menu de la barre du haut (`.fof-hd-addmenu`), dont le carré mesure 44 px lui aussi — un seul ancrage pour les deux. */ .fof-ag-addwrap{position:relative;} .fof-ag-addmenu{position:absolute;right:0;top:calc(52 * var(--fof-px));z-index:41;width:calc(216 * var(--fof-px)); background:var(--fof-surface);border:1px solid var(--fof-border-soft); border-radius:calc(11 * var(--fof-px));box-shadow:var(--fof-shadow);overflow:hidden; animation:popIn .14s ease;} .fof-ag-addmenu button{display:block;width:100%;min-height:calc(48 * var(--fof-px));padding:0 calc(15 * var(--fof-px)); border:none;background:none;text-align:left;cursor:pointer; font-family:inherit;font-size:var(--fof-t-libelle);font-weight:500;color:var(--fof-ink);} .fof-ag-addmenu button + button{border-top:1px solid var(--fof-border-soft);} .fof-ag-addmenu button:hover{background:var(--fof-bg);} /* ── Segmenté : UN SEUL composant pour toute l'application ─────────────── Trois emplois aujourd'hui : les onglets de l'Agenda (3 états sur ordinateur, 2 au téléphone), ceux de la Boîte mail (2 états) et la bascule Clair / Sombre (2 états, dans le menu du compte et sur l'écran « Plus »). Toute nouvelle bascule de ce type réutilise ces trois classes. Fond du conteneur = --fof-bg, la couleur posée derrière les boutons du rail (demande d'Etienne : --fof-border était trop sombre). Comme --fof-bg est AUSSI le fond de page, un filet --fof-border dessine le contour : sans lui le contrôle disparaîtrait sur l'Agenda au téléphone, où il n'est pas posé sur la barre blanche. L'onglet actif prend --fof-surface, donc il se détache dans les deux situations. */ .fof-seg{display:flex;gap:calc(4 * var(--fof-px));background:var(--fof-bg); border:1px solid var(--fof-border);border-radius:var(--fof-r-md); padding:calc(4 * var(--fof-px));overflow-x:auto;} .fof-seg-btn{flex:1 1 0;min-height:calc(44 * var(--fof-px));padding:0 calc(22 * var(--fof-px));border:none;border-radius:calc(9 * var(--fof-px)); display:inline-flex;align-items:center;justify-content:center;gap:calc(6 * var(--fof-px)); background:transparent;color:var(--fof-muted);cursor:pointer; font-family:inherit;font-size:var(--fof-t-badge);font-weight:600;white-space:nowrap; transition:background .12s,color .12s;} .fof-seg-btn.is-selected{background:var(--fof-surface);color:var(--fof-ink); box-shadow:0 1px calc(3 * var(--fof-px)) rgba(0,0,0,.10);} /* Le compte accompagne le libellé sans le concurrencer (chiffres alignés). Il reste en --fof-muted et non --fof-faint : sur le fond du conteneur, --fof-faint ne donnait que 3,8:1, insuffisant pour un chiffre utile. */ .fof-seg-n{font-family:var(--police-mono);font-weight:600; font-variant-numeric:tabular-nums;color:var(--fof-muted);} /* ── Boutons de contexte : le segmenté n'est plus un segmenté ──────────── Les onglets de l'Agenda et de la Boîte mail, et les filtres de Clients, se présentent comme des boutons SÉPARÉS : plus de cadre gris qui les réunit, chacun porte son filet, et celui qui est actif est en bordeaux plein. Demande d'Etienne du 2026-07-28, sur capture — d'abord au téléphone, puis reportée sur l'ordinateur. Deux emplacements, une seule apparence : • `.fof-seg-page` — dans la page, au téléphone ; • `.fof-hd-seg` — dans la barre du haut, sur ordinateur. La bascule reste le MÊME composant : mêmes classes, mêmes liaisons, `_segCls` inchangé — seule l'apparence de ces deux variantes est redéfinie. Le cadre gris subsiste pour la bascule Clair / Sombre, qui est un vrai interrupteur à deux états et non une rangée de boutons. Onglets ou filtres, l'apparence est la même mais le sens diffère : les onglets sont un choix UNIQUE (un seul bouton coloré à la fois), les filtres de Clients se CUMULENT. */ .fof-seg.fof-seg-page, .fof-seg.fof-hd-seg{background:none;border:none;padding:0;gap:calc(8 * var(--fof-px)); overflow:visible;} .fof-seg.fof-seg-page{margin-bottom:var(--fof-gap-e);} .fof-seg-page .fof-seg-btn, .fof-hd-seg .fof-seg-btn{min-height:calc(44 * var(--fof-px));border-radius:calc(10 * var(--fof-px));font-size:var(--fof-t-second); border:1px solid var(--fof-border);background:var(--fof-surface); color:var(--fof-muted);} .fof-seg-page .fof-seg-btn.is-selected, .fof-hd-seg .fof-seg-btn.is-selected{border-color:transparent; background:var(--fof-primary-degrade);color:var(--fof-on-primary);box-shadow:none;} /* Le compte (« À venir 15 ») suit la couleur du bouton : sur le bordeaux, le gris d'origine tombait à 2,4:1. */ .fof-seg-page .fof-seg-btn.is-selected .fof-seg-n, .fof-hd-seg .fof-seg-btn.is-selected .fof-seg-n{color:inherit;opacity:.8;} /* Le badge de non-lus de la Boîte mail est posé sur l'onglet : sur fond bordeaux il doit se détacher, comme il le fait sur le fond clair. */ .fof-hd-seg .fof-seg-btn.is-selected .fof-nav-badge, .fof-seg-page .fof-seg-btn.is-selected .fof-nav-badge{ background:var(--fof-on-primary);color:var(--fof-primary);} /* 22 px de retrait latéral, c'était la mesure d'un segmenté — des cases collées dans un cadre commun. Séparés et bordés, 14 px suffisent, et les ~50 px ainsi rendus vont au champ de recherche, qui est le seul élément rétractable de la barre. */ .fof-hd-seg .fof-seg-btn{padding:0 calc(14 * var(--fof-px));flex:0 0 auto;} /* Dans une page, le segmenté doit tenir sur la largeur d'un téléphone à TROIS onglets (« À venir 8 / Passés / Répétitions »). Les 22 px de retrait latéral débordaient sur un écran de 360 px et déclenchaient l'ascenseur horizontal du conteneur. Les boutons étant en `flex:1 1 0`, ce retrait ne fixe que leur largeur MINIMALE : le rendu à deux onglets est inchangé, ils se partagent la largeur comme avant. */ .fof-seg-page .fof-seg-btn{padding:0 calc(10 * var(--fof-px));} /* ── Bloc « Prochain » (maquette 1a) ────────────────────────────────────── Fond bordeaux, seule zone pleine couleur de l'écran. Trois éléments s'en détachent en AMBRE : le compteur J-xx (pastille pleine), la date, et l'horloge du Get-in. Le statut porte sa propre couleur. */ /* Le bloc entier est cliquable : il ouvre la fiche de la date. Il remplace le bouton « Voir la fiche », supprimé le 2026-07-28. */ /* ── Le carrousel des prochaines dates ──────────────────────────────────── Une FENÊTRE qui ne laisse voir qu'une fiche, et une PISTE qui les porte toutes côte à côte. C'est la PISTE que le doigt déplace : les fiches ne bougent pas les unes par rapport aux autres, et en tirant on voit arriver la voisine — demande d'Etienne du 2026-08-21. Le doigt fait glisser la piste horizontalement ; la page, elle, garde le défilement vertical. C'est ce que dit `pan-y` — et c'est ce qui permet aux écouteurs de rester PASSIFS, sans jamais bloquer le défilement. La transition ne sert qu'au relâché : pendant le geste, la logique la coupe pour que la piste colle au doigt, au pixel près. */ .fof-ag-carousel{overflow:hidden;margin-bottom:calc(22 * var(--fof-px));touch-action:pan-y;} /* UNE seule formule de position : le rang vient de la classe, le décalage du doigt de --fof-ag-dx. Le pas, c'est la largeur de la fenêtre plus la gouttière — et 100 % se lit sur la PISTE, qui fait la largeur de la fenêtre (les fiches, elles, débordent). */ .fof-ag-track{display:flex;gap:var(--fof-sp-3); transform:translateX(calc(var(--fof-ag-i,0) * -1 * (100% + var(--fof-sp-3)) + var(--fof-ag-dx,0px))); transition:transform .2s ease-out;} .fof-ag-track.is-at-1{--fof-ag-i:1;} .fof-ag-track.is-at-2{--fof-ag-i:2;} .fof-ag-track.is-at-3{--fof-ag-i:3;} .fof-ag-track.is-at-4{--fof-ag-i:4;} .fof-ag-track.is-at-5{--fof-ag-i:5;} /* Chaque fiche occupe toute la fenêtre. Elles s'étirent à la hauteur de la plus haute : le bloc ne saute pas d'une date à l'autre. */ .fof-ag-track > .fof-ag-next{flex:0 0 100%;} .fof-ag-next{background:var(--fof-primary-degrade);color:var(--fof-on-primary); border-radius:var(--fof-r-xl);padding:calc(20 * var(--fof-px)); cursor:pointer;-webkit-tap-highlight-color:transparent; transition:background .12s;} /* ── Aucun survol sur un écran tactile ──────────────────────────────────── Sur un téléphone, :hover se COLLE : il se déclenche au toucher et y reste jusqu'au toucher suivant ailleurs. Toucher l'icône GPS laissait donc le bloc entier dans sa teinte de survol, sans en ressortir — la couleur du bloc « changeait » sans raison visible. Ces règles ne valent maintenant que là où il existe un VRAI pointeur. L'icône GPS, elle, n'a plus aucun survol : demande d'Etienne du 2026-08-21, sa couleur ne doit changer en aucun cas. Le survol reste un APLAT (--fof-primary-hover) alors que le repos est un dégradé : le dégradé disparaît donc le temps du survol. C'est assumé, décision d'Etienne du 2026-08-26 — « garde l'aplat existant pour le moment ». Le jour où une paire de survol sera donnée, elle s'écrira dans le socle, à côté de --fof-primary-degrade, et cette règle ne bougera pas. */ @media (hover:hover){ .fof-ag-next:hover{background:var(--fof-primary-hover);} } /* La RÉFÉRENCE de cette ligne est la pastille du compte à rebours : la date se centre VERTICALEMENT dessus (demande d'Etienne du 2026-08-26). D'où le centrage — l'alignement sur la ligne de base, essayé d'abord, posait les deux textes sur le même trait du BAS ; c'est bien leur MILIEU qui doit coïncider. Ce que le centrage doit attraper, c'est le texte VU et non sa boîte : voir le rognage `text-box` de la date, juste en dessous. */ .fof-ag-next-top{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--fof-px));} .fof-ag-next .fof-ag-eyebrow{color:var(--fof-on-primary);opacity:.72;} .fof-ag-countdown{display:inline-flex;align-items:center;padding:calc(5 * var(--fof-px)) calc(11 * var(--fof-px)); border-radius:var(--fof-r-sm);background:var(--fof-amber);color:var(--fof-amber-ink); font-family:var(--police-mono);font-size:var(--fof-t-second);font-weight:600; font-variant-numeric:tabular-nums;} /* La date vit dans la PREMIÈRE ligne du bloc, face au compte à rebours (2026-08-21) : elle n'a plus d'écart à prendre au-dessus d'elle, et c'est le nom qui reprend celui qu'elle laisse. */ /* Deux crans au-dessus de --fof-t-libelle (14,5) où elle était : la date prend --fof-t-section (19), soit 17,9 px au téléphone. Elle a été trouvée trop petite deux fois de suite (constats d'Etienne du 2026-08-26). La maquette « Menu AGENDA » la donne à 13,5 px : l'écart avec elle est VOULU. `text-box` rogne la boîte du texte sur ses CAPITALES — du haut de capitale à la ligne de base. Sans ce rognage, le centrage porte sur la boîte de LIGNE, qui réserve au-dessus et en dessous une place d'accents et de jambages que « Jeudi 8 octobre 2026 » n'occupe pas : les lettres tombaient 1,7 px plus haut que le milieu de la pastille d'en face, alors que les deux BOÎTES, elles, étaient bien centrées. Rogné, c'est le texte VU qui se centre. Un navigateur qui ne connaît pas `text-box` l'ignore et retombe sur le centrage de boîte : l'écart d'avant revient, rien ne casse. */ .fof-ag-next-date{font-size:var(--fof-t-section);font-weight:600;color:var(--fof-amber); text-box:trim-both cap alphabetic;} .fof-ag-next-name{margin:var(--fof-sp-2) 0 0;font-family:var(--police-titre); font-size:var(--fof-t-titre-carte);font-weight:400;letter-spacing:normal;line-height:1.25;} .fof-ag-next-where{margin-top:calc(4 * var(--fof-px));font-size:var(--fof-t-second);opacity:.86;} /* Ligne setlist : texte simple. Ce n'était un lien que dans le texte du brief ; la maquette la montre en clair, et un lien de 20 px de haut violait la règle des cibles de 44 px. La setlist reste ouvrable depuis la fiche de la date et depuis l'écran Setlists. */ .fof-ag-next-setlist{margin-top:calc(3 * var(--fof-px));font-size:var(--fof-t-second);opacity:.86;} /* Les puces et le lien d'itinéraire partagent la même ligne : le statut à gauche, puis get-in et itinéraire collés au bord droit (voir plus bas, qui des deux porte le `margin-left:auto`). `align-items:center` : le bouton d'itinéraire est plus haut que les puces, elles se centrent entre elles. */ .fof-ag-next-chips{display:flex;flex-wrap:wrap;align-items:center; gap:calc(8 * var(--fof-px));margin-top:calc(14 * var(--fof-px));} .fof-ag-chip{display:inline-flex;align-items:center;gap:calc(7 * var(--fof-px));padding:calc(7 * var(--fof-px)) calc(11 * var(--fof-px)); border-radius:var(--fof-r-sm);font-size:var(--fof-t-badge);font-weight:600;white-space:nowrap; background:rgba(255,255,255,.16);color:var(--fof-on-primary);} [data-theme="dark"] .fof-ag-chip{background:rgba(255,255,255,.34);} /* Get-in : PAS une puce — une simple mention (maquette « Menu AGENDA », 2026-08-26). Ni cadre, ni aplat, ni horloge : du texte blanc, et c'est tout. La maquette ne dessine aucun rectangle autour d'elle, là où elle en dessine un autour du bouton d'itinéraire. Elle a donc perdu la classe `.fof-ag-chip` dans le gabarit : son aplat et son retrait n'avaient plus lieu d'être, et les garder pour les annuler ici aurait été un combat de priorités avec la règle sombre de `.fof-ag-chip`. Elle passe en --police-titre, comme le nom de la date juste au-dessus, et déclare son `font-weight:400` : Bebas Neue n'a qu'une graisse, un 600 hérité de l'ancienne puce n'aurait donné qu'un faux gras. Elle prend le MÊME jeton que le nom de la date, --fof-t-titre-carte : la maquette leur donne la même taille, et c'est un relevé, pas un choix. Les tracés du texte y sont vectorisés ; « GET-IN 15:00 » y couvre 381,7 unités pour 72 de hauteur de capitale, soit 131,2 × 24,7 px à l'échelle du téléphone de 378 px. Le jeton, à cette largeur d'écran (échelle .94, donc 33,84 px), rend 130,8 × 24,0 px — 0,3 % d'écart en largeur. La méthode a été contrôlée sur le titre de la carte, dont la valeur était déjà connue : elle le retrouve à 34,07 px pour 33,84 attendus. La mention se pousse à DROITE (`margin-left:auto`) pour venir se coller au bouton d'itinéraire, le statut restant seul à gauche. Quand elle est là, c'est ELLE qui absorbe l'espace libre : le bouton d'itinéraire rend son propre `margin-left:auto`, sinon les deux se partageraient le vide et la mention flotterait au milieu. Le `margin-right` complète les 8 px de gouttière de la rangée : la maquette laisse 21,1 px entre la fin du texte et le bouton, pas 8. Elle se centre VERTICALEMENT sur le bouton d'itinéraire, référence de la rangée, comme la pastille de statut (demande d'Etienne du 2026-08-26). `text-box` rogne sa boîte sur ses capitales : Bebas Neue réserve sous sa ligne de base une place de jambages que « GET-IN 15:00 » n'occupe jamais, et sans ce rognage le texte VU montait de 1,7 px pendant que sa boîte, elle, était bien centrée. Même raison que pour la date du haut. */ .fof-ag-chip-getin{margin-left:auto;margin-right:var(--fof-sp-3);white-space:nowrap; font-family:var(--police-titre);font-size:var(--fof-t-titre-carte);font-weight:400; letter-spacing:normal;color:var(--fof-on-primary); text-box:trim-both cap alphabetic;} /* Statut : la couleur du statut, tenue lisible sur le bordeaux (clair) puis sur l'orange (sombre). Toutes ces paires dépassent 6:1. */ .fof-ag-chip-ok{background:rgba(20,102,56,.62);color:#A8E9C1;} .fof-ag-chip-wait{background:rgba(122,90,12,.62);color:#F6DEA0;} .fof-ag-chip-warn{background:rgba(184,64,26,.62);color:#FFD6C2;} .fof-ag-chip-bad{background:rgba(179,36,28,.62);color:#FFD2CD;} [data-theme="dark"] .fof-ag-chip-ok{background:rgba(255,255,255,.48);color:#0C3D1F;} [data-theme="dark"] .fof-ag-chip-wait{background:rgba(255,255,255,.48);color:#4A3505;} [data-theme="dark"] .fof-ag-chip-warn{background:rgba(255,255,255,.48);color:#6B2A0C;} [data-theme="dark"] .fof-ag-chip-bad{background:rgba(255,255,255,.48);color:#6B120D;} /* Itinéraire : carré à filet blanc, ancré à DROITE de la ligne des puces. `margin-left:auto` pousse le lien au bout, quel que soit le nombre de puces à sa gauche — sauf quand la mention get-in est là, car c'est alors ELLE qui prend le vide (voir plus haut). 56 px, et non plus 44 : la maquette « Menu AGENDA » le dessine à 162 de ses unités, et son échelle est celle déjà calée dans 1-socle.css pour les titres Bebas — un téléphone de 378 px, soit 55,7 px. Les 44 px d'avant étaient le minimum d'une cible tactile, pas une mesure. Contrôle de l'échelle sur la même maquette : le pas entre deux points de carrousel y fait 24,05 px (--fof-sp-6) et leur rond 8,9 px (--fof-sp-2). Le filet est PLEIN, et de la même encre que l'icône qu'il encadre : --fof-on-primary, donc blanc franc sur le bordeaux (demande d'Etienne du 2026-08-26 ; la maquette écrit bien `stroke="white"`, sans transparence). Il était à 40 % de blanc, ce qui le tirait vers le gris rosé du fond. Ce jeton retourne l'encre foncée en thème sombre, où le bloc est clair : le filet suit donc son icône tout seul, et la règle sombre qui le rattrapait à la main a disparu. */ .fof-ag-next-gps{flex:0 0 calc(56 * var(--fof-px));height:calc(56 * var(--fof-px));margin-left:auto; border-radius:var(--fof-r-md); display:inline-flex;align-items:center;justify-content:center; background:none;border:1px solid var(--fof-on-primary); color:var(--fof-on-primary);text-decoration:none;} .fof-ag-chip-getin ~ .fof-ag-next-gps{margin-left:0;} /* La pastille de statut ne se décale plus : la RÉFÉRENCE de la rangée est le bouton d'itinéraire, et le centrage de la rangée pose déjà son milieu sur celui du bouton (demande d'Etienne du 2026-08-26). Elle a un temps été remontée de 4 px pour se caler sur le get-in ; c'est le get-in qui se recentre, pas elle. */ /* ── Points de pagination du bloc « Prochain » ──────────────────────────── Le bloc est un carrousel : un point par concert à venir, six au plus. Les points sont HORS du bloc, juste en dessous (2026-08-21) : ils ne se lisent plus sur le bordeaux mais sur le fond de l'écran, et prennent donc d'autres jetons — aucune couleur nouvelle pour autant. Les points sont BORDEAUX : --fof-primary, la couleur d'action de l'application (demande d'Etienne du 2026-08-26). Un APLAT, et non le dégradé qui remplit désormais boutons et cartes : sur un rond de 8 px, un dégradé vertical ne se voit pas — il n'ajouterait qu'une règle à tenir. Même raison pour la pastille « non lu » du mail et le filet de dépôt des setlists. Ils étaient orange (--fof-accent). Ce n'est PAS --fof-amber : cet ambre-là ne vaut que sur le bordeaux (son propre commentaire dans 1-socle.css le dit), et il vire au brun foncé en thème sombre — invisible sur le fond d'écran. UN seul jeton pour les deux états : c'est l'OPACITÉ qui dit lequel est le point courant — .42 pour les autres, 1 et un rond plus gros pour lui. La CIBLE fait 44 px de haut, comme partout dans l'application ; le rond visible n'en fait que 8. C'est le bouton qui est grand, pas le décor — d'où les 18 px d'air que le bouton pose lui-même entre le bloc et le point. Quand les points suivent le carrousel, c'est LEUR rangée qui porte l'écart avec la liste : la fenêtre rend les 22 px qu'elle réservait. */ .fof-ag-carousel:has(+ .fof-ag-dots){margin-bottom:0;} /* Les boutons se touchent (aucun écart) et mesurent 24 px de large : c'est le minimum d'une cible répétée, et c'est ce qui rapproche les ronds. Avec 32 px et 4 px d'écart, il y avait 28 px entre deux ronds de 8 px ; il en reste 16. */ .fof-ag-dots{display:flex;align-items:center;justify-content:center; margin:0 0 var(--fof-sp-1);} .fof-ag-dot{flex:0 0 var(--fof-sp-6);height:calc(44 * var(--fof-px));padding:0; border:none;background:none;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; -webkit-tap-highlight-color:transparent;} /* Le rond lui-même : pas d'icône, une forme. */ .fof-ag-dot::before{content:'';display:block; width:var(--fof-sp-2);height:var(--fof-sp-2);border-radius:50%; background:var(--fof-primary);opacity:.42; transition:opacity .12s,background .12s,transform .12s;} .fof-ag-dot.is-on::before{background:var(--fof-primary);opacity:1;transform:scale(1.25);} @media (hover:hover){ .fof-ag-dot:hover::before{opacity:.66;} } /* ── Découpage par mois ─────────────────────────────────────────────────── Un intertitre discret (« SEPTEMBRE 2026 · 2 dates ») puis UNE carte blanche à coins arrondis contenant les dates de ce mois. Un mois = un bloc. */ .fof-ag-month{display:flex;align-items:baseline;gap:calc(10 * var(--fof-px));padding:calc(20 * var(--fof-px)) calc(2 * var(--fof-px)) calc(9 * var(--fof-px));} .fof-ag-month:first-child{padding-top:calc(2 * var(--fof-px));} .fof-ag-month-count{font-size:var(--fof-t-badge);color:var(--fof-faint);} .fof-ag-card{background:var(--fof-surface);border:1px solid var(--fof-border); border-radius:var(--fof-r-lg);overflow:hidden;} /* Ligne « date » : la pastille de date à gauche, puis UNE colonne qui porte l'en-tête (type / statut) et, dessous, l'information sur toute la largeur. */ .fof-ag-row{display:flex;align-items:center;gap:calc(14 * var(--fof-px));width:100%; min-height:calc(64 * var(--fof-px));padding:calc(12 * var(--fof-px));text-align:left;cursor:pointer; background:var(--fof-surface);color:inherit;font-family:inherit; border:none;border-bottom:1px solid var(--fof-border-soft); transition:background .12s;} .fof-ag-card .fof-ag-row:last-child{border-bottom:none;} .fof-ag-row:hover{background:var(--fof-surface-2);} .fof-ag-row.is-past{opacity:.7;} /* ── Sélection (maquette 2a) ────────────────────────────────────────────── La ligne choisie — celle dont le panneau de droite montre le détail — est ENCADRÉE, et rien d'autre. La pastille de date ne bouge plus : elle dit le TYPE de la date, pas la sélection. Deux signaux pour une seule chose, et on ne savait plus lequel lire (demande d'Etienne du 2026-08-24). Le fond reste blanc : c'est le cadre qui parle, pas un aplat. La bordure basse devient transparente au lieu de disparaître, pour que la ligne garde exactement la même hauteur, sélectionnée ou non. */ .fof-ag-row.is-selected{box-shadow:inset 0 0 0 calc(2 * var(--fof-px)) var(--fof-primary); border-radius:var(--fof-r-lg);border-bottom-color:transparent;} /* Le séparateur de la ligne du dessus s'efface aussi : sinon un filet vient buter contre le haut du cadre. */ .fof-ag-row:has(+ .fof-ag-row.is-selected){border-bottom-color:transparent;} /* ── Pastille de date ───────────────────────────────────────────────────── Concert et showcase : pleine, de la COULEUR D'ACTION — bordeaux en clair, orange en sombre — avec l'encre prévue pour elle. C'est la paire --fof-primary / --fof-on-primary, celle que porte déjà tout aplat plein de l'application ; son contraste est acquis dans les deux thèmes, il n'y a pas à le régler ici. Le fond est le DÉGRADÉ d'action depuis le 2026-08-26 ; son filet passe transparent — plat, il serait resté bordeaux là où le fond vire au brun, et se serait vu tout le long du bas. Il garde son pixel de large pour que la pastille ne change pas de taille. */ .fof-ag-pill{flex:0 0 calc(48 * var(--fof-px));width:calc(48 * var(--fof-px));padding:calc(6 * var(--fof-px)) 0;border-radius:var(--fof-r-md); background:var(--fof-primary-degrade);border:1px solid transparent; display:flex;flex-direction:column;align-items:center;line-height:1.15;} /* Répétition : pastille bleutée, du bleu que porte aussi son type écrit en tête de ligne. Elle ne suit PAS le plein ci-dessus — c'est ce bleu qui distingue une répétition d'une date de scène au premier coup d'œil. */ .fof-ag-pill.is-reh{background:var(--fof-info-soft);border-color:transparent;} .fof-ag-pill.is-reh .fof-ag-pill-day, .fof-ag-pill.is-reh .fof-ag-pill-wd, .fof-ag-pill.is-reh .fof-ag-pill-mon{color:var(--fof-info);} .fof-ag-pill-wd{font-size:calc(11px * var(--fof-echelle-texte));font-weight:600;color:var(--fof-on-primary);text-transform:uppercase;} .fof-ag-pill-day{font-size:var(--fof-t-section);font-weight:700;color:var(--fof-on-primary);} .fof-ag-pill-mon{font-size:calc(11px * var(--fof-echelle-texte));font-weight:600;color:var(--fof-on-primary);text-transform:uppercase;} /* ── Colonne de droite : en-tête (type + statut) puis information ───────── Le statut était une pastille centrée EN HAUTEUR au bout de la ligne : elle retirait sa largeur à l'information sur toute la hauteur de la ligne, d'où un retour à la ligne forcé. Elle remonte face au type, et l'information hérite de la largeur ainsi libérée. Demande d'Etienne du 2026-08-21. */ .fof-ag-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(4 * var(--fof-px));} .fof-ag-row-head{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--fof-px));} /* Le type, à gauche : petites capitales de SA couleur (l'encre vient du rendu, accent pour un concert, bleu pour un showcase ou une répétition), sans fond. Le fond plein reste au statut : deux badges côte à côte et on ne saurait plus lequel des deux lire. C'est une LIGNE : le texte, puis le point de note s'il y en a un. Son alignement se règle sur le point lui-meme (`align-self`), pas ici. */ .fof-ag-row-type{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; display:inline-flex;align-items:center;gap:var(--fof-sp-1); font-size:calc(11px * var(--fof-echelle-texte));font-weight:700;letter-spacing:calc(.5 * var(--fof-px));text-transform:uppercase;} /* Aucun écart entre le titre et l'information : l'interligne de la ligne d'information (1,35) réserve déjà ~2,8 px au-dessus de son texte, et les 2 px d'écart qui s'y ajoutaient l'éloignaient du titre plus que le titre ne l'est du type au-dessus (11,7 px contre 9,3). L'écart retiré, les deux respirations se valent (demande d'Etienne du 2026-08-26). */ .fof-ag-row-text{min-width:0;display:flex;flex-direction:column;} /* Un titre a le droit de passer sur deux lignes plutôt que d'être coupé. */ .fof-ag-row-title{display:flex;align-items:center;flex-wrap:wrap;gap:calc(9 * var(--fof-px)); font-family:var(--police-titre);font-size:var(--fof-t-titre-ligne);font-weight:400; line-height:1.3;color:var(--fof-ink);} .fof-ag-row-second{font-size:var(--fof-t-second);color:var(--fof-muted);line-height:1.35;} /* J-xx à côté du titre de la prochaine date (ordinateur, maquette 2a). */ .fof-ag-row-jx{padding:calc(2 * var(--fof-px)) calc(8 * var(--fof-px));border-radius:var(--fof-r-sm); background:var(--fof-amber);color:var(--fof-amber-ink); font-family:var(--police-mono);font-size:calc(12px * var(--fof-echelle-texte));font-weight:600; font-variant-numeric:tabular-nums;} /* Une note existe : un POINT accolé au type, pas une icône (demande d'Etienne, 2026-08-24). C'est le même rond que les points de navigation du carrousel — 8 px, parfaitement rond — et il prend la couleur du texte qui le porte, donc celle du type : bleu pour une répétition, accent pour une date de scène. `align-self:baseline` : le point POSE son bas sur la ligne de base du texte. Centré (`align-items:center`), il tombait 1 px trop bas — mesuré : le centre d'une ligne de texte n'est pas le centre de ses CAPITALES, la place réservée sous la ligne de base aux jambages tire le milieu vers le bas, et le type n'a que des capitales. Sur la ligne de base, les 8 px du rond couvrent tout juste la hauteur de capitale de League Spartan à cette taille : haut du rond au haut du C, bas du rond sur la ligne de base (demande d'Etienne, 2026-08-26). */ .fof-ag-row-note{flex:0 0 var(--fof-sp-2);height:var(--fof-sp-2);align-self:baseline; border-radius:50%;background:currentColor;} .fof-ag-row-badge{flex-shrink:0;white-space:nowrap;} .fof-ag-row-chevron{flex-shrink:0;display:flex;color:var(--fof-faint);} /* État vide */ .fof-ag-empty{border:calc(1.5 * var(--fof-px)) dashed var(--fof-border);border-radius:var(--fof-r-lg); padding:calc(28 * var(--fof-px)) calc(20 * var(--fof-px));text-align:center;} .fof-ag-empty-title{font-size:var(--fof-t-corps);font-weight:600;color:var(--fof-ink);} .fof-ag-empty-text{margin:calc(6 * var(--fof-px)) 0 calc(16 * var(--fof-px));font-size:var(--fof-t-libelle);color:var(--fof-muted);} /* Recherche de l'Agenda au téléphone : le champ vit dans la page, faute de barre du haut. Au-delà de 1101 px c'est celui de la barre qui sert. */ /* Recherche → contenu : le MÊME espace E qu'entre les boutons et elle. Sert à l'Agenda ET à la Boîte mail — c'est le même élément. */ .fof-ag-search{margin-bottom:var(--fof-gap-e);} /* Une seule colonne par défaut ; le panneau apparaît au-delà de 1100 px. */ .fof-agenda{display:block;} .fof-agenda-list{min-width:0;} .fof-agenda-panel{display:none;} /* ── Le panneau en fenêtre, sur téléphone ──────────────────────────────── Toucher une date ouvrait directement l'éditeur : on passait de la liste à un formulaire sans jamais pouvoir simplement LIRE la date. La fiche s'ouvre maintenant en lecture, comme la colonne de droite sur ordinateur, et « Modifier » reste la porte vers le formulaire. */ /* Plein écran PAR-DESSUS la barre de navigation basse (z-index 35), comme la lecture d'un mail — demande d'Etienne du 2026-07-28. Auparavant elle passait volontairement DESSOUS (z-index 34) pour qu'on puisse changer de menu sans revenir en arrière ; le choix est inversé, les deux écrans de lecture se comportent maintenant pareil. On en sort par la flèche de retour de la fiche, ou par le geste de retour du téléphone. Le retrait bas n'a plus à réserver la place de la barre : 110 px → 24. ⚠ ELLE N'A PLUS DE RETRAIT DU TOUT depuis le 2026-09-04, ni de fond gris : « BLOC_ReadEvent=M_Event Clair » pose la fiche À MÊME L'ÉCRAN, d'un bord à l'autre et sur un aplat de panneau — c'est le bloc lui-même qui porte ses 40 et ses 80, puisqu'il n'a plus de `RoundedPanel` pour les porter. Ne restent ici que les réserves d'écran, en haut comme en bas. */ .fof-agenda-panel.is-sheet{display:block;position:fixed;inset:0;z-index:36; overflow-y:auto;overscroll-behavior:contain;background:var(--panel-color); padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);} /* Ce qu'elle recouvre est aussi retiré : recouvert, cela resterait atteignable au clavier et annoncé par un lecteur d'écran. `visibility:hidden` — et surtout PAS `display:none`, qui détruirait les boîtes de mise en page : la page perdrait sa hauteur, le navigateur ramènerait le défilement à zéro, et on reviendrait de la fiche EN HAUT de l'agenda au lieu de l'endroit d'où on l'avait ouverte (constat d'Etienne du 2026-08-21). Masquée ainsi, la liste n'est ni cliquable, ni atteignable au clavier, ni annoncée par un lecteur d'écran : la raison d'origine tient toujours. C'est mot pour mot le parti pris de la fiche client recouverte (`.fof-drawer-overlay.is-behind`, feuille 2). Le pendant de ce choix : la liste étant toujours là, le défilement de la fiche pourrait se REPORTER sur elle en butée — d'où l'`overscroll-behavior` ci-dessus, sans quoi on perdrait la place qu'on vient de garder. */ .fof-main.is-agsheet .fof-ag4-top, .fof-main.is-agsheet .fof-ag4-seg, .fof-main.is-agsheet .fof-ag4-search, .fof-main.is-agsheet .fof-agenda-list{visibility:hidden;} /* La fiche en lecture n'est plus UNE carte mais une SUITE de cartes (maquettes EVENEMENT_Read et REPETITION_Read du 2026-08-28) : identité, setlist, itinéraire, road map, textes, line up, client. Chacune ne dit qu'une chose, et le gabarit la retire entièrement quand elle n'a rien à dire — d'où l'écart porté par la carte SUIVANTE et non par la précédente : une carte absente n'y laisse aucun blanc. */ .fof-ag-panel-card{background:var(--fof-surface);border:1px solid var(--fof-border); border-radius:var(--fof-r-lg);padding:calc(20 * var(--fof-px));} .fof-ag-panel-card + .fof-ag-panel-card{margin-top:var(--fof-sp-5);} /* Le nom de la date, en tête de la fiche — dans la colonne de droite sur ordinateur, en vue plein écran au téléphone : c'est la MÊME balise. Il lit --fof-t-titre-carte et non un rôle à lui : la carte « prochaine date » de l'Agenda porte exactement le même contenu, le nom d'une date. Deux tailles pour une même chose, c'est deux occasions de diverger. `line-height:1.25` était déjà là et reste juste : Bebas a des métriques verticales hautes, sans hauteur de ligne écrite le titre se réserverait une bande bien plus large que ses lettres. Le titre est CENTRÉ depuis le 2026-08-28 : il est le sujet de la carte, et la mention « Suivi par » se range dessous, centrée elle aussi. La ligne du client, qui vivait là (`.fof-ag-panel-where`), est descendue dans sa propre carte au bas de l'écran — la classe a disparu avec elle. */ .fof-ag-panel-name{margin:0;font-family:var(--police-titre);font-size:var(--fof-t-titre-carte); font-weight:400;letter-spacing:normal;line-height:1.25;color:var(--fof-ink); text-align:center;} /* Type et statut en tête de panneau, au-dessus du nom (maquette 2a) ; le carré d'action ferme la ligne, poussé au bout par la marge automatique — c'est la seule chose qui le tient à droite quel que soit le nombre de badges, y compris sur une répétition qui n'en porte qu'un. */ .fof-ag-panel-top{display:flex;align-items:center;flex-wrap:wrap;gap:calc(8 * var(--fof-px)); margin-bottom:calc(12 * var(--fof-px));} .fof-ag-panel-top .fof-ag-sq{margin-left:auto;} .fof-ag-panel-badge{display:inline-block;} /* Un badge posé dans une ligne de contact (la réponse d'un musicien) ne se laisse pas comprimer par le nom : le nom se tronque, pas le statut. */ .fof-ag-contact .fof-ag-panel-badge{flex-shrink:0;} .fof-ag-panel-follow{margin-top:var(--fof-sp-1);text-align:center; font-size:var(--fof-t-badge);color:var(--fof-muted);min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Contact sur place : vignette, nom, rôle et téléphone, bouton d'appel rond. */ .fof-ag-contact{display:flex;align-items:center;gap:calc(12 * var(--fof-px)); padding:calc(10 * var(--fof-px)) calc(12 * var(--fof-px));border-radius:var(--fof-r-md);background:var(--fof-surface-2);} .fof-ag-contact + .fof-ag-contact{margin-top:calc(8 * var(--fof-px));} .fof-ag-contact-av{flex-shrink:0;} .fof-ag-contact-text{flex:1;min-width:0;display:flex;flex-direction:column;} .fof-ag-contact-name{font-size:var(--fof-t-libelle);font-weight:600;color:var(--fof-ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .fof-ag-contact-sub{font-size:var(--fof-t-badge);color:var(--fof-muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .fof-ag-contact-call{flex:0 0 calc(44 * var(--fof-px));width:calc(44 * var(--fof-px));height:calc(44 * var(--fof-px));border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:var(--fof-surface);border:1px solid var(--fof-border); color:var(--fof-primary);text-decoration:none;} .fof-ag-contact-call:hover{background:var(--fof-bg);} /* Cartes « ressource » du panneau : setlist, conversation archivée. */ .fof-ag-rescard{display:flex;align-items:center;gap:calc(12 * var(--fof-px));width:100%; margin-top:calc(14 * var(--fof-px));padding:calc(12 * var(--fof-px));border-radius:var(--fof-r-md); background:var(--fof-surface-2);border:1px solid var(--fof-border-soft); text-align:left;font-family:inherit;} .fof-ag-rescard.is-button{cursor:pointer;transition:background .12s;} .fof-ag-rescard.is-button:hover{background:var(--fof-bg);} .fof-ag-rescard-icon{flex-shrink:0;display:flex;color:var(--fof-faint);} .fof-ag-rescard-text{flex:1;min-width:0;display:flex;flex-direction:column;} .fof-ag-rescard-title{font-size:var(--fof-t-libelle);font-weight:600;color:var(--fof-ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .fof-ag-rescard-sub{font-size:var(--fof-t-badge);color:var(--fof-muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .fof-ag-rescard-open{flex-shrink:0;font-size:var(--fof-t-second);font-weight:600;color:var(--fof-primary);} .fof-ag-rescard-btn{flex:0 0 calc(44 * var(--fof-px));width:calc(44 * var(--fof-px));height:calc(44 * var(--fof-px));padding:0; display:inline-flex;align-items:center;justify-content:center; border-radius:var(--fof-r-sm);border:1px solid var(--fof-border); background:var(--fof-surface);color:var(--fof-ink-2);cursor:pointer; transition:background .12s,color .12s;} .fof-ag-rescard-btn:hover{background:var(--fof-bg);color:var(--fof-primary);} .fof-ag-kv{margin:calc(16 * var(--fof-px)) 0 0;padding:0;} .fof-ag-kv-row{display:flex;align-items:baseline;justify-content:space-between; gap:calc(16 * var(--fof-px));padding:calc(9 * var(--fof-px)) 0;border-bottom:1px solid var(--fof-border-soft);} .fof-ag-kv-label{margin:0;font-size:var(--fof-t-second);color:var(--fof-muted);flex-shrink:0;} .fof-ag-kv-value{margin:0;font-size:var(--fof-t-second);font-weight:600;color:var(--fof-ink);text-align:right;} /* Le CADRE de la note ne contient plus que le texte : son sur-titre est passé au-dessus, en `.fof-section-title`, comme celui de « CONTACT SUR PLACE » (demande d'Etienne, 2026-08-24). D'où la marge du haut retirée ici — c'est le sur-titre qui porte l'écart — et le texte qui commence au bord du cadre. */ .fof-ag-note{background:var(--fof-surface-2); border-radius:var(--fof-r-md);padding:calc(14 * var(--fof-px));} .fof-ag-note-text{margin:0;font-size:var(--fof-t-libelle);line-height:1.55; color:var(--fof-ink-2);white-space:pre-wrap;} /* La rangée « Modifier » pleine largeur a disparu le 2026-08-28 : l'action est remontée en carré, au bout de la ligne des badges. `.fof-ag-panel-actions` n'avait plus qu'elle — la règle est partie avec, pas de style orphelin. ── ROAD MAP, en lecture ─────────────────────────────────────────────── L'heure d'abord, en bordeaux et en gras ; l'action ensuite, dans un cadre gris. C'est l'inverse d'une ligne `.fof-ag-kv`, et c'est voulu : on ne cherche pas « à quelle heure est le catering », on descend la journée heure par heure. La colonne des heures est FIXE (48 px, relevé sur la maquette) pour que les cadres s'alignent, quelle que soit l'heure. Le cadre lit `--fof-r-sm` : ce sont de petites boîtes empilées, pas des blocs de contenu — la note et le contact gardent `--fof-r-md`. Le retrait vertical est --fof-sp-2 et non un 6 px écrit sur place : mesure faite, il rend une ligne de 31 px là où la maquette en donne 33, quand 6 px n'en rendait que 27. Le plus proche des deux EST sur l'échelle. */ .fof-ag-rm{display:flex;flex-direction:column;gap:var(--fof-sp-2);} .fof-ag-rm-row{display:flex;align-items:center;gap:var(--fof-sp-2);} .fof-ag-rm-time{flex:0 0 calc(48 * var(--fof-px));font-weight:700;color:var(--fof-primary);} .fof-ag-rm-act{flex:1;min-width:0;background:var(--fof-surface-2); border-radius:var(--fof-r-sm);color:var(--fof-ink-2); padding:var(--fof-sp-2) var(--fof-sp-3);} /* ── LINE UP : combien ont répondu ────────────────────────────────────── Une barre et un compte, dans le même cadre gris que le reste des blocs de la fiche. La barre est la seule de l'application ; elle est faite de deux boîtes, la piste et son remplissage, et c'est le GABARIT qui donne la largeur du second — un pourcentage n'est pas une valeur de feuille de style, il se calcule. 6 px d'épaisseur : la maquette en donne 5,2 ; six se divise en deux pour le rayon et reste visible sur un écran de téléphone. */ .fof-ag-lineup-head{display:flex;align-items:center;gap:var(--fof-sp-3); background:var(--fof-surface-2);border-radius:var(--fof-r-md); padding:var(--fof-sp-3);margin-bottom:var(--fof-sp-2);} .fof-ag-lineup-bar{flex:1;min-width:0;height:calc(6 * var(--fof-px)); border-radius:calc(3 * var(--fof-px));background:var(--fof-border);overflow:hidden;} .fof-ag-lineup-bar > span{display:block;height:100%;border-radius:inherit; background:var(--fof-primary);} /* ── Itinéraire, dans la fiche en LECTURE ─────────────────────────────── Le carré est REMPLI depuis le 2026-08-28 (maquettes de lecture) : c'est le geste qu'on vient chercher quand on ouvre la fiche le jour même, et un carré blanc bordé se perdait sur une carte blanche. Il prend donc le dégradé d'action, comme tout ce qui se remplit dans l'application — et le bleu par `is-info` sur une répétition. Il n'est plus retiré au-delà de 1101 px : ces écrans servent les deux largeurs, la colonne de droite de l'ordinateur comprise (décision d'Etienne, 2026-08-28). Il n'a plus de marge non plus — c'est son conteneur qui le centre. Sa taille ne bouge pas : 56 px, la mesure de la maquette, bien au-delà des 44 px de cible minimale. */ .fof-ag-panel-gps{display:flex;width:calc(56 * var(--fof-px));height:calc(56 * var(--fof-px)); flex:0 0 calc(56 * var(--fof-px));align-items:center;justify-content:center; border:none;border-radius:var(--fof-r-md); background:var(--fof-primary-degrade);color:var(--fof-on-primary);text-decoration:none; transition:background .12s;} .fof-ag-panel-gps:hover{background:var(--fof-primary-hover);} .fof-ag-panel-gps.is-info{background:var(--fof-info-degrade);} .fof-ag-panel-gps.is-info:hover{background:var(--fof-info);} /* Ce qui l'entoure. Sur une répétition : rien, le carré est seul et centré. Sur une DATE : une pilule bordée qui annonce l'heure du get-in à sa gauche — « GET-IN 15:00 », en Bebas, à la taille du titre de carte. C'est le titre de SA carte, pas le libellé d'un bouton parmi d'autres. Une seule balise dans le gabarit pour les deux cas : `is-pill` porte le cadre, et l'icône n'est écrite qu'une fois. */ .fof-ag-getin{display:flex;align-items:center;justify-content:center;gap:var(--fof-sp-5);} .fof-ag-getin.is-pill{border:1px solid var(--fof-primary);border-radius:var(--fof-r-md); padding:calc(6 * var(--fof-px)) var(--fof-sp-5);} .fof-ag-getin-label{font-family:var(--police-titre);font-size:var(--fof-t-titre-carte); font-weight:400;line-height:1;color:var(--fof-primary);} /* ── Le pied de la fiche : qui l'a créée, qui l'a modifiée ────────────── Hors carte, sur le fond de l'écran, sous un filet. C'est un repère, pas une information de travail : il se lit en dernier, et il ne mérite ni cadre ni surface à lui. Les deux lignes sont des `.fof-t-hint`, la mention grise déjà employée par l'écran de modification d'une répétition. */ .fof-ag-stamp{margin-top:var(--fof-sp-5);padding-top:var(--fof-sp-4); border-top:1px solid var(--fof-border-soft); display:flex;flex-direction:column;gap:var(--fof-sp-2);} /* ══════════════════════════════════════════════════════════════════════ CRÉER / MODIFIER UNE RÉPÉTITION (maquettes REPETITION_Create du 2026-08-27) ---------------------------------------------------------------------- Ce n'est plus une fenêtre posée sur l'écran : c'est un ÉCRAN. Au téléphone il prend toute la surface, sur ordinateur toute la zone de contenu — la barre du haut et le menu de gauche restent en place, comme sur la capture. La bascule elle-même n'est pas ici : elle est portée par `.is-fullpage` (feuille 3 pour le téléphone, feuille 6 pour l'ordinateur), commune aux trois formulaires pleine page de l'application. Trois blocs, et le MÊME gabarit sert les deux largeurs — seule leur mise en place change : • `.fof-rf-head` l'identité : le carré d'icône et le titre ; • `.fof-rf-body` le formulaire, la seule partie qui défile ; • `.fof-rf-acts` Annuler et Enregistrer. Au téléphone les trois s'empilent et les actions tombent en bas de l'écran (le corps prend la place, elles suivent). Sur ordinateur l'en-tête et les actions partagent la première ligne, le formulaire tient la seconde : deux dispositions, une seule suite de balises, aucun bouton écrit deux fois. ══════════════════════════════════════════════════════════════════════ */ .fof-rf-head{flex:0 0 auto;display:flex;flex-direction:column;align-items:center; gap:var(--fof-sp-3);padding:var(--fof-sp-5) var(--fof-sp-5) 0;} .fof-rf-ident{display:flex;align-items:center;gap:var(--fof-sp-3);min-width:0;} /* `line-height:1` sur le titre, pour la même raison qu'en haut de la barre (`.fof-hd-h1`, feuille 2) : Bebas a des métriques verticales bien plus hautes que sa taille de police. Sans cette ligne, un titre de 33,8 px se réserve une bande de 53, l'en-tête gagne vingt pixels de vide que la maquette ne montre pas, et tout le formulaire descend d'autant. */ .fof-rf-ident .fof-ag-h1{line-height:1;} /* Le carré d'icône du titre. Il portait jusqu'ici un fond --fof-info-soft et une icône --fof-info, écrits en clair dans le gabarit ; les maquettes le veulent REMPLI. C'est la seule surface pleine de l'en-tête, et elle ne porte pas de texte — le trait blanc de l'icône y suffit. Par défaut il prend les couleurs de l'APPLICATION : c'est ce que demande la maquette de l'évènement, et c'est le bon défaut — le bleu est la couleur d'UNE famille d'écrans, pas celle du gabarit. La répétition le réclame donc par `is-info`, exactement comme ses deux boutons (`.fof-btn-primary.is-info`, feuille 3) : un seul modificateur, la même habitude partout. */ .fof-rf-icon{flex:0 0 auto;width:calc(32 * var(--fof-px));height:calc(32 * var(--fof-px)); display:flex;align-items:center;justify-content:center; border-radius:var(--fof-r-sm); background:var(--fof-primary-degrade);color:var(--fof-on-primary);} .fof-rf-icon.is-info{background:var(--fof-info-degrade);} /* L'air sous le titre est --fof-sp-8, et lui seul : Etienne a descendu le formulaire de 41 px sur la maquette du téléphone (2026-08-27) pour dégager le titre. Le même cran sert sur ordinateur, où il tombe sous le filet. */ .fof-rf-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; padding:var(--fof-sp-8) var(--fof-sp-5) var(--fof-sp-5);} /* La colonne de saisie garde EXACTEMENT la largeur qu'elle avait dans la fenêtre : 440 px moins ses deux retraits. Rien ne s'étire parce que la fenêtre s'est agrandie — un champ « Titre » large de 1 400 px ne se remplirait pas mieux. Sur ordinateur elle se centre dans la carte. */ .fof-rf-form{display:flex;flex-direction:column;gap:var(--fof-sp-5); width:100%;max-width:calc(440 * var(--fof-px));margin:0 auto;} /* La note est plus HAUTE que le champ qui grandit ailleurs dans l'application : les deux maquettes lui donnent 384 unités, soit 130 px au téléphone et 169 sur ordinateur, contre 64 px de départ partout ailleurs. 132 × --fof-px rend 132 et 165 — les deux largeurs d'un seul nombre. Elle continue de grandir avec son texte à partir de là ; c'est le point de DÉPART qui change, pas la mécanique. */ .fof-rf-form .fof-grow > textarea, .fof-rf-form .fof-grow::after{min-height:calc(132 * var(--fof-px));} /* Date et Heure : deux parts ÉGALES, comme sur les deux maquettes. */ .fof-rf-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--fof-sp-6);} /* Le bleu jusque dans le focus : sur ces écrans-là, rien n'est bordeaux. Une seule règle remplace les cinq anneaux qui étaient écrits en clair sur les champs, chacun avec son propre `rgba(31,95,166,.12)`. */ .fof-rf-form .fof-input:focus, .fof-rf-form .fof-tp-field:focus-visible, .fof-rf-form textarea:focus{border-color:var(--fof-info); box-shadow:0 0 0 calc(3 * var(--fof-px)) var(--fof-info-soft);} .fof-rf-form .fof-tp-field:hover{border-color:var(--fof-info);} /* Les deux actions. Au téléphone elles se partagent la largeur à parts égales (maquette mobile) ; sur ordinateur elles reprennent leur largeur naturelle et se calent à droite — c'est dans `6-adaptatif.css`. */ .fof-rf-acts{flex:0 0 auto;display:flex;gap:var(--fof-sp-7); padding:var(--fof-sp-5);} .fof-rf-acts > *{flex:1 1 0;} /* ══════════════════════════════════════════════════════════════════════ CRÉER / MODIFIER UN ÉVÈNEMENT (maquette EVENEMENT_Create_Desktop, 2026-08-27) ---------------------------------------------------------------------- L'écran emprunte à la répétition tout ce qui l'entoure — `.fof-rf-sheet`, son en-tête, son corps qui défile, sa rangée d'actions. Il n'ajoute que ce que la répétition n'a pas : TROIS colonnes au lieu d'une, et deux blocs qui se répètent, la road map et le line up. Ce qui n'est PAS ici, et c'est voulu : la couleur. `.fof-rf-form` porte le bleu du focus, `.fof-ef-form` ne porte rien — les champs retrouvent donc le bordeaux de `.fof-input:focus` (feuille 3), qui est la couleur de l'application. Pas une règle de plus pour dire la même chose. Une seule colonne par défaut : c'est la largeur du téléphone, dont la maquette reste à faire. Les trois colonnes sont dans `6-adaptatif.css`, avec le reste de l'ordinateur. ══════════════════════════════════════════════════════════════════════ */ .fof-ef-form{display:grid;grid-template-columns:minmax(0,1fr); gap:var(--fof-sp-8);align-items:start;} /* Une colonne : les mêmes champs, le même air entre eux que sur l'écran de répétition (--fof-sp-5). Aucune n'est plus large qu'un champ ne se remplit — c'est le plafond de `.fof-rf-form`, repris tel quel. */ .fof-ef-col{display:flex;flex-direction:column;gap:var(--fof-sp-5); min-width:0;max-width:calc(440 * var(--fof-px));} /* Le message d'erreur reste sous les colonnes, sur la largeur d'une seule : plus long, il se lirait d'un bord à l'autre de l'écran. */ .fof-ef-alert{max-width:calc(440 * var(--fof-px));margin-top:var(--fof-sp-5);} /* ── Le ruban 1-2-3-4 ────────────────────────────────────────────────── L'ALLURE du ruban est ici ; le parcours lui-même — quelle étape se voit, dans quel ordre — est dans `6-adaptatif.css`, avec le téléphone, parce qu'il n'existe QUE là. Au-delà de 1101 px le ruban est masqué et les quinze champs sont affichés d'un bloc, en trois colonnes. Quatre carrés reliés par un filet, entre le formulaire et les boutons — dans la zone FIXE du bas, pas à la fin du défilement : sur les quatre maquettes il reste au même endroit quelle que soit la longueur de l'étape. Il prend la gouttière des boutons (--fof-sp-5) et non celle, plus étroite de 10 px, de la maquette : 10 n'est pas sur l'échelle base 4, et le ruban se cale mieux sur les boutons avec lesquels il partage la barre. Le filet est tiré d'un CENTRE de carré à l'autre et passe DERRIÈRE eux — les carrés sont opaques, ils le mangent là où il ne doit pas se voir. C'est un seul trait pour trois intervalles, au lieu de trois traits à placer un par un. */ .fof-ef-steps{flex:0 0 auto;position:relative;display:flex;align-items:center; justify-content:space-between;padding:0 var(--fof-sp-5);} .fof-ef-steps::before{content:"";position:absolute;top:50%; left:calc(var(--fof-sp-5) + 28 * var(--fof-px)); right:calc(var(--fof-sp-5) + 28 * var(--fof-px)); height:calc(2 * var(--fof-px));margin-top:calc(-1 * var(--fof-px)); background:var(--fof-border);} /* 56 px : la maquette en donne 166 unités, et son échelle est de 3 unités par pixel (le carré d'icône du titre et la hauteur d'un champ le disent tous les deux). C'est aussi, au passage, bien au-dessus du plancher tactile de 44 px — un carré de ruban se vise au pouce. */ .fof-ef-step{position:relative;flex:0 0 calc(56 * var(--fof-px)); width:calc(56 * var(--fof-px));height:calc(56 * var(--fof-px));padding:0; display:flex;align-items:center;justify-content:center; border:none;border-radius:var(--fof-r-md); background:var(--fof-etape);color:var(--fof-etape-ink); font-family:var(--police-titre);font-size:var(--fof-t-titre-etape); font-weight:400;letter-spacing:normal;line-height:1;cursor:pointer; transition:background .12s,color .12s;} .fof-ef-step.is-current{background:var(--fof-primary-degrade);color:var(--fof-on-primary);} /* La corbeille du pied, en modification. `.fof-rf-acts > *` étire tout ce qu'il contient à parts égales : le carré à icône, lui, garde sa largeur — c'est ce que montre la maquette, deux boutons plus étroits À CÔTÉ d'elle et non trois tiers. */ .fof-rf-acts > .fof-icon-btn{flex:0 0 auto;} /* ── Road Map ────────────────────────────────────────────────────────── Une ligne = une heure, une action, et le geste qui va avec. Les deux champs gardent les proportions de la maquette (295 et 561 unités, soit 1 pour 1,9) ; le geste prend ce qu'il lui faut, jamais plus. */ .fof-ef-rm{display:flex;flex-direction:column;gap:var(--fof-sp-3);} .fof-ef-rm-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr) auto; gap:var(--fof-sp-3);align-items:center;} /* ── Line Up ─────────────────────────────────────────────────────────── Le poste à gauche, calé à DROITE contre son champ, comme sur la maquette : les dix noms s'alignent alors sur une seule verticale, et l'œil descend la liste sans repartir de la marge à chaque ligne. Le poste n'est pas un `.fof-field-label` : ce n'est pas le libellé du bloc (c'est « Line Up » qui l'est), c'est une valeur en regard d'un champ. Il en prend donc la taille, dans le gris des mentions. Une TROISIÈME colonne est arrivée le 2026-08-28 : la réponse du musicien (« Confirmé », « En attente », « Pas dispo »). Elle se règle ici et nulle part ailleurs — la fiche en lecture l'affiche sans jamais y toucher. Elle prend la largeur du poste, pas celle du nom : c'est un choix entre trois mots, pas une liste de dix personnes. Un poste vide n'affiche pas la troisième cellule ; la grille laisse alors sa colonne libre, ce qui est exactement ce qu'on veut voir — une ligne pas encore pourvue. */ .fof-ef-lu{display:flex;flex-direction:column;gap:var(--fof-sp-3);} .fof-ef-lu-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,1.1fr); gap:var(--fof-sp-3);align-items:center;} .fof-ef-lu-role{text-align:right;min-width:0; font-size:var(--fof-field-size);color:var(--fof-muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* ══════════════════════════════════════════════════════════════════════ BOÎTE MAIL ══════════════════════════════════════════════════════════════════════ */ /* Hauteur de la page Mail : la liste défile pour elle-même, sans emmener la page. Sur téléphone l'en-tête d'écran et le segmenté prennent la place que libère la barre du haut, masquée sur cet écran comme sur l'Agenda — d'où le même retrait aux deux largeurs. */ .fof-mail-page{display:flex;flex-direction:column; height:calc(100vh - 118 * var(--fof-px));min-height:calc(460 * var(--fof-px));} /* ⚠️ `.fof-search` porte `flex:1 1 100%` (et `flex:0 0 280px` au-delà de 760 px) : utile dans la rangée de « Clients », désastreux ici, où le PARENT est une colonne flex — le champ s'étirait sur toute la hauteur et poussait la liste des messages hors de l'écran. À l'Agenda le problème n'existe pas : son parent est un bloc, le `flex` y est ignoré. Ne pas retirer cette règle. Les deux autres blocs du haut sont figés pour la même raison : dans une colonne flex ils pourraient se comprimer. Seul `.fof-mail-body` a le droit de prendre la place restante. */ .fof-mail-page > .fof-ag-top, .fof-mail-page > .fof-seg, .fof-mail-page > .fof-search{flex:0 0 auto;} /* Message ouvert au téléphone : les trois blocs du haut sont RETIRÉS, pas seulement recouverts. Recouverts, ils resteraient atteignables au clavier et annoncés par un lecteur d'écran. Au-delà de 1101 px ils sont déjà masqués par ailleurs (leur contenu vit dans la barre du haut). */ .fof-mail-page.is-reading > .fof-ag-top, .fof-mail-page.is-reading > .fof-seg, .fof-mail-page.is-reading > .fof-search{display:none;} .fof-mail-body{display:flex;flex-direction:column;gap:calc(10 * var(--fof-px));flex:1;min-height:0;} .fof-mail-main{flex:1;min-width:0;display:flex;flex-direction:column; background:var(--fof-surface);border:1px solid var(--fof-border); border-radius:var(--fof-r-lg);overflow:hidden;} /* ── Le titre d'écran EST le sélecteur de dossier (2026-08-23) ──────── Le nom du dossier consulté a pris la place du titre « Boîte mail », et un chevron dit qu'il s'ouvre. Aucun habillage propre : c'est le titre de l'écran (`.fof-ag-h1`) ou celui de la barre du haut (`.fof-hd-h1`), tels quels. Seul le curseur manquait — le titre ne se distinguait en rien d'un titre ordinaire à la souris. La règle porte sur le `role="button"` posé DANS le titre : le `

` reste un `

` pour un lecteur d'écran, et n'importe quel autre écran qui rendrait son titre cliquable en hérite. L'ancien bouton « Réception ▾ » (`.fof-mail-folder-select`), en bordeaux plein en tête de la liste, a été retiré : le titre le remplace. */ .fof-hd-h1 [role="button"], .fof-ag-h1 [role="button"]{cursor:pointer;} .fof-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;} /* ── Choix du client (devis / facture) ──────────────────────────────────── Fermé, `.fof-cli-field` copie AU PIXEL le `