/* ========================================================================== Fantastique OS, direction artistique (§11 du cahier des charges) Bleu nuit, blanc cassé, doré saturé. Une seule famille : Figtree. Règle : l'accent doré ne se dilue jamais sur le fond bleu nuit, or et bleu sont complémentaires, un doré en transparence sur du bleu donne un gris olive. L'accent s'emploie à pleine saturation sur des surfaces réduites. ========================================================================== */ :root { /* La hauteur de la barre d'écran : 44 px de cible tactile plus ses marges. Partagée, parce que le bandeau de mois de la programmation doit tomber exactement dessus. */ --h-barre: 64px; --nuit-900:#060B15; --nuit-800:#0B1322; --nuit-700:#131D31; --nuit-600:#1C2942; --trait:rgba(255,255,255,.07); --trait-fort:rgba(255,255,255,.13); --trait-actif:#5D74A0; --blanc:#F8F7F3; --blanc-doux:#C9D0DE; --blanc-faible:#96A2BA; --or:#F9C846; --or-vif:#FFDC7E; --or-sourd:rgba(249,200,70,.55); --opt:#B3A4FF; --carte:#1E2C47; --carte-vive:#27395B; --erreur:#FF6B85; --alerte:#FFA24C; --succes:#4FCB97; --r1:4px; --r2:8px; --r3:12px; --r4:16px; --r5:24px; --r6:32px; --cible:48px; --ligne:40px; --t-micro:120ms; --t-ecran:240ms; --entree:cubic-bezier(.16,.84,.32,1); --rebond:cubic-bezier(.34,1.56,.64,1); --ui:Figtree,"Segoe UI",system-ui,-apple-system,sans-serif; } * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html, body { height:100%; } body { margin:0; background:var(--nuit-900); color:var(--blanc); font-family:var(--ui); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body.plein { display:flex; flex-direction:column; } button { font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; } input, select { font:inherit; } a { color:var(--or); text-underline-offset:3px; } :focus-visible { outline:3px solid var(--or); outline-offset:2px; border-radius:6px; } /* ---------- verrou ---------- */ .verrou { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--r5); padding:var(--r6) var(--r5); text-align:center; } .marque { font-size:32px; font-weight:800; letter-spacing:-.03em; } .marque em { font-style:normal; color:var(--or); } .sous { color:var(--blanc-faible); margin:0; font-size:14.5px; } .points { display:flex; gap:var(--r3); justify-content:center; height:18px; } .pt { width:14px; height:14px; border-radius:50%; border:2px solid var(--trait-actif); transition:transform var(--t-micro) var(--rebond), background var(--t-micro), border-color var(--t-micro); } .pt.plein { background:var(--or); border-color:var(--or); transform:scale(1.2); } @keyframes secousse { 10%,90%{transform:translateX(-4px)} 30%,70%{transform:translateX(6px)} 50%{transform:translateX(-6px)} } .points.faux { animation:secousse 400ms; } .points.faux .pt { border-color:var(--erreur); background:var(--erreur); } .pave-boite { display:flex; flex-direction:column; align-items:center; gap:var(--r5); } .pave { display:grid; grid-template-columns:repeat(3,86px); gap:var(--r3); } .pave button { height:64px; border-radius:16px; background:var(--nuit-700); border:1px solid var(--trait); font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; transition:transform var(--t-micro) var(--entree), background var(--t-micro); } .pave button:active { transform:scale(.94); background:var(--nuit-600); } .pave button.util { font-size:14px; font-weight:600; color:var(--blanc-doux); background:transparent; border-color:transparent; } .msg-verrou { min-height:22px; font-size:13.5px; color:var(--erreur); } /* ========================================================================== La coque, barre commune à tous les écrans -------------------------------------------------------------------------- Elle ne bouge jamais. C'est sa seule justification : avant, chaque surface avait son propre en-tête, et passer du planning au matériel déplaçait le sélecteur d'univers, faisait disparaître l'accès aux réglages et changeait le bouton de verrouillage d'une icône en libellé. Grille en trois colonnes 1fr / auto / 1fr : les onglets sont centrés sur l'écran, pas posés à la suite de la marque. Un nom d'utilisateur plus long ou une action de plus ne les décale donc pas. ========================================================================== */ /* ---------- barres de défilement ---------- Celle du navigateur est grise, large, et posée sur un fond bleu nuit : elle se voit plus que le contenu qu'elle sert. Les deux écritures ne font pas double emploi et aucune n'est morte : `scrollbar-width` / `scrollbar-color` sont les propriétés standard, comprises par Firefox et par Chrome depuis la version 121 ; la famille `::-webkit-` couvre Safari et les Chrome plus anciens. Là où les deux sont comprises, ce sont les standard qui l'emportent, et elles donnent le même résultat. */ * { scrollbar-width:thin; scrollbar-color:var(--carte-vive) transparent; } ::-webkit-scrollbar { width:11px; height:11px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--carte-vive); border-radius:99px; border:3px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover { background:var(--trait-actif); background-clip:padding-box; } ::-webkit-scrollbar-corner { background:transparent; } .coque { height:100dvh; display:flex; flex-direction:column; overflow:hidden; } /* ---------- confirmation d'une action globale ---------- Vit dans la coque, donc sur tous les écrans, y compris le back-office : d'où un vocabulaire à elle plutôt que celui de `.modale-admin`, qui est scopé sous `.admin` et ne s'appliquerait pas au planning. */ .modale-coque { border:1px solid var(--trait-fort); border-radius:18px; background:var(--nuit-700); color:var(--blanc); padding:var(--r5); max-width:440px; width:calc(100% - 2 * var(--r4)); box-shadow:0 30px 80px -20px #000; } .modale-coque::backdrop { background:rgba(6,11,21,.74); } .modale-coque h2 { font-size:20px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; } .modale-coque .dc-sous { margin:0; font-size:14.5px; color:var(--blanc-doux); line-height:1.5; } .dc-pied { display:flex; flex-wrap:wrap; gap:var(--r3); justify-content:flex-end; margin-top:var(--r5); } .dc-pied button { min-height:48px; padding:0 var(--r4); border-radius:12px; font-size:15px; font-weight:700; transition:transform var(--t-micro); } .dc-pied button:active { transform:scale(.97); } .dc-annul { border:1px solid var(--trait-actif); color:var(--blanc-doux); } .dc-ok { background:var(--or); color:var(--nuit-900); } .coque-haut { flex:none; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--r3); padding:7px var(--r3); background:var(--nuit-800); border-bottom:1px solid var(--trait-fort); } .coque-marque { justify-self:start; display:inline-flex; align-items:center; min-height:44px; padding:0 8px; border-radius:11px; font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--blanc); text-decoration:none; white-space:nowrap; transition:background var(--t-micro); } .coque-marque em { font-style:normal; color:var(--or); } .coque-marque:hover { background:var(--nuit-700); } /* ---------- onglets d'univers, grand écran ---------- */ .coque-onglets { justify-self:center; display:flex; gap:3px; padding:3px; background:var(--nuit-900); border:1px solid var(--trait); border-radius:14px; } .coque-onglets a { /* 44 px : les onglets restent affichés jusqu'à 820 px, donc sur tablette, où ils se touchent au doigt. */ min-height:44px; display:inline-flex; align-items:center; gap:8px; padding:0 var(--r4); border-radius:11px; text-decoration:none; white-space:nowrap; font-size:14.5px; font-weight:600; color:var(--blanc-faible); border:1px solid transparent; transition:background var(--t-micro), color var(--t-micro), border-color var(--t-micro); } .coque-onglets a svg { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .coque-onglets a:hover { color:var(--blanc); background:var(--nuit-700); } .coque-onglets a[aria-current="page"] { background:var(--nuit-600); color:var(--blanc); border-color:var(--or-sourd); } .coque-onglets a[aria-current="page"] svg { stroke:var(--or); } /* ---------- identité et actions ---------- */ .coque-droite { justify-self:end; display:flex; align-items:center; gap:6px; min-width:0; } .identite { display:flex; flex-direction:column; justify-content:center; align-items:flex-end; min-height:44px; padding:0 var(--r3); border-radius:11px; min-width:0; background:var(--nuit-700); border:1px solid var(--trait-fort); } .identite .qui-nom { font-size:13.5px; font-weight:700; color:var(--blanc); line-height:1.2; max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .identite .qui-lieu { font-size:11px; font-weight:600; color:var(--or); line-height:1.2; letter-spacing:.04em; max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .coque-icone { width:44px; height:44px; flex:none; border-radius:11px; display:grid; place-items:center; border:1px solid transparent; color:var(--blanc-doux); transition:background var(--t-micro), border-color var(--t-micro), transform var(--t-micro); } .coque-icone svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .coque-icone:hover { background:var(--nuit-700); color:var(--blanc); } .coque-icone:active { transform:scale(.92); } .coque-icone[aria-current="page"] { background:var(--nuit-600); border-color:var(--or-sourd); color:var(--or); } .coque-droite form { display:contents; } /* ---------- la zone de l'univers ---------- */ /* `overflow-y:auto` : les écrans longs (réglages, inventaire) défilent ici. Le planning, lui, est un enfant `flex:1; min-height:0` : il occupe la hauteur disponible exactement et ne déclenche donc jamais ce défilement. */ /* `scrollbar-gutter` réserve la place de la barre de défilement même quand la page est courte : sans elle, passer d'un écran qui défile à un écran qui ne défile pas décale tout le contenu d'une quinzaine de pixels. */ .coque-corps { flex:1; min-height:0; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; } /* ---------- barre du bas, petit écran ---------- */ .coque-bas { display:none; } @media (max-width:820px) { .coque-onglets { display:none; } .coque-haut { grid-template-columns:1fr auto; padding:6px var(--r2); } .coque-bas { flex:none; display:flex; align-items:stretch; background:var(--nuit-800); border-top:1px solid var(--trait-fort); padding-bottom:env(safe-area-inset-bottom); } .coque-bas a { position:relative; flex:1; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; font-size:11.5px; font-weight:600; color:var(--blanc-faible); } .coque-bas a svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .coque-bas a[aria-current="page"] { color:var(--or); } /* repère court et centré : un trait sur toute la largeur de l'onglet se confondait avec la séparation de la barre juste au-dessus */ .coque-bas a[aria-current="page"]::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:30px; height:3px; border-radius:0 0 3px 3px; background:var(--or); } .identite .qui-nom { max-width:12ch; } } @media (max-width:420px) { .identite { padding:0 10px; } .identite .qui-nom { max-width:9ch; } .coque-marque { font-size:15px; padding:0 4px; } } /* ---------- barre d'application ---------- */ /* `min-height` et non une hauteur libre : sur une borne, la barre de la fiche se vide de son titre mais doit garder sa place, sinon la fiche remonte de soixante pixels et perd la ligne d'horizon commune à tous les écrans. C'est aussi cette valeur que reprend le bandeau de mois de la bande. */ .barre { display:flex; align-items:center; gap:6px; padding:11px var(--r3) 9px; flex:none; min-height:var(--h-barre); } .icone-b { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none; transition:background var(--t-micro), transform var(--t-micro); } .icone-b:active { transform:scale(.9); background:var(--nuit-600); } .icone-b svg { width:21px; height:21px; stroke:var(--blanc-doux); fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; } /* Les deux flèches de navigation, accolées en un seul bloc à place fixe. Elles n'avaient aucune surface : deux chevrons flottant sur le fond, qu'on ne repérait qu'en les cherchant. Elles ont maintenant un cadre, un fond, et 48 px de côté. */ .pas { display:flex; flex:none; border:1px solid var(--trait-fort); border-radius:13px; overflow:hidden; background:var(--nuit-700); } .pas .icone-b { width:50px; height:46px; border-radius:0; } .pas .icone-b + .icone-b { border-left:1px solid var(--trait-fort); } .pas .icone-b:hover { background:var(--nuit-600); } .pas .icone-b:active { transform:none; background:var(--carte); } .pas .icone-b svg { width:23px; height:23px; stroke:var(--blanc); stroke-width:2.4; } /* `flex:1` : le titre absorbe la place restante, ce qui pousse « Aujourd'hui » contre le bord droit, où il ne bouge plus non plus. Les flèches sont avant lui, donc rien de ce sur quoi on clique ne dépend de la longueur du mois. */ .titre-mois { display:flex; flex-direction:column; align-items:flex-start; gap:3px; justify-content:center; padding:6px var(--r3); border-radius:12px; flex:1; min-width:0; min-height:var(--cible); transition:background var(--t-micro); } .titre-mois:active { background:var(--nuit-600); } /* Même présentation que le titre du planning, mais purement informative : un écran d'univers annonce ce qu'il est, au même endroit et à la même taille partout. */ .titre-univers { display:flex; flex-direction:column; align-items:flex-start; gap:3px; justify-content:center; padding:6px var(--r3); flex:1; min-width:0; min-height:var(--cible); } .titre-univers .m { font-size:21px; font-weight:800; letter-spacing:-.025em; line-height:1.1; } .titre-univers .s { font-size:13.5px; font-weight:500; color:var(--blanc-doux); } /* Le titre du matériel n'a plus de voisin dans sa barre : il se centre sur la largeur, au-dessus du champ auquel il pose la question, et grossit un peu puisque plus rien ne se dispute la place. */ .barre.titre-seul { padding:var(--r6) var(--r3) var(--r3); } .titre-univers.centre { align-items:center; text-align:center; } .titre-univers.centre .m { font-size:26px; } .titre-univers.centre .s { font-size:14px; } @media (max-width:560px) { .titre-univers.centre .m { font-size:22px; } } .titre-mois .m { font-size:23px; font-weight:800; letter-spacing:-.025em; line-height:1.05; display:flex; align-items:center; gap:7px; white-space:nowrap; } .titre-mois .m::first-letter { text-transform:uppercase; } .titre-mois .m svg { width:16px; height:16px; stroke:var(--or); fill:none; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; } .titre-mois .s { font-size:13.5px; font-weight:500; color:var(--blanc-doux); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .b-plat { min-height:44px; padding:0 var(--r3); border-radius:12px; background:var(--nuit-700); border:1px solid var(--trait-fort); font-size:14px; font-weight:600; color:var(--blanc-doux); flex:none; display:inline-flex; align-items:center; gap:7px; transition:background var(--t-micro), transform var(--t-micro); } .b-plat { text-decoration:none; } /* Le pendant doré de `.b-plat` : même gabarit, même seuil tactile, sans le `flex:1` de `.principal` qui est fait pour le pied d'un formulaire. Il doit marcher sur un lien autant que sur un bouton, d'où le `text-decoration`. */ .b-fort { min-height:44px; padding:0 var(--r4); border-radius:12px; background:var(--or); color:var(--nuit-900); border:1px solid var(--or); font-size:14.5px; font-weight:700; flex:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; transition:background var(--t-micro), transform var(--t-micro); } .b-fort:active { transform:scale(.95); background:var(--or-vif); } .b-fort svg { stroke:var(--nuit-900); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } .b-plat:active { transform:scale(.95); background:var(--nuit-600); } /* ---------- borne : identification au moment de l'action ---------- */ .lieu-borne { display:inline-flex; align-items:center; min-height:44px; padding:0 var(--r3); border-radius:11px; background:var(--nuit-700); border:1px solid var(--trait-fort); font-size:13.5px; font-weight:700; color:var(--or); white-space:nowrap; max-width:26ch; overflow:hidden; text-overflow:ellipsis; } /* L'échappatoire d'une borne : présente pour dépanner, discrète pour ne pas inviter tout le monde à ouvrir une session sur la tablette du hall. */ .coque-icone.discret { opacity:.42; } .coque-icone.discret:hover, .coque-icone.discret:focus-visible { opacity:1; } /* La même échappatoire, quand il n'y a plus de barre du tout : une borne à univers unique montre son écran plein cadre. La cible reste à 44 px : c'est discret à l'œil, pas au doigt. */ .echappatoire { position:fixed; z-index:15; top:6px; right:6px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--blanc-faible); opacity:.28; transition:opacity var(--t-ecran); } .echappatoire svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .echappatoire:hover, .echappatoire:focus-visible { opacity:1; color:var(--or); } /* Une identification passagère se voit : sinon on croit avoir ouvert une session, on pose la tablette, et on s'étonne de devoir retaper son code. */ .identite.passagere { border-color:var(--or-sourd); background:var(--carte); } .identite.passagere .qui-lieu { color:var(--or); } .modale-pave { position:fixed; z-index:40; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96); width:min(360px, calc(100% - 2 * var(--r4))); background:var(--nuit-800); border:1px solid var(--or-sourd); border-radius:22px; padding:var(--r5) var(--r4) var(--r4); text-align:center; box-shadow:0 30px 90px -20px #000; /* `visibility` et pas seulement `opacity` : un pavé transparent resterait dans l'ordre de tabulation et dans l'arbre d'accessibilité, douze boutons de chiffres invisibles avant d'atteindre le formulaire, et un dialogue annoncé en permanence. Elle est dans la transition pour que le fondu d'entrée subsiste. */ opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--t-ecran), transform var(--t-ecran) var(--entree), visibility 0s linear var(--t-ecran); } .modale-pave.on { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,-50%) scale(1); transition-delay:0s; } .modale-pave h4 { margin:0 0 4px; font-size:20px; font-weight:800; letter-spacing:-.02em; } .modale-pave .mp-sous { margin:0 0 var(--r4); font-size:13.5px; color:var(--blanc-doux); } .modale-pave .pave-boite { display:flex; flex-direction:column; align-items:center; gap:var(--r3); } /* `.m-annul` ne porte qu'une bordure et une couleur : sa taille vient de `.modale .bt button`, qui ne s'applique pas ici. Sans ces lignes, le bouton d'annulation du pavé est un mot souligné de 18 px de haut, au doigt, sur une tablette, c'est une cible manquée sur deux. */ .modale-pave .m-annul { margin-top:var(--r4); min-height:44px; padding:0 var(--r5); border-radius:14px; font-weight:600; font-size:15px; transition:transform var(--t-micro); } .modale-pave .m-annul:active { transform:scale(.97); } /* Tant que le pavé est ouvert, ce qu'il y a derrière s'estompe : le formulaire reste lisible : c'est ce qu'on est en train de signer, mais cesse d'être la chose la plus contrastée de l'écran. */ .panneau.sous-pave { filter:brightness(.55) saturate(.7); transition:filter var(--t-ecran); } /* ---------- calendrier ---------- */ /* La hauteur de la fenêtre appartient à la coque ; l'univers occupe ce qui reste. C'est ce qui permet au planning de recalculer ses 18 lignes pour qu'elles tiennent sans défilement, quelle que soit la barre au-dessus. */ .appli { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; position:relative; } /* Le planning tient dans la fenêtre et fait défiler son calendrier lui-même ; le matériel, lui, s'allonge avec ses résultats et laisse la page défiler. */ .appli.libre { flex:0 0 auto; overflow:visible; } .cal-wrap { --colw:138px; flex:1; min-height:0; overflow:auto; position:relative; margin:0 var(--r3); border-radius:18px 18px 0 0; background:var(--nuit-700); } .cal-head, .cal-body { display:grid; } .cal-wrap[data-mode="semaine"] .cal-head, .cal-wrap[data-mode="semaine"] .cal-body { grid-template-columns:50px repeat(7,minmax(var(--colw),1fr)); min-width:calc(50px + 7 * var(--colw)); } .cal-wrap[data-mode="jour"] .cal-head, .cal-wrap[data-mode="jour"] .cal-body { grid-template-columns:46px 1fr; min-width:0; } .cal-wrap[data-mode="jour"] .cal-head { display:none; } .cal-head { position:sticky; top:0; z-index:4; background:var(--nuit-700); box-shadow:0 1px 0 var(--trait-fort); } .cal-head .coin { position:sticky; left:0; z-index:5; background:var(--nuit-700); } .jt { padding:8px 5px 9px; display:flex; flex-direction:column; align-items:center; gap:5px; } .jt .d { font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blanc-faible); font-weight:600; line-height:1; } .jt .n { font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.02em; padding:5px 9px; border-radius:99px; } .jt[data-auj="oui"] .d { color:var(--or); } .jt[data-auj="oui"] .n { color:var(--nuit-900); background:var(--or); } .gouttiere { position:sticky; left:0; z-index:3; background:var(--nuit-700); } .gh { height:var(--ligne); font-size:10.5px; color:var(--blanc-faible); font-variant-numeric:tabular-nums; text-align:right; padding:6px 10px 0 0; font-weight:500; } .col { position:relative; box-shadow:inset 1px 0 0 var(--trait); } .col[data-auj="oui"] { background:rgba(249,200,70,.045); } .cell { display:block; width:100%; height:var(--ligne); box-shadow:inset 0 -1px 0 var(--trait); transition:background var(--t-micro); } .cell:hover { background:rgba(255,255,255,.045); } .cell:active { background:rgba(249,200,70,.12); } .maintenant { position:absolute; left:0; right:0; height:0; z-index:2; pointer-events:none; border-top:2px solid var(--or); } .maintenant::before { content:''; position:absolute; left:-4px; top:-5px; width:8px; height:8px; border-radius:50%; background:var(--or); } .strip { display:none; padding:0 var(--r3) 9px; flex:none; } .appli[data-mode="jour"] .strip { display:block; } .g-jours { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; } .j-chip { min-height:48px; border-radius:11px; border:1px solid var(--trait-fort); background:var(--nuit-700); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--blanc-doux); transition:transform var(--t-micro) var(--entree), background var(--t-micro), border-color var(--t-micro), color var(--t-micro); } .j-chip:active { transform:scale(.94); } .j-chip .jn { font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; opacity:.85; line-height:1; } .j-chip .jd { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.02em; } .j-chip[aria-pressed="true"] { background:var(--or); border-color:var(--or); color:var(--nuit-900); } .j-chip .auj-pt { width:5px; height:5px; border-radius:50%; background:var(--or); margin-top:1px; } .j-chip[aria-pressed="true"] .auj-pt { background:var(--nuit-900); } .ev { position:absolute; border-radius:10px; padding:6px 8px; overflow:hidden; text-align:left; font-size:12px; line-height:1.3; background:var(--carte); border:1.5px solid var(--or); color:var(--blanc); box-shadow:0 2px 8px -4px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:1px; transition:transform var(--t-micro) var(--entree), background var(--t-micro); animation:evIn 300ms var(--entree) backwards; } @keyframes evIn { from{opacity:0; transform:translateY(5px) scale(.97)} to{opacity:1; transform:none} } .ev:active { transform:scale(.97); } .ev:hover { background:var(--carte-vive); border-color:var(--or-vif); } .ev[data-etat="brouillon"] { border:1.5px dashed var(--opt); } .ev[data-etat="brouillon"] .t { color:var(--opt); } .ev .t { font-weight:600; letter-spacing:-.01em; overflow-wrap:break-word; hyphens:auto; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .ev .h { color:var(--blanc-doux); font-variant-numeric:tabular-nums; font-size:11px; font-weight:500; white-space:nowrap; } .ev .e { color:var(--blanc-doux); font-size:10.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ev .badge { align-self:flex-start; margin-top:1px; font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--opt); } .ev[data-dense="oui"] { padding:5px 4px; font-size:9.5px; gap:0; } .ev[data-dense="oui"] .t { -webkit-line-clamp:3; line-height:1.28; letter-spacing:-.035em; } .ev[data-dense="oui"] .h { font-size:9.5px; margin-top:2px; letter-spacing:-.02em; } .ev[data-min="oui"] { flex-direction:row; align-items:baseline; gap:5px; padding:4px 6px; } .ev[data-min="oui"] .t { -webkit-line-clamp:1; flex:1; min-width:0; } .pied { padding:9px var(--r4) 11px; display:flex; gap:var(--r3); flex:none; background:var(--nuit-800); } .principal { flex:1; min-height:46px; border-radius:13px; background:var(--or); color:var(--nuit-900); font-size:15.5px; font-weight:700; letter-spacing:-.015em; display:flex; align-items:center; justify-content:center; gap:9px; transition:transform var(--t-micro) var(--entree), background var(--t-micro); } .pied .principal { max-width:380px; margin:0 auto; } .principal:active { transform:scale(.97); background:var(--or-vif); } .principal[disabled] { background:transparent; color:var(--blanc-faible); border:1px solid var(--trait-actif); cursor:not-allowed; } .principal[disabled] svg { stroke:var(--blanc-faible); } .principal svg { width:19px; height:19px; stroke:var(--nuit-900); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } /* Le bouton pendant l'aller-retour vers Odoo. Il garde ses couleurs d'action plutôt que celles d'un bouton désactivé : il travaille, il n'est pas hors service, et le griser dirait le contraire de ce qu'il fait. L'anneau est en `::before` pour ne rien devoir au HTML, et le bouton garde la largeur mesurée avant le clic, sinon la barre d'actions se réorganise sous le doigt au pire moment. */ /* Il sert au bouton doré de l'enregistrement comme au bouton plat de la synchronisation : il ne fixe donc aucune couleur et garde celles du bouton. L'anneau se dessine en `currentColor`, ce qui le rend juste sur un fond doré comme sur un fond sombre, sans une règle par variante. */ button.occupe[disabled] { cursor:progress; opacity:.9; } .principal.occupe[disabled] { background:var(--or); color:var(--nuit-900); border:none; } button.occupe::before { content:""; width:15px; height:15px; margin-right:9px; flex:none; /* La première déclaration est le repli : `color-mix` demande un navigateur récent, et sans elle l'anneau serait invisible sur les anciens. */ border:2px solid rgba(128,128,128,.35); border:2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color:currentColor; border-radius:50%; animation:tourne .7s linear infinite; } @keyframes tourne { to { transform:rotate(360deg); } } /* Une animation qui tourne sans fin est exactement ce que ce réglage vise. Le bouton reste alors marqué, sans bouger. */ @media (prefers-reduced-motion: reduce) { button.occupe::before { animation:none; border-top-color:currentColor; opacity:.5; } } /* ---------- voile, panneaux, modale ---------- */ .voile { position:fixed; inset:0; background:rgba(6,11,21,.74); z-index:20; opacity:0; pointer-events:none; transition:opacity var(--t-ecran); } .voile.on { opacity:1; pointer-events:auto; } .panneau { position:fixed; left:0; right:0; bottom:0; z-index:21; background:var(--nuit-800); border-top:1px solid var(--or-sourd); border-radius:24px 24px 0 0; max-height:97%; display:none; flex-direction:column; box-shadow:0 -24px 70px -24px #000; } .panneau.on { display:flex; animation:monte var(--t-ecran) var(--entree); } @keyframes monte { from{transform:translateY(26px); opacity:0} to{transform:none; opacity:1} } .p-tete { display:flex; align-items:center; gap:var(--r2); padding:14px var(--r4) 12px; flex:none; box-shadow:0 1px 0 var(--trait); } .p-tete h3 { font-size:23px; font-weight:800; margin:0; letter-spacing:-.025em; flex:1; min-width:0; } .p-corps { overflow-y:auto; padding:20px var(--r4) 12px; display:grid; gap:20px var(--r6); align-content:start; } @media (min-width:760px) { .p-corps { grid-template-columns:1fr 1fr; padding:20px var(--r5) 14px; max-width:1100px; margin:0 auto; width:100%; } .p-corps > .large { grid-column:1 / -1; } } .bloc { display:flex; flex-direction:column; gap:var(--r3); min-width:0; } .etiquette { font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--blanc-faible); font-weight:600; } .saisie { width:100%; min-height:56px; padding:0 var(--r4); border-radius:14px; border:1px solid var(--trait-actif); background:var(--nuit-700); color:var(--blanc); font-size:16.5px; font-weight:600; outline:none; transition:border-color var(--t-micro), background var(--t-micro); } .saisie::placeholder { color:var(--blanc-faible); font-weight:400; } .saisie:focus { border-color:var(--or); background:var(--nuit-600); } /* L'icône de calendrier, et la leçon qu'elle a coûtée deux fois. `color-scheme:dark` fait déjà deux choses : il rend le calendrier déroulant du navigateur en sombre, ET il dessine le pictogramme du champ en clair. Le `filter:invert()` posé par-dessus, censé éclaircir une icône noire, la **renoircissait** donc : deux corrections justes séparément, fausses ensemble, et le symptôme était exactement celui qu'on croyait avoir réparé. On ne corrige plus l'icône du système, on la remplace par la nôtre, dessinée dans la couleur du texte. Elle ne dépend alors d'aucun réglage du navigateur. Firefox ignore ce pseudo-élément et garde l'icône claire de `color-scheme`. */ input[type="date"], input[type="datetime-local"] { color-scheme:dark; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { width:18px; height:18px; cursor:pointer; opacity:.75; filter:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9D0DE' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4.6' width='18' height='16.4' rx='2'/%3E%3Cpath d='M3 9.6h18M8 2.8v3.6M16 2.8v3.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:18px 18px; } input[type="date"]:hover::-webkit-calendar-picker-indicator, input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator { opacity:1; } /* Un nombre de colonnes figé (9, puis 6) tient sur un écran large et casse ailleurs : sur une tablette en portrait, où le formulaire passe à deux colonnes vers 800 px, chaque pastille d'heure tombait à 36 px de large. On laisse donc la grille se replier plutôt que se comprimer, 46 px est la largeur en dessous de laquelle « 12h » n'est plus une cible, seulement une étiquette. */ .g-heures, .g-durees { display:grid; grid-template-columns:repeat(auto-fit,minmax(46px,1fr)); gap:5px; } .mini { min-height:48px; border-radius:11px; border:1px solid var(--trait-fort); background:var(--nuit-700); color:var(--blanc-doux); font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; display:flex; align-items:center; justify-content:center; padding:0 2px; transition:transform var(--t-micro) var(--entree), background var(--t-micro), border-color var(--t-micro), color var(--t-micro); } .mini:active { transform:scale(.93); } .mini[aria-pressed="true"] { background:var(--or); border-color:var(--or); color:var(--nuit-900); } /* l'indisponibilité n'est jamais portée par la seule couleur (§11.7) */ .mini[disabled] { cursor:not-allowed; color:var(--blanc-faible); opacity:.45; border-style:dashed; background:transparent; text-decoration:line-through; text-decoration-thickness:1px; } /* Occupé, mais ouvert à qui a le droit de superposer. Le trait discontinu dit « pris », comme sur un créneau fermé, et c'est voulu : l'information est la même. Ce qui change est qu'on peut le prendre, donc ni le texte barré, qui annonce un choix impossible, ni l'opacité de la version fermée, qui le sort du regard. La bordure d'alerte porte la nuance, et la question se pose à l'enregistrement, où l'on saura par-dessus quoi l'on passe. */ .mini.occupe-mais, .esp.occupe-mais { border-style:dashed; border-color:var(--alerte); } .mini.occupe-mais { color:var(--alerte); } .mini.occupe-mais[aria-pressed="true"], .esp.occupe-mais[aria-pressed="true"] { border-color:var(--or); } .mini.occupe-mais[aria-pressed="true"] { color:var(--nuit-900); } .espaces { display:flex; flex-direction:column; gap:6px; } .esp { display:flex; align-items:center; gap:var(--r3); text-align:left; width:100%; min-height:56px; padding:7px var(--r3); border-radius:14px; border:1px solid var(--trait-fort); background:var(--nuit-700); transition:transform var(--t-micro) var(--entree), border-color var(--t-micro), background var(--t-micro); } .esp:active { transform:scale(.99); } .esp[aria-pressed="true"] { border-color:var(--or); background:var(--carte); } .esp[disabled] { opacity:.5; cursor:not-allowed; border-style:dashed; } .esp .case { width:26px; height:26px; border-radius:9px; flex:none; border:2px solid var(--trait-actif); display:grid; place-items:center; transition:background var(--t-micro), border-color var(--t-micro), transform var(--t-micro) var(--rebond); } .esp[aria-pressed="true"] .case { background:var(--or); border-color:var(--or); transform:scale(1.1); } .esp .case svg { width:15px; height:15px; stroke:var(--nuit-900); stroke-width:3.2; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity var(--t-micro); } .esp[aria-pressed="true"] .case svg { opacity:1; } .esp .txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .esp .nom { font-weight:600; font-size:15.5px; letter-spacing:-.01em; } .esp .det { font-size:12.5px; color:var(--blanc-doux); } .esp .det.occ { color:var(--alerte); } .esp.tout { border-style:dashed; border-color:var(--or-sourd); } .duo { display:flex; gap:var(--r3); } .duo > button { flex:1; min-height:58px; margin:0; max-width:none; } .brouillon { border-radius:15px; border:1px solid var(--trait-actif); background:var(--nuit-700); color:var(--blanc); font-size:15.5px; font-weight:600; letter-spacing:-.015em; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform var(--t-micro) var(--entree), background var(--t-micro); } .brouillon:active { transform:scale(.97); background:var(--nuit-600); } .brouillon[disabled] { opacity:.4; cursor:not-allowed; } .brouillon svg { width:18px; height:18px; stroke:var(--opt); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } @media (max-width:600px) { .duo { flex-direction:column-reverse; } } .fiche { display:flex; flex-direction:column; gap:11px; margin:0; } .fiche .l { display:flex; gap:var(--r3); font-size:14.5px; align-items:baseline; } .fiche .l dt { color:var(--blanc-faible); min-width:104px; flex:none; margin:0; } .fiche .l dd { margin:0; font-weight:600; } .marqueur { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:6px 13px; border-radius:99px; background:var(--carte); } .marqueur[data-etat="confirmee"] { color:var(--or); border:1px solid var(--or); } .marqueur[data-etat="brouillon"] { color:var(--opt); border:1px dashed var(--opt); } .actions-v { display:flex; flex-direction:column; gap:7px; } .action-l { display:flex; align-items:center; gap:var(--r3); text-align:left; width:100%; min-height:56px; padding:0 var(--r4); border-radius:14px; border:1px solid var(--trait-fort); background:var(--nuit-700); font-weight:600; font-size:15.5px; transition:transform var(--t-micro), background var(--t-micro), border-color var(--t-micro); } .action-l:active { transform:scale(.98); background:var(--nuit-600); } .action-l svg { width:20px; height:20px; fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; stroke:var(--or); flex:none; } .action-l.sup { border-color:rgba(255,107,133,.5); color:var(--erreur); } .action-l.sup svg { stroke:var(--erreur); } .modale { position:fixed; z-index:30; left:50%; top:50%; transform:translate(-50%,-50%); width:min(90%,420px); background:var(--nuit-700); border:1px solid rgba(255,107,133,.55); border-radius:20px; padding:var(--r5); display:none; flex-direction:column; gap:var(--r4); box-shadow:0 34px 90px -22px #000; } .modale.on { display:flex; animation:popm 220ms var(--rebond); } @keyframes popm { from{transform:translate(-50%,-50%) scale(.9); opacity:0} to{transform:translate(-50%,-50%) scale(1); opacity:1} } .modale h4 { font-size:22px; font-weight:800; margin:0; letter-spacing:-.025em; } .modale p { margin:0; font-size:14.5px; color:var(--blanc-doux); } .modale .bt { display:flex; gap:var(--r3); } .modale .bt button { flex:1; min-height:52px; border-radius:14px; font-weight:600; font-size:15px; transition:transform var(--t-micro); } .modale .bt button:active { transform:scale(.97); } .m-annul { border:1px solid var(--trait-actif); color:var(--blanc-doux); } .m-sup { background:var(--erreur); color:var(--nuit-900); font-weight:700; } /* `position:absolute` dans `.appli`, sur toute la largeur : le panneau recouvre la barre de navigation entière, flèches, titre et « Aujourd'hui » compris, au lieu de s'ouvrir dessous en en laissant dépasser la moitié. Le voile (z-index 20) passe derrière lui et devant le reste, donc plus rien de ce qu'il cache n'est cliquable. Le panneau y gagne : à cette largeur les douze mois tiennent sur une ou deux rangées de grandes cibles, au lieu d'une colonne de trois à viser. */ .mois-pop { position:absolute; z-index:26; left:var(--r3); right:var(--r3); top:6px; background:var(--nuit-700); border:1px solid var(--or-sourd); border-radius:20px; padding:var(--r4); display:none; flex-direction:column; gap:var(--r3); box-shadow:0 28px 70px -22px #000; } .mois-pop.on { display:flex; animation:monte 200ms var(--entree); } .mp-tete { display:flex; align-items:center; justify-content:center; gap:var(--r4); } .mp-tete .an { font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; } .mp-grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:7px; } .mp-grille button { min-height:var(--cible); border-radius:12px; border:1px solid var(--trait-fort); background:var(--nuit-600); font-size:13.5px; font-weight:600; transition:background var(--t-micro), transform var(--t-micro); } .mp-grille button:active { transform:scale(.95); } .mp-grille button[aria-pressed="true"] { background:var(--or); border-color:var(--or); color:var(--nuit-900); } .toast { position:fixed; z-index:40; left:50%; bottom:100px; transform:translateX(-50%) translateY(12px); background:var(--or); color:var(--nuit-900); border-radius:99px; padding:13px 24px; font-weight:700; font-size:14.5px; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; max-width:88%; opacity:0; pointer-events:none; transition:opacity 200ms, transform 260ms var(--rebond); box-shadow:0 14px 40px -12px #000; } .toast.on { opacity:1; transform:translateX(-50%) translateY(0); } .toast.erreur { background:var(--erreur); } .toast svg { width:18px; height:18px; stroke:var(--nuit-900); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; flex:none; } @media (max-width:640px) { .titre-mois .m { font-size:19px; } .titre-mois .s { font-size:12.5px; } .barre { gap:3px; padding:10px 8px 8px; } .b-plat { padding:0 10px; font-size:13px; } } /* ========================================================================== Back-office -------------------------------------------------------------------------- Vocabulaire volontairement court, pour que les écrans à venir (matériel, incidents, notes de frais) se composent sans réinventer de mise en page : .admin-corps > .rail + .admin-page la charpente de toute page .cadre / .cadre-tete un bloc de travail titré .form-grille (+ .paire) un formulaire de saisie .tw > table.t une liste .message / .encart-code le retour d'une action .aide, .jeton, .pastille-etat les petits éléments de texte Un style en ligne dans un gabarit d'administration est le signe qu'il manque un mot à cette liste : mieux vaut l'ajouter ici. TOUTES les règles ci-dessous sont préfixées par `.admin`. Ce n'est pas de la coquetterie : `.panneau` désignait déjà le tiroir de réservation du planning, `position:fixed; display:none`. Sans portée, le formulaire de création de compte héritait de ce `display:none` et disparaissait, sans erreur, sans rien dans la console. Un back-office qui va accueillir dix écrans de plus ne peut pas partager son vocabulaire avec le reste de l'application. ========================================================================== */ /* Pleine largeur, comme le planning et le matériel. Avant : `max-width:1320px; margin:0 auto`. Dans un conteneur flex, une marge automatique sur l'axe transverse **empêche l'étirement** : le bloc reprenait sa largeur de contenu, puis se recentrait. Résultat, le rail des rubriques sautait de 196 px entre deux pages, 316 sur « Utilisateurs » (tableau large), 512 sur « Vue d'ensemble » (contenu court), et la personne devait retrouver le menu à chaque clic. Un menu doit être au même endroit, toujours. */ .admin { width:100%; padding:var(--r4) var(--r5) var(--r6); } /* ---------- charpente : rail + page ---------- */ /* 244 et non 216 : l'icône et son écart prennent 29 px, et « Rôles et permissions » passait sur deux lignes. Un menu dont les entrées font une ou deux lignes selon le mot se lit moins vite qu'un menu régulier. */ .admin .admin-corps { display:grid; grid-template-columns:244px minmax(0,1fr); gap:var(--r5); align-items:start; } .admin .rail-resume { display:none; } .admin .rail { position:sticky; top:var(--r4); display:flex; flex-direction:column; gap:var(--r4); } .admin .rail-groupe { display:flex; flex-direction:column; gap:2px; } .admin .rail-titre { font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blanc-faible); margin:0 0 6px; padding:0 var(--r3); } /* L'icône n'est pas une décoration : à dix rubriques, elle permet de retrouver « Bornes » sans relire les dix libellés. Elle reste grise et prend la couleur du texte quand la rubrique est ouverte, pour ne pas faire dix taches dorées. */ .admin .rail-lien > svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.72; } .admin .rail-lien[aria-current="page"] > svg { opacity:1; stroke:var(--or); } .admin .rail-lien > span { min-width:0; overflow:hidden; text-overflow:ellipsis; } .admin .rail-lien { min-height:44px; display:flex; align-items:center; gap:11px; padding:0 var(--r3); border-radius:11px; color:var(--blanc-doux); text-decoration:none; font-size:14.5px; font-weight:600; border:1px solid transparent; transition:background var(--t-micro), color var(--t-micro); } .admin .rail-lien:hover { background:var(--nuit-700); color:var(--blanc); } .admin .rail-lien[aria-current="page"] { background:var(--nuit-600); color:var(--blanc); border-color:var(--trait-fort); box-shadow:inset 3px 0 0 var(--or); } .admin .page-tete { margin-bottom:var(--r4); } .admin .page-tete h1 { font-size:27px; font-weight:800; letter-spacing:-.03em; margin:0; } .admin .page-tete p { margin:4px 0 0; font-size:14.5px; color:var(--blanc-faible); } /* ---------- blocs ---------- */ /* « cadre » et non « bloc » : `.bloc` désigne déjà une colonne du panneau de réservation du planning, en `display:flex; flex-direction:column`. Ces règles s'appliquaient à chaque panneau du back-office sans que rien ne le signale. Voir tests/test_css.py. */ .admin .cadre { border:1px solid var(--trait-fort); background:var(--nuit-700); border-radius:16px; padding:var(--r4); margin-bottom:var(--r4); } .admin .cadre-tete { display:flex; flex-wrap:wrap; align-items:center; gap:var(--r3); margin-bottom:var(--r4); } .admin .cadre-tete h2 { font-size:18px; font-weight:700; letter-spacing:-.02em; margin:0; flex:1; min-width:0; } /* Un titre accompagné de sa description : c'est le bloc qui prend la place, et le titre ne s'étire plus lui-même, sinon il pousserait la description en bas de la colonne. */ .admin .cadre-tete > .nom-et-detail { flex:1; } .admin .cadre-tete > .nom-et-detail > h2 { flex:none; } .admin .cartes { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--r3); margin-bottom:var(--r4); } .admin .tuile { border:1px solid var(--trait-fort); background:var(--nuit-700); border-radius:16px; padding:var(--r4); display:flex; flex-direction:column; gap:2px; text-decoration:none; color:inherit; transition:border-color var(--t-micro), transform var(--t-micro) var(--entree); } .admin .tuile:hover { border-color:var(--trait-actif); transform:translateY(-2px); } .admin .tuile .v { font-size:30px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; } .admin .tuile .l { font-size:13px; color:var(--blanc-faible); } /* ---------- formulaires ---------- Grille, et non rangée en flex. La version précédente utilisait `display:flex; align-items:flex-end` : dès qu'un champ devenait plus haut que les autres, une liste de rôles qui passe sur deux lignes, tous les champs courts étaient poussés vers le bas de la rangée et se retrouvaient désalignés avec leurs propres libellés. `align-items:start` sur une grille supprime la cause : chaque champ commence en haut de sa cellule, quelle que soit la hauteur de ses voisins. */ .admin .form-grille { /* 230 et non 190 : en dessous, une liste déroulante coupe ses propres options, « tablette partagé », « Salles & réserva… ». Un champ dont on ne peut pas lire la valeur choisie ne remplit pas son office. */ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--r3); align-items:start; } .admin .form-grille.paire { grid-template-columns:minmax(200px,260px) minmax(0,1fr); } .admin .form-grille .actions { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--r3); padding-top:var(--r3); border-top:1px solid var(--trait); } .admin .champ { display:flex; flex-direction:column; gap:6px; min-width:0; } /* `:not(.case-role)` n'est pas une precaution : sans lui, ce selecteur s'appliquait aussi aux etiquettes des cases a cocher, qui se retrouvaient en capitales de 11 px tres espacees, « ADMINISTRATION », « LECTURE SEULE », illisibles alors qu'elles portent le texte que la personne doit lire. */ .admin .champ label:not(.case-role) { font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--blanc-faible); font-weight:600; } .admin .champ input, .admin .champ select { width:100%; min-height:48px; padding:0 var(--r3); border-radius:12px; border:1px solid var(--trait-actif); background:var(--nuit-600); color:var(--blanc); font-size:15px; font-weight:600; outline:none; } /* Une liste deroulante etiree sur toute la colonne laissait sa fleche a 150 px du mot qu'elle concerne : on ne lisait plus les deux comme un seul controle. Largeur plafonnee, et chevron dessine a nous plutot que celui du systeme. */ .admin .champ select { appearance:none; -webkit-appearance:none; max-width:320px; padding-right:40px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2396A2BA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:16px; } .admin .champ.plein select { max-width:none; } .admin .champ input:focus, .admin .champ select:focus { border-color:var(--or); } .admin .champ input:disabled { opacity:.55; cursor:not-allowed; } .admin .champ.court { max-width:150px; } .admin .champ.large { grid-column:1/-1; } .admin .champ.bref { max-width:220px; } /* Un champ posé directement dans un cadre, après un paragraphe d'explication : sans cet écart, son intitulé en capitales colle à la dernière ligne du paragraphe et se lit comme sa suite. Dans une `form-grille`, c'est la grille qui gère l'espacement, d'où le sélecteur direct. */ .admin .cadre > .champ { margin-top:var(--r4); } /* ---------- le constructeur de rappel ---------- */ /* La zone de saisie du message. En monospace : on y écrit des emplacements entre doubles accolades, et une police proportionnelle rend « {{ » et « }} » presque identiques, si bien qu'une accolade manquante ne se voit pas. */ .admin .champ textarea { width:100%; min-height:180px; padding:var(--r3); border-radius:12px; border:1px solid var(--trait-actif); background:var(--nuit-600); color:var(--blanc); font-size:14.5px; line-height:1.6; outline:none; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; resize:vertical; } .admin .champ textarea:focus { border-color:var(--or); } /* Le sélecteur de couleur natif : sans hauteur imposée il fait 24 px de haut au milieu de champs de 48, et la ligne se désaligne. */ .admin .champ input[type="color"] { padding:5px; height:48px; cursor:pointer; } .admin .jetons-emplacements { display:flex; flex-wrap:wrap; gap:8px; } .admin .jeton-emplacement { display:flex; flex-direction:column; gap:2px; align-items:flex-start; min-height:44px; padding:7px 12px; border-radius:11px; border:1px solid var(--trait-fort); background:var(--nuit-600); color:var(--blanc-doux); font:inherit; font-size:12.5px; text-align:left; cursor:pointer; } .admin .jeton-emplacement:hover { border-color:var(--or); } .admin .jeton-emplacement .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:var(--or); font-weight:600; } .admin .jeton-emplacement > span:last-child { color:var(--blanc-faible); } /* Les réglages de la carte, quand la carte est éteinte. Estompés et non masqués : les faire disparaître fait sauter la page de trois cents pixels au moment où l'on coche, et l'on perd de vue ce qu'on était en train de lire. */ .admin .eteint-bloc { opacity:.4; pointer-events:none; } /* L'aperçu, présenté comme un message : c'est ce qu'on cherche à juger, et un texte brut à côté d'une image ne dit pas à quoi ça ressemblera dans le salon. */ .admin .apercu-discord { border:1px solid var(--trait-fort); border-radius:14px; background:var(--nuit-800); padding:var(--r4); display:flex; flex-direction:column; gap:var(--r3); } .admin .apercu-message { white-space:pre-wrap; font-size:15px; line-height:1.55; color:var(--blanc); margin:0; } .admin .apercu-carte { display:block; width:100%; max-width:520px; height:auto; border-radius:10px; border:1px solid var(--trait); } /* Le formulaire d'un espace : sept champs sur une seule ligne, chacun à la largeur de ce qu'il reçoit. Une grille à colonnes égales donnait autant de place à « Ordre », qui prend un chiffre, qu'à « Nom », et repoussait la case « Louable » sur la ligne d'après. En flex, chaque champ déclare sa base et le repli se fait tout seul quand la fenêtre rétrécit. */ .admin .grille-espace { display:flex; flex-wrap:wrap; gap:var(--r3); align-items:flex-start; } .admin .grille-espace > .champ { flex:1 1 190px; min-width:0; } .admin .grille-espace > .champ.bref { flex:0 1 130px; } .admin .grille-espace > .champ.minute { flex:0 1 92px; } .admin .grille-espace > .champ.bascule { flex:0 0 auto; } .admin .grille-espace > .actions { flex:1 0 100%; display:flex; flex-wrap:wrap; align-items:center; gap:var(--r3); padding-top:var(--r3); border-top:1px solid var(--trait); } /* La case à cocher fait 44 px, un champ de saisie 48 : sans ce décalage la bascule flotterait deux pixels trop haut par rapport à ses voisines. */ .admin .grille-espace > .champ.bascule .case-role { min-height:48px; } @media (max-width:560px) { .admin .grille-espace > .champ, .admin .grille-espace > .champ.bref, .admin .grille-espace > .champ.minute { flex:1 1 100%; } } /* Le champ qui porte l'essentiel de la saisie prend deux colonnes : à largeur égale, le nom de l'article se retrouvait plus étroit que « Colonne ». */ .admin .champ.large { grid-column:span 2; } /* En dessous de 560 px la grille n'a qu'une colonne, et `span 2` en réclame deux : le navigateur en crée une seconde, implicite, et TOUS les champs de la grille passent à 160 px, « borne (libre accès) » s'affichait « bor… ». `1 / -1` occupe les colonnes existantes au lieu d'en inventer une. */ @media (max-width:560px) { .admin .champ.large { grid-column:1 / -1; } } .admin .champ.court.etroit { max-width:112px; } .admin .actions-pied { margin-top:var(--r3); padding-top:var(--r3); border-top:1px solid var(--trait); } /* `inline-flex` + centrage, et pas seulement `min-height` : cette classe est posée aussi bien sur un