/* ========================================================================= Feuille de style unique, ecrite pour le telephone d'abord. Deux regles de construction : 1. Le point de depart est la colonne etroite. Toutes les requetes media sont des min-width : elles ajoutent de la largeur, elles ne reparent jamais une mise en page pensee pour un ecran large. 2. Une seule feuille pilote les deux directions. Il n'existe pas de fichier arabe separe : tout passe par les proprietes logiques (margin-inline, padding-inline, inset-inline, text-align: start) et par l'attribut dir pose sur . La seule variable directionnelle du fichier est --flip, utilisee uniquement la ou une transformation physique est inevitable (glissement du tiroir, miroir des icones porteuses de direction). ========================================================================= */ :root { --navy: #04285B; --blue: #0560E3; --cyan: #4ECCEC; --green: #23E294; --amber: #F1BC00; --red: #C81E1E; --ink: #0d2444; --ink-2: rgba(4, 40, 91, .78); --ink-3: rgba(4, 40, 91, .62); --line: rgba(4, 40, 91, .12); --line-soft: rgba(4, 40, 91, .07); --surface: #ffffff; --surface-2: #F7FAFF; --r-s: 8px; --r-m: 12px; --r-l: 18px; --r-xl: 26px; /* Cible tactile minimale. Aucun controle de cette interface ne descend sous cette valeur, dans aucune direction. */ --tap: 48px; /* Plancher typographique. Aucun texte visible ne descend sous 14px. */ --fs-min: 14px; --gut: clamp(12px, 3.4vw, 28px); --page: 1400px; --flip: 1; --font-latin: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Pile arabe. Aucun webfont tiers n'est redistribue ici : voir le bloc @font-face commente plus bas, pret a recevoir une fonte sous licence. */ --font-arabic: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", "Tahoma", system-ui, sans-serif; /* Les fontes arabes sont ajoutees a la fin de la pile monospace exprès. Le repli de fonte se fait caractere par caractere : les chiffres gardent la fonte monospace et restent alignes en colonne, tandis qu'un mot arabe dans un en-tete numerique rend en Naskh au lieu de tomber sur une monospace sans facon arabe. */ --font-num: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, monospace; } /* @font-face { font-family: "CentreArabic"; src: url("./fonts/centre-arabic.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; } */ [dir="rtl"] { --flip: -1; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: radial-gradient(1100px 620px at 12% -8%, rgba(78, 204, 236, .30), transparent 62%), radial-gradient(980px 560px at 92% 6%, rgba(5, 96, 227, .18), transparent 60%), radial-gradient(820px 520px at 40% 100%, rgba(35, 226, 148, .16), transparent 62%), linear-gradient(180deg, #ffffff 0%, #F0F7FF 45%, #ffffff 100%); background-attachment: fixed; color: var(--ink); font-family: var(--font-latin); font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100%; /* Rien ne doit deborder la fenetre en largeur, dans aucune direction. */ overflow-x: hidden; } html[lang="ar"] body, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] button, html[lang="ar"] textarea { font-family: var(--font-arabic); } h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; } p { margin: 0; } ul, ol { margin: 0; padding-inline-start: 1.15rem; } li { margin-block-end: 6px; } a { color: var(--blue); } img, svg { max-inline-size: 100%; } button, input, select, textarea { font: inherit; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; } .sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: fixed; inset-block-start: 6px; inset-inline-start: 6px; z-index: 200; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 10px; transform: translateY(-200%); font-weight: 700; font-size: 15px; min-block-size: var(--tap); display: inline-flex; align-items: center; text-decoration: none; } .skip:focus { transform: none; } /* ===================== Barre d'application ============================== */ /* Sur telephone la barre defile avec la page : une barre collante mangerait un cinquieme de la hauteur utile en permanence. Elle ne devient collante qu'a partir de la largeur ou elle tient sur une seule ligne. */ .topbar { position: static; z-index: 40; background: rgba(255, 255, 255, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-block-end: 1px solid var(--line-soft); } .topbar__inner { max-inline-size: min(var(--page), 100%); margin-inline: auto; padding: 10px var(--gut); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; } .brandline { display: flex; align-items: center; gap: 10px; min-inline-size: 0; flex: 1 1 auto; } .brandmark { inline-size: 38px; block-size: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 4px 12px rgba(5, 96, 227, .3); flex: none; } .brandline__name { font-weight: 900; font-size: 17px; color: var(--navy); line-height: 1.2; } .brandline__sub { font-size: var(--fs-min); color: var(--ink-3); font-weight: 600; } .topbar__controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; inline-size: 100%; } .segmented { display: inline-flex; background: rgba(4, 40, 91, .05); border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px; gap: 2px; } .segmented button { border: 0; background: transparent; border-radius: 999px; padding: 0 14px; font-size: var(--fs-min); font-weight: 800; color: var(--ink-2); cursor: pointer; min-block-size: var(--tap); min-inline-size: var(--tap); } .segmented button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 2px 8px rgba(4, 40, 91, .14); } .segmented--num button { font-family: var(--font-num); font-size: 15px; } .btn-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 0 16px; font-size: var(--fs-min); font-weight: 800; color: var(--ink-2); cursor: pointer; min-block-size: var(--tap); } .btn-quiet:hover { border-color: var(--blue); color: var(--navy); } /* ===================== Coquille : la grille suit la direction ============ */ .shell { max-inline-size: min(var(--page), 100%); margin-inline: auto; padding: 14px var(--gut) 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } /* Sur telephone le menu est une grille qui enveloppe : les six sections sont toutes visibles a la fois. Aucune bande a faire defiler lateralement, donc aucune section ne peut se cacher hors de l'ecran. */ .sidenav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 10px 30px rgba(4, 40, 91, .08); border-radius: var(--r-l); padding: 8px; } .navitem { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: var(--r-m); border: 0; background: transparent; color: var(--ink-2); font-weight: 700; font-size: 15px; line-height: 1.2; cursor: pointer; text-align: start; min-block-size: var(--tap); inline-size: 100%; } .navitem:hover { background: rgba(5, 96, 227, .07); color: var(--navy); } .navitem[aria-current="page"] { background: linear-gradient(120deg, rgba(5, 96, 227, .12), rgba(78, 204, 236, .14)); color: var(--navy); box-shadow: inset 0 0 0 1px rgba(5, 96, 227, .18); } .navitem .ico { flex: none; } .navitem__count { margin-inline-start: auto; font-size: var(--fs-min); font-family: var(--font-num); color: var(--ink-3); background: rgba(4, 40, 91, .06); border-radius: 999px; padding: 2px 9px; flex: none; } .content { min-inline-size: 0; } .content:focus { outline: none; } /* ===================== Surfaces applicatives ============================ */ .card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-l); box-shadow: 0 6px 22px rgba(4, 40, 91, .06); padding: 14px; margin-block-end: 16px; } .card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-block-end: 12px; } .card h2 { font-size: 19px; color: var(--navy); } .card h3 { font-size: 16px; color: var(--navy); } .muted { color: var(--ink-3); font-size: var(--fs-min); font-weight: 600; } .page-head { margin-block-end: 14px; } .page-head h1 { font-size: clamp(24px, 6.4vw, 32px); color: var(--navy); font-weight: 900; } .page-head h1 .grad { background: linear-gradient(90deg, var(--blue), var(--cyan) 60%, var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; } .page-head p { color: var(--ink-2); font-size: 16px; margin-block-start: 8px; max-inline-size: 78ch; } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-block-end: 16px; } .tile { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-l); padding: 13px; box-shadow: 0 6px 20px rgba(4, 40, 91, .05); } .tile__k { font-size: var(--fs-min); font-weight: 700; color: var(--ink-3); display: flex; align-items: center; gap: 6px; } .tile__v { font-size: clamp(22px, 6vw, 26px); font-weight: 900; color: var(--navy); margin-block-start: 4px; letter-spacing: -.02em; } .tile__n { font-size: var(--fs-min); color: var(--ink-3); font-weight: 600; } /* Barres de progression : remplissage depuis le bord de debut, sans transform */ .bar { block-size: 8px; background: rgba(4, 40, 91, .08); border-radius: 999px; overflow: hidden; margin-block-start: 8px; } .bar > i { display: block; block-size: 100%; border-start-start-radius: 999px; border-end-start-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--cyan)); } .bar--ok > i { background: linear-gradient(90deg, #0A6C44, var(--green)); } .bar--warn > i { background: linear-gradient(90deg, #8a6b00, var(--amber)); } /* ===================== Tableaux ========================================= Sur telephone un tableau de donnees est le mauvais composant : neuf colonnes ne tiennent pas dans 360 pixels sans rapetisser le texte ou le pousser hors de l'ecran. Chaque ligne devient donc une fiche, et chaque cellule porte son intitule dans data-l. L'element reste un
: l'en-tete est masque visuellement mais reste lisible par un lecteur d'ecran, et la disposition tabulaire revient telle quelle des que la largeur le permet. ======================================================================== */ .tablewrap { overflow-x: auto; } table { inline-size: 100%; border-collapse: collapse; font-size: 15px; } /* En mode fiche l'en-tete du tableau disparait entierement. Le masquer visuellement ne suffirait pas : ses cellules garderaient une boite, ses boutons de tri resteraient des arrets de tabulation invisibles a 400 pixels hors de l'ecran. Chaque cellule porte son intitule dans data-l, donc rien n'est perdu en le retirant. */ .rt thead { display: none; } .rt tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .rt tr { display: block; border: 1px solid var(--line-soft); border-radius: var(--r-m); background: var(--surface-2); padding: 10px 12px; } .rt td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-block-end: 1px solid var(--line-soft); text-align: start; } .rt td::before { content: attr(data-l); color: var(--ink-3); font-weight: 700; font-size: var(--fs-min); flex: 0 1 auto; min-inline-size: 0; } .rt td:last-child { border-block-end: 0; padding-block-end: 0; } .rt td.num { text-align: end; } /* Ligne de titre de la fiche : le nom, en grand, sans intitule. */ .rt td.c-main { display: block; font-size: 17px; font-weight: 800; color: var(--navy); padding-block: 2px 9px; border-block-end: 1px solid var(--line); } .rt td.c-main::before { content: none; } /* Cellule d'action : bouton pleine largeur, jamais un lien minuscule. */ .rt td.c-act { display: block; padding-block: 10px 0; border-block-end: 0; } .rt td.c-act::before { content: none; } .rt td.c-act .rowbtn { inline-size: 100%; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-m); background: #fff; } /* Cellule large : l'intitule passe au dessus et le contenu prend toute la largeur de la fiche. Utilisee la ou la cellule contient un groupe de boutons ou une barre de progression, pas une seule valeur. */ .rt td.c-full { display: block; padding-block: 10px 0; border-block-end: 0; } .rt td.c-full::before { display: block; margin-block-end: 7px; } /* Cellule vide : rien a afficher en mode fiche. */ .rt td.c-none { display: none; } .rt td .att { inline-size: 100%; } thead th { background: var(--surface-2); text-align: start; font-weight: 800; color: var(--ink-2); font-size: var(--fs-min); padding: 10px 12px; border-block-end: 1px solid var(--line); white-space: nowrap; } thead th button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 10px 12px; inline-size: 100%; box-sizing: border-box; min-block-size: var(--tap); font-size: var(--fs-min); font-weight: 800; } thead th button:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; } thead th:has(button) { padding: 0; } thead th.num button, thead th.num { text-align: end; } thead th.num button { justify-content: flex-end; } tbody td { vertical-align: middle; } tbody tr:hover { background: rgba(5, 96, 227, .04); } td.num, th.num { font-family: var(--font-num); white-space: nowrap; } .code { font-family: var(--font-num); font-size: 15px; color: var(--ink-2); } .rowbtn { all: unset; cursor: pointer; color: var(--blue); font-weight: 800; font-size: 15px; padding: 0 10px; min-block-size: var(--tap); min-inline-size: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; } .rowbtn:hover { text-decoration: underline; } .rowbtn:focus-visible { outline: 3px solid var(--blue); outline-offset: -2px; } .sortcue { font-size: var(--fs-min); color: var(--ink-3); } .pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: var(--fs-min); font-weight: 800; white-space: nowrap; } .pill--ok { background: rgba(10, 108, 68, .10); color: #0A6C44; } .pill--warn { background: rgba(241, 188, 0, .18); color: #6b5200; } .pill--bad { background: rgba(200, 30, 30, .10); color: var(--red); } .pill--info { background: rgba(5, 96, 227, .10); color: var(--blue); } .pill--idle { background: rgba(4, 40, 91, .07); color: var(--ink-3); } /* ===================== Controles ======================================= */ .toolrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-block-end: 12px; } .field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 min(100%, 220px); min-inline-size: 0; } .field > label { font-size: var(--fs-min); font-weight: 800; color: var(--ink-2); } .field input, .field select { /* 16px exactement : en dessous, iOS agrandit la page a la mise au point du champ et l'utilisateur se retrouve avec une mise en page decalee. */ font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: #fff; color: var(--ink); min-block-size: var(--tap); inline-size: 100%; } .field input:hover, .field select:hover { border-color: rgba(5, 96, 227, .5); } .search { position: relative; } .search .ico { position: absolute; inset-inline-start: 12px; inset-block-start: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; } .search input { padding-inline-start: 40px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--r-m); background: linear-gradient(120deg, var(--blue), var(--cyan)); color: #fff; font-weight: 800; font-size: 15px; padding: 10px 18px; cursor: pointer; min-block-size: var(--tap); flex: 1 1 auto; box-shadow: 0 6px 18px rgba(5, 96, 227, .28); } .btn:hover { filter: brightness(1.05); } .btn--sec { background: #fff; color: var(--navy); border: 1px solid var(--line); box-shadow: none; } .btn--sec:hover { border-color: var(--blue); } .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; } .pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-start: 12px; } .pager__info { font-size: var(--fs-min); color: var(--ink-3); font-weight: 700; inline-size: 100%; } /* Groupe a trois etats pour la presence. Trois cibles egales sur toute la largeur de la fiche : aucune ne descend sous 48 pixels. */ .att { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; } .att button { all: unset; cursor: pointer; padding: 0 6px; font-size: var(--fs-min); font-weight: 800; color: var(--ink-3); min-block-size: var(--tap); display: inline-flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; } .att button + button { border-inline-start: 1px solid var(--line); } .att button[aria-pressed="true"][data-v="present"] { background: rgba(10,108,68,.14); color: #0A6C44; } .att button[aria-pressed="true"][data-v="late"] { background: rgba(241,188,0,.24); color: #6b5200; } .att button[aria-pressed="true"][data-v="absent"] { background: rgba(200,30,30,.12); color: var(--red); } .att button:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; } /* Tri en mode fiche : quand l'en-tete du tableau est masque, ses boutons de tri le sont aussi. Ce groupe les remplace et ecrit dans le meme etat. */ .sortbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-block-end: 10px; } .wide-only { display: none; } /* ===================== Tiroir : la seule transformation physique ======== */ .drawer-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(4, 40, 91, .35); backdrop-filter: blur(2px); } .drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 100; inline-size: min(430px, 100%); background: #fff; border-inline-start: 1px solid var(--line); box-shadow: 0 0 50px rgba(4, 40, 91, .22); overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); translate: calc(var(--flip) * 100%) 0; transition: translate .24s ease; } .drawer[data-open="true"] { translate: 0 0; } @media (prefers-reduced-motion: reduce) { .drawer { transition: none; } } .drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-block-end: 12px; } .drawer__title { font-size: 20px; color: var(--navy); } .drawer__close { all: unset; cursor: pointer; border-radius: 12px; color: var(--ink-2); min-inline-size: var(--tap); min-block-size: var(--tap); display: inline-grid; place-items: center; border: 1px solid var(--line); flex: none; } .drawer__close:hover { background: rgba(4, 40, 91, .07); } .kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 14px; font-size: 15px; margin-block: 10px; } .kv dt { color: var(--ink-3); font-weight: 700; } .kv dd { margin: 0 0 10px; font-weight: 700; color: var(--navy); } .toast { position: fixed; inset-block-end: 18px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 150; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 800; font-size: 15px; box-shadow: 0 12px 30px rgba(4, 40, 91, .35); max-inline-size: min(420px, calc(100vw - 24px)); text-align: center; } /* ===================== Icones ========================================== */ .ico { inline-size: 18px; block-size: 18px; flex: none; } /* Seules les icones porteuses de direction sont mises en miroir. */ [dir="rtl"] .ico--dir { transform: scaleX(-1); } .legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .legend__i { border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: 11px; display: flex; align-items: center; gap: 10px; background: var(--surface-2); } .legend__i .ico { inline-size: 22px; block-size: 22px; color: var(--navy); } .legend__i b { font-size: 15px; display: block; color: var(--navy); } .legend__i span { font-size: var(--fs-min); color: var(--ink-3); font-weight: 700; } /* ===================== Panneaux de controle i18n ======================== */ .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .demo-box { border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: 12px; background: var(--surface-2); } .demo-box > b { display: block; font-size: var(--fs-min); color: var(--ink-2); margin-block-end: 8px; } .sample { font-size: 16px; line-height: 1.9; } .sample--bad { background: rgba(200, 30, 30, .05); border-radius: 8px; padding: 9px; } .sample--good { background: rgba(10, 108, 68, .06); border-radius: 8px; padding: 9px; } .olist { counter-reset: n; list-style: none; padding: 0; margin: 0; } .olist li { counter-increment: n; display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-block-end: 1px solid var(--line-soft); font-size: 15px; margin-block-end: 0; } .olist li::before { content: counter(n); font-family: var(--font-num); font-size: var(--fs-min); color: var(--ink-3); inline-size: 22px; flex: none; text-align: end; } .olist li:last-child { border-block-end: 0; } .note { border-inline-start: 3px solid var(--cyan); background: rgba(78, 204, 236, .08); padding: 11px 14px; border-radius: 0 var(--r-m) var(--r-m) 0; font-size: 15px; color: var(--ink-2); font-weight: 600; } [dir="rtl"] .note { border-radius: var(--r-m) 0 0 var(--r-m); } /* ===================== Recu ============================================ */ .receipt { background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; max-inline-size: min(640px, 100%); } .receipt__top { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-block-end: 2px solid var(--navy); padding-block-end: 12px; } .receipt__title { font-size: 20px; font-weight: 900; color: var(--navy); } .receipt table { margin-block: 14px; } .receipt__total { display: flex; justify-content: space-between; gap: 16px; border-block-start: 2px solid var(--navy); padding-block-start: 10px; font-weight: 900; font-size: 18px; color: var(--navy); } .receipt__sign { margin-block-start: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; font-size: var(--fs-min); color: var(--ink-3); } .receipt__sign div { border-block-start: 1px dotted var(--ink-3); padding-block-start: 6px; flex: 1 1 min(100%, 170px); text-align: center; } /* ===================== Pied ============================================ */ .foot { max-inline-size: min(var(--page), 100%); margin-inline: auto; padding: 0 var(--gut) 40px; color: var(--ink-3); font-size: var(--fs-min); font-weight: 600; line-height: 1.75; } .foot p { margin-block-end: 8px; max-inline-size: 82ch; } .foot a { color: var(--ink-2); font-weight: 800; display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline-end: 4px; } /* ===================== Elargissement =================================== Tout ce qui suit ajoute de la largeur. Rien ici ne repare la vue etroite. ======================================================================= */ /* Deux fiches cote a cote des que la colonne le permet. */ @media (min-width: 560px) { .sidenav { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rt tbody { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } .split { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .kv { grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; } .kv dd { margin-block-end: 0; } .pager__info { inline-size: auto; margin-inline-end: auto; } .btn { flex: 0 0 auto; } } /* Retour a une vraie disposition tabulaire. Au dela de cette largeur, un tableau de neuf colonnes tient sans rapetisser le texte. */ @media (min-width: 860px) { .tablewrap { border: 1px solid var(--line-soft); border-radius: var(--r-m); /* Ombres de defilement : elles apparaissent du cote ou il reste du contenu et disparaissent quand on atteint le bord. C'est l'affordance qui manquait, et elle marche dans les deux directions. */ background: linear-gradient(to right, var(--surface) 34%, rgba(255, 255, 255, 0)) left center, linear-gradient(to left, var(--surface) 34%, rgba(255, 255, 255, 0)) right center, radial-gradient(farthest-side at 0 50%, rgba(4, 40, 91, .22), rgba(4, 40, 91, 0)) left center, radial-gradient(farthest-side at 100% 50%, rgba(4, 40, 91, .22), rgba(4, 40, 91, 0)) right center; background-repeat: no-repeat; background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%; background-attachment: local, local, scroll, scroll; } .rt thead { display: table-header-group; } .rt thead th { position: sticky; inset-block-start: 0; z-index: 1; } .rt tbody { display: table-row-group; } .rt tr { display: table-row; border: 0; border-radius: 0; padding: 0; background: none; } .rt td { display: table-cell; padding: 9px 12px; border-block-end: 1px solid var(--line-soft); text-align: start; } .rt td::before { content: none; } .rt td.num { text-align: end; } .rt td.c-main { display: table-cell; font-size: 15px; font-weight: 400; color: inherit; padding: 9px 12px; border-block-end: 1px solid var(--line-soft); } .rt td.c-act { display: table-cell; padding: 9px 12px; border-block-end: 1px solid var(--line-soft); } .rt td.c-act .rowbtn { inline-size: auto; border: 0; background: none; } .rt td.c-full { display: table-cell; padding: 9px 12px; border-block-end: 1px solid var(--line-soft); min-inline-size: 130px; } .rt td.c-full::before { content: none; } .rt td.c-none { display: table-cell; padding: 9px 12px; border-block-end: 1px solid var(--line-soft); } .rt tr:last-child td { border-block-end: 0; } .rt td .att { inline-size: auto; display: inline-grid; grid-template-columns: repeat(3, auto); } .att button { padding: 0 13px; } .narrow-only { display: none; } .wide-only { display: revert; } } /* Le menu redevient une colonne. En RTL la premiere colonne de la grille est posee a droite par le moteur de rendu : le menu change de cote sans une seule regle supplementaire. */ @media (min-width: 1040px) { .topbar { position: sticky; inset-block-start: 0; } .topbar__controls { inline-size: auto; } .shell { grid-template-columns: minmax(200px, 15rem) minmax(0, 1fr); gap: 18px; padding-block-start: 18px; } .sidenav { position: sticky; inset-block-start: 84px; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px; } .card { padding: 16px; } } @media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }